:root{--navy:#0b1f3a;--navy2:#12345c;--blue:#1769e0;--bg:#f4f7fb;--card:#fff;--text:#122033;--muted:#6b7a90;--line:#dde5ef;--ok:#169b62;--warn:#cc7a00;--danger:#c63b3b;--radius:16px;--shadow:0 12px 30px rgba(9,29,55,.08);
  /* semantic aliases used by v0.4.3 shell chrome - same values, clearer names */
  --surface:var(--card);--surface-muted:#f7f9fc;--text-muted:var(--muted);--border:var(--line);--border-strong:#b8c9df;--primary:var(--blue);--accent:var(--blue);--accent-strong:#155dcc;--action-secondary:#eaf1fb;--action-hover:#0f56b8;--action-hover-surface:#dbeaff;--focus-ring:#1769e0;--sidebar:var(--navy);
  --topbar-bg:#fff;--modal-bg:#fff;--dropdown-bg:#fff;--input-bg:#fff;--notice-bg:#edf5ff;--notice-border:#cfe3ff;--notice-text:#31567f}
[data-theme="dark"]{--bg:#0f1520;--card:#161d2b;--text:#e7ecf5;--muted:#93a1b8;--line:#2a3348;--surface:#161d2b;--surface-muted:#1b2333;--text-muted:#93a1b8;--border:#2a3348;--topbar-bg:#141a27;--modal-bg:#161d2b;--dropdown-bg:#1b2333;--input-bg:#111726;--notice-bg:#132338;--notice-border:#243a56;--notice-text:#a9c6ef;--shadow:0 12px 30px rgba(0,0,0,.45)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.stack{display:grid;gap:14px}.boot-splash{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--navy);color:#fff}.boot-splash__content{text-align:center;display:grid;justify-items:center;gap:10px}.boot-splash__content p{margin:0;color:#b9c8db}.boot-splash .brand-mark{background:#fff;color:var(--navy)}.boot-splash .brand-logo{max-width:min(220px,70vw);max-height:72px}.login-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#07162b,#113762 65%,#1769e0)}.login-card{text-align:center;width:min(430px,100%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 24px 70px rgba(0,0,0,.28);position:relative;z-index:1}
.login-card form{text-align:left}
.login-screen{background-size:cover;background-position:center;background-repeat:no-repeat}
.login-screen.has-custom-bg::before{content:"";position:fixed;inset:0;background:linear-gradient(145deg,rgba(7,22,43,.72),rgba(17,55,98,.6) 65%,rgba(23,105,224,.5));z-index:0}.login-card h1{margin:14px 0 6px}.login-card p{margin:0 0 24px;color:var(--muted)}label{display:grid;gap:5px;font-weight:650;font-size:13px}input,select,textarea{width:100%;min-height:42px;border:1px solid var(--border);border-radius:11px;padding:9px 12px;background:var(--input-bg);color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#72a8ef;box-shadow:0 0 0 3px rgba(23,105,224,.10)}textarea{min-height:90px;resize:vertical}
/* M13.2: canonical compact outlined/floating-label field. Wrap a control
   in <label class="form-field"> with a trailing <span class="form-field__label">
   - original label-text-then-control order is fine, :has() reads state from
   anywhere inside, so no DOM reordering is needed to retrofit an existing
   `<label>Text<input></label>` field. Controls need `placeholder=" "` (a
   single space, never removed) for the :not(:placeholder-shown) check;
   `<select>` always counts as filled. */
.form-field{position:relative;display:block;font-weight:650;font-size:13px}
.form-field input,.form-field select,.form-field textarea{padding:16px 12px 6px}
.form-field textarea{padding-top:20px}
.form-field__label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:600;color:var(--muted);pointer-events:none;padding:0 4px;background:transparent;transition:top .12s ease,font-size .12s ease,color .12s ease,background .12s ease;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-field:has(input:focus,select:focus,textarea:focus) .form-field__label,
.form-field:has(input:not(:placeholder-shown),textarea:not(:placeholder-shown)) .form-field__label,
.form-field:has(select) .form-field__label{top:0;font-size:11px;background:var(--input-bg);color:var(--text-muted)}
.form-field:has(input:focus,select:focus,textarea:focus) .form-field__label{color:var(--blue)}
.form-field:has(input:disabled,select:disabled,textarea:disabled) .form-field__label{color:var(--text-muted)}
.field-hint{margin:-3px 0 0;font-size:11px}.brand-mark{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--blue),#74adff);color:#fff}.brand-mark.small{width:39px;height:39px;border-radius:12px;font-size:13px}.brand-logo{width:54px;height:54px;border-radius:17px;object-fit:contain;background:#fff}.brand-logo.small{width:39px;height:39px;border-radius:12px}.brand-logo.horizontal{width:auto;height:44px;max-width:240px;border-radius:0;background:transparent}.brand-logo.small.horizontal{height:34px;max-width:170px}
.brand{min-width:0}.brand-asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.brand-asset-grid .full{grid-column:1/-1}.brand-asset-row{grid-column:1/-1;display:flex;gap:14px;align-items:stretch}.brand-asset-row>.brand-card:first-child{flex:1 1 auto;min-width:0}.brand-asset-row>.brand-card.compact{flex:0 0 168px}.brand-card{border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}.brand-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand-card-head strong{font-size:13px}.brand-card-preview{position:relative;border:1px dashed var(--border);border-radius:10px;background:var(--card);display:grid;place-items:center;overflow:hidden}.brand-card-preview img{width:100%;height:100%;object-fit:contain}.brand-card-preview.ratio-square{aspect-ratio:1/1;max-width:120px;margin:0 auto}.brand-card-preview.ratio-horizontal{aspect-ratio:4/1}.brand-card-preview.ratio-wide{aspect-ratio:16/9}.brand-card-preview.ratio-favicon{aspect-ratio:1/1;max-width:48px;margin:0 auto}.brand-card-preview.ratio-favicon img{object-fit:contain}.brand-card-placeholder{color:var(--muted);display:grid;place-items:center;width:100%;height:100%}.brand-card-hint{margin:0;font-size:11px;color:var(--muted)}.brand-card-actions{display:flex;gap:8px;margin-top:auto}.brand-card-actions .btn{padding:7px 10px;font-size:12px;display:inline-flex;align-items:center;gap:5px}.brand-file-btn{cursor:pointer}.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:750;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#eaf1fb;color:var(--navy)}.btn.danger{background:#ffeaea;color:var(--danger)}.btn:disabled{opacity:.55;cursor:not-allowed}.app-shell{min-height:100dvh;display:grid;grid-template-columns:250px 1fr}.sidebar{background:var(--navy);color:#fff;padding:20px 16px;display:flex;flex-direction:column;min-height:100dvh;position:sticky;top:0;height:100dvh}.brand{display:flex;gap:12px;align-items:center;padding:4px 6px 22px}.brand small,.sidebar-footer small{display:block;color:#9fb2cb;margin-top:3px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{border:0;background:transparent;color:#c8d6e7;text-align:left;padding:11px 13px;border-radius:10px;cursor:pointer}.sidebar nav button.active,.sidebar nav button:hover{background:#183b65;color:#fff}.sidebar-footer{margin-top:auto;padding:16px 8px 2px;border-top:1px solid rgba(255,255,255,.12)}.link-btn{border:0;background:transparent;color:#9fc5ff;padding:10px 0;cursor:pointer}.login-card .link-btn{color:var(--blue);font-weight:650;font-size:14px}.main{min-width:0;display:flex;flex-direction:column;min-height:100dvh}.content{flex:1 1 auto}.topbar{height:92px;background:var(--topbar-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:5}.topbar h2{margin:0;font-size:23px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.content{padding:26px}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.metric .value{font-size:32px;font-weight:850;margin-top:10px}.metric .label{color:var(--muted);font-size:13px}.metric .hint{font-size:12px;color:var(--muted);margin-top:8px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title h3{margin:0}.section-title p{margin:4px 0 0;color:var(--muted);font-size:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .full{grid-column:1/-1}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}table{border-collapse:collapse;width:100%;background:var(--card);font-size:13px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);white-space:nowrap}th{background:var(--surface-muted);color:var(--text-muted)}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#e8eef7;color:#526478}.badge.ok{background:#e5f8ef;color:#0d8050}.badge.warn{background:#fff0d8;color:#9a5c00}.badge.bad{background:#ffe7e7;color:#a52f2f}.attendance-hero{text-align:center;padding:26px}.clock{font-size:42px;font-weight:900;letter-spacing:-1.5px}.date-text{color:var(--muted);margin:5px 0 18px}.location-box{background:#f5f8fd;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;margin:16px 0}.camera-box{background:#0b1727;border-radius:14px;padding:12px;color:#fff}.camera-box video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#02060b}.camera-actions{display:flex;gap:8px;margin-top:10px}.camera-status{font-size:12px;color:#b9c8db;margin-top:9px}.notice{padding:13px 15px;border-radius:12px;background:var(--notice-bg);border:1px solid var(--notice-border);color:var(--notice-text);font-size:13px}.toast{position:fixed;right:20px;top:20px;z-index:100;background:#111d2f;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{background:#8e2828}
/* M14.1 PART 19-22: a distinct centered toast for pre-auth/auth-task
   failures (wrong password, expired reset token, etc) - never a
   browser alert(), never the corner toast, never stacked. */
.auth-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:120;display:flex;align-items:flex-start;gap:10px;max-width:min(360px,86vw);background:var(--card);color:var(--text);padding:16px 18px;border-radius:14px;border:1px solid var(--danger);box-shadow:0 20px 50px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.15s}
.auth-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.auth-toast .auth-toast-icon{flex:0 0 auto;color:var(--danger);margin-top:1px}
.auth-toast .auth-toast-text{font-size:14px;font-weight:600;line-height:1.4}
/* M14.1 PART 3/23: compact in-modal tabs (Sistem -> Notifikasi sections) -
   same pill visual language as .domain-tabs, sized for a modal body rather
   than a page header. */
.modal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.modal-tabs button{border:0;background:var(--surface-muted);color:var(--text);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap}
.modal-tabs button.active{background:var(--blue);color:#fff}
.modal-tab-panel{display:none}
.modal-tab-panel.active{display:grid;gap:14px}
.template-vars{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 2px}
.template-var-chip{font-size:11px;font-weight:700;background:var(--surface-muted);color:var(--text-muted);border-radius:999px;padding:3px 9px;font-family:ui-monospace,monospace}
.template-editor{border:1px solid var(--border);border-radius:12px;padding:12px;display:grid;gap:8px}
.template-editor-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.template-editor-head strong{font-size:13px}
.template-inline-note{font-size:12px;color:var(--text-muted);margin:0}
.template-inline-note.warn{color:var(--warn)}.row-actions{display:flex;gap:7px}.muted{color:var(--muted)}code{background:#eef2f7;padding:2px 5px;border-radius:5px}.empty{padding:35px;text-align:center;color:var(--muted)}.domain-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 28px;background:var(--topbar-bg);border-bottom:1px solid var(--border)}.domain-tabs button{border:0;background:var(--surface-muted);color:var(--text);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap}.domain-tabs button.active{background:var(--blue);color:#fff}
/* Sidebar collapse/drawer/nav-icon layout for <=1000px and <=768px now
   lives in the v0.4.3 shell UX block appended at the end of this file
   (single source for that responsive behavior, not duplicated here). */
@media(max-width:1000px){.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.attendance-simple{padding:16px 18px;text-align:initial}.attendance-summary-card{max-width:900px;margin:0 auto}.attendance-summary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;align-items:start}.attendance-summary-date{color:var(--muted);font-size:14px;line-height:1.35;min-width:0}.attendance-summary-clock{font-size:32px;font-weight:850;line-height:1.1;letter-spacing:-.5px;text-align:right;white-space:nowrap}.attendance-summary-shift,.attendance-summary-location{min-width:0;display:flex;gap:4px;align-items:baseline;font-size:13px;line-height:1.35}.attendance-summary-shift strong,.attendance-summary-location{font-weight:750}.attendance-summary-shift span{color:var(--muted);white-space:nowrap}.attendance-summary-location{justify-content:flex-end;text-align:right;overflow-wrap:anywhere}.attendance-summary-item{display:flex;flex-direction:column;gap:2px;min-width:0}.attendance-summary-item.align-right{text-align:right;align-items:flex-end}.attendance-summary-label{color:var(--muted);font-size:11px;font-weight:700}.attendance-summary-item>strong{font-size:18px;line-height:1.2}.attendance-summary-item .dist-pill{margin-top:2px!important;padding:3px 7px;font-size:10px}.attendance-status-icon{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 9px;vertical-align:middle;margin-right:6px;background:var(--muted)}.attendance-status-icon.ok{background:#16834b}.attendance-status-icon.warn{background:#b87900}.attendance-status-icon.bad{background:#bd3030}.attendance-summary-item>strong{display:inline-flex;align-items:center;gap:0}.attendance-summary-notice{grid-column:1/-1;margin-top:0}.attendance-cta{margin-top:14px;text-align:center}.attendance-cta .btn{min-width:0;width:min(220px,100%);padding:11px 18px;font-size:14px;border-radius:12px}.attendance-action-row{display:flex;align-items:center;justify-content:center;gap:8px}.attendance-action-row>.btn{flex:1 1 auto;width:auto}.attendance-request-btn{width:42px;height:42px;flex:0 0 42px;background:var(--surface-muted);color:var(--text);border:1px solid var(--border)}.attendance-request-btn .ui-icon{width:19px;height:19px}.request-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.request-panel-heading h3,.request-panel-heading p{margin:0}.request-panel-heading p{color:var(--muted);font-size:12px;margin-top:3px}@media(max-width:360px){.attendance-action-row{gap:6px}.attendance-action-row>.btn{padding-left:10px;padding-right:10px;font-size:13px}}.attendance-note{margin-top:10px;font-size:13px}.dist-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px}.dist-pill.blue{background:#e5eeff;color:#1a4fd6}.dist-pill.yellow{background:#fff3d6;color:#93650a}.dist-pill.red{background:#ffe4e4;color:#b23030}.dist-pill.gray{background:#eceff3;color:#5a6579}.camera-modal{position:fixed;inset:0;background:#000;z-index:200;display:flex;flex-direction:column;color:#fff;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}.camera-modal video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(1);transition:transform .15s}.camera-modal video.mirrored{transform:scaleX(-1)}.camera-stage{position:relative;flex:1;min-height:0;overflow:hidden}.camera-topbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0))}.camera-close{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;border:0;font-size:20px;line-height:1;cursor:pointer}.camera-title{font-weight:800;font-size:14px;letter-spacing:.03em}.camera-overlay{position:absolute;top:66px;left:0;right:0;z-index:2;display:flex;justify-content:center;padding:0 16px}.camera-overlay-card{background:rgba(10,16,28,.72);backdrop-filter:blur(6px);border-radius:16px;padding:14px 18px;text-align:center;max-width:420px;width:100%}.camera-overlay-card .loc-name{font-weight:800;font-size:15px;margin-bottom:6px}.camera-overlay-card .dist-line{font-size:16px;font-weight:800;margin:2px 0}.camera-overlay-card .gps-line{font-size:12px;color:#cbd6e6;margin-top:2px}.camera-overlay-card .area-line{font-size:12px;font-weight:800;margin-top:8px;letter-spacing:.03em}.camera-overlay-card .area-line.blue{color:#7db0ff}.camera-overlay-card .area-line.yellow{color:#ffd479}.camera-overlay-card .area-line.red{color:#ff8f8f}.face-guide{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(62vw,300px);aspect-ratio:3/4;border:3px solid rgba(255,255,255,.55);border-radius:50%/45%;z-index:1;pointer-events:none}.camera-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px 22px;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0))}.gps-wait{font-size:12px;color:#e7ecf3;background:rgba(0,0,0,.4);padding:6px 12px;border-radius:999px}.camera-controls-row{display:flex;align-items:center;justify-content:center;gap:34px;width:100%}.mirror-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:18px;cursor:pointer;display:grid;place-items:center}.mirror-btn.active{background:#fff;color:#0b1727}.shutter-btn{width:78px;height:78px;border-radius:50%;background:transparent;border:4px solid #fff;padding:5px;cursor:pointer;display:grid;place-items:center}.shutter-btn .inner{width:100%;height:100%;border-radius:50%;background:#fff;transition:background .15s,transform .1s}.shutter-btn:disabled{opacity:.4;cursor:not-allowed}.shutter-btn:active:not(:disabled) .inner{transform:scale(.88)}.shutter-btn.submitting .inner{background:#ffb020}.mirror-spacer{width:46px}.camera-retry{position:absolute;inset:0;z-index:3;background:rgba(6,10,18,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:16px}.camera-retry p{max-width:320px;font-size:15px;line-height:1.5;margin:0}.camera-permission{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;gap:14px;padding:28px}
.map-modal{position:fixed;inset:0;z-index:310;background:rgba(6,10,18,.85);display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,16px) 16px env(safe-area-inset-bottom,16px)}.map-modal-card{background:#fff;border-radius:16px;padding:18px;width:min(680px,100%);max-height:92vh;overflow:auto}.map-modal-card h3{margin:0 0 10px}.map-canvas{width:100%;height:min(50vh,420px);border-radius:12px;overflow:hidden;border:1px solid var(--line)}.map-coords{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}.map-coords .field{flex:1;min-width:140px}.map-coords label{font-size:12px;color:var(--muted);font-weight:700}.map-coords .value{font-size:15px;font-weight:800}.map-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px}.qr-box img{width:220px;height:220px;border-radius:12px;background:#fff;padding:8px}
.password-field{position:relative;display:flex;align-items:center}.password-field input{padding-right:48px}.password-toggle{position:absolute;right:6px;width:36px;height:36px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px}.password-toggle:focus{outline:2px solid #72a8ef}
/* Personalia consolidated page + generic modal system */
.personalia-toolbar{padding:14px 20px}.toolbar-actions{display:flex;flex-wrap:wrap;gap:8px}.toolbar-actions .btn{padding:8px 13px;font-size:13px}.toolbar-actions .btn.primary{font-weight:800}
.toolbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.toolbar-row input[type="search"],.toolbar-row select{min-height:38px;width:auto;flex:1 1 160px}.toolbar-row .btn{padding:8px 13px;font-size:13px;white-space:nowrap}
.master-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.master-col h4{margin:0 0 10px}.master-col .toolbar-row{margin-bottom:10px}
.icon-btn{border:0;background:#eaf1fb;color:var(--navy);width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1;display:inline-grid;place-items:center}.icon-btn.danger{background:#ffeaea;color:var(--danger)}.icon-btn:hover{filter:brightness(.95)}
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(6,10,18,.6);display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,16px) 16px env(safe-area-inset-bottom,16px)}
.modal-card{background:var(--modal-bg);border-radius:16px;width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.modal-card.modal-small{max-width:420px}.modal-card.modal-medium{max-width:560px}.modal-card.modal-large{max-width:760px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:19px}.modal-head-copy{display:flex;align-items:center;gap:12px;min-width:0}.modal-subtitle{margin:3px 0 0;color:var(--muted);font-size:13px}.android-modal-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--notice-bg);color:var(--primary);font-size:19px;font-weight:900;flex:0 0 auto}.android-release-modal{display:grid;gap:22px}.android-release-section{display:grid;gap:10px}.android-release-section h4{margin:0;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--muted)}.android-info-grid,.android-signing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.android-info-wide{grid-column:1/-1}.android-info-item{display:grid;gap:5px;min-width:0}.android-info-item>span,.android-field-label,.android-release-meta>span{font-size:12px;color:var(--muted);font-weight:700}.android-info-item>strong{font-size:15px;overflow-wrap:anywhere}.android-package-input{width:100%;min-height:44px}.android-technical-value,.android-release-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow-wrap:anywhere}.android-signing-note{margin-top:2px}.android-release-state{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted)}.android-release-state strong{font-size:15px}.android-release-state p{margin:4px 0 0;font-size:13px}.android-release-meta{display:grid;gap:5px}.android-release-meta code{display:block;padding:10px 12px;border-radius:8px;background:var(--input-bg);border:1px solid var(--line)}.android-release-empty{padding:14px 16px;border:1px dashed var(--line);border-radius:12px}.android-release-empty strong{font-size:15px}.android-release-empty p{margin:4px 0 0}.android-modal-actions{border-top:1px solid var(--line);padding-top:18px;margin-top:0;gap:10px;flex-wrap:wrap}.modal-overlay{background:rgba(6,10,18,.72);backdrop-filter:blur(2px)}

.modal-close{width:34px;height:34px;border-radius:50%;border:0;background:var(--surface-muted);color:var(--text);font-size:19px;line-height:1;cursor:pointer}
.modal-body{padding:18px 20px;overflow:auto}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
@media(max-width:480px){.modal-head{padding:16px}.modal-body{padding:16px}.android-info-grid,.android-signing-grid{grid-template-columns:1fr}.android-info-wide{grid-column:auto}.android-release-state{flex-direction:column;gap:9px}.android-modal-actions{flex-direction:column-reverse;align-items:stretch}.android-modal-actions .btn{width:100%}.modal-overlay{padding:8px}.modal-card{max-height:96vh;border-radius:12px}.modal-card.modal-small,.modal-card.modal-medium,.modal-card.modal-large{max-width:100%}.master-cols{grid-template-columns:1fr}.toolbar-row{flex-direction:column;align-items:stretch}.toolbar-row input[type="search"],.toolbar-row select{flex:1 1 auto}}
@media(max-width:900px){.master-cols{grid-template-columns:1fr}}

/* ---- v0.4.3 shell UX: collapsible sidebar, mobile drawer, topbar utility
   cluster (language/theme/user dropdown), dark theme coverage for the
   pieces above, z-index stack. Appended after the base rules so these win
   on equal specificity without needing to hand-edit every earlier rule. */
:root{--sidebar-w:250px;--z-content:1;--z-shell:5;--z-drawer-backdrop:15;--z-sidebar-drawer:20;--z-dropdown:60;--z-modal-overlay:300}
@media(prefers-reduced-motion:no-preference){.app-shell{transition:grid-template-columns .2s ease}.sidebar{transition:width .2s ease,transform .2s ease}.nav-label{transition:opacity .15s ease}}
.app-shell{grid-template-columns:var(--sidebar-w) 1fr}
.sidebar{width:var(--sidebar-w);z-index:var(--z-shell)}
.sidebar nav button{display:flex;align-items:center;gap:12px;white-space:nowrap;overflow:hidden}
.nav-icon{flex:0 0 auto}
.nav-label{overflow:hidden}
.brand-text{overflow:hidden;white-space:nowrap}
#sidebarBackdrop{position:fixed;inset:0;background:rgba(6,10,18,.5);z-index:var(--z-drawer-backdrop)}
.sidebar-backdrop.hidden{display:none}

/* Desktop collapse: icons only, labels visually hidden but still in the
   accessibility tree (width:0 + overflow:hidden, not display:none) - a
   native title attribute (set in decorateNavIcons) gives the hover tooltip. */
body.sidebar-collapsed{--sidebar-w:72px}
body.sidebar-collapsed .nav-label,body.sidebar-collapsed .brand-text{width:0;opacity:0;margin:0}
body.sidebar-collapsed .sidebar nav button{justify-content:center}
body.sidebar-collapsed .brand{justify-content:center;padding-left:0;padding-right:0}

.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-icon-btn{width:38px;height:38px;border-radius:10px;background:var(--surface-muted);color:var(--text);display:inline-grid;place-items:center;border:0;cursor:pointer}
.topbar-icon-btn:hover{filter:brightness(.96)}
.topbar-icon-btn:focus-visible,.icon-btn:focus-visible,.modal-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.topbar-right{display:flex;align-items:center;gap:14px}
.utility-cluster{display:flex;align-items:center;gap:8px}
#themeIconMoon.hidden,#themeIconSun.hidden{display:none}

.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--dropdown-bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:0;z-index:var(--z-dropdown);padding:6px;display:grid;gap:2px}
.dropdown-menu.hidden{display:none}.lang-dropdown #langMenu,.dropdown #langMenu{width:146px;min-width:146px;max-width:180px}.lang-current{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.lang-flag{width:20px;height:14px;display:block;flex:0 0 20px;border-radius:1px;overflow:hidden}.lang-toggle{width:42px;height:42px}.lang-option{display:grid;grid-template-columns:16px 24px 1fr;align-items:center;gap:6px;min-width:112px}.lang-option-check{color:var(--primary);font-weight:900;text-align:center}.lang-option strong{font-size:12px;letter-spacing:.05em}.lang-option.active{background:var(--surface-muted)}

.dropdown-item{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--text);font-size:14px;width:100%}
.dropdown-item:hover{background:var(--surface-muted)}
.dropdown-item.danger{color:var(--danger)}
.dropdown-user-head{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.dropdown-user-name{font-weight:750;font-size:14px}
.dropdown-user-role{color:var(--text-muted)}
.user-menu-btn{border:0;background:transparent;cursor:pointer;padding:0}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#74adff);color:#fff;display:inline-grid;place-items:center;font-weight:800;font-size:14px}
.profile-photo-preview{width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--surface-muted);display:grid;place-items:center;border:1px solid var(--border)}.profile-photo-img{width:100%;height:100%;object-fit:cover}.avatar-large{width:80px;height:80px;font-size:22px}.avatar-photo{object-fit:cover;background:var(--surface-muted)}
.profile-layout{display:grid;gap:18px;min-width:0}.profile-data-card,.profile-photo-card,.face-profile-card{min-width:0}.profile-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;min-width:0}.profile-data-field{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}.profile-data-label{color:var(--muted);font-size:12px;font-weight:650;line-height:1.3}.profile-data-value{color:var(--text);font-size:14px;line-height:1.45;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}.profile-photo-form{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:0}.profile-photo-preview{grid-row:span 2;width:96px;height:96px}.profile-photo-form .row-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.profile-photo-hint{margin:0;line-height:1.45}.profile-helper{margin-top:14px;max-width:460px;line-height:1.5}.face-profile-layout{display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr);align-items:start;gap:20px;min-width:0}.face-profile-photo{width:100%;aspect-ratio:3/4;min-width:0;border-radius:14px;overflow:hidden;background:var(--card-alt,#f1f1f4);display:flex;align-items:center;justify-content:center}.face-profile-photo img{width:100%;height:100%;object-fit:cover;display:none}.face-profile-photo .muted{font-size:12px;text-align:center;padding:8px}.face-profile-empty{border:1px dashed var(--border)}.face-profile-info{display:grid;gap:13px;min-width:0}.face-profile-info .profile-data-value .badge{align-self:flex-start}.face-profile-notice{font-size:12px;line-height:1.5}.face-profile-card>.btn{margin-top:14px}
@media(max-width:600px){.profile-data-grid{gap:14px}.profile-layout{gap:14px}.profile-photo-card,.face-profile-card,.profile-data-card{padding:16px}.profile-photo-preview{width:88px;height:88px}.profile-photo-form{grid-template-columns:auto minmax(0,1fr)}}
@media(max-width:350px){.profile-data-grid{grid-template-columns:1fr}.face-profile-layout{grid-template-columns:1fr;gap:14px}.face-profile-photo{width:132px;max-width:100%;justify-self:start}}


/* Mobile off-canvas drawer (<=768px): distinct from desktop collapse - full
   labeled nav sliding in over content with a backdrop, not a shrink rail. */
@media(max-width:768px){
  .app-shell{display:block;grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:var(--z-sidebar-drawer);left:0;top:0;bottom:0;width:min(280px,84vw);height:100dvh;transform:translateX(-100%);padding:18px 14px}
  body.sidebar-drawer-open .sidebar{transform:translateX(0)}
  body.sidebar-collapsed .nav-label,body.sidebar-collapsed .brand-text{width:auto;opacity:1;margin:initial}
  body.sidebar-collapsed .sidebar nav button{justify-content:flex-start}
  body.sidebar-collapsed .brand{justify-content:flex-start;padding-left:6px;padding-right:6px}
  .topbar{height:76px;padding:0 16px}
  .topbar h2{font-size:20px}
  .topbar p{display:none}
  .content{padding:15px}
  .grid.cards,.grid.two,.form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .card{padding:16px}
  .clock{font-size:36px}
  .domain-tabs{padding:8px 16px}
  .utility-cluster .dropdown-menu:not(#langMenu){position:absolute;left:auto;right:0;top:calc(100% + 8px);min-width:0}.utility-cluster #langMenu{position:absolute;left:auto;right:0;top:calc(100% + 8px);min-width:146px;width:146px}
}

/* Leaflet map picker: brighten tiles and restyle the marker/popup chrome so
   the map stays legible on the dark surface without a second map library. */
[data-theme="dark"] .map-canvas .leaflet-tile{filter:brightness(.8) contrast(1.05)}
[data-theme="dark"] .map-canvas .leaflet-control,[data-theme="dark"] .map-canvas .leaflet-bar a{background:var(--surface-muted);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .map-modal-card{background:var(--modal-bg);color:var(--text)}
[data-theme="dark"] .badge{filter:brightness(.95)}
[data-theme="dark"] .btn.secondary{background:var(--surface-muted);color:var(--text)}
[data-theme="dark"] .icon-btn{background:var(--surface-muted);color:var(--text)}
[data-theme="dark"] .login-card{background:#161d2b;color:var(--text)}
[data-theme="dark"] .login-card p{color:var(--text-muted)}
/* M13.2: dark-mode form/native-control audit - code chips, disabled/readonly
   fields and Chrome's autofill overlay all defaulted to browser/light
   colors regardless of [data-theme], producing the reported white strips
   (Generate Aplikasi Android's Package ID/App URL) and a yellow autofill
   band. Everything below is additive to the existing input/select/textarea
   rule (which already uses var(--input-bg)/var(--text)) - no control lost
   its base theming, these just cover the states that browsers style
   themselves. */
code{background:var(--surface-muted);color:var(--text);border:1px solid var(--border)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-muted);color:var(--text-muted);border-color:var(--border);opacity:1;cursor:not-allowed}
input:read-only:not([type=checkbox]):not([type=radio]),textarea:read-only{background:var(--surface-muted);color:var(--text)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px var(--input-bg) inset;-webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;caret-color:var(--text);transition:background-color 9999s ease-in-out 0s}
input,select{color-scheme:light}
[data-theme="dark"] input,[data-theme="dark"] select{color-scheme:dark}
input[type=number]{-moz-appearance:textfield}

/* Kehadiran consolidated page: compact summary strip (replaces the old
   12-large-KPI-card grid) - reuses .card/.badge/.toolbar-row tokens, so it
   is dark-mode-aware for free. */
.summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
/* Base stat-card visuals are UNSCOPED so every KPI grid (Dashboard's
   .dashboard-kpi-grid included, not just .summary-strip) gets the same
   theme-token surface - previously this rule was scoped to
   ".summary-strip .stat-card" only, so Dashboard's KPI tiles fell through
   to unstyled browser-default buttons (white/"belang" in dark mode). */
.stat-card{background:var(--surface-muted);border:1px solid var(--border);border-radius:12px;padding:10px 12px;text-align:center;cursor:pointer;font:inherit;color:var(--text)}
.stat-card:hover{filter:brightness(.97)}
.stat-card .n{font-size:20px;font-weight:800}
.stat-card .l{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}

/* System settings controls: real checkbox remains keyboard/accessibility source of truth. */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;font-weight:650}
.switch-input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.switch{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto;cursor:pointer}
.switch::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:var(--card);transition:transform .15s ease}
.switch-input:checked + .switch{background:var(--ok)}
.switch-input:checked + .switch::after{transform:translateX(18px)}
.switch-input:focus-visible + .switch{outline:2px solid var(--primary);outline-offset:3px}
input[type=file]{padding:8px;background:var(--input-bg);color:var(--text);border-color:var(--border)}
.system-settings-card{width:100%}

.master-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.master-heading h4{margin:0}.icon-btn.primary{background:var(--primary);color:#fff}.page-size{display:flex;align-items:center;gap:6px;white-space:nowrap}.page-size select{min-height:38px;width:auto;flex:0 0 auto}.pa-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px 0;color:var(--muted);font-size:13px}.pa-pagination>div{display:flex;align-items:center;gap:8px}.pa-page-number{min-width:52px;text-align:center}.password-mode{display:flex;gap:16px;border:1px solid var(--border);border-radius:11px;padding:10px 12px}.password-mode legend{font-weight:700;padding:0 5px}.password-mode label{display:flex;align-items:center;gap:6px;font-weight:600}.password-mode input{width:auto;min-height:auto}
@media(max-width:600px){.pa-pagination{align-items:flex-start;flex-direction:column}.pa-pagination>div{align-self:flex-end}.personalia-toolbar-row{gap:7px}.personalia-toolbar-row label,.personalia-toolbar-row select,.personalia-toolbar-row input{width:100%;flex:1 1 100%}.personalia-toolbar-row .icon-btn{align-self:flex-start}#paPeopleTableWrap .table-wrap table th:nth-child(1),#paPeopleTableWrap .table-wrap table td:nth-child(1),#paPeopleTableWrap .table-wrap table th:nth-child(4),#paPeopleTableWrap .table-wrap table td:nth-child(4),#paPeopleTableWrap .table-wrap table th:nth-child(6),#paPeopleTableWrap .table-wrap table td:nth-child(6),#paPeopleTableWrap .table-wrap table th:nth-child(7),#paPeopleTableWrap .table-wrap table td:nth-child(7),#paPeopleTableWrap .table-wrap table th:nth-child(8),#paPeopleTableWrap .table-wrap table td:nth-child(8){display:none}}

/* M9 Dashboard: TREN KEHADIRAN chart (native SVG, no chart library) */
.segmented{display:flex;gap:4px;flex-wrap:wrap}
.seg-btn{border:1px solid var(--border);background:var(--surface-muted);color:var(--text);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:750;cursor:pointer}
.seg-btn[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.trend-legend{display:flex;gap:16px;flex-wrap:wrap;margin:2px 0 12px;font-size:12px;color:var(--text-muted)}
.legend-item{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.trend-body{min-height:80px}
.trend-chart-wrap{position:relative}
.trend-tooltip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.6;box-shadow:var(--shadow);white-space:nowrap;transform:translate(-50%,-100%);z-index:5}
.trend-tooltip .legend-dot{margin-right:5px}
.trend-tooltip-date{font-weight:750;margin-bottom:3px}
@media(max-width:600px){.trend-legend{gap:10px}}

/* Global notification bell (replaces the removed "Online" indicator) */
/* Approval bell is visible only in the Admin shell profiles that support this shared header: Web Desktop, Web Mobile, and Android. */
#notifDropdown{display:none!important}
html[data-ui-profile="android-app"] body.admin-shell #notifDropdown,
html[data-ui-preview="android"] body.admin-shell #notifDropdown{display:block!important}
html[data-ui-profile="android-app"] #langMenu,
html[data-ui-preview="android"] #langMenu{display:none!important}
#notifBtn{position:relative}
.notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center}
.notif-dropdown{width:min(320px,calc(100vw - 24px));min-width:0;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto}
.notif-section-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;padding:6px 10px 2px}
.notif-item{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:8px 10px}
.notif-icon{flex:0 0 auto;font-size:16px;line-height:1.3}
.notif-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-title{font-size:13px;font-weight:650;white-space:normal}
.notif-item.notif-unread{background:var(--surface-muted)}
.notif-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:5px}
.notif-date{font-size:11px;color:var(--text-muted)}
.notif-empty{padding:16px 10px;text-align:center;color:var(--text-muted);font-size:13px}

/* Final dashboard and attendance polish - 10 KPIs, fixed 5+5 on desktop */
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dashboard-kpi-card{padding:14px}
.dashboard-kpi-grid .stat-card{min-height:70px}
.toolbar-icon-btn{width:36px;height:36px;font-size:18px;font-weight:800;background:var(--surface-muted);color:var(--text)}
.toolbar-icon-btn:hover{background:var(--notice-bg);color:var(--primary);filter:none}
@media(max-width:1000px){.dashboard-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar-row{gap:7px}.toolbar-row .toolbar-icon-btn{align-self:flex-start}}

/* M11: canonical icon-only action button, used by every table/toolbar icon */
.action-icon-btn{flex:0 0 auto}
.action-icon-btn:focus-visible{outline:2px solid #72a8ef;outline-offset:1px}
.action-icon-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.trend-period select{min-height:36px;padding:6px 10px;font-size:13px}

/* M11: Jadwal calendar modal */
.cal-header{display:flex;align-items:center;gap:10px}
.cal-month-label{font-size:15px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid-head{margin-bottom:2px}
.cal-weekday{text-align:center;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.cal-cell{aspect-ratio:1/1;border:1px solid var(--border);border-radius:8px;background:var(--surface-muted);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:inherit;padding:2px;min-height:44px}
.cal-cell:hover{filter:brightness(.97)}
.cal-cell-empty{background:transparent;border-color:transparent;cursor:default}
.cal-day{font-size:12px;font-weight:700}
.cal-shift{font-size:9px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-dot{width:6px;height:6px;border-radius:50%}
.cal-status-SCHEDULED .cal-dot{background:var(--ok)}
.cal-status-DAY_OFF .cal-dot{background:var(--text-muted)}
.cal-status-HOLIDAY .cal-dot{background:var(--warn)}
@media(max-width:480px){.cal-shift{display:none}.cal-cell{min-height:36px}}
@media(max-width:600px){.brand-asset-grid{grid-template-columns:1fr}.brand-asset-row{flex-direction:column}.brand-asset-row>.brand-card.compact{flex-basis:auto}}

/* M12: all-employee workforce roster (desktop matrix) */
.modal-card.modal-xlarge{max-width:96vw;width:96vw}
html[data-ui-profile="desktop"] .modal-card.modal-xlarge{max-width:92vw;width:92vw}
.roster-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.roster-toolbar input[type="search"]{flex:1 1 160px;min-width:120px}
.roster-month-label{font-weight:700;min-width:150px;text-align:center}
.roster-scroll{overflow:auto;border:1px solid var(--border);border-radius:10px;max-height:60vh}
.roster-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px}
.roster-table th,.roster-table td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:0;text-align:center}
.roster-th-corner,.roster-th-emp{position:sticky;left:0;z-index:3;background:var(--surface);text-align:left}
.roster-th-corner{top:0;z-index:4}
.roster-th-date{position:sticky;top:0;z-index:2;background:var(--surface);min-width:56px;padding:4px 2px}
.roster-th-date.is-today{background:color-mix(in srgb, var(--primary) 12%, var(--surface))}
.roster-th-date.is-weekend .roster-date-num{color:var(--text-muted)}
.roster-date-num{font-weight:700;font-size:12px;display:block}
.roster-date-dow{font-size:9px;color:var(--text-muted);text-transform:uppercase}
.roster-emp-cell{position:sticky;left:0;z-index:1;background:var(--surface);padding:6px 10px;min-width:170px;max-width:220px;text-align:left}
.roster-emp-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.roster-emp-sub{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.roster-cell{padding:0}
.roster-cell-btn{width:100%;height:100%;min-height:38px;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;padding:4px}
.roster-cell-btn:hover{filter:brightness(.95);background:var(--surface-muted)}
.roster-pill{font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;white-space:nowrap;max-width:64px;overflow:hidden;text-overflow:ellipsis}
.roster-pill-shift{background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary)}
.roster-pill-dayoff{background:var(--surface-muted);color:var(--text-muted)}
.roster-pill-holiday{background:color-mix(in srgb, var(--warn) 20%, transparent);color:var(--warn)}
.roster-pill-noshift{color:var(--text-muted)}
.roster-col.is-today{background:color-mix(in srgb, var(--primary) 6%, transparent)}
.roster-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11px;color:var(--text-muted)}
.roster-legend-item{display:flex;align-items:center;gap:5px}
.roster-legend-dot{width:8px;height:8px;border-radius:50%}
.roster-pager{display:flex;align-items:center;gap:8px;margin-top:10px;justify-content:flex-end;font-size:12px}
/* M12: mobile roster - employee-first list, never the desktop matrix */
.roster-mobile-list{display:flex;flex-direction:column;gap:10px}
.roster-mobile-emp{border:1px solid var(--border);border-radius:10px;padding:10px}
.roster-mobile-emp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.roster-mobile-days{display:flex;flex-direction:column;gap:2px}
.roster-mobile-day-row{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;border-radius:6px}
.roster-mobile-day-row:active{background:var(--surface-muted)}
@media(max-width:820px){
  .modal-card.modal-xlarge{width:100%;max-width:100%;max-height:100vh;border-radius:0}
  .roster-toolbar{flex-direction:column;align-items:stretch}
}

/* M12.1: [Kalender] [Roster] planner tabs + monthly calendar grid */
.planner-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.planner-tabs{display:flex;gap:4px;background:var(--surface-muted);border-radius:10px;padding:3px}
.planner-tab{border:0;background:transparent;padding:7px 16px;border-radius:8px;font:inherit;font-weight:600;color:var(--text-muted);cursor:pointer}
.planner-tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.planner-actions{display:flex;gap:8px;flex-wrap:wrap}

.pcal-layout{display:flex;gap:16px;align-items:flex-start}
.pcal-main{flex:1 1 auto;min-width:0}
.pcal-detail{flex:0 0 300px;border:1px solid var(--border);border-radius:10px;padding:14px;max-height:70vh;overflow:auto}
.pcal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.pcal-weekday{text-align:center;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.pcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:4px}
.pcal-cell{border:1px solid var(--border);border-radius:10px;background:var(--surface-muted);min-height:76px;padding:6px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;font:inherit;color:var(--text);text-align:left}
.pcal-cell:hover{filter:brightness(.97)}
.pcal-cell-empty{background:transparent;border-color:transparent;cursor:default}
.pcal-cell.is-today{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.pcal-cell.is-selected{background:color-mix(in srgb, var(--primary) 14%, var(--surface-muted));border-color:var(--primary)}
.pcal-cell.is-holiday{background:color-mix(in srgb, var(--warn) 10%, var(--surface-muted))}
.pcal-daynum{font-weight:700;font-size:13px}
.pcal-holiday-tag{font-size:9px;font-weight:700;color:var(--warn);text-transform:uppercase}
.pcal-badges{display:flex;flex-wrap:wrap;gap:3px}
.pcal-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:999px;white-space:nowrap}
.pcal-badge-shift{background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary)}
.pcal-badge-dayoff{background:var(--surface);color:var(--text-muted)}
.pcal-badge-muted{background:var(--surface);color:var(--text-muted)}
.pcal-detail-head{margin-bottom:8px}
.pcal-detail-search{margin-bottom:8px}
.pcal-detail-group{margin-bottom:12px}
.pcal-detail-group h4{margin:0 0 4px;font-size:13px}
.pcal-detail-row{display:flex;justify-content:space-between;padding:6px 4px;border-radius:6px;cursor:pointer}
.pcal-detail-row:hover{background:var(--surface-muted)}
.pcal-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;position:sticky;bottom:0;background:var(--card);padding-top:8px}
.pcal-preview-month{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:6px}
@media(max-width:820px){
  .pcal-layout{flex-direction:column}
  .pcal-detail{flex-basis:auto;width:100%;max-height:none;overflow:visible}
  .pcal-detail-actions{position:static}
  .pcal-cell{min-height:58px}
}

/* M11: global authenticated-app footer + login-screen footer, one string */
.app-footer{padding:14px 26px;text-align:center;color:var(--text-muted);font-size:12px;border-top:1px solid var(--border)}
.login-footer{margin-top:22px;text-align:center;color:rgba(255,255,255,.65);font-size:12px;position:relative;z-index:1}

/* --------------------------------------------------------------------- */
/* M11.1: responsive UI profile density tokens. Base (unscoped) values
   stay exactly what they were (mobile-web/android-app default footprint);
   [data-ui-profile="desktop"] overrides widen content and enlarges
   controls/typography so desktop/laptop no longer looks miniature. No
   zoom/transform-scale anywhere - real box-model/typography changes only. */
/* --------------------------------------------------------------------- */
/* M11.3 ROOT-CAUSE FIX: .content is a flex-column ITEM of .main (see
   .main{display:flex;flex-direction:column}) - it previously carried
   `margin:0 auto`, which per the CSS Flexbox spec makes an item's AUTO
   cross-axis margins absorb free space INSTEAD OF the default
   align-items:stretch behavior. That silently shrank .content to a
   shrink-to-fit width driven by its own children's intrinsic content
   width (proven live: Dashboard 1064px, Pengajuan 711px, Personalia
   1402px, Sistem 975px, all at the same 1920px viewport, all with
   max-width raised to 1800px and NOT the limiting factor) - explaining
   why every past max-width edit had zero visible effect. Fixed by
   dropping the auto margins entirely so the item stretches to fill
   `.main` by default; the desktop-only cap below uses PADDING (not
   margin) to stay clear of the same flex/grid auto-margin trap. */
html[data-ui-profile="desktop"] .content{padding:32px}
@media(min-width:1900px){
  html[data-ui-profile="desktop"] .content{padding-left:max(32px, calc((100% - 1800px)/2));padding-right:max(32px, calc((100% - 1800px)/2))}
}
html[data-ui-profile="desktop"] table{font-size:14.5px}
html[data-ui-profile="desktop"] th,html[data-ui-profile="desktop"] td{padding:14px 16px}
html[data-ui-profile="desktop"] .card{padding:24px}
html[data-ui-profile="desktop"] input,html[data-ui-profile="desktop"] select,html[data-ui-profile="desktop"] textarea{min-height:42px;font-size:14.5px}
html[data-ui-profile="desktop"] .icon-btn{width:36px;height:36px}
html[data-ui-profile="desktop"] .icon-btn svg{width:19px;height:19px}
html[data-ui-profile="desktop"] .toolbar-icon-btn{width:40px;height:40px}
html[data-ui-profile="desktop"] .section-title h3{font-size:19px}
html[data-ui-profile="desktop"] .topbar h2{font-size:26px}
html[data-ui-profile="desktop"] .topbar p{font-size:14px}
html[data-ui-profile="desktop"] .dashboard-kpi-card{padding:20px}
html[data-ui-profile="desktop"] .dashboard-kpi-grid{gap:16px}
html[data-ui-profile="desktop"] .dashboard-kpi-grid .stat-card{min-height:100px;padding:18px}
html[data-ui-profile="desktop"] .dashboard-kpi-grid .stat-card .n{font-size:28px}
html[data-ui-profile="desktop"] .dashboard-kpi-grid .stat-card .l{font-size:12.5px}
html[data-ui-profile="desktop"] .trend-chart-wrap svg{min-height:380px}
html[data-ui-profile="desktop"] .toolbar-row{gap:12px}
html[data-ui-profile="desktop"] .toolbar-row input[type="search"],
html[data-ui-profile="desktop"] .toolbar-row select{flex:1 1 200px}
html[data-ui-profile="desktop"] .badge{font-size:12px;padding:6px 10px}
html[data-ui-profile="desktop"] .modal-card.modal-small{max-width:460px}
html[data-ui-profile="desktop"] .modal-card.modal-medium{max-width:620px}
html[data-ui-profile="desktop"] .modal-card.modal-large{max-width:860px}
html[data-ui-profile="desktop"] .notice{font-size:13.5px}

/* M11.4: dedicated mobile presentation for Personalia/Sistem (JS-decided
   via isMobileViewport(), not a CSS table->block hack - proven unreliable
   on a real device). No @media needed here - the JS only emits this
   markup below the breakpoint in the first place. */
.pa-card-list{display:grid;gap:10px}
.pa-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface)}
.pa-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:16px}
.pa-card-sub{font-size:13px;margin-top:2px}
.pa-card-fields{display:grid;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:13px}
.pa-card-fields>div{display:flex;justify-content:space-between;gap:10px}
.pa-card-fields .muted{flex:0 0 auto}
.pa-card-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}

.sys-card-list{display:grid;gap:10px}
.sys-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface)}
.sys-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.sys-card-head h4{margin:0;font-size:15px;font-weight:650}
.sys-card-summary{font-size:13.5px;color:var(--text);margin-top:8px}
.sys-card-updated{font-size:12.5px;color:var(--text-muted);margin-top:6px}

/* 0.4.3 M12.3 PART D/AU/AV: Atur Jadwal month blocks - one compact inline
   [+][Shift][Tanggal][trash] unit per shift row, never a detached full-width
   "+ Tambah Shift" button. Wraps cleanly at narrow (360-430px) widths. */
.sched-month-block{border:1px solid var(--border)}
.sched-shift-rows{display:grid;gap:8px}
.sched-shift-row{display:grid;grid-template-columns:auto minmax(110px,1fr) minmax(140px,2fr) auto;gap:8px;align-items:center}
.sched-shift-row select,.sched-shift-row input{min-height:40px}
@media(max-width:480px){
  .sched-shift-row{grid-template-columns:auto 1fr auto;grid-template-areas:"add shift trash" "days days days"}
  .sched-shift-row .sr-add{grid-area:add}
  .sched-shift-row .sr-shift{grid-area:shift}
  .sched-shift-row .sr-remove{grid-area:trash}
  .sched-shift-row .sr-days{grid-area:days}
}

/* 0.4.3 M13: ONE canonical EMPLOYEE app shell - bottom navigation (exactly
   5 items), no sidebar, centered app-like content. Applies identically on
   desktop web, mobile web, installed PWA, and the Android APK/TWA - gated
   purely by body.employee-shell (role===EMPLOYEE, onboarding complete),
   never by uiProfile/viewport width. ADMIN/FINANCE are never affected. */
body.employee-shell .sidebar,
body.employee-shell #sidebarBackdrop,
body.employee-shell #sidebarToggle,
body.employee-shell #domainTabs { display:none !important; }
body.employee-shell .app-shell { grid-template-columns: 1fr; }
body.employee-shell .topbar { padding: 0 16px; height:64px; }
body.employee-shell .topbar h2 { font-size:19px; }
body.employee-shell .topbar p { display:none; }
body.employee-shell .content {
  max-width: 720px; margin: 0 auto; width: 100%;
  padding: 16px;
}
body.employee-shell .app-footer { display:none; }

/* Employee "app-like" surfaces: fewer/simpler cards, no admin-scale tables. */
.emp-hero { text-align:center; padding:22px 18px; }
.emp-hero .emp-greeting { font-size:19px; font-weight:800; }
.emp-hero .emp-date { color:var(--muted); margin-top:2px; font-size:13.5px; }
.emp-section-label { font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.emp-shift-name { font-size:20px; font-weight:850; }
.emp-shift-time { color:var(--muted); font-size:14px; margin-top:2px; }
.emp-shift-loc { color:var(--muted); font-size:13px; margin-top:2px; }
.emp-libur-badge { display:inline-block; padding:5px 14px; border-radius:999px; background:var(--surface-muted); color:var(--text-muted); font-weight:800; letter-spacing:.04em; margin:6px 0; }
.emp-cta-btn { width:100%; max-width:320px; margin:16px auto 0; display:block; padding:15px; font-size:15.5px; border-radius:14px; }
.emp-summary-row { display:flex; justify-content:center; gap:26px; margin-top:16px; flex-wrap:wrap; }
.emp-summary-row .item { text-align:center; }
.emp-summary-row .item .l { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.emp-summary-row .item .v { font-size:17px; font-weight:800; margin-top:2px; }
.emp-tabs { display:flex; gap:8px; margin-bottom:14px; }
.emp-tabs button { flex:1; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); padding:10px; border-radius:11px; font-weight:750; cursor:pointer; }
.emp-tabs button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.attendance-history-card{width:100%;max-width:900px;margin:0 auto}
.attendance-history-filter{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;width:max-content;max-width:100%;margin:-4px 0 13px;white-space:nowrap}
.attendance-history-filter>.ui-icon{width:17px;height:17px;flex:0 0 17px;color:var(--muted)}
.attendance-history-date-control{display:flex;align-items:center;flex:0 0 140px;min-width:140px}
.attendance-history-filter input{box-sizing:border-box;width:140px;min-width:140px;padding:8px 5px;font-size:13px}.attendance-history-filter input[type="date"]{min-width:140px}
.attendance-history-dash{color:var(--muted);font-weight:800}
.attendance-history-filter .btn{padding:9px 10px;font-size:12px}.attendance-history-search{width:36px;height:38px;flex:0 0 36px;display:grid;place-items:center;padding:0!important;border-radius:9px}.attendance-history-search .ui-icon{width:18px;height:18px}.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.attendance-history-body{max-height:390px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px}
.attendance-history-row{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;background:var(--surface)}.attendance-history-row:last-child{margin-bottom:0}
.attendance-history-date{font-weight:800;font-size:13px;margin-bottom:10px}.attendance-history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
@media(max-width:600px){.attendance-history-filter{gap:4px}.attendance-history-date-control{flex-basis:128px;min-width:128px}.attendance-history-filter input,.attendance-history-filter input[type="date"]{width:128px;min-width:128px;padding-left:4px;padding-right:4px;font-size:12px}.attendance-history-search{width:34px;flex-basis:34px;height:36px}.attendance-history-body{max-height:360px}.attendance-history-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:340px){.attendance-history-filter{gap:3px}.attendance-history-date-control{flex-basis:120px;min-width:120px}.attendance-history-filter input,.attendance-history-filter input[type="date"]{width:120px;min-width:120px;padding-left:3px;padding-right:3px}.attendance-history-search{width:32px;flex-basis:32px}.attendance-history-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}}

.emp-history-card { border:1px solid var(--border); border-radius:14px; padding:13px 14px; margin-bottom:10px; background:var(--surface); }
.emp-history-card .date { font-weight:800; font-size:13.5px; }
.emp-history-card .shift { color:var(--muted); font-size:12.5px; margin-top:1px; }
.emp-history-card .status-row { margin-top:8px; min-height:0; }
.activity-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin-top:11px; min-width:0; }
.activity-detail-field { display:flex; flex-direction:column; gap:4px; min-width:0; max-width:100%; }
.activity-detail-label { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11.5px; font-weight:650; line-height:1.3; min-width:0; }
.activity-detail-label .status-svg { width:16px; height:16px; flex:0 0 16px; }
.activity-detail-label .ui-icon,.activity-detail-value .ui-icon{width:17px;height:17px;flex:0 0 17px;vertical-align:-3px}.activity-detail-value .ui-icon{margin-right:4px}.history-value-bad{color:var(--danger,#b42318)}.history-value-warn{color:var(--warning,#9a6700)}
.activity-detail-value { color:var(--text); font-size:13px; font-weight:650; line-height:1.45; min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal; }
.activity-detail-value .badge { font-size:10px; padding:4px 7px; vertical-align:top; }
.emp-request-card { border:1px solid var(--border); border-radius:14px; padding:13px 14px; margin-bottom:10px; background:var(--surface); cursor:pointer; }
.emp-request-card .type { font-weight:800; font-size:13.5px; }
.request-detail-grid { margin-top:10px; gap:12px 18px; }
@media(max-width:340px){ .activity-detail-grid { grid-template-columns:1fr; } }


/* M16 canonical status/icon language. Icons are CSS/SVG surfaces, never emoji. */
.status-icon { display:inline-block; width:10px; height:10px; border-radius:50%; background:currentColor; vertical-align:middle; margin-right:5px; }
.status-icon.status-ok { color:#16834b; } .status-icon.status-warn { color:#b87900; } .status-icon.status-bad { color:#bd3030; } .status-icon.status-muted { color:var(--muted); }
.emp-history-event { display:flex; align-items:flex-start; gap:5px; } .emp-history-event .status-icon { flex:0 0 auto; margin-top:5px; }
.emp-task-card { text-align:left; } .task-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.task-card-header h3{margin:0}.task-card-header p{margin:4px 0 0;color:var(--muted);font-size:12px}.task-create-btn{flex:0 0 42px;width:42px;height:42px;padding:0;white-space:nowrap;margin:0;display:grid;place-items:center;background:var(--surface-muted);color:var(--text);border:1px solid var(--border);border-radius:10px}.task-create-btn .ui-icon{width:19px;height:19px}.task-form-scroll{max-height:min(66vh,560px);overflow:auto;padding:2px 3px 4px 0}.task-create-form{display:grid;gap:8px}.task-create-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0}.task-create-form .form-field{min-width:0}.task-create-form input,.task-create-form select{min-height:42px}.task-create-form textarea{height:58px;min-height:58px;resize:vertical}.task-create-form .modal-actions{margin-top:0}.task-create-modal .modal-body{padding:14px 16px}.task-create-modal .modal-head{padding:14px 16px}.task-create-modal .modal-head h3{font-size:17px}@media(max-width:420px){.task-card-header{align-items:stretch;flex-direction:column}.task-create-btn{align-self:flex-start}}@media(max-width:340px){.task-create-row{grid-template-columns:1fr}} .emp-task-row { display:grid; gap:2px; padding:9px 0; border-bottom:1px solid var(--border); } .task-work-list{display:grid;gap:8px}.task-work-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;padding:11px 12px;text-align:left;color:var(--text);cursor:pointer;font:inherit}.task-work-row>span:first-child{display:grid;gap:3px;min-width:0}.task-work-row>span:first-child>span{overflow-wrap:anywhere}.task-work-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto}.task-work-meta small{color:var(--muted);white-space:nowrap}.task-work-row small{color:var(--muted);white-space:nowrap;flex:0 0 auto}
.emp-task-row:last-child { border-bottom:0; } .app-about-footer { margin:18px auto 0; text-align:center; color:var(--muted); font-size:12px; line-height:1.45; } .app-about-version,.app-about-copyright { display:block; } .app-about-copyright { margin-top:4px; font-size:11px; }


/* Shared bottom-nav visual component. Platform styles own geometry only. */
.android-bottom-nav { background:#101827; color:#cbd6e6; border-top:1px solid #27354a; }
.android-bottom-nav .android-nav-item { appearance:none; -webkit-appearance:none; border:0; outline:0; font:inherit; color:#aebbd0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:10px; cursor:pointer; transition:background .15s,color .15s,transform .15s ease-out; }
.android-bottom-nav .android-nav-item svg { width:22px; height:22px; flex:0 0 auto; }
.android-bottom-nav .android-nav-item:hover, .android-bottom-nav .android-nav-item:focus-visible { background:#172b49; color:#dbe9ff; }
.android-bottom-nav .android-nav-item.active { background:transparent; color:#7db0ff; }
.android-bottom-nav .android-nav-item:focus-visible { box-shadow:0 0 0 2px #7db0ff inset; }
.android-bottom-nav .android-nav-item svg { transition:transform .18s ease-out; }
.android-bottom-nav .android-nav-item:active svg { transform:scale(.96); }
@media (prefers-reduced-motion:reduce) { .android-bottom-nav .android-nav-item svg { transition:none; } }

@keyframes android-nav-icon-settle { 0% { transform:scale(.94); } 55% { transform:scale(1.08); } 100% { transform:scale(1); } }
.android-bottom-nav .android-nav-item.active svg { animation:android-nav-icon-settle .2s ease-out; }
@media (prefers-reduced-motion:reduce) { .android-bottom-nav .android-nav-item, .android-bottom-nav .android-nav-item.active svg { transition:none; animation:none; } }

.status-svg { width:18px; height:18px; max-width:24px; max-height:24px; flex:0 0 18px; color:#16834b; }
.status-svg.status-warn { color:#b87900; } .status-svg.status-bad { color:#bd3030; } .status-svg.status-muted { color:var(--muted); }
.emp-history-event { min-width:0; }

html[data-ui-preview="android"] body.employee-shell #userDropdown { display:none !important; }
html[data-ui-preview="android"] body.employee-shell::after { content:"Android UI Preview"; position:fixed; top:6px; left:50%; transform:translateX(-50%); z-index:120; font-size:10px; color:#91a8c8; pointer-events:none; opacity:.75; }

.admin-task-filters{display:flex;justify-content:flex-end;margin-top:12px}.admin-task-filters label{display:grid;gap:4px;font-size:12px;color:var(--muted)}.admin-task-filters select{min-width:150px}.admin-task-table-wrap{overflow:auto}.admin-task-table{min-width:980px}.admin-task-table th,.admin-task-table td{white-space:nowrap;vertical-align:middle}.admin-task-cards{display:none}.admin-task-card{width:100%;display:grid;gap:6px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-muted);color:var(--text);text-align:left;font:inherit}.admin-task-card-top,.admin-task-card-meta{display:flex;justify-content:space-between;gap:10px}.admin-task-card-type{font-weight:700}.admin-task-card-person{font-size:15px}.admin-task-card-meta,.admin-task-card-visit,.admin-task-card-source{font-size:12px;color:var(--muted)}.task-detail-copy{line-height:1.55;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-muted)}@media(max-width:760px){.admin-task-table-wrap{display:none}.admin-task-cards{display:grid;gap:8px}.admin-task-workspace{padding:12px}.admin-task-filters{justify-content:stretch}.admin-task-filters label,.admin-task-filters select{width:100%}}

/* Admin WhatsApp nested child dialogs and Create Group form. */
.nested-modal-overlay{z-index:320}
.wa-create-form{display:grid;gap:16px}
.wa-create-helper{margin:0;color:var(--muted);line-height:1.5}
.wa-create-form>label:not(.wa-create-confirm){display:grid;gap:7px;font-weight:700;color:var(--text)}
.wa-create-form>label:not(.wa-create-confirm) input{width:100%;margin-top:0}
.wa-create-confirm{display:flex;align-items:flex-start;gap:9px;font-weight:600;line-height:1.4;cursor:pointer}
.wa-create-confirm input{width:18px;height:18px;min-width:18px;min-height:18px;margin:2px 0 0;flex:0 0 18px;accent-color:var(--primary);cursor:pointer}
.wa-create-error{margin:0;padding:10px 12px;border:1px solid #ef9a9a;border-radius:9px;background:#fff0f0;color:#a32828;font-size:13px;line-height:1.4}
.wa-create-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.wa-create-actions .btn{min-width:112px}
.wa-create-actions .btn:disabled{opacity:.6;cursor:not-allowed;filter:none}

/* Admin attendance compact summary: presentation-only, shared by Admin web
   profiles and the Admin Android presentation. Employee remains excluded. */
.admin-shell .attendance-compact-table{table-layout:fixed;font-size:12px}
.admin-shell .attendance-compact-table th,.admin-shell .attendance-compact-table td{padding:9px 10px;white-space:normal;vertical-align:middle}
.admin-shell .attendance-compact-table th:nth-child(1){width:14%}.admin-shell .attendance-compact-table th:nth-child(2){width:13%}.admin-shell .attendance-compact-table th:nth-child(3),.admin-shell .attendance-compact-table th:nth-child(4){width:16%}.admin-shell .attendance-compact-table th:nth-child(5){width:11%}.admin-shell .attendance-compact-table th:nth-child(6){width:16%}.admin-shell .attendance-compact-table th:nth-child(7){width:11%}.admin-shell .attendance-compact-table th:nth-child(8){width:5%;text-align:center}
.attendance-cell-stack{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.25}.attendance-line{display:flex;align-items:center;gap:5px;min-width:0;line-height:1.25}.attendance-line>span:last-child{min-width:0;overflow-wrap:anywhere}.attendance-muted{color:var(--muted);font-size:11px}.attendance-status-icons{display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:100%}.attendance-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:5px;color:var(--primary);outline:none}.attendance-icon:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 35%,transparent)}.attendance-status-icons .attendance-icon[title="Ada Masalah"]{color:var(--danger)}.attendance-duration-stack .attendance-line{flex-wrap:wrap}.attendance-duration-stack .attendance-line .attendance-icon:nth-of-type(2){margin-left:5px;color:#a66a00}.attendance-location-primary{font-weight:700}.attendance-mobile-cards{display:none}
@media(max-width:760px){
  .admin-shell .attendance-compact-table-wrap{display:none}
  .admin-shell .attendance-mobile-cards{display:grid;gap:10px}
  .admin-shell .attendance-mobile-card{display:grid;gap:10px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow);min-width:0}
  .admin-shell .attendance-mobile-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-bottom:9px;border-bottom:1px solid var(--border)}
  .admin-shell .attendance-mobile-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}.admin-shell .attendance-mobile-head>div:nth-child(2){text-align:right}.admin-shell .attendance-mobile-head strong,.admin-shell .attendance-mobile-head span{overflow-wrap:anywhere}.admin-shell .attendance-mobile-head span{font-size:11px;color:var(--muted)}
  .admin-shell .attendance-mobile-times{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.admin-shell .attendance-mobile-times>div{display:grid;gap:6px;min-width:0}.admin-shell .attendance-mobile-times b,.admin-shell .attendance-mobile-bottom b{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .admin-shell .attendance-mobile-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:9px;border-top:1px solid var(--border)}.admin-shell .attendance-mobile-bottom>div{display:grid;gap:5px;min-width:0}.admin-shell .attendance-mobile-bottom .attendance-cell-stack{margin-bottom:2px}.admin-shell .attendance-mobile-bottom>.icon-btn{align-self:end}
  .admin-shell .attendance-icon{width:19px;height:19px;flex-basis:19px}.admin-shell .attendance-compact-table-wrap+ .attendance-mobile-cards{min-width:0}
}
@media(min-width:761px){.admin-shell .attendance-compact-table-wrap{overflow-x:hidden}}

.admin-shell .attendance-location-stack{gap:4px}.admin-shell .attendance-location-line{gap:5px;min-width:0}.admin-shell .attendance-location-line>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-shell .attendance-location-line .attendance-icon{color:var(--primary)}.admin-shell .attendance-location-empty{color:var(--muted);min-height:20px}
@media(max-width:760px){.admin-shell .attendance-location-line>span:nth-child(2){white-space:normal;overflow-wrap:anywhere}}

.admin-shell .wa-create-form textarea{width:100%;resize:vertical;min-height:92px;line-height:1.45}.wa-create-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}.wa-create-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 8px;border:1px solid #45658f;border-radius:999px;background:#182b49;color:var(--text);font-size:12px}.wa-create-chip.invalid{border-color:#d66a6a;background:#47252b;color:#ffd7d7}.wa-create-chip>span{overflow-wrap:anywhere}.wa-create-chip button{width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font-size:16px;line-height:16px}.wa-create-chip button:focus{outline:2px solid var(--primary)}.wa-create-count{margin:0;color:var(--muted);font-size:12px}

/* Employee Task detail actions only: reachable touch targets inside the
   existing modal, without changing the general Employee shell. */
.employee-task-detail-modal .modal-body{padding:16px;overflow:auto}.task-detail-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border)}.task-detail-actions .btn{min-height:44px;flex:1 1 160px}.task-completion-form{padding-top:12px;border-top:1px solid var(--border)}.employee-task-team-modal .modal-actions{display:flex;gap:8px;flex-wrap:wrap}.employee-task-team-modal .modal-actions .btn{min-height:44px;flex:1 1 120px}
@media(max-width:420px){.task-detail-actions{flex-direction:column}.task-detail-actions .btn{width:100%;flex-basis:auto}.employee-task-detail-modal .modal-body{padding:14px}.employee-task-detail-modal .modal-card{max-height:calc(100dvh - 24px)}}

.task-external-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin:8px 0}.task-external-row .btn{min-height:44px;padding:8px 10px}@media(max-width:600px){.task-external-row{grid-template-columns:1fr;gap:6px}.task-external-row .btn{width:100%}}

/* Finance Web foundation: compact role-specific workspace. */
.finance-page{max-width:1440px;margin:0 auto}.finance-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.finance-section-head h3{margin:0}.finance-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.finance-metric{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;min-height:88px;padding:15px}.finance-metric-icon{grid-row:1/span 2;color:var(--accent-strong)}.finance-metric-value{font-size:22px;font-weight:700}.finance-metric-label{font-size:12px;color:var(--muted);line-height:1.3}.finance-filters{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(4,minmax(120px,1fr)) repeat(2,minmax(130px,1fr)) auto;gap:8px;align-items:center;margin:14px 0}.finance-filters input,.finance-filters select{min-width:0}.finance-table-wrap{overflow:auto}.finance-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.finance-detail-grid>div{display:grid;gap:4px}.finance-detail-grid strong{font-weight:600}.finance-detail-wide{grid-column:1/-1}.finance-report-total{padding:18px;margin-bottom:14px}.finance-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.finance-report-grid .card{padding:18px}.finance-report-grid h3{margin-top:0}
@media(max-width:900px){.finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-filters input[type=search],.finance-filters button{grid-column:1/-1}.finance-table-wrap table{min-width:820px}}
@media(max-width:520px){.finance-section-head{align-items:flex-start}.finance-metrics{gap:8px}.finance-metric{min-height:76px;padding:10px}.finance-metric-value{font-size:18px}.finance-filters{display:grid;grid-template-columns:1fr 1fr;gap:7px}.finance-filters input[type=search],.finance-filters button{grid-column:1/-1;min-height:44px}.finance-filters select,.finance-filters input[type=date]{min-height:44px}.finance-detail-grid{grid-template-columns:1fr}.finance-detail-wide{grid-column:auto}.finance-report-grid{grid-template-columns:1fr}}