/* ==========================================================================
   RYM HOLDING — Design System unifié
   --------------------------------------------------------------------------
   Objectif : une seule source de vérité visuelle pour TOUT l'extranet, qui
   harmonise les composants Bootstrap 4 / SB Admin 2 déjà utilisés partout, sur
   la palette de marque (bleu nuit #0A1F44 / bleu accent #4A90E2, police Nunito)
   déjà posée sur l'auth, le sidebar, la topbar et le footer.

   STRATÉGIE SANS RÉGRESSION : ce fichier est chargé EN DERNIER dans header.php.
   À spécificité égale, la dernière règle de la cascade l'emporte → on aligne le
   rendu SANS éditer ni supprimer les feuilles existantes (sb-admin-2.css,
   style*.css…). La suppression du CSS redondant se fera plus tard, prudemment.

   ⚠ Ne vise PAS l'iframe TinyMCE (skin.css est dans un document séparé).
   Audit + plan : 2026-06-12.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) TOKENS  (réutilise les noms déjà employés par authStyles.php / sideBar)
   -------------------------------------------------------------------------- */
:root {
    /* Marque */
    --rym-navy: #0A1F44;
    --rym-navy-900: #06122c;
    --rym-navy-700: #122a5e;
    --rym-navy-600: #1b3a7a;
    --rym-blue: #4A90E2;
    --rym-blue-300: #6aa9ec;
    --rym-blue-050: #eef4fd;

    /* Neutres */
    --rym-ink: #0A1F44;
    --rym-muted: #6b7a90;
    --rym-border: #dde4ee;
    --rym-soft: #f5f8fc;
    --rym-soft-2: #eef2f9;

    /* Sémantique (fixée UNE fois — était éclatée en 7 bleus / 3 rouges / 3 verts) */
    --rym-success: #1f9d57;
    --rym-success-bg: #e8f6ee;
    --rym-danger: #d9272e;
    --rym-danger-bg: #fdeced;
    --rym-warning: #e8a008;
    --rym-warning-bg: #fdf3e0;
    --rym-info: #4A90E2;
    --rym-info-bg: #eef4fd;

    /* Typo / formes */
    --rym-font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
    --rym-radius-sm: 8px;
    --rym-radius: 12px;
    --rym-radius-lg: 16px;
    --rym-shadow-sm: 0 2px 10px rgba(10, 31, 68, .06);
    --rym-shadow: 0 12px 30px -16px rgba(10, 31, 68, .32);
}

/* --------------------------------------------------------------------------
   B) BASE
   -------------------------------------------------------------------------- */
/* Police de marque (reprend la main sur style.css qui force "Open Sans"). */
body {
    font-family: var(--rym-font);
    color: #3a4763;
}

/* Liens « nus » (sans classe) : neutralise le toxique style.css `a{color:#fff}`
   sans toucher aux liens stylés (.btn, .nav-link, .page-link…). */
body a:not([class]) {
    color: var(--rym-navy-600);
}

body a:not([class]):hover {
    color: var(--rym-blue);
}

/* --------------------------------------------------------------------------
   C) BOUTONS
   -------------------------------------------------------------------------- */
/* Primaire : corrige le bug SB Admin (#4e73df au repos, navy seulement au hover). */
.btn-primary {
    background-color: var(--rym-navy) !important;
    border-color: var(--rym-navy) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--rym-navy-700) !important;
    border-color: var(--rym-navy-700) !important;
    color: #fff !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(74, 144, 226, .35) !important;
}

/* Secondaire / outline → bleu accent (neutralise document-viewer.css #007bff). */
.btn-outline-primary {
    color: var(--rym-blue) !important;
    border-color: var(--rym-blue) !important;
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--rym-blue) !important;
    border-color: var(--rym-blue) !important;
}

.btn-info {
    background-color: var(--rym-blue);
    border-color: var(--rym-blue);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--rym-navy-600);
    border-color: var(--rym-navy-600);
}

.btn-success {
    background-color: var(--rym-success);
    border-color: var(--rym-success);
}

.btn-danger {
    background-color: var(--rym-danger);
    border-color: var(--rym-danger);
}

.btn-warning {
    background-color: var(--rym-warning);
    border-color: var(--rym-warning);
    color: #fff;
}

/* Forme commune */
.btn {
    border-radius: var(--rym-radius-sm);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   D) CARTES
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--rym-border);
    border-radius: var(--rym-radius);
    box-shadow: var(--rym-shadow-sm);
}

.card .card-header {
    background-color: var(--rym-soft);
    border-bottom: 1px solid var(--rym-border);
    font-weight: 700;
    color: var(--rym-ink);
}

/* En-tête « primaire » SB Admin → navy de marque */
.card-header.py-3 h6.text-primary,
.card-header .m-0.font-weight-bold.text-primary {
    color: var(--rym-navy) !important;
}

/* --------------------------------------------------------------------------
   E) TABLES (dont DataTables)
   -------------------------------------------------------------------------- */
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--rym-soft);
    color: var(--rym-navy);
    border-bottom: 2px solid var(--rym-border) !important;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.table td,
.table th {
    border-top: 1px solid var(--rym-soft-2);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(74, 144, 226, .07);
}

/* Pagination DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--rym-navy) !important;
    border-color: var(--rym-navy) !important;
    color: #fff !important;
    border-radius: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--rym-soft-2) !important;
    border-color: var(--rym-border) !important;
    color: var(--rym-navy) !important;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   F) FORMULAIRES
   -------------------------------------------------------------------------- */
.form-control {
    border-color: var(--rym-border);
    border-radius: var(--rym-radius-sm);
    color: var(--rym-ink);
}

.form-control:focus {
    border-color: var(--rym-blue);
    box-shadow: 0 0 0 .2rem rgba(74, 144, 226, .18);
}

.custom-select:focus,
.custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--rym-blue);
    box-shadow: 0 0 0 .2rem rgba(74, 144, 226, .18);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--rym-blue);
    border-color: var(--rym-blue);
}

label {
    color: #41506b;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   G) BADGES / STATUTS  (style « pill » déjà dominant)
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 700;
    padding: .4em .7em;
    border-radius: 50rem;
}

.badge-primary { background-color: var(--rym-navy); }
.badge-info,
.badge-secondary { background-color: var(--rym-blue); }
.badge-success { background-color: var(--rym-success); }
.badge-danger { background-color: var(--rym-danger); }
.badge-warning { background-color: var(--rym-warning); color: #fff; }

/* --------------------------------------------------------------------------
   H) MODALES
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--rym-radius);
    box-shadow: var(--rym-shadow);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--rym-navy), var(--rym-navy-600));
    color: #fff;
    border-bottom: none;
}

.modal-header .modal-title { font-weight: 700; }
.modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   I) ONGLETS  (neutralise style3.css .nav-link.active #0062cc)
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--rym-border);
}

.nav-tabs .nav-link {
    color: var(--rym-muted);
    font-weight: 600;
    border: none;
}

.nav-tabs .nav-link:hover {
    color: var(--rym-navy);
    border: none;
}

.nav-tabs .nav-link.active {
    color: var(--rym-navy) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: inset 0 -3px 0 var(--rym-blue);
}

/* --------------------------------------------------------------------------
   J) ALERTES  (liseré gauche coloré, cohérent)
   -------------------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--rym-radius-sm);
}

.alert-primary,
.alert-info {
    color: #1b4f8a;
    background-color: var(--rym-info-bg);
    border-color: #cfe1f7;
    border-left: 4px solid var(--rym-blue);
}

.alert-success {
    color: #166c40;
    background-color: var(--rym-success-bg);
    border-color: #bfe6cf;
    border-left: 4px solid var(--rym-success);
}

.alert-danger {
    color: #b4232a;
    background-color: var(--rym-danger-bg);
    border-color: #f6c9ce;
    border-left: 4px solid var(--rym-danger);
}

.alert-warning {
    color: #8a5d06;
    background-color: var(--rym-warning-bg);
    border-color: #f4ddb0;
    border-left: 4px solid var(--rym-warning);
}

/* --------------------------------------------------------------------------
   K) EN-TÊTE DE PAGE standard (utilitaire à généraliser dans les vues)
   -------------------------------------------------------------------------- */
.rym-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rym-border);
}

.rym-page-header::before {
    content: "";
    width: 5px;
    height: 30px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--rym-navy), var(--rym-blue));
    flex: 0 0 auto;
}

.rym-page-header h1,
.rym-page-header h2,
.rym-page-header h3,
.rym-page-header .h3 {
    margin: 0;
    font-weight: 800;
    color: var(--rym-ink);
    letter-spacing: -.2px;
}

/* --------------------------------------------------------------------------
   L) TITRES DE PAGE — uniformise `.section-title` (motif dominant : 65 vues)
   Tous les titres de module prennent le même rendu (barre d'accent + titre
   bleu nuit + icône normalisée) sans toucher aux vues.
   -------------------------------------------------------------------------- */
.section-title {
    margin: 2px 0 22px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--rym-border);
}

.section-title h1,
.section-title h2,
.section-title h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: var(--rym-ink);
}

/* Barre d'accent verticale devant le titre */
.section-title h1::before,
.section-title h2::before,
.section-title h3::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 1.4em;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--rym-navy), var(--rym-blue));
}

/* Icône de titre : couleur de marque (neutralise les couleurs inline diverses) */
.section-title h1 > span,
.section-title h2 > span,
.section-title h3 > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(74, 144, 226, .14);
    flex: 0 0 auto;
}

.section-title h1 i,
.section-title h2 i,
.section-title h3 i {
    color: var(--rym-navy) !important;
    font-size: 1em;
}

/* Neutralise les soulignements `::after` hérités (divers selon les vues) :
   on garde UNE seule décoration cohérente (la barre d'accent ci-dessus). */
.section-title h1::after,
.section-title h2::after,
.section-title h3::after {
    display: none !important;
}

/* Texte utilitaire de marque */
.text-rym-navy { color: var(--rym-navy) !important; }
.text-rym-blue { color: var(--rym-blue) !important; }
.bg-rym-navy { background-color: var(--rym-navy) !important; color: #fff; }
.bg-rym-soft { background-color: var(--rym-soft) !important; }