/* Xuân Thu · giao diện v3: các mảnh CŨ dùng chung (.btn, .linput, .chip, .pcard, .dtable, .warnbox, .empty, .stab, .dtile …) mặc kiểu mới.
   Mỗi màn chưa đổi bố cục vẫn đổi theo (brief 02/11 §0.2: "restyle all roles using ONLY shared components"). Nạp sau khung.css, trước v3_man.css. Cỡ nút, chữ theo bậc của từng vai (--t-btn-h, --t-btn-fs, --t-text, --t-min, --control-h): xưởng, kho, chị Hà, chị Bích giữ cỡ to, chỉ đổi kiểu.
   Màu trạng thái cũ trỏ sang nghĩa pastel cố định: xong, đã nhận = mint; tin, điều hàng = sky; cần để ý = vàng #B45309 (AA 4,51 trên nền vàng); sai, trễ = đỏ.
   Chữ đỏ trên nền đỏ nhạt dùng #B91C1C (5,30; #DC2626 chỉ 3,95). */
:root {
  --status-ok: #047857; --status-ok-bg: #D7F7E6;
  --status-info: #0369A1; --status-info-bg: #DCEFFD;
  --status-warn: #B45309; --status-warn-bg: #FEF3C7; --status-warn-line: #D97706;
  --status-danger: #B91C1C; --status-danger-bg: #FEE2E2;
  --status-neutral: var(--ds-text-2); --status-neutral-bg: var(--ds-sunken);
  --ink-chip: var(--ds-sunken); --ink-chip-fg: var(--ds-text);
}
:root[data-theme="dark"] { --status-ok: #6EE7B7; --status-ok-bg: #0F2E22; --status-info: #7DD3FC; --status-info-bg: #0C2A3F; --status-warn: #FBBF24; --status-warn-bg: #2A2110; --status-warn-line: #FBBF24; --status-danger: #F87171; --status-danger-bg: #3A1618; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --status-ok: #6EE7B7; --status-ok-bg: #0F2E22; --status-info: #7DD3FC; --status-info-bg: #0C2A3F; --status-warn: #FBBF24; --status-warn-bg: #2A2110; --status-warn-line: #FBBF24; --status-danger: #F87171; --status-danger-bg: #3A1618; } }

/* ---------- nút: chính cam đặc, phụ cam nhạt không viền, chữ (trong) không nền ---------- */
#view .btn, .foot .btn, .sheet .btn, #xsheet .btn, .tam .btn { height: auto; min-height: var(--t-btn-h, 40px); border-radius: var(--ds-r-ctl); font-size: var(--t-btn-fs, 15px); font-weight: 600; padding: 0 16px; border: 0; gap: 6px; transition: transform var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast); }
#view .btn:active, .foot .btn:active { transform: scale(.97); }
#view .btn.sm, .foot .btn.sm { min-height: max(36px, var(--control-h-sm), calc(var(--t-btn-h, 40px) * .8)); padding: 0 12px; font-size: max(14px, var(--t-min, 13px)); }
#view .btn.big, #view .btn.lg, #view .btn.xong, .foot .btn.big, .foot .btn.lg { min-height: max(48px, var(--t-btn-h, 40px)); font-size: max(var(--ds-fs-17), var(--t-btn-fs, 15px)); padding: 0 20px; }
#view .btn.ghost, #view .btn.icn, .foot .btn.ghost, .sheet .btn.ghost, #xsheet .btn.ghost, .tam .btn.ghost { background: var(--ds-tint); color: var(--ds-on-tint); border: 0; }
#view .btn.ghost:hover, .foot .btn.ghost:hover { background: var(--ds-tint-2); }
#view .btn.trong { background: transparent; color: var(--ds-primary-text); }
#view .btn.trong:hover { background: var(--ds-sunken); }
#view .btn.ghost.danger, #view .btn.danger.ghost { background: var(--status-danger-bg); color: var(--status-danger); }
#view .btn.is-done { background: var(--ds-mint-bg); color: var(--ds-mint); }
#view .linkbtn { color: var(--ds-primary-text); font-weight: 600; }
#view .ibtn { width: max(40px, var(--control-h-sm)); height: max(40px, var(--control-h-sm)); border: 0; border-radius: 50%; background: var(--ds-sunken); color: var(--ds-text-2); }

/* ---------- ô nhập: nền xám, không viền ---------- */
#view .linput, #view .reason, #view .ntin, .sheet .linput, .tam .linput { height: auto; min-height: max(40px, var(--control-h)); border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); font-size: max(15px, var(--t-text, 15px)); padding: 0 12px; color: var(--ds-text); }
#view textarea.linput, #view textarea.reason { padding: 10px 12px; }
#view .linput:focus, #view .reason:focus, #view .ntin:focus { outline: 3px solid var(--ds-primary); outline-offset: 1px; border: 0; }
#view .flab, #view .slbl { font-size: var(--ds-fs-13); font-weight: 600; color: var(--ds-text-2); margin-bottom: 6px; }
@media (max-width: 767px) { #view .linput, #view .reason { min-height: 48px; font-size: 16px; } }

/* ---------- thẻ: bo 16, bóng nhẹ, không viền ---------- */
#view .pcard, #view .gcard, #view .dtile, #view details.dash, #view .dalam, #view .pcard2, #view .vcard, #view .hcard { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); }
#view .pcard, #view .dtile { padding: 16px; margin: 0 0 12px; }
#view .pcard.tappable:hover { background: var(--ds-surface); box-shadow: var(--ds-shadow-lift), var(--ds-edge); }
#view .dtile .l { font-size: var(--ds-fs-13); letter-spacing: 0; text-transform: none; color: var(--ds-text-2); font-weight: 600; }
#view .dtile .n { font-size: var(--ds-fs-30); font-weight: 700; line-height: 38px; }
#view .section { font-size: var(--ds-fs-13); color: var(--ds-text-3); letter-spacing: .04em; margin: 24px 0 8px; }
#view .pmeta { color: var(--ds-text-2); }

/* ---------- nhãn trạng thái: viên, 24 px, chữ 13 ---------- */
#view .chip { height: auto; min-height: 24px; padding: 0 10px; border: 0; border-radius: var(--ds-r-pill); font-size: max(13px, var(--t-min, 13px)); font-weight: 600; letter-spacing: 0; text-transform: none; }
#view .chip:not(.ok):not(.xong):not(.warn):not(.can):not(.bad):not(.tre):not(.c-warn):not(.c-bad):not(.c-ok) { background: var(--ds-sunken); color: var(--ds-text-2); }

/* ---------- chip lọc, tab: viên 36 px, đang chọn nền cam nhạt chữ cam (như mock-up) ---------- */
#view .stab, #view .fchip, #view .catchip, #view .dchip, #view .tab, #view .sbtn { height: auto; min-height: max(36px, var(--control-h-sm)); padding: 0 14px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-surface); color: var(--ds-text-2); font-size: max(15px, var(--t-text, 15px)); font-weight: 600; box-shadow: var(--ds-shadow), var(--ds-edge); }
#view .stab.on, #view .fchip.on, #view .catchip.on, #view .dchip.on, #view .tab.on, #view .sbtn.on { background: var(--ds-tint); color: var(--ds-primary-text); box-shadow: none; }
/* hàng tab gạch chân: thành nút chọn xám (segmented control) */
#view .storetabs { gap: 4px; padding: 4px; border: 0; border-radius: var(--ds-r-ctl); background: var(--ds-sunken); margin-bottom: 16px; width: max-content; max-width: 100%; }
#view .storetabs .stab { height: auto; min-height: max(36px, var(--control-h-sm)); border: 0; border-radius: 9px; margin: 0; background: transparent; color: var(--ds-text-2); box-shadow: none; font-weight: 600; }
#view .storetabs .stab.on { background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow), var(--ds-edge); }
#view .storetabs .stab.xls { background: transparent; color: var(--ds-primary-text); }

/* ---------- hộp báo: bo 12, không viền ---------- */
#view .warnbox, #view .okbox, #view .donebox, #view .alert, #view .howto, #view .lonote, #view .hongbox, #view .ins { border: 0; border-radius: var(--ds-r-ctl); padding: 12px 14px; font-size: max(15px, var(--t-text, 15px)); }
#view .warnbox.ok { background: var(--ds-sky-bg); color: var(--ds-sky); }

/* ---------- trống: thẻ trắng, không gạch đứt ---------- */
#view .empty { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); padding: 32px 16px; font-size: max(15px, var(--t-text, 15px)); color: var(--ds-text-2); }
#view .empty.xong { background: var(--ds-mint-bg); color: var(--ds-mint); box-shadow: none; }

/* ---------- bảng (văn phòng): đường mảnh, đầu bảng dính khi cuộn ---------- */
#view .tblwrap { border: 0; border-radius: var(--ds-r-card); background: var(--ds-surface); box-shadow: var(--ds-shadow), var(--ds-edge); overflow: auto; }
#view .dtable { font-size: max(15px, var(--t-text, 15px)); }
#view .dtable th { position: sticky; top: 0; z-index: 1; background: var(--ds-surface); color: var(--ds-text-3); font-size: max(13px, var(--t-min, 13px)); font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--ds-hairline); padding: 10px 12px; }
#view .dtable td { border-bottom: 1px solid var(--ds-hairline); padding: 12px; }
#view .dtable tbody tr:hover td { background: var(--ds-page); }
#view .dtable tr.sel td { background: var(--ds-tint); }