:root{
  --ge-navy:var(--surface-dark);--ge-brand:var(--brand-primary);--ge-canvas:var(--surface-app);--ge-surface:#fff;
  --ge-border:var(--border-default);--ge-text:var(--text-primary);--ge-text-2:var(--text-secondary);--ge-text-3:#98a2b3;
  --ge-success:var(--success);--ge-warning:var(--warning);--ge-error:var(--error);--ge-info:var(--info);--ge-purple:var(--brand-primary);
  --ge-radius-sm:10px;--ge-radius:14px;--ge-shadow:0 4px 16px rgba(16,24,40,.04);
  --ge-space-1:4px;--ge-space-2:8px;--ge-space-3:12px;--ge-space-4:16px;--ge-space-5:20px;--ge-space-6:24px;
}
.ui-card{background:var(--ge-surface);border:1px solid var(--ge-border);border-radius:var(--ge-radius);box-shadow:var(--ge-shadow)}
.ui-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600}
.ui-button{min-height:42px;padding:0 14px;border:1px solid var(--ge-border);border-radius:var(--ge-radius-sm);font-weight:600}
.ui-button-primary{border-color:var(--ge-brand);background:var(--ge-brand);color:#fff}
.ui-control{min-height:44px;border:1px solid var(--ge-border);border-radius:12px;background:var(--ge-surface);color:var(--ge-text)}
.ui-table{width:100%;border-collapse:collapse}
.ui-table th{background:#f9fafb;color:var(--ge-text-2);font-size:12px;font-weight:600}
.ui-table td{color:var(--ge-text);font-size:14px}

/* GARUDA ESCAMAS client palette; product name Workforce System. */
:root{
  --brand-primary:#0759B5;
  --brand-secondary:#08ACDC;
  --brand-accent:#FF7518;
  --surface-dark:#0759B5;
  --surface-app:#F5F7FA;
  --surface-card:#FFFFFF;
  --text-primary:#172033;
  --text-secondary:#667085;
  --border-default:#E6EAF0;
  --success:#16A34A;
  --warning:#F59E0B;
  --error:#DC2626;
  --info:#2563EB;
  /* Compatibility aliases for existing role surfaces. */
  --ge-brand:var(--brand-primary);
  --ge-navy:var(--surface-dark);
  --ge-canvas:var(--surface-app);
  --ge-surface:var(--surface-card);
  --ge-border:var(--border-default);
  --ge-text:var(--text-primary);
  --ge-text-2:var(--text-secondary);
  --ge-success:var(--success);
  --ge-warning:var(--warning);
  --ge-error:var(--error);
  --ge-info:var(--info);
  --navy:var(--surface-dark);
  --navy2:#064B99;
  --red:var(--brand-primary);
  --canvas:var(--surface-app);
  --bg:var(--surface-app);
  --surface:var(--surface-card);
  --ink:var(--text-primary);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --line:var(--border-default);
  --border:var(--border-default);
  --green:var(--success);
  --orange:var(--brand-accent);
  --amber:var(--warning);
  --blue:var(--info);
}
html,body{background:var(--surface-app);color:var(--text-primary)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline-color:var(--brand-secondary)!important}
input:focus,select:focus,textarea:focus{border-color:var(--brand-secondary)!important;box-shadow:0 0 0 3px rgb(8 172 220 / .16)}
.primary,.ui-button-primary,.login-button,.attendance-cta,.profile-primary,.back{background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:#fff!important;box-shadow:none!important}
.primary:hover,.ui-button-primary:hover,.login-button:hover,.attendance-cta:hover,.profile-primary:hover,.back:hover{background:#064B99!important;border-color:#064B99!important}
.secondary{background:#fff!important;border-color:var(--brand-primary)!important;color:var(--brand-primary)!important}
.nav button.active,.side-nav button.active{background:rgb(255 255 255 / .16)!important;color:#fff!important;box-shadow:none!important}
.nav button.active svg,.side-nav button.active svg{color:var(--brand-secondary)!important}
.nav button.active:before{background:var(--brand-secondary)!important}
.nav button.active,.side-nav button.active{border-left:3px solid var(--brand-secondary)!important}
.sidebar .nav-label,.hr-shell .nav-label,.sidebar .nav-text,.side-brand small,.brand small{color:inherit}
.hr-shell aside .brand small,.hr-shell .nav-label,.sidebar .side-brand small{color:#E6F5FF}
.hr-shell .metric.purple .metric-icon,.kpi:nth-child(3) svg{background:#E6FAFE;color:var(--brand-secondary)}
.hr-shell .metric.orange .metric-icon,.kpi:nth-child(4) svg{background:#FFF4E8;color:var(--brand-accent)}
.mobile-bottom-nav button[aria-current="page"],.bottom-nav button.active{background:transparent!important;color:var(--brand-primary)!important}
.language button[aria-pressed="true"],.language-switch button[aria-pressed="true"]{color:var(--brand-primary)!important}
.dashboard-language-switch button[aria-pressed="true"]{color:#fff!important}
.eyebrow,.link,.text-btn{color:var(--brand-primary)!important}
.metric .mi,.tile-icon{background:#EAF3FA!important;color:var(--brand-primary)!important}
.attendance,.attendance-action{border-top-color:var(--brand-primary)!important}
.route-line{border-left-color:var(--brand-primary)!important}
.schematic-stop b,.stop-number{background:var(--brand-primary)!important}
.status-pending,.status-review,.badge.orange{background:#FFF4E8!important;color:#9A3D00!important}
.error,.field-error,.form-error,.profile-error,.account-status.error{color:var(--error)!important}
[aria-invalid="true"]{border-color:var(--error)!important}
.menu-logout,.logout,.danger{color:var(--error)!important}

/* Shared personal attendance for Admin, HR, Payroll, and Employee. */
.pa-dialog [hidden]{display:none!important}.pa-action-group{margin:14px 0;padding:16px;border:1px solid #dce5ec;border-radius:12px;background:#f8fbfd}.pa-action-group h3{margin:0 0 4px}.pa-action-group p{margin:0 0 12px}.pa-attendance-group{border-left:4px solid #1268b3}.pa-request-group{border-left:4px solid #ed731f}.pa-request-choices{margin-bottom:0}.pa-request-choices button[aria-pressed=true]{border-color:#0759b5;background:#0759b5;color:#fff}.pa-dialog #pa-correction-form,.pa-dialog #pa-overtime-form{grid-template-columns:1fr;margin:14px 0;padding:18px;border:1px solid #dce5ec;border-radius:12px;background:#fff;box-shadow:0 4px 14px #123c5a0a}.pa-dialog #pa-correction-form h3,.pa-dialog #pa-overtime-form h3{margin:0}.pa-dialog #pa-correction-form>p,.pa-dialog #pa-overtime-form>p{margin:0 0 8px}.pa-dialog #pa-correction-form>.pa-primary,.pa-dialog #pa-overtime-form>.pa-primary{width:max-content;min-width:190px}.pa-dialog #pa-correction-form+*,.pa-dialog #pa-overtime-form+*{clear:both}
.pa-nav-button,[data-personal-attendance]{min-height:44px;cursor:pointer}.pa-dialog{box-sizing:border-box;width:min(620px,calc(100% - 24px));max-height:min(88dvh,780px);overflow:auto;background:#fff;color:#172033;border:1px solid #dce5ec;border-radius:16px;box-shadow:0 24px 80px #071a2a40;padding:24px;font:15px/1.5 Inter,'Segoe UI',Arial,sans-serif}.pa-dialog::backdrop{background:#071a2a99}.pa-dialog h2{font-size:24px;line-height:1.2;margin:0 0 6px;color:#123c5a}.pa-dialog p{margin:8px 0;color:#536477}.pa-disclosure{font-size:13px!important;padding:10px 12px;background:#f1f6f9;border-radius:8px}.pa-status{font-weight:700;color:#123c5a}.pa-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.pa-dialog button,.pa-dialog input,.pa-dialog select,.pa-dialog textarea{font:inherit}.pa-dialog button{min-height:44px;padding:9px 14px;border:1px solid #d6e0e9;border-radius:9px;background:#fff;color:#123c5a;font-weight:650;cursor:pointer}.pa-dialog button.pa-primary{background:#0759b5;color:#fff;border-color:#0759b5}.pa-dialog button:disabled{opacity:.55;cursor:not-allowed}.pa-dialog label{display:block;margin:10px 0 4px;font-weight:650}.pa-dialog input,.pa-dialog select,.pa-dialog textarea{width:100%;min-height:44px;padding:9px;border:1px solid #cad5de;border-radius:7px}.pa-dialog button:focus-visible,.pa-dialog input:focus-visible,.pa-dialog select:focus-visible,.pa-dialog textarea:focus-visible{outline:3px solid #08acdc;outline-offset:2px}.pa-table-wrap{overflow:auto;border:1px solid #e0e7ed;border-radius:8px}.pa-table{width:100%;border-collapse:collapse;font-size:13px}.pa-table th,.pa-table td{text-align:left;padding:9px;border-bottom:1px solid #e8edf1;white-space:nowrap}.pa-table th{background:#f5f8fa;color:#536477}.pa-close{float:right}.pa-message{min-height:24px;color:#b42318;font-size:13px}@media(max-width:600px){.pa-dialog{max-height:92dvh;border-radius:16px 16px 8px 8px;padding:18px}.pa-dialog h2{font-size:21px}.pa-actions>*{flex:1 1 140px}}