/*
 * Surcharges d'apparence de l'application — chargées pour TOUTES les locales
 * (ar comme fr). Les règles propres au sens de lecture vivent dans rtl-custom.css.
 */

body {
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
}

/* ================================================================== *
 * Sidebar : sélection lisible et contenue
 * ------------------------------------------------------------------
 * AdminLTE peint l'item de sous-menu actif en bloc blanc quasi opaque :
 *
 *   [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active
 *   { background-color: rgba(255,255,255,.9); color:#343a40 }
 *
 * soit une spécificité (0,5,0) : d'où le pavé blanc qui tranche avec le
 * thème sombre et déborde visuellement de la colonne. On repasse sur un
 * surlignage discret aux couleurs du thème, avec un liseré d'attaque.
 * Le sélecteur ci-dessous pèse (0,7,0) et l'emporte donc, quel que soit
 * le variant `sidebar-dark-*` choisi dans config/adminlte.php.
 * ================================================================== */

/* Pastille arrondie : le surlignage ne touche plus les bords de la colonne. */
.main-sidebar .nav-sidebar .nav-item > .nav-link {
    border-radius: .25rem;
}

/* Item de premier niveau actif : bleu plein (comportement AdminLTE conservé). */
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55);
}

/* Item de sous-menu actif : surlignage translucide + liseré, plus de pavé blanc.
 * `!important` assumé : AdminLTE décline cet état dans plusieurs variantes de même
 * poids (`nav-legacy`, `nav-flat`), qu'une simple montée en spécificité n'écarte pas. */
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover,
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:focus {
    background-color: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #007bff;
}

/* L'icône suit la couleur du libellé (AdminLTE la laisse en gris sur l'état actif). */
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: inherit !important;
}

/* Survol d'un sous-item inactif : retour discret, sans changement de teinte. */
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

/* Groupe ouvert : le parent reste lisible même quand un enfant est actif. */
.main-sidebar[class*='sidebar-dark-'] .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

/* Icônes de sous-menu : même gabarit que le premier niveau, alignement net. */
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
    width: 1.25rem;
    text-align: center;
    font-size: .9rem;
}

/* En-têtes de section. */
.main-sidebar .nav-sidebar .nav-header {
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .04em;
    opacity: .65;
}

/* ================================================================== *
 * Cartes : en-tête en flex
 * ------------------------------------------------------------------
 * AdminLTE pose un clearfix sur ces conteneurs :
 *
 *   .card-body::after,.card-footer::after,.card-header::after
 *   { display:block; clear:both; content:"" }
 *
 * Dès qu'on leur ajoute `d-flex`, ce pseudo-élément devient un ITEM FLEX
 * à part entière. Avec `justify-content-between` et deux enfants réels
 * (titre + bouton), la répartition se fait donc sur TROIS items : le bouton
 * se retrouve au centre au lieu d'être plaqué au bord. On neutralise le
 * clearfix, inutile en contexte flex.
 * ================================================================== */

.card-header.d-flex::before,
.card-header.d-flex::after,
.card-body.d-flex::before,
.card-body.d-flex::after,
.card-footer.d-flex::before,
.card-footer.d-flex::after {
    display: none;
}

/* Le titre est un item flex : le float d'AdminLTE n'a plus lieu d'être. */
.card-header.d-flex .card-title {
    float: none;
}

/* ================================================================== *
 * Select2 : aligner le gabarit sur les .form-control de Bootstrap 4
 * ------------------------------------------------------------------
 * Le thème par défaut de select2 est calibré pour Bootstrap 3 : sans ces
 * règles, la liste est plus basse que les champs voisins et les bordures
 * ne s'alignent pas sur une même ligne de formulaire.
 * ================================================================== */

.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem);
    padding-left: .75rem;
    padding-right: .75rem;
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem + 2px);
}

/* Champ en erreur : reprendre le rouge de Bootstrap sur le conteneur select2. */
.is-invalid + .select2-container--default .select2-selection--single {
    border-color: #dc3545;
}

/* La liste déroulante doit passer au-dessus des modales AdminLTE. */
.select2-container--open {
    z-index: 1060;
}

/* ================================================================== *
 * Frise d'avancement (statut d'une commande)
 * ------------------------------------------------------------------
 * `inset-inline-start` plutôt que `left` : le connecteur suit le sens de
 * lecture sans règle RTL dédiée.
 * ================================================================== */

.o-steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.o-step {
    flex: 1 1 0;
    position: relative;
    text-align: center;
}

/* Connecteur vers l'étape précédente. */
.o-step::before {
    content: '';
    position: absolute;
    top: 13px;
    inset-inline-start: -50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
}

.o-step:first-child::before {
    display: none;
}

.o-step--done::before {
    background: #007bff;
}

.o-step__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #dee2e6;
    color: #adb5bd;
    font-size: .75rem;
}

.o-step--done .o-step__dot {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

.o-step--current .o-step__dot {
    box-shadow: 0 0 0 4px rgba(0, 123, 255, .25);
}

.o-step__label {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    color: #6c757d;
}

.o-step--done .o-step__label,
.o-step--current .o-step__label {
    color: #343a40;
    font-weight: 600;
}

/* ================================================================== *
 * Impression : ne sortir que le contenu utile
 * ================================================================== */

@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .no-print {
        display: none !important;
    }

    /* Annule les marges de gouttière (posées en !important par rtl-custom.css). */
    .content-wrapper {
        margin: 0 !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* ================================================================== *
 * Divers
 * ================================================================== */

.small-box .icon {
    opacity: .25;
}