/**
 * Repario Design System - CSS Custom Properties
 *
 * Source: ai-system/ui/tokens/tokens.json + stitch-export reconciliation
 * Version: 2.0.0
 * Themes: light (default) + dark (Stitch)
 *
 * Primary: #5c5cff (Stitch source of truth)
 * Font: Manrope (Stitch source of truth)
 *
 * Light theme applied via html[data-theme="light"]
 * Dark theme applied via html[data-theme="dark"]
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TOKENS (theme-agnostic)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Font families ── */
  --rep-font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --rep-font-family-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --rep-font-family-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ── Font sizes ── */
  --rep-font-size-xs: 0.75rem;
  --rep-font-size-sm: 0.875rem;
  --rep-font-size-base: 0.9375rem;
  --rep-font-size-lg: 1.0625rem;
  --rep-font-size-xl: 1.25rem;
  --rep-font-size-2xl: 1.5rem;
  --rep-font-size-3xl: 1.875rem;
  --rep-font-size-4xl: 2.25rem;
  --rep-font-size-5xl: 3rem;

  /* ── Font weights ── */
  --rep-font-weight-light: 300;
  --rep-font-weight-normal: 400;
  --rep-font-weight-medium: 500;
  --rep-font-weight-semibold: 600;
  --rep-font-weight-bold: 700;

  /* ── Line heights ── */
  --rep-line-height-none: 1;
  --rep-line-height-tight: 1.25;
  --rep-line-height-snug: 1.375;
  --rep-line-height-normal: 1.5;
  --rep-line-height-relaxed: 1.625;
  --rep-line-height-loose: 2;

  /* ── Letter spacing ── */
  --rep-letter-spacing-tighter: -0.04em;
  --rep-letter-spacing-tight: -0.02em;
  --rep-letter-spacing-normal: 0;
  --rep-letter-spacing-wide: 0.02em;
  --rep-letter-spacing-wider: 0.04em;

  /* ── Spacing ── */
  --rep-space-0: 0;
  --rep-space-px: 1px;
  --rep-space-0-5: 0.125rem;
  --rep-space-1: 0.25rem;
  --rep-space-1-5: 0.375rem;
  --rep-space-2: 0.5rem;
  --rep-space-2-5: 0.625rem;
  --rep-space-3: 0.75rem;
  --rep-space-3-5: 0.875rem;
  --rep-space-4: 1rem;
  --rep-space-5: 1.25rem;
  --rep-space-6: 1.5rem;
  --rep-space-7: 1.75rem;
  --rep-space-8: 2rem;
  --rep-space-9: 2.25rem;
  --rep-space-10: 2.5rem;
  --rep-space-11: 2.75rem;
  --rep-space-12: 3rem;
  --rep-space-14: 3.5rem;
  --rep-space-16: 4rem;
  --rep-space-20: 5rem;
  --rep-space-24: 6rem;

  /* ── Border radius ── */
  --rep-radius-none: 0;
  --rep-radius-sm: 0.25rem;
  --rep-radius-md: 0.375rem;
  --rep-radius-lg: 0.5rem;
  --rep-radius-xl: 0.75rem;
  --rep-radius-2xl: 1rem;
  --rep-radius-3xl: 1.5rem;
  --rep-radius-full: 9999px;

  /* ── Shadows ── */
  --rep-shadow-none: none;
  --rep-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --rep-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --rep-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --rep-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --rep-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --rep-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --rep-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --rep-shadow-ring: 0 0 0 3px rgba(92, 92, 255, 0.15);
  --rep-shadow-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.15);
  --rep-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --rep-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
  --rep-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* ── Transitions ── */
  --rep-transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --rep-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --rep-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --rep-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --rep-z-base: 0;
  --rep-z-dropdown: 1000;
  --rep-z-sticky: 1100;
  --rep-z-fixed: 1200;
  --rep-z-modal-backdrop: 1300;
  --rep-z-modal: 1400;
  --rep-z-popover: 1500;
  --rep-z-tooltip: 1600;
  --rep-z-toast: 1700;

  /* ── Static colors (theme-agnostic) ── */
  --rep-color-primary-50: #ededff;
  --rep-color-primary-100: #d8d8ff;
  --rep-color-primary-200: #b4b4ff;
  --rep-color-primary-300: #8c8cff;
  --rep-color-primary-400: #7474ff;
  --rep-color-primary-500: #5c5cff;
  --rep-color-primary-600: #4a4adb;
  --rep-color-primary-700: #3939b7;
  --rep-color-primary-800: #2d2d93;
  --rep-color-primary-900: #21216f;
  --rep-color-primary-base: #5c5cff;
  --rep-color-primary-hover: #4a4adb;
  --rep-color-primary-active: #3939b7;
  --rep-color-primary-disabled: #b4b4ff;

  --rep-color-accent-base: #eb4899;
  --rep-color-accent-hover: #d9287a;
  --rep-color-accent-orange: #fa6938;
  --rep-badge-purple-text: #a78bfa;
  --rep-badge-purple-bg: rgba(139, 92, 246, 0.1);

  --rep-color-semantic-success-base: #059669;
  --rep-color-semantic-success-bg: #d1fae5;
  --rep-color-semantic-success-text: #065f46;
  --rep-color-semantic-success-border: #34d399;
  --rep-color-semantic-warning-base: #d97706;
  --rep-color-semantic-warning-bg: #fef3c7;
  --rep-color-semantic-warning-text: #92400e;
  --rep-color-semantic-warning-border: #fbbf24;
  --rep-color-semantic-error-base: #dc2626;
  --rep-color-semantic-error-bg: #fee2e2;
  --rep-color-semantic-error-text: #991b1b;
  --rep-color-semantic-error-border: #f87171;
  --rep-color-semantic-info-base: #0284c7;
  --rep-color-semantic-info-bg: #e0f2fe;
  --rep-color-semantic-info-text: #075985;
  --rep-color-semantic-info-border: #38bdf8;

  /* Status colors */
  --rep-color-status-pending: #f59e0b;
  --rep-color-status-pending-bg: #fef3c7;
  --rep-color-status-in-progress: #eab308;
  --rep-color-status-in-progress-bg: rgba(234, 179, 8, 0.1);
  --rep-color-status-waiting-parts: #ef4444;
  --rep-color-status-waiting-parts-bg: rgba(239, 68, 68, 0.1);
  --rep-color-status-ready: #10b981;
  --rep-color-status-ready-bg: rgba(16, 185, 129, 0.1);
  --rep-color-status-completed: #059669;
  --rep-color-status-completed-bg: #d1fae5;
  --rep-color-status-diagnosing: #3b82f6;
  --rep-color-status-diagnosing-bg: rgba(59, 130, 246, 0.1);
  --rep-color-status-cancelled: #6b7280;
  --rep-color-status-cancelled-bg: #f3f4f6;

  /* Priority colors */
  --rep-color-priority-low: #6b7280;
  --rep-color-priority-low-bg: #f3f4f6;
  --rep-color-priority-normal: #3b82f6;
  --rep-color-priority-normal-bg: #dbeafe;
  --rep-color-priority-high: #f59e0b;
  --rep-color-priority-high-bg: #fef3c7;
  --rep-color-priority-urgent: #dc2626;
  --rep-color-priority-urgent-bg: #fee2e2;

  /* ── Theme-dependent defaults (dark = default) ── */
  --rep-bg-page: #070b12;
  --rep-bg-primary: #070b12;
  --rep-bg-surface: #111c2c;
  --rep-bg-secondary: #111c2c;
  --rep-bg-elevated: #162236;
  --rep-bg-tertiary: #162236;
  --rep-bg-subtle: #0d1520;
  --rep-bg-hover: rgba(255, 255, 255, 0.05);
  --rep-bg-input: #070b12;
  --rep-bg-overlay: rgba(0, 0, 0, 0.7);

  --rep-accent: #6366f1;
  --rep-text-primary: #f1f5f9;
  --rep-text-secondary: #9a9abc;
  --rep-text-muted: #64748b;
  --rep-text-disabled: #475569;
  --rep-text-inverse: #0f1c31;
  --rep-text-link: #7474ff;

  --rep-border-default: #2d4360;
  --rep-border-strong: #3a5578;
  --rep-border-subtle: rgba(45, 67, 96, 0.5);
  --rep-border-focus: #5c5cff;

  --rep-sidebar-bg: #111c2c;
  --rep-sidebar-border: #2d4360;
  --rep-sidebar-text: #9a9abc;
  --rep-sidebar-text-hover: #ffffff;
  --rep-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --rep-sidebar-active-bg: rgba(92, 92, 255, 0.1);
  --rep-sidebar-active-text: #5c5cff;

  --rep-topbar-bg: rgba(17, 28, 44, 0.5);

  --rep-card-bg: #111c2c;
  --rep-card-border: #2d4360;
  --rep-card-shadow: none;

  --rep-table-header-bg: rgba(7, 11, 18, 0.5);
  --rep-table-row-hover: rgba(255, 255, 255, 0.05);
  --rep-table-border: #2d4360;

  --rep-chart-bar-idle: #2d4360;
  --rep-chart-bar-active: #5c5cff;
  --rep-chart-bar-hover: rgba(92, 92, 255, 0.5);

  --rep-badge-emerald-bg: rgba(16, 185, 129, 0.1);
  --rep-badge-emerald-text: #34d399;
  --rep-badge-orange-bg: rgba(249, 115, 22, 0.1);
  --rep-badge-orange-text: #fb923c;
  --rep-badge-red-bg: rgba(239, 68, 68, 0.1);
  --rep-badge-red-text: #f87171;
  --rep-badge-blue-bg: rgba(59, 130, 246, 0.1);
  --rep-badge-blue-text: #60a5fa;
  --rep-badge-yellow-bg: rgba(234, 179, 8, 0.1);
  --rep-badge-yellow-text: #facc15;

  --rep-scrollbar-track: #070b12;
  --rep-scrollbar-thumb: #2d4360;
  --rep-scrollbar-thumb-hover: #5c5cff;

  --rep-kpi-icon-primary-bg: rgba(92, 92, 255, 0.1);
  --rep-kpi-icon-indigo-bg: rgba(99, 102, 241, 0.1);
  --rep-kpi-icon-orange-bg: rgba(249, 115, 22, 0.1);
  --rep-kpi-icon-emerald-bg: rgba(16, 185, 129, 0.1);
  --rep-kpi-icon-purple-bg: rgba(139, 92, 246, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME (default)
   Source: stitch-export/repario_dashboard_light
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  --rep-bg-page: #f3f6fc;
  --rep-bg-primary: #f3f6fc;
  --rep-bg-surface: #ffffff;
  --rep-bg-secondary: #ffffff;
  --rep-bg-elevated: #ffffff;
  --rep-bg-tertiary: #f3f4f6;
  --rep-bg-subtle: #f3f4f6;
  --rep-bg-hover: rgba(0, 0, 0, 0.04);
  --rep-bg-input: #f3f6fc;
  --rep-bg-overlay: rgba(17, 24, 39, 0.6);

  --rep-accent: #5c5cff;
  --rep-text-primary: #0f1c31;
  --rep-text-secondary: #64748b;
  --rep-text-muted: #9ca3af;
  --rep-text-disabled: #d1d5db;
  --rep-text-inverse: #ffffff;
  --rep-text-link: #5c5cff;

  --rep-border-default: #d5dfef;
  --rep-border-strong: #c5cede;
  --rep-border-subtle: #e8edf5;
  --rep-border-focus: #5c5cff;

  --rep-sidebar-bg: #ffffff;
  --rep-sidebar-border: #d5dfef;
  --rep-sidebar-text: #64748b;
  --rep-sidebar-text-hover: #0f1c31;
  --rep-sidebar-hover-bg: #f1f5f9;
  --rep-sidebar-active-bg: rgba(92, 92, 255, 0.1);
  --rep-sidebar-active-text: #5c5cff;

  --rep-topbar-bg: #ffffff;

  --rep-card-bg: #ffffff;
  --rep-card-border: #d5dfef;
  --rep-card-shadow: var(--rep-shadow-sm);

  --rep-table-header-bg: #f3f6fc;
  --rep-table-row-hover: #f8fafc;
  --rep-table-border: #d5dfef;

  --rep-chart-bar-idle: #d5dfef;
  --rep-chart-bar-active: #5c5cff;
  --rep-chart-bar-hover: rgba(92, 92, 255, 0.5);

  --rep-badge-emerald-bg: #ecfdf5;
  --rep-badge-emerald-text: #059669;
  --rep-badge-orange-bg: #fff7ed;
  --rep-badge-orange-text: #ea580c;
  --rep-badge-red-bg: #fef2f2;
  --rep-badge-red-text: #dc2626;
  --rep-badge-blue-bg: #eff6ff;
  --rep-badge-blue-text: #2563eb;
  --rep-badge-yellow-bg: #fefce8;
  --rep-badge-yellow-text: #ca8a04;

  --rep-scrollbar-track: #f3f6fc;
  --rep-scrollbar-thumb: #d5dfef;
  --rep-scrollbar-thumb-hover: #5c5cff;

  --rep-kpi-icon-primary-bg: rgba(92, 92, 255, 0.08);
  --rep-kpi-icon-indigo-bg: rgba(99, 102, 241, 0.08);
  --rep-kpi-icon-orange-bg: rgba(249, 115, 22, 0.08);
  --rep-kpi-icon-emerald-bg: rgba(16, 185, 129, 0.08);
  --rep-kpi-icon-purple-bg: rgba(139, 92, 246, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME
   Source: stitch-export/repario_dashboard_dark
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --rep-bg-page: #070b12;
  --rep-bg-primary: #070b12;
  --rep-bg-surface: #111c2c;
  --rep-bg-secondary: #111c2c;
  --rep-bg-elevated: #162236;
  --rep-bg-tertiary: #162236;
  --rep-bg-subtle: #0d1520;
  --rep-bg-hover: rgba(255, 255, 255, 0.05);
  --rep-bg-input: #070b12;
  --rep-bg-overlay: rgba(0, 0, 0, 0.7);

  --rep-accent: #6366f1;
  --rep-text-primary: #f1f5f9;
  --rep-text-secondary: #9a9abc;
  --rep-text-muted: #64748b;
  --rep-text-disabled: #475569;
  --rep-text-inverse: #0f1c31;
  --rep-text-link: #7474ff;

  --rep-border-default: #2d4360;
  --rep-border-strong: #3a5578;
  --rep-border-subtle: rgba(45, 67, 96, 0.5);
  --rep-border-focus: #5c5cff;

  --rep-sidebar-bg: #111c2c;
  --rep-sidebar-border: #2d4360;
  --rep-sidebar-text: #9a9abc;
  --rep-sidebar-text-hover: #ffffff;
  --rep-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --rep-sidebar-active-bg: rgba(92, 92, 255, 0.1);
  --rep-sidebar-active-text: #5c5cff;

  --rep-topbar-bg: rgba(17, 28, 44, 0.5);

  --rep-card-bg: #111c2c;
  --rep-card-border: #2d4360;
  --rep-card-shadow: none;

  --rep-table-header-bg: rgba(7, 11, 18, 0.5);
  --rep-table-row-hover: rgba(255, 255, 255, 0.05);
  --rep-table-border: #2d4360;

  --rep-chart-bar-idle: #2d4360;
  --rep-chart-bar-active: #5c5cff;
  --rep-chart-bar-hover: rgba(92, 92, 255, 0.5);

  --rep-badge-emerald-bg: rgba(16, 185, 129, 0.1);
  --rep-badge-emerald-text: #34d399;
  --rep-badge-orange-bg: rgba(249, 115, 22, 0.1);
  --rep-badge-orange-text: #fb923c;
  --rep-badge-red-bg: rgba(239, 68, 68, 0.1);
  --rep-badge-red-text: #f87171;
  --rep-badge-blue-bg: rgba(59, 130, 246, 0.1);
  --rep-badge-blue-text: #60a5fa;
  --rep-badge-yellow-bg: rgba(234, 179, 8, 0.1);
  --rep-badge-yellow-text: #facc15;

  --rep-scrollbar-track: #070b12;
  --rep-scrollbar-thumb: #2d4360;
  --rep-scrollbar-thumb-hover: #5c5cff;

  --rep-kpi-icon-primary-bg: rgba(92, 92, 255, 0.1);
  --rep-kpi-icon-indigo-bg: rgba(99, 102, 241, 0.1);
  --rep-kpi-icon-orange-bg: rgba(249, 115, 22, 0.1);
  --rep-kpi-icon-emerald-bg: rgba(16, 185, 129, 0.1);
  --rep-kpi-icon-purple-bg: rgba(139, 92, 246, 0.1);

  --rep-shadow-sm: none;
  --rep-shadow-card: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL INPUT RESETS — Remove browser-native search icons/decorations
   Applied to ALL inputs within the App Shell to prevent icon overlap.
   ═══════════════════════════════════════════════════════════════════════════ */

.rep-content input[type="search"]::-webkit-search-decoration,
.rep-content input[type="search"]::-webkit-search-cancel-button,
.rep-content input[type="search"]::-webkit-search-results-button,
.rep-content input[type="search"]::-webkit-search-results-decoration,
.rep-content input[type="text"]::-webkit-search-decoration,
.rep-content input[type="text"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.rep-content input[type="search"],
.rep-content input[type="text"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}