/* ============================================================
   HAFIZ — MOBILNÁ VRSTVA (mobile.css)
   Načítava sa PO styles.css. Všetky pravidlá sú výhradne pre
   obrazovky ≤ 820 px — desktopová verzia ostáva nedotknutá.
   Žiadny zásah do dát ani logiky aplikácie.
   ============================================================ */

/* --- Prvky vkladané cez mobile.js: na desktope vždy skryté --- */
.hafiz-bottomnav,
.hafiz-drawer-backdrop,
.hafiz-drawer-close,
.hafiz-drawer-title { display: none; }

@media screen and (max-width: 820px) {

    /* =====================================================
       1. ZÁKLAD — telo a hlavný kontajner
       ===================================================== */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    body {
        display: block;                 /* zruší desktopové centrovanie */
        -webkit-text-size-adjust: 100%;
        overscroll-behavior-y: none;
    }
    .app-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px 10px 24px;
        min-height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        /* backdrop-filter na predkovi robí z position:fixed potomkov
           problém (containing block) + spomaľuje mobil */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* miesto pre spodnú navigáciu po prihlásení */
    body.hafiz-logged-in .app-container {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    /* =====================================================
       2. HLAVIČKA
       ===================================================== */
    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 10px;
    }
    .app-branding h1 { font-size: 17px; display: flex; align-items: center; flex-wrap: wrap; }
    .app-branding .brand-subtitle { margin-left: 30px; font-size: 8px; }
    .header-meta {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        row-gap: 10px;
    }
    #currentDateTime { font-size: 12px; }
    .user-tag { font-size: 12px; }
    .control-buttons {
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
    }
    .btn-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 16px;
    }

    /* =====================================================
       3. TOPNAV → BOČNÉ MENU (drawer)
       Celý .topnav sa stáva vysúvacím menu — všetky dynamicky
       vkladané tlačidlá (moduly.js) tak ostávajú funkčné.
       ===================================================== */
    .topnav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 86vw);
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 0 18px 18px 0;
        border: none;
        border-right: 1px solid var(--card-border);
        background: var(--bg-gradient);
        box-shadow: 0 0 60px rgba(0,0,0,0.45);
        z-index: 5000;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 2px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: hidden;
    }
    body.hafiz-drawer-open .topnav {
        transform: translateX(0);
        visibility: visible;
    }
    body.hafiz-drawer-open { overflow: hidden; }

    /* Hlavička menu (vkladá mobile.js) */
    .hafiz-drawer-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 4px 12px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--card-border);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 2px;
        color: var(--text-primary);
    }
    .hafiz-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 10px;
        background: rgba(128,128,128,0.12);
        color: var(--text-primary);
        font-size: 18px;
        cursor: pointer;
    }

    /* Skupiny menu — pod seba, tlačidlá ako riadky */
    .tnav-group {
        flex-direction: column;
        padding: 6px 2px;
        width: 100%;
    }
    .tnav-group:hover { background: transparent; }
    .tnav-group-label {
        text-align: left;
        font-size: 10px;
        opacity: 0.65;
        padding: 4px 10px;
        letter-spacing: 2px;
    }
    .tnav-group-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
    }
    .tnav-group-btns > div { width: 100%; }   /* obaly VC / Plán služieb */
    .tnav-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        width: 100%;
        min-height: 48px;
        min-width: 0;
        padding: 11px 12px;
        font-size: 13px;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0.2px;
        border-radius: 12px;
    }
    .tnav-btn i {
        font-size: 18px;
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }
    .tnav-btn span { white-space: normal; text-align: left; }
    .tnav-sep {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        align-self: auto;
    }

    /* Popovery (Virtuálna cela, Plán služieb) — v menu sa rozbalia
       ako vložené sekcie namiesto plávajúceho okna */
    #vcPopover, #planPopover {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 6px;
        box-shadow: none !important;
    }

    /* Blok widgetov (Obsadenosť + Písomnosti) — mobile.js ho
       presúva z topnav-u na dashboard pod menu */
    .hafiz-widgets-row {
        margin: 0 0 12px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    #cellStatusOverview {
        min-width: 0 !important;
        width: 100%;
        flex-wrap: wrap;
        gap: 10px 16px !important;
        padding: 10px 14px !important;
    }
    #pisomnostiWidget { min-width: 0 !important; width: 100%; }

    /* =====================================================
       4. SPODNÁ NAVIGÁCIA (vkladá mobile.js)
       ===================================================== */
    body.hafiz-logged-in .hafiz-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4000;
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
        background: var(--card-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid var(--card-border);
        box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    }
    /* pri otvorenej klávesnici navigáciu skryť */
    body.hafiz-kb-open .hafiz-bottomnav { display: none !important; }

    .hafiz-bottomnav button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 9.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-radius: 12px;
        cursor: pointer;
        min-width: 0;
        padding: 4px 2px;
    }
    .hafiz-bottomnav button:active { background: rgba(128,128,128,0.12); }
    .hafiz-bottomnav button i { font-size: 19px; }
    .hafiz-bottomnav button[data-act="menu"]    i { color: #8b5cf6; }
    .hafiz-bottomnav button[data-act="prijat"]  i { color: #10b981; }
    .hafiz-bottomnav button[data-act="hladat"]  i { color: #a855f7; }
    .hafiz-bottomnav button[data-act="prehlad"] i { color: #34d399; }
    .hafiz-bottomnav button[data-act="osoby"]   i { color: #38bdf8; }

    /* Tmavé pozadie za otvoreným menu */
    body.hafiz-drawer-open .hafiz-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 4500;
        animation: hafizFade 0.25s ease-out;
    }

    /* =====================================================
       5. DASHBOARD — štatistiky, cely, pravý panel
       ===================================================== */
    .stats-strip {
        flex-direction: row !important;      /* prepis starého pravidla */
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .stats-strip > div {
        flex: 1 1 46% !important;            /* roztiahnuť na šírku displeja */
        width: auto !important;
        min-width: 140px !important;
        justify-content: center !important;
        white-space: nowrap;
    }
    #osKodCard { flex: 1 1 100% !important; }
    .stats-strip > div[style*="width:1px"],
    .stats-strip > div[style*="width: 1px"] { display: none !important; }

    .main-row { flex-direction: column !important; gap: 12px !important; }
    .right-panel { width: 100% !important; }

    .cells-grid {
        grid-template-columns: 1fr !important;   /* cely pod seba, na celú šírku */
        grid-template-rows: auto !important;
        min-height: 0 !important;
        gap: 10px;
        width: 100%;
    }
    .cells-grid > * {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .cell-card { padding: 12px 12px; }

    /* =====================================================
       6. MODÁLY — spodné karty (bottom sheet) ako v mobilnej apke
       ===================================================== */
    .modal {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overscroll-behavior: contain;
    }
    /* pri otvorenom modáli sa pozadie nesmie hýbať */
    body.hafiz-modal-open {
        overflow: hidden !important;
    }
    .modal-content {
        min-height: 0;                        /* povolí vnútorný scroll (flexbox) */
        width: 100% !important;
        max-width: 100% !important;
        max-height: 96vh !important;
        max-height: calc(100dvh - 30px) !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: none;
        animation: hafizSheetUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* úchyt v hornej časti karty */
    .modal-content::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 2px;
        background: var(--text-secondary);
        opacity: 0.35;
        pointer-events: none;
    }
    .modal-header {
        padding: 18px 16px 12px;
        gap: 10px;
    }
    .modal-header h3 { font-size: 16px; line-height: 1.3; }
    .modal-close {
        font-size: 22px;
        min-width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(128,128,128,0.1);
        flex-shrink: 0;
    }
    .modal-body {
        padding: 14px 14px 18px;
        min-height: 0;                        /* kľúč: bez toho flexbox nescrolluje */
        flex: 1 1 auto;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    .modal-footer {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        flex-wrap: wrap;
        gap: 10px;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-height: 46px;
        font-size: 14px;
    }

    /* Vnútro modálov — inline štýly z HTML/JS pod seba */
    .modal-body [style*="grid-template-columns"],
    .modal-body .form-grid { grid-template-columns: 1fr !important; }

    /* Správa osoby v cele — info panel a tlačidlá pod seba */
    .control-menu-grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        gap: 12px !important;
    }
    .control-menu-info { overflow: visible !important; }
    /* veľké dlaždicové tlačidlá → riadky pod sebou (ikona + text) */
    .control-menu-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .btn-menu-opt {
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 13px !important;
        padding: 13px 14px !important;
        min-height: 52px;
        width: 100%;
        font-size: 14px !important;
    }
    .btn-menu-opt i {
        font-size: 19px !important;
        width: 26px;
        text-align: center;
        flex-shrink: 0;
    }
    /* span cez viac stĺpcov by v 1-stĺpcovom gride vytvoril
       neviditeľné stĺpce navyše → vodorovné pretečenie */
    .modal-body [style*="grid-column"] { grid-column: auto !important; }
    .modal-body [style*="grid-row"] { grid-row: auto !important; }
    .modal-body form { overflow-x: hidden !important; }
    /* pevné šírky v px sa nesmú vylievať z displeja */
    .modal-content { height: auto !important; overflow-x: hidden; }
    .modal-body * { max-width: 100%; }
    /* nowrap texty nechať zalamovať (v tabuľkách nie — tie scrollujú) */
    .modal-body [style*="nowrap"]:not(td):not(th) { white-space: normal !important; }
    .modal-body [style*="display:flex"],
    .modal-body [style*="display: flex"] { flex-wrap: wrap; }
    /* !!! stĺpcové flexy sa zalamovať NESMÚ — polia by pretiekli
       do odrezaného stĺpca vpravo a "stratili" sa */
    .modal-body [style*="flex-direction:column"],
    .modal-body [style*="flex-direction: column"],
    .right-panel [style*="flex-direction:column"],
    .right-panel [style*="flex-direction: column"] { flex-wrap: nowrap !important; }
    /* vnútorný scroll formulárov vypnúť — scrolluje celý modal-body,
       jeden scroll namiesto dvoch vnorených */
    .modal-body form[style*="overflow"] {
        overflow-y: visible !important;
        flex: none !important;
        min-height: auto !important;
    }
    .modal-body [style*="min-width"] { min-width: 0 !important; }
    .modal-body [style*="width:1px"],
    .modal-body [style*="width: 1px"] { display: none !important; }
    .modal-body img, .modal-body svg, .modal-body video { max-width: 100%; height: auto; }

    /* Široké tabuľky — vodorovné posúvanie namiesto rozbitia layoutu */
    .modal-body table,
    .dashboard-wrapper table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sprievodca (wizard) — kroky posúvateľné do strán */
    .wizard-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }
    .wizard-steps::-webkit-scrollbar { display: none; }
    .wizard-step { min-width: 86px; flex-shrink: 0; font-size: 11px; }

    /* =====================================================
       7. FORMULÁRE A TLAČIDLÁ — dotykové ovládanie
       ===================================================== */
    /* 16 px zabráni automatickému zoomu na iOS pri fokusovaní poľa */
    .form-control,
    input[type="text"], input[type="password"], input[type="number"],
    input[type="date"], input[type="time"], input[type="datetime-local"],
    input[type="email"], input[type="search"],
    select, textarea {
        font-size: 16px !important;
        min-height: 42px;
    }
    textarea { min-height: 60px; }
    input[type="checkbox"], input[type="radio"] {
        min-height: 0;
        width: 20px;
        height: 20px;
    }
    .btn { min-height: 44px; font-size: 14px; }
    button { touch-action: manipulation; }

    /* Tooltipy (hover) na dotykových zariadeniach vypnúť —
       na mobile sa „lepia" po ťuknutí */
    [data-tip]::after, [data-tip]::before,
    [data-tip-down]::after, [data-tip-down]::before {
        display: none !important;
        content: none !important;
    }

    /* =====================================================
       8. PRIHLÁSENIE, PÄTA, RÔZNE
       ===================================================== */
    .login-wrapper { padding: 16px; min-height: calc(100dvh - 40px); }
    .login-card { width: 100%; max-width: 420px; padding: 30px 22px; }

    body.hafiz-logged-in #appFooter {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
        font-size: 8px;
        padding: 2px 8px;
        line-height: 1.3;
    }

    /* poistka proti pretečeniu — nič nesmie byť širšie ako displej */
    .dashboard-wrapper [style*="min-width:"] { min-width: 0 !important; }
    .dashboard-wrapper, .dashboard-wrapper > * { max-width: 100%; }

    /* =====================================================
       9. ANIMÁCIE
       ===================================================== */
    @keyframes hafizSheetUp {
        from { transform: translateY(60px); opacity: 0.4; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    @keyframes hafizFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ============ Menšie telefóny ============ */
@media screen and (max-width: 480px) {
    .app-container { padding: 8px 8px 24px; }
    .app-branding h1 { font-size: 15px; }
    .modal-header h3 { font-size: 15px; }
}