/* ===== clinical_approvals.css — the section's shared sheet =====
   The bulk ACUTE/MONTHLY pair, and nothing else.

   Loaded eagerly from anvil.yaml native_deps.head_html.

   WHY A SHARED SHEET. One builder renders this control, `caSqBulkPairHtml` in
   clinical_approvals.mjs, and TWO forms render it: ca_screen_queue_html paints
   it into each script mini-header (`prefix: 'script'`) and each patient card
   header (`prefix: 'patient'`), and ca_meds_profile_sheet_html paints it into
   the meds panel body (`prefix: 'meds'`). Scoped to the queue's own root in
   ca_screen_queue_html.css these rules would not reach the meds sheet, and the
   meds panel's
   'Mark remaining acute/monthly' and 'Approve all' would silently render on
   `.ca-sq-bulk-classify button` alone — 1px instead of 2px, a 999px radius
   instead of square, 10.5px instead of 12px, 700 instead of 800. No test sees
   that; it is visible.

   SCOPE IS .ca-page, the one ancestor both roots share (the section shell's
   root). :where() adds zero specificity, so every tie inside this sheet is
   decided by document order, and the meds sheet's own `.ca-meds-bulk .ca-sq-bulk-classify`
   override at (0,2,0) still wins.

   THE ORDER OF THE BLOCKS BELOW IS LOAD-BEARING. They are the twelve rule
   blocks of ca_screen_queue_html's old style block, in template order.
   `button[data-ca-sq-patient-bulk], button[data-ca-sq-meds-bulk]` at (0,1,1)
   TIES with `.ca-sq-bulk-classify button` at (0,1,1), so the later one wins —
   which is why it must stay after it here, as it was there. Reordering these
   two, or leaving either behind in ca_screen_queue_html.css, reverts the
   patient-level and meds-panel buttons to the script-level look.
*/
/* Owner ruling 2026-08-11: the bulk ACUTE/MONTHLY controls follow the
   ref/ETP/state badges on the LEFT of the mini-header — no
   margin-left:auto push to the far right, where they go unseen.
   The patient-level pair (owner ruling 2026-08-12) is the same
   control one scope up — every remaining unclassified item on the
   patient card — so it shares every rule below, and since both pairs
   are rendered by ONE builder they share the class names too: the
   script/patient distinction survives only in the data attributes the
   click dispatcher keys on. The patient pair renders INSIDE the badge
   container, where the mini-header's mono/uppercase/tracking are not
   inherited: the wrapper's font-family/text-transform/letter-spacing
   are the page defaults it already rendered with. */
:where(.ca-page) .ca-sq-bulk-remaining {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--px-font);
  text-transform: none;
  letter-spacing: 0;
}
:where(.ca-page) .ca-sq-bulk-remaining-count {
  color: var(--px-text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
/* Owner ruling 2026-08-11 (re-smoke): each bulk button carries its own
   CLASSIFICATION TINT on the border, so the pair reads as the two
   classifications rather than one neutral segmented control. The tint
   tokens are the app-wide classification pair (`--px-mode-acute-*` /
   `--px-mode-monthly-*`) the row option buttons and the batch bar
   already use. The border moves onto the buttons themselves — a
   shared wrapper border cannot be two colours — and the base rule
   carries width/style ONLY: every button is one classification or the
   other, so a neutral default colour would never render. Both bulk
   pairs carry the tints — the tint selectors key on the per-scope data
   attribute, which is the only thing left that differs. */
:where(.ca-page) .ca-sq-bulk-classify {
  display: inline-flex;
  gap: 5px;
}
:where(.ca-page) .ca-sq-bulk-classify button {
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--px-font);
  font-size: 10.5px;
  font-weight: 700;
}
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-script-bulk="approve"],
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-patient-bulk="approve"],
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-meds-bulk="approve"] {
  border-color: var(--px-border-strong);
}
:where(.ca-page) button[data-ca-sq-patient-bulk], :where(.ca-page) button[data-ca-sq-meds-bulk] {
  border-width: 2px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
}
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-script-bulk="acute"],
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-patient-bulk="acute"],
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-meds-bulk="acute"] {
  border-color: var(--px-mode-acute-strong);
}
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-script-bulk="monthly"],
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-patient-bulk="monthly"],
:where(.ca-page) .ca-sq-bulk-classify button[data-ca-sq-meds-bulk="monthly"] {
  border-color: var(--px-mode-monthly-strong);
}
:where(.ca-page) .ca-sq-bulk-classify button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
:where(.ca-page) .ca-sq-bulk-blocked-note,
:where(.ca-page) .ca-sq-bulk-busy-note {
  max-width: 280px;
  font-size: 10px;
  font-weight: 600;
}
:where(.ca-page) .ca-sq-bulk-blocked-note { color: var(--px-warning); }
:where(.ca-page) .ca-sq-bulk-busy-note { color: var(--px-text-muted); }