/* ============================================
   SSStyle Design System v3.0
   Complex, animated, fully responsive
   ============================================ */

:root {
  /* Colors */
  --c-primary: #6366f1;
  --c-primary-dark: #4f46e5;
  --c-primary-light: #a5b4fc;
  --c-primary-glow: rgba(99,102,241,0.3);
  --c-success: #10b981;
  --c-success-light: #d1fae5;
  --c-warning: #f59e0b;
  --c-warning-light: #fef3c7;
  --c-danger: #ef4444;
  --c-danger-light: #fee2e2;
  --c-info: #3b82f6;
  
  /* Light theme */
  --bg-root: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-surface-3: #e2e8f0;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 40px var(--c-primary-glow);
  
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  
  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;
  
  /* Transitions */
  --t-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
  --t-normal: 0.25s cubic-bezier(0.4,0,0.2,1);
  --t-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
  --t-bounce: 0.5s cubic-bezier(0.34,1.56,0.64,1);
  
  /* Header */
  --header-h: 72px;
  
  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

[data-theme="dark"] {
  --bg-root: #0b0f19;
  --bg-surface: #111827;
  --bg-surface-2: #1f2937;
  --bg-surface-3: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --border-color: #374151;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.4);
}

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

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-root);
  color: var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg-surface-2); }
::-webkit-scrollbar-thumb { background:var(--text-tertiary); border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 var(--space-6); }
.container-narrow { max-width:960px; }

.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:var(--space-1); }
.gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); }
.gap-4 { gap:var(--space-4); }
.gap-6 { gap:var(--space-6); }
.gap-8 { gap:var(--space-8); }

.grid { display:grid; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-5 { grid-template-columns:repeat(5,1fr); }

@media (max-width:1024px) {
  .grid-5, .grid-4 { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns:repeat(2,1fr); }
  .container { padding:0 var(--space-4); }
}
@media (max-width:480px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
}

.hidden { display:none !important; }
@media (max-width:768px) { .hide-mobile { display:none !important; } }
@media (min-width:769px) { .hide-desktop { display:none !important; } }

.text-center { text-align:center; }
.text-gradient {
  background: linear-gradient(135deg, var(--c-primary), #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:0.75rem 1.5rem; border-radius:var(--r-md); font-weight:600; font-size:0.875rem;
  border:none; cursor:pointer; transition:all var(--t-normal); text-decoration:none;
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn::after {
  content:''; position:absolute; inset:0; background:rgba(255,255,255,0);
  transition:background var(--t-normal);
}
.btn:hover::after { background:rgba(255,255,255,0.1); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(0) scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color:#fff; box-shadow:0 4px 14px var(--c-primary-glow);
}
.btn-primary:hover { box-shadow:var(--shadow-glow), var(--shadow-md); }

.btn-secondary {
  background:var(--bg-surface); color:var(--text-primary);
  border:1px solid var(--border-color);
}
.btn-secondary:hover { background:var(--bg-surface-2); }

.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-surface-2); color:var(--text-primary); }

.btn-danger { background:var(--c-danger); color:#fff; }
.btn-success { background:var(--c-success); color:#fff; }

.btn-sm { padding:0.5rem 1rem; font-size:0.8125rem; }
.btn-lg { padding:1rem 2rem; font-size:1rem; }

.btn-icon {
  width:40px; height:40px; padding:0; border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
}

/* ============================================
   FORMS
   ============================================ */
.input, .select, .textarea {
  width:100%; padding:0.75rem 1rem; border-radius:var(--r-md);
  border:1.5px solid var(--border-color); background:var(--bg-surface);
  color:var(--text-primary); font-family:inherit; font-size:0.875rem;
  transition:all var(--t-fast); outline:none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px var(--c-primary-glow);
}
.input::placeholder { color:var(--text-tertiary); }

.form-group { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.form-label { font-size:0.8125rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }

/* ============================================
   CARDS
   ============================================ */
.card {
  background:var(--bg-surface); border:1px solid var(--border-color);
  border-radius:var(--r-xl); padding:var(--space-6);
  transition:all var(--t-normal); position:relative; overflow:hidden;
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--c-primary-light);
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--c-primary), #8b5cf6);
  opacity:0; transition:opacity var(--t-normal);
}
.card:hover::before { opacity:1; }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:0.25rem 0.75rem; border-radius:var(--r-full);
  font-size:0.75rem; font-weight:600; text-transform:capitalize;
}
.badge-dot { width:6px; height:6px; border-radius:50%; }
.badge-pending { background:var(--c-warning-light); color:#92400e; }
.badge-pending .badge-dot { background:var(--c-warning); }
.badge-in-progress { background:#dbeafe; color:#1e40af; }
.badge-in-progress .badge-dot { background:var(--c-info); }
.badge-done { background:var(--c-success-light); color:#065f46; }
.badge-done .badge-dot { background:var(--c-success); }
.badge-completed { background:#e0e7ff; color:#3730a3; }
.badge-cancelled { background:var(--c-danger-light); color:#991b1b; }

/* ============================================
   TOASTS
   ============================================ */
#toast-container {
  position:fixed; top:var(--space-6); right:var(--space-6); z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--space-3); pointer-events:none;
}
.toast {
  pointer-events:auto; padding:var(--space-4) var(--space-5); border-radius:var(--r-lg);
  background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-xl);
  border-left:4px solid var(--c-primary); font-size:0.875rem; max-width:380px;
  display:flex; align-items:flex-start; gap:var(--space-3);
  animation:toastSlide 0.4s var(--t-bounce);
}
@keyframes toastSlide {
  from { transform:translateX(120%) scale(0.9); opacity:0; }
  to { transform:translateX(0) scale(1); opacity:1; }
}
.toast.error { border-left-color:var(--c-danger); }
.toast.success { border-left-color:var(--c-success); }
.toast.warning { border-left-color:var(--c-warning); }

/* ============================================
   MODALS & DRAWERS
   ============================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center; padding:var(--space-4);
  opacity:0; pointer-events:none; transition:opacity var(--t-normal); backdrop-filter:blur(4px);
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal {
  background:var(--bg-surface); border-radius:var(--r-2xl); max-width:560px; width:100%;
  max-height:90vh; overflow:auto; box-shadow:var(--shadow-xl);
  transform:scale(0.9) translateY(20px); transition:all var(--t-normal);
  border:1px solid var(--border-color);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-header { padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding:var(--space-6); }
.modal-footer { padding:var(--space-4) var(--space-6); border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:var(--space-3); }

.drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:var(--z-drawer);
  opacity:0; pointer-events:none; transition:opacity var(--t-normal); backdrop-filter:blur(4px);
}
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:100%;
  background:var(--bg-surface); z-index:calc(var(--z-drawer) + 1);
  box-shadow:var(--shadow-xl); border-left:1px solid var(--border-color);
  transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
  display:flex; flex-direction:column;
}
.drawer.open { transform:translateX(0); }
@media (max-width:480px) { .drawer { width:100%; } }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.9); }
  to { opacity:1; transform:scale(1); }
}
@keyframes slideLeft {
  from { opacity:0; transform:translateX(-30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes slideRight {
  from { opacity:0; transform:translateX(30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.5; }
}
@keyframes float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position:-1000px 0; }
  100% { background-position:1000px 0; }
}
@keyframes bounce {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}

.animate-fade-in { animation:fadeIn 0.6s ease forwards; }
.animate-fade-up { animation:fadeUp 0.6s ease forwards; }
.animate-fade-down { animation:fadeDown 0.5s ease forwards; }
.animate-scale-in { animation:scaleIn 0.5s ease forwards; }
.animate-slide-left { animation:slideLeft 0.5s ease forwards; }
.animate-slide-right { animation:slideRight 0.5s ease forwards; }
.animate-float { animation:float 3s ease-in-out infinite; }
.animate-bounce { animation:bounce 2s ease-in-out infinite; }
.animate-pulse { animation:pulse 2s ease-in-out infinite; }

/* Scroll reveal base */
.reveal {
  opacity:0; transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Fallback: visible when JS is disabled or fails */
@media (scripting: none) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity:1 !important; transform:none !important; }
}

/* JS-loaded fallback: html.js-ready enables animations */
html:not(.js-ready) .reveal,
html:not(.js-ready) .reveal-left,
html:not(.js-ready) .reveal-right,
html:not(.js-ready) .reveal-scale { opacity:1 !important; transform:none !important; }
.reveal-left { opacity:0; transform:translateX(-50px); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(0.9); }
.reveal-scale.visible { opacity:1; transform:scale(1); }

/* Stagger delays */
.stagger-1 { transition-delay:0.1s; }
.stagger-2 { transition-delay:0.2s; }
.stagger-3 { transition-delay:0.3s; }
.stagger-4 { transition-delay:0.4s; }
.stagger-5 { transition-delay:0.5s; }
.stagger-6 { transition-delay:0.6s; }

/* ============================================
   LOADING & SKELETON
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%);
  background-size:2000px 100%; animation:shimmer 2s infinite linear;
  border-radius:var(--r-md);
}
.loader {
  width:24px; height:24px; border:3px solid var(--bg-surface-3);
  border-top-color:var(--c-primary); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.loader-lg { width:40px; height:40px; border-width:4px; }

/* ============================================
   TABLES
   ============================================ */
.table-wrap { overflow-x:auto; border-radius:var(--r-xl); border:1px solid var(--border-color); background:var(--bg-surface); }
table { width:100%; border-collapse:collapse; font-size:0.875rem; }
thead { background:var(--bg-surface-2); }
th { font-weight:600; color:var(--text-secondary); text-transform:uppercase; font-size:0.6875rem; letter-spacing:0.5px; padding:var(--space-3) var(--space-4); text-align:left; white-space:nowrap; }
td { padding:var(--space-3) var(--space-4); color:var(--text-primary); border-top:1px solid var(--border-color); vertical-align:middle; }
tbody tr { transition:background var(--t-fast); }
tbody tr:hover { background:var(--bg-surface-2); }

/* ============================================
   CHARTS
   ============================================ */
.chart-bar {
  height:8px; border-radius:var(--r-full); background:var(--bg-surface-3); overflow:hidden;
}
.chart-bar-fill {
  height:100%; border-radius:var(--r-full); background:linear-gradient(90deg, var(--c-primary), #8b5cf6);
  transition:width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================
   PROGRESS / STEPS
   ============================================ */
.stepper { display:flex; align-items:center; gap:var(--space-2); }
.stepper-step {
  display:flex; align-items:center; gap:var(--space-2); color:var(--text-tertiary); font-size:0.875rem; font-weight:500;
}
.stepper-step.active { color:var(--c-primary); }
.stepper-step.completed { color:var(--c-success); }
.stepper-dot {
  width:28px; height:28px; border-radius:50%; border:2px solid currentColor;
  display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700;
  background:var(--bg-surface); transition:all var(--t-normal);
}
.stepper-step.active .stepper-dot { background:var(--c-primary); border-color:var(--c-primary); color:#fff; box-shadow:0 0 0 4px var(--c-primary-glow); }
.stepper-step.completed .stepper-dot { background:var(--c-success); border-color:var(--c-success); color:#fff; }
.stepper-line { flex:1; height:2px; background:var(--bg-surface-3); border-radius:var(--r-full); position:relative; }
.stepper-line-fill { position:absolute; inset:0; background:var(--c-success); border-radius:var(--r-full); transform-origin:left; transition:transform 0.6s ease; }