/* =====================================================================
   STILI dell'interfaccia (doc 76, 11/11/2026): <html data-stile="…">
   gnammy  = stile di sempre (stile.css, nessuna modifica qui)
   material = Android · Material 3, colori tonali dall'arancio Gnammy, Roboto
   apple    = Apple · macOS / iOS, carattere di sistema, barra traslucida
   fluent   = Windows 11 · Fluent 2, Segoe UI, sfondo Mica
   Valgono con il tema chiaro e scuro (html.tema-scuro). Il foglio del menù
   (.carta, .foglio) resta sempre come stampato.
   ===================================================================== */

/* ---------------- Android · Material 3 ---------------- */
html[data-stile="material"] {
  --font: "Roboto", "Noto Sans", system-ui, sans-serif;
  --bg: #fff8f6; --surface: #fff1ed; --surface-2: #fceae5; --ink: #231917; --ink-2: #3d2c28; --muted: #53433f; --faint: #85736e;
  --line: #e7d6d0; --line-2: #f1e3de; --line-strong: #85736e; --check-line: #85736e;
  --accent: #a33d16; --accent-ink: #7d2c12; --accent-soft: #ffdbcf; --accent-line: #ffb59e; --on-accent: #ffffff;
  --hover: rgba(35,25,23,.08); --chip: #f5ddd5; --topbar: #fff8f6; --focus-ring: rgba(163,61,22,.18);
  --radius: 16px; --radius-sm: 8px; --shadow-sm: none; --shadow: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px 1px rgba(0,0,0,.08);
  --ok: #2e6b30; --ok-soft: #c8eec3; --warn: #7a5900; --warn-soft: #ffdf9c; --ko: #ba1a1a; --ko-soft: #ffdad6;
}
html.tema-scuro[data-stile="material"] {
  --bg: #1a110f; --surface: #271d1b; --surface-2: #322825; --ink: #f1dfda; --ink-2: #e4d0ca; --muted: #d8c2bb; --faint: #a08c87;
  --line: #3d2f2b; --line-2: #322825; --line-strong: #a08c87; --check-line: #a08c87;
  --accent: #ffb59e; --accent-ink: #ffdbcf; --accent-soft: rgba(255,181,158,.16); --accent-line: rgba(255,181,158,.45); --on-accent: #5d1900;
  --hover: rgba(241,223,218,.08); --chip: #5d3f36; --topbar: #1a110f;
  --ok: #94d58e; --ok-soft: rgba(148,213,142,.14); --warn: #f0bf48; --warn-soft: rgba(240,191,72,.14); --ko: #ffb4ab; --ko-soft: rgba(255,180,171,.14);
}

/* ---------------- Apple ---------------- */
html[data-stile="apple"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --bg: #f2f2f7; --surface: #ffffff; --surface-2: #f2f2f7; --ink: #000000; --ink-2: #1c1c1e; --muted: #6c6c70; --faint: #8e8e93;
  --line: #e5e5ea; --line-2: #ececf0; --line-strong: #c7c7cc; --check-line: #c7c7cc;
  --accent: #c93400; --accent-ink: #9a2800; --accent-soft: #ffe9dc; --accent-line: #ffc9a8; --on-accent: #ffffff;
  --hover: rgba(0,0,0,.05); --chip: rgba(118,118,128,.12); --topbar: rgba(249,249,251,.8); --focus-ring: rgba(201,52,0,.2);
  --radius: 12px; --radius-sm: 8px; --shadow-sm: none; --shadow: 0 1px 3px rgba(0,0,0,.08);
  --ok: #248a3d; --ok-soft: #e3f5e7; --warn: #a05a00; --warn-soft: #fff1d6; --ko: #d70015; --ko-soft: #ffe5e7;
}
html.tema-scuro[data-stile="apple"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --ink: #ffffff; --ink-2: #ebebf5; --muted: #98989f; --faint: #8e8e93;
  --line: #38383a; --line-2: #2c2c2e; --line-strong: #48484a; --check-line: #636366;
  --accent: #ff9f0a; --accent-ink: #ffb340; --accent-soft: rgba(255,159,10,.16); --accent-line: rgba(255,159,10,.45); --on-accent: #000000;
  --hover: rgba(255,255,255,.07); --chip: rgba(118,118,128,.24); --topbar: rgba(22,22,24,.8);
  --ok: #30d158; --ok-soft: rgba(48,209,88,.15); --warn: #ffd60a; --warn-soft: rgba(255,214,10,.14); --ko: #ff453a; --ko-soft: rgba(255,69,58,.15);
}

/* ---------------- Windows 11 · Fluent ---------------- */
html[data-stile="fluent"] {
  --font: "Segoe UI Variable Text", "Segoe UI", "Noto Sans", system-ui, sans-serif;
  --bg: #f3f3f3; --surface: #ffffff; --surface-2: #f9f9f9; --ink: #1a1a1a; --ink-2: #303030; --muted: #5d5d5d; --faint: #8a8a8a;
  --line: #e5e5e5; --line-2: #ededed; --line-strong: #8a8a8a; --check-line: #8a8a8a;
  --accent: #b93c0b; --accent-ink: #8a2c06; --accent-soft: #fbe9df; --accent-line: #f3c4a8; --on-accent: #ffffff;
  --hover: rgba(0,0,0,.04); --chip: #f0f0f0; --topbar: rgba(243,243,243,.85); --focus-ring: rgba(0,0,0,.0);
  --radius: 8px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow: 0 2px 4px rgba(0,0,0,.06);
  --ok: #0f7b0f; --ok-soft: #dff6dd; --warn: #9d5d00; --warn-soft: #fff4ce; --ko: #c42b1c; --ko-soft: #fde7e9;
}
html.tema-scuro[data-stile="fluent"] {
  --bg: #202020; --surface: #2b2b2b; --surface-2: #323232; --ink: #ffffff; --ink-2: #e6e6e6; --muted: #cfcfcf; --faint: #9a9a9a;
  --line: #3d3d3d; --line-2: #333333; --line-strong: #9a9a9a; --check-line: #9a9a9a;
  --accent: #ff9b6a; --accent-ink: #ffc2a3; --accent-soft: rgba(255,155,106,.14); --accent-line: rgba(255,155,106,.45); --on-accent: #1a0a02;
  --hover: rgba(255,255,255,.06); --chip: #3a3a3a; --topbar: rgba(32,32,32,.88);
  --ok: #6ccb5f; --ok-soft: rgba(108,203,95,.14); --warn: #fce100; --warn-soft: rgba(252,225,0,.12); --ko: #ff99a4; --ko-soft: rgba(255,153,164,.14);
}

/* ---------------- comune agli stili nuovi ---------------- */
html[data-stile="material"] body, html[data-stile="apple"] body, html[data-stile="fluent"] body { font-family: var(--font); font-weight: 400; letter-spacing: 0; font-size: 14px; }
html[data-stile="fluent"] body { background: linear-gradient(135deg, #f1ebe7 0%, #f3f3f3 35%, #eff1f4 100%) fixed; }
html.tema-scuro[data-stile="fluent"] body { background: linear-gradient(135deg, #29221e 0%, #202020 35%, #1e2024 100%) fixed; }
html[data-stile] .btn, html[data-stile] .field { font-family: var(--font); }

/* pulsanti */
html[data-stile="material"] .btn { border-radius: 999px; height: 40px; padding: 0 22px; font-weight: 500; letter-spacing: .01em; border-color: var(--line-strong); background: transparent; color: var(--accent); }
html[data-stile="material"] .btn.sm { height: 32px; padding: 0 14px; }
html[data-stile="material"] .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
html[data-stile="material"] .btn.ghost { border-color: transparent; background: transparent; color: var(--accent); }
html[data-stile="material"] .btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--line-strong); }
html[data-stile="material"] .btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); box-shadow: var(--shadow); }
html[data-stile="apple"] .btn { border: 0; border-radius: 8px; background: var(--chip); color: var(--ink); font-weight: 400; height: 30px; padding: 0 12px; }
html[data-stile="apple"] .btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 500; box-shadow: none; }
html[data-stile="apple"] .btn.ghost { background: transparent; color: var(--accent); }
html[data-stile="apple"] .btn:hover:not(:disabled) { filter: brightness(.96); background: var(--chip); }
html[data-stile="apple"] .btn.primary:hover:not(:disabled) { background: var(--accent); }
html[data-stile="apple"] .btn.ghost:hover:not(:disabled) { background: var(--hover); }
html[data-stile="fluent"] .btn { border-radius: 4px; height: 32px; font-weight: 400; background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
html[data-stile="fluent"] .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
html[data-stile="fluent"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
html.tema-scuro[data-stile="fluent"] .btn:not(.primary):not(.ghost), html.tema-scuro[data-stile="apple"] .btn:not(.primary):not(.ghost), html.tema-scuro[data-stile="material"] .btn:not(.primary):not(.ghost) { background: transparent; }
html.tema-scuro[data-stile="fluent"] .btn:not(.primary):not(.ghost) { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
html.tema-scuro[data-stile="apple"] .btn:not(.primary):not(.ghost) { background: var(--chip); border: 0; color: var(--ink); }
html.tema-scuro[data-stile="material"] .btn:not(.primary):not(.ghost) { border-color: var(--line-strong); color: var(--accent); }
html.tema-scuro[data-stile] .btn.primary { color: var(--on-accent); }

/* campi */
html[data-stile="material"] .field { border-radius: 4px; border-color: var(--line-strong); background: transparent; height: 40px; }
html[data-stile="material"] .field:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
html[data-stile="apple"] .field { border: 0; background-color: var(--chip); border-radius: 8px; height: 32px; }
html[data-stile="apple"] .field:focus { box-shadow: 0 0 0 3px var(--focus-ring); }
html[data-stile="fluent"] .field { border-radius: 4px; border-bottom-color: var(--line-strong); }
html[data-stile="fluent"] .field:focus { border-color: var(--line); box-shadow: inset 0 -2px 0 var(--accent); }
html.tema-scuro[data-stile] .field { background-color: var(--surface-2); color: var(--ink); }
html.tema-scuro[data-stile="material"] .field { background-color: transparent; }

/* interruttori */
html[data-stile="material"] .switch span { width: 46px; height: 28px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line-strong); }
html[data-stile="material"] .switch span::after { top: 7px; left: 7px; width: 14px; height: 14px; background: var(--line-strong); box-shadow: none; transition: all .15s; }
html[data-stile="material"] .switch input:checked + span { background: var(--accent); box-shadow: none; }
html[data-stile="material"] .switch input:checked + span::after { top: 4px; left: 4px; width: 20px; height: 20px; transform: translateX(18px); background: var(--on-accent); }
html[data-stile="apple"] .switch span { width: 42px; height: 26px; }
html[data-stile="apple"] .switch span::after { width: 22px; height: 22px; }
html[data-stile="apple"] .switch input:checked + span { background: #34c759; }
html[data-stile="apple"] .switch input:checked + span::after { transform: translateX(16px); }
html[data-stile="fluent"] .switch span { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); width: 40px; }
html[data-stile="fluent"] .switch span::after { top: 5px; left: 5px; width: 10px; height: 10px; background: var(--muted); box-shadow: none; }
html[data-stile="fluent"] .switch input:checked + span { background: var(--accent); box-shadow: none; }
html[data-stile="fluent"] .switch input:checked + span::after { background: var(--on-accent); transform: translateX(20px); }
html[data-stile="apple"] input.check { border-radius: 50%; }
html[data-stile="fluent"] input.check { border-radius: 4px; }
html[data-stile="material"] input.check { border-radius: 2px; border-width: 2px; }

/* riquadri, chip, finestre */
html[data-stile="material"] .card, html[data-stile="material"] .hm-c { border: 0; background: var(--surface); box-shadow: none; }
html[data-stile="apple"] .card, html[data-stile="apple"] .hm-c { border: 0; box-shadow: none; }
html[data-stile="fluent"] .card, html[data-stile="fluent"] .hm-c { border-color: var(--line); box-shadow: var(--shadow-sm); }
html[data-stile="fluent"] .chip { border-radius: 4px; }
html[data-stile="material"] dialog { border-radius: 28px; background: var(--surface-2); }
html[data-stile="apple"] dialog { border-radius: 14px; }
html[data-stile="fluent"] dialog { border-radius: 8px; border: 1px solid var(--line); }

/* barra in alto */
html[data-stile="material"] .topbar { border-bottom: 0; backdrop-filter: none; height: 64px; }
html[data-stile="apple"] .topbar { height: 52px; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
html[data-stile="fluent"] .topbar { background: transparent; border-bottom: 0; backdrop-filter: none; }

/* schede delle pagine (Vendite, Food Cost, …) */
html[data-stile="material"] .schede button[aria-selected=true] { color: var(--accent); border-bottom-width: 3px; }
html[data-stile="apple"] .schede { border-bottom: 0; gap: 2px; padding: 2px; background: var(--chip); border-radius: 9px; width: fit-content; max-width: 100%; }
html[data-stile="apple"] .schede button { padding: 6px 14px; border: 0; border-radius: 7px; margin: 0; font-weight: 500; font-size: 13px; color: var(--ink); }
html[data-stile="apple"] .schede button[aria-selected=true] { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
html.tema-scuro[data-stile="apple"] .schede button[aria-selected=true] { background: #636366; }
html[data-stile="fluent"] .schede button[aria-selected=true] { border-bottom-width: 3px; border-bottom-color: var(--accent); }

/* menù laterale (auth.php) */
html[data-stile="material"] .ds-side { background: var(--surface-2); border-right: 0; }
html[data-stile="material"] .ds-v { border-radius: 999px; min-height: 48px; padding: 0 16px; font-weight: 500; color: var(--ink-2); }
html[data-stile="material"] .ds-v.on { background: var(--chip); color: var(--ink); font-weight: 700; }
html[data-stile="material"] .ds-v.on svg { color: var(--ink); }
html[data-stile="material"] .ds-gr { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--muted); padding: 16px 16px 6px; }
html[data-stile="apple"] .ds-side { background: color-mix(in srgb, var(--surface-2) 72%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
html[data-stile="apple"] .ds-v { min-height: 30px; border-radius: 6px; padding: 0 10px; font-size: 13px; font-weight: 400; color: var(--ink); gap: 9px; }
html[data-stile="apple"] .ds-v svg { width: 17px; height: 17px; color: var(--accent); }
html[data-stile="apple"] .ds-v.on { background: rgba(0,0,0,.09); color: var(--ink); font-weight: 500; }
html.tema-scuro[data-stile="apple"] .ds-v.on { background: rgba(255,255,255,.12); }
html[data-stile="apple"] .ds-v.on svg { color: var(--accent); }
html[data-stile="apple"] .ds-gr { text-transform: none; letter-spacing: 0; font-size: 11px; padding: 12px 10px 4px; }
html[data-stile="apple"] .ds-voci { gap: 1px; }
html[data-stile="fluent"] .ds-side { background: transparent; border-right: 0; }
html[data-stile="fluent"] .ds-v { border-radius: 4px; font-weight: 400; color: var(--ink); min-height: 36px; }
html[data-stile="fluent"] .ds-v svg { color: var(--ink); width: 17px; height: 17px; }
html[data-stile="fluent"] .ds-v.on { background: var(--hover); color: var(--ink); font-weight: 400; }
html[data-stile="fluent"] .ds-v.on svg { color: var(--ink); }
html[data-stile="fluent"] .ds-v.on::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--accent); }
html[data-stile="fluent"] .ds-gr { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); }
html[data-stile="fluent"] .ds-piede { border-top: 0; }
@media (max-width: 900px) {
  html[data-stile="fluent"] .ds-side, html[data-stile="apple"] .ds-side { background: var(--surface); }
}

/* il foglio del menù resta «carta» */
html[data-stile] .carta, html[data-stile] .foglio {
  --surface: #fff; --surface-2: #f9fafb; --ink: #111827; --ink-2: #374151; --muted: #6b7280; --faint: #9ca3af;
  --line: #e5e7eb; --line-2: #f0f1f3; --accent: #c2410c; --accent-ink: #9a3412; --accent-soft: #fff4ed; --accent-line: #fed7c3;
  --on-accent: #fff; --hover: #eef0f3; --chip: #f1f2f4; --line-strong: #d1d5db;
}
@media (prefers-reduced-motion: reduce) { html[data-stile] .switch span::after { transition: none !important; } }