/* mobile-responsive.css — PoliMed
   Layer responsive per medos.polimedpalma.it
   Attivo sotto 1024px (tablet/phone).
   Colore branding: #167D87 (verde PoliMed)
*/

/* === BREAKPOINT: TABLET & MOBILE (<= 1024px) === */
@media screen and (max-width: 1024px) {

    /* --- BODY: scroll verticale invece di flex fisso --- */
    body {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important; min-height: 100dvh !important; height: 100dvh !important;
        overflow: auto !important;
    }

    /* --- SIDEBAR: collassabile off-canvas --- */
    .left-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 280px !important;
        height: 100vh !important; height: 100dvh !important;
        z-index: 9999 !important;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
    }
    .left-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Hamburger button — visibile solo su mobile */
    .menu-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        background: transparent;
        border: none;
        z-index: 10000;
    }
    .menu-icon span {
        display: block !important;
        width: 26px !important;
        height: 3px !important;
        background-color: #2c3e50 !important;
        border-radius: 2px;
        transition: all 0.2s;
    }
    .menu-icon.mobile-active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .menu-icon.mobile-active span:nth-child(2) {
        opacity: 0;
    }
    .menu-icon.mobile-active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Override dei !important che nascondono menu-icon */
    .menu-icon, .menu-toggle, .hamburger, .sidebar-toggle {
        display: flex !important;
        opacity: 1 !important;
        width: 40px !important;
        height: 40px !important;
        pointer-events: auto !important;
        position: relative !important;
        left: auto !important;
        visibility: visible !important;
    }

    /* --- HEADER: compatto, con hamburger --- */
    header {
        padding: 0 12px !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        margin-bottom: 0 !important;
        gap: 8px !important;
    }

    .search-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex: 1 !important;
        max-width: 100% !important;
        margin: 0 !important;
        z-index: auto !important;
    }

    #global-search {
        height: 34px !important;
        font-size: 0.85em !important;
        padding: 0 10px !important;
    }

    .header-actions {
        margin-left: auto !important;
    }

    .btn-header-nuovo {
        padding: 8px 12px !important;
        font-size: 0.8em !important;
        white-space: nowrap !important;
    }
    /* Su schermi stretti il pulsante "+" viene stilizzato nel breakpoint phone */

    /* --- MAIN CONTAINER --- */
    .main-container {
        flex: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - 56px) !important;
        overflow: visible !important;
    }

    /* --- PLANNER AREA: scroll orizzontale nativo --- */
    .planner-area {
        padding: 8px !important;
        overflow: auto !important;
        flex: none !important;
        height: auto !important;
        min-height: 500px !important;
    }

    .planner-master {
        min-width: 900px !important;
        overflow: auto !important;
    }

    /* --- AGENDA LISTA: full width --- */
    #agenda-lista-container {
        width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- SIDE PANEL: full screen overlay --- */
    #side-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important; height: 100dvh !important;
        z-index: 10001 !important;
        border-left: none !important;
    }

    /* --- OVERLAY: backdrop per sidebar --- */
    #overlay {
        z-index: 9998 !important;
    }

    /* --- MODALI: full screen --- */
    .modal-creazione,
    #modal-creazione,
    .modal,
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .modal-body,
    .modal-body-content {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- TOAST: posizione bassa su mobile --- */
    .toast-container {
        bottom: 10px !important;
        top: auto !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }

    /* --- SEARCH RESULTS: full width --- */
    .search-results {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        width: 100% !important;
        max-height: 60vh !important;
        border-radius: 0 !important;
    }

    /* --- CONTENT AREA: padding ridotto --- */
    .content-area {
        padding: 8px !important;
    }

    /* --- TABELLE: scroll orizzontale --- */
    table {
        width: 100% !important;
    }
    .table-wrapper, .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- FONT SIZE GENERALE: leggermente ridotto --- */
    body {
        font-size: 14px !important;
    }

    /* --- NAV SIDEBAR: touch-friendly --- */
    .nav-sidebar a {
        padding: 14px 15px !important;
        font-size: 0.9em !important;
    }
    .nav-sub-item {
        padding: 12px 15px !important;
        font-size: 0.85em !important;
    }

    /* --- MINI CALENDAR --- */
    .mini-calendar-wrapper {
        padding: 8px !important;
    }
    .mc-grid {
        gap: 1px !important;
    }
    .mc-day {
        padding: 8px 0 !important;
        font-size: 0.85em !important;
    }

    /* --- BUTTONS: touch target minimo 44px --- */
    button:not(.menu-icon):not(.btn-icon-minimal):not(.btn-close):not(.sp-icon-btn) {
        min-height: 40px !important;
    }

    /* --- IMPOSTAZIONI TAB --- */
    .impostazioni-tabs {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .impostazioni-tab {
        width: 100% !important;
        text-align: center !important;
    }

    /* --- STATISTICHE --- */
    .stats-grid, .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* --- FATTURAZIONE --- */
    .fattura-row, .contab-row {
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* --- BACKDROP per chiusura sidebar --- */
    .mobile-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9997;
    }
    .mobile-backdrop.visible {
        display: block;
    }
}

/* === BREAKPOINT: PHONE (<= 480px) === */
@media screen and (max-width: 480px) {
    header {
        padding: 0 8px !important;
    }

    .btn-header-nuovo {
        padding: 8px 10px !important;
        font-size: 0.75em !important;
    }

    .btn-header-nuovo span {
        display: none !important;
    }
    .btn-header-nuovo::before {
        content: "+";
        font-size: 1.2em;
        font-weight: 800;
    }

    .search-container {
        max-width: 100% !important;
    }

    #global-search {
        font-size: 0.8em !important;
        padding: 0 8px !important;
    }

    .planner-area {
        padding: 4px !important;
    }

    .panel-header {
        padding: 12px !important;
    }

    .panel-body {
        padding: 12px !important;
    }

    /* Card appuntamenti lista: compatte */
    .al-row {
        padding: 8px !important;
    }

    /* Contatori footer: stack verticale */
    .al-cnt-footer-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .al-cnt-chips {
        width: 100% !important;
    }
}

/* ===== LOGO OPTIMIZATION (mobile) ===== */
@media only screen and (max-width: 768px) {
    .logo-container {
        height: 48px !important;
        padding: 6px 10px !important;
        margin-bottom: 4px !important;
    }
    .logo-container img {
        max-width: 140px !important;
        max-height: 36px !important;
    }
}