/* ==========================================================================
   ClickR Design System — Based on Linear.app DESIGN.md
   Adapted: ClickR purple accent, platform colors preserved, dark-mode-first
   ========================================================================== */

/* === Typography === */
:root {
  /* Font families */
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Font weights (Linear signature: 510 between regular and medium) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 510;
  --fw-semibold: 590;
  --fw-bold: 700;

  /* === Backgrounds (dark-mode-first) === */
  --bg-base: #0f1011;
  --bg-surface: #191a1b;
  --bg-surface-elevated: #28282c;
  --bg-sidebar: #0f1011;
  --bg-input: rgba(255,255,255,0.03);
  --bg-card-header: rgba(255,255,255,0.04);
  --bg-hover: rgba(255,255,255,0.04);
  --bg-code: rgba(255,255,255,0.06);

  /* === Text === */
  --text-primary: #f7f8f8;
  --text-secondary: #d0d6e0;
  --text-tertiary: #8a8f98;
  --text-quaternary: #62666d;

  /* === Brand Accent (ClickR purple) === */
  --accent: #6c5ce7;
  --accent-hover: #7c6ff0;
  --accent-active: #5a4bd6;
  --accent-muted: rgba(108,92,231,0.12);
  --accent-rgb: 108, 92, 231;

  /* === Platform Colors (immutable) === */
  --color-uber: #06C167;
  --color-deliveroo: #00CCBC;
  --color-takeaway: #FF8000;
  --color-hubrise: #D97706;
  --color-uber-muted: rgba(6,193,103,0.15);
  --color-deliveroo-muted: rgba(0,204,188,0.15);
  --color-takeaway-muted: rgba(255,128,0,0.15);
  --color-hubrise-muted: rgba(217,119,6,0.15);

  /* === Status Colors === */
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #0891b2;
  --color-success-muted: rgba(34,197,94,0.12);
  --color-danger-muted: rgba(239,68,68,0.12);
  --color-warning-muted: rgba(245,158,11,0.12);
  --color-info-muted: rgba(8,145,178,0.12);

  /* Order status */
  --status-pending: #d97706;
  --status-preparing: #0891b2;
  --status-accepted: #16a34a;
  --status-delivered: #6b7280;
  --status-failed: #dc2626;

  /* === Borders === */
  --border-subtle: rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.08);
  --border-solid: #23252a;
  --border-solid-light: #34343a;

  /* === Shadows (dark-mode) === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.25);
  --shadow-elevated: 0 2px 8px rgba(0,0,0,0.4);

  /* === Radius === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  /* === Spacing (8px grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* === Transitions === */
  --transition-fast: 150ms ease;

  /* === Bootstrap 5 dark-mode overrides === */
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-secondary);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-border-color: var(--border-default);
  --bs-card-bg: var(--bg-surface);
  --bs-card-border-color: var(--border-default);
}

/* === Global Resets === */
*, *::before, *::after {
  font-feature-settings: "cv01", "ss03";
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  background-color: var(--bg-base);
  color: var(--text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

h1 { letter-spacing: -0.704px; }
h2 { letter-spacing: -0.288px; }
h3 { letter-spacing: -0.24px; }

code, pre, .font-mono {
  font-family: var(--font-mono);
}

a {
  color: var(--accent);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--accent-hover);
}

/* === Bootstrap Component Overrides === */

/* Cards */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
}

.card-header {
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-secondary);
  --bs-table-border-color: var(--border-solid);
}

.table thead th {
  border-bottom-color: var(--border-solid-light);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(255,255,255,0.02);
}

/* Forms */
.form-control,
.form-select {
  background: var(--bg-input);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
  background: var(--bg-input);
  color: var(--text-primary);
}

.form-control::placeholder {
  color: var(--text-quaternary);
}

.input-group-text {
  background: var(--bg-surface-elevated);
  border-color: var(--border-default);
  color: var(--text-tertiary);
}

.form-label {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.form-check-label {
  color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-active);
  --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-active);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-tertiary);
  --bs-btn-border-color: var(--border-solid);
  --bs-btn-hover-bg: var(--bg-surface-elevated);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-border-color: var(--border-solid-light);
}

/* Alerts */
.alert {
  border: 1px solid var(--border-default);
}

/* Badges */
.badge {
  font-weight: var(--fw-medium);
}

/* Muted text */
.text-muted {
  color: var(--text-tertiary) !important;
}

/* Breadcrumbs */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--text-quaternary);
  --bs-breadcrumb-item-active-color: var(--text-secondary);
}

.breadcrumb-item a {
  color: var(--accent);
}

/* Modals */
.modal-content {
  background: var(--bg-surface);
  border-color: var(--border-default);
}

.modal-header {
  border-bottom-color: var(--border-subtle);
}

.modal-footer {
  border-top-color: var(--border-subtle);
}

/* Dropdowns */
.dropdown-menu {
  background: var(--bg-surface);
  border-color: var(--border-default);
  box-shadow: var(--shadow-elevated);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Pagination */
.page-link {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.page-link:hover {
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
}

.page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
}

/* Progress bars */
.progress {
  background: var(--bg-surface-elevated);
}

/* Nav tabs & pills */
.nav-tabs {
  border-bottom-color: var(--border-solid);
}

.nav-tabs .nav-link.active {
  background: var(--bg-surface);
  border-color: var(--border-solid) var(--border-solid) var(--bg-surface);
  color: var(--text-primary);
}

/* List groups */
.list-group-item {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* Close button for dark */
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* === Platform Badge Utilities === */
.badge-uber {
  background: var(--color-uber-muted) !important;
  color: var(--color-uber) !important;
}

.badge-deliveroo {
  background: var(--color-deliveroo-muted) !important;
  color: var(--color-deliveroo) !important;
}

.badge-takeaway,
.badge-other {
  background: var(--color-takeaway-muted) !important;
  color: var(--color-takeaway) !important;
}

.badge-hubrise {
  background: var(--color-hubrise-muted) !important;
  color: var(--color-hubrise) !important;
}

.badge-subplatform {
  background: rgba(107,114,128,0.15) !important;
  color: #6b7280 !important;
  font-size: 0.7rem;
  border-radius: 6px;
}

/* Solid platform badges */
.badge-uber-solid { background: var(--color-uber) !important; color: #fff !important; }
.badge-deliveroo-solid { background: var(--color-deliveroo) !important; color: #fff !important; }
.badge-takeaway-solid { background: var(--color-takeaway) !important; color: #fff !important; }
.badge-hubrise-solid { background: var(--color-hubrise) !important; color: #fff !important; }

/* Platform dots */
.dot-uber { background: var(--color-uber); }
.dot-deliveroo { background: var(--color-deliveroo); }
.dot-takeaway { background: var(--color-takeaway); }
.dot-hubrise { background: var(--color-hubrise); }

/* Platform progress bars */
.bar-hubrise { background: var(--color-hubrise); }

/* Deliveroo button (for post_only.html) */
.btn-deliveroo {
  background: var(--color-deliveroo);
  border-color: var(--color-deliveroo);
  color: #fff;
}
.btn-deliveroo:hover {
  background: #00b3a5;
  border-color: #00b3a5;
  color: #fff;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--border-solid-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-quaternary);
}

/* === Dark-mode helpers === */
.bg-dark-surface {
  background: var(--bg-surface) !important;
}

.bg-dark-elevated {
  background: var(--bg-surface-elevated) !important;
}

/* Override bg-light for dark theme */
[data-bs-theme="dark"] .bg-light {
  background: var(--bg-surface-elevated) !important;
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   Light Theme (Admin Dashboard)
   ========================================================================== */
[data-bs-theme="light"] {
  --bg-base: #f8f9fa;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f3f5;
  --bg-sidebar: #f1f3f5;
  --bg-input: #ffffff;
  --bg-card-header: rgba(0,0,0,0.02);
  --bg-hover: rgba(0,0,0,0.04);
  --bg-code: rgba(0,0,0,0.04);

  --text-primary: #212529;
  --text-secondary: #495057;
  --text-tertiary: #868e96;
  --text-quaternary: #adb5bd;

  --border-subtle: rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-solid: #dee2e6;
  --border-solid-light: #ced4da;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.1);

  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-secondary);
  --bs-card-bg: var(--bg-surface);
  --bs-card-border-color: var(--border-default);
}

[data-bs-theme="light"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(0,0,0,0.02) !important;
}