@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");/**
 * Global Accessibility Styles
 * 
 * Provides:
 * - Focus indicators (WCAG 2.1 compliant)
 * - High contrast mode support
 * - Reduced motion support
 * - Skip links
 * - Screen reader utilities
 */

/* ===========================
   Focus Indicators
   =========================== */

/* Enhanced focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Button focus styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* Card focus for keyboard navigation */
.card:focus-visible,
.enhanced-card:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

/* Wizard step indicator focus */
.step-indicator:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===========================
   Skip Links
   =========================== */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bs-primary, #0d6efd);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid white;
  outline-offset: -4px;
}

/* ===========================
   Screen Reader Only
   =========================== */

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===========================
   High Contrast Mode
   =========================== */

@media (prefers-contrast: high) {
  /* Increase border contrast */
  .card,
  .enhanced-card,
  button,
  input,
  select,
  textarea {
    border-width: 2px;
    border-color: currentColor;
  }

  /* Ensure text has sufficient contrast */
  .text-muted {
    color: #000 !important;
  }

  /* Make focus indicators more prominent */
  *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }

  /* Increase icon visibility */
  .btn-link,
  .text-secondary {
    color: #000 !important;
  }
}

/* ===========================
   Reduced Motion
   =========================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable progress bar animation */
  .progress-bar {
    transition: none !important;
  }

  /* Disable wizard transitions */
  .wizard-content-card {
    transition: none !important;
  }

  /* Disable collapse animations */
  .collapsing {
    transition: none !important;
  }

  /* Disable transform animations */
  .rotate-180,
  .transition-transform {
    transition: none !important;
  }
}

/* ===========================
   ARIA Live Regions
   =========================== */

/* Ensure live regions are announced properly */
[aria-live="polite"],
[aria-live="assertive"] {
  position: relative;
}

/* Style for validation alerts */
[role="alert"] {
  border-left: 4px solid var(--bs-danger, #dc3545);
}

/* ===========================
   Keyboard Navigation Helpers
   =========================== */

/* Show outline for keyboard users only */

/* Improve button keyboard navigation */
button:focus:not(:focus-visible) {
  outline: none;
}

/* ===========================
   Touch Target Sizing
   =========================== */

/* Ensure minimum touch target size (44x44px per WCAG) */
/* Scoped to buttons and dropdowns only — checkbox/radio sizing is handled */
/* by their label/container (Bootstrap .form-check), not the input itself */
.btn,
button:not(.btn-link):not(.btn-close):not(.mini-nav-item):not(.mini-navbar-toggle),
.dropdown-toggle,
.form-select {
  min-height: 22px;
  min-width: 22px;
}

/* Exception for small buttons with explicit size */
.btn-sm {
  min-height: 22px;
  min-width: 36px;
}

/* ===========================
   Focus Trap for Modals
   =========================== */

/* Ensure modal content is keyboard accessible */
.modal {
  isolation: isolate;
}

.modal-content:focus-within {
  outline: none;
}

/* ===========================
   Color Contrast
   =========================== */

/* Ensure sufficient color contrast (WCAG AA: 4.5:1 for normal text) */
.text-muted {
  color: #6c757d !important; /* Passes AA for normal text */
}

.text-secondary {
  color: #6c757d !important; /* Passes AA for normal text */
}

/* Link contrast */
a {
  color: #0056b3; /* Darker blue for better contrast */
  text-decoration: underline;
}

a:hover {
  color: #003d82;
}

/* ===========================
   Form Accessibility
   =========================== */

/* Ensure labels are properly associated */
label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Required field indicator */
.required::after {
  content: " *";
  color: var(--bs-danger, #dc3545);
  aria-label: "required";
}

/* Error state for form inputs */
.is-invalid,
.form-control.is-invalid {
  border-color: var(--bs-danger, #dc3545);
  border-width: 2px;
}

/* Help text for form fields */
.form-text {
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* ===========================
   Progress Indicators
   =========================== */

/* Accessible progress bar */
[role="progressbar"] {
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

/* ===========================
   Interactive States
   =========================== */

/* Disabled state */
[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Selected state */

/* Pressed state for toggle buttons */

/* ===========================
   Responsive Text Sizing
   =========================== */

/* ===========================
   User-Configurable Accessibility
   =========================== */

/* Font size scaling via user preference (data-font-size attribute on <html>)
   Keep scaling accessible without allowing modal/card layouts to become oversized
   on typical 13-14" laptop viewports. */
html[data-font-size="small"]       { font-size: 14px; }
html[data-font-size="medium"]      { font-size: 16px; }
html[data-font-size="large"]       { font-size: 17px; }
html[data-font-size="extra-large"] { font-size: 18px; }
html[data-font-size="xlarge"]      { font-size: 18px; } /* ThemeProvider alias */

/* Line spacing via user preference */
html[data-line-spacing="normal"]   { --user-line-height: 1.5; }
html[data-line-spacing="relaxed"]  { --user-line-height: 1.75; }
html[data-line-spacing="spacious"] { --user-line-height: 2.0; }

body {
  line-height: var(--user-line-height, 1.5);
}

/* ===========================
   Modal Density Guardrails
   ===========================
   Global popup sizing guardrails so dialogs remain usable on smaller laptops.
   Applies to all Bootstrap modals except fullscreen variants. */
.modal-dialog:not(.modal-fullscreen) {
  margin: 0.5rem auto;
  max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1rem));
}

.modal-dialog.modal-lg:not(.modal-fullscreen) {
  max-width: min(680px, calc(100vw - 1rem));
}

.modal-dialog.modal-xl:not(.modal-fullscreen) {
  max-width: min(860px, calc(100vw - 1rem));
}

.modal-dialog:not(.modal-fullscreen) .modal-content {
  max-height: calc(100vh - 1rem);
}

.modal-dialog:not(.modal-fullscreen) .modal-body {
  overflow-y: auto;
}

/* Keep modal readability consistent even when global line spacing is relaxed/spacious. */
html[data-line-spacing="relaxed"] .modal-content,
html[data-line-spacing="spacious"] .modal-content {
  line-height: 1.5;
}

/* Denser modal spacing on common laptop viewport classes. */
@media (max-width: 1600px), (max-height: 950px) {
  .modal-dialog:not(.modal-fullscreen) .modal-header,
  .modal-dialog:not(.modal-fullscreen) .modal-body,
  .modal-dialog:not(.modal-fullscreen) .modal-footer {
    padding: 0.9rem;
  }
}

/* User-controlled reduced motion (independent of OS preference) */
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* User-controlled high contrast mode */
html[data-high-contrast="true"] .card,
html[data-high-contrast="true"] .enhanced-card,
html[data-high-contrast="true"] button,
html[data-high-contrast="true"] input,
html[data-high-contrast="true"] select,
html[data-high-contrast="true"] textarea {
  border-width: 2px;
  border-color: currentColor;
}

html[data-high-contrast="true"] .text-muted {
  color: #000 !important;
}

html[data-high-contrast="true"] *:focus-visible {
  outline-width: 3px;
  outline-offset: 3px;
}

html[data-high-contrast="true"] .btn-link,
html[data-high-contrast="true"] .text-secondary {
  color: #000 !important;
}

/* User-controlled large touch targets (44px per WCAG 2.5.5 AAA) */
html[data-large-touch-targets="true"] .btn,
html[data-large-touch-targets="true"] button:not(.btn-link):not(.btn-close):not(.mini-nav-item):not(.mini-navbar-toggle),
html[data-large-touch-targets="true"] .dropdown-toggle,
html[data-large-touch-targets="true"] .form-select {
  min-height: 44px;
  min-width: 44px;
}

html[data-large-touch-targets="true"] .btn-sm {
  min-height: 36px;
  min-width: 36px;
}

/* ===========================
   Print Styles
   =========================== */

@media print {
  /* Remove interactive elements from print */
  button,
  .btn,
  .dropdown-toggle,
  nav {
    display: none !important;
  }

  /* Ensure focus indicators don't print */
  *:focus,
  *:focus-visible {
    outline: none !important;
  }

  /* Ensure good contrast in print */
  body {
    color: #000;
    background: #fff;
  }
}
/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* Font Display Optimization - Prevent FOIT (Flash of Invisible Text) */
* {
  font-display: swap !important;
}

/* System Font Stack with font-display: swap */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-display: swap;
}

/* Monospace fonts with font-display: swap */
code, pre, .monospace {
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
  font-display: swap;
}

/* Bootstrap Icons font-display optimization handled by PostCSS */

/* Image Optimization Hints */
img {
  /* Enable native lazy loading for images below the fold */
  loading: lazy;
}

/* Critical images should override with loading="eager" in HTML */
img[loading="eager"] {
  loading: eager;
}

/* WebP Support Detection */
@supports (background-image: url('test.webp')) {
  /* Browser supports WebP */
}

@supports not (background-image: url('test.webp')) {
  /* Fallback for browsers without WebP */
}

/* Reduce Layout Shift - Reserve space for async content */

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Optimize Bootstrap Icons - Only load what's used */
/* This will be automatically tree-shaken by Vite */
.bi::before {
  font-display: swap;
}

/* Defer non-critical animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* GPU Acceleration for transforms */

/* Contain paint for better performance */
/**
 * Utility Classes for Performance Optimization
 * Sprint 2: Replace inline styles with reusable utility classes
 * 
 * Benefits:
 * - React re-render optimization (no new style objects)
 * - Consistent design tokens
 * - Reduced bundle size
 * - Better caching
 */

/* ===========================
   Font Sizes
   =========================== */

.text-xs {
  font-size: 0.75rem; /* 12px */
}

.text-sm {
  font-size: 0.875rem; /* 14px */
}

.text-base {
  font-size: 1rem; /* 16px */
}

.text-lg {
  font-size: 1.125rem; /* 18px */
}

.text-xl {
  font-size: 1.25rem; /* 20px */
}

.text-2xl {
  font-size: 1.5rem; /* 24px */
}

.text-3xl {
  font-size: 2rem; /* 32px */
}

.text-4xl {
  font-size: 3rem; /* 48px */
}

.text-5xl {
  font-size: 4rem; /* 64px */
}

/* Icon specific sizes */

.icon-lg {
  font-size: 2rem;
}

.icon-2xl {
  font-size: 3rem;
}

.icon-3xl {
  font-size: 4rem;
}

/* ===========================
   Width Constraints
   =========================== */

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-100px {
  width: 100px;
}

/* Percentages */

/* ===========================
   Max Width Constraints
   =========================== */

.max-w-400 {
  max-width: 400px;
}

.max-w-500 {
  max-width: 500px;
}

.max-w-520 {
  max-width: 520px;
}

.max-w-600 {
  max-width: 600px;
}

/* ===========================
   Height Constraints
   =========================== */

/* ===========================
   Max Height with Scroll
   =========================== */

/* ===========================
   Display Utilities
   =========================== */

.d-none {
  display: none !important;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

/* ===========================
   Cursor Utilities
   =========================== */

.cursor-pointer {
  cursor: pointer;
}

/* ===========================
   Overflow Utilities
   =========================== */

/* ===========================
   Spacing Utilities
   =========================== */

.gap-2 {
  gap: 0.5rem; /* 8px */
}

.gap-3 {
  gap: 1rem; /* 16px */
}

.gap-4 {
  gap: 1.5rem; /* 24px */
}

/* ===========================
   Margin Utilities (Specific)
   =========================== */

.mb-06 {
  margin-bottom: 0.6rem;
}

.mb-07 {
  margin-bottom: 0.7rem;
}

.my-07 {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}

/* ===========================
   Alignment Utilities
   =========================== */

.text-center {
  text-align: center;
}

/* ===========================
   Border Utilities
   =========================== */

/* ===========================
   Shadow Utilities
   =========================== */

.shadow-lg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ===========================
   Color Utilities
   =========================== */

.text-muted-light {
  color: #5f6b7a;
}

/* Alert variants */
.alert-success-custom {
  border-left: 3px solid #43a047 !important;
  background-color: #e8f5e9 !important;
  color: #2e7d32 !important;
}

/* ===========================
   Responsive Utilities
   =========================== */

/* Mobile first approach */
@media (max-width: 576px) {
  .text-4xl {
    font-size: 2.5rem; /* Smaller on mobile */
  }
  
  .text-5xl {
    font-size: 3rem; /* Smaller on mobile */
  }
  
  .icon-2xl {
    font-size: 2.5rem;
  }
  
  .icon-3xl {
    font-size: 3rem;
  }
}

/* ===========================
   Performance Optimization
   =========================== */

/* Enable GPU acceleration for transforms */

/* Prevent layout shifts */

/* Optimize paint performance */

/* Video pop-out Suspense loading shell */
.video-popout-loading {
  background: #000;
  height: 100vh;
  width: 100%;
}
/**
 * Permission Toast Styling
 *
 * Custom styles for permission-denied toast notifications
 * Matches Bootstrap 5 theme and maintains WCAG 2.1 AA compliance
 */

/* Toast container customization */
.permission-toast-container {
  background: #fff;
  border-left: 4px solid #dc3545;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  min-width: 320px;
  max-width: 500px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .permission-toast-container {
    background: #2d2d2d;
    color: #f8f9fa;
    border-left-color: #ff6b6b;
  }
}

/* Toast content layout */
.permission-toast {
  padding: 4px 0;
}

.permission-toast__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #dc3545;
}

@media (prefers-color-scheme: dark) {
  .permission-toast__header {
    color: #ff6b6b;
  }
}

.permission-toast__icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.permission-toast__body {
  font-size: 14px;
  line-height: 1.5;
  color: #495057;
}

@media (prefers-color-scheme: dark) {
  .permission-toast__body {
    color: #ced4da;
  }
}

/* Override react-toastify defaults for better Bootstrap integration */

/* Accessibility improvements */

/* Focus visible for keyboard navigation */

/* Responsive adjustments */
@media (max-width: 576px) {

  .permission-toast-container {
    min-width: 0;
    margin: 0;
  }

  .permission-toast__header {
    font-size: 14px;
  }

  .permission-toast__body {
    font-size: 13px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .permission-toast-container {
    border-width: 3px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .permission-toast__header {
    font-weight: 700;
  }
}

/* Reduced motion support */
/**
 * Theme Transition Animations
 *
 * Provides smooth transitions when switching themes (light, dark, high-contrast).
 * Respects user's reduced motion preference.
 */

:root {
  --transition-speed: 0.3s;
  --transition-timing: ease;
}

/* Apply transitions to all theme-sensitive properties */
body,
.card,
.enhanced-card,
.btn,
.navbar,
.modal-content,
.form-control,
.table,
.alert,
.badge,
.list-group-item,
.dropdown-menu {
  transition:
    background-color var(--transition-speed) var(--transition-timing),
    color var(--transition-speed) var(--transition-timing),
    border-color var(--transition-speed) var(--transition-timing),
    box-shadow var(--transition-speed) var(--transition-timing);
}

/* Transition for links */
a {
  transition: color var(--transition-speed) var(--transition-timing);
}

/* Transition for hover states */
.btn:hover,
.card:hover,
.list-group-item:hover {
  transition-duration: 0.15s;
}

/* Respect reduced motion preference - disable all animations */
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  --transition-speed: 0s !important;
  animation: none !important;
  transition: none !important;
}

/* Also respect system prefers-reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    --transition-speed: 0s !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Smooth fade-in for modals and overlays */
.modal.fade .modal-dialog {
  transition: transform var(--transition-speed) var(--transition-timing);
}

/* Smooth transitions for toast notifications */

/* Smooth transitions for dropdown menus */
.dropdown-menu {
  transition:
    opacity 0.2s var(--transition-timing),
    transform 0.2s var(--transition-timing);
}

/* Smooth transitions for tab content */
.tab-content > .tab-pane {
  transition: opacity var(--transition-speed) var(--transition-timing);
}

/* Smooth color transitions for status indicators */
.status-badge {
  transition:
    background-color var(--transition-speed) var(--transition-timing),
    color var(--transition-speed) var(--transition-timing),
    transform 0.15s var(--transition-timing);
}

/* Smooth transitions for form focus states */
.form-control:focus,
.form-select:focus {
  transition:
    border-color 0.15s var(--transition-timing),
    box-shadow 0.15s var(--transition-timing);
}
.lock-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lock-screen-container {
  width: 100%;
  max-width: 450px;
  padding: 20px;
}

.lock-screen-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.lock-screen-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: #f0f0f0;
  border: 4px solid #667eea;
}

.lock-screen-logo {
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}

.lock-screen-username {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.lock-icon-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.lock-screen-hint {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.lock-screen-password-wrapper {
  position: relative;
}

.lock-screen-password-input {
  padding-right: 2.75rem;
}

.lock-screen-password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #6b7280;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  cursor: pointer;
}

.lock-screen-password-toggle:hover:not(:disabled) {
  color: #0d6efd;
}

.lock-screen-password-toggle:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.lock-screen-password-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lock-screen-hint kbd {
  padding: 2px 6px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}
/* ===================================
   LEGACY VARIABLE ALIASES
   Values flow from medical-theme.scss → component-tokens.scss.
   These aliases keep existing var(--primary-brand) etc. references working.
   =================================== */
:root {
  /* Brand Colors — aliased to theme */
  --primary-brand: var(--color-primary);
  --secondary-brand: var(--color-info);
  --accent-urgent: var(--color-danger);
  --accent-warning: var(--color-warning);
  --accent-success: var(--color-success);

  /* Neutrals — aliased to theme */
  --background-main: var(--color-surface);
  --background-card: var(--color-card-bg);
  --background-hover: var(--color-gray-200);

  /* Text — aliased to theme */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-disabled: var(--color-text-disabled);

  /* Borders — aliased to theme */
  --border-subtle: var(--color-border);
  --border-strong: var(--color-gray-500);

  /* EEG-Specific (no theme equivalents yet) */
  --eeg-channel-1: #1f77b4;
  --eeg-channel-2: #ff7f0e;
  --eeg-channel-3: #2ca02c;
  --eeg-background: var(--color-waveform-bg);
  --eeg-grid: var(--color-grid-line);

  /* Layout dimensions */
  --footer-height: 36px;
  --trial-banner-height: 0px;
}

/* Card appearance is now controlled by component-tokens.scss
   and applied by the shared components (AdminTableCard, TabCard, etc.) */

/* Login/auth page primary action button */
.btn-login {
  font-size: 1rem;
  font-weight: 600;
}

.text-muted {
  font-size: 0.78rem;
}

.alert {
  margin-bottom: 1rem;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 1rem;
}

a {
  color: var(--primary-brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: var(--secondary-brand);
}

/* Header styles */

/* Navbar styles - CONSOLIDATED */
.nav-item {
  margin-bottom: 0rem;
}

.nav-link {
  padding: 0rem 0.5rem; /* Reduced by 50% */
  transition: background-color 0.3s ease;
  font-size: 0.8rem; /* Merged from duplicate definition */
}

.nav-link:hover {
  background-color: var(--primary-brand) !important;
  color: white !important;
  transition: all 0.3s ease;
}

/* Additional styles for hover effect */

/* Navigation group headers */
.nav-group-header {
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0rem 0rem 0rem; /* Already at 0, no change needed */
  margin-top: 0rem; /* Already at 0, no change needed */
  margin-bottom: 0.25rem; /* Reduced by 50% from default Bootstrap spacing */
  border-bottom: 1px solid var(--border-subtle);
}

/* Override Bootstrap utility classes for navbar spacing - reduce by 50% */

.navbar-toggler {
  transition: all 0.3s ease;
}

.navbar-toggler:hover {
  background-color: #6c757d;
}

.navbar-nav .nav-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Custom collapse button styles */

/* Footer styles moved to footer.css for better organization */

/* ============================================
   HEADER STYLES MOVED TO header.css
   All .custom-header and .patient-context-bar
   styles are now in header.css for better
   organization and to avoid conflicts.
   ============================================ */

/* Button styles */
.btn-info {
  margin-right: 1rem;
  background-color: var(--primary-brand);
  border-color: var(--primary-brand);
}

.btn-info:hover {
  background-color: var(--secondary-brand);
  border-color: var(--secondary-brand);
}

.btn-primary {
  background-color: var(--primary-brand);
  border-color: var(--primary-brand);
}

.btn-primary:hover {
  background-color: var(--secondary-brand);
  border-color: var(--secondary-brand);
}

.btn-success {
  background-color: var(--accent-success);
  border-color: var(--accent-success);
}

.btn-danger {
  background-color: var(--accent-urgent);
  border-color: var(--accent-urgent);
}

.btn-warning {
  background-color: var(--accent-warning);
  border-color: var(--accent-warning);
  color: var(--text-primary);
}

/* Dropdown button styles */
.dropdown-button {
  height: 32px; /* Match the height of the About button */
  line-height: 1.0; /* Adjust line height for vertical alignment */
  font-size: 0.875rem; /* Adjust font size to match the About button */
  padding: 0.25rem 0.5rem; /* Reduce padding to match the About button */
  margin: 0; /* Remove margin */
  display: flex;
  align-items: center; /* Center align text vertically */
  color: white; /* White text color */
  background: none !important; /* Remove default background */
  border: none !important; /* Remove default border */
  box-shadow: none !important; /* Remove shadow from dropdown menu */
}

.dropdown-button:hover {
  border: none !important; /* Remove default border on hover */
}

/* Add media queries for better responsiveness */
@media (min-width: 1200px) {
  /* Removed global card max-width to allow dashboard cards to use full column width */
}

@media (max-width: 576px) {
  .login-container {
    padding: 1rem; /* Reduce padding on small screens */
  }

  /* Card responsive overrides removed — owned by shared components */
}

/* Compact breadcrumb — reduced height globally */
.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-padding-x: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

.app-breadcrumb {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

.app-breadcrumb .breadcrumb-item {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.app-breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 0.35rem;
}

.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, ">");
  padding-right: 0.35rem;
}

/* Main content area — page title sizing and spacing */
#main-content h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

#main-content > .container {
  margin-top: 0.5rem !important;
}

/* General styles */
body {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.navbar-brand {
  font-size: 1.0rem;
  font-weight: bold;
}

/* REMOVED DUPLICATE .nav-link - merged above at line 114 */

/* Custom navbar styles */

/* Custom styles for reducing row height and font size */
.table-custom {
  font-size: 80%; /* Reduce font size by 20% */
}

.table-custom tr {
  height: 80%; /* Reduce row height by 20% */
}

.table-custom td {
  padding: 0.4rem; /* Adjust padding to reduce row height */
}

/* Custom styles for reducing padding within cards by 50% */
.card-custom-padding .card-body {
  padding: 0.5rem; /* Adjust padding to reduce by 50% */
}

/* Custom styles for reducing space between the header and the top cards by 50% */
.container-reduced-margin {
  margin-top: 0rem; /* Adjust margin to reduce by 50% */
}
/* ===================================
   HELP PAGE STYLES
   =================================== */
/* ===========================================
   Dashboard — Responsive Command Center
   Compact by default, scales up on larger screens.
   Critical info (KPIs, alerts) always above the fold.
   =========================================== */

/* Dashboard uses natural flow — scrolls when content exceeds viewport */
.dashboard-command-center {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
  gap: 0.25rem;
  --dashboard-primary-list-card-min-height: 30rem;
}

.dashboard-command-row {
  margin-top: 0.2rem;
}

.command-center-item {
  text-decoration: none;
  color: inherit;
  display: block;
}

.command-center-card {
  border-width: 1px;
}

.command-center-item:hover .command-center-card {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.command-center-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
}

.command-center-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.command-center-icon {
  font-size: 1.2rem;
}

/* Make cards more compact */
.card-custom-padding .card-body {
  padding: 0.5rem 0.75rem !important;
}

.card-custom-padding .card-title {
  font-size: 1rem !important;
  margin-bottom: 0.35rem !important;
}

/* Container spacing */
.container-reduced-margin {
  padding-top: 0.25rem !important;
  padding-bottom: 0 !important;
}

/* ---- Clickable KPI Cards ---- */

/* Compact KPI card inner spacing */

/* ---- Quick Actions Grid ---- */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.quick-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.25rem;
  border-radius: var(--card-border-radius, 8px);
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border-color, #dee2e6);
  text-decoration: none;
  color: var(--text-primary, var(--bs-body-color));
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  min-height: 60px;
  cursor: pointer;
}

.quick-action-tile:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--text-primary, var(--bs-body-color));
}

.quick-action-tile:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.quick-action-tile .tile-icon {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.quick-action-tile .tile-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.discover-modules-card .card-title {
  font-size: 0.95rem !important;
  font-weight: 700;
}

.dashboard-quick-actions-card {
  height: 100%;
}

.dashboard-role-badge {
  font-size: 0.65rem;
}

.dashboard-activity-title {
  color: var(--text-primary, inherit);
}

.dashboard-activity-link {
  font-size: 0.7rem;
}

.dashboard-activity-value {
  font-size: 1rem;
}

.dashboard-activity-label {
  font-size: 0.65rem;
}

.discover-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.discover-module-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--card-border-color, #dee2e6);
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--text-primary, var(--bs-body-color));
}

.discover-module-item i {
  color: var(--bs-primary, #0d6efd);
}

.discover-module-item:hover {
  background: var(--bs-light, #f8f9fa);
  text-decoration: none;
  color: var(--text-primary, var(--bs-body-color));
}

.discover-module-placeholder-icon {
  width: 20px;
  height: 20px;
}

.discover-module-placeholder-label {
  width: 60%;
}

/* ---- Compact Study & Report Lists ---- */

/* ---- Study Status Borders ---- */
.study-item {
  border-left: 3px solid transparent;
  padding-left: 0.5rem;
  transition: background-color 0.15s ease;
}

.study-item:hover {
  background-color: var(--bs-light, #f8f9fa);
}

/* ---- Content & secondary rows ---- */
.dashboard-content-row {
  flex: 0 0 auto;
}

.dashboard-secondary-row {
  flex: 0 0 auto;
}

/* ---- Card hover polish ---- */
.dashboard-content-row .card,
.dashboard-secondary-row .card {
  transition: box-shadow 0.2s ease;
}

.dashboard-content-row .card:hover,
.dashboard-secondary-row .card:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* ---- Dark Mode ---- */
[data-theme="dark"] .quick-action-tile {
  background: var(--card-bg);
  border-color: var(--card-border-color);
}

[data-theme="dark"] .quick-action-tile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .study-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .dashboard-content-row .card:hover,
[data-theme="dark"] .dashboard-secondary-row .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Chart text adapts to dark theme */

/* ---- High Contrast ---- */
[data-theme="high-contrast"] .quick-action-tile {
  border-width: 2px;
}

[data-theme="high-contrast"] .study-item {
  border-left-width: 4px;
}

/* ---- Responsive: Scale UP on large screens (24"+) ---- */
@media (min-height: 900px) {
  /* More spacious KPI cards */

  /* Taller quick action tiles */
  .quick-action-tile {
    min-height: 75px;
    padding: 0.75rem 0.5rem;
  }

  .quick-action-tile .tile-icon {
    font-size: 1.5rem;
  }

  .quick-action-tile .tile-label {
    font-size: 0.8rem;
  }

  /* More card padding */
  .card-custom-padding .card-body {
    padding: 0.75rem 1rem !important;
  }
}

/* ---- Responsive: 2-column quick actions on small screens ---- */
@media (max-width: 576px) {
  .dashboard-command-center {
    --dashboard-primary-list-card-min-height: 22rem;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Scroll container (legacy, kept for widget internals) ---- */
/* Critical Alerts Styling */
.critical-alerts-container {
  margin-top: 0 !important;
  margin-bottom: 0rem;
  padding-top: 0 !important;
  margin-left: 0rem;
}

.critical-alerts-container .alert:first-child {
  margin-top: 0 !important;
}

/* Compact "no alerts" success banner — 50% reduced vertical padding */
.critical-alerts-container .alert-success {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.critical-alert {
  margin-bottom: 0.75rem;
  margin-top: 0 !important;
  border-left: 4px solid;
  padding: 0.15rem 0.2rem;
  transition: all 0.2s ease;
}

.critical-alert:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.alert-header {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
}

.alert-icon {
  font-size: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.alert-text {
  flex: 1;
  min-width: 0;
}

.alert-patient-info {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.05rem;
}

.alert-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .alert-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .alert-meta {
    margin-left: 2rem;
  }
}
.error-display-icon-sm {
  font-size: 1rem;
  margin-top: 0.125rem;
}

.error-display-icon-md {
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.error-display-icon-lg {
  font-size: 1.5rem;
  margin-top: 0.125rem;
}
/* Recent Studies Styling */
.recent-studies-card {
  height: 100%;
  min-height: var(--dashboard-primary-list-card-min-height, 33rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.studies-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.study-item {
  padding: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.375rem;
  background-color: var(--background-card);
  transition: all 0.2s ease;
}

.study-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-brand);
  transform: translateY(-2px);
}

.study-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.study-patient {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.study-patient strong {
  font-size: 1rem;
  color: var(--text-primary);
}

.study-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.study-type-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.study-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.study-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.study-status {
  display: flex;
  align-items: center;
}

.study-actions {
  display: flex;
  gap: 0.5rem;
}

.study-actions .btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Scrollbar styling */
.studies-list::-webkit-scrollbar {
  width: 6px;
}

.studies-list::-webkit-scrollbar-track {
  background: var(--background-main);
  border-radius: 3px;
}

.studies-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.studies-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .study-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .study-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .study-actions {
    width: 100%;
  }

  .study-actions .btn {
    flex: 1;
  }
}
.pending-reports-card {
  height: 100%;
  min-height: var(--dashboard-primary-list-card-min-height, 33rem);
  display: flex;
  flex-direction: column;
}

.pending-reports-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pending-reports-item {
  font-size: 0.9rem;
}
.welcome-header {
  padding: 0.25rem 0;
}

.welcome-header-title {
  font-weight: 600;
  color: var(--text-primary, var(--bs-body-color));
  font-size: 1.1rem;
}

.welcome-header-date {
  color: var(--text-secondary, var(--bs-secondary-color));
  font-size: 0.8rem;
}

.welcome-header-updated {
  color: var(--text-secondary, var(--bs-secondary-color));
  font-size: 0.7rem;
  opacity: 0.7;
}

.welcome-header-role {
  font-size: 0.75rem;
  padding: 0.3em 0.6em;
}
.study-workload-card {
  height: 100%;
}

.study-workload-title {
  font-size: 0.85rem;
}

.study-workload-chart {
  width: 100%;
  min-width: 0;
  min-height: 220px;
}

.study-workload-chart-placeholder {
  width: 100%;
  min-height: 220px;
}

:root {
  --study-workload-tooltip-font-size: 0.75rem;
  --study-workload-tooltip-padding: 4px 8px;
  --study-workload-tooltip-radius: 4px;
}
/* GDPR Consent Modal Styles */

/* Prevent page scrolling when modal is open */
html {
  overflow: hidden !important;
}

body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed !important;
  width: 100% !important;
}

.modal.show {
  overflow-y: hidden !important;
}

.modal-backdrop {
  position: fixed !important;
}

/* Modal sizing and layout */
.consent-modal-compact .modal-dialog {
  max-width: 480px !important;
  max-height: 80vh !important;
  margin: 10vh auto !important;
}

.consent-modal-compact .modal-content {
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.consent-modal-compact .modal-header {
  flex-shrink: 0 !important;
}

.consent-modal-compact .modal-footer {
  flex-shrink: 0 !important;
}

.consent-modal-compact .modal-body {
  max-height: calc(80vh - 140px) !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* Fix checkbox sizes in consent modal */
.consent-modal-compact input[type="checkbox"],
.consent-checkbox {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  margin-right: 10px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}
/* Password Change Modal Styles */

.password-change-modal-dialog {
  max-width: min(440px, calc(100vw - 0.75rem)) !important;
  margin: 0.5rem auto;
}

.password-change-modal .modal-content {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
}

.password-change-modal .modal-header {
  border-bottom: 2px solid #e9ecef;
  padding: 0.8rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 6px 6px 0 0;
}

.password-change-modal .modal-title {
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vh, 1.1rem);
  margin: 0;
}

.password-change-modal .modal-body {
  padding: 0.75rem 0.85rem;
}

.password-change-modal .modal-footer {
  border-top: 2px solid #e9ecef;
  padding: 0.65rem 0.85rem;
}

/* Password Input Wrapper */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .form-control {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.35rem;
  border: none;
  background: transparent;
  color: #6c757d;
  z-index: 10;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: #495057;
  background: transparent;
}

.password-toggle:focus {
  box-shadow: none;
  color: #495057;
}

/* Password Strength Indicator */
.password-strength-indicator {
  margin-top: 0.35rem;
}

.password-strength-bar {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.password-strength-bar .progress-bar {
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Password Requirements */
.password-requirements {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0.5rem 0.55rem;
  margin-top: 0.45rem;
}

.password-requirements h6 {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.requirement-item {
  display: flex;
  align-items: center;
  padding: 0.1rem 0;
  font-size: 0.78rem;
  transition: all 0.2s ease;
}

.requirement-item i {
  font-size: 1rem;
  flex-shrink: 0;
}

.requirement-item .text-success {
  font-weight: 500;
}

/* Alert Styles */
.password-change-modal .alert {
  border-radius: 4px;
  margin-bottom: 0.55rem;
  font-size: 0.8rem;
  padding: 0.45rem 0.55rem;
}

.password-change-modal .alert-info {
  background-color: #e7f3ff;
  border-color: #b3d9ff;
  color: #004085;
}

.password-change-modal .alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.password-change-modal .alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* Form Controls */
.password-change-modal .form-label {
  font-weight: 600;
  color: #495057;
  margin-bottom: clamp(0.15rem, 0.3vh, 0.3rem);
  font-size: clamp(0.75rem, 1.3vh, 0.875rem);
}

.password-change-modal .form-control {
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  padding: clamp(0.24rem, 0.6vh, 0.42rem) 0.65rem;
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
  min-height: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #f8fafc;
}

.password-change-modal .form-control:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.12);
  background-color: white;
}

.password-change-modal .form-control.is-invalid {
  border-color: #dc3545;
}

.password-change-modal .form-control.is-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* Submit Button */
.password-change-modal .btn-primary {
  background: linear-gradient(135deg, #091b36, #0c2d5e);
  border: none;
  border-radius: 4px;
  padding: clamp(0.34rem, 0.75vh, 0.5rem) 1.2rem;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
  min-height: 0;
  transition: box-shadow 0.2s ease, background 0.2s ease;
  letter-spacing: 0.3px;
}

/* Reduce utility-driven vertical gaps inside this modal only */
.password-change-modal .mb-3 {
  margin-bottom: 0.6rem !important;
}

.password-change-modal .mb-2 {
  margin-bottom: 0.4rem !important;
}


.password-change-modal .btn-primary:hover:not(:disabled) {
  transform: none;
  box-shadow: 0 4px 16px rgba(9, 27, 54, 0.45);
  background: linear-gradient(135deg, #0c2d5e, #0f3a7a);
}

.password-change-modal .btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.password-change-modal .btn-primary:disabled {
  background: #6c757d;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Loading Spinner */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15rem;
}

/* Accessibility - Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .password-change-modal-dialog {
    max-width: calc(100vw - 0.75rem) !important;
  }

  .password-change-modal .modal-body {
    padding: 0.75rem;
  }

  .password-change-modal .modal-header,
  .password-change-modal .modal-footer {
    padding: 0.7rem 0.75rem;
  }

  .password-requirements {
    padding: 0.75rem;
  }

  .requirement-item {
    font-size: 0.8125rem;
  }
}

/* Dark Theme Support (if implemented) */
@media (prefers-color-scheme: dark) {
  .password-change-modal .modal-content {
    background-color: #1a1d23;
    color: #e9ecef;
  }

  .password-change-modal .form-control {
    background-color: #2d3238;
    border-color: #495057;
    color: #e9ecef;
  }

  .password-change-modal .form-control:focus {
    background-color: #2d3238;
    border-color: #667eea;
    color: #e9ecef;
  }

  .password-requirements {
    background-color: #2d3238;
    border-color: #495057;
  }

  .password-requirements h6 {
    color: #e9ecef;
  }

  .requirement-item .text-muted {
    color: #adb5bd !important;
  }
}

/* Animation for strength indicator */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.password-strength-indicator {
  animation: slideIn 0.3s ease;
}

/* Focus visible for keyboard navigation */
.password-change-modal *:focus-visible {
  outline: 3px solid #667eea;
  outline-offset: 2px;
}
.enterprise-demo-modal__success-icon {
  font-size: 3rem;
}
/**
 * Login Page Styling — Enterprise Medical-Grade Design
 * BioMC Clinical Platform — EEG Analysis & Hospital Workflow
 *
 * Visual tone: GE Healthcare / Philips IntelliSpace / Enterprise AI
 * NOT: Notion / Linear / consumer SaaS
 */

:root {
  --login-primary: #091b36;
  --login-secondary: #0c2d5e;
  --login-accent: #2196f3;
  --login-accent-muted: #1976d2;
  --login-success: #059669;
  --login-danger: #dc2626;
  --login-surface: #f8fafc;
  --login-border: #cbd5e1;
  --login-text: #1e293b;
  --login-text-light: #64748b;
  --login-trust-green: #4ade80;
}

html,
body {
  height: 100%;
  margin: 0;
}

/* ================================================================
   MAIN CONTAINER — full viewport, deep navy background
   ================================================================ */
.login-container {
  background: linear-gradient(160deg, #061224 0%, #091b36 35%, #0c2d5e 70%, #0f3a7a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-bottom: 60px;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Subtle geometric overlay — not soft radial blobs */
.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 40%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, transparent 30%);
  pointer-events: none;
}

/* ================================================================
   SPLIT LAYOUT — trust panel (left) + form panel (right)
   ================================================================ */
.login-split-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  animation: fadeIn 0.4s ease-out;
}

/* ---- LEFT: Trust Panel ---- */
.login-trust-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0rem 0rem;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.trust-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.trust-logo-container {
  display: inline-flex;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.trust-logo-icon {
  font-size: 1.3rem;
  color: var(--login-trust-green);
}

.trust-brand-name {
  color: white;
  font-weight: 900;
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.15;
  text-transform: none;
}

.trust-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-bottom: 2rem;
  line-height: 1.4;
}

/* Trust bullets */
.trust-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.trust-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
  line-height: 1.4;
}

.trust-bullets li i {
  color: var(--login-trust-green);
  font-size: 0.9rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.trust-tagline {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* EEG waveform background overlay — animated slow scroll */
.login-trust-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -800px;
  right: 0;
  width: calc(100% + 1600px);
  height: 45%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120' fill='none'%3E%3Cpath d='M0 60 Q20 60 40 55 T80 50 T120 58 T160 62 T200 45 T220 30 T230 20 T240 35 T260 70 T280 85 T300 75 T320 60 T360 55 T400 58 T440 50 T480 55 T500 40 T510 25 T520 15 T530 30 T550 65 T570 80 T590 70 T620 58 T660 55 T700 60 T740 52 T780 58 T800 55' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0 80 Q30 78 60 82 T120 75 T180 80 T220 72 T260 85 T300 90 T320 80 T340 65 T350 55 T360 45 T370 60 T390 85 T420 95 T450 85 T480 78 T520 82 T560 76 T600 80 T640 72 T680 78 T720 82 T760 76 T800 80' stroke='%23ffffff' stroke-width='1' fill='none'/%3E%3Cpath d='M0 100 Q40 98 80 102 T160 96 T240 100 T320 104 T360 95 T380 88 T390 82 T400 90 T420 105 T460 108 T500 100 T540 97 T580 102 T620 98 T660 100 T700 104 T740 98 T800 100' stroke='%23ffffff' stroke-width='0.75' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 800px 120px;
  opacity: 0.05;
  pointer-events: none;
  animation: eegScroll 25s linear infinite;
}

/* ---- RIGHT: Form Panel ---- */
.login-form-panel {
  flex: 0 0 428px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0rem 0rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overflow-x: hidden;
  /* Thin scrollbar for WebKit / Blink */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.login-form-panel::-webkit-scrollbar {
  width: 4px;
}

.login-form-panel::-webkit-scrollbar-track {
  background: transparent;
}

.login-form-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
}

/* ================================================================
   LOGIN CARD — sharp, clinical
   ================================================================ */
.login-card {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: white;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  animation: slideUp 0.35s ease-out;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--login-primary), var(--login-accent));
}

/* Welcome text */
.welcome-text {
  font-size: clamp(0.75rem, 1.4vh, 0.88rem);
  font-weight: 600;
  color: var(--login-text);
  margin-bottom: clamp(0.25rem, 0.6vh, 0.5rem) !important;
}

.login-title-strong {
  font-weight: 700;
  color: var(--login-text);
}

.login-link-button {
  background: none;
  border: none;
}

/* ================================================================
   FORM ELEMENTS — precise, structured
   ================================================================ */

/* Form labels */
.form-label-custom {
  font-weight: 600;
  color: var(--login-text);
  margin-bottom: clamp(0.15rem, 0.3vh, 0.3rem);
  display: flex;
  align-items: center;
  font-size: clamp(0.75rem, 1.3vh, 0.875rem);
}

.form-label-custom i {
  color: var(--login-accent-muted);
  font-size: clamp(0.8rem, 1.4vh, 1rem);
}

/* Form controls */
.form-control-custom {
  border: 1.5px solid var(--login-border);
  border-radius: 4px;
  padding: clamp(0.3rem, 0.7vh, 0.5rem) 0.75rem;
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--login-surface);
}

.form-control-custom:focus {
  border-color: var(--login-accent);
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.12);
  background-color: white;
}

.form-control-custom:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

.form-control-custom::-moz-placeholder {
  color: #94a3b8;
  font-style: normal;
}

.form-control-custom::placeholder {
  color: #94a3b8;
  font-style: normal;
}

/* Password input wrapper */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .form-control-custom {
  padding-right: 2.75rem;
}

.password-toggle-btn {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--login-text-light);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.35rem;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-btn:hover:not(:disabled) {
  color: var(--login-accent-muted);
}

.password-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---- Security Inline Message ---- */
.security-inline-message {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--login-text-light);
  margin-top: 0.3rem;
  margin-bottom: 0.35rem;
}

.security-inline-message i {
  color: var(--login-success);
  font-size: 0.75rem;
}

/* ================================================================
   LOGIN BUTTON — authoritative, no bounce
   ================================================================ */
.btn-login {
  background: linear-gradient(135deg, var(--login-primary), var(--login-secondary));
  border: none;
  border-radius: 4px;
  padding: clamp(0.4rem, 0.85vh, 0.6rem) 2rem;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
  transition: box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(9, 27, 54, 0.3);
  color: white;
  letter-spacing: 0.3px;
}

.btn-login:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(9, 27, 54, 0.45);
  background: linear-gradient(135deg, #0c2d5e, #0f3a7a);
}

.btn-login:active:not(:disabled) {
  box-shadow: 0 1px 4px rgba(9, 27, 54, 0.3);
}

.btn-login:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-login i {
  margin-right: 0.5rem;
}

/* Passkey button — match card proportions */
.passkey-login-container .btn {
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
  padding: clamp(0.35rem, 0.8vh, 0.6rem) 2rem;
  border-radius: 4px;
}

.passkey-login-container .btn i {
  font-size: clamp(0.8rem, 1.4vh, 0.95rem);
}

.passkey-login-container small {
  font-size: clamp(0.65rem, 1vh, 0.75rem);
}

.passkey-login-container .btn-link {
  font-size: clamp(0.7rem, 1.1vh, 0.82rem);
  padding: clamp(0.2rem, 0.4vh, 0.35rem) 0.5rem;
}

/* ================================================================
   ENTERPRISE SSO SECTION
   ================================================================ */
.enterprise-sso-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--login-border);
}

.sso-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--login-text-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.4rem;
  text-align: center;
}

.sso-buttons {
  display: flex;
  gap: 0.3rem;
}

.sso-btn {
  flex: 1;
  padding: 0.35rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 500;
  background: var(--login-surface);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.sso-btn:hover:not(:disabled) {
  border-color: var(--login-accent);
  background: #eff6ff;
}

.sso-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sso-btn i {
  font-size: 0.72rem;
}

.sso-note {
  display: block;
  text-align: center;
  color: #94a3b8;
  font-size: 0.62rem;
  margin-top: 0.3rem;
}

/* ================================================================
   ALERT STYLING
   ================================================================ */
.alert-custom {
  border: none;
  border-left: 3px solid var(--login-border);
  border-radius: 4px;
  background-color: #f8fafc;
  color: var(--login-text);
  padding: 0.6rem;
  animation: slideDown 0.25s ease-out;
  font-size: 0.8rem;
}

.alert-custom-danger {
  border-left-color: var(--login-danger);
  background-color: #fef2f2;
  color: var(--login-danger);
}

.alert-custom-warning {
  border-left-color: #d97706;
  background-color: #fffbeb;
  color: #92400e;
}

.alert-custom-info {
  border-left-color: var(--login-accent-muted);
  background-color: #eff6ff;
  color: #1e3a8a;
}

.alert-custom-danger i {
  color: var(--login-danger);
}

.alert-custom-warning i {
  color: #d97706;
}

.alert-custom-info i {
  color: var(--login-accent-muted);
}

/* ================================================================
   DIVIDER
   ================================================================ */
.divider-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  margin: clamp(0.2rem, 0.4vh, 0.4rem) 0;
}

.divider-with-text::before,
.divider-with-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--login-border);
}

.divider-with-text span {
  padding: 0 0.75rem;
  color: var(--login-text-light);
  font-size: clamp(0.65rem, 1vh, 0.75rem);
  font-weight: 500;
  background: white;
  position: relative;
  z-index: 1;
}

/* ================================================================
   FOOTER LINKS (in card)
   ================================================================ */
.login-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: clamp(0.25rem, 0.5vh, 0.5rem);
  border-top: 1px solid var(--login-border);
  margin-top: clamp(0.25rem, 0.5vh, 0.5rem);
}

.footer-link {
  color: var(--login-accent-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(0.72rem, 1.2vh, 0.85rem);
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.footer-link:hover {
  color: var(--login-primary);
  text-decoration: underline;
}

.footer-link i {
  font-size: 0.85rem;
  color: var(--login-accent);
}

/* ================================================================
   COMPLIANCE STRIP — single structured bar below login card
   ================================================================ */
.compliance-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  backdrop-filter: blur(4px);
  width: 100%;
  max-width: 448px;
}

.compliance-strip-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 0rem;
  padding: 0 0 0 .5rem;
  flex-shrink: 0;
}

.compliance-badge-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.compliance-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: default;
  position: relative;
  white-space: nowrap;
}

.compliance-badge-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.55rem;
  margin: 0 0.1rem;
}

.compliance-badge-item i {
  font-size: 0.68rem;
  color: var(--login-trust-green);
}

.compliance-badge-item.badge-pending i {
  color: #fbbf24;
}

/* Tooltip on hover */
.compliance-badge-item .badge-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #e2e8f0;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.compliance-badge-item .badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
}

.compliance-badge-item:hover .badge-tooltip,
.compliance-badge-item:focus .badge-tooltip {
  display: block;
}

/* ================================================================
   ENTERPRISE DEMO CTA
   ================================================================ */
.enterprise-demo-cta {
  text-align: center;
  margin-top: 0.75rem;
}

.demo-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s ease;
}

.demo-link:hover {
  color: rgba(255, 255, 255, 0.92);
}

/* ================================================================
   ANIMATIONS — purposeful, fast
   ================================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes eegScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(800px);
  }
}

/* ================================================================
   RESPONSIVE — tablet & mobile
   ================================================================ */

/* Tablet: stack layout but keep generous spacing */
@media (max-width: 991px) {
  .login-split-layout {
    flex-direction: column;
    align-items: center;
    max-width: 480px;
  }

  .login-trust-panel {
    padding: 1.5rem 1rem 0.75rem;
    text-align: center;
    align-items: center;
  }

  .trust-brand {
    justify-content: center;
  }

  .trust-subtitle {
    margin-bottom: 1rem;
  }

  .trust-bullets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
    margin-bottom: 1rem;
    text-align: left;
  }

  .trust-tagline {
    display: none;
  }

  .login-trust-panel::after {
    display: none;
  }

  .login-form-panel {
    flex: none;
    width: 100%;
    padding: 0.5rem 1rem 1rem;
    max-height: calc(100vh - 160px);
  }

  .login-card {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .login-container {
    padding: 0.8rem;
    padding-bottom: 64px;
  }

  .login-split-layout {
    max-width: 100%;
  }

  .login-trust-panel {
    padding: 1rem 0.5rem 0.5rem;
  }

  .trust-brand-name {
    font-size: 1.1rem;
  }

  .trust-subtitle {
    font-size: 0.72rem;
  }

  .trust-bullets {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .trust-bullets li {
    font-size: 0.72rem;
  }

  .login-form-panel {
    padding: 0 0.5rem 0.5rem;
  }

  .form-label-custom {
    font-size: 0.72rem;
  }

  .form-control-custom {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
  }

  .btn-login {
    padding: 0.35rem 1.5rem;
    font-size: 0.72rem;
  }

  .passkey-login-container .btn {
    font-size: 0.72rem;
    padding: 0.35rem 1.5rem;
  }

  .passkey-login-container small {
    font-size: 0.6rem;
  }

  .sso-buttons {
    flex-direction: column;
  }

  .sso-btn {
    padding: 0.45rem 0.5rem;
    min-height: 44px;
  }

  .compliance-strip {
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem;
    gap: 0.15rem;
  }

  .compliance-strip-label {
    display: none;
  }

  .compliance-badge-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  .compliance-badge-item {
    font-size: 0.58rem;
    padding: 0.1rem 0.3rem;
  }

  .login-footer-links {
    flex-direction: column;
    gap: 0.6rem;
  }

  .footer-link {
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .trust-brand-name {
    font-size: 0.95rem;
  }

  .divider-with-text span {
    padding: 0 0.5rem;
    font-size: 0.7rem;
  }

  .footer-link {
    font-size: 0.75rem;
  }
}

/* ================================================================
   DARK MODE — data-theme based (app theme system)
   ================================================================ */
@media (prefers-color-scheme: dark) {
  .login-card {
    background-color: #1a1f2e;
    color: #e2e8f0;
    border-color: #334155;
  }

  .form-control-custom {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
  }

  .form-control-custom:focus {
    background-color: #1e293b;
    border-color: var(--login-accent);
  }

  .form-control-custom::-moz-placeholder {
    color: #64748b;
  }

  .form-control-custom::placeholder {
    color: #64748b;
  }

  .form-label-custom {
    color: #e2e8f0;
  }

  .welcome-text {
    color: #94a3b8;
  }

  .security-inline-message {
    color: #94a3b8;
  }

  .divider-with-text span {
    background-color: #1a1f2e;
    color: #94a3b8;
  }

  .divider-with-text::before,
  .divider-with-text::after {
    border-color: #475569;
  }

  .sso-btn {
    background: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
  }

  .sso-btn:hover:not(:disabled) {
    border-color: var(--login-accent);
    background: #1e3a5f;
  }

  .login-footer-links {
    border-top-color: #475569;
  }
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */
.login-card:focus-within {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.2),
    0 0 0 2px var(--login-accent);
}

.compliance-badge-item:focus {
  outline: 2px solid var(--login-accent);
  outline-offset: 2px;
}

.sso-btn:focus-visible {
  outline: 2px solid var(--login-accent);
  outline-offset: 2px;
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .login-container {
    background: white;
  }

  .login-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .login-trust-panel {
    color: black;
  }

  .btn-login {
    border: 1px solid #000;
    background: white;
    color: black;
  }

  .compliance-strip,
  .enterprise-demo-cta {
    display: none;
  }
}

/* ================================================================
   LEGACY — kept for backward compat if referenced elsewhere
   ================================================================ */
.login-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-header {
  animation: slideDown 0.35s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.15rem, 0.3vh, 0.3rem);
  margin-bottom: clamp(0.3rem, 0.6vh, 0.6rem);
}

.logo-and-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.logo-container {
  display: inline-flex;
  width: clamp(36px, 5vh, 50px);
  height: clamp(36px, 5vh, 50px);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.logo-icon {
  font-size: clamp(1.1rem, 2vh, 1.6rem);
  color: white;
}

.login-title {
  color: white;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.5vh, 1.5rem);
  margin-bottom: 0;
  letter-spacing: -0.75px;
  white-space: nowrap;
}

.login-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(0.7rem, 1.3vh, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-bottom: 0;
}

.login-disclaimer {
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(0.65rem, 1.1vh, 0.75rem);
  font-weight: 400;
  line-height: 1.4;
}

/* Form check (Remember me) — legacy, currently disabled */
.accept-invitation__strength-bar {
  height: 5px;
}
/* Error Boundary Styling */
.error-boundary-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--background-main);
}

.error-boundary-card {
  max-width: 700px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.error-icon-container {
  text-align: center;
  margin-bottom: 1.5rem;
}

.error-icon {
  font-size: 4rem;
  color: var(--accent-urgent);
  animation: error-pulse 2s ease-in-out infinite;
}

@keyframes error-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.error-title {
  text-align: center;
  color: var(--text-primary);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.error-alert {
  margin-bottom: 1.5rem;
}

.error-message {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.error-details {
  background-color: var(--background-main);
  border: 1px solid var(--border-subtle);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.error-details summary:hover {
  color: var(--text-primary);
}

.error-stack {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow-x: auto;
  max-height: 300px;
  padding: 0.75rem;
  background-color: var(--background-card);
  border-radius: 0.25rem;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.error-help-text {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .error-boundary-container {
    padding: 1rem 0.5rem;
  }

  .error-icon {
    font-size: 3rem;
  }

  .error-title {
    font-size: 1.5rem;
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    width: 100%;
  }

  .error-actions .me-2 {
    margin-right: 0 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .error-icon {
    animation: none;
  }
}

/* Print styles */
@media print {
  .error-boundary-container {
    min-height: auto;
  }

  .error-actions {
    display: none;
  }
}
.error-boundary-pre {
  font-size: 0.85rem;
}

.error-boundary-stack {
  font-size: 0.75rem;
  max-height: 200px;
  overflow: auto;
}
.browser-gate-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b1220, #1e293b);
  padding: 24px;
}

.browser-gate-shell-warning {
  background: linear-gradient(135deg, #111827, #1e3a8a);
}

.browser-gate-card {
  width: min(720px, 100%);
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #dbe4f4;
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.35);
  padding: 28px;
}

.browser-gate-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.browser-gate-brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #cbd5e1;
}

.browser-gate-brand-fallback {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid #cbd5e1;
}

.browser-gate-brand-text {
  display: flex;
  flex-direction: column;
}

.browser-gate-brand-kicker {
  margin: 0;
  text-transform: uppercase;
  color: #64748b;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.browser-gate-card h1 {
  margin: 0 0 12px;
  font-size: 26px;
  color: #0f172a;
}

.browser-gate-copy {
  margin: 0;
  color: #334155;
}

.browser-gate-cutoff {
  margin: 8px 0 0;
  color: #334155;
}

.browser-gate-meta {
  margin: 18px 0;
  padding: 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.browser-gate-meta dt {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.browser-gate-meta dd {
  margin: 0;
  font-size: 15px;
  color: #0f172a;
}

.browser-gate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.browser-gate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1d4ed8;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.browser-gate-link:hover {
  background: #1e40af;
}

.browser-gate-continue {
  margin-top: 14px;
  width: 100%;
  border: 1px solid #1e40af;
  background: #1d4ed8;
  color: #ffffff;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}

.browser-gate-continue:hover {
  background: #1e40af;
}

.browser-gate-ack {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #334155;
  font-size: 14px;
}

.browser-gate-override {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #94a3b8;
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}

.browser-gate-override:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.browser-gate-ttl {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 700px) {
  .browser-gate-meta {
    grid-template-columns: 1fr;
  }
}
/* Keyboard Shortcuts Styling */
.keyboard-shortcuts-panel {
  background: var(--background-card);
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.shortcut-category {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1rem;
}

.shortcut-category:last-of-type {
  border-bottom: none;
}

.category-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-brand);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 150px;
}

.keyboard-key {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--background-main);
  border: 1px solid var(--border-subtle);
  border-radius: 0.25rem;
  color: var(--text-primary);
  box-shadow: 0 2px 0 var(--border-subtle);
  min-width: 35px;
  text-align: center;
}

.key-separator {
  color: var(--text-secondary);
  font-weight: bold;
  margin: 0 0.125rem;
}

.shortcut-description {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-align: right;
}

.shortcuts-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* Skip to content link for accessibility */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-brand);
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 0.25rem 0;
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--accent-warning);
  outline-offset: 2px;
}

/* Focus visible styles for better keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--primary-brand);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .keyboard-key {
    border: 2px solid currentColor;
  }

  *:focus-visible {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .keyboard-shortcuts-panel {
    padding: 1rem;
  }

  .shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .shortcut-keys {
    min-width: auto;
  }

  .shortcut-description {
    text-align: left;
  }
}
/* Quick Search Styling */
.quick-search-container {
  width: 100%;
  max-width: 600px;
  background: var(--background-card);
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.search-input-wrapper {
  position: relative;
  padding: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.search-icon {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1rem;
  pointer-events: none;
}

.search-input {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  border: 1px solid var(--border-subtle);
  font-size: 1rem;
  height: 45px;
}

.search-input:focus {
  border-color: var(--primary-brand);
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.search-spinner {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-brand);
}

.search-hint,
.no-results {
  padding: 1rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.search-results {
  max-height: 400px;
  overflow-y: auto;
  border: none;
}

.search-result-item {
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
  background-color: var(--background-hover);
}

.search-result-item.active {
  border-left: 3px solid var(--primary-brand);
}

.result-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.result-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.result-text {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-footer {
  padding: 0.75rem 1.5rem;
  background-color: var(--background-main);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* Scrollbar styling */
.search-results::-webkit-scrollbar {
  width: 6px;
}

.search-results::-webkit-scrollbar-track {
  background: var(--background-main);
}

.search-results::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Modal overlay when search is open */
.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 1050;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .quick-search-container {
    max-width: 100%;
    margin: 0 1rem;
  }

  .result-title,
  .result-subtitle {
    font-size: 0.85rem;
  }
}
/* Mini Navbar Styles - Collapsible icon-only sidebar for EEG viewer */

.mini-navbar {
  position: fixed;
  left: 0;
  top: calc(var(--header-height, 48px) + var(--trial-banner-height, 0px)); /* Below sticky header + trial banner */
  bottom: var(--footer-height, 26px); /* Stop above the fixed MinimalFooter */
  background: #1a1a1a;
  border-right: 1px solid #333;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  z-index: 1019; /* Below footer (1020) so footer renders in front */
  overflow: hidden;
}

/* EEG viewer uses no fixed footer; extend sidebar to the bottom edge. */
body.eeg-viewer-active .mini-navbar,
html.eeg-viewer-active .mini-navbar {
  bottom: 0;
}

.mini-navbar.collapsed {
  width: 50px;
}

.mini-navbar.expanded {
  width: 196px;
}

/* Toggle Button */
.mini-navbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  flex-shrink: 0;
  background: #2a2a2a;
  border: none;
  border-bottom: 1px solid #333;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
  width: 100%;
}

.mini-navbar-toggle:hover {
  background: #333;
}

.mini-navbar-toggle i {
  transition: transform 0.2s;
}

/* Navigation Items */
.mini-navbar-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}

.mini-nav-item {
  display: flex;
  align-items: center;
  padding: 7.5px 15px;
  color: #aaa;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
}

.mini-nav-group {
  border-top: 1px solid #2d2d2d;
  margin-top: 4px;
  padding-top: 4px;
}

.mini-nav-group-toggle {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.mini-nav-group-items .mini-nav-item {
  padding-left: 28px;
}

.mini-group-chevron {
  font-size: 0.75rem;
  opacity: 0.8;
}

.mini-navbar.collapsed .mini-nav-item {
  justify-content: center;
  padding: 7.5px 0;
}

.mini-nav-item:hover {
  background: #2a2a2a;
  color: #fff;
}

.mini-nav-item.active {
  background: #4a90e2;
  color: #fff;
}

.mini-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
}

.mini-nav-item i {
  font-size: 1.1rem;
  min-width: 20px;
  text-align: center;
}

.mini-nav-label {
  margin-left: 12px;
  font-size: 0.9rem;
  opacity: 1;
  transition: opacity 0.2s;
}

.mini-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mini-nav-badge-collapsed {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 0.6rem;
}

.mini-navbar.collapsed .mini-nav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Footer Section */
.mini-navbar-footer {
  padding: 0;
  flex-shrink: 0;
}

/* Logout button styling */
.mini-nav-logout {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.mini-nav-logout:hover {
  background: #8b0000 !important;
  color: #fff !important;
}

/* Scrollbar - hidden by default, fallback for very small screens */
.mini-navbar-nav::-webkit-scrollbar {
  width: 0;
}

/* Tooltip on hover for collapsed state */
.mini-navbar.collapsed .mini-nav-item {
  position: relative;
}

/* Responsive - hide on very small screens */
@media (max-width: 768px) {
  .mini-navbar.collapsed {
    width: 0;
    border: none;
  }
  
  .mini-navbar.expanded {
    width: 120px;
  }

  .mini-nav-item {
    padding: 7px 10px;
  }

  .mini-nav-group-items .mini-nav-item {
    padding-left: 18px;
  }

  .mini-nav-label {
    margin-left: 8px;
    font-size: 0.82rem;
  }
}
.contact-support-subtitle {
  font-size: 0.85rem;
}

.contact-support-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.system-health-menu {
  min-width: 280px;
}
.global-search-input {
  min-width: 250px;
}

.global-search-results {
  max-height: 400px;
  overflow-y: auto;
  z-index: 1050;
}
.session-timer-value {
  font-size: 1.1rem;
  line-height: 1;
}

.session-timer-message {
  font-size: 0.7rem;
  line-height: 1;
  margin-top: 2px;
}

.session-timer-extend {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.session-timer-modal-icon {
  font-size: 3rem;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}
/* Professional Header Styles */

.custom-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 0.375rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--header-height, 48px);
  transition: all 0.2s ease-in-out;
}

/* Override Bootstrap Grid Negative Margins */
.custom-header .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.custom-header .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-wrap: nowrap !important;
}

.custom-header .col-auto {
  padding-left: 0.75rem !important;
  margin-left: 0 !important;
}

.header-actions {
  min-width: 0;
}

.trial-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.28rem 0.62rem;
  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}

.trial-status-chip:hover {
  text-decoration: none;
}

.trial-status-chip-icon {
  font-size: 0.8rem;
}

.trial-status-chip-days {
  opacity: 0.9;
  font-weight: 500;
}

.trial-status-chip-info {
  background-color: #e7f3ff;
  color: #084298;
  border-color: #b6d4fe;
}

.trial-status-chip-warning {
  background-color: #fff3cd;
  color: #664d03;
  border-color: #ffecb5;
}

.trial-status-chip-danger {
  background-color: #f8d7da;
  color: #842029;
  border-color: #f5c2c7;
}

.trial-lifecycle-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.trial-lifecycle-banner-copy {
  min-width: 0;
}

.trial-lifecycle-banner-content {
  min-width: 0;
}

.trial-lifecycle-banner-message {
  overflow-wrap: anywhere;
}

.trial-lifecycle-banner-cta {
  flex-shrink: 0;
}

.header-utility-dropdown .dropdown-toggle {
  color: #4b5563;
}

.header-utility-dropdown .dropdown-toggle:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

.header-utility-dropdown .dropdown-toggle,
.header-profile-dropdown .dropdown-toggle {
  border: 1px solid transparent;
  border-radius: 8px;
  color: #374151;
  background: transparent;
}

.header-utility-dropdown .dropdown-toggle:focus,
.header-profile-dropdown .dropdown-toggle:focus,
.header-utility-dropdown .dropdown-toggle:active,
.header-profile-dropdown .dropdown-toggle:active {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2) !important;
  color: #111827;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(13, 110, 253, 0.35);
}

.header-profile-dropdown .dropdown-toggle::after {
  margin-left: 0.4rem;
}

.header-utility-dropdown .dropdown-menu,
.header-profile-dropdown .dropdown-menu {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16) !important;
  min-width: 280px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.header-utility-dropdown .dropdown-item,
.header-profile-dropdown .dropdown-item {
  font-size: 0.88rem;
}

/* Logo Section */
.logo-container {
  min-width: -moz-fit-content;
  min-width: fit-content;
  padding-right: 1rem;
  margin-left: 0 !important; /* Override Bootstrap negative margin */
  padding-left: 0.75rem; /* Add left padding so logo is visible */
}

.header-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}

.header-logo-link {
  cursor: pointer;
  text-decoration: none;
}

.header-dropdown-section {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.header-dropdown-primary {
  color: var(--bs-primary, #0d6efd);
}

.header-dropdown-danger {
  color: var(--bs-danger, #dc3545);
}

.header-dropdown-spaced {
  padding-top: 0.5rem;
}

.header-user-role {
  font-size: 0.75rem;
}

/* Patient Context Bar - center column must shrink */
.custom-header .col {
  min-width: 0;
  overflow: hidden;
}

.patient-context-bar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 0.16rem 0.16rem;
  color: white;
  gap: 0.68rem;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
  transition: all 0.2s ease-in-out;
  min-height: 42px;
  max-height: 42px;
  align-items: center;
  max-width: 420px;
  overflow: hidden;
}

.patient-context-bar:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
  transform: translateY(-1px);
}

.patient-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  padding-right: 0.68rem;
  line-height: 1;
}

.patient-info i {
  font-size: 1.04rem;
  opacity: 0.95;
}

.patient-info > div {
  min-width: 0;
  overflow: hidden;
}

.patient-name {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patient-mrn {
  opacity: 0.9;
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.study-info {
  display: flex;
  align-items: center;
  gap: 0.36rem;
  font-size: 0.72rem;
  padding: 0 0.12rem;
  min-width: 0;
  max-width: 180px;
  flex-shrink: 1;
}

.study-info i {
  font-size: 0.84rem;
  opacity: 0.9;
  flex-shrink: 0;
}

.study-info > div {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.info-label {
  display: block;
  opacity: 0.8;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.1rem;
  font-weight: 500;
}

.info-value {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.recording-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  line-height: 1.3;
  margin-bottom: 0.15rem;
  min-width: 0;
}

.recording-line:last-child {
  margin-bottom: 0;
}

.recording-label {
  font-size: 0.68rem;
  opacity: 0.85;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 24px;
}

.recording-value {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.study-info div {
  line-height: 1.1;
}

.study-info + .study-info {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 0.75rem;
}

/* System Health Indicator */
.system-health-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.system-health-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.system-health-toggle:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Ensure svg/icon and adjacent dropdown/caret align horizontally */
.system-health-toggle svg,
.system-health-toggle .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Notification Toggle */
.notification-toggle {
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.notification-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.notification-toggle:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Badge Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.notification-toggle .badge {
  animation: pulse 2s infinite;
}

/* Global Search */
.global-search .form-control {
  border-color: #d1d5db;
  transition: all 0.2s ease-in-out;
}

.global-search .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.global-search .input-group-text {
  background-color: #ffffff;
  border-color: #d1d5db;
}

.search-result-item {
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}

.search-result-item:hover {
  background-color: #f3f4f6;
}

.search-result-item:last-child {
  border-bottom: none;
}

/* Notification Items */
.notification-item {
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}

.notification-item:hover {
  background-color: #f9fafb;
}

.notification-item:last-child {
  border-bottom: none;
}

/* Session Timer */

/* User Dropdown */
.dropdown-button .dropdown-toggle {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  font-weight: 500;
  /* Reduce vertical padding by ~20% to lower background height */
  padding: 0.2rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.dropdown-button .dropdown-toggle:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

.dropdown-button .dropdown-toggle:focus {
  /* Scale focus ring down ~20% to match reduced background/shadow */
  box-shadow: 0 0 0 2.4px rgba(59, 130, 246, 0.2);
}

/* About Button */
.btn-info {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
  transition: all 0.2s ease-in-out;
}

.btn-info:hover {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}

/* Dropdown Menus */
.dropdown-menu {
  border-radius: 8px;
  margin-top: 0.5rem;
  animation: fadeInDown 0.2s ease-in-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Badge Styles */
.badge.bg-opacity-10 {
  font-weight: 500;
  padding: 0.35rem 0.65rem;
}

.badge.text-success.bg-opacity-10 {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
}

.badge.text-warning.bg-opacity-10 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
}

.badge.text-danger.bg-opacity-10 {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
}

/* Responsive Design */
@media (max-width: 992px) {
  .custom-header .row {
    flex-wrap: wrap !important;
    row-gap: 0.35rem;
  }

  .custom-header .col-auto.d-flex.align-items-center.gap-2 {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 0.5rem;
  }

  .trial-status-chip-label {
    display: none;
  }
}

@media (max-width: 768px) {
  .custom-header .col-auto.d-flex.align-items-center.gap-2 {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.4rem !important;
    padding-inline: 0.5rem;
  }

  .global-search {
    flex: 1 1 100%;
    max-width: 100%;
    order: 1;
  }

  .global-search .input-group {
    width: 100%;
  }

  .global-search .form-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  .header-utility-dropdown,
  .language-selector,
  .system-health-toggle,
  .trial-status-chip {
    order: 3;
  }

  .trial-lifecycle-banner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .trial-lifecycle-banner-cta {
    width: 100%;
  }

  .patient-context-bar {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .trial-status-chip-label {
    display: none;
  }

  .trial-status-chip {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }

  .header-primary-cta .bi {
    margin-right: 0 !important;
    font-size: 0.95rem;
  }

  .custom-header .col-auto.d-flex.align-items-center.gap-2 > * {
    min-height: 44px;
  }
}

/* Accessibility */
.cursor-pointer {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Styles for Keyboard Navigation */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.chat-consent-banner {
  font-size: 0.85rem;
}
/* Minimal Footer for Authenticated Pages */

.minimal-footer {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-top: 2px solid #667eea;
  padding: 0.15rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1020; /* Above navbar (1019) — footer renders in front */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
}

.footer-text {
  color: #9ca3af;
  font-size: 0.75rem;
}

/* Footer Links */
.footer-links-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.footer-link-minimal {
  color: #a5b4fc;
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.footer-link-minimal:hover {
  color: #667eea;
}

.footer-link-minimal:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-link-button {
  font-family: inherit;
}

.footer-separator {
  color: #4b5563;
  font-size: 0.75rem;
}

/* Right group: badges + version inline */
.footer-right-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.footer-divider {
  color: #4b5563;
  font-size: 0.75rem;
}

/* Override text-muted inside footer so version text is visible on dark background */
.minimal-footer .text-muted {
  color: #9ca3af !important;
}

.minimal-footer .text-secondary {
  color: #6b7280 !important;
}

.footer-badge-hipaa {
  background: rgba(102, 126, 234, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(102, 126, 234, 0.3);
  padding: 0.15rem 0.4rem;
  font-size: 0.688rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

/* Modal Styling */
.modal-header-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
}

.modal-header-custom .btn-close {
  filter: brightness(0) invert(1);
}

.modal-header-custom .modal-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-body-custom {
  background: #f9fafb;
  padding: 2rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.modal-footer-custom {
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
}

/* Modal Footer Sections */
.footer-modal-section {
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}

.footer-modal-heading {
  color: #1f2937;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-modal-icon {
  color: #667eea;
}

.footer-modal-description {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Compliance Badges in Modal */
.compliance-badges-modal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.compliance-badge-modal {
  background: rgba(102, 126, 234, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(102, 126, 234, 0.3);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Modal Links */
.footer-modal-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-modal-links li {
  margin-bottom: 0.5rem;
}

.footer-modal-links a {
  color: #4b5563;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-modal-links a:hover {
  color: #667eea;
  padding-left: 0.25rem;
}

/* Modal Contact List */
.footer-modal-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-modal-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.footer-modal-contact li svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #667eea;
}

.footer-modal-contact a {
  color: #4f46e5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-modal-contact a:hover {
  color: #667eea;
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 767px) {
  .minimal-footer {
    padding: 0.4rem 0;
  }

  .minimal-footer .row > div {
    margin-bottom: 0.25rem;
  }

  .minimal-footer .row > div:last-child {
    margin-bottom: 0;
  }

  .footer-right-group {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-modal-section {
    margin-bottom: 1.5rem;
  }
}

/* Print Styles */
@media print {
  .minimal-footer {
    display: none;
  }
}
.version-display-muted {
  font-size: 0.75rem;
}

.version-display {
  font-size: 0.688rem;
  white-space: nowrap;
}
/* Breadcrumb separator fix - ENG-2547 */
/* This CSS is co-located with the Breadcrumbs component to ensure Vite includes it in the bundle */

.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-padding-x: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}

.app-breadcrumb {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

.app-breadcrumb .breadcrumb-item {
  padding-left: 0.35rem;
}

/* CRITICAL: The content property is required for the separator to display */
/* Using direct class reference to prevent tree-shaking */
.breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, ">") !important;
  padding-right: 0.35rem;
}
/* Enterprise Auth Footer — login/invitation pages */

.enterprise-auth-footer {
  background: linear-gradient(180deg, #0a1628 0%, #060e1a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1020;
}

.eaf-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

/* Row 1: Identity */
.eaf-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.eaf-company {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.eaf-location {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
}

.eaf-separator {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.68rem;
}

.eaf-support-email {
  color: #93c5fd;
  font-size: 0.68rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.eaf-support-email:hover {
  color: #bfdbfe;
}

.eaf-badge-24x7 {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 3px;
  color: #86efac;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Row 2: Links */
.eaf-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.eaf-link {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.65rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.eaf-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.eaf-link:focus-visible {
  outline: 1px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 2px;
}

.eaf-dot {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.6rem;
}

.eaf-copyright {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.62rem;
}

/* Override text-muted inside footer for visibility on dark bg */
.enterprise-auth-footer .text-muted {
  color: rgba(255, 255, 255, 0.35) !important;
}

.enterprise-auth-footer .text-secondary {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .enterprise-auth-footer {
    padding: 0.35rem 0;
  }

  .eaf-identity {
    gap: 0.3rem;
  }

  .eaf-location,
  .eaf-separator:nth-child(2) {
    display: none;
  }
}

/* Print */
@media print {
  .enterprise-auth-footer {
    display: none;
  }
}
.firewall-banner {
  margin: 12px 16px 0;
  border: 1px solid #f5c27b;
  background: #fff7ed;
  border-radius: 10px;
  padding: 12px 14px;
  color: #7c2d12;
}

.firewall-banner-header {
  font-size: 15px;
}

.firewall-banner-copy {
  margin: 6px 0 10px;
  color: #9a3412;
}

.firewall-banner-list {
  margin: 0 0 10px;
  padding-left: 18px;
}

.firewall-banner-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.firewall-banner-endpoint {
  font-weight: 700;
}

.firewall-banner-code {
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  background: #ffedd5;
  border-radius: 6px;
  border: 1px solid #fdba74;
  color: #7c2d12;
  padding: 1px 6px;
}

.firewall-banner-copy-btn {
  border: 1px solid #f59e0b;
  background: #fff;
  color: #7c2d12;
  border-radius: 6px;
  padding: 3px 8px;
}

.firewall-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.firewall-banner-btn {
  border: 1px solid #f59e0b;
  background: #f59e0b;
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
}

.firewall-banner-btn.secondary {
  background: transparent;
  color: #7c2d12;
}

.firewall-banner-link {
  color: #9a3412;
  text-decoration: underline;
}

.firewall-banner-meta {
  margin-top: 8px;
  color: #b45309;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.firewall-banner-copied {
  color: #047857;
}
.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 24px;
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
}

.legal-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #212529;
}

.legal-topbar-brand:hover {
  color: #212529;
  text-decoration: none;
}

.legal-topbar-brand img {
  height: 28px;
  width: auto;
}

.legal-topbar-brand span {
  font-size: 0.95rem;
  font-weight: 600;
}

.legal-topbar-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #0d6efd;
  text-decoration: none;
}

.legal-topbar-back:hover {
  color: #0a58ca;
  text-decoration: underline;
}
/**
 * Medical-Grade Theme System
 * 
 * Professional color palettes for clinical EEG software
 * WCAG AAA compliant color combinations
 */
:root {
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-primary-active: #004080;
  --color-primary-light: #e6f2ff;
  --color-primary-dark: #003d66;
  --color-success: #28a745;
  --color-success-light: #d4edda;
  --color-warning: #ffc107;
  --color-warning-light: #fff3cd;
  --color-danger: #dc3545;
  --color-danger-light: #f8d7da;
  --color-info: #17a2b8;
  --color-info-light: #d1ecf1;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f0f2f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;
  --color-border: #dee2e6;
  --color-divider: #e9ecef;
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-disabled: #adb5bd;
  --color-text-inverse: #ffffff;
  --color-card-bg: #ffffff;
  --color-card-border: #dee2e6;
  --color-input-bg: #ffffff;
  --color-input-border: #ced4da;
  --color-input-focus-border: #0066cc;
  --color-modal-backdrop: rgba(0, 0, 0, 0.5);
  --color-waveform-bg: #ffffff;
  --color-grid-line: rgba(0, 0, 0, 0.1);
  --color-grid-major: rgba(0, 0, 0, 0.2);
  --color-channel-label: #495057;
  --color-measurement-primary: #0066cc;
  --color-measurement-secondary: #28a745;
  --color-annotation-seizure: #dc3545;
  --color-annotation-spike: #ffc107;
  --color-annotation-artifact: #6c757d;
  --color-annotation-sleep: #17a2b8;
  --color-annotation-event: #0066cc;
  --color-annotation-notes: #28a745;
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

[data-theme=light] {
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-primary-active: #004080;
  --color-primary-light: #e6f2ff;
  --color-primary-dark: #003d66;
  --color-success: #28a745;
  --color-success-light: #d4edda;
  --color-warning: #ffc107;
  --color-warning-light: #fff3cd;
  --color-danger: #dc3545;
  --color-danger-light: #f8d7da;
  --color-info: #17a2b8;
  --color-info-light: #d1ecf1;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f0f2f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;
  --color-border: #dee2e6;
  --color-divider: #e9ecef;
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-disabled: #adb5bd;
  --color-text-inverse: #ffffff;
  --color-card-bg: #ffffff;
  --color-card-border: #dee2e6;
  --color-input-bg: #ffffff;
  --color-input-border: #ced4da;
  --color-input-focus-border: #0066cc;
  --color-modal-backdrop: rgba(0, 0, 0, 0.5);
  --color-waveform-bg: #ffffff;
  --color-grid-line: rgba(0, 0, 0, 0.1);
  --color-grid-major: rgba(0, 0, 0, 0.2);
  --color-channel-label: #495057;
  --color-measurement-primary: #0066cc;
  --color-measurement-secondary: #28a745;
  --color-annotation-seizure: #dc3545;
  --color-annotation-spike: #ffc107;
  --color-annotation-artifact: #6c757d;
  --color-annotation-sleep: #17a2b8;
  --color-annotation-event: #0066cc;
  --color-annotation-notes: #28a745;
}

[data-theme=dark] {
  --color-primary: #4da3ff;
  --color-primary-hover: #66b3ff;
  --color-primary-active: #80c3ff;
  --color-primary-light: #1a2f4a;
  --color-primary-dark: #0066cc;
  --color-success: #4ade80;
  --color-success-light: #1a3d2b;
  --color-warning: #fbbf24;
  --color-warning-light: #3d3420;
  --color-danger: #f87171;
  --color-danger-light: #3d1f1f;
  --color-info: #38bdf8;
  --color-info-light: #1a3640;
  --color-gray-50: #0f1419;
  --color-gray-100: #1a1f26;
  --color-gray-200: #252b33;
  --color-gray-300: #2f3640;
  --color-gray-400: #3d444d;
  --color-gray-500: #5a6270;
  --color-gray-600: #8b92a0;
  --color-gray-700: #b4b9c3;
  --color-gray-800: #d4d7de;
  --color-gray-900: #e9ecef;
  --color-background: #0f1419;
  --color-surface: #1a1f26;
  --color-surface-elevated: #252b33;
  --color-border: #2f3640;
  --color-divider: #252b33;
  --color-text-primary: #e9ecef;
  --color-text-secondary: #8b92a0;
  --color-text-disabled: #5a6270;
  --color-text-inverse: #0f1419;
  --color-card-bg: #1a1f26;
  --color-card-border: #2f3640;
  --color-input-bg: #252b33;
  --color-input-border: #3d444d;
  --color-input-focus-border: #4da3ff;
  --color-modal-backdrop: rgba(0, 0, 0, 0.8);
  --color-waveform-bg: #1a1f26;
  --color-grid-line: rgba(255, 255, 255, 0.08);
  --color-grid-major: rgba(255, 255, 255, 0.15);
  --color-channel-label: #b4b9c3;
  --color-measurement-primary: #4da3ff;
  --color-measurement-secondary: #4ade80;
  --color-annotation-seizure: #f87171;
  --color-annotation-spike: #fbbf24;
  --color-annotation-artifact: #8b92a0;
  --color-annotation-sleep: #38bdf8;
  --color-annotation-event: #4da3ff;
  --color-annotation-notes: #4ade80;
}

[data-theme=high-contrast] {
  --color-primary: #0000ff;
  --color-primary-hover: #0000cc;
  --color-primary-active: #000099;
  --color-primary-light: #e6e6ff;
  --color-primary-dark: #000066;
  --color-success: #008000;
  --color-success-light: #e6ffe6;
  --color-warning: #ff8c00;
  --color-warning-light: #fff4e6;
  --color-danger: #ff0000;
  --color-danger-light: #ffe6e6;
  --color-info: #008080;
  --color-info-light: #e6ffff;
  --color-gray-50: #ffffff;
  --color-gray-100: #f0f0f0;
  --color-gray-200: #d0d0d0;
  --color-gray-300: #b0b0b0;
  --color-gray-400: #909090;
  --color-gray-500: #707070;
  --color-gray-600: #505050;
  --color-gray-700: #303030;
  --color-gray-800: #101010;
  --color-gray-900: #000000;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #000000;
  --color-divider: #000000;
  --color-text-primary: #000000;
  --color-text-secondary: #303030;
  --color-text-disabled: #707070;
  --color-text-inverse: #ffffff;
  --color-card-bg: #ffffff;
  --color-card-border: #000000;
  --color-input-bg: #ffffff;
  --color-input-border: #000000;
  --color-input-focus-border: #0000ff;
  --color-modal-backdrop: rgba(0, 0, 0, 0.9);
  --color-waveform-bg: #ffffff;
  --color-grid-line: rgba(0, 0, 0, 0.3);
  --color-grid-major: rgba(0, 0, 0, 0.6);
  --color-channel-label: #000000;
  --color-measurement-primary: #0000ff;
  --color-measurement-secondary: #008000;
  --color-annotation-seizure: #ff0000;
  --color-annotation-spike: #ff8c00;
  --color-annotation-artifact: #505050;
  --color-annotation-sleep: #008080;
  --color-annotation-event: #0000ff;
  --color-annotation-notes: #008000;
}

[data-color-blind-mode=protanopia],
[data-color-blind-mode=deuteranopia] {
  --color-success: #0073e6;
  --color-danger: #e68a00;
}

[data-color-blind-mode=tritanopia] {
  --color-info: #cc00cc;
  --color-warning: #ff0066;
}

.bg-waveform {
  background-color: var(--color-waveform-bg);
}

.text-channel {
  color: var(--color-channel-label);
}/**
 * Centralized Component Design Tokens
 *
 * ALL shared components (AdminTableCard, AdminStatCard, TabCard,
 * EnhancedCard, InfoSection, DetailPageHeader, CardGrid) consume these tokens.
 *
 * Changing a value here changes the entire UI.
 * These tokens reference medical-theme.scss variables (--color-*, --space-*, etc.)
 */
:root {
  --card-bg: var(--color-card-bg);
  --card-border-color: var(--color-card-border);
  --card-border-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding: var(--space-4);
  --card-padding-compact: var(--space-3);
  --card-header-bg: var(--color-gray-50);
  --card-header-padding: var(--space-3) var(--space-4);
  --card-header-border: var(--color-border);
  --card-header-font-weight: 600;
  --card-transition: var(--transition-fast);
  --stat-value-size: 1.5rem;
  --stat-label-size: 0.875rem;
  --stat-label-color: var(--color-text-secondary);
  --stat-icon-size: 1.25rem;
  --table-header-bg: var(--color-gray-50);
  --table-row-hover-bg: var(--color-gray-100);
  --table-border-color: var(--color-border);
  --table-cell-padding: var(--space-3);
  --table-font-size: 0.875rem;
  --filter-label-size: 0.875rem;
  --filter-label-weight: 500;
  --filter-input-border: var(--color-input-border);
  --filter-input-bg: var(--color-input-bg);
  --filter-input-focus-border: var(--color-input-focus-border);
  --section-header-bg: var(--color-gray-50);
  --section-header-padding: var(--space-4) var(--space-5);
  --section-title-size: 1.125rem;
  --section-title-weight: 600;
  --section-title-color: var(--color-text-primary);
  --section-icon-color: var(--color-primary);
  --page-title-size: 1.5rem;
  --page-title-weight: 600;
  --page-subtitle-size: 1rem;
  --page-subtitle-color: var(--color-text-secondary);
  --page-header-padding: var(--space-4) 0;
  --page-header-border: var(--color-divider);
  --component-gap: var(--space-4);
  --section-gap: var(--space-6);
}

/**
 * Professional Typography System
 * 
 * Medical-grade fonts optimized for readability and accessibility
 */
:root {
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code',
                      'Roboto Mono', Consolas, 'Courier New', monospace;
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
:root {
  --font-size-base: 16px;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}
body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 0.5em;
}
h1 {
  font-size: var(--font-size-4xl);
  letter-spacing: var(--letter-spacing-tight);
}
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl);
  }
}
h2 {
  font-size: var(--font-size-3xl);
  letter-spacing: var(--letter-spacing-tight);
}
@media (max-width: 768px) {
  h2 {
    font-size: var(--font-size-2xl);
  }
}
h3 {
  font-size: var(--font-size-2xl);
}
@media (max-width: 768px) {
  h3 {
    font-size: var(--font-size-xl);
  }
}
h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}
h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}
h6 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
p {
  margin-top: 0;
  margin-bottom: 1em;
}
.text-xs {
  font-size: var(--font-size-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
}
.text-md {
  font-size: var(--font-size-md);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-mono {
  font-family: var(--font-family-mono);
}
code, kbd, pre {
  font-family: var(--font-family-mono);
}
.channel-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.timestamp {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-disabled {
  color: var(--color-text-disabled);
}
.text-inverse {
  color: var(--color-text-inverse);
}
.text-success {
  color: var(--color-success);
}
.text-warning {
  color: var(--color-warning);
}
.text-danger {
  color: var(--color-danger);
}
.text-info {
  color: var(--color-info);
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.annotation-label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (min-width: 2560px) {
  :root {
    --font-size-base: 18px;
  }
}
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000000;
  }
  h1 {
    font-size: 24pt;
  }
  h2 {
    font-size: 20pt;
  }
  h3 {
    font-size: 16pt;
  }
  h4 {
    font-size: 14pt;
  }
  h5 {
    font-size: 12pt;
  }
  h6 {
    font-size: 11pt;
  }
}