/* p23-polish.css: supplemental visual layer for Balance Sheet (.p23) and Attendance (#sv131-at).
   Load AFTER sv-pre-p23.css. Styling only: no layout or permission changes, and no element hidden that JS relies on.
   Scope: .p23, .p23-overlay/.p23-dialog, #sv131-at, and only legacy attendance modals marked
   .sv131-ov.p23-attendance-modal (beta/recycle/other .sv131-ov dialogs are left untouched). */

/* ---------- 1. Tokens ---------- */
.p23,.p23-overlay,#sv131-at,.sv131-ov.p23-attendance-modal{
  --p23-r:12px;            /* cards, panels, dialogs */
  --p23-r-md:10px;         /* nested panels, notices, table frame */
  --p23-r-sm:8px;          /* buttons, inputs, menus */
  --p23-r-xs:6px;          /* chips, calendar cells */
  --p23-line:color-mix(in srgb,currentColor 11%,transparent);
  --p23-line-soft:color-mix(in srgb,currentColor 7%,transparent);
  --p23-tint:color-mix(in srgb,currentColor 3.5%,transparent);
  --p23-muted:color-mix(in srgb,currentColor 62%,transparent);
  --p23-accent:var(--accent,#4f46e5);
  --p23-surface:#fff;      /* solid on purpose: theme --card-bg/--surface is translucent glass */
  --p23-surface-2:#f8fafc;
  --p23-ink:#1e293b;
  --p23-shadow:0 1px 2px rgb(15 23 42/.04),0 1px 3px rgb(15 23 42/.05);
  --p23-shadow-pop:0 10px 30px -8px rgb(15 23 42/.22),0 2px 6px rgb(15 23 42/.08);
  --p23-sk-base:rgb(100 116 139/.09);
  --p23-sk-hi:rgb(100 116 139/.17);
}

/* ---------- 2. Cards: one radius, hairline border, quiet shadow ---------- */
.p23.card,.p23 .card,.p23-dialog,
#sv131-at .card,.p23-attendance-modal .sv131-m{
  border-radius:var(--p23-r)!important;
  border:1px solid var(--p23-line)!important;
  box-shadow:var(--p23-shadow)!important;
  background-clip:padding-box;
}
/* Allow menus/popovers to leave a card. Each table keeps its own horizontal scroll (.p23-table / .at-tw). */
.p23 .card,.p23.card,#sv131-at .card{overflow:visible}
.p23 .card:hover,#sv131-at .card:hover{transform:none}

/* ---------- 3. Section, card and modal headers: no colored square bars ---------- */
.p23 .card>header,.p23-section>header,.p23-fold-content>header,
.p23-dialog>header,
#sv131-at .card>header,#sv131-at .at-cal>header,#sv131-at .at-reg>header,
.p23-attendance-modal .sv131-m>header{
  background:transparent!important;
  background-image:none!important;
  color:inherit!important;
  border-radius:0!important;
  box-shadow:none!important;
  border:0!important;
  border-bottom:1px solid var(--p23-line-soft)!important;
  padding:0 0 .65rem!important;
  margin:0 0 .75rem!important;
  min-height:0;
}
.p23 h1,.p23 h2,.p23 h3,.p23-dialog h2,
#sv131-at h1,#sv131-at h2,#sv131-at h3,.p23-attendance-modal .sv131-m h2{
  background:none!important;color:inherit!important;border-radius:0!important;padding:0!important;
  -webkit-text-fill-color:currentColor!important;
  letter-spacing:-.01em;
}
.p23 h2,.p23-dialog h2,.p23-attendance-modal .sv131-m h2{font-size:.9375rem!important;font-weight:650;line-height:1.35}
#sv131-at .at-cal h3,#sv131-at .at-reg h3{font-size:.875rem;font-weight:650}
.p23 .p23-heading h1,#sv131-at .sv131-head h1{font-size:1.125rem;font-weight:700;letter-spacing:-.015em}
.p23 .t-muted,.p23-section>header .t-muted,#sv131-at .at-muted{color:var(--p23-muted)!important;font-size:.75rem}

/* Page header stays plain on the page (no card), with consistent spacing. */
.p23 .p23-heading{
  position:relative;z-index:30;          /* menu (.p23-more) stacks above the KPI cards that follow */
  align-items:center;padding:.15rem 0 .5rem;margin-bottom:.35rem;background:none;
}
.p23 .p23-heading p{color:var(--p23-muted);font-size:.8125rem;margin:.15rem 0 0}

/* ---------- 4. Collapsible panels (People / Accounts / Holidays & leave / Help) ---------- */
.p23 details.p23-fold,.p23 details.p23-help,#sv131-at .p23-calendar-panel,#sv131-at details.at-hist{padding:0!important}
.p23 .p23-fold>summary,.p23 .p23-help>summary,#sv131-at .p23-calendar-panel>summary,#sv131-at .at-hist>summary{
  list-style:none;display:flex!important;align-items:center;gap:.5rem;
  padding:.7rem .875rem!important;min-height:44px;cursor:pointer;
  font-size:.8125rem;font-weight:600;border-radius:var(--p23-r);
  background:transparent!important;color:inherit!important;
  transition:background-color .15s ease;
}
.p23 .p23-fold>summary::-webkit-details-marker,.p23 .p23-help>summary::-webkit-details-marker,
#sv131-at .p23-calendar-panel>summary::-webkit-details-marker,#sv131-at .at-hist>summary::-webkit-details-marker,
.p23 .p23-fold-content details>summary::-webkit-details-marker{display:none}
.p23 .p23-fold>summary::after,.p23 .p23-help>summary::after,
#sv131-at .p23-calendar-panel>summary::after,#sv131-at .at-hist>summary::after,
.p23 .p23-fold-content details>summary::after{
  content:"";margin-left:auto;flex:none;width:.45rem;height:.45rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .18s ease;
}
.p23 details[open]>summary::after,#sv131-at details[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.p23 .p23-fold>summary:hover,.p23 .p23-help>summary:hover,
#sv131-at .p23-calendar-panel>summary:hover,#sv131-at .at-hist>summary:hover{background:var(--p23-tint)!important}
.p23 details[open].p23-fold>summary,.p23 details[open].p23-help>summary,
#sv131-at details[open].p23-calendar-panel>summary,#sv131-at details[open].at-hist>summary{
  border-bottom:1px solid var(--p23-line-soft);border-radius:var(--p23-r) var(--p23-r) 0 0;
}
#sv131-at .p23-calendar-panel>summary small{margin-left:.35rem!important;color:var(--p23-muted);font-weight:500}
.p23 .p23-fold-content,.p23 .p23-help>p,#sv131-at .p23-calendar-panel>.p23-fold-content,#sv131-at .at-hist>.at-rows,#sv131-at .at-hist>p{padding:.75rem .875rem .875rem!important}
.p23 .p23-help>p{margin:0;padding-top:.5rem!important;color:var(--p23-muted);line-height:1.55}
.p23 .p23-help>p:first-of-type{padding-top:.75rem!important}
/* Nested details (holiday list / leave list) inside the calendar panel */
.p23 .p23-fold-content details{border:1px solid var(--p23-line-soft);border-radius:var(--p23-r-md);margin:.5rem 0}
.p23 .p23-fold-content details>summary{list-style:none;display:flex;align-items:center;padding:.55rem .75rem;font-size:.8125rem}
.p23 .p23-fold-content details[open]>summary{border-bottom:1px solid var(--p23-line-soft)}
.p23 .p23-fold-content details>.p23-table{border:0;border-radius:0 0 var(--p23-r-md) var(--p23-r-md)}
/* Sections that are not folded (Transactions) */
.p23 section.p23-section{padding:.875rem!important}
.p23 .p23-section,.p23 .p23-help{margin-block:.6rem}

/* ---------- 5. KPI row ---------- */
.p23 .p23-kpis{gap:.6rem;margin-block:.5rem .25rem}
.p23 .p23-kpis article{padding:.75rem .875rem!important;gap:.2rem}
.p23 .p23-kpis article>span{font-size:.75rem;font-weight:500;color:var(--p23-muted)}
.p23 .p23-kpis strong{font-size:1.125rem;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.p23 .p23-kpis small{font-size:.6875rem;line-height:1.4;color:var(--p23-muted);opacity:1}
.p23 .p23-secondary-totals{gap:.35rem 1.1rem;padding:.4rem .15rem;color:var(--p23-muted)}
.p23 .p23-secondary-totals b{color:var(--text,var(--color-text,#233047))}
[data-theme=dark] .p23 .p23-secondary-totals b,html.dark .p23 .p23-secondary-totals b,html.theme-dark .p23 .p23-secondary-totals b{color:var(--p23-ink)}

/* ---------- 6. Notices / feedback / errors ---------- */
.p23 .p23-notice{border-radius:var(--p23-r-md);padding:.65rem .8rem;margin-block:.6rem;font-size:.8125rem;line-height:1.5}
.p23 .p23-feedback{border-radius:var(--p23-r-sm);padding:.55rem .75rem;border:1px solid color-mix(in srgb,#278353 22%,transparent);font-size:.8125rem}
.p23 .p23-feedback.error{background:color-mix(in srgb,var(--danger,#b52f42) 8%,transparent);border-color:color-mix(in srgb,var(--danger,#b52f42) 25%,transparent)}
.p23-error,#sv131-at .sv131-errbox,.p23-attendance-modal .sv131-m .sv131-err{
  border-radius:var(--p23-r-sm)!important;border:1px solid color-mix(in srgb,var(--danger,#b52f42) 28%,transparent)!important;
  background:color-mix(in srgb,var(--danger,#b52f42) 6%,transparent);padding:.6rem .75rem!important;font-size:.8125rem;
}
#sv131-at .sv131-errbox{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}

/* ---------- 7. Buttons and controls (compact, consistent radius) ---------- */
.p23 .btn-primary,.p23 .btn-secondary,.p23-dialog .btn-primary,.p23-dialog .btn-secondary,
#sv131-at .btn-primary,#sv131-at .btn-secondary,.p23-attendance-modal .sv131-m .btn-primary,.p23-attendance-modal .sv131-m .btn-secondary,
.p23 .p23-more>summary,.p23 .p23-filter-more>summary{
  border-radius:var(--p23-r-sm)!important;min-height:34px;padding:.4rem .75rem;font-size:.8125rem!important;font-weight:550;
  line-height:1.2;box-shadow:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.p23 .btn-secondary,.p23-dialog .btn-secondary,#sv131-at .btn-secondary,.p23-attendance-modal .sv131-m .btn-secondary,
.p23 .p23-more>summary,.p23 .p23-filter-more>summary{
  background:var(--p23-surface)!important;border:1px solid var(--p23-line)!important;color:inherit!important;
}
.p23 .btn-secondary:hover,.p23-dialog .btn-secondary:hover,#sv131-at .btn-secondary:hover,.p23-attendance-modal .sv131-m .btn-secondary:hover,
.p23 .p23-more>summary:hover,.p23 .p23-filter-more>summary:hover{background:color-mix(in srgb,currentColor 5%,var(--p23-surface))!important}
.p23 .p23-more>summary,.p23 .p23-filter-more>summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none;white-space:nowrap}
.p23 .p23-more>summary::-webkit-details-marker,.p23 .p23-filter-more>summary::-webkit-details-marker{display:none}
.p23 .p23-more>summary::after,.p23 .p23-filter-more>summary::after{
  content:"";width:.38rem;height:.38rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;
}
.p23 .p23-more[open]>summary,.p23 .p23-filter-more[open]>summary{border-color:color-mix(in srgb,var(--p23-accent) 45%,transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--p23-accent) 12%,transparent)}
/* Table action buttons: smaller */
.p23 td .btn-secondary,.p23 td .btn-primary{min-height:28px;padding:.25rem .6rem;font-size:.75rem!important;margin:0 .25rem .25rem 0}

.p23 input.input,.p23 select.input,.p23 textarea.input,
.p23-form .input,#sv131-at .input,.p23-attendance-modal .sv131-m .input{
  border-radius:var(--p23-r-sm)!important;border:1px solid var(--p23-line)!important;
  background-color:var(--p23-surface);font-size:.8125rem;padding:.4rem .65rem;box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.p23 .input:focus,.p23-form .input:focus,#sv131-at .input:focus,.p23-attendance-modal .sv131-m .input:focus{
  outline:none;border-color:color-mix(in srgb,var(--p23-accent) 60%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p23-accent) 15%,transparent)!important;
}
.p23 label>span,.p23-form label>span{font-size:.75rem;font-weight:550;color:var(--p23-muted)}

/* ---------- 8. Dropdown menus: stacking and presentation ---------- */
/* Root cause: the menus are absolutely positioned inside .p23-heading and the Transactions card, but later siblings
   (KPI cards, folded sections, tables) paint above them, and some cards create their own stacking context
   (stagger/hover transforms). Fix: put the *open* menu's ancestor on a higher layer. */
.p23 .p23-more{position:relative;z-index:1}
.p23 .p23-more[open]{z-index:60}
.p23 .p23-more>div{
  z-index:60!important;top:calc(100% + 6px)!important;min-width:200px;padding:.3rem!important;
  border-radius:var(--p23-r-md)!important;border:1px solid var(--p23-line)!important;
  box-shadow:var(--p23-shadow-pop)!important;background:var(--p23-surface)!important;
  animation:p23-pop .14s ease-out;
}
.p23 .p23-more>div button{
  display:flex;width:100%;justify-content:flex-start;margin:0!important;border:0!important;background:transparent!important;
  border-radius:var(--p23-r-xs)!important;min-height:32px;padding:.4rem .6rem;text-align:left;
}
.p23 .p23-more>div button:hover{background:color-mix(in srgb,currentColor 6%,transparent)!important}
/* Filters popover inside the Transactions card */
.p23 section.p23-section:has(.p23-filter-more[open]){position:relative;z-index:25}
.p23 .p23-quick-filters{z-index:2}
.p23 .p23-filter-more[open]{z-index:40}
.p23 .p23-filter-fields{
  z-index:40!important;top:calc(100% + 6px)!important;padding:.75rem!important;
  border-radius:var(--p23-r-md)!important;border:1px solid var(--p23-line)!important;
  box-shadow:var(--p23-shadow-pop)!important;background:var(--p23-surface)!important;
  animation:p23-pop .14s ease-out;
}
/* Folded panels after an open menu must not cover it */
.p23 .p23-kpis,.p23 .p23-kpis article,.p23 .p23-fold,.p23 .p23-help{position:relative;z-index:0}
@keyframes p23-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 9. Tables (People, Accounts, Transactions, Holidays, Leave, Team register) ---------- */
.p23 .p23-table,#sv131-at .at-tw{
  border:1px solid var(--p23-line-soft);border-radius:var(--p23-r-md)!important;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.p23 thead th{
  background:var(--p23-tint)!important;color:var(--p23-muted)!important;opacity:1;
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:.5rem .65rem;border-bottom:1px solid var(--p23-line)!important;
}
.p23 th,.p23 td{border-bottom-color:var(--p23-line-soft)!important}
.p23 tbody tr:last-child td{border-bottom:0!important}
.p23 tbody tr{transition:background-color .12s ease}
.p23 tbody tr:hover{background:color-mix(in srgb,currentColor 2.5%,transparent)}
.p23 td small{color:var(--p23-muted);opacity:1;margin-top:.15rem}
.p23 td:nth-child(3){font-weight:550}
.p23 td details>summary{font-size:.75rem;font-weight:550;color:var(--p23-accent);padding-block:.3rem}
.p23 td details[open]{background:var(--p23-tint);border-radius:var(--p23-r-xs);padding:.25rem .5rem .5rem}
.p23 tbody td[colspan]{padding:1.5rem .75rem;text-align:center;color:var(--p23-muted)}
.p23 .p23-pagination{padding-top:.75rem;font-size:.75rem;color:var(--p23-muted)}
/* Account snapshot tiles */
.p23 .p23-accounts{gap:.6rem}
.p23 .p23-accounts article{border-radius:var(--p23-r-md)!important;border-color:var(--p23-line-soft)!important;padding:.75rem .875rem!important;gap:.35rem}
.p23 .p23-accounts article .btn-secondary{align-self:flex-start;margin-top:.25rem}

/* ---------- 10. Dialogs (.p23-dialog and attendance .sv131-m) ---------- */
.p23-overlay{background:rgb(15 23 42/.45)!important;backdrop-filter:blur(2px)}
.p23-overlay .p23-dialog{
  padding:0 1.1rem 1rem!important;border-radius:14px!important;
  box-shadow:0 24px 60px -12px rgb(15 23 42/.35),0 2px 8px rgb(15 23 42/.08)!important;
  animation:p23-dialog-in .16s ease-out;
}
.p23-dialog>header{
  position:sticky;top:0;z-index:2;
  background:var(--p23-surface)!important;
  margin:0 -1.1rem!important;padding:.9rem 1.1rem .8rem!important;
  border-radius:14px 14px 0 0!important;
}
.p23-dialog>header [data-close]{min-height:30px;padding:.3rem .6rem;font-size:.75rem!important}
.p23-dialog .p23-form{gap:.75rem .875rem;margin-top:.9rem}
.p23-dialog footer{
  position:sticky;bottom:0;z-index:2;background:var(--p23-surface);
  margin:1.1rem -1.1rem -1rem!important;padding:.75rem 1.1rem!important;gap:.5rem!important;
  border-top:1px solid var(--p23-line-soft);border-radius:0 0 14px 14px;
}
.p23-dialog .p23-notice{margin:0}
.p23-dialog .p23-wide.t-muted{margin:0;font-size:.75rem;line-height:1.5;color:var(--p23-muted)}
[data-theme=dark] .p23-dialog>header,[data-theme=dark] .p23-dialog footer,
html.dark .p23-dialog>header,html.dark .p23-dialog footer,html.theme-dark .p23-dialog>header,html.theme-dark .p23-dialog footer{background:var(--p23-surface)!important}
@keyframes p23-dialog-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

.p23-attendance-modal .sv131-m{border-radius:14px!important;box-shadow:0 24px 60px -12px rgb(15 23 42/.35),0 2px 8px rgb(15 23 42/.08)!important}
.p23-attendance-modal .sv131-m>header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.7rem!important}
.p23-attendance-modal .sv131-m footer{display:flex;justify-content:flex-end;gap:.5rem;border-top:1px solid var(--p23-line-soft);padding-top:.75rem;margin-top:1rem}
.p23-attendance-modal .sv131-m .btn-icon,#sv131-at .btn-icon{border-radius:var(--p23-r-sm)!important}

/* ---------- 11. Attendance page ---------- */
#sv131-at .sv131-head{align-items:center}
#sv131-at .sv131-head p{color:var(--p23-muted)}
#sv131-at .at-today-compact{padding:.8rem .95rem!important}
#sv131-at .at-today-compact b{font-weight:650}
#sv131-at .at-today-action .btn-primary{border-radius:var(--p23-r-sm)!important;padding:.45rem .85rem;align-items:flex-start}
#sv131-at .at-today-action .btn-primary small{font-size:.6875rem;font-weight:500;opacity:.85}
#sv131-at .at-state-chip{border-radius:999px;background:var(--p23-tint);border-color:var(--p23-line)!important;font-weight:550}
#sv131-at .at-k{padding:.65rem .85rem!important}
#sv131-at .at-k span{color:var(--p23-muted);font-weight:500}
#sv131-at .at-k b{font-weight:650;letter-spacing:-.01em}
#sv131-at .at-k small{color:var(--p23-muted)}
#sv131-at .sv131-seg{border-radius:var(--p23-r-sm)!important;padding:2px;background:var(--p23-tint);border:1px solid var(--p23-line-soft)}
#sv131-at .sv131-seg button{border-radius:6px!important;border:0!important;min-height:30px!important}
#sv131-at .sv131-seg button.is{background:var(--p23-surface)!important;box-shadow:0 1px 2px rgb(15 23 42/.1)!important}
#sv131-at .at-c{border-radius:var(--p23-r-xs)!important}
#sv131-at .at-c.today{box-shadow:0 0 0 2px color-mix(in srgb,var(--p23-accent) 55%,transparent) inset}
#sv131-at .at-legend span{border-radius:999px}
#sv131-at .at-pill{border-radius:999px}
#sv131-at .at-hist .at-rows{display:flex;flex-direction:column;gap:.35rem}
#sv131-at .at-reg>header{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
#sv131-at #p23-calendar{padding:0!important}
#sv131-at #p23-calendar .p23-fold-content>header{border-bottom:0!important;margin-bottom:.25rem!important;padding:0!important}

/* ---------- 12. Loading / skeleton ---------- */
@keyframes p23-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.p23-sk,
.p23[role=status][aria-busy=true] .p23-sk-line,
#sv131-at .sv131-sk{
  background-color:var(--p23-sk-base)!important;
  background-image:linear-gradient(90deg,transparent 0,var(--p23-sk-hi) 50%,transparent 100%)!important;
  background-size:400px 100%!important;background-repeat:no-repeat!important;
  animation:p23-shimmer 1.2s ease-in-out infinite;
  border:0!important;box-shadow:none!important;color:transparent!important;
}
.p23-sk{display:block;border-radius:var(--p23-r-xs)}
.p23-sk-title{width:180px;height:20px;border-radius:6px}
.p23-sk-text{width:min(360px,70%);height:12px;margin-top:.5rem}
.p23-sk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:1rem}
.p23-sk-kpis .p23-sk,.p23-sk-card{height:78px;border-radius:var(--p23-r)}
.p23-sk-panel{height:44px;border-radius:var(--p23-r);margin-top:.6rem}
.p23-sk-table{height:280px;border-radius:var(--p23-r);margin-top:.6rem}

/* Existing balance boot markup: <section class="p23 card" role="status"><h1>..</h1><p>Loading...</p></section>.
   Render it as a skeleton without JS changes. The text stays for screen readers. */
#p23-balance-host>section.p23.card[role=status]{
  background:transparent!important;border:0!important;box-shadow:none!important;padding:.15rem 0!important;
}
#p23-balance-host>section.p23.card[role=status]>p{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
#p23-balance-host>section.p23.card[role=status]::after{
  content:"";display:block;margin-top:.9rem;height:420px;border-radius:var(--p23-r);
  background:
    linear-gradient(90deg,transparent 0,var(--p23-sk-hi) 50%,transparent 100%) -400px 0/400px 100% no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) 0 0/calc(25% - .45rem) 78px no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) calc(33.333%) 0/calc(25% - .45rem) 78px no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) calc(66.666%) 0/calc(25% - .45rem) 78px no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) 100% 0/calc(25% - .45rem) 78px no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) 0 96px/100% 44px no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) 0 152px/100% 44px no-repeat,
    linear-gradient(var(--p23-sk-base),var(--p23-sk-base)) 0 208px/100% 212px no-repeat;
  animation:p23-shimmer-bg 1.2s ease-in-out infinite;
}
@keyframes p23-shimmer-bg{to{background-position:calc(100% + 400px) 0,0 0,33.333% 0,66.666% 0,100% 0,0 96px,0 152px,0 208px}}
/* Balance error state reuses the same section without role=status */
#p23-balance-host>section.p23.card:not([role=status]):not([data-testid]){padding:1rem!important;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
#p23-balance-host>section.p23.card:not([role=status]):not([data-testid]) [role=alert]{margin:0;color:var(--danger,#b52f42)}

/* Attendance boot skeleton: two existing .sv131-sk cards (hero + content) */
#sv131-at .sv131-sk{border-radius:var(--p23-r)!important;margin-bottom:.65rem}
#sv131-at .sv131-head+.sv131-sk{height:76px}
#sv131-at .sv131-head+.sv131-sk+.sv131-sk{height:380px}
#sv131-at .at-reg .at-muted:only-child{padding:2rem 0;text-align:center}

/* ---------- 13. Responsive ---------- */
@media (max-width:800px){.p23-sk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .p23-overlay{align-items:flex-end;padding:0!important}
  .p23-overlay .p23-dialog{width:100%;max-height:90dvh;border-radius:16px 16px 0 0!important}
  .p23-dialog>header{border-radius:16px 16px 0 0!important}
  .p23-dialog footer{border-radius:0}
  .p23-dialog footer .btn-primary{flex:1}
  .p23 .p23-more>div{right:0;left:auto;min-width:min(240px,calc(100vw - 2rem))}
  .p23 .btn-primary,.p23 .btn-secondary,.p23 .p23-more>summary,.p23 .p23-filter-more>summary,#sv131-at .btn-secondary{min-height:40px}
  .p23 td .btn-secondary,.p23 td .btn-primary{min-height:36px}
  #p23-balance-host>section.p23.card[role=status]::after{height:360px}
}
@media (prefers-reduced-motion:reduce){
  .p23 *,.p23-overlay *,#sv131-at *,.sv131-ov.p23-attendance-modal *,
  #p23-balance-host>section.p23.card[role=status]::after{animation:none!important;transition:none!important}
}

/* ---------- 14. Solid surfaces (no glass) + dark theme ---------- */
.p23-overlay .p23-dialog,
.sv131-ov.p23-attendance-modal .sv131-m,
.p23 .p23-more>div,.p23 .p23-filter-fields{
  background:var(--p23-surface)!important;background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:var(--p23-ink)!important;opacity:1!important;
}
.p23-overlay .p23-dialog>header,.p23-overlay .p23-dialog footer{background:var(--p23-surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.sv131-ov.p23-attendance-modal .sv131-ov-bg{background:rgb(15 23 42/.45)!important}
.p23-overlay .p23-dialog .input,.sv131-ov.p23-attendance-modal .sv131-m .input,
.p23 .p23-filter-fields .input{background-color:var(--p23-surface)!important;color:inherit!important}
.p23-overlay .p23-dialog .p23-notice{background:color-mix(in srgb,var(--p23-accent) 7%,var(--p23-surface))!important}

html.theme-dark .p23,html.theme-dark .p23-overlay,html.theme-dark #sv131-at,html.theme-dark .sv131-ov.p23-attendance-modal,
[data-theme=dark] .p23,[data-theme=dark] .p23-overlay,[data-theme=dark] #sv131-at,[data-theme=dark] .sv131-ov.p23-attendance-modal,
html.dark .p23,html.dark .p23-overlay,html.dark #sv131-at,html.dark .sv131-ov.p23-attendance-modal{
  --p23-surface:#151d2e;
  --p23-surface-2:#1b2438;
  --p23-ink:#e2e8f0;
  --p23-shadow:0 1px 2px rgb(0 0 0/.25);
  --p23-shadow-pop:0 12px 32px -8px rgb(0 0 0/.6),0 2px 6px rgb(0 0 0/.35);
  --p23-sk-base:rgb(226 232 240/.09);
  --p23-sk-hi:rgb(226 232 240/.17);
}
html.theme-dark .p23-overlay,[data-theme=dark] .p23-overlay,html.dark .p23-overlay,
html.theme-dark .sv131-ov.p23-attendance-modal .sv131-ov-bg{background:rgb(2 6 15/.62)!important}
html.theme-dark .p23-overlay .p23-dialog,html.theme-dark .sv131-ov.p23-attendance-modal .sv131-m{border-color:rgb(255 255 255/.09)!important}
html.theme-dark .p23 .p23-secondary-totals b{color:var(--p23-ink)}

/* ---------- 15. Portal dropdowns (sv-select .svs-pop) above p23 dialogs ---------- */
/* .svs-pop is portalled to body at z 2147483100, below .p23-overlay (2147483600), so it was invisible in dialogs.
   Only raised while a p23 route host is mounted. */
html:has(#p23-balance-host,#p23-attendance-host) .svs-back{z-index:2147483645!important}
html:has(#p23-balance-host,#p23-attendance-host) .svs-pop{
  z-index:2147483646!important;
  background:var(--p23-surface,#fff)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-radius:var(--p23-r-md,10px)!important;box-shadow:0 10px 30px -8px rgb(15 23 42/.22),0 2px 6px rgb(15 23 42/.08)!important;
}
html.theme-dark:has(#p23-balance-host,#p23-attendance-host) .svs-pop,
html.dark:has(#p23-balance-host,#p23-attendance-host) .svs-pop{background:#151d2e!important;color:#e2e8f0!important;border-color:rgb(255 255 255/.09)!important}

/* ---------- 16. Parent loading markup: .p23-loading-panel / .p23-skeleton-line ---------- */
.p23-loading-panel{
  display:flex;flex-direction:column;gap:.55rem;padding:.875rem;
  border:1px solid var(--p23-line,rgb(15 23 42/.1));border-radius:var(--p23-r,12px);
  background:var(--p23-surface,#fff);min-height:96px;
}
.p23-dialog .p23-loading-panel,.sv131-m .p23-loading-panel{border:0;padding:.25rem 0;min-height:0;background:transparent}
.p23-skeleton-line{
  display:block;height:12px;width:100%;border-radius:6px;
  background-color:var(--p23-sk-base,rgb(15 23 42/.07));
  background-image:linear-gradient(90deg,transparent 0,var(--p23-sk-hi,rgb(15 23 42/.13)) 50%,transparent 100%);
  background-size:400px 100%;background-repeat:no-repeat;
  animation:p23-shimmer 1.2s ease-in-out infinite;color:transparent;
}
.p23-skeleton-line:nth-child(1){width:42%;height:16px}
.p23-skeleton-line:nth-child(2){width:88%}
.p23-skeleton-line:nth-child(3){width:72%}
.p23-skeleton-line:nth-child(4n){width:60%}
.p23-skeleton-line.is-title{width:180px;height:18px}
.p23-skeleton-line.is-block{height:64px;border-radius:var(--p23-r-md,10px)}
.p23-skeleton-line.value{height:22px;width:65%;margin-top:.3rem}
@media (prefers-reduced-motion:reduce){.p23-skeleton-line{animation:none!important}}

/* ---------- 17. Kill glass on headers (live: backdrop-filter saturate(1.7) blur(14px) drew a square bar) ---------- */
.p23 .p23-heading,
.p23 .card>header,.p23-section>header,.p23-fold-content>header,
.p23 .p23-fold>summary,.p23 .p23-help>summary,
.p23-dialog>header,.p23-dialog footer,
#sv131-at .sv131-head,#sv131-at .card>header,#sv131-at .at-cal>header,#sv131-at .at-reg>header,
#sv131-at .p23-calendar-panel>summary,#sv131-at .at-hist>summary,
.sv131-ov.p23-attendance-modal .sv131-m>header,.sv131-ov.p23-attendance-modal .sv131-m footer,
.p23 h1,.p23 h2,.p23 h3,.p23-dialog h2,#sv131-at h1,#sv131-at h2,#sv131-at h3,.sv131-ov.p23-attendance-modal .sv131-m h2{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.p23 .p23-heading,#sv131-at .sv131-head{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
/* Dialog headers/footers stay solid (set in section 14); restate after the reset above */
.p23-overlay .p23-dialog>header,.p23-overlay .p23-dialog footer,
.sv131-ov.p23-attendance-modal .sv131-m>header,.sv131-ov.p23-attendance-modal .sv131-m footer{background:var(--p23-surface)!important}

/* ---------- 18. Attendance legacy modal layer ---------- */
.sv131-ov.p23-attendance-modal{z-index:2147483600!important}

/* ---------- 19. Holidays & leave tables: narrower min-width in the side column ---------- */
#sv131-at .p23-calendar-panel table,.p23-calendar-panel table{min-width:520px!important}
/* Beat the legacy high-specificity glass-theme card rule without changing other dialogs. */
html body .p23-overlay section.card.p23-dialog[role=dialog][aria-modal=true],
html body .sv131-ov.p23-attendance-modal section.card.sv131-m[role=dialog][aria-modal=true]{
  background:var(--p23-surface,#fff)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Route-scoped specificity prevents the global glass theme from restoring oversized pills. */
html body #p23-balance-host .p23 .card{
  border-radius:12px!important;box-shadow:var(--p23-shadow)!important;
  transform:none!important;overflow:visible;
}
html body #p23-balance-host .p23 :is(.btn-primary,.btn-secondary,.input,.svs-trigger,.p23-more>summary,.p23-filter-more>summary),
html body .p23-overlay section.card.p23-dialog[role=dialog][aria-modal=true] :is(.btn-primary,.btn-secondary,.input,.svs-trigger){
  border-radius:8px!important;
}
/* Only the app shell is a sticky banner. Page/section headers must scroll with their content. */
html body #p23-balance-host .p23 header.p23-heading{
  position:relative!important;inset:auto!important;z-index:30!important;
}
html body #p23-balance-host .p23 .p23-section>header,
html body #sv131-at .at-cal>header,html body #sv131-at .at-reg>header{
  position:relative!important;inset:auto!important;z-index:0!important;
}
html body #p23-balance-host .p23 table:has(thead[hidden]){
  min-width:0!important;table-layout:fixed;
}
html body #p23-balance-host .p23 table:has(thead[hidden]) td{
  white-space:normal!important;overflow-wrap:anywhere;
}
@media(max-width:600px){
  #p23-balance-host .p23-pagination{justify-content:center;gap:.5rem}
  #p23-balance-host .p23-pagination>span{flex-basis:100%;order:-1;text-align:center;white-space:normal}
}
html body .sv131-ov.p23-attendance-modal .sv131-m>header{
  padding:.85rem 1rem!important;margin:0!important;border-radius:14px 14px 0 0!important;
}