/* Care Happiness admin — palette sampled from the company logo. */

:root {
  --blue: #105689;
  --blue-dark: #0C4269;
  --orange: #F8991E;
  --yellow: #F8D731;
  --purple: #642165;
  --green: #136734;
  --green-light: #58BA48;

  --bg: #F5F8FA;
  --surface: #FFFFFF;
  --surface-alt: #EDF3F7;
  --border: #D3DEE6;
  --text: #0E2130;
  --muted: #5B6F7E;

  /* Emergency red, deliberately not brand orange — orange is decorative here. */
  --danger: #C1121F;
  --danger-bg: #FCE8E9;
  --warn: #8A6100;
  --warn-bg: #FDF3D4;
  --ok-bg: #E4F3E8;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(14, 33, 48, .08), 0 4px 12px rgba(14, 33, 48, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
a { color: var(--blue); }

.boot { display: grid; place-items: center; min-height: 100vh; }
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--blue);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- layout */

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } }

.side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem .75rem;
  display: flex; flex-direction: column; gap: .15rem;
}
@media (max-width: 820px) {
  .side { border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; }
}
.brand { display: flex; align-items: center; gap: .55rem; padding: .25rem .5rem 1rem; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { font-weight: 800; font-size: 1.02rem; }
.brand .c { color: var(--blue); }
.brand .h { color: var(--orange); }

.nav {
  display: block; padding: .6rem .7rem; border-radius: 9px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .93rem;
  border: 1px solid transparent;
}
.nav:hover { background: var(--surface-alt); }
.nav.on { background: var(--blue); color: #fff; }
.nav .count {
  float: right; background: var(--danger); color: #fff; border-radius: 99px;
  font-size: .72rem; padding: 0 .42rem; font-weight: 800; line-height: 1.5;
}
.nav.on .count { background: #fff; color: var(--danger); }

.side .spacer { flex: 1; }
@media (max-width: 820px) { .side .spacer { display: none; } }
.who { padding: .5rem .7rem; font-size: .82rem; color: var(--muted); border-top: 1px solid var(--border); }

.main { padding: 1.5rem; max-width: 1180px; }
@media (max-width: 560px) { .main { padding: 1rem; } }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sub { color: var(--muted); font-size: .92rem; }

/* ----------------------------------------------------------- components */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.card > h2 { margin-bottom: .75rem; }

.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem; }
.tile .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tile .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

button, .btn {
  font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--blue);
  background: var(--blue); color: #fff;
  padding: .6rem 1rem; min-height: 42px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
button:hover, .btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
button:disabled { background: var(--surface-alt); border-color: var(--border); color: var(--muted); cursor: not-allowed; }
button.ghost, .btn.ghost { background: var(--surface); color: var(--blue); border-color: var(--border); }
button.ghost:hover { background: var(--surface-alt); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.small { padding: .35rem .7rem; min-height: 34px; font-size: .85rem; }

label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin: .75rem 0 .3rem; letter-spacing: .03em; }
input, select, textarea {
  font: inherit; width: 100%; padding: .55rem .7rem; min-height: 42px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
textarea { min-height: 90px; resize: vertical; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row > .fit { flex: 0 0 auto; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
tbody tr:hover { background: var(--surface-alt); }
.scroll { overflow-x: auto; }

.pill {
  display: inline-block; padding: .1rem .5rem; border-radius: 99px;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  background: var(--surface-alt); color: var(--muted);
}
.pill.ok { background: var(--ok-bg); color: var(--green); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--danger-bg); color: var(--danger); }
.pill.info { background: #E7EFF5; color: var(--blue); }

.note { padding: .7rem .85rem; border-radius: 10px; font-size: .9rem; margin: .6rem 0; }
.note.err { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.note.ok { background: var(--ok-bg); color: var(--green); border: 1px solid var(--green); }
.note.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.note code { word-break: break-all; font-size: .85em; }

.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

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

.auth { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.auth .box { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow); }
.auth img.logo { display: block; width: 130px; margin: 0 auto 1rem; }
.auth h1 { text-align: center; font-size: 1.25rem; }
.auth .sub { text-align: center; margin-bottom: .5rem; }
.auth button { width: 100%; margin-top: 1.1rem; }
.auth .link { display: block; text-align: center; margin-top: .9rem; font-size: .88rem; }

/* Alert board rows need to shout without relying on colour alone. */
.alert-row { border-left: 4px solid var(--danger); }
.alert-row.ack { border-left-color: var(--warn); }

/* --------------------------------------------------------------- live map */

#map { height: 520px; border-radius: var(--radius); border: 1px solid var(--border); }
@media (max-width: 700px) { #map { height: 360px; } }

.leaflet-container { font: inherit; background: var(--surface-alt); }

/* Colour-coded worker pins. Alert red always wins over anything else. */
.pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(14,33,48,.4);
  display: grid; place-items: center;
}
.pin span { transform: rotate(45deg); color: #fff; font-weight: 800; font-size: 11px; }
.pin.ok    { background: var(--green); }
.pin.stale { background: var(--muted); }
.pin.alert { background: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
.pin.trip  { background: var(--blue); }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(193,18,31,.25); } }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .75rem 0 0; font-size: .84rem; color: var(--muted); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }

/* ------------------------------------------------------------ family portal */

.family-wrap { max-width: 620px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.family-head { text-align: center; padding: 1rem 0 1.5rem; }
.family-head img { width: 110px; }
.family-head h1 { margin-top: .5rem; }

/* ---------------------------------------------- ShiftCare-style nav + dashboard */

.navgroup {
  padding: .9rem .7rem .25rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #9aa9b4;
}
.nav { display: flex; align-items: center; gap: .5rem; }
.nav > span:first-child { flex: 1; }
.nav .soon {
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface-alt); color: var(--muted); border-radius: 99px; padding: 0 .35rem;
}
.nav.on .soon { background: rgba(255,255,255,.25); color: #fff; }

.dashtabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.dashtab {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  font-weight: 700; font-size: .95rem; padding: .5rem .8rem; min-height: 0; border-radius: 0; cursor: pointer;
}
.dashtab.on { color: var(--blue); border-bottom-color: var(--blue); }
.dashtab:disabled { color: #b8c4cd; cursor: default; }
.dashtab .soon { font-size: .55rem; }

.kpirow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1100px) { .kpirow { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1rem; box-shadow: var(--shadow); text-align: center;
}
.kpi-label { font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: .35rem; }
.kpi-n { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--text); }
.kpi-n.bad { color: var(--danger); }
.kpi-n.warn { color: var(--warn); }
.kpi-sub { margin-top: .4rem; display: flex; gap: 1rem; justify-content: center; }
.kpi-split { font-weight: 800; color: var(--text); font-size: 1.05rem; }
.kpi-split span { font-weight: 600; color: var(--muted); font-size: .72rem; }

.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .grid.three { grid-template-columns: 1fr; } }
.grid.three .card.wide2 { grid-column: span 2; }
@media (max-width: 1100px) { .grid.three .card.wide2 { grid-column: span 1; } }
.grid.three .card { margin-bottom: 0; }
.grid.three .card h2 { font-size: 1rem; }

.linechart { width: 100%; height: 150px; display: block; }
.chart-x { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: .25rem; }
.spark { width: 90px; height: 22px; }

.ubars { display: flex; flex-direction: column; gap: .6rem; }
.ubar { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: .5rem; }
.ubar-name { font-size: .8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ubar-track { position: relative; height: 14px; background: var(--surface-alt); border-radius: 7px; }
.ubar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 7px; }
.ubar-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink, #0E2130); opacity: .5; }
.ubar-val { font-size: .78rem; color: var(--muted); text-align: right; }

/* ------------------------------------------------ ShiftCare-style clients + profile */

.statcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 1100px) { .statcards { grid-template-columns: repeat(2, 1fr); } }
.statcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; box-shadow: var(--shadow); }
.statcard-n { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--text); }
.statcard-n.warn { color: var(--warn); } .statcard-n.bad { color: var(--danger); }
.statcard-k { font-size: .72rem; color: var(--muted); margin-top: .3rem; }

table.wide th, table.wide td { white-space: nowrap; font-size: .86rem; }
.clickrow { cursor: pointer; }
.cell-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: var(--surface-alt); color: var(--text); font-size: .72rem; font-weight: 800; padding: 0 .3rem; }

.modal-back { position: fixed; inset: 0; background: rgba(14,33,48,.45); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal { background: var(--surface); border-radius: 16px; padding: 1.4rem; width: 100%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 90vh; overflow: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.modal-head h2 { margin: 0; }
.modal .x { background: none; border: 0; font-size: 1.2rem; color: var(--muted); cursor: pointer; min-height: 0; padding: .2rem .5rem; }

.backlink { display: inline-block; margin-bottom: .8rem; color: var(--muted); text-decoration: none; font-weight: 600; }
.backlink:hover { color: var(--blue); }
.profile-head { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.avatar-lg { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; flex: 0 0 auto; }
.profile-name { font-size: 1.4rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .6rem; }
.profile-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--muted); font-size: .88rem; margin-top: .3rem; }

.tabbar { display: flex; gap: .1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.ctab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 700; font-size: .9rem; padding: .55rem .8rem; min-height: 0; border-radius: 0; cursor: pointer; white-space: nowrap; }
.ctab.on { color: var(--blue); border-bottom-color: var(--blue); }
.ctab .soon { font-size: .55rem; }

.fld { display: grid; grid-template-columns: 42% 58%; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--surface-alt); }
.fld:last-child { border-bottom: 0; }
.fld-k { color: var(--muted); font-size: .82rem; }
.fld-v { color: var(--text); font-size: .9rem; }

/* ---------------------------------------------------------- integrations page */

.intgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.intcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.intcard-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.intlogo { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--blue); flex: 0 0 auto; }
.intlogo.xero { background: #13B5EA; } .intlogo.myob { background: #6C2EB9; }
.intlogo.quickbooks { background: #2CA01C; } .intlogo.proda { background: #1B4F91; }
.intlogo.google_calendar { background: #4285F4; } .intlogo.csv_import { background: #5B6F7E; }
.intname { font-weight: 800; color: var(--text); margin-bottom: .15rem; }
.intcard .sub { flex: 1; margin: 0 0 .8rem; }
.intcard-foot { display: flex; justify-content: flex-end; }

/* ============================================ ShiftCare-style shell (overrides) */

body { background: #F6F8FA; }
.shell { grid-template-columns: 240px 1fr; }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } }

.side {
  background: #FFFFFF; border-right: 1px solid var(--border);
  padding: 0; display: flex; flex-direction: column; gap: 0; position: sticky; top: 0; height: 100vh;
}
@media (max-width: 820px) { .side { position: static; height: auto; flex-direction: column; } }
.brand { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); margin: 0; }
.navscroll { flex: 1; overflow-y: auto; padding: .5rem .6rem 1rem; }

.navgroup { padding: 1rem .55rem .3rem; font-size: .64rem; font-weight: 800; letter-spacing: .09em; color: #9AA9B4; }
.nav {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 8px;
  color: #33475B; font-weight: 600; font-size: .9rem; border: 0; text-decoration: none; margin-bottom: 1px;
}
.nav:hover { background: #F1F5F8; }
.nav.on { background: #E7F1F8; color: var(--blue); }
.nav.on .navicon { color: var(--blue); }
.navicon { width: 19px; height: 19px; color: #7C8B97; flex: 0 0 auto; }
.navlabel { flex: 1; }
.nav .soon { font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: #EEF2F5; color: #8A99A5; border-radius: 99px; padding: .05rem .4rem; }
.nav.on .soon { background: rgba(16,86,137,.14); color: var(--blue); }
.nav .count { background: var(--danger); color: #fff; border-radius: 99px; font-size: .68rem; font-weight: 800; padding: 0 .4rem; }
.nav.signout { margin: 0; border-top: 1px solid var(--border); border-radius: 0; padding: .8rem 1.1rem; color: var(--muted); }
.nav.signout:hover { background: #F1F5F8; }

/* content column = topbar + scrolling main */
.content { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.topbar {
  height: 56px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; position: sticky; top: 0; z-index: 20;
}
.searchbox {
  flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: .5rem;
  background: #F1F5F8; border: 1px solid var(--border); border-radius: 10px; padding: .35rem .7rem;
}
.searchbox svg { width: 16px; height: 16px; color: var(--muted); }
.searchbox input { border: 0; background: none; flex: 1; min-height: 0; padding: .1rem 0; font-size: .9rem; }
.searchbox input:focus { outline: none; }
.searchbox kbd { font-size: .66rem; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: .05rem .35rem; }
.topright { display: flex; align-items: center; gap: .6rem; }
.topicon { background: none; border: 0; color: var(--muted); padding: .3rem; min-height: 0; cursor: default; }
.topicon svg { width: 20px; height: 20px; }
.userchip { display: flex; align-items: center; gap: .5rem; padding-left: .3rem; }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .78rem; }
.uname { font-size: .85rem; color: var(--text); font-weight: 600; }
@media (max-width: 640px) { .uname { display: none; } }

.main { flex: 1; padding: 1.5rem; max-width: none; }
@media (max-width: 560px) { .main { padding: 1rem; } }
.who { display: none; }

.kpirow.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .kpirow.four { grid-template-columns: repeat(2, 1fr); } }
.kpi-n.ok { color: var(--green); }

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

.sch-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.segbtns { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg { display: inline-flex; align-items: center; gap: .35rem; background: #fff; color: var(--muted); border: 0; border-right: 1px solid var(--border); padding: .4rem .7rem; min-height: 0; font-weight: 700; font-size: .85rem; border-radius: 0; }
.seg:last-child { border-right: 0; }
.seg.on { background: #E7F1F8; color: var(--blue); }
.seg svg { width: 15px; height: 15px; }
.icononly { padding: .4rem .6rem; font-size: 1rem; line-height: 1; }
.monthlbl { font-weight: 800; font-size: 1.05rem; color: var(--text); padding: 0 .4rem; }

.sch-kpi { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; box-shadow: var(--shadow); }
.sch-kpi > div { padding: .7rem 1rem; border-right: 1px solid var(--border); text-align: center; }
.sch-kpi > div:last-child { border-right: 0; }
.sch-kpi-k { font-size: .72rem; color: var(--muted); font-weight: 700; }
.sch-kpi-n { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-top: .2rem; }
.sch-kpi-n.bad { color: var(--danger); } .sch-kpi-n.ok { color: var(--green); }
.est { font-size: .58rem; background: #EEF2F5; color: #8A99A5; border-radius: 99px; padding: 0 .3rem; font-weight: 800; }
.sch-chips { display: flex; align-items: center; gap: .4rem; }

.schgrid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.schgrid { display: grid; grid-template-columns: 210px repeat(7, minmax(150px, 1fr)); min-width: 900px; }
.schhead { padding: .6rem .5rem; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); text-align: center; font-size: .72rem; font-weight: 800; color: var(--muted); background: #FAFBFC; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.schhead.corner { border-left: 0; text-align: left; align-items: flex-start; }
.schhead .dnum { font-size: 1rem; color: var(--text); }
.rowinfo { display: flex; align-items: center; gap: .5rem; padding: .6rem .6rem; border-bottom: 1px solid var(--border); }
.rowinfo.vacant .ravatar.vs { background: #FBE3D4; color: #C2691B; }
.ravatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .78rem; flex: 0 0 auto; }
.rname { font-weight: 700; font-size: .86rem; color: var(--text); }
.rmeta { font-size: .74rem; color: var(--muted); }
.loss-amt { color: var(--danger); font-weight: 700; }
.daycell { border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: .3rem; min-height: 56px; display: flex; flex-direction: column; gap: .3rem; }
.shiftblk { background: #E4F3E8; border: 1px solid #BFE3C9; border-left: 3px solid var(--green); border-radius: 6px; padding: .35rem .45rem; cursor: pointer; }
.shiftblk.loss { background: #E9F1F7; border-color: #CBE0EF; border-left-color: var(--blue); }
.shiftblk:hover { filter: brightness(.97); }
.shiftblk-top { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; color: var(--text); }
.mchip { font-size: .64rem; font-weight: 800; padding: 0 .3rem; border-radius: 4px; }
.mchip.ok { background: #CDEBD5; color: var(--green); } .mchip.bad { background: #F6D9DC; color: var(--danger); }
.shiftblk-svc { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.shiftblk-client { font-size: .76rem; font-weight: 700; color: var(--text); }

/* ------------------------------------------------- nav flyout submenus
   ShiftCare shows a hover panel to the right of any section that has
   children (Clients -> List / Archived / New Client / Referrals). The panel
   is `position: fixed` and placed by JS because .navscroll scrolls: an
   absolutely-positioned child would be clipped by that overflow. */
.navitem { position: relative; }
.navchev { width: 14px; height: 14px; color: #A6B3BE; flex: 0 0 auto; }
.nav.on .navchev { color: var(--blue); }
.navitem:hover .navchev { color: #5C6C7A; }
.navtag {
  font-size: .55rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  background: #E7F6EF; color: #16794C; border-radius: 99px; padding: .05rem .4rem;
}

.flyout {
  position: fixed; z-index: 60; min-width: 208px; padding: .4rem;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16,42,67,.14), 0 2px 6px rgba(16,42,67,.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease;
  margin-left: 6px;
}
/* Invisible bridge across the 6px gap, so the pointer can travel from the nav
   item into the panel without the menu closing under it. */
.flyout::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
.navitem.open .flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.flyhead {
  padding: .45rem .6rem .35rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: #9AA9B4;
}
.flylink {
  display: block; padding: .48rem .6rem; border-radius: 7px;
  color: #33475B; text-decoration: none; font-weight: 600; font-size: .88rem;
}
.flylink:hover { background: #F1F5F8; }
.flylink.on { background: #E7F1F8; color: var(--blue); }

@media (max-width: 820px) { .flyout { display: none; } }

/* ------------------------------------------------------ ShiftCare CSV import
   Reuses .card / .note / .pill / table wholesale; these rules only cover the
   pieces that screen adds — the numbered steps, the file+paste pair, and the
   per-row preview table. */

/* A neutral, informational note. The existing three all read as verdicts
   (ok / warn / err); the "this never emails anyone" line is neither. */
.note.info { background: #E7EFF5; color: var(--blue); border: 1px solid #B9D2E4; }

/* .seg predates any enabled sibling toggle, so it never had a hover state and
   fell through to the global button:hover (solid dark blue). */
.seg:hover { background: #F1F5F8; color: var(--blue); border-color: var(--border); }
.seg.on, .seg.on:hover { background: #E7F1F8; color: var(--blue); }
.seg:disabled, .seg:disabled:hover { background: #fff; color: #B8C4CD; }

.impsteps { list-style: none; counter-reset: impstep; margin: 0; padding: 0; display: grid; gap: .5rem; }
.impsteps li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; }
.impsteps li::before {
  counter-increment: impstep; content: counter(impstep);
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #E7F1F8; color: var(--blue); font-size: .72rem; font-weight: 800;
  display: grid; place-items: center;
}

.impcols { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.impcols summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--blue); }
.impcols .sub { margin: .6rem 0 .4rem; }

.impfile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.impfile input[type=file] { flex: 1 1 260px; background: var(--surface-alt); cursor: pointer; padding: .45rem .6rem; }
.impor {
  margin: 1rem 0 .3rem; text-align: center; font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.imptext {
  min-height: 180px; white-space: pre; overflow-wrap: normal; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem;
}

.impactions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.impactions .hint { color: var(--muted); font-size: .84rem; }

.impfields { display: flex; flex-wrap: wrap; gap: .25rem .35rem; margin-top: .3rem; }
.impfield {
  font-size: .74rem; color: var(--muted); background: var(--surface-alt);
  border-radius: 6px; padding: .05rem .4rem;
}
.impfield b { color: var(--text); font-weight: 700; text-transform: capitalize; }
.improw-error td { background: var(--danger-bg); }

/* Behaviour notes under the column reference (shifts: past = completed,
   duplicates skipped, overlaps warned). */
.impnotes { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .86rem; display: grid; gap: .3rem; }

/* Warnings: the row still imports, so they must not read as failures. A muted
   surface with a warn-coloured left rule sits visibly below the error note. */
.note.quiet { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); border-left: 4px solid var(--warn); }
.note.quiet strong { color: var(--text); }
.improw-warn td { background: var(--warn-bg); }
.impwarn { color: var(--warn); font-size: .82rem; }


/* Scheduler: hover a day cell to offer a +, so a shift can be started from the
   grid instead of the toolbar. Kept keyboard-reachable — :focus-visible shows it
   for anyone tabbing through, who never triggers :hover at all. */
.daycell { position: relative; }

/* Add and Paste live in one strip so they can sit side by side. It fills an
   empty cell and shrinks to a footer under any shifts already there, so a busy
   day still offers both without covering the roster. */
/* Small centred controls, not cell-filling boxes. Two dashed rectangles in
   every cell made the roster look like an empty form waiting to be submitted,
   which is exactly the wrong impression: these act immediately. */
.cell-actions {
  position: absolute; inset: 0; z-index: 1;
  display: flex; gap: .3rem; align-items: center; justify-content: center;
  opacity: .3; pointer-events: auto; transition: opacity .12s ease;
}
/* On a cell that already has shifts they tuck under, out of the way. */
.daycell:has(.shiftblk) .cell-actions { opacity: 0; pointer-events: none; }
/* Reveal on hover anywhere in the cell, and for anyone tabbing through — a
   keyboard user never triggers :hover at all. */
.daycell:hover .cell-actions,
.cell-actions:focus-within { opacity: 1; pointer-events: auto; }

.cell-add, .cell-paste {
  flex: 0 0 auto; width: 26px; height: 26px; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; line-height: 1; border-radius: 999px;
}
.cell-add {
  font-size: 1.05rem; font-weight: 400;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border-strong);
}
.cell-add:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.cell-paste {
  font-size: .8rem;
  color: var(--orange); background: transparent;
  border: 1px solid var(--orange);
}
.cell-paste:hover { background: var(--orange); color: #fff; }
.daycell:has(.shiftblk) .cell-actions { position: static; inset: auto; justify-content: flex-start;
  margin-top: .3rem; min-height: 20px; }
.daycell:has(.shiftblk) .cell-add,
.daycell:has(.shiftblk) .cell-paste { width: 22px; height: 22px; font-size: .8rem; }

@media (hover: none) {
  /* Touch has no hover: show the strip faintly at all times instead. */
  .cell-actions { opacity: .6; pointer-events: auto; }
}

/* Staff list: onboarding shown as three marks rather than one opaque tick, so a
   coordinator can see WHICH step is outstanding at a glance. */
.obmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 3px; border-radius: 50%;
  font-size: .68rem; font-weight: 800; line-height: 1;
}
.obmark.ok { background: var(--ok-bg); color: var(--green); }
.obmark.no { background: var(--danger-bg); color: var(--danger); }
/* The wide roster scrolls sideways rather than squeezing columns — an address
   or an email broken across five lines is harder to scan than a scrollbar. */
table.wide { min-width: 1250px; }
table.wide th, table.wide td { white-space: nowrap; }

/* Staff profile: main column + sidebar, collapsing to one column on narrow screens. */
.pfgrid { display: grid; grid-template-columns: 1fr 360px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .pfgrid { grid-template-columns: 1fr; } }
.pfrow { display: grid; grid-template-columns: 170px 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.pfrow:last-child { border-bottom: 0; }
.pflabel { color: var(--muted); font-size: .85rem; }
.pfval { font-size: .92rem; word-break: break-word; }
.tick { color: var(--green); font-weight: 800; }
.cross { color: var(--danger); font-weight: 800; }

/* Per-worker month calendar. */
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.calhead { background: var(--surface-alt); padding: .4rem; text-align: center; font-size: .72rem; font-weight: 800; color: var(--muted); letter-spacing: .05em; }
.calcell { background: var(--surface); min-height: 92px; padding: .3rem; }
.calnum { font-size: .78rem; color: var(--muted); text-align: right; }
.calshift { background: var(--ok-bg); border-left: 3px solid var(--green); border-radius: 4px; padding: .2rem .35rem; margin-top: .2rem; font-size: .74rem; }

/* Profile photo sits beside the demographic fields; falls under them on narrow screens. */
.pfphoto { display: grid; grid-template-columns: 1fr 160px; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .pfphoto { grid-template-columns: 1fr; } }
.pfpic { text-align: center; }
.pfpic img { width: 150px; height: 170px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.pfpic .avatar-lg { width: 150px; height: 170px; border-radius: 10px; font-size: 2.4rem; }
.pfpic button { margin-top: .5rem; width: 100%; }
/* Per-card Edit, quiet until you look for it. */
.cardedit { float: right; background: none; border: 0; color: var(--blue); font-size: .82rem; font-weight: 700; cursor: pointer; min-height: 0; padding: .1rem .3rem; text-transform: uppercase; letter-spacing: .04em; }
.cardedit:hover { background: var(--surface-alt); border-radius: 6px; }

/* Client clinical record. */
.riskbanner { border: 1px solid var(--danger); background: var(--danger-bg); }
.riskbanner strong { color: var(--danger); }
.goalbar { height: 8px; background: var(--surface-alt); border-radius: 99px; overflow: hidden; }
.goalbar span { display: block; height: 100%; background: var(--green); }
.noteitem { border-left: 3px solid var(--green); background: var(--surface-alt); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; }
.noteitem p { margin: .4rem 0 0; font-size: .92rem; }

/* Right-hand drawer for shift detail — ShiftCare slides this in from the edge. */
.drawer-back { position: fixed; inset: 0; background: rgba(14,33,48,.35); z-index: 60; display: flex; justify-content: flex-end; }
.drawer { background: var(--bg); width: min(720px, 100%); height: 100%; overflow: auto; padding: 1rem 1.2rem; box-shadow: -12px 0 40px rgba(0,0,0,.18); }
.drawer-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.drawer .card { margin-bottom: .8rem; }

/* Compliance report: colour-coded KPI cards, matching the traffic-light read. */
.tile.comp-valid { border-top: 3px solid var(--border); }
.tile.comp-unverified { border-top: 3px solid var(--blue); background: #F2F7FB; }
.tile.comp-expiring { border-top: 3px solid var(--warn); background: var(--warn-bg); }
.tile.comp-expired { border-top: 3px solid var(--danger); background: var(--danger-bg); }
.qualpick { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 230px; overflow: auto; padding: .5rem; border: 1px solid var(--border); border-radius: 10px; }
.qualchip { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 99px; font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.qualchip.on { border-color: var(--blue); background: #E7EFF5; }
.qualchip input { width: auto; min-height: 0; margin: 0; }

/* Audit rows link to the record they name. */
.resref { color: var(--blue); text-decoration: none; font-weight: 600; }
.resref:hover { text-decoration: underline; }

/* ---------------------------------------------------- scheduler toolbar v2 */
/* Popovers anchor to their button, so the toolbar can wrap without them
   drifting away from the control that opened them. */
.popwrap { position: relative; display: inline-flex; }
.hidden { display: none !important; }
.sch-toolbar .seg { text-decoration: none; }
.datepick { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--border);
  background: #fff; border-radius: 8px; padding: .28rem .45rem; cursor: pointer; font-size: .85rem; }
.datepick input { border: 0; padding: 0; width: 118px; font-size: .8rem; background: transparent; }
.fcount { background: var(--warn-bg); color: var(--warn); border-radius: 99px; padding: 0 .35rem;
  font-size: .68rem; font-weight: 800; margin-left: .25rem; }

/* Filters: a rail of sections on the left, the chosen section's options right —
   the shape ShiftCare uses, and it keeps a 15-item list off the toolbar. */
.filtpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: flex;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 33, 48, .16); min-width: 430px; }
.fsects { display: flex; flex-direction: column; align-items: stretch; padding: .5rem 0 .5rem;
  border-right: 1px solid var(--border); min-width: 132px; }
.fsect { background: none; border: 0; text-align: right; padding: .42rem .8rem; font-size: .85rem;
  color: var(--muted); font-weight: 600; min-height: 0; border-radius: 0; }
.fsect:hover { background: #F4F7F9; color: var(--text); }
.fsect.on { background: #F1F5F8; color: var(--text); font-weight: 800; }
.freset { margin: .5rem .6rem 0; text-align: center; font-size: .8rem; }
.fbody { padding: .55rem; min-width: 288px; max-width: 340px; }
.fopt { display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: 0;
  text-align: left; padding: .4rem .55rem; font-size: .9rem; color: var(--text); border-radius: 7px;
  min-height: 0; font-weight: 600; }
.fopt:hover { background: #F4F7F9; }
.fopt.on { color: var(--blue); font-weight: 800; }
.ftick { margin-left: auto; color: var(--blue); font-weight: 800; }
.sdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.fsearch { width: 100%; margin-bottom: .35rem; }
.fscroll { max-height: 268px; overflow-y: auto; }
.fnote { font-size: .76rem; color: var(--muted); padding: .5rem .55rem; line-height: 1.45; }
.fhaving { width: 100%; margin-bottom: .4rem; }
.fcheck { display: flex; align-items: center; gap: .5rem; padding: .34rem .55rem; font-size: .9rem;
  font-weight: 600; cursor: pointer; border-radius: 7px; }
.fcheck:hover { background: #F4F7F9; }
.fcheck.off { color: var(--muted); cursor: not-allowed; }
/* The global rule stretches every input to fill its row; a tickbox in a list
   must stay a tickbox. */
.fcheck input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; }
.fbody select, .fbody input { margin: 0; }
.fbody select { margin-bottom: .4rem; }

/* View and schedule-action menus. */
.vpop, .kpop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 33, 48, .16);
  min-width: 208px; padding: .4rem; }
.vitem, .kitem { display: flex; align-items: center; gap: .5rem; width: 100%; background: none;
  border: 0; text-align: left; padding: .45rem .6rem; font-size: .9rem; color: var(--text);
  border-radius: 7px; min-height: 0; font-weight: 600; text-decoration: none; }
.vitem:hover, .kitem:hover { background: #F4F7F9; }
.vitem.on { color: var(--blue); font-weight: 800; }
.vsep { height: 1px; background: var(--border); margin: .35rem .2rem; }
.tgl { margin-left: auto; width: 30px; height: 17px; border-radius: 99px; background: #D9E1E7;
  position: relative; flex: 0 0 auto; }
.tgl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; transition: left .12s; }
.tgl.on { background: var(--blue); }
.tgl.on::after { left: 15px; }
.kfoot { font-size: .74rem; color: var(--muted); padding: .3rem .6rem .45rem; line-height: 1.45; }

/* Grid extras. */
.schhead.today { background: #E7F1F8; color: var(--blue); }
.ravatar.jb { background: #E6E2FB; color: #5B4BD1; }
.gain-amt { color: var(--green); font-weight: 700; }
.sch-chips .pill { text-decoration: none; border: 1px solid transparent; }
.sch-chips .pill.sel { border-color: currentColor; }
.bflags { display: flex; gap: .2rem; margin-top: .15rem; }
.bflag { font-size: .66rem; color: var(--muted); line-height: 1; }
.bflag.warn { color: var(--warn); font-weight: 800; }
.schgrid.compact .daycell { min-height: 40px; padding: .2rem; }
.schgrid.compact .shiftblk { padding: .2rem .35rem; }
.schgrid.compact .bflags { display: none; }
.schgrid.expanded .daycell { min-height: 96px; }
.clickrow { cursor: pointer; }
.clickrow:hover { background: #F6F9FB; }

/* ------------------------------------------------------- Add Shift drawer */
/* Sectioned like ShiftCare's: a label column on the left, controls on the
   right, each group boxed so a twelve-question form still scans.
   .drawer-back is lifted above the scheduler's popovers, which also sit at 60 —
   opening Add Shift with the Filters panel still open was a z-index tie broken
   only by DOM order. */
.drawer-back { z-index: 90; }
.drawer.wide { max-width: 720px; }
.afhead { position: sticky; top: 0; z-index: 5; background: #fff;
  display: flex; align-items: center; gap: .5rem; padding: .1rem 0 .6rem;
  border-bottom: 1px solid var(--border); margin-bottom: .8rem; }

.fsection { border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  margin-bottom: .9rem; box-shadow: var(--shadow); }
.fsection-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem;
  border-bottom: 1px solid var(--border); background: #FAFCFD; border-radius: var(--radius) var(--radius) 0 0; }
.fsection-head h3 { margin: 0; font-size: .84rem; font-weight: 800; color: var(--text); }
.fsection-head .fcheck.inline { margin-left: auto; font-size: .82rem; }
.fsection-body { padding: .7rem .85rem .85rem; }

.frow { display: grid; grid-template-columns: 190px 1fr; gap: .8rem; align-items: start; padding: .42rem 0; }
.frow > label { font-size: .86rem; color: var(--muted); font-weight: 600; padding-top: .45rem; margin: 0; }
.fctl > input, .fctl > select, .fctl > textarea { margin: 0; width: 100%; }
.fctl .sub { margin-top: .3rem; line-height: 1.45; }
.fctl .row.tight { display: flex; gap: .5rem; align-items: center; margin: 0; }
.fctl .row.tight > * { margin: 0; }
.dash { color: var(--muted); font-weight: 700; }
@media (max-width: 620px) { .frow { grid-template-columns: 1fr; } .frow > label { padding-top: 0; } }

/* Type-to-search client picker. */
.typeahead { border: 1px solid var(--border); border-radius: 8px; margin-top: .25rem;
  max-height: 220px; overflow-y: auto; background: #fff; box-shadow: var(--shadow); }
.tahit { display: flex; gap: .5rem; width: 100%; background: none; border: 0; text-align: left;
  padding: .45rem .6rem; font-size: .9rem; color: var(--text); border-radius: 0; min-height: 0; font-weight: 600; }
.tahit:hover { background: #F4F7F9; }
.tanone { padding: .5rem .6rem; font-size: .84rem; color: var(--muted); }
.picked { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; font-size: .8rem; }

/* Multi-select chips (additional shift types, allowances, repeat days). */
.chipwrap { display: flex; flex-wrap: wrap; gap: .35rem; }
.pickchip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border);
  border-radius: 99px; padding: .22rem .6rem; font-size: .8rem; font-weight: 600; cursor: pointer; background: #fff; }
.pickchip:hover { border-color: var(--blue); }
.pickchip input { width: 13px; height: 13px; margin: 0; padding: 0; min-height: 0; flex: 0 0 auto; }
.pickchip:has(input:checked) { background: #E7F1F8; border-color: var(--blue); color: var(--blue); }

/* Suggested carers. A blocked one is shown, not hidden — the reason is in the
   tooltip and repeated in the confirm if you pick them anyway. */
.sugchip { border: 1px solid var(--border); background: #fff; border-radius: 99px;
  padding: .2rem .6rem; font-size: .8rem; font-weight: 700; color: var(--blue);
  margin: 0 .3rem .3rem 0; min-height: 0; }
.sugchip:hover { background: #E7F1F8; }
.sugchip.blocked { color: var(--danger); border-color: #F0C8CB; background: #FDF4F5; }
.sugchip.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.fcheck.inline { padding: 0; background: none; }
.fctl .fcheck { padding-left: 0; }

/* --------------------------------------------------------- bulk edit mode */
.bulkbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.1rem; z-index: 80;
  display: flex; align-items: center; gap: .55rem; background: #16324A; color: #fff;
  padding: .55rem .8rem; border-radius: 12px; box-shadow: 0 12px 34px rgba(9, 25, 40, .34); }
.bulkbar .count { font-weight: 800; font-size: .88rem; white-space: nowrap; }
.bulkbar button { min-height: 0; padding: .34rem .7rem; font-size: .82rem; border-radius: 8px; }
.bulkbar .bghost { background: transparent; color: #C9DBEA; border: 1px solid #37546E; }
.bulkbar .bghost:hover { background: #21425F; color: #fff; }
.bulkbar button:disabled { opacity: .45; }
.bulkbar .sep { color: #4A6982; }
.schgrid.selecting .shiftblk { cursor: pointer; }
.schgrid.selecting .cell-add { display: none; }
.shiftblk.picked { outline: 2px solid var(--blue); outline-offset: 1px; background: #DCEBF7; }

/* A draft shift must not read as a booked one at a glance. */
.shiftblk.draft { background: #F4F6F8; border-color: #DCE3E9; border-left-color: #9AA7B1;
  border-style: dashed; }
.draftpill { background: #E3E8EC; color: #5C6B77; border-radius: 4px; padding: 0 .25rem;
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.pubbanner { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700;
  padding: .45rem .7rem; border-radius: 8px; margin-bottom: .6rem; }
.pubbanner.on { background: var(--ok-bg); color: var(--green); }
.pubbanner.off { background: #EEF2F5; color: #5C6B77; }

/* ==========================================================================
   Brand pass — same layout, Care Happiness palette.

   The logo carries a deep teal-blue, a warm orange and a leaf green. The rule
   used throughout: BLUE carries structure and navigation, ORANGE is reserved
   for the one thing on a screen that wants a decision, GREEN means delivered or
   healthy. Nothing decorative is orange, so when orange appears it means
   something. Red stays for danger only and is never a brand colour.
   ========================================================================== */

:root {
  --brand-teal: #0E4C6B;
  --brand-ink: #0A2233;
  --tint: #EAF2F7;          /* the blue at 8% — hovers, selected rows */
  --tint-strong: #D9E8F1;
  --accent: var(--orange);
  --accent-soft: #FEF3E2;

  --bg: #F4F7F9;
  --surface-alt: #F0F5F8;
  --border: #DAE3EA;
  --border-strong: #C3D2DC;

  /* One shadow family, applied by depth rather than ad hoc per component. */
  --shadow: 0 1px 2px rgba(10, 34, 51, .05), 0 1px 3px rgba(10, 34, 51, .04);
  --shadow-lift: 0 2px 4px rgba(10, 34, 51, .06), 0 8px 20px rgba(10, 34, 51, .07);
  --radius: 10px;
}

/* ------------------------------------------------------------------ shell */
.sidebar {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
  border-right: 1px solid var(--border);
}
.brand { border-bottom: 1px solid var(--border); }
.brand span { letter-spacing: -.015em; }

/* The active nav item gets a brand rail rather than only a fill, so it stays
   legible for anyone who cannot separate the two background tints. */
.nav a.on, .navlink.on, a.navitem.on {
  background: var(--tint);
  color: var(--brand-teal);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--blue);
}
.nav a:hover, .navlink:hover, a.navitem:hover { background: var(--surface-alt); }

.topbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}

/* ------------------------------------------------------------------ cards */
.card {
  border-radius: var(--radius);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.card h2 {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------- KPIs */
.kpirow.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1500px) { .kpirow.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kpirow.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kpi {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--blue);
  transition: box-shadow .12s ease, transform .12s ease;
}
.kpi.tap { text-decoration: none; color: inherit; display: block; }
.kpi.tap:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); border-top-color: var(--orange); }
.kpi.none { border-top-color: var(--border-strong); }
.kpi-label { font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.kpi-n { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi-n.muted { color: var(--border-strong); }
.kpi-n.bad { color: var(--danger); }
.kpi-n.warn { color: var(--warn); }
.kpi-n.ok { color: var(--green); }

/* ----------------------------------------------------------------- roster */
.sch-kpi { border-radius: var(--radius); box-shadow: var(--shadow); }
.sch-kpi.four { grid-template-columns: repeat(3, 1fr) auto; }
@media (max-width: 900px) { .sch-kpi.four { grid-template-columns: 1fr 1fr; } }
.schgrid-wrap { border-radius: var(--radius); box-shadow: var(--shadow); }
.schhead {
  background: var(--surface-alt);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}
.schhead.today { background: var(--tint); color: var(--blue); }
.rowinfo { background: #fff; }
.daycell:hover { background: #FBFDFE; }

/* A shift block reads as a card, with the service colour on its spine. */
.shiftblk {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-light);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(10, 34, 51, .04);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.shiftblk:hover { box-shadow: var(--shadow-lift); filter: none; }
.shiftblk.st-booked { border-left-color: var(--green-light); }
.shiftblk.st-completed { border-left-color: var(--blue); }
.shiftblk.st-pending { border-left-color: var(--orange); }
.shiftblk.st-job_board { border-left-color: var(--purple); }
.shiftblk.st-cancelled { border-left-color: var(--border-strong); opacity: .65; }
.shiftblk.st-invoiced { border-left-color: var(--green); }
.shiftblk.draft { background: repeating-linear-gradient(135deg, #FAFCFD, #FAFCFD 6px, #F3F7FA 6px, #F3F7FA 12px);
  border-style: dashed; border-left-style: solid; border-left-color: var(--border-strong); }

/* Copy sits on the block, paste sits on the cell — both only on hover, so a
   dense week is not a wall of icons. */
.blk-copy {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  width: 18px; height: 18px; min-height: 0; padding: 0; line-height: 1;
  font-size: .7rem; border-radius: 5px;
  background: #fff; color: var(--muted); border: 1px solid var(--border);
  opacity: 0; pointer-events: none; transition: opacity .1s;
}
.shiftblk { position: relative; }
.shiftblk:hover .blk-copy, .blk-copy:focus-visible { opacity: 1; pointer-events: auto; }
.blk-copy:hover { color: var(--blue); border-color: var(--blue); background: var(--tint); }


.clipbar {
  display: flex; align-items: center; gap: .7rem;
  background: var(--accent-soft); border: 1px solid #F6D9A8;
  color: #7A4A00; border-radius: var(--radius);
  padding: .5rem .8rem; margin-bottom: .8rem; font-size: .85rem;
}
.clipbar button { margin-left: auto; }

/* ---------------------------------------------------------------- buttons */
button, .btn {
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .005em;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
button:not(.ghost):not(.x):not(.seg):not(.dashtab):not(.fsect):not(.fopt):not(.kitem):not(.vitem):not(.tahit):not(.blk-copy):not(.cell-add):not(.cell-paste):not(.sugchip):not(.bghost) {
  background: var(--blue);
  box-shadow: 0 1px 2px rgba(10, 34, 51, .12);
}
button:not(.ghost):not(.x):not(.kitem):not(.vitem):hover { background: var(--brand-teal); }
.btn.ghost, button.ghost { border-color: var(--border-strong); }
.btn.ghost:hover, button.ghost:hover { background: var(--tint); border-color: var(--blue); color: var(--blue); }

/* --------------------------------------------------------------- surfaces */
table thead th {
  background: var(--surface-alt);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
tbody tr:hover { background: #FBFDFE; }
.pill { border-radius: 6px; font-weight: 800; letter-spacing: .02em; }
.note { border-radius: var(--radius); border-left: 3px solid var(--blue); background: var(--tint); color: var(--brand-ink); }
.note.err { border-left-color: var(--danger); background: var(--danger-bg); }
.note.ok { border-left-color: var(--green); background: var(--ok-bg); }
input, select, textarea { border-radius: 8px; border-color: var(--border-strong); }
input:hover, select:hover, textarea:hover { border-color: var(--blue); }

/* The one place orange leads: the primary action in a drawer header. */
.afhead #afSave, .drawer-head .small:not(.ghost) { background: var(--orange); color: #FFFFFF; }
.afhead #afSave:hover, .drawer-head .small:not(.ghost):hover { background: #E0860F; }

/* ==========================================================================
   Care Happiness — logo palette and bubble navigation.

   Sampled from public/logo.png: a navy-blue figure, an orange figure, a yellow
   child, a purple crescent and two greens of leaf. It is a warm, six-colour,
   human mark — so an all-white admin panel was never going to feel like it
   belonged to this brand.

   How the six are used, so the screen stays calm rather than becoming a
   fruit salad:
     BLUE     structure — nav, headings, the primary button
     ORANGE   the one action on a screen that wants a decision, and nothing else
     GREEN    delivered, healthy, on track
     PURPLE   the participant's own world — their record, their supports
     YELLOW   attention that is not yet a problem
     RED      danger only, and it is not a brand colour
   ========================================================================== */

:root {
  /* Straight from the mark. */
  --logo-blue: #1A5490;
  --logo-blue-bright: #2B7FB8;   /* the "Care" wordmark */
  --logo-orange: #F26522;        /* the "Happiness" wordmark */
  --logo-amber: #F58220;         /* the orange figure */
  --logo-yellow: #F5CE00;
  --logo-purple: #63216B;
  --logo-green: #206B36;
  --logo-leaf: #62BC47;

  --blue: var(--logo-blue);
  --blue-dark: #113C68;
  --brand-teal: #113C68;
  --orange: var(--logo-amber);
  --yellow: var(--logo-yellow);
  --purple: var(--logo-purple);
  --green: var(--logo-green);
  --green-light: var(--logo-leaf);

  /* A warm off-white ground, not grey. White cards need something to sit on,
     and a cool grey would fight the orange in the mark. */
  --bg: #F7F5F1;
  --surface: #FFFFFF;
  --surface-alt: #F4F1EC;
  --border: #E4DED4;
  --border-strong: #D2C9BC;
  --text: #21303C;
  --muted: #6B7885;

  --tint: #EAF1F8;
  --tint-strong: #D8E7F4;
  --accent-soft: #FDF0E4;

  --shadow: 0 1px 2px rgba(33, 48, 60, .05), 0 1px 3px rgba(33, 48, 60, .04);
  --shadow-lift: 0 4px 10px rgba(33, 48, 60, .07), 0 12px 28px rgba(33, 48, 60, .07);
  --radius: 14px;
}

body { background: var(--bg); }

/* ------------------------------------------------------------- the sidebar */
/* A soft warm panel rather than white-on-white, so the nav reads as a distinct
   surface and the bubbles have something to sit in. */
.side {
  background: linear-gradient(180deg, #FFFDFA 0%, #F8F4EE 100%);
  border-right: 1px solid var(--border);
}
.brand {
  border-bottom: 1px solid var(--border);
  background: #FFFFFF;
}
.brand img { width: 38px; height: 38px; }
.brand span { letter-spacing: -.02em; font-size: 1.06rem; }
.brand .c { color: var(--logo-blue-bright); }
.brand .h { color: var(--logo-orange); }

.navscroll { padding: .6rem .65rem 1.2rem; }
.navgroup {
  padding: 1.05rem .8rem .35rem;
  font-size: .62rem; letter-spacing: .12em; color: #9C8F7E;
}

/* ------------------------------------------------------------ bubble items */
/* Fully rounded capsules. The active one is a filled brand-blue pill with a
   soft glow of its own colour — the shape does the work, so it stays legible
   without relying on the fill alone. */
.nav {
  border-radius: 999px;
  padding: .55rem .9rem;
  margin-bottom: 3px;
  font-weight: 600;
  color: #45525E;
  border: 1px solid transparent;
  transition: background .13s ease, color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.nav:hover {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--logo-blue);
  box-shadow: var(--shadow);
}
.nav:hover .navicon { color: var(--logo-blue); }
.nav.on {
  background: linear-gradient(135deg, var(--logo-blue) 0%, var(--logo-blue-bright) 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(26, 84, 144, .28), 0 6px 16px rgba(26, 84, 144, .18);
}
.nav.on .navicon { color: #FFFFFF; }
.nav.on .navchev { color: rgba(255, 255, 255, .8); }
.nav.on:hover { transform: translateY(-1px); }
.nav .soon {
  background: rgba(107, 120, 133, .12);
  color: #7E8B96;
}
.nav.on .soon { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.nav .count { box-shadow: 0 1px 3px rgba(193, 18, 31, .35); }
.nav.on .count { background: #FFFFFF; color: var(--logo-blue); }

.navicon { color: #8C97A2; }
.nav.signout {
  border-radius: 0; border-top: 1px solid var(--border); background: #FFFFFF;
}
.nav.signout:hover { background: var(--surface-alt); box-shadow: none; border-color: transparent;
  border-top-color: var(--border); color: var(--danger); }

/* Submenu flyouts get the same bubble language. */
.navsub, .subflyout, .navflyout {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
}
.navsub a, .subflyout a, .navflyout a { border-radius: 999px; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  background: rgba(255, 253, 250, .92);
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--border);
  height: 60px;
}
.searchbox {
  background: #FFFFFF; border-radius: 999px; border-color: var(--border);
  box-shadow: var(--shadow);
}
.searchbox:focus-within { border-color: var(--logo-blue-bright); box-shadow: 0 0 0 3px var(--tint); }
.avatar, .userchip .av {
  background: linear-gradient(135deg, var(--logo-blue) 0%, var(--logo-blue-bright) 100%);
}

/* ------------------------------------------------------------ page surface */
.card { border-radius: var(--radius); }
h1 { letter-spacing: -.025em; }

/* Tiles carry the brand across, one colour each, in the order the mark reads.
   Six colours on six tiles is the logo laid out horizontally — it looks
   deliberate rather than random, and each tile keeps a stable identity. */
.kpirow.seven .kpi:nth-child(1) { border-top-color: var(--logo-blue); }
.kpirow.seven .kpi:nth-child(2) { border-top-color: var(--logo-blue-bright); }
.kpirow.seven .kpi:nth-child(3) { border-top-color: var(--logo-leaf); }
.kpirow.seven .kpi:nth-child(4) { border-top-color: var(--logo-yellow); }
.kpirow.seven .kpi:nth-child(5) { border-top-color: var(--logo-amber); }
.kpirow.seven .kpi:nth-child(6) { border-top-color: var(--logo-purple); }
.kpirow.seven .kpi:nth-child(7) { border-top-color: var(--logo-green); }
.kpi { border-top-width: 3px; border-radius: var(--radius); }
.kpi.tap:hover { border-top-color: var(--logo-orange); }

.segbtns { border-radius: 999px; overflow: hidden; }
.seg { border-radius: 0; }
.seg.on, .seg.on:hover {
  background: linear-gradient(135deg, var(--logo-blue) 0%, var(--logo-blue-bright) 100%);
  color: #FFFFFF;
}
.pill { border-radius: 999px; }
.dashtab.on { color: var(--logo-blue); border-bottom-color: var(--logo-blue); }

/* Buttons: pill-shaped to match the nav, with the same blue gradient. */
button, .btn { border-radius: 999px; padding-left: 1rem; padding-right: 1rem; }
button:not(.ghost):not(.x):not(.seg):not(.dashtab):not(.fsect):not(.fopt):not(.kitem):not(.vitem):not(.tahit):not(.blk-copy):not(.cell-add):not(.cell-paste):not(.sugchip):not(.bghost):not(.topicon) {
  background: linear-gradient(135deg, var(--logo-blue) 0%, var(--logo-blue-bright) 100%);
  box-shadow: 0 1px 3px rgba(26, 84, 144, .25);
}
button:not(.ghost):not(.x):not(.topicon):not(.kitem):not(.vitem):hover { background: var(--logo-blue); }
.btn.ghost, button.ghost { background: #FFFFFF; }
.btn.ghost:hover, button.ghost:hover { background: var(--tint); border-color: var(--logo-blue-bright); color: var(--logo-blue); }
.x, .topicon { border-radius: 999px; }
.cell-add, .blk-copy { border-radius: 999px; }

/* The single orange action per screen. */
.afhead #afSave, .drawer-head .small:not(.ghost) {
  background: linear-gradient(135deg, var(--logo-orange) 0%, var(--logo-amber) 100%);
  box-shadow: 0 1px 3px rgba(242, 101, 34, .3);
}
.afhead #afSave:hover, .drawer-head .small:not(.ghost):hover { background: var(--logo-orange); }

/* Shift blocks: the spine colour is the status, drawn from the mark. */
.shiftblk.st-booked { border-left-color: var(--logo-leaf); }
.shiftblk.st-completed { border-left-color: var(--logo-blue-bright); }
.shiftblk.st-pending { border-left-color: var(--logo-amber); }
.shiftblk.st-job_board { border-left-color: var(--logo-purple); }
.shiftblk.st-invoiced { border-left-color: var(--logo-green); }
.schhead.today { background: var(--tint); color: var(--logo-blue); }
.ravatar { background: linear-gradient(135deg, var(--logo-blue) 0%, var(--logo-blue-bright) 100%); }
.ravatar.jb { background: linear-gradient(135deg, var(--logo-purple) 0%, #8A3C93 100%); }
.rowinfo.vacant .ravatar.vs { background: linear-gradient(135deg, var(--logo-amber) 0%, var(--logo-orange) 100%); color: #fff; }

/* A radio inherited the global "inputs fill their row" rule and rendered as a
   40px circle that shoved its label off to the right. Tick controls are fixed
   objects, not fields — size them explicitly and let the label take the rest. */
.fcheck { align-items: flex-start; gap: .55rem; line-height: 1.5; }
.fcheck input[type="checkbox"],
.fcheck input[type="radio"] {
  width: 15px; height: 15px; min-height: 0; flex: 0 0 auto;
  margin: .18rem 0 0; padding: 0; border-radius: 4px;
  accent-color: var(--logo-blue);
}
.fcheck input[type="radio"] { border-radius: 50%; }
.fcheck > span { flex: 1 1 auto; min-width: 0; }

/* Flyout submenus follow the bubble language too. */
.flyout {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
  padding: .45rem;
  background: #FFFFFF;
}
.flyhead {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: #9C8F7E; padding: .3rem .8rem .4rem;
}
.flylink {
  display: block; border-radius: 999px; padding: .42rem .85rem;
  font-size: .87rem; font-weight: 600; color: #45525E; text-decoration: none;
}
.flylink:hover { background: var(--tint); color: var(--logo-blue); }
.flylink.on {
  background: linear-gradient(135deg, var(--logo-blue) 0%, var(--logo-blue-bright) 100%);
  color: #FFFFFF;
}

/* ==========================================================================
   Refinement pass.

   Three things were making it read as consumer-app rather than clinical
   software, and none of them were the layout:

     1. Gradients on the nav pill and every primary button. A gradient dates a
        UI faster than anything else; flat brand colour reads as considered.
     2. A warm beige ground. It muddied the orange in the logo instead of
        letting it pop, and beige neutrals age badly. A cool, near-white canvas
        keeps the mark's warmth as the only warm thing on screen.
     3. Everything the same weight. Hierarchy was doing no work, so the eye had
        nowhere to land.

   Only tokens and a handful of rules change; the layout is untouched.
   ========================================================================== */

:root {
  /* Cool, quiet neutrals. The canvas is barely off-white so white cards still
     separate from it, without the page looking grey. */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-alt: #F2F4F7;
  --border: #E4E8EE;
  --border-strong: #CFD6E0;
  --text: #14202B;
  --muted: #667585;

  --tint: #EDF3F9;
  --tint-strong: #DCE9F5;
  --accent-soft: #FEF2E8;

  /* Two shadows, both soft and cool-tinted. Warm shadows look like dust. */
  --shadow: 0 1px 2px rgba(20, 32, 43, .04), 0 1px 3px rgba(20, 32, 43, .03);
  --shadow-lift: 0 4px 10px rgba(20, 32, 43, .06), 0 14px 30px rgba(20, 32, 43, .06);

  /* Slightly tighter than a consumer app; still soft. */
  --radius: 12px;
}

/* ------------------------------------------------------------------- shell */
.side { background: #FFFFFF; border-right: 1px solid var(--border); }
.brand { background: #FFFFFF; border-bottom: 1px solid var(--border); padding: 1.05rem 1.1rem; }
.navgroup {
  color: #93A0AE;
  font-size: .63rem;
  letter-spacing: .13em;
  padding: 1.15rem .85rem .4rem;
}

/* Flat pill. The fill alone carries it — no gradient, no glow, one crisp
   shadow so it sits just above the panel. */
.nav.on {
  background: var(--logo-blue);
  box-shadow: 0 1px 2px rgba(26, 84, 144, .3);
}
.nav.on:hover { background: #16497E; transform: none; }
.nav:hover {
  background: var(--tint);
  border-color: transparent;
  box-shadow: none;
  color: var(--logo-blue);
}
.nav { font-size: .885rem; padding: .52rem .9rem; }
.flylink.on { background: var(--logo-blue); }

.topbar { background: rgba(255, 255, 255, .92); height: 58px; }
.searchbox { background: var(--surface-alt); box-shadow: none; border-color: transparent; }
.searchbox:focus-within { background: #FFFFFF; border-color: var(--logo-blue-bright); }
.avatar, .userchip .av { background: var(--logo-blue); }

/* -------------------------------------------------------------- hierarchy */
/* One clear step between page title, section heading and body, so the eye
   lands on the right thing first. */
h1 { font-size: 1.5rem; font-weight: 750; letter-spacing: -.026em; color: var(--text); }
.card h2 {
  font-size: .74rem; letter-spacing: .07em; font-weight: 800; color: #8494A4;
}
.kpi-label { font-size: .68rem; letter-spacing: .06em; color: #8494A4; }
.kpi-n { font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; }
.kpi-sub { font-size: .72rem; color: var(--muted); }
table thead th { font-size: .67rem; letter-spacing: .06em; color: #8494A4; }
.sub { color: var(--muted); }

/* ------------------------------------------------------------------ cards */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: none;              /* borders do the separating, not shadows */
}
.card:hover { box-shadow: none; }
.kpi {
  border: 1px solid var(--border);
  border-top-width: 3px;
  box-shadow: none;
  border-radius: var(--radius);
}
.kpi.tap:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.sch-kpi, .schgrid-wrap { box-shadow: none; border-radius: var(--radius); }

/* ---------------------------------------------------------------- buttons */
/* Flat, and only mildly rounded — a capsule button next to a capsule nav item
   makes everything look like the same control. */
button, .btn { border-radius: 9px; }
button:not(.ghost):not(.x):not(.seg):not(.dashtab):not(.fsect):not(.fopt):not(.kitem):not(.vitem):not(.tahit):not(.blk-copy):not(.cell-add):not(.cell-paste):not(.sugchip):not(.bghost):not(.topicon) {
  background: var(--logo-blue);
  box-shadow: none;
}
button:not(.ghost):not(.x):not(.topicon):not(.kitem):not(.vitem):hover { background: #16497E; }
.btn.ghost, button.ghost {
  background: #FFFFFF; border-color: var(--border-strong); color: var(--text);
}
.btn.ghost:hover, button.ghost:hover { background: var(--surface-alt); border-color: var(--border-strong); color: var(--logo-blue); }
.seg.on, .seg.on:hover { background: var(--logo-blue); }
.segbtns { border-radius: 9px; }
.x, .topicon, .cell-add, .blk-copy { border-radius: 8px; }

/* The single orange action, flat too. */
.afhead #afSave, .drawer-head .small:not(.ghost) { background: var(--logo-orange); box-shadow: none; }
.afhead #afSave:hover, .drawer-head .small:not(.ghost):hover { background: #DB5716; }

/* --------------------------------------------------------------- surfaces */
.pill { border-radius: 6px; font-size: .68rem; }
.note { border-radius: 10px; }
input, select, textarea { border-radius: 9px; border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--logo-blue); outline-color: var(--logo-blue); }
.ravatar { background: var(--logo-blue); }
.ravatar.jb { background: var(--logo-purple); }
.rowinfo.vacant .ravatar.vs { background: var(--logo-amber); }
.schhead { background: #FAFBFC; }
.schhead.today { background: var(--tint); }
.shiftblk { border-radius: 7px; box-shadow: none; }
.shiftblk:hover { box-shadow: var(--shadow); }

/* ==========================================================================
   Dark mode.

   Because the whole design is driven by tokens, dark mode is a redefinition of
   those tokens rather than a second stylesheet — anything built later inherits
   it for free.

   Three rules kept it readable rather than just inverted:
     - Surfaces get LIGHTER as they come forward (page → card → popover), which
       is how depth reads without light. Shadows barely work on dark.
     - The brand blue is lifted, not reused. #1A5490 on a dark ground fails
       contrast badly; the lighter #5AA9E6 keeps the same identity and passes.
     - Status colours are lifted the same way. A red that reads as urgent on
       white turns muddy and easy to miss on charcoal, which on an alerts screen
       is a safety problem, not a cosmetic one.

   `data-theme` is stamped on <html>; with nothing stamped the OS preference
   decides, so the app matches whatever the rest of the machine is doing.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg: #10161C;
  --surface: #182028;
  --surface-alt: #1E2833;
  --border: #2A3742;
  --border-strong: #3B4B59;
  --text: #E6EDF3;
  --muted: #94A6B5;

  /* Lifted brand — same hues, enough luminance to sit on charcoal. */
  --logo-blue: #4A96D8;
  --logo-blue-bright: #5AA9E6;
  --logo-orange: #FF8A4C;
  --logo-amber: #FFA34F;
  --logo-yellow: #F2CE4B;
  --logo-purple: #B57CBD;
  --logo-green: #45A867;
  --logo-leaf: #6FCB55;
  --blue: var(--logo-blue);
  --blue-dark: #3B7FBB;
  --orange: var(--logo-amber);
  --green: var(--logo-green);
  --green-light: var(--logo-leaf);
  --purple: var(--logo-purple);
  --yellow: var(--logo-yellow);

  --danger: #FF6B72;
  --danger-bg: #33191C;
  --warn: #E8B341;
  --warn-bg: #322715;
  --ok-bg: #14301F;

  --tint: #1C2C3A;
  --tint-strong: #24384A;
  --accent-soft: #33241A;

  /* Depth by lightness, plus a hairline highlight along the top edge. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lift: 0 8px 28px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .side,
:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .fsection,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .rowinfo,
:root[data-theme="dark"] .typeahead,
:root[data-theme="dark"] .flyout,
:root[data-theme="dark"] .filtpop,
:root[data-theme="dark"] .vpop,
:root[data-theme="dark"] .kpop,
:root[data-theme="dark"] .searchbox,
:root[data-theme="dark"] .pickchip,
:root[data-theme="dark"] .sugchip,
:root[data-theme="dark"] .btn.ghost,
:root[data-theme="dark"] button.ghost { background: var(--surface); color: var(--text); }

:root[data-theme="dark"] .fsection-head,
:root[data-theme="dark"] .schhead,
:root[data-theme="dark"] table thead th { background: var(--surface-alt); }
:root[data-theme="dark"] .topbar { background: rgba(24, 32, 40, .92); }
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .daycell:hover,
:root[data-theme="dark"] .clickrow:hover { background: var(--surface-alt); }
:root[data-theme="dark"] .flylink:hover,
:root[data-theme="dark"] .nav:hover { background: var(--tint); }
:root[data-theme="dark"] .brand span { color: var(--text); }
:root[data-theme="dark"] .brand .c { color: var(--logo-blue-bright); }
:root[data-theme="dark"] .brand .h { color: var(--logo-orange); }
:root[data-theme="dark"] .nav { color: #C2D0DC; }
:root[data-theme="dark"] .nav.on { color: #0B1219; }

/* Inputs need their own treatment — a white field on charcoal is a torch. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--surface-alt); color: var(--text); border-color: var(--border-strong);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #6E8494; }

/* A shift block is a card on the grid; it has to lift off the dark cell. */
:root[data-theme="dark"] .shiftblk { background: var(--surface-alt); border-color: var(--border); }
:root[data-theme="dark"] .shiftblk.draft { background: var(--surface); }
:root[data-theme="dark"] .shiftblk-client,
:root[data-theme="dark"] .shiftblk-top { color: var(--text); }
:root[data-theme="dark"] .mchip.ok { background: #14301F; color: var(--logo-leaf); }
:root[data-theme="dark"] .mchip.bad { background: #33191C; color: var(--danger); }
:root[data-theme="dark"] .cell-add { background: var(--surface-alt); color: var(--logo-blue-bright); }
:root[data-theme="dark"] .pubbanner.off { background: var(--surface-alt); color: var(--muted); }
:root[data-theme="dark"] .bulkbar { background: #0B1219; }
:root[data-theme="dark"] .drawer-back,
:root[data-theme="dark"] .modal-back { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .kitem.danger { color: var(--danger); }

/* `color-scheme` must describe the palette actually being painted, not the
   machine's preference. There is no OS-driven dark palette here — only the
   explicit toggle stamps data-theme — so declaring dark on a dark-mode machine
   left the page white while Chrome drew every native control (checkboxes,
   radios, select arrows, scrollbars) in its dark style. An unticked checkbox
   came out a solid black square that read as disabled, and people stopped
   trying to click it. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The toggle itself. */
.themebtn { background: none; border: 0; color: var(--muted); padding: .35rem; min-height: 0;
  border-radius: 8px; line-height: 1; font-size: 1rem; cursor: pointer; }
.themebtn:hover { background: var(--surface-alt); color: var(--text); }

/* The brand-blue chrome, stated explicitly for dark rather than left to token
   indirection. These few rules paint a literal colour in the light theme, and
   an override here is clearer than tracing three layers of var() to work out
   which one won. */
:root[data-theme="dark"] .nav.on,
:root[data-theme="dark"] .flylink.on,
:root[data-theme="dark"] .seg.on,
:root[data-theme="dark"] .seg.on:hover,
:root[data-theme="dark"] .ravatar,
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .userchip .av,
:root[data-theme="dark"] button:not(.ghost):not(.x):not(.seg):not(.dashtab):not(.fsect):not(.fopt):not(.kitem):not(.vitem):not(.tahit):not(.blk-copy):not(.cell-add):not(.cell-paste):not(.sugchip):not(.bghost):not(.topicon):not(.themebtn) {
  background: #4A96D8;
  color: #0B1219;
}
:root[data-theme="dark"] .nav.on:hover,
:root[data-theme="dark"] button:not(.ghost):not(.x):not(.topicon):not(.themebtn):not(.kitem):not(.vitem):hover { background: #5AA9E6; }
:root[data-theme="dark"] .nav.on .navicon { color: #0B1219; }
:root[data-theme="dark"] .afhead #afSave,
:root[data-theme="dark"] .drawer-head .small:not(.ghost) { background: #FF8A4C; color: #241206; }
:root[data-theme="dark"] .ravatar.jb { background: #B57CBD; }
:root[data-theme="dark"] .rowinfo.vacant .ravatar.vs { background: #FFA34F; color: #241206; }
:root[data-theme="dark"] .dashtab.on { color: #5AA9E6; border-bottom-color: #5AA9E6; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: var(--text); }
:root[data-theme="dark"] a[data-link] { color: #5AA9E6; }
:root[data-theme="dark"] .resref { color: #5AA9E6; }

/* Two surfaces paint #fff literally rather than through --surface, so they
   stayed white in dark mode: the roster's money strip and the grid wrapper. */
:root[data-theme="dark"] .sch-kpi,
:root[data-theme="dark"] .schgrid-wrap,
:root[data-theme="dark"] .schgrid { background: var(--surface); }
:root[data-theme="dark"] .sch-kpi > div { border-right-color: var(--border); }
:root[data-theme="dark"] .sch-kpi-n { color: var(--text); }
:root[data-theme="dark"] .est { background: var(--surface-alt); color: var(--muted); }
/* The + on an empty cell reads as a light block against dark; outline it
   instead of filling it. */
:root[data-theme="dark"] .cell-add { background: transparent; border-color: var(--border-strong); }
:root[data-theme="dark"] .cell-add:hover { background: var(--tint); }

/* The shift drawer's action row had six controls in a 720px panel on one
   non-wrapping line, so More actions and Edit were being pushed past the right
   edge — present in the DOM, invisible on screen. The date moved out of the row
   to give the buttons their space, and the row now wraps rather than clipping. */
.drawer-head.sdhead { flex-wrap: wrap; row-gap: .45rem; gap: .5rem; align-items: center;
  position: sticky; top: 0; z-index: 6; background: var(--surface);
  padding-bottom: .55rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; }
.sdwhen { font-size: .85rem; font-weight: 600; margin-bottom: .7rem; }
.kitem.danger { color: var(--danger); }
.kitem.danger:hover { background: var(--danger-bg); }


/* A brief confirmation for actions that write immediately, so nobody goes
   hunting for a Save button that does not exist. */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.4rem; z-index: 120;
  background: #14202B; color: #fff; border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .86rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  animation: toastin .16s ease;
}
.toast.bad { background: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ------------------------------------------------- menus: kebab and context */
/* The global button rule paints every button a solid brand colour, and its
   :hover half never excluded .kitem — so hovering "Delete" in More actions gave
   dark blue on red text and the label vanished. Menu rows are list items, not
   buttons, and are stated here explicitly rather than relying on that :not()
   chain staying complete as buttons get added. */
.kpop .kitem,
.ctxmenu .kitem {
  background: transparent;
  color: var(--text);
  box-shadow: none;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  text-align: left;
  justify-content: flex-start;
  padding: .42rem .6rem;
}
.kpop .kitem:hover,
.ctxmenu .kitem:hover { background: var(--surface-alt); color: var(--text); }
.kpop .kitem.danger,
.ctxmenu .kitem.danger { color: var(--danger); }
.kpop .kitem.danger:hover,
.ctxmenu .kitem.danger:hover { background: var(--danger-bg); color: var(--danger); }
.kpop .kitem:disabled,
.ctxmenu .kitem:disabled {
  background: transparent; color: var(--muted); opacity: .65; cursor: not-allowed;
}
.kpop .kitem:disabled:hover,
.ctxmenu .kitem:disabled:hover { background: transparent; }

.ctxmenu {
  position: fixed;
  z-index: 9000;
  min-width: 210px;
  padding: .3rem;
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(10, 34, 51, .18);
}
.ctxmenu .ctxhead {
  padding: .35rem .6rem .45rem;
  font-size: .7rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctxmenu .vsep { height: 1px; background: var(--border); margin: .25rem .35rem; }

/* ------------------------------------------------------ draft, made obvious */
/* Published vs draft decides whether a carer can see the shift at all, so the
   badge is loud and sits on the chip's first line in every view including
   Compact. */
.draftpill {
  display: inline-block;
  background: var(--logo-amber, #F5A623);
  color: #3A2600;
  border-radius: 4px;
  padding: 0 .3rem;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .05em;
  vertical-align: 1px;
}
.shiftblk.draft { border-style: dashed; }
/* A short window must not swallow the tail of the menu. */
.ctxmenu { max-height: calc(100vh - 16px); overflow-y: auto; }

/* ------------------------------------------------------- roster marker key */
/* Sits where the cost/margin strip used to. Every glyph the board can draw is
   named here — ✎ ⛟ ◉ ⟳ were undocumented too, not just the publish state. */
.schkey {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  align-items: center;
  padding: .55rem .85rem;
  margin-bottom: .7rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .72rem;
  color: var(--muted);
}
.schkey-g { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.schkey-g strong { color: var(--logo-orange, #F26522); }
.bflag.pub { color: var(--green, #2E7D46); font-size: .85em; }

/* --------------------------------------------- roster status colour, single source */
/* The left edge of a chip and the swatch in the key are the SAME hex, written
   once here and once in STATUSES. If they drift the key stops being true, so
   these deliberately override the earlier per-status rules rather than adding
   a third set of colours. */
.shiftblk.st-draft       { border-left-color: #8A99A5; }
.shiftblk.st-pending     { border-left-color: #E5484D; }
.shiftblk.st-job_board   { border-left-color: #7C6CF0; }
.shiftblk.st-booked      { border-left-color: #30A46C; }
.shiftblk.st-in_progress { border-left-color: #0EA5A5; }
.shiftblk.st-completed   { border-left-color: #0E7490; }
.shiftblk.st-invoiced    { border-left-color: #3E8FD0; }
.shiftblk.st-cancelled   { border-left-color: #F5A524; opacity: .65; }

/* A shift being worked right now is the one thing worth a live cue. */
.shiftblk.st-in_progress { box-shadow: inset 3px 0 0 rgba(14, 165, 165, .25); }

.schkey { display: block; }
.schkey-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  align-items: center;
  padding: .2rem 0;
}
.schkey-row + .schkey-row { border-top: 1px dashed var(--border); margin-top: .3rem; padding-top: .4rem; }
.schkey-h {
  min-width: 108px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .62rem;
}
.schkey .swatch {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none;
}

/* A control that can never be ticked should look it, not just refuse the click. */
.fcheck.off input:disabled { opacity: .45; cursor: not-allowed; }
.fcheck.off { cursor: not-allowed; }

/* Still out vs finished — the two clock states read differently at a glance. */
.bflag.live { color: #0EA5A5; font-weight: 700; }
.bflag.done { color: var(--green, #2E7D46); font-weight: 700; }