/* ==========================================================================
   Cart Management Design System
   --------------------------------------------------------------------------
   This stylesheet is the foundation for the new Cart Management UI design
   system. It is additive only: it does not modify, override, or remove
   anything defined in site.css, and it must not change current UI behavior
   until pages are explicitly migrated to use these classes.
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   -------------------------------------------------------------------------
   CSS custom properties (colors, spacing, radii, shadows, typography scale,
   z-index, transitions) that back every other section in this file.

   Naming convention: --ds-<category>-<name>[-<variant>]
   "ds" (design system) prefix keeps these tokens namespaced and safely
   co-existing with any variables already defined in site.css.
   No component styles are defined here — tokens only.
   ========================================================================== */

:root {
  /* --- Typography -------------------------------------------------------- */
  --ds-font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Text color ---------------------------------------------------------
     Applies to text content: headings, body copy, labels, form values. */
  --ds-color-text-primary: #111111;
  --ds-color-text-secondary: #757575;
  --ds-color-text-placeholder: #8D8D8D;
  --ds-color-text-inverse: #FFFFFF; /* text on dark/black surfaces, e.g. table header */

  /* --- Surface color --------------------------------------------------------
     Applies to backgrounds of containers such as cards, panels, and pages. */
  --ds-color-surface-primary: #FFFFFF;
  --ds-color-surface-secondary: #F5F5F5;
  --ds-color-surface-page: #F8F8F8;
  --ds-color-surface-disabled: #E5E5E5;
  --ds-color-surface-app: #F5F5F5; /* default app/page background, per app-wide surface styling */

  /* --- Border color -------------------------------------------------------- */
  --ds-color-border-default: #E5E5E5;

  /* --- Neutral palette --------------------------------------------------------
     Neutral color scale for backgrounds, borders, and semantic-neutral
     components. Neutral/200 corresponds to Figma's Neutral/200 and is used
     for table headers, dividers, and other neutral-emphasis surfaces. */
  --ds-color-neutral-200: #D3D3D3;

  /* --- Interactive state color ----------------------------------------------
     Applies to focus rings, active/pressed states, and similar affordances
     across interactive elements (buttons, inputs, links, controls). */
  --ds-color-interactive-focus: #111111;
  --ds-color-interactive-active: #000000;

  /* --- Feedback color ---------------------------------------------------
     Single source of truth for semantic feedback/status colors (error,
     success, warning, info) used across form validation, status
     indicators, and any other feedback-related component. */
  --ds-color-feedback-error: #EB001B;
  --ds-color-feedback-success: #1CB35E;
  --ds-color-feedback-warning: #FABB05;
  --ds-color-feedback-info: #0070E0;
  --ds-color-feedback-neutral: #757575; /* same value as --ds-color-text-secondary */

  /* Error state shades, derived from --ds-color-feedback-error (#EB001B):
     hover/active = channel-multiply darken (×0.85 / ×0.70); disabled-bg =
     15% color mixed into 85% white; disabled-text = 50/50 mix of the
     error color with mid-gray, for a muted-but-legible tone. */
  --ds-color-feedback-error-hover: #C80017;
  --ds-color-feedback-error-active: #A50013;
  --ds-color-feedback-error-disabled-bg: #FCD9DD;
  --ds-color-feedback-error-disabled-text: #BC4754;

  /* Background tints for Status, derived using the same 15%-color/85%-white
     mix as --ds-color-feedback-error-disabled-bg. Danger reuses that
     existing token directly instead of duplicating the same value. */
  --ds-color-feedback-neutral-bg: #EAEAEA;
  --ds-color-feedback-info-bg: #D9EAFA;
  --ds-color-feedback-success-bg: #DDF4E7;
  --ds-color-feedback-warning-bg: #FEF5DA;

  /* --ds-color-feedback-warning (#FABB05) measures ~1.6:1 contrast against
     --ds-color-feedback-warning-bg — well under WCAG AA's 4.5:1 minimum
     for text. This is a darkened (×0.55 channel multiply) foreground
     variant for use as Status text/border only; ~4.8:1 against the tint. */
  --ds-color-feedback-warning-foreground: #8A6703;

  /* Accessible foreground shades for Status text, derived the same way as
     --ds-color-feedback-warning-foreground above (a ×0.55 channel-multiply
     darken of the variant's base feedback token) so every Status text
     color meets WCAG AA (4.5:1) against its light background tint.
     Backgrounds and borders are unchanged. Danger reuses the existing
     --ds-color-feedback-error-active button shade instead of deriving a
     new value, since it already clears AA (~6.2:1) — avoids duplicating
     the red family with another hex. */
  --ds-color-feedback-info-foreground: #003E7B;    /* ×0.55 of #0070E0; ~8.7:1 on info-bg */
  --ds-color-feedback-success-foreground: #0F6234; /* ×0.55 of #1CB35E; ~6.5:1 on success-bg */
  --ds-color-feedback-neutral-foreground: #404040; /* ×0.55 of #757575; ~8.6:1 on neutral-bg */
  --ds-color-feedback-error-foreground: var(--ds-color-feedback-error-active); /* ~6.2:1 on error-bg */

  /* Status border shades — each is a 50/50 mix (per channel) of the
     variant's existing border color with white, so the border reads
     softer/lighter than the (unchanged) text color it used to match,
     while staying in the same hue family. Source color per variant is
     whatever that variant's Status border already resolved to: the base
     feedback token for Neutral/Info/Success, --ds-color-feedback-warning-
     foreground for Warning (since the raw warning token isn't used as
     Status border/text — see the contrast note above), and
     --ds-color-feedback-error for Danger. Text and background tokens are
     unrelated to these and are unchanged. */
  --ds-color-feedback-neutral-border: #BABABA;   /* 50% of #757575 + white */
  --ds-color-feedback-info-border: #80B8F0;      /* 50% of #0070E0 + white */
  --ds-color-feedback-success-border: #8ED9AE;   /* 50% of #1CB35E + white */
  --ds-color-feedback-warning-border: #C4B381;   /* 50% of #8A6703 + white */
  --ds-color-feedback-error-border: #F5808D;     /* 50% of #EB001B + white */

  /* --- Avatar palette -----------------------------------------------------
     Soft, Nike-inspired background/foreground pairs used for the client
     avatar fallback (initials) in cart-list.js. Assignment is deterministic
     (hash of the client id, not random) — see getAvatarColors() there.
     These same values are also duplicated in site.css, since cart-list.js
     is shared with the live app and design-system.css isn't loaded there;
     this block is the canonical/documented definition. */
  --ds-avatar-red-bg: #FDE8E8;
  --ds-avatar-red-fg: #B91C1C;
  --ds-avatar-orange-bg: #FFE8D6;
  --ds-avatar-orange-fg: #B45309;
  --ds-avatar-gold-bg: #FEF6D8;
  --ds-avatar-gold-fg: #856404;
  --ds-avatar-green-bg: #E3F2E1;
  --ds-avatar-green-fg: #1B5E20;
  --ds-avatar-blue-bg: #DCEEF9;
  --ds-avatar-blue-fg: #0B4F73;
  --ds-avatar-indigo-bg: #E6E6FA;
  --ds-avatar-indigo-fg: #4B3F72;
  --ds-avatar-magenta-bg: #F3E5F5;
  --ds-avatar-magenta-fg: #6A1B6E;
  --ds-avatar-neutral-bg: #ECECEC;
  --ds-avatar-neutral-fg: #333333;

  /* --- Control sizing -------------------------------------------------------
     Shared dimensions for form controls and other interactive elements,
     so buttons, inputs, and selects line up consistently. */
  --ds-control-height-md: 40px;
  --ds-control-checkbox-size: 20px;
  --ds-control-width-standard: 200px; /* standard width for a single filter
    dropdown/input (Status, Sort Date, Page Size, ...) on filter rows that
    have few controls and shouldn't stretch to fill the card */
  --ds-control-width-compact: 130px; /* equal width for 3+ same-tier dropdown
    filters sharing a row with a 340px search field + actions (e.g. Dashboard's
    Order Status / ASN Status / Sort Date) - --ds-control-width-standard (200px)
    is sized for rows with only 1-2 such controls and overflows/wraps the row
    once 3 are present at normal desktop widths. 130px sits within the same
    range Leads' own filter fields naturally fall into (~128-149px). */
  --ds-table-header-height: 44px; /* Table header height (Figma spec) */

  /* --- Radius ---------------------------------------------------------------
     Single default radius token for now; extend with -sm/-lg variants
     later if the design system needs more granularity. */
  --ds-radius-default: 4px;
  --ds-radius-table-header: 8px; /* Table header top-corner radius (Figma spec) */

  /* --- Spacing ----------------------------------------------------------
     Base 4px spacing scale. Use these instead of hard-coded pixel values
     for margin, padding, and gap throughout the application. */
  --ds-space-1: 4px;   /* 1x */
  --ds-space-2: 8px;   /* 2x */
  --ds-space-3: 12px;  /* 3x */
  --ds-space-4: 16px;  /* 4x */
  --ds-space-5: 20px;  /* 5x */
  --ds-space-6: 24px;  /* 6x */
  --ds-space-8: 32px;  /* 8x */
  --ds-space-10: 40px; /* 10x */
  --ds-space-12: 48px; /* 12x */
  --ds-space-16: 64px; /* 16x */

  /* --- Header layout ---------------------------------------------------------
     The global header's own horizontal safe area. Deliberately separate from
     page content spacing (e.g. <main class="container">'s own padding, or
     .ds-page-actions/.ds-filter-row): the header is global navigation and
     must stay visually stable on its own terms even as individual pages'
     content widths/containers evolve independently. 60px doesn't fall on the
     base-4 --ds-space-* scale, so it's its own named token rather than
     force-fitting a generic spacing step. */
  --ds-header-padding-x: 60px; /* Desktop horizontal header padding */
}

/* ==========================================================================
   Dark Theme Design Tokens
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
  /* --- Text color --------------------------------------------------------- */
  --ds-color-text-primary: #F5F5F5;
  --ds-color-text-secondary: #A0A0A0;
  --ds-color-text-placeholder: #707070;
  --ds-color-text-inverse: #111111;

  /* --- Surface color -------------------------------------------------------- */
  --ds-color-surface-primary: #1E1E1E;
  --ds-color-surface-secondary: #282828;
  --ds-color-surface-page: #121212;
  --ds-color-surface-disabled: #2C2C2C;
  --ds-color-surface-app: #121212;

  /* --- Border color -------------------------------------------------------- */
  --ds-color-border-default: #333333;

  /* --- Neutral palette -------------------------------------------------------- */
  --ds-color-neutral-200: #2A2A2A;

  /* --- Interactive state color ---------------------------------------------- */
  --ds-color-interactive-focus: #FFFFFF;
  --ds-color-interactive-active: #EEEEEE;

  /* --- Feedback color --------------------------------------------------- */
  --ds-color-feedback-error: #FF4D4F;
  --ds-color-feedback-success: #22C55E;
  --ds-color-feedback-warning: #F59E0B;
  --ds-color-feedback-info: #3B82F6;
  --ds-color-feedback-neutral: #9CA3AF;

  --ds-color-feedback-error-hover: #FF7875;
  --ds-color-feedback-error-active: #D9363E;
  --ds-color-feedback-error-disabled-bg: #3A1D20;
  --ds-color-feedback-error-disabled-text: #E57373;

  --ds-color-feedback-neutral-bg: #262626;
  --ds-color-feedback-info-bg: #13273D;
  --ds-color-feedback-success-bg: #143321;
  --ds-color-feedback-warning-bg: #382B12;

  --ds-color-feedback-warning-foreground: #FCD34D;
  --ds-color-feedback-info-foreground: #93C5FD;
  --ds-color-feedback-success-foreground: #86EFAC;
  --ds-color-feedback-neutral-foreground: #D1D5DB;
  --ds-color-feedback-error-foreground: #FCA5A5;

  --ds-color-feedback-neutral-border: #4B5563;
  --ds-color-feedback-info-border: #1E40AF;
  --ds-color-feedback-success-border: #166534;
  --ds-color-feedback-warning-border: #854D0E;
  --ds-color-feedback-error-border: #991B1B;

  /* --- Avatar palette ----------------------------------------------------- */
  --ds-avatar-red-bg: #451A1A;
  --ds-avatar-red-fg: #FCA5A5;
  --ds-avatar-orange-bg: #452615;
  --ds-avatar-orange-fg: #FDBA74;
  --ds-avatar-gold-bg: #423214;
  --ds-avatar-gold-fg: #FDE047;
  --ds-avatar-green-bg: #14381E;
  --ds-avatar-green-fg: #86EFAC;
  --ds-avatar-blue-bg: #172E47;
  --ds-avatar-blue-fg: #93C5FD;
  --ds-avatar-indigo-bg: #272147;
  --ds-avatar-indigo-fg: #C4B5FD;
  --ds-avatar-magenta-bg: #3D1842;
  --ds-avatar-magenta-fg: #F0ABFC;
  --ds-avatar-neutral-bg: #333333;
  --ds-avatar-neutral-fg: #E5E7EB;
}


/* ==========================================================================
   2. Typography
   -------------------------------------------------------------------------
   Headings, body text, labels, captions, and font utility classes.

   Utility classes only — no global element styles (body, h1-h6, p, etc.)
   are set here, so existing application typography is unaffected until a
   page opts in by applying one of these classes explicitly.

   Font family and text color come from the Design Tokens section above.
   Font size, weight, and line height are not yet tokenized, so they are
   set directly per class per the defined type scale below.

   margin: 0 is applied so these classes behave predictably regardless of
   which element they're placed on (e.g. <h2 class="ds-heading-2">),
   without inheriting browser default heading/paragraph margins.
   ========================================================================== */

.ds-heading-1,
.ds-heading-2,
.ds-heading-3,
.ds-heading-4,
.ds-body,
.ds-body-small,
.ds-label,
.ds-caption,
.ds-section-subtitle {
  margin: 0;
  font-family: var(--ds-font-family-base);
}

/* Heading 1 — 32px / 500 / 40px line-height */
.ds-heading-1 {
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  color: var(--ds-color-text-primary);
}

/* Heading 2 — 24px / 500 / 32px line-height */
.ds-heading-2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: var(--ds-color-text-primary);
}

/* Heading 3 — 20px / 500 / 28px line-height */
.ds-heading-3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ds-color-text-primary);
}

/* Heading 4 — 16px / 500 / 24px line-height */
.ds-heading-4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ds-color-text-primary);
}

/* Body — 16px / 400 / 24px line-height */
.ds-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ds-color-text-primary);
}

/* Body Small — 14px / 400 / 20px line-height */
.ds-body-small {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ds-color-text-secondary);
}

/* Label — 14px / 500 / 20px line-height */
.ds-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ds-color-text-primary);
  margin-bottom: var(--ds-space-1); /* 4px */
}

/* Caption — 12px / 400 / 16px line-height */
.ds-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ds-color-text-secondary);
}

/* Section Subtitle — 18px / 600 / 24px line-height (Orders section title) */
.ds-section-subtitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ds-color-text-primary);
}


/* ==========================================================================
   3. Buttons
   -------------------------------------------------------------------------
   Primary, secondary, tertiary, icon, and destructive button variants,
   plus sizing and state modifiers (hover, active, disabled, loading).

   Values that already exist as Design Tokens (font family, radius,
   spacing/gap/sizing that matches a token value, and colors matching a
   token) are reused via var(...). Values with no matching token (hover/
   active shades, danger palette, small text sizes not yet tokenized) are
   set directly, matching the same approach used in the Typography section.

   Only the exact state/property changes specified are applied per
   variant — e.g. if a hover state only specifies a background change,
   the border is left as inherited from the default state rather than
   guessing a new value.
   ========================================================================== */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--ds-space-2); /* 8px icon/text gap */
  border-style: solid;
  border-width: 1px;
  border-radius: var(--ds-radius-default);
  font-family: var(--ds-font-family-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease, box-shadow 150ms ease;
}

/* Global icon standard: every icon inside every .ds-btn renders at exactly
   16x16, regardless of button size (sm/md/xl). Previously sized per step
   (16/24/32px) - consolidated into one canonical rule per icon type so
   there's a single source of truth instead of three overrides to keep in
   sync. Covers <svg>/<img> icons directly via width/height. */
.ds-btn svg,
.ds-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Bootstrap Icon font-icons (<i class="bi …">) size via font-size, not
   width/height, so the rule above doesn't reach them. font-size alone
   isn't enough either: the icon would inherit the button's line-height
   (20px for sm/md, 24px for xl) rather than matching its own font-size,
   so its layout box wouldn't match its painted glyph and it'd have no
   independent centering - it'd just ride along with whatever the button's
   line box happened to do. line-height: 1 removes that inherited
   line-height, and the explicit 16x16 box + flex centering gives the icon
   its own guaranteed, exact box instead of an approximate one, regardless
   of font metrics. font-size is still needed (Bootstrap Icons paint via
   content on ::before, sized by it). Not scoped to any one page - any
   .ds-btn built with a Bootstrap Icon gets correctly-sized, correctly
   centered icons automatically. */
.ds-btn i.bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* --- Sizes --------------------------------------------------------------- */

.ds-btn--sm {
  height: var(--ds-space-8); /* 32px */
  padding: 0 var(--ds-space-4); /* 16px */
  font-size: 14px;
  line-height: 20px;
}

.ds-btn--md {
  height: var(--ds-control-height-md); /* 40px */
  padding: 0 var(--ds-space-4); /* 16px */
  font-size: 14px;
  line-height: 20px;
}

/* XL — added for login.html's primary CONTINUE action (no --lg/--xl size
   previously existed; --sm and --md were the only steps). Continues the
   same scale: height/padding/icon-size all step up to the next spacing
   token, font-size/line-height step up to the Body typography figures
   (16px/24px) rather than reusing sm/md's 14px/20px, matching how a
   larger button reads a larger label. It's a shared component addition,
   not a login-specific style — anywhere a primary XL action is needed
   can reuse it the same way. */
.ds-btn--xl {
  height: var(--ds-space-12); /* 48px */
  padding: 0 var(--ds-space-6); /* 24px */
  font-size: 16px;
  line-height: 24px;
}

/* Pill — fully-rounded shape modifier, combine with any .ds-btn size
   (sm/md/xl) the same way .ds-btn--icon-only does. 999px is larger than
   any button's height, so the corners always render as a true semicircle
   at both ends regardless of size, rather than hardcoding a height-
   specific radius per size step. First used by login.html's primary
   "Enter" action (.ds-btn--primary.ds-btn--xl.ds-btn--pill) — a shared
   component addition, not a login-specific style, so any future button
   that needs the fully-rounded shape can reuse it the same way. */
.ds-btn--pill {
  border-radius: 999px;
}

/* Icon Only — combine with .ds-btn--sm or .ds-btn--md, no extra
   horizontal padding, square dimensions matching the button height. */
.ds-btn--icon-only.ds-btn--sm {
  width: var(--ds-space-8); /* 32px */
  padding: 0;
}

.ds-btn--icon-only.ds-btn--md {
  width: var(--ds-control-height-md); /* 40px */
  padding: 0;
}

/* --- Primary --------------------------------------------------------------
   Default background/border/focus reuse --ds-color-text-primary and
   --ds-color-interactive-* tokens, which already carry these exact values. */

.ds-btn--primary {
  background-color: var(--ds-color-text-primary); /* #111111 */
  border-color: var(--ds-color-text-primary);
  color: var(--ds-color-surface-primary); /* #FFFFFF */
}

.ds-btn--primary:hover {
  background-color: #333333;
  border-color: #333333;
}

.ds-btn--primary:active {
  background-color: var(--ds-color-interactive-active); /* #000000 */
  border-color: var(--ds-color-interactive-active);
}

.ds-btn--primary:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

.ds-btn--primary:disabled {
  background-color: var(--ds-color-border-default); /* #E5E5E5 */
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-placeholder); /* #8D8D8D */
  cursor: not-allowed;
}

/* --- Secondary ------------------------------------------------------------ */

.ds-btn--secondary {
  background-color: var(--ds-color-surface-primary); /* #FFFFFF */
  border-color: #D8D8D8;
  color: var(--ds-color-text-primary);
}

.ds-btn--secondary:hover {
  background-color: var(--ds-color-surface-secondary); /* #F5F5F5 */
}

.ds-btn--secondary:active {
  background-color: #EDEDED;
  border-color: #CFCFCF;
}

.ds-btn--secondary:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

.ds-btn--secondary:disabled {
  background-color: var(--ds-color-surface-primary); /* #FFFFFF */
  border-color: var(--ds-color-border-default); /* #E5E5E5 */
  color: #B3B3B3;
  cursor: not-allowed;
}

/* --- Ghost ------------------------------------------------------------ */

.ds-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--ds-color-text-primary);
}

.ds-btn--ghost:hover {
  background-color: var(--ds-color-surface-secondary); /* #F5F5F5 */
}

.ds-btn--ghost:active {
  background-color: #EDEDED;
}

.ds-btn--ghost:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

.ds-btn--ghost:disabled {
  background-color: transparent;
  color: #B3B3B3; /* same disabled text value as Secondary */
  cursor: not-allowed;
}

/* --- Danger ------------------------------------------------------------ */

.ds-btn--danger {
  background-color: var(--ds-color-feedback-error);
  border-color: var(--ds-color-feedback-error);
  color: var(--ds-color-surface-primary); /* #FFFFFF */
}

.ds-btn--danger:hover {
  background-color: var(--ds-color-feedback-error-hover);
}

.ds-btn--danger:active {
  background-color: var(--ds-color-feedback-error-active);
}

.ds-btn--danger:focus-visible {
  outline: 2px solid var(--ds-color-feedback-error);
  outline-offset: 2px;
}

.ds-btn--danger:disabled {
  background-color: var(--ds-color-feedback-error-disabled-bg);
  border-color: var(--ds-color-feedback-error-disabled-bg);
  color: var(--ds-color-feedback-error-disabled-text);
  cursor: not-allowed;
}

/* --- Loading ------------------------------------------------------------
   pointer-events: none prevents hover/active states from being triggered
   by the mouse (satisfying "disable hover and active while loading")
   without touching focus, which keyboard users can still reach.
   color: transparent hides the label without removing it from layout,
   so the button keeps its original text-driven width.

   Assumption: spinner markup/class (.ds-btn__spinner) is not part of the
   requested class list, so only its size/position are defined here.
   The spin animation below applies only to .ds-btn__spinner — the "no
   transform animations" rule in General applies to button hover/active
   interactions, not the loading spinner. */
.ds-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.ds-btn.is-loading .ds-btn__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--ds-space-6); /* 24px */
  height: var(--ds-space-6);
  animation: ds-btn-spin 800ms linear infinite;
}

@keyframes ds-btn-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* --- Action Button --------------------------------------------------------
   Compact icon-only button for table actions and similar UI-dense contexts.
   Use .ds-action-button with .ds-btn--md and .ds-btn--icon-only base classes.
   
   Supports any Bootstrap Icon via class on nested <i> or <svg> element.
   Each action button must have an aria-label for accessibility.
   
   Multiple action buttons can coexist in a single Actions cell.
   
   Example markup:
    <button class="ds-btn ds-btn--md ds-btn--icon-only ds-action-button" 
            aria-label="View">
      <i class="bi bi-eye-fill"></i>
    </button>
*/

.ds-action-button {
  background-color: var(--ds-color-surface-primary);    /* #FFFFFF */
  border-color: var(--ds-color-border-default);         /* #E5E5E5 */
  color: var(--ds-color-text-secondary);                /* #757575 */
  text-decoration: none;                                /* remove link underline */
}

.ds-action-button:hover {
  background-color: var(--ds-color-surface-secondary);  /* #F5F5F5 */
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-secondary);
}

.ds-action-button:active {
  background-color: var(--ds-color-border-default);     /* #E5E5E5 */
  border-color: #CFCFCF;
  color: var(--ds-color-text-secondary);
}

.ds-action-button:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus); /* #111111 */
  outline-offset: 2px;
}

.ds-action-button:disabled {
  background-color: var(--ds-color-surface-disabled);   /* #E5E5E5 */
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Action Button Group — container for multiple action buttons in a cell.
   Applies flex layout and consistent spacing between action buttons. */

.ds-action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-2); /* 8px between action buttons */
}


/* ==========================================================================
   Navigation Links
   -------------------------------------------------------------------------
   Not one of the file's original 9 numbered sections, so it's placed here
   with Buttons above rather than renumbering anything that follows.

   A reusable pattern for a plain-text navigation/back link (icon + text,
   no button chrome or hover background) with a short, discreet animated
   underline on hover instead - distinct from .ds-btn--ghost, which still
   reads as a button (background tint on hover). First used by
   order-detail-design.html's "← Back" control; reusable for any future
   back/navigation link that shouldn't look like a button.
   ========================================================================== */
.ds-link-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2); /* 8px icon/text gap, same as .ds-btn */
  position: relative;
  width: fit-content;
  white-space: nowrap; /* multi-word labels (e.g. "Back to Cart") must stay
    on one line, same as the original single-word "Back" always has */
  color: var(--ds-color-text-primary);
  text-decoration: none;
  font-family: var(--ds-font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Pinned explicitly on every state (not just the base rule): the browser's
   default UA stylesheet colors <a> blue and, on this page, Bootstrap's own
   `a{color:...}` / `a:hover` rules use the same specificity as a single
   class selector, so an unvisited/visited/hovered/focused link can end up
   reading Bootstrap's/the browser's blue instead of this one token unless
   every state is set explicitly here. */
.ds-link-back,
.ds-link-back:hover,
.ds-link-back:focus,
.ds-link-back:active,
.ds-link-back:visited {
  color: var(--ds-color-text-primary);
}

.ds-link-back i.bi {
  font-size: 16px; /* same step as .ds-btn--sm i.bi */
}

.ds-link-back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background-color: currentColor;
  transition: right 150ms ease;
}

.ds-link-back:hover::after {
  right: 0;
}

/* Mouse-click focus shows no ring (matches every other DS interactive
   element); keyboard focus gets the same black outline as
   .ds-btn--secondary:focus-visible via :focus-visible below. */
.ds-link-back:focus {
  outline: none;
}

.ds-link-back:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ==========================================================================
   4. Forms
   -------------------------------------------------------------------------
   Inputs, selects, textareas, checkboxes, radios, labels, help text,
   and validation/error states.

   Error and success colors consume the --ds-color-feedback-* tokens
   (Design Tokens section). The "slightly darker" hover border (#CCCCCC)
   has no matching token and was confirmed with you directly.

   States are implemented with native pseudo-classes (:hover, :focus-visible,
   :disabled, :read-only, :invalid) so they apply automatically to real
   form elements. :invalid and [aria-invalid="true"] are both supported for
   Invalid, so non-native/server-side validation can also opt in.
   Required has no distinct visual spec, so no styling is added for it
   beyond the native :required hook already available on the element.
   ========================================================================== */

/* --- Shared field base (Input, Textarea, Select) -------------------------
   "Same visual language as Input" (Textarea) and "same height and styling
   as Input" (Select) are implemented by sharing this base rule rather than
   duplicating values. */
.ds-input,
.ds-textarea,
.ds-select {
  box-sizing: border-box;
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3); /* 8px vertical, 12px horizontal */
  font-family: var(--ds-font-family-base);
  font-size: 14px;
  line-height: 20px;
  color: var(--ds-color-text-primary);
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-default);
  transition: border-color 150ms ease, background-color 150ms ease,
    color 150ms ease, box-shadow 150ms ease;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--ds-color-text-placeholder);
}

.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover {
  border-color: #CCCCCC;
}

.ds-input:focus-visible,
.ds-textarea:focus-visible,
.ds-select:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

/* Read Only: same visual appearance as enabled, default cursor, no focus
   ring. Not applicable to <select>, which has no native readonly state. */
.ds-input:read-only,
.ds-textarea:read-only {
  cursor: default;
}

.ds-input:read-only:focus-visible,
.ds-textarea:read-only:focus-visible {
  outline: none;
}

.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled {
  background-color: var(--ds-color-surface-disabled);
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-placeholder);
  cursor: not-allowed;
}

.ds-input:user-invalid,
.ds-textarea:user-invalid,
.ds-select:user-invalid,
.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"],
.ds-select[aria-invalid="true"] {
  border-color: var(--ds-color-feedback-error);
}

.ds-input:user-invalid:focus-visible,
.ds-textarea:user-invalid:focus-visible,
.ds-select:user-invalid:focus-visible,
.ds-input[aria-invalid="true"]:focus-visible,
.ds-textarea[aria-invalid="true"]:focus-visible,
.ds-select[aria-invalid="true"]:focus-visible {
  outline-color: var(--ds-color-feedback-error);
}

/* --- Input sizes -----------------------------------------------------------
   Apply alongside .ds-select for "same height and styling as Input".
   Height-only, same as --sm/--md — font-size/padding stay fixed at the
   .ds-input base's 14px across every size, so --lg doesn't deviate from
   that established pattern the way button sizes (which do scale font-size
   per step) do. --lg continues the height scale's step from --md (40px)
   the same distance --md stepped from --sm (8px), landing on --ds-space-12
   (48px) — also matching .ds-btn--xl's height, so a --lg input and an
   --xl button placed together (e.g. a login form) line up. */
.ds-input--sm {
  height: var(--ds-space-8); /* 32px */
}

.ds-input--md {
  height: var(--ds-control-height-md); /* 40px */
}

.ds-input--lg {
  height: var(--ds-space-12); /* 48px */
}

/* --- Textarea ---------------------------------------------------------
   Vertical resize only; height is intentionally not fixed via the Input
   size tokens since a textarea's height is user-adjustable. */
.ds-textarea {
  resize: vertical;
}

/* --- Select -------------------------------------------------------------
   appearance is left at its browser default (not set to none) so the
   native dropdown arrow is retained, per spec. */

/* --- Checkbox ------------------------------------------------------------ */
.ds-checkbox {
  position: relative;
  box-sizing: border-box;
  width: var(--ds-control-checkbox-size); /* 20px */
  height: var(--ds-control-checkbox-size);
  margin: 0;
  appearance: none;
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-default);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease,
    box-shadow 150ms ease;
}

.ds-checkbox:checked {
  background-color: var(--ds-color-text-primary);
  border-color: var(--ds-color-text-primary);
}

/* Checkmark glyph: classic border-rotate technique, a static transform
   (not an animation), consistent with the spinner's centering transform. */
.ds-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--ds-color-surface-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ds-checkbox:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

.ds-checkbox:disabled {
  background-color: var(--ds-color-surface-disabled);
  border-color: var(--ds-color-border-default);
  cursor: not-allowed;
}

.ds-checkbox:user-invalid,
.ds-checkbox[aria-invalid="true"] {
  border-color: var(--ds-color-feedback-error);
}

/* --- Radio ------------------------------------------------------------
   Same states/tokens as Checkbox; shape (circular) and the checked
   indicator (center dot vs. checkmark) differ, since those are inherent
   to what a radio input conventionally is, not a behavioral difference. */
.ds-radio {
  position: relative;
  box-sizing: border-box;
  width: var(--ds-control-checkbox-size); /* 20px */
  height: var(--ds-control-checkbox-size);
  margin: 0;
  appearance: none;
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease,
    box-shadow 150ms ease;
}

.ds-radio:checked {
  border-color: var(--ds-color-text-primary);
}

.ds-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--ds-color-text-primary);
  transform: translate(-50%, -50%);
}

.ds-radio:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

.ds-radio:disabled {
  background-color: var(--ds-color-surface-disabled);
  border-color: var(--ds-color-border-default);
  cursor: not-allowed;
}

.ds-radio:user-invalid,
.ds-radio[aria-invalid="true"] {
  border-color: var(--ds-color-feedback-error);
}

/* --- Bootstrap form-check-input Radio Override --------
   When using Bootstrap's .form-check-input with type="radio",
   override the default blue checked state to use Nike black
   (--ds-color-text-primary) for consistency with the Nike design system.
   Applied portal-wide to all radio buttons using form-check structure.
   No new colour hardcoding — reuses existing Nike primary token. */
.form-check-input[type=radio]:checked {
  background-color: var(--ds-color-text-primary); /* Nike black #111111 */
  border-color: var(--ds-color-text-primary);
}

/* --- Label ------------------------------------------------------------
   Reuses the .ds-label typography rule from section 2 (font, 500 weight,
   text-primary color, spacing) as-is. */

/* Required — appends an asterisk after label text. */
.ds-label--required::after {
  content: "*";
  margin-left: var(--ds-space-1); /* 4px */
  color: var(--ds-color-feedback-error);
}

/* --- Helper Text ------------------------------------------------------ */
.ds-helper-text {
  display: block;
  margin-top: var(--ds-space-1); /* 4px */
  font-family: var(--ds-font-family-base);
  font-size: 12px;
  line-height: 16px;
  color: var(--ds-color-text-secondary);
}

/* --- Validation Message -------------------------------------------------
   Base class carries shared typography; semantic modifiers carry color. */
.ds-validation-message {
  display: block;
  margin-top: var(--ds-space-1); /* 4px */
  font-family: var(--ds-font-family-base);
  font-size: 12px;
  line-height: 16px;
}

.ds-validation-message--error {
  color: var(--ds-color-feedback-error);
}

.ds-validation-message--success {
  color: var(--ds-color-feedback-success);
}

/* --- Bootstrap-native Form Controls -------------------------------------
   The Design System pages (dashboard-design.html, leads-design.html, and
   any future *-design page) use Bootstrap's native .form-label/.form-control/
   .form-select classes directly in markup rather than .ds-label/.ds-input
   above. This block is the single shared source of truth for their label
   styling, scoped here — not in site.css — so it only ever applies to pages
   that load design-system.css, never to the live application. font-weight
   is set explicitly (Regular/400) to override site.css's site-wide 500,
   which still governs live pages unchanged. */
.form-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--ds-color-text-secondary);
  margin-bottom: var(--ds-space-2); /* 8px */
}


/* ==========================================================================
   5. Status
   -------------------------------------------------------------------------
   Badges, tags, alerts, and status indicators (success, warning, error,
   info, neutral).

   Read-only informational component — no hover/active/focus/disabled/
   loading states. Each variant uses a light background tint (a
   --ds-color-feedback-*-bg token) with a darker "-foreground" token
   (Design Tokens section) for text and the dedicated "-border" token
   for border, per your direction to derive these from the same
   tokens/pattern used elsewhere.

   Accessibility: every variant's raw base feedback token (e.g.
   --ds-color-feedback-info, --ds-color-feedback-success) measured under
   4:1 contrast on its own -bg tint — well under WCAG AA's 4.5:1 minimum
   for text. Status text now uses each variant's "-foreground" token
   instead (Neutral ~8.6:1, Info ~8.7:1, Success ~6.5:1, Warning ~4.8:1,
   Danger ~6.2:1 — see Design Tokens section for derivation). Background
   tints are unchanged.

   Border color for every variant below uses the dedicated *-border token
   (Design Tokens section) — a 50%-lighter-toward-white derivative of the
   variant's base/foreground color, so the border stays in the same
   semantic color family while reading softer than the (now-accessible)
   text. Background and border tokens are unchanged by this update.
   ========================================================================== */

.ds-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ds-space-6); /* 24px */
  padding: 0 var(--ds-space-2); /* 8px */
  border: 1px solid transparent;
  border-radius: 2px; /* explicit per spec — no existing --ds-radius-* token matches 2px */
  font-family: var(--ds-font-family-base);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.ds-status--neutral {
  background-color: var(--ds-color-feedback-neutral-bg);
  border-color: var(--ds-color-feedback-neutral-border);
  color: var(--ds-color-feedback-neutral-foreground);
}

.ds-status--info {
  background-color: var(--ds-color-feedback-info-bg);
  border-color: var(--ds-color-feedback-info-border);
  color: var(--ds-color-feedback-info-foreground);
}

.ds-status--success {
  background-color: var(--ds-color-feedback-success-bg);
  border-color: var(--ds-color-feedback-success-border);
  color: var(--ds-color-feedback-success-foreground);
}

.ds-status--warning {
  background-color: var(--ds-color-feedback-warning-bg);
  border-color: var(--ds-color-feedback-warning-border);
  color: var(--ds-color-feedback-warning-foreground);
}

.ds-status--danger {
  background-color: var(--ds-color-feedback-error-disabled-bg);
  border-color: var(--ds-color-feedback-error-border);
  color: var(--ds-color-feedback-error-foreground);
}

/* Soft variant — new visual family featuring borderless pill-shaped badges.
   The Soft variant uses the same Feedback background/foreground tokens as the
   default variant, but with rounded pill shape (border-radius: 999px) and no
   border. All five semantic colors (neutral, info, success, warning, danger)
   are available as Soft variants alongside the default bordered variant. */

.ds-status.ds-variant--soft {
  border: none;
  border-radius: 999px;
}


/* ==========================================================================
   6. Cards
   -------------------------------------------------------------------------
   Card containers, headers, bodies, footers, and card-level elevation
   and spacing variants.

   Base component only — no raised/hover/selected/clickable/loading
   variants. No new tokens were needed. Header typography reuses the
   existing Heading 4 figures (16px / 500 / 24px) rather than introducing
   new numbers, since text placed in the header should read as a title.
   ========================================================================== */

.ds-card {
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-default);
  overflow: hidden;
  font-family: var(--ds-font-family-base);
}

.ds-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-4); /* 16px */
  background-color: var(--ds-color-surface-primary);
  border-bottom: 1px solid var(--ds-color-border-default);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ds-color-text-primary);
}

.ds-card__body {
  padding: var(--ds-space-4); /* 16px */
  background-color: var(--ds-color-surface-primary);
}

.ds-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-2); /* 8px */
  padding: var(--ds-space-4); /* 16px */
  background-color: var(--ds-color-surface-primary);
  border-top: 1px solid var(--ds-color-border-default);
}


/* ==========================================================================
   7. Tables
   -------------------------------------------------------------------------
   Table structure, headers, rows, cells, sorting indicators, and
   responsive/table utility variants.

   No new tokens were needed — surface, border, text, spacing, and font
   tokens from Design Tokens already cover this component. Header/body
   font-size and line-height match the same 12/16 (Caption) and 14/20
   (Body Small) figures already established in Typography. Cell padding
   is 12px vertical / 16px horizontal (--ds-space-3 / --ds-space-4),
   giving a row height of ~45–48px depending on cell content.

   This section does not touch site.css. See the end-of-task report for
   existing .table rules in site.css that may conflict once .ds-table is
   applied to real screens.
   ========================================================================== */

.ds-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--ds-color-surface-primary);
  font-family: var(--ds-font-family-base);
}

.ds-table thead {
  background-color: var(--ds-color-surface-page);
}

.ds-table th {
  padding: var(--ds-space-3) var(--ds-space-4); /* 12px vertical, 16px horizontal */
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--ds-color-text-secondary);
  border-bottom: 1px solid var(--ds-color-border-default);
}

.ds-table td {
  padding: var(--ds-space-3) var(--ds-space-4); /* 12px vertical, 16px horizontal */
  vertical-align: middle;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ds-color-text-primary);
  border-bottom: 1px solid var(--ds-color-border-default);
}

.ds-table tbody tr {
  background-color: var(--ds-color-surface-primary);
  transition: background-color 150ms ease;
}

.ds-table tbody tr:hover {
  background-color: var(--ds-color-surface-secondary);
}

/* --- Bootstrap-native Tables ----------------------------------------------
   The Design System pages use Bootstrap's native .table markup directly
   (see leads-design.html) rather than .ds-table above. This block is the
   single shared source of truth for their table styling, scoped here — not
   in site.css — so it only ever applies to pages that load design-system.css,
   never to the live application. !important is used to reliably beat
   Bootstrap's own table defaults and site.css's site-wide .table rules
   (uppercase, bold, gray header text), matching the existing pattern used
   elsewhere in this file (e.g. #dashboard-header .text-white). The border
   system and row/hover styling are intentionally left untouched. */
.table thead th {
  padding-left: var(--ds-space-6) !important; /* 24px */
  padding-right: var(--ds-space-6) !important; /* 24px */
  height: var(--ds-table-header-height) !important; /* 44px */
  vertical-align: middle !important;
  font-size: 14px !important;
  font-weight: 600 !important; /* Semibold, per Figma */
  letter-spacing: normal !important; /* Match Figma: no additional tracking */
  text-transform: none !important;
  color: var(--ds-color-text-primary) !important; /* #111111 */
  background-color: var(--ds-color-neutral-200) !important; /* #D3D3D3 — Figma Neutral/200 */
  border-bottom: none !important; /* Remove separator line between header and first data row */
}

/* Apply border-radius only to the exterior corners of the table header.
   Interior cells and bottom corners have no radius per Figma spec. */
.table thead th:first-child {
  border-top-left-radius: var(--ds-radius-table-header) !important;
}

.table thead th:last-child {
  border-top-right-radius: var(--ds-radius-table-header) !important;
}

.table tbody td {
  padding-left: var(--ds-space-6) !important; /* 24px */
  padding-right: var(--ds-space-6) !important; /* 24px */
  font-size: 14px !important;
}

/* Responsive Table Layout
   =========================================================================
   
   Problem: table-layout: fixed without min-widths forces unconstrained
   columns (e.g., Cart ID) to collapse. Content breaks character-by-character.
   
   Solution: Use table-layout: auto with semantic column classes for
   min-width and text-wrapping control. Table scrolls horizontally when
   min-width exceeded, keeping content readable and within the component.
   
   Per-table modifiers (e.g., ds-table--orders) define the table's
   minimum width threshold based on its column complexity.
*/

.table {
  width: 100% !important;
  table-layout: auto !important;     /* Allow content-driven column sizing */
}

.table th,
.table td {
  overflow-wrap: break-word;         /* Fallback for very long content */
  /* Removed: word-break: break-word (was too aggressive, causing mid-character breaks) */
}

/* Semantic Column Classes — Reusable across all tables
   =========================================================================
   These classes define min-width and text-wrapping behavior per column type.
   Apply to <th> and <td> elements as needed.
*/

/* Client/Name: Flexible column that truncates when content is long.
   Primary flexible column for Users. Can grow/shrink to protect Actions.
   Elements inside use .ds-table-truncate for individual truncation.
   Width: Reduced minimum 150px to allow flexibility at 1116px container. */
.ds-table-col--client {
  min-width: 0;
  max-width: 250px;
  overflow-wrap: break-word;
}

/* ID/UUID: Flexible truncatable column. Never break mid-character (single line).
   Secondary flexible column alongside Client. Can grow/shrink with constraints.
   Content inside uses .ds-table-truncate to enforce ellipsis.
   Width: ~300px for 36-char UUIDs with margin for ellipsis */
.ds-table-col--id {
  min-width: 0;
  max-width: 180px;
  white-space: nowrap;
  font-size: 0.95em;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status: Badge or short status text (single line, compact) */
.ds-table-col--status {
  min-width: 100px;
  white-space: nowrap;
  text-align: center;
}

/* Date/Time: Intentional multi-line format (e.g., date + time on separate lines).
   white-space is "normal" (not pre-wrap): the 2-line layout already comes from
   two separate <div> block children (see cart-list.js), so line breaks don't
   depend on literal "\n" characters. pre-wrap previously preserved the
   indentation whitespace/newlines between those <div>s - an artifact of the
   JS template literal's own pretty-printed formatting, not real content - as
   extra visible blank lines, which was inflating row height well past 68px. */
.ds-table-col--datetime {
  min-width: 140px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
}

/* Header cells in datetime columns must not wrap */
th.ds-table-col--datetime {
  white-space: nowrap;
}

/* Numeric: Right-aligned, no wrapping (e.g., Items, Quantity) */
.ds-table-col--number {
  min-width: 80px;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums; /* Align columns of numbers */
}

/* Currency: Right-aligned, may be multi-line (e.g., amount + currency code).
   white-space: normal for the same reason as .ds-table-col--datetime above -
   the 2 lines come from 2 <div> children, not literal newlines. */
.ds-table-col--currency {
  min-width: 110px;
  white-space: normal;
  text-align: right;
  line-height: 1.4;
}

/* Actions: Buttons or icons (single line, centered) */
.ds-table-col--actions {
  min-width: 100px;
  white-space: nowrap;
  text-align: right;
}

/* Truncated Content: Single-line content with ellipsis for overflow.
   Reusable pattern for table cells with long text that should not wrap
   (IDs, emails, long names, etc.). Shows ellipsis when content exceeds space.
   
   CSS Properties:
   - display: block: Force width constraint enforcement
   - width: 100%: Fill parent container
   - min-width: 0: Allow shrinking below container min-width (deprecated, using display: block now)
   - overflow: hidden: Clip overflowing content
   - text-overflow: ellipsis: Show ... when clipped
   - white-space: nowrap: Single line only
   
   Usage: Apply to text element inside a td with defined width constraint.
   The parent td (e.g., .ds-table-col--id with max-width: 300px) provides the width boundary.
*/
.ds-table-truncate {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #carts-list is now the real <tbody> of a real <table> (restored in index.html
   to match dashboard-design.html / commit cd86c1c). "display: table-row" is now
   redundant (that's a <tr>'s native default) but kept as explicit documentation.
   height: 68px is the target row height per Figma; a <tr>'s height is only a
   minimum in table layout, so it's only actually honored once cell padding
   leaves enough room for the tallest stacked 2-line cell content (Created,
   Expires, Total) to fit - see the horizontal-only td padding below. */
#carts-list tr {
  display: table-row;
  height: 68px;
}

/* Horizontal-only padding: vertical centering is handled by vertical-align:
   middle within the 68px row, not by vertical padding. The previous
   padding: 24px 24px (all four sides) consumed 48px of vertical space alone,
   forcing rows with 2-line cell content (Created/Expires date+time, Total's
   two currency lines) to balloon past 68px to avoid clipping that content. */
#carts-list td {
  padding: 0 var(--ds-space-6); /* 24px horizontal, per Figma spec */
  vertical-align: middle;
}

/* Ensure paragraph elements in table cells don't inflate row height
   mb-0 removes bottom margin, but we also need to control line-height */
td p.mb-0 {
  line-height: 1.2;
  margin: 0;
}


/* Per-table Modifiers — Define table-level min-width based on column complexity
   =========================================================================
   Each table with complex layout gets a modifier to set its minimum threshold.
*/

/* Users Management: 7 columns (User ID, Name, Email, Role, Created At, Last Modified, Actions)
   Min-width = sum of colgroup widths = 1100px
   User ID (180px) + Name (180px) + Email (200px) + Role (120px) + Created At (150px) + Last Modified (150px) + Actions (120px) */
.table.ds-table--orders {
  min-width: 1050px;
}

/* Catalog Products: 6 columns (Image, Name, Style/Color, Size, UPC, Actions)
   Min-width = sum of column minimums ~= 900px
   Image (80px) + Name (200px) + Style/Color (180px) + Size (100px) + UPC (140px) + Actions (120px) */
.table.ds-table--products {
  min-width: 900px;
}

/* Clients Management: 5 columns (Avatar, Name, Organization, Contact Info, Actions) */
.table.ds-table--clients {
  width: 100% !important;
}


/* Products table column sizing */
.ds-table-col--image {
  min-width: 50px;
  max-width: 50px;
  text-align: left;
}

.ds-table-col--avatar {
  min-width: 50px;
  max-width: 50px;
  text-align: left;
  padding-right: 0;
}

.ds-table-col--name {
  min-width: 200px;
  max-width: 300px;
  white-space: normal;
  overflow-wrap: break-word;
}

.ds-table-col--metadata {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.ds-table-col--upc {
  min-width: 140px;
  white-space: nowrap;
  font-size: 0.95em;
}

.ds-table-col--size {
  min-width: 80px;
  white-space: nowrap;
  text-align: center;
}

/* Products table row styling (same as Orders) */
#products-list tr {
  display: table-row;
  height: 68px;
}

#products-list td {
  padding: 0 var(--ds-space-6); /* 24px horizontal, per Figma spec */
  vertical-align: middle;
}

/* Clients table row styling (same as Orders/Products) */
#clients-list tr {
  display: table-row;
  height: 68px;
}

#clients-list td {
  padding: 0 var(--ds-space-6); /* 24px horizontal, per Figma spec */
  vertical-align: middle;
}

/* Users table row styling */
#users-list tr {
 display: table-row;
 height: 68px;
}

#users-list td {
 padding: 0 var(--ds-space-6); /* 24px horizontal, per Figma spec */
 vertical-align: middle;
}

@media (max-width: 1023px) {
  /* Tablet: Reduce padding, maintain min-widths and single-line enforcement */
  .table th,
  .table td {
    padding-left: 12px !important;  /* was 24px */
    padding-right: 12px !important; /* was 24px */
    font-size: 13px;                /* was 14px */
  }
}

@media (max-width: 767px) {
  /* Mobile: Minimal padding, small font, maintain column minimums */
  .table th,
  .table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px;
  }
}

/* Badges and Status Indicators — Ensure no unwanted text wrapping */
.badge {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


/* ==========================================================================
   Pagination
   -------------------------------------------------------------------------
   Not one of the file's original 9 numbered sections, so it's placed here,
   between Tables and Utilities, without renumbering anything that follows.

   Previous/Next/First/Last controls and ellipsis all reuse
   .ds-pagination__item as-is — no separate visual style or class for them,
   per spec. If an icon is used inside an item, size it with
   .ds-pagination__item svg / img below (16px, via --ds-space-4); Bootstrap
   Icon font-icons (<i class="bi …">) instead use the i.bi rule further
   below, per the same 16px step (see the leads-design.html Actions column
   note under Tables/Utilities for why font-icons need a separate rule).

   Screen implementation (leads/orders/catalog/clients/cart tables' actual
   Previous/Next controls): those pages keep their existing Bootstrap
   <nav><ul class="pagination"><li class="page-item"> structure and ids
   as-is — required because two pages' JS (client-management.js,
   product-catalog.js) toggle the disabled look via
   `#next-page.parentElement.classList.toggle('disabled', …)`, i.e. on the
   <li>, not the button — so the structure can't be flattened to a bare
   .ds-pagination wrapper without also editing that JS. Three small classes
   below bridge that existing structure to these tokens without a new
   pagination-specific visual style:
     .ds-pagination-list  — on the existing <ul class="pagination">, adds
                             the gap between items (Bootstrap's .pagination
                             sets display:flex already; only gap is missing).
     .ds-pagination__info — the "Page X of Y (N total)" text (a
                             non-interactive <span>, so it deliberately
                             doesn't use .ds-pagination__item's
                             button-like hover/pointer/border treatment).
     .ds-pagination-nav   — replaces the nav's Bootstrap .mt-5 (48px, not a
                             DS token) with a DS spacing token for a
                             tighter, table-connected gap.
   .ds-pagination__item's disabled rule below also matches
   .page-item.disabled .ds-pagination__item, so both disable mechanisms in
   use (native `disabled` in cart-list.js/orders.js/lead-management.js, and
   the `<li>`-class toggle in client-management.js/product-catalog.js)
   render the same accessible disabled look — CSS only, no JS touched.
   ========================================================================== */

.ds-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2); /* 8px */
}

/* Gap-only bridge for the existing Bootstrap <ul class="pagination"> — see
   note above. Doesn't touch `display` so it can't conflict with Bootstrap's
   own display:flex on .pagination (which the justify-content-center
   centering on these pages already depends on). */
.ds-pagination-list {
  gap: var(--ds-space-2); /* 8px */
  align-items: center;
}

/* Screen-implementation gap before the pagination row, replacing Bootstrap's
   .mt-5 (48px) with a DS token for a tighter, "connected to the table"
   spacing per spec. */
.ds-pagination-nav {
  margin-top: var(--ds-space-4); /* 16px */
}

/* "Page X of Y (N total)" — secondary, de-emphasized text so pagination
   never competes with the table. Same 14px/Regular/secondary-color
   treatment as .ds-body-small (Typography section), restated here as its
   own class since this text sits inside a page that doesn't always load
   the rest of the Typography section's classes via the same markup path
   as the pagination controls. ~4.6:1 on white / ~4.2:1 on the app's gray
   background (--ds-color-surface-app) — --ds-color-text-secondary is the
   Design System's one existing secondary-text token (already used
   everywhere else "secondary" text is called for, e.g. .ds-body-small,
   .ds-helper-text), so reusing it here keeps pagination consistent with
   the rest of the app rather than introducing a pagination-only gray. */
.ds-pagination__info {
  font-family: var(--ds-font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ds-color-text-secondary);
}

.ds-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2); /* 8px between an icon and its label, matching
    the icon+label spacing already used elsewhere (e.g. Search/Add Lead) */
  height: var(--ds-space-8); /* 32px */
  min-width: var(--ds-space-8); /* 32px */
  padding: 0 var(--ds-space-2); /* 8px horizontal */
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-default);
  background-color: var(--ds-color-surface-primary);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease, box-shadow 150ms ease;
}

.ds-pagination__item svg,
.ds-pagination__item img {
  width: var(--ds-space-4); /* 16px */
  height: var(--ds-space-4);
}

/* Bootstrap Icon font-icons (<i class="bi …">) size via font-size, not
   width/height, so the svg/img rule above doesn't reach them — same 16px
   step, and color inherits (currentColor) from .ds-pagination__item /
   its disabled variant automatically. */
.ds-pagination__item i.bi {
  font-size: 16px;
}

.ds-pagination__item:hover {
  background-color: var(--ds-color-surface-secondary);
}

.ds-pagination__item:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

.ds-pagination__item.is-active {
  background-color: var(--ds-color-interactive-active);
  border-color: var(--ds-color-interactive-active);
  color: var(--ds-color-surface-primary);
  font-weight: 500;
  cursor: default;
}

.ds-pagination__item:disabled,
.ds-pagination__item[aria-disabled="true"],
.page-item.disabled .ds-pagination__item {
  background-color: var(--ds-color-surface-disabled);
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-placeholder);
  cursor: not-allowed;
}


/* ==========================================================================
   Dropdown Menus
   -------------------------------------------------------------------------
   Not one of the file's original 9 numbered sections, grouped here with
   Pagination/Modals rather than renumbering anything that follows.

   Targets Bootstrap's own .dropdown-toggle / .dropdown-item classes
   directly (not a new .ds-* component), so every current dropdown — and
   any future one built with Bootstrap's dropdown markup — inherits 14px/
   Regular automatically, no per-page override needed. Exactly two
   dropdowns exist in the app today: the navbar user menu (common.js,
   rendered into #user-nav) and the Users table "Change Role" menu
   (users.js, .ds-role-toggle-btn — its own font-weight fix lives with the
   rest of that component in site.css, since design-system.css isn't
   loaded on the live Users page). Height, width, padding, border-radius,
   colors, icons and behavior are all untouched here — font-size/weight
   only, on the trigger and the items inside the opened menu.

   .dropdown-toggle::after (Bootstrap's caret) sizes itself in em units off
   its own font-size, so shrinking a trigger's text would shrink the caret
   as a side effect. #user-nav's trigger is the one whose font-size
   actually changes because of the rule below (from the inherited ~16px
   default — Change Role's .ds-role-toggle-btn was already 14px, so its
   caret is unaffected either way), so only that caret is re-anchored back
   to 16px, keeping it exactly the size it already was. */
.dropdown-toggle {
  font-size: 14px;
  font-weight: 400;
}

.dropdown-item {
  font-size: 14px;
}

#user-nav .dropdown-toggle::after {
  font-size: 16px; /* caret stays its pre-existing size — see note above */
}

/* The navbar user-menu name (common.js's updateNavbarUser(), rendered into
   #user-nav on every page — including the Design System pilot header's own
   #user-nav, see leads-design.html etc.) uses Bootstrap's .fw-semibold
   utility (font-weight:600 !important). common.js itself isn't edited for
   this — it has its own comment noting it's shared with the live black
   navbar — so the override goes here, scoped to #user-nav only, since
   .fw-semibold is also used unrelated elsewhere (product names, amounts)
   that must stay untouched. This is the same technique already used by
   #dashboard-header .fw-semibold below, just scoped to the element that
   rule doesn't reach on live (non-*-design) pages. */
#user-nav .fw-semibold {
  font-weight: 400 !important;
}


/* ==========================================================================
   Modals / Dialogs
   -------------------------------------------------------------------------
   Also not one of the file's original 9 numbered sections, so it's grouped
   here with Pagination rather than renumbering anything that follows.

   Foundation only: no open/closed state, no animation, no variants
   (size/fullscreen/side-panel/confirmation/danger), no responsive
   adaptation. Markup order matters — .ds-modal__overlay must come before
   .ds-modal__dialog in the DOM so the dialog paints on top of it (both
   are positioned elements with default z-index, so source order decides
   stacking).

   .ds-modal__close intentionally carries no declarations — per spec it
   should reuse existing .ds-btn classes in markup (e.g. .ds-btn
   .ds-btn--ghost .ds-btn--sm .ds-btn--icon-only) rather than getting its
   own visual treatment. It exists here only as a documented, styleable
   hook.
   ========================================================================== */

.ds-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* no z-index token exists yet */
}

.ds-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* no overlay/scrim token exists yet */
}

.ds-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-default);
  overflow: hidden;
}

.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-4); /* 16px */
  background-color: var(--ds-color-surface-primary);
  border-bottom: 1px solid var(--ds-color-border-default);
}

.ds-modal__title {
  margin: 0;
  font-family: var(--ds-font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px; /* matches Heading 4, same treatment as .ds-card__header */
  color: var(--ds-color-text-primary);
}

.ds-modal__body {
  padding: var(--ds-space-4); /* 16px */
  background-color: var(--ds-color-surface-primary);
  color: var(--ds-color-text-primary);
}

.ds-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-space-2); /* 8px */
  padding: var(--ds-space-4); /* 16px */
  background-color: var(--ds-color-surface-primary);
  border-top: 1px solid var(--ds-color-border-default);
}

.ds-modal__close {
  /* No declarations by design — style via existing .ds-btn classes. */
}


/* ==========================================================================
   Modal Panel — shared Bootstrap modal reskin
   -------------------------------------------------------------------------
   Not one of the file's original 9 numbered sections, so it's grouped here
   with Pagination/Modals above rather than renumbering anything that
   follows.

   IMPORTANT: this is a different component from .ds-modal / .ds-modal__*
   directly above. Those classes are an unused, hand-rolled modal
   foundation — no page currently renders that markup. Every real modal in
   the app (#leadModal, #edit-origin-modal, #cropModal, etc.) uses
   Bootstrap's own native .modal/.modal-dialog/.modal-content markup
   instead, so this class targets that markup directly via Bootstrap's own
   --bs-modal-* custom properties (the same override technique #leadModal
   used on its own before this was promoted to a shared class) rather than
   introducing a second modal system.

   Add .ds-modal-panel to a modal's .modal-content element to get the
   shared Design System modal treatment: 24px corner radius (the shared/
   default modal radius — --ds-space-6, so any future change flows from
   one token), no outer border, no header/footer divider line, 24px
   horizontal padding in the header/body/footer, and the shared black
   close icon. First used by #leadModal (leads-design.html) and
   #edit-origin-modal (orders-design.html); any future modal gets the
   same radius automatically by adding this one class, no per-modal
   override needed.
   ========================================================================== */

.ds-modal-panel {
  --bs-modal-border-radius: var(--ds-space-6); /* 24px */
  --bs-modal-inner-border-radius: var(--ds-space-6); /* 24px */
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
  border: none;
}

.ds-modal-panel .modal-header,
.ds-modal-panel .modal-body,
.ds-modal-panel .modal-footer {
  padding-left: 24px;
  padding-right: 24px;
}

.ds-modal-panel .btn-close {
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* Content-section divider — a subtle horizontal rule for separating two
   distinct field groups WITHIN a .ds-modal-panel's body (not the header/
   footer dividers, which stay removed above). Reuses the same border
   color token as every other divider/border in the Design System rather
   than a new color. First used by #edit-origin-modal to separate its
   read-only "Product" section from the "Country of Origin" field. */
.ds-modal-panel__divider {
  border: none;
  border-top: 1px solid var(--ds-color-border-default);
  margin: 0 0 var(--ds-space-4) 0; /* 16px below, matches the mb-3 rhythm of the field group above it */
}


/* ==========================================================================
   8. Utilities
   -------------------------------------------------------------------------
   Layout, spacing, alignment, and visibility helper classes.
   ========================================================================== */

/* Page title — the single heading for a Design System page (dashboard-design.html,
   leads-design.html, and any future *-design page), sitting between the
   shared header and the filter/search card. Spacing-only: compose with a
   heading typography class (e.g. .ds-heading-2) in markup rather than
   duplicating its font values here. */
.ds-page-title {
  margin-top: var(--ds-space-6); /* 24px — Header-to-title spacing from Figma */
  margin-bottom: var(--ds-space-4); /* 16px — title-to-next-content spacing */
  /* Typography is inherited from .ds-heading-2 (used with this class):
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
     font-size: 24px
     font-weight: 500
     line-height: 32px
     color: var(--ds-color-text-primary) [#111111] */
}

/* Page Actions — a page-specific primary/secondary action row (e.g. Dashboard's
   "New Cart") that lives inside the page's own main content container,
   between the shared global header and the page title. Page-specific actions
   must not live inside the global header (#dashboard-header): that keeps the
   header limited to global navigation + account menu, while each page owns
   its own actions. Reusable for any number of actions - rule is "rightmost
   action is primary, everything before it is secondary" (flex + row order
   handles this with no extra markup). Alignment comes from living inside the
   same container as the rest of the page's content (e.g. <main class="container">),
   not from absolute/fixed positioning or a hardcoded offset - its right edge
   naturally matches whatever that container's right edge is. */
.ds-page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ds-space-4); /* 16px between multiple actions */
  margin-top: var(--ds-space-4); /* 16px — header-to-actions spacing */
  margin-bottom: var(--ds-space-2); /* 8px — actions-to-title spacing */
}

/* When .ds-page-actions precedes .ds-page-title, the title's own 24px
   header-to-title margin-top is no longer the relevant gap - that space now
   comes from .ds-page-actions's own 8px margin-bottom above. Zeroing it here
   via an adjacent-sibling selector (rather than lowering .ds-page-title's
   margin-top globally) means only pages that actually place a
   .ds-page-actions block before their title are affected; every other
   .ds-page-title usage keeps its original 24px header-to-title spacing
   untouched. Two adjoining positive margins (8px + 24px) would otherwise
   collapse to their max (24px) per normal CSS margin-collapsing rules,
   silently reintroducing a too-large gap instead of the intended compact
   8px. */
.ds-page-actions + .ds-page-title {
  margin-top: 0;
}

/* Filter grid — a fixed 5-equal-column CSS Grid for filter/search card
   layouts (e.g. leads-design.html: Status / From / To / Page Size / Order).
   Using the same grid definition for a search-field row above it (with
   .ds-filter-grid__span-2) guarantees the search field's edges line up
   exactly with the first two columns below, rather than approximating the
   width with independent, arbitrary column values. Gap reuses the same
   16px token as the existing Bootstrap row g-3 gutter it replaces. */
.ds-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ds-space-4); /* 16px */
}

.ds-filter-grid__span-2 {
  grid-column: span 2;
}

/* Standard-width filter control — for filter rows with few controls that
   should keep an intentional, common width instead of stretching to fill
   the card (contrast with .ds-filter-grid above, which is for rows with
   many controls that should use the full available width). */
.ds-filter-control {
  width: var(--ds-control-width-standard);
  flex: 0 0 auto;
}

/* Search field paired with .ds-filter-control rows — sized to the combined
   footprint of two standard filter controls plus the gap between them,
   rather than spanning the full card width. */
.ds-filter-search {
  width: calc(var(--ds-control-width-standard) * 2 + var(--ds-space-4));
}

/* Single-row filter layout — all controls and buttons in one horizontal row.
   Labels sit above their controls, but the entire label+control group shares
   the same row, with action buttons aligning to the control baseline (not
   label baseline). Used by dashboard-design.html filter bar. Flex layout
   ensures proper spacing and responsiveness. */
.ds-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-space-4); /* 16px */
}

/* Label + control group within .ds-filter-row. The label displays above the
   control; the entire group has a fixed width (except search variant below). */
.ds-filter-group {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  flex-direction: column;
}

.ds-filter-group .form-label {
  margin-bottom: var(--ds-space-2); /* 8px */
}

.ds-filter-group .form-control,
.ds-filter-group .form-select {
  height: var(--ds-control-height-md); /* 40px */
}

/* Search Orders input variant — 340px width for the search field + button.
   The input-group combines the text input with the icon-only search button. */
.ds-filter-group--search {
  width: 340px;
  flex-shrink: 0;
}

/* Standard dropdown variant — fixed, equal width for same-tier select filters
   (e.g. Dashboard's Order Status / ASN Status / Sort Date) so they form a
   regular visual rhythm instead of each auto-sizing to its own label/option
   text width. Uses --ds-control-width-compact (130px) rather than
   --ds-control-width-standard (200px): with 3 equal-width dropdowns plus the
   340px search field and actions sharing one row, 200px each overflows the
   row at normal desktop widths, breaking the single-row layout. */
.ds-filter-group--standard {
  width: var(--ds-control-width-compact); /* 130px */
  flex-shrink: 0;
}

.ds-filter-group--search .input-group {
  display: flex;
  height: var(--ds-control-height-md); /* 40px */
}

.ds-filter-group--search .form-control {
  height: var(--ds-control-height-md); /* 40px */
  flex: 1;
}

.ds-filter-group--search .ds-btn--icon-only {
  height: var(--ds-control-height-md); /* 40px */
  width: var(--ds-control-height-md); /* 40px (square) */
}

/* Flexible spacer — grows to push action buttons to the right in .ds-filter-row */
.ds-filter-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Action buttons container — ensures buttons align at the control baseline.
   Buttons use .ds-btn--md (40px height), and the container aligns flex-end
   to position them at the bottom of the row with controls. */
.ds-filter-actions {
  display: flex;
  gap: var(--ds-space-2); /* 8px between buttons */
  flex: 0 0 auto;
}

.ds-filter-actions .ds-btn {
  flex-shrink: 0;
}

/* Ensure form-control and form-select have 40px height across all contexts
   (not just within .ds-filter-group). This applies the Medium control height
   globally when the Design System is in use. */
.form-control,
.form-select {
  height: var(--ds-control-height-md); /* 40px */
}

/* Section title — a secondary content-area heading below the filter card
   (e.g. orders-design.html's "Orders" heading above the order cards). 48px
   top spacing, same value/token as .ds-page-title's header-to-title
   spacing, kept as its own class since it applies lower on the page. */
.ds-section-title {
  margin-top: var(--ds-space-12); /* 48px */
}


/* ==========================================================================
   9. Page-Specific Styles
   -------------------------------------------------------------------------
   Styles scoped to individual Cart Management pages/views that don't
   belong in a shared component section above.
   ========================================================================== */

/* Shared Design System header — used by index.html (Dashboard), leads.html,
   orders.html, users.html, settings.html, and their -design counterparts.
   Scoped under #dashboard-header so it cannot leak into pages still on the
   legacy navbar.js header (catalog.html, catalog-upload.html, clients.html). */

#dashboard-header {
  background-color: var(--ds-color-surface-primary);
  border-bottom: 1px solid var(--ds-color-border-default);
  min-height: 70px;
  /* Horizontal safe area is intentionally its own token (--ds-header-padding-x),
     not aligned to any individual page's content container (.container,
     #leads-main, .ds-page-actions, etc.) - the global header must stay
     visually stable on its own terms as page content widths evolve
     independently. Narrower/tablet viewports fall back to --ds-space-8 (32px)
     below the existing 1023px breakpoint already used elsewhere in this file
     (see the table responsive rules), avoiding nav-item collisions. */
  padding-left: var(--ds-header-padding-x);
  padding-right: var(--ds-header-padding-x);
  /* This is the OUTER placeholder (every page has <div id="dashboard-header">;
     initHeader() injects the real <header> markup as its single child - see
     header-template.js). Its own display was the block default, so that
     child (naturally ~34px tall, internally already correctly centered via
     the inner <header>'s own "display: grid; align-items: center") just sat
     at the TOP of this element's 70px min-height band via normal block flow,
     instead of being centered within it - the actual visible misalignment
     the brand/nav/user groups were centered on each other, but 18px too high
     relative to the full 70px header band. display: flex + align-items:
     center here centers that single child vertically within the full band,
     without touching the inner header's own layout at all. */
  display: flex;
  align-items: center;
}

/* The inner <header> is a flex item of #dashboard-header now (see above). A
   flex item's main-axis size defaults to its content's width, not 100% of
   the available space the way a plain block-level child would - without
   this, the header (and its 1fr/auto/1fr grid, including the right-aligned
   user group) would shrink to fit its content and stop reaching the true
   right edge, silently breaking the 60px/32px right padding. */
#dashboard-header > header {
  width: 100%;
}

@media (max-width: 1023px) {
  #dashboard-header {
    padding-left: var(--ds-space-8);  /* 32px */
    padding-right: var(--ds-space-8); /* 32px */
  }
}

/* Nav link base typography comes from .ds-body-small (applied directly in
   markup); this only adds the hover/active behavior .ds-body-small itself
   doesn't define. */
#dashboard-header .dashboard-nav-link {
  text-decoration: none;
}

#dashboard-header .dashboard-nav-link:hover {
  color: var(--ds-color-text-primary);
}

/* Design pages that don't exist yet (no corresponding *-design.html file).
   Left non-navigable rather than linking to the live page, per the Design
   System header's routing rules. */
#dashboard-header .dashboard-nav-link.disabled {
  color: var(--ds-color-text-placeholder);
  cursor: not-allowed;
  pointer-events: none;
}

/* dashboard-design.html — "Client: <name>" cart group header. Rendered by
   the shared cart-list.js (also used by the live Dashboard), so it isn't
   edited directly — scoped here under #home-view so only the Design page
   is affected. Hierarchy comes from weight, not color: the "Client:" label
   (the h4's own text/color) is Regular weight + secondary text color; the
   name overrides to primary text color (removing Bootstrap's blue
   .text-primary) with a stronger weight than the label. */
#home-view h4.fw-bold {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--ds-color-text-secondary) !important;
}

#home-view h4.fw-bold .text-primary {
  color: var(--ds-color-text-primary) !important;
  font-weight: 500 !important;
}


#dashboard-header .dashboard-nav-link.is-active {
  color: var(--ds-color-text-primary);
  font-weight: 700;
}

/* common.js's updateNavbarUser() renders the avatar/dropdown toggle and
   theme-toggle button with Bootstrap's .text-white / .border-white
   utilities (both !important), written for the old black header. That
   function is reused as-is (not duplicated) per the task, so it's
   overridden here rather than edited, since it's still used by every
   other page's black header where white text is correct. */
#dashboard-header .text-white {
  color: var(--ds-color-text-primary) !important;
}

#dashboard-header img.border-white {
  border-color: var(--ds-color-border-default) !important;
}

/* updateNavbarUser() (common.js) is shared with the live black navbar, so
   it isn't edited directly — these overrides only apply on the Design
   System header. .fw-semibold is a Bootstrap utility (itself !important),
   so it needs !important here to win. */
#dashboard-header .fw-semibold {
  font-weight: 400 !important;
}

/* Dropdown chevron (Bootstrap's .dropdown-toggle::after caret) — recolor
   to the standard secondary/icon color instead of inheriting the button's
   near-black text color. ID scoping alone gives this enough specificity
   to win, since .dropdown-toggle::after is a component style, not an
   !important utility. */
#dashboard-header .dropdown-toggle::after {
  color: var(--ds-color-text-secondary);
}

/* leads-design.html — page shell width.
   Replaces the Bootstrap `.container` previously used for <main>, which
   capped out at 1320px (xxl) regardless of how wide the browser window
   was. On normal/wide screens that left the 12-column Leads table starved
   for space, forcing narrow header columns (Contact Method, Privacy
   Policy, Status, Created, Contacted, Actions) to break their text
   character-by-character instead of at word boundaries. #leads-main now
   spans (practically) the full window width, with a fixed, consistent
   32px side margin at every breakpoint rather than Bootstrap's stepped
   container gutters. Scoped to the #leads-main id added to this page's
   <main> only, so no other page is affected. */
#leads-main,
#orders-main {
  padding-left: var(--ds-space-8);  /* 32px */
  padding-right: var(--ds-space-8); /* 32px */
}

/* leads-design.html — Leads table minimum width.
   Every <th> below now carries a fixed pixel width (not a percentage) —
   sized to what each column's real content needs (a full phone number, a
   "TransformedToClient" status badge, a full date/time, etc.) rather than
   an even proportional split. table-layout: fixed honors these as a floor:
   columns never shrink below them, and on a wide window they're free to
   grow to fill the extra space instead. Below this width the surrounding
   `.table-responsive` (already in the markup) scrolls horizontally on its
   own via Bootstrap's default overflow-x: auto, so only the table area
   scrolls — never the page. min-width here is the sum of all 12 column
   widths, so the table never needs to compress a single one of them below
   its floor to fit its own box. Scoped to #leads-section so it cannot
   affect any other *-design page's table (e.g. orders-design.html,
   users-design.html) that also loads this shared stylesheet. */
#leads-section .table {
  min-width: 2950px;
}

#orders-section .table {
  min-width: 1270px;
}

/* Sticky first column (Order Number) */
#orders-section .table thead th:first-child {
  position: sticky;
  left: 0;
  background-color: var(--ds-color-neutral-200);
  z-index: 11;
  border-right: 1px solid var(--ds-color-border-default);
}

#orders-section .table tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: var(--ds-color-surface-primary);
  z-index: 10;
  border-right: 1px solid var(--ds-color-border-default);
}

/* Sticky last column (Actions) */
#orders-section .table thead th:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ds-color-neutral-200);
  z-index: 11;
  border-left: 1px solid var(--ds-color-border-default);
}

#orders-section .table tbody td:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ds-color-surface-primary);
  z-index: 10;
  border-left: 1px solid var(--ds-color-border-default);
}

/* Actions column: icon-only buttons styling and right alignment */
#orders-section .table td:last-child {
  padding-left: 0;
  padding-right: 24px !important;
}

#orders-section .table td:last-child .d-flex {
  width: 100%;
  justify-content: flex-end;
}

#orders-section .table td:last-child .ds-btn i.bi {
  font-size: 16px;
}

#orders-section .table th:last-child,
#orders-section .table td:last-child {
  padding-right: 24px !important;
}


/* Users Table: Clean sticky architecture with proper dropdown handling */

/* Sticky first column (User ID) - 200px fixed width */
#users-section .table thead th:first-child {
  position: sticky;
  left: 0;
  background-color: var(--ds-color-neutral-200);
  z-index: 11;
  border-right: 1px solid var(--ds-color-border-default);
  width: 200px;
}

#users-section .table tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: var(--ds-color-surface-primary);
  z-index: 10;
  border-right: 1px solid var(--ds-color-border-default);
  width: 200px;
  min-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sticky last column (Actions) - ensure dropdown can escape overflow */
#users-section .table thead th:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ds-color-neutral-200);
  z-index: 11;
  border-left: 1px solid var(--ds-color-border-default);
  width: 140px;
  min-width: 140px;
}

#users-section .table tbody td:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ds-color-surface-primary);
  z-index: 10;
  border-left: 1px solid var(--ds-color-border-default);
  width: 140px;
  min-width: 140px;
  overflow: visible;
}

/* Dropdown positioning: allow dropdown to render above/outside the Actions cell */
#users-section .table tbody td:last-child .dropdown {
  position: relative;
  pointer-events: auto;
  overflow: visible;
}

#users-section .table tbody td:last-child .dropdown-menu {
  z-index: 1050;
  pointer-events: auto;
}

#users-section .table tbody td:last-child .dropdown-menu .dropdown-item {
  pointer-events: auto;
}

/* Leads wrapper classes for content behaviour */
.ds-table-cell-content {
  /* Base wrapper: respects parent <td> width, no display override */
  /* Individual modifiers control truncation/clamping behaviour */
}

.ds-table-cell-content--clamp-2 {
  /* 2-line clamp for Name column only */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.ds-table-cell-content--clamp-4 {
  /* 4-line clamp for Lead Comment and Agent Comments columns */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.ds-table-cell-content--ellipsis {
  /* Single-line ellipsis truncation for identifiers (Client UUID) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

/* Leads Phone column (col 3): always one line */
#leads-section .table td:nth-child(3) {
  white-space: nowrap;
}

/* Leads Contact Method (col 6): always one line */
#leads-section .table td:nth-child(6) {
  white-space: nowrap;
}

/* Leads Privacy Policy (col 7): always one line */
#leads-section .table td:nth-child(7) {
  white-space: nowrap;
}

/* Leads Status (col 8): always one line */
#leads-section .table td:nth-child(8) {
  white-space: nowrap;
}

/* Leads Created (col 9): always one line */
#leads-section .table td:nth-child(9) {
  white-space: nowrap;
}

/* Sticky first column (Name) */
#leads-section .table thead th:first-child {
  position: sticky;
  left: 0;
  background-color: var(--ds-color-neutral-200);
  z-index: 11;
  border-right: 1px solid var(--ds-color-border-default);
}

#leads-section .table tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: var(--ds-color-surface-primary);
  z-index: 10;
  border-right: 1px solid var(--ds-color-border-default);
}

/* Sticky last column (Actions) */
#leads-section .table thead th:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ds-color-neutral-200);
  z-index: 11;
  border-left: 1px solid var(--ds-color-border-default);
}

#leads-section .table tbody td:last-child {
  position: sticky;
  right: 0;
  background-color: var(--ds-color-surface-primary);
  z-index: 10;
  border-left: 1px solid var(--ds-color-border-default);
}

/* Leads table header: compact line-height for multi-line headers */
#leads-section .table thead th {
  line-height: 1.2;
}

/* Actions column: icon-only buttons styling and right alignment */
#leads-section .table td:last-child {
  padding-left: 0;
  padding-right: 24px !important;
}

#leads-section .table td:last-child .d-flex {
  width: 100%;
  justify-content: flex-end;
}

#leads-section .table td:last-child .ds-btn i.bi {
  font-size: 16px;
}

#leads-section .table th:last-child,
#leads-section .table td:last-child {
  padding-right: 24px !important;
}

/* leads-design.html — Add New Lead modal (#leadModal): 24px horizontal
   padding, 24px radius, no outer border, no header/footer divider, and
   the shared black close icon all now come from .ds-modal-panel (see
   "Modal Panel" above, grouped with Pagination/Modals), applied directly
   to #leadModal's .modal-content in markup instead of being duplicated
   here as id-scoped rules. */

/* leads-design.html — Add New Lead modal: Privacy Policy Accepted checkbox.
   Uses the existing .ds-checkbox component (already defined in Forms above
   but not yet used anywhere in the app) in place of Bootstrap's default
   .form-check-input, so the checked state is Nike black (#111111, via
   --ds-color-text-primary) instead of Bootstrap blue — .ds-checkbox
   already does that natively, no new color rule needed here. Only this
   one checkbox is resized to the spec's 14x14px, so the override targets
   its #lead-privacy-policy id rather than changing
   --ds-control-checkbox-size (which stays 20px, the component's own
   default, for any other future .ds-checkbox use). The checkmark's
   ::after glyph is the same design, proportionally scaled to match
   (14/20 = 0.7×). */
#lead-privacy-policy.ds-checkbox {
  width: 14px !important;
  height: 14px !important;
}

#lead-privacy-policy.ds-checkbox:checked::after {
  top: 1.4px;
  left: 4.2px;
  width: 3.5px;
  height: 7px;
  border-width: 0 1.4px 1.4px 0;
}

/* orders-design.html — Order card item rows: Edit Country of Origin icon.
   Rendered once by orders.js's renderItems() and reused for every item on
   every Order card, so this single class covers all of them automatically
   — no per-card markup. Bootstrap's .btn-link defaults to its link-blue
   color; recolored here to --ds-color-text-secondary, the same token
   already documented as "the standard secondary/icon color" for other
   neutral action icons in this file (see #dashboard-header
   .dropdown-toggle::after above). Bootstrap Icon font-icons (<i class="bi
   …">) size via font-size rather than width/height, so 16px here gives a
   16x16 glyph — the same 16px step already used for .ds-btn--sm icons
   (Buttons section) — even though this button doesn't use the .ds-btn
   classes. Horizontal spacing from the "N/A"/origin text is handled in
   markup via Bootstrap's existing .ms-3 utility (16px, matching
   --ds-space-4) rather than a new spacing rule. */
.edit-origin-btn,
.edit-origin-btn:hover,
.edit-origin-btn:focus {
  color: var(--ds-color-text-secondary);
}

.edit-origin-btn i.bi {
  font-size: 16px;
}

/* settings-design.html — avatar camera control.
   Icon is 26px (a literal spec value, not a token — no --ds-space-* step
   lands on 26). Container is 52px, keeping the same 2x icon-to-container
   ratio (26 * 4 = 104px / 2 = 52px... i.e. container = icon * 2) used at
   the previous 32px/64px sizing, so the padding stays proportional (13px
   per side) rather than arbitrary. Background/icon colors are unchanged —
   still --ds-color-text-primary (#111111) / --ds-color-surface-primary
   (#FFFFFF), the same Nike-black/white tokens used elsewhere (e.g.
   .ds-modal-panel .btn-close above).
   Position: margin: 0 neutralizes the markup's .mb-3/.me-2 utility classes
   (this id selector outranks them), and bottom/right are pushed past
   Bootstrap's .bottom-0/.end-0 zero point by -4px. The avatar wrapper is
   exactly the avatar's 150x150 bounding box (radius 75, center at
   75,75); a plain 0/0 corner pin centers a 52px button at (124,124), ~71px
   from the avatar center — a hair inside the 75px edge. -4px/-4px moves
   the center to ~(128,128), ~75px out, i.e. sitting ON the avatar's
   circular edge, so the button is split roughly 50/50 inside vs. outside
   the avatar instead of sitting mostly inside it. */
#change-avatar-btn {
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ds-color-text-primary);
  border-color: var(--ds-color-text-primary);
  color: var(--ds-color-surface-primary);
  bottom: -4px;
  right: -4px;
}

#change-avatar-btn .bi-camera {
  font-size: 26px;
}

/* Leads Table: Fixed-layout implementation with explicit column widths
   =========================================================================
   Uses table-layout: fixed for deterministic column sizing.
   12 columns with total width of 1320px exceeds 1136px container,
   enabling horizontal scrolling as the design fallback for complex tables.
   
   Long text columns (Name, Email, Phone, Lead Comment, Agent Comments, Client)
   use overflow: hidden + text-overflow: ellipsis + white-space: nowrap via
   .ds-table-truncate span wrapper, with title attribute for full content.
*/

#leads-list tr {
  display: table-row;
  height: 68px;
}

#leads-list td {
  padding: 0 var(--ds-space-6); /* 24px horizontal, per Figma spec */
  vertical-align: middle;
  overflow: hidden;           /* Support truncation in fixed-layout mode */
}

/* Truncation for fixed-layout tables: single-line ellipsis */


/* ==========================================================================
   10. Dark Theme Component Styles & Overrides
   -------------------------------------------------------------------------
   Dark theme refinements ensuring comprehensive contrast, accessibility,
   and visual polish across all views in the Nike Design System.
   ========================================================================== */

/* Theme Toggle Button */
#theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ds-color-text-primary);
  border-radius: 50%;
  transition: background-color 150ms ease, color 150ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle:hover {
  background-color: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--ds-color-interactive-focus);
  outline-offset: 2px;
}

/* Base Body in Dark Mode */
[data-theme="dark"] body,
[data-bs-theme="dark"] body {
  background-color: var(--ds-color-surface-page);
  color: var(--ds-color-text-primary);
}

/* Header & Brand Logo in Dark Mode */
[data-theme="dark"] #dashboard-header,
[data-bs-theme="dark"] #dashboard-header {
  background-color: var(--ds-color-surface-primary);
  border-bottom: 1px solid var(--ds-color-border-default);
}

[data-theme="dark"] #dashboard-header img[src*="swoosh_nike.svg"],
[data-bs-theme="dark"] #dashboard-header img[src*="swoosh_nike.svg"],
[data-theme="dark"] .nike-brand-logo,
[data-bs-theme="dark"] .nike-brand-logo {
  filter: brightness(0) invert(1);
}

/* Buttons in Dark Mode */
[data-theme="dark"] .ds-btn--primary,
[data-bs-theme="dark"] .ds-btn--primary {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #111111;
}

[data-theme="dark"] .ds-btn--primary:hover:not(:disabled),
[data-bs-theme="dark"] .ds-btn--primary:hover:not(:disabled) {
  background-color: #E0E0E0;
  border-color: #E0E0E0;
  color: #111111;
}

[data-theme="dark"] .ds-btn--primary:active:not(:disabled),
[data-bs-theme="dark"] .ds-btn--primary:active:not(:disabled) {
  background-color: #CFCFCF;
  border-color: #CFCFCF;
  color: #111111;
}

[data-theme="dark"] .ds-btn--primary:disabled,
[data-bs-theme="dark"] .ds-btn--primary:disabled {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #111111;
  opacity: 0.4;
}

[data-theme="dark"] .ds-btn--secondary,
[data-bs-theme="dark"] .ds-btn--secondary {
  background-color: var(--ds-color-surface-primary);
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .ds-btn--secondary:hover:not(:disabled),
[data-bs-theme="dark"] .ds-btn--secondary:hover:not(:disabled) {
  background-color: var(--ds-color-surface-secondary);
  border-color: #4A4A4A;
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .ds-btn--secondary:active:not(:disabled),
[data-bs-theme="dark"] .ds-btn--secondary:active:not(:disabled) {
  background-color: #333333;
  border-color: #555555;
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .ds-btn--ghost,
[data-bs-theme="dark"] .ds-btn--ghost {
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .ds-btn--ghost:hover:not(:disabled),
[data-bs-theme="dark"] .ds-btn--ghost:hover:not(:disabled) {
  background-color: var(--ds-color-surface-secondary);
  color: var(--ds-color-text-primary);
}

/* Cards & Panels in Dark Mode */
[data-theme="dark"] .card,
[data-theme="dark"] .ds-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .ds-card {
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .ds-card__header,
[data-theme="dark"] .ds-card__footer,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .ds-card__header,
[data-bs-theme="dark"] .ds-card__footer {
  background-color: var(--ds-color-surface-primary);
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-primary);
}

/* Tables in Dark Mode */
[data-theme="dark"] .table,
[data-theme="dark"] .ds-table,
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .ds-table {
  --bs-table-bg: var(--ds-color-surface-primary);
  --bs-table-color: var(--ds-color-text-primary);
  --bs-table-border-color: var(--ds-color-border-default);
  --bs-table-hover-bg: var(--ds-color-surface-secondary);
  --bs-table-hover-color: var(--ds-color-text-primary);
  background-color: var(--ds-color-surface-primary);
  color: var(--ds-color-text-primary);
  border-color: var(--ds-color-border-default);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .ds-table thead th,
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .ds-table thead th {
  background-color: var(--ds-color-neutral-200) !important;
  color: var(--ds-color-text-primary) !important;
  border-bottom: 1px solid var(--ds-color-border-default) !important;
}

[data-theme="dark"] .table tbody td,
[data-theme="dark"] .ds-table tbody td,
[data-bs-theme="dark"] .table tbody td,
[data-bs-theme="dark"] .ds-table tbody td {
  background-color: var(--ds-color-surface-primary);
  color: var(--ds-color-text-primary);
  border-bottom: 1px solid var(--ds-color-border-default);
}

[data-theme="dark"] .table tbody tr:hover td,
[data-theme="dark"] .ds-table tbody tr:hover td,
[data-bs-theme="dark"] .table tbody tr:hover td,
[data-bs-theme="dark"] .ds-table tbody tr:hover td {
  background-color: var(--ds-color-surface-secondary) !important;
}

/* Sticky Column Handling in Dark Mode */
[data-theme="dark"] #orders-section .table thead th:first-child,
[data-theme="dark"] #orders-section .table thead th:last-child,
[data-theme="dark"] #users-section .table thead th:first-child,
[data-theme="dark"] #users-section .table thead th:last-child,
[data-theme="dark"] #leads-section .table thead th:first-child,
[data-theme="dark"] #leads-section .table thead th:last-child,
[data-bs-theme="dark"] #orders-section .table thead th:first-child,
[data-bs-theme="dark"] #orders-section .table thead th:last-child,
[data-bs-theme="dark"] #users-section .table thead th:first-child,
[data-bs-theme="dark"] #users-section .table thead th:last-child,
[data-bs-theme="dark"] #leads-section .table thead th:first-child,
[data-bs-theme="dark"] #leads-section .table thead th:last-child {
  background-color: var(--ds-color-neutral-200) !important;
}

[data-theme="dark"] #orders-section .table tbody td:first-child,
[data-theme="dark"] #orders-section .table tbody td:last-child,
[data-theme="dark"] #users-section .table tbody td:first-child,
[data-theme="dark"] #users-section .table tbody td:last-child,
[data-theme="dark"] #leads-section .table tbody td:first-child,
[data-theme="dark"] #leads-section .table tbody td:last-child,
[data-bs-theme="dark"] #orders-section .table tbody td:first-child,
[data-bs-theme="dark"] #orders-section .table tbody td:last-child,
[data-bs-theme="dark"] #users-section .table tbody td:first-child,
[data-bs-theme="dark"] #users-section .table tbody td:last-child,
[data-bs-theme="dark"] #leads-section .table tbody td:first-child,
[data-bs-theme="dark"] #leads-section .table tbody td:last-child {
  background-color: var(--ds-color-surface-primary);
}

[data-theme="dark"] #orders-section .table tbody tr:hover td:first-child,
[data-theme="dark"] #orders-section .table tbody tr:hover td:last-child,
[data-theme="dark"] #users-section .table tbody tr:hover td:first-child,
[data-theme="dark"] #users-section .table tbody tr:hover td:last-child,
[data-theme="dark"] #leads-section .table tbody tr:hover td:first-child,
[data-theme="dark"] #leads-section .table tbody tr:hover td:last-child,
[data-bs-theme="dark"] #orders-section .table tbody tr:hover td:first-child,
[data-bs-theme="dark"] #orders-section .table tbody tr:hover td:last-child,
[data-bs-theme="dark"] #users-section .table tbody tr:hover td:first-child,
[data-bs-theme="dark"] #users-section .table tbody tr:hover td:last-child,
[data-bs-theme="dark"] #leads-section .table tbody tr:hover td:first-child,
[data-bs-theme="dark"] #leads-section .table tbody tr:hover td:last-child {
  background-color: var(--ds-color-surface-secondary) !important;
}

/* Form Controls & Inputs in Dark Mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .ds-input,
[data-theme="dark"] .ds-select,
[data-theme="dark"] .ds-textarea,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .ds-input,
[data-bs-theme="dark"] .ds-select,
[data-bs-theme="dark"] .ds-textarea {
  background-color: var(--ds-color-surface-primary);
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .form-control:hover,
[data-theme="dark"] .form-select:hover,
[data-theme="dark"] .ds-input:hover,
[data-theme="dark"] .ds-select:hover,
[data-theme="dark"] .ds-textarea:hover,
[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover,
[data-bs-theme="dark"] .ds-input:hover,
[data-bs-theme="dark"] .ds-select:hover,
[data-bs-theme="dark"] .ds-textarea:hover {
  border-color: #555555;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .ds-input:focus,
[data-theme="dark"] .ds-select:focus,
[data-theme="dark"] .ds-textarea:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .ds-input:focus,
[data-bs-theme="dark"] .ds-select:focus,
[data-bs-theme="dark"] .ds-textarea:focus {
  background-color: var(--ds-color-surface-secondary);
  border-color: var(--ds-color-interactive-focus);
  color: var(--ds-color-text-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-control.bg-light,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control.bg-light {
  background-color: var(--ds-color-surface-secondary) !important;
  color: var(--ds-color-text-secondary) !important;
  border-color: var(--ds-color-border-default) !important;
}

/* Modals & Dropdown Menus in Dark Mode */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .ds-modal-panel,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .ds-modal-panel {
  background-color: var(--ds-color-surface-primary);
  border: 1px solid var(--ds-color-border-default);
  color: var(--ds-color-text-primary);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--ds-color-border-default);
}

[data-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--ds-color-surface-primary) !important;
  border: 1px solid var(--ds-color-border-default) !important;
  color: var(--ds-color-text-primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .dropdown-item {
  color: var(--ds-color-text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--ds-color-surface-secondary) !important;
  color: var(--ds-color-text-primary) !important;
}

[data-theme="dark"] .dropdown-divider,
[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--ds-color-border-default) !important;
}

[data-theme="dark"] .dropdown-header,
[data-bs-theme="dark"] .dropdown-header {
  color: var(--ds-color-text-secondary) !important;
}

[data-theme="dark"] .btn-close,
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) brightness(200%);
}

/* Utility Class Dark Overrides */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--ds-color-surface-primary) !important;
}

[data-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark {
  color: var(--ds-color-text-primary) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
  color: var(--ds-color-text-secondary) !important;
}

[data-theme="dark"] .border,
[data-bs-theme="dark"] .border {
  border-color: var(--ds-color-border-default) !important;
}

[data-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-top {
  border-top-color: var(--ds-color-border-default) !important;
}

[data-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-bottom {
  border-bottom-color: var(--ds-color-border-default) !important;
}

/* Action buttons and icons */
[data-theme="dark"] .edit-nike-btn,
[data-theme="dark"] .remove-item-btn,
[data-theme="dark"] .edit-origin-btn,
[data-bs-theme="dark"] .edit-nike-btn,
[data-bs-theme="dark"] .remove-item-btn,
[data-bs-theme="dark"] .edit-origin-btn {
  background-color: var(--ds-color-surface-primary);
  border-color: var(--ds-color-border-default);
  color: var(--ds-color-text-primary) !important;
}

[data-theme="dark"] .edit-nike-btn:hover,
[data-theme="dark"] .remove-item-btn:hover,
[data-theme="dark"] .edit-origin-btn:hover,
[data-bs-theme="dark"] .edit-nike-btn:hover,
[data-bs-theme="dark"] .remove-item-btn:hover,
[data-bs-theme="dark"] .edit-origin-btn:hover {
  background-color: var(--ds-color-surface-secondary);
  border-color: #555555;
  color: var(--ds-color-text-primary) !important;
}

/* Cart Detail specific actions in dark mode */
[data-theme="dark"] #save-cart-btn:hover:not(:disabled),
[data-bs-theme="dark"] #save-cart-btn:hover:not(:disabled) {
  background-color: #E0E0E0 !important;
  border-color: #E0E0E0 !important;
  color: #111111 !important;
}

/* Alerts in Dark Mode */
[data-theme="dark"] .alert-info,
[data-bs-theme="dark"] .alert-info {
  background-color: var(--ds-color-feedback-info-bg) !important;
  color: var(--ds-color-feedback-info-foreground) !important;
  border-color: var(--ds-color-feedback-info-border) !important;
}

[data-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-danger {
  background-color: var(--ds-color-feedback-error-disabled-bg) !important;
  color: var(--ds-color-feedback-error-foreground) !important;
  border-color: var(--ds-color-feedback-error-border) !important;
}

[data-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-success {
  background-color: var(--ds-color-feedback-success-bg) !important;
  color: var(--ds-color-feedback-success-foreground) !important;
  border-color: var(--ds-color-feedback-success-border) !important;
}

[data-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-warning {
  background-color: var(--ds-color-feedback-warning-bg) !important;
  color: var(--ds-color-feedback-warning-foreground) !important;
  border-color: var(--ds-color-feedback-warning-border) !important;
}