/* ══════════════════════════════════════════════════════════════════════════
   IntaroSport — componente comune (pe token-urile din tokens.css)
   ══════════════════════════════════════════════════════════════════════════
   Ordinea de incarcare: tokens.css -> bootstrap -> components.css -> intaro_style.css

   1. Puntea spre Bootstrap (--bs-*): Bootstrap ramane fundatia, doar ii dam
      culorile noastre. Fara !important: tematizarea merge prin variabilele lui.
   2. Straturi si elemente plutitoare (z-index, colturi, meniul de jos)
   3. Componente: butoane, carduri, header de pagina, pastile de stare,
      alerte, formulare, tabele (inclusiv .is-table-stack opt-in), modale si
      bottom sheet, empty state, skeleton, stat card, tab-uri.

   Clasele noi au prefixul is-. Clasele Bootstrap (.btn-primary, .card,
   .badge, .alert-*) sunt tematizate, ca markup-ul existent sa arate unitar
   fara modificari in template-uri.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Puntea Bootstrap ─────────────────────────────────────────────────── */
/* Valorile -rgb trebuie scrise literal: Bootstrap le compune in
   rgba(var(--bs-primary-rgb), .x). */
:root {
  --bs-primary: #0b1b45;           --bs-primary-rgb: 11, 27, 69;
  --bs-secondary: #64748b;         --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #16a34a;           --bs-success-rgb: 22, 163, 74;
  --bs-info: #2563eb;              --bs-info-rgb: 37, 99, 235;
  --bs-warning: #EABE33;           --bs-warning-rgb: 234, 190, 51;
  --bs-danger: #dc2626;            --bs-danger-rgb: 220, 38, 38;
  --bs-light: #f8fafc;             --bs-light-rgb: 248, 250, 252;
  --bs-dark: #0f172a;              --bs-dark-rgb: 15, 23, 42;

  --bs-primary-text-emphasis: var(--is-navy-900);
  --bs-primary-bg-subtle: var(--is-navy-100);
  --bs-primary-border-subtle: #c3cce0;
  --bs-secondary-text-emphasis: var(--is-slate-700);
  --bs-secondary-bg-subtle: var(--is-slate-100);
  --bs-secondary-border-subtle: var(--is-slate-200);
  --bs-success-text-emphasis: var(--is-success-strong);
  --bs-success-bg-subtle: var(--is-success-bg);
  --bs-success-border-subtle: var(--is-success-border);
  --bs-info-text-emphasis: var(--is-info-strong);
  --bs-info-bg-subtle: var(--is-info-bg);
  --bs-info-border-subtle: var(--is-info-border);
  --bs-warning-text-emphasis: var(--is-warning-strong);
  --bs-warning-bg-subtle: var(--is-warning-bg);
  --bs-warning-border-subtle: var(--is-warning-border);
  --bs-danger-text-emphasis: var(--is-danger-strong);
  --bs-danger-bg-subtle: var(--is-danger-bg);
  --bs-danger-border-subtle: var(--is-danger-border);
  --bs-light-text-emphasis: var(--is-slate-700);
  --bs-light-bg-subtle: var(--is-slate-50);
  --bs-light-border-subtle: var(--is-slate-200);
  --bs-dark-text-emphasis: var(--is-slate-800);
  --bs-dark-bg-subtle: var(--is-slate-300);
  --bs-dark-border-subtle: var(--is-slate-400);

  --bs-font-sans-serif: var(--is-font-body);
  --bs-font-monospace: var(--is-font-mono);
  --bs-body-font-family: var(--is-font-body);
  --bs-body-color: var(--is-text);           --bs-body-color-rgb: 17, 24, 39;
  /* --bs-body-bg = SUPRAFATA (alb): Bootstrap il foloseste ca fundal pentru
     celule de tabel, inputuri, carduri, modale si dropdown-uri. Fundalul
     paginii (--is-bg) e pus direct pe body in intaro_style.css. */
  --bs-body-bg: var(--is-surface);           --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: var(--is-slate-950);  --bs-emphasis-color-rgb: 15, 23, 42;
  --bs-secondary-color: var(--is-text-muted);
  --bs-secondary-bg: var(--is-slate-200);
  --bs-tertiary-color: var(--is-text-subtle);
  --bs-tertiary-bg: var(--is-surface-muted);
  --bs-heading-color: inherit;
  --bs-link-color: var(--is-link);           --bs-link-color-rgb: 26, 58, 122;
  --bs-link-hover-color: var(--is-link-hover); --bs-link-hover-color-rgb: 11, 27, 69;
  --bs-code-color: var(--is-cat-tourney);
  --bs-highlight-bg: var(--is-gold-100);
  --bs-border-color: var(--is-border);
  --bs-border-color-translucent: rgba(var(--is-navy-900-rgb), .12);
  --bs-border-radius-sm: var(--is-radius-xs);
  --bs-border-radius: var(--is-radius-sm);
  --bs-border-radius-lg: var(--is-radius-md);
  --bs-border-radius-xl: var(--is-radius-lg);
  --bs-border-radius-xxl: var(--is-radius-lg);
  --bs-border-radius-pill: var(--is-radius-pill);
  --bs-box-shadow: var(--is-shadow-md);
  --bs-box-shadow-sm: var(--is-shadow-xs);
  --bs-box-shadow-lg: var(--is-shadow-lg);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: .45;
  --bs-focus-ring-color: var(--is-focus-color);
  --bs-form-valid-color: var(--is-success-strong);
  --bs-form-valid-border-color: var(--is-success);
  --bs-form-invalid-color: var(--is-danger);
  --bs-form-invalid-border-color: var(--is-danger);
}

/* ── 2. Straturi si elemente plutitoare ──────────────────────────────────── */
/* Meniul de jos (telefon). Cand e in pagina, elementele plutitoare urca
   deasupra lui, iar continutul primeste loc dedesubt. */
@media (max-width: 991.98px) {
  body:has(.is-bottomnav, .bottom-nav, [data-bottom-nav]) {
    --is-bottomnav-offset: var(--is-bottomnav-h);
  }
}

/* Bootstrap: aceleasi niveluri, citite din token-uri */
.dropdown-menu { --bs-dropdown-zindex: var(--is-z-dropdown); }
.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg { --bs-offcanvas-zindex: var(--is-z-drawer); }
.modal { --bs-modal-zindex: var(--is-z-modal); }
.modal-backdrop { --bs-backdrop-zindex: var(--is-z-modal-backdrop); }
.toast-container { z-index: var(--is-z-toast); }

/* Bannerul de cookie: jos, peste continut si peste butoanele plutitoare,
   dar SUB modale (un modal deschis nu mai ramane acoperit de el). */
.is-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--is-bottomnav-offset);
  z-index: var(--is-z-banner);
  padding-bottom: calc(var(--is-space-4) + var(--is-safe-bottom));
}
/* Cat timp bannerul e pe ecran, cardul promo nu mai urca peste el: un singur
   lucru jos odata. */
body:has(#cookieBanner) .promo-adulti { display: none; }

/* Colturile: chat SAU bug (nu apar niciodata impreuna: chatul e pentru
   jucatori, bug-ul pentru personal) stau dreapta-jos; promo urca deasupra
   lor cand exista un buton plutitor. */
body:has(.chat-widget-btn, .bug-report-btn) .promo-adulti {
  bottom: calc(var(--is-fab-bottom) + var(--is-fab-size) + var(--is-fab-gap));
}

/* ── 3. Butoane ──────────────────────────────────────────────────────────── */
.btn {
  --bs-btn-font-weight: var(--is-fw-semibold);
  --bs-btn-border-radius: var(--is-radius-sm);
  --bs-btn-focus-box-shadow: var(--is-focus-ring);
  gap: var(--is-space-2);
}
.btn-sm {
  --bs-btn-padding-y: .3125rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-font-size: var(--is-fs-sm);
  --bs-btn-border-radius: var(--is-radius-sm);
}
.btn-lg {
  --bs-btn-padding-y: .6875rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: var(--is-fs-md);
  --bs-btn-border-radius: var(--is-radius-sm);
}
/* Tinte de atingere >= 44px pe telefon (16px * 1.5 + 2*9px + 2px bordura) */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-lg):not(.btn-link):not(.btn-close) { --bs-btn-padding-y: 9px; }
}

.btn-primary {
  --bs-btn-color: var(--is-text-inverse);
  --bs-btn-bg: var(--is-navy-900);
  --bs-btn-border-color: var(--is-navy-900);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-navy-800);
  --bs-btn-hover-border-color: var(--is-navy-800);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-navy-700);
  --bs-btn-active-border-color: var(--is-navy-700);
  --bs-btn-disabled-color: var(--is-text-inverse);
  --bs-btn-disabled-bg: var(--is-navy-900);
  --bs-btn-disabled-border-color: var(--is-navy-900);
}
/* Accent: CTA-ul principal pe marketing si pe fundal inchis. .btn-gold e
   numele vechi. */
.btn-accent, .btn-gold {
  --bs-btn-color: var(--is-on-accent);
  --bs-btn-bg: var(--is-accent);
  --bs-btn-border-color: var(--is-accent);
  --bs-btn-hover-color: var(--is-on-accent);
  --bs-btn-hover-bg: var(--is-accent-hover);
  --bs-btn-hover-border-color: var(--is-accent-hover);
  --bs-btn-active-color: var(--is-on-accent);
  --bs-btn-active-bg: var(--is-accent-hover);
  --bs-btn-active-border-color: var(--is-accent-hover);
  --bs-btn-disabled-color: var(--is-on-accent);
  --bs-btn-disabled-bg: var(--is-accent);
  --bs-btn-disabled-border-color: var(--is-accent);
}
/* Secundar: contur neutru */
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--is-slate-800);
  --bs-btn-bg: var(--is-surface);
  --bs-btn-border-color: var(--is-border-strong);
  --bs-btn-hover-color: var(--is-navy-900);
  --bs-btn-hover-bg: var(--is-slate-100);
  --bs-btn-hover-border-color: var(--is-slate-400);
  --bs-btn-active-color: var(--is-navy-900);
  --bs-btn-active-bg: var(--is-slate-200);
  --bs-btn-active-border-color: var(--is-slate-400);
  --bs-btn-disabled-color: var(--is-slate-400);
  --bs-btn-disabled-bg: var(--is-surface);
  --bs-btn-disabled-border-color: var(--is-slate-200);
}
.btn-outline-secondary { --bs-btn-bg: transparent; }
/* Ghost: fara contur, pentru actiuni tertiare */
.btn-ghost {
  --bs-btn-color: var(--is-navy-900);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--is-navy-900);
  --bs-btn-hover-bg: var(--is-slate-100);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--is-navy-900);
  --bs-btn-active-bg: var(--is-slate-200);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--is-slate-400);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
}
.btn-success {
  --bs-btn-color: var(--is-text-inverse);
  --bs-btn-bg: var(--is-success);
  --bs-btn-border-color: var(--is-success);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-success-hover);
  --bs-btn-hover-border-color: var(--is-success-hover);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-success-strong);
  --bs-btn-active-border-color: var(--is-success-strong);
  --bs-btn-disabled-color: var(--is-text-inverse);
  --bs-btn-disabled-bg: var(--is-success);
  --bs-btn-disabled-border-color: var(--is-success);
}
.btn-danger {
  --bs-btn-color: var(--is-text-inverse);
  --bs-btn-bg: var(--is-danger);
  --bs-btn-border-color: var(--is-danger);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-danger-hover);
  --bs-btn-hover-border-color: var(--is-danger-hover);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-danger-strong);
  --bs-btn-active-border-color: var(--is-danger-strong);
  --bs-btn-disabled-color: var(--is-text-inverse);
  --bs-btn-disabled-bg: var(--is-danger);
  --bs-btn-disabled-border-color: var(--is-danger);
}
.btn-warning {
  --bs-btn-color: var(--is-on-accent);
  --bs-btn-bg: var(--is-accent);
  --bs-btn-border-color: var(--is-accent);
  --bs-btn-hover-color: var(--is-on-accent);
  --bs-btn-hover-bg: var(--is-accent-hover);
  --bs-btn-hover-border-color: var(--is-accent-hover);
  --bs-btn-active-color: var(--is-on-accent);
  --bs-btn-active-bg: var(--is-accent-hover);
  --bs-btn-active-border-color: var(--is-accent-hover);
}
.btn-info {
  --bs-btn-color: var(--is-text-inverse);
  --bs-btn-bg: var(--is-info);
  --bs-btn-border-color: var(--is-info);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-info-strong);
  --bs-btn-hover-border-color: var(--is-info-strong);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-info-strong);
  --bs-btn-active-border-color: var(--is-info-strong);
}
/* Contur: text si bordura in culoarea variantei, plin la hover */
.btn-outline-primary {
  --bs-btn-color: var(--is-navy-900);
  --bs-btn-border-color: var(--is-navy-900);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-navy-900);
  --bs-btn-hover-border-color: var(--is-navy-900);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-navy-800);
  --bs-btn-active-border-color: var(--is-navy-800);
  --bs-btn-disabled-color: var(--is-navy-900);
  --bs-btn-disabled-border-color: var(--is-navy-900);
}
.btn-outline-success {
  --bs-btn-color: var(--is-success-strong);
  --bs-btn-border-color: var(--is-success);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-success);
  --bs-btn-hover-border-color: var(--is-success);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-success-strong);
  --bs-btn-active-border-color: var(--is-success-strong);
  --bs-btn-disabled-color: var(--is-success);
  --bs-btn-disabled-border-color: var(--is-success);
}
.btn-outline-danger {
  --bs-btn-color: var(--is-danger);
  --bs-btn-border-color: var(--is-danger);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-danger);
  --bs-btn-hover-border-color: var(--is-danger);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-danger-strong);
  --bs-btn-active-border-color: var(--is-danger-strong);
  --bs-btn-disabled-color: var(--is-danger);
  --bs-btn-disabled-border-color: var(--is-danger);
}
.btn-outline-warning {
  --bs-btn-color: var(--is-warning-strong);
  --bs-btn-border-color: var(--is-accent);
  --bs-btn-hover-color: var(--is-on-accent);
  --bs-btn-hover-bg: var(--is-accent);
  --bs-btn-hover-border-color: var(--is-accent);
  --bs-btn-active-color: var(--is-on-accent);
  --bs-btn-active-bg: var(--is-accent-hover);
  --bs-btn-active-border-color: var(--is-accent-hover);
}
.btn-outline-info {
  --bs-btn-color: var(--is-info);
  --bs-btn-border-color: var(--is-info);
  --bs-btn-hover-color: var(--is-text-inverse);
  --bs-btn-hover-bg: var(--is-info);
  --bs-btn-hover-border-color: var(--is-info);
  --bs-btn-active-color: var(--is-text-inverse);
  --bs-btn-active-bg: var(--is-info-strong);
  --bs-btn-active-border-color: var(--is-info-strong);
}
.btn-link {
  --bs-btn-color: var(--is-link);
  --bs-btn-hover-color: var(--is-link-hover);
  --bs-btn-active-color: var(--is-link-hover);
}

/* ── 4. Carduri ──────────────────────────────────────────────────────────── */
.card {
  --bs-card-border-radius: var(--is-radius-lg);
  --bs-card-border-color: var(--is-border);
  --bs-card-bg: var(--is-surface);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: var(--is-space-4);
  --bs-card-spacer-x: var(--is-space-5);
  box-shadow: var(--is-shadow-sm);
}
.is-card {
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--is-radius-lg);
  box-shadow: var(--is-shadow-sm);
  padding: var(--is-space-5);
}
.is-card--flat { box-shadow: none; }
.is-card--inverse { background: var(--is-surface-inverse); color: var(--is-text-inverse); border-color: transparent; }
.is-card__title { font-size: var(--is-fs-xl); font-weight: var(--is-fw-bold); color: var(--is-heading); margin: 0 0 var(--is-space-2); }
.is-card--inverse .is-card__title { color: var(--is-text-inverse); }

/* Stat card (KPI) */
.is-stat {
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--is-radius-md);
  padding: var(--is-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--is-space-1);
  min-width: 0;
}
.is-stat__label {
  font-size: var(--is-fs-xs);
  font-weight: var(--is-fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--is-text-muted);
  display: flex;
  align-items: center;
  gap: var(--is-space-2);
}
.is-stat__value {
  font-size: var(--is-fs-2xl);
  font-weight: var(--is-fw-black);
  color: var(--is-heading);
  line-height: var(--is-lh-tight);
  font-variant-numeric: tabular-nums;
}
.is-stat__hint { font-size: var(--is-fs-sm); color: var(--is-text-muted); }
.is-stat--success .is-stat__value { color: var(--is-success-strong); }
.is-stat--warning .is-stat__value { color: var(--is-warning-strong); }
.is-stat--danger  .is-stat__value { color: var(--is-danger); }
a.is-stat { text-decoration: none; color: inherit; transition: border-color var(--is-dur) var(--is-ease), box-shadow var(--is-dur) var(--is-ease); }
a.is-stat:hover { border-color: var(--is-border-strong); box-shadow: var(--is-shadow-sm); }
.is-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--is-space-3);
}

/* ── 5. Header de pagina ─────────────────────────────────────────────────── */
.is-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--is-space-3) var(--is-space-4);
  margin-bottom: var(--is-space-6);
}
.is-page-head__main { min-width: 0; flex: 1 1 320px; }
.is-page-head__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-space-1);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--is-space-2);
  font-size: var(--is-fs-sm);
  color: var(--is-text-muted);
}
.is-page-head__crumbs li + li::before { content: "/"; margin-right: var(--is-space-1); color: var(--is-text-subtle); }
.is-page-head__crumbs a { color: var(--is-text-muted); text-decoration: none; }
.is-page-head__crumbs a:hover { color: var(--is-link); text-decoration: underline; }
.is-page-head__title {
  font-size: var(--is-fs-2xl);
  font-weight: var(--is-fw-black);
  color: var(--is-heading);
  line-height: var(--is-lh-tight);
  margin: 0;
}
.is-page-head__sub { font-size: var(--is-fs-base); color: var(--is-text-muted); margin: var(--is-space-1) 0 0; }
.is-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--is-space-2); }
.is-page-head--public .is-page-head__title { font-size: var(--is-fs-3xl); letter-spacing: -.01em; }
.is-page-head--public .is-page-head__sub { font-size: var(--is-fs-lg); }
@media (min-width: 768px) {
  .is-page-head--public .is-page-head__title { font-size: var(--is-fs-4xl); }
}
@media (max-width: 575.98px) {
  .is-page-head__actions { width: 100%; }
  .is-page-head__actions > .btn { flex: 1 1 auto; }
}

/* ── 6. Pastile de stare si badge-uri ────────────────────────────────────── */
/* Badge-urile Bootstrap (490 de utilizari): forma si marimea unitare;
   culorile vin din --bs-*-rgb de mai sus. */
.badge {
  --bs-badge-font-size: var(--is-fs-sm);
  --bs-badge-font-weight: var(--is-fw-bold);
  --bs-badge-padding-x: .7em;
  --bs-badge-padding-y: .4em;
  --bs-badge-border-radius: var(--is-radius-sm);
}
.badge.bg-warning, .badge.text-bg-warning { color: var(--is-on-accent); }

.is-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--is-space-1);
  padding: 2px 10px;
  border-radius: var(--is-radius-pill);
  font-size: var(--is-fs-xs);
  font-weight: var(--is-fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
  background: var(--is-slate-100);
  color: var(--is-slate-700);
  border: 1px solid transparent;
}
.is-pill > .bi { font-size: 1em; }
.is-pill--success { background: var(--is-success-bg); color: var(--is-success-strong); }
.is-pill--warning { background: var(--is-warning-bg); color: var(--is-warning-strong); }
.is-pill--danger  { background: var(--is-danger-bg);  color: var(--is-danger-strong); }
.is-pill--info    { background: var(--is-info-bg);    color: var(--is-info-strong); }
.is-pill--neutral { background: var(--is-slate-100);  color: var(--is-slate-700); }
.is-pill--brand   { background: var(--is-navy-900);   color: var(--is-text-inverse); }
.is-pill--accent  { background: var(--is-gold-100);   color: var(--is-warning-strong); border-color: var(--is-gold-500); }
.is-pill--premium { background: var(--is-cat-premium-bg); color: var(--is-cat-premium); }
.is-pill--academy { background: var(--is-cat-academy-bg); color: var(--is-cat-academy); }
.is-pill--tourney { background: var(--is-cat-tourney-bg); color: var(--is-cat-tourney); }

/* Chips de filtru (aceeasi forma, stare activa navy) */
.is-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--is-space-1);
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--is-radius-pill);
  border: 1px solid var(--is-border-strong);
  background: var(--is-surface);
  color: var(--is-slate-700);
  font-size: var(--is-fs-sm);
  font-weight: var(--is-fw-semibold);
  text-decoration: none;
  cursor: pointer;
}
.is-chip:hover { border-color: var(--is-slate-400); color: var(--is-navy-900); }
.is-chip.active, .is-chip[aria-pressed="true"] { background: var(--is-navy-900); border-color: var(--is-navy-900); color: var(--is-text-inverse); }

/* ── 7. Alerte si flash ──────────────────────────────────────────────────── */
.alert {
  --bs-alert-border-radius: var(--is-radius-md);
  --bs-alert-padding-x: var(--is-space-4);
  --bs-alert-padding-y: var(--is-space-3);
}
.is-alert {
  display: flex;
  gap: var(--is-space-3);
  align-items: flex-start;
  border-width: 0 0 0 4px;
  border-style: solid;
}
.is-alert > .bi { font-size: 1.15em; line-height: 1.3; flex: none; }
.is-alert.alert-success { border-color: var(--is-success); }
.is-alert.alert-warning { border-color: var(--is-warning); }
.is-alert.alert-danger  { border-color: var(--is-danger); }
.is-alert.alert-info    { border-color: var(--is-info); }

/* ── 8. Formulare ────────────────────────────────────────────────────────── */
.form-label { font-size: var(--is-fs-sm); font-weight: var(--is-fw-semibold); color: var(--is-slate-700); }
.form-text { font-size: var(--is-fs-xs); color: var(--is-text-muted); }
.form-control:focus,
.form-select:focus {
  border-color: var(--is-navy-700);
  box-shadow: var(--is-focus-ring);
}
.form-check-input:focus { border-color: var(--is-navy-700); box-shadow: var(--is-focus-ring); }
.form-check-input:checked { background-color: var(--is-navy-900); border-color: var(--is-navy-900); }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a3a7a'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--is-navy-900); }
.form-range::-moz-range-thumb { background-color: var(--is-navy-900); }
/* Telefon: inputuri de 44px (tinta de atingere); 16px evita zoom-ul pe iOS */
@media (max-width: 767.98px) {
  .form-control:not(.form-control-sm):not(textarea):not([type=color]),
  .form-select:not(.form-select-sm) { min-height: var(--is-tap); }
}
.is-fieldset {
  border: 1px solid var(--is-border);
  border-radius: var(--is-radius-md);
  padding: var(--is-space-4);
  margin: 0 0 var(--is-space-4);
}
.is-fieldset > legend {
  float: none;
  width: auto;
  padding: 0 var(--is-space-2);
  margin: 0;
  font-size: var(--is-fs-md);
  font-weight: var(--is-fw-bold);
  color: var(--is-heading);
}

/* ── 9. Tabele ───────────────────────────────────────────────────────────── */
/* Antetul de tabel unitar (mutat din <head>-ul _base.html) */
.table th {
  font-weight: var(--is-fw-semibold);
  text-transform: uppercase;
  font-size: var(--is-fs-sm);
  letter-spacing: .02em;
}
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--is-gold-100); --bs-table-bg-state: var(--is-gold-100); }
.table-responsive {
  border-radius: var(--is-radius-md);
  box-shadow: var(--is-shadow-xs);
}

/* .is-table: tabel dens de lucru (admin, casierie) */
.is-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--is-surface);
  font-size: var(--is-fs-sm);
}
.is-table th,
.is-table td {
  padding: 10px var(--is-space-3);
  border-bottom: 1px solid var(--is-border);
  vertical-align: middle;
  text-align: left;
}
.is-table thead th {
  background: var(--is-surface-muted);
  color: var(--is-text-muted);
  font-size: var(--is-fs-xs);
  font-weight: var(--is-fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.is-table tbody tr:hover > * { background: var(--is-surface-subtle); }
.is-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* .is-table-stack: OPT-IN. Pe telefon fiecare rand devine card, iar eticheta
   vine din data-label de pe fiecare <td>. Nu atinge alte tabele: o regula
   globala de tip `main table {display:block}` a mai stricat pagini. */
@media (max-width: 767.98px) {
  .is-table-stack,
  .is-table-stack tbody,
  .is-table-stack tr,
  .is-table-stack td { display: block; width: 100%; }
  .is-table-stack thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .is-table-stack { background: transparent; border: 0; }
  .is-table-stack tr {
    background: var(--is-surface);
    border: 1px solid var(--is-border);
    border-radius: var(--is-radius-md);
    box-shadow: var(--is-shadow-xs);
    padding: var(--is-space-2) var(--is-space-3);
    margin-bottom: var(--is-space-3);
  }
  .is-table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--is-space-3);
    padding: 6px 0;
    border: 0;
    border-bottom: 1px dashed var(--is-border);
    text-align: right;
    background: transparent !important; /* peste fundalurile .table pe celula */
    box-shadow: none !important;
  }
  .is-table-stack td:last-child { border-bottom: 0; }
  .is-table-stack td::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    text-align: left;
    font-size: var(--is-fs-xs);
    font-weight: var(--is-fw-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--is-text-muted);
  }
  .is-table-stack td:not([data-label])::before,
  .is-table-stack td[data-label=""]::before { content: none; }
  .is-table-stack td.is-stack-title { font-weight: var(--is-fw-bold); color: var(--is-heading); text-align: left; font-size: var(--is-fs-md); }
  .is-table-stack .is-col-hide-sm { display: none; }
}

/* ── 10. Modale si bottom sheet ──────────────────────────────────────────── */
.modal {
  --bs-modal-border-radius: var(--is-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--is-radius-lg) - 1px);
  --bs-modal-box-shadow: var(--is-shadow-lg);
  --bs-modal-border-color: transparent;
  --bs-modal-header-border-color: var(--is-border);
  --bs-modal-footer-border-color: var(--is-border);
}
.modal-backdrop { --bs-backdrop-bg: var(--is-navy-900); --bs-backdrop-opacity: .6; }
.modal-title { font-weight: var(--is-fw-bold); color: var(--is-heading); }
@media (max-width: 575.98px) {
  .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-footer > .btn { width: 100%; margin: var(--is-space-1) 0; }
}

/* Bottom sheet: <div class="modal is-modal-sheet"> — pe telefon vine de jos, pe
   desktop ramane modal centrat. */
@media (max-width: 767.98px) {
  .modal.is-modal-sheet .modal-dialog {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 0;           /* .modal-dialog-centered il intinde pe tot ecranul */
    align-items: flex-end;
    transform: translateY(100%);
    transition: transform var(--is-dur) var(--is-ease);
  }
  .modal.is-modal-sheet.show .modal-dialog { transform: none; }
  .modal.is-modal-sheet .modal-content {
    border-radius: var(--is-radius-lg) var(--is-radius-lg) 0 0;
    max-height: 88vh;
    padding-bottom: var(--is-safe-bottom);
  }
  .modal.is-modal-sheet .modal-body { overflow-y: auto; }
  .modal.is-modal-sheet .modal-header { position: relative; padding-top: var(--is-space-6); }
  .modal.is-modal-sheet .modal-header::before {
    content: "";
    position: absolute;
    top: var(--is-space-2);
    left: 50%;
    width: 40px; height: 4px;
    margin-left: -20px;
    border-radius: var(--is-radius-pill);
    background: var(--is-slate-300);
  }
}

/* ── 11. Empty state ─────────────────────────────────────────────────────── */
.is-empty {
  text-align: center;
  padding: var(--is-space-10) var(--is-space-4);
  color: var(--is-text-muted);
}
.is-empty__icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--is-space-4);
  border-radius: 50%;
  background: var(--is-slate-100);
  color: var(--is-slate-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.is-empty__title { font-size: var(--is-fs-md); font-weight: var(--is-fw-bold); color: var(--is-heading); margin: 0 0 var(--is-space-1); }
.is-empty__text { font-size: var(--is-fs-sm); max-width: 42ch; margin: 0 auto; }
.is-empty__action { margin-top: var(--is-space-4); }

/* ── 12. Skeleton ────────────────────────────────────────────────────────── */
.is-skeleton {
  display: block;
  height: 1em;
  border-radius: var(--is-radius-xs);
  background: linear-gradient(90deg, var(--is-slate-100) 25%, var(--is-slate-200) 37%, var(--is-slate-100) 63%);
  background-size: 400% 100%;
  animation: is-shimmer 1.4s ease infinite;
}
.is-skeleton--text { height: .9em; margin: .45em 0; }
.is-skeleton--title { height: 1.5em; width: 60%; margin-bottom: var(--is-space-3); }
.is-skeleton--block { height: 96px; border-radius: var(--is-radius-md); }
.is-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes is-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .is-skeleton { animation: none; } }

/* ── 13. Tab-uri (mutate din <head>-ul _base.html, pe paleta de brand) ──── */
.nav-tabs .nav-link {
  border: none;
  font-weight: var(--is-fw-semibold);
  color: var(--is-slate-600);
  background: var(--is-slate-50);
  transition: color var(--is-dur) var(--is-ease), background-color var(--is-dur) var(--is-ease);
}
.nav-tabs .nav-link:hover { color: var(--is-navy-900); background: var(--is-slate-100); }
.nav-tabs .nav-link.active {
  color: var(--is-text-inverse);
  background: var(--is-navy-900);
  border-radius: var(--is-radius-sm) var(--is-radius-sm) 0 0;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--is-navy-900); --bs-nav-pills-border-radius: var(--is-radius-sm); }
.pagination {
  --bs-pagination-color: var(--is-navy-700);
  --bs-pagination-hover-color: var(--is-navy-900);
  --bs-pagination-focus-box-shadow: var(--is-focus-ring);
  --bs-pagination-active-bg: var(--is-navy-900);
  --bs-pagination-active-border-color: var(--is-navy-900);
}
.list-group { --bs-list-group-active-bg: var(--is-navy-900); --bs-list-group-active-border-color: var(--is-navy-900); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--is-navy-900); --bs-dropdown-border-radius: var(--is-radius-md); --bs-dropdown-box-shadow: var(--is-shadow-md); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--is-navy-900); }

/* ── 14. Layout ──────────────────────────────────────────────────────────── */
.container { max-width: var(--is-container); }
.is-narrow { max-width: var(--is-container-narrow); margin-left: auto; margin-right: auto; }
.is-num, .is-tabular { font-variant-numeric: tabular-nums; }
.is-stack { display: flex; flex-direction: column; gap: var(--is-space-4); }
.is-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--is-space-2); }

/* Focus vizibil, unitar, pe tot ce e interactiv */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible { outline: 2px solid var(--is-gold-500); outline-offset: 2px; }

/* ── 15. Ajutoare pentru ghidul de stil (/admin/stil) ────────────────────── */
.is-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--is-space-3); }
.is-swatch { display: flex; flex-direction: column; gap: var(--is-space-1); font-size: var(--is-fs-xs); min-width: 0; }
.is-swatch code { color: var(--is-text-muted); overflow-wrap: anywhere; }
.is-swatch__chip { display: block; height: 56px; border-radius: var(--is-radius-sm); background: var(--c); border: 1px solid var(--is-border); }
.is-type-row { display: flex; align-items: baseline; gap: var(--is-space-4); padding: var(--is-space-2) 0; border-bottom: 1px solid var(--is-border); min-width: 0; }
.is-type-row:last-child { border-bottom: 0; }
.is-type-row code { flex: none; width: 12em; font-size: var(--is-fs-xs); color: var(--is-text-muted); }
.is-type-row span { min-width: 0; overflow-wrap: anywhere; line-height: var(--is-lh-tight); }
@media (max-width: 575.98px) { .is-type-row { flex-direction: column; gap: var(--is-space-1); } }
.is-space-bar { display: inline-block; height: 12px; background: var(--is-gold-500); border-radius: 2px; }
.is-cookie-banner__link { color: var(--is-gold-500); }
.is-cookie-banner__link:hover { color: var(--is-white); }


/* ── Tipografie: două fonturi cu roluri clare (6 nov 2026) ───────────────
   Montserrat (--is-font-display) pentru tot ce e titlu sau control: titluri,
   butoane, meniuri, etichete de stare, cifre mari. Figtree (--is-font-body)
   pentru textul de citit. Textul de bază e 16px; pe telefon câmpurile de
   formular au minim 16px, altfel iOS mărește pagina când apeși pe ele. */
body { font-size: var(--is-fs-md); line-height: var(--is-lh-base); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .badge, .nav-link, .navbar, .dropdown-item,
.is-topbar, .is-bottomnav, .console-rail, .is-sheet__title, .is-sheet__group > summary,
.is-page-head__title, .is-card__title, .is-stat__value, .is-pill, .is-status,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--is-font-display);
}
table, .table { font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) {
  input.form-control, select.form-select, textarea.form-control,
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="search"], input[type="date"], input[type="time"], select, textarea {
    font-size: max(16px, 1em);
  }
}