/* =====================================================
   Yellow Ball Shop OS — Enterprise Design System (v11.0)
   Inspired by Linear, Notion, Salesforce Lightning
   Professional-grade UI with glass morphism & depth
   ===================================================== */

/* ==================== FONT IMPORT ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==================== DESIGN TOKENS ==================== */
:root {
  /* Font stack — Inter for UI, system fallback */
  --yb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Radii — tighter, more refined */
  --yb-radius-xs: 0.25rem;
  --yb-radius-sm: 0.375rem;
  --yb-radius-md: 0.5rem;
  --yb-radius-lg: 0.625rem;
  --yb-radius-xl: 0.75rem;
  --yb-radius-2xl: 1rem;
  --yb-radius-3xl: 1.25rem;
  --yb-radius-full: 9999px;
  /* Elevation system — layered depth (enterprise-grade) */
  --yb-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --yb-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --yb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --yb-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --yb-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --yb-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --yb-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);
  /* Ring focus */
  --yb-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  /* Transitions — smooth, professional */
  --yb-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --yb-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --yb-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Spacing scale — 4px base grid */
  --yb-space-xs: 0.25rem;
  --yb-space-sm: 0.5rem;
  --yb-space-md: 0.75rem;
  --yb-space-lg: 1rem;
  --yb-space-xl: 1.25rem;
  --yb-space-2xl: 1.5rem;
  --yb-space-3xl: 2rem;
  --yb-space-4xl: 2.5rem;
  --yb-space-5xl: 3rem;
  /* ===== SEMANTIC COLOR TOKENS ===== */
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --purple: #8b5cf6;
  --purple-hover: #7c3aed;
  --gold: #D4A017;
  --gold-hover: #B8860B;
  --orange: #f97316;
  --orange-hover: #ea580c;
  --cyan: #0891b2;
  --pink: #ec4899;
  /* Chart color palette — 8 harmonious colors */
  --chart-1: var(--accent, #2563eb);
  --chart-2: var(--success, #16a34a);
  --chart-3: var(--warning, #f59e0b);
  --chart-4: var(--danger, #dc2626);
  --chart-5: var(--purple, #8b5cf6);
  --chart-6: var(--cyan, #0891b2);
  --chart-7: var(--pink, #ec4899);
  --chart-8: var(--orange, #f97316);
  /* Button sizing tokens */
  --btn-padding-sm: 0.375rem 0.75rem;
  --btn-padding-md: 0.5rem 1rem;
  --btn-padding-lg: 0.625rem 1.25rem;
  --btn-font-sm: 0.75rem;
  --btn-font-md: 0.8125rem;
  --btn-font-lg: 0.875rem;
  /* Sidebar width */
  --sidebar-width: 16rem;
  /* Glass morphism tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 12px;
}

/* Dark mode glass adjustments */
html[data-theme="dark"] {
  --glass-bg: rgba(30, 41, 59, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;
  --yb-shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --yb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.25), 0 2px 4px -2px rgba(0,0,0,0.2);
  --yb-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
}

/* ==================== BASE RESET ==================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--yb-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--yb-font); letter-spacing: -0.011em; line-height: 1.5; }

/* ==================== THEME-AWARE TEXT ==================== */
.c-text { color: var(--text) !important; }
.c-muted { color: var(--text-muted) !important; }
.c-accent { color: var(--accent) !important; }
.c-success { color: var(--success) !important; }
.c-danger { color: var(--danger) !important; }
.c-info { color: var(--info, #2563eb) !important; }
.c-warning { color: var(--warning) !important; }
.c-purple { color: var(--purple) !important; }
.c-orange { color: var(--orange) !important; }
.c-gold { color: var(--gold) !important; }
.c-cyan { color: var(--cyan) !important; }
.c-pink { color: var(--pink) !important; }
.c-white { color: white !important; }

/* ==================== THEME-AWARE BACKGROUNDS ==================== */
.bg-surface { background: var(--surface) !important; }
.bg-base { background: var(--bg) !important; }
.bg-accent { background: var(--accent) !important; }
.bg-accent-soft { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.bg-accent-med { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
.bg-success-soft { background: color-mix(in srgb, var(--success) 10%, transparent) !important; }
.bg-danger-soft { background: color-mix(in srgb, var(--danger) 10%, transparent) !important; }
.bg-info-soft { background: color-mix(in srgb, var(--info, #2563eb) 10%, transparent) !important; }
.bg-warning-soft { background: color-mix(in srgb, var(--warning) 10%, transparent) !important; }
.bg-purple-soft { background: color-mix(in srgb, var(--purple) 10%, transparent) !important; }
.bg-orange-soft { background: color-mix(in srgb, var(--orange) 10%, transparent) !important; }
.bg-gold-soft { background: color-mix(in srgb, var(--gold) 10%, transparent) !important; }
.bg-cyan-soft { background: color-mix(in srgb, var(--cyan) 10%, transparent) !important; }
.bg-pink-soft { background: color-mix(in srgb, var(--pink) 10%, transparent) !important; }
.bg-gradient-accent { background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important; }

/* ==================== THEME-AWARE BORDERS ==================== */
.b-default { border: 1px solid var(--border) !important; }
.b-accent { border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.b-success { border: 1px solid color-mix(in srgb, var(--success) 20%, transparent) !important; }
.b-danger { border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent) !important; }
.b-info { border: 1px solid color-mix(in srgb, var(--info, #2563eb) 20%, transparent) !important; }
.b-warning { border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent) !important; }
.b-purple { border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent) !important; }
.bt-default { border-top: 1px solid var(--border) !important; }
.bb-default { border-bottom: 1px solid var(--border) !important; }
.bl-default { border-left: 1px solid var(--border) !important; }
.br-default { border-right: 1px solid var(--border) !important; }

/* ==================== SURFACE CARDS (Enterprise-grade) ==================== */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
  padding: var(--yb-space-xl);
  box-shadow: var(--yb-shadow-xs);
  transition: box-shadow var(--yb-transition), border-color var(--yb-transition);
}
.surface-card:hover { box-shadow: var(--yb-shadow-sm); }
.surface-card-sm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-lg);
  padding: var(--yb-space-md);
  box-shadow: var(--yb-shadow-xs);
}
.bg-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-lg);
  padding: var(--yb-space-md);
}

/* Enterprise glass card — primary content container */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
  padding: var(--yb-space-xl);
  box-shadow: var(--yb-shadow-xs);
  transition: box-shadow var(--yb-transition), border-color var(--yb-transition), transform var(--yb-transition);
}
.glass:hover { box-shadow: var(--yb-shadow-sm); }
.glass-interactive:hover { box-shadow: var(--yb-shadow-md); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); transform: translateY(-1px); }

/* Frosted glass — for overlays, dropdowns, popovers */
.glass-frost {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--yb-radius-xl);
}

/* Inset card — recessed container for nested content */
.glass-inset {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-lg);
  padding: var(--yb-space-lg);
  box-shadow: var(--yb-shadow-inner);
}

/* ==================== TYPOGRAPHY ==================== */
.text-display { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: var(--text); }
.text-heading { font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.text-subheading { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--text-muted); }
.text-body { font-size: 0.8125rem; line-height: 1.5; color: var(--text); }
.text-caption { font-size: 0.6875rem; line-height: 1.4; color: var(--text-muted); letter-spacing: 0.01em; }
.text-micro { font-size: 0.5625rem; line-height: 1.3; color: var(--text-muted); }
.text-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.text-title-lg { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--text); }
.text-title-sm { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }

/* ==================== CONSISTENT SPACING ==================== */
.gap-section { gap: var(--yb-space-2xl); }
.gap-widget { gap: var(--yb-space-lg); }
.gap-card { gap: var(--yb-space-md); }
.gap-tight { gap: var(--yb-space-sm); }

/* ==================== INTERACTIVE STATES ==================== */
.hover-lift { transition: transform var(--yb-transition), box-shadow var(--yb-transition); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--yb-shadow-md); }
.hover-accent:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important; }
.hover-glow:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.active-press:active { transform: scale(0.97); }
.clickable { cursor: pointer; user-select: none; transition: all var(--yb-transition); }
.clickable:hover { opacity: 0.85; }
.interactive-card { transition: all var(--yb-transition); cursor: pointer; }
.interactive-card:hover { box-shadow: var(--yb-shadow-md); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); transform: translateY(-1px); }

/* ==================== KEYBOARD NAVIGATION (WCAG 2.4.7) ==================== */
.keyboard-nav *:focus { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
.keyboard-nav *:focus:not(:focus-visible) { outline: none !important; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==================== SCREEN READER ONLY (WCAG 1.3.1) ==================== */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border-width: 0 !important;
}

/* ==================== REDUCED MOTION (WCAG 2.3.3) ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== HIGH CONTRAST (WCAG 1.4.11) ==================== */
@media (forced-colors: active) {
  .badge, .alert-strip, .stat-glow, .glass, .surface-card {
    border: 1px solid ButtonText;
  }
  .btn-primary, .action-btn { border: 1px solid ButtonText; }
}

/* ==================== PREFERS COLOR SCHEME ==================== */
@media (prefers-color-scheme: dark) {
  :root { --auto-dark: 1; }
}

/* ==================== LAZY LOADING PLACEHOLDER ==================== */
.lazy-placeholder {
  min-height: 200px; display: flex; align-items: center; justify-content: center;
}
.lazy-placeholder .spinner {
  width: 24px; height: 24px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== PERFORMANCE: GPU HINTS ==================== */
.gpu-layer { will-change: transform; transform: translateZ(0); }

/* ==================== UNIFIED BUTTON SYSTEM (Enterprise) ==================== */
/* 3 tiers: Solid (primary CTA), Soft (secondary), Ghost (tertiary) */
/* Sizes: sm (default), md, lg — consistent across all variants */
.btn, .btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-ghost, .btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: var(--btn-padding-sm); border-radius: var(--yb-radius-lg);
  font-size: var(--btn-font-sm); font-weight: 500; line-height: 1.25;
  font-family: var(--yb-font); letter-spacing: -0.006em;
  transition: all var(--yb-transition); cursor: pointer;
  white-space: nowrap; border: 1px solid transparent;
  text-decoration: none; position: relative; overflow: hidden;
  box-shadow: var(--yb-shadow-xs);
}
.btn:hover, .btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-info:hover, .btn-warning:hover, .btn-solid:hover { box-shadow: var(--yb-shadow-sm); }
.btn:active, .btn-primary:active, .btn-success:active, .btn-danger:active,
.btn-info:active, .btn-warning:active, .btn-ghost:active, .btn-solid:active {
  transform: scale(0.97); box-shadow: none;
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-success:focus-visible,
.btn-danger:focus-visible, .btn-ghost:focus-visible, .btn-solid:focus-visible {
  box-shadow: var(--yb-ring);
}
/* Size modifiers */
.btn-md { padding: var(--btn-padding-md); font-size: var(--btn-font-md); }
.btn-lg { padding: var(--btn-padding-lg); font-size: var(--btn-font-lg); }
.btn-xs { padding: 0.25rem 0.5rem; font-size: 0.6875rem; }
.btn-icon { padding: 0.375rem; width: 2rem; height: 2rem; }
.btn-icon-md { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }

/* -- Tier 1: SOLID (primary CTAs) -- */
.btn-solid { background: var(--accent); color: white; border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: brightness(1.05); }
.btn-solid-success { background: var(--success); color: white; border-color: var(--success); }
.btn-solid-success:hover { filter: brightness(1.05); }
.btn-solid-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-solid-danger:hover { filter: brightness(1.05); }

/* -- Tier 2: SOFT (secondary actions) — default for .btn-{semantic} -- */
.btn-primary {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.btn-success {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent);
}
.btn-success:hover { background: color-mix(in srgb, var(--success) 18%, transparent); }
.btn-danger {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.btn-info {
  background: color-mix(in srgb, var(--info, #2563eb) 10%, transparent);
  color: var(--info, #2563eb); border-color: color-mix(in srgb, var(--info, #2563eb) 20%, transparent);
}
.btn-info:hover { background: color-mix(in srgb, var(--info, #2563eb) 18%, transparent); }
.btn-warning {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent);
}
.btn-warning:hover { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.btn-purple {
  background: color-mix(in srgb, var(--purple) 10%, transparent);
  color: var(--purple); border-color: color-mix(in srgb, var(--purple) 20%, transparent);
}
.btn-purple:hover { background: color-mix(in srgb, var(--purple) 18%, transparent); }

/* -- Tier 3: GHOST (tertiary / cancel / dismiss) -- */
.btn-ghost {
  background: var(--bg); color: var(--text-muted); border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ==================== STAT CARDS (Enterprise) ==================== */
.stat-glow { 
  box-shadow: var(--yb-shadow-xs); 
  transition: all var(--yb-transition);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
}
.stat-glow:hover { 
  box-shadow: var(--yb-shadow-md); 
  transform: translateY(-2px); 
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

/* ==================== ALERT STRIPS (Enterprise) ==================== */
.alert-strip {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem; border-radius: var(--yb-radius-lg);
  margin-bottom: 0.5rem; transition: all var(--yb-transition);
  font-size: 0.8125rem; font-weight: 500;
}
.alert-strip-danger { background: color-mix(in srgb, var(--danger) 6%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 15%, transparent); }
.alert-strip-warning { background: color-mix(in srgb, var(--warning) 6%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 15%, transparent); }
.alert-strip-info { background: color-mix(in srgb, var(--info, #2563eb) 6%, transparent); border: 1px solid color-mix(in srgb, var(--info, #2563eb) 15%, transparent); }
.alert-strip-success { background: color-mix(in srgb, var(--success) 6%, transparent); border: 1px solid color-mix(in srgb, var(--success) 15%, transparent); }

/* ==================== DASHBOARD SECTIONS ==================== */
.dash-section { margin-bottom: var(--yb-space-lg); }
.dash-section-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0; margin-bottom: 0.75rem;
  cursor: pointer; user-select: none; transition: opacity var(--yb-transition);
}
.dash-section-header:hover { opacity: 0.8; }
.dash-section-header h3 { font-size: 0.75rem; font-weight: 700; flex: 1; margin: 0; }
.dash-section-content { overflow: hidden; transition: max-height 0.3s ease-out; }
.dash-section-content.collapsed { max-height: 0 !important; }
.dash-chevron { transition: transform 0.2s ease; font-size: 0.6rem; }
.dash-secondary { opacity: 0.95; }
.focus-mode .dash-secondary { display: none; }

/* ==================== STAGGER ANIMATIONS (Enterprise) ==================== */
.stagger-1 { animation: fadeSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.0s both; }
.stagger-2 { animation: fadeSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both; }
.stagger-3 { animation: fadeSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; }
.stagger-4 { animation: fadeSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both; }
.stagger-5 { animation: fadeSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ==================== NAV GROUPS (Enterprise Sidebar) ==================== */
.nav-group { margin-bottom: 0.125rem; }
.nav-group-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; user-select: none; border-radius: var(--yb-radius-md);
  transition: all var(--yb-transition); color: var(--text-muted);
}
.nav-group-header:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text); }
.nav-group-chevron { font-size: 0.5rem; transition: transform 0.2s ease; margin-left: auto; opacity: 0.5; }
[dir="rtl"] .nav-group-chevron { margin-left: 0; margin-right: auto; }
.nav-group-chevron.open { transform: rotate(0deg); }
.nav-group-chevron.closed { transform: rotate(-90deg); }
.nav-group-items { overflow: hidden; transition: max-height 0.25s ease-out; }
.nav-group-items.open { max-height: 500px; }
.nav-group-items.closed { max-height: 0; }

/* ==================== SIDEBAR ACTIVE STATE (Enterprise) ==================== */
.sidebar-nav-btn.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  color: var(--accent) !important;
  font-weight: 600;
  position: relative;
}
.sidebar-nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2.5px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  transition: all var(--yb-transition);
}
[dir="rtl"] .sidebar-nav-btn.active::before {
  left: auto;
  right: 0;
  border-radius: 4px 0 0 4px;
}

/* ==================== BREADCRUMB (Enterprise) ==================== */
.yb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.yb-breadcrumb-sep { color: var(--border); font-size: 0.5rem; opacity: 0.6; }
.yb-breadcrumb-link {
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--yb-transition);
  text-decoration: none;
}
.yb-breadcrumb-link:hover { color: var(--accent); }
.yb-breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* ==================== SIDEBAR SEARCH (Enterprise) ==================== */
.sidebar-search { padding: 0.5rem 0.75rem; }
.sidebar-search input {
  width: 100%; padding: 0.375rem 0.75rem 0.375rem 2rem; font-size: 0.75rem;
  border-radius: var(--yb-radius-lg); background: var(--bg); color: var(--text);
  border: 1px solid var(--border); outline: none; transition: all var(--yb-transition);
  min-height: 32px !important; font-family: var(--yb-font);
}
.sidebar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.sidebar-search input::placeholder { color: var(--text-muted); opacity: 0.7; }
.sidebar-search .search-icon { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); font-size: 0.6rem; pointer-events: none; opacity: 0.5; }
[dir="rtl"] .sidebar-search .search-icon { left: auto; right: 0.625rem; }
[dir="rtl"] .sidebar-search input { padding: 0.375rem 2rem 0.375rem 0.75rem; }

/* ==================== NAVIGATION ITEMS (Enterprise) ==================== */
.sidebar-nav-btn { 
  min-height: 34px; 
  transition: all var(--yb-transition); 
  font-size: 0.8125rem; 
  font-weight: 450;
  border-radius: var(--yb-radius-md);
}
.sidebar-nav-btn:hover { background: color-mix(in srgb, var(--accent) 6%, transparent) !important; }
.sidebar-nav-btn:focus-visible { box-shadow: var(--yb-ring); }

/* ==================== TOAST / NOTIFICATIONS ==================== */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }
[dir="rtl"] .toast-container { right: auto; left: 1rem; }

/* ==================== MODAL OVERLAY (Enterprise) ==================== */
.modal-overlay { background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ==================== DATA TABLE (Enterprise) ==================== */
.yb-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
.yb-table thead th { 
  text-align: left; padding: 0.625rem 0.75rem; font-size: 0.6875rem; font-weight: 600; 
  color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.yb-table tbody td { padding: 0.625rem 0.75rem; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.yb-table tbody tr { transition: background var(--yb-transition-fast); }
.yb-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.yb-table tbody tr:last-child td { border-bottom: none; }
[dir="rtl"] .yb-table thead th { text-align: right; }
[dir="rtl"] .yb-table tbody td { text-align: right; }

/* ==================== FORM INPUTS (Enterprise - Touch-friendly: 44px min) ==================== */
.yb-input {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.8125rem; line-height: 1.25rem;
  border-radius: var(--yb-radius-lg); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); min-height: 40px; box-sizing: border-box;
  transition: all var(--yb-transition); font-family: var(--yb-font);
}
.yb-input:focus { 
  border-color: var(--accent); outline: none; 
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.yb-input::placeholder { color: var(--text-muted); opacity: 0.6; }

/* ==================== PERF METRICS PANEL ==================== */
.perf-panel {
  position: fixed; bottom: 0.5rem; left: 0.5rem; z-index: 9998;
  padding: 0.5rem 0.75rem; border-radius: var(--yb-radius-md);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 0.6rem; color: var(--text-muted); box-shadow: var(--yb-shadow-md);
  transition: opacity var(--yb-transition);
}
.perf-panel:hover { opacity: 1 !important; }

/* ==================== SPACE WIDGET ==================== */
.space-widget { margin-bottom: var(--yb-space-lg); }

/* ==================== SCROLLBAR (Enterprise — Minimal) ==================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 25%, transparent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 40%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 25%, transparent) transparent; }

/* ==================== PRINT MEDIA (QW2 — A4 friendly) ==================== */
@media print {
  /* Hide navigation, overlays, actions */
  .sidebar, .desktop-sidebar, .bottom-nav, .mobile-sidebar-overlay,
  .cart-float, .ptr-indicator, .pwa-install-banner, header,
  .perf-panel, .toast-container, .btn-primary, .btn-ghost,
  .action-btn, .no-print, .chip-accent, .chip-info, .chip-success,
  .chip-amber, .theme-toggle, .topbar, #yb-cmd-palette,
  #dash-customize-overlay, .modal-overlay, .pwa-banner,
  button[onclick*="navigate"], button[onclick*="Modal"],
  button[onclick*="export"], button[onclick*="Export"],
  [class*="itf-"], [id^="itf-"] { display: none !important; }

  /* Reset layout margins */
  .ml-64, .mr-64, .pl-64 { margin: 0 !important; padding: 0 !important; }
  main { padding: 0.5cm !important; margin: 0 !important; max-width: 100% !important; }
  body { background: white !important; color: #111 !important; font-size: 11pt !important; }

  /* Card / glass reset for print */
  .glass, .surface-card, [class*="bg-surface"], [class*="card-surface"] {
    border: 1px solid #d1d5db !important; box-shadow: none !important;
    background: white !important; break-inside: avoid;
  }

  /* Table formatting for A4 */
  table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt !important; }
  table th { background: #f3f4f6 !important; color: #374151 !important;
    border-bottom: 2px solid #6b7280 !important; padding: 4px 6px !important;
    font-weight: 600 !important; text-align: left !important; }
  table td { border-bottom: 1px solid #e5e7eb !important; padding: 3px 6px !important;
    color: #374151 !important; }
  table tr:nth-child(even) td { background: #f9fafb !important; }
  thead { display: table-header-group; }
  tbody tr { break-inside: avoid; }

  /* Grid → stack for narrow print */
  .grid { display: block !important; }
  .grid > * { margin-bottom: 0.5cm !important; }
  .grid.grid-cols-2 > *, .grid.grid-cols-3 > *, .grid.grid-cols-4 > *,
  .grid.grid-cols-5 > * { width: 100% !important; }

  /* Stat cards: inline row */
  .stat-glow, .rounded-xl.p-4.text-center { break-inside: avoid; }

  /* Badge / chip colors → grayscale friendly */
  .badge { border: 1px solid #9ca3af !important; padding: 1px 6px !important; font-size: 8pt !important; }

  /* Hide canvas charts — can't print */
  canvas { display: none !important; }

  /* Ensure text is readable */
  .c-text, .c-muted, [class*="text-"] { color: #374151 !important; }
  a { color: #2563eb !important; text-decoration: underline !important; }

  /* Page setup */
  @page { size: A4; margin: 1.5cm; }
  h1, h2, h3 { break-after: avoid; }
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 1023px) {
  .mobile-hidden { display: none !important; }
  .topbar-search-wrap { display: none !important; }
  .topbar-search-mobile { display: flex !important; }
  .mobile-menu-btn { display: flex !important; }
  .desktop-sidebar { display: none !important; }
  main { padding: 0.75rem !important; }
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    display: flex; justify-content: space-around; align-items: center;
    padding: 0.375rem 0 calc(0.375rem + env(safe-area-inset-bottom, 0));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.125rem; padding: 0.375rem; min-width: 48px; min-height: 48px;
    font-size: 0.6rem; color: var(--text-muted); position: relative; cursor: pointer;
    -webkit-tap-highlight-color: transparent; border-radius: var(--yb-radius-sm);
    transition: color var(--yb-transition);
  }
  .bottom-nav-item.active { color: var(--accent); }
  .bottom-nav-item.active::after {
    content: ''; position: absolute; top: 0; left: 25%; right: 25%;
    height: 2px; background: var(--accent); border-radius: 0 0 2px 2px;
  }
  .bottom-nav-item i { font-size: 1.1rem; }
  .bnav-badge {
    position: absolute; top: 2px; right: calc(50% - 18px);
    min-width: 16px; height: 16px; border-radius: 8px;
    font-size: 0.55rem; font-weight: 700; display: flex;
    align-items: center; justify-content: center; padding: 0 4px;
  }
  .cart-float { bottom: 72px !important; right: 12px !important; }
  .mobile-sidebar-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
  }
}

@media (min-width: 1024px) {
  .bottom-nav { display: none !important; }
  .mobile-menu-btn { display: none !important; }
  .topbar-search-mobile { display: none !important; }
}

/* ==================== TOUCH / INTERACTION ==================== */
.bottom-nav-item, .action-btn, button { transition: all var(--yb-transition); }
.bottom-nav-item:active, .action-btn:active { transform: scale(0.96); }
.ptr-indicator {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 0 0 12px 12px; font-size: 12px; font-weight: 600;
  z-index: 999; opacity: 0; transition: opacity 0.2s;
}
.ptr-indicator.visible { opacity: 1; }

/* ==================== PWA INSTALL BANNER ==================== */
.pwa-install-banner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: var(--yb-radius-xl);
  box-shadow: var(--yb-shadow-lg); z-index: 300; max-width: 360px; width: calc(100% - 2rem);
}
@media (min-width: 1024px) {
  .pwa-install-banner { bottom: 1rem; left: auto; right: 1rem; transform: none; }
}

/* ==================== SKELETON PULSE ==================== */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ==================== COMPOUND UTILITY CLASSES (Phase A v6.2) ==================== */
/* Combined background + text + border patterns — eliminates 500+ inline styles */

/* --- Input/Field base: bg + text + border --- */
.field-base { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.field-muted { background: var(--bg); color: var(--text-muted); }
.field-muted-border { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.field-base-text { background: var(--bg); color: var(--text); }

/* --- Card backgrounds with border --- */
.card-surface { background: var(--card-bg); border: 1px solid var(--border); }
.card-surface-text { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); }
.card-bg-border { background: var(--bg); border: 1px solid var(--border); }

/* --- Border utilities --- */
.bt-border { border-top: 1px solid var(--border); }
.bb-border { border-bottom: 1px solid var(--border); }
.bl-accent { border-left: 3px solid var(--accent); }
.bl-success { border-left: 3px solid var(--success); }
.bl-danger { border-left: 3px solid var(--danger); }
.bl-info { border-left: 3px solid var(--info, #2563eb); }
.bl-warning { border-left: 3px solid var(--warning); }
.b-accent-solid { border-color: var(--accent); }

/* --- Colored text --- */
.c-green { color: #16a34a !important; }
.c-gold { color: #D4A017 !important; }
.c-red { color: #ef4444 !important; }
.c-blue { color: #2563eb !important; }
.c-purple { color: var(--purple) !important; }
.c-orange { color: var(--warning) !important; }
.c-gray { color: #6b7280 !important; }
.c-rose { color: #fca5a5 !important; }

/* --- Solid button backgrounds --- */
.bg-success-solid { background: var(--success); color: white; }
.bg-info-solid { background: var(--info, #2563eb); color: white; }
.bg-danger-solid { background: var(--danger); color: white; }
.bg-gold-gradient { background: linear-gradient(135deg, #D4A017, #B8860B); }

/* --- Soft semantic badges/chips --- */
.chip-accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.chip-success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.chip-info { background: color-mix(in srgb, var(--info, #2563eb) 15%, transparent); color: var(--info, #2563eb); }
.chip-danger { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.chip-warning { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); }
.chip-purple { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purple); }
.chip-accent-light { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* --- Background divider/separator --- */
.bg-border { background: var(--border); }

/* --- Spinner --- */
.spinner-accent { border-color: var(--accent); border-top-color: transparent; }

/* --- Tab active/inactive toggle styles --- */
.tab-active-style { background: var(--accent); color: white; }
.tab-inactive-style { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* --- Sidebar active nav item --- */
.nav-active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.nav-inactive { color: var(--text-muted); }

/* --- Even row striping --- */
.row-stripe:nth-child(even) { background: var(--bg); }

/* --- Display utilities --- */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* --- Glass overlay for modals (portal, etc.) --- */
.glass-overlay { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: white !important; }

/* --- Max-height utilities for collapsible sections --- */
.mh-2000 { max-height: 2000px; }
.mh-0 { max-height: 0; }

/* --- Misc inline patterns --- */
.cursor-pointer { cursor: pointer; }
.tap-transparent { -webkit-tap-highlight-color: transparent; }
.min-h-badge { width: 14px !important; height: 14px !important; min-height: 14px !important; }
.min-h-field { min-height: 32px !important; padding: 4px 8px !important; }
.hr-subtle { margin: 12px 0; border: none; border-top: 1px solid #e5e7eb; }
.small-gray { color: #666; font-size: 12px; }

/* --- Status badge colors (feedback, sentiments, etc.) --- */
.badge-green { background: #dcfce7; color: #15803d; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-blue { background: #dbeafe; color: #2563eb; }
.badge-light-red { background: #fee2e2; color: #b91c1c; }
.badge-rose { background: rgba(233,69,96,0.1); border: 1px solid rgba(233,69,96,0.2); }
.badge-purple-solid { background: var(--purple); }
.badge-purple-bg { background: #ede9fe; color: #6d28d9; }

/* --- Chart/metric soft bg --- */
.bg-green-soft { background: #dcfce7; }
.bg-yellow-soft { background: #fef3c7; }
.bg-blue-soft { background: #dbeafe; }
.bg-red-soft { background: #fee2e2; }
.bg-blue-solid { background: #2563eb; color: white; }
.bg-green-tint { background: #16a34a20; }
.bg-yellow-tint { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.bg-blue-tint { background: #2563eb15; }
.bg-red-tint { background: #ef444410; border: 1px solid #ef444430; }
.bg-green-outline { background: #16a34a10; border: 1px solid #16a34a30; }
.bg-blue-outline { background: #2563eb10; border: 1px solid #2563eb30; }
.bg-orange-tint { background: color-mix(in srgb, var(--warning) 9%, transparent); color: var(--warning); }

/* ==================== ADDITIONAL UTILITIES (Phase A v6.2 batch 2) ==================== */
.bg-yb-dark { background: linear-gradient(135deg, #111827 0%, #1e3a5f 50%, #111827 100%); }
.glass-dark { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.bg-warning { background: var(--warning); }
.bg-orange { background: var(--warning); }
.bg-blue { background: #2563eb; }
.bg-green-solid { background: #16a34a; }
.badge-light-red { background: #fee2e2; color: #b91c1c; }
.b-yellow { border: 1px solid #fcd34d; }
.b-red { border: 1px solid #fca5a5; }
.bt-dashed { border-top: 2px dashed #d1d5db; }
.line-through { text-decoration: line-through; }
.opacity-50 { opacity: 0.5; }
.min-h-touch { min-height: 48px !important; }
.min-h-400 { min-height: 400px; }
.max-h-420 { max-height: 420px; overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.w-250 { width: 250px; } .h-250 { height: 250px; }
.w-200 { width: 200px; } .h-200 { height: 200px; }
.w-180 { width: 180px; } .h-180 { height: 180px; }
.c-purple { color: var(--purple) !important; }

/* ==================== CSRF INDICATOR ==================== */
.csrf-indicator { position: fixed; bottom: 0.25rem; right: 0.25rem; font-size: 0.5rem; opacity: 0.3; z-index: 1; }

/* ==================== SESSION TIMEOUT BANNER ==================== */
.session-timeout-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  background: color-mix(in srgb, var(--danger) 95%, transparent);
  color: white; padding: 0.75rem 1rem; text-align: center;
  font-size: 0.875rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  animation: slideDown 0.3s ease-out;
}
.session-timeout-banner button {
  background: white; color: var(--danger); border: none; padding: 0.375rem 1rem;
  border-radius: var(--yb-radius-md); font-weight: 600; cursor: pointer;
  font-size: 0.75rem;
}

/* ==================== PII ENCRYPTION INDICATOR ==================== */
.pii-field { position: relative; }
.pii-field::after {
  content: '🔒'; position: absolute; top: 50%; right: 0.5rem;
  transform: translateY(-50%); font-size: 0.75rem; opacity: 0.5;
}
[dir="rtl"] .pii-field::after { right: auto; left: 0.5rem; }

/* ==================== PHASE C: ACCESSIBILITY ENHANCEMENTS ==================== */

/* Keyboard Kanban — focus indicators for grid navigation */
.kb-focus {
  outline: 3px solid var(--accent, #D4A017) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, #D4A017) 25%, transparent);
  transition: outline 0.15s ease, box-shadow 0.15s ease;
}
.keyboard-nav *:focus { outline: 2px solid var(--accent, #D4A017); outline-offset: 2px; }
.keyboard-nav button:focus, .keyboard-nav a:focus, .keyboard-nav [tabindex]:focus {
  outline: 2px solid var(--accent, #D4A017); outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #D4A017) 20%, transparent);
}

/* Enhanced skip-to-content link */
#skip-to-content:focus {
  position: fixed !important; top: 0.5rem; left: 0.5rem; z-index: 10001;
  background: white; color: #111827; padding: 0.75rem 1.25rem;
  border-radius: var(--yb-radius-lg); font-weight: 600;
  box-shadow: var(--yb-shadow-xl); clip: auto !important;
  width: auto !important; height: auto !important; overflow: visible !important;
}

/* WCAG AA contrast-safe text utilities */
.c-muted-aa { color: #6b7280 !important; }
[data-theme*="dark"] .c-muted-aa, .dark .c-muted-aa { color: #d1d5db !important; }
.c-success-aa { color: #15803d !important; }
[data-theme*="dark"] .c-success-aa, .dark .c-success-aa { color: #22c55e !important; }
.c-danger-aa { color: #dc2626 !important; }
[data-theme*="dark"] .c-danger-aa, .dark .c-danger-aa { color: #ef4444 !important; }
.c-info-aa { color: #1d4ed8 !important; }
[data-theme*="dark"] .c-info-aa, .dark .c-info-aa { color: #3b82f6 !important; }
.c-warning-aa { color: #a16207 !important; }
[data-theme*="dark"] .c-warning-aa, .dark .c-warning-aa { color: #eab308 !important; }

/* High-contrast mode support */
@media (forced-colors: active) {
  .btn-primary, .btn-success, .btn-danger { border: 2px solid currentColor; }
  .badge, .alert-strip { border: 1px solid currentColor; }
  .kb-focus { outline: 3px solid Highlight !important; }
}

/* Focus-visible polyfill — show focus ring only for keyboard users */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent, #D4A017); outline-offset: 2px; }

/* Minimum touch target size (WCAG 2.5.8 — 44x44px) */
.touch-target-min { min-width: 44px; min-height: 44px; }

/* Virtual scroll container */
[role="list"][aria-label] { scroll-behavior: smooth; }

/* Announcement region hidden but accessible */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Print: hide non-essential a11y elements */
@media print { #skip-to-content, #a11y-status, #a11y-alert, #a11y-help-modal { display: none !important; } }

/* ==================== v7.0: ADDITIONAL UTILITY CLASSES ==================== */
/* Replace remaining static inline styles */
.bg-gold-gradient { background: linear-gradient(135deg, #D4A017, #B8860B) !important; }
.bg-blue-solid { background: #2563eb !important; color: white !important; }
.bg-green-solid { background: #16a34a !important; color: white !important; }
.bg-red-solid { background: #dc2626 !important; color: white !important; }
.bg-purple-solid { background: var(--purple) !important; color: white !important; }
.b-accent { border: 1px solid var(--accent) !important; }
.b-border { border: 1px solid var(--border) !important; }
.bt-default { border-top: 1px solid var(--border) !important; }
.sidebar-surface { background: var(--surface) !important; }
.header-surface { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.no-print { }
@media print { .no-print { display: none !important; } }
.text-caption { font-size: 0.7rem; color: var(--text-muted); }
.card-surface-text { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.card-surface-text:hover { border-color: var(--accent); }
.field-base { background: var(--bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.field-muted { background: var(--bg) !important; color: var(--text-muted) !important; }
.spinner-accent { border-color: var(--accent) !important; border-top-color: transparent !important; }
.badge-light-red { background: #fee2e2 !important; }
.b-red { border: 1px solid #fca5a5 !important; }
.b-yellow { border: 1px solid #fcd34d !important; }

/* Staging environment indicator */
.staging-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(90deg, #f59e0b, #d97706); color: white;
  text-align: center; font-size: 0.7rem; font-weight: 600; padding: 2px 0; }

/* ==================== v7.0.1: BATCH INLINE-STYLE EXTRACTION ==================== */

/* --- Receipt & Print --- */
.receipt-card { background: white !important; color: #111 !important; border: 1px solid #e5e7eb !important; font-family: 'Inter', sans-serif !important; }
.receipt-divider { border-bottom: 2px dashed #d1d5db !important; }
.receipt-row-border { border-bottom: 1px solid #d1d5db !important; }
.receipt-row-light { border-bottom: 1px solid #f3f4f6 !important; }
.receipt-total-border { border-top: 1px solid #111 !important; }
.receipt-brand-line { border-bottom: 2px solid #D4A017 !important; padding-bottom: 8px !important; margin-bottom: 16px !important; }
.receipt-logo { display: inline-block; width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, #D4A017, #B8860B); line-height: 48px;
  text-align: center; color: white; font-size: 24px; font-weight: bold; }

/* --- Color Utilities --- */
.c-red-600 { color: #dc2626 !important; }
.c-dark { color: #111 !important; }
.c-blue-500 { color: #3b82f6 !important; }
.c-green-500 { color: #22c55e !important; }
.c-gray-500 { color: #6b7280 !important; }
.c-border { color: var(--border) !important; }
.c-muted-half { color: var(--text-muted) !important; opacity: 0.5; }
.c-danger-half { color: var(--danger) !important; opacity: 0.5; }

/* --- Font Size Micro --- */
.text-micro { font-size: 8px !important; }
.text-tiny { font-size: 10px !important; }
.text-micro-muted { font-size: 0.6rem !important; opacity: 0.7; }
.text-icon-sm { font-size: 0.8rem !important; }

/* --- Surfaces & Stickies --- */
.surface-top-sticky { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; z-index: 10; }
.surface-bottom-sticky { background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.surface-top { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.surface-float-bottom { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); }
.select-compact { background: var(--surface) !important; border: 1px solid var(--border) !important; min-height: 24px !important; padding: 2px 4px !important; }

/* --- Camera & Hidden --- */
.hidden-camera-preview { display: none; max-height: 300px; }

/* --- Border Utilities --- */
.b-danger-soft { border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent) !important; }
.bb-dashed { border-bottom: 1px dashed var(--border) !important; }
.card-bordered { background: var(--card-bg); border: 1px solid var(--border); }

/* --- White-space --- */
.ws-pre { white-space: pre-wrap !important; }

/* --- Inputs & Selects --- */
.max-w-date { max-width: 160px !important; }
.color-input { height: 40px !important; padding: 2px !important; }
.select-filter { min-height: 32px !important; padding: 4px 8px !important; }

/* --- Buttons --- */
.btn-accent-compact { background: var(--accent) !important; color: white !important; white-space: nowrap; }
.btn-link-white { background: transparent !important; color: white !important; text-decoration: underline; }
.btn-accent-elevated { background: var(--accent) !important; color: white !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-accent-sm { background: var(--accent) !important; color: white !important; cursor: pointer; border: none; }
.btn-ghost { background: var(--bg) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }
.btn-gold-lg { background: linear-gradient(135deg, #D4A017, #B8860B) !important; color: white !important;
  padding: 0.75rem 1.5rem; border-radius: 0.75rem; }

/* --- Login / Warning / Glass --- */
.login-error-box { background: rgba(220,38,38,0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(220,38,38,0.3); }
.bg-warning-circle { background: rgba(234,179,8,0.2) !important; }
.glass-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1); }

/* --- Timer --- */
.timer-danger-soft { background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
  color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

/* --- Navigation --- */
.bg-surface-blur { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; }

/* --- Status Backgrounds --- */
.bg-green-100 { background: #dcfce7 !important; }
.bg-amber-100 { background: #fef3c7 !important; }

/* --- Dashboard Stat Cards --- */
.bg-info-light { background: color-mix(in srgb, #2563eb 8%, transparent) !important; }
.bg-amber-light { background: color-mix(in srgb, var(--warning) 8%, transparent) !important; }
.bg-purple-light { background: color-mix(in srgb, var(--purple) 8%, transparent) !important; }

/* --- Danger Variants --- */
.bg-danger-dot { background: var(--danger) !important; }
.card-danger-subtle { background: color-mix(in srgb, var(--danger) 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 15%, transparent); }
.card-danger-soft { background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 15%, transparent); }
.card-danger-med { background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

/* --- Accent Chips & Cards --- */
.chip-accent { background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.card-accent-soft { background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.card-accent-subtle { background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }

/* --- Info Chips --- */
.chip-info { background: color-mix(in srgb, var(--info, #2563eb) 10%, transparent) !important;
  color: var(--info, #2563eb) !important; border: 1px solid color-mix(in srgb, var(--info, #2563eb) 20%, transparent); }
.chip-info-strong { background: color-mix(in srgb, var(--info, #2563eb) 15%, transparent) !important;
  color: var(--info, #2563eb) !important; border: 1px solid color-mix(in srgb, var(--info, #2563eb) 30%, transparent); }
.bg-info-chip { background: color-mix(in srgb, var(--info, #2563eb) 12%, transparent) !important; }

/* --- Success Chips --- */
.chip-success { background: color-mix(in srgb, var(--success) 10%, transparent) !important;
  color: var(--success) !important; border: 1px solid color-mix(in srgb, var(--success) 20%, transparent); }

/* --- Amber Chips --- */
.chip-amber { background: color-mix(in srgb, var(--warning) 10%, transparent) !important;
  color: var(--warning) !important; border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent); }
.card-amber-soft { background: color-mix(in srgb, var(--warning) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }

/* --- Specialized Buttons --- */
.btn-danger-ghost { background: rgba(233,69,96,0.1) !important; color: var(--danger) !important; }
.mobile-menu-hidden { display: none; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.search-field { background: var(--bg) !important; color: var(--text) !important; border: 2px solid var(--border) !important; }
.dashed-container { background: var(--bg) !important; border: 1px dashed var(--border) !important; }

/* Report print styles */
@media print {
  body { background: white !important; }
  .modal-overlay > div { max-width: 100% !important; box-shadow: none !important; }
  .action-btn, .no-print { display: none !important; }
}

/* ==================== v8.0: DYNAMIC STYLE SYSTEM (TD-12) ==================== */
/* CSS custom properties for dynamic values — reduces inline style count */

/* Data-attribute-driven colors */
[data-status="success"], [data-health="good"] { --dyn-color: var(--success); --dyn-bg: color-mix(in srgb, var(--success) 10%, transparent); }
[data-status="danger"], [data-health="bad"] { --dyn-color: var(--danger); --dyn-bg: color-mix(in srgb, var(--danger) 10%, transparent); }
[data-status="warning"] { --dyn-color: var(--warning); --dyn-bg: color-mix(in srgb, var(--warning) 10%, transparent); }
[data-status="info"] { --dyn-color: var(--info, #2563eb); --dyn-bg: color-mix(in srgb, var(--info, #2563eb) 10%, transparent); }
[data-status="neutral"] { --dyn-color: var(--text-muted); --dyn-bg: var(--bg); }

/* Dynamic progress bars */
.dyn-progress { background: var(--bg); }
.dyn-progress > .dyn-bar { width: var(--progress, 0%); background: var(--bar-color, var(--accent)); transition: width 0.3s ease; }

/* Dynamic color dot */
.dyn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color, var(--text-muted)); }

/* Dynamic score display */
.dyn-score { color: var(--score-color, var(--text)); }

/* Active/inactive tab states */
.tab-btn { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.tab-btn[aria-selected="true"], .tab-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Alternating row backgrounds */
.alt-row:nth-child(even) { background: var(--bg); }

/* ==================== v8.0: DARK MODE (TD-13 / Sprint 7.1) ==================== */
/* Dark mode is driven by data-theme="dark" on <html> */
/* All existing var(--bg), var(--surface), var(--text) etc. already support it */
/* This adds the toggle mechanism and transition */

html { transition: color 0.2s ease, background-color 0.2s ease; }
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Dark mode toggle button */
.theme-toggle { 
  position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: var(--border); cursor: pointer; transition: background 0.2s;
  border: none; padding: 0; display: flex; align-items: center;
}
.theme-toggle::after {
  content: ''; position: absolute; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: white; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.theme-toggle[aria-checked="true"] { background: var(--accent); }
.theme-toggle[aria-checked="true"]::after { transform: translateX(20px); }
.theme-toggle .toggle-icon { position: absolute; font-size: 10px; top: 50%; transform: translateY(-50%); }
.theme-toggle .toggle-sun { left: 5px; color: var(--warning); }
.theme-toggle .toggle-moon { right: 5px; color: #6366f1; }

/* ==================== Inline-Style Replacements (ID-14) ==================== */
/* Toast notification */
.toast-success { background:var(--success);color:white;box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.toast-error { background:var(--danger);color:white;box-shadow:0 4px 12px rgba(0,0,0,0.2); }
/* Scan result highlight */
.scan-match-bg { background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success); }
/* PWA banner */
.pwa-banner { background:var(--surface);border:1px solid var(--border); }
/* Hover helpers — applied via JS classList toggle */
.hover-bg-base:hover { background:var(--bg) !important; }
.hover-bg-transparent:hover { background:transparent !important; }
.hover-bg-surface:hover { background:var(--surface) !important; }
.hover-border-accent:hover { border-color:var(--accent) !important; }
.hover-text-danger:hover { color:var(--danger) !important; }
.hover-text-accent:hover { color:var(--accent) !important; }
.hover-scale-sm:hover { transform:scale(1.02); }
/* Selected state */
.selected-accent-ring { border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent); }
.unselected-btn { border-color:var(--border);color:var(--text-muted);background:var(--bg); }
/* Star rating */
.star-active { color:var(--warning);transform:scale(1.1); }
.star-inactive { color:var(--border);transform:scale(1); }
/* Skip link (a11y) */
.sr-skip-link { position:absolute;left:-9999px; }
.sr-skip-link:focus { position:fixed;left:8px;top:8px;z-index:99999;background:white;color:black;padding:8px 16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);font-size:14px;font-weight:600;text-decoration:none; }
/* Sidebar items maxHeight */
.sidebar-items-open { max-height:500px; }
.sidebar-items-closed { max-height:0; }
/* Camera preview toggle */
.cam-visible { display:block; }
.cam-hidden { display:none; }
/* Collapsible content */
.collapse-open { max-height:2000px; }
.collapse-closed { max-height:0; }
/* Batch action bar */
.batch-bar { background:var(--surface);border:2px solid var(--accent); }
/* Cursor utility */
.cursor-ptr { cursor:pointer; }
/* Focus border accent */
.focus-border-accent:focus { border-color:var(--accent); }
.focus-border-accent:not(:focus) { border-color:var(--border); }

/* ==================== v9.2.0: CSS Custom Property Utilities ==================== */
/* Replaces common dynamic inline styles with reusable property-driven classes */

/* Progress bar utility — set --pct and --bar-color inline */
.progress-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
  width: var(--pct, 0%);
  background: var(--bar-color, var(--accent));
}

/* Score/status color utility — set --score-color inline */
.score-color { color: var(--score-color, var(--text)); }
.score-bg { background: var(--score-color, var(--accent)); color: white; }
.score-badge {
  background: color-mix(in srgb, var(--score-color, var(--accent)) 15%, transparent);
  color: var(--score-color, var(--accent));
  border: 1px solid color-mix(in srgb, var(--score-color, var(--accent)) 25%, transparent);
}

/* Dynamic badge — set --badge-bg and --badge-color inline */
.badge-dynamic {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  background: var(--badge-bg, var(--accent));
  color: var(--badge-color, white);
}

/* Priority badge variants */
.priority-critical { --badge-bg: var(--danger); --badge-color: white; }
.priority-high { --badge-bg: var(--warning); --badge-color: white; }
.priority-medium { --badge-bg: var(--info, #2563eb); --badge-color: white; }
.priority-low { --badge-bg: var(--text-muted); --badge-color: white; }

/* Status indicator dot — set --dot-color inline */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--accent));
}
.status-dot-sm {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--accent));
}

/* Color swatch — set --swatch-color inline */
.color-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--swatch-color, #6b7280);
}

/* Info card variants with custom properties */
.info-card-soft {
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-color, var(--accent)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-color, var(--accent)) 15%, transparent);
}
.info-card-solid {
  padding: 10px;
  border-radius: 8px;
  background: var(--card-color, var(--accent));
  color: white;
}

/* Stripe row alternate */
.stripe-row:nth-child(even) { background: var(--bg); }
.stripe-row:nth-child(odd) { background: transparent; }

/* Sidebar active item */
.nav-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* Chip variants with custom properties — set --chip-color inline */
.chip-dynamic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 10%, transparent);
  color: var(--chip-color, var(--accent));
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 20%, transparent);
  transition: all 0.15s ease;
}

/* KPI trend indicator */
.kpi-trend-up { color: var(--success); }
.kpi-trend-up::before { content: '↑ '; }
.kpi-trend-down { color: var(--danger); }
.kpi-trend-down::before { content: '↓ '; }

/* Schedule item left border — set --item-color inline */
.schedule-item {
  background: var(--bg);
  border-left: 3px solid var(--item-color, var(--accent));
  padding: 8px 12px;
  border-radius: 4px;
}

/* Zebra-striped table */
.table-zebra tr:nth-child(even) { background: var(--bg); }
.table-zebra tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Performance score ring colors */
.perf-excellent { --score-color: var(--success); }
.perf-good { --score-color: var(--warning); }
.perf-average { --score-color: var(--orange); }
.perf-poor { --score-color: var(--danger); }

/* Max-height utilities for collapsible sections */
.mh-420 { max-height: 420px; }
.mh-2000 { max-height: 2000px; }
.mh-0 { max-height: 0; overflow: hidden; }

/* RTL-aware margin utilities */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

/* ======================================================
   Sprint 2: Consolidated Tabbed Navigation (v10.1)
   Enterprise-grade tab bar for merged sidebar views
   ====================================================== */
.yb-tab-bar {
  display: flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  background: var(--bg);
  border-radius: var(--yb-radius-xl);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
}
.yb-tab-bar::-webkit-scrollbar { display: none; }

.yb-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--yb-radius-lg);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--yb-transition);
  font-family: var(--yb-font);
}
.yb-tab:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text);
}
.yb-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--yb-shadow-sm);
}
.yb-tab i { font-size: 0.625rem; opacity: 0.85; }
.yb-tab .yb-tab-badge {
  font-size: 0.5625rem;
  padding: 0.0625rem 0.3125rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  font-weight: 600;
}
.yb-tab.active .yb-tab-badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Responsive: shrink tabs on mobile */
@media (max-width: 640px) {
  .yb-tab { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
  .yb-tab i { font-size: 0.625rem; }
  .yb-tab span.yb-tab-label-full { display: none; }
  .yb-tab span.yb-tab-label-short { display: inline; }
}
@media (min-width: 641px) {
  .yb-tab span.yb-tab-label-short { display: none; }
}

/* Tab content transition */
.yb-tab-content { animation: tabFadeIn 0.2s ease-out; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ======================================================
   TASK MANAGEMENT — Enterprise Task System (v11.1)
   Linear / Notion / Asana-inspired task management UI
   ====================================================== */

/* ---- Task Header & Stats Bar ---- */
.task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.task-header-left h1 { margin: 0; }
.task-header-left .task-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.task-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Stats strip — compact horizontal counters */
.task-stats-strip {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.task-stats-strip::-webkit-scrollbar { display: none; }
.task-stat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--yb-radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--yb-transition);
  white-space: nowrap;
  min-width: fit-content;
}
.task-stat-chip:hover {
  border-color: var(--accent);
  box-shadow: var(--yb-shadow-sm);
  transform: translateY(-1px);
}
.task-stat-chip.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.task-stat-chip .stat-count {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.task-stat-chip .stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* ---- View Toolbar — tabs + filters ---- */
.task-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.task-view-tabs {
  display: flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  background: var(--bg);
  border-radius: var(--yb-radius-lg);
  border: 1px solid var(--border);
}
.task-view-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--yb-radius-md);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--yb-transition);
  white-space: nowrap;
}
.task-view-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.task-view-tab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--yb-shadow-xs);
}
.task-view-tab i { font-size: 0.625rem; opacity: 0.7; }

.task-filter-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}
.task-filter-group select {
  max-width: 140px;
  min-height: 30px !important;
  padding: 3px 8px !important;
  font-size: 0.6875rem;
  border-radius: var(--yb-radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--yb-transition);
}
.task-filter-group select:focus { border-color: var(--accent); outline: none; }
.task-filter-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--yb-radius-md);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  border: none;
  cursor: pointer;
  font-size: 0.625rem;
  transition: all var(--yb-transition);
}
.task-filter-clear:hover { background: var(--danger); color: white; }

/* ---- KANBAN BOARD ---- */
.kanban-board {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  min-height: 50vh;
  scrollbar-width: thin;
}
.kanban-board::-webkit-scrollbar { height: 6px; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.kanban-column {
  min-width: 272px;
  max-width: 320px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--yb-radius-xl);
  background: var(--bg);
  border: 1px solid var(--border);
}
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--border);
}
.kanban-column-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kanban-column-title .col-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--yb-radius-sm);
  font-size: 0.5625rem;
}
.kanban-column-title .col-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}
.kanban-column-count {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
}
.kanban-column-body {
  padding: 0.5rem;
  flex: 1;
  overflow-y: auto;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.kanban-column-body::-webkit-scrollbar { width: 3px; }
.kanban-column-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ---- Task Card (Kanban) ---- */
.task-card {
  position: relative;
  padding: 0.75rem;
  border-radius: var(--yb-radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.task-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--yb-shadow-sm);
  transform: translateY(-1px);
}
.task-card-priority {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: var(--yb-radius-lg) 0 0 var(--yb-radius-lg);
}
.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.task-card-id {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.02em;
}
.task-card-risk {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--yb-radius-sm);
}
.task-card-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.task-card-tag {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--yb-radius-sm);
  letter-spacing: 0.01em;
}
.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}
.task-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.task-card-meta-item {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.625rem;
  color: var(--text-muted);
}
.task-card-meta-item i { font-size: 0.5625rem; opacity: 0.7; }
.task-card-meta-item.overdue { color: var(--danger); font-weight: 600; }
.task-card-avatars {
  display: flex;
  align-items: center;
}
.task-card-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: white;
  border: 1.5px solid var(--surface);
  margin-left: -4px;
  flex-shrink: 0;
}
.task-card-avatar:first-child { margin-left: 0; }
.task-card-progress {
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 0.5rem;
  overflow: hidden;
}
.task-card-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* ---- LIST VIEW ---- */
.task-list {
  border-radius: var(--yb-radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.task-list-header {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) 100px 90px 120px 90px 80px 140px;
  gap: 0.25rem;
  padding: 0.625rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-list-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) 100px 90px 120px 90px 80px 140px;
  gap: 0.25rem;
  padding: 0.625rem 1rem;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  cursor: pointer;
  transition: background var(--yb-transition);
}
.task-list-row:last-child { border-bottom: none; }
.task-list-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.task-list-cell {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  min-width: 0;
}
.task-list-cell.center { justify-content: center; }
.task-list-title-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.task-list-title-info { min-width: 0; }
.task-list-title-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-list-title-sub {
  font-size: 0.625rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.task-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
}
.task-list-progress {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.task-list-progress-bar {
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.task-list-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}
.task-list-progress-text {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 28px;
}

/* ---- MY TASKS VIEW ---- */
.my-tasks-empty {
  text-align: center;
  padding: 4rem 2rem;
  border-radius: var(--yb-radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
}
.my-tasks-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.4; }
.my-tasks-group {
  border-radius: var(--yb-radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.my-tasks-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
}
.my-tasks-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.my-tasks-group-name {
  font-size: 0.75rem;
  font-weight: 700;
}
.my-tasks-group-count {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
}
.my-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  cursor: pointer;
  transition: background var(--yb-transition);
}
.my-task-row:last-child { border-bottom: none; }
.my-task-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.my-task-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--yb-transition);
  background: transparent;
  color: transparent;
  font-size: 0.5rem;
}
.my-task-check:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.my-task-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.my-task-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}
.my-task-badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.my-task-badge {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--yb-radius-sm);
}

/* ---- TIMELINE VIEW ---- */
.task-timeline {
  position: relative;
  padding-left: 2rem;
}
.task-timeline::before {
  content: '';
  position: absolute;
  left: 0.875rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.timeline-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.timeline-group-marker {
  position: absolute;
  left: -2rem;
  top: 0.125rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.timeline-group-marker i { font-size: 0.5rem; color: var(--accent); }
.timeline-group-date {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}
.timeline-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.timeline-task-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--yb-radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--yb-transition);
}
.timeline-task-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--yb-shadow-sm);
}
.timeline-task-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.5625rem;
}
.timeline-task-info { flex: 1; min-width: 0; }
.timeline-task-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}
.timeline-task-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  font-size: 0.625rem;
  color: var(--text-muted);
}

/* ---- TASK DETAIL (revamped) ---- */
.task-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0.25rem 0;
  transition: opacity var(--yb-transition);
}
.task-detail-back:hover { opacity: 0.8; }
.task-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
}
@media (max-width: 1024px) {
  .task-detail-grid { grid-template-columns: 1fr; }
}
.task-detail-main { display: flex; flex-direction: column; gap: 1rem; }
.task-detail-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.task-detail-card {
  border-radius: var(--yb-radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.task-detail-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.task-detail-card-header h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.task-detail-card-header i { font-size: 0.75rem; color: var(--text-muted); }
.task-detail-card-body { padding: 1rem 1.25rem; }

.task-detail-hero {
  padding: 1.5rem;
  border-radius: var(--yb-radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
}
.task-detail-hero-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.task-detail-hero h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.375rem 0;
  line-height: 1.3;
}
.task-detail-hero p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Status quick-switch row */
.task-status-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
}
.task-status-btn {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--yb-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--yb-transition);
}
.task-status-btn:hover { transform: translateY(-1px); box-shadow: var(--yb-shadow-sm); }

/* Task detail property row */
.task-prop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4375rem 0;
}
.task-prop-row + .task-prop-row { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.task-prop-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 500;
}
.task-prop-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
}

/* Subtask item */
.subtask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--yb-radius-md);
  background: var(--bg);
  transition: background var(--yb-transition);
}
.subtask-item:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.subtask-item-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.subtask-check {
  font-size: 0.75rem;
}
.subtask-title {
  font-size: 0.75rem;
  cursor: pointer;
}
.subtask-title.done { text-decoration: line-through; color: var(--text-muted); }

/* Comment / Activity */
.activity-item {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0;
}
.activity-item + .activity-item { border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.activity-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  flex-shrink: 0;
}
.activity-content { flex: 1; min-width: 0; }
.activity-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.1875rem;
}
.activity-author {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text);
}
.activity-time {
  font-size: 0.625rem;
  color: var(--text-muted);
}
.activity-type-badge {
  font-size: 0.5625rem;
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--yb-radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.activity-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Comment input */
.task-comment-box {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.task-comment-box input {
  flex: 1;
  border-radius: var(--yb-radius-lg);
}
.task-comment-box button {
  flex-shrink: 0;
}

/* ---- Task Modals (refined) ---- */
.task-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.task-modal {
  width: 100%;
  border-radius: var(--yb-radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--yb-shadow-xl);
  animation: modalSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.task-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task-modal-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.task-modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--yb-radius-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all var(--yb-transition);
}
.task-modal-close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.task-modal-body {
  padding: 1.25rem 1.5rem;
  max-height: 65vh;
  overflow-y: auto;
}
.task-modal-body::-webkit-scrollbar { width: 4px; }
.task-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.task-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Section group inside modal */
.task-form-section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.task-form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.task-form-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.task-form-section-title i { font-size: 0.625rem; opacity: 0.6; }

/* Responsive */
@media (max-width: 768px) {
  .task-header { flex-direction: column; }
  .task-header-actions { width: 100%; overflow-x: auto; }
  .task-toolbar { flex-direction: column; align-items: stretch; }
  .task-filter-group { margin-left: 0; flex-wrap: wrap; }
  .kanban-board { padding-bottom: 0.5rem; }
  .kanban-column { min-width: 260px; }
  .task-list-header, .task-list-row {
    grid-template-columns: 1fr 80px 80px;
  }
  .task-list-header > *:nth-child(n+4),
  .task-list-row > *:nth-child(n+4) {
    display: none;
  }
}

/* ======================================================
   PRODUCT CATALOG — Enterprise Product System (v11.2)
   Shopify / Linear-inspired product management UI
   ====================================================== */

/* ---- Product Header & Stats ---- */
.product-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.product-header-left h1 { margin: 0; }
.product-header-left .product-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.product-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Stats strip — compact horizontal counters */
.product-stats-strip {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.product-stats-strip::-webkit-scrollbar { display: none; }
.product-stat-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--yb-radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--yb-transition);
  white-space: nowrap;
  min-width: fit-content;
}
.product-stat-chip:hover {
  border-color: var(--accent);
  box-shadow: var(--yb-shadow-sm);
  transform: translateY(-1px);
}
.product-stat-chip .stat-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--yb-radius-md);
  font-size: 0.75rem;
}
.product-stat-chip .stat-count {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.product-stat-chip .stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* ---- Product Toolbar — filters + search ---- */
.product-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.product-toolbar .toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}
.product-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Search input — minimal border style */
.product-search-wrap {
  position: relative;
}
.product-search-wrap i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
}
.product-search-wrap input {
  padding: 0.4375rem 0.75rem 0.4375rem 2rem;
  border-radius: var(--yb-radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.8125rem;
  font-family: var(--yb-font);
  color: var(--text);
  width: 14rem;
  transition: all var(--yb-transition);
}
.product-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Filter dropdowns — unified compact style */
.product-filter {
  padding: 0.4375rem 0.625rem;
  border-radius: var(--yb-radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.75rem;
  font-family: var(--yb-font);
  color: var(--text);
  cursor: pointer;
  transition: all var(--yb-transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 1.5rem;
}
.product-filter:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- View Toggle Buttons ---- */
.product-view-toggle {
  display: flex;
  gap: 0.125rem;
  padding: 0.125rem;
  background: var(--bg);
  border-radius: var(--yb-radius-md);
  border: 1px solid var(--border);
}
.product-view-btn {
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: var(--yb-radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all var(--yb-transition);
}
.product-view-btn:hover { color: var(--text); }
.product-view-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--yb-shadow-xs);
}

/* ---- Action Buttons — unified product actions ---- */
.product-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: var(--btn-padding-sm);
  border-radius: var(--yb-radius-lg);
  font-size: var(--btn-font-sm);
  font-weight: 600;
  font-family: var(--yb-font);
  border: none;
  cursor: pointer;
  transition: all var(--yb-transition);
  white-space: nowrap;
}
.product-btn i { font-size: 0.6875rem; }
.product-btn:hover { transform: translateY(-1px); box-shadow: var(--yb-shadow-sm); }
.product-btn-primary {
  background: var(--accent);
  color: #fff;
}
.product-btn-primary:hover { background: var(--accent-hover); }
.product-btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.product-btn-secondary:hover { border-color: var(--accent); }
.product-btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.product-btn-ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }

/* ---- Product Grid Cards ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
}
/* product-card styles are defined in the v12.0 section below */

/* Attribute bars — horizontal mini performance bars */
.attr-bars {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0;
}
.attr-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.attr-bar .attr-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  width: 2.5rem;
  text-align: right;
  flex-shrink: 0;
}
.attr-bar .attr-track {
  flex: 1;
  height: 0.25rem;
  background: var(--bg);
  border-radius: var(--yb-radius-full);
  overflow: hidden;
}
.attr-bar .attr-fill {
  height: 100%;
  border-radius: var(--yb-radius-full);
  transition: width 0.4s ease-out;
}
.attr-bar .attr-value {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--text);
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}

/* ---- Product List View ---- */
.product-list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr 0.8fr 0.6fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0.125rem;
}
.product-list-header > span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.product-list-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr 0.8fr 0.6fr;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--yb-radius-md);
  cursor: pointer;
  transition: all var(--yb-transition);
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.product-list-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.product-list-row .row-product {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.product-list-row .row-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--yb-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
}
.product-list-row .row-info { min-width: 0; }
.product-list-row .row-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-list-row .row-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.125rem;
}

/* ---- Product Badges (sport/category/skill/stock) ---- */
.pbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--yb-radius-full);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pbadge i { font-size: 0.5rem; }

/* Sport badges */
.pbadge-tennis { background: color-mix(in srgb, #16a34a 10%, transparent); color: #15803d; border-color: color-mix(in srgb, #16a34a 20%, transparent); }
.pbadge-padel { background: color-mix(in srgb, #2563eb 10%, transparent); color: #1d4ed8; border-color: color-mix(in srgb, #2563eb 20%, transparent); }
.pbadge-squash { background: color-mix(in srgb, #8b5cf6 10%, transparent); color: #7c3aed; border-color: color-mix(in srgb, #8b5cf6 20%, transparent); }
.pbadge-badminton { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 20%, transparent); }

/* Category badges */
.pbadge-racket { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.pbadge-string { background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 20%, transparent); }
.pbadge-grip { background: color-mix(in srgb, var(--cyan) 10%, transparent); color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 20%, transparent); }
.pbadge-shoes { background: color-mix(in srgb, var(--orange) 10%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 20%, transparent); }
.pbadge-bag { background: color-mix(in srgb, var(--pink) 10%, transparent); color: var(--pink); border-color: color-mix(in srgb, var(--pink) 20%, transparent); }
.pbadge-ball { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 20%, transparent); }
.pbadge-accessory { background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); border-color: color-mix(in srgb, var(--text-muted) 20%, transparent); }

/* Stock badges */
.pbadge-instock { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.pbadge-lowstock { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.pbadge-outstock { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }

/* Skill badges */
.pbadge-beginner { background: color-mix(in srgb, #22c55e 10%, transparent); color: #15803d; border-color: color-mix(in srgb, #22c55e 20%, transparent); }
.pbadge-intermediate { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #1d4ed8; border-color: color-mix(in srgb, #3b82f6 20%, transparent); }
.pbadge-advanced { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #b45309; border-color: color-mix(in srgb, #f59e0b 20%, transparent); }
.pbadge-professional { background: color-mix(in srgb, #ef4444 10%, transparent); color: #dc2626; border-color: color-mix(in srgb, #ef4444 20%, transparent); }

/* ---- Product Detail — Hero Card ---- */
.product-detail-hero {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
  margin-bottom: 1rem;
}
.product-detail-hero .hero-image {
  width: 8rem;
  height: 8rem;
  border-radius: var(--yb-radius-lg);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--yb-transition);
}
.product-detail-hero .hero-image:hover {
  border-color: var(--accent);
  box-shadow: var(--yb-shadow-sm);
}
.product-detail-hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-detail-hero .hero-content { flex: 1; min-width: 0; }
.product-detail-hero .hero-price-block {
  text-align: right;
  flex-shrink: 0;
}
.product-detail-hero .hero-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.product-detail-hero .hero-price .currency {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}
.product-detail-hero .hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

/* Performance circles — radial progress */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  padding: 1rem 0;
}
.perf-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.perf-circle .circle-wrap {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}
.perf-circle .circle-wrap svg { transform: rotate(-90deg); }
.perf-circle .circle-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
}
.perf-circle .circle-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Inventory Table ---- */
.inv-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: separate;
  border-spacing: 0;
}
.inv-table thead th {
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.inv-table tbody tr {
  transition: background var(--yb-transition);
}
.inv-table tbody tr:nth-child(even) { background: var(--bg); }
.inv-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.inv-table tbody td {
  padding: 0.5rem 0.625rem;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.inv-table tfoot td {
  padding: 0.5rem 0.625rem;
  font-weight: 700;
  border-top: 2px solid var(--border);
}

/* Inventory action buttons */
.inv-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--yb-radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--yb-transition);
  font-size: 0.625rem;
  background: transparent;
}
.inv-action:hover { transform: scale(1.15); }
.inv-action-edit { color: var(--accent); }
.inv-action-edit:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.inv-action-sell { color: var(--success); }
.inv-action-sell:hover { background: color-mix(in srgb, var(--success) 10%, transparent); }
.inv-action-delete { color: var(--danger); }
.inv-action-delete:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ---- Detail Sidebar Panels ---- */
.detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}
.detail-panel-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.detail-panel-title i { font-size: 0.625rem; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}
.detail-row + .detail-row { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.detail-row .detail-label { color: var(--text-muted); }
.detail-row .detail-value { font-weight: 500; color: var(--text); }

/* ---- Spec Table ---- */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4375rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.spec-row .spec-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.spec-row .spec-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}
.spec-row .spec-missing {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--danger);
}

/* ---- Similar Products Grid ---- */
.similar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
.similar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-lg);
  padding: 0.75rem;
  cursor: pointer;
  transition: all var(--yb-transition);
}
.similar-card:hover {
  border-color: var(--accent);
  box-shadow: var(--yb-shadow-sm);
  transform: translateY(-1px);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .perf-grid { grid-template-columns: repeat(3, 1fr); }
  .product-list-header,
  .product-list-row { grid-template-columns: 2fr 1fr 0.8fr 0.8fr; }
  .product-list-header > *:nth-child(3),
  .product-list-row > *:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-toolbar { flex-direction: column; align-items: stretch; }
  .product-toolbar .toolbar-left,
  .product-toolbar .toolbar-right { width: 100%; }
  .product-detail-hero { flex-direction: column; }
  .product-detail-hero .hero-price-block { text-align: left; }
  .product-list-header,
  .product-list-row { grid-template-columns: 2fr 0.8fr 0.8fr; }
  .product-list-header > *:nth-child(n+4),
  .product-list-row > *:nth-child(n+4) { display: none; }
}

/* ===========================================================================
   NEW PRODUCT MODAL SYSTEM (v12.0)
   Clean, sectioned modal with dynamic spec fields
   =========================================================================== */

/* Modal container */
.np-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
  width: 100%;
  max-width: 52rem;
  max-height: 92vh;
  overflow-y: auto;
  margin: 1rem;
  padding: 0;
  box-shadow: var(--yb-shadow-xl);
  animation: npFadeIn 0.2s ease-out;
}
.np-modal-sm {
  max-width: 32rem;
}

@keyframes npFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal Header */
.np-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.np-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.np-title i {
  color: var(--accent);
  font-size: 0.9375rem;
}
.np-subtitle {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.np-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-muted);
  padding: 0.25rem 0.375rem;
  border-radius: var(--yb-radius-sm);
  transition: all var(--yb-transition);
}
.np-close:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

/* Section blocks */
.np-section {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.np-section:last-of-type { border-bottom: none; }

.np-section-head {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.np-section-head i { font-size: 0.625rem; }
.np-hint {
  font-weight: 400;
  text-transform: none;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

/* Grid layouts */
.np-grid {
  display: grid;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}
.np-grid-2 { grid-template-columns: 1fr 1fr; }
.np-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.np-grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Field */
.np-field {
  display: flex;
  flex-direction: column;
}
.np-field.np-full { grid-column: 1 / -1; }
.np-field label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  letter-spacing: 0.01em;
}

/* Input styling */
.np-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-md);
  outline: none;
  transition: all var(--yb-transition);
  font-family: var(--yb-font);
}
.np-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.np-input::placeholder { color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
select.np-input { cursor: pointer; }

.np-textarea {
  resize: vertical;
  min-height: 3rem;
  max-height: 8rem;
}

/* Range slider field */
.np-range-field {
  text-align: center;
}
.np-slider {
  width: 100%;
  cursor: pointer;
  margin: 0.25rem 0;
}
.np-range-val {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

/* Action bar */
.np-actions {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1.5rem 1.25rem;
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 2;
}
.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--yb-radius-md);
  cursor: pointer;
  transition: all var(--yb-transition);
  border: none;
  font-family: var(--yb-font);
}
.np-btn i { font-size: 0.6875rem; }
.np-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.np-btn-submit {
  flex: 2;
  background: var(--accent);
  color: #fff;
}
.np-btn-submit:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--yb-shadow-sm);
}
.np-btn-cancel {
  flex: 1;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.np-btn-cancel:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .np-modal { margin: 0.5rem; max-height: 96vh; }
  .np-grid-3 { grid-template-columns: 1fr 1fr; }
  .np-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .np-header, .np-section, .np-actions { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 480px) {
  .np-grid-2, .np-grid-3 { grid-template-columns: 1fr; }
  .np-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .np-actions { flex-direction: column; }
  .np-btn-submit, .np-btn-cancel { flex: none; }
}

/* ---- Product card improvements (v12.0) ---- */
.product-card {
  position: relative;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--yb-radius-xl);
  cursor: pointer;
  transition: all var(--yb-transition);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 10rem;
}
.product-card:hover {
  border-color: var(--card-accent, var(--accent));
  box-shadow: var(--yb-shadow-md);
  transform: translateY(-2px);
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--card-accent, var(--accent));
  border-radius: var(--yb-radius-xl) 0 0 var(--yb-radius-xl);
  opacity: 0;
  transition: opacity var(--yb-transition);
}
.product-card:hover::before { opacity: 1; }

.product-card .card-badges {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.product-card .card-badges-left {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.product-card .card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  transition: color var(--yb-transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card:hover .card-title { color: var(--accent); }
.product-card .card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}
.product-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.product-card .card-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent);
}
.product-card .card-price .currency {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 0.125rem;
}