/* ==== Gradient variable + safe fallback ==== */
:root{
  --ms-gradient-color: linear-gradient(143deg, #ff543e 0%, #ff0065 100%);
  --black-bg: #121316;
}

/* ==== NAVBAR: keep gradient; hover = #121316 ==== */
.navbar,
.navbar.navbar-default,
#header .navbar,
.navbar-primary {
  background: var(--ms-gradient-color, linear-gradient(143deg, #ff543e 0%, #ff0065 100%)) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  margin-bottom: 0 !important;
}

.navbar-default .navbar-nav > li > a {
  color: #fff !important;
  transition: background .2s ease, color .2s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
  background: var(--black-bg) !important;
  color: #fff !important;
  border-radius: 1px;
}

/* ==== BUTTONS: all Bootstrap/WHMCS buttons use gradient ==== */
.btn,
.btn:focus,
.btn:active,
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-default,
.navbar .btn,
.navbar .btn:focus,
.navbar .btn:active {
  color:#fff !important;
  border:0 !important;
  border-radius:1px !important;
  background: var(--ms-gradient-color, linear-gradient(143deg, #ff543e 0%, #ff0065 100%)) !important;
  transition: transform .12s ease, filter .12s ease;
  text-shadow: none !important;
  box-shadow: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-default:hover,
.navbar .btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Keep link-style buttons as links (no gradient) */
a.btn-link, .btn-link {
  background: transparent !important;
  color: #ff0065 !important;
}

/* Optional: inputs in login forms on dark bg */
.form-control {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border: 1px solid #2a2b2f !important;
}
.form-control:focus {
  border-color: #ff0065 !important;
  box-shadow: 0 0 6px rgba(255,0,101,.35) !important;
}



html,
body,
#wrapper,
#main-body,
#content,
.main-content,
#main-content,
section,
.page,
.container-fluid {
  background: var(--black-bg) !important;
}

/* Conteneurs et wrappers qui restent souvent blancs dans Six */
#header,
.header,
.topbar,
.topbar-container,
.pageheader,
.header-lined,
#announcements,
#home-banner {
  background: var(--black-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Dropdowns cohérents (pas de fond blanc) */
.navbar-default .dropdown-menu {
  background: #1a1b1f !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
.navbar-default .dropdown-menu > li > a {
  color: #e5e5e5 !important;
}
.navbar-default .dropdown-menu > li > a:hover {
  background: var(--black-bg) !important;
  color: #fff !important;
}

/* ===== Zones de contenu qui gardent un fond clair chez certains modules ===== */
.panel,
.panel-default,
.panel-body,
.well,
.card,
.card-body,
.box,
.box-body {
  background: var(--black-bg) !important;
  color: #e5e5e5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Tableaux : en-tête et bordures foncées */
.table {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
}
.table > thead > tr > th {
  background: #1e1f23 !important;
  color: #fff !important;
  border-color: #2a2b2f !important;
}
.table > tbody > tr > td {
  border-color: #2a2b2f !important;
}

/* Footer : pas de bande blanche, teinte foncée uniforme */
#footer,
.footer {
  background: var(--black-bg) !important;
  color: #bfc3c7 !important;
  border-top: 1px solid #2a2b2f !important;
}
.copyright,
.footer .copyright {
  background: #101114 !important;
  color: #9aa0a6 !important;
  border-top: 1px solid #222429 !important;
}

/* Petites barres/claires résiduelles générées par Bootstrap */
.hr,
hr,
.page-header,
.header-lined .heading {
  border-color: #1e1f23 !important;
  color: #e5e5e5 !important;
  background: transparent !important;
}

/* === Corrige les blocs encore clairs + harmonise "Bonjour, momo!" === */

/* 1) L'item "Bonjour, momo!" (souvent un <a> .btn/.dropdown-toggle en navbar-right) */
.navbar .navbar-nav.navbar-right > li > a,
.navbar .navbar-right > li > a.dropdown-toggle,
.navbar .navbar-right > li > a.btn,
.navbar .navbar-right > li > a.btn-primary,
.navbar .navbar-right > li > a.btn-default {
  background: var(--ms-gradient-color) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 1px !important;
}
.navbar .navbar-right > li.open > a,
.navbar .navbar-right > li > a:hover,
.navbar .navbar-right > li > a:focus {
  background: var(--black-bg) !important;
  color: #fff !important;
}

/* 2) Supprimer les “fines bordures claires” par défaut de la navbar Bootstrap */
.navbar-default,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: transparent !important; }

/* 3) Panels clairs (title/footer) */
.panel,
.panel-default,
.panel-body { background: var(--black-bg) !important; color:#e5e5e5 !important; }
.panel-default > .panel-heading,
.panel .panel-heading {
  background: #1a1b1f !important;
  color: #fff !important;
  border: 0 !important;
}
.panel-footer {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border: 0 !important;
}

/* 4) List-group encore blanche (ex: raccourcis, produits) */
.list-group,
.list-group-item {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border-color: #2a2b2f !important;
}
.list-group-item:hover,
.list-group-item:focus {
  background: #181a1d !important;
  color: #fff !important;
}

/* 5) Breadcrumb + page headers */
.breadcrumb {
  background: #1a1b1f !important;
  border: 0 !important;
  color: #bfc3c7 !important;
}
.breadcrumb > li + li:before { color: #9aa0a6 !important; }

/* 6) Alerts (garde les couleurs mais base sombre) */
.alert { border: 0 !important; color: #fff !important; }
.alert-info    { background: #1f2a33 !important; }
.alert-success { background: #1f3326 !important; }
.alert-warning { background: #3a2d18 !important; }
.alert-danger  { background: #3a1e1e !important; }

/* 7) Well/cards résiduels */
.well, .card, .card-body, .box, .box-body {
  background: var(--black-bg) !important;
  color:#e5e5e5 !important;
  border: 0 !important; box-shadow:none !important;
}

/* 8) Tableaux (zébrage & hover) */
.table-striped > tbody > tr:nth-of-type(odd) { background: #181a1d !important; }
.table-hover > tbody > tr:hover { background: #202227 !important; }

/* 9) Input-group & addon */
.input-group-addon,
.input-group-text {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border: 1px solid #2a2b2f !important;
}

/* 10) Pagination */
.pagination > li > a,
.pagination > li > span {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border-color: #2a2b2f !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--ms-gradient-color) !important;
  border-color: transparent !important;
  color:#fff !important;
}

/* 11) Boutons plats dans des zones claires (au cas où) */
.btn-default, .btn-link {
  color:#ff0065 !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* 12) Barre de séparation “page-header” / hr */
.page-header { border-color:#1e1f23 !important; }
hr { border-top:1px solid #1e1f23 !important; }


/* === Tuiles KPI (0 SERVICES / QUOTES / TICKETS / INVOICES) en dark === */
/* Couvre les variantes du thème Six sur la page d'accueil client */
.client-home-panels [class*="col-"] > div,
.client-home-panels [class*="col-"] > .panel,
.client-home-panels .panel,
.client-home-panels .panel .panel-body,
.home-panels .panel,
.home-panels .panel .panel-body {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border: 1px solid #2a2b2f !important;
  box-shadow: none !important;
}

/* Titres/valeurs des tuiles plus lisibles */
.client-home-panels .panel h3,
.client-home-panels .panel .h3,
.client-home-panels .panel .kpi-title,
.client-home-panels .panel .kpi-value,
.home-panels .panel h3,
.home-panels .panel .h3 {
  color: #fff !important;
}

/* Sous-texte en gris doux */
.client-home-panels .panel small,
.client-home-panels .panel .text-muted,
.client-home-panels .panel .desc,
.home-panels .panel small,
.home-panels .panel .text-muted {
  color: #bfc3c7 !important;
}

/* Remplace la barre colorée basse par ton dégradé */
.client-home-panels [class*="col-"] > div,
.home-panels [class*="col-"] > div {
  position: relative;
  border-radius: 6px !important;
}
.client-home-panels [class*="col-"] > div::after,
.home-panels [class*="col-"] > div::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ms-gradient-color);
  border-radius: 0 0 6px 6px;
}

/* Icônes des tuiles */
.client-home-panels .panel i,
.home-panels .panel i { color: #d9dde1 !important; }

/* Hover léger sur chaque tuile */
.client-home-panels [class*="col-"] > div:hover,
.home-panels [class*="col-"] > div:hover {
  background: #181a1d !important;
}

/* === Harmoniser l'item compte "Hello, test!" avec le menu === */
/* WHMCS nomme souvent cet item #Primary_Navbar-Account */
#Primary_Navbar-Account > a,
.navbar .navbar-right > li#Primary_Navbar-Account > a,
.navbar .navbar-right > li > a.dropdown-toggle[aria-expanded] {
  background: var(--ms-gradient-color) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
}
#Primary_Navbar-Account.open > a,
#Primary_Navbar-Account > a:hover,
#Primary_Navbar-Account > a:focus {
  background: var(--black-bg) !important;
  color: #fff !important;
}

/* Menu déroulant du compte en sombre */
#Primary_Navbar-Account .dropdown-menu {
  background: #1a1b1f !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
#Primary_Navbar-Account .dropdown-menu > li > a {
  color: #e5e5e5 !important;
}
#Primary_Navbar-Account .dropdown-menu > li > a:hover {
  background: var(--black-bg) !important;
  color: #fff !important;
}

/* === Ajustements mineurs utiles sur cette page === */
/* Breadcrumb sombre */
.breadcrumb {
  background: #1a1b1f !important;
  border: 0 !important;
  color: #bfc3c7 !important;
}
.breadcrumb > li + li:before { color: #9aa0a6 !important; }

/* Pagination sombre si affichée sous les widgets */
.pagination > li > a,
.pagination > li > span {
  background: #1a1b1f !important;
  color: #e5e5e5 !important;
  border-color: #2a2b2f !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--ms-gradient-color) !important;
  border-color: transparent !important;
}


/* === Corriger les titres de page et breadcrumb === */

/* Titre "Bienvenue à nouveau, ..." */
.page-header h1,
.page-header .welcome,
.main-content h1,
.main-content .welcome {
  color: #fff !important;
}

/* Breadcrumb (Accueil / Espace client) */
.breadcrumb,
.breadcrumb li,
.breadcrumb li a {
  color: #e5e5e5 !important;
}
.breadcrumb li a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

/* Séparateur " / " dans le fil d'Ariane */
.breadcrumb > li + li:before {
  color: #9aa0a6 !important; /* gris doux */
}


/* Forcer le titre dans .header-lined en blanc */
.header-lined h1,
.header-lined h2,
.header-lined h3,
.header-lined .h1,
.header-lined .h2,
.header-lined .h3,
.panel-sidebar .panel-title {
  color: #fff !important;
}


/* Espace sous le bandeau "Information additionnelle" (avant le 1er champ) */
.sub-heading + * {           /* le conteneur juste après la sub-heading */
  padding-top: 32px !important;
}

/* Si le 1er enfant est directement un .form-group, double sécurité */
.sub-heading + * > .form-group:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; /* on laisse le padding au parent */
}

/* Cas où WHMCS met un panel/container entre les deux */
.sub-heading + .panel,
.sub-heading + .panel > .panel-body,
.sub-heading + .card,
.sub-heading + .card > .card-body,
.sub-heading + #customFieldsContainer {
  padding-top: 32px !important;
}

/* Trait dégradé au-dessus du footer */
#footer,
.footer {
  border-top: none !important;
  position: relative;
}

#footer::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px; /* épaisseur de la ligne */
  background: linear-gradient(90deg, transparent, #ff543e, #ff0065, transparent);
}

/* Colonne de droite "product-details" */
.product-details .col-md-6.text-center {
    color: #e5e5e5 !important;   /* valeurs en gris clair */
}

/* Titres (h4) bien visibles en blanc */
.product-details .col-md-6.text-center h4 {
    color: #fff !important;
    margin-top: 15px; /* petit espace au-dessus pour respirer */
    margin-bottom: 5px;
    font-weight: 600;
}

/* Optionnel : si tu veux que le tout dernier élément ait aussi un peu d'espace */
.product-details .col-md-6.text-center :last-child {
    margin-bottom: 15px;
}

/* Cartes départements – page Ouvrir une demande */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom{
  position: relative;
  background: #1f2233;            /* fond par défaut si pas d'image */
  color: #fff !important;
  padding: 20px 22px;
  border-radius: 12px;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Texte et liens en blanc (titre + description) */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom p,
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom a{
  color:#fff !important;
}
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom p strong a{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
}

/* Effet hover */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* ---- Fonds personnalisés par département (utilise :has pour cibler le href) ---- */
/* Technique (deptid=1) */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom:has(a[href*="deptid=1"]){
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    background: #1A1B1F;
    color: #fff !important;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .2s;
}

/* Commercial (deptid=2) */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom:has(a[href*="deptid=2"]){
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    background: #1A1B1F;
    color: #fff !important;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .2s;
}

/* Autre catégorie (deptid=3) */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom:has(a[href*="deptid=3"]){
   flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    background: #1A1B1F;
    color: #fff !important;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .2s;
}

/* Optionnel : icône un peu plus visible */
.col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom i.fas{
  opacity:.9;
  margin-right:4px;
}

/* Petits écrans : plus d'air */
@media (max-width: 767px){
  .col-md-9.main-content .col-sm-10 .row > .col-md-6.margin-bottom{
    padding:16px 18px;
  }
}


/* Intro uniquement (la phrase "If you can't find...") */
.col-xs-12.main-content > p,
.col-xs-12.main-content .row > p {
  color: #eaecef !important; /* blanc doux sur fond sombre */
}

/* Container en flex pour aligner 2 cartes par ligne */
.col-xs-12.main-content .col-sm-10 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* espace horizontal et vertical entre cartes */
}

/* Cartes départements */
.col-xs-12.main-content .col-sm-10 .row > .col-md-6.margin-bottom {
  flex: 1 1 calc(50% - 20px); /* 2 cartes par ligne */
  max-width: calc(50% - 20px);
  background: #1A1B1F;
  color: #fff !important;
  padding: 18px 20px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover */
.col-xs-12.main-content .col-sm-10 .row > .col-md-6.margin-bottom:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* Liens & textes internes en blanc */
.col-xs-12.main-content .col-sm-10 .row > .col-md-6.margin-bottom p,
.col-xs-12.main-content .col-sm-10 .row > .col-md-6.margin-bottom a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Texte descriptif */
.col-xs-12.main-content .col-sm-10 .row > .col-md-6.margin-bottom p + p {
  color: #eaecef !important;
}

.md-editor>.md-preview, .md-editor>textarea.markdown-editor {
  color : #121316 !important;
}

/* Page Open Ticket : tout le texte des champs en BLANC */
form[action*="submitticket"] {
  color: #fff !important; /* labels & textes autour */
}

/* (optionnel) placeholders en gris clair */
form[action*="submitticket"] input::placeholder,
form[action*="submitticket"] textarea::placeholder {
  color: #bfc3c7 !important;
}


.tile .stat {
    margin-top: 20px;
    font-size: 40px;
    line-height: 1;
    color: #7d8087 !important;
}


#order-standard_cart .products .product div.product-desc {
  float: left;
  width: 60%;
  padding: 8px 14px;
  font-size: .8em;
  color: #121316 !important;
}

#order-standard_cart .products .product div.product-pricing span.price {
  font-size: 1.4em;
  color: #121316 !important;
}


#order-standard_cart .product-info {
  margin: 0 0 20px 0;
  padding: 6px 15px;
  font-size: .85em;
  background-color: #121316 !important;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}


#order-standard_cart .summary-container {
  margin: 0;
  padding: 10px;
  min-height: 100px;
  border-radius: 3px;
  background-color: #f8f8f8;
  font-size: .8em;
  color: #121316;
}



#order-standard_cart .view-cart-items .item span:not(.caret):not(.renewal-price) {
  display: block;
  color: #121316 !important;
}

#order-standard_cart .view-cart-items-header {
  margin: 0;
  padding: 8px 15px;
  background-color: #666 !important;
  color: #fff;
  font-size: .9em;
  border-radius: 4px 4px 0 0;
}


.table-list > tbody > tr > td {
  background-color: #fff;
  color: #121316 !important;
}

table.table-list tbody td {
  padding: 10px;
  vertical-align: middle;
  font-size: .94em;
  color: #121316 !important;
}

section#header {
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    margin: 0;
    padding: 20px !important;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
}

.ticket-reply {
    margin: 10px 0;
    padding: 0;
    border: 1px solid #efefef;
    background-color: #fff;
    color: #121316 !important;
}

.ticket-reply.staff {
    border: 1px solid #cce4fc;
    color: #121316 !important;
}

div.product-details div.product-icon {
    margin: 0;
    background-color: #efefef;
    border-radius: 10px;
    padding: 30px;
    line-height: 1em;
    font-size: 60px;
    color: #121316 !important;
}

div.product-details-tab-container {
    margin: 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-top: 0;
    background-color: #fff;
    color: #121316 !important;
}