:root {
  --ink: #1b1c3c;
  --ink-soft: #5c5e73;
  --accent: #fae31f;
  --accent-strong: #e3ca00;
  --paper: #f7f8fa;
  --surface: #ffffff;
  --line: #e3e5e9;
  --line-strong: #cfd2d9;
  --success: #12805c;
  --warning: #b76b08;
  --danger: #bb3f4b;
  --info: #3c6ba8;
  --sidebar: 228px;
  --radius: 7px;
  --shadow: 0 18px 48px rgba(27, 28, 60, 0.12);
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

/* Internal test release */
.test-release-label { margin: 10px 8px 16px; padding: 5px 8px; border: 1px solid rgba(250,227,31,.45); color: var(--accent); font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
.auth-link-button { min-height: 42px; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
.auth-link-button:disabled { cursor: wait; opacity: .55; }
.users-invite-section { padding: 0 0 28px; border-bottom: 1px solid var(--line); }
.users-invite-form { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(160px, .8fr) minmax(280px, 1.4fr) auto auto; gap: 12px; align-items: end; }
.users-invite-form > label > span, .users-invite-form legend, .feedback-form label > span { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.users-invite-form input[type="email"], .users-invite-form select, .feedback-form select, .feedback-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; }
.users-invite-form input[type="email"], .users-invite-form select, .feedback-form select { height: 40px; padding: 0 10px; }
.users-invite-form fieldset { display: flex; min-height: 40px; margin: 0; padding: 8px 10px; gap: 12px; border: 1px solid var(--line-strong); border-radius: 5px; }
.users-invite-form fieldset label, .users-import-check { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.feedback-trigger { position: fixed; right: 22px; bottom: 22px; z-index: 45; min-height: 42px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 6px; background: var(--accent); color: var(--ink); font-weight: 800; box-shadow: 0 10px 26px rgba(27,28,60,.2); cursor: pointer; }
.feedback-modal[hidden] { display: none; }
.activity-detail-modal[hidden] { display: none; }
.activity-detail-modal { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 20px; }
.activity-detail-backdrop { position: absolute; inset: 0; border: 0; background: rgba(27,28,60,.62); cursor: default; }
.activity-detail-dialog { position: relative; z-index: 1; width: min(920px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 30px; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.activity-detail-dialog h2 { margin: 3px 42px 6px 0; font-size: 25px; }
.activity-detail-scope { margin: 0 0 22px; color: var(--ink-soft); }
.activity-detail-table { max-height: min(58vh, 520px); overflow: auto; }
.activity-detail-table table { min-width: 680px; }
.activity-detail-table th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--paper); }
.activity-sort-button { width: 100%; min-height: 42px; padding: 10px 12px; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 9px; font-weight: 800; text-align: left; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.activity-sort-button:hover,
.activity-sort-button:focus-visible { background: rgba(250,227,31,.16); color: var(--ink); }
.activity-sort-button span { margin-left: 3px; color: var(--info); }
.activity-detail-trigger { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; line-height: inherit; cursor: pointer; }
.activity-detail-trigger:hover { color: var(--info); }
.activity-detail-trigger:focus-visible { outline: 3px solid rgba(255,163,1,.45); outline-offset: 3px; border-radius: 2px; }
.modal-open { overflow: hidden; }
.feedback-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.feedback-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(27,28,60,.62); cursor: default; }
.feedback-dialog { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.feedback-dialog h2 { margin: 3px 0 20px; font-size: 24px; }
.feedback-form { display: grid; gap: 16px; }
.feedback-form textarea { min-height: 132px; padding: 10px; resize: vertical; line-height: 1.5; }
.feedback-form label small { display: block; margin-top: 4px; color: var(--ink-soft); text-align: right; }
.feedback-privacy { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.feedback-actions { display: flex; justify-content: flex-end; gap: 9px; }
.feedback-summary { display: grid; grid-template-columns: repeat(6, minmax(110px, 180px)); border-block: 1px solid var(--line); }
.feedback-summary div { padding: 16px 18px; border-left: 1px solid var(--line); }
.feedback-summary div:first-child { border-left: 0; padding-left: 0; }
.feedback-summary strong, .feedback-summary span { display: block; }
.feedback-summary strong { font-size: 26px; }.feedback-summary span { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }
.feedback-table-wrap { margin-top: 18px; overflow-x: auto; }.feedback-table { min-width: 1240px; }.feedback-table td { vertical-align: top; transition: background-color 140ms ease; }.feedback-message { min-width: 320px; white-space: pre-wrap; line-height: 1.45; }
.feedback-table select { height: 34px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); }
.feedback-note-cell { min-width: 280px; }.feedback-note-cell textarea { display: block; width: 100%; min-height: 76px; padding: 8px 9px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; line-height: 1.4; }.feedback-note-cell small { display: block; min-height: 15px; margin-top: 4px; color: var(--success); font-size: 9px; }.feedback-note-cell small.error { color: var(--danger); }
.feedback-row-closed > td { background: rgba(48, 143, 83, .1); }.feedback-row-rejected > td { background: rgba(82, 82, 94, .06); color: var(--ink-soft); }
.feedback-kind { display: inline-flex; padding: 4px 7px; border-radius: 4px; background: rgba(60,107,168,.1); color: var(--info); font-size: 10px; font-weight: 750; }.feedback-kind.bug { color: var(--danger); background: rgba(187,63,75,.1); }.feedback-kind.question { color: var(--warning); background: rgba(183,107,8,.1); }
body.feedback-open { overflow: hidden; }

@media (max-width: 1100px) { .test-release-label { display: none; }.users-invite-form { grid-template-columns: 1fr 1fr; }.users-invite-form fieldset { grid-column: 1 / -1; } }
@media (max-width: 590px) { .test-release-label { display: none; }.users-invite-form { grid-template-columns: 1fr; }.users-invite-form fieldset { grid-column: auto; flex-wrap: wrap; }.feedback-trigger { right: 14px; bottom: 78px; }.feedback-dialog { padding: 22px 18px; }.feedback-summary { grid-template-columns: repeat(2, 1fr); }.feedback-summary div:nth-child(odd):not(:first-child) { border-left: 0; }.feedback-summary div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 590px) { .activity-detail-modal { padding: 10px; }.activity-detail-dialog { max-height: calc(100vh - 20px); padding: 24px 16px; }.activity-detail-dialog h2 { font-size: 22px; } }

/* Admin user-to-Umanga identity linking */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.users-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.users-refresh:disabled,
.users-row-actions button:disabled {
  cursor: wait;
  opacity: .5;
}

.users-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 190px)) minmax(240px, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.users-summary > div,
.users-summary > p {
  min-width: 0;
  min-height: 78px;
  margin: 0;
  padding: 17px 20px;
  border-left: 1px solid var(--line);
}

.users-summary > div:first-child { border-left: 0; padding-left: 0; }
.users-summary strong { display: block; font-size: 27px; line-height: 1; }
.users-summary span { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 10px; }
.users-summary > p { display: flex; align-items: center; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }

.users-access-section { padding-top: 28px; }
.users-table-wrap { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); }
.users-table th { padding: 12px 14px; background: var(--paper); }
.users-table td { min-width: 135px; height: 74px; padding: 11px 14px; }
.users-table td:first-child { min-width: 245px; }
.users-table td:nth-child(4) { width: 38%; min-width: 300px; }
.users-table td > strong,
.users-table td > small { display: block; }
.users-table td > small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; line-height: 1.35; }

.users-link-state {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
}

.users-link-state.linked { color: var(--success); background: rgba(18, 128, 92, .1); }
.users-link-state.unlinked { color: var(--warning); background: rgba(183, 107, 8, .1); }
.users-select-label { display: block; }
.users-select-label select {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
}

.users-select-label select:focus { outline: 3px solid rgba(250, 227, 31, .4); border-color: var(--ink); }
.users-suggestion { color: var(--info) !important; }
.users-match-warning { color: var(--warning) !important; }
.users-row-actions { display: flex; gap: 6px; }
.users-row-actions .icon-button { width: 34px; height: 34px; font-size: 15px; }
.users-row-actions .icon-button:hover { transform: none; }
.users-row-actions .icon-button.danger { color: var(--danger); }
.users-row-actions .icon-button:disabled { cursor: default; }

@media (max-width: 980px) {
  .users-summary { grid-template-columns: repeat(3, 1fr); }
  .users-summary > p { grid-column: 1 / -1; min-height: 52px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .users-table-wrap { overflow-x: auto; }
  .users-table { min-width: 920px; }
}

@media (max-width: 590px) {
  .users-view .topbar { align-items: flex-start; }
  .users-refresh { min-height: 38px; }
  .users-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .users-summary > div { min-height: 72px; padding: 14px 9px; }
  .users-summary > div:first-child { padding-left: 0; }
  .users-summary strong { font-size: 23px; }
  .users-summary span { font-size: 8px; }
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
strong, td, th, .metric-cell { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid rgba(250, 227, 31, 0.55); outline-offset: 2px; }

.auth-pending { overflow: hidden; }
.auth-gate { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); background: var(--surface); }
.auth-brand { padding: clamp(38px, 6vw, 86px); display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: white; }
.auth-brand img { width: min(210px, 70%); height: auto; }
.auth-brand p { margin: 0 0 8px; color: var(--accent); font-size: 30px; font-weight: 750; }
.auth-brand span { color: rgba(255,255,255,.68); font-size: 13px; }
.auth-panel { display: grid; align-items: center; padding: 48px clamp(34px, 8vw, 120px); }
.auth-form-wrap { width: min(430px, 100%); }
.auth-intro { margin: 14px 0 30px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.auth-field input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: white; color: var(--ink); font: inherit; }
.auth-field input:focus { outline: 3px solid rgba(250, 227, 31, .4); border-color: var(--ink); }
.auth-submit { height: 44px; border: 1px solid var(--accent-strong); border-radius: 5px; background: var(--accent); color: var(--ink); font-weight: 750; cursor: pointer; }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.auth-link { justify-self: start; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font-size: 11px; text-decoration: underline; cursor: pointer; }
.auth-status { min-height: 20px; margin: 18px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.auth-status.error { color: var(--danger); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--ink); padding: 24px 14px 16px; color: white; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; height: 48px; padding: 0 10px; margin-bottom: 26px; }
.brand img { width: 108px; height: auto; display: block; }
.nav-list { display: grid; gap: 4px; }
.nav-item { min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 12px; color: rgba(255,255,255,.7); text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 600; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav-item.active { color: var(--ink); background: var(--accent); }
.nav-icon { width: 20px; text-align: center; font-size: 18px; line-height: 1; }
.sidebar-spacer { flex: 1; }
.profile { width: 100%; min-height: 58px; margin-top: 14px; padding: 8px; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: transparent; color: white; display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 700; }
.profile-copy { display: grid; gap: 1px; }
.profile-copy { min-width: 0; }
.profile-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: rgba(255,255,255,.55); font-size: 10px; }

.workspace { min-width: 0; padding: 30px clamp(24px, 3.5vw, 54px) 64px; }
.view { display: none; animation: enter .32s ease both; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--ink-soft); font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; }
h2 { margin: 0; font-size: 19px; line-height: 1.2; }
h3 { font-size: 14px; }
.freshness { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; color: var(--ink-soft); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(18,128,92,.1); }
.freshness.loading .status-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(183,107,8,.1); }
.freshness.idle .status-dot { background: #8a8d98; box-shadow: 0 0 0 4px rgba(138,141,152,.1); }
.freshness.error { color: var(--danger); }
.freshness.error .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(191,58,70,.1); }

.filterbar { min-height: 66px; display: flex; align-items: end; gap: 14px; padding: 12px 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.segmented { display: flex; padding: 3px; background: #eceef2; border-radius: 6px; align-self: end; }
.segmented button { height: 32px; padding: 0 13px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 600; cursor: pointer; }
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 5px rgba(27,28,60,.1); }
.field { min-width: 150px; display: grid; gap: 4px; color: var(--ink-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.field select { height: 38px; padding: 0 34px 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.multi-select { position: relative; min-width: 170px; height: 38px; text-transform: none; letter-spacing: 0; }
.multi-select summary { height: 38px; display: flex; align-items: center; padding: 0 34px 0 11px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; list-style: none; }
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select summary::after { content: "⌄"; position: absolute; right: 12px; color: var(--ink-soft); }
.multi-select[open] summary { border-color: var(--ink); }
.multi-select-menu { position: absolute; z-index: 16; top: 42px; left: 0; width: min(310px, 78vw); max-height: 300px; overflow-y: auto; padding: 7px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); box-shadow: var(--shadow); }
.multi-select-menu label { min-height: 34px; display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 4px; color: var(--ink); font-size: 11px; font-weight: 600; cursor: pointer; }
.multi-select-menu label:hover { background: var(--paper); }
.multi-select-menu input { width: 15px; height: 15px; accent-color: var(--ink); }
.multi-select.disabled { pointer-events: none; opacity: .55; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.icon-button:hover { transform: rotate(-12deg); border-color: var(--ink); }

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px 0; border-bottom: 1px solid var(--line); }
.kpi { min-width: 0; padding: 2px 22px; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi p { margin: 0 0 8px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.kpi strong { display: block; font-size: clamp(28px, 3.1vw, 42px); line-height: 1; }
.kpi span { display: block; margin-top: 8px; color: #858797; font-size: 10px; }
.metric-applications strong { color: var(--info); }
.bm-loading { padding: 22px 0 6px; display: grid; gap: 10px; }
#bmView[aria-busy="true"] > :not(.topbar):not(.filterbar):not(.bm-loading),
#managementView[aria-busy="true"] .management-panel,
#marketingView[aria-busy="true"] .marketing-panel { display: none; }
.weekly-briefing, .record-section, .milestone-section { padding: 28px 0; border-bottom: 1px solid var(--line); }
.briefing-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.briefing-item { min-height: 92px; padding: 17px 18px; border-left: 4px solid var(--success); background: var(--surface); }
.briefing-item.attention { border-left-color: var(--warning); }
.briefing-item.neutral { border-left-color: var(--line); }
.briefing-item span, .record-item span { color: var(--ink-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.briefing-item strong { display: block; margin-top: 9px; font-size: 14px; line-height: 1.45; }
.briefing-numbers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--surface); }
.briefing-numbers div { min-width: 0; padding: 17px 12px; border-left: 1px solid var(--line); }
.briefing-numbers div:first-child { border-left: 0; }
.briefing-numbers span { display: flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 8px; text-transform: uppercase; }
.briefing-numbers strong { display: block; margin-top: 8px; font-size: 23px; }
.weekly-briefing h2 .metric-help { display: inline-grid; margin-left: 4px; vertical-align: middle; }
.record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.record-item { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.record-item strong { display: block; margin-top: 8px; font-size: 30px; }
.record-item small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10px; }

.main-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(240px, .8fr); gap: 34px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.section-heading.inline > p { max-width: 380px; margin: 0; color: var(--ink-soft); font-size: 11px; text-align: right; }
.section-heading.compact { margin-bottom: 13px; }
.count-badge { padding: 5px 8px; border-radius: 4px; background: rgba(183,107,8,.1); color: var(--warning); font-size: 10px; font-weight: 700; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 0 10px 10px; color: #858797; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; text-align: left; border-bottom: 1px solid var(--line); }
td { height: 54px; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #fbfbfc; }
.application-id { font-weight: 700; }
.application-id small { display: block; margin-top: 3px; color: #8a8c9b; font-weight: 500; }
.status-chip { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 4px; background: rgba(183,107,8,.1); color: var(--warning); font-size: 10px; font-weight: 700; }
.row-button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.empty-state { padding: 34px 12px; color: var(--ink-soft); text-align: center; font-size: 12px; }

.signal-panel { padding-left: 28px; border-left: 1px solid var(--line); }
.signal-list { display: grid; }
.signal { padding: 14px 0; border-bottom: 1px solid var(--line); }
.signal:first-child { padding-top: 0; }
.signal strong { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.signal strong span { color: var(--danger); }
.signal p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.text-button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }

.flow-section, .consultant-section { padding: 32px 0; border-bottom: 1px solid var(--line); }
.funnel { display: grid; gap: 13px; }
.funnel-step { min-width: 0; }
.funnel-copy { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(190px, 1fr); align-items: baseline; gap: 16px; margin-bottom: 6px; }
.funnel-step p { margin: 0; color: var(--ink-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.funnel-step strong { font-size: 20px; text-align: center; }
.funnel-step span { color: #858797; font-size: 9px; text-align: right; }
.funnel-track { height: 16px; overflow: hidden; background: #e9eaee; }
.funnel-track i { display: block; width: var(--bar-width); height: 100%; background: var(--step-color); transform-origin: left; animation: grow .55s ease both; }

.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 34px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.legend { display: flex; gap: 15px; color: var(--ink-soft); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-line { width: 16px; height: 3px; border-radius: 3px; }
.legend-line.applications { background: #3c6ba8; }
.legend-line.presentations { background: #b76b08; }
.legend-line.starters { background: var(--success); }
.canvas-wrap { position: relative; width: 100%; height: 280px; }
canvas { width: 100%; height: 100%; }
.chart-note { margin: 7px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.reason-bars { display: grid; gap: 20px; }
.reasons-section .reason-bars { grid-template-columns: minmax(150px, .7fr) minmax(190px, 1.3fr); align-items: center; }
.pie-chart { position: relative; width: min(210px, 100%); aspect-ratio: 1; justify-self: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(27,28,60,.08); }
.pie-chart > span { position: absolute; inset: 50% auto auto 50%; min-width: 70px; padding: 7px 8px; transform: translate(-50%, -50%); border: 1px solid var(--line); background: rgba(255,255,255,.94); text-align: center; }
.pie-chart strong, .pie-chart small { display: block; }
.pie-chart strong { font-size: 20px; }
.pie-chart small { margin-top: 2px; color: var(--ink-soft); font-size: 8px; text-transform: uppercase; }
.pie-legend { display: grid; gap: 10px; }
.pie-legend > div { min-width: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 8px; }
.pie-legend i { width: 9px; height: 9px; margin-top: 2px; }
.pie-legend strong, .pie-legend small { display: block; }
.pie-legend strong { overflow-wrap: anywhere; font-size: 10px; line-height: 1.35; }
.pie-legend small { margin-top: 2px; color: var(--ink-soft); font-size: 8px; line-height: 1.35; }
.reason-group { display: grid; gap: 11px; }
.reason-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.reason-group-heading h3 { margin: 0; color: var(--ink); font-size: 11px; }
.reason-group-heading span { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: #eceef2; color: var(--ink); font-size: 10px; font-weight: 700; }
.reason-group-list { display: grid; gap: 13px; }
.reason-row { display: grid; gap: 6px; }
.empty-state.compact { padding: 10px 0; text-align: left; }
.reason-label { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: 10px; }
.reason-label strong { color: var(--ink); }
.bar-track { height: 7px; border-radius: 2px; background: #e9eaee; overflow: hidden; }
.bar-fill { height: 100%; background: var(--danger); transform-origin: left; animation: grow .55s ease both; }
@keyframes grow { from { transform: scaleX(0); } }

.consultant-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.consultant { min-width: 0; padding: 16px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.consultant.top-ranked { box-shadow: inset 0 3px 0 var(--accent-strong); }
.consultant-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.consultant-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 9px; font-weight: 700; }
.consultant-head strong { display: block; font-size: 11px; }
.consultant-head small { color: var(--ink-soft); font-size: 9px; }
.rank-label { margin-left: auto; padding: 3px 6px; border-radius: 3px; background: var(--accent); color: var(--ink); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.consultant-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 7px; }
.consultant-stats span { color: var(--ink-soft); font-size: 8px; text-transform: uppercase; }
.consultant-stats strong { display: block; margin-top: 4px; color: var(--ink); font-size: 16px; }
.milestone-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.milestone-strip article { flex: 0 0 auto; min-width: 190px; padding: 13px 14px; border-left: 3px solid var(--accent-strong); background: var(--surface); }
.milestone-strip span { display: block; font-size: 11px; font-weight: 700; }
.milestone-strip strong { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 9px; text-transform: uppercase; }

.placeholder-view { min-height: calc(100vh - 100px); display: none; place-content: center; max-width: 580px; margin: 0 auto; text-align: center; }
.placeholder-view.active { display: grid; }
.placeholder-view h1 { margin-bottom: 14px; }
.placeholder-view > p:not(.eyebrow) { margin: 0 0 24px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.primary-button { justify-self: center; min-height: 42px; display: inline-flex; align-items: center; padding: 0 17px; border-radius: 5px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(27,28,60,.28); opacity: 0; transition: opacity .25s ease; }
.drawer-backdrop.open { opacity: 1; }
.detail-drawer { position: fixed; z-index: 21; top: 0; right: 0; width: min(430px, 94vw); height: 100vh; padding: 34px; overflow-y: auto; background: var(--surface); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .28s ease; }
.detail-drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: 17px; right: 20px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink); font-size: 24px; cursor: pointer; }
.detail-drawer h2 { margin-bottom: 22px; font-size: 24px; }
.detail-drawer h3 { margin-top: 30px; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.detail-meta div { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.detail-meta dt { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; }
.detail-meta dd { margin: 5px 0 0; font-size: 11px; font-weight: 700; }
.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 22px 25px; border-left: 1px solid var(--line-strong); }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; top: 2px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 2px solid white; box-shadow: 0 0 0 1px var(--ink); }
.timeline li:first-child::before { background: var(--accent); }
.timeline strong { display: block; font-size: 11px; }
.timeline span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 9px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 30; max-width: min(440px, calc(100vw - 32px)); padding: 11px 15px; border-radius: 5px; background: var(--ink); color: white; font-size: 11px; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.milestone-celebration { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 22px; background: rgba(27,28,60,.62); }
.milestone-celebration[hidden] { display: none; }
.celebration-content { position: relative; z-index: 2; width: min(430px, 100%); padding: 34px; background: var(--surface); border-top: 6px solid var(--accent); box-shadow: 0 24px 70px rgba(0,0,0,.28); text-align: center; animation: celebration-in .34s ease-out both; }
.celebration-content h2 { margin: 5px 0 8px; font-size: 28px; }
.celebration-content p:not(.eyebrow) { margin: 0 0 20px; color: var(--ink-soft); font-size: 13px; }
.celebration-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebration-sparks i { position: absolute; top: 48%; left: 50%; width: 8px; height: 18px; background: var(--accent); animation: spark 1.2s ease-out infinite; }
.celebration-sparks i:nth-child(2) { --x: -170px; --y: -120px; background: #3c6ba8; animation-delay: -.2s; }
.celebration-sparks i:nth-child(3) { --x: 150px; --y: -135px; background: #12805c; animation-delay: -.4s; }
.celebration-sparks i:nth-child(4) { --x: -190px; --y: 105px; background: #be5c56; animation-delay: -.6s; }
.celebration-sparks i:nth-child(5) { --x: 185px; --y: 90px; background: #8b70b5; animation-delay: -.8s; }
.celebration-sparks i:nth-child(6) { --x: -70px; --y: -170px; animation-delay: -1s; }
.celebration-sparks i:nth-child(7) { --x: 65px; --y: 165px; background: #3c6ba8; animation-delay: -1.1s; }
.celebration-sparks i:nth-child(8) { --x: 210px; --y: -20px; background: #12805c; animation-delay: -.7s; }
@keyframes celebration-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes spark { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x, 130px), var(--y, -140px)) rotate(220deg); } }

@media (max-width: 1050px) {
  :root { --sidebar: 72px; }
  .sidebar { padding-inline: 10px; }
  .brand { padding: 0; justify-content: center; }
  .brand img { width: 52px; object-fit: contain; object-position: left; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item span:last-child, .profile-copy, .profile > span:last-child { display: none; }
  .profile { display: flex; justify-content: center; }
  .main-grid, .analysis-grid { gap: 24px; }
  .kpi { padding-inline: 14px; }
}

@media (max-width: 820px) {
  .auth-gate { grid-template-columns: 1fr; }
  .auth-brand { min-height: 180px; padding: 30px; }
  .auth-brand img { width: 140px; }
  .auth-panel { align-items: start; padding: 48px 30px; }
  .workspace { padding: 24px 20px 90px; }
  .filterbar { flex-wrap: wrap; align-items: end; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .field { flex: 1; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .kpi { padding: 15px 12px; border-bottom: 1px solid var(--line); }
  .kpi:nth-child(odd) { border-left: 0; }
  .main-grid, .analysis-grid { grid-template-columns: 1fr; }
  .signal-panel { padding-left: 0; border-left: 0; }
  .consultant-grid { grid-template-columns: repeat(2, 1fr); }
  .briefing-grid { grid-template-columns: 1fr; }
  .reasons-section .reason-bars { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
  .auth-brand { min-height: 145px; }
  .auth-brand p { font-size: 24px; }
  :root { --sidebar: 0px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; top: auto; bottom: 0; width: 100%; height: 64px; padding: 7px 10px; flex-direction: row; align-items: center; box-shadow: 0 -8px 24px rgba(27,28,60,.12); }
  .brand, .sidebar-spacer { display: none; }
  .profile { display: flex; width: 54px; min-height: 50px; padding: 0; justify-content: center; border-radius: var(--radius); }
  .profile .avatar, .profile-copy { display: none; }
  .profile > span:last-child { display: inline; font-size: 20px; }
  .nav-list { flex: 1; grid-template-columns: repeat(3, 1fr); }
  .sidebar > .nav-item { width: 54px; }
  .nav-item { min-height: 50px; }
  .nav-item span:last-child { display: none; }
  .workspace { padding: 20px 16px 94px; }
  .topbar { align-items: start; }
  .freshness { max-width: 120px; text-align: right; font-size: 9px; }
  .field { min-width: calc(50% - 28px); }
  .kpi strong { font-size: 28px; }
  .section-heading.inline { align-items: start; }
  .section-heading.inline > p { display: none; }
  .funnel-copy { grid-template-columns: 1fr auto; gap: 8px; }
  .funnel-step span { grid-column: 1 / -1; text-align: left; }
  .consultant-grid { grid-template-columns: 1fr; }
  .record-grid { grid-template-columns: 1fr; }
  .briefing-numbers div { padding-inline: 8px; }
  .briefing-numbers strong { font-size: 20px; }
  th:nth-child(3), td:nth-child(3) { display: none; }
  .detail-drawer { padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


.import-view { max-width: 1180px; }
.import-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .7fr); gap: 22px; align-items: start; }
.import-panel, .import-checklist, .batch-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.import-panel { padding: 26px; }
.import-panel .section-heading > p { margin: 9px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; max-width: 640px; }
.import-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; margin-top: 22px; }
.upload-zone { min-height: 104px; padding: 20px; display: flex; align-items: center; gap: 15px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper); cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.upload-zone:hover, .upload-zone.dragging { border-color: var(--ink); background: #fffef0; }
.upload-zone.has-file { border-style: solid; border-color: var(--success); background: rgba(18,128,92,.05); }
.upload-zone input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.upload-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 22px; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { font-size: 14px; overflow-wrap: anywhere; }
.upload-zone small { margin-top: 5px; color: var(--ink-soft); font-size: 11px; }
.import-submit { min-width: 145px; border: 0; align-self: stretch; }
.import-submit:disabled { cursor: not-allowed; opacity: .45; }
.import-status { min-height: 20px; margin: 14px 0 0; color: var(--ink-soft); font-size: 12px; }
.import-status.error { color: var(--danger); }
.import-result { margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.batch-status { padding: 5px 8px; border-radius: 4px; background: rgba(18,128,92,.1); color: var(--success); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.import-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.import-kpis > div { padding: 14px; border-right: 1px solid var(--line); }
.import-kpis > div:last-child { border-right: 0; }
.import-kpis span, .import-kpis strong { display: block; }
.import-kpis span { color: var(--ink-soft); font-size: 9px; text-transform: uppercase; }
.import-kpis strong { margin-top: 5px; font-size: 22px; }
.import-kpis .warning strong { color: var(--warning); }
.import-kpis .danger strong { color: var(--danger); }
.batch-reference { margin: 10px 0 0; color: var(--ink-soft); font-size: 10px; }
.batch-reference code { color: var(--ink); }
.import-checklist { padding: 24px; }
.import-checklist h2 { margin: 4px 0 20px; font-size: 18px; }
.import-checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.import-checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.import-checklist li > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.import-checklist strong, .import-checklist small { display: block; }
.import-checklist strong { font-size: 12px; }
.import-checklist small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.batch-section { margin-top: 22px; padding: 24px; }
.batch-section .table-wrap { margin-top: 16px; }
.batch-pill { display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--paper); color: var(--ink-soft); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.batch-pill.completed { background: rgba(18,128,92,.1); color: var(--success); }
.batch-pill.completed_with_warnings { background: rgba(183,107,8,.1); color: var(--warning); }
.batch-pill.failed { background: rgba(187,63,75,.1); color: var(--danger); }

@media (max-width: 860px) {
  .import-grid { grid-template-columns: 1fr; }
  .import-form { grid-template-columns: 1fr; }
  .import-submit { min-height: 48px; }
}

@media (max-width: 590px) {
  .import-panel, .import-checklist, .batch-section { padding: 18px; }
  .import-kpis { grid-template-columns: 1fr 1fr; }
  .import-kpis > div:nth-child(2) { border-right: 0; }
  .import-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .batch-section th:nth-child(3), .batch-section td:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Management workspace */
.management-view { max-width: 1440px; margin: 0 auto; }
.management-topbar { margin-bottom: 14px; }
.management-filterbar { position: sticky; top: 0; z-index: 8; min-height: 72px; display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 0 14px; background: rgba(247,248,250,.96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.management-filterbar .segmented { flex: 0 0 auto; }
.management-filterbar .field { min-width: 150px; flex: 1 1 150px; }
.management-filterbar .field select { width: 100%; min-width: 0; }
.management-filterbar .icon-button { flex: 0 0 38px; }
.unavailable-field select:disabled { color: #858797; background: #eceef2; border-style: dashed; cursor: not-allowed; opacity: 1; }
.management-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 16px 0 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.management-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 13px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.management-tabs button:hover { color: var(--ink); }
.management-tabs button.active { color: var(--ink); border-bottom-color: var(--accent-strong); }
.management-panel { display: none; padding-top: 24px; animation: enter .24s ease both; }
.management-panel.active { display: block; }
.management-loading { padding: 34px 0; display: grid; gap: 12px; }
.loading-line { width: 100%; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #e9eaee 20%, #f7f8fa 50%, #e9eaee 80%); background-size: 220% 100%; animation: loading 1.25s linear infinite; }
.loading-line.short { width: 58%; }
@keyframes loading { to { background-position: -220% 0; } }

.management-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.management-kpi { min-width: 0; min-height: 132px; padding: 19px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.management-kpi.accent { box-shadow: inset 0 4px 0 var(--accent); }
.management-kpi strong { display: block; margin-top: 13px; font-size: 34px; line-height: 1; }
.management-kpi small { display: block; margin-top: 9px; color: #858797; font-size: 10px; line-height: 1.4; }
.metric-label { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.metric-label button, .metric-help { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink-soft); font-size: 10px; font-weight: 800; cursor: pointer; }
.metric-label button:hover, .metric-help:hover { border-color: var(--ink); color: var(--ink); }
.metric-help.compact { width: 16px; height: 16px; font-size: 8px; }
.delta-positive { color: var(--success) !important; }
.delta-negative { color: var(--danger) !important; }

.management-overview-kpis { padding-top: 30px; }
.management-overview-funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 0; border-bottom: 0; }
.management-overview-consultants { max-height: 460px; }
.management-overview-consultants table { min-width: 840px; }
.management-overview-consultants td:first-child { min-width: 180px; }
.management-overview-analysis { align-items: start; }
.management-starter-summary { padding: 30px 0; }
.management-starter-summary .starter-mix { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.management-starter-summary .mix-row { grid-template-columns: minmax(110px, 1fr) 1.5fr auto; }

.management-signals { padding: 30px 0; border-bottom: 1px solid var(--line); }
.signal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.management-signal { min-height: 100px; padding: 16px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.management-signal span { display: inline-flex; align-items: center; min-height: 21px; padding: 0 7px; border-radius: 3px; background: rgba(60,107,168,.09); color: var(--info); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.management-signal.warning span { background: rgba(183,107,8,.1); color: var(--warning); }
.management-signal.positive span { background: rgba(18,128,92,.1); color: var(--success); }
.management-signal strong { display: block; margin-top: 11px; font-size: 13px; }
.management-signal p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }

.management-overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr); gap: 34px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.management-canvas-wrap { position: relative; width: 100%; height: 300px; min-width: 0; }
.management-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.legend-line.stoppers { background: var(--danger); }
.starter-mix { display: grid; gap: 16px; }
.mix-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; }
.mix-row span { color: var(--ink-soft); font-size: 10px; }
.mix-row strong { min-width: 28px; text-align: right; font-size: 12px; }
.mix-track { height: 8px; overflow: hidden; border-radius: 2px; background: #e9eaee; }
.mix-fill { height: 100%; background: var(--success); transform-origin: left; animation: grow .45s ease both; }
.data-note { margin: 22px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.data-note strong { color: var(--warning); }

.management-funnel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.management-funnel-step { position: relative; min-height: 130px; padding: 15px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--step-color); }
.management-funnel-step::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--reach); height: 4px; background: var(--step-color); transition: width .45s ease; }
.management-funnel-step span { display: block; min-height: 30px; color: var(--ink-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; line-height: 1.35; }
.management-funnel-step strong { display: block; margin-top: 12px; font-size: 27px; }
.management-funnel-step small { display: block; margin-top: 7px; color: #858797; font-size: 9px; line-height: 1.4; }
.speed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 30px 0; border-bottom: 1px solid var(--line); }
.speed-metric { min-width: 0; padding: 0 20px; border-left: 1px solid var(--line); }
.speed-metric:first-child { padding-left: 0; border-left: 0; }
.speed-metric span { color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.speed-metric strong { display: block; margin-top: 8px; font-size: 24px; }
.speed-metric small { display: block; margin-top: 5px; color: #858797; font-size: 9px; }
.management-table-section { padding: 30px 0; }
.management-table { max-height: 660px; overflow: auto; border-top: 1px solid var(--line); }
.management-table.management-office-table { max-height: none; overflow-x: auto; overflow-y: visible; }
.management-table thead { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.management-table td:first-child { min-width: 180px; }
.management-table tr:hover td { background: rgba(250,227,31,.07); }
.management-table .muted { color: var(--ink-soft); font-size: 10px; }
.management-table .metric-cell { font-weight: 800; }
.management-table .management-total-row td { background: #eef0f4; border-top: 2px solid var(--ink); font-weight: 800; }
.management-table .management-total-row:hover td { background: #eef0f4; }
.management-office-table table { width: 100%; min-width: 1080px; table-layout: fixed; }
.management-office-table th,
.management-office-table td { width: 11.111%; }
.management-office-table th button { white-space: normal; line-height: 1.25; }
.management-office-table td:first-child { min-width: 0; }
.management-office-table tbody tr:not(.management-total-row):nth-child(odd) td { background: #fff; }
.management-office-table tbody tr:not(.management-total-row):nth-child(even) td { background: #f7f8fa; }
.management-office-table tbody tr:not(.management-total-row):hover td { background: rgba(250,227,31,.10); }
.office-period-comparison { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; white-space: nowrap; }
.office-period-comparison > strong { color: var(--ink); font-size: 13px; }
.office-benchmark-arrow { font-size: 15px; font-weight: 900; line-height: 1; }
.office-benchmark-arrow.up { color: var(--success); }
.office-benchmark-arrow.down { color: var(--danger); }
.office-previous-value { color: var(--ink-soft); font-size: 9px; font-weight: 650; }
.management-table .bar-cell { min-width: 95px; }
.table-bar { height: 5px; margin-top: 5px; background: #e9eaee; }
.table-bar i { display: block; height: 100%; background: var(--info); }

.outcome-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 38px; }
.outcome-summary { display: grid; gap: 2px; border-top: 1px solid var(--line); }
.outcome-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.outcome-row span { color: var(--ink-soft); font-size: 11px; }
.outcome-row strong { font-size: 17px; }
.outcome-row.total span, .outcome-row.total strong { color: var(--ink); font-weight: 800; }

.definition-list { display: grid; border-top: 1px solid var(--line); }
.definition-row { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.5fr) auto; gap: 26px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.definition-row h3 { margin: 0; font-size: 13px; }
.definition-row p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.definition-row button { align-self: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 10px; font-weight: 700; cursor: pointer; }

.metric-drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(27,28,60,.28); opacity: 0; transition: opacity .22s ease; }
.metric-drawer-backdrop.open { opacity: 1; }
.metric-drawer { position: fixed; z-index: 41; top: 0; right: 0; width: min(500px, 96vw); height: 100vh; padding: 38px; overflow-y: auto; background: var(--surface); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .25s ease; }
.metric-drawer.open { transform: none; }
.metric-drawer h2 { margin: 0 0 24px; font-size: 25px; }
.metric-drawer-content { display: grid; gap: 22px; }
.metric-definition-block { padding-top: 18px; border-top: 1px solid var(--line); }
.metric-definition-block:first-child { padding-top: 0; border-top: 0; }
.metric-definition-block h3 { margin: 0 0 7px; font-size: 11px; text-transform: uppercase; }
.metric-definition-block p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.metric-formula { display: block; padding: 13px; border-left: 3px solid var(--accent-strong); background: var(--paper); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; white-space: normal; }
.metric-badge { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 3px; background: rgba(60,107,168,.09); color: var(--info); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.metric-badge.event { background: rgba(18,128,92,.1); color: var(--success); }

.carv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.carv-kpis > article { min-height: 126px; padding: 18px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.carv-kpis strong { display: block; margin-top: 12px; font-size: 31px; line-height: 1; }
.carv-kpis small { display: block; margin-top: 8px; color: #858797; font-size: 10px; line-height: 1.4; }
.carv-flow-section { padding: 30px 0; border-bottom: 1px solid var(--line); }
.carv-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.carv-flow article { position: relative; min-height: 116px; padding: 15px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--carv-color); }
.carv-flow article::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--carv-reach); height: 4px; background: var(--carv-color); }
.carv-flow span { display: block; min-height: 29px; color: var(--ink-soft); font-size: 9px; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.carv-flow strong { display: block; margin-top: 10px; font-size: 26px; }
.carv-flow small { display: block; margin-top: 6px; color: #858797; font-size: 9px; }
.carv-analysis-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: 38px; padding-top: 30px; }
.bar-fill.carv { background: #7561a7; }

@media (max-width: 1180px) {
  .management-filterbar .segmented { width: 100%; }
  .management-filterbar .segmented button { flex: 1; }
  .management-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .management-overview-funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .management-filterbar { position: static; }
  .management-filterbar .field { min-width: calc(50% - 12px); }
  .management-overview-grid, .outcome-grid { grid-template-columns: 1fr; }
  .management-starter-summary .starter-mix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-overview-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carv-analysis-grid { grid-template-columns: 1fr; }
  .signal-list { grid-template-columns: 1fr; }
  .management-canvas-wrap { height: 260px; }
  .speed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .speed-metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .definition-row { grid-template-columns: 1fr auto; }
  .definition-row p { grid-column: 1 / -1; }
  .carv-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 590px) {
  .management-topbar { display: grid; }
  .management-topbar .freshness { max-width: none; text-align: left; }
  .management-filterbar .field { min-width: 100%; }
  .management-kpis { grid-template-columns: 1fr 1fr; }
  .management-kpi { min-height: 122px; padding: 15px; }
  .management-kpi strong { font-size: 27px; }
  .management-funnel { grid-template-columns: 1fr 1fr; }
  .management-funnel-step { min-height: 118px; }
  .speed-grid { grid-template-columns: 1fr 1fr; }
  .speed-metric { padding: 0 12px; }
  .mix-row { grid-template-columns: 1fr auto; }
  .mix-track { grid-column: 1 / -1; grid-row: 2; }
  .metric-drawer { padding: 34px 22px; }
  .carv-kpis { grid-template-columns: 1fr 1fr; }
  .carv-flow { grid-template-columns: 1fr 1fr; }
}

/* Live Umanga API management POC */
.management-view.api-poc-active .management-filterbar { display: none; }
.api-poc-panel { --api-accent: #12805c; }
.api-poc-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.api-poc-toolbar h2 { margin: 3px 0 0; font-size: 22px; }
.api-poc-period { display: flex; align-items: end; gap: 10px; }
.api-poc-period .field { min-width: 150px; }
.api-poc-period input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; }
.api-poc-period input:focus { border-color: var(--ink); outline: 2px solid rgba(60,107,168,.18); outline-offset: 1px; }
.api-poc-health { min-height: 62px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid #858797; background: var(--surface); }
.api-poc-health .status-dot { align-self: start; margin-top: 5px; }
.api-poc-health div { display: grid; gap: 3px; }
.api-poc-health strong { font-size: 12px; }
.api-poc-health span:not(.status-dot) { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.api-poc-health.complete { border-left-color: var(--success); background: rgba(18,128,92,.045); }
.api-poc-health.complete .status-dot { background: var(--success); }
.api-poc-health.catching-up { border-left-color: var(--warning); background: rgba(183,107,8,.045); }
.api-poc-health.catching-up .status-dot { background: var(--warning); }
.api-poc-health.error { border-left-color: var(--danger); background: rgba(184,67,67,.045); }
.api-poc-health.error .status-dot { background: var(--danger); }
.api-poc-health.loading .status-dot { animation: pulse 1s ease-in-out infinite; }

.api-poc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.api-poc-kpis article { min-width: 0; min-height: 126px; padding: 17px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.api-poc-kpis span { display: block; min-height: 28px; color: var(--ink-soft); font-size: 10px; font-weight: 750; line-height: 1.35; }
.api-poc-kpis strong { display: block; margin-top: 8px; font-size: 30px; line-height: 1; }
.api-poc-kpis small { display: block; margin-top: 8px; color: #858797; font-size: 9px; line-height: 1.45; }

.api-poc-trend { padding: 30px 0; border-bottom: 1px solid var(--line); }
.api-poc-canvas-wrap { width: 100%; height: 310px; }
.api-poc-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.api-poc-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--ink-soft); font-size: 9px; }
.api-poc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.api-poc-legend i { width: 16px; height: 3px; background: var(--ink); }
.api-poc-legend .starters { background: var(--success); }
.api-poc-legend .rejections { background: var(--warning); }
.api-poc-legend .stoppers { background: var(--danger); }

.api-poc-breakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; padding-top: 30px; }
.api-poc-bars { display: grid; border-top: 1px solid var(--line); }
.api-poc-bar-row { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.api-poc-bar-row > div:first-child { display: flex; justify-content: space-between; gap: 16px; }
.api-poc-bar-row span { min-width: 0; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 10px; }
.api-poc-bar-row strong { flex: 0 0 auto; font-size: 11px; }
.api-poc-bar-track { height: 5px; background: #e9eaee; overflow: hidden; }
.api-poc-bar-track i { display: block; height: 100%; background: var(--info); transform-origin: left; animation: grow .4s ease both; }
.api-poc-breakdowns section:last-child .api-poc-bar-track i { background: var(--api-accent); }

@media (max-width: 1180px) {
  .api-poc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .api-poc-toolbar { align-items: stretch; flex-direction: column; }
  .api-poc-period { width: 100%; }
  .api-poc-period .field { flex: 1 1 0; min-width: 0; }
  .api-poc-breakdowns { grid-template-columns: 1fr; gap: 30px; }
  .api-poc-canvas-wrap { height: 270px; }
}

@media (max-width: 590px) {
  .api-poc-period { display: grid; grid-template-columns: 1fr 1fr auto; }
  .api-poc-kpis { grid-template-columns: 1fr 1fr; }
  .api-poc-kpis article { min-height: 116px; padding: 14px; }
  .api-poc-kpis strong { font-size: 26px; }
  .api-poc-legend { justify-content: flex-start; }
  .api-poc-canvas-wrap { height: 240px; }
}

.api-poc-reconciliation { padding: 30px 0 4px; border-top: 1px solid var(--line); }
.api-poc-reconciliation-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.api-poc-reconciliation-summary > div { min-height: 82px; padding: 16px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.api-poc-reconciliation-summary strong { display: block; font-size: 23px; line-height: 1; }
.api-poc-reconciliation-summary span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 10px; }
.api-poc-checks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.api-poc-check { min-width: 0; min-height: 102px; padding: 15px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-top: 3px solid var(--line-strong); }
.api-poc-check.complete { border-top-color: var(--success); }
.api-poc-check.attention { border-top-color: var(--warning); }
.api-poc-check span { display: block; min-height: 28px; color: var(--ink-soft); font-size: 9px; font-weight: 750; line-height: 1.35; }
.api-poc-check strong { display: block; margin-top: 7px; font-size: 16px; }
.api-poc-check small { display: block; margin-top: 6px; color: #858797; font-size: 9px; line-height: 1.35; }

@media (max-width: 860px) {
  .api-poc-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 590px) {
  .api-poc-reconciliation-summary { grid-template-columns: 1fr 1fr; }
  .api-poc-reconciliation-summary > div:last-child { grid-column: 1 / -1; }
}

/* Marketing workspace */
.marketing-view { max-width: 1440px; margin: 0 auto; }
.marketing-topbar { margin-bottom: 14px; }
.marketing-topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.secondary-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 750; cursor: pointer; }
.secondary-button:hover { border-color: var(--ink); }
.marketing-filterbar { position: sticky; top: 0; z-index: 8; min-height: 72px; display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 0 14px; background: rgba(247,248,250,.96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.marketing-filterbar .segmented { flex: 0 0 auto; }
.marketing-filterbar .field { min-width: 150px; flex: 1 1 150px; }
.marketing-filterbar .field select { width: 100%; min-width: 0; }
.marketing-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 16px 0 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.marketing-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 13px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.marketing-tabs button:hover { color: var(--ink); }
.marketing-tabs button.active { color: var(--ink); border-bottom-color: var(--accent-strong); }
.marketing-loading { padding: 34px 0; display: grid; gap: 12px; }
.marketing-panel { display: none; padding-top: 24px; animation: enter .24s ease both; }
.marketing-panel.active { display: block; }
.marketing-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.marketing-kpis article { min-width: 0; min-height: 132px; padding: 19px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marketing-kpis article.accent { box-shadow: inset 0 4px 0 var(--accent); }
.marketing-kpis strong { display: block; margin-top: 13px; font-size: 32px; line-height: 1; }
.marketing-kpis small { display: block; margin-top: 9px; color: #858797; font-size: 10px; line-height: 1.4; }
.marketing-flow-section { padding: 30px 0; border-bottom: 1px solid var(--line); }
.marketing-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.marketing-funnel article { position: relative; min-height: 122px; padding: 15px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--step-color); }
.marketing-funnel article::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--reach); height: 4px; background: var(--step-color); transition: width .45s ease; }
.marketing-funnel span { display: block; min-height: 29px; color: var(--ink-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.marketing-funnel strong { display: block; margin-top: 10px; font-size: 27px; }
.marketing-funnel small { display: block; margin-top: 7px; color: #858797; font-size: 9px; }
.marketing-overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr); gap: 36px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.marketing-canvas-wrap { position: relative; height: 300px; }
.legend-line.spend { background: var(--warning); }
.marketing-efficiency { display: grid; border-top: 1px solid var(--line); }
.marketing-efficiency > div { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.marketing-efficiency span { color: var(--ink-soft); font-size: 11px; }
.marketing-efficiency strong { font-size: 17px; text-align: right; }
.marketing-table { max-height: 660px; overflow: auto; border-top: 1px solid var(--line); }
.marketing-table thead { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.marketing-table td:first-child { min-width: 150px; }
.marketing-table tr:hover td { background: rgba(250,227,31,.07); }
.marketing-table td small { display: block; margin-top: 4px; color: #858797; font-size: 9px; }
.spend-bar { position: relative; min-width: 105px; isolation: isolate; }
.spend-bar::before { content: ""; position: absolute; z-index: -1; left: 6px; right: auto; bottom: 10px; width: var(--spend-share); max-width: calc(100% - 12px); height: 6px; background: rgba(183,107,8,.16); }
.spend-bar span { position: relative; z-index: 1; font-weight: 700; }
.campaign-status { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.campaign-status strong { color: var(--warning); font-size: 24px; }
.campaign-status span { color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.link-status { display: inline-flex; align-items: center; min-height: 23px; padding: 0 7px; border-radius: 3px; font-size: 9px; font-weight: 800; }
.link-status.linked { background: rgba(18,128,92,.1); color: var(--success); }
.link-status.unlinked { background: rgba(183,107,8,.1); color: var(--warning); }
.quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.quality-grid article { min-height: 150px; padding: 18px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quality-grid article > span { display: inline-flex; min-height: 22px; align-items: center; padding: 0 7px; border-radius: 3px; background: rgba(60,107,168,.09); color: var(--info); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.quality-grid article.warning > span { background: rgba(183,107,8,.1); color: var(--warning); }
.quality-grid article.positive > span { background: rgba(18,128,92,.1); color: var(--success); }
.quality-grid strong { display: block; margin-top: 14px; font-size: 25px; }
.quality-grid p { margin: 8px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.marketing-cost-admin { margin-top: 28px; padding: 26px 0; border-top: 4px solid var(--accent); border-bottom: 1px solid var(--line); }
.marketing-budget-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 22px 0 12px; }
.marketing-budget-heading h3, .section-heading.compact h3 { margin: 3px 0 0; font-size: 17px; }
.marketing-budget-heading .field { flex: 0 0 190px; }
.marketing-budget-heading input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.marketing-budget-table { margin-bottom: 4px; }
.marketing-budget-table td:first-child { min-width: 130px; }
.budget-status { display: inline-flex; min-height: 23px; align-items: center; padding: 0 7px; border-radius: 3px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.budget-status.default { background: rgba(60,107,168,.09); color: var(--info); }
.budget-status.override { background: rgba(183,107,8,.1); color: var(--warning); }
.section-heading.compact { padding-top: 20px; }
.marketing-cost-form { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 14px; padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.marketing-cost-form .field { min-width: 0; }
.marketing-cost-form .field input { width: 100%; height: 38px; min-width: 0; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; }
.marketing-cost-form .field input:focus { outline: 3px solid rgba(250,227,31,.4); border-color: var(--ink); }
.marketing-notes { grid-column: span 3; }
.marketing-cost-actions { display: flex; justify-content: flex-end; align-items: end; gap: 9px; grid-column: span 2; }
.marketing-cost-actions .primary-button, .marketing-cost-actions .secondary-button { min-height: 38px; }
.cost-row-actions { display: flex; gap: 6px; align-items: center; }
.icon-button.small { width: 30px; height: 30px; font-size: 14px; }
.icon-button.danger { color: var(--danger); }
.import-status.error { color: var(--danger); }

@media (max-width: 1180px) {
  .marketing-filterbar .segmented { width: 100%; }
  .marketing-filterbar .segmented button { flex: 1; }
  .marketing-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-cost-form { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .marketing-notes { grid-column: span 2; }
  .marketing-cost-actions { grid-column: span 1; }
}

@media (max-width: 860px) {
  .marketing-filterbar { position: static; }
  .marketing-filterbar .field { min-width: calc(50% - 12px); }
  .marketing-overview-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: 1fr 1fr; }
  .marketing-cost-form { grid-template-columns: 1fr 1fr; }
  .marketing-notes, .marketing-cost-actions { grid-column: span 2; }
}

@media (max-width: 590px) {
  .marketing-topbar { display: grid; }
  .marketing-topbar-actions { width: 100%; justify-content: space-between; align-items: flex-start; }
  .marketing-topbar-actions .freshness { width: 100%; order: -1; }
  .marketing-filterbar .field { min-width: 100%; }
  .marketing-kpis { grid-template-columns: 1fr 1fr; }
  .marketing-kpis article { min-height: 122px; padding: 14px; }
  .marketing-kpis strong { font-size: 24px; }
  .marketing-funnel { grid-template-columns: 1fr 1fr; }
  .quality-grid { grid-template-columns: 1fr; }
  .marketing-cost-form { grid-template-columns: 1fr; }
  .marketing-budget-heading { display: grid; align-items: stretch; }
  .marketing-budget-heading .field { flex-basis: auto; }
  .marketing-notes, .marketing-cost-actions { grid-column: span 1; }
  .marketing-cost-actions { justify-content: stretch; }
  .marketing-cost-actions button { flex: 1; }
  .campaign-status { grid-template-columns: 1fr; gap: 4px; }
}


/* Experimental AI data analyst */
.nav-item-sub { margin-left: 18px; width: calc(100% - 18px); }
.nav-item-sub::before { content: ""; position: absolute; left: -10px; top: -10px; bottom: 50%; width: 1px; background: rgba(255,255,255,.2); }
.ai-analyst-view { max-width: 1180px; margin: 0 auto; }
.ai-topbar { border-bottom: 1px solid var(--line); }
.ai-access-badge { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink-soft); background: var(--surface); font-size: 12px; font-weight: 700; }
.ai-workspace { padding: 28px clamp(18px, 3vw, 42px) 60px; }
.ai-query-section { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.ai-query-form { display: grid; gap: 9px; }
.ai-query-form > label { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.ai-query-form textarea,
.ai-feedback textarea { width: 100%; resize: vertical; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.55; padding: 14px 16px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.ai-query-form textarea { min-height: 116px; }
.ai-query-form textarea:focus,
.ai-feedback textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(250,227,31,.38); }
.ai-query-actions { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ai-submit { min-width: 148px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.ai-submit b { font-size: 17px; transition: transform 150ms ease; }
.ai-submit:hover b { transform: translateX(3px); }
.ai-status { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.ai-status.working { color: var(--info); }
.ai-status.success { color: var(--success); }
.ai-status.error { color: var(--danger); }
.ai-examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ai-examples button,
.ai-feedback-buttons button { border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: 650; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.ai-examples button:hover,
.ai-feedback-buttons button:hover { border-color: var(--ink); transform: translateY(-1px); }
.ai-answer-panel { padding-top: 30px; animation: ai-answer-in 220ms ease-out both; }
@keyframes ai-answer-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ai-answer-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ai-answer-heading h2 { margin: 3px 0 0; font-size: 22px; }
.ai-row-count { color: var(--ink-soft); font-size: 11px; }
.ai-answer { max-width: 860px; margin: 20px 0 28px; color: var(--ink); font-size: 18px; line-height: 1.65; white-space: pre-wrap; }
.ai-quality { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 20px; padding: 14px 16px; border-left: 4px solid var(--success); background: rgba(18,128,92,.07); }
.ai-quality[data-level="attention"] { border-left-color: var(--warning); background: rgba(183,107,8,.08); }
.ai-quality[data-level="blocked"] { border-left-color: var(--danger); background: rgba(187,63,75,.08); }
.ai-quality-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(18,128,92,.12); }
.ai-quality[data-level="attention"] .ai-quality-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(183,107,8,.12); }
.ai-quality[data-level="blocked"] .ai-quality-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(187,63,75,.12); }
.ai-quality strong { display: block; margin-bottom: 4px; font-size: 13px; }
.ai-quality ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.ai-details { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ai-detail-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ai-detail-row h3 { margin: 0; font-size: 12px; color: var(--ink-soft); }
.ai-detail-row p,
.ai-detail-row ul { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.ai-detail-row ul { padding-left: 18px; }
.ai-technical { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ai-technical summary { width: fit-content; cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 700; }
.ai-technical pre { overflow: auto; margin: 14px 0 0; padding: 16px; border-radius: 6px; background: #202237; color: #f4f5f7; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.ai-result-table { margin-top: 18px; max-height: 360px; overflow: auto; }
.ai-result-table th { text-transform: capitalize; }
.ai-feedback { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 14px 20px; margin-top: 28px; padding: 20px 0; border-top: 3px solid var(--accent); }
.ai-feedback > div:first-child { display: grid; gap: 3px; }
.ai-feedback strong { font-size: 14px; }
.ai-feedback span { color: var(--ink-soft); font-size: 12px; }
.ai-feedback-buttons { display: flex; gap: 7px; }
.ai-feedback-buttons button.selected { border-color: var(--ink); background: var(--ink); color: white; }
.ai-feedback textarea { grid-column: 1 / -1; font-size: 13px; }
.ai-feedback > .secondary-button { grid-column: 2; justify-self: end; }

@media (max-width: 720px) {
  .nav-item-sub { margin-left: 0; width: 100%; }
  .nav-item-sub::before { display: none; }
  .ai-query-actions,
  .ai-answer-heading { align-items: stretch; flex-direction: column; }
  .ai-submit { width: 100%; }
  .ai-detail-row { grid-template-columns: 1fr; gap: 7px; }
  .ai-feedback { grid-template-columns: 1fr; }
  .ai-feedback-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ai-feedback > .secondary-button { grid-column: 1; width: 100%; }
}

/* Flexer visual refinement - reference-led polish */
:root {
  --ink: #130041;
  --ink-soft: #555469;
  --accent: #fae31f;
  --accent-strong: #d9c300;
  --paper: #f4f4f6;
  --surface: #ffffff;
  --line: #dddde3;
  --line-strong: #c8c9d1;
  --success: #15977f;
  --warning: #d88900;
  --danger: #c94058;
  --info: #168fca;
  --sidebar: 220px;
  --radius: 8px;
  --shadow: 0 7px 20px rgba(19, 0, 65, 0.08);
  font-family: Futura, "Trebuchet MS", Arial, Helvetica, sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

h1 {
  font-family: "Futura-Bold", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(27px, 2.55vw, 35px);
  font-weight: 800;
  letter-spacing: 0;
}

h2,
h3,
.auth-brand p {
  font-family: FatFrank, "Futura-Bold", Futura, "Arial Black", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

h2 {
  font-size: 19px;
}

.eyebrow,
.field,
th,
.briefing-item span,
.record-item span,
.management-funnel-step span,
.marketing-funnel span,
.carv-flow span {
  letter-spacing: 0;
}

#bmView,
.management-view,
.marketing-view {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.sidebar {
  padding: 20px 12px 14px;
  box-shadow: none;
}

.brand {
  height: 50px;
  margin-bottom: 22px;
  padding: 0 12px;
}

.brand img {
  width: 116px;
}

.nav-list {
  gap: 3px;
}

.nav-item {
  min-height: 40px;
  padding: 0 11px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  transition: background 120ms ease, color 120ms ease;
}

.nav-item:hover {
  color: white;
  background: rgba(255, 255, 255, 0.09);
  transform: none;
}

.nav-item.active {
  background: var(--accent);
  color: var(--ink);
  box-shadow: none;
}

.nav-icon {
  width: 19px;
  font-size: 17px;
}

.profile {
  margin-top: 12px;
  padding: 9px 8px;
}

.workspace {
  padding: 26px clamp(22px, 3vw, 46px) 58px;
}

.view {
  animation-duration: 180ms;
}

.topbar,
.management-topbar,
.marketing-topbar {
  min-height: 58px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}

.freshness {
  padding: 6px 0;
  font-size: 11px;
}

.status-dot {
  box-shadow: none;
}

.filterbar,
.management-filterbar,
.marketing-filterbar {
  width: 100%;
  min-height: 62px;
  gap: 10px;
  padding: 10px 0 13px;
  background: var(--paper);
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  backdrop-filter: none;
}

.segmented {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #e9e9ed;
}

.segmented button {
  height: 32px;
  border-radius: 7px;
  font-size: 11px;
}

.segmented button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(19, 0, 65, 0.09);
}

.field {
  gap: 5px;
  color: var(--ink-soft);
  font-size: 9px;
}

.field select,
.multi-select summary,
.auth-field input,
.marketing-budget-heading input,
.marketing-cost-form .field input,
.ai-query-form textarea,
.ai-feedback textarea {
  border-radius: 7px;
  background: white;
  box-shadow: none;
}

.field select:hover,
.multi-select summary:hover,
.auth-field input:hover,
.marketing-budget-heading input:hover,
.marketing-cost-form .field input:hover {
  border-color: #9293a0;
}

.multi-select-menu {
  border-radius: 8px;
}

.multi-select-menu label {
  border-radius: 6px;
}

.icon-button {
  border-radius: 50%;
  transition: border-color 120ms ease, background 120ms ease;
}

.icon-button:hover {
  border-color: var(--ink);
  background: var(--accent);
  transform: none;
}

.primary-button,
.auth-submit {
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
}

.primary-button:hover,
.auth-submit:hover {
  background: #ffe817;
}

.secondary-button {
  border-radius: 999px;
}

.secondary-button:hover {
  background: #f8f8f9;
}

.kpi-strip,
.management-kpis,
.marketing-kpis,
.carv-kpis,
.briefing-numbers,
.record-grid,
.consultant-grid,
.signal-list,
.quality-grid,
.import-kpis {
  overflow: hidden;
  border-color: var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}

.kpi-strip {
  padding: 0;
  border: 1px solid var(--line-strong);
}

.kpi {
  min-height: 118px;
  display: grid;
  grid-template-rows: 40px 54px auto;
  align-items: start;
  padding: 20px;
  border-left: 0;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.kpi:first-child {
  padding-left: 20px;
  box-shadow: inset 0 4px 0 var(--accent);
}

.kpi:last-child {
  border-right: 0;
}

.kpi > p {
  min-height: 40px;
  margin-bottom: 0;
}

.kpi > strong,
.kpi > .metric-display,
.kpi > .open-workload-values {
  align-self: start;
}

.kpi > strong {
  margin-top: 0;
  line-height: 39px;
}

.kpi > .metric-display.metric-total strong,
.kpi > .open-workload-values {
  margin-top: 0;
}

.kpi > .metric-display,
.kpi > .open-workload-values {
  height: 54px;
  margin-top: 0;
}

.kpi p {
  font-size: 11px;
}

.kpi strong {
  font-size: clamp(30px, 2.8vw, 39px);
}

.metric-applications strong {
  color: var(--ink);
}

.weekly-briefing,
.record-section,
.milestone-section,
.flow-section,
.consultant-section,
.main-grid,
.analysis-grid,
.management-signals,
.management-overview-grid,
.marketing-flow-section,
.marketing-overview-grid {
  padding-top: 26px;
  padding-bottom: 26px;
}

.briefing-item,
.record-item,
.consultant,
.management-kpi,
.management-signal,
.management-funnel-step,
.carv-kpis > article,
.carv-flow article,
.marketing-kpis article,
.marketing-funnel article,
.quality-grid article,
.milestone-strip article {
  box-shadow: none;
}

.briefing-item {
  min-height: 88px;
  border-left-width: 3px;
  border-radius: 8px;
}

.section-heading {
  margin-bottom: 14px;
}

.section-heading.inline > p {
  color: #6f6e7d;
}

.count-badge,
.status-chip,
.batch-status,
.batch-pill,
.metric-badge,
.link-status,
.budget-status,
.rank-label,
.ai-access-badge {
  border-radius: 999px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}

table {
  background: var(--surface);
}

th {
  height: 38px;
  padding: 8px 10px;
  background: #ededf1;
  color: #666575;
  border-right: 1px solid #e0e0e5;
  border-bottom-color: var(--line-strong);
  font-size: 9px;
}

td {
  height: 50px;
  border-right: 1px solid #ececef;
}

th:last-child,
td:last-child {
  border-right: 0;
}

tbody tr:hover,
.management-table tr:hover td,
.marketing-table tr:hover td {
  background: #fffcec;
}

.management-table,
.marketing-table {
  border-top-color: var(--line-strong);
}

.management-table thead,
.marketing-table thead {
  background: #ededf1;
}

.management-table .management-total-row td {
  background: #e9e9ee;
}

.management-tabs,
.marketing-tabs {
  width: 100%;
  gap: 6px;
  padding: 13px 0 5px;
  border-bottom: 1px solid var(--line);
}

.management-tabs button,
.marketing-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
}

.management-tabs button:hover,
.marketing-tabs button:hover {
  background: #e9e9ed;
}

.management-tabs button.active,
.marketing-tabs button.active {
  border-bottom-color: transparent;
  background: var(--ink);
  color: white;
}

.management-panel,
.marketing-panel {
  padding-top: 22px;
}

.management-kpi,
.marketing-kpis article {
  min-height: 124px;
  padding: 17px;
}

.management-kpi.accent,
.marketing-kpis article.accent {
  box-shadow: inset 0 4px 0 var(--accent);
}

.management-funnel,
.marketing-funnel,
.carv-flow {
  gap: 8px;
}

.management-funnel-step,
.marketing-funnel article,
.carv-flow article {
  border-top-width: 3px;
  border-radius: 8px;
}

.funnel-track,
.bar-track,
.mix-track,
.table-bar {
  border-radius: 4px;
}

.funnel-track i,
.bar-fill,
.mix-fill,
.table-bar i {
  border-radius: inherit;
}

.pie-chart > span {
  border-radius: 8px;
}

.import-panel,
.import-checklist,
.batch-section {
  border-radius: 8px;
  box-shadow: none;
}

.upload-zone {
  border-radius: 8px;
}

.upload-zone:hover,
.upload-zone.dragging {
  background: #fffcec;
}

.detail-drawer,
.metric-drawer {
  box-shadow: -12px 0 28px rgba(19, 0, 65, 0.12);
}

.toast {
  border-radius: 8px;
}

.ai-topbar {
  border-bottom: 1px solid var(--line-strong);
}

.ai-workspace {
  padding-top: 24px;
}

.ai-examples button,
.ai-feedback-buttons button {
  border-radius: 999px;
  transition: border-color 120ms ease, background 120ms ease;
}

.ai-examples button:hover,
.ai-feedback-buttons button:hover {
  background: #fffcec;
  transform: none;
}

.ai-quality {
  border-left-width: 3px;
  border-radius: 0 8px 8px 0;
}

.ai-quality-dot {
  box-shadow: none;
}

.ai-technical pre {
  border-radius: 8px;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.auth-brand::after {
  display: none;
  content: none;
}

.auth-brand p {
  font-size: 32px;
}

.auth-panel {
  background: white;
}

.auth-submit {
  font-weight: 800;
}

@media (max-width: 1050px) {
  :root {
    --sidebar: 70px;
  }

  .brand img {
    width: 50px;
  }
}

/* BM phase 2: period processing and sortable responsibility table */
.attribution-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.attribution-values > span {
  min-width: 0;
}

.attribution-values small,
.attribution-values strong {
  display: block;
}

.attribution-values small {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.attribution-values strong,
.kpi .attribution-values strong {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.attribution-values .activity-detail-trigger {
  display: block;
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.attribution-values > span:last-of-type {
  padding-left: 8px;
  border-left: 2px solid var(--ink);
}

.attribution-values > span:last-of-type small,
.attribution-values > span:last-of-type strong,
.attribution-values > span:last-of-type .activity-detail-trigger {
  color: var(--ink);
}

.processing-kpis .attribution-values {
  margin-top: 16px;
}

.processing-kpis .attribution-values strong {
  font-size: 23px;
}

.processing-kpis .attribution-values .activity-detail-trigger {
  font-size: 23px;
}

.metric-total strong {
  display: block;
  margin-top: 13px;
  font-size: 32px;
  line-height: 1;
}

.metric-total .activity-detail-trigger {
  display: block;
  margin-top: 13px;
  font-size: 32px;
  line-height: 1;
}

.kpi .metric-display.metric-total strong {
  margin-top: 0;
  font-size: 34px;
  line-height: 39px;
}

.staff-label {
  display: block;
  width: max-content;
  max-width: 150px;
  margin-top: 5px;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.staff-label.internal { border-color: rgba(18,128,92,.35); background: rgba(18,128,92,.08); color: var(--success); }
.staff-label.external { border-color: rgba(183,107,8,.35); background: rgba(183,107,8,.08); color: var(--warning); }
.staff-label.mixed { border-color: rgba(60,107,168,.35); background: rgba(60,107,168,.08); color: var(--info); }
.comparison-note {
  margin-top: 14px;
}

.chart-subtitle { margin: 6px 0 0; color: var(--ink-soft); font-size: 10px; }
.reason-total { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end; margin-bottom: 18px; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.reason-total span { color: var(--ink-soft); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.reason-total strong { font-size: 28px; }
.reason-total small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 9px; }

.comparison-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.management-year-comparison .comparison-note {
  margin-top: 14px;
}

.year-comparison-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.year-comparison-summary article {
  min-height: 96px;
  padding: 16px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.year-comparison-summary span,
.year-comparison-summary small {
  display: block;
  color: var(--ink-soft);
  font-size: 9px;
}

.year-comparison-summary span { font-weight: 800; text-transform: uppercase; }
.year-comparison-summary strong { display: block; margin-top: 9px; font-size: 22px; }
.year-comparison-summary small { margin-top: 5px; }
.management-year-chart { height: 340px; margin-top: 28px; }
.management-year-chart canvas { width: 100%; height: 100%; }
.year-comparison-table { max-height: none; margin-top: 28px; overflow-x: auto; }
.year-comparison-table td:first-child { text-transform: capitalize; }

.kpi-open-workload {
  position: relative;
}

.kpi-open-workload > p {
  display: flex;
  align-items: center;
  gap: 5px;
}

.open-workload-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kpi .open-workload-values > span {
  margin: 0;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.kpi .open-workload-values strong {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 24px;
  line-height: 39px;
}

.kpi-open-workload.alert {
  box-shadow: inset 0 4px 0 var(--danger);
}

.kpi-open-workload.alert > p {
  padding-right: 76px;
}

.kpi-open-workload.alert .open-workload-values strong,
.kpi-open-workload.alert #kpiOpenShare {
  color: var(--danger);
}

.kpi-open-workload.alert::after {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(187, 63, 75, .1);
  color: var(--danger);
  content: "Boven 10%";
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.kpi-open-workload > #kpiOpenShare,
.kpi > #kpiStartersDisplay,
.kpi > #kpiStartersDisplay > strong,
.kpi > #kpiStartersDisplay.attribution-values > span {
  width: 100%;
  text-align: center;
}

/* Direct children stay on the same anchors in total and office-split views. */
.kpi > p {
  grid-row: 1;
  height: 40px;
  min-height: 0;
  line-height: 16px;
}

.kpi-open-workload > p {
  align-items: flex-start;
}

.kpi > strong,
.kpi > .metric-display,
.kpi > .open-workload-values {
  grid-row: 2;
  align-self: start;
  margin-top: 0;
}

.kpi > span {
  grid-row: 3;
  align-self: start;
  margin-top: 0;
}

.kpi > strong,
.kpi .metric-display.metric-total strong,
.kpi .open-workload-values strong,
.kpi > #kpiStartersDisplay.attribution-values strong {
  line-height: 1;
}

.kpi > .open-workload-values,
.kpi > #kpiStartersDisplay.attribution-values {
  align-items: start;
}

.kpi > #kpiStartersDisplay.attribution-values > span {
  display: flex;
  flex-direction: column;
}

.kpi > #kpiStartersDisplay.attribution-values strong {
  order: 1;
  margin: 0;
  line-height: 1;
}

.kpi > #kpiStartersDisplay.attribution-values small {
  order: 2;
  margin-top: 5px;
}

.processing-strip {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.processing-strip-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.processing-strip-heading h2,
.processing-strip-heading p {
  margin: 0;
}

.processing-strip-heading > p {
  color: var(--ink-soft);
  font-size: 10px;
}

.processing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}

.processing-kpis article {
  min-width: 0;
  min-height: 102px;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.processing-kpis article:last-child {
  border-right: 0;
}

.processing-kpis article > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.processing-kpis article > strong {
  display: block;
  margin-top: 13px;
  font-size: 32px;
  line-height: 1;
}

.consultant-table-wrap {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.consultant-table th {
  padding: 0;
  background: var(--paper);
  white-space: nowrap;
}

.consultant-table th button {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.consultant-table th button:hover,
.consultant-table th button:focus-visible {
  background: rgba(250, 227, 31, .16);
  color: var(--ink);
}

.consultant-table th button span {
  margin-left: 3px;
  color: var(--info);
}

.consultant-table td:first-child {
  min-width: 170px;
}

.consultant-table td:nth-child(2) {
  min-width: 140px;
  color: var(--ink-soft);
}

.consultant-table tbody tr:hover td {
  background: rgba(250, 227, 31, .07);
}

.consultant-table .system-row td {
  color: var(--ink-soft);
  background: #f3f3f5;
}

@media (max-width: 820px) {
  .year-comparison-summary {
    grid-template-columns: 1fr;
  }

  .comparison-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .processing-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .processing-kpis article:nth-child(2) {
    border-right: 0;
  }

  .processing-kpis article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 590px) {
  .year-comparison-table th:nth-child(3),
  .year-comparison-table td:nth-child(3) {
    display: table-cell;
  }

  .attribution-values {
    gap: 5px;
  }

  .attribution-values strong,
  .kpi .attribution-values strong,
  .processing-kpis .attribution-values strong,
  .attribution-values .activity-detail-trigger,
  .processing-kpis .attribution-values .activity-detail-trigger {
    font-size: 18px;
  }

}

@media (max-width: 590px) {
  .processing-strip-heading {
    display: block;
  }

  .processing-strip-heading > p {
    margin-top: 7px;
  }

  .processing-kpis article {
    min-height: 90px;
    padding: 14px;
  }

  .processing-kpis article > strong {
    font-size: 27px;
  }
}

@media (max-width: 820px) {
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi {
    min-height: 108px;
    border-bottom: 1px solid var(--line);
  }

  .kpi:nth-child(even) {
    border-right: 0;
  }

  .kpi:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 590px) {
  .sidebar {
    border-top: 0;
    box-shadow: 0 -5px 18px rgba(19, 0, 65, 0.14);
  }

  .workspace {
    padding: 18px 14px 92px;
  }

  .topbar,
  .management-topbar,
  .marketing-topbar {
    min-height: 54px;
    padding-bottom: 12px;
  }

  .kpi {
    padding: 15px;
  }

  .kpi:first-child {
    padding-left: 15px;
  }

  .management-tabs,
  .marketing-tabs {
    gap: 5px;
  }
}

/* Management phase 3: compact period comparison and sortable detail tables */
.management-period-comparison {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.period-comparison-table {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}

.period-comparison-table > article {
  display: grid;
  grid-template-columns: minmax(210px, 1.3fr) repeat(3, minmax(130px, 1fr));
  align-items: stretch;
}

.period-comparison-table > article + article {
  border-top: 1px solid var(--line-strong);
}

.period-comparison-table > article > div {
  min-width: 0;
  padding: 15px 17px;
  border-left: 1px solid var(--line);
}

.period-comparison-table > article > div:first-child {
  border-left: 0;
}

.period-comparison-table > article > div > span:not(.metric-badge) {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.period-comparison-table > article > div > strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
  line-height: 1;
}

.period-comparison-table > article > div > small {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 9px;
}

.period-comparison-label {
  background: var(--paper);
}

.period-comparison-label p {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.45;
}

.management-table th:has([data-management-sort]) {
  padding: 0;
}

[data-management-sort] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

[data-management-sort]:hover,
[data-management-sort]:focus-visible {
  background: rgba(250, 227, 31, .16);
  color: var(--ink);
}

[data-management-sort] span {
  margin-left: 3px;
  color: var(--info);
}

@media (max-width: 920px) {
  .period-comparison-table {
    overflow-x: auto;
  }

  .period-comparison-table > article {
    min-width: 760px;
  }
}

@media (max-width: 590px) {
  .management-period-comparison .section-heading.inline {
    display: block;
  }

  .management-period-comparison .section-heading.inline > p {
    margin-top: 7px;
  }
}

/* BM KPI cards: keep value and label anchors identical with or without office split. */
.kpi > p {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.kpi > strong,
.kpi > .metric-display,
.kpi > .open-workload-values {
  width: 100%;
  height: 54px;
  min-height: 0;
  margin: 0;
}

.kpi > strong,
.kpi > .metric-display.metric-total strong {
  line-height: 39px;
}

.kpi > .open-workload-values,
.kpi > #kpiStartersDisplay.attribution-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}

.kpi > .open-workload-values > span,
.kpi > #kpiStartersDisplay.attribution-values > span {
  display: grid;
  grid-template-rows: 39px 15px;
  align-items: start;
  width: 100%;
  height: 54px;
  margin: 0;
  text-align: center;
}

.kpi > .open-workload-values strong,
.kpi > #kpiStartersDisplay.attribution-values strong {
  grid-row: 1;
  align-self: start;
  margin: 0;
  line-height: 39px;
}

.kpi > .open-workload-values small,
.kpi > #kpiStartersDisplay.attribution-values small {
  grid-row: 2;
  align-self: start;
  margin: 0;
  line-height: 10px;
}