/**
 * ServiJASS — Universal Design System
 * TASK-CONTENT-008 | Phase 1.0.0
 *
 * Token prefix: --ds-*
 * All tokens are intentionally prefixed to avoid collision with Bootstrap
 * and the legacy --primary / --bg / etc. variables already in app.css.
 *
 * Contexts:
 *   - Client UI    → uses --ds-brand-client (#2563EB) as accent
 *   - Platform UI  → uses --ds-brand-platform (#6366f1) as accent
 *
 * Theme Engine will override these tokens at the :root level or on a
 * context element (e.g. [data-ds-theme="dark"]) for tenant theming.
 */

/* ══════════════════════════════════════════════════════════════════
   SECTION 1: COLOR SYSTEM
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand colors (context-specific) ── */
  --ds-brand-client:          #2563EB;
  --ds-brand-client-hover:    #1D4ED8;
  --ds-brand-client-light:    #EFF6FF;
  --ds-brand-platform:        #6366f1;
  --ds-brand-platform-hover:  #4F46E5;
  --ds-brand-platform-light:  rgba(99,102,241,0.12);

  /* ── Semantic colors ── */
  --ds-color-primary:         var(--primary, #2563EB);
  --ds-color-success:         #10B981;
  --ds-color-success-light:   #D1FAE5;
  --ds-color-warning:         #F59E0B;
  --ds-color-warning-light:   #FEF3C7;
  --ds-color-danger:          #EF4444;
  --ds-color-danger-light:    #FEE2E2;
  --ds-color-info:            #06B6D4;
  --ds-color-info-light:      #CFFAFE;

  /* ── Gray scale (Tailwind-compatible) ── */
  --ds-gray-50:   #F8FAFC;
  --ds-gray-100:  #F1F5F9;
  --ds-gray-200:  #E2E8F0;
  --ds-gray-300:  #CBD5E1;
  --ds-gray-400:  #94A3B8;
  --ds-gray-500:  #64748B;
  --ds-gray-600:  #475569;
  --ds-gray-700:  #334155;
  --ds-gray-800:  #1E293B;
  --ds-gray-900:  #0F172A;

  /* ── Surface system (light default) ── */
  --ds-surface-bg:          #F8FAFC;
  --ds-surface-default:     #FFFFFF;
  --ds-surface-raised:      #FFFFFF;
  --ds-surface-sunken:      #F1F5F9;
  --ds-surface-overlay:     rgba(0,0,0,0.48);
  --ds-surface-border:      #E2E8F0;
  --ds-surface-border-focus:#2563EB;

  /* ── Text hierarchy ── */
  --ds-text-primary:        #0F172A;
  --ds-text-secondary:      #475569;
  --ds-text-muted:          #94A3B8;
  --ds-text-inverse:        #FFFFFF;
  --ds-text-disabled:       #CBD5E1;

  /* ── State colors ── */
  --ds-state-hover-bg:      rgba(0,0,0,0.04);
  --ds-state-active-bg:     rgba(37,99,235,0.08);
  --ds-state-selected-bg:   rgba(37,99,235,0.12);
  --ds-state-disabled-opacity: 0.45;

  /* ── Platform-specific dark surface overrides ── */
  /* Applied via [data-ds-context="platform"] */
  --ds-platform-bg:          #0A0A1A;
  --ds-platform-surface:     #0F0F2D;
  --ds-platform-surface-2:   #1a1a3a;
  --ds-platform-border:      rgba(99,102,241,0.2);
  --ds-platform-text:        #E2E8F0;
  --ds-platform-text-muted:  #94A3B8;
  --ds-platform-text-dim:    #64748B;

/* ══════════════════════════════════════════════════════════════════
   SECTION 2: TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */

  /* ── Font stacks ── */
  --ds-font-sans:   'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* ── Type scale ── */
  --ds-text-2xs:  9px;
  --ds-text-xs:   11px;
  --ds-text-sm:   12.5px;
  --ds-text-base: 14px;
  --ds-text-md:   15px;
  --ds-text-lg:   18px;
  --ds-text-xl:   22px;
  --ds-text-2xl:  26px;
  --ds-text-3xl:  32px;

  /* ── Line heights ── */
  --ds-leading-tight:  1.25;
  --ds-leading-snug:   1.375;
  --ds-leading-normal: 1.6;
  --ds-leading-relaxed:1.75;

  /* ── Font weights ── */
  --ds-weight-regular:  400;
  --ds-weight-medium:   500;
  --ds-weight-semibold: 600;
  --ds-weight-bold:     700;
  --ds-weight-extrabold:800;

  /* ── Letter spacing ── */
  --ds-tracking-tight:  -0.01em;
  --ds-tracking-normal: 0em;
  --ds-tracking-wide:   0.04em;
  --ds-tracking-wider:  0.07em;
  --ds-tracking-widest: 0.12em;

/* ══════════════════════════════════════════════════════════════════
   SECTION 3: SPACING
   ══════════════════════════════════════════════════════════════════ */

  --ds-space-0:   0px;
  --ds-space-px:  1px;
  --ds-space-0-5: 2px;
  --ds-space-1:   4px;
  --ds-space-2:   8px;
  --ds-space-3:   12px;
  --ds-space-4:   16px;
  --ds-space-5:   20px;
  --ds-space-6:   24px;
  --ds-space-7:   28px;
  --ds-space-8:   32px;
  --ds-space-10:  40px;
  --ds-space-12:  48px;
  --ds-space-16:  64px;
  --ds-space-20:  80px;

/* ══════════════════════════════════════════════════════════════════
   SECTION 4: BORDER RADIUS
   ══════════════════════════════════════════════════════════════════ */

  --ds-radius-none: 0px;
  --ds-radius-xs:   4px;
  --ds-radius-sm:   6px;
  --ds-radius-base: 8px;
  --ds-radius-md:   10px;
  --ds-radius-lg:   12px;
  --ds-radius-xl:   16px;
  --ds-radius-2xl:  20px;
  --ds-radius-full: 9999px;

/* ══════════════════════════════════════════════════════════════════
   SECTION 5: SHADOWS
   ══════════════════════════════════════════════════════════════════ */

  --ds-shadow-none: none;
  --ds-shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --ds-shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --ds-shadow-base: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --ds-shadow-md:   0 8px 16px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
  --ds-shadow-lg:   0 20px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.05);
  --ds-shadow-focus:0 0 0 3px rgba(37,99,235,0.15);
  --ds-shadow-focus-platform: 0 0 0 3px rgba(99,102,241,0.25);

/* ══════════════════════════════════════════════════════════════════
   SECTION 6: Z-INDEX SCALE
   ══════════════════════════════════════════════════════════════════ */

  --ds-z-base:     1;
  --ds-z-raised:   10;
  --ds-z-dropdown: 100;
  --ds-z-sticky:   200;
  --ds-z-header:   300;
  --ds-z-sidebar:  400;
  --ds-z-modal:    1050;
  --ds-z-toast:    1100;
  --ds-z-overlay:  1200;
  --ds-z-max:      9999;

/* ══════════════════════════════════════════════════════════════════
   SECTION 7: ANIMATION & TRANSITION
   ══════════════════════════════════════════════════════════════════ */

  --ds-duration-instant:  0ms;
  --ds-duration-fast:     120ms;
  --ds-duration-normal:   150ms;
  --ds-duration-moderate: 200ms;
  --ds-duration-slow:     250ms;
  --ds-duration-slower:   350ms;

  --ds-easing-default:    ease;
  --ds-easing-in:         ease-in;
  --ds-easing-out:        ease-out;
  --ds-easing-in-out:     ease-in-out;
  --ds-easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --ds-transition-fast:   var(--ds-duration-fast) var(--ds-easing-default);
  --ds-transition:        var(--ds-duration-normal) var(--ds-easing-default);
  --ds-transition-slow:   var(--ds-duration-slow) var(--ds-easing-default);

/* ══════════════════════════════════════════════════════════════════
   SECTION 8: LAYOUT
   ══════════════════════════════════════════════════════════════════ */

  --ds-container-narrow:  640px;
  --ds-container-default: 900px;
  --ds-container-wide:    1060px;
  --ds-container-full:    100%;

  --ds-sidebar-w-collapsed: 64px;
  --ds-sidebar-w-expanded:  220px;
  --ds-header-h:            60px;
  --ds-platform-header-h:   56px;

/* ══════════════════════════════════════════════════════════════════
   SECTION 9: SIZING — COMPONENTS
   ══════════════════════════════════════════════════════════════════ */

  --ds-progress-height-xs:  3px;
  --ds-progress-height-sm:  4px;
  --ds-progress-height-md:  8px;
  --ds-progress-height-lg:  12px;

  --ds-thumbnail-height-xs: 60px;
  --ds-thumbnail-height-sm: 90px;
  --ds-thumbnail-height-md: 130px;
  --ds-thumbnail-height-lg: 180px;

  --ds-icon-xs:   12px;
  --ds-icon-sm:   14px;
  --ds-icon-base: 16px;
  --ds-icon-md:   20px;
  --ds-icon-lg:   24px;
  --ds-icon-xl:   32px;
  --ds-icon-2xl:  48px;

/* ══════════════════════════════════════════════════════════════════
   SECTION 10: OPACITY
   ══════════════════════════════════════════════════════════════════ */

  --ds-opacity-full:     1;
  --ds-opacity-high:     0.85;
  --ds-opacity-medium:   0.65;
  --ds-opacity-low:      0.45;
  --ds-opacity-disabled: 0.40;
  --ds-opacity-ghost:    0.25;

/* ══════════════════════════════════════════════════════════════════
   SECTION 11: BORDER
   ══════════════════════════════════════════════════════════════════ */

  --ds-border-width:   1px;
  --ds-border-width-2: 2px;
  --ds-border-color:   var(--ds-surface-border);
  --ds-border:         var(--ds-border-width) solid var(--ds-border-color);

/* ══════════════════════════════════════════════════════════════════
   SECTION 12: FOCUS
   ══════════════════════════════════════════════════════════════════ */

  --ds-focus-ring:            var(--ds-shadow-focus);
  --ds-focus-ring-platform:   var(--ds-shadow-focus-platform);
  --ds-focus-color:           var(--ds-brand-client);

/* ══════════════════════════════════════════════════════════════════
   SECTION 13: GRID / BREAKPOINTS (reference — JS must handle media)
   ══════════════════════════════════════════════════════════════════ */

  --ds-breakpoint-sm:   576px;
  --ds-breakpoint-md:   768px;
  --ds-breakpoint-lg:   992px;
  --ds-breakpoint-xl:   1200px;
  --ds-breakpoint-2xl:  1400px;

  --ds-cols-1: 1;
  --ds-cols-2: 2;
  --ds-cols-3: 3;
  --ds-cols-4: 4;
  --ds-cols-auto: auto-fill;

} /* :root end */


/* ══════════════════════════════════════════════════════════════════
   DARK MODE TOKENS
   Applied via: [data-ds-theme="dark"] or @media prefers-color-scheme
   ══════════════════════════════════════════════════════════════════ */

[data-ds-theme="dark"] {
  --ds-surface-bg:          #0D1117;
  --ds-surface-default:     #161B22;
  --ds-surface-raised:      #21262D;
  --ds-surface-sunken:      #0D1117;
  --ds-surface-border:      #30363D;
  --ds-surface-border-focus:#58A6FF;

  --ds-text-primary:        #E6EDF3;
  --ds-text-secondary:      #8B949E;
  --ds-text-muted:          #6E7681;
  --ds-text-disabled:       #3D444D;

  --ds-state-hover-bg:      rgba(255,255,255,0.04);
  --ds-state-active-bg:     rgba(88,166,255,0.08);
  --ds-state-selected-bg:   rgba(88,166,255,0.12);

  --ds-brand-client:        #58A6FF;
  --ds-brand-client-hover:  #79C0FF;
  --ds-brand-client-light:  rgba(88,166,255,0.12);

  --ds-shadow-xs:   0 1px 2px rgba(0,0,0,0.2);
  --ds-shadow-sm:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --ds-shadow-base: 0 4px 6px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15);
  --ds-shadow-md:   0 8px 16px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
  --ds-shadow-lg:   0 20px 40px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.3);
  --ds-shadow-focus:0 0 0 3px rgba(88,166,255,0.2);
}

/* ══════════════════════════════════════════════════════════════════
   PLATFORM CONTEXT (dark admin panel)
   Applied via: [data-ds-context="platform"]
   ══════════════════════════════════════════════════════════════════ */

[data-ds-context="platform"] {
  --ds-surface-bg:          #0A0A1A;
  --ds-surface-default:     #0F0F2D;
  --ds-surface-raised:      #1a1a3a;
  --ds-surface-border:      rgba(99,102,241,0.2);

  --ds-text-primary:        #E2E8F0;
  --ds-text-secondary:      #94A3B8;
  --ds-text-muted:          #64748B;

  --ds-brand-client:        var(--ds-brand-platform);
  --ds-brand-client-hover:  var(--ds-brand-platform-hover);
  --ds-brand-client-light:  var(--ds-brand-platform-light);

  --ds-shadow-focus:        var(--ds-shadow-focus-platform);
}


/* ══════════════════════════════════════════════════════════════════
   COMPONENT CLASSES — Design System primitives
   These classes are intentionally minimal. They compose with Bootstrap.
   ══════════════════════════════════════════════════════════════════ */

/* ── Skip link (accessibility) ── */
.ds-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--ds-space-2);
  z-index: var(--ds-z-max);
  background: var(--ds-brand-client);
  color: var(--ds-text-inverse);
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
}
.ds-skip-link:focus {
  left: var(--ds-space-4);
  outline: 2px solid var(--ds-text-inverse);
  outline-offset: 2px;
}

/* ── Focus ring utility ── */
.ds-focus:focus,
.ds-focus:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* ── Toast container ── */
#ds-toast-container {
  position: fixed;
  bottom: var(--ds-space-6);
  right: var(--ds-space-6);
  z-index: var(--ds-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  max-width: 340px;
  width: 100%;
  pointer-events: none;
}
#ds-toast-container .ds-toast {
  pointer-events: all;
  background: var(--ds-surface-default);
  border: var(--ds-border);
  border-radius: var(--ds-radius-base);
  box-shadow: var(--ds-shadow-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-primary);
  animation: ds-toast-in var(--ds-duration-moderate) var(--ds-easing-out);
}
#ds-toast-container .ds-toast.ds-toast-out {
  animation: ds-toast-out var(--ds-duration-moderate) var(--ds-easing-in) forwards;
}
#ds-toast-container .ds-toast-icon { flex-shrink: 0; font-size: var(--ds-icon-base); line-height: 1.4; }
#ds-toast-container .ds-toast-body { flex: 1; }
#ds-toast-container .ds-toast-title { font-weight: var(--ds-weight-semibold); margin-bottom: 2px; }
#ds-toast-container .ds-toast-msg  { color: var(--ds-text-secondary); line-height: var(--ds-leading-snug); }
#ds-toast-container .ds-toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-muted);
  padding: 0;
  font-size: var(--ds-icon-sm);
  line-height: 1.4;
}
#ds-toast-container .ds-toast-close:hover { color: var(--ds-text-primary); }
#ds-toast-container .ds-toast.ds-toast-success { border-left: 3px solid var(--ds-color-success); }
#ds-toast-container .ds-toast.ds-toast-success .ds-toast-icon { color: var(--ds-color-success); }
#ds-toast-container .ds-toast.ds-toast-error   { border-left: 3px solid var(--ds-color-danger); }
#ds-toast-container .ds-toast.ds-toast-error   .ds-toast-icon { color: var(--ds-color-danger); }
#ds-toast-container .ds-toast.ds-toast-warning { border-left: 3px solid var(--ds-color-warning); }
#ds-toast-container .ds-toast.ds-toast-warning .ds-toast-icon { color: var(--ds-color-warning); }
#ds-toast-container .ds-toast.ds-toast-info    { border-left: 3px solid var(--ds-color-info); }
#ds-toast-container .ds-toast.ds-toast-info    .ds-toast-icon { color: var(--ds-color-info); }

@keyframes ds-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ── Modal accessibility overlay ── */
.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ds-surface-overlay);
  z-index: var(--ds-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-4);
}
.ds-modal {
  background: var(--ds-surface-default);
  border: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.ds-modal-header {
  padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-4);
  border-bottom: var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
}
.ds-modal-title { font-size: var(--ds-text-md); font-weight: var(--ds-weight-bold); color: var(--ds-text-primary); margin: 0; }
.ds-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--ds-text-muted); font-size: var(--ds-icon-md); line-height: 1;
  padding: var(--ds-space-1); border-radius: var(--ds-radius-sm);
  transition: color var(--ds-transition-fast), background var(--ds-transition-fast);
}
.ds-modal-close:hover { color: var(--ds-text-primary); background: var(--ds-state-hover-bg); }
.ds-modal-body { padding: var(--ds-space-5) var(--ds-space-6); }
.ds-modal-footer {
  padding: var(--ds-space-4) var(--ds-space-6) var(--ds-space-5);
  border-top: var(--ds-border);
  display: flex;
  gap: var(--ds-space-3);
  justify-content: flex-end;
}

/* ── Tab system (accessible) ── */
.ds-tabs-list {
  display: flex;
  gap: var(--ds-space-1);
  border-bottom: 2px solid var(--ds-surface-border);
  padding-bottom: 0;
  margin-bottom: var(--ds-space-5);
  flex-wrap: wrap;
}
.ds-tabs-list [role="tab"] {
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--ds-transition-fast), border-color var(--ds-transition-fast);
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  white-space: nowrap;
}
.ds-tabs-list [role="tab"]:hover { color: var(--ds-text-primary); }
.ds-tabs-list [role="tab"][aria-selected="true"] {
  color: var(--ds-color-primary, var(--ds-brand-client));
  border-bottom-color: var(--ds-color-primary, var(--ds-brand-client));
  font-weight: var(--ds-weight-semibold);
}
.ds-tabs-list [role="tab"]:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ds-tab-panel[hidden] { display: none !important; }
.ds-tab-panel:not([hidden]) { display: block; }

/* ── Empty state component ── */
.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-16) var(--ds-space-8);
  text-align: center;
  color: var(--ds-text-muted);
}
.ds-empty-state__icon {
  font-size: var(--ds-icon-2xl);
  margin-bottom: var(--ds-space-4);
  opacity: 0.4;
  line-height: 1;
}
.ds-empty-state__title {
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-secondary);
  margin-bottom: var(--ds-space-2);
}
.ds-empty-state__description {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  max-width: 360px;
  line-height: var(--ds-leading-relaxed);
  margin-bottom: var(--ds-space-5);
}

/* ── Status badge component ── */
.ds-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-2xs);
  font-weight: var(--ds-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wider);
  white-space: nowrap;
}
.ds-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-status-active, .ds-status-online, .ds-status-success, .ds-status-healthy {
  background: var(--ds-color-success-light);
  color: #065F46;
}
.ds-status-active::before, .ds-status-online::before, .ds-status-success::before, .ds-status-healthy::before { background: var(--ds-color-success); }
.ds-status-warning, .ds-status-pending, .ds-status-degraded {
  background: var(--ds-color-warning-light);
  color: #92400E;
}
.ds-status-warning::before, .ds-status-pending::before, .ds-status-degraded::before { background: var(--ds-color-warning); }
.ds-status-error, .ds-status-failed, .ds-status-critical {
  background: var(--ds-color-danger-light);
  color: #991B1B;
}
.ds-status-error::before, .ds-status-failed::before, .ds-status-critical::before { background: var(--ds-color-danger); }
.ds-status-info, .ds-status-running, .ds-status-active-trial {
  background: var(--ds-color-info-light);
  color: #164E63;
}
.ds-status-info::before, .ds-status-running::before, .ds-status-active-trial::before { background: var(--ds-color-info); }
.ds-status-neutral, .ds-status-draft, .ds-status-idle {
  background: var(--ds-gray-100);
  color: var(--ds-gray-600);
}
.ds-status-neutral::before, .ds-status-draft::before, .ds-status-idle::before { background: var(--ds-gray-400); }

/* ── Stat card component ── */
.ds-stat-card {
  background: var(--ds-surface-default);
  border: var(--ds-border);
  border-radius: var(--ds-radius-base);
  padding: var(--ds-space-5) var(--ds-space-5);
}
.ds-stat-card__label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wider);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-2);
}
.ds-stat-card__value {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-extrabold);
  color: var(--ds-text-primary);
  line-height: 1;
  margin-bottom: var(--ds-space-1);
  font-variant-numeric: tabular-nums;
}
.ds-stat-card__meta {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}
.ds-stat-card__trend-up   { color: var(--ds-color-success); }
.ds-stat-card__trend-down { color: var(--ds-color-danger); }

/* ── Progress bar ── */
.ds-progress {
  height: var(--ds-progress-height-md);
  background: var(--ds-gray-100);
  border-radius: var(--ds-radius-full);
  overflow: hidden;
}
.ds-progress-sm { height: var(--ds-progress-height-sm); }
.ds-progress-xs { height: var(--ds-progress-height-xs); }
.ds-progress-lg { height: var(--ds-progress-height-lg); }
.ds-progress-bar {
  height: 100%;
  background: var(--ds-brand-client);
  border-radius: var(--ds-radius-full);
  transition: width var(--ds-transition-slow);
}
.ds-progress-bar.success { background: var(--ds-color-success); }
.ds-progress-bar.warning { background: var(--ds-color-warning); }
.ds-progress-bar.danger  { background: var(--ds-color-danger); }

/* ── Skeleton loader ── */
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-gray-100) 25%, var(--ds-gray-200) 50%, var(--ds-gray-100) 75%);
  background-size: 200% 100%;
  animation: ds-skeleton-pulse 1.5s ease infinite;
  border-radius: var(--ds-radius-sm);
}
@keyframes ds-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ds-skeleton { animation: none; background: var(--ds-gray-100); }
}

/* ══════════════════════════════════════════════════════════════════
   TENANT THEMING — injected at runtime by ThemeEngineService
   <style id="ds-tenant-theme">
     :root { --ds-brand-client: #FF5A00; --ds-brand-client-hover: #E04E00; }
   </style>
   ══════════════════════════════════════════════════════════════════ */