/* ============================================================
   design-system.css — RabidPOS Design System v1.0
   Style : macOS Sonoma-inspired · Glassmorphism · Gradients
   Palette : Blanc · Or #D4AF37 · Bleu Océan #0077B6
   Chargé AVANT rabidpos.css / style.css
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Brand — identique aux couleurs existantes */
  --ds-blue:         #0077B6;
  --ds-blue-600:     #005F92;
  --ds-blue-700:     #1B4F72;
  --ds-blue-50:      #E8F4FD;
  --ds-blue-100:     #CFE7F8;
  --ds-gold:         #D4AF37;
  --ds-gold-300:     #E8C956;
  --ds-gold-700:     #B8961E;
  --ds-gold-50:      #FBF6E8;

  /* Neutres */
  --ds-white:        #FFFFFF;
  --ds-ink:          #0B1220;
  --ds-ink-2:        #1A2332;
  --ds-ink-3:        #334155;
  --ds-muted:        #64748B;
  --ds-muted-2:      #94A3B8;
  --ds-line:         #E2E8F0;
  --ds-line-2:       #EEF2F7;

  /* Surfaces */
  --ds-bg:           #F5F7FB;
  --ds-bg-2:         #EEF3FA;
  --ds-surface:      #FFFFFF;
  --ds-surface-alt:  #F8FAFC;

  /* Glass (macOS) */
  --ds-glass:        rgba(255,255,255,0.72);
  --ds-glass-strong: rgba(255,255,255,0.86);
  --ds-glass-weak:   rgba(255,255,255,0.55);
  --ds-glass-border: rgba(255,255,255,0.65);
  --ds-glass-inner:  inset 0 1px 0 rgba(255,255,255,0.9);

  /* Statuts */
  --ds-green:        #16A34A;
  --ds-green-50:     #ECFDF5;
  --ds-red:          #DC2626;
  --ds-red-50:       #FEF2F2;
  --ds-amber:        #D97706;
  --ds-amber-50:     #FFFBEB;
  --ds-violet:       #6366F1;

  /* Gradients signature */
  --ds-grad-hero:
    radial-gradient(1100px 600px at 12% -10%, rgba(0,119,182,0.16), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(212,175,55,0.16), transparent 55%),
    linear-gradient(180deg, #F7FBFF 0%, #EEF3FA 100%);
  --ds-grad-brand:   linear-gradient(135deg, #0077B6 0%, #1B4F72 100%);
  --ds-grad-gold:    linear-gradient(135deg, #E8C956 0%, #D4AF37 50%, #B8961E 100%);
  --ds-grad-sheen:   linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 100%);
  --ds-grad-ocean:   linear-gradient(135deg, #E8F4FD 0%, #CFE7F8 100%);
  --ds-grad-aurora:
    radial-gradient(circle at 20% 30%, rgba(99,102,241,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,0.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(0,119,182,0.10), transparent 45%);

  /* Spacing scale (4px base) */
  --ds-sp-1:  4px;
  --ds-sp-2:  8px;
  --ds-sp-3:  12px;
  --ds-sp-4:  16px;
  --ds-sp-5:  20px;
  --ds-sp-6:  24px;
  --ds-sp-7:  32px;
  --ds-sp-8:  40px;
  --ds-sp-9:  56px;
  --ds-sp-10: 72px;
  --ds-sp-11: 96px;

  /* Radius */
  --ds-r-xs: 6px;
  --ds-r-sm: 10px;
  --ds-r-md: 14px;
  --ds-r-lg: 18px;
  --ds-r-xl: 24px;
  --ds-r-2xl: 32px;
  --ds-r-pill: 999px;

  /* Shadows (multi-layer, subtle) */
  --ds-sh-xs: 0 1px 2px rgba(15,23,42,0.05);
  --ds-sh-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
  --ds-sh-md: 0 4px 10px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
  --ds-sh-lg: 0 10px 24px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.05);
  --ds-sh-xl: 0 24px 60px rgba(15,23,42,0.12), 0 8px 24px rgba(15,23,42,0.08);
  --ds-sh-brand: 0 10px 30px rgba(0,119,182,0.25), 0 4px 12px rgba(0,119,182,0.15);
  --ds-sh-gold:  0 10px 30px rgba(212,175,55,0.30), 0 4px 12px rgba(212,175,55,0.18);
  --ds-sh-focus: 0 0 0 4px rgba(0,119,182,0.18);

  /* Blur */
  --ds-blur-sm: 8px;
  --ds-blur-md: 16px;
  --ds-blur-lg: 24px;

  /* Typography */
  --ds-font:      'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --ds-font-disp: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --ds-fs-xs:   12px;
  --ds-fs-sm:   13px;
  --ds-fs-base: 15px;
  --ds-fs-md:   16px;
  --ds-fs-lg:   18px;
  --ds-fs-xl:   22px;
  --ds-fs-2xl:  28px;
  --ds-fs-3xl:  36px;
  --ds-fs-4xl:  48px;
  --ds-fs-5xl:  64px;

  /* Motion */
  --ds-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ds-dur-fast:    160ms;
  --ds-dur:         240ms;
  --ds-dur-slow:    420ms;
  --ds-dur-xslow:   720ms;

  /* Z-index scale */
  --ds-z-base:   1;
  --ds-z-nav:    50;
  --ds-z-sticky: 100;
  --ds-z-modal:  500;
  --ds-z-toast:  900;
}

/* ── Global refinements (non-destructive) ───────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(0,119,182,0.18); color: var(--ds-ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--ds-sh-focus);
  border-radius: var(--ds-r-sm);
}

/* Scrollbar macOS-like (webkit) */
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  {
  background: rgba(15,23,42,0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--ds-dur) var(--ds-ease);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.32); background-clip: padding-box; border: 2px solid transparent; }

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes ds-fade-up {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ds-slide-right {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ds-slide-left {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ds-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes ds-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes ds-aurora-drift {
  0%,100% { transform: translate(0,0) scale(1);   opacity: 0.7; }
  33%     { transform: translate(30px,-20px) scale(1.1); opacity: 0.9; }
  66%     { transform: translate(-20px,10px) scale(0.95); opacity: 0.6; }
}
@keyframes ds-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,119,182,0.35); }
  80%  { box-shadow: 0 0 0 14px rgba(0,119,182,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,119,182,0); }
}
@keyframes ds-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ds-tab-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ds-skeleton {
  0%   { background-position: -180% 0; }
  100% { background-position:  180% 0; }
}

/* ── Reveal on scroll (opt-in via [data-ds-reveal]) ─────── */
[data-ds-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--ds-dur-slow) var(--ds-ease-out),
              transform var(--ds-dur-slow) var(--ds-ease-out);
  will-change: opacity, transform;
}
[data-ds-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-ds-reveal][data-ds-delay="1"] { transition-delay: 80ms; }
[data-ds-reveal][data-ds-delay="2"] { transition-delay: 160ms; }
[data-ds-reveal][data-ds-delay="3"] { transition-delay: 240ms; }
[data-ds-reveal][data-ds-delay="4"] { transition-delay: 320ms; }
[data-ds-reveal][data-ds-delay="5"] { transition-delay: 400ms; }

/* ── Utilities ──────────────────────────────────────────── */
.ds-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ds-sp-6);
}
.ds-container--wide { max-width: 1360px; }
.ds-container--narrow { max-width: 900px; }

.ds-gradient-text {
  background: var(--ds-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ds-gradient-text--gold {
  background: var(--ds-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ds-shimmer {
  background: linear-gradient(90deg, var(--ds-ink) 0%, var(--ds-blue) 45%, var(--ds-gold) 55%, var(--ds-ink) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ds-shimmer 6s linear infinite;
}

.ds-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-line), transparent);
  border: 0;
  margin: var(--ds-sp-7) 0;
}

/* ── Buttons ────────────────────────────────────────────── */
.ds-btn {
  --btn-bg: var(--ds-white);
  --btn-fg: var(--ds-ink-2);
  --btn-bd: var(--ds-line);
  --btn-sh: var(--ds-sh-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--ds-r-pill);
  box-shadow: var(--btn-sh);
  cursor: pointer;
  transition:
    transform var(--ds-dur-fast) var(--ds-ease),
    box-shadow var(--ds-dur) var(--ds-ease),
    background var(--ds-dur) var(--ds-ease),
    color var(--ds-dur) var(--ds-ease),
    border-color var(--ds-dur) var(--ds-ease);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}
.ds-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ds-grad-sheen);
  opacity: 0;
  transition: opacity var(--ds-dur) var(--ds-ease);
  pointer-events: none;
}
.ds-btn:hover   { transform: translateY(-1px); box-shadow: var(--ds-sh-md); }
.ds-btn:hover::before { opacity: 0.4; }
.ds-btn:active  { transform: translateY(0); }

.ds-btn--primary {
  --btn-bg: var(--ds-grad-brand);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-sh: var(--ds-sh-brand);
}
.ds-btn--primary:hover { box-shadow: 0 14px 34px rgba(0,119,182,0.32), 0 6px 14px rgba(0,119,182,0.20); }

.ds-btn--gold {
  --btn-bg: var(--ds-grad-gold);
  --btn-fg: #1B4F72;
  --btn-bd: transparent;
  --btn-sh: var(--ds-sh-gold);
}
.ds-btn--gold:hover { box-shadow: 0 14px 34px rgba(212,175,55,0.38), 0 6px 14px rgba(212,175,55,0.22); }

.ds-btn--ghost {
  --btn-bg: rgba(255,255,255,0.6);
  --btn-fg: var(--ds-blue);
  --btn-bd: rgba(0,119,182,0.18);
  backdrop-filter: blur(var(--ds-blur-sm));
  -webkit-backdrop-filter: blur(var(--ds-blur-sm));
}
.ds-btn--ghost:hover { --btn-bg: rgba(255,255,255,0.9); }

.ds-btn--sm { min-height: 36px; padding: 8px 16px; font-size: var(--ds-fs-sm); }
.ds-btn--lg { min-height: 54px; padding: 16px 32px; font-size: var(--ds-fs-md); }

.ds-btn[disabled], .ds-btn.is-disabled {
  opacity: 0.55; cursor: not-allowed; transform: none !important;
}

/* ── Cards & glass surfaces ─────────────────────────────── */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-sm);
  padding: var(--ds-sp-6);
  transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-card:hover { box-shadow: var(--ds-sh-lg); }

.ds-card--glass {
  background: var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-sh-md), var(--ds-glass-inner);
  backdrop-filter: blur(var(--ds-blur-md)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--ds-blur-md)) saturate(1.4);
}
.ds-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-sh-xl);
}

.ds-card--outline {
  background: transparent;
  border: 1px solid var(--ds-line);
  box-shadow: none;
}

/* ── Badges ─────────────────────────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  color: var(--ds-blue-700);
  background: var(--ds-blue-50);
  border: 1px solid rgba(0,119,182,0.18);
  border-radius: var(--ds-r-pill);
  letter-spacing: 0.02em;
}
.ds-badge--gold   { color: var(--ds-gold-700); background: var(--ds-gold-50); border-color: rgba(212,175,55,0.30); }
.ds-badge--green  { color: #065F46; background: var(--ds-green-50); border-color: rgba(22,163,74,0.25); }
.ds-badge--red    { color: #7F1D1D; background: var(--ds-red-50); border-color: rgba(220,38,38,0.25); }
.ds-badge--amber  { color: #78350F; background: var(--ds-amber-50); border-color: rgba(217,119,6,0.25); }
.ds-badge--glass  { color: var(--ds-blue); background: var(--ds-glass); border-color: var(--ds-glass-border); backdrop-filter: blur(var(--ds-blur-sm)); -webkit-backdrop-filter: blur(var(--ds-blur-sm)); }
.ds-badge .ds-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Inputs ─────────────────────────────────────────────── */
.ds-input,
.ds-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-base);
  color: var(--ds-ink-2);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease);
}
.ds-input::placeholder { color: var(--ds-muted-2); }
.ds-input:hover,
.ds-select:hover { border-color: rgba(0,119,182,0.28); }
.ds-input:focus,
.ds-select:focus { outline: none; border-color: var(--ds-blue); box-shadow: var(--ds-sh-focus); }

/* ── Tables ─────────────────────────────────────────────── */
.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ds-fs-sm);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  box-shadow: var(--ds-sh-sm);
}
.ds-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: var(--ds-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-muted);
  background: var(--ds-surface-alt);
  border-bottom: 1px solid var(--ds-line);
}
.ds-table tbody td {
  padding: 14px 16px;
  color: var(--ds-ink-2);
  border-bottom: 1px solid var(--ds-line-2);
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background var(--ds-dur) var(--ds-ease); }
.ds-table tbody tr:hover { background: var(--ds-bg-2); }

/* ── Tabs ───────────────────────────────────────────────── */
.ds-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  background: var(--ds-glass);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-r-pill);
  backdrop-filter: blur(var(--ds-blur-md));
  -webkit-backdrop-filter: blur(var(--ds-blur-md));
  box-shadow: var(--ds-sh-sm);
}
.ds-tabs__btn {
  position: relative;
  padding: 10px 20px;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-sm);
  font-weight: 600;
  color: var(--ds-muted);
  background: transparent;
  border: 0;
  border-radius: var(--ds-r-pill);
  cursor: pointer;
  transition: color var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease);
}
.ds-tabs__btn:hover { color: var(--ds-ink-2); }
.ds-tabs__btn.is-active {
  color: #fff;
  background: var(--ds-grad-brand);
  box-shadow: var(--ds-sh-brand);
}

/* ── Sidebar (macOS) ────────────────────────────────────── */
.ds-sidebar {
  width: 260px;
  min-height: 100vh;
  padding: var(--ds-sp-5);
  background: var(--ds-glass-strong);
  border-right: 1px solid var(--ds-glass-border);
  backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.4);
  box-shadow: var(--ds-sh-md);
}
.ds-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: 10px 14px;
  margin-bottom: 2px;
  font-size: var(--ds-fs-sm);
  font-weight: 500;
  color: var(--ds-ink-3);
  border-radius: var(--ds-r-md);
  cursor: pointer;
  transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.ds-sidebar__item:hover { background: rgba(0,119,182,0.06); color: var(--ds-blue); }
.ds-sidebar__item.is-active {
  color: #fff;
  background: var(--ds-grad-brand);
  box-shadow: var(--ds-sh-brand);
}

/* ── Stat cards ─────────────────────────────────────────── */
.ds-stat {
  position: relative;
  padding: var(--ds-sp-6);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-sh-sm);
  overflow: hidden;
}
.ds-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ds-grad-brand);
  opacity: 0.9;
}
.ds-stat--gold::before { background: var(--ds-grad-gold); }
.ds-stat__label {
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  color: var(--ds-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ds-stat__value {
  font-family: var(--ds-font-disp);
  font-size: var(--ds-fs-3xl);
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ds-stat__hint {
  margin-top: 6px;
  font-size: var(--ds-fs-xs);
  color: var(--ds-muted);
}

/* ── Aurora background (pour hero / dashboards) ─────────── */
.ds-aurora {
  position: relative;
  background: var(--ds-grad-hero);
  overflow: hidden;
  isolation: isolate;
}
.ds-aurora::before,
.ds-aurora::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.ds-aurora::before {
  top: -200px; left: -140px;
  background: radial-gradient(circle, rgba(0,119,182,0.34), transparent 60%);
  animation: ds-aurora-drift 18s var(--ds-ease-inout) infinite;
}
.ds-aurora::after {
  bottom: -220px; right: -160px;
  background: radial-gradient(circle, rgba(212,175,55,0.32), transparent 60%);
  animation: ds-aurora-drift 22s var(--ds-ease-inout) infinite reverse;
}
.ds-aurora > * { position: relative; z-index: 1; }

/* ── Dot grid (subtle pattern) ──────────────────────────── */
.ds-dotgrid {
  background-image: radial-gradient(rgba(0,119,182,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-ds-reveal] { opacity: 1 !important; transform: none !important; }
}