:root { --brightness: 1; }
 body { font-family: 'Inter', sans-serif; line-height: 1.5; background: #fdfdfd;  /* light background for readability */
  color: #000; overscroll-behavior-y: contain; display: flex; flex-direction: column;
  min-height: calc(var(--vh, 1vh) * 100); }

/* .addComponents  */
/* Snapshot card styles */
.snapshot-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background-color: #f9fafb;
  color: #374151;
  font-size: 0.875rem;
}
body.dark-mode .snapshot-card {
  background-color: #1f2937;
  color: #f9fafb;
  border-color: #374151;
}

/* Sidebar and Overlay */
 #patient-sidebar { position: fixed; top: 0; left: 0; width: 300px; max-width: 80%; height: 100vh; background: #ffffff;      
    border-right: 1px solid #e5e7eb; padding: 1rem; overflow-y: auto; z-index: 100;
    transform: translateX(-100%); transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
  #patient-sidebar.open { transform: translateX(0); }
  #sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 40; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; pointer-events: none; }
  #sidebar-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
  #app-container { display: flex; flex-direction: column; flex-grow: 1;
    width: 100%; transition: margin-left 0.3s ease-in-out; }

/* Hierarchical List (Categories/Topics) */
  .category-item > .category-header { display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; background-color: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 0.375rem;
    cursor: pointer; font-weight: 500; transition: background-color 0.2s; }
  .category-item > .category-header:hover { background: #e0f2fe; }
  .category-children { display: none; padding-left: 1rem; margin-top: 0.25rem; border-left: 2px solid #d1d5db; }          
  .category-item.expanded > .category-children { display: block; }
  .category-item.expanded > .category-header .icon-toggle-open { display: inline-block; }
  .category-item.expanded > .category-header .icon-toggle-closed { display: none; }
  .icon-toggle-open { display: none; } .icon-toggle-closed { display: inline-block; }

/* Topic Links */
  .topic-link-item { display: block; padding: 0.6rem 1rem; background: #fff; 
    border: 1px solid #d1d5db; border-radius: 0.375rem; margin-top: 0.25rem;
    cursor: pointer; transition: background-color 0.2s, transform 0.1s; }
  .topic-link-item:hover { background-color: #e0f2fe; }
  .topic-link-item:active { transform: scale(0.98); }     /* Slight scale down on click */
  .topic-link-item.recently-viewed { background-color: #fef3c7; }
  .strikethrough { text-decoration: line-through; color: #6b7280; }
/* Search result item in sidebar */
  .search-topic-item { padding: 0.75rem 1rem; background-color: #f9fafb; border-radius: 0.375rem; 
    cursor: pointer; border: 1px solid #d1d5db; margin-bottom: 0.5rem; }
  .search-topic-item:hover { background-color: #e0f2fe; }

/* Sidebar sections */
  .sidebar-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; } 
  .sidebar-section-title { font-size: 1.125rem; font-weight: 600; color: #2563eb; margin-bottom: 0.5rem; }
/* Form inputs in sidebar */
  .sidebar-input:focus { width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; 
    border-radius: 0.875rem; font-size: 0.875rem; line-height: 1.25rem; outline: none; 
    box-shadow: 0 0 0 2px #3b82f6; border-color: #3b82f6; }
  .sidebar-label { display: block; font-size: 0.875rem; line-height: 1.25rem;
    font-weight: 500; color: #374151; margin-bottom: 0.25rem; }

/* Autocomplete suggestions dropdown */
  .autocomplete-container { position: relative; }
  .autocomplete-suggestions { position: absolute; border: 1px solid #d1d5db;
    border-top: none; z-index: 101; max-height: 150px; overflow-y: auto;
    background: #ffffff; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 0 0 0.375rem 0.375rem; }  /* + theme("borderRadius.md") + " " + theme("borderRadius.md") */
  .autocomplete-suggestion-item { padding: 0.5rem; cursor: pointer; font-size: 0.875rem; }
  .autocomplete-suggestion-item:hover { background: #e0f2fe; }
  .hidden { display: none !important; }
/* Utility: hidden (override to ensure it hides even if other display is set) */


/* Medication Detail page styles */
  .detail-section { margin-bottom :1rem; }
  .detail-section-title { font-size: 1rem; font-weight: 600;
    color: #1d4ed8; border-bottom: 1px solid #bfdbfe; padding-bottom: 0.25rem; margin-bottom: 0.5rem; }
  .detail-list { list-style-type: disc; list-style-position: inside; padding-left: 0.5rem; color: #374151; }                
  .detail-list li + li { margin-top: 0.25rem; }
  .detail-text { color: #374151; white-space: pre-wrap; }

  .med-concentration { font-size: 0.875rem; line-height: 1.25rem; color: #6b7280; margin-left: 0.5rem; } 

/* Header navigation buttons (top-right corner buttons) */
  .header-nav-button { padding: 0.5rem; border-radius: 0.375rem; color: #ffffff; } 
  .header-nav-button:hover { background-color: #1d4ed8; }
  .header-nav-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Quick Vent Guide title color */
.quick-vent-title { color: #8b5cf6; } /* violet-500 */
body.dark-mode .quick-vent-title { color: #fbbf24; } /* amber-400 */

/* Tooltip/modal styles for calculator */
.qv-tooltip { position: absolute; z-index: 100; background: #fff; color: #111827; border: 1px solid #d1d5db; padding: 0.5rem; border-radius: 0.375rem; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
body.dark-mode .qv-tooltip { background: #1f2937; color: #e5e7eb; border-color: #374151; }
.qv-modal { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); width: 480px; max-width: 90vw; background: #fff; color: #111827; border: 1px solid #d1d5db; border-radius: 0.375rem; box-shadow: 0 10px 20px rgba(0,0,0,0.35); z-index: 110; resize: both; overflow: auto; }
body.dark-mode .qv-modal { background: #111827; color: #e5e7eb; border-color: #374151; }
.qv-modal-header { cursor: move; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid #d1d5db; }
body.dark-mode .qv-modal-header { border-color: #374151; }
.qv-close { cursor: pointer; }

/* Toggle info links */
  .toggle-info { color: #15803d; cursor: pointer; text-decoration-line: underline;
    text-decoration-color: #15803d; text-underline-offset: 2px; }
  .toggle-info:hover { color: #065f46; background-color: #d1fae5; }
  .toggle-info .info-text { margin-left: 0.25rem; }
  .toggle-category {
    display: flex;
    justify-content: flex-start; /* place arrow icon next to the text (was space-between) */
    align-items: center;  /* vertically center the icon and text */
  }


/*   //{ cursor: pointer; display: flex; justify-content: flex-start; align-items: center; }/   */
  .arrow { display: inline-block; margin-right: 0.5rem; transition: transform 0.2s; }
    .arrow.rotate { transform: rotate(90deg); }

/* Warning message boxes */
  .warning-box { margin-top: 1rem; margin-bottom: 1rem; padding: 0.75rem;
    border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; } 
  .warning-box > * + * { margin-top: 0.5rem; } /* space between lines inside warning box */
  .warning-box-red { border-color: #f87171; background-color: #fef2f2; color: #b91c1c; } 
  .warning-box-orange { border-color: #fb923c; background-color: #fefce8; color: #c2410c; }
  .warning-box-yellow { border-color: #facc15; background-color: #fefce8; color: #713f12; } 
  .warning-box div { display: flex; align-items: flex-start; }
  .warning-box svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; flex-shrink: 0; }

/* Custom scrollbar styling */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background-color: #f1f1f1; border-radius: 10px; }
  ::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
  /* Dark mode logic */
@keyframes textColorTransition { 0%, 100% { color: #2563eb; } 50% { color: #16a34a; } }
#settings-button { font-family: 'Baloo 2', cursive;
                   font-size: 1.5rem;
                   animation: textColorTransition 2s ease-in-out infinite; }
#settings-panel { z-index: 110; }
/* When dark mode is active, apply brightness filter using the root variable. */
body.dark-mode { filter: brightness(var(--brightness)); }
/* Snapshot bar styling */
#patient-snapshot-bar { min-height: 1.5rem; }
body.dark-mode #patient-snapshot-bar { color: #e5e7eb; }

/* Quick Vent fieldset legend background for dark mode */
.qv-legend { background: #ffffff; }
body.dark-mode .qv-legend { background: #111827; }

.selected { outline: 2px solid #2563eb; background-color: #2563eb; color: #fff; }
/* Quick Vent: Zoll Set Up input styling */
.qv-row { display: flex; align-items: flex-start; flex-wrap: nowrap; justify-content: center; column-gap: 4ch; }
.qv-field { min-width: max-content; }

.qv-input { border: none; outline: none; padding: 0; margin: 0; background: transparent; font-size: 0.875rem; }
.qv-num { text-align: right; }
.qv-suffix { font-size: 0.75rem; }
/* Only inputs have borders; units sit outside */
.qv-unit { display: inline-flex; align-items: baseline; }
.qv-unit .qv-input { border: 1px solid #9ca3af; border-radius: 0.125rem; padding: 0 0.1ch; }
.qv-unit .qv-suffix { margin-left: 0.1ch; }
/* Ensure total-inches input has its own border like other units */
.qv-height-total .qv-input { border: 1px solid #9ca3af; border-radius: 0.125rem; padding: 0 0.1ch; }

/* Inline fraction formatting for math details */
.frac { display: inline-grid; grid-auto-flow: row; align-items: center; justify-items: center; vertical-align: middle; }
.frac-num, .frac-den { display: block; line-height: 1.05; padding: 0 0.15em; }
.frac-bar { display: block; width: 100%; border-top: 1px solid currentColor; margin: 0.08em 0; }

.qv-weight { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0.25rem; border: none; padding: 0; }
.qv-weight .qv-input { height: 1.25rem; line-height: 1.25rem; }
.qv-height { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0.25rem; }
.qv-height-pair { display: inline-flex; align-items: baseline; border: none; padding: 0; column-gap: 0ch; }
.qv-height-total { display: inline-flex; align-items: baseline; border: none; padding: 0; margin-left: 2ch; }
/* .qv-sep and .qv-equals no longer used */
.qv-total-label { font-size: 0.75rem; margin-left: 0.1ch; }
.qv-tv-label { color: #a78bfa; }

/* Remove number input spinners */
.qv input[type=number]::-webkit-outer-spin-button,
.qv input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.qv input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Arrow styling */
.qv-arrow { color: #000; margin-right: 0.5ch; display: none; }
.qv-toggle.open .qv-arrow { display: inline; }

/* Legacy sex symbol rules removed *//* Sane dark mode palette */
/* Keep header blue (Tailwind), focus on content readability */
body.dark-mode #content-area { background-color: #111827; }
body.dark-mode #content-area, body.dark-mode p, body.dark-mode li, body.dark-mode span { color: #e5e7eb; }
body.dark-mode .detail-text, body.dark-mode .detail-list { color: #e5e7eb; }
body.dark-mode .topic-link-item { background-color: #111827; border-color: #374151; color: #e5e7eb; }
body.dark-mode .topic-link-item:hover { background-color: #1f2937; }
body.dark-mode .sidebar-label { color: #e5e7eb; }
body.dark-mode .sidebar-input { background-color: #1f2937; color: #e5e7eb; border-color: #374151; }
body.dark-mode .sidebar-input::placeholder { color: #9ca3af; }
body.dark-mode footer { background-color: #111827; color: #9ca3af; }

/* Quick Vent overrides: fix duplicated Sex symbols, normalize Weight box size */
#content-area .qv { display: inline-block; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; padding-left: 2ch; padding-right: 2ch; }
#qv-sex { display: flex; flex-direction: column; row-gap: 0.25rem; align-items: center; }
#qv-sex button { font-size: 0; position: relative; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #9ca3af; box-sizing: border-box; margin: 0; padding: 0; background: #fff; flex-shrink: 0; border-radius: 0.125rem; }
#qv-sex button::before { display: inline-block; font-size: 1.2rem; line-height: 1; font-weight: 800; -webkit-text-stroke: 0.015em currentColor; text-shadow: 0 0 0 currentColor, 0.01em 0 currentColor, -0.01em 0 currentColor, 0 0.01em currentColor, 0 -0.01em currentColor; }
#qv-sex button[data-val="male"]::before { content: "\2642"; color: #2563eb; }
#qv-sex button[data-val="female"]::before { content: "\2640"; color: #ec4899; }
#qv-sex button.selected::before { color: #ffffff; }
#qv-sex button.selected[data-val="male"] { background: #2563eb; border-color: #2563eb; }
#qv-sex button.selected[data-val="female"] { background: #ec4899; border-color: #ec4899; }

/* Ensure Weight field container uses vertical layout */
.qv-weight { border: none; padding: 0; align-items: flex-start; row-gap: 0.25rem; }
.qv-weight .qv-input { height: 1.25rem; line-height: 1.25rem; }

/* Fixed-width numeric input boxes by expected digit count */
#qv-weight-kg { width: 4.5ch; }
#qv-weight-lb { width: 4.5ch; }
#qv-height-ft { width: 2ch; }
#qv-height-in { width: 2ch; }
#qv-height-inches { width: 2.5ch; }

/* Slightly shorter height inputs for Height column */
#qv-height-ft,
#qv-height-in,
#qv-height-inches { height: 1rem; line-height: 1rem; }

/* TV title and answer layout */
.qv-tv-row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 1ch; margin-top: -1ch; }
.qv-tv-title { font-weight: 700; color: #a78bfa; white-space: nowrap; }
#qv-tv { display: inline-flex; flex-direction: column; gap: 0.125rem; font-size: 1rem; font-weight: 700; color: #8b5cf6; }
.qv-tv-ans-line { line-height: 1.1; }
.qv-tv-ans-label { color: #6b7280; margin-right: 0.25ch; }

/* Small devices (e.g., Galaxy Fold cover screen ~300-360 CSS px) */
@media (max-width: 360px) {
  /* Allow title and answer to wrap so nothing overflows */
  .qv-tv-row { flex-wrap: wrap; gap: 0.5ch; }
  .qv-tv-title { white-space: normal; flex: 1 1 100%; margin-bottom: 0.25rem; }
  /* Tighten paddings so the calculator fits comfortably */
  #content-area .qv { padding-left: 1ch; padding-right: 1ch; }
  /* Sidebar width slightly smaller on very narrow screens */
  #patient-sidebar { width: 85vw; max-width: 85vw; }
  /* Sex buttons layout horizontally to save vertical space */
  #qv-sex { flex-direction: row; column-gap: 0.5rem; }
}