/* Calibro — app.css
 *
 * Override locali, specifici di app, da APPLICARE DOPO calibro-editorial.css.
 * Per regola: NIENTE colori hardcoded qui. Solo combinazioni di token --clb-*
 * o utility grid/spacing su scenari non coperti dal design system.
 *
 * Se ti accorgi di scrivere un hex letterale, fermati: aggiungi un token in
 * calibro-editorial.css e usalo da qui via var(--clb-*).
 */

/* font-feature-settings utili per testi tabellari + leggibilità accenti */
body {
  font-feature-settings: "kern", "liga";
}

/* Numeri tabellari OVUNQUE compaiano dentro elementi .clb-num o tabelle */
.clb-num,
.table .clb-num,
table.table tbody td.clb-num,
table.table thead th.text-end {
  font-feature-settings: "tnum", "kern";
}

/* ===== Sidebar (laterale fissa su >= md) =====
   Width non gestita dai token: la fissiamo qui (220px = misura editoriale
   stretta). Su < md la sidebar inline è nascosta — la sua copia funzionale
   vive nell'offcanvas (vedi base.html + .clb-sidebar-offcanvas sotto). */
.clb-sidebar {
  width: 220px;
  flex-shrink: 0;
  min-height: 100%;
}

@media (max-width: 767.98px) {
  /* Nasconde solo la sidebar inline DIRETTAMENTE figlia di .d-flex
     (il layout split). NON nasconde la sidebar dentro l'offcanvas. */
  .d-flex > .clb-sidebar { display: none; }
}

/* ===== Sidebar offcanvas (mobile only) =====
   La stessa _sidebar.html viene inclusa anche dentro l'offcanvas Bootstrap.
   Qui resettiamo la width fissa (l'offcanvas ha la sua) e il border lateral
   destro (già fornito dall'offcanvas come ombra). */
.clb-sidebar-offcanvas .clb-sidebar {
  width: 100%;
  min-height: 0;
  border-right: 0;
}

.clb-sidebar-offcanvas {
  background: var(--clb-color-surface);
  border-right: 1px solid var(--clb-color-border);
  width: 280px;
}

/* ===== Theme toggle =====
   Bottone quadrato 30×30 per coerenza editoriale. */
.clb-theme-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger mobile: nessun bordo, eredita color text del navbar */
.clb-nav-hamburger {
  color: var(--clb-color-text);
  text-decoration: none;
}
.clb-nav-hamburger:hover {
  color: var(--clb-color-accent);
}

/* ===== Link generici =====
   Bootstrap 5.3 costruisce <a> color via rgba(var(--bs-link-color-rgb)),
   non --bs-link-color. Forziamo qui il terracotta del design system,
   con font-weight 500 per dare gerarchia visiva ai link nel testo body
   (.text-reset/.btn/.nav-link non sono toccati: hanno il loro color). */
a:not(.btn):not(.nav-link):not(.text-reset):not(.dropdown-item):not(.page-link):not(.breadcrumb-item):not([class*="clb-sort-link"]),
.breadcrumb-item a,
.card a:not(.btn):not(.text-reset),
table a:not(.btn):not(.text-reset) {
  color: var(--clb-color-accent);
  font-weight: 500;
  text-decoration-color: color-mix(in srgb, var(--clb-color-accent) 35%, transparent);
  text-underline-offset: 2px;
}
a:not(.btn):not(.nav-link):not(.text-reset):not(.dropdown-item):not(.page-link):not(.breadcrumb-item):not([class*="clb-sort-link"]):hover,
.breadcrumb-item a:hover,
.card a:not(.btn):not(.text-reset):hover,
table a:not(.btn):not(.text-reset):hover {
  color: var(--clb-color-accent-hover);
  text-decoration-color: var(--clb-color-accent-hover);
}

/* ===== Login page =====
   Full-screen senza chrome dell'app, sfumatura tenue + card centrata. */
.clb-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--clb-color-accent) 8%, transparent), transparent 50%),
    radial-gradient(circle at 80% 100%, color-mix(in srgb, var(--clb-color-accent) 6%, transparent), transparent 50%),
    var(--clb-color-bg);
}
.clb-login-card {
  width: 100%;
  max-width: 440px;
}
.clb-login-logo {
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* ===== Timer live (cronometro topbar) =====
   Stato running: pallino rosso pulsante + cronometro monospace + project label. */
.clb-timer__pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clb-color-danger, #c0392b);
  animation: clb-timer-pulse 1.4s ease-in-out infinite;
}
@keyframes clb-timer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}
.clb-timer__elapsed {
  font-family: var(--clb-font-mono);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--clb-color-text);
  line-height: 1.1;
}
.clb-timer__project {
  line-height: 1.1;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Sort link (header tabella ordinabile) =====
   Pattern editorial: il <th> diventa cliccabile, freccia minuscola accanto
   al label. Inattivo: ↕ tenue. Attivo: ↑ asc / ↓ desc terracotta. */
.clb-sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.clb-sort-link:hover {
  color: var(--clb-color-text);
}
.clb-sort-link:hover .clb-sort-arrow--muted {
  color: var(--clb-color-text-2);
}
.clb-sort-link--active {
  color: var(--clb-color-text);
}
.clb-sort-arrow {
  font-family: var(--clb-font-mono);
  font-size: 9px;
  letter-spacing: 0;
  display: inline-block;
}
.clb-sort-arrow--active {
  color: var(--clb-color-accent);
}
.clb-sort-arrow--muted {
  color: var(--clb-color-text-3);
  opacity: 0.55;
}