/* ======================================================================
   CUSTOM.CSS – MantisBT 2.27.x
   Objectif : thème moderne + lisible (palette bleu/gris + bandeaux #47637a)

   ▶ SOMMAIRE (CTRL+F)
   [COULEURS]  : Couleurs à tweaker rapidement (menu gauche / bandeaux / boutons)
   [BODY]      : Fond général + texte (zone centrale)
   [NAVBAR]    : Barre du haut (tout en haut)
   [TITRES]    : Titres H1..H4 (zone centrale)
   [TABLE]     : Tableaux (zone centrale)
   [BOUTONS]   : Boutons principaux (zone centrale)
   [BANDEAUX]  : Bandeaux de titre (widgets / panels / entêtes de tableaux)
   [ISSUES]    : En-tête liste des issues (couleur texte/tri)
   [NOTES]     : Notes de ticket (alternance + lisibilité)
   [SIDEBAR]   : Menu gauche (fond + boutons normal/hover/actif)
   [COLLAPSE]  : Menu gauche réduit (icônes/images centrées)
   ====================================================================== */


/* ======================================================================
   [COULEURS] – À MODIFIER RAPIDEMENT (1 seul endroit)
   Rôle :
   - Centralise les couleurs clés pour ne pas chercher dans tout le fichier.
   Emplacement à l’écran :
   - Affecte l’ensemble du thème, notamment :
     - Menu gauche (fond/hover/actif)
     - Bandeaux de titre (#47637a)
     - Boutons primaires
   ====================================================================== */
:root {
    /* Couleurs Bootstrap (réutilisées par certains composants Mantis / thèmes) */
    --bs-primary: #2563eb;   /* boutons principaux (Créer/Enregistrer...) */
    --bs-secondary: #64748b;
    --bs-success: #16a34a;
    --bs-warning: #d97706;
    --bs-danger: #dc2626;

    /* MENU GAUCHE (colonne à gauche) */
    --mantis-sidebar-bg: #334155;      /* FOND du bandeau gauche */
    --mantis-sidebar-hover: #475569;   /* FOND au survol d’un bouton */
    --mantis-sidebar-active: #47637a;  /* FOND du bouton actif (page courante) */

    /* Texte */
    --mantis-text: #111827;       /* texte principal (zone centrale) */
    --mantis-text-inv: #ffffff;   /* texte sur fond sombre (menu/bandeaux) */
    --mantis-muted: #e5e7eb;      /* texte atténué (liens menu/navbar) */

    /* BANDEAUX (titres de panneaux/widgets + entêtes de tableau) */
    --mantis-header-band: #47637a; /* couleur principale des bandeaux */
}


/* ======================================================================
   [BODY] – FOND GÉNÉRAL + TEXTE
   Rôle :
   - Fond de page + couleur texte par défaut.
   Emplacement à l’écran :
   - Zone centrale (tout ce qui n’est pas navbar/menu gauche).
   ====================================================================== */
body {
    background-color: #f8fafc; /* fond clair général */
    color: var(--mantis-text);
}


/* ======================================================================
   [NAVBAR] – BARRE DU HAUT
   Rôle :
   - Couleur de la barre tout en haut + liens.
   Emplacement à l’écran :
   - Bandeau horizontal supérieur (header).
   ====================================================================== */
.navbar {
    background-color: #1f2937 !important; /* fond navbar */
}
.navbar a {
    color: var(--mantis-muted) !important; /* liens navbar */
}
.navbar a:hover {
    color: var(--mantis-text-inv) !important; /* liens navbar au survol */
}


/* ======================================================================
   [TITRES] – TITRES H1..H4
   Rôle :
   - Harmonise la couleur des titres.
   Emplacement à l’écran :
   - Zone centrale : titres de pages et blocs.
   ====================================================================== */
h1, h2, h3, h4 {
    color: var(--mantis-text);
}


/* ======================================================================
   [TABLE] – TABLEAUX (BASE)
   Rôle :
   - Fond blanc + bordures grises.
   Emplacement à l’écran :
   - Tableaux de listes (issues, rapports, etc.).
   Note :
   - L’entête (thead) est géré dans [BANDEAUX] + [ISSUES].
   ====================================================================== */
.table {
    background-color: #ffffff;
}
.table td, .table th {
    border-color: #e5e7eb;
}


/* ======================================================================
   [BOUTONS] – BOUTONS PRINCIPAUX
   Rôle :
   - Couleur des boutons primaires (Créer, Enregistrer, etc.).
   Emplacement à l’écran :
   - Zone centrale (formulaires).
   À modifier :
   - Change --bs-primary dans [COULEURS]
   ====================================================================== */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: #1d4ed8; /* si tu veux : mets une variable aussi */
}


/* ======================================================================
   [BANDEAUX] – BANDEAUX DE TITRE (BLEU #47637a)
   Rôle :
   - Colore :
     - Titres de widgets/panneaux
     - Entêtes de tableaux (thead)
   Emplacement à l’écran :
   - “Barre de titre” au-dessus des blocs (au centre).
   - Ligne d’entête des tableaux (haut du tableau).
   À modifier :
   - Change --mantis-header-band dans [COULEURS]
   ====================================================================== */

/* [BANDEAUX] Fond + texte */
.widget-header,
.category-title,
.panel-heading,
.table thead,
.table thead th {
    background-color: var(--mantis-header-band) !important;
    color: var(--mantis-text-inv) !important;
    border-color: var(--mantis-header-band) !important;
}

/* [BANDEAUX] Titres internes */
.widget-header h4,
.category-title h4,
.panel-heading h4 {
    color: var(--mantis-text-inv) !important;
}

/* [BANDEAUX] Liens dans les bandeaux */
.widget-header a,
.category-title a,
.panel-heading a {
    color: var(--mantis-muted) !important;
}
.widget-header a:hover,
.category-title a:hover,
.panel-heading a:hover {
    color: var(--mantis-text-inv) !important;
}

/* [BANDEAUX] Bordures des panneaux/widgets */
.panel,
.widget-box {
    border-color: var(--mantis-header-band) !important;
}


/* ======================================================================
   [ISSUES] – LISTE DES ISSUES (ENTÊTE TABLEAU)
   Rôle :
   - Assure que le texte des entêtes de colonnes reste blanc,
     y compris les liens et icônes de tri.
   Emplacement à l’écran :
   - Page “Voir les issues” > en-tête du tableau (ligne du haut).
   ====================================================================== */
.table thead th,
.table thead th a,
.table thead th span {
    color: var(--mantis-text-inv) !important;
}
.table thead th .fa,
.table thead th .glyphicon {
    color: var(--mantis-muted) !important;
}
.table thead th a:hover {
    color: var(--mantis-text-inv) !important;
    text-decoration: underline;
}
.table thead th {
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* ======================================================================
   [NOTES] – NOTES DE TICKET (ALTERNANCE + LISIBILITÉ)
   Rôle :
   - Donne un liseré et une alternance paire/impair sur les notes.
   Emplacement à l’écran :
   - Fiche ticket (issue) > zone commentaires/notes (au centre, vers le bas).
   À modifier :
   - Couleurs alternance : #f9fafb / #eef2f7
   ====================================================================== */

/* Liseré à gauche des notes */
.bugnote,
table.bugnote,
tr.bugnote {
    border-left: 4px solid var(--mantis-header-band);
}

/* Alternance (DIV) */
div.bugnote:nth-of-type(odd)  { background-color: #f9fafb !important; }
div.bugnote:nth-of-type(even) { background-color: #eef2f7 !important; }

/* Alternance (TABLE) */
table.bugnote:nth-of-type(odd)  { background-color: #f9fafb !important; }
table.bugnote:nth-of-type(even) { background-color: #eef2f7 !important; }

/* Alternance (TR) */
tr.bugnote:nth-of-type(odd)  td { background-color: #f9fafb !important; }
tr.bugnote:nth-of-type(even) td { background-color: #eef2f7 !important; }

/* Lisibilité */
.bugnote, .bugnote p,
table.bugnote, table.bugnote p,
tr.bugnote td {
    color: var(--mantis-text) !important;
    line-height: 1.5;
}


/* ======================================================================
   [SIDEBAR] – MENU GAUCHE (FOND + BOUTONS)
   Rôle :
   - Colore le fond du menu gauche et les boutons (normal/hover/actif).
   Emplacement à l’écran :
   - Colonne gauche : navigation principale (Mon affichage, Issues, etc.)
   À modifier :
   - --mantis-sidebar-bg / hover / active dans [COULEURS]
   ====================================================================== */

/* Fond du menu gauche */
.sidebar,
#sidebar,
.sidebar-container,
.navbar-side {
    background-color: var(--mantis-sidebar-bg) !important;
}

/* Boutons/liens du menu gauche */
.sidebar a,
#sidebar a,
.sidebar-container a,
.navbar-side a,
.sidebar .nav > li > a,
#sidebar .nav > li > a,
.nav-sidebar > li > a {
    color: var(--mantis-muted) !important;
    background-color: transparent !important;
    border-radius: 8px;
    margin: 2px 8px;
    padding: 10px 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover boutons (survol) */
.sidebar a:hover,
#sidebar a:hover,
.sidebar-container a:hover,
.navbar-side a:hover,
.sidebar .nav > li > a:hover,
#sidebar .nav > li > a:hover,
.nav-sidebar > li > a:hover {
    background-color: var(--mantis-sidebar-hover) !important;
    color: var(--mantis-text-inv) !important;
    text-decoration: none;
}

/* Bouton actif (page en cours) */
.sidebar li.active > a,
#sidebar li.active > a,
.sidebar-container li.active > a,
.nav-sidebar > li.active > a,
.sidebar .nav > li.active > a,
#sidebar .nav > li.active > a {
    background-color: var(--mantis-sidebar-active) !important;
    color: var(--mantis-text-inv) !important;
    font-weight: 600;
}

/* Icônes menu gauche (même couleur que le texte) */
.sidebar a i,
#sidebar a i,
.nav-sidebar > li > a i,
.sidebar a .fa,
#sidebar a .fa,
.nav-sidebar > li > a .fa,
.sidebar a .glyphicon,
#sidebar a .glyphicon,
.nav-sidebar > li > a .glyphicon {
    color: inherit !important;
}

/* Séparateurs éventuels du menu gauche */
.sidebar hr,
#sidebar hr {
    border-color: rgba(255,255,255,0.08);
}


/* ======================================================================
   [COLLAPSE] – MENU GAUCHE RÉDUIT (ICÔNES/IMAGES CENTRÉES)
   Rôle :
   - Corrige le cadrage des icônes et images quand le menu est réduit.
   Emplacement à l’écran :
   - Menu gauche en mode “réduit” (icônes seules, sans texte).
   À modifier :
   - Taille icônes : font-size (18px)
   - Taille images : width/height (24px)
   ====================================================================== */

/* Icônes (FontAwesome / Glyphicons) : centrage */
.sidebar.sidebar-collapse a i,
.sidebar.sidebar-collapse a .fa,
.sidebar.sidebar-collapse a .glyphicon,
#sidebar.sidebar-collapse a i,
#sidebar.sidebar-collapse a .fa,
#sidebar.sidebar-collapse a .glyphicon,
.sidebar.menu-min a i,
.sidebar.menu-min a .fa,
.sidebar.menu-min a .glyphicon {
    display: inline-block !important;
    width: 24px !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
}

/* Images (<img>) : cadrage “contain” */
.sidebar.sidebar-collapse img,
#sidebar.sidebar-collapse img,
.sidebar.menu-min img {
    display: block !important;
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Boutons en mode réduit : centrés */
.sidebar.sidebar-collapse .nav > li > a,
#sidebar.sidebar-collapse .nav > li > a,
.sidebar.menu-min .nav > li > a,
.nav-sidebar.sidebar-collapse > li > a {
    padding: 10px 0 !important;
    text-align: center !important;
}

/* Cache le texte (si le thème le laisse) */
.sidebar.sidebar-collapse .nav > li > a .menu-text,
#sidebar.sidebar-collapse .nav > li > a .menu-text,
.sidebar.menu-min .nav > li > a .menu-text {
    display: none !important;
}

/* Marges plus compactes en mode réduit */
.sidebar.sidebar-collapse a,
#sidebar.sidebar-collapse a,
.sidebar.menu-min a {
    margin: 2px 6px !important;
    border-radius: 10px;
}

/* ======================================================================
   [NAVBAR-PROJET-LISTE] – Liste déroulante des projets (menu ouvert)
   Rôle :
   - Corrige le contraste DANS la liste (items) quand le sélecteur est ouvert
   Emplacement à l’écran :
   - Barre du haut (haut droite) → clic sur le projet → liste des projets
   ====================================================================== */

/* --------- Cas A : Dropdown Bootstrap / menu (le plus fréquent) --------- */
.navbar .dropdown-menu {
    background-color: #ffffff !important; /* fond de la liste */
    color: #111827 !important;            /* texte par défaut */
    border: 1px solid #cbd5e1 !important;
}

.navbar .dropdown-menu > li > a,
.navbar .dropdown-menu a {
    color: #111827 !important;            /* texte des items */
    background-color: transparent !important;
}

/* Hover sur un item */
.navbar .dropdown-menu > li > a:hover,
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu > li > a:focus,
.navbar .dropdown-menu a:focus {
    background-color: #e2e8f0 !important;
    color: #111827 !important;
}

/* Item actif/sélectionné */
.navbar .dropdown-menu > .active > a,
.navbar .dropdown-menu > .active > a:hover,
.navbar .dropdown-menu > .active > a:focus {
    background-color: #cbd5e1 !important;
    color: #111827 !important;
}

/* --------- Cas B : <select> HTML natif (options) ---------
   Note : selon navigateur/OS, le style peut être limité,
   mais on tente quand même (ça aide sur certains environnements).
----------------------------------------------------------- */
.navbar select option {
    color: #111827 !important;
    background-color: #ffffff !important;
}