/* HR Flow inspired visual system. Existing routes, forms and permissions remain authoritative. */
:root{--bg:#f3f6fb;--border:#e5ebf2;--muted:#596b83;--text:#172c47;--navy:#142b45;--teal:#087f8c}
body{font-size:14px;line-height:1.55;background:var(--bg)}
.top-workspace .app-header{height:72px;padding:0 30px;gap:35px;box-shadow:0 2px 12px #142b4505}
.top-workspace{padding-top:72px}.top-workspace main{max-width:1500px;margin:30px auto 0;padding:0 30px}
.brand{font-size:24px}.mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#087f8c,#075967);box-shadow:0 4px 9px #087f8c18}
.top-nav .top-link,.nav-dropdown>summary{font-size:13px;padding:10px 16px;border-radius:9px}
.top-nav a[aria-current],.nav-dropdown>summary.selected,.nav-dropdown[open]>summary{background:#e8f5f6;color:#076a75}
.nav-panel{border-radius:14px;padding:14px;box-shadow:0 18px 55px #142b451a}.nav-panel a{font-size:13px;padding:10px 12px}
.nav-panel a[aria-current]{background:#e8f5f6;color:#076a75}.mega-panel{padding:22px;gap:18px}
.account-nav button{border-radius:9px;color:#40546e;background:#fff}.account-nav button:hover{background:#eef4f8}
h1{font-size:28px;letter-spacing:-.75px;margin:8px 0 12px}h2{font-size:17px;letter-spacing:-.3px}h3{font-size:15px}.eyebrow{font-size:10px;letter-spacing:1.4px}
.workspace .card,.card{border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 5px 18px #142b4503}
.page-head{margin-bottom:24px}.staff-heading{border:0;background:transparent;padding:0!important;margin-bottom:26px;border-radius:0}.staff-heading h1{font-size:28px}.staff-heading p{font-size:13px}
.dashboard-context{display:flex;align-items:center;gap:12px;color:#596b83;font-size:12px}.dashboard-context time{font-variant-numeric:tabular-nums}
.dashboard-banner{background:linear-gradient(110deg,#142b45,#164553);border:0;border-radius:18px;padding:26px 30px;margin:22px 0;color:white;min-height:150px}
.dashboard-banner h2{font-size:25px;color:white;margin:7px 0 10px}.dashboard-banner .eyebrow{color:#90d9df}.dashboard-banner p{color:#d1e3ec;font-size:13px}.dashboard-banner time{color:#d1e3ec;font-size:12px}.dashboard-banner .button{background:white;color:#075967;padding:8px 14px;min-height:36px;font-size:12px}.banner-art{opacity:.15;right:18%}.banner-art span{border-color:#a2e8ec}
.dashboard-metrics{gap:16px}.metric,.role-workspace .metric{position:relative;border:1px solid var(--border);border-radius:15px;padding:21px 23px;gap:8px;box-shadow:none;background:white;overflow:hidden}
.metric:before{content:'';display:block;width:28px;height:5px;border-radius:4px;background:#087f8c;margin-bottom:3px}
.metric:nth-child(4n+2):before{background:#4584dc}.metric:nth-child(4n+3):before{background:#8866d8}.metric:nth-child(4n+4):before{background:#dd9147}
.metric:nth-child(4n+1){background:#eff9fa;border-color:#d8eef0}.metric:nth-child(4n+2){background:#f0f6ff;border-color:#deebfd}.metric:nth-child(4n+3){background:#f7f3ff;border-color:#ebe3fc}.metric:nth-child(4n+4){background:#fff8ef;border-color:#f5e8d6}
.metric-label{font-size:12px;color:#40546e;font-weight:600}.metric>strong,.role-workspace .metric>strong{font-size:32px;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums}.metric-note,.metric>a{font-size:11px;line-height:1.5}.metric>a{font-weight:600}
.attendance-headcounts{margin:25px 0}.attendance-headcounts>h2{font-size:15px}.attendance-headcounts>.helptext{max-width:950px;font-size:11px;line-height:1.6}
.attendance-breakdown{background:#eaf0f7;border-radius:10px;color:#40546e;padding:12px 16px}
.dashboard-panels{grid-template-columns:1.6fr 1fr 1fr;gap:18px;margin:24px 0}.dashboard-panels .card{border-radius:16px;padding:24px}.dashboard-panels h2{font-size:16px}.panel-caption{font-size:12px;color:#63758d;margin:7px 0 20px}
.activity-chart{height:210px;gap:14px}.bar-track{height:140px;background-size:100% 35px}.activity-bar{background:linear-gradient(0deg,#087f8c,#5fc0c8);border-radius:6px 6px 0 0;width:55%}.activity-column>span{font-size:11px;color:#40546e}.activity-column time{font-size:11px}.activity-column time small{font-size:10px}
.team-donut{width:150px;height:150px}.team-donut>div{width:116px;height:116px}.department-list li{font-size:12px;margin:12px 0}.joiner-list li{padding:14px 0;font-size:13px}.joiner-list div>span,.joiner-list small{font-size:11px}.person-avatar{width:37px;height:37px;background:#eaf5f6;color:#087f8c;border-radius:12px}
.role-workspace>.row{margin:25px 0 16px}.role-workspace h2{font-size:17px}.role-panels{gap:18px;margin:24px 0}.dashboard-actions{gap:8px;grid-template-columns:1fr}.dashboard-actions a{border:1px solid #e6edf3;background:#f8fafc;padding:12px 14px;border-radius:9px;font-size:13px;color:#233d58}.dashboard-actions a:hover{background:#eaf5f6;border-color:#c9e5e8;color:#076a75}
.scope-track{height:9px;background:#eef2f8}.scope-track span{background:linear-gradient(90deg,#087f8c,#63bec5)}.scope-chart li{margin:18px 0;font-size:13px}.staff-overview .card{border-top:1px solid var(--border);padding:24px;border-radius:16px}.staff-overview .card>strong{font-size:25px}.staff-overview h2{font-size:16px}.staff-overview p{font-size:13px}
table{font-size:13px}th{font-size:10px;letter-spacing:.8px;background:#f5f8fc;color:#52647d;padding:13px 16px}td{padding:16px;border-bottom:1px solid #edf1f6;font-variant-numeric:tabular-nums}tbody tr:hover{background:#f5fafb}.table-wrap{border:1px solid #e7edf4;border-radius:12px}.table-wrap table{margin:0}
input,select,textarea{border:1px solid #d4dee9;border-radius:9px;background:#fbfcfe;min-height:44px;font-size:14px}input:focus,select:focus,textarea:focus{background:white;border-color:#087f8c}label{font-size:12px}.toolbar{gap:12px}.button,button{border-radius:9px;font-size:13px;box-shadow:none}.badge{border-radius:20px;font-size:11px;padding:5px 10px}.notice{border-radius:12px}.policy-page{max-width:1100px}.policy-section{padding:24px 0}.policy-fields{gap:24px}.late-entry{color:#b42332!important;font-weight:700}
input[type=hidden]{display:none!important}
.skip:focus{position:fixed;z-index:200}.top-workspace footer{padding:30px;margin:0;color:#63758d}
@media(max-width:1200px){.dashboard-panels{grid-template-columns:1.4fr 1fr}.activity-panel{grid-column:1 / -1}.top-workspace .app-header{gap:18px}.top-nav .top-link,.nav-dropdown>summary{padding:10px 12px}}
@media(max-width:900px){.top-workspace{padding-top:68px}.top-workspace .app-header{height:68px;padding:0 16px;gap:10px}.top-workspace main{padding:0 16px;margin-top:22px}.primary-navigation>.top-nav{top:68px}.mega-panel{padding:12px;gap:12px}.nav-panel{border-radius:10px;box-shadow:none}.brand{font-size:21px}.mark{width:32px;height:32px}.account-nav button{font-size:11px}}
@media(max-width:640px){h1,.staff-heading h1{font-size:24px}.card,.workspace .card,.dashboard-panels .card{padding:19px;border-radius:14px}.dashboard-banner{padding:23px;min-height:0}.dashboard-banner h2{font-size:22px}.dashboard-panels{grid-template-columns:1fr}.dashboard-metrics{gap:10px}.metric,.role-workspace .metric{padding:17px 15px;border-radius:12px}.metric>strong,.role-workspace .metric>strong{font-size:27px}.metric-label{font-size:11px}.metric-note{font-size:10px}.dashboard-panels{gap:15px}.role-panels{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.row{flex-wrap:wrap;gap:12px}.form-actions{flex-wrap:wrap}.activity-chart{gap:8px}.staff-overview{grid-template-columns:1fr}.toolbar .search{min-width:0;width:100%}.toolbar .field{min-width:0;flex-basis:100%}.account-nav>a{display:none}.attendance-breakdown{gap:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}