/* unassigned_patients_html — the Unassigned Patients shell, kept here because
 * the Anvil server strips a template's <style> block.
 *
 * .up-screen-root is the wrapping root (see the template comment) and its
 * rule is the BARE root rule: display: block and nothing else, an auto-height
 * wrapper, so the page scrollbar stays on the shell's content port.
 *
 * .up-dashboard KEEPS ITS OWN BARE RULE with exactly its six custom properties,
 * byte-identical, and the guide's "plus position: relative and flex: 1 0 auto"
 * root rule is deliberately NOT written onto it. The layout contract is the
 * shared .px-screen-root (theme/assets/theme.css), which that div already
 * carries, and this rule must not re-grow any of those eight declarations.
 *
 * [data-theme="dark"] .up-dashboard stays verbatim and UNWRAPPED: its subject is
 * the root div itself, so :where() would add nothing and wrapping the whole
 * selector would match nothing.
 *
 * Every other rule is scoped :where(.up-dashboard), which adds zero specificity
 * and so cannot change which rule wins. Both @media blocks move whole, in place,
 * their inner selectors scoped the same way.
 *
 * No second class is needed anywhere: every selector here is up- prefixed and
 * private, neither shared sheet declares one of them, and each media rule ties
 * with its own base rule in this same file and wins on document order exactly as
 * it does today.
 *
 * No :root, html or body rule existed to delete, no url() to rewrite, no
 * @font-face, no @keyframes. No mount rule and no mount class.
 * No .px-section-reveal rule and no .themed-scrollbar rule — both names belong
 * to the dependency, which declares them at runtime. No
 * designer gate: nothing in this template is hidden until JavaScript runs.
 */

.up-screen-root {
  display: block;
}

.up-dashboard {
  --accent: #65a30d;
  --accent-hover: #4d7c0f;
  --accent-light: #84cc16;
  --accent-subtle: rgba(101, 163, 13, 0.08);
  --accent-subtle-hover: rgba(101, 163, 13, 0.15);
  --px-loading-accent: #65a30d;
}

[data-theme="dark"] .up-dashboard {
  --accent: #84cc16;
  --accent-light: #a3e635;
  --accent-subtle: rgba(132, 204, 22, 0.15);
  --accent-subtle-hover: rgba(132, 204, 22, 0.2);
  --accent-hover: #65a30d;
}

:where(.up-dashboard) .up-content {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== Header ===== */
:where(.up-dashboard) .up-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

:where(.up-dashboard) .up-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.up-dashboard) .up-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.up-dashboard) .up-title {
  font-family: var(--px-font);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--px-text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.up-dashboard) .up-title::before {
  content: '';
  width: 4px;
  height: 32px;
  background: var(--accent);
  border-radius: 2px;
}

:where(.up-dashboard) .up-count-badge {
  font-family: var(--px-mono);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 2px 10px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

:where(.up-dashboard) .up-subtitle {
  font-family: var(--px-mono);
  font-size: 0.75rem;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 4px;
}

/* ===== Pop-up (px_form_alert) =====
   This form is not a routable screen, so the portal is the only
   place it ever renders. The .up-dashboard div keeps px-screen-root, which
   theme.css gives height:100%, overflow-y:auto and the deep page
   background. Inside .px-modal-body (itself flex:1; overflow-y:auto)
   that draws a second scroller and a page-coloured slab inside the
   card, so those three are undone here. Portal-scoped on purpose: the
   bare .up-dashboard rule must keep none of this. */
#px-modal-portal .up-dashboard {
  height: auto;
  min-height: 0;
  overflow-y: visible;
  background: transparent;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  :where(.up-dashboard) .up-content { padding: 16px; gap: 16px; }
  :where(.up-dashboard) .up-title { font-size: 1.5rem; }
}

@media (max-width: 600px) {
  :where(.up-dashboard) .up-content { padding: 12px; gap: 12px; }
  :where(.up-dashboard) .up-title { font-size: 1.25rem; }
  :where(.up-dashboard) .up-header { flex-direction: column; gap: 12px; }
}