/* JLM Business web admin — brand: NAVY #15478F on IVORY #F7F5EF.
 * Same identity as the JLM Business app: dark text on an ivory body,
 * navy chrome. No gradients on the badge, no card-data styling tricks —
 * money is numbers, buttons say what they do. */
:root {
  --navy: #15478F;
  --navy-2: #1E3A5F;
  --ivory: #F7F5EF;
  --card: #FFFFFF;
  --line: #DDD8CB;
  --text: #1C2733;
  --dim: #5C6A78;
  --brand: #224132; /* the booking green — ONE job in this chrome
     (WAVE-2 AW-4): the client booking page link in the topbar, so
     the jump to the client side is always the green one. Admin
     chrome otherwise runs on the two blues alone. */
  --ok: #2E7D4F;
  --warn: #8A5F14; /* website audit Oct 31, 2026: #B07C1F was 3.35:1 on
     ivory as .warn-text body text — below the 4.5:1 text bar. #8A5F14
     is 5.17:1 on ivory / 5.63:1 on a white card; dark mode keeps its
     own --warn (#E3B34E, 9.46:1). */
  --danger: #B3352B;
  --chip: #EAE6DA;
  --radius: 14px; /* card radius — the family scale (AW-5) */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ivory);
  color: var(--text);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
a { color: var(--navy-2); }

/* ---------- background logo watermark ---------- */
/* The JLB mark as a large, very faint backdrop (Jamie, Oct 26, 2026) —
 * same language as the app's watermark standard (Ui.WATERMARK_ALPHA =
 * 0.09, "readable as a watermark, never competing"): fixed and centred
 * behind all page content, pointer-events: none so it never intercepts
 * a tap. One treatment for the whole page shell, so the sign-in screen
 * and the signed-in views share it. The asset is the tight-crop mark
 * with transparent rounded corners (FULL REVIEW 🔴-37) — the old
 * rectangular photo needed a radial mask to hide its dark corners;
 * this one doesn't. */
body::before {
  content: "";
  position: fixed;
  left: 50%; top: 50%;
  width: min(74vmin, 640px);
  height: min(70vmin, 606px);
  transform: translate(-50%, -50%);
  background: url("logo-jlb-blue.webp") center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
  z-index: -1;
}

/* ---------- sign-in ---------- */
#signin { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.signin-card { width: 100%; max-width: 430px; text-align: center; }
.signin-logo { width: 150px; height: 150px; object-fit: contain; }
.signin-card h1 { margin: 8px 0 0; font-size: 26px; color: var(--navy); }
.signin-card .sub { margin: 2px 0 22px; color: var(--dim); }
.panel { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.flabel { font-weight: 600; font-size: 14px; color: var(--navy); margin-top: 8px; }
.panel input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.panel select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.note { color: var(--dim); font-size: 14px; margin: 4px 0; }
.err { color: var(--danger); font-size: 15px; margin: 0; }
.done-title { font-weight: 700; font-size: 17px; }
/* Alternate sign-in routes (WAVE-2 AW-7): text links under the
   "Signing in another way?" label — the credential panel's one real
   action keeps the filled button; the four other doors don't stack
   up as four identical outlined boxes. */
button.altlink {
  background: none; border: 0; color: var(--navy-2); cursor: pointer;
  text-align: left; padding: 6px 2px; font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px; min-height: 36px;
}
button.altlink:hover { color: var(--navy); }
/* Fast-login restructure (Oct 31, 2026): the More options
   disclosure under the lead sign-in door — the other doors stack
   as text links inside it, never as panels of their own. */
#moreOptions { text-align: left; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
#moreList { display: flex; flex-direction: column; gap: 2px; }

/* Receipt scan + QR scan (Oct 31, 2026): the photo sits BESIDE the
   editable draft, app-style; the camera feed is capped so it never
   pushes the form off a phone screen. */
.scan-grid { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.scan-photo { width: 240px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.scan-fields { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.scan-video { width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 8px; background: #000; margin: 10px 0; }
.scan-attn { border: 2px solid var(--warn); border-radius: 8px; padding: 8px; }
label.filelabel { display: inline-flex; align-items: center; cursor: pointer; padding: 9px 14px; border: 1px solid var(--navy); border-radius: 9px; font-weight: 600; }
/* PICTURE-TO-ADD (0.3.88): the receipt photo door as the filled
   primary lead Add on the Expenses tab. */
label.filelabel.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
:root[data-theme="dark"] label.filelabel.primary { background: #2A4A73; border-color: #2A4A73; }
/* SWIPE REVIEW (0.3.88): the unreviewed badge inside a Money
   seg tab (the sidenav badge's shape, in the seg). */
.seg .badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; font-weight: 700; }

/* ---------- chrome ---------- */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; padding: 8px 14px;
}
.top-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.top-titles { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.top-name { font-weight: 700; font-size: 17px; }
.top-sub { font-size: clamp(11px, 2.6vw, 13px); color: #C9D4E2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The one green in the chrome (AW-4): the client booking page link
   wears the client door's green family so it reads as "the client
   side" at a glance. */
.top-link { color: #A9CBB4; font-size: 14px; font-weight: 600; }
#layout { display: flex; align-items: stretch; min-height: calc(100vh - 54px); }
#sidenav {
  flex: 0 0 208px; background: var(--navy); color: #E8EEF5;
  padding: 10px 8px 24px; display: flex; flex-direction: column; gap: 2px;
}
#sidenav button {
  text-align: left; background: none; border: 0; color: inherit; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 15px; display: flex; justify-content: space-between; align-items: center;
}
#sidenav button:hover { background: var(--navy-2); }
#sidenav button.on { background: #fff; color: var(--navy); font-weight: 700; }
#sidenav .badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; font-weight: 700; }
#sidenav button.on .badge { background: var(--danger); color: #fff; }
#main { flex: 1 1 auto; min-width: 0; padding: 18px 20px 60px; max-width: 1060px; }
#banner { background: #FBEAE8; border: 1px solid var(--danger); color: var(--danger); border-radius: 8px; padding: 10px 12px; }

/* ---------- generic blocks ---------- */
h2.view-title { margin: 2px 0 4px; font-size: 23px; color: var(--navy); }
.view-sub { color: var(--dim); margin: 0 0 14px; }
h3.section { margin: 26px 0 10px; font-size: 17px; color: var(--navy); border-bottom: 2px solid var(--line); padding-bottom: 5px; }
/* Settings search + organization (Oct 30, 2026): group headers,
   the pinned search bar, its results, and the jump flash. */
h2.setgroup { margin: 34px 0 4px; font-size: 21px; color: var(--navy); }
.setsearch { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0; }
.setsearch input { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }
.setresult { display: block; width: 100%; text-align: left; margin: 6px 0; }
.setflash { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: var(--radius); }
/* Platform help deep links (Oct 28, 2026): small pill at the right of
   a view title / settings heading, opening the help page's section. */
a.helpbtn { float: right; font-size: 13px; font-weight: 600; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px; }
.card.flat { box-shadow: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .num { font-size: 26px; font-weight: 700; color: var(--navy); }
.stat .lbl { color: var(--dim); font-size: 14px; }
.dim { color: var(--dim); }
.small { font-size: 14px; }
.big { font-size: 18px; }
strong.k { color: var(--navy); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; word-break: break-all; }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); } .danger-text { color: var(--danger); }
/* Booking ON/OFF banner on the dashboard (Oct 28, 2026): the effective
   state from the worker's bookingState — unmistakable at a glance. */
.bkstate { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  border-radius: 12px; padding: 12px 16px; margin: 0 0 14px;
  font-weight: 700; font-size: 16px; }
.bkstate a { font-size: 14px; font-weight: 600; }
.bkstate.open { background: #E4F2E7; color: #1E5C36; border: 1px solid #BFE0C9; }
.bkstate.off { background: #FDECEA; color: #8C1D12; border: 1px solid #F3B7AE; }
.bkstate.unknown { background: #F3EFE3; color: #6B5E2E; border: 1px solid #E0D6B4; font-weight: 600; }
.empty { color: var(--dim); padding: 14px 4px; }
.loading { color: var(--dim); padding: 14px 4px; }
/* Platform notices (PARITY-AUDIT A77/A78/A79, Oct 31, 2026): the
   view-only banner, the tenant's platform warnings and the
   platform announcement, painted above every section in the BLUE
   Business family — the same palettes the Business app uses
   (PlatformAnnouncement / PlatformWarning): note + info wear the
   blue-grey, warning + view-only the amber family, FINAL the red
   family. Dark mode wears the deep tints with light text, like
   every other banner on this door. */
.pnotice { border-radius: 12px; padding: 12px 16px; margin: 0 0 12px; border: 1px solid; }
.pnotice p { margin: 4px 0 0; }
.pnotice .pn-title { font-weight: 700; font-size: 16px; }
.pn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pn-when { font-size: 13px; }
button.pn-dismiss { padding: 2px 4px; min-height: 0; font-weight: 700; }
.pn-note, .pn-ann-info { background: #E4EBF3; border-color: #B9CCE0; color: #1D3A56; }
.pn-warning, .pn-viewonly, .pn-ann-warn { background: #F3EFE3; border-color: #E0D6B4; color: #6B5E2E; }
.pn-final { background: #FDECEA; border-color: #F3B7AE; color: #8C1D12; }
:root[data-theme="dark"] .pn-note, :root[data-theme="dark"] .pn-ann-info { background: #1C2E49; border-color: #2E4A6B; color: #EAF2FB; }
:root[data-theme="dark"] .pn-warning, :root[data-theme="dark"] .pn-viewonly, :root[data-theme="dark"] .pn-ann-warn { background: #3D3418; border-color: #7A6526; color: #F0DFA8; }
:root[data-theme="dark"] .pn-final { background: #571C15; border-color: #8A3324; color: #FFD9CF; }

/* ---------- buttons & forms ---------- */
button.primary, .btn-primary {
  background: var(--navy); color: #fff; border: 0; border-radius: 9px;
  padding: 11px 18px; cursor: pointer; font-weight: 600;
}
button.primary:hover, .btn-primary:hover { background: var(--navy-2); }
/* 0.3.86 (visual-parity fold-in): primaries have STATES — a
   pressed primary deepens, and a disabled primary wears a pale
   fill + dim text so it can never be mistaken for an active one
   (opacity alone still read as active). */
button.primary:active, .btn-primary:active { background: var(--navy); }
button.primary:disabled, .btn-primary:disabled { background: #DFE8F1; color: #47596B; cursor: default; opacity: 1; }
button.ghost, .btn-ghost {
  background: transparent; color: var(--navy); border: 1px solid var(--navy);
  border-radius: 9px; padding: 9px 14px; cursor: pointer;
}
button.ghost.small { padding: 5px 10px; font-size: 14px; color: #fff; border-color: #8FA5BF; }
button.ghost:hover { background: rgba(21,42,71,.07); }
button.ghost.small:hover { background: rgba(255,255,255,.14); }
button.danger { background: var(--danger); color: #fff; border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer; font-weight: 600; }
button.okbtn { background: var(--ok); color: #fff; border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer; font-weight: 600; }
button.link { background: none; border: 0; color: var(--navy-2); text-decoration: underline; cursor: pointer; padding: 8px 6px; min-height: 36px; } /* polish-7 tap targets */
form .field { margin: 0 0 12px; display: flex; flex-direction: column; gap: 5px; }
form .field label, label.fl { font-weight: 600; font-size: 14px; color: var(--navy); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], input[type=password], select, textarea {
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); width: 100%;
}
textarea { min-height: 84px; }
input[type=checkbox], input[type=radio] { width: auto; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400 !important; }
/* Remember-me (Nov 1, 2026): the boxed toggle — label and checkbox
   grouped inside one faint outline, the settings house style, so
   the choice reads as one control, not a stray tick. */
.remember-box { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin: 10px 0; background: var(--card); }
.remember-box .check { align-items: center; }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-feedback { min-height: 20px; }
.pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 13px; font-weight: 700; background: var(--chip); color: var(--navy); }
.pill.req { background: #F6DFA9; color: #6b4e07; }
.pill.conf { background: #D8EBDD; color: #1d5c38; }
.pill.bad { background: #F6D9D5; color: #7c231c; }
.pill.done { background: #DDE4EE; color: var(--navy); }
.tag { display: inline-block; background: var(--chip); border-radius: 6px; padding: 0 7px; font-size: 13px; margin: 0 4px 4px 0; }

/* ---------- lists & tables ---------- */
table.list { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.list th, table.list td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { background: #EFECE2; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.clickable { cursor: pointer; }
table.list tr.clickable:hover { background: #FBFAF5; }
.appt { border-left: 5px solid var(--line); }
.appt.REQUESTED { border-left-color: var(--warn); }
.appt.CONFIRMED { border-left-color: var(--ok); }
.appt.COMPLETED { border-left-color: var(--navy); }
.appt.NO_SHOW, .appt.CANCELLED, .appt.DECLINED { border-left-color: var(--danger); }
.daynav { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--navy); border-radius: 9px; overflow: hidden; }
.seg button { background: #fff; color: var(--navy); border: 0; padding: 8px 13px; cursor: pointer; min-height: 44px; }
.seg button.on { background: var(--navy); color: #fff; font-weight: 700; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.week-day { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 92px; cursor: pointer; }
.week-day.today { outline: 2px solid var(--navy); }
.week-day h4 { margin: 0 0 6px; font-size: 13px; color: var(--navy); }
.week-item { font-size: clamp(11px, 2.4vw, 13px); border-radius: 6px; padding: 2px 6px; margin: 0 0 4px; background: var(--chip); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-item.REQUESTED { background: #F6DFA9; } .week-item.CONFIRMED { background: #D8EBDD; }
.week-item.NO_SHOW, .week-item.CANCELLED, .week-item.DECLINED { background: #F6D9D5; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; }
.thread-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; margin: 0 0 8px; white-space: pre-wrap; }
.thread-msg.IN { background: #fff; border: 1px solid var(--line); }
.thread-msg.OUT { background: var(--navy); color: #fff; margin-left: auto; }
.qrow { display: flex; gap: 8px; align-items: flex-start; }
.qrow .grow { flex: 1; }
pre.dump { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; font-size: 13px; max-height: 320px; }
details summary { cursor: pointer; color: var(--navy); font-weight: 600; }

/* ---------- responsive: phone browser ---------- */
@media (max-width: 760px) {
  #layout { flex-direction: column; }
  /* WAVE-2 AW-1: ONE horizontally scrolling row of section buttons
     (the client door's category-menu pattern) instead of a wrapped
     cloud of ~20 buttons eating the top of every phone screen.
     Group headers hide in the strip; the sections stay one tap away
     by swiping the row. */
  #sidenav {
    flex: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    padding: 6px 8px; position: sticky; top: 54px; z-index: 15;
    scrollbar-width: none;
  }
  #sidenav::-webkit-scrollbar { display: none; }
  #sidenav .navgroup { display: none; }
  #sidenav button { padding: 7px 12px; font-size: 14px; flex: none; white-space: nowrap; }
  #main { padding: 14px 12px 50px; }
  .formrow { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 8px; }
  .top-link { display: none; }
  table.list { display: block; overflow-x: auto; }
}

/* UX pass (Oct 26, 2026): grouped sidenav headers + the
   "Looking for…?" rows + the radius token scale (C2). */
:root { --radius-card: 14px; --radius-btn: 12px; --radius-field: 10px; }
.navgroup { padding: 14px 12px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.lookingfor { margin-top: 18px; }
.lookingfor a { color: var(--navy, #1F4E79); font-weight: 600; text-decoration: none; }
button, .ghost { border-radius: var(--radius-btn); }
input, select, textarea { border-radius: var(--radius-field); }

/* polish-7: mobile nav + confirm dialog */
#sidenav button { min-height: 44px; }
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 90; }
.confirm-card { background: #fff; color: #14213d; border-radius: 14px; padding: 20px; max-width: 340px; width: calc(100% - 40px); }

/* ---------- dark mode (FULL REVIEW C: the last surface without
   one) — the client door's deal: navy deepens to a blue-black,
   cards lift one step, the two blues lighten for text duty. The
   head script resolves data-theme (saved choice, else the OS). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #0F2237;
  --navy-2: #8FB0D8;
  --ivory: #0B1522;
  --card: #13253C;
  --line: #2A405C;
  --text: #E8EEF5;
  --dim: #9DB0C4;
  --ok: #7BC79B;
  --warn: #E3B34E;
  --danger: #E88A80;
  --chip: #22364F;
}
:root[data-theme="dark"] h2.view-title,
:root[data-theme="dark"] h3.section,
:root[data-theme="dark"] .signin-card h1,
:root[data-theme="dark"] .flabel,
:root[data-theme="dark"] form .field label,
:root[data-theme="dark"] label.fl,
:root[data-theme="dark"] strong.k,
:root[data-theme="dark"] .stat .num,
:root[data-theme="dark"] details summary { color: #C7D9EE; }
:root[data-theme="dark"] button.primary, :root[data-theme="dark"] .btn-primary { background: #2A4A73; }
/* Website audit (Oct 31, 2026): --danger/--ok lighten in dark mode
   for TEXT duty, but three surfaces use them as FILLS under white
   text — white on #E88A80 is 2.51:1 and on #7BC79B is 2.00:1. In
   dark mode those fills keep the light-mode hues, which pass
   (white on #B3352B = 6.07:1, on #2E7D4F = 5.05:1). */
:root[data-theme="dark"] #sidenav .badge { background: #B3352B; }
:root[data-theme="dark"] button.danger { background: #B3352B; }
:root[data-theme="dark"] button.okbtn { background: #2E7D4F; }
:root[data-theme="dark"] button.primary:hover, :root[data-theme="dark"] .btn-primary:hover { background: #35608F; }
:root[data-theme="dark"] button.primary:disabled, :root[data-theme="dark"] .btn-primary:disabled { background: #1C2E49; color: #A8BBD0; }
:root[data-theme="dark"] button.ghost, :root[data-theme="dark"] .btn-ghost { color: #B9CFEA; border-color: #8FB0D8; }
:root[data-theme="dark"] button.ghost.small { color: #fff; }
:root[data-theme="dark"] button.link { color: #8FB0D8; }
:root[data-theme="dark"] button.altlink { color: #8FB0D8; }
:root[data-theme="dark"] table.list th { background: #1B3049; color: #C7D9EE; }
:root[data-theme="dark"] table.list tr.clickable:hover { background: #182C46; }
:root[data-theme="dark"] .seg { border-color: #8FB0D8; }
:root[data-theme="dark"] .seg button { background: var(--card); color: #B9CFEA; }
:root[data-theme="dark"] .seg button.on { background: #2A4A73; color: #fff; }
:root[data-theme="dark"] .thread-msg.IN { background: var(--card); }
:root[data-theme="dark"] .thread-msg.OUT { background: #2A4A73; }
:root[data-theme="dark"] pre.dump { background: var(--card); }
:root[data-theme="dark"] .confirm-card { background: var(--card); color: var(--text); }
:root[data-theme="dark"] #banner { background: #3A1D1A; color: #F0B8B0; }
:root[data-theme="dark"] .pill { color: #C7D9EE; }
:root[data-theme="dark"] .pill.req { background: #4A3A10; color: #F6DFA9; }
:root[data-theme="dark"] .pill.conf { background: #1E4030; color: #B9E4C8; }
:root[data-theme="dark"] .pill.bad { background: #4A201B; color: #F6C9C2; }
:root[data-theme="dark"] .pill.done { background: #22364F; color: #C7D9EE; }
/* Booking-state banner + week-view status chips (website audit,
   Oct 31, 2026): the light rules carry pale fills with no dark
   override — in dark mode the banner glared as a bright box and the
   week chips kept pale fills under the inherited near-white text
   (unreadable). Dark family matches the app's: deep tinted fills,
   light text, mid-tone borders. Light mode is untouched. */
:root[data-theme="dark"] .bkstate.open { background: #173D26; color: #CDEBD6; border-color: #2E6B45; }
:root[data-theme="dark"] .bkstate.off { background: #571C15; color: #FFD9CF; border-color: #8A3324; }
:root[data-theme="dark"] .bkstate.unknown { background: #3D3418; color: #F0DFA8; border-color: #7A6526; }
:root[data-theme="dark"] .week-item.REQUESTED { background: #4A3A10; color: #F6DFA9; }
:root[data-theme="dark"] .week-item.CONFIRMED { background: #1E4030; color: #B9E4C8; }
:root[data-theme="dark"] .week-item.NO_SHOW,
:root[data-theme="dark"] .week-item.CANCELLED,
:root[data-theme="dark"] .week-item.DECLINED { background: #4A201B; color: #F6C9C2; }
:root[data-theme="dark"] .appt.COMPLETED { border-left-color: #8FB0D8; }
:root[data-theme="dark"] .week-day.today { outline-color: #8FB0D8; }
:root[data-theme="dark"] .lookingfor a { color: #8FB0D8; }

/* ---------- calendar time grid (0.3.44) ---------- */
.cal-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.cal-grid-head { display: grid; background: #EFECE2; border-bottom: 1px solid var(--line); }
.cal-axis-head { border-right: 1px solid var(--line); }
.cal-day-head { padding: 8px 10px; border-left: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day-head.is-today .cal-day-name { color: var(--danger); }
.cal-day-name { font-weight: 700; color: var(--navy); font-size: clamp(11px, 2.6vw, 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-dayoff-toggle { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--dim); cursor: pointer; font-weight: 600; }
.cal-band { padding: 4px 12px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); background: #F1EEE3; text-align: center; border-bottom: 1px solid var(--line); }
.cal-grid-body { display: grid; }
.cal-axis { position: relative; border-right: 1px solid var(--line); }
.cal-hour-lbl { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--dim); white-space: nowrap; }
.cal-col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% 60px; }
.cal-col.is-today { background-color: rgba(21, 42, 71, .045); }
.cal-dayoff-overlay { position: absolute; inset: 0; background: rgba(21, 42, 71, .12); z-index: 1; display: flex; justify-content: center; padding-top: 10px; pointer-events: none; }
.cal-shade { position: absolute; left: 0; right: 0; background: rgba(21, 42, 71, .08); z-index: 0; pointer-events: none; }
.cal-dayoff-lbl { font-weight: 800; color: var(--navy); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; background: rgba(255, 255, 255, .78); border-radius: 999px; padding: 2px 10px; height: fit-content; }
.cal-block { position: absolute; left: 1px; right: 1px; z-index: 2; border-radius: 6px; background: repeating-linear-gradient(45deg, rgba(21, 42, 71, .20) 0 8px, rgba(21, 42, 71, .08) 8px 16px); box-shadow: inset 0 0 0 1px rgba(21, 42, 71, .35); overflow: hidden; padding: 2px 6px; }
.cal-block-lbl { font-size: clamp(9px, 2vw, 11px); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-pad { position: absolute; z-index: 2; background: #C9CDD3; border-radius: 3px; opacity: .85; }
.cal-appt { position: absolute; z-index: 3; border-radius: 6px; padding: 3px 6px; overflow: hidden; cursor: pointer; font-size: 12px; line-height: 1.3; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.cal-appt-name { display: block; font-weight: 700; font-size: clamp(10.5px, 2.2vw, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-appt-time, .cal-appt-svc, .cal-appt-status { display: block; font-size: clamp(10px, 2vw, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.cal-appt.pending { outline: 2px dashed rgba(0, 0, 0, .55); outline-offset: -2px; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px); }
.cal-appt-tag { display: inline-block; background: rgba(0, 0, 0, .65); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.cal-appt.cancelled { opacity: .45; filter: grayscale(.7); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #D43A2F; z-index: 5; }
.cal-now-pill { position: absolute; right: 4px; top: -9px; background: #D43A2F; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.cal-dayoff-confirm { border-color: var(--warn); margin-top: 12px; }
.cal-cancelled-toggle { margin-left: 2px; }
/* dashboard upcoming rows + service colour dots (0.3.44) */
.upcoming-row { display: flex; gap: 10px; align-items: center; padding: 10px 14px; flex-wrap: wrap; }
.upcoming-client { font-weight: 600; }
.svc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); vertical-align: middle; }
/* service form: colour swatches + apply-to-all (0.3.44) */
.svc-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.svc-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex: none; }
.svc-swatch.auto { width: auto; height: auto; border-radius: 999px; padding: 6px 12px; background: var(--chip); color: var(--navy); font-size: 13px; font-weight: 600; }
.svc-swatch.on { border-color: var(--navy); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.svc-apply { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
:root[data-theme="dark"] .cal-grid-head { background: #1B3049; }
:root[data-theme="dark"] .cal-band { background: #16283F; }
:root[data-theme="dark"] .cal-day-name { color: #C7D9EE; }
:root[data-theme="dark"] .cal-block-lbl { color: #C7D9EE; }
:root[data-theme="dark"] .cal-dayoff-lbl { background: rgba(19, 37, 60, .85); color: #C7D9EE; }
:root[data-theme="dark"] .cal-pad { background: #46586E; }
:root[data-theme="dark"] .svc-swatch.auto { color: #C7D9EE; }
:root[data-theme="dark"] .svc-swatch.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #8FB0D8; }

/* Size-and-device pass (0.3.87): calendar full-screen mode —
   the website twin of the Business app's fullscreen calendar.
   Chrome (topbar + sidenav) stands down; the calendar bar
   (switcher, Prev/Today/Next, filters, Exit) stays reachable
   at the top; the grid takes the whole window width. */
body.cal-full #topbar, body.cal-full #sidenav { display: none; }
body.cal-full #layout { min-height: 100vh; }
body.cal-full #main { max-width: none; padding: 10px 12px 30px; }
body.cal-full .cal-grid-wrap { max-height: calc(100vh - 120px); overflow: auto; }

/* SIGN-IN REDO (Nov 1, 2026): guided highlight + lit cross-door offers
   + the bolt-on Testers banner / demo bar. Removing the banner markup
   and these rules removes the whole layer. */
.jlb-glow { animation: jlbGlowPulse 1.1s ease-in-out infinite; border-radius: 10px; }
@keyframes jlbGlowPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,179,0,.95), 0 0 0 6px rgba(255,179,0,.35); }
  50% { box-shadow: 0 0 0 3px rgba(255,179,0,.45), 0 0 0 10px rgba(255,179,0,.12); }
}
button.glowbtn {
  display: block; width: 100%; margin: 10px 0; padding: 12px 14px;
  background: #FFB300; color: #1A1A1A; border: 0; border-radius: 10px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
#testerBanner {
  display: block; width: 100%; margin: 0 0 14px; padding: 12px 14px;
  background: #FFD21F; color: #1A1A1A; border: 0; border-radius: 12px;
  cursor: pointer; text-align: center;
}
#testerBanner[hidden] { display: none; }
#testerBanner .tb-title { display: block; font-size: 18px; font-weight: 800; }
#testerBanner .tb-sub { display: block; font-size: 13px; margin-top: 2px; }
#demoBar {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  background: #FFD21F; color: #1A1A1A; font-weight: 600; text-align: center;
}
#demoBar[hidden] { display: none; }
#demoBar .altlink { color: #1A1A1A; text-decoration: underline; font-weight: 700; }

/* The locked screen's Email JLB link: a primary-looking block anchor. */
a.locked-mail { display: block; text-align: center; text-decoration: none; margin: 10px 0 4px; }