/* Habillage MAJ OPTICIEN — fond blanc dominant, accent orange du logo (#ED7D31).
   Chargé après style.css et all-themes.css : les règles ci-dessous les remplacent
   volontairement (certaines en !important pour gagner sur les classes de thème
   AdminBSB déjà scellées en dur sur du rouge). */

body {
    background-color: #FFFFFF;
    color: #1A1712;
}

/* ---------- Barre du haut ---------- */
.navbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #ECE6DC;
    box-shadow: 0 1px 2px rgba(26, 23, 18, .05) !important;
}
.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:active,
.navbar .navbar-brand:focus {
    color: #1A1712 !important;
    font-weight: 700;
}
.navbar .bars {
    color: #1A1712 !important;
}
.navbar .nav > li > a {
    color: #4A453D !important;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    background-color: #F8F4EE !important;
}
.label-count {
    background-color: #ED7D31 !important;
    top: -2px !important;
    right: -2px !important;
    font-weight: 700;
}

/* Icônes de la barre du haut (recherche, notifications) : boutons ronds bien visibles */
.navbar .navbar-right > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 14px !important;
    padding: 0 !important;
    border-radius: 50%;
    background-color: #F8F4EE;
}
.navbar .navbar-right > li > a:hover,
.navbar .navbar-right > li > a:focus {
    background-color: #FCE7D4 !important;
}
.navbar .navbar-right > li > a .material-icons-outlined {
    color: #1A1712 !important;
    font-size: 22px;
}

/* ---------- Barre latérale ---------- */
.sidebar {
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    border-right: 1px solid #ECE6DC;
}
.sidebar .user-info {
    background-image: none !important;
    background-color: #FCE7D4 !important;
    border-bottom: 1px solid #ECE6DC;
}
.sidebar .user-info .info-container .name,
.sidebar .user-info .info-container .email,
.sidebar .user-info .info-container .user-helper-dropdown {
    color: #1A1712 !important;
}
.sidebar .menu .list a {
    color: #7A7369;
}
.sidebar .menu .list .header {
    background: #F8F4EE;
    color: #9A9186;
}
.sidebar .menu .list li.active > :first-child i,
.sidebar .menu .list li.active > :first-child span {
    color: #ED7D31 !important;
}
.sidebar .legal {
    border-top: 1px solid #ECE6DC;
}
.sidebar .legal .copyright a {
    color: #ED7D31 !important;
}

/* ---------- Boutons ---------- */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #ED7D31 !important;
}

/* ---------- Cartes / info-box : coins plus doux, ombre plus légère ---------- */
.card,
.info-box,
.info-box-2 {
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(26, 23, 18, .04), 0 6px 18px -10px rgba(26, 23, 18, .16) !important;
    overflow: hidden;
}

/* ---------- Couleurs des indicateurs du tableau de bord ----------
   bg-pink → orange (accent de marque), bg-light-green → vert (soldé),
   bg-orange → rouge (attire l'attention : factures non soldées, retards) */
.bg-pink {
    background-color: #ED7D31 !important;
}
.bg-light-green {
    background-color: #1F8A4C !important;
}
.bg-orange {
    background-color: #D14343 !important;
}
.bg-black {
    background-color: #1A1712 !important;
}

/* ---------- Liens génériques ---------- */
a {
    color: #C8621F;
}

/* ---------- Pages de connexion / inscription / mot de passe oublié ---------- */
.login-page,
.signup-page,
.fp-page {
    background-color: #FFFFFF !important;
}
.login-page .login-box .logo a,
.login-page .login-box .logo small,
.signup-page .signup-box .logo a,
.signup-page .signup-box .logo small,
.fp-page .fp-box .logo a,
.fp-page .fp-box .logo small {
    color: #1A1712 !important;
}
.login-page .login-box a,
.signup-page .signup-box a,
.fp-page .fp-box a {
    color: #ED7D31;
}
.login-page .card,
.signup-page .card,
.fp-page .card {
    border: 1px solid #ECE6DC;
}

/* ---------- Page de connexion : photo plein écran (desktop et mobile) ---------- */
body.login-photo-page {
    margin: 0;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
body.login-photo-page .login-box {
    width: 100%;
    max-width: 360px;
}
body.login-photo-page .card {
    border: none;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5) !important;
}
body.login-photo-page .logo a,
body.login-photo-page .logo small {
    color: #FFFFFF;
}
body.login-photo-page a {
    color: #ED7D31;
}
body.login-photo-page #logo {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}

/* ---------- Indicateur de chargement (tableaux DataTables + zones personnalisées) ----------
   Utilisé sur toute page qui charge des données via AJAX, pour que l'attente soit visible
   au lieu de laisser un tableau vide/figé. */
@keyframes majOptSpin {
    to { transform: rotate(360deg); }
}
.dataTables_wrapper {
    position: relative;
}
/* Important : ne JAMAIS mettre "display" en !important ici. DataTables affiche/masque cet
   élément lui-même en changeant son style inline (display:none / display:block) — un
   !important sur "display" dans cette feuille l'emporterait sur ce changement inline et
   empêcherait le voile de se refermer, quoi que fasse DataTables. */
.dataTables_processing {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 120px;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .92);
    z-index: 20;
    font-size: .95rem;
    font-weight: 600;
    color: #1A1712;
    text-align: center;
    line-height: 120px;
}
.dataTables_processing:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    margin-right: .7rem;
    border: 3px solid #ECE6DC;
    border-top-color: #ED7D31;
    border-radius: 50%;
    animation: majOptSpin .8s linear infinite;
}

/* Squelette de chargement (chiffres/lignes qui n'ont pas encore leur valeur réelle) : un
   dégradé qui glisse doucement, pour signaler "en cours" sans bloquer l'affichage de la page
   comme le ferait un spinner plein écran. Utilisé sur le tableau de bord (chargement AJAX). */
@keyframes majOptSkeleton {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, #ECE6DC 25%, #F8F4EE 37%, #ECE6DC 63%);
    background-size: 400px 100%;
    animation: majOptSkeleton 1.4s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    vertical-align: middle;
}

/* Classe réutilisable pour les zones de chargement construites à la main (hors DataTables) */
.maj-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 2.5rem 1rem;
    color: #7A7369;
    font-weight: 600;
}
.maj-loading:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ECE6DC;
    border-top-color: #ED7D31;
    border-radius: 50%;
    animation: majOptSpin .8s linear infinite;
}