/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* @import 'dark_mode_overrides.css'; - Commented out to fix 404 error */

/* CSS Variables for CloudSweep Design System - Phase 1: Updated Color Palette */
:root {
  /* Light Mode Colors - AAA Compliant */
  --background: 210 20% 98%;        /* Off-white background */
  --foreground: 215 30% 12%;        /* Near-black text */

  --card: 0 0% 100%;                /* Pure white cards */
  --card-foreground: 215 30% 12%;

  --popover: 0 0% 100%;
  --popover-foreground: 215 30% 12%;

  /* Primary: Deep cyan/blue - AAA compliant */
  --primary: 199 89% 40%;
  --primary-foreground: 0 0% 100%;

  /* Secondary: Light gray */
  --secondary: 210 17% 94%;
  --secondary-foreground: 215 30% 12%;

  /* Muted: Very light gray */
  --muted: 210 17% 95%;
  --muted-foreground: 215 20% 40%;   /* Medium gray text */

  /* Accent: Vibrant cyan */
  --accent: 188 94% 38%;
  --accent-foreground: 0 0% 100%;

  /* Status Colors - AAA compliant */
  --success: 142 71% 35%;            /* Green */
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 42%;             /* Orange */
  --warning-foreground: 0 0% 100%;
  --destructive: 0 72% 45%;          /* Red */
  --destructive-foreground: 0 0% 100%;

  /* UI Elements */
  --border: 214 20% 85%;             /* Light border */
  --input: 214 20% 85%;
  --ring: 199 89% 40%;

  --radius: 0.75rem;                 /* 12px default border radius */

  /* Sidebar - Purple/Navy Theme */
  --sidebar-background: 260 40% 7%;       /* Deep purple-navy - #0f0a1a */
  --sidebar-foreground: 210 20% 95%;      /* Light text */
  --sidebar-primary: 199 89% 60%;         /* Bright cyan */
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 265 48% 20%;          /* Purple hover - #2d1b4e */
  --sidebar-accent-foreground: 210 20% 95%;
  --sidebar-border: 265 43% 27%;          /* Purple border - #3d2860 */
  --sidebar-ring: 199 89% 60%;

  /* Gradients using new brand colors */
  --gradient-primary: linear-gradient(135deg, hsl(199 89% 40%), hsl(188 94% 38%));
  --gradient-subtle: linear-gradient(180deg, hsl(210 20% 98%), hsl(210 17% 95%));

  /* Shadows - AAA compliant */
  --shadow-soft: 0 2px 8px -2px hsl(215 30% 12% / 0.08);
  --shadow-medium: 0 4px 16px -4px hsl(215 30% 12% / 0.12);
  --shadow-elevated: 0 8px 24px -6px hsl(215 30% 12% / 0.16);
  --shadow-focus: 0 0 0 3px hsl(199 89% 40% / 0.1);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease-out;
}

/* Dark Mode Colors - AAA Compliant */
.dark {
  --background: 215 30% 10%;        /* Very dark blue */
  --foreground: 210 20% 95%;        /* Off-white text */

  --card: 215 28% 13%;              /* Dark card background */
  --card-foreground: 210 20% 95%;

  --popover: 215 28% 13%;
  --popover-foreground: 210 20% 95%;

  --primary: 199 89% 55%;           /* Lighter cyan for dark background */
  --primary-foreground: 0 0% 100%;

  --secondary: 215 25% 16%;
  --secondary-foreground: 210 20% 95%;

  --muted: 215 25% 16%;
  --muted-foreground: 215 15% 70%;  /* Light gray text */

  --accent: 188 94% 45%;            /* Brighter cyan for dark mode */
  --accent-foreground: 0 0% 100%;

  --destructive: 0 72% 50%;         /* Brighter red for dark mode */
  --destructive-foreground: 0 0% 100%;

  --border: 215 25% 20%;
  --input: 215 25% 20%;
  --ring: 199 89% 55%;

  /* Sidebar - Purple/Navy Theme */
  --sidebar-background: 260 40% 7%;       /* Deep purple-navy - #0f0a1a */
  --sidebar-foreground: 210 20% 95%;
  --sidebar-primary: 199 89% 60%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 265 48% 20%;          /* Purple hover - #2d1b4e */
  --sidebar-accent-foreground: 210 20% 95%;
  --sidebar-border: 265 43% 27%;          /* Purple border - #3d2860 */
  --sidebar-ring: 199 89% 60%;

  /* Dark mode gradients */
  --gradient-primary: linear-gradient(135deg, hsl(199 89% 55%), hsl(188 94% 45%));
  --gradient-subtle: linear-gradient(180deg, hsl(215 30% 10%), hsl(215 28% 13%));

  /* Dark mode shadows */
  --shadow-soft: 0 2px 8px -2px hsl(0 0% 0% / 0.4);
  --shadow-medium: 0 4px 16px -4px hsl(0 0% 0% / 0.5);
  --shadow-elevated: 0 8px 24px -6px hsl(0 0% 0% / 0.6);
  --shadow-focus: 0 0 0 3px hsl(199 89% 55% / 0.2);
}

/* Global Font Styles */
body {
  font-family: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: hsl(var(--foreground));
}

/* Apply Exo font to all headers */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-heading, .font-exo {
  font-family: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}

/* Ensure font-bold headers use appropriate weight */
h1.font-bold, h2.font-bold, h3.font-bold, 
h4.font-bold, h5.font-bold, h6.font-bold {
  font-weight: 700;
}

/* Navigation and UI elements that should use heading font */
nav, .nav-item, .btn, button,
.metric-value, .metric-label,
.dashboard-title, .page-title,
.card-title, .section-title {
  font-family: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure form inputs and text areas use body font */
input, textarea, select, .form-control {
  font-family: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Tables should use body font for data */
table, td, th {
  font-family: 'Ubuntu', system-ui, -apple-system', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Table headers can use heading font */
th, thead {
  font-family: 'Exo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}

/* Sidebar Styles */
.sidebar {
  background-color: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border));
  min-width: 280px;
  width: max-content;
  max-width: 360px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Navigation Section Styles */
.nav-section {
  margin-bottom: 1rem;
}

.nav-section-header {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  text-align: left;
  outline: none;
  width: 100%;
  color: hsl(var(--sidebar-foreground) / 0.6);
  transition: var(--transition-smooth);
  border-radius: 0.5rem;
}

.nav-section-header:hover {
  color: hsl(var(--sidebar-foreground));
}

.nav-section-header:focus {
  outline: 2px solid hsl(var(--sidebar-primary));
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.nav-section-content {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-section-content.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

.nav-section-content:not(.hidden) {
  max-height: 1000px;
  opacity: 1;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 1000px;
    opacity: 1;
  }
}

/* Chevron animation */
.chevron {
  transition: transform 0.2s ease-in-out;
  transform: rotate(-90deg); /* Default collapsed state: right-pointing */
}

/* Expanded state: down-pointing arrow */
.chevron.rotate-180 {
  transform: rotate(0deg);
}

.sidebar-nav-item {
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  transition: var(--transition-smooth);
  color: hsl(var(--sidebar-foreground));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
}

.sidebar-nav-item:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-primary));
}

.sidebar-nav-item.active {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-primary));
  font-weight: 500;
  border-left: 4px solid hsl(var(--sidebar-primary));
  padding-left: calc(1rem - 4px);
}

/* SVG icons in nav items should be flex-shrink-0 */
.sidebar-nav-item svg {
  flex-shrink: 0;
}

/* Spacing for nav item text */
.sidebar-nav-item > span:not([class*="bg-"]):not([class*="text-xs"]) {
  flex: 1;
}

/* Main Content Area with Sidebar */
.main-with-sidebar {
  margin-left: 280px;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

/* Adjust main content when sidebar width changes */
.sidebar ~ .main-with-sidebar {
  margin-left: calc(min(max(280px, 100%), 360px));
}

/* Card Styles */
.card-modern {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
}

.card-modern:hover {
  box-shadow: var(--shadow-elevated);
}

/* Button Styles */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  transition: var(--transition-fast);
}

.btn-primary:hover {
  background-color: hsl(var(--accent));
  box-shadow: var(--shadow-medium);
}

/* Form Elements */
.input-modern {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  transition: var(--transition-fast);
  color: hsl(var(--foreground));
}

.input-modern:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: var(--shadow-focus);
}

/* Responsive Sidebar */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-with-sidebar {
    margin-left: 0;
  }
}

/* Prevent pre tags and long content from expanding page width */
pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Ensure code blocks don't break layout */
.prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Utility Classes */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-subtle {
  background: var(--gradient-subtle);
}

.text-primary {
  color: hsl(var(--primary));
}

.text-muted {
  color: hsl(var(--muted-foreground));
}

.border-subtle {
  border-color: hsl(var(--border));
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}/* Dark Mode Overrides for Better Readability */

/* Alternative: Use solid dark backgrounds for maximum contrast */
.dark .content-frame-solid {
  background: rgb(17, 24, 39) !important; /* gray-900 */
}

/* Ensure sufficient contrast for gradients */
.dark .bg-gradient-dark {
  background: linear-gradient(135deg, rgb(17, 24, 39) 0%, rgb(0, 0, 0) 100%) !important;
}

/* Fix any remaining gradient issues */
.dark .card-modern {
  background: linear-gradient(145deg, rgb(17, 24, 39), rgb(0, 0, 0)) !important;
}

/* Ensure text remains readable on all dark backgrounds */
.dark .text-readable {
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* Additional contrast for status badges on dark backgrounds */
.dark .bg-green-100 {
  background-color: rgb(5, 46, 22) !important; /* Much darker green */
  color: rgb(134, 239, 172) !important; /* Bright green text */
}

.dark .bg-yellow-100 {
  background-color: rgb(66, 32, 6) !important; /* Much darker yellow */
  color: rgb(252, 211, 77) !important; /* Bright yellow text */
}

.dark .bg-red-100 {
  background-color: rgb(69, 10, 10) !important; /* Much darker red */
  color: rgb(252, 165, 165) !important; /* Bright red text */
}

/* Subscription Status Section Styles */
.subscription-status {
  transition: var(--transition-smooth);
}

.subscription-status:hover {
  transform: translateY(-1px);
}

/* Ensure subscription status is readable in both light and dark modes */
.sidebar .subscription-status-active {
  background-color: #dcfce7 !important;
  color: #15803d !important;
}

.sidebar .subscription-status-assessment {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}

.sidebar .subscription-status-inactive {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

/* Dark mode overrides for subscription status */
.dark .subscription-status-active {
  background-color: #052e16 !important; /* dark green */
  color: #86efac !important; /* bright green text */
}

.dark .subscription-status-assessment {
  background-color: #422006 !important; /* dark yellow */
  color: #fcd34d !important; /* bright yellow text */
}

.dark .subscription-status-inactive {
  background-color: #450a0a !important; /* dark red */
  color: #fca5a5 !important; /* bright red text */
}

/* Mobile responsive adjustments for subscription status */
@media (max-width: 1024px) {
  .sidebar .subscription-status {
    padding: 0.75rem;
  }

  .sidebar .subscription-status p {
    font-size: 0.813rem;
  }

  .sidebar .subscription-status svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Accessibility improvements */
.subscription-status a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ============================================================
   Component Library - Phase 3
   ============================================================ */

/* Button Base Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Exo', system-ui, sans-serif;
  border-radius: 0.75rem;
  transition: var(--transition-smooth);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Variants */
.btn-primary {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border) / 0.5);
}

.btn-secondary:hover:not(:disabled) {
  background-color: hsl(var(--secondary) / 0.8);
  box-shadow: var(--shadow-soft);
}

.btn-outline {
  background-color: transparent;
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--border) / 0.5);
}

.btn-outline:hover:not(:disabled) {
  background-color: hsl(var(--muted) / 0.3);
  border-color: hsl(var(--border));
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  box-shadow: var(--shadow-soft);
}

.btn-destructive:hover:not(:disabled) {
  background-color: hsl(var(--destructive) / 0.9);
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

.btn-success {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
  box-shadow: var(--shadow-soft);
}

.btn-success:hover:not(:disabled) {
  background-color: hsl(var(--success) / 0.9);
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

.btn-ghost {
  background-color: transparent;
  color: hsl(var(--foreground));
}

.btn-ghost:hover:not(:disabled) {
  background-color: hsl(var(--muted) / 0.3);
}

/* Button Sizes */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 1rem;
}

/* Badge Base */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Exo', system-ui, sans-serif;
  border-radius: 9999px;
  border: 1px solid;
  white-space: nowrap;
}

/* Badge Variants */
.badge-success {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.2);
}

.badge-warning {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / 0.2);
}

.badge-destructive {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.2);
}

.badge-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border) / 0.5);
}

.badge-primary {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.2);
}

.badge-info {
  background-color: hsl(var(--accent) / 0.1);
  color: hsl(var(--accent));
  border-color: hsl(var(--accent) / 0.2);
}

/* Table Styles */
.table-container {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background-color: hsl(var(--muted) / 0.5);
}

.data-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Exo', system-ui, sans-serif;
  color: hsl(var(--foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table tbody tr {
  border-top: 1px solid hsl(var(--border) / 0.5);
  transition: var(--transition-fast);
}

.data-table tbody tr:hover {
  background-color: hsl(var(--muted) / 0.3);
}

.data-table tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  font-family: 'Ubuntu', system-ui, sans-serif;
}

/* Table Actions */
.table-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'Exo', system-ui, sans-serif;
  border-radius: 0.5rem;
  transition: var(--transition-smooth);
  text-decoration: none;
}

.table-action-btn-primary {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.table-action-btn-primary:hover {
  background-color: hsl(var(--primary) / 0.2);
}

.table-action-btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.table-action-btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

/* Form Input Base - CRITICAL: Proper contrast for text */
.form-input {
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-family: 'Ubuntu', system-ui, sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  transition: var(--transition-smooth);
}

.form-input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: var(--shadow-focus);
}

.form-input::placeholder {
  color: hsl(var(--muted-foreground));
}

/* Dark Mode Form Input - Ensure proper contrast */
.dark .form-input {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* Form Labels */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Exo', system-ui, sans-serif;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

/* Form Helper Text */
.form-help {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-family: 'Ubuntu', system-ui, sans-serif;
}

/* Form Error */
.form-error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--destructive));
  font-family: 'Ubuntu', system-ui, sans-serif;
}

.form-input.is-invalid {
  border-color: hsl(var(--destructive));
}

.form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.1);
}

/* Select Inputs */
.form-select {
  width: 100%;
  padding: 0.625rem 1rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  font-family: 'Ubuntu', system-ui, sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  transition: var(--transition-smooth);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em 1.25em;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: var(--shadow-focus);
}

.dark .form-select {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* Checkbox/Radio */
.form-checkbox,
.form-radio {
  width: 1rem;
  height: 1rem;
  color: hsl(var(--primary));
  accent-color: hsl(var(--primary));
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.form-checkbox:checked,
.form-radio:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.form-checkbox:focus,
.form-radio:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.form-radio {
  border-radius: 9999px;
}

/* Textarea */
.form-textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-family: 'Ubuntu', system-ui, sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  transition: var(--transition-smooth);
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: var(--shadow-focus);
}

.dark .form-textarea {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: hsl(0 0% 0% / 0.6);
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Container */
.modal-container {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Modal Content */
.modal-content {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  box-shadow: var(--shadow-elevated);
  max-width: 32rem;
  width: 100%;
  padding: 1.5rem;
  animation: scale-in 0.2s ease-out;
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 1rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Exo', system-ui, sans-serif;
  color: hsl(var(--foreground));
}

/* Modal Body */
.modal-body {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  font-family: 'Ubuntu', system-ui, sans-serif;
}

.modal-body > * + * {
  margin-top: 1rem;
}

/* Modal Footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
  margin-top: 1rem;
}

/* Tabs Container */
.tabs-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 1.5rem;
}

/* Tab Button */
.tab-btn {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Exo', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  transition: var(--transition-smooth);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab-btn:hover {
  color: hsl(var(--foreground));
}

.tab-btn.active {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
}

/* Stats Card Component */
.stats-card {
  background-color: white;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  border-radius: 0.5rem; /* 8px - matching rounded-lg */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
  padding: 1.5rem;
  overflow: hidden;
}

/* Dark mode support for stats card */
.dark .stats-card {
  background-color: rgb(31 41 55); /* gray-800 */
  border-color: rgb(55 65 81); /* gray-700 */
}

.stats-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  margin-bottom: 1rem;
}

.stats-card-label {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Exo', system-ui, sans-serif;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}

.stats-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Exo', system-ui, sans-serif;
  color: hsl(var(--foreground));
}

/* Animation utilities */
.transition-smooth {
  transition: var(--transition-smooth);
}

.transition-fast {
  transition: var(--transition-fast);
}

/* Focus visible for accessibility */
.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-checkbox:focus-visible,
.form-radio:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}