html[data-theme="dark"]{
 color-scheme:dark;--bg:#1C2733;--surface:#253442;--surface-strong:#304252;--border:#62788B;
 --text:#F2F6FA;--text-muted:#D2DCE5;--text-faint:#CBD6E0;--accent:#AFCBE0;--accent-deep:#8CB2CD;
 --accent-gradient:linear-gradient(135deg,#AFCBE0,#96B8D1);--on-accent:#172A3B;
 --success-bg:#293F32;--success-text:#D5EFDD;--warning-bg:#483B25;--warning-text:#F9E5BC;--danger-bg:#4B3030;--danger-text:#FFDADB;--neutral-bg:#3E3D3B;--neutral-text:#E5E1DA;
}
html[data-theme="light"]{
 color-scheme:light;--bg:#F1F5F8;--surface:#FFFFFF;--surface-strong:#E7EEF4;--border:#A5B6C5;
 --text:#203345;--text-muted:#354A5C;--text-faint:#3A4D5E;--accent:#315873;--accent-deep:#294C68;
 --accent-gradient:linear-gradient(135deg,#315873,#294C68);--on-accent:#FFFFFF;
 --success-bg:#EAF3EC;--success-text:#234F32;--warning-bg:#F7EEDB;--warning-text:#61400D;--danger-bg:#F9E9E8;--danger-text:#762E31;--neutral-bg:#EFEBE3;--neutral-text:#49453F;
}
:root{--paper:#FFFFFF;--paper-text:#2A2A2A;--paper-line:#BDBDBD;--paper-soft:#F5F5F5;--paper-head:#333333;--app-font:"Cairo",Tahoma,sans-serif}
.test-copy-notice{padding:14px 140px 14px 18px;background:var(--surface-strong);color:var(--text);font-size:13px;border-bottom:1px solid var(--border)}
.test-copy-notice a{color:var(--text);margin-inline:16px}
html,body{background:var(--bg);color:var(--text)}
html[data-theme] :where(button,input,select,textarea,a){transition:color 200ms,background-color 200ms,border-color 200ms}
html[data-theme] :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--text)!important;outline-offset:3px}
html[data-theme] :where(input,select,textarea){color:var(--text);background:var(--surface);border-color:var(--border)}
html[data-theme] :where(input,textarea)::placeholder{color:var(--text-faint);opacity:1}
.appearance-controls{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:1000;display:flex;gap:8px;direction:ltr}
.appearance-controls button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;border:1px solid var(--border);border-radius:13px;color:var(--text);background:var(--surface);font:inherit;cursor:pointer;box-shadow:none}
.appearance-controls svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.theme-sun{display:none}html[data-theme="dark"] .theme-sun{display:block}html[data-theme="dark"] .theme-moon{display:none}
html[data-theme] :is(.shell,.pearl-portal,.dd-login-shell,.login.access-gate){background:var(--bg)!important;color:var(--text);direction:inherit}
html[data-theme] :is(.sidebar,.dd-login-panel,.login-card,.table-wrap,.report-toolbar,.employees,.archive-list,.upload-card,.supplier-form,.supplier-accounts,.client-card,.report-cards article,.metrics article,.works,.service-popover,.security-form,.employee-group){background:var(--surface)!important;color:var(--text);border:1px solid var(--border);border-radius:13px;box-shadow:none!important}
html[data-theme] :is(.content>header,.dd-login-visual){background:radial-gradient(ellipse at 65% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%);padding-top:48px}
html[data-theme] :is(button,.button,.payroll-panel button,.page-heading button,.section-title button,.report-tabs button.active,.service-group>button){color:var(--text)!important;background:var(--surface)!important;border-color:var(--border);box-shadow:none!important;text-shadow:none!important}
html[data-theme] :is(.dd-login-submit,.access-primary,[data-primary="true"]){background:var(--accent-gradient)!important;color:var(--on-accent)!important;border:1px solid var(--accent-deep);opacity:1!important;filter:none!important}
html[data-theme] :is(button:disabled,input:disabled){opacity:1!important;color:var(--text-faint)!important;background:var(--surface-strong)!important}
html[data-theme] :is(.elite-monogram,.elite-wordmark,.brand-mark span,.brand-mark small){color:var(--text)!important;text-shadow:none!important}
html[data-theme] :is(.dd-password-control,.dd-login-field>input){background:var(--surface);color:var(--text)}
html[data-theme] :is(.dd-login-field small,.error){color:var(--danger-text);background:var(--danger-bg)}
html[data-theme] :is(table th,table tfoot,.employee-gross){background:var(--surface-strong)!important;color:var(--text)}
html[data-theme] tbody tr:nth-child(even){background:var(--surface-strong)!important}
html[data-theme] :is(.muted,small,.report-note,.access-description){opacity:1;color:var(--text-muted)}
html[data-theme] p{line-height:1.6}html[data-theme] :is(h1,h2,h3,h4){line-height:1.4}
.numeric,[dir="ltr"].identity-number,input[type=number],input[type=tel],input[type=email],input[type=date],time{direction:ltr;unicode-bidi:isolate;text-align:left;font-variant-numeric:tabular-nums}
html[dir="ltr"] :is(.service-group>button,.service-popover button,.sidebar button){text-align:left}
.toolbar{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;padding-top:64px!important}
.toolbar button,#message{color:var(--text)!important}.toolbar button{background:var(--surface)!important;border-color:var(--border)!important}
.print-page,.print-report{background:var(--paper)!important;color:var(--paper-text)!important;color-scheme:light}
.print-report :is(th,td,p,small,span,h1,h2,h3,strong){color:var(--paper-text)!important;opacity:1}
.print-report th,.print-report tfoot{background:var(--paper-soft)!important}
@media print{html,body{background:var(--paper)!important;color:var(--paper-text)!important;color-scheme:light}.appearance-controls,.toolbar{display:none!important}.print-page,.print-report{background:var(--paper)!important;color:var(--paper-text)!important}}
@media(prefers-reduced-motion:reduce){html[data-theme] *{transition:none!important;animation:none!important}}

html[data-theme] body .dd-login-shell .dd-login-submit,html[data-theme] body [data-primary="true"][data-primary="true"]{background:var(--accent-gradient)!important;color:var(--on-accent)!important;opacity:1!important;filter:none!important}

html[data-theme] .numeric{display:block;direction:ltr;text-align:left;font-variant-numeric:tabular-nums}
html[data-theme] :is(.status.confirmed,.import-status.confirmed,.status.done){color:var(--success-text)!important;background:var(--success-bg)!important}
html[data-theme] :is(.status.review,.status.needs-review,.import-status.needs-review){color:var(--warning-text)!important;background:var(--warning-bg)!important}
html[data-theme] :is(.status.unanalyzed,.import-status.unanalyzed,.status.unprocessed){color:var(--neutral-text)!important;background:var(--neutral-bg)!important}
html[data-theme] :is(.archive-print-sheet,.archive-print-sheet table,.archive-print-sheet td,.archive-print-sheet th){background:var(--paper)!important;color:var(--paper-text)!important;border-color:var(--paper-line)!important}
.archive-print-sheet{color-scheme:light}
html[data-theme] .dd-login-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--surface) inset!important;-webkit-text-fill-color:var(--text)!important}

html[data-theme] :is(p,small,label,td,th,strong){opacity:1!important}
html[data-theme] :is(.shell-enter,.content-surface,.sidebar){animation:none}
html[data-theme] .import-status:is(.excluded,.duplicate){color:var(--neutral-text)!important;background:var(--neutral-bg)!important}
html[data-theme] .print-report{padding:24px;max-width:1200px;margin:20px auto}
@media print{html[data-theme] .print-report{padding:0;margin:0;max-width:none}}

html[data-theme] :where(body,.shell,.sidebar,.content,.table-wrap,.report-toolbar,.employee-group,.dd-login-panel,.dd-login-visual,td,th){transition:background-color 200ms,color 200ms,border-color 200ms}
html[data-theme] .content>header{animation:none}

html[data-theme] .payroll-named-date{direction:ltr;text-align:left;font-variant-numeric:tabular-nums}

.receipt-admin{margin-block:24px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:13px}.receipt-admin label{display:block;margin-block:12px}.receipt-admin select{max-width:100%;min-height:44px}.receipt-admin button{min-height:44px;padding:8px 16px}.receipt-admin td{vertical-align:middle}html[data-theme] body .salary-receipt,html[data-theme] body .salary-receipt *{color:var(--paper-text)!important}html[data-theme] body .salary-receipt,html[data-theme] body .salary-receipt table,html[data-theme] body .salary-receipt td,html[data-theme] body .salary-receipt th{background:var(--paper)!important}

/* Use the approved accent for headings, independently of surface aliases. */
@media screen{
 html[data-theme] .shell :is(h1,h2,h3,h4),html[data-theme] .shell .page-heading :is(h1,h2,h3,h4) :is(span,bdi){color:var(--accent);-webkit-text-fill-color:currentColor;background-image:none}
 html[data-theme] .shell table th{color:var(--accent)}
 html[data-theme] .payroll-panel .numeric{display:inline-block;vertical-align:baseline}
 html[data-theme] .payroll-panel .payroll-hint,html[data-theme] .payroll-panel .payroll-approval,html[data-theme] .receipt-admin>p{font-size:13px;line-height:1.8;color:var(--text-muted);margin-block:10px}
 .payroll-panel .payroll-guidance{margin-block:16px;padding:12px 16px;border:1px solid var(--border);border-inline-start:3px solid var(--accent);border-radius:12px;background:var(--surface)}
 .payroll-panel .payroll-guidance summary{cursor:pointer;color:var(--accent);font-size:14px;line-height:1.7;min-height:28px}
 .payroll-panel .payroll-guidance p{font-size:13px;line-height:1.9;color:var(--text-muted);margin-block:10px}
 .payroll-panel .payroll-guidance bdi{white-space:nowrap}
 .shell .payroll-panel .payroll-run-heading{align-items:center;flex-wrap:wrap;margin-block:18px;margin-bottom:16px;gap:12px}
 .payroll-panel .payroll-run-heading>div{flex:1 1 260px}
 .payroll-panel .payroll-run-heading>button{flex:0 0 auto;white-space:nowrap;margin:0;min-height:44px}
 .payroll-panel .payroll-run-heading h3{font-size:20px;margin:0 0 8px}
 .payroll-panel .payroll-run-heading p{margin-block:6px;font-size:14px}
 .payroll-panel .payroll-approval time{display:inline-block;white-space:nowrap}
 .payroll-panel td{vertical-align:top}
}

/* Printed documents keep their own paper palette, including headings and summaries. */
html[data-theme] body .archive-print-sheet,
html[data-theme] body .archive-print-sheet *{
 background:#FFFFFF!important;background-image:none!important;color:#292929!important;
 -webkit-text-fill-color:currentColor!important;border-color:#BDBDBD!important;
 text-shadow:none!important;box-shadow:none!important;
}
html[data-theme] body .archive-print-sheet :is(th,tfoot td,.print-report-summary span){background:#F7F5F1!important}
@media print{
 :root,html[data-theme]{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-strong:#F7F5F1;--border:#BDBDBD;
  --text:#292929;--text-muted:#505050;--text-faint:#505050;--accent:#292929;--accent-deep:#292929;
  --accent-gradient:linear-gradient(#F7F5F1,#F7F5F1);--on-accent:#292929;
  --success-bg:#F7F5F1;--success-text:#292929;--warning-bg:#F7F5F1;--warning-text:#292929;
  --danger-bg:#F7F5F1;--danger-text:#292929;--neutral-bg:#F7F5F1;--neutral-text:#292929;
 }
 html[data-theme] body :is(.print-report,.salary-receipt),
 html[data-theme] body :is(.print-report,.salary-receipt) *{
  color:#292929!important;-webkit-text-fill-color:currentColor!important;
  background:#FFFFFF!important;background-image:none!important;
  border-color:#BDBDBD!important;text-shadow:none!important;box-shadow:none!important;
 }
 html[data-theme] body :is(.print-report,.salary-receipt) :is(th,tfoot td,.status){background:#F7F5F1!important}
 .document-controls,.print-preview-actions,.receipt-actions,.appearance-controls,.toolbar{display:none!important}
}

@media screen{
 html[data-theme] .shell .portal-back{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 0 8px;padding:0 4px;border:0;background:transparent!important;color:var(--text-muted)!important;font:inherit;font-size:12px;cursor:pointer}
}

@media screen {
 html[data-theme] .skip-navigation{position:fixed;inset-block-start:8px;inset-inline-start:12px;z-index:10000;padding:12px 16px;background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border);border-radius:6px;transform:translateY(-200%)}
 html[data-theme] .skip-navigation:focus{transform:none}
 html[data-theme] .archive-print-sheet :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:#292929!important}
}
@media print{.skip-navigation{display:none!important}}

/* Screen-only application palette: printed payroll and QR retain their paper colors. */
@media screen{
 html[data-theme]{--gold:var(--accent);--canvas:var(--bg);--ink:var(--text);--muted:var(--text-muted);--line:var(--border);--card:var(--surface);--soft:var(--surface-strong);--app-primary:var(--accent);--app-line:var(--border);--app-muted:var(--text-muted)}
 html[data-theme] .employee-directory{--card-accent:var(--accent);--card-tint:var(--surface-strong)}
 html[data-theme] body :is(.employee-primary,.dd-login-submit,.access-primary,.save-upload,[data-primary="true"]):not(:disabled){background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent-deep)!important}
 html[data-theme] body :is(.sidebar nav button.active,.report-tabs button.active,.service-group>button[aria-expanded="true"]){background:var(--surface-strong)!important;color:var(--accent)!important;border-color:var(--accent)!important}
 html[data-theme] body :is(.employee-card,.employee-directory-summary,.employee-card-expansion,.employee-notes-panel,.employee-note-history article){background:var(--surface);color:var(--text);border-color:var(--border)}
 html[data-theme] body .employee-card-finances{background:var(--surface-strong);color:var(--accent)}
 html[data-theme] body .employee-card :is(button[aria-expanded="true"],.employee-card-footer button){color:var(--accent)!important}
 html[data-theme] body :is(.employee-avatar,.employee-card-facts svg){color:var(--accent)}
 html[data-theme] body .employee-status.active{background:var(--success-bg);color:var(--success-text)}
 html[data-theme] body .employee-status.ended{background:var(--danger-bg);color:var(--danger-text)}
 html[data-theme] body .employee-status.suspended{background:var(--neutral-bg);color:var(--neutral-text)}
 html[data-theme] body :is(input,select,textarea){accent-color:var(--accent)}
}

/* Keep mobile headings above their actions, rather than squeezing Arabic text. */
@media screen and (max-width:780px){
 html[data-theme] .shell .page-heading{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 html[data-theme] .shell .page-heading>h2,html[data-theme] .shell .page-heading>div{width:100%;min-width:0;max-width:100%}
 html[data-theme] .shell .page-heading h2{overflow-wrap:normal;word-break:normal;white-space:normal}
 html[data-theme] .shell .page-heading .report-actions{display:flex;flex-wrap:wrap;align-self:stretch;flex-shrink:1;gap:8px}
 html[data-theme] .shell .page-heading .report-actions>button,html[data-theme] .shell .page-heading .report-actions>a{max-width:100%;white-space:normal;min-width:0;margin:0}
 body:has(.shell)>.appearance-controls{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}
 html[data-theme] .shell .content{padding-top:calc(76px + env(safe-area-inset-top,0px))}
}