/* ===================================================================
   EB3 Hub — Client Manager design system
   Sidebar shell + staff portal UI (indigo primary, teal wizard).
   =================================================================== */

:root {
  --ink: #1f2430;
  --ink-2: #384252;
  --muted: #5b6475;
  --muted-2: #5f6877;
  --line: #e8eaf0;
  --line-2: #eef0f5;
  --bg: #f5f6fb;
  --card: var(--surface);

  --indigo: #4f46e5;
  --indigo-600: #4338ca;
  --indigo-50: #eef0fd;

  --teal: #0f766e;
  --teal-2: #2e9e8f;
  --teal-50: #e6f5f2;

  --green: #15803d;
  --green-50: #ecfdf3;
  --green-200: #b7e4c7;

  --amber: #8a5a0c;
  --amber-50: #fdf6e3;
  --amber-200: #f0dca8;
  --amber-accent: #e9a93b;

  --blue-50: #f1f4fd;
  --blue-200: #dce3f7;
  --blue-700: #3a4a7a;

  --rose: #c81e1e;
  --rose-50: #fdecea;

  /* Surfaces and text-on-tint colours: the same names are redefined for dark mode below. */
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --surface-3: #f2f4f9;
  --line-strong: #d6dae6;
  --indigo-text: #4f46e5;
  --blue-100: #e8eefb;
  --blue-text: #2c5aa8;
  --green-100: #d8f2e1;
  --green-text: #157f3d;
  --amber-text: #7a5c12;
  --rose-text: #8a2a1e;
  --teal-text: #2a6a62;
  /* Fills that carry white text keep one value in both themes. */
  --green-solid: #15803d;
  --rose-solid: #c81e1e;

  --sidebar-w: 236px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--indigo-text); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }

/* ── Shell ─────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  gap: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sb-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-brand .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.08rem; color: var(--indigo-text); letter-spacing: -.02em; }
.sb-bell { position: relative; color: var(--muted); }
.sb-bell .dot {
  position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px;
  background: var(--rose-solid); color: #fff; border-radius: 999px;
  font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.sb-portal { display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.sb-search { position: relative; }
.sb-search input[type=text], .sb-search input[type=search] {
  width: 100%; padding: 8px 10px 8px 34px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit; font-size: .84rem; background: var(--surface-2);
}
.sb-search .ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.sb-search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .68rem; color: var(--muted-2); }

.sb-tenant {
  display: flex; align-items: center; gap: 9px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.sb-tenant .tlogo {
  width: 32px; height: 32px; border-radius: 8px; flex: none; object-fit: contain;
  background: var(--indigo-50); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .72rem; color: var(--indigo-text);
}
.sb-tenant .tname { font-weight: 700; font-size: .84rem; line-height: 1.2; }
.sb-tenant .tsub { font-size: .7rem; color: var(--muted); }

.sb-stat {
  background: var(--indigo-50); border: 1px solid #dfe3fb; border-radius: var(--radius);
  padding: 12px; text-align: center;
}
.sb-stat .n { font-size: 1.5rem; font-weight: 800; color: var(--indigo-600); line-height: 1; }
.sb-stat .l { font-size: .72rem; color: var(--muted); margin-top: 2px; }

.sb-label { font-size: .66rem; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .09em; padding: 0 4px; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  color: var(--ink-2); font-size: .87rem; font-weight: 600;
}
.sb-nav a:hover { background: var(--surface-3); }
.sb-nav a.on { background: var(--indigo); color: #fff; }
.sb-nav a.on svg { color: #fff; }
.sb-nav a svg { color: var(--muted); flex: none; }

.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

.main { flex: 1; min-width: 0; padding: 26px 30px 60px; }
.container { max-width: 1180px; margin: 0 auto; }

/* ── Page header ───────────────────────────────────────────────── */
/* flex-wrap matters more than it looks: page headers carry action buttons
   pushed right with margin-left:auto, and without wrapping their combined
   min-content width becomes a floor for the whole page. On a phone that made
   every admin screen scroll sideways, not just this one. */
.pagehead { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.pagehead > div { min-width: 0; }
.pagehead .tile {
  width: 46px; height: 46px; border-radius: 13px; background: var(--indigo);
  color: #fff; display: flex; align-items: center; justify-content: center; flex: none;
}
.pagehead h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
.pagehead .sub { color: var(--muted); font-size: .92rem; margin-top: 1px; }
@media (max-width: 640px) {
  .pagehead h1 { font-size: 1.3rem; }
  /* Once wrapped onto their own line the buttons share it rather than each
     taking a stingy slice of one. */
  .pagehead .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── KPI tiles ─────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; display: flex; align-items: center; gap: 12px;
}
.kpi .ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.kpi .ic.indigo { background: var(--indigo-50); color: var(--indigo-text); }
.kpi .ic.rose { background: var(--rose-50); color: var(--rose); }
.kpi .ic.amber { background: var(--amber-50); color: var(--amber); }
.kpi .ic.green { background: var(--green-50); color: var(--green); }
.kpi .ic.blue { background: var(--blue-50); color: var(--blue-700); }
.kpi .n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.kpi .l { font-size: .82rem; color: var(--muted); }

/* ── Section / card ────────────────────────────────────────────── */
.section { margin-bottom: 26px; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.section-head h2 { font-size: 1.28rem; }
.section-head .sub { font-size: .84rem; color: var(--muted); }
.section-label {
  display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px;
}
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.card + .card { margin-top: 14px; }

/* ── Pill tabs (action-item categories) ────────────────────────── */
.pilltabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.pilltabs a {
  padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
}
.pilltabs a:hover { border-color: var(--line-strong); }
.pilltabs a.on { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ── Action items ──────────────────────────────────────────────── */
.actionitem {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--amber-50); border: 1px solid var(--amber-200); border-left: 4px solid var(--amber-accent);
  border-radius: 10px; margin-bottom: 10px;
}
.actionitem.info { background: var(--blue-50); border-color: var(--blue-200); border-left-color: var(--indigo); }
.actionitem .ic { color: var(--amber); flex: none; margin-top: 1px; }
.actionitem .t { font-weight: 700; font-size: .93rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actionitem .d { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.actionitem .who { margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 6px; }

.emptystate { text-align: center; padding: 34px 16px; }
.emptystate .ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-50); color: var(--green);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.emptystate .t { font-weight: 700; font-size: 1.05rem; }
.emptystate .d { color: var(--muted); font-size: .88rem; margin-top: 3px; }

/* ── Stage grid ────────────────────────────────────────────────── */
.stagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stagecell { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.stagecell .l { font-size: .8rem; color: var(--muted); }
.stagecell .n { font-size: 1.35rem; font-weight: 800; margin-top: 2px; }
.stagecell .bar { height: 3px; border-radius: 999px; margin-top: 8px; }

/* ── Search + filters ──────────────────────────────────────────── */
.searchbar { position: relative; margin-bottom: 12px; }
.searchbar input[type=text] {
  width: 100%; padding: 12px 14px 12px 42px; border: 1px solid var(--line);
  border-radius: 11px; font: inherit; font-size: .92rem; background: var(--surface);
}
.searchbar .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }

.filterrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.filterrow .flabel { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.filterrow select, .filterrow .fbtn {
  width: auto; min-width: 150px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: .85rem; background: var(--surface);
  color: var(--ink-2); cursor: pointer;
}
.filterrow .fbtn { min-width: 0; }
.filterrow .fbtn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.filterrow .fbtn.on { border-color: var(--indigo); color: var(--indigo-text); background: var(--indigo-50); }

/* ── Table ─────────────────────────────────────────────────────── */
/* overflow-x:auto so a table too wide for a phone scrolls inside its own card
   instead of pushing the entire page sideways — otherwise the sidebar, header
   and every other section inherit the table's width and nothing lines up.
   overflow-y stays hidden to keep the rounded corners clipping the rows. */
.tablecard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
             overflow-x: auto; overflow-y: hidden; }
.tablecard .thead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line-2);
}
.tablecard .thead .t { display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.tablecard .thead .t .cnt { color: var(--muted-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.tablewrap { overflow-x: auto; }
table.crm { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 900px; }
table.crm thead th {
  text-align: left; padding: 11px 18px; font-size: .69rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700; background: var(--surface-2);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
table.crm tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.crm tbody tr:last-child td { border-bottom: 0; }
table.crm tbody tr:hover { background: var(--surface-2); }
table.crm th a.th-sort { color: inherit; text-decoration: none; }
table.crm th a.th-sort:hover { color: var(--indigo-text); }
table.crm th[aria-sort="ascending"], table.crm th[aria-sort="descending"] { color: var(--indigo-text); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
         padding: 12px 18px; border-top: 1px solid var(--line-2); font-size: .85rem; }
.pager nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager .gap { color: var(--muted); padding: 0 2px; }
.pager .perpage a { margin-left: 8px; font-weight: 600; }
.pager .perpage a.on { color: var(--ink); text-decoration: none; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem;
}
.cellname { display: flex; align-items: flex-start; gap: 11px; }
.cellname .nm { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cellname .em { font-size: .78rem; color: var(--muted); }
.cellname .co { font-size: .78rem; color: var(--muted); }

/* ── Badges / pills ────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.pill.blue { background: var(--blue-100); color: var(--blue-text); }
.pill.green { background: var(--green-50); color: var(--green-text); border-color: var(--green-200); }
.pill.amber { background: var(--amber-50); color: var(--amber); border-color: var(--amber-200); }
.pill.grey { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.pill.red { background: var(--rose-50); color: var(--rose); }
.pill.indigo { background: var(--indigo-50); color: var(--indigo-600); }
.pill.outline { background: var(--surface); color: var(--ink-2); border-color: var(--line); }

.holdpill {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 9px;
  border-radius: 7px; background: var(--surface-3); color: var(--blue-text); font-size: .72rem; font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; line-height: 1;
  background: var(--indigo); color: #fff;
}
.btn:hover { filter: brightness(1.06); }
.btn.sm { padding: 7px 12px; font-size: .81rem; border-radius: 8px; min-height: 30px; }
.btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn.link { background: transparent; color: var(--indigo-text); padding: 6px 8px; }
.btn.teal { background: linear-gradient(120deg, #12726a, #2b8f86); color: #fff; }
.btn.green { background: var(--green-solid); }
.btn.red { background: var(--surface); color: var(--rose); border-color: #f4c4bd; }
.btn.red:hover { background: var(--rose-50); filter: none; }
.btn.dark { background: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Forms ─────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
label.lb { display: block; font-size: .84rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
label.lb .opt { font-weight: 400; color: var(--muted); }
label.lb .req { color: var(--rose); }
.input, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search],
input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .92rem; background: var(--surface); color: var(--ink);
}
select { appearance: auto; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }
.help { display: flex; gap: 7px; font-size: .78rem; color: var(--muted); margin-top: 7px; line-height: 1.45; }
.help svg { flex: none; margin-top: 2px; color: var(--muted-2); }

/* Segmented Yes/No */
.seg { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; font: inherit; font-size: .86rem; font-weight: 700;
  color: var(--muted); padding: 7px 20px; border-radius: 8px; cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg button.on.warn { background: #a97a17; color: #fff; }

/* Callouts */
.callout { display: flex; gap: 10px; padding: 13px 15px; border-radius: 10px; font-size: .85rem; line-height: 1.5; margin-bottom: 16px; }
.callout svg { flex: none; margin-top: 2px; }
.callout.info { background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--blue-700); }
.callout.info svg { color: var(--indigo-text); }
.callout.warn { background: var(--amber-50); border: 1px solid var(--amber-200); color: var(--amber-text); }
.callout.warn svg { color: var(--amber); }
.callout.ok { background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-text); }
.callout.ok svg { color: var(--green); }
.callout b { font-weight: 700; }

.notestrip { background: var(--teal-50); border-radius: 9px; padding: 10px 13px; font-size: .84rem; color: var(--teal-text); margin-bottom: 14px; }
.notestrip b { color: #0f5f57; }

.confirmbox {
  display: flex; gap: 11px; align-items: flex-start; background: var(--amber-50);
  border: 1px solid var(--amber-200); border-radius: 10px; padding: 13px 15px; margin-bottom: 18px;
}
.confirmbox input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--indigo); }
.confirmbox label { font-size: .86rem; color: #6b5312; line-height: 1.45; font-weight: 600; }

/* Dropzone */
.dropzone {
  display: flex; align-items: center; gap: 13px; padding: 16px;
  border: 2px dashed var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--surface-2);
}
.dropzone:hover { border-color: var(--indigo); background: var(--surface-2); }
.dropzone .ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--muted);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.dropzone .t { font-weight: 700; font-size: .9rem; }
.dropzone .d { font-size: .78rem; color: var(--muted); }
.dropzone.done { border-color: var(--green-200); border-style: dashed; background: var(--green-50); }
.dropzone.done .ic { background: var(--green-100); color: var(--green); }
.dropzone.done .d { color: #2a7a4d; }

/* ── Wizard modal ──────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 24, 34, .62); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 34px 16px; overflow-y: auto;
}
.modal {
  background: var(--surface); border-radius: 16px; width: 100%; max-width: 620px;
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.modal-head {
  background: linear-gradient(115deg, #0f6f68 0%, #2b9488 45%, #3d8ba6 100%);
  color: #fff; padding: 20px 24px 16px; position: relative;
}
.modal-head h2 { font-size: 1.2rem; }
.modal-head .sub { font-size: .85rem; color: rgba(255, 255, 255, .82); margin-top: 2px; }
.modal-close {
  position: absolute; top: 14px; right: 16px; background: transparent; border: 0;
  color: rgba(255, 255, 255, .85); cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.stepper { display: flex; align-items: flex-start; margin-top: 16px; }
.stepper .st { flex: 1; text-align: center; position: relative; }
.stepper .st .circ {
  width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(255, 255, 255, .3); position: relative; z-index: 2;
}
.stepper .st.on .circ { background: var(--surface); color: #12726a; border-color: #fff; }
.stepper .st.done .circ { background: #1f9d55; color: #fff; border-color: #1f9d55; }
.stepper .st .lb { font-size: .63rem; color: rgba(255, 255, 255, .72); font-weight: 600; white-space: nowrap; }
.stepper .st.on .lb { color: #fff; font-weight: 700; }
.stepper .st.done .lb { color: rgba(255, 255, 255, .8); }
.stepper .st::before {
  content: ''; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px;
  background: rgba(255, 255, 255, .25); z-index: 1;
}
.stepper .st:first-child::before { display: none; }
.stepper .st.done::before, .stepper .st.on::before { background: #1f9d55; }
.steppill {
  display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .18); color: #fff; font-size: .74rem; font-weight: 700;
}
.modal-body { padding: 24px; max-height: calc(100vh - 300px); overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--line-2); background: var(--surface);
}
.modal-foot .btn.teal, .modal-foot #btnView { margin-left: auto; }
.step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.step-title .ic {
  width: 34px; height: 34px; border-radius: 10px; background: var(--teal-50); color: var(--teal);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.step-title h3 { font-size: 1.45rem; }
.step-desc { color: var(--muted); font-size: .88rem; margin-bottom: 20px; line-height: 1.55; }

/* Questionnaire */
.qcard { border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; margin-bottom: 11px; background: var(--surface); }
.qcard.flagged { border-color: var(--amber-200); border-width: 2px; background: var(--amber-50); }
.qcard .qt { font-weight: 700; font-size: .9rem; margin-bottom: 10px; display: flex; gap: 8px; }
.qcard .qt .num { color: var(--muted); font-weight: 600; flex: none; }
.qcard .expl { margin-top: 13px; }

/* Job picker */
.joblist { max-height: 330px; overflow-y: auto; border-radius: 12px; padding-right: 4px; }
.jobopt {
  border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 11px;
  overflow: hidden; cursor: pointer; background: var(--surface);
}
.jobopt:hover { border-color: #c9d0e2; }
.jobopt.sel { border-color: var(--teal-2); background: var(--surface-3); }
.jobopt .photo { height: 96px; background: var(--surface-3) center/cover no-repeat; }
.jobopt .body { padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start; }
.radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c6cddd; flex: none; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.jobopt.sel .radio { border-color: var(--teal-2); }
.jobopt.sel .radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-2); }
.jobopt .jt { font-weight: 700; font-size: .93rem; }
.jobopt .jc { color: var(--indigo-text); font-weight: 700; font-size: .82rem; margin-top: 1px; }
.jobopt .jmeta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 5px; align-items: center; }
.jobopt .jmeta .wage { color: var(--green); font-weight: 700; }
.jobopt .jd { font-size: .82rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Review step */
.reviewgrid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.reviewgrid .rrow { display: flex; padding: 11px 15px; border-bottom: 1px solid var(--line-2); font-size: .87rem; gap: 12px; }
.reviewgrid .rrow:last-child { border-bottom: 0; }
.reviewgrid .rk { color: var(--muted); width: 44%; flex: none; }
.reviewgrid .rv { font-weight: 600; }
.reviewsec { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: 11px 15px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }

/* ── Slide-over drawer ─────────────────────────────────────────── */
.drawer-back { position: fixed; inset: 0; background: rgba(20, 24, 34, .35); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  background: var(--surface); z-index: 91; box-shadow: -10px 0 40px rgba(16, 24, 40, .16);
  display: flex; flex-direction: column;
}
.drawer-head { padding: 18px 20px 0; border-bottom: 1px solid var(--line-2); position: relative; }
.drawer-head .who { display: flex; gap: 11px; align-items: flex-start; }
.drawer-head .nm { font-weight: 800; font-size: 1.02rem; }
.drawer-head .em { font-size: .78rem; color: var(--muted); word-break: break-all; }
.drawer-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 1.15rem; }
.drawer-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.drawer-tabs { display: flex; gap: 3px; overflow-x: auto; }
.drawer-tabs a {
  padding: 9px 11px; font-size: .8rem; font-weight: 700; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.drawer-tabs a.on { color: var(--indigo-text); border-color: var(--indigo); }
.drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 14px 20px; border-top: 1px solid var(--line-2); }

.dsec { margin-bottom: 22px; }
/* Wraps for the same reason .pagehead does: these section headings carry a
   trailing explanatory note, and a non-wrapping flex row makes that note's
   width a floor for the page. */
.dsec-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .71rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.nextcard { background: var(--green-50); border: 1px solid var(--green-200); border-radius: 11px; padding: 13px 15px; }
.nextcard .t { font-weight: 700; font-size: .92rem; color: var(--green-text); }
.nextcard .d { font-size: .82rem; color: var(--green-text); margin-top: 4px; line-height: 1.5; }
.nextcard .eta { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--green-text); margin-top: 8px; }
.drow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; font-size: .87rem; }
.drow .k { color: var(--muted); }
.drow .v { font-weight: 700; }
.progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 7px; }
.progress > i { display: block; height: 100%; background: var(--indigo); border-radius: 999px; }
.doccounts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 8px; }
.doccounts .n { font-size: 1.5rem; font-weight: 800; }
.doccounts .l { font-size: .74rem; color: var(--muted); }

/* ── Misc ──────────────────────────────────────────────────────── */
.msg { padding: 12px 15px; border-radius: 10px; margin-bottom: 16px; font-size: .87rem; font-weight: 600; }
.msg.ok { background: var(--green-50); color: var(--green-text); border: 1px solid var(--green-200); }
.msg.err { background: var(--rose-50); color: var(--rose-text); }
.msg.warn { background: var(--amber-50); color: var(--amber-text); border: 1px solid var(--amber-200); }
.muted { color: var(--muted); }
/* Identifiers with no spaces — Stripe event names, webhook URLs, file paths —
   have no natural break point, so on a phone one of them sets the width of the
   page. Let them break mid-token rather than overflow. */
code { overflow-wrap: anywhere; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 10px 15px; font-weight: 700; font-size: .87rem; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--indigo-text); border-color: var(--indigo); }
.stack { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; z-index: 80; }
  .sidebar.open { transform: none; }
  .main { padding: 18px 16px 50px; }
  .mobile-bar { display: flex !important; }
}
.mobile-bar {
  display: none; align-items: center; gap: 10px; margin-bottom: 16px;
}

/* Standalone auth cards (staff login, portal login/setup) */
.authcard input { margin-bottom: 14px; }
.authcard label.lb { margin-bottom: 5px; }
.authcard .field input { margin-bottom: 0; }
.authcard h1 { font-size: 1.24rem; }
.authcard p.sub { color: var(--muted); font-size: .86rem; margin: 2px 0 20px; }

/* Upcoming payments: each row swaps between a read view and an edit form in
   place, so the table keeps its columns instead of opening a separate dialog. */
tr.sched-edit, tr.doc-edit { display: none; }
tr.doc-edit.on { display: table-row; }
tr.doc-view.off { display: none; }
tr.doc-edit > td { background: var(--indigo-50); }
tr.sched-edit.on { display: table-row; }
tr.sched-view.off { display: none; }
tr.sched-edit > td { background: var(--indigo-50); }
tr.sched-edit input { width: 100%; font-size: .84rem; }
td.due-soon { color: var(--amber); font-weight: 700; }
td.due-over { color: var(--rose); font-weight: 700; }

/* Payment tables in the client portal. Same shape as table.crm but without its
   900px floor: this one sits inside a narrow card and is read on a phone more
   often than not, so it wraps to the card rather than forcing a scrollbar the
   width of the admin console. */
/* The table sits in its own framed panel rather than floating on the card, so
   the schedule and the history read as two distinct things instead of one run
   of rows under two headings. */
.paywrap {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); margin-top: 4px;
}
table.paytable { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 420px; }
table.paytable thead th {
  text-align: left; padding: 10px 14px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.paytable tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.paytable tbody tr:last-child td { border-bottom: 0; }
table.paytable tbody tr:hover { background: var(--surface-2); }

/* Money and dates line up digit under digit — a column of amounts that does not
   is hard to compare down, which is the only reason to put them in a column. */
table.paytable .num, table.paytable .date {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.paytable .num { text-align: right; font-weight: 700; }
table.paytable thead th.num { text-align: right; }
table.paytable .st { text-align: right; }
table.paytable thead th.st { text-align: right; }

table.paytable tfoot th {
  padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg);
  text-align: left; font-size: .82rem; font-weight: 700;
}
table.paytable tfoot th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* On a phone the row becomes a small stacked card instead of scrolling
   sideways. The status is the column a client opens this page to read, and as
   a table it sits past the right edge — reachable only by a horizontal scroll
   nothing hints at. Each cell carries its own heading from data-label, so the
   <thead> can go rather than be repeated per row. */
@media (max-width: 560px) {
  .paywrap { border-radius: 12px; }
  table.paytable { min-width: 0; }
  /* The alignment above is a table concern; stacked rows put every value on the
     right already, so re-asserting it here would fight the flex layout. */
  table.paytable .num, table.paytable .st { text-align: right; }
  table.paytable tbody tr:hover { background: transparent; }
  table.paytable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.paytable tbody tr {
    display: block; padding: 12px 0; border-bottom: 1px solid var(--line-2);
  }
  table.paytable tbody tr:last-child { border-bottom: 0; }
  table.paytable tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 3px 0; border: 0; text-align: right;
  }
  table.paytable tbody td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted);
  }
  table.paytable tbody td:empty { display: none; }

  table.paytable tfoot tr { display: flex; justify-content: space-between; gap: 14px; }
  table.paytable tfoot th { border-top: 1px solid var(--line); padding: 12px 0; background: none; }
  table.paytable tfoot th:empty { display: none; }
}


/* ── Dialog + toasts (assets/js/crm-ui.js) ─────────────────────── */
.crm-dialog { border: 0; border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); color: var(--ink); background: var(--surface); }
.crm-dialog::backdrop { background: rgba(16, 24, 40, .5); }
.crm-dialog__box { padding: 22px 24px 18px; margin: 0; }
.crm-dialog__title { font-size: 1.08rem; margin: 0 0 8px; }
.crm-dialog__msg { margin: 0 0 18px; color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
.crm-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.btn.danger { background: var(--rose-solid); border-color: var(--rose-solid); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.crm-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.crm-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.4; background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; box-shadow: var(--shadow-md); }
.crm-toast--ok { border-left-color: var(--green); }
.crm-toast--err { border-left-color: var(--rose); background: var(--rose-50); }
.crm-toast--info { border-left-color: var(--indigo); }
.crm-toast__text { flex: 1; overflow-wrap: anywhere; }
.crm-toast__x { border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 6px; }
.crm-toast__x:hover { color: var(--ink); }
.crm-toast__x:focus-visible, .crm-dialog .btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .crm-toast { animation: crm-toast-in .18s ease-out; }
  @keyframes crm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ── Accessibility baseline ────────────────────────────────────── */
/* A link inside a sentence must be recognisable without relying on colour. */
p a:not(.btn), .sub a:not(.btn), .msg a:not(.btn), .hint a:not(.btn), .callout a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
/* Keyboard focus is always visible, on everything a keyboard can reach. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* Skip link: the first thing a keyboard user reaches, hidden until focused. */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; background: var(--surface); color: var(--indigo-600); border: 2px solid var(--indigo); border-radius: 10px; padding: 9px 14px; font-weight: 700; }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ── Activity timeline ─────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline .tl-day { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
                    color: var(--muted); margin: 18px 0 8px; }
.timeline .tl-day:first-child { margin-top: 4px; }
.timeline .tl-item { display: flex; gap: 12px; padding: 7px 0 7px 4px; border-left: 2px solid var(--line-2); margin-left: 5px; position: relative; }
.timeline .tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2); flex: none; margin: 5px 0 0 -10px; box-shadow: 0 0 0 3px var(--surface); }
.timeline .tl-dot.green { background: #2f9e44; } .timeline .tl-dot.blue { background: var(--indigo); }
.timeline .tl-dot.amber { background: #e67700; } .timeline .tl-dot.red { background: #e03131; }
.timeline .tl-body { min-width: 0; font-size: .9rem; }
.timeline .tl-detail { color: var(--ink-2); font-size: .84rem; margin-top: 2px; overflow-wrap: anywhere; }

/* ── Search palette ────────────────────────────────────────────── */
.crm-palette { width: min(560px, calc(100vw - 24px)); margin-top: 12vh; }
.crm-palette__box { padding: 14px 14px 10px; }
.crm-palette__input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font: inherit; font-size: 1rem; background: var(--surface); }
.crm-palette__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(52vh, 380px); overflow-y: auto; }
.crm-palette__list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.crm-palette__list li[aria-selected="true"] { background: var(--indigo-50); outline: 2px solid var(--indigo); outline-offset: -2px; }
.crm-palette__kind { flex: none; width: 54px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.crm-palette__name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.crm-palette__name small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.crm-palette__foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px 0; font-size: .75rem; color: var(--muted); }
.sb-searchbtn { width: 100%; justify-content: flex-start; margin: 0 0 10px; }
@media (max-width: 700px) { .crm-palette__keys { display: none; } }

/* ── My account ────────────────────────────────────────────────── */
.recovery-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.recovery-codes li { background: var(--indigo-50); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; text-align: center; }
.recovery-codes code { font-size: 1rem; letter-spacing: .08em; font-weight: 700; }
/* Month calendar (Appointments) */
.card + .section { margin-top: 14px; }
.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav h2 { font-size: 1.15rem; margin: 0 auto 0 4px; }
table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.cal th { padding: 6px 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); }
table.cal th abbr { text-decoration: none; }
table.cal td { vertical-align: top; height: 112px; padding: 4px 6px 6px; border: 1px solid var(--line); background: var(--surface); }
table.cal td.out { background: var(--surface-3); }
table.cal td.out .cal-day time { color: var(--muted); }
table.cal td.today { box-shadow: inset 0 0 0 2px var(--indigo); }
.cal-day { font-size: .82rem; font-weight: 600; margin-bottom: 2px; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cal-appt { font-size: .76rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; background: var(--indigo-50); color: var(--indigo-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-appt .cal-time { font-weight: 600; margin-right: 3px; }
.cal-appt.completed { background: var(--green-100); color: var(--ink); box-shadow: inset 3px 0 0 var(--green-solid); }
.cal-appt.cancelled { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }
.cal-more, .cal-open { display: inline-block; margin-top: 3px; font-size: .76rem; }
.cal-dayhead { margin: 0 0 12px; }
@media (max-width: 760px) {
  /* Small screens: an agenda — only days that have something, one under another. */
  table.cal, table.cal tbody, table.cal tr, table.cal td { display: block; width: 100%; }
  table.cal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.cal td { height: auto; border-width: 0 0 1px; }
  table.cal td.empty { display: none; }
  table.cal td .cal-day time span[aria-hidden] { display: none; }
  table.cal td .cal-day time .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
  .cal-appt { white-space: normal; }
}
.tpl-preview { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2, var(--surface)); }
.tpl-subject { margin: 6px 0; overflow-wrap: anywhere; }
.tpl-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; }
.qr-box { width: 200px; max-width: 100%; margin: 4px 0 12px; border: 1px solid var(--line, #d8dce6); border-radius: 8px; overflow: hidden; background: #fff; }
.qr-box svg { display: block; width: 100%; height: auto; }
.totp-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; letter-spacing: .08em; overflow-wrap: anywhere; }

/* ── Bulk selection ────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
table.crm th.chk, table.crm td.chk { width: 40px; padding-right: 0; }
table.crm .chk input { width: 17px; height: 17px; accent-color: var(--indigo); cursor: pointer; }
table.crm tr.picked { background: var(--indigo-50); }
.bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; background: var(--indigo-50);
           border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 5; }
.bulkbar[hidden] { display: none; }
.bulkbar select { width: auto; min-width: 150px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .85rem; background: var(--surface); }
.bulk-count { font-weight: 700; margin-right: 6px; }

/* ── Tasks / My day ────────────────────────────────────────────── */
.task-add { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.task-add .field { margin-bottom: 0; }
.tasklist, .plainlist { list-style: none; margin: 0; padding: 0; }
.plainlist li { padding: 5px 0; }
.task { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; }
.task-check { margin: 2px 0 0; }
.task-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--muted-2); background: var(--surface); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.task-box:hover { border-color: var(--indigo); }
.task.is-done .task-box { background: var(--green-solid); border-color: var(--green-solid); }
.task.is-done .task-title { text-decoration: line-through; color: var(--muted); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; overflow-wrap: anywhere; }
.task-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; margin-top: 3px; }
.task-late { color: #b42318; font-weight: 700; }
.task-note { font-size: .86rem; color: var(--ink-2); margin-top: 5px; }
.nav-badge { margin-left: auto; background: var(--rose-solid); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center; }

/* ── Saved views ───────────────────────────────────────────────── */
.viewsrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewchip { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.viewchip a { padding: 5px 4px 5px 12px; font-size: .85rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.viewchip a:hover { color: var(--indigo-text); }
.viewchip form { display: inline; }
.viewchip-x { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 4px 9px 4px 4px; cursor: pointer; }
.viewchip-x:hover { color: var(--rose); }
.saveview { display: inline-flex; gap: 6px; margin-left: auto; }
.saveview input[type=text] { width: 190px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .85rem; }

/* ── Pipeline board ────────────────────────────────────────────── */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 14px; }
.board-col { flex: 0 0 258px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; padding: 0 10px 10px; min-height: 120px; }
.board-col.over { outline: 2px dashed var(--indigo); outline-offset: -2px; background: var(--indigo-50); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 4px 9px; border-top: 4px solid var(--indigo); margin: 0 -10px 8px; padding-left: 14px; padding-right: 14px; border-radius: 14px 14px 0 0; }
.board-head h2 { font-size: .8rem; margin: 0; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.board-count { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 1px 9px; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 30px; }
.bcard { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; cursor: grab; box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.05)); }
.bcard.dragging { opacity: .45; }
.bcard.moving { opacity: .6; pointer-events: none; }
.bcard-name { font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.bcard-name:hover { color: var(--indigo-text); }
.bcard-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; font-size: .76rem; margin: 5px 0 7px; }
.bcard-move { width: 100%; padding: 5px 8px; font: inherit; font-size: .78rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-2); }
.board-more { display: block; font-size: .8rem; font-weight: 600; margin-top: 10px; padding: 0 4px; }
.board-empty { text-align: center; font-size: .82rem; margin: 14px 0 4px; }

/* ── System page ───────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin: 0; }
.facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.errlog { background: #101828; color: #e4e7ec; border-radius: 10px; padding: 12px 14px; font-size: .78rem; line-height: 1.5; overflow: auto; max-height: 320px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Notifications ─────────────────────────────────────────────── */
.notiflist { list-style: none; margin: 0; padding: 0; }
.notif { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; margin-top: 6px; flex: none; }
.notif.is-new { border-color: var(--indigo); background: var(--indigo-50); }
.notif.is-new .notif-dot { background: var(--indigo); }
.notif.is-new a { font-weight: 700; }
.notif-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.notif-body time { font-size: .78rem; }

/* ── Dark theme ────────────────────────────────────────────────────
   Staff screens only: the admin layout marks <html class="crm-admin">. The
   sign-in page and the client portal share this stylesheet but have not been
   designed for dark, so they stay light whatever the device says.
   Chosen automatically from the system setting, or forced either way from
   My account (html[data-theme="dark"|"light"]). Only tokens change here, so
   every component follows.                                                  */
:root { color-scheme: light; }
:root.crm-admin[data-theme="dark"] { color-scheme: dark; }
:root.crm-admin[data-theme="dark"] {
  --ink: #e8eaf1; --ink-2: #cfd4e0; --muted: #a7afc0; --muted-2: #a0a9bc;
  --line: #2c3349; --line-2: #252b40; --line-strong: #3b4463;
  --bg: #0e111c; --card: #171b2b;
  --surface: #171b2b; --surface-2: #1b2033; --surface-3: #232942;
  --indigo-text: #aeaaff; --indigo-50: #242850; --indigo-600: #aeaaff;
  --blue-50: #1b2440; --blue-100: #1f2a4b; --blue-200: #2e3b66; --blue-700: #aebdf0; --blue-text: #aebdf0;
  --green: #62d28f; --green-50: #12301f; --green-100: #17402a; --green-200: #2b5c3f; --green-text: #7fe0a6;
  --amber: #f3c76f; --amber-50: #33290f; --amber-200: #5c4b1e; --amber-text: #f3d28f; --amber-accent: #e9a93b;
  --rose: #ff9188; --rose-50: #3b1b1d; --rose-text: #ffb3ac;
  --teal: #62d0c4; --teal-50: #11312d; --teal-text: #8fe0d6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 14px rgba(0, 0, 0, .4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root.crm-admin:not([data-theme="light"]) { color-scheme: dark;
    --ink: #e8eaf1; --ink-2: #cfd4e0; --muted: #a7afc0; --muted-2: #a0a9bc;
    --line: #2c3349; --line-2: #252b40; --line-strong: #3b4463;
    --bg: #0e111c; --card: #171b2b;
    --surface: #171b2b; --surface-2: #1b2033; --surface-3: #232942;
    --indigo-text: #aeaaff; --indigo-50: #242850; --indigo-600: #aeaaff;
    --blue-50: #1b2440; --blue-100: #1f2a4b; --blue-200: #2e3b66; --blue-700: #aebdf0; --blue-text: #aebdf0;
    --green: #62d28f; --green-50: #12301f; --green-100: #17402a; --green-200: #2b5c3f; --green-text: #7fe0a6;
    --amber: #f3c76f; --amber-50: #33290f; --amber-200: #5c4b1e; --amber-text: #f3d28f; --amber-accent: #e9a93b;
    --rose: #ff9188; --rose-50: #3b1b1d; --rose-text: #ffb3ac;
    --teal: #62d0c4; --teal-50: #11312d; --teal-text: #8fe0d6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 14px rgba(0, 0, 0, .4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  }
}

/* ── Appearance picker ─────────────────────────────────────────── */
.themepick { border: 0; padding: 0; margin: 0; }
.themepick legend { font-size: 1.05rem; font-weight: 700; padding: 0; margin-bottom: 6px; }
.themepick label { display: inline-flex; align-items: center; gap: 7px; margin-right: 18px; font-weight: 600; cursor: pointer; }
.themepick input { width: auto; accent-color: var(--indigo); }

/* ── Appointments: day headings ────────────────────────────────── */
table.crm tr.dayrow th { background: var(--surface-3); text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink); padding: 8px 18px; }