:root {
  --navy: #1f3a5f;
  --navy-2: #2e4a73;
  --accent: #2e86ab;
  --accent-d: #1f6f93;
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #e2e8f0;
  /* RQ-01/RQ-16: these tokens are referenced across the stylesheet but were
     never defined, so every declaration using them was invalid — the
     notification drawer resolved to a transparent background, and the
     permission matrix lost its ✓/✗ colouring and checkbox accent.
     Aliased to the canonical palette above. */
  --surface: var(--card);
  --border: var(--line);
  --primary: var(--accent);
  --blue: var(--accent);
  --ok: var(--green);
  --err: var(--red);
  --text: #1e293b;
  --muted: #64748b;
  --green: #15803d;
  --green-bg: #dcfce7;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --red: #b91c1c;
  --red-bg: #fee2e2;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* ---- topbar ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--navy); color: #fff; padding: 10px 20px;
  /* RQ-03: sticky header */
  position: sticky; top: 0; z-index: 90;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  font-size: 22px; background: var(--accent); width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 9px;
}
.title { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.subtitle { font-size: 12px; opacity: .75; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.persona { font-size: 12px; opacity: .85; display: flex; flex-direction: column; gap: 3px; }
.persona select {
  background: var(--navy-2); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 5px 8px; font-size: 13px;
}
.api-status { display: flex; gap: 6px; }
.pill {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.up .dot { background: #4ade80; }
.pill.down .dot { background: #f87171; }
.pill.warn .dot { background: #fbbf24; }

/* ---- tabs ---- */
/* RQ-03: sticky nav bar, sits just below sticky header */
/* The menu scrolls; the page does not.
   A flex row with no overflow rule has two ways to absorb a menu wider than
   the window, and takes both: it squashes the buttons until the labels break
   over three lines, then overhangs the page, putting a horizontal scrollbar
   on the whole app and the last tab — Settings — past the right edge. */
.tabs {
  display: flex; gap: 4px; padding: 0 20px; background: #fff;
  border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: 89;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.tab {
  border: none; background: none; padding: 13px 16px; font-size: 14px; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600;
  flex: 0 0 auto;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--navy); color: #fff; margin-left: 5px; vertical-align: middle; }
.tab-count.hidden { display: none; }

main { padding: 20px; max-width: 1280px; margin: 0 auto; }
.tabpanel { display: none; }
.tabpanel.active { display: block; }

/* ---- layout ---- */
.layout { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
.sidebar { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.sidebar h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.team-source { font-size: 11px; margin: -4px 0 10px; }
.people-list { display: flex; flex-direction: column; }

/* Bulk generate bar */
.bulk-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.bulk-roles { display: flex; gap: 4px; flex: 1; }
.bulk-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bulk-role { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); transition: all .15s; }
.bulk-role.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.bulk-progress { margin-bottom: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; max-height: 220px; overflow-y: auto; }
.bulk-prog-title { font-weight: 600; margin-bottom: 6px; color: var(--text); }
.bulk-prog-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--line); }
.bulk-prog-row:last-child { border: none; }
.bulk-prog-name { color: var(--text); font-weight: 500; }
.bulk-prog-status.ok { color: var(--green); }
.bulk-prog-status.err { color: var(--red); }

/* ---- drill-down tree ---- */
.tn { display: flex; flex-direction: column; }
.tn-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  cursor: pointer; border-radius: 8px; transition: background .12s;
}
.tn-row:hover { background: #eef6fb; }
.tn-row.active { background: #dbeeff; }
.tn-arrow {
  width: 18px; flex-shrink: 0; font-size: 9px; color: var(--muted);
  transition: transform .2s; user-select: none; text-align: center;
}
.tn-arrow.open { transform: rotate(90deg); }
.tn-arrow.leaf { color: #cbd5e1; cursor: default; }
.tn-body { flex: 1; min-width: 0; }
.tn-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-kids { border-left: 2px solid var(--line); margin-left: 18px; }
.tn-task-badge { font-size: 10px; font-weight: 700; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; text-align: center; margin-left: auto; flex-shrink: 0; }
.tn-all-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: pointer; border-radius: 8px; font-weight: 600; font-size: 13px; margin-bottom: 4px; transition: background .12s; }
.tn-all-row:hover { background: #eef6fb; }
.tn-all-row.active { background: #dbeeff; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--navy); color: #fff; }
.badge.ZSM { background: #b45309; }
.badge.RSM { background: var(--accent); }
.badge.SM { background: #7c3aed; }
.badge.BM { background: #0891b2; }
.badge.LME { background: #15803d; }

.content { min-height: 300px; }
.placeholder { padding: 60px 20px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }

.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.detail-head h2 { margin: 0 0 4px; }
.detail-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- buttons ---- */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--text); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn:hover { background: #f8fafc; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-d); }
.btn-delete { background: transparent; color: #c0392b; border-color: #c0392b; }
.btn-delete:hover { background: #c0392b; color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.status.Withdrawn { background: #888; color: #fff; }
.icon-btn { color: var(--accent-d); border-color: #cfe3ef; background: #f2f9fc; }
.icon-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-gmail { color: #c5221f; border-color: #f5c6c5; background: #fff8f8; }
.btn-gmail:hover { background: #c5221f; color: #fff; border-color: #c5221f; }

/* ---- context cards ---- */
.context-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ctx-card { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 14px; box-shadow: var(--shadow); }
.ctx-card .big { font-size: 26px; font-weight: 700; color: var(--navy); }
.ctx-card .lbl { font-size: 12px; color: var(--muted); }

/* ---- prospecting panel ---- */
.prospecting { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 16px; }
.prospect-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.prospect-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prospect { border: 1px solid var(--line); border-left: 3px solid #7c3aed; border-radius: 9px; padding: 10px 12px; }
.prospect-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.icp { font-size: 11px; font-weight: 700; background: #ede9fe; color: #6d28d9; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.prospect .contacts { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.prospect .contact { font-size: 12px; color: var(--navy-2); }

.section-title { margin: 0; font-size: 15px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.note { padding: 10px 14px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: 13px; margin-bottom: 12px; }
.note.err { background: var(--red-bg); color: var(--red); }
.gen-info { padding: 6px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 12px; margin-bottom: 12px; }

/* ---- draft cards ---- */
.draft-list { display: flex; flex-direction: column; gap: 12px; }
.draft {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 11px; padding: 14px; box-shadow: var(--shadow);
}
.draft.High { border-left-color: var(--red); }
.draft.Low { border-left-color: var(--muted); }
.draft-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.draft h4 { margin: 0 0 4px; font-size: 15px; }
.draft .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--navy-2); font-weight: 600; }
.tag.High { background: var(--red-bg); color: var(--red); }
.tag.Normal { background: #e0f2fe; color: var(--accent-d); }
.tag.Low { background: #f1f5f9; color: var(--muted); }
.tag.time-tag { background: #f0fdf4; color: #166534; }
.draft .instruction { margin: 4px 0; }
.draft .rationale { font-size: 12.5px; color: var(--muted); font-style: italic; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.draft-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- capacity bar ---- */
.capacity-wrap { border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--bg); }
.capacity-wrap.cap-ok { border-color: #bbf7d0; background: #f0fdf4; }
.capacity-wrap.cap-warn { border-color: #fed7aa; background: #fff7ed; }
.capacity-wrap.cap-over { border-color: #fecaca; background: #fef2f2; }
.capacity-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; gap: 4px; }
.capacity-label { font-size: 13px; color: var(--text); }
.capacity-wrap.cap-ok .capacity-label { color: #166534; }
.capacity-wrap.cap-warn .capacity-label { color: #9a3412; }
.capacity-wrap.cap-over .capacity-label { color: #991b1b; }
.capacity-sub { font-size: 11.5px; color: var(--muted); }
/* The seven days the plan covers, one column each. The old single track
   measured a week against one day's capacity; this shows where the week is
   actually loaded and where it is still empty. */
.wk-strip { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.wk-day { position: relative; flex: 1 1 0; display: flex; flex-direction: column;
          justify-content: flex-end; align-items: center; height: 100%;
          background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.wk-day-fill { width: 100%; background: #22c55e; transition: height 0.3s; }
.wk-day.cap-empty { background: repeating-linear-gradient(45deg, #e2e8f0,
                    #e2e8f0 3px, #edf2f7 3px, #edf2f7 6px); }
.wk-day.cap-over .wk-day-fill { background: #ef4444; }
.wk-day-name { position: absolute; bottom: 1px; font-size: 9px; font-weight: 700;
               color: var(--muted); letter-spacing: .02em; }
.wk-day.cap-ok .wk-day-name { color: #14532d; }
.wk-day.cap-over .wk-day-name { color: #fff; }


/* ---- review board ---- */
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* Person filter bar in Issued Tasks */
.review-person-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rpill { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); white-space: nowrap; }
.rpill.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.rpill-count { font-size: 10px; font-weight: 700; background: rgba(255,255,255,.25); padding: 1px 5px; border-radius: 10px; margin-left: 3px; }
.rpill:not(.active) .rpill-count { background: var(--line); color: var(--muted); }
.rpill-role-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); align-self: center; padding: 0 4px; }

/* Grouped person sections */
.review-person-group { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.review-person-summary { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; user-select: none; list-style: none; }
.review-person-summary::-webkit-details-marker { display: none; }
.review-person-summary::before { content: "▶"; font-size: 10px; margin-right: 8px; color: var(--muted); transition: transform .2s; }
details[open] .review-person-summary::before { transform: rotate(90deg); }
.review-person-group .task-row { border-radius: 0; border: none; border-top: 1px solid var(--line); box-shadow: none; }

.review-list, .outbox-list { display: flex; flex-direction: column; gap: 10px; }
.my-tasks-group { border-color: var(--blue); background: #eff6ff; margin-bottom: 4px; }
.my-tasks-summary { background: #dbeafe; color: #1e40af; }
.my-tasks-summary::before { color: #3b82f6; }
.task-row, .outbox-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 14px; box-shadow: var(--shadow);
}
.task-row .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.task-row h4 { margin: 0 0 3px; }
.status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.status.Issued { background: #e0f2fe; color: var(--accent-d); }
.status.Acknowledged { background: var(--amber-bg); color: var(--amber); }
.status.Completed { background: var(--green-bg); color: var(--green); }
.status.Blocked { background: var(--red-bg); color: var(--red); }
.task-row .sub { font-size: 12px; color: var(--muted); margin: 4px 0; }
.task-row .controls { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.task-row select, .task-row input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.deliv { font-size: 11px; margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.deliv span { padding: 2px 8px; border-radius: 6px; background: #f1f5f9; }
.deliv .ok { background: var(--green-bg); color: var(--green); }
.deliv .fail { background: var(--red-bg); color: var(--red); }
.deliv .skip { background: #f1f5f9; color: var(--muted); }

.outbox-row .obtop { display: flex; justify-content: space-between; }
.outbox-row pre { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; margin: 8px 0 0; max-height: 160px; overflow: auto; }

/* ---- emails tab ---- */
.email-toolbar { display: flex; align-items: center; gap: 10px; }
.gmail-status { font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: #f1f5f9; }
.gmail-status.on { background: var(--green-bg); color: var(--green); font-weight: 600; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.subtab { border: none; background: none; padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.subpanel { display: none; }
.subpanel.active { display: block; }
.inbox-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-row { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow); }
.inbox-row.risk-green { border-left-color: var(--green); }
.inbox-row.risk-amber { border-left-color: var(--amber); }
.inbox-row.risk-red { border-left-color: var(--red); }
.ib-top { display: flex; gap: 12px; align-items: flex-start; }
.risk { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.risk.risk-green { background: var(--green-bg); color: var(--green); }
.risk.risk-amber { background: var(--amber-bg); color: var(--amber); }
.risk.risk-red { background: var(--red-bg); color: var(--red); }
.audit-detail { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.audit-slot:empty { display: none; }

/* ---- modal ---- */
/* NR-02: dialogs must layer above the sticky header (.topbar 90 / .tabs 89),
   which the previous z-index of 50 sat underneath. Applies to every .modal
   dialog — task, email, edit user, branch — so this cannot regress per-dialog. */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; padding: 24px; z-index: 1000; }
.modal-card { background: var(--card); border-radius: 14px; padding: 22px; width: min(560px, 92vw); max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
/* Keep the dialog title in view while a long form body scrolls under it. */
.modal-card > h3 { position: sticky; top: -22px; z-index: 1; background: var(--card); margin: -22px -22px 14px; padding: 22px 22px 12px; border-radius: 14px 14px 0 0; }
#taskForm label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 11px; }
#taskForm input, #taskForm textarea, #taskForm select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); }
#taskForm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#emailForm label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 11px; }
#emailForm input, #emailForm textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); }
#emailForm .check-line { flex-direction: row; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
#emailForm .check-line input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* RQ-01: brief highlight when a notification deep-links to a task */
.task-focused { animation: task-focus-flash 2.4s ease-out; }
@keyframes task-focus-flash {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
  100%    { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .task-focused { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}

/* NR-02: no background scrolling behind an open dialog */
body.modal-open { overflow: hidden; }

/* ---- toast ---- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 2000; font-size: 14px; max-width: 80vw; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }
.toast.warn { background: #b45309; }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .context-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---- login overlay ---- */
.login-overlay {
  position: fixed; inset: 0; background: var(--navy); z-index: 3000;
  display: grid; place-items: center;
}
.login-overlay.hidden { display: none; }
.login-card {
  background: #fff; border-radius: 18px; padding: 44px 40px; width: min(400px, 92vw);
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.login-logo { font-size: 34px; background: var(--accent); color: #fff; width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 18px; }
.login-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--navy); }
.login-sub { margin: 0 0 28px; font-size: 13px; color: var(--muted); }
.login-hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.login-error { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 13px; }
.login-error.hidden { display: none; }
.btn-google-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 600;
  border: 1.5px solid #dadce0; background: #fff; color: #3c4043; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .15s, background .15s;
}
.btn-google-sso:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.btn-google-sso:disabled { opacity: .5; cursor: not-allowed; }

/* ---- auth user chip in topbar ---- */
.auth-user { font-size: 12px; color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); border-radius: 999px; padding: 5px 12px; display: flex; align-items: center; gap: 7px; }
.auth-user img { width: 22px; height: 22px; border-radius: 50%; }

/* ---- settings sub-tabs ---- */
.settings-subtabs { display: flex; gap: 4px; padding: 0 0 20px; border-bottom: 2px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.stab { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.stab:hover { background: var(--bg); color: var(--text); }
.stab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.stabpanel { /* visible when not .hidden */ }

/* ---- user list ---- */
.user-list-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.user-list-toolbar input[type=search] { flex: 1; min-width: 180px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); }
.user-list-toolbar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); }
.user-list-wrap { overflow-x: auto; }
.user-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.user-table th { text-align: left; padding: 9px 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.user-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td { background: var(--bg); }
.user-row-inactive td { opacity: .6; }
.user-email { font-size: .8rem; color: var(--muted); word-break: break-all; }
.badge.viewer { background: #6d28d9; }

/* ---- permission matrix (editable) ---- */
.perm-matrix-wrap { overflow-x: auto; }
.perm-table { border-collapse: collapse; font-size: 13px; width: 100%; min-width: 560px; }
.perm-table th { padding: 9px 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-align: center; }
.perm-table th:first-child { text-align: left; width: 40%; }
.perm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.perm-table td:first-child { text-align: left; font-size: 13px; }
.perm-table tr:last-child td { border-bottom: none; }
.perm-table tr:hover td { background: var(--bg); }
.perm-table .y { color: var(--ok); font-weight: 700; }
.perm-table .n { color: var(--muted); }
.perm-cell { transition: background .12s; border-radius: 4px; }
.perm-cell[style*="cursor:pointer"]:hover.y { background: #d1fae5; }
.perm-cell[style*="cursor:pointer"]:hover.n { background: #f3f4f6; }

/* ---- master management ---- */
.search-input { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); }
.master-del-btn { background: none; border: 1px solid var(--err); }
.master-del-btn:hover { background: #fee2e2; }

/* ---- temp access date row ---- */
.row label input[type="date"] { font-size: 13px; }

/* ---- view-only banner ---- */
.view-only-banner { background: var(--amber-bg); color: var(--amber); border: 1px solid #fde68a; border-radius: 8px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.issued-to-banner { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; border-radius: 8px; padding: 9px 14px; margin-bottom: 14px; font-size: 12.5px; }
@media (prefers-color-scheme: dark) { .issued-to-banner { background: #0c2233; color: #7dd3fc; border-color: #1e4a6e; } }
.task-row.read-only { opacity: .92; }

/* ---- settings tab ---- */
.settings-head { margin-bottom: 20px; }
.settings-head h2 { margin: 0 0 4px; }
.settings-zone-wrap { margin-bottom: 16px; }
.settings-zone-label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 10px; }
.settings-zone-label select { font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.settings-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; }
.te-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.te-table th { text-align: left; padding: 10px 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg); }
.te-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.te-table tr:last-child td { border-bottom: none; }
.te-table tr:hover td { background: #f8fafc; }
.te-type { font-weight: 600; color: var(--text); white-space: nowrap; }
.te-desc { font-size: 12.5px; }
.te-col-h { width: 110px; }
.te-col-m { width: 70px; color: var(--muted); font-size: 12px; }
.te-input { width: 80px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: right; background: var(--bg); color: var(--text); }
.te-input:focus { outline: none; border-color: var(--accent); }
.te-val { font-weight: 600; color: var(--text); }
.settings-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: #f8fafc; }
.te-note { font-size: 12px; }

/* ---- mind tab ---- */
.mind-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.mind-head h2 { margin: 0 0 4px; }
.mind-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mind-saved-at { font-size: 11.5px; }
.mind-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; }
.mind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mind-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.mind-card-label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.mind-card-hint { font-size: 12px; color: var(--muted); }
.mind-ta { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--bg); resize: vertical; line-height: 1.5; margin-top: 4px; }
.mind-ta:focus { outline: none; border-color: var(--accent); background: #fff; }
.mind-ta::placeholder { color: #94a3b8; font-size: 12px; }

/* ---- knowledge tab ---- */
.knowledge-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.knowledge-head h2 { margin: 0 0 4px; }
.knowledge-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.kf-btn { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; transition: all .15s; }
.kf-btn:hover { border-color: var(--accent); color: var(--accent); }
.kf-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.knowledge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.book-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display: flex; gap: 14px; transition: box-shadow .15s; }
.book-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.1); }
.book-icon { font-size: 32px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.book-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.book-meta { display: flex; align-items: center; gap: 8px; }
.book-cat { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cat-sales  { background: #dbeafe; color: #1d4ed8; }
.cat-dist   { background: #dcfce7; color: #15803d; }
.cat-lead   { background: #fef3c7; color: #b45309; }
.cat-travel { background: #fce7f3; color: #be185d; }
.book-year { font-size: 11px; color: var(--muted); }
.book-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.book-author { font-size: 12px; color: var(--muted); }
.book-desc { font-size: 12.5px; color: var(--text); line-height: 1.5; flex: 1; }
.book-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 6px; display: inline-block; }
.book-link:hover { text-decoration: underline; }

/* ---- 7-day calendar modal ---- */
.cal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:300; display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; }
.cal-card { background:var(--card); border-radius:14px; width:100%; max-width:1260px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.35); margin:auto; }
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.cal-head h3 { margin:0 0 3px; font-size:18px; }
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-week-label { font-size:13px; font-weight:600; min-width:120px; text-align:center; color:var(--text); }
.cal-meta-line { font-size:12.5px; }

/* grid */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }

/* day column */
.cal-day { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; }
.cal-today { border-color:var(--accent); box-shadow:0 0 0 2px rgba(46,134,171,.18); }
.cal-weekend { background:#f8f9fb; }
.cal-day-head { padding:8px 10px 7px; background:var(--card); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.cal-day-name { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.cal-day-date { font-size:15px; font-weight:700; color:var(--text); }
.cal-today .cal-day-date { color:var(--accent); }
.cal-today-chip { display:inline-block; font-size:9px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--accent); color:#fff; margin-top:2px; width:fit-content; }

/* task blocks */
.cal-tasks { flex:1; padding:5px; display:flex; flex-direction:column; gap:4px; }
.cal-task { border-radius:7px; padding:6px 8px; border-left:3px solid var(--accent); background:#fff; font-size:11.5px; box-shadow:0 1px 3px rgba(0,0,0,.07); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.cal-task.High { border-left-color:var(--red); background:#fff8f8; }
.cal-task.Low { border-left-color:#cbd5e1; background:#f8fafc; }
.cal-task.blocked { opacity:.7; border-left-style:dashed; }
.cal-task-title { font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cal-task-account { font-size:10px; color:var(--accent-d); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-task-foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.cal-task-time { font-size:10px; color:var(--muted); font-weight:600; }
.cal-task-prio { font-size:9px; font-weight:700; padding:1px 5px; border-radius:999px; }
.cal-prio-high { background:var(--red-bg); color:var(--red); }
.cal-prio-normal { background:#e0f2fe; color:var(--accent-d); }
.cal-prio-low { background:#f1f5f9; color:var(--muted); }
.cal-empty { font-size:11px; color:#cbd5e1; text-align:center; padding:28px 0; letter-spacing:.03em; }

/* capacity footer */
.cal-foot { padding:5px 8px 7px; border-top:1px solid var(--line); background:var(--card); }
.cal-cap-track { height:5px; border-radius:3px; background:#e2e8f0; overflow:hidden; margin-bottom:3px; }
.cal-cap-fill { height:100%; border-radius:3px; background:#22c55e; transition:width .3s; }
.cal-cap-track.cap-warn .cal-cap-fill { background:#f97316; }
.cal-cap-track.cap-over .cal-cap-fill { background:#ef4444; }
.cal-cap-track.cap-empty .cal-cap-fill { background:#e2e8f0; }
.cal-cap-label { font-size:10px; font-weight:700; text-align:center; color:var(--muted); }
.cal-cap-label.cap-ok { color:#16a34a; }
.cal-cap-label.cap-warn { color:#ea580c; }
.cal-cap-label.cap-over { color:var(--red); }

/* unscheduled */
.cal-unsched { margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.cal-unsched-label { font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.cal-unsched-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cal-unsched-chip { font-size:11px; padding:3px 10px; border-radius:999px; background:#eef2f7; color:var(--navy-2); font-weight:500; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.cal-unsched-chip.High { background:var(--red-bg); color:var(--red); }

/* ---- execution guide & outcome improvements ---- */
.guide-label { display:flex; flex-direction:column; gap:4px; }
.field-hint { font-size:11px; color:var(--muted); font-weight:400; margin-left:6px; }
/* NR-03/RQ-20: mark required fields, and show validation per field so the
   entered data is never discarded to make room for an error. */
.field-req { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
             color:var(--red); background:var(--red-bg); border-radius:3px; padding:1px 5px; margin-left:6px; }
.field-error { font-size:11.5px; color:var(--red); font-weight:500; margin-top:4px; }
[data-invalid] { border-color:var(--red) !important; outline:none; box-shadow:0 0 0 2px var(--red-bg); }

/* execution guide in task row */
.execution-guide { margin:8px 0 4px; }
.guide-toggle {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--accent-d); background:#eef7fb; border:1px solid #cfe3ef; border-radius:6px;
  padding:4px 10px; cursor:pointer; transition:all .15s;
}
.guide-toggle:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.guide-toggle-arrow { font-size:9px; transition:transform .2s; }
.guide-toggle.open .guide-toggle-arrow { transform:rotate(90deg); }
.guide-body {
  display:none; margin-top:8px; padding:12px 14px; background:#f0f9ff;
  border:1px solid #bae6fd; border-radius:8px; font-size:12.5px; line-height:1.65;
  color:var(--navy-2); white-space:pre-wrap;
}
.guide-body.open { display:block; }

/* The meeting pack.

   Two tones, and the difference is the point. An account is an exact match on
   the client sheet and carries an owner's name — that is a claim somebody can
   act on, so it reads as solid. A brand is a name that also appears somewhere
   else and carries no owner at all, because whether it is the same company is
   what the meeting is for; it reads as a caution. Styled alike, a manager
   would walk in and say the stronger sentence. */
.pack-btn { margin-left:6px; }
.pack-body { white-space:normal; background:#fbfcff; border-color:#dde3f0; }
.pack-headline {
  font-size:13.5px; font-weight:700; color:var(--navy-2);
  border-left:3px solid #e8a33d; padding-left:10px; margin-bottom:10px;
}
.pack-stats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pack-stat {
  font-size:11.5px; background:#fff; border:1px solid #dde3f0; border-radius:6px;
  padding:4px 9px; color:var(--navy-2);
}
.pack-stat b { margin-right:5px; }
.pack-section { margin-bottom:12px; }
.pack-section-head {
  font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--navy-2); margin-bottom:5px;
}
.pack-section-head.strong { color:#1e2761; }
.pack-section-head.warm { color:#a9742a; }
.pack-section-head.muted-head { color:#6b7280; }
.pack-table { width:100%; border-collapse:collapse; font-size:12px; }
.pack-table td {
  padding:5px 8px; border-bottom:1px solid #eef1f7; vertical-align:top;
}
.pack-table tr:last-child td { border-bottom:none; }
.pack-table td:last-child { text-align:right; white-space:nowrap; }
.pack-agenda { margin:0; padding-left:20px; font-size:12px; line-height:1.55; }
.pack-agenda li { margin-bottom:6px; }
.pack-gaps { margin:0; padding-left:20px; font-size:11.5px; line-height:1.5; color:#6b7280; }
.pack-gaps li { margin-bottom:5px; }
.pack-actions { display:flex; gap:8px; margin-top:10px; }

/* task instruction text */
.task-instruction { margin:4px 0; font-size:13px; line-height:1.5; }

/* outcome display (read-only) */
.outcome-display { margin-top:4px; font-size:12px; color:var(--green); font-weight:600; }

/* outcome textarea + blocker stacked */
.outcome-wrap { display:flex; flex-direction:column; gap:6px; flex:1; }
.outcome-wrap textarea {
  width:100%; resize:vertical; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font-size:13px; font-family:inherit; line-height:1.5;
  color:var(--text); background:#fff; min-height:70px;
}
.outcome-wrap textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,134,171,.12); }
.outcome-wrap textarea::placeholder { color:#94a3b8; }

/* controls row — adapt to new layout */
.controls { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.controls select { flex-shrink:0; height:36px; }
.controls .outcome-wrap { min-width:260px; }
.controls .btn { flex-shrink:0; align-self:flex-end; }

/* ---- Notification bell (RQ-01) ---- */
.notif-wrap { position: relative; }
.notif-btn { background: none; border: none; cursor: pointer; font-size: 1.15rem; padding: 4px 6px; border-radius: 6px; color: var(--text); position: relative; line-height: 1; }
.notif-btn:hover { background: rgba(255,255,255,.15); }
.notif-badge { position: absolute; top: -2px; right: -4px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }
/* RQ-01: wider panel, opaque background, above sticky nav */
.notif-panel { position: fixed; top: 64px; right: 16px; width: 460px; max-height: 580px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22); z-index: 500; display: flex; flex-direction: column; overflow: hidden; }
.notif-panel-head { padding: 10px 14px; font-weight: 600; font-size: .88rem; border-bottom: 1px solid var(--border); color: var(--muted); letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.notif-mark-all { font-size: .75rem; font-weight: 600; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); padding: 3px 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.notif-mark-all:hover { background: var(--bg); color: var(--text); }
.notif-list { overflow-y: auto; flex: 1; }
/* RQ-01: clickable items with task-number badge */
.notif-item { padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-left: 3px solid var(--accent); }
.notif-item:hover { background: var(--bg); }
.notif-item-title { font-weight: 600; font-size: .88rem; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.notif-task-num { font-size: .72rem; font-weight: 700; background: #eef2f7; color: var(--muted); border-radius: 4px; padding: 1px 5px; font-family: monospace; }
.notif-item-body { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.notif-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.notif-item-time { font-size: .75rem; color: var(--muted); opacity: .7; }
.notif-item-user { font-size: .75rem; color: var(--muted); opacity: .8; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: .85rem; }
.notif-type-task_assigned .notif-item-title::before { content: "📋 "; }
.notif-type-task_reply .notif-item-title::before { content: "💬 "; }
.notif-type-task_blocker .notif-item-title::before { content: "⚠ "; }
.notif-type-reg_approved .notif-item-title::before { content: "✅ "; }
.notif-type-reg_rejected .notif-item-title::before { content: "❌ "; }
/* RQ-02: button loading state */
.btn[data-loading] { opacity: .65; cursor: not-allowed; pointer-events: none; }
.btn[data-loading]::after { content: " ⏳"; font-size: .85em; }

/* ---- Access requests admin panel ---- */
.access-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.access-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.access-card.pending { border-left: 3px solid #f59e0b; }
.access-card.approved { border-left: 3px solid #10b981; }
.access-card.rejected { border-left: 3px solid var(--muted); opacity: .5; }
.access-card.deactivated { border-left: 3px solid #ef4444; opacity: .55; }
.btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.access-info { flex: 1; min-width: 180px; }
.access-name { font-weight: 600; font-size: .95rem; }
.access-email { color: var(--muted); font-size: .82rem; }
.access-date { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.access-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.access-role-sel { font-size: .82rem; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.settings-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0 28px; }

/* ---- Audit Log ---- */
.audit-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.audit-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .83rem; }
.audit-item:last-child { border-bottom: none; }
.audit-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.audit-body { flex: 1; }
.audit-action { font-weight: 600; }
.audit-target { color: var(--muted); }
.audit-details { color: var(--muted); font-size: .78rem; }
.audit-time { font-size: .75rem; color: var(--muted); opacity: .7; white-space: nowrap; flex-shrink: 0; }
.audit-empty { padding: 20px; text-align: center; color: var(--muted); font-size: .85rem; }

/* ---- Exceptional access toggles ---- */
.access-perms { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: .78rem; color: var(--muted); }
.perm-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.perm-toggle input[type=checkbox] { cursor: pointer; accent-color: var(--primary); }

/* ---- Task reply / outcome display ---- */
.task-reply-box { margin-top:6px; background:#f0fdf4; border-left:3px solid var(--green); border-radius:0 6px 6px 0; padding:7px 10px; font-size:12.5px; color:#166534; line-height:1.45; }
.task-reply-who { font-weight:700; margin-right:4px; }
.task-blocker-box { margin-top:5px; background:#fff8f8; border-left:3px solid var(--red); border-radius:0 6px 6px 0; padding:6px 10px; font-size:12px; color:var(--red); font-weight:600; }

/* ---- Reports tab (RQ-23/24) ---- */
.rpt-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:12px; }
.rpt-role-select { padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); font-size:13px; }
/* RQ-23: filter bar */
.rpt-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; padding:10px 14px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.rpt-filters label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.rpt-filter-select, .rpt-filter-input { padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); font-size:12.5px; }
/* RQ-24: KPI tile clickable for drilldown, tooltip */
.rpt-kpi { cursor:pointer; }
.rpt-kpi:hover { box-shadow:0 4px 16px rgba(0,0,0,.12); transform:translateY(-1px); transition:all .15s; }
.rpt-kpi-tip { font-size:10px; color:var(--muted); margin-top:3px; line-height:1.3; display:none; }
.rpt-kpi:hover .rpt-kpi-tip { display:block; }
/* RQ-24: drilldown tasks panel under table */
.rpt-drilldown { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.rpt-drilldown-head { font-weight:700; font-size:14px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.rpt-drilldown-close { background:none; border:none; cursor:pointer; font-size:16px; color:var(--muted); padding:0 4px; }
/* RQ-24: self-performance section */
.rpt-self { background:color-mix(in srgb,var(--accent) 5%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:10px; padding:14px 18px; margin-bottom:20px; }
.rpt-self-head { font-weight:700; font-size:13px; color:var(--accent); margin-bottom:10px; }
.rpt-self-kpis { display:flex; gap:16px; flex-wrap:wrap; }
.rpt-self-kpi { text-align:center; }
.rpt-self-val { font-size:22px; font-weight:800; color:var(--navy); }
.rpt-self-label { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.rpt-scope { font-size:12px; line-height:1.5; margin:0 0 10px; }
.rpt-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; margin-bottom:24px; }
.rpt-kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.rpt-kpi-val { font-size:28px; font-weight:800; color:var(--navy); line-height:1; margin-bottom:4px; }
.rpt-kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.rpt-kpi-green .rpt-kpi-val { color:var(--green); }
.rpt-kpi-amber .rpt-kpi-val { color:#d97706; }
.rpt-kpi-red  .rpt-kpi-val { color:var(--red); }
.rpt-kpi-blue .rpt-kpi-val { color:var(--accent); }
.rpt-table-wrap { overflow-x:auto; }
.rpt-table { width:100%; border-collapse:collapse; font-size:13px; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.rpt-table thead tr { background:var(--navy); color:#fff; }
.rpt-table thead th { padding:10px 14px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.rpt-table tbody tr { border-bottom:1px solid var(--line); transition:background .1s; }
.rpt-table tbody tr:last-child { border-bottom:none; }
.rpt-table tbody tr:hover { background:#f8fafc; }
.rpt-table td { padding:10px 14px; vertical-align:middle; }
.rpt-name { min-width:140px; }
.rpt-person-name { font-weight:600; font-size:13px; margin-bottom:2px; }
.rpt-num { text-align:center; font-weight:700; font-size:14px; min-width:52px; }
.rpt-green { color:var(--green); }
.rpt-amber { color:#d97706; }
.rpt-red   { color:var(--red); }
.rpt-muted { color:var(--muted); }
.rpt-rate  { font-weight:800; font-size:15px; min-width:52px; text-align:center; }
.rpt-last  { font-size:12px; color:var(--muted); max-width:240px; }
.rpt-bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--line); min-width:100px; }
.rpt-bar-seg { min-width:4px; }
.rpt-seg-green { background:var(--green); }
.rpt-seg-amber { background:#f59e0b; }
.rpt-seg-red   { background:var(--red); }
@media (prefers-color-scheme:dark) {
  .rpt-table tbody tr:hover { background:#1e293b; }
  .rpt-kpi-val { color:#e2e8f0; }
  .rpt-kpi-green .rpt-kpi-val { color:#4ade80; }
  .rpt-kpi-amber .rpt-kpi-val { color:#fbbf24; }
  .rpt-kpi-red   .rpt-kpi-val { color:#f87171; }
  .rpt-kpi-blue  .rpt-kpi-val { color:#60a5fa; }
}

/* ── Phase 1: Task numbers, remarks thread, status row ─────────────────── */
.task-num {
  display:inline-block;
  font-family:'SF Mono',ui-monospace,monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  background:var(--navy);
  color:#fff;
  border-radius:4px;
  padding:1px 6px;
  margin-right:6px;
  vertical-align:middle;
}

/* Who moved a task, and when. Folded away by default: the thread above it is
   what people read, and this is what they come looking for afterwards. */
.status-history { margin:6px 0 2px; font-size:11.5px; }
.status-history > summary { cursor:pointer; color:var(--muted); font-weight:600;
                            list-style:none; padding:2px 0; }
.status-history > summary::-webkit-details-marker { display:none; }
.status-history > summary::before { content:"\25B8 "; display:inline-block;
                                    transition:transform .15s; }
.status-history[open] > summary::before { transform:rotate(90deg); }
.status-move { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
               padding:3px 0 3px 14px; color:var(--text); }
.sm-from { color:var(--muted); }
.sm-to { font-weight:700; }
.sm-who { color:var(--muted); }

.remarks-thread {
  margin:10px 0 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.remark-entry {
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--bg);
  border-left:3px solid var(--navy);
  border-radius:0 6px 6px 0;
  padding:6px 10px;
  font-size:12px;
}
.remark-entry.auto { border-left-color:var(--muted); opacity:.85; }
.remark-entry.legacy { border-left-color:#d97706; }
/* Inline header: who + timestamp on same line */
.remark-entry .remark-who {
  font-weight:700;
  color:var(--navy);
  font-size:11px;
}
.remark-entry .remark-ts {
  font-size:10px;
  color:var(--muted);
  float:right;
  margin-left:8px;
}
.remark-text {
  color:var(--text);
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
.remark-add {
  margin-top:8px;
}
.remark-add textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 10px;
  font-size:13px;
  font-family:inherit;
  resize:vertical;
  background:var(--card);
  color:var(--text);
  box-sizing:border-box;
}
.remark-add textarea:focus {
  outline:none;
  border-color:var(--navy);
}
.remark-add-btn {
  margin-top:6px;
}

.status-row {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.status-label {
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}

/* Status badge colours */
.status.Assigned   { background:#e0f2fe; color:#0369a1; }
.status.Acknowledged { background:#ede9fe; color:#6d28d9; }
.status.In-Progress { background:#dcfce7; color:#15803d; }
.status.Blocked    { background:#fee2e2; color:#b91c1c; }
.status.Completed  { background:#d1fae5; color:#065f46; }
.status.Withdrawn  { background:#f1f5f9; color:#64748b; }

@media (prefers-color-scheme:dark) {
  .task-num { background:#93c5fd; color:#0f172a; }
  .remark-entry { background:#1e293b; border-left-color:#60a5fa; }
  .remark-who { color:#93c5fd; }
  .remark-add textarea { background:#1e293b; border-color:#334155; }
  .status.Assigned   { background:#0c4a6e; color:#bae6fd; }
  .status.Acknowledged { background:#2e1065; color:#c4b5fd; }
  .status.In-Progress { background:#052e16; color:#86efac; }
  .status.Blocked    { background:#450a0a; color:#fca5a5; }
  .status.Completed  { background:#022c22; color:#6ee7b7; }
  .status.Withdrawn  { background:#1e293b; color:#94a3b8; }
}

/* ── RQ-21: Sub-tabs (My Tasks / Assigned by Me) ───────────────────────── */
.subtab-bar {
  display:flex;
  gap:4px;
  margin-bottom:12px;
  border-bottom:2px solid var(--line);
  padding-bottom:0;
}
.subtab-bar.hidden { display:none; }
.subtab {
  background:none;
  border:none;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  border-radius:0;
  transition:color .15s, border-color .15s;
}
.subtab:hover { color:var(--navy); }
.subtab.active { color:var(--navy); border-bottom-color:var(--navy); }
@media (prefers-color-scheme:dark) {
  .subtab.active { color:#93c5fd; border-bottom-color:#93c5fd; }
  .subtab:hover { color:#93c5fd; }
}

/* ── Phase 2: Branch checklist (RQ-09/10) ──────────────────────────────── */
.branch-checklist {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.branch-zone-group { display: flex; flex-direction: column; gap: 4px; }
.branch-zone-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.branch-zone-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.branch-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.branch-check-item:hover { background: var(--line); }
.branch-check-item input[type=checkbox] { margin: 0; cursor: pointer; }
.branch-code { font-weight: 700; font-size: 12px; color: var(--navy); }
.branch-name { color: var(--muted); font-size: 11px; }

/* Add User button */
.user-list-toolbar .btn-primary { margin-right: 4px; }

@media (prefers-color-scheme: dark) {
  .branch-checklist { background: #0f172a; border-color: #334155; }
  .branch-check-item:hover { background: #1e293b; }
  .branch-code { color: #93c5fd; }
}

/* ── RQ-16: Acting As chip ─────────────────────────────────────────────── */
.acting-as-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 200, 0, 0.25);
  color: #fde68a;
  border: 1px solid rgba(255, 200, 0, 0.4);
  white-space: nowrap;
}

/* ── RQ-19: Ignored tasks ──────────────────────────────────────────────── */
.btn-ignore {
  color: #b45309;
  border-color: #fde68a;
  background: #fffbeb;
}
.btn-ignore:hover { background: #b45309; color: #fff; border-color: #b45309; }

.ignore-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 100;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ignore-menu-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 4px 8px 6px;
}
.ignore-reason-btn {
  background: none;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.ignore-reason-btn:hover { background: var(--bg); }

.ignored-section {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
}
.ignored-section summary {
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.ignored-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ignored-entry {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.ignored-reason {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
}

@media (prefers-color-scheme: dark) {
  .ignore-menu { background: #1e293b; border-color: #334155; }
  .ignore-reason-btn:hover { background: #0f172a; }
  .ignored-entry { background: #1e293b; }
  .btn-ignore { background: #1c1400; border-color: #78350f; color: #fbbf24; }
}

/* RQ-20: Resend button (task already emailed via Gmail) */
.btn-resend { color: #6b21a8; border-color: #e9d5ff; background: #faf5ff; font-size: 11px; }
.btn-resend:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }
@media (prefers-color-scheme: dark) {
  .btn-resend { background: #1a0a2e; border-color: #581c87; color: #c4b5fd; }
  .btn-resend:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
}

/* ── Phase 4 additions ─────────────────────────────────────────────────── */

/* RQ-03: scroll-padding so anchored content clears sticky header+tabs */
html { scroll-padding-top: 120px; }

/* RQ-25: human-readable manager name in user table */
.user-manager-name { font-size:12px; color:var(--muted); }

/* RQ-26: audit log search toolbar */
.audit-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.audit-search { flex:1; min-width:180px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:13px; }
.audit-filter-sel { padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:12.5px; }

/* Dark-mode additions for Phase 4 */
@media (prefers-color-scheme: dark) {
  .tabs { background: var(--card); }
  .notif-task-num { background: #1e293b; color: #94a3b8; }
  .rpt-table tbody tr:hover { background:#1e293b; }
  .rpt-filters { background: var(--card); }
  .rpt-self { background: color-mix(in srgb, #3b82f6 8%, var(--card)); border-color: color-mix(in srgb, #3b82f6 25%, var(--line)); }
  .rpt-self-val { color: #e2e8f0; }
  .rpt-drilldown { background: var(--card); }
}
:root[data-theme="light"] .tabs { background: #fff; }
:root[data-theme="dark"] .tabs { background: var(--card); }

/* ============================================================
   Visit Reports Tab
   ============================================================ */
.visit-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1rem 1.5rem 1.5rem;
}
.visit-form h3 {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
}
.vr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.vr-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.vr-field.full {
  grid-column: 1 / -1;
}
.vr-field label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vr-field .req { color: #ef4444; }
.vr-input {
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  width: 100%;
  box-sizing: border-box;
}
.vr-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.vr-textarea {
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
.vr-textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.vr-tags-wrap { position: relative; }
.vr-tag-input { margin-bottom: .4rem; }
.vr-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.vr-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .8rem;
}
.vr-tag button { background: none; border: none; cursor: pointer; color: inherit; font-size: .85rem; padding: 0; line-height: 1; }

/* Action items table */
.vr-action-row {
  display: grid;
  grid-template-columns: 1fr .7fr .7fr auto;
  gap: .5rem;
  margin-bottom: .5rem;
  align-items: center;
}
.vr-action-row input { padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--text); font-size: .85rem; width: 100%; box-sizing: border-box; }
.vr-remove-btn { background: none; border: none; cursor: pointer; color: #ef4444; font-size: 1.1rem; padding: .2rem .4rem; border-radius: 4px; }
.vr-remove-btn:hover { background: color-mix(in srgb, #ef4444 12%, transparent); }

/* Star rating */
.vr-stars { display: flex; gap: .2rem; margin-bottom: .3rem; }
.star-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: var(--line); padding: 0;
  transition: color .15s;
}
.star-btn.active { color: #f59e0b; }
.vr-rating-label { font-size: .85rem; color: var(--muted); }

.vr-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* Report cards in the list */
.visit-list { padding: 0 1.5rem 2rem; }
.vr-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.vr-card-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.vr-card-header:hover { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.vr-card-title { font-weight: 600; font-size: .95rem; flex: 1; }
.vr-card-meta { font-size: .8rem; color: var(--muted); }
.vr-status {
  font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted);
}
.vr-status-submitted { border-color: #64748b; color: #64748b; background: color-mix(in srgb, #64748b 12%, transparent); }
.vr-status-under-review { border-color: #f59e0b; color: #b45309; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.vr-status-actioned { border-color: #3b82f6; color: #1d4ed8; background: color-mix(in srgb, #3b82f6 14%, transparent); }
.vr-status-closed { border-color: #22c55e; color: #15803d; background: color-mix(in srgb, #22c55e 14%, transparent); }
.vr-followup { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.vr-followup.overdue { color: #b91c1c; font-weight: 600; }
.vr-summary {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.vr-summary-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.vr-kpi-of { font-size: .8rem; font-weight: 400; color: var(--muted); }
.vr-uncovered {
  margin-top: .85rem; padding: .55rem .7rem; border-radius: 8px; font-size: .82rem;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.vr-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
  margin-bottom: 1rem;
}
.vr-filters label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
}
.vr-filters .vr-input { min-width: 8.5rem; }
.vr-filter-grow { flex: 1 1 12rem; }
.vr-filter-grow .vr-input { width: 100%; }
.vr-filters .vr-filter-check {
  flex-direction: row; align-items: center; gap: .4rem;
  text-transform: none; letter-spacing: 0; padding-bottom: .5rem;
}
.vr-filters .btn { margin-bottom: .1rem; }
.vr-pager {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 1rem 0 .5rem; font-size: .85rem;
}
.vr-pager .btn[disabled] { opacity: .45; cursor: default; }

@media (prefers-color-scheme: dark) {
  .vr-status-under-review { color: #fbbf24; }
  .vr-status-actioned { color: #93c5fd; }
  .vr-status-closed { color: #86efac; }
  .vr-status-submitted { color: #94a3b8; }
  .vr-followup.overdue { color: #fca5a5; }
}
.vr-rating-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .8rem; color: #f59e0b; font-weight: 600;
}
.vr-card-body { padding: 1.1rem; display: none; }
.vr-card-body.open { display: block; }
.vr-section { margin-bottom: 1rem; }
.vr-section-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem;
}
.vr-section-value { font-size: .9rem; white-space: pre-wrap; }
.vr-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.vr-pill {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .8rem;
}
.vr-action-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.vr-action-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .5rem; }
.vr-action-table td { padding: .35rem .5rem; border-top: 1px solid var(--line); }
.vr-stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.vr-stat { display: flex; flex-direction: column; gap: .15rem; }
.vr-stat-n { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-stat-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* RQ-22 — attachments on remarks, tasks and visit reports */
.attach-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; max-width: 100%;
}
.attach-name {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--blue);
  font: inherit; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-name:hover { text-decoration: underline; }
.attach-size { color: var(--muted); font-size: 11px; }
.attach-del {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 0 5px; border-radius: 999px;
}
.attach-del:hover { color: var(--err); background: rgba(0, 0, 0, .05); }
.attach-del:disabled { opacity: .5; cursor: default; }
.attach-block { margin-top: 8px; }
.attach-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.attach-pick {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--muted); border: 1px dashed var(--border);
  border-radius: 6px; padding: 4px 10px;
}
.attach-pick:hover { color: var(--blue); border-color: var(--blue); }
.attach-pick input[type="file"] { display: none; }
.attach-chosen { font-size: 12px; color: var(--muted); }
.remark-add-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.remark-add-actions .btn { margin-left: auto; }

/* RQ-14 — move a departed person's tasks to a live owner */
.move-preview { margin: 10px 0 4px; }
.move-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.move-preview-table th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 5px 10px 5px 0; white-space: nowrap; vertical-align: top;
}
.move-preview-table td { padding: 5px 0; }
.move-preview-table tr + tr { border-top: 1px solid var(--border); }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 10px 0; }
.checkline input { margin: 0; }

/* RQ-14 — duplicate accounts */
.dupes-panel {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin: 10px 0 14px; background: var(--surface);
}
.dupes-head {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 10px;
}
.dupe-group + .dupe-group { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.dupe-name { font-weight: 600; margin-bottom: 4px; }

/* Branch performance rollup, above the per-person table. Collapsible because a
   large deployment has forty-odd branches and the person table is what most
   people came for. */
.rpt-branches { margin-bottom:18px; }
.rpt-branches > summary {
  cursor:pointer; font-weight:700; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); padding:6px 2px; user-select:none;
}
.rpt-branches > summary:hover { color:var(--navy); }
.rpt-branches > table { margin-top:8px; }

/* Extra-access toggles in the Edit User modal. Same shape as the branch
   checklist above it, so the two read as one kind of control. */
.perm-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 10px;
  max-height: 150px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft, transparent);
}
.perm-checklist label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.perm-checklist .perm-held {
  opacity: .55;
  cursor: default;
}


/* The CCO viewing the console as one other person. Read-only, short-lived and
   impossible to be in by accident: the bar sits above the tabs, across the
   full width, and does not scroll away with the content. */
.view-as-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px;
  background: #fff4e5; border-bottom: 1px solid #f0b775;
  color: #7a4a06; font-size: 13px; font-weight: 600;
  position: sticky; top: 0; z-index: 40;
}
.view-as-bar .btn { margin-left: auto; }

/* Calendar reschedule editor */
.cal-editor { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  margin-top:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:9px; background:#f8fafc; }
.cal-editor-title { font-weight:600; font-size:13px; flex:1 1 220px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-editor-field { display:flex; flex-direction:column; gap:3px;
  font-size:11px; color:var(--muted); font-weight:600; }
.cal-editor-field input { font-size:13px; padding:5px 7px;
  border:1px solid var(--line); border-radius:6px; }
.cal-editor-actions { display:flex; gap:6px; }
.cal-editor-err { flex-basis:100%; color:var(--red); font-size:12px; }
.cal-editor-err:empty { display:none; }
.cal-task-move { display:flex; gap:3px; }
.cal-task-move button { border:1px solid var(--line); background:#fff;
  border-radius:5px; font-size:10px; line-height:1; padding:2px 5px;
  cursor:pointer; color:var(--muted); }
.cal-task-move button:hover:not(:disabled) { color:var(--accent-d);
  border-color:var(--accent); }
.cal-task-move button:disabled { opacity:.35; cursor:default; }
.cal-task.cal-task-editing { outline:2px solid var(--accent); }

/* Analysis coverage — how much of the committed analysis the drafts act on */
.coverage { border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:9px; padding:10px 12px; margin-bottom:12px; background:var(--card);
  font-size:12.5px; }
.coverage.cov-thin { border-left-color:var(--red); }
.coverage-head { font-weight:600; }
.coverage-sub { color:var(--muted); margin-top:2px; }
.coverage details { margin-top:7px; }
.coverage summary { cursor:pointer; color:var(--accent-d); font-weight:600; }
.coverage ul { margin:6px 0 0; padding-left:18px; max-height:190px;
  overflow-y:auto; }
.coverage li { margin-bottom:2px; line-height:1.45; }
.coverage .cov-branch { font-weight:700; }
.coverage .cov-sev { color:var(--muted); }

/* Permission matrix — staged edits (§5.3) */
.perm-bar { display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:0 0 10px; padding:9px 12px;
  border:1px solid var(--accent); border-radius:9px; background:#f2f8fd; }
.perm-count { font-weight:600; font-size:13px; color:var(--accent-d); }
.perm-bar-actions { display:flex; gap:8px; }
.perm-group-head td { background:var(--bg); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:9px 12px !important; }
/* A staged cell has to be legible against both the ✓ and the — states, so it
   is marked by outline and weight rather than by colour alone. */
.perm-cell.perm-staged { outline:2px solid var(--accent); outline-offset:-2px;
  font-weight:700; }
.perm-cell.perm-staged::after { content:"•"; color:var(--accent-d);
  font-size:10px; vertical-align:super; margin-left:2px; }

/* Role Master — Phase 1 (M-03) */
.phase-chip { font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent-d); background:#eaf4fb;
  border:1px solid var(--accent); border-radius:999px; padding:2px 8px;
  vertical-align:middle; margin-left:6px; }
.role-inactive td { opacity:.55; }
.role-order { display:flex; gap:3px; }
.role-order button { border:1px solid var(--line); background:#fff; border-radius:5px;
  font-size:11px; line-height:1; padding:3px 6px; cursor:pointer; color:var(--muted); }
.role-order button:hover:not(:disabled) { color:var(--accent-d); border-color:var(--accent); }
.role-order button:disabled { opacity:.3; cursor:default; }

/* Department Master (M-02) */
.dept-structure-tabs { display:flex; gap:6px; margin:10px 0 4px; }
.dept-structure-tabs button { border:1px solid var(--line); background:#fff;
  border-radius:6px; padding:6px 14px; font-size:13px; cursor:pointer;
  color:var(--muted); font-weight:600; }
.dept-structure-tabs button.active { color:var(--accent-d);
  border-color:var(--accent); background:#eaf4fb; }
.dept-tree { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dept-row { display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--line); font-size:13px; }
.dept-row:last-child { border-bottom:none; }
.dept-row.dept-l1 { background:#fbfcfd; font-weight:600; }
.dept-row.dept-l2 { padding-left:34px; }
.dept-row.dept-l3 { padding-left:58px; }
.dept-row.dept-off .dept-name { opacity:.55; }
.dept-twisty { border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:11px; width:16px; padding:0; line-height:1; }
.dept-twisty[disabled] { visibility:hidden; }
.dept-name { flex:1; }
.dept-meta { color:var(--muted); font-size:11px; white-space:nowrap; }
.dept-actions { display:flex; gap:4px; white-space:nowrap; }

/* Task to Anyone (P-05) */
.dir-card { border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  margin-bottom:6px; cursor:pointer; }
.dir-card:hover { border-color:var(--accent); }
.dir-card.dir-chosen { border-color:var(--accent); background:#eaf4fb; }
.dir-name { font-weight:600; font-size:13px; }
.dir-meta { color:var(--muted); font-size:11px; }

/* U-01 five-step user form */
.ustepper { display:flex; gap:4px; list-style:none; padding:0; margin:0 0 14px;
  flex-wrap:wrap; }
.ustepper li { font-size:11px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.ustepper li.ustep-now { color:var(--accent-d); border-color:var(--accent);
  background:#eaf4fb; }
.ustepper li.ustep-done { color:var(--accent-d); }
.urev { border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-size:12px; }
.urev div { padding:2px 0; }
.urev b { color:var(--muted); font-weight:600; display:inline-block; min-width:150px; }

/* Business Tours (P-09) */
.tour-card { border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  margin-bottom:8px; }
.tour-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tour-title { font-weight:600; }
.tour-meta { color:var(--muted); font-size:11px; }
.tour-life { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.tour-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.tour-row input, .tour-row select { flex:1; min-width:0; }
.tour-row .btn { flex:none; }
.ap-linked { color:var(--accent-d); font-size:11px; white-space:nowrap; }
/* The "what is late" panel. It sits above the filters because it is a call to
   action, not a slice of the data. */
.tour-rem-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 0 6px; }

/* §9.4's calendar. Seven columns whatever the width, because a month that
   reflows to four columns stops being a month. */
.tour-cal-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 0 6px; }
.tour-cal-key { display:flex; align-items:center; gap:4px; font-size:11px;
  color:var(--muted); }
.tour-cal-key i { width:10px; height:10px; border-radius:2px; display:inline-block;
  border:1px solid var(--line); margin-left:6px; }
.tour-cal-key i.tour { background:var(--amber-bg); border-color:var(--amber); }
.tour-cal-key i.base { background:var(--green-bg); border-color:var(--green); }
.tour-cal-key i.weekend { background:var(--bg); }
.tour-cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:3px; }
.tour-cal-dow { font-size:11px; color:var(--muted); text-align:center;
  padding-bottom:2px; }
.tour-cal-cell { border:1px solid var(--line); border-radius:4px; padding:4px;
  min-height:46px; display:flex; flex-direction:column; gap:2px;
  background:var(--card); overflow:hidden; }
.tour-cal-cell.empty { border:none; background:none; }
.tour-cal-cell.base { background:var(--green-bg); border-color:var(--green); }
.tour-cal-cell.tour { background:var(--amber-bg); border-color:var(--amber); }
.tour-cal-cell.weekend { background:var(--bg); color:var(--muted); }
.tour-cal-num { font-size:11px; font-weight:600; }
.tour-cal-loc { font-size:10px; line-height:1.2; word-break:break-word; }

/* §9.7's drill. The team table is a picker, so its rows have to look
   clickable and the open one has to stay obvious while you read below it. */
.tour-team-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 0 6px; }
.tour-team-row { cursor:pointer; }
.tour-team-row:hover { background:var(--bg); }
.tour-team-row.is-open { background:var(--green-bg); }
.tour-detail { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.tour-sec { margin-bottom:8px; }
.tour-sec-head { font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }

/* The pre-visit brief. Severity reads from the stripe as well as the words,
   because this is scanned before a trip rather than read. */
.tour-brief { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.brief-row { display:flex; gap:10px; padding:7px 0; align-items:flex-start;
  border-bottom:1px solid var(--line); }
.brief-row:last-child { border-bottom:0; }
.brief-tag { flex:none; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:2px 7px; border-radius:2px; margin-top:2px;
  min-width:62px; text-align:center; }
.brief-row.blocked .brief-tag { background:var(--red-bg); color:var(--red); }
.brief-row.attention .brief-tag { background:var(--amber-bg); color:var(--amber); }
.brief-row.info .brief-tag { background:var(--bg); color:var(--muted); }
.brief-title { font-weight:600; font-size:13px; }
.brief-detail { font-size:12px; color:var(--muted); line-height:1.4; }

/* The named accounts under a brief row. A list rather than a paragraph because
   every line is a separate thing to do — the reader is picking four of them to
   act on, not reading prose. Monospaced figures keep the amounts in a column
   so two accounts can be compared down the page rather than word by word. */
.brief-lines { margin:5px 0 3px; padding-left:16px; list-style:disc; }
.brief-lines li { font-size:12px; color:var(--text); line-height:1.5;
  margin-bottom:2px; font-variant-numeric:tabular-nums; }

/* The visit agenda. Read before it is issued, so the instruction is shown in
   full rather than clipped — a confirm that hides what it is confirming is
   only a second click. The day is the left rail because the one question
   asked of a week's plan is when each thing happens. */
.tour-agenda { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.agenda-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin-bottom:6px; }
.agenda-row { display:flex; gap:10px; padding:7px 0; align-items:flex-start; }
/* Separated on the top edge rather than the bottom: the foot sits after the
   last row, so a :last-of-type rule matches the foot's element type and never
   the row it was written for. */
.agenda-row + .agenda-row { border-top:1px solid var(--line); }
.agenda-day { flex:none; min-width:82px; font-size:11px; font-weight:600;
  color:var(--muted); font-variant-numeric:tabular-nums; margin-top:2px; }
.agenda-row.high .agenda-day { color:var(--red); }
.agenda-title { font-weight:600; font-size:13px; }
.agenda-instruction { font-size:12px; color:var(--text); line-height:1.45; }
.agenda-outcome { font-size:12px; color:var(--muted); line-height:1.4; }
.agenda-foot { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* Knowledge — the role documents and processes.

   Coverage leads, because a role with no document is the one whose people get
   generic work, and that has to be visible before anything else on the page. */
.kn-head { display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.kn-head p { max-width:62ch; }
.kn-coverage { border:1px solid var(--line); border-radius:6px; padding:14px 16px;
  margin-bottom:18px; background:var(--card); }
.kn-cov-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin-bottom:10px; }
.kn-cov-grid { display:flex; gap:8px; flex-wrap:wrap; }
.kn-cov { display:flex; flex-direction:column; gap:2px; padding:7px 11px;
  border-radius:4px; border:1px solid var(--line); min-width:112px; }
.kn-cov.ok { border-color:var(--green); background:var(--green-bg); }
.kn-cov.gap { border-color:var(--red); background:var(--red-bg); }
/* Covered on some lines and not others — neither green nor red is true. */
.kn-cov.part { border-color:var(--amber); background:var(--amber-bg); }
.kn-cov-line { font-size:10px; color:var(--amber); }
.kn-cov-role { font-size:12px; font-weight:600; }
.kn-cov-n { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }

.kn-list { display:flex; flex-direction:column; gap:10px; }
.kn-doc { border:1px solid var(--line); border-radius:6px; padding:13px 15px;
  background:var(--card); display:grid;
  grid-template-columns:1fr auto; gap:10px 14px; align-items:start; }
.kn-doc-title { font-weight:600; font-size:14px; }
.kn-doc-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin-top:5px; font-size:11px; }
.kn-tag { font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:2px; border:1px solid var(--line);
  color:var(--muted); }
.kn-tag.role_jd { border-color:var(--accent); color:var(--accent); }
.kn-tag.role { background:var(--bg); }
.kn-doc-actions { display:flex; gap:6px; }
.kn-doc-body { grid-column:1 / -1; white-space:pre-wrap; font-size:12.5px;
  line-height:1.5; max-height:460px; overflow-y:auto; border-top:1px solid var(--line);
  padding-top:11px; margin-top:3px; }

.kn-editor { border:1px solid var(--accent); border-radius:6px; padding:16px;
  margin-top:18px; background:var(--card); }
.kn-editor-head { display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.kn-editor-actions { display:flex; gap:8px; }
.kn-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; margin-bottom:14px; }
.kn-f { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.kn-f > span { font-weight:600; color:var(--muted); }
.kn-f-wide { grid-column:1 / -1; }
.kn-f input, .kn-f select { padding:7px 9px; border:1px solid var(--line);
  border-radius:4px; font:inherit; background:var(--card); color:var(--text); }
.kn-chips { display:flex; gap:6px; flex-wrap:wrap; }
.kn-chip { font-size:11px; padding:4px 10px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--muted); }
.kn-chip.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.kn-body { width:100%; padding:11px; border:1px solid var(--line); border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  line-height:1.5; background:var(--card); color:var(--text); resize:vertical; }
@media (max-width:620px){ .kn-doc { grid-template-columns:1fr; } }

/* Branch meeting room.

   The link is styled as a link and nothing else on the card is, because it is
   the one thing on a minute somebody is meant to click. meet_links refuses
   anything that is not meet.google.com before it is stored, so what renders
   here has already been checked — the styling is not the guard. */
.mm-room { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mm-room-link {
  font-size:12.5px; font-weight:600; color:var(--accent-d);
  background:#eef7fb; border:1px solid #cfe3ef; border-radius:6px;
  padding:5px 10px; text-decoration:none; word-break:break-all;
}
.mm-room-link:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.mm-invite-result { margin-top:6px; font-size:11.5px; }
.mm-invite-ok { color:#2c5f2d; font-weight:700; margin-right:6px; }
.mm-standing {
  display:flex; align-items:center; gap:6px; margin-top:6px;
  font-size:11.5px; color:#6b7280; font-weight:500;
}
.mm-standing input { margin:0; }

/* The one delivery state with a consequence for the assignee, said in words
   rather than left in a tooltip. */
.deliv-warn {
  margin-top: 6px; font-size: 12px; line-height: 1.45;
  color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 6px 9px;
}
@media (prefers-color-scheme: dark) {
  .deliv-warn { color: #fcd34d; background: #2a2011; border-color: #5b451a; }
}
:root[data-theme="dark"] .deliv-warn {
  color: #fcd34d; background: #2a2011; border-color: #5b451a;
}

/* Functional Hierarchy Configuration (§3.5) and the branch-scoped functional
   mapping on step 4 of the user form (§2.2.1). Both are repeatable rows, so
   they share the row furniture. */
.fh-levels, #fhMapRows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.fh-row { display: flex; align-items: flex-start; gap: 6px; }
.fh-row input[type=text], .fh-row select { flex: 1; min-width: 0; }
.fh-row-ord { width: 26px; text-align: center; color: var(--muted); font-size: 12px; padding-top: 9px; }
.fh-row-btn { background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 8px 9px; }
.fh-row-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.fh-row-btn:disabled { opacity: .35; cursor: default; }
.fh-row-btn.danger:hover { color: var(--red); border-color: var(--red); }
/* The mapping row stacks: a manager select above the branches it covers. */
.fh-map-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.fh-map-row-top { display: flex; align-items: center; gap: 6px; }
.fh-map-row-top select { flex: 1; min-width: 0; }
.fh-map-branches { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.fh-map-branches label { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }
.fh-map-empty { color: var(--amber); font-size: 11.5px; font-weight: 500; margin-top: 6px; }
.fh-map-head { margin-bottom: 14px; }
.fh-levels-cell { color: var(--muted); font-size: 12px; }

/* A day below the per-day target: present, but not yet carrying what the day
   should carry. Distinct from empty (nothing at all) and from over (past the
   eight-hour day, where something has to move). */
.wk-day.cap-warn .wk-day-fill { background: #f97316; }
.wk-day.cap-warn .wk-day-name { color: #7c2d12; }
.dt-row { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.dt-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dt-controls input { width: 90px; }