/* Bảng chi tiết sản phẩm đã chọn (modal) — dùng biến từ variables.css */

/* Trên trang hotspot, solution-designer.css đặt .sd-modal-backdrop { opacity:0; pointer-events:none }
   và chỉ hiện khi có class .open. Nhưng các modal ở đây (bảng chi tiết, gửi yêu cầu) bật/tắt bằng
   thuộc tính [hidden], nên cần khôi phục opacity/pointer-events khi modal không bị ẩn.
   :not([hidden]) có specificity (0,2,0) cao hơn để thắng rule cũ. */
.sd-modal-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.sd-modal--wide {
    width: min(980px, 94vw);
    max-width: 94vw;
}

.sd-detail-wrap {
    overflow: auto;
    max-height: 70vh;
}

.sd-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-body);
    color: var(--color-text);
}

.sd-detail-table th,
.sd-detail-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border, #e8e8e8);
    text-align: left;
    vertical-align: middle;
}

.sd-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg2);
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.sd-detail-table tbody tr:hover {
    background: var(--color-bg2);
}

.sd-detail-name {
    font-weight: 600;
}

.sd-detail-thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--color-bg2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-small);
}

.sd-detail-thumb--empty {
    color: var(--color-subtext);
}