/* ═══════════════════════════════════════════════════════════════════
   AuBurn CORE — Master Stylesheet (page-specific rules)
   Load order in _Layout.cshtml:
     1. bootstrap.min.css
     2. datatables-bs5/dataTables.bootstrap5.min.css  (auth only)
     3. site.css        ← this file
     4. tokens.css      ← semantic --core-* tokens, light/dark/auto themes
     5. components.css  ← the .core-* component layer (shell, cards, tables)
     6. bootstrap-icons
     7. font-awesome

   All COLOUR comes from the --core-* tokens in tokens.css — never write a
   raw hex here. This file holds page-specific structure and the theme-compat
   shims that retire as views finish migrating to .core-* components.
═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. BASE
───────────────────────────────────────────────────────────────── */

/* ── Workflow step bubble (read-only / non-manager view) ──────── */
.workflow-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--core-line-strong);
    background: transparent;
    color: transparent;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.workflow-bubble-done {
    background: var(--core-accent);
    border-color: var(--core-accent);
    color: var(--core-accent-ink);
}
.workflow-bubble.workflow-bubble-lit {
    /* transient class added by JS during live toggle */
    background: var(--core-accent);
    border-color: var(--core-accent);
    color: var(--core-accent-ink);
}
html {
  font-size: 14px;
  height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* ─────────────────────────────────────────────────────────────────
   2. BOOTSTRAP ROOT VARIABLE OVERRIDES
   Moved to tokens.css — the semantic token layer owns all theming.
───────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────
   3. BUTTONS
───────────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  #00A896;
  --bs-btn-border-color:        #00A896;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #008B8B;
  --bs-btn-hover-border-color:  #008B8B;
  --bs-btn-focus-shadow-rgb:    0, 168, 150;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #005F73;
  --bs-btn-active-border-color: #005F73;
  --bs-btn-disabled-color:      #fff;
  --bs-btn-disabled-bg:         #00A896;
  --bs-btn-disabled-border-color: #00A896;
}

.btn-success {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  #008B8B;
  --bs-btn-border-color:        #008B8B;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #005F73;
  --bs-btn-hover-border-color:  #005F73;
  --bs-btn-focus-shadow-rgb:    0, 139, 139;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #005F73;
  --bs-btn-active-border-color: #005F73;
  --bs-btn-disabled-color:      #fff;
  --bs-btn-disabled-bg:         #008B8B;
  --bs-btn-disabled-border-color: #008B8B;
}

.btn-info {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  #005F73;
  --bs-btn-border-color:        #005F73;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #003366;
  --bs-btn-hover-border-color:  #003366;
  --bs-btn-focus-shadow-rgb:    0, 95, 115;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #003366;
  --bs-btn-active-border-color: #003366;
  --bs-btn-disabled-color:      #fff;
  --bs-btn-disabled-bg:         #005F73;
  --bs-btn-disabled-border-color: #005F73;
}

.btn-outline-primary {
  --bs-btn-color:               #00A896;
  --bs-btn-border-color:        #00A896;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #00A896;
  --bs-btn-hover-border-color:  #00A896;
  --bs-btn-focus-shadow-rgb:    0, 168, 150;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #008B8B;
  --bs-btn-active-border-color: #008B8B;
}

.btn-outline-success {
  --bs-btn-color:               #008B8B;
  --bs-btn-border-color:        #008B8B;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #008B8B;
  --bs-btn-hover-border-color:  #008B8B;
  --bs-btn-focus-shadow-rgb:    0, 139, 139;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #005F73;
  --bs-btn-active-border-color: #005F73;
}

.btn-outline-info {
  --bs-btn-color:               #005F73;
  --bs-btn-border-color:        #005F73;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #005F73;
  --bs-btn-hover-border-color:  #005F73;
  --bs-btn-focus-shadow-rgb:    0, 95, 115;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #003366;
  --bs-btn-active-border-color: #003366;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0, 168, 150, 0.35);
}


/* ─────────────────────────────────────────────────────────────────
   4. UTILITY OVERRIDES  (bg, text, badge, links, pagination)
───────────────────────────────────────────────────────────────── */
/* Brand colour utilities (.bg-primary, .text-info, links, pagination) are no
   longer overridden here: tokens.css re-points Bootstrap's own variables
   (--bs-primary-rgb, --bs-link-color, …) per theme, so the stock utilities now
   follow the brand in light AND the readable ramp in dark. The old hex
   overrides carried !important and pinned dark mode to fail-contrast colours. */

.page-item.active .page-link {
  background-color: var(--core-accent);
  border-color: var(--core-accent);
  color: var(--core-accent-ink);
}

.table-dark {
  --bs-table-bg: var(--core-navy-800);
}

/* ── Theme-compat shims ──────────────────────────────────────────
   Bootstrap compiles some utility colours as literals, so tokens.css cannot
   re-point them. These shims make every existing usage theme-aware without
   touching the views. They retire screen-by-screen as views migrate to
   .core-* components (phases 4–5 of the design refresh). */
.text-dark { color: var(--core-ink) !important; }

.btn-light {
  --bs-btn-color:              var(--core-ink);
  --bs-btn-bg:                 var(--core-surface-2);
  --bs-btn-border-color:       var(--core-line);
  --bs-btn-hover-color:        var(--core-ink);
  --bs-btn-hover-bg:           var(--core-surface-3);
  --bs-btn-hover-border-color: var(--core-line-strong);
  --bs-btn-active-color:       var(--core-ink);
  --bs-btn-active-bg:          var(--core-surface-3);
  --bs-btn-active-border-color: var(--core-line-strong);
}

.table-secondary {
  --bs-table-bg:    var(--core-surface-3);
  --bs-table-color: var(--core-ink);
  --bs-table-border-color: var(--core-line-strong);
}
.table-info {
  --bs-table-bg:    var(--core-info-quiet);
  --bs-table-color: var(--core-ink);
  --bs-table-border-color: var(--core-line-strong);
}
.table-warning {
  --bs-table-bg:    var(--core-warn-quiet);
  --bs-table-color: var(--core-ink);
  --bs-table-border-color: var(--core-line-strong);
}

.list-group-item-secondary {
  background-color: var(--core-surface-3);
  color: var(--core-ink-2);
}

/* Status fills lighten in dark mode (tokens re-point --bs-*-rgb), so white
   text on them fails there. --core-accent-ink is "ink on a bright fill":
   white in light, near-black in dark — no visual change in light mode. */
.text-white.bg-primary, .text-white.bg-success,
.text-white.bg-info,    .text-white.bg-danger {
  color: var(--core-accent-ink) !important;
}

/* A yellow fill wants dark text in BOTH themes; the .text-dark shim above
   would flip it to near-white ink in dark mode. */
.text-dark.bg-warning { color: #212529 !important; }


/* ─────────────────────────────────────────────────────────────────
   5. FORM CONTROLS
───────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0, 168, 150, 0.35);
  border-color: #00A896;
}

.form-check-input:checked {
  background-color: #00A896;
  border-color: #00A896;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* (Section 6 SB-ADMIN LAYOUT deleted - the .core-app shell in components.css replaced it) */
/* ─────────────────────────────────────────────────────────────────
   7. MAIN CONTENT AREA
───────────────────────────────────────────────────────────────── */
main {
  padding-top: 2rem;
}

.card {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
  border: none;
  margin-bottom: 1.5rem;
}

.table-responsive {
  border-radius: 0.35rem;
}

/* Out-of-month calendar cells */
.rx-day-overflow {
  opacity: 0.35;
  background-color: var(--core-canvas);
  font-style: italic;
  cursor: default;
  user-select: none;
}


/* ─────────────────────────────────────────────────────────────────
   8. DATATABLES
───────────────────────────────────────────────────────────────── */
table.dataTable tbody tr:hover {
  background-color: rgba(0, 168, 150, 0.06);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--core-line-strong);
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  margin-left: 0.5rem;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--core-line-strong);
  border-radius: 0.25rem;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  margin: 0 0.5rem;
}

table.dataTable thead th {
  border-bottom: 2px solid var(--core-line-strong);
}


/* ─────────────────────────────────────────────────────────────────
   9. USER DROPDOWN / NAVBAR
───────────────────────────────────────────────────────────────── */
.navbar-nav .dropdown-menu {
  position: absolute;
  right: 0;
  left: auto;
}

.dropdown-header {
  color: var(--core-ink-3);
  font-weight: 600;
  padding: 0.5rem 1rem;
}

.dropdown-item form {
  margin: 0;
}

.dropdown-item form button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: var(--core-surface-3);
}

.nav-link .fa-user {
  font-size: 1.2rem;
}


/* ─────────────────────────────────────────────────────────────────
   10. INLINE-FORM UTILITIES
       Replaces scattered style="" attributes in views
───────────────────────────────────────────────────────────────── */
.form-inline-action {
  display: inline;
}

.route-parent {
  cursor: pointer;
}

/* Reserves a DataTables list's height while it initializes, so server-rendered rows
   collapsing down to one page does not shove the rest of the page around. The table is
   revealed in a single step from initComplete. */
.dt-shell > .dataTables_wrapper,
.dt-shell > table {
  visibility: hidden;
}

.dt-shell {
  min-height: 420px;
}

.dt-shell.dt-shell-ready {
  min-height: 0;
}

.dt-shell.dt-shell-ready > .dataTables_wrapper,
.dt-shell.dt-shell-ready > table {
  visibility: visible;
}

.dt-shell.dt-shell-ready > .dt-shell-spinner {
  display: none;
}

/* Workflow step chips.
   A dashboard card can now be any width from a quarter row to a full one, so the chips size
   against the CARD rather than the viewport. auto-fill + minmax fits as many ~110px chips as
   actually fit and wraps the rest — no breakpoints to keep in sync with the card size. */
.workflow-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}

/* Completed step tile — accent fill with ink-on-fill text, replacing the old
   inline #1a7a7a set from both Razor and the SignalR handler. */
.workflow-step-tile.workflow-step-done { background-color: var(--core-accent); }
.workflow-step-tile.workflow-step-done label { color: var(--core-accent-ink); }

/* Mono completion stamp on a done chip (server-rendered and via SignalR) */
.workflow-step-time {
    font: 400 .625rem/1 var(--core-font-mono);
    color: var(--core-accent-ink);
    opacity: .75;
    white-space: nowrap;
}

/* Dashboard Drugdle card.
   Deliberately its own namespace rather than reusing .drugdle-* from Views/Drugdle/Index.cshtml:
   that page declares its styles in an @section Styles block a partial cannot emit, and its
   board is sized for a 640px column. These rules size everything from --dgc-tile, which the
   card's script computes from the board's own width, so the board fits whatever card size the
   user picked. Tile colours intentionally match the full game — Wordle convention beats the
   brand palette here. */
.drugdle-card {
  --dgc-correct: #5a9c53;
  --dgc-present: #c4a72c;
  --dgc-absent:  #787c7e;
  --dgc-tile: 40px;
}

[data-bs-theme="dark"] .drugdle-card {
  --dgc-correct: #538d4e;
  --dgc-present: #b59f3b;
  --dgc-absent:  #3a3a3c;
}

/* The board takes keyboard input only while focused, so it needs a visible focus ring. */
.drugdle-card-board:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.drugdle-card-board {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.drugdle-card-row {
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: center;
}

.drugdle-card-row.dgc-shake {
  animation: dgcShake 0.5s;
}

.drugdle-card-tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 52px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  font-size: min(1.35rem, calc(var(--dgc-tile) * 0.45));
  line-height: 1;
}

.drugdle-card-tile.dgc-filled { border-color: var(--bs-secondary-color); }
.drugdle-card-tile[data-state="2"] { background: var(--dgc-correct); border-color: var(--dgc-correct); color: #fff; }
.drugdle-card-tile[data-state="1"] { background: var(--dgc-present); border-color: var(--dgc-present); color: #fff; }
.drugdle-card-tile[data-state="0"] { background: var(--dgc-absent);  border-color: var(--dgc-absent);  color: #fff; }

.drugdle-card-keyboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.drugdle-card-krow {
  display: flex;
  gap: 3px;
  justify-content: center;
  width: 100%;
}

.drugdle-card-key {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  border-radius: 4px;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0;
}

.drugdle-card-key.dgc-wide { flex: 1.6; font-size: 0.62rem; }
.drugdle-card-key:active { transform: scale(0.94); }
.drugdle-card-key[data-state="2"] { background: var(--dgc-correct); color: #fff; }
.drugdle-card-key[data-state="1"] { background: var(--dgc-present); color: #fff; }
.drugdle-card-key[data-state="0"] { background: var(--dgc-absent);  color: #fff; }

@keyframes dgcShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* Customize-dashboard list: drag handle affordance for the card reorder rows. */
.dashboard-card-row {
  cursor: default;
}

.dashboard-card-grip {
  cursor: grab;
}

.dashboard-card-row:active .dashboard-card-grip {
  cursor: grabbing;
}

.print-actions {
  margin-top: 30px;
  text-align: center;
}

.print-actions button {
  padding: 10px 20px;
  font-size: 14pt;
  cursor: pointer;
  margin: 0 5px;
}


/* (Section 11 DARK MODE OVERRIDES removed - theming now lives in tokens.css) */
/* ─────────────────────────────────────────────────────────────────
   11. LOGIN PAGE  (body.login-page — unauthenticated)
───────────────────────────────────────────────────────────────── */
/* 2a design: the animated gradient and floating white card are retired in
   favour of the .core-login split screen (components.css §10). */
body.login-page {
  background: var(--core-canvas);
  color: var(--core-ink);
  min-height: 100vh;
  display: block;
}

.logo-container {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-container img {
  max-width: 280px;
  height: auto;
}

/* The login brand panel carries "AuBurn CORE" as its wordmark, so repeating it under
   the logo is redundant. That panel is hidden below 900px, though, and the logo image
   itself reads "AuBurn Long Term Care" — so the title comes back at narrow widths,
   otherwise the product name disappears entirely on a phone. */
.app-title {
  display: none;
  text-align: center;
  color: var(--core-accent-text);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .app-title { display: block; }
}

.welcome-text {
  text-align: center;
  color: var(--core-ink);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.015em;
  margin-bottom: 2rem;
}

.form-floating > label {
  color: var(--core-ink-2);
}

.btn-login {
  background-color: var(--core-accent);
  border-color: var(--core-accent);
  border-radius: var(--core-r-pill);
  color: var(--core-accent-ink);
  font-weight: 650;
  padding: 0.65rem;
  font-size: .9375rem;
  transition: all 0.3s ease;
}

.btn-login:hover {
  background-color: var(--core-accent-text);
  border-color: var(--core-accent-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 139, 139, 0.3);
}

.link-secondary {
  color: var(--core-accent-text);
  text-decoration: none;
}

.link-secondary:hover {
  color: var(--core-info);
  text-decoration: underline;
}

.bottom-links {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--core-ink-2);
}

.validation-summary-errors {
  background-color: var(--core-danger-quiet);
  color: var(--core-danger);
  border: 1px solid var(--core-danger);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}


/* ─────────────────────────────────────────────────────────────────
   12. SCHEDULE PAGE  (Views/Schedule/Index.cshtml)
───────────────────────────────────────────────────────────────── */
.sched-card {
  background: var(--core-surface);
  border: 1px solid var(--core-line);
  border-radius: var(--core-r);
  box-shadow: var(--core-shadow);
  overflow: hidden;
}

/* 2a design: the navy gradient toolbar becomes a neutral card header. */
.sched-toolbar {
  background: var(--core-surface-2);
  border-bottom: 1px solid var(--core-line);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sched-week-label {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--core-ink);
}

.sched-wrap {
  overflow-x: auto;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--core-surface);
}

.sched-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 860px;
  font-size: 0.78rem;
}

.sched-table th,
.sched-table td {
  border: 1px solid var(--core-line-strong);
  vertical-align: middle;
}

.sched-day-header {
  background: var(--core-surface-2);
  color: var(--core-ink);
  text-align: center;
  font-weight: 650;
  font-size: 0.8rem;
  padding: 8px 4px 6px;
  letter-spacing: 0.02em;
}

.sched-day-header.sched-day-today {
  background: linear-gradient(var(--core-accent-quiet), var(--core-accent-quiet)) var(--core-surface);
  color: var(--core-accent-text);
}

.sched-day-header .day-date {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--core-ink-3);
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.sched-day-header.sched-day-today .day-date { color: var(--core-accent-text); }

.sched-slot-header {
  background: var(--core-accent-quiet);
  color: var(--core-accent-text);
  text-align: center;
  font-weight: 600;
  font-size: 0.66rem;
  padding: 4px 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sched-table tbody tr:nth-child(odd)  td.sched-cell { background: var(--core-surface); }
.sched-table tbody tr:nth-child(even) td.sched-cell { background: var(--core-surface-2); }
.sched-table tbody tr:hover           td.sched-cell { background: var(--core-accent-quiet); }

.sched-select {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-size: 0.75rem;
  cursor: pointer;
  outline: none;
  padding: 3px 2px;
  color: var(--core-ink);
  appearance: none;
  -webkit-appearance: none;
}

/* Quiet select: invisible until touched, so 210 dropdowns don't read as 210 boxes */
.sched-select:hover {
  border-color: var(--core-line-strong);
  background: var(--core-surface);
}

.sched-select:focus {
  background: var(--core-surface);
  border: 1px solid var(--core-accent);
  border-radius: 3px;
  box-shadow: var(--core-focus);
}

/* Save-state chip — sits on the neutral card header now, not on navy */
.sched-saving { color: var(--core-ink-3);        font-size: 0.72rem; }
.sched-saved  { color: var(--core-accent-text);  font-size: 0.72rem; }
.sched-error  { color: var(--core-danger);       font-size: 0.72rem; }

.print-title,
.print-subtitle {
  display: none;
}

@page {
  size: landscape;
  margin: 0.35in 0.3in;
}

@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }

  #printArea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .sched-card    { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
  .sched-wrap    { padding: 0 !important; overflow: visible !important; }
  .sched-toolbar { display: none !important; }

  .sched-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 6.5pt !important;
    border-collapse: collapse !important;
  }

  .sched-table th,
  .sched-table td {
    border: 0.5pt solid #888 !important;
    padding: 1.5pt 2pt !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* Paper is light regardless of the on-screen theme. */
  .sched-table td.sched-cell { background: #fff !important; }
  .sched-select,
  .sched-day-header, .sched-day-header .day-date,
  .sched-slot-header { color: #000 !important; }
  .sched-day-header, .sched-slot-header { background: #e9eff2 !important; }
  .sched-card { background: #fff !important; }

  .sched-table tbody tr { height: auto !important; }
  .sched-cell { height: auto !important; }

  .sched-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 6.5pt !important;
    padding: 0 !important;
    pointer-events: none;
    width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .sched-day-header,
  .sched-slot-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 7pt !important;
    padding: 3pt 2pt !important;
  }

  .sched-table tbody tr:nth-child(odd)  td.sched-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sched-table tbody tr:nth-child(even) td.sched-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .print-title    { display: block !important; text-align: center; font-size: 11pt; font-weight: 700; margin-bottom: 3pt; color: #005F73; }
  .print-subtitle { display: block !important; text-align: center; font-size: 8pt; color: #555; margin-bottom: 5pt; }
}

/* ── Daily Rx Calendar ─────────────────────────────────── */
.rx-calendar {
    table-layout: fixed;
    width: 100%;
}

/* 2a design: weekday headers are uppercase micro-labels on the surface,
   not a colour bar; today gets the accent tint + border. */
.rx-calendar thead th {
    background: var(--core-surface);
    color: var(--core-ink-3);
    font: 600 0.65625rem/1.2 var(--core-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--core-line);
}

.rx-day-cell.rx-day-today {
    background: linear-gradient(var(--core-accent-quiet), var(--core-accent-quiet)) var(--core-surface);
    box-shadow: inset 0 0 0 1px var(--core-accent);
}

.rx-week-total {
    background: var(--core-info-quiet);
    font-variant-numeric: tabular-nums;
}

/* 7 day columns share equal width; Wk Total gets a narrower fixed slice */
.rx-calendar th:not(:last-child),
.rx-calendar td:not(:last-child) {
    width: calc(100% / 8);   /* 7 days + 1 wk-total column */
}

.rx-calendar th:last-child,
.rx-calendar td:last-child {
    width: calc(100% / 8);
}

.rx-calendar th,
.rx-calendar td {
    overflow: hidden;
    padding: 4px !important;
    vertical-align: top;
}

/* All data rows share a consistent baseline height;
   height on tr acts as min-height — row still grows if cycles overflow */
.rx-calendar tbody tr {
    height: 72px;
}

/* When the table is inside a flex-grown container, stretch to fill it */
.rx-calendar-fill {
    height: 100%;
}

.rx-calendar-fill tbody {
    height: 100%;           /* tbody fills the table */
}

.rx-calendar-fill tbody tr {
    height: 90px;           /* fixed row height — matches cell min-height */
}

.rx-day-cell {
    position: relative;
    padding: 0 !important;  /* inner div owns the padding */
    overflow: hidden;
    min-height: 90px;       /* consistent cell height regardless of badge count */
    height: 90px;
}

/* Absolutely-fill the td — this div is what actually clips content */
.rx-cell-inner {
    position: absolute;
    inset: 0;
    padding: 4px 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* date top-left, Rx count + pencil top-right */
.rx-cell-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 20px;           /* fixed single-line top row */
    margin-bottom: 3px;
    flex-shrink: 0;
}

.rx-cell-count-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
}

.rx-cell-day {
    font-size: 0.7rem;
    color: var(--core-ink-3);
    font-weight: 500;
    line-height: 1;
}

.rx-cell-count {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}

/* stacked cycle badges — flex-grows to fill remaining inner-div space, scrolls if needed */
.rx-cell-cycles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-height: 0;          /* required for flex children to scroll */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.rx-cycle-badge {
    font-size: 0.62rem;     /* fixed — does not scale with cell size */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.3;
    padding: 2px 3px;
    border-radius: 3px;
    width: 100%;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;         /* badges never compress — container scrolls instead */
}

/* pencil sits inline with the count via rx-cell-count-wrap flex gap */

/* (duplicate .rx-day-overflow removed — the tokenised rule in section 7 wins) */

/* ── Cycle Schedule (agenda list) ───────────────────────────────────────── */
/* Day header stays put while scrolling its own block of cycles.
   Needs an opaque token ground since rows pass beneath it; today gets the
   accent tint per the 2a design. (bg comes from here, not a utility class.) */
.cycle-day-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--core-surface-2) !important;
}

.cycle-day-header.cycle-day-today {
    /* accent-quiet is translucent; layering it over the opaque surface keeps
       rows from showing through the sticky header while scrolling */
    background: linear-gradient(var(--core-accent-quiet), var(--core-accent-quiet)) var(--core-surface) !important;
}

/* ── Cycle badge department + type colours ──────────────────────────────── */
/* Department fills come from the --core-cyc-* tokens (lighter in dark mode);
   --core-accent-ink is "ink on a bright fill" — white in light, near-black in
   dark — so the badge text stays readable on both ramps. */
/* Facility  — Start: green  | Delivery: red                                 */
.rx-badge-facility-start    { background-color: var(--core-cyc-facility-start);    color: var(--core-accent-ink); }
.rx-badge-facility-delivery { background-color: var(--core-cyc-facility-delivery); color: var(--core-accent-ink); }
/* Control   — Start: purple | Delivery: blue                                */
.rx-badge-control-start    { background-color: var(--core-cyc-control-start);    color: var(--core-accent-ink); }
.rx-badge-control-delivery { background-color: var(--core-cyc-control-delivery); color: var(--core-accent-ink); }
/* Strip     — Start: pink   | Delivery: orange                              */
.rx-badge-strip-start    { background-color: var(--core-cyc-strip-start);    color: var(--core-accent-ink); }
.rx-badge-strip-delivery { background-color: var(--core-cyc-strip-delivery); color: var(--core-accent-ink); }

/* Department badge colours used in the Cycle Manager table */
.bg-purple { background-color: var(--core-cyc-control-start) !important; color: var(--core-accent-ink) !important; }
.bg-pink   { background-color: var(--core-cyc-strip-start)   !important; color: var(--core-accent-ink) !important; }

/* ==========================================================================
   IT ticketing — notification bell and kanban board
   ========================================================================== */

/* ── Notification bell dropdown ─────────────────────────────────────────── */

.notification-dropdown {
  width: 360px;
  max-width: calc(100vw - 1rem);
  padding: 0;
  overflow: hidden;
}

.notification-list {
  max-height: 420px;
  overflow-y: auto;
}

.notification-item {
  border-bottom: 1px solid var(--bs-border-color);
  color: inherit;
}

.notification-item:last-child { border-bottom: 0; }
.notification-item:hover      { background-color: var(--bs-tertiary-bg); }

/* Unread rows carry a tinted ground plus the dot below. Two cues, not one:
   the dot alone is easy to miss on a long list, and the tint alone reads as
   hover on touch devices where hover never clears. */
.notification-item.notification-unread {
  background-color: var(--core-accent-quiet);
}

/* min-width:0 is what lets the flex child actually wrap instead of forcing
   the dropdown wider than its declared width. */
.notification-text { min-width: 0; }

.notification-age {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.notification-dot {
  flex: 0 0 auto;
  align-self: center;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--core-accent);
}

/* ── Kanban board ───────────────────────────────────────────────────────── */

/* One horizontal scroller holding fixed-width columns. Fixed width rather than
   flex-fill: a column that shrinks as the board grows makes the cards unreadable
   exactly when there is the most to read. */
.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
}

/* 2a design: the column colour (admin-set ColorHex, bound as --col on the
   header and cards) stops being a full colour bar — it appears as a 9px dot
   in the header and a 3px top edge on each card, so the DB hex never has to
   pass a contrast check against text in either theme. */
.kanban-column {
  flex: 0 0 316px;
  max-width: 316px;
  background-color: var(--core-surface-2);
  border: 1px solid var(--core-line);
  border-radius: var(--core-r);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--core-line);
  border-radius: var(--core-r) var(--core-r) 0 0;
  background-color: var(--core-surface-2);
  color: var(--core-ink);
  font-size: .8125rem;
  font-weight: 650;
}

.kanban-column-header::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--col, var(--core-ink-3));
}

.kanban-column-count {
  margin-left: auto;
  background-color: var(--core-surface-3);
  color: var(--core-ink-2);
  border-radius: 10rem;
  padding: 0 .5rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.kanban-cards {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .625rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  /* Keeps a drop target the height of a card even when the column is empty,
     otherwise an empty column collapses to nothing and cannot be dropped on. */
  min-height: 90px;
}

.kanban-cards.kanban-dragover {
  background-color: var(--core-accent-quiet);
  outline: 2px dashed var(--core-accent);
  outline-offset: -4px;
  border-radius: .375rem;
}

.kanban-card {
  background-color: var(--core-surface);
  border: 1px solid var(--core-line);
  border-top: 3px solid var(--col, var(--core-line-strong));
  border-radius: var(--core-r-sm);
  padding: .625rem .75rem;
  box-shadow: var(--core-shadow-sm);
  cursor: grab;
  transition: box-shadow .15s ease, transform .15s ease;
}

.kanban-card:hover {
  box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}

.kanban-card:active { cursor: grabbing; }

.kanban-card.kanban-dragging {
  opacity: .45;
  transform: rotate(1.5deg);
}

.kanban-card-emergency {
  border-top-color: var(--core-danger) !important;
  background-color: var(--core-danger-quiet);
}

.kanban-card-title {
  font-weight: 600;
  font-size: .875rem;
}

.kanban-card-desc {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  word-break: break-word;
}

.kanban-card-meta {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* Arriving from a notification link: flash the card so the reason for the jump
   is obvious without hunting the board. */
@keyframes kanbanFocusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 150, 0); }
  25%, 75% { box-shadow: 0 0 0 .35rem rgba(0, 168, 150, .45); }
}

.kanban-card-focus {
  animation: kanbanFocusPulse 2.4s ease-in-out 2;
}

/* Column swatch on the Columns admin page and on ticket status badges. */
.ticket-status-badge {
  color: #fff;
  font-weight: 600;
}

.ticket-column-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: .25rem;
  border: 1px solid var(--bs-border-color);
  vertical-align: text-bottom;
}

/* The ticket screenshot: capped so a 4K capture does not push the page around,
   click-through opens the full image in its own tab. */
.ticket-screenshot {
  max-width: 100%;
  max-height: 420px;
  border-radius: .375rem;
  border: 1px solid var(--bs-border-color);
  cursor: zoom-in;
}

.ticket-comment {
  border-left: 3px solid var(--bs-border-color);
  padding-left: .75rem;
}

.ticket-comment-internal {
  border-left-color: var(--core-warn);
  background-color: var(--core-warn-quiet);
  padding: .5rem .75rem;
  border-radius: 0 .25rem .25rem 0;
}

/* Below the sidebar breakpoint the board would otherwise sit behind the
   collapsed nav's scroll gutter; shortening it keeps both usable. */
@media (max-width: 767.98px) {
  .kanban-column {
    flex: 0 0 85vw;
    max-width: 85vw;
    max-height: calc(100vh - 200px);
  }
}

/* ==========================================================================
   Audit Tracker — payer-audit kanban board and detail modal
   Reuses the kanban chrome above; only the columns, card contents and the
   modal are new. Every colour is a token; the three due-status buckets ride
   the global [data-tone] ok/warn/danger variables, plus "closed" below.
   ========================================================================== */

/* The muted tone: a closed record, and an open one at a stage that runs no clock
   (Outcome — the notice's due date stopped applying when the result came in).
   Two classes deep on purpose: site.css loads before components.css, whose bare
   [data-tone] rule would otherwise win and paint them in the accent. */
.audit-card[data-tone="closed"],
.audit-modal__due[data-tone="closed"],
.audit-swatch[data-tone="closed"] { --tone: var(--core-ink-3); --tone-quiet: var(--core-surface-3); }

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.audit-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
  margin-bottom: .875rem;
}

.audit-toolbar__search { position: relative; flex: 0 1 280px; min-width: 200px; }
.audit-toolbar__search > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--core-ink-3); font-size: .8125rem; pointer-events: none;
}
.audit-toolbar__search > input { padding-left: 30px; width: 100%; }

/* Segmented owner filter: links, so the state is a URL. */
.audit-seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--core-surface-3); border-radius: var(--core-r-sm);
}
.audit-seg__opt {
  padding: 5px 11px; border-radius: var(--core-r-xs);
  font-size: .75rem; font-weight: 600; color: var(--core-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: background var(--core-ease), color var(--core-ease);
}
.audit-seg__opt:hover { color: var(--core-ink); }
.audit-seg__opt.is-active { background: var(--core-surface); color: var(--core-ink); box-shadow: var(--core-shadow-sm); }

.audit-summary {
  margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  font-size: .75rem; color: var(--core-ink-2); white-space: nowrap;
}
.audit-summary b { font-size: .875rem; font-weight: 650; color: var(--core-ink); font-variant-numeric: tabular-nums; }
.audit-summary__mix { display: inline-flex; gap: .625rem; }
.audit-summary__mix > span { display: inline-flex; align-items: center; gap: 5px; }
.audit-swatch { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--tone); }

/* ── Columns ────────────────────────────────────────────────────────────── */

.audit-board { padding-bottom: .5rem; }

.audit-column {
  flex: 0 0 286px; max-width: 286px;
  max-height: calc(100vh - 232px);
}

.audit-column__head::before { display: none; }   /* no colour dot: the mix bar carries the meaning */
.audit-column__head { gap: .4375rem; align-items: baseline; }
.audit-column__num { font: 600 .6875rem/1 var(--core-font-mono); color: var(--core-accent-text); }
.audit-column__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-column__head .kanban-column-count { margin-left: 0; }
.audit-column__amount {
  margin-left: auto; font: 500 .6875rem/1 var(--core-font-mono);
  color: var(--core-ink-3); font-variant-numeric: tabular-nums;
}

/* 2px three-segment bar under the header: green / amber / red mix of the column. */
.audit-column__mix {
  display: flex; gap: 1px; height: 2px; margin: 0 .75rem;
  background: var(--core-surface-3); overflow: hidden;
}
.audit-column__mix > i { display: block; flex: 0; background: var(--tone); transition: flex .3s ease; }

.audit-cards { padding-top: .625rem; }

.audit-empty {
  border: 1px dashed var(--core-line-strong); border-radius: var(--core-r-sm);
  padding: 1rem; text-align: center; font-size: .71875rem; color: var(--core-ink-3);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.audit-card {
  border-top: 1px solid var(--core-line);            /* undo the ticket board colour edge */
  border-left: 3px solid var(--tone);                /* the due-status stripe */
  padding: .5625rem .6875rem .625rem;
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer;
}
.audit-card:active { cursor: pointer; }
.audit-card:focus-visible { outline: none; box-shadow: var(--core-focus); }

.audit-card__row { display: flex; align-items: center; gap: 6px; }
.audit-card__ref { font: 600 .625rem/1 var(--core-font-mono); color: var(--core-ink-3); letter-spacing: .02em; }
.audit-card__flag { font-size: .59375rem; padding: 2px 7px; }
.audit-card__avatar {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--core-surface-3); color: var(--core-ink-2);
  font-size: .59375rem; font-weight: 650; letter-spacing: .03em;
}

.audit-card__title {
  display: block; width: 100%; text-align: left;
  padding: 0; border: 0; background: none;
  font: 600 .90625rem/1.25 var(--core-font); color: var(--core-ink);
  cursor: pointer;
}
.audit-card__title:focus-visible { outline: none; box-shadow: var(--core-focus); border-radius: 3px; }

.audit-card__sub {
  font-size: .75rem; color: var(--core-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.audit-card__money {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden;
  font: 500 .78125rem/1.2 var(--core-font-mono); color: var(--core-ink); font-variant-numeric: tabular-nums;
}
.audit-card__claims { font-size: .65625rem; color: var(--core-ink-3); }

.audit-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.audit-card__due { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 600; color: var(--tone); }
.audit-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); display: block; }
.audit-card__progress {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .65625rem; color: var(--core-ink-3); font-variant-numeric: tabular-nums;
}
.audit-card__bar {
  position: relative; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--core-surface-3); overflow: hidden;
}
.audit-card__bar > i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--core-accent); }

/* Arrival in a new column. */
@keyframes auditCardLand {
  0%   { transform: translateY(-14px) scale(.97); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.audit-land { animation: auditCardLand 620ms ease-out; }

/* ── Toast (bottom-left) ────────────────────────────────────────────────── */

@keyframes auditRiseIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.audit-toast {
  position: fixed; left: 1.375rem; bottom: 1.375rem; z-index: 1080;
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem 1rem; border-radius: var(--core-r-sm);
  background: var(--core-surface); border: 1px solid var(--core-line);
  box-shadow: var(--core-shadow); font-size: .8125rem; color: var(--core-ink);
  max-width: min(520px, calc(100vw - 2.75rem));
}
.audit-toast > i { color: var(--core-accent-text); }
.audit-toast.is-in { animation: auditRiseIn 260ms ease-out; }

/* ── Modal ──────────────────────────────────────────────────────────────── */

.audit-modal { max-width: min(1080px, calc(100vw - 2rem)); }
.audit-modal__content {
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--core-surface); color: var(--core-ink);
  border: 1px solid var(--core-line); border-radius: var(--core-r);
}
.audit-modal__loading { padding: 2.5rem; text-align: center; color: var(--core-ink-2); }

.audit-modal__head {
  flex: none; display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.375rem .875rem; border-bottom: 1px solid var(--core-line);
}
.audit-modal__id { flex: 1; min-width: 0; }
.audit-modal__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 4px; }
.audit-modal__tags .core-pill i { margin-right: 4px; }
.audit-modal__title { margin: 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -.01em; }
.audit-modal__sub { font-size: .8125rem; color: var(--core-ink-2); margin-top: 2px; }
.audit-modal__due { text-align: right; white-space: nowrap; }
.audit-modal__due-label { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--core-ink-3); }
.audit-modal__due-value { font-size: .875rem; font-weight: 600; color: var(--tone); }
.audit-modal__close { flex: none; }

/* Stage rail */
.audit-rail {
  flex: none; display: flex; align-items: center;
  padding: .75rem 1.375rem; border-bottom: 1px solid var(--core-line);
  overflow-x: auto;
}
.audit-rail__step { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.audit-rail__step:last-child { flex: 0 0 auto; }
.audit-rail__chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 9px; border-radius: var(--core-r-sm); border: 1px solid transparent;
  white-space: nowrap;
}
.audit-rail__chip[data-state="current"] { border-color: var(--core-accent); background: var(--core-accent-quiet); }
.audit-rail__mark {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font: 600 .5625rem/1 var(--core-font-mono);
  background: var(--core-surface-3); color: var(--core-ink-3);
}
.audit-rail__chip[data-state="current"] .audit-rail__mark { background: var(--core-accent); color: var(--core-accent-ink); }
.audit-rail__chip[data-state="cleared"] .audit-rail__mark { background: var(--core-accent); color: var(--core-accent-ink); }
.audit-rail__label { font-size: .78125rem; color: var(--core-ink-3); overflow: hidden; text-overflow: ellipsis; }
.audit-rail__chip[data-state="current"] .audit-rail__label { color: var(--core-ink); font-weight: 600; }
.audit-rail__chip[data-state="cleared"] .audit-rail__label { color: var(--core-ink-2); }
.audit-rail__count { font: 500 .65625rem/1 var(--core-font-mono); color: var(--core-ink-3); }
.audit-rail__line { flex: 1; height: 1px; display: block; background: var(--core-line-strong); min-width: 10px; }
.audit-rail__line.is-cleared { background: var(--core-accent); }

@keyframes auditPulseRing {
  0%, 100% { box-shadow: 0 0 0 1px var(--core-accent); }
  50%      { box-shadow: var(--core-focus); }
}
.audit-rail__chip[data-target="true"] { border-color: var(--core-accent); animation: auditPulseRing 1200ms ease-in-out infinite; }

/* Two panes */
.audit-modal__grid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1.42fr 1fr; overflow: hidden;
}
.audit-pane { min-height: 0; overflow-y: auto; padding: 1rem 1.375rem 1.375rem; }
.audit-pane--record { background: var(--core-surface-2); border-left: 1px solid var(--core-line); }
.audit-pane__title {
  margin: 0 0 .625rem; font-size: .71875rem; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--core-ink-3);
}
.audit-activity { margin-top: .25rem; }

.audit-stage__head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 4px; }
.audit-stage__title { margin: 0; font-size: .9375rem; font-weight: 650; }
.audit-stage__progress { font-size: .71875rem; color: var(--core-ink-3); }
.audit-stage__note { font-size: .75rem; color: var(--core-ink-2); margin: 0 0 .625rem; text-wrap: pretty; }
.audit-progress { height: 3px; border-radius: 2px; background: var(--core-surface-3); overflow: hidden; margin-bottom: .875rem; }
.audit-progress > i { display: block; height: 3px; background: var(--core-accent); transition: width 260ms ease; }

/* Entry rows */
.audit-entry {
  display: flex; align-items: flex-start; gap: .6875rem;
  padding: 7px 10px; margin: 0 -10px; border-radius: var(--core-r-xs);
}
.audit-entry[data-check-row] { cursor: pointer; }
.audit-entry[data-check-row]:hover { background: var(--core-surface-2); }
.audit-entry[data-check-row]:focus-visible { outline: none; box-shadow: var(--core-focus); }
.audit-entry__box {
  flex: none; width: 18px; height: 18px; margin-top: 8px; border-radius: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--core-line-strong); background: var(--core-surface);
  color: var(--core-accent-ink); font-size: .75rem;
  transition: background var(--core-ease), border-color var(--core-ease);
}
.audit-entry.is-done .audit-entry__box { background: var(--core-accent); border-color: var(--core-accent); }
.audit-entry__label { flex: none; width: 158px; padding-top: 8px; font-size: .8125rem; color: var(--core-ink); text-wrap: pretty; }
.audit-entry.is-done .audit-entry__label { color: var(--core-ink-2); }
.audit-entry__ctl { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Two classes deep: components.css loads after site.css and its .core-field sets
   width:100%, which would otherwise win over every narrower control below. */
.audit-entry .audit-entry__text { flex: 1; min-width: 140px; width: auto; }
.audit-entry .audit-entry__date { width: 160px; }
.audit-entry .audit-entry__notes { width: 100%; min-height: 66px; resize: vertical; line-height: 1.5; }
.audit-entry__money { display: inline-flex; align-items: center; gap: 6px; }
.audit-entry__prefix { font: 500 .8125rem/1 var(--core-font-mono); color: var(--core-ink-3); }
.audit-entry .audit-entry__num { width: 130px; font-family: var(--core-font-mono); }
.audit-entry .audit-entry__num--short { width: 88px; }
.audit-entry .audit-entry__select { width: auto; min-width: 180px; max-width: 100%; }
.audit-entry__hint { font-size: .71875rem; color: var(--core-ink-3); padding-top: 9px; }
.audit-entry--claims .audit-entry__hint, .audit-drugs .audit-entry__hint { padding-top: 0; }
.audit-entry--notes .audit-entry__hint { padding-top: 0; flex-basis: 100%; }
.audit-entry__bytype { font-size: .59375rem; padding: 1px 7px; border: 1px solid var(--core-line-strong); background: transparent; }
/* An optional entry still ticks when filled — the tag is what says it never gates. */
.audit-entry__opt {
  margin-left: 6px; font-size: .59375rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--core-ink-3); vertical-align: 1px;
}
.audit-entry .core-field:disabled { opacity: .7; }

/* Choice buttons (Email / Fax / Mail) */
.audit-choice { display: flex; gap: 6px; }
.audit-choice__opt {
  padding: 6px 12px; border-radius: var(--core-r-sm);
  border: 1px solid var(--core-line-strong); background: transparent; color: var(--core-ink);
  font: 600 .8125rem/1 var(--core-font); cursor: pointer;
  transition: background var(--core-ease), color var(--core-ease), border-color var(--core-ease);
}
.audit-choice__opt:hover { background: var(--core-surface-3); }
.audit-choice__opt.is-on { background: var(--core-accent-quiet); color: var(--core-accent-text); border-color: var(--core-accent); }
.audit-choice__opt:focus-visible { outline: none; box-shadow: var(--core-focus); }

/* Claims */
.audit-claims { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.audit-claims__rows { display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow-y: auto; padding-right: 2px; }
.audit-claims__row { display: flex; align-items: center; gap: 8px; }
.audit-claims__n { flex: none; width: 56px; font: 500 .65625rem/1 var(--core-font-mono); color: var(--core-ink-3); }
.audit-claims__row .core-field { flex: 1; min-width: 0; }

/* Drugs */
.audit-drugs { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.audit-drugs__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.audit-drugs__chips:empty { display: none; }
.audit-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--core-r-xs);
  background: var(--core-surface-3); color: var(--core-ink);
  font-size: .71875rem; font-weight: 600;
}
.audit-chip__ndc { font: 500 .65625rem/1 var(--core-font-mono); color: var(--core-ink-3); }
.audit-chip__x { border: 0; background: none; padding: 0; color: var(--core-ink-3); cursor: pointer; display: grid; place-items: center; }
.audit-chip__x:hover { color: var(--core-danger); }
.audit-drugs__add { display: flex; align-items: center; gap: 6px; }
.audit-drugs__field { position: relative; flex: 1; min-width: 0; }
.audit-drugs__field .core-field { width: 100%; }
.audit-drugs__add .audit-drugs__ndc { flex: 0 0 150px; width: 150px; font-family: var(--core-font-mono); }
.audit-drugs__foot { display: flex; align-items: center; gap: .5rem; }
.audit-drugs__foot .audit-entry__hint { flex: 1; min-width: 0; }
.audit-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  border-radius: var(--core-r-sm); border: 1px solid var(--core-line);
  background: var(--core-surface); box-shadow: var(--core-shadow); overflow: hidden;
}
.audit-suggest__item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 7px 11px; border: 0; background: none; color: var(--core-ink);
  font: inherit; font-size: .8125rem; cursor: pointer;
}
.audit-suggest__item:hover, .audit-suggest__item:focus-visible { background: var(--core-accent-quiet); outline: none; }
.audit-suggest__item > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-suggest__ndc { font: 500 .6875rem/1 var(--core-font-mono); color: var(--core-ink-3); }

/* Advance banner + gate line */
.audit-advance {
  margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--core-r-sm);
  background: var(--core-accent-quiet); border: 1px solid var(--core-accent);
  animation: auditPulseRing 1200ms ease-in-out infinite;
}
.audit-advance__row { display: flex; align-items: center; gap: .6875rem; }
.audit-advance__row > i { color: var(--core-accent-text); font-size: 1.0625rem; }
.audit-advance__text { flex: 1; min-width: 0; }
.audit-advance__title { font-size: .875rem; font-weight: 600; color: var(--core-accent-text); }
.audit-advance__note { font-size: .71875rem; color: var(--core-ink-2); margin-top: 1px; }
@keyframes auditSweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.audit-advance__sweep { height: 2px; margin-top: .6875rem; border-radius: 2px; overflow: hidden; background: var(--core-surface-3); }
.audit-advance__sweep > i { display: block; height: 2px; width: 40%; background: var(--core-accent); animation: auditSweep 900ms linear infinite; }

.audit-gate {
  margin-top: 1rem; padding: .6875rem .875rem; border-radius: var(--core-r-sm);
  border: 1px dashed var(--core-line-strong); font-size: .78125rem; color: var(--core-ink-2); text-wrap: pretty;
}

/* Closed summary */
.audit-closed { margin-bottom: .75rem; }
.audit-closed__cards { display: flex; flex-wrap: wrap; gap: .5rem; }
.audit-closed__card {
  flex: 1; min-width: 150px; padding: .6875rem .875rem; border-radius: var(--core-r-sm);
  background: var(--core-surface-2); border: 1px solid var(--core-line);
}
.audit-closed__label { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--core-ink-3); }
.audit-closed__value { font-size: .9375rem; margin-top: 3px; text-wrap: pretty; }
.audit-closed__reason { display: flex; gap: .6875rem; padding: 6px 0; border-bottom: 1px solid var(--core-line); font-size: .8125rem; }
.audit-closed__reason > span:first-child { flex: none; width: 56px; font: 500 .65625rem/1.6 var(--core-font-mono); color: var(--core-ink-3); }
.audit-closed__notes { font-size: .8125rem; line-height: 1.55; white-space: pre-wrap; text-wrap: pretty; color: var(--core-ink); }

/* Record grid + activity */
.audit-record { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 0 1rem; font-size: .8125rem; }
.audit-record dt { font-weight: 500; color: var(--core-ink-3); }
.audit-record dd { margin: 0; color: var(--core-ink); overflow-wrap: anywhere; }
.audit-record__actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 1rem; }
.audit-record__actions .core-hint { flex: 1; min-width: 120px; }
.audit-record .audit-record__owner, .audit-record__actions .audit-record__owner { width: auto; max-width: 100%; height: 30px; padding: 0 26px 0 8px; font-size: .75rem; }

.audit-activity__item { display: flex; gap: .6875rem; padding-bottom: .6875rem; }
.audit-activity__dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px;
  background: var(--core-line-strong);
}
.audit-activity__item[data-kind="accent"] .audit-activity__dot { background: var(--core-accent); }
.audit-activity__item[data-kind="warning"] .audit-activity__dot { background: var(--core-warn); }
.audit-activity__text { font-size: .78125rem; color: var(--core-ink); text-wrap: pretty; }
.audit-activity__meta { font-size: .65625rem; color: var(--core-ink-3); margin-top: 1px; }

@media (max-width: 991.98px) {
  .audit-modal__grid { grid-template-columns: 1fr; overflow-y: auto; }
  .audit-pane { overflow: visible; }
  .audit-pane--record { border-left: 0; border-top: 1px solid var(--core-line); }
  .audit-entry { flex-wrap: wrap; }
  .audit-entry__label { width: calc(100% - 30px); padding-top: 0; }
  .audit-entry__ctl { width: 100%; padding-left: 30px; }
}

@media (max-width: 767.98px) {
  .audit-column { flex: 0 0 85vw; max-width: 85vw; max-height: calc(100vh - 200px); }
  .audit-summary { margin-left: 0; }
}

/* Audit type form — the field builder */
.audit-fields { display: flex; flex-direction: column; gap: 6px; }
.audit-fields__row {
  display: grid; grid-template-columns: 18px 1.3fr 1fr 1.2fr auto 28px; gap: 6px; align-items: center;
}
.audit-fields__grip { color: var(--core-ink-3); display: grid; place-items: center; }
.audit-fields__meta { white-space: nowrap; min-width: 0; }
/* The record editor reuses the row, with its own columns: drug name + NDC + remove,
   and claim number + reason. */
.audit-fields--drugs .audit-fields__row { grid-template-columns: 18px 1.7fr 1fr 28px; }
.audit-fields--claims .audit-fields__row { grid-template-columns: 56px 1fr; }
.audit-fields__n { font: 500 .65625rem/1.6 var(--core-font-mono); color: var(--core-ink-3); }
@media (max-width: 767.98px) {
  .audit-fields__row { grid-template-columns: 18px 1fr 28px; }
  .audit-fields__row > select, .audit-fields__row > input[data-name="Hint"], .audit-fields__meta { grid-column: 2 / 3; }
  .audit-fields--drugs .audit-fields__row { grid-template-columns: 18px 1fr 28px; }
  .audit-fields--drugs .audit-fields__row > input[data-name="Ndc"] { grid-column: 2 / 3; }
  .audit-fields--claims .audit-fields__row { grid-template-columns: 56px 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Staff scheduling (Views/StaffSchedule/*, _CardMySchedule)
   Every colour is a token. Shift chips take their colour from the same
   [data-tone] custom properties components.css defines for cards and
   pills; two extra tones live here because the palette needed a dark
   blue and a grey and no --core-* token exists for either.
   ═══════════════════════════════════════════════════════════════════ */
/* :root-prefixed on purpose. site.css loads BEFORE components.css, whose generic
   [data-tone] rule (accent) has the same specificity as a plain [data-tone="navy"]
   and therefore won — every navy and grey shift rendered teal. The extra ancestor
   lifts these above it without touching the shared rule. */
:root [data-tone="navy"]    { --tone: color-mix(in srgb, var(--core-info) 55%, var(--core-ink)); --tone-quiet: color-mix(in srgb, var(--core-info) 12%, transparent); }
:root [data-tone="neutral"] { --tone: var(--core-ink-2); --tone-quiet: var(--core-surface-3); }

/* Toolbar */
.ss-toolbar { row-gap: 8px; }
.ss-title { font-size: .9375rem; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.ss-nav { display: inline-flex; gap: 4px; }
.ss-seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-pill);
  background: var(--core-surface);
}
.ss-seg a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
  font-size: .71875rem; font-weight: 600; color: var(--core-ink-2); text-decoration: none;
}
.ss-seg a + a { border-left: 1px solid var(--core-line); }
.ss-seg a:hover { background: var(--core-surface-3); color: var(--core-ink); }
.ss-seg a.is-active { background: var(--core-accent); color: var(--core-accent-ink); }
.ss-section-title { font-size: .9375rem; font-weight: 650; }

/* Week grid */
.ss-wrap { overflow: auto; max-height: calc(100vh - 230px); }
.ss-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; table-layout: fixed; }
.ss-grid th, .ss-grid td {
  border-bottom: 1px solid var(--core-line); border-right: 1px solid var(--core-line);
  vertical-align: top; padding: 0;
}
.ss-grid th:last-child, .ss-grid td:last-child { border-right: 0; }
.ss-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--core-surface-2); }
.ss-grid th:first-child, .ss-grid td:first-child { position: sticky; left: 0; z-index: 2; background: var(--core-surface); }
.ss-grid thead th:first-child { z-index: 4; background: var(--core-surface-2); }
.ss-grid .ss-col-person { width: 200px; }
.ss-grid .ss-col-hours { width: 74px; }
.ss-day { padding: 8px 8px 7px; text-align: center; }
.ss-day--corner { text-align: left; }
.ss-day__name { font-size: .75rem; font-weight: 650; line-height: 1.2; }
.ss-day__date { margin-top: 2px; font: 400 .65625rem/1 var(--core-font-mono); color: var(--core-ink-3); }
.ss-day--today { background: var(--core-accent-quiet); box-shadow: inset 0 -2px 0 var(--core-accent); }
.ss-day--today .ss-day__date { color: var(--core-accent-text); }
.ss-day__holiday { display: block; margin-top: 4px; font-size: .625rem; font-weight: 600; color: var(--core-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-grid td.ss-cell { padding: 4px; height: 62px; background: var(--core-surface); }
.ss-grid td.ss-cell--weekend { background: var(--core-surface-2); }
.ss-grid td.ss-cell--today { background: color-mix(in srgb, var(--core-accent) 6%, var(--core-surface)); }
.ss-grid tbody tr:hover td.ss-cell { background: color-mix(in srgb, var(--core-accent) 10%, var(--core-surface)); }
.ss-grid tr.ss-row--me td:first-child { box-shadow: inset 3px 0 0 var(--core-accent); }
.ss-person { display: flex; align-items: center; gap: 9px; padding: 8px 10px; min-width: 0; }
.ss-person__name { font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.ss-person__meta { margin-top: 2px; font-size: .65625rem; color: var(--core-ink-3); }
/* Hours sit in the middle of their cell, not the top-right corner the grid's
   top alignment would put them in. Specificity matches .ss-grid td so it wins. */
.ss-grid td.ss-hours, .ss-foot td.ss-hours {
  vertical-align: middle; text-align: center; padding: 10px 8px;
  font: 600 .8125rem/1 var(--core-font-mono); color: var(--core-ink-2);
}
.ss-cell__stack { display: flex; flex-direction: column; gap: 3px; min-height: 54px; }

/* Chips */
.ss-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 7px; border-radius: var(--core-r-xs);
  background: var(--tone-quiet); color: var(--tone);
  border-left: 3px solid var(--tone);
  font-size: .71875rem; line-height: 1.2; text-align: left;
  border-top: 0; border-right: 0; border-bottom: 0;
  min-width: 0;
}
.ss-chip__time { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-chip__label { font-size: .65625rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ss-chip__break { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-size: .625rem; opacity: .9; }
.ss-chip--edit { cursor: pointer; transition: filter var(--core-ease), transform var(--core-ease); }
.ss-chip--edit:hover { filter: brightness(.94); }
.ss-chip--edit:focus-visible { outline: none; box-shadow: var(--core-focus); }
.ss-chip--draft { background: transparent; outline: 1px dashed var(--tone); outline-offset: -1px; border-left-style: dashed; }
.ss-chip--other { --tone: var(--core-ink-3); --tone-quiet: var(--core-surface-3); border-left-style: dotted; }
.ss-off {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 4px 7px; border-radius: var(--core-r-xs);
  background: var(--tone-quiet); color: var(--tone);
  font-size: .6875rem; font-weight: 600; line-height: 1.2; min-width: 0;
}
.ss-off__time { font-weight: 500; opacity: .85; font-variant-numeric: tabular-nums; }
.ss-off--pending { background: transparent; outline: 1px dashed var(--tone); outline-offset: -1px; }
.ss-add {
  display: none; margin-top: auto; width: 100%; height: 22px;
  border: 1px dashed var(--core-line-strong); border-radius: var(--core-r-xs);
  background: transparent; color: var(--core-ink-3); font-size: .75rem; line-height: 1; cursor: pointer;
}
.ss-grid td.ss-cell:hover .ss-add, .ss-month__cell:hover .ss-add, .ss-add:focus-visible { display: block; }
/* No hover on a touch screen, so the add button is simply always there. */
@media (hover: none) { .ss-add { display: block; } }
.ss-add:hover, .ss-add:focus-visible { border-color: var(--core-accent); color: var(--core-accent-text); background: var(--core-accent-quiet); outline: none; }
.ss-foot td { padding: 7px 8px; background: var(--core-surface-2); font-size: .6875rem; color: var(--core-ink-2); text-align: center; white-space: nowrap; }
.ss-foot td:first-child { text-align: left; }
.ss-foot__label { font-weight: 650; color: var(--core-ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: .625rem; padding-left: 10px !important; }
.ss-foot__n { font-weight: 650; color: var(--core-ink); font-variant-numeric: tabular-nums; }
.ss-foot__sep { color: var(--core-ink-3); margin: 0 2px; }
.ss-foot td.ss-cell--today { background: color-mix(in srgb, var(--core-accent) 8%, var(--core-surface-2)); }

/* Month grid */
.ss-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ss-month__dow { padding-bottom: 2px; text-align: center; font-size: .6875rem; font-weight: 600; color: var(--core-ink-3); }
.ss-month__cell {
  min-width: 0; min-height: 112px; padding: 6px; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--core-surface); border: 1px solid var(--core-line); border-radius: var(--core-r-sm);
}
.ss-month__cell--weekend { background: var(--core-surface-2); }
.ss-month__cell--out { opacity: .55; }
.ss-month__cell--today { border-color: var(--core-accent); box-shadow: inset 0 0 0 1px var(--core-accent); }
.ss-month__head { display: flex; align-items: center; gap: 5px; font-size: .65625rem; color: var(--core-ink-3); min-width: 0; }
.ss-month__num { font-size: .8125rem; font-weight: 650; color: var(--core-ink); font-variant-numeric: tabular-nums; }
.ss-month__cell--today .ss-month__num { color: var(--core-accent-text); }
.ss-month__holiday { font-size: .625rem; font-weight: 600; color: var(--core-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-month__list { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; max-height: 190px; overflow: auto; }
.ss-month .ss-chip { flex-direction: row; align-items: center; gap: 6px; padding: 2px 6px; }
.ss-month .ss-chip__label { flex: 1; }
.ss-month .ss-off { padding: 2px 6px; flex-wrap: nowrap; }
.ss-month .ss-off > span { min-width: 0; }
.ss-month .ss-add { margin-top: auto; height: 20px; font-size: .6875rem; }
.ss-month--mine .ss-month__cell { min-height: 92px; }

/* Department month: counts per cell, details on click */
.ss-month__cell--btn { min-height: 84px; cursor: pointer; transition: border-color var(--core-ease), box-shadow var(--core-ease); }
.ss-month__cell--btn:hover { border-color: var(--core-accent); box-shadow: var(--core-shadow-sm); }
.ss-month__cell--btn:focus-visible { outline: none; box-shadow: var(--core-focus); }
.ss-month__stats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.ss-stat {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  border-radius: var(--core-r-pill); background: var(--tone-quiet, var(--core-accent-quiet)); color: var(--tone, var(--core-accent-text));
  font-size: .65625rem; font-weight: 500; white-space: nowrap;
}
.ss-stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-stat--zero { background: var(--core-surface-3); color: var(--core-ink-3); }
.ss-stat--hours { background: transparent; color: var(--core-ink-3); padding-left: 2px; font-variant-numeric: tabular-nums; }
.ss-daypanel__sub { font-size: .8125rem; color: var(--core-ink-2); margin-bottom: 10px; }
.ss-daypanel__holiday { font-size: .78125rem; font-weight: 600; color: var(--core-warn); margin-bottom: 6px; }
.ss-daypanel__empty { color: var(--core-ink-3); font-size: .8125rem; padding: 10px 0; }
.ss-daypanel__list { display: flex; flex-direction: column; gap: 4px; }
.ss-daypanel__item { display: grid; grid-template-columns: 22px minmax(120px, 1fr) minmax(140px, 1.2fr) 52px; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--core-line); }
.ss-daypanel__item:last-child { border-bottom: 0; }
.ss-daypanel__name { font-size: .8125rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-daypanel__item .ss-chip { flex-direction: row; align-items: center; gap: 8px; }
.ss-daypanel__hours { text-align: right; font: 600 .75rem/1 var(--core-font-mono); color: var(--core-ink-2); }
.ss-daypanel__offhead { margin-top: 12px; margin-bottom: 4px; font-size: .625rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--core-ink-3); }
.ss-daypanel__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ss-add--panel { display: inline-flex !important; align-items: center; gap: 4px; width: auto; height: 30px; padding: 0 12px; margin: 0; }
@media (max-width: 575.98px) {
  .ss-daypanel__item { grid-template-columns: 22px 1fr; }
  .ss-daypanel__item .ss-chip, .ss-daypanel__hours { grid-column: 2; text-align: left; }
}

/* Plan Month wizard */
.ss-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-steps li a {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 6px;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-pill);
  font-size: .75rem; font-weight: 600; color: var(--core-ink-2); text-decoration: none; background: var(--core-surface);
}
.ss-steps__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--core-surface-3); color: var(--core-ink-2); font-size: .6875rem; }
.ss-steps li.is-done .ss-steps__n { background: var(--core-ok-quiet); color: var(--core-ok); }
.ss-steps li.is-active a { background: var(--core-accent); color: var(--core-accent-ink); border-color: var(--core-accent); }
.ss-steps li.is-active .ss-steps__n { background: var(--core-accent-ink); color: var(--core-accent); }
.ss-people__list { max-height: calc(100vh - 300px); overflow: auto; }
.ss-people__item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--core-line); text-decoration: none; color: var(--core-ink); }
.ss-people__item:hover { background: var(--core-surface-2); }
.ss-people__item.is-active { background: var(--core-accent-quiet); box-shadow: inset 3px 0 0 var(--core-accent); }
.ss-people__name { display: block; font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-people__meta { display: flex; align-items: center; gap: 5px; font-size: .65625rem; color: var(--core-ink-3); }
.ss-people__todo { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--core-r-pill); background: var(--core-warn-quiet); color: var(--core-warn); font-weight: 700; }
.ss-plan .ss-month__cell { min-height: 78px; }
.ss-plan__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ss-plan__cell--off { background: var(--core-surface-3); }
.ss-plan__cell--holiday { background: color-mix(in srgb, var(--core-warn) 8%, var(--core-surface)); }
.ss-plan__cell--past { opacity: .75; }
.ss-plan .ss-chip { flex-direction: row; align-items: center; gap: 6px; }
.ss-plan__quick {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  padding: 3px 6px; border: 1px dashed var(--core-line-strong); border-radius: var(--core-r-xs);
  background: transparent; color: var(--core-ink-3); font-size: .6875rem; cursor: pointer; text-align: left;
}
.ss-plan__quick:hover { border-color: var(--core-accent); color: var(--core-accent-text); background: var(--core-accent-quiet); }
.ss-plan__ghost { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .8; }
.ss-plan .ss-add { display: block; opacity: .35; }
.ss-plan .ss-month__cell:hover .ss-add { opacity: 1; }

/* Usual week form */
.ss-usual { display: flex; flex-direction: column; gap: 6px; }
.ss-usual__row { display: grid; grid-template-columns: 22px 92px 1.2fr 108px 108px 76px 1fr 100px; gap: 8px; align-items: center; }
.ss-usual__row--head { font-size: .625rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--core-ink-3); padding-bottom: 2px; border-bottom: 1px solid var(--core-line); }
.ss-usual__row.is-off > *:not(.js-on):not(span) { opacity: .45; }
.ss-person__usual { margin-left: 6px; font-size: .625rem; color: var(--core-ink-3); text-decoration: none; }
.ss-person__usual:hover { color: var(--core-accent-text); }
@media (max-width: 991.98px) {
  .ss-usual__row { grid-template-columns: 22px 1fr 1fr; }
  .ss-usual__row--head { display: none; }
}
.ss-month-hours { flex-wrap: wrap; row-gap: 6px; }
.ss-month-hours .ss-foot__label { padding-left: 0 !important; }

/* Legend */
.ss-legend-foot { flex-wrap: wrap; row-gap: 6px; }
.ss-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .6875rem; color: var(--core-ink-2); }
.ss-legend__swatch {
  display: inline-block; width: 12px; height: 11px; margin-right: 5px; vertical-align: -1px;
  border-radius: 2px; border-left: 3px solid var(--tone); background: var(--tone-quiet);
}
.ss-legend__swatch--draft { --tone: var(--core-ink-3); background: transparent; outline: 1px dashed var(--core-ink-3); outline-offset: -1px; }
.ss-legend__swatch--off { --tone: var(--core-ink-2); --tone-quiet: var(--core-surface-3); border-left-width: 0; }

/* Shift editor */
.ss-modal .modal-content { background: var(--core-surface); color: var(--core-ink); border: 1px solid var(--core-line); border-radius: var(--core-r); }
.ss-modal .modal-header, .ss-modal .modal-footer { border-color: var(--core-line); }
.ss-modal .modal-title { font-size: .9375rem; font-weight: 650; }
.ss-repeat { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-repeat label {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; cursor: pointer;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-pill);
  font-size: .71875rem; font-weight: 500; color: var(--core-ink-2); background: var(--core-surface);
}
.ss-repeat label input { margin: 0; }
.ss-repeat label:has(input:checked) { background: var(--core-accent-quiet); border-color: var(--core-accent); color: var(--core-accent-text); }
.ss-repeat label.is-own { opacity: .45; cursor: default; }

/* Department page and request cards */
.ss-template {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--core-line); border-radius: var(--core-r-sm); background: var(--core-surface-2);
  font-size: .8125rem;
}
.ss-template__swatch { flex: 0 0 auto; width: 10px; height: 26px; border-radius: 3px; background: var(--tone); }
.ss-request-row { padding: 6px 0; font-size: .8125rem; }
.ss-request-row .ss-template__swatch { height: 22px; width: 5px; }
.ss-requests { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.ss-request__sub { font-size: .71875rem; color: var(--core-ink-3); }
.ss-request__dl { grid-template-columns: 82px 1fr; gap: 6px 12px; }
.ss-request__foot { flex-wrap: wrap; }
.ss-request__foot .core-field { flex: 1 1 160px; min-width: 0; }
.ss-row--past td { color: var(--core-ink-3); }

@media (max-width: 767.98px) {
  .ss-grid .ss-col-person { width: 150px; }
  .ss-month__cell { min-height: 76px; }
  .ss-requests { grid-template-columns: 1fr; }
}

/* Print: the board only, on light paper whatever the on-screen theme.
   #printArea's visibility rules are shared with the driver schedule above. */
@media print {
  .ss-toolbar-card, .ss-add, .ss-legend-foot .core-pill { display: none !important; }
  .ss-wrap { max-height: none !important; overflow: visible !important; }
  .ss-grid { min-width: 0 !important; font-size: 7pt; }
  .ss-grid th, .ss-grid td, .ss-grid thead th, .ss-grid th:first-child, .ss-grid td:first-child { position: static !important; background: #fff !important; color: #000 !important; border-color: #888 !important; }
  .ss-grid thead th, .ss-foot td { background: #e9eff2 !important; }
  .ss-grid td.ss-cell { height: auto !important; }
  .ss-chip, .ss-off { background: #fff !important; color: #000 !important; border-left-color: #666 !important; outline-color: #666 !important; break-inside: avoid; }
  .ss-chip--other { color: #666 !important; }
  .ss-month__cell { background: #fff !important; border-color: #888 !important; break-inside: avoid; }
  .ss-month__list { max-height: none !important; overflow: visible !important; }
  .ss-legend { color: #000 !important; }
  #ssBoard { box-shadow: none !important; border: 0 !important; }
}