:root {
  --vc-navy: #3a1f5d;
  --vc-navy-dark: #2a1645;
  --vc-teal: #6a3d9a;
  --vc-teal-hover: #5d348a;
  --vc-teal-active: #502c78;
  --vc-teal-bright: #d4b8ec;
  --vc-teal-dark: #3a1f5d;
  --vc-teal-tint: #f3ecf9;
  --vc-green: #2ecc71;
  --vc-red: #e74c3c;
  --vc-cerulean: #6b2fa6;
  --vc-cerulean-hover: #5d348a;
}

/* Bootstrap's own root link color — this is what plain/inactive links fall
   back to (e.g. an inactive nav-pills tab like "Outpatient Queue" before it's
   selected), separately from the .btn-primary overrides above. Overriding it
   here at :root, after bootstrap.min.css, re-colors every clickable name/
   link across the app at once (patient names, invoice rows, etc.) rather
   than needing a rule per component. Deliberately cerulean blue, not the
   teal used for buttons/badges elsewhere — links need to read as distinct
   from the brand accent, not blend into it. */
:root {
  --bs-link-color: var(--vc-cerulean);
  --bs-link-color-rgb: 107, 47, 166;
  --bs-link-hover-color: var(--vc-cerulean-hover);
  --bs-link-hover-color-rgb: 74, 40, 115;
}

/* ===== Primary buttons/badges — teal instead of Bootstrap's default blue =====
   Bootstrap 5.3 sets these as literal per-component variables on .btn-primary
   itself (not derived from a root color at runtime), so they're overridden
   here rather than by changing a single root variable. This file loads after
   bootstrap.min.css, so same-specificity rules below win by source order. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--vc-teal);
  --bs-btn-border-color: var(--vc-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vc-teal-hover);
  --bs-btn-hover-border-color: var(--vc-teal-hover);
  --bs-btn-focus-shadow-rgb: 106, 61, 154;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vc-teal-active);
  --bs-btn-active-border-color: var(--vc-teal-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--vc-teal);
  --bs-btn-disabled-border-color: var(--vc-teal);
}
.btn-outline-primary {
  --bs-btn-color: var(--vc-teal);
  --bs-btn-border-color: var(--vc-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--vc-teal);
  --bs-btn-hover-border-color: var(--vc-teal);
  --bs-btn-focus-shadow-rgb: 106, 61, 154;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--vc-teal);
  --bs-btn-active-border-color: var(--vc-teal);
  --bs-btn-disabled-color: var(--vc-teal);
  --bs-btn-disabled-border-color: var(--vc-teal);
}
.badge.bg-primary {
  background-color: var(--vc-teal) !important;
}
/* Outline buttons (action bars like the patient chart's +Admit/+Invoice/
   +Lab Order row) — thicker border and bolder text than Bootstrap's
   default, same reasoning as .complaint-chip below: these are read and
   tapped quickly, often by someone standing at a workstation rather than
   sitting close to it, so they need to be legible at a glance. */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-warning,
.btn-outline-success, .btn-outline-danger, .btn-outline-info, .btn-outline-dark {
  border-width: 2px;
  font-weight: 700;
}
/* Pill-style tab navs (e.g. Outpatient Queue / Active Admissions) —
   Bootstrap bakes this as a component variable on .nav-pills itself. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--vc-teal);
}
/* Checked checkboxes/radios (e.g. Role Permissions grid) */
.form-check-input:checked {
  background-color: var(--vc-teal);
  border-color: var(--vc-teal);
}
.form-check-input:focus {
  border-color: var(--vc-teal-bright);
  box-shadow: 0 0 0 0.25rem rgba(106, 61, 154, 0.25);
}

body {
  background-color: #eef0f2;
}

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  background-color: var(--vc-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: transform 0.25s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}
.brand-name {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  color: #fff;
}
.brand-sub {
  font-size: 0.72rem;
  color: var(--vc-teal-bright);
  letter-spacing: 0.03em;
}

.sidebar-search {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-search i {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}
.sidebar-search input {
  width: 100%;
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff;
  padding: 7px 10px 7px 30px;
  font-size: 0.85rem;
}
.sidebar-search input::placeholder {
  color: rgba(255,255,255,0.5);
}
.sidebar-search input:focus {
  outline: none;
  border-color: var(--vc-teal-bright);
  background-color: rgba(255,255,255,0.12);
}

.sidebar-nav {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.93rem;
  border-left: 3px solid transparent;
}
.sidebar-nav > li > a:hover,
.sidebar-nav > li > a.active {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
  border-left-color: var(--vc-teal-bright);
}
.sidebar-nav .dropdown-toggle::after {
  content: "\f282";
  font-family: "bootstrap-icons";
  margin-left: auto;
  border: none;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.sidebar-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.sub-nav {
  list-style: none;
  padding: 4px 0 4px 0;
  margin: 0;
  background-color: rgba(0,0,0,0.18);
}
.sub-nav li a {
  display: block;
  padding: 8px 18px 8px 46px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.86rem;
}
.sub-nav li a:hover {
  color: #fff;
  background-color: rgba(255,255,255,0.06);
}

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-user {
  color: #fff;
  font-size: 0.85rem;
}

.sidebar-toggle-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1040;
  background: var(--vc-navy);
  color: #fff;
  border-radius: 8px;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1020;
}
.sidebar-backdrop.show { display: block; }

.main-content {
  margin-left: 250px;
  min-height: 100vh;
}

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
    padding-top: 46px;
  }
}

/* ===== Vitals & Biometrics panel ===== */
.vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
}
.vital-box {
  background-color: #eef0f2;
  border: 1px solid #e5e9ee;
  border-radius: 6px;
  padding: 5px 8px;
  height: 100%;
}
.vital-label {
  font-size: 0.62rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vital-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: #3a1f5d;
  line-height: 1.3;
  white-space: nowrap;
}
.vital-unit {
  font-size: 0.62rem;
  font-weight: 400;
  color: #6c757d;
}
.vital-abnormal {
  background-color: #fbe4e2;
  border-color: #9b4dca;
}
.vital-abnormal .vital-value {
  color: #9b4dca;
}

.permission-category {
  background-color: var(--vc-teal-tint);
  color: #3a1f5d;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 1rem;
  border-left: 4px solid var(--vc-teal);
}

.page-header-bar {
  background-color: #3a1f5d;
  color: #fff;
  padding: 16px 24px;
  border-radius: 12px;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.page-header-bar h3, .page-header-bar h4 {
  color: #fff;
  margin-bottom: 0;
}
.page-header-bar .text-muted {
  color: rgba(255,255,255,0.65) !important;
}
.page-header-bar .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.page-header-bar .btn-outline-secondary:hover {
  background-color: rgba(255,255,255,0.15);
  color: #fff;
}

.consult-header {
  background-color: #3a1f5d;
  color: #fff;
  padding: 16px 24px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Symptom/duration/phrase chips on Outpatient Consultation — bolder text and
   thicker borders for readability, since these are tapped quickly and need
   to be easy to read at a glance, including for users with poor eyesight. */
.complaint-chip, .duration-chip, .phrase-chip {
  font-weight: 700;
  font-size: 0.95rem;
  border-width: 2px;
  color: #3a1f5d;
}
.complaint-chip.active, .complaint-chip.btn-secondary {
  color: #fff;
}

/* Documentation & Records navigation cards on the patient chart */
.history-nav-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #f8fafc;
  color: #3a1f5d;
  transition: all 0.15s ease;
  width: 100%;
}
.history-nav-card:hover {
  background-color: #fff;
  border-color: var(--vc-teal);
  box-shadow: 0 4px 14px rgba(106, 61, 154,0.18);
  transform: translateY(-2px);
  color: var(--vc-navy);
}
.history-nav-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--vc-navy) 0%, var(--vc-teal-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.consult-thumb {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  object-fit: cover;
}

/* Stat card style: white tile, colored top accent border, colored icon
   top-right, dark bold number, muted label/hint below. Shared visual
   language across every stat card in the app (Dashboard work-cards below,
   and these pharm-stat tiles used on the Pharmacy and Finance pages). */
.pharm-stat {
  position: relative;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e9edf1;
  border-top: 4px solid var(--vc-navy);
  color: var(--vc-navy);
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pharm-stat-icon {
  position: absolute;
  right: .85rem;
  top: .85rem;
  font-size: 1.35rem;
}
.pharm-stat-value {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vc-navy);
  padding-right: 1.6rem;
}
.pharm-stat-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #7a8494;
  margin-top: .2rem;
}
.pharm-stat-dark { border-color: #3a1f5d; }
.pharm-stat-dark .pharm-stat-icon { color: #3a1f5d; }
.pharm-stat-teal { border-color: #6a3d9a; }
.pharm-stat-teal .pharm-stat-icon { color: #6a3d9a; }
.pharm-stat-purple { border-color: #6f42c1; }
.pharm-stat-purple .pharm-stat-icon { color: #6f42c1; }
.pharm-stat-red { border-color: var(--vc-red); }
.pharm-stat-red .pharm-stat-icon { color: var(--vc-red); }
.pharm-stat-amber { border-color: #b8860b; }
.pharm-stat-amber .pharm-stat-icon { color: #b8860b; }
.pharm-stat-green { border-color: var(--vc-green); }
.pharm-stat-green .pharm-stat-icon { color: var(--vc-green); }
.pharm-stat {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.pharm-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.pharm-stat-active {
  border-color: var(--vc-teal);
  box-shadow: 0 0 0 3px var(--vc-teal-tint);
}

.mar-grid th, .mar-grid td {
  vertical-align: middle;
  padding: 8px;
}
.mar-cell {
  min-width: 90px;
}
.mar-given {
  background-color: #e6f7ec;
}
.mar-given .small.fw-bold {
  color: #1e7e34;
}
.mar-unavailable {
  background-color: #fff8e6;
}
.mar-unavailable .small.fw-bold {
  color: #b8860b;
}
.mar-discontinued {
  background-color: #fdecea;
}
.mar-discontinued .small.fw-bold {
  color: var(--vc-red);
}
/* Struck-out cell: a diagonal red line through the whole box so a stopped
   medication is obvious at a glance. */
.mar-struck {
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), rgba(231,76,60,.8) calc(50% - 1px), rgba(231,76,60,.8) calc(50% + 1px), transparent calc(50% + 1px));
}
.mar-struck > * { opacity: .7; }
.mar-med-stopped strong { text-decoration: line-through; opacity: .6; }
.mar-stopped-flag { color: var(--vc-red); }
.mar-pending {
  background-color: #fff8e6;
}
.mar-pending .small.fw-bold {
  color: #b8860b;
}
.btn-xs {
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.4;
  border-radius: 4px;
}

/* ===== Cards / tables ===== */
.card-stat {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card-stat .stat-number {
  font-size: 2rem;
  font-weight: 700;
}
table.table thead {
  background-color: var(--vc-teal-tint);
}
.badge-status {
  text-transform: capitalize;
}

/* ===== Login ===== */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--vc-navy-dark) 0%, var(--vc-navy) 55%, var(--vc-teal-dark) 100%);
}
.login-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  max-width: 420px;
  width: 100%;
}
.login-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* ===== Workflow-first screens ===== */
/* Stat card style: white tile, colored top accent border, colored icon
   top-right, dark bold number, muted label/hint below — same visual
   language as the .pharm-stat tiles above, applied to every Dashboard
   work-card across every role. */
.work-card { display:block; min-height:120px; padding:.9rem 1rem; border-radius:12px; background:#fff; border:1px solid #e9edf1; color:var(--vc-navy); text-decoration:none; position:relative; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease; }
.work-card:hover { color:var(--vc-navy); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.work-card-teal { border-top:4px solid #6a3d9a; border-color:#6a3d9a; }.work-card-teal .work-card-icon { color:#6a3d9a; }
.work-card-green { border-top:4px solid #2ecc71; border-color:#2ecc71; }.work-card-green .work-card-icon { color:#2ecc71; }
.work-card-amber { border-top:4px solid #d69e16; border-color:#d69e16; }.work-card-amber .work-card-icon { color:#d69e16; }
.work-card-purple { border-top:4px solid #7952b3; border-color:#7952b3; }.work-card-purple .work-card-icon { color:#7952b3; }
.work-card-red { border-top:4px solid #e74c3c; border-color:#e74c3c; }.work-card-red .work-card-icon { color:#e74c3c; }
/* Role badge for Imaging Personnel — every other role reuses a stock
   Bootstrap bg-* class, but those are all already spoken for by another
   role, so this one gets its own small color to stay visually distinct. */
.bg-imaging { background-color:#6f42c1; color:#fff; }
.work-card-icon { position:absolute; right:.85rem; top:.85rem; font-size:1.5rem; }.work-card-count { font-size:1.9rem; font-weight:750; line-height:1.1; color:var(--vc-navy); }.work-card-label { margin-top:.4rem; font-weight:700; font-size:1.02rem; color:#3d4a5c; }.work-card-hint { margin-top:.15rem; font-size:.76rem; color:#8993a4; }
/* A card sitting at zero is good news, not something to visually shout —
   dims it slightly so the eye is drawn to cards that actually need
   attention instead. */
.work-card-clear { opacity:.7; }
.work-card-clear:hover { opacity:1; }
.patient-context { position:sticky; top:0; z-index:20; background:#fff; padding-top:.25rem; padding-bottom:.7rem; border-bottom:1px solid #e2e2e4; }
.patient-safety-strip { display:flex; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.65rem .85rem; border:1px solid #f0d9d6; border-left:4px solid var(--vc-red); border-radius:8px; background:#fffafa; font-size:.88rem; }
.care-checklist { border-left:4px solid var(--vc-teal); }.handoff-chip { display:inline-flex; align-items:center; gap:.4rem; color:var(--vc-navy); text-decoration:none; padding:.4rem .6rem; border:1px solid #dcc9ec; border-radius:999px; background:var(--vc-teal-tint); font-size:.86rem; font-weight:600; }.handoff-chip:hover { background:#e9dcf3; color:var(--vc-navy); }.handoff-chip span { display:inline-grid; place-items:center; min-width:1.25rem; height:1.25rem; border-radius:50%; background:var(--vc-navy); color:#fff; font-size:.72rem; }
.wait-time { font-weight:700; color:#276749; }.wait-time-warning { color:#9c6500; }.wait-time-critical { color:#b42318; }
/* Tijani: on the queues, waits over 1 h / 2 h stand out as amber / red flags. */
.wait-time.wait-time-warning, .wait-time.wait-time-critical { display:inline-block; border-radius:999px; padding:1px 9px; }
.wait-time.wait-time-warning { color:#7a4f00; background:#fff1c2; }
.wait-time.wait-time-critical { color:#fff; background:#c0362c; }
.wait-time.wait-time-warning::after { content:" · over 1 h"; font-weight:600; }
.wait-time.wait-time-critical::after { content:" · over 2 h"; font-weight:600; }
.worklist-table table { min-width:900px; }.worklist-table tbody tr:not(.text-muted) { border-left:3px solid transparent; }.worklist-table tbody tr:not(.text-muted):hover { border-left-color:var(--vc-teal); }
@media (max-width: 767.98px) { .patient-context { position:static; }.patient-safety-strip { font-size:.82rem; }.work-card { min-height:110px; }.work-card-count { font-size:1.6rem; }.worklist-table { margin:0 -.25rem; }.worklist-table table { min-width:720px; }.page-header-bar { gap:.75rem; } }


/* =====================================================================
   Tijani Medical Hospital & Specialist Clinic theme — lilac & purple
   (recoloured from the sky-blue clinic theme; variable names kept)
   Overrides layered on top of the rules above. Palette:
     purple  #6a3d9a (primary)   deep #3a1f5d   lilac #c8a2c8 / #d4b8ec   tint #f3ecf9
     greys   #2b2d30 / #33363a (chrome)   #8a8a88   #cfd0d1   #eef0f2 (page)
   ===================================================================== */
:root {
  --oagh-maroon: #6a3d9a;
  --oagh-maroon-hover: #5d348a;
  --oagh-maroon-dark: #3a1f5d;
  --oagh-maroon-light: #d4b8ec;
  --oagh-maroon-tint: #f3ecf9;
  --oagh-grey-900: #2a1645;
  --oagh-grey-800: #3a1f5d;
  --oagh-grey-500: #8a8a88;
  --oagh-grey-300: #cfd0d1;
  --oagh-grey-100: #f6f1fa;
  --bs-primary: #6a3d9a;
  --bs-primary-rgb: 106, 61, 154;
  --bs-focus-ring-color: rgba(106, 61, 154, .25);
}
body { background-color: var(--oagh-grey-100); }
.text-maroon { color: var(--oagh-maroon) !important; }
.text-primary { color: var(--oagh-maroon) !important; }
.bg-primary { background-color: var(--oagh-maroon) !important; }
.border-primary { border-color: var(--oagh-maroon) !important; }
.form-control:focus, .form-select:focus {
  border-color: #a77fd0;
  box-shadow: 0 0 0 .25rem rgba(106, 61, 154, .18);
}
.pagination { --bs-pagination-color: var(--oagh-maroon); --bs-pagination-hover-color: var(--oagh-maroon-hover); --bs-pagination-active-bg: var(--oagh-maroon); --bs-pagination-active-border-color: var(--oagh-maroon); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(106, 61, 154,.2); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--oagh-maroon); }
.list-group { --bs-list-group-active-bg: var(--oagh-maroon); --bs-list-group-active-border-color: var(--oagh-maroon); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--oagh-maroon); }

/* Sidebar — charcoal grey with maroon accents */
.sidebar { background: linear-gradient(180deg, #4a2873 0%, var(--oagh-grey-900) 100%); }
.sidebar-brand { background: rgba(0,0,0,.12); border-bottom: 3px solid var(--oagh-maroon); }
.sidebar-logo { width: 46px; height: 46px; border-radius: 50%; padding: 0; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.brand-name { letter-spacing: .02em; }
.brand-sub { color: var(--oagh-maroon-light); font-size: .68rem; }
.sidebar-nav > li > a:hover,
.sidebar-nav > li > a.active { background-color: rgba(106, 61, 154, .38); border-left-color: #c8a2c8; }
.sub-nav li a.active { color: #fff; background-color: rgba(106, 61, 154, .45); font-weight: 600; }
.sidebar-toggle-btn { background: var(--oagh-maroon); }
.sidebar-search input:focus { border-color: var(--oagh-maroon-light); }

/* Page header bars — maroon */
.page-header-bar, .consult-header { background: linear-gradient(120deg, var(--oagh-maroon) 0%, #57308a 65%, var(--oagh-maroon-dark) 100%); }
.page-header-bar .btn-primary { --bs-btn-bg: #fff; --bs-btn-color: var(--oagh-maroon); --bs-btn-border-color: #fff; --bs-btn-hover-bg: #f3ecf9; --bs-btn-hover-color: var(--oagh-maroon-dark); --bs-btn-hover-border-color: #f3ecf9; --bs-btn-active-bg: #e2d3ef; --bs-btn-active-color: var(--oagh-maroon-dark); font-weight: 600; }
.page-header-bar .btn-light { color: var(--oagh-maroon); font-weight: 600; }
table.table thead { background-color: #efe7f5; }
.history-nav-icon { background: linear-gradient(160deg, var(--oagh-grey-800) 0%, var(--oagh-maroon) 100%); }

/* ===== Login (OAGH) =====
   Sized from the window height (vh) so the whole card fits on a laptop
   screen, including Windows display scaling at 125-150%. */
.login-page { background: var(--oagh-grey-500); }
.login-wrapper {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(180deg,
    #d6d6d6 0%, #cbcbcb calc(50% - 6px),
    #6b2fa6 calc(50% - 6px), #6b2fa6 calc(50% + 6px),
    #8a8a88 calc(50% + 6px), #858583 100%);
}
.login-card {
  background: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  max-width: 430px;
  width: 100%;
  padding: clamp(6px, 1.4vh, 12px) 34px clamp(12px, 2.2vh, 20px);
}
.login-logo { width: clamp(100px, 25vh, 190px); height: clamp(100px, 25vh, 190px); object-fit: contain; }
.login-form { margin-top: clamp(8px, 2.2vh, 20px); }
.login-form .mb-3, .login-form .mb-4 { margin-bottom: clamp(8px, 1.8vh, 16px) !important; }
.login-form .form-label { font-size: 1rem; color: #3a3a3a; margin-bottom: .35rem; }
.login-form .form-control { height: clamp(36px, 5.2vh, 44px); border-radius: 6px; border-color: #dcdcdc; font-size: 1rem; }
.btn-login {
  height: clamp(38px, 5.4vh, 44px); border-radius: 6px; font-size: 1.05rem;
  background-color: var(--oagh-maroon); border-color: var(--oagh-maroon); color: #fff;
}
.btn-login:hover, .btn-login:focus { background-color: var(--oagh-maroon-hover); border-color: var(--oagh-maroon-hover); color: #fff; }
.btn-login:active { background-color: var(--oagh-maroon-dark) !important; color: #fff !important; }
.login-brands { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: clamp(10px, 2.6vh, 24px); }
.easiclerk-brand { display: flex; align-items: center; gap: 10px; }
.easiclerk-mark {
  display: inline-grid; place-items: center; width: clamp(34px, 5.5vh, 46px); height: clamp(34px, 5.5vh, 46px); border-radius: 10px;
  background: linear-gradient(160deg, #1f8c6c 0%, #0f6a50 100%); color: #fff;
  font-weight: 700; font-size: 1.4rem; box-shadow: 0 2px 6px rgba(15,106,80,.35);
}
.easiclerk-name { font-weight: 700; font-size: 1.5rem; color: #1f1f1f; letter-spacing: -.01em; }
.serendipity-brand { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.serendipity-brand img { width: clamp(30px, 5vh, 42px); height: clamp(30px, 5vh, 42px); object-fit: contain; }
.serendipity-brand span { font-weight: 700; font-size: .9rem; color: #1f1f1f; }
@media (max-width: 575.98px) {
  .login-card { padding-left: 20px; padding-right: 20px; }
  .easiclerk-name { font-size: 1.25rem; }
  .serendipity-brand span { font-size: .8rem; }
}

/* ===== Clinic badges & cards (Clinics module) ===== */
.clinic-badge { color: #fff; font-weight: 600; letter-spacing: .01em; }
.clinic-badge i { margin-right: 2px; }
.clinic-card {
  --clinic-color: var(--oagh-maroon);
  display: block; position: relative; height: 100%;
  background: #fff; color: var(--oagh-grey-800); text-decoration: none;
  border: 1px solid #e3e4e6; border-top: 5px solid var(--clinic-color);
  border-radius: 12px; padding: 16px 16px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.clinic-card:hover { color: var(--oagh-grey-800); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.clinic-card-quiet { opacity: .8; }
.clinic-card-quiet:hover { opacity: 1; }
.clinic-card-icon {
  position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: var(--clinic-color);
}
.clinic-card-code { font-size: 1.55rem; font-weight: 800; color: var(--clinic-color); line-height: 1.1; padding-right: 54px; }
.clinic-card-name { font-weight: 600; font-size: .95rem; margin-top: 2px; padding-right: 54px; }
.clinic-card-desc { font-size: .8rem; color: #7a7f87; margin-top: 6px; min-height: 2.4em; }
.clinic-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e1e2e4; }
.clinic-card-stats > div { display: flex; flex-direction: column; }
.clinic-card-stats span:last-child { font-size: .72rem; color: #8a8f96; text-transform: uppercase; letter-spacing: .03em; }
.clinic-card-num { font-size: 1.45rem; font-weight: 750; color: var(--oagh-grey-800); line-height: 1.15; }
.clinic-card-num-sm { font-size: 1.05rem; line-height: 1.6; }
.clinic-header { background: linear-gradient(120deg, var(--clinic-color, var(--oagh-maroon)) 0%, var(--oagh-maroon-dark) 100%); }
.clinic-header-icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; background: rgba(255,255,255,.16); color: #fff; }

/* ===== Ward Board — stack cards (Admissions) ===== */
.ward-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px 16px; }
.ward-stack { position: relative; display: block; padding-bottom: 12px; text-decoration: none; color: inherit; }
.ward-layer { position: absolute; border-radius: 12px; background: #fff; border: 1px solid #ddd0e6; }
.ward-layer-1 { left: 7px; right: 7px; top: 7px; bottom: 6px; background: #f5effa; z-index: 1; }
.ward-layer-2 { left: 14px; right: 14px; top: 14px; bottom: 0; background: #e6daf0; z-index: 0; }
.ward-card {
  position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; min-height: 168px;
  background: #fff; border: 1px solid #e1e2e4; border-top: 4px solid var(--oagh-maroon);
  border-radius: 12px; padding: 12px 14px 12px; color: var(--oagh-grey-800);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ward-stack:hover .ward-card { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.ward-stack.selected .ward-card { border-color: var(--oagh-maroon); box-shadow: 0 0 0 3px rgba(106, 61, 154,.22), 0 8px 18px rgba(0,0,0,.1); }
.ward-stack.ward-empty .ward-card { border-top-color: #b9bbbf; background: #fafafa; }
.ward-stack.ward-empty .ward-icon { background: #e7e8ea; color: #6c7077; }
.ward-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ward-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; background: var(--oagh-maroon-tint); color: var(--oagh-maroon); }
.ward-count { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--oagh-grey-800); text-align: right; }
.ward-count small { display: block; font-size: .66rem; font-weight: 600; color: #8a8f96; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.ward-stack.ward-empty .ward-count { color: #a3a6ab; }
.ward-name { display: block; font-weight: 700; font-size: 1rem; margin-top: 10px; line-height: 1.2; }
.ward-sub { display: block; font-size: .76rem; color: #8a8f96; }
.ward-gender { display: flex; gap: 12px; font-size: .8rem; color: #5d6168; margin-top: 6px; }
.ward-gender .bi-gender-male { color: #3b6ea8; }
.ward-gender .bi-gender-female { color: #a3304f; }
.ward-patients { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed #e4e4e6; font-size: .78rem; color: #4b4f55; }
.ward-patient { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ward-patient b { color: var(--oagh-maroon); font-weight: 600; }
.ward-more { color: var(--oagh-maroon); font-weight: 600; }
.ward-none { margin-top: auto; padding-top: 8px; font-size: .78rem; color: #a3a6ab; font-style: italic; }

/* Ward picker on Admit Patient */
.ward-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.ward-pick { position: relative; margin: 0; cursor: pointer; }
.ward-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ward-pick-body {
  display: flex; flex-direction: column; height: 100%; padding: 10px 12px; border-radius: 10px;
  background: #fff; border: 2px solid #e1e2e4; box-shadow: 3px 3px 0 #ebe2f2, 6px 6px 0 #dfd1ea;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.ward-pick:hover .ward-pick-body { border-color: #a77fd0; transform: translateY(-1px); }
.ward-pick input:focus-visible + .ward-pick-body { outline: 3px solid rgba(106, 61, 154,.35); outline-offset: 2px; }
.ward-pick input:checked + .ward-pick-body { border-color: var(--oagh-maroon); background: var(--oagh-maroon-tint); box-shadow: 3px 3px 0 #cdb4e3, 6px 6px 0 #b796d6; }
.ward-pick-head { display: flex; justify-content: space-between; align-items: center; }
.ward-pick-icon { font-size: 1.1rem; color: var(--oagh-maroon); }
.ward-pick-count { font-size: .7rem; font-weight: 600; color: #6c7077; background: #f0f0f2; border-radius: 999px; padding: 1px 8px; }
.ward-pick input:checked + .ward-pick-body .ward-pick-count { background: var(--oagh-maroon); color: #fff; }
.ward-pick-name { font-weight: 700; font-size: .92rem; margin-top: 6px; line-height: 1.2; color: var(--oagh-grey-800); }
.ward-pick-sub { font-size: .72rem; color: #8a8f96; }
@media (max-width: 575.98px) {
  .ward-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .ward-card { min-height: 150px; padding: 10px; }
  .ward-count { font-size: 1.4rem; }
  .ward-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===== Page headings — grey with a thin maroon underline =====
   Replaces the maroon heading bars on every page (incl. consultation and
   clinic headers). White text and buttons stay as they were. */
.page-header-bar,
.consult-header,
.clinic-header {
  background: linear-gradient(120deg, #6b2fa6 0%, #4a2873 60%, #3a1f5d 100%);
  border-bottom: 6px solid #7449a6;
}
.page-header-bar .text-muted { color: rgba(255,255,255,.72) !important; }
.clinic-header-icon { background: var(--clinic-color, var(--oagh-maroon)); }


/* ===== Ward Board — brighter: maroon top edge on every ward card,
   including empty ones (they used to go grey and looked dull). ===== */
.ward-card { border-top: 5px solid var(--oagh-maroon); }
.ward-stack.ward-empty .ward-card { border-top-color: var(--oagh-maroon); background: #fff; }
.ward-stack.ward-empty .ward-icon { background: var(--oagh-maroon-tint); color: var(--oagh-maroon); }
.ward-stack.ward-empty .ward-count { color: #7a7f87; }
.ward-stack:hover .ward-card { border-color: #a77fd0; border-top-color: var(--oagh-maroon); }


/* ===== One theme for every stat card: maroon top edge, maroon icon =====
   Dashboard work-cards, Pharmacy/Finance/Clinic stat tiles, clinic cards
   and clinic badges all use maroon instead of a different colour each. */
.work-card, .work-card[class*="work-card-"] { border: 1px solid #e3e4e6; border-top: 5px solid var(--oagh-maroon); }
.work-card .work-card-icon, .work-card[class*="work-card-"] .work-card-icon { color: var(--oagh-maroon); }
.work-card-clear { opacity: 1; }
.work-card-clear .work-card-count { color: #7a7f87; }
.pharm-stat, .pharm-stat[class*="pharm-stat-"] { border: 1px solid #e3e4e6; border-top: 5px solid var(--oagh-maroon); }
.pharm-stat .pharm-stat-icon, .pharm-stat[class*="pharm-stat-"] .pharm-stat-icon { color: var(--oagh-maroon); }
.pharm-stat.pharm-stat-active { border-color: var(--oagh-maroon); box-shadow: 0 0 0 3px rgba(106, 61, 154,.18); }
.clinic-card, .clinic-header { --clinic-color: var(--oagh-maroon) !important; }
.clinic-badge { background-color: var(--oagh-maroon) !important; }


/* ===== Clinic icons — same soft maroon tint as the Ward Board icons ===== */
.clinic-card-icon, .clinic-header-icon { background: var(--oagh-maroon-tint) !important; color: var(--oagh-maroon); }
.clinic-card-quiet { opacity: 1; }


/* ===== Ward names in maroon (Ward Board + Admit Patient ward picker) ===== */
.ward-name, .ward-pick-name { color: var(--oagh-maroon); }


/* Tooth icon for the Dental clinic (Bootstrap Icons has no tooth glyph). */
.bi-tooth::before {
  content: "" !important; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round' d='M5 1.6c-1.9 0-3.4 1.4-3.4 3.5 0 1.6.6 2.8 1 4.2.4 1.5.5 3.1 1.1 4.5.3.7.7 1 1.2 1 .8 0 1-.9 1.2-1.8.2-1 .5-2.3 1.9-2.3s1.7 1.3 1.9 2.3c.2.9.4 1.8 1.2 1.8.5 0 .9-.3 1.2-1 .6-1.4.7-3 1.1-4.5.4-1.4 1-2.6 1-4.2 0-2.1-1.5-3.5-3.4-3.5-1.2 0-2 .6-3 .6s-1.8-.6-3-.6z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round' d='M5 1.6c-1.9 0-3.4 1.4-3.4 3.5 0 1.6.6 2.8 1 4.2.4 1.5.5 3.1 1.1 4.5.3.7.7 1 1.2 1 .8 0 1-.9 1.2-1.8.2-1 .5-2.3 1.9-2.3s1.7 1.3 1.9 2.3c.2.9.4 1.8 1.2 1.8.5 0 .9-.3 1.2-1 .6-1.4.7-3 1.1-4.5.4-1.4 1-2.6 1-4.2 0-2.1-1.5-3.5-3.4-3.5-1.2 0-2 .6-3 .6s-1.8-.6-3-.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* Storekeeper role badge */
.bg-store { background-color: #7a4b2a; color: #fff; }

/* ===== Login: ECG / QRS demarcation line =====
   Flat (isoelectric) line on the left half, ECG rhythm strip on the right
   half. On the right, the light/dark grey boundary follows the waveform. */
.login-wrapper {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #d6d6d6 0%, #cbcbcb 50%, #8a8a88 50%, #858583 100%);
}
.login-wrapper::before {
  content: "";
  position: absolute;
  left: 50%; right: 0; top: 50%;
  height: 140px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140' viewBox='0 0 360 140' preserveAspectRatio='none'%3E%3Cpath d='M0 70 H108 Q121 56 134 70 H158 L167 82 L180 6 L193 122 L203 70 H230 Q255 44 280 70 H360 V-1 H0 Z' fill='%23cbcbcb'/%3E%3Cpath d='M0 70 H108 Q121 56 134 70 H158 L167 82 L180 6 L193 122 L203 70 H230 Q255 44 280 70 H360 V141 H0 Z' fill='%238a8a88'/%3E%3Cpath d='M0 70 H108 M280 70 H360' fill='none' stroke='%237f242d' stroke-width='6'/%3E%3Cpath d='M108 70 Q121 56 134 70 H158 L167 82 L180 6 L193 122 L203 70 H230 Q255 44 280 70' fill='none' stroke='%237f242d' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 230px top / 360px 140px; /* starts just past the card edge */
  pointer-events: none;
  z-index: 0;
}
.login-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 50%; top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: #6b2fa6;
  pointer-events: none;
  z-index: 0;
}
.login-wrapper .login-card { position: relative; z-index: 1; }
@media (max-width: 575.98px) {
  .login-wrapper::before { height: 100px; background-size: 257px 100px; }
  .login-wrapper::after { height: 5px; }
}

/* ===== Clinic card titles — same maroon, weight and style as the Ward Board ward names ===== */
.clinic-card .clinic-card-code { color: var(--oagh-maroon); font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: 0; }
.clinic-card .clinic-card-name { font-size: .8rem; font-weight: 400; color: #8a8f96; margin-top: 1px; }


/* ===== Outline buttons on grey heading bars =====
   Maroon/dark outline buttons were invisible on the grey header (e.g.
   Pharmacy "+ Add Medication"); show them like the other header buttons. */
.page-header-bar .btn-outline-primary,
.page-header-bar .btn-outline-dark,
.page-header-bar .btn-outline-success,
.page-header-bar .btn-outline-info {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.5);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,.15);
  --bs-btn-hover-border-color: rgba(255,255,255,.7);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,.22);
  --bs-btn-active-border-color: rgba(255,255,255,.7);
}


/* ===== Sidebar brand block: original darker grey (lighter shade removed) ===== */


/* ===== Sharper sidebar brand: crisper logo + higher-contrast text ===== */
.sidebar .sidebar-logo { width: 50px; height: 50px; box-shadow: 0 0 0 2px #fff; image-rendering: auto; }
.sidebar .brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: .03em; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.sidebar .brand-sub { color: #fff; opacity: .95; font-weight: 600; font-size: .64rem; letter-spacing: 0; white-space: nowrap; -webkit-font-smoothing: antialiased; text-shadow: 0 1px 1px rgba(0,0,0,.25); }


/* ===== Sidebar: hospital name in plain bold white ===== */
.sidebar .brand-sub {
  color: #fff;
  opacity: 1;
  font-weight: 800;
  font-size: .68rem;
  text-shadow: none;
}


/* ===== Emergency Room board ===== */
.er-col-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; margin-bottom: 10px; background: var(--t-bg); border-left: 6px solid var(--t-color); color: #2b2d30; }
.er-empty { padding: 18px; text-align: center; color: #a0a4aa; border: 2px dashed #dcdde0; border-radius: 10px; font-style: italic; margin-bottom: 10px; }
.er-card { background: #fff; border: 1px solid #e3e4e6; border-left: 6px solid var(--t-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.er-card-overdue { box-shadow: 0 0 0 2px rgba(198,40,40,.35), 0 2px 6px rgba(0,0,0,.08); }
.er-name { font-weight: 700; font-size: 1rem; color: var(--oagh-maroon); }
.er-complaint { margin-top: 6px; font-size: .9rem; color: #3a1f5d; }
.er-vitals { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; padding: 4px 8px; background: #f6f6f7; border-radius: 6px; color: #5d6168; }
.er-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.er-actions .form-select-sm, .er-actions .form-control-sm { font-size: .8rem; }
.er-triage-badge { color: #fff; font-weight: 700; }
.er-stat { border-top-color: var(--t-color) !important; }
.er-triage-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.er-triage-pick { cursor: pointer; margin: 0; }
.er-triage-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.er-triage-pick-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; border: 3px solid var(--t-color); background: #fff; color: var(--t-color); transition: background .12s ease; }
.er-triage-pick-body strong { font-size: 1.3rem; }
.er-triage-pick-body span { color: #4b4f55; font-size: .85rem; }
.er-triage-pick:hover .er-triage-pick-body { background: var(--t-bg); }
.er-triage-pick input:checked + .er-triage-pick-body { background: var(--t-color); color: #fff; }
.er-triage-pick input:checked + .er-triage-pick-body span { color: #fff; }
.er-triage-pick input:focus-visible + .er-triage-pick-body { outline: 3px solid rgba(0,0,0,.25); outline-offset: 2px; }
@media (max-width: 575.98px) { .er-triage-picker { grid-template-columns: 1fr; } }


/* ===== EasiClerk integration ===== */
.ec-logo { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: .35em; background: linear-gradient(160deg, #1f8c6c 0%, #0f6a50 100%); color: #fff; font-weight: 800; font-size: .9em; line-height: 1; }
.ec-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; background: #eef7f3; border: 1px solid #cfe8dd; }
.ec-switch-label { font-weight: 700; color: #3a1f5d; }
.ec-switch-hint { font-size: .82rem; color: #4f6b60; }
.ec-switch .btn { font-weight: 700; }
.ec-switch .ec-mode-ec { border: 2px solid #0f6a50; color: #0f6a50; background: #fff; }
.ec-switch .ec-mode-ec.active, .ec-switch .ec-mode-ec:hover { background: #0f6a50; color: #fff; }
.ec-switch .ec-mode-ec.active .ec-logo, .ec-switch .ec-mode-ec:hover .ec-logo { background: #fff; color: #0f6a50; }
.ec-switch .ec-mode-std.active { background: #5d6168; border-color: #5d6168; color: #fff; }
.btn-easiclerk { border: 2px solid #0f6a50; color: #0f6a50; background: #fff; font-weight: 700; }
.btn-easiclerk:hover { background: #0f6a50; color: #fff; }
.btn-easiclerk .ec-logo { width: 1.3em; height: 1.3em; }
.ec-overlay { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; background: #fff; }
.ec-overlay.show { display: flex; }
body.ec-open { overflow: hidden; }
.ec-bar { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 10px 16px; background: linear-gradient(120deg, #6b2fa6 0%, #3a1f5d 100%); border-bottom: 4px solid #0f6a50; color: #fff; }
.ec-bar-title { display: flex; align-items: center; gap: 10px; }
.ec-bar-title .ec-logo { font-size: 1.4rem; }
.ec-bar-title strong { font-size: 1.15rem; }
.ec-bar-sub { font-size: .8rem; opacity: .85; }
.ec-bar-msg { flex: 1; font-size: .85rem; opacity: .9; min-width: 220px; }
.ec-bar-actions { display: flex; gap: 8px; }
.ec-insert { background: #1f8c6c; border-color: #1f8c6c; color: #fff; font-weight: 700; }
.ec-insert:hover { background: #0f6a50; color: #fff; }
.ec-frame { flex: 1; width: 100%; border: 0; }
.ec-filled { box-shadow: 0 0 0 3px rgba(31,140,108,.45) !important; border-color: #1f8c6c !important; transition: box-shadow .3s; }
.ec-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 2100; background: #b42318; color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: all .3s; }
.ec-toast.ok { background: #0f6a50; }
.ec-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sidebar-nav > li > a.sidebar-easiclerk { color: #fff; }
.sidebar-easiclerk .ec-logo { font-size: .85rem; }
@media (max-width: 575.98px) { .ec-bar-msg { display: none; } .ec-bar-actions { width: 100%; } .ec-bar-actions .btn { flex: 1; } }

/* ---------- Show / hide password eye ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 44px; width: 100%; }
.pw-wrap > input::-ms-reveal, .pw-wrap > input::-ms-clear { display: none; }
.pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px;
  border: 0; background: transparent; color: #8a8285; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; padding: 0; }
.pw-eye:hover { color: var(--oagh-maroon, #6a3d9a); background: rgba(106, 61, 154, .06); }
.pw-eye:focus-visible { outline: 2px solid var(--oagh-maroon, #6a3d9a); outline-offset: 1px; }

/* ===== "Powered by SerendipityEMR" — quiet platform credit at the foot of the sidebar ===== */
.sidebar .powered-by { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: .68rem; color: rgba(255,255,255,.55); }
.sidebar .powered-by img { width: 16px; height: 16px; object-fit: contain; opacity: .85; }
.sidebar .powered-by b { font-weight: 600; color: rgba(255,255,255,.75); letter-spacing: .01em; }

/* ===== Theatre calendar ===== */
.theatre-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.theatre-day { background: #fff; border: 1px solid #e1e2e4; border-radius: 12px; display: flex; flex-direction: column; min-height: 320px; }
.theatre-day.is-today { border-color: var(--oagh-maroon); box-shadow: 0 0 0 2px rgba(106, 61, 154,.18); }
.theatre-day.is-past { background: #fafafa; }
.theatre-day-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; border-bottom: 3px solid var(--oagh-maroon); font-size: .9rem; }
.theatre-day.is-today .theatre-day-head { background: var(--oagh-maroon); color: #fff; border-radius: 11px 11px 0 0; }
.theatre-day-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.theatre-chip { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: #2b2829; background: #f9f5fc; border: 1px solid #e6dbf0; border-left: 5px solid var(--u, var(--oagh-maroon)); border-radius: 8px; padding: 6px 8px; font-size: .78rem; line-height: 1.25; }
.theatre-chip:hover { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.08); color: #2b2829; }
.theatre-chip-time { font-weight: 700; color: #574a6a; font-size: .72rem; }
.theatre-chip-name { font-weight: 700; font-size: .84rem; }
.theatre-chip-proc { color: #5d6168; }
.theatre-chip-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.theatre-chip-faded { opacity: .5; text-decoration: line-through; }
.theatre-chip-live { background: #fff8e1; border-color: #f0d78c; }
.theatre-chip-done { background: #eef7ef; border-color: #cfe6d2; }
.theatre-blood { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #b02a37; font-size: .74rem; }
.theatre-free { color: #a3a6ab; font-size: .8rem; text-align: center; padding: 8px 0; }
.theatre-add { margin-top: auto; text-align: center; font-size: .8rem; text-decoration: none; color: var(--oagh-maroon); border: 1px dashed #d3c1e3; border-radius: 8px; padding: 4px; }
.theatre-add:hover { background: var(--oagh-maroon-tint); color: var(--oagh-maroon); }
.theatre-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.theatre-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.theatre-month-dow { font-weight: 700; font-size: .8rem; text-align: center; color: #5d6168; padding: 4px 0; }
.theatre-month-cell { background: #fff; border: 1px solid #e1e2e4; border-radius: 10px; min-height: 108px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.theatre-month-cell.is-out { background: #f6f6f7; opacity: .6; }
.theatre-month-cell.is-today { border-color: var(--oagh-maroon); box-shadow: 0 0 0 2px rgba(106, 61, 154,.18); }
.theatre-month-num { font-weight: 800; font-size: .85rem; color: #3b3637; text-decoration: none; }
.theatre-month-item { font-size: .72rem; text-decoration: none; color: #2b2829; border-left: 4px solid var(--u, var(--oagh-maroon)); background: #f9f5fc; border-radius: 5px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theatre-more { font-size: .72rem; color: var(--oagh-maroon); text-decoration: none; }
@media (max-width: 991px) { .theatre-week { grid-template-columns: repeat(7, 220px); } }
/* Lab: "Booked for surgery" stack card */
.theatre-lab-stack .ward-icon { background: #fdecec; color: #b02a37; }
.theatre-lab-stack .ward-card { border-top-color: #b02a37 !important; }
.theatre-lab-stack .ward-patient b { color: #574a6a; }

/* ===== Sidebar search box: white inside ===== */
.sidebar .sidebar-search input { background: #fff; color: #2b2829; border-color: #fff; }
.sidebar .sidebar-search input::placeholder { color: #8a8f96; }
.sidebar .sidebar-search input:focus { background: #fff; color: #2b2829; border-color: var(--oagh-maroon-light); box-shadow: 0 0 0 3px rgba(212, 184, 236,.35); }
.sidebar .sidebar-search i { color: #6c7077; z-index: 2; }

/* ===== Update v71: special precautions, hospital numbers, drug picker ===== */
.palert-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;border:1px solid #f1c2c2;background:#fff5f5;border-radius:10px}
.palert-strip.palert-empty{background:#f8f9fa;border-color:#e3e5e8;padding:6px 12px}
.palert-title{font-weight:700;color:#8b1c1c;font-size:.9rem;margin-right:4px}
.palert{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid transparent}
.palert-danger.palert,.palert-opt.palert-danger:has(input:checked){background:#b42318;color:#fff;border-color:#b42318}
.palert-warning.palert,.palert-opt.palert-warning:has(input:checked){background:#fff3cd;color:#664d03;border-color:#f2d27a}
.palert-info.palert,.palert-opt.palert-info:has(input:checked){background:#e7f1ff;color:#084298;border-color:#b6d4fe}
.palert-manage{margin-left:auto;font-size:.85rem;white-space:nowrap}
.palert-icons{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.palert-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:.7rem}
.palert-ico.palert-danger{background:#b42318;color:#fff}.palert-ico.palert-warning{background:#ffe08a;color:#664d03}.palert-ico.palert-info{background:#cfe2ff;color:#084298}
.palert-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;margin-bottom:8px;border-left:5px solid #adb5bd;background:#f8f9fa}
.palert-row.palert-danger{border-left-color:#b42318;background:#fff5f5}.palert-row.palert-warning{border-left-color:#e0a800;background:#fffbea}.palert-row.palert-info{border-left-color:#0d6efd;background:#f3f8ff}
.palert-pick{display:flex;flex-wrap:wrap;gap:6px}
.palert-opt{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid #d0d4d9;border-radius:999px;font-size:.85rem;cursor:pointer;background:#fff}
.palert-opt input{position:absolute;opacity:0;pointer-events:none}
.legacy-number-box{background:#f6f7f8;border:1px dashed #cfd3d8;border-radius:10px;padding:10px 12px}
.dp-wrap{position:relative}
.dp-list{position:absolute;left:0;right:0;top:100%;z-index:1060;background:#fff;border:1px solid #d0d4d9;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:300px;overflow-y:auto;margin-top:2px}
.dp-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:.9rem}
.dp-item.on,.dp-item:hover{background:#eef3f0}
.dp-item mark{padding:0;background:#fff3a3}
.dp-stock{font-size:.75rem;white-space:nowrap;padding:1px 7px;border-radius:999px;border:1px solid #d0d4d9;color:#555}
.dp-stock.out{background:#fde8e8;border-color:#f3b4b4;color:#9b1c1c}.dp-stock.low{background:#fff3cd;border-color:#f2d27a;color:#664d03}
.dp-note{font-size:.8rem;margin-top:4px}
.dp-presets{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dp-preset{border:1px solid #b9d3c4;background:#f0f7f3;color:#1d4d35;border-radius:999px;font-size:.78rem;padding:2px 9px;cursor:pointer}
.dp-preset:hover{background:#dcefe4}
.dp-preset .src{opacity:.7;margin-left:3px}
.rx-allergy{border:2px solid #b42318!important}

/* ===== Update v72: filter cards, My work strip, home clinic ===== */
.qf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.qf{--qf:#3b3e42;display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border:1px solid #e3e5e8;border-left:4px solid var(--qf);border-radius:10px;text-decoration:none;color:#2b2829;transition:box-shadow .15s,transform .15s,background-color .15s}
.qf:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px);color:#2b2829}
.qf .qf-top{display:flex;justify-content:space-between;align-items:center}
.qf .qf-n{font-size:1.7rem;font-weight:700;line-height:1;color:var(--qf)}
.qf .qf-top i{font-size:1.2rem;color:var(--qf);opacity:.8}
.qf .qf-l{font-weight:600;font-size:.92rem}
.qf .qf-s{font-size:.75rem;color:#6c757d}
.qf.zero .qf-n{color:#adb5bd}
.qf.on{background:var(--qf);border-color:var(--qf);color:#fff}
.qf.on .qf-n,.qf.on .qf-top i,.qf.on .qf-s{color:#fff}
.qf-dark{--qf:#3b3e42}.qf-brand{--qf:#6a3d9a}.qf-purple{--qf:#8a3f7c}.qf-amber{--qf:#b7791f}.qf-teal{--qf:#1f7a7a}.qf-green{--qf:#2f7d4f}
.qf-showing{font-size:.88rem;color:#495057}
.er-qf{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .15s,transform .15s}
.er-qf:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-1px);color:inherit}
.er-qf.on{outline:3px solid #6a3d9a;outline-offset:1px}
.mywork{background:#fff;border:1px solid #e3e5e8;border-radius:12px;padding:10px 14px}
.mywork-title{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#6a3d9a;margin-bottom:6px}
.mywork-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.mywork-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:6px 8px;border-radius:8px;background:#f8f9fa;min-width:0}
.mywork-item.has{background:#f7f1fc}
.mywork-item .mw-n{grid-row:span 2;font-size:1.5rem;font-weight:700;color:#adb5bd;line-height:1}
.mywork-item.has .mw-n{color:#6a3d9a}
.mywork-item .mw-l{font-weight:600;font-size:.88rem}
.mywork-item .mw-sub{font-weight:400;color:#6c757d;font-size:.75rem}
.mywork-item .mw-d{grid-column:2;font-size:.8rem;color:#6c757d;min-width:0}
.home-tag{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;font-weight:600;color:#6a3d9a;background:#f7f1fc;border:1px solid #dcc6f0;border-radius:999px;padding:4px 10px}

/* ===== Update v73: Anaesthesia module ===== */
.anaes-form .form-label{font-size:.8rem;font-weight:600;margin-bottom:3px;color:#495057}
.a-h{font-size:1rem;font-weight:700;color:#6a3d9a;margin-bottom:10px}
.a-chips{display:flex;flex-wrap:wrap;gap:5px}
.a-chip{position:relative;display:inline-flex;align-items:center;padding:3px 11px;border:1px solid #cfd3d8;border-radius:999px;font-size:.84rem;cursor:pointer;background:#fff;user-select:none}
.a-chip input{position:absolute;opacity:0;pointer-events:none}
.a-chip:has(input:checked){background:#6a3d9a;border-color:#6a3d9a;color:#fff}
.a-chip:has(input:focus-visible){outline:2px solid #6a3d9a;outline-offset:2px}
fieldset[disabled] .a-chip{cursor:default;opacity:.85}
.a-fit{display:flex;flex-direction:column;gap:6px}
.a-fit-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #d0d4d9;border-radius:8px;cursor:pointer;font-weight:600}
.a-fit-opt:has(input:checked).a-fit-fit{background:#e8f5ec;border-color:#2f7d4f;color:#1d5235}
.a-fit-opt:has(input:checked).a-fit-fit_precautions{background:#fff6dd;border-color:#d4a017;color:#664d03}
.a-fit-opt:has(input:checked).a-fit-not_fit{background:#fde8e8;border-color:#b42318;color:#8b1c1c}
.a-fit-opt:has(input:checked).a-fit-pending{background:#f1f3f5;border-color:#868e96}
@media (min-width:1200px){.anaes-sticky{position:sticky;top:76px}}
.anaes-preop-line{background:#fff;border:1px solid #e3e5e8;border-radius:10px;padding:8px 12px;font-size:.9rem}
.anaes-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.anaes-time{border:1px dashed #cfd3d8;border-radius:8px;padding:6px 10px}
.anaes-time.set{border-style:solid;border-color:#b9d3c4;background:#f3faf6}
.anaes-time-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.anaes-time-edit label{display:flex;flex-direction:column;font-size:.75rem;color:#6c757d}
.anaes-chart-wrap{border:1px solid #e3e5e8;border-radius:8px;background:#fff;padding:6px}
.anaes-svg{width:100%;height:auto;display:block}
.anaes-svg .g{stroke:#eceef1;stroke-width:1}.anaes-svg .g2{stroke:#d5d9de}
.anaes-svg .ax{font-size:10px;fill:#6c757d}
.anaes-svg .mk{stroke:#6a3d9a;stroke-dasharray:4 3;stroke-width:1.2}.anaes-svg .mkt{font-size:10px;fill:#6a3d9a;font-weight:700}
.anaes-svg .bpl{stroke:#1f4e8c;stroke-width:1.2}
.sbp,.dbp{fill:#1f4e8c}
.anaes-svg .hrl{fill:none;stroke:#c62828;stroke-width:1.4}
.hr{fill:#c62828}
.anaes-legend{display:flex;gap:16px;font-size:.78rem;color:#495057;padding:2px 6px}
.anaes-legend span{display:inline-flex;align-items:center;gap:5px}
.anaes-obs-grid,.anaes-given-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;align-items:end}
.anaes-obs-grid label,.anaes-given-grid label{display:flex;flex-direction:column;font-size:.75rem;color:#6c757d;margin:0}
.anaes-obs-grid .wide,.anaes-given-grid .wide{grid-column:span 2}
.a-quick-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:4px}
.a-quick-k{font-size:.72rem;font-weight:700;text-transform:uppercase;color:#6c757d;width:48px}
.a-q{border:1px solid #d0d4d9;background:#fff;border-radius:999px;font-size:.78rem;padding:1px 9px;cursor:pointer}
.a-q:hover{background:#f7f1fc;border-color:#dcc6f0}
.a-kind{font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:999px;background:#eef0f2}
.a-kind-fluid .a-kind{background:#e7f1ff;color:#084298}.a-kind-blood .a-kind{background:#fde8e8;color:#9b1c1c}.a-kind-event .a-kind{background:#fff3cd;color:#664d03}
@media print{
  .sidebar,.sidebar-backdrop,.topbar,.no-print,footer,.btn,.palert-manage{display:none!important}
  .main-content,main{margin:0!important;padding:0!important}
  .card{box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid}
  .a-chip:not(:has(input:checked)){display:none}
  .a-chip{border:none;padding:0 4px;background:none!important;color:#000!important;font-weight:700}
  input.form-control,textarea.form-control,select.form-select{border:none!important;padding:0!important;background:none!important}
}

/* Count cards keep the house maroon edge whatever their colour (user request). */
.qf{border-left-color:#6a3d9a}
.qf.on{border-color:#6a3d9a}

/* ===== Update v74: partograph ===== */
.parto-scroll{overflow-x:auto}
.parto-svg{display:block;width:100%;height:auto;font-family:inherit}
.parto-svg .p-band{fill:#fff;stroke:#c9ced4;stroke-width:.8}
.parto-svg .p-lbl{font-size:11px;font-weight:700;fill:#3b3e42}
.parto-svg .p-sub{font-size:9.5px;fill:#6c757d}
.parto-svg .p-ax{font-size:9.5px;fill:#6c757d}
.parto-svg .p-g{stroke:#eef0f2;stroke-width:1}.parto-svg .p-g2{stroke:#d7dbe0;stroke-width:1}.parto-svg .p-g3{stroke:#9aa1a9;stroke-width:1}
.parto-svg .p-norm{fill:#e9f6ee}
.parto-svg .p-fhrl{fill:none;stroke:#1f4e8c;stroke-width:1.4}.parto-svg .p-fhr{fill:#1f4e8c}
.parto-svg .p-bad{fill:#c62828}
.parto-svg .p-val{font-size:10.5px;font-weight:600;fill:#2b2829}.parto-svg .p-red{fill:#c62828}
.parto-svg .p-alert{stroke:#d4a017;stroke-width:2}.parto-svg .p-alert-t{font-size:10px;font-weight:700;fill:#a07800}
.parto-svg .p-action{stroke:#c62828;stroke-width:2}.parto-svg .p-action-t{font-size:10px;font-weight:700;fill:#c62828}
.parto-svg .p-x line{stroke:#2b2829;stroke-width:2.2}
.parto-svg .p-dill{fill:none;stroke:#2b2829;stroke-width:1.2}
.parto-svg .p-o{fill:#fff;stroke:#6a3d9a;stroke-width:2}
.parto-svg .p-desl{fill:none;stroke:#6a3d9a;stroke-width:1.2;stroke-dasharray:4 3}
.p-c1{fill:#fff;stroke:#6a3d9a;stroke-width:1;stroke-dasharray:1.5 1.5}
.p-c2{fill:#dcc4f0;stroke:#6a3d9a;stroke-width:1}
.p-c3{fill:#6a3d9a}
.parto-svg .p-drug{font-size:9px;fill:#2b2829}
.parto-svg .p-bp{fill:#1f4e8c}.parto-svg .p-bpl{stroke:#1f4e8c;stroke-width:1.2}
.parto-svg .p-pul{fill:#c62828}.parto-svg .p-pull{fill:none;stroke:#c62828;stroke-width:1.2}
.parto-key .pk{display:inline-block;width:14px;height:9px;vertical-align:middle;margin:0 2px 0 8px;border:1px solid #6a3d9a}
.parto-key .pk.p-c1{background:repeating-linear-gradient(90deg,#fff 0 2px,#dcc4f0 2px 3px)}.parto-key .pk.p-c2{background:#dcc4f0}.parto-key .pk.p-c3{background:#6a3d9a}
.parto-due{display:flex;flex-wrap:wrap;gap:6px}
.parto-due-i{font-size:.8rem;padding:3px 10px;border-radius:999px;background:#eef6f1;border:1px solid #cfe5d8;color:#1d5235}
.parto-due-i.due{background:#fff3cd;border-color:#f2d27a;color:#664d03;font-weight:600}
.parto-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.parto-form fieldset{border:1px solid #e3e5e8;border-radius:8px;padding:6px 10px 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.parto-form legend{float:none;width:auto;font-size:.8rem;font-weight:700;color:#6a3d9a;padding:0 4px;margin:0}
.parto-form label{display:flex;flex-direction:column;font-size:.75rem;color:#6c757d;margin:0}
.parto-form .wide{grid-column:span 2}.parto-form .wide2{grid-column:1/-1}
@media print{.parto-scroll{overflow:visible}.parto-svg{width:100%;height:auto}}


/* ===== Naira shortcut in the sidebar brand: one tap to generate a bill ===== */
.sidebar .sidebar-brand { position: relative; }
.sidebar .brand-bill {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--oagh-maroon, #6a3d9a);
  font-weight: 800; font-size: 1.05rem; line-height: 1; text-decoration: none;
  box-shadow: 0 0 0 2px var(--oagh-maroon, #6a3d9a), 0 2px 6px rgba(0,0,0,.25);
  transition: transform .15s ease, background .15s ease;
}
.sidebar .brand-bill:hover, .sidebar .brand-bill:focus-visible { background: var(--oagh-maroon, #6a3d9a); color: #fff; transform: scale(1.08); outline: none; }


/* ===== Laboratory landing: work-queue cards fill the space beside the blood card ===== */
.lab-qf{grid-template-columns:repeat(2,minmax(0,1fr));height:100%}
.lab-qf .qf{justify-content:center;min-height:96px}
@media (max-width: 575.98px){ .lab-qf{grid-template-columns:1fr 1fr} }
.lab-qf.wide{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 767.98px){ .lab-qf.wide{grid-template-columns:1fr 1fr} }

/* ===== Blood Bank: stock by blood group (stack card on Laboratory + Blood Bank page) ===== */
.bb-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #e4e4e6; }
.bb-mini-g { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 3px 7px; border-radius: 7px; background: var(--oagh-maroon-tint, #f3ecf9); font-size: .8rem; }
.bb-mini-g b { color: var(--oagh-maroon, #6a3d9a); font-weight: 700; }
.bb-mini-g span { font-weight: 800; color: var(--oagh-grey-800, #2b2d30); }
.bb-mini-g.low { box-shadow: inset 0 0 0 1px #d9822b; }
.bb-mini-g.zero { background: #f1f1f3; }
.bb-mini-g.zero b, .bb-mini-g.zero span { color: #a3a6ab; }
.bb-groups { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.bb-tile { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e3e5e8; border-top: 4px solid var(--oagh-maroon, #6a3d9a); text-decoration: none; color: #2b2829; }
.bb-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); color: #2b2829; }
.bb-tile .bb-n { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--oagh-maroon, #6a3d9a); }
.bb-tile .bb-l { font-weight: 700; margin-top: 4px; }
.bb-tile .bb-s { font-size: .74rem; color: #6c757d; }
.bb-tile.bb-total { border-top-color: #3b3e42; } .bb-tile.bb-total .bb-n { color: #3b3e42; }
.bb-tile.zero .bb-n { color: #adb5bd; }
.bb-tile.low { border-top-color: #d9822b; }
.bb-tile.on { background: var(--oagh-maroon, #6a3d9a); color: #fff; } .bb-tile.on .bb-n, .bb-tile.on .bb-s { color: #fff; }
.bb-chip { display: inline-block; min-width: 38px; text-align: center; padding: 1px 6px; border-radius: 6px; background: var(--oagh-maroon-tint, #f3ecf9); color: var(--oagh-maroon, #6a3d9a); font-weight: 700; }
@media (max-width: 991.98px) { .bb-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bb-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Naira shortcut for staff without billing rights: same button, explains instead of opening the page */
.sidebar button.brand-bill { border: 0; padding: 0; cursor: pointer; }
.sidebar .brand-bill-note { position: absolute; top: 46px; right: 8px; z-index: 30; width: 210px; padding: 8px 10px; border-radius: 8px; background: #fff; color: #2b2d30; font-size: .78rem; line-height: 1.3; box-shadow: 0 6px 18px rgba(0,0,0,.25); border-left: 4px solid var(--oagh-maroon, #6a3d9a); }

/* ===== Generate a Bill — pinned at the foot of the sidebar (replaces the ₦ badge in the brand corner) ===== */
.sidebar .brand-bill, .sidebar .brand-bill-note { display: none !important; }
.sidebar .sidebar-bill { background: var(--oagh-maroon, #6a3d9a); border: 1px solid var(--oagh-maroon, #6a3d9a); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; }
.sidebar .sidebar-bill:hover, .sidebar .sidebar-bill:focus-visible { background: #7449a6; border-color: #fff; color: #fff; }
.sidebar .sidebar-bill .naira { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--oagh-maroon, #6a3d9a); font-weight: 800; font-size: .9rem; line-height: 1; }
.sidebar .sidebar-bill-note { background: #fff; color: #2b2d30; font-size: .78rem; line-height: 1.3; padding: 7px 9px; border-radius: 8px; border-left: 4px solid var(--oagh-maroon, #6a3d9a); }

/* =====================================================================
   Tijani Medical Hospital & Specialist Clinic — login page and brand touches.
   Lilac backdrop fading to purple, deep-purple serif title, purple
   button, orchid ampersand accent.
   ===================================================================== */
:root {
  --tmh-lilac: #c8a2c8;
  --tmh-deep: #3a1f5d;
  --tmh-purple: #6a3d9a;
  --tmh-orchid: #9b4dca;
  --tmh-easiclerk: #507f73;
}
.tmh-login-body { background-color: var(--tmh-lilac); }
.tmh-login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(160deg, #ecdcf2 0%, var(--tmh-lilac) 45%, #8e5fb5 100%);
}
.tmh-login-card {
  background: #fff; width: 100%; max-width: 420px; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(58, 31, 93, 0.18);
  padding: clamp(18px, 3.2vh, 28px) 34px clamp(14px, 2.4vh, 22px);
}
.tmh-login-title {
  font-family: Georgia, "Times New Roman", Times, serif; font-weight: 400;
  font-size: clamp(1.1rem, 2.8vh, 1.35rem); line-height: 1.25; letter-spacing: 0.01em;
  color: var(--tmh-deep); text-align: center; margin: 0 0 6px;
}
.tmh-amp { color: var(--tmh-orchid); }
.tmh-login-logo { display: block; width: clamp(110px, 21vh, 168px); height: auto; margin: 2px auto clamp(10px, 2vh, 18px); }
.tmh-login-card .form-label { color: #333; font-size: 0.95rem; margin-bottom: 6px; }
.tmh-input { border: 1px solid #c9bcd6; border-radius: 6px; padding: 8px 10px; font-size: 0.92rem; }
.tmh-input:focus { border-color: var(--tmh-purple); box-shadow: 0 0 0 0.2rem rgba(106, 61, 154, 0.2); }
.tmh-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #f1e8fc inset; }
.tmh-login-form .mb-3, .tmh-login-form .mb-4 { margin-bottom: clamp(10px, 2vh, 16px) !important; }
.tmh-login-btn {
  background-color: var(--tmh-purple); border-color: var(--tmh-purple); color: #fff;
  border-radius: 6px; padding: 8px 12px; font-size: 1rem; box-shadow: 0 2px 4px rgba(58, 31, 93, 0.25);
}
.tmh-login-btn:hover, .tmh-login-btn:focus { background-color: #5d348a; border-color: #5d348a; color: #fff; }
.tmh-login-btn:active { background-color: #502c78 !important; color: #fff !important; }
.tmh-login-brands { display: flex; align-items: flex-end; justify-content: space-between; margin-top: clamp(10px, 2vh, 16px); }
.tmh-easiclerk { display: flex; align-items: center; gap: 10px; }
.tmh-easiclerk-mark {
  width: 32px; height: 32px; border-radius: 7px; background: var(--tmh-easiclerk); color: #fff;
  font-weight: 700; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.tmh-easiclerk-name { font-weight: 700; font-size: 1.3rem; color: #5a5a5a; }
.tmh-serendipity { display: flex; flex-direction: column; align-items: center; }
.tmh-serendipity img { width: 26px; height: 26px; object-fit: contain; margin-bottom: 2px; }
.tmh-serendipity span { font-size: 0.8rem; color: #222; }
@media (max-width: 400px) {
  .tmh-login-card { padding-left: 20px; padding-right: 20px; }
  .tmh-login-title { font-size: 1.05rem; }
  .tmh-easiclerk-name { font-size: 1.1rem; }
}

/* Sidebar brand: clinic name in the login title's serif, red ampersand */
.sidebar .brand-name { font-family: Georgia, "Times New Roman", Times, serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .03em; }
.sidebar .brand-name .tmh-amp { color: #f0c8ff; }
.sidebar .brand-sub .tmh-amp { color: #f0c8ff; }
.sidebar .sidebar-logo { object-fit: contain; padding: 0; border-radius: 50%; background: transparent; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.sidebar-brand { border-bottom-color: var(--tmh-lilac); }

/* Tijani: Nursing Station clinic filter chips on one line (scrolls sideways on small screens) */
.clinic-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.clinic-chips .btn { flex: 1 1 auto; white-space: nowrap; padding: .3rem .55rem; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.clinic-chips .btn .badge { margin-left: 2px !important; font-size: .7rem; padding: .2em .45em; }

/* Tijani: package picker on Generate a Bill */
.pkg-picker { background: var(--oagh-maroon-tint, #f3ecf9); border: 1px solid #e2d3ef; border-radius: 10px; padding: 12px 14px; max-width: 720px; }

/* Tijani: Records and Admin stack cards all the same height in a row */
.records-stack, .admin-stack { height: 100%; }

/* Tijani: Lab category / Imaging modality buttons (replace the dropdowns) */
.qf-chips{display:flex;flex-wrap:wrap;gap:8px}
.qf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid #d9cfe6;border-radius:999px;background:#fff;color:#2b2829;text-decoration:none;font-weight:600;font-size:.9rem;transition:background-color .15s,border-color .15s}
.qf-chip:hover{border-color:#6a3d9a;color:#6a3d9a}
.qf-chip .n{background:#efe8f7;color:#6a3d9a;border-radius:999px;padding:0 8px;font-size:.78rem;line-height:1.5}
.qf-chip.on{background:#6a3d9a;border-color:#6a3d9a;color:#fff}
.qf-chip.on .n{background:rgba(255,255,255,.25);color:#fff}

/* ===== Tijani v92: notification bell, panel, pop-ups, live-list bar ===== */
.sidebar-search.has-bell { padding-right: 58px; }
.notif-bell { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; font-size: 1.1rem; padding: 0; }
.notif-bell:hover { background: rgba(255,255,255,.26); }
.notif-bell.has-unread i { animation: notif-ring 1.2s ease-in-out 2; }
.notif-bell .notif-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #dc3545; color: #fff; font-size: .7rem; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #3a1f5d; }
.notif-bell.has-attention::after { content: ''; position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: #ffc107; box-shadow: 0 0 0 2px #3a1f5d; }
.sidebar-bell-row { display: flex; align-items: center; min-height: 60px; color: rgba(255,255,255,.75); font-size: .9rem; }
.notif-bell-mobile { position: fixed; top: 10px; right: 10px; transform: none; z-index: 1040; background: var(--oagh-maroon, #6a3d9a); width: 44px; height: 44px; }
@keyframes notif-ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.notif-panel { position: fixed; z-index: 2050; width: 380px; max-width: calc(100vw - 16px); max-height: 70vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; border: 1px solid #e3e0ea; overflow: hidden; }
.notif-head { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid #eee; background: #faf8fd; }
.notif-sound { font-size: .8rem; color: #555; display: flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; }
.notif-list { overflow-y: auto; }
.notif-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #888; padding: 8px 14px 4px; }
.notif-item, .notif-toast { display: flex; gap: 10px; padding: 9px 14px; text-decoration: none; color: #2b2829; border-bottom: 1px solid #f1eff5; }
.notif-item:hover { background: #f6f2fb; color: #2b2829; }
.notif-item.unread { background: #f1e9fb; }
.notif-item.attention { background: #fff8e6; }
.notif-ic { font-size: 1.15rem; line-height: 1.2; }
.notif-body { display: flex; flex-direction: column; min-width: 0; }
.notif-title { font-weight: 600; font-size: .9rem; }
.notif-text { font-size: .82rem; color: #555; overflow-wrap: anywhere; }
.notif-time { font-size: .72rem; color: #999; margin-top: 1px; }
.notif-empty { padding: 16px 14px; color: #888; font-size: .9rem; }
.notif-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2100; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.notif-toast { background: #fff; border-radius: 10px; border: 1px solid #e3e0ea; border-left: 4px solid #6a3d9a; transition: opacity .6s; }
.notif-toast.fade-out { opacity: 0; }
.live-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2000; background: #3a1f5d; color: #fff; border-radius: 999px; padding: 8px 10px 8px 18px; font-size: .92rem; display: flex; align-items: center; }
@media print { .notif-bell, .notif-panel, .notif-toasts, .live-bar { display: none !important; } }
.sidebar .sidebar-search .notif-bell i, .notif-bell-mobile i { position: static; transform: none; left: auto; top: auto; color: #fff; font-size: 1.15rem; z-index: auto; }

/* Staff & Logins: deactivated accounts sit at the bottom, faded (readable on hover) */
tr.user-divider td { background: #f3f0f7 !important; color: #6c757d; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding-top: 14px; }
tr.user-inactive td { opacity: .5; filter: grayscale(1); transition: opacity .15s; }
tr.user-inactive:hover td { opacity: .9; }
tr.user-inactive td:last-child { opacity: 1; filter: none; }

/* ---------- UX update (12 Nov 2026) ---------- */
/* Keyboard: a clear outline on whatever has focus (mouse clicks don't show it). */
.skip-link { position:absolute; left:-9999px; top:.5rem; z-index:3000; background:#fff; color:var(--oagh-maroon); padding:.5rem .9rem; border-radius:6px; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.skip-link:focus { left:.5rem; }
main:focus { outline:none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .form-check-input:focus-visible {
  outline:3px solid rgba(106, 61, 154, .55) !important; outline-offset:2px; box-shadow:none;
}
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color:#e9d8f7 !important; }
.sidebar-search input[type=search] { -webkit-appearance:none; appearance:none; }
.sidebar-search input[type=search]::-webkit-search-cancel-button { filter:invert(1) opacity(.6); }
.req { color:var(--vc-red, #c0392b); font-weight:600; }

/* Long forms: titled sections, and a Save bar that stays in view. */
.form-section-title { font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--oagh-maroon); margin:1.6rem 0 .6rem; padding-bottom:.35rem; border-bottom:1px solid #ece4f3; display:flex; align-items:center; gap:.4rem; }
.form-section-title:first-child { margin-top:0; }
details.form-more > summary { list-style:none; cursor:pointer; }
details.form-more > summary::-webkit-details-marker { display:none; }
details.form-more > summary .bi-chevron-right { transition:transform .15s; }
details.form-more[open] > summary .bi-chevron-right { transform:rotate(90deg); }
.form-actions-sticky { position:sticky; bottom:0; z-index:20; background:rgba(255,255,255,.96); backdrop-filter:blur(4px); border-top:1px solid #ece4f3; margin:1.5rem -1.5rem -1.5rem; padding:.75rem 1.5rem; border-radius:0 0 12px 12px; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.form-actions-sticky .form-actions-hint { margin-left:auto; font-size:.82rem; color:#6c757d; }
.age-or { font-size:.8rem; color:#6c757d; }

/* Work lists: compact waiting time and fewer buttons per row. */
.wait-since { font-size:.78rem; color:#6c757d; white-space:nowrap; }
.row-actions { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:.35rem; align-items:center; }
.row-actions .btn { white-space:nowrap; }
.row-actions .dropdown-menu { font-size:.9rem; }
.row-actions .dropdown-item.text-danger:active { color:#fff !important; }
.list-head { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-bottom:.5rem; }
.list-head .list-head-date { display:flex; align-items:center; gap:.4rem; margin-left:auto; font-size:.85rem; }
.list-head .list-head-date .form-control { width:auto; min-width:9rem; padding:.2rem .5rem; font-size:.85rem; }
.list-head .list-head-date .flatpickr-input + .form-control { width:9rem; }

/* Patient chart: allergies stand out in the safety strip. */
.patient-safety-strip .has-allergy { color:var(--vc-red, #b02a37); font-weight:700; }
.care-actions .btn { margin:0 .25rem .4rem 0; }
/* Clinic page: the filter cards as one compact row, so the list starts higher. */
.qf-row.qf-compact { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.qf-compact .qf { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:8px 12px; }
.qf-compact .qf .qf-top { grid-row:span 2; }
.qf-compact .qf .qf-top i { display:none; }
.qf-compact .qf .qf-n { font-size:1.4rem; }
.qf-compact .qf .qf-l { font-size:.86rem; line-height:1.15; }
.qf-compact .qf .qf-s { font-size:.72rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-head .list-head-date { flex-wrap:wrap; }
@media (max-width: 575.98px) {
  .list-head .list-head-date { margin-left:0; width:100%; }
  .list-head .list-head-date .form-control { min-width:0; flex:1 1 7rem; }
  .form-actions-sticky { margin:1.25rem -1rem -1rem; padding:.6rem 1rem; }
}
.form-actions-sticky.plain { margin:1.25rem 0 0; padding:.6rem 0; border-radius:0; background:rgba(255,255,255,.96); }
/* Phones: "My work" shows only what has something in it, so the waiting list is reached sooner. */
@media (max-width: 575.98px) {
  .mywork-item:not(.has) { display:none; }
  .mywork:not(:has(.mywork-item.has)) { display:none; }
  .mywork-grid { gap:6px; }
}

/* ---------- Finance Charts (12 Nov 2026) ---------- */
.fc-picker { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.fc-group { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--oagh-maroon); padding: .55rem .5rem .2rem; }
.fc-ind { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .38rem .6rem; border-radius: 6px; font-size: .9rem; color: #2b2829; border-left: 3px solid transparent; }
.fc-ind:hover { background: #f6f0fb; }
.fc-ind.active { background: #f3ecf9; border-left-color: var(--oagh-maroon); font-weight: 600; }
.fc-loading { opacity: .5; transition: opacity .15s; pointer-events: none; }
.fc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: .6rem 0 .8rem; }
.fc-stat { border: 1px solid #ece7f2; border-radius: 8px; padding: .45rem .65rem; background: #fcfbfd; min-width: 0; }
.fc-stat-l { font-size: .72rem; color: #5f5a66; }
.fc-stat-v { font-size: 1.05rem; font-weight: 600; color: #2b2829; overflow-wrap: anywhere; line-height: 1.25; }
.fc-stat-n { font-size: .72rem; color: #5f5a66; }
.fc-plot { position: relative; width: 100%; border-radius: 6px; }
.fc-plot svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.fc-plot:focus-visible { outline: 3px solid rgba(106, 61, 154, .55); outline-offset: 2px; }
.fc-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .82rem; color: #2b2829; margin-bottom: .35rem; }
.fc-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.fc-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fc-swatch-line { width: 14px; height: 3px; border-radius: 2px; }
.fc-tip { position: absolute; z-index: 5; pointer-events: none; background: #fff; border: 1px solid #ddd6e6; border-radius: 8px; box-shadow: 0 6px 18px rgba(40, 20, 70, .14); padding: .45rem .6rem; font-size: .82rem; min-width: 130px; max-width: 260px; color: #2b2829; }
.fc-tip-date { color: #5f5a66; font-size: .76rem; margin-bottom: .2rem; }
.fc-tip-row { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.fc-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.fc-tip-name { color: #5f5a66; }
.fc-tip-total { border-top: 1px solid #ece7f2; margin-top: .2rem; padding-top: .2rem; }
.fc-empty { padding: 2.5rem 1rem; text-align: center; color: #5f5a66; }
.fc-rank-row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; align-items: center; gap: .75rem; padding: .3rem 0; }
.fc-rank-name { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-rank-track { height: 14px; }
.fc-rank-bar { height: 14px; background: var(--oagh-maroon); border-radius: 0 4px 4px 0; min-width: 2px; }
.fc-rank-row:hover .fc-rank-bar { background: var(--oagh-maroon-hover); }
.fc-rank-val { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fc-tablescroll { max-height: 360px; overflow-y: auto; }
.fc-table td, .fc-table th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-table thead th { position: sticky; top: 0; background: #fff; }
@media (max-width: 991.98px) { .fc-picker { position: static; max-height: 220px; } }
@media (max-width: 575.98px) { .fc-rank-row { grid-template-columns: 1fr auto; } .fc-rank-track { grid-column: 1 / -1; order: 3; } }
@media print { .fc-picker, #fcRanges, #fcCustom, #fcFreq, #fcTypes, #fcCmp { display: none !important; } }

/* Inpatient lists: Bed / Days / Check-in (12 Nov 2026) */
.stay-bed { display:inline-block; min-width:2rem; padding:.1rem .4rem; border-radius:6px; background:#f3ecf9; color:#4a2370; font-weight:600; }
.stay-bed.none { background:transparent; color:#adb5bd; font-weight:400; }
.stay-days { display:inline-block; min-width:1.8rem; font-weight:600; font-variant-numeric:tabular-nums; }
.stay-days.week { color:#9a6a00; }
.stay-days.long { color:#b02a37; }

/* UX review (12 Nov 2026): patient pick-lists, picked-patient line, list filter */
.patient-result { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .5rem; }
.patient-result .pp-name { font-weight:600; }
.patient-result .pp-meta { font-size:.82rem; color:#6c757d; }
.patient-result .pp-hmo { font-size:.72rem; }
.patient-result:focus { outline:2px solid var(--oagh-maroon); outline-offset:-2px; z-index:2; }
.picked-patient { margin-top:.35rem; font-size:.88rem; padding:.3rem .55rem; border-radius:8px; background:#f3ecf9; border:1px solid #e2d3ef; display:inline-block; max-width:100%; }
.picked-patient .bi { color:#198754; }
.list-filter { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.list-filter .input-group { max-width:340px; }
.list-filter .list-filter-count { font-size:.82rem; color:#6c757d; }
tr[data-bs-toggle="collapse"]:focus-visible { outline:2px solid var(--oagh-maroon); outline-offset:-2px; }
tr[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down { transform:rotate(180deg); }
.q-sum { font-size:.82rem; color:#495057; max-width:420px; }
.q-wait { font-variant-numeric:tabular-nums; white-space:nowrap; }
.q-wait.long { color:#b02a37; font-weight:600; }
.q-urgent { display:inline-flex; align-items:center; gap:.25rem; background:#b02a37; color:#fff; border-radius:4px; padding:.05rem .4rem; font-size:.72rem; font-weight:700; letter-spacing:.02em; }

/* "Next up" strip on each role's start page (UX review, 12 Nov 2026) */
.nextup { padding:.7rem .9rem; border-left:5px solid var(--oagh-maroon); }
.nextup-title { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--oagh-maroon); margin-bottom:.35rem; }
.nextup-items { display:flex; flex-direction:column; gap:.4rem; }
.nextup-item { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.35rem 0; border-top:1px dashed #e6e0ee; }
.nextup-item:first-child { border-top:0; padding-top:0; }
.nextup-item.first .nextup-text { font-size:1rem; }
.nextup-icon { font-size:1.15rem; color:var(--oagh-maroon); flex:0 0 auto; }
.nextup-item.tone-urgent .nextup-icon { color:#b02a37; }
.nextup-item.tone-warn .nextup-icon { color:#9a6a00; }
.nextup-item.tone-ok .nextup-icon { color:#198754; }
.nextup-text { flex:1 1 260px; min-width:0; font-size:.9rem; }
.nextup-btn { flex:0 0 auto; margin-left:auto; }
.nextup-find label { font-weight:600; }
@media (max-width: 575.98px) { .nextup-btn { margin-left:0; } }

/* Drug interaction warnings (update v97): colour plus words and an icon */
.ddi-panel { border:1px solid #dee2e6; border-left:5px solid #6c757d; border-radius:8px; background:#fff; padding:.5rem .7rem; margin-bottom:.5rem; }
.ddi-panel.worst-danger { border-left-color:#b02a37; background:#fff5f5; }
.ddi-panel.worst-caution { border-left-color:#c27c00; background:#fffaf0; }
.ddi-panel.ddi-clean { border-left-color:#198754; color:#495057; }
.ddi-head { font-weight:700; margin-bottom:.3rem; }
.ddi-row { display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:baseline; padding:.25rem 0; border-top:1px dashed #e9ecef; }
.ddi-row:first-of-type { border-top:0; }
.ddi-tag { display:inline-flex; align-items:center; gap:.25rem; font-size:.74rem; font-weight:700; border-radius:4px; padding:.1rem .45rem; white-space:nowrap; text-transform:uppercase; letter-spacing:.02em; }
.ddi-danger .ddi-tag { background:#b02a37; color:#fff; }
.ddi-caution .ddi-tag { background:#ffc107; color:#3d2a00; }
.ddi-info .ddi-tag { background:#e9ecef; color:#495057; }
.ddi-what { flex:1 1 300px; }
.ddi-src { display:block; color:#6c757d; font-size:.76rem; }
.ddi-read, .ddi-unchecked { padding:.25rem 0; border-top:1px dashed #e9ecef; }
.ddi-unchecked { color:#6b4e00; }
.ddi-foot { color:#6c757d; font-size:.74rem; margin-top:.3rem; }
.ddi-reason { border:2px solid #b02a37; border-radius:8px; padding:.5rem .7rem; background:#fff; margin-bottom:.5rem; }
.ddi-reason-saved { border-left:4px solid #b02a37; background:#fff5f5; padding:.35rem .6rem; border-radius:6px; margin-top:.25rem; }
.ddi-saved { cursor:help; }

/* Several sites (branches / PHCs): where this session is working (includes/sites.php). */
.sidebar-site { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.08); border-left: 3px solid #ecd77a; color: #fff; }
.sidebar-site > i { color: #ecd77a; font-size: 1.05rem; }
.sidebar-site-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.sidebar-site-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.65); }
.sidebar-site-name { font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-site-switch { color: rgba(255,255,255,.75); padding: 2px 4px; border-radius: 4px; text-decoration: none; }
.sidebar-site-switch:hover, .sidebar-site-switch:focus-visible { color: #fff; background: rgba(255,255,255,.15); }
.site-badge { background: #eef3f7; color: #2c4a63; font-weight: 600; }
.bg-chew { background-color: #007836; color: #fff; }   /* CHEW role badge (editions with the CHEW role) */
/* Demo mode (includes/demo.php) */
.demo-banner { background: #ffcb00; color: #3a2f00; font-size: .88rem; padding: 7px 16px; text-align: center; border-bottom: 2px solid #e0b000; }
.demo-banner a { color: #1e2a3a; font-weight: 600; margin-left: 8px; }
.tmh-login-body.is-demo .demo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
.demo-logins { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fff8dc; border: 1px dashed #e0b000; }
.demo-logins-title { font-size: .85rem; font-weight: 700; color: #3a2f00; margin-bottom: 6px; }
.demo-logins-title span { font-weight: 400; }
.demo-logins-title code { color: #1e2a3a; background: #fff; padding: 1px 5px; border-radius: 4px; }
.demo-logins-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-login-btn { border: 1px solid #cfc6db; background: #fff; color: #3a1f5d; border-radius: 999px; padding: 3px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.demo-login-btn:hover, .demo-login-btn.active, .demo-login-btn:focus-visible { background: #6a3d9a; border-color: #6a3d9a; color: #fff; }
/* Bed Occupancy (admissions/occupancy.php, update v100) */
.occ-tile { background: #fff; border: 1px solid #e6e1ec; border-radius: 10px; padding: 12px 14px; height: 100%; }
.occ-tile-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c6775; font-weight: 600; }
.occ-tile-value { font-size: 1.7rem; font-weight: 700; color: #26232b; line-height: 1.2; font-variant-numeric: tabular-nums; }
.occ-tile-value small { font-size: .95rem; font-weight: 600; color: #6c6775; }
.occ-tile-sub { font-size: .8rem; color: #6c6775; }
.occ-meter-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; font-size: .86rem; }
.occ-meter-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ-meter { height: 10px; background: #efeaf4; border-radius: 5px; overflow: hidden; }
.occ-meter-fill { display: block; height: 100%; background: var(--vc-teal); border-radius: 5px; }
.occ-meter-fill.occ-meter-over { background: #b42318; }
.occ-meter-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.occ-flag { font-size: .75rem; font-weight: 600; white-space: nowrap; margin-left: 4px; }
.occ-busy { color: #8a5a00; }
.occ-over { color: #b42318; }
.occ-chart-wrap { position: relative; }
.occ-chart { width: 100%; height: auto; display: block; }
.occ-grid { stroke: #ece8f0; stroke-width: 1; }
.occ-base { stroke: #b9b3c2; stroke-width: 1; }
.occ-axis { font-size: 11px; fill: #6c6775; }
.occ-bar { fill: var(--vc-teal); }
.occ-cap { stroke: #3d3a42; stroke-width: 2; stroke-dasharray: 6 4; }
.occ-hit { fill: transparent; }
.occ-hit.on { fill: rgba(0, 0, 0, .06); }
.occ-tip { position: absolute; top: 0; width: 170px; background: #26232b; color: #fff; font-size: .8rem; padding: 6px 9px; border-radius: 6px; pointer-events: none; }
.occ-key { display: inline-block; vertical-align: middle; margin-right: 3px; }
.occ-key-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--vc-teal); }
.occ-key-line { width: 16px; border-top: 2px dashed #3d3a42; }
@media (max-width: 576px) { .occ-meter-row { grid-template-columns: 1fr auto; } .occ-meter { grid-column: 1 / -1; order: 3; } }
/* Admin: "This month at a glance", Outpatient Statistics (includes/opd_stats.php) */
.glance { border-top: 3px solid var(--vc-teal); }
.glance-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.occ-chart-sm .occ-axis { font-size: 14px; }
.kpi { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #e6e1ec; border-radius: 10px; padding: 10px 12px; color: inherit; text-decoration: none; min-height: 112px; }
a.kpi:hover, a.kpi:focus-visible { border-color: var(--vc-teal); box-shadow: 0 2px 10px rgba(58, 31, 93, .10); }
.kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #6c6775; font-weight: 600; }
.kpi-value { font-size: 1.65rem; font-weight: 700; color: #26232b; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: .9rem; color: #6c6775; }
.kpi-sub { font-size: .78rem; color: #6c6775; }
.kpi-trend { font-size: .76rem; font-weight: 600; margin-top: auto; }
.kpi-good { color: #146c43; }
.kpi-bad { color: #b42318; }
.kpi-flat { color: #6c6775; font-weight: 500; }
.ward-card .kpi-trend { display: inline; margin-left: 4px; }
.glance-mix { background: #fff; border: 1px solid #e6e1ec; border-radius: 10px; padding: 12px; }
.glance-mix-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #6c6775; font-weight: 600; margin-bottom: 4px; }
.mix-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mix-track { stroke: #f1eef4; }
.mix-out { stroke: #55288a; }   /* deep brand colour: clinic visits */
.mix-in { stroke: #9f7fd0; }   /* light brand colour: inpatient days (recoloured per edition) */
.mix-out:focus, .mix-in:focus { outline: none; stroke-width: 26; }
.mix-big { font-size: 26px; font-weight: 700; fill: #26232b; }
.mix-small { font-size: 10.5px; fill: #6c6775; }
.mix-legend { list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.mix-legend li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.mix-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mix-sw-out { background: #55288a; }
.mix-sw-in { background: #9f7fd0; }
.heat { border-collapse: separate; border-spacing: 2px; font-size: .72rem; width: 100%; }
.heat th { color: #6c6775; font-weight: 600; text-align: center; padding: 0 2px; white-space: nowrap; }
.heat tbody th { text-align: left; padding-right: 6px; }
.heat-c { height: 22px; min-width: 16px; border-radius: 3px; display: table-cell; }
.heat-key .heat-c { display: inline-block; width: 16px; height: 12px; vertical-align: middle; margin: 0 1px; }
.heat-z { background: #f4f2f6; }
.heat-0 { background: rgba(106, 61, 154, .12); }
.heat-1 { background: rgba(106, 61, 154, .30); }
.heat-2 { background: rgba(106, 61, 154, .50); }
.heat-3 { background: rgba(106, 61, 154, .72); }
.heat-4 { background: rgba(106, 61, 154, .95); }
.clinic-bars .occ-meter { display: block; }
@media (max-width: 576px) { .glance-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi { min-height: 0; padding: 8px 10px; } .kpi-value { font-size: 1.35rem; } }