/* ========================================
   RESPONSIVE OVERRIDES — Mobile + Tablet
   Kartiq DMS — Issue #206

   REGOLA CARDINE: ogni regola in questo file
   DEVE stare dentro un @media (max-width: ...).
   Il desktop (>= 1024px) non viene MAI toccato.

   Caricato per ULTIMO in App.razor, quindi vince
   a parità di specificità sulle regole base.
   ======================================== */


/* ============================================================
   TABLET + MOBILE (<= 1023px)
   Override comuni: touch target, topbar compatta, stack column.
   ============================================================ */
@media (max-width: 1023px) {

    .responsive-master-detail {
        flex-direction: column;
    }

    .responsive-master-detail > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* — Page topbar (interactive island): comprimi padding e
         nascondi breadcrumb (titolo + actions restano) ───── */
    .page-topbar {
        padding: 0 12px;
    }
    .page-topbar-breadcrumb {
        display: none;
    }
    .page-topbar-actions {
        gap: 6px;
    }

    /* — WCAG 2.5.8 Target Size: 44x44 su input touch ────── */
    .rail-icon-btn,
    .mobile-topbar-btn,
    .nav-panel-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    .rail-avatar-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .modern-nav-panel .rail-item {
        min-height: 44px;
        padding: 10px 16px;
    }
    .mobile-drawer .rail-item {
        min-height: 48px;
    }

    /* — Home page: forza il sidebar (Azioni rapide) a wrappare
         sotto la colonna principale invece di sovrapporsi ──── */
    .home-grid {
        flex-direction: column;
    }
    .home-grid-main,
    .home-grid-side {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    /* — DocumentView: toolbar wrap, splitter verticale ───── */
    .docview-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 10px;
    }
    .docview-toolbar-left,
    .docview-toolbar-right {
        flex-wrap: wrap;
    }
    .split-view-container {
        flex-direction: column !important;
        height: auto !important;
    }
    .split-view-left,
    .split-view-right {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .split-view-handle {
        display: none !important;
    }
    /* Senza min-height esplicito, l'iframe del viewer (height:100%)
       collassava a 0 perché il container ha height:auto. Forziamo
       metadata a max 40vh con scroll interno, e PDF viewer a 60vh. */
    .split-view-left {
        max-height: 40vh;
        overflow-y: auto;
    }
    .split-view-right {
        min-height: 60vh;
        height: 60vh;
    }
    .pdf-viewer-full {
        height: 100% !important;
    }

    /* — DocumentSearch: split-view verticale ─────────────── */
    .search-split-view,
    .search-split-view.preview-open,
    .search-split-view.filters-collapsed {
        flex-direction: column;
        height: auto !important;
        min-height: 0;
    }
    .search-split-view.preview-open .search-split-results,
    .search-split-results {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .search-split-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .search-split-handle {
        display: none !important;
    }

    /* — Nav-panel a tablet portrait: era overlay senza backdrop e
         copriva il contenuto senza alcun indizio visivo. Aggiungiamo
         un backdrop come hint che il pannello è modale. ── */
    html:not([data-nav="collapsed"]) .modern-nav-panel:not(.collapsed)::before {
        content: '';
        position: fixed;
        inset: 0;
        left: 48px;
        background: var(--overlay-bg, rgba(0, 0, 0, 0.3));
        z-index: -1;
        pointer-events: none;
        animation: navPanelBackdropIn 0.15s ease;
    }
    @keyframes navPanelBackdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* — DmsNavBar: scroll orizzontale invece di wrap rotto ── */
    .dms-navbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dms-navbar::-webkit-scrollbar {
        display: none;
    }
    .dms-nav-item {
        flex-shrink: 0;
        padding: 10px 14px;
        min-height: 44px;
    }

    /* — Focus visibile (compensa outline:none su form base) — */
    .form-control-o365:focus-visible,
    .search-input:focus-visible {
        outline: 2px solid var(--o365-primary, #2563eb);
        outline-offset: 2px;
    }
}


/* ============================================================
   MOBILE ONLY (<= 767px)
   ============================================================ */
@media (max-width: 767px) {

    .responsive-form-grid,
    .responsive-card-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .responsive-toolbar,
    .responsive-actions {
        align-items: stretch;
    }

    .responsive-actions {
        width: 100%;
        margin-left: 0;
    }

    .responsive-actions > .btn,
    .responsive-actions > .btn-o365,
    .responsive-actions > button,
    .responsive-actions > a {
        min-height: 44px;
    }

    /* — PageTopbar visibile anche su mobile: senza, titolo +
         actions di pagina sparivano del tutto sotto i 768px ── */
    .page-topbar {
        display: flex !important;
        flex-wrap: wrap;
        height: auto;
        min-height: 44px;
        padding: 8px 12px;
        gap: 8px;
    }
    .page-topbar-icon {
        flex-shrink: 0;
    }
    .page-topbar-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .page-topbar-title {
        font-size: 15px;
        white-space: normal;
    }
    .page-topbar-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* — Mobile-topbar: proteggi il titolo da overflow ────── */
    .mobile-topbar-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* — Skip-link sotto la mobile-topbar (era nascosta dietro) — */
    .skip-link:focus {
        top: 56px;
    }

    /* — Drawer ridimensionato per viewport piccoli ────────── */
    .mobile-drawer {
        width: min(280px, 88vw);
    }

    .mobile-topbar {
        height: calc(48px + env(safe-area-inset-top, 0));
        min-height: calc(48px + env(safe-area-inset-top, 0));
    }

    /* — User popover: riposiziona per non sforare viewport — */
    .user-popover {
        left: 8px !important;
        right: 8px;
        width: auto;
        max-width: calc(100vw - 16px);
    }

    /* — Content padding ridotto ──────────────────────────── */
    .modern-content {
        padding: 12px max(10px, env(safe-area-inset-right, 0)) max(12px, env(safe-area-inset-bottom, 0)) max(10px, env(safe-area-inset-left, 0));
    }
    .modern-main-area .modern-content {
        padding-top: 10px;
    }

    /* — Home dashboard stats: una colonna ────────────────── */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* — Search results grid: scroll orizzontale gestito ──── */
    .search-results-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* — DocumentView toolbar: icone con labels nascoste ──── */
    .docview-toolbar-right .btn-o365 span.btn-label {
        display: none;
    }

    /* — Cmd palette: full-width safe ──────────────────────── */
    .cmd-palette {
        width: calc(100vw - 24px);
        max-width: 560px;
        margin: 0 12px;
    }
    .cmd-palette-backdrop {
        padding-top: 12vh;
    }
}


/* ============================================================
   ULTRA SMALL (<= 360px)
   ============================================================ */
@media (max-width: 360px) {
    .mobile-drawer {
        width: calc(100vw - 56px);
        max-width: 320px;
    }
    .page-topbar-title {
        font-size: 14px;
    }
    .quick-access-grid {
        grid-template-columns: 1fr;
    }
}