/*
 * Fiscal Manager - mobiili- ja tablettikorjaukset (26.10.21.1, BACKLOG #114)
 * Ladataan VIIMEISENÄ new/-tyylien jälkeen. Ei muuta työpöytänäkymää (>= 992 px) lainkaan.
 * Sama periaate kuin MuxWebin muxweb-mobile.css: pointer:coarse = kosketus, leveysrajat = asettelu.
 */

/* ---------- Kosketusnäytöt (puhelin + tabletti), leveydestä riippumatta ---------- */
@media (pointer: coarse) {
    /* Listarivit riittävän korkeiksi sormelle */
    #Tiedostot .e-list-item,
    #Playerit .e-list-item,
    .fix-listbox .e-list-item,
    .matala-rivi .e-list-item {
        min-height: 40px !important;
        line-height: 1.4;
    }
    /* Painikkeet vähintään 40 px korkeita */
    .e-btn, .btn, button {
        min-height: 40px;
    }
    .files-buttons .e-btn {
        min-height: 36px;
    }
    /* iOS zoomaa, jos syötekentän fontti on alle 16 px */
    input, select, textarea, .e-input, .e-ddl .e-input {
        font-size: 16px !important;
    }
    /* Hover-efektit eivät toimi kosketuksella — ei jäädä "hover-tilaan" */
    .flag-icon:hover { transform: none; }
}

/* ---------- Tabletti ja puhelin (< 992 px) ---------- */
@media (max-width: 991.98px) {
    /* Etusivun 3-sarakkeinen taulukko (45/25/30 %) → sarakkeet allekkain */
    /* 26.10.21.14: mittaus 21.10.: TABLE oli 492 px vaikka säiliö 367 px — taulukko laski leveyden sisällön mukaan.
       Myös table/tbody/tr blokeiksi, jolloin leveys tulee säiliöstä. */
    .body-content .table-responsive > .table,
    .body-content .table-responsive > .table > tbody,
    .body-content .table-responsive > .table > tbody > tr {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }
    .body-content .table-responsive > .table > tbody > tr > td {
        display: block;
        width: 100% !important;
        padding: 6px 0;
    }
    /* Tiedostorivin painike oli kiinteä 410 px — venyy sarakkeen mukaan */
    #Tiedostot .file-button {
        width: 100% !important;
        max-width: 100%;
    }
    #Playerit {
        padding-top: 10px;
    }
    /* 26.10.21.13: etusivun listat — Syncfusion antaa wrapperille inline-leveyden (480 / 200 px), joten koko listan sisältö
       (painikkeet, oikean reunan valintaruutu, näytön tilakuvake) jäi piiloon oikealle. Kaikki tasot leveyteen. */
    .files-content, .player-content, .custom-uploader {
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .files-content .e-listbox-wrapper, .files-content .e-listbox-container, .files-content .e-list-parent,
    .files-content .e-list-item, .files-content .e-ul,
    .player-content .e-listbox-wrapper, .player-content .e-listbox-container, .player-content .e-list-parent,
    .player-content .e-list-item, .player-content .e-ul {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    #Tiedostot .e-list-item { display: flex !important; align-items: center; margin-right: 0 !important; padding: 2px 4px !important; }
    #Tiedostot .file-item-wrapper { flex: 1 1 auto; min-width: 0; }
    #Tiedostot .file-button .button-content { min-width: 0; }
    #Tiedostot .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #Tiedostot .e-checkbox-wrapper { flex: 0 0 auto; float: none !important; margin-left: 6px !important; }
    /* Näyttölista: nimi kutistuu, tilakuvake pysyy oikealla näkyvissä */
    #Playerit .custom-item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 0; }
    #Playerit .icon-container { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden; }
    #Playerit .item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #Playerit .custom-item > .status-icon { flex: 0 0 auto; margin-left: 6px; }
    /* Tiedostolistan yläpainikkeet: kiinteä 88 px → jaetaan leveys */
    .files-header { flex-wrap: wrap; }
    .files-buttons { display: flex !important; flex-wrap: wrap; width: 100%; gap: 3px; margin-left: 0 !important; }
    .files-buttons .e-btn { flex: 1 1 30%; width: auto !important; min-width: 0 !important; margin: 0 !important; }
    /* Alaosan valinnat: oletusnapit + organisaatiovalinta rivittyvät */
    .table-bottom-default-settings {
        flex-wrap: wrap;
        gap: 8px;
    }
    .table-bottom-default-settings .e-btn,
    .table-bottom-default-settings .e-ddl {
        float: none !important;
    }
    /* Dialogit: ei leveämpiä kuin näyttö, sisältö vierii */
    .e-dialog {
        max-width: 96vw !important;
        max-height: 92vh !important;
        left: 2vw !important;
    }
    .e-dialog .e-dlg-content {
        max-height: calc(92vh - 110px);
        overflow-y: auto !important;
    }
    /* Dialogien kiinteät taulukot (800 / 750 px) → täysi leveys */
    .e-dialog table[width] {
        width: 100% !important;
        max-width: 100%;
    }
    /* 26.10.21.2: etusivun listat olivat kiinteitä (480 / 200 px) → työnsivät sisällön yli ruudun */
    #Tiedostot, #Playerit, .custom-listbox, .fiscal-listbox,
    #Tiedostot .e-listbox-wrapper, #Playerit .e-listbox-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    .body-content .table-responsive { overflow-x: hidden; }
    .files-content, .player-content, .custom-uploader { max-width: 100%; overflow: hidden; }
    /* 26.10.21.4 (#127): organisaatiovalinnan lista piirtyi kapealla näytöllä satoja pikseleitä kentän alapuolelle
       (Syncfusionin sijaintilaskenta). Kiinnitetään lista näytön yläosaan headerin alle — ei riipu laskennasta. */
    #Organisatiolist_popup {
        position: fixed !important;
        top: 64px !important;
        left: 2vw !important;
        width: 96vw !important;
        max-height: calc(100vh - 80px) !important;
        z-index: 100000 !important;
    }
    #Organisatiolist_popup .e-content, #Organisatiolist_popup .e-dropdownbase {
        max-height: calc(100vh - 90px) !important;
    }
    /* Header: tervehdys pois, liput ja kirjautuminen mahtuvat riviin */
    .user-greeting { display: none; }
    .fiscal-header .navbar { flex-wrap: nowrap; }
    .language-selector { margin-left: auto; margin-right: 10px; }
}

/* ---------- Tabletti pystyssä ja puhelin (< 768 px): tiedoston asetukset -dialogi ---------- */
@media (max-width: 767.98px) {
    /* 26.10.21.5: Esitysajat-grid (6 saraketta, 870 px) → piilotetaan Päivät (4) ja Koko päivä (5),
       loput jaetaan tasan dialogin leveyteen. Piilotetut tiedot muokataan Muuta-painikkeesta. */
    #Esitysajat { display: table; width: 100% !important; }
    #Esitysajat .e-grid .e-table { width: 100% !important; table-layout: fixed; }
    #Esitysajat .e-grid .e-gridcontent .e-content { overflow-x: hidden !important; }
    #Esitysajat .e-grid col { width: auto !important; }
    #Esitysajat .e-grid .e-headercell:nth-child(4), #Esitysajat .e-grid .e-rowcell:nth-child(4),
    #Esitysajat .e-grid .e-headercell:nth-child(5), #Esitysajat .e-grid .e-rowcell:nth-child(5),
    #Esitysajat .e-grid col:nth-child(4), #Esitysajat .e-grid col:nth-child(5) { display: none !important; }
    #Esitysajat .e-grid .e-rowcell, #Esitysajat .e-grid .e-headercell {
        padding: 6px 4px !important;
        white-space: normal !important;
        word-break: break-word;
        font-size: 13px;
    }
    #Esitysajat .e-grid .e-rowcell .e-btn { padding: 4px 8px; font-size: 12px; min-height: 32px; }
    /* Dialogin näyttö- ja ryhmälistat olivat 500 px → leveyteen, ja sarakkeet allekkain */
    #Esitysajat .row { display: block; }
    #Esitysajat .row .column { width: 100%; display: block; margin-bottom: 8px; }
    #Esitysajat .fix-listbox, #Esitysajat .e-listbox-wrapper { width: 100% !important; max-width: 100%; }
    #Esitysajat .e-btn { margin: 3px 2px; }
    /* 26.10.21.10: Hallinta-dialogin 7 välilehteä — Syncfusionin vierityspalkki piilotti osan. Välilehdet rivittyvät usealle riville. */
    .e-tab.default-tab .e-tab-header,
    .e-tab.default-tab .e-tab-header .e-toolbar-items,
    .e-tab.default-tab .e-tab-header .e-hscroll-content {
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        transform: none !important;
    }
    .e-tab.default-tab .e-tab-header .e-hscroll-bar { overflow: visible !important; }
    .e-tab.default-tab .e-tab-header .e-scroll-nav { display: none !important; }
    .e-tab.default-tab .e-tab-header .e-hscroll { padding: 0 !important; }
    .e-tab.default-tab .e-tab-header .e-toolbar-item {
        flex: 1 1 30%;
        min-width: 0;
        height: auto !important;
    }
    .e-tab.default-tab .e-tab-header .e-toolbar-item .e-tab-wrap { padding: 4px 6px !important; height: auto !important; }
    .e-tab.default-tab .e-tab-header .e-indicator { display: none !important; }
    .e-tab.default-tab .e-tab-header .e-toolbar-item.e-active { border-bottom: 2px solid #0073ff; }
    /* 26.10.21.6: ajastusdialogin Kesto hh:mm:ss — kolme valitsinta (18 % kukin) rivittyivät; pidetään yhdellä rivillä */
    .e-dialog #first, .e-dialog #second, .e-dialog #third {
        display: inline-block !important;
        width: auto !important;
        vertical-align: middle;
        margin-right: 6px;
        white-space: nowrap;
    }
}

/* ---------- Puhelin (< 576 px) ---------- */
@media (max-width: 575.98px) {
    /* Organisaatiovalinta ja Julkaise-nappi täysleveiksi */
    .table-bottom-default-settings .e-ddl,
    .table-bottom-default-settings .e-ddl .e-input-group {
        width: 100% !important;
    }
    #Julkaisu {
        width: 100% !important;
        height: 56px !important;
    }
    .table-bottom-save { width: 100%; }
    .table-bottom-saved-info { margin-bottom: 15px; }
    /* Tiedostolistan 5 painiketta kahdelle riville */
    .files-header { flex-wrap: wrap; gap: 6px; }
    /* Otsikko lyhyemmäksi, liput pienemmiksi */
    .fiscal-header .navbar-brand { font-size: 0.95rem; }
    .flag-icon { width: 26px !important; height: 20px !important; }
    /* Dialogit koko ruutuun */
    .e-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        left: 0 !important;
        top: 0 !important;
        max-height: 100vh !important;
        border-radius: 0;
    }
    .e-dialog .e-dlg-content {
        max-height: calc(100vh - 110px);
        padding: 8px !important;
    }
    /* 26.10.21.8: Oletusasetukset-dialogin lomaketaulukko (width="750", 4 × 25 %) → puhelimella kaksisarakkeinen ruudukko.
       Rivit olivat kiinteän korkuisia, joten pelkkä allekkain-ladonta (26.10.21.2) vuoti päällekkäin.
       Huom: SfDialogeilla ei ole ID:tä, siksi attribuuttivalitsin. */
    .e-dialog table[width="750"], .e-dialog table[width="750"] > tbody { display: block; width: 100% !important; }
    .e-dialog table[width="750"] tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
        height: auto !important;
        margin-bottom: 4px;
    }
    .e-dialog table[width="750"] td {
        display: block;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        padding: 2px 0 !important;
    }
    .e-dialog table[width="750"] td[colspan] { grid-column: 1 / -1; }
    .e-dialog table[width="750"] td:empty { display: none; }
    .e-dialog table[width="750"] .e-input-group, .e-dialog table[width="750"] .e-ddl { max-width: 100%; }
    /* 26.10.21.5: puhelimella Esitysajat-gridistä piilotetaan myös Kesto (3) → Alku, Loppu, Muuta */
    #Esitysajat .e-grid .e-headercell:nth-child(3), #Esitysajat .e-grid .e-rowcell:nth-child(3),
    #Esitysajat .e-grid col:nth-child(3) { display: none !important; }
    /* 26.10.21.9: Hallinta → Käyttäjien hallinta: käyttäjälista ja toimintopaneelit allekkain,
       syötekentät (width: calc(100% - 220px) → kutistuivat olemattomiin) täysleveiksi */
    table[name="orgUserManagement"], table[name="orgUserManagement"] > tbody,
    table[name="orgUserManagement"] > tbody > tr,
    table[name="orgUserManagement"] > tbody > tr > td,
    table[name="orgUserManagement"] > tbody > tr > th {
        display: block;
        width: 100% !important;
    }
    table[name="orgUserManagement"] > tbody > tr > th:empty { display: none; }
    table[name="orgUserManagement"] .e-listbox-wrapper,
    table[name="orgUserManagement"] .fix-listbox {
        width: 100% !important;
        height: 200px !important;
        margin-bottom: 8px;
    }
    table[name="orgUserManagement"] label { display: block !important; width: auto !important; }
    table[name="orgUserManagement"] input.form-control,
    table[name="orgUserManagement"] .e-input-group {
        display: block !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
    }
    table[name="orgUserManagement"] .e-btn { margin-top: 0 !important; }
    /* 26.10.21.11: Hallinnan muut välilehdet (lisenssien hallinta, käyttäjä-/näyttöryhmät, Netvisor):
       samat periaatteet kuin Käyttäjien hallinnassa — solut allekkain, listat ja kentät leveyteen, napit rivittyvät.
       Organisaation lisenssit -datataulukko (#organizationLicenses) jätetään taulukoksi, se toimi jo. */
    table[name="orgUsersAndPlayers"], table[name="orgUsersAndPlayers"] > tbody,
    table[name="orgUsersAndPlayers"] > tbody > tr,
    table[name="orgUsersAndPlayers"] > tbody > tr > td,
    table[name="orgUsersAndPlayers"] > tbody > tr > th,
    table[name="orgLicenseManagement"], table[name="orgLicenseManagement"] > tbody,
    table[name="orgLicenseManagement"] > tbody > tr,
    table[name="orgLicenseManagement"] > tbody > tr > td,
    table[name="orgLicenseManagement"] > tbody > tr > th {
        display: block;
        width: 100% !important;
        float: none !important;
    }
    table[name="orgUsersAndPlayers"] > tbody > tr > th:empty,
    table[name="orgLicenseManagement"] > tbody > tr > th:empty { display: none; }
    table[name="orgUsersAndPlayers"] .e-listbox-wrapper, table[name="orgUsersAndPlayers"] .fix-listbox,
    table[name="orgLicenseManagement"] .e-listbox-wrapper, table[name="orgLicenseManagement"] .fix-listbox {
        width: 100% !important;
        max-height: 260px;
        margin-bottom: 8px;
    }
    table[name="orgUsersAndPlayers"] .e-btn, table[name="orgLicenseManagement"] .e-btn {
        width: auto !important;
        max-width: 100%;
        margin: 3px 4px 3px 0 !important;
        white-space: normal;
    }
    /* 26.10.21.12: ryhmävälilehtien alapainikkeet (Width 300px / 30 %, flex space-between) → kompaktit, rivittyvät */
    .e-tab.default-tab .e-content div[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px;
    }
    .e-tab.default-tab .e-content .button_tallennamuutokset {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px !important;
        padding: 6px 12px !important;
        flex: 1 1 45%;
        margin: 0 !important;
        font-size: 14px;
    }
    /* Netvisor ja muut lomakkeet: kiinteät 380 px / 200 px kentät ja otsikot */
    .e-tab.default-tab .e-content input, .e-tab.default-tab .e-content .e-input-group,
    .e-tab.default-tab .e-content [style*="width: 380px"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    .e-tab.default-tab .e-content [style*="width: 200px"] { display: block !important; width: auto !important; }
    .e-tab.default-tab .e-content input[type="checkbox"], .e-tab.default-tab .e-content input[type="radio"] { width: auto !important; }
    /* 26.10.21.7: puhelimella ei vaakavieritystä dialogin sisällössä — palkki jäi näkyviin vaikka vieritettävää ei ollut */
    .e-dialog .e-dlg-content { overflow-x: hidden !important; }
    /* Ilmoitukset eivät jää ruudun ulkopuolelle */
    .fiscal-notification, .fiscal-dialog {
        max-width: 96vw;
    }
}