:root {
  --brand-50: #eef5ff;
  --brand-100: #d9e8ff;
  --brand-200: #bcd6ff;
  --brand-300: #8ebbff;
  --brand-400: #5996ff;
  --brand-500: #3371ff;
  --brand-600: #1a4ff5;
  --brand-700: #133be1;
  --brand-800: #1631b6;
  --brand-900: #162f8f;
  --brand-950: #111d57;
  --surface-50: #f8f9fb;
  --surface-100: #f0f2f5;
  --surface-200: #e4e7ec;
  --surface-300: #d0d5dd;
  --surface-400: #98a2b3;
  --surface-500: #667085;
  --surface-600: #475467;
  --surface-700: #344054;
  --surface-800: #1d2939;
  --surface-900: #101828;
  --surface-950: #0c111d;
}

/* Sidebar mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40;
}
.sidebar-overlay.active {
  display: block;
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
  }
  .sidebar.open {
    transform: translateX(0);
  }
}

/* Chart.js canvas responsive fix */
.chart-container {
  position: relative;
  width: 100%;
}

/* Smooth page transitions */
.main-content {
  animation: fadeIn 0.15s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toast dismiss animation */
.toast-dismiss {
  animation: slideOut 0.3s ease-in forwards;
}
@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}