/* =========================================================================
   SakuCRM — tema applicativo su Bootstrap 5.3
   ========================================================================= */

:root {
    --saku-primary:    #4338ca;
    --saku-primary-2:  #6366f1;
    --saku-accent:     #06b6d4;
    --saku-sidebar-w:  264px;
    --saku-radius:     .75rem;
    --saku-shadow:     0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
    --saku-shadow-lg:  0 4px 12px rgba(15,23,42,.08), 0 24px 48px -24px rgba(15,23,42,.30);
}

[data-bs-theme="light"] {
    --bs-body-bg:      #f1f5f9;
    --bs-body-color:   #0f172a;
    --saku-surface:    #ffffff;
    --saku-border:     #e2e8f0;
    --saku-muted:      #64748b;
    --saku-sidebar-bg: #ffffff;
    --saku-hover:      #f8fafc;
}

[data-bs-theme="dark"] {
    --bs-body-bg:      #0b1120;
    --bs-body-color:   #e2e8f0;
    --saku-surface:    #111827;
    --saku-border:     #1f2937;
    --saku-muted:      #94a3b8;
    --saku-sidebar-bg: #0f172a;
    --saku-hover:      #1e293b;
    --saku-primary:    #6366f1;
    --saku-primary-2:  #818cf8;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

.btn-primary, .btn-primary:disabled {
    --bs-btn-bg: var(--saku-primary); --bs-btn-border-color: var(--saku-primary);
    --bs-btn-hover-bg: var(--saku-primary-2); --bs-btn-hover-border-color: var(--saku-primary-2);
    --bs-btn-active-bg: var(--saku-primary); --bs-btn-active-border-color: var(--saku-primary);
    --bs-btn-disabled-bg: var(--saku-primary); --bs-btn-disabled-border-color: var(--saku-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--saku-primary); --bs-btn-border-color: var(--saku-primary);
    --bs-btn-hover-bg: var(--saku-primary); --bs-btn-hover-border-color: var(--saku-primary);
    --bs-btn-active-bg: var(--saku-primary); --bs-btn-active-border-color: var(--saku-primary);
}
a { color: var(--saku-primary); text-decoration: none; }
a:hover { color: var(--saku-primary-2); text-decoration: underline; }
.text-primary { color: var(--saku-primary) !important; }
.bg-primary  { background-color: var(--saku-primary) !important; }

/* ------------------------------------------------------------ struttura */
.saku-shell { display: flex; min-height: 100vh; }

.saku-sidebar {
    width: var(--saku-sidebar-w); flex: 0 0 var(--saku-sidebar-w);
    background: var(--saku-sidebar-bg);
    border-right: 1px solid var(--saku-border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; z-index: 1030;
}
.saku-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--saku-border);
    font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
    color: var(--bs-body-color); text-decoration: none;
}
.saku-brand:hover { color: var(--bs-body-color); text-decoration: none; }
/* Il logo esiste in due versioni: tratto scuro per il tema chiaro e tratto
   bianco per quello scuro. Si alternano sull'attributo data-bs-theme e non
   su prefers-color-scheme, perché qui il tema è una scelta esplicita
   dell'utente e può divergere da quella del sistema operativo. */
.saku-logo { height: auto; display: block; }
.saku-logo-scuro { display: none; }
[data-bs-theme="dark"] .saku-logo-chiaro { display: none; }
[data-bs-theme="dark"] .saku-logo-scuro  { display: block; }

.saku-brand .saku-logo     { width: 170px; }
.saku-auth-card .saku-logo { width: 200px; margin-inline: auto; }

/* Il selettore del tema sotto la scheda di accesso: quadratino con l'icona e
   basta. Senza etichetta visibile il nome accessibile arriva da aria-label,
   e i 32px tengono l'area cliccabile utilizzabile anche col dito. */
.saku-tema-btn {
    width: 32px; height: 32px; padding: 0; line-height: 1;
    display: inline-grid; place-items: center;
    border: 1px solid var(--saku-border); border-radius: .5rem;
    background: var(--saku-surface); color: var(--saku-muted);
    transition: background .12s, color .12s, border-color .12s;
}
.saku-tema-btn:hover {
    background: var(--saku-hover); color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--saku-primary) 35%, var(--saku-border));
}
.saku-tema-btn:focus-visible { outline: 2px solid var(--saku-primary); outline-offset: 2px; }

.saku-nav { flex: 1; overflow-y: auto; padding: .85rem .75rem 1.5rem; }
.saku-nav-label {
    font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--saku-muted); padding: 1rem .6rem .4rem;
}
.saku-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .65rem; margin-bottom: .1rem;
    border-radius: .55rem; color: var(--bs-body-color);
    font-weight: 500; text-decoration: none; transition: background .12s, color .12s;
}
.saku-nav-link:hover { background: var(--saku-hover); color: var(--bs-body-color); text-decoration: none; }
.saku-nav-link.active { background: color-mix(in srgb, var(--saku-primary) 12%, transparent); color: var(--saku-primary); font-weight: 600; }
.saku-nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.saku-nav-link .badge { margin-left: auto; }

.saku-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.saku-topbar {
    position: sticky; top: 0; z-index: 1020;
    background: color-mix(in srgb, var(--saku-surface) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--saku-border);
    padding: .6rem 1.25rem; display: flex; align-items: center; gap: .75rem;
}
.saku-content { padding: 1.5rem 1.25rem 3rem; flex: 1; }
@media (min-width: 1400px) { .saku-content { padding-inline: 2rem; } }

/* -------------------------------------------------------------- schede */
.card {
    border: 1px solid var(--saku-border); border-radius: var(--saku-radius);
    background: var(--saku-surface); box-shadow: var(--saku-shadow);
}
.card-header {
    background: transparent; border-bottom: 1px solid var(--saku-border);
    padding: .9rem 1.15rem; font-weight: 600;
}
.card-body { padding: 1.15rem; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.stat-card .stat-label { font-size: .8125rem; color: var(--saku-muted); font-weight: 500; }
.stat-card .stat-icon {
    width: 42px; height: 42px; border-radius: .65rem; display: grid; place-items: center;
    font-size: 1.15rem; flex: 0 0 42px;
}

/* -------------------------------------------------------------- tabelle */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .85rem; }
.table thead th {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .045em;
    color: var(--saku-muted); font-weight: 600; border-bottom-width: 1px;
    white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { background-color: var(--saku-hover); }
.table-clickable tbody tr { cursor: pointer; }

.saku-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    display: grid; place-items: center; color: #fff;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.saku-avatar-sm { width: 26px; height: 26px; flex-basis: 26px; font-size: .65rem; }
.saku-avatar-lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.35rem; }

/* -------------------------------------------------------------- badge */
.badge { font-weight: 600; letter-spacing: .01em; }
.badge-soft {
    background: color-mix(in srgb, var(--badge-color, var(--saku-primary)) 14%, transparent);
    color: var(--badge-color, var(--saku-primary));
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--saku-primary)) 26%, transparent);
    padding: .3em .6em; border-radius: .4rem; font-size: .75rem; display: inline-block;
}
/* Bootstrap non ha questa utilita', e senza min-width:0 un figlio flessibile
   non si restringe mai sotto il suo contenuto: il testo lungo sfonda la scheda
   invece di accorciarsi con i puntini. Nell'applicazione la classe era gia'
   scritta in una decina di viste, mancava solo la riga che la fa funzionare. */
.min-w-0 { min-width: 0; }

.masked-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .06em; color: var(--saku-muted); cursor: help;
}

/* ------------------------------------------------------------- kanban */
.kanban { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban-col {
    flex: 0 0 288px; width: 288px;
    background: var(--saku-hover); border: 1px solid var(--saku-border);
    border-radius: var(--saku-radius); display: flex; flex-direction: column; max-height: calc(100vh - 230px);
}
.kanban-col-head {
    padding: .7rem .85rem; border-bottom: 1px solid var(--saku-border);
    display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem;
    position: sticky; top: 0; background: inherit; border-radius: var(--saku-radius) var(--saku-radius) 0 0;
}
.kanban-col-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.kanban-body { padding: .6rem; overflow-y: auto; flex: 1; min-height: 90px; }
.kanban-card {
    background: var(--saku-surface); border: 1px solid var(--saku-border);
    border-radius: .6rem; padding: .7rem .8rem; margin-bottom: .55rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.05); cursor: grab; transition: box-shadow .12s, transform .12s;
}
.kanban-card:hover { box-shadow: var(--saku-shadow-lg); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .45; }
.kanban-col.drop-target { outline: 2px dashed var(--saku-primary); outline-offset: -3px; }
.kanban-card-title { font-weight: 600; font-size: .875rem; line-height: 1.35; margin-bottom: .3rem; }
.kanban-card-meta { font-size: .75rem; color: var(--saku-muted); display: flex; align-items: center; gap: .4rem; }

/* ----------------------------------------------------------- timeline */
.timeline { position: relative; padding-left: 2.1rem; }
.timeline::before {
    content: ""; position: absolute; left: .6375rem; top: .4rem; bottom: .4rem;
    width: 2px; background: var(--saku-border);
}
.timeline-item { position: relative; padding-bottom: 1.4rem; }
/* Il cerchio sta 10px piu' a sinistra e 10px piu' in alto di dove cadrebbe da
   solo: cosi' si allinea alla prima riga del titolo invece di scivolare sotto,
   e la linea verticale gli passa esattamente in mezzo. */
.timeline-dot {
    position: absolute; left: -2.275rem; top: -.525rem;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem;
    background: var(--saku-surface); border: 2px solid var(--saku-border);
}
.timeline-time { font-size: .75rem; color: var(--saku-muted); }

/* ---------------------------------------------------------- form / vari */
.form-label { font-weight: 600; font-size: .8125rem; margin-bottom: .3rem; }

/* Nelle schermate di accesso l'etichetta sta un po' più staccata dalla casella:
   il campo è uno solo e al centro della pagina, quindi la coppia non deve
   sembrare incollata come nei moduli fitti del gestionale. */
.saku-auth-card .form-label { margin-bottom: .55rem; }
.form-control, .form-select { border-color: var(--saku-border); }
.form-control:focus, .form-select:focus {
    border-color: var(--saku-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--saku-primary) 18%, transparent);
}
.form-text { font-size: .75rem; }
.required::after { content: " *"; color: var(--bs-danger); font-weight: 700; }

.saku-empty { text-align: center; padding: 3rem 1rem; color: var(--saku-muted); }
.saku-empty > i { font-size: 2.75rem; opacity: .35; display: block; margin-bottom: .85rem; }

.saku-auth {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background:
        radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--saku-primary) 22%, transparent), transparent 60%),
        radial-gradient(800px 480px at 92% 108%, color-mix(in srgb, var(--saku-accent) 20%, transparent), transparent 62%),
        var(--bs-body-bg);
}
.saku-auth-card { width: 100%; max-width: 430px; }
.saku-otp {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6rem; letter-spacing: .55em; text-align: center; padding-left: .55em;
}
.saku-recovery-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--saku-hover); border: 1px solid var(--saku-border);
    border-radius: .4rem; padding: .45rem .6rem; font-size: .875rem; letter-spacing: .04em;
}
.saku-qr { background:#fff; padding:.75rem; border-radius:.6rem; display:inline-block; border:1px solid var(--saku-border); }
.saku-qr svg { display: block; width: 200px; height: 200px; }

.pw-meter { height: 5px; border-radius: 3px; background: var(--saku-border); overflow: hidden; }
.pw-meter > span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }

.saku-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.saku-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--saku-hover); border: 1px solid var(--saku-border);
    border-radius: 2rem; padding: .2rem .55rem .2rem .7rem; font-size: .78125rem;
}
.saku-chip a { color: var(--saku-muted); line-height: 1; }

.sortable-th a { color: inherit; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
.sortable-th a:hover { color: var(--saku-primary); }

.saku-scrollbox { max-height: 380px; overflow-y: auto; }
.saku-sticky-actions {
    position: sticky; bottom: 0; background: var(--saku-surface);
    border-top: 1px solid var(--saku-border); padding: .85rem 1.15rem; margin: 0 -1.15rem -1.15rem;
    border-radius: 0 0 var(--saku-radius) var(--saku-radius);
}

/* Barra dei pulsanti di un modulo che si sviluppa su due colonne: va sotto
   l'intero modulo, non dentro una delle due colonne, altrimenti su schermo
   largo finisce di fianco all'altra invece che in fondo. */
.saku-form-actions {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    background: var(--saku-surface); border: 1px solid var(--saku-border);
    border-radius: var(--saku-radius); padding: .85rem 1.15rem; margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .saku-sidebar {
        position: fixed; left: 0; top: 0; transform: translateX(-100%);
        transition: transform .22s ease; box-shadow: var(--saku-shadow-lg);
    }
    .saku-sidebar.open { transform: translateX(0); }
    .saku-backdrop {
        position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1029;
    }
}
@media (min-width: 992px) { .saku-backdrop, .saku-burger { display: none !important; } }

/* Pulsante dell'utente in fondo alla barra laterale: niente .btn-light,
   che nel tema scuro imporrebbe testo e icona neri su fondo scuro. */
.saku-utente {
    background: transparent; border: 0; border-radius: var(--saku-radius);
    color: inherit; padding: .4rem .5rem;
}
.saku-utente:hover, .saku-utente:focus-visible, .saku-utente[aria-expanded="true"] {
    background: var(--saku-hover);
}

/* Richiesta di conferma: riquadro piccolo e sobrio, senza icone grandi. */
.saku-chiedi-sfondo {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.32); padding: 1rem;
    opacity: 0; transition: opacity .12s ease;
}
.saku-chiedi-sfondo.aperto { opacity: 1; }
.saku-chiedi {
    width: 100%; max-width: 340px;
    background: var(--saku-surface); color: inherit;
    border: 1px solid var(--saku-border); border-radius: var(--saku-radius);
    box-shadow: var(--saku-shadow-lg);
    padding: 1.15rem 1.15rem 1rem;
    transform: translateY(-6px); transition: transform .12s ease;
}
.saku-chiedi-sfondo.aperto .saku-chiedi { transform: none; }
.saku-chiedi-titolo { margin: 0 0 .3rem; font-weight: 600; font-size: .9375rem; }
.saku-chiedi-testo  { margin: 0; font-size: .875rem; line-height: 1.45; }
.saku-chiedi-azioni { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
.saku-chiedi-etichetta {
    display: block; margin: .9rem 0 .3rem;
    font-size: .8125rem; font-weight: 600;
}
.saku-chiedi-campo { width: 100%; }

/* ------------------------------------------------ archivio a cartelle
   L'albero a sinistra e le cartelle al centro: la stessa idea dell'esplora
   file, cioe' prima si scegli dove guardare e poi si guarda. */
/* L'albero e' un elenco senza pallini: una categoria per riga, col corpo un
   po' piu' grande perche' questa colonna e' la prima cosa che si legge. */
.saku-albero, .saku-albero-rami { list-style: none; margin: 0; padding: 0; }
.saku-albero { font-size: 1rem; }
.saku-albero a {
    display: flex; align-items: center; gap: .6rem;
    padding: .48rem .55rem; border-radius: .45rem;
    color: inherit; text-decoration: none; line-height: 1.3;
}
.saku-albero a > i { flex: 0 0 auto; width: 1.45rem; font-size: 1.2rem; text-align: center; }
.saku-albero a:hover { background: var(--saku-hover); }
.saku-albero a.attivo {
    background: color-mix(in srgb, var(--saku-primary) 13%, transparent);
    color: var(--saku-primary); font-weight: 600;
}
.saku-albero-radice { font-weight: 600; }
.saku-albero .saku-albero-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* I rami: rientrati sotto il ramo principale. */
.saku-albero-rami { margin-top: .1rem; padding-left: .8rem; }
.saku-albero-vuoto { padding: .48rem .55rem; font-size: .875rem; color: var(--saku-muted); }

/* Le categorie al centro: una riga per categoria, e su quella riga tutto
   quello che la riguarda. */
.saku-cartelle { overflow: hidden; }
.saku-cartella {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .9rem; text-decoration: none; color: inherit;
    border-top: 1px solid var(--saku-border);
}
.saku-cartella:first-child { border-top: 0; }
.saku-cartella:hover { background: var(--saku-hover); color: inherit; text-decoration: none; }
.saku-cartella > i {
    flex: 0 0 auto; width: 1.5rem; text-align: center;
    font-size: 1.25rem; line-height: 1;
    color: var(--cartella-color, var(--saku-primary));
}
.saku-cartella-nome {
    flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saku-cartella-meta { flex: 0 0 auto; font-size: .8125rem; color: var(--saku-muted); white-space: nowrap; }

/* L'elenco delle carte: un filo piu' grande della tabella normale, perche'
   qui si legge una riga alla volta e il corpo conta piu' della densita'.
   Le classi .small di Bootstrap sono in em, quindi seguono da sole. */
.saku-documenti { font-size: 1.0625rem; }
.saku-documenti .badge-soft { font-size: .8125rem; }

@media print {
    .saku-sidebar, .saku-topbar, .no-print { display: none !important; }
    .saku-content { padding: 0; }
    .card { box-shadow: none; border-color: #cbd5e1; }
}