/* Nassau Finance, direzione grafica "C. La banca privata" (§6 del design, mockup approvati il 28/10/2026). */
:root {
    --notte: #0f2238;
    --notte-2: #17304d;
    --mare: #4aa79f;
    --mare-chiaro: #dff1ef;
    --mare-scuro: #2b6f69;
    --nebbia: #f3f5f8;
    --carta: #ffffff;
    --grigio: #6a7687;
    --linea: #e3e7ec;
    --ambra: #e0a83a;
    --ambra-chiaro: #fbf1dc;
    --ambra-scuro: #8a5a00;
    --rosso: #c2463d;
    --rosso-chiaro: #fbe9e7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 15px/1.5 "Libre Franklin", system-ui, sans-serif; color: var(--notte); background: var(--nebbia); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
input, textarea, select, button { font: inherit; color: inherit; }
.contenitore { max-width: 1120px; margin: 0 auto; padding: 0 36px; }

/* Pulsanti */
.pulsante { display: inline-block; background: var(--mare); color: var(--notte); border: 0; border-radius: 24px; padding: 10px 22px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.pulsante:hover { background: #3f968f; }
.pulsante-secondario { background: transparent; border: 1.5px solid var(--linea); font-weight: 500; }
.pulsante-secondario:hover { background: var(--nebbia); }
.pulsante-pericolo { background: transparent; border: 1.5px solid var(--rosso); color: var(--rosso); font-weight: 500; }
.pulsante-pericolo:hover { background: var(--rosso-chiaro); }

/* Messaggi */
.messaggio { border-radius: 8px; padding: 10px 14px; margin: 18px 0 0; font-size: 14px; }
.messaggio.ok { background: var(--mare-chiaro); color: var(--mare-scuro); }
.messaggio.avviso { background: var(--ambra-chiaro); color: var(--ambra-scuro); }
.messaggio.errore { background: var(--rosso-chiaro); color: var(--rosso); margin: 0 0 16px; }
.errore { color: var(--rosso); font-size: 13px; margin-top: 4px; }
.nota { color: var(--grigio); font-size: 13px; }

/* Fascia blu notte */
.fascia { background: var(--notte); color: #fff; padding: 22px 0 64px; }
.fascia-bassa { padding-bottom: 30px; }
.testata { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.marchio { font-weight: 700; font-size: 18px; text-decoration: none; }
.testata nav { display: flex; gap: 22px; align-items: center; }
.testata nav a, .link-nav { text-decoration: none; opacity: .75; background: none; border: 0; cursor: pointer; padding: 0 0 2px; }
.testata nav a:hover, .link-nav:hover { opacity: 1; }
.testata nav a.attivo { opacity: 1; font-weight: 500; border-bottom: 2px solid var(--mare); }
.testata form { display: inline; }
.saluto { margin-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.saluto h1 { font-size: 28px; font-weight: 400; line-height: 1.15; max-width: 24ch; }
.contatore { text-align: right; }
.contatore big { display: block; font-size: 50px; font-weight: 300; line-height: 1; color: var(--mare); }
.contatore big span { font-size: 22px; color: #fff; opacity: .55; }
.contatore big.contatore-illimitate { font-size: 26px; font-weight: 400; }
.contatore small { display: block; opacity: .75; font-size: 13px; margin-top: 4px; }
.indietro { display: inline-block; font-size: 14px; opacity: .8; margin-top: 24px; text-decoration: none; }
.indietro::before { content: "‹ "; }
.barra-impersona { background: var(--ambra); color: var(--notte); padding: 8px 16px; font-size: 14px; display: flex; gap: 14px; justify-content: center; align-items: center; }
.barra-impersona button { background: var(--notte); color: #fff; border: 0; border-radius: 14px; padding: 3px 12px; cursor: pointer; }

/* Foglio appoggiato sulla fascia */
.foglio { background: var(--carta); border-radius: 10px; padding: 24px 26px; box-shadow: 0 10px 30px rgba(15, 34, 56, .12); }
main > .foglio:first-child, main > .messaggio + .foglio, main > .foglio.modulo-analisi { margin-top: -40px; position: relative; }
.campo label { display: block; font-size: 13px; font-weight: 500; color: var(--grigio); margin-bottom: 4px; }
.campo input, .campo textarea, .campo select { width: 100%; border: 0; border-bottom: 1.5px solid var(--linea); padding: 5px 0 7px; background: transparent; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-bottom-color: var(--mare); }
.campo ::placeholder { color: #a3acb8; }
.modulo-analisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 22px; }
.campo-pieno { grid-column: 1 / -1; }
.campo-due-terzi { grid-column: span 2; }
.modulo-analisi .messaggio { grid-column: 1 / -1; }
.invio { align-self: end; text-align: right; }

/* Report */
.report { padding: 34px 0 48px; }
.report h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.report .nota { margin-bottom: 14px; }
.vuoto { background: var(--carta); border-radius: 10px; padding: 22px; color: var(--grigio); margin-top: 10px; }
.griglia-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.scheda { background: var(--carta); border-radius: 10px; padding: 16px 18px; border-left: 4px solid var(--linea); display: flex; flex-direction: column; gap: 4px; }
.scheda h3 { font-size: 17px; font-weight: 500; line-height: 1.25; }
.scheda h3 a { text-decoration: none; }
.scheda h3 a:hover { text-decoration: underline; }
.scheda-stato { font-size: 13px; color: var(--grigio); }
.scheda-testo { font-size: 14px; }
.scheda-data { font-size: 12px; color: var(--grigio); margin-top: auto; padding-top: 8px; }
.scheda .pulsante { align-self: flex-start; margin-top: 8px; }
.scheda-corso { border-left-color: var(--ambra); }
.scheda-corso .scheda-stato { color: var(--ambra-scuro); }
.scheda-pronto { border-left-color: var(--mare); }
.scheda-pronto .scheda-stato { color: var(--mare-scuro); }
.scheda-errore { border-left-color: var(--rosso); }
.scheda-errore .scheda-stato { color: var(--rosso); }
.scheda-annullata { opacity: .75; }
.barra { height: 8px; background: rgba(15, 34, 56, .1); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.barra i { display: block; height: 100%; background: var(--ambra); transition: width .6s ease; }
.paginazione { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 20px; font-size: 14px; color: var(--grigio); }
.paginazione a { color: var(--notte); font-weight: 500; }

/* Dettaglio */
.dettaglio { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; padding: 30px 0 48px; }
.dettaglio-dati dt { font-size: 13px; font-weight: 500; color: var(--grigio); margin-top: 14px; }
.dettaglio-dati dt:first-child { margin-top: 0; }
.dettaglio-stato .scheda { padding: 20px 22px; }
.dettaglio-stato .nota { margin-top: 8px; }

/* Pagine di accesso */
.pagina-accesso { background: var(--notte); min-height: 100vh; }
.accesso { max-width: 420px; margin: 0 auto; padding: 12vh 16px 40px; }
.accesso-marchio { color: #fff; font-weight: 700; font-size: 20px; margin-bottom: 20px; }
.accesso .foglio { padding: 28px; }
.accesso h1 { font-size: 24px; font-weight: 400; margin-bottom: 16px; }
.accesso label { display: block; font-size: 13px; font-weight: 500; color: var(--grigio); margin: 14px 0 4px; }
.accesso input { width: 100%; border: 0; border-bottom: 1.5px solid var(--linea); padding: 6px 0; background: transparent; }
.accesso input:focus { border-bottom-color: var(--mare); outline: none; }
.accesso button { margin-top: 22px; width: 100%; }
.accesso .link { display: block; text-align: center; font-size: 13px; color: var(--grigio); margin-top: 14px; }
.accesso .messaggio { margin: 0 0 12px; }
.accesso .nota { margin-bottom: 4px; }
.accesso a.pulsante { display: block; text-align: center; margin-top: 18px; }

/* Profilo */
.profilo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 48px; }
.profilo-sezione h2 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.profilo-sezione .campo { margin-bottom: 14px; }
.profilo-sezione .nota { margin: 6px 0 14px; }
.profilo-dati dt { font-size: 13px; font-weight: 500; color: var(--grigio); margin-top: 10px; }
.profilo-dati dt:first-child { margin-top: 0; }
.profilo-dati dd { overflow-wrap: anywhere; }
.bordo-mare { border-left: 3px solid var(--mare); padding-left: 18px; }
.scelta { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.scelta .interruttore { flex: none; }

@media (max-width: 760px) {
    .contenitore { padding: 0 16px; }
    .saluto { flex-direction: column; align-items: flex-start; }
    .contatore { text-align: left; }
    .modulo-analisi, .dettaglio, .profilo { grid-template-columns: 1fr; }
    .campo-due-terzi { grid-column: auto; }
    .invio { text-align: left; }
    .testata nav { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .barra i { transition: none; }
}

/* Area admin: stessa identità, più compatta (§6 del design) */
.pagina-admin { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; background: var(--carta); }
.admin-menu { background: var(--notte); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; position: sticky; top: 0; height: 100vh; }
.admin-menu .marchio { margin: 0 8px 20px; font-size: 16px; }
.admin-menu nav { display: flex; flex-direction: column; gap: 2px; }
.admin-menu nav a { padding: 8px 10px; border-radius: 6px; opacity: .75; text-decoration: none; }
.admin-menu nav a:hover { opacity: 1; }
.admin-menu nav a.attivo { background: var(--notte-2); opacity: 1; box-shadow: inset 3px 0 0 var(--mare); }
.admin-menu form { margin-top: auto; padding: 8px 10px; }
.admin-contenuto { padding: 22px 28px 40px; min-width: 0; }
.admin-contenuto h1 { font-size: 22px; font-weight: 500; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-contenuto h2 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.admin-contenuto .messaggio { margin: 0 0 16px; }
.cerca { display: flex; gap: 8px; }
.cerca input, .cerca select { border: 1px solid var(--linea); border-radius: 20px; padding: 6px 14px; font-size: 13px; min-width: 220px; }
.allarme { background: var(--rosso-chiaro); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
.allarme > strong { color: var(--rosso); font-size: 13px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th { text-align: left; font-weight: 500; color: var(--grigio); padding: 7px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabella td { padding: 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella td small { display: block; color: var(--grigio); }
.tabella-scorre { overflow-x: auto; }
.pill { display: inline-block; border-radius: 12px; padding: 1px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill-pronto { background: var(--mare-chiaro); color: var(--mare-scuro); }
.pill-corso { background: var(--ambra-chiaro); color: var(--ambra-scuro); }
.pill-errore { background: var(--rosso-chiaro); color: var(--rosso); }
.pill-coda, .pill-annullata { background: var(--nebbia); color: var(--grigio); }
.pill-spento { background: #eceff3; color: #7d8794; }
.azioni { white-space: nowrap; display: flex; gap: 10px; flex-wrap: wrap; }
.azioni form { display: inline; }
.azioni a, .azioni button { color: var(--mare-scuro); font-weight: 500; font-size: 13px; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.azioni button.pericolo { color: var(--rosso); }
.azioni a:hover, .azioni button:hover { text-decoration: underline; }
.interruttore { appearance: none; width: 32px; height: 18px; border-radius: 9px; background: #c9d0d8; position: relative; cursor: pointer; vertical-align: middle; border: 0; }
.interruttore::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.interruttore[aria-pressed="true"], .interruttore:checked { background: var(--mare); }
.interruttore[aria-pressed="true"]::after, .interruttore:checked::after { left: 16px; }
.modulo-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; max-width: 760px; }
.modulo-admin .campo-pieno { grid-column: 1 / -1; }
.riquadro { border: 1px solid var(--linea); border-radius: 10px; padding: 16px 18px; }
.colonne-admin { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.riquadro + .riquadro { margin-top: 16px; }
.admin-contenuto form.cerca { margin-bottom: 16px; flex-wrap: wrap; }
.riquadro h2 { margin-top: 0; }
.riquadro .campo { margin-bottom: 12px; }
.campo input[type="checkbox"] { width: auto; border: 0; padding: 0; margin: 0 6px 0 0; vertical-align: middle; }
.campo label:has(input[type="checkbox"]) { display: flex; align-items: center; margin: 8px 0 0; }
.elenco-accessi { list-style: none; padding: 0; margin: 0; font-size: 13px; columns: 2; max-height: 340px; overflow-y: auto; }
.elenco-accessi li { padding: 2px 0; }

@media (max-width: 860px) {
    .pagina-admin { grid-template-columns: 1fr; }
    .admin-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .admin-menu .marchio { margin: 0 12px 0 0; }
    .admin-menu nav { flex-direction: row; }
    .admin-menu form { margin: 0 0 0 auto; padding: 0; }
    .admin-contenuto { padding: 18px 16px 32px; }
    .modulo-admin, .colonne-admin { grid-template-columns: 1fr; }
}

/* Admin, statistiche: numeri di riepilogo */
.riepilogo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.riepilogo div { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; }
.riepilogo strong { display: block; font-size: 26px; font-weight: 300; line-height: 1.1; color: var(--mare-scuro); }
.riepilogo span { font-size: 12px; color: var(--grigio); }
.tabella td.numero, .tabella th.numero { text-align: right; }
@media (max-width: 860px) { .riepilogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }