/* Omni Car: tema del prodotto (manifest.py, theme; brand.ts, themeCss).

   Caricato quando dealers è il modulo attivo. Fa due cose:
   1. ridefinisce i token che il core e le pagine portate hanno in comune con i
      valori di omni-car-frontend/src/index.css (scala brand, slate, amber,
      raggi, carattere, misura del testo), così le pagine di Omni Car escono
      uguali e il resto dell'app prende la stessa palette;
   2. veste il guscio del core (barra laterale, selettore delle sezioni, fondo)
      come la barra di Omni Car, con gli agganci data-shell del Layout. */

:root {
  /* Omni Car usa la misura del browser (16px): il core la riduce all'85%. */
  font-size: 100%;

  --font-inter: 'Satoshi';
  --font-sans: 'Satoshi', system-ui, sans-serif;

  /* Scala brand del core (RGB): quella di Omni Car (verde primario). */
  --brand-rgb: 198 255 0;
  --brand-50: 247 251 232;
  --brand-100: 238 245 201;
  --brand-200: 227 237 158;
  --brand-300: 212 232 106;
  --brand-400: 198 255 0;
  --brand-500: 198 255 0;
  --brand-600: 168 217 0;
  --brand-700: 26 31 36;
  --brand-800: 18 22 26;
  --brand-900: 0 0 0;
  --brand-950: 0 0 0;

  /* Colori primari del core (bottoni, link, focus): il nero-grafite di Omni Car. */
  --color-primary-darkest: #000000;
  --color-primary-dark: #1a1f24;
  --color-primary: #1a1f24;
  --color-primary-light: #5c6775;
  --color-primary-lightest: #f2f4f7;
  --hero-from: #1a1f24;
  --hero-to: #000000;

  --mode-accent: 26 31 36;
  --mode-soft: 198 255 0;
  --mode-ink: 26 31 36;
  --mode-on: 255 255 255;

  /* Neutri e giallo di Omni Car (Tailwind 4: le classi leggono queste variabili). */
  --color-slate-50: #f2f4f7;
  --color-slate-100: #e8ecf1;
  --color-slate-200: #d5dbe3;
  --color-slate-300: #b8c0cc;
  --color-slate-400: #8a939f;
  --color-slate-500: #5c6775;
  --color-slate-600: #3d4652;
  --color-slate-700: #1a1f24;
  --color-slate-800: #12161a;
  --color-slate-900: #000000;
  --color-amber-400: #f0e24c;
  --color-amber-500: #f0e24c;
  --color-amber-600: #d9c942;

  /* Angoli leggermente meno arrotondati */
  --radius-xs: 0.125rem;
  --radius-sm: 0.1875rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-2xl: 0.625rem;
  --radius-3xl: 0.875rem;
  --radius-4xl: 1.125rem;

  /* Fondo del guscio */
  --color-background-light: #f2f4f7;
}

body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: #f2f4f7;
  color: #000000;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* --- Barra laterale: come aside di Omni Car (bg-dark, w-64, border-r) --- */

[data-shell='sidebar'] {
  background-color: #1a1f24 !important;
  border-right-color: rgb(26 31 36 / 0.2) !important;
  color: #f2f4f7;
}

[data-shell='logo'] {
  margin: -1rem -1rem 1rem !important;
  padding: 1.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

[data-shell='logo'] > div {
  height: 4rem !important;
  padding: 0 !important;
  background: transparent !important;
}

[data-shell='logo'] img {
  height: 4rem !important;
}

/* Selettore delle sezioni: la testata del menu, non una voce come le altre.
   Testo più grande e selettore un po' più in alto: lo stacco sotto cresce
   (margin-bottom) senza abbassare le voci, perché il margin-top negativo
   lo compensa. Altezza della riga invariata (py-2, interlinea 20px). */
[data-shell='panel-selector-wrap'] {
  margin-top: -0.5rem !important;
  margin-bottom: 0.75rem !important;
}

[data-shell='panel-selector'] {
  color: rgb(242 244 247 / 0.75) !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.1) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-shell='panel-selector'] span {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 700 !important;
}

[data-shell='panel-selector']:hover {
  background-color: rgb(255 255 255 / 0.05) !important;
  color: #f2f4f7 !important;
}

[data-shell='panel-selector'] svg,
[data-shell='panel-selector'] [class*='material-icons'] {
  color: rgb(242 244 247 / 0.5) !important;
}

/* Voci: SidebarNavLink di Omni Car */
[data-shell-item] {
  gap: 0.75rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
  color: rgb(242 244 247 / 0.75) !important;
  transition: background-color 150ms, color 150ms !important;
}

[data-shell-item]:hover {
  background-color: rgb(255 255 255 / 0.05) !important;
  color: #f2f4f7 !important;
}

[data-shell-item] svg,
[data-shell-item] [class*='material-icons'] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: currentColor !important;
}

[data-shell-item][data-active='true'] {
  background-image: linear-gradient(135deg, #f0e24c 0%, #c6ff00 100%) !important;
  color: #000000 !important;
}

[data-shell-item][data-active='true']:hover {
  filter: none;
}

[data-shell-bar] {
  display: none !important;
}

[data-shell='sidebar'] nav p {
  color: rgb(242 244 247 / 0.5) !important;
}

/* Le voci di Omni Car si distanziano di 4px (space-y-1). Il mb-6 del core
   (24px sotto ogni gruppo) le staccava dalla scheda dei consumi. */
[data-shell='sidebar-menu'] nav {
  margin-bottom: 0 !important;
}

/* La lista è flex: 1 1 0% con lo scroll, quindi il piede (prova, consumi,
   concessionaria, barra icone) la riduce a zero e di Sfondi resta solo il
   bordo. Altezza minima: tre voci (36px + 4px). Se sono di più, scorrono lì.
   Se avanza spazio, la lista spinge il piede in fondo. Il piede non si
   comprime: le tendine della barra icone devono poter uscire. */
[data-shell='logo'],
[data-shell='panel-selector-wrap'] {
  flex-shrink: 0 !important;
}

[data-shell='sidebar-menu'] {
  flex: 1 1 auto !important;
  min-height: 8rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

[data-shell='sidebar-divider'] {
  display: none;
}

/* Piede della barra: icone chiare sul fondo scuro, come la parte bassa di Omni Car.
   Il bordo è quello di Omni Car (niente doppio separatore con margine my-4).
   Niente scroll qui: le tendine della barra icone escono dal piede. */
[data-shell='sidebar-footer'] {
  flex-shrink: 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Contenuto: fondo surface e il p-6 di <main> di Omni Car. */
[data-shell='content'] {
  background-color: #f2f4f7;
}

/* Menu a livelli (prova, MenuALivelli.tsx del core): la linea della testata
   prende il posto del bordo del selettore e si disegna quando il pannello si
   apre. Fuori da [data-livelli] il selettore resta com'era. */
[data-livelli] [data-shell='panel-selector'] {
  border-bottom-color: transparent !important;
}

[data-livelli] [data-shell='panel-selector-line'] {
  height: 1px !important;
  bottom: -1px !important;
  background-color: rgb(255 255 255 / 0.1) !important;
}