/* design-system.css – Central design tokens and utility classes */

:root {
  /* Color palette */
  --bg: #0a0d14;
  --surface: #111520;
  --surface2: #171d2e;
  --border: #1e2840;
  --border2: #252f4a;
  --accent: #4f8cff;
  --accent2: #7c3aed;
  --green: #10d98b;
  --amber: #f59e0b;
  --red: #ef4444;
  --text: #e8edf8;
  --text2: #b0b9d4;
  --text3: #6b7b9c;

  /* Typography */
  --font-family-sans: 'Inter', sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  --font-family-display: 'Outfit', sans-serif;
  --font-size-base: 14px;
  --font-scale: 1;
  --font-size-xs: calc(11px * var(--font-scale));
  --font-size-sm: calc(12px * var(--font-scale));
  --font-size-md: calc(14px * var(--font-scale));
  --font-size-lg: calc(16px * var(--font-scale));
  --font-size-xl: calc(18px * var(--font-scale));
  --font-size-2xl: calc(20px * var(--font-scale));
  --font-size-3xl: calc(24px * var(--font-scale));
  --font-size-4xl: calc(28px * var(--font-scale));

  /* Spacing – multiples of 4 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 6px 12px rgba(0,0,0,0.2);

  /* Line heights */
  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* Breakpoints */
  --breakpoint-desktop: 1280px;
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 480px;
}

/* Utility spacing classes */
.m-xs {margin: var(--space-xs) !important;}
.m-sm {margin: var(--space-sm) !important;}
.m-md {margin: var(--space-md) !important;}
.m-lg {margin: var(--space-lg) !important;}
.m-xl {margin: var(--space-xl) !important;}
.p-xs {padding: var(--space-xs) !important;}
.p-sm {padding: var(--space-sm) !important;}
.p-md {padding: var(--space-md) !important;}
.p-lg {padding: var(--space-lg) !important;}
.p-xl {padding: var(--space-xl) !important;}

/* Typography classes */
.h1 {font-family: var(--font-family-display); font-size: var(--font-size-4xl); font-weight: 700; line-height: var(--line-tight);}
.h2 {font-family: var(--font-family-display); font-size: var(--font-size-3xl); font-weight: 600; line-height: var(--line-tight);}
.h3 {font-family: var(--font-family-display); font-size: var(--font-size-2xl); font-weight: 600; line-height: var(--line-normal);}
.body {font-family: var(--font-family-sans); font-size: var(--font-size-md); line-height: var(--line-normal);}
.caption {font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--text3);}

/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-family-sans);
  background: var(--accent);
  color: #fff;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn:hover {background: var(--accent2);}
.btn:disabled {opacity: 0.5; cursor: not-allowed;}

/* Icon button */
.btn-icon {
  width: 32px; height: 32px; border: none; background: transparent; color: var(--text2);
  border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s;
}
.btn-icon:hover {background: var(--surface); color: var(--text);}
.btn-icon.active {background: var(--accent); color: #fff;}

/* Card component */
.card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.card:hover {box-shadow: var(--shadow-md);}

/* Table base */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}
.responsive-table th, .responsive-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border2);
}
.responsive-table th {background: var(--surface); color: var(--text3); font-family: var(--font-family-mono); font-size: var(--font-size-xs); text-transform: uppercase;}
.responsive-table tbody tr:hover {background: var(--surface);}

/* Input base */
.input {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,140,255,0.08);}
.input::placeholder {color: var(--text3);}

/* Sidebar utilities */
.sidebar.collapsed {width: 70px; overflow: hidden;}
.sidebar.collapsed .sidebar-logo .logo-sub,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .nav-item span:not(.nav-icon),
.sidebar.collapsed .user-info,
.sidebar.collapsed .logout-btn {display: none;}
.sidebar.collapsed .nav-item {justify-content: center; padding: 12px 0;}

/* Adjust main layout when sidebar collapsed */
.sidebar.collapsed ~ .main {
  margin-left: 70px;
  width: calc(100% - 70px);
}


/* Layout grid for KPI cards */
.stats-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Media queries */
@media (max-width: var(--breakpoint-tablet)) {
  .content {padding: var(--space-md) var(--space-lg);}
}
@media (max-width: var(--breakpoint-mobile)) {
  .content {padding: var(--space-sm);}
}