:root{--navy:#17324d;--blue:#1d6fa5;--sky:#eaf4fa;--ink:#172033;--muted:#687386;--line:#dce3ea;--bg:#f4f7fa;--white:#fff;--green:#16805a;--red:#b63838;--amber:#a2600b;--radius:18px;--shadow:0 12px 35px rgba(23,50,77,.08)}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh}a{color:var(--blue);text-decoration:none}button,input,select,textarea{font:inherit}.topbar{height:72px;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 max(24px,calc((100vw - 1240px)/2));position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:800;white-space:nowrap}.brand-mark,.login-logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-weight:900}.brand-mark{width:36px;height:36px;border-radius:11px}.topbar nav{display:flex;gap:4px;flex:1}.topbar nav a{color:#536174;font-weight:650;padding:10px 11px;border-radius:10px;font-size:14px}.topbar nav a:hover,.topbar nav a.active{background:var(--sky);color:var(--navy)}.account{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:650}.account form{margin:0}.menu-toggle{display:none;border:0;background:none;font-size:24px}.container{width:min(1180px,calc(100% - 32px));margin:34px auto 80px}.container.guest{display:grid;place-items:center;min-height:100vh;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.page-head h1,.hero h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.04em;margin:4px 0 7px}.page-head p,.hero p{margin:0}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:850;color:var(--blue);text-transform:uppercase}.muted{color:var(--muted)}.card,.login-card,.camera-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card{padding:24px;margin-bottom:22px}.card h2{margin:0 0 20px}.login-card{width:min(440px,100%);padding:42px}.login-logo{width:58px;height:58px;border-radius:17px;font-size:30px;margin-bottom:24px}.login-card h1{font-size:38px;margin:5px 0}.stack{display:grid;gap:18px}.login-card .stack{margin-top:28px}label{display:grid;gap:7px;font-weight:700;font-size:14px}input,select,textarea{width:100%;border:1px solid #cfd7e0;border-radius:11px;padding:12px 13px;background:#fff;color:var(--ink)}input:focus,select:focus,textarea:focus{outline:3px solid rgba(29,111,165,.13);border-color:var(--blue)}button,.button{border:1px solid #cbd5df;background:#fff;color:var(--navy);padding:11px 16px;border-radius:11px;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary{background:var(--navy);border-color:var(--navy);color:#fff}.danger{background:#fff2f2;border-color:#efbaba;color:var(--red)}.small{padding:7px 10px;font-size:13px}.link-button{border:0;background:none;padding:3px;color:var(--blue)}.danger-text{color:var(--red)}.alert{padding:15px 18px;border-radius:13px;margin-bottom:20px;border:1px solid}.alert.success{background:#eaf9f2;color:#116947;border-color:#b9ead5}.alert.error{background:#fff0f0;color:#9f2f2f;border-color:#f0c1c1}.alert.warning{background:#fff8e8;color:#825111;border-color:#efd69d}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stats article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.stats span{display:block;color:var(--muted);font-size:13px;margin-bottom:9px}.stats strong{font-size:25px}.section-head,.head-actions,.form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:12px;border-bottom:1px solid var(--line)}td{padding:14px 12px;border-bottom:1px solid #edf0f3;vertical-align:top}td small{display:block;color:var(--muted);margin-top:4px}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#eef1f4}.badge.ontime,.badge.approved,.badge.active{background:#e5f7ef;color:#11704c}.badge.late,.badge.pending{background:#fff3d7;color:#8a5609}.badge.rejected,.badge.inactive{background:#ffe8e8;color:#a63232}.hero{background:linear-gradient(135deg,var(--navy),#245d82);color:#fff;border-radius:24px;padding:34px;margin-bottom:20px}.hero .eyebrow{color:#9fd5f4}.attendance-cta{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;color:var(--ink);box-shadow:var(--shadow)}.attendance-cta>span{width:52px;height:52px;border-radius:16px;background:var(--sky);display:grid;place-items:center;font-size:28px;color:var(--blue)}.attendance-cta div{flex:1}.attendance-cta strong,.attendance-cta small{display:block}.attendance-cta small{color:var(--muted);margin-top:4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid .wide{grid-column:1/-1}.form-card{padding:28px}.inline-form{display:grid;grid-template-columns:220px 1fr auto;align-items:end;gap:14px}.time-pill{padding:10px 14px;background:#e5f7ef;color:#116947;border-radius:999px;font-weight:800}.camera-card{width:min(560px,100%);margin:auto;padding:24px;text-align:center}.camera-stage{aspect-ratio:4/3;background:#111827;border-radius:18px;overflow:hidden;position:relative;margin-bottom:20px}.camera-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-guide{position:absolute;left:50%;top:50%;width:48%;height:72%;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.82);border-radius:50%;box-shadow:0 0 0 999px rgba(3,9,18,.22)}.camera-card h2{margin:10px 0}.camera-card p{color:var(--muted);min-height:24px}.progress{height:7px;background:#e8edf2;border-radius:999px;overflow:hidden}.progress i{height:100%;display:block;width:0;background:var(--green);transition:width .2s}.empty{text-align:center;padding:55px 25px}.status-code{font-size:64px;font-weight:900}.success-icon{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;background:#e5f7ef;color:var(--green);display:grid;place-items:center;font-size:38px}.schedule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.schedule-grid article{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:12px;align-items:end;padding:16px;border:1px solid var(--line);border-radius:14px}.toggle{align-self:center}.toggle input{width:auto}.policy-card dl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.policy-card dl div{background:var(--bg);padding:14px;border-radius:12px}.policy-card dt{color:var(--muted);font-size:12px}.policy-card dd{margin:6px 0 0;font-weight:750}.review-form{display:flex;gap:6px;min-width:360px}.review-form input{padding:7px 9px}dialog{width:min(1050px,calc(100% - 24px));border:0;border-radius:20px;padding:25px;box-shadow:0 30px 100px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(10,20,32,.5)}.modal-head{display:flex;justify-content:space-between;align-items:start}.modal-head h2{margin:4px 0 20px}.icon-button{font-size:26px;border:0}.master-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.master-columns section{border:1px solid var(--line);border-radius:14px;padding:15px}.inline-add{display:grid;gap:7px}.master-list{margin-top:12px;max-height:280px;overflow:auto}.master-list>div{display:flex;gap:6px;align-items:center;border-top:1px solid #edf0f3;padding:9px 0}.master-list span{flex:1}.head-actions{justify-content:flex-end}
@media(max-width:900px){.topbar{padding:0 16px}.menu-toggle{display:block;margin-left:auto}.topbar nav{display:none;position:absolute;top:72px;left:12px;right:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);flex-direction:column}.topbar nav.open{display:flex}.account span{display:none}.stats{grid-template-columns:repeat(2,1fr)}.schedule-grid{grid-template-columns:1fr}.master-columns{grid-template-columns:1fr}.policy-card dl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.container{width:min(100% - 22px,1180px);margin-top:22px}.topbar{height:64px}.topbar nav{top:64px}.brand span:last-child{display:none}.page-head{align-items:start;flex-direction:column}.stats{gap:10px}.stats article{padding:15px}.stats strong{font-size:20px}.card{padding:17px;border-radius:15px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.inline-form{grid-template-columns:1fr}.schedule-grid article{grid-template-columns:1fr 1fr}.schedule-grid article .toggle{grid-column:1/-1}.policy-card dl{grid-template-columns:1fr}.login-card{padding:28px 22px}.camera-card{padding:13px}.form-actions,.head-actions{align-items:stretch;flex-direction:column}.form-actions>*{width:100%}}

/* Enrollment wajah fullscreen, disadur dari pola kamera Absensi TKSM. */
.face-intro{width:min(620px,100%);margin:0 auto 20px;text-align:center}.face-intro h1{margin:6px 0 9px;font-size:clamp(30px,7vw,44px);letter-spacing:-.04em}.face-intro>p:not(.eyebrow){margin:0;color:var(--muted)}.face-intro-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}.face-intro-tips span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#435267;font-size:12px;font-weight:750}.face-capture{position:relative;width:min(560px,100%);height:min(620px,68dvh);min-height:480px;margin:0 auto;overflow:hidden;border-radius:24px;background:#05070b;box-shadow:0 18px 55px rgba(7,18,31,.2)}.face-capture video{display:block;width:100%;height:100%;object-fit:cover;background:radial-gradient(circle at 50% 42%,#263444,#05070b 72%);transform:scaleX(-1)}.face-overlay{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.76),rgba(0,0,0,.08) 31%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.82))}.face-top{position:relative;display:grid;justify-items:center;gap:6px;text-align:center}.face-kicker{margin:0;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.15);font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.face-top h2{margin:0;font-size:clamp(22px,5vw,34px);line-height:1.08}.face-top>p:not(.face-kicker){margin:0;max-width:500px;color:rgba(255,255,255,.86);font-size:14px;font-weight:650}.face-close{position:absolute;z-index:2;top:-4px;left:-4px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:28px;line-height:1;backdrop-filter:blur(8px)}.face-frame{position:relative;align-self:center;justify-self:center;width:min(72vw,350px);height:min(46dvh,440px);border:4px solid rgba(255,255,255,.88);border-radius:50% / 43%;box-shadow:0 0 0 999px rgba(0,0,0,.17),0 0 34px rgba(29,111,165,.42),inset 0 0 24px rgba(255,255,255,.14)}.face-frame::after{content:'';position:absolute;inset:-10px;border:5px solid rgba(91,192,235,.48);border-radius:inherit;animation:facePulse 1.8s ease-in-out infinite}.face-bottom{display:grid;justify-items:center;gap:9px;text-align:center}.face-step-track{width:min(390px,86%);height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.2)}.face-step-track i{display:block;width:0;height:100%;border-radius:inherit;background:#39d98a;transition:width .2s}.face-step-labels{display:grid;grid-template-columns:repeat(3,1fr);width:min(390px,86%);color:rgba(255,255,255,.72);font-size:11px;font-weight:800}.face-step-labels span:first-child{text-align:left}.face-step-labels span:last-child{text-align:right}.face-hint{max-width:440px;margin:2px 0 0;color:rgba(255,255,255,.88);font-size:13px;font-weight:650}.face-start{width:min(390px,100%);min-height:50px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:#fff;color:#122b42;font-weight:850;box-shadow:0 10px 28px rgba(0,0,0,.22)}.face-start[hidden]{display:none}.face-camera-active{overflow:hidden!important;padding:0!important;background:#05070b}.face-camera-active .topbar,.face-camera-active .mobile-dock,.face-camera-active .face-intro{display:none!important}.face-camera-active .container{width:100%!important;margin:0!important}.face-camera-active .face-capture{position:fixed!important;z-index:100000!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}.face-camera-active .face-overlay{padding-top:max(14px,env(safe-area-inset-top));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(14px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left))}@keyframes facePulse{0%,100%{opacity:.45;transform:scale(.99)}50%{opacity:1;transform:scale(1.015)}}

@media(max-width:600px){body.face-page{padding-bottom:calc(82px + env(safe-area-inset-bottom))}.face-page .container{width:100%;margin:0;padding:18px 12px}.face-intro{padding:0 7px}.face-intro h1{font-size:30px}.face-intro-tips{display:grid;grid-template-columns:1fr;text-align:left}.face-capture{height:min(650px,70dvh);min-height:500px;border-radius:22px}.face-frame{width:min(69vw,320px);height:min(43dvh,410px)}.face-camera-active .face-frame{width:min(76vw,350px);height:min(49dvh,450px)}.face-camera-active .face-top h2{font-size:24px}}

@media(max-height:700px){.face-camera-active .face-overlay{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.face-camera-active .face-frame{width:min(54vw,270px);height:min(42dvh,330px)}.face-bottom{gap:6px}.face-top{gap:3px}}

@media(prefers-reduced-motion:reduce){.face-frame::after{animation:none}}

/* Sebelum tombol ditekan, tampilkan hanya tombol enrollment tanpa kartu kamera. */
body.face-page:not(.face-camera-active) .face-capture{width:min(520px,100%);height:auto;min-height:0;margin:22px auto 0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
body.face-page:not(.face-camera-active) .face-capture>video,
body.face-page:not(.face-camera-active) .face-top,
body.face-page:not(.face-camera-active) .face-frame,
body.face-page:not(.face-camera-active) .face-step-track,
body.face-page:not(.face-camera-active) .face-step-labels,
body.face-page:not(.face-camera-active) .face-hint{display:none}
body.face-page:not(.face-camera-active) .face-overlay{position:static;display:block;padding:0;color:inherit;background:none}
body.face-page:not(.face-camera-active) .face-bottom{display:block}
body.face-page:not(.face-camera-active) .face-start{width:100%;min-height:56px;background:var(--navy);border-color:var(--navy);color:#fff;font-size:16px;box-shadow:0 12px 28px rgba(23,50,77,.2)}
.face-camera-active .face-capture video,
.face-camera-open .face-capture video,
.camera-modal-open .face-capture video{width:100vw;height:100dvh;object-fit:cover;background:#05070b}
.face-camera-active .face-capture,
.face-camera-open .face-capture,
.camera-modal-open .face-capture{position:fixed!important;inset:0!important;z-index:100000!important;width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;background:#05070b!important;box-shadow:none!important}
.face-camera-active .topbar,.face-camera-active .mobile-dock,
.face-camera-open .topbar,.face-camera-open .mobile-dock,
.camera-modal-open .topbar,.camera-modal-open .mobile-dock{display:none!important;visibility:hidden!important;pointer-events:none!important}
.face-camera-active .face-frame,.face-camera-open .face-frame,.camera-modal-open .face-frame{width:min(78vw,390px);height:min(54dvh,500px)}
.enrollment-status{display:flex;align-items:center;gap:12px;margin:20px auto 0;padding:14px 15px;border:1px solid;border-radius:15px;text-align:left}.enrollment-status-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;font-size:20px;font-weight:900}.enrollment-status strong,.enrollment-status small{display:block}.enrollment-status small{margin-top:3px;line-height:1.4}.enrollment-status.pending{background:#fff8e8;border-color:#efd69d;color:#825111}.enrollment-status.pending .enrollment-status-icon{background:#f7dfaa}.enrollment-status.processing{background:#eaf4fa;border-color:#b8d8ea;color:#174e72}.enrollment-status.processing .enrollment-status-icon{background:#cce7f5}.enrollment-status.success{background:#eaf9f2;border-color:#b9ead5;color:#116947}.enrollment-status.success .enrollment-status-icon{background:#c9efdd}.enrollment-status.error{background:#fff0f0;border-color:#f0c1c1;color:#9f2f2f}.enrollment-status.error .enrollment-status-icon{background:#f7d4d4}

.field-hint{color:var(--muted);font-weight:500}.onboarding-steps{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.onboarding-steps li{display:flex;align-items:center;gap:11px;padding:15px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--muted)}.onboarding-steps li>span{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:#edf1f5;font-weight:850}.onboarding-steps strong,.onboarding-steps small{display:block}.onboarding-steps small{margin-top:3px}.onboarding-steps .active{border-color:var(--blue);color:var(--navy);box-shadow:0 0 0 3px rgba(29,111,165,.1)}.onboarding-steps .active>span{background:var(--blue);color:#fff}.onboarding-steps .done>span{background:#e5f7ef;color:var(--green)}
@media(max-width:600px){.onboarding-steps{grid-template-columns:1fr}}

.subsection{margin-top:38px}.location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.location-grid .card{margin:0}.location-feedback{min-height:22px;margin:0}.inline-reset{display:inline}.inline-reset button{font-size:12px}.device-card{width:min(560px,100%);margin:auto;text-align:center;padding:38px}.device-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:22px;background:var(--sky);color:var(--blue);display:grid;place-items:center;font-size:38px}.device-card p{color:var(--muted);line-height:1.6}.device-card form{margin-top:24px}
.location-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.location-metrics>div{min-width:0;padding:11px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}.location-metrics small,.location-metrics strong{display:block}.location-metrics small{margin-bottom:5px;color:var(--muted);font-size:11px}.location-metrics strong{font-size:13px;overflow-wrap:anywhere}.metric-good{color:var(--green)}.metric-bad{color:var(--red)}
.permission-page{background:linear-gradient(180deg,#eef6fb,#f6f8fb 48%)}.permission-page .container{min-height:calc(100dvh - 160px);display:grid;place-items:center}.permission-card{width:min(560px,100%);padding:34px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);text-align:center}.permission-icon{width:72px;height:72px;margin:0 auto 18px;display:grid;place-items:center;border-radius:22px;background:var(--sky);color:var(--blue);font-size:38px}.permission-card h1{margin:6px 0 10px;font-size:clamp(28px,7vw,42px);letter-spacing:-.04em}.permission-card>p{line-height:1.55}.permission-list{display:grid;gap:10px;margin:24px 0;text-align:left}.permission-list>div{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);border-radius:14px}.permission-list>div>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--sky);font-size:24px}.permission-list strong,.permission-list small{display:block}.permission-list small{margin-top:3px;color:var(--muted)}.permission-list b{font-size:12px}.permission-ok{color:var(--green)}.permission-wait{color:#8a5609}.permission-error{color:var(--red)}.permission-status{min-height:48px;margin:0 0 16px;color:var(--muted)}.permission-button{width:100%;min-height:54px}
.employee-home-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.employee-home-head h1{margin:4px 0 5px;font-size:clamp(29px,7vw,42px);letter-spacing:-.04em}.employee-home-clock{display:grid;grid-template-columns:auto auto;align-items:end;min-width:180px;padding:13px 16px;border:1px solid #dbeafe;border-radius:17px;background:linear-gradient(180deg,#f8fbff,#eef6ff);text-align:right}.employee-home-clock small{grid-column:1/-1;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.employee-home-clock strong{font-size:29px;line-height:1;font-variant-numeric:tabular-nums}.employee-home-clock span{margin-left:6px;color:var(--muted);font-weight:800}.employee-attendance-panel{padding:20px;margin-bottom:18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}.employee-primary-attendance-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.employee-primary-attendance-actions>button,.employee-primary-attendance-actions>span{display:flex;min-height:112px;padding:22px;border:0;border-radius:18px;align-items:flex-start;justify-content:center;flex-direction:column;text-align:left}.employee-primary-attendance-actions strong{font-size:clamp(24px,4vw,32px);line-height:1.05;letter-spacing:-.02em}.employee-primary-attendance-actions small{margin-top:8px;font-size:13px;font-weight:700;opacity:.84}.attendance-action-in{background:linear-gradient(135deg,#118443,#20ae5a);color:#fff;box-shadow:0 12px 28px rgba(17,132,67,.2)}.attendance-action-out{background:linear-gradient(135deg,#dc5b12,#f27f2e);color:#fff;box-shadow:0 12px 28px rgba(220,91,18,.2)}.employee-primary-attendance-actions .attendance-action-disabled{background:#f2f5f8;color:#8795a5;border:1px solid #dfe6ed;box-shadow:none}.employee-attendance-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.employee-attendance-summary>div{padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.employee-attendance-summary small,.employee-attendance-summary strong{display:block}.employee-attendance-summary small{color:var(--muted)}.employee-attendance-summary strong{margin-top:4px;font-size:24px}.employee-attendance-summary p{grid-column:1/-1;margin:2px 0 0;color:var(--muted);text-align:center}.employee-month-stats{grid-template-columns:repeat(2,1fr)}
.employee-home-location{padding:20px;margin-bottom:18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}.home-location-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.home-location-head h2{margin:3px 0 5px}.home-location-head p{margin:0}.home-location-refresh{flex:0 0 auto;min-height:46px;padding:11px 20px;background:#fff;border:1px solid #9fb2c5;color:var(--navy);box-shadow:0 4px 12px rgba(23,50,77,.08)}.home-location-refresh:hover{background:var(--sky);border-color:var(--blue)}.home-location-road{margin:14px 0;padding:13px 15px;border:1px solid #dce7ef;border-radius:16px;background:#f8fbfd;display:grid;gap:4px;min-width:0}.home-location-road small{color:var(--muted)}.home-location-road strong{color:#173a55;overflow-wrap:anywhere}.home-location-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.home-location-metrics>div{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.home-location-metrics small,.home-location-metrics strong{display:block}.home-location-metrics small{margin-bottom:5px;color:var(--muted)}.home-location-metrics strong{font-size:15px}.metric-warn{color:#9a650c}.home-location-coordinates{display:block;margin-top:12px;color:var(--muted);overflow-wrap:anywhere}.home-history-link{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:82px;margin-bottom:18px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 7px 24px rgba(23,50,77,.06)}.home-history-link span,.home-history-link strong,.home-history-link small{display:block}.home-history-link small{margin-top:5px;color:var(--muted)}.home-history-link b{color:var(--blue);white-space:nowrap}
.checkbox-label{display:flex!important;align-items:flex-start;gap:12px;padding:14px;border:1px solid #dce7ef;border-radius:14px;background:#f8fbfd}.checkbox-label input{width:20px!important;height:20px;margin-top:2px;flex:0 0 auto}.checkbox-label span{display:grid;gap:4px}.checkbox-label small{color:var(--muted)}
.home-attendance-modal[hidden]{display:none}.home-attendance-modal{position:fixed;z-index:100000;inset:0;background:#05070b}.home-attendance-modal form,.home-attendance-modal .camera-card{width:100%;height:100%;margin:0}.home-attendance-modal .camera-card{position:relative;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));border:0;border-radius:0;background:#05070b;color:#fff;box-shadow:none}.home-camera-heading{text-align:center}.home-camera-heading .eyebrow{color:#8fd5ff}.home-camera-heading h2{margin:3px 0 4px}.home-camera-heading p{min-height:0;margin:0 0 10px;color:rgba(255,255,255,.82)}.home-camera-close{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:46px;height:46px;padding:0;border-color:rgba(255,255,255,.26);border-radius:50%;background:rgba(0,0,0,.38);color:#fff;font-size:28px}.home-attendance-modal .camera-stage{flex:1;min-height:0;margin:0 auto 12px;aspect-ratio:auto;width:min(100%,620px);border-radius:22px}.home-attendance-modal .face-guide{width:min(68%,330px);height:min(76%,430px)}.home-attendance-modal .progress{width:min(100%,620px);margin:0 auto 10px;background:rgba(255,255,255,.2)}.home-camera-retry{width:min(100%,620px);margin:0 auto;min-height:52px}.home-attendance-camera-open{overflow:hidden}
.history-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;gap:14px;padding:18px}.history-filter-admin{grid-template-columns:minmax(210px,1.4fr) repeat(2,minmax(150px,1fr)) auto}.history-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 14px;color:var(--muted)}.history-summary strong{color:var(--ink)}.history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.history-card{padding:19px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 7px 24px rgba(23,50,77,.06)}.history-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.history-card-head h2{margin:3px 0;font-size:20px}.history-card-head small,.history-card-head span:not(.badge){color:var(--muted)}.history-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 12px}.history-times>div{padding:11px;border-radius:12px;background:var(--bg)}.history-times small,.history-times strong{display:block}.history-times small{margin-bottom:5px;color:var(--muted)}.history-times strong{font-size:17px}.history-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 12px}.history-photos>div{display:flex;align-items:center;gap:10px;min-height:78px;padding:9px;border:1px solid var(--line);border-radius:13px;background:#fbfcfd}.history-photos>div>small{flex:1;color:var(--muted);font-weight:750}.attendance-photo-thumb{width:60px;height:60px;min-height:60px;padding:0;overflow:hidden;border:2px solid #fff;border-radius:12px;background:#e8edf2;box-shadow:0 3px 10px rgba(23,50,77,.18)}.attendance-photo-thumb img{display:block;width:100%;height:100%;object-fit:cover}.photo-unavailable{padding:7px 9px;border-radius:9px;background:#eef2f6;color:var(--muted);font-size:11px;font-weight:750;white-space:nowrap}.history-gps{display:grid;gap:5px;padding-top:11px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.badge.holiday{background:#e8efff;color:#3159a6}.history-photo-dialog{width:min(760px,calc(100% - 24px));max-height:92dvh;margin:auto;padding:18px;border:0;border-radius:20px;background:#0b1119;color:#fff}.history-photo-dialog::backdrop{background:rgba(3,8,14,.82);backdrop-filter:blur(4px)}.history-photo-dialog h2{margin:0 52px 14px 0;font-size:18px}.history-photo-dialog img{display:block;width:100%;max-height:calc(92dvh - 80px);object-fit:contain;border-radius:14px;background:#05070b}.history-photo-close{position:absolute;top:12px;right:12px;width:42px;height:42px;min-height:42px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:27px}
@media(max-width:800px){.location-grid{grid-template-columns:1fr}}
@media(max-width:600px){.location-metrics{grid-template-columns:1fr 1fr}.location-metrics>div:last-child{grid-column:1/-1}.permission-card{padding:26px 18px}.permission-list>div{grid-template-columns:42px 1fr}.permission-list b{grid-column:2}}
@media(max-width:700px){.home-location-head{align-items:stretch;flex-direction:column}.home-location-refresh{width:100%}.home-location-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.history-filter-admin{grid-template-columns:1fr 1fr}.history-filter-admin label:first-child{grid-column:1/-1}.history-list{grid-template-columns:1fr}}
@media(max-width:600px){.employee-home-head{align-items:stretch;flex-direction:column}.employee-home-clock{width:100%;text-align:center;justify-content:center}.employee-primary-attendance-actions{grid-template-columns:1fr}.employee-primary-attendance-actions>button,.employee-primary-attendance-actions>span{min-height:106px;align-items:center;text-align:center}.employee-attendance-panel,.employee-home-location{padding:13px}.employee-month-stats{grid-template-columns:1fr 1fr}.home-camera-heading{padding:0 46px}.home-attendance-modal .camera-stage{border-radius:18px}.home-history-link{align-items:flex-start;flex-direction:column}.history-filter,.history-filter-admin{grid-template-columns:1fr}.history-filter-admin label:first-child{grid-column:auto}.history-filter button{width:100%}.history-summary{align-items:flex-start;flex-direction:column}.history-card{padding:15px}.history-times{grid-template-columns:repeat(3,minmax(0,1fr))}.history-times>div{padding:9px}.history-times strong{font-size:15px}}
.login-links{display:flex;justify-content:space-between;gap:12px;font-size:13px}.activation-card{width:min(520px,100%)}.wide-card{width:min(720px,100%)}.identity-summary{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.identity-summary span{padding:7px 10px;background:var(--sky);border-radius:999px;color:var(--navy);font-size:12px;font-weight:750}.readonly-grid input[readonly]{background:#f0f3f6;color:#566273;cursor:not-allowed}
@media(max-width:600px){.login-links{flex-direction:column;align-items:center}}
.mobile-dock,.mobile-nav-head,.nav-backdrop{display:none}
@media(max-width:900px){
 html{scroll-padding-bottom:110px}body{padding-bottom:calc(78px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}.topbar{height:64px;padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));gap:12px}.topbar .brand{flex:1}.topbar .brand-mark{width:38px;height:38px}.menu-toggle{display:grid;place-items:center;width:46px;height:46px;margin:0;border-radius:13px;background:var(--sky);font-size:22px}.topbar .account{gap:4px}.topbar .account .link-button{min-height:44px;padding:8px}.topbar nav{display:flex;position:fixed;z-index:90;inset:0 auto 0 0;width:min(340px,calc(100vw - 44px));padding:calc(18px + env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom));background:#fff;border:0;border-radius:0 22px 22px 0;box-shadow:0 20px 70px rgba(10,25,40,.28);flex-direction:column;gap:5px;overflow-y:auto;transform:translateX(-105%);transition:transform .22s ease}.topbar nav.open{display:flex;transform:translateX(0)}.topbar nav a{display:flex;align-items:center;min-height:48px;padding:12px 14px;font-size:15px;border-radius:12px}.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 13px;margin-bottom:5px;border-bottom:1px solid var(--line)}.mobile-nav-head .icon-button{width:44px;height:44px;min-height:44px;padding:0}.nav-backdrop{display:block;position:fixed;z-index:80;inset:0;border:0;border-radius:0;background:rgba(7,18,31,.48);opacity:0;pointer-events:none;transition:opacity .2s}.nav-open .nav-backdrop{opacity:1;pointer-events:auto}.nav-open{overflow:hidden}.mobile-dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:60;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));min-height:66px;padding:7px 8px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 38px rgba(23,50,77,.22);backdrop-filter:blur(14px)}.mobile-dock a,.mobile-dock button{display:flex;min-width:0;min-height:52px;padding:4px 2px;border:0;border-radius:14px;background:transparent;color:#47576a;flex-direction:column;gap:2px}.mobile-dock a:active,.mobile-dock button:active{background:var(--sky);color:var(--navy)}.mobile-dock span{font-size:24px;line-height:1}.mobile-dock small{font-size:11px;font-weight:800}.container{margin:24px auto 22px}.container.guest{min-height:100dvh;padding:20px 0 calc(20px + env(safe-area-inset-bottom))}.page-head{margin-bottom:18px}.page-head h1,.hero h1{font-size:clamp(28px,8vw,38px)}button,.button{min-height:44px}input,select,textarea{min-height:48px;font-size:16px}textarea{min-height:96px}.table-wrap{margin-inline:-8px;padding:0 8px 8px;overscroll-behavior-x:contain;scrollbar-width:thin}table{min-width:720px}.card{box-shadow:0 7px 24px rgba(23,50,77,.06)}dialog{width:100%;max-height:88dvh;margin:auto 0 0;padding:22px 17px calc(22px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}.camera-card{width:min(520px,100%)}.camera-stage{aspect-ratio:3/4;max-height:62dvh}.face-guide{width:63%;height:68%}.attendance-cta{min-height:88px}.review-form{min-width:620px}
}
@media(max-width:600px){
 .container{width:min(100% - 20px,1180px)}.brand span:last-child{display:inline;font-size:14px}.login-card{width:100%;padding:27px 21px}.login-card h1{font-size:34px}.stats{grid-template-columns:1fr 1fr}.stats article{min-height:92px}.hero{padding:25px 21px;border-radius:19px}.card,.form-card{padding:18px}.section-head{align-items:flex-start}.section-head>.button{flex:0 0 auto}.device-card{padding:28px 19px}.onboarding-steps li{padding:12px}.location-grid{gap:13px}.form-grid{gap:14px}.stack{gap:15px}
}

/* Mobile containment: keep every page fixed to the device width. */
html,body{max-width:100%;overflow-x:hidden}.container,.card,.page-head,.history-card,.history-card-head,.history-card-head>div,.history-gps{min-width:0;max-width:100%}.page-head h1,.page-head p,.history-card-head h2,.history-card-head small,.history-card-head span,.history-gps span{overflow-wrap:anywhere}.history-times{grid-template-columns:repeat(3,minmax(0,1fr))}.history-times>div,.history-times small,.history-times strong{min-width:0;overflow-wrap:anywhere}.history-photos{grid-template-columns:repeat(2,minmax(0,1fr))}.history-photos>div,.history-photos>div>small{min-width:0}.history-photos>div>small{overflow-wrap:anywhere}.attendance-photo-thumb{flex:0 0 60px}.photo-unavailable{min-width:0;max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
@media(max-width:600px){.employee-home-clock{min-width:0}.home-history-link{min-width:0}.home-history-link>*{max-width:100%;white-space:normal}.history-filter,.history-filter-admin{grid-template-columns:minmax(0,1fr)}.history-photos>div{align-items:stretch;flex-direction:column}.history-photos>div>small{width:100%;flex:0 0 auto;text-align:center}.attendance-photo-thumb{align-self:center;width:68px;height:68px;flex-basis:68px}.photo-unavailable{display:block;width:100%}}

/* Compact attendance ledger: one record per row, details on demand. */
.attendance-ledger{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 7px 24px rgba(23,50,77,.06)}.attendance-ledger-head,.attendance-ledger-row{display:grid;grid-template-columns:minmax(170px,2fr) repeat(2,minmax(68px,.65fr)) minmax(110px,.9fr) auto;align-items:center;gap:14px}.attendance-ledger-head{padding:11px 16px;background:#eef4f8;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.055em;text-transform:uppercase}.attendance-ledger-row{min-width:0;padding:13px 16px;border-top:1px solid var(--line)}.attendance-ledger-row:first-of-type{border-top:0}.attendance-ledger-row:hover{background:#f9fbfd}.attendance-ledger-primary,.attendance-ledger-time,.attendance-ledger-status{min-width:0}.attendance-ledger-primary strong,.attendance-ledger-primary small,.attendance-ledger-time strong,.attendance-ledger-time small{display:block}.attendance-ledger-primary strong{overflow-wrap:anywhere}.attendance-ledger-primary small{margin-top:3px;color:var(--muted);font-size:11px}.attendance-ledger-time small{display:none;color:var(--muted);font-size:10px}.attendance-ledger-time strong{font-size:15px;font-variant-numeric:tabular-nums}.attendance-detail-button{min-height:38px}.attendance-detail-dialog{width:min(680px,calc(100% - 24px));max-height:92dvh;margin:auto;padding:20px;border:0;border-radius:20px;background:#fff;color:var(--ink);overflow:auto}.attendance-detail-dialog::backdrop{background:rgba(3,8,14,.68);backdrop-filter:blur(3px)}.attendance-detail-head{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:17px}.attendance-detail-head h2{margin:3px 0 0;overflow-wrap:anywhere}.attendance-detail-head small{display:block;margin-top:4px;color:var(--muted)}.attendance-detail-head .history-photo-close{position:static;flex:0 0 42px;border-color:var(--line);background:#eef3f7;color:var(--navy);box-shadow:none}.attendance-detail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}.attendance-detail-stats>div{min-width:0;padding:11px;border-radius:12px;background:var(--bg)}.attendance-detail-stats small,.attendance-detail-stats strong{display:block}.attendance-detail-stats small{margin-bottom:5px;color:var(--muted);font-size:11px}.attendance-detail-stats strong{overflow-wrap:anywhere}.attendance-detail-locations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:14px;border-top:1px solid var(--line)}.attendance-detail-locations>div{min-width:0;padding:12px;border-radius:13px;background:#f8fafc}.attendance-detail-locations small,.attendance-detail-locations strong,.attendance-detail-locations span{display:block;overflow-wrap:anywhere}.attendance-detail-locations small{color:var(--muted)}.attendance-detail-locations strong{margin:4px 0}.attendance-detail-locations span{color:var(--muted);font-size:11px}
@media(max-width:600px){.attendance-ledger{border-radius:15px}.attendance-ledger-head{display:none}.attendance-ledger-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"primary primary status" "in out detail";gap:10px 8px;padding:12px}.attendance-ledger-primary{grid-area:primary}.attendance-ledger-time:nth-of-type(2){grid-area:in}.attendance-ledger-time:nth-of-type(3){grid-area:out}.attendance-ledger-status{grid-area:status;justify-self:end}.attendance-detail-button{grid-area:detail;align-self:end;min-height:36px;padding:7px 11px}.attendance-ledger-time{padding:8px 10px;border-radius:10px;background:var(--bg)}.attendance-ledger-time small{display:block}.attendance-ledger-time strong{font-size:14px}.attendance-detail-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);margin:auto 8px 8px;padding:18px 14px calc(18px + env(safe-area-inset-bottom));border-radius:20px}.attendance-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-detail-locations{grid-template-columns:1fr}.attendance-detail-dialog .history-photos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Official Sempoa branding and colorful mobile dock. */
.brand-mark{overflow:hidden;padding:2px;background:#fff;border:1px solid #f3c98d;box-shadow:0 4px 12px rgba(245,130,32,.18)}.brand-mark img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}.mobile-dock svg{display:block;width:23px;height:23px;stroke:currentColor}.mobile-dock a,.mobile-dock button{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.mobile-dock a:active,.mobile-dock button:active{transform:translateY(1px) scale(.97);filter:brightness(.96)}
@media(max-width:900px){.menu-toggle{display:none!important}.topbar .brand-mark{width:44px;height:44px;flex:0 0 44px}.topbar{box-shadow:0 4px 18px rgba(23,50,77,.07)}.mobile-dock{gap:6px;min-height:72px;padding:7px;background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.82);box-shadow:0 14px 40px rgba(23,50,77,.25)}.mobile-dock a,.mobile-dock button{min-height:56px;color:#fff;box-shadow:0 5px 13px rgba(23,50,77,.16)}.mobile-dock>button:first-child{background:linear-gradient(145deg,#d83591,#f05c78)}.mobile-dock>a:nth-child(2){background:linear-gradient(145deg,#f07818,#ffad27)}.mobile-dock>button:nth-child(3){background:linear-gradient(145deg,#1684be,#35b6d3)}.mobile-dock>a:nth-child(4){background:linear-gradient(145deg,#16885f,#31bb78)}.mobile-dock small{color:#fff;font-size:10px;letter-spacing:.01em}.mobile-dock span{display:grid;place-items:center;height:27px}}

/* Keep every quick-navigation icon and label optically centered on mobile. */
@media(max-width:900px){.mobile-dock a,.mobile-dock button{align-items:center;justify-content:center;text-align:center}.mobile-dock span,.mobile-dock small{display:grid;width:100%;margin:0;place-items:center;text-align:center}.mobile-dock svg{margin:0 auto}.mobile-dock small{line-height:1.1;white-space:nowrap}}

/* Use an explicit two-row grid so native button metrics cannot shift labels. */
@media(max-width:900px){
 .mobile-dock a,.mobile-dock button{display:grid!important;grid-template-rows:28px 18px;align-content:center;justify-items:center;place-items:center;width:100%;padding:5px 0!important;gap:3px;line-height:1}
 .mobile-dock span{display:grid!important;width:100%;height:28px;margin:0;place-items:center;align-self:center}
 .mobile-dock small{display:flex!important;width:100%;height:18px;margin:0;align-items:center;justify-content:center;text-align:center;line-height:18px;white-space:nowrap}
}

/* Admin employee profile. */
.employee-row-actions{display:flex;align-items:center;gap:6px;margin-bottom:3px}.employee-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.employee-detail-summary article{min-width:0;padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 7px 24px rgba(23,50,77,.06)}.employee-detail-summary small,.employee-detail-summary strong{display:block}.employee-detail-summary small{margin-bottom:7px;color:var(--muted)}.employee-detail-summary strong{overflow-wrap:anywhere}.employee-detail-summary .active{color:var(--green)}.employee-detail-summary .inactive{color:var(--red)}.employee-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.employee-detail-card{margin:0}.employee-detail-card dl{display:grid;gap:0;margin:0}.employee-detail-card dl>div{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);gap:12px;padding:11px 0;border-bottom:1px solid #edf0f3}.employee-detail-card dl>div:last-child{border-bottom:0}.employee-detail-card dt{color:var(--muted);font-size:13px}.employee-detail-card dd{min-width:0;margin:0;font-weight:750;overflow-wrap:anywhere}.employee-detail-card .field-hint{margin:15px 0 0;line-height:1.5}
@media(max-width:760px){.employee-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-detail-grid{grid-template-columns:1fr}.employee-detail-card dl>div{grid-template-columns:1fr;gap:4px}.employee-row-actions{flex-wrap:wrap}}

.login-logo{overflow:hidden;padding:3px;background:#fff;border:1px solid #f3c98d}.login-logo img{display:block;width:100%;height:100%;border-radius:14px;object-fit:cover}.legal-links{display:flex;justify-content:center;gap:16px;margin:28px 0 8px;color:var(--muted);font-size:12px}.legal-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}.legal-page{width:min(820px,100%);margin:0 auto;line-height:1.65}.legal-page h1{margin:5px 0 4px;font-size:clamp(30px,6vw,44px);line-height:1.08}.legal-page h2{margin:28px 0 8px;font-size:20px}.legal-page li+li{margin-top:8px}.delete-account-page .primary{margin:10px 0 4px}

/* Emergency manual attendance and its immutable-looking audit trail. */
.manual-attendance-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);align-items:start;gap:18px}.manual-attendance-form-card,.manual-audit-card{margin:0}.manual-audit-list{display:grid;gap:10px}.manual-audit-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#f9fbfd}.manual-audit-list article>div strong,.manual-audit-list article>div small{display:block}.manual-audit-list article>div small,.manual-audit-list article>small{color:var(--muted)}.manual-audit-list article>p,.manual-audit-list article>small{grid-column:1/-1;margin:0}.manual-audit-list article>p{overflow-wrap:anywhere}.field-hint{color:var(--muted);font-size:11px;font-weight:500}
@media(max-width:850px){.manual-attendance-layout{grid-template-columns:1fr}.manual-attendance-form-card,.manual-audit-card{min-width:0}}

/* Kalender kerja: fungsi dan pola interaksi disadur dari Absensi TKSM. */
.calendar-app-shell{display:grid;gap:16px;min-width:0}.calendar-page-head{margin-bottom:0}.calendar-mode-card{padding:16px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}.calendar-view-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.calendar-view-tabs a{display:grid;min-height:46px;place-items:center;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--ink);font-weight:850}.calendar-view-tabs a.active{border-color:var(--blue);background:linear-gradient(135deg,var(--blue),#229cc7);color:#fff;box-shadow:0 8px 20px rgba(22,112,150,.2)}.calendar-filter,.calendar-add-form{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr)) auto;align-items:end;gap:12px;margin-top:14px}.calendar-admin-add summary{cursor:pointer;color:var(--blue);font-weight:850}.calendar-admin-add[open] summary{margin-bottom:12px}.calendar-month-heading,.calendar-year-heading{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px}.calendar-month-heading h2,.calendar-year-heading h2{margin:0;text-align:center;font-size:clamp(20px,5vw,30px)}.calendar-month-heading a{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;background:var(--navy);color:#fff;font-size:32px}.calendar-year-heading{grid-template-columns:1fr auto 1fr}.calendar-year-heading a:last-child{text-align:right}.calendar-month-card{padding:8px;border-radius:18px;background:#132132;overflow:hidden}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.calendar-weekdays span{padding:9px 2px;color:#fff;text-align:center;font-size:12px;font-weight:900}.calendar-weekdays .sunday{color:#ff9a9a}.calendar-day{min-width:0;min-height:86px;padding:7px 4px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(145deg,#33475b,#1c2c3d);color:#fff;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden}.calendar-day strong{font-size:20px}.calendar-day small{max-width:100%;font-size:9px;line-height:1.15;text-align:center;overflow-wrap:anywhere}.calendar-day.calendar-weekly_off,.calendar-day.calendar-manual_holiday,.calendar-day.calendar-national_holiday{background:linear-gradient(145deg,#c44952,#7f2028)}.calendar-day.calendar-joint_leave{background:linear-gradient(145deg,#2e8cbe,#20527d)}.calendar-day.calendar-workday_override{background:linear-gradient(145deg,#33a365,#17633b)}.calendar-day.outside{opacity:.34}.calendar-day.today{outline:2px solid #fff;outline-offset:-3px}.calendar-day.selected{outline:3px solid #ffd166;outline-offset:-4px}.calendar-legend{display:flex;flex-wrap:wrap;gap:10px 16px;color:var(--muted);font-size:12px;font-weight:750}.calendar-legend span{display:flex;align-items:center;gap:6px}.calendar-legend i{width:11px;height:11px;border-radius:50%;background:#33475b}.calendar-legend .holiday{background:#b9323d}.calendar-legend .joint{background:#287aa6}.calendar-legend .override{background:#278852}.calendar-selected-detail{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}.calendar-selected-detail h2{margin:4px 0}.calendar-selected-detail p{margin:0;color:var(--muted)}.calendar-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.calendar-summary-grid article{padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}.calendar-summary-grid strong,.calendar-summary-grid span{display:block}.calendar-summary-grid strong{margin-bottom:5px;font-size:24px;color:var(--blue)}.calendar-summary-grid span{color:var(--muted);font-size:12px}.calendar-year-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.calendar-year-grid article{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.calendar-year-grid article>a{display:block;margin-bottom:10px;color:var(--ink)}.calendar-year-grid article>small{display:block;margin-top:9px;color:var(--muted)}.mini-calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.mini-calendar-days i,.mini-calendar-days span{aspect-ratio:1;display:grid;place-items:center;border-radius:5px;background:#edf2f6;font-size:9px;font-style:normal}.mini-calendar-days .mini-weekly_off,.mini-calendar-days .mini-manual_holiday,.mini-calendar-days .mini-national_holiday{background:#d9545e;color:#fff}.mini-calendar-days .mini-joint_leave{background:#3486b2;color:#fff}.mini-calendar-days .mini-workday_override{background:#35a568;color:#fff}
@media(max-width:760px){.calendar-filter,.calendar-add-form{grid-template-columns:1fr}.calendar-filter button,.calendar-add-form button{width:100%}.calendar-month-card{padding:5px}.calendar-weekdays,.calendar-grid{gap:2px}.calendar-weekdays span{font-size:9px;padding:7px 0}.calendar-day{min-height:60px;padding:5px 2px;border-radius:7px}.calendar-day strong{font-size:17px}.calendar-day small{font-size:7px}.calendar-selected-detail{align-items:flex-start;flex-direction:column}.calendar-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-year-grid{grid-template-columns:1fr}.calendar-view-tabs a{font-size:12px}.calendar-page-head h1{font-size:clamp(30px,10vw,44px)}}

/* In-app notification inbox and account-only logout. */
.notification-bell{position:relative;display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;border:1px solid #dce5ec;border-radius:14px;background:#f5f9fc;color:var(--navy)}.notification-bell svg,.notification-item-icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.notification-bell b{position:absolute;top:-5px;right:-5px;display:grid;min-width:20px;height:20px;padding:0 5px;place-items:center;border:2px solid #fff;border-radius:999px;background:#e53b67;color:#fff;font-size:10px;line-height:1}.notification-list{display:grid;gap:11px}.notification-item{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:start;gap:13px;padding:16px;border:1px solid var(--line);border-radius:17px;background:#fff;color:var(--ink);box-shadow:0 7px 24px rgba(23,50,77,.06)}.notification-item.unread{border-color:#abd9ee;background:linear-gradient(135deg,#f4fbff,#fff)}.notification-item-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;background:#e7f5fb;color:#1479a7}.notification-item strong,.notification-item small,.notification-item time{display:block}.notification-item small{margin-top:4px;color:#4f5e70;line-height:1.45}.notification-item time{margin-top:7px;color:var(--muted);font-size:11px}.notification-item>i{padding:5px 8px;border-radius:999px;background:#e53b67;color:#fff;font-size:10px;font-style:normal;font-weight:850}.account-logout-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.account-logout-card h2,.account-logout-card p{margin:0}.account-logout-card p{margin-top:5px}.account-logout-card form{margin:0}.account-logout-card .danger{min-width:110px}
@media(max-width:600px){.topbar .account>span{display:none}.notification-bell{width:44px;height:44px}.notification-item{grid-template-columns:42px minmax(0,1fr);padding:14px}.notification-item-icon{width:42px;height:42px}.notification-item>i{position:absolute;top:10px;right:10px}.notification-item.unread>span:nth-child(2){padding-right:38px}.account-logout-card{align-items:stretch;flex-direction:column}.account-logout-card .danger{width:100%}}

/* Clickable admin dashboard summary cards. */
.dashboard-stats .dashboard-stat-card{position:relative;display:flex;min-width:0;min-height:132px;padding:19px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);flex-direction:column;overflow:hidden;box-shadow:0 8px 25px rgba(23,50,77,.08);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.dashboard-stats .dashboard-stat-card::after{content:'';position:absolute;right:-24px;bottom:-30px;width:92px;height:92px;border-radius:50%;background:currentColor;opacity:.075}.dashboard-stat-card>span{color:var(--muted);font-size:13px;font-weight:750}.dashboard-stat-card>strong{display:block;margin:7px 0 12px;font-size:28px;line-height:1}.dashboard-stat-card>small{display:flex;margin-top:auto;align-items:center;justify-content:space-between;color:currentColor;font-size:11px;font-weight:850}.dashboard-stat-card>small b{font-size:18px}.dashboard-stat-card.employees{color:#1477a5}.dashboard-stat-card.attendance{color:#18895e}.dashboard-stat-card.approvals{color:#d46b11}.dashboard-stat-card.faces{color:#a83e8a}.dashboard-stats .dashboard-stat-card:hover,.dashboard-stats .dashboard-stat-card:focus-visible{transform:translateY(-3px);border-color:currentColor;box-shadow:0 13px 32px rgba(23,50,77,.15);outline:0}.dashboard-stats .dashboard-stat-card:active{transform:scale(.98)}
@media(max-width:600px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-stats .dashboard-stat-card{min-height:120px;padding:15px;border-radius:16px}.dashboard-stat-card>span{font-size:11px}.dashboard-stat-card>strong{font-size:25px}.dashboard-stat-card>small{gap:5px;font-size:10px}}