/* ==========================================================================
   TyreHub CMS — Design System
   --------------------------------------------------------------------------
   Layer order (see includes/layout-top.php):
     1. Bootstrap 5.3 (grid, utilities, JS components)
     2. DataTables 2 base styles
     3. This file: tokens, base, components, shell, page modules

   Sections
     01 Tokens               10 Badges, chips, kbd
     02 Bootstrap bridge     11 Alerts, callouts, toasts
     03 Base & typography    12 Overlays (dropdown, modal, tooltip)
     04 Application shell    13 Navigation (tabs, segmented, accordion)
     05 Page header          14 Data display (stats, metrics, lists)
     06 Cards & layout       15 Empty, loading states
     07 Buttons              16 Domain modules (products, pricing, ...)
     08 Forms                17 Auth & document pages
     09 Tables & DataTables  18 Responsive & print
   ========================================================================== */

/* 01 · Tokens ------------------------------------------------------------- */
:root {
  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;

  /* Neutrals — cool graphite */
  --gray-0: #ffffff;
  --gray-25: #fbfbfc;
  --gray-50: #f6f7f9;
  --gray-100: #eff1f4;
  --gray-150: #e8eaee;
  --gray-200: #dfe2e8;
  --gray-300: #cbd0d8;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5362;
  --gray-700: #363c48;
  --gray-800: #232833;
  --gray-900: #141821;

  /* Brand — TyreHub navy, amber used sparingly as accent */
  --brand-25: #f5f8fc;
  --brand-50: #edf3fa;
  --brand-100: #d8e4f3;
  --brand-200: #b4cae6;
  --brand-400: #4c74a6;
  --brand-500: #1d4f8a;
  --brand-600: #0c3e74;
  --brand-700: #08305b;
  --brand-800: #06254a;
  --accent-50: #fff8e5;
  --accent-400: #f6c233;
  --accent-500: #f0b000;
  --accent-600: #c98f00;

  /* Semantic */
  --success-50: #ecf7f0;  --success-200: #b7e0c6;  --success-600: #1a7f4b;  --success-700: #136339;
  --warning-50: #fff6e6;  --warning-200: #f5d7a0;  --warning-600: #b26b00;  --warning-700: #8c5300;
  --danger-50: #fdf0ef;   --danger-200: #f4c7c2;   --danger-600: #c2321f;   --danger-700: #9d2617;
  --info-50: #eef5fd;     --info-200: #c3d9f3;     --info-600: #1f62b3;     --info-700: #174d8e;

  /* Surfaces & text */
  --bg: #f4f5f7;
  --surface: var(--gray-0);
  --surface-subtle: var(--gray-25);
  --surface-muted: var(--gray-50);
  --surface-sunken: var(--gray-100);
  --border: #e3e6eb;
  --border-subtle: #edeff2;
  --border-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --link: var(--brand-600);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* Elevation — borders first, shadows sparingly */
  --shadow-xs: 0 1px 2px rgba(20, 24, 33, .04);
  --shadow-sm: 0 1px 2px rgba(20, 24, 33, .05), 0 1px 1px rgba(20, 24, 33, .02);
  --shadow-md: 0 6px 16px -4px rgba(20, 24, 33, .10), 0 2px 4px -2px rgba(20, 24, 33, .05);
  --shadow-lg: 0 18px 40px -10px rgba(20, 24, 33, .20), 0 6px 12px -6px rgba(20, 24, 33, .08);
  --focus-ring: 0 0 0 3px rgba(12, 62, 116, .18);
  --focus-ring-danger: 0 0 0 3px rgba(194, 50, 31, .18);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Layout */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;
  --content-max: 1560px;
  --content-pad: 28px;
  --control-h: 36px;
  --control-h-sm: 30px;
  --control-h-lg: 42px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* Layers */
  --z-sticky: 20;
  --z-sidebar: 40;
  --z-backdrop: 35;
  --z-dropdown: 1060;
  --z-toast: 1090;
}

/* 02 · Bootstrap bridge ----------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 20, 24, 33;
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface-muted);
  --bs-emphasis-color: var(--text);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 12, 62, 116;
  --bs-link-color: var(--link);
  --bs-link-color-rgb: 12, 62, 116;
  --bs-link-hover-color: var(--brand-800);
  --bs-link-hover-color-rgb: 6, 37, 74;
  --bs-heading-color: var(--text);
  --bs-code-color: var(--gray-700);
  --bs-success-rgb: 26, 127, 75;
  --bs-danger-rgb: 194, 50, 31;
  --bs-warning-rgb: 178, 107, 0;
  --bs-secondary-rgb: 107, 114, 128;
  --bs-focus-ring-color: rgba(12, 62, 116, .18);
}

/* 03 · Base & typography -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.3;
  margin-top: 0;
}
h1, .h1 { font-size: var(--text-2xl); }
h2, .h2 { font-size: var(--text-xl); }
h3, .h3 { font-size: var(--text-lg); }
h4, .h4 { font-size: var(--text-md); }
h5, .h5, h6, .h6 { font-size: var(--text-base); }
p { margin-top: 0; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-800); }
small, .small { font-size: var(--text-sm); }
strong, b { font-weight: 600; }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); font-size: .92em; }
code {
  color: var(--gray-700);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  word-break: break-all;
}
hr { border-color: var(--border); opacity: 1; }
::selection { background: var(--brand-100); color: var(--brand-800); }

.icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}
.icon-xs { width: 13px; height: 13px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.tabular, .num { font-variant-numeric: tabular-nums; }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-secondary-strong { color: var(--text-secondary) !important; }
.text-faint { color: var(--text-faint) !important; }
.text-success { color: var(--success-600) !important; }
.text-danger { color: var(--danger-600) !important; }
.text-warning { color: var(--warning-600) !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.lh-tight { line-height: 1.3 !important; }
.pre-line { white-space: pre-line; }
.nowrap { white-space: nowrap; }
.min-w-0 { min-width: 0; }

/* 04 · Application shell --------------------------------------------------- */
.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-sidebar);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sidebar__brand {
  min-height: var(--topbar-h);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar__logo { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.sidebar__logo img { display: block; height: 80px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.sidebar__mark { display: none; width: 32px; height: 32px; }
.icon-btn.sidebar__close { display: none; margin-left: auto; }

.sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-3) var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.nav-section-label {
  display: block;
  padding: var(--space-4) var(--space-2) 6px;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 var(--space-2) 0 10px;
  margin: 1px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-sunken); color: var(--text); }
.nav-item .icon { width: 17px; height: 17px; color: var(--gray-500); transition: color var(--dur-fast) var(--ease); }
.nav-item:hover .icon { color: var(--gray-700); }
.nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__chevron { width: 14px !important; height: 14px !important; color: var(--text-faint) !important; transition: transform var(--dur) var(--ease); }
.nav-group.is-open > .nav-item .nav-item__chevron { transform: rotate(180deg); }
.nav-item.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.nav-item.is-active .icon { color: var(--brand-600); }
.nav-group.has-active > .nav-item { color: var(--text); }
.nav-group.has-active > .nav-item .icon:first-child { color: var(--brand-600); }

.nav-sub {
  position: relative;
  margin: 2px 0 6px 18px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.nav-sub[hidden] { display: none; }
.nav-sub__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-2);
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-sub__link:hover { color: var(--text); background: var(--surface-sunken); }
.nav-sub__link.is-active { color: var(--brand-700); font-weight: 600; background: var(--brand-50); }
.nav-sub__link.is-active::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--brand-600);
}
.nav-sub__divider { height: 1px; margin: 6px var(--space-2) 6px 0; background: var(--border-subtle); }

.sidebar__footer {
  flex: 0 0 auto;
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.user-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--surface-sunken); }
.avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--brand-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .02em;
}
.avatar--sm { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
.user-chip__text { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.user-chip__name { display: block; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip__role { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.user-chip .icon { color: var(--text-faint); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(20, 24, 33, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.app-main {
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--dur) var(--ease);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--content-pad);
  background: rgba(244, 245, 247, .92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(6px);
}
.topbar__left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.topbar__right { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.topbar .menu-toggle { display: none; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.breadcrumbs li + li::before {
  content: "/";
  color: var(--gray-300);
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

.topbar-search { position: relative; width: clamp(220px, 28vw, 380px); }
.topbar-search .icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: 34px;
  padding: 0 44px 0 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.topbar-search input::placeholder { color: var(--text-faint); }
.topbar-search input:focus { outline: 0; border-color: var(--brand-400); box-shadow: var(--focus-ring); }
.topbar-search input::-webkit-search-cancel-button { display: none; }
.topbar-search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.topbar-search input:focus ~ .kbd { opacity: 0; }

.icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn--outline { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-xs); }
.icon-btn--outline:hover { background: var(--surface-muted); }

.app-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--content-pad) var(--space-12);
}
.app-footer {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--content-pad) var(--space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-faint);
  font-size: var(--text-xs);
}

/* Collapsed rail (desktop) */
.app-shell.is-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
.app-shell.is-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }
.app-shell.is-collapsed .sidebar__brand { padding: 0; justify-content: center; }
.app-shell.is-collapsed .sidebar__logo { display: none; }
.app-shell.is-collapsed .sidebar__mark { display: block; }
.app-shell.is-collapsed .nav-section-label { font-size: 0; padding: var(--space-3) 0 0; margin-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.app-shell.is-collapsed .nav-item { justify-content: center; padding: 0; }
.app-shell.is-collapsed .nav-item__label,
.app-shell.is-collapsed .nav-item__chevron,
.app-shell.is-collapsed .nav-sub,
.app-shell.is-collapsed .user-chip__text,
.app-shell.is-collapsed .user-chip > .icon { display: none !important; }
.app-shell.is-collapsed .user-chip { justify-content: center; }
.app-shell.is-collapsed .sidebar__nav { padding-left: 10px; padding-right: 10px; }

/* 05 · Page header ---------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-header__main { min-width: 0; flex: 1 1 360px; }
.page-header__eyebrow { display: block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.page-header__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.page-header__subtitle { margin: 6px 0 0; color: var(--text-muted); font-size: var(--text-base); max-width: 760px; }
.page-header__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

/* 06 · Cards & layout ------------------------------------------------------- */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-spacer-x: var(--space-5);
  --bs-card-spacer-y: var(--space-5);
  --bs-card-cap-padding-x: var(--space-5);
  --bs-card-cap-padding-y: var(--space-4);
  --bs-card-cap-bg: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
}
.card-header:first-child { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
.card-header__main { min-width: 0; flex: 1 1 240px; }
.card-header__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.card-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.006em;
  color: var(--text);
}
.card-subtitle, .card-description {
  margin: 3px 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 400;
}
.card-body { padding: var(--space-5); }
.card-body--flush { padding: 0; }
.card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-subtle);
}
.card-footer:last-child { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.card-footer--between { justify-content: space-between; }

.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.section-gap { margin-top: var(--space-6); }

.layout-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.layout-split--wide-aside { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
.layout-main-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.sticky-aside { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); }

.subsection-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
}
.subsection-text { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.divider { height: 1px; background: var(--border-subtle); margin: var(--space-5) 0; border: 0; }

/* 07 · Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-muted);
  --btn-hover-fg: var(--text);
  --btn-hover-border: var(--gray-400);
  --btn-shadow: var(--shadow-xs);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 14px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-fg); border-color: var(--btn-hover-border); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); background: var(--btn-hover-bg); color: var(--btn-hover-fg); border-color: var(--btn-hover-border); }
.btn:first-child:active, .btn:active, .btn.active, .btn.show, :not(.btn-check) + .btn:active { background: var(--btn-hover-bg); color: var(--btn-hover-fg); border-color: var(--btn-hover-border); }
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-border); }
.btn .icon { width: 16px; height: 16px; margin: 0 -1px; }

.btn-primary {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  --btn-border: var(--brand-600);
  --btn-hover-bg: var(--brand-700);
  --btn-hover-fg: #fff;
  --btn-hover-border: var(--brand-700);
  --btn-shadow: 0 1px 2px rgba(6, 37, 74, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn-secondary, .btn-outline { /* neutral bordered — default look */ }
.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--text-secondary);
  --btn-hover-bg: var(--surface-sunken);
  --btn-hover-border: transparent;
  --btn-shadow: none;
}
.btn-danger {
  --btn-bg: var(--danger-600);
  --btn-fg: #fff;
  --btn-border: var(--danger-600);
  --btn-hover-bg: var(--danger-700);
  --btn-hover-fg: #fff;
  --btn-hover-border: var(--danger-700);
  --btn-shadow: 0 1px 2px rgba(157, 38, 23, .2);
}
.btn-danger:focus-visible, .btn-outline-danger:focus-visible { box-shadow: var(--focus-ring-danger); }
.btn-outline-danger {
  --btn-bg: var(--surface);
  --btn-fg: var(--danger-600);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--danger-50);
  --btn-hover-fg: var(--danger-700);
  --btn-hover-border: var(--danger-200);
}
.btn-success {
  --btn-bg: var(--surface);
  --btn-fg: var(--success-700);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--success-50);
  --btn-hover-fg: var(--success-700);
  --btn-hover-border: var(--success-200);
}
.btn-link {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--link);
  --btn-hover-bg: transparent;
  --btn-hover-border: transparent;
  --btn-hover-fg: var(--brand-800);
  --btn-shadow: none;
  padding: 0;
  height: auto;
}
.btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--text-xs); gap: 6px; border-radius: var(--radius-sm); }
.btn-sm .icon { width: 14px; height: 14px; }
.btn-lg { height: var(--control-h-lg); padding: 0 18px; font-size: var(--text-base); }
.btn-block { width: 100%; }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-icon.btn-ghost { color: var(--text-muted); }
.btn-icon.btn-ghost:hover { color: var(--text); }
.btn-icon.btn-ghost.is-danger:hover { color: var(--danger-600); background: var(--danger-50); }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-color: var(--btn-fg) var(--btn-fg) var(--btn-fg) transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  opacity: .9;
}

.btn-group-actions { display: inline-flex; align-items: center; gap: 2px; }
.table-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; white-space: nowrap; }

/* 08 · Forms ---------------------------------------------------------------- */
.form-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
}
.required-mark { color: var(--danger-600); font-weight: 600; }
.form-text, .field-help { margin-top: 6px; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.form-control, .form-select {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.45;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.form-control::placeholder { color: var(--text-faint); opacity: 1; }
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--gray-400); }
.form-control:focus, .form-select:focus {
  outline: 0;
  border-color: var(--brand-500);
  background-color: var(--surface);
  box-shadow: var(--focus-ring);
  color: var(--text);
}
.form-control:disabled, .form-select:disabled { background-color: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }
.form-control[readonly] { background-color: var(--surface-muted); color: var(--text-secondary); box-shadow: none; }
textarea.form-control { min-height: 96px; resize: vertical; }
.form-select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m7 15 5 5 5-5'/%3e%3cpath d='m7 9 5-5 5 5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  -webkit-appearance: none;
  appearance: none;
}
.form-control-sm, .form-select-sm { min-height: var(--control-h-sm); padding-top: 4px; padding-bottom: 4px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.form-select-sm { padding-right: 28px; background-position: right 8px center; background-size: 12px 12px; }
.form-control-lg { min-height: var(--control-h-lg); font-size: var(--text-base); }
.form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid { border-color: var(--danger-600); background-image: none; padding-right: 11px; }
.form-control.is-invalid:focus { box-shadow: var(--focus-ring-danger); }
.invalid-feedback { font-size: var(--text-xs); color: var(--danger-600); }
input[type="number"].form-control { font-variant-numeric: tabular-nums; }
input[type="date"].form-control { font-variant-numeric: tabular-nums; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; }

/* File input */
input[type="file"].form-control { padding: 4px; line-height: 26px; cursor: pointer; color: var(--text-secondary); }
input[type="file"].form-control::file-selector-button {
  height: 26px;
  margin: 0 10px 0 0;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
input[type="file"].form-control:hover::file-selector-button { background: var(--surface-sunken); }

.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--brand-400); background: var(--brand-25); }
.file-drop.has-file { border-style: solid; border-color: var(--brand-200); background: var(--brand-25); }
.file-drop__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
}
.file-drop__icon .icon { width: 20px; height: 20px; }
.file-drop__title { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.file-drop__title strong { color: var(--link); font-weight: 600; }
.file-drop__hint { font-size: var(--text-xs); color: var(--text-muted); }
.file-drop__name { font-size: var(--text-xs); font-weight: 600; color: var(--brand-700); word-break: break-all; }
.file-drop__name:empty { display: none; }
.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-drop input[type="file"]:focus-visible + .file-drop__icon { box-shadow: var(--focus-ring); }

.image-preview {
  display: inline-flex;
  margin-top: var(--space-3);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.image-preview img { display: block; max-width: 220px; max-height: 140px; border-radius: var(--radius-sm); object-fit: contain; }

/* Inputs with leading icon */
.input-icon { position: relative; }
.input-icon > .icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
  z-index: 1;
}
.input-icon--top > .icon { top: 11px; transform: none; }
.input-icon > .form-control, .input-icon > .form-select { padding-left: 34px; }
.input-icon .input-icon__action {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.input-icon.has-action > .form-control { padding-right: 40px; }

.input-group { flex-wrap: nowrap; }
.input-group > .form-control { box-shadow: none; }
.input-group > .btn { box-shadow: none; height: auto; }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group > :first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-suffix { position: relative; }
.input-suffix .form-control { padding-right: 34px; }
.input-suffix__text { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--text-muted); pointer-events: none; }

/* Checkbox / radio */
.form-check { display: flex; align-items: center; gap: 8px; min-height: 20px; padding-left: 0; margin: 0; }
.form-check .form-check-input { float: none; margin: 0; }
.form-check-label { font-size: var(--text-sm); color: var(--text); cursor: pointer; }
.form-check-input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 0;
  border: 1px solid var(--gray-400);
  border-radius: 4px;
  background-color: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-check-input:checked, .form-check-input:indeterminate { background-color: var(--brand-600); border-color: var(--brand-600); }
.form-check-input:focus { border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.form-switch { padding-left: 0; }
.form-switch .form-check-input { width: 32px; flex-basis: 32px; height: 18px; border-radius: 999px; }

/* Toggle field (switch with label + description) */
.toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.toggle-field:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.toggle-field__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-field__title { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.toggle-field__desc { font-size: var(--text-xs); color: var(--text-muted); }
.toggle-field--plain { padding: 0; border: 0; background: none; }
.toggle-field--plain:hover { background: none; }
.toggle { position: relative; display: inline-flex; flex: 0 0 auto; width: 34px; height: 20px; }
.toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.toggle__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--gray-300);
  transition: background var(--dur) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 33, .25);
  transition: transform var(--dur) var(--ease);
}
.toggle input:checked + .toggle__track { background: var(--brand-600); }
.toggle input:checked + .toggle__track::after { transform: translateX(14px); }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); }
.toggle input:disabled + .toggle__track { opacity: .5; }

/* Form layout */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
.form-grid > * { grid-column: span 12; min-width: 0; }
.form-grid .span-6 { grid-column: span 6; }
.form-grid .span-4 { grid-column: span 4; }
.form-grid .span-3 { grid-column: span 3; }
.form-grid .span-8 { grid-column: span 8; }
.form-field { min-width: 0; }

.form-section {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
}
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-section:last-child { padding-bottom: 0; }
.form-section__title { margin: 0 0 4px; font-size: var(--text-base); font-weight: 600; }
.form-section__desc { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.form-actions--start { justify-content: flex-start; }
.form-actions--flush { margin-top: 0; padding-top: 0; border-top: 0; }

.filter-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3) var(--space-4); align-items: end; }
.filter-bar--wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.filter-bar__actions { display: flex; align-items: center; gap: var(--space-2); }
.filter-bar .form-label { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 4px; }

.action-bar {
  position: sticky;
  bottom: var(--space-4);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: 10px 10px 10px var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
}
.action-bar__text { font-size: var(--text-sm); color: var(--text-secondary); }
.action-bar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.repeater { display: flex; flex-direction: column; gap: var(--space-3); }
.repeater-item {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}
.repeater-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.repeater-item__title { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.repeater-item .form-grid { gap: var(--space-3); }

/* Rich text editor (Quill 2) */
.editor-card-shell {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.editor-card-shell:focus-within { border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.editor-source { display: none; }
.rich-editor-shell .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  padding: 8px 10px;
  font-family: var(--font-sans);
}
.rich-editor-shell .ql-container.ql-snow { border: 0; font-family: var(--font-sans); font-size: var(--text-base); }
.rich-editor-shell .ql-editor { min-height: 280px; padding: 16px 18px; line-height: 1.65; color: var(--text); }
.rich-editor-shell .ql-editor.ql-blank::before { color: var(--text-faint); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--gray-600); }
.ql-snow .ql-fill { fill: var(--gray-600); }
.ql-snow .ql-picker { color: var(--gray-600); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--brand-600); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--brand-600); }
.ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-label.ql-active { color: var(--brand-600); }
.ql-snow .ql-picker-options { border-radius: var(--radius); border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; }
.ql-snow .ql-tooltip { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow-md); color: var(--text); }
.rich-fallback-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.rich-fallback-row { display: flex; gap: 4px; flex-wrap: wrap; padding-right: 6px; border-right: 1px solid var(--border); }
.rich-fallback-row:last-child { border-right: 0; }
.fallback-btn, .fallback-select { height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-xs); }
.fallback-btn:hover { background: var(--surface-sunken); color: var(--text); }
.fallback-select { border-color: var(--border); background: var(--surface); }
.fallback-color { width: 28px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rich-fallback-editor { min-height: 280px; padding: 16px 18px; outline: 0; line-height: 1.65; }

/* 09 · Tables & DataTables ---------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-hover-bg: var(--surface-subtle);
  --bs-table-hover-color: var(--text);
  --bs-table-striped-bg: transparent;
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  color: var(--text);
  vertical-align: middle;
}
.table > :not(caption) > * > * {
  padding: 11px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  box-shadow: none;
}
.table > thead > tr > th {
  position: relative;
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}
.table > thead > tr:first-child > th:first-child { border-top-left-radius: 0; }
.table > tbody > tr { transition: background var(--dur-fast) var(--ease); }
.table > tbody > tr:hover > * { background: var(--surface-subtle); }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > tfoot > tr > * { border-top: 1px solid var(--border); border-bottom: 0; font-weight: 600; background: var(--surface-subtle); }
.table td.num, .table th.num, .table .cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-tight { width: 1%; white-space: nowrap; }
.table .cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.table .cell-primary { font-weight: 500; color: var(--text); }
.table .cell-sub { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }
.table .cell-muted { color: var(--text-muted); }
.table .cell-check { width: 44px; padding-right: 0; }
.table a.cell-link { color: var(--text); font-weight: 500; }
.table a.cell-link:hover { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.table .form-control, .table .form-select { min-width: 96px; }
.table-compact > :not(caption) > * > * { padding-top: 8px; padding-bottom: 8px; }
.table-inputs > tbody > tr > td { padding-top: 7px; padding-bottom: 7px; }
.table-inputs > tbody > tr:hover > * { background: transparent; }

.table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card > .table-responsive, .card-body--flush > .table-responsive { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.table-frame { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.table-frame > .table-responsive { border-radius: inherit; }

/* Sorting indicators (DataTables 2) */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc { cursor: pointer; }
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover { color: var(--text); outline: 0; }
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc { color: var(--text); }
table.dataTable thead > tr > th span.dt-column-order { right: 8px; opacity: 1; }
table.dataTable thead > tr > th span.dt-column-order::before,
table.dataTable thead > tr > th span.dt-column-order::after { font-size: 7px; opacity: .3; color: var(--text-muted); }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--brand-600); }
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc { padding-right: 26px; }
th.no-sort { cursor: default !important; }
th.no-sort span.dt-column-order, th.no-sort::before, th.no-sort::after { display: none !important; content: none !important; }
table.dataTable > tbody > tr.selected > * { box-shadow: none; background: var(--brand-50); color: var(--text); }
table.dataTable.table > tbody > tr:hover > * { box-shadow: none; }
table.dataTable { margin: 0 !important; }
table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric,
table.dataTable th.dt-type-date, table.dataTable td.dt-type-date { text-align: left; }

.dt-container, .dataTables_wrapper { position: relative; }
.grid-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.grid-card-toolbar:empty { display: none; }
.grid-card-toolbar .dt-length, .grid-card-toolbar .dt-search,
.grid-card-toolbar .dataTables_length, .grid-card-toolbar .dataTables_filter { display: flex; align-items: center; gap: var(--space-2); margin: 0; float: none; }
.grid-card-toolbar .dt-search { margin-left: auto; }
.grid-card-toolbar label { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.toolbar-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
div.dt-container .dt-length select, div.dt-container .dt-search input,
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
  height: var(--control-h-sm);
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xs);
}
div.dt-container .dt-length select { min-width: 68px; padding: 0 26px 0 10px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
div.dt-container .dt-search input {
  width: 240px;
  padding: 0 10px 0 30px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='m21 21-4.3-4.3'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 14px;
}
div.dt-container .dt-search input:focus, div.dt-container .dt-length select:focus { outline: 0; border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.dt-container .dt-search .toolbar-label, .dt-container .dt-search label { display: none; }
.dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.dt-container .dt-info { padding: 0; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dt-container .dt-paging { display: flex; }
.dt-container .dt-paging nav { display: flex; align-items: center; gap: 2px; }
.dt-container .dt-paging .dt-paging-button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  cursor: pointer;
}
.dt-container .dt-paging .dt-paging-button:hover { background: var(--surface-sunken) !important; color: var(--text) !important; }
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow-xs) !important; font-weight: 600; }
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover { opacity: .4; background: transparent !important; cursor: default; }
.dt-container .dt-paging .ellipsis { padding: 0 4px; color: var(--text-faint); }
div.dt-processing, .dt-container div.dt-processing {
  top: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  width: auto !important;
  padding: 8px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-md) !important;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  z-index: 3;
}
div.dt-processing > div:last-child { display: none !important; }
div.dt-processing::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--brand-600);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
table.dataTable td.dt-empty { padding: 0 !important; }
.dt-scroll-body { border-bottom: 0 !important; }

/* Column picker */
.column-picker-host { display: flex; }
.column-picker { position: relative; }
.column-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h-sm);
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.column-picker-trigger:hover { background: var(--surface-muted); color: var(--text); }
.column-picker-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  max-height: 340px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.column-picker.open .column-picker-menu { opacity: 1; visibility: visible; transform: none; }
.column-picker-header { padding: 6px 8px 8px; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.column-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text); cursor: pointer; }
.column-picker-item:hover { background: var(--surface-muted); }
.column-picker-item input { width: 15px; height: 15px; accent-color: var(--brand-600); }

.column-filter-row th { padding: 6px 8px !important; background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.column-filter-control { min-width: 96px; }
.column-filter-row .filter-empty-cell { text-align: center; color: var(--text-faint); font-weight: 400; }

/* Thumbnails in tables */
.thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-faint);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--wide { width: 72px; flex-basis: 72px; }
.thumb--contain img { object-fit: contain; background: #fff; }
.table-thumb-hover { cursor: zoom-in; }
.table-thumb-hover-preview {
  position: fixed;
  z-index: var(--z-toast);
  width: 240px;
  height: 240px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.table-thumb-hover-preview.is-visible { opacity: 1; transform: none; }
.table-thumb-hover-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }

/* 10 · Badges, chips, kbd ------------------------------------------------- */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.badge-status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-400); flex: 0 0 6px; }
.badge-status--success { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.badge-status--success .badge-status__dot { background: var(--success-600); }
.badge-status--warning { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.badge-status--warning .badge-status__dot { background: var(--warning-600); }
.badge-status--danger { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
.badge-status--danger .badge-status__dot { background: var(--danger-600); }
.badge-status--info { background: var(--info-50); border-color: var(--info-200); color: var(--info-700); }
.badge-status--info .badge-status__dot { background: var(--info-600); }
.badge-status--brand { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.badge-status--brand .badge-status__dot { background: var(--brand-600); }
.badge-status--neutral { background: var(--surface-muted); border-color: var(--border); color: var(--text-secondary); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip .icon { width: 13px; height: 13px; color: var(--text-faint); }
.chip--muted { background: var(--surface-muted); }
.kbd, kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); flex: 0 0 8px; }
.status-dot--success { background: var(--success-600); box-shadow: 0 0 0 3px var(--success-50); }
.status-dot--danger { background: var(--danger-600); box-shadow: 0 0 0 3px var(--danger-50); }
.status-dot--warning { background: var(--warning-600); box-shadow: 0 0 0 3px var(--warning-50); }

/* 11 · Alerts, callouts, toasts ------------------------------------------- */
.alert, .callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.alert > .icon, .callout > .icon { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; }
.alert__body, .callout__body { flex: 1 1 auto; min-width: 0; }
.alert__title, .callout__title { display: block; margin-bottom: 2px; font-weight: 600; color: inherit; }
.alert ul, .callout ul { margin: 6px 0 0; padding-left: 18px; }
.alert-info, .callout--info { background: var(--info-50); border-color: var(--info-200); color: var(--info-700); }
.alert-success, .callout--success { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.alert-warning, .callout--warning { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.alert-danger, .callout--danger { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
.callout--neutral { background: var(--surface-muted); border-color: var(--border); color: var(--text-secondary); }
.alert strong, .callout strong { color: inherit; }
.alert .btn-close, .alert-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
  opacity: .7;
}
.alert-close:hover { opacity: 1; background: rgba(0, 0, 0, .05); }
.page-alerts { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.alert.fade:not(.show) { opacity: 0; }

.toast-stack {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease);
}
.toast-item.is-leaving { animation: toast-out var(--dur) var(--ease) forwards; }
.toast-item__icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.toast-item__icon .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.toast-item--success .toast-item__icon { background: var(--success-600); color: #fff; }
.toast-item--danger .toast-item__icon { background: var(--danger-600); color: #fff; }
.toast-item--warning .toast-item__icon { background: var(--warning-600); color: #fff; }
.toast-item--info .toast-item__icon { background: var(--info-600); color: #fff; }
.toast-item__text { flex: 1 1 auto; padding-top: 1px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* 12 · Overlays --------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-zindex: var(--z-dropdown);
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text);
}
.dropdown-menu.show { animation: pop-in var(--dur-fast) var(--ease); }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 450;
}
.dropdown-item .icon { color: var(--text-muted); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-muted); color: var(--text); }
.dropdown-item:active { background: var(--surface-sunken); color: var(--text); }
.dropdown-item.is-danger, .dropdown-item.is-danger .icon { color: var(--danger-600); }
.dropdown-item.is-danger:hover { background: var(--danger-50); }
.dropdown-divider { margin: 6px -6px; border-color: var(--border-subtle); opacity: 1; }
.dropdown-header { padding: 8px 10px; font-size: var(--text-xs); color: var(--text-muted); }
.dropdown-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.dropdown-user__name { font-weight: 600; font-size: var(--text-sm); line-height: 1.3; }
.dropdown-user__meta { font-size: var(--text-xs); color: var(--text-muted); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.modal { --bs-modal-zindex: 1070; }
.modal-backdrop { --bs-backdrop-bg: #141821; --bs-backdrop-opacity: .45; }
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal.fade .modal-dialog { transform: translateY(8px) scale(.98); transition: transform var(--dur) var(--ease); }
.modal.show .modal-dialog { transform: none; }
.modal-header { padding: var(--space-5) var(--space-5) 0; border-bottom: 0; }
.modal-title { font-size: var(--text-lg); font-weight: 600; }
.modal-body { padding: var(--space-4) var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); }
.modal-footer { gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--surface-subtle); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.modal-footer > * { margin: 0; }
.confirm-dialog .modal-body { display: flex; gap: var(--space-4); padding-top: var(--space-5); }
.confirm-dialog__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
}
.confirm-dialog__icon .icon { width: 20px; height: 20px; }
.confirm-dialog[data-variant="danger"] .confirm-dialog__icon { background: var(--danger-50); color: var(--danger-600); }
.confirm-dialog__title { margin: 0 0 6px; font-size: var(--text-md); font-weight: 600; color: var(--text); }
.confirm-dialog__text { margin: 0; color: var(--text-secondary); }

.tooltip { --bs-tooltip-bg: var(--gray-900); --bs-tooltip-color: #fff; --bs-tooltip-font-size: 12px; --bs-tooltip-border-radius: var(--radius-sm); --bs-tooltip-padding-x: 8px; --bs-tooltip-padding-y: 5px; --bs-tooltip-opacity: 1; font-family: var(--font-sans); }

/* 13 · Navigation components ------------------------------------------- */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 11px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.tabs__link .icon { width: 15px; height: 15px; }
.tabs__link:hover { color: var(--text); }
.tabs__link.is-active { color: var(--text); }
.tabs__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand-600);
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}
.segmented__item {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

.accordion {
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--radius);
  --bs-accordion-inner-border-radius: calc(var(--radius) - 1px);
  --bs-accordion-btn-padding-x: var(--space-4);
  --bs-accordion-btn-padding-y: 13px;
  --bs-accordion-body-padding-x: var(--space-4);
  --bs-accordion-body-padding-y: var(--space-4);
  --bs-accordion-active-bg: var(--surface-subtle);
  --bs-accordion-active-color: var(--text);
  --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
  --bs-accordion-btn-icon-width: 14px;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c3e74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-button { font-size: var(--text-sm); font-weight: 600; color: var(--text); gap: var(--space-3); }
.accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 var(--border-subtle); }
.accordion-body { font-size: var(--text-sm); color: var(--text-secondary); }

/* 14 · Data display ---------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.stat-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat-card__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.stat-card__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}
.stat-card__icon .icon { width: 16px; height: 16px; }
.stat-card__value {
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-card__value small { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-left: 4px; }
.stat-card__meta { font-size: var(--text-xs); color: var(--text-muted); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(var(--metric-cols, 3), minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.metric { padding: var(--space-4) var(--space-5); min-width: 0; border-left: 1px solid var(--border-subtle); }
.metric:first-child { border-left: 0; }
.metric__label { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.metric__label .icon { width: 13px; height: 13px; }
.metric__value { margin-top: 4px; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric__value--success { color: var(--success-600); }
.metric__value--danger { color: var(--danger-600); }
.metric__value--warning { color: var(--warning-600); }
.metric__note { margin-top: 2px; font-size: var(--text-xs); color: var(--text-faint); }

.kv-list { margin: 0; padding: 0; list-style: none; }
.kv-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.kv-list__item:first-child { padding-top: 0; }
.kv-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-list__key { color: var(--text-muted); }
.kv-list__value { min-width: 0; text-align: right; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-list__value a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.kv-list__value a:hover { color: var(--link); }
.kv-list__value .icon { color: var(--text-faint); }

.bar-track { position: relative; height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; min-width: 80px; }
.bar-track > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand-600); }

.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-3); }
.steps-list li { position: relative; padding-left: 34px; font-size: var(--text-sm); color: var(--text-secondary); min-height: 22px; line-height: 22px; }
.steps-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.icon-tile {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}
.icon-tile .icon { width: 20px; height: 20px; }
.icon-tile--brand { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-600); }

/* 15 · Empty & loading states -------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.empty-state__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-faint);
  box-shadow: var(--shadow-xs);
}
.empty-state__icon .icon { width: 20px; height: 20px; }
.empty-state__title { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.empty-state__text { max-width: 380px; margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.empty-state__action { margin-top: var(--space-3); }
.empty-state--compact { padding: var(--space-6) var(--space-4); }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-sunken) 0, var(--surface-muted) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 16 · Domain modules ------------------------------------------------------ */

/* Dashboard */
.dashboard { display: flex; flex-direction: column; gap: var(--space-5); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.status-table .bar-cell { width: 34%; min-width: 140px; }
.status-table .bar-cell .bar-wrap { display: flex; align-items: center; gap: 10px; }
.status-table .bar-cell .bar-track { flex: 1 1 auto; }
.status-table .bar-cell .pct { width: 38px; text-align: right; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-box { min-height: 340px; margin: 0 -8px -8px; }
.apexcharts-canvas { font-family: var(--font-sans) !important; }
.apexcharts-tooltip.apexcharts-theme-light { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; background: var(--surface) !important; }
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: var(--surface-subtle) !important; border-bottom: 1px solid var(--border-subtle) !important; font-weight: 600; }
.apexcharts-legend-text { color: var(--text-secondary) !important; font-size: 12px !important; }

/* Products */
.product-filter-panel { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.product-filter-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.product-filter-panel__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); font-weight: 600; }
.product-filter-panel__title .icon { color: var(--text-muted); }
.product-filter-panel__hint { font-size: var(--text-xs); color: var(--text-muted); }
.product-list-table .col-image, .product-list-table .col-image-cell { width: 64px; }
.col-image-cell { display: flex; align-items: center; }
.product-thumb-40 { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border); background: #fff; display: block; }
.product-thumb-placeholder { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text-faint); }
.product-thumb-placeholder .icon { width: 16px; height: 16px; }
.tire-name-cell { min-width: 220px; }
.tire-name-main { font-weight: 500; color: var(--text); line-height: 1.35; }
.tire-brand-name { font-weight: 600; }
.tire-dimensions-line { margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.season-badge {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}
.season-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.season-summer { color: #b45309; background: #fff8eb; border-color: #f6dfb0; }
.season-winter { color: var(--info-600); background: var(--info-50); border-color: var(--info-200); }
.season-all { color: var(--success-700); background: var(--success-50); border-color: var(--success-200); }
.product-list-table-tires td:nth-child(n+4):nth-child(-n+6), .product-list-table-tires th:nth-child(n+4):nth-child(-n+6) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-list-table-tires td:last-child, .product-list-table-tires th:last-child,
.product-list-table-generic td:last-child, .product-list-table-generic th:last-child { text-align: right; width: 1%; }

.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.type-option { position: relative; display: block; margin: 0; cursor: pointer; }
.type-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-option__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.type-option:hover .type-option__card { border-color: var(--border-strong); }
.type-option input:checked + .type-option__card { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500), var(--shadow-sm); background: var(--brand-25); }
.type-option input:checked + .type-option__card .icon-tile { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.type-option input:focus-visible + .type-option__card { box-shadow: var(--focus-ring); }
.type-option__title { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.type-option__desc { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

/* Wizard */
.form-wizard-list { display: flex; align-items: center; gap: 0; margin: 0 0 var(--space-6); padding: 0; list-style: none; overflow-x: auto; }
.form-wizard-list__item { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; }
.form-wizard-list__item + .form-wizard-list__item::before { content: ""; width: 48px; height: 1px; margin: 0 14px 0 4px; background: var(--border-strong); }
.form-wizard-list__item.completed + .form-wizard-list__item::before, .form-wizard-list__item.active + .form-wizard-list__item.active::before { background: var(--brand-600); }
.form-wizard-list__line { display: contents; }
.form-wizard-list__item .count {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: all var(--dur) var(--ease);
}
.form-wizard-list__item.active { color: var(--text); }
.form-wizard-list__item.active .count { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }
.form-wizard-list__item.completed .count { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.wizard-fieldset { display: none; margin: 0; padding: 0; border: 0; min-width: 0; }
.wizard-fieldset.show { display: block; animation: fade-in var(--dur) var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Bulk editors */
.bulk-editor-table .form-control { min-width: 110px; max-width: 150px; }
.bulk-editor-table input[type="date"].form-control { min-width: 140px; }
.load-more { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); }

/* Invoices */
.invoice-status-form { margin: 0; min-width: 150px; }
.invoice-status-control { position: relative; display: inline-flex; align-items: center; }
.invoice-status-control .status-dot { position: absolute; left: 10px; pointer-events: none; box-shadow: none; }
.invoice-status-select.form-select { padding-left: 24px; font-weight: 500; min-width: 140px; }
.invoice-status-control.status-novo .status-dot { background: var(--info-600); }
.invoice-status-control.status-placeno .status-dot { background: var(--success-600); }
.invoice-status-control.status-realizovano .status-dot { background: var(--brand-600); }
.invoice-status-control.status-pouzece .status-dot { background: var(--warning-600); }
.invoice-status-control.status-otkazano .status-dot { background: var(--danger-600); }
.inline-comment { display: flex; align-items: center; gap: 4px; min-width: 240px; }

/* Price monitoring */
.product-search-shell { position: relative; }
.product-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.product-search-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text);
}
.product-search-item:hover, .product-search-item:focus { background: var(--surface-muted); outline: 0; }
.product-search-name { display: block; font-weight: 500; }
.product-search-empty { padding: 10px; font-size: var(--text-sm); color: var(--text-muted); }
.monitor-table .monitor-product-name { min-width: 190px; }
.monitor-table .monitor-url { min-width: 170px; }
.monitor-discount-input { width: 84px; text-align: right; }
.monitor-error { max-width: 200px; margin-top: 6px; font-size: var(--text-xs); color: var(--danger-600); line-height: 1.4; }
.price-stack { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.price-stack__main { font-weight: 600; color: var(--text); }
.price-stack__sub { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* Service pricing */
.service-groups-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.service-group-card .card-header .group-seq { font-variant-numeric: tabular-nums; }
.service-columns-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.service-columns-grid .form-label { font-size: var(--text-xs); color: var(--text-muted); }
.service-empty-col { background-color: var(--surface-subtle); }
.service-table-shell table { table-layout: fixed; min-width: 900px; }
.service-table-shell th:first-child, .service-table-shell td:first-child { width: 36%; }
.service-table-shell th:last-child, .service-table-shell td:last-child { width: 56px; }
.service-table-shell .form-control { min-width: 0; }

/* Help center */
.help-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.help-sidebar { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-4); }
.help-nav-title { margin-bottom: var(--space-2); padding: 0 10px; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.help-nav-list { display: flex; flex-direction: column; gap: 1px; }
.help-nav-link { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
.help-nav-link .icon { color: var(--text-faint); }
.help-nav-link:hover { background: var(--surface-sunken); color: var(--text); }
.help-nav-link.active { background: var(--brand-50); color: var(--brand-700); }
.help-nav-link.active .icon { color: var(--brand-600); }
.help-search-wrap { max-width: 560px; }
.help-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.help-quick-card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.help-quick-card h6 { margin-bottom: 4px; font-size: var(--text-sm); }
.help-quick-card p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.help-section { margin-bottom: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.help-section-header { padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.help-section-header p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.help-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.help-section-title h4 { margin: 0; font-size: var(--text-lg); }
.help-section-title .icon { width: 20px; height: 20px; color: var(--brand-600); }
.help-section-body { padding: var(--space-5); }
.help-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.help-card { height: 100%; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--surface-subtle); font-size: var(--text-sm); color: var(--text-secondary); }
.help-card h6 { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--text); }
.help-card h6 .icon { color: var(--text-muted); }
.help-card ul, .help-card ol { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.help-card p:last-child { margin-bottom: 0; }
.help-note, .help-warning, .help-tip { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--space-4); padding: 12px 14px; border: 1px solid; border-radius: var(--radius); font-size: var(--text-sm); }
.help-note { background: var(--info-50); border-color: var(--info-200); color: var(--info-700); }
.help-warning { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.help-tip { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.help-note .icon, .help-warning .icon, .help-tip .icon { width: 16px; height: 16px; margin-top: 2px; }
.help-kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface); font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.help-mini-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.help-mini-table th, .help-mini-table td { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.help-mini-table tr:last-child th, .help-mini-table tr:last-child td { border-bottom: 0; }
.help-mini-table th { width: 38%; padding-right: var(--space-3); color: var(--text); font-weight: 600; }
.help-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin: 0 4px 6px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.help-empty { display: none; }
.help-highlight { padding: 0 2px; border-radius: 3px; background: var(--accent-50); color: inherit; box-shadow: inset 0 -2px 0 var(--accent-400); }

/* 17 · Auth & document pages ---------------------------------------------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--surface); }
.auth-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: var(--space-8) clamp(24px, 6vw, 88px); }
.auth-brand img { display: block; height: 80px; width: auto; max-width: 280px; object-fit: contain; object-position: left center; }
.auth-form-wrap { width: 100%; max-width: 380px; margin: var(--space-10) auto; }
.auth-title { margin: 0 0 6px; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.auth-subtitle { margin: 0 0 var(--space-8); color: var(--text-muted); font-size: var(--text-base); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form .form-control { min-height: 42px; font-size: var(--text-base); }
.auth-form .btn-lg { margin-top: var(--space-2); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.auth-footer { font-size: var(--text-xs); color: var(--text-faint); }
.auth-visual { position: relative; overflow: hidden; background: var(--gray-900); }
.auth-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 22, 0) 45%, rgba(10, 14, 22, .72) 100%); }
.auth-visual__caption { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; color: #fff; }
.auth-visual__caption strong { display: block; margin-bottom: 6px; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; }
.auth-visual__caption span { display: block; max-width: 440px; color: rgba(255, 255, 255, .78); font-size: var(--text-sm); }
.auth-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }

.doc-page { background: var(--bg); min-height: 100vh; padding: var(--space-6) var(--space-4) var(--space-12); }
.doc-toolbar { max-width: 880px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.doc { max-width: 880px; margin: 0 auto; padding: clamp(24px, 5vw, 56px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); flex-wrap: wrap; padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.doc-company { font-size: var(--text-sm); color: var(--text-secondary); }
.doc-company strong { display: block; margin-bottom: 4px; font-size: var(--text-lg); color: var(--text); }
.doc-title { margin: 0 0 6px; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; text-align: right; }
.doc-meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: var(--text-sm); justify-content: end; }
.doc-meta dt { color: var(--text-muted); font-weight: 400; }
.doc-meta dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-6) 0; }
.doc-label { margin-bottom: 6px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.doc-parties p { margin: 0; font-size: var(--text-sm); }
.doc-total { display: flex; justify-content: flex-end; padding-top: var(--space-5); }
.doc-total__box { min-width: 260px; display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--surface-muted); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 18 · Responsive & print ------------------------------------------------- */
@media (max-width: 1399.98px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
  :root { --content-pad: 22px; }
  .dashboard-grid, .layout-main-aside, .layout-split, .layout-split--wide-aside { grid-template-columns: minmax(0, 1fr); }
  .sticky-aside { position: static; }
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-sidebar { position: static; }
  .help-sidebar .help-nav-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .service-columns-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); width: min(var(--sidebar-w), 86vw); box-shadow: none; }
  .app-main, .app-shell.is-collapsed .app-main { margin-left: 0; }
  .app-shell.is-collapsed .app-sidebar { width: min(var(--sidebar-w), 86vw); }
  .app-shell.sidebar-open .app-sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .app-shell.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  .topbar .menu-toggle { display: inline-flex; }
  .topbar .collapse-toggle { display: none; }
  .icon-btn.sidebar__close { display: inline-flex; }
  .topbar-search { width: auto; flex: 0 1 260px; }
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { display: none; }
  .doc-parties { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  :root { --content-pad: 16px; --topbar-h: 56px; }
  .topbar { gap: var(--space-2); }
  .topbar-search { display: none; }
  .topbar .search-toggle { display: inline-flex; }
  .breadcrumbs li:not(:last-child) { display: none; }
  .page-header { flex-direction: column; align-items: stretch; margin-bottom: var(--space-5); }
  .page-header__title { font-size: var(--text-xl); }
  .page-header__actions { width: 100%; }
  .page-header__actions > .btn { flex: 1 1 auto; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stat-card { padding: var(--space-4); }
  .stat-card__value { font-size: var(--text-xl); }
  .metric-strip { grid-template-columns: minmax(0, 1fr); }
  .metric { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .metric:first-child { border-top: 0; }
  .card-header, .card-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .card-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .form-grid .span-6, .form-grid .span-4, .form-grid .span-3, .form-grid .span-8 { grid-column: span 12; }
  .grid-card-toolbar { padding: var(--space-3); }
  .dt-container .dt-search { margin-left: 0; width: 100%; }
  .dt-container .dt-search input { width: 100%; }
  .dt-footer { justify-content: center; }
  .dt-container .dt-info { width: 100%; text-align: center; }
  .help-quick-grid, .help-subgrid { grid-template-columns: minmax(0, 1fr); }
  .help-mini-table th, .help-mini-table td { display: block; width: 100%; padding-right: 0; }
  .help-mini-table th { padding-bottom: 2px; border-bottom: 0; }
  .service-columns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-bar { bottom: var(--space-2); }
  .action-bar__text { display: none; }
  .action-bar__actions { width: 100%; }
  .action-bar__actions .btn { flex: 1 1 auto; }
  .toast-stack { right: 16px; left: 16px; width: auto; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar__actions { grid-column: 1 / -1; }
  .filter-bar__actions .btn { flex: 1 1 auto; }
  .doc-title, .doc-meta { text-align: left; justify-content: start; }
  .doc-meta dd { text-align: left; }
}
@media (max-width: 479.98px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .segmented { width: 100%; }
  .segmented__item { flex: 1 1 0; padding: 0 6px; }
}
.search-toggle { display: none; }
.mobile-search { display: none; padding: 10px var(--content-pad); border-bottom: 1px solid var(--border); background: var(--surface); }
.mobile-search.is-open { display: block; }
.mobile-search .topbar-search { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; }
  .app-sidebar, .topbar, .app-footer, .page-header__actions, .doc-toolbar, .toast-stack, .sidebar-backdrop { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0; max-width: none; }
  .card, .doc { border: 0; box-shadow: none; }
  .doc-page { padding: 0; background: #fff; }
  .doc { max-width: none; padding: 0; }
}

/* Shell utilities */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.topbar-account { width: auto; padding: 0 2px; border-radius: var(--radius-full); }
.modal-dialog--confirm { max-width: 440px; }
.filter-bar .span-2 { grid-column: span 2; }
@media (max-width: 479.98px) { .filter-bar .span-2 { grid-column: auto; } }
.bulk-actions-bar { background: var(--surface-subtle); border-color: var(--border-subtle) !important; }
.table > tbody > tr.is-selected > * { background: var(--brand-25); }
.cell-check label, label.cell-primary { cursor: pointer; }
.metric-strip--2 { --metric-cols: 2; }
.metric-strip--4 { --metric-cols: 4; }
.metric-strip--5 { --metric-cols: 5; }
.metric-strip--7 { --metric-cols: 7; }
@media (max-width: 1199.98px) { .metric-strip--7, .metric-strip--5 { --metric-cols: 4; } .metric-strip--7 .metric, .metric-strip--5 .metric { border-top: 1px solid var(--border-subtle); } }
.field-inline { flex: 1 1 280px; max-width: 420px; }
.stack > .field-inline, .stack-sm > .field-inline, .stack-lg > .field-inline { flex: none; max-width: 640px; }
.min-w-240 { min-width: 240px; }
.btn-ghost.is-danger { color: var(--danger-600); }
.btn-ghost.is-danger:hover { background: var(--danger-50); color: var(--danger-700); }
.btn-icon.btn-ghost.is-danger { color: var(--text-muted); }
.btn-icon.btn-ghost.is-danger:hover { color: var(--danger-600); background: var(--danger-50); }
.monitor-table > :not(caption) > * > * { padding-left: 12px; padding-right: 12px; }
.mw-240 { max-width: 240px; }
.avatar--muted { background: var(--gray-300); color: var(--gray-700); }
.form-grid .span-1 { grid-column: span 1; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-5 { grid-column: span 5; }
@media (max-width: 991.98px) { .form-grid .span-2, .form-grid .span-3, .form-grid .span-5 { grid-column: span 6; } .form-grid .span-4 { grid-column: span 6; } }
@media (max-width: 767.98px) { .form-grid .span-1, .form-grid .span-2, .form-grid .span-5 { grid-column: span 12; } .form-grid .span-1.text-end { text-align: left !important; } }
@media (max-width: 767.98px) {
  .page-header__main { flex: none; }
  .breadcrumbs li:last-child::before { content: none; }
  .auth-panel { justify-content: flex-start; gap: var(--space-8); padding-top: var(--space-6); }
  .auth-form-wrap { margin: 0 auto; }
  .form-wizard-list__item .text { display: none; }
  .form-wizard-list__item + .form-wizard-list__item::before { width: 24px; margin: 0 8px 0 0; }
}

/* ==========================================================================
   19 · Emphasis layer
   Adds hierarchy on top of the neutral system: one accent CTA per page,
   tinted surfaces for key data, and colour that carries meaning
   (discounts, undercut prices, invoice status). Colour is never decorative.
   ========================================================================== */
:root {
  --accent-ink: #1d1600;
  --accent-hover: #e2a400;
  --brand-gradient: linear-gradient(135deg, #0f4683 0%, #0a3463 100%);
  --page-glow: linear-gradient(180deg, #e8eef6 0px, rgba(232, 238, 246, 0) 320px);
}

/* Canvas & chrome */
.app-main { background: var(--page-glow), var(--bg); background-repeat: no-repeat; }
.topbar { background: rgba(255, 255, 255, .86); }
.card { box-shadow: var(--shadow-sm); }
.page-header__title { font-size: 26px; font-weight: 650; letter-spacing: -0.022em; }
.page-header__subtitle { color: var(--text-secondary); }

/* Accent call to action — the single most important action on a page */
.btn-accent {
  --btn-bg: var(--accent-500);
  --btn-fg: var(--accent-ink);
  --btn-border: var(--accent-500);
  --btn-hover-bg: var(--accent-hover);
  --btn-hover-fg: var(--accent-ink);
  --btn-hover-border: var(--accent-hover);
  --btn-shadow: 0 1px 2px rgba(120, 85, 0, .25), 0 4px 12px -4px rgba(240, 176, 0, .55);
  font-weight: 600;
}
.page-header__actions .btn { height: 38px; padding: 0 16px; }
.btn-primary { font-weight: 600; }

/* Sidebar: clearer "you are here" */
.nav-item.is-active { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(6, 37, 74, .25); }
.nav-item.is-active .icon { color: #fff; }
.nav-item.is-active:hover { background: var(--brand-700); color: #fff; }
.nav-sub__link.is-active::before { background: var(--accent-500); width: 3px; left: -14px; }
.nav-group.has-active > .nav-item { font-weight: 600; }
.nav-section-label { color: var(--gray-500); }

/* Card titles with a tinted icon tile */
.card-title--icon { display: flex; align-items: center; gap: 10px; }
.title-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--brand-50);
  color: var(--brand-600);
}
.title-icon .icon { width: 15px; height: 15px; }
.card-title--icon + .card-subtitle { padding-left: 36px; }

/* KPI cards: tone per metric, one featured */
.stat-card { position: relative; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); box-shadow: var(--shadow-sm); }
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-card__icon { width: 34px; height: 34px; border: 0; border-radius: 9px; }
.stat-card__icon .icon { width: 18px; height: 18px; }
.stat-card--brand .stat-card__icon { background: var(--brand-50); color: var(--brand-600); }
.stat-card--accent .stat-card__icon { background: var(--accent-50); color: #9a6a00; }
.stat-card--info .stat-card__icon { background: var(--info-50); color: var(--info-600); }
.stat-card--featured { background: var(--brand-gradient); border-color: transparent; color: #fff; box-shadow: 0 10px 28px -12px rgba(12, 62, 116, .65); }
.stat-card--featured .stat-card__label { color: rgba(255, 255, 255, .78); }
.stat-card--featured .stat-card__value { color: #fff; }
.stat-card--featured .stat-card__value small { color: rgba(255, 255, 255, .7); }
.stat-card--featured .stat-card__meta { color: rgba(255, 255, 255, .7); }
.stat-card--featured .stat-card__icon { background: rgba(255, 255, 255, .14); color: var(--accent-400); }
.stat-card--featured::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 22px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}

/* Metric strips: highlight the number that matters */
.metric--highlight { background: var(--brand-25); }
.metric--highlight .metric__value { color: var(--brand-700); }
.metric--highlight .metric__label { color: var(--brand-600); }

/* Status bars carry the status colour */
.bar-track--info > span { background: var(--info-600); }
.bar-track--success > span { background: var(--success-600); }
.bar-track--brand > span { background: var(--brand-600); }
.bar-track--warning > span { background: var(--accent-500); }
.bar-track--danger > span { background: var(--danger-600); }
.bar-track--neutral > span { background: var(--gray-400); }

/* Tables: stronger headers and primary column */
.table > thead > tr > th { color: var(--text-secondary); font-weight: 600; }
.tire-brand-name { color: var(--brand-700); }

/* Prices & discounts */
.price-old { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--gray-400); }
.price-sale { color: var(--success-700); font-weight: 650; }
.discount-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--accent-500);
  color: var(--accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Product filters: visually separate the control area from results */
.product-filter-panel { background: var(--brand-25); border-bottom-color: var(--brand-100); }
.product-filter-panel__title .icon { color: var(--brand-600); }
[data-active-filter-count]:not([hidden]) { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* Invoice status: the control itself shows the state */
.invoice-status-select.form-select { font-weight: 600; }
.invoice-status-control.status-novo .invoice-status-select { background-color: var(--info-50); border-color: var(--info-200); color: var(--info-700); }
.invoice-status-control.status-placeno .invoice-status-select { background-color: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.invoice-status-control.status-realizovano .invoice-status-select { background-color: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.invoice-status-control.status-pouzece .invoice-status-select { background-color: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.invoice-status-control.status-otkazano .invoice-status-select { background-color: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }

/* Price monitoring: competitor is cheaper → needs attention */
.table > tbody > tr.is-undercut > * { background: #fff8f7; }
.table > tbody > tr.is-undercut > td:first-child { box-shadow: inset 3px 0 0 var(--danger-600); }
.flip-y { transform: scaleY(-1); }

/* Page-level save bars stand out from content */
.action-bar { border-color: var(--brand-100); }
@media (max-width: 767.98px) { .stat-card--featured { order: -1; } }

/* Bulk price editor: same price/discount language as the product list */
.bulk-editor-table td.num, .bulk-editor-table th.num { text-align: right; }
.bulk-editor-table .price-input { text-align: right; margin-left: auto; }
.price-input.is-discounted:not(:focus) { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--gray-400); }
.bulk-editor-table .js-sale-cell { min-width: 110px; white-space: nowrap; }
.discount-edit { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.discount-edit .discount-input { width: 84px; min-width: 84px; text-align: right; }
.discount-badge[hidden] { display: none; }
.bulk-editor-table td:nth-child(2) { min-width: 200px; }
.bulk-editor-table > tbody > tr.is-dirty > * { background: var(--accent-50); }
.bulk-editor-table > tbody > tr.is-dirty > td:first-child { box-shadow: inset 3px 0 0 var(--accent-500); }
.action-bar__text.is-dirty { color: var(--warning-700); font-weight: 600; }
.product-search-meta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.product-search-name .badge-status { height: 18px; margin-left: 6px; vertical-align: 1px; }