/* ==========================================================================
   PTS DESIGN SYSTEM — v2.0 (Complete)
   Extended for a time-tracking / project management SaaS.
   Additions over v1 are marked with "// NEW" in section comments.
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVE TOKENS (Do not use directly in components)
   ========================================================================== */
:root {
  /* Brand */
  --orange-50: #fff0e5;
  --orange-100: #ffe4cc;
  --orange-400: #fb923c;
  --orange-500: #ff6b00;
  --orange-600: #e65a00;
  --orange-700: #cc5500;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;

  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;

  --accent-green: #10b981;
  --accent-red: #ef4444;

  /* Neutrals */
  --gray-0: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Functional */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-300: #fca5a5;
  --red-500: #ef4444;
  --red-600: #dc2626;

  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-300: #6ee7b7;
  --green-500: #10b981;
  --green-600: #059669;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-300: #fcd34d;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --purple-50: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-300: #c4b5fd;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;

  /* NEW — extra hues purely for multi-series charts / per-project or per-user
     color coding in reports. Kept out of the functional palette above so
     "success/danger/etc." semantics never collide with "this is Project #7". */
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --lime-500: #84cc16;
  --lime-600: #65a30d;

  /* Typography primitives */
  --font-main: "Inter", system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* NEW — for durations/timestamps in grids */

  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --text-5xl: 32px;
  --text-6xl: 36px;
  --text-7xl: 40px;
  --text-8xl: 44px;
  --text-9xl: 48px;

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

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 2;

  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;

  /* Spacing primitives */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;

  /* Radius primitives */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* Motion primitives */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.4s;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Z-Index */
  --z-base: 0;
  --z-sticky: 1000;
  --z-sidebar: 1200;
  --z-overlay: 2000;
  --z-floating: 2400;
  --z-modal: 3000;
  --z-toast: 4000;

  /* Layout tokens */
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 64px; /* NEW — icon-rail collapsed state */
  --header-height: 64px;
  --page-padding: var(--space-8);
  --section-gap: var(--space-10);
  --card-gap: var(--space-6);
  --grid-gap: var(--space-6);
  --content-max-width: 1400px;

  /* Component dimension tokens */
  --control-height-sm: 28px;
  --control-height: 36px;
  --control-height-lg: 44px;

  --checkbox-size: 16px;
  --icon-button-size: 32px;
  --table-cell-padding-y: var(--space-3);
  --table-cell-padding-x: var(--space-4);
  --form-control-icon-offset: var(--space-3);
  --avatar-xs: 24px;
  --avatar-sm: 28px;
  --avatar-md: 32px;
  --avatar-lg: 40px;
  --avatar-xl: 48px;

  /* NEW — Timesheet / grid primitives (PTS-specific) */
  --timesheet-row-height: 40px;
  --timesheet-header-height: 48px;
  --timesheet-cell-min-width: 44px;
  --timesheet-cell-gap: 1px;
  --timesheet-label-col-width: 220px;
  --spinner-size-sm: 14px;
  --spinner-size-md: 18px;
}

/* ==========================================================================
   2. SEMANTIC TOKENS (LIGHT THEME - Default)
   ========================================================================== */
:root {
  /* Surfaces */
  --bg-desktop: var(--gray-50);
  --bg-app: var(--gray-0);
  --bg-sidebar: var(--gray-0);
  --bg-surface: var(--gray-0);
  --bg-subtle: var(--gray-50);
  --bg-muted: var(--gray-100);
  --skeleton-base: var(--gray-100);
  --skeleton-highlight: var(--gray-50);
  --bg-inverse: var(--gray-800);
  --bg-selected: var(--orange-50);
  --bg-selected-hover: var(--orange-100);

  /* Background Functional */
  --bg-success: var(--green-50);
  --bg-danger: var(--red-50);
  --bg-warning: var(--amber-50);
  --bg-info: var(--blue-50);
  --bg-progress: var(--purple-50);

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-inverse-strong: var(--gray-0);
  --text-brand: var(--orange-600);
  --text-success: var(--green-600);
  --text-danger: var(--red-600);
  --text-warning: var(--amber-600);
  --text-info: var(--blue-600);
  --text-progress: var(--purple-600);

  /* Borders */
  --border-default: var(--gray-200);
  --border-subtle: var(--gray-100);
  --border-strong: var(--gray-300);
  --border-selected: var(--orange-500);
  --border-success: var(--green-300);
  --border-danger: var(--red-300);
  --border-warning: var(--amber-300);
  --border-info: var(--blue-300);
  --border-color: #e5e7eb;

  /* Interactive */
  --interactive-primary: var(--orange-500);
  --interactive-primary-hover: var(--orange-600);
  --interactive-primary-active: var(
    --orange-700
  ); /* FIXED — token, not bare hex */
  --interactive-primary-disabled: var(--gray-300);

  /* Interactive Backgrounds */
  --interactive-hover: var(--gray-50);
  --interactive-active: var(--gray-100);
  --interactive-disabled: var(--gray-100);

  /* Interactive Texts */
  --interactive-text-disabled: var(--gray-400);

  /* Chart semantic (status charts) */
  --chart-primary: var(--orange-500);
  --chart-success: var(--green-500);
  --chart-warning: var(--amber-500);
  --chart-danger: var(--red-500);
  --chart-info: var(--blue-500);
  --chart-neutral: var(--gray-400);
  --chart-grid: var(--gray-200);
  --chart-label: var(--gray-500);
  --chart-tooltip-bg: var(--gray-900);
  --chart-tooltip-text: var(--gray-0);

  /* NEW — Chart categorical series (per-project / per-user coding in reports).
     10 distinct, colorblind-considerate hues, ordered for use as chart-series-1..10. */
  --chart-series-1: var(--orange-500);
  --chart-series-2: var(--blue-500);
  --chart-series-3: var(--teal-500);
  --chart-series-4: var(--purple-500);
  --chart-series-5: var(--pink-500);
  --chart-series-6: var(--amber-500);
  --chart-series-7: var(--indigo-500);
  --chart-series-8: var(--green-500);
  --chart-series-9: var(--lime-500);
  --chart-series-10: var(--gray-500);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-window: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 4px 14px 0 rgba(255, 107, 0, 0.39);

  /* NEW — Timesheet semantics (light) */
  --timesheet-grid-line: var(--gray-100);
  --timesheet-header-bg: var(--gray-0);
  --timesheet-today-bg: var(--orange-50);
  --timesheet-today-border: var(--orange-500);
  --timesheet-weekend-bg: var(--gray-50);
  --timesheet-cell-hover: var(--gray-50);
  --timesheet-billable-bg: var(--blue-50);
  --timesheet-billable-text: var(--blue-600);
  --timesheet-nonbillable-bg: var(--gray-100);
  --timesheet-nonbillable-text: var(--gray-600);
  --timesheet-overtime-bg: var(--amber-50);
  --timesheet-overtime-text: var(--amber-600);
  --timesheet-overtime-border: var(--amber-300);
  --timesheet-empty-bg: transparent;
  --timesheet-total-bg: var(--gray-50);
  --timesheet-total-text: var(--gray-900);
  --timesheet-locked-bg: var(--gray-50);
  --timesheet-locked-text: var(--gray-400);
  --transition-speed: 0.25s;

  /* Shell semantic mappings for sub-modules & widgets */
  --shell-bg-surface: var(--bg-surface);
  --shell-bg-elevated: #ffffff;
  --shell-bg-hover: var(--gray-50);
  --shell-border: var(--border-default);
  --shell-text: var(--text-primary);
  --shell-text-secondary: var(--text-secondary);
  --shell-text-muted: var(--text-tertiary);
  --shell-accent: var(--interactive-primary);
  --shell-accent-hover: var(--interactive-primary-hover);
  --shell-accent-muted: var(--bg-selected);
  --shell-shadow-md: var(--shadow-lg);
  --shell-danger: var(--text-danger);
  --shell-danger-muted: var(--bg-danger);
}

/* ==========================================================================
   3. SEMANTIC TOKENS (DARK THEME)
   ========================================================================== */
[data-bs-theme="dark"] {
  /* Surfaces */
  --bg-desktop: #0a0a0a;
  --bg-app: #121212;
  --bg-sidebar: #171717;
  --bg-surface: #1e1e1e;
  --bg-subtle: #262626;
  --bg-muted: #333333;
  --skeleton-base: #262626;
  --skeleton-highlight: #333333;
  --bg-inverse: var(--gray-50);
  --bg-selected: rgba(255, 107, 0, 0.15);
  --bg-selected-hover: rgba(255, 107, 0, 0.25);

  /* Background Functional */
  --bg-success: rgba(16, 185, 129, 0.15);
  --bg-danger: rgba(239, 68, 68, 0.15);
  --bg-warning: rgba(245, 158, 11, 0.15);
  --bg-info: rgba(59, 130, 246, 0.15);
  --bg-progress: rgba(139, 92, 246, 0.15);

  /* Text */
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--gray-900);
  --text-inverse-strong: var(--gray-900);
  --text-brand: var(--orange-500);
  --text-success: var(--green-500);
  --text-danger: var(--red-500);
  --text-warning: var(--amber-500);
  --text-info: var(--blue-500);
  --text-progress: var(--purple-500);

  /* Borders */
  --border-default: #333333;
  --border-subtle: #262626;
  --border-strong: #404040;
  --border-selected: var(--orange-500);
  --border-success: var(--green-500);
  --border-danger: var(--red-500);
  --border-warning: var(--amber-500);
  --border-info: var(--blue-500);
  --border-color: #333333;

  /* Interactive */
  --interactive-primary: var(--orange-500);
  --interactive-primary-hover: var(--orange-400);
  --interactive-primary-active: var(--orange-600);
  --interactive-primary-disabled: #404040;

  /* Interactive Backgrounds */
  --interactive-hover: #262626;
  --interactive-active: #333333;
  --interactive-disabled: #262626;

  /* Interactive Texts */
  --interactive-text-disabled: var(--gray-500);

  /* Chart semantic */
  --chart-grid: #333333;
  --chart-label: var(--gray-400);
  --chart-tooltip-bg: var(--gray-100);
  --chart-tooltip-text: var(--gray-900);

  /* NEW — Chart categorical series re-tuned for dark bg (brighter 400-ish values
     read better than 500 on near-black; reusing 500s here since our primitive
     scale stops at 500/600, so we brighten via hover-hue where it exists) */
  --chart-series-1: var(--orange-500);
  --chart-series-2: #60a5fa;
  --chart-series-3: #2dd4bf;
  --chart-series-4: #a78bfa;
  --chart-series-5: #f472b6;
  --chart-series-6: var(--amber-500);
  --chart-series-7: #818cf8;
  --chart-series-8: #34d399;
  --chart-series-9: #a3e635;
  --chart-series-10: var(--gray-400);

  /* Shadows (Dark mode uses softer shadows to avoid heavy black spots) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-window: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 4px 14px 0 rgba(255, 107, 0, 0.2);

  /* NEW — Timesheet semantics (dark) */
  --timesheet-grid-line: #262626;
  --timesheet-header-bg: #171717;
  --timesheet-today-bg: rgba(255, 107, 0, 0.12);
  --timesheet-today-border: var(--orange-500);
  --timesheet-weekend-bg: #181818;
  --timesheet-cell-hover: #262626;
  --timesheet-billable-bg: rgba(59, 130, 246, 0.15);
  --timesheet-billable-text: #60a5fa;
  --timesheet-nonbillable-bg: #262626;
  --timesheet-nonbillable-text: var(--gray-300);
  --timesheet-overtime-bg: rgba(245, 158, 11, 0.15);
  --timesheet-overtime-text: var(--amber-500);
  --timesheet-overtime-border: rgba(245, 158, 11, 0.4);
  --timesheet-empty-bg: transparent;
  --timesheet-total-bg: #1e1e1e;
  --timesheet-total-text: var(--gray-50);
  --timesheet-locked-bg: #181818;
  --timesheet-locked-text: var(--gray-500);

  /* Shell semantic mappings (dark) */
  --shell-bg-surface: var(--bg-surface);
  --shell-bg-elevated: #1e1e1e;
  --shell-bg-hover: #262626;
  --shell-border: var(--border-default);
  --shell-text: var(--text-primary);
  --shell-text-secondary: var(--text-secondary);
  --shell-text-muted: var(--text-tertiary);
  --shell-accent: var(--interactive-primary);
  --shell-accent-hover: var(--interactive-primary-hover);
  --shell-accent-muted: var(--bg-selected);
  --shell-shadow-md: var(--shadow-lg);
  --shell-danger: var(--text-danger);
  --shell-danger-muted: var(--bg-danger);
}

/* ==========================================================================
   3. ACCENT THEMES (Overrides semantic tokens based on selected brand color)
   ========================================================================== */

/* BLUE ACCENT */
[data-accent="blue"] {
  --bg-selected: var(--blue-50);
  --bg-selected-hover: var(--blue-100);
  --text-brand: var(--blue-600);
  --border-selected: var(--blue-500);
  --interactive-primary: var(--blue-500);
  --interactive-primary-hover: var(--blue-600);
  --interactive-primary-active: var(--blue-700);
  --shadow-accent: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
  --chart-series-1: var(--blue-500);
}
[data-accent="blue"][data-bs-theme="dark"] {
  --bg-selected: rgba(59, 130, 246, 0.12);
  --bg-selected-hover: rgba(59, 130, 246, 0.2);
  --text-brand: var(--blue-500);
  --border-selected: var(--blue-500);
  --interactive-primary: var(--blue-500);
  --interactive-primary-hover: var(--blue-400);
  --interactive-primary-active: var(--blue-600);
  --shadow-accent: 0 4px 14px 0 rgba(59, 130, 246, 0.2);
  --chart-series-1: var(--blue-500);
}

/* PURPLE ACCENT */
[data-accent="purple"] {
  --bg-selected: var(--purple-50);
  --bg-selected-hover: var(--purple-100);
  --text-brand: var(--purple-600);
  --border-selected: var(--purple-500);
  --interactive-primary: var(--purple-500);
  --interactive-primary-hover: var(--purple-600);
  --interactive-primary-active: var(--purple-700);
  --shadow-accent: 0 4px 14px 0 rgba(139, 92, 246, 0.39);
  --chart-series-1: var(--purple-500);
}
[data-accent="purple"][data-bs-theme="dark"] {
  --bg-selected: rgba(139, 92, 246, 0.12);
  --bg-selected-hover: rgba(139, 92, 246, 0.2);
  --text-brand: var(--purple-500);
  --border-selected: var(--purple-500);
  --interactive-primary: var(--purple-500);
  --interactive-primary-hover: var(--purple-400);
  --interactive-primary-active: var(--purple-600);
  --shadow-accent: 0 4px 14px 0 rgba(139, 92, 246, 0.2);
  --chart-series-1: var(--purple-500);
}

/* GREEN (TEAL) ACCENT */
[data-accent="green"] {
  --bg-selected: var(--teal-50);
  --bg-selected-hover: var(--teal-100);
  --text-brand: var(--teal-600);
  --border-selected: var(--teal-500);
  --interactive-primary: var(--teal-500);
  --interactive-primary-hover: var(--teal-600);
  --interactive-primary-active: var(--teal-700);
  --shadow-accent: 0 4px 14px 0 rgba(20, 184, 166, 0.39);
  --chart-series-1: var(--teal-500);
}
[data-accent="green"][data-bs-theme="dark"] {
  --bg-selected: rgba(20, 184, 166, 0.12);
  --bg-selected-hover: rgba(20, 184, 166, 0.2);
  --text-brand: var(--teal-500);
  --border-selected: var(--teal-500);
  --interactive-primary: var(--teal-500);
  --interactive-primary-hover: var(--teal-400);
  --interactive-primary-active: var(--teal-600);
  --shadow-accent: 0 4px 14px 0 rgba(20, 184, 166, 0.2);
  --chart-series-1: var(--teal-500);
}

/* ==========================================================================
   4. BASE & ACCESSIBILITY
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-desktop);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility Focus States */
:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: var(--space-4);
  height: var(--space-4);
}
::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
p {
  margin: 0;
}
a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--duration-fast);
}
a:hover {
  color: var(--interactive-primary-hover);
}

/* NEW — tabular/mono utility for durations, timestamps, hour totals */
.font-mono,
.tabular-nums {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.text-color-primary {
  color: var(--text-primary);
}
.text-color-secondary {
  color: var(--text-secondary);
}
.text-color-tertiary {
  color: var(--text-tertiary);
}
.text-tone-success {
  color: var(--text-success);
}
.text-tone-warning {
  color: var(--text-warning);
}
.text-tone-danger {
  color: var(--text-danger);
}
.text-tone-info {
  color: var(--text-info);
}

/* ==========================================================================
   5. COMPONENT SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-height);
  padding: 0 var(--space-6);
  font-family: var(--font-main);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.btn:disabled,
.btn[disabled],
.btn.disabled {
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Primary */
.btn-primary {
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    100deg,
    var(--interactive-primary-hover),
    var(--interactive-primary)
  );
  color: #fff;
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--interactive-primary-hover);
  box-shadow: var(--shadow-accent);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--interactive-primary-active);
}

.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary.disabled {
  background: var(--bg-muted, #e5e7eb) !important;
  background-image: none !important;
  color: var(--text-tertiary, #9ca3af) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
}

.btn-primary:disabled .anp-kbd-inv,
.btn-primary[disabled] .anp-kbd-inv {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-tertiary, #9ca3af) !important;
  border-color: transparent !important;
}

[data-bs-theme="dark"] .btn-primary:disabled,
[data-bs-theme="dark"] .btn-primary[disabled],
[data-bs-theme="dark"] .btn-primary.disabled {
  background: #333333 !important;
  background-image: none !important;
  color: #737373 !important;
}

[data-bs-theme="dark"] .btn-primary:disabled .anp-kbd-inv,
[data-bs-theme="dark"] .btn-primary[disabled] .anp-kbd-inv {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #737373 !important;
}

/* Secondary */
.btn-secondary {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--interactive-hover);
  border-color: var(--border-strong);
}
.btn-secondary:active:not(:disabled) {
  background-color: var(--interactive-active);
}
.btn-secondary:disabled,
.btn-secondary[disabled] {
  background-color: var(--bg-subtle, #f3f4f6) !important;
  color: var(--text-tertiary, #9ca3af) !important;
  border-color: var(--border-subtle, #e5e7eb) !important;
  opacity: 0.6 !important;
}

/* Outline */
.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-outline:hover:not(:disabled) {
  background-color: var(--interactive-hover);
  border-color: var(--border-strong);
}

/* Ghost */
.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--interactive-hover);
  color: var(--text-primary);
}
.btn-ghost:disabled,
.btn-ghost[disabled] {
  background-color: transparent !important;
  color: var(--text-tertiary, #9ca3af) !important;
  opacity: 0.5 !important;
}

/* Danger */
.btn-danger {
  background-color: var(--bg-danger);
  color: var(--text-danger);
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--red-500);
  color: var(--text-inverse-strong);
}

/* Inverse */
.btn-inverse {
  background-color: var(--text-primary);
  color: var(--bg-surface);
}
.btn-inverse:hover:not(:disabled) {
  opacity: 0.9;
}

/* Sizes */
.btn-sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}
.btn-lg {
  height: var(--control-height-lg);
  padding: 0 var(--space-8);
  font-size: var(--text-base);
}
.btn-block {
  width: 100%;
}

/* NEW — Loading state. Usage: add .is-loading to any .btn and put
   <span class="spinner"></span> as its only visible child, or pair
   .btn-primary.is-loading with the .spinner element below. Text is hidden
   via opacity so the button doesn't reflow width while loading. */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: var(--spinner-size-md);
  height: var(--spinner-size-md);
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--text-inverse-strong);
  animation: spin var(--duration-slower) linear infinite;
}
.btn-secondary.is-loading::after,
.btn-outline.is-loading::after,
.btn-ghost.is-loading::after {
  color: var(--text-primary);
}
.btn-danger.is-loading::after {
  color: var(--text-danger);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Standalone spinner, for inline use outside buttons (e.g. table row saving) */
.spinner {
  display: inline-block;
  width: var(--spinner-size-sm);
  height: var(--spinner-size-sm);
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  border-top-color: var(--interactive-primary);
  animation: spin var(--duration-slower) linear infinite;
  flex-shrink: 0;
}
.spinner-lg {
  width: var(--spinner-size-md);
  height: var(--spinner-size-md);
}

/* Icon Buttons */
.icon-btn,
.icon-btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  padding: 0;
}
.icon-btn:hover,
.icon-btn-square:hover {
  background-color: var(--interactive-hover);
  color: var(--text-primary);
}
.icon-btn-square {
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Badges & Status Pills
   -------------------------------------------------------------------------- */
.badge,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.badge {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
}
.badge-primary {
  background-color: var(--bg-selected);
  color: var(--text-brand);
}
.badge-success {
  background-color: var(--bg-success);
  color: var(--text-success);
}
.badge-danger {
  background-color: var(--bg-danger);
  color: var(--text-danger);
}
.badge-warning {
  background-color: var(--bg-warning);
  color: var(--text-warning);
}
.badge-info {
  background-color: var(--bg-info);
  color: var(--text-info);
}

/* Neutral category badge, promoted from the approved Projects List chip. */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--text-secondary);
  background-color: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}

.pill {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background-color: var(--bg-muted);
  color: var(--text-secondary);
}
.pill-inverse {
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
  border-color: transparent;
}
.pill-outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
  border-width: 2px;
  font-weight: var(--weight-bold);
}
.pill-hot,
.pill-cancel {
  background-color: var(--bg-danger);
  border-color: var(--border-danger);
  color: var(--text-danger);
}
.pill-open,
.pill-new {
  background-color: var(--bg-info);
  border-color: var(--border-info);
  color: var(--text-info);
}
.pill-qualified,
.pill-completed,
.pill-active,
.pill-approved,
.pill-success {
  background-color: var(--bg-success);
  border-color: var(--border-success);
  color: var(--text-success);
}
.pill-inprogress,
.pill-pending,
.pill-incomplete,
.pill-warning {
  background-color: var(--bg-warning);
  border-color: var(--border-warning);
  color: var(--text-warning);
}
.pill-draft,
.pill-inactive,
.pill-neutral {
  background-color: var(--bg-subtle);
  border-color: var(--border-default);
  color: var(--text-secondary);
}
.pill-danger {
  background-color: var(--bg-danger);
  border-color: var(--border-danger);
  color: var(--text-danger);
}
.pill-info {
  background-color: var(--bg-info);
  border-color: var(--border-info);
  color: var(--text-info);
}
.pill-primary {
  background-color: var(--bg-selected);
  border-color: var(--border-selected);
  color: var(--text-brand);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background-color: var(--bg-surface);
}
.alert-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}
.alert-content {
  flex: 1;
}
.alert-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.alert-message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
}
.alert-dismiss:hover {
  color: var(--text-primary);
}

.alert-primary {
  background-color: var(--bg-selected);
  border-color: var(--border-selected);
}
.alert-primary .alert-icon,
.alert-primary .alert-title {
  color: var(--text-brand);
}
.alert-success {
  background-color: var(--bg-success);
  border-color: var(--border-success);
}
.alert-success .alert-icon,
.alert-success .alert-title {
  color: var(--text-success);
}
.alert-danger {
  background-color: var(--bg-danger);
  border-color: var(--border-danger);
}
.alert-danger .alert-icon,
.alert-danger .alert-title {
  color: var(--text-danger);
}
.alert-warning {
  background-color: var(--bg-warning);
  border-color: var(--border-warning);
}
.alert-warning .alert-icon,
.alert-warning .alert-title {
  color: var(--text-warning);
}
.alert-info {
  background-color: var(--bg-info);
  border-color: var(--border-info);
}
.alert-info .alert-icon,
.alert-info .alert-title {
  color: var(--text-info);
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */
.progress {
  width: 100%;
  height: var(--space-3);
  background-color: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background-color: var(--interactive-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}
.progress-success .progress-bar {
  background-color: var(--text-success);
}
.progress-danger .progress-bar {
  background-color: var(--text-danger);
}
.progress-warning .progress-bar {
  background-color: var(--text-warning);
}
.progress-info .progress-bar {
  background-color: var(--text-info);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.form-label-required::after {
  content: "*";
  color: var(--text-danger);
  margin-left: var(--space-1);
}
.form-help {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.form-label .form-help {
  margin-left: var(--space-1);
}

.form-control,
.select,
.textarea {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-4);
  font-family: var(--font-main);
  font-size: var(--text-md);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
  outline: none;
}
.textarea {
  height: auto;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-control:focus,
.select:focus,
.textarea:focus {
  border-color: var(--interactive-primary);
  box-shadow: 0 0 0 3px var(--bg-selected);
}
.form-control:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--bg-subtle);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* NEW — form-control sizes, mirroring .btn-sm / .btn-lg so the two control families
   stay visually aligned when placed side by side (e.g. a filter bar). */
.form-control-sm,
.select-sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}
.form-control-inline {
  width: calc(var(--control-height-lg) + var(--space-9));
  flex: 0 0 auto;
}
.select-sm {
  padding-right: var(--space-8);
  background-size: 14px;
}
.form-control-lg,
.select-lg {
  height: var(--control-height-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-base);
}
.select-lg {
  padding-right: var(--space-11);
}

/* Validation */
.form-control-invalid {
  border-color: var(--text-danger);
}
.form-control-invalid:focus {
  box-shadow: 0 0 0 3px var(--bg-danger);
}
.form-control-valid {
  border-color: var(--text-success);
}
.form-control-valid:focus {
  box-shadow: 0 0 0 3px var(--bg-success);
}
.form-feedback-error {
  color: var(--text-danger);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Checkbox & Radio */
.checkbox,
.radio {
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--border-strong);
  background-color: var(--bg-surface);
  margin: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: all var(--duration-fast) var(--ease-spring);
}
.checkbox {
  border-radius: var(--radius-sm);
}
.radio {
  border-radius: var(--radius-full);
}

.checkbox::before,
.radio::before {
  content: "";
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.checkbox::before {
  width: 10px;
  height: 10px;
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: var(--text-inverse-strong);
}
.radio::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-inverse-strong);
}

.checkbox:checked,
.radio:checked {
  background-color: var(--interactive-primary);
  border-color: var(--interactive-primary);
}
.checkbox:checked::before,
.radio:checked::before {
  transform: scale(1);
}

/* Switch */
.switch {
  appearance: none;
  width: 36px;
  height: 20px;
  background-color: var(--border-strong);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background-color var(--duration-fast);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--bg-surface);
  border-radius: var(--radius-full);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.switch:checked {
  background-color: var(--text-success);
}
.switch:checked::after {
  transform: translateX(16px);
}

/* form-control Group / Search */
.form-control-group {
  position: relative;
  display: flex;
  align-items: center;
}
.form-control-group-icon {
  position: absolute;
  left: var(--space-4);
  color: var(--text-tertiary);
}
.form-control-group .form-control {
  padding-left: var(--space-10);
}
.form-control-group-action {
  position: absolute;
  right: var(--space-2);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.card-header {
  padding: var(--space-6) var(--space-8);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
}
.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0;
  color: var(--text-primary);
}
.card-body {
  padding: var(--space-8);
  flex: 1;
}
.card-footer {
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--border-default);
  background-color: var(--bg-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.card-hover:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* KPI Card Section (Horizontal X-Axis Scrollable, Contiguous Connected Borders) */
.kpi-section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-top: 1px solid var(--border-color, var(--border-default));
  border-bottom: 1px solid var(--border-color, var(--border-default));
  margin-bottom: var(--space-6);
  flex-shrink: 0;
  width: 100%;
  position: relative;
  /* Right side subtle fade mask effect */
  mask-image: linear-gradient(to right, #000 0%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 97%, transparent 100%);
}

.kpi-section::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.kpi-section .kpi-card {
  flex: 1 0 220px;
  min-width: 220px;
  max-width: none;
  background-color: var(--bg-surface);
  border: none;
  border-right: 1px solid var(--border-color, var(--border-default));
  border-radius: 0;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--transition-speed);
}

.kpi-section .kpi-card:first-child {
  border-left: 1px solid var(--border-color, var(--border-default));
}

.kpi-section .kpi-card:hover {
  background-color: var(--bg-subtle);
}

[data-bs-theme="dark"] .kpi-section .kpi-card {
  background-color: var(--bg-surface);
  border-right-color: var(--border-default);
}

[data-bs-theme="dark"] .kpi-section .kpi-card:first-child {
  border-left-color: var(--border-default);
}

[data-bs-theme="dark"] .kpi-section .kpi-card:hover {
  background-color: var(--interactive-hover);
}

.kpi-section-compact .kpi-card {
  flex: 1 0 180px;
  min-width: 180px;
  padding: var(--space-4) var(--space-5);
}
.kpi-info h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  transition: color var(--transition-speed);
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.kpi-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.kpi-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.kpi-trend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.kpi-icon {
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-xl);
  background-color: var(--bg-selected);
  color: var(--interactive-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  flex-shrink: 0;
}
.trend-up {
  color: var(--accent-green);
}
.trend-down {
  color: var(--accent-red);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-container {
  width: 100%;
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.table th,
.table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--border-subtle);
}
.table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background-color: var(--bg-surface);
}
.table td {
  font-size: var(--text-md);
  color: var(--text-primary);
  vertical-align: middle;
}
.table-hover tbody tr:hover td {
  background-color: var(--bg-subtle);
}
.row-selected td {
  background-color: var(--bg-selected);
}
.table-sticky th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 2px solid var(--border-default);
}

/* --------------------------------------------------------------------------
   Navigation & Tabs
   -------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-shrink: 0;
  transition: width var(--duration-slow) var(--ease-default); /* NEW — smooth collapse */
}

/* NEW — Collapsed sidebar (icon rail). Toggle by adding .sidebar-collapsed
   to the .sidebar element (JS-driven; no pure-CSS trigger, same pattern as
   theme switching via [data-bs-theme]). Labels/titles fade out, icons stay
   centered, nav-item.active loses its right border in favor of a filled bg
   since the border reads as a stray line at 64px. */
.sidebar-collapsed {
  width: var(--sidebar-width-collapsed);
}
.sidebar-collapsed .nav-title,
.sidebar-collapsed .nav-item span,
.sidebar-collapsed .sidebar-label {
  display: none;
}
.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: var(--space-3);
  border-right: none;
}
.sidebar-collapsed .nav-item.active {
  background-color: var(--bg-selected);
  border-right: none;
  border-radius: var(--radius-md);
  margin: 0 var(--space-2);
}

.nav-section {
  padding: var(--space-6) 0;
}
.nav-title {
  padding: 0 var(--space-8);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  text-decoration: none;
}
.nav-item i {
  font-size: var(--text-lg);
  color: var(--text-tertiary);
}
.nav-item:hover {
  background-color: var(--interactive-hover);
  color: var(--text-primary);
}
.nav-item:hover i {
  color: var(--text-secondary);
}
.nav-item.active {
  /* background-color: var(--bg-selected); */
  color: var(--text-brand);
  font-weight: var(--weight-medium);
  border-left: 3px solid var(--interactive-primary);
}
.nav-item.active i {
  color: var(--text-brand);
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-default);
  gap: var(--space-8);
}
.tab {
  appearance: none;
  background-color: transparent;
  border: none;
  font-family: var(--font-main);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast);
}
.tab:hover {
  color: var(--text-primary);
}
.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--interactive-primary);
}

/* --------------------------------------------------------------------------
   Dropdowns & Menus
   -------------------------------------------------------------------------- */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-2);
  min-width: 200px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) 0;
  z-index: var(--z-floating);
}
.dropdown-menu-end {
  right: var(--space-0);
  left: auto;
}
.dropdown-menu-open {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  text-decoration: none;
}
.dropdown-item i {
  color: var(--text-tertiary);
}
.dropdown-item:hover {
  background-color: var(--interactive-hover);
}
.dropdown-divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: var(--space-2) 0;
}
.dropdown-danger {
  color: var(--text-danger);
}
.dropdown-danger i {
  color: var(--text-danger);
}
.dropdown-danger:hover {
  background-color: var(--bg-danger);
}

/* --------------------------------------------------------------------------
   Modals & Overlays
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.modal-wrapper {
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-window);
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  z-index: var(--z-modal);
}
.modal-header {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.modal-body {
  padding: var(--space-8);
  overflow-y: auto;
}
.modal-footer {
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  background-color: var(--bg-subtle);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.toast {
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 300px;
}
.toast-icon {
  font-size: var(--text-xl);
}
.toast-content {
  flex: 1;
}
.toast-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.toast-message {
  font-size: var(--text-xs);
  color: var(--gray-400);
}
.toast-close {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Avatars
   -------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-muted);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  text-transform: uppercase;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}
.avatar-xs {
  width: var(--avatar-xs);
  height: var(--avatar-xs);
  font-size: var(--text-xs);
}
.avatar-sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--text-sm);
}
.avatar-md {
  width: var(--avatar-md);
  height: var(--avatar-md);
  font-size: var(--text-md);
}
.avatar-lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--text-lg);
}
.avatar-xl {
  width: var(--avatar-xl);
  height: var(--avatar-xl);
  font-size: var(--text-xl);
}

.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .avatar {
  border: 2px solid var(--bg-surface);
  margin-left: -8px;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   Tooltips
   -------------------------------------------------------------------------- */
.tooltip {
  position: absolute;
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: var(--z-floating);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.page-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  border: 1px solid transparent;
}
.page-item:hover {
  background-color: var(--interactive-hover);
  color: var(--text-primary);
}
.page-item.active {
  background-color: var(--bg-selected);
  color: var(--text-brand);
  font-weight: var(--weight-medium);
  border-color: var(--border-selected);
}
.page-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Empty / Loading / Skeleton States
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.empty-state-icon {
  font-size: 48px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}
.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 400px;
  margin-bottom: var(--space-6);
}

.skeleton {
  background-color: var(--skeleton-base);
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.skeleton-text {
  height: 16px;
  margin-bottom: var(--space-2);
  width: 100%;
}
.skeleton-text:last-child {
  width: 80%;
}
.skeleton-avatar {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
}
.skeleton-btn {
  height: var(--control-height);
  width: 100px;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   NEW — Timesheet Grid (PTS-specific)
   Structure assumed: a wrapper .timesheet-grid containing one .timesheet-header
   row and N .timesheet-row rows, each built from .timesheet-label-cell +
   repeated .timesheet-cell. Built as a CSS grid so column count is data-driven
   via an inline --timesheet-cols custom property on .timesheet-grid.
   -------------------------------------------------------------------------- */
.timesheet-grid {
  display: grid;
  grid-template-columns: var(--timesheet-label-col-width) repeat(
      var(--timesheet-cols, 7),
      minmax(var(--timesheet-cell-min-width), 1fr)
    );
  background-color: var(--timesheet-grid-line);
  gap: var(--timesheet-cell-gap);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.timesheet-header-cell,
.timesheet-label-cell,
.timesheet-cell {
  background-color: var(--bg-surface);
  display: flex;
  align-items: center;
  min-height: var(--timesheet-row-height);
}

.timesheet-header-cell {
  background-color: var(--timesheet-header-bg);
  min-height: var(--timesheet-header-height);
  padding: 0 var(--space-3);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.timesheet-header-cell .day-number {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-transform: none;
  font-family: var(--font-mono);
}

.timesheet-label-cell {
  padding: 0 var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  position: sticky;
  left: 0;
  z-index: var(--z-sticky);
}

.timesheet-cell {
  justify-content: center;
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast);
}
.timesheet-cell:hover {
  background-color: var(--timesheet-cell-hover);
}
.timesheet-cell:empty::after {
  content: "–";
  color: var(--text-tertiary);
}

/* Column-state modifiers */
.timesheet-cell-today,
.timesheet-header-cell-today {
  background-color: var(--timesheet-today-bg);
  box-shadow: inset 0 0 0 1px var(--timesheet-today-border);
}
.timesheet-cell-weekend,
.timesheet-header-cell-weekend {
  background-color: var(--timesheet-weekend-bg);
}

/* Entry-type modifiers — applied to the cell once it has a logged value */
.timesheet-cell-billable {
  background-color: var(--timesheet-billable-bg);
  color: var(--timesheet-billable-text);
  font-weight: var(--weight-medium);
}
.timesheet-cell-nonbillable {
  background-color: var(--timesheet-nonbillable-bg);
  color: var(--timesheet-nonbillable-text);
}
.timesheet-cell-overtime {
  background-color: var(--timesheet-overtime-bg);
  color: var(--timesheet-overtime-text);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--timesheet-overtime-border);
}
.timesheet-cell-locked {
  background-color: var(--timesheet-locked-bg);
  color: var(--timesheet-locked-text);
  cursor: not-allowed;
}

/* Row & column totals */
.timesheet-row-total .timesheet-cell,
.timesheet-total-col {
  background-color: var(--timesheet-total-bg);
  color: var(--timesheet-total-text);
  font-weight: var(--weight-semibold);
}
.timesheet-row-total .timesheet-label-cell {
  background-color: var(--timesheet-total-bg);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   NEW — Chart series utility classes
   Pair with a charting lib (Chart.js/Recharts/etc.) by reading these as JS
   via getComputedStyle, or apply directly to legend swatches / SVG fills.
   -------------------------------------------------------------------------- */
.chart-swatch-1 {
  background-color: var(--chart-series-1);
}
.chart-swatch-2 {
  background-color: var(--chart-series-2);
}
.chart-swatch-3 {
  background-color: var(--chart-series-3);
}
.chart-swatch-4 {
  background-color: var(--chart-series-4);
}
.chart-swatch-5 {
  background-color: var(--chart-series-5);
}
.chart-swatch-6 {
  background-color: var(--chart-series-6);
}
.chart-swatch-7 {
  background-color: var(--chart-series-7);
}
.chart-swatch-8 {
  background-color: var(--chart-series-8);
}
.chart-swatch-9 {
  background-color: var(--chart-series-9);
}
.chart-swatch-10 {
  background-color: var(--chart-series-10);
}

/* --------------------------------------------------------------------------
   Page Layout Primitives
   -------------------------------------------------------------------------- */

.page-header {
  padding: var(--space-6) var(--space-6) 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  padding-left: 0;
  padding-right: 0;
}
.page-header--bordered {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-6);
}
.page-header-breadcrumb {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.page-header-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.page-header-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.page-header-count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background-color: var(--bg-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.page-header-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toolbar {
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.toolbar-search {
  position: relative;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: var(--space-0);
}
.stack--sm {
  gap: var(--space-4);
}
.stack--lg {
  gap: var(--space-8);
}

.cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-width: var(--space-0);
}
.cluster--between {
  justify-content: space-between;
}
.cluster--end {
  justify-content: flex-end;
}
.cluster--start {
  align-items: flex-start;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(var(--space-0), 2fr) minmax(
      var(--timesheet-label-col-width),
      1fr
    );
  gap: var(--space-6);
  align-items: start;
  min-width: var(--space-0);
}
.content-main,
.content-rail {
  min-width: var(--space-0);
}
.content-rail {
  position: sticky;
  top: var(--space-6);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin: var(--space-0);
}
.info-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.info-item {
  min-width: var(--space-0);
}
.info-item > :first-child {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}
.info-item > :last-child {
  display: block;
  margin: var(--space-1) var(--space-0) var(--space-0);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Compact stat treatment for inline summaries and card sidebars. */
.stat-box-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: var(--space-0);
  padding: var(--space-5);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.stat-box-label {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.stat-box-value {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.stat-box-sm--success .stat-box-value {
  color: var(--text-success);
}
.stat-box-sm--warning .stat-box-value {
  color: var(--text-warning);
}
.stat-box-sm--danger .stat-box-value {
  color: var(--text-danger);
}

/* Selected rows use a light surface with a clear semantic border. */
.selectable-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: var(--space-0);
  padding: var(--space-4);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-fast),
    border-color var(--duration-fast);
}
.list-row-selected {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-selected);
}
.selectable-row-header,
.selectable-row-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.selectable-row-header {
  cursor: pointer;
}
.selectable-row-controls {
  align-items: flex-end;
}
.selectable-row-copy {
  flex: 1;
  min-width: var(--space-0);
}
.selectable-row-title {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.selectable-row-meta {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

/* Typography for trusted rich-text HTML rendered inside cards. */
.rich-text {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}
.rich-text > * + * {
  margin-top: var(--space-4);
}
.rich-text p {
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.rich-text h1 {
  font-size: var(--text-xl);
}
.rich-text h2 {
  font-size: var(--text-lg);
}
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  font-size: var(--text-base);
}
.rich-text strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.rich-text ul,
.rich-text ol {
  margin-bottom: var(--space-0);
  padding-left: var(--space-7);
  color: var(--text-secondary);
}
.rich-text ul {
  list-style-type: disc;
}
.rich-text ul ul {
  list-style-type: circle;
}
.rich-text ol {
  list-style-type: decimal;
}
.rich-text li + li {
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Responsive Utility
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --page-padding: var(--space-6);
  }
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-layout {
    grid-template-columns: minmax(var(--space-0), 1fr);
  }
  .content-rail {
    position: static;
  }
}
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px; /* Hide sidebar */
    --page-padding: var(--space-4);
  }
  .sidebar {
    display: none;
  }
  .hide-on-mobile {
    display: none !important;
  }
  .info-grid {
    grid-template-columns: 1fr;
  }

  /* NEW — timesheet grid degrades to a horizontally scrollable strip rather
     than squeezing 7 columns into a phone width */
  .timesheet-grid {
    overflow-x: auto;
    grid-auto-flow: column;
  }
  .timesheet-label-cell {
    min-width: 140px;
  }
}

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

/* ==========================================================================
   4. SWEETALERT INTEGRATION
   ========================================================================== */
.pts-toast-container {
  z-index: var(--z-toast) !important;
}

.pts-alert-container {
  z-index: var(--z-modal) !important;
}

.pts-alert-popup {
  border: 1px solid var(--border-default) !important;
}


/* Bootstrap 5.3 Dark Mode Overrides */
[data-bs-theme="dark"] {
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--bg-app);
  --bs-emphasis-color: var(--gray-0);
  --bs-secondary-color: var(--text-secondary);
  --bs-secondary-bg: var(--bg-muted);
  --bs-tertiary-color: var(--text-tertiary);
  --bs-tertiary-bg: var(--bg-surface);

  --bs-primary-text-emphasis: var(--interactive-primary-hover);
  --bs-secondary-text-emphasis: var(--text-secondary);
  --bs-success-text-emphasis: var(--text-success);
  --bs-info-text-emphasis: var(--text-info);
  --bs-warning-text-emphasis: var(--text-warning);
  --bs-danger-text-emphasis: var(--text-danger);
  --bs-light-text-emphasis: var(--gray-50);
  --bs-dark-text-emphasis: var(--gray-0);

  --bs-primary-bg-subtle: var(--bg-selected);
  --bs-secondary-bg-subtle: var(--bg-muted);
  --bs-success-bg-subtle: var(--bg-success);
  --bs-info-bg-subtle: var(--bg-info);
  --bs-warning-bg-subtle: var(--bg-warning);
  --bs-danger-bg-subtle: var(--bg-danger);
  --bs-light-bg-subtle: var(--bg-muted);
  --bs-dark-bg-subtle: var(--bg-inverse);

  --bs-primary-border-subtle: var(--interactive-primary);
  --bs-secondary-border-subtle: var(--border-subtle);
  --bs-success-border-subtle: var(--border-success);
  --bs-info-border-subtle: var(--border-info);
  --bs-warning-border-subtle: var(--border-warning);
  --bs-danger-border-subtle: var(--border-danger);
  --bs-light-border-subtle: var(--border-subtle);
  --bs-dark-border-subtle: var(--border-strong);

  --bs-heading-color: inherit;
  --bs-link-color: var(--interactive-primary);
  --bs-link-hover-color: var(--interactive-primary-hover);
  --bs-code-color: var(--text-danger);
  --bs-highlight-color: var(--text-primary);
  --bs-highlight-bg: var(--bg-warning);
  
  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-form-valid-color: var(--text-success);
  --bs-form-valid-border-color: var(--border-success);
  --bs-form-invalid-color: var(--text-danger);
  --bs-form-invalid-border-color: var(--border-danger);
}

/* task-module-bridge.css - Legacy shell variables mapped to PTS tokens */
:root, [data-bs-theme="dark"] {
  --shell-bg-canvas: var(--bg-app);
  --shell-bg-muted: var(--bg-muted);
  --shell-warning-muted: var(--bg-warning);
  --shell-success-muted: var(--bg-success);
  --shell-border-strong: var(--border-strong);
  --shell-accent-ring: var(--interactive-primary);
  --shell-text-primary: var(--text-primary);
  --shell-success: var(--text-success);
  --shell-warning: var(--text-warning);
  --shell-radius-xs: var(--radius-sm);
  --shell-radius-sm: var(--radius-sm);
  --shell-radius-md: var(--radius-md);
  --shell-radius-lg: var(--radius-lg);
  --shell-radius-xl: var(--radius-lg);
  --shell-radius-full: var(--radius-full);
  --shell-duration-fast: var(--duration-fast);
  --shell-duration-normal: var(--duration-base);
  --shell-duration-slow: var(--duration-slow);
  --shell-ease-out: var(--ease-spring);
  --shell-ease-standard: var(--ease-default);
  --shell-shadow-xs: var(--shadow-sm);
  --shell-shadow-sm: var(--shadow-sm);
  --shell-shadow-lg: var(--shadow-lg);
}