/* ==========================================================================
   HR pages — page-specific styles on top of the app skin (pages-m2.css).
   Every rule is scoped to its page: body[data-app-page="x"] or a page class.
   --------------------------------------------------------------------------
   Pages: Overview, Staff, Compensation, Payroll, Leave, Reports, Team & Roles.
   Each render wraps its body in  .sx-wrap.lp2.lp2-tone-X.lp2-hr.lp2-hr-<page>
   (hr.js, app/payroll.js, app/cashflow-purchases.js renderTeam), so page
   rules hang off .lp2-hr. Pop-ups live in <body>, not in the page, so their
   rules hang off the .hr-sheet / .hr-form classes the HR pop-ups carry.
   Tones: overview violet, staff blue, compensation amber, payroll teal,
   leave pink, reports indigo, team cyan.
   Primary text #000; secondary text no lighter than #475569.
   ========================================================================== */

/* ---- Header -------------------------------------------------------------- */

.lp2-hr .hr-head-text { min-width: 0; }
.lp2-hr .hr-head-text .page-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp2-hr .hr-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lp2-hr .page-header .help-trigger { width: 38px; }

/* ---- One tab bar across the HR pages (scrolls sideways on phones) ------- */

body.lp2-app .lp2-hr .hr-tabs {
    display: flex; position: relative; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin: 0 0 14px;
}
body.lp2-app .lp2-hr .hr-tabs::-webkit-scrollbar { display: none; }
body.lp2-app .lp2-hr .hr-tabs .doc-tab { flex: 0 0 auto; white-space: nowrap; gap: 6px; }
body.lp2-app .lp2-hr .hr-tabs .doc-tab.active i { color: var(--lp2-h3); }
@media (min-width: 561px) {
    body.lp2-app .lp2-hr .hr-tabs { width: fit-content; }
}
@media (max-width: 560px) {
    body.lp2-app .lp2-hr .hr-tabs { width: 100%; }
    body.lp2-app .lp2-hr .hr-tabs .doc-tab { padding: 7px 11px; }
}

/* ---- Layout ---------------------------------------------------------------- */

.lp2-hr .hr-cols { display: block; }
.lp2-hr .sx-list + .lp2-cap,
.lp2-hr .sx-list + .lp2-lbl,
.lp2-hr .hr-tiles + .lp2-cap,
.lp2-hr .hr-away + .hr-cols,
.lp2-hr .sx-list + .hr-role-grid { margin-top: 18px; }
.lp2-hr .hr-cols > div > .sx-list:last-child,
.lp2-hr .hr-cols > div > .hr-tiles:last-child { margin-bottom: 16px; }
@media (min-width: 1100px) {
    .lp2-hr .hr-cols {
        display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start;
    }
    .lp2-hr-reports .hr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .lp2-hr .hr-col-side .sx-pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Rows ------------------------------------------------------------------ */

/* information-only rows: no pointer, no hover — they do not open anything */
.lp2-hr .hr-row.hr-static { cursor: default; }
.lp2-hr .hr-row.hr-static:hover,
.lp2-hr .hr-row.hr-static:active { background: transparent; }
.lp2-hr .hr-row[role="button"]:focus-visible { outline: 2px solid var(--lp2-h3); outline-offset: -2px; }
/* rows that take you somewhere show where */
.lp2-hr .hr-go .sx-chev { display: block; color: #94a3b8; font-size: .85rem; margin-left: 0; }
.lp2-hr .hr-go:hover .sx-chev { color: color-mix(in srgb, var(--sx-c, #059669) 72%, #000); transform: none; }
.lp2-hr .hr-row-extra { margin-top: 2px; color: #334155; font-weight: 550; }
.lp2-hr .sx-amt small { margin-left: 2px; font-size: .7em; font-weight: 700; color: #475569; }
.lp2-hr .sx-ref .lp2-tag { margin-left: 6px; }
.lp2-hr .lp2-badges .sx-time { font-size: .66rem; font-weight: 650; color: #475569; white-space: nowrap; }
.lp2-hr .hr-muted { font-size: .74rem; font-weight: 650; color: #475569; white-space: nowrap; }
.lp2-hr .hr-unnamed,
body.lp2-app .modal .hr-unnamed { font-style: italic; font-weight: 700; color: #334155; }
.lp2-hr .hr-struck { text-decoration: line-through; text-decoration-thickness: 1.5px; color: #475569 !important; }
.lp2-hr .sx-list > .sx-empty .hr-empty-btn { margin-top: 14px; }

/* invites: their actions stay in view on phones (there is nothing to open) */
@media (max-width: 719px) {
    .lp2-hr .hr-inline-acts { flex-wrap: wrap; }
    .lp2-hr .hr-inline-acts .sx-item-actions { display: flex; flex-wrap: wrap; width: 100%; margin-top: 8px; padding-top: 8px; }
}

/* ---- Filter chips, search ------------------------------------------------ */

.lp2-hr .hr-chips { margin: 0 0 12px; flex-wrap: nowrap; overflow-x: auto; }
.lp2-hr .hr-chips .pill-tab i { margin-right: 4px; font-size: .8rem; }
@media (max-width: 719px) {
    .lp2-hr .hr-chips { margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
}
.lp2-hr .hr-card .hr-chips { margin: 0 0 12px; padding: 0; flex-wrap: wrap; overflow: visible; }
.lp2-hr .hr-dir-toolbar { margin: 0 0 10px; }

/* caption with a button on the right ("Add", "Create role") */
.lp2-hr .hr-cap-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: none;
    color: var(--lp2-deep);
    background: color-mix(in srgb, var(--lp2-h3) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--lp2-h3) 28%, #fff);
}
.lp2-hr .hr-cap-btn:hover { background: color-mix(in srgb, var(--lp2-h3) 14%, #fff); }

/* notes */
.lp2-hr .hr-note.is-warn { background: #fffbeb; border-color: #fde68a; }
.lp2-hr .hr-note.is-warn > i { color: #b45309; }
.lp2-hr .hr-link {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 800; color: var(--lp2-deep); text-decoration: underline;
}

/* ---- Who is away today (Overview, Leave) --------------------------------- */

.lp2-hr .hr-away {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px 16px; padding: 2px 16px 4px;
}
.lp2-hr .hr-away::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
    .lp2-hr .hr-away { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; }
}
.lp2-hr .hr-away-chip {
    flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
    padding: 7px 12px 7px 7px; border-radius: 14px; cursor: pointer;
    font: inherit; text-align: left;
    background: #fff; border: 1px solid color-mix(in srgb, var(--sx-c, #db2777) 26%, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease;
}
.lp2-hr .hr-away-chip:hover { border-color: var(--sx-c, #db2777); }
.lp2-hr .hr-away-av {
    width: 34px; height: 34px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    background: var(--sx-c, #db2777); color: #fff; font-size: .74rem; font-weight: 800;
}
.lp2-hr .hr-away-txt b { display: block; font-size: .82rem; font-weight: 800; color: #000; white-space: nowrap; }
.lp2-hr .hr-away-txt small { display: block; font-size: .7rem; font-weight: 650; color: #475569; white-space: nowrap; }

/* ---- Share tiles (team by role / by branch) ------------------------------ */

.lp2-hr .hr-tile .sx-pm-head { min-width: 0; }
.lp2-hr .hr-tile .hr-tile-head { min-width: 0; }
.lp2-hr .hr-tile .sx-pm-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp2-hr .hr-tile .sx-pm-val small { font-size: .62em; font-weight: 700; color: #475569; }

/* ---- Cards with forms (Compensation defaults, Report period) ------------- */

.lp2-hr .hr-card { padding: 14px; background: #fff; }
.lp2-hr .hr-card .form-stack { display: flex; flex-direction: column; gap: 12px; }
.lp2-hr .hr-card .input-row { gap: 10px; }
.lp2-hr .hr-card .input-group label { font-size: .76rem; font-weight: 750; color: #334155; }
.lp2-hr .hr-card input[type="number"],
.lp2-hr .hr-card input[type="text"],
.lp2-hr .hr-card input[type="date"],
.lp2-hr .hr-card select {
    width: 100%; height: 44px; padding: 0 12px;
    border: 1px solid #dbe2ea; border-radius: 12px; background: #fff; color: #000; font-size: .9rem;
}
.lp2-hr .hr-card input:focus,
.lp2-hr .hr-card select:focus { border-color: var(--lp2-h3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3) 18%, transparent); outline: none; }

/* working days: seven toggles that save as "1,2,3,4,5" (Salaries page and the
   Leave rules pop-up) */
.lp2-hr .hr-days, .modal .hr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.lp2-hr .hr-day, .modal .hr-day {
    height: 38px; padding: 0; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: .74rem; font-weight: 750;
    color: #1e293b; background: #fff; border: 1px solid #dbe2ea;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lp2-hr .hr-day:hover, .modal .hr-day:hover { border-color: #94a3b8; }
.lp2-hr .hr-day.on { color: #fff; background: var(--lp2-deep); border-color: var(--lp2-deep); }
.modal .hr-day.on { color: #fff; background: #059669; border-color: #059669; }
.lp2-hr .hr-day:focus-visible, .modal .hr-day:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }

/* ---- Payroll rows: Draft → Approved → Paid ------------------------------- */

.lp2-hr .hr-steps { display: flex; align-items: center; gap: 3px; margin-top: 6px; min-width: 0; }
.lp2-hr .hr-steps i { flex: none; width: 18px; height: 4px; border-radius: 99px; background: #e2e8f0; }
.lp2-hr .hr-steps i.on { background: var(--sx-c, #0d9488); }
.lp2-hr .hr-steps span {
    min-width: 0; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .7rem; font-weight: 750; color: color-mix(in srgb, var(--sx-c, #0d9488) 72%, #000);
}
.lp2-hr .hr-steps[data-s="cancelled"] span { color: #475569; }
.lp2-hr .hr-run-row .sx-end .sx-time { font-size: .66rem; font-weight: 650; color: #475569; }
@media (max-width: 419px) {
    /* phones: the stage label goes under its bars instead of being cut */
    .lp2-hr .hr-steps { flex-wrap: wrap; row-gap: 3px; }
    .lp2-hr .hr-steps span { flex-basis: 100%; margin-left: 0; white-space: normal; }
}

/* ---- Team & Roles: role cards -------------------------------------------- */

.lp2-hr .hr-role-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) {
    .lp2-hr .hr-role-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
.lp2-hr .hr-role-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px; padding: 15px 14px 12px;
    background: #fff; border: 1px solid var(--lp2-line); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    animation: sx-rise .4s cubic-bezier(.22, 1, .36, 1) both;
}
.lp2-hr .hr-role-head { display: flex; align-items: flex-start; gap: 10px; }
.lp2-hr .hr-role-ic {
    width: 36px; height: 36px; border-radius: 11px; flex: none;
    display: grid; place-items: center; color: #fff; background: var(--sx-c, #0891b2);
    box-shadow: 0 8px 16px -10px var(--sx-c, #0891b2);
}
.lp2-hr .hr-role-txt { flex: 1; min-width: 0; }
.lp2-hr .hr-role-txt b { display: block; font-size: .92rem; font-weight: 800; color: #000; line-height: 1.25; overflow-wrap: anywhere; }
.lp2-hr .hr-role-txt small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 650; color: #475569; }
.lp2-hr .hr-role-card .team-role-chips span {
    color: #1e293b;
    background: color-mix(in srgb, var(--sx-c, #0891b2) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--sx-c, #0891b2) 18%, #fff);
}
.lp2-hr .hr-role-card .team-role-chips i { color: color-mix(in srgb, var(--sx-c, #0891b2) 72%, #000); }
.lp2-hr .hr-role-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 10px; border-top: 1px dashed #e2e8f0;
}
body.lp2-app #page-content .lp2-hr .hr-btn-text-danger { background: transparent; border-color: transparent; color: #b91c1c; box-shadow: none; }
body.lp2-app #page-content .lp2-hr .hr-btn-text-danger:hover { background: #fef2f2; color: #991b1b; }

/* ---- Reports ----------------------------------------------------------------- */

.lp2-hr .hr-report-btn { margin-top: 12px; min-height: 46px; }
.lp2-hr .hr-report-date-row { margin: 0 0 4px; }
.lp2-hr .hr-inside {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--lp2-line); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lp2-hr .hr-inside-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-top: 1px solid #eef1f5; }
.lp2-hr .hr-inside-item:first-child { border-top: 0; }
.lp2-hr .hr-inside-ic {
    width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
    color: color-mix(in srgb, var(--sx-c) 80%, #000); background: color-mix(in srgb, var(--sx-c) 12%, #fff);
}
.lp2-hr .hr-inside-item b { display: block; font-size: .86rem; font-weight: 800; color: #000; }
.lp2-hr .hr-inside-item small { display: block; margin-top: 2px; font-size: .75rem; font-weight: 600; line-height: 1.45; color: #475569; }

/* ==========================================================================
   HR pop-ups (in <body>): pay rule, leave, staff card, pay run, payslip,
   payroll settings, role, invite, change role, confirmations.
   ========================================================================== */

body.lp2-app .modal .hr-form > .hr-span,
body.lp2-app .modal .hr-sheet > .hr-span { grid-column: 1 / -1; }
body.lp2-app .modal .hr-sheet .section-label { margin: 2px 0 -4px; }

/* notes and tags (the page kit's versions are scoped to the page) */
body.lp2-app .modal .hr-note {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px;
    border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0;
    font-size: .8rem; line-height: 1.45; color: #334155;
}
body.lp2-app .modal .hr-note > i { color: #475569; font-size: .95rem; line-height: 1.35; }
body.lp2-app .modal .hr-note b { color: #000; }
body.lp2-app .modal .hr-note.is-warn { background: #fffbeb; border-color: #fde68a; }
body.lp2-app .modal .hr-note.is-warn > i { color: #b45309; }
body.lp2-app .modal .hr-note.is-ok { background: #ecfdf5; border-color: #a7f3d0; }
body.lp2-app .modal .hr-note.is-ok > i { color: #047857; }
body.lp2-app .modal .hr-note.is-bad { background: #fef2f2; border-color: #fecaca; }
body.lp2-app .modal .hr-note.is-bad > i { color: #b91c1c; }
body.lp2-app .modal .hr-sheet .lp2-tag {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px;
    font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
    color: var(--t, #334155);
    background: color-mix(in srgb, var(--t, #334155) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--t, #334155) 22%, #fff);
}
body.lp2-app .modal .hr-hint { font-size: .76rem; font-weight: 650; color: #475569; }
body.lp2-app .modal .hr-hint i { margin-right: 4px; }

/* a person (or role) at the top of a pop-up */
body.lp2-app .modal .hr-person {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--sx-c, #059669) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--sx-c, #059669) 20%, #fff);
}
body.lp2-app .modal .hr-person-av {
    width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
    background: var(--sx-c, #059669); color: #fff; font-size: .9rem; font-weight: 800;
    box-shadow: 0 8px 16px -10px var(--sx-c, #059669);
}
body.lp2-app .modal .hr-person-txt { flex: 1; min-width: 0; }
body.lp2-app .modal .hr-person-txt b { display: block; font-size: .98rem; font-weight: 800; color: #000; overflow-wrap: anywhere; }
body.lp2-app .modal .hr-person-txt small { display: block; margin-top: 2px; font-size: .76rem; font-weight: 600; line-height: 1.4; color: #475569; }
body.lp2-app .modal .hr-person .badge { flex: none; }
body.lp2-app .modal .hr-person-amt { flex: none; text-align: right; }
body.lp2-app .modal .hr-person-amt small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
body.lp2-app .modal .hr-person-amt b { display: block; font-size: 1.12rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* label / value lines */
body.lp2-app .modal .hr-facts {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #e7ebf1; border-radius: 16px;
}
body.lp2-app .modal .hr-fact {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border-top: 1px solid #eef1f5; font-size: .84rem;
}
body.lp2-app .modal .hr-fact:first-child { border-top: 0; }
body.lp2-app .modal .hr-fact > span { color: #475569; font-weight: 650; }
body.lp2-app .modal .hr-fact > b { min-width: 0; text-align: right; overflow-wrap: anywhere; color: #000; font-weight: 750; }
body.lp2-app .modal .hr-fact a { color: #1d4ed8; text-decoration: none; }

/* recent leave inside the staff card */
body.lp2-app .modal .hr-mini-list { display: flex; flex-direction: column; gap: 6px; }
body.lp2-app .modal .hr-mini {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px;
    font: inherit; font-size: .8rem; color: #1e293b; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid #e7ebf1; border-radius: 12px;
}
body.lp2-app .modal .hr-mini:hover { background: #fafbfd; border-color: #cbd5e1; }
body.lp2-app .modal .hr-mini > span:not(.badge):not(.lp2-tag) { flex: 1; min-width: 0; font-weight: 650; }

/* a leave request: from → to, days */
body.lp2-app .modal .hr-when {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-radius: 16px; background: #f8fafc; border: 1px solid #e7ebf1;
}
body.lp2-app .modal .hr-when small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
body.lp2-app .modal .hr-when b { display: block; font-size: .92rem; font-weight: 800; color: #000; }
body.lp2-app .modal .hr-when > i { color: #94a3b8; }
body.lp2-app .modal .hr-when-days {
    margin-left: auto; padding: 6px 12px; text-align: center;
    background: #fff; border: 1px solid #e7ebf1; border-radius: 12px;
}
body.lp2-app .modal .hr-when-days b { font-size: 1.2rem; line-height: 1.1; }
body.lp2-app .modal .hr-quote {
    padding: 12px 14px; border-radius: 14px;
    background: #fff; border: 1px solid #e7ebf1; border-left: 3px solid #cbd5e1;
    font-size: .86rem; line-height: 1.55; color: #0f172a; white-space: pre-wrap; overflow-wrap: anywhere;
}
body.lp2-app .modal .hr-quote-note { background: #f0fdf4; border-left-color: #10b981; }
body.lp2-app .modal .hr-muted { color: #475569; font-weight: 600; }
body.lp2-app .modal #hr-leave-preview.is-danger { background: #fef2f2; border-color: #fecaca; }
body.lp2-app .modal #hr-leave-preview.is-danger > i { color: #b91c1c; }
body.lp2-app .modal .hr-btn-reject { color: #b91c1c; border-color: #fecaca; }
body.lp2-app .modal .hr-btn-reject:hover:not(:disabled) { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }

/* confirmations */
body.lp2-app .modal .hr-confirm { text-align: center; }
body.lp2-app .modal .hr-confirm-ic {
    width: 56px; height: 56px; margin: 2px auto 0; border-radius: 18px;
    display: grid; place-items: center; font-size: 1.5rem; color: #047857; background: #ecfdf5;
}
body.lp2-app .modal .hr-confirm-ic.is-danger { color: #b91c1c; background: #fef2f2; }
body.lp2-app .modal .hr-confirm-text { margin: 0; font-size: .9rem; line-height: 1.55; color: #1e293b; }
body.lp2-app .modal .hr-confirm-text b { color: #000; }

/* pay run: headline, timeline, payslips */
body.lp2-app .modal .hr-run-head {
    padding: 14px 16px; border-radius: 18px; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sx-c, #0d9488) 84%, #000), color-mix(in srgb, var(--sx-c, #0d9488) 60%, #000));
    box-shadow: 0 16px 30px -22px var(--sx-c, #0d9488);
}
body.lp2-app .modal .hr-run-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.lp2-app .modal .hr-run-lbl { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
body.lp2-app .modal .hr-run-head .badge { color: #fff; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3); }
body.lp2-app .modal .hr-run-total { margin-top: 6px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.lp2-app .modal .hr-run-total.hr-struck { text-decoration: line-through; text-decoration-thickness: 2px; color: rgba(255, 255, 255, .85); }
body.lp2-app .modal .hr-run-sub { margin-top: 3px; font-size: .76rem; font-weight: 650; color: rgba(255, 255, 255, .88); }

body.lp2-app .modal .hr-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.lp2-app .modal .hr-timeline.is-cancelled { grid-template-columns: minmax(0, 1fr); }
body.lp2-app .modal .hr-tl-step {
    padding: 10px 6px 8px; text-align: center; min-width: 0;
    border-radius: 14px; background: #f8fafc; border: 1px solid #e7ebf1;
}
body.lp2-app .modal .hr-tl-step i {
    display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 4px;
    border-radius: 50%; font-size: .85rem; color: #475569; background: #e2e8f0;
}
body.lp2-app .modal .hr-tl-step b { display: block; font-size: .76rem; font-weight: 800; color: #475569; }
body.lp2-app .modal .hr-tl-step small { display: block; font-size: .66rem; font-weight: 650; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lp2-app .modal .hr-tl-step.on { background: #ecfdf5; border-color: #a7f3d0; }
body.lp2-app .modal .hr-tl-step.on i { color: #fff; background: #059669; }
body.lp2-app .modal .hr-tl-step.on b { color: #000; }
body.lp2-app .modal .is-cancelled .hr-tl-step.on { background: #f1f5f9; border-color: #e2e8f0; }
body.lp2-app .modal .is-cancelled .hr-tl-step.on i { background: #64748b; }

body.lp2-app .modal .hr-slips-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
body.lp2-app .modal .hr-slips-head .section-label { margin: 0; }
body.lp2-app .modal .hr-slips-head em { font-style: normal; font-size: .72rem; font-weight: 650; color: #475569; }
body.lp2-app .modal .hr-slips {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #e7ebf1; border-radius: 16px;
}
body.lp2-app .modal .hr-slip {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    background: #fff; border: 0; border-top: 1px solid #eef1f5;
}
body.lp2-app .modal .hr-slip:first-child { border-top: 0; }
body.lp2-app .modal .hr-slip:hover { background: #fafbfd; }
body.lp2-app .modal .hr-slip:focus-visible { outline: 2px solid #0d9488; outline-offset: -2px; }
body.lp2-app .modal .hr-slip-av {
    width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
    background: var(--sx-c, #0d9488); color: #fff; font-size: .74rem; font-weight: 800;
}
body.lp2-app .modal .hr-slip-who { flex: 1; min-width: 0; }
body.lp2-app .modal .hr-slip-who b,
body.lp2-app .modal .hr-slip-who small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lp2-app .modal .hr-slip-who b { font-size: .86rem; font-weight: 800; color: #000; }
body.lp2-app .modal .hr-slip-who small { font-size: .72rem; font-weight: 600; color: #475569; }
body.lp2-app .modal .hr-slip-amt { flex: none; text-align: right; }
body.lp2-app .modal .hr-slip-amt b { display: block; font-size: .88rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
body.lp2-app .modal .hr-slip-amt small { display: block; font-size: .66rem; font-weight: 600; color: #475569; white-space: nowrap; }
body.lp2-app .modal .hr-slip-amt em { font-style: normal; color: #b91c1c; }
body.lp2-app .modal .hr-slip-go { flex: none; font-size: .8rem; color: #94a3b8; }
body.lp2-app .modal .hr-slips-empty { padding: 16px; text-align: center; font-size: .84rem; color: #475569; }
@media (max-width: 400px) {
    /* the gross/deducted line gives its width to the name on small phones */
    body.lp2-app .modal .hr-slip-amt small { display: none; }
}

body.lp2-app .modal .hr-tools { display: flex; flex-wrap: wrap; gap: 8px; }
body.lp2-app .modal .hr-tools .btn { flex: 1 1 auto; justify-content: center; }
body.lp2-app .modal .hr-tools-lbl { flex: 1 0 100%; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }

/* payroll settings: switches and tax bands */
body.lp2-app .modal .hr-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; border-radius: 14px; cursor: pointer;
    background: #f8fafc; border: 1px solid #e7ebf1;
}
body.lp2-app .modal .hr-toggle b { display: block; font-size: .86rem; font-weight: 800; color: #000; }
body.lp2-app .modal .hr-toggle small { display: block; margin-top: 1px; font-size: .74rem; font-weight: 600; line-height: 1.4; color: #475569; }
body.lp2-app .modal .hr-band { display: grid; grid-template-columns: minmax(0, 1fr) 84px 38px; gap: 6px; align-items: center; margin-bottom: 6px; }
body.lp2-app .modal .hr-band input { height: 40px; min-width: 0; padding: 0 10px; font-size: .86rem; }
body.lp2-app .modal .hr-band .qt-item-x { width: 38px; height: 40px; }
body.lp2-app .modal .hr-band-head { margin-bottom: 4px; }
body.lp2-app .modal .hr-band-head span { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #475569; }

/* role editor: a count per permission group */
body.lp2-app .modal .hr-role-form .role-permission-group { border-radius: 14px; border-color: #e7ebf1; }
body.lp2-app .modal .hr-role-form .role-permission-head { background: #f8fafc; }
body.lp2-app .modal .hr-role-form .role-permission-head input { width: 18px; height: 18px; }
body.lp2-app .modal .role-count {
    margin-left: 8px; padding: 1px 7px; border-radius: 999px;
    font-style: normal; font-size: .66rem; font-weight: 800; color: #475569; background: #eef2f7;
}
body.lp2-app .modal .role-count.on { color: #166534; background: #dcfce7; }

@media (prefers-reduced-motion: reduce) {
    .lp2-hr .hr-role-card { animation: none; }
}
body.lp2-app .modal .hr-run-ref { font-family: var(--font-mono); font-size: .92em; opacity: .9; }

/* larger screens: a pop-up's buttons sit in one row on the right, main action last */
@media (min-width: 768px) {
    body.lp2-app .modal .hr-sheet > .modal-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
    body.lp2-app .modal .hr-sheet > .modal-actions > .btn { flex: 0 0 auto; width: auto; min-width: 128px; }
}

/* ---- Staff profile: everything you can do, as one list --------------------------- */
body.lp2-app .modal .hr-dos { display: flex; flex-direction: column; border: 1px solid #e6eaf0; border-radius: 14px; overflow: hidden; background: #fff; }
body.lp2-app .modal .hr-do {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
    border: 0; border-top: 1px solid #eef1f5; background: #fff; text-align: left; cursor: pointer;
    font: inherit; color: #000; transition: background .15s ease;
}
body.lp2-app .modal .hr-do:first-child { border-top: 0; }
body.lp2-app .modal .hr-do:hover { background: #f8fafc; }
body.lp2-app .modal .hr-do:focus-visible { outline: 2px solid #10b981; outline-offset: -2px; }
body.lp2-app .modal .hr-do-ic {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    color: var(--sx-c, #475569); background: color-mix(in srgb, var(--sx-c, #475569) 12%, #fff); font-size: 1rem;
}
body.lp2-app .modal .hr-do-txt { flex: 1; min-width: 0; }
body.lp2-app .modal .hr-do-txt b { display: block; font-size: .88rem; font-weight: 750; color: #000; }
body.lp2-app .modal .hr-do-txt small { display: block; margin-top: 1px; font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.4; overflow-wrap: anywhere; }
body.lp2-app .modal .hr-do-go { flex: none; color: #94a3b8; font-size: .8rem; }
body.lp2-app .modal .hr-do.is-danger .hr-do-txt b { color: #b91c1c; }

/* ---- Add staff -------------------------------------------------------------------- */
body.lp2-app .modal .hr-add-staff .hr-opt { font-weight: 600; color: #64748b; }
body.lp2-app .modal .hr-add-staff .hr-app-row { align-items: flex-start; }
body.lp2-app .modal .hr-add-staff .hr-app-row > span { min-width: 0; }
body.lp2-app .modal .hr-add-staff .hr-app-row .lp2-field-note { margin-top: 2px; }
body.lp2-app .modal .hr-add-staff .hr-app-row .menu-toggle-control { flex: none; margin-top: 2px; }

/* ---- Payroll's two views (Pay runs / Salaries) ------------------------------------- */
.lp2-hr .hr-pay-tabs { margin-top: -4px; }