/* Payroll: months list, month page, drawers and the compare dialog. */

.pay-page .ui-dt { margin-bottom: var(--s-4); }
.pay-zero { color: var(--text-faint); }
.pay-mname { font-weight: var(--fw-medium); }
.pay-emp { display: block; font-weight: var(--fw-medium); color: var(--text); }
.pay-code, .pay-sub { display: block; color: var(--text-muted); font-size: var(--fs-xs); line-height: 16px; }
span.pay-sub { display: inline; }
.pay-page .ui-table td { white-space: nowrap; }
.pay-page .ui-table td:has(.pay-sub) { white-space: normal; }
.pay-page .ui-table td.pay-net { font-weight: var(--fw-semibold); }
.pay-capped { border-bottom: 1px dotted var(--warning); }

/* header actions */
.pay-step { display: inline-flex; gap: 4px; margin-right: 4px; }
.pay-block { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.pay-block .btn.link { height: auto; padding: 0 2px; font-size: var(--fs-sm); }

/* one warning-soft line */
.pay-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: var(--s-4); border-radius: var(--r-md); background: var(--warning-soft); color: #5C3A00; font-size: var(--fs-md); border: 1px solid #F2DFB0; }
.pay-banner .btn.link { height: auto; padding: 0 2px; font-weight: var(--fw-medium); }

/* pre-lock checks */
.pay-body > .card { margin-bottom: var(--s-4); }
.pay-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pay-issue { display: block; font-weight: var(--fw-medium); }
.pay-acts { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.pay-page tr.pay-held { display: none; }
.pay-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pay-info li { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-md); color: var(--text-2); }
.pay-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); transform: translateY(-1px); }
.pay-dot.t-warning { background: var(--warning); }
.pay-dot.t-neutral { background: var(--text-faint); }

/* travel claims */
.pay-page .ui-fbar-r { flex: 0 1 auto; min-width: 0; }
.pay-cright { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }

/* calculation drawer */
.pay-calc { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-4); }
.pay-cl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.pay-cl:last-child { border-bottom: 0; }
.pay-cl .l { display: flex; flex-direction: column; min-width: 0; }
.pay-cl .l small { color: var(--text-muted); font-size: var(--fs-xs); line-height: 16px; }
.pay-cl .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-cl.tot { background: var(--surface-2); font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.pay-kv { padding: 4px 2px; }
.pay-capnote { margin-top: calc(-1 * var(--s-2)); }
.pay-chips { margin-bottom: var(--s-3); }
.drawer .ui-dt { box-shadow: none; }

/* resolve drawer */
.pay-rsum { padding-bottom: var(--s-4); margin-bottom: var(--s-2); border-bottom: 1px solid var(--border); }
.pay-rbody .ui-tabs { margin-bottom: var(--s-4); }
.pay-h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--s-4) 0 var(--s-3); }
.pay-resolve { display: grid; gap: var(--s-3); max-width: 440px; }
.pay-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pay-fact { display: flex; gap: 8px; }

/* claim drawer */
.pay-doc { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.pay-doc img { display: block; width: 100%; max-height: 420px; object-fit: contain; cursor: zoom-in; }
.pay-doc iframe { display: block; width: 100%; height: 420px; border: 0; }
.pay-dfoot { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }

/* compare with a spreadsheet */
.pay-cmp { display: grid; gap: var(--s-3); min-height: 80px; }
.pay-cmp.is-loading { opacity: .55; pointer-events: none; }
.pay-cmp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-file { cursor: pointer; }
.pay-fname { color: var(--text-2); font-size: var(--fs-sm); }
.pay-last { margin: 0; }
.pay-cmp-sum { font-size: var(--fs-md); color: var(--text-2); }
.pay-cmp-tbl { border: 1px solid var(--border); border-radius: var(--r-md); overflow: auto; max-height: 360px; }
.pay-cmp-tbl td .input { height: 32px; min-width: 150px; }
.pay-ok { color: var(--success); font-weight: var(--fw-medium); }

@media (max-width: 720px) {
  .pay-2 { grid-template-columns: 1fr; }
  .pay-acts { flex-wrap: wrap; }
}
.pay-page .ui-ph-act { align-items: flex-start; }
.pay-lockgrp { position: relative; display: inline-flex; }
.pay-lockgrp:has(.pay-block) { margin-bottom: 24px; }
.pay-lockgrp .pay-block { position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap; }