/* SUBA UI COMMAND FILE — edit this token block for every workspace.
   Mobile first; desktop overrides below. Component files consume these tokens.
   Colors keep SUBA/Finance identity. PDF/export geometry remains independent. */
:root {
    --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px; --ui-space-4:16px;
    --ui-space-6:24px; --ui-space-8:32px;
    /* EDIT HERE: shared comfortable screen typography and spacing. */
    --ui-font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
    --ui-body:14px; --ui-label:14px; --ui-caption:13px; --ui-control:16px;
    --ui-title:20px; --ui-heading:18px; --ui-subheading:16px;
    --ui-letter-body:0em; --ui-letter-title:0em; --ui-letter-label:0em;
    --ui-line-title:1.3; --ui-line-heading:1.4;
    --ui-column-gap:var(--ui-space-4); --ui-form-gap:var(--ui-space-4);
    --ui-cell-x:var(--ui-space-4); --ui-cell-y:var(--ui-space-3);
    --ui-table-identity-min:200px; --ui-table-action-min:140px;
    --ui-control-x:var(--ui-space-3); --ui-control-y:var(--ui-space-2);
    --ui-card-padding:var(--ui-space-4); --ui-card-padding-mobile:var(--ui-space-4);
    --ui-title-gap:var(--ui-space-3); --ui-text-gap:var(--ui-space-2);
    --ui-section-gap:var(--ui-space-6); --ui-card-gap:var(--ui-space-4);
    --ui-page-x:var(--ui-space-4); --ui-page-y:var(--ui-space-4);
    --ui-sidebar-mobile-width:min(340px,calc(100vw - 48px));
    --ui-column-gap-mobile:var(--ui-space-4); --ui-control-gap:var(--ui-space-3);
    --ui-weight-body:400; --ui-weight-label:500; --ui-weight-title:600;
    --ui-line:1.55; --ui-control-height:48px; --ui-radius:10px;
    --ui-finance-accent:#f2c94c; --ui-finance-radius:var(--ui-radius);
    --ui-finance-surface:#202020; --ui-finance-border:#383838;
    --ui-finance-muted:#aaa; --ui-finance-text:#f4f4f4; --ui-finance-background:#090909;
    --ui-finance-light-surface:#f5f5f5; --ui-finance-light-border:#ddd;
    --ui-finance-light-muted:#595959; --ui-finance-light-text:#171717; --ui-finance-light-background:#fff;
    --ui-dialog-width:760px; --ui-motion:180ms;
    /* SUBA Clean Workspace: change composition for all migrated screens here. */
    --ui-content-max:1440px; --ui-form-columns:2; --ui-metric-columns:4;
    --ui-record-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.7fr);
    --ui-panel-border:color-mix(in srgb,var(--ui-text) 14%,var(--ui-surface));
    --ui-copy-max:76ch;
    --ui-border:var(--glass-border,#69717d); --ui-surface:var(--bg-sidebar,#1c1c1e);
    --ui-text:var(--text-primary,#fff); --ui-muted:#b3b8c2; --ui-focus:var(--primary,#f2c94c);
    --ui-heading-on-dark:#dce1eb; --ui-heading-on-light:#334155;
    --ui-subheading-on-dark:#c5cedb; --ui-subheading-on-light:#475569;
    --ui-title-color:var(--ui-text); --ui-heading-color:var(--ui-heading-on-dark);
    --ui-subheading-color:var(--ui-subheading-on-dark); --ui-label-color:var(--ui-text);
    --ui-caption-color:var(--ui-muted);
    /* Shared, explicit interaction colors; components inherit the active theme accent. */
    --ui-hover-bg:color-mix(in srgb,var(--ui-focus) 12%,transparent);
    --ui-hover-border:var(--ui-focus); --ui-hover-color:var(--ui-focus);
    --ui-selected-bg:color-mix(in srgb,var(--ui-focus) 18%,transparent);
    --ui-selected-border:var(--ui-focus); --ui-selected-color:var(--ui-text);
    --ui-pressed-ring:color-mix(in srgb,var(--ui-focus) 42%,transparent);
    --ui-action-border:color-mix(in srgb,var(--ui-focus) 55%,var(--ui-border));
    --ui-action-surface:color-mix(in srgb,var(--ui-focus) 12%,var(--ui-surface));
    --ui-action-ink:var(--ui-focus);
    --erp-text-size:var(--ui-body); --erp-control-size:var(--ui-control); --erp-space:var(--ui-space-4);
}
@media(min-width:761px) {
    :root { --ui-title:24px; --ui-heading:18px; --ui-subheading:16px;
        --ui-card-padding:var(--ui-space-6); --ui-page-x:var(--ui-space-6); --ui-page-y:var(--ui-space-6); }
}
:root[data-theme="light"] { --ui-muted:#525968; --ui-action-ink:#785400; --ui-heading-color:var(--ui-heading-on-light); --ui-subheading-color:var(--ui-subheading-on-light); }
body { font-family:var(--ui-font-family);font-weight:var(--ui-weight-body); }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(h1,h2,h3,h4) { font-weight:var(--ui-weight-title); }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) label { font-weight:var(--ui-weight-label); }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,select,textarea,button) { border-radius:var(--ui-radius); }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);font-family:inherit;
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,select,textarea,button,a):focus-visible {
    outline:2px solid var(--ui-focus);outline-offset:3px;
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) button {
    transition:background-color var(--ui-motion),border-color var(--ui-motion),opacity var(--ui-motion);
    font-weight:var(--ui-weight-label);
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) button:disabled { cursor:not-allowed; }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) button:where(:not(:disabled):not(.danger):not(.danger-btn):not(.btn-danger):not([data-ui-tone=danger])) {border-color:var(--ui-action-border)}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) a[href] {color:var(--ui-focus);text-decoration:underline;text-underline-offset:3px}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) [data-ui-tone=primary]:not(.danger) {background:var(--ui-focus);color:#171717;border-color:var(--ui-focus)}
body :is(.nav-menu,.top-header,#global-mobile-nav) :is(button,a,[role=button]):focus-visible {outline:2px solid var(--ui-focus);outline-offset:3px}
body .ui-click-feedback {outline:2px solid var(--ui-focus);outline-offset:2px}
body button[data-ui-busy] {border-color:var(--ui-focus);cursor:progress}
body .nav-menu .nav-item[aria-current=page] {color:var(--ui-focus);background:var(--ui-selected-bg)}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,a,[role=button]):is(.danger,.danger-btn,.btn-danger,[data-ui-tone=danger]) {
    --ui-focus:var(--danger,#ed6a6a);
    --ui-hover-bg:color-mix(in srgb,var(--ui-focus) 12%,transparent);
    --ui-hover-color:var(--ui-focus);--ui-hover-border:var(--ui-focus);
    --ui-pressed-ring:color-mix(in srgb,var(--ui-focus) 42%,transparent);
}
/* A single interaction contract for clickable controls in every workspace. */
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button:not(:disabled),a[href],[role=button],[role=tab],summary) {
    cursor:pointer;
    transition:background-color var(--ui-motion),border-color var(--ui-motion),color var(--ui-motion),box-shadow var(--ui-motion),filter var(--ui-motion),transform var(--ui-motion);
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,a[href],[role=button],[role=tab])[aria-disabled=true] { cursor:not-allowed; }
@media (hover:hover) {
    body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button:not(:disabled),[role=button],[role=tab]):not([aria-disabled=true]):hover {
        border-color:var(--ui-hover-border);
        box-shadow:0 0 0 1px var(--ui-hover-border);
    }
    body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button:not(:disabled),[role=button],[role=tab]):not([aria-disabled=true]):hover:not([data-ui-tone=primary]) {
        background-color:var(--ui-hover-bg);
        color:var(--ui-hover-color);
    }
    body :is(.view-section,dialog,.modal-overlay,.ui-controls) a[href]:hover { color:var(--ui-hover-color);text-decoration-thickness:2px;text-underline-offset:3px; }
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,a[href],[role=button],[role=tab])[aria-current=page],
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,[role=button],[role=tab])[aria-selected=true],
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,[role=button])[aria-pressed=true] {
    background-color:var(--ui-selected-bg);
    color:var(--ui-selected-color);
    border-color:var(--ui-selected-border);
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button:not(:disabled),[role=button],[role=tab]):active:not([aria-disabled=true]) {
    box-shadow:0 0 0 3px var(--ui-pressed-ring);
    transform:translateY(1px);
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(a[href],button,[role=button],[role=tab]) :is(i,svg) { transition:color var(--ui-motion); }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,a[href],[role=button],[role=tab]):focus-visible {
    outline:2px solid var(--ui-focus);outline-offset:3px;
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,a[href],[role=button],[role=tab]):disabled,
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,a[href],[role=button],[role=tab])[aria-disabled=true] { opacity:.58; }
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(.att-hint,.hrd-hint,.pay-hint) { color:var(--ui-muted); }
body dialog {
    margin:auto;
    box-sizing:border-box;width:min(var(--ui-dialog-width),calc(100vw - 32px)) !important;
    max-width:calc(100vw - 32px) !important;max-height:calc(100dvh - 32px) !important;
    overflow:auto;color:var(--ui-text);background:var(--ui-surface);
    border:1px solid var(--ui-border);border-radius:var(--ui-space-4);
    box-shadow:0 24px 64px #0005;
}
body dialog::backdrop { background:#0008; }
body dialog form { display:grid;gap:var(--ui-form-gap); }
body dialog label { display:grid;gap:var(--ui-space-2); }
/* Salary setup can be hosted by the employee workspace or Payroll. */
body #pay-dialog .pay-line {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--ui-control-gap);margin-block:var(--ui-space-3);align-items:start}
body #pay-dialog .pay-line input {min-width:0;width:100%}
@media(max-width:650px){body #pay-dialog .pay-line{grid-template-columns:minmax(0,1fr)}}
body dialog :is(input,select,textarea):not([type=checkbox]):not([type=radio]) { box-sizing:border-box;width:100%; }
body .ui-dialog-guard { padding:var(--ui-space-4);margin-top:var(--ui-space-4);border:1px solid var(--ui-focus);border-radius:var(--ui-radius); }
body .ui-dialog-guard-actions { display:flex;gap:var(--ui-space-3);flex-wrap:wrap;margin-top:var(--ui-space-3); }
body button[data-ui-busy] { position:relative; }
body button[data-ui-busy]::before {
    content:'';display:inline-block;width:14px;height:14px;margin-inline-end:8px;
    border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
    animation:ui-spin .8s linear infinite;
}
.ui-request-status { font-size:var(--ui-label);color:var(--ui-muted);min-height:24px;margin:8px 0; }
body .erp-table-scroll .ui-number { text-align:right;font-variant-numeric:tabular-nums;min-width:140px; }
body .erp-table-scroll .ui-identity { min-width:200px; }
body .erp-table-scroll .ui-date { min-width:160px;font-variant-numeric:tabular-nums; }
body .erp-table-scroll .ui-action { min-width:140px; }
.ui-example { max-width:1100px;margin:auto;padding:var(--ui-space-6); }
.ui-example > section { margin-top:var(--ui-space-6); }
.ui-form { display:grid;gap:var(--ui-form-gap); }
#workspace-profile[hidden],#workspace-profile [hidden],#workspace-admin-ceo[hidden],#workspace-dialog [hidden] {display:none!important}
.ui-form label { display:grid;gap:var(--ui-space-2); }
.ui-form :is(input,textarea,select):not([type=checkbox]):not([type=radio]) { width:100%;box-sizing:border-box; }
.ui-form :is(input[type=checkbox],input[type=radio]) { flex:none;width:auto; }
.ui-actions { display:flex;gap:var(--ui-space-3);flex-wrap:wrap; }
.ui-example button { border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);cursor:pointer; }
.ui-example button[type=submit] { background:var(--ui-focus);color:#171717;border-color:var(--ui-focus); }
.ui-example table :is(td,th) { border-bottom:1px solid var(--ui-border);text-align:left; }
.ui-example table th { color:var(--ui-muted);font-weight:var(--ui-weight-label); }
.ui-example-grid,.ui-form-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--ui-form-gap); }
.ui-example-card { padding:var(--ui-space-6);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface); }
@keyframes ui-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
    :root { --ui-motion:0ms; }
    body button[data-ui-busy]::before { animation:none; }
    body dialog { scroll-behavior:auto; }
    body :is(.view-section,dialog,.modal-overlay,.ui-controls),body :is(.view-section,dialog,.modal-overlay,.ui-controls) * {
        animation-duration:0ms !important;transition-duration:0ms !important;scroll-behavior:auto !important;
    }
}
@media(max-width:650px) { :root { --ui-control:16px; } .ui-example{padding:16px;} }
:root :is(#manage-team-usernames, #staff-edit-username-change)[hidden] { display: none; }

/* P2: consistent fields, state panels and mobile dialogs. */
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,select,textarea):disabled {opacity:.58;cursor:not-allowed}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,textarea)[readonly]:not([type=checkbox]):not([type=radio]):not([type=hidden]) {border-style:dashed;cursor:default}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,select,textarea)[aria-invalid=true]:not([type=checkbox]):not([type=radio]):not([type=hidden]) {border-color:var(--danger,#ed6a6a);outline-color:var(--danger,#ed6a6a)}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(input,textarea)::placeholder {color:var(--ui-muted);opacity:1}
body .ui-state {padding:var(--ui-space-6);border:1px solid var(--ui-border);border-radius:var(--ui-radius);color:var(--ui-muted);overflow-wrap:anywhere}
body .ui-state h3 {margin:0 0 var(--ui-text-gap);color:var(--ui-text)}
body .ui-state p {margin:0;line-height:var(--ui-line-body,1.6)}
body .ui-state[data-ui-state=error] {border-color:var(--danger,#ed6a6a)}
body dialog {padding:var(--ui-space-6);scroll-padding-block:var(--ui-space-6)}
@media(max-width:760px) {
 body dialog {padding:var(--ui-space-4);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important}
 body :is(dialog,.modal-overlay) .ui-actions > button {flex:1 1 140px;min-width:0}
 body .ui-state {padding:var(--ui-space-4)}
}

:root {--ui-navigation-label:12px}

/* Clock dialog and global trigger share the action palette across workspaces. */
body #att-clock-dialog [data-ui-tone=primary],body .header-clock-in button[data-clock-state] {background:var(--ui-focus);color:#171717;border-color:var(--ui-focus)}
/* Header controls: one shared geometry; the bell never depends on a remote icon font. */
body .top-header .header-clock-in {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ui-space-3);padding:var(--ui-space-2);margin:0;border-radius:var(--ui-radius);flex:0 1 auto;min-width:0;max-width:100%}
body .header-clock-meta {display:grid;gap:var(--ui-space-1);min-width:0}
body #server-live-clock {font-size:var(--ui-caption);line-height:var(--ui-line-title);white-space:nowrap;font-variant-numeric:tabular-nums}
body #header-attendance-status {font-size:var(--ui-caption);line-height:var(--ui-line-title);color:var(--ui-muted);overflow-wrap:anywhere;max-width:28ch}
body .header-clock-in button[data-clock-state] {display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-control-height);height:var(--ui-control-height);padding:var(--ui-control-y) var(--ui-control-x);border:1px solid var(--ui-focus);border-radius:var(--ui-radius);font-size:var(--ui-label);font-weight:var(--ui-weight-title);line-height:var(--ui-line-title);white-space:nowrap;flex:none;transform:none}
body .header-clock-in button[data-clock-state=out],body .header-clock-in button[data-clock-state=pending] {background:var(--ui-surface);color:var(--ui-focus)}
body .header-clock-in button[data-clock-state=loading] {background:var(--ui-surface);color:var(--ui-muted);border-color:var(--ui-border)}
body #notif-bell-btn {position:relative;min-width:var(--ui-control-height);width:var(--ui-control-height);height:var(--ui-control-height);flex:0 0 var(--ui-control-height);color:var(--ui-text)}
body #notif-bell-btn .header-bell-icon {display:block;flex:none;width:var(--ui-space-6);height:var(--ui-space-6);opacity:1;visibility:visible}
body #notif-bell-btn .badge-count {position:absolute;top:var(--ui-space-1);right:var(--ui-space-1);width:var(--ui-space-2);height:var(--ui-space-2);min-width:0;min-height:0;line-height:1;border-radius:50%;background:var(--danger,#ed6a6a);pointer-events:none}
@media(max-width:760px) {
 body .top-header .header-clock-in {flex:1 1 220px}
 body .header-clock-in button[data-clock-state] {max-width:152px}
}

body .att-clock-shell section:not([hidden]) {display:grid;gap:var(--ui-space-4)}
body .att-clock-shell #att-clock-progress {color:var(--ui-focus);font-weight:var(--ui-weight-label)}
body .att-clock-shell .ui-actions {margin-top:var(--ui-space-4)}

body .att-clock-shell #att-dialog-message:empty {display:none}
body .att-clock-shell details > :not(summary) {margin-top:var(--ui-space-3)}

body .att-clock-shell .ui-actions {position:sticky;bottom:0;background:var(--ui-surface);padding-block:var(--ui-space-3);z-index:1}

/* Shared distinction between editable fields and explanatory panels. */
:root {--ui-field-surface:color-mix(in srgb,var(--ui-focus) 9%,var(--ui-surface));--ui-info-surface:color-mix(in srgb,var(--ui-text) 4%,var(--ui-surface))}
body .ui-request-status[hidden],body .ui-request-status:empty {display:none!important}
body .ui-popup-close {display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);min-height:var(--ui-control-height)}
body :is(dialog,.ui-overlay-surface) > .ui-popup-close {position:sticky;top:0;float:right;z-index:3;flex:none;width:var(--ui-control-height);min-width:var(--ui-control-height);padding:0;margin:0 0 var(--ui-space-2) var(--ui-space-3);background:var(--ui-surface);color:var(--ui-text)}
body .ui-popup-close[hidden] {display:none!important}
body [data-ui-duplicate-close] {display:none!important}
body .user-profile {position:relative}
body #impersonation-picker {position:absolute;bottom:calc(100% + var(--ui-space-3));inset-inline:0;z-index:20;max-height:min(65dvh,520px);overflow:auto;padding:var(--ui-space-4);background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:var(--ui-radius);box-shadow:0 12px 32px #0005}
body #impersonation-picker[hidden] {display:none!important}
body .ui-account-options {display:grid;gap:var(--ui-space-2)}
body #impersonation-picker :is(button,input) {box-sizing:border-box;width:100%;min-height:var(--ui-control-height);padding:var(--ui-control-y) var(--ui-control-x);font-family:inherit;font-size:var(--ui-control);line-height:var(--ui-line);color:var(--ui-text)}
body #impersonation-picker button {background:transparent;border:1px solid var(--ui-action-border);text-align:left;white-space:normal;overflow-wrap:anywhere}
body #impersonation-picker button[hidden] {display:none!important}
body #sidebar-profile-trigger:focus-visible {outline:2px solid var(--ui-focus);outline-offset:2px}
body [data-ui-close-icon] {font-size:var(--ui-heading);line-height:1;font-weight:var(--ui-weight-label)}
body #att-clock-dialog :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not(:disabled):not([readonly]) {background:var(--ui-field-surface);border-color:var(--ui-focus);color:var(--ui-text)}
body #att-clock-dialog :is(#att-location-preview,#att-clock-confirm-location,#att-clock-review) {background:var(--ui-info-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius);padding:var(--ui-space-4);color:var(--ui-text)}
@media print {body [data-ui-close-icon] {display:none!important}}

/* Workspace administration uses the same page and table rhythm as other modules. */
body :is(#view-workspace-activity,#view-workspace-delegation) > header {margin-bottom:var(--ui-space-6)}
body :is(#view-workspace-activity,#view-workspace-delegation) #workspace-panel {padding:var(--ui-space-6);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface)}
body #workspace-panel > form {padding-bottom:var(--ui-space-6);border-bottom:1px solid var(--ui-border)}
body :is(#workspace-my-activity,#workspace-admin-ceo)[hidden] {display:none!important}
@media(max-width:760px){body :is(#view-workspace-activity,#view-workspace-delegation) #workspace-panel {padding:var(--ui-space-4)}}

body #workspace-panel [hidden],body #workspace-read-only-banner[hidden] {display:none!important}

/* Shared action rhythm: small text never means a small touch target. */
body :is(.view-section,dialog,.modal-overlay) :is(.ui-actions,.ui-dialog-guard-actions,.fin-ui-actions,.premium-dialog-actions) {
    gap:var(--ui-control-gap)!important;
}
body :is(.view-section,dialog,.modal-overlay) :is(.ui-actions,.ui-dialog-guard-actions,.premium-dialog-actions) > button {
    min-height:var(--ui-control-height);min-width:0;
}
@media(max-width:760px) {
    body :is(.view-section,dialog,.modal-overlay) :is(.ui-actions,.ui-dialog-guard-actions,.premium-dialog-actions) > button {flex:1 1 140px;}
}
/* Popup actions stay compact; a column layout must not turn a width basis into height. */
body .modal-overlay .premium-dialog-actions {flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;}
body .modal-overlay .premium-dialog-actions > button:not(.ui-popup-close) {
    flex:0 1 auto;width:auto;max-width:100%;min-width:calc(var(--ui-control-height) * 2);
    min-height:var(--ui-control-height);height:auto;padding:var(--ui-control-y) var(--ui-control-x);
}

/* Role menus share the same density, tokens and focus/selected contract. */
body :is(#hris-workspace,#hris-employee-profile,#hris-inbox-workspace) .ui-panel {padding:var(--ui-card-padding);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);min-width:0}
body #hris-inbox-workspace [hidden] {display:none!important}
body .ui-private-photo {max-width:100%;height:auto;border-radius:var(--ui-radius)}
body [data-hris-schedule] [hidden] {display:none!important}
body [data-hris-schedule] .ui-panel {padding:var(--ui-card-padding);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);min-width:0}
body #hris-employee-profile [hidden] {display:none!important}
body #hris-workspace [hidden] {display:none!important}
/* Two-column account directory fits mobile; wider legacy tables keep scrolling. */
body #hris-workspace table {width:100%;min-width:0;table-layout:fixed;border-collapse:collapse}
body #hris-workspace :is(td,th) {min-width:0;padding:var(--ui-space-3);text-align:left;overflow-wrap:anywhere;border-bottom:1px solid var(--ui-border)}
body .nav-menu [data-nav-consolidated],body #hris-tabs[hidden] {display:none!important}
body .role-nav-tools[hidden],body .role-nav-group[hidden],body #role-nav-empty[hidden],body .nav-menu [data-nav-filtered] {display:none!important}
body .role-nav-ready > .nav-section {display:none!important}
body .role-nav-tools {padding:var(--ui-space-2) var(--ui-space-3) var(--ui-space-4)}
body .role-nav-heading {display:flex;align-items:center;justify-content:space-between;gap:var(--ui-control-gap)}
body .role-nav-heading strong {font-size:var(--ui-heading);font-weight:var(--ui-weight-title)}
body #role-nav-close {display:none;background:transparent;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-heading);min-width:var(--ui-control-height);min-height:var(--ui-control-height);cursor:pointer}
body .role-nav-search {display:grid;gap:var(--ui-space-2);font-size:var(--ui-caption);color:var(--ui-muted)}
body #role-nav-search {box-sizing:border-box;width:100%;min-width:0;min-height:var(--ui-control-height);font:inherit;font-size:var(--ui-control);padding:var(--ui-space-2) var(--ui-space-3);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-text)}
body .role-nav-group {border-top:1px solid var(--ui-border);margin:0 var(--ui-space-2);min-width:0}
body .role-nav-group > summary {list-style:none;display:flex;align-items:center;gap:var(--ui-space-3);padding:var(--ui-space-3);min-height:var(--ui-control-height);box-sizing:border-box;cursor:pointer;font-size:var(--ui-label);font-weight:var(--ui-weight-title);color:var(--ui-text);border-radius:var(--ui-radius)}
body .role-nav-group > summary::-webkit-details-marker {display:none}
body .role-nav-group > summary > i {font-size:20px}
body .role-nav-chevron {margin-left:auto;transition:transform var(--ui-motion)}
body .role-nav-group[open] > summary .role-nav-chevron {transform:rotate(180deg)}
body .role-nav-group .nav-item,body .role-nav-delegations button {box-sizing:border-box;min-height:var(--ui-control-height);width:100%;margin:var(--ui-space-1) 0;padding:var(--ui-space-3);font-size:var(--ui-label);font-weight:var(--ui-weight-body);border-radius:var(--ui-radius);gap:var(--ui-space-3)}
body .role-nav-group .nav-item[aria-current=page],body .role-nav-delegations button[aria-current=page] {background:var(--ui-selected-bg);color:var(--ui-focus);box-shadow:inset 3px 0 var(--ui-focus)}
body .role-nav-division {margin:0 var(--ui-space-3) var(--ui-space-2);font-size:var(--ui-caption);color:var(--ui-muted)}
body .role-nav-delegations button {display:block;text-align:left;white-space:normal;border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);cursor:pointer}
body .nav-menu :is(a.nav-item:not(.staff-member-nav),summary,.role-nav-delegations button) > i {font-size:20px;width:24px;flex:0 0 24px;text-align:center;color:inherit}
body .role-nav-delegations button {display:flex;align-items:center;gap:var(--ui-space-3)}
body .role-nav-ready #sidebar-logout-nav {margin-top:var(--ui-space-4)!important;min-height:var(--ui-control-height)}
body #workspace-profile {padding:var(--ui-space-3);flex-shrink:0}
body .role-nav-group summary:focus-visible,body .role-nav-delegations button:focus-visible,body #role-nav-close:focus-visible,body #role-nav-search:focus-visible {outline:2px solid var(--ui-focus);outline-offset:2px}
@media(hover:hover){body .role-nav-group summary:hover,body .role-nav-delegations button:hover {background:var(--ui-hover-bg);color:var(--ui-focus)}}
@media(max-width:768px){
 body #app-sidebar {width:var(--ui-sidebar-mobile-width)!important;max-width:var(--ui-sidebar-mobile-width);left:calc(-1 * var(--ui-sidebar-mobile-width))!important;height:100dvh!important;min-height:0!important;padding-bottom:env(safe-area-inset-bottom)}
 body #app-sidebar.active {left:0!important}
 body #app-sidebar .nav-menu {width:100%;box-sizing:border-box;}
 body #role-nav-close {display:inline-flex;align-items:center;justify-content:center}
 body.role-menu-open {overflow:hidden}
 body #app-sidebar .nav-menu {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--ui-space-4)}
 body .role-nav-tools {position:sticky;top:0;z-index:1;background:var(--ui-surface)}
}

/* Monthly fulfillment uses the shared spacing and brand token. */
.ui-progress { inline-size:100%; block-size:var(--ui-space-3); accent-color:var(--primary); }

/* UI-CLEAN1: canonical composition layer. Legacy/module CSS consumes these
   values; only this block defines layout geometry. Visibility stays with callers. */
body .view-section.ui-clean-scope {max-width:var(--ui-content-max);margin-inline:auto;box-sizing:border-box;min-width:0}
body .ui-clean-scope :is(.ui-layout-stack,.ui-layout-form,.ui-layout-metrics) {gap:var(--ui-section-gap) var(--ui-column-gap)!important;min-width:0;align-items:stretch;column-count:auto!important}
body .ui-clean-scope .ui-layout-stack {grid-template-columns:minmax(0,1fr)!important}
body .ui-clean-scope :is(.ui-layout-form,.ui-form-grid) {grid-template-columns:repeat(var(--ui-form-columns),minmax(0,1fr))!important;gap:var(--ui-form-gap) var(--ui-column-gap)!important;align-items:stretch}
body .ui-clean-scope .ui-layout-form:not([hidden]):not(.hidden-role):not(.hidden):not([style*="display: none"]):not([style*="display:none"]) {display:grid!important}
body .ui-clean-scope .ui-layout-metrics {grid-template-columns:repeat(var(--ui-metric-columns),minmax(0,1fr))!important;gap:var(--ui-card-gap)!important}
body .ui-clean-scope :is(.ui-layout-stack,.ui-layout-form,.ui-layout-metrics) > * {min-width:0;max-width:100%;box-sizing:border-box}
body .ui-clean-scope .ui-layout-form > :is(label,.ui-field,.form-group):not(:has(input[type=checkbox],input[type=radio])):not([hidden]):not(.hidden-role):not(.hidden):not([style*="display: none"]):not([style*="display:none"]) {display:flex!important;flex-direction:column;justify-content:flex-end;gap:var(--ui-space-2)!important;align-self:stretch;margin:0!important;min-width:0}
body .ui-clean-scope .ui-layout-form > label {width:100%;flex-basis:auto!important}
body .ui-clean-scope .ui-layout-form > :is(button,.ui-actions) {align-self:end}
body .ui-clean-scope :is(.ui-form,.ui-layout-stack) > :is(p,h1,h2,h3,h4) {margin-block:0!important}
body .ui-clean-scope :is(.ui-panel,.att-card,.hrd-card,.pay-card,.fin-panel,.serp-panel) {border-color:var(--ui-panel-border);box-shadow:none!important;background-image:none!important}
body .ui-clean-scope :is(.ui-panel,.att-card,.hrd-card,.pay-card,.fin-panel,.serp-panel) > :is(h2,h3,h4) {margin-top:0!important}
body .ui-clean-scope :is(.ui-caption,.att-hint,.hrd-hint,.pay-hint,.fin-hint) {max-inline-size:var(--ui-copy-max)}
body .ui-clean-scope :is(input,select,textarea) {box-sizing:border-box;max-width:100%;min-width:0}
body .ui-clean-scope :is(input,select,textarea):focus {box-shadow:none!important}
body .ui-clean-scope :is(.ui-actions,.att-row,.hrd-row,.pay-row,.fin-ui-actions) {align-items:end;gap:var(--ui-control-gap)!important}
body .ui-clean-scope .ui-record-list {grid-template-columns:minmax(0,1fr)!important;gap:var(--ui-space-2)!important}
body .ui-clean-scope .ui-record-row {display:grid;grid-template-columns:var(--ui-record-columns);align-items:center;gap:var(--ui-column-gap);padding:var(--ui-space-3) var(--ui-space-4)!important}
body .ui-clean-scope .ui-record-row > :is(p,small) {margin:0!important;min-width:0;overflow-wrap:anywhere}
body .ui-clean-scope .ui-record-row > button {text-align:left;background:transparent;color:var(--ui-focus);border-color:transparent;min-width:0;white-space:normal}
body .ui-clean-scope :is(th,td).ui-number {text-align:right!important;font-variant-numeric:tabular-nums}
body .ui-clean-scope :is(th,td).ui-action {text-align:left}
body .ui-clean-scope :is(th,td) {word-break:normal;line-height:var(--ui-line)}
body .ui-clean-scope .ui-request-status {margin-block:var(--ui-space-2);font-size:var(--ui-label)}
body .ui-clean-scope [hidden] {display:none!important}
@media(max-width:1100px){:root{--ui-metric-columns:2}}
@media(max-width:760px){
    :root{--ui-form-columns:1;--ui-record-columns:minmax(0,1fr)}
    body .ui-clean-scope .ui-record-row {gap:var(--ui-space-2)}
    body .ui-clean-scope .ui-layout-form > :is(button,.ui-actions) {width:100%}
}
@media print {
    body .view-section.ui-clean-scope {max-width:none}
}

body .ui-clean-scope .ui-layout-form :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]) {width:100%!important;justify-self:stretch}

/* HRIS lifecycle visibility; all geometry remains in the shared semantic classes. */
body :is(#hris-recruitment,#hris-performance,#hris-payroll-status) [hidden] {display:none!important}

/* HRIS-REF1: shared table/toolbar language from the owner's references. */
:root {--ui-reference-accent:color-mix(in srgb,var(--ui-finance-accent) 65%,#c7eee0);--ui-reference-table-min:1080px;--ui-reference-stat-text:#102019;--ui-reference-stat-surface:color-mix(in srgb,var(--ui-finance-accent) 10%,#e1e9e5)}
body .ui-reference-workspace {--ui-focus:var(--ui-reference-accent);--ui-hover-bg:color-mix(in srgb,var(--ui-focus) 12%,transparent);--ui-action-border:color-mix(in srgb,var(--ui-focus) 45%,var(--ui-border));--ui-selected-bg:color-mix(in srgb,var(--ui-focus) 18%,transparent);--ui-selected-color:var(--ui-text);min-width:0}
body .ui-reference-panel {padding:var(--ui-card-padding);border:1px solid var(--ui-action-border);border-radius:var(--ui-space-4);background:color-mix(in srgb,var(--ui-reference-accent) 7%,var(--ui-surface));min-width:0}
body .ui-reference-heading {display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4);flex-wrap:wrap;margin-bottom:var(--ui-space-4)}
body .ui-reference-heading h3 {margin:0!important}
body .ui-reference-toolbar,body .ui-reference-filterbar {display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-control-gap);min-width:0}
body .ui-reference-toolbar label {min-width:0;flex:1 1 140px}
body .ui-reference-toolbar input,body .ui-reference-toolbar select,body .ui-reference-search input {box-sizing:border-box;width:100%;min-width:0}
body .ui-reference-search {flex:1 1 280px;min-width:0}
body .ui-reference-segments {display:flex;gap:var(--ui-space-1);padding:var(--ui-space-1);border:1px solid var(--ui-action-border);border-radius:var(--ui-radius);flex-wrap:wrap}
body .ui-reference-segments button {min-height:var(--ui-space-8);border-color:transparent!important;background:transparent}
body .ui-reference-segments button[aria-pressed=true] {background:var(--ui-selected-bg);color:var(--ui-focus)}
body .ui-reference-filterbar {margin-block:var(--ui-space-4)}
body .ui-reference-count,body .ui-reference-badge {display:inline-flex;align-items:center;gap:var(--ui-space-1);padding:var(--ui-space-1) var(--ui-space-2);border:1px solid var(--ui-action-border);border-radius:var(--ui-radius);color:var(--ui-focus);font-size:var(--ui-caption);font-weight:var(--ui-weight-title);white-space:normal}
body .ui-reference-count {min-height:var(--ui-space-8);padding-inline:var(--ui-space-3)}
body .ui-reference-badge[data-status=draft],body .ui-reference-badge[data-status=history] {color:var(--ui-muted);border-color:var(--ui-border)}
body .ui-reference-badge[data-status=partial] {color:var(--warning,#e9c56b)}
body .ui-reference-table {width:100%;border-collapse:collapse;min-width:var(--ui-reference-table-min)!important}
body .ui-reference-table thead {background:color-mix(in srgb,var(--ui-reference-accent) 12%,var(--ui-surface))}
body .ui-reference-table th {font-weight:var(--ui-weight-title);text-align:left;color:var(--ui-focus);white-space:nowrap}
body .ui-reference-table :is(th,td) {padding:var(--ui-cell-y) var(--ui-cell-x)!important;border-bottom:1px solid var(--ui-panel-border);vertical-align:middle;min-width:0!important}
body .ui-reference-table th button {padding:0!important;background:transparent;border:0!important;color:inherit;text-align:left;white-space:nowrap}
body .ui-reference-table td small {display:block;color:var(--ui-muted);margin-top:var(--ui-space-1)}
body .ui-reference-table :is(td,th):has(>input[type=checkbox]) {width:var(--ui-control-height);min-width:var(--ui-control-height)!important}
body .ui-reference-table td:is([data-label="D-Point"],[data-label="Gaji pokok"],[data-label="Total tambahan"],[data-label="Total potongan"],[data-label="Upah bersih (THP)"]) {white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
body .ui-reference-person {display:flex;align-items:center;gap:var(--ui-space-3);min-width:0}
body td.ui-reference-person {display:table-cell}
body td.ui-reference-person > div {display:inline-block;vertical-align:middle;max-width:calc(100% - var(--ui-control-height))}
body .ui-reference-avatar {display:inline-grid;place-items:center;vertical-align:middle;margin-inline-end:var(--ui-space-2);width:var(--ui-space-8);height:var(--ui-space-8);flex:0 0 var(--ui-space-8);border-radius:var(--ui-radius);background:var(--ui-selected-bg);color:var(--ui-focus);font-weight:var(--ui-weight-title)}
body .ui-reference-table .ui-reference-person-link {padding:0!important;background:transparent!important;border:0!important;color:var(--ui-text);font-weight:var(--ui-weight-title);text-align:left;min-height:var(--ui-space-8)}
body .ui-reference-row-actions {white-space:nowrap}
body .ui-reference-row-actions button {display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-space-8);padding:var(--ui-space-1) var(--ui-space-3)!important;border-radius:var(--ui-space-4);border:1px solid var(--ui-action-border);color:var(--ui-focus);margin:var(--ui-space-1)}
body .ui-reference-net {display:inline-block;padding:var(--ui-space-1) var(--ui-space-2);background:var(--ui-selected-bg);border-radius:var(--ui-space-1);white-space:nowrap}
body .ui-reference-stats {display:grid;grid-template-columns:repeat(var(--ui-metric-columns),minmax(0,1fr));gap:var(--ui-card-gap)}
body .ui-reference-stat {display:grid;grid-template-rows:minmax(var(--ui-control-height),auto) auto 1fr;gap:var(--ui-space-2);padding:var(--ui-card-padding);border:1px solid var(--ui-action-border);border-radius:var(--ui-space-4);background:var(--ui-reference-stat-surface);color:var(--ui-reference-stat-text);min-width:0}
body .ui-reference-stat[data-tone=deduction] {background:color-mix(in srgb,var(--danger,#e57575) 10%,var(--ui-reference-stat-surface))}
body #payroll-workspace .ui-reference-stat h3 {font-size:var(--ui-caption)!important;text-transform:uppercase;color:var(--ui-reference-stat-text)!important;margin:0!important}
body #payroll-workspace .ui-reference-stat > strong {font-size:var(--ui-title);font-weight:var(--ui-weight-title);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body #payroll-workspace .ui-reference-stat p {font-size:var(--ui-caption)!important;color:var(--ui-reference-stat-text)!important;margin:0}
body .ui-reference-pagination,body .ui-reference-helper {margin-top:var(--ui-space-4)}
body .ui-sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:760px){
 body .ui-reference-toolbar {width:100%}
 body .ui-reference-toolbar label {flex-basis:calc(50% - var(--ui-space-3))}
 body .ui-reference-toolbar label:has(input),body .ui-reference-toolbar > button {flex-basis:100%;width:100%}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table {display:block;min-width:0!important}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table tbody {display:grid;gap:var(--ui-space-3)}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table tbody tr {display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--ui-panel-border);border-radius:var(--ui-radius);padding:var(--ui-space-2)}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table td {display:block;min-width:0!important;width:auto!important;border:0;padding:var(--ui-space-2)!important;text-align:left;white-space:normal}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table td::before {content:attr(data-label);display:block;color:var(--ui-muted);font-weight:var(--ui-weight-label);margin-bottom:var(--ui-space-1)}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table .ui-reference-person-link,body .ui-reference-row-actions button {min-height:var(--ui-control-height)}
}

body :is(#hris-employee-profile,#payroll-workspace) :is(button,input,select,textarea) {background:color-mix(in srgb,var(--ui-reference-accent) 5%,var(--ui-surface));color:var(--ui-text);border-color:var(--ui-action-border)}
body #payroll-workspace .ui-reference-segments button {background:transparent;border-color:transparent}
body #payroll-workspace .ui-reference-segments button[aria-pressed=true] {background:var(--ui-selected-bg);color:var(--ui-focus)}
body #hris-employee-profile .ui-reference-row-actions button {color:var(--ui-focus);border-radius:var(--ui-space-4)}

body #payroll-workspace #pay-open-preparation[data-ui-tone=primary] {background:var(--ui-focus);color:var(--ui-reference-stat-text)}

:root[data-theme=light] {--ui-reference-accent:color-mix(in srgb,var(--ui-finance-accent) 45%,#073722)}
body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table th button {background:transparent;border:0;color:inherit}
body .ui-reference-mobile-sort {display:none!important}
@media(max-width:760px){
 body .ui-reference-mobile-sort {display:grid!important;gap:var(--ui-space-2)}
 body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table thead {display:none!important}
}

/* Standalone components keep a complete readable light theme even without the legacy shell. */
:root[data-theme=light] {--ui-surface:var(--bg-sidebar,#f7faf8);--ui-text:var(--text-primary,#152019);--ui-border:var(--glass-border,#c9d6ce)}
body .ui-reference-workspace {color:var(--ui-text)}
body #payroll-workspace a {color:var(--ui-focus)}
body :is(#hris-employee-profile,#payroll-workspace) :focus-visible {outline-color:var(--ui-focus)}
@media(max-width:760px){body :is(#hris-employee-profile,#payroll-workspace) .ui-reference-table td {text-align:left!important}}

/* HRIS-REF2: owner revision restores SUBA black/yellow/white through shared tokens. */
:root,:root[data-theme=light] {--ui-reference-accent:var(--primary,#f4cf47);--ui-reference-stat-surface:var(--ui-surface);--ui-reference-stat-text:var(--ui-text)}
body .ui-reference-panel {background:var(--ui-surface)}
body .ui-reference-table thead {background:color-mix(in srgb,var(--ui-reference-accent) 7%,var(--ui-surface))}
body .ui-reference-stat {background:var(--ui-surface);border-top:var(--ui-space-1) solid var(--ui-reference-accent)}
body .ui-reference-stat[data-tone=deduction] {background:var(--ui-surface)}
body .ui-reference-stat h3 {margin:0!important;font-size:var(--ui-caption)!important;color:var(--ui-muted)!important}
body .ui-reference-stat > strong {font-size:var(--ui-title);font-weight:var(--ui-weight-title);font-variant-numeric:tabular-nums}
body #payroll-workspace #pay-open-preparation[data-ui-tone=primary] {color:#171717}
body #hrep-dialog {max-width:calc(100vw - var(--ui-space-8))}
body #hrep-dialog [hidden] {display:none!important}

:root[data-theme=light] {--ui-reference-accent:color-mix(in srgb,var(--primary,#f4cf47) 35%,#171717)}
body #payroll-workspace #pay-open-preparation[data-ui-tone=primary] {background:var(--primary,#f4cf47);color:#171717}

body #hris-employee-profile .hrd-card,body #hrep-dialog,body #payroll-workspace .pay-card,body #payroll-workspace dialog {background:var(--ui-surface);color:var(--ui-text)}
body #hrep-dialog[data-employee-mode=salary] :is(#hrep-identity,#hrep-placement,#hrep-name) {display:none}

body #hrd-workspace .hrd-card {background:var(--ui-surface);color:var(--ui-text)}

body #hrep-dialog .ui-state:empty {display:none}
body .ui-reference-workspace progress {accent-color:var(--primary,#f4cf47)}

/* Shared per-amount salary/D-Point privacy; number validation and values stay intact. */
.ui-salary-value,.ui-salary-input{display:inline-flex;align-items:center;gap:var(--ui-space-2);max-width:100%;min-width:0;vertical-align:middle}
.ui-salary-input{width:100%}.ui-salary-input>input{min-width:0;flex:1;width:100%}
body .ui-salary-eye{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 var(--ui-control-height)!important;width:var(--ui-control-height)!important;min-width:var(--ui-control-height)!important;height:var(--ui-control-height);padding:var(--ui-space-2)!important;line-height:1}
.ui-salary-eye svg{width:var(--ui-heading);height:var(--ui-heading);stroke:currentColor;stroke-width:1.8;fill:none;pointer-events:none}
body .ui-salary-value > [data-salary-detail-value]{flex-shrink:0;text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
@media(min-width:761px){
 body #payroll-workspace .ui-reference-table td[data-label="Karyawan"]{min-width:var(--ui-table-identity-min)!important;overflow-wrap:break-word}
 body #payroll-workspace .ui-reference-table td[data-label="Aksi"]{min-width:var(--ui-table-action-min)!important}
 body #payroll-workspace .ui-reference-table td[data-label="Aksi"] button{white-space:nowrap}
}
.ui-salary-mask{flex:1;min-height:var(--ui-control-height);align-content:center;border:1px solid var(--ui-border);border-radius:var(--ui-radius);padding-inline:var(--ui-control-x)}
.ui-salary-input>[hidden]{display:none!important}
@media print{.ui-salary-eye{display:none!important}}

/* Shared action affordance overrides legacy inline/component paint, not layout.
   Primary, danger and selected controls retain their explicit semantic colors. */
body :is(.view-section,dialog,.modal-overlay,.ui-controls,.top-header,[id=global-mobile-nav]) :is(button,[role=button]):where(:not(:disabled):not([aria-disabled=true]):not([data-clock-state]):not([data-ui-tone=primary]):not([data-ui-tone=danger]):not(.danger):not(.danger-btn):not(.btn-danger):not([aria-pressed=true]):not([aria-selected=true]):not([aria-current=page])) {
    color:var(--ui-action-ink)!important;background-color:var(--ui-action-surface)!important;border-color:var(--ui-action-border)!important;
}
body :is(.view-section,dialog,.modal-overlay,.ui-controls) :is(button,[role=button]):is(:disabled,[aria-disabled=true]) {opacity:.45;cursor:not-allowed}
@media(hover:hover) {
    body :is(.view-section,dialog,.modal-overlay,.ui-controls,.top-header,[id=global-mobile-nav]) :is(button,[role=button]):where(:not(:disabled):not([aria-disabled=true])):hover {border-color:var(--ui-hover-border)!important}
}

/* The explicit owner action remains visible when the mobile sidebar is closed. */
body .ui-impersonation-entry {position:relative;max-width:100%}
body #impersonation-picker[data-placement="header"] {top:calc(100% + var(--ui-space-3));bottom:auto;inset-inline-start:0;inset-inline-end:auto;width:min(85vw,calc(var(--ui-control-height) * 8));max-width:calc(100vw - var(--ui-space-4) * 2)}
body #impersonation-open {min-height:var(--ui-control-height);padding:var(--ui-control-y) var(--ui-control-x);font-size:var(--ui-control);font-family:inherit;cursor:pointer}
/* Compact daily summary: one row per day; session details stay in the drilldown. */
body :is(#hrd-detail,#att-clock-dialog) {background:var(--ui-surface);color:var(--ui-text)}
body table.ui-daily-attendance {display:table!important;table-layout:fixed;width:100%;border-collapse:collapse}
body table.ui-daily-attendance thead {display:table-header-group!important}
body table.ui-daily-attendance tbody {display:table-row-group!important}
body table.ui-daily-attendance tr {display:table-row!important;border:0!important}
body table.ui-daily-attendance :is(th,td) {display:table-cell!important;padding:var(--ui-space-2)!important;vertical-align:middle;font-size:var(--ui-label);overflow-wrap:anywhere;border-bottom:1px solid var(--ui-border)!important}
body table.ui-daily-attendance td::before {display:none!important}
body table.ui-daily-attendance button {min-width:0;max-width:100%;white-space:normal;font-size:inherit}

body .ui-camera-preview {display:block;max-width:100%;max-height:calc(var(--ui-control-height) * 5);border-radius:var(--ui-radius);margin-block:var(--ui-space-3)}

/* REV-U2: SUBA black, yellow and white; reference composition uses shared tokens. */
:root { --primary:#f2c94c; --primary-glow:rgba(242,201,76,.12); --ui-focus:var(--primary); --ui-action-ink:var(--primary); --bg-main:#101010; --bg-card:#1b1b1b; --bg-card-hover:#252525; --bg-sidebar:#161616; --glass-border:#383838; --border:var(--glass-border); --ui-surface:var(--bg-card); --ui-border:var(--glass-border); --text-primary:#f7f7f5; --text-secondary:#b8b8b2; --text-muted:#a4a49e; --ui-muted:var(--text-secondary); --ui-reference-sidebar:#101010; --ui-sidebar-text:#f7f7f5; --ui-sidebar-muted:#b8b8b2; --ui-sidebar-active:#2b2618; --ui-heading-on-dark:#e5e5df; --ui-subheading-on-dark:#c8c8c2; --ui-heading-on-light:#292929; --ui-subheading-on-light:#484848; }
:root[data-theme="light"] { --primary:#f2c94c; --primary-glow:rgba(242,201,76,.12); --bg-main:#f5f5f3; --bg-card:#fff; --bg-card-hover:#f6f6f3; --bg-sidebar:#fff; --text-primary:#191919; --text-secondary:#5f5f59; --text-muted:#686862; --glass-border:#deded8; --border:var(--glass-border); --ui-focus:#785b09; --ui-action-ink:#785b09; --ui-surface:#fff; --ui-border:var(--glass-border); --ui-muted:var(--text-secondary); --ui-finance-light-background:var(--bg-main); --ui-finance-light-surface:#fff; --ui-finance-light-text:var(--text-primary); --ui-finance-light-muted:var(--text-secondary); --ui-finance-accent:#785b09; }
body .sidebar { --bg-sidebar:var(--ui-reference-sidebar); --primary:#f2c94c; --ui-focus:var(--primary); --text-primary:var(--ui-sidebar-text); --text-secondary:var(--ui-sidebar-muted); --text-muted:var(--ui-sidebar-muted); --glass-border:#34342e; color:var(--text-primary); box-shadow:none; }
body .sidebar :is(.nav-item,.nav-label,.nav-group-title) { color:var(--text-secondary); }
body .sidebar .nav-item:is(.active,[aria-current="page"]) { background:var(--ui-sidebar-active); color:var(--primary); border-radius:var(--ui-radius); box-shadow:inset 2px 0 var(--primary); }
body .top-header { background:var(--ui-surface); border-bottom:1px solid var(--ui-border); box-shadow:none; }
body :is(.stat-card,.setup-card,.chart-container,.att-card,.my-kpi-plan-sheet,.serp-card,.ui-panel) { border-radius:var(--ui-radius); border-color:var(--ui-border); box-shadow:0 1px 2px color-mix(in srgb,var(--ui-text) 6%,transparent); background:var(--ui-surface); }
body .view-section :is(h1,h2,h3) { letter-spacing:var(--ui-letter-title); }
body .view-section :is(.stat-value,.metric-value) { font-variant-numeric:tabular-nums; }
body :is(.view-section,dialog) [hidden] { display:none!important; }
.ui-easy-kpi { display:grid; gap:var(--ui-space-4); }
.ui-easy-kpi article { padding:var(--ui-card-padding); border:1px solid var(--ui-border); }
.ui-easy-kpi details { margin-top:var(--ui-space-3); }
.ui-easy-kpi .ui-form { margin-top:var(--ui-space-3); }
.ui-easy-kpi [data-easy-sub] { border-left:2px solid var(--ui-border); padding-left:var(--ui-space-3); }
.ui-easy-kpi .ui-actions > input { flex:1 1 180px; min-width:0; }
.att-clock-shell.att-simple { max-width:min(var(--ui-dialog-width),calc(100vw - var(--ui-space-8))); }
.att-simple :is(#att-location-quality,#att-step-3,#att-reason-help,#att-clock-progress,#att-location-options,#att-gps-exception-label) { display:none!important; }
.att-simple #att-additional-options > summary,.att-simple #att-photo-options > summary,.att-simple #att-photo-options > .att-hint { display:none; }
.att-simple #att-step-1 { margin-bottom:var(--ui-space-3); }
.att-simple #att-clock-readiness:empty { display:none; }
.att-simple #att-clock-result { padding:var(--ui-space-4); border-left:var(--ui-space-1) solid var(--success); }
@media(max-width:760px) {
    .ui-easy-kpi .ui-actions { flex-wrap:wrap; }
    .ui-easy-kpi [data-easy-sub] > input { flex-basis:100%; }
    body .view-section :is(.form-grid-2,.form-grid-3) { grid-template-columns:minmax(0,1fr); }
    body .view-section :is(.stat-grid,.stats-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ui-space-3); }
}

body :is(.view-section,dialog,.ui-controls) [data-ui-tone="primary"]:not(.danger) { background:var(--primary);color:#191919;border-color:var(--primary); }

body .ui-easy-kpi button {border:1px solid var(--ui-action-border);border-radius:var(--ui-radius);}

body .ceo-health-banner {background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);box-shadow:none;border-radius:var(--ui-radius);padding:var(--ui-card-padding);}
body .ceo-health-banner :is(h3,p) {color:var(--ui-text);}
body #easy-kpi-history {max-width:100%;overflow:auto;margin-block:var(--ui-space-4);}

:root,:root[data-theme="light"] {--ui-finance-light-background:#f5f5f3;--ui-finance-light-surface:#fff;--ui-finance-light-text:#191919;--ui-finance-light-muted:#5f5f59;--ui-finance-light-border:#deded8;}

/* Short captions share one scale; names, values and decision alerts retain full text. */
body :is(.view-section,dialog,.modal-overlay,.access-card) :is([data-ui-copy="caption"],.ui-caption,.att-hint,.hrd-hint,.pay-hint,.fin-hint,.intro) {font-size:var(--ui-caption)!important;line-height:var(--ui-line);color:var(--ui-caption-color);}
body .ui-copy-help {margin-block:var(--ui-space-2);font-size:var(--ui-caption);color:var(--ui-muted);}
body .ui-copy-help > summary {cursor:pointer;width:fit-content;min-height:var(--ui-control-height);align-content:center;color:var(--ui-action-ink);}
body .ui-copy-help > div {max-width:var(--ui-copy-max);padding:var(--ui-space-3);border-left:2px solid var(--ui-border);line-height:var(--ui-line);}
body .ui-copy-help > summary:focus-visible {outline:2px solid var(--ui-focus);outline-offset:3px;}
body :is(.view-section,dialog,.ui-controls) :is(.primary-btn,[data-ui-tone="primary"]):where(:not(.danger,.danger-btn,.btn-danger,.ghost,[data-ui-tone="danger"],[data-ui-tone="ghost"])) {background:var(--primary)!important;color:#171717!important;border-color:var(--primary)!important;}
body .division-card {border-top-color:var(--primary)!important;}
body #sidebar-user-avatar {background:var(--ui-sidebar-active);color:var(--primary);border:1px solid var(--glass-border);}

/* ATT-SIMPLE1: shared review and compact disclosure use existing tokens. */
#ui-save-review{color:var(--text-primary);background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--ui-radius);padding:var(--ui-space-6);width:min(620px,calc(100vw - 32px));max-height:85vh;overflow:auto;}
#ui-save-review::backdrop{background:#0009;}
.ui-save-summary{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:var(--ui-space-3);overflow-wrap:anywhere;}
.ui-save-summary dd{margin:0;}
[data-att-details] .ui-form{padding:var(--ui-space-3);border-bottom:1px solid var(--glass-border);}