/* ================= PAYROLL — shared look of the five pages ================= */
.pr-page { --pr-ink:#1f2a52; --pr-dim:#6b7a99; --pr-line:#e3e8f0; --pr-bg:#f6f8fb;
           --pr-brand:var(--theme-default, #00897B); --pr-ok:#0f9d58; --pr-warn:#e8a317; --pr-bad:#d93025; }
.pr-page .card { border-radius:14px; }
.pr-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.pr-toolbar .pr-field { display:flex; flex-direction:column; gap:5px; min-width:140px; }
.pr-toolbar .pr-field label { font-size:12px; font-weight:700; color:var(--pr-dim); margin:0; }
.pr-toolbar .pr-grow { flex:1 1 220px; }
.pr-toolbar .pr-push { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.pr-page .form-control, .pr-page .form-select { border-radius:9px; font-size:13.5px; }

/* summary chips */
.pr-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin:16px 0 4px; }
.pr-stat { background:#fff; border:1px solid var(--pr-line); border-radius:12px; padding:12px 14px; }
.pr-stat span { display:block; font-size:12px; font-weight:700; color:var(--pr-dim); text-transform:uppercase; letter-spacing:.3px; }
.pr-stat b { display:block; font-size:19px; color:var(--pr-ink); margin-top:2px; }
.pr-stat.pr-good b { color:var(--pr-ok); } .pr-stat.pr-due b { color:var(--pr-bad); }

/* tables */
.pr-table-wrap { overflow:auto; border:1px solid var(--pr-line); border-radius:12px; background:#fff; max-height:68vh; }
table.pr-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.pr-table thead th { position:sticky; top:0; z-index:2; background:linear-gradient(135deg,#00897B,#26A69A); color:#fff;
                     font-weight:700; font-size:12.5px; padding:11px 10px; white-space:nowrap; text-align:left; }
.pr-table thead th.num, .pr-table td.num { text-align:right; }
.pr-table thead th.pr-ded { background:linear-gradient(135deg,#c0392b,#e05a4b); }
.pr-table td { padding:8px 10px; border-bottom:1px solid #eef1f5; vertical-align:middle; white-space:nowrap; }
.pr-table tbody tr:hover td { background:#f7fbfa; }
.pr-table tfoot td { position:sticky; bottom:0; background:#eef7f5; font-weight:800; color:var(--pr-ink); border-top:2px solid #b2dfd7; }
.pr-table input.form-control, .pr-table select.form-select { padding:5px 8px; font-size:13px; min-width:92px; }
.pr-table input.pr-num { text-align:right; width:110px; }
.pr-table tr.pr-changed td { background:#fffbea; }
.pr-table tr.pr-off td { opacity:.55; }
.pr-name b { display:block; color:var(--pr-ink); }
.pr-name small { color:var(--pr-dim); font-size:11.5px; }
.pr-net { font-weight:800; color:var(--pr-ink); }

/* pills */
.pr-pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:800; }
.pr-pill.draft { background:#fff4d6; color:#9a6b00; }
.pr-pill.approved, .pr-pill.paid { background:#dff5ea; color:#0b7a43; }
.pr-pill.partial { background:#e3eefc; color:#1a5fb4; }
.pr-pill.unpaid { background:#fde7e5; color:#b3261e; }
.pr-pill.allowance { background:#dff5ea; color:#0b7a43; }
.pr-pill.deduction { background:#fde7e5; color:#b3261e; }

/* month strip */
.pr-months { display:grid; grid-template-columns:repeat(12, minmax(64px, 1fr)); gap:6px; margin-top:14px; }
.pr-month { border:1px solid var(--pr-line); background:#fff; border-radius:9px; padding:6px 4px; text-align:center;
            cursor:pointer; font-size:12px; font-weight:700; color:var(--pr-dim); transition:all .15s; }
.pr-month small { display:block; font-size:10.5px; font-weight:700; margin-top:1px; }
.pr-month:hover { border-color:var(--pr-brand); color:var(--pr-ink); }
.pr-month.on { outline:2px solid var(--pr-brand); color:var(--pr-ink); }
.pr-month.draft { background:#fffaf0; } .pr-month.draft small { color:#9a6b00; }
.pr-month.approved { background:#f2fbf7; } .pr-month.approved small { color:#0b7a43; }
@media (max-width:900px) { .pr-months { grid-template-columns:repeat(6, 1fr); } }

/* empty / notice */
.pr-empty { text-align:center; padding:40px 16px; border:2px dashed var(--pr-line); border-radius:14px; background:#fcfdfe; }
.pr-empty h5 { color:var(--pr-ink); font-weight:800; }
.pr-empty p { color:var(--pr-dim); max-width:520px; margin:6px auto 16px; }
.pr-note { background:#f2f8f7; border:1px solid #cfe7e2; border-left:4px solid var(--pr-brand); border-radius:10px;
           padding:10px 14px; font-size:13px; color:#285a54; }
.pr-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:14px; }
.pr-actions .btn { border-radius:9px; font-weight:700; }
.pr-btn-light { background:#fff; border:1px solid var(--pr-line); color:var(--pr-ink); }
.pr-btn-light:hover { border-color:var(--pr-brand); color:var(--pr-brand); }
.pr-btn-danger { background:#fff; border:1px solid #f1c4c0; color:var(--pr-bad); }
.pr-btn-danger:hover { background:var(--pr-bad); color:#fff; }
.pr-icon-btn { border:1px solid var(--pr-line); background:#fff; border-radius:8px; padding:3px 9px; font-size:12.5px; font-weight:700; color:var(--pr-ink); }
.pr-icon-btn:hover { border-color:var(--pr-brand); color:var(--pr-brand); }
.pr-icon-btn.del:hover { border-color:var(--pr-bad); color:var(--pr-bad); }

/* heads page */
.pr-heads-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:991px) { .pr-heads-grid { grid-template-columns:1fr; } }
.pr-seg { display:inline-flex; background:#eef2f8; border-radius:10px; padding:3px; gap:3px; }
.pr-seg label { margin:0; padding:7px 14px; border-radius:8px; font-size:13px; font-weight:700; color:#51607a; cursor:pointer; }
.pr-seg input { display:none; }
.pr-seg input:checked + span { color:var(--pr-brand); }
.pr-seg label:has(input:checked) { background:#fff; box-shadow:0 2px 6px rgba(31,42,82,.1); }

/* report tabs */
.pr-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; background:#eef2f8; border-radius:11px; padding:4px; }
.pr-tabs button { border:0; background:transparent; color:#51607a; border-radius:8px; padding:8px 16px; font-weight:700; font-size:13px; }
.pr-tabs button.on { background:#fff; color:var(--pr-brand); box-shadow:0 2px 8px rgba(31,42,82,.1); }
@media (max-width:575px) { .pr-toolbar .pr-field { min-width:calc(50% - 6px); flex:1 1 calc(50% - 6px); } .pr-toolbar .pr-push { margin-left:0; width:100%; } }