/* =============================================================================
   ECO Document Scanner — ECO Demolizioni Brand
   Inspirazione: ecodemolizionisrl.com
   - Navy #2C2274 (logo "DEMOLIZIONI")
   - Verde foresta #1F8A4D (logo "ECO")
   - Arancione #FC5220 (accent industriale CTA)
   - Nero antracite #191817
   - Font Manrope
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  /* === Brand === */
  --eco-navy:        #2C2274;
  --eco-navy-dark:   #1a154d;
  --eco-navy-deep:   #110e36;
  --eco-navy-soft:   #ece9f7;
  --eco-green:       #1F8A4D;
  --eco-green-dark:  #146238;
  --eco-green-soft:  #e3f4ea;
  --eco-orange:      #FC5220;
  --eco-orange-dark: #d83e10;
  --eco-orange-soft: #fde2d4;

  /* === Aliases (mappati al brand) === */
  --color-primary:        var(--eco-navy);
  --color-primary-dark:   var(--eco-navy-dark);
  --color-primary-soft:   var(--eco-navy-soft);
  --color-secondary:      var(--eco-green);
  --color-secondary-soft: var(--eco-green-soft);
  --color-accent:         var(--eco-orange);
  --color-accent-dark:    var(--eco-orange-dark);
  --color-accent-soft:    var(--eco-orange-soft);

  /* === Neutrali === */
  --color-ink:        #191817;
  --color-ink-soft:   #2B2B2B;
  --color-ink-2:      #424143;
  --color-muted:      #6c6c6e;
  --color-line:       #E6E9EB;
  --color-line-soft:  #f1f3f5;
  --color-bg:         #F7F7F7;
  --color-bg-warm:    #f4f2ee;
  --color-surface:    #ffffff;
  --color-surface-2:  #fafbfc;

  /* === Stati === */
  --color-success:      #1F8A4D;
  --color-success-soft: #e3f4ea;
  --color-warning:      #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-danger:       #e63946;
  --color-danger-soft:  #fde0e2;
  --color-info:         #2C2274;
  --color-info-soft:    #ece9f7;

  /* === Geometria === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(25, 24, 23, 0.04);
  --shadow-sm: 0 2px 8px rgba(25, 24, 23, 0.05);
  --shadow-md: 0 6px 20px rgba(25, 24, 23, 0.07);
  --shadow-lg: 0 16px 40px rgba(25, 24, 23, 0.10);
  --shadow-xl: 0 24px 60px rgba(25, 24, 23, 0.14);
  --shadow-glow-orange: 0 0 0 4px rgba(252, 82, 32, 0.18);
  --shadow-glow-navy:   0 0 0 4px rgba(44, 34, 116, 0.18);

  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --navbar-h: 70px;
}

/* === DARK THEME =========================================================== */
html[data-theme="dark"] {
  --color-bg:         #0b1020;
  --color-bg-warm:    #0e142a;
  --color-surface:    #141b32;
  --color-surface-2:  #181f3a;
  --color-ink:        #f1f3fb;
  --color-ink-soft:   #d5d9eb;
  --color-ink-2:      #b3b9d4;
  --color-muted:      #8e94b3;
  --color-line:       #232b4a;
  --color-line-soft:  #1a2240;

  --eco-navy-soft:    #1f2547;
  --eco-orange-soft:  #3a1c0e;
  --eco-green-soft:   #0e2c1d;

  --color-success-soft: #0e2c1d;
  --color-warning-soft: #3a2c0a;
  --color-danger-soft:  #3a1216;
  --color-info-soft:    #1f2547;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(900px 600px at 12% -10%, rgba(252, 82, 32, .14), transparent 60%),
    radial-gradient(700px 500px at 92% 8%,  rgba(31, 138, 77, .10), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(44, 34, 116, .18), transparent 55%);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-line);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background: var(--color-surface-2); }
html[data-theme="dark"] .navbar.navbar-eco { background: rgba(11, 16, 32, .9); }
html[data-theme="dark"] .navbar.navbar-eco.is-scrolled { background: rgba(11, 16, 32, .85); }
html[data-theme="dark"] .modal-content { background-color: var(--color-surface) !important; --bs-modal-bg: var(--color-surface) !important; }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--color-line); }
html[data-theme="dark"] .ts-control,
html[data-theme="dark"] .ts-wrapper.single .ts-control,
html[data-theme="dark"] .ts-wrapper.multi  .ts-control {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-line) !important;
}
html[data-theme="dark"] .ts-dropdown { background: var(--color-surface-2); border-color: var(--color-line); }
html[data-theme="dark"] .ts-dropdown .option:hover { background: var(--color-line-soft); }
html[data-theme="dark"] .doc-card .doc-thumb canvas { background: #ffffff; } /* PDF thumbnails stay white */
html[data-theme="dark"] .table > tbody > tr:hover { background: var(--color-line-soft); }
html[data-theme="dark"] .pdf-canvas-wrap { background: #0a0d18; }
html[data-theme="dark"] .pdf-canvas-wrap canvas { background: white; }
html[data-theme="dark"] .dropdown-menu { background: var(--color-surface-2); border-color: var(--color-line); }
html[data-theme="dark"] .dropdown-item { color: var(--color-ink); }
html[data-theme="dark"] .dropdown-item:hover { background: var(--color-line-soft); }
html[data-theme="dark"] .input-group-text { background: var(--color-surface); border-color: var(--color-line); }
html[data-theme="dark"] .empty-state .illustration-title { color: var(--color-ink); }

/* --- Dark mode contrast fixes --- */
/* Bootstrap tables default cell bg to --bs-body-bg (white): kept the UTENTI
   card looking white in dark mode. Make cells transparent + light text. */
html[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-ink);
  --bs-table-border-color: var(--color-line);
  color: var(--color-ink);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--color-ink);
  border-bottom-color: var(--color-line);
}
html[data-theme="dark"] .table thead th { color: var(--color-muted); }
/* Light badges (text-bg-light) became near-white blocks on dark; tone them down. */
html[data-theme="dark"] .badge.text-bg-light {
  background-color: var(--color-surface-2) !important;
  color: var(--color-ink) !important;
}
/* Bootstrap text utilities that don't adapt to dark and can vanish on dark bg. */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body { color: var(--color-ink) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--color-muted) !important; }
/* Bootstrap list-group / cards used in places default to white. */
html[data-theme="dark"] .list-group-item { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
html[data-theme="dark"] .card { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }

/* === Dark mode contrast fixes ===
   In dark mode the "soft" backgrounds become dark, but several accent TEXT/icon
   colors stay dark too (e.g. navy-on-navy) → invisible. Brighten them, and give
   placeholders an explicit readable colour. */
html[data-theme="dark"] ::placeholder { color: var(--color-muted) !important; opacity: 1; }
html[data-theme="dark"] .ts-control > input::placeholder { color: var(--color-muted) !important; opacity: 1; }

/* KPI tile icons */
html[data-theme="dark"] .kpi-primary .kpi-icon { color: #9aa6ff; }
html[data-theme="dark"] .kpi-success .kpi-icon { color: #4ade80; }
html[data-theme="dark"] .kpi-warning .kpi-icon { color: #fbbf24; }
html[data-theme="dark"] .kpi-danger  .kpi-icon { color: #f87171; }

/* Status badges: brighten text + dot on the soft (dark) backgrounds */
html[data-theme="dark"] .status-completed      { color: #4ade80; }
html[data-theme="dark"] .status-completed .dot { background: #4ade80; }
html[data-theme="dark"] .status-edited         { color: #9aa6ff; }
html[data-theme="dark"] .status-edited .dot    { background: #9aa6ff; }
html[data-theme="dark"] .status-needs_review      { color: #fbbf24; }
html[data-theme="dark"] .status-needs_review .dot { background: #fbbf24; }
html[data-theme="dark"] .status-failed         { color: #f87171; }
html[data-theme="dark"] .status-failed .dot    { background: #f87171; }

/* "Da sistemare" drawer: chips + section headers */
html[data-theme="dark"] .verify-panel-head strong,
html[data-theme="dark"] .vn-conf-medium,
html[data-theme="dark"] .vn-conf-warn,
html[data-theme="dark"] .verify-section-unc .verify-section-head { color: #fbbf24; }
html[data-theme="dark"] .vn-conf-low,
html[data-theme="dark"] .vn-conf-block,
html[data-theme="dark"] .verify-section-block .verify-section-head { color: #f87171; }

/* Upload queue status icons (same soft-bg pattern) */
html[data-theme="dark"] .queue-item.state-processing .qi-icon,
html[data-theme="dark"] .queue-item.state-edited .qi-icon { color: #9aa6ff; }
html[data-theme="dark"] .queue-item.state-completed .qi-icon { color: #4ade80; }
html[data-theme="dark"] .queue-item.state-needs_review .qi-icon { color: #fbbf24; }

/* Per-field warning message + "Conferma" button text */
html[data-theme="dark"] .field-message.warning,
html[data-theme="dark"] .field-verify .verify-btn { color: #fbbf24; }

/* Document-type chip (navy-on-navy otherwise) */
html[data-theme="dark"] .doc-type-chip { color: #9aa6ff; }

/* Theme toggle button (placed in navbar) */
.theme-toggle {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); color: white; }

/* Tri-state theme switch: Giorno / Auto / Notte */
.theme-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.theme-seg {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  width: 30px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
  transition: all var(--transition-fast);
}
.theme-seg:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.theme-seg.active { background: var(--eco-orange); color: #fff; }
.theme-toggle .bi { font-size: 1rem; }

/* =============================================================================
   Base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
  position: relative;
  min-height: 100vh;
}

/* =============================================================================
   Atmosphere — soft gradient on body itself (no pseudo-elements with filters,
   to avoid creating stacking contexts that interfere with Bootstrap modals).
   The background is painted directly on body's intrinsic background layer,
   which is always the BOTTOM of the stacking order — guaranteed to never
   compete with modal/backdrop z-index.
   ============================================================================= */
body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(900px 600px at 12% -10%, rgba(252, 82, 32, .10), transparent 60%),
    radial-gradient(700px 500px at 92% 8%,  rgba(31, 138, 77, .08), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(44, 34, 116, .08), transparent 55%);
  background-attachment: fixed;
}

/* === MODAL === */
.modal-backdrop {
  background-color: #0f172a !important;
}
.modal-backdrop.show {
  opacity: 0.65 !important;
}
.modal-content {
  background-color: #ffffff !important;
  --bs-modal-bg: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
}
/* No z-index on main/container-fluid — would create stacking contexts that
   trap modals below their natural z-index. Atmosphere is now on body's bg
   layer (always at the bottom of stacking) so no z-index trick is needed. */

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
}
h1 { font-weight: 800; letter-spacing: -0.035em; }

::selection { background: var(--eco-orange-soft); color: var(--color-ink); }

/* =============================================================================
   Bootstrap overrides
   ============================================================================= */
.btn { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.005em; border-radius: var(--radius-md); padding: .55rem 1rem; transition: all var(--transition-fast); }
.form-control, .form-select { font-family: var(--font-sans); }
.dropdown-menu {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .35rem;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
  font-size: .9rem;
  font-weight: 500;
}
.dropdown-item:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.modal-header, .modal-footer { border-color: var(--color-line); padding: 1rem 1.5rem; }
.modal-body { padding: 1.5rem; }
/* (precedente fix consolidato sopra in === MODAL ===) */

/* eco confirm/prompt */
.eco-modal .eco-confirm-card {
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(15, 17, 36, .35);
  overflow: hidden;
}
.eco-confirm-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .04);
}
.eco-confirm-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 .25rem 0;
  color: var(--color-ink);
}
.eco-confirm-message {
  color: var(--color-muted);
  font-size: .92rem;
  line-height: 1.45;
}
.eco-modal .btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
  font-weight: 600;
}
.eco-modal .btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* =============================================================================
   Navbar — DARK industrial
   ============================================================================= */
.navbar.navbar-eco {
  background: var(--eco-navy-deep);
  background-image:
    linear-gradient(135deg, rgba(252, 82, 32, .04) 0%, transparent 30%),
    linear-gradient(to right, var(--eco-navy-deep) 0%, var(--eco-navy-dark) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding: 0 1.5rem;
  height: var(--navbar-h);
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: saturate(180%) blur(12px);
}
.navbar.navbar-eco .container-fluid {
  padding: 0; height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.navbar.navbar-eco .navbar-brand {
  display: flex; align-items: center; gap: .85rem;
  padding: 0;
  margin: 0;
  height: 100%;
  justify-self: start;
  min-width: 0;
}
.navbar.navbar-eco .navbar-collapse {
  justify-self: center;
}
.navbar.navbar-eco .navbar-collapse > .navbar-nav {
  margin: 0;
  flex-direction: row;
}
.navbar.navbar-eco .user-menu-slot {
  justify-self: end;
}
/* Brand wordmark — niente sfondo bianco, ricolorato per dark navbar */
.navbar.navbar-eco .brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  user-select: none;
  transition: transform var(--transition-fast);
}
.navbar.navbar-eco .navbar-brand:hover .brand-wordmark { transform: translateY(-1px); }
.navbar.navbar-eco .wm-row {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.navbar.navbar-eco .wm-eco {
  color: var(--eco-green);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.navbar.navbar-eco .wm-dem {
  color: white;
}
.navbar.navbar-eco .wm-icon {
  color: var(--eco-green);
  font-size: 1.05rem;
  margin: 0 .05rem;
  display: inline-flex;
  align-items: center;
}
.navbar.navbar-eco .wm-tagline {
  font-size: .54rem;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, .42);
  margin-top: .3rem;
  font-weight: 600;
  padding-left: .1rem;
}
.navbar.navbar-eco .brand-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, .12);
  margin: 0 1rem;
}
.navbar.navbar-eco .brand-meta {
  display: flex; flex-direction: column;
  font-size: .68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  line-height: 1.2;
}
.navbar.navbar-eco .brand-meta strong {
  color: white;
  font-size: .82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 700;
}
.navbar.navbar-eco .nav-link {
  color: rgba(255, 255, 255, .72);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .9rem !important;
  margin: 0 .15rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  display: inline-flex !important; align-items: center; gap: .45rem;
  position: relative;
}
.navbar.navbar-eco .nav-link:hover {
  color: white;
  background: rgba(255, 255, 255, .06);
}
.navbar.navbar-eco .nav-link.active {
  color: white;
  background: rgba(252, 82, 32, .14);
}
.navbar.navbar-eco .nav-link.active::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: .15rem;
  height: 2px;
  background: var(--eco-orange);
  border-radius: 2px;
}
.navbar.navbar-eco .nav-link i { font-size: 1rem; opacity: .85; }
.navbar.navbar-eco .navbar-toggler { color: white; border: none; padding: 0; }

.navbar.navbar-eco .user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-orange), var(--eco-orange-dark));
  color: white;
  font-weight: 700;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: .85rem;
  border: 2px solid rgba(255, 255, 255, .15);
  transition: transform var(--transition-fast);
}
.navbar.navbar-eco .user-avatar:hover { transform: scale(1.05); }
.navbar.navbar-eco .user-info {
  display: none;
}
@media (min-width: 992px) { .navbar.navbar-eco .user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } }
.navbar.navbar-eco .user-info .name { color: white; font-weight: 600; font-size: .82rem; }
.navbar.navbar-eco .user-info .role { color: rgba(255,255,255,.55); font-size: .68rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* =============================================================================
   Cards
   ============================================================================= */
.eco-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-xs);
  padding: 1.5rem;
  transition: box-shadow var(--transition);
}
.eco-card:hover { box-shadow: var(--shadow-sm); }
.eco-card.elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.eco-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; }
.eco-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-ink); letter-spacing: -0.015em; }
.eco-card-subtitle { color: var(--color-muted); font-size: .85rem; margin-top: .15rem; }

.active-model-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--eco-orange-soft), rgba(252, 82, 32, .25));
  color: var(--eco-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 22px rgba(252, 82, 32, .15);
  flex-shrink: 0;
}

/* =============================================================================
   KPI cards
   ============================================================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.kpi-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-color, var(--eco-orange));
  opacity: 0.85;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.kpi-card .kpi-label {
  color: var(--color-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kpi-card .kpi-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-ink);
  margin: .65rem 0 .2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
}
.kpi-card .kpi-trend { font-size: .78rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: .25rem; }
.kpi-card .kpi-icon {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
/* Clickable KPI cards: behave like an anchor but visually keep the kpi-card look. */
a.kpi-card,
a.kpi-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.kpi-card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
a.kpi-card-link .kpi-arrow {
  margin-left: .25rem;
  font-size: .7rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s, transform .25s;
}
a.kpi-card-link:hover .kpi-arrow {
  opacity: 1;
  transform: translateX(0);
}

.kpi-primary { --accent-color: var(--eco-navy); }
.kpi-primary .kpi-icon { background: var(--eco-navy-soft); color: var(--eco-navy); }
.kpi-accent  { --accent-color: var(--eco-orange); }
.kpi-accent .kpi-icon  { background: var(--eco-orange-soft); color: var(--eco-orange); }
.kpi-success { --accent-color: var(--eco-green); }
.kpi-success .kpi-icon { background: var(--eco-green-soft); color: var(--eco-green); }
.kpi-warning { --accent-color: var(--color-warning); }
.kpi-warning .kpi-icon { background: var(--color-warning-soft); color: #b45309; }
.kpi-danger  { --accent-color: var(--color-danger); }
.kpi-danger .kpi-icon  { background: var(--color-danger-soft); color: var(--color-danger); }

/* Conditional glow — added by JS based on KPI value */
.kpi-card.has-glow {
  position: relative;
  box-shadow: 0 0 0 2px var(--glow-color, var(--eco-orange)), 0 18px 40px -10px var(--glow-shadow, rgba(252,82,32,.35));
  animation: kpiGlow 2.6s ease-in-out infinite;
}
.kpi-card.glow-success { --glow-color: rgba(31, 138, 77, .55); --glow-shadow: rgba(31, 138, 77, .35); }
.kpi-card.glow-accent  { --glow-color: rgba(252, 82, 32, .55); --glow-shadow: rgba(252, 82, 32, .35); }
.kpi-card.glow-warning { --glow-color: rgba(245, 158, 11, .55); --glow-shadow: rgba(245, 158, 11, .35); }
.kpi-card.glow-danger  { --glow-color: rgba(230, 57, 70, .55); --glow-shadow: rgba(230, 57, 70, .35); }
.kpi-card.glow-navy    { --glow-color: rgba(44, 34, 116, .55); --glow-shadow: rgba(44, 34, 116, .35); }
@keyframes kpiGlow {
  0%, 100% { box-shadow: 0 0 0 2px var(--glow-color), 0 18px 40px -10px var(--glow-shadow); }
  50%      { box-shadow: 0 0 0 5px var(--glow-color), 0 22px 60px -8px var(--glow-shadow); }
}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn-eco-primary {
  background: var(--eco-orange);
  border: 1px solid var(--eco-orange);
  color: white;
}
.btn-eco-primary:hover, .btn-eco-primary:focus {
  background: var(--eco-orange-dark);
  border-color: var(--eco-orange-dark);
  color: white;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-eco-primary:active { transform: translateY(0); }

.btn-eco-secondary, .btn-eco-accent {
  background: var(--eco-navy);
  border: 1px solid var(--eco-navy);
  color: white;
}
.btn-eco-secondary:hover, .btn-eco-accent:hover {
  background: var(--eco-navy-dark);
  border-color: var(--eco-navy-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-eco-outline {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-weight: 600;
}
.btn-eco-outline:hover {
  background: var(--color-bg);
  border-color: var(--eco-navy);
  color: var(--eco-navy);
}

.btn-icon {
  padding: .5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sm { padding: .35rem .75rem; font-size: .82rem; }

/* =============================================================================
   Chips & Badges
   ============================================================================= */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  font-family: var(--font-sans);
}
.chip:hover { background: var(--color-line-soft); border-color: var(--color-line); color: var(--color-ink); }
.chip.active {
  background: var(--eco-navy);
  color: white;
  border-color: var(--eco-navy);
  box-shadow: 0 4px 12px rgba(44, 34, 116, .25);
}

.status-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.status-completed     { background: var(--eco-green-soft);    color: var(--eco-green-dark); }
.status-completed .dot{ background: var(--eco-green); }
.status-edited        { background: var(--eco-navy-soft);     color: var(--eco-navy); }
.status-edited .dot   { background: var(--eco-navy); }
.status-needs_review  { background: var(--color-warning-soft); color: #b45309; }
.status-needs_review .dot { background: var(--color-warning); }
.status-failed        { background: var(--color-danger-soft); color: #b91c1c; }
.status-failed .dot   { background: var(--color-danger); }
.status-processing    { background: var(--eco-orange-soft);   color: var(--eco-orange-dark); }
.status-processing .dot { background: var(--eco-orange); animation: pulse 1.5s infinite; }
.status-pending       { background: var(--color-line-soft);   color: var(--color-muted); }
.status-pending .dot  { background: var(--color-muted); }
.status-approved      { background: var(--eco-green);          color: #fff; }
.status-approved .dot { background: #fff; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.1); }
}

/* =============================================================================
   Forms
   ============================================================================= */
.form-control, .form-select {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  padding: .65rem .9rem;
  transition: all var(--transition-fast);
  background: var(--color-surface);
  font-size: .92rem;
  color: var(--color-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--eco-orange);
  box-shadow: var(--shadow-glow-orange);
  outline: 0;
}
.form-label {
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: .35rem;
  font-size: .82rem;
  letter-spacing: -0.005em;
}
.form-text { color: var(--color-muted); }

.field-group { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 0; border-bottom: 1px dashed var(--color-line-soft); }
.field-group:last-child { border-bottom: none; padding-bottom: 0; }
.field-group .form-label { display: flex; align-items: center; justify-content: space-between; }
.field-group.has-warning .form-control,
.field-group.has-warning .form-select { border-color: var(--color-warning); background: var(--color-warning-soft); }
.field-group.has-error .form-control,
.field-group.has-error .form-select { border-color: var(--color-danger); background: var(--color-danger-soft); }
.field-group.field-active {
  background: var(--eco-orange-soft);
  box-shadow: 0 0 0 6px var(--eco-orange-soft);
  border-radius: 4px;
  animation: fieldActivateAnim .55s cubic-bezier(.16, 1, .3, 1) both;
  position: relative;
}
.field-group.field-active::before {
  content: '';
  position: absolute;
  left: -10px; top: 0; bottom: 0;
  width: 3px;
  background: var(--eco-orange);
  border-radius: 3px;
}
@keyframes fieldActivateAnim {
  0%   { background: var(--eco-orange-soft); transform: scale(.99); }
  60%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}
.field-message { font-size: .76rem; color: var(--color-muted); }
.field-message.warning { color: #b45309; }
.field-message.error   { color: var(--color-danger); }

/* Per-field human verification — resolve a yellow "uncertain" marker */
.field-verify { margin-top: .4rem; display: flex; align-items: center; gap: .5rem; }
.field-verify .verify-btn {
  border: 1px solid var(--color-warning);
  color: #b45309;
  background: var(--color-warning-soft);
  border-radius: 8px;
  padding: .18rem .55rem;
  font-size: .76rem;
  font-weight: 600;
}
.field-verify .verify-btn:hover { background: var(--color-warning); color: #fff; }
.field-verify .verify-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--eco-green-dark); font-size: .76rem; font-weight: 600;
}
.field-verify .verify-undo { font-size: .74rem; color: var(--color-muted); text-decoration: none; }
.field-verify .verify-undo:hover { text-decoration: underline; }

/* Approve (human sign-off) button — solid green, distinct from primary */
.btn-eco-approve {
  background: var(--eco-green);
  color: #fff;
  border: 1px solid var(--eco-green);
  border-radius: 10px;
  font-weight: 600;
}
.btn-eco-approve:hover { background: var(--eco-green-dark); border-color: var(--eco-green-dark); color: #fff; }

/* "Da verificare" navigator — sticky list of uncertain fields at top of pane */
.verify-nav {
  position: sticky; top: 0; z-index: 6;
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: 12px;
  padding: .65rem .8rem;
  margin-bottom: .9rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.verify-nav-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.verify-nav .vn-count { color: #b45309; font-weight: 700; font-size: .92rem; }
.verify-all-btn { background: var(--eco-green); color: #fff; border: 1px solid var(--eco-green); border-radius: 8px; font-weight: 600; white-space: nowrap; }
.verify-all-btn:hover { background: var(--eco-green-dark); border-color: var(--eco-green-dark); color: #fff; }
.verify-nav-list { display: flex; flex-direction: column; gap: .3rem; max-height: 230px; overflow-y: auto; }
.vn-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: var(--color-surface, #fff); border: 1px solid var(--color-line);
  border-radius: 8px; padding: .35rem .55rem; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.vn-item:hover { border-color: var(--eco-orange); background: var(--eco-orange-soft); }
.vn-item .vn-page { font-weight: 700; color: var(--color-ink-2); font-size: .74rem; min-width: 2.6rem; }
.vn-item .vn-label { flex: 1; font-weight: 600; color: var(--color-ink); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-item .vn-conf { font-size: .66rem; font-weight: 700; padding: .08rem .42rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.vn-conf-low  { background: var(--color-danger-soft); color: #b91c1c; }
.vn-conf-medium, .vn-conf-warn { background: var(--color-warning-soft); color: #b45309; }
.vn-item .vn-arrow { color: var(--color-muted); font-size: .78rem; }
.vn-item .vn-rec { color: var(--eco-orange-dark); }

/* Collapsible "Da verificare" drawer pinned to the right edge of the viewport */
.verify-drawer { position: fixed; top: 96px; right: 0; z-index: 1031; display: none; }
.verify-drawer.is-visible { display: block; }
.verify-handle {
  display: flex; align-items: center; gap: .4rem;
  background: var(--color-warning); color: #5b4106; border: none;
  border-radius: 12px 0 0 12px; padding: .55rem .75rem;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: -3px 3px 14px rgba(0,0,0,.18);
}
.verify-handle:hover { filter: brightness(.97); }
.verify-handle .vh-count { background: #fff; color: #b45309; border-radius: 999px; padding: 0 .45rem; font-size: .82rem; }
.verify-handle .vh-label { font-size: .82rem; }
.verify-drawer.is-open .verify-handle { display: none; }
.verify-panel {
  display: none; flex-direction: column; gap: .5rem;
  width: 340px; max-width: 90vw; max-height: 78vh;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-warning);
  border-radius: 12px 0 0 12px;
  box-shadow: -10px 10px 34px rgba(0,0,0,.20);
  padding: .7rem .8rem;
}
.verify-drawer.is-open .verify-panel { display: flex; }
.verify-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.verify-panel-head strong { color: #b45309; font-size: .95rem; }
.verify-panel .vp-close { width: 30px; height: 30px; padding: 0; border: 1px solid var(--color-line); background: var(--color-surface, #fff); border-radius: 8px; color: var(--color-muted); }
.verify-panel .vp-close:hover { background: var(--color-line-soft); }
.verify-panel-hint { margin: 0; }
.verify-panel .verify-nav-list { max-height: 42vh; }

/* Two sections inside the drawer: red "obbligatori" + yellow "da verificare" */
.verify-section { display: flex; flex-direction: column; gap: .35rem; }
.verify-section + .verify-section { margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--color-line); }
.verify-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; font-weight: 700; font-size: .85rem; }
.verify-section-block .verify-section-head { color: var(--color-danger); }
.verify-section-unc .verify-section-head { color: #b45309; }
.vn-conf-block { background: var(--color-danger-soft); color: #b91c1c; }
.vn-item-block:hover { border-color: var(--color-danger); background: var(--color-danger-soft); }
/* Urgent (red) handle when there are blocking fields to fill */
.verify-drawer.has-blocking .verify-handle { background: var(--color-danger); color: #fff; }
.verify-drawer.has-blocking .verify-handle .vh-count { color: var(--color-danger); }

.form-check-input:checked { background-color: var(--eco-orange); border-color: var(--eco-orange); }
.form-check-input:focus { box-shadow: var(--shadow-glow-orange); border-color: var(--eco-orange); }

.input-group-text { background: var(--color-surface); border-color: var(--color-line); color: var(--color-muted); }

/* =============================================================================
   Drag & drop zone
   ============================================================================= */
.dropzone {
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-xl);
  padding: 4rem 2rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, var(--eco-navy-soft) 0%, transparent 60%),
    var(--color-surface);
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}
.dropzone:hover {
  border-color: var(--eco-orange);
  background:
    radial-gradient(circle at 50% 0%, var(--eco-orange-soft) 0%, transparent 60%),
    var(--color-surface);
}
.dropzone.is-dragover {
  border-color: var(--eco-orange);
  background:
    radial-gradient(circle at 50% 0%, var(--eco-orange-soft) 0%, transparent 70%),
    var(--color-surface);
  transform: scale(1.005);
  box-shadow: var(--shadow-glow-orange);
}
.dropzone .icon-up {
  font-size: 2.5rem; color: var(--eco-orange);
  margin-bottom: 1.25rem;
  display: inline-flex;
  width: 88px; height: 88px;
  align-items: center; justify-content: center;
  background: var(--eco-orange-soft);
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(252, 82, 32, .15);
}
.dropzone h5 { font-size: 1.15rem; font-weight: 700; color: var(--color-ink); margin-bottom: .35rem; }
.dropzone .file-input { display: none; }

/* Compact horizontal dropzone */
.dropzone.dropzone-compact {
  padding: 1.25rem 1.5rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.dropzone.dropzone-compact .dz-left {
  display: flex; align-items: center; gap: 1rem;
  flex: 1; min-width: 0;
}
.dropzone.dropzone-compact .dz-icon {
  width: 56px; height: 56px;
  background: var(--eco-orange-soft);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--eco-orange);
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(252, 82, 32, .12);
  transition: transform var(--transition);
}
.dropzone.dropzone-compact:hover .dz-icon,
.dropzone.dropzone-compact.is-dragover .dz-icon {
  transform: scale(1.06);
}
.dropzone.dropzone-compact .dz-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.dropzone.dropzone-compact .dz-sub {
  font-size: .8rem;
  color: var(--color-muted);
  margin-top: .15rem;
}
.dropzone.dropzone-compact .dz-right {
  display: flex; align-items: center; gap: .65rem;
  cursor: default;
}
.dropzone.dropzone-compact .dz-right label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.dropzone.dropzone-compact .dz-right .ts-wrapper { min-width: 220px; }

/* =============================================================================
   Queue list (multi-file upload)
   ============================================================================= */
.queue-list {
  display: flex; flex-direction: column;
  gap: .65rem;
}
.queue-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 1rem;
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  align-items: center;
  transition: all 250ms cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
}
.queue-item:hover { border-color: var(--color-line); box-shadow: var(--shadow-xs); }
.queue-item .qi-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--color-line-soft);
  color: var(--color-muted);
  transition: all 250ms;
}
.queue-item .qi-body { min-width: 0; }
.queue-item .qi-title {
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .95rem;
}
.queue-item .qi-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .8rem; color: var(--color-muted);
  margin-top: .15rem;
}
.queue-item .qi-meta .doc-type-chip { font-size: .65rem; padding: .15rem .5rem; }
.queue-item .qi-status { display: inline-flex; align-items: center; gap: .35rem; }
.queue-item .qi-actions { display: inline-flex; gap: .35rem; }
.queue-item .qi-progress {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-line-soft);
  position: relative;
}
.queue-item .qi-progress .qi-bar {
  height: 100%; width: 0%;
  background: var(--eco-orange);
  border-radius: 2px;
  transition: width .25s ease;
}
.queue-item .qi-progress.indeterminate .qi-bar {
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--eco-orange), transparent);
  animation: qiIndet 1.4s ease-in-out infinite;
}
@keyframes qiIndet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* States */
.queue-item.state-pending .qi-icon { background: var(--color-line-soft); color: var(--color-muted); animation: qiHourglass 2.4s ease-in-out infinite; }
.queue-item.state-uploading .qi-icon { background: var(--eco-orange-soft); color: var(--eco-orange); }
.queue-item.state-processing .qi-icon { background: var(--eco-navy-soft); color: var(--eco-navy); animation: qiSpin 2s linear infinite; }
@keyframes qiHourglass {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}
.queue-item.state-completed { border-color: rgba(31, 138, 77, .3); }
.queue-item.state-completed .qi-icon { background: var(--eco-green-soft); color: var(--eco-green); }
.queue-item.state-needs_review { border-color: rgba(245, 158, 11, .35); }
.queue-item.state-needs_review .qi-icon { background: var(--color-warning-soft); color: #b45309; }
.queue-item.state-failed { border-color: rgba(230, 57, 70, .3); }
.queue-item.state-failed .qi-icon { background: var(--color-danger-soft); color: var(--color-danger); }
.queue-item.state-edited .qi-icon { background: var(--eco-navy-soft); color: var(--eco-navy); }

@keyframes qiSpin {
  to { transform: rotate(360deg); }
}

/* Animated entrance */
@keyframes qiEnter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.queue-item { animation: qiEnter .35s cubic-bezier(.16, 1, .3, 1) both; }

/* Tom Select select inside queue item */
.queue-item .ts-wrapper { min-width: 140px !important; }
.queue-item .ts-control { min-height: 30px !important; padding: .25rem .55rem !important; font-size: .78rem !important; }

/* Processing UX */
.processing-orb {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-orange) 0%, var(--eco-orange-dark) 70%);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 2rem;
  box-shadow: 0 12px 40px rgba(252, 82, 32, .35);
  position: relative;
}
.processing-orb::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--eco-orange);
  opacity: 0;
  animation: orbPulse 1.8s ease-out infinite;
}
.processing-orb::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--eco-orange);
  opacity: 0;
  animation: orbPulse 1.8s ease-out 0.6s infinite;
}
@keyframes orbPulse {
  0%   { transform: scale(0.8); opacity: 0; }
  20%  { opacity: .65; }
  100% { transform: scale(1.4); opacity: 0; }
}

.proc-stat { text-align: center; min-width: 80px; }
.proc-stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 700;
  margin-bottom: .25rem;
}
.proc-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

.phase-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem;
  background: var(--color-line-soft);
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-ink-soft);
}
.phase-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--eco-orange);
  animation: pulse 1.5s infinite;
}

/* =============================================================================
   Document grid (history)
   ============================================================================= */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.doc-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  display: flex; flex-direction: column;
  position: relative;
}
.doc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--eco-orange);
}
.doc-card .doc-thumb {
  height: 160px;
  background: linear-gradient(135deg, var(--eco-navy-deep) 0%, var(--eco-navy) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  color: rgba(255, 255, 255, .25);
  font-size: 3rem;
}
.doc-card .doc-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(252, 82, 32, .08) 0%, transparent 50%);
  pointer-events: none;
}
.doc-card .doc-thumb canvas {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0;
  transition: opacity .4s ease;
  background: #ffffff;
}
.doc-card .doc-thumb canvas.is-loaded { opacity: 1; }
.doc-card .doc-body {
  padding: 1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex; flex-direction: column;
  gap: .55rem;
}
.doc-card .doc-title {
  font-weight: 700; color: var(--color-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .95rem; line-height: 1.3;
  letter-spacing: -0.015em;
}
.doc-card .doc-meta {
  font-size: .78rem; color: var(--color-muted);
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
}
.doc-card .doc-type-chip {
  display: inline-block;
  padding: .2rem .6rem;
  background: var(--eco-navy-soft);
  color: var(--eco-navy);
  border-radius: var(--radius-sm);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.doc-card .card-delete-btn {
  opacity: 1;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  backdrop-filter: blur(4px);
}
.doc-card .card-delete-btn:hover {
  background: var(--color-danger) !important;
  color: white !important;
  border-color: var(--color-danger) !important;
  transform: scale(1.08);
}

/* =============================================================================
   Split view (PDF | fields)
   ============================================================================= */
.split-view { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 992px) { .split-view { grid-template-columns: 1fr; } }
.pdf-pane {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  position: sticky;
  top: calc(var(--navbar-h) + 1rem);
  max-height: calc(100vh - var(--navbar-h) - 2rem);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.pdf-toolbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-2);
}
.pdf-canvas-wrap {
  flex: 1; overflow: auto;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem;
  gap: 1rem;
}
.pdf-canvas-wrap canvas {
  background: white;
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  max-width: 100%;
  display: block;
}
.pdf-page-wrap {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  transition: box-shadow .6s ease;
}
.pdf-page-wrap.is-jumped {
  box-shadow: 0 0 0 4px var(--eco-orange), 0 12px 32px rgba(252, 82, 32, .4);
}
.eco-highlight {
  position: absolute;
  background: rgba(252, 82, 32, 0.22);
  border: 2px solid var(--eco-orange);
  border-radius: 3px;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(252, 82, 32, .2), 0 6px 18px rgba(252, 82, 32, .3);
  animation: highlightAppear .55s cubic-bezier(.16, 1, .3, 1) both, highlightPulse 2s ease-in-out 0.55s infinite;
  z-index: 5;
}
.eco-highlight:hover { background: rgba(252, 82, 32, 0.32); }

/* Approximate highlight (bbox came from the LLM, not from PDF text-search) */
.eco-highlight.is-approximate {
  background: rgba(252, 82, 32, 0.14);
  border-style: dashed;
  border-width: 2px;
  animation: highlightAppear .55s cubic-bezier(.16, 1, .3, 1) both;
}
.eco-highlight.is-approximate[data-confidence="low"] {
  background: rgba(252, 82, 32, 0.08);
  border-color: rgba(252, 82, 32, .7);
}

/* Inline pill next to a field label when the LLM is uncertain about the bbox */
.src-conf-pill {
  display: inline-block;
  margin-left: .35rem;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  cursor: help;
}
.src-conf-pill.src-conf-low {
  background: rgba(245, 158, 11, .15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .35);
}
/* Per-field "AI not fully sure" warning triangle (replaces the green check
   when source confidence is medium/low). */
.src-conf-icon { cursor: help; }
.src-conf-icon-medium { color: #f59e0b; }   /* ambra: confidence media */
.src-conf-icon-low    { color: #d97706; }   /* arancio: confidence bassa */

/* Required-field marker in the review (a symbol, NOT a colored field) */
.req-mark { font-size: .62rem; color: #dc2626; vertical-align: super; margin-left: .1rem; cursor: help; }

/* History card "missing fields" accumulative warning badge */
.miss-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.miss-badge.miss-red    { background: #fee2e2; color: #b91c1c; border: 1px solid rgba(220, 38, 38, .45); }
.miss-badge.miss-orange { background: #fef3c7; color: #b45309; border: 1px solid rgba(245, 158, 11, .45); }

/* Section combobox inline hint (document-type editor) */
.section-hint { min-height: 1em; margin-top: 2px; line-height: 1.2; }
.section-hint .bi { font-size: .85em; }

/* Windowed page selector for multi-record docs */
.record-pager .nav-pills { gap: .25rem; }
.record-pager .nav-pills .nav-link { padding: .25rem .6rem; font-size: .85rem; min-width: 2.2rem; text-align: center; }
.record-pager input[type="number"] { text-align: center; }
@keyframes highlightAppear {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(252, 82, 32, .25), 0 6px 18px rgba(252, 82, 32, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(252, 82, 32, .12), 0 8px 28px rgba(252, 82, 32, .55); }
}

.fields-pane { display: flex; flex-direction: column; gap: 1rem; }
.field-group-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-xs);
}
.field-group-card h6 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--eco-orange);
  margin-bottom: .85rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--color-line);
  font-weight: 800;
  display: flex; align-items: center; gap: .5rem;
}
.field-group-card h6::before {
  content: '';
  width: 16px; height: 2px;
  background: var(--eco-orange);
  border-radius: 2px;
}

/* Streaming theatrical reveal — campi che appaiono uno alla volta come se
   l'AI li stesse "scrivendo" davanti agli occhi dell'utente. */
.field-group.field-streaming {
  position: relative;
}
.field-group.field-streaming .form-control,
.field-group.field-streaming .form-select {
  background: linear-gradient(90deg, var(--color-line-soft) 0%, rgba(252,82,32,.15) 50%, var(--color-line-soft) 100%);
  background-size: 200% 100%;
  animation: streamShimmer 1s linear infinite;
  color: transparent;
  text-shadow: none;
  caret-color: transparent;
}
.field-group.field-streaming::after {
  content: '';
  position: absolute;
  right: .8rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--eco-orange);
  box-shadow: 0 0 0 0 rgba(252, 82, 32, .65);
  animation: streamDot 1.2s ease-in-out infinite;
}
.field-group.field-revealed .form-control,
.field-group.field-revealed .form-select {
  animation: fieldRevealFlash .9s ease-out;
}
@keyframes streamShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes streamDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 82, 32, .55); transform: translateY(-50%) scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(252, 82, 32, 0); transform: translateY(-50%) scale(1.15); }
}
@keyframes fieldRevealFlash {
  0%   { background: var(--eco-orange-soft); }
  100% { background: var(--color-surface); }
}
.field-group-card.is-revealing {
  animation: cardArrive .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes cardArrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   Login page
   ============================================================================= */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg);
}
@media (max-width: 992px) { .login-shell { grid-template-columns: 1fr; } }

.login-aside {
  background:
    linear-gradient(135deg, rgba(17, 14, 54, .92) 0%, rgba(44, 34, 116, .82) 60%, rgba(252, 82, 32, .65) 100%),
    radial-gradient(circle at 30% 20%, rgba(252, 82, 32, .35), transparent 50%),
    var(--eco-navy-deep);
  position: relative; overflow: hidden;
  padding: 3rem;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
.login-aside .brand-wordmark-xl {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  line-height: 1;
  user-select: none;
}
.login-aside .brand-wordmark-xl .wm-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(.6rem, 1.2vw, 1.2rem);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  letter-spacing: -0.03em;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .35));
}
.login-aside .brand-wordmark-xl .wm-eco {
  color: var(--eco-green);
  text-shadow: 0 2px 12px rgba(31, 138, 77, .35);
}
.login-aside .brand-wordmark-xl .wm-dem { color: #ffffff; }
.login-aside .brand-wordmark-xl .wm-icon {
  color: var(--eco-green);
  font-size: clamp(1.8rem, 4.4vw, 4rem);
  display: inline-flex;
  filter: drop-shadow(0 2px 8px rgba(31, 138, 77, .45));
}
.login-aside .brand-wordmark-xl .wm-tagline {
  margin-top: clamp(.6rem, 1vw, 1rem);
  font-size: clamp(.65rem, 1vw, .92rem);
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
}
@media (max-width: 992px) { .login-aside { display: none; } }
.login-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px);
  pointer-events: none;
}
.login-aside .brand-display {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  line-height: 1;
}
.login-aside .brand-display .wm-row {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.login-aside .brand-display .wm-eco { color: var(--eco-green); text-shadow: 0 2px 8px rgba(31, 138, 77, .3); }
.login-aside .brand-display .wm-dem { color: white; }
.login-aside .brand-display .wm-icon { color: var(--eco-green); font-size: 1.6rem; }
.login-aside .brand-display .wm-tagline {
  font-size: .68rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, .5);
  margin-top: .55rem;
  font-weight: 600;
}
.login-aside .hero-text { position: relative; z-index: 1; }
.login-aside .hero-text .eyebrow {
  display: inline-block;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(252, 82, 32, .2);
  border: 1px solid rgba(252, 82, 32, .4);
  padding: .35rem .75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
  color: #ffd5c2;
}
.login-aside h1 {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: white;
}
.login-aside h1 em { color: var(--eco-orange); font-style: normal; }
.login-aside .hero-sub { font-size: 1.05rem; opacity: 0.78; max-width: 480px; line-height: 1.55; }
.login-aside .features {
  display: flex; flex-direction: column; gap: .85rem;
  margin-top: 2rem;
  position: relative; z-index: 1;
}
.login-aside .feature-row { display: flex; align-items: flex-start; gap: .85rem; font-size: .92rem; opacity: .88; }
.login-aside .feature-row i {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(252, 82, 32, .18);
  color: var(--eco-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .92rem;
  flex-shrink: 0;
}
.login-aside .footer-meta { font-size: .76rem; opacity: 0.45; letter-spacing: 0.04em; }

.login-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 2rem;
}
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 2.75rem;
  width: 100%; max-width: 440px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-line);
}
.login-card .mobile-brand {
  display: none;
  text-align: center; margin-bottom: 1.5rem;
}
@media (max-width: 992px) { .login-card .mobile-brand { display: block; } }
.login-card .mobile-brand img { height: 44px; }
.login-card h1 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: .35rem;
  letter-spacing: -0.03em;
}
.login-card .subtitle { color: var(--color-muted); margin-bottom: 2rem; font-size: .94rem; }
.login-card h1 .login-mark {
  display: inline-block;
  vertical-align: -2px;
  margin-left: .35rem;
  animation: loginMarkSpark 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes loginMarkSpark {
  0%, 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(252, 82, 32, 0)); }
  50%      { transform: rotate(15deg) scale(1.1); filter: drop-shadow(0 0 4px rgba(252, 82, 32, .55)); }
}

/* "Oppure" divider between local login and OAuth providers */
.login-divider {
  display: flex; align-items: center;
  margin: 1.5rem 0 1rem;
  color: var(--color-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1;
  height: 1px;
  background: var(--color-line);
}
.login-divider span { padding: 0 .85rem; }

/* Microsoft brand login button — segue le linee guida ufficiali Microsoft per
   "Sign in with Microsoft" buttons: sfondo bianco, bordo grigio, logo 4 quadrati. */
.btn-ms-login {
  display: flex; align-items: center; justify-content: center;
  gap: .65rem;
  width: 100%;
  padding: .65rem 1rem;
  background: #ffffff;
  color: #5e5e5e;
  border: 1px solid #8c8c8c;
  border-radius: var(--radius-sm);
  font-family: 'Segoe UI', var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-ms-login:hover {
  background: #f8f8f8;
  border-color: #5e5e5e;
  color: #5e5e5e;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-ms-login:active {
  transform: translateY(0);
  background: #f0f0f0;
}
.btn-ms-login svg { flex-shrink: 0; }
.btn-ms-login.is-loading {
  pointer-events: none;
  opacity: .7;
}
html[data-theme="dark"] .btn-ms-login {
  background: #ffffff;
  color: #5e5e5e;
  border-color: #8c8c8c;
}

/* =============================================================================
   Filters bar
   ============================================================================= */
.filters-bar {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-xs);
}
.filters-bar .filter-search { flex: 1; min-width: 220px; position: relative; }
.filters-bar .filter-search input { padding-left: 2.5rem; }
.filters-bar .filter-search .bi {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--color-muted);
}

/* =============================================================================
   Command Palette (⌘K / Ctrl+K)
   ============================================================================= */
.cmd-palette-shell {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex; justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  animation: cmdFadeIn .18s ease-out;
}
.cmd-palette-shell.is-closing { animation: cmdFadeOut .18s ease-out forwards; }
.cmd-palette-bg {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cmd-palette-card {
  position: relative;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: cmdSlideDown .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes cmdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdFadeOut { to { opacity: 0; } }
@keyframes cmdSlideDown { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.cmd-input-row {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--color-line);
}
.cmd-input-row > .bi { font-size: 1.1rem; color: var(--color-muted); }
.cmd-input {
  flex: 1; border: none; outline: none;
  font-size: 1.05rem; font-family: var(--font-sans);
  color: var(--color-ink);
  background: transparent;
}
.cmd-input::placeholder { color: var(--color-muted); }

.cmd-kbd, kbd {
  display: inline-block;
  padding: .15rem .45rem;
  background: var(--color-line-soft);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-size: .72rem;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-muted);
  min-width: 22px;
  text-align: center;
}

.cmd-results {
  overflow-y: auto;
  padding: .35rem 0;
  flex: 1;
  min-height: 200px;
}
.cmd-group-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: .85rem 1.2rem .35rem;
}
.cmd-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem 1.2rem;
  cursor: pointer;
  transition: background .12s;
}
.cmd-item:hover { background: var(--color-bg); }
.cmd-item.is-active {
  background: var(--eco-orange-soft);
  position: relative;
}
.cmd-item.is-active::before {
  content: ''; position: absolute;
  left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--eco-orange); border-radius: 2px;
}
.cmd-item > .bi {
  font-size: 1.1rem;
  color: var(--color-muted);
  width: 22px; text-align: center;
  flex-shrink: 0;
}
.cmd-item.is-active > .bi { color: var(--eco-orange); }
.cmd-item-body { flex: 1; min-width: 0; }
.cmd-item-label {
  font-size: .92rem; font-weight: 600; color: var(--color-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-item-hint {
  font-size: .76rem; color: var(--color-muted);
  margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--color-muted);
}
.cmd-empty svg.illustration { width: 130px; }
.cmd-footer {
  display: flex; gap: 1rem;
  padding: .65rem 1.2rem;
  border-top: 1px solid var(--color-line);
  font-size: .76rem;
  color: var(--color-muted);
  background: var(--color-bg);
}
.cmd-footer kbd { font-size: .68rem; padding: .1rem .35rem; min-width: auto; }

/* =============================================================================
   Toast
   ============================================================================= */
.eco-toast-container {
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1080;
  display: flex; flex-direction: column; gap: .65rem;
  max-width: 420px;
}
.eco-toast {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
  padding: .9rem 1.15rem;
  display: flex; align-items: flex-start; gap: .75rem;
  animation: toastSlide .25s ease-out;
}
.eco-toast.success { border-left: 3px solid var(--eco-green); }
.eco-toast.error   { border-left: 3px solid var(--color-danger); }
.eco-toast.warning { border-left: 3px solid var(--color-warning); }
.eco-toast.info    { border-left: 3px solid var(--eco-orange); }
.eco-toast .icon { font-size: 1.25rem; line-height: 1; }
.eco-toast.success .icon { color: var(--eco-green); }
.eco-toast.error .icon   { color: var(--color-danger); }
.eco-toast.warning .icon { color: var(--color-warning); }
.eco-toast.info .icon    { color: var(--eco-orange); }
.eco-toast .body { flex: 1; font-size: .9rem; }
.eco-toast .close-btn { background: none; border: none; color: var(--color-muted); cursor: pointer; font-size: 1.1rem; padding: 0; line-height: 1; }

@keyframes toastSlide {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* =============================================================================
   Tom Select theme override
   ============================================================================= */
.ts-wrapper { font-family: var(--font-sans); min-width: 200px; }
.ts-wrapper.single .ts-control,
.ts-wrapper.multi  .ts-control {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-line) !important;
  background: var(--color-surface) !important;
  padding: .55rem 2.4rem .55rem .85rem !important;
  min-height: 42px;
  box-shadow: none !important;
  font-size: .92rem;
  color: var(--color-ink);
}
.ts-wrapper.single .ts-control::after {
  /* the bootstrap5 theme draws the chevron here; ensure it's positioned right */
  right: 1rem !important;
  top: 50% !important;
  margin-top: -3px !important;
  border-color: var(--color-muted) transparent transparent transparent !important;
}
.ts-wrapper.focus .ts-control,
.ts-wrapper.single.input-active .ts-control {
  border-color: var(--eco-orange) !important;
  box-shadow: var(--shadow-glow-orange) !important;
}
.ts-wrapper .ts-control > input { font-family: var(--font-sans); color: var(--color-ink); }
.ts-wrapper .ts-control > .item { color: var(--color-ink); }
.ts-wrapper .ts-control > input::placeholder { color: var(--color-muted); }

/* hide the original native select fully (Tom Select adds .ts-hidden-accessible) */
.ts-hidden-accessible {
  display: none !important;
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  clip: rect(0,0,0,0); border: 0;
}

.ts-dropdown {
  border-radius: var(--radius-md);
  border-color: var(--color-line);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  margin-top: 4px;
}
.ts-dropdown .active { background: var(--eco-orange-soft); color: var(--eco-orange-dark); }
.ts-dropdown .option { padding: .55rem .85rem; }

/* =============================================================================
   Misc utilities
   ============================================================================= */
.muted { color: var(--color-muted); }
.fw-medium    { font-weight: 500; }
.fw-semibold  { font-weight: 600; }
.text-eco-primary { color: var(--eco-navy); }
.text-eco-accent  { color: var(--eco-orange); }
.bg-eco-primary-soft { background: var(--eco-navy-soft); }
.divider { height: 1px; background: var(--color-line); margin: 1.5rem 0; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-muted); }
.empty-state .bi { font-size: 3rem; opacity: 0.3; margin-bottom: 1rem; display: block; }
.empty-state svg.illustration {
  width: 180px; height: auto; margin: 0 auto 1.25rem; display: block;
  animation: illusFloat 5s ease-in-out infinite;
}
.empty-state .illustration-title { font-size: 1.05rem; font-weight: 700; color: var(--color-ink); margin-bottom: .25rem; letter-spacing: -0.01em; }
.empty-state .illustration-sub { font-size: .9rem; color: var(--color-muted); max-width: 380px; margin: 0 auto 1.5rem; line-height: 1.5; }
@keyframes illusFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.spinner-eco {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--color-line);
  border-top-color: var(--eco-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-title {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.75rem;
}
.page-title h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.page-title .subtitle { color: var(--color-muted); font-size: .92rem; margin-top: .15rem; }

main.container-fluid {
  max-width: 1480px;
  margin: 0 auto;
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

/* =============================================================================
   Tables (where they survive)
   ============================================================================= */
.table { font-family: var(--font-sans); }
.table > thead > tr > th {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
  padding: .85rem .85rem;
}
.table > tbody > tr > td {
  border-color: var(--color-line-soft);
  padding: .85rem .85rem;
  vertical-align: middle;
}
.table > tbody > tr:hover { background: var(--color-bg); }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 991.98px) {
  .navbar.navbar-eco { height: auto; padding: .75rem 1rem; }
  .navbar.navbar-eco .container-fluid {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .navbar.navbar-eco .navbar-brand { grid-column: 1; grid-row: 1; }
  .navbar.navbar-eco .user-menu-slot { grid-column: 2; grid-row: 1; justify-self: end; }
  .navbar.navbar-eco .navbar-collapse {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: .75rem;
    padding-bottom: .25rem;
    justify-self: stretch;
  }
  .navbar.navbar-eco .navbar-collapse > .navbar-nav { flex-direction: column; gap: .15rem; }
  .navbar.navbar-eco .nav-link.active::after { display: none; }
}
@media (max-width: 768px) {
  body { font-size: 14px; }
  .kpi-card .kpi-value { font-size: 1.85rem; }
  .login-card { padding: 2rem 1.5rem; }
  main.container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* =============================================================================
   Floating chat assistant (AI)
   ============================================================================= */
.chat-fab {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-orange) 0%, var(--eco-orange-dark) 100%);
  color: white;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(252, 82, 32, .35);
  transition: all var(--transition);
  z-index: 1090;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 18px 48px rgba(252, 82, 32, .45); }
.chat-fab .chat-fab-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--eco-orange);
  opacity: 0;
  animation: chatFabPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes chatFabPulse {
  0%   { transform: scale(0.95); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.chat-fab.is-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(.6) translateX(20px);
}
.chat-fab.is-open .chat-fab-pulse { display: none; }

.chat-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-line);
  box-shadow: -16px 0 50px rgba(15, 23, 42, .12);
  display: flex; flex-direction: column;
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  z-index: 1089;
}
.chat-panel.is-open { transform: translateX(0); }

.chat-panel-header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--color-bg);
}
.chat-panel-title { font-size: 1rem; font-weight: 700; color: var(--color-ink); display: inline-flex; align-items: center; gap: .5rem; }
.chat-panel-sub { font-size: .76rem; color: var(--color-muted); margin-top: .15rem; }

.chat-panel-body {
  flex: 1; overflow-y: auto;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  scroll-behavior: smooth;
}

.chat-welcome { text-align: center; padding: 1rem 0; color: var(--color-muted); }
.chat-welcome-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-orange-soft), rgba(252, 82, 32, .15));
  color: var(--eco-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  animation: chatWelcomeGlow 3s ease-in-out infinite;
}
@keyframes chatWelcomeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 82, 32, .3); }
  50%      { box-shadow: 0 0 0 14px rgba(252, 82, 32, 0); }
}
.chat-welcome h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-ink); margin-bottom: .35rem; }
.chat-welcome p { font-size: .9rem; max-width: 320px; margin: 0 auto 1.25rem; }
.chat-suggestions { display: flex; flex-direction: column; gap: .5rem; max-width: 360px; margin: 0 auto; }
.chat-suggestion {
  padding: .65rem .9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: .85rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.chat-suggestion:hover {
  border-color: var(--eco-orange);
  background: var(--eco-orange-soft);
  color: var(--eco-orange-dark);
  transform: translateX(2px);
}

.chat-msg { display: flex; gap: .75rem; max-width: 92%; animation: chatMsgEnter .25s ease-out; }
@keyframes chatMsgEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .chat-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}
.chat-msg.user .chat-msg-avatar { background: var(--eco-navy); color: white; font-weight: 700; }
.chat-msg.assistant .chat-msg-avatar { background: var(--eco-orange-soft); color: var(--eco-orange); }
.chat-msg .chat-msg-bubble {
  padding: .65rem .9rem;
  border-radius: var(--radius-md);
  font-size: .9rem;
  line-height: 1.45;
}
.chat-msg.user .chat-msg-bubble { background: var(--eco-navy); color: white; border-top-right-radius: 3px; }
.chat-msg.assistant .chat-msg-bubble { background: var(--color-bg); color: var(--color-ink); border-top-left-radius: 3px; }
.chat-msg.assistant .chat-msg-bubble p { margin: 0 0 .5rem; }
.chat-msg.assistant .chat-msg-bubble p:last-child { margin-bottom: 0; }
.chat-msg.assistant .chat-msg-bubble strong { color: var(--eco-navy); }
.chat-citations { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.chat-citation {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem;
  background: var(--eco-orange-soft);
  color: var(--eco-orange-dark);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(252, 82, 32, .2);
}
.chat-citation:hover { background: var(--eco-orange); color: white; }
.chat-followups { margin-top: .65rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-followup {
  text-align: left;
  padding: .45rem .65rem;
  background: transparent;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: .8rem;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--transition-fast);
}
.chat-followup:hover { background: var(--eco-orange-soft); color: var(--eco-orange-dark); border-color: var(--eco-orange); border-style: solid; }

.chat-typing {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .65rem .9rem;
}
.chat-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--eco-orange);
  animation: chatTyping 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatTyping {
  0%, 80%, 100% { transform: scale(0.65); opacity: .5; }
  40%           { transform: scale(1);    opacity: 1; }
}

.chat-panel-footer {
  border-top: 1px solid var(--color-line);
  padding: .85rem 1rem 1rem;
  background: var(--color-bg);
}
.chat-panel-footer form {
  display: flex; gap: .5rem; align-items: flex-end;
}
.chat-panel-footer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: .65rem .85rem;
  font-family: var(--font-sans);
  font-size: .92rem;
  color: var(--color-ink);
  background: var(--color-surface);
  max-height: 140px;
  min-height: 42px;
  line-height: 1.4;
}
.chat-panel-footer textarea:focus { outline: none; border-color: var(--eco-orange); box-shadow: var(--shadow-glow-orange); }
.chat-send {
  width: 42px; height: 42px;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}

/* Dark mode */
html[data-theme="dark"] .chat-panel { background: var(--color-surface); border-color: var(--color-line); }
html[data-theme="dark"] .chat-panel-header { background: var(--color-bg-warm); }
html[data-theme="dark"] .chat-panel-footer { background: var(--color-bg-warm); }
html[data-theme="dark"] .chat-panel-footer textarea { background: var(--color-surface); color: var(--color-ink); }
html[data-theme="dark"] .chat-suggestion { background: var(--color-surface-2); border-color: var(--color-line); color: var(--color-ink-soft); }
html[data-theme="dark"] .chat-msg.assistant .chat-msg-bubble { background: var(--color-surface-2); }

/* =============================================================================
   Glassy scroll-aware navbar — reinforces hierarchy on scroll
   ============================================================================= */
.navbar.navbar-eco {
  transition: background 350ms ease, box-shadow 350ms ease, padding 350ms ease;
}
.navbar.navbar-eco.is-scrolled {
  background: rgba(17, 14, 54, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  height: 60px;
}
.navbar.navbar-eco.is-scrolled .wm-row { font-size: 1rem; }
.navbar.navbar-eco.is-scrolled .wm-tagline { opacity: 0; }

/* =============================================================================
   Editorial hero (used on Dashboard / page tops)
   ============================================================================= */
.page-hero {
  position: relative;
  padding: 2rem 0 2.5rem;
  margin-bottom: .5rem;
}
.page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center; gap: .5rem;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--eco-orange);
  margin-bottom: 1.2rem;
}
.page-hero .hero-eyebrow::before {
  content: '';
  width: 28px; height: 1.5px;
  background: var(--eco-orange);
  display: inline-block;
}
.page-hero .hero-title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 .65rem;
  color: var(--color-ink);
  word-break: normal;
  overflow-wrap: break-word;
}
.page-hero .hero-title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(120deg, var(--eco-orange) 0%, var(--eco-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* italic glyphs lean right and can clip past their advance width: give a tiny
     end-padding (with negative margin to keep layout flow) */
  display: inline-block;
  padding-inline-end: 0.12em;
  margin-inline-end: -0.06em;
}
.page-hero .hero-sub {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin: 0;
  max-width: 60ch;
}
.page-hero .hero-side {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* Activity feed */
.activity-feed { display: flex; flex-direction: column; gap: .65rem; max-height: 480px; overflow-y: auto; }
.activity-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem .8rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  animation: actEnter .35s cubic-bezier(.16, 1, .3, 1) both;
}
.activity-item:hover { background: var(--color-line-soft); border-color: var(--color-line); }
.activity-item .act-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  background: var(--eco-orange-soft);
  color: var(--eco-orange);
}
.activity-item.act-extract .act-icon { background: var(--eco-navy-soft); color: var(--eco-navy); }
.activity-item.act-edit_fields .act-icon { background: var(--color-info-soft); color: var(--color-info); }
.activity-item.act-delete_doc .act-icon { background: var(--color-danger-soft); color: var(--color-danger); }
.activity-item.act-export .act-icon { background: var(--eco-green-soft); color: var(--eco-green); }
.activity-item .act-body { flex: 1; min-width: 0; }
.activity-item .act-text { font-size: .85rem; color: var(--color-ink); line-height: 1.35; }
.activity-item .act-text strong { color: var(--color-ink); font-weight: 600; }
.activity-item .act-meta { font-size: .72rem; color: var(--color-muted); margin-top: .15rem; }
.activity-item.act-fresh { background: linear-gradient(90deg, var(--eco-orange-soft), transparent 60%); }
@keyframes actEnter {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Live activity pill */
.live-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .8rem;
  background: rgba(31, 138, 77, .12);
  color: var(--eco-green-dark);
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-pill .live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--eco-green);
  box-shadow: 0 0 0 0 rgba(31, 138, 77, .55);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 138, 77, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(31, 138, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 138, 77, 0); }
}

/* =============================================================================
   Scroll reveal — opacity + lift on enter viewport
   ============================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 320ms; }

/* =============================================================================
   KPI cards: 3D tilt prep + counter font
   ============================================================================= */
.kpi-card {
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms;
  transform-style: preserve-3d;
}
.kpi-card .kpi-value {
  font-feature-settings: "tnum", "ss01";
}
.kpi-card .kpi-spark {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  opacity: .14;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 100%;
}

/* =============================================================================
   Magnetic primary buttons — also subtle shimmer
   ============================================================================= */
.btn-eco-primary {
  position: relative;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms, background 200ms;
}
.btn-eco-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transition: left .7s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.btn-eco-primary:hover::before { left: 130%; }

/* =============================================================================
   Skeleton loaders (replace plain spinners on grids/tables)
   ============================================================================= */
.skeleton {
  background: linear-gradient(90deg, var(--color-line-soft) 0%, rgba(230,233,235,.7) 50%, var(--color-line-soft) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skelShimmer 1.4s linear infinite;
}
.skeleton.skeleton-card {
  height: 220px;
  border-radius: var(--radius-lg);
}
.skeleton.skeleton-line { height: 12px; }
.skeleton.skeleton-line.short { width: 40%; }
.skeleton.skeleton-line.medium { width: 70%; }
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   Marquee strip — used on dashboard for live stats
   ============================================================================= */
.eco-marquee {
  background: linear-gradient(90deg, var(--eco-navy-deep) 0%, var(--eco-navy-dark) 50%, var(--eco-navy-deep) 100%);
  color: rgba(255, 255, 255, .82);
  border-radius: var(--radius-lg);
  margin: 1.25rem 0 1.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 32px rgba(17, 14, 54, .15);
}
.eco-marquee::before, .eco-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 60px; z-index: 2;
  pointer-events: none;
}
.eco-marquee::before { left: 0; background: linear-gradient(90deg, var(--eco-navy-deep) 0%, transparent 100%); }
.eco-marquee::after  { right: 0; background: linear-gradient(270deg, var(--eco-navy-deep) 0%, transparent 100%); }
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  padding: .9rem 0;
  animation: marqueeScroll 50s linear infinite;
  gap: 3rem;
}
.eco-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem;
  letter-spacing: 0.01em;
}
.marquee-item strong {
  color: var(--eco-orange);
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.marquee-item .sep {
  color: rgba(255, 255, 255, .25);
  margin: 0 1rem;
  font-size: 1.2em;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =============================================================================
   Polish tweaks
   ============================================================================= */
.eco-card { transition: box-shadow 320ms, transform 320ms cubic-bezier(.16, 1, .3, 1), border-color 200ms; }
.eco-card:hover { transform: translateY(-1px); }

.doc-card { transition: transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms, border-color 200ms; }

.btn-eco-outline { transition: all 220ms cubic-bezier(.16, 1, .3, 1); }
.btn-eco-outline:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }