:root {
  /* Light theme neumorphic tokens - Modern neumorphic design */
  /* Background: Mid-tone neutral for optimal neumorphic effect */
  --neu-bg-body: #e0e5ec;
  --neu-bg-surface: #ecf0f3;
  --neu-bg-surface-hover: #d9dfe8;
  --neu-bg-inset: #d1d9e6;

  /* Dual shadows for neumorphic depth - essential for proper 3D effect */
  --neu-shadow-light: rgba(255, 255, 255, 0.8);
  --neu-shadow-dark: rgba(163, 177, 198, 0.6);
  --neu-shadow-dark-subtle: rgba(163, 177, 198, 0.3);

  /* Borders - subtle and neutral */
  --neu-border: rgba(163, 177, 198, 0.2);
  --neu-border-hover: rgba(163, 177, 198, 0.35);

  /* Text: High contrast for WCAG AA compliance (4.5:1 minimum) */
  --neu-text-primary: #2d3748;
  --neu-text-secondary: #4a5568;
  --neu-text-muted: #718096;

  /* Ring offset matches body background */
  --neu-ring-offset: #e0e5ec;

  /* Brand colors with proper contrast */
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-hover: #3b82f6;
  --focus-ring: rgba(37, 99, 235, 0.5);

  /* Primary button gradient - vibrant and modern */
  --btn-primary-bg-start: #3b82f6;
  --btn-primary-bg-end: #2563eb;
  --btn-primary-border: #2563eb;
}
.dark {
  /* Dark theme overrides - Updated to match reference dark UI */
  --neu-bg-body: #171820;
  --neu-bg-surface: #21222a;
  --neu-bg-surface-hover: #2a2b34; /* slightly lighter hover */
  --neu-bg-inset: #1c1d25;
  /* Neumorphic shadows (dark): blue-tinted highlight + deep ambient */
  /* Highlight derived from surface (neutral grey, slightly darker) */
  --neu-shadow-light: color-mix(in srgb, var(--neu-bg-surface) 95%, white 5%);
  --neu-shadow-dark: rgba(0, 0, 0, 0.9); /* deep drop shadow */
  --neu-shadow-dark-subtle: rgba(0, 0, 0, 0.55);
  --neu-shadow-glow: rgba(49, 129, 248, 0.14); /* ambient outer glow for depth */
  --neu-border: #21222a;
  /* Text tokens: mostly white with secondary muted */
  --neu-text-primary: #f3f4f6; /* near white */
  --neu-text-secondary: #c7cad1; /* muted secondary */
  --neu-text-muted: #9aa0ab; /* more muted */
  --neu-ring-offset: #0f1115;
  /* Brand + focus tokens (dark) - blue accent */
  --primary: #3181f8;
  --primary-strong: #2a73e0;
  --focus-ring: rgba(49, 129, 248, 0.5);
  /* Primary button gradient tokens (dark) using blue accent */
  --btn-primary-bg-start: #3181f8;
  --btn-primary-bg-end: #2a73e0;
  --btn-primary-border: #3181f8;
}
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--neu-bg-body);
  color: var(--neu-text-primary);
}
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}
.header-nav-item {
  color: var(--neu-text-secondary);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  font-weight: 500; /* font-medium */
  transition: color 150ms ease-in-out;
}
.header-nav-item:hover {
  color: var(--neu-text-primary);
}
.header-nav-item.active {
  color: var(--neu-text-primary);
  font-weight: 600; /* font-semibold */
}
/* Keyboard focus indication for header links */
.header-nav-item:focus-visible,
.header-nav-item.active:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
  transition:
    outline-color 150ms ease-in-out,
    box-shadow 150ms ease-in-out;
}
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-slide-down {
  animation: slide-down 0.2s ease-out forwards;
}
/* Modern neumorphic button with proper dual shadows */
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.7em 1.7em;
  font-size: 18px;
  font-weight: 600;
  border-radius: 0.75em;
  cursor: pointer;
  border: none;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Neumorphic dual shadow: light from top-left, dark from bottom-right */
  box-shadow:
    -9px -9px 16px var(--neu-shadow-light),
    9px 9px 16px var(--neu-shadow-dark);
  letter-spacing: 0.01em;
  text-decoration: none;
  min-width: 160px;
  max-width: 250px;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.3;
  background: var(--neu-bg-surface);
  color: var(--neu-text-primary);
}
.quick-action-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    -10px -10px 20px var(--neu-shadow-light),
    10px 10px 20px var(--neu-shadow-dark);
}
.quick-action-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 5px 5px 10px var(--neu-shadow-dark),
    inset -5px -5px 10px var(--neu-shadow-light);
}
.quick-action-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
/* Reusable focus ring to match quick-action button */
.input-focus-ring:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.quick-action-btn-primary {
  background: linear-gradient(135deg, var(--btn-primary-bg-start), var(--btn-primary-bg-end));
  color: #ffffff;
  /* Primary button with enhanced shadows for elevation */
  box-shadow:
    -9px -9px 16px rgba(255, 255, 255, 0.7),
    9px 9px 16px rgba(37, 99, 235, 0.4),
    0 4px 12px rgba(37, 99, 235, 0.2);
}
.quick-action-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  transform: translateY(-2px);
  box-shadow:
    -10px -10px 20px rgba(255, 255, 255, 0.8),
    10px 10px 20px rgba(37, 99, 235, 0.45),
    0 6px 16px rgba(37, 99, 235, 0.3);
}
.quick-action-btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 5px 5px 10px rgba(37, 99, 235, 0.3),
    inset -5px -5px 10px rgba(255, 255, 255, 0.5);
}

/* Dark mode: remove white halo/glow from primary quick action button */
.dark .quick-action-btn-primary {
  box-shadow:
    -9px -9px 16px rgba(0, 0, 0, 0.6),
    9px 9px 16px rgba(49, 129, 248, 0.25),
    0 4px 12px rgba(49, 129, 248, 0.15);
}
.dark .quick-action-btn-primary:hover {
  box-shadow:
    -10px -10px 20px rgba(0, 0, 0, 0.6),
    10px 10px 20px rgba(49, 129, 248, 0.35),
    0 6px 16px rgba(49, 129, 248, 0.25);
}
.dark .quick-action-btn-primary:active {
  box-shadow:
    inset 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset -5px -5px 10px rgba(49, 129, 248, 0.25);
}
.quick-action-btn-danger {
  background: var(--neu-bg-surface);
  color: #dc2626; /* red-600 for better contrast */
  box-shadow:
    -9px -9px 16px var(--neu-shadow-light),
    9px 9px 16px rgba(220, 38, 38, 0.25);
}
.quick-action-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow:
    -10px -10px 20px var(--neu-shadow-light),
    10px 10px 20px rgba(220, 38, 38, 0.3);
}
.quick-action-btn-danger:active {
  transform: translateY(0);
  box-shadow:
    inset 5px 5px 10px rgba(220, 38, 38, 0.2),
    inset -5px -5px 10px var(--neu-shadow-light);
}
.dark .quick-action-btn-danger:hover {
  background: rgba(127, 29, 29, 0.2); /* red-900/20 */
}
.quick-action-btn-secondary {
  background: var(--neu-bg-surface);
  color: var(--neu-text-primary);
  /* Neumorphic dual shadow for secondary buttons */
  box-shadow:
    -9px -9px 16px var(--neu-shadow-light),
    9px 9px 16px var(--neu-shadow-dark);
}
.quick-action-btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow:
    -10px -10px 20px var(--neu-shadow-light),
    10px 10px 20px var(--neu-shadow-dark);
}
.quick-action-btn-secondary:active {
  transform: translateY(0);
  box-shadow:
    inset 5px 5px 10px var(--neu-shadow-dark),
    inset -5px -5px 10px var(--neu-shadow-light);
}
/* Compact quick-action (active on ≤640px) */
@media (max-width: 640px) {
  .quick-action-btn--compact {
    font-size: 14px;
    padding: 0.5em 1em;
    min-width: 0;
    max-width: none;
  }
}
/* Neumorphic utilities - Modern dual shadow cards */
.neu-card {
  background: var(--neu-bg-surface);
  border: 1px solid var(--neu-border);
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.neu-card--xlight {
  box-shadow:
    -6px -6px 12px var(--neu-shadow-light),
    6px 6px 12px var(--neu-shadow-dark-subtle);
}
.neu-card--light {
  box-shadow:
    -8px -8px 16px var(--neu-shadow-light),
    8px 8px 16px var(--neu-shadow-dark-subtle);
}
.neu-card--medium {
  box-shadow:
    -10px -10px 20px var(--neu-shadow-light),
    10px 10px 20px var(--neu-shadow-dark);
}
.neu-card--heavy {
  box-shadow:
    -12px -12px 24px var(--neu-shadow-light),
    12px 12px 24px var(--neu-shadow-dark);
}
.neu-card--hover:hover {
  border-color: var(--neu-border-hover);
}
.neu-card--xlight.neu-card--hover:hover {
  box-shadow:
    -7px -7px 14px var(--neu-shadow-light),
    7px 7px 14px var(--neu-shadow-dark-subtle);
}
.neu-card--light.neu-card--hover:hover {
  box-shadow:
    -9px -9px 18px var(--neu-shadow-light),
    9px 9px 18px var(--neu-shadow-dark-subtle);
}
.neu-card--medium.neu-card--hover:hover {
  box-shadow:
    -11px -11px 22px var(--neu-shadow-light),
    11px 11px 22px var(--neu-shadow-dark);
}
.neu-card--heavy.neu-card--hover:hover {
  box-shadow:
    -13px -13px 26px var(--neu-shadow-light),
    13px 13px 26px var(--neu-shadow-dark);
}
/* Dark-mode specific neumorphic depth with subtle blue glow */
.dark .neu-card--xlight {
  box-shadow:
    -6px -6px 12px var(--neu-shadow-light),
    6px 6px 12px var(--neu-shadow-dark-subtle),
    0 6px 14px var(--neu-shadow-glow);
}
.dark .neu-card--light {
  box-shadow:
    -8px -8px 16px var(--neu-shadow-light),
    8px 8px 16px var(--neu-shadow-dark-subtle),
    0 8px 16px var(--neu-shadow-glow);
}
.dark .neu-card--medium {
  box-shadow:
    -10px -10px 20px var(--neu-shadow-light),
    10px 10px 20px var(--neu-shadow-dark),
    0 10px 18px var(--neu-shadow-glow);
}
.dark .neu-card--heavy {
  box-shadow:
    -12px -12px 24px var(--neu-shadow-light),
    12px 12px 24px var(--neu-shadow-dark),
    0 12px 22px var(--neu-shadow-glow);
}
.dark .neu-card--xlight.neu-card--hover:hover {
  box-shadow:
    -7px -7px 14px var(--neu-shadow-light),
    7px 7px 14px var(--neu-shadow-dark-subtle),
    0 10px 18px var(--neu-shadow-glow);
}
.dark .neu-card--light.neu-card--hover:hover {
  box-shadow:
    -9px -9px 18px var(--neu-shadow-light),
    9px 9px 18px var(--neu-shadow-dark-subtle),
    0 12px 20px var(--neu-shadow-glow);
}
.dark .neu-card--medium.neu-card--hover:hover {
  box-shadow:
    -11px -11px 22px var(--neu-shadow-light),
    11px 11px 22px var(--neu-shadow-dark),
    0 14px 22px var(--neu-shadow-glow);
}
.dark .neu-card--heavy.neu-card--hover:hover {
  box-shadow:
    -13px -13px 26px var(--neu-shadow-light),
    13px 13px 26px var(--neu-shadow-dark),
    0 16px 24px var(--neu-shadow-glow);
}
.neu-input-inset {
  background: var(--neu-bg-inset) !important;
  border: 1px solid var(--neu-border) !important;
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark-subtle),
    inset -4px -4px 8px var(--neu-shadow-light);
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.neu-input-inset:focus {
  box-shadow:
    inset 5px 5px 10px var(--neu-shadow-dark-subtle),
    inset -5px -5px 10px var(--neu-shadow-light);
}
/* Neumorphic icon/button shadow helpers */
.neu-button-shadow {
  box-shadow:
    -6px -6px 12px var(--neu-shadow-light),
    6px 6px 12px var(--neu-shadow-dark);
}
.neu-button-shadow-active {
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}
/* Dark mode: ensure native controls (date pickers, etc.) use a dark color scheme */
.dark input[type='date'],
.dark input[type='datetime-local'],
.dark input[type='month'],
.dark input[type='time'] {
  color-scheme: dark;
}
/* Make the calendar picker indicator visible on dark backgrounds */
.dark input[type='date']::-webkit-calendar-picker-indicator,
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
.dark input[type='month']::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2) contrast(1.1) saturate(0.9);
  opacity: 0.9;
}