/* nms_stage_table_html — the stage table's own rules.
 *
 * The form root is the .nst-container div itself, so the root rule stays
 * BARE and every ordinary rule is scoped :where(.nst-container), which adds no
 * specificity and so cannot change which rule wins.
 *
 * THREE families break that pattern on purpose:
 *
 * 1. Rules that must beat a shared class. A head link loses a specificity tie
 *    to the dependency's runtime-injected theme, so the root class is a real
 *    ancestor and the rule wins on specificity instead:
 *    .nst-table (vs .px-table), its th and td (vs .px-table th / td), and the
 *    .nst-table-scroll scrollbar block (vs the dependency's .themed-scrollbar
 *    descendant rules, which would otherwise turn the green thumb grey).
 *    No rule here names .themed-scrollbar itself.
 *
 * 2. The cancel modal's rules are NOT root-scoped at all. pxShowOverlay moves a
 *    .px-modal-overlay into #px-modal-portal while it is open, so the overlay
 *    leaves .nst-container exactly
 *    when it is on screen and a root-anchored selector would stop matching.
 *    .nst-cancel-modal is the overlay's own private class and .nst-cancel-panel
 *    is its child, so that pair travels through the portal together.
 *
 * 3. .nst-cancel-modal .px-modal.nst-cancel-panel is written at (0,3,0) rather
 *    than the obvious .px-modal.nst-cancel-panel at (0,2,0), because (0,2,0)
 *    would TIE with the later 768px rule .nst-cancel-modal .px-modal
 *    { max-width: 100% } and lose: the panel would go full width between 420px
 *    and 768px. That media rule's border-radius: 0 still applies.
 *
 * No designer gate. The one hiding rule, .nst-hidden, ships on the <table>;
 * the empty state ships without it.
 */

.nst-container {
  font-family: var(--px-font);
}

:where(.nst-container) .nst-table-wrapper {
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  border: 1px solid var(--px-border);
  overflow: hidden;
}

.nst-container .nst-table-scroll {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

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

/* The show/hide the renderer toggles. One rule covers the table and the empty
   state; at (0,2,0) it beats theme.css's .px-table { display: block } under
   768px, which an empty inline display would not have. */
.nst-container .nst-hidden {
  display: none;
}

/* px-table overrides for NMS */
.nst-container .nst-table {
  font-size: 0.8rem;
}

.nst-container .nst-table th {
  font-size: 0.65rem;
  padding: 8px 6px;
  white-space: nowrap;
}

.nst-container .nst-table td {
  padding: 6px;
}

:where(.nst-container) .nst-row-highlight {
  background: rgba(239, 68, 68, 0.08) !important;
}

:where(.nst-container) .nst-row-disabled td {
  color: var(--px-text-muted) !important;
  opacity: 0.6;
}

:where(.nst-container) .nst-row-disabled .nst-btn-complete {
  pointer-events: none;
  opacity: 0.6;
}

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

:where(.nst-container) .nst-cell-item {
  max-width: 160px;
}

:where(.nst-container) .nst-cell-notes {
  max-width: 140px;
}

:where(.nst-container) .nst-cell-item,
:where(.nst-container) .nst-cell-notes,
:where(.nst-container) .nst-cell-conditions {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.nst-container) .nst-cell-conditions {
  max-width: 120px;
  font-size: 0.75rem;
  color: var(--px-text-muted);
}

:where(.nst-container) .nst-input {
  font-family: var(--px-font);
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--px-border);
  border-radius: 5px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  min-width: 80px;
}

:where(.nst-container) .nst-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

:where(.nst-container) .nst-textarea {
  min-height: 40px;
  resize: vertical;
}

:where(.nst-container) .nst-actions {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}

:where(.nst-container) .nst-btn {
  font-family: var(--px-font);
  font-size: 10px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

:where(.nst-container) .nst-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.nst-container) .nst-btn-complete {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid transparent;
}

:where(.nst-container) .nst-btn-complete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
}

:where(.nst-container) .nst-btn-cancel {
  background: rgba(239, 68, 68, 0.1);
  color: var(--px-danger);
  border: 1px solid transparent;
}

:where(.nst-container) .nst-btn-cancel:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--px-danger);
}

:where(.nst-container) .nst-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--px-text-muted);
}

:where(.nst-container) .nst-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.5;
}

:where(.nst-container) .nst-empty-text {
  font-size: 14px;
}

/* The cancel modal, unscoped: it is portaled out of the form root while open. */
.nst-cancel-modal .px-modal.nst-cancel-panel {
  max-width: 420px;
  width: 100%;
}

.nst-cancel-textarea {
  width: 100%;
  min-height: 100px;
  font-family: var(--px-font);
  font-size: 13px;
  padding: 12px;
  border: 1px solid var(--px-border);
  border-radius: 8px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  resize: vertical;
  outline: none;
}

.nst-cancel-textarea:focus {
  border-color: var(--px-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

@media (max-width: 900px) {
  .nst-container .nst-table th,
  .nst-container .nst-table td { padding: 6px 4px; font-size: 0.75rem; }
  :where(.nst-container) .nst-cell-item,
  :where(.nst-container) .nst-cell-notes,
  :where(.nst-container) .nst-cell-conditions { max-width: 100px; }
}

@media (max-width: 768px) {
  :where(.nst-container) .nst-cell-item,
  :where(.nst-container) .nst-cell-notes,
  :where(.nst-container) .nst-cell-conditions {
    max-width: none !important;
    white-space: normal !important;
  }
  :where(.nst-container) .nst-actions {
    margin-top: 8px;
    justify-content: flex-start;
  }
  .nst-cancel-modal .px-modal { max-width: 100%; border-radius: 0; }
  .px-modal-overlay.nst-cancel-modal { padding: 0; }
}