/* Tema applicativo: sovrascrive le variabili di Bootstrap 5.3 e definisce quelle custom (--app-*). */

:root {
    /* Variabili custom */
    --app-primary: #0e7c86;
    --app-primary-rgb: 14, 124, 134;
    --app-primary-hover: #0b646c;
    --app-primary-active: #095057;
    --app-primary-subtle: #dff1f3;
    --app-primary-border-subtle: #aedde1;
    --app-primary-emphasis: #08494f;
    --app-header-height: 3.5rem;
    --app-sidebar-width: 16rem;
    --app-content-max-width: 90rem;
    --app-surface: #ffffff;
    --app-surface-border: #dde3e8;
    --app-shadow: 0 0.125rem 0.5rem rgba(16, 42, 48, 0.08);

    /* Bootstrap: colori */
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-text-emphasis: var(--app-primary-emphasis);
    --bs-primary-bg-subtle: var(--app-primary-subtle);
    --bs-primary-border-subtle: var(--app-primary-border-subtle);
    --bs-secondary: #5f6f7a;
    --bs-secondary-rgb: 95, 111, 122;
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-link-hover-color-rgb: 11, 100, 108;
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), 0.25);

    /* Bootstrap: corpo e tipografia (font di sistema, nessun font esterno) */
    --bs-body-bg: #f6f8fa;
    --bs-body-bg-rgb: 246, 248, 250;
    --bs-body-color: #1d2b30;
    --bs-body-color-rgb: 29, 43, 48;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.95rem;
    --bs-border-color: var(--app-surface-border);

    /* Bootstrap: raggi */
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
}

[data-bs-theme="dark"] {
    --app-primary: #3fb4be;
    --app-primary-rgb: 63, 180, 190;
    --app-primary-hover: #66c6ce;
    --app-primary-active: #8cd6dc;
    --app-primary-subtle: #0a2f33;
    --app-primary-border-subtle: #0e5058;
    --app-primary-emphasis: #8cd6dc;
    --app-surface: #162326;
    --app-surface-border: #2a3b3f;
    --app-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);

    --bs-secondary: #8da0aa;
    --bs-secondary-rgb: 141, 160, 170;
    --bs-link-hover-color-rgb: 102, 198, 206;
    --bs-body-bg: #0f1a1c;
    --bs-body-bg-rgb: 15, 26, 28;
    --bs-body-color: #dbe5e8;
    --bs-body-color-rgb: 219, 229, 232;
}

/* Bootstrap fissa le variabili dei componenti per classe: vanno ridefinite qui. */
.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-active);
    --bs-btn-active-border-color: var(--app-primary-active);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
    --bs-btn-disabled-color: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--app-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), 0.25);
}

.page-link {
    --bs-pagination-color: var(--app-primary);
    --bs-pagination-hover-color: var(--app-primary-hover);
    --bs-pagination-focus-color: var(--app-primary-hover);
    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--app-primary);
}

.progress {
    --bs-progress-bar-bg: var(--app-primary);
}

/* Layout applicativo */
.app-header {
    min-height: var(--app-header-height);
    background-color: var(--app-primary);
    color: #fff;
    box-shadow: var(--app-shadow);
}

.app-header .navbar-brand,
.app-header .nav-link {
    color: #fff;
}

.app-contenuto {
    max-width: var(--app-content-max-width);
    margin-inline: auto;
    padding-block: 1.5rem;
}

.app-card {
    background-color: var(--app-surface);
    border: 1px solid var(--app-surface-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--app-shadow);
}

/* Collegamento "Vai al contenuto" (visibile solo con la tastiera) */
.app-salta:focus {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    padding: 0.5rem 1rem;
    background-color: var(--app-surface);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--app-shadow);
}

.app-contenuto:focus {
    outline: none;
}

/* Barra di avanzamento di Turbo nel colore del tema */
.turbo-progress-bar {
    height: 3px;
    background-color: #fff;
}

/* Pannello laterale: il titolo del contenuto ([data-pannello-titolo]) va nell'intestazione del pannello */
.app-pannello {
    --bs-offcanvas-width: min(36rem, 100vw);
}

.app-pannello .offcanvas-body [data-pannello-titolo] {
    display: none;
}

/* Scheda paziente: intestazione sempre visibile e schede */
.app-paziente-intestazione {
    position: sticky;
    top: 0;
    z-index: 1010;
    margin-bottom: 1rem;
}

.app-paziente-nota-testo,
.app-testo-righe {
    white-space: pre-line;
}

.app-paziente-schede {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.app-paziente-schede .nav-link {
    white-space: nowrap;
}

/* Odontogramma (croce dei quadranti) */
.odo {
    --odo-da-fare: #c62828;
    --odo-in-corso: #1565c0;
    --odo-eseguita: #2e7d32;
    --odo-linea: #8a9aa3;
    --odo-numero: var(--bs-body-color);
    --odo-fascia-attiva: rgba(var(--app-primary-rgb), 0.12);
    --odo-fascia-scelta: rgba(var(--app-primary-rgb), 0.28);
    --odo-prossima: #ffe082;
}

[data-bs-theme="dark"] .odo {
    --odo-da-fare: #ef7a7a;
    --odo-in-corso: #79a8ff;
    --odo-eseguita: #6fcf75;
    --odo-linea: #5c6f77;
    --odo-prossima: #6d5a16;
}

.odo-svg {
    display: block;
    width: 100%;
    max-width: 60rem;
    height: auto;
    font-family: var(--bs-body-font-family);
    user-select: none;
}

.odo-linea {
    stroke: var(--odo-linea);
    stroke-width: 1.5;
}

.odo-dente {
    cursor: pointer;
    outline: none;
}

.odo-fascia {
    fill: transparent;
}

.odo-dente:hover .odo-fascia {
    fill: var(--odo-fascia-attiva);
}

.odo-dente:focus-visible .odo-fascia {
    stroke: var(--app-primary);
    stroke-width: 2;
}

.odo-selezionato .odo-fascia {
    fill: var(--odo-fascia-scelta);
}

.odo-numero {
    fill: var(--odo-numero);
    font-size: 15px;
    font-weight: 600;
}

.odo-riga-decidui .odo-numero {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
}

.odo-sigla {
    font-size: 12px;
    font-weight: 600;
}

text.odo-da-fare { fill: var(--odo-da-fare); }
text.odo-in-corso { fill: var(--odo-in-corso); font-style: italic; }
text.odo-eseguita { fill: var(--odo-eseguita); }
.odo-da-fare:not(text) { color: var(--odo-da-fare); }
.odo-in-corso:not(text) { color: var(--odo-in-corso); font-style: italic; }
.odo-eseguita:not(text) { color: var(--odo-eseguita); }
.odo-annullata:not(text) { color: var(--bs-secondary-color); text-decoration: line-through; }
.odo-commento { text-decoration: underline; }

.odo-agenda {
    fill: none;
    stroke: var(--odo-da-fare);
    stroke-width: 1.2;
}

.odo-agenda-legenda {
    padding: 0 0.2rem;
    border: 1px solid var(--odo-da-fare);
    border-radius: 2px;
}

.odo-prossima {
    fill: var(--odo-prossima);
}

.odo-prossima-legenda {
    padding: 0 0.2rem;
    border-radius: 2px;
    background: var(--odo-prossima);
}

.odo-eo {
    cursor: pointer;
    outline: none;
}

.odo-eo circle {
    fill: var(--app-surface);
    stroke: var(--odo-linea);
}

.odo-eo:hover circle,
.odo-eo:focus-visible circle {
    stroke: var(--app-primary);
    stroke-width: 2;
}

.odo-eo text {
    fill: var(--odo-numero);
    font-size: 11px;
}

/* --- Pazienti e anamnesi (A1) ----------------------------------------------------------------------------- */

/* Riquadro della firma: sempre chiaro (il tratto è nero anche con il tema scuro), alto abbastanza per il dito. */
.app-firma {
    background: #fff;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 40rem;
}

.app-firma.is-invalid { border-color: var(--bs-form-invalid-border-color); }

.app-firma-tela {
    display: block;
    width: 100%;
    height: 12rem;
    touch-action: none;
    cursor: crosshair;
}

/* Compilazione guidata: pulsanti grandi, usabili da tablet. */
.app-risposta { min-width: 8rem; min-height: 3.5rem; font-size: 1.25rem; }
.app-avanzamento { height: 0.5rem; accent-color: var(--app-primary); }

/* Rientro delle voci della legenda per livello dell'albero. */
.app-rientro-1 { padding-left: 1.25rem; }
.app-rientro-2 { padding-left: 2.5rem; }
.app-rientro-3 { padding-left: 3.75rem; }
.app-rientro-4 { padding-left: 5rem; }

/* Modifica di una voce in riga: il pannello del <details> si apre sopra la tabella. */
td details > summary { list-style: none; }
td details > summary::-webkit-details-marker { display: none; }
td details form { min-width: 20rem; }

/* Fatturazione (A3): niente style inline, la CSP (style-src con nonce) li blocca. */
.app-testo-a-capo { white-space: pre-line; }
.app-colonna-importo { width: 10rem; }
.app-colonna-importo-largo { width: 12rem; }