/* ========================================================================== */
/* App-Specific Variable Mappings (The single source of truth)                */
/* ========================================================================== */
:root {
  /* App-specific tokens mapped to Material 3 system roles */
  --bg-color: var(--md-sys-color-background);
  --primary-surface-bg: var(--md-sys-color-surface-container-low);
  --secondary-surface-bg: var(--md-sys-color-surface-container);
  --text-primary: var(--md-sys-color-on-surface);
  --text-secondary: var(--md-sys-color-on-surface-variant);
  --interactive-accent: var(--md-sys-color-primary);
  --interactive-accent-hover: var(--md-sys-color-primary-container);
  --interactive-accent-text: var(--md-sys-color-on-primary);
  --border-color: var(--md-sys-color-outline-variant);
  --border-color-focus: var(--md-sys-color-outline);
  --link-color: var(--md-sys-color-primary);
  --header-color: var(--md-sys-color-primary);
  --highlight-yellow-orange: var(--md-sys-color-tertiary);
  --on-highlight-yellow-orange: var(--md-sys-color-on-tertiary-container);
  --highlight-purple: var(--md-sys-color-secondary);
  --shadow-flat: 0px 1px 2px 0px rgba(0,0,0,0.15);
  --shadow-raised: 0px 2px 6px 2px rgba(0,0,0,0.15);
  --shadow-floating: 0px 4px 8px 3px rgba(0,0,0,0.15);
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 28px;
  
  /* Modality Colors - Add if you have them, otherwise they can be removed */
  --modality-ct: #3498db;
  --modality-mri: #9b59b6;
  --modality-us: #2ecc71;
  --modality-nm: #e67e22;
  --modality-fluoro: #f1c40f;
}

/* ========================================================================== */
/* Base & Global Styles                                                       */
/* ========================================================================== */
html {
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
}
body {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  margin: 0;
  padding: 2rem;
  min-height: 100vh;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ✅ ADD THIS ENTIRE BLOCK to fix the dark theme background */
body[data-theme="dark"] {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

/* ========================================================================== */
/* Animation & Transition Control                                             */
/* ========================================================================== */
html.theme-in-transition,
html.theme-in-transition * {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fade-in-up {
  animation: fade-in 0.15s ease-out both;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========================================================================== */
/* Typography                                                                 */
/* ========================================================================== */
h1, h2, h4, h5, h6 {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--interactive-accent);
}
h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--text-primary);
}
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--md-sys-color-primary);
}

/* ========================================================================== */
/* Layout & Header                                                            */
/* ========================================================================== */
/* ✅ UPDATED: Three-section header layout */
.main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
  min-height: 25vh;
  justify-content: center;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: 16px;
  box-shadow: var(--shadow-flat);
}

/* Header sections */
.header-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  padding: 8px 16px;
  background: var(--md-sys-color-surface-container);
  border-radius: 12px;
  box-shadow: var(--shadow-flat);
  transition: all 0.3s ease;
}

.header-toggle-wrapper:hover {
  background: var(--md-sys-color-surface-container-high);
  box-shadow: var(--shadow-raised);
}

.header-toggle-wrapper .filter-toggle-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  margin: 0;
}

.header-toggle-wrapper:has(#dataSourceToggle:checked) .filter-toggle-label {
  font-weight: 700;
  color: #8a2be2;
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.6);
}

.header-center {
  justify-self: center;
}

.header-center h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--md-sys-color-outline);
  margin-bottom: var(--space-xl);
  animation: fadeInScale 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.search-bar-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  justify-self: center;
  max-width: 900px;
  width: 100%;
  margin: 2rem auto 2rem auto;
}

/* Search input and button container - inline layout */
.search-input-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 800px;
  animation: fadeInScale 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Make text field grow to fill space */
.search-input-container .m3-text-field {
  flex: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle animation on focus */
.search-input-container .m3-text-field:focus-within {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Orders toggle positioned left-aligned below search */
.orders-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-left: 40px; /* Nudge to the right to align under search bar edge */
  animation: fadeInScale 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
}

/* Mobile orders toggle adjustments */
@media (max-width: 500px) {
  .orders-toggle-wrapper {
    margin-left: 0; /* Remove desktop nudge on mobile */
    align-self: center; /* Center on mobile */
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
}

/* ========================================================================== */
/* Forms & Buttons                                                            */
/* ========================================================================== */
input, select, textarea {
  background: var(--md-sys-color-surface-container);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem;
  font-size: 1rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--md-sys-color-primary);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
}
/* ========================================================================== */
/* Material 3 Forms & Buttons                                                 */
/* ========================================================================== */

/* ✅ NEW: Material 3 Extended FAB Style for the Search Button */
.m3-extended-fab {
  /* Layout & Sizing */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px; /* A bit more padding since there's no icon */
  
  /* Shape & Color */
  border: none;
  border-radius: 16px;
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  
  /* Typography */
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1px;
  text-transform: none;

  /* Effects */
  position: relative; /* Needed for the gradient overlay */
  overflow: hidden; /* Keeps the gradient inside the button */
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient Overlay on Hover */
.m3-extended-fab::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(var(--md-sys-color-primary-rgb), 0.3), rgba(var(--md-sys-color-primary-rgb), 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.m3-extended-fab:hover {
  box-shadow: none;
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  transform: scale(1.02);
  border: none;
  outline: none;
}

.m3-extended-fab:hover::after {
  opacity: 1; /* Show the gradient on hover */
}

.m3-extended-fab:active {
  box-shadow: var(--shadow-flat);
  transform: scale(0.98);
}

/* Filled Text Field Style */
.m3-text-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1; /* Allow it to grow */
  min-width: 300px;
  background-color: var(--md-sys-color-surface-container-highest);
  border-radius: 16px 16px 0 0; /* M3 top-rounded corners */
  border: none;
  border-bottom: 2px solid var(--md-sys-color-outline-variant);
  transition: border-bottom-color 0.2s ease;
  padding: 8px 16px;
}

.m3-text-field:focus-within {
  border-bottom: 2px solid var(--md-sys-color-primary);
}

.m3-text-field label {
  position: absolute;
  left: 52px; /* Position after the icon */
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
  pointer-events: none;
  transition: all 0.2s ease;
  background-color: var(--md-sys-color-surface-container-highest);
  padding: 0 4px;
}

.m3-text-field .leading-icon {
  color: var(--md-sys-color-on-surface-variant);
  margin-right: 12px;
}

/* The magic floating label animation */
.m3-text-field input:focus + label,
.m3-text-field input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 0.75rem;
  color: var(--md-sys-color-primary);
}

.m3-text-field input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 16px 0 8px 0; /* Adjust padding for label space */
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  color: var(--md-sys-color-on-surface);
}

/* Remove the placeholder from the input, we use the label instead */
.m3-text-field input::placeholder {
  color: transparent;
}

button:hover, .button:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--shadow-raised);
}
.favorite-btn {
  background: var(--primary-surface-bg); /* Give it a surface color */
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--shadow-flat);
  transition: all 0.2s ease;
}

.favorite-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-raised);
}
.favorite-btn .material-symbols-outlined {
  font-variation-settings: 'FILL' 0;
}
.favorite-btn.favorited .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* ========================================================================== */
/* ACR Appropriateness Badges                                               */
/* ========================================================================== */
.acr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 20px;
  padding: 0;
}

.acr-rating-badge,
.acr-level-badge,
.acr-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
  transition: all 0.2s ease;
}

/* Rating badges based on ACR score */
.acr-rating-high {
  background-color: #e8f5e8;
  border-color: #4caf50;
  color: #2e7d32;
}

.acr-rating-medium {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #e65100;
}

.acr-rating-low {
  background-color: #ffebee;
  border-color: #f44336;
  color: #c62828;
}

/* Priority badges */
.acr-priority-first {
  background-color: #e3f2fd;
  border-color: #2196f3;
  color: #1565c0;
}

.acr-priority-second {
  background-color: #f3e5f5;
  border-color: #9c27b0;
  color: #7b1fa2;
}

/* Glowing border effect for 1st Line order cards */
.order-card:has(.acr-priority-first) {
  border: 2px solid #8a2be2;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.3), var(--shadow-flat);
  position: relative;
}

.order-card:has(.acr-priority-first):hover {
  box-shadow: 0 0 25px rgba(138, 43, 226, 0.4), var(--shadow-raised);
  transform: translateY(-2px);
}

.order-card:has(.acr-priority-first)::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #8a2be2, #7a26d1, #8a2be2);
  border-radius: var(--radius-md);
  z-index: -1;
  opacity: 0.1;
  animation: glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 0.2;
  }
}

/* Dark theme overrides for contrast badges */
body[data-theme="dark"] .contrast-indicator.contrast-no {
  background-color: var(--md-sys-color-surface-container-highest);
  color: #ffffff;
  opacity: 1;
  font-weight: 600;
}

body[data-theme="dark"] .contrast-badge.contrast-no {
  background-color: var(--md-sys-color-surface-container-highest);
  color: #ffffff;
  border-color: var(--md-sys-color-outline);
  opacity: 1;
  font-weight: 600;
}

/* Dark theme overrides for ACR badges */
body[data-theme="dark"] .acr-rating-high {
  background-color: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
  color: #81c784;
}

body[data-theme="dark"] .acr-rating-medium {
  background-color: rgba(255, 152, 0, 0.15);
  border-color: #ff9800;
  color: #ffb74d;
}

body[data-theme="dark"] .acr-rating-low {
  background-color: rgba(244, 67, 54, 0.15);
  border-color: #f44336;
  color: #e57373;
}

body[data-theme="dark"] .acr-priority-first {
  background-color: rgba(33, 150, 243, 0.15);
  border-color: #2196f3;
  color: #64b5f6;
}

body[data-theme="dark"] .acr-priority-second {
  background-color: rgba(156, 39, 176, 0.15);
  border-color: #9c27b0;
  color: #ba68c8;
}

/* Dark theme glowing border for 1st Line order cards */
body[data-theme="dark"] .order-card:has(.acr-priority-first) {
  border: 2px solid #bb86fc;
  box-shadow: 0 0 20px rgba(187, 134, 252, 0.4), var(--shadow-flat);
}

body[data-theme="dark"] .order-card:has(.acr-priority-first):hover {
  box-shadow: 0 0 25px rgba(187, 134, 252, 0.5), var(--shadow-raised);
}

body[data-theme="dark"] .order-card:has(.acr-priority-first)::before {
  background: linear-gradient(45deg, #bb86fc, #9c6bfc, #bb86fc);
  opacity: 0.15;
}

/* Mobile optimizations for ACR badges */
@media (max-width: 768px) {
  .acr-badges {
    margin: 10px 16px;
    gap: 4px;
  }
  
  .acr-rating-badge,
  .acr-level-badge,
  .acr-priority-badge {
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 10px;
  }
}

/* ========================================================================== */
/* Protocol & Order Cards                                                     */
/* ========================================================================== */
.protocol-badges {
  display: flex;
  flex-wrap: wrap; /* Allows badges to wrap on small screens */
  gap: 8px; /* This adds 8px of space between each badge */
  margin-top: 12px;
}

.protocol-group {
  margin-bottom: 40px;
}
.protocol-group h2 {
  color: var(--header-color);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--md-sys-color-primary-container);
  font-weight: 700;
  font-size: 1.5em;
}
.protocol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  width: 100%;
}
/* ✅ NEW ELEVATED STYLE */
.protocol-card, .order-card {
  display: flex;
  flex-direction: column;
  background: var(--primary-surface-bg);
  /* border: 1px solid var(--border-color); */ /* REMOVED */
  border: none; /* Explicitly remove border */
  border-radius: var(--radius-md); /* 12px */
  padding: 1.5rem;
  box-shadow: var(--shadow-flat); /* M3 Elevation Level 1 */
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  width: 100%;
}

.protocol-card:hover, .order-card:hover {
  box-shadow: var(--shadow-raised); /* M3 Elevation Level 2 */
  /* border-color: var(--border-color-focus); */ /* REMOVED */
  transform: translateY(-2px);
}
.protocol-title-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.protocol-title-section h3 {
  flex: 1;
}
.protocol-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.contrast-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: 600;
}
.contrast-indicator.contrast-yes {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.contrast-indicator.contrast-no {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  opacity: 0.8;
}
.clinical-indication {
  background: var(--secondary-surface-bg);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: none;
  border-left: 6px solid var(--interactive-accent);
  margin-top: 8px;
  /* ✅ FIXED: Replaced color-mix() with a safe, theme-aware shadow */
  box-shadow: var(--shadow-flat);
}
.clinical-indication strong {
  color: var(--text-primary);
  font-weight: 600;
}

.order-details {
  margin-top: 16px;
}

.protocol-order-type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: white;
  background: var(--interactive-accent);
  margin-bottom: 8px;
  border: none;
}

.favorite-contrast-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: white;
  background: var(--interactive-accent);
  margin-left: 8px;
  border: none;
}
.modality-badge,
.order-type-badge,
.contrast-badge {
  padding: 4px 12px;
  border-radius: 8px; /* ✅ CHANGED: From pill shape to a squarer M3 look */
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* Specific styles for colored/filled badges */
.modality-badge,
.order-type-badge {
  color: white;
  border: none;
}

.modality-ct { background: var(--modality-ct); }
.modality-mri { background: var(--modality-mri); }
.modality-ultrasound { background: var(--modality-us); }
.modality-nuclear-medicine, .modality-pet-ct, .modality-dexa { background: var(--modality-nm); }
.modality-fluoroscopy { background: var(--modality-fluoro); color: var(--text-primary); }
.order-type-badge { background: var(--interactive-accent); }


/* Specific styles for outlined contrast badges */
.contrast-badge {
  border: none;
  transition: all 0.2s ease;
}

.contrast-badge.contrast-yes {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
  color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.contrast-badge.contrast-no {
  background-color: var(--primary-surface-bg);
  color: var(--md-sys-color-on-surface);
  border-color: var(--border-color);
  opacity: 0.8;
}
/* ========================================================================== */
/* Dark Theme Overrides                                                       */
/* ========================================================================== */

/* 1. Main Card Backgrounds & Text */
body[data-theme="dark"] .protocol-card,
body[data-theme="dark"] .order-card {
  background-color: var(--md-sys-color-surface-container); /* Dark surface */
  color: var(--md-sys-color-on-surface); /* Light text */
  background-image: linear-gradient(rgba(var(--md-sys-color-primary-rgb), 0.08), rgba(var(--md-sys-color-primary-rgb), 0.08));
  box-shadow: 0px 4px 8px 3px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.25);
  border: none;
}

body[data-theme="dark"] .protocol-card:hover,
body[data-theme="dark"] .order-card:hover {
  /* On hover, increase the tint opacity and the shadow size */
  background-image: linear-gradient(rgba(var(--md-sys-color-primary-rgb), 0.12), rgba(var(--md-sys-color-primary-rgb), 0.12));
  box-shadow: 0px 8px 12px 6px rgba(0,0,0,0.3), 0px 4px 6px 2px rgba(0,0,0,0.25);
  border-color: var(--md-sys-color-outline);
}

/* 2. Card Header Text */
body[data-theme="dark"] .protocol-card h3,
body[data-theme="dark"] .order-card h3 {
  color: var(--md-sys-color-on-surface);
}
body[data-theme="dark"] .accordion-content-inner {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-theme="dark"] .sequences-header,
body[data-theme="dark"] .indications-header,
body[data-theme="dark"] .scanner-notes-header {
  background-color: var(--md-sys-color-surface-container);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* 3. Accordion / Sub-card Styling */
/* Ensure proper background for all themes */
.sequences-card,
.indications-card,
.scanner-notes-card {
  background-color: var(--md-sys-color-surface-container) !important;
}

body[data-theme="dark"] .sequences-card,
body[data-theme="dark"] .indications-card,
body[data-theme="dark"] .scanner-notes-card {
  background-color: var(--md-sys-color-surface-container) !important;
  border-color: var(--border-color);
}

body[data-theme="dark"] .sequences-header:hover,
body[data-theme="dark"] .indications-header:hover,
body[data-theme="dark"] .scanner-notes-header:hover {
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body[data-theme="dark"] .sequences-content,
body[data-theme="dark"] .indications-content,
body[data-theme="dark"] .scanner-notes-content {
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


/* 4. Update Accent Colors with Purple Variants */

/* Clinical Indication Box (left border) */
body[data-theme="dark"] .clinical-indication {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  /* Use the main primary color, which is bright in dark mode */
  border-left-color: var(--md-sys-color-primary);
}

body[data-theme="dark"] .clinical-indication strong {
  color: var(--md-sys-color-on-surface);
}

/* Accordion Card Borders (using primary, secondary, tertiary from dark theme) */
body[data-theme="dark"] .sequences-card {
  border-left-color: var(--md-sys-color-outline);
}

body[data-theme="dark"] .indications-card {
  border-left-color: var(--md-sys-color-outline);
}

body[data-theme="dark"] .scanner-notes-card {
  border-left-color: var(--md-sys-color-outline);
}

/* Ensure the header text for these cards also uses the brighter accent colors */
body[data-theme="dark"] .sequences-header h4 {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-theme="dark"] .indications-header h4 {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-theme="dark"] .scanner-notes-header h4 {
  color: var(--md-sys-color-on-surface-variant);
}

/* Highlighted and contrast text inside the cards */
body[data-theme="dark"] li.contrast-sequence {
  color: var(--md-sys-color-primary);
}

body[data-theme="dark"] li.highlight-sequence {
  color: #bb86fc;
}

body[data-theme="dark"] .indications-content .contrast-rationale strong {
  color: #ba55d3; /* Bright purple for dark mode */
}

body[data-theme="dark"] .indications-content .indications strong {
  color: #dda0dd; /* Light purple for dark mode */
}

body[data-theme="dark"] .accordion-content {
  background-color: var(--md-sys-color-surface); /* The darkest surface */
  background-image: none; /* No tint */
}

/* This targets the clickable headers of the accordions */
body[data-theme="dark"] .sequences-header,
body[data-theme="dark"] .indications-header,
body[data-theme="dark"] .scanner-notes-header {
  background-color: var(--primary-surface-bg);
  border-bottom: none;
}

body[data-theme="dark"] .sequences-header:hover,
body[data-theme="dark"] .indications-header:hover,
body[data-theme="dark"] .scanner-notes-header:hover {
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Make sure the text inside the accordion content is also the correct light color */
body[data-theme="dark"] .accordion-content-inner {
    color: var(--md-sys-color-on-surface-variant);
}

body[data-theme="dark"] .accordion-content-inner h3 {
    color: var(--md-sys-color-on-surface); /* Make sub-headers brighter */
}

body[data-theme="dark"] .protocol-group h2 {
  /* Use the main light text color for the font */
  color: var(--md-sys-color-on-surface); 

  /* Use a subtle, lighter gray for the underline */
  border-bottom: none;
}

body[data-theme="dark"] .sequences-header,
body[data-theme="dark"] .indications-header,
body[data-theme="dark"] .scanner-notes-header {
  background-color: var(--md-sys-color-surface-container); /* A slightly lighter dark gray */
  border-bottom: none;
}

/* Defines the hover state for the headers */
body[data-theme="dark"] .sequences-header:hover,
body[data-theme="dark"] .indications-header:hover,
body[data-theme="dark"] .scanner-notes-header:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

/* This targets the content panel that slides open */
body[data-theme="dark"] .accordion-content {
  background-color: var(--md-sys-color-surface-container-low); /* A darker gray for contrast */
}

/* This targets the text and elements INSIDE the content panel */
body[data-theme="dark"] .accordion-content-inner {
  color: var(--md-sys-color-on-surface-variant); /* Light text for content */
}

/* Ensure sub-headings inside the accordion are also light */
body[data-theme="dark"] .accordion-content-inner h3 {
  color: var(--md-sys-color-on-surface);
}

/* Ensure list items inside the accordion are light */
body[data-theme="dark"] .accordion-content-inner li {
  color: var(--md-sys-color-on-surface-variant);
}

/* Re-apply the specific highlight colors for dark mode */
body[data-theme="dark"] .accordion-content-inner li.contrast-sequence {
  color: var(--md-sys-color-primary);
}
body[data-theme="dark"] .accordion-content-inner li.highlight-sequence {
  color: #bb86fc;
}

/* Ensure no borders in dark mode accordion content */
body[data-theme="dark"] .accordion-content-inner,
body[data-theme="dark"] .accordion-content-inner ul,
body[data-theme="dark"] .accordion-content-inner li {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Dark theme overrides for toggle switch and favorites sidebar */
body[data-theme="dark"] .m3-switch-track {
  background-color: #ffffff;
  border-color: #ffffff;
}

body[data-theme="dark"] .m3-switch-thumb {
  background-color: var(--md-sys-color-surface-container-highest);
}

body[data-theme="dark"] .m3-switch input:checked + .m3-switch-track {
  background-color: #ffffff;
  border-color: #ffffff;
}

body[data-theme="dark"] .sidebar-content {
  background-color: #ffffff;
  color: #1a1a1a;
}

body[data-theme="dark"] .sidebar-header {
  background-color: #f5f5f5;
  color: #1a1a1a;
}

body[data-theme="dark"] .sidebar-body {
  color: #1a1a1a;
}

body[data-theme="dark"] .sidebar-trigger {
  background-color: #e8e8e8;
  color: #333333;
}

body[data-theme="dark"] .sidebar-trigger:hover {
  background-color: #d0d0d0;
  color: #333333;
}

/* Favorites sequences styling */
.favorite-sequences {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  font-size: 0.85rem;
}

.favorite-sequences li {
  padding: 2px 0;
  color: #555555;
}

.favorite-sequences li.highlight-sequence {
  color: #8a2be2;
  font-weight: 600;
}

/* Ensure proper text contrast for favorites */
.favorite-item-title,
.favorite-item-category {
  color: #1a1a1a !important;
}

body[data-theme="dark"] .favorite-item-title,
body[data-theme="dark"] .favorite-item-category {
  color: #1a1a1a !important;
}

body[data-theme="dark"] .favorite-sequences li {
  color: #555555 !important;
}

body[data-theme="dark"] .favorite-sequences li.highlight-sequence {
  color: #8a2be2 !important;
}

/* ========================================================================== */
/* Accordions (Sequences, Notes, etc.)                                        */
/* ========================================================================== */
.sequences-card, .indications-card, .scanner-notes-card {
    width: 100%;
    margin: 0.75rem 0 0 0;
    background: var(--md-sys-color-surface-container);
    border-radius: 6px;
    box-shadow: none;
    border: none;
    outline: none;
    overflow: hidden;

    /* Keep the left accent border */
    border-left-width: 3px;
    border-left-style: solid;
}
.sequences-header, .indications-header, .scanner-notes-header {
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: 8px 8px 0 0;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
}
.sequences-header:hover, .indications-header:hover, .scanner-notes-header:hover {
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}
.sequences-content, .indications-content, .scanner-notes-content {
    background-color: var(--md-sys-color-surface-container);
    margin: 0;
    position: relative;
    z-index: 1;
    border-radius: 0 0 8px 8px;
    border: none;
    outline: none;
    box-shadow: none;
}

.sequences-content.open, .indications-content.open, .scanner-notes-content.open {
    padding: 16px 20px 20px 20px;
}
.sequences-card { border-left: 3px solid var(--md-sys-color-outline); }
.sequences-header h4 { color: var(--md-sys-color-on-surface-variant); }
.indications-card { 
  border-left: 4px solid var(--md-sys-color-outline);
  background-color: rgba(var(--md-sys-color-outline-rgb), 0.05);
}
.indications-header h4 { 
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 700;
}
.scanner-notes-card { border-left: 3px solid var(--md-sys-color-outline); }
.scanner-notes-header h4 { color: var(--md-sys-color-on-surface-variant); }
.indications-content .contrast-rationale strong { color: #8a2be2; } /* Bright purple */
.indications-content .indications strong { color: #dda0dd; } /* Light purple */
li.contrast-sequence { color: var(--md-sys-color-primary); font-weight: 600; }
li.highlight-sequence { color: #8a2be2; font-weight: 700; }

/* ========================================================================== */
/* Accordion Animation & State (Improved Version)                             */
/* ========================================================================== */

/* The outer container that animates its height */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    padding: 0;
    margin: 0;
}

/* The inner container that provides consistent padding */
.accordion-content-inner {
    padding: 20px;
    border: none;
    outline: none;
}

/* Remove all borders from accordion lists */
.accordion-content-inner ul {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.accordion-content-inner li {
    border: none;
    outline: none;
    margin: 0;
    padding: 4px 0;
}

/* When the 'open' class is added, the outer container expands */
.accordion-content.open {
    /* The max-height is set by JavaScript to content.scrollHeight */
}

/* Style for the + / expand_more icon */
.accordion-toggle {
    transition: transform 0.3s ease;
    font-size: 24px; /* Ensure icon is a good size */
}
.accordion-toggle.expanded {
    transform: rotate(180deg); /* A better rotation for an arrow */
}

/* ========================================================================== */
/* Data Toggle Slider                                                         */
/* ========================================================================== */

/* ========================================================================== */
/* Material 3 Switch Toggle                                                   */
/* ========================================================================== */

.filter-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 1rem; /* Add some space from the search button */
  position: relative;
  z-index: 5;
}

.filter-toggle-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  user-select: none;
  transition: font-weight 0.2s ease;
}

/* Increase font weight when switch is checked */
.orders-toggle-wrapper:has(#dataSourceToggle:checked) .filter-toggle-label {
  font-weight: 700;
  color: #8a2be2;
  text-shadow: 0 0 12px rgba(138, 43, 226, 0.8);
}

.m3-switch {
  position: relative;
  width: 52px;
  height: 32px;
  cursor: pointer;
  z-index: 5;
  touch-action: manipulation;
}

.m3-switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.m3-switch-track {
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-surface-container-highest);
  border: none;
  border-radius: 16px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.m3-switch-thumb {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: var(--md-sys-color-outline);
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/* --- Checked (Active) State --- */

.m3-switch input:checked + .m3-switch-track {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.m3-switch input:checked ~ .m3-switch-thumb {
  transform: translate(24px, -50%);
  background-color: var(--md-sys-color-on-primary);
  width: 24px;
  height: 24px;
}

/* ✅ ADD THIS ENTIRE BLOCK for better dark mode visibility */
body[data-theme="dark"] .slider-label {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-theme="dark"] .slider-label.active {
  color: var(--md-sys-color-primary); /* The primary color is already bright in dark mode */
}

/* ✅ MODIFY THIS RULE */
.slider-label.active {
  color: var(--md-sys-color-primary); /* Use the main accent color */
  font-weight: 700; /* Make it bolder */
  border-bottom: 2px solid var(--md-sys-color-primary); /* Add an underline */
}
.slider-label.active { color: var(--interactive-accent); font-weight: 600; }
.slider-toggle input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; }
.slider-track { position: relative; width: 60px; height: 30px; background-color: var(--secondary-surface-bg); border: 2px solid var(--border-color); border-radius: 15px; cursor: pointer; transition: all 0.3s ease; }
.slider-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background-color: var(--interactive-accent); border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.slider-toggle input:checked + .slider-track { background-color: var(--interactive-accent); border-color: var(--interactive-accent); }
.slider-toggle input:checked + .slider-track .slider-thumb { transform: translateX(30px); background-color: var(--interactive-accent-text); }

/* ========================================================================== */
/* Theme Toggle & UI Widgets                                                  */
/* ========================================================================== */
#theme-toggle {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    z-index: 1000;
    background: var(--primary-surface-bg);
    color: var(--interactive-accent);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-raised);
}
#theme-toggle:hover {
    background: var(--interactive-accent);
    color: var(--interactive-accent-text);
}
/* ========================================================================== */
/* Favorites Sidebar (Removed Conflicting Definition)                        */
/* ========================================================================== */

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========================================================================== */
/* Footer                                                                     */
/* ========================================================================== */
.site-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  position: relative;
  z-index: 1500;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.copyright {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
}

.project-info {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8rem;
  opacity: 0.8;
}

.project-link {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  z-index: 1502;
}

.project-link:hover {
  color: var(--md-sys-color-primary-container);
  text-decoration: underline;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  z-index: 1501;
}

.footer-link {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

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

.discord-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1502;
}

.discord-link:hover {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-flat);
}

.discord-link .material-symbols-outlined {
  font-size: 1.1rem;
}

.footer-disclaimer {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.ai-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  opacity: 0.9;
}

.ai-disclaimer .material-symbols-outlined {
  font-size: 1rem;
  opacity: 0.8;
}

/* Dark theme footer */
body[data-theme="dark"] .site-footer {
  background: var(--md-sys-color-surface-container);
  border-top-color: var(--md-sys-color-outline);
}

body[data-theme="dark"] .copyright,
body[data-theme="dark"] .project-info {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-theme="dark"] .footer-link {
  color: var(--md-sys-color-primary);
}

body[data-theme="dark"] .footer-link:hover {
  color: var(--md-sys-color-primary-container);
}

body[data-theme="dark"] .discord-link {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

body[data-theme="dark"] .discord-link:hover {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

body[data-theme="dark"] .footer-disclaimer {
  border-top-color: var(--md-sys-color-outline);
}

body[data-theme="dark"] .ai-disclaimer {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Mobile footer adjustments */
@media (max-width: 768px) {
  .site-footer {
    margin-top: 2rem;
    padding: 1.5rem 0;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-left {
    align-items: center;
    text-align: center;
  }
  
  .copyright {
    font-size: 0.8rem;
  }
  
  .project-info {
    font-size: 0.75rem;
  }
  
  .footer-nav {
    flex-direction: column;
    gap: 1rem;
  }
  
  .footer-link {
    font-size: 0.8rem;
  }
  
  .discord-link {
    padding: 0.6rem 1.2rem;
    font-size: 0.8rem;
  }
  
  .footer-disclaimer {
    margin-top: 1rem;
    padding-top: 0.75rem;
  }
  
  .ai-disclaimer {
    font-size: 0.75rem;
    padding: 0.6rem 0.8rem;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }
  
  .ai-disclaimer .material-symbols-outlined {
    font-size: 0.9rem;
  }
}

@media (max-width: 500px) {
  .site-footer {
    margin-top: 1.5rem;
    padding: 1rem 0;
  }
  
  .footer-content {
    padding: 0 0.5rem;
  }
}

/* ========================================================================== */
/* Responsive Design                                                          */
/* ========================================================================== */
@media (max-width: 768px) {
  .protocol-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  body {
    padding: 0.5rem;
    font-size: 0.95rem;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  /* Header optimizations */
  .main-header {
    padding: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
  }
  
  h1, h2, h3, h4 {
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  /* Fixed search experience optimizations */
  .search-bar-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 1rem auto;
    width: 100%;
    max-width: calc(100vw - 1rem);
    padding: 0;
    box-sizing: border-box;
  }
  
  .search-input-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: stretch;
    box-sizing: border-box;
  }
  
  .m3-text-field {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 80px); /* Account for search button */
  }
  
  #searchInput {
    width: 100%;
    min-width: 0;
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 0.8rem;
    min-height: 44px;
    border-radius: 12px;
    box-sizing: border-box;
  }
  
  #searchButton {
    min-width: 70px;
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
    white-space: nowrap;
  }
  
  
  /* Card optimizations */
  .protocol-card, .order-card {
    padding: 1.25rem;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    border-radius: 16px;
  }
  
  .protocol-group h2 {
    font-size: 1.2rem;
    padding-bottom: 4px;
    margin-bottom: 10px;
    font-weight: 700;
  }
  
  /* Touch-friendly order badges */
  .protocol-order-type-badge {
    padding: 6px 12px;
    font-size: 0.8rem;
    margin-bottom: 12px;
    margin-right: 8px;
    display: inline-block;
  }
  
  /* Stack arthrogram badges vertically on mobile */
  .protocol-order-type-badge + .protocol-order-type-badge {
    margin-top: 4px;
    display: block;
    width: fit-content;
  }
  
  /* Protocol info section */
  .protocol-info {
    margin-top: 12px;
  }
  
  .contrast-indicator {
    padding: 8px 12px;
    font-size: 0.9rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Accordion optimizations for mobile */
  .sequences-header, .indications-header, .scanner-notes-header {
    padding: 16px 20px;
    min-height: 56px;
    font-size: 1rem;
    border-radius: 12px 12px 0 0;
  }
  
  .sequences-header h4, .indications-header h4, .scanner-notes-header h4 {
    font-size: 1rem;
    font-weight: 600;
  }
  
  .accordion-toggle {
    font-size: 1.5rem;
    padding: 4px;
  }
  
  .sequences-content, .indications-content, .scanner-notes-content {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  .sequences-content.open, .indications-content.open, .scanner-notes-content.open {
    padding: 20px;
  }
  
  /* Sequence lists mobile formatting */
  .sequences-content ul {
    margin: 0;
    padding-left: 1.25rem;
  }
  
  .sequences-content li {
    margin-bottom: 8px;
    padding: 4px 0;
    line-height: 1.4;
    word-break: break-word;
  }
  
  .highlight-sequence {
    padding: 6px 8px;
    border-radius: 6px;
    margin: 2px 0;
  }
  
  /* Favorites sidebar mobile optimizations */
  .favorites-sidebar, .sidebar-content {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none !important;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .sidebar-header {
    padding: 16px;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
    border-bottom: 1px solid var(--border-color);
  }
  
  .sidebar-body {
    padding: 16px;
    padding-bottom: 80px;
  }
  
  .sidebar-trigger {
    padding: 12px 10px;
    font-size: 1rem;
    min-height: 48px;
    border-radius: 12px;
  }
  
  /* Enhanced favorite items for mobile */
  .favorite-item {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    min-height: 60px;
  }
  
  .favorite-item-header {
    gap: 12px;
    margin-bottom: 8px;
  }
  
  .favorite-item-title {
    font-size: 1rem;
    line-height: 1.3;
  }
  
  .favorite-contrast-badge {
    padding: 4px 8px;
    font-size: 0.7rem;
    white-space: nowrap;
  }
  
  .favorite-sequences {
    margin-top: 8px;
    font-size: 0.9rem;
  }
  
  .favorite-sequences li {
    margin-bottom: 4px;
    line-height: 1.3;
  }
  
  .favorite-item-remove {
    min-width: 40px;
    min-height: 40px;
    border-radius: 10px;
    top: 12px;
    right: 12px;
  }
  
  /* Toggle and FAB optimizations */
  .m3-extended-fab {
    height: 56px;
    padding: 0 20px;
    font-size: 1rem;
    border-radius: 16px;
    min-width: 120px;
  }
  
  .filter-toggle-wrapper {
    margin-left: 0.5rem;
    gap: 12px;
    align-items: center;
  }
  
  .m3-switch {
    transform: scale(1.1);
  }
  
  /* Badge optimizations */
  .protocol-badges {
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  
  .modality-badge, .order-type-badge, .contrast-badge {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .clinical-indication {
    padding: 12px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: 12px;
  }
  
  /* Touch-friendly favorite button */
  .favorite-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    padding: 8px;
  }
  
  .favorite-btn .material-symbols-outlined {
    font-size: 1.25rem;
  }
  
  /* Order details mobile spacing */
  .order-details {
    margin-top: 16px;
  }
  
  /* Reduce motion for mobile performance */
  .protocol-card, .order-card,
  .sequences-header, .indications-header, .scanner-notes-header {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  
  /* Optimize hover states for touch (remove on mobile) */
  .protocol-card:hover, .order-card:hover {
    transform: none;
    box-shadow: var(--shadow-flat);
  }
  
  .sequences-header:hover, .indications-header:hover, .scanner-notes-header:hover {
    transform: none;
  }
}

/* ========================================================================== */
/* Favorites Sidebar                                                          */
/* ========================================================================== */
.favorites-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1001; /* Higher than theme toggle */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Hide favorites sidebar when search is active */
.search-active .favorites-sidebar {
  opacity: 0.3;
  transform: translateY(-50%) translateX(20px);
  pointer-events: none;
}

.search-active .favorites-sidebar:hover {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: all;
}

.sidebar-trigger {
  position: absolute;
  right: 100%; /* Start attached to the left of the panel */
  top: 50%;
  transform: translateY(-50%);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 16px 12px;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-raised);
}

.sidebar-trigger:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  transform: translateY(-50%) translateX(-4px);
}

.favorites-count {
  background: var(--md-sys-color-on-primary);
  color: var(--md-sys-color-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.sidebar-content {
  width: 350px;
  max-height: 80vh;
  background: var(--primary-surface-bg);
  border: none;
  border-radius: 12px 0 0 12px;
  box-shadow: var(--shadow-floating);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(100%); /* Start hidden off-screen */
  display: flex;
  flex-direction: column;
}

.favorites-sidebar.open .sidebar-content {
  transform: translateX(0); /* Slide in when sidebar is open */
}

.sidebar-header {
  padding: 20px;
  background: var(--secondary-surface-bg);
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-close {
  background: transparent;
  padding: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.sidebar-close:hover,
.sidebar-close:focus {
  background-color: var(--md-sys-color-surface-container-high);
}

/* Enhanced mobile close button */
@media (max-width: 768px) {
  .sidebar-close {
    padding: 16px;
    width: 56px;
    height: 56px;
    background: var(--md-sys-color-error-container);
    border-radius: 8px;
  }
  
  .sidebar-close:hover,
  .sidebar-close:focus {
    background: var(--md-sys-color-error);
  }
  
  .sidebar-close .material-symbols-outlined {
    color: var(--md-sys-color-on-error-container);
  }
  
  .sidebar-close:hover .material-symbols-outlined,
  .sidebar-close:focus .material-symbols-outlined {
    color: var(--md-sys-color-on-error);
    margin: 8px;
  }
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-favorites {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 20px;
}

/* ========================================================================== */
/* Accessibility Utilities                                                    */
/* ========================================================================== */

/* Visually hide an element but keep it available for screen readers */
.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;
}

/* Remove default fieldset border and padding */
.slider-toggle-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* ========================================================================== */
/* AI Chatbot Styles                                                         */
/* ========================================================================== */

.ai-chatbot {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  font-family: 'Jost', sans-serif;
}

.chatbot-trigger {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-floating);
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
}

.chatbot-trigger:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.chatbot-trigger .material-symbols-outlined {
  color: white;
  font-size: 28px;
  font-variation-settings: 'FILL' 1;
}

.chatbot-tooltip {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.chatbot-trigger:hover .chatbot-tooltip {
  opacity: 1;
  visibility: visible;
}

.chatbot-container {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 500px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  transform: scale(0) translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chatbot-container.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
}

.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--md-sys-color-primary-container);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.chatbot-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbot-title .material-symbols-outlined {
  color: var(--md-sys-color-on-primary-container);
  font-size: 24px;
}

.chatbot-title h4 {
  margin: 0;
  color: var(--md-sys-color-on-primary-container);
  font-weight: 600;
  font-size: 16px;
}

.chatbot-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.chatbot-close:hover {
  background: rgba(var(--md-sys-color-on-primary-container-rgb), 0.1);
}

.chatbot-close .material-symbols-outlined {
  color: var(--md-sys-color-on-primary-container);
  font-size: 20px;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

.chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-outline-variant);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.chatbot-messages::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-sys-color-outline);
}

.message {
  max-width: 85%;
  word-wrap: break-word;
}

.message-content {
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.4;
}

.ai-message {
  align-self: flex-start;
}

.ai-message .message-content {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-bottom-left-radius: 4px;
}

.user-message {
  align-self: flex-end;
}

.user-message .message-content {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-bottom-right-radius: 4px;
}

.message-content p {
  margin: 0 0 8px 0;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.message-content li {
  margin: 4px 0;
}

.acr-recommendation {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.chatbot-input-container {
  padding: 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.chatbot-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chatbot-input-wrapper input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 24px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.chatbot-input-wrapper input:focus {
  border-color: var(--md-sys-color-primary);
}

.chatbot-input-wrapper button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chatbot-input-wrapper button:disabled {
  background: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
  cursor: not-allowed;
}

.chatbot-input-wrapper button:not(:disabled):hover {
  background: var(--md-sys-color-primary-container);
  transform: scale(1.05);
}

.chatbot-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

.chatbot-typing span {
  width: 4px;
  height: 4px;
  background: var(--md-sys-color-primary);
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

.chatbot-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes typing {
  0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
  30% { transform: scale(1.2); opacity: 1; }
}

/* Mobile filter toggle (hidden on desktop) */
.mobile-filter-toggle-wrapper {
  display: none;
}

/* Mobile full-screen when search is active */
.search-active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-color);
  z-index: 2000;
  overflow-y: auto;
  padding: 1rem;
}

.search-active .main-header {
  min-height: auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
}

.search-active .main-header .header-center h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/* Hide favorites on mobile to emphasize search and AI chatbot */
@media (max-width: 768px) {
  .favorites-sidebar {
    display: none !important;
  }
  
  /* Switch header to vertical layout on mobile */
  .main-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Hide desktop header toggle on mobile */
  .header-toggle-wrapper {
    display: none !important;
  }
  
  /* Center title on mobile */
  .header-center h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  
  /* Mobile responsive search controls */
  .search-input-container {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .search-bar-wrapper {
    margin: 1rem auto 1rem auto;
    padding: 0 1rem;
  }
  
  .orders-toggle-wrapper {
    align-self: center;
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  /* Full width search on mobile */
  .search-bar-wrapper {
    width: 100%;
    justify-self: center;
  }
  
  /* Show mobile toggle */
  .mobile-filter-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    background: var(--md-sys-color-surface-container);
    border-radius: 12px;
    width: 100%;
  }
  
  .mobile-filter-toggle-wrapper .filter-toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
  }
  
}

/* iPhone 12 and similar devices (390px wide) */
@media (max-width: 390px) {
  body {
    padding: 0.25rem;
  }
  
  .container {
    padding: 0;
    margin: 0;
  }
  
  .main-header {
    padding: 0.25rem;
    margin-top: 0.25rem;
  }
  
  .search-bar-wrapper {
    padding: 0 0.25rem;
    margin: 0.5rem auto;
  }
  
  .search-input-container {
    gap: 0.25rem;
  }
  
  .m3-text-field {
    max-width: calc(100% - 60px);
  }
  
  #searchButton {
    min-width: 55px;
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  
  .orders-toggle-wrapper {
    max-width: 150px;
  }
  
  .filter-toggle-label {
    font-size: 0.8rem;
  }
}

/* Enhanced mobile experience - emphasize chatbot and search */
@media (max-width: 768px) {
  .ai-chatbot {
    bottom: 20px;
    right: 20px;
    z-index: 2000; /* Higher than favorites sidebar */
  }
  
  .chatbot-trigger {
    width: 64px;
    height: 64px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  
  .chatbot-trigger .material-symbols-outlined {
    font-size: 32px;
  }
  
  .chatbot-tooltip {
    display: none; /* Hide tooltip on mobile (no hover) */
  }
  
  .chatbot-container {
    width: calc(100vw - 24px);
    height: 70vh;
    max-height: 500px;
    bottom: 90px;
  }
  
  /* Make search bar more prominent on mobile */
  .search-bar-wrapper {
    margin-bottom: 24px;
  }
  
  .m3-text-field {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .ai-chatbot {
    bottom: 16px;
    right: 16px;
  }
  
  .chatbot-container {
    width: calc(100vw - 32px);
    height: 400px;
  }
  
  .chatbot-trigger {
    width: 56px;
    height: 56px;
  }
  
  .chatbot-trigger .material-symbols-outlined {
    font-size: 28px;
  }
}

/* Dark mode adjustments */
body[data-theme="dark"] .chatbot-trigger {
  background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
}

/* ========================================================================== */
/* Chatbot-style Suggestion Cards                                             */
/* ========================================================================== */
.search-suggestions {
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

.suggestion-card {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-flat);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.suggestion-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
  border-color: var(--md-sys-color-primary);
}

.suggestion-card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-flat);
}

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

.suggestion-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin: 0;
  flex: 1;
}

.suggestion-badges {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.suggestion-preview {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.5rem 0 0 0;
}

.view-details-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.suggestion-card:hover .view-details-btn {
  opacity: 1;
}

.view-details-btn:hover {
  background: var(--md-sys-color-primary-container);
  transform: scale(1.05);
}

/* Detail view overlay */
.detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}

.detail-content {
  background: var(--bg-color);
  border-radius: var(--radius-lg);
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: fadeInScale 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.detail-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--border-color);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.detail-close:hover {
  background: var(--text-secondary);
  color: var(--primary-surface-bg);
}

.detail-close .material-symbols-outlined {
  font-size: 20px;
}

/* Follow-up suggestions styling */
.follow-up-suggestions {
  max-width: 800px;
  margin: 2rem auto 0 auto;
  padding: 0 1rem;
}

.follow-up-suggestions h3 {
  color: var(--md-sys-color-on-surface);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.follow-up-suggestion {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.follow-up-suggestion:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-flat);
  border-color: var(--interactive-accent);
}

.follow-up-suggestion.urgent {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.follow-up-suggestion.clarification {
  border-color: #f1c40f;
  background: rgba(241, 196, 15, 0.1);
}

.follow-up-suggestion .suggestion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.follow-up-suggestion .suggestion-header h4 {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: 1rem;
  font-weight: 500;
}

.follow-up-suggestion .suggestion-header .material-symbols-outlined {
  color: var(--interactive-accent);
  font-size: 20px;
}

.suggestion-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suggestion-option {
  background: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.suggestion-option:hover {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary);
  transform: translateY(-1px);
}

.suggestion-option:active {
  transform: translateY(0);
}

/* Enhanced search context styles */
.search-context {
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  padding: 1rem;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.search-context.urgent {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.search-context.urgent .context-note {
  color: #e74c3c;
}

.search-context.clarification {
  border-color: #f1c40f;
  background: rgba(241, 196, 15, 0.1);
}

.search-context.clarification .context-note {
  color: #f1c40f;
}

.context-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

/* Mobile responsiveness for suggestion cards */
@media (max-width: 768px) {
  .follow-up-suggestions {
    padding: 0 0.5rem;
  }
  
  .suggestion-options {
    flex-direction: column;
  }
  
  .suggestion-option {
    width: 100%;
    text-align: center;
  }
  
  .follow-up-suggestion {
    padding: 1rem;
  }
  
  .search-context {
    margin: 0 0.5rem 1.5rem 0.5rem;
  }
}

/* ========================================================================== */
/* Beta Acknowledgment Modal                                                  */
/* ========================================================================== */
.beta-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.beta-modal-content {
  background: var(--primary-surface-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

.beta-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 2rem 1rem 2rem;
  border-bottom: 1px solid var(--border-color);
}

.beta-warning-icon {
  color: #f1c40f;
  font-size: 2rem;
}

.beta-modal-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.beta-modal-body {
  padding: 2rem;
}

.acknowledgment-item {
  margin-bottom: 2rem;
}

.acknowledgment-item:last-child {
  margin-bottom: 0;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  line-height: 1.6;
}

.checkbox-container input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color-focus);
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.checkmark::after {
  content: '✓';
  color: var(--interactive-accent-text);
  font-weight: bold;
  font-size: 16px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.15s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
  opacity: 1;
  transform: scale(1);
}

.acknowledgment-text {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.6;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .beta-modal-content {
    width: 95%;
    margin: 1rem;
  }
  
  .beta-modal-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
  }
  
  .beta-modal-body {
    padding: 1.5rem;
  }
  
  .beta-modal-header h2 {
    font-size: 1.25rem;
  }
  
  .checkbox-container {
    gap: 0.75rem;
  }
  
  .acknowledgment-text {
    font-size: 0.95rem;
  }
}