/*
 * Kronos Ops — restrained owner workspace
 * This layer intentionally leaves the security and functional selectors in
 * dashboard.html untouched while replacing the visual and interaction model.
 */

:root {
  color-scheme: light;
  --canvas: #f4f5f7;
  --surface: #ffffff;
  --surface-subtle: #f8f9fb;
  --surface-strong: #111827;
  --ink: #17202d;
  --ink-soft: #5c6675;
  --ink-faint: #8b94a1;
  --line: #e3e6ea;
  --line-strong: #ccd2d9;
  --blue: #2457d6;
  --blue-soft: #edf3ff;
  --green: #13795b;
  --green-soft: #edf8f3;
  --amber: #9a6700;
  --amber-soft: #fff7e6;
  --red: #b42318;
  --red-soft: #fff1f0;
  --purple: #6941c6;
  --purple-soft: #f4f0ff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 18px 50px rgba(16, 24, 40, .12);
  --radius: 10px;
  --section-accent: var(--blue);
  --section-rgb: 36, 87, 214;
}

html,
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body::before,
.login-overlay::after,
.owner-hero-main::after,
.owner-hero-side::before,
.section::before { display: none !important; }

::selection { background: #dbe7ff; color: #152a60; }
a { color: var(--blue); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(36, 87, 214, .22);
  outline-offset: 2px;
}

/* Authentication */
.login-overlay {
  background: var(--canvas);
  padding: 28px;
}

.login-overlay::before {
  content: "KRONOSPAY / SECURE OPERATIONS";
  position: fixed;
  top: 28px;
  left: 32px;
  color: #6b7280;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.login-card {
  width: min(100%, 420px);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
}

.login-card::before {
  content: "Protected workspace";
  margin-bottom: 28px;
  padding: 0;
  border: 0;
  color: var(--green);
  font: 700 12px/1.2 Inter, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.login-logo {
  color: var(--ink);
  font-size: 30px;
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.login-subtitle {
  margin: 8px 0 28px;
  color: var(--ink-soft);
  font-size: 14px;
}

.login-field label,
.form-label {
  color: #4b5563;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.login-field input,
.form-input,
.form-select,
.form-textarea,
.search-input {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}

.login-field input:hover,
.form-input:hover,
.form-select:hover,
.form-textarea:hover,
.search-input:hover { border-color: #9aa4b2; }

.login-field input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.search-input:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(36, 87, 214, .10);
}

.login-error { color: var(--red); }
.mfa-secret { background: var(--surface-subtle); color: var(--ink); border-color: var(--line); }

/* App shell */
.container {
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--canvas);
}

.sidebar {
  width: auto;
  padding: 22px 14px 18px;
  border: 0;
  border-right: 1px solid #263041;
  background: #151c28;
  box-shadow: none;
}

.brand-lockup {
  gap: 10px;
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #fff;
  color: #151c28;
  font-size: 15px;
  box-shadow: none;
}

.sidebar-logo { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.sidebar-subtitle { color: #8e99aa; font-size: 11px; }

.nav-items { margin-top: 16px; }
.nav-group-label {
  margin: 22px 10px 7px;
  padding: 0;
  color: #758196;
  font: 650 10px/1.2 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-link {
  min-height: 38px;
  margin: 2px 0;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b7c0ce;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0;
}

.nav-link::before {
  content: attr(data-icon);
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin-right: 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 6px;
  color: #8995a7;
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; transform: none; }
.nav-link.active { background: #fff; color: #182131; box-shadow: none; }
.nav-link.active::before { border-color: #d5dae1; color: var(--blue); background: #f4f7ff; }

.sidebar-owner-card {
  margin: auto 4px 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}
.sidebar-owner-card strong { color: #e8ecf2; font-size: 11px; }
.sidebar-owner-card span { color: #8f9aaa; font-size: 10px; line-height: 1.45; }

.main-content { background: var(--canvas); }
.top-bar {
  min-height: 68px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.top-bar-eyebrow { color: var(--ink-faint); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.top-bar-title { color: var(--ink); font-size: 18px; font-weight: 680; letter-spacing: -.025em; }
.session-info { color: var(--ink-soft); }
.session-info > div:first-child { color: var(--ink); }
.sync-text { color: var(--ink-faint); }
.env-badge { border-color: #b7decf; background: var(--green-soft); color: var(--green); }
.status-pill { border-color: var(--line); background: var(--surface-subtle); color: var(--ink-soft); }
.status-dot { background: var(--green); box-shadow: none; }

.content { max-width: 1480px; padding: 28px; }
.section { animation: none; }
.section::after {
  content: attr(data-section-label);
  display: block;
  margin-top: 28px;
  color: #a0a7b1;
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}

/* Page structure */
.toolbar {
  gap: 18px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}
.toolbar-left,
.toolbar-right { gap: 8px; }
.table-title { color: var(--ink); font-size: 18px; font-weight: 680; letter-spacing: -.025em; }
.section-lede,
.panel-desc,
.small-muted,
.metric-subtext { color: var(--ink-soft); }
.section-lede { max-width: 700px; margin-top: 5px; font-size: 13px; line-height: 1.5; }

.owner-hero {
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr);
  gap: 14px;
  margin-bottom: 14px;
}

.owner-hero-main,
.owner-hero-side {
  min-height: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.owner-hero-kicker,
.pulse-label {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.owner-hero-main h1 {
  max-width: 700px;
  margin: 12px 0 8px;
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 690;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.owner-hero-main p { max-width: 650px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.pulse-score { color: var(--ink); font-size: 24px; font-weight: 680; }
.pulse-row { border-color: var(--line); color: var(--ink-soft); }
.pulse-row strong { color: var(--ink); }

.metrics-row { gap: 10px; margin-bottom: 18px; }
.metric-card {
  min-height: 106px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 3px solid #c9d0d9;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.metric-card:hover { transform: none; }
.metric-card.is-actionable { border-top-color: var(--blue); }
.metric-card.is-actionable:hover { border-color: #aac0f3; background: #fbfcff; transform: none; }
.metric-card.is-warning { border-top-color: #d59b2b; background: var(--surface); }
.metric-card.is-danger { border-top-color: #d64d43; background: var(--surface); }
.metric-card.is-success { border-top-color: #2b9b77; }
.metric-label { color: var(--ink-soft); font-size: 11px; font-weight: 650; letter-spacing: .03em; }
.metric-value { margin-top: 8px; color: var(--ink); font-size: 25px; font-weight: 680; letter-spacing: -.04em; }

.panel,
.table-container,
.transfer-prep-panel,
.split-panel,
.review-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 20px; }
.panel-title { color: var(--ink); font-size: 14px; font-weight: 680; }
.table-container { margin-bottom: 14px; overflow: hidden; }
.table-header { min-height: 58px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.table-container .table-title { font-size: 14px; }
table { color: var(--ink); }
thead { background: var(--surface-subtle); }
th { color: #667080; font-size: 10px; letter-spacing: .04em; border-color: var(--line); }
td { color: var(--ink); font-size: 12px; border-color: var(--line); }
tbody tr:hover { background: #fafbfc; }
.empty-state { background: transparent; color: var(--ink-soft); }
.empty-text { color: var(--ink-soft); }

/* Action language: each category is visibly different and predictable. */
.btn,
.hero-action {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: none;
}
.btn:hover,
.hero-action:hover { transform: none; filter: none; }
.btn-primary,
.hero-action { border-color: var(--blue); background: var(--blue); color: #fff; }
.btn-primary:hover,
.hero-action:hover { border-color: #1948bd; background: #1948bd; }
.btn-secondary,
.hero-action.secondary { border-color: var(--line-strong); background: var(--surface); color: #344054; }
.btn-secondary:hover,
.hero-action.secondary:hover { border-color: #98a2b3; background: var(--surface-subtle); color: var(--ink); }
.btn-danger { border-color: #e7a7a2; background: var(--red-soft); color: var(--red); }
.btn-danger:hover { border-color: var(--red); background: var(--red); color: #fff; }
.btn-small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.action-refresh::before { content: "↻"; margin-right: 6px; color: #667085; }
.action-money { border-color: var(--green) !important; background: var(--green) !important; color: #fff !important; }
.action-money::before { content: "$"; margin-right: 7px; font: 750 11px/1 ui-monospace, monospace; }
.record-security-ack,
.edit-support-access,
.review-engagement-classification { border-color: #c7b8ed; background: var(--purple-soft); color: var(--purple); }
.provision-support-identity,
.record-mailbox-ready,
.provision-support-voice { border-color: #abc8ed; background: var(--blue-soft); color: #244e9b; }
.change-support-access-status,
.revoke-onboarding-invite { border-color: #edc47a; background: var(--amber-soft); color: var(--amber); }

.badge,
.role-badge {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.badge-success { border-color: #abd9c9; background: var(--green-soft); color: var(--green); }
.badge-pending,
.badge-warning { border-color: #efd194; background: var(--amber-soft); color: var(--amber); }
.badge-danger,
.badge-error,
.badge-blocked { border-color: #edb4af; background: var(--red-soft); color: var(--red); }

.employment-route-banner,
.funding-lock,
.onboarding-safe-note,
.review-callout,
.review-alert,
.transfer-safe-note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: none;
}
.employment-route-banner { grid-template-columns: auto 1fr auto; }
.employment-route-code { border-color: #b9c9ee; background: var(--blue-soft); color: var(--blue); }
.employment-route-banner strong,
.funding-lock strong,
.review-callout strong { color: var(--ink); }
.employment-route-banner span { color: var(--ink-soft); }
.funding-lock { border-left-color: var(--green); background: var(--green-soft); }
.onboarding-safe-note { border-left-color: var(--purple); background: var(--purple-soft); }
.review-callout { border-left-color: var(--amber); background: var(--amber-soft); }
.danger-note,
.redaction-confirmation { border-color: #edb4af; background: var(--red-soft); color: var(--red); }

.agent-card,
.pa-task-card,
.payout-item,
.access-readiness-agent,
.scope-control,
.onboarding-once {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--ink);
  box-shadow: none;
}
.agent-avatar { border-radius: 8px; background: #e7ecf3; color: #354052; }
.agent-name,
.pa-task-title,
.payout-item-name { color: var(--ink); }
.agent-meta,
.pa-task-meta,
.payout-item-meta { color: var(--ink-soft); }
.channel-chip { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }

.modal-overlay { background: rgba(15, 23, 42, .42); backdrop-filter: blur(3px); }
.modal,
.review-modal,
.operator-dialog-sheet { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.modal-header { border-color: var(--line); }
.modal-title { color: var(--ink); }
.modal-close { color: var(--ink-soft); background: var(--surface-subtle); }
.review-section { border-color: var(--line); background: var(--surface-subtle); }
.review-section-title,
.review-stat-value { color: var(--ink); }
.review-stat-label { color: var(--ink-soft); }
.review-json,
.result-box { border-color: var(--line); background: #111827; color: #dce4ef; }
.checkbox-row { color: var(--ink-soft); }

.toast-container { color: var(--ink); }
.toast { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.pagination { border-color: var(--line); background: var(--surface); }
.page-btn { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.page-btn.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.backend-error { border-color: #edb4af; background: var(--red-soft); color: var(--red); }
.loading-spinner { border-color: #d6dbe2; border-top-color: var(--blue); }

@media (max-width: 1100px) {
  .container { grid-template-columns: 216px minmax(0, 1fr); }
  .owner-hero { grid-template-columns: 1fr; }
  .top-bar { padding: 0 20px; }
  .content { padding: 22px; }
}

@media (max-width: 920px) {
  .sidebar { width: 240px; }
  .top-bar { min-height: 62px; }
  .top-bar-right { gap: 8px; }
  .session-info,
  .env-badge { display: none; }
  .mobile-menu-btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
}

@media (max-width: 640px) {
  .login-overlay { padding: 16px; }
  .login-overlay::before { top: 18px; left: 18px; }
  .login-card { padding: 28px 22px; }
  .content { padding: 16px; }
  .top-bar { padding: 0 14px; }
  .top-bar-eyebrow { display: none; }
  .owner-hero-main,
  .owner-hero-side,
  .panel { padding: 18px; }
  .employment-route-banner { grid-template-columns: 1fr; }
  .toolbar-right { width: 100%; }
  .toolbar-right > * { flex: 1 1 auto; }
  .btn { min-height: 42px; }
}

/* Production readability overrides. The legacy theme used white headings and
   very faint metadata; keep every owner workflow readable on light panels. */
#onboarding .table-title,
#onboarding .panel-title,
#onboarding .onboarding-person strong,
#voice .table-title,
#transactions .table-title,
#requests .table-title { color: var(--ink) !important; }
#onboarding .section-lede,
#onboarding .panel-desc,
#onboarding .onboarding-detail,
#onboarding .onboarding-retention,
#onboarding .onboarding-person span,
#onboarding .small-muted,
#voice .section-lede,
#transactions .small-muted { color: #566274 !important; }
#onboarding td,
#transactions td { color: #253044 !important; }
#transactions .table-header { gap: 14px; flex-wrap: wrap; }
#transactions .toolbar-right { flex-wrap: wrap; }
#transactionSearch { min-width: 260px; }

/* Operator modals and status cards must remain legible on the light Ops shell. */
.modal-body .detail-grid .k { color: #64748b !important; }
.modal-body .detail-grid .v,
.modal-body .support-msg-body,
.modal-body .support-msg-meta strong { color: #172033 !important; }
#requests .small-muted,
#workforce .small-muted,
#workforce .payout-detail,
#workforce .review-stat-value { color: #566274 !important; }
#workforce [style*="color: var(--success)"],
#workforce .success,
#workforce .badge-completed { color: #166534 !important; }
.support-workspace { display: grid; grid-template-columns: minmax(190px,.42fr) minmax(0,1fr); gap: 14px; }
.support-history { border: 1px solid #dce2ea; border-radius: 10px; padding: 12px; max-height: 42vh; overflow: auto; background: #f8fafc; }
.support-history > .k { margin-bottom: 8px; color: #64748b; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.support-history-item { display: flex; width: 100%; flex-direction: column; gap: 3px; padding: 10px; margin-bottom: 7px; border: 1px solid #dce2ea; border-radius: 8px; background: #fff; color: #172033; text-align: left; cursor: pointer; }
.support-history-item:hover { border-color: #315fca; }
.support-history-item span { color: #566274; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-history-item small { color: #718096; }
.support-draft-feedback { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #475569; font-size: 13px; }
@media (max-width: 760px) { .support-workspace { grid-template-columns: 1fr; } .support-history { max-height: 180px; } }

/* V5: section-specific workspaces. Each operational domain has a distinct
   scan pattern so an operator can identify context before reading labels. */
.section > .toolbar:first-child {
  min-height: 76px;
  padding: 17px 20px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--section-accent);
  border-radius: 9px;
  background: var(--surface);
}
.section > .toolbar:first-child .table-title { font-size: 21px; }

#onboarding { --section-accent: #a15c28; --section-tint: #fff8ef; }
#workforce { --section-accent: #6941c6; --section-tint: #f7f4ff; }
.payroll-console {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #d9dce3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.payroll-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 12px;
}
.payroll-route {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #526071;
  font-size: 12px;
  font-weight: 700;
}
.payroll-route span {
  padding: 7px 9px;
  border: 1px solid #d7dbe2;
  border-radius: 7px;
  background: #f8f9fb;
  color: #202939;
}
.payroll-route b { color: #8a93a2; }
.payroll-readiness {
  margin: 0 18px 12px;
  padding: 9px 11px;
  border: 1px solid #d7dbe2;
  border-radius: 7px;
  background: #f8f9fb;
  color: #4b5565;
  font-size: 12px;
}
.payroll-readiness.is-configured { border-color: #f2d39a; background: #fff9ec; color: #815b13; }
.payroll-readiness.is-blocked { border-color: #efc0bc; background: #fff5f4; color: #9b2c23; }
.monthly-feedback-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 18px 12px;
  padding: 10px 12px;
  border: 1px solid #dce6df;
  border-radius: 8px;
  background: #f6fbf8;
  color: #536071;
  font-size: 11px;
}
.monthly-feedback-strip strong { color: #203a2e; }
.monthly-feedback-strip span { padding-left: 12px; border-left: 1px solid #d6e2da; }
.payroll-bulkbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 18px;
  border-block: 1px solid #e4e7ec;
  background: #fafbfc;
  color: #667085;
  font-size: 12px;
}
.payroll-run-summary { color: #344054; font-weight: 750; }
.payroll-bulk-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.payroll-bulk-actions .search-input { width: 150px; min-width: 0; }
.payroll-roster th,
.payroll-roster td,
.workforce-roster th,
.workforce-roster td { padding: 10px 12px; vertical-align: middle; }
.payroll-person { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.payroll-person strong { color: #1f2937; font-size: 13px; }
.payroll-person small { color: #7a8493; font-size: 11px; }
.payroll-amount { color: #172033; font-variant-numeric: tabular-nums; font-weight: 800; }
.payroll-row-note { margin-top: 2px; color: #7a8493; font-size: 10px; }
.payroll-run-history { border-top: 1px solid #e4e7ec; }
.payroll-run-history > .table-title { padding: 14px 18px 8px; font-size: 14px; }
.payroll-run-history table { margin: 0; }
.workforce-disclosure {
  margin-top: 10px;
  overflow: visible;
  border: 1px solid #dfe2e8;
  border-radius: 9px;
  background: #fff;
}
.workforce-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  color: #202939;
  font-size: 13px;
  font-weight: 800;
}
.workforce-disclosure > summary::-webkit-details-marker { display: none; }
.workforce-disclosure > summary::before { content: '+'; color: #667085; font-size: 18px; line-height: 1; }
.workforce-disclosure[open] > summary::before { content: '−'; }
.workforce-disclosure > summary small { margin-left: auto; color: #7a8493; font-size: 11px; font-weight: 500; }
.workforce-disclosure[open] > summary { border-bottom: 1px solid #e4e7ec; }
.workforce-disclosure .pa-task-composer,
.workforce-disclosure .pa-task-list { margin: 14px 16px; }
.workforce-action-menu > summary {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}
.workforce-action-menu > summary::-webkit-details-marker { display: none; }
.workforce-action-menu[open] > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 320px;
  padding: 10px 0 2px;
}
.access-readiness-compact { display: none; }
.payout-recipient-table th,
.payout-recipient-table td { padding: 10px 11px; vertical-align: middle; }
.payout-review-action {
  border: 1px solid #d9dce3;
  border-left: 4px solid #2859c5;
  border-radius: 8px;
  background: #fafbff;
}
.payout-advanced > summary { cursor: pointer; }
.payout-technical-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(5, minmax(110px, auto));
  gap: 8px 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #e4e7ec;
  color: #667085;
  font-size: 11px;
}
.payout-technical-row > strong { color: #202939; }
.payout-technical-row > details { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .payroll-console-head { align-items: flex-start; flex-direction: column; }
  .payroll-route { flex-wrap: wrap; white-space: normal; }
  .payroll-bulkbar { align-items: flex-start; flex-wrap: wrap; }
  .payroll-bulk-actions { width: 100%; margin-left: 0; }
  .payroll-bulk-actions .search-input { flex: 1; }
  .payroll-bulk-actions .btn { flex: 1.5; }
  .workforce-disclosure > summary { align-items: flex-start; flex-wrap: wrap; }
  .workforce-disclosure > summary small { width: 100%; margin-left: 30px; }
  .workforce-action-menu[open] > div { min-width: 220px; }
  .payout-technical-row { grid-template-columns: 1fr 1fr; }
}
#voice { --section-accent: #087e8b; --section-tint: #effbfc; }
#users { --section-accent: #3b5b7d; --section-tint: #f2f6fa; }
#transactions { --section-accent: #13795b; --section-tint: #eff8f4; }
#requests { --section-accent: #b06b00; --section-tint: #fff8e8; }
#esim { --section-accent: #3374a8; --section-tint: #eff7fc; }
#treasury { --section-accent: #16705a; --section-tint: #eef8f3; }
#powers { --section-accent: #b42318; --section-tint: #fff3f2; }
#compliance { --section-accent: #7a4f9c; --section-tint: #faf5ff; }

#onboarding > .toolbar:first-child,
#workforce > .toolbar:first-child,
#voice > .toolbar:first-child,
#users > .toolbar:first-child,
#transactions > .toolbar:first-child,
#requests > .toolbar:first-child,
#esim > .toolbar:first-child,
#treasury > .toolbar:first-child,
#powers > .toolbar:first-child,
#compliance > .toolbar:first-child { background: var(--section-tint); }

/* People intake reads as a staged checklist, not a dashboard. */
#onboarding .onboarding-once,
#onboarding .review-callout,
#onboarding .onboarding-safe-note {
  border-left: 4px solid #c9894f;
  background: #fffaf3;
}
#onboarding .table-container { border-color: #ead8c7; }

/* Team access uses identity cards with a stronger hierarchy. */
#workforce .agent-card {
  grid-template-columns: 48px minmax(260px, 1fr) auto;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ded5f3;
  border-left: 4px solid #8b6bd1;
  background: #fcfbff;
}
#workforce .agent-avatar { border-radius: 10px; background: #ede7fb; color: #52369a; }
#workforce .channel-chip { border-color: #ddd5ef; background: #f8f5ff; }

/* Voice is an active dispatch surface. */
#voice .table-container { border-top: 4px solid #087e8b; }
#voice thead { background: #eaf7f8; }
#voice .status-pill { border-color: #a9dadd; background: #effbfc; color: #086c76; }

/* Customer directory stays neutral and dense. */
#users .table-container { border-radius: 4px; box-shadow: none; }
#users th, #users td { padding-top: 9px; padding-bottom: 9px; }
#users thead { background: #eef2f6; }

/* Financial activity is a ledger: tighter rows and tabular figures. */
#transactions .table-container,
#treasury .table-container { border-color: #bddccd; border-radius: 5px; }
#transactions table,
#treasury table,
#treasury .result-box { font-variant-numeric: tabular-nums; }
#transactions thead,
#treasury thead { background: #eaf5ef; }
#transactions td:nth-child(n+3),
#treasury td:nth-child(n+2) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Requests are a triage board, visibly separate from customer records. */
#requests .table-container { border-left: 5px solid #d5972f; }
#requests tbody tr { background: #fffdf8; }
#requests tbody tr:hover { background: #fff7e7; }

/* Treasury becomes a deliberate control room with high-contrast modules. */
#treasury > .toolbar:first-child {
  border-color: #1f3a34;
  border-left-color: #52b692;
  background: #14221f;
  color: #f4fbf8;
}
#treasury > .toolbar:first-child .table-title { color: #fff; }
#treasury > .toolbar:first-child .section-lede { color: #a9c4ba; }
#treasury .panel {
  border-top: 3px solid #419777;
  border-radius: 6px;
}
#treasury .result-box { border-color: #c6ddd4; background: #f1f8f5; color: #183f32; }

/* Dangerous owner powers use an explicit action sheet, never ordinary cards. */
#powers > .toolbar:first-child {
  border-color: #e6b6b2;
  border-left-color: #b42318;
  background: #fff4f3;
}
#powers > .panel,
#powers .ops-grid > .panel {
  border: 1px solid #e8bbb7;
  border-radius: 6px;
  background: #fffafa;
  box-shadow: none;
}
#powers .panel-title { color: #8f1e17; }

/* Compliance resembles a case dossier. */
#compliance .panel {
  border: 1px solid #d8c8e5;
  border-left: 5px solid #7a4f9c;
  border-radius: 5px;
  background: #fdfbff;
  box-shadow: none;
}
#compliance .form-label { color: #66417f; }

/* Modal for access grants is a review sheet with an isolated limits block. */
#supportAccessModal .modal { max-width: 820px; }
#supportAccessScopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#supportCreditLimits {
  margin: 14px 0;
  padding: 15px;
  border: 1px solid #c7d8ce;
  border-left: 4px solid var(--green);
  border-radius: 7px;
  background: #f3faf6;
}

@media (max-width: 760px) {
  #supportAccessScopes { grid-template-columns: 1fr; }
  #workforce .agent-card { grid-template-columns: 42px 1fr; }
  #workforce .agent-card .review-actions { grid-column: 1 / -1; }
}

/* V4 — compact owner workspace. Keep the product out of “command center” territory. */
:root {
  --canvas: #f3f4f6;
  --surface: #ffffff;
  --surface-subtle: #f7f8fa;
  --ink: #181d27;
  --ink-soft: #596273;
  --ink-faint: #7d8796;
  --line: #e1e4e9;
  --line-strong: #cbd0d8;
  --blue: #2859c5;
  --green: #147a55;
  --amber: #93610a;
  --red: #b42318;
  --purple: #6941c6;
  --radius: 8px;
  --shadow-sm: none;
  --shadow-lg: 0 18px 45px rgba(16, 24, 40, .14);
}

body { background: var(--canvas); font-size: 14px; }
.owner-hero-main::before,
.owner-hero-main::after,
.metric-card::after,
.sidebar-owner-card::before,
.onboarding-safe-note::before,
.funding-lock::before,
#voice .table-container::before,
#requests .table-container::before,
#esim .table-container::before,
#powers > .panel::after,
#powers .ops-grid > .panel::after,
#compliance .panel::after { display: none !important; content: none !important; }
.container { grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { padding: 18px 12px 14px; background: #1d2430; border-right-color: #111720; }
.brand-lockup { padding: 0 8px 17px; gap: 9px; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; font-size: 13px; }
.sidebar-logo { font-size: 13px; }
.sidebar-subtitle { font-size: 10px; text-transform: none; letter-spacing: 0; }
.nav-items { margin-top: 12px; }
.nav-group-label { margin: 17px 9px 5px; color: #7f8a9b; font-size: 9px; letter-spacing: .08em; }
.nav-link { min-height: 36px; padding: 0 9px; border-radius: 6px; font-size: 12.5px; }
.nav-link::before {
  width: 21px; height: 21px; margin-right: 8px; border: 0; border-radius: 5px;
  background: rgba(255,255,255,.055); color: #a4afbf; font-size: 9px;
}
.nav-link.active { background: #fff; color: #161c26; }
.nav-link.active::before { background: #eaf0ff; color: var(--blue); }
.nav-link-sensitive { color: #e5a09a; }
.nav-link-sensitive::before { background: rgba(239,68,68,.13); color: #f2aaa4; }
.sidebar-owner-card { margin: auto 3px 0; padding: 10px; }

.top-bar { min-height: 60px; padding: 0 24px; }
.top-bar-eyebrow { color: var(--ink-faint); font-size: 8px; letter-spacing: .08em; }
.top-bar-title { font-size: 16px; letter-spacing: -.015em; }
.status-pill,
.env-badge { font-family: inherit; font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.content { width: 100%; max-width: 1360px; padding: 24px; }
.section::after { display: none; }

.owner-hero { grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr); gap: 12px; margin-bottom: 12px; }
.owner-hero-main,
.owner-hero-side { padding: 22px; border-radius: var(--radius); }
.owner-hero-main h1 { margin: 7px 0 5px; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.035em; }
.owner-hero-main p { max-width: 620px; font-size: 13px; line-height: 1.5; }
.owner-hero-kicker,
.pulse-label { color: var(--ink-faint); font-size: 10px; letter-spacing: .04em; text-transform: none; }
.owner-hero-side { background: var(--surface-subtle); }
.pulse-score { margin-top: 5px; font-size: 20px; letter-spacing: -.025em; }
.pulse-row { padding: 8px 0; font-size: 11.5px; }
.pulse-row strong { font-weight: 650; }
.hero-actions { margin-top: 17px; gap: 8px; }

.metrics-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.metric-card { min-height: 94px; padding: 16px; border-radius: var(--radius); }
.metric-card::before { display: none; }
.metric-label { margin-bottom: 9px; color: var(--ink-soft); font-size: 11px; letter-spacing: 0; text-transform: none; }
.metric-value { margin: 0; color: var(--ink); font-size: 27px; font-weight: 670; letter-spacing: -.035em; }
.metric-subtext { margin-top: 5px; font-size: 10.5px; }
.metric-card.is-actionable { border-color: #b9c8eb; background: #f5f8ff; }
.metric-card.is-actionable:hover { border-color: var(--blue); background: #eef3ff; transform: none; }

.toolbar { margin-bottom: 14px; gap: 12px; }
.table-title { font-size: 17px; }
.section-lede { margin-top: 3px; font-size: 12px; }
.panel,
.table-container { margin-bottom: 14px; border-radius: var(--radius); }
.panel { padding: 18px; }
.panel-title { font-size: 15px; }
.panel-desc { margin: 4px 0 15px; padding-bottom: 13px; font-size: 11.5px; }
.table-header { min-height: 54px; padding: 13px 16px; }
th { padding: 10px 14px; color: #667085; font-size: 9.5px; letter-spacing: .045em; }
td { padding: 11px 14px; color: #303846; font-size: 12px; }
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: #f5f7fa; }

.btn,
.hero-action {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 7px;
  font-size: 11.5px; font-weight: 650; box-shadow: none; transform: none;
}
.btn:hover,
.hero-action:hover { transform: none; box-shadow: none; }
.btn-primary,
.hero-action { border-color: #1f4dab; background: var(--blue); color: #fff; }
.btn-primary:hover,
.hero-action:hover { background: #204ca8; }
.btn-secondary,
.hero-action.secondary { background: #fff; color: #344054; }
.btn-secondary:hover,
.hero-action.secondary:hover { background: #f5f6f8; }
.btn-small { min-height: 32px; padding: 0 10px; font-size: 10.5px; }

/* Action families: operators can identify intent before reading every label. */
.action-refresh,
#refreshBtn,
#refreshVoiceBtn,
#refreshOnboardingBtn,
#refreshWorkforceBtn { border-color: #cbd0d8; background: #fff; color: #4b5565; }
.action-access,
.provision-support-identity,
.record-mailbox-ready,
.provision-support-voice,
.edit-support-access { border-color: #a8bce8; background: #edf3ff; color: #244e9b; }
.record-security-ack,
.review-engagement-classification { border-color: #c9b9ec; background: #f4f0ff; color: var(--purple); }
.action-money,
#preparePayrollBtn { border-color: var(--green) !important; background: var(--green) !important; color: #fff !important; }
.btn-danger,
.revoke-onboarding-invite { border-color: #e1aaa5; background: #fff1f0; color: var(--red); }
.change-support-access-status { border-color: #e4c27f; background: #fff7e6; color: var(--amber); }

.form-input,
.form-select,
.form-textarea,
.search-input { min-height: 38px; padding: 8px 10px; border-radius: 7px; font-size: 12px; }
.form-group { margin-bottom: 14px; }
.form-label { margin-bottom: 5px; font-size: 10.5px; }
.badge,
.role-badge { padding: 3px 7px; font-size: 9.5px; }

.employment-route-banner,
.funding-lock,
.onboarding-safe-note,
.review-callout,
.review-alert,
.transfer-safe-note { padding: 12px 14px; border-radius: 7px; font-size: 11.5px; }
.agent-card,
.pa-task-card,
.payout-item,
.access-readiness-agent,
.scope-control,
.onboarding-once { border-radius: 7px; }

@media (max-width: 1100px) {
  .container { grid-template-columns: 208px minmax(0, 1fr); }
  .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .container { grid-template-columns: 1fr; }
  .sidebar { width: 232px; }
  .owner-hero { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .content { padding: 14px; }
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 88px; padding: 14px; }
  .metric-value { font-size: 24px; }
  .owner-hero-main,
  .owner-hero-side,
  .panel { padding: 16px; }
}

/* Support inbox: a persistent conversation workspace, not another data table. */
#requests {
  --section-accent: #2457d6;
  --section-tint: #f4f7ff;
}

.support-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid #dbe3f3;
  border-radius: 10px;
  background: #f7f9ff;
}

.support-commandbar-kicker {
  margin-bottom: 3px;
  color: #52637a;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
}

.support-commandbar h2 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.support-commandbar p {
  margin: 4px 0 0;
  color: #647084;
  font-size: 12px;
}

.support-commandbar-actions,
.support-composer-tools,
.support-thread-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.support-live-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #326458;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.support-live-state > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d73;
  box-shadow: 0 0 0 4px rgba(31, 157, 115, .11);
}

.support-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef1f5;
}

.support-tab {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.support-tab.active {
  background: #fff;
  color: #172033;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

.support-tab span {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  place-items: center;
  border-radius: 999px;
  background: #e9eef9;
  color: #2457d6;
  font-size: 9px;
}

.support-inbox-shell {
  display: grid;
  grid-template-columns: minmax(285px, 30%) minmax(0, 1fr);
  height: clamp(580px, calc(100vh - 220px), 760px);
  min-height: 580px;
  overflow: hidden;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.support-conversation-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid #e3e7ed;
  background: #fbfcfd;
}

.support-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 7px;
  padding: 12px;
  border-bottom: 1px solid #e6e9ee;
}

.support-list-toolbar .search-input,
.support-list-toolbar .form-select {
  min-width: 0;
  width: 100%;
}

.support-list-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  color: #7b8493;
  font-size: 10px;
}

.support-list-summary strong { color: #4b5565; font-weight: 650; }
.support-conversation-items { flex: 1; min-height: 0; overflow-y: auto; }

.support-list-empty {
  display: grid;
  min-height: 170px;
  place-content: center;
  color: #7b8493;
  font-size: 12px;
  text-align: center;
}

.support-conversation-card {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-top: 1px solid #edf0f3;
  border-left: 3px solid transparent;
  background: #fff;
  color: #172033;
  cursor: pointer;
  text-align: left;
}

.support-conversation-card:hover { background: #f7f9fc; }
.support-conversation-card.active { border-left-color: #2457d6; background: #edf3ff; }
.support-conversation-card.is-unread .support-conversation-person { font-weight: 750; }

.support-conversation-top,
.support-conversation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.support-conversation-person {
  min-width: 0;
  overflow: hidden;
  color: #202939;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-conversation-top time { color: #8a94a3; font-size: 9px; white-space: nowrap; }
.support-conversation-subject { margin-top: 5px; overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.support-conversation-preview { margin: 3px 0 8px; overflow: hidden; color: #687386; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.support-conversation-footer { justify-content: flex-start; color: #7c8796; font-size: 9px; }
.support-conversation-footer .unread-count { margin-left: auto; padding: 2px 6px; border-radius: 999px; background: #2457d6; color: #fff; font-weight: 750; }

.support-conversation-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.support-thread-empty {
  display: grid;
  height: 100%;
  padding: 32px;
  place-content: center;
  justify-items: center;
  color: #7b8493;
  text-align: center;
}

.support-thread-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 12px;
  background: #edf3ff;
  color: #2457d6;
  font-size: 18px;
}

.support-thread-empty h3 { color: #263142; font-size: 15px; }
.support-thread-empty p { max-width: 360px; margin-top: 5px; font-size: 11px; }

.support-thread-content {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.support-identity-bar.app-hidden { display: none; }

.support-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 9px;
  border-bottom: 0;
}

.support-thread-heading { min-width: 0; flex: 1; }
.support-thread-heading h3 { overflow: hidden; color: #172033; font-size: 15px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.support-thread-heading > div { margin-top: 2px; overflow: hidden; color: #687386; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.support-mobile-back { display: none; border: 0; background: transparent; color: #475467; cursor: pointer; font-size: 18px; }

.support-thread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
  border-bottom: 1px solid #e8ebef;
}

.support-meta-chip {
  padding: 3px 7px;
  border: 1px solid #dfe4ea;
  border-radius: 999px;
  background: #f8fafc;
  color: #5c6675;
  font-size: 9px;
  font-weight: 650;
}

.support-meta-chip.is-priority { border-color: #efd9a8; background: #fff8e8; color: #8a5c00; }
.support-meta-chip.is-member { border-color: #cfd9ef; background: #f1f5ff; color: #35578d; }

#requests .support-thread {
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 18px clamp(16px, 3vw, 36px);
  gap: 10px;
  overflow-y: auto;
  background: #f6f8fa;
}

#requests .support-msg {
  width: fit-content;
  max-width: min(76%, 680px);
  padding: 9px 11px;
  border: 1px solid #dde3ea;
  border-left-width: 1px;
  border-radius: 10px 10px 10px 3px;
  background: #fff;
  color: #172033;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}

#requests .support-msg.agent {
  align-self: flex-end;
  border-color: #c7d5f0;
  border-radius: 10px 10px 3px 10px;
  background: #eaf1ff;
}

#requests .support-msg.system {
  align-self: center;
  max-width: 88%;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #687386;
  text-align: center;
}

#requests .support-msg-meta { margin-bottom: 3px; color: #7c8796; font-size: 9px; }
#requests .support-msg-body { color: #263142; font-size: 12px; line-height: 1.45; }

.support-composer {
  padding: 12px 14px;
  border-top: 1px solid #e4e8ed;
  background: #fff;
}

.support-reply-box {
  min-height: 72px;
  max-height: 180px;
  resize: vertical;
}

.support-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.support-safe-copy { color: #7b8493; font-size: 9.5px; }
.support-draft-feedback { margin-top: 8px; }

.support-history-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 5;
  width: min(340px, 86%);
  padding: 14px;
  overflow-y: auto;
  border-left: 1px solid #dfe4ea;
  background: #f8fafc;
  box-shadow: -14px 0 32px rgba(16, 24, 40, .09);
}

.support-history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #253044;
  font-size: 12px;
}

.support-history-title button { border: 0; background: transparent; color: #64748b; cursor: pointer; font-size: 22px; }
.support-history-item { margin-bottom: 8px; }

.support-internal-note {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0e5eb;
}

.support-internal-note label,
.support-history-group > strong {
  color: #344054;
  font-size: 10px;
  font-weight: 700;
}

.support-internal-note .form-textarea { min-height: 70px; }
.support-internal-note .btn { justify-self: start; }
.support-history-group { display: grid; gap: 7px; margin-bottom: 16px; }

.support-note-card {
  padding: 9px;
  border: 1px solid #e0e5eb;
  border-radius: 7px;
  background: #fff;
}

.support-note-card span { color: #8a94a3; font-size: 8.5px; }
.support-note-card p { margin: 4px 0 0; color: #475467; font-size: 10px; line-height: 1.45; white-space: pre-wrap; }

.support-case-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.support-case-toolbar > div:first-child { display: grid; gap: 2px; }
.support-case-toolbar strong { color: #172033; font-size: 13px; }
.support-case-toolbar span { color: #687386; font-size: 10px; }
.support-case-toolbar .form-select { width: auto; min-width: 140px; }
#requests .support-case-table { border: 1px solid #dfe4ea; border-radius: 9px; }

@media (max-width: 920px) {
  .support-inbox-shell { grid-template-columns: 260px minmax(0, 1fr); }
  .support-safe-copy { display: none; }
}

@media (max-width: 720px) {
  .support-commandbar,
  .support-case-toolbar { align-items: flex-start; flex-direction: column; }
  .support-commandbar-actions,
  .support-case-toolbar .toolbar-right { width: 100%; }
  .support-inbox-shell { display: block; height: calc(100vh - 210px); min-height: 520px; }
  .support-conversation-list,
  .support-conversation-pane { height: 100%; }
  .support-conversation-pane { display: none; }
  .support-inbox-shell.thread-open .support-conversation-list { display: none; }
  .support-inbox-shell.thread-open .support-conversation-pane { display: block; }
  .support-mobile-back { display: inline-block; }
  .support-thread-actions { gap: 5px; }
  .support-composer-tools { align-items: flex-start; flex-direction: column; }
  #requests .support-msg { max-width: 88%; }
}

/* V6 — one calm Kronos workspace. */
:root {
  --canvas: #f6f7f9;
  --surface: #fff;
  --surface-subtle: #f7f8fa;
  --ink: #171a21;
  --ink-soft: #626b79;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --blue: #2f5bd3;
  --radius: 12px;
}

body { background: var(--canvas); }
[hidden] { display: none !important; }
.container { grid-template-columns: 216px minmax(0, 1fr); }
.sidebar { padding: 22px 12px 16px; background: #171a21; border: 0; }
.brand-lockup { margin-bottom: 8px; border-color: rgba(255,255,255,.08); }
.brand-mark { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #fff; color: #171a21; }
.sidebar-logo { font-size: 14px; }
.sidebar-subtitle { color: #8f98a8; }
.nav-group-label { margin-top: 20px; color: #697386; }
.nav-link { min-height: 42px; margin: 2px 0; border-radius: 10px; color: #bdc5d2; font-size: 13px; }
.nav-link::before { width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.06); }
.nav-link:hover { background: rgba(255,255,255,.07); }
.nav-link.active { background: #fff; color: #171a21; }
.nav-more { margin-top: 16px; }
.nav-more summary { padding: 9px 10px; color: #8f98a8; cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.nav-more summary::after { float: right; content: "+"; }
.nav-more details[open] summary::after { content: "−"; }
.nav-more-items { display: grid; margin-top: 4px; }
.sidebar-owner-card { border: 0; border-radius: 10px; background: rgba(255,255,255,.055); }

.top-bar { min-height: 64px; padding: 0 28px; background: rgba(255,255,255,.96); }
.top-bar::before,
.section.active::before { display: none; }
.top-bar-eyebrow { display: none; }
.top-bar-title { font-size: 18px; font-weight: 700; }
.top-bar-actions #refreshBtn,
.env-badge,
.sync-text { display: none; }
.session-info { border-left: 0; }
.content { max-width: 1240px; padding: 28px 32px 48px; }

.section > .toolbar:first-child,
#onboarding > .toolbar:first-child,
#workforce > .toolbar:first-child,
#voice > .toolbar:first-child,
#users > .toolbar:first-child,
#transactions > .toolbar:first-child,
#requests > .toolbar:first-child,
#esim > .toolbar:first-child,
#treasury > .toolbar:first-child,
#powers > .toolbar:first-child,
#compliance > .toolbar:first-child {
  min-height: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
.section > .toolbar:first-child .table-title { font-size: 24px; letter-spacing: -.035em; }
.section-lede { max-width: 620px; font-size: 13px; }

.owner-hero { display: block; }
.owner-hero-main { padding: 28px; border-radius: 14px; }
.owner-hero-main h1 { font-size: 32px; }
.owner-hero-side { display: none; }
.metrics-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { min-height: 96px; border-top-width: 1px; border-radius: 12px; }
.panel,
.table-container,
.payroll-console,
.workforce-disclosure { border-color: var(--line); border-radius: 12px; box-shadow: none; }
th { color: #737b88; letter-spacing: 0; text-transform: none; }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: #f8f9fb; }
.btn { border-radius: 9px; }
.btn-primary { border-color: var(--blue); background: var(--blue); }
.form-input,
.form-select,
.form-textarea,
.search-input { border-radius: 9px; background: #fff; }

/* Calls: a browser phone first, queue second. */
#voice { --section-accent: var(--blue); }
.voice-shell { margin-bottom: 18px; }
.voice-phone-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid #dbe2f4;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, #f4f7ff);
}
.voice-phone-card[data-call-state="active"] { border-color: #a9c7b9; background: linear-gradient(135deg, #fff, #f2faf6); }
.voice-phone-card[data-call-state="held"] { border-color: #e1c988; background: linear-gradient(135deg, #fff, #fffaec); }
.voice-phone-card[data-call-state="connecting"] { border-color: #b9c8ec; }
.voice-phone-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #eaf0ff; color: var(--blue); font-size: 21px; }
.voice-phone-copy { display: flex; min-width: 0; flex-direction: column; }
.voice-phone-copy > span { color: var(--ink-soft); font-size: 11px; }
.voice-phone-copy > strong { color: var(--ink); font-size: 20px; line-height: 1.25; }
.voice-phone-copy > small { max-width: 720px; color: var(--ink-soft); line-height: 1.45; }
.voice-primary-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 1fr) minmax(340px, auto);
  gap: 12px 18px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid #e4e8f1;
}
.voice-call-buttons { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.voice-call-buttons .btn { flex: 0 0 auto; white-space: nowrap; }
.voice-sound-toggle[aria-pressed="true"] { border-color: #9bb2e5; background: #edf3ff; color: #244e9b; }
.voice-device-controls { display: grid; grid-template-columns: repeat(2, minmax(160px, 220px)); gap: 8px; min-width: 0; justify-content: end; }
.voice-device-field { display: grid; gap: 4px; min-width: 0; color: var(--ink-soft); font-size: 10px; font-weight: 650; }
.voice-audio-output { width: 100%; min-width: 0; max-width: none; height: 38px; padding: 0 34px 0 10px; text-overflow: ellipsis; }
.voice-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.voice-page-heading .table-title { font-size: 24px; }
.voice-online-count { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.voice-online-count b { color: var(--green); }
.voice-settings { position: relative; }
.voice-settings > summary { min-height: 34px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: #4b5563; cursor: pointer; font-size: 11px; font-weight: 650; list-style: none; }
.voice-settings > div { position: absolute; right: 0; z-index: 10; display: grid; gap: 6px; width: 160px; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(15,23,42,.12); }
.voice-settings .btn { width: 100%; }
#voice .table-container { border-top: 1px solid var(--line); }
#voice thead { background: var(--surface-subtle); }
.voice-row-actions { display: flex; max-width: 330px; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.voice-row-actions .btn { flex: 0 1 auto; white-space: nowrap; }
#voiceQueueTable { min-width: 880px; }
#voiceQueueTable th:last-child,
#voiceQueueTable td:last-child { width: 330px; }
.voice-empty { min-height: 180px; }
.voice-empty .empty-text { display: grid; gap: 4px; }
.voice-empty strong { color: var(--ink); font-size: 14px; }

/* Chat suggestions stay optional and editable. */
.support-commandbar { padding: 18px 20px; border-color: var(--line); background: #fff; }
.support-inbox-shell { border-radius: 14px; }
.support-ai-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 0; }
.support-ai-choice { min-width: 0; padding: 10px; border: 1px solid #dfe4ea; border-radius: 10px; background: #f8fafc; color: var(--ink); cursor: pointer; text-align: left; }
.support-ai-choice:hover { border-color: #9fb3e9; background: #f3f6ff; }
.support-ai-choice.selected { border-color: var(--blue); background: #edf3ff; box-shadow: 0 0 0 2px rgba(47,91,211,.10); }
.support-ai-choice span { display: block; margin-bottom: 5px; color: var(--blue); font-size: 10px; font-weight: 750; }
.support-ai-choice p { display: -webkit-box; overflow: hidden; color: #4f5968; font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.support-composer { background: #fff; }

/* Pay: the agent sees only their next action and history. */
.agent-pay-summary { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.agent-pay-next,
.agent-pay-stat { display: flex; min-height: 112px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; flex-direction: column; justify-content: center; }
.agent-pay-next { border-color: #cfd9f4; background: #f7f9ff; }
.agent-pay-label,
.agent-pay-stat span { color: var(--ink-soft); font-size: 11px; }
.agent-pay-next strong { color: var(--ink); font-size: 20px; }
.agent-pay-next > span:last-child { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.agent-pay-stat strong { margin-top: 5px; color: var(--ink); font-size: 22px; }
.agent-pay-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 14px; }
.agent-pay-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.agent-pay-form-grid .full { grid-column: 1 / -1; }
.agent-pay-history { border-top: 1px solid var(--line); }
.agent-pay-history-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.agent-pay-history-row > div { display: flex; flex-direction: column; }
.agent-pay-history-row > div:last-child { align-items: flex-end; text-align: right; }
.agent-pay-history-row strong { color: var(--ink); font-size: 12px; }
.agent-pay-history-row span { color: var(--ink-soft); font-size: 10px; }

/* Compliance is two plain tasks, not a dossier. */
#compliance { --section-accent: var(--blue); }
#compliance .panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
#compliance .form-label { color: #4b5563; }
.compliance-advanced { opacity: .72; }
.identity-provider-state { color: var(--ink-soft); background: var(--surface-subtle); }

@media (max-width: 980px) {
  .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-ai-choices { grid-template-columns: 1fr; }
  .agent-pay-grid { grid-template-columns: 1fr; }
  .voice-primary-actions { grid-template-columns: 1fr; }
  .voice-device-controls { justify-content: start; }
}

@media (max-width: 920px) {
  .container { grid-template-columns: 1fr; }
  .content { padding: 22px; }
}

@media (max-width: 640px) {
  .content { padding: 16px; }
  .voice-phone-card { grid-template-columns: auto 1fr; }
  .voice-primary-actions { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .voice-call-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice-call-buttons .btn { width: 100%; }
  .voice-device-controls { grid-template-columns: 1fr; }
  .voice-page-heading { align-items: flex-start; flex-direction: column; }
  .agent-pay-summary { grid-template-columns: 1fr; }
  .agent-pay-next,
  .agent-pay-stat { min-height: 94px; }
  .agent-pay-form-grid { grid-template-columns: 1fr; }
  .agent-pay-form-grid .full { grid-column: auto; }
}

/* Case-bound identity checks and restricted manual review */
.support-identity-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid #e4e8ed;
  border-bottom: 1px solid #e4e8ed;
  background: #f8fafc;
}

.support-identity-bar > div:first-child {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.support-identity-label {
  color: #687386;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#supportIdentityState { color: #172033; font-size: 11px; }
#supportIdentityHint {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #687386;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-review-panel { padding: 0; overflow: hidden; }
.identity-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 12px;
}
.identity-review-heading .panel-desc { margin: 4px 0 0; padding: 0; border: 0; }
.identity-provider-state {
  margin: 0 20px 14px;
  padding: 9px 11px;
  border: 1px solid #dfe4ea;
  border-radius: 7px;
  background: #f8fafc;
  color: #536071;
  font-size: 10.5px;
}
.identity-provider-state.is-ready { border-color: #b9e2d2; background: #f0faf6; color: #13795b; }
.identity-provider-state.is-warning { border-color: #f2d49d; background: #fff9ed; color: #8a5d00; }
.identity-provider-state.is-error { border-color: #f4bbb7; background: #fff3f2; color: #b42318; }
.identity-review-reason { color: #687386; font-size: 9.5px; }
.identity-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.identity-evidence-card { display: grid; gap: 5px; color: #687386; font-size: 10px; }
.identity-evidence-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #eef1f5;
}

@media (max-width: 720px) {
  .support-identity-bar,
  .identity-review-heading { align-items: flex-start; flex-direction: column; }
  #supportIdentityHint { white-space: normal; }
  .identity-evidence-grid { grid-template-columns: 1fr; }
}
/* Owner-only CSAT summary beside the live inbox controls. */
.support-feedback-leader { max-width: 290px; padding: 8px 10px; border: 1px solid #d9e4df; border-radius: 10px; background: #f3faf6; color: #276749; font-size: 11px; font-weight: 700; }