/* ═══════════════════════════════════════════════════════════════════════
   Next Be CRM — tema "Studio" (v1)
   Strato grafico sopra l'app: non cambia la struttura né il comportamento.
   Per tornare alla grafica precedente basta togliere il <link> in index.html.

   Idea: barra laterale color inchiostro con voce attiva segnata da una
   barra verde; pagina chiara e calma; schede bianche con bordo sottile al
   posto dei riquadri pastello; un solo carattere (Instrument Sans) con
   cifre tabellari per numeri e importi.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/assets/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --st-ink: #18202e;        /* barra laterale */
  --st-ink-2: #222b3b;      /* hover nella barra */
  --st-ink-text: #c9d0dc;   /* testo nella barra */
  --st-ink-mute: #7d889b;   /* etichette nella barra */
  --st-paper: #f2f4f7;      /* fondo pagina */
  --st-surface: #ffffff;
  --st-line: #e3e7ed;
  --st-text: #1a2230;
  --st-mute: #667085;
  --st-accent: #0f7b5f;     /* verde Next, un tono più profondo dell'attuale */
  --st-accent-2: #0b6650;
  --st-accent-tint: #e7f3ef;
  --st-radius: 12px;
}

/* ── Carattere e fondo ─────────────────────────────────────────────── */
body, #root, .nbp, .nb-root, .nb-popover, button, input, select, textarea {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body { background: var(--st-paper) !important; color: var(--st-text); font-feature-settings: "tnum" 1, "cv11" 1; }
#root > div.min-h-screen, #root .min-h-screen.bg-slate-50 { background: var(--st-paper) !important; }
.tabular-nums, [class*="text-2xl"], [class*="text-3xl"] { font-variant-numeric: tabular-nums; }
#root h1, #root h2 { letter-spacing: -0.015em; }

/* ── Barra laterale ────────────────────────────────────────────────── */
aside.fixed.w-64 {
  background: var(--st-ink) !important;
  border-right: 0 !important;
  color: var(--st-ink-text);
}
aside.fixed.w-64 > div:first-child { border-bottom-color: rgba(255,255,255,.07) !important; padding: 22px 22px 18px !important; }
aside.fixed.w-64 h1 { color: #fff !important; font-size: 19px !important; letter-spacing: -0.02em; }
aside.fixed.w-64 h1 span { color: #5fd3a8 !important; }
aside.fixed.w-64 h1 + p { color: var(--st-ink-mute) !important; }
aside.fixed.w-64 nav { padding: 12px 10px !important; scrollbar-width: thin; scrollbar-color: #3a4558 transparent; }

/* voci */
aside.fixed.w-64 nav a, aside.fixed.w-64 nav button.w-full {
  color: var(--st-ink-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-weight: 500 !important;
  position: relative;
}
aside.fixed.w-64 nav a:hover, aside.fixed.w-64 nav button.w-full:hover { background: var(--st-ink-2) !important; color: #fff !important; }
aside.fixed.w-64 nav a svg, aside.fixed.w-64 nav button svg { color: var(--st-ink-mute) !important; }
aside.fixed.w-64 nav a:hover svg { color: #fff !important; }
/* voce attiva: barra verde a sinistra */
aside.fixed.w-64 nav a.bg-emerald-50, aside.fixed.w-64 nav button.bg-emerald-50 {
  background: rgba(95, 211, 168, .1) !important;
  color: #fff !important;
}
aside.fixed.w-64 nav a.bg-emerald-50::before, aside.fixed.w-64 nav button.bg-emerald-50::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #5fd3a8;
}
aside.fixed.w-64 nav a.bg-emerald-50 svg { color: #5fd3a8 !important; }

/* etichette di gruppo: niente maiuscolo spaziato */
aside.fixed.w-64 p.uppercase {
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--st-ink-mute) !important; font-size: 12px !important; font-weight: 600 !important;
}
aside.fixed.w-64 .border-slate-100, aside.fixed.w-64 .border-t { border-color: rgba(255,255,255,.07) !important; }
aside.fixed.w-64 .border-l { border-color: rgba(255,255,255,.12) !important; }

/* Preferiti: elenco sobrio al posto del riquadro giallo */
aside.fixed.w-64 nav div.border-amber-200 {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
aside.fixed.w-64 nav div.border-amber-200 a, aside.fixed.w-64 nav div.border-amber-200 button {
  color: var(--st-ink-text) !important; border-radius: 0 !important; padding: 7px 12px !important;
}
aside.fixed.w-64 nav div.border-amber-200 a:hover, aside.fixed.w-64 nav div.border-amber-200 button:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
aside.fixed.w-64 nav div.border-amber-200 a[class*="bg-amber-200"] { background: rgba(95,211,168,.12) !important; color: #fff !important; }
aside.fixed.w-64 nav div.border-amber-200 span.uppercase {
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 13.5px !important;
}
aside.fixed.w-64 nav div.border-amber-200 svg { color: #f0c36d !important; }

/* piede della barra */
aside.fixed.w-64 > div:last-child { border-top-color: rgba(255,255,255,.07) !important; }
aside.fixed.w-64 > div:last-child p, aside.fixed.w-64 > div:last-child span { color: var(--st-ink-mute) !important; }
aside.fixed.w-64 > div:last-child button { color: var(--st-ink-text) !important; }
aside.fixed.w-64 > div:last-child button:hover { background: var(--st-ink-2) !important; color: #fff !important; }
aside.fixed.w-64 > div:last-child .bg-white, aside.fixed.w-64 > div:last-child .bg-slate-50 { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }

/* ── Area di lavoro ───────────────────────────────────────────────── */
main > div.max-w-7xl { max-width: 1320px; }
main h1.text-2xl, main h1.text-3xl, main .text-2xl.font-bold:not([class*="text-blue"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-violet"]) { color: var(--st-text); }

/* Schede: bianche con bordo sottile, raggio coerente, ombra appena */
main .rounded-2xl.border, main .rounded-xl.border.bg-white, main .bg-white.rounded-2xl, main .bg-white.rounded-xl.shadow-sm {
  border-color: var(--st-line) !important;
  border-radius: var(--st-radius) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
/* Riquadri pastello (KPI, accessi rapidi): fondo bianco, il colore resta su icone e numeri */
main .rounded-2xl[class*="bg-gradient"], main .rounded-2xl[class*="from-"],
main .rounded-2xl.bg-blue-50, main .rounded-2xl.bg-red-50, main .rounded-2xl.bg-emerald-50, main .rounded-2xl.bg-violet-50, main .rounded-2xl.bg-amber-50, main .rounded-2xl.bg-orange-50,
main .rounded-xl.border.bg-blue-50, main .rounded-xl.border.bg-red-50, main .rounded-xl.border.bg-emerald-50, main .rounded-xl.border.bg-violet-50, main .rounded-xl.border.bg-amber-50, main .rounded-xl.border.bg-orange-50, main .rounded-xl.border.bg-pink-50, main .rounded-xl.border.bg-teal-50 {
  background: var(--st-surface) !important;
  background-image: none !important;
  border-color: var(--st-line) !important;
}
main .rounded-xl.border[class*="bg-"][class*="-50"]:hover { border-color: #c9d0da !important; background: #fafbfc !important; }

/* Pulsanti principali nel verde Next */
main .bg-emerald-600, .bg-emerald-600 { background-color: var(--st-accent) !important; }
main .hover\:bg-emerald-700:hover, .hover\:bg-emerald-700:hover { background-color: var(--st-accent-2) !important; }
main .bg-slate-900, main .bg-slate-800 { background-color: var(--st-ink) !important; }
main .text-emerald-600, main .text-emerald-700 { color: var(--st-accent) !important; }
main button.rounded-xl, main a.rounded-xl { border-radius: 9px; }

/* Campi */
main input:not([type=checkbox]):not([type=radio]), main select, main textarea { border-color: #d6dbe3; }
main input:focus, main select:focus, main textarea:focus { border-color: var(--st-accent) !important; box-shadow: 0 0 0 3px rgba(15,123,95,.14) !important; outline: none !important; }
:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }

/* Tabelle e righe */
main table thead th { color: var(--st-mute); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; }
main table tbody tr:hover { background: #f8fafb; }

/* Barra in alto su telefono */
main ~ div.lg\:hidden, div.lg\:hidden.fixed.top-0 { background: var(--st-ink) !important; border-color: transparent !important; }
div.lg\:hidden.fixed.top-0 h1 { color: #fff !important; }
div.lg\:hidden.fixed.top-0 button { color: #fff !important; }

/* Moduli aggiuntivi allineati al tema */
.nbp { --accent: var(--st-accent); --accent-ink: var(--st-accent-2); --accent-tint: var(--st-accent-tint); --line: var(--st-line); --ink: var(--st-text); --muted: var(--st-mute); }
.nbp-card, .nbp-kpi { border-radius: var(--st-radius) !important; }
.nb-root { --nb-accent: var(--st-accent); --nb-accent-ink: var(--st-accent-2); --nb-accent-tint: var(--st-accent-tint); --nb-border: var(--st-line); }
.nb-panel { border-radius: var(--st-radius) !important; }
.nb-btn-primary { background: var(--st-accent) !important; }
.nb-btn-primary:hover { background: var(--st-accent-2) !important; }
.nb-fab { background: var(--st-ink) !important; box-shadow: 0 10px 24px -8px rgba(24,32,46,.5) !important; }

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

/* ── Ritocchi ─────────────────────────────────────────────────────── */
/* badge delle notifiche: resta leggibile */
aside.fixed.w-64 > div:last-child span[class*="bg-red"], aside.fixed.w-64 > div:last-child [class*="bg-red"] { color: #fff !important; }
/* etichette piccole in maiuscolo spaziato → normali */
main p.uppercase.tracking-widest, main p.uppercase.tracking-wider, main span.uppercase.tracking-widest { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; color: var(--st-mute) !important; }
/* testate gialle/colorate delle card del cruscotto nativo */
main [class*="from-amber-50"], main [class*="bg-amber-50/"], main .bg-yellow-50 { background: var(--st-surface) !important; background-image: none !important; }
/* barra "Cerca" e timer: sull'area di lavoro, non sopra la barra laterale */
@media (min-width: 1024px) { .nbp-dock { left: 272px; } }
/* Bacheca note: testate delle colonne più leggere */
.nb-root .nb-column-head { background: #fff !important; border-bottom-color: var(--st-line) !important; }
.nb-root .nb-column { border-color: var(--st-line) !important; }
.nb-root .nb-columns { background: var(--st-paper) !important; }
.nb-root .nb-create { background: #fbfcfd !important; border-bottom-color: var(--st-line) !important; }
.nb-root .nb-card-flagged { background: #fffbeb; }