@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{--green:#0d654e;--green-dark:#084b3a;--green-deep:#073a30;--mint:#e7f4ee;--lime:#c9e9a3;--ink:#17352d;--muted:#71837c;--line:#e3ece7;--paper:#f5f8f6;--white:#fff;--red:#b83a3a;--amber:#946319;--shadow:0 14px 40px rgba(14,65,49,.07)}
*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;line-height:1.55;background:var(--paper);min-height:100vh}button,input,select{font:inherit}a{color:inherit;text-decoration:none}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1180px)/2));gap:18px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark,.login-emblem{display:grid;place-items:center;background:linear-gradient(145deg,#168465,#074c3b);color:#fff;font-family:Manrope,sans-serif;font-weight:800;box-shadow:0 6px 16px #0d654e33}.brand-mark{width:42px;height:42px;border-radius:13px;font-size:22px}.brand-copy{display:flex;flex-direction:column;line-height:1.2;min-width:0}.brand-copy strong{font-family:Manrope,sans-serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-copy small{font-size:10px;letter-spacing:1.8px;color:var(--green);font-weight:800;margin-top:5px}.top-user{display:flex;align-items:center;gap:9px;color:#3c5a50;font-size:13px;font-weight:700}.user-avatar{height:34px;width:34px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-weight:800}.main-nav{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:6px;height:54px}.main-nav a{padding:8px 13px;border-radius:9px;color:#71837c;font-size:13px;font-weight:700}.main-nav a.active{background:var(--mint);color:var(--green)}.main-nav a.nav-logout{margin-left:auto;color:#a34b43}.container{max-width:1180px;margin:0 auto;padding:26px 22px 54px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 24px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--green);margin-bottom:5px}.page-heading h1{font-family:Manrope,sans-serif;font-size:clamp(24px,3.5vw,31px);line-height:1.18;margin:0;color:var(--green-deep);letter-spacing:-.8px}.muted{color:var(--muted);font-size:13px;margin:7px 0 0}.today-chip,.count-chip{border:1px solid var(--line);background:white;border-radius:12px;padding:10px 15px;display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 4px 16px #103e2d06}.today-chip span{font-size:11px;color:var(--muted)}.today-chip strong{font-size:14px;color:var(--green)}.count-chip{font-weight:800;color:var(--green);font-size:13px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}.stat-label{font-size:12px;font-weight:700;color:var(--muted)}.stat-card strong{display:block;font-family:Manrope,sans-serif;font-size:34px;line-height:1.2;color:var(--green-dark);margin:7px 0 3px}.stat-card small{color:#87958f;font-size:11px}.panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;margin:18px 0;box-shadow:var(--shadow)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}.section-head h2{font-family:Manrope,sans-serif;font-size:17px;margin:0;color:var(--green-deep)}.section-head .muted{margin-top:3px;font-size:12px}.text-link{color:var(--green);font-weight:800;font-size:12px;white-space:nowrap}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:620px;text-align:left}th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#83928c;font-weight:800;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}td{font-size:13px;padding:13px 12px;border-bottom:1px solid #edf2ef;color:#41574f;vertical-align:middle}tbody tr:last-child td{border-bottom:0}td strong{color:#24463a}.pill{display:inline-flex;align-items:center;padding:4px 9px;border-radius:99px;font-size:10px;font-weight:800;white-space:nowrap}.pill-green{background:#e7f5ed;color:#21734f}.pill-amber{background:#fff3df;color:#946319}.pill-red{background:#fdecec;color:#ad4545}.empty-state{padding:30px 12px;text-align:center;color:#87958f;font-size:13px;background:#fafcfb;border:1px dashed #dce8e1;border-radius:12px}.attendance-hero{background:radial-gradient(circle at 85% 5%,#27856a 0,#0b5b46 36%,#073d32 100%);border-radius:20px;padding:26px;color:white;box-shadow:0 18px 40px #0c614c30;margin-bottom:20px;overflow:hidden}.attendance-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.eyebrow.light{color:#b9e6cd}.attendance-hero h2{font-family:Manrope,sans-serif;font-size:23px;margin:4px 0 4px;letter-spacing:-.5px}.attendance-hero p{color:#d2e8de;font-size:13px;margin:0}.hero-symbol{height:52px;width:52px;border:1px solid #ffffff55;border-radius:16px;display:grid;place-items:center;font-size:29px;color:#d8f2df;background:#ffffff12;flex:none}.time-pair{display:flex;gap:14px;margin:25px 0 21px}.time-pair>div{width:145px;background:#ffffff12;border:1px solid #ffffff24;border-radius:13px;padding:12px 15px}.time-pair small{display:block;color:#b7d8ca;font-size:11px}.time-pair strong{display:block;font-family:Manrope,sans-serif;font-size:25px;color:#fff;margin-top:2px}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .15s,opacity .15s;text-align:center}.btn:active{transform:scale(.99)}.btn:disabled{opacity:.55;cursor:wait}.btn-primary{background:var(--green);color:#fff;box-shadow:0 7px 16px #0d654e22}.btn-primary:hover{background:var(--green-dark)}.btn-secondary{background:var(--mint);color:var(--green);border:1px solid #d4e9dd}.btn-white{background:#fff;color:var(--green-dark);box-shadow:0 7px 20px #00291b22}.btn-white:hover{background:#f2fff7}.btn-full{width:100%}.location-hint{font-size:11px;color:#b9d8cb;text-align:center;margin-top:12px}.notice{border:1px solid #dcebe2;background:#f2f8f4;color:#47685a;padding:12px 14px;border-radius:10px;font-size:12px}.notice-light{background:#ffffff17;border:1px solid #ffffff2c;color:#e3f2ea;margin-top:12px}.attendance-feedback{font-size:12px;margin-top:10px;text-align:center}.feedback-success{color:#b7f1cf}.feedback-error{color:#ffd0c8}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.quick-card{background:#fff;padding:18px;border:1px solid var(--line);border-radius:15px;display:grid;gap:5px;box-shadow:0 8px 24px #103e2d05}.quick-icon{height:34px;width:34px;background:var(--mint);color:var(--green);display:grid;place-items:center;border-radius:10px;font-size:20px}.quick-card strong{font-size:13px;color:var(--green-deep);margin-top:5px}.quick-card small{font-size:11px;color:var(--muted)}.privacy-line{font-size:11px;color:#87958f;text-align:center;margin:18px 0}.footer{text-align:center;color:#94a29b;font-size:10px;padding:0 20px 28px}.alert{padding:12px 14px;border-radius:10px;margin:0 0 15px;font-size:13px}.alert.error{color:#9c3d3d;background:#fff0ef;border:1px solid #f5d7d4}.alert.success{color:#206d4c;background:#eaf7ef;border:1px solid #d4ebdc}.form-stack{display:grid;gap:15px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-stack label,.form-grid label,.filter-grid label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#456258}.form-stack input,.form-grid input,.form-grid select,.filter-grid input,.filter-grid select,.reset-form input{width:100%;min-width:0;padding:11px 12px;border:1px solid #dce7e1;border-radius:9px;background:#fff;color:#24463a;font-size:13px;outline:none}.form-stack input:focus,.form-grid input:focus,.form-grid select:focus,.filter-grid input:focus,.filter-grid select:focus{border-color:#61a78a;box-shadow:0 0 0 3px #0d654e12}.form-grid label small{font-weight:400;color:#899790;font-size:10px;line-height:1.4}.form-actions{grid-column:1/-1}.form-actions .btn{min-width:170px}.form-panel{padding-bottom:24px}.inline-note{font-weight:400}.cell-sub{display:block;font-size:10px;color:#87958f;margin-top:3px}.action-stack{display:flex;align-items:center;gap:10px}.mini-link,.mini-button{font-size:11px;font-weight:800;color:var(--green);background:none;border:0;padding:0;cursor:pointer}.mini-button{color:#a34b43}.inline-form{display:inline}.reset-details{margin-top:8px;font-size:10px;color:#667b71}.reset-details summary{cursor:pointer;font-weight:700}.reset-form{display:flex;gap:5px;margin-top:7px;max-width:230px}.reset-form input{padding:7px;font-size:11px}.reset-form button{white-space:nowrap}.settings-panel{max-width:760px}.compact-head{margin:8px 0 2px}.capture-feedback{font-size:12px}.filter-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;align-items:end;gap:12px}.filter-actions{display:flex;gap:8px}.filter-actions .btn{white-space:nowrap}.filter-panel{padding:17px 18px}.login-body{background:radial-gradient(circle at 13% 18%,#d9eee2 0,#edf5f0 35%,#f5f8f6 70%);display:grid;place-items:center;padding:24px;min-height:100vh}.login-wrap{width:min(100%,430px)}.login-card{background:#fff;border:1px solid #e1ebe5;box-shadow:0 25px 70px #0d654e14;border-radius:22px;padding:34px 34px 28px;text-align:center}.login-emblem{height:57px;width:57px;border-radius:17px;margin:0 auto 19px;font-size:29px}.login-card h1{font-family:Manrope,sans-serif;color:var(--green-deep);font-size:22px;line-height:1.3;margin:4px 0 4px}.login-subtitle{font-size:12px;color:#85958d;margin:0 0 22px}.login-card form{text-align:left}.login-card .btn{margin-top:5px}.login-note{border-top:1px solid #edf2ef;margin-top:20px;padding-top:15px;color:#87958f;font-size:10px;display:flex;align-items:center;justify-content:center;gap:7px}.status-dot{width:7px;height:7px;background:#3ba878;border-radius:50%}.login-foot{text-align:center;color:#92a19a;font-size:10px;margin-top:18px}.install-card{text-align:left}.install-card .login-emblem{text-align:center}.install-card .eyebrow,.install-card h1,.install-card .login-subtitle{text-align:center}.install-card .btn{margin-top:10px}
@media(max-width:760px){.topbar{height:66px;padding:0 15px}.brand-mark{height:38px;width:38px}.brand-copy strong{font-size:12px;max-width:195px}.top-user .user-name{display:none}.main-nav{padding:0 12px;height:50px;gap:2px;overflow-x:auto}.main-nav a{font-size:11px;padding:8px 10px;white-space:nowrap}.container{padding:22px 14px 38px}.page-heading{align-items:flex-start}.page-heading h1{font-size:24px}.today-chip{padding:8px 10px}.today-chip strong{font-size:12px}.stats-grid{gap:9px}.stat-card{padding:14px 13px;border-radius:13px}.stat-card strong{font-size:27px}.stat-label{font-size:10px}.stat-card small{font-size:9px}.panel{padding:16px 14px;border-radius:14px}.section-head h2{font-size:15px}.attendance-hero{padding:20px 17px;border-radius:16px}.attendance-hero h2{font-size:20px}.hero-symbol{height:43px;width:43px;font-size:23px}.quick-grid{grid-template-columns:1fr;gap:9px}.quick-card{grid-template-columns:36px 1fr;align-items:center;column-gap:10px;padding:12px}.quick-card .quick-icon{grid-row:span 2}.quick-card strong{margin:0}.quick-card small{grid-column:2}.form-grid{grid-template-columns:1fr;gap:13px}.filter-grid{grid-template-columns:1fr 1fr}.filter-grid label:nth-child(3){grid-column:1/-1}.filter-actions{grid-column:1/-1}.filter-actions .btn{flex:1}.page-heading .count-chip{font-size:11px}.table-wrap{margin:0 -2px}td,th{padding:11px 9px}.action-stack{gap:8px}.reset-form{max-width:190px}.time-pair>div{width:50%}.footer{padding-bottom:20px}}
@media(max-width:390px){.stats-grid{grid-template-columns:1fr 1fr}.stats-grid .stat-card:last-child{grid-column:1/-1}.login-card{padding:28px 22px}.page-heading{display:block}.today-chip{display:inline-flex;align-items:flex-start;margin-top:12px}.filter-grid{grid-template-columns:1fr}.filter-grid label:nth-child(3),.filter-actions{grid-column:auto}}

/* Employee geofence map and self-service password page */
.geofence-panel{overflow:hidden}.radius-chip{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 11px;border-radius:999px;background:#e7f5ed;color:#176b4b;font-size:12px;font-weight:800}.attendance-map{height:310px;width:100%;border-radius:13px;border:1px solid var(--line);overflow:hidden;background:#edf3ef;z-index:0}.map-legend{display:flex;flex-wrap:wrap;gap:12px 18px;padding:12px 2px 8px;color:#708178;font-size:11px}.map-legend span{display:inline-flex;align-items:center;gap:7px}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.legend-dot.office{background:#0d7656}.legend-dot.boundary{background:#38a879;border:1px solid #0d7656;opacity:.8}.legend-dot.you{background:#3267c8}.map-location-button{margin-top:7px}.map-location-feedback{font-size:12px;margin:9px 0 0}.password-panel{max-width:620px}.password-panel .btn{justify-self:start;min-width:210px}.field-help{font-size:10px;font-weight:400;color:#87958f}.leaflet-container{font-family:Arial,sans-serif}.leaflet-control-attribution{font-size:9px!important}
@media(max-width:760px){.attendance-map{height:270px}.map-legend{gap:8px 12px;font-size:10px}.password-panel .btn{width:100%}}

.app-version{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;background:#e8f4ed;color:#21734f;font-weight:800;font-size:9px}

/* Aksi penghapusan data pegawai khusus administrator */
.mini-button-danger{color:#b42318!important;font-weight:800}.mini-button-danger:hover{color:#8f1d16!important;text-decoration:underline}


/* Identitas sekolah: logo pada header, halaman login, dan pengaturan admin */
.brand-mark.brand-logo{display:block;object-fit:contain;padding:3px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px #0d654e20}
.login-emblem-image{display:block;object-fit:contain;padding:6px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px #0d654e18}
.branding-panel{max-width:760px;margin-bottom:18px}
.branding-preview-wrap{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fbfdfb}
.branding-preview{height:76px;width:76px;flex:none;border:1px solid var(--line);background:#fff;border-radius:15px;display:grid;place-items:center;overflow:hidden;color:var(--green);font-family:Manrope,sans-serif;font-weight:800;font-size:34px}
.branding-preview img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
.branding-preview-copy{display:grid;gap:4px;color:var(--ink);font-size:13px}
.branding-preview-copy small{font-size:11px;color:var(--muted);line-height:1.5}
.checkbox-label{display:flex!important;align-items:center;gap:9px!important;font-weight:600!important}
.checkbox-label input{width:auto!important;min-width:16px!important;accent-color:var(--green)}
.form-stack input[type=file]{background:#fbfdfb;padding:9px}
@media(max-width:760px){.branding-preview{height:64px;width:64px}.branding-preview-wrap{padding:10px}}

/* Destructive action button on admin attendance reports */
.btn-danger{background:#fff0ef;color:#a13f3f;border:1px solid #f1d1ce;box-shadow:none}.btn-danger:hover{background:#ffe5e2}.btn-compact{padding:7px 11px;font-size:11px;border-radius:8px}.report-delete-note{margin:0 0 14px;font-size:11px}.report-table{min-width:760px}


/* v1.1.8: jadwal kerja dan rekap keterlambatan bulanan */
.schedule-settings-panel{max-width:920px;margin-bottom:18px}
.schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.schedule-card{border:1px solid var(--line);border-radius:13px;padding:14px;background:#fbfdfb;min-width:0}
.schedule-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;color:var(--green-deep);font-size:13px}
.schedule-toggle{display:inline-flex!important;align-items:center;gap:7px!important;font-size:11px!important;font-weight:700!important;color:#547166!important;white-space:nowrap}
.schedule-toggle input{width:16px!important;height:16px!important;min-width:16px!important;accent-color:var(--green)}
.schedule-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.schedule-time-grid label{display:grid;gap:6px;font-size:11px;font-weight:800;color:#456258}
.schedule-time-grid input{width:100%;min-width:0;padding:10px;border:1px solid #dce7e1;border-radius:9px;background:#fff;color:#24463a;font-size:13px}
.schedule-help{display:block;margin-top:9px;color:#899790;font-size:10px}
.late-summary-panel{margin-bottom:18px}
.month-filter{display:flex;align-items:end;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.month-filter label{display:grid;gap:6px;font-size:12px;font-weight:800;color:#456258}
.month-filter input{padding:10px 12px;border:1px solid #dce7e1;border-radius:9px;background:#fff;color:#24463a;font-size:13px;min-height:42px}
.late-stats-grid{margin-bottom:16px}
.late-table-wrap{margin-top:14px}
.late-table{min-width:850px}
.late-table tfoot th{background:#f1f7f3;color:var(--green-deep);font-weight:900;border-top:2px solid var(--line)}
.late-number{color:#b45309}
.late-warning{margin:12px 0;font-size:11px}
.late-footnote{font-size:10px;line-height:1.6;margin:13px 0 0}
@media(max-width:760px){.schedule-grid{grid-template-columns:1fr}.month-filter{align-items:stretch}.month-filter label,.month-filter input,.month-filter .btn{width:100%}.late-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.late-stats-grid .stat-card:last-child{grid-column:1/-1}}