/* Modern HRIS UI revision — restrained surfaces, clear hierarchy, compact data. */
:root {
  --primary: #2f63ee;
  --primary-light: #edf2ff;
  --text: #17181b;
  --muted: #68707d;
  --line: #e7e8ec;
  --bg: #f0f1f3;
  --radius: 12px;
  --sidebar: 216px;
}
body { background: var(--bg); color: var(--text); font-family: 'Manrope',system-ui,sans-serif; font-size:14px; }
h1,h2,h3,.brand,.stat-value { font-family: 'Manrope',system-ui,sans-serif; }
h1 { font-size:27px; letter-spacing:0; font-weight: 700; line-height: 1.25; }
h2 { font-size:16px; font-weight: 650; letter-spacing:0; }
h3 { font-size:14px; font-weight: 600; }
button,input,select,textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
svg.lucide { stroke-width: 1.65; }
.sidebar {
  inset: 12px auto 12px 12px; width: var(--sidebar); padding: 23px 12px 12px;
  border: 1px solid #e6e8ed; border-radius: 13px; background: #f8f9fa;
}
.brand { padding: 0 12px 25px; gap: 10px; font-size:24px; color: #21252c; letter-spacing:0; }
.brand-mark { grid-template-columns:repeat(2,8px); gap:3px; transform:none; background:var(--primary); padding:9px; border-radius:9px; }
.brand-mark b { width:8px; height:8px; border-radius:2px; background:#fff; }
.brand-mark b:nth-child(2) { background:#bfd2ff; }
.brand-mark b:nth-child(3) { background:#a5c3ff; }
.brand-mark b:nth-child(4) { background:#fff; }
.brand .small { font-size:10px; text-transform:uppercase; letter-spacing:0; margin-top:4px; color:#747b88; }
.company-switch { background:white; border:1px solid #e6e9ee; padding:10px; margin:0 0 23px; width:100%; border-radius:8px; box-shadow:0 1px 2px #19294103; }
.company-switch>.lucide { width:14px; color:#7a8390; }
.company-logo { width:31px; height:31px; border-radius:7px; background:#eef2f9; color:#526682; font-size:12px; }
.nav-label { text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; color:#727b87; padding:0 12px; margin:5px 0 10px; }
.nav-item { padding:11px 12px; margin:3px 0; border-radius:7px; gap:10px; color:#626975; font-size:13.5px; font-weight:450; position:relative; }
.nav-item>.lucide { width:16px; height:16px; }
.nav-item:hover { color:#1c2330; background:#f0f1f5; }
.nav-item.active { color:#17181b; background:#e9eaf0; font-weight:600; }
.nav-item.active:before { content:''; width:3px; height:16px; border-radius:4px; background:var(--primary); position:absolute; left:0; }
.nav-item .arrow { width:12px; color:#8b94a2; }
.nav-count { background:#fff; color:#6f7785; border:1px solid #e5e7ed; border-radius:5px; padding:1px 5px; font-size:10px; }
.nav-sub { padding:8px 9px 8px 37px; font-size:12.5px; margin:0; border-radius:5px; color:#727a87; }
.nav-sub.active { background:#fff; color:#2364dc; font-weight:550; }
.nav-scroll { padding:0 1px; scrollbar-width:none; }
.sidebar-bottom { padding-top:8px; border-color:#e7eaf0; }
.sidebar-bottom>.nav-item { padding-top:10px; padding-bottom:10px; }
.help-card { background:#fff; border:1px solid #e7eaf0; padding:12px; margin:6px 0 0; border-radius:9px; }
.help-card>.flex>.lucide { width:14px; height:14px; color:#64738c; }
.help-card .btn { font-size:11px; min-height:29px; }
.help-card .small { font-size:11px; }
.topbar {
  margin:12px 16px 0 calc(var(--sidebar) + 28px); height:62px; padding:0 22px;
  background:#fff; border:1px solid #e5e8ee; border-radius:12px; box-shadow:none;
}
.breadcrumb { color:#8b929d; font-size:13px; }
.breadcrumb span { color:#373e4c; }
.top-search { width:235px; border:1px solid #e9ecf1; background:white; font-size:12px; color:#7e8796; padding:8px 11px; }
.top-search .lucide { width:14px; height:14px; }
.top-search kbd { background:#f7f8fa; border-color:#eff0f4; color:#8c95a2; }
.icon-btn { width:33px; height:33px; border-color:#e8ebf1; border-radius:7px; }
.icon-btn>.lucide { width:16px; height:16px; }
.profile-button { border-color:#edf0f3; gap:9px; }
.profile-button .avatar { height:31px; width:31px; }
.profile-button>.lucide { width:13px; }
.avatar { border-radius:50%; background:#eef2fa; color:#62718c; font-size:12px; font-weight:650; }
.avatar.peach { background:#f8ece3; color:#9d7555; }
.avatar.mint { background:#e5f1ed; color:#54826f; }
.avatar.pink { background:#f4e8ed; color:#9d6a7e; }
.avatar.lilac { background:#eeeaf3; color:#8a779c; }
.main {
  margin:12px 16px 16px calc(var(--sidebar) + 28px); padding:22px 24px 24px;
  max-width:none; background:#fff; border:1px solid #e5e8ee; border-radius:13px; min-height:calc(100dvh - 102px);
}
.demo-bar { background:none; border:0; border-radius:0; padding:0 0 15px; margin-bottom:18px; border-bottom:1px solid #edf0f4; font-size:11px; color:#7c8595; }
.demo-label { background:#f2f4f7; color:#667184; border:1px solid #e8ebf0; border-radius:4px; font-size:9px; letter-spacing:0; padding:3px 5px; }
.demo-bar .text-link { color:#64748b; font-size:11px; }
.page-heading { margin-bottom:24px; }
.page-heading p { font-size:13px; line-height:1.7; color:#7a8392; margin-top:7px; }
.page-heading .flex { gap:8px; }
.btn { border-radius:7px; padding:9px 12px; min-height:34px; font-size:12.5px; font-weight:550; border-color:#e3e7ee; box-shadow:0 1px 2px #121e3403; }
.btn>.lucide { width:14px; height:14px; }
.btn.primary { background:#2f63ee; border-color:#2f63ee; box-shadow:0 2px 4px #174fc414; }
.btn.primary:hover { background:#1d59d4; }
.btn:hover { background:#f8f9fc; border-color:#cdd6e4; }
.btn.primary:hover { background:#1d59d4; }
.btn.tiny { min-height:27px; font-size:11px; padding:5px 8px; }
.btn.ghost { background:none; box-shadow:none; }
.btn.success { color:#288263; background:#f0f8f4; border-color:#dfece5; }
.btn.danger { background:#fdf4f4; color:#b65864; border-color:#f1dfe2; }
.text-link { font-size:12px; color:#56709b; font-weight:550; }
.card { border:1px solid #e7eaf0; border-radius:11px; background:white; box-shadow:0 1px 2px #1b294c02; }
.card-head { padding:19px 19px 15px; }
.card-head p { color:#7b8493; font-size:12px; line-height:1.6; margin-top:5px; }
.card-body { padding:0 19px 19px; }
.card-head .badge { border:1px solid #e7ebf3; background:#f7f9fc; }
.stats { gap:14px; margin-bottom:18px; }
.stat,.stat.featured {
  min-height:133px; border:1px solid #e5e8ee; border-radius:10px; padding:17px 18px;
  background:white; color:#171c25; box-shadow:0 1px 3px #111c3502;
}
.stat.featured:after { display:none; }
.stat-head,.featured .stat-head { color:#626c7c; font-size:12px; font-weight:450; align-items:flex-start; }
.stat-icon,.featured .stat-icon { width:25px; height:25px; border-radius:8px; background:#f0f4fc; color:#3d76d9; }
.stat-icon.green { background:#eef7f3; color:#27a17c; }
.stat-icon.orange { background:#fdf5e9; color:#dc9d42; }
.stat-icon.red { background:#fdf0f0; color:#d57881; }
.stat-icon>.lucide { width:14px; height:14px; }
.stat-value { font-weight:650; font-size:31px; letter-spacing:0; line-height:1.1; margin:12px 0 10px; font-variant-numeric:tabular-nums; }
.stat-foot,.featured .stat-foot { color:#7b8492; font-size:11px; gap:6px; }
.featured .delta,.delta { color:#248561; }
.metric-chip { display:inline-flex; align-items:center; gap:3px; border-radius:4px; padding:3px 5px; line-height:1; font-size:10px; font-weight:550; }
.metric-chip .lucide { height:10px; width:10px; }
.metric-chip.positive { background:#edf7e5; color:#398041; }
.metric-chip.neutral { background:#f0f2f6; color:#6d7889; }
.metric-chip.amber { background:#fff6e8; color:#a6823f; }
.metric-chip.coral { background:#fceff0; color:#bd6b76; }
.welcome { background:#f6f8fc; border:1px solid #e8edf5; border-radius:10px; padding:21px 23px; min-height:115px; margin-bottom:20px; }
.welcome h2 { font-size:23px; font-weight:650; letter-spacing:0; }
.welcome p { color:#727f93; font-size:13px; }
.welcome .eyebrow { color:#6b7c98; font-size:10px; letter-spacing:0; }
.welcome-art { display:none; }
.grid-main { grid-template-columns:minmax(0,1.8fr) minmax(275px,1fr); gap:17px; margin-bottom:17px; }
.grid-equal { gap:17px; }
.dashboard-heading { margin-bottom:20px; align-items:center; }
.page-eyebrow { color:#7f8998; font-size:10px; font-weight:550; letter-spacing:0; display:block; margin-bottom:8px; }
.dashboard-heading h1 { font-size:28px; letter-spacing:0; line-height:1.2; }
.greeting-dot { color:#2f63ee; margin-left:2px; }
.dashboard-heading p { font-size:12px; }
.separator { color:#cad0d8; display:inline-block; padding:0 8px; }
.dashboard-viewbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:0 0 14px; border-bottom:1px solid #eceff3; }
.dashboard-tabs { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #e7eaf0; border-radius:7px; background:#f9fafc; }
.dashboard-tab { background:none; border:0; border-radius:4px; padding:7px 11px; display:flex; align-items:center; gap:6px; color:#7c8491; font-size:12px; font-weight:450; white-space:nowrap; }
.dashboard-tab .lucide { width:12px; height:12px; }
.dashboard-tab.selected { background:white; color:#232a37; box-shadow:0 1px 3px #162c5310; font-weight:550; }
.dashboard-tab:hover { color:#263e68; }
.workspace-period { font-size:12px; color:#667186; display:flex; align-items:center; gap:7px; }
.workspace-period .lucide { width:13px; height:13px; color:#8993a3; }
.attendance-chart-card { background:#f1f3f9; }
.attendance-chart-card .card-head { padding-bottom:10px; }
.segmented { display:flex; padding:2px; background:#ebedf3; border-radius:6px; gap:1px; }
.segmented button { border:0; background:none; padding:5px 8px; border-radius:4px; color:#858e9d; font-size:11px; white-space:nowrap; }
.segmented button.selected { background:white; color:#35425a; box-shadow:0 1px 3px #1929440d; }
.chart-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 18px; }
.chart-summary>div:first-child { display:flex; align-items:baseline; gap:8px; }
.chart-summary strong { font-size:27px; font-weight:650; letter-spacing:0; }
.chart-summary span { font-size:11px; color:#68788c; }
.chart-summary span .muted { color:#929baa; }
.chart-key { display:flex; gap:12px; align-items:center; }
.chart-key>span { display:flex; align-items:center; gap:5px; color:#6c7b92; font-size:10px; white-space:nowrap; }
.chart-key i { width:6px; height:6px; border-radius:2px; background:#3066f0; }
.chart-key>span:nth-child(2) i { background:#dfe7fc; }
.block-chart { display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; height:183px; margin-top:4px; }
.chart-scale { height:155px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding-bottom:0; font-size:10px; color:#8b96a7; }
.block-chart-plot { height:181px; position:relative; display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:10px; padding:0 7px; }
.chart-gridlines { position:absolute; inset:0 0 26px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.chart-gridlines i { border-top:1px dashed #e3e7f0; width:100%; }
.chart-column { z-index:1; border:0; margin:0; background:none; padding:0; display:flex; flex-direction:column; height:181px; align-items:center; min-width:0; border-radius:5px; }
.chart-column:focus-visible { outline:2px solid #7298ec; outline-offset:3px; }
.bar-track { position:relative; height:155px; width:100%; max-width:46px; display:block; }
.bar-plan,.bar-actual { position:absolute; left:0; bottom:0; width:100%; border-radius:5px 5px 3px 3px; display:block; background:repeating-linear-gradient(to top,#e5ebfc 0,#e5ebfc 16px,transparent 16px,transparent 21px); }
.bar-actual { background:repeating-linear-gradient(to top,#3066f0 0,#3066f0 16px,transparent 16px,transparent 21px); }
.chart-column:hover .bar-actual,.chart-column.is-selected .bar-actual { background:repeating-linear-gradient(to top,#194bbf 0,#194bbf 16px,transparent 16px,transparent 21px); }
.bar-zero { position:absolute; bottom:0; left:0; width:100%; height:3px; border-radius:2px; background:#dce3ef; }
.bar-label { font-size:11px; margin-top:9px; padding:3px 6px; color:#8792a5; min-height:18px; white-space:nowrap; border-radius:4px; }
.is-selected .bar-label { background:#2f63ee; color:white; }
.chart-selection { border-top:1px solid #e6eaf2; padding-top:13px; margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; color:#60728f; }
.chart-selection>span { display:flex; align-items:center; gap:6px; }
.chart-selection .lucide { width:11px; height:11px; }
.chart-selection strong { font-size:12px; font-weight:550; color:#34445e; }
.chart-selection strong>span { color:#8490a4; font-weight:400; }
.month-view .block-chart-plot { gap:4px; padding:0; }
.month-view .bar-plan,.month-view .bar-actual { border-radius:2px; }
.month-view .bar-label { font-size:10px; padding:3px 2px; }
.subtle-icon { color:#949caa; }
.subtle-icon .lucide { width:16px; height:16px; }
.team-total { display:flex; align-items:center; gap:8px; margin:3px 0 21px; }
.team-total>strong { font-size:30px; letter-spacing:0; font-weight:650; }
.team-total>span:not(.team-stack) { font-size:11px; color:#8a93a1; line-height:1.6; }
.team-total>span>b { display:block; font-weight:450; color:#6c788b; }
.team-stack { display:flex; margin-left:auto; padding-left:9px; }
.team-stack .avatar { height:25px; width:25px; border:2px solid white; font-size:9px; margin-left:-8px; }
.team-stack .plus { color:#78869b; background:#f0f2f6; }
.department-bars { display:flex; flex-direction:column; gap:16px; }
.department-row .between { font-size:12px; color:#667187; }
.department-row strong { font-size:12px; font-weight:550; color:#354258; }
.department-row small { font-size:10px; color:#8c96a5; margin-left:7px; min-width:25px; display:inline-block; text-align:right; }
.department-track { height:4px; background:#edf0f5; border-radius:3px; margin-top:8px; overflow:hidden; }
.department-track span { height:100%; min-width:0; border-radius:3px; display:block; }
.team-link { width:100%; margin-top:20px; background:none; border:0; border-top:1px solid #edf0f5; padding:13px 0 0; display:flex; align-items:center; justify-content:space-between; color:#737f94; font-size:11px; }
.team-link .lucide { width:12px; height:12px; }
.heading-count { background:#f0f3f9; color:#677a96; border:1px solid #e6ebf3; font-size:11px; padding:2px 5px; border-radius:4px; display:inline-block; margin-left:5px; vertical-align:middle; }
.card-endnote { color:#8893a3; font-size:10px; display:flex; align-items:center; gap:5px; padding:12px 18px; border-top:1px solid #eef0f5; }
.card-endnote>.lucide { width:11px; height:11px; }
.workspace-activity-card .activity { padding:13px 0; gap:10px; }
.activity-icon { height:27px; width:27px; background:#f1f5fc; border-radius:50%; color:#7c9ac7; }
.activity-icon>.lucide { width:12px; height:12px; }
.activity p { font-size:12px; color:#637189; line-height:1.6; }
.activity p b { color:#4c5d75; font-weight:550; }
.activity time { color:#8a95a6; font-size:11px; line-height:1.7; margin-top:4px; }
.activity:nth-child(2) .activity-icon { color:#65a78e; background:#eef7f1; }
.activity:nth-child(3) .activity-icon { color:#b39a71; background:#faf6ef; }
.command-strip { border:1px solid #e7ebf2; border-radius:10px; background:#fafbfd; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin:18px 0; }
.command-strip>div:first-child { display:flex; align-items:center; gap:10px; }
.command-icon { color:#6a8bbb; display:grid; place-items:center; width:29px; height:29px; background:#f0f4fc; border-radius:8px; }
.command-icon>.lucide { width:15px; height:15px; }
.command-strip h3 { font-size:13px; }
.command-strip p { font-size:11px; color:#8995a6; margin-top:3px; }
.command-buttons { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.command-buttons .btn { background:white; font-size:11px; min-height:30px; padding:6px 9px; }
.command-buttons .btn>.lucide { color:#8599b6; width:12px; height:12px; }
.dashboard-secondary .list-card b { font-size:13px; font-weight:550; }
.dashboard-secondary .list-card p { font-size:11px; color:#8290a5; }
.document-alert { background:#fafbfe; border:1px solid #eaf0f8; border-radius:7px; padding:12px; display:flex; align-items:center; gap:10px; color:#7792b7; }
.document-alert>.lucide { width:17px; height:17px; }
.document-alert b { font-size:12px; font-weight:550; color:#5d7496; }
.document-alert p { font-size:11px; color:#8999ad; margin-top:4px; }
.document-alert>.text-link { margin-left:auto; }
.metric-strip { gap:10px; }
.metric-strip>div { border:1px solid #eef0f5; border-radius:8px; padding:14px 16px; background:#fafbfd; }
.metric-strip strong { font-size:24px; font-weight:650; letter-spacing:0; }
.metric-strip span { font-size:12px; color:#8691a3; }
.salary-summary { background:#f4f7fd; border:1px solid #e5ecf8; border-radius:9px; }
.salary-summary strong { font-weight:650; }
/* Shared administration screens. */
th { background:#f8f9fa; color:#8590a0; font-size:11px; font-weight:450; padding:11px 16px; border-color:#edf0f4; }
td { padding:14px 16px; border-color:#edf0f4; font-size:12px; color:#6e7b90; }
td .name { font-size:12.5px; color:#3a465b; font-weight:550; }
td .sub { font-size:10px; color:#8c97a8; margin-top:4px; }
.person { gap:8px; }
.person .avatar { width:30px; height:30px; font-size:11px; }
.badge { border:1px solid #e6ebf3; background:#f7f9fc; color:#7486a3; border-radius:4px; padding:3px 6px; font-size:10px; font-weight:450; gap:4px; }
.badge:before { height:3px; width:3px; }
.badge.green { background:#f1f8ed; border-color:#d6ebdf; color:#4f956c; }
.badge.orange { background:#fffaf1; border-color:#f3e8d2; color:#ad8e55; }
.badge.red { background:#fdf5f6; border-color:#f0dce0; color:#ba7784; }
.badge.purple { background:#f8f6fc; border-color:#e9e2f5; color:#9783b6; }
.toolbar { padding:15px 17px; gap:8px; }
input,select,textarea { border-color:#e5e8ef; border-radius:6px; font-size:13px; background:#fff; color:#4e5f7a; min-height:36px; padding:9px 10px; }
.search-field input { padding-left:32px; }
input::placeholder,textarea::placeholder { color:#9ca5b4; }
.toolbar select { font-size:12px; }
.pagination { border-color:#edf0f5; font-size:11px; padding:13px 17px; color:#8491a6; }
.page-btn { color:#71829c; border-color:#e8edf5; font-size:11px; padding:5px 8px; }
.page-btn.active { border-color:#d6e4fc; }
.tabs { padding:0 20px; gap:22px; border-color:#e9edf3; }
.tab { color:#8291a7; font-size:13px; padding:13px 0; }
.tab.active { color:#346fd3; }
.profile-banner { padding:23px; }
.profile-banner .avatar { border-radius:12px; height:59px; width:59px; }
.profile-banner h2 { font-size:22px; letter-spacing:0; font-weight:650; }
.info-grid { font-size:13px; }
.info-grid dt { font-size:12px; }
.modal { border-radius:13px; box-shadow:0 25px 80px #1a28452e; }
.modal-head { padding:20px 23px; border-color:#edf0f5; }
.modal-head h2 { font-size:17px; font-weight:600; }
.modal-head p { font-size:12px; }
.modal-body { padding:21px 23px; }
.modal-foot { padding:15px 23px; background:#fcfdff; border-color:#edf0f5; }
.form-section { font-size:13px; color:#53647f; }
.field label { font-size:13px; font-weight:500; }
.field small { font-size:11px; }
.notice { border:1px solid #e0eafa; background:#f7faff; border-radius:7px; color:#6f87ac; font-size:12px; }
.notice.warn { background:#fffcf5; border-color:#f4e9d2; color:#aa8b55; }
.kanban-col { background:#f5f7fa; border:1px solid #eceff4; border-radius:9px; }
.candidate-card { border-color:#e8ecf3; border-radius:8px; }
.progress { background:#edf1f8; height:4px; }
.settings-menu button { font-size:13px; border-radius:6px; }
.settings-menu button.active { background:#f0f4fc; color:#5278b5; }
.check-row { font-size:13px; border-color:#edf0f5; }
.footer { font-size:10px; color:#8a95a6; margin-top:24px; }
.quick-action { border-radius:8px; box-shadow:none; }
.quick-icon { border-radius:8px; }
.account-card { border-radius:9px; border-color:#e7ebf2; }
.collapsed { --sidebar:68px; }
.collapsed .sidebar { padding:22px 10px 12px; }
.collapsed .brand { padding:0 5px 25px; }
.collapsed .company-switch { padding:7px; margin-bottom:23px; }
.collapsed .nav-item { padding:12px; }
.collapsed .sidebar-bottom .nav-item { padding:12px; }
@media(min-width:1600px) {
  .main { padding:27px 34px; }
  .topbar { padding:0 31px; }
  .grid-main { grid-template-columns:minmax(0,1.9fr) minmax(330px,1fr); }
  .block-chart { height:213px; }
  .block-chart-plot,.chart-column { height:211px; }
  .chart-scale,.bar-track { height:185px; }
  .stat { min-height:140px; }
}
@media(max-width:1200px) {
  :root { --sidebar:199px; }
  .main { padding:20px; }
  .topbar { padding:0 18px; }
  .top-search { width:207px; }
  .dashboard-heading h1 { font-size:26px; }
  .dashboard-heading { gap:10px; }
  .dashboard-actions .btn { font-size:11px; padding:8px 10px; }
  .grid-main { grid-template-columns:minmax(0,1.65fr) minmax(255px,1fr); }
  .stat { padding:16px; }
  .chart-key { gap:7px; }
  .chart-summary>div:first-child { gap:6px; }
  .chart-summary>div:first-child>span { max-width:120px; line-height:1.7; }
  .command-strip { align-items:flex-start; }
  .command-buttons { justify-content:flex-end; }
}
@media(max-width:1000px) {
  .grid-main { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .top-search { display:none; }
  .team-total { margin-bottom:18px; }
  .department-bars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
  .team-link { margin-top:22px; }
  .dashboard-heading { flex-wrap:wrap; }
  .command-strip { flex-direction:column; }
  .command-buttons { justify-content:flex-start; }
}
@media(max-width:700px) {
  :root,.collapsed { --sidebar:0px; }
  body { background:#f5f6f9; }
  .sidebar,.collapsed .sidebar { left:0; top:0; bottom:0; width:246px; border-radius:0 14px 14px 0; padding:24px 13px 14px; }
  .sidebar.mobile-open { box-shadow:12px 0 40px #15284426; }
  .topbar { margin:0; height:60px; padding:0 16px; border:0; border-bottom:1px solid #e8ebf1; border-radius:0; }
  .main { margin:0; padding:17px 15px 23px; border:0; border-radius:0; background:#f8f9fc; min-height:calc(100dvh - 60px); }
  .demo-bar { padding-bottom:12px; margin-bottom:19px; font-size:10px; }
  .demo-bar .flex { gap:7px; }
  .demo-label { font-size:8px; white-space:nowrap; }
  .demo-bar .text-link { font-size:10px; }
  .page-heading h1,.dashboard-heading h1 { font-size:25px; letter-spacing:0; }
  .page-heading { margin-bottom:19px; gap:13px; }
  .page-heading p,.dashboard-heading p { font-size:12px; line-height:1.8; }
  .page-eyebrow { font-size:9px; margin-bottom:7px; }
  .dashboard-actions { width:100%; }
  .dashboard-actions .btn { font-size:12px; padding:9px 11px; min-height:35px; }
  .separator { padding:0 4px; }
  .dashboard-viewbar { padding-bottom:12px; gap:7px; }
  .dashboard-tabs { gap:0; }
  .dashboard-tab { font-size:10px; padding:7px 8px; gap:4px; }
  .dashboard-tab>.lucide { width:11px; height:11px; }
  .workspace-period { display:none; }
  .stats { gap:10px; margin-bottom:14px; }
  .stat,.stat.featured { padding:14px; min-height:127px; background:#fff; border-color:#e5e9f0; }
  .stat-head,.featured .stat-head { font-size:11px; }
  .stat-head>span { max-width:105px; font-size:12px; }
  .stat-value { font-size:28px; margin:10px 0; }
  .stat-icon,.featured .stat-icon { width:23px; height:23px; }
  .stat-foot,.featured .stat-foot { font-size:10px; gap:4px; flex-wrap:wrap; }
  .metric-chip { font-size:9px; padding:3px 4px; }
  .grid-main,.grid-equal { gap:14px; margin-bottom:14px; }
  .card-head { padding:17px 15px 13px; align-items:flex-start; }
  .card-head h2 { font-size:14px; }
  .card-head p { font-size:11px; max-width:235px; }
  .card-body { padding:0 15px 16px; }
  .segmented { flex-shrink:0; }
  .segmented button { font-size:10px; padding:5px 6px; }
  .attendance-chart-card .card-head p { max-width:180px; line-height:1.7; }
  .chart-summary { margin:3px 0 17px; }
  .chart-summary>div:first-child { gap:7px; }
  .chart-summary strong { font-size:26px; }
  .chart-summary>div:first-child>span { font-size:10px; max-width:110px; }
  .chart-key { flex-direction:column; gap:6px; align-items:flex-start; }
  .chart-key>span { font-size:9px; }
  .block-chart { gap:5px; height:170px; grid-template-columns:18px minmax(0,1fr); }
  .block-chart-plot,.chart-column { height:168px; }
  .chart-scale,.bar-track { height:142px; }
  .block-chart-plot { gap:8px; padding:0 3px; }
  .bar-label { font-size:10px; padding:3px 4px; }
  .chart-selection { margin-top:11px; font-size:10px; }
  .chart-selection strong { font-size:11px; }
  .month-view .block-chart-plot { gap:3px; }
  .team-total { margin:2px 0 19px; }
  .department-bars { gap:17px 21px; }
  .department-row .between { font-size:11px; }
  .department-row small { font-size:9px; margin-left:4px; }
  .department-row strong { font-size:11px; }
  .department-track { margin-top:7px; }
  .team-total>strong { font-size:28px; }
  .team-link { font-size:11px; }
  .command-strip { padding:15px; margin:14px 0; gap:14px; }
  .command-buttons { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .command-buttons .btn { font-size:11px; padding:8px; min-height:32px; }
  .dashboard-secondary .list-card b { font-size:12px; }
  .document-alert { flex-wrap:wrap; padding:12px; }
  .document-alert p { font-size:10px; }
  th { padding:11px 13px; font-size:10px; }
  td { padding:13px; font-size:12px; }
  td .name { font-size:12px; }
  .toolbar { padding:13px; }
  .profile-banner h2 { font-size:20px; }
  .profile-banner .avatar { height:48px; width:48px; border-radius:10px; }
  .welcome { padding:19px; min-height:115px; }
  .welcome h2 { font-size:22px; }
  .welcome p { font-size:12px; }
  .welcome .eyebrow { font-size:9px; }
  .metric-strip>div { padding:13px 15px; }
  .metric-strip strong { font-size:24px; }
  .modal { border-radius:12px; }
  .modal-head,.modal-body { padding:19px; }
  .modal-foot { padding:14px 19px; }
  .footer { font-size:9px; }
  .collapsed .brand { padding:0 12px 25px; }
  .collapsed .company-switch { padding:10px; }
  .collapsed .nav-item { justify-content:flex-start; }
}
@media(prefers-reduced-motion:no-preference) {
  .card,.stat,.btn,.nav-item,.bar-plan,.bar-actual { transition:background .15s ease,border-color .15s ease; }
}
/* Final legibility pass. */
.nav-item { font-size:13px; }
.nav-sub { font-size:13px; }
.stat-head,.featured .stat-head { font-size:13px; }
.stat-foot,.featured .stat-foot { font-size:11px; }
th { color:#6d788b; font-size:12px; }
td { font-size:13px; color:#637087; }
td .name { font-size:13.5px; }
td .sub { font-size:11px; color:#738198; }
.badge { font-size:11px; }
.badge.green { color:#36783e; border-color:#d7e8dc; }
.badge.orange { color:#947131; border-color:#eee1c8; }
.badge.red { color:#a45e6c; border-color:#eddae0; }
.badge.purple { color:#7d669c; border-color:#e7e0f0; }
.card-head p { font-size:13px; color:#727e91; }
.department-row .between { font-size:13px; color:#67748b; }
.department-row strong { font-size:13px; }
.department-row small { font-size:11px; color:#73829a; }
.department-bars { gap:13px; }
.department-track { margin-top:7px; }
.team-total { margin-bottom:17px; }
.activity p { font-size:13px; }
.activity time { color:#78869b; font-size:12px; }
.card-endnote { color:#76869c; font-size:11px; }
.demo-bar { padding-bottom:12px; margin-bottom:16px; }
.bar-label { color:#6e7c94; }
.chart-scale { color:#738198; }
.chart-summary span { color:#60728d; }
@media(max-width:700px) {
  .nav-item { font-size:13px; }
  .stat-head,.featured .stat-head { font-size:12px; }
  .card-head p { font-size:12px; }
  .department-row .between { font-size:12px; }
  .department-row small { font-size:10px; }
  .department-row strong { font-size:12px; }
  .activity p { font-size:12px; }
  .activity time { font-size:11px; }
  td,td .name { font-size:13px; }
  .card-endnote { font-size:10px; }
}
.modal { display:flex; flex-direction:column; overflow:hidden; }
.modal-head,.modal-foot { flex-shrink:0; }
.modal-body { overflow-y:auto; min-height:0; }
@media(max-width:700px) {
  .modal { max-height:94dvh; }
  .modal-foot .btn { min-height:38px; }
}
/* Compact mode echoes the reference's focused icon rail. */
@media(min-width:701px) {
  .collapsed .sidebar { background:#181818; border-color:#181818; }
  .collapsed .sidebar .nav-item { color:#a4adba; }
  .collapsed .sidebar .nav-item:hover { color:white; background:#292929; }
  .collapsed .sidebar .nav-item.active { color:white; background:#343434; }
  .collapsed .sidebar .company-switch { background:#222222; border-color:#373737; }
  .collapsed .sidebar .company-logo { color:#b9c9e3; background:#2c2c2c; }
  .collapsed .sidebar-bottom { border-color:#353535; }
}

/* Minimum reading sizes for legacy inline metadata and form details. */
.company-switch .stack strong { font-size:13px !important; }
.company-switch .stack .muted { font-size:11px !important; line-height:1.5; }
.profile-button .stack strong { font-size:13px !important; }
.profile-button .stack .muted { font-size:11px !important; }
.field label,.info-grid dt { font-size:13px; }
.field input,.field select,.field textarea { font-size:13px; }
.field small,.table-note,.document-label { font-size:11px; line-height:1.7; }
.info-grid dd { font-size:14px; }
.document-preview { font-size:14px; }
.empty p,.notification p,.report-card p,.candidate-card p { font-size:13px; }
.notification h3,.list-card b { font-size:14px; }
.list-card p,.check-row,.checkboxline { font-size:12px; }
input,select,textarea { font-size:13px; }
.search-field input,.toolbar select { font-size:12px; }
[style*="font-size:9px"],[style*="font-size:10px"],[style*="font-size:11px"] { font-size:12px !important; }
@media(max-width:700px) {
  .card-head h2 { line-height:1.5; }
  .stat-head>span { font-size:12px; }
  .stat-foot,.featured .stat-foot { line-height:1.6; }
  .dashboard-tab { white-space:nowrap; }
  .department-row .between { gap:8px; }
  .department-row small { min-width:21px; }
  .profile-button .stack { display:none; }
}
/* Keep the logo's decorative tagline on one line. */
.brand .small { font-size:8px; letter-spacing:0; white-space:nowrap; }