/* ===================================================================
   Il Ricambio Usato — Design System  (Light · Alto contrasto FORTE)
   -------------------------------------------------------------------
   Drop-in replacement di assets/design.css.
   Compatibilità API: invariata. Stesse classi, stesse variabili,
   stessi nomi. Cambiano solo i VALORI di --fg-*, --line*, semantic,
   striping/hover tabella e i pesi di alcuni label.

   Cosa cambia rispetto alla versione precedente:
   - --fg-3 da #9a9890 (≈3.0:1, sotto AA) a #3c3a33 (≈9.5:1, AAA)
   - --fg-2 da #4e4d48 a #1a1916 (testo secondario al pari del primario)
   - --line da rgba(0,0,0,.08) a rgba(0,0,0,.26)   (bordi card visibili)
   - --line-2 da .14 a .42                          (input/divider netti)
   - Semantic --ok/--warn/--err/--info → varianti scure (text contrast)
   - Striping tabella .02 → .06 · hover .03 → .10
   - Channel pill inattiva: sfondo bianco, testo --fg-2, bordo --line-2
   - Form label / table th: peso 700, colore --fg-2
   - Sidebar nav inattiva: --fg-2 (era --fg-2 più chiaro) + weight 500
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Backgrounds */
  --bg:        #e7e2d2;
  --surface:   #ffffff;
  --surface-2: #ddd7c5;
  --surface-3: #c9c2ad;

  /* Borders */
  --line:   rgba(0,0,0,0.26);
  --line-2: rgba(0,0,0,0.42);

  /* Text */
  --fg:   #000000;
  --fg-2: #1a1916;
  --fg-3: #3c3a33;

  /* Accent — signal yellow (scurito per testo su acceso) */
  --accent:      #d99e00;
  --accent-dark: #8a6800;
  --accent-ink:  #000000;
  --accent-soft: rgba(217,158,0,0.22);

  /* Semantic */
  --ok:   #166534;
  --warn: #92400e;
  --err:  #991b1b;
  --info: #1e40af;

  /* Typography */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shape */
  --radius:    12px;
  --radius-sm: 8px;
  --pad:       20px;

  /* Shadows */
  --shadow-sm: 0 1px 0 rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.10);
  --shadow:    0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Bootstrap variable overrides ───────────────────────────────── */
:root {
  --bs-body-bg:              var(--bg);
  --bs-body-color:           var(--fg);
  --bs-border-color:         var(--line);
  --bs-border-color-translucent: var(--line);

  --bs-secondary-bg:         var(--surface-2);
  --bs-tertiary-bg:          var(--surface-3);
  --bs-secondary-color:      var(--fg-2);
  --bs-tertiary-color:       var(--fg-2);  /* era fg-3 — text-muted ora AA */

  --bs-card-bg:              var(--surface);
  --bs-card-border-color:    var(--line);
  --bs-card-border-radius:   var(--radius);
  --bs-card-box-shadow:      var(--shadow-sm);

  --bs-primary:              #000000;
  --bs-primary-rgb:          0,0,0;
  --bs-link-color:           var(--info);
  --bs-link-color-rgb:       30,64,175;
  --bs-font-sans-serif:      var(--font-sans);
  --bs-font-monospace:       var(--font-mono);
  --bs-border-radius:        var(--radius-sm);
  --bs-border-radius-lg:     var(--radius);
  --bs-border-radius-sm:     6px;

  --bs-table-bg:             transparent;
  --bs-table-striped-bg:     rgba(0,0,0,0.06);
  --bs-table-hover-bg:       rgba(0,0,0,0.10);

  --bs-form-control-bg:      var(--surface);
  --bs-input-bg:             var(--surface);
}

/* ── Bootstrap component overrides ─────────────────────────────── */
body { font-family: var(--font-sans); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}
.card-body { padding: var(--pad); }

/* Tables */
.table { color: var(--fg); --bs-table-bg: transparent; }
.table-light { --bs-table-bg: var(--surface-2); color: var(--fg); }
.table th {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--fg-2);                       /* era --fg-3 */
  font-weight: 700;                          /* era 500 */
  border-bottom: 1px solid var(--line-2);    /* più netto */
  background: var(--surface-2);
}
.table td { border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--fg); }
.table-hover > tbody > tr:hover > td { background: var(--surface-2); }

/* Form controls */
.form-control, .form-select {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm) !important;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent-dark);
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.form-control::placeholder { color: var(--fg-3); }
.form-label {
  font-size: 11px; font-weight: 700;        /* era 600 */
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--fg-2);                        /* era --fg-3 */
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.form-check-input:checked { background-color: var(--fg); border-color: var(--fg); }

/* Buttons */
.btn { border-radius: var(--radius-sm) !important; font-weight: 500; font-family: var(--font-sans); font-size: 13.5px; transition: background .12s, transform .08s, border-color .12s; }
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--fg); border-color: var(--fg); color: #fff; }
.btn-primary:hover { background: #2e2d2a; border-color: #2e2d2a; color: #fff; }

.btn-outline-primary { color: var(--fg); border-color: var(--line-2); }
.btn-outline-primary:hover { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); }

.btn-outline-secondary { color: var(--fg-2); border-color: var(--line-2); background: transparent; }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); }

.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn-danger  { background: var(--err); border-color: var(--err); color: #fff; }

.btn-outline-danger { color: var(--err); border-color: rgba(153,27,27,.42); background: transparent; }
.btn-outline-danger:hover { background: rgba(153,27,27,.10); color: var(--err); border-color: rgba(153,27,27,.55); }

.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-lg { font-size: 15px; padding: 12px 20px; }

/* Badges */
.badge {
  font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: 0.04em;
  border-radius: 6px; padding: 3px 7px;
  border: 1px solid transparent;
}
.badge.bg-primary   { background: var(--info) !important; color: #fff; }
.badge.bg-secondary { background: var(--surface-2) !important; color: var(--fg) !important; border-color: var(--line-2); }
.badge.bg-success   { background: rgba(22,101,52,.16) !important; color: var(--ok) !important;   border-color: rgba(22,101,52,.40); }
.badge.bg-warning   { background: rgba(146,64,14,.16) !important; color: var(--warn) !important; border-color: rgba(146,64,14,.40); }
.badge.bg-danger    { background: rgba(153,27,27,.14) !important; color: var(--err) !important;  border-color: rgba(153,27,27,.38); }
.badge.bg-info      { background: rgba(30,64,175,.14) !important; color: var(--info) !important; border-color: rgba(30,64,175,.38); }
.badge.bg-light     { background: var(--surface-2) !important;  color: var(--fg) !important;    border-color: var(--line-2); }

/* Alerts */
.alert { border-radius: var(--radius-sm); border: 1px solid; font-size: 13.5px; padding: 12px 16px; }
.alert-danger  { background: rgba(153,27,27,.08);  border-color: rgba(153,27,27,.40);  color: #7f1d1d; }
.alert-warning { background: rgba(146,64,14,.10);  border-color: rgba(146,64,14,.42);  color: #7c2d12; }
.alert-success { background: rgba(22,101,52,.09);  border-color: rgba(22,101,52,.40);  color: #14532d; }
.alert-info    { background: rgba(30,64,175,.08);  border-color: rgba(30,64,175,.40);  color: #172554; }

/* Progress */
.progress { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; height: 8px; overflow:hidden; }
.progress-bar { background: var(--fg); border-radius: 999px; }
.progress-bar.bg-primary { background: var(--info) !important; }

/* Nav tabs */
.nav-tabs { border-bottom: 1px solid var(--line-2); }
.nav-tabs .nav-link { color: var(--fg-2); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--fg); border-bottom-color: var(--line-2); background: transparent; }
.nav-tabs .nav-link.active { color: var(--fg); border-bottom: 2px solid var(--fg); background: transparent; font-weight: 700; }

/* Modals */
.modal-content { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }

/* Dropdown */
.dropdown-menu { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.dropdown-item { font-size: 13.5px; color: var(--fg); }
.dropdown-item:hover { background: var(--surface-2); color: var(--fg); }

/* ── Wordmark ────────────────────────────────────────────────────── */
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.025em; color: var(--fg); text-decoration: none; }
.wordmark-glyph { width: 26px; height: 26px; border-radius: 7px; background: var(--fg); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: -0.04em; flex-shrink: 0; }
.wordmark-glyph::after { content: "R/U"; }
.wordmark-text { font-size: 15px; }
.wordmark-text em { font-style: normal; color: var(--fg-2); font-weight: 400; margin-left: 1px; }

/* ── Buttons (design system) ─────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-sans); font-weight: 500; font-size: 13.5px;
  letter-spacing: -0.005em; padding: 9px 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--fg);
  cursor: pointer; text-decoration: none;
  transition: background .12s, transform .08s, border-color .12s;
  white-space: nowrap;
}
.ds-btn:hover  { background: var(--surface-2); color: var(--fg); }
.ds-btn:active { transform: scale(0.98); }

.ds-btn-primary { background: var(--fg); color: #fff; border-color: transparent; font-weight: 600; }
.ds-btn-primary:hover { background: #2e2d2a; color: #fff; }

.ds-btn-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.ds-btn-accent:hover { background: var(--accent-dark); color: #fff; }

.ds-btn-ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.ds-btn-ghost:hover { background: var(--surface-2); color: var(--fg); }

.ds-btn-danger { background: rgba(153,27,27,.12); border-color: rgba(153,27,27,.38); color: var(--err); }
.ds-btn-danger:hover { background: rgba(153,27,27,.18); }

.ds-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.ds-btn-lg { padding: 13px 22px; font-size: 15px; border-radius: var(--radius); }
.ds-btn-block { width: 100%; }

/* ── Cards (DS) ──────────────────────────────────────────────────── */
.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow-sm); }

/* ── Chips ───────────────────────────────────────────────────────── */
.ds-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--line-2);
}
.ds-chip-ok     { background: rgba(22,101,52,.12);  color: var(--ok);   border-color: rgba(22,101,52,.40); }
.ds-chip-warn   { background: rgba(146,64,14,.13);  color: var(--warn); border-color: rgba(146,64,14,.42); }
.ds-chip-err    { background: rgba(153,27,27,.11);  color: var(--err);  border-color: rgba(153,27,27,.38); }
.ds-chip-info   { background: rgba(30,64,175,.11);  color: var(--info); border-color: rgba(30,64,175,.38); }
.ds-chip-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ── Form fields (DS) ───────────────────────────────────────────── */
.ds-field {
  display: block; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 11px 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.ds-field:focus { border-color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-field::placeholder { color: var(--fg-3); }
.ds-field-label {
  display: block; font-size: 10.5px;
  font-weight: 700;                       /* era 600 */
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--fg-2);                     /* era --fg-3 */
  margin-bottom: 6px;
  font-family: var(--font-mono);
}

/* ── Eyebrow / mono utils ────────────────────────────────────────── */
.ds-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-2); font-weight: 600; }
.ds-mono { font-family: var(--font-mono); }

/* ── Image placeholder ───────────────────────────────────────────── */
.ds-img-ph { background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--fg-2); }

/* ── Divider ─────────────────────────────────────────────────────── */
.ds-hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── KPI card ────────────────────────────────────────────────────── */
.ds-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.ds-kpi-value { font-family: var(--font-sans); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 4px; color: var(--fg); }
.ds-kpi-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); font-weight: 700; }
.ds-kpi-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }

/* ── Table (DS) ──────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg-2); font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2);
  text-align: left; background: var(--surface-2);
}
.ds-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--fg); }
.ds-table tbody tr:nth-child(2n) td { background: rgba(0,0,0,0.04); }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--surface-2); }

/* ── Sidebar nav ─────────────────────────────────────────────────── */
.ds-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--fg-2);                     /* prima fg-2 più chiaro */
  text-decoration: none;
  font-weight: 500;                       /* prima 400 — più leggibile */
  transition: background .12s, color .12s;
}
.ds-nav-item:hover { background: var(--surface-2); color: var(--fg); }
.ds-nav-item.active { background: var(--fg); color: #fff; font-weight: 600; }
.ds-nav-item .ds-nav-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-2); font-weight: 600;   /* prima fg-3 + opacity .8 */
}
.ds-nav-item.active .ds-nav-count { color: rgba(255,255,255,.78); }
.ds-nav-section {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-2);   /* prima fg-3 */
  padding: 14px 12px 4px; margin: 0; font-weight: 700;
}

/* ── Shop background texture (invariata) ─────────────────────────── */
.shop-bg { position: relative; }
.shop-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 260'%3E%3Crect x='30' y='20' width='12' height='30' rx='3' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3Crect x='33' y='50' width='6' height='16' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3Cline x1='36' y1='66' x2='36' y2='74' stroke='%231a1916' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='60' r='34' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='60' r='10' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3Cline x1='120' y1='50' x2='120' y2='26' stroke='%231a1916' stroke-width='1.5'/%3E%3Cline x1='111' y1='55' x2='88' y2='44' stroke='%231a1916' stroke-width='1.5'/%3E%3Cline x1='129' y1='55' x2='152' y2='44' stroke='%231a1916' stroke-width='1.5'/%3E%3Ccircle cx='260' cy='55' r='38' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3Ccircle cx='260' cy='55' r='18' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3Ccircle cx='260' cy='55' r='5' fill='none' stroke='%231a1916' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 360px 260px; z-index: 0;
}
.shop-bg > * { position: relative; z-index: 1; }

/* ── Channel pills ───────────────────────────────────────────────── */
.channel-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  border: 1px solid var(--line-2);
  background: var(--surface); color: var(--fg-2);   /* era surface-2/fg-3 */
  white-space: nowrap;
}
.channel-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); flex-shrink: 0; }
.channel-pill.on { background: rgba(22,101,52,.12); color: var(--ok); border-color: rgba(22,101,52,.42); }
.channel-pill.on::before { background: var(--ok); }