:root { color-scheme:light; font-family:Arial,sans-serif; color:#25343a; background:#f4f7f8; --accent:#196b69; --line:#d9e3e6; }
* { box-sizing:border-box; }
body { margin:0; }
header { background:#fff; border-top:4px solid var(--accent); border-bottom:1px solid var(--line); padding:16px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
h1 { font-size:22px; margin:0; } h2 { font-size:18px; margin:0 0 16px; }
a { color:#245bc0; } header a { text-decoration:none; }
header .account { margin-left:auto; font-size:14px; }
main { max-width:1200px; margin:auto; padding:24px; }
nav { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid #d8dfe3; padding:0 0 12px; margin-bottom:24px; }
.admin-nav { gap:0; background:#fff; border:1px solid var(--line); border-radius:6px; padding:0; overflow:hidden; }
.admin-nav button { border:0; border-right:1px solid var(--line); border-radius:0; flex:1 1 auto; }
.subtabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; background:#eaf0f3; border:0; border-radius:6px; padding:4px; margin-bottom:18px; }
.subtabs button { border:0; background:transparent; }
.subtabs button[aria-selected=true] { background:var(--accent); color:#fff; }
.item-list { display:grid; gap:8px; margin:12px 0 18px; }
.item-list>p { margin:0; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:5px; }
.activity-list { gap:5px; margin:8px 0 14px; }
.activity-row { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 8px 5px 12px; border:1px solid var(--line); border-radius:5px; background:#fff; font-size:14px; }
.activity-actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.activity-actions .icon-button { width:30px; height:28px; min-height:0; padding:0; display:grid; place-items:center; font-size:15px; line-height:1; }
.activity-actions .danger { color:#b4232c; }
button,input,select,textarea { font:inherit; }
button { border:1px solid #bcc9cf; background:#fff; color:#24313a; padding:10px 14px; border-radius:5px; cursor:pointer; }
button:hover { border-color:#245bc0; } button:disabled { opacity:.5; cursor:wait; }
.compact-command { padding:8px 11px; font-size:13px; }
.pending-person-row td { background:#fffaf0; }
.pending-person-row td:nth-child(5) { color:#8a5b00; font-weight:700; }
#registrationManager:has(.registration-editor[hidden]) { display:none; }
#registrationManager .registration-editor { margin-top:14px; }
#signupSettings .signup-settings-form { margin:0; max-width:none; }
#signupSettings .signup-status { margin:0; font-size:12px; color:#1c7a4a; }
button.primary,nav button[aria-selected=true] { background:var(--accent); color:white; border-color:var(--accent); }
button.danger { background:#b43c42; border-color:#b43c42; color:#fff; }
input,select,textarea { border:1px solid #bcc9cf; background:#fff; padding:10px; border-radius:4px; max-width:100%; width:100%; }
input[type=checkbox],input[type=radio] { width:20px; height:20px; vertical-align:middle; }
label { display:grid; gap:7px; font-size:14px; }
.check { display:flex; gap:10px; align-items:center; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin:16px 0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.band { padding:20px 0; border-bottom:1px solid #d8dfe3; }
.metrics { display:flex; flex-wrap:wrap; gap:32px; padding:24px 0; }
.metrics strong { display:block; font-size:28px; margin-top:8px; font-variant-numeric:tabular-nums; }
.muted { color:#687d87; font-size:14px; }
.status { padding:8px 12px; background:#e5f2eb; color:#226246; display:inline-block; border-radius:4px; }
.idle { background:#fff0d7; color:#845114; }
.badge { display:inline-block; padding:5px 9px; border-radius:4px; font-size:12px; background:#e8edef; color:#49616c; }
.badge.approved { background:#def0e5; color:#1a6244; }
.badge.pending,.badge.partial { background:#fff0cd; color:#77530f; }
.badge.rejected { background:#fbe4e6; color:#9b343d; }
.balance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.balance { padding:18px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px; background:#fff; }
.balance:nth-child(3n+2) { border-top-color:#b88025; }
.balance:nth-child(3n+3) { border-top-color:#4d6ab3; }
.balance h3 { font-size:14px; margin:0 0 12px; color:#526974; }
.balance strong { font-size:25px; font-variant-numeric:tabular-nums; }
.balance p { font-size:12px; color:#687d87; margin-bottom:0; }
.debt { color:#a53341; }
.screenshot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.screenshot-grid figure { margin:16px 0; }
.screenshot-grid img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#e8edef; }
.screenshot-grid figcaption { padding:8px 0; font-size:12px; color:#687d87; }
#clockIn,#breakEnd,#continue { background:#24764f; border-color:#24764f; color:#fff; }
#breakStart { background:#fff0cd; border-color:#dcc58e; color:#77530f; }
#mode { display:inline-block; font-size:14px; border-bottom:2px solid #91babc; padding-bottom:8px; }
.table button { padding:6px 9px; font-size:12px; margin-right:6px; }
td:nth-last-child(2) { max-width:260px; overflow-wrap:anywhere; }
#requestRows td:nth-last-child(2),#leaveRows td:nth-last-child(2) { white-space:normal; min-width:160px; }
.table { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:14px; }
td,th { padding:12px 10px; border-bottom:1px solid #d8dfe3; text-align:left; white-space:nowrap; }
th { background:#eaf0f3; } details { margin:14px 0; } summary { padding:12px 0; cursor:pointer; font-weight:bold; }
dialog { border:1px solid #bcc9cf; border-radius:6px; width:480px; max-width:calc(100vw - 28px); padding:24px; }
dialog::backdrop { background:#17283280; }
video { display:block; width:100%; aspect-ratio:4/3; background:#18232a; object-fit:cover; margin:16px 0; }
.report-previews { display:flex; gap:8px; overflow-x:auto; margin:10px 0; }
.report-preview-item { position:relative; flex:0 0 92px; }
.report-preview-item img { display:block; width:92px; height:72px; object-fit:cover; border-radius:6px; background:#18232a; }
.report-preview-item button { position:absolute; top:3px; right:3px; width:24px; min-height:24px; padding:0; border:0; border-radius:50%; color:#fff; background:#b43c42; font-size:15px; }
#reportHistory { display:grid; gap:10px; margin:12px 0; }
#reportDialog { max-height:calc(100dvh - 28px); padding:0; overflow:hidden; }
.report-dialog-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; max-height:calc(100dvh - 30px); }
.report-dialog-shell>h2 { padding:20px 20px 8px; margin:0; }
.report-dialog-content { min-height:0; overflow:auto; padding:0 20px; overscroll-behavior:contain; }
.report-mode-tabs { position:sticky; z-index:2; top:0; margin:0 0 10px; background:#eaf0f3; }
.monitor-activity { margin:8px 0 0; padding:8px 10px; border-left:3px solid #4f8ef7; background:#f3f7ff; font-size:12px; font-weight:700; }
#memberMonitorHistory { display:grid; gap:10px; margin:12px 0; }
.report-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; border-top:1px solid #dce5e8; background:#fff; }
.report-dialog-footer p { margin:0; }
.report-dialog-footer button { flex:0 0 auto; }
.report-history-item { display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px; border:1px solid #dce5e8; border-radius:6px; background:#fff; }
.report-history-photos { display:flex; flex-wrap:nowrap; gap:4px; width:100%; min-width:0; overflow:hidden; }
.report-history-item img { flex:1 1 0; width:0; min-width:0; max-width:160px; aspect-ratio:4/3; object-fit:cover; border-radius:6px; background:#e8edef; }
.report-history-detail { display:grid; gap:5px; min-width:0; }
.report-history-detail small { color:#687d87; font-size:10px; }
.report-history-item .report-history-note { margin:0; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.report-history-item .report-history-actions { display:flex; flex-wrap:nowrap; gap:5px; margin:2px 0 0; }
.report-history-item .report-history-actions button { flex:1 1 0; min-width:0; min-height:34px; padding:6px 5px; font-size:11px; white-space:nowrap; }
#message { min-height:24px; color:#b43c42; margin:12px 0; overflow-wrap:anywhere; }
#message[data-tone=ok] { color:#1c7a4a; }
#routeMap { width:100%; height:360px; margin:20px 0; z-index:0; }
#liveMap { width:100%; height:340px; margin:12px 0; border-radius:12px; background:#e8eaf6; overflow:hidden; z-index:0; }
[hidden] { display:none !important; }
@media(max-width:600px) { header { padding:14px 16px; } main { padding:16px; } h1 { font-size:20px; } .metrics { gap:20px; } .actions button { flex:1 1 140px; } .admin-nav { display:grid; grid-template-columns:1fr 1fr; }.admin-nav button { border-bottom:1px solid var(--line); min-width:0; font-size:13px; padding:11px 8px; } }

/* Employee surfaces retain the original Absensi Smart visual language. */
.employee-auth,.employee-app { font-family:'Segoe UI',sans-serif; --accent:#4f8ef7; --line:#e8ecf0; color:#2c3e50; background:#f0f2f5; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.employee-auth { min-height:100dvh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a237e,#4f8ef7); padding:20px; }
.employee-auth .auth-card { width:320px; max-width:100%; margin:auto; padding:32px 28px; border-radius:20px; background:white; box-shadow:0 20px 60px #0000004d; text-align:center; }
.auth-logo { font-size:40px; margin-bottom:4px; }
.auth-card h1 { font-size:20px; margin:0 0 20px; }
.auth-field { margin:12px 0; position:relative; }
.auth-card input { padding:12px 14px; border:2px solid #e8ecf0; border-radius:10px; font-size:14px; height:44px; }
.auth-card input:focus { outline:none; border-color:#4f8ef7; }
.password-field input { padding-right:42px; }
.password-field button { position:absolute; right:5px; top:3px; width:38px; height:38px; padding:9px; border:0; background:transparent; color:#95a5a6; }
.employee-auth .auth-submit { width:100%; margin-top:12px; height:44px; border:0; border-radius:10px; background:linear-gradient(135deg,#1a237e,#4f8ef7); font-weight:700; font-size:14px; }
.auth-card #message:empty { display:none; }
.auth-link { border:0; background:none; font-size:12px; color:#4f8ef7; padding:14px 0 0; }
#signupForm .auth-field { text-align:left; font-size:12px; gap:4px; }
#signupForm select { height:44px; border:2px solid #e8ecf0; border-radius:10px; font-size:14px; }
.employee-app { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
.employee-app .employee-header { background:linear-gradient(135deg,#1a237e,#4f8ef7); color:white; border:0; padding:16px 16px 24px; min-height:92px; flex-wrap:nowrap; justify-content:space-between; }
.employee-header h1 { font-size:16px; }
.employee-header .account { display:block; margin:2px 0 0; font-size:12px; font-weight:700; }
.employee-header p { margin:1px 0 0; font-size:12px; opacity:.85; }
.header-tools { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-tools button { width:38px; height:38px; border-radius:50%; padding:0; border:2px solid #ffffff80; color:white; background:#ffffff26; font-size:17px; }
.employee-app main { max-width:none; padding:16px; }
.employee-app #message { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:1001; max-width:calc(100% - 32px); width:max-content; background:#fff; border-radius:8px; padding:12px 20px; box-shadow:0 4px 20px #0003; }
.employee-app #message:empty { display:none; }
.employee-app .band,.employee-app main>section { background:white; border:0; border-radius:16px; padding:20px; margin:0 0 16px; box-shadow:0 4px 20px #00000014; }
.employee-app h2 { font-size:15px; }
.employee-app .employee-nav { position:fixed; bottom:0; left:0; right:0; z-index:100; background:white; border:0; box-shadow:0 -2px 12px #0000000a; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); margin:0; }
.employee-nav button { border:0; border-radius:0; background:none; color:#95a5a6; font-size:11px; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:48px; padding:4px; }
.employee-nav button span { font-size:22px; }
.employee-app .employee-nav button[aria-selected=true] { background:none; color:#4f8ef7; }
.state-wrap { text-align:center; margin-bottom:14px; }
.employee-app .status { border-radius:50px; background:#f0f2f5; color:#95a5a6; font-size:13px; font-weight:600; padding:6px 16px; }
.employee-app .status::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:6px; }
.employee-app .status.working { background:#e8f5e9; color:#27ae60; }
.employee-app .status.break,.employee-app .status.idle { background:#fff3e0; color:#e67e22; }
#idleReason:empty { display:none; }
.employee-app .clock-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.clock-actions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:12px; min-height:76px; padding:14px 10px; font-size:14px; font-weight:700; color:white; }
.clock-actions button span { font-size:22px; }
.employee-app #clockIn,.employee-app #breakEnd,.employee-app #continue { background:linear-gradient(135deg,#27ae60,#2ecc71); box-shadow:0 4px 15px #2ecc7159; }
.employee-app #clockIn { grid-column:span 2; }
.employee-app #breakStart { background:linear-gradient(135deg,#e67e22,#f39c12); color:white; box-shadow:0 4px 15px #f39c1259; }
.employee-app #clockOut { background:linear-gradient(135deg,#c0392b,#e74c3c); box-shadow:0 4px 15px #e74c3c59; }
.employee-app .location-band { padding:16px 18px; }
.location-band h2 { font-size:11px; color:#95a5a6; margin:0 0 8px; }
#homeLocation { font-size:14px; font-weight:600; margin:0 0 8px; }
.employee-app #mode { border:1px solid #c8e6c9; border-radius:50px; padding:8px 14px; color:#2e7d32; background:#e8f5e9; margin:0; font-size:12px; font-weight:700; }
.employee-app #mode.field-duty { border-color:#ffe0b2; color:#e65100; background:#fff3e0; }
.employee-app #modeDescription { margin:6px 0 0; font-size:11px; color:#95a5a6; }
.employee-app .report-launch { width:100%; border:0; background:linear-gradient(135deg,#1a237e,#4f8ef7); padding:14px; border-radius:14px; font-weight:700; font-size:15px; margin-bottom:16px; }
.employee-app .summary-band { padding:0 0 20px; overflow:hidden; }
.summary-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:20px; }
.summary-tabs button { border:0; border-radius:0; padding:12px; font-weight:700; font-size:14px; color:#95a5a6; }
.summary-tabs button[aria-pressed=true] { background:#4f8ef7; color:white; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 20px; }
.summary-grid>div { background:#f8f9ff; border-radius:12px; padding:12px 8px; text-align:center; }
.summary-grid strong { display:block; font-size:20px; font-weight:800; color:#4f8ef7; font-variant-numeric:tabular-nums; }
.summary-grid span { display:block; font-size:11px; color:#95a5a6; margin-top:2px; }
#breakDuration { color:#f39c12; } #duration { color:#27ae60; } #weekOvertime { color:#8e44ad; }
#deductionNote { margin:12px 20px 0; font-size:11px; }
.holiday-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.holiday-heading h2 { margin:0; }.holiday-heading span { color:#95a5a6; font-size:12px; font-weight:600; }
#holidays p { font-size:13px; margin:8px 0; } #holidays .empty { text-align:center; padding:12px; color:#95a5a6; }
.holiday-view { display:grid; gap:12px; }
.holiday-calendars { display:flex; gap:8px; overflow-x:auto; padding:1px 1px 4px; }
.holiday-calendars button { flex:0 0 auto; min-height:36px; padding:7px 13px; border:2px solid #dce3e7; border-radius:18px; color:#2c3e50; background:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.holiday-calendars button[aria-pressed=true] { border-color:var(--holiday-color); color:#fff; background:var(--holiday-color); }
.holiday-panel { overflow:hidden; border:1px solid #e1e7ea; border-radius:8px; background:#fff; }
.holiday-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px 15px; border-bottom:1px solid #edf0f2; }
.holiday-panel-head h2 { margin:0; font-size:15px; }.holiday-panel-head p { margin:3px 0 0!important; font-size:11px!important; }
.holiday-actions { display:flex; align-items:center; gap:7px; }.holiday-actions button { min-height:34px; padding:7px 11px; font-size:12px; }
/* Modal import hari libur */
dialog.import-modal { position:fixed; inset:0; margin:auto; width:min(560px,calc(100vw - 40px)); max-height:calc(100vh - 48px); padding:0; border:0; border-radius:10px; background:#fff; }
.import-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 0; }
.import-modal-head h2 { margin:0; font-size:16px; }.import-modal-head p { margin:4px 0 0; font-size:12px; color:#687d87; }
.import-modal-head>button { border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:#819096; }
.import-modal form { display:grid; gap:12px; padding:14px 18px 18px; }
.import-drop { position:relative; display:grid; place-items:center; min-height:110px; border:2px dashed #b8c6cd; border-radius:8px; padding:18px; text-align:center; font-size:13px; color:#5a6b75; cursor:pointer; overflow:hidden; }
.import-drop input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.import-columns { margin:0; font-size:11px; color:#687d87; }
.import-hint { margin:0; border-radius:6px; background:#e8f1fb; color:#245bc0; font-size:12px; padding:9px 12px; }
.import-templates { display:flex; justify-content:center; gap:12px; }
.import-templates a { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 22px; border-radius:6px; font-size:13px; font-weight:700; color:#fff; text-decoration:none; }
.template-csv { background:#3578b8; }.template-csv:hover { background:#2b6396; }
.template-xlsx { background:#278a5b; }.template-xlsx:hover { background:#1f7249; }
.import-modal-actions { display:flex; justify-content:flex-end; gap:8px; }
.import-modal-actions button:disabled { opacity:.55; }
/* Pengaturan Sistem: layout lebih rapat, checkbox lebih kecil */
.admin-app input[type=checkbox] { width:15px; height:15px; }
.admin-app .band { padding:14px 0; }
.admin-app .view-content h2 { margin:8px 0 0; }
#ruleFields { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; margin:12px 0; }
#captureSettingsForm .fields { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; margin:12px 0; }
#ruleFields label.check,#captureSettingsForm label.check { gap:8px; font-size:13px; }
@media(max-width:850px) { #ruleFields,#captureSettingsForm .fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { #ruleFields,#captureSettingsForm .fields { grid-template-columns:1fr; } }
.holiday-list>p { margin:0!important; padding:20px; color:#819096; text-align:center; }
.holiday-row { padding:11px 15px; border-bottom:1px solid #f0f2f4; }.holiday-row:last-child { border-bottom:0; }
.holiday-row strong,.holiday-row span { display:block; }.holiday-row strong { margin-bottom:3px; font-size:13px; }.holiday-row span { margin-top:2px; color:#819096; font-size:11px; }
.copyright { text-align:center; color:#95a5a6; font-size:11px; padding:8px 0 20px; }.copyright p { margin:2px 0; }
.settings-link { display:flex; width:100%; justify-content:space-between; border:0; border-bottom:1px solid #f0f2f5; border-radius:0; padding:16px 4px; }
#superappsMenu { margin:0; border-bottom:1px solid #f0f2f5; }
#superappsMenu summary { padding:16px 4px; font-size:14px; list-style:none; }
#superappsMenu summary::-webkit-details-marker,#superappsMenu summary::marker { display:none; content:""; }
#biometricSettings { margin:0; border-bottom:1px solid #f0f2f5; padding:14px 4px; }
.settings-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; font-weight:700; }
.settings-toggle-row input[type=checkbox] { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 auto; width:46px; height:26px; margin:0; border:0; border-radius:999px; background:#cdd6dd; cursor:pointer; transition:background .15s; }
.settings-toggle-row input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .15s; }
.settings-toggle-row input[type=checkbox]:checked { background:#4f8ef7; }
.settings-toggle-row input[type=checkbox]:checked::after { transform:translateX(20px); }
.settings-toggle-row input[type=checkbox]:disabled { opacity:.55; cursor:wait; }
#biometricStatus { margin:6px 0 0; font-size:12px; }
.auth-submit-row { display:flex; align-items:stretch; gap:10px; margin-top:12px; }
.auth-submit-row .auth-submit { flex:1 1 auto; width:auto; margin-top:0; min-width:0; }
.employee-auth .auth-biometric { flex:0 0 auto; width:52px; height:44px; margin:0; padding:0; display:grid; place-items:center; border:0; border-radius:10px; background:linear-gradient(135deg,#1a237e,#4f8ef7); color:#fff; cursor:pointer; }
.employee-auth .auth-biometric:hover { filter:brightness(1.05); }
.employee-auth .auth-biometric:disabled { opacity:.6; cursor:wait; }
.employee-auth .auth-biometric svg { display:block; }
.superapps-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:10px; padding:0 0 16px; }
.superapps-links button { min-height:44px; border-color:#e8ecf0; text-align:left; font-size:14px; overflow-wrap:anywhere; }
#superappsMenuStatus:empty { display:none; }
.superapps-open { overflow:hidden; }
#superappsWorkspace { position:fixed; inset:0; z-index:500; background:#fff; display:grid; grid-template-rows:auto minmax(0,1fr); height:100dvh; }
.employee-app .superapps-toolbar { border:0; background:#1a237e; color:#fff; min-height:48px; padding:8px 12px; gap:12px; flex-wrap:wrap; }
.superapps-toolbar button { color:white; border:1px solid #ffffff80; background:transparent; min-height:36px; font-size:13px; }
.superapps-toolbar strong { font-size:14px; overflow-wrap:anywhere; }
#superappsIdle { margin-left:auto; font-size:12px; color:#ffe0b2; }
#superappsFrame { border:0; width:100%; height:100%; min-height:0; background:#fff; }
.employee-app dialog { border:0; border-radius:16px; box-shadow:0 12px 40px #0003; }
.face-progress { min-height:24px; margin:10px 0; color:#607d8b; font-weight:700; }
.face-progress[data-running="true"]::after { content:""; display:inline-block; width:12px; height:12px; margin-left:8px; border:2px solid #4f8ef744; border-top-color:#4f8ef7; border-radius:50%; vertical-align:-2px; animation:face-progress-spin .7s linear infinite; }
@keyframes face-progress-spin { to { transform:rotate(360deg); } }
.employee-app input,.employee-app select,.employee-app textarea { border:2px solid #e8ecf0; border-radius:10px; font-size:14px; }
.employee-app .fields { grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); }
.employee-app button.primary { background:linear-gradient(135deg,#1a237e,#4f8ef7); border:0; }
.employee-app .employee-leave-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); background:#fff; border-radius:12px; padding:0; overflow:hidden; box-shadow:0 2px 10px #00000012; }
.employee-app .employee-leave-tabs button { min-width:0; min-height:48px; border-radius:0; padding:10px 8px; color:#95a5a6; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.employee-app .employee-leave-tabs button[aria-selected=true] { color:#fff; background:#4f8ef7; }
@media(max-width:600px) { .employee-app main { padding:12px; } .employee-app .band,.employee-app main>section { padding:18px; }.employee-app .summary-band { padding:0 0 18px; }.summary-grid { margin:0 18px; } .employee-header h1 { font-size:16px; } .employee-app #leaveView { padding:14px 12px; } .employee-app .employee-leave-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; } .employee-app .employee-leave-tabs::-webkit-scrollbar { display:none; } .employee-app .employee-leave-tabs button { flex:1 0 128px; min-height:52px; } }

/* Management surface follows the original Absensi Smart settings UI. */
.admin-app { font-family:'Segoe UI',Arial,sans-serif; color:#2c3e50; background:#f0f2f5; min-height:100vh; }
.admin-main { max-width:none; margin:0; padding:0; min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start; }
.admin-app #settingsHome { grid-column:1; position:sticky; top:0; height:100vh; overflow:auto; background:#fff; border-right:1px solid #dde4e8; z-index:20; }
.admin-app .admin-view:not(#settingsHome) { grid-column:2; min-width:0; padding-bottom:40px; }
.admin-app #message { position:fixed; z-index:1000; top:14px; left:50%; transform:translateX(-50%); margin:0; min-height:0; max-width:calc(100% - 32px); padding:12px 20px; background:#fff; border-radius:8px; box-shadow:0 4px 20px #0003; }
.admin-app #message:empty { display:none; }
.legacy-header,.sub-header { min-height:108px; padding:22px 26px; color:#fff; background:linear-gradient(135deg,#1a237e,#4f8ef7); display:flex; align-items:center; gap:16px; }
.legacy-header { justify-content:space-between; }
.admin-app #settingsHome .legacy-header { min-height:0; padding:20px 16px; display:block; }
.admin-app #settingsHome .legacy-header-actions { margin-top:14px; justify-content:space-between; }
.legacy-header h1,.sub-header h1 { margin:0; font-size:20px; }
.legacy-header p { margin:5px 0 0; font-size:13px; opacity:.85; }
.legacy-header-actions { display:flex; align-items:center; gap:12px; font-size:12px; }
.legacy-header-actions a { color:white; border:1px solid #ffffff80; border-radius:8px; padding:8px 10px; text-decoration:none; }
.view-content,.legacy-card { margin:18px; padding:22px; background:#fff; border-radius:16px; box-shadow:0 4px 20px #00000014; }
.admin-app .view-content { font-size:13px; }
.admin-app .view-content h2 { font-size:16px; margin-bottom:12px; }
.admin-app .view-content h3 { font-size:14px; margin:12px 0 8px; }
.admin-app .view-content label { gap:5px; font-size:12px; }
.admin-app .view-content button,.admin-app .view-content input,.admin-app .view-content select,.admin-app .view-content textarea { font-size:13px; }
.admin-app .view-content button { padding:7px 10px; }
.admin-app .view-content input,.admin-app .view-content select,.admin-app .view-content textarea { padding:8px; }
.admin-app .view-content .fields { gap:10px; margin:10px 0; }
.admin-app .view-content .actions { gap:6px; margin:10px 0; }
.admin-app .view-content .band { padding:14px 0; }
.admin-app .view-content td,.admin-app .view-content th { padding:9px 8px; }
.admin-app #settingsHome .menu-card { margin:0; padding:10px; border-radius:0; box-shadow:none; }
.admin-app #settingsHome .menu-card h2 { display:none; }
.menu-card h2 { margin:0 0 16px; font-size:17px; }
.settings-menu { display:block; margin:0; padding:0; border:0; }
.settings-menu button { width:100%; min-height:48px; display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:9px; padding:7px 8px; border:0; border-radius:7px; text-align:left; background:#fff; }
.settings-menu button:last-child { border-bottom:0; }
.settings-menu button:hover { background:#f8f9ff; }
.settings-menu button[aria-current=page] { color:#fff; background:#315fb8; }
.settings-menu button[aria-current=page] small,.settings-menu button[aria-current=page] b { color:#dce8ff; }
.settings-menu i { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; font-style:normal; font-size:15px; }
.settings-menu i.blue{background:#e3f2fd}.settings-menu i.green{background:#e8f5e9}.settings-menu i.pink{background:#fce4ec}.settings-menu i.purple{background:#f3e5f5}.settings-menu i.orange{background:#fff3e0}.settings-menu i.violet{background:#ede7f6}.settings-menu i.cyan{background:#e0f7fa}.settings-menu i.indigo{background:#e8eaf6}
.settings-menu strong,.settings-menu small { display:block; }.settings-menu strong { font-size:13px; }.settings-menu small,.settings-menu b { display:none; }
.sub-header { min-height:76px; padding:14px 24px; }
.back-home { display:none; width:38px; height:38px; padding:0; border:1px solid #ffffff66; border-radius:9px; color:#fff; background:#ffffff1f; font-size:20px; line-height:1; }
.sidebar-backdrop { display:none; }
.admin-app .subtabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border:0; border-radius:12px; padding:0; overflow:hidden; background:#fff; box-shadow:0 2px 10px #00000012; }
.admin-app .subtabs button { border:0; border-radius:0; padding:13px 8px; color:#95a5a6; font-weight:700; background:#fff; }
.admin-app .subtabs button[aria-selected=true] { color:#fff; background:#4f8ef7; }
.admin-app button.primary,.admin-app nav button[aria-selected=true] { background:#4f8ef7; border-color:#4f8ef7; }
.admin-app .button-link { display:inline-block; padding:10px 14px; border-radius:8px; color:#fff; background:#4f8ef7; text-decoration:none; font-weight:700; }
.access-share-settings { padding-top:0; }
.access-share-settings .signup-settings { margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid #eef2f4; }
.signup-settings-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.signup-settings-row label.check { display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.signup-settings-row button { margin:0; }
.employee-link-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; }
.employee-link-row input { min-width:0; margin:0; }
.employee-link-row .button-link, .employee-link-row button { margin:0; white-space:nowrap; }
@media(max-width:600px) { .employee-link-row { grid-template-columns:1fr 1fr; }.employee-link-row input { grid-column:1 / -1; }.employee-link-row .button-link, .employee-link-row button { text-align:center; } }
.whatsapp-notification-head, .whatsapp-notification-row { display:grid; grid-template-columns:64px minmax(170px,.8fr) minmax(220px,1.2fr); gap:12px; align-items:center; padding:10px 12px; }
.whatsapp-notification-head { background:#f4f7fb; border-bottom:1px solid var(--line); }
.whatsapp-notification-list { border:1px solid var(--line); border-radius:8px; margin:10px 0 16px; overflow:hidden; }
.whatsapp-notification-row + .whatsapp-notification-row { border-top:1px solid var(--line); }
.whatsapp-notification-row input { margin:0; width:20px; height:20px; }
.admin-app details.whatsapp-settings { margin-top:14px; padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.admin-app details.whatsapp-settings>summary { padding:14px 0; cursor:pointer; font-size:16px; font-weight:700; }
.whatsapp-settings-body { padding:0 0 14px; }
@media(max-width:600px) { .whatsapp-notification-head { display:none; }.whatsapp-notification-row { grid-template-columns:32px 1fr; gap:4px 10px; }.whatsapp-notification-row small { grid-column:2; } }
.admin-app details { background:#fff; border:1px solid #e8ecf0; border-radius:10px; padding:0 14px 14px; }
.admin-app details summary { padding:14px 0; }
.division-group { margin:8px 0!important; padding:0 10px 8px!important; }
.division-group summary { display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 0!important; font-size:14px; }
.division-edit-button { margin:0 0 0 4px; padding:4px 7px; border-radius:6px; font-size:11px; font-weight:600; }
.division-summary p { display:inline-block; margin:3px 18px 3px 0; font-size:12px; }
.repeat-field { display:grid; gap:6px; }
.repeat-field-heading { display:flex; align-items:center; gap:8px; font-size:14px; }
.repeat-field-heading .icon-button,.repeat-field-row .icon-button { width:28px; height:28px; min-height:28px; padding:3px; margin:0; }
.repeat-field-list { display:grid; gap:6px; }
.repeat-field-row { display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:6px; align-items:center; }
.repeat-field-row select { margin:0; }
#editor.division-editor { width:760px; }
#editor.division-editor #editorFields { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
@media(max-width:600px) { #editor.division-editor #editorFields { grid-template-columns:1fr; } }
.quota-people { display:grid; gap:0; }
.quota-person { display:grid; grid-template-columns:minmax(100px,145px) minmax(0,1fr); gap:8px; padding:6px 0; border-top:1px solid #e8ecf0; }
.quota-person-name { display:flex; align-items:center; justify-content:flex-start; padding:3px 6px; overflow-wrap:anywhere; text-align:left; font-size:12px; }
.quota-policy-grid { display:flex; min-width:0; overflow-x:auto; padding-bottom:4px; scrollbar-gutter:stable; }
.quota-policy { position:relative; flex:0 0 200px; min-width:140px; max-width:360px; padding:0 8px 0 6px; border-left:1px solid #e8ecf0; }
.quota-policy-resizer { position:absolute; z-index:1; top:0; right:0; bottom:0; width:7px; cursor:col-resize; touch-action:none; }
.quota-policy-resizer::after { content:""; position:absolute; top:20%; right:2px; bottom:20%; width:2px; border-radius:2px; background:#d7dfe4; }
.quota-policy-resizer:hover::after,.quota-policy-resizer:focus::after { background:#4f8ef7; }
.quota-policy-resizer:focus { outline:2px solid #4f8ef7; outline-offset:-2px; }
.resizing-quota-policy { cursor:col-resize; user-select:none; }
.quota-policy-heading { min-height:20px; display:flex; align-items:center; justify-content:center; }
.quota-policy-heading h3 { width:100%; margin:0 0 3px; font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-align:center; text-overflow:ellipsis; }
.quota-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; margin:1px 0 0; text-align:center; }
.quota-metrics.is-nonquota { grid-template-columns:repeat(2,minmax(0,1fr)); }
.quota-metrics div { min-width:0; }
.quota-metrics dt { color:#95a5a6; font-size:9px; line-height:1.15; }
.quota-metrics dd { margin:1px 0 0; font-size:10px; line-height:1.2; font-weight:700; overflow-wrap:anywhere; }
.quota-metrics div:last-child dd { color:#2e7d32; }
.admin-app th { background:#f8f9ff; color:#607078; font-size:12px; }.admin-app td { font-size:13px; }
.compact-filter { display:flex; align-items:end; gap:8px; margin:0 0 12px; }
.compact-filter label { width:min(220px,100%); }
.employee-media-list { border:1px solid #e8ecf0; border-radius:9px; overflow:hidden; }
.employee-media-list>p { margin:0; padding:12px; color:#687d87; }
.employee-media-group { margin:0; background:#fff; }
.employee-media-group + .employee-media-group { border-top:1px solid #e8ecf0; }
.employee-media-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; }
.employee-media-summary .employee-media-person { display:inline-block; }
.employee-media-count { margin-left:auto; color:#7f8c8d; font-size:10px; font-weight:400; }
.employee-media-group>.employee-media-thumbnails { padding:8px 12px 12px 30px; border-top:1px solid #f0f2f4; }
.employee-media-row { min-height:62px; display:grid; grid-template-columns:minmax(140px,220px) minmax(0,1fr); gap:12px; align-items:center; padding:7px 10px; background:#fff; }
.employee-media-row + .employee-media-row { border-top:1px solid #e8ecf0; }
.employee-media-person strong,.employee-media-person small,.employee-media-person span { display:block; }
.employee-media-person strong { font-size:13px; }
.employee-media-person small { margin-top:2px; color:#7f8c8d; font-size:10px; text-transform:capitalize; }
.employee-media-person span { margin-top:4px; color:#607078; font-size:11px; }
.employee-media-thumbnails { min-width:0; display:flex; align-items:center; gap:6px; overflow-x:auto; padding:1px 0; color:#7f8c8d; font-size:11px; }
.work-photo-card { flex:0 0 auto; min-width:0; display:flex; gap:5px; align-items:center; padding:5px; border:1px solid #e1e7ea; border-radius:6px; background:#fafbfc; }
.member-monitor-card { border-color:#cfdcf7; background:#f6f9ff; }
.work-photo-card p { margin:0 0 4px; color:#2c3e50; font-size:11px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
.work-photo-card small { display:block; color:#7f8c8d; font-size:9px; line-height:1.2; }
.media-thumbnail { flex:0 0 auto; width:76px; height:48px; min-height:0; padding:0!important; overflow:hidden; border:1px solid #d7e0e5; border-radius:5px; background:#eef2f4; }
.media-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }
.media-viewer { width:min(1380px,calc(100vw - 32px)); max-width:calc(100vw - 32px); padding:38px 14px 12px; background:#111820; }
.media-viewer-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:stretch; }
.media-viewer-grouped .media-viewer-layout { grid-template-columns:minmax(0,1.65fr) minmax(260px,.65fr); }
.media-viewer-visual { min-width:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.media-viewer img { display:block; max-width:100%; max-height:78vh; object-fit:contain; }
.media-viewer-gallery { display:flex; gap:10px; width:100%; max-height:78vh; overflow:auto; }
.media-viewer-gallery img { flex:0 0 auto; max-width:min(68vw,720px); max-height:76vh; }
.media-viewer-details { min-width:0; padding:16px; overflow:auto; border-left:1px solid #ffffff26; color:#fff; background:#18222c; }
.media-viewer-details header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:0; padding:0 0 12px; border:0; border-bottom:1px solid #ffffff26; color:#fff; background:#18222c; }
.media-viewer-details strong { color:#fff; font-size:14px; line-height:1.35; }
.media-viewer-details time { flex:0 0 auto; color:#c9d3dc; font-size:11px; line-height:1.45; text-align:right; }
.media-viewer-note { padding-top:14px; font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.media-viewer p { max-width:min(88vw,1100px); margin:10px 0 0; color:#fff; font-size:12px; text-align:center; overflow-wrap:anywhere; }
.media-viewer-close { position:absolute; top:6px; right:7px; width:30px; height:30px; padding:0!important; border:0; color:#fff; background:transparent; font-size:24px!important; }
.rekap-toolbar { margin:0 0 12px; padding:14px; box-shadow:none; border:1px solid #e8ecf0; }
.rekap-toolbar .fields { margin:0; }.rekap-toolbar .actions { margin-bottom:0; }
.rekap-legend { display:flex; gap:14px; flex-wrap:wrap; margin:8px 2px; font-size:11px; color:#7f8c8d; }.rekap-legend .ok{color:#2e7d32}.rekap-legend .less{color:#e53935}.rekap-legend .leave{color:#1565c0}
.rekap-scroll { overflow:auto; border:1px solid #e8ecf0; border-radius:12px; }.rekap-scroll table { min-width:720px; }.rekap-scroll th:first-child,.rekap-scroll td:first-child { position:sticky; left:0; z-index:1; background:#fff; }.rekap-scroll th:first-child { z-index:2; background:#f8f9ff; }
.rekap-day { text-align:center; min-width:54px; }.rekap-total { background:#f0fff4; font-weight:800; text-align:center; }.rekap-week-total { background:#f0f4ff; font-weight:800; text-align:center; }.rekap-less { color:#e53935; }.rekap-ok { color:#2e7d32; }.rekap-leave { color:#1565c0; }
.timesheet-toolbar { margin:0 0 12px; padding:14px; box-shadow:none; border:1px solid #e8ecf0; display:grid; grid-template-columns:minmax(360px,1fr) minmax(220px,.55fr); gap:12px; align-items:end; }
.timesheet-week-nav { display:grid; grid-template-columns:42px minmax(150px,1fr) 42px auto; gap:8px; align-items:center; }.timesheet-week-nav strong{text-align:center;font-size:14px}.timesheet-week-nav button{margin:0}.timesheet-search{margin:0}.timesheet-scroll { overflow:auto; border:1px solid #e8ecf0; border-radius:12px; }.timesheet-scroll table{min-width:900px}.timesheet-scroll th,.timesheet-scroll td{text-align:center;white-space:nowrap}.timesheet-scroll th:first-child,.timesheet-scroll td:first-child{position:sticky;left:0;z-index:1;background:#fff;text-align:left}.timesheet-scroll th:first-child{z-index:2;background:#f8f9ff}.timesheet-person strong,.timesheet-person small{display:block}.timesheet-person small{margin-top:3px;color:#95a5a6;text-transform:capitalize}.timesheet-day{min-width:70px}.timesheet-day-editable{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}.timesheet-day-editable:hover,.timesheet-day-editable:focus{background:#eef5ff;outline:2px solid #4f8ef7;outline-offset:-2px}.timesheet-leave{color:#1565c0;background:#f0f7ff}.timesheet-sunday{color:#c62828;background:#fff3f3!important;font-style:italic}.timesheet-week-sum{min-width:76px;background:#fff8e1;font-weight:800}.timesheet-control{margin:16px 0 0;box-shadow:none;border:1px solid #e8ecf0}.timesheet-control-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.timesheet-control-title h2{margin:0;font-size:17px}.timesheet-control details{margin-top:10px}.timesheet-control details p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.timesheet-control details p button:first-of-type{margin-left:auto}
@media(max-width:900px){.admin-main{display:block}.admin-app #settingsHome{position:fixed;left:0;top:0;width:min(82vw,300px);height:100dvh;transform:translateX(-102%);transition:transform .2s ease;box-shadow:8px 0 28px #0003}.admin-app.sidebar-open #settingsHome{transform:translateX(0)}.admin-app .admin-view:not(#settingsHome){padding-bottom:30px}.back-home{display:block}.sidebar-backdrop{position:fixed;inset:0;z-index:19;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#14213d66}.admin-app.sidebar-open .sidebar-backdrop{display:block}}
@media(max-width:700px){.legacy-header,.sub-header{padding-left:16px;padding-right:16px}.legacy-header-actions span{display:none}.view-content,.legacy-card{margin:12px;padding:16px}.admin-app #settingsHome .menu-card{padding:10px}.settings-menu button{min-height:48px}.admin-app .subtabs{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-app .subtabs button{font-size:12px}.admin-app dialog{padding:18px}.quota-person{grid-template-columns:76px minmax(0,1fr);gap:4px}.quota-person-name{padding:2px 4px;font-size:11px}.quota-policy{flex-basis:180px;padding:0 7px 0 5px}.employee-media-row{grid-template-columns:110px minmax(0,1fr);gap:8px}.media-thumbnail{width:66px;height:44px}.compact-filter{align-items:stretch}.compact-filter button{align-self:end}.media-viewer-grouped .media-viewer-layout{grid-template-columns:1fr}.media-viewer-gallery{max-height:58vh}.media-viewer-gallery img{max-width:82vw;max-height:56vh}.media-viewer-details{max-height:30vh;border-left:0;border-top:1px solid #ffffff26}.media-viewer-details header{display:block}.media-viewer-details time{display:block;margin-top:4px;text-align:left}}
@media(max-width:850px){.timesheet-toolbar{grid-template-columns:1fr}.timesheet-week-nav{grid-template-columns:40px minmax(130px,1fr) 40px}.timesheet-week-nav .primary{grid-column:1/-1}.timesheet-toolbar>button{width:100%}}
.admin-app #editor { width:min(720px,calc(100vw - 28px)); }
#areaEditorMap { width:100%; height:320px; border:2px solid #e8ecf0; border-radius:12px; overflow:hidden; z-index:0; }
.area-search-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.area-search-row button,.area-map-tools button { background:#4f8ef7; border-color:#4f8ef7; color:#fff; font-weight:700; }
.area-suggestions { grid-column:1/-1; margin-top:-13px; border:1px solid #e8ecf0; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px #0002; }
.area-suggestions button { display:block; width:100%; border:0; border-bottom:1px solid #eef1f4; border-radius:0; text-align:left; background:#fff; font-size:13px; }
.area-suggestions button:last-child { border-bottom:0; }
.area-map-tools { display:flex; gap:8px; }
.area-coordinates { margin:0; text-align:center; }
@media(max-width:600px){#areaEditorMap{height:280px}.area-search-row{grid-template-columns:1fr}.area-search-row button{width:100%}}