/* ===========================================================
   Patel Payroll — steel-blue theme matching the approved demo
   mockup (patel-payroll-demo). Flat white cards on a light
   paper canvas; every surface reads its colors from tokens on
   :root. (The former dark theme was removed — the demo has no
   dark mode.)
   =========================================================== */
:root {
  /* Typography from the mockup: IBM Plex Sans / Mono / Serif. */
  --pp-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --pp-serif: "IBM Plex Serif", Georgia, serif;

  --pp-ink: #1E3648;
  --pp-ink-2: #2C5471;
  --pp-blue: #4682B4;
  --pp-blue-deep: #35648C;
  --pp-blue-hi: #6FA8D4;
  --pp-blue-wash: #EAF2F8;
  --pp-paper: #F2F6FA;
  --pp-line: #D3DFE9;
  --pp-line-soft: #E6EDF3;
  --pp-text: #1B2C3A;
  --pp-muted: #5B7488;
  --pp-faint: #90A5B5;
  --pp-ok: #14805A;
  --pp-ok-bg: #E4F4ED;
  --pp-warn: #9A6200;
  --pp-warn-bg: #FBF0DC;
  --pp-stop: #B3271E;
  --pp-stop-bg: #FBE9E7;

  /* card surfaces (names kept from the earlier glass theme so
     existing view markup keeps working; values are the demo's) */
  --glass-bg: #FFFFFF;
  --glass-bg-strong: #FFFFFF;
  --glass-header: #FFFFFF;
  --glass-border: #D3DFE9;
  --glass-shadow: 0 1px 2px rgba(30, 54, 72, .06), 0 8px 24px rgba(30, 54, 72, .05);
  --glass-hover: #FAFCFF;
  --glass-blur: none;
  --glass-radius: 10px;
  --glass-dark-bg: #1E3648;
  --glass-dark-border: rgba(255, 255, 255, .08);

  /* page canvas */
  --canvas-base: #F2F6FA;
  --canvas: none;

  /* controls */
  --field-bg: #FFFFFF;
  --field-bg-focus: #FFFFFF;
  --field-border: #D3DFE9;
  --thead-bg: #F7FAFE;
  --row-hover: #FAFCFF;
  --chip-bg: #EAF2F8;
  --chip-border: #CBDDEA;
}

/* 2026-09-30: all text 1.5px larger (was 14px / 16px; body was 14px). rem sizes follow the root. */
html { font-size: 15.5px; }
@media (min-width: 768px) { html { font-size: 17.5px; } }

body {
  font-family: var(--pp-sans);
  --bs-font-sans-serif: var(--pp-sans);
  --bs-font-monospace: var(--pp-mono);
  color: var(--pp-text);
  background: var(--canvas-base);
  min-height: 100vh;
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--pp-ink); letter-spacing: -.01em; }
.pp-serif { font-family: var(--pp-serif); }
.text-muted { color: var(--pp-muted) !important; }
a { color: var(--pp-blue); }
a:hover { color: var(--pp-blue-deep); }
::selection { background: rgba(111, 168, 212, .35); }

*:focus-visible { outline: 2px solid var(--pp-blue-hi); outline-offset: 2px; border-radius: 4px; }

/* slim, theme-aware scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(111, 168, 212, .35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(111, 168, 212, .6); }

/* ---- Glass primitives ---- */
.glass,
.card,
.pp-kpi,
.pp-rail,
.pp-portal-card,
.pp-table-wrap,
.pp-card-list .pp-card-row,
.pp-stub,
.modal-content {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius);
  color: var(--pp-text);
}

.card { overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.card-header {
  background: var(--glass-header);
  border-bottom: 1px solid var(--pp-line-soft);
  font-weight: 600;
  color: var(--pp-ink);
}
.card-footer { background: var(--glass-header); border-top: 1px solid var(--pp-line-soft); }

/* Bootstrap opacity helpers become theme-aware glass tints */
.bg-white { background-color: var(--glass-header) !important; }
.border { border-color: var(--pp-line) !important; }
.text-dark { color: var(--pp-ink) !important; }

/* ---- App shell ---- */
/* This build's Bootstrap doesn't ship a min-width:0 utility. Without it, the content
   pane next to the sidebar (.flex-fill) defaults to min-width:auto - a flex item can
   never shrink below its own content's intrinsic width. Any page with a wide element
   (an un-hidden table, in particular) then forces the ENTIRE topbar+main pane wider
   than the viewport instead of letting that one element scroll internally, breaking
   the whole shell on narrow screens regardless of that page's own responsive rules. */
.min-w-0 { min-width: 0; }

.pp-sidebar {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-dark-border);
  color: #B7C9D6;
  min-height: 100vh;
}
.pp-sidebar .pp-brand {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--glass-dark-border);
}
.pp-sidebar .pp-brand { font-family: var(--pp-serif); }
.pp-sidebar .pp-brand .pp-mono {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  display: grid; grid-auto-flow: column; place-content: center;
  background: linear-gradient(150deg, #243E56, #172A3D);
  border: 1px solid rgba(201, 222, 240, .28);
  box-shadow: 0 6px 18px rgba(8, 18, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-family: var(--pp-serif); font-weight: 700; font-size: 20.5px; line-height: 1; letter-spacing: -.04em;
}
.pp-sidebar .pp-brand .pp-mono .k { color: #fff; }
.pp-sidebar .pp-brand .pp-mono .d { color: #6FA8D4; }
.pp-sidebar .pp-brand .pp-brand-text { min-width: 0; }
/* Firm name: in the top header on desktop (.pp-topbar-brand); the phone menu shows it here and may wrap. */
.pp-sidebar .pp-brand .pp-brand-name { display: block; font-size: 17px; line-height: 1.2; }
/* Brand block (2026-09-30): KD logo + full firm name on one line, above the menu, in the menu's dark
   colour. The header runs the full width; the block starts at the left edge, is at least as wide as
   the menu (--pp-side-w) and widens only as far as the name needs. */
:root { --pp-bar-h: 64px; --pp-side-w: 248px; }
.pp-topbar { min-height: var(--pp-bar-h); }
.pp-topbar-brand {
  align-self: stretch; align-items: center; gap: 12px;
  margin-left: -1rem; padding: 0 1.4rem 0 1rem; min-width: var(--pp-side-w);
  background: var(--glass-dark-bg); color: #fff;
  border-bottom: 1px solid var(--glass-dark-bg);
  white-space: nowrap; flex: none;
}
.pp-topbar-brand .pp-mono {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  display: grid; grid-auto-flow: column; place-content: center;
  background: linear-gradient(150deg, #243E56, #172A3D);
  border: 1px solid rgba(201, 222, 240, .28);
  font-family: var(--pp-serif); font-weight: 700; font-size: 20.5px; line-height: 1; letter-spacing: -.04em;
}
.pp-topbar-brand .pp-mono .k { color: #fff; }
.pp-topbar-brand .pp-mono .d { color: #6FA8D4; }
.pp-topbar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.pp-topbar-brand-text .name { font-family: var(--pp-serif); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.pp-topbar-brand-text small { color: #8FB0C6; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
@media (min-width: 992px) {
  /* the header sits above the menu now */
  .pp-sidebar { min-height: calc(100vh - var(--pp-bar-h)); }
}
/* Client / employee logins: their company's name, bold and centred in the top bar. */
.pp-portal-company { font-weight: 700; font-size: 1.2rem; color: var(--pp-ink); min-width: 0; letter-spacing: -.01em; }
.pp-sidebar .pp-brand small { font-family: var(--pp-sans); color: #8FB0C6; display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.pp-sidebar .nav-link {
  color: #B7C9D6;
  border-radius: 10px;
  font-size: .92rem;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.pp-sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.pp-sidebar .nav-link.active {
  background: var(--pp-blue-deep);
  color: #fff;
  font-weight: 500;
}
/* mono count tags on nav items (demo .tag) */
.pp-sidebar .nav-link .tag {
  margin-left: auto;
  background: rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 1px 7px;
  font-family: var(--pp-mono);
  font-size: 12px;
}
.pp-sidebar .nav-link.active .tag { background: rgba(0, 0, 0, .22); }
.pp-sidebar .nav-header {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #7C9CB2;
  padding: 0 .75rem; margin: .75rem 0 .25rem;
}

.pp-topbar {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.pp-switcher {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 10px;
  color: var(--pp-ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pp-switcher .eyebrow { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); display: block; }

/* client switcher stays visible on phones (demo .switcher was desktop-only, d-none d-md-*) -
   min-width:0 lets the flex item shrink instead of forcing the topbar wider than the viewport,
   and the compact label ellipsizes instead of wrapping/overflowing. */
.pp-switcher-wrap { min-width: 0; flex: none; }
.pp-switcher-compact { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
/* "Company" box (2026-10-01): wide enough for a full company name on one line. */
@media (min-width: 768px) {
  .pp-switcher-wrap .pp-switcher { min-width: 280px; }
  .pp-switcher-wrap .pp-switcher .fw-medium { white-space: nowrap; }
  .pp-switcher-wrap .pp-switcher .caret { margin-left: auto; }
}

/* role chip in the topbar (replaces text-bg-light badge look) */
.badge.text-bg-light {
  background: var(--chip-bg) !important;
  color: var(--pp-ink) !important;
  border-color: var(--chip-border) !important;
}

.pp-who-btn { border-radius: 10px; padding: .2rem .35rem; }
.pp-who-btn:hover { background: var(--glass-hover) !important; }
.pp-who-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--pp-blue-deep); color: #fff; display: grid; place-items: center;
  font-size: .7rem; font-weight: 600;
}

/* ---- KPI cards ---- */
.pp-kpi {
  padding: .95rem 1.05rem;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pp-kpi:hover { transform: translateY(-2px); }
.pp-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--pp-blue-hi), var(--pp-blue));
}
.pp-kpi::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: .7;
}
.pp-kpi.is-warn::before { background: linear-gradient(180deg, #EAB94D, #D79A20); }
.pp-kpi.is-stop::before { background: linear-gradient(180deg, #D4574E, var(--pp-stop)); }
.pp-kpi.is-ok::before { background: linear-gradient(180deg, #2FA97E, var(--pp-ok)); }
.pp-kpi .pp-kpi-label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted); font-weight: 600; }
.pp-kpi .pp-kpi-val { font-family: var(--bs-font-monospace); font-size: 1.8rem; font-weight: 500; color: var(--pp-ink); margin: .2rem 0 0; }

/* ---- Pipeline rail (mockup's signature chevron element) ---- */
.pp-rail { display: flex; align-items: stretch; overflow: hidden; }
.pp-rail .pp-rail-step {
  flex: 1; min-width: 0; padding: .6rem .7rem .6rem .9rem; position: relative;
  background: var(--field-bg); border-right: 1px solid var(--pp-line-soft);
  transition: background .15s ease;
}
.pp-rail .pp-rail-step:last-child { border-right: 0; }
/* Chevron shape where clip-path is supported; plain segments otherwise. */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .pp-rail .pp-rail-step {
    padding-left: 1.6rem; margin-left: -13px; border-right: 0;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
  }
  .pp-rail .pp-rail-step:first-child {
    margin-left: 0; padding-left: .9rem;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  }
  .pp-rail .pp-rail-step:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
  }
}
.pp-rail .pp-rail-step .n { display: block; font-family: var(--pp-mono); font-size: .64rem; color: var(--pp-muted); opacity: .8; }
.pp-rail .pp-rail-step .s { font-size: .78rem; font-weight: 500; color: var(--pp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rail .pp-rail-step.done { background: var(--pp-blue-wash); }
.pp-rail .pp-rail-step.done .s { color: var(--pp-ink); }
.pp-rail .pp-rail-step.done .n { color: var(--pp-blue-deep); }
.pp-rail .pp-rail-step.now { background: var(--pp-blue-deep); }
.pp-rail .pp-rail-step.now .s { color: #fff; font-weight: 600; }
.pp-rail .pp-rail-step.now .n { color: #C6DCEC; }

/* ---- Pills / status badges ---- */
.pp-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 20px; padding: .18rem .6rem; font-size: .72rem; font-weight: 600; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pp-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pp-pill-ok { background: var(--pp-ok-bg); color: var(--pp-ok); }
.pp-pill-warn { background: var(--pp-warn-bg); color: var(--pp-warn); }
.pp-pill-stop { background: var(--pp-stop-bg); color: var(--pp-stop); }
.pp-pill-info { background: var(--pp-blue-wash); color: var(--pp-blue-deep); }
.pp-pill-mute { background: #EEF2F7; color: var(--pp-muted); }

/* ---- Tables ---- */
.pp-table-wrap { overflow: hidden; }
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pp-text);
  --bs-table-border-color: var(--pp-line-soft);
  --bs-table-hover-color: var(--pp-text);
  --bs-table-hover-bg: var(--row-hover);
  color: var(--pp-text);
  margin-bottom: 0;
}
.pp-table-wrap table thead { background: var(--thead-bg); }
.pp-table-wrap table th { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pp-muted); font-weight: 600; white-space: nowrap; padding-top: .65rem; padding-bottom: .65rem; }
.pp-table-wrap table td { border-color: var(--pp-line-soft); }
.pp-table-wrap table tbody tr { transition: background .12s ease; }
.pp-table-wrap table tbody tr:hover { background: var(--row-hover); }
/* Not scoped to .pp-table-wrap: money cells also appear on pay stubs and plain cards. */
.num { font-family: var(--bs-font-monospace); text-align: right; white-space: nowrap; }
/* Pay-time grids (2026-10-06): a fixed-width hour/amount input is a block box, which text-align
   can't move - it sat at the left of its right-aligned column, out of line with the header and the
   totals. Push it to the right edge and right-align the digits like every other number. */
td.num > .form-control { margin-left: auto; text-align: right; }
.table td.num > .form-control-sm { padding-right: .4rem; }

.pp-card-list .pp-card-row { padding: .75rem .9rem; margin-bottom: .5rem; transition: transform .15s ease, background .15s ease; }
.pp-card-list .pp-card-row:hover { transform: translateY(-1px); background: var(--glass-hover); }
.pp-card-list .pp-card-row .t { font-weight: 600; color: var(--pp-ink); }
.pp-card-list .pp-card-row .kv { display: flex; justify-content: space-between; font-size: .82rem; padding: .15rem 0; color: var(--pp-muted); }
.pp-card-list .pp-card-row .kv b { color: var(--pp-text); font-weight: 500; }

/* ---- Pay stub ---- */
.pp-stub { overflow: hidden; }
.pp-stub-top { background: linear-gradient(150deg, #1E3648, #2C5471); color: #fff; padding: 1rem 1.2rem; }
.pp-stub-net { background: var(--pp-blue-wash); border-top: 1px solid var(--pp-line); padding: .9rem 1.2rem; }

/* ---- Forms ---- */
.form-label { color: var(--pp-muted); }
/* background-color only — the shorthand would wipe Bootstrap's .form-select chevron layout */
.form-control, .form-select {
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  color: var(--pp-text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--pp-muted); opacity: .7; }
.form-control:focus, .form-select:focus {
  background-color: var(--field-bg-focus);
  border-color: var(--pp-blue);
  box-shadow: 0 0 0 .2rem rgba(111, 168, 212, .20);
  color: var(--pp-text);
}
/* Disabled/readonly fields (e.g. a locked, finalized payroll grid) must stay readable in dark mode.
   Without this Bootstrap paints them light-gray and the dark-theme text becomes invisible. */
.form-control:disabled, .form-control[readonly], .form-select:disabled {
  background-color: var(--field-bg) !important;
  color: var(--pp-text) !important;
  opacity: .75;
}
.input-group-text { background: var(--chip-bg); border: 1px solid var(--field-border); color: var(--pp-muted); border-radius: 10px; }

/* ---- Password show/hide toggle ---- */
.pp-password-field { position: relative; }
.pp-password-field .form-control { padding-right: 2.75rem; }
/* The show/hide button sits where Bootstrap draws its validation icon - keep the red border only. */
.pp-password-field .form-control.is-invalid,
.pp-password-field .form-control.is-valid { background-image: none; }
.pp-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--pp-muted);
  cursor: pointer;
}
.pp-password-toggle:hover { color: var(--pp-ink); }
.pp-password-toggle:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; border-radius: 6px; }
.pp-password-toggle .eye-closed { display: none; }
.pp-password-toggle[aria-pressed="true"] .eye-open { display: none; }
.pp-password-toggle[aria-pressed="true"] .eye-closed { display: block; }

/* ---- Buttons ---- */
.btn { border-radius: 10px; transition: transform .12s ease, filter .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary,
.btn.text-white[style*="--pp-blue-deep"] {
  background: var(--pp-blue-deep);
  border: 1px solid var(--pp-blue-deep);
}
.btn-primary:hover { background: #2B5375; border-color: #2B5375; }
.btn-outline-secondary {
  background: var(--field-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: var(--field-border);
  color: var(--pp-ink);
}
.btn-outline-secondary:hover { background: var(--glass-hover); color: var(--pp-ink); border-color: var(--pp-blue); }
.btn-outline-danger { border-color: var(--pp-stop); color: var(--pp-stop); }
.btn-outline-danger:hover { background: var(--pp-stop-bg); color: var(--pp-stop); border-color: var(--pp-stop); }
.btn-outline-primary {
  background: var(--field-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: var(--pp-blue);
  color: var(--pp-blue);
}
.btn-outline-primary:hover { background: var(--pp-blue); color: #fff; border-color: var(--pp-blue); }

/* ---- Alerts / toasts / modals ---- */
.alert {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}
.alert-success { background: var(--pp-ok-bg); color: var(--pp-ok); }
.alert-danger { background: var(--pp-stop-bg); color: var(--pp-stop); }
.alert-warning { background: var(--pp-warn-bg); color: var(--pp-warn); }
.alert-light, .alert-info { background: var(--glass-bg); color: var(--pp-text); border-color: var(--glass-border); }
.toast { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 12px; color: var(--pp-text); }
/* AJAX toasts use .pp-toast-ok / .pp-toast-err instead of Bootstrap's text-bg-* so they match the
   glass alert language in both themes (see app.js). A colored left bar carries the ok/error signal. */
.toast.pp-toast-ok { border-left: 4px solid var(--pp-ok); }
.toast.pp-toast-ok .toast-body { color: var(--pp-ok); }
.toast.pp-toast-err { border-left: 4px solid var(--pp-stop); }
.toast.pp-toast-err .toast-body { color: var(--pp-stop); }
.toast .btn-close { filter: none; }
/* Directional border utilities keep Bootstrap's near-white default; tokenize so pay-stub and
   detail dividers are not glaring light lines in dark mode. */
.border-top { border-top-color: var(--pp-line) !important; }
.border-bottom { border-bottom-color: var(--pp-line) !important; }
.border-end { border-right-color: var(--pp-line) !important; }
.border-start { border-left-color: var(--pp-line) !important; }
/* Clickable chooser cards (Payroll/Employee "Choose a client") get the same hover lift as list rows. */
.pp-portal-card { transition: transform .15s ease, background .15s ease, border-color .15s ease; }
a.pp-portal-card:hover, .pp-portal-card.is-hoverable:hover { transform: translateY(-2px); background: var(--glass-hover); border-color: var(--pp-blue); }
.modal-content { color: var(--pp-text); }
.btn-close { filter: none; }

.offcanvas.pp-sidebar { background: var(--glass-dark-bg); }

/* page fade-in for a softer feel */
@media (prefers-reduced-motion: no-preference) {
  main { animation: pp-fade .28s ease; }
  @keyframes pp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ===========================================================
   Login — portal chooser scene (demo #view-login)
   =========================================================== */
.pp-login {
  min-height: calc(100vh - 32px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--pp-ink);
}
.pp-login-art {
  padding: 52px 54px;
  color: #CBDDE9;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(111, 168, 212, .30), transparent 60%),
    linear-gradient(160deg, #1E3648, #2A4C66);
  position: relative;
  overflow: hidden;
}
.pp-login-art::after {
  content: ""; position: absolute; inset: auto -20% -40% -20%; height: 60%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 46px);
}
.pp-login-art h1 {
  font-family: var(--pp-serif); color: #fff; font-size: 35.5px; line-height: 1.18;
  margin: 26px 0 12px; font-weight: 600; max-width: 15ch;
}
.pp-login-art p { max-width: 44ch; font-size: 15.5px; line-height: 1.65; color: #AFC4D3; }
.pp-login-brand { display: flex; align-items: center; gap: 10px; }
.pp-login-brand .mark {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: linear-gradient(150deg, var(--pp-blue-hi), var(--pp-blue));
  display: grid; place-items: center; color: #fff; font-family: var(--pp-serif); font-size: 17.5px;
}
.pp-login-brand .name { font-family: var(--pp-serif); color: #fff; font-size: 16.5px; line-height: 1.15; }
.pp-login-brand .sub { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #7F9AAC; margin-top: 2px; }
.pp-login-facts {
  margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  position: relative; z-index: 1;
}
.pp-login-facts div { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 11px; }
.pp-login-facts b { display: block; font-family: var(--pp-mono); color: #fff; font-size: 21.5px; font-weight: 500; }
.pp-login-facts span { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: #7F9AAC; }
.pp-login-panel { background: var(--pp-paper); padding: 52px 54px; display: flex; flex-direction: column; justify-content: center; }
.pp-login-panel h2 { margin: 0 0 4px; font-size: 20.5px; color: var(--pp-ink); }
.pp-login-panel .sub { color: var(--pp-muted); margin: 0 0 22px; font-size: 14.5px; }
.pp-portal {
  width: 100%; text-align: left; background: #fff; border: 1px solid var(--pp-line); border-radius: 10px;
  padding: 14px 15px; display: flex; align-items: center; gap: 13px; margin-bottom: 10px;
  box-shadow: var(--glass-shadow); cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.pp-portal:hover { border-color: var(--pp-blue); transform: translateY(-1px); }
.pp-portal.active { border-color: var(--pp-blue-deep); box-shadow: 0 0 0 2px rgba(70, 130, 180, .25); }
.pp-portal .pico {
  width: 38px; height: 38px; border-radius: 9px; background: var(--pp-blue-wash); color: var(--pp-blue-deep);
  display: grid; place-items: center; font-size: 17.5px; flex: none;
}
.pp-portal .pt { font-weight: 600; color: var(--pp-ink); display: block; }
.pp-portal .pd { font-size: 13.5px; color: var(--pp-muted); display: block; }
.pp-portal .go { margin-left: auto; color: var(--pp-blue-deep); font-size: 17.5px; }
.pp-mfa { margin-top: 16px; font-size: 13.5px; color: var(--pp-muted); display: flex; align-items: center; gap: 7px; }

.pp-btn-signin {
  background: var(--pp-blue-deep);
  border: 1px solid var(--pp-blue-deep);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  transition: background .15s ease;
}
.pp-btn-signin:hover { color: #fff; background: #2B5375; border-color: #2B5375; }

@media (max-width: 1080px) {
  .pp-login { grid-template-columns: 1fr; }
  .pp-login-art { padding: 34px 26px; }
  .pp-login-panel { padding: 30px 26px; }
  .pp-login-art h1 { font-size: 29.5px; margin-top: 20px; }
}

.mask { font-family: var(--bs-font-monospace); letter-spacing: .02em; }

/* list-row (mockup): compact label/value rows used in dashboard side cards, detail panels. */
.list-row .grow { min-width: 0; }
.list-row .t { font-weight: 500; }
.list-row .d { color: var(--pp-muted); }

/* ---- Tabs (mockup) ---- */
.pp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pp-line); margin-bottom: 1rem; flex-wrap: wrap; }
.pp-tab {
  background: none; border: 0; padding: .55rem .85rem; color: var(--pp-muted);
  font-size: .85rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; display: inline-block;
}
.pp-tab:hover { color: var(--pp-blue-deep); }
.pp-tab.is-active { color: var(--pp-blue-deep); border-bottom-color: var(--pp-blue-deep); font-weight: 600; }

/* ---- Who-cell: avatar + name/sub, used in client & employee tables (mockup) ---- */
.who-cell { display: flex; align-items: center; gap: .55rem; }
.who-cell .av {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--pp-blue-wash); color: var(--pp-blue); display: grid; place-items: center;
  font-size: .66rem; font-weight: 600; border: 1px solid var(--chip-border);
}
.who-cell .nm { font-weight: 500; line-height: 1.2; color: var(--pp-ink); }
.who-cell .sb { font-size: .72rem; color: var(--pp-muted); }

/* ---- Note (mockup): blue-wash callout with a left accent ---- */
.pp-note {
  background: var(--pp-blue-wash); border: 1px solid var(--chip-border); border-left: 3px solid var(--pp-blue);
  border-radius: 10px; padding: .7rem .85rem; font-size: .82rem; color: var(--pp-ink-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pp-note strong { color: var(--pp-ink); }

/* ---- Dropdown menu (mockup): topbar avatar / actions ---- */
.pp-dd { position: relative; display: inline-block; }
.pp-dd-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 1080;
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--glass-shadow);
  padding: 5px; display: none;
}
.pp-dd.is-open .pp-dd-menu { display: block; }
.pp-dd-menu a, .pp-dd-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: none; border: 0; padding: .5rem .6rem; border-radius: 8px; color: var(--pp-text);
  font-size: .85rem; text-decoration: none;
}
.pp-dd-menu a:hover, .pp-dd-menu button:hover { background: var(--glass-hover); color: var(--pp-ink); }
.pp-dd-menu .dd-h { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--pp-muted); padding: .5rem .6rem .25rem; font-weight: 600; }
.pp-dd-menu .dd-sep { height: 1px; background: var(--pp-line-soft); margin: .25rem 0; }
.pp-dd-menu .sub { display: block; font-size: .72rem; color: var(--pp-muted); font-weight: 400; }

/* ---- Pay-stub net box (mockup) ---- */
.pp-netbox { border: 1px solid var(--pp-ink); border-radius: 8px; padding: .6rem .75rem; }
.pp-netbox .nr { display: flex; justify-content: space-between; font-size: .8rem; padding: .12rem 0; }
.pp-netbox .nr b { font-family: var(--pp-mono); }
.pp-netbox .grand { border-top: 1px solid var(--pp-ink); margin-top: .35rem; padding-top: .45rem; font-weight: 700; color: var(--pp-ink); }
.pp-netbox .grand b { font-size: 1.05rem; }

/* ===========================================================
   Print — pay stubs (Paycheck/Details, EmployeePortal/Stub).
   Force a clean light document regardless of the active theme,
   hide app chrome, and keep the dark stub header readable by
   letting its background print.
   =========================================================== */
@media print {
  :root {
    --pp-ink: #1B2C3A; --pp-text: #1B2C3A; --pp-muted: #5B7488;
    --pp-line: #D3DFE9; --pp-line-soft: #E6EDF3;
  }
  body { background: #fff !important; background-image: none !important; color: #1B2C3A !important; }
  .pp-sidebar, .pp-topbar, .offcanvas, #ppToastContainer, .toast-container, .demo-bar,
  .d-print-none, .btn { display: none !important; }
  main { animation: none !important; padding: 0 !important; }
  /* Ensure the dark stub header (white text on gradient) prints its background. */
  .pp-stub, .pp-stub-top, .pp-stub-net {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .pp-stub { border: 1px solid #D3DFE9 !important; background: #fff !important; }
  .pp-stub-top { background: #1E3648 !important; color: #fff !important; }
  .pp-stub-net { background: #EAF2F8 !important; }
  .card, .pp-table-wrap { box-shadow: none !important; border: 1px solid #D3DFE9 !important; background: #fff !important; }
}

/* ===========================================================
   Demo-mockup chrome: banner, topbar controls, empty states,
   kv rows, mini stage rail, table print export.
   =========================================================== */
.demo-bar {
  background: linear-gradient(90deg, var(--pp-ink), var(--pp-ink-2));
  color: #CBDDE9; padding: 7px 20px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; display: flex; gap: 14px; align-items: center; justify-content: center;
  font-weight: 500;
}
.demo-bar strong { color: #fff; font-weight: 600; }
.demo-bar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pp-blue-hi); }
@media (max-width: 720px) {
  .demo-bar { font-size: 11.5px; padding: 6px 12px; text-align: center; line-height: 1.4; }
  .demo-bar .dot { display: none; }
}

/* topbar client switcher (demo .switcher) */
.pp-switcher .caret { color: var(--pp-muted); font-size: 11.5px; }
button.pp-switcher { cursor: pointer; }

/* topbar icon buttons: alerts bell, help (demo .icon-btn) */
.pp-icon-btn {
  border: 1px solid var(--pp-line); background: #fff; border-radius: 8px;
  width: 32px; height: 32px; color: var(--pp-muted); position: relative;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pp-icon-btn .badge {
  position: absolute; top: -5px; right: -5px; background: var(--pp-stop); color: #fff;
  border-radius: 20px; font-size: 11px; padding: 1px 5px; font-family: var(--pp-mono);
}

/* topbar search (demo .search). min-width:0 overrides the flex-item default of
   min-width:auto, which otherwise floors an <input> at its content-based intrinsic
   width and forces the whole topbar (hamburger + search + icons + avatar) wider
   than a phone viewport, pushing it into horizontal overflow. */
.pp-search {
  flex: 1; min-width: 0; max-width: 340px; border: 1px solid var(--pp-line); border-radius: 8px;
  padding: 7px 11px; color: var(--pp-text); background: #FBFDFF; font-size: 14.5px; font-family: inherit;
}
.pp-search:focus { border-color: var(--pp-blue-hi); outline: none; background: #fff; }
.pp-search::placeholder { color: var(--pp-faint); }
/* the wrapper takes the flex sizing so the results panel can sit under the box */
.pp-search-wrap { position: relative; flex: 1; min-width: 0; max-width: 340px; }
.pp-search-wrap .pp-search { width: 100%; max-width: none; }
.pp-search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1080; min-width: 260px;
  max-height: 60vh; overflow-y: auto; display: none;
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: var(--glass-shadow); padding: 5px;
}
.pp-search-panel.is-open { display: block; }
.pp-search-panel .dd-h { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--pp-muted); padding: .5rem .6rem .25rem; font-weight: 600; }
.pp-search-panel .pp-sr {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: 0;
  padding: .45rem .6rem; border-radius: 8px; color: var(--pp-text); font-size: .85rem; text-decoration: none; cursor: pointer;
}
.pp-search-panel .pp-sr:hover, .pp-search-panel .pp-sr.is-active { background: var(--glass-hover); color: var(--pp-ink); }
.pp-search-panel .pp-sr .k { margin-left: auto; font-family: var(--pp-mono); font-size: 12px; color: var(--pp-faint); }
.pp-search-panel .pp-sr-note { padding: .45rem .6rem; font-size: .82rem; color: var(--pp-muted); }
/* compact mode (shell.js sets body.pp-search-compact on phones, and whenever the bar leaves the
   box under 180px - tablets, crowded company bars): the box leaves the bar and opens as a
   full-width strip under it from the search icon */
.pp-icon-btn.pp-search-toggle { display: none; }
body.pp-search-compact .pp-icon-btn.pp-search-toggle { display: inline-flex; }
body.pp-search-compact .pp-search-wrap {
  display: none; position: fixed; z-index: 1085; max-width: none;
  top: calc(var(--pp-bar-h) + 6px); left: 12px; right: 12px;
}
body.pp-search-compact.pp-search-open .pp-search-wrap { display: block; }
body.pp-search-compact .pp-search-wrap .pp-search { font-size: 16px; padding: 10px 12px; box-shadow: var(--glass-shadow); } /* 16px stops iOS zoom-on-focus */
body.pp-search-compact .pp-search-panel { min-width: 0; max-height: 55vh; }
@media (min-width: 768px) {
  body.pp-search-compact .pp-search-wrap { left: auto; width: 420px; right: 16px; }
}
/* a filter is applied but the strip is closed: blue icon with a dot */
body.pp-search-active .pp-search-toggle { color: var(--pp-blue-hi); }
body.pp-search-active .pp-search-toggle::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-blue-hi);
}
.pp-search-miss { display: none !important; }
.pp-search-hit { outline: 2px solid var(--pp-blue-hi); outline-offset: -2px; }

/* dropdown menu extras (demo .dd-m .k / wide alert menu) */
.pp-dd-menu .k { margin-left: auto; font-family: var(--pp-mono); font-size: 12px; color: var(--pp-faint); }
.pp-dd-menu.wide { min-width: 290px; }
.pp-dd.left .pp-dd-menu { right: auto; left: 0; }

/* empty states (demo .empty) */
.pp-empty { padding: 36px 20px; text-align: center; color: var(--pp-muted); }
.pp-empty b { display: block; color: var(--pp-ink); font-size: 15.5px; margin-bottom: 4px; }

/* key/value rows (demo .kv) */
.pp-kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--pp-line-soft); font-size: 14.5px; }
.pp-kv:last-child { border-bottom: 0; }
.pp-kv dt { color: var(--pp-muted); font-weight: 400; }
.pp-kv dd { margin: 0; font-weight: 500; text-align: right; }
.pp-kv dd.num { font-family: var(--pp-mono); }

/* list rows (demo .list-row) */
.pp-list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--pp-line-soft); }
.pp-list-row:last-child { border-bottom: 0; }
.pp-list-row .grow { min-width: 0; flex: 1; }
.pp-list-row .t { font-weight: 500; font-size: 14.5px; color: var(--pp-ink); }
.pp-list-row .d { font-size: 13px; color: var(--pp-muted); }

/* KPI foot line (demo .kpi-foot) */
.pp-kpi-foot { font-size: 13px; color: var(--pp-muted); margin-top: 2px; }
.pp-kpi-foot .up { color: var(--pp-ok); font-weight: 600; }
.pp-kpi-foot .dn { color: var(--pp-stop); font-weight: 600; }

/* mini stage rail inside table rows (demo .mini-rail) */
.pp-mini-rail { display: flex; gap: 2px; }
.pp-mini-rail i { width: 13px; height: 4px; border-radius: 2px; background: var(--pp-line); display: block; }
.pp-mini-rail i.on { background: var(--pp-blue); }
.pp-mini-rail i.cur { background: var(--pp-blue-hi); }

/* staff workload bar (dashboard side card) */
.pp-staffbar { height: 4px; border-radius: 2px; background: var(--pp-blue-wash); overflow: hidden; margin: 3px 0 4px; }
.pp-staffbar i { display: block; height: 100%; background: var(--pp-blue); border-radius: 2px; }

/* ghost row-action button (demo .btn-ghost) */
.pp-btn-ghost { border: 1px solid transparent; background: transparent; color: var(--pp-blue-deep); }
.pp-btn-ghost:hover { color: var(--pp-blue-deep); background: var(--pp-blue-wash); border-color: transparent; }

/* table export print root (demo #print-root) */
#pp-print-root { display: none; }
.pp-print-head { display: flex; align-items: flex-start; gap: 14px; border-bottom: 2px solid #1E3648; padding-bottom: 10px; margin-bottom: 14px; }
.pp-print-head h2 { font-family: var(--pp-serif); font-size: 16px; margin: 0; color: #1E3648; }
.pp-print-head .pm { margin-left: auto; text-align: right; font-size: 11px; color: #555; }
@media print {
  body.is-printing > * { display: none !important; }
  body.is-printing > #pp-print-root { display: block !important; }
  #pp-print-root .table, #pp-print-root table { width: 100%; border-collapse: collapse; font-size: 12px; }
  #pp-print-root th, #pp-print-root td { border: 1px solid #b9c6d6; padding: 4px 8px; text-align: left; }
  #pp-print-root tbody tr { break-inside: avoid; }
}

/* current selection inside dropdown menus (demo .dd-m .is-on) */
.pp-dd-menu a.is-on, .pp-dd-menu button.is-on { background: var(--pp-blue-wash); color: var(--pp-blue-deep); font-weight: 600; }

/* ===========================================================
   Dashboard analytics (trend chart, status donut, client
   ranking, insight tiles, tax exposure, deadlines) - ported
   from patel-payroll-dashboard-enhanced-v5.html, ids/classes
   renamed to the pp- prefix convention used everywhere else.
   =========================================================== */
.pp-dash-analytics { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; }
.pp-analytics-bottom { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 14px; }
.pp-detail-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
@media (max-width: 991px) {
  .pp-dash-analytics, .pp-analytics-bottom, .pp-detail-grid { grid-template-columns: 1fr; }
}

.pp-chart-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 2px; }
.pp-chart-head h3 { margin: 0; color: var(--pp-ink); font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.pp-chart-head p { margin: 3px 0 0; color: var(--pp-muted); font-size: 13px; line-height: 1.4; }
.pp-chart-head .pp-chart-actions { margin-left: auto; display: flex; gap: 4px; flex: none; }
.pp-chart-btn { border: 1px solid var(--pp-line); background: #fff; color: var(--pp-muted); border-radius: 6px; padding: 4px 8px; font: 500 10.5px var(--pp-sans); }
.pp-chart-btn:hover { border-color: #B4CADA; background: #FBFDFF; }
.pp-chart-btn.is-active { background: var(--pp-blue-wash); border-color: #CBDDEA; color: var(--pp-blue-deep); font-weight: 600; }
.pp-chart-svg { width: 100%; height: 220px; display: block; overflow: visible; }
.pp-chart-grid { stroke: var(--pp-line-soft); stroke-width: 1; }
.pp-chart-axis, .pp-chart-label { fill: var(--pp-muted); font-family: var(--pp-sans); font-size: 11.5px; }
.pp-chart-value { fill: var(--pp-ink); font-family: var(--pp-mono); font-size: 11.5px; font-weight: 600; }
.pp-chart-area { fill: rgba(70, 130, 180, .13); stroke: none; }
.pp-chart-line { fill: none; stroke: var(--pp-blue-deep); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pp-chart-dot { fill: #fff; stroke: var(--pp-blue-deep); stroke-width: 2; }
.pp-chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 4px 0; color: var(--pp-muted); font-size: 12px; }
.pp-chart-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-blue); display: inline-block; margin-right: 5px; }

.pp-status-chart-wrap { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 200px; }
.pp-donut { width: 130px; height: 130px; display: block; }
.pp-donut-track { fill: none; stroke: #EAF0F5; stroke-width: 16; }
.pp-donut-seg { fill: none; stroke-width: 16; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 75px 75px; }
.pp-donut-center-big { fill: var(--pp-ink); font-family: var(--pp-mono); font-size: 23.5px; font-weight: 600; text-anchor: middle; }
.pp-donut-center-small { fill: var(--pp-muted); font-family: var(--pp-sans); font-size: 11px; text-anchor: middle; }
.pp-status-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-status-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.pp-status-item .sw { width: 8px; height: 8px; border-radius: 50%; display: block; }
.pp-status-item .name { color: var(--pp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-status-item .num { font-family: var(--pp-mono); font-weight: 600; color: var(--pp-ink); }

.pp-rank-list { display: flex; flex-direction: column; gap: 12px; }
.pp-rank-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.pp-rank-num { width: 26px; height: 26px; border-radius: 7px; background: var(--pp-blue-wash); color: var(--pp-blue-deep); display: grid; place-items: center; font-family: var(--pp-mono); font-size: 11.5px; font-weight: 600; }
.pp-rank-main { min-width: 0; }
.pp-rank-name { font-size: 13.5px; font-weight: 500; color: var(--pp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rank-bar { height: 6px; background: #EDF2F6; border-radius: 8px; margin-top: 5px; overflow: hidden; }
.pp-rank-bar i { display: block; height: 100%; border-radius: 8px; background: var(--pp-blue); }
.pp-rank-value { font-family: var(--pp-mono); font-size: 12.5px; color: var(--pp-ink); white-space: nowrap; }

.pp-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-insight { border: 1px solid var(--pp-line-soft); background: #FBFDFF; border-radius: 8px; padding: 11px 12px; min-width: 0; }
.pp-insight .il { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pp-muted); font-weight: 600; }
.pp-insight .iv { font-family: var(--pp-mono); font-size: 20.5px; color: var(--pp-ink); margin: 5px 0 2px; line-height: 1.1; }
.pp-insight .id { font-size: 12px; color: var(--pp-muted); line-height: 1.35; }
.pp-insight .id.up { color: var(--pp-ok); }
.pp-insight .id.warn { color: var(--pp-warn); }

.pp-tax-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-tax-table th { padding: 7px 8px; text-align: left; background: var(--pp-thead-bg, #F7FAFE); color: var(--pp-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pp-tax-table td { padding: 8px; border-bottom: 1px solid var(--pp-line-soft); }
.pp-tax-table tr:last-child td { border-bottom: 0; }
.pp-tax-table .num { text-align: right; font-family: var(--pp-mono); }

.pp-deadline-list { display: flex; flex-direction: column; gap: 9px; }
.pp-deadline { display: grid; grid-template-columns: 54px 1fr auto; gap: 9px; align-items: center; }
.pp-deadline-date { background: var(--pp-blue-wash); color: var(--pp-blue-deep); border-radius: 7px; padding: 6px 5px; text-align: center; font-family: var(--pp-mono); font-size: 11.5px; font-weight: 600; }
.pp-deadline-title { font-size: 13px; font-weight: 500; color: var(--pp-ink); }
.pp-deadline-sub { font-size: 12px; color: var(--pp-muted); }

/* ---- Pay-time editing: Save -> Review/Edit (Payroll workspace + client portal run) ---- */
.pp-row-dirty > td, .pp-card-row.pp-row-dirty { background: var(--pp-warn-bg) !important; }
.pp-row-dirty > td:first-child { box-shadow: inset 3px 0 0 var(--pp-warn); }
.pp-row-flash > td, .pp-card-row.pp-row-flash { animation: pp-flash 1.4s ease-out; }
@keyframes pp-flash { from { background: var(--pp-blue-wash); } to { background: transparent; } }
.pp-pt-footer { border-top: 1px solid var(--pp-line-soft); }
.pp-pt-footer .pp-pt-arrow { color: var(--pp-muted); font-size: 1rem; }
.pp-pt-review .pp-pt-changed { background: var(--pp-warn-bg); font-weight: 600; }
.pp-pt-review .pp-pt-old { color: var(--pp-muted); text-decoration: line-through; font-weight: 400; margin-right: .25rem; }
.pp-pt-review .pp-pt-bad { background: var(--pp-stop-bg); color: var(--pp-stop); }
.pp-comment-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-blue); margin-left: 4px; vertical-align: middle; }

/* ===========================================================
   SweetAlert2 confirm dialogs (pp.confirm / data-pp-confirm) —
   themed to the app tokens; buttons use the Bootstrap classes.
   =========================================================== */
.swal2-popup { font-family: var(--pp-sans); color: var(--pp-text); border: 1px solid var(--pp-line); border-radius: 12px; }
.swal2-title { color: var(--pp-ink); font-size: 1.25rem; font-weight: 600; }
.swal2-html-container { color: var(--pp-muted); font-size: .95rem; }
.swal2-actions { gap: .25rem; }
.swal2-icon.swal2-warning { border-color: var(--pp-warn); color: var(--pp-warn); }

/* Inactivity warning (wwwroot/js/idle.js, 2026-09-30) */
.pp-idle-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 30, 45, .55); display: grid; place-items: center; padding: 16px; }
.pp-idle-backdrop[hidden] { display: none; }
.pp-idle-card { background: #fff; border-radius: 14px; padding: 22px 24px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(8, 18, 30, .35); color: var(--pp-text); }
.pp-idle-card #ppIdleCount { font-family: var(--pp-mono); color: var(--pp-ink); }

/* Mandatory-field marker added by app.js markRequired (2026-09-30) */
.pp-req { color: #D92D20; font-weight: 700; }

/* Review-before-save dialog (2026-10-06, app.js reviewForm) */
.pp-review { max-height: 60vh; overflow-y: auto; font-size: .86rem; }
.pp-review-h { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--pp-muted); margin: .9rem 0 .3rem; }
.pp-review-h:first-child { margin-top: 0; }
.pp-review-table { width: 100%; border-collapse: collapse; }
.pp-review-table th, .pp-review-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--pp-line-soft, #e6ebf0); vertical-align: top; }
.pp-review-table th { width: 40%; font-weight: 500; color: var(--pp-muted); }
.pp-review-table td { color: var(--pp-ink); word-break: break-word; }

/* Dashboard "Payrolls in Progress" (2026-10-07) and "Upcoming Payroll Deadlines" (2026-10-08): the list scrolls inside its card, table header row stays visible. */
.pp-dash-scroll { max-height: 420px; overflow-y: auto; }
.pp-dash-scroll table thead th { position: sticky; top: 0; z-index: 1; background: var(--thead-bg); }