/* ═══════════════════════════════════════════════════════════
   HotMinds Brand Kit — .NET Core MVC + Bootstrap 5
   "Human Vision, Digital Power"
   ═══════════════════════════════════════════════════════════ */

/* ── @font-face ─────────────────────────────────────────────── */
@font-face { font-family:"Cabinet Grotesk"; src:url("../fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Cabinet Grotesk"; src:url("../fonts/cabinet-grotesk-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-900.woff2") format("woff2"); font-weight:900; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

/* ── CSS Tokens ─────────────────────────────────────────────── */
:root {
  --lime:       #BFDD2E;
  --lime-ink:   #0B1304;
  --purple:     #6C5CE7;
  --ink:        #0A0A0F;
  --paper:      #F4F4EE;
  --ink-soft:   #9097A8;
  --paper-soft: #4B4F5A;
  --ok:         #3FA34D;
  --warn:       #E0A12B;
  --error:      #D6453A;

  /* Semantici — dark di default */
  --bg:         var(--ink);
  --bg-raised:  #111118;
  --bg-border:  #1e1e28;
  --fg:         #F0F0EA;
  --muted:      var(--ink-soft);
  --accent:     var(--lime);

  /* Bootstrap 5 override */
  --bs-body-bg:          var(--bg);
  --bs-body-color:       var(--fg);
  --bs-primary:          #BFDD2E;
  --bs-primary-rgb:      191, 221, 46;
  --bs-font-sans-serif:  "Satoshi", system-ui, sans-serif;
  --bs-font-monospace:   "JetBrains Mono", ui-monospace, monospace;
  --bs-border-color:     var(--bg-border);
}

[data-bs-theme="light"] {
  --bg:        var(--paper);
  --bg-raised: #ffffff;
  --bg-border: #dde0e8;
  --fg:        #0A0A0F;
  --muted:     var(--paper-soft);
  --bs-body-bg:      var(--bg);
  --bs-body-color:   var(--fg);
  --bs-border-color: var(--bg-border);
}

/* ── Base ───────────────────────────────────────────────────── */
html { position: relative; min-height: 100%; }

body {
  background:  var(--bg);
  color:       var(--fg);
  font-family: "Satoshi", system-ui, sans-serif;
  font-size:   0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cabinet Grotesk", "SF Pro Display", "Helvetica Neue", sans-serif;
  letter-spacing: -0.02em;
}

.font-mono, code, kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
}

/* ── Bootstrap component overrides ─────────────────────────── */
.btn-primary {
  background: var(--lime);
  color:      var(--lime-ink);
  border-color: var(--lime);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background:   #a8c226;
  border-color: #a8c226;
  color: var(--lime-ink);
}

.btn-outline-secondary {
  border-color: var(--bg-border);
  color: var(--muted);
}
.btn-outline-secondary:hover {
  background: var(--bg-border);
  color: var(--fg);
  border-color: var(--bg-border);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.form-control, .form-select {
  background-color: var(--bg-raised);
  border-color:     var(--bg-border);
  color:            var(--fg);
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-raised);
  border-color:     var(--purple);
  color:            var(--fg);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
.form-control::placeholder { color: var(--muted); opacity: 1; }

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: #fff;
  border-color: #dde0e8;
}

.card {
  background:   var(--bg-raised);
  border-color: var(--bg-border);
}
.card-header {
  background:   var(--bg);
  border-color: var(--bg-border);
}

.alert-success {
  background:   rgba(63, 163, 77, 0.1);
  border-color: rgba(63, 163, 77, 0.4);
  color: #6ed97b;
}
.alert-danger {
  background:   rgba(214, 69, 58, 0.1);
  border-color: rgba(214, 69, 58, 0.4);
  color: #f07068;
}
.alert-info {
  background:   rgba(108, 92, 231, 0.1);
  border-color: rgba(108, 92, 231, 0.35);
  color: #a99bf7;
}

[data-bs-theme="light"] .alert-success { color: #1e7a2a; }
[data-bs-theme="light"] .alert-danger  { color: #a8291f; }
[data-bs-theme="light"] .alert-info    { color: #4736b5; }

/* Tabs */
.nav-tabs {
  border-color: var(--bg-border);
  gap: 2px;
}
.nav-tabs .nav-link {
  color: var(--muted);
  border-color: transparent;
  border-radius: 6px 6px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}
.nav-tabs .nav-link:hover {
  color: var(--fg);
  border-color: var(--bg-border);
  background: rgba(255,255,255,0.03);
}
.nav-tabs .nav-link.active {
  background:   var(--bg-raised);
  border-color: var(--bg-border) var(--bg-border) var(--bg-raised);
  color:        var(--fg);
}
.tab-content {
  background:   var(--bg-raised) !important;
  border-color: var(--bg-border) !important;
}

/* Table */
.table {
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--fg);
  --bs-table-border-color: var(--bg-border);
  --bs-table-striped-bg:   rgba(255,255,255,0.02);
  --bs-table-hover-bg:     rgba(191, 221, 46, 0.04);
}
[data-bs-theme="light"] .table {
  --bs-table-striped-bg: rgba(0,0,0,0.025);
  --bs-table-hover-bg:   rgba(0,0,0,0.04);
}

/* Collapse */
.collapse-content {
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  background: var(--bg-raised);
}

/* ── Theme toggle ────────────────────────────────────────────── */
.btn-theme-toggle {
  background:   none;
  border:       1px solid var(--bg-border);
  color:        var(--muted);
  border-radius: 6px;
  padding:      5px 10px;
  font-size:    0.78rem;
  cursor:       pointer;
  line-height:  1;
  transition:   color 0.15s, border-color 0.15s;
  font-family:  "JetBrains Mono", monospace;
}
.btn-theme-toggle:hover {
  color:        var(--fg);
  border-color: var(--purple);
}

/* ── KPI cards ──────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.kpi-card {
  background:    var(--bg-raised);
  border:        1px solid var(--bg-border);
  border-radius: 8px;
  padding:       1.125rem 1.25rem;
  transition:    border-color 0.15s;
}
.kpi-card.clickable { cursor: pointer; }
.kpi-card.clickable:hover { border-color: var(--purple); }
.kpi-card.kpi-anomalie { border-left: 3px solid var(--error); }
.kpi-card.kpi-ok       { border-left: 3px solid var(--ok); }

.kpi-label {
  font-size:      0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.4rem;
  font-weight: 500;
}
.kpi-number {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size:   2.25rem;
  line-height: 1;
}
.kpi-number.clr-lime  { color: var(--lime); }
.kpi-number.clr-error { color: var(--error); }
.kpi-number.clr-ok    { color: var(--ok); }
.kpi-number.clr-warn  { color: var(--warn); }
.kpi-sub {
  font-size:   0.72rem;
  color:       var(--muted);
  margin-top:  0.3rem;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  background:    var(--bg-raised);
  border:        1px solid var(--bg-border);
  border-radius: 8px;
  padding:       0.875rem 1.125rem;
}

/* ── Table enhancements ─────────────────────────────────────── */
.tbl-hm thead th {
  font-size:      0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--muted);
  background:     transparent;
  border-bottom:  1px solid var(--bg-border);
  padding-top:    0.5rem;
  padding-bottom: 0.5rem;
}
.tbl-hm tbody tr { border-color: var(--bg-border); }
.tbl-hm tr.row-error { background: rgba(214, 69, 58, 0.07) !important; }
.tbl-hm tr.row-warn  { background: rgba(224, 161, 43, 0.05) !important; }
.tbl-hm tbody tr:hover { background: rgba(191, 221, 46, 0.04) !important; }

.cell-code {
  font-family: "JetBrains Mono", monospace;
  font-size:   0.775rem;
  color:       var(--muted);
  white-space: nowrap;
}

/* ── Brand badges ───────────────────────────────────────────── */
.bdg {
  display:       inline-flex;
  align-items:   center;
  padding:       0.15em 0.55em;
  border-radius: 4px;
  font-size:     0.72rem;
  font-weight:   500;
  white-space:   nowrap;
  line-height:   1.4;
  border:        1px solid transparent;
}
.bdg-lime   { background: rgba(191, 221, 46, 0.15); color: var(--lime);    border-color: rgba(191, 221, 46, 0.35); }
.bdg-error  { background: rgba(214, 69,  58, 0.13); color: #f07068;       border-color: rgba(214, 69, 58, 0.4); }
.bdg-warn   { background: rgba(224, 161, 43, 0.13); color: #e6b54a;       border-color: rgba(224, 161, 43, 0.4); }
.bdg-ok     { background: rgba(63,  163, 77, 0.13); color: #5ec96b;       border-color: rgba(63, 163, 77, 0.4); }
.bdg-purple { background: rgba(108, 92, 231, 0.13); color: #9d8ef5;       border-color: rgba(108, 92, 231, 0.4); }
.bdg-muted  { background: rgba(144, 151,168, 0.10); color: var(--muted);  border-color: rgba(144, 151,168, 0.25); }

[data-bs-theme="light"] .bdg-lime   { background: rgba(191,221,46,0.18); color: #5a6b04; }
[data-bs-theme="light"] .bdg-error  { background: rgba(214,69,58,0.10);  color: #a8291f; }
[data-bs-theme="light"] .bdg-warn   { background: rgba(224,161,43,0.12); color: #8a5a00; }
[data-bs-theme="light"] .bdg-ok     { background: rgba(63,163,77,0.11);  color: #1e7a2a; }
[data-bs-theme="light"] .bdg-purple { background: rgba(108,92,231,0.10); color: #3d2db5; }
[data-bs-theme="light"] .bdg-muted  { background: rgba(0,0,0,0.05);      color: var(--muted); }

/* Alta-priorità dot */
.dot-error {
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--error);
  margin-right:  5px;
  flex-shrink:   0;
}

/* ── Wordmark ────────────────────────────────────────────────── */
.hm-wordmark {
  font-family:  "Cabinet Grotesk", sans-serif;
  font-weight:  700;
  font-size:    0.9rem;
  color:        var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hm-wordmark img { height: 22px; opacity: 0.9; }
.hm-tagline {
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--muted);
}