/* =========================================================
   Drakton by Phersei — tema "gestionale" (design 2026-08)
   Caricato DOPO style.css solo sull'istanza Drakton (drakton_only).
   Ridefinisce le variabili → flippa il tema scuro a chiaro/arancio,
   senza riscrivere le classi dei template; + layout a sidebar.
   Lingua visiva allineata al gestionale Phersei: sidebar scura calda,
   arancio come unico accento d'azione, contenuto chiaro tabellare.
   ========================================================= */

:root {
  --bg:    #f6f6f7;   /* sfondo contenuto */
  --bg2:   #efeff1;
  --card:  #ffffff;
  --card2: #ffffff;
  --gold:  #d97e2f;   /* arancio Phersei (accento/CTA) */
  --gold2: #b25f12;   /* arancio scuro (link/testo su chiaro) */
  --light: #232323;   /* "chiaro" → ora testo scuro su fondo chiaro */
  --muted: #8a8f96;
  --line:  #e8e8ea;

  --white:   #ffffff;
  --gray-50:  #fafafb;
  --gray-100: #f1f1f3;
  --gray-200: var(--line);
  --gray-600: #55595e;
  --gray-700: #3b3f44;   /* testo corpo scuro */
  --gray-900: #232323;

  --dk-side:#211c17; --dk-side-2:#2c241c; --dk-side-line:rgba(255,255,255,.07);
  --dk-side-text:#b9b2a9; --dk-side-muted:#7d766c;
  --dk-green:#3e8e41; --dk-green-bg:#e7f3e8;

  --shadow: 0 1px 2px rgba(20,20,25,.05);
  --shadow-md: 0 6px 20px -12px rgba(20,20,25,.12);
}

body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  color: var(--gray-700);
  background: var(--bg) !important;
  min-height: 100vh;
}
::selection { background: var(--gold); color: #fff; }

/* I template condivisi con l'hub portano font serif inline (Cormorant):
   qui l'identità è sans — l'!important nel foglio vince sullo stile inline. */
h1, h2, h3, .brand-lockup *, [data-brand] {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  letter-spacing: normal !important;
}
h1, h2, h3 { color: var(--light); font-weight: 800; }

a { color: var(--gold2); }
a:hover { color: var(--gold2); }
code { background: #f8ecdd; color: var(--gold2); }

/* ── Shell a sidebar ─────────────────────────────────────── */
.dk-shell { display: flex; min-height: 100vh; }

.dk-sidebar {
  width: 212px; flex-shrink: 0; background: var(--dk-side);
  color: var(--dk-side-text); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.dk-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--dk-side-line); }
.dk-logo {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(150deg,#3a3129,#292118);
  border: 1px solid var(--dk-side-line);
  color: var(--gold); font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.dk-brand-text { line-height: 1.1; display: flex; flex-direction: column; }
.dk-brand-name { color: #f3efe9; font-weight: 800; font-size: 15px; }
.dk-brand-sub { color: var(--dk-side-muted); font-size: 9px; letter-spacing: 1.4px; font-weight: 600; }

.dk-nav { padding: 10px 8px; flex: 1; font-size: 13px; }
.dk-nav-section { color: var(--dk-side-muted); font-size: 9.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 12px 10px 5px; }
.dk-nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  margin: 1px 0; color: var(--dk-side-text); font-weight: 600;
  border: 1px solid transparent; border-radius: 10px;
  transition: background .12s, color .12s;
}
.dk-nav a:hover { background: rgba(255,255,255,.05); text-decoration: none; color: #f3efe9; }
.dk-nav a.active { background: #33261a; color: var(--gold); border-color: rgba(217,126,47,.5); }
.dk-nav a i { font-size: 17px; }

.dk-side-foot { padding: 12px 16px; border-top: 1px solid var(--dk-side-line); }
.dk-conn { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.dk-dot { width: 8px; height: 8px; border-radius: 50%; background: #4fbf68; flex-shrink: 0; }
.dk-conn-name { color: #f3efe9; font-size: 12px; font-weight: 600; }
.dk-conn-sub { color: var(--dk-side-muted); font-size: 10px; }
.dk-side-link { color: var(--dk-side-muted); font-size: 12px; }
.dk-side-link:hover { color: #f3efe9; }
.dk-cta {
  display: block; text-align: center; background: var(--gold); color: #fff !important;
  font-weight: 700; font-size: 13px; padding: 10px; border-radius: 9px;
}
.dk-cta:hover { background: #c76f22; text-decoration: none; }

.dk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-main > .container, .dk-main > .legal-header,
.dk-main > .ev-wrap, .dk-main > .mon-wrap { width: 100%; }
.dk-foot { margin-top: auto; padding: 16px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* ── Scala di gravità: zone tonali grigio → ambra → rosso ── */
.sev-z0 { background: #e4e6e9 !important; color: #55595e !important; }
.sev-z1 { background: #c3c8cf !important; color: #232323 !important; }
.sev-z2 { background: #dd9f2b !important; color: #fff !important; }
.sev-z3 { background: #dd7226 !important; color: #fff !important; }
.sev-z4 { background: #d13d27 !important; color: #fff !important; }
.sev-z5 { background: #8c1710 !important; color: #fff !important; }
.sev-badge { border-radius: 6px; }

/* ── Ritocchi componenti per il tema chiaro ──────────────── */
.legal-header { background: transparent; border-bottom: 1px solid var(--line); padding: 22px 32px; }
.legal-header h1 { color: var(--light); }
.subtitle, .legal-header .subtitle { color: var(--muted); }
.container { padding-left: 32px; padding-right: 32px; }

.btn { border-radius: 9px; font-weight: 700; }
.btn-primary { background: var(--gold); color: #fff; border: none; }
.btn-primary:hover { background: #c76f22; color: #fff; box-shadow: 0 4px 12px -4px rgba(217,126,47,.6); }
.btn-ghost { background: #fff; color: var(--gray-700); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--gray-50); color: var(--gold2); }

.status-card, .dash-panel, .kpi-card, .ev-table, .mon-table, .legal-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow), var(--shadow-md);
}
.kpi-card-alert { border-color: #f0cdb8; }
.kpi-label { color: var(--muted); }
.kpi-value { color: var(--light); }
.kpi-card-alert .kpi-label { color: #c0261f; }
.kpi-card-alert .kpi-value { color: #c0261f; }

.dash-panel-title { color: var(--light); }
.dash-panel-sub, .dash-footnote, .sev-name, .page-id { color: var(--muted); }
.sev-track { background: #eef0f3; }
.page-avatar { background: #f8ecdd; color: var(--gold2); }
.page-name { color: var(--light); }
.page-status { color: #fff; background: var(--dk-green); border-radius: 20px; padding: 3px 11px; font-weight: 700; }
.status-dot { background: #fff; }

.mon-banner { background: #fdf7ec; border: 1px solid rgba(161,98,7,.3); color: #7a5410; }
.mon-table th { background: var(--gray-50); color: var(--muted); }
.mon-table td, .mon-table th { border-bottom: 1px solid var(--line); }

.ev-table th { background: var(--gray-50); color: var(--muted); }
.ev-table td { color: var(--gray-700); }
.ev-hash { color: var(--gold2); }
.ev-note { background: #fdf7ec; border-left: 3px solid var(--gold); }
.ev-note h2 { color: var(--light); }
.ev-disclaimer { color: var(--gold2); background: #f8ecdd; }
.kw-chip {
  background: rgba(217,160,50,.15); color: #a16207;
  border: 1px solid rgba(161,98,7,.28); border-radius: 6px;
  font-family: 'Fragment Mono', ui-monospace, monospace;
}