/* === INVENTORY SCREEN === */
#inventory-screen .screen-main {
    overflow-y: auto; /* Kích hoạt thanh cuộn dọc */
    padding-bottom: 100px; /* Thêm khoảng trống lớn ở dưới để không bị thanh điều hướng che mất */
    height: 100%; /* Đảm bảo chiều cao full */
}

#inventory-assets-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 1rem;
    padding-bottom: 2rem;
}

.item-card { 
    background: rgba(0,0,0,0.2); 
    border: 1px solid var(--color-border); 
    border-radius: 8px; 
    text-align: center; 
    padding: 1rem; 
    transition: all 0.3s ease; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Hiệu ứng hover theo từng độ hiếm */
.item-card:hover {
    transform: translateY(-5px);
}
.item-card.rarity-thường:hover {
    border-color: #94A3B8; /* Tailwind gray-400 */
    box-shadow: 0 0 15px #94A3B8;
}
.item-card.rarity-hiếm:hover {
    border-color: #3b82f6; /* Tailwind blue-500 */
    box-shadow: 0 0 15px #3b82f6;
}
.item-card.rarity-sử-thi:hover {
    border-color: #a855f7; /* Tailwind purple-500 */
    box-shadow: 0 0 15px #a855f7;
}
.item-card.rarity-thần-thoại:hover {
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 15px var(--color-accent-gold);
}

/* Các màu viền dựa theo độ hiếm (dùng chung cho cả Gacha và Inventory) */
.rarity-Hiếm {
    border-color: #3b82f6;
    color: #60a5fa;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
}
.rarity-Sử-Thi {
    border-color: #a855f7;
    color: #c084fc;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.9);
}
.rarity-Thần-Thoại {
    border-color: #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 50px rgba(251, 191, 36, 1);
}


.item-card-header { 
    font-weight: bold; 
    color: var(--color-text-secondary); 
}

#inventory-assets-grid .item-card-name { 
    font-weight: bold; 
    margin: 0.5rem 0; 
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card-static-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    padding: 0.25rem 0;
    text-transform: uppercase;
}

.upgrade-section { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
}

#shard-upgrade-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}


.bulk-use-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .bulk-use-controls {
        flex-direction: row;
    }
}
.bulk-use-controls input {
    margin-left: auto;
    width: 80px;
    flex-shrink: 0;
}
/* [THÊM VÀO inventory-screen.css] */

/* ================================== */
/* == STYLES CHO TAB TÀI SẢN MỚI == */
/* ================================== */

/* Kiểu cho bộ lọc Tab Tài sản */
#assets-filter-bar {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng trên mobile */
    gap: 1rem;
    justify-content: center;
    padding: 0.75rem;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

#assets-filter-bar label {
    display: flex;
    align-items: center;
    gap: 0.35rem; /* Khoảng cách giữa checkbox và chữ */
    cursor: pointer;
    font-size: 0.875rem; /* 14px */
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

#assets-filter-bar label:hover {
    color: var(--color-text-primary);
}

/* Kiểu dáng cơ bản cho checkbox */
#assets-filter-bar input[type="checkbox"] {
    cursor: pointer;
}
.item-card .futuristic-btn {
    white-space: nowrap;
}
/* [THÊM VÀO] */
#assets-filter-bar,
#inventory-assets-grid {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
#inventory-tab-transactions .redemption-history-list,
#inventory-tab-currency .space-y-8 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* [THÊM VÀO inventory-screen.css] */

/* 1. Gỡ bỏ căn giữa cho container Lịch sử */
#inventory-tab-transactions .redemption-history-list {
    max-width: none; /* Đảm bảo nó trải đầy */
    margin: 0;
}

/* 2. Định nghĩa layout Grid cho item */
.history-item {
    display: grid;
    /* Cột 1: Icon (cố định) | Cột 2: Tiêu đề | Cột 3: Chi tiết | Cột 4: Ngày */
    grid-template-columns: 50px 1.2fr 2fr 1fr;
    align-items: center;
    gap: 1rem; /* Khoảng cách giữa các cột */

    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease-out;
}

.history-item:hover {
    background-color: var(--color-primary-cyan-transparent);
}

/* 3. Định dạng các cột */
.history-item-icon {
    font-size: 1.75rem; /* 28px */
    text-align: center;
}

.history-item-title {
    font-weight: bold;
    font-size: 1.1rem; /* 18px */
    color: var(--color-text-primary);
    
    /* Chống vỡ chữ */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-details {
    font-size: 0.9rem; /* 14px */
    color: var(--color-text-secondary);

    /* Ẩn bớt nếu quá dài */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-date {
    font-size: 0.8rem; /* 12.8px */
    color: var(--color-text-secondary);
    text-align: right;
    font-family: monospace;
    white-space: nowrap;
}

/* 4. Responsive cho Mobile (dưới 768px) */
@media (max-width: 768px) {
    .history-item {
        /* Chuyển về 2 cột: [Icon] [Nội dung] */
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto auto; /* 3 hàng */
        gap: 0.25rem 1rem;
    }
    
    .history-item-icon {
        /* Icon chiếm cả 3 hàng */
        grid-row: 1 / span 3;
        font-size: 1.5rem; /* Thu nhỏ icon */
    }

    .history-item-title {
        grid-column: 2;
        grid-row: 1;
    }
    
    .history-item-details {
        grid-column: 2;
        grid-row: 2;
        white-space: normal; /* Cho phép xuống dòng */
    }

    .history-item-date {
        /* Dời ngày tháng xuống dưới chi tiết */
        grid-column: 2;
        grid-row: 3;
        text-align: left; /* Căn trái */
        margin-top: 5px;
        font-size: 0.75rem;
    }
}