/* Vibboza - inventaire premium stable
   CSS uniquement: aucune logique d'inventaire, aucun script, aucun observer DOM. */

.nitro-inventory {
    --vbz-inv-gold: #ffd25d;
    --vbz-inv-gold-2: #ffc137;
    --vbz-inv-blue: #47b8ff;
    --vbz-inv-green: #63df9a;
    --vbz-inv-line: rgba(255, 255, 255, .13);
    --vbz-inv-text: #fff6dc;
    --vbz-inv-muted: #aeb9c8;
    --vbz-inv-panel: rgba(9, 16, 27, .70);
    width: 620px !important;
    max-width: calc(100vw - 28px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    overflow: hidden !important;
    color: var(--vbz-inv-text) !important;
    background-color: #101723 !important;
    background-image:
        radial-gradient(circle at 10% -8%, rgba(255, 210, 93, .18), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(71, 184, 255, .14), transparent 36%),
        linear-gradient(145deg, #18243a 0%, #0e1420 58%, #17150e 100%) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.nitro-inventory .nitro-card-header,
.nitro-inventory .card-header {
    min-height: 44px !important;
    color: #fff8dc !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    background-color: rgba(7, 12, 20, .74) !important;
    background-image:
        linear-gradient(90deg, rgba(255, 210, 93, .24), rgba(71, 184, 255, .10), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .46) !important;
}

.nitro-inventory .nitro-card-content,
.nitro-inventory .card-body {
    padding: 12px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(255, 210, 93, .055), transparent 40%) !important;
}

.nitro-inventory .nitro-card-tabs,
.nitro-inventory .card-tabs {
    gap: 6px !important;
    padding: 9px 10px 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
}

.nitro-inventory .nitro-card-tabs .nav-link,
.nitro-inventory .nitro-card-tabs button,
.nitro-inventory .card-tabs .nav-link,
.nitro-inventory .card-tabs button {
    min-height: 31px !important;
    padding: 5px 12px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 999px !important;
    color: #dce6f4 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease !important;
}

.nitro-inventory .nitro-card-tabs .nav-link:hover,
.nitro-inventory .nitro-card-tabs button:hover,
.nitro-inventory .card-tabs .nav-link:hover,
.nitro-inventory .card-tabs button:hover {
    transform: translateY(-1px) !important;
    color: #fff8dc !important;
    border-color: rgba(255, 210, 93, .34) !important;
    background: rgba(255, 210, 93, .11) !important;
}

.nitro-inventory .nitro-card-tabs .active,
.nitro-inventory .card-tabs .active {
    color: #211706 !important;
    border-color: rgba(255, 226, 128, .78) !important;
    background-color: var(--vbz-inv-gold) !important;
    background-image: linear-gradient(180deg, #ffe794 0%, var(--vbz-inv-gold-2) 100%) !important;
    box-shadow: 0 8px 18px rgba(255, 194, 55, .22), inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

.nitro-inventory .nitro-card-content > .grid,
.nitro-inventory .card-body > .grid,
.nitro-inventory .nitro-card-content > .d-grid,
.nitro-inventory .card-body > .d-grid {
    gap: 12px !important;
}

.nitro-inventory .nitro-card-content > .grid > .col-7,
.nitro-inventory .nitro-card-content > .grid > .col-5,
.nitro-inventory .card-body > .grid > .col-7,
.nitro-inventory .card-body > .grid > .col-5 {
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--vbz-inv-line) !important;
    border-radius: 15px !important;
    background-color: var(--vbz-inv-panel) !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .065), transparent 42%),
        radial-gradient(circle at 50% 0%, rgba(71, 184, 255, .055), transparent 45%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .16) !important;
}

.nitro-inventory input[type="text"],
.nitro-inventory input[type="search"],
.nitro-inventory .form-control {
    min-height: 32px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    color: #fff7df !important;
    font-weight: 750 !important;
    background-color: rgba(5, 10, 18, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 2px rgba(255, 210, 93, .035) !important;
}

.nitro-inventory input[type="text"]:focus,
.nitro-inventory input[type="search"]:focus,
.nitro-inventory .form-control:focus {
    border-color: rgba(255, 210, 93, .52) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 3px rgba(255, 210, 93, .12) !important;
}

.nitro-inventory .auto-grid,
.nitro-inventory [class*="auto-grid"] {
    gap: 8px !important;
    align-content: start !important;
    padding-top: 8px !important;
}

.nitro-inventory .layout-grid-item {
    position: relative !important;
    min-width: 49px !important;
    width: 49px !important;
    min-height: 49px !important;
    height: 49px !important;
    border-radius: 12px !important;
    border-color: rgba(255, 255, 255, .13) !important;
    background-color: rgba(6, 13, 23, .88) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: auto !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .20) !important;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}

.nitro-inventory .layout-grid-item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 210, 93, .60) !important;
    background-color: rgba(24, 36, 56, .98) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 210, 93, .10), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.nitro-inventory .layout-grid-item.active,
.nitro-inventory .layout-grid-item.item-active {
    border-color: rgba(255, 210, 93, .94) !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 93, .18), 0 10px 22px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.nitro-inventory .layout-grid-item.unseen::before,
.nitro-inventory .layout-grid-item.has-highlight::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vbz-inv-green);
    box-shadow: 0 0 0 2px rgba(99, 223, 154, .20), 0 0 10px rgba(99, 223, 154, .65);
    z-index: 3;
}

.nitro-inventory .layout-item-count,
.nitro-inventory .item-count {
    z-index: 4 !important;
    border-radius: 999px !important;
    color: #211706 !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #ffe794, var(--vbz-inv-gold-2)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25) !important;
}

.nitro-inventory canvas {
    border-radius: 12px !important;
}

.nitro-inventory .col-5 > .position-relative,
.nitro-inventory .col-5 > .overflow-hidden,
.nitro-inventory .col-5 [class*="preview"] {
    border-radius: 14px !important;
    background-color: rgba(4, 10, 18, .42) !important;
    background-image:
        radial-gradient(circle at center, rgba(71, 184, 255, .12), transparent 46%),
        linear-gradient(135deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%, transparent 75%, transparent) !important;
    background-size: auto, 18px 18px !important;
}

.nitro-inventory .col-5 .text-truncate,
.nitro-inventory .col-5 .text,
.nitro-inventory .col-5 span {
    color: #fff8dc !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important;
}

.nitro-inventory .btn,
.nitro-inventory button {
    border-radius: 12px !important;
    font-weight: 900 !important;
}

.nitro-inventory .btn-success {
    min-height: 35px !important;
    border: 1px solid rgba(255, 226, 128, .58) !important;
    color: #201606 !important;
    text-shadow: none !important;
    background-color: var(--vbz-inv-gold) !important;
    background-image: linear-gradient(180deg, #ffe794 0%, var(--vbz-inv-gold-2) 100%) !important;
    box-shadow: 0 9px 18px rgba(255, 193, 55, .22), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.nitro-inventory .btn-success:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
}

.nitro-inventory .empty-image {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .34)) !important;
}

.nitro-inventory .empty-image + *,
.nitro-inventory .empty-image ~ * {
    color: var(--vbz-inv-muted) !important;
}

@media (max-width: 720px) {
    .nitro-inventory {
        width: calc(100vw - 18px) !important;
    }

    .nitro-inventory .layout-grid-item {
        min-width: 44px !important;
        width: 44px !important;
        min-height: 44px !important;
        height: 44px !important;
    }
}