/* --- START OF FILE css/responsive.css --- */
/**
 * MAGISTRALIS — Responsive Layout
 * Attivato da ViewportScaler quando innerWidth < 1300px (classe `mag-responsive` su body)
 * Breakpoint:
 *   ≤ 1299px  → laptop piccolo / tablet landscape  (.mag-responsive)
 *   ≤ 1024px  → tablet portrait                    (media query diretta)
 *   ≤  768px  → tablet piccolo / mobile            (media query diretta)
 *
 * NOTA: I selettori usano body.mag-responsive per i casi gestiti via JS (zoom off),
 *       e media queries pure per i casi che non passano per ViewportScaler
 *       (es. tablet Android con viewport nativo).
 */

/* ============================================================
   1. SHELL — body, scaler-wrapper, overflow
   ============================================================ */

body.mag-responsive {
    /* Rimuovi il blocco overflow fisso: su tablet serve lo scroll */
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh;
    align-items: flex-start;
}

body.mag-responsive #scaler-wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

body.mag-responsive #app-container {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

/* ============================================================
   2. HEADER
   ============================================================ */

body.mag-responsive .header {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

body.mag-responsive .header h1 {
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    letter-spacing: 2px;
}

body.mag-responsive .header .motto {
    font-size: clamp(0.80rem, 1vw, 0.65rem);
    letter-spacing: 1px;
}

body.mag-responsive #header-logo {
    height: clamp(44px, 6vw, 65px);
}

/* Structure name: da assoluto a inline su schermi stretti */
body.mag-responsive #structure-name {
    position: static;
    transform: none;
    font-size: clamp(0.80rem, 1.2vw, 0.85rem);
    max-width: 280px;
    order: 3;
    width: 100%;
    text-align: center;
    padding: 2px 0;
}

/* User info: da assoluta a flex inline */
body.mag-responsive .user-info {
    position: static;
    transform: none;
    gap: 8px;
    order: 2;
}

/* Riduci pulsante logout/badge su schermi stretti */
body.mag-responsive .logout-mag-gold {
    width: 90px !important;
    height: 32px !important;
}

body.mag-responsive #user-display-name {
    font-size: 0.8rem;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
}

/* ============================================================
   3. MENU SIDEBAR
   ============================================================ */

body.mag-responsive #main-menu-container {
    /* Il menu sidebar resta funzionante ma si riduce */
    flex-shrink: 0;
}

/* ============================================================
   4. TABS
   ============================================================ */

body.mag-responsive .tabs-container {
    padding: 4px 6px;
    gap: 4px;
    flex-wrap: wrap;
}

body.mag-responsive .tab-button {
    padding: 6px 8px;
    font-size: clamp(0.80rem, 1.2vw, 0.8rem);
    letter-spacing: 0.5px;
}

/* ============================================================
   5. LAYOUT PRINCIPALE — view-container, split-view
   ============================================================ */

body.mag-responsive .view-container {
    height: auto !important;
    overflow: visible !important;
    padding-top: 8px;
    padding-bottom: 10px;
}

body.mag-responsive .split-view-wrapper {
    grid-template-columns: 1fr !important;
    gap: 16px;
    overflow: visible !important;
    padding: 0 8px;
}

body.mag-responsive .left-col,
body.mag-responsive .right-col {
    height: auto !important;
    overflow: visible !important;
}

body.mag-responsive .table-scroll-wrapper {
    max-height: 60vh;
    overflow-y: auto !important;
}

/* ============================================================
   6. HOME UTENTE — user_home.js
   ============================================================ */

/* Wrap principale: da 100vh fisso a colonna scrollabile */
body.mag-responsive .uh-wrap {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

body.mag-responsive .uh-content {
    overflow: visible !important;
    padding: 6px 12px 12px;
}

/* Stat row: da 4 colonne a 2×2 */
body.mag-responsive .uh-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
}

/* Main grid: da 2 colonne a colonna singola */
body.mag-responsive .uh-main-grid {
    grid-template-rows: unset !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
    gap: 10px;
}

/* Carico span: da 45/27/28 fr a colonna singola impilata */
body.mag-responsive .uh-carico-span {
    grid-column: 1 / 2 !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
    gap: 10px;
}

body.mag-responsive .uh-carico-span > .uh-section {
    height: auto !important;
    min-height: 200px;
}

body.mag-responsive .uh-section {
    height: auto !important;
    overflow: visible !important;
}

/* ECharts: altezza esplicita per renderizzare correttamente */
body.mag-responsive #uh-chart-mesi,
body.mag-responsive #uh-chart-ruoli,
body.mag-responsive #uh-chart-giorni {
    height: 200px !important;
    min-height: 200px;
}

/* Griglia grafici ECharts: da 3 colonne a 1 (classe aggiunta in user_home.js) */
body.mag-responsive .uh-charts-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
}

@media (max-width: 1024px) {
    .uh-charts-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .uh-charts-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
}

/* Titolo hero: ridimensiona su viewport stretto */
body.mag-responsive .uh-hero h2 {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
}

/* ============================================================
   7. TURNI TABLE — turni_table.js / turni_view.js
   ============================================================ */

body.mag-responsive .magistralis-table-wrapper,
body.mag-responsive #turni-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

body.mag-responsive .magistralis-table th,
body.mag-responsive .magistralis-table td {
    font-size: clamp(0.80rem, 1.1vw, 0.78rem);
    padding: 4px 5px;
}

/* ============================================================
   8. ADMIN HOME — admin_home.css
   ============================================================ */

body.mag-responsive #admin-home-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
}

body.mag-responsive #admin-home-grid > * {
    height: auto !important;
    min-height: 180px;
}

/* ============================================================
   9. CARD GENERICHE
   ============================================================ */

body.mag-responsive .card {
    padding: 14px;
}

/* ============================================================
   10. MODALI — non scalate, usano posizione fixed
        Non richiedono modifiche per mag-responsive
   ============================================================ */

/* ============================================================
   11. TABLET PORTRAIT ≤ 1024px
       Media query pura — funziona anche senza ViewportScaler
       (es. tablet Android con viewport nativo < 1300px)
   ============================================================ */

@media (max-width: 1024px) {
    body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    #scaler-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        zoom: unset !important;
    }

    #app-container {
        height: auto !important;
        overflow: visible !important;
    }

    .header h1       { font-size: clamp(0.85rem, 2.5vw, 1.2rem); }
    .header .motto   { font-size: 0.8rem; }
    #structure-name  { display: none !important; }

    .split-view-wrapper {
        grid-template-columns: 1fr !important;
        overflow: visible !important;
    }

    .left-col, .right-col {
        height: auto !important;
        overflow: visible !important;
    }

    .uh-stat-row            { grid-template-columns: repeat(2, 1fr) !important; }
    .uh-main-grid           { grid-template-columns: 1fr !important; height: auto !important; }
    .uh-carico-span         { grid-column: 1/2 !important; grid-template-columns: 1fr !important; height: auto !important; }
    .uh-wrap                { height: auto !important; }

    #uh-chart-mesi,
    #uh-chart-ruoli,
    #uh-chart-giorni        { height: 180px !important; }
}

/* ============================================================
   12. TABLET PICCOLO / MOBILE ≤ 768px
   ============================================================ */

@media (max-width: 768px) {
    .header {
        padding: 6px 10px;
        flex-wrap: wrap;
    }

    #header-logo { height: 40px; }

    .header h1      { font-size: 0.85rem; letter-spacing: 1.5px; }
    .header .motto  { display: none; }

    .user-info {
        position: static;
        transform: none;
        gap: 6px;
    }

    .logout-mag-gold {
        width: 80px !important;
        height: 30px !important;
    }

    #user-display-name {
        font-size: 0.8rem;
        max-width: 100px;
    }

    .tabs-container { padding: 3px; }
    .tab-button     { padding: 5px 6px; font-size: 0.8rem; }

    .uh-stat-row    { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
    .uh-stat-val    { font-size: 1.2rem !important; }
    .uh-hero h2     { font-size: 1rem; }

    .magistralis-table th,
    .magistralis-table td { font-size: 0.8rem; padding: 3px 4px; }

    /* Split view a colonna singola */
    .split-view-wrapper { grid-template-columns: 1fr !important; gap: 12px; }

    #uh-chart-mesi,
    #uh-chart-ruoli,
    #uh-chart-giorni { height: 160px !important; }
}

/* --- END OF FILE css/responsive.css --- */