/* ============================================================
   STRATOS DESIGN SYSTEM

   Token-based design system that merges the geometric brand
   identity (punch, cut-corners, gradient CTAs) with the
   engineering-grade consistency of the panel/metric system.

   Usage: Import once globally. Reference tokens via var(--ds-*).
   Use .ds-* utility classes for common patterns.
   Keep Tailwind for LAYOUT ONLY (flex, grid, gap, padding).
   ============================================================ */

/* ----------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ---------------------------------------------------------- */
:root {
  /* ---- Surfaces ---- */
  --ds-bg-base:        #0f1117;    /* Page background - blue-shifted black */
  --ds-bg-surface:     #1a1d25;    /* Panel/card background */
  --ds-bg-raised:      #1f2128;    /* Raised elements within panels */
  --ds-bg-overlay:     #252830;    /* Dropdown/popover backgrounds */
  --ds-bg-input:       #1a1d25;    /* Form input backgrounds */

  /* ---- Borders ---- */
  --ds-border-subtle:  #2a2d35;    /* Default panel borders */
  --ds-border-muted:   #3b3f4a;    /* Input borders, dividers */
  --ds-border-focus:   #60a5fa;    /* Focus rings */

  /* ---- Brand Colors ---- */
  --ds-punch:          #d24e35;    /* Primary brand - buttons, accents */
  --ds-punch-hover:    #b8412b;    /* Primary hover state */
  --ds-punch-glow:     rgba(210, 78, 53, 0.4);
  --ds-punch-light:    #ff6b4a;    /* Lighter punch for gradients */
  --ds-punch-warm:     #ffaa88;    /* Warmest punch variant */

  /* ---- Semantic Colors ---- */
  --ds-blue:           #60a5fa;    /* Info, links, metric values */
  --ds-blue-deep:      #1e40af;    /* Primary button bg */
  --ds-blue-bright:    #3b82f6;    /* Primary button border */
  --ds-green:          #22c55e;    /* Success, enabled, connected */
  --ds-success:        #22c55e;    /* Alias for --ds-green */
  --ds-green-bg:       #052e16;    /* Success background */
  --ds-red:            #ef4444;    /* Error, danger, disconnected */
  --ds-red-bg:         #2d0a0a;    /* Error background */
  --ds-yellow:         #eab308;    /* Warning, attention */
  --ds-yellow-bg:      #451a03;    /* Warning background */
  --ds-purple:         #8b5cf6;    /* Tags, special elements */
  --ds-cyan:           #06b6d4;    /* Tertiary info */
  --ds-pink:           #ec4899;    /* Highlights */

  /* ---- Text ---- */
  --ds-text-primary:   #e0e0e0;    /* Primary body text */
  --ds-text-secondary: #9ca3af;    /* Labels, captions */
  --ds-text-muted:     #6b7280;    /* Placeholders, disabled */
  --ds-text-bright:    #ffffff;    /* Headings, emphasis */

  /* ---- Typography ---- */
  --ds-font-mono:      'JetBrains Mono', 'SF Mono', monospace;
  --ds-font-sans:      'Outfit', sans-serif;
  --ds-text-xs:        10px;
  --ds-text-sm:        11px;
  --ds-text-base:      12px;
  --ds-text-md:        13px;
  --ds-text-lg:        14px;
  --ds-text-xl:        16px;
  --ds-text-2xl:       20px;
  --ds-text-3xl:       24px;

  /* ---- Spacing ---- */
  --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-8:        32px;
  --ds-space-10:       40px;

  /* ---- Radius ---- */
  --ds-radius-sm:      3px;
  --ds-radius-md:      6px;
  --ds-radius-lg:      8px;
  --ds-radius-xl:      12px;

  /* ---- Shadows ---- */
  --ds-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
  --ds-shadow-md:      0 2px 8px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg:      0 4px 16px rgba(0, 0, 0, 0.5);
  --ds-shadow-glow:    0 0 20px rgba(210, 78, 53, 0.3);

  /* ---- Transitions ---- */
  --ds-transition:     all 0.15s ease;
  --ds-transition-slow: all 0.3s ease;

  /* ---- Layout ---- */
  --ds-sidebar-width:  220px;
  --ds-header-height:  52px;

  /* ---- Cut-corner sizes ---- */
  --ds-cut-xs: 4px;
  --ds-cut-sm: 6px;
  --ds-cut-md: 10px;
  --ds-cut-lg: 14px;
}


/* ----------------------------------------------------------
   2. BASE RESETS
   ---------------------------------------------------------- */
.ds-root {
  font-family: var(--ds-font-sans);
  background: var(--ds-bg-base);
  color: var(--ds-text-primary);
  font-size: var(--ds-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ds-root * {
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   3. PANELS & SURFACES
   ---------------------------------------------------------- */
.ds-panel {
  background: var(--ds-bg-surface);
  border: none;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.ds-panel + .ds-panel {
  margin-top: var(--ds-space-3);
}

.ds-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ds-space-2);
}

.ds-panel-title {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  margin: 0;
}

/* Raised card (within panels or standalone) */
.ds-card {
  background: var(--ds-bg-raised);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
}


/* ----------------------------------------------------------
   4. METRIC ROWS
   ---------------------------------------------------------- */
.ds-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--ds-bg-raised);
}

.ds-metric-row:last-child {
  border-bottom: none;
}

.ds-metric-label {
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-sm);
}

.ds-metric-value {
  color: var(--ds-blue);
  font-size: var(--ds-text-sm);
  font-weight: 700;
}

.ds-metric-value.punch { color: var(--ds-punch); }
.ds-metric-value.green { color: var(--ds-green); }
.ds-metric-value.yellow { color: var(--ds-yellow); }
.ds-metric-value.red { color: var(--ds-red); }
.ds-metric-value.muted { color: var(--ds-text-muted); }


/* ----------------------------------------------------------
   5. METRIC CARDS (large stat displays)
   ---------------------------------------------------------- */
.ds-metric-card {
  background: var(--ds-bg-surface);
  border: none;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.ds-metric-card-value {
  font-size: var(--ds-text-3xl);
  font-weight: 700;
  color: var(--ds-text-bright);
  line-height: 1.2;
}

.ds-metric-card-label {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-secondary);
  margin-top: var(--ds-space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ds-metric-card-detail {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-1);
}

.ds-metric-card.accent {
  background: linear-gradient(135deg, var(--ds-bg-surface) 0%, rgba(210, 78, 53, 0.04) 100%);
}

.ds-metric-card.accent .ds-metric-card-value {
  color: var(--ds-punch);
}


/* ----------------------------------------------------------
   6. STATUS INDICATORS
   ---------------------------------------------------------- */
.ds-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.ds-dot.green  { background: var(--ds-green);  box-shadow: 0 0 4px var(--ds-green); }
.ds-dot.red    { background: var(--ds-red);    box-shadow: 0 0 4px var(--ds-red); }
.ds-dot.yellow { background: var(--ds-yellow); box-shadow: 0 0 4px var(--ds-yellow); }
.ds-dot.gray   { background: var(--ds-text-muted); }
.ds-dot.blue   { background: var(--ds-blue);   box-shadow: 0 0 4px var(--ds-blue); }
.ds-dot.punch  { background: var(--ds-punch);  box-shadow: 0 0 4px var(--ds-punch); }

.ds-status-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  padding: 2px 0;
}


/* ----------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------- */
.ds-btn {
  padding: 6px 14px;
  border: 1px solid var(--ds-border-muted);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-surface);
  color: var(--ds-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  transition: var(--ds-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  line-height: 1.4;
}

.ds-btn:hover {
  background: var(--ds-bg-overlay);
  border-color: var(--ds-border-focus);
}

.ds-btn:active {
  transform: translateY(1px);
}

.ds-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Primary - punch brand */
.ds-btn-punch {
  background: var(--ds-punch);
  border-color: var(--ds-punch);
  color: var(--ds-text-bright);
}

.ds-btn-punch:hover {
  background: var(--ds-punch-hover);
  border-color: var(--ds-punch-hover);
  box-shadow: var(--ds-shadow-glow);
}

/* Blue primary */
.ds-btn-primary {
  background: var(--ds-blue-deep);
  border-color: var(--ds-blue-bright);
  color: var(--ds-text-bright);
}

.ds-btn-primary:hover {
  background: var(--ds-blue-bright);
}

/* Ghost buttons */
.ds-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-text-secondary);
}

.ds-btn-ghost:hover {
  background: var(--ds-bg-raised);
  color: var(--ds-text-primary);
}

/* Danger */
.ds-btn-danger {
  border-color: var(--ds-red);
  color: var(--ds-red);
  background: transparent;
}

.ds-btn-danger:hover {
  background: var(--ds-red-bg);
}

/* Cut-corners (geometric brand element) — always borderless to avoid clip conflicts */
.ds-cut-corners {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  border: none;
}

/* Top-right only cut (for cards, panels) */
.ds-cut-tr-sm { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); border: none; }
.ds-cut-tr-md { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); border: none; }
.ds-cut-tr-lg { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); border: none; }


/* ----------------------------------------------------------
   8. FORM INPUTS
   ---------------------------------------------------------- */
.ds-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--ds-bg-input);
  border: 1px solid var(--ds-border-muted);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-base);
  transition: var(--ds-transition);
}

.ds-input:focus {
  outline: none;
  border-color: var(--ds-border-focus);
}

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

.ds-select {
  padding: 8px 12px;
  background: var(--ds-bg-input);
  border: none;
  clip-path: polygon(0 0, calc(100% - var(--ds-cut-sm)) 0, 100% var(--ds-cut-sm), 100% 100%, var(--ds-cut-sm) 100%, 0 calc(100% - var(--ds-cut-sm)));
  color: var(--ds-text-primary);
  font-family: inherit;
  font-size: var(--ds-text-base);
  transition: var(--ds-transition);
  cursor: pointer;
}

.ds-select:focus {
  outline: none;
  background: var(--ds-bg-raised);
}

/* Checkbox/radio with punch accent */
.ds-checkbox,
.ds-radio {
  accent-color: var(--ds-punch);
}


/* ----------------------------------------------------------
   9. DATA TABLES
   ---------------------------------------------------------- */
.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ds-text-sm);
}

.ds-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.ds-table th {
  background: var(--ds-bg-overlay);
  color: var(--ds-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--ds-text-xs);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ds-border-subtle);
  cursor: pointer;
  user-select: none;
  transition: var(--ds-transition);
}

.ds-table th:hover {
  color: var(--ds-text-primary);
  background: var(--ds-bg-surface);
}

.ds-table th:first-child {
  border-radius: var(--ds-radius-md) 0 0 0;
}

.ds-table th:last-child {
  border-radius: 0 var(--ds-radius-md) 0 0;
}

.ds-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-bg-raised);
  color: var(--ds-text-primary);
  transition: var(--ds-transition);
}

.ds-table tbody tr {
  transition: var(--ds-transition);
}

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

.ds-table tbody tr:hover td {
  border-bottom-color: var(--ds-border-subtle);
}

/* Sortable header indicator */
.ds-sort-indicator {
  display: inline-block;
  margin-left: 4px;
  color: var(--ds-blue);
  font-size: 9px;
}

/* Accent row (for highlighted/active items) */
.ds-table tbody tr.accent {
  border-left: 3px solid var(--ds-punch);
}


/* ----------------------------------------------------------
   10. TAGS & BADGES
   ---------------------------------------------------------- */
.ds-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  clip-path: polygon(0 0, calc(100% - var(--ds-cut-xs)) 0, 100% var(--ds-cut-xs), 100% 100%, var(--ds-cut-xs) 100%, 0 calc(100% - var(--ds-cut-xs)));
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.6;
}

.ds-tag.green  { background: rgba(34, 197, 94, 0.15);  color: var(--ds-green); }
.ds-tag.red    { background: rgba(239, 68, 68, 0.15);  color: var(--ds-red); }
.ds-tag.blue   { background: rgba(96, 165, 250, 0.15); color: var(--ds-blue); }
.ds-tag.yellow { background: rgba(234, 179, 8, 0.15);  color: var(--ds-yellow); }
.ds-tag.punch  { background: rgba(210, 78, 53, 0.15);  color: var(--ds-punch); }
.ds-tag.gray   { background: rgba(107, 114, 128, 0.15); color: var(--ds-text-muted); }


/* ----------------------------------------------------------
   11. LOG ENTRIES (pixel/event logs)
   ---------------------------------------------------------- */
.ds-log-entry {
  padding: 4px 8px;
  margin: 2px 0;
  background: var(--ds-bg-raised);
  border-radius: var(--ds-radius-sm);
  border-left: 3px solid var(--ds-text-muted);
  font-size: var(--ds-text-xs);
  font-family: var(--ds-font-mono);
}

.ds-log-entry.success { border-left-color: var(--ds-green); }
.ds-log-entry.error   { border-left-color: var(--ds-red); background: var(--ds-red-bg); }
.ds-log-entry.warn    { border-left-color: var(--ds-yellow); }
.ds-log-entry.info    { border-left-color: var(--ds-blue); }
.ds-log-entry.accent  { border-left-color: var(--ds-punch); }


/* ----------------------------------------------------------
   12. NAVBAR
   ---------------------------------------------------------- */
.ds-navbar {
  height: var(--ds-header-height);
  background: var(--ds-bg-base);
  border-bottom: 1px solid var(--ds-border-subtle);
  display: flex;
  align-items: center;
  padding: 0 var(--ds-space-4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.ds-navbar-brand {
  font-size: var(--ds-text-lg);
  font-weight: 700;
  color: var(--ds-text-bright);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ds-navbar-brand span {
  color: var(--ds-punch);
}


/* ----------------------------------------------------------
   13. SIDEBAR
   ---------------------------------------------------------- */
.ds-sidebar {
  width: var(--ds-sidebar-width);
  background: var(--ds-bg-base);
  border-right: 1px solid var(--ds-border-subtle);
  padding: var(--ds-space-4);
  position: sticky;
  top: var(--ds-header-height);
  height: calc(100vh - var(--ds-header-height));
  overflow-y: auto;
  flex-shrink: 0;
}

.ds-sidebar-section {
  margin-bottom: var(--ds-space-6);
}

.ds-sidebar-section-title {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--ds-space-2);
  padding: 0 var(--ds-space-2);
}

.ds-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 8px var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-md);
  text-decoration: none;
  transition: var(--ds-transition);
}

.ds-sidebar-link:hover {
  background: var(--ds-bg-surface);
  color: var(--ds-text-primary);
}

.ds-sidebar-link.active {
  background: var(--ds-bg-surface);
  color: var(--ds-text-bright);
  border-left: 2px solid var(--ds-punch);
}


/* ----------------------------------------------------------
   14. MODALS
   ---------------------------------------------------------- */
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-modal {
  background: var(--ds-bg-surface);
  border: none;
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-6);
  max-width: 480px;
  width: 90%;
  box-shadow: var(--ds-shadow-lg);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.ds-modal-title {
  font-size: var(--ds-text-xl);
  font-weight: 700;
  color: var(--ds-text-bright);
  margin: 0 0 var(--ds-space-2) 0;
}

.ds-modal-subtitle {
  font-size: var(--ds-text-md);
  color: var(--ds-text-secondary);
  margin: 0 0 var(--ds-space-5) 0;
}


/* ----------------------------------------------------------
   15. ANIMATED CTA (geometric brand element)
   ---------------------------------------------------------- */
.ds-cta-animated {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.ds-cta-animated:hover {
  animation: ds-pulseShadow 1.5s ease-in-out infinite;
  filter: brightness(1.1);
}

.ds-cta-animated .ds-cta-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, var(--ds-punch), var(--ds-punch-light), var(--ds-punch), var(--ds-punch-warm), var(--ds-punch));
  background-size: 400% 400%;
  animation: ds-gradientFlow 8s ease infinite;
}

.ds-cta-animated .ds-cta-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, var(--ds-punch-glow) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 140, 90, 0.3) 0%, transparent 50%);
  animation: ds-pulseOverlay 6s ease-in-out infinite;
}

.ds-cta-animated .ds-cta-wave {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ds-punch-glow), rgba(255, 107, 74, 0.35), rgba(255, 140, 90, 0.3), var(--ds-punch-glow));
  background-size: 200% 100%;
  animation: ds-waveFlow 10s linear infinite;
  mix-blend-mode: screen;
}

/* Corner targeting brackets */
.ds-bracket-wrapper {
  position: relative;
}

.ds-bracket-wrapper .ds-bracket {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 20;
}

.ds-bracket-wrapper .ds-bracket.tl { top: -15px; left: -15px; border-right: none; border-bottom: none; transform: translate(-80px, -80px) scale(0); }
.ds-bracket-wrapper .ds-bracket.tr { top: -15px; right: -15px; border-left: none; border-bottom: none; transform: translate(80px, -80px) scale(0); }
.ds-bracket-wrapper .ds-bracket.bl { bottom: -15px; left: -15px; border-right: none; border-top: none; transform: translate(-80px, 80px) scale(0); }
.ds-bracket-wrapper .ds-bracket.br { bottom: -15px; right: -15px; border-left: none; border-top: none; transform: translate(80px, 80px) scale(0); }

.ds-bracket-wrapper:hover .ds-bracket {
  border-color: rgba(255, 255, 255, 0.9);
  transform: translate(0, 0) scale(1);
}


/* ----------------------------------------------------------
   16. KEYFRAMES
   ---------------------------------------------------------- */
@keyframes ds-gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ds-pulseOverlay {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

@keyframes ds-waveFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@keyframes ds-pulseShadow {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255, 107, 74, 0.8),
                0 0 60px rgba(255, 107, 74, 0.5),
                0 0 100px rgba(210, 78, 53, 0.3);
  }
  50% {
    box-shadow: 0 0 50px rgba(255, 140, 90, 0.9),
                0 0 100px rgba(255, 107, 74, 0.6),
                0 0 150px rgba(210, 78, 53, 0.4);
  }
}

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


/* ----------------------------------------------------------
   17. UTILITY HELPERS
   ---------------------------------------------------------- */
.ds-mono { font-family: var(--ds-font-mono); }
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-secondary { color: var(--ds-text-secondary); }
.ds-text-bright { color: var(--ds-text-bright); }
.ds-text-punch { color: var(--ds-punch); }
.ds-text-blue { color: var(--ds-blue); }
.ds-text-green { color: var(--ds-green); }
.ds-text-red { color: var(--ds-red); }
.ds-animate-in { animation: ds-fadeIn 0.3s ease-out; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-border-subtle); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-border-muted); }


/* ----------------------------------------------------------
   18. BACKGROUND TEXTURES (v2)
   ---------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(210, 78, 53, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 78, 53, 0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
}

body > * { position: relative; z-index: 2; }


/* ----------------------------------------------------------
   19. STAGGERED ANIMATIONS (v2)
   ---------------------------------------------------------- */
@keyframes ds-cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ds-modalIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Staggered card entrance */
.ds-stagger-in {
  opacity: 0;
  transform: translateY(12px);
  animation: ds-cardIn 0.4s ease-out forwards;
}
.ds-stagger-in:nth-child(1) { animation-delay: 0.05s; }
.ds-stagger-in:nth-child(2) { animation-delay: 0.1s; }
.ds-stagger-in:nth-child(3) { animation-delay: 0.15s; }
.ds-stagger-in:nth-child(4) { animation-delay: 0.2s; }
.ds-stagger-in:nth-child(5) { animation-delay: 0.25s; }
.ds-stagger-in:nth-child(6) { animation-delay: 0.3s; }

/* Staggered row entrance */
.ds-row-stagger {
  opacity: 0;
  transform: translateX(-8px);
  animation: ds-rowIn 0.3s ease-out forwards;
}
.ds-row-stagger:nth-child(1) { animation-delay: 0.15s; }
.ds-row-stagger:nth-child(2) { animation-delay: 0.2s; }
.ds-row-stagger:nth-child(3) { animation-delay: 0.25s; }
.ds-row-stagger:nth-child(4) { animation-delay: 0.3s; }
.ds-row-stagger:nth-child(5) { animation-delay: 0.35s; }

/* Modal entrance */
.ds-modal {
  animation: ds-modalIn 0.25s ease-out;
}


/* ----------------------------------------------------------
   20. CUT-CORNER HELPERS (v2 variable-based)
   ---------------------------------------------------------- */
.ds-cut-xs { clip-path: polygon(0 0, calc(100% - var(--ds-cut-xs)) 0, 100% var(--ds-cut-xs), 100% 100%, var(--ds-cut-xs) 100%, 0 calc(100% - var(--ds-cut-xs))); border: none; border-radius: 0; }
.ds-cut-sm { clip-path: polygon(0 0, calc(100% - var(--ds-cut-sm)) 0, 100% var(--ds-cut-sm), 100% 100%, var(--ds-cut-sm) 100%, 0 calc(100% - var(--ds-cut-sm))); border: none; border-radius: 0; }
.ds-cut-md { clip-path: polygon(0 0, calc(100% - var(--ds-cut-md)) 0, 100% var(--ds-cut-md), 100% 100%, var(--ds-cut-md) 100%, 0 calc(100% - var(--ds-cut-md))); border: none; border-radius: 0; }
.ds-cut-lg { clip-path: polygon(0 0, calc(100% - var(--ds-cut-lg)) 0, 100% var(--ds-cut-lg), 100% 100%, var(--ds-cut-lg) 100%, 0 calc(100% - var(--ds-cut-lg))); border: none; border-radius: 0; }

/* Top-right only cut */
.ds-cut-tr { clip-path: polygon(0 0, calc(100% - var(--ds-cut-sm)) 0, 100% var(--ds-cut-sm), 100% 100%, 0 100%); border: none; border-radius: 0; }


/* ----------------------------------------------------------
   21. SPARKLINES (v2)
   ---------------------------------------------------------- */
.ds-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  opacity: 0.5;
}

.ds-sparkline .bar {
  width: 3px;
  border-radius: 1px;
  background: var(--ds-text-muted);
  transition: background 0.2s;
}

.ds-sparkline.punch .bar { background: rgba(210, 78, 53, 0.4); }
.ds-sparkline.blue .bar  { background: rgba(96, 165, 250, 0.35); }
.ds-sparkline.green .bar { background: rgba(34, 197, 94, 0.35); }


/* ----------------------------------------------------------
   22. TABLE HOVER ENHANCEMENTS (v2)
   ---------------------------------------------------------- */
.ds-table tbody tr:hover {
  background: rgba(210, 78, 53, 0.02);
}

.ds-table tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--ds-punch);
}

/* Sort arrow styling */
.ds-sort-arrow {
  color: var(--ds-punch);
  font-size: 9px;
  margin-left: 3px;
}


/* ----------------------------------------------------------
   23. STATUS BAR (v2)
   ---------------------------------------------------------- */
.ds-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: var(--ds-bg-surface);
  border-top: 1px solid var(--ds-border-subtle);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 10px;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-mono);
  gap: 20px;
  z-index: 100;
}

.ds-status-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--ds-punch), transparent);
}