/* ═══════════════════════════════════════════════════════════════════
   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);
  }
}