/* =====================================================================
   PIANEVA MEDICALE - ASPETTO
   I colori arrivano da tema.php come variabili:
     --pv-primario  --pv-scuro  --pv-tinta  --pv-sfondo  (+ versioni -rgb)
   Questo foglio si carica dopo gli stili delle singole pagine, quindi
   vince su di loro: e' qui che si cambia l'aspetto di tutto il programma.
   ===================================================================== */

:root {
    --pv-testo: #1c2430;
    --pv-testo-2: #5b6574;
    --pv-bordo: rgba(var(--pv-scuro-rgb), .12);
    --pv-bordo-forte: rgba(var(--pv-scuro-rgb), .22);
    --pv-ombra: 0 1px 2px rgba(var(--pv-scuro-rgb), .06), 0 2px 8px rgba(var(--pv-scuro-rgb), .05);
    --pv-raggio: 10px;
    --pv-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Bootstrap: il colore primario e i link seguono il set scelto */
    --bs-primary: var(--pv-primario);
    --bs-primary-rgb: var(--pv-primario-rgb);
    --bs-link-color: var(--pv-primario);
    --bs-link-color-rgb: var(--pv-primario-rgb);
    --bs-link-hover-color: var(--pv-scuro);
    --bs-link-hover-color-rgb: var(--pv-scuro-rgb);
    --bs-body-font-family: var(--pv-font);
    --bs-body-color: var(--pv-testo);
    --bs-body-bg: var(--pv-sfondo);
    --bs-border-color: var(--pv-bordo);
    --bs-focus-ring-color: rgba(var(--pv-primario-rgb), .25);
    --bs-primary-bg-subtle: var(--pv-tinta);
    --bs-primary-text-emphasis: var(--pv-scuro);
    --bs-primary-border-subtle: rgba(var(--pv-primario-rgb), .3);
}

/* ---------- Pagina ---------- */
body {
    font-family: var(--pv-font) !important;
    background-color: var(--pv-sfondo) !important;
    color: var(--pv-testo);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    color: var(--pv-scuro);
    font-weight: 650;
    letter-spacing: -.01em;
}
h5, h6, .h5, .h6 { font-weight: 600; }
.text-muted, .form-text { color: var(--pv-testo-2) !important; }
a { text-underline-offset: 2px; }
::selection { background: rgba(var(--pv-primario-rgb), .2); }
:focus-visible { outline: 2px solid var(--pv-primario); outline-offset: 2px; }
/* Orari, numeri, totali: cifre della stessa larghezza, le colonne restano dritte */
table, .time-cell, .badge, input[type="time"], input[type="date"] { font-variant-numeric: tabular-nums; }

/* ---------- Barra in alto ---------- */
.navbar-custom {
    background-color: var(--pv-scuro) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.navbar-custom .navbar-brand { letter-spacing: 0; font-weight: 700; }
.navbar-custom .nav-link { color: rgba(255, 255, 255, .86) !important; font-weight: 600; }
.navbar-custom .nav-link:hover { color: #fff !important; background-color: rgba(255, 255, 255, .1); }
.navbar-custom .nav-link.text-warning { color: #ffd36b !important; }
.navbar-custom .datetime-display { color: rgba(255, 255, 255, .7); }

/* La pagina aperta e' una linguetta che si attacca al foglio sotto,
   come il dorso di una cartella. Solo su schermi larghi: su tablet e
   telefono il menu e' a scomparsa e la voce attiva e' solo evidenziata. */
.navbar-custom .nav-link.pv-attivo { color: #fff !important; background-color: rgba(255, 255, 255, .16); border-radius: 6px; }
@media (min-width: 1101px) {
    .navbar-custom { padding-bottom: 0 !important; }
    .navbar-custom > .container-fluid { align-items: flex-end !important; }
    .navbar-custom .navbar-brand, .navbar-custom .datetime-display { align-self: center; padding-bottom: .4rem; }
    .navbar-custom #menuPrincipale { align-self: flex-end; }
    .navbar-custom #menuPrincipale .nav-link { padding: .5rem .45rem .55rem !important; border-radius: 8px 8px 0 0 !important; }
    .navbar-custom #menuPrincipale .nav-item { margin-right: .15rem !important; }
    .navbar-custom .navbar-brand { margin-right: .75rem !important; }
    .navbar-custom #menuPrincipale .nav-link.pv-attivo {
        background-color: var(--pv-sfondo) !important;
        color: var(--pv-scuro) !important;
        box-shadow: 0 -1px 0 rgba(255, 255, 255, .2) inset;
    }
    .navbar-custom #menuPrincipale .nav-link.pv-attivo.text-warning { color: var(--pv-scuro) !important; }
}

/* ---------- Superfici ---------- */
.card, .config-card, .sezione, .form-section, .login-container {
    border: 1px solid var(--pv-bordo) !important;
    border-radius: var(--pv-raggio) !important;
    box-shadow: var(--pv-ombra) !important;
    background-color: #fff;
}
.card-header {
    background-color: var(--pv-tinta);
    border-bottom: 1px solid var(--pv-bordo);
    color: var(--pv-scuro);
    font-weight: 600;
}
.card-header.bg-primary, .card-header.bg-info {
    background-color: var(--pv-tinta) !important;
    color: var(--pv-scuro) !important;
}
.card-header.bg-primary *, .card-header.bg-info * { color: inherit; }
.form-section { background-color: #fff !important; }

/* Configurazione: un solo stile per tutte le sezioni, niente arcobaleno */
.config-card {
    background: #fff !important;
    border-left: 4px solid var(--pv-primario) !important;
    overflow: hidden;
}
.config-card .config-card-header {
    background: var(--pv-tinta) !important;
    color: var(--pv-scuro) !important;
    border-bottom: 1px solid var(--pv-bordo);
}
.config-card .config-card-header h5, .config-card .config-card-header i { color: var(--pv-scuro) !important; }
.config-card.email .config-card-header:hover { background: rgba(var(--pv-primario-rgb), .16) !important; }

/* ---------- Pulsanti ---------- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--pv-primario);
    --bs-btn-border-color: var(--pv-primario);
    --bs-btn-hover-bg: var(--pv-scuro);
    --bs-btn-hover-border-color: var(--pv-scuro);
    --bs-btn-active-bg: var(--pv-scuro);
    --bs-btn-active-border-color: var(--pv-scuro);
    --bs-btn-disabled-bg: var(--pv-primario);
    --bs-btn-disabled-border-color: var(--pv-primario);
    --bs-btn-focus-shadow-rgb: var(--pv-primario-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--pv-primario);
    --bs-btn-border-color: rgba(var(--pv-primario-rgb), .55);
    --bs-btn-hover-bg: var(--pv-primario);
    --bs-btn-hover-border-color: var(--pv-primario);
    --bs-btn-active-bg: var(--pv-scuro);
    --bs-btn-active-border-color: var(--pv-scuro);
    --bs-btn-focus-shadow-rgb: var(--pv-primario-rgb);
}
/* "Cerca", "Storico": azioni di servizio, in tinta invece dell'azzurro acceso */
.btn-info {
    --bs-btn-color: var(--pv-scuro);
    --bs-btn-bg: var(--pv-tinta);
    --bs-btn-border-color: rgba(var(--pv-primario-rgb), .25);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pv-primario);
    --bs-btn-hover-border-color: var(--pv-primario);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pv-scuro);
    --bs-btn-active-border-color: var(--pv-scuro);
}
.btn-outline-info {
    --bs-btn-color: var(--pv-primario);
    --bs-btn-border-color: rgba(var(--pv-primario-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pv-primario);
    --bs-btn-hover-border-color: var(--pv-primario);
}
.btn-outline-secondary {
    --bs-btn-color: var(--pv-testo-2);
    --bs-btn-border-color: var(--pv-bordo-forte);
    --bs-btn-hover-bg: var(--pv-tinta);
    --bs-btn-hover-color: var(--pv-scuro);
    --bs-btn-hover-border-color: var(--pv-bordo-forte);
}

/* ---------- Colori di Bootstrap legati al primario ---------- */
.bg-primary { background-color: var(--pv-primario) !important; }
.text-primary { color: var(--pv-primario) !important; }
.border-primary { border-color: var(--pv-primario) !important; }
.bg-primary-subtle { background-color: var(--pv-tinta) !important; }
.link-primary { color: var(--pv-primario) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--pv-primario); }
.nav-tabs .nav-link.active { color: var(--pv-scuro); }
.nav-link { color: var(--pv-primario); }
.page-link { color: var(--pv-primario); }
.active > .page-link, .page-link.active { background-color: var(--pv-primario); border-color: var(--pv-primario); }
.list-group-item.active { background-color: var(--pv-primario); border-color: var(--pv-primario); }
.progress-bar { background-color: var(--pv-primario); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--pv-primario); }

/* ---------- Moduli ---------- */
.form-control, .form-select { border-color: var(--pv-bordo-forte); border-radius: 8px; }
.form-control:focus, .form-select:focus {
    border-color: var(--pv-primario) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--pv-primario-rgb), .18) !important;
}
.form-check-input:checked { background-color: var(--pv-primario); border-color: var(--pv-primario); }
.form-check-input:focus { border-color: var(--pv-primario); box-shadow: 0 0 0 .2rem rgba(var(--pv-primario-rgb), .18); }
.form-label { font-weight: 500; }
.input-group-text { background-color: var(--pv-tinta); border-color: var(--pv-bordo-forte); color: var(--pv-scuro); }

/* ---------- Tabelle ---------- */
.table { --bs-table-hover-bg: rgba(var(--pv-primario-rgb), .05); }
.table > thead > tr > th { color: var(--pv-testo-2); font-weight: 600; border-bottom-color: var(--pv-bordo-forte); }
.table-dark, .table > thead.table-dark > tr > th, .table-dark > tr > th {
    --bs-table-bg: var(--pv-scuro);
    --bs-table-color: #fff;
    --bs-table-border-color: rgba(255, 255, 255, .12);
    color: #fff !important;
}
.table-light, .table > thead.table-light > tr > th {
    --bs-table-bg: var(--pv-tinta);
    --bs-table-color: var(--pv-scuro);
}
.table-primary { --bs-table-bg: var(--pv-tinta); --bs-table-color: var(--pv-scuro); }

/* ---------- Badge ---------- */
.badge { font-weight: 600; letter-spacing: 0; }
.badge.bg-primary { background-color: var(--pv-primario) !important; }

/* ---------- Avvisi in tinta del set (quelli informativi) ---------- */
.alert-primary { background-color: var(--pv-tinta); border-color: rgba(var(--pv-primario-rgb), .25); color: var(--pv-scuro); }
.alert-info { background-color: var(--pv-tinta); border-color: rgba(var(--pv-primario-rgb), .25); color: var(--pv-scuro); }
.alert { border-radius: var(--pv-raggio); }

/* ---------- Agenda ---------- */
.agenda-table th.time-header { background-color: var(--pv-scuro) !important; }
.agenda-table td.time-cell, .agenda-table tr.riga-chiusura td { background-color: var(--pv-tinta) !important; color: var(--pv-scuro); }
.agenda-table td.ora-chiusura { color: var(--pv-scuro) !important; }
.agenda-table td.slot-cell:hover { background-color: rgba(var(--pv-primario-rgb), .08) !important; }
.agenda-table td.slot-cell { border-color: rgba(var(--pv-scuro-rgb), .1) !important; }
/* Fuori orario: tratteggio leggero invece del grigio pieno */
.agenda-table td.slot-cell[style*="#d9d9d9"],
.tab4 td.slot[style*="#d9d9d9"] {
    background-color: #eef0f3 !important;
    background-image: repeating-linear-gradient(0deg, rgba(var(--pv-scuro-rgb), .08) 0 1px, transparent 1px 8px);
}

/* ---------- Oggi ---------- */
.attesa-card { border-left: 4px solid var(--pv-primario) !important; }
.attesa-card.in-visita { border-left-color: #198754 !important; }
.attesa-card.segnalato { border-left-color: #dc3545 !important; }
.riga-presente { background: var(--pv-tinta) !important; }

/* ---------- Cartella clinica ---------- */
.visita-corrente { border-left: 4px solid var(--pv-primario) !important; }

/* ---------- Scelta del set di colori (Configurazione) ---------- */
.pv-temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pv-tema { position: relative; display: block; cursor: pointer; margin: 0; }
.pv-tema input { position: absolute; opacity: 0; pointer-events: none; }
.pv-tema .pv-tema-anteprima {
    display: block; border: 2px solid var(--pv-bordo); border-radius: 10px; overflow: hidden; background: #fff;
    transition: border-color .15s;
}
.pv-tema .pv-tema-barra { display: block; height: 18px; }
.pv-tema .pv-tema-foglio { display: flex; gap: 6px; align-items: center; padding: 10px; }
.pv-tema .pv-tema-pulsante { display: inline-block; width: 34px; height: 12px; border-radius: 4px; }
.pv-tema .pv-tema-riga { display: inline-block; flex: 1; height: 12px; border-radius: 4px; }
.pv-tema .pv-tema-nome { display: block; padding: 0 10px 8px; font-weight: 600; font-size: .9rem; color: var(--pv-testo); }
.pv-tema input:checked + .pv-tema-anteprima { border-color: var(--pv-primario); box-shadow: 0 0 0 3px rgba(var(--pv-primario-rgb), .2); }
.pv-tema input:focus-visible + .pv-tema-anteprima { outline: 2px solid var(--pv-primario); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Campi bianchi sul fondo tinto (Bootstrap li colora come la pagina) */
.form-control:not(:disabled):not([readonly]), .form-select:not(:disabled) { background-color: #fff; }

/* Orologio in alto: cifre tutte larghe uguali, cosi' i pulsanti non si spostano a ogni secondo */
#liveDateTime { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
#liveDateTime .pv-ora { display: inline-block; width: 4.9em; text-align: left; }

/* Telefono: i campi sotto i 16px fanno ingrandire la pagina all'iPhone quando li tocchi (e poi si sposta di lato) */
@media (max-width: 767px) {
    input.form-control, select.form-select, textarea.form-control, .form-control-sm, .form-select-sm { font-size: 16px !important; }
}