/* payroll screens: styles for this module only. Loaded after index.html and theme.css, so a plain selector here wins ties. */

/* avatar: a gradient disc in the person's tone */
#page .pr-av { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; box-shadow: 0 4px 10px -6px rgba(var(--cg), .8); }

/* card title with a small gradient icon tile */
#page .pr-ct { display: inline-flex; align-items: center; gap: 9px; }
#page .pr-ci { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 6px 12px -8px rgba(var(--cg), .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
#page .pr-ci svg { width: 14px; height: 14px; }

/* a meter: share of something, filled in its tone */
.pr-bar { display: block; height: 6px; border-radius: 6px; background: rgba(var(--cg), .13); overflow: hidden; min-width: 40px; }
.pr-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
/* a split bar: parts side by side, each in its own tone; the track shows what is left */
.pr-split { display: flex; gap: 2px; height: 8px; border-radius: 8px; background: #F1F0FB; overflow: hidden; min-width: 60px; }
.pr-split > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.pr-split.thin { height: 5px; }
.pr-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #64748B; white-space: nowrap; }
.pr-key::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
#page.page-in :is(.pr-bar > i, .pr-split > i) { animation: db-grow .9s var(--t-ease) .15s both; transform-origin: left; }

/* a small figure box inside a card: label, value, optional icon */
.pr-mini { border-radius: 14px; background: #FAFAFF; border: 1px solid rgba(111, 99, 240, .08); padding: 10px 12px; min-width: 0; }
.pr-mini .pr-ml { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748B; }
.pr-mini .pr-ml svg { width: 13px; height: 13px; color: rgb(var(--cg)); }
.pr-mini .pr-mv { margin-top: 3px; font-weight: 600; color: #1E1B4B; font-variant-numeric: tabular-nums; }

/* stepper: done in green, the current step in indigo, the rest grey, joined by a line */
.pr-steps { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.pr-steps > li { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #94A3B8; white-space: nowrap; }
.pr-steps > li:not(:last-child)::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: #E2E8F0; margin: 0 4px 0 2px; }
.pr-steps > li.done:not(:last-child)::after { background: linear-gradient(90deg, #059669, #34D399); }
.pr-steps .pr-dot { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; background: #F1F5F9; color: #94A3B8; }
.pr-steps .pr-dot svg { width: 11px; height: 11px; }
.pr-steps > li.done { color: #047857; }
.pr-steps > li.done .pr-dot { background: linear-gradient(135deg, #059669, #34D399); color: #fff; }
.pr-steps > li.now { color: #3730A3; font-weight: 600; }
.pr-steps > li.now .pr-dot { background: linear-gradient(135deg, #5B4CF0, #8F7DF6); color: #fff; box-shadow: 0 0 0 4px rgba(111, 99, 240, .16); }
.pr-steps > li.now.lock { color: #BE123C; }
.pr-steps > li.now.lock .pr-dot { background: linear-gradient(135deg, #E11D48, #FB7185); box-shadow: 0 0 0 4px rgba(244, 63, 94, .16); }
.pr-steps.off > li { color: #CBD5E1; }

/* the three big stages of a run */
.pr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 639px) { .pr-three { grid-template-columns: 1fr; } }
.pr-three > li { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #FAFAFF; border: 1px solid rgba(111, 99, 240, .08); }
.pr-three > li .pr-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #E2E8F0; color: #64748B; }
.pr-three > li .pr-dot svg { width: 13px; height: 13px; }
.pr-three > li.done { background: rgba(16, 185, 129, .06); border-color: rgba(16, 185, 129, .18); }
.pr-three > li.done .pr-dot { background: linear-gradient(135deg, #059669, #34D399); color: #fff; }
.pr-three > li.now { background: rgba(111, 99, 240, .07); border-color: rgba(111, 99, 240, .35); }
.pr-three > li.now .pr-dot { background: linear-gradient(135deg, #5B4CF0, #8F7DF6); color: #fff; box-shadow: 0 0 0 4px rgba(111, 99, 240, .15); }

/* net pay hero on a payslip and on a settlement */
.pr-hero { border-radius: 16px; color: #fff; background: linear-gradient(135deg, #312E81, #5B4CF0 60%, #8F7DF6); box-shadow: 0 18px 36px -22px rgba(76, 61, 220, .9); }
.pr-hero .pr-hl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pr-hero .pr-hv { font-size: 30px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pr-hero .pr-hw { font-size: 11px; color: rgba(255, 255, 255, .78); }
.pr-hero .pr-split { background: rgba(255, 255, 255, .18); }

/* tax regime tiles, side by side */
.pr-reg { position: relative; border-radius: 16px; padding: 14px; background: #FAFAFF; border: 1px solid rgba(111, 99, 240, .1); }
.pr-reg.best { background: rgba(16, 185, 129, .06); border-color: rgba(16, 185, 129, .35); }
.pr-reg .pr-rv { font-size: 24px; font-weight: 600; color: #1E1B4B; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 4px; }

/* a timeline list: a dot and a quiet line between rows */
.pr-tl > li { position: relative; padding-left: 18px; }
.pr-tl > li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #5B4CF0, #8F7DF6); box-shadow: 0 0 0 3px rgba(111, 99, 240, .12); }
.pr-tl > li:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 15px; bottom: -8px; width: 1px; background: rgba(111, 99, 240, .18); }

/* date tile in the statutory calendar */
.pr-date { width: 44px; flex: none; text-align: center; border-radius: 10px; padding: 3px 0; background: rgba(var(--cg), .1); color: var(--c1); font-size: 11px; font-weight: 600; line-height: 1.2; }

/* key-value rows: quieter dividers */
#page .pr-kvs > div { border-bottom-color: rgba(111, 99, 240, .07); }

@media (prefers-reduced-motion: reduce) { #page.page-in :is(.pr-bar > i, .pr-split > i) { animation: none; } }