/* Geist Sans */
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/GeistVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono */
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMonoVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ── Surfaces / Backgrounds ── */
  --bg-root: #050d12;
  --bg-sidebar: #0a1219;
  --bg-surface: #0c1720;
  --bg-card: #101d28;
  --bg-card-hover: #142430;
  --bg-elevated: #18293a;
  --bg-default: transparent;
  --bg-input: #0e1a24;
  --bg-overlay: rgba(5, 13, 18, 0.85);

  /* ── Accent (Emerald) ── */
  --accent-50: #ecfdf5;
  --accent-100: #d1fae5;
  --accent-200: #a7f3d0;
  --accent-300: #6ee7b7;
  --accent-400: #34d399;
  --accent-500: #10b981;
  --accent-600: #059669;
  --accent-700: #047857;
  --accent-800: #065f46;
  --accent-900: #064e3b;
  --accent-950: #022c22;
  --accent-surface: #0b2e1f;
  --accent-surface-hover: #0f3d2a;

  /* ── Text ── */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-disabled: #475569;
  --text-accent: #34d399;

  /* ── Borders ── */
  --border-default: #172432;
  --border-subtle: #111e2b;
  --border-strong: #1e3347;
  --border-accent: #10b981;

  /* ── Status ── */
  --status-success: #22c55e;
  --status-success-muted: rgba(34, 197, 94, 0.12);
  --status-error: #ef4444;
  --status-error-muted: rgba(239, 68, 68, 0.12);
  --status-warning: #f59e0b;
  --status-warning-muted: rgba(245, 158, 11, 0.12);
  --status-info: #3b82f6;
  --status-info-muted: rgba(59, 130, 246, 0.12);

  /* ── Chart ── */
  --chart-1: #34d399;
  --chart-2: #10b981;
  --chart-3: #059669;
  --chart-gradient-start: rgba(52, 211, 153, 0.35);
  --chart-gradient-end: rgba(16, 185, 129, 0.02);

  /* ── Spacing (4px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Sidebar ── */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;

  /* ── Typography (Accessibility: 16px base) ── */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ── Table Spacing ── */
  --table-cell-padding-x: 1rem;
  --table-cell-padding-y: 0.875rem;
  --table-header-padding-y: 1rem;
}

/* ── Large Text Mode (Accessibility) ── */
[data-font-size="large"] {
  --text-xs: 1rem;
  --text-sm: 1.125rem;
  --text-base: 1.25rem;
  --text-md: 1.375rem;
  --text-lg: 1.625rem;
  --text-xl: 2rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3rem;
  --text-4xl: 3.5rem;

  --table-cell-padding-x: 1.5rem;
  --table-cell-padding-y: 1.125rem;
  --table-header-padding-y: 1.25rem;
}

/* ── Light Theme ── */
[data-theme="light"] {
  /* Surfaces / Backgrounds */
  --bg-root: #ffffff;
  --bg-sidebar: #f8fafc;
  --bg-surface: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-elevated: #f1f5f9;
  --bg-input: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.9);

  /* Text (WCAG AA compliant) */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-disabled: #94a3b8;
  --text-accent: #059669;

  /* Borders */
  --border-default: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;
  --border-accent: #10b981;

  /* Status (adjusted for light backgrounds) */
  --status-success: #16a34a;
  --status-success-muted: rgba(22, 163, 74, 0.12);
  --status-error: #dc2626;
  --status-error-muted: rgba(220, 38, 38, 0.12);
  --status-warning: #d97706;
  --status-warning-muted: rgba(217, 119, 6, 0.12);
  --status-info: #2563eb;
  --status-info-muted: rgba(37, 99, 235, 0.12);

  /* Chart */
  --chart-1: #10b981;
  --chart-2: #059669;
  --chart-3: #047857;
  --chart-gradient-start: rgba(16, 185, 129, 0.25);
  --chart-gradient-end: rgba(5, 150, 105, 0.02);

  /* Shadows (lighter for light mode) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Accent surfaces for light mode */
  --accent-surface: #ecfdf5;
  --accent-surface-hover: #d1fae5;
}

/* ── Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: 'Geist Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Prevent double-tap zoom on interactive elements (calculator, buttons, etc.)
   while preserving pinch-to-zoom accessibility. */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
[role="button"],
[onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Utility Classes ── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: background var(--transition-base);
}

a.card:hover, button.card:hover {
  background: var(--bg-card-hover);
}

/* Icon sizes matching Next.js */
.icon-sm {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.icon-md {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-container {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.badge-positive {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--status-success);
  background: var(--status-success-muted);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.badge-negative {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--status-error);
  background: var(--status-error-muted);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.nav-item-active {
  color: var(--text-accent);
  background: var(--accent-surface);
}

.nav-item-active:hover {
  background: var(--accent-surface-hover);
  color: var(--text-accent);
}

.tab {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  background: transparent;
}

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

.tab-active {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* ── Preference Toggle States ── */
#font-size-toggle.font-size-large {
  color: var(--text-accent);
  background: var(--accent-surface);
}

#font-size-toggle.font-size-large:hover {
  background: var(--accent-surface-hover);
}

/* ── Tables ── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

th {
  padding-top: var(--table-header-padding-y);
  padding-bottom: var(--table-header-padding-y);
}

thead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-card);
}

.inventory-table thead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-card);
}

.inventory-table thead th {
  background: var(--bg-card);
}

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

td, th {
  min-width: 60px;
}

.col-numeric {
  white-space: nowrap;
  text-align: right;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── Sidebar (desktop baseline) ── */
.sidebar {
  width: var(--sidebar-width);
  z-index: 40;
}

/* ── Sidebar Backdrop ── */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Main content (desktop baseline) ── */
.main-content {
  margin-left: var(--sidebar-width);
}

/* ── Category/Subcategory Filter Buttons ── */
.cat-btn,
.cat-btn-active {
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cat-btn {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.cat-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.cat-btn-active {
  background: var(--accent-500);
  color: white;
}

.subcat-btn,
.subcat-btn-active {
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.subcat-btn {
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.subcat-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.subcat-btn-active {
  background: var(--accent-400);
  color: white;
}

/* Mobile: larger filter buttons for easier tapping */
@media (max-width: 767px) {
  .cat-btn,
  .cat-btn-active {
    padding: 0.5rem 0.75rem;
    font-size: 12px;
    min-width: 44px;
    min-height: 36px;
  }
  
  .subcat-btn,
  .subcat-btn-active {
    padding: 0.4rem 0.6rem;
    font-size: 11px;
    min-height: 32px;
  }
  
  .category-filter,
  .subcat-filter {
    gap: 6px !important;
  }
}

/* ── Physical Count Button (for warehouse users) ── */
.col-physical {
  width: 70px;
}

.physical-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 0.35rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.physical-btn.has-value {
  background: var(--accent-500);
  color: white;
}

.physical-btn.has-value:hover {
  background: var(--accent-600);
}

.physical-btn.no-value {
  background: var(--status-warning);
  color: #000;
}

.physical-btn.no-value:hover {
  background: #e6b800;
}

.physical-input {
  width: 70px;
  padding: 0.35rem 0.5rem;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border: 2px solid var(--accent-500);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
}

.physical-edit-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mobile: much larger physical count button */
@media (max-width: 767px) {
  .col-physical {
    width: 100% !important;
  }
  
  .physical-btn {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 16px;
    border-radius: 6px;
  }
  
  .physical-btn.no-value {
    font-weight: 700;
  }
  
  .physical-input {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem;
    font-size: 18px;
    border-width: 2px;
  }
  
  .physical-edit-container {
    width: 100%;
  }
}

/* ── Desktop Table Fit ── */
.card-table {
  table-layout: auto;
  width: 100%;
}

.card-table th,
.card-table td {
  font-size: var(--text-xs);
  padding: 0.25rem 0.375rem;
  white-space: nowrap;
}

.card-table th {
  font-size: 10px;
  padding: 0.5rem 0.375rem;
}

/* Inventory table specific - more compact */
.inventory-table {
  table-layout: auto;
  width: 100%;
}

.inventory-table th,
.inventory-table td {
  font-size: 12px;
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
}

.inventory-table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inventory-table .col-description {
  white-space: normal;
  min-width: 150px;
}

.inventory-table .col-number,
.inventory-table .col-variance,
.inventory-table .col-currency {
  text-align: right;
}

/*
 * Reduced column sets (salesman / warehouse) — let the flexible columns grow
 * so rows actually span the container width instead of squishing left.
 * Admin keeps its tight auto layout because it already has 15 columns.
 */
.inventory-table[data-role="salesman"],
.inventory-table[data-role="warehouse"] {
  table-layout: auto;
}

.inventory-table[data-role="salesman"] .col-description {
  min-width: 260px;
  width: 40%;
}

.inventory-table[data-role="salesman"] .col-category {
  min-width: 120px;
  width: 14%;
}

.inventory-table[data-role="salesman"] .col-sku {
  min-width: 90px;
}

.inventory-table[data-role="salesman"] .col-number,
.inventory-table[data-role="salesman"] .col-currency {
  width: 72px;
  min-width: 64px;
}

.inventory-table[data-role="salesman"] .col-po {
  width: 56px;
  min-width: 48px;
}

.inventory-table[data-role="warehouse"] .col-description {
  min-width: 320px;
  width: 70%;
}

/* Table scroll container - enables sticky headers */
.table-scroll-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Fix main content overflow - critical for wide tables */
.main-content {
  overflow-x: hidden;
  min-width: 0;
  max-width: calc(100vw - var(--sidebar-width));
}

.p-6 {
  max-width: 100%;
  overflow-x: hidden;
}

.card {
  max-width: 100%;
}

/* ── Mobile Responsive Card / Data Tables → Tiles ── */
@media (max-width: 767px) {
  .card-table,
  .data-table {
    border-collapse: collapse;
  }

  .card-table thead,
  .data-table thead {
    display: none;
  }

  .card-table tbody,
  .data-table tbody,
  .data-table tfoot {
    display: block;
  }

  .card-table tbody tr,
  .data-table tbody tr,
  .data-table tfoot tr {
    display: block;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-card);
  }

  .card-table tbody tr:last-child,
  .data-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .card-table td,
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) 0;
    border: none;
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
    text-align: right;
    white-space: normal;
  }

  .card-table td::before,
  .data-table td::before {
    content: attr(data-label);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    flex-shrink: 0;
    margin-right: var(--space-3);
    text-align: left;
  }

  .card-table td[data-label=""]::before,
  .card-table td:not([data-label])::before,
  .data-table td[data-label=""]::before,
  .data-table td:not([data-label])::before {
    display: none;
  }

  .card-table td:empty,
  .data-table td:empty {
    display: none;
  }

  .card-table .card-table-category td,
  .data-table .card-table-category td {
    display: block;
    text-align: left;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--text-accent);
    padding: var(--space-1) 0;
  }

  .card-table .card-table-category td::before,
  .data-table .card-table-category td::before {
    display: none;
  }

  .card-table .card-table-category,
  .data-table .card-table-category {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
  }

  .card-table .card-table-footer td,
  .data-table .card-table-footer td {
    font-weight: var(--weight-bold);
  }

  .card-table .card-table-footer,
  .data-table .card-table-footer {
    background: var(--bg-elevated);
    border-color: var(--border-accent);
  }

  .card-table td input,
  .card-table td select,
  .data-table td input,
  .data-table td select {
    max-width: 50%;
    min-width: 3rem;
  }

  /* Row-level <th> in data-tables (key-value layouts) */
  .data-table td:first-child,
  .data-table tbody th {
    text-align: left;
  }

  /* Neutralize overflow-x scroll wrappers so tiles aren't trapped */
  .card[style*="overflow-x"] {
    overflow: visible !important;
  }
}

/* ── Sidebar Collapse Toggle ── */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.sidebar-toggle svg {
  transition: transform var(--transition-base);
}

/* ── Sidebar Collapsed State ── */
[data-sidebar-collapsed="true"] .sidebar {
  width: var(--sidebar-collapsed-width);
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-logo-text,
[data-sidebar-collapsed="true"] .sidebar .nav-item span,
[data-sidebar-collapsed="true"] .sidebar .sidebar-user-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-logo {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-toggle {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  margin-left: 0;
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-toggle svg {
  transform: rotate(180deg);
}

[data-sidebar-collapsed="true"] .sidebar nav {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

[data-sidebar-collapsed="true"] .sidebar .nav-item {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  gap: 0;
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-user {
  justify-content: center;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-user-avatar {
  margin-right: 0;
}

[data-sidebar-collapsed="true"] .sidebar .sidebar-logout {
  display: none;
}

[data-sidebar-collapsed="true"] .main-content {
  margin-left: var(--sidebar-collapsed-width);
  max-width: calc(100vw - var(--sidebar-collapsed-width));
}


/* ── Mobile Menu Button ── */
.mobile-menu-btn {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 45;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}
.mobile-menu-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* ── Mobile Layout ── */
@media (max-width: 767px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 50;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
    max-width: 100vw !important;
    padding-top: calc(44px + var(--space-3) + var(--space-3)) !important;
  }

  /* Disable collapse on mobile - always show full sidebar when open */
  [data-sidebar-collapsed="true"] .sidebar {
    width: var(--sidebar-width);
  }

  [data-sidebar-collapsed="true"] .sidebar .sidebar-logo-text,
  [data-sidebar-collapsed="true"] .sidebar .nav-item span,
  [data-sidebar-collapsed="true"] .sidebar .sidebar-user-info {
    opacity: 1;
    width: auto;
  }

  [data-sidebar-collapsed="true"] .sidebar .sidebar-logo {
    justify-content: flex-start;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  [data-sidebar-collapsed="true"] .sidebar nav {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  [data-sidebar-collapsed="true"] .sidebar .nav-item {
    justify-content: flex-start;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    gap: var(--space-3);
  }

  [data-sidebar-collapsed="true"] .sidebar .sidebar-user {
    justify-content: flex-start;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  [data-sidebar-collapsed="true"] .sidebar .sidebar-logout {
    display: flex;
  }

  [data-sidebar-collapsed="true"] .main-content {
    margin-left: 0;
    max-width: 100vw;
  }

  .sidebar-toggle {
    display: none;
  }
}

/* ── Sidebar Logo (theme-aware) ── */
.sidebar-logo-light,
.sidebar-logo-dark {
  display: none !important;
}
[data-theme="light"] .sidebar-logo-light {
  display: block !important;
}
[data-theme="dark"] .sidebar-logo-dark,
html:not([data-theme="light"]) .sidebar-logo-dark {
  display: block !important;
}
/* ── Tailwind-equivalent utility classes ── */
/* Maps every Tailwind class used in the React components to plain CSS */

/* ── Display ── */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }

/* ── Flex ── */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.space-y-4 > * + * { margin-top: var(--space-4); }

/* ── Grid ── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* ── Sizing ── */
.w-full { width: 100%; }
.w-fit { width: fit-content; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.h-2 { height: 0.5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-64 { height: 16rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }

/* ── Spacing ── */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.pt-2 { padding-top: var(--space-2); }
.pb-2 { padding-bottom: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }

.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-auto { margin-top: auto; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: var(--space-2); }

/* ── Backgrounds ── */
.bg-bg-root { background: var(--bg-root); }
.bg-bg-sidebar { background: var(--bg-sidebar); }
.bg-bg-surface { background: var(--bg-surface); }
.bg-bg-card { background: var(--bg-card); }
.bg-bg-elevated { background: var(--bg-elevated); }
.bg-bg-default { background: var(--bg-default); }
.bg-bg-input { background: var(--bg-input); }
.bg-bg-overlay { background: var(--bg-overlay); }
.bg-white { background: #ffffff; }
.bg-red-500 { background: #ef4444; }
.bg-accent-500 { background: var(--accent-500); }
.bg-accent-600 { background: var(--accent-600); }
.bg-accent-surface { background: var(--accent-surface); }

/* ── Text Colors ── */
.text-text-primary { color: var(--text-primary); }
.text-text-secondary { color: var(--text-secondary); }
.text-text-muted { color: var(--text-muted); }
.text-text-disabled { color: var(--text-disabled); }
.text-text-accent { color: var(--text-accent); }
.text-white { color: #ffffff; }
.text-accent-500 { color: var(--accent-500); }
.text-slate-900 { color: #0f172a; }
.text-accent-400 { color: var(--accent-400); }
.text-status-success { color: var(--status-success); }
.text-status-error { color: var(--status-error); }
.text-status-warning { color: var(--status-warning); }

/* ── Borders ── */
.border { border: 1px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-r { border-right: 1px solid; }
.border-l { border-left: 1px solid; }
.border-border-default { border-color: var(--border-default); }
.border-border-subtle { border-color: var(--border-subtle); }
.border-border-strong { border-color: var(--border-strong); }
.border-border-accent { border-color: var(--border-accent); }
.border-accent-500 { border-color: var(--accent-500); }
.border-transparent { border-color: transparent; }

/* ── Border Radius ── */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Typography ── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.font-mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ── Shadows ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-card { box-shadow: var(--shadow-card); }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Opacity ── */
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.50; }
.opacity-75 { opacity: 0.75; }

/* ── Hover utilities (plain CSS, no JS) ── */
.hover\:bg-bg-elevated:hover { background: var(--bg-elevated); }
.hover\:bg-accent-600:hover { background: var(--accent-600); }
.hover\:bg-red-600:hover { background: #dc2626; }
.hover\:text-text-primary:hover { color: var(--text-primary); }
.hover\:text-text-secondary:hover { color: var(--text-secondary); }
.hover\:text-text-accent:hover { color: var(--text-accent); }
.hover\:bg-bg-card-hover:hover { background: var(--bg-card-hover); }

/* ── Disabled ── */
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* ── Focus ── */
.focus\:border-border-accent:focus { border-color: var(--border-accent); }
.focus\:border-accent-500:focus { border-color: var(--accent-500); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px currentColor; }
.focus\:ring-accent-500:focus { box-shadow: 0 0 0 1px var(--accent-500); }
.focus\:outline-none:focus { outline: none; }
.outline-none { outline: none; }

/* ── Placeholder ── */
.placeholder\:text-text-muted::placeholder { color: var(--text-muted); }
.placeholder\:text-text-disabled::placeholder { color: var(--text-disabled); }
.placeholder\:text-slate-500::placeholder { color: #64748b; }

/* ── Responsive ── */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:w-auto { width: auto; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ── Mobile-only (hide above 768px) ── */
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}

/* ── Misc ── */
.-space-x-2 > * + * { margin-left: -0.5rem; }
.select-none { user-select: none; }
.inline-block { display: inline-block; }
.shrink-0 { flex-shrink: 0; }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.-mb-px { margin-bottom: -1px; }

/* ── Group hover ── */
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* ── Animations ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ── Table utilities ── */
table { border-collapse: collapse; }
.table-auto { table-layout: auto; }
.table-fixed { table-layout: fixed; }

/* ── Form elements ── */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ── Z-index ── */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }

/* ── Additional Tailwind equivalents used in components ── */
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.gap-1\.5 { gap: 0.375rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.border-2 { border-width: 2px; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }

/* ── Inline style helpers (matching the React style={{}} patterns) ── */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: 150ms; transition-timing-function: ease; }

/* ── App shell (sidebar + main) ── */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding: var(--space-5);
}
.sidebar-logo {
  font-family: 'Geist Mono', monospace;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--text-accent);
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-3) var(--space-6);
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-user {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent-surface);
  color: var(--text-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-family: 'Geist Mono', monospace;
  font-size: var(--text-xs);
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-info .name { color: var(--text-primary); font-weight: var(--weight-medium); }
.sidebar-user-info .role { color: var(--text-muted); font-size: var(--text-xs); }
.sidebar-logout {
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: all var(--transition-fast);
}
.sidebar-logout:hover { color: var(--status-error); background: var(--status-error-muted); }

/* ── Sidebar Preferences (theme toggle) ── */
.sidebar-prefs {
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
[data-theme="light"] .theme-toggle-sun { display: none; }
[data-theme="dark"] .theme-toggle-moon { display: none; }
html:not([data-theme="light"]) .theme-toggle-moon { display: none; }

/* ── Login page ── */
.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
}
.login-card { width: 100%; max-width: 380px; padding: var(--space-8); }
.login-logo {
  font-family: 'Geist Mono', monospace;
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  color: var(--text-accent);
  text-align: center;
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
}
.login-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field input {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-fast);
}
.field input:focus { border-color: var(--accent-500); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.btn-primary { background: var(--accent-500); color: white; width: 100%; }
.btn-primary:hover { background: var(--accent-600); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-card-hover); }
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.alert-error { background: var(--status-error-muted); color: var(--status-error); border: 1px solid rgba(239, 68, 68, 0.3); }
.alert-success { background: var(--status-success-muted); color: var(--status-success); border: 1px solid rgba(34, 197, 94, 0.3); }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.page-subtitle { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ── Docs (Mintlify / quo.com style) ── */
.docs-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 767px) {
  .docs-shell { grid-template-columns: 1fr; }
}
.docs-nav {
  position: sticky;
  top: var(--space-6);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.docs-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
}
.docs-nav a:hover { color: var(--text-primary); background: var(--bg-elevated); }
.docs-nav a.active {
  color: var(--text-accent);
  background: var(--accent-surface);
  border-left-color: var(--accent-500);
}
.docs-content {
  min-width: 0;
  max-width: 860px;
}
.docs-content h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.docs-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.docs-content h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.docs-content p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: var(--space-3) 0;
}
.docs-content ul, .docs-content ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-6);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.docs-content li { margin: var(--space-1) 0; }
.docs-content a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-color: rgba(52, 211, 153, 0.4);
  text-underline-offset: 3px;
}
.docs-content a:hover { text-decoration-color: var(--text-accent); }
.docs-content pre {
  background: #0a1219;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: var(--space-4) 0;
}
.docs-content code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.9em;
  color: var(--text-primary);
}
.docs-content pre code {
  background: transparent;
  padding: 0;
  color: var(--text-primary);
}
.docs-content blockquote {
  border-left: 3px solid var(--accent-500);
  background: var(--accent-surface);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.docs-content table {
  width: 100%;
  margin: var(--space-4) 0;
  border-collapse: collapse;
}
.docs-content table th,
.docs-content table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.docs-content table th {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.docs-content hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}

/* ── Mintlify-style accents ── */
.method-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: 'Geist Mono', monospace;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
}
.method-get { background: rgba(34, 197, 94, 0.15); color: var(--status-success); }
.method-post { background: rgba(59, 130, 246, 0.15); color: var(--status-info); }
.method-put { background: rgba(245, 158, 11, 0.15); color: var(--status-warning); }
.method-delete { background: rgba(239, 68, 68, 0.15); color: var(--status-error); }

.endpoint-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: 'Geist Mono', monospace;
  font-size: var(--text-sm);
  margin: var(--space-4) 0;
}
.endpoint-path { color: var(--text-primary); }

.param-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-3) 0;
  background: var(--bg-card);
}
.param-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.param-name {
  font-family: 'Geist Mono', monospace;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.param-type {
  font-family: 'Geist Mono', monospace;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.param-required {
  color: var(--status-error);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.param-desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; }

.docs-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Override casanova main-content fixed margins; we set per-page */
.main-content { margin-left: var(--sidebar-width); padding: var(--space-6); width: 100%; max-width: calc(100vw - var(--sidebar-width)); }
@media (max-width: 767px) {
  .main-content { margin-left: 0; max-width: 100vw; }
}

/* ── Shipping app supplements ────────────────────────────── */
.field select,
.field textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-fast);
  font-family: inherit;
}
.field select:focus, .field textarea:focus { border-color: var(--accent-500); }
.field textarea { min-height: 80px; resize: vertical; }

.btn-danger { background: var(--status-error); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn-inline { width: auto; }

.alert-info { background: var(--status-info-muted); color: var(--status-info); border: 1px solid rgba(59, 130, 246, 0.3); }
.alert-warning { background: var(--status-warning-muted); color: var(--status-warning); border: 1px solid rgba(245, 158, 11, 0.3); }

/* Pill / tag */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.pill-accent { color: var(--text-accent); background: var(--accent-surface); }
.pill-muted { color: var(--text-muted); }

/* Inline form rows (used in identifier conditions editor) */
.row-form { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.row-form .field { margin-bottom: 0; }

/* Data table sized for many rows / many cols */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--text-sm);
}
.data-table thead th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.data-table tbody tr:hover td { background: var(--bg-card-hover); }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .col-muted { color: var(--text-muted); font-size: var(--text-xs); }

/* JSON / raw row pretty-printer */
.json-block {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow: auto;
}

/* (most spacing/flex utilities defined earlier in this file) */