/* ============================================================================
   Calibro · Editorial — Design Tokens + Bootstrap 5.3 Override
   ----------------------------------------------------------------------------
   Drop-in dopo bootstrap.css. Usa CSS Custom Properties native di Bootstrap
   5.3 — nessun rebuild SCSS richiesto. Italian agency tool, dense tables,
   PDF-friendly palette.

   Struttura:
     1. :root — token Calibro (light)
     2. [data-bs-theme="dark"] — override dark editoriale notturna
     3. Mapping Bootstrap (--bs-*) ai token Calibro
     4. Componenti — override mirati (button, table, card, form, badge…)
     5. Print — palette neutra B/N per stime/proforme
============================================================================ */

/* ---------- 1. Token Calibro (light) -------------------------------------- */

:root {
  /* Color · neutrals (carta avorio + inchiostro) */
  --clb-color-bg:           #f3ede1;
  --clb-color-surface:      #faf6ec;
  --clb-color-surface-2:    #ebe2cf;
  --clb-color-surface-sunk: #e8dfc9;

  --clb-color-border:       #d6c8aa;
  --clb-color-border-strong:#b9a37d;
  --clb-color-border-hair:  #e3d8be;

  --clb-color-text:         #2a221a;   /* inchiostro */
  --clb-color-text-2:       #6b5b48;
  --clb-color-text-3:       #9a8669;
  --clb-color-text-inv:     #faf6ec;

  /* Color · accent + semantic */
  --clb-color-accent:       #8a3a1f;   /* terracotta */
  --clb-color-accent-hover: #6f2d14;
  --clb-color-accent-bg:    #ead8c6;
  --clb-color-accent-fg:    #faf6ec;

  --clb-color-success:      #5e7a3a;
  --clb-color-success-bg:   #e1e7d0;
  --clb-color-warning:      #a8741a;
  --clb-color-warning-bg:   #f1e3c2;
  --clb-color-danger:       #9a2e22;
  --clb-color-danger-bg:    #efd0c7;
  --clb-color-info:         #4a6478;
  --clb-color-info-bg:      #d8dfe5;

  /* Type */
  --clb-font-display: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --clb-font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --clb-font-sans:    "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --clb-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --clb-text-xs:   11px;
  --clb-text-sm:   12.5px;
  --clb-text-base: 14px;
  --clb-text-md:   16px;
  --clb-text-lg:   20px;
  --clb-text-xl:   26px;
  --clb-text-2xl:  34px;
  --clb-text-3xl:  44px;

  --clb-leading-tight:  1.15;
  --clb-leading-normal: 1.5;
  --clb-leading-loose:  1.6;

  /* Spacing — multipli di 4px, Bootstrap-compatible */
  --clb-space-1: 4px;
  --clb-space-2: 8px;
  --clb-space-3: 12px;
  --clb-space-4: 16px;
  --clb-space-5: 20px;
  --clb-space-6: 24px;
  --clb-space-8: 32px;
  --clb-space-10: 40px;

  /* Radius — bassissimi, "stamperia" */
  --clb-radius-sm: 2px;
  --clb-radius-md: 3px;
  --clb-radius-lg: 4px;
  --clb-radius-pill: 999px;

  /* Border widths */
  --clb-border-width: 1px;
  --clb-border-width-strong: 1.5px;

  /* Shadow — quasi assenti, solo elevation discreta su dropdown/modal */
  --clb-shadow-sm: 0 1px 2px rgba(42, 34, 26, 0.06);
  --clb-shadow-md: 0 4px 12px rgba(42, 34, 26, 0.08), 0 0 0 1px rgba(42, 34, 26, 0.04);
  --clb-shadow-lg: 0 12px 32px rgba(42, 34, 26, 0.12), 0 0 0 1px rgba(42, 34, 26, 0.06);

  /* Focus ring */
  --clb-focus-ring: 0 0 0 3px rgba(138, 58, 31, 0.18);

  /* Component sizing */
  --clb-control-h-sm: 28px;
  --clb-control-h:    34px;
  --clb-control-h-lg: 40px;
}

/* ---------- 2. Dark mode (editoriale notturna) ---------------------------- */

[data-bs-theme="dark"] {
  --clb-color-bg:           #1a1612;
  --clb-color-surface:      #221d18;
  --clb-color-surface-2:    #2c261f;
  --clb-color-surface-sunk: #14110d;

  --clb-color-border:       #3a3128;
  --clb-color-border-strong:#5a4d3e;
  --clb-color-border-hair:  #2e2820;

  --clb-color-text:         #f0e7d6;
  --clb-color-text-2:       #b0a48d;
  --clb-color-text-3:       #756a55;
  --clb-color-text-inv:     #1a1612;

  --clb-color-accent:       #d97a52;   /* terracotta più chiara per leggibilità su scuro */
  --clb-color-accent-hover: #e89473;
  --clb-color-accent-bg:    #3a221a;
  --clb-color-accent-fg:    #1a1612;

  --clb-color-success:      #98b86a;
  --clb-color-success-bg:   #2a3320;
  --clb-color-warning:      #d9a64a;
  --clb-color-warning-bg:   #3a2e18;
  --clb-color-danger:       #d9665a;
  --clb-color-danger-bg:    #3a2520;
  --clb-color-info:         #8a9eaf;
  --clb-color-info-bg:      #232a30;

  --clb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --clb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --clb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --clb-focus-ring: 0 0 0 3px rgba(217, 122, 82, 0.25);
}

/* ---------- 3. Mapping ai token Bootstrap (--bs-*) ------------------------ */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--clb-font-body);
  --bs-body-font-size:   var(--clb-text-base);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--clb-leading-normal);
  --bs-body-color:       var(--clb-color-text);
  --bs-body-bg:          var(--clb-color-bg);
  --bs-secondary-color:  var(--clb-color-text-2);
  --bs-tertiary-color:   var(--clb-color-text-3);

  --bs-border-color:           var(--clb-color-border);
  --bs-border-color-translucent: var(--clb-color-border);
  --bs-border-radius:          var(--clb-radius-md);
  --bs-border-radius-sm:       var(--clb-radius-sm);
  --bs-border-radius-lg:       var(--clb-radius-lg);

  --bs-primary:        var(--clb-color-accent);
  --bs-primary-rgb:    138, 58, 31;
  --bs-primary-bg-subtle: var(--clb-color-accent-bg);
  --bs-primary-text-emphasis: var(--clb-color-accent);

  --bs-success:        var(--clb-color-success);
  --bs-warning:        var(--clb-color-warning);
  --bs-danger:         var(--clb-color-danger);
  --bs-info:           var(--clb-color-info);

  --bs-link-color:        var(--clb-color-accent);
  --bs-link-hover-color:  var(--clb-color-accent-hover);
  --bs-link-decoration:   underline;
  --bs-link-underline-offset: 2px;

  --bs-font-monospace: var(--clb-font-mono);
  --bs-code-color:     var(--clb-color-accent);

  --bs-focus-ring-color: rgba(138, 58, 31, 0.18);
  --bs-focus-ring-width: 3px;
}

/* ---------- 4. Componenti ------------------------------------------------- */

/* Headings — display serif */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--clb-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--clb-color-text);
}
h1, .h1 { font-size: var(--clb-text-2xl); line-height: var(--clb-leading-tight); }
h2, .h2 { font-size: var(--clb-text-xl); line-height: var(--clb-leading-tight); }
h3, .h3 { font-size: var(--clb-text-lg); }
h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--clb-font-sans);
  font-weight: 600;
  letter-spacing: 0;
}

/* Eyebrow / kicker — usalo sopra titoli */
.clb-eyebrow {
  font-family: var(--clb-font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--clb-color-text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Numerico tabulare ovunque ci siano cifre */
.clb-num,
.table td.clb-num,
.text-tabular {
  font-family: var(--clb-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn {
  font-family: var(--clb-font-sans);
  font-weight: 500;
  font-size: var(--clb-text-sm);
  letter-spacing: 0;
  border-radius: var(--clb-radius-sm);
  padding: 6px 14px;
  border-width: var(--clb-border-width);
  transition: background-color .12s, border-color .12s, color .12s;
}
.btn-primary {
  --bs-btn-bg: var(--clb-color-accent);
  --bs-btn-border-color: var(--clb-color-accent);
  --bs-btn-hover-bg: var(--clb-color-accent-hover);
  --bs-btn-hover-border-color: var(--clb-color-accent-hover);
  --bs-btn-color: var(--clb-color-accent-fg);
  --bs-btn-active-bg: var(--clb-color-accent-hover);
}
.btn-outline-secondary {
  --bs-btn-color: var(--clb-color-text);
  --bs-btn-border-color: var(--clb-color-border-strong);
  --bs-btn-hover-bg: var(--clb-color-surface);
  --bs-btn-hover-border-color: var(--clb-color-border-strong);
  --bs-btn-hover-color: var(--clb-color-text);
}
.btn-link {
  text-decoration: none;
  color: var(--clb-color-text-2);
  padding: 4px 8px;
}
.btn-link:hover { color: var(--clb-color-text); background: var(--clb-color-surface-2); border-radius: var(--clb-radius-sm); }

/* Forms */
.form-control,
.form-select {
  font-family: var(--clb-font-body);
  font-size: var(--clb-text-base);
  border-radius: var(--clb-radius-sm);
  border-color: var(--clb-color-border);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
  padding: 6px 10px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--clb-color-accent);
  box-shadow: var(--clb-focus-ring);
}
.form-label {
  font-family: var(--clb-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clb-color-text-3);
  margin-bottom: 4px;
}
.input-group-text {
  background: var(--clb-color-surface-2);
  border-color: var(--clb-color-border);
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
}

/* Tables — ledger style, dense ma respirante */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--clb-color-border);
  --bs-table-color: var(--clb-color-text);
  font-size: var(--clb-text-sm);
  border-collapse: collapse;
}
.table > thead {
  border-top: var(--clb-border-width-strong) solid var(--clb-color-text);
  border-bottom: var(--clb-border-width) solid var(--clb-color-border);
}
.table > thead th {
  font-family: var(--clb-font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--clb-color-text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 8px;
  background: transparent;
  border-bottom-width: var(--clb-border-width);
}
.table > tbody td {
  padding: 12px 8px;
  border-bottom: var(--clb-border-width) solid var(--clb-color-border);
  vertical-align: top;
}
.table-hover > tbody > tr:hover > td { background: var(--clb-color-surface); }
.table .text-end .clb-num,
.table td.clb-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Card — paper feel */
.card {
  background: var(--clb-color-surface);
  border: var(--clb-border-width) solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  box-shadow: none;
}
.card-header {
  background: transparent;
  border-bottom: var(--clb-border-width) solid var(--clb-color-border);
  font-family: var(--clb-font-display);
  font-style: italic;
  font-size: var(--clb-text-md);
  font-weight: 500;
  padding: 14px 18px;
}
.card-body { padding: 18px; }

/* Badge / pill — quiet, mai shouty */
.badge {
  font-family: var(--clb-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--clb-radius-sm);
  border: var(--clb-border-width) solid var(--clb-color-border-strong);
  background: var(--clb-color-surface);
  color: var(--clb-color-text);
}
.badge.bg-primary    { background: var(--clb-color-accent-bg) !important; color: var(--clb-color-accent); border-color: var(--clb-color-accent); }
.badge.bg-success    { background: var(--clb-color-success-bg) !important; color: var(--clb-color-success); border-color: var(--clb-color-success); }
.badge.bg-warning    { background: var(--clb-color-warning-bg) !important; color: var(--clb-color-warning); border-color: var(--clb-color-warning); }
.badge.bg-danger     { background: var(--clb-color-danger-bg) !important; color: var(--clb-color-danger); border-color: var(--clb-color-danger); }
.badge.bg-secondary  { background: var(--clb-color-surface-2) !important; color: var(--clb-color-text-2); border-color: var(--clb-color-border); }

/* Status dot helper — usa <span class="clb-status-dot clb-status-dot--success"></span> */
.clb-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--clb-color-text-3); }
.clb-status-dot--success { background: var(--clb-color-success); }
.clb-status-dot--warning { background: var(--clb-color-warning); }
.clb-status-dot--danger  { background: var(--clb-color-danger); }
.clb-status-dot--accent  { background: var(--clb-color-accent); }

/* Navbar */
.navbar {
  background: var(--clb-color-surface);
  border-bottom: var(--clb-border-width) solid var(--clb-color-border);
  padding: 10px 24px;
  min-height: 56px;
}
.navbar-brand {
  font-family: var(--clb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--clb-text-lg);
  letter-spacing: -0.01em;
  color: var(--clb-color-text);
}
.navbar-nav .nav-link {
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-sm);
  color: var(--clb-color-text-2);
  padding: 6px 10px;
  border-radius: var(--clb-radius-sm);
}
.navbar-nav .nav-link.active { color: var(--clb-color-text); background: var(--clb-color-surface-2); font-weight: 500; }

/* Sidebar pattern — usa <nav class="clb-sidebar"> */
.clb-sidebar {
  background: var(--clb-color-surface);
  border-right: var(--clb-border-width) solid var(--clb-color-border);
  padding: 16px 12px;
  font-family: var(--clb-font-sans);
}
.clb-sidebar__group {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clb-color-text-3);
  padding: 12px 8px 6px;
  border-bottom: var(--clb-border-width) solid var(--clb-color-border);
  margin-bottom: 4px;
}
.clb-sidebar__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: var(--clb-radius-sm);
  color: var(--clb-color-text-2);
  font-size: var(--clb-text-sm);
  text-decoration: none;
}
.clb-sidebar__item:hover { background: var(--clb-color-surface-2); color: var(--clb-color-text); }
.clb-sidebar__item.active { background: var(--clb-color-surface-2); color: var(--clb-color-text); font-weight: 500; }
.clb-sidebar__count { margin-left: auto; font-family: var(--clb-font-mono); font-size: 10px; color: var(--clb-color-text-3); }

/* Modal / Dropdown — soft elevation */
.modal-content {
  background: var(--clb-color-surface);
  border: var(--clb-border-width) solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  box-shadow: var(--clb-shadow-lg);
}
.modal-header { border-bottom: var(--clb-border-width) solid var(--clb-color-border); padding: 16px 20px; }
.modal-title { font-family: var(--clb-font-display); font-style: italic; font-weight: 500; font-size: var(--clb-text-lg); }

.dropdown-menu {
  background: var(--clb-color-surface);
  border: var(--clb-border-width) solid var(--clb-color-border);
  border-radius: var(--clb-radius-md);
  box-shadow: var(--clb-shadow-md);
  padding: 4px;
  font-family: var(--clb-font-sans);
  font-size: var(--clb-text-sm);
}
.dropdown-item { padding: 6px 10px; border-radius: var(--clb-radius-sm); color: var(--clb-color-text); }
.dropdown-item:hover { background: var(--clb-color-surface-2); }

/* Alert — same shape as badge but full width */
.alert {
  border-radius: var(--clb-radius-md);
  border: var(--clb-border-width) solid var(--clb-color-border);
  padding: 12px 16px;
  font-family: var(--clb-font-body);
  font-size: var(--clb-text-base);
}
.alert-primary { background: var(--clb-color-accent-bg); color: var(--clb-color-accent); border-color: var(--clb-color-accent); }
.alert-success { background: var(--clb-color-success-bg); color: var(--clb-color-success); border-color: var(--clb-color-success); }
.alert-warning { background: var(--clb-color-warning-bg); color: var(--clb-color-warning); border-color: var(--clb-color-warning); }
.alert-danger  { background: var(--clb-color-danger-bg); color: var(--clb-color-danger); border-color: var(--clb-color-danger); }

/* HTMX swap states */
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-swapping { opacity: 0.5; transition: opacity .12s; }

/* Editable row pattern (per stime / timesheet) */
.clb-row-editable td { transition: background-color .1s; }
.clb-row-editable:hover td { background: var(--clb-color-surface); }
.clb-row-editable td.is-editing { background: var(--clb-color-surface); box-shadow: inset 0 0 0 1px var(--clb-color-accent); }

/* Section header pattern (vedi mockup direzione) */
.clb-section-hd {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px;
  border-bottom: var(--clb-border-width) solid var(--clb-color-border);
  margin-bottom: 16px;
}
.clb-section-hd__title {
  font-family: var(--clb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--clb-text-lg);
  color: var(--clb-color-text);
}
.clb-section-hd__sub {
  font-family: var(--clb-font-sans);
  font-size: 11px;
  color: var(--clb-color-text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.clb-section-hd__actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- 5. Print — stime / proforme in B/N --------------------------- */

@media print {
  :root {
    --clb-color-bg: #ffffff;
    --clb-color-surface: #ffffff;
    --clb-color-surface-2: #f4f4f4;
    --clb-color-border: #888888;
    --clb-color-border-strong: #000000;
    --clb-color-text: #000000;
    --clb-color-text-2: #333333;
    --clb-color-text-3: #666666;
    --clb-color-accent: #000000;
    --clb-color-accent-bg: #eeeeee;
  }
  .navbar, .clb-sidebar, .btn, .clb-section-hd__actions { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }
  .table > thead { border-top-color: #000; }
  .card { box-shadow: none; border-color: #888; break-inside: avoid; }
  h1, h2, h3 { color: #000; }
  .badge { border-color: #000; background: #fff !important; color: #000 !important; }
}