/* Droppo Design System v1.0 — CSS tokens
   Source: Doc/droppo-design-system.html
   Load this before style.css / client-portal.css / login.css */

:root {
  /* navy */
  --navy-900: #071B33;
  --navy-800: #0B2E59;
  --navy-700: #12467F;
  --navy-500: #2E6BA8;
  --navy-300: #7FA3C9;
  --navy-100: #D6E1EE;

  /* turquoise */
  --turq-800: #0E6B60;
  --turq-700: #1FA695;
  --turq-500: #2ED2C1;
  --turq-300: #6FE3D6;
  --turq-200: #A9EFE6;
  --turq-50: #DDF8F4;

  /* gold — money only */
  --gold: #E9A13B;
  --gold-700: #B87A22;
  --gold-50: #FDF3E3;

  /* neutrals */
  --cloud: #F4F7FA;
  --ink: #1F2933;
  --line: #E5E7EB;
  --white: #FFFFFF;
  --muted: #6B7280;
  --muted-2: #9AA4B2;
  --sand: #F6F1E8; /* marketing pages only */

  /* semantic */
  --ok: #0E9F6E;
  --ok-50: #E7F7F0;
  --bad: #E5484D;
  --bad-50: #FDECEC;
  --warn: #F5A524;
  --warn-50: #FEF5E5;
  --info: #3B82F6;
  --info-50: #EAF1FE;

  /* chart series — fixed order */
  --s1: #0B2E59;
  --s2: #1FA695;
  --s3: #3B82F6;
  --s4: #E9A13B;
  --s5: #6C5CE7;
  --s6: #FF7A5C;
  --s7: #5C7FA8;
  --s8: #0E9F6E;

  /* type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-ar: 'Cairo', 'Inter', system-ui, sans-serif;

  /* shape */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow: 0 1px 2px rgba(11, 46, 89, .04), 0 8px 24px -14px rgba(11, 46, 89, .16);

  /* layout */
  --sidebar: 248px;
  --topbar: 60px;
  --rail: 340px;

  /* ── Legacy aliases (existing stylesheets) ── */
  --primary-purple: var(--navy-800);
  --dark-purple: var(--navy-900);
  --light-purple: var(--navy-500);
  --sidebar-bg: var(--navy-900);
  --topbar-bg: var(--navy-800);
  --card-bg: var(--white);
  --text-dark: var(--ink);
  --text-muted: var(--muted);
  --success-color: var(--ok);
  --danger-color: var(--bad);

  /* Bootstrap 5 bridge */
  --bs-primary: #0B2E59;
  --bs-primary-rgb: 11, 46, 89;
  --bs-success: #0E9F6E;
  --bs-success-rgb: 14, 159, 110;
  --bs-danger: #E5484D;
  --bs-danger-rgb: 229, 72, 77;
  --bs-warning: #F5A524;
  --bs-warning-rgb: 245, 165, 36;
  --bs-info: #3B82F6;
  --bs-info-rgb: 59, 130, 246;
  --bs-body-color: #1F2933;
  --bs-body-bg: #F4F7FA;
  --bs-border-color: #E5E7EB;
  --bs-link-color: #1FA695;
  --bs-link-hover-color: #0E6B60;
  --bs-font-sans-serif: var(--font-body);
}

/* Typography */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--cloud);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body,
html[lang="ar"] body {
  font-family: var(--font-ar);
  line-height: 1.85;
}

h1, h2, h3, h4, h5, .dashboard-header h2, .fw-bold.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing: -0.02em;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--font-ar);
}

.mono, code, .font-mono, .text-mono,
.table .order-id, .kpi-money, .money, .currency {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--turq-700); }
a:hover { color: var(--turq-800); }

/* Bootstrap primary → navy */
.btn-primary {
  --bs-btn-bg: var(--navy-800);
  --bs-btn-border-color: var(--navy-800);
  --bs-btn-hover-bg: var(--navy-700);
  --bs-btn-hover-border-color: var(--navy-700);
  --bs-btn-active-bg: var(--navy-900);
  --bs-btn-active-border-color: var(--navy-900);
  --bs-btn-disabled-bg: var(--line);
  --bs-btn-disabled-border-color: var(--line);
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--navy-800);
  --bs-btn-border-color: var(--navy-300);
  --bs-btn-hover-bg: var(--navy-800);
  --bs-btn-hover-border-color: var(--navy-800);
  --bs-btn-hover-color: #fff;
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-success {
  --bs-btn-bg: var(--ok);
  --bs-btn-border-color: var(--ok);
  --bs-btn-hover-bg: #0c8a5f;
  --bs-btn-hover-border-color: #0c8a5f;
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-danger {
  --bs-btn-color: var(--bad);
  --bs-btn-bg: var(--bad-50);
  --bs-btn-border-color: rgba(229, 72, 77, .3);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bad);
  --bs-btn-hover-border-color: var(--bad);
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-warning {
  --bs-btn-color: #3A2604;
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-bg: var(--gold-700);
  --bs-btn-hover-border-color: var(--gold-700);
  --bs-btn-hover-color: #fff;
  border-radius: var(--r-md);
  font-weight: 600;
}

/* Accent CTA (turquoise) — use for the single primary action */
.btn-accent,
.btn-droppo-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  background: var(--turq-500);
  color: var(--navy-900) !important;
  border: 1px solid transparent;
  transition: transform .14s, box-shadow .18s;
}
.btn-accent:hover,
.btn-droppo-accent:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  background: var(--turq-300);
  color: var(--navy-900) !important;
}

.btn-gold,
.btn-droppo-gold {
  background: var(--gold);
  color: #3A2604 !important;
  border: none;
  border-radius: var(--r-md);
  font-weight: 600;
}
.btn-gold:hover { background: var(--gold-700); color: #fff !important; }

/* Forms */
.form-control:focus,
.form-select:focus {
  border-color: var(--turq-500);
  box-shadow: 0 0 0 3px rgba(46, 210, 193, .16);
}

.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-800);
}

/* Cards */
.card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
  background: var(--white);
}

.card-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-800);
}

/* Tables */
.table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  border-bottom-color: var(--line);
  background: var(--white);
}

.table-dark thead th,
.table thead.table-dark th,
.bg-primary {
  background-color: var(--navy-800) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: #FAFBFD;
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}
.pill .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.p-ok, .pill-ok { background: var(--ok-50); color: var(--ok); }
.p-bad, .pill-bad { background: var(--bad-50); color: var(--bad); }
.p-warn, .pill-warn { background: var(--warn-50); color: var(--warn); }
.p-info, .pill-info { background: var(--info-50); color: var(--info); }
.p-turq, .pill-turq { background: var(--turq-50); color: var(--turq-700); }
.p-gold, .pill-gold { background: var(--gold-50); color: var(--gold-700); }
.p-grey, .pill-grey { background: #F1F3F6; color: var(--muted); }

/* Money surfaces */
.money-surface, .wallet-card, .cod-badge {
  background: var(--gold-50);
  color: var(--gold-700);
}

.badge.bg-primary { background-color: var(--navy-800) !important; }
.badge.bg-success { background-color: var(--ok) !important; }
.badge.bg-danger { background-color: var(--bad) !important; }
.badge.bg-warning { background-color: var(--warn) !important; color: #3A2604 !important; }
.badge.bg-info { background-color: var(--info) !important; }

.text-primary { color: var(--navy-800) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--bad) !important; }
.text-muted { color: var(--muted) !important; }

.bg-light { background-color: var(--cloud) !important; }
.border { border-color: var(--line) !important; }

.alert-info { background: var(--info-50); color: #1E4E9C; border-color: transparent; }
.alert-success { background: var(--ok-50); color: var(--ok); border-color: transparent; }
.alert-danger { background: var(--bad-50); color: var(--bad); border-color: transparent; }
.alert-warning { background: var(--warn-50); color: #8A5A08; border-color: transparent; }