/* Pharmacy Portal - report aesthetic ported from the .ps1 HTML reports
   (Segoe UI, soft background, shaded uppercase table headers, zebra rows, tabular numerals,
   underlined section headers, KPI tiles). Layered over Bootstrap; restyles existing markup. */

:root {
  --ink: #1a2233;
  --mut: #6b7688;
  --line: #e4e8ef;
  --bg: #f6f8fb;
  --head: #eef2f8;
  --good: #0a7f4f;
  --bad: #c0392b;
  --warn: #d97706;
  --accent: #1f6feb;
}

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}
@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 60px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---- nav / chrome ---- */
.navbar.bg-white { box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.navbar-brand { font-weight: 700; color: var(--ink); }
.breadcrumb { font-size: .8rem; }

/* ---- headings ---- */
main h3 { font-weight: 700; font-size: 1.45rem; color: var(--ink); }
main h5:not(.card-title) {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.5rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--line);
}
.fw-semibold.text-uppercase.text-muted { letter-spacing: .04em; }

/* ---- cards / KPI tiles ---- */
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.card .card-title { font-weight: 700; font-size: 1.05rem; }
.card-body .text-uppercase.small { letter-spacing: .04em; color: var(--mut); }

/* ---- tables: the report look ---- */
.container table.table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: .85rem;
  color: var(--ink);
}
.container table.table > thead > tr > th {
  background: var(--head);
  color: var(--mut);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.container table.table > tbody > tr > td,
.container table.table > thead > tr > th { padding: .45rem .7rem; }
.container table.table > tbody > tr > td { border-bottom: 1px solid var(--line); }
.container table.table > tbody > tr:last-child > td { border-bottom: 0; }
/* zebra, but never override a highlighted total row (.table-light) */
.container table.table > tbody > tr:nth-child(even):not(.table-light) > td { background: #fafbfd; }
/* numeric columns line up */
.container table.table .text-end { font-variant-numeric: tabular-nums; }
/* bordered variant (P&L / KPI tables) uses the soft line color */
.container table.table-bordered td,
.container table.table-bordered th { border: 1px solid var(--line); }

/* ---- KPI band (3-card top row, matches the HTML report tiles) ---- */
.kpi-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 1.1rem;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.kpi-card.gray { background: #f3f6fa; }   /* light gray highlight (e.g. Gross Profit) */
.kpi-card.green { background: #eef6f1; }   /* light green highlight (e.g. Net Operating Income) */
.kpi-card.red { background: #fbeeec; }
.kpi-label { color: var(--mut); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 1.5rem; font-weight: 700; margin-top: 5px; line-height: 1.1; }
.kpi-value.sm { font-size: 1.05rem; }
.kpi-sub { color: var(--mut); font-size: .72rem; margin-top: 3px; }

/* ---- P&L highlighted rows (gray Gross Profit, green Net Operating Income) - beat zebra ---- */
.container table.table tr.pl-gp > td { background: #f3f6fa !important; font-weight: 600; }
.container table.table tr.pl-net > td { background: #eef6f1 !important; font-weight: 700; }
/* P&L-by-Entity cards: borderless compact table, no zebra (highlight rows above still win via !important) */
.card table.table { border: none; font-size: .8rem; }
.card table.table td { padding: .3rem .45rem; border-bottom: 1px solid var(--line); }
.container .card table.table > tbody > tr:nth-child(even) > td { background: #fff; }
.card table.table > tbody > tr:last-child > td { border-bottom: 0; }

/* ---- filter forms ---- */
form .form-label.small {
  color: var(--mut);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .03em;
}

/* ---- positive / negative emphasis (match report greens/reds) ---- */
.text-success { color: var(--good) !important; }
.text-danger { color: var(--bad) !important; }
.text-warning { color: var(--warn) !important; }

/* ---- keep Bootstrap focus + form-floating behavior ---- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* Rx716 delivery map pins (Leaflet divIcon) */
.rx-pin span { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:#fff; font-size:.78rem; font-weight:700; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.45); }
.leaflet-container { font: inherit; }

/* ---- DASHBOARD STRUCTURE (2026-08-20) -----------------------------------------------------------------------
   Owner: "all the dashboards/control panels are getting longer and harder to follow ... give as much as possible
   on the visible screen." So this is deliberately DENSER than published admin templates, which optimise for
   looking good in a screenshot - big tiles, one metric each, generous whitespace. Density is the requirement. */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;                       /* panels size to content - no column of equal-height empty boxes */
}
.dash-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px 12px;
  min-width: 0;                             /* lets a wide table scroll INSIDE the panel instead of stretching it */
}
.dash-panel.dash-wide { grid-column: 1 / -1; }

.dash-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;                         /* keeps the title while a long body scrolls */
  top: 0;
  background: #fff;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  z-index: 1;
}
.dash-panel-head h2 { font-size: .95rem; font-weight: 700; margin: 0; }
.dash-count {
  background: #eef2f8; color: var(--ink); border-radius: 20px;
  font-size: .72rem; font-weight: 700; padding: 1px 8px;
}
.dash-toggle {
  margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--mut);
  border-radius: 6px; font-size: .7rem; padding: 1px 7px; cursor: pointer;
}
.dash-sub { color: var(--mut); font-size: .74rem; margin: 0 0 6px; }
.dash-empty { color: var(--mut); font-size: .78rem; margin: 4px 0; }
.dash-panel-body.is-collapsed { display: none; }

/* Compact tables: Bootstrap's default row height wastes about a third of the screen on a dense list. */
.dash-table { font-size: .78rem; margin-bottom: .35rem; }

/* CONTENT MUST NOT ESCAPE ITS PANEL. Measured: the reply-rule table rendered 561px wide inside a 302px panel and
   painted straight over its neighbour, because a regex like STOP|UNSUBSCRIBE is one unbreakable string.
   Two defences, because either alone is not enough:
     - the body clips and scrolls, so nothing can ever paint outside the panel;
     - long unbroken strings are allowed to wrap, so it rarely comes to scrolling in the first place. */
.dash-panel { overflow: hidden; }
.dash-panel-body { overflow-x: auto; }
.dash-table td, .dash-table th { overflow-wrap: anywhere; word-break: break-word; }
.dash-table code, .dash-set-key { overflow-wrap: anywhere; }
.container table.table.dash-table td,
.container table.table.dash-table th { padding: .28rem .4rem; vertical-align: top; }
/* No sticky thead: it fights the panel body's own scroll, and the panel header already holds context. */
.dash-table thead th { background: #fff; }

/* Settings block. The master switch is pinned first by DashboardSettings.Order - this only makes it LOOK first. */
.dash-settings .is-master > td { background: #f7f9fc; font-weight: 600; }
.dash-set-key { color: var(--mut); font-size: .68rem; font-family: ui-monospace, Consolas, monospace; }
.dash-set-value { white-space: nowrap; }
.dash-set-desc { color: var(--mut); }
.dash-state { font-weight: 700; font-size: .72rem; border-radius: 4px; padding: 1px 6px; }
.dash-state.on { background: #eef6f1; color: #0a7f4f; }
.dash-state.off { background: #fbeeec; color: #b3261e; }
.dash-pill {
  background: var(--brand); color: #fff; border-radius: 20px;
  font-size: .62rem; font-weight: 700; padding: 1px 7px; margin-left: 6px; text-transform: uppercase;
}
.dash-off-banner {
  background: #fbeeec; border: 1px solid #f3cfca; color: #8a2018;
  border-radius: 8px; padding: 6px 10px; font-size: .78rem; margin: 0 0 8px;
}

/* ---- FULL-WIDTH DASHBOARDS -----------------------------------------------------------------------------------
   Desktop-only internal portal: no responsive work, and no reason to keep Bootstrap's 1140px container cap on a
   page whose whole job is showing as much as possible at once. A dashboard page puts .dash-page on its wrapper.

   Capped at 2000px rather than truly edge-to-edge: past that a table row is wider than the eye tracks comfortably
   and the density stops buying anything. */
.dash-page {
  /* Full-bleed OUT of the Bootstrap container this page sits inside. The :has() selector would also work in a
     modern browser, but this technique depends on nothing and is obvious to the next reader. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 18px;
}
.dash-page > .dash-inner { max-width: 2000px; margin: 0 auto; }

/* The page header strip: title, one line of what it is, and the state - answered before anything is read. */
.dash-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); padding-bottom: 6px; margin-bottom: 12px;
}
.dash-head h1 { font-size: 1.15rem; margin: 0; font-weight: 700; }
.dash-head .dash-sub { margin: 0; }
.dash-head .dash-actions { margin-left: auto; display: flex; gap: 6px; }

/* ============================================================================================================
   STAFF CONTROL-CENTER DASHBOARD (Pages/Index) - board #40 role-aware + #81 one-structure, owner 2026-09-02.
   The approved-mockup look (handoffs/2026-09-02-staff-dashboard-mockup.html) ported onto the site tokens; the
   sd-* classes are scoped to the home dashboard so nothing else restyles. --navy/--orange extend :root. ============ */
:root { --navy: #10356B; --orange: #FF9454; }
.sd-page { display: flex; flex-direction: column; gap: 10px; }
.sd-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; align-items: start; }
.sd-3 { grid-column: span 3; } .sd-4 { grid-column: span 4; } .sd-5 { grid-column: span 5; }
.sd-6 { grid-column: span 6; } .sd-7 { grid-column: span 7; } .sd-8 { grid-column: span 8; } .sd-12 { grid-column: 1 / -1; }
@media (max-width: 900px) { .sd-3, .sd-4, .sd-5, .sd-6, .sd-7, .sd-8 { grid-column: 1 / -1; } }

.sd-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.sd-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sd-ch h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink); }
.sd-r { display: flex; gap: 10px; align-items: center; font-size: .8rem; }
.sd-how { color: var(--mut); font-weight: 500; font-size: .75rem; }
.sd-mut { color: var(--mut); }
.sd-empty { color: var(--mut); font-size: .82rem; padding: 8px 0; }
.sd-foot { font-size: .78rem; color: var(--mut); margin-top: 6px; }

/* block 1: personal strip (navy) */
.sd-me { display: flex; align-items: center; gap: 16px; color: #fff; border-radius: 10px; padding: 10px 16px;
         background: linear-gradient(90deg, #10356B, #0F4C8F 60%, #0471B8); }
.sd-me-main { min-width: 0; }
.sd-me h2 { color: #fff; font-size: 1.15rem; margin: 0; font-weight: 700; }
.sd-me p { margin: 3px 0 0; font-size: .82rem; color: #fff; }
.sd-me b { color: #fff; }
.sd-me .sd-mut { color: rgba(255,255,255,.72); }
.sd-me-clock { margin-left: auto; white-space: nowrap; display: flex; align-items: center; gap: 6px; }

/* block 2: exceptions list */
.sd-ex { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; column-gap: 12px; align-items: center;
         padding: 6px 0; border-bottom: 1px solid #f0f2f5; }
.sd-ex:last-child { border-bottom: 0; }
.sd-n { font-size: 1.3rem; font-weight: 700; min-width: 30px; text-align: right; }
.sd-n.bad { color: var(--bad); } .sd-n.warn { color: var(--warn); } .sd-n.ok { color: var(--good); }
.sd-ex-t { min-width: 0; }
.sd-ex-t .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ex-t .s { font-size: .8rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ex .w { font-size: .75rem; color: var(--mut); white-space: nowrap; }
.sd-rollups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; }

/* block 3: automation ledger */
.sd-led { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 10px; row-gap: 5px; align-items: baseline; font-size: .82rem; }
.sd-led b { font-size: .95rem; color: var(--good); text-align: right; }
.sd-led b.no { color: var(--warn); } .sd-led span.no { color: var(--warn); }

/* #474 the two home cards side by side: the grid children must be allowed to shrink below their table's intrinsic
   width, or a 5-column matrix in the 5/12 column forces the whole row wide. cc-card already has overflow:hidden. */
.sd-cards > div { min-width: 0; }

/* #474 WORK QUEUES strip: slim, counts + deep links only (no item rows). A wrap-friendly row of signpost pills. */
.sd-wq .sd-wq-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sd-wq-item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 12px; background: #fff; color: var(--ink); font-size: .84rem; }
.sd-wq-item:hover { background: #f6f8fb; }
.sd-wq-item .l { color: var(--mut); }
.sd-wq-item .n { font-weight: 800; }
.sd-wq-item .n.warn { color: var(--warn); }
.sd-wq-item .n.bad, .sd-wq-item.bad { color: var(--bad); }
.sd-wq-item.bad { border-color: var(--bad); background: #fdecec; }
.sd-wq-item.bad .l { color: var(--bad); }

/* block 5b (#256): weekly capture scoreboard - per-store contact-capture, Holland vs Springville side by side */
.sd-cap .sd-cap-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sd-cap-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: .84rem; }
.sd-cap-store { font-weight: 800; color: var(--ink); min-width: 84px; }
.sd-cap-stat { color: var(--mut); }
.sd-cap-stat b { color: var(--ink); font-weight: 800; }
.sd-cap-src { color: var(--mut); font-weight: 500; }

/* block 4: timeline chips */
.sd-tl { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-tc { flex: 1; min-width: 130px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 5px; padding: 6px 8px; background: #fff; }
.sd-tc.o { border-left-color: var(--orange); } .sd-tc.g { border-left-color: var(--good); } .sd-tc.p { border-left-color: #6f42c1; }
.sd-tc .d { font-size: .7rem; font-weight: 700; color: var(--mut); letter-spacing: .04em; }
.sd-tc .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-tc .s { font-size: .74rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* block 5: dark KPI band (rendered by _DashKpiBand) */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dk { background: #1a2233; color: #fff; border-radius: 10px; padding: 9px 12px; min-width: 0; position: relative; overflow: hidden; }
.dk-good { background: #0a5c3c; } .dk-warn { background: #7a4a06; } .dk-bad { background: #7a2620; }
.dk-l { font-size: .68rem; color: #aab4c3; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-v { font-size: 1.3rem; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.dk-d { font-size: .68rem; margin-top: 2px; color: #cdd6e2; position: relative; z-index: 1; }
.dk-d.up { color: #5fd39a; } .dk-d.dn { color: #ff8a80; } .dk-d.fl { color: #ffcf6b; }
.dk-spark { position: absolute; right: 8px; bottom: 8px; width: 60px; height: 22px; opacity: .85; }
.dk-link { position: absolute; inset: 0; z-index: 2; }

/* block 6: CSS bar charts (rendered by _DashBars) */
.sd-plot { position: relative; display: flex; align-items: flex-end; gap: 14px; padding-top: 4px; }
.sd-goal { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--warn); }
.sd-bars2 { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100%; }
.sd-bars2 i { display: block; width: 16px; max-width: 42%; border-radius: 3px 3px 0 0; background: #c9d6ea; }
.sd-bars2 i.a { background: var(--accent); }
.sd-xrow { display: flex; gap: 14px; margin-top: 3px; }
.sd-xrow span { flex: 1; text-align: center; font-size: .66rem; color: var(--mut); }

/* block 7: section cards */
.sd-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sd-sc { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-width: 0; }
.sd-sc .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.sd-sc .h a:first-child { font-size: .9rem; font-weight: 700; }
.sd-row { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; padding: 3px 0; border-bottom: 1px solid #f0f2f5; }
.sd-row:last-of-type { border-bottom: 0; }
.sd-acts { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }

/* block 8: ask + feedback */
.sd-ask { display: flex; gap: 8px; }
.sd-in { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; background: #fff; color: var(--ink); }

/* ---- SECTION DASHBOARD additions (#285): same sd-* family, blocks the home does not have ---- */
/* block 1: the section's switches as pills, on the navy strip */
.sd-sw { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sd-sw span { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 1px 8px; font-size: .7rem; color: #fff; }
.sd-sw span.off { opacity: .6; text-decoration: line-through; }
/* block 5a: the LIGHT KPI strip (all roles); the dark band (.dk) stays owner/manager */
.sd-kl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sd-k { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.sd-k .l { font-size: .68rem; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-k .v { font-size: 1.25rem; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.sd-k .v.good { color: var(--good); } .sd-k .v.warn { color: var(--warn); } .sd-k .v.bad { color: var(--bad); }
.sd-k .d { font-size: .68rem; color: var(--mut); margin-top: 1px; }
/* block 6: run buttons, each with its last run_ledger line */
.sd-runs { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-run { flex: 1; min-width: 190px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.sd-run .t { font-weight: 600; }
.sd-run .s { font-size: .72rem; color: var(--mut); margin-top: 2px; }
.sd-run .go { margin-top: 6px; }

/* ============================================================================================================
   CUSTOMER COMMUNICATIONS (Pages/Shared/_MessageHome.cshtml + Pages/Communications.cshtml) - board #466/#467,
   owner-approved mockup v2 2026-09-17. The #390 card grown into a MATRIX: a row per inbound channel, a column per
   disposition. The alarm colours are the mockup's own literals, deliberately: a red that means "somebody has been
   waiting past four business hours" must not drift with a theme tweak. Scoped to cc-*/mh-bar, so it restyles nothing
   else, and it renders on BOTH dashboard pages - under the v2 greeting band, atop the legacy one (the 9/12 placement
   ruling). At all-zero the card collapses to the slim green mh-bar (kept from #390). */
.cc-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(20,30,50,.06); overflow: hidden; margin-bottom: 10px; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #eef1f5; }
.cc-head h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--ink); }
.cc-badge { border-radius: 12px; padding: 2px 11px; font-size: .82rem; font-weight: 800; background: #e8edf5; color: var(--ink); white-space: nowrap; }
.cc-badge.hot { background: #c62828; color: #fff; }
.cc-badge.ok  { background: #e9f5ea; color: #2e7d32; }
table.cc-mx { width: 100%; border-collapse: collapse; }
.cc-mx th { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); font-weight: 700;
            text-align: center; padding: 8px 6px 6px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.cc-mx th.chcol { text-align: left; padding-left: 14px; }
.cc-mx th .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.cc-mx th .sw.need { background: var(--bad); }  .cc-mx th .sw.jrn { background: var(--accent); }
.cc-mx th .sw.stuck { background: var(--warn); } .cc-mx th .sw.done { background: var(--good); }
.cc-mx td { padding: 9px 6px; border-bottom: 1px solid #f4f6f9; text-align: center; vertical-align: middle; }
.cc-mx tr:last-child td { border-bottom: 0; }
.cc-mx td.ch { text-align: left; padding-left: 14px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.cc-mx td.ch .note { display: block; font-size: .7rem; color: var(--mut); font-weight: 400; }
.cc-mx .cell { display: inline-block; min-width: 30px; border-radius: 11px; padding: 1px 9px; font-size: .84rem; font-weight: 800; text-decoration: none; }
.cc-mx .cell:hover { filter: brightness(.94); }
.cc-mx .cell.need { background: var(--bad); color: #fff; }
.cc-mx .cell.jrn { background: #e9f1ff; color: var(--accent); }
.cc-mx .cell.stuck { background: #fdeeda; color: #9a5b00; }
.cc-mx .cell.done { background: #e7f4ee; color: var(--good); }
.cc-mx .cell.zero { background: transparent; color: #c3cad6; font-weight: 600; }
/* #474 the per-viewer "Staff messages - to you" row: a PERSONAL bottom row, set apart from the patient channels above.
   .dash = a disposition that does not apply (a muted em-dash, read differently from a real zero); .personal = the
   neutral count pill (never the red "need" style - unread is not a four-business-hour patient alarm). */
.cc-mx tr.row-personal td { border-top: 2px solid #eef1f5; background: #fafbfd; }
.cc-mx tr.row-personal td.ch { color: var(--mut); font-weight: 700; }
.cc-mx .cell.dash { background: transparent; color: #c3cad6; font-weight: 600; }
.cc-mx .cell.personal { background: #eef2f8; color: var(--ink); }
.cc-mx .hotnote { display: block; font-size: .66rem; color: var(--bad); font-weight: 700; margin-top: 2px; }
.cc-foot { padding: 8px 14px; color: var(--mut); font-size: .74rem; border-top: 1px solid #eef1f5; }
/* the all-clear (owner 9/12): a slim ONE-LINE green bar, not the tall empty card. Still always rendered. */
.mh-bar { display: flex; align-items: center; gap: 8px; background: #e9f5ea; border: 1px solid #cde6d0; border-radius: 10px;
          padding: 7px 14px; color: #2e7d32; font-size: .85rem; font-weight: 600; margin-bottom: 10px; }
.mh-bar .mh-tick { font-size: 1rem; line-height: 1; }
/* inside the v2 page the sd-page flex gap (10px) does the spacing; the margin above is for the legacy page, which has none */
.sd-page .cc-card, .sd-page .mh-bar { margin-bottom: 0; }

/* PATIENT JOURNEYS (board #469) - the comms card's sibling, rendered through the SAME cc-mx matrix drawer. Only the
   journey-specific extras live here (the chip, the health dot, the two extra cell colours, the shadow cell, the muted
   OFF row); everything else is inherited from cc-* above. Alarm colours are literals, like the comms card, so "amber =
   would-have preview" and the red never drift with a theme tweak. */
.cc-mx td.ch .chip { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: .66rem; font-weight: 800;
                     letter-spacing: .03em; vertical-align: middle; margin-left: 7px; }
.cc-mx td.ch .chip.on { background: var(--good); color: #fff; }
.cc-mx td.ch .chip.shadow { background: #fdf1e0; color: #9a5b00; border: 1px solid #f0d9ad; }
.cc-mx td.ch .chip.off { background: #edf0f5; color: #9aa4b5; }
.cc-mx td.ch .tick { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 7px; vertical-align: middle; }
.cc-mx td.ch .tick.ok { background: var(--good); } .cc-mx td.ch .tick.skip { background: #c9cfda; } .cc-mx td.ch .tick.err { background: var(--bad); }
.cc-mx .cell.fly { background: #e9f1ff; color: var(--accent); }
.cc-mx .cell.wait { background: #eef2f8; color: var(--ink); }
.cc-mx .cell.shadow { background: #fff; border: 1px dashed #e3c98f; color: #9a5b00; font-style: italic; font-weight: 700; }
.cc-mx tr.row-off td { opacity: .55; }

/* ---- the /Communications click-through page: the unified inbound feed, pre-filtered to the clicked cell ---- */
.cc-page { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cc-crumb { padding: 10px 16px; font-size: .78rem; color: var(--mut); border-bottom: 1px solid #eef1f5; }
.cc-crumb a { color: var(--accent); text-decoration: none; }
.cc-crumb b { color: var(--ink); }
.cc-pgh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px 8px; }
.cc-pgh h1 { font-size: 1.1rem; margin: 0; color: var(--ink); }
.cc-cnt { font-size: .8rem; color: var(--mut); }
.cc-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 0 16px 11px; }
.cc-chip { border-radius: 16px; padding: 3px 12px; font-size: .78rem; font-weight: 700; background: var(--head); color: var(--ink); }
.cc-chip.need { background: var(--bad); color: #fff; }
.cc-chip.jrn { background: #e9f1ff; color: var(--accent); }
.cc-chip.stuck { background: #fdeeda; color: #9a5b00; }
.cc-chip.done { background: #e7f4ee; color: var(--good); }
.cc-clear { font-size: .76rem; color: var(--accent); text-decoration: underline; }
.cc-feed { border-top: 1px solid var(--line); }
.cc-frow { display: flex; gap: 12px; align-items: flex-start; padding: 11px 16px; border-bottom: 1px solid #f1f4f9; text-decoration: none; color: var(--ink); }
.cc-frow:hover { background: #f9fbfe; color: var(--ink); text-decoration: none; }
.cc-frow.need { box-shadow: inset 4px 0 0 var(--bad); background: #fffaf9; }
.cc-frow.stuck { box-shadow: inset 4px 0 0 var(--warn); }
.cc-chan { flex: 0 0 92px; font-size: .68rem; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
.cc-chan .icn { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cc-chan .icn.web { background: #7c4dff; }  .cc-chan .icn.text { background: #0aa; }
.cc-chan .icn.portal { background: var(--accent); } .cc-chan .icn.fb { background: var(--warn); }
.cc-chan .icn.orders { background: #5c6bc0; }   /* #474 store orders - its own swatch on the /Communications rail */
.cc-body { flex: 1 1 auto; min-width: 0; }
.cc-who { font-weight: 700; font-size: .9rem; }
.cc-prev { color: #33405a; font-size: .82rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meta { color: var(--mut); font-size: .72rem; margin-top: 3px; }
.cc-meta .agehot { color: var(--bad); font-weight: 700; }
.cc-disp { flex: 0 0 auto; text-align: right; min-width: 140px; }
.cc-pill { display: inline-block; border-radius: 20px; padding: 3px 11px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.cc-pill.need { background: var(--bad); color: #fff; }
.cc-pill.jrn { background: #e9f1ff; color: var(--accent); font-weight: 700; }
.cc-pill.stuck { background: #fdeeda; color: #9a5b00; }
.cc-pill.done { background: #e7f4ee; color: var(--good); font-weight: 700; }
.cc-subact { display: block; font-size: .7rem; color: var(--mut); margin-top: 4px; }
.cc-subact.resp { color: var(--bad); font-weight: 700; }
.cc-empty { padding: 28px 16px; text-align: center; color: var(--mut); font-size: .85rem; }
@media (max-width: 640px) {
  .cc-mx th, .cc-mx td { padding-left: 8px; padding-right: 4px; }
  .cc-disp { min-width: 0; }
  .cc-prev { white-space: normal; }
}