/* ============================================================
   ExaPro — Custom Application Styles
   Version: v1.0.0
   Includes: Design Tokens, Dark Mode, Responsive Helpers,
             Progressive Enhancement, Accessibility
   ============================================================ */

/* ============================================================ */
/* 1. DESIGN TOKENS (CSS Custom Properties)                     */
/* ============================================================ */
:root {
  /* --- Primary palette (indigo-based, matching Tailwind defaults) --- */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* --- Neutral/surface palette --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* --- Semantic colors --- */
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;

  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #eab308;
  --color-warning-600: #ca8a04;
  --color-warning-700: #a16207;
  --color-warning-800: #854d0e;

  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;

  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;

  /* --- Surface tokens (overridden in dark mode) --- */
  --surface-page: var(--color-gray-50);
  --surface-card: var(--color-white);
  --surface-nav: var(--color-white);
  --surface-table-header: var(--color-gray-50);
  --surface-table-row-hover: var(--color-gray-50);
  --surface-table-row: var(--color-white);

  /* --- Text tokens (overridden in dark mode) --- */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-500);
  --text-tertiary: var(--color-gray-400);
  --text-muted: var(--color-gray-400);
  --text-on-primary: var(--color-white);

  /* --- Border tokens (overridden in dark mode) --- */
  --border-default: var(--color-gray-200);
  --border-light: var(--color-gray-100);
  --border-input: var(--color-gray-300);
  --border-ring: var(--color-gray-200);

  /* --- Shadow tokens --- */
  --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 -2px rgba(0, 0, 0, 0.1);
  --shadow-card: var(--shadow-sm), 0 0 0 1px var(--border-ring);

  /* --- Typography --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Border radius --- */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}

/* ============================================================ */
/* 2. DARK MODE — Automatic (respects OS/browser preference)    */
/* ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- Inverted palette for dark surfaces --- */
    --color-white: #1e1e2e;       /* cards, nav, table rows become dark */
    --color-gray-50: #181825;     /* page background */
    --color-gray-100: #1e1e2e;    /* table header, hover */
    --color-gray-200: #313244;    /* borders */
    --color-gray-300: #45475a;    /* input borders, dashed borders */
    --color-gray-400: #6c7086;    /* muted text */
    --color-gray-500: #a6adc8;    /* secondary text */
    --color-gray-600: #bac2de;    /* tertiary text */
    --color-gray-700: #cdd6f4;    /* primary text (high contrast) */
    --color-gray-800: #e0e4f0;
    --color-gray-900: #e6eaf5;    /* primary text */

    /* --- Inverted semantic colors for dark mode --- */
    --color-success-50: #1a2e1a;
    --color-success-100: #1a3a1a;
    --color-success-600: #4ade80;
    --color-success-700: #86efac;
    --color-success-800: #bbf7d0;

    --color-warning-50: #2e2a1a;
    --color-warning-100: #3a341a;
    --color-warning-600: #facc15;
    --color-warning-700: #fde047;
    --color-warning-800: #fef08a;

    --color-danger-50: #2e1a1a;
    --color-danger-100: #3a1a1a;
    --color-danger-600: #f87171;
    --color-danger-700: #fca5a5;
    --color-danger-800: #fecaca;

    --color-amber-50: #2e2a1a;
    --color-amber-100: #3a341a;
    --color-amber-200: #5c521e;
    --color-amber-600: #fbbf24;
    --color-amber-700: #fcd34d;

    /* --- Primary palette adjustments for dark mode --- */
    --color-primary-50: #1e1e36;
    --color-primary-100: #2d2a5e;
    --color-primary-200: #37308a;
    --color-primary-300: #4f46e5;
    --color-primary-400: #6366f1;
    --color-primary-500: #818cf8;
    --color-primary-600: #a5b4fc;
    --color-primary-700: #c7d2fe;
    --color-primary-800: #e0e7ff;

    /* --- Surface tokens (dark mode overrides) --- */
    --surface-page: var(--color-gray-50);
    --surface-card: #1e1e2e;
    --surface-nav: #1e1e2e;
    --surface-table-header: #181825;
    --surface-table-row-hover: #1e1e2e;
    --surface-table-row: #1e1e2e;

    /* --- Text tokens (dark mode) --- */
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-500);
    --text-tertiary: var(--color-gray-400);
    --text-muted: var(--color-gray-400);

    /* --- Border tokens (dark mode) --- */
    --border-default: #313244;
    --border-light: #313244;
    --border-input: #45475a;
    --border-ring: #313244;

    /* --- Shadow tokens (dark mode — subtle on dark bg) --- */
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px var(--border-ring);
  }
}

/* ============================================================ */
/* 3. BASE ELEMENT RESET & IMPROVEMENTS                         */
/* ============================================================ */

/* Smooth scrolling (accessibility: respect reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Focus-visible outline for keyboard nav */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Improved selection contrast */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

/* ============================================================ */
/* 4. RESPONSIVE TABLE HELPERS                                   */
/* ============================================================ */

/* Wrap all data tables for horizontal scroll on mobile */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 640px; /* forces scroll on small screens */
}

@media (max-width: 640px) {
  .table-responsive table {
    min-width: 100%;
  }
}

/* ============================================================ */
/* 5. PROGRESSIVE ENHANCEMENT & NOSCRIPT                         */
/* ============================================================ */

/* Hide elements that are JS-only */
.js-only {
  display: none;
}

/* When JS is available, show JS-only elements */
.js .js-only {
  display: revert;
}

/* Noscript banner */
.noscript-banner {
  background: var(--color-danger-50);
  border: 1px solid var(--color-danger-100);
  color: var(--color-danger-700);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Ensure forms work without JS (fallback visibility) */
.no-js .js-form-enhanced {
  /* No-op: forms already degrade gracefully */
}

/* ============================================================ */
/* 6. CARD & SURFACE IMPROVEMENTS                               */
/* ============================================================ */

/* Use CSS custom properties on common utility surfaces.
   These are supplement classes — they complement Tailwind utilities
   by providing dark-mode-aware backgrounds. */

.surface-card {
  background-color: var(--surface-card);
}

.surface-page {
  background-color: var(--surface-page);
}

.surface-nav {
  background-color: var(--surface-nav);
}

/* ============================================================ */
/* 7. ACCESSIBILITY IMPROVEMENTS                                */
/* ============================================================ */

/* Skip to main content link (hidden until focused) */
.skip-to-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-600);
  color: white;
  z-index: 9999;
  clip: auto;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ============================================================ */
/* 8. DASHBOARD STATS CARD DARK MODE OVERLAY                    */
/*    (Targets inline Tailwind classes we can't easily change)  */
/* ============================================================ */

@media (prefers-color-scheme: dark) {
  /* Override common inline bg-white/ring-gray-200/shadow patterns */
  [class*="bg-white"] {
    /* Already handled by --color-white redefinition */
  }

  /* Make dashed borders visible on dark bg */
  [class*="border-dashed"][class*="border-gray-300"] {
    border-color: var(--border-input);
  }

  /* Keep text-on-primary readable (indigo buttons etc.) */
  [class*="text-white"][class*="bg-indigo-"] {
    color: #ffffff;
  }
}

/* ============================================================ */
/* 9. PRINT STYLES                                              */
/* ============================================================ */
@media print {
  nav,
  .no-print {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================================ */
/* 10. UTILITY CLASSES                                          */
/* ============================================================ */

/* Hide scrollbar but keep scrollable (for nav bars) */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}