/* CheckinQR — components.css: btn, tile, chip, toast, dialog (A30: mọi lỗi là popup), field/form, card/row/banner,
   badge, breakdown, trace, kv. Class mới chỉ khi được duyệt, đặt tên theo chức năng. */

/* ---------- button / tile / chip ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-weight: var(--fw-bold); cursor: pointer; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-primary-d); }
.btn--icon .icon { color: inherit; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.tile {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  min-width: var(--tile); min-height: var(--tile); padding: var(--s-3);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow);
  text-decoration: none; font-weight: var(--fw-bold);
  width: 100%; font: inherit; cursor: pointer;   /* font: inherit (nút) đè font-weight ở trên — giữ hành vi cũ, dọn ở N2.3b */
  position: relative;
}
.tile .icon { color: var(--c-accent); }
.tile__label { font-size: var(--fs-base); color: var(--c-text-mut); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: var(--s-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-base);
}
.chip--money { background: var(--c-money-bg); color: var(--c-money); border-color: transparent; }
.chip--paid { background: var(--c-surface); color: var(--c-paid); border-color: var(--c-border); font-size: var(--fs-xs); }

/* ---------- toast (thành công: chip ngắn có icon, không popup) ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--c-text); color: var(--c-bg); box-shadow: var(--shadow);
  font-size: var(--fs-base); z-index: 50; max-width: calc(100vw - 2 * var(--s-4));
}
.toast .icon { color: var(--c-toast-icon); }

/* ---------- error dialog (A30: mọi lỗi là popup) ---------- */
.error-dialog {
  width: min(92vw, 25rem);
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow);
}
.error-dialog::backdrop { background: var(--c-backdrop); }
.error-dialog__body { padding: var(--s-5) var(--s-5) var(--s-4); text-align: center; }
.error-dialog__icon { margin-bottom: var(--s-2); }
.error-dialog__title { margin: 0 0 var(--s-2); font-size: var(--fs-lg); }
.error-dialog__msg { margin: 0 0 var(--s-3); font-size: var(--fs-md); }
.error-dialog__code { margin: 0; font-size: var(--fs-sm); color: var(--c-text-mut); user-select: all; }
.error-dialog__details { margin: var(--s-3) 0 0; padding: 0; list-style: none; text-align: left; font-size: var(--fs-base); }
.error-dialog__details li { padding: var(--s-1) 0; border-top: 1px solid var(--c-border); }
.error-dialog__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--c-border);
}

/* ---------- error page (nội dung dưới dialog) ---------- */
.error-page { text-align: center; padding: var(--s-6) 0; }
.error-page .icon-lg { margin-bottom: var(--s-3); }
.error-page__title { margin: 0 0 var(--s-2); font-size: var(--fs-2xl); }
.error-page__hint { margin: 0 0 var(--s-2); color: var(--c-text-mut); }
.error-page__code { margin: 0 0 var(--s-5); font-size: var(--fs-sm); color: var(--c-text-mut); }

/* ---------- field / form ---------- */
.field-help { display: flex; gap: var(--s-1); margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-mut); }
.field-error { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-penalty); display: flex; align-items: center; gap: var(--s-1); margin: calc(-1 * var(--s-2)) 0 0; }

/* ---------- warning badge ---------- */
.warning-badge {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3); border-left: 3px solid var(--c-warn); border-radius: var(--r-sm);
  background: var(--c-warn-bg); color: var(--c-warn);
  margin-bottom: var(--s-4);
}

/* ---------- card / row / banner ---------- */
/* N2.8h — card thống nhất: Head (nền primary-soft, bấm được khi là <details>/<summary>) · Body · Foot (nút). Khung = overflow hidden, không padding;
   màu chỉnh tay theo khoá data-card trong card-colors.css qua 4 biến --card-head-bg / --card-head-fg / --card-head-icon / --card-bg. */
.card {
  background: var(--card-bg, var(--c-surface)); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 0; margin-bottom: var(--s-4); overflow: hidden;
}
.card__head {
  display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  background: var(--card-head-bg, var(--c-primary-soft)); color: var(--card-head-fg, var(--c-text)); list-style: none; user-select: none;
}
summary.card__head { cursor: pointer; }
.card__head::-webkit-details-marker { display: none; }
.card__head:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.card__head > .icon { color: var(--card-head-icon, var(--c-accent)); }
.card__title { flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.card__title a { color: inherit; }
.emp-name__code { font-weight: var(--fw-normal); color: var(--c-text-mut); font-size: var(--fs-sm); }
.card__head .emp-name__code { color: var(--card-head-fg, var(--c-text-mut)); opacity: .85; }
.card__meta { color: var(--card-head-fg, var(--c-text-mut)); opacity: .85; font-size: var(--fs-sm); white-space: nowrap; }
.card__meta--strong { font-size: var(--fs-md); font-weight: var(--fw-bold); opacity: 1; }
.card__meta--penalty { color: var(--c-penalty); }
.card__meta--bonus { color: var(--c-money); }
.card__chev { color: var(--card-head-fg, var(--c-text-mut)); opacity: .85; transition: transform .15s; }
.card[open] > .card__head .card__chev { transform: rotate(180deg); }
.card[open] > .card__head, .card--fixed > .card__head { border-bottom: 1px solid var(--c-line-soft); }
.card__body { padding: var(--s-4); background: var(--card-bg, var(--c-surface)); }
.card__body .row:has(> .row__actions) { flex-wrap: wrap; }
.card__foot { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); background: var(--card-bg, var(--c-surface)); }
.card__foot > .btn:only-child, .card__foot > form:only-child > .btn:only-child { flex: 1; width: 100%; }
.card__foot > form { display: contents; }
@media print {
  details.card::details-content { content-visibility: visible; display: block; }
  .card__head { background: var(--c-print-bg); color: var(--c-print-fg); }
  .card__head > .icon { color: var(--c-print-fg); }
  .card__chev { display: none; }
}
.row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--c-border); }
.row:first-child { border-top: 0; }
.row .icon { color: var(--c-text-mut); }
.row__label { color: var(--c-text-mut); flex: 1; }
.row__value { text-align: right; font-weight: var(--fw-bold); display: flex; flex-direction: column; align-items: flex-end; }
.row__value small { font-weight: var(--fw-normal); color: var(--c-text-mut); font-size: var(--fs-sm); }
.row__value--muted { color: var(--c-text-mut); font-weight: var(--fw-normal); }
.banner {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); font-weight: var(--fw-bold);
  flex-wrap: wrap;
}
.banner--danger { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid var(--c-danger); }
.banner .icon { flex: none; }

/* ---------- form ---------- */
.form { display: flex; flex-direction: column; gap: var(--s-3); }
.field { display: block; }
.field__label { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-1); font-size: var(--fs-base); color: var(--c-text-mut); }
.field__input {
  width: 100%; min-height: var(--h-input); padding: 0 var(--s-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-lg);
}
.field__input:focus { outline: 3px solid var(--c-accent); outline-offset: 0; border-color: var(--c-accent); }
.field__input[aria-invalid="true"] { border-color: var(--c-penalty); }
.field-error code { font-size: var(--fs-xs); opacity: .8; }
.btn--big { min-height: var(--h-btn-lg); font-size: var(--fs-lg); }
.chip--toggle { cursor: pointer; min-height: var(--tap); padding: var(--s-2) var(--s-3); gap: var(--s-2); align-self: flex-start; }
.chip--toggle input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-accent); }
.chip--toggle:has(input:checked) { border-color: var(--c-accent); background: var(--c-primary-soft); }

/* ---------- flash chip (thành công) ---------- */
.flash-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); margin-bottom: var(--s-4);
  background: var(--c-money-bg); color: var(--c-money); font-weight: var(--fw-bold);
}
.chip--provisional { background: var(--c-surface); color: var(--c-warn); border-color: transparent; font-size: var(--fs-xs); text-transform: none; }
.chip--penalty { background: var(--c-danger-bg); color: var(--c-penalty); border-color: transparent; font-weight: var(--fw-bold); }
.chip--voided { background: var(--c-surface); color: var(--c-text-mut); border-color: var(--c-border); font-weight: var(--fw-bold); text-decoration: line-through; }
.chip--ot-pending { background: var(--c-surface); color: var(--c-warn); border-color: var(--c-warn); font-weight: var(--fw-bold); }
.chip--ot-applied { background: var(--c-money-bg); color: var(--c-money); border-color: transparent; font-weight: var(--fw-bold); }
.breakdown__row--bonus .breakdown__value { color: var(--c-money); }
.breakdown__row--pending .breakdown__value { color: var(--c-warn); }
.breakdown__muted { color: var(--c-text-mut); font-weight: var(--fw-normal); font-size: var(--fs-xs); }
.chip--onsite { background: var(--c-money-bg); color: var(--c-money); border-color: transparent; font-weight: var(--fw-bold); }
.chip--band { background: var(--band-120); color: var(--c-text); border-color: transparent; font-size: var(--fs-xs); margin-right: var(--s-1); }
.chip--active { border-color: var(--c-accent); color: var(--c-accent); font-weight: var(--fw-bold); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--s-2); border: 0; padding: 0; margin: 0 0 var(--s-2); }
.chip--workdate { background: var(--c-surface); color: var(--c-warn); border-color: var(--c-warn); font-weight: var(--fw-bold); }
.breakdown__title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-md); }   /* N2.8h: chỉ còn là tiêu đề NHÓM trong thân thẻ (h3); tiêu đề thẻ = .card__head */
.breakdown__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); }
.breakdown__row:first-of-type { border-top: 0; }
.breakdown__row--band { font-size: var(--fs-base); color: var(--c-text-mut); padding-left: var(--s-3); }
.breakdown__row--penalty { color: var(--c-penalty); }
.breakdown__row--total { border-top: 2px solid var(--c-text); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.breakdown__label { display: inline-flex; align-items: center; gap: var(--s-1); }
.breakdown__value { font-weight: var(--fw-bold); text-align: right; }
/* dòng có công tắc + ô số tiền (trả một người: "Trả hôm nay") — nhãn xếp dọc, ô tiền hẹp canh phải */
.breakdown__label--stack { flex-direction: column; align-items: flex-start; gap: var(--s-1); min-width: 0; }
.field__input--money { width: 9rem; flex: none; text-align: right; }
.field__input--money:disabled { opacity: .55; }
.breakdown--compact { width: 100%; margin: var(--s-3) 0; }
.not-you { display: flex; align-items: center; justify-content: center; gap: var(--s-2); color: var(--c-text-mut); font-size: var(--fs-base); }
.btn--link { border: 0; background: none; color: var(--c-accent); min-height: var(--tap); padding: 0 var(--s-2); }
.btn--small { min-height: var(--h-btn-sm); padding: 0 var(--s-3); font-size: var(--fs-base); }
.btn--danger { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-strong); }
.card--center { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding: var(--s-4); }
.card--center .card__title { font-size: var(--fs-xl); }
.banner .btn { margin-left: auto; }
.field__input--code { font-size: var(--fs-3xl); letter-spacing: var(--ls-code); text-align: center; }
.confirm-dialog { width: min(92vw, 25rem); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: var(--c-backdrop); }
.confirm-dialog__body { padding: var(--s-5) var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-3); text-align: center; }
.confirm-dialog__body .icon-lg { align-self: center; color: var(--c-warn); }
.confirm-dialog .error-dialog__actions { margin: 0 calc(-1 * var(--s-4)); }
.chip--unpaid { background: var(--c-money-bg); color: var(--c-money); border-color: transparent; font-size: var(--fs-xs); }
.trace-list { list-style: none; margin: 0; padding: 0; }
.trace-list__step { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.trace-list__step--sub { padding-left: var(--s-4); color: var(--c-text-mut); font-size: var(--fs-base); }
.trace-list__step--total { border-top: 2px solid var(--c-text); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.trace-list__step.is-penalty { color: var(--c-penalty); }
.trace-list__step.is-voided { color: var(--c-text-mut); }
.trace-list__step.is-voided .num { text-decoration: line-through; }
.trace-list__note { display: flex; align-items: center; gap: var(--s-1); padding: 2px 0 2px var(--s-3); font-size: var(--fs-sm); color: var(--c-text-mut); }
.card--links { padding: 0 var(--s-4); }
.row--link { text-decoration: none; color: var(--c-text); padding: var(--s-3) 0; min-height: var(--tap); }
.row--link .row__label { color: var(--c-text); font-weight: var(--fw-bold); }
.row__chevron { color: var(--c-text-mut); font-size: var(--fs-2xl); line-height: 1; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--c-warn); color: var(--c-on-strong); font: var(--fw-bold) var(--fs-xs)/1 var(--f-sans); }
.badge--danger { background: var(--c-danger); }
.badge--muted { background: var(--c-border); color: var(--c-text-mut); }
.tile .badge { position: absolute; top: var(--s-2); right: var(--s-2); }
.list-card { padding: var(--s-4); }
.list-card .row { flex-wrap: wrap; }
.row__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__sub { font-size: var(--fs-sm); color: var(--c-text-mut); }
.row__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: 1 1 100%; justify-content: flex-end; margin-top: var(--s-2); }
label.row { cursor: pointer; }
.row--pick:has(> input:checked) { background: var(--c-primary-soft); }
.row--pick:has(> input:disabled) { opacity: .55; }
.row > input[type="checkbox"], .row > input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--c-accent); }
fieldset.pick-list { min-width: 0; }
.btn--accent { border-color: var(--c-accent); color: var(--c-accent); }
.list-create { margin-bottom: var(--s-3); }
.chip--status-draft { background: var(--c-surface); color: var(--c-text-mut); border-color: var(--c-border); }
.chip--status-scheduled { background: var(--c-surface); color: var(--c-warn); border-color: var(--c-warn); }
.chip--status-active { background: var(--c-money-bg); color: var(--c-money); border-color: transparent; }
.chip--status-superseded, .chip--status-cancelled { background: var(--c-surface); color: var(--c-paid); border-color: var(--c-border); text-decoration: line-through; }
.chip--status-pending { background: var(--c-surface); color: var(--c-warn); border-color: var(--c-warn); }
.chip--status-applied { background: var(--c-money-bg); color: var(--c-money); border-color: transparent; }
.chip--status-voided, .chip--status-rejected { background: var(--c-surface); color: var(--c-paid); border-color: var(--c-border); text-decoration: line-through; }
.chip--danger { background: var(--c-danger-bg); color: var(--c-penalty); border-color: transparent; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.form-grid .field--wide { grid-column: 1 / -1; }
.form .field + .field, .form .form-grid + .field, .form .field + .form-grid { margin-top: var(--s-3); }
.field__unit { display: flex; align-items: center; gap: var(--s-2); }
.field__unit .field__input { flex: 1 1 auto; }
.field__unit span { color: var(--c-text-mut); font-size: var(--fs-base); white-space: nowrap; }
.section-title { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-text-mut); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); font-size: var(--fs-base); }
.kv dt { color: var(--c-text-mut); }
.kv dd { margin: 0; }
.filter-bar { display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s-3); }
.filter-bar .field { flex: 1 1 8.125rem; }
.chip--state { gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--fs-base); font-weight: var(--fw-bold); background: var(--c-border); color: var(--c-text-mut); border-color: transparent; }
.chip--state .chip__dot { width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: currentColor; }
.chip--state-working { background: var(--c-money); color: var(--c-on-strong); }