/*
 * ══════════════════════════════════════════════════════════════════════════
 *  SalonOS — DESIGN SYSTEM  v1.0
 *
 *  The single source of truth for visual language, reusable components,
 *  and design tokens. This file is the final authority for shared UI
 *  patterns; page-specific overrides live in salonos.css.
 *
 *  LOADING ORDER
 *  ─────────────
 *  1. salonos.css      ← base structure, page layout, legacy styles
 *  2. design-system.css ← this file: tokens + canonical components
 *
 *  HOW TO USE (quick reference)
 *  ─────────────────────────────────────────────────────────────────────
 *  Cards         <div class="ds-card">
 *                <div class="ds-card ds-card--elevated">
 *                <div class="ds-card ds-card--glass">
 *
 *  KPI Card      <div class="ds-kpi ds-kpi--blue">
 *                  <div class="ds-kpi-icon">…svg…</div>
 *                  <div class="ds-kpi-value">1,284</div>
 *                  <div class="ds-kpi-label">Revenue</div>
 *                  <div class="ds-kpi-sub">↑ 12% this month</div>
 *                </div>
 *
 *  Buttons       <button class="ds-btn ds-btn--primary">Save</button>
 *                <button class="ds-btn ds-btn--secondary">Cancel</button>
 *                <button class="ds-btn ds-btn--ghost">Learn more</button>
 *                <button class="ds-btn ds-btn--danger">Delete</button>
 *                <button class="ds-btn ds-btn--primary ds-btn--sm">…</button>
 *                <button class="ds-btn-icon ds-btn-icon--edit">✏</button>
 *                <button class="ds-btn-icon ds-btn-icon--delete">✕</button>
 *
 *  Badges        <span class="ds-badge ds-badge--success">In Stock</span>
 *                <span class="ds-badge ds-badge--warning">Low Stock</span>
 *                <span class="ds-badge ds-badge--error">Out of Stock</span>
 *                <span class="ds-badge ds-badge--info">Confirmed</span>
 *                <span class="ds-badge ds-badge--neutral">No-show</span>
 *                <span class="ds-badge ds-badge--gold">Completed</span>
 *                <span class="ds-badge ds-badge--purple">VIP</span>
 *
 *  Inputs        <input class="ds-input" placeholder="…">
 *                <select class="ds-select">…</select>
 *                <input class="ds-search" placeholder="Search…">
 *                <div class="ds-input-group">
 *                  <label class="ds-label">Label</label>
 *                  <input class="ds-input">
 *                </div>
 *
 *  Tables        <table class="ds-table">…</table>
 *  (or just use  <div class="ds-table-wrap">
 *   th/td which    <table>…</table>
 *   are global)  </div>
 *
 *  Progress      <div class="ds-progress">
 *                  <div class="ds-progress-bar ds-progress-bar--success"
 *                       style="width: 72%"></div>
 *                </div>
 *
 *  Avatar        <div class="ds-avatar">AB</div>
 *                <div class="ds-avatar ds-avatar--sm">AB</div>
 *                <div class="ds-avatar ds-avatar--lg">AB</div>
 *
 *  Toolbar       <div class="ds-toolbar">
 *                  <input class="ds-search">
 *                  <select class="ds-select">…</select>
 *                  <button class="ds-btn ds-btn--primary">+ Add</button>
 *                </div>
 *
 *  Section head  <div class="ds-section-head">
 *                  <div class="ds-section-icon ds-section-icon--blue">…</div>
 *                  <div class="ds-section-title">Title</div>
 *                  <div class="ds-section-sub">Subtitle</div>
 *                </div>
 *
 *  Empty state   <div class="ds-empty">
 *                  <div class="ds-empty-icon">📭</div>
 *                  <div class="ds-empty-text">No records found</div>
 *                </div>
 *
 *  Page header   <div class="ds-page-header">
 *                  <h1 class="ds-page-title">Appointments</h1>
 *                  <div class="ds-page-actions">…buttons…</div>
 *                </div>
 *
 *  SECTIONS (Ctrl+F the §tag to jump)
 *  ─────────────────────────────────────────────────────────────────────
 *    §DS-TOKENS    CSS custom properties — surface, shadow, motion, type
 *    §DS-CARDS     Card component system
 *    §DS-KPI       KPI stat card system
 *    §DS-TABLES    Global table styles + .ds-table
 *    §DS-BUTTONS   Button component system
 *    §DS-BADGES    Badge / tag system
 *    §DS-FORMS     Input, select, search, textarea
 *    §DS-AVATAR    Avatar circles
 *    §DS-PROGRESS  Progress bars
 *    §DS-LAYOUT    Page layout helpers
 *    §DS-MOTION    Keyframes + animation utilities
 *    §DS-LIGHT     Light-mode token + component overrides
 * ══════════════════════════════════════════════════════════════════════════
 */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-TOKENS                                                          ║
   ║  Extended CSS custom properties — every value is a token             ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root {

  /* ── Surface hierarchy (dark mode) ── */
  /* Think of surfaces as Z-layers of the UI */
  --surface-base:     #0C0C0E;  /* page canvas */
  --surface-raised:   #111115;  /* cards, panels */
  --surface-elevated: #17171C;  /* inputs, nested */
  --surface-overlay:  #1E1E25;  /* tooltips, popovers */
  --surface-invert:   #F0EDE8;  /* inverted = cream */

  /* ── Border hierarchy ── */
  --border-subtle:  #1F1F28;  /* softest — section dividers */
  --border-base:    #2A2A35;  /* standard — card edges */
  --border-strong:  #3A3A48;  /* emphasized — active states */
  --border-focus:   rgba(200,146,42,0.55);  /* gold focus ring */

  /* ── Shadow scale ── */
  /* Each level adds depth. Use xs for inline, xl for modals */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.25),
                 0 1px 0   rgba(255,255,255,0.03) inset;

  --shadow-sm:   0 2px 8px rgba(0,0,0,0.32),
                 0 1px 3px rgba(0,0,0,0.2);

  --shadow-md:   0 4px 20px rgba(0,0,0,0.38),
                 0 1px 4px  rgba(0,0,0,0.22),
                 0 1px 0    rgba(255,255,255,0.04) inset;

  --shadow-lg:   0 8px 36px rgba(0,0,0,0.46),
                 0 2px 10px rgba(0,0,0,0.28),
                 0 1px 0    rgba(255,255,255,0.05) inset;

  --shadow-xl:   0 16px 56px rgba(0,0,0,0.54),
                 0 4px  18px rgba(0,0,0,0.32),
                 0 1px  0    rgba(255,255,255,0.06) inset;

  /* ── Semantic shadow aliases ── */
  --shadow-card:          var(--shadow-md);
  --shadow-card-hover:    var(--shadow-lg);
  --shadow-modal:         var(--shadow-xl);
  --shadow-dropdown:      0 16px 48px rgba(0,0,0,0.55),
                          0 4px  16px rgba(0,0,0,0.3),
                          0 0    0 1px rgba(255,255,255,0.04) inset;

  /* ── Colored glow shadows (used on KPI / colored stat cards) ── */
  --shadow-glow-gold:   0 6px 24px rgba(200,146,42,0.40);
  --shadow-glow-green:  0 6px 24px rgba(61,170,106,0.40);
  --shadow-glow-red:    0 6px 24px rgba(212,80,80,0.40);
  --shadow-glow-blue:   0 6px 24px rgba(74,143,212,0.40);
  --shadow-glow-purple: 0 6px 24px rgba(138,96,208,0.40);

  /* ── Motion / easing ── */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy lift   */
  --ease-smooth:  cubic-bezier(0.4,  0,    0.2,  1); /* material ease  */
  --ease-fast:    cubic-bezier(0.22, 1,    0.36, 1); /* fast enter     */
  --ease-out:     cubic-bezier(0,    0,    0.2,  1); /* standard exit  */

  /* ── Duration scale ── */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-lazy:    500ms;

  /* ── Border radius scale (extended) ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ── Spacing scale (extended) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Typography ── */
  --font-mono:    'Inter', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;

  /* Type scale */
  --text-2xs: 0.575rem;  /* 9.2px  — eyebrow labels */
  --text-xs:  0.625rem;  /* 10px   — mono labels, badge text */
  --text-sm:  0.725rem;  /* 11.6px — table cells, sub text */
  --text-md:  0.825rem;  /* 13.2px — body, inputs */
  --text-lg:  0.95rem;   /* 15.2px — section titles */
  --text-xl:  1.15rem;   /* 18.4px — card headings */
  --text-2xl: 1.75rem;   /* 28px   — KPI numbers (sm) */
  --text-3xl: 2.25rem;   /* 36px   — KPI numbers (lg) */

  /* ── Component-level tokens ── */
  /* Cards */
  --card-bg:      var(--surface-raised);
  --card-border:  var(--border-subtle);
  --card-radius:  var(--radius-lg);
  --card-padding: 1.5rem;
  --card-shadow:  var(--shadow-card);

  /* Buttons */
  --btn-radius:    9px;
  --btn-h-sm:      32px;
  --btn-h-md:      38px;
  --btn-h-lg:      44px;
  --btn-font-size: var(--text-md);

  /* Inputs */
  --input-h:      38px;
  --input-radius: 9px;
  --input-bg:     var(--surface-elevated);
  --input-border: var(--border-base);

  /* Table */
  --table-header-bg:    rgba(12,12,14,0.96);
  --table-row-hover-bg: rgba(200,146,42,0.04);
  --table-separator:    rgba(255,255,255,0.04);
  --table-cell-pad:     1rem 1.1rem;
  --table-header-pad:   0.8rem 1.1rem;

  /* Badges */
  --badge-radius:  var(--radius-pill);
  --badge-pad:     0.22rem 0.7rem;
  --badge-font:    var(--font-mono);
  --badge-size:    0.58rem;

  /* Avatars */
  --avatar-sm:  28px;
  --avatar-md:  34px;
  --avatar-lg:  42px;

  /* Progress */
  --progress-h:         6px;
  --progress-track-bg:  rgba(255,255,255,0.06);
  --progress-radius:    var(--radius-pill);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-CARDS                                                           ║
   ║  .ds-card, .ds-card--elevated, .ds-card--glass, .ds-card--flat      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Base card ── */
.ds-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition:
    transform   var(--dur-base) var(--ease-spring),
    box-shadow  var(--dur-base) var(--ease-smooth);
}

/* Top-edge shimmer — subtle highlight at the card rim */
.ds-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.ds-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* ── Elevated — deeper shadow, more lift ── */
.ds-card--elevated {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-base);
}
.ds-card--elevated:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

/* ── Glass — frosted dark panel (dropdowns, tooltips, sidepanels) ── */
.ds-card--glass {
  background: rgba(17,17,21,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255,255,255,0.09);
  box-shadow: var(--shadow-dropdown);
}
.ds-card--glass::before { display: none; }
.ds-card--glass:hover { transform: none; box-shadow: var(--shadow-dropdown); }

/* ── Flat — for nested/secondary content inside a card ── */
.ds-card--flat {
  background: var(--surface-elevated);
  border-color: var(--border-subtle);
  box-shadow: none;
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.ds-card--flat:hover { transform: none; box-shadow: var(--shadow-xs); }

/* ── Table card — no padding, overflow hidden for edge-to-edge table ── */
.ds-card--table {
  padding: 0;
  overflow: hidden;
}
.ds-card--table::before { display: none; }
.ds-card--table:hover { transform: none; box-shadow: var(--shadow-lg); }

/* ── Card subcomponents ── */
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.ds-card-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.ds-card-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.ds-card-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.ds-card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Light mode overrides in §DS-LIGHT */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-KPI                                                             ║
   ║  .ds-kpi, .ds-kpi--{blue|green|red|gold|purple}                     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Base KPI card ── */
.ds-kpi {
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.6rem 1.3rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 120px;
  background: var(--surface-raised);
  border: 1px solid var(--border-base);
  box-shadow: var(--shadow-md);
  cursor: default;
  will-change: transform;
  transition:
    transform    var(--dur-base) var(--ease-spring),
    box-shadow   var(--dur-base) var(--ease-smooth);
}

/* Glass shimmer overlay */
.ds-kpi::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 35%,
    transparent 65%
  );
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.ds-kpi:hover {
  transform: translateY(-6px) scale(1.015);
}

/* ── Colored variants ── */
.ds-kpi--blue {
  background: linear-gradient(140deg, #3B6FE8 0%, #5B8CFF 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(59,111,232,0.38);
}
.ds-kpi--blue:hover   { box-shadow: 0 20px 56px rgba(59,111,232,0.52); }

.ds-kpi--green {
  background: linear-gradient(140deg, #2DA86A 0%, #3DC87A 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(61,170,106,0.38);
}
.ds-kpi--green:hover  { box-shadow: 0 20px 56px rgba(61,170,106,0.52); }

.ds-kpi--red {
  background: linear-gradient(140deg, #D45050 0%, #E07848 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(212,80,80,0.38);
}
.ds-kpi--red:hover    { box-shadow: 0 20px 56px rgba(212,80,80,0.52); }

.ds-kpi--gold {
  background: linear-gradient(140deg, #C8922A 0%, #E8B040 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(200,146,42,0.38);
}
.ds-kpi--gold:hover   { box-shadow: 0 20px 56px rgba(200,146,42,0.52); }

.ds-kpi--purple {
  background: linear-gradient(140deg, #8A60D0 0%, #A880F0 100%);
  border: none;
  box-shadow: 0 8px 32px rgba(138,96,208,0.38);
}
.ds-kpi--purple:hover { box-shadow: 0 20px 56px rgba(138,96,208,0.52); }

/* ── KPI icon badge ── */
.ds-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.08),
    0 0 20px rgba(255,255,255,0.15);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2;
}
.ds-kpi-icon svg, .ds-kpi-icon i { color: #fff; }

/* ── KPI content ── */
.ds-kpi-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 2;
}
.ds-kpi-value {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-2);
}
.ds-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-1);
}
.ds-kpi-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.ds-kpi-sub.up   { color: rgba(160,255,200,0.75); }
.ds-kpi-sub.down { color: rgba(255,160,160,0.75); }

/* ── KPI header badge (e.g. "TODAY" label) ── */
.ds-kpi-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-TABLES                                                          ║
   ║  Global th/td refinement + .ds-table, .ds-table-wrap                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Canonical table — applies to ALL tables unless scoped otherwise */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Sticky frosted header */
thead tr {
  position: sticky;
  top: 0;
  z-index: 3;
}

th {
  background: var(--table-header-bg) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.32) !important;
  padding: var(--table-header-pad) !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  white-space: nowrap !important;
}

td {
  padding: var(--table-cell-pad) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  color: var(--cream2) !important;
  border-bottom: 1px solid var(--table-separator) !important;
  vertical-align: middle !important;
  transition: background var(--dur-fast) var(--ease-smooth) !important;
}

tr:last-child td { border-bottom: none !important; }

/* Row hover — gold left-accent + warm tint */
tbody tr:not(.appt-row):hover td {
  background: var(--table-row-hover-bg) !important;
}
tbody tr:not(.appt-row):hover td:first-child {
  box-shadow: inset 3px 0 0 rgba(200,146,42,0.5) !important;
}

/* Consistent padding on edges */
th:first-child, td:first-child { padding-left: 1.5rem !important; }
th:last-child,  td:last-child  { padding-right: 1.5rem !important; }

/* ── .ds-table-wrap — wraps a table inside a card ── */
.ds-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
}
.ds-table-wrap table {
  min-width: 580px;
}

/* ── Floating rows variant (.ds-table--floating) ── */
/* Apply to the <table> element itself for true floating rows */
.ds-table--floating {
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}
.ds-table--floating tbody td {
  background: var(--surface-elevated) !important;
  border: none !important;
}
.ds-table--floating tbody td:first-child {
  border-radius: 10px 0 0 10px !important;
  padding-left: 1.5rem !important;
}
.ds-table--floating tbody td:last-child {
  border-radius: 0 10px 10px 0 !important;
  padding-right: 1.5rem !important;
}
.ds-table--floating tbody tr:hover td {
  background: rgba(200,146,42,0.08) !important;
}
.ds-table--floating tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--gold) !important;
  border-radius: 10px 0 0 10px !important;
}

/* ── Empty row ── */
tr.ds-row-empty td {
  text-align: center;
  padding: 3rem 1rem !important;
  color: var(--mid) !important;
  font-size: var(--text-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
}
tr.ds-row-empty td:first-child,
tr.ds-row-empty td:last-child {
  padding: 3rem 1rem !important;
  box-shadow: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-BUTTONS                                                         ║
   ║  .ds-btn, .ds-btn--{primary|secondary|ghost|danger}                 ║
   ║  .ds-btn--{sm|md|lg}   .ds-btn-icon   .ds-btn-icon--{edit|delete}  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Base button ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--btn-h-md);
  padding: 0 1.1rem;
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform     var(--dur-base) var(--ease-spring),
    box-shadow    var(--dur-base) var(--ease-smooth),
    background    var(--dur-fast) var(--ease-smooth),
    border-color  var(--dur-fast) var(--ease-smooth),
    opacity       var(--dur-fast);
  -webkit-user-select: none;
  user-select: none;
}
.ds-btn:active {
  transform: scale(0.97) !important;
  transition-duration: var(--dur-instant) !important;
}
.ds-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Shimmer overlay on primary */
.ds-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, transparent 55%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.ds-btn:hover::before { opacity: 1; }

/* ── Primary (gold gradient) ── */
.ds-btn--primary {
  background: linear-gradient(135deg, #C8822A 0%, #E0A83A 55%, #C8921E 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 4px 18px rgba(200,146,42,0.42),
    0 1px 0 rgba(255,255,255,0.16) inset;
}
.ds-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 28px rgba(200,146,42,0.60),
    0 1px 0 rgba(255,255,255,0.22) inset;
  background: linear-gradient(135deg, #D09030 0%, #EABF48 55%, #D4A028 100%);
}

/* ── Secondary (ghost/outline) ── */
.ds-btn--secondary {
  background: transparent;
  color: var(--cream2);
  border-color: var(--border-base);
  box-shadow: var(--shadow-xs);
}
.ds-btn--secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,146,42,0.07);
  box-shadow: 0 3px 12px rgba(200,146,42,0.18);
  transform: translateY(-1px);
}

/* ── Ghost (text only) ── */
.ds-btn--ghost {
  background: transparent;
  color: var(--mid);
  border-color: transparent;
  box-shadow: none;
}
.ds-btn--ghost:hover {
  color: var(--cream);
  background: rgba(255,255,255,0.05);
  transform: none;
  box-shadow: none;
}
.ds-btn--ghost::before { display: none; }

/* ── Danger ── */
.ds-btn--danger {
  background: rgba(212,80,80,0.12);
  color: var(--red);
  border-color: rgba(212,80,80,0.28);
  box-shadow: none;
}
.ds-btn--danger:hover {
  background: rgba(212,80,80,0.2);
  border-color: rgba(212,80,80,0.5);
  box-shadow: 0 3px 14px rgba(212,80,80,0.32);
  transform: translateY(-1px);
}
.ds-btn--danger::before { display: none; }

/* ── Success ── */
.ds-btn--success {
  background: rgba(61,170,106,0.14);
  color: var(--green);
  border-color: rgba(61,170,106,0.32);
  box-shadow: none;
}
.ds-btn--success:hover {
  background: rgba(61,170,106,0.22);
  border-color: rgba(61,170,106,0.5);
  box-shadow: 0 3px 14px rgba(61,170,106,0.32);
  transform: translateY(-1px);
}
.ds-btn--success::before { display: none; }

/* ── Size modifiers ── */
.ds-btn--sm {
  height: var(--btn-h-sm);
  padding: 0 0.85rem;
  font-size: var(--text-xs);
  border-radius: 8px;
  gap: 0.3rem;
}
.ds-btn--lg {
  height: var(--btn-h-lg);
  padding: 0 1.5rem;
  font-size: var(--text-lg);
  border-radius: 11px;
  gap: 0.5rem;
}

/* ── Wide (full-width) ── */
.ds-btn--wide { width: 100%; }

/* ── Icon button — square, for edit/delete/more actions ── */
.ds-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--mid);
  cursor: pointer;
  font-size: 0.88rem;
  transition:
    background    var(--dur-fast) var(--ease-smooth),
    color         var(--dur-fast) var(--ease-smooth),
    border-color  var(--dur-fast) var(--ease-smooth),
    transform     var(--dur-base) var(--ease-spring),
    box-shadow    var(--dur-fast) var(--ease-smooth);
  flex-shrink: 0;
}
.ds-btn-icon:hover {
  transform: scale(1.14);
}
.ds-btn-icon--sm { width: 26px; height: 26px; font-size: 0.75rem; }
.ds-btn-icon--lg { width: 38px; height: 38px; font-size: 1rem; }

/* Type variants */
.ds-btn-icon--edit:hover {
  background: rgba(74,143,212,0.15);
  color: var(--blue);
  border-color: rgba(74,143,212,0.35);
  box-shadow: 0 2px 10px rgba(74,143,212,0.25);
}
.ds-btn-icon--delete:hover {
  background: rgba(212,80,80,0.14);
  color: var(--red);
  border-color: rgba(212,80,80,0.38);
  box-shadow: 0 2px 10px rgba(212,80,80,0.25);
}
.ds-btn-icon--add:hover {
  background: rgba(200,146,42,0.14);
  color: var(--gold);
  border-color: rgba(200,146,42,0.38);
  box-shadow: 0 2px 10px rgba(200,146,42,0.25);
}
.ds-btn-icon--more:hover {
  background: var(--surface-overlay);
  color: var(--cream2);
  border-color: var(--border-base);
}

/* Row-level fade — hide until row hovered */
.ds-row-actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.ds-row-actions .ds-btn-icon { opacity: 0.3; }
tr:hover .ds-row-actions .ds-btn-icon { opacity: 1; }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-BADGES                                                          ║
   ║  .ds-badge, .ds-badge--{success|warning|error|info|neutral|gold}    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Base badge ── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--badge-pad);
  font-family: var(--badge-font);
  font-size: var(--badge-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--badge-radius);
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
  transition: box-shadow var(--dur-fast) var(--ease-smooth);
}

/* Optional dot indicator */
.ds-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}
.ds-badge--no-dot::before { display: none; }

/* ── Color variants ── */
.ds-badge--success {
  background: rgba(61,170,106,0.14);
  color: #4DD890;
  border-color: rgba(61,170,106,0.32);
  box-shadow: 0 0 10px rgba(61,170,106,0.14);
}
.ds-badge--warning {
  background: rgba(200,146,42,0.14);
  color: #E8B84B;
  border-color: rgba(200,146,42,0.35);
  box-shadow: 0 0 10px rgba(200,146,42,0.14);
}
.ds-badge--error {
  background: rgba(212,80,80,0.14);
  color: #FF6B6B;
  border-color: rgba(212,80,80,0.32);
  box-shadow: 0 0 10px rgba(212,80,80,0.14);
}
.ds-badge--info {
  background: rgba(74,143,212,0.14);
  color: #7EC0FF;
  border-color: rgba(74,143,212,0.32);
  box-shadow: 0 0 10px rgba(74,143,212,0.14);
}
.ds-badge--neutral {
  background: rgba(255,255,255,0.05);
  color: var(--mid);
  border-color: var(--border-base);
  box-shadow: none;
}
.ds-badge--gold {
  background: rgba(200,146,42,0.14);
  color: #E8B84B;
  border-color: rgba(200,146,42,0.35);
  box-shadow: 0 0 10px rgba(200,146,42,0.14);
}
.ds-badge--purple {
  background: rgba(138,96,208,0.14);
  color: #B088E8;
  border-color: rgba(138,96,208,0.32);
  box-shadow: 0 0 10px rgba(138,96,208,0.14);
}

/* ── Outline (border only, no fill) ── */
.ds-badge--outline {
  background: transparent !important;
}

/* ── Pulse animation (for active/live statuses) ── */
.ds-badge--pulse {
  animation: dsBadgePulse 2.8s var(--ease-smooth) infinite;
}
@keyframes dsBadgePulse {
  0%, 100% { box-shadow: 0 0  8px rgba(61,170,106,0.15); }
  50%       { box-shadow: 0 0 18px rgba(61,170,106,0.40); }
}
.ds-badge--error.ds-badge--pulse {
  animation: dsBadgePulseRed 2.5s var(--ease-smooth) infinite;
}
@keyframes dsBadgePulseRed {
  0%, 100% { box-shadow: 0 0  8px rgba(212,80,80,0.15); }
  50%       { box-shadow: 0 0 18px rgba(212,80,80,0.42); }
}

/* ── Large tag style (bigger, less mono feel) ── */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-base);
  background: var(--surface-elevated);
  color: var(--cream2);
  cursor: default;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.ds-tag:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,146,42,0.08);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-FORMS                                                           ║
   ║  .ds-input, .ds-select, .ds-search, .ds-textarea, .ds-input-group   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Base input ── */
.ds-input,
.ds-select,
.ds-textarea {
  display: block;
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-md);
  outline: none;
  transition:
    border-color  var(--dur-fast) var(--ease-smooth),
    box-shadow    var(--dur-fast) var(--ease-smooth),
    background    var(--dur-fast) var(--ease-smooth);
  box-sizing: border-box;
}

/* Single-line inputs and selects */
.ds-input,
.ds-select {
  height: var(--input-h);
  padding: 0 var(--space-3);
}

.ds-select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A5660' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}
.ds-select option { background: var(--surface-elevated); color: var(--cream); }

.ds-textarea {
  height: auto;
  padding: var(--space-3);
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Focus state */
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(200,146,42,0.14);
  background: var(--surface-overlay);
}

/* Placeholder */
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--mid); }

/* ── Search variant ── */
.ds-search {
  display: inline-flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-md);
  height: var(--input-h);
  padding: 0 var(--space-4);
  width: 100%;
  max-width: 300px;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-smooth),
    box-shadow   var(--dur-fast) var(--ease-smooth);
}
.ds-search:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(200,146,42,0.14);
}
.ds-search::placeholder { color: var(--mid); }

/* ── Label ── */
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  display: block;
  margin-bottom: var(--space-2);
}

/* ── Input group (label + input stacked) ── */
.ds-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Input sizes ── */
.ds-input--sm, .ds-select--sm { height: 30px; font-size: var(--text-xs); padding: 0 var(--space-3); }
.ds-input--lg, .ds-select--lg { height: 44px; font-size: var(--text-lg); padding: 0 var(--space-4); }

/* ── Validation states ── */
.ds-input--error, .ds-select--error, .ds-textarea--error {
  border-color: rgba(212,80,80,0.55) !important;
  box-shadow: 0 0 0 3px rgba(212,80,80,0.12) !important;
}
.ds-input--success, .ds-select--success {
  border-color: rgba(61,170,106,0.55) !important;
  box-shadow: 0 0 0 3px rgba(61,170,106,0.12) !important;
}

/* ── Helper text ── */
.ds-input-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mid);
  margin-top: var(--space-1);
}
.ds-input-hint--error { color: var(--red); }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-AVATAR                                                          ║
   ║  .ds-avatar, .ds-avatar--{sm|md|lg}                                 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.ds-avatar {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--surface-elevated);
  color: var(--cream2);
  box-shadow:
    0 0 0 2px rgba(200,146,42,0.22),
    0 2px 8px rgba(0,0,0,0.3);
  transition:
    box-shadow var(--dur-fast) var(--ease-smooth),
    transform  var(--dur-base) var(--ease-spring);
}
.ds-avatar:hover {
  box-shadow:
    0 0 0 3px rgba(200,146,42,0.4),
    0 4px 14px rgba(0,0,0,0.4);
  transform: scale(1.08);
}

/* Sizes */
.ds-avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: 0.55rem;
}
.ds-avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: 0.8rem;
}

/* Color variants (apply background + ring color) */
.ds-avatar--blue   { background: rgba(74,143,212,0.25); color: var(--blue);   box-shadow: 0 0 0 2px rgba(74,143,212,0.3),   0 2px 8px rgba(0,0,0,0.3); }
.ds-avatar--green  { background: rgba(61,170,106,0.22); color: var(--green);  box-shadow: 0 0 0 2px rgba(61,170,106,0.3),   0 2px 8px rgba(0,0,0,0.3); }
.ds-avatar--gold   { background: rgba(200,146,42,0.22); color: var(--gold);   box-shadow: 0 0 0 2px rgba(200,146,42,0.3),   0 2px 8px rgba(0,0,0,0.3); }
.ds-avatar--red    { background: rgba(212,80,80,0.22);  color: var(--red);    box-shadow: 0 0 0 2px rgba(212,80,80,0.3),    0 2px 8px rgba(0,0,0,0.3); }
.ds-avatar--purple { background: rgba(138,96,208,0.22); color: var(--purple); box-shadow: 0 0 0 2px rgba(138,96,208,0.3),   0 2px 8px rgba(0,0,0,0.3); }

/* Stacked avatars group */
.ds-avatar-stack {
  display: flex;
  align-items: center;
}
.ds-avatar-stack .ds-avatar {
  margin-left: -8px;
  border: 2px solid var(--surface-raised);
}
.ds-avatar-stack .ds-avatar:first-child { margin-left: 0; }
.ds-avatar-stack .ds-avatar-more {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: 50%;
  background: var(--surface-overlay);
  color: var(--mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  margin-left: -8px;
  border: 2px solid var(--surface-raised);
  flex-shrink: 0;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-PROGRESS                                                        ║
   ║  .ds-progress, .ds-progress-bar, .ds-progress-bar--{*}              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.ds-progress {
  background: var(--progress-track-bg);
  height: var(--progress-h);
  border-radius: var(--progress-radius);
  overflow: hidden;
  position: relative;
}

/* Subtle inner shadow for depth */
.ds-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  pointer-events: none;
}

.ds-progress-bar {
  height: 100%;
  border-radius: var(--progress-radius);
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transition: width var(--dur-lazy) var(--ease-smooth);
  position: relative;
  min-width: 4px;
}

/* Shine strip */
.ds-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: rgba(255,255,255,0.22);
  border-radius: inherit;
}

/* Color variants */
.ds-progress-bar--success {
  background: linear-gradient(90deg, #2DA86A, #4DD890) !important;
  box-shadow: 0 0 10px rgba(61,170,106,0.45);
}
.ds-progress-bar--warning {
  background: linear-gradient(90deg, #C8822A, #E0A83A) !important;
  box-shadow: 0 0 10px rgba(200,146,42,0.45);
}
.ds-progress-bar--error {
  background: linear-gradient(90deg, #C84040, #E07878) !important;
  box-shadow: 0 0 10px rgba(212,80,80,0.40);
}
.ds-progress-bar--info {
  background: linear-gradient(90deg, #3B6FE8, #7EB8FF) !important;
  box-shadow: 0 0 10px rgba(74,143,212,0.40);
}

/* Sizes */
.ds-progress--sm  { height: 3px; }
.ds-progress--lg  { height: 10px; }
.ds-progress--xl  { height: 14px; }

/* Striped (for indeterminate / in-progress) */
.ds-progress-bar--striped {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.08) 0px,
    rgba(255,255,255,0.08) 8px,
    transparent 8px,
    transparent 16px
  ) !important;
}
.ds-progress-bar--animated {
  animation: dsProgressStripe 1.2s linear infinite;
}
@keyframes dsProgressStripe {
  from { background-position: 0 0; }
  to   { background-position: 32px 0; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-LAYOUT                                                          ║
   ║  Page-level layout patterns — toolbar, section head, page header    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Page header ── */
.ds-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ds-page-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.ds-page-title span { color: var(--gold); font-style: italic; }
.ds-page-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* ── Toolbar (filter bar above tables) ── */
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.ds-toolbar-spacer { flex: 1; }

/* ── KPI grid ── */
.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.ds-kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-kpi-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ── Section header (inside a card, above content) ── */
.ds-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Icon color variants */
.ds-section-icon--blue   { background: linear-gradient(135deg,#3B6FE8,#7BA2FF); box-shadow: 0 4px 16px rgba(59,111,232,0.38); }
.ds-section-icon--green  { background: linear-gradient(135deg,#2DA86A,#4DD890); box-shadow: 0 4px 16px rgba(61,170,106,0.38); }
.ds-section-icon--gold   { background: linear-gradient(135deg,#C8822A,#E0A83A); box-shadow: 0 4px 16px rgba(200,146,42,0.38); }
.ds-section-icon--red    { background: linear-gradient(135deg,#D45050,#E07848); box-shadow: 0 4px 16px rgba(212,80,80,0.38); }
.ds-section-icon--purple { background: linear-gradient(135deg,#8A60D0,#A880F0); box-shadow: 0 4px 16px rgba(138,96,208,0.38); }
.ds-section-icon svg, .ds-section-icon i { color: #fff; }

.ds-section-info { flex: 1; }
.ds-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ds-section-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mid);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.ds-section-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ── Divider ── */
.ds-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-4) 0;
  border: none;
}
.ds-divider--strong { background: var(--border-base); }

/* ── Empty state ── */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  gap: var(--space-3);
  text-align: center;
}
.ds-empty-icon {
  font-size: 2.2rem;
  opacity: 0.4;
  filter: grayscale(30%);
  margin-bottom: var(--space-1);
}
.ds-empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--cream2);
}
.ds-empty-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mid);
  letter-spacing: 0.04em;
  max-width: 260px;
}

/* ── Stat divider row (number + label inline) ── */
.ds-stat-inline {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.ds-stat-inline-value {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ds-stat-inline-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Notification / toast strip ── */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-md);
  font-family: var(--font-body);
  margin-bottom: var(--space-4);
}
.ds-alert--info    { background: rgba(74,143,212,0.1);  border-color: rgba(74,143,212,0.3);  color: var(--blue);  }
.ds-alert--success { background: rgba(61,170,106,0.1);  border-color: rgba(61,170,106,0.3);  color: var(--green); }
.ds-alert--warning { background: rgba(200,146,42,0.1);  border-color: rgba(200,146,42,0.3);  color: var(--gold);  }
.ds-alert--error   { background: rgba(212,80,80,0.1);   border-color: rgba(212,80,80,0.3);   color: var(--red);   }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-MOTION                                                          ║
   ║  Keyframe animations + utility classes for enter/exit/hover effects  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Page/section entrance ── */
@keyframes dsSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dsScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes dsDropIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)      scale(1); }
}
@keyframes dsSlideInRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dsPop {
  0%   { transform: scale(0.92); opacity: 0; }
  55%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes dsShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Utility classes ── */
.ds-animate-slide-up   { animation: dsSlideUp  var(--dur-base) var(--ease-fast) both; }
.ds-animate-fade-in    { animation: dsFadeIn   var(--dur-base) var(--ease-smooth) both; }
.ds-animate-scale-in   { animation: dsScaleIn  var(--dur-base) var(--ease-fast) both; }
.ds-animate-drop-in    { animation: dsDropIn   var(--dur-base) var(--ease-fast) both; }
.ds-animate-pop        { animation: dsPop      var(--dur-slow) var(--ease-spring) both; }
.ds-animate-slide-right{ animation: dsSlideInRight var(--dur-base) var(--ease-fast) both; }

/* Staggered children via CSS counters */
/* Usage: add .ds-stagger to parent, children get delay automatically */
.ds-stagger > * { animation-fill-mode: both; }
.ds-stagger > *:nth-child(1)  { animation-delay:  0ms; }
.ds-stagger > *:nth-child(2)  { animation-delay: 60ms; }
.ds-stagger > *:nth-child(3)  { animation-delay:120ms; }
.ds-stagger > *:nth-child(4)  { animation-delay:180ms; }
.ds-stagger > *:nth-child(5)  { animation-delay:240ms; }
.ds-stagger > *:nth-child(6)  { animation-delay:300ms; }
.ds-stagger > *:nth-child(7)  { animation-delay:360ms; }
.ds-stagger > *:nth-child(8)  { animation-delay:420ms; }

/* ── Hover lift utilities ── */
/* Apply to any element that should lift on hover */
.ds-hover-lift {
  transition:
    transform  var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth);
}
.ds-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.ds-hover-lift--sm:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ds-hover-lift--lg:hover  { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

/* ── Shimmer loading skeleton ── */
.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-elevated) 0%,
    rgba(255,255,255,0.06) 50%,
    var(--surface-elevated) 100%
  );
  background-size: 200% 100%;
  animation: dsShimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}
.ds-skeleton--text  { height: 0.75rem; width: 60%; margin-bottom: 0.5rem; }
.ds-skeleton--title { height: 1.2rem; width: 40%; margin-bottom: 0.75rem; }
.ds-skeleton--avatar { width: var(--avatar-md); height: var(--avatar-md); border-radius: 50%; }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-LIGHT                                                           ║
   ║  Light-mode token + component overrides                              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

body.light-mode {
  /* ── Surface tokens ── */
  --surface-base:     #F5F6FA;
  --surface-raised:   #FFFFFF;
  --surface-elevated: #F5F6FA;
  --surface-overlay:  #ECEEF5;

  /* ── Border tokens ── */
  --border-subtle: #E8E8EE;
  --border-base:   #D8D8E0;
  --border-strong: #C8C8D0;
  --border-focus:  rgba(244,98,42,0.55);

  /* ── Shadow tokens — lighter ── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 18px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);

  /* ── Colored glow (reduced opacity) ── */
  --shadow-glow-gold:   0 6px 24px rgba(244,98,42,0.30);
  --shadow-glow-green:  0 6px 24px rgba(43,191,176,0.30);
  --shadow-glow-red:    0 6px 24px rgba(212,80,80,0.28);
  --shadow-glow-blue:   0 6px 24px rgba(59,111,232,0.28);

  /* ── Table ── */
  --table-header-bg:    rgba(248,249,253,0.97);
  --table-row-hover-bg: rgba(244,98,42,0.03);
  --table-separator:    #F0F0F6;

  /* ── Input ── */
  --input-bg:     #FFFFFF;
  --input-border: #E8E8EE;

  /* ── Progress ── */
  --progress-track-bg: #ECEEF5;

  /* ── Card ── */
  --card-bg:     #FFFFFF;
  --card-border: #E8E8EE;
}

/* ── Light-mode component overrides ── */
body.light-mode .ds-card::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.9) 40%,
    rgba(255,255,255,0.6) 60%,
    transparent 100%
  );
}
body.light-mode .ds-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

body.light-mode .ds-btn--primary {
  background: linear-gradient(135deg, #E8551E 0%, #F4622A 55%, #E8551E 100%);
  box-shadow: 0 4px 18px rgba(244,98,42,0.38), 0 1px 0 rgba(255,255,255,0.28) inset;
}
body.light-mode .ds-btn--primary:hover {
  background: linear-gradient(135deg, #F06830 0%, #FF7A48 55%, #F06830 100%);
  box-shadow: 0 7px 28px rgba(244,98,42,0.55), 0 1px 0 rgba(255,255,255,0.35) inset;
}
body.light-mode .ds-btn--secondary {
  border-color: #E8E8EE;
  color: #2E2E3E;
  background: #FFFFFF;
}
body.light-mode .ds-btn--secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(244,98,42,0.05);
}
body.light-mode .ds-btn--ghost { color: #7A7A92; }
body.light-mode .ds-btn--ghost:hover { color: #1A1A2E; background: rgba(0,0,0,0.04); }
body.light-mode .ds-btn--danger { background: rgba(244,98,42,0.08); color: #C0400A; border-color: rgba(244,98,42,0.22); }
body.light-mode .ds-btn-icon { color: #9A9AB8; }
body.light-mode .ds-btn-icon--edit:hover   { background: rgba(59,111,232,0.1);  color: #2A5AD8; border-color: rgba(59,111,232,0.25); }
body.light-mode .ds-btn-icon--delete:hover { background: rgba(244,98,42,0.1);   color: #C0400A; border-color: rgba(244,98,42,0.22);  }
body.light-mode .ds-btn-icon--add:hover    { background: rgba(244,98,42,0.1);   color: var(--gold); border-color: rgba(244,98,42,0.22); }

body.light-mode .ds-badge--success { background: rgba(43,191,176,0.12); color: #1A9A8C; border-color: rgba(43,191,176,0.28); box-shadow: none; }
body.light-mode .ds-badge--warning { background: rgba(244,98,42,0.1);   color: #C04010; border-color: rgba(244,98,42,0.22); box-shadow: none; }
body.light-mode .ds-badge--error   { background: rgba(212,80,80,0.1);   color: #B83030; border-color: rgba(212,80,80,0.22); box-shadow: none; }
body.light-mode .ds-badge--info    { background: rgba(59,111,232,0.1);  color: #2A5AD8; border-color: rgba(59,111,232,0.22); box-shadow: none; }
body.light-mode .ds-badge--neutral { background: #F5F6FA; color: #7A7A92; border-color: #E8E8EE; }
body.light-mode .ds-badge--gold    { background: rgba(244,98,42,0.1);   color: #C04010; border-color: rgba(244,98,42,0.22); box-shadow: none; }
body.light-mode .ds-badge--purple  { background: rgba(59,111,232,0.08); color: #5050B8; border-color: rgba(59,111,232,0.2); box-shadow: none; }

body.light-mode .ds-input,
body.light-mode .ds-select,
body.light-mode .ds-textarea,
body.light-mode .ds-search {
  background: #FFFFFF;
  border-color: #E8E8EE;
  color: #1A1A2E;
}
body.light-mode .ds-input:focus,
body.light-mode .ds-select:focus,
body.light-mode .ds-textarea:focus,
body.light-mode .ds-search:focus {
  border-color: rgba(244,98,42,0.55);
  box-shadow: 0 0 0 3px rgba(244,98,42,0.1);
}
body.light-mode .ds-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A0A0B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
body.light-mode .ds-label { color: #7A7A92; }

body.light-mode th {
  background: var(--table-header-bg) !important;
  color: rgba(120,120,160,0.8) !important;
  border-bottom-color: #ECEEF5 !important;
}
body.light-mode td { border-bottom-color: var(--table-separator) !important; color: #2E2E3E !important; }
body.light-mode tbody tr:not(.appt-row):hover td { background: var(--table-row-hover-bg) !important; }
body.light-mode tbody tr:not(.appt-row):hover td:first-child { box-shadow: inset 3px 0 0 rgba(244,98,42,0.5) !important; }

body.light-mode .ds-progress { background: #ECEEF5; }
body.light-mode .ds-progress-bar { background: linear-gradient(90deg, #E8551E, #F4622A); }
body.light-mode .ds-progress-bar--success { background: linear-gradient(90deg, #2BBFB0, #3DDDD0) !important; box-shadow: none; }
body.light-mode .ds-progress-bar--warning { background: linear-gradient(90deg, #E8551E, #F4622A) !important; box-shadow: none; }
body.light-mode .ds-progress-bar--error   { background: linear-gradient(90deg, #C84040, #E07878) !important; box-shadow: none; }

body.light-mode .ds-avatar { background: #F5F6FA; color: #5A5A72; box-shadow: 0 0 0 2px rgba(244,98,42,0.18), 0 2px 8px rgba(0,0,0,0.1); }
body.light-mode .ds-avatar:hover { box-shadow: 0 0 0 3px rgba(244,98,42,0.35), 0 4px 14px rgba(0,0,0,0.12); }
body.light-mode .ds-avatar--blue  { background: rgba(59,111,232,0.1); color: #2A5AD8; }
body.light-mode .ds-avatar--green { background: rgba(43,191,176,0.1); color: #1A9A8C; }
body.light-mode .ds-avatar--gold  { background: rgba(244,98,42,0.1); color: var(--gold); }

body.light-mode .ds-skeleton {
  background: linear-gradient(
    90deg,
    #ECEEF5 0%,
    #F5F6FA 50%,
    #ECEEF5 100%
  );
  background-size: 200% 100%;
}

body.light-mode .ds-section-head { border-bottom-color: #ECEEF5; }
body.light-mode .ds-card-header   { border-bottom-color: #ECEEF5; }
body.light-mode .ds-card-footer   { border-top-color: #ECEEF5; }
body.light-mode .ds-divider       { background: #ECEEF5; }
body.light-mode .ds-alert--info    { background: rgba(59,111,232,0.06);  border-color: rgba(59,111,232,0.2);  }
body.light-mode .ds-alert--success { background: rgba(43,191,176,0.06);  border-color: rgba(43,191,176,0.2);  }
body.light-mode .ds-alert--warning { background: rgba(244,98,42,0.06);   border-color: rgba(244,98,42,0.2);   }
body.light-mode .ds-alert--error   { background: rgba(212,80,80,0.06);   border-color: rgba(212,80,80,0.2);   }
body.light-mode .ds-tag { background: #F5F6FA; border-color: #E8E8EE; color: #5A5A72; }
body.light-mode .ds-tag:hover { border-color: var(--gold); color: var(--gold); background: rgba(244,98,42,0.06); }
body.light-mode .ds-card--glass {
  background: rgba(255,255,255,0.96);
  border-color: #E8E8EE;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-ICON-BADGES  — Standardized icon badge system                   ║
   ║  Purple stat card + badge variants + salon target card               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Purple stat card variant (matches existing green/blue/red/gold) ── */
.stat-card.purple {
  background: linear-gradient(135deg, #7A40C0 0%, #9A60E0 100%);
  box-shadow: 0 6px 24px rgba(122,64,192,0.32);
  border: none;
}
.stat-card.purple::before { display: none; }
.stat-card.purple .stat-label,
.stat-card.purple .stat-value,
.stat-card.purple .stat-sub,
.stat-card.purple .stat-trend { color: #fff !important; }

/* Shimmer overlay for purple (matches other colored variants) */
.stat-card.purple:not(.appt-kpi-card)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 40%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* Hover for purple appt-kpi-card */
.appt-kpi-card.purple:hover {
  box-shadow: 0 24px 56px rgba(122,64,192,0.42), 0 6px 16px rgba(0,0,0,0.45) !important;
}

/* Light mode purple */
body.light-mode .stat-card.purple {
  background: linear-gradient(135deg, #7A40C0 0%, #9A60E0 100%);
  box-shadow: 0 6px 20px rgba(122,64,192,0.28);
  border: none;
}
body.light-mode .stat-card.purple .stat-label,
body.light-mode .stat-card.purple .stat-value,
body.light-mode .stat-card.purple .stat-sub,
body.light-mode .stat-card.purple .stat-trend { color: #fff !important; }
body.light-mode .appt-kpi-card.purple:hover {
  box-shadow: 0 20px 48px rgba(122,64,192,0.3), 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* ── White icon badge — for dynamically-colored cards (e.g. Profit) ── */
.appt-kpi-badge--white {
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 0 22px rgba(255,255,255,0.25);
}

/* ── Purple icon badge ── */
.appt-kpi-badge--purple {
  background: rgba(162,120,240,0.22);
  box-shadow: 0 0 0 6px rgba(122,64,192,0.12), 0 0 22px rgba(122,64,192,0.45);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  §DS-TARGET-CARDS  — Salon Revenue Target card premium design        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.salon-target-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-base);
  border-radius: 14px;
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth);
}

/* Top-edge shimmer */
.salon-target-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
  pointer-events: none;
}

.salon-target-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Light mode */
body.light-mode .salon-target-card {
  background: #FFFFFF;
  border-color: #E8E8EE;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.light-mode .salon-target-card[data-period="daily"] {
  background: #EEF3FF;
  border-color: #C5D5F5;
}
body.light-mode .salon-target-card[data-period="weekly"] {
  background: #F3EEFF;
  border-color: #D5C5F5;
}
body.light-mode .salon-target-card[data-period="monthly"] {
  background: #FFF8EE;
  border-color: #F0DDB0;
}
body.light-mode .salon-target-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
body.light-mode .salon-target-card::before { display: none; }
/* Light mode text contrast for tinted cards */
body.light-mode .salon-target-card[data-period="daily"] .stat-value,
body.light-mode .salon-target-card[data-period="weekly"] .stat-value,
body.light-mode .salon-target-card[data-period="monthly"] .stat-value { color: var(--bg) !important; }

/* Progress track */
.salon-target-progress {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
body.light-mode .salon-target-progress {
  background: rgba(0,0,0,0.07);
}

/* Progress fill with animated shine */
.salon-target-fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  min-width: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.salon-target-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: targetShine 2.4s ease-in-out infinite;
}
@keyframes targetShine {
  0%           { transform: translateX(-150%); }
  60%, 100%    { transform: translateX(220%); }
}

/* ── TOOLBAR SELECT — standardized filter dropdown ── */
.toolbar-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--cream2);
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  font-size: 0.78rem;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  height: 38px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.toolbar-select:hover {
  border-color: var(--gold);
  color: var(--gold);
  background-color: var(--bg3);
}
.toolbar-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200,146,42,0.15);
}
body.light-mode .toolbar-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  border-color: #E8E8EE;
  color: #3A3A4A;
}
body.light-mode .toolbar-select:hover {
  border-color: var(--orange, #F4622A);
  color: var(--orange, #F4622A);
}