/* ==========================================================================
   Premium redesign — Notion-warm direction (pilot)
   Loaded AFTER admin-shell.css so token overrides + component reskins win.
   Scope: Login + Dashboard. Everything else inherits softened tokens and
   keeps working without markup changes.
   ========================================================================== */

/* ---- 1. Font ---- */
@import url('https://rsms.me/inter/inter.css');

/* ---- 2. Token overrides (Notion-warm palette) ----
   We re-bind the SAME CSS variables admin-shell.css already uses, so every
   component that reads var(--bg), var(--white), var(--accent), etc. picks up
   the new look automatically. */
:root {
  /* Warm off-white canvas, near-white surfaces — Notion's signature feel */
  --bg: #FAF9F7;
  --white: #FFFFFF;
  --row-alt: #F7F6F3;
  --border: #EBEAE8;

  /* Warm-dark ink instead of cool slate. #37352F is literally Notion's body text */
  --text-primary: #37352F;
  --text-secondary: #787774;

  /* Accent: Notion blue. Still vivid but warmer than the previous #3b82f6 */
  --accent: #2383E2;
  --accent-dark: #0B6BCB;
  --accent-light: #E8F2FB;

  /* Status colors aligned to Notion's palette — warmer, less harsh */
  --success: #0F7B6C;
  --warning: #CB912F;
  --danger: #E03E3E;

  /* Sidebar: warm off-white instead of dark navy. Premium feel + better for
     long sessions in well-lit warehouses. */
  --sidebar-bg: #F7F6F3;
  --sidebar-hover: #EFEEEB;
  --sidebar-active: #2383E2;

  /* Soft Notion-style multi-layer shadows. Layered ambient + key shadow,
     warmer tone (rgba uses brown undertone instead of pure black). */
  --shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 1px 3px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 15, 15, 0.06), 0 2px 4px rgba(15, 15, 15, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 15, 15, 0.08), 0 4px 8px rgba(15, 15, 15, 0.04);

  /* Notion uses small 3-6px radii. We keep the existing scale but tighten it. */
  --radius: 6px;
  --radius-lg: 8px;
}

/* ---- 3. Global typography refresh ---- */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter's stylistic alternates */
  letter-spacing: -0.011em;                        /* Notion's tracking */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
}

body {
  background: var(--bg);
}

/* Tighter, more confident headings */
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* ==========================================================================
   LOGIN — full premium reskin
   ========================================================================== */

#login-screen,
#register-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Soft warm gradient — barely perceptible but adds depth */
  background:
    radial-gradient(ellipse at top left,  rgba(35, 131, 226, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(203, 145, 47, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FAF9F7 0%, #F2F0EB 100%);
}

#register-screen {
  /* Kill the inline dark gradient from index.html */
  background:
    radial-gradient(ellipse at top right, rgba(35, 131, 226, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(15, 123, 108, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FAF9F7 0%, #F2F0EB 100%) !important;
}

.login-card {
  background: var(--white);
  border-radius: 14px;
  padding: 36px 40px 28px;
  width: 100%;
  max-width: 420px;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 2px 4px rgba(15, 15, 15, 0.04),
    0 14px 40px rgba(15, 15, 15, 0.07);
  position: relative;
  animation: cardEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Brand row: SVG logo + wordmark side by side, centered. Premium feel —
   acknowledges the product without shouting it. */
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* Slightly smaller logo in compact mode to leave room for everything */
.login-logo { width: 44px; height: 44px; }

.login-logo {
  filter: drop-shadow(0 4px 14px rgba(35, 131, 226, 0.22));
  flex-shrink: 0;
}

.login-wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
}

/* Friendly H1 — Notion-style warm greeting, not a brand shout */
.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-align: center;
  line-height: 1.2;
}

.login-card .subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: -0.005em;
}

.login-card .form-group { margin-bottom: 12px; }
.login-trust { margin-top: 18px; padding-top: 16px; }

/* Trust signals — small reassurance row at bottom of the card. Subtle,
   neutral, but signals 'this is serious enterprise software'. */
.login-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.login-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.login-trust svg {
  opacity: 0.75;
}

.login-trust-sep {
  opacity: 0.4;
}

.login-card .form-group {
  margin-bottom: 14px;
}

/* Notion uses sentence case, never UPPERCASE — feels much more premium &
   human. admin-shell.css forces uppercase on .login-card label AND
   .form-group label, so we override both with high specificity. */
.login-card label,
.login-card .form-group label,
#login-screen label,
#register-screen label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  text-transform: none !important;     /* kill admin-shell uppercase */
}

.login-card .form-group input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  outline: none;
}

/* Icon-in-input pattern. The icon is set via a data-icon attribute on the
   .form-group so we don't need to wrap each input in extra markup. SVG is
   embedded as data URI so we have zero asset deps. */
.login-card .form-group--icon {
  position: relative;
}

.login-card .form-group--icon input,
.login-card .form-group--icon input[type="text"],
.login-card .form-group--icon input[type="password"],
.login-card .form-group--icon input[type="email"] {
  padding-left: 38px !important;
}

/* Hide Edge's native show-password 'eye' button. It uses a different style
   than the rest of the icons and breaks visual rhythm. Modern browsers all
   support autocomplete='current-password' so the affordance is still there
   via the password manager. */
.login-card input::-ms-reveal,
.login-card input::-ms-clear {
  display: none;
}

.login-card .form-group--icon::before {
  content: '';
  position: absolute;
  left: 12px;
  bottom: 11px;                 /* anchored to the input's vertical center */
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  opacity: 0.7;                 /* bumped from 0.55 for better visibility */
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1;                   /* sit above any browser default styling */
}

/* When the hint <small> is present the icon needs to lift to keep aligned
   with the input itself (not the hint below). */
.login-card .form-group--icon:has(.form-hint)::before {
  bottom: 31px;
}

/* User icon */
.login-card .form-group--icon[data-icon="user"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
/* Briefcase icon (cod companie) — universally readable as 'company/business',
   replaces the abstract 4-dots-in-rectangle that didn't read clearly. */
.login-card .form-group--icon[data-icon="building"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>");
}
/* Lock icon */
.login-card .form-group--icon[data-icon="lock"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
/* Server icon (advanced) */
.login-card .form-group--icon[data-icon="server"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='8' rx='2'/><rect x='2' y='14' width='20' height='8' rx='2'/><line x1='6' y1='6' x2='6.01' y2='6'/><line x1='6' y1='18' x2='6.01' y2='18'/></svg>");
}
/* Mail icon (register email field) */
.login-card .form-group--icon[data-icon="mail"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
}

/* On focus, icon adopts accent color & full opacity */
.login-card .form-group--icon:focus-within::before {
  opacity: 1;
}

.login-card .form-group--icon[data-icon="user"]:focus-within::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232383E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.login-card .form-group--icon[data-icon="building"]:focus-within::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232383E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>");
}
.login-card .form-group--icon[data-icon="lock"]:focus-within::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232383E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
.login-card .form-group--icon[data-icon="server"]:focus-within::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232383E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='8' rx='2'/><rect x='2' y='14' width='20' height='8' rx='2'/><line x1='6' y1='6' x2='6.01' y2='6'/><line x1='6' y1='18' x2='6.01' y2='18'/></svg>");
}
.login-card .form-group--icon[data-icon="mail"]:focus-within::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232383E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
}

/* Optional badge — '(opțional)' beside a label feels lighter when grayed */
.form-optional {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 11.5px;
  margin-left: 4px;
}

/* Inline hint text under inputs */
.login-card .form-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
  letter-spacing: -0.003em;
  line-height: 1.4;
}

/* Collapsible advanced section. No own separator — sits in the gap between
   form actions and trust signals; the trust-row's solid border-top is the
   only divider needed. */
.login-advanced {
  margin-top: 16px;
}

.login-advanced summary {
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.login-advanced summary::-webkit-details-marker { display: none; }

.login-advanced summary::before {
  content: '';
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center no-repeat;
  background-size: 10px;
  transition: transform 0.15s ease;
}

.login-advanced[open] summary::before {
  transform: rotate(90deg);
}

.login-advanced summary:hover {
  background: var(--row-alt);
  color: var(--text-primary);
}

.login-card .form-group input::placeholder {
  color: #B4B2AC;
}

.login-card .form-group input:hover {
  border-color: #D9D7D2;
}

.login-card .form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.12);
}

/* Primary button — Notion blue with subtle gradient depth & inner highlight.
   The inset white highlight + multi-layer shadow gives a 'lifted' premium feel
   without crossing into skeuomorphism. */
.login-card .btn-primary,
.login-card .btn.btn-primary {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2E8FE8 0%, #1A78D9 100%);
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(11, 107, 203, 0.3),
    0 2px 8px rgba(35, 131, 226, 0.18);
}

.login-card .btn-primary:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(11, 107, 203, 0.35),
    0 4px 12px rgba(35, 131, 226, 0.22);
}

.login-card .btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.98);
}

/* Error message styling */
.login-card #login-error,
.login-card #reg-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(224, 62, 62, 0.08);
  border: 1px solid rgba(224, 62, 62, 0.2);
  border-radius: 6px;
  color: #C42F2F;
  font-size: 13px;
  display: none;
}

.login-card #login-error:not(:empty),
.login-card #reg-error:not(:empty) {
  display: block;
}

/* Bottom links */
.login-card p {
  margin-top: 18px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}

.login-card p a {
  color: var(--accent) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.login-card p a:hover {
  color: var(--accent-dark) !important;
  text-decoration: underline;
}

/* ==========================================================================
   DASHBOARD — premium reskin via existing classes
   ========================================================================== */

/* ---- Sidebar: light warm tone instead of dark navy ---- */
#sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
}

.sidebar-logo {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

/* SVG provides the full visual (gradient + sheen + bars + accent dot).
   Container is just a transparent positioning box with a soft drop-shadow
   so the mark feels 'lifted' against the warm sidebar. */
.logo-icon {
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(35, 131, 226, 0.18));
}

.logo-icon svg { display: block; }

.logo-text {
  color: var(--text-primary) !important;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Nav items: dark text on light bg, warm hover */
.nav-item {
  color: var(--text-secondary) !important;
  border-radius: 6px;
  margin: 1px 8px;
  padding: 7px 10px !important;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item.active {
  background: var(--accent-light) !important;
  color: var(--accent-dark) !important;
  font-weight: 600;
}

.nav-item.active .nav-icon {
  filter: none;
}

.nav-icon {
  opacity: 0.85;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
}

#collapse-btn {
  color: var(--text-secondary) !important;
}

#collapse-btn:hover {
  background: var(--sidebar-hover) !important;
  color: var(--text-primary) !important;
}

/* ---- Header: clean warm bar ---- */
#header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.header-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.user-avatar {
  background: var(--accent) !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(35, 131, 226, 0.15);
}

/* ---- Page header (legacy other pages): friendly Notion-style ---- */
.page-header {
  padding: 28px 0 20px;
}

.page-header h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.page-header p {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* ---- Dashboard hero greeting (replaces generic page-header) ---- */
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 0 24px;
}

.dash-hero h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.15;
}

.dash-hero p {
  font-size: 14.5px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.dash-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 1.6s ease-in-out 0.4s 1;
}

@keyframes wave {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(14deg); }
  40%      { transform: rotate(-8deg); }
  60%      { transform: rotate(14deg); }
  80%      { transform: rotate(-4deg); }
}

/* Top header bar: hide redundant 'Dashboard' label, top bar is now cleaner */
#header .header-title { display: none; }

/* Header search — Notion / Linear-style command palette teaser. Centered,
   subtle, with ⌘K keyboard hint. */
.header-search {
  flex: 1;
  max-width: 480px;
  margin: 0 24px;
  position: relative;
  display: flex;
  align-items: center;
}

.header-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  opacity: 0.7;
  pointer-events: none;
}

.header-search-kbd {
  top: 50%;
  transform: translateY(-50%);
}

/* Higher specificity (#header) so it beats the later-defined global
   input[type="text"] rule in the GLOBAL section below. Without this the
   icon overlaps the placeholder text on the dashboard top bar. */
#header .header-search input,
#header .header-search input[type="text"] {
  width: 100%;
  height: 36px;
  padding: 0 56px 0 36px !important;
  font-size: 13px;
  font-family: inherit;
  background: var(--row-alt);
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-primary);
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: -0.005em;
  line-height: 36px;
  box-shadow: none;
}

#header .header-search input::placeholder { color: var(--text-secondary); }

#header .header-search input:hover { background: #F0EFEB; }

#header .header-search input:focus {
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.12);
}

.header-search-kbd {
  position: absolute;
  right: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
  letter-spacing: 0;
}

/* Header icon button — for notifications, settings, etc. */
.header-icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.header-icon-btn:hover {
  background: var(--row-alt);
  color: var(--text-primary);
}

.header-icon-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: #E03E3E;
  border: 1.5px solid var(--white);
  border-radius: 50%;
}

/* When sidebar collapses, the dashboard's hero header still needs room.
   Add small breathing room above. */
#main { padding-top: 8px; }

/* ---- Quick Actions row — 4 colorful entry-point cards ---- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.qa-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}

.qa-card::before {
  /* Colored left rail — gives each action distinct identity */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--qa-rail, var(--accent));
}

.qa-card:hover {
  border-color: var(--qa-border-hover, #D9D7D2);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.qa-card:hover .qa-arrow {
  transform: translateX(4px);
  color: var(--qa-rail, var(--accent));
  opacity: 1;
}

.qa-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qa-bg, var(--accent-light));
  color: var(--qa-fg, var(--accent));
  flex-shrink: 0;
}

.qa-body { flex: 1; min-width: 0; }

.qa-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.25;
}

.qa-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

.qa-arrow {
  font-size: 16px;
  color: var(--text-secondary);
  opacity: 0.5;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  font-weight: 500;
}

/* Tone variants — each action gets a colored personality */
.qa-card[data-tone="blue"]   { --qa-rail: #2383E2; --qa-bg: #E8F2FB; --qa-fg: #0B6BCB; --qa-border-hover: #BBD9F4; }
.qa-card[data-tone="green"]  { --qa-rail: #0F7B6C; --qa-bg: #DDEDEA; --qa-fg: #0B5C50; --qa-border-hover: #B7D7CF; }
.qa-card[data-tone="amber"]  { --qa-rail: #CB912F; --qa-bg: #FBEFD9; --qa-fg: #946718; --qa-border-hover: #ECCC8C; }
.qa-card[data-tone="purple"] { --qa-rail: #7B5BC1; --qa-bg: #EFE9F9; --qa-fg: #5A3FA0; --qa-border-hover: #C9B9E6; }

@media (max-width: 1100px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Rich stat cards (with delta + sparkline) ---- */
.stat-card--rich {
  display: block;
  padding: 16px 18px 12px;
  position: relative;
}

.stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card--rich .stat-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
}

.stat-card--rich .stat-icon svg { display: block; }

.stat-card--rich .stat-label {
  margin-bottom: 2px;
}

.stat-card--rich .stat-value {
  font-size: 28px;
  margin-bottom: 8px;
}

/* Delta pill — colored by direction */
.stat-delta {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.stat-delta--up   { background: #DDEDEA; color: #0B5C50; }
.stat-delta--down { background: #FBE4E4; color: #A21F1F; }
.stat-delta--flat { background: #EFEEEB; color: #787774; }

/* Inverted semantics: for 'Stoc scăzut' fewer is better, so down=green.
   Add data-good attribute on the card or override per-card if needed. */

/* Sparkline footer */
.stat-sparkline {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 4px;
  opacity: 0.85;
}

.stat-card--rich:hover .stat-sparkline {
  opacity: 1;
}

/* Icon coloring for rich cards (override pastels for inline SVG strokes) */
.stat-card--rich .stat-icon.blue   { color: #0B6BCB; }
.stat-card--rich .stat-icon.green  { color: #0B5C50; }
.stat-card--rich .stat-icon.amber  { color: #946718; }
.stat-card--rich .stat-icon.red    { color: #A21F1F; }

/* ---- KPI Operațional — premium tiles with progress bars + delta ---- */
.kpi-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi-period {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  padding: 4px;
}

.kpi-tile {
  padding: 18px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background 0.15s ease;
}

.kpi-tile:hover { background: #FBFAF8; }

/* Last col + last row tiles drop their respective borders */
.kpi-tile:nth-child(3n) { border-right: none; }

@media (min-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(5, 1fr); }
  .kpi-tile:nth-child(3n) { border-right: 1px solid var(--border); }
  .kpi-tile:nth-child(5n),
  .kpi-tile:last-child { border-right: none; }
}

.kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.kpi-value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kpi-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 4px;
  letter-spacing: -0.005em;
}

/* Horizontal progress bar — visual representation of KPI vs target */
.kpi-bar {
  height: 4px;
  background: var(--row-alt);
  border-radius: 3px;
  overflow: hidden;
}

.kpi-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Table polish — urgency pills, lot codes, movement types, row-sub text
   ========================================================================== */

/* Make table rows breathe + subtle hover */
.table-wrapper table tbody tr {
  border-top: 1px solid var(--border);
  transition: background 0.1s ease;
}

.table-wrapper table tbody tr:hover { background: #FBFAF8; }

.table-wrapper table td {
  padding: 11px 14px !important;
  font-size: 13.5px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.table-wrapper table th {
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  background: transparent !important;
}

.table-wrapper table td strong {
  font-weight: 600;
  color: var(--text-primary);
}

.table-wrapper table td.num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* Faded sub-text on the second line inside a cell (SKU under product name,
   time-ago in recent movements). */
.row-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: -0.003em;
}

/* Highlight low-stock numbers in red — draws the eye where action is needed */
.low-num {
  color: #A21F1F !important;
}

/* Monospace lot code chip */
.lot-code {
  display: inline-block;
  font-family: 'ui-monospace', 'SF Mono', 'Menlo', 'Cascadia Code', monospace;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--row-alt);
  color: var(--text-primary);
  letter-spacing: 0;
}

/* Urgency pills for expiring lots — semantic color escalation */
.urgency-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.urgency-critical { background: #FBE4E4; color: #A21F1F; }
.urgency-urgent   { background: #FBEFD9; color: #946718; }
.urgency-warning  { background: #FEF7E0; color: #7A5A14; }

/* Movement type pills for recent movements */
.mvt-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: -0.005em;
}

.mvt-in       { background: #DDEDEA; color: #0B5C50; }   /* Recepție */
.mvt-out      { background: #FBE4E4; color: #A21F1F; }   /* Pick / Livrare */
.mvt-transfer { background: #E8F2FB; color: #0B6BCB; }   /* Transfer */
.mvt-adjust   { background: #EFEEEB; color: #525151; }   /* Ajustare */

/* ==========================================================================
   GLOBAL COMPONENT EXTENSIONS — apply Notion-warm treatment to every page
   without touching markup. Targets the same selectors admin-shell.css uses
   for the buttons / badges / modals / pagination / forms / toasts that
   render on Produse, Locații, Stoc, Recepții, Livrări, Setări, etc.
   ========================================================================== */

/* ---- Buttons: gradient primary, refined secondary, semantic danger/success ---- */
.btn {
  font-family: inherit !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.05s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn:active { opacity: 1; transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, #2E8FE8 0%, #1A78D9 100%);
  color: white;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(11, 107, 203, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #2E8FE8 0%, #1A78D9 100%);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 6px rgba(35, 131, 226, 0.28);
}

.btn-secondary {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--row-alt);
  border-color: #D9D7D2;
}

.btn-danger {
  background: linear-gradient(180deg, #ED5757 0%, #D63333 100%);
  border: none;
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(189, 30, 30, 0.25);
}
.btn-danger:hover { filter: brightness(1.05); }

.btn-success {
  background: linear-gradient(180deg, #1A9A8A 0%, #0F7B6C 100%);
  border: none;
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(15, 123, 108, 0.25);
}
.btn-success:hover { filter: brightness(1.05); }

.btn-sm { padding: 6px 11px; font-size: 12px; }

/* ---- Badges: semantic warm pastels (override cool blues/greens) ---- */
.badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-blue  { background: #E8F2FB !important; color: #0B6BCB !important; }
.badge-green { background: #DDEDEA !important; color: #0B5C50 !important; }
.badge-amber { background: #FBEFD9 !important; color: #946718 !important; }
.badge-red   { background: #FBE4E4 !important; color: #A21F1F !important; }
.badge-gray  { background: #EFEEEB !important; color: #525151 !important; }

/* ---- Generic form controls (used across forms in modals & pages) ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea,
select.fsel {
  font-family: inherit;
  font-size: 13.5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: -0.005em;
}

input::placeholder,
textarea::placeholder { color: #B4B2AC; }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: #D9D7D2; }

/* :focus-visible only — keyboard focus shows the ring, click-then-release
   doesn't (was producing a stuck-looking blue ring on dropdowns). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.12);
}

/* Click-focus on selects: subtle border, no ring */
select:focus {
  border-color: #BBD9F4;
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--row-alt);
  color: var(--text-secondary);
  cursor: not-allowed;
}

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* ---- Modals: Notion-warm card with backdrop blur ---- */
.modal-overlay {
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
}

.modal {
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 4px 12px rgba(15, 15, 15, 0.08),
    0 24px 48px rgba(15, 15, 15, 0.12);
  transform: translateY(-8px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-header {
  padding: 20px 24px 16px;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  color: var(--text-secondary);
  transition: background 0.12s ease, color 0.12s ease;
}

.modal-close:hover {
  background: var(--row-alt);
  color: var(--text-primary);
}

.modal-body { padding: 18px 24px; }

.modal-footer {
  padding: 16px 24px;
  background: transparent;
}

/* ---- Pagination: clean pill buttons ---- */
.pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  font-variant-numeric: tabular-nums;
}

.pagination button:hover:not(:disabled) {
  background: var(--row-alt);
  border-color: #D9D7D2;
}

.pagination button.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
  box-shadow: 0 1px 2px rgba(35, 131, 226, 0.25);
}

/* ---- Toasts ---- */
.toast {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    0 4px 12px rgba(15, 15, 15, 0.08),
    0 12px 32px rgba(15, 15, 15, 0.06);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }

/* ---- Generic page-header (applies to all non-dashboard pages too) ---- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 22px;
  border-bottom: none;
}

.page-header-left h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.page-header-left p {
  font-size: 13.5px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin: 0;
}

/* ---- Tables (apply to all table-wrapper tables, not just dashboard) ---- */
.table-wrapper {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrapper table thead {
  background: var(--row-alt) !important;
}

.table-wrapper table thead th {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  padding: 11px 14px !important;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table-wrapper table tbody td {
  font-size: 13.5px;
  letter-spacing: -0.005em;
  vertical-align: middle;
}

/* Subtle row alternation only for very long tables — disable by default
   since hover state already provides scanability */
.table-wrapper table tbody tr:not(:first-child) { border-top: 1px solid var(--border); }

/* ---- Filter bars / chips (above tables, common pattern) ---- */
.filter-bar,
.page-filters,
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

/* ---- Empty state styling for loading rows / spinners ---- */
.loading-row {
  text-align: center;
  padding: 28px 14px !important;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: -0.005em;
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rot 0.7s linear infinite;
}

@keyframes spinner-rot {
  to { transform: rotate(360deg); }
}

/* ---- Inline code (used for SKU / lot codes / IDs in tables) ---- */
table td code,
.table-wrapper code {
  font-family: 'ui-monospace', 'SF Mono', 'Menlo', 'Cascadia Code', monospace;
  font-size: 12px;
  background: var(--row-alt);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-primary);
  letter-spacing: 0;
}

/* ---- Cards (generic everywhere) ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* ---- Tabs (used on Settings, etc.) — scoped to explicit classes only.
   We don't target [role="tab"] broadly because chip filters (.inv-chip)
   also use that ARIA role with a totally different visual pattern. */
.tabs,
.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab,
.tab-item {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover,
.tab-item:hover { color: var(--text-primary); }

.tab.active,
.tab-item.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* Chip-style filters (inv-chip, etc.) — polish without breaking pill shape */
.inv-chip,
.chip {
  padding: 6px 13px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  border-radius: 999px !important;
}

.inv-chip.active,
.chip.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(35, 131, 226, 0.25);
}

/* ---- Custom scrollbars — thin, warm, premium feel ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: #D9D7D2 transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #D9D7D2;
  border: 2px solid var(--bg);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #B4B2AC; }

/* ---- Action button row pattern (above tables, common across pages) ---- */
.page-header-actions,
.page-actions,
.actions-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Modal forms breathe more ---- */
.modal .form-group { margin-bottom: 14px; }
.modal .form-group label { display: block; margin-bottom: 6px; }
.modal .form-group input,
.modal .form-group select,
.modal .form-group textarea { width: 100%; }

/* ---- Sticky page header for long pages ---- */
.dash-hero,
.page-header {
  position: relative;
  z-index: 1;
}

/* ---- Stat cards: clean Notion aesthetic ---- */
.stats-grid {
  gap: 14px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-card:hover {
  border-color: #D9D7D2;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Warmer pastels for stat icon backgrounds */
.stat-icon.blue   { background: #E8F2FB !important; }
.stat-icon.green  { background: #DDEDEA !important; }
.stat-icon.amber  { background: #FBEFD9 !important; }
.stat-icon.red    { background: #FBE4E4 !important; }

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  text-transform: none !important;     /* kill admin-shell uppercase */
}

/* Generic form-group labels across the app — drop the uppercase shouting */
.form-group label {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* Table headers — same. Notion uses normal case for column headers too. */
table thead th {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- Generic cards (trial, ops, kpi) ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* ---- Trial card: warm friendly look ---- */
.trial-card {
  background: linear-gradient(135deg, #FFF8EC 0%, #FDF1D9 100%);
  border: 1px solid #F2DDA8;
  border-radius: 10px;
  padding: 18px 20px;
}

.trial-card-title {
  font-weight: 600;
  font-size: 14px;
  color: #7A5A14;
  letter-spacing: -0.01em;
}

.trial-card-text {
  color: #8C6A23;
  font-size: 13.5px;
  margin-top: 4px;
}

.trial-meta-pill {
  background: rgba(124, 90, 20, 0.1);
  color: #7A5A14;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
}

/* ---- Buttons (generic, used by reload + secondary actions) ---- */
.btn {
  font-family: inherit;
  letter-spacing: -0.005em;
  border-radius: 6px;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.btn-secondary {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 500;
}

.btn-secondary:hover {
  background: var(--row-alt);
  border-color: #D9D7D2;
}

.btn-primary {
  background: var(--accent);
  border: none;
  color: white;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(35, 131, 226, 0.15);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

/* ---- Trial badge in header ---- */
.trial-badge {
  background: #FFF8EC;
  border: 1px solid #F2DDA8;
  color: #7A5A14;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* ---- Trial critical banner ---- */
.trial-banner {
  background: linear-gradient(135deg, #FBE4E4 0%, #F8D2D2 100%);
  border: 1px solid #ECB5B5;
  border-radius: 8px;
  color: #8E2424;
}

/* ---- Skip-link (a11y) — match new palette ---- */
.skip-link:focus {
  background: var(--accent);
  color: white;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}

/* ---- Search inputs polish (all pages) ---- */

/* .search-wrap = container with absolute-positioned icon SVG inside */
.search-wrap { position: relative; display: inline-flex; align-items: center; }

.search-wrap input,
.search-wrap input[type="text"],
.search-wrap input[type="search"],
.search-wrap > input {
  padding-left: 36px !important;
  padding-right: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  background: var(--white) !important;
  width: 240px;
  line-height: 36px;
  box-shadow: none;
}

.search-wrap svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-secondary) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  width: 14px !important;
  height: 14px !important;
}

/* Bare search inputs (no .search-wrap wrapper) — Recepții, Livrări,
   Reports, Fill rate, Pallets, Users, Super Admin. Add a CSS-only
   magnifying glass via background-image so they look consistent
   without needing markup changes. */
#f-recv-search,
#f-ship-search,
#q-reports,
#q-fr,
#pal-search,
#users-search,
#sa-search {
  padding: 8px 12px 8px 34px !important;
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  background-color: var(--white) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 14px 14px !important;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   Premium SELECT — appearance:none + custom Notion chevron SVG.
   Replaces the OS-default dropdown arrow with a consistent warm chevron.
   Applied to every <select> in the app (filter dropdowns, page-size,
   modal selects, etc.).
   ========================================================================== */
select,
select.fsel {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--white) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
  padding: 8px 34px 8px 12px !important;
  height: 36px !important;
  font-size: 13px !important;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.005em;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text-primary);
  line-height: 1;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

select:hover:not(:disabled) {
  border-color: #D9D7D2 !important;
  background-color: var(--row-alt) !important;
}

/* Chevron rotates to indicate open state — handled by browser, but make
   sure the focused state reads with our accent. */
select:focus-visible {
  border-color: var(--accent) !important;
  background-color: var(--white) !important;
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.12);
}

/* When the select is showing its dropdown, the focus state may stick;
   keep it readable but subtle. */
select:focus {
  outline: none !important;
}

/* The native <option> menu we cannot fully restyle (OS-controlled), but
   we can soften the visible items in modern Chromium/Edge. */
select option {
  font-size: 14px;
  padding: 8px;
  color: var(--text-primary);
  background: var(--white);
}

/* ==========================================================================
   Premium DATE / TIME inputs — hide native calendar icon, add Notion one.
   Native 'dd/mm/yyyy' placeholder text is OS-controlled (can't change),
   but everything else is brought in line with the rest of the form.
   ========================================================================== */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--white) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  padding: 8px 36px 8px 12px !important;
  height: 36px !important;
  font-size: 13px !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 0.15s ease;
  font-family: inherit;
}

/* Hide the native calendar/clock picker indicator — our SVG bg-image takes
   its place, but clicking anywhere on the field still opens the picker. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  opacity: 0;
}

/* Webkit also exposes an inner spin/clear button on number/date inputs —
   align their visuals with our subdued chrome. */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-clear-button {
  display: none;
}

/* Firefox: hide the native spinner */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover {
  border-color: #D9D7D2 !important;
}

input[type="date"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="time"]:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.12);
}

/* OS-default placeholder text inside date inputs ('dd/mm/yyyy') often
   renders darker than the rest of our placeholders. Soften it. */
input[type="date"]:not(:focus):invalid,
input[type="date"]:not(:focus):in-range[value=""] {
  color: var(--text-secondary);
}

/* ==========================================================================
   Command palette — ⌘K / Ctrl K. Notion / Linear style modal with fuzzy
   navigation + quick actions. Opens from the header search input.
   ========================================================================== */
.palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 96px 24px 24px;
  animation: paletteFade 0.15s ease;
}

@keyframes paletteFade { from { opacity: 0; } to { opacity: 1; } }

.palette {
  width: 100%;
  max-width: 580px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 8px 24px rgba(15, 15, 15, 0.1),
    0 24px 48px rgba(15, 15, 15, 0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  animation: palettePop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes palettePop {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.palette-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.palette-input-wrap > svg {
  color: var(--text-secondary);
  opacity: 0.7;
  flex-shrink: 0;
}

.palette-input-wrap input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 18px 14px !important;
  font-size: 15px !important;
  font-family: inherit;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  box-shadow: none !important;
  height: auto !important;
}

.palette-input-wrap input::placeholder {
  color: var(--text-secondary);
}

.palette-input-wrap kbd {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--row-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0;
  flex-shrink: 0;
}

.palette-list {
  overflow-y: auto;
  padding: 6px;
  flex: 1;
}

.palette-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-family: inherit;
  transition: background 0.08s ease;
}

.palette-item.is-sel {
  background: var(--accent-light);
}

.palette-item.is-sel .palette-item-kind {
  color: var(--accent-dark);
  background: rgba(35, 131, 226, 0.12);
}

.palette-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--row-alt);
  color: var(--text-primary);
  flex-shrink: 0;
}

.palette-item.is-sel .palette-icon {
  background: var(--white);
  color: var(--accent-dark);
}

.palette-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.palette-item-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.palette-item-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  letter-spacing: -0.003em;
  margin-top: 1px;
}

.palette-item-kind {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--row-alt);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.palette-empty {
  padding: 36px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.palette-foot {
  display: flex;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--row-alt);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.palette-foot kbd {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* Hide standard form-control styling on the header search since it's now
   read-only and triggers the palette on click. */
#header .header-search input[readonly] {
  cursor: pointer;
  caret-color: transparent;
}

/* ==========================================================================
   Sidebar nav groups — collapsible parent/child sections.
   Each <div class="nav-group"> wraps a header button + a children div.
   Active state propagates upward (parent group with active child stays
   visually highlighted in its header).
   ========================================================================== */
.nav-group {
  margin: 12px 0 0;
}

.nav-group:first-of-type {
  margin-top: 18px;
}

.nav-group-head {
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-group-head:hover {
  background: var(--sidebar-hover);
  color: var(--text-primary);
}

.nav-group-label { flex: 1; text-align: left; }

.nav-group-chevron {
  opacity: 0.55;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.12s ease;
  flex-shrink: 0;
}

.nav-group-head:hover .nav-group-chevron { opacity: 0.85; }

/* Collapsed state: rotate chevron, hide items */
.nav-group.is-collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

.nav-group.is-collapsed .nav-group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}

/* Group items get a subtle left-indent so the hierarchy reads */
.nav-group-items .nav-item {
  padding-left: 28px !important;
}

/* When a child item is active, the group head gets a dot indicator */
.nav-group:has(.nav-item.active) .nav-group-head {
  color: var(--text-primary);
}

.nav-group:has(.nav-item.active) .nav-group-head::after {
  content: '';
  position: absolute;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  display: none;            /* keep subtle — only when collapsed */
}

.nav-group.is-collapsed:has(.nav-item.active) .nav-group-head { position: relative; }
.nav-group.is-collapsed:has(.nav-item.active) .nav-group-head::after { display: block; }

/* When the entire sidebar is collapsed to icon-only mode, hide the group
   header chrome (truncated 'MASTE', 'OPERA' labels look broken) and
   force-expand the items so they remain reachable as icons. Also drop
   the indent on the items so the icons sit centered like flat nav. */
#sidebar.collapsed .nav-group-head { display: none; }
#sidebar.collapsed .nav-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
#sidebar.collapsed .nav-group:first-of-type { border-top: none; margin-top: 8px; padding-top: 0; }
#sidebar.collapsed .nav-group-items { max-height: none !important; opacity: 1 !important; pointer-events: auto !important; }
#sidebar.collapsed .nav-group-items .nav-item { padding-left: 10px !important; justify-content: center; }
#sidebar.collapsed .nav-group-items .nav-label { display: none; }

/* ==========================================================================
   PREMIUM POLISH PACK — 10 enhancements (light + dark)
   ========================================================================== */

/* ---- 1. EMPTY STATES — friendly fallback inside tables / cards ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 48px;
  text-align: center;
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--row-alt);
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.empty-state-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
  max-width: 360px;
  line-height: 1.5;
}

/* Auto-style tbody empty messages — when a tbody has only a single colspan
   row containing plain "Fără..." / "Nicio..." text, render it premium. */
tbody tr td.loading-row:not(:has(.spinner)),
tbody tr td.ops-empty {
  text-align: center;
  padding: 36px 16px !important;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: -0.005em;
  font-style: normal;
}

/* ---- 2. SKELETON LOADERS — replace spinner-in-table with shimmer ---- */
.skel {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--row-alt) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    var(--row-alt) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skelShimmer 1.6s ease-in-out infinite;
}

html[data-theme="dark"] .skel {
  background: linear-gradient(90deg,
    #2A2A27 0%,
    rgba(255, 255, 255, 0.06) 50%,
    #2A2A27 100%);
  background-size: 200% 100%;
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.skel-cell { height: 12px; flex: 1; }
.skel-cell--sm { flex: 0 0 60px; }
.skel-cell--md { flex: 0 0 120px; }
.skel-cell--lg { flex: 0 0 200px; }

/* ---- 3. TOOLTIPS — Notion-style dark mini card on hover ---- */
[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1F1F1E;
  color: #F0F0EE;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease 0.3s, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #1F1F1E;
  opacity: 0;
  transition: opacity 0.12s ease 0.3s;
  pointer-events: none;
  z-index: 1000;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before { opacity: 1; }

/* Tooltip variants — anchor below */
[data-tip-pos="below"]::after { bottom: auto; top: calc(100% + 8px); }
[data-tip-pos="below"]::before { bottom: auto; top: calc(100% + 3px); border-top: none; border-bottom: 5px solid #1F1F1E; }

html[data-theme="dark"] [data-tip]::after { background: #3A3A35; color: var(--text-primary); }
html[data-theme="dark"] [data-tip]::before { border-top-color: #3A3A35; }
html[data-theme="dark"] [data-tip-pos="below"]::before { border-bottom-color: #3A3A35; }

/* ---- 4. PAGE TRANSITIONS — subtle slide-up + fade on navigate ---- */
.page.active {
  animation: pageEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Don't re-animate sub-pages that toggle via display:block/none */
.page.active .page.active { animation: none; }

/* ---- 5. TOAST PREMIUM with auto-dismiss countdown bar ---- */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow:
    0 4px 12px rgba(15, 15, 15, 0.08),
    0 16px 40px rgba(15, 15, 15, 0.10);
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  overflow: hidden;
  position: relative;
  animation: toastIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.toast-leaving {
  animation: toastOut 0.2s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

.toast-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
}

.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast.success .toast-icon { background: #DDEDEA; color: #0B5C50; }
.toast.error   .toast-icon { background: #FBE4E4; color: #A21F1F; }
.toast.warning .toast-icon { background: #FBEFD9; color: #946718; }
.toast.info    .toast-icon { background: #E8F2FB; color: #0B6BCB; }

html[data-theme="dark"] .toast.success .toast-icon { background: #1A2D2A; color: #5CC4B0; }
html[data-theme="dark"] .toast.error   .toast-icon { background: #2D1A1A; color: #ED6B6B; }
html[data-theme="dark"] .toast.warning .toast-icon { background: #2D2516; color: #E5B264; }
html[data-theme="dark"] .toast.info    .toast-icon { background: #1A2A3D; color: #6FB1F0; }

.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
  width: 22px; height: 22px;
  border: none; background: transparent;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.toast-close:hover { background: var(--row-alt); color: var(--text-primary); }

.toast-bar {
  height: 2px;
  background: var(--accent);
  width: 100%;
  transform-origin: left;
  animation: toastBar var(--toast-duration, 4s) linear forwards;
}
.toast.success .toast-bar { background: var(--success); }
.toast.error   .toast-bar { background: var(--danger); }
.toast.warning .toast-bar { background: var(--warning); }

@keyframes toastBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.toast:hover .toast-bar { animation-play-state: paused; }

/* ---- 6. AVATAR — initials + deterministic color (JS-driven) ---- */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: white !important;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-transform: uppercase;
  background: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Deterministic palette — 8 warm tones picked from Notion-warm direction.
   JS sets data-tone="0..7" on the avatar based on a hash of the username. */
.user-avatar[data-tone="0"] { background: linear-gradient(135deg, #4A9EEA 0%, #2383E2 100%) !important; }
.user-avatar[data-tone="1"] { background: linear-gradient(135deg, #2BAE9E 0%, #0F7B6C 100%) !important; }
.user-avatar[data-tone="2"] { background: linear-gradient(135deg, #E5B264 0%, #CB912F 100%) !important; }
.user-avatar[data-tone="3"] { background: linear-gradient(135deg, #ED6B6B 0%, #C23F3F 100%) !important; }
.user-avatar[data-tone="4"] { background: linear-gradient(135deg, #B49EE5 0%, #7B5BC1 100%) !important; }
.user-avatar[data-tone="5"] { background: linear-gradient(135deg, #F08A8A 0%, #E03E3E 100%) !important; }
.user-avatar[data-tone="6"] { background: linear-gradient(135deg, #4FC1B6 0%, #2BAE9E 100%) !important; }
.user-avatar[data-tone="7"] { background: linear-gradient(135deg, #FFB872 0%, #E89446 100%) !important; }

/* ---- 7. INLINE BUTTON LOADING — spinner replaces text ---- */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: white;
  animation: btnSpin 0.7s linear infinite;
}
.btn-secondary.btn--loading::after { color: var(--text-primary); }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---- 8. FILTER CHIP COUNTS — small subdued badge inside the chip ---- */
.inv-chip[data-count]::after,
.chip[data-count]::after {
  content: attr(data-count);
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(15, 15, 15, 0.07);
  color: var(--text-secondary);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.inv-chip.active[data-count]::after,
.chip.active[data-count]::after {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

html[data-theme="dark"] .inv-chip[data-count]::after,
html[data-theme="dark"] .chip[data-count]::after {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

/* ---- 9. ANIMATED NUMBER COUNT-UP — applied via .num-animate class ---- */
.stat-value, .kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ---- 10. KEYBOARD SHORTCUTS OVERLAY (? key) ---- */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: paletteFade 0.15s ease;
}

.shortcuts-card {
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 8px 24px rgba(15, 15, 15, 0.1),
    0 24px 48px rgba(15, 15, 15, 0.14);
  overflow: hidden;
  animation: palettePop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcuts-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.shortcuts-section { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.shortcuts-section:last-child { border-bottom: none; }

.shortcuts-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.shortcut-keys { display: flex; gap: 4px; }

.shortcut-keys kbd {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: var(--row-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0;
  color: var(--text-primary);
  min-width: 22px;
  text-align: center;
}

/* ==========================================================================
   IMPACT PACK — bulk actions / inline editing / activity feed pulse /
   onboarding wizard / CSV import wizard / mini charts
   ========================================================================== */

/* ---- BULK ACTIONS ---- Checkbox column + sticky bottom bar ---- */
.bulk-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
  flex-shrink: 0;
}
.bulk-checkbox:hover { border-color: var(--accent); }
.bulk-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.bulk-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bulk-checkbox:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
.bulk-checkbox:indeterminate::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 4px 12px rgba(15, 15, 15, 0.08),
    0 16px 40px rgba(15, 15, 15, 0.12);
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 400;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
  opacity: 0;
  pointer-events: none;
  font-size: 13.5px;
  font-family: inherit;
  min-width: 460px;
  max-width: calc(100vw - 48px);
}

.bulk-bar.is-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bulk-bar-count {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-bar-count-pill {
  background: var(--accent);
  color: white;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bulk-bar-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 2px;
}

.bulk-bar-actions {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

.bulk-bar-action {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: -0.005em;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bulk-bar-action:hover { background: var(--row-alt); }
.bulk-bar-action.danger { color: var(--danger); }
.bulk-bar-action.danger:hover { background: rgba(224, 62, 62, 0.10); }

.bulk-bar-close {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.bulk-bar-close:hover { background: var(--row-alt); color: var(--text-primary); }

/* Mark rows whose checkbox is checked */
.table-wrapper table tr:has(.bulk-checkbox:checked) {
  background: rgba(35, 131, 226, 0.04);
}
html[data-theme="dark"] .table-wrapper table tr:has(.bulk-checkbox:checked) {
  background: rgba(74, 158, 234, 0.08);
}

/* ---- INLINE EDITING ---- */
.cell--editable {
  cursor: text;
  border-radius: 4px;
  padding: 3px 7px;
  margin: -3px -7px;                /* keep cell content alignment */
  border: 1px solid transparent;
  display: inline-block;
  min-width: 40px;
  transition: border-color 0.12s ease, background 0.12s ease;
  position: relative;
}

.cell--editable:hover {
  border-color: var(--border);
  background: var(--row-alt);
}

.cell--editable::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>") center no-repeat;
  background-size: 10px;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.cell--editable:hover::after { opacity: 0.55; }
.cell--editable:focus { opacity: 0; }

html[data-theme="dark"] .cell--editable::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>");
}

.cell--editable[contenteditable="true"] {
  outline: none !important;
  background: var(--white) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.12);
  padding-right: 12px;
}

.cell--editable[contenteditable="true"]::after { display: none; }

.cell--editable.is-saving {
  background: var(--row-alt) !important;
  color: var(--text-secondary);
}

.cell--editable.is-saved {
  border-color: var(--success) !important;
  background: rgba(15, 123, 108, 0.08) !important;
  animation: cellSavedPulse 0.6s ease;
}

@keyframes cellSavedPulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 123, 108, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(15, 123, 108, 0); }
}

.cell--editable.is-error {
  border-color: var(--danger) !important;
  background: rgba(224, 62, 62, 0.08) !important;
}

/* ---- ACTIVITY FEED — pulse new rows on live update ---- */
.table-wrapper table tr.row--new {
  animation: rowNewPulse 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rowNewPulse {
  0%   { background: rgba(74, 158, 234, 0.18); }
  50%  { background: rgba(74, 158, 234, 0.10); }
  100% { background: transparent; }
}
.table-wrapper table tr.row--new td:first-child {
  border-left: 3px solid var(--accent);
  padding-left: 11px !important;
  animation: rowNewBar 1.4s ease forwards;
}
@keyframes rowNewBar {
  to { border-left-color: transparent; padding-left: 14px !important; }
}

/* Subtle live-indicator dot for activity-feed card header */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2BAE9E;
  box-shadow: 0 0 0 0 rgba(43, 174, 158, 0.55);
  animation: liveDot 1.6s ease infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(43, 174, 158, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(43, 174, 158, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 174, 158, 0); }
}

/* ---- ONBOARDING WIZARD — multi-step premium card ---- */
.wizard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.wizard-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FFF8EC 0%, var(--white) 100%);
  overflow-x: auto;
}

html[data-theme="dark"] .wizard-stepper {
  background: linear-gradient(180deg, #2D2516 0%, var(--white) 100%);
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.wizard-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--row-alt);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}

.wizard-step.is-done .wizard-step-num {
  background: var(--success);
  color: white;
}
.wizard-step.is-done .wizard-step-num::after {
  content: '✓';
  font-size: 12px;
}
.wizard-step.is-done .wizard-step-num { font-size: 0; }
.wizard-step.is-current .wizard-step-num {
  background: var(--accent);
  color: white;
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.18);
}
.wizard-step.is-current { color: var(--text-primary); font-weight: 600; }

.wizard-step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  min-width: 16px;
  position: relative;
}
.wizard-step.is-done + .wizard-step-connector { background: var(--success); }

.wizard-body { padding: 28px 28px 24px; }

.wizard-progress {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.wizard-progress-bar {
  height: 4px;
  background: var(--row-alt);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.wizard-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #2BAE9E 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-items {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}

.wizard-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.wizard-item:hover { border-color: #D9D7D2; }

.wizard-item.is-done {
  background: rgba(15, 123, 108, 0.05);
  border-color: rgba(15, 123, 108, 0.2);
}

.wizard-item-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wizard-item.is-done .wizard-item-check {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.wizard-item.is-done .wizard-item-check::after {
  content: '✓';
  font-size: 13px;
  font-weight: 700;
}

.wizard-item-body {
  flex: 1;
  min-width: 0;
}

.wizard-item-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wizard-item-tip {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.wizard-item-cta {
  flex-shrink: 0;
}

/* ---- CSV IMPORT WIZARD ---- */
.csv-wizard {
  max-width: 640px;
}

.csv-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  background: var(--row-alt);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.csv-dropzone:hover,
.csv-dropzone.is-drag {
  border-color: var(--accent);
  background: rgba(35, 131, 226, 0.06);
  color: var(--text-primary);
}

.csv-dropzone-icon {
  display: inline-flex;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--white);
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--text-secondary);
}

.csv-dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.csv-dropzone-sub { font-size: 12.5px; }

.csv-preview {
  margin-top: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.csv-preview-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.csv-preview-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

.csv-preview-table {
  max-height: 280px;
  overflow: auto;
}

.csv-preview-table table {
  width: 100%;
  font-size: 12.5px;
  border-collapse: collapse;
}
.csv-preview-table th {
  position: sticky;
  top: 0;
  background: var(--row-alt) !important;
  text-align: left;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border);
}
.csv-preview-table td {
  padding: 6px 12px !important;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
.csv-preview-table td.is-error {
  background: rgba(224, 62, 62, 0.08);
  color: var(--danger);
}

/* ---- MINI CHARTS on Dashboard ---- */
.chart-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px 14px;
  box-shadow: var(--shadow);
}

.chart-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.chart-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.chart-card-meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.chart-card-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.chart-card-value-delta {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: 4px;
}

.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* Bar chart bars (rendered via SVG); these are visual hooks for hover */
.bar-chart-bar { transition: opacity 0.12s ease; cursor: pointer; }
.bar-chart-bar:hover { opacity: 0.85; }

/* Donut chart legend rows */
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.donut-legend-swatch {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.donut-legend-row .num {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ==========================================================================
   DARK MODE — Notion-warm dark palette
   Overrides the cool-slate dark theme inherited from admin-shell.css with
   a warm dark variant (slightly brown undertones, like Notion's actual
   dark theme). Targets html[data-theme="dark"] so the user's theme toggle
   in Settings continues to work — just with a premium aesthetic.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Warm dark surface stack */
  --bg: #1A1A19;
  --white: #252522;
  --row-alt: #2D2D2A;
  --border: #38383500;     /* placeholder so empty rule isn't optimised away */
  --border: #38383580;

  /* Warmer text colors (#E5E5E2 vs #f1f5f9 cool) */
  --text-primary: #E8E8E5;
  --text-secondary: #9B9B96;

  /* Accent slightly brighter for contrast against dark warm bg */
  --accent: #4A9EEA;
  --accent-dark: #2383E2;
  --accent-light: #18324C;       /* dark variant of E8F2FB */

  /* Status colors brighter for dark */
  --success: #2BAE9E;
  --warning: #E5B264;
  --danger:  #ED6B6B;

  /* Sidebar warmer dark + slightly different from page bg for separation */
  --sidebar-bg: #1F1F1E;
  --sidebar-hover: #2A2A27;
  --sidebar-active: #4A9EEA;

  /* Deeper shadows for dark (need more contrast to lift cards) */
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5),  0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text-primary); }

/* ---- Login + Register: warm dark background ---- */
html[data-theme="dark"] #login-screen,
html[data-theme="dark"] #register-screen {
  background:
    radial-gradient(ellipse at top left,  rgba(74, 158, 234, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(229, 178, 100, 0.07) 0%, transparent 50%),
    linear-gradient(180deg, #1A1A19 0%, #161614 100%) !important;
}

html[data-theme="dark"] .login-card {
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 14px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .login-card .form-group input,
html[data-theme="dark"] #login-screen input,
html[data-theme="dark"] #register-screen input {
  background: #2A2A27;
  border-color: #3A3A35;
  color: var(--text-primary);
}

/* Hint text in form-hint */
html[data-theme="dark"] .login-card .form-hint { color: var(--text-secondary); }

/* Login trust signals — keep readable */
html[data-theme="dark"] .login-trust { border-top-color: var(--border); }

/* ---- Hover / active states across components ---- */
html[data-theme="dark"] .stat-card:hover { border-color: #4A4A45; }
html[data-theme="dark"] .table-wrapper table tbody tr:hover { background: #2A2A27; }
html[data-theme="dark"] .kpi-tile:hover { background: #2A2A27; }

/* Stat icon pastel backgrounds → dark muted variants */
html[data-theme="dark"] .stat-icon.blue   { background: #1A2A3D !important; color: #6FB1F0 !important; }
html[data-theme="dark"] .stat-icon.green  { background: #1A2D2A !important; color: #5CC4B0 !important; }
html[data-theme="dark"] .stat-icon.amber  { background: #2D2516 !important; color: #E5B264 !important; }
html[data-theme="dark"] .stat-icon.red    { background: #2D1A1A !important; color: #ED6B6B !important; }

/* Quick action card tone variants — darker tinted bg + brighter fg */
html[data-theme="dark"] .qa-card[data-tone="blue"]   { --qa-bg: #1A2A3D; --qa-fg: #6FB1F0; --qa-border-hover: #2D4566; }
html[data-theme="dark"] .qa-card[data-tone="green"]  { --qa-bg: #1A2D2A; --qa-fg: #5CC4B0; --qa-border-hover: #2A4640; }
html[data-theme="dark"] .qa-card[data-tone="amber"]  { --qa-bg: #2D2516; --qa-fg: #E5B264; --qa-border-hover: #4A3E25; }
html[data-theme="dark"] .qa-card[data-tone="purple"] { --qa-bg: #261F38; --qa-fg: #B49EE5; --qa-border-hover: #3D3155; }

/* Delta + urgency + movement pills — keep hue, darker bg + lighter fg */
html[data-theme="dark"] .stat-delta--up   { background: #1A2D2A; color: #5CC4B0; }
html[data-theme="dark"] .stat-delta--down { background: #2D1A1A; color: #ED6B6B; }
html[data-theme="dark"] .stat-delta--flat { background: #2A2A27; color: #9B9B96; }
html[data-theme="dark"] .urgency-critical { background: #2D1A1A; color: #ED6B6B; }
html[data-theme="dark"] .urgency-urgent   { background: #2D2516; color: #E5B264; }
html[data-theme="dark"] .urgency-warning  { background: #2A2516; color: #D9B068; }
html[data-theme="dark"] .mvt-in       { background: #1A2D2A; color: #5CC4B0; }
html[data-theme="dark"] .mvt-out      { background: #2D1A1A; color: #ED6B6B; }
html[data-theme="dark"] .mvt-transfer { background: #1A2A3D; color: #6FB1F0; }
html[data-theme="dark"] .mvt-adjust   { background: #2A2A27; color: #9B9B96; }

/* Badge semantic variants */
html[data-theme="dark"] .badge-blue  { background: #1A2A3D !important; color: #6FB1F0 !important; }
html[data-theme="dark"] .badge-green { background: #1A2D2A !important; color: #5CC4B0 !important; }
html[data-theme="dark"] .badge-amber { background: #2D2516 !important; color: #E5B264 !important; }
html[data-theme="dark"] .badge-red   { background: #2D1A1A !important; color: #ED6B6B !important; }
html[data-theme="dark"] .badge-gray  { background: #2A2A27 !important; color: #9B9B96 !important; }

/* Trial card — warm dark gradient */
html[data-theme="dark"] .trial-card {
  background: linear-gradient(135deg, #2D2516 0%, #25201A 100%);
  border-color: #4A3E25;
  color: #E5B264;
}
html[data-theme="dark"] .trial-card-title { color: #F0C078; }
html[data-theme="dark"] .trial-card-text  { color: #D9B068; }
html[data-theme="dark"] .trial-meta-pill,
html[data-theme="dark"] .trial-badge {
  background: rgba(229, 178, 100, 0.12);
  color: #E5B264;
  border-color: #4A3E25;
}

/* Trial banner critical state in dark */
html[data-theme="dark"] .trial-banner {
  background: linear-gradient(135deg, #2D1A1A 0%, #251616 100%);
  border-color: #4A2525;
  color: #ED6B6B;
}

/* Header search input — match dark surface */
html[data-theme="dark"] #header .header-search input {
  background: #2A2A27 !important;
}
html[data-theme="dark"] #header .header-search input:hover { background: #303030 !important; }
html[data-theme="dark"] #header .header-search input:focus { background: var(--white) !important; }
html[data-theme="dark"] .header-search-kbd {
  background: var(--white);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* Header bar background */
html[data-theme="dark"] #header { background: var(--white); border-bottom-color: var(--border); }

/* Header icon button hover */
html[data-theme="dark"] .header-icon-btn:hover { background: var(--row-alt); }

/* Notification popover bg already adapts via tokens. Just border. */
html[data-theme="dark"] .notif-popover { border-color: var(--border); }

/* Command palette */
html[data-theme="dark"] .palette { background: var(--white); border-color: var(--border); }
html[data-theme="dark"] .palette-input-wrap { background: var(--white); border-bottom-color: var(--border); }
html[data-theme="dark"] .palette-item.is-sel { background: var(--accent-light); }
html[data-theme="dark"] .palette-item.is-sel .palette-icon { background: var(--row-alt); color: #6FB1F0; }
html[data-theme="dark"] .palette-item.is-sel .palette-item-kind { background: rgba(74, 158, 234, 0.18); color: #6FB1F0; }
html[data-theme="dark"] .palette-foot { background: var(--row-alt); border-top-color: var(--border); }
html[data-theme="dark"] .palette-foot kbd { background: var(--white); border-color: var(--border); color: var(--text-primary); }
html[data-theme="dark"] .palette-input-wrap kbd { background: var(--row-alt); border-color: var(--border); }

/* Sidebar nav group head + chevron stay legible on dark warm bg */
html[data-theme="dark"] .nav-group-head { color: var(--text-secondary); }
html[data-theme="dark"] .nav-group-head:hover { background: var(--sidebar-hover); color: var(--text-primary); }

/* Sidebar active state (nav-item) gets a dark-tinted blue bg */
html[data-theme="dark"] .nav-item.active {
  background: rgba(74, 158, 234, 0.16) !important;
  color: #6FB1F0 !important;
}

/* Logo icon container in sidebar — drop shadow visible on dark */
html[data-theme="dark"] .logo-icon { filter: drop-shadow(0 2px 8px rgba(74, 158, 234, 0.35)); }

/* User avatar in header on dark */
html[data-theme="dark"] .user-avatar { background: var(--accent) !important; }

/* KPI progress bars get muted track in dark */
html[data-theme="dark"] .kpi-bar { background: #3A3A35; }

/* Sparkline opacity bump on dark */
html[data-theme="dark"] .stat-sparkline { opacity: 0.9; }

/* Custom scrollbar adapts to dark */
html[data-theme="dark"] * { scrollbar-color: #4A4A45 transparent; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #4A4A45;
  border-color: var(--bg);
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #5A5A55; }

/* Forms / selects / date inputs — admin-shell.css dark mode uses background:
   shorthand which RESETS background-repeat to default 'repeat' and
   background-size to 'auto', causing our chevron SVG to tile like wallpaper.
   We must re-declare EVERY background-* property with !important so the
   shorthand reset can't leak through.
   Also brighter stroke (#9B9B96) since #787774 disappears on warm-dark. */
html[data-theme="dark"] select,
html[data-theme="dark"] select.fsel {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-color: var(--white) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
  background-attachment: scroll !important;
}

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
  background-color: var(--white) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  background-attachment: scroll !important;
}

html[data-theme="dark"] #f-recv-search,
html[data-theme="dark"] #f-ship-search,
html[data-theme="dark"] #q-reports,
html[data-theme="dark"] #q-fr,
html[data-theme="dark"] #pal-search,
html[data-theme="dark"] #users-search,
html[data-theme="dark"] #sa-search {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
  background-color: var(--white) !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 14px 14px !important;
  background-attachment: scroll !important;
}

/* Generic input dark — same shorthand-reset problem. Override color only. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  background-color: var(--white) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .login-card .form-group--icon[data-icon="user"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
html[data-theme="dark"] .login-card .form-group--icon[data-icon="building"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>"); }
html[data-theme="dark"] .login-card .form-group--icon[data-icon="lock"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
html[data-theme="dark"] .login-card .form-group--icon[data-icon="server"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='8' rx='2'/><rect x='2' y='14' width='20' height='8' rx='2'/><line x1='6' y1='6' x2='6.01' y2='6'/><line x1='6' y1='18' x2='6.01' y2='18'/></svg>"); }
html[data-theme="dark"] .login-card .form-group--icon[data-icon="mail"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B9B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>"); }

/* Buttons — primary gradient stays accent blue, but mention */
html[data-theme="dark"] .btn-secondary { background: var(--white); color: var(--text-primary); border-color: var(--border); }
html[data-theme="dark"] .btn-secondary:hover { background: var(--row-alt); border-color: #4A4A45; }

/* Error message in login card on dark */
html[data-theme="dark"] .login-card #login-error,
html[data-theme="dark"] .login-card #reg-error {
  background: rgba(237, 107, 107, 0.10);
  border-color: rgba(237, 107, 107, 0.3);
  color: #ED6B6B;
}

/* Lot codes / code chips on dark — keep monospace readable */
html[data-theme="dark"] table td code,
html[data-theme="dark"] .table-wrapper code,
html[data-theme="dark"] .lot-code {
  background: var(--row-alt);
  color: var(--text-primary);
}

/* Toast borders adapt */
html[data-theme="dark"] .toast { background: var(--white); border-color: var(--border); }

/* Onboarding card on dark needs lighter background contrast */
html[data-theme="dark"] .onboarding-card { background: var(--white); }

/* low-num red highlight stays semantic */
html[data-theme="dark"] .low-num { color: #ED6B6B !important; }

/* ---- Notification bell: hide red dot for now (no real notifications) and
   wire a friendly fallback panel via JS in admin-pages.js. */
.header-icon-dot { display: none; }

/* Notification popover (rendered by _stratiqShowNotifPopover) */
.notif-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(15, 15, 15, 0.04),
    0 8px 24px rgba(15, 15, 15, 0.1),
    0 16px 40px rgba(15, 15, 15, 0.06);
  z-index: 100;
  overflow: hidden;
  animation: notif-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notif-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-popover-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.notif-popover-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: -0.005em;
}

.notif-popover-empty svg {
  display: block;
  margin: 0 auto 10px;
  opacity: 0.5;
}

.header-icon-btn { position: relative; }