:root {
  --bg: #f4f6f9;
  --bg-alt: #eaf0f6;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #d6deea;
  --line-strong: #b9c7d8;
  --text: #0f172a;
  --muted: #526277;
  --accent: #0f4c81;
  --accent-strong: #0a3b64;
  --accent-soft: #e7f0f8;
  --success: #166534;
  --success-soft: #eaf7ef;
  --warning: #92400e;
  --warning-soft: #fff6e5;
  --danger: #991b1b;
  --danger-soft: #fff0ef;
  --radius: 4px;
  --shadow: 0 12px 30px rgba(15, 23, 42, .08);
  --space-1: .4rem;
  --space-2: .65rem;
  --space-3: .95rem;
  --space-4: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background:
    linear-gradient(140deg, rgba(15, 76, 129, .07), transparent 46%),
    repeating-linear-gradient(0deg, var(--bg), var(--bg) 28px, var(--bg-alt) 29px, var(--bg-alt) 30px);
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: "Sora", "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .7rem; color: #fff; background: #0d1b29; }
.skip-link:focus { left: 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 274px minmax(0, 1fr); }
.sidebar {
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  color: #dce7f0;
  background: #112c46;
  border-right: 1px solid #2a445b;
}
.brand { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent); background: #fff; border-radius: var(--radius); font: 700 .9rem "Sora", sans-serif; }
.brand strong { display: block; font: 700 1.1rem "Sora", sans-serif; }
.brand small { display: block; margin-top: .15rem; color: #bdccd9; font-size: .78rem; }
.workspace-card { padding: .65rem; border: 1px solid #315571; border-radius: var(--radius); background: rgba(255,255,255,.04); }
.workspace-card span, .suite-links > span, .account-card > span { display: block; color: #aebfce; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.workspace-card strong { display: block; margin-top: .2rem; font-size: .9rem; overflow-wrap: anywhere; }
.workspace-card small { display: block; margin-top: .15rem; color: #b9c9d7; font-size: .76rem; }
.nav { display: grid; gap: .35rem; }
.nav-link { padding: .58rem .65rem; color: #dce7f0; background: transparent; border: 1px solid #315571; border-radius: var(--radius); text-decoration: none; }
.nav-link:hover { border-color: #5d7b94; }
.nav-link.is-active { color: #fff; background: var(--accent); border-color: #4e7cad; }
.suite-links { display: grid; gap: .35rem; padding-top: .3rem; }
.suite-links a { color: #cad8e4; font-size: .82rem; text-decoration: none; }
.suite-links a:hover { color: #fff; text-decoration: underline; }
.account-card { margin-top: auto; padding-top: .8rem; display: grid; gap: .25rem; border-top: 1px solid #315571; }
.account-card strong { font-size: .88rem; overflow-wrap: anywhere; }
.account-card small { color: #b9c9d7; overflow-wrap: anywhere; }
.account-card a { margin-top: .4rem; display: inline-flex; justify-content: center; padding: .45rem .6rem; color: var(--accent-strong); background: #e5f0fb; border: 1px solid #9fc2e8; border-radius: var(--radius); font-weight: 700; text-decoration: none; }

.main { min-width: 0; min-height: 100vh; padding: var(--space-3); overflow-x: hidden; }
.topbar { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.topbar h1 { margin-top: .1rem; font-size: 1.45rem; }
.topbar-action { margin-left: auto; color: var(--accent); font-size: .88rem; font-weight: 700; text-decoration: none; }
.topbar-action:hover { text-decoration: underline; }
.menu-button { display: none; padding: .45rem .65rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.eyebrow, .kicker { color: var(--accent); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.page-body { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
.surface { padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.surface h2 { margin-top: .15rem; font-size: 1.2rem; }
.surface p { color: var(--muted); }
.private-access-panel { border-left: 4px solid var(--accent); }
.private-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.private-info-grid > div { min-width: 0; padding: .7rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.private-info-grid > .private-secret { background: var(--warning-soft); border-color: #d6b999; }
.private-info-grid span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.private-info-grid strong, .private-info-grid code { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.private-info-grid code { padding: .35rem .45rem; color: var(--accent-strong); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: "IBM Plex Mono", Consolas, monospace; font-size: .9rem; }
.private-access-note { margin-top: var(--space-2); font-size: .86rem; }
.member-action-panel { display: grid; gap: var(--space-3); }
.member-action-controls { grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); align-items: end; }
.member-action-buttons { justify-content: flex-start; padding-bottom: .05rem; }
.selected-person-details { display: grid; gap: var(--space-2); }
.selected-person-header { padding: .75rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.selected-person-header h3 { margin-top: .3rem; font-size: 1.05rem; }
.selected-person-header small { display: block; margin-top: .2rem; color: var(--muted); overflow-wrap: anywhere; }
.selected-person-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.selected-person-grid > div { min-width: 0; padding: .65rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.selected-person-grid span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.selected-person-grid strong { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.action-private-login { display: grid; gap: var(--space-2); padding: .75rem; background: var(--warning-soft); border: 1px solid #d6b999; border-radius: var(--radius); }
.action-private-login[hidden] { display: none; }
.action-private-login h3 { margin-top: .15rem; font-size: 1rem; }
.action-private-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.action-private-grid > div { min-width: 0; padding: .65rem; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.action-private-grid span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.action-private-grid strong, .action-private-grid code { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.action-private-grid code { font-family: "IBM Plex Mono", Consolas, monospace; color: var(--accent-strong); }

.hero { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.hero h2 { margin-top: .2rem; font-size: 1.35rem; }
.hero p { max-width: 720px; margin-top: .35rem; color: var(--muted); }
.hero.compact { min-height: 0; }
.role-badge, .badge { display: inline-flex; align-items: center; width: max-content; padding: .2rem .5rem; color: var(--success); background: var(--success-soft); border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: capitalize; }
.badge.is-muted { color: var(--muted); background: #edf1f5; }
.badge.is-warn { color: var(--warning); background: var(--warning-soft); }
.badge.is-danger { color: var(--danger); background: var(--danger-soft); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: var(--space-2); }
.metric-grid.compact { margin: var(--space-3) 0; }
.metric-card { padding: .8rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.metric-card span { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.metric-card strong { display: block; margin-top: .25rem; color: var(--accent-strong); font: 700 1.35rem "Sora", sans-serif; }
.dashboard-grid, .management-grid, .split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.split-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr); }
.form-column, .stack-list, .card-list { display: grid; gap: var(--space-2); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.section-heading h2 { margin-top: .15rem; }
.section-heading p { margin-top: .3rem; }
.section-heading > a { color: var(--accent); font-size: .86rem; font-weight: 700; text-decoration: none; }
.section-heading > a:hover { text-decoration: underline; }
.stack-item, .organization-card { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.stack-item strong, .organization-card strong { display: block; }
.stack-item small, .organization-card small { display: block; margin-top: .15rem; color: var(--muted); }
.organization-card.is-active { background: var(--accent-soft); border-color: #9fc2e8; box-shadow: inset 3px 0 var(--accent); }
.structure-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .65rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.structure-row > div:first-of-type { display: grid; gap: .2rem; }
.structure-row small { color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border: 1px solid transparent; border-radius: var(--radius); font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-secondary { color: var(--text); background: var(--surface); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-soft); }
.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: #d5a6a1; }
.btn-danger:hover { background: #fce7e4; }
.btn-small { padding: .3rem .45rem; font-size: .78rem; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: 1.25rem; cursor: pointer; }
.icon-button:hover { background: var(--surface-soft); }

.form-card { display: grid; gap: .8rem; }
.form-card h2 { margin-bottom: .1rem; }
label { display: grid; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
input, select, textarea { width: 100%; padding: .52rem .58rem; color: var(--text); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); }
input[readonly] { color: var(--muted); background: var(--surface-soft); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(15, 76, 129, .18); border-color: var(--accent); }
.field-row, .inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.inline-form { grid-template-columns: 1fr auto; margin-top: var(--space-3); }
.check-row { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.check-row input { width: auto; margin-top: .15rem; }
.form-note { color: var(--muted); font-size: .8rem; }
.code-output { display: block; padding: .7rem; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid #9fc2e8; border-radius: var(--radius); font: 700 1rem "Sora", sans-serif; text-align: center; }
.dialog { width: min(650px, calc(100% - 2rem)); padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(15, 23, 42, .45); }
.dialog-form { display: grid; gap: .8rem; padding: var(--space-3); }
.dialog-form .section-heading { margin-bottom: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 690px; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .62rem .55rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { color: var(--muted); background: var(--surface-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
td small { display: block; color: var(--muted); }
td select, td input { padding: .4rem .5rem; font-size: .8rem; }
#people-table tr[data-member-row] { cursor: pointer; }
#people-table tr[data-member-row]:hover { background: var(--surface-soft); }
tr.is-highlighted, tr.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
#people-table table { min-width: 1320px; }
.money-input { min-width: 105px; display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; overflow: hidden; }
.money-input span { padding-left: .45rem; color: var(--muted); }
.money-input input { min-width: 75px; border: 0; }
.money-input input:focus { outline: 0; }
.time-filters { display: grid; grid-template-columns: repeat(2, minmax(150px, 220px)) auto; gap: var(--space-2); align-items: end; margin-bottom: var(--space-3); }
.payroll-filters { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(145px, .7fr) minmax(260px, 1.4fr) repeat(2, minmax(145px, .7fr)) auto; gap: var(--space-2); align-items: end; }
.payroll-filters [hidden] { display: none; }
.payroll-summary { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.payroll-admin-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-1); }
.payroll-admin-heading h2 { margin-top: .15rem; font-size: 1.2rem; }
.payroll-tools-grid, .payroll-lists-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.payroll-tools-grid .form-card { height: 100%; align-content: start; }
.payroll-lists-grid table { min-width: 620px; }
.payroll-submit-actions, .paystub-status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.payroll-submit-actions h2, .paystub-status h2 { margin-top: .15rem; font-size: 1.1rem; }
.payroll-submit-actions p, .paystub-status p { margin-top: .25rem; }
.payroll-submit-review { min-width: 240px; padding: .7rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.payroll-submit-review h3 { margin-top: .15rem; font-size: .98rem; }
.payroll-review-status { padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius); }
.payroll-review-status.is-approved { color: var(--success) !important; background: var(--success-soft); border-color: #adcfba; }
.payroll-review-status.is-pending { color: var(--warning) !important; background: var(--warning-soft); border-color: #d6b999; }
.payroll-sheet { display: grid; gap: var(--space-3); }
.payroll-print-head { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--accent); }
.payroll-print-head h2 { font-size: 1.45rem; }
.payroll-print-head p { margin-top: .2rem; }
.payroll-print-head > div:last-child { text-align: right; color: var(--muted); display: grid; gap: .2rem; }
.payroll-print-head > div:last-child strong { color: var(--text); }
.payroll-identity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.payroll-identity-grid > div { padding: .7rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.payroll-identity-grid span, .payroll-totals-box span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.payroll-identity-grid strong { display: block; margin-top: .2rem; font-size: 1rem; }
.payroll-identity-grid small { display: block; margin-top: .2rem; color: var(--muted); }
.payroll-warning { padding: .65rem; color: var(--warning) !important; background: var(--warning-soft); border: 1px solid #d6b999; border-radius: var(--radius); }
.payroll-print-table { min-width: 0; }
.payroll-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: var(--space-3); align-items: start; }
.payroll-bottom-grid h3 { margin: var(--space-3) 0 var(--space-1); font-size: 1rem; }
.payroll-bottom-grid h3:first-child { margin-top: 0; }
.payroll-totals-box { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.payroll-totals-box > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.payroll-totals-box > div:last-child { border-bottom: 0; }
.payroll-totals-box .net { color: #fff; background: var(--accent); }
.payroll-totals-box .net span { color: #dce7f0; }
.payroll-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-2); }
.payroll-signatures div { min-height: 60px; display: grid; align-content: end; gap: .12rem; border-bottom: 1px solid var(--text); color: var(--muted); font-size: .78rem; }
.payroll-signatures strong { color: var(--text); font-size: .9rem; }
.payroll-signatures small { color: var(--muted); }
.table-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.time-review-list { margin-top: var(--space-3); }
.timeline { display: grid; }
.timeline-item { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.timeline-item time { color: var(--muted); font-size: .78rem; }
.timeline-item strong { display: block; }
.timeline-item p { margin-top: .2rem; font-size: .85rem; }
.details-list { display: grid; gap: .55rem; margin: var(--space-3) 0; }
.details-list div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.details-list dt { color: var(--muted); }
.details-list dd { margin: 0; font-weight: 700; }
.empty-state { min-height: 260px; display: grid; place-items: center; align-content: center; gap: .8rem; text-align: center; }
.empty-state.compact { min-height: 92px; }
.empty-state p { max-width: 600px; }
.error-text { color: var(--danger) !important; }
.loading { color: var(--muted); }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; max-width: 380px; padding: .7rem .85rem; color: #fff; background: #14293d; border-radius: var(--radius); box-shadow: var(--shadow); }
.toast.is-error { background: var(--danger); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .private-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-action-controls, .selected-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .time-filters, .payroll-filters, .payroll-identity-grid, .payroll-bottom-grid, .payroll-tools-grid, .payroll-lists-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; width: 274px; transform: translateX(-105%); transition: transform .16s ease; box-shadow: var(--shadow); }
  .sidebar.is-open { transform: translateX(0); }
  .menu-button { display: inline-flex; }
  .dashboard-grid, .management-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .main { padding: .65rem; }
  .topbar { align-items: flex-start; }
  .topbar-action { display: none; }
  .private-info-grid { grid-template-columns: 1fr; }
  .member-action-controls, .selected-person-grid, .action-private-grid { grid-template-columns: 1fr; }
  .metric-grid, .field-row { grid-template-columns: 1fr; }
  .section-heading, .hero { align-items: stretch; flex-direction: column; }
  .payroll-submit-actions, .paystub-status { align-items: stretch; flex-direction: column; }
  .timeline-item { grid-template-columns: 1fr; gap: .3rem; }
}

@media print {
  @page { size: letter; margin: .7in; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 11pt; }
  .sidebar, .topbar, .no-print, .toast, .skip-link { display: none !important; }
  body[data-print-mode="payroll"] #paystub-view { display: none !important; }
  body[data-print-mode="paystub"] #payroll-sheet { display: none !important; }
  .app-shell, .main, .page-body { display: block !important; min-height: 0; padding: 0 !important; margin: 0 !important; }
  .payroll-sheet { border: 0; padding: .08in; box-shadow: none; }
  .payroll-print-head { break-inside: avoid; }
  .payroll-identity-grid { grid-template-columns: repeat(4, 1fr); }
  .payroll-identity-grid > div, .payroll-totals-box, .payroll-warning { border-color: #777; background: #fff !important; }
  .payroll-bottom-grid { grid-template-columns: 1.2fr .8fr; }
  table { min-width: 0 !important; font-size: 9.5pt; }
  th { background: #f2f4f7 !important; color: #000; }
  th, td { padding: .28rem .35rem; border-color: #999; }
  .payroll-totals-box > div { background: #fff !important; border-color: #999; }
  .payroll-totals-box .net { color: #000; background: #e8eef6 !important; }
  .payroll-totals-box .net span { color: #000; }
  .payroll-signatures { break-inside: avoid; margin-top: .35in; }
}