/*
 * Application-specific styles
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Note: Tailwind CSS is loaded separately via stylesheet_link_tag "tailwind" in the layout.
 * This file is for custom application styles that override or extend Tailwind.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html,
body {
  max-width: 100%;
  /* `clip` prevents horizontal scroll WITHOUT creating a scroll container, so
     `position: sticky` (e.g. the admin sidebar) still works. `hidden` here
     silently broke all sticky positioning site-wide. */
  overflow-x: clip;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

#main_content_area {
  min-width: 0;
}

/* Hamburger override for the admin sidebar. daisyUI's `lg:drawer-open`
   makes .drawer a 2-column CSS grid with drawer-side in col 1 and
   drawer-content placed in col 2 — so hiding drawer-side alone leaves
   drawer-content stuck in the right column. Flipping the whole drawer
   to display: block when collapsed dissolves the grid; drawer-content
   then naturally takes 100% width. The container inside re-centers
   itself via its own `mx-auto`. */
/* Desktop only: `.drawer-collapsed` exists solely to override `lg:drawer-open`,
   which only applies at >=1024px. On mobile the sidebar is driven by daisyUI's
   checkbox slide-out, and an unscoped `display:none !important` here would
   force-hide the sidebar and cancel the hamburger's checkbox open. */
@media (min-width: 1024px) {
  .drawer.drawer-collapsed {
    display: block !important;
  }
  .drawer.drawer-collapsed > .drawer-side {
    display: none !important;
  }
  .drawer.drawer-collapsed > .drawer-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* The admin views pin their inner .container to the left with `lg:ml-0`
     (so it sits flush against the sidebar when the sidebar is visible).
     When the sidebar is hidden, that `ml-0` strands the content on the
     left and leaves the right half blank. Force mx-auto here so the
     container re-centers in the now-full-width drawer-content. */
  .drawer.drawer-collapsed > .drawer-content .container {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Inner narrow columns (e.g. <div class="max-w-3xl"> on the eXPRS auth
     page) sit at the LEFT of their parent container by default. With the
     sidebar hidden the user expects them centered on the page, not
     leaning against the parent's left edge. Center any max-w-* descendant
     horizontally when the drawer is collapsed. */
  /* Only genuinely-narrow columns should re-center; full-width caps (max-w-full
     / max-w-none) must stay put. Centering them is a no-op EXCEPT on w-fit
     elements (e.g. the billing `w-fit max-w-full` tab bar), where auto margins
     would wrongly center a left-aligned control when the sidebar collapses. */
  .drawer.drawer-collapsed [class*="max-w-"]:not([class*="max-w-full"]):not([class*="max-w-none"]) {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Mobile: bypass daisyUI's drawer grid (which leaks column-1 width to viewport)
   so drawer-content takes full width and stays aligned to the viewport. */
@media (max-width: 1023px) {
  .drawer.lg\:drawer-open {
    display: block;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .drawer.lg\:drawer-open > .drawer-content {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }
  .drawer.lg\:drawer-open > .drawer-side {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
  }
  /* The sticky header (navbar + sandbox banner) sits above the fixed mobile
     drawer, so pad the sidebar's content down by the header height to keep
     its top items from hiding underneath. --app-header-h is measured live by
     the header-height controller so it tracks the real height even when the
     banner or navbar wraps. */
  .drawer.lg\:drawer-open > .drawer-side .admin-sidebar {
    padding-top: var(--app-header-h, 4rem);
  }
}

/* The sticky header (navbar + sandbox banner) sits above the admin drawer, so
   trim the drawer's min-height by that amount. Without this the drawer's
   `min-h-screen` (100vh) stacks under the header → the page is 100vh + header
   and short admin pages get that much dead scroll. Applies at all widths (the
   single-col/mobile layout needs it too, not just desktop); --app-header-h is
   measured live so the trim matches the real header height even when it wraps.
   Scoped to the admin drawer via :has(.admin-sidebar) so other pages are
   untouched, and only the drawer wrapper/content — never the fixed sidebar. */
.drawer.lg\:drawer-open:has(.admin-sidebar),
.drawer.lg\:drawer-open:has(.admin-sidebar) > .drawer-content {
  min-height: calc(100dvh - var(--app-header-h, 4rem));
}

/* Desktop (lg:drawer-open makes .drawer-side sticky): daisyUI's default keeps
   the sidebar at top:0 + height:100dvh, so it's a full-viewport grid item that
   forces .drawer to a full 100dvh — defeating the header-height trim above and
   leaving ~header-height of phantom scroll on short admin pages. Pin the sticky
   sidebar below the header and shrink it to the same trimmed height, so the
   grid row matches the drawer and the dead-scroll disappears. */
@media (min-width: 1024px) {
  .drawer.lg\:drawer-open:has(.admin-sidebar) > .drawer-side {
    top: var(--app-header-h, 4rem);
    height: calc(100dvh - var(--app-header-h, 4rem));
  }
}

/* Turbo-frame loading state. The Sessions table swaps in place when filtering by
   DSP / scope / paging; Turbo sets [busy] on the frame during the fetch. Dim it
   and run a thin indeterminate bar across the top so the swap reads as "working"
   instead of a dead click. */
#billing-table-area {
  position: relative;
}
#billing-table-area[busy] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
#billing-table-area[busy]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--color-primary, #2e7d52);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  #billing-table-area[busy]::after {
    animation: billing-frame-load 1s ease-in-out infinite;
  }
}
@keyframes billing-frame-load {
  0%   { transform: scaleX(0); opacity: 1; }
  50%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Live (currently clocked-in) session indicator — Billing Dashboard (card #290).
   A solid green core with a soft halo that pulses outward. Green = #16A34A. */
.live-dot {
  position: relative;
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
}
.live-dot__core {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #16a34a;
}
.live-dot__halo {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #16a34a;
  opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot__halo {
    animation: live-dot-pulse 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
}
@keyframes live-dot-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* "LIVE" pill sitting where the billing-status chip normally goes. */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1rem;
  color: #16a34a;
  background: color-mix(in oklab, #16a34a 14%, transparent);
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}

/* Tom Select styling to match daisyUI input-bordered */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border-radius: 3rem !important;
  border: 2px solid color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
  background-color: transparent !important;
  min-height: 2.5rem !important;
  box-shadow: 0 1px color-mix(in oklab, color-mix(in oklab, var(--color-base-content) 20%, transparent) calc(var(--depth, 1) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth, 1) * 0.1)) inset !important;
}

.ts-wrapper.single .ts-control:focus,
.ts-wrapper.multi .ts-control:focus,
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--color-primary) calc(var(--depth, 1) * 10%), transparent) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth, 1) * 0.1)) inset !important;
}

.ts-wrapper.single .ts-control input,
.ts-wrapper.multi .ts-control input {
  color: var(--color-base-content) !important;
}

.ts-wrapper.multi .ts-control > div {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-radius: 3rem !important;
  padding: 0.125rem 0.5rem !important;
  margin: 0 0.125rem 0.125rem 0 !important;
  border: 0 solid transparent !important;
}

/* Hide spinner arrows on number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Enhanced spacing for markdown prose content */
.prose h3 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.prose h4 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.prose h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.prose h6 {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.prose p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.prose ul,
.prose ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose strong {
  font-weight: 600;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose > *:last-child {
  margin-bottom: 0;
}

/* Better spacing for lists */
.prose ul + p,
.prose ol + p,
.prose p + ul,
.prose p + ol {
  margin-top: 1rem;
}

/* Line breaks should create visual separation */
.prose br {
  margin-bottom: 0.5rem;
}

/* Flatpickr styling to match daisyUI theme */
.flatpickr-calendar {
  background: var(--color-base-100) !important;
  border: 1px solid var(--color-base-300) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.flatpickr-months {
  background: var(--color-base-200) !important;
  border-bottom: 1px solid var(--color-base-300) !important;
}

.flatpickr-month {
  color: var(--color-base-content) !important;
}

.flatpickr-current-month {
  color: var(--color-base-content) !important;
}

.flatpickr-weekdays {
  background: var(--color-base-200) !important;
}

.flatpickr-weekday {
  color: var(--color-base-content) !important;
}

.flatpickr-day {
  color: var(--color-base-content) !important;
}

.flatpickr-day:hover {
  background: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

.flatpickr-day.selected {
  background: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
}

.flatpickr-day.today {
  border-color: var(--color-primary) !important;
}

.flatpickr-time {
  border-top: 1px solid var(--color-base-300) !important;
}

.flatpickr-time input {
  color: var(--color-base-content) !important;
}

.flatpickr-time .flatpickr-time-separator {
  color: var(--color-base-content) !important;
}

/* Toggle field visibility - JavaScript will handle this, but this ensures fields show when checkbox is checked on page load */
.toggle-field-container input[type="checkbox"]:checked ~ .toggle-field-target.hidden {
  display: block !important;
}

/* PWA install banner — safe area padding for iOS home indicator */
.safe-bottom {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Simple Calendar styling to work with daisyUI */
.simple-calendar {
  width: 100%;
}

.simple-calendar table {
  width: 100%;
  border-collapse: collapse;
}

.simple-calendar td {
  vertical-align: top;
  position: relative;
}

/* Relief Care (card #449) — its own purple wherever a shift shows its service.
   CEN takes blue on the Clock In sheet. */
:root {
  --color-relief: #6d28d9;
  --color-relief-soft: #ede9fe;
  --color-relief-wash: #f5f3ff;
  --color-cen: #0369a1;
  --color-cen-wash: #f0f9ff;
}

/* Clock In sheet: the grabber a phone shows at the top of a bottom sheet. */
.clock-in-grabber {
  width: 2.5rem;
  height: 0.25rem;
  margin: -0.5rem auto 1rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

/* Clock In sheet steps (card #449): who the DSP is with, then the service. */
.clock-in-sheet__step {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}

/* Each client keeps one of six colors (card #449): their row, photo ring and
   name all wear it, so a DSP finds the right client at a glance. */
[data-client-color="0"] { --client-color: #e4572e; }
[data-client-color="1"] { --client-color: #0f766e; }
[data-client-color="2"] { --client-color: #b45309; }
[data-client-color="3"] { --client-color: #be185d; }
[data-client-color="4"] { --client-color: #8b5e34; }
[data-client-color="5"] { --client-color: #475569; }

/* Big rows with room between them, so an unsteady tap lands on the right one. */
.clock-in-clients {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.clock-in-client {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.125rem;
  border: 2.5px solid color-mix(in oklab, var(--client-color) 50%, transparent);
  border-radius: 1.375rem;
  background: color-mix(in oklab, var(--client-color) 8%, var(--color-base-100));
  text-align: left;
  cursor: pointer;

  &:hover { border-color: var(--client-color); }
  &:focus-visible { outline: 3px solid var(--client-color); outline-offset: 2px; }
}
.clock-in-client__who {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.clock-in-client__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.clock-in-client__name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--client-color);
}
.clock-in-client__place {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
.clock-in-client__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* A client's photo ringed in their color, or their initials on it. */
.clock-in-avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border: 3px solid var(--client-color);
  border-radius: 9999px;
  background: var(--client-color);
  color: #fff;
  font-size: 1.375rem;
  font-weight: 600;

  img { width: 100%; height: 100%; object-fit: cover; }
}

/* The client picked on step 1, carried onto step 2 in their color. */
.clock-in-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 0.875rem;
  border: 2px solid color-mix(in oklab, var(--client-color) 35%, transparent);
  border-radius: 1.125rem;
  background: color-mix(in oklab, var(--client-color) 8%, var(--color-base-100));

  strong { font-size: 1rem; font-weight: 800; color: var(--client-color); }
  .clock-in-avatar { width: 2.5rem; height: 2.5rem; border-width: 2px; font-size: 0.875rem; }
  .clock-in-client__place { padding-bottom: 0; }
}

/* The sheet takes focus when it opens, so no client looks picked. */
.clock-in-sheet:focus { outline: none; }

/* Cancel and Clock In are soft, round pills on the sheet. */
.clock-in-sheet__button { min-height: 3rem; border-radius: 9999px; }

.clock-in-services {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each service keeps its own color on the Clock In sheet — Attendant Care
   green, Relief Care lavender, CEN blue — so they read apart at a glance. */
.clock-in-service {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid color-mix(in oklab, var(--service-color) 25%, var(--color-base-100));
  border-radius: 1.125rem;
  background: var(--service-soft);
  cursor: pointer;

  .radio { margin-top: 0.125rem; color: var(--service-color); border-color: color-mix(in oklab, var(--service-color) 45%, var(--color-base-100)); }
  .clock-in-service__title { color: var(--service-color); }

  &:has(:checked) {
    border-color: var(--service-color);
    box-shadow: inset 0 0 0 1px var(--service-color);

    .radio { border-color: var(--service-color); }
  }
}
.clock-in-service--attendant {
  --service-color: #15803d;
  --service-soft: #f0fdf4;
}
.clock-in-service--relief {
  --service-color: var(--color-relief);
  --service-soft: var(--color-relief-wash);
}
.clock-in-service--cen {
  --service-color: var(--color-cen);
  --service-soft: var(--color-cen-wash);
}
.clock-in-service[hidden] { display: none; }

/* Clock In takes the color of the service it starts. */
.clock-in-submit {
  --service-color: #15803d;
  background: var(--service-color);
  border-color: var(--service-color);
  color: #fff;
}
.clock-in-sheet:has(input[value="relief_care"]:checked) .clock-in-submit { --service-color: var(--color-relief); }
.clock-in-sheet:has(input[value="cen"]:checked) .clock-in-submit { --service-color: var(--color-cen); }
.clock-in-service__title {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Relief Care days on the Clock In sheet: how many whole days, and when the
   last one ends (card #449). */
.clock-in-days {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.625rem;
}
.clock-in-days__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--color-relief) 25%, var(--color-base-100));
  border-radius: 0.5rem;
  background: var(--color-base-100);

  button, output {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.125rem;
  }
  button { color: var(--color-relief); font-size: 1rem; cursor: pointer; }
  button:disabled { opacity: 0.35; cursor: default; }
  output { font-weight: 600; color: var(--color-base-content); }
}
.clock-in-days__ends { color: var(--color-relief); }
.clock-in-service:not(:has(:checked)) :is(.clock-in-days, .clock-in-days__ends) { display: none; }

/* The DSP's running Relief Care stay (card #449): no Clock Out, just the day
   it's on, when it ends, and Add 1 day / End early. */
.relief-care-stay {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 28rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--color-relief) 25%, var(--color-base-100));
  border-radius: 0.75rem;
  background: var(--color-relief-wash);
  text-align: left;
}
.relief-care-stay__day {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-relief);
}
.relief-care-stay__add {
  background: var(--color-relief);
  border-color: var(--color-relief);
  color: #fff;
}
.relief-care-stay__reason {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  cursor: pointer;

  &:has(:checked) { border-color: var(--color-base-content); }
}

/* Admin Billing: a Relief Care day that hasn't started yet, and the admin's
   End early / Void menu on a running stay (card #449). */
.relief-care-upcoming {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-relief);
  background: var(--color-relief-soft);
}
.relief-care-stay-actions {
  position: relative;
}
.relief-care-stay-actions__menu {
  position: absolute;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 14rem;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

/* A shift's end: the day it finished and the time (card #449). */
.session-end {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.5rem;
}

/* Admin Alerts (card #449): amber for what's waiting on an admin. */
:root {
  --color-admin-alert: #b45309;
  --color-admin-alert-wash: #fef3c7;
  --color-admin-alert-line: #f2c66d;
}
.admin-alerts-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  background: var(--color-admin-alert);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.admin-alerts-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--color-admin-alert-line);
  border-radius: 1rem;
  background: var(--color-admin-alert-wash);
}
.admin-alerts-card__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--color-admin-alert);
  color: #fff;
}
.admin-alerts-card__count {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-admin-alert);
}
.admin-alerts-card__review {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  background: var(--color-admin-alert);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}
/* An Admin Alerts group, in the export-3c "header band" treatment: a white
   card, its title and description in a tinted band, and its shifts as plain
   rows split by a hairline. */
.admin-alert-group {
  --admin-alert-border: #e6e0d6;
  --admin-alert-hairline: #efeae1;
  --admin-alert-heading: #15302e;
  --admin-alert-strong: #33474a;
  --admin-alert-muted: #8a938f;
  --admin-alert-day: #fbefd3;
  --admin-alert-day-ink: #8a5a12;

  overflow: hidden;
  border: 1px solid var(--admin-alert-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgb(20 40 38 / 0.06), 0 1px 2px rgb(20 40 38 / 0.04);
  color: #5c6b6a;
}
.admin-alert-group__head {
  padding: 1.5rem 2rem 1.25rem;
  border-bottom: 1px solid var(--admin-alert-border);
  background: #f7f4ef;
}
.admin-alert-group__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--admin-alert-heading);
}
.admin-alert-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: #e0a93b;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
}
.admin-alert-group__description { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.5; }
.admin-alert-group__empty { padding: 1.5rem 2rem; }

.admin-alert {
  padding: 1.375rem 2rem 1.5rem;

  & + & { border-top: 1px solid var(--admin-alert-hairline); }
}
.admin-alert__client { font-size: 1.125rem; font-weight: 700; color: var(--admin-alert-heading); }
.admin-alert__dsp { margin-top: 0.125rem; font-size: 0.875rem; color: var(--admin-alert-muted); }
.admin-alert__body {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.admin-alert__day {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: var(--admin-alert-day);
}
.admin-alert__day-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--admin-alert-day-ink);
}
.admin-alert__day-date { font-size: 0.9375rem; font-weight: 700; color: var(--admin-alert-heading); }
.admin-alert__day-time { font-size: 0.875rem; color: var(--admin-alert-strong); font-variant-numeric: tabular-nums; }
.admin-alert__join-form { flex: none; margin-left: 0.5rem; }
.admin-alert__join {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 0.5rem;
  background: #2e7d52;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1);

  svg { width: 1.125rem; height: 1.125rem; }
  &:hover { background: #226b46; }
  &:active { background: #1b6b43; transform: translateY(0.5px); }
}

@media (max-width: 720px) {
  .admin-alert-group__head, .admin-alert, .admin-alert-group__empty { padding-left: 1.125rem; padding-right: 1.125rem; }
  .admin-alert__body { flex-direction: column; align-items: stretch; }
  .admin-alert__join-form { margin-left: 0; }
  .admin-alert__join { width: 100%; justify-content: center; }
}

/* A billing row's session type (card #449): one pill per row, each service in
   its own color with its own icon. */
.session-type {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.session-type--attendant-care { color: #15803d; background: #f0fdf4; }
.session-type--relief-care { color: var(--color-relief); background: var(--color-relief-soft); }
.session-type--cen { color: var(--color-cen); background: #e0f2fe; }

/* Billing on a phone (card #449): a card per shift in text big enough for an
   older reader, the checkbox alone in the top right corner, and chips that
   wrap — the session type last, so it is the one that moves down. */
.billing-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
/* White with a clear edge, so the checkbox stands out from the card. */
.billing-card__top .checkbox {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #8a8378;
  background-color: #fff;

  &:checked { border-color: var(--color-primary); background-color: var(--color-primary); }
}
.billing-card__name {
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-base-content);
}
.billing-card__severity {
  margin-top: 0.5rem;

  > span { padding: 0.3125rem 0.75rem; font-size: 0.9375rem; }
}
.billing-card__dsp {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: #4b5563;
}
.billing-card__times {
  margin: 0.5rem 0 0.375rem;
  font-size: 0.9375rem;
  color: #4b5563;
}
.billing-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;

  .session-type { padding: 0.5rem 0.75rem; font-size: 0.9375rem; gap: 0.375rem; }
  .session-type svg { width: 1rem; height: 1rem; }
  .session-type--attendant-care { color: #166534; }
  .session-type--relief-care { color: #5b21b6; }
  .session-type--cen { color: #075985; }
}
.billing-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.billing-chip--neutral { color: #1f2937; background: var(--color-base-100); border: 1px solid var(--color-base-300); }
.billing-chip--good { color: #166534; background: #dcfce7; }
.billing-chip--warn { color: #92400e; background: #fef3c7; }
.billing-chip--info { color: var(--color-info); background: color-mix(in oklab, var(--color-info) 10%, transparent); }

/* A phone card's flags read as easily as its chips: 15px, darker text. */
.billing-flag {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.billing-flag--blocker { color: #b91c1c; background: #fdecea; border-color: #f2b8b0; }
.billing-flag--warning { color: #92400e; background: #fef3c7; border-color: #f2c66d; }

/* The phone card's buttons keep their size but read at 15px like the rest of
   the card: less padding and icon gap make the room the bigger text needs. */
.billing-card__actions .btn {
  padding-inline: 0.375rem;
  gap: 0.25rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}
/* Each button as wide as its label needs, sharing what is left — so "Send
   back" never wraps onto two lines. */
.billing-card__actions.billing-card__actions > * { flex: 1 1 auto; min-width: 0; }
/* The narrowest phones step down a point rather than squeeze a label. */
@media (max-width: 374px) {
  .billing-card__actions .btn { font-size: 0.875rem; }
}

/* A live Relief Care card's menu on a phone: a full-width button with a
   15px label, its menu opening full width beneath it. */
.billing-card__live-actions {
  margin-top: 0.5rem;

  .relief-care-stay-actions summary {
    width: 100%;
    height: 2.5rem;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  .relief-care-stay-actions__menu { left: 0; right: 0; width: auto; }
}