/* =====================================================================
   lq-responsive.css — Step-2 responsive pass (build 189)
   Pure CSS/layout only. No engine/logic/route/data change; anchor untouched.
   Loaded LAST so these rules win by source order at equal specificity.
   Scope is deliberately narrow — the app already has a responsive foundation
   (off-canvas nav, collapsing dashboard grids, table scroll containers, the
   payslip two-column stack at <=640, settings-nav horizontal wrap). This file
   only closes the two real gaps (stepper truncation, no pinned first column on
   wide tables) plus payslip narrow-width padding relief.
   NOTE: the payslip block is scoped to #payslipHost and touches CSS only —
   never the parity-locked shared layout markup (client/payslip-layout.js).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) PIPELINE STEPPER — de-truncation on phone.
   The run-progress stepper sits in .stepper-scroll (overflow-x:auto with a
   HIDDEN scrollbar) and legacy CSS floors .stepper at min-width:360px on
   <=560px. Inside card padding (~300-320px usable) that forces a silent,
   affordance-free horizontal scroll that clips the last nodes (Approve/Post).
   Fix: drop the floor and let the six nodes flex-compress (smaller dot +
   label) so they always fit — no scroll, nothing clipped. Fits everywhere.
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .stepper { min-width: 0; --step-size: 24px; }
  .stepper .step { min-width: 0; padding: 0 2px; }
  .stepper .step__label {
    font-size: 10px; line-height: 1.15; margin-top: 5px; overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------------------
   2) WIDE TABLES — pinned first column.
   Every wide table already lives in a horizontal scroll container
   (.table-wrap / .tscroll), so nothing breaks. What was missing is a pinned
   identity column: scrolling right lost the No./Name/Account/Agency/Period
   column. We pin the first column with position:sticky.
   Technique: set the row background on the <tr> and have the sticky first
   cell use `background: inherit`. The non-sticky cells keep their own
   backgrounds (identical values), so the pinned cell can NEVER show a seam
   across zebra / hover / total rows — no per-state enumeration needed.
   Engaged only <=900px (phone + tablet, where these tables actually scroll),
   so desktop rendering is byte-for-byte unchanged.
   Applies to the classed report/register/GL/settings tables (.table, .data);
   the employees register (egrid) already has its own freeze mechanism and is
   left as-is (it needs JS to activate, out of scope for a pure-CSS pass).
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* -- .table family (reports, register, GL, remittance, alphalist, filings,
        settings data tables): zebra + hover backgrounds mirrored onto the tr. */
  .table-wrap > table.table > tbody > tr,
  .tscroll   > table.table > tbody > tr { background: var(--lq-surface-card); }
  .table-wrap > table.table > tbody > tr:nth-child(even),
  .tscroll   > table.table > tbody > tr:nth-child(even) { background: var(--lq-surface-app); }
  .table-wrap > table.table > tbody > tr:hover,
  .tscroll   > table.table > tbody > tr:hover { background: var(--lq-accent-tint); }
  /* Total row keeps its own hover fill (mirror the existing td rule) so the pinned
     first cell inherits the SAME colour — no seam on the totals row. */
  .table-wrap > table.table > tbody > tr.gl-total:hover,
  .tscroll   > table.table > tbody > tr.gl-total:hover { background: var(--lq-surface-subtle); }
  .table-wrap > table.table > thead > tr,
  .tscroll   > table.table > thead > tr { background: var(--lq-surface-card); }

  .table-wrap > table.table > tbody > tr > td:first-child,
  .tscroll   > table.table > tbody > tr > td:first-child {
    position: sticky; left: 0; z-index: 2; background: inherit;
    box-shadow: 1px 0 0 var(--lq-border);
  }
  .table-wrap > table.table > thead > tr > th:first-child,
  .tscroll   > table.table > thead > tr > th:first-child {
    position: sticky; left: 0; z-index: 3; background: inherit;
    box-shadow: 1px 0 0 var(--lq-border);
  }

  /* -- .data family (employee register modal, salary history, disbursement,
        deductions, pay-type assignments, statutory versions, bank setup). */
  .table-wrap > table.data > tbody > tr { background: var(--color-surface); }
  .table-wrap > table.data > tbody > tr:hover { background: var(--color-surface-sunken); }
  .table-wrap > table.data > thead > tr { background: var(--table-head-bg); }
  .table-wrap > table.data > tfoot > tr { background: var(--color-surface-sunken); }

  .table-wrap > table.data > tbody > tr > td:first-child,
  .table-wrap > table.data > tfoot > tr > td:first-child {
    position: sticky; left: 0; z-index: 2; background: inherit;
    box-shadow: 1px 0 0 var(--color-hairline);
  }
  .table-wrap > table.data > thead > tr > th:first-child {
    position: sticky; left: 0; z-index: 3; background: inherit;
    box-shadow: 1px 0 0 var(--color-hairline);
  }
}

/* ---------------------------------------------------------------------
   3) PAYSLIP DOCUMENT — narrow-width padding relief (viewer only).
   The slip already stacks its Earnings|Deductions columns at <=640
   (components.css). On a 390px phone the 28px horizontal padding leaves the
   stacked content cramped and can crowd the large net-pay figure. Ease the
   padding and gently scale the net figure — scoped to #payslipHost so it
   only affects the on-screen viewer, never the PDF/print/server render, and
   never the shared layout markup.
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  #payslipHost .slip__head,
  #payslipHost .slip__band,
  #payslipHost .slip__cols > div,
  #payslipHost .slip__net,
  #payslipHost .slip__sec,
  #payslipHost .slip__foot { padding-left: 16px; padding-right: 16px; }
  #payslipHost .slip__net-v { font-size: 26px; letter-spacing: -0.02em; }
}