/* ============================================================================
   CLARIS v3 — Phase H+ : CSS DE LISIBILITÉ GLOBALE
   ============================================================================
   Ce fichier est chargé EN DERNIER dans layout.php pour avoir la priorité
   maximale (sans recourir massivement à !important).

   OBJECTIF : garantir un contraste minimum dans toute l'application.
   - Texte foncé (#0f172a-#475569) sur fonds clairs (blanc, gris très clair)
   - Texte clair (#ffffff-#f1f5f9) sur fonds foncés (bleu, vert, rouge...)
   - Aucune combinaison "blanc sur blanc" ou "noir sur noir"

   Ce CSS surcharge ponctuellement Argon Dashboard / Bootstrap quand
   leurs valeurs par défaut produisent des contrastes trop faibles.
   ========================================================================= */

/* =========================================================================
   1. PALETTE DE RÉFÉRENCE — CLARIS
   ========================================================================= */
:root {
    --claris-text-strong: #0f172a;       /* titres, valeurs importantes */
    --claris-text-default: #1f2d4a;      /* texte standard */
    --claris-text-muted: #475569;        /* texte secondaire */
    --claris-text-soft: #64748b;         /* labels, métadonnées */
    --claris-text-disabled: #94a3b8;     /* texte désactivé (mais lisible) */

    --claris-text-on-dark: #ffffff;      /* texte sur fond foncé */
    --claris-text-on-dark-soft: #e2e8f0; /* texte secondaire sur fond foncé */

    --claris-bg-base: #ffffff;
    --claris-bg-soft: #f8fafc;
    --claris-bg-muted: #f1f5f9;
    --claris-bg-strong: #e2e8f0;

    --claris-border-soft: #e2e8f0;
    --claris-border-default: #cbd5e1;
}

/* =========================================================================
   2. CORPS DE TEXTE — règle de base
   ========================================================================= */
body {
    color: var(--claris-text-default);
}

p, span, label, dd, dt, li, td, th, small, time, figcaption {
    color: inherit;
}

/* Liens visibles */
a {
    color: #2563eb;
    text-decoration: none;
}
a:hover, a:focus {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Liens dans cartes/boutons : on laisse leur classe gérer */
.btn a, .card a, .nav-link a {
    color: inherit;
}

/* =========================================================================
   3. TITRES — toujours bien contrastés
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fc-page-bg-color);
}

/* Sur fond foncé (bg-primary, bg-dark, gradient, etc.) */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3, .bg-gradient-primary h4, .bg-gradient-primary h5, .bg-gradient-primary h6,
.bg-gradient-dark h1, .bg-gradient-dark h2, .bg-gradient-dark h3, .bg-gradient-dark h4, .bg-gradient-dark h5, .bg-gradient-dark h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6 {
    color: var(--claris-text-on-dark);
}

/* =========================================================================
   4. CARTES (CARD) — texte foncé sur fond blanc
   ========================================================================= */
.card,
.card-body,
.card-header:not(.bg-primary):not(.bg-dark):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-warning):not([class*="bg-gradient"]),
.card-footer:not(.bg-primary):not(.bg-dark) {
    color: var(--claris-text-default);
}

.card .text-uppercase,
.card .text-sm,
.card .text-xs {
    color: var(--claris-text-muted);
}

.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6 {
    color: var(--claris-text-strong);
}

/* =========================================================================
   5. CHAMPS DE FORMULAIRE
   ========================================================================= */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
textarea,
select {
    color: var(--claris-text-strong);
    background-color: var(--claris-bg-base);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--claris-text-soft);
    opacity: 1;
}

/* Champs disabled : lisibles, pas trop pâles */
.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--claris-bg-muted);
    color: var(--claris-text-muted);
    opacity: 1;
}

/* Labels */
.form-label,
.form-control-label,
label {
    color: var(--claris-text-default);
    font-weight: 500;
}

/* Texte d'aide */
.form-text,
.help-block,
small.text-muted {
    color: var(--claris-text-soft) !important;
}

/* =========================================================================
   6. BOUTONS — couleurs garanties
   ========================================================================= */
.btn {
    color: #fff;
}

/* Boutons clairs (light, default, outline) → texte foncé */
.btn.btn-light,
.btn.btn-outline-secondary,
.btn.btn-outline-primary,
.btn.btn-outline-success,
.btn.btn-outline-danger,
.btn.btn-outline-warning,
.btn.btn-outline-info,
.btn.btn-outline-dark,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    color: var(--claris-text-strong);
    background-color: var(--claris-bg-base);
}

/* Fix #4 — Couleurs sémantiques au repos pour outline-success/danger/warning,
   texte blanc au survol. Empêche le blanc-sur-blanc de "Restaurer compte". */
.btn.btn-outline-success,
.btn-outline-success {
    color: #16a34a;
    border-color: #16a34a;
    background-color: transparent;
}
.btn.btn-outline-success:hover,
.btn.btn-outline-success:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}

.btn.btn-outline-danger,
.btn-outline-danger {
    color: #dc2626;
    border-color: #dc2626;
    background-color: transparent;
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

.btn.btn-outline-warning,
.btn-outline-warning {
    color: #d97706;
    border-color: #d97706;
    background-color: transparent;
}
.btn.btn-outline-warning:hover,
.btn.btn-outline-warning:focus,
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #d97706;
    color: #ffffff;
    border-color: #d97706;
}

/* Boutons foncés → texte blanc IMPÉRATIF */
.btn.bg-primary,
.btn.bg-dark,
.btn.bg-success,
.btn.bg-danger,
.btn.bg-info,
.btn.bg-warning,
.btn[class*="bg-gradient"],
.btn-primary,
.btn-success,
.btn-danger,
.btn-info,
.btn-dark {
    color: var(--claris-text-on-dark);
}

.btn.bg-primary:hover,
.btn.bg-dark:hover,
.btn.bg-success:hover,
.btn.bg-danger:hover,
.btn.bg-info:hover,
.btn.bg-warning:hover,
.btn[class*="bg-gradient"]:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-dark:hover {
    color: var(--claris-text-on-dark);
}

/* Boutons disabled : restent lisibles */
.btn:disabled,
.btn.disabled,
button:disabled {
    opacity: .55;          /* moins agressif que le 0.65 par défaut */
    cursor: not-allowed;
}

/* =========================================================================
   7. TABLEAUX — RESPECT TOTAL DU DESIGN VALIDÉ
   -------------------------------------------------------------------------
   Dans CLARIS, custom_style.css définit déjà :
     .table thead th {
        background: linear-gradient(180deg, blue, blue) !important;
        color: #fff !important;
     }
   On NE TOUCHE SURTOUT PAS au thead. Notre CSS de lisibilité ne doit
   intervenir que sur le tbody pour ne pas casser le design des en-têtes.
   ========================================================================= */
.table {
    color: var(--claris-text-default);
}

/* Tbody uniquement — texte foncé sur fond blanc */
.table > tbody td,
.table tbody td {
    color: var(--claris-text-default);
    border-color: var(--claris-border-soft);
}

.table-loading tbody tr td {
    color: var(--claris-text-default);
}

/* Petits textes dans le TBODY uniquement (jamais dans le thead pour
   ne pas casser le design des en-têtes blancs sur fond bleu) */
.table > tbody .text-xs,
.table > tbody .text-sm,
.table > tbody .text-secondary,
.table tbody .text-xs,
.table tbody .text-sm,
.table tbody .text-secondary {
    color: var(--claris-text-muted) !important;
}

/* PROTECTION DESIGN VALIDÉ : tous les enfants du thead bleu CLARIS
   restent BLANC. Cette règle protège contre les classes Bootstrap
   .text-secondary, .text-muted, etc qui pourraient passer en gris
   foncé sur fond bleu et devenir illisibles. */
.table thead th,
.table thead th * ,
.table thead th .text-xs,
.table thead th .text-sm,
.table thead th .text-secondary,
.table thead th .text-muted,
.table thead th i,
.table thead th span,
.table thead th a,
.table thead th .sort-icon {
    color: #ffffff !important;
}

/* =========================================================================
   8. BADGES — chaque variante avec bon contraste
   ========================================================================= */
.badge {
    color: var(--claris-text-on-dark);
    font-weight: 600;
}

.badge.bg-light,
.badge.badge-light,
.badge.bg-secondary-soft {
    color: var(--claris-text-strong);
    background-color: var(--claris-bg-muted);
}

/* Badges custom CLARIS */
.claris-badge,
.claris-badge-rh {
    color: var(--claris-text-on-dark);
}

/* =========================================================================
   9. MODAL — toujours lisible
   ========================================================================= */
.modal-content {
    color: var(--claris-text-default);
    background-color: var(--claris-bg-base);
}

.modal-title {
    color: var(--claris-text-strong);
}

.modal-body {
    color: var(--claris-text-default);
}

.modal-footer .btn {
    /* respecte les classes existantes */
}

/* =========================================================================
   10. DROPDOWNS — items lisibles
   ========================================================================= */
.dropdown-menu {
    background-color: var(--claris-bg-base);
    color: var(--claris-text-default);
    border-color: var(--claris-border-soft);
}

.dropdown-item {
    color: var(--claris-text-default);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--claris-bg-muted);
    color: var(--claris-text-strong);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #2563eb;
    color: var(--claris-text-on-dark);
}

/* =========================================================================
   11. ALERTES — contraste correct
   ========================================================================= */
.alert {
    color: inherit;
}

.alert-success {
    color: #166534;
    background-color: #dcfce7;
    border-color: #bbf7d0;
}

.alert-danger {
    color: #991b1b;
    background-color: #fee2e2;
    border-color: #fecaca;
}

.alert-warning {
    color: #92400e;
    background-color: #fef3c7;
    border-color: #fde68a;
}

.alert-info {
    color: #1e40af;
    background-color: #dbeafe;
    border-color: #bfdbfe;
}

/* =========================================================================
   12. SELECT2 — items toujours lisibles
   ========================================================================= */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    color: var(--claris-text-strong);
    background-color: var(--claris-bg-base);
    border-color: var(--claris-border-soft);
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--claris-text-strong);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--claris-text-soft);
}

.select2-results__option {
    color: var(--claris-text-default);
}

.select2-results__option--highlighted {
    background-color: #2563eb !important;
    color: var(--claris-text-on-dark) !important;
}

/* =========================================================================
   13. UTILS BOOTSTRAP — re-densifier les pâles
   ========================================================================= */
/* Le .text-muted par défaut est souvent trop clair (#6c757d à .5).
   On le rend franchement lisible. */
.text-muted {
    color: var(--claris-text-soft) !important;
}

/* .text-secondary par défaut Argon = #8392ab : limite lisibilité.
   On garde le ton mais on s'assure d'un AA contrast. */
.text-secondary {
    color: var(--claris-text-muted) !important;
}

/* .text-white reste blanc mais on s'assure qu'il N'apparaît PAS
   sur fond clair par accident. */
.text-white {
    color: var(--claris-text-on-dark) !important;
}

/* =========================================================================
   14. TABLEAU DE BORD CLARIS — surcharges spécifiques
   ========================================================================= */
.dashboard-stats-card,
.dashboard-smart-card {
    color: var(--claris-text-default);
}

.dashboard-stats-card h1, .dashboard-stats-card h2, .dashboard-stats-card h3,
.dashboard-smart-card h1, .dashboard-smart-card h2, .dashboard-smart-card h3 {
    color: var(--claris-text-strong);
}

.dashboard-stats-card span, .dashboard-stats-card p,
.dashboard-smart-card span, .dashboard-smart-card p {
    color: inherit;
}

/* =========================================================================
   15. SIDEBAR — déjà géré par sidebar-claris-premium.css
   On laisse pour ne pas conflit-er.
   ========================================================================= */

/* =========================================================================
   16. DERNIER FILET DE SÉCURITÉ
   ========================================================================= */
/* Si un bloc a la classe text-white sur un fond explicitement clair,
   on force le texte foncé (rare mais arrive avec des classes empilées). */
.bg-white.text-white,
.bg-light.text-white,
.bg-gradient-light.text-white {
    color: var(--claris-text-strong) !important;
}

/* Si un bloc a la classe text-dark sur un fond explicitement foncé,
   on force le texte blanc. */
.bg-primary.text-dark,
.bg-dark.text-dark,
.bg-success.text-dark,
.bg-danger.text-dark,
[class*="bg-gradient-primary"].text-dark,
[class*="bg-gradient-dark"].text-dark {
    color: var(--claris-text-on-dark) !important;
}

/* =========================================================================
   17. PHASE H+ v2 — CENTRE D'ADMINISTRATION (cdet-*)
   -------------------------------------------------------------------------
   L'utilisateur a remonté des problèmes de lisibilité dans les modales
   du centre d'administration : boutons "Créer le type / statut / page /
   modèle" parfois invisibles, titres pas visibles, header sombre avec
   texte sombre.

   Règles défensives pour garantir la lisibilité partout dans cdet-*.
   ========================================================================= */

/* Boutons primaires : fond bleu, texte blanc IMPÉRATIF */
.cdet-btn-primary,
.cdet-btn.cdet-btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
.cdet-btn-primary:hover,
.cdet-btn-primary:focus,
.cdet-btn.cdet-btn-primary:hover,
.cdet-btn.cdet-btn-primary:focus {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}
.cdet-btn-primary i,
.cdet-btn-primary span,
.cdet-btn.cdet-btn-primary i,
.cdet-btn.cdet-btn-primary span {
    color: #ffffff !important;
}

/* Boutons fantômes (Annuler) : fond clair, texte foncé visible */
.cdet-btn-ghost,
.cdet-btn.cdet-btn-ghost {
    background: #ffffff !important;
    color: #1f2d4a !important;
    border-color: #cbd5e1 !important;
}
.cdet-btn-ghost:hover,
.cdet-btn-ghost:focus,
.cdet-btn.cdet-btn-ghost:hover,
.cdet-btn.cdet-btn-ghost:focus {
    background: #f8fafc !important;
    color: #0f172a !important;
}

/* Titres dans les modales admin */
.cdet-modal-dialog h1,
.cdet-modal-dialog h2,
.cdet-modal-dialog h3,
.cdet-modal-dialog h4,
.cdet-modal-dialog h5,
.cdet-modal-dialog h6,
.cdet-modal-title {
    color: #0f172a !important;
}

/* Labels et textes dans les modales admin */
.cdet-modal-dialog,
.cdet-modal-dialog label,
.cdet-modal-dialog p,
.cdet-modal-dialog span:not(.badge),
.cdet-modal-body,
.cdet-modal-body label,
.cdet-modal-body p {
    color: #1f2d4a;
}

/* Inputs dans les modales admin : fond blanc, texte foncé */
.cdet-modal-dialog input[type="text"],
.cdet-modal-dialog input[type="email"],
.cdet-modal-dialog input[type="number"],
.cdet-modal-dialog input[type="tel"],
.cdet-modal-dialog input[type="date"],
.cdet-modal-dialog textarea,
.cdet-modal-dialog select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1;
}

.cdet-modal-dialog input::placeholder,
.cdet-modal-dialog textarea::placeholder {
    color: #94a3b8 !important;
}

/* Footer modale : zone sticky, fond blanc, séparateur visible */
.cdet-modal-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* =========================================================================
   18. PHASE H+ v2 — HEADER CENTRE D'ADMINISTRATION
   -------------------------------------------------------------------------
   Le header du centre d'administration peut avoir un fond sombre.
   On garantit du texte BLANC dessus.
   ========================================================================= */
.cdet-header,
.cdet-page-header,
.cdet-topbar,
[class*="cdet-header"],
.admin-header,
.parametres-header {
    color: #ffffff !important;
}

.cdet-header h1,
.cdet-header h2,
.cdet-header h3,
.cdet-header .cdet-title,
.cdet-page-header h1,
.cdet-page-header h2,
.cdet-page-header h3,
.cdet-page-header .cdet-title,
[class*="cdet-header"] h1,
[class*="cdet-header"] h2,
[class*="cdet-header"] h3 {
    color: #ffffff !important;
}

.cdet-header a,
.cdet-header .cdet-link,
.cdet-page-header a,
[class*="cdet-header"] a,
[class*="cdet-header"] .breadcrumb,
[class*="cdet-header"] .breadcrumb-item,
[class*="cdet-header"] .breadcrumb-item a {
    color: #ffffff !important;
}

.cdet-header a:hover,
.cdet-page-header a:hover,
[class*="cdet-header"] a:hover {
    color: #e2e8f0 !important;
    text-decoration: underline;
}

/* Boutons dans le header sombre : style adapté */
[class*="cdet-header"] .cdet-btn-ghost,
[class*="cdet-header"] .btn-light {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[class*="cdet-header"] .cdet-btn-ghost:hover,
[class*="cdet-header"] .btn-light:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}