/* ============================================================
   Tergo theme override
   Charge APRES dist/css/style.css du theme HK pour rebadger
   les accents primaires vers la palette officielle Tergo.
   Palette :
     - Bleu royal primaire : #1B4DBA
     - Bleu navy texte     : #0D2A6B
     - Orange accent       : #F47C20
     - Bleu pastel soft    : #DBE6FF
   ============================================================ */

:root {
    --tergo-primary:        #1B4DBA;
    --tergo-primary-dark:   #143F9C;
    --tergo-primary-rgb:    27,77,186;   /* version RGB pour les ombres/hover */
    --tergo-navy:           #0D2A6B;
    --tergo-orange:         #F47C20;
    --tergo-orange-dark:    #D86810;
    --tergo-soft:           #DBE6FF;
    /* Accent secondaire : suit le secteur (surchargé par header.php).
       Défaut = orange Tergo. Utilisé pour l'indicateur de menu actif et
       le dégradé des titres de section, pour contraster avec le primaire. */
    --tergo-accent:         #F47C20;
}

/* ---------- Boutons primaires ---------- */
.btn-primary,
.btn-primary:focus {
    background-color: var(--tergo-primary) !important;
    border-color:     var(--tergo-primary) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--tergo-primary-dark) !important;
    border-color:     var(--tergo-primary-dark) !important;
}

/* Boutons outline primaires */
.btn-outline-primary {
    color:        var(--tergo-primary) !important;
    border-color: var(--tergo-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--tergo-primary) !important;
    color: #fff !important;
}

/* ---------- Liens ---------- */
a { color: var(--tergo-primary); }
a:hover { color: var(--tergo-primary-dark); }

/* ---------- Textes utilitaires ---------- */
.text-primary { color: var(--tergo-primary) !important; }
.text-navy    { color: var(--tergo-navy)    !important; }
.text-orange  { color: var(--tergo-orange)  !important; }

/* ---------- Backgrounds utilitaires ---------- */
.bg-primary { background-color: var(--tergo-primary) !important; }
.bg-navy    { background-color: var(--tergo-navy)    !important; }
.bg-orange  { background-color: var(--tergo-orange)  !important; }
.bg-soft    { background-color: var(--tergo-soft)    !important; }

/* ---------- Badges primaires ---------- */
.badge-primary {
    background-color: var(--tergo-primary) !important;
    color: #fff !important;
}

/* ---------- Sidebar / Navigation HK theme ---------- */
.hk-nav .menu-title { color: var(--tergo-navy); }
.hk-nav .nav-link.active,
.hk-nav .nav-link:hover { color: var(--tergo-primary); }

/* Pastilles / pills actives */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--tergo-primary) !important;
    color: #fff !important;
}

/* ---------- Page header titles ---------- */
.hk-pg-title { color: var(--tergo-navy); }
.hk-pg-title .pg-title-icon { color: var(--tergo-primary); }

/* ---------- Breadcrumb ---------- */
.breadcrumb-light .breadcrumb-item a { color: var(--tergo-primary); }
.breadcrumb-item.active { color: var(--tergo-navy); }

/* ---------- Inputs focus ---------- */
.form-control:focus,
.custom-select:focus {
    border-color: var(--tergo-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--tergo-primary-rgb), 0.15) !important;
}

/* ---------- Cards : leger lift ---------- */
.hk-sec-wrapper { border-color: rgba(13, 42, 107, 0.08); }

/* ---------- Auth wrap (login / signup) ---------- */
.hk-auth-wrapper h1.display-4 { color: var(--tergo-navy); }
.auth-form .btn-primary { box-shadow: 0 4px 12px rgba(var(--tergo-primary-rgb), 0.25); }

/* ---------- Alertes ---------- */
.alert-primary {
    background-color: var(--tergo-soft) !important;
    color: var(--tergo-navy) !important;
    border-color: rgba(27, 77, 186, 0.2) !important;
}

/* ---------- Spinners et progress ---------- */
.progress-bar { background-color: var(--tergo-primary); }
.spinner-border-primary,
.text-primary.spinner-border { color: var(--tergo-primary) !important; }

/* ---------- Tableau lignes hover ---------- */
.table-hover tbody tr:hover {
    background-color: rgba(var(--tergo-primary-rgb), 0.04);
}

/* ---------- Custom checkbox / switch en bleu ---------- */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tergo-primary) !important;
    border-color:     var(--tergo-primary) !important;
}

/* ============================================================
   ACCENTS ORANGE : actions secondaires et signaux warm
   L'orange est utilise pour creer du contraste avec le bleu :
     - Boutons "secondaires" forts (success, accent)
     - Badges d'alerte douce (warning, en attente)
     - Hover sur certains liens cles
   ============================================================ */

/* Boutons orange explicites */
.btn-accent,
.btn-tergo-orange {
    background-color: var(--tergo-orange) !important;
    border-color:     var(--tergo-orange) !important;
    color: #fff !important;
}
.btn-accent:hover,
.btn-tergo-orange:hover {
    background-color: var(--tergo-orange-dark) !important;
    border-color:     var(--tergo-orange-dark) !important;
    color: #fff !important;
}

/* Boutons "warning" deja existants : on les bascule en orange Tergo */
.btn-warning,
.btn-warning:focus {
    background-color: var(--tergo-orange) !important;
    border-color:     var(--tergo-orange) !important;
    color: #fff !important;
}
.btn-warning:hover {
    background-color: var(--tergo-orange-dark) !important;
    border-color:     var(--tergo-orange-dark) !important;
    color: #fff !important;
}
.btn-outline-warning {
    color:        var(--tergo-orange) !important;
    border-color: var(--tergo-orange) !important;
    background:   transparent !important;
}
.btn-outline-warning:hover {
    background-color: var(--tergo-orange) !important;
    color: #fff !important;
}

/* Badges warning en orange Tergo */
.badge-warning,
.badge-orange {
    background-color: var(--tergo-orange) !important;
    color: #fff !important;
}
.badge-orange-soft {
    background-color: rgba(244, 124, 32, 0.15) !important;
    color: var(--tergo-orange-dark) !important;
}

/* Alertes warning en orange Tergo */
.alert-warning {
    background-color: rgba(244, 124, 32, 0.12) !important;
    color: var(--tergo-orange-dark) !important;
    border-color: rgba(244, 124, 32, 0.3) !important;
}

/* Lien d'accent (utilise pour les liens d'action specifiques) */
.text-accent,
.text-orange {
    color: var(--tergo-orange) !important;
}

/* Background utilitaires accent */
.bg-accent { background-color: var(--tergo-orange) !important; color: #fff !important; }
.bg-accent-soft { background-color: rgba(244, 124, 32, 0.10) !important; color: var(--tergo-orange-dark) !important; }

/* Highlights subtils sur les hovers de cards interactives */
.card.card-interactive:hover {
    border-color: var(--tergo-orange) !important;
}

/* Badges de statut "en attente" / "draft" en orange clair */
.badge-pending {
    background-color: rgba(244, 124, 32, 0.15) !important;
    color: var(--tergo-orange-dark) !important;
    font-weight: 600;
}

/* Underline tergo sur titres de section (touche bleu+orange) */
.tergo-section-title {
    position: relative;
    padding-bottom: 6px;
    color: var(--tergo-navy);
}
.tergo-section-title::after {
    content: "";
    position: absolute; bottom: 0; left: 0;
    width: 32px; height: 3px;
    background: linear-gradient(90deg, var(--tergo-primary), var(--tergo-accent));
    border-radius: 2px;
}

/* ============================================================
   "Campagne look" — inspire de la pub Tergo
   Sidebar bleu plein + cards arrondies + KPIs avec accents
   ============================================================ */

/* ---------- 1) SIDEBAR : bleu Tergo plein ---------- */
.hk-nav.hk-nav-dark,
.hk-nav {
    background: var(--tergo-primary) !important;
    box-shadow: 4px 0 14px rgba(13, 42, 107, 0.08);
}

/* Liens du menu : texte blanc + hover orange soft */
.hk-nav .nav-link,
.hk-nav .nav-link-text,
.hk-nav .nav-link .feather-icon {
    color: rgba(255, 255, 255, 0.86) !important;
}
.hk-nav .nav-link:hover,
.hk-nav .nav-link:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-radius: 8px;
}
.hk-nav .nav-link:hover .nav-link-text,
.hk-nav .nav-link:hover .feather-icon {
    color: #fff !important;
}
.hk-nav .nav-link.active,
.hk-nav .nav-item.active > .nav-link {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-left: 3px solid var(--tergo-accent);
    border-radius: 0 8px 8px 0;
}

/* Sous-menus collapsibles : un peu plus sombres */
.hk-nav .collapse-level-1 .nav-link {
    color: rgba(255, 255, 255, 0.72) !important;
    padding-left: 48px !important;
    font-size: 0.86rem;
}
.hk-nav .collapse-level-1 .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Headings de section dans le menu */
.hk-nav .menu-title,
.hk-nav .nav-header,
.hk-nav .nav-section-title {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 14px 20px 6px;
}

/* Logo / brand area */
.hk-nav .navbar-brand,
.hk-nav .nav-header-img {
    color: #fff !important;
}

/* Croix de fermeture (mobile) */
.hk-nav .hk-nav-close {
    color: #fff !important;
    opacity: 0.8;
}

/* Scrollbar interne plus discrete sur fond bleu */
.hk-nav .nicescroll-cursors {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* ---------- 2) CARDS DASHBOARD : look "campagne" ---------- */
.tergo-dash .kpi {
    border-radius: 16px !important;
    border: 1px solid #EAF0FB !important;
    box-shadow: 0 4px 14px rgba(13, 42, 107, 0.05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tergo-dash .kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(13, 42, 107, 0.10);
}
.tergo-dash .kpi-icon {
    border-radius: 12px !important;
    width: 44px !important;
    height: 44px !important;
}

/* Panels & sections arrondis aussi */
.tergo-dash .panel {
    border-radius: 16px !important;
    border: 1px solid #EAF0FB !important;
    box-shadow: 0 4px 14px rgba(13, 42, 107, 0.05);
}

/* Boutons quick actions : style pill comme dans la pub */
.tergo-dash .qa-btn {
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-weight: 600 !important;
}

/* Titre de page dans le dashboard : plus gros + couleur navy */
.tergo-dash .pg-head h1 {
    font-size: 1.8rem !important;
    color: var(--tergo-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Bar chart : look gradient du visuel */
.tergo-dash .bar-chart > div {
    background: linear-gradient(180deg, #3B72D6 0%, var(--tergo-primary) 50%, var(--tergo-navy) 100%) !important;
    border-radius: 8px 8px 0 0 !important;
}

/* ---------- 3) Pages internes : cards generales ---------- */
.hk-sec-wrapper,
.card {
    border-radius: 14px !important;
    border-color: #EAF0FB !important;
}

/* Hover plus doux sur les tables */
.table-hover tbody tr:hover {
    background-color: rgba(var(--tergo-primary-rgb), 0.04) !important;
}

/* Inputs : focus bleu Tergo */
.form-control:focus {
    border-color: var(--tergo-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--tergo-primary-rgb), 0.15) !important;
}

/* ---------- 4) Top navbar : ligne plus discrete ---------- */
.hk-navbar {
    border-bottom: 1px solid #EAF0FB !important;
    box-shadow: 0 1px 6px rgba(13, 42, 107, 0.03);
}

/* ============================================================
   5) HARMONISATION GLOBALE — toutes les pages internes
   ============================================================ */

/* Titre de page : navy + gros + tracking serre */
.hk-pg-title {
    color: var(--tergo-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    font-size: 1.55rem !important;
}
.hk-pg-title .pg-title-icon {
    background: linear-gradient(135deg, var(--tergo-primary), var(--tergo-navy));
    color: #fff;
    border-radius: 10px;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 10px;
    box-shadow: 0 4px 12px rgba(var(--tergo-primary-rgb), 0.25);
}
.hk-pg-title .pg-title-icon .feather-icon i,
.hk-pg-title .pg-title-icon i {
    color: #fff !important;
    width: 18px; height: 18px;
}

/* Breadcrumb : compact et discret */
.hk-breadcrumb .breadcrumb {
    padding: 8px 0 !important;
    font-size: 0.82rem !important;
}
.hk-breadcrumb .breadcrumb-item a {
    color: var(--tergo-primary);
    font-weight: 500;
}
.hk-breadcrumb .breadcrumb-item.active {
    color: #6c757d;
}

/* Sections / wrappers : meme rendu que les KPI du dashboard */
.hk-sec-wrapper {
    background: #fff;
    border-radius: 16px !important;
    border: 1px solid #EAF0FB !important;
    box-shadow: 0 4px 14px rgba(13, 42, 107, 0.04);
    padding: 22px !important;
    margin-bottom: 18px;
}
.hk-sec-title {
    color: var(--tergo-navy) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-bottom: 14px !important;
}

/* Tables : header en bleu pastel + bordures legeres */
.hk-sec-wrapper .table thead th,
.card .table thead th {
    background: #F4F8FF !important;
    color: var(--tergo-navy) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
    border-top: none !important;
    border-bottom: 2px solid #DCE4F2 !important;
    padding: 12px 14px !important;
}
.hk-sec-wrapper .table tbody td {
    padding: 12px 14px !important;
    border-top: 1px solid #F0F4FB !important;
    vertical-align: middle;
}

/* Badges harmonises */
.badge { font-weight: 600; padding: 4px 9px; border-radius: 999px; font-size: 0.72rem; }
.badge-info    { background: var(--tergo-soft) !important; color: var(--tergo-primary) !important; }
.badge-success { background: #D4F1E7 !important; color: #0A5C40 !important; }
.badge-warning { background: rgba(244,124,32,0.15) !important; color: var(--tergo-orange-dark) !important; }
.badge-danger  { background: #FDE2E2 !important; color: #8B1F1F !important; }

/* Boutons secondaires : look neutre cohérent */
.btn-light {
    background: #F4F8FF !important;
    border-color: #DCE4F2 !important;
    color: var(--tergo-navy) !important;
    font-weight: 500;
}
.btn-light:hover {
    background: #E5EEFF !important;
    border-color: #C8D5F0 !important;
}

/* Alerts harmonises */
.alert {
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    padding: 14px 18px;
}
.alert-warning { background: rgba(244,124,32,0.08) !important; color: var(--tergo-orange-dark) !important; border-color: rgba(244,124,32,0.2) !important; }
.alert-success { background: #E8F7F0 !important; color: #0A5C40 !important; border-color: #B4E4CC !important; }
.alert-info    { background: var(--tergo-soft) !important; color: var(--tergo-primary) !important; border-color: #B6C9F0 !important; }
.alert-danger  { background: #FDECEC !important; color: #8B1F1F !important; border-color: #F5C2C2 !important; }

/* Modales : coins arrondis */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(13, 42, 107, 0.15);
}
.modal-header {
    border-bottom: 1px solid #EAF0FB !important;
    padding: 18px 22px !important;
}
.modal-title {
    color: var(--tergo-navy) !important;
    font-weight: 700 !important;
}
.modal-footer {
    border-top: 1px solid #EAF0FB !important;
    padding: 14px 22px !important;
}

/* Container interne avec marge top reduite (cohérent avec dashboard) */
.container-fluid > .hk-pg-header,
.container > .hk-pg-header {
    margin-bottom: 18px;
}

/* Selects / inputs cohérents avec le focus bleu */
.form-control {
    border-color: #DCE4F2;
    border-radius: 8px;
}
select.form-control { background-color: #fff; }

/* Liens "Voir tout" / "+" subtils */
.tergo-link-more {
    font-size: 0.78rem;
    color: var(--tergo-primary);
    text-decoration: none;
    font-weight: 600;
}
.tergo-link-more:hover { color: var(--tergo-primary-dark); text-decoration: underline; }

/* ============================================================
   6) ESPACEMENT GLOBAL — toutes pages internes
   Garantit le meme padding entre la sidebar bleue et le contenu,
   peu importe si la page utilise .container, .container-fluid,
   ou un wrapper custom (tergo-dash, tergo-cal, etc.)
   ============================================================ */

.hk-pg-wrapper {
    background: transparent;
}

/* Le container parent recoit le padding pour creer l'espace cote sidebar */
.hk-pg-wrapper > .container,
.hk-pg-wrapper > .container-fluid,
.hk-pg-wrapper > nav.hk-breadcrumb + .container,
.hk-pg-wrapper > nav.hk-breadcrumb + .container-fluid,
.hk-pg-wrapper > nav.hk-breadcrumb + div[class*="tergo-"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 18px !important;
    padding-bottom: 28px !important;
    max-width: none !important;
}

/* Breadcrumb aussi aligne avec le contenu */
.hk-pg-wrapper > nav.hk-breadcrumb {
    padding: 12px 28px 0 !important;
}

/* Wrappers custom des pages (calendrier, dashboard...) prennent
   aussi le meme padding interne s'ils sont au top-level */
.hk-pg-wrapper > .tergo-cal,
.hk-pg-wrapper > .tergo-dash {
    padding: 18px 28px 28px !important;
}

/* En largeur reduite (sidebar mobile fermee) — moins de padding */
@media (max-width: 992px) {
    .hk-pg-wrapper > .container,
    .hk-pg-wrapper > .container-fluid,
    .hk-pg-wrapper > nav.hk-breadcrumb + .container,
    .hk-pg-wrapper > nav.hk-breadcrumb + .container-fluid,
    .hk-pg-wrapper > .tergo-cal,
    .hk-pg-wrapper > .tergo-dash {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .hk-pg-wrapper > nav.hk-breadcrumb { padding-left: 16px !important; padding-right: 16px !important; }
}



/* ===== Select2 — alignement Bootstrap 4 + palette Tergo ===== */
.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem);
    padding-left: 0.75rem;
    color: #495057;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tergo-primary);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tergo-primary);
}
.select2-dropdown { border-color: var(--tergo-primary); }
/* Dans un input-group / form-row, garder pleine largeur */
.select2-container { width: 100% !important; }