/* Payroll (Figma 22316:135746 / 135798 / 135970) and Pay Slip (22316:135897). */
.pr { background: var(--goku); padding-top: var(--sb-dash); padding-bottom: 24px; }

.pr-head { display: flex; align-items: center; gap: 16px; height: 58px; padding: 8px 20px; }
.pr-head h1 { flex: 1; min-width: 0; color: var(--bulma); }
.pr-back, .pr-dl { flex: none; display: grid; place-items: center; border-radius: 6px; }
.pr-back { width: 31.69px; height: 31.69px; }
.pr-back img { transform: rotate(180deg); }
.pr-dl { width: 32px; height: 32px; }
.pr-back:hover, .pr-dl:hover, .pr-ico:hover { background: var(--heles); }

/* Pill switcher */
.pr-tabs { display: flex; gap: 8px; padding: 12px 20px; }
.pr-tab { height: 40px; padding: 0 12px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--trunks); white-space: nowrap; }
.pr-tab.is-on { background: var(--gohan); color: var(--bulma); }
.pr-tab:not(.is-on):hover { background: var(--heles); }

.pr-body { padding: 12px 20px 24px; }

/* Rows */
.pr-list { display: flex; flex-direction: column; gap: 8px; }
.pr-row { display: flex; align-items: center; gap: 24px; padding: 12px 16px; background: var(--gohan); border-radius: 8px;
  font: 400 16px/24px var(--font); color: var(--bulma); }
.pr-c1 { flex: none; width: 100px; }
.pr-cn { flex: 1 0 0; min-width: 0; text-align: right; }
.pr-cn b { font-weight: 700; }

/* CTC */
.pr-ctc { display: flex; flex-direction: column; gap: 12px; }
.pr-cols { display: flex; align-items: center; gap: 24px; padding: 0 16px; font: 400 14px/24px var(--font); color: var(--piccolo); }
.pr-ctc-body { display: flex; flex-direction: column; gap: 16px; }
.pr-total { background: var(--jiren); }

/* Pay slip / Form 16 lists */
.pr-item { cursor: pointer; }
.pr-item:hover { box-shadow: inset 0 0 0 1px var(--beerus); }
.pr-name { flex: 1 0 0; min-width: 0; }
.pr-icons { display: flex; align-items: center; gap: 12px; flex: none; }
.pr-ico { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; }

/* Pay Slip detail */
.ps-switch-wrap { padding: 12px 20px; }
.ps-switch { display: flex; align-items: center; padding: 12px 8px; border-radius: 8px; background: var(--jiren); }
.ps-arrow { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.ps-arrow:hover:not(:disabled) { background: var(--jiren); }
.ps-arrow:disabled { opacity: 0.32; cursor: default; }
.ps-month { flex: 1 0 0; text-align: center; font: 400 16px/24px var(--font); color: var(--piccolo); }

.ps-cap { padding: 0 16px; font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--zeno); }
.ps-section { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; }
.ps-card { background: var(--gohan); border-radius: 16px; padding: 16px; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-stat { display: flex; flex-direction: column; min-width: 0; }
.ps-stat .t-xs { color: var(--trunks); font: 400 12px/16px var(--font); }
.ps-stat b { font: 700 18px/28px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ps-earn { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; }
.ps-cols { display: flex; gap: 10px; }
.ps-cols span { flex: 1 0 0; }
.ps-cols span + span { text-align: right; }
.ps-rows { display: flex; flex-direction: column; gap: 8px; }
.ps-list { display: flex; flex-direction: column; gap: 2px; }
.ps-list .pr-row > span:first-child, .ps-total > span:first-child { flex: none; white-space: nowrap; }
.ps-total { font-weight: 700; }
.ps-net { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; font: 700 16px/24px var(--font); color: var(--bulma); }
.ps-net p:first-child { display: flex; justify-content: space-between; gap: 16px; }