/* Payroll & Statutory (School ERP 3.2.82). The page is drawn from the ERP's own
   parts - pageHeading, metricCards, panel, workflow cards, form-sections,
   register-filter / register-search and dataTable - so this file only holds
   what those parts do not: a warning tint on the standard form note, the slab
   editors, the prepared returns and the printed registers. Scoped to the
   combined page ([data-gap-module="payroll-statutory"]), its panels
   (.pstat-scope), its dialogs (.pstat-dialog) and printed pages (.pstat-doc).
   Colours are the ERP tokens only, which dark mode redefines. Nothing here
   has a fixed width wider than its container: wide tables scroll inside their
   own box, prints are A4 portrait with fixed table layout. */

/* The standard form note, tinted when it warns (an unapproved month, the CA reminder). */
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .form-note--warning {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  color: var(--ink);
}
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .form-note strong { color: var(--ink); }

/* Add payment: the person's ledger scrolls inside its own box on a narrow screen. */
#payroll-payment-form .payroll-ledger-block { min-width: 0; max-width: 100%; overflow-x: auto; }
#payroll-payment-form .payroll-ledger-block .fee-session-strip { min-width: 0; }
/* In the form's section the ledger's columns may be narrower than on the old full-width form. */
#payroll-payment-form .payroll-ledger :is(.fee-due-head, .fee-due-row) { grid-template-columns: minmax(118px, 1.4fr) repeat(5, minmax(70px, 1fr)); }

/* The salary slip register's print row: the count, then the button. */
.payroll-slip-print { justify-content: flex-end; align-items: center; }
:is(.payroll-slip-print, [data-pstat-return-filter]) .result-count { align-self: center; color: var(--muted); font-size: 12px; font-weight: 700; }
:is(.payroll-slip-print, [data-pstat-return-filter]) .result-count b { color: var(--ink); }

/* Register cells that stack a detail line under the figure. */
.pstat-scope td small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.pstat-scope td small b { color: var(--ink); }

/* The slab editors (Add tax year, the tax year and PT slab dialogs). */
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-slab-block { min-width: 0; display: grid; gap: 6px; justify-items: start; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-slab-block h4 { margin: 4px 0 0; font-size: .9rem; color: var(--brand-ink); }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-edit-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-edit { width: 100%; min-width: 0; border-collapse: collapse; font-size: .84rem; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-edit th { color: var(--muted); font-size: .76rem; text-align: left; padding: 4px; font-weight: 700; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-edit td { padding: 3px 4px; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-edit input,
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-edit select { width: 100%; min-width: 84px; }

/* A prepared return or calculation, on screen. */
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-result:not(:empty) { display: grid; gap: 10px; margin-top: 12px; min-width: 0; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table td,
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table th { padding: 5px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: inherit; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table th { color: var(--muted); font-weight: 700; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table tfoot td { font-weight: 760; border-top: 2px solid var(--line); }
.pstat-doc-table tr[hidden] { display: none; }
/* A narrow result (the tax calculation) keeps to its pane; wide ones scroll inside .pane-table-scroll. */
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table:not(:has(thead th:nth-child(4))) { min-width: 0; }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-warning { color: var(--danger); }
:is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-list { margin: 6px 0 10px 18px; padding: 0; font-size: .86rem; overflow-wrap: anywhere; }

/* Printed registers and certificates, inside the ERP's shared document
   (genericDocumentHtml): A4 portrait, tables that keep to the page width. */
.pstat-doc h3 { margin: 2mm 0 1mm; color: var(--brand-ink); font-size: 12pt; }
.pstat-doc h4 { margin: 4mm 0 1.5mm; color: var(--brand-ink); font-size: 10pt; }
.pstat-doc p { margin: 1mm 0; font-size: 8.5pt; }
.pstat-doc ul { margin: 1mm 0 2mm 5mm; padding: 0; font-size: 8pt; }
.pstat-doc .form-note { font-size: 8pt; }
/* reference-layout.css gives every table min-width:760px; a printed table keeps to the A4 page instead. */
.pstat-doc .pstat-doc-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5mm 0 3mm; font-size: 7.5pt; }
/* reference-layout.css also sets every th/td's own size, padding and capitals; the table's size is meant. */
.pstat-doc .pstat-doc-table th, .pstat-doc .pstat-doc-table td { padding: 1.2mm 1.4mm; border: 1px solid var(--line); text-align: left; vertical-align: top; font-size: inherit; overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.pstat-doc .pstat-doc-table th { background: var(--brand-soft); color: var(--brand-ink); }
.pstat-doc .pstat-doc-table tfoot td { font-weight: 760; }
/* A run's breakdown (nine and ten columns) is set tighter, the name column a
   little wider, and its figures kept whole: they carry no ₹ sign to make room. */
.pstat-doc .pstat-doc-table.pstat-doc-wide { font-size: 6.6pt; font-variant-numeric: tabular-nums; }
.pstat-doc .pstat-doc-table.pstat-doc-wide :is(th, td) { padding: .8mm .9mm; overflow-wrap: break-word; letter-spacing: 0; }
.pstat-doc .pstat-doc-table.pstat-doc-wide th { text-transform: none; }
.pstat-doc .pstat-doc-table.pstat-doc-wide th:first-child { width: 16%; }
.pstat-doc .pstat-doc-note { margin-top: 3mm; padding: 2mm 3mm; border: 1px solid var(--line); border-radius: 2mm; }

@media (max-width: 640px) {
  :is([data-gap-module="payroll-statutory"], .pstat-dialog) .pstat-doc-table { font-size: .78rem; }
}
