/* =========================================================
   ASTRALIS — INVENTORY V2
   Interface inventaire nouvelle génération
   ========================================================= */

.astralis-inventory-v2 {
    --inv-bg: rgba(4, 14, 27, .97);
    --inv-panel: rgba(8, 25, 42, .92);
    --inv-panel-soft: rgba(12, 35, 55, .72);
    --inv-line: rgba(84, 196, 226, .28);
    --inv-line-active: rgba(86, 231, 255, .82);
    --inv-cyan: #62e8ff;
    --inv-text: #eaf9ff;
    --inv-muted: #86a9b9;
    --inv-slot: rgba(3, 12, 23, .88);

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(300px, .95fr)
        minmax(590px, 1.7fr)
        minmax(270px, .82fr);

    grid-template-rows:
        minmax(0, 1fr)
        auto;

    gap: 12px;

    color: var(--inv-text);
}


/* =========================================================
   PANNEAUX
   ========================================================= */

.astralis-inventory-v2__character,
.astralis-inventory-v2__storage,
.astralis-inventory-v2__details,
.astralis-inventory-v2__footer {

    border:
        1px solid var(--inv-line);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 30, 49, .96),
            rgba(3, 12, 24, .97)
        );

    box-shadow:
        inset 0 0 30px rgba(43, 188, 226, .04);
}


/* =========================================================
   PERSONNAGE
   ========================================================= */

.astralis-inventory-v2__character {

    position: relative;

    display: grid;

    grid-template-columns:
        54px
        minmax(190px, 1fr)
        54px;

    gap: 8px;

    padding: 12px;

    overflow: hidden;
}


.astralis-inventory-v2__character-stage {

    position: relative;

    min-height: 430px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(78, 191, 221, .18);

    border-radius: 8px;

    background:
        radial-gradient(
            circle at 50% 72%,
            rgba(52, 216, 255, .18),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            rgba(15, 47, 67, .46),
            rgba(3, 13, 25, .86)
        );

    overflow: hidden;
}


.astralis-inventory-v2__character-stage::after {

    content: "";

    position: absolute;

    left: 16%;
    right: 16%;
    bottom: 8%;

    height: 18px;

    border:
        1px solid rgba(88, 230, 255, .55);

    border-radius: 50%;

    box-shadow:
        0 0 20px rgba(54, 221, 255, .28);
}


.astralis-inventory-v2__character-placeholder {

    position: relative;
    z-index: 1;

    color: rgba(137, 210, 226, .55);

    text-align: center;

    font-size: 12px;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* =========================================================
   FUTURS EMPLACEMENTS ÉQUIPEMENT
   ========================================================= */

.astralis-inventory-v2__equipment {

    display: flex;
    flex-direction: column;

    justify-content: space-around;

    gap: 8px;
}


.astralis-inventory-v2__equipment-slot {

    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(82, 160, 187, .3);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 37, 55, .8),
            rgba(4, 14, 26, .9)
        );

    color: rgba(166, 216, 230, .72);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .02em;

    text-align: center;

    box-shadow:
    inset 0 0 14px rgba(52, 198, 230, .035);

    transition:
        border-color .15s ease,
        background .15s ease;
}

.astralis-inventory-v2__equipment-slot:hover {

    border-color:
        rgba(91, 222, 247, .55);

    background:
        linear-gradient(
            145deg,
            rgba(18, 50, 69, .9),
            rgba(5, 18, 31, .95)
        );
}

/* =========================================================
   ZONE CENTRALE
   ========================================================= */

.astralis-inventory-v2__storage {

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 12px;
}


.astralis-inventory-v2__filters {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(82px, 1fr));

    gap: 6px;

    margin-bottom: 10px;
}


.astralis-inventory-v2__filter {

    min-height: 46px;

    border:
        1px solid rgba(71, 139, 164, .38);

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(19, 45, 63, .9),
            rgba(7, 22, 36, .94)
        );

    color: var(--inv-muted);
    
    padding: 4px 5px;

    white-space: normal;

    line-height: 1.1;

    text-align: center;

    overflow: hidden;

    font-size: 9px;

    letter-spacing: -.03em;

    cursor: pointer;
}


.astralis-inventory-v2__filter.is-active {

    border-color:
        var(--inv-line-active);

    color:
        var(--inv-text);

    box-shadow:
        inset 0 0 18px rgba(56, 216, 255, .12),
        0 0 10px rgba(56, 216, 255, .12);
}


/* =========================================================
   RECHERCHE
   ========================================================= */

.astralis-inventory-v2__search {

    margin-bottom: 10px;
}


.astralis-inventory-v2__search input {

    width: 100%;

    box-sizing: border-box;

    min-height: 38px;

    padding: 8px 12px;

    border:
        1px solid rgba(65, 142, 168, .4);

    border-radius: 7px;

    outline: none;

    background:
        rgba(2, 11, 21, .82);

    color:
        var(--inv-text);
}


.astralis-inventory-v2__search input:focus {

    border-color:
        var(--inv-line-active);

    box-shadow:
        0 0 12px rgba(56, 216, 255, .12);
}


/* =========================================================
   GRILLE D'OBJETS
   ========================================================= */

.astralis-inventory-v2__grid {

    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(48px, 1fr));

    grid-auto-rows:
        minmax(48px, 1fr);

    align-content: start;

    gap: 6px;

    overflow-y: auto;

    padding: 2px 4px 2px 2px;
}


.astralis-inventory-v2__slot {

    position: relative;

    min-width: 0;

    aspect-ratio: 1;

    border:
        1px solid rgba(58, 112, 134, .45);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 24, 39, .95),
            var(--inv-slot)
        );

    cursor: pointer;

    transition:
        border-color .12s ease,
        box-shadow .12s ease,
        transform .12s ease;
}


.astralis-inventory-v2__slot:hover {

    border-color:
        rgba(91, 222, 247, .75);

    box-shadow:
        inset 0 0 16px rgba(53, 210, 241, .08);

    transform:
        translateY(-1px);
}


.astralis-inventory-v2__slot.is-selected {

    border-color:
        var(--inv-line-active);

    box-shadow:
        0 0 12px rgba(56, 216, 255, .2),
        inset 0 0 16px rgba(56, 216, 255, .08);
}


.astralis-inventory-v2__slot-quantity {

    position: absolute;

    right: 4px;
    bottom: 3px;

    min-width: 18px;

    padding: 1px 4px;

    border-radius: 5px;

    background:
        rgba(0, 0, 0, .72);

    color:
        #ffffff;

    font-size: 11px;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   DÉTAIL OBJET
   ========================================================= */

.astralis-inventory-v2__details {

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 16px;
}


.astralis-inventory-v2__details-empty {

    margin: auto;

    padding: 30px 20px;

    max-width: 220px;

    line-height: 1.5;

    color:
        var(--inv-muted);

    text-align: center;

    font-size: 13px;
}


.astralis-inventory-v2__details h3 {

    margin:
        0 0 6px;

    color:
        #ffffff;

    font-size:
        20px;
}


.astralis-inventory-v2__details p {

    color:
        #b9d0db;

    line-height:
        1.5;
}


/* =========================================================
   BARRE INFÉRIEURE
   ========================================================= */

.astralis-inventory-v2__footer {

    grid-column:
        1 / -1;

    display: grid;

    grid-template-columns:
        minmax(260px, 1.4fr)
        minmax(180px, .7fr)
        auto;

    gap: 14px;

    align-items: center;

    padding:
        10px 14px;
}


.astralis-inventory-v2__capacity-bar {

    height:
        8px;

    margin-top:
        6px;

    border-radius:
        999px;

    background:
        rgba(1, 8, 16, .88);

    overflow:
        hidden;
}


.astralis-inventory-v2__capacity-fill {

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #20b7dc,
            #65f2ff
        );

    box-shadow:
        0 0 12px rgba(72, 230, 255, .28);
}


.astralis-inventory-v2__credits strong {

    color:
        #ffffff;

    font-size:
        19px;
}


.astralis-inventory-v2__navigation {

    display:
        flex;

    gap:
        8px;
}


/* =========================================================
   INVENTAIRE V2 — TAILLE DE FENÊTRE
   ========================================================= */

#astralis-ui-window
.astralis-window:has(.astralis-inventory-v2) {

    width:
        min(1280px, calc(100vw - 36px));

    height:
        min(780px, calc(100dvh - 30px));

    max-height:
        calc(100dvh - 30px);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;
}


#astralis-ui-window
.astralis-window:has(.astralis-inventory-v2)
.astralis-window-body {

    flex:
        1;

    min-height:
        0;

    padding:
        12px;

    overflow:
        hidden;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:950px) {

    .astralis-inventory-v2 {

        width:
            min(760px, calc(100vw - 40px));

        height:
            auto;

        grid-template-columns:
            1fr 1.5fr;

    }


    .astralis-inventory-v2__details {

        grid-column:
            1 / -1;

        min-height:
            180px;

    }


    .astralis-inventory-v2__footer {

        grid-template-columns:
            1fr;

    }

}


@media(max-width:650px) {

    .astralis-inventory-v2 {

        width:
            calc(100vw - 24px);

        grid-template-columns:
            1fr;

    }


    .astralis-inventory-v2__character {

        min-height:
            330px;

    }


    .astralis-inventory-v2__storage,
    .astralis-inventory-v2__details {

        grid-column:
            auto;

    }


    .astralis-inventory-v2__grid {

        grid-template-columns:
            repeat(5, 1fr);

    }


    .astralis-inventory-v2__filters {

        grid-template-columns:
            repeat(3, 1fr);

    }

}