/* ============================================================================
   HLS-Struct — Tema centralizzato (Data-Dense Dashboard, spirito tecnico)
   ----------------------------------------------------------------------------
   Fonte unica dello stile dell'applicazione. Caricato in base.html DOPO
   Bootstrap e lo stile inline, così sovrascrive entrambi.
   SOLO presentazione: nessuna logica. Mantenere questo file per gli sviluppi
   futuri (palette/tipografia/effetti canonici).

   Palette (design system): blu professionale + verde, superfici slate.
   Tipografia: Fira Sans (testo) + Fira Code (heading, numeri, codice).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand & semantica ---- */
  --brand-primary:        #2563eb;
  --brand-primary-rgb:    37, 99, 235;
  --brand-primary-hover:  #1d4ed8;
  --brand-primary-active: #1e40af;
  --brand-accent:         #059669;   /* verde "deal"/conferme */
  --brand-accent-hover:   #047857;
  --brand-danger:         #dc2626;
  --brand-warning:        #d97706;
  --brand-info:           #0891b2;

  /* ---- Superfici slate ---- */
  --surface-body:    #f6f8fb;
  --surface-card:    #ffffff;
  --surface-muted:   #f1f5f9;
  --ink:             #0f172a;   /* testo primario  */
  --ink-soft:        #475569;   /* testo secondario */
  --hairline:        #e2e8f0;   /* bordi/divisori   */

  /* ---- Sidebar (deep slate, tecnica) ---- */
  --sb-bg-top:    #15314f;
  --sb-bg-bottom: #102538;
  --sb-text:      rgba(255,255,255,.78);
  --sb-text-dim:  rgba(255,255,255,.45);
  --sb-active-bg: rgba(37,99,235,.20);
  --sb-active-bar:#3b82f6;

  /* ---- Forma & profondità ---- */
  --radius-sm: .375rem;
  --radius:    .55rem;
  --radius-lg: .85rem;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08);

  /* ---- Bootstrap remap (ciò che Bootstrap legge a runtime) ---- */
  --bs-body-bg: var(--surface-body);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: .95rem;
  --bs-border-color: var(--hairline);
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-success: var(--brand-accent);
  --bs-success-rgb: 5, 150, 105;
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-soft);
  --bs-tertiary-bg: var(--surface-muted);
  /* override del token legacy usato dallo stile inline (sidebar/org-node) */
  --qhse-primary: var(--sb-bg-top);
  --qhse-accent:  var(--brand-primary);
}

/* ============================ Tipografia =================================== */
body {
  font-family: var(--bs-body-font-family);
  background: var(--surface-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.navbar-brand,.card-header,.fw-semibold,.fw-bold {
  font-family: 'Fira Code', 'Fira Sans', ui-monospace, monospace;
  letter-spacing: -.01em;
}
.card-header { font-weight: 600; }
code, kbd, samp, pre, .font-monospace { font-family: 'Fira Code', ui-monospace, monospace; }
/* numeri tabellari: niente "salti" nelle colonne dati */
table, .tabular-nums, .badge, .kpi-card, td, th { font-variant-numeric: tabular-nums; }
code { color: var(--brand-primary); background: var(--surface-muted);
       padding: .1em .4em; border-radius: var(--radius-sm); font-size: .85em; }

/* ============================ Link & focus ================================ */
a { text-decoration: none; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid rgba(var(--brand-primary-rgb), .5); outline-offset: 2px; }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--brand-primary-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .15);
}

/* ============================ Bottoni ===================================== */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover); --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-bg: var(--brand-primary-active); --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary); --bs-btn-active-border-color: var(--brand-primary);
}
.btn-success {
  --bs-btn-bg: var(--brand-accent); --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent-hover); --bs-btn-hover-border-color: var(--brand-accent-hover);
  --bs-btn-active-bg: var(--brand-accent-hover);
}
.btn-outline-success { --bs-btn-color: var(--brand-accent); --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent); --bs-btn-hover-border-color: var(--brand-accent); }

/* Nota: le utility .bg-*/.text-*/.border-* e i .badge.bg-* sono ricolorati
   automaticamente dal remap delle variabili --bs-*-rgb qui sopra, RISPETTANDO
   le opacity (bg-opacity, text-opacity). Niente override !important: romperebbe
   gli sfondi "subtle" (es. icone KPI). */

/* ============================ Card & superfici ============================ */
.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface-card);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--hairline); }
.kpi-card { border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ============================ Tabelle ===================================== */
.table { --bs-table-border-color: var(--hairline); color: var(--ink); }
.table > thead th {
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-family: 'Fira Code', monospace;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--hairline);
}
.table-hover > tbody > tr:hover > * { background: rgba(var(--brand-primary-rgb), .045); }

/* ============================ Badge ======================================= */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--radius-sm); }

/* ============================ Form ======================================== */
.form-control, .form-select { border-color: var(--hairline); border-radius: var(--radius-sm); }
.form-label { font-weight: 500; color: var(--ink); }

/* ============================ Topbar / breadcrumb ========================= */
.topbar { background: var(--surface-card); border-bottom: 1px solid var(--hairline); }
.breadcrumb { font-size: .85rem; }
.breadcrumb a { color: var(--brand-primary); }

/* ============================ Sidebar (deep slate) ======================== */
#sidebar {
  background: linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-bottom) 100%);
}
#sidebar .sidebar-brand {
  font-family: 'Fira Code', monospace;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#sidebar .nav-link { color: var(--sb-text); position: relative; transition: background .15s, color .15s; }
#sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
#sidebar .nav-link.active {
  color: #fff;
  background: var(--sb-active-bg);
  box-shadow: inset 3px 0 0 var(--sb-active-bar);
}
#sidebar .nav-section {
  color: var(--sb-text-dim);
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
}
#sidebar .sidebar-brand, #sidebar .sidebar-user { border-color: rgba(255,255,255,.08); }

/* ============================ Org chart =================================== */
.org-node { border-left-color: var(--brand-primary); box-shadow: var(--shadow-xs); }

/* ============================ Riduzione movimento ========================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}