/* Bảng toàn bộ hoá đơn (/invoices/table) – mỗi hoá đơn 1 dòng */
.tb-page{background:var(--bg);overflow:hidden}
.tb-top{position:relative;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:#f3f4f1f0;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-back{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--text)}
.tb-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-title{flex:1;min-width:200px}
.tb-title h1{margin:0;font-size:20px;letter-spacing:-.3px;line-height:1.2}
.tb-title p{margin:1px 0 0;font-size:13px}
.tb-tools{display:flex;gap:8px;flex-wrap:wrap}
.tb-tools input,.tb-tools select{height:40px;border:1px solid var(--line);border-radius:11px;background:var(--card);font:inherit;font-size:14px;color:var(--text);padding:0 10px}
.tb-tools input{width:min(320px,70vw)}
.tb-tools input:focus,.tb-tools select:focus{outline:3px solid #5fb9a455;border-color:var(--brand)}

/* Khung bảng tự cuộn cả 2 chiều: tiêu đề cột + dòng tổng luôn dính */
.tb-wrap{height:calc(100vh - var(--head-h,61px));height:calc(100dvh - var(--head-h,61px));overflow:auto;padding:12px 16px 0}
.tb{width:100%;min-width:1180px;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:13.5px}
.tb th{position:sticky;top:0;z-index:2;background:#f6f7f5;color:var(--muted);font-weight:650;font-size:12px;text-align:left;padding:9px 8px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tb th:first-child{border-top-left-radius:14px}
.tb th:last-child{border-top-right-radius:14px}
.tb td{padding:7px 8px;border-bottom:1px solid #eef0ed;vertical-align:top}
.tb tbody tr:hover td{background:#f8faf9}
.tb .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb .nowrap{white-space:nowrap}
.tb .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;white-space:nowrap}
.tb .muted{color:var(--muted)}
.tb .addr{min-width:150px;max-width:220px}
.tb .buyer{min-width:130px;max-width:200px;font-weight:600}
.tb .goods{min-width:160px;max-width:260px}
.tb .goods div+div{margin-top:3px;padding-top:3px;border-top:1px dashed #e6e9e5}
.tb .goods .amt{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tb .total{font-weight:750}
.tb a.num{color:var(--brand-dark);font-weight:700;text-decoration:none}
.tb a.num:hover{text-decoration:underline}

/* Ảnh nhỏ: bấm mở popup (lightbox.js) */
.tb-thumb{display:block;width:30px;height:38px;border-radius:5px;overflow:hidden;border:1px solid var(--line);background:#e9ebe7;cursor:zoom-in}
.tb-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.tb-thumb:hover{outline:2px solid var(--brand);outline-offset:1px}
.tb-thumb:focus-visible{outline:3px solid #5fb9a4;outline-offset:1px}

.tb tfoot td{position:sticky;bottom:0;background:#f6f7f5;border-top:1px solid var(--line);border-bottom:0;padding:10px}
.tb tfoot td:first-child{border-bottom-left-radius:14px}
.tb tfoot td:last-child{border-bottom-right-radius:14px}
.tb-sum-l{text-align:right;color:var(--muted);font-weight:600}
.tb-sum{font-size:15px;font-weight:800;color:var(--brand-dark)}
.tb-more{padding:16px;text-align:center;font-size:13px;color:var(--muted)}
.tb-more .spin{display:inline-block;width:22px;height:22px;border-width:2px;border-color:#0002;border-top-color:var(--brand)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap}
.badge.ok{background:var(--brand-soft);color:var(--brand-dark)}
.badge.pending{background:#eef0ed;color:var(--muted)}
.badge.not_invoice{background:#f1eef6;color:#6b4fa0}
.badge.warn{background:#fff1dc;color:var(--warn)}
.badge.error{background:#fdecea;color:var(--err)}
.badge.working{background:#e7f0ff;color:#2856a6}

/* Chế độ nhóm theo Quý / Năm (theo ngày trên hoá đơn) */
.tb-groups{flex-basis:100%;display:flex;gap:8px;overflow-x:auto;padding:2px 0 2px;scrollbar-width:thin}
.tb-groups button{flex:none;display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 10px;padding:7px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);text-align:left}
.tb-groups button span{font-size:12.5px;font-weight:650;color:var(--muted)}
.tb-groups button small{grid-column:1;font-size:11.5px;color:var(--muted)}
.tb-groups button b{grid-row:1/3;grid-column:2;align-self:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.tb-groups button:hover{border-color:#c9cfca}
.tb-groups button.on{background:var(--text);border-color:var(--text)}
.tb-groups button.on span,.tb-groups button.on small{color:#ffffffb3}
.tb-groups button.on b{color:#fff}
.tb tr.tb-group td{position:sticky;top:34px;z-index:1;background:#e9f3ef;border-bottom:1px solid #cfe3db;padding:8px 10px;font-size:13.5px}
.tb tr.tb-group td b{color:var(--brand-dark)}
.tb tr.tb-group .tb-gsum{font-size:14.5px;font-weight:800;color:var(--brand-dark)}
.tb tbody tr.tb-group:hover td{background:#e9f3ef}
.tb .shot{font-size:12.5px}