/* Tema "October": il pannello con il linguaggio grafico di October CMS 4 (backend + toolbox UI,
   modules/system/assets/toolbox e modules/backend/assets). Colori dalla palette "Default" di
   Backend\Models\BrandSetting (primary #6a6cf7, secondary #72809d, selection #6bc48d, mainnav #2d3134,
   sidebar #e9edf3), callout e scoreboard dal toolbox, raggi di Bootstrap 5 (.3rem).
   Corrispondenze: menu = sidebar di October (chiaro, voce attiva bianca); testata = mainnav (scura);
   .notice = callout; .up-tile/.tele .cell = scoreboard; .btn = btn-default / btn-primary. */
html[data-theme="october"] {
  --ink: #333333; --ink-soft: #4a5664; --paper: #fafbfd; --surface: #ffffff;
  --line: #d7e1ea; --line-soft: #e9edf3; --accent: #6a6cf7; --accent-dark: #5153d9;
  --ok: #5e9e2e; --wait: #e67e22; --down: #cc3300; --muted: #72809d;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ink-bg: #2d3134; --ink-bg-fg: #ffffff;
  --nav-fg: #536061; --nav-fg-strong: #333333; --nav-muted: #72809d; --nav-hover: #ffffff; --nav-line: #d7e1ea;
  --nav-btn-line: #c4ced7; --nav-foot-fg: #35425b; --nav-icon: #536061;
  --surface-2: #f0f4f8; --surface-3: #e9edf3; --accent-soft: #e6e7fc; --accent-ring: rgba(106, 108, 247, .25);
  --topbar-bg: #2d3134; --topbar-fg: #ffffff;
  --occ-none: #2d3134; --ico-stroke: #35425b;
  --radius: .3rem; --radius-sm: .25rem; --radius-lg: .5rem; --radius-panel: .3rem;
  --shadow-card: 0 1px 3px rgba(53, 66, 91, .06);
  --btn-weight: 600; --h-weight: 600;
  --oc-callout-info: #e6e7fc; --oc-callout-warn: #faf6e2; --oc-callout-danger: #fadad7; --oc-callout-ok: #ecf7da;
}
html[data-theme="october"] body { font-size: 14px; }
html[data-theme="october"] h1, html[data-theme="october"] h2, html[data-theme="october"] .panel-head h3,
html[data-theme="october"] .modal-head h3 { color: #35425b; }

/* ---- menu: la sidebar di October (chiara, voce attiva su bianco arrotondato) ---- */
html[data-theme="october"] .rail { background: #e9edf3; border-right: 1px solid var(--line); }
html[data-theme="october"] .nav a { border-left: 0; margin: 0 10px; padding: 8px 12px; border-radius: var(--radius); font-weight: 500; }
html[data-theme="october"] .nav a.on { box-shadow: 0 1px 3px rgba(53, 66, 91, .08); }
html[data-theme="october"] .nav .pill { background: var(--accent); }
html[data-theme="october"] .bell-m .pill { box-shadow: 0 0 0 2px #e9edf3; background: #cc3300; }

/* ---- testata: la mainnav scura ---- */
html[data-theme="october"] .topbar { border-bottom: 0; padding: 10px 28px; }
html[data-theme="october"] .topbar select { background: #3a3f43; color: #fff; border-color: #4a5054; }
html[data-theme="october"] .topbar .bell { color: #fff; border-color: rgba(255, 255, 255, .35); }
html[data-theme="october"] .topbar .bell:hover { background: rgba(255, 255, 255, .1); }
html[data-theme="october"] .mode-tag { color: #cfd3d6; border-color: rgba(255, 255, 255, .35); }
html[data-theme="october"] .mode-tag.edge { color: #a6a7fa; border-color: #a6a7fa; }
@media (max-width: 820px) {
  html[data-theme="october"] .topbar.multi { background: #e9edf3; color: var(--ink); }
}

/* ---- accesso: lo sfondo caldo della pagina di login di October (#fef6eb con sfumatura) ---- */
html[data-theme="october"] .login-wrap { background: #fef6eb radial-gradient(ellipse at 20% 0%, #fff 0%, #fef6eb 45%, #f6e4cf 100%); }
html[data-theme="october"] .login { border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(53, 66, 91, .12); padding: 34px; }
html[data-theme="october"] .login .brand b { color: #35425b; }

/* ---- bottoni: btn-default (chiaro) e btn-primary ---- */
html[data-theme="october"] .btn { background: #fff; color: #333; border-color: #c4ced7; padding: 8px 16px; font-size: 14px; }
html[data-theme="october"] .btn:hover { background: #f0f4f8; border-color: #aeb9c5; }
html[data-theme="october"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="october"] .btn.primary:hover { background: #7c7ef8; border-color: #7c7ef8; }
html[data-theme="october"] .btn.danger { color: #cc3300; border-color: #cc3300; background: #fff; }
html[data-theme="october"] .btn.danger:hover, html[data-theme="october"] .btn.danger.solid { background: #ff3e1d; border-color: #ff3e1d; color: #fff; }
html[data-theme="october"] .btn.sm { padding: 5px 12px; font-size: 13px; }
html[data-theme="october"] .tbtn.on, html[data-theme="october"] .tbtn.on:hover,
html[data-theme="october"] .fchip input:checked + span { background: var(--accent); border-color: var(--accent); }
html[data-theme="october"] .fchip.only input:checked + span { background: #6bc48d; border-color: #6bc48d; }

/* ---- campi: form-control di Bootstrap ---- */
html[data-theme="october"] input, html[data-theme="october"] select.field, html[data-theme="october"] .topbar select {
  padding: 8px 12px; font-size: 14px; border-color: #c4ced7;
}
html[data-theme="october"] label { color: #35425b; font-weight: 500; }
html[data-theme="october"] .switch span { width: 40px; height: 22px; border-radius: 11px; background: #c4ced7; }
html[data-theme="october"] .switch span::after { width: 18px; height: 18px; }
html[data-theme="october"] .switch input:checked + span::after { transform: translateX(18px); }

/* ---- tabelle: list widget ---- */
html[data-theme="october"] th { background: #f0f4f8; color: #35425b; font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
html[data-theme="october"] .panel-head { background: #fff; }

/* ---- avvisi: callout del toolbox (fondo colorato, niente bordo) ---- */
html[data-theme="october"] .notice { background: var(--oc-callout-info); border-left: 0; border-radius: var(--radius); padding: 14px 18px; color: #333; }
html[data-theme="october"] .notice.warn { background: var(--oc-callout-warn); }
html[data-theme="october"] .notice.alert { background: var(--oc-callout-danger); }

/* ---- numeri: scoreboard (titolo piccolo, valore grande, senza riquadro) ---- */
html[data-theme="october"] .up-tile, html[data-theme="october"] .tele .cell { border: 0; border-left: 3px solid transparent; padding: 4px 0 4px 12px; background: transparent; }
html[data-theme="october"] .up-tile b, html[data-theme="october"] .tele .cell b { font-size: 26px; font-weight: 400; color: #333; }
html[data-theme="october"] .up-tile span, html[data-theme="october"] .tele .cell small { color: #72809d; font-size: 12.5px; }

/* ---- schede camera, finestre, toast ---- */
html[data-theme="october"] .tile:hover { border-color: #b9c6d3; box-shadow: 0 3px 10px rgba(53, 66, 91, .10); }
html[data-theme="october"] .tile.occ-clean { border-left-color: #6bc48d; }
html[data-theme="october"] .occ-legend i.occ-clean { background: #6bc48d; }
html[data-theme="october"] .scrim { background: rgba(53, 66, 91, .55); }
html[data-theme="october"] .modal { border-radius: var(--radius-lg); box-shadow: 0 12px 48px rgba(53, 66, 91, .25); border: 0; }
html[data-theme="october"] .toast { background: #fff; color: #333; border-radius: var(--radius-lg); box-shadow: 0 6px 20px rgba(53, 66, 91, .2); border-left-width: 4px; }
html[data-theme="october"] .toast.wait { border-left-color: #e67e22; }
html[data-theme="october"] .tabs button { font-weight: 500; }
html[data-theme="october"] .tabs button.on { border-bottom-width: 2px; }
html[data-theme="october"] .badge { border-radius: 10px; padding: 1px 9px; }
/* il font di sistema e' piu' largo del Plex: la pillola GW OFFLINE del termostato resta su una riga */
html[data-theme="october"] .cl-st { white-space: nowrap; letter-spacing: .03em; padding: 2px 7px; font-size: 10.5px; }
html[data-theme="october"] .theme-row select { color: #35425b; }