/* ==========================================================================
   Module 375 — Payroll Attendance (Admin → Team → Payroll Attendance).
   Brand tokens only (brand.css / system.css). No rates on this page.
   ========================================================================== */
body:not(.pa-allowed) .pa-nav { display: none !important; }
.team-subtabs { margin-top: 0; }

.pa { display: flex; flex-direction: column; gap: 14px; }
.pa-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pa-head h2 { margin: 0 0 4px; font-family: var(--font-display, 'Cormorant Garamond', Garamond, serif); font-weight: 600; font-size: 28px; color: var(--ac-ink); }
.pa-head .hint { margin: 0; max-width: 70ch; }
.pa-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pa-updated { font-size: 12px; color: var(--ac-ink-soft); }

.pa-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px 14px; background: #fff; border: 1px solid var(--ac-sand-light); border-radius: 6px; }
.pa-seg, .pa-showbar { display: inline-flex; flex-wrap: wrap; }
.pa-seg .seg-btn:first-child, .pa-showbar .seg-btn:first-child { border-radius: 4px 0 0 4px; }
.pa-seg .seg-btn:last-child, .pa-showbar .seg-btn:last-child { border-radius: 0 4px 4px 0; }
.pa-seg .seg-btn + .seg-btn, .pa-showbar .seg-btn + .seg-btn { border-left: 0; }
.pa-nav { display: flex; align-items: center; gap: 6px; }
.pa-navlabel { display: flex; flex-direction: column; min-width: 150px; text-align: center; line-height: 1.2; }
.pa-navlabel b { font-family: var(--font-display, 'Cormorant Garamond', Garamond, serif); font-size: 19px; font-weight: 600; color: var(--ac-ink); }
.pa-navlabel span { font-size: 12px; color: var(--ac-ink-soft); }
.pa-date, .pa-sel { display: flex; flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-ink-soft); margin: 0; }
.pa-sel select, .pa-date input { min-width: 180px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.pa-sel select { max-width: 320px; }

.pa-stats { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ac-sand-light); border-radius: 6px; background: #fff; }
.pa-stats > div { flex: 1 1 120px; padding: 10px 14px; display: flex; align-items: baseline; gap: 8px; border-right: 1px solid var(--ac-sand-light); }
.pa-stats > div:last-child { border-right: 0; }
.pa-stats b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ac-ink); }
.pa-stats span { font-size: 12.5px; color: var(--ac-ink-soft); }
.pa-stats .attn b { color: var(--ac-warning); }

.pa-tabs { margin: 4px 0 0; }
.pa-count, .pa-cnt { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; background: var(--ac-sand-pale); color: var(--ac-ink); font-weight: 600; }
.pa-count { background: var(--ac-warning); color: #fff; }
.seg-btn.active .pa-cnt { background: rgba(255,255,255,.2); color: inherit; }
.pa-showbar { margin-bottom: 10px; }

.pa-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--ac-sand-light); border-radius: 6px; }
.pa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pa-table th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-ink-soft); padding: 10px 12px; border-bottom: 1px solid var(--ac-sand); background: var(--ac-sand-pale); white-space: nowrap; }
.pa-table th.pa-src span { display: block; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ac-ink-soft); font-weight: 400; }
.pa-table td { padding: 9px 12px; border-bottom: 1px solid var(--ac-sand-light); vertical-align: top; }
.pa-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-table tfoot td { font-weight: 600; border-top: 1px solid var(--ac-sand); border-bottom: 0; }
.pa-table .nowrap { white-space: nowrap; }
.pa-click { cursor: pointer; }
.pa-click:hover td { background: var(--ac-green-tint); }
.pa-n.zero { color: #b7b0a0; }
.pa-n.ok { color: var(--ac-success); font-weight: 600; }
.pa-n.warn { color: var(--ac-warning); font-weight: 600; }
.pa-n.bad { color: var(--ac-error); font-weight: 600; }
.pa-n.info { color: var(--ac-info); font-weight: 600; }
.pa-grouphead td { background: var(--ac-ivory); border-bottom: 1px solid var(--ac-sand); }
.pa-group tr:not(.pa-grouphead) td:first-child { color: transparent; }
.pa-notes { color: var(--ac-ink-soft); max-width: 46ch; white-space: pre-wrap; }

.pa-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.pa-chip.ok { background: #E3ECE5; color: var(--ac-success); }
.pa-chip.warn { background: #F3EAD3; color: #7A5E1F; }
.pa-chip.bad { background: #F2E1DC; color: var(--ac-error); }
.pa-chip.info { background: #E2E8EC; color: var(--ac-info); }
.pa-chip.muted { background: var(--ac-sand-pale); color: var(--ac-ink-soft); }
.pa-tag { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 3px; font-size: 11px; background: var(--ac-sand-pale); color: #7A5E1F; border: 1px solid var(--ac-sand); }
.pa-was { font-size: 12px; color: var(--ac-ink-soft); margin-top: 3px; }
.pa-r-different td:first-child, .pa-r-missing td:first-child, .pa-r-extra td:first-child { box-shadow: inset 3px 0 0 var(--ac-warning); }
.pa-r-missing td:first-child { box-shadow: inset 3px 0 0 var(--ac-error); }
.pa-r-extra td:first-child { box-shadow: inset 3px 0 0 var(--ac-info); }

.pa-revcell { min-width: 220px; }
.pa-revform { display: flex; gap: 6px; }
.pa-revform input { flex: 1; min-width: 110px; font-size: 13px; padding: 4px 8px; }
.pa-reviewed { color: var(--ac-success); font-size: 13px; }
.pa-link { background: none; border: 0; padding: 0; margin: 2px 0 0; color: var(--ac-green); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }
.pa-histrow td { background: var(--ac-ivory); }
.pa-hist { margin: 0; padding-left: 18px; font-size: 13px; }
.pa-hist li { margin: 3px 0; }
.pa-off { color: var(--ac-error); }

.pa-empty { padding: 28px 16px; text-align: center; color: var(--ac-ink-soft); background: #fff; border: 1px dashed var(--ac-sand); border-radius: 6px; }
.pa-error { padding: 14px; color: var(--ac-error); background: #F2E1DC; border-radius: 6px; }
.pa-foot { margin: 0; font-size: 12px; }
.pa .muted { color: var(--ac-ink-soft); }
.pa .small { font-size: 12px; }

/* Module 380 — the payroll list */
.pa-offlist { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 14px; font-size: 13px; background: var(--ac-ivory); border: 1px dashed var(--ac-sand); border-radius: 6px; color: var(--ac-ink-soft); }
.pa-offp { white-space: nowrap; color: var(--ac-ink); }
.pa-modal { position: fixed; inset: 0; background: rgba(31, 36, 30, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 4000; overflow-y: auto; }
.pa-card { background: #fff; border-radius: 8px; padding: 18px 20px; width: min(520px, 100%); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.pa-card h3 { margin: 0; font-family: var(--font-display, 'Cormorant Garamond', Garamond, serif); font-weight: 600; font-size: 24px; }
.pa-card .hint { margin: 0; }
.pa-lists { display: flex; flex-direction: column; gap: 12px; max-height: 56vh; overflow-y: auto; }
.pa-lhead { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-ink-soft); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.pa-lrow { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--ac-sand-light); cursor: pointer; margin: 0; }
.pa-lrow input { width: 18px; height: 18px; flex: none; }
.pa-lname { display: flex; flex-direction: column; line-height: 1.25; }
.pa-lfoot { display: flex; justify-content: flex-end; }
.pa-modal .muted { color: var(--ac-ink-soft); }
.pa-modal .small { font-size: 12px; }

@media (max-width: 720px) {
  .pa-filters { flex-direction: column; align-items: stretch; }
  .pa-sel select, .pa-date input { min-width: 0; width: 100%; max-width: none; }
  .pa-nav { justify-content: space-between; }
  .pa-stats > div { flex-basis: 45%; border-right: 0; border-bottom: 1px solid var(--ac-sand-light); }
}