/* Dark mode - light remains the default. */
.theme-toggle{order:3;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.52);background:linear-gradient(180deg,#fff 0,#e8eef7 100%);color:#16305c;box-shadow:0 3px 0 rgba(12,40,82,.55),0 6px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.85);cursor:pointer;font-family:Cairo,system-ui,"Segoe UI",Tahoma,sans-serif;font-size:14px;font-weight:800;line-height:1;white-space:nowrap;transition:transform .12s ease,filter .15s ease,box-shadow .12s ease}
.theme-toggle:hover{filter:brightness(1.04)}
.theme-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(12,40,82,.55),0 2px 5px rgba(0,0,0,.2)}
.theme-toggle:focus-visible{outline:3px solid rgba(201,162,74,.75);outline-offset:3px}
.theme-toggle svg{width:19px;height:19px;flex:none;display:block}
.theme-toggle .theme-icon-sun{display:none}
html.dark .theme-toggle{border-color:#617fa4;background:linear-gradient(180deg,#2a4567 0,#152844 100%);color:#f2f7ff;box-shadow:0 3px 0 #071425,0 8px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.16)}
html.dark .theme-toggle .theme-icon-moon{display:none}
html.dark .theme-toggle .theme-icon-sun{display:block}
@media screen{
html.dark{color-scheme:dark;--bg:#0c1726;--ink:#edf4ff;--ink2:#b7c9dd;--line:#2d425a;--line2:#48617e;--teal:#79c0ff;--teal2:#3f8fdb;--soft:#15233a;--blue-soft:#1c3657;--bad:#ff8f9a;--ok:#69d69e;--warn:#ffd166}
html.dark body{background:linear-gradient(180deg,#0c1a2e 0,#101b2b 360px,#0d1726 100%);color:var(--ink)}
html.dark .top{background:#071c3a;border-bottom-color:#c9a24a;box-shadow:0 4px 20px rgba(0,0,0,.42)}
html.dark .top .idtext p{color:#dbe7f7}
html.dark .top .idtext .phone{color:#ffd98a}
html.dark .top .logo,html.dark .gate-brand img{filter:none;border-color:#d4af5f!important;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.top .le-lockup{order:4}
html.dark .le-lockup{background:#f6f8fb;border-color:rgba(255,255,255,.68);box-shadow:0 3px 12px rgba(0,0,0,.55)}
html.dark .privacy{background:#111f34;border-color:#385574;color:#dce8f7;border-right-color:#79c0ff;box-shadow:0 8px 22px rgba(0,0,0,.24)}
html.dark .privacy a{color:#9ed0ff}
html.dark .tabs{border-bottom-color:#385574}
html.dark .tabs a,html.dark .btn{border-color:#48617e;background:linear-gradient(180deg,#233957 0,#172941 100%);color:#edf4ff;box-shadow:0 3px 0 #071425,0 6px 12px rgba(0,0,0,.28);text-shadow:none}
html.dark .tabs a:hover,html.dark .btn:hover{background:linear-gradient(180deg,#2b4568 0,#1a304e 100%)}
html.dark .tabs a.sel,html.dark .btn.primary{background:linear-gradient(180deg,#3d86ee 0,#1d5fd0 55%,#1448a6 100%);border-color:#5c9dff;color:#fff;box-shadow:0 3px 0 #092b62,0 8px 16px rgba(29,95,208,.34),inset 0 1px 0 rgba(255,255,255,.32);text-shadow:none}
html.dark .btn.danger{background:linear-gradient(180deg,#48212a 0,#321822 100%);border-color:#89515c;color:#ffb3bb;box-shadow:0 3px 0 #1d0d12,0 6px 12px rgba(0,0,0,.24)}
html.dark .card{background:#111f34;border-color:#334e6e;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.24)}
html.dark .card h2,html.dark .card h3,html.dark .card h4{color:#f0f6ff}
html.dark .note,html.dark .muted,html.dark .foot{color:var(--ink2)}
html.dark .foot a,html.dark .phone{color:#9ed0ff}
html.dark .fld>span{color:#c9daee}
html.dark .fld input,html.dark .fld select,html.dark .fld textarea{background:#0d192b;border-color:#48617e;color:#f3f8ff;box-shadow:inset 0 2px 5px rgba(0,0,0,.34)}
html.dark .fld input::placeholder,html.dark .fld textarea::placeholder{color:#7f96b1}
html.dark .tbl{color:#e8f1fd}
html.dark .tbl th,html.dark .tbl td{border-bottom-color:#334e6e}
html.dark .tbl thead th{background:linear-gradient(180deg,#28588f,#1c426f);color:#fff}
html.dark .tbl tbody tr:nth-child(even){background:#14253d}
html.dark .tbl tbody tr:hover{background:#1c3352}
html.dark .tbl tr.strong td{background:#1c3352}
html.dark .tbl tfoot td{background:#203c5f;color:#fff}
html.dark fieldset{background:#132238;border-color:#48617e;color:#edf4ff}
html.dark fieldset legend{background:linear-gradient(180deg,#2b4568 0,#1a304e 100%);border-color:#5c7ca2;color:#f0f6ff;box-shadow:0 3px 0 #071425,0 6px 12px rgba(0,0,0,.28)}
html.dark #contract-box,html.dark #ct-details,html.dark #ct-archive{background:#132238!important;border-color:#5c7ca2!important;color:#edf4ff}
html.dark #contract-box>legend{background:linear-gradient(180deg,#2b4568 0,#1a304e 100%)!important;border-color:#5c7ca2!important;color:#f0f6ff!important}
html.dark #doc-forms-box,html.dark #df-details,html.dark #df-archive,html.dark #df-editbar{background:#132238!important;border-color:#5c7ca2!important;color:#edf4ff}
html.dark #doc-forms-box>legend{background:linear-gradient(180deg,#2b4568 0,#1a304e 100%)!important;border-color:#5c7ca2!important;color:#f0f6ff!important}
html.dark #df-editbar>div:first-child{color:#f0f6ff!important}
html.dark #df-edit-state{background:#22395a!important;color:#edf4ff!important}
html.dark .modal{background:#111f34;color:var(--ink);border:1px solid #405d7f;box-shadow:0 18px 60px rgba(0,0,0,.55)}
html.dark .mhead,html.dark .mfoot{border-color:#334e6e;background:#15243a;color:#f0f6ff}
html.dark .mbody{color:#dce8f7}
html.dark .error,html.dark .errbox{background:#3a1820;border-color:#79414c;color:#ffb3bb}
html.dark .busy{color:#dce8f7}
html.dark .toast{background:#dce8f7;color:#102033}
html.dark .toast.bad{background:#9e2d3d;color:#fff}
html.dark .photo-box{background:#14243a;border-color:#385574}
html.dark .photo-box .pimg{background:#0c1726;border-color:#48617e}
html.dark .dashboard.dx{box-shadow:0 16px 48px rgba(0,0,0,.36)}
html.dark .dx-card,html.dark .dashboard .dash-section,html.dark .dashboard #alc{border-color:#8eb0d155}
html.dark .dx-card h3,html.dark .dashboard .dash-section h3{color:#f0f6ff}
html.dark .dx-card h3 small,html.dark .dx-note,html.dark .dx-lg,html.dark .dx-leg span,html.dark .dx-leg small,html.dark .dx-bar,html.dark .dash-section-note{color:#c1d4ea}
html.dark .dx-leg b,html.dark .dx-bar b{color:#f0f6ff}
html.dark .dx-m{background:#182c49}
html.dark .dash-kpi{background:#22395a;color:#dce8f7;border-color:#55749d66}
html.dark .dash-kpi:hover{background:#294466}
html.dark .dash-label,html.dark .dash-context,html.dark .dash-unit{color:#b9cde5}
html.dark .dash-value{color:#f0f6ff}
html.dark .dash-meter{background:#152642}
html.dark .dash-link{color:#9ed0ff;border-top-color:#3b587b}
html.dark .dash-overview{background:#1d3b3a;border-color:#3c7669}
html.dark .dash-overview h4,html.dark .dash-overview-value strong{color:#dff8ed}
html.dark .dash-overview-value span,html.dark .dash-legend span{color:#b9d6cc}
html.dark .dash-overview a{color:#9ed0ff}
html.dark .program-gate{background:linear-gradient(165deg,#071a38 0,#0e2a5c 55%,#123f94 100%)!important;color:#fff;border-color:#c9a24a}
html.dark body.program-locked{background:url(assets/login-bg.webp?v=2) center/contain no-repeat,#0a1e3f;background-attachment:fixed;color:#fff}
html.dark .gate-form input{background:#f8fbff;color:#0c1726;border-color:#9fb3ca}
}
@media(max-width:600px){.theme-toggle{min-height:40px;width:40px;padding:0;border-radius:50%}.theme-toggle .theme-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.theme-toggle svg{width:20px;height:20px}}
@media print{
html,html.dark{color-scheme:light}
.theme-toggle{display:none!important}
.top{background:#fff!important;color:#111!important;box-shadow:none!important}
.top .idtext p,.top .idtext a,.top .idtext .phone{color:#111!important;text-shadow:none!important}
.top .logo,.top .le-lockup{box-shadow:none!important}
.tabs{background:transparent!important;border-bottom-color:#b7c1c9!important;box-shadow:none!important}
.tabs a,.btn{background:#fff!important;color:#111!important;border-color:#8a97a8!important;box-shadow:none!important;text-shadow:none!important;filter:none!important}
.tabs a.sel,.btn.primary{background:#e8eef5!important;color:#111!important;border-color:#5f7185!important;box-shadow:none!important;text-shadow:none!important}
}
html.dark .top-clock{color:#dbe7f7}
html.dark .top-clock .tc-time{color:#ffd98a}

/* v7: payroll + shared containers readable in dark mode (screen only; print untouched). */
@media screen{
html.dark .pm-route{background:#132238;border-color:#8a6f2f}
html.dark .sumbox,html.dark .disc,html.dark .live{background:#132238;border-color:#334e6e}
html.dark .hol-ref,html.dark .hol-notice{background:#132238;border-color:#385574}
html.dark .hol-work{background:#132238;border-color:#385574}
html.dark .pm-new{border-color:#5c7ca2}
html.dark .stat{background:#132238}
html.dark .pm-lock{background:#3a2f14;border-color:#8a6f2f;color:#ffd98a}
html.dark .pm-dlg{background:#111f34;color:var(--ink)}
html.dark .pm-exbar{background:#3a2f14!important;color:#ffd98a!important}
}

/* v8: payroll entry grid, review sheet, reports, explain panel and dialogs readable in dark mode (screen only; print and light untouched). */
@media screen{
/* Step 1 entry grid: yellow item cells and their number inputs were light-on-light. */
html.dark .pm-grid th.in{background:#8a5b00;color:#fff}
html.dark .pm-grid td.in{background:#2b2413}
html.dark .pm-grid td.in input{background:#1a1707;border-color:#a8873c;color:#ffe9a8;box-shadow:inset 0 2px 5px rgba(0,0,0,.34)}
html.dark .pm-grid td.in input::placeholder{color:#93804e}
html.dark .pm-grid td.in input[readonly]{background:#221d0e;color:#f3e3ae}
html.dark .pm-grid tr.pm-edit td.in input:not([readonly]){background:#0d1a2c;border-color:#5c9dff;color:#fff}
html.dark .pm-grid td.net{background:#16283f;color:#cfe2ff}
html.dark .pm-grid tr.pm-edit td{box-shadow:inset 0 2px 0 #3d86ee,inset 0 -2px 0 #3d86ee}
html.dark .pm-grid td.cell-bad input,html.dark td.cell-bad input{background:#3d1d22!important;color:#ff9aa2!important;border-color:#c00000!important}
/* Warning rows under employees (advance-over-limit etc.) were invisible: keep them dark and readable. */
html.dark .pm-grid .pm-w td,html.dark .pm-sheet .pm-w td{background:#3a1b20!important;color:#ffb3bb!important;border-top-color:#7a3038!important}
html.dark .pm-sheet .pm-w td{text-align:right}
/* Step 2 review sheet: coloured earning/deduction/net columns. */
html.dark .pm-sheet td.ce{background:#14352a;color:#bfe8cf}
html.dark .pm-sheet td.cd{background:#3d1d22;color:#ffc4ca}
html.dark .pm-sheet td.ci{background:#2a3240;color:#d7e0ec}
html.dark .pm-sheet td.cn{background:#1b2f4d;color:#cfe2ff}
html.dark .pm-sheet td.co{background:#2d2440;color:#e2d8f7}
/* Legacy ordered payroll table totals. */
html.dark .payroll-ordered td.earn-total{background:#14352a;color:#bfe8cf}
html.dark .payroll-ordered td.ded-total{background:#3a2a1a;color:#ffd9b3}
html.dark .payroll-ordered td.net-total{background:#16283f;color:#cfe2ff}
/* Payroll reports (تقارير المرتبات) on screen. */
html.dark .rep td.ce{background:#14352a;color:#bfe8cf}
html.dark .rep td.cn{background:#1b2f4d;color:#cfe2ff}
html.dark .rep tr.sec td{background:#22303f;color:#edf4ff}
html.dark .rep tr.tot2 td{background:#1c2a3a;color:#edf4ff;border-top-color:#48617e}
html.dark .rep tr.info td{color:#9fb2c8}
html.dark .rep tr.fin td{border-top-color:#5c7ca2}
/* Calculation-steps panel (خطوات الحساب) injected by payroll-explain. */
html.dark .px-person{background:#111f34;border-color:#334e6e;color:#dce8f7}
html.dark .px-person>summary{background:#16283f;color:#edf4ff}
html.dark .px-action{background:#1d5fd0;color:#fff}
html.dark .px-hint{color:#9fb2c8}
html.dark .px-row{border-bottom-color:#334e6e;color:#dce8f7}
html.dark .px-row small{color:#8fa6c0}
html.dark .px-tax{background:#16283f;color:#dce8f7}
html.dark .px-legacy{background:#3a2f14;color:#ffd98a}
html.dark .px-compact{background:#132238;border-color:#334e6e;color:#c1d4ea}
/* Payroll dialogs, headings, banners and status lines. */
html.dark .pm-dlg h3{color:#cfe2ff}
html.dark .pm-route h3{color:#cfe2ff}
html.dark .pm-new-s{background:#1b2f4d;color:#cfe2ff}
html.dark .pm-new-s.bad{background:#3d1d22;color:#ffb3bb}
html.dark .pm-legacy{background:#3a2f14;border-color:#8a6f2f;color:#ffd98a}
html.dark .pm-diff{background:#3d1d22;color:#ffb3bb}
html.dark .pm-confirm{background:#2a1a1e;border-color:#9a1c1c;color:#ffc4ca}
html.dark .pm-mv{color:#6fdc9f}
html.dark .pm-special-choice{background:#2b2413;border-color:#a8873c;color:#f3e3ae}
html.dark .pm-special-choice strong{color:#ffd98a}
html.dark .pm-special-choice small{color:#d9b45a}
html.dark .pm-save-status{background:#16283f;color:#c1d4ea}
html.dark .pm-save-status.ok{background:#14352a;border-color:#2f6b4a;color:#bfe8cf}
html.dark .pm-save-status.bad{background:#3d1d22;border-color:#7a3038;color:#ffb3bb}
html.dark .pm-arrow{color:#9ed0ff}
html.dark .pm-bk-s{color:#dce8f7}
}

/* v7 — dark-mode readability on hard-coded light cards (audit fix 2026-10-24).
   These component cards keep their light backgrounds in dark mode; force dark
   text inside them so inherited --ink/--ink2 (near-white) stays readable.
   Screen only: generated print documents carry their own inline styles and
   never load this file, so print output is unaffected. */
html.dark .kp-record,
html.dark .kp-criterion,
html.dark .kp-score,
html.dark .kp-note,
html.dark .kp-dashboard,
html.dark .doc,
html.dark .hol-card,
html.dark .cv-result,
html.dark .rc-card { color:#1b2a3c; }
html.dark .kp-record .fld>span,
html.dark .kp-criterion .fld>span,
html.dark .doc .fld>span,
html.dark .hol-card .fld>span,
html.dark .cv-result .fld>span,
html.dark .rc-card .fld>span { color:#4a5b70; }
html.dark .kp-record .note,
html.dark .kp-record .muted,
html.dark .kp-score .note,
html.dark .kp-note .muted,
html.dark .doc .note,
html.dark .doc .muted,
html.dark .hol-card .note,
html.dark .cv-result .note,
html.dark .rc-card .note { color:#4a5b70; }
html.dark .kp-record a,
html.dark .hol-card a,
html.dark .cv-result a,
html.dark .rc-card a { color:#174c87; }
/* v7b — modal fieldset scope: section-frames.css forces light text inside
   dark modal fieldsets with !important; re-darken text that sits on the
   white document card (.doc) inside those fieldsets. */
html.dark .modal .mbody fieldset .doc .fld>span,
html.dark .modal .mbody fieldset .doc .chk>span,
html.dark .modal .mbody fieldset .doc .note,
html.dark .modal .mbody fieldset .doc p { color:#4a5b70!important; }
/* v7c — dark-mode headings: html.dark .card h2/h3/h4 forces light headings;
   re-darken headings that sit on the white sub-cards. */
html.dark .kp-record h3,
html.dark .kp-dashboard h3,
html.dark .kp-score h3,
html.dark .hol-card h3,
html.dark .cv-result h2,
html.dark .cv-result h3,
html.dark .rc-card h2,
html.dark .rc-card h3 { color:#153d75; }
/* v7d — guard: dark form controls and date overlays keep their bright text
   when they sit on white cards (inputs/selects/textareas are dark-styled;
   overlay text is set inline by dmy-dates.js and must stay light-on-dark). */
html.dark .kp-record input, html.dark .kp-record select, html.dark .kp-record textarea,
html.dark .kp-criterion input, html.dark .kp-criterion select, html.dark .kp-criterion textarea,
html.dark .kp-score input, html.dark .kp-note input,
html.dark .doc input, html.dark .doc select,
html.dark .hol-card input, html.dark .hol-card select,
html.dark .cv-result input, html.dark .cv-result select, html.dark .cv-result textarea,
html.dark .rc-card input, html.dark .rc-card select { color:#f3f8ff; }
html.dark .kp-record .fld>span.dmy-ov, html.dark .kp-criterion .fld>span.dmy-ov,
html.dark .doc .fld>span.dmy-ov, html.dark .hol-card .fld>span.dmy-ov,
html.dark .cv-result .fld>span.dmy-ov, html.dark .rc-card .fld>span.dmy-ov,
html.dark .modal .mbody fieldset .kp-record .fld>span.dmy-ov,
html.dark .modal .mbody fieldset .kp-criterion .fld>span.dmy-ov,
html.dark .modal .mbody fieldset .doc .fld>span.dmy-ov,
html.dark .modal .mbody fieldset .hol-card .fld>span.dmy-ov,
html.dark .modal .mbody fieldset .cv-result .fld>span.dmy-ov,
html.dark .modal .mbody fieldset .rc-card .fld>span.dmy-ov { color:#f3f8ff !important; }