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

:root {
  --ink: #1f2430;
  --ink-2: #384252;
  --muted: #6b7280;
  --muted-2: #8b93a3;
  --line: #e8eaf0;
  --line-2: #eef0f5;
  --bg: #f5f6fb;
  --card: #ffffff;

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

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

  --green: #16a34a;
  --green-50: #ecfdf3;
  --green-200: #b7e4c7;

  --amber: #b7791f;
  --amber-50: #fdf6e3;
  --amber-200: #f0dca8;
  --amber-accent: #e9a93b;

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

  --rose: #dc2626;
  --rose-50: #fdecea;

  --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-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: #fff;
  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); 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); 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] {
  width: 100%; padding: 8px 10px 8px 34px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit; font-size: .84rem; background: #fbfbfd;
}
.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: #fff;
}
.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);
}
.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: #f4f5fa; }
.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: #fff; 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); }
.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: #fff; 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: #fff; border: 1px solid var(--line);
}
.pilltabs a:hover { border-color: #d6dae6; }
.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: #fffdf6; 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: #fff; 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: #fff;
}
.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: #fff;
  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); 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: #fff; 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: #fafbfd;
  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: #fafbfe; }

.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: #e8eefb; color: #2c5aa8; }
.pill.green { background: var(--green-50); color: #157f3d; border-color: var(--green-200); }
.pill.amber { background: var(--amber-50); color: var(--amber); border-color: var(--amber-200); }
.pill.grey { background: #f2f4f7; 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: #fff; 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: #eef2fb; color: #46557f; 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; }
.btn.ghost { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { background: #f7f8fb; filter: none; }
.btn.link { background: transparent; color: var(--indigo); padding: 6px 8px; }
.btn.teal { background: linear-gradient(120deg, #12726a, #2b8f86); color: #fff; }
.btn.green { background: var(--green); }
.btn.red { background: #fff; 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=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: #fff; 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: #f2f3f7; 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: #fff; 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); }
.callout.warn { background: var(--amber-50); border: 1px solid var(--amber-200); color: #7a5c12; }
.callout.warn svg { color: var(--amber); }
.callout.ok { background: var(--green-50); border: 1px solid var(--green-200); color: #14663a; }
.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: #2a6a62; 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 #cfd6e4; border-radius: 12px; cursor: pointer; background: #fcfcfe;
}
.dropzone:hover { border-color: var(--indigo); background: #fafbff; }
.dropzone .ic {
  width: 40px; height: 40px; border-radius: 10px; background: #f1f3f8; 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: #d8f2e1; 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: #fff; 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: #fff; 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: #fff;
}
.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: #fff; }
.qcard.flagged { border-color: var(--amber-200); border-width: 2px; background: #fffcf2; }
.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: #fff;
}
.jobopt:hover { border-color: #c9d0e2; }
.jobopt.sel { border-color: var(--teal-2); background: #f4fbf9; }
.jobopt .photo { height: 96px; background: #eef1f6 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); 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: #fafbfd; 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: #fff; 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); 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: #14663a; }
.nextcard .d { font-size: .82rem; color: #3d6b52; margin-top: 4px; line-height: 1.5; }
.nextcard .eta { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: #4b7a5f; 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: #eef0f5; 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: #14663a; border: 1px solid var(--green-200); }
.msg.err { background: var(--rose-50); color: #8a2a1e; }
.msg.warn { background: var(--amber-50); color: #7a5c12; 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); 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: #fff; 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: #fafbfe; }

/* 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; }
}