/* ==========================================================================
   Synergy Practice -- interface styles

   Fonts are the OS stack on purpose. The office machine is installed from a USB
   kit with no internet, so a webfont would silently fall back to Times there and
   look broken on the one machine that matters.

   Class names match the ones the templates already use, so a screen picks up the
   new styling without its markup changing.
   ========================================================================== */

:root {
  --bg:        #eef1f6;
  --surface:   #ffffff;
  --surface-2: #f7f9fc;
  --line:      #e2e8f0;
  --line-soft: #eef2f7;

  --ink:       #0f1b2d;
  --ink-2:     #44546a;
  --ink-3:     #7688a0;

  --nav:       #10203a;
  --nav-2:     #1b3054;
  --nav-ink:   #b9c8dd;

  --brand:     #0d7f8c;
  --brand-600: #0a6975;
  --brand-50:  #e6f6f8;

  --ok:        #17794a;
  --ok-50:     #e8f6ee;
  --warn:      #9a6100;
  --warn-50:   #fdf3e0;
  --bad:       #b3261e;
  --bad-50:    #fdecea;

  --r:   10px;
  --r-s: 7px;
  --shadow:   0 1px 2px rgba(16,32,58,.06), 0 1px 3px rgba(16,32,58,.04);
  --shadow-2: 0 4px 12px rgba(16,32,58,.10), 0 2px 4px rgba(16,32,58,.06);

  --nav-w: 212px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system,
               system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 2px 0; }
h2 { font-size: 15px; font-weight: 640; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 13.5px; font-weight: 640; margin: 0; }

.pagehead { margin-bottom: 14px; }
.pagehead .sub { color: var(--ink-3); font-size: 12.5px; }

/* ---------- app shell ------------------------------------------------- */

#shell { display: flex; min-height: 100vh; }

#sidebar {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  background: var(--nav);
  color: var(--nav-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 15px 16px 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand .bn { color: #fff; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
             display: block; line-height: 1.25; }
.brand .bs { color: #7f95b3; font-size: 11px; letter-spacing: .06em;
             text-transform: uppercase; }

#nav { padding: 10px 9px; overflow-y: auto; flex: 1; }
#nav .navgroup {
  color: #64799a; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 13px 8px 5px 8px;
}
#nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-bottom: 1px;
  border-radius: var(--r-s);
  color: var(--nav-ink); font-size: 13px; text-decoration: none;
  white-space: nowrap;
}
#nav a:hover { background: var(--nav-2); color: #fff; text-decoration: none; }
#nav a.on { background: var(--brand); color: #fff; font-weight: 600; }
#nav a .ic { width: 16px; text-align: center; opacity: .85; flex: 0 0 16px; }

.navfoot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 11px 14px; font-size: 11.5px; color: #7f95b3;
}
.navfoot .un { color: #fff; font-weight: 600; display: block;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navfoot a { color: #9fb3cd; text-decoration: underline; }
.navfoot a:hover { color: #fff; }

#content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

#topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 9px 20px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
#topbar .spacer { flex: 1; }
#topbar .today { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }

.quicksearch { display: flex; gap: 6px; align-items: center; position: relative; }
.quicksearch input[type=text] { width: 268px; }

/* type-ahead results under the quick search */
.suggest {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  width: 380px; max-width: 80vw; background: #fff;
  border: 1px solid #cfd9e6; border-radius: var(--r-s);
  box-shadow: 0 10px 26px rgba(16,32,58,.22); overflow: hidden;
}
.suggest .sg-item {
  display: block; padding: 7px 11px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid #eef1f5;
}
.suggest .sg-item:last-child { border-bottom: none; }
.suggest .sg-item b { display: block; font-size: 13px; font-weight: 650; }
.suggest .sg-item span {
  display: block; font-size: 11px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.suggest .sg-item.on, .suggest .sg-item:hover { background: var(--brand-50); text-decoration: none; }

.rolechip {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  background: var(--brand-50); color: var(--brand-600);
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.ro {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  background: var(--warn-50); color: var(--warn);
  border: 1px solid #f0d9ab;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

#main { padding: 20px; flex: 1; }

#statusbar {
  border-top: 1px solid var(--line);
  padding: 9px 20px; font-size: 11.5px; color: var(--ink-3);
  background: var(--surface);
}

/* ---------- panels ---------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.panel > h2 {
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  display: flex; align-items: center; gap: 8px;
}
.panel > h2 .count { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.panel > .inner { padding: 14px 15px; overflow-x: auto; }
.panel > .inner.tight { padding: 0; }

.cols { display: flex; gap: 14px; align-items: flex-start; }
.cols > * { flex: 1 1 0; min-width: 0; }

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.toolbar .grow { flex: 1; }

/* ---------- tables ---------------------------------------------------- */

table.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
table.grid th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  font-weight: 650;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  position: sticky; top: 0;
}
table.grid td {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 12px;
  white-space: nowrap;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover td, table.grid tr:hover td { background: var(--surface-2); }
table.grid td.num, table.grid th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
table.grid td.wrap { white-space: normal; }
table.grid td.trunc { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
/* key/value tables (dashboard tiles, patient facts) read better without the
   uppercase treatment on a left-hand header column */
table.grid tr > th:first-child:last-of-type {
  text-transform: none; font-size: 13px; letter-spacing: 0; background: transparent;
}

.neg { color: var(--bad); }
.pos { color: var(--ok); }
.muted { color: var(--ink-3); }
.mono { font-variant-numeric: tabular-nums; }

/* status badges */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 650; white-space: nowrap;
  background: #eef2f7; color: var(--ink-2);
}
.badge.ok   { background: var(--ok-50);   color: var(--ok); }
.badge.warn { background: var(--warn-50); color: var(--warn); }
.badge.bad  { background: var(--bad-50);  color: var(--bad); }

/* ---------- forms ----------------------------------------------------- */

label {
  display: inline-block; min-width: 132px; vertical-align: top;
  padding: 6px 0; color: var(--ink-2); font-size: 12.5px; font-weight: 600;
}
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=search], select, textarea {
  border: 1px solid #cfd9e6;
  border-radius: var(--r-s);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,127,140,.15);
}
input[readonly], input:disabled, select:disabled { background: var(--surface-2); color: var(--ink-2); }
textarea { line-height: 1.5; }

input[type=submit], button, .btn {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: var(--r-s);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.5;
}
input[type=submit]:hover, button:hover, .btn:hover {
  background: var(--brand-600); border-color: var(--brand-600);
  text-decoration: none; color: #fff;
}
.btn.sec, input.sec, button.sec {
  background: #fff; color: var(--ink-2); border-color: #cfd9e6;
}
.btn.sec:hover, input.sec:hover, button.sec:hover {
  background: var(--surface-2); color: var(--ink); border-color: #b8c6d9;
}
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: #8f1e17; border-color: #8f1e17; }
.btn.sm, input.sm, button.sm { padding: 3px 10px; font-size: 12px; }

.formrow { margin-bottom: 10px; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 18px; }
.formgrid .full { grid-column: 1 / -1; }

/* ---------- flash ----------------------------------------------------- */

.flash {
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid; border-radius: var(--r-s);
  font-size: 13px; font-weight: 500;
}
.flash.ok   { background: var(--ok-50);   border-color: #b6ddc6; color: #0d5c36; }
.flash.warn { background: var(--warn-50); border-color: #f0d9ab; color: #7a4d00; }
.flash.err  { background: var(--bad-50);  border-color: #f2c4c0; color: #8f1e17; }

.filterbar {
  background: var(--warn-50); border: 1px solid #f0d9ab;
  border-radius: var(--r-s);
  padding: 9px 14px; margin-bottom: 12px; font-size: 13px; color: #7a4d00;
}
.filterbar a { margin-left: 12px; color: #7a4d00; text-decoration: underline; }

/* ---------- patient header -------------------------------------------- */

.pathead {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 15px 18px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pathead .who { flex: 1; min-width: 220px; }
.pathead .name { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.pathead .chart { color: var(--ink-3); margin-left: 10px; font-weight: 500; font-size: 12.5px; }
.pathead .facts { color: var(--ink-2); font-size: 12.5px; }
.pathead .patactions { margin-top: 11px; display: flex; gap: 6px; flex-wrap: wrap; }
.pathead .bal {
  text-align: right; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-s); padding: 11px 14px; min-width: 218px;
}
.pathead .bal .amt { font-size: 26px; font-weight: 680; letter-spacing: -.02em;
                     font-variant-numeric: tabular-nums; display: block;
                     line-height: 1.15; margin-bottom: 6px; }
.pathead .bal .bl { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase;
                    letter-spacing: .06em; font-weight: 650; }
table.balbits { width: 100%; border-collapse: collapse; font-size: 12px; }
table.balbits td { padding: 2px 0; color: var(--ink-2); border: none; white-space: nowrap; }
table.balbits td.num { text-align: right; font-variant-numeric: tabular-nums;
                       color: var(--ink); font-weight: 600; padding-left: 14px; }
.warnbox {
  background: var(--bad-50); border: 1px solid #f2c4c0; color: #8f1e17;
  border-radius: var(--r-s);
  padding: 9px 13px; margin-top: 10px; font-weight: 600; font-size: 12.5px;
  flex-basis: 100%;
}

/* ---------- KPI tiles ------------------------------------------------- */

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 12px 14px;
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand);
}
a.kpi:hover { box-shadow: var(--shadow-2); text-decoration: none;
              transform: translateY(-1px); }
a.kpi { transition: box-shadow .12s ease, transform .12s ease; }
a.kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi .kn {
  font-size: 25px; font-weight: 680; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi .kl { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.kpi.ok::before   { background: var(--ok); }
.kpi.ok .kn       { color: var(--ok); }
.kpi.wait::before { background: #c98a00; }
.kpi.bad::before  { background: var(--bad); }
.kpi.bad .kn      { color: var(--bad); }
.kpi.money::before{ background: var(--nav-2); }
.kpi.money .kn    { font-size: 20px; }

/* ---------- scheduler ------------------------------------------------- */

.schedwrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
}
.schedscroll { overflow: auto; max-height: calc(100vh - 232px); }

.schedgrid { display: grid; position: relative; min-width: max-content; }

.sg-corner, .sg-head {
  position: sticky; top: 0; z-index: 6;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  font-size: 12.5px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-corner { left: 0; z-index: 8; border-right: 1px solid var(--line); }
.sg-head .hc { color: var(--ink-3); font-weight: 500; font-size: 11.5px; }

.sg-times { position: sticky; left: 0; z-index: 5; background: var(--surface);
            border-right: 1px solid var(--line); }
.sg-time {
  height: var(--slot-h); position: relative;
  border-bottom: 1px solid var(--line-soft);
  padding: 2px 9px 0 9px;
  font-size: 11px; color: var(--ink-3); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sg-time.half { border-bottom-style: dashed; }
.sg-time.hour { color: var(--ink-2); font-weight: 600; }

.sg-col { position: relative; border-right: 1px solid var(--line-soft); }
.sg-col .rule { height: var(--slot-h); border-bottom: 1px solid var(--line-soft); }
.sg-col .rule.half { border-bottom-style: dashed; border-bottom-color: #f2f5f9; }

.appt {
  position: absolute; left: 3px; right: 3px;
  border-radius: 6px;
  border-left: 3px solid var(--ac, var(--brand));
  background: var(--ab, #eaf4fb);
  padding: 3px 7px;
  font-size: 11.5px; line-height: 1.35;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,32,58,.10);
  color: var(--ink);
}
/* Hover expands the block: it grows to its natural height, takes the full
   column width (so a block sharing a lane stops being a sliver), reveals every
   detail line that didn't fit, and exposes the actions the front desk needs --
   including going straight to billing for that patient without opening the
   appointment first.
   Suppressed while a drag is in progress, or the block being dragged would
   fight the hover rules for its own position. */
.appt:hover { box-shadow: var(--shadow-2); z-index: 4; text-decoration: none; }

body:not(.dragging) .appt:not(.blocked):hover {
  height: auto !important;
  min-height: var(--h);
  left: 3px !important;
  width: calc(100% - 6px) !important;
  z-index: 25;
  padding-bottom: 5px;
  box-shadow: 0 10px 26px rgba(16,32,58,.30);
  outline: 1.5px solid var(--ac, var(--brand));
}
.appt .ad.hid { display: none; }
body:not(.dragging) .appt:hover .ad.hid { display: block; }
.appt .ad.tm { display: none; }              /* time is the block's position... */
body:not(.dragging) .appt:hover .ad.tm { display: block; font-weight: 600; }

.appt .acts { display: none; }
body:not(.dragging) .appt:hover .acts {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
  padding-top: 5px; border-top: 1px solid rgba(16,32,58,.16);
}
.appt .acts a {
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 5px;
  background: rgba(255,255,255,.82); color: var(--brand-600);
  border: 1px solid rgba(16,32,58,.14); text-decoration: none;
}
.appt .acts a:hover { background: var(--brand-600); color: #fff; border-color: transparent; }
.appt .at { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 10.5px; }
/* The name line carries name + status letter + appointment type, the way their
   block prints it. On the practice's wide screens the columns are wide enough
   for all three, so it wraps to a second line rather than cutting the type off
   with an ellipsis -- reading the wording matters more than a tidy single row. */
.appt .an { font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
            line-height: 14px; }
.appt .ty { font-weight: 500; color: var(--ink-2); margin-left: 5px; }
/* The note runs INLINE after the treatment type, exactly as their block prints
   it ("Acupuncture  need pmt from yesterday & today", "Softwave  as 3/8").
   It is the first operational cue the front desk reads, so it belongs on the
   name line rather than buried at the bottom of the block. */
.appt .nx { font-weight: 600; color: var(--ink); margin-left: 6px; }
/* clamp grows on hover so a long note is fully readable */
body:not(.dragging) .appt:hover .an { -webkit-line-clamp: 6; }
.appt .ay { color: var(--ink-2); white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; display: block; }
.appt.compact { padding: 1px 7px; }
.appt.compact .at { display: none; }

/* Dense detail lines, the way their own book prints a block: the front desk
   reads birth date, chart id, phone and copay without opening anything. */
.appt .ad { display: block; font-size: 10.5px; line-height: 13px;
            color: var(--ink-2); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
            font-variant-numeric: tabular-nums; }
.appt .ad.co { font-weight: 700; color: var(--ink); }
.appt .ad.nt { font-style: italic; }
.appt .ss { font-weight: 700; margin-left: 4px; color: var(--ink-2); }

/* drag to move: grab handle, lifted block, and the live time readout */
.appt.draggable { cursor: grab; touch-action: none; }
.appt.dragging  { cursor: grabbing; opacity: .92; z-index: 9;
                  box-shadow: 0 8px 20px rgba(16,32,58,.28);
                  transform: scale(1.02); }
.appt.dragging::after {
  content: attr(data-when); position: absolute; right: 6px; top: 3px;
  background: var(--ink); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}
.appt.saving { opacity: .55; }

/* Column headers are draggable to reorder the day's columns. */
.sg-head { cursor: grab; user-select: none; }
.sg-head.dragging-col { opacity: .5; cursor: grabbing; }
.sg-head.drop-target { box-shadow: inset 3px 0 0 var(--brand-600); background: var(--brand-50); }

/* Held / blocked time -- reads as unavailable, never as a patient. */
.appt.blocked {
  background: repeating-linear-gradient(45deg, #eceff3, #eceff3 6px, #e3e7ee 6px, #e3e7ee 12px);
  border-left-color: #aab4c2; cursor: default; box-shadow: none;
}
.appt.blocked .an { font-weight: 600; color: #74808f; font-size: 10.5px; }
.appt.blocked:hover { box-shadow: none; outline: none; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 50;
  box-shadow: 0 6px 22px rgba(16,32,58,.32);
}
.toast.bad { background: #b3261e; }

/* marks a treatment that is one of several in the same visit */
.appt .vlink { color: var(--brand-600); font-weight: 700; margin-right: 3px; }

/* Out is shown by COLOUR (their green), not by dimming -- the block still has
   to be readable, since the desk reads phone and copay off checked-out
   patients all day. An opacity fade here made the detail text illegible. */
.appt.st-out   { opacity: 1; }
.appt.st-noshow{ background: var(--bad-50) !important; border-left-color: var(--bad) !important; }
.appt.st-noshow .an { text-decoration: line-through; }
.appt.st-in    { box-shadow: 0 0 0 1.5px var(--ok), 0 1px 2px rgba(16,32,58,.10); }

.nowline { position: absolute; left: 0; right: 0; height: 0;
           border-top: 2px solid #e0453a; z-index: 3; pointer-events: none; }
.nowline::before {
  content: ""; position: absolute; left: -4px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%; background: #e0453a;
}

.daynav { display: inline-flex; border: 1px solid #cfd9e6; border-radius: var(--r-s);
          overflow: hidden; }
.daynav a {
  padding: 6px 12px; background: #fff; color: var(--ink-2);
  text-decoration: none; font-size: 13px; font-weight: 600;
  border-right: 1px solid #cfd9e6;
}
.daynav a:last-child { border-right: none; }
.daynav a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }

.legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
          font-size: 11.5px; color: var(--ink-3); }
.legend .lk { display: inline-flex; align-items: center; gap: 5px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* the old list-style scheduler markup, kept working for anything not migrated */
.schedcols { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; }
.schedcol { min-width: 214px; flex: 0 0 214px; background: var(--surface);
            border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.schedcol h3 { padding: 9px 12px; background: var(--surface-2);
               border-bottom: 1px solid var(--line); font-size: 12.5px; }
.slot { border-bottom: 1px solid var(--line-soft); padding: 7px 12px; }
.slot:hover { background: var(--surface-2); }
.slot .t { font-weight: 650; font-variant-numeric: tabular-nums; }
.slot .ty { color: var(--ink-3); font-size: 11.5px; }
.slot.noshow { background: var(--bad-50); }
.slot.out { opacity: .7; }

/* ---------- dashboard ------------------------------------------------- */

.dashsplit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px;
             align-items: start; }
@media (max-width: 1180px) { .dashsplit { grid-template-columns: 1fr; } }

table.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kv td { padding: 5px 0; border-bottom: 1px solid var(--line-soft);
              color: var(--ink-2); }
table.kv tr:last-child td { border-bottom: none; }
table.kv td.num { text-align: right; font-variant-numeric: tabular-nums;
                  color: var(--ink); font-weight: 650; }

.golist { display: flex; flex-direction: column; gap: 2px; }
.golist a { padding: 6px 9px; border-radius: var(--r-s); color: var(--ink-2);
            font-weight: 500; }
.golist a:hover { background: var(--surface-2); color: var(--brand-600);
                  text-decoration: none; }

/* ---------- reports --------------------------------------------------- */

.bar { background: var(--brand); height: 9px; border-radius: 3px;
       display: inline-block; vertical-align: middle; min-width: 2px; }

/* ---------- auth ------------------------------------------------------ */

.authwrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 7vh 16px; min-height: 100vh; background: var(--bg);
}
.authcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-2);
  padding: 30px 32px; width: 392px; max-width: 100%;
}
.authcard.wide { width: 520px; }
.authcard .mark { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
                  color: var(--brand); font-weight: 700; margin-bottom: 10px; }
.authcard h1 { font-size: 21px; margin: 0 0 3px 0; }
.authcard .sub { color: var(--ink-3); margin: 0 0 20px 0; font-size: 13px; }
.authrow { margin-bottom: 14px; }
.authrow label { display: block; min-width: 0; margin-bottom: 5px; padding: 0; }
.authrow input[type=text], .authrow input[type=password], .authrow select {
  width: 100%; padding: 9px 11px; font-size: 14px;
}
.authrow input[type=submit] { width: 100%; padding: 10px 18px; font-size: 14px; }
.fineprint { color: var(--ink-3); font-size: 11.5px; margin: 16px 0 0 0; line-height: 1.5; }

/* ---------- misc ------------------------------------------------------ */

form.inline { display: inline; margin: 0; }
td.actions { white-space: nowrap; }
td.actions form.inline { margin-right: 5px; }
td.actions form.reset input[type=password] { width: 96px; }

.empty { text-align: center; padding: 34px 16px; color: var(--ink-3); }
.empty .big { font-size: 15px; color: var(--ink-2); margin-bottom: 3px; font-weight: 600; }

hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

@media (max-width: 1080px) {
  :root { --nav-w: 62px; }
  #nav a span.tx, .brand .bs, .navfoot .lbl { display: none; }
  .brand { padding: 15px 8px; text-align: center; }
  #nav a { justify-content: center; padding: 9px 0; }
  #nav .navgroup { text-align: center; font-size: 9px; padding: 10px 0 4px 0; }
  .navfoot { padding: 10px 6px; text-align: center; }
  .quicksearch input[type=text] { width: 180px; }
}


/* ---------- claims ----------------------------------------------------- */
/* Added with the billing centre. Reuses the existing variables so the claim
   screens are the same design system as the rest of the app. */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  padding: 14px 15px;
}
.card > h2 {
  margin: -14px -15px 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-2);
}

/* Panels used as a message block (direct children, no > .inner wrapper). */
.panel.ok, .panel.bad, .panel.warnpanel { padding: 12px 15px; }
.panel.ok  { background: var(--ok-50);   border-color: #bfe3cd; }
.panel.bad { background: var(--bad-50);  border-color: #f2c6c2; }
.panel.warnpanel { background: var(--warn-50); border-color: #ecd9ae; }
.panel.ok > h2, .panel.bad > h2, .panel.warnpanel > h2 {
  background: transparent; border: 0; padding: 0 0 6px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
}
.panel ul { margin: 4px 0 0 18px; }
.panel li { margin: 3px 0; }
.panel p:first-child { margin-top: 0; }
.panel p:last-child  { margin-bottom: 0; }

h1 .sub { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 8px; }

.filters, .toolrow, .actionbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.actionbar {
  justify-content: space-between;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 14px;
}

a.btn, .btn {
  display: inline-block; padding: 7px 13px; border-radius: 6px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; border: 0; cursor: pointer;
}
a.btn:hover, .btn:hover { background: var(--brand-600); }
a.btn.sec, .btn.sec {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
}
button.linkish {
  background: none; border: 0; color: var(--brand); cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline;
}

/* status tiles across the top of the claims board */
.tilerow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tile {
  flex: 1 1 0; min-width: 118px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 11px 13px;
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 2px;
}
.tile:hover { border-color: var(--brand); }
.tile.on { border-color: var(--brand); background: var(--brand-50); }
.tile .n { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .l { font-size: 11.5px; color: var(--ink-3); }

table.grid.tight th, table.grid.tight td { padding: 5px 10px; }
table.grid td.r, table.grid th.r {
  text-align: right; font-variant-numeric: tabular-nums;
}
table.grid tfoot th {
  position: static; background: var(--surface-2);
  border-top: 1px solid var(--line); border-bottom: none;
}
td.due { color: var(--bad); font-weight: 650; }
tr.unset td { background: var(--warn-50); }
.nowrap { white-space: nowrap; }
.small  { font-size: 11.5px; }
.bad    { color: var(--bad); }

/* claim status badges */
.badge.s-ready    { background: var(--brand-50); color: var(--brand-600); }
.badge.s-awaiting { background: var(--warn-50);  color: var(--warn); }
.badge.s-closed   { background: var(--ok-50);    color: var(--ok); }
.badge.s-patient  { background: #eef2f7;         color: var(--ink-2); }
.badge.s-unbilled { background: var(--bad-50);   color: var(--bad); }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; }
dl.kv dt { color: var(--ink-3); font-size: 12px; }
dl.kv dd { margin: 0; font-size: 13px; }

pre.edi {
  background: #0f1b2d; color: #cfe6ea; padding: 12px 14px;
  border-radius: var(--r); overflow-x: auto;
  font: 12px/1.45 "Cascadia Mono", Consolas, "Courier New", monospace;
  max-height: 26em;
}