/* One application frame for every monthly payroll tab. */
@media screen {
  body.payroll-workspace-view { background:#e2ecef; background-image:none; padding:0; }
  body.payroll-workspace-view.hr-directory-view { background:#e2ecef linear-gradient(160deg,#e4e6ea 0%,#e2ecf0 55%,#bdeff7 100%) fixed!important; background-size:auto!important; }
  body.payroll-workspace-view > :is(.top,#dock,.sidetab,.gazali-page-back) { display:none!important; }
  body.payroll-workspace-view > main.wrap { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
  .pm-workspace-page { --pm-accent:#5fddee; width:100%; min-width:0; min-height:100dvh; margin:0 auto; padding:12px 12px calc(100px + env(safe-area-inset-bottom,0px)); background:linear-gradient(160deg,#e4e6ea 0%,#e2ecf0 55%,#bdeff7 100%); color:#333; }
  .pm-workspace-page .pm-topbar { min-height:56px; padding:7px 8px; }
  .pm-workspace-page .pm-logo { height:28px; max-width:92px; }
  .pm-workspace-page .pm-clock { font-size:8.5px; }
  .pm-workspace-page .pm-top-actions { gap:5px; }
  .pm-workspace-page .pm-icon-button { width:35px; height:35px; border-radius:11px; }
  .pm-workspace-links { display:none; }
  .pm-workspace-heading { display:flex; align-items:center; gap:8px; margin:18px 0; }
  .pm-workspace-back,.pm-workspace-home { display:flex; align-items:center; justify-content:center; gap:4px; min-height:38px; padding:7px 12px; border:1px solid #fff; border-radius:999px; background:#ffffffb3; color:#36454f; font:inherit; font-size:12px; white-space:nowrap; }
  .pm-workspace-heading .pm-month { width:auto; margin-inline-start:auto; font-size:12px; }
  .pm-workspace-content { min-width:0; }
  .payroll-workspace .pm-nav.payroll-shortcuts :is(a,button):first-child { background:transparent; color:#333; }
  .payroll-workspace .pm-nav.payroll-shortcuts :is(a,button).active { display:flex; flex-direction:column; gap:2px; background:#35373D; color:#fff; font-size:9px; }
  .payroll-workspace .pm-nav.payroll-shortcuts :is(a,button):focus-visible,.pm-workspace-heading button:focus-visible { outline:2px solid #36454f; outline-offset:2px; }
  .pm-workspace-page .payroll-statement { padding:0; border:0; box-shadow:none; background:transparent; }
  /* The statement owns its tables and approval controls, the workspace owns navigation. */
  .pm-workspace-page :is(.pmr-top,.pmr-bottom,.pmr-quick,.crumb) { display:none!important; }
  .pm-workspace-page .payroll-mobile-run { min-height:0; padding:0; color:inherit; }
  .pm-workspace-page .payroll-mobile-run .pmr-title h1 { font-weight:400; }
  .pm-workspace-content :is(.atop,.banner,.abar,.acard,.afl,.kpi) { max-width:100%; }
  .pm-workspace-content :is(.atop,.abar,.abar2,.atr) { flex-wrap:wrap; }
  .pm-workspace-content .atop h2 { font-size:25px; font-weight:400; }
  .pm-workspace-content .lt-wrap { max-width:100%; overflow:auto; }
  .pm-workspace-content .abar .srch { min-width:140px; }
  .pm-workspace-page .pm-bottom { display:flex; z-index:40; }
  .payroll-inputs .ph h2 { font-size:26px; font-weight:400; margin:0; }
  .payroll-inputs .phs { font-size:12px; line-height:1.8; }
  .payroll-inputs .chipsum { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:18px 0; }
  .payroll-inputs .cs { border:1px solid #fff9; border-radius:22px; background:#ffffffad; color:#36454f; padding:18px; box-shadow:none; }
  .payroll-inputs .cs.e { background:#6ddfea; color:#243b40; }
  .payroll-inputs .cs > svg { background:#fff; width:42px; height:42px; padding:9px; border-radius:14px; margin-bottom:8px; }
  .payroll-inputs .csl { color:inherit; font-weight:400; line-height:1.7; }
  .payroll-inputs .csv { font-size:25px; font-weight:500; color:inherit; }
  .payroll-inputs .css { color:#66787d; font-size:11px; }
  .payroll-inputs .segs { background:#ffffff8c; padding:5px; border:1px solid #fff9; border-radius:999px; display:flex; width:fit-content; max-width:100%; }
  .payroll-inputs .segs button { border-radius:999px; padding:10px 16px; font-size:13px; font-weight:400; }
  .payroll-inputs .segs button.on { background:#35373D; color:#fff; }
  .pm-workspace-content .lbtn { border-radius:14px; font-weight:400; }
  .pm-workspace-content .lbtn:is(.g,.b) { background:#d7f7f6; color:#36454f; }
  .payroll-inputs .dropz { background:#ffffff80; border:1px dashed #9baeb4; border-radius:22px; color:#36454f; }
  .payroll-inputs .dropz b { font-weight:500; }
  .payroll-inputs .lt-wrap { border-radius:20px; border-color:#fff9; }
  .payroll-hr-services { margin-top:24px; border:1px solid #fff9; border-radius:22px; padding:16px; background:#ffffff60; }
  .payroll-hr-services summary { cursor:pointer; font-size:15px; }
  .payroll-hr-services .program-section-tile { background:#ffffff80; border-color:#fff9; }
  .payroll-hr-services .program-section-tile span { font-weight:400; }
  .modal.payroll-workspace-modal .box { width:min(820px,100%); background:linear-gradient(155deg,#e4e8ec,#e2eef0 65%,#d0f1f4); color:#333; border:1px solid #fff9; box-shadow:0 24px 80px #17252a26; }
  .modal.payroll-workspace-modal .modal-return { background:#e5eceeeF; backdrop-filter:blur(12px); border-bottom:1px solid #36454f15; }
  .modal.payroll-workspace-modal .modal-return .btn { background:#fff; color:#36454f; font-weight:400; gap:6px; }
  .modal.payroll-workspace-modal h3 { font-weight:400; font-size:23px; line-height:1.5; }
  .modal.payroll-workspace-modal :is(input,select,textarea,.empcard,.paynote) { background:#ffffffb8; border-color:#ffffffc4; color:#333; }
  .modal.payroll-workspace-modal :is(.btn.dark,.opts button.on) { background:#35373D; color:#fff; }
  .modal.payroll-workspace-modal .mh .mi { background:#6ddfea; color:#243b40; }
  .modal.payroll-workspace-modal .field { color:#65747b; }
  :root[data-theme="dark"] body.payroll-workspace-view { background:#35373D; }
  :root[data-theme="dark"] body.payroll-workspace-view.hr-directory-view { background:#35373D linear-gradient(160deg,#1f2328,#17252a 58%,#163f46) fixed!important; }
  :root[data-theme="dark"] .pm-workspace-page { background:linear-gradient(160deg,#1f2328,#17252a 58%,#163f46); color:#f1f3f4; }
  :root[data-theme="dark"] .pm-workspace-page :is(.pm-topbar,.pm-icon-button,.pm-workspace-back,.pm-workspace-home,.pm-month,.pm-nav) { background:#22272ce8; border-color:#ffffff18; color:#f1f3f4; }
  :root[data-theme="dark"] .payroll-workspace .pm-nav.payroll-shortcuts button { color:#f1f3f4; }
  :root[data-theme="dark"] .payroll-workspace .pm-nav.payroll-shortcuts button.active { background:#f1f3f4; color:#171a1d; }
  :root[data-theme="dark"] .payroll-inputs :is(.cs,.dropz,.segs,.payroll-hr-services,.program-section-tile) { background:#26343bc9; border-color:#ffffff18; color:#e5eef1; }
  :root[data-theme="dark"] .payroll-inputs .cs.e { background:#62ccd6; color:#18343a; }
  :root[data-theme="dark"] .modal.payroll-workspace-modal .box { background:linear-gradient(155deg,#20292e,#172e35); color:#edf3f5; border-color:#ffffff18; }
  :root[data-theme="dark"] .modal.payroll-workspace-modal .modal-return { background:#202b30ed; }
  :root[data-theme="dark"] .modal.payroll-workspace-modal :is(input,select,textarea,.empcard,.paynote) { background:#2b383f; border-color:#ffffff18; color:#edf3f5; }
  :root[data-theme="dark"] .modal.payroll-workspace-modal .field { color:#b8c9cf; }
}
@media screen and (min-width:721px) {
  .pm-workspace-page { padding:24px 28px calc(110px + env(safe-area-inset-bottom,0px)); }
  .pm-workspace-page .pm-topbar { min-height:64px; direction:ltr; display:flex; }
  .pm-workspace-page .pm-logo { height:36px; max-width:124px; }
  .pm-workspace-links { display:flex; flex:1; justify-content:center; flex-wrap:wrap; direction:rtl; }
  .pm-workspace-links button { padding:8px 12px; color:inherit; font-size:12px; }
  .pm-workspace-page .pm-workspace-heading { margin:24px 0; }
  .pm-workspace-page .pm-clock { display:none; }
  .pm-workspace-page .pm-bottom { width:min(calc(100% - 40px),780px); }
  .payroll-workspace .pm-nav.payroll-shortcuts :is(a,button),.payroll-workspace .pm-nav.payroll-shortcuts button.active { font-size:12px; }
}
@media screen and (min-width:1080px) {
  .pm-workspace-page { padding-inline:34px; }
  .pm-workspace-page .pm-clock { display:inline; font-size:11px; }
}
@media screen and (max-width:375px) {
  .pm-workspace-page .pm-clock { display:none; }
  .pm-workspace-home { font-size:10px; padding-inline:8px; }
  .pm-workspace-content .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:600px) {
  .payroll-inputs .chipsum { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .payroll-inputs .cs { padding:14px 12px; border-radius:20px; }
  .payroll-inputs .csl { font-size:12px; }
  .payroll-inputs .ph h2 { font-size:23px; }
  .modal.payroll-workspace-modal .box { padding-inline:16px; }
  .modal.payroll-workspace-modal .modal-return { top:calc(-22px - env(safe-area-inset-top,0px)); }
}
@media print {
  .pm-workspace-page > :is(.pm-topbar,.pm-workspace-heading,.pm-bottom) { display:none!important; }
  .pm-workspace-page { padding:0; background:#fff; }
}

/* Bank and cash statements keep the dark workspace visible through every cell. */
@media screen {
  :root[data-theme="dark"] #main section.payroll-statement {
    --statement-ink:#edf3f5; --statement-muted:#b4c4cb; --statement-line:#ffffff26;
    --ink:#edf3f5; --ink2:#d5e0e5; --muted:#b4c4cb; --line:#ffffff26;
    color:var(--statement-ink);
  }
  :root[data-theme="dark"] #main section.payroll-statement .payroll-table-scroll,
  :root[data-theme="dark"] #main section.payroll-statement table.lt[data-tk^="pay-"],
  :root[data-theme="dark"] #main section.payroll-statement table.lt[data-tk^="pay-"] :is(thead,tbody,tfoot,tr,th,td) {
    background:transparent!important; background-image:none!important;
    color:var(--statement-ink)!important; border-color:var(--statement-line)!important;
  }
  :root[data-theme="dark"] #main section.payroll-statement table.lt[data-tk^="pay-"] :is(.empc,.identity-name,.payroll-department-name) { color:var(--statement-ink)!important; }
  :root[data-theme="dark"] #main section.payroll-statement table.lt[data-tk^="pay-"] :is(.identity-meta,.payroll-department-code,.z,.mu,small) { color:var(--statement-muted)!important; }
  :root[data-theme="dark"] #main section.payroll-statement table.lt[data-tk^="pay-"] :is(.coc,.carb) { background:transparent!important; color:var(--statement-muted)!important; border:1px solid var(--statement-line); }
  :root[data-theme="dark"] #main section.payroll-statement .tf-sort-btn { color:var(--statement-muted); }
}