/* ******************************************************* */
/*                          BODY                           */
/* ******************************************************* */

:root {
    --bg: #0a0a10;
    --surface: #15151f;
    --input-bg: #1c1c28;
    --input-border: #35354a;
    --gold: #e8b64c;
    --gold-bright: #f4d68a;
    --violet: #7c5cff;
    --violet-deep: #4b2fb3;
    --text: #eae8f0;
    --text-muted: #9997ab;
    --error: #ff5470;
}

/* Le template charge Bootstrap/coreCss/app.css avant ce fichier :
   on neutralise ce qui doit l'être pour un rendu plein ecran et sombre. */
body {
    background-color: #000 !important;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    font-size: 1.0em;
}

/* ******************************************************* */
/*                SURCHARGE CORE.css                       */
/* ******************************************************* */

/* *********** NAVBAR ********* */
.clan-navbar {
    margin-bottom: 50px;
}

/* **********   BOUTON RETOUR EN HAUT SUR VIEW ENTITIES  ******* */

#scrollUp {
    background: linear-gradient(135deg, var(--violet), var(--violet-deep));
}

#scrollUp:hover {
    background: linear-gradient(135deg, var(--violet-deep), var(--violet));
}

/* ============================================================
   Barre de récupération des données
   ============================================================ */

.fetch-bar {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: rgba(21, 21, 31, 0.85);
    border: 1px solid rgba(232, 182, 76, 0.25);
    border-radius: 12px;
    padding: 0.55rem 1.25rem;
    backdrop-filter: blur(4px);
}

.fetch-bar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
}

/* En dessous du breakpoint navbar-expand-lg : on sort la barre du
   positionnement absolu pour éviter qu'elle chevauche le bouton toggler,
   et on la place en dessous via l'ordre flex. */
@media (max-width: 991.98px) {
    .navbar-brand {
        order: 1;
    }

    .navbar-toggler {
        order: 2;
    }

    .fetch-bar {
        order: 3;
        position: static;
        transform: none;
        width: 100%;
        margin: 0.75rem 0 0.25rem;
    }

    .navbar-collapse {
        order: 4;
    }

    .fetch-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.fetch-bar-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.fetch-bar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.fetch-bar-dot--ok {
    background: #68d391;
}

.fetch-bar-dot--warn {
    background: #f6e05e;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.fetch-bar-status strong {
    color: var(--text);
}

.fetch-bar-btn {
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.1s;
}

/* Bootstrap pilote le fond des .btn via des variables CSS (--bs-btn-bg,
   --bs-btn-disabled-bg, etc.) avec une spécificité (classe + pseudo-classe)
   plus forte que notre simple .fetch-bar-btn. Sans ce verrouillage, le
   bouton redevient transparent dès qu'il passe en disabled (pendant le
   fetch AJAX). On force donc le dégradé sur tous les états. */
.fetch-bar-btn,
.fetch-bar-btn:hover,
.fetch-bar-btn:focus,
.fetch-bar-btn:focus-visible,
.fetch-bar-btn:active,
.fetch-bar-btn:disabled {
    background: linear-gradient(135deg, #ff5470, #b20522);
    border: none !important;
    color: #fff !important;
}

.fetch-bar-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.fetch-bar-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Thème sombre pour la modale de résultats */
.fetch-modal-content {
    background: var(--surface);
    border: 1px solid rgba(232, 182, 76, 0.25);
    color: var(--text);
}

.fetch-modal-content .modal-header {
    border-bottom: 1px solid rgba(232, 182, 76, 0.15);
}

.fetch-modal-content .modal-title {
    color: var(--gold-bright);
    font-family: 'Roboto';
    font-size: 1.1rem;
}

/* Résultats en badges inline (dans la modale) */
.fetch-home-results {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fetch-home-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(10, 10, 16, 0.6);
    border: 1px solid var(--input-border);
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    transition: color 0.2s, border-color 0.2s;
}

.fetch-home-item.status-ok {
    color: #68d391;
    border-color: #68d391;
}

.fetch-home-item.status-error {
    color: #fc8181;
    border-color: #fc8181;
}

.fetch-home-item.status-not-necessary {
    color: #f6e05e;
    border-color: #f6e05e;
}

.fetch-home-error {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--error);
}

/* ============================================================
   STYLE "DATATABLES" (dataTables.bootstrap5) POUR .viewEntities
   Reproduit sans le plugin : flèches de tri, survol des lignes,
   en-tête sombre, zone de pagination maison.
   ============================================================ */

/* --- En-têtes triables : icônes ▲▼, comme th.sorting ---
   NB : pas de <thead> dans le HTML actuel (le <tr class="table-dark">
   est un enfant direct de <table>), donc on cible directement les <th>,
   sans passer par "thead". */
.viewEntities th a {
    position: relative;
    display: inline-block;
    padding-right: 18px;
    color: inherit;
    text-decoration: none;
}

.viewEntities th a::before,
.viewEntities th a::after {
    position: absolute;
    right: 0;
    font-size: 0.65em;
    line-height: 9px;
    opacity: 0.25;
}

.viewEntities th a::before {
    content: "▲";
    bottom: 55%;
}

.viewEntities th a::after {
    content: "▼";
    top: 55%;
}

/* Colonne actuellement triée : ajouter la classe .sort-asc / .sort-desc
   sur le <th> concerné côté PHP (voir note dans la conversation) pour
   faire ressortir la flèche active en doré, comme sorting_asc/desc. */
.viewEntities th.sort-asc a::before,
.viewEntities th.sort-desc a::after {
    opacity: 0.85;
    color: var(--gold-bright);
}

/* --- En-tête sombre, cohérent avec .clan-members-table --- */
.viewEntities tr.table-dark th {
    --bs-table-bg: var(--violet-deep);
    --bs-table-color: var(--gold-bright);
    --bs-table-border-color: var(--input-border);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Corps du tableau : on aligne "table-light" sur le thème sombre --- */
.viewEntities tr.table-light {
    --bs-table-bg: var(--bg);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--input-border);
}

/* --- Survol des lignes, façon table.dataTable.table-hover (voile doré) ---
   Ciblé sur tr.table-light uniquement (pas tbody, qui n'existe pas non plus
   explicitement) pour ne pas déclencher le survol sur la ligne d'en-tête. */
.viewEntities.table-hover tr.table-light {
    --bs-table-hover-bg: rgba(232, 182, 76, 0.08);
    --bs-table-hover-color: var(--text);
    transition: background-color 0.15s ease;
}

/* --- Zone de pagination maison, façon dataTables_wrapper --- */
.pagination-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 6px 0 1rem;
    color: var(--text-muted);
}

.pagination-minimal .minimal-selector {
    display: flex;
    align-items: center;
}

.pagination-minimal .form-select-sm {
    width: auto;
    display: inline-block;
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

.pagination-minimal .minimal-info {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .pagination-minimal {
        justify-content: center;
        text-align: center;
    }
}


/* ------------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------------ */
.btn-discord {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.btn-database {
    background: linear-gradient(135deg, #298653, #0c8d46);
}

/* Bouton composite : action qui écrit en BDD ET met à jour Discord.
   Dégradé combinant les deux couleurs existantes (violet Discord → vert BDD),
   pour rester cohérent sans introduire de nouvelle couleur. */
.btn-discord-database {
    background: linear-gradient(135deg, #298653 0%, #0c8d46 45%, #7c3aed 55%, #5b21b6 100%);
    /*background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 45%, #0c8d46 55%, #298653 100%);*/
}

.btn-discord,
.btn-database,
.btn-discord-database {
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    transition: opacity 0.2s, transform 0.1s;
}

.btn-discord:hover:not(:disabled),
.btn-database:hover:not(:disabled),
.btn-discord-database:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff;
}

.btn-discord:disabled,
.btn-database:disabled,
.btn-discord-database:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-action {
    background: linear-gradient(135deg, #b8860b, #e8b64c);
    border: none;
    border-radius: 8px;
    color: #0f172a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    transition: opacity 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
}

.btn-action:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #0f172a;
}

.btn-action-outline {
    background: transparent;
    border: 1px solid #e8b64c;
    border-radius: 8px;
    color: #f0c040;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    transition: background 0.2s;
}

.btn-action-outline:hover {
    background: rgba(232, 182, 76, 0.12);
    color: #f0c040;
}

.btn-action-dark {
    background: #2d3748;
    border: 1px solid #4a5568;
    color: #e2e8f0;
}

.btn-action-dark-close {
    background: #f34343;
    border: 1px solid #ff0000;
    color: #e2e8f0;
}

.btn-action-dark:hover:not(:disabled) {
    background: #3d4a5c;
    color: #e2e8f0;
}

.btn-action-dark-close:hover:not(:disabled) {
    background: #ea1919;
    color: #e2e8f0;
}

.btn-return-dashboard {
    margin-bottom: 50px !important;
}

.update-discord {
    color: #fff;
}

/* ------------------------------------------------------------------
   CARTES ACTIONS
   ------------------------------------------------------------------ */
.card-action {
    background: #16213e;
    border: 1px solid #2d3748;
    border-radius: 12px;
    color: #e2e8f0;
}

.card-header {
    background: #1a1a2e;
    border-bottom: 1px solid #2d3748;
    border-radius: 12px 12px 0 0 !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f0c040;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem;
}

/* ------------------------------------------------------------------
   DASHBOARD — SECTIONS ACTIONS
   ------------------------------------------------------------------ */
.clan-action-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #718096;
    margin-bottom: 10px;
    margin-top: 20px;

}

.clan-action-separator {
    border-color: #6f798a;
    margin: 2rem 0 0.5rem 0;
}

.form-hit {
    color: #fff;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}