/* Gestionale · stile "Essenziale" (02/11/2026, proposta per REVIEW V0.0.2).
   Più calmo e leggibile per l'uso quotidiano condiviso: fondo chiaro CRETA, fogli NIX, menu CARBO, azione INDICUM, selezione LAPIS.
   Titoli in minuscolo nel sans di sistema (Helvetica Neue provvisorio, come il concept RERUM): niente maiuscolo tecnico.
   Spunti: concept UX/UI di Codex (01/11/2026, docs/design/) e ricerca in docs/design/ricerca_ux_2026-11-02.md.
   Si attiva con <html data-style="essenziale"> (default); lo stile precedente resta con data-style="classico" (Impostazioni › Aspetto).
   Si carica per ultimo: cambia solo token e l'aspetto dei componenti già esistenti, mai il loro funzionamento. */

/* ---------------------------------------------------------------- tema chiaro (default dello stile) */
:root[data-style="essenziale"] {
  --brand-default: #313030;

  --background: #EDEEE9;                /* CRETA */
  --foreground: #313030;                /* CARBO */
  --foreground-2: #4E504B;
  --card: #FFFFFF;                      /* NIX */
  --popover: #FFFFFF;
  --muted: #E5E7E0;             --muted-foreground: #62665E;
  --secondary: #E8E9E3;
  --accent: #E4EDF0;            --accent-foreground: #315B7B;
  --primary: #315B7B;           --primary-foreground: #FFFFFF;    /* INDICUM: azione principale */
  --primary-hover: #264A65;
  --primary-text: #315B7B;
  --primary-line: #9DB5BC;
  --destructive: #BF1B1B;       --destructive-foreground: #FFFFFF;
  --success: #5F581A;
  --warning: #955006;
  --border: #DCDED6;
  --input: #9A9E95;                     /* bordo dei campi: si vede che si possono scrivere (3:1 sul bianco) */
  --input-bg: #FFFFFF;
  --ring: #315B7B;
  --ring-soft: rgb(49 91 123 / 0.20);
  --placeholder: #7A7E75;
  --faint-foreground: #8D9088;
  --row-hover: #F5F6F2;
  --topbar-glass: #FFFFFF;
  --overlay: rgb(30 30 29 / 0.38);

  --grey:   #5C6058;  --grey-bg:   #ECEDE8;
  --blue:   #315B7B;  --blue-bg:   #E4EDF0;
  --green:  #5F581A;  --green-bg:  #EEEFE2;
  --amber:  #955006;  --amber-bg:  #FFF0DC;
  --red:    #B01818;  --red-bg:    #FDEAE5;
  --purple: #594C56;  --purple-bg: #EFEAEE;
  --teal:   #3D5F67;  --teal-bg:   #E6EEF0;
  --dark:   #EDEEE9;  --dark-bg:   #313030;
  --warn-dot: #ED8008;

  --cost:   #736356;  --cost-bg:   #F4EFEA;  --cost-line:   #E2D6CB;   /* UMBRA */
  --margin: #5F581A;  --margin-bg: #F0F1E4;  --margin-line: #D7D6B5;   /* OLIVA */

  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);

  --radius: 8px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgb(49 48 48 / 0.05);
  --shadow-sm: 0 1px 2px rgb(49 48 48 / 0.05), 0 3px 10px -4px rgb(49 48 48 / 0.10);
  --shadow-md: 0 6px 20px -8px rgb(49 48 48 / 0.22);

  /* menu a sinistra e testata del progetto: CARBO con testo CRETA, selezione LAPIS */
  --shell: #313030; --shell-fg: #E3E4DE; --shell-muted: #A9ACA3; --shell-line: rgb(237 238 233 / 0.12);
  --shell-hover: rgb(237 238 233 / 0.07); --shell-control: #43443F; --shell-control-line: #5B5C56;
  --shell-sel: #9DB5BC; --shell-sel-ink: #313030;

  --side: 228px; --top: 56px;
}

/* ---------------------------------------------------------------- tema scuro dello stile (a scelta, interruttore in alto) */
@media screen {
  :root[data-style="essenziale"]:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #191919;
    --foreground: #EDEEE9;
    --foreground-2: #CFD0CA;
    --card: #232322;
    --popover: #2A2A29;
    --muted: #30312E;           --muted-foreground: #B3B7AC;
    --secondary: #2C2D2A;
    --accent: #2E3D43;          --accent-foreground: #CFE0E5;
    --primary: #9DB5BC;         --primary-foreground: #232322;
    --primary-hover: #B4C8CE;
    --primary-text: #A9C2C9;
    --primary-line: #4A5A5F;
    --destructive: #D23A2A;     --destructive-foreground: #FFFFFF;
    --success: #C3C98C;
    --warning: #F3B76F;
    --border: rgb(237 238 233 / 0.10);
    --input: rgb(237 238 233 / 0.26);
    --input-bg: #1E1E1D;
    --ring: #9DB5BC;
    --ring-soft: rgb(157 181 188 / 0.32);
    --placeholder: #8E8F88;
    --faint-foreground: #7E7F79;
    --row-hover: #2A2A29;
    --topbar-glass: #1E1E1D;
    --overlay: rgb(0 0 0 / 0.6);

    --grey:   #B9BDB2;  --grey-bg:   #30312E;
    --blue:   #A9C2C9;  --blue-bg:   #2E3D43;
    --green:  #C3C98C;  --green-bg:  #343A25;
    --amber:  #F3B76F;  --amber-bg:  #43331F;
    --red:    #FFB6A8;  --red-bg:    #492D27;
    --purple: #D2BFCD;  --purple-bg: #3C3239;
    --teal:   #A3C2C4;  --teal-bg:   #2A3A3D;
    --dark:   #EDEEE9;  --dark-bg:   #3A3A39;

    --cost:   #CDB49C;  --cost-bg:   #342E28;  --cost-line:   #4A4037;
    --margin: #C3C98C;  --margin-bg: #303523;  --margin-line: #464C33;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 8px 22px -8px rgb(0 0 0 / 0.6);

    --shell: #121212; --shell-fg: #E3E4DE; --shell-muted: #A3A69D; --shell-line: rgb(237 238 233 / 0.10);
    --shell-control: #2E2F2C; --shell-control-line: #45463F;

    --bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b7ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  }
}

/* ---------------------------------------------------------------- titoli: minuscolo, sans, peso pieno (al posto del maiuscolo RERUM) */
:root[data-style="essenziale"][data-edition] :is(.page-head h1, .page-head.sub-head h2, .card-h h2, .drawer-h h2, .modal .mh h2, .pl-gh h2, .pt-main h1, .pt-card > .h h2, .pt-section-t),
:root[data-style="essenziale"][data-edition] .sidebar :is(.grp, .nav-group, .np-code, .np-title) {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.01em;
}
:where(:root[data-style="essenziale"]) .page-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }
:where(:root[data-style="essenziale"]) .page-head.sub-head h2 { font-size: 19px; font-weight: 680; letter-spacing: -0.02em; }
:root[data-style="essenziale"][data-edition] :is(.card-h h2, .pt-card > .h h2) { font-size: 15px; font-weight: 650; }
:where(:root[data-style="essenziale"]) :is(.drawer-h h2, .modal .mh h2) { font-size: 18px; font-weight: 680; letter-spacing: -0.02em; }
:where(:root[data-style="essenziale"]) .page-head .sub { font-size: 13.5px; }
:where(:root[data-style="essenziale"]) .crumbs { font-size: 12.5px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- barra in alto: bianca, ricerca come campo pieno */
:where(:root[data-style="essenziale"]) .topbar {
  background: var(--topbar-glass); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--border); padding: 0 16px 0 14px;
}
:where(:root[data-style="essenziale"]) .search input {
  height: 38px; border-color: transparent; background-color: var(--muted); box-shadow: none; font-size: 14px;
}
:where(:root[data-style="essenziale"]) .search input:focus { background-color: var(--card); border-color: var(--primary); }
:root[data-style="essenziale"][data-edition] :is(.brand-mark, .pt-mark) { clip-path: none; border-radius: 7px; font-family: var(--font-sans); width: 28px; height: 28px; line-height: 28px; }
:where(:root[data-style="essenziale"]) select.company-sel { font-size: 14.5px; font-weight: 650; }
:where(:root[data-style="essenziale"]) .release-tag { border-color: var(--border); color: var(--muted-foreground); background: var(--background); }

/* ---------------------------------------------------------------- menu a sinistra CARBO */
:where(:root[data-style="essenziale"]) .sidebar { background: var(--shell); border-right: 0; padding: 12px 10px 18px; gap: 2px; color: var(--shell-fg); }
:where(:root[data-style="essenziale"]) .sidebar a { min-height: 38px; padding: 0 12px; border-radius: 8px; color: var(--shell-fg); font-size: 14px; font-weight: 500; }
:where(:root[data-style="essenziale"]) .sidebar a:hover { background: var(--shell-hover); color: #FFFFFF; }
:where(:root[data-style="essenziale"]) .sidebar a.on { background: var(--shell-sel); color: var(--shell-sel-ink); font-weight: 650; }
:where(:root[data-style="essenziale"]) .sidebar svg { color: var(--shell-muted); }
:where(:root[data-style="essenziale"]) .sidebar a:hover svg { color: #FFFFFF; }
:where(:root[data-style="essenziale"]) .sidebar a.on svg { color: var(--shell-sel-ink); }
:where(:root[data-style="essenziale"]) .sidebar .nav-ext { color: var(--shell-muted); }
:where(:root[data-style="essenziale"]) .sidebar :is(.grp, .nav-group) { color: var(--shell-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 18px 12px 6px; }
:where(:root[data-style="essenziale"]) .sidebar .nav-sep { background: var(--shell-line); margin: 8px 6px; }
:where(:root[data-style="essenziale"]) .sidebar .badge { background: #BF1B1B; color: #FFFFFF; }
:where(:root[data-style="essenziale"]) .sidebar :focus-visible { outline-color: var(--shell-sel); }
:where(:root[data-style="essenziale"]) .sidebar .nav-back { color: var(--shell-muted); }
:where(:root[data-style="essenziale"]) .sidebar .nav-proj { border-bottom-color: var(--shell-line); padding: 10px 12px 14px; margin-bottom: 8px; }
:where(:root[data-style="essenziale"]) .sidebar .np-code { color: var(--shell-muted); font-size: 12px; letter-spacing: 0.02em; }
:where(:root[data-style="essenziale"]) .sidebar .np-title { color: #FFFFFF; font-size: 15px; font-weight: 680; }
/* marchio RERUM in cima al menu generale (tracciati originali del brand book, colore del testo) */
.side-id { display: none; }
:root[data-style="essenziale"][data-edition="rerum"] body:not(.in-project) .side-id { display: block; padding: 8px 12px 16px; color: var(--shell-fg); }
.side-id .wm { display: block; width: 118px; height: 28px; background: currentColor;
  -webkit-mask: url("../assets/rerum/wordmark.svg") left center / contain no-repeat; mask: url("../assets/rerum/wordmark.svg") left center / contain no-repeat; }
.side-id small { display: block; margin-top: 6px; color: var(--shell-muted); font-size: 12px; }

/* ---------------------------------------------------------------- area di lavoro */
:where(:root[data-style="essenziale"]) .main { --main-px: 32px; padding-top: 26px; }
:where(:root[data-style="essenziale"]) .page-head { margin-bottom: 22px; }
:where(:root[data-style="essenziale"]) .card { border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
:where(:root[data-style="essenziale"]) .card-h { min-height: 52px; padding: 12px 20px; }
:where(:root[data-style="essenziale"]) .card-b { padding: 16px 20px; }
:where(:root[data-style="essenziale"]) .qaside .card-b { padding-left: 16px; padding-right: 16px; }
/* riepilogo del preventivo: Helvetica è più larga di Inter, la colonna cresce un poco perché le cifre non escano */
@media (min-width: 1401px) { :where(:root[data-style="essenziale"]) .qe { grid-template-columns: minmax(0, 1fr) 316px; } }
:where(:root[data-style="essenziale"]) .kpi { padding: 18px 20px; }
:where(:root[data-style="essenziale"]) .kpi .l { font-size: 13px; }
:where(:root[data-style="essenziale"]) .kpi .v { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
:where(:root[data-style="essenziale"]) table.list { font-size: 14px; }
:where(:root[data-style="essenziale"]) table.list th { font-size: 12.5px; font-weight: 600; padding-top: 11px; padding-bottom: 11px; }
:where(:root[data-style="essenziale"]) table.list td { padding-top: 12px; padding-bottom: 12px; }
:where(:root[data-style="essenziale"]) table.list :is(th, td):first-child { padding-left: 20px; }
:where(:root[data-style="essenziale"]) table.list :is(th, td):last-child { padding-right: 20px; }
:where(:root[data-style="essenziale"]) table.list .t-title { font-weight: 600; }

/* bottoni: una sola azione piena (INDICUM), gli altri chiari con bordo leggero */
:where(:root[data-style="essenziale"]) .btn { --h: 36px; border-radius: 7px; border-color: #C3C6BD; font-weight: 600; box-shadow: none; }
:where(:root[data-style="essenziale"]:not([data-theme="light"])) .btn { border-color: var(--input); }
:where(:root[data-style="essenziale"]) .btn:hover { background-color: var(--row-hover); border-color: var(--input); }
:where(:root[data-style="essenziale"]) .btn.pri { border-color: var(--primary); box-shadow: 0 1px 2px rgb(49 91 123 / 0.25); }
:where(:root[data-style="essenziale"]) .btn.pri:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }
:where(:root[data-style="essenziale"]) .btn.ghost { border-color: transparent; }
:where(:root[data-style="essenziale"]) .btn.sm { --h: 30px; }
:where(:root[data-style="essenziale"]) :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* campi: bordo visibile a riposo, fuoco INDICUM */
:where(:root[data-style="essenziale"]) :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden])), select, textarea) {
  min-height: 34px; border-radius: 7px; box-shadow: none; font-size: 14px;
}
:where(:root[data-style="essenziale"]) .search input { min-height: 38px; }

/* schede e segmentati */
:where(:root[data-style="essenziale"]) .tabs a { font-size: 14px; height: 42px; }
:where(:root[data-style="essenziale"]) .tabs a.on { color: var(--primary-text); font-weight: 600; }
:where(:root[data-style="essenziale"]) .tabs-seg { background: var(--muted); border-radius: 8px; }
:where(:root[data-style="essenziale"]) .tabs-seg :is(button, a, .btn) { min-height: 30px; font-size: 13.5px; }
:where(:root[data-style="essenziale"]) .tabs-seg .on { color: var(--primary-text) !important; font-weight: 600; }

/* etichette di stato: rettangolari, testo pieno */
:where(:root[data-style="essenziale"]) .pill { height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12.5px; font-weight: 600; }

/* pannelli e popup */
:where(:root[data-style="essenziale"]) .drawer-h { padding: 18px 18px 16px 22px; }
:where(:root[data-style="essenziale"]) .modal { border-radius: 14px; }

/* ---------------------------------------------------------------- testata del progetto: contesto CARBO (concept "Contesto e superfici") */
:where(:root[data-style="essenziale"]) .page-head.proj-head {
  align-items: center; padding: 20px 24px; border-radius: 14px;
  background: var(--shell); color: var(--shell-fg); box-shadow: var(--shadow-md);
}
:where(:root[data-style="essenziale"]:not([data-theme="light"])) .page-head.proj-head { background: #2A2A29; border: 1px solid var(--border); }
:where(:root[data-style="essenziale"]) .proj-head h1 { color: #FFFFFF; }
:where(:root[data-style="essenziale"]) .proj-head .sub { color: var(--shell-muted); }
:where(:root[data-style="essenziale"]) .proj-head .sub b { color: #FFFFFF; }
:where(:root[data-style="essenziale"]) .proj-head .demo { background: #ED8008; color: #313030; }
:where(:root[data-style="essenziale"]) .proj-head :is(.btn, select.btn) {
  background-color: var(--shell-control); border-color: var(--shell-control-line); color: var(--shell-fg);
}
:where(:root[data-style="essenziale"]) .proj-head select.btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9ccc3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}
:where(:root[data-style="essenziale"]) .proj-head .btn:hover { background-color: #50514C; border-color: #6A6B65; color: #FFFFFF; }
:where(:root[data-style="essenziale"]) .proj-head .btn.pri { background-color: var(--shell-sel); border-color: var(--shell-sel); color: var(--shell-sel-ink); box-shadow: none; }
:where(:root[data-style="essenziale"]) .proj-head .btn.pri:hover { background-color: #B4C8CE; border-color: #B4C8CE; }
:where(:root[data-style="essenziale"]) .proj-head :focus-visible { outline-color: var(--shell-sel); }
:where(:root[data-style="essenziale"]) .proj-head + .ptabs, :where(:root[data-style="essenziale"]) .proj-head + .lock-banner { margin-top: -6px; }

/* ---------------------------------------------------------------- telefono */
@media (max-width: 820px) {
  :where(:root[data-style="essenziale"]) .main { --main-px: 16px; padding-top: 18px; }
  :where(:root[data-style="essenziale"]) .page-head h1 { font-size: 23px; }
  :where(:root[data-style="essenziale"]) .page-head.proj-head { padding: 16px 16px; border-radius: 12px; }
  :where(:root[data-style="essenziale"]) :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden])), select, textarea) { min-height: 44px; font-size: 16px; }
  :where(:root[data-style="essenziale"]) .btn { --h: 42px; }
  :where(:root[data-style="essenziale"]) .btn.sm { --h: 36px; }
  :where(:root[data-style="essenziale"]) .sidebar { padding-top: 14px; }
  :where(:root[data-style="essenziale"]) .ptabs { background: var(--background); }
}