/* ============================================
   ACCESSIBILITY 2025 - Color-Blind Friendly Design
   
   Based on WCAG 2.2 Guidelines:
   - 4.5:1 contrast ratio for normal text (Level AA)
   - 3:1 contrast ratio for large text (18pt+ or 14pt+ bold)
   - Minimum 16px base font size
   - 24px minimum touch targets (44px recommended)
   
   Color-Blind Safe Palette:
   - Blue (#2563eb) + Orange (#ea580c) - Safe for all types
   - Avoid red-green combinations alone
   - Use icons/patterns alongside colors
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES - ACCESSIBLE COLOR TOKENS
   ============================================ */
:root {
  /* Primary Actions - Blue (safe for all color blindness types) */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-primary-lighter: #f8fafc;
  
  /* Success/Approve - Teal-shifted green (better than pure green) */
  --color-success: #0d9488;
  --color-success-hover: #0f766e;
  --color-success-light: #f0fdfa;
  --color-success-bg: #ccfbf1;
  
  /* Danger/Reject - Blue-shifted red (better contrast) */
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-light: #fef2f2;
  --color-danger-bg: #fee2e2;
  
  /* Warning - Orange (high contrast, safe for most) */
  --color-warning: #ea580c;
  --color-warning-hover: #c2410c;
  --color-warning-light: #fff7ed;
  --color-warning-bg: #ffedd5;
  
  /* Neutral grays - Primary UI */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-disabled: #9ca3af;
  --color-border: #d1d5db;
  --color-border-light: #e5e7eb;
  --color-bg-subtle: #f9fafb;
  --color-bg-muted: #f3f4f6;
  
  /* Font sizes - WCAG compliant minimums */
  --font-size-xs: 0.875rem;     /* 14px - minimum for secondary text */
  --font-size-sm: 0.9375rem;    /* 15px - small text */
  --font-size-base: 1rem;       /* 16px - body text minimum */
  --font-size-md: 1.0625rem;    /* 17px - improved readability */
  --font-size-lg: 1.125rem;     /* 18px - large text */
  --font-size-xl: 1.25rem;      /* 20px - headings */
  --font-size-2xl: 1.5rem;      /* 24px - major headings */
  --font-size-3xl: 1.875rem;    /* 30px - page titles */
  
  /* Touch targets */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  
  /* Focus states */
  --focus-ring-color: #2563eb;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* ============================================
   BASE TYPOGRAPHY - Accessibility Compliant
   ============================================ */
html {
  font-size: 16px; /* Base font size - never smaller */
}

body {
  font-size: var(--font-size-base);
  line-height: 1.6; /* Improved readability */
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Minimum font sizes for different elements */
p, li, td, th, span, label, input, select, textarea, button {
  font-size: max(var(--font-size-xs), 0.875rem); /* Never smaller than 14px */
}

/* Form elements must be at least 16px to prevent iOS zoom */
input, select, textarea {
  font-size: max(var(--font-size-base), 1rem) !important;
}

/* Small text helper - use sparingly, still meets minimums */
.text-small {
  font-size: var(--font-size-xs) !important; /* 14px */
  line-height: 1.5;
}

/* Extra small text - only for non-essential info */
.text-xs-accessible {
  font-size: 0.8125rem; /* 13px - absolute minimum */
  line-height: 1.5;
}

/* Ensure heading hierarchy is clear */
h1, .text-3xl { font-size: var(--font-size-3xl); font-weight: 700; }
h2, .text-2xl { font-size: var(--font-size-2xl); font-weight: 600; }
h3, .text-xl { font-size: var(--font-size-xl); font-weight: 600; }
h4, .text-lg { font-size: var(--font-size-lg); font-weight: 500; }
h5, h6 { font-size: var(--font-size-base); font-weight: 500; }

/* ============================================
   BUTTONS - Color-Blind Accessible
   Using icons alongside colors for redundancy
   ============================================ */

/* Base button styles */
.btn, button, [role="button"] {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: 0.625rem 1rem; /* 10px 16px */
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Primary button - Blue */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-primary-hover);
}

/* Success/Approve button - Teal */
.btn-success, .btn-approve {
  background-color: var(--color-success);
  color: white;
  border: none;
}

.btn-success:hover, .btn-success:focus,
.btn-approve:hover, .btn-approve:focus {
  background-color: var(--color-success-hover);
}

/* Danger/Reject button */
.btn-danger, .btn-reject {
  background-color: var(--color-danger);
  color: white;
  border: none;
}

.btn-danger:hover, .btn-danger:focus,
.btn-reject:hover, .btn-reject:focus {
  background-color: var(--color-danger-hover);
}

/* Warning button - Orange */
.btn-warning {
  background-color: var(--color-warning);
  color: white;
  border: none;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: var(--color-warning-hover);
}

/* Secondary/Outline button */
.btn-secondary, .btn-outline {
  background-color: white;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover, .btn-secondary:focus,
.btn-outline:hover, .btn-outline:focus {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}

/* Ghost button - minimal */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: none;
}

.btn-ghost:hover, .btn-ghost:focus {
  background-color: var(--color-bg-muted);
}

/* ============================================
   STATUS BADGES - Color-Blind Safe
   Using shape + color + icon for redundancy
   ============================================ */

.badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid transparent;
}

/* Pending - Neutral gray with icon */
.badge-pending, .status-pending {
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* Approved - Teal with checkmark pattern */
.badge-approved, .status-approved, .badge-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border-color: var(--color-success);
}

/* Rejected - Red with X pattern */
.badge-rejected, .status-rejected, .badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Changes Requested - Orange with pencil */
.badge-changes, .status-changes-requested, .badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

/* Info - Blue */
.badge-info, .status-info {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Neutral */
.badge-neutral, .badge-gray {
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* ============================================
   STAT CARDS - Neutral, Clean Design
   ============================================ */

.stat-card {
  background-color: white;
  border: 1px solid var(--color-border-light);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.stat-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.stat-card-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.stat-card-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ============================================
   FORMS - Accessible Inputs
   ============================================ */

.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0.625rem 0.875rem;
  font-size: var(--font-size-base) !important; /* Prevent iOS zoom */
  color: var(--color-text-primary);
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 var(--focus-ring-width) rgba(37, 99, 235, 0.2);
}

.form-input:disabled, .form-select:disabled, .form-textarea:disabled,
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--color-bg-muted);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.form-label, label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.375rem;
}

/* ============================================
   FOCUS STATES - High Visibility
   ============================================ */

*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

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

/* ============================================
   TOAST NOTIFICATIONS - Top Right Unified
   ============================================ */

.toast, .notification-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  min-width: 300px;
  max-width: 420px;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--color-primary);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.show, .notification-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-success { border-left-color: var(--color-success); }
.toast-error { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-warning); }
.toast-info { border-left-color: var(--color-primary); }

/* ============================================
   RESPONSIVE - Mobile/Tablet Friendly
   ============================================ */

/* Prevent elements from being too large on mobile */
@media (max-width: 640px) {
  /* Increase touch targets on mobile */
  button, a, [role="button"] {
    min-height: var(--touch-target-comfortable);
    min-width: var(--touch-target-comfortable);
  }
  
  /* Ensure text remains readable */
  body {
    font-size: var(--font-size-base);
  }
  
  /* Prevent horizontal scroll */
  .overflow-prevention {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Cards should have max width */
  .card, .stat-card, .panel {
    max-width: 100%;
  }
  
  /* Tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  body {
    font-size: var(--font-size-md);
  }
  
  .container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Large screens */
@media (min-width: 1025px) {
  body {
    font-size: var(--font-size-md);
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: more) {
  :root {
    --color-border: #000;
    --color-text-primary: #000;
    --focus-ring-width: 4px;
  }
  
  button, .btn {
    border: 2px solid currentColor;
  }
  
  .badge {
    border-width: 2px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .toast, .notification-toast {
    transform: none;
    transition: opacity 0.1s ease;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  .toast, .notification-toast, button, .btn {
    display: none !important;
  }
  
  a {
    text-decoration: underline;
  }
}