/*
 * FICHIER : wiki\wiki.css
 * RÔLE : À documenter
 * TABLES SQL : -
 * ÉTAT : En test
 * DÉPENDANCES : -
 */

.item-page { max-width: 900px; margin: 150px auto 20px; color: #eee; padding: 0 20px; }

/* Header Style */
.item-header { display: flex; align-items: center; gap: 25px; margin-bottom: 30px; background: #252525; padding: 30px; border-radius: 12px; border-bottom: 4px solid #FF6B35; }
.item-header img { width: 96px; height: 96px; background: #1a1a1a; padding: 10px; border-radius: 8px; border: 1px solid #444; }
.item-header h1 { margin: 0; font-size: 2.8rem; color: #fff; }

/* Sections Verticales */
.wiki-section { background: #252525; border-radius: 12px; border: 1px solid #333; margin-bottom: 30px; overflow: hidden; }
.wiki-section h3 { background: #2d2d2d; margin: 0; padding: 15px 25px; font-size: 1.3rem; border-bottom: 2px solid #FF6B35; display: flex; align-items: center; gap: 12px; }

/* Listes d'items (Loot & Récolte) */
.data-list { padding: 10px 20px; max-height: 500px; overflow-y: auto; }
.data-list::-webkit-scrollbar { width: 8px; }
.data-list::-webkit-scrollbar-track { background: #1a1a1a; }
.data-list::-webkit-scrollbar-thumb { background: #FF6B35; border-radius: 4px; }
.data-row { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #333; gap: 20px; }
.data-row:last-child { border-bottom: none; }
.data-row img { width: 48px; height: 48px; object-fit: contain; background: #1a1a1a; border-radius: 4px; padding: 5px; }
.data-info { flex-grow: 1; }
.data-name { display: block; font-weight: bold; font-size: 1.1rem; color: #fff; }
.data-tech { font-size: 0.8rem; color: #666; font-family: monospace; }

/* Rareté Badges */
.rarity-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; }

/* Table POI */
.poi-table { width: 100%; border-collapse: collapse; }
.poi-table td, .poi-table th { padding: 15px 25px; text-align: left; border-bottom: 1px solid #333; }
.poi-table th { background: #1e1e1e; color: #FF6B35; text-transform: uppercase; font-size: 0.8rem; }
/* Conteneur scrollable pour les POI */
.poi-scroll-container {
    max-height: 500px; overflow-y: auto; border-top: 1px solid #333;
}

/* Personnalisation de la barre de défilement (Jarvis Style) */
.poi-scroll-container::-webkit-scrollbar {
    width: 8px;
}
.poi-scroll-container::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.poi-scroll-container::-webkit-scrollbar-thumb {
    background: #FF6B35;
    border-radius: 4px;
}


.poi-page {max-width: 900px; margin: 150px auto 20px; color: #eee; padding: 20px;}

.poi-header {background: #252525; padding: 30px; border-radius: 12px; border-bottom: 4px solid #3498db; margin-bottom: 30px;}
.poi-header h1 {margin: 0; font-size: 2.5rem;}

.poi-summary {background: rgba(52, 152, 219, 0.05); border-left: 4px solid #3498db; padding: 20px; margin-bottom: 30px; border-radius: 0 8px 8px 0; line-height: 1.6;}
.poi-summary p {margin: 0; font-size: 1.1rem; color: #ddd;};

.video-integration {margin-bottom: 30px; background: #000; padding: 15px; border-radius: 12px; border: 1px solid #ff0000;}
.video-integration h3 {color: #ff0000; margin-top: 0;}
.video-integration iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px;}

.scroll-box {max-height: 600px; overflow-y: auto; padding-right: 10px;}
.scroll-box::-webkit-scrollbar { width: 6px; }
.scroll-box::-webkit-scrollbar-thumb { background: #3498db; border-radius: 10px; }

.wiki-section{background: #252525; border-radius: 12px; padding: 20px;}

/* Rarity badges */
.rarity-very-common {
    color: #27ae60;
}

.rarity-uncommon {
    color: #f1c40f;
}

.rarity-rare {
    color: #e74c3c;
}

/* Empty state messages */
.empty-container-message {
    padding: 20px;
    color: #666;
}

.empty-table-message {
    text-align: center;
    padding: 20px;
}

/* Data display styling */
.data-cell-right {
    text-align: right;
}

.item-count {
    color: #FF6B35;
    font-weight: bold;
}

.text-muted-small {
    color: #666;
    font-size: 0.9rem;
}

/* Link styling */
.poi-link {
    color: #FFF;
    text-decoration: none;
}

.poi-link:hover {
    text-decoration: underline;
}

/* Occurrence count styling */
.occurrence-count {
    color: #3498db;
}

.wiki-container {
    max-width: 1000px;
    margin: 150px auto 20px;
    padding: 0 20px;
    color: #e0e0e0;
}

.category-section {
    /*margin-top: 30px;*/
    background: #252525;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
    margin-bottom: 20px;
}

.category-header {
    background: #2d2d2d;
    padding: 15px 25px;
    border-bottom: 2px solid #e67e22;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.category-header img { width: 96px; height: 96px; background: #1a1a1a; padding: 10px; border-radius: 8px; border: 1px solid #444; }

.category-header h2 {margin: 0; font-size: 1.4rem; color: #fff; display: flex; align-items: center; gap: 15px; }
.category-header h3 {margin: 0; font-size: 1.4rem; color: #fff; display: flex; align-items: center; gap: 15px; }

.item-row-container {
    display: flex;
    flex-wrap: wrap; /* On garde un wrap pour ne pas avoir une liste infinie en hauteur */
    padding: 20px;
    gap: 10px;
}

.item-link {
    display: flex;
    align-items: center;
    width: calc(33.33% - 10px); /* 3 items par ligne pour un bon équilibre */
    padding: 10px;
    background: #1e1e1e;
    border-radius: 6px;
    border: 1px solid #333;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.item-link:hover {
    background: #333;
    border-color: #e67e22;
    transform: translateX(5px);
}

.item-link img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    object-fit: contain;
}

.item-link span {
    color: #ddd;
    font-weight: 500;
}

.wiki-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    color: #888;
}

.wiki-breadcrumb li {
    display: flex;
    align-items: center;
}

.wiki-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.wiki-breadcrumb a:hover {
    text-decoration: underline;
}

.wiki-breadcrumb .sep {
    margin: 0 10px;
    color: #ccc;
}

/********************************************
/* STATS
/********************************************
    /* Conteneur principal */
    .stats-container {
        margin-top: 30px;
        overflow-x: auto;
        font-family: 'Segoe UI', Tahoma, sans-serif;
        margin-bottom: 20px;
    }

    /* Titre de section */
    .stats-title {
        color: #64c8ff;
        text-transform: uppercase;
        font-size: 1.1em;
        margin-bottom: 15px;
        padding-left: 10px;
    }

    /* Table de base */
    .stats-table {
        width: 100%;
        border-collapse: collapse;
        background: #1a1a1a;
        color: #eee;
        border: 1px solid #333;
    }

    /* En-tête */
    .stats-table thead tr {
        background: #222;
        text-transform: uppercase;
        font-size: 0.85em;
        letter-spacing: 1px;
    }

    .stats-table th {
        padding: 12px;
        border-bottom: 2px solid #64c8ff;
        text-align: center;
    }

    .stats-table th.col-stat {
        text-align: left;
        width: 200px;
    }

    /* Cellules et lignes */
    .stats-table td {
        padding: 12px;
        border-bottom: 1px solid #222;
    }

    .row-highlight {
        background: rgba(255, 255, 255, 0.02);
    }

    .stat-label {
        font-weight: 500;
        color: #64c8ff;
    }

    .stat-fixed-val {
        color: #aaa;
        font-style: italic;
    }

    /* Évolutions et Paliers */
    .cell-center {
        text-align: center;
    }

    .quality-max {
        color: #ffac1c;
        font-weight: bold;
        background: rgba(255, 172, 28, 0.05);
    }

    /* Sections de sous-titres dans la table */
    .table-section-divider {
        background: #222;
    }

    .table-section-divider td {
        padding: 8px 12px;
        font-size: 0.75em;
        text-transform: uppercase;
        color: #888;
        letter-spacing: 1px;
    }

    /* DPS spécifique */
    .dps-row {
        background: rgba(100, 200, 255, 0.02);
    }

    .dps-label {
        font-size: 0.85em;
        color: #aaa;
        font-style: italic;
    }

    .dps-tag {
        color: #4CAF50;
        font-weight: bold;
    }

    .dps-value {
        font-size: 0.9em;
        opacity: 0.8;
    }

    .unit-small {
        font-size: 0.7em;
    }

    /* Note d'information */
    .stats-note {
        margin-top: 10px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border-left: 3px solid #888;
        font-size: 0.85em;
        color: #aaa;
        font-style: italic;
    }

    .info-icon {
        color: #64c8ff;
    }

/*******************************************
/* RECIPE
/*******************************************/
    .recipe-title {
        color: #ffac1c;
        text-transform: uppercase;
        font-size: 1.1em;
        margin-bottom: 15px;
        padding-left: 10px;
    }
    /* Configuration de base de la table */
    .recipe-table {
        width: 100%;
        border-collapse: collapse;
        background: #1a1a1a;
        color: #eee;
        border: 1px solid #333;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-bottom: 20px;
    }

    /* En-tête */
    .recipe-table thead tr {
        background: #222;
        text-transform: uppercase;
        font-size: 0.85em;
        letter-spacing: 1px;
    }

    .recipe-table th {
        padding: 12px;
        border-bottom: 2px solid #ffac1c;
        text-align: center;
    }

    .recipe-table th.col-ingredient {
        text-align: left;
    }

    /* Cellules générales */
    .recipe-table td {
        padding: 8px;
        border-bottom: 1px solid #222;
    }

    /* Colonne icône */
    .cell-icon {
        width: 45px;
    }

    .cell-icon img {
        width: 32px;
        height: 32px;
        display: block;
    }

    /* Libellés */
    .ing-label {
        font-weight: 500;
    }

    .cell-amount {
        text-align: center;
    }

    /* Ligne Spécifique : Livre / Magazine */
    .row-book {
        background: rgba(255, 172, 28, 0.1);
        border-top: 1px solid #333;
    }

    .book-label {
        font-weight: bold;
        color: #ffac1c;
    }

    .book-level {
        text-align: center;
        font-weight: bold;
        color: #ffac1c;
    }

    /* Ligne Spécifique : Compétence */
    .row-skill {
        background: rgba(100, 200, 255, 0.05);
        font-size: 0.9em;
    }

    .skill-text {
        color: #999;
    }

    .skill-highlight {
        color: #64c8ff;
    }

    .skill-desc {
        font-style: italic;
        margin-left: 10px;
    }

    /* Conteneur pour le défilement mobile */
    .crafting-container {
        margin-top: 30px;
        overflow-x: auto;
    }

/*******************************************
/* SIDEBAR & WIDGET MENU
/*******************************************/

/* Le conteneur du Widget */
.widget_nav_menu {
    background: #252525;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Le titre du Widget (ex: "Catégories") */
.widget-title {
    background: #2d2d2d;
    color: #FF6B35; /* Ton orange signature */
    margin: 0;
    padding: 15px 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #FF6B35;
    font-family: 'Courier New', Courier, monospace;
}

/* La liste du menu */
.widget_nav_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_nav_menu ul li {
    border-bottom: 1px solid #333;
    transition: all 0.2s ease;
}

.widget_nav_menu ul li:last-child {
    border-bottom: none;
}

/* Les liens du menu */
.widget_nav_menu ul li a {
    display: block;
    padding: 12px 20px;
    color: #bbb;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border-left: 0 solid #FF6B35;
}

/* État de survol (Hover) */
.widget_nav_menu ul li a:hover {
    background: #1a1a1a;
    color: #fff;
    padding-left: 25px; /* Petit décalage fluide */
    border-left: 4px solid #FF6B35;
}

/* Marqueur pour la page active (si l'utilisateur est déjà dans cette catégorie) */
.widget_nav_menu ul li.current-menu-item a {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
    border-left: 4px solid #FF6B35;
    font-weight: bold;
}
.widget-title::before {
    content: "●";
    color: #FF6B35;
    margin-right: 10px;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Adaptabilité Mobile */
@media (max-width: 768px) {
    .item-link { width: calc(50% - 10px); }
}
@media (max-width: 480px) {
    .item-link { width: 100%; }
}