:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --border: #dfe4ec;
  --text: #1c2434;
  --muted: #64748b;
  --primary: #0a5cff;
  --primary-dark: #084ad0;
  --primary-soft: #e8f0ff;
  --success: #0f9d58;
  --success-soft: #e6f6ee;
  --warn: #b7791f;
  --warn-soft: #fdf3e0;
  --danger: #d3455b;
  /* Badge text is 0.75rem/600, so WCAG AA wants 4.5:1 against the soft
     backgrounds — the base --success/--warn/--danger/--muted tones sit between
     3.1:1 and 4.3:1 there. These darker variants are used for badge labels
     only, since a badge is the sole status indicator on the section list, the
     client list and the stage timeline. The base tones stay as they are for
     larger text, icons and borders, which are not held to the same ratio. */
  --success-text: #0a7a44;
  --warn-text: #8a5a12;
  --danger-text: #b02a41;
  --muted-text: #4b5768;
  --danger-soft: #fbe9ec;
  --info-soft: #eef2f8;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 30, 54, 0.08), 0 4px 16px rgba(16, 30, 54, 0.06);
  font-size: 15px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
h1, h2, h3 { line-height: 1.25; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.loading-screen { padding: 4rem; text-align: center; color: var(--muted); }

/* Available to assistive technology, invisible on screen. Used for labels on
   controls whose purpose is obvious visually but has no accessible name. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1.4rem;
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand .sub { font-weight: 400; color: var(--muted); font-size: 0.8rem; }
@media (max-width: 560px) { .brand .sub { display: none; } }
.topbar .actions { display: flex; align-items: center; gap: 0.9rem; }
.container { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.4rem 5rem; }

/* ---------- cards & badges ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.2rem;
}
.card h2 { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* The client dashboard's main/side split. This used to be an inline style
   patched by JavaScript from a single window.innerWidth read at render time,
   so rotating a phone or resizing a window kept the wrong layout until the
   next full re-render — and narrowing a desktop window left the timeline
   squeezed into a sliver. A media query tracks the viewport for free. */
.grid.dashboard-split {
  grid-template-columns: 1.4fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .grid.dashboard-split { grid-template-columns: 1fr; }
}

.badge {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.badge.not_started { background: var(--info-soft); color: var(--muted-text); }
.badge.in_progress { background: var(--warn-soft); color: var(--warn-text); }
.badge.submitted { background: var(--primary-soft); color: var(--primary-dark); }
.badge.approved, .badge.complete { background: var(--success-soft); color: var(--success-text); }
.badge.changes_requested, .badge.blocked { background: var(--danger-soft); color: var(--danger-text); }
.badge.pending { background: var(--info-soft); color: var(--muted-text); }
.badge.active { background: var(--success-soft); color: var(--success-text); }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text);
  padding: 0.5rem 1rem; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--info-soft); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.icon-btn { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--muted); }

label.field { display: block; margin-bottom: 0.9rem; }
label.field > .lbl { display: block; font-weight: 600; font-size: 0.86rem; margin-bottom: 0.25rem; }
.req { color: var(--danger); }
.upload-current {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.6rem; padding: 0.6rem 0.8rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
label.field .hint { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; margin-top: 0.2rem; }
input[type="text"], input[type="email"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; padding: 0.5rem 0.65rem;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.92rem; font-family: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 92, 255, 0.15);
}
textarea { min-height: 84px; resize: vertical; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 1.2rem; }
.form-grid .span-2 { grid-column: 1 / -1; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }
.login-card .brand { justify-content: center; margin-bottom: 1rem; flex-direction: column; text-align: center; }
.login-card .login-logo { height: 36px; max-width: 100%; margin-bottom: 0.4rem; }

/* ---------- progress ---------- */
.progress-wrap { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.progress-ring { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.35rem;
}
.progress-bar { height: 8px; border-radius: 999px; background: var(--info-soft); overflow: hidden; }
.progress-bar > div { height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.3s; }

/* ---------- section list ---------- */
.section-card {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.95rem 1.1rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.1s;
}
.section-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.section-card .icon { font-size: 1.5rem; }
.section-card .title { font-weight: 700; }
.section-card .meta { margin-left: auto; text-align: right; }

/* ---------- stage timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 0.9rem; position: relative; padding-bottom: 1.1rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .dot-col { display: flex; flex-direction: column; align-items: center; width: 26px; flex-shrink: 0; }
.timeline .dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: #fff; z-index: 1;
}
.timeline .line { flex: 1; width: 2px; background: var(--border); margin-top: 2px; }
.timeline li:last-child .line { display: none; }
.timeline li.complete .dot { background: var(--success); border-color: var(--success); }
.timeline li.in_progress .dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(10,92,255,0.18); }
.timeline li.blocked .dot { background: var(--danger); border-color: var(--danger); }
.timeline .stage-name { font-weight: 700; }
.timeline .stage-desc { color: var(--muted); font-size: 0.83rem; }
.timeline .stage-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* ---------- wizard ---------- */
.wizard-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wizard-head h1 { margin: 0; font-size: 1.45rem; }
.wizard-nav { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.instructions {
  background: var(--primary-soft); border: 1px solid #c6dbff;
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.instructions ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.instructions li { margin-bottom: 0.25rem; font-size: 0.88rem; }
.review-note {
  background: var(--danger-soft); border: 1px solid #f2c4cc;
  border-radius: var(--radius); padding: 0.8rem 1.1rem; margin-bottom: 1.2rem;
}

/* data tables */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
table.data th {
  text-align: left; padding: 0.45rem 0.5rem; white-space: nowrap;
  border-bottom: 2px solid var(--border); font-size: 0.78rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em;
}
table.data td { padding: 0.3rem 0.35rem; border-bottom: 1px solid var(--border); vertical-align: top; min-width: 120px; }
table.data td input, table.data td select { min-width: 110px; }
table.data td.rm { min-width: 30px; width: 30px; }

/* row cards (sites, queues, ivrs) */
.row-card { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.9rem; overflow: hidden; }
.row-card > summary {
  list-style: none; cursor: pointer; padding: 0.8rem 1.1rem;
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--info-soft); font-weight: 700;
}
.row-card > summary::-webkit-details-marker { display: none; }
.row-card > summary .chev { transition: transform 0.15s; color: var(--muted); }
.row-card[open] > summary .chev { transform: rotate(90deg); }
.row-card .body { padding: 1rem 1.1rem 0.4rem; }
.row-card .rm-row { text-align: right; padding: 0 1.1rem 0.8rem; }
.group-label { grid-column: 1 / -1; font-weight: 700; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0.6rem 0 0.4rem; border-top: 1px dashed var(--border); padding-top: 0.7rem; }

/* ---------- admin ---------- */
.client-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 0.8rem;
  align-items: center; padding: 0.85rem 1.1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 0.7rem; cursor: pointer;
  box-shadow: var(--shadow);
}
.client-row:hover { border-color: var(--primary); }
.client-row .company { font-weight: 700; }
@media (max-width: 720px) { .client-row { grid-template-columns: 1fr; } }

.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; flex-wrap: wrap; }
.tabs button {
  background: none; border: none; padding: 0.55rem 0.95rem; cursor: pointer;
  font-size: 0.92rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16, 24, 40, 0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.modal { background: var(--surface); border-radius: var(--radius); max-width: 480px; width: 100%; padding: 1.4rem 1.5rem; max-height: 90vh; overflow-y: auto; }
.modal h3 { margin-top: 0; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.admin-row:last-child { border-bottom: none; }
.admin-row .company { font-weight: 700; }

/* ---------- toast ---------- */
#toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 0.6rem 1.2rem;
  border-radius: 999px; font-size: 0.9rem; z-index: 200;
  opacity: 0; transition: opacity 0.25s; pointer-events: none; max-width: 90vw;
}
#toast.show { opacity: 1; }
#toast.error { background: var(--danger); }

/* ---------- copilot ---------- */
.copilot-fab {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6a3df5);
  box-shadow: 0 6px 20px rgba(10, 92, 255, 0.4);
}
.copilot-panel {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 95;
  width: 370px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 3rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(16, 30, 54, 0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.copilot-header {
  padding: 0.85rem 1.1rem; display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(135deg, var(--primary), #6a3df5); color: #fff;
}
.copilot-header .copilot-sub { font-size: 0.75rem; opacity: 0.85; }
.copilot-header .icon-btn { color: #fff; }
.copilot-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.copilot-msg { max-width: 88%; padding: 0.55rem 0.85rem; border-radius: 14px; font-size: 0.88rem; white-space: pre-wrap; }
.copilot-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.copilot-msg.assistant { align-self: flex-start; background: var(--info-soft); border-bottom-left-radius: 4px; }
.copilot-msg.typing { color: var(--muted); font-style: italic; }
.copilot-input { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--border); }
.copilot-input input { flex: 1; }

/* ---------- admin client view (impersonation) ---------- */
.impersonation-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 1.4rem; font-size: 0.86rem;
  background: var(--warn-soft); color: #7c5510; border-bottom: 2px solid #e6c98a;
  position: sticky; top: 0; z-index: 90;
}
/* The impersonation bar and the topbar are both sticky at top: 0. Left alone,
   the bar (z-index 90) pins over the topbar (z-index 40) as soon as an admin in
   client view scrolls, hiding the brand link and Sign out for the rest of the
   page. The topbar is offset by the bar's measured height instead — the
   variable is set (and cleared) by trackImpersonationBarHeight in app.js, so
   this is a no-op whenever nobody is in client view. */
.topbar { top: var(--impersonation-bar-height, 0px); }
.impersonation-bar .btn { background: #fff; border-color: #d9b36a; white-space: nowrap; }
.client-row-actions { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }

/* Deep link to an external tool from a timeline stage (e.g. number porting) */
.stage-link {
  font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid #c6dbff; border-radius: 999px; padding: 0.1rem 0.55rem;
}
.stage-link:hover { background: #d9e7ff; }

/* ---------- bulk spreadsheet upload ---------- */
.bulk-panel {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--info-soft); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-bottom: 1rem;
}
.bulk-panel .bulk-copy { flex: 1; min-width: 260px; }
.bulk-panel .bulk-copy p { margin: 0.25rem 0 0; }
.bulk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bulk-result {
  border-radius: var(--radius); padding: 0.8rem 1.1rem; margin-bottom: 1rem; font-size: 0.88rem;
}
.bulk-result.ok { background: var(--success-soft); border: 1px solid #b7e3cb; color: #0b6b3d; }
.bulk-result.error { background: var(--danger-soft); border: 1px solid #f2c4cc; color: #96233a; }
.bulk-problems { margin: 0.5rem 0 0; padding-left: 1.1rem; max-height: 240px; overflow-y: auto; }
.bulk-problems li { margin-bottom: 0.15rem; }

/* ---------- settings ---------- */
.toggle-row {
  display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer;
  padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row input[type="checkbox"] { width: 17px; height: 17px; margin-top: 0.15rem; flex: none; accent-color: var(--primary); }
.toggle-row .toggle-label { display: block; font-weight: 600; font-size: 0.9rem; }
.toggle-row .muted { display: block; }
.toggle-master { border-bottom: none; padding: 0; }
table.settings-table th {
  text-transform: none; letter-spacing: 0; font-size: 0.82rem;
  width: 190px; vertical-align: top; padding: 0.5rem 0.8rem 0.5rem 0;
}
table.settings-table td { min-width: 0; padding: 0.5rem 0; }
.setup-steps { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.65; }
.setup-steps li { margin-bottom: 0.5rem; }
.setup-steps code, .settings-table code {
  background: var(--info-soft); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.85em;
}

/* ---------- audit log ---------- */
.audit-filters {
  display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end;
}
.audit-filter-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
table.audit-table td { min-width: 0; font-size: 0.83rem; }
table.audit-table td.nowrap, .audit-pager .nowrap { white-space: nowrap; }
table.audit-table .audit-action { font-weight: 600; }
table.audit-table .audit-detail { min-width: 220px; }
table.audit-table tr.audit-warning td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.audit-table tr.audit-error td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.audit-table tr.audit-error { background: var(--danger-soft); }
.audit-pager {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.8rem; flex-wrap: wrap; margin-top: 0.9rem;
}

/* ---------- multi-file uploads ---------- */
.upload-current + .upload-current { margin-top: 0.5rem; }
.upload-add {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem;
}
/* A value the browser flags as not matching the column's pattern (e.g. a
   malformed MAC address) — the wizard also blocks submission on it. */
input:invalid { border-color: var(--danger); background: var(--danger-soft); }

/* Shown when the tab is running an older build than the server (see
   checkForNewVersion in app.js). Pinned to the bottom so it never covers the
   form the user is mid-way through filling in. */
.update-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1.4rem; font-size: 0.88rem;
  background: var(--warn-soft); color: #7c5510;
  border-top: 2px solid #e6c98a; box-shadow: 0 -4px 18px rgba(16, 30, 54, 0.12);
}
.update-bar .btn { background: #fff; border-color: #d9b36a; }
.update-bar .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }

/* A cell whose extension or login email is already used elsewhere in the BRD.
   Flagged live while typing; blocks submitting the section. */
input.dup, select.dup {
  border-color: var(--danger); background: var(--danger-soft);
  box-shadow: 0 0 0 2px rgba(211, 69, 91, 0.12);
}
#section-problems { margin-top: 1.2rem; }

/* ---------- stage detail: build checklist & training ---------- */
.stage-detail {
  margin-top: 0.7rem; padding: 0.7rem 0.9rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.stage-detail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem; margin-bottom: 0.4rem; font-size: 0.88rem;
}
.stage-note {
  margin-top: 0.6rem; padding: 0.5rem 0.8rem; font-size: 0.83rem;
  background: var(--primary-soft); border: 1px solid #c6dbff; border-radius: 8px;
}
.stage-note .btn { padding: 0.1rem 0.5rem; }

.task-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.task-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0.25rem 0; font-size: 0.88rem;
}
.task-list li label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.task-list li.done > label > span { color: var(--muted); text-decoration: line-through; }
.task-list input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--success); }

.session-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.session-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.session-row:last-child { border-bottom: none; }
.session-label { font-weight: 600; font-size: 0.89rem; }
.session-when { font-size: 0.86rem; }
.session-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.badge.session-unscheduled { background: var(--info-soft); color: var(--muted); }
.badge.session-requested { background: var(--warn-soft); color: var(--warn); }
.badge.session-confirmed { background: var(--primary-soft); color: var(--primary-dark); }
.badge.session-completed { background: var(--success-soft); color: var(--success); }
.badge.session-cancelled { background: var(--danger-soft); color: var(--danger); }

/* ---------- project contacts, team & help ---------- */
.contact-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.contact-list li {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  padding: 0.55rem 0; border-bottom: 1px solid var(--border);
}
.contact-list li:last-child { border-bottom: none; }
.contact-name { font-weight: 600; font-size: 0.9rem; }
.contact-links { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.83rem; }
.contact-links a { color: var(--primary); text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }

.tab-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 0.3rem;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 0.72rem; line-height: 18px; text-align: center;
}
.help-request { padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.help-request:last-child { border-bottom: none; }
.help-request.resolved { opacity: 0.65; }
.help-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.help-message {
  white-space: pre-wrap; font-size: 0.88rem; margin: 0.5rem 0;
  padding: 0.6rem 0.8rem; background: var(--bg); border-radius: 8px;
}

/* Sections TelcoDataCloud fills in on the client's behalf */
.owned-note {
  background: var(--info-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.8rem 1.1rem; margin-bottom: 1.2rem; font-size: 0.9rem;
}
.section-card.admin-owned { opacity: 0.85; }

/* Section terms (number porting responsibilities) */
.terms-card { border-left: 4px solid var(--warn); }
.terms-points { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.6; }
.terms-points li { margin-bottom: 0.4rem; }
.terms-accept {
  border-top: 1px solid var(--border); border-bottom: none;
  padding-top: 0.8rem; margin-top: 0.4rem;
}

/* Terms acceptance — a permanent record once made, so it reads as a receipt
   rather than an editable setting. */
.terms-status {
  padding: 0.6rem 0.9rem; border-radius: 8px; font-size: 0.88rem;
}
.terms-status.accepted { background: var(--success-soft); color: #0b6b3d; }
.terms-status.pending { background: var(--warn-soft); color: #7c5510; }
.terms-accept.accepted { background: var(--success-soft); border-radius: 8px; padding: 0.8rem; }
.terms-accept.accepted input[type="checkbox"] { accent-color: var(--success); }
.terms-accept.accepted input[disabled] { cursor: default; }

/* ---------- single sign-on ---------- */
.sso-block { margin-bottom: 1.1rem; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; margin-bottom: 0.5rem; text-decoration: none;
  font-weight: 600; padding: 0.6rem 1rem;
}
.sso-btn span { font-size: 1.05rem; }
.sso-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.sso-divider {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1rem 0 0.2rem; color: var(--muted); font-size: 0.8rem;
}
.sso-divider::before, .sso-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- client login management ---------- */
.login-row.is-disabled { opacity: 0.6; }
.login-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }