/* --- temi dell'interfaccia --------------------------------------------------
   Ogni colore del prodotto passa da qui: guscio (app.css), kit (jt3-kit.css),
   time tracker (timelog.css), gli stili delle pagine dei moduli e quelli delle
   personalizzazioni cliente. Il tema si sceglie sull'elemento radice
   (<html data-theme="...">) e il catalogo sta in UiThemes.cs, che lo accoppia
   al tema DevExpress corrispondente.

   Regola per chi scrive CSS: un colore neutro o di stato non si scrive in
   esadecimale, si scrive var(--jt-...). Un #fff in un foglio e' una scheda
   bianca abbagliante in mezzo al tema scuro, e non da' errore. Restano in
   chiaro solo i colori che sono dati — la tinta di una fase della pipeline, la
   serie di un grafico — e la pagina stampata, che e' carta.

   Il tema chiaro e' il riferimento: i valori sono quelli che il prodotto aveva
   prima dei temi, quindi chi non sceglie non vede differenze. Office e Indaco
   partono da lui e cambiano solo cio' che li distingue.

   I selettori valgono su qualunque elemento, non solo sulla radice: la
   miniatura di un tema nella pagina delle preferenze e' un elemento con il
   suo data-theme, disegnato con i colori veri di quel tema.
--------------------------------------------------------------------------- */

:root,
[data-theme="light"],
[data-theme="office"],
[data-theme="indigo"] {
    color-scheme: light;

    /* superfici */
    --jt-bg: #f9fafb;              /* fondo della pagina, intestazioni di tabella */
    --jt-surface: #fff;            /* schede, maschere, campi */
    --jt-surface-2: #f3f4f6;       /* riempimenti tenui, passaggio del mouse */
    --jt-surface-3: #e5e7eb;       /* riempimenti marcati */
    --jt-border-subtle: #f3f4f6;
    --jt-border: #e5e7eb;
    --jt-border-strong: #d1d5db;

    /* testo */
    --jt-text: #111827;
    --jt-text-2: #374151;
    --jt-text-3: #4b5563;
    --jt-text-muted: #6b7280;
    --jt-text-subtle: #9ca3af;

    /* accento (azioni primarie, collegamenti, selezione) */
    --jt-accent: #2563eb;
    --jt-accent-hover: #1d4ed8;
    --jt-accent-soft: #eff6ff;
    --jt-accent-soft-2: #dbeafe;
    --jt-accent-border: #93c5fd;
    --jt-on-accent: #fff;

    /* secondo accento (scelte attive, filtri a pastiglia) */
    --jt-accent-alt: #4338ca;
    --jt-accent-alt-text: #3730a3;
    --jt-accent-alt-soft: #eef2ff;
    --jt-accent-alt-border: #c7d2fe;

    /* stati */
    --jt-danger: #dc2626;
    --jt-danger-strong: #b91c1c;
    --jt-danger-text: #991b1b;
    --jt-danger-soft: #fef2f2;
    --jt-danger-border: #fecaca;
    --jt-success: #16a34a;
    --jt-success-text: #166534;
    --jt-success-soft: #f0fdf4;
    --jt-success-border: #bbf7d0;
    --jt-warning: #f59e0b;
    --jt-warning-strong: #b45309;
    --jt-warning-text: #92400e;
    --jt-warning-soft: #fef3c7;
    --jt-warning-border: #fcd34d;

    --jt-shadow: rgba(15, 23, 42, .08);
    --jt-overlay: rgba(18, 24, 36, .45);

    /* barra laterale: scura anche nel tema chiaro */
    --jt-sidebar-bg: #1f2937;
    --jt-sidebar-bg-2: #111827;
    --jt-sidebar-text: #e5e7eb;
    --jt-sidebar-text-strong: #fff;
    --jt-sidebar-muted: #9ca3af;
    --jt-sidebar-faint: #6b7280;
    --jt-sidebar-hover: #374151;
    --jt-sidebar-border: #374151;
    --jt-sidebar-active: #2563eb;
    --jt-sidebar-on-active: #fff;
    --jt-sidebar-brand: #60a5fa;
    --jt-logo-from: #2563eb;
    --jt-logo-to: #60a5fa;
}

/* Il colore del testo si riafferma dove cambia il tema, o un elemento con
   un tema suo erediterebbe il colore della pagina che lo contiene. */
[data-theme] { color: var(--jt-text); }

/* Scuro: accompagna blazing-dark di DevExpress, di cui riprende i grigi caldi,
   cosi' una griglia non sembra un'isola dentro la pagina. */
[data-theme="dark"] {
    color-scheme: dark;

    --jt-bg: #232227;
    --jt-surface: #2f2e34;
    --jt-surface-2: #38373e;
    --jt-surface-3: #44434a;
    --jt-border-subtle: #38373e;
    --jt-border: #46444a;
    --jt-border-strong: #5a5861;

    --jt-text: #f3f4f6;
    --jt-text-2: #d4d4d8;
    --jt-text-3: #c4c4cb;
    --jt-text-muted: #a1a1aa;
    --jt-text-subtle: #81818a;

    --jt-accent: #3b82f6;
    --jt-accent-hover: #60a5fa;
    --jt-accent-soft: rgba(59, 130, 246, .14);
    --jt-accent-soft-2: rgba(59, 130, 246, .24);
    --jt-accent-border: #2f5ea8;
    --jt-on-accent: #fff;

    --jt-accent-alt: #6366f1;
    --jt-accent-alt-text: #c7d2fe;
    --jt-accent-alt-soft: rgba(99, 102, 241, .16);
    --jt-accent-alt-border: #4f52b8;

    --jt-danger: #ef4444;
    --jt-danger-strong: #f87171;
    --jt-danger-text: #fca5a5;
    --jt-danger-soft: rgba(239, 68, 68, .14);
    --jt-danger-border: #7f2a2a;
    --jt-success: #22c55e;
    --jt-success-text: #86efac;
    --jt-success-soft: rgba(34, 197, 94, .13);
    --jt-success-border: #22603a;
    --jt-warning: #f59e0b;
    --jt-warning-strong: #fbbf24;
    --jt-warning-text: #fcd34d;
    --jt-warning-soft: rgba(245, 158, 11, .14);
    --jt-warning-border: #7a5414;

    --jt-shadow: rgba(0, 0, 0, .35);
    --jt-overlay: rgba(0, 0, 0, .6);

    --jt-sidebar-bg: #1b1a1f;
    --jt-sidebar-bg-2: #141317;
    --jt-sidebar-text: #e4e4e7;
    --jt-sidebar-text-strong: #fff;
    --jt-sidebar-muted: #a1a1aa;
    --jt-sidebar-faint: #71717a;
    --jt-sidebar-hover: #2f2e34;
    --jt-sidebar-border: #2f2e34;
    --jt-sidebar-active: #3b82f6;
    --jt-sidebar-on-active: #fff;
    --jt-sidebar-brand: #60a5fa;
    --jt-logo-from: #2563eb;
    --jt-logo-to: #60a5fa;
}

/* Office: tutto chiaro, anche la barra, con l'arancio di office-white. Chi
   lavora tutto il giorno su fogli di calcolo ci si ritrova. */
[data-theme="office"] {
    color-scheme: light;

    --jt-bg: #f5f5f5;
    --jt-surface: #fff;
    --jt-surface-2: #f2f2f2;
    --jt-surface-3: #e6e6e6;
    --jt-border-subtle: #f0f0f0;
    --jt-border: #e1e1e1;
    --jt-border-strong: #c8c8c8;

    --jt-text: #1f1f1f;
    --jt-text-2: #323232;
    --jt-text-3: #484848;
    --jt-text-muted: #6b6b6b;
    --jt-text-subtle: #9a9a9a;

    --jt-accent: #d35400;
    --jt-accent-hover: #b34700;
    --jt-accent-soft: #fff4ec;
    --jt-accent-soft-2: #ffe3cf;
    --jt-accent-border: #f5b98a;
    --jt-on-accent: #fff;

    --jt-accent-alt: #0f6cbd;
    --jt-accent-alt-text: #0c4f8a;
    --jt-accent-alt-soft: #ebf3fc;
    --jt-accent-alt-border: #b4d3f0;

    --jt-sidebar-bg: #f0f0f0;
    --jt-sidebar-bg-2: #fff;
    --jt-sidebar-text: #2b2b2b;
    --jt-sidebar-text-strong: #111;
    --jt-sidebar-muted: #616161;
    --jt-sidebar-faint: #8a8a8a;
    --jt-sidebar-hover: #e0e0e0;
    --jt-sidebar-border: #dcdcdc;
    --jt-sidebar-active: #d35400;
    --jt-sidebar-on-active: #fff;
    --jt-sidebar-brand: #d35400;
    --jt-logo-from: #d35400;
    --jt-logo-to: #f39c12;
}

/* Indaco: chiaro, con la barra e l'accento del tema purple di DevExpress. */
[data-theme="indigo"] {
    color-scheme: light;

    --jt-bg: #f7f7fb;
    --jt-border: #e4e4ef;
    --jt-border-strong: #cfcfe0;

    --jt-accent: #4f46e5;
    --jt-accent-hover: #4338ca;
    --jt-accent-soft: #eef2ff;
    --jt-accent-soft-2: #e0e7ff;
    --jt-accent-border: #a5b4fc;
    --jt-on-accent: #fff;

    --jt-accent-alt: #7c3aed;
    --jt-accent-alt-text: #5b21b6;
    --jt-accent-alt-soft: #f5f3ff;
    --jt-accent-alt-border: #ddd6fe;

    --jt-sidebar-bg: #2e2a6b;
    --jt-sidebar-bg-2: #221f52;
    --jt-sidebar-text: #e0e7ff;
    --jt-sidebar-text-strong: #fff;
    --jt-sidebar-muted: #a5b4fc;
    --jt-sidebar-faint: #8187c9;
    --jt-sidebar-hover: #3d3889;
    --jt-sidebar-border: #3d3889;
    --jt-sidebar-active: #6366f1;
    --jt-sidebar-on-active: #fff;
    --jt-sidebar-brand: #a5b4fc;
    --jt-logo-from: #6366f1;
    --jt-logo-to: #a78bfa;
}

/* Il fondo del documento segue il tema anche dove nessun componente lo
   copre: lo scorrimento elastico, le pagine senza guscio. Selettore con
   l'attributo perche' il foglio di DevExpress, caricato dopo, colora body a
   modo suo e a parita' di specificita' vincerebbe. */
html[data-theme] body { background: var(--jt-surface); color: var(--jt-text); }