/* ════════════════════════════════════════════════════════════════════
 * CampusTrack Payroll Redesign — design tokens + primitives
 * Source of truth: docs/design/design_handoff_payroll_redesign/README.md
 * Scoped under .pyrl-rd so nothing leaks into the rest of the app.
 * Fonts: Public Sans (UI) / IBM Plex Mono (codes, money contexts) via
 * Google Fonts (per handoff README §Assets); full fallback stacks so the
 * module renders correctly if the font host is unreachable.
 * ════════════════════════════════════════════════════════════════════ */

.pyrl-rd {
  --prd-page: #eef2f8;
  --prd-card: #fff;
  --prd-border: #e3e9f2;
  --prd-divider: #eef2f8;
  --prd-text: #16233b;
  --prd-text-2: #5b6b85;
  --prd-muted: #8294ad;
  --prd-faint: #a6b3c8;
  --prd-navy: #0f2a5c;
  --prd-blue: #2456d6;
  --prd-sel: #e8f0fe;
  --prd-sel-2: #eef4ff;
  --prd-row: #f7f9fd;
  --prd-ok: #0e7a4f;
  --prd-ok-bg: #e7f6ee;
  --prd-ok-bg2: #f4faf5;
  --prd-ok-bd: #d8ead9;
  --prd-warn: #d97706;
  --prd-warn-2: #b45309;
  --prd-warn-bg: #fef6e7;
  --prd-warn-bg2: #fefaf1;
  --prd-warn-bd: #f0d9a8;
  --prd-danger: #dc2626;
  --prd-danger-2: #b3423a;
  --prd-danger-bg: #fdf1f1;
  --prd-danger-bg2: #fdf6f6;
  --prd-danger-bd: #f2c9c9;
  --prd-er: #6d3fc0;
  --prd-er-bg: #f3eefe;

  font-family: "Public Sans", Helvetica, Arial, sans-serif;
  color: var(--prd-text);
  font-size: 13px;
  line-height: 1.45;
}
.pyrl-rd * { box-sizing: border-box; }
.pyrl-rd a { color: var(--prd-blue); text-decoration: none; }
.pyrl-rd a:hover { color: var(--prd-navy); text-decoration: underline; }

.prd-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.prd-num  { font-variant-numeric: tabular-nums; }

/* ── App shell (secondary panel + main) ────────────────────────────── */
.prd-shell { display: flex; align-items: stretch; min-height: calc(100vh - 120px); background: var(--prd-page); border-radius: 14px; overflow: hidden; border: 1px solid var(--prd-border); }
.prd-nav { width: 212px; flex: 0 0 212px; background: #fff; border-right: 1px solid var(--prd-border); display: flex; flex-direction: column; }
.prd-nav-head { padding: 16px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
.prd-nav-title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--prd-muted); font-weight: 800; }
.prd-scope { display: inline-block; padding: 4px 11px; border-radius: 14px; font-size: 10.5px; font-weight: 700; }
.prd-nav-groups { flex: 1; overflow-y: auto; padding: 2px 10px 16px; }
.prd-nav-grp { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--prd-faint); font-weight: 700; padding: 12px 8px 5px; }
.prd-nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #33456b; margin-bottom: 1px; }
.prd-nav-item:hover { background: #f2f6fd; color: var(--prd-blue); }
.prd-nav-item.active { background: var(--prd-sel); color: var(--prd-blue); }
.prd-nav-foot { padding: 12px 16px; border-top: 1px solid var(--prd-divider); text-align: center; }
.prd-main { flex: 1; min-width: 0; overflow-y: auto; padding: 26px 30px 60px; background: var(--prd-page); }
.prd-page { max-width: 1180px; margin: 0 auto; }

/* ── Headers ───────────────────────────────────────────────────────── */
.prd-h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--prd-text); }
.prd-h1-sub { color: var(--prd-text-2); font-size: 13px; margin-top: 3px; }
.prd-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

/* ── Buttons — disabled ALWAYS carries a title (no dead clicks) ────── */
.prd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid transparent; user-select: none; font-family: inherit; }
.prd-btn-primary { background: var(--prd-navy); color: #fff; font-weight: 700; }
.prd-btn-primary:hover { background: #16376f; }
.prd-btn-primary.prd-disabled { background: #9aa9c4; cursor: not-allowed; }
.prd-btn-secondary { background: #fff; border-color: #c9d6ee; color: var(--prd-blue); }
.prd-btn-secondary:hover { border-color: var(--prd-blue); }
.prd-btn-danger { background: #fff; border-color: var(--prd-danger-bd); color: var(--prd-danger-2); }
.prd-btn-ghost { background: transparent; border-color: var(--prd-border); color: var(--prd-text-2); }
.prd-btn.prd-disabled { cursor: not-allowed; }
.prd-btn-secondary.prd-disabled, .prd-btn-ghost.prd-disabled, .prd-btn-danger.prd-disabled { color: var(--prd-faint); border-color: var(--prd-border); background: #fff; }

/* ── Cards / KPIs ──────────────────────────────────────────────────── */
/* Cards carry the design's own padding (16px 18px). Without it every card
   that relies on the class alone rendered its content flush against the
   border — numbers and chart bars visibly touching/clipping at the edge.
   Cards that manage their own spacing (table cards using `padding:0` so
   their rows own it) set it inline, which still wins over this rule. */
.prd-card { background: var(--prd-card); border: 1px solid var(--prd-border); border-radius: 12px; padding: 16px 18px; }
.prd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.prd-kpi { background: #fff; border: 1px solid var(--prd-border); border-radius: 10px; padding: 13px 16px; }
.prd-kpi-label { font-size: 11px; color: var(--prd-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.prd-kpi-value { font-size: 19px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.prd-kpi-sub { font-size: 11.5px; color: var(--prd-text-2); }

/* ── Toolbar / inputs ──────────────────────────────────────────────── */
.prd-select, .prd-input { padding: 9px 12px; border: 1px solid var(--prd-border); border-radius: 8px; background: #fff; font-size: 12.5px; font-family: inherit; color: var(--prd-text); font-weight: 600; }
.prd-select:focus, .prd-input:focus { outline: 2px solid var(--prd-sel); border-color: var(--prd-blue); }
.prd-field-select, .prd-field-input { width: 100%; padding: 10px 12px; border: 1px solid var(--prd-border); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--prd-text); background: #fff; font-weight: 400; }
.prd-field-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--prd-text-2); margin-bottom: 5px; text-transform: uppercase; }
.prd-field-help { font-size: 11.5px; color: var(--prd-muted); }

/* ── View toggle (grid/table SVG) ──────────────────────────────────── */
.prd-vt { width: 32px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--prd-text-2); border: 1px solid var(--prd-border); }
.prd-vt.active { background: var(--prd-navy); color: #fff; border-color: var(--prd-navy); }

/* ── Chips ─────────────────────────────────────────────────────────── */
.prd-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }

/* ── Table / rows ──────────────────────────────────────────────────── */
.prd-month-head { padding: 11px 18px; border-bottom: 1px solid var(--prd-border); font-size: 12px; font-weight: 700; color: var(--prd-muted); text-transform: uppercase; letter-spacing: .08em; }
.prd-month-label { font-size: 12px; font-weight: 700; color: var(--prd-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.prd-run-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr .8fr; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--prd-divider); cursor: pointer; }
.prd-run-row:hover { background: var(--prd-row); }
.prd-grid-card { background: #fff; border: 1px solid var(--prd-border); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.prd-grid-card:hover { border-color: var(--prd-blue); box-shadow: 0 4px 14px rgba(15,42,92,.07); }

/* ── Notes (info / warn / danger tinted cards) ─────────────────────── */
.prd-note { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 13px 16px; font-size: 13px; line-height: 1.5; }
.prd-note-danger { background: var(--prd-danger-bg); border: 1px solid var(--prd-danger-bd); }
.prd-note-warn { background: var(--prd-warn-bg2); border: 1px solid var(--prd-warn-bd); }
.prd-note-info { background: var(--prd-sel-2); border: 1px solid #c9d6ee; }
.prd-note-dot { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }

/* ── Modal ─────────────────────────────────────────────────────────── */
.prd-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(11,26,54,.45); display: flex; align-items: center; justify-content: center; }
.prd-modal { width: 540px; max-width: calc(100vw - 40px); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 14px; padding: 22px 26px; box-shadow: 0 24px 60px rgba(15,42,92,.3); font-family: "Public Sans", Helvetica, Arial, sans-serif; color: var(--prd-text); font-size: 13px; }
.prd-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.prd-modal-title { font-size: 18px; font-weight: 800; }
.prd-modal-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--prd-border); display: flex; align-items: center; justify-content: center; color: var(--prd-muted); cursor: pointer; background: #fff; font-size: 13px; }
.prd-modal-x:hover { color: var(--prd-blue); border-color: #c9d6ee; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.prd-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 220; background: var(--prd-navy); color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 14px 36px rgba(15,42,92,.4); max-width: 640px; font-family: "Public Sans", Helvetica, Arial, sans-serif; }

/* ── Pagination bar ────────────────────────────────────────────────── */
.prd-pagebar { display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 12px; color: var(--prd-text-2); }
.prd-pagebtn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--prd-border); background: #fff; color: var(--prd-text-2); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.prd-pagebtn.active { background: var(--prd-navy); color: #fff; border-color: var(--prd-navy); }

/* ── Empty state ───────────────────────────────────────────────────── */
.prd-empty { padding: 34px 20px; text-align: center; font-size: 12.5px; color: var(--prd-muted); }

/* ── Screen 23 interactive dashboard (25 Aug 2026) ─────────────────── */
.pyrl-rd .prd-barwrap { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; cursor: pointer; }
.pyrl-rd .prd-bar { border-radius: 4px 4px 0 0; background: #9db9ee; min-height: 3px; transition: background .15s ease; }
.pyrl-rd .prd-barwrap:hover .prd-bar { background: #2456d6; }
.pyrl-rd .prd-barwrap.sel .prd-bar { background: #0f2a5c; }
.pyrl-rd .prd-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0f2a5c; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 7px; white-space: nowrap; z-index: 6; box-shadow: 0 8px 22px rgba(15, 42, 92, .28); pointer-events: none; }
.pyrl-rd .prd-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f2a5c; }
.pyrl-rd .prd-barwrap:hover .prd-tip { display: block; }
.pyrl-rd .prd-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 11px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Empty months in the 12-slot trend: a faint stub keeps the axis honest
   (a real 12-month timeline) without pretending there was a paid run. */
.pyrl-rd .prd-barwrap.empty { cursor: default; }
.pyrl-rd .prd-bar-empty { height: 6px; border-radius: 3px 3px 0 0; background: #eef2f8; }
.pyrl-rd .prd-barwrap.empty:hover .prd-bar-empty { background: #e3e9f2; }
/* Clear the app's floating action cluster (AI / Support / Feedback, bottom-right)
   so the last card in a screen is never hidden under it. */
.pyrl-rd .prd-main { padding-bottom: 84px; }