/*
 * Thư viện thành phần giao diện: thẻ, nút, badge, bảng, form, phân trang.
 * Mọi màu và khoảng cách lấy từ tokens.css - không hard-code giá trị ở đây.
 */

/* ── Thẻ ───────────────────────────────────────────────────── */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.card__title {
    font-size: var(--text-md);
    font-weight: 600;
}

.card__subtitle {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.card__body {
    padding: var(--space-5);
}

.card__body--flush {
    padding: 0;
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--bg-raised);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ── Thẻ chỉ số ────────────────────────────────────────────── */

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.stat__label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
}

.stat__value {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.stat--accent .stat__value { color: var(--accent); }
.stat--success .stat__value { color: var(--success); }
.stat--warning .stat__value { color: var(--warning); }
.stat--danger .stat__value { color: var(--danger); }

/* ── Nút ───────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 34px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
}

.btn:hover {
    text-decoration: none;
}

/* Phản hồi xúc giác khi bấm giữ */
.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
}

.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-inverse);
}

.btn--secondary {
    background: var(--bg-surface);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn--secondary:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
    color: var(--text-primary);
}

.btn--danger {
    background: var(--bg-surface);
    border-color: var(--danger-border);
    color: var(--danger);
}

.btn--danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.btn--ghost:hover {
    background: var(--neutral-100);
    color: var(--text-primary);
}

.btn--sm {
    height: 28px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

.btn--icon {
    width: 34px;
    padding: 0;
}

.btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Bảng nạp dữ liệu (dropdown trong thanh hành động) ─────── */

.import-panel {
    position: relative;
}

.import-panel__trigger::-webkit-details-marker {
    display: none;
}

.import-panel__trigger {
    list-style: none;
}

/* Mở panel thì nút giữ trạng thái nhấn để người dùng biết nguồn của bảng */
.import-panel[open] > .import-panel__trigger {
    background: var(--neutral-100);
    border-color: var(--neutral-400);
}

.import-panel__menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 30;
    width: min(420px, calc(100vw - var(--space-8)));
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.import-panel__hint {
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}

.import-panel__form + .import-panel__form {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.import-panel__form-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.import-panel__form-title {
    font-size: var(--text-base);
    font-weight: 600;
}

.import-panel__template {
    font-size: var(--text-xs);
    white-space: nowrap;
}

.import-panel__form-desc {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.import-panel__form-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.import-panel__file {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: var(--space-2);
    font-size: var(--text-xs);
}

/* ── Nhóm ô nhập nhỏ nằm chung một cột bảng ────────────────── */

/*
  Ba ô kích thước và cặp đơn vị/quy cách phải vừa một ô bảng mà vẫn bấm được.
  Dùng grid thay vì flex để ba ô luôn bằng nhau, không co theo nội dung.
*/
.input-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
}

.input-pair {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: var(--space-1);
}

.input-trio .input,
.input-pair .input,
.input-pair .select {
    min-width: 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    font-size: var(--text-xs);
}

/* Ô tích trong bảng: bỏ khoảng đệm rộng của biểu mẫu để không đội cao dòng */
.checkbox--compact {
    gap: var(--space-2);
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* ── Nút bánh răng cài đặt (dropdown cuối hàng tab) ────────── */

/*
  Hàng tab và nút cài đặt nằm chung một dải: nút phải ở ngay trên thanh lọc để
  người dùng thấy được vì sao bảng đang xếp loại như vậy, nhưng không được
  chiếm chỗ của các tab lọc nhanh vốn dùng thường xuyên hơn nhiều.
*/
.tabs-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.tabs-row > .tabs {
    flex: 1;
    min-width: 0;
    border-bottom: none;
}

.gear-panel {
    position: relative;
    flex-shrink: 0;
    margin-right: var(--space-4);
}

.gear-panel__trigger::-webkit-details-marker {
    display: none;
}

.gear-panel__trigger {
    list-style: none;
    cursor: pointer;
}

.gear-panel[open] > .gear-panel__trigger {
    background: var(--neutral-100);
    color: var(--text-primary);
}

.gear-panel__menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 30;
    width: min(340px, calc(100vw - var(--space-8)));
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.gear-panel__hint {
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}

.gear-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

/* Nhắc lại ngưỡng đang chạy để biết mình có đang sửa thật hay không */
.gear-panel__current {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Badge trạng thái ──────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.badge--neutral {
    background: var(--neutral-100);
    border-color: var(--neutral-200);
    color: var(--neutral-700);
}

.badge--info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info);
}

.badge--success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}

.badge--warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}

.badge--danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

/* ── Bảng dữ liệu ──────────────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
}

/*
 * Bảng tự giãn theo nội dung và cuộn ngang khi thiếu chỗ, thay vì bóp các cột
 * lại làm tên nhà cung cấp bị ngắt thành nhiều dòng.
 */
.table {
    width: max-content;
    min-width: 100%;
    font-size: var(--text-sm);
}

/* Cột tên dài được phép xuống dòng nhưng vẫn giữ bề ngang tối thiểu dễ đọc */
.table__primary {
    display: inline-block;
    min-width: 140px;
}

.table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--neutral-25);
}

.table__code {
    font-family: var(--font-mono);
    font-weight: 500;
}

.table__primary {
    font-weight: 500;
    color: var(--text-primary);
}

.table__meta {
    display: block;
    margin-top: 1px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.table tfoot td {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-raised);
    border-top: 1px solid var(--border);
    font-weight: 600;
}

/* ── Form ──────────────────────────────────────────────────── */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.field__required {
    color: var(--danger);
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.field__error {
    font-size: var(--text-xs);
    color: var(--danger);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    height: 34px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.textarea {
    height: auto;
    min-height: 76px;
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    /* Đủ tương phản để đọc được nhưng vẫn nhạt hơn giá trị đã nhập */
    color: var(--neutral-500);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--neutral-400);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.input--error,
.select--error {
    border-color: var(--danger);
}

.input--error:focus,
.select--error:focus {
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7688' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.checkbox input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

.form-grid--full > .field {
    grid-column: 1 / -1;
}

/* Ô nhập trong bảng dòng hàng - gọn hơn để bảng không phình */
.table .input,
.table .select {
    height: 30px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
}

/* ── Tab lọc nhanh theo trạng thái ─────────────────────────── */

.tabs {
    display: flex;
    gap: var(--space-5);
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    /* Chặn thanh cuộn dọc 1px do gạch chân của tab đang hoạt động gây ra */
    overflow-y: hidden;
}

.tab {
    position: relative;
    padding: var(--space-3) 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition);
}

.tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background var(--transition);
}

.tab:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.tab--active {
    color: var(--accent);
}

.tab--active::after {
    background: var(--accent);
}

.tab__count {
    margin-left: var(--space-2);
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.tab--active .tab__count {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── Thanh công cụ lọc ─────────────────────────────────────── */

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
}

/* Trang không có ô tìm kiếm vẫn cần đẩy nhóm nút lọc về bên phải */
.toolbar__spacer {
    flex: 1;
}

/* Ô tìm kiếm chiếm phần còn lại, các nút lọc dồn về bên phải */
.toolbar__search {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
}

.toolbar__search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--neutral-500);
    pointer-events: none;
}

/* Thanh lọc dùng cỡ điều khiển gọn hơn form nhập liệu */
.toolbar__search .input {
    height: 30px;
    padding-left: calc(var(--space-2) * 2 + 14px);
    font-size: var(--text-sm);
}

.toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Nút trong thanh lọc thấp bằng ô tìm kiếm */
.toolbar .btn {
    height: 30px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

/* ── Nút lọc dạng dropdown ─────────────────────────────────── */

.filter-drop {
    position: relative;
}

.filter-drop__trigger::-webkit-details-marker {
    display: none;
}

.filter-drop__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 30px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* Giá trị đã chọn dài thì cắt bớt để nút không kéo dãn cả thanh lọc */
.filter-drop__trigger > span:first-of-type {
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-drop__trigger:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
}

.filter-drop[open] > .filter-drop__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Bộ lọc đang có giá trị được tô nổi để người dùng biết bảng đang bị lọc */
.filter-drop--active > .filter-drop__trigger {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
    font-weight: 500;
}

.filter-drop__chevron {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.filter-drop[open] .filter-drop__chevron {
    transform: rotate(180deg);
}

.filter-drop__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.filter-drop__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    width: max-content;
    min-width: 200px;
    max-width: min(320px, calc(100vw - var(--space-8)));
    padding: var(--space-1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.filter-drop__scroll {
    max-height: 260px;
    overflow-y: auto;
}

.filter-drop__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition);
}

.filter-drop__option:hover {
    background: var(--neutral-50);
}

.filter-drop__option input {
    accent-color: var(--accent);
    cursor: pointer;
}

.filter-drop__option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-drop__option-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.filter-drop__section {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.filter-drop__body {
    padding: var(--space-2);
    display: grid;
    gap: var(--space-3);
}

.filter-drop__body .input,
.filter-drop__body .select {
    height: 30px;
    font-size: var(--text-sm);
}

.filter-drop__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-top: 1px solid var(--border);
}

.filter-drop__footer .btn {
    height: 28px;
}

@media (max-width: 720px) {
    .toolbar__filters {
        width: 100%;
    }

    .filter-drop__menu {
        left: 0;
        right: auto;
    }
}

/* ── Phân trang ────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.pagination__summary {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pagination__link {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.pagination__link:hover {
    background: var(--neutral-50);
    border-color: var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
}

.pagination__link--active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
}

.pagination__link--active:hover {
    background: var(--accent-hover);
    color: var(--text-inverse);
}

.pagination__link--disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Thông báo ─────────────────────────────────────────────── */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
}

.alert__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.alert--success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}

.alert--danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.alert--warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}

.alert--info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info);
}

/* ── Trạng thái rỗng ───────────────────────────────────────── */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty__icon {
    width: 44px;
    height: 44px;
    color: var(--neutral-400);
}

.empty__title {
    font-size: var(--text-md);
    font-weight: 600;
}

.empty__message {
    max-width: 46ch;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Danh sách mô tả (trang chi tiết) ──────────────────────── */

.definition-list {
    display: grid;
    gap: var(--space-3);
}

.definition-list__row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
}

.definition-list__term {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.definition-list__value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    word-break: break-word;
}

/* Bảng tổng tiền cuối chứng từ */
.totals {
    display: grid;
    gap: var(--space-2);
    margin-left: auto;
    width: min(340px, 100%);
}

.totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
}

.totals__row--grand {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-md);
    font-weight: 600;
}

.totals__label {
    color: var(--text-secondary);
}

.totals__value {
    font-variant-numeric: tabular-nums;
}

/* ── Chọn nhiều dòng ───────────────────────────────────────── */

/* Cột checkbox chỉ rộng vừa đủ và không co giãn theo nội dung bảng */
.col-check {
    width: 36px;
    padding-right: 0 !important;
}

.col-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    vertical-align: middle;
}

/*
 * Thanh thao tác thay chỗ hàng tiêu đề khi có dòng được chọn, nên người dùng
 * thấy ngay thao tác áp dụng cho phần vừa tích mà bảng không bị nhảy chỗ.
 */
.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-5);
    background: var(--accent-soft);
    border-bottom: 1px solid var(--accent-border);
}

.bulk-bar[hidden] {
    display: none;
}

.bulk-bar__count {
    font-size: var(--text-sm);
    color: var(--accent);
}

.bulk-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Cột thao tác cuối dòng: các nút chỉ hiện rõ khi rê vào dòng */
.row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
    white-space: nowrap;
}

.row-actions .btn--ghost {
    opacity: 0.75;
}

.table tbody tr:hover .row-actions .btn--ghost {
    opacity: 1;
}

/* Nút bị chặn vì nghiệp vụ: vẫn thấy được nhưng không bấm được */
.row-actions__disabled {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--neutral-400);
    cursor: not-allowed;
}

/* ── Ảnh đại diện chữ cái ──────────────────────────────────── */

.avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Ô ảnh sản phẩm; hiện khung rỗng khi sản phẩm chưa có ảnh */
.thumb {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    overflow: hidden;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--neutral-400);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb svg {
    width: 18px;
    height: 18px;
}

/* Ô đầu dòng gồm ảnh/avatar đứng cạnh phần chữ */
.media {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.media__body {
    min-width: 0;
}

/* ── Cây danh mục ──────────────────────────────────────────── */

/*
 * Thụt lề theo cấp bằng padding trên chính ô đầu tiên, nên vẫn là một bảng
 * phẳng - sắp xếp và phân trang không bị vỡ như khi lồng bảng vào nhau.
 */
.tree-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tree-cell__indent {
    flex-shrink: 0;
    align-self: stretch;
}

/* Nút thu/mở nhánh; ô giữ chỗ cùng kích thước để tên các dòng thẳng hàng */
.tree-toggle {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.tree-toggle:hover {
    background: var(--neutral-100);
    color: var(--text-primary);
}

.tree-toggle--leaf {
    cursor: default;
}

.tree-toggle__chevron {
    width: 12px;
    height: 12px;
    /* Mở: mũi tên chỉ xuống. Thu gọn: quay về chỉ sang phải. */
    transform: rotate(90deg);
    transition: transform var(--transition);
}

.tree-toggle--collapsed .tree-toggle__chevron {
    transform: rotate(0deg);
}

.tree-cell__name {
    font-weight: 500;
}

/* Danh mục gốc đậm hơn để nhìn ra ngay các nhánh chính */
.tree-row--root .tree-cell__name {
    font-weight: 600;
}

.tree-row--inactive .tree-cell__name {
    color: var(--text-muted);
}

.level-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--neutral-100);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
}

/* ── Dòng thời gian trạng thái ─────────────────────────────── */

.status-track {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.status-track__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.status-track__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--neutral-300);
}

.status-track__item--done .status-track__dot {
    background: var(--success);
}

.status-track__item--done {
    color: var(--text-primary);
}

.status-track__arrow {
    color: var(--neutral-300);
}

/* ── Thanh mức lấp đầy ─────────────────────────────────────── */

.fill-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 116px;
}

.fill-bar__track {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
    overflow: hidden;
}

.fill-bar__value {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.fill-bar__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Sơ đồ ô của một giàn ──────────────────────────────────── */

.shelf-map {
    display: grid;
    gap: var(--space-4);
}

/* Mỗi tầng là một dải ngang, nhãn tầng nằm bên trái như nhìn giàn thật */
.shelf-map__rack {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-app);
}

.shelf-map__rack-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    padding-top: var(--space-2);
}

.shelf-map__cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-2);
}

/* Nút khoá nằm đè lên góc ô nên mỗi ô là một form định vị tương đối */
.cell-tile-form {
    position: relative;
}

.cell-tile {
    display: grid;
    gap: 2px;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    text-align: center;
    transition: var(--transition);
}

.cell-tile:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.cell-tile__code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.cell-tile__count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.cell-tile--empty {
    border-style: dashed;
}

.cell-tile--filled {
    background: var(--success-soft);
    border-color: var(--success-border);
}

.cell-tile--filled .cell-tile__count {
    color: var(--success);
    font-weight: 600;
}

.cell-tile--blocked {
    background: var(--neutral-100);
    border-color: var(--border-strong);
    opacity: 0.75;
}

.cell-tile__lock {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition);
}

.cell-tile-form:hover .cell-tile__lock,
.cell-tile__lock:focus-visible {
    opacity: 1;
}

.cell-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.cell-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.cell-chip {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.cell-chip--empty {
    border-style: dashed;
}

.cell-chip--filled {
    background: var(--success-soft);
    border-color: var(--success-border);
}

.cell-chip--blocked {
    background: var(--neutral-100);
    border-color: var(--border-strong);
}

/* ── Màn quét mã vào ô ─────────────────────────────────────── */

.scan-form {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Ô nhập to và rõ: nhân viên cầm máy quét, nhìn từ xa vẫn phải thấy mình gõ gì */
.scan-form__input {
    flex: 1 1 260px;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    letter-spacing: 0.03em;
}

/* Hộp xác nhận viền dày để không lẫn với các thẻ nội dung khác trên trang */
.scan-confirm {
    border-width: 2px;
}

.scan-confirm--ready {
    border-color: var(--accent);
}

.scan-confirm--blocked {
    border-color: var(--danger-border);
    background: var(--danger-soft);
}

.scan-confirm .card__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Ô chọn phiếu nhập nằm ngang với nút sinh kiện */
.receipt-pick {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.receipt-pick .field {
    flex: 1 1 320px;
}