/* nms_historical_html — the Historical NMS pop-up.
 *
 * Kept here because the Anvil server strips a <style> block out of an HTML
 * template. Rules are scoped by their selector preludes, and three state
 * classes stand in for inline style= attributes a template cannot carry.
 *
 * SCOPE. The form's single top-level node IS the overlay, so the root class is
 * .nh-overlay and every rule here is either scoped on it or, where it would
 * lose a tie on order, promoted to name it as a real ancestor. A head <link>
 * loads before the dependency's runtime theme injection and theme.css ties are
 * decided by document order, so a rule at equal specificity with a shared
 * .px-* name loses unless it gains a class. Promoted for that reason: .nh-table and its th / td (they
 * tie with theme.css's .px-table family), .nh-table-scroll and its three
 * ::-webkit-scrollbar rules (they tie with the dependency's .themed-scrollbar,
 * which this element also carries, and unfixed the green thumb turns grey), and
 * .px-modal-body.nh-modal-body, doubled on the element, which unfixed regains
 * the dependency's 24px padding and loses its flex column.
 *
 * The two #nh-overlay selectors KEEP their id. Rewritten to the class they
 * would be (0,1,0), tie with the dependency's own .px-modal and lose, and the
 * pop-up narrows.
 *
 * .nh-hidden is the hidden state the module toggles on the table and the
 * empty state. It names the root as a real ancestor at (0,2,0) so it beats
 * theme.css's .px-table { display: block } under 768px.
 *
 * DELETED, deliberately: @media (max-width: 900px) { .px-modal-body
 * { padding: 16px } }. It never reached this form's own modal body, which
 * carried the padding inline and so won at every width; the only thing it ever
 * styled was ANOTHER form's .px-modal-body while this pop-up happened to be
 * mounted. Carried into a head link that leak would be permanent and app-wide;
 * scoped to this form's root it is dead. (D-NMS-5.)
 *
 * No .themed-scrollbar rule is declared here: that class is the dependency's.
 *
 * DESIGNER GATE: none, deliberately. Nothing here is hidden until JavaScript
 * runs, and .nh-hidden replaces an inline display:none that already hid the
 * table on today's canvas.
 */

#nh-overlay .px-modal {
  width: 100%;
}

.px-modal-body.nh-modal-body {
  padding: 20px 24px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

:where(.nh-overlay) .nh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

:where(.nh-overlay) .nh-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.nh-overlay) .nh-filter-group-grow {
  flex: 1;
  min-width: 180px;
}

:where(.nh-overlay) .nh-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--px-text-muted);
}

:where(.nh-overlay) .nh-input {
  font-family: var(--px-font);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--px-border);
  border-radius: 8px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 140px;
}

:where(.nh-overlay) .nh-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.nh-overlay) .nh-input::placeholder {
  color: var(--px-text-muted);
}

:where(.nh-overlay) .nh-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  background: var(--px-bg-elevated);
  border-radius: 8px;
}

:where(.nh-overlay) .nh-count-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--px-text-secondary);
}

:where(.nh-overlay) .nh-count-value {
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

:where(.nh-overlay) .nh-table-wrapper {
  background: var(--px-bg-card);
  border-radius: var(--px-radius-sm);
  border: 1px solid var(--px-border);
  overflow: hidden;
  flex: 1;
  min-height: 200px;
}

.nh-overlay .nh-table-scroll {
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.nh-overlay .nh-table-scroll::-webkit-scrollbar { width: 6px; }
.nh-overlay .nh-table-scroll::-webkit-scrollbar-track { background: transparent; }
.nh-overlay .nh-table-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.nh-overlay .nh-hidden {
  display: none;
}

.nh-overlay .nh-table {
  font-size: 0.75rem;
}

.nh-overlay .nh-table th {
  padding: 8px 6px;
  font-size: 0.6rem;
  white-space: nowrap;
}

.nh-overlay .nh-table td {
  padding: 6px;
  color: var(--px-text-secondary);
  font-size: 0.75rem;
}

:where(.nh-overlay) .nh-cell-notes {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.nh-overlay) .nh-cell-patient {
  font-weight: 500;
  color: var(--px-text-primary);
}

:where(.nh-overlay) .nh-cell-cancelled {
  color: var(--px-danger);
  font-style: italic;
}

:where(.nh-overlay) .nh-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--px-text-muted);
}

:where(.nh-overlay) .nh-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

:where(.nh-overlay) .nh-empty-text {
  font-size: 14px;
}

@media (max-width: 900px) {
  :where(.nh-overlay) .nh-filters { gap: 8px; }
  :where(.nh-overlay) .nh-input { min-width: 110px; }
}

@media (max-width: 600px) {
  #nh-overlay { padding: 0; }
  #nh-overlay .px-modal { border-radius: 0; }
  :where(.nh-overlay) .nh-filters { flex-direction: column; align-items: stretch; }
  :where(.nh-overlay) .nh-filter-group { width: 100%; }
  :where(.nh-overlay) .nh-input { width: 100%; }
  :where(.nh-overlay) .nh-counts { flex-direction: column; gap: 8px; }
  :where(.nh-overlay) .nh-table .nh-cell-notes {
    max-width: none !important;
    white-space: normal !important;
  }
}