/* R12.18.0 — Studio UI. Presentation only; business selectors/IDs stay intact. */
:root{
 --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --ink:#172438;--muted:#58677c;--line:#dfe5ee;--surface:#fff;
 --brand:#2448d8;--brand2:#2448d8;--soft:#f5f6fa;
 --shadow:0 1px 2px rgba(21,35,57,.035),0 4px 16px rgba(21,35,57,.025);
 color-scheme:light;
}
html,body{background:#f5f6fa!important;color:var(--ink);font-family:var(--font-ui)!important}
body{line-height:1.5}
button,input,select,textarea{font-family:var(--font-ui)!important}
h1,h2,h3{letter-spacing:-.035em;font-weight:750}
button{font-weight:650}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #2448d8;outline-offset:3px}
body .surface,body .glass-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)!important;backdrop-filter:none!important}
body .primary,body .primary-small,body .primary-proxy{background:#2448d8!important;color:#fff!important;box-shadow:none!important;border-color:#2448d8!important}
body .primary:hover:not(:disabled),body .primary-small:hover:not(:disabled){background:#1a36ad!important}
body .action-button,body .secondary-small,body .ghost,body .proxy-action{border-radius:8px;min-height:44px;box-shadow:none}
body input:not([type="checkbox"]):not([type="radio"]):not(.native-picker-input),body select,body textarea{border-radius:8px;background:#fff;color:#172438;font-weight:450}
body input:not([type="checkbox"]):not([type="radio"]):not(.native-picker-input):focus,body select:focus,body textarea:focus{border-color:#2448d8!important;box-shadow:0 0 0 3px #2448d814}
body input::placeholder,body textarea::placeholder{color:#657489;opacity:1}
body .muted,body .empty-state{color:#58677c}
body .field-label,body .admin-panel-head .muted{font-size:14px;line-height:1.5}
.studio-eyebrow{display:block;font-size:11px;font-weight:750;letter-spacing:.12em;line-height:1.5;color:#425887}
.workspace-marker{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#172438;font-size:13px;font-weight:800;letter-spacing:.045em}
.workspace-marker small{display:block;color:#58677c;font-size:10px;font-weight:600;letter-spacing:.11em;margin-top:1px}
.workspace-mark{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:#2448d8;color:#fff;font-size:13px;letter-spacing:-.04em}
/* Sign-in: a quiet editorial panel, no external imagery, fonts or libraries. */
body .login-screen{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch;place-items:stretch;width:min(1120px,calc(100% - 64px));min-height:660px;margin:56px auto 0;padding:0;border:1px solid #dfe5ee;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 40px #17243808}
.login-intro{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:44px;background:#172438;color:#fff;min-width:0}
.studio-wordmark{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:750;letter-spacing:.05em}
.studio-wordmark img{border-radius:10px}
.studio-wordmark small{display:block;color:#b7c6e1;font-size:10px;font-weight:550;letter-spacing:.14em;margin-top:2px}
.login-story .studio-eyebrow{color:#a7baff}
.login-story h2{font-size:clamp(32px,3.5vw,46px);line-height:1.2;letter-spacing:-.045em;margin:16px 0 20px;color:#fff;font-weight:650}
.login-story p{color:#c4cfe0;font-size:16px;line-height:1.7;max-width:360px;margin:0}
.login-capabilities{display:grid;gap:0;border-top:1px solid #ffffff2a}
.login-capabilities>span{display:flex;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid #ffffff2a;color:#a7baff;font-size:12px}
.login-capabilities b{color:#eff3fa;font-size:14px;font-weight:500}
.intro-caption{font-size:11px;color:#bac8de}
body .login-card{width:100%;max-width:none;display:flex;flex-direction:column;justify-content:center;padding:48px 40px;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:left}
body .login-heading h1{font-size:30px;line-height:1.2;margin:12px 0;color:#172438}
body .login-heading p{font-size:14px;color:#58677c;margin:0 0 28px;line-height:1.6}
body .login-tabs{padding:4px;background:#f0f2f8;border:1px solid #e0e5f0;border-radius:9px;margin:0 0 28px;gap:4px}
body .login-tab{border-radius:6px;color:#526177;min-height:44px;font-weight:650;font-size:14px;padding:10px 8px}
body .login-tab.active{background:#fff;color:#2448d8;box-shadow:0 1px 4px #14223514}
body .login-button{border-radius:8px;font-size:16px;font-weight:650;min-height:52px}
body .register-link-button{color:#58677c;margin:14px 0 0;text-align:center}
body .register-link-button b{color:#2448d8}
body .login-card .message{margin-bottom:0;font-size:14px}
/* Employee space: identity, daily action, then supporting information. */
body .app-screen{width:min(100%,920px);padding:24px 24px 32px;min-height:0}
body .app-header{padding:24px;gap:24px;border-radius:12px}
body .app-header .company>b{font-size:16px;line-height:1.5;font-weight:700}
body .app-header .company>span{font-size:14px;color:#58677c;line-height:1.5}
body .app-header .employee-line{margin-top:12px}
body .header-actions{gap:8px}
body .button-icon{display:none}
body .motivation-card{background:#eef2ff;border:1px solid #d8dff7;padding:18px 22px;border-radius:12px;margin-top:16px}
body .motivation-star{display:none}
body .motivation-content>b{font-size:15px;font-weight:600;color:#293e78;line-height:1.5}
body .progress-track{height:4px;background:#d7deef;margin:12px 0 8px;border-radius:2px}
body #progressBar{background:#2448d8;border-radius:2px}
body .progress-text{font-size:14px;color:#526177}
body .today-card{padding:24px;margin-top:16px;border-radius:12px;overflow:hidden}
body .today-top{background:#172438;color:#fff;margin:-24px -24px 24px;padding:24px;align-items:flex-start;gap:16px}
body .today-top small{color:#becbec;font-size:11px;letter-spacing:.12em;font-weight:650}
body .today-top h2{color:#fff;font-size:32px;line-height:1.15;margin:8px 0 0;letter-spacing:-.04em}
body .date-chip{background:#2d3d58;color:#edf1ff;border:1px solid #52627d;border-radius:6px;font-size:14px;padding:6px 10px;white-space:nowrap}
body .punch-button{font-size:18px;min-height:60px;border-radius:9px;margin:0;font-weight:700;letter-spacing:0}
body .punch-hint{font-size:14px;color:#58677c;margin:12px 0 20px;line-height:1.5}
body .work-options{border-top:1px solid #e1e6ef}
body .work-option{padding:16px 0;gap:12px;border-bottom:1px solid #e1e6ef}
body .work-option:last-child{border-bottom:0}
body .option-copy b{font-size:15px;font-weight:650;color:#172438}
body .option-copy small{font-size:14px;color:#58677c;line-height:1.5}
body .check-ui{border-radius:6px}
body .leave-request-btn{border-radius:9px;background:#f4f6fb;border:1px solid #dfe5ee;box-shadow:none;padding:16px}
body .leave-request-btn small{color:#58677c;font-size:14px}
body .stats-grid{gap:12px;margin-top:16px}
body .stat-card{padding:20px;border-radius:12px;background:#fff!important;border:1px solid #dfe5ee;min-height:132px;box-shadow:none!important}
body .stat-card span,body .stat-card small{font-size:14px;color:#58677c;line-height:1.5}
body .stat-card b{font-size:36px;font-weight:700;letter-spacing:-.05em;margin:10px 0 4px;color:#2448d8}
body .stat-late b{color:#a65c0a}body .stat-leave b{color:#aa394b}
body .history-card{padding:24px;margin-top:16px;border-radius:12px}
body .section-heading h2{font-size:22px;margin:0;line-height:1.3}
body .text-action{background:#eef2ff;color:#2448d8;border:1px solid #d9e0f7;border-radius:7px;min-height:44px;padding:8px 12px;font-size:14px}
body .history-heading #historyMeta{font-size:14px;color:#58677c}
/* Administration: white navigation rail and clean work surfaces. */
body .admin-screen{width:min(1360px,calc(100% - 64px));margin:32px auto;gap:24px;grid-template-columns:196px minmax(0,1fr)}
body .admin-topbar{padding:24px 28px;border-radius:12px;align-items:center}
body .admin-brand-block .workspace-marker{margin-bottom:20px}
body .admin-brand-block>small{font-size:11px;letter-spacing:.1em;color:#58677c;font-weight:650}
body .admin-brand-block h1{font-size:30px;line-height:1.2;margin:6px 0 10px}
body .admin-brand-block #adminIdentity{font-size:14px}
body .sync-state{border-radius:5px;background:#edf6f2;color:#246a50;font-size:12px;border:1px solid #c6e1d3;padding:4px 8px}
body .admin-nav{padding:12px;margin:0;border-radius:12px;gap:6px;top:24px;box-shadow:none!important}
body .admin-nav-btn{display:flex;align-items:center;gap:12px;min-height:46px;padding:12px;font-size:14px;color:#58677c;border-radius:7px;white-space:normal}
body .admin-nav-btn svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body .admin-nav-btn.active{background:#edf1ff;color:#2448d8}
body .admin-nav-btn:hover{background:#f0f3fa}
.route-heading{padding:4px 0 22px}
.route-heading h2{font-size:28px;line-height:1.3;margin:8px 0 0;letter-spacing:-.035em;color:#172438;font-weight:650}
body #adminTab-overview .final-kpis{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}
body .admin-kpi{padding:20px;border-radius:10px;position:relative;overflow:hidden;min-height:136px;box-shadow:none!important}
body .admin-kpi span,body .admin-kpi small{font-size:14px;line-height:1.45;color:#58677c}
body .admin-kpi b{font-size:36px;letter-spacing:-.04em;margin:10px 0 6px;line-height:1.1;color:#172438;font-weight:700}
body .admin-kpi.kpi-action{background:#eef2ff;border-color:#d5ddf7}
body .admin-kpi.kpi-action b{color:#2448d8}
body .admin-panel{padding:24px;border-radius:12px;margin-top:16px;box-shadow:none!important}
body .admin-panel-head{gap:16px;align-items:center}
body .admin-panel-head h2{font-size:20px;line-height:1.3;letter-spacing:-.025em}
body .admin-panel-head .muted{display:block;margin-top:6px}
body .trend-panel{margin-top:20px}
body .admin-kpi::before{display:none}
body .chart-legend span{font-size:13px;color:#58677c}
body .legend-in{background:#2448d8}body .legend-late{background:#a65c0a}
body .trend-up{fill:#2448d8;stroke:#2448d8}body .trend-wick{stroke:#2448d8}
body .trend-down{fill:#bb5964;stroke:#bb5964}
body .attention-card,body .proxy-person,body .admin-notif-item,body .alert-center-item{border-radius:8px;box-shadow:none}
body .table-wrap,body .timesheet-wrap{border-radius:8px}
body th{background:#f5f6fa!important;color:#58677c;font-weight:650;letter-spacing:.035em}
body .primary-small,body .secondary-small{font-size:14px}
/* Dialogs: keep the 17.10 field sizing guard, change only visual treatment. */
body #modal,body #modal .modal-inner{border-radius:12px!important}
body dialog::backdrop{background:#14203580;backdrop-filter:none!important}
body #modal .modal-inner{border:1px solid #dfe5ee;box-shadow:0 12px 60px #17243826!important}
body #modal .modal-close{border-radius:8px;background:#edf1f7;color:#344763;border:1px solid #d2dae8}
body #modal h2{color:#172438;font-size:26px;line-height:1.2;font-weight:650;letter-spacing:-.035em}
body #modal input:not(.native-picker-input),body #modal select,body #modal textarea{border-radius:8px!important;font-weight:450!important}
body #modal .native-picker-shell{border-radius:8px!important;box-shadow:none!important}
body #modal .manual-supplement-modal .supplement-time-grid>label{border-radius:8px!important}
body #modal .primary-small,body #modal .primary,body #modal .login-button{background:#2448d8!important;border-radius:8px!important;box-shadow:none!important}
body .toast{background:#172438;border-radius:8px;box-shadow:var(--shadow)}
/* Version is IN document flow: never fixed, never over content or navigation. */
.release-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px;width:min(1120px,calc(100% - 48px));margin:16px auto 24px;padding:12px 0;border-top:1px solid #dfe5ee;color:#58677c;font-size:11px;min-height:44px}
.release-identity{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.release-dot{width:5px;height:5px;background:#2448d8;border-radius:50%}
body .app-version-badge{position:static!important;inset:auto!important;z-index:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;font:500 11px/1.5 var(--font-ui)!important;color:#58677c;pointer-events:auto;white-space:nowrap}
.release-check{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:#41577c;padding:8px 4px;min-height:44px;font:500 11px/1.5 var(--font-ui);text-underline-offset:3px}
.release-check:hover{text-decoration:underline}
.release-status{font-size:11px;line-height:1.5;color:#58677c;max-width:100%;overflow-wrap:anywhere}
body .hidden{display:none!important}
@media(max-width:1100px) and (min-width:901px){body .admin-screen{width:calc(100% - 40px);grid-template-columns:172px minmax(0,1fr);gap:16px}body .admin-panel{padding:20px}}
@media(max-width:900px){
 body .admin-screen{display:block;width:calc(100% - 32px);margin:16px auto 24px;padding-bottom:0}
 body .admin-topbar{padding:20px;gap:20px;align-items:flex-start;flex-wrap:wrap}
 body .admin-brand-block h1{font-size:26px}body .admin-top-actions{width:100%;justify-content:space-between}
 body .admin-brand-block .workspace-marker{margin-bottom:16px}
 body .admin-nav{display:none!important}
 body .admin-mobile-nav{position:sticky!important;inset:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;transform:none!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));width:100%!important;max-width:none;margin:20px 0 0;padding:6px;border:1px solid #cbd5e5;border-radius:12px;background:#fff;box-shadow:0 4px 20px #17243814;z-index:25}
 body .mobile-nav-btn{min-width:0;padding:8px 2px;border-radius:8px;min-height:54px;background:transparent;color:#58677c}
 body .mobile-nav-btn.active{color:#2448d8;background:#edf1ff}
 body .mobile-nav-btn>b{font-size:11px;line-height:1.3}
 body .mobile-nav-btn>span{font-size:20px;line-height:1.1}
 body .admin-panel{padding:20px}
 .route-heading{padding:24px 0 18px}.route-heading h2{font-size:25px}
 .release-footer{margin:16px auto 24px;width:calc(100% - 32px)}
}
@media(max-width:640px){
 body .login-screen{display:flex;flex-direction:column;width:calc(100% - 32px);margin:16px auto 0;min-height:0;border-radius:12px;overflow:hidden}
 .login-intro{padding:24px;gap:28px}
 .login-story h2{font-size:30px;margin:12px 0}
 .login-story p{font-size:14px;line-height:1.6}
 .login-capabilities,.intro-caption{display:none}
 .studio-wordmark{font-size:14px}.studio-wordmark img{width:32px;height:32px}
 body .login-card{padding:28px 24px}
 body .login-heading h1{font-size:26px;margin-top:10px}
 body .login-heading .studio-eyebrow{display:none}
 body .login-tabs{margin-bottom:24px}
 body .app-screen{padding:16px;min-height:0}
 body .app-header{padding:20px;gap:20px;flex-direction:column;align-items:stretch}
 body .app-header .workspace-marker{margin-bottom:16px}
 body .header-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 body .header-actions button{font-size:14px;min-height:44px}
 body .motivation-card{padding:16px 18px;margin-top:12px}
 body .motivation-content>b{font-size:14px}
 body .today-card{padding:20px;margin-top:12px}
 body .today-top{padding:20px;margin:-20px -20px 20px;gap:12px}
 body .today-top h2{font-size:28px}
 body .date-chip{font-size:12px;padding:6px 8px;white-space:normal;max-width:100px}
 body .punch-button{font-size:16px;min-height:56px}
 body .stats-grid{gap:8px;margin-top:12px}
 body .stat-card{padding:14px 10px;min-height:130px}
 body .stat-card span,body .stat-card small{font-size:12px;line-height:1.4}
 body .stat-card b{font-size:30px;margin:10px 0 6px}
 body .history-card{padding:20px;margin-top:12px}
 body .history-heading{align-items:flex-start;gap:12px;flex-wrap:wrap}
 body .history-heading h2{font-size:22px}
 body #adminTab-overview .final-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 body .admin-kpi{padding:16px;min-height:144px}
 body .admin-kpi b{font-size:32px}
 body .admin-kpi span,body .admin-kpi small{font-size:13px}
 body .admin-panel{padding:18px;border-radius:12px;margin-top:12px}
 body .admin-panel-head h2{font-size:20px}
 body #modal .modal-inner{padding:24px 20px}
 body #modal h2{font-size:24px}
 body .push-log-row{font-size:14px}
 body .release-footer{gap:0 12px;margin-top:8px}
 body .release-status:empty{display:none}
}
@media(max-width:359px){
 body .login-intro,body .login-card{padding:20px}
 .login-story h2{font-size:27px}
 body .login-tab{font-size:13px}
 body .today-top{flex-wrap:wrap}
 body .stats-grid{grid-template-columns:1fr!important}
 body .stat-card{display:grid;grid-template-columns:1fr auto;gap:4px 12px;min-height:0;padding:14px}
 body .stat-card b{grid-column:2;grid-row:1/3;margin:0;align-self:center}
 body .history-heading .text-action{width:100%;justify-content:center}
}
/* Explicitly reset legacy grid slots after removing the decorative star. */
body .motivation-card{display:block!important;background:#eef2ff!important;grid-template-columns:none!important}
body .motivation-content{width:100%;min-width:0}
body .app-header{display:flex!important;margin:0!important;width:100%!important}
@media(min-width:901px){
 body .admin-brand-block{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;min-width:0}
 body .admin-brand-block>.workspace-marker{grid-column:1;grid-row:1/4;align-self:center;margin:0;padding-right:28px;border-right:1px solid #dfe5ee}
 body .admin-brand-block>small,body .admin-brand-block>h1,body .admin-brand-block>#adminIdentity{grid-column:2}
 body .admin-brand-block h1{font-size:26px;margin:4px 0 6px}
}
@media(max-width:640px){
 body .stat-card span,body .stat-card small{font-size:14px}
 body .admin-kpi span,body .admin-kpi small{font-size:14px}
 body .mobile-nav-btn>b{font-size:13px}
}
body #modal .notification-modal-head{padding-top:44px;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
body #modal .notification-modal-head .mini-action{min-height:44px;border-radius:8px;padding:8px 12px}
body #modal .notification-enable-card{border-radius:8px;background:#eef2ff;border-color:#ced8f5}
body #modal .notification-system-status{border-radius:8px}
/* Scope final mobile geometry above legacy hotfix specificity. */
@media(max-width:900px){
 #adminView.admin-screen{padding:0!important;min-height:0!important}
 #adminView .admin-topbar{padding:20px!important;gap:16px!important}
 #adminView .admin-top-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;width:100%!important;gap:12px!important}
 #adminView #adminLogoutBtn{width:auto!important;min-width:104px;flex:0 0 auto;margin:0!important}
 #adminView .admin-mobile-nav{position:sticky!important;inset:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;width:100%!important;min-height:68px!important;margin:20px 0 0!important;padding:6px!important;gap:2px!important;border-radius:12px!important;border:1px solid #cbd5e5!important;box-shadow:0 4px 20px #17243814!important;background:#fff!important}
 #adminView .mobile-nav-btn{min-height:54px!important;padding:6px 1px!important;gap:4px!important;border-radius:8px!important;color:#58677c!important;background:transparent!important;box-shadow:none!important;transition:none!important}
 #adminView .mobile-nav-btn.active{color:#2448d8!important;background:#edf1ff!important}
 #adminView .mobile-nav-btn span{font-size:22px!important;min-height:23px!important;transform:none!important}
 #adminView .mobile-nav-btn b{font-size:12px!important;line-height:1.3!important;letter-spacing:-.025em!important}
}
@media(max-width:360px){#adminView .mobile-nav-btn b{font-size:11px!important}}
/* Pagination belongs below the list; legacy sticky positioning covered its heading. */
#adminView .notification-pagination{position:static!important;inset:auto!important;margin-top:16px!important;padding:8px 0 0!important}
#modal #modalClose{z-index:20!important}
#adminTab-audit .admin-panel-head{display:grid!important;grid-template-columns:minmax(260px,1fr) minmax(240px,1fr);align-items:center;gap:24px}
#adminTab-audit #auditSearch{width:100%!important;min-width:0!important}
@media(max-width:640px){
 #adminTab-audit .admin-panel-head{grid-template-columns:minmax(0,1fr);gap:16px}
 #adminView .admin-tools-head>div:first-child{align-self:stretch;text-align:left}
}
/* Reserve a non-scrolling close rail, including after scrolling long forms. */
#modal .modal-inner{padding-top:66px!important}
body #modal .notification-modal-head,body #modal .month-history-head{padding-top:0!important}
@media(max-width:640px){
 #modal[open],#modal[open] .modal-inner{max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important}
}