/* =====================================================================
   equipmentPanel.css
   Refonte de la zone centrale de l'inventaire (Direction A : "Vaisseau
   central"). Vaisseau au milieu, 4 équipements disposés autour, hotbar
   d'armes numéroté avec arme active mise en valeur, bouton Loot filter
   intégré.

   Ce fichier est chargé EN DERNIER pour gagner la cascade. Les !important
   ne servent qu'à neutraliser les anciennes règles responsive (souvent
   en !important) de inventaire.css / menuIG.css.
   ===================================================================== */

/* ---- Largeur de la colonne centrale (élargie) ---------------------- */
#inventoryTab .inventory-layout {
    grid-template-columns:
        minmax(240px, 23%)
        minmax(196px, 18%)
        minmax(0, 1fr) !important;
}

/* ---- Conteneur ---------------------------------------------------- */
#inventoryTab #characterSheet.paperdoll-layout {
    --pd-slot: clamp(48px, 5vw, 70px);
    --pd-accent: #19e3e3;
    --pd-ghost: rgba(150, 205, 230, 0.30);
    --pd-label: rgba(176, 226, 244, 0.72);
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(10px, 1.4vh, 18px);
    padding: 8px 12px 14px;
}

#inventoryTab #characterSheet.paperdoll-layout > h3 {
    display: none !important;
}

#inventoryTab #characterSheet.paperdoll-layout #equipmentSlots {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(12px, 1.6vh, 20px);
    width: 100%;
    margin: 0;
}

/* ---- Titres de section (Équipements / Armes) --------------------- */
#inventoryTab #characterSheet.paperdoll-layout .equipement_container,
#inventoryTab #characterSheet.paperdoll-layout .weapon_container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

#inventoryTab #characterSheet.paperdoll-layout .equipement_container > h3,
#inventoryTab #characterSheet.paperdoll-layout .weapon_container > h3 {
    margin: 0;
    padding: 6px 10px 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: rgba(150, 210, 232, 0.70);
    border-bottom: 1px solid rgba(90, 200, 230, 0.16);
}

/* ===================================================================
   "Paper-doll" : vaisseau au centre, 4 équipements autour
   =================================================================== */
#inventoryTab #characterSheet.paperdoll-layout .pd-grid {
    display: grid !important;
    grid-template-columns: 1fr minmax(0, 1.3fr) 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ".    pd-top    ."
        "pd-l pd-ship pd-r"
        ".    pd-bot    .";
    align-items: center;
    justify-items: center;
    gap: clamp(14px, 1.8vh, 22px) 6px;
    width: 100%;
    margin: 2px 0 0;
}

#inventoryTab #characterSheet.paperdoll-layout .pd-grid .equipment-slot[data-type="cockpit"]    { grid-area: pd-top; }
#inventoryTab #characterSheet.paperdoll-layout .pd-grid .equipment-slot[data-type="coque"]      { grid-area: pd-l; }
#inventoryTab #characterSheet.paperdoll-layout .pd-grid .equipment-slot[data-type="scanner"]    { grid-area: pd-r; }
#inventoryTab #characterSheet.paperdoll-layout .pd-grid .equipment-slot[data-type="propulsion"] { grid-area: pd-bot; }

/* ---- Vaisseau au centre ----------------------------------------- */
#inventoryTab #characterSheet.paperdoll-layout #characterBackground.pd-ship {
    grid-area: pd-ship;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 42%, rgba(34, 174, 225, 0.16), transparent 62%),
        rgba(4, 14, 21, 0.45);
    border: 1px solid rgba(90, 200, 230, 0.14);
    overflow: hidden;
}

#inventoryTab #characterSheet.paperdoll-layout #characterBackground.pd-ship #characterImage {
    display: block !important;
    width: 78% !important;
    height: 78% !important;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
    opacity: 0.96;
}

#inventoryTab #characterSheet.paperdoll-layout #characterBackground.pd-ship #niveau_joueur {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block !important;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: #d9faff;
    background: rgba(2, 18, 26, 0.78);
    border: 1px solid rgba(90, 200, 230, 0.30);
    border-radius: 999px;
    z-index: 4;
}

/* ===================================================================
   Slots d'équipement (autour du vaisseau)
   =================================================================== */
#inventoryTab #characterSheet.paperdoll-layout .pd-grid .equipment-slot {
    flex: none;
    width: var(--pd-slot) !important;
    height: var(--pd-slot) !important;
    min-width: var(--pd-slot) !important;
    min-height: var(--pd-slot) !important;
    max-width: var(--pd-slot) !important;
    max-height: var(--pd-slot) !important;
    aspect-ratio: 1 / 1;
    overflow: visible;               /* laisse passer le libellé sous le slot */
    border-width: 2px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

/* Libellé de rôle toujours visible, sous le slot (via data-slotname) */
#inventoryTab #characterSheet.paperdoll-layout .pd-grid .equipment-slot::after {
    content: attr(data-slotname);
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    color: var(--pd-label);
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Icône "fantôme" du type quand le slot est vide */
#inventoryTab #characterSheet.paperdoll-layout .equipment-slot .slot-ghost {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 52%;
    height: 52%;
    background-color: var(--pd-ghost);
    -webkit-mask: center / contain no-repeat var(--ghost-icon, none);
    mask: center / contain no-repeat var(--ghost-icon, none);
    pointer-events: none;
}

#inventoryTab #characterSheet.paperdoll-layout .equipment-slot[data-type="cockpit"] {
    --ghost-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15a9 9 0 0 1 18 0'/%3E%3Cpath d='M2 15h20'/%3E%3Cpath d='M12 6v3'/%3E%3C/svg%3E");
}
#inventoryTab #characterSheet.paperdoll-layout .equipment-slot[data-type="coque"] {
    --ghost-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l-8 3v6c0 4 3 6 8 9 5-3 8-5 8-9V6z'/%3E%3C/svg%3E");
}
#inventoryTab #characterSheet.paperdoll-layout .equipment-slot[data-type="propulsion"] {
    --ghost-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3 4 5 6 5 9a5 5 0 0 1-10 0c0-2 1-3 2-4 0 1.2 1 2 2 2 0-2.5-1-4.5 1-7z'/%3E%3C/svg%3E");
}
#inventoryTab #characterSheet.paperdoll-layout .equipment-slot[data-type="scanner"] {
    --ghost-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 1 9-9'/%3E%3Cpath d='M12 12l6-4'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* Le libellé "-vide-" éventuel hérité ne doit plus s'afficher */
#inventoryTab #characterSheet.paperdoll-layout .equipment-slot > span:not(.slot-ghost):not(.weapon-num-badge) {
    display: none;
}

/* ===================================================================
   Hotbar d'armes
   =================================================================== */
#inventoryTab #characterSheet.paperdoll-layout .weapon-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border-radius: 12px;
    background: rgba(2, 12, 18, 0.45);
    border: 1px solid rgba(90, 200, 230, 0.12);
}

#inventoryTab #characterSheet.paperdoll-layout .weapon-row .equipment-slot {
    flex: none;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-width: 2px;
    border-radius: 9px;
}

/* Numéro de slot (1-4) en haut à gauche */
#inventoryTab #characterSheet.paperdoll-layout .weapon-row .equipment-slot .weapon-num-badge {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: rgba(210, 240, 250, 0.55);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 5;
}

/* ---- Rareté : box-shadow du slot selon la rareté de l'arme équipée -- */
.equipment-slot.common:has(img)    { filter: drop-shadow(0 0 10px rgba(200,200,200,0.65)); }
.equipment-slot.uncommon:has(img)  { filter: drop-shadow(0 0 10px rgba(0,255,0,0.72)); }
.equipment-slot.rare:has(img)     { filter: drop-shadow(0 0 12px rgba(0,110,255,0.78)); }
.equipment-slot.epic:has(img)      { filter: drop-shadow(0 0 14px rgba(195,0,195,0.82)); }
.equipment-slot.legendary:has(img) { filter: drop-shadow(0 0 16px rgba(255,0,0,0.82)); }
.equipment-slot.unique:has(img)    { filter: drop-shadow(0 0 20px rgba(255,165,0,0.88)); }

/* ---- Drag : forcer le highlight même sur l'arme active -- */
#inventoryTab #characterSheet.paperdoll-layout .weapon-row .equipment-slot.active-weapon.highlight {
    border-color: rgb(240,240,240) !important;
}

/* ---- Arme active : anneau cyan animé (réactive l'effet ::before) -- */
#inventoryTab #characterSheet.paperdoll-layout .weapon-row .equipment-slot.active-weapon {
    border-color: transparent !important;
}

#inventoryTab #characterSheet.paperdoll-layout .weapon-row .equipment-slot.active-weapon::before {
    background: conic-gradient(
        from 0deg,
        transparent 0 62%,
        rgba(25, 227, 227, 0.95) 80%,
        #bdfdfd 92%,
        transparent 100%
    );
}

#inventoryTab #characterSheet.paperdoll-layout .weapon-row .equipment-slot.active-weapon .weapon-num-badge {
    color: #eafeff;
}

/* ===================================================================
   Bouton "Loot filter"
   =================================================================== */
#inventoryTab #characterSheet.paperdoll-layout .loot-filter-btn {
    position: relative;
    width: 100% !important;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.10em;
    background: rgba(2, 16, 23, 0.55);
    border: 1px solid rgba(90, 200, 230, 0.28);
}

#inventoryTab #characterSheet.paperdoll-layout .loot-filter-btn .lf-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#inventoryTab #characterSheet.paperdoll-layout .loot-filter-btn .lf-icon::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
}

#inventoryTab #characterSheet.paperdoll-layout .loot-filter-btn .lf-badge {
    position: absolute;
    top: 50%;
    right: 10px;
    bottom: auto;
    transform: translateY(-50%);
    background: var(--pd-accent);
    color: #04342c;
    border: none;
    font-weight: 800;
}

/* ---- Petits écrans : on resserre un peu --------------------------- */
@media (max-width: 1180px), (max-height: 720px) {
    #inventoryTab #characterSheet.paperdoll-layout {
        --pd-slot: clamp(42px, 4.4vw, 58px);
    }
    #inventoryTab .inventory-layout {
        grid-template-columns:
            minmax(210px, 23%)
            minmax(180px, 19%)
            minmax(0, 1fr) !important;
    }
}