/* ═══════════════════════════════════════════════════════════
   B2B MARKET · DESIGN SYSTEM v2
   Single source of truth for tokens + base components.
   Imported by every portal (portal, supplier, customs, delivery, driver, warehouse, export).
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@500;600;700&display=swap');

/* ─── TOKENS (OKLCH — exact match with design-preview.html) ─── */
:root {
  /* Brand — pink, used surgically */
  --ds-brand:          oklch(0.60 0.22 340);
  --ds-brand-600:      oklch(0.54 0.23 340);
  --ds-brand-700:      oklch(0.40 0.20 340);
  --ds-brand-100:      oklch(0.97 0.03 340);
  --ds-brand-200:      oklch(0.88 0.08 340);
  --ds-brand-300:      oklch(0.75 0.15 340);
  --ds-brand-50:       oklch(0.985 0.015 340);

  /* Surface — cool-tinted, luxurious whites */
  --ds-canvas:         oklch(0.985 0.005 285);
  --ds-surface:        oklch(1 0 0);
  --ds-surface-2:      oklch(0.97 0.008 285);
  --ds-surface-3:      oklch(0.95 0.01 285);

  /* Ink — cool-tinted neutrals */
  --ds-ink-1:          oklch(0.22 0.03 275);
  --ds-ink-2:          oklch(0.34 0.025 275);
  --ds-ink-3:          oklch(0.48 0.02 275);
  --ds-ink-4:          oklch(0.60 0.015 275);
  --ds-ink-5:          oklch(0.72 0.01 275);

  /* Dark panels (navy/deep blue for hero backgrounds) */
  --ds-dark-1:         oklch(0.16 0.04 275);
  --ds-dark-2:         oklch(0.21 0.04 275);
  --ds-dark-3:         oklch(0.28 0.035 275);
  --ds-dark-4:         oklch(0.35 0.03 275);

  /* Border */
  --ds-border:         oklch(0.93 0.008 280);
  --ds-border-2:       oklch(0.88 0.012 280);
  --ds-border-strong:  oklch(0.82 0.015 280);

  /* Status */
  --ds-ok:             oklch(0.56 0.15 155);
  --ds-ok-bg:          oklch(0.965 0.04 155);
  --ds-ok-border:      oklch(0.82 0.13 155);
  --ds-warn:           oklch(0.65 0.17 70);
  --ds-warn-bg:        oklch(0.97 0.06 70);
  --ds-warn-border:    oklch(0.82 0.15 70);
  --ds-danger:         oklch(0.58 0.21 25);
  --ds-danger-bg:      oklch(0.97 0.04 25);
  --ds-danger-border:  oklch(0.82 0.17 25);
  --ds-info:           oklch(0.60 0.18 250);
  --ds-info-bg:        oklch(0.97 0.04 250);
  --ds-info-border:    oklch(0.82 0.14 250);
  --ds-violet:         oklch(0.56 0.20 295);
  --ds-amber:          oklch(0.72 0.17 70);

  /* Shadows (elevation) */
  --ds-sh-1:  0 1px 2px rgba(16,24,40,0.05);
  --ds-sh-2:  0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --ds-sh-3:  0 4px 12px -2px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
  --ds-sh-4:  0 12px 24px -8px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.04);
  --ds-sh-5:  0 24px 48px -12px rgba(16,24,40,0.18);
  --ds-sh-pink: 0 8px 24px -6px rgba(229,0,126,0.35);

  /* Radii */
  --ds-r-xs:  4px;
  --ds-r-sm:  6px;
  --ds-r-md:  8px;
  --ds-r-lg:  12px;
  --ds-r-xl:  16px;
  --ds-r-2xl: 20px;
  --ds-r-pill: 999px;

  /* Spacing (4px grid) */
  --ds-s-1:  4px;
  --ds-s-2:  8px;
  --ds-s-3:  12px;
  --ds-s-4:  16px;
  --ds-s-5:  20px;
  --ds-s-6:  24px;
  --ds-s-8:  32px;
  --ds-s-10: 40px;
  --ds-s-12: 48px;
  --ds-s-16: 64px;

  /* Typography */
  --ds-font:      'Heebo', -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-display: 'Playfair Display', Georgia, serif;
  --ds-font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

  --ds-fs-xs:   0.72rem;
  --ds-fs-sm:   0.82rem;
  --ds-fs-base: 0.92rem;
  --ds-fs-md:   1rem;
  --ds-fs-lg:   1.12rem;
  --ds-fs-xl:   1.35rem;
  --ds-fs-2xl:  1.7rem;
  --ds-fs-3xl:  2.1rem;

  /* Motion */
  --ds-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur-1: 120ms;
  --ds-dur-2: 180ms;
  --ds-dur-3: 280ms;
  --ds-dur-4: 400ms;

  /* Focus ring */
  --ds-ring: 0 0 0 3px rgba(229,0,126,0.22);

  /* Layout */
  --ds-sidebar-w: 240px;
  --ds-topbar-h:  64px;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-base);
  color: var(--ds-ink-2);
  background: var(--ds-canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ds-ink-1); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: var(--ds-fs-3xl); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--ds-fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: var(--ds-fs-xl); font-weight: 700; }
h4 { font-size: var(--ds-fs-lg); font-weight: 700; }
h5 { font-size: var(--ds-fs-md); font-weight: 700; }
p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
input, button, textarea, select { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }
img, svg { display: block; max-width: 100%; }
code, pre, .ds-mono { font-family: var(--ds-font-mono); }

/* ─── UTILITIES ─── */
.ds-flex        { display: flex; }
.ds-inline-flex { display: inline-flex; }
.ds-items-center { align-items: center; }
.ds-items-start  { align-items: flex-start; }
.ds-items-end    { align-items: flex-end; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-center  { justify-content: center; }
.ds-justify-end     { justify-content: flex-end; }
.ds-gap-1 { gap: var(--ds-s-1); }
.ds-gap-2 { gap: var(--ds-s-2); }
.ds-gap-3 { gap: var(--ds-s-3); }
.ds-gap-4 { gap: var(--ds-s-4); }
.ds-gap-6 { gap: var(--ds-s-6); }
.ds-wrap  { flex-wrap: wrap; }
.ds-grow  { flex: 1; min-width: 0; }
.ds-shrink-0 { flex-shrink: 0; }

.ds-grid { display: grid; }
.ds-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ds-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ds-cols-4 { grid-template-columns: repeat(4, 1fr); }

.ds-text-center { text-align: center; }
.ds-text-end    { text-align: end; }
.ds-text-xs   { font-size: var(--ds-fs-xs); }
.ds-text-sm   { font-size: var(--ds-fs-sm); }
.ds-text-md   { font-size: var(--ds-fs-md); }
.ds-text-lg   { font-size: var(--ds-fs-lg); }

.ds-ink-1 { color: var(--ds-ink-1); }
.ds-ink-2 { color: var(--ds-ink-2); }
.ds-ink-3 { color: var(--ds-ink-3); }
.ds-ink-4 { color: var(--ds-ink-4); }
.ds-brand { color: var(--ds-brand); }
.ds-ok    { color: var(--ds-ok); }
.ds-warn  { color: var(--ds-warn); }
.ds-danger{ color: var(--ds-danger); }

.ds-fw-600 { font-weight: 600; }
.ds-fw-700 { font-weight: 700; }
.ds-fw-800 { font-weight: 800; }

.ds-num   { font-variant-numeric: tabular-nums; }
.ds-nowrap { white-space: nowrap; }
.ds-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ds-hidden { display: none !important; }
.ds-only-mobile { display: none; }
@media (max-width: 760px) {
  .ds-only-mobile { display: revert; }
  .ds-not-mobile  { display: none !important; }
}

/* ─── BASE COMPONENTS ─── */

/* Card */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-sh-2);
  padding: var(--ds-s-5);
}
.ds-card-flat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-4);
}
.ds-card-dark {
  background: linear-gradient(180deg, var(--ds-dark-3) 0%, var(--ds-dark-2) 100%);
  color: white;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ds-r-xl);
  padding: var(--ds-s-5);
}

/* Section header */
.ds-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-s-3);
  margin-bottom: var(--ds-s-4);
}
.ds-section-title {
  font-size: var(--ds-fs-md); font-weight: 800; color: var(--ds-ink-1);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--ds-s-2);
}
.ds-section-sub {
  font-size: var(--ds-fs-sm); color: var(--ds-ink-4);
  margin-top: 2px;
}

/* Buttons */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--ds-r-md);
  font-size: var(--ds-fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform var(--ds-dur-1) var(--ds-ease),
              box-shadow var(--ds-dur-2) var(--ds-ease),
              background var(--ds-dur-2) var(--ds-ease),
              border-color var(--ds-dur-2) var(--ds-ease);
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ds-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.ds-btn-primary {
  background: linear-gradient(135deg, var(--ds-brand) 0%, var(--ds-brand-700) 100%);
  color: white;
  box-shadow: var(--ds-sh-pink);
}
.ds-btn-primary:hover { filter: brightness(1.05); }

.ds-btn-dark {
  background: linear-gradient(135deg, var(--ds-dark-3) 0%, var(--ds-dark-1) 100%);
  color: white;
}
.ds-btn-dark:hover { filter: brightness(1.1); }

.ds-btn-secondary {
  background: var(--ds-surface);
  border-color: var(--ds-border);
  color: var(--ds-ink-2);
  box-shadow: var(--ds-sh-1);
}
.ds-btn-secondary:hover { border-color: var(--ds-border-strong); background: var(--ds-surface-2); }

.ds-btn-ghost {
  background: transparent; color: var(--ds-ink-3);
}
.ds-btn-ghost:hover { background: var(--ds-surface-3); color: var(--ds-ink-1); }

.ds-btn-danger {
  background: var(--ds-danger); color: white;
}
.ds-btn-danger:hover { filter: brightness(1.05); }

.ds-btn-icon {
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--ds-r-md);
  color: var(--ds-ink-3);
  background: transparent; border: 1px solid var(--ds-border);
}
.ds-btn-icon:hover { background: var(--ds-surface-3); color: var(--ds-ink-1); }

.ds-btn-sm { padding: 6px 12px; font-size: var(--ds-fs-xs); }
.ds-btn-lg { padding: 12px 22px; font-size: var(--ds-fs-md); border-radius: var(--ds-r-lg); }

/* Chip / Badge */
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-xs); font-weight: 700;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-3); color: var(--ds-ink-3);
  white-space: nowrap;
}
.ds-chip-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.ds-chip-brand   { background: var(--ds-brand-50);  color: var(--ds-brand-700);  border-color: var(--ds-brand-200); }
.ds-chip-ok      { background: var(--ds-ok-bg);     color: #15803d;              border-color: var(--ds-ok-border); }
.ds-chip-warn    { background: var(--ds-warn-bg);   color: #92400e;              border-color: var(--ds-warn-border); }
.ds-chip-danger  { background: var(--ds-danger-bg); color: #991b1b;              border-color: var(--ds-danger-border); }
.ds-chip-info    { background: var(--ds-info-bg);   color: #1d4ed8;              border-color: var(--ds-info-border); }
.ds-chip-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ds-brand); box-shadow: 0 0 6px var(--ds-brand);
  animation: ds-pulse 1.8s infinite;
}
@keyframes ds-pulse { 0%,100% {opacity:1;} 50% {opacity:0.4;} }

/* Input */
.ds-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-size: var(--ds-fs-sm);
  color: var(--ds-ink-1);
  transition: border-color var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2) var(--ds-ease);
}
.ds-input:focus { outline: none; border-color: var(--ds-brand); box-shadow: var(--ds-ring); }
.ds-input::placeholder { color: var(--ds-ink-5); }
.ds-label {
  display: block;
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  color: var(--ds-ink-3);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

/* Table */
.ds-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--ds-fs-sm);
}
.ds-table th, .ds-table td {
  padding: 10px 14px; text-align: start;
  border-bottom: 1px solid var(--ds-border);
}
.ds-table th {
  font-weight: 700; color: var(--ds-ink-4);
  font-size: var(--ds-fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--ds-surface-2);
  position: sticky; top: 0;
}
.ds-table tbody tr:hover { background: var(--ds-surface-2); }
.ds-table tbody tr:last-child td { border-bottom: 0; }

/* Flag pill (small country flag chip) */
.ds-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 16px; border-radius: 3px;
  font-size: 0.64rem; font-weight: 800;
  background: var(--ds-surface-3); color: var(--ds-ink-3);
  border: 1px solid var(--ds-border);
}

/* Avatar */
.ds-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ds-fs-xs); font-weight: 700;
  background: var(--ds-surface-3); color: var(--ds-ink-3);
  border: 1px solid var(--ds-border);
}
.ds-avatar-brand { background: var(--ds-brand-100); color: var(--ds-brand-700); border-color: var(--ds-brand-200); }
.ds-avatar-sm { width: 24px; height: 24px; font-size: 0.68rem; }
.ds-avatar-lg { width: 44px; height: 44px; font-size: var(--ds-fs-sm); }

/* Dividers */
.ds-hr { border: 0; border-top: 1px solid var(--ds-border); margin: var(--ds-s-4) 0; }
.ds-hr-dashed { border: 0; border-top: 1px dashed var(--ds-border); margin: var(--ds-s-4) 0; }

/* KPI card with color strip */
.ds-kpi {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-xl);
  padding: var(--ds-s-4) var(--ds-s-5);
  position: relative; overflow: hidden;
  transition: transform var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2) var(--ds-ease);
}
.ds-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ds-kpi-accent, var(--ds-brand));
}
.ds-kpi:hover { transform: translateY(-1px); box-shadow: var(--ds-sh-3); }
.ds-kpi-label { font-size: var(--ds-fs-xs); color: var(--ds-ink-4); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.ds-kpi-value { font-size: var(--ds-fs-2xl); font-weight: 800; color: var(--ds-ink-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ds-kpi-delta { font-size: var(--ds-fs-xs); margin-top: 4px; color: var(--ds-ink-4); }
.ds-kpi-delta.up { color: var(--ds-ok); }
.ds-kpi-delta.down { color: var(--ds-danger); }
.ds-kpi-accent-red    { --ds-kpi-accent: var(--ds-danger); }
.ds-kpi-accent-orange { --ds-kpi-accent: #ea580c; }
.ds-kpi-accent-violet { --ds-kpi-accent: var(--ds-violet); }
.ds-kpi-accent-blue   { --ds-kpi-accent: var(--ds-info); }
.ds-kpi-accent-green  { --ds-kpi-accent: var(--ds-ok); }
.ds-kpi-accent-pink   { --ds-kpi-accent: var(--ds-brand); }

/* Stat bar (small inline) */
.ds-stat {
  display: inline-flex; flex-direction: column; gap: 2px;
}
.ds-stat-label { font-size: var(--ds-fs-xs); color: var(--ds-ink-4); font-weight: 600; }
.ds-stat-value { font-size: var(--ds-fs-md); font-weight: 800; color: var(--ds-ink-1); font-variant-numeric: tabular-nums; }

/* Progress bar */
.ds-bar {
  height: 6px; background: var(--ds-surface-3);
  border-radius: var(--ds-r-pill); overflow: hidden;
}
.ds-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--ds-brand), var(--ds-brand-700));
  border-radius: inherit;
  transition: width var(--ds-dur-4) var(--ds-ease);
}

/* Skeleton shimmer */
.ds-skel {
  background: linear-gradient(90deg, var(--ds-surface-3) 0%, var(--ds-border) 50%, var(--ds-surface-3) 100%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.4s infinite;
  border-radius: var(--ds-r-sm);
}
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.ds-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--ds-border);
  border-top-color: var(--ds-brand);
  animation: ds-spin 0.8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Toast / Alert strip */
.ds-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--ds-r-lg);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  font-size: var(--ds-fs-sm);
  box-shadow: var(--ds-sh-1);
}
.ds-alert-icon { flex-shrink: 0; color: var(--ds-ink-3); }
.ds-alert-body { flex: 1; color: var(--ds-ink-2); }
.ds-alert-ok     { background: var(--ds-ok-bg);     border-color: var(--ds-ok-border);     color: #15803d; }
.ds-alert-warn   { background: var(--ds-warn-bg);   border-color: var(--ds-warn-border);   color: #92400e; }
.ds-alert-danger { background: var(--ds-danger-bg); border-color: var(--ds-danger-border); color: #991b1b; }
.ds-alert-brand  { background: var(--ds-brand-50);  border-color: var(--ds-brand-200);     color: var(--ds-brand-700); }

/* ─── FOCUS & ACCESSIBILITY ─── */
:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; border-radius: var(--ds-r-xs); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── SCROLLBAR (subtle) ─── */
.ds-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ds-scroll::-webkit-scrollbar-track { background: transparent; }
.ds-scroll::-webkit-scrollbar-thumb { background: var(--ds-border-strong); border-radius: var(--ds-r-pill); }
.ds-scroll::-webkit-scrollbar-thumb:hover { background: var(--ds-ink-5); }

/* ─── RTL / LTR helpers ─── */
[dir="rtl"] .ds-rtl-flip { transform: scaleX(-1); }