/* CheckinQR — screens.css: /me, Hôm nay, chấm công, thẻ kết quả, QR, bảng công, chi tiết ngày, Đã nhận, Admin, lịch, thanh 24 giờ.
   Quy tắc dùng chung nằm ở components.css — không lặp lại ở đây. */

/* ---------- /me ---------- */
.me__head { display: flex; align-items: center; gap: var(--s-4); }
.me__head .icon { color: var(--c-accent); }
.me__code { font-size: var(--fs-base); color: var(--c-text-mut); }
.me__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.me__phone { font-size: var(--fs-base); color: var(--c-text-mut); }
.tile-grid--2 { grid-template-columns: 1fr 1fr; }
.tile-form { display: contents; }
.tile--danger .icon { color: var(--c-danger); }

/* ---------- N1.3: Hôm nay, chấm công, thẻ kết quả (docs/06 §4.1–4.6, §6) ---------- */
/* N2.8h: thẻ "Chưa nhận" là card chuẩn (data-card=today-unpaid…, màu xanh đặt ở card-colors.css); chỉ còn kiểu cho thân */
.unpaid-card .card__body { display: flex; flex-direction: column; gap: var(--s-1); }
.unpaid-card__amount { font-size: var(--fs-3xl); font-weight: var(--fw-bold); margin: 0; color: var(--c-money); }
.unpaid-card__sub { font-size: var(--fs-base); display: flex; align-items: center; gap: var(--s-1); }
.status { text-align: center; margin-bottom: var(--s-4); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.status__label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.status--working .status__label { color: var(--c-money); }
.status--needs_review .status__label { color: var(--c-warn); }
.status__clock { font-size: var(--fs-clock-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.status__sub { color: var(--c-text-mut); font-size: var(--fs-base); display: flex; align-items: center; gap: var(--s-1); justify-content: center; margin: 0; }
.status__today { color: var(--c-text); font-weight: var(--fw-bold); }
.status__today .num { font-variant-numeric: tabular-nums; }
.scan-hint { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.scan-hint .icon { color: var(--c-accent); }
.scan-hint p { margin: 0; }
.scan-hint__mark { color: var(--c-warn); font-size: var(--fs-base); }
.punch-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); flex-wrap: wrap; }
.punch-row__kind { font-weight: var(--fw-bold); }
.punch-row__time { font-weight: var(--fw-bold); }
.punch-row__source { color: var(--c-text-mut); font-size: var(--fs-base); flex: 1; }
.punch-who { padding: var(--s-4); }
.punch-who__site { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-3) 0 0; font-weight: var(--fw-bold); }
.punch-will { text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0 0 var(--s-2); }
.punch-tiles { margin: var(--s-4) 0; }
.tile--big { min-height: var(--tile-lg); }
.tile--big .tile__label { font-size: var(--fs-md); color: var(--c-text); }
.tile--in .icon { color: var(--c-money); }
.tile--out .icon { color: var(--c-danger); }
.tile:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.tile.is-busy, .btn.is-busy { position: relative; }
.tile.is-busy::after, .btn.is-busy::after {
  content: ""; position: absolute; top: var(--s-2); right: var(--s-2); width: 1rem; height: 1rem;
  border: 2px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: cq-spin .8s linear infinite;
}
@keyframes cq-spin { to { transform: rotate(360deg); } }
.tile--wide { flex-direction: row; min-height: var(--tap); }
.result-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--s-5) var(--s-4); margin-bottom: var(--s-4); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center;
}
.result-card__icon .icon { width: 4.5rem; height: 4.5rem; color: var(--c-money); }
.result-card__title { margin: 0; font-size: var(--fs-2xl); }
.result-card__site { margin: 0; color: var(--c-text-mut); }
.result-card__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.result-card .btn { width: 100%; }
.unpaid-mini { display: flex; align-items: center; gap: var(--s-2); color: var(--c-money); font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.unpaid-mini strong { font-size: var(--fs-xl); }

/* ---------- N1.3: Admin mã QR (docs/06 §5.2) ---------- */
.site-group { margin-bottom: var(--s-5); }
.site-group__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); text-transform: uppercase; color: var(--c-text-mut); }
.qr-card__line { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-base); color: var(--c-text-mut); margin-bottom: var(--s-1); }
.qr-card .warning-badge { margin: var(--s-2) 0; font-size: var(--fs-base); }
.print-toolbar { max-width: var(--page-max); margin: 0 auto; padding: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------- N2.1: bảng công, chi tiết ngày, đã nhận, cách tính lương của tôi (docs/06 §4.7–4.10, §6) ---------- */
.chip-group--views { margin-bottom: var(--s-3); }
.chip-group--views .chip { text-decoration: none; color: var(--c-text); }
.chip-group--views .chip--active { color: var(--c-accent); }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.month-nav__label { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: var(--fw-bold); }
.month-nav .btn { min-width: var(--tap); font-size: var(--fs-xl); }
.chip-group .chip { text-decoration: none; color: var(--c-text); }
/* N2.8h: thẻ tổng bảng công ở chế độ Chưa nhận = data-card="timesheet-totals-unpaid" (màu ở card-colors.css) */
.card[data-card="timesheet-totals-unpaid"] .breakdown__row--total { color: var(--c-money); }
.card[data-card="timesheet-totals-unpaid"] .breakdown__row--total.breakdown__row--penalty { color: var(--c-penalty); }   /* N2.8k: Còn nhận âm */
.totals-card__head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-base); color: var(--c-text-mut); margin-bottom: var(--s-2); }
.totals-card__empty { margin: 0; color: var(--c-text-mut); }
.totals-card__note { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--c-penalty); }
.breakdown__row--pending small { display: block; }
.day-list { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.day-row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); text-decoration: none; box-shadow: var(--shadow); min-height: var(--tap);
}
.day-row:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.day-row__icon .icon { color: var(--c-accent); }
.day-row--paid .day-row__icon .icon { color: var(--c-paid); }
.day-row--preview .day-row__icon .icon { color: var(--c-warn); }
.day-row__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day-row__date { font-weight: var(--fw-bold); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.day-row__sub { font-size: var(--fs-sm); color: var(--c-text-mut); }
.day-row__penalty { color: var(--c-penalty); }
.day-row__voided { color: var(--c-text-mut); text-decoration: line-through; }
.day-row__bonus { color: var(--c-money); }
.day-row__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.day-row__amount strong { font-size: var(--fs-md); }
.day-row__chevron { color: var(--c-text-mut); font-size: var(--fs-2xl); line-height: 1; }
.day-head { margin-bottom: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.day-head__title { margin: 0; font-size: var(--fs-2xl); }
.day-head__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.day-head p { margin: 0; }
.band-line { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); flex-wrap: wrap; }
.band-line:first-of-type { border-top: 0; }
.band-line__label { flex: 1; display: inline-flex; align-items: center; gap: var(--s-1); }
.band-line__amount { font-weight: var(--fw-bold); margin-left: auto; }
.day-context { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--c-text-mut); margin: 0 0 var(--s-4); }
.unpaid-card__pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line-soft); font-size: var(--fs-base); color: var(--c-warn); }
.unpaid-card__pending small { flex-basis: 100%; color: var(--c-text-mut); font-size: var(--fs-xs); }
.payout-card__line { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-base); color: var(--c-text-mut); margin-bottom: var(--s-1); }
.rules__big { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.rules__sub { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-base); text-transform: uppercase; color: var(--c-text-mut); }

/* ---------- N2.2 — Admin: dashboard, cấu hình, lịch, thanh 24 giờ (docs/06 §5.1, §5.4–5.6, §5.10) ---------- */
.admin-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.admin-tabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.admin-tabs .chip { flex: 1 1 0; justify-content: center; text-decoration: none; color: var(--c-text); }
.kpi { display: flex; flex-direction: column; gap: var(--s-1); }
.kpi__amount { font: var(--fw-bold) var(--fs-3xl)/var(--lh-tight) var(--f-mono); color: var(--c-money); }
.kpi__sub { color: var(--c-text-mut); font-size: var(--fs-base); }
.tile--warn .icon { color: var(--c-warn); }
.tile--ok .icon { color: var(--c-money); }
.tile--muted { opacity: .55; }
/* bộ ba ngày áp dụng (BR-H3) */
.effective-date { display: flex; flex-direction: column; gap: var(--s-2); }
.effective-date .chip-group { margin: 0; }
.effective-date__warn { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-warn-bg); color: var(--c-warn); border-left: 3px solid var(--c-warn); font-size: var(--fs-base); }
/* thanh 24 giờ (band-bar) */
.band-bar { position: relative; height: 2.125rem; border-radius: var(--r-sm); background: var(--c-bg); border: 1px solid var(--c-border); overflow: hidden; margin: var(--s-1) 0; }
.band-bar__base { position: absolute; inset: 0; }
.band-bar__seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font: var(--fw-bold) var(--fs-xs)/1 var(--f-mono); color: var(--c-text); border-right: 1px solid var(--c-line-soft); }
.band-bar__seg span { white-space: nowrap; padding: 0 2px; }
.band-bar__seg--work { background: var(--band-100); }
.band-bar__seg--100 { background: var(--band-100); }
.band-bar__seg--120 { background: var(--band-120); }
.band-bar__seg--130 { background: var(--band-130); }
.band-bar__seg--200 { background: var(--band-200); }
.band-bar__seg--300 { background: var(--band-300); }
.band-bar__seg--zero { background: repeating-linear-gradient(135deg, var(--c-bg) 0 .375rem, var(--c-border) .375rem .5rem); color: var(--c-text-mut); }
.band-bar__seg--overlap { background: var(--c-overlap); outline: 2px solid var(--c-danger); outline-offset: -2px; }
.band-bar__scale { display: flex; justify-content: space-between; font: var(--fs-xs)/1 var(--f-mono); color: var(--c-text-mut); padding: 0 2px; }
.band-bar__label { font-size: var(--fs-xs); color: var(--c-text-mut); margin-top: var(--s-2); display: flex; gap: var(--s-1); align-items: center; }
.band-row { display: grid; grid-template-columns: 1fr 4.625rem 4.625rem 4rem 2.5rem; gap: var(--s-1); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--c-border); }
.band-row:first-child { border-top: 0; }
.band-row .field__input { min-height: 2.5rem; padding: 0 var(--s-2); font-size: var(--fs-base); }
.band-row--bad .field__input { border-color: var(--c-penalty); }
.band-row__remove { min-height: 2.5rem; min-width: 2.5rem; padding: 0; border: 0; background: none; color: var(--c-danger); cursor: pointer; }
.band-message { margin-top: var(--s-2); font-size: var(--fs-sm); }
.band-message--ok { color: var(--c-money); }
.band-message--bad { color: var(--c-penalty); }
/* 7 ô nghỉ tuần */
.weekday-toggles { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1); margin: var(--s-2) 0; }
.weekday-toggles label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--h-input); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; font-size: var(--fs-sm); }
.weekday-toggles input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--c-accent); }
.weekday-toggles label:has(input:checked) { border-color: var(--c-accent); background: var(--c-primary-soft); font-weight: var(--fw-bold); }
/* lịch tháng */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__head { text-align: center; font-size: var(--fs-xs); color: var(--c-text-mut); padding: var(--s-1) 0; }
.cal__cell { position: relative; min-height: var(--tap); border-radius: var(--r-sm); background: var(--c-surface); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; font: var(--fw-bold) var(--fs-base)/1 var(--f-mono); }
.cal__cell--out { opacity: .35; }
.cal__cell--rest_day { background: var(--c-bg); color: var(--c-text-mut); }
.cal__cell--holiday { background: var(--c-warn-bg); color: var(--c-warn); }
.cal__cell--holiday::after { content: "\2605"; position: absolute; top: 2px; right: var(--s-1); font-size: var(--fs-xs); }
.cal__cell--today { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.cal__legend { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-2) 0 var(--s-4); font-size: var(--fs-xs); color: var(--c-text-mut); }
.cal__legend i { display: inline-block; background: var(--c-surface); width: .875rem; height: .875rem; border-radius: var(--r-xs); border: 1px solid var(--c-border); vertical-align: middle; margin-right: var(--s-1); }
.cal__legend i.cal__cell--holiday::after { content: none; }
/* thẻ điều chỉnh / nhân viên */
/* N2.8h: thẻ lặp theo dòng (adj-card) = card--fixed; đầu thẻ là .card__head; thân xếp dọc */
.adj-card .card__body { display: flex; flex-direction: column; gap: var(--s-2); }
.adj-card__sub { font-size: var(--fs-sm); color: var(--c-text-mut); }
.temp-password { font: var(--fw-bold) 1.5rem/var(--lh-snug) var(--f-mono); letter-spacing: var(--ls-code); user-select: all; }
.tile-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 400px) { .band-row { grid-template-columns: 1fr 4.125rem 4.125rem 3.5rem 2rem; } .form-grid { grid-template-columns: 1fr; } }

/* ---------- N2.2c: Hôm nay v2 — 11 khối (docs/10 A39, docs/12 PA1) ---------- */
.page--today .today-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-4); }
.today-head__when { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.today-head__who { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); text-align: right; min-width: 0; }
.today-muted { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-mut); }
.today-clock { font-size: var(--fs-clock); font-weight: var(--fw-bold); line-height: 1; }
.today-worked { display: flex; flex-direction: column; gap: var(--s-1); position: relative; overflow: hidden; padding: var(--s-4); background: var(--c-worked-bg); border-color: var(--c-worked-bg); color: var(--c-worked-fg); }
.today-big { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.today-worked > :not(.today-worked__fill) { position: relative; }
.today-worked__fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.today-worked__base { fill: var(--c-worked-base); }
.today-worked__extra { fill: var(--c-worked-extra); }
.today-worked .today-muted { color: var(--c-worked-mut); }
.today-mid { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.today-rows { padding: 0; overflow: hidden; }
.today-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); font-size: var(--fs-base); min-height: var(--tap); }
.today-row:first-child { border-top: 0; }
.today-row__label { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.today-row__label .icon { color: var(--c-text-mut); }
.today-row__label small { display: block; font-size: var(--fs-xs); color: var(--c-text-mut); }
.today-row__value { font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; }
.today-row__value--pos { color: var(--c-money); }
.today-row__value--neg { color: var(--c-penalty); }
.today-row__value--warn { color: var(--c-warn); }
.today-row--total { background: var(--c-warn-bg); }   /* N2.4d: nền của dòng Chờ duyệt cũ chuyển sang Tổng ngày; Chờ duyệt chỉ còn màu chữ */
.today-scan { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4); }
.today-scan .scan-hint__mark { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-1); }
.today-code { display: flex; gap: var(--s-2); }
.today-code__input { flex: 1; min-width: 0; min-height: 3rem; 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-md); letter-spacing: var(--ls-code); }
.today-code__input::placeholder { letter-spacing: var(--ls-tight); color: var(--c-text-mut); }
.today-code__input:focus { outline: 3px solid var(--c-accent); outline-offset: 0; border-color: var(--c-accent); }
.today-code__btn { min-height: 3rem; padding: 0 var(--s-4); }
.today-scan__manual { align-self: center; }
/* N2.8h: trạng thái âm = data-state="negative" trên thẻ, quy tắc ở khối cuối card-colors.css */

/* T2.2 — nhật ký: JSON trước / sau xuống dòng trong khung, không tràn ngang trên điện thoại */
.audit-json { margin: 0 0 var(--s-2); padding: var(--s-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); background: var(--c-bg); border-radius: var(--r-sm); }