/* worklist-mobile.css — layer mobile per worklist.polimedpalma.it
   Pagina dedicata (senza sidebar/header): riutilizza worklist.css e ne corregge il layout
   per accesso da mobile. Tutte le regole sono scope sotto .page-worklist-mobile per non
   influenzare la worklist in-platform (worklist-sala.html). */

/* Reset layout piattaforma: global.css imposta body { display:flex } per la sidebar;
   qui non c'e' sidebar -> torniamo a layout blocco scorrevole. */
body.page-worklist-mobile {
    display: block !important;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--main-bg);
    /* La topbar e' position:fixed: riservo lo spazio in alto per non nascondere il contenuto */
    padding-top: 60px;
}

/* --- Topbar con logo (FISSA: non scorre con la pagina) ---
   Il global.css impone header{ position:relative !important; height:60px !important;
   padding:0 20px !important } su OGNI <header>. Per fissare la topbar serve
   position:fixed !important (specificita' .page-worklist-mobile .wm-topbar > header).
   Lasciamo l'altezza/padding globali (60px, padding 0 20px) e centriamo solo il logo. */
.page-worklist-mobile .wm-topbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 12px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
}
.page-worklist-mobile .wm-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    /* Decorativo in questa fase (cursor default). Vedi WM_LOGO_LINK_ENABLED in worklist-mobile.html */
}

/* --- Contenuto centrato e leggibile anche su desktop --- */
.page-worklist-mobile .wm-main {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}
.page-worklist-mobile .content-area { padding: 14px !important; }

/* --- Titolo + sala + stats --- */
.page-worklist-mobile .wm-head { margin-bottom: 12px; }
.page-worklist-mobile h1 {
    margin: 0 0 10px 0 !important;
    font-size: 1.2em !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* Badge sala: nascosto (la JS lo aggiorna comunque, ma l'utente vuole solo "Worklist").
   La sala attiva e' evidenziata nei chip sotto. */
.page-worklist-mobile .sala-badge {
    display: none !important;
}
/* Stats: ORIZZONTALI (il CSS base .header .stats e' scope .header, qui siamo in .wm-head) */
.page-worklist-mobile .stats {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
    margin-top: 4px !important;
}
.page-worklist-mobile .stat-item { font-size: 0.85em; }

/* --- Filtri sticky: chip sale orizzontali + barra data --- */
.page-worklist-mobile .controls {
    position: sticky;
    top: 60px;            /* appena sotto la topbar fissa (60px) */
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px !important;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.page-worklist-mobile .sale-selector-line {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 4px;
    width: 100%;
}
.page-worklist-mobile .control-group.actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

/* Tap target ampi (>=44px) per data e bottoni */
.page-worklist-mobile .controls button,
.page-worklist-mobile .controls select,
.page-worklist-mobile #worklist-data {
    height: 44px !important;
    font-size: 1em !important;
}
.page-worklist-mobile #worklist-data {
    flex: 1 1 150px;
    min-width: 0;
}

/* --- Sezioni --- */
.page-worklist-mobile .container { padding: 0 !important; }
.page-worklist-mobile .section-header h2 { font-size: 1em; }

/* --- Footer legale (iniettato da compliance.js): piu' compatto su mobile --- */
.page-worklist-mobile #medos-legal-footer {
    padding: 3px 10px 2px !important;
    font-size: 0.62em !important;
    gap: 6px !important;
    line-height: 1.25 !important;
}

/* --- Card esame: riorganizzata su 4 righe (icona+nome / dettagli / esame+sala / azioni) ---
   patient-info viene "dissolto" (display:contents): i suoi figli (h3, .details, .exam-type,
   .esame-sala) diventano figli diretti della grid card e ciascuno viene piazzato in una riga. */
.page-worklist-mobile .exam-card {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "stato name  tat"
        "det   det   det"
        "exam  exam  sala"
        "act   act   act";
    gap: 5px 10px;
    align-items: center;
    padding: 8px 10px !important;
}
.page-worklist-mobile .exam-card .patient-info { display: contents; }

/* Riga 1: icona stato + nome (cognome nome) + TAT */
.page-worklist-mobile .exam-card .stato-badge {
    grid-area: stato;
    align-self: start;
    width: 30px !important;
    height: 30px !important;
    font-size: 0.9em !important;
}
.page-worklist-mobile .exam-card h3 {
    grid-area: name;
    margin: 0 !important;
    font-size: 0.95em !important;
    line-height: 1.2;
}
.page-worklist-mobile .exam-card .tat-timer { grid-area: tat; }
.page-worklist-mobile .exam-card .tat-timer .time { font-size: 1em !important; }
.page-worklist-mobile .exam-card .tat-timer .label { font-size: 0.6em !important; }

/* Riga 2: eta / data nascita / orario / ritardi (formattazione attuale, flex-wrap) */
.page-worklist-mobile .exam-card .details {
    grid-area: det;
    gap: 10px !important;
    font-size: 0.78em !important;
}

/* Riga 3: esame (pill a sinistra) + sala (pill colorata a destra), formattazione attuale */
.page-worklist-mobile .exam-card .exam-type {
    grid-area: exam;
    justify-self: start;
    align-self: center;
    margin-top: 0 !important;
    font-size: 0.72em !important;
}
.page-worklist-mobile .exam-card .esame-sala {
    grid-area: sala;
    justify-self: end;
    align-self: center;
    font-size: 0.7em !important;
    padding: 2px 6px !important;
}

/* Riga 4: azioni a capo, tap target >=40px */
.page-worklist-mobile .exam-card .actions {
    grid-area: act;
    flex-wrap: wrap;
    gap: 6px;
}
.page-worklist-mobile .exam-card .actions button {
    min-height: 40px;
    flex: 1 1 auto;
    padding: 0 12px !important;
    font-size: 0.85em !important;
}

/* --- Modali: bottom-sheet su schermi piccoli --- */
@media (max-width: 600px) {
    .page-worklist-mobile .modal-overlay { align-items: flex-end !important; }
    .page-worklist-mobile .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh;
        border-radius: 14px 14px 0 0 !important;
        margin: 0;
    }
    .page-worklist-mobile .modal-body { padding: 16px !important; }
    .page-worklist-mobile .modal-body input,
    .page-worklist-mobile .modal-body select,
    .page-worklist-mobile .modal-body textarea {
        height: 44px !important;
        font-size: 1em !important;
    }
    .page-worklist-mobile #mod-lista-esami { max-height: 220px !important; }
    .page-worklist-mobile .modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .page-worklist-mobile .modal-footer button { width: 100%; height: 46px; }
}

/* Su tablet/desktop la modale resta centrata (comportamento di worklist.css) */