/* EMR-DOCS Commit 4 — facet sidebar + smart-search + document
   classification card. Scoped under .documents-search-panel +
   .doc-class-card so styles cannot leak elsewhere.

   Uses the project-wide --surface / --bg / --border / --text / --accent
   token family (style.css + design-tokens.css), which has proper
   :root[data-theme="dark"] overrides. The legacy --mv-* fallbacks
   that previously lived here were never themed and rendered
   white-on-dark in dark mode. */

/* ── Documents search panel layout ─────────────────────────────── */

.documents-search-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
  color: var(--text);
  margin-bottom: 14px;
}

.documents-search-head h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.documents-search-box-mount {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.documents-search-body {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .documents-search-body {
    grid-template-columns: 1fr;
  }
}

.documents-search-sidebar {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  background: var(--surface);
  color: var(--text);
  max-height: 60vh;
  overflow-y: auto;
}

.documents-search-results-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.documents-search-results {
  display: grid;
  gap: 8px;
}

.documents-search-pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}

.documents-search-pager-summary {
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-right: auto;
}

/* ── Smart search input ────────────────────────────────────────── */

.smart-search-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smart-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input);
  color: var(--text);
}

.smart-search-input::placeholder { color: var(--text-mute); }

.smart-search-hint {
  font-size: 0.78rem;
  color: var(--text-mute);
  min-height: 1em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Facet sidebar ─────────────────────────────────────────────── */

.facet-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text);
}

.facet-totals {
  font-size: 0.8rem;
  color: var(--text-mute);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.facet-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent);
}

:root[data-theme="dark"] .facet-chip {
  color: #93c5fd;          /* blue-300 — readable on dark accent-light */
  border-color: rgba(147, 197, 253, 0.4);
}

.facet-chip-x {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  color: inherit;
  padding: 0 2px;
}

.facet-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.facet-group-title {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}

.facet-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.facet-row-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.facet-row-btn:hover {
  background: var(--bg);
}

.facet-row.active .facet-row-btn {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

:root[data-theme="dark"] .facet-row.active .facet-row-btn {
  color: #93c5fd;
}

.facet-row-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.facet-row-count {
  font-size: 0.78rem;
  color: var(--text-mute);
  background: var(--input);
  padding: 1px 6px;
  border-radius: 4px;
}

.facet-row.active .facet-row-count {
  background: var(--accent-light);
  color: var(--accent);
}

:root[data-theme="dark"] .facet-row.active .facet-row-count {
  color: #93c5fd;
}

/* ── Document classification card ──────────────────────────────── */

.doc-class-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: grab;
}

.doc-class-card:active {
  cursor: grabbing;
}

.doc-class-card-report {
  border-left: 3px solid var(--accent);
}

.doc-class-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-class-title {
  margin: 0;
  flex: 1;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-class-confidence {
  font-size: 0.78rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--input);
  color: var(--text-mute);
}

.doc-class-kind-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

:root[data-theme="dark"] .doc-class-kind-badge {
  color: #93c5fd;
}

.doc-class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-mute);
}

.doc-class-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.doc-class-hint.photo-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--warning);
  background: var(--warning-light);
  padding: 6px 8px;
  border-radius: 4px;
}

:root[data-theme="dark"] .doc-class-hint.photo-hint {
  color: #fcd34d;          /* amber-300 readable on amber-900 bg */
}

.doc-class-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Drag-target visual on Informes tab button ────────────────── */

.tab.drag-target {
  background: var(--success-light);
  outline: 2px dashed var(--success);
  outline-offset: -2px;
}

:root[data-theme="dark"] .tab.drag-target {
  color: #6ee7b7;          /* emerald-300 readable on emerald-900 bg */
}

/* ── Labs tab widgets row ─────────────────────────────────────── */

.labs-widgets-row {
  display: grid;
  /* Widened from minmax(180px, 240px) to 220-300px so 10-cat names
     like "Aging, Brain, Sleep & Performance" don't wrap. */
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .labs-widgets-row {
    grid-template-columns: 1fr;
  }
}

.labs-facet-sidebar-mount {
  background: transparent;
  color: var(--text);
  /* Sticky so the category nav follows as the trends column scrolls.
     Inner scrollbar still appears when the patient has 200+ rows. */
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.labs-main-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#labs-cosign-queue-mount:empty {
  display: none;
}

/* Same dodge on tab-informes — when the cosign queue endpoint
   returns zero rows the widget renders nothing; collapse the empty
   container so the chips don't get an extra row of whitespace. */
#informes-cosign-queue-mount:empty {
  display: none;
}

/* ── Labs/Orders biomarker category navigator (replaces the
   document facet sidebar on tab-labs). Mirrors the Knowledge tree
   look — collapsible top-level categories with subcategory chips.
   Click a category title → trends column scrolls + flashes. */

/* Flat tree (no per-category boxes). Mirrors the Knowledge tab so
   the visual language is consistent and the categories breathe. */
.labs-biomarker-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.labs-biomarker-nav-title {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

/* Hint text was chatty and ate vertical space — drop it. */
.labs-biomarker-nav-hint { display: none; }

.labs-biomarker-cat {
  border: 0;
  background: transparent;
}

.labs-biomarker-cat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.labs-biomarker-cat-head::before {
  content: "\25B8";       /* right-pointing triangle */
  font-size: 0.7rem;
  color: var(--text-mute);
  width: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.labs-biomarker-cat.is-expanded > .labs-biomarker-cat-head::before {
  transform: rotate(90deg);
}

.labs-biomarker-cat-head:hover {
  background: var(--bg);
}

.labs-biomarker-cat-label { flex: 1; }

.labs-biomarker-cat-count {
  color: var(--text-mute);
  font-size: 0.78rem;
  font-weight: 400;
}

.labs-biomarker-cat-children {
  display: none;
  padding: 2px 0 6px 1.5rem;
}

.labs-biomarker-cat.is-expanded .labs-biomarker-cat-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.labs-biomarker-subcat {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-sec);
  cursor: pointer;
}

.labs-biomarker-subcat:hover {
  background: var(--bg);
  color: var(--text);
}

/* Highlight target trend-category briefly after a sidebar click so
   the user's eye lands on what they navigated to. Subcategory uses
   a lighter tint so a parent + child flash chain reads correctly. */
@keyframes lab-cat-flash {
  0%   { background: var(--accent-light); }
  100% { background: transparent; }
}

.trend-category.lab-cat-highlight,
.trend-subcategory.lab-cat-highlight {
  animation: lab-cat-flash 1.4s ease-out;
}

.trend-subcategory.lab-subcat-highlight {
  animation: lab-cat-flash 1.4s ease-out;
}

/* Subcategory subsections rendered inside .trend-category. Keep
   chrome subtle so the top-level category still leads the eye. */
.trend-subcategory {
  margin: 0.4rem 0 0.6rem;
}

.trend-subcategory-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.6rem 0 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px dashed var(--border);
}

/* Petition cart (M6) — replaces labs-biomarker-nav read-only navigator. */
.labs-petition-cart h4 { margin: 0 0 .5rem; }
.labs-petition-cart h5 { margin: .75rem 0 .25rem; font-size: .85rem; }
.petition-templates-wrap select { width: 100%; padding: .35rem; }
.petition-cat-head {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 600; padding: .25rem 0;
}
.petition-leaf {
  display: flex; align-items: center; gap: .35rem;
  padding: .1rem 0 .1rem 1.5rem;
  font-size: .85rem;
}
.petition-rail {
  position: sticky; bottom: 0; background: var(--bg, #fff);
  padding: .75rem 0; border-top: 1px solid var(--border, #ddd);
  display: flex; flex-direction: column; gap: .35rem;
}
.petition-rail-count { font-size: .85rem; color: var(--muted, #666); }
.petition-preview-text {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px; white-space: pre-wrap; line-height: 1.4;
  background: var(--bg-alt, #f7f7f8); padding: 1rem;
  border-radius: 6px; border: 1px solid var(--border, #e5e7eb);
  max-height: 60vh; overflow-y: auto;
}
.petition-preview-actions {
  display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap;
}