:root {
    color-scheme: light;
    --canvas: #f3f6fc;
    --sidebar: #edf1fb;
    --surface: #fff;
    --ink: #20253d;
    --muted: #556079;
    --line: #e0e6f2;
    --accent: #533bc6;
    --accent-soft: #ece8ff;
    --shadow: 0 4px 18px rgb(43 55 105 / .045);
    font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: var(--accent); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid #664be6; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.8rem, 3.2vw, 2.45rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: 1.17rem; letter-spacing: -.015em; }
h3 { font-size: 1.05rem; }
small { font-size: .78rem; }
.muted { color: var(--muted); }
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: absolute; z-index: 5; inset: .75rem auto auto .75rem; padding: .7rem; background: white; }

.app-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100dvh; }
.auth-shell { grid-template-columns: minmax(0, 1fr); }
.auth-shell main { max-width: 46rem; margin-inline: auto; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow: auto; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--line); padding: 1.4rem .85rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; padding: .25rem .45rem 1.45rem; border-bottom: 1px solid var(--line); }
.brand strong { display: block; font-size: 1rem; }
.brand small, .account small, .module-links small, .office-node small { display: block; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; flex: none; border: 1px solid #c5ded2; border-radius: .8rem; background: #fff; box-shadow: 0 4px 10px #164a3820; }
.brand-mark img { width: 1.85rem; height: 2rem; object-fit: contain; }
.side-nav { display: grid; gap: .28rem; margin-top: 1.45rem; }
.nav-label { margin: 0 .65rem .25rem; color: var(--muted); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 750; }
.side-nav a { display: flex; align-items: center; gap: .65rem; padding: .7rem .65rem; border: 1px solid transparent; border-radius: .55rem; color: #3e4865; text-decoration: none; font-size: .88rem; font-weight: 600; }
.side-nav a:hover { background: #f7f8ff; }
.side-nav a[aria-current] { color: var(--accent); background: #e5e3ff; border-color: #d9d5ff; }
.sidebar-footer { margin-top: auto; padding: 1.4rem .5rem 0; color: var(--muted); font-size: .76rem; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fbfcff; border-bottom: 1px solid var(--line); padding: .8rem clamp(1rem, 3vw, 2.4rem); min-height: 4.3rem; }
.breadcrumbs, .account { display: flex; align-items: center; gap: .65rem; font-size: .86rem; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.account { overflow-wrap: anywhere; }
.account strong { display: block; }
main { max-width: 94rem; margin: auto; padding: clamp(1rem, 3vw, 2.4rem); }

.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.page-heading h1 + p { margin-top: .6rem; color: var(--muted); }
.eyebrow { margin-bottom: .45rem; color: var(--accent); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .11em; }
.hero { padding: clamp(1rem, 3vw, 2rem); border: 1px solid #e0e0f6; border-radius: 1rem; background: linear-gradient(113deg, #fff 15%, #eaf0ff 73%, #e9e1ff); }
.pill { display: inline-flex; align-items: center; width: fit-content; padding: .22rem .58rem; border-radius: 99rem; background: var(--accent-soft); color: #4831a9; font-size: .76rem; font-weight: 650; }
.page-heading > .pill { flex-shrink: 0; }
.pill-neutral { background: #edf1f8; color: #414c68; overflow-wrap: anywhere; }
.pill-success { background: #dff6ed; color: #126449; }
.pill-warning { background: #fff0dd; color: #854515; }
.status-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.avatar { width: 2.6rem; height: 2.6rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.avatar-small { width: 2rem; height: 2rem; }
.avatar-small .icon { width: 1rem; height: 1rem; }

.panel { min-width: 0; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.panel-heading p, .empty-state p { color: var(--muted); margin-top: .3rem; font-size: .87rem; }
.empty-state { padding: 2.25rem 1.2rem; text-align: center; }
.empty-state .avatar { margin-bottom: .65rem; }
.notice { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #ddd6ff; border-radius: .6rem; background: var(--accent-soft); color: #3f2b91; }
.back-link { display: inline-block; margin-bottom: .85rem; font-weight: 650; }

form { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.filter-panel, .edit { padding: 1rem 1.2rem; }
label { display: grid; gap: .35rem; color: #3c4560; font-size: .82rem; font-weight: 650; min-width: 0; }
.search label:first-child { flex: 1 1 17rem; }
input, select, button { font: inherit; min-height: 2.65rem; padding: .53rem .67rem; border: 1px solid #cbd3e5; border-radius: .48rem; }
input, select { width: 100%; color: var(--ink); background: #fff; }
select { max-width: 28rem; }
input::placeholder { color: #65728b; }
button { display: inline-flex; align-items: center; gap: .38rem; background: var(--accent); color: white; border-color: var(--accent); cursor: pointer; font-weight: 650; }
button:hover { background: #432dac; }
.table-scroll, .tree-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .75rem 1.2rem; border-bottom: 1px solid #e9edf5; vertical-align: middle; }
thead th { background: #f4f6fc; color: #4d5872; font-size: .75rem; letter-spacing: .035em; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #fafaff; }
.person-link { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; text-decoration: none; }
.person-link:hover { text-decoration: underline; }
details { margin-top: .35rem; }
summary { color: var(--accent); cursor: pointer; font-size: .82rem; }
details form { margin-top: .65rem; }

.profile { overflow: hidden; }
.profile-banner { height: 6.5rem; background: radial-gradient(circle at 85% 20%, #d2c9ff 0, transparent 38%), linear-gradient(110deg, #eeedff, #f8fbff 55%, #e6edff); }
.profile-content { padding: 0 1.25rem 1.2rem; }
.profile-avatar { width: 4.4rem; height: 4.4rem; margin-top: -2.2rem; border: 4px solid white; position: relative; }
.profile-avatar .icon { width: 2rem; height: 2rem; }
.profile-content h2 { margin: .2rem 0 1rem; font-size: 1.55rem; }
.profile-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem; margin: 0; }
.profile-facts div { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .6rem; background: #f8f9fe; overflow-wrap: anywhere; }
.profile-facts dt { color: var(--muted); font-size: .78rem; }
.profile-facts dd { margin: .18rem 0 0; font-weight: 650; }
.office-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; padding: 1.2rem; margin: 0; }
.office-tree, .office-tree ul { list-style: none; }
.office-tree ul { padding-left: .75rem; margin: .45rem 0 0 .75rem; border-left: 1px solid #b9b5eb; }
.office-tree ul > li { position: relative; margin-top: .45rem; }
.office-tree ul > li::before { content: ""; position: absolute; inset: 1.35rem auto auto -.75rem; width: .75rem; border-top: 1px solid #b9b5eb; }
.office-node { display: flex; align-items: center; gap: .6rem; padding: .65rem; border: 1px solid #e2def9; border-radius: .55rem; background: #f9f8ff; text-decoration: none; overflow-wrap: anywhere; }
.office-node:hover { background: var(--accent-soft); }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem; min-width: 0; padding: .95rem 1.1rem; border-radius: .8rem; background: linear-gradient(125deg, #f9f7ff, #e9e3ff); border: 1px solid #e0d9fc; color: #4730a8; text-decoration: none; font-weight: 650; }
.metric:hover { box-shadow: var(--shadow); text-decoration: underline; }
.metric strong { font-size: 1.9rem; line-height: 1.2; }
.metric-icon { grid-area: 1 / 2 / 3 / 3; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; background: #ffffffa0; border-radius: .65rem; }
.metric-blue { background: linear-gradient(125deg, #f4faff, #deedff); border-color: #d5e5f8; color: #20558d; }
.metric-teal { background: linear-gradient(125deg, #f2fcfb, #dff5ef); border-color: #d3eee7; color: #176758; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
.office-donut-figure { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; margin: 0; padding: 1.2rem; }
.office-donut { display: grid; place-items: center; width: clamp(8rem, 28vw, 11rem); aspect-ratio: 1; border-radius: 50%; flex: none; }
.office-donut-total { display: grid; place-content: center; width: 68%; aspect-ratio: 1; border-radius: 50%; background: #fff; text-align: center; }
.office-donut-total strong { font-size: clamp(1.1rem, 3vw, 1.55rem); }
.office-donut-total small { color: var(--muted); }
.office-donut-legend { flex: 1 1 12rem; min-width: 0; list-style: none; margin: 0; padding: 0; }
.office-donut-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: baseline; margin: .38rem 0; font-size: .85rem; overflow-wrap: anywhere; }
.office-donut-key { width: .65rem; height: .65rem; border-radius: .16rem; align-self: center; }
progress { width: 100%; height: .45rem; accent-color: var(--accent); }
.employee-id-card { width: min(100%, 31rem); margin: 0 0 1rem; border: 2px solid #263d53; border-radius: .65rem; background: white; color: #192c3e; overflow: hidden; }
.employee-id-card header { padding: .65rem .85rem; border-bottom: 1px solid #263d53; }
.employee-id-details { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .85rem; overflow-wrap: anywhere; }
.employee-id-details img { flex: none; }
.employee-id-photo { object-fit: cover; border: 1px solid #c8d0d8; }
.card-verification { width: min(100% - 2rem, 40rem); margin: 2rem auto; }
.leave-order { max-width: 48rem; padding: 2rem; overflow-wrap: anywhere; }
.leave-order header { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.leave-order dl { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: .6rem 1rem; margin: 1.5rem 0; }
.leave-order dt { font-weight: 650; }
.leave-order dd { margin: 0; }
.leave-order footer { margin-top: 3rem; border-top: 1px solid var(--line); }
@media print {
    body:has(.employee-id-card) { background: white; }
    body:has(.employee-id-card) .app-shell { display: block; }
    body:has(.employee-id-card) :is(.sidebar, .topbar, .skip-link, main > :not(.employee-id-card)) { display: none; }
    body:has(.employee-id-card) main { padding: 0; }
    .employee-id-card { break-inside: avoid; }
    body:has(.leave-order) { background: white; }
    body:has(.leave-order) .app-shell { display: block; }
    body:has(.leave-order) :is(.sidebar, .topbar, .skip-link, main > :not(.leave-order)) { display: none; }
    body:has(.leave-order) main { padding: 0; }
    .leave-order { max-width: none; padding: 0; border: 0; box-shadow: none; color: black; }
    .leave-order :is(header, dl, footer) { break-inside: avoid; }
}
.module-links a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .9rem 1.2rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.module-links a:last-child { border-bottom: 0; }
.module-links a:hover { background: #f9f8ff; }
.dashboard-charts > .panel { margin: 0; }
.review-chart-body { padding: .95rem 1.2rem 1.2rem; }
.review-total { display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline; margin: 0 0 .75rem; color: var(--muted); }
.review-total strong { color: var(--ink); font-size: 2.35rem; line-height: 1.05; }
.review-deadlines { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .25rem; text-decoration: none; }
.review-deadlines:hover { text-decoration: underline; }
.review-overdue { background: #fce6e8; color: #962d47; }
.review-bars { list-style: none; padding: 0; margin: 0; }
.review-bars li { margin-top: .75rem; }
.review-bars li > div:first-child { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .26rem; font-size: .86rem; }
.review-bar { height: .48rem; border-radius: 1rem; background: #edf0f9; overflow: hidden; }
.review-bar span { display: block; height: 100%; width: var(--bar-width); border-radius: inherit; background: #6548df; }
.review-bars li:nth-child(2) .review-bar span { background: #187b71; }
.review-bars li:nth-child(3) .review-bar span { background: #316ba9; }
.dashboard-modules { margin: 1.35rem 0; }
.dashboard-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.dashboard-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .85rem; }
.dashboard-module { padding: 1rem; margin: 0; }
.dashboard-module h3 { margin: 0 0 .7rem; font-size: 1rem; }
.dashboard-module h3 a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .58rem; text-decoration: none; }
.dashboard-module h3 a:hover { text-decoration: underline; }
.dashboard-module-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .62rem; background: #eeebff; color: #5238ba; }
.dashboard-module[data-icon="clock"] .dashboard-module-icon, .dashboard-module[data-icon="posts"] .dashboard-module-icon { background: #e2f5ee; color: #126a58; }
.dashboard-module[data-icon="organization"] .dashboard-module-icon, .dashboard-module[data-icon="reports"] .dashboard-module-icon { background: #e7f0ff; color: #205589; }
.dashboard-module[data-icon="case"] .dashboard-module-icon { background: #f8edf6; color: #874273; }
.dashboard-module-arrow { color: var(--muted); font-weight: 400; }
.dashboard-module dl { margin: 0; }
.dashboard-module dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .4rem 0; }
.dashboard-module dl div + div { border-top: 1px solid var(--line); }
.dashboard-module dt { color: var(--muted); }
.dashboard-module dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.dashboard-module dl div:first-child dd { font-size: 1.3rem; line-height: 1; }
.post-breakdown { display: flex; height: .5rem; border-radius: 1rem; overflow: hidden; margin-bottom: .55rem; }
.post-breakdown span { flex: var(--post-count) 0 0; }
.post-segment-1 { background: #187b71; }
.post-segment-2 { background: #d58a26; }
.post-segment-3 { background: #a3aec6; }
.post-key { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .22rem; vertical-align: .06rem; }

@media (max-width: 58rem) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; height: auto; padding: .6rem 1rem; }
    .brand { border: 0; padding: .2rem 0; }
    .side-nav { display: flex; flex-wrap: wrap; margin-top: .5rem; }
    .side-nav a { padding: .45rem .6rem; }
    .nav-label, .sidebar-footer { display: none; }
}
@media (max-width: 43rem) {
    .page-heading { align-items: flex-start; flex-direction: column; }
    .metric-grid, .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar { align-items: flex-start; }
    .account small { display: none; }
    .edit label { flex: 1 1 12rem; }
    th, td { padding: .65rem .8rem; }
}