.input-group-addon {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}


.page-item.active .page-link {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}


.border-primary {
  border: 1px solid var(--theme-color) !important;
}


.checkbox.checbox-switch.switch-primary label > input:checked + span {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  box-shadow: var(--theme-color) 0 0 0 8px inset;
}




.tab-border .nav.nav-tabs li a.active:focus, .tab-border .nav.nav-tabs li a.active:hover {
    color: var(--theme-color);
}

.tab-border .nav.nav-tabs li a.active {
    color: var(--theme-color);
}

.tag.label-info {background-color:var(--theme-color);}


.input-group-addon {
	background-color: var(--theme-color);
	border-color: var(--theme-color);
}

.page-link {
	color: var(--theme-color);
}

.page-item.active .page-link {
	background-color: var(--theme-color);
	border-color: var(--theme-color);
}


a:focus, a:hover {
    color: var(--theme-color);
}

.top-bar .navbar .nav-link:hover {
    color: var(--theme-color);
}

.form-control:focus {
	border-color: var(--theme-color);
}

.form-check label::after {
	background-color: var(--theme-color);
}

.irs--flat .irs-bar {
	background-color: var(--theme-color);
}

.irs--flat .irs-from, .irs--flat .irs-single, .irs--flat .irs-to {
	background-color: var(--theme-color);
}

.irs--flat .irs-handle > i:first-child {
	background-color: #299429;
}

.btn-primary {
  background-color: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}

.btn-primary:hover {
  background-color: var(--theme-color-hover);
  border-color: var(--theme-color-hover);
}

.bg-primary {
  background-color: var(--theme-color) !important;
}

.accordion .acd-group .card-header .acd-heading:hover {
  color: var(--theme-color);
}

.btn.btn-outline-primary {
  color: var(--theme-color);
  border-color: var(--theme-color);
}

.btn.btn-outline-primary:not(:disabled):not(.disabled).active {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.bg-gradient {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#54b849+0,299429+100 */
	background: var(--theme-color) !important;
	background: -moz-linear-gradient(left, var(--theme-color) 0%, var(--theme-color-hover) 100%) !important;
	background: -webkit-linear-gradient(left, var(--theme-color) 0%,var(--theme-color-hover) 100%) !important;
	background: linear-gradient(to right, var(--theme-color) 0%,var(--theme-color-hover) 100%) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--theme-color), endColorstr=var(--theme-color-hover),GradientType=1 ) !important;
}

.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu a.dropdown-item:focus, 
.top-bar .navbar .nav-right .nav-item.user-profile .dropdown-menu a.dropdown-item:hover {
    color: var(--theme-color-hover);
}

.badge-primary {background-color: var(--theme-color);}

/* ============================================================
   authV2 — common UI rules (applies to v1 + v2 pages)
   ============================================================ */

/* Champs non éditables : fond gris + curseur not-allowed pour distinguer */
.form-control:disabled,
.form-control[readonly],
input:disabled,
input[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed;
}

/* Lignes "disabled" dans les tables (sub-clients + users en status='N') :
   strike + couleur rouge atténué pour signaler visuellement. */
tr.row-disabled td,
tr.row-disabled td a:not(.btn),
tr.row-disabled td code {
    text-decoration: line-through;
    color: #dc2626 !important;
    opacity: 0.85;
}
tr.row-disabled td .badge,
tr.row-disabled td .v2-badge {
    text-decoration: none;  /* les badges restent lisibles */
}

/* ============================================================
   authV2 admin — iOS-style toggle switches + red admin banner
   ============================================================ */

/* Toggle switch (iOS-like slider) */
.v2-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    vertical-align: middle;
}
.v2-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    clip: auto;
}
.v2-toggle .v2-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e0;
    transition: 0.25s;
    border-radius: 24px;
}
.v2-toggle .v2-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.v2-toggle input:checked + .v2-slider {
    background-color: #16a34a;
}
.v2-toggle input:checked + .v2-slider:before {
    transform: translateX(20px);
}
.v2-toggle input:disabled + .v2-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Layout helper : toggle aligné avec label */
.v2-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.v2-toggle-row:last-child { border-bottom: none; }
.v2-toggle-row label {
    flex: 1;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}
.v2-toggle-row .hint {
    font-size: 12px;
    color: #6b7280;
    font-weight: normal;
    display: block;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Banners (admin + impersonation).
 * Le layout v1 a .top-bar { position: fixed; top: 0; z-index: 1051 } qui
 * recouvre tout élément static placé en haut du DOM. On rend donc les
 * bandeaux fixed avec z-index supérieur, et on pousse top-bar + contenu
 * de 32px vers le bas via le sélecteur :has() (supporté par tous les
 * navigateurs modernes 2023+).
 * --------------------------------------------------------------------------- */

.v2-admin-banner-v1,
.v2-impersonate-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1052;
    height: 32px;
    color: #fff;
    padding: 4px 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

/* Boutons "Back to ..." dans les bandeaux : fond blanc + texte bleu pour
 * visibilité. Remplace les styles inline sur les <a> à l'intérieur des
 * deux bandeaux. */
.v2-admin-banner-v1 a.v2-banner-cta,
.v2-impersonate-banner a.v2-banner-cta {
    margin-left: auto;
    background: #fff;
    color: #1e24f5 !important; /* battre les règles a:hover/a:link du thème */
    text-decoration: none !important;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #fff;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.v2-admin-banner-v1 a.v2-banner-cta:hover,
.v2-impersonate-banner a.v2-banner-cta:hover {
    background: #eef0ff; /* bleu très pâle, le texte reste bleu, parfait contraste */
    color: #1e24f5 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}

.v2-admin-banner-v1 {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
}
.v2-impersonate-banner {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.v2-admin-banner-v1 i,
.v2-impersonate-banner i { font-size: 16px; }
.v2-admin-banner-v1 .muted { color: rgba(255,255,255,0.7); font-size: 12px; }
.v2-impersonate-banner .muted { color: rgba(255,255,255,0.85); font-size: 12px; }
.v2-impersonate-banner a:hover { background: rgba(255,255,255,0.1); }

/* Pousser la top-bar (fixed) de 32px vers le bas pour ne pas masquer le bandeau.
 * Utilise une classe explicite sur le body (ajoutée par member.tpl.php) au
 * lieu de :has(), pour fiabilité et lisibilité. !important pour battre les
 * règles plus spécifiques du layout v1. */
body.has-admin-banner .top-bar,
body.has-impersonate-banner .top-bar {
    top: 32px !important;
}
/* Le contenu sous la top-bar doit aussi se décaler */
body.has-admin-banner .app,
body.has-impersonate-banner .app {
    padding-top: 32px;
}
/* Sidebar (.app-navbar) commence à top:0. La pousser sous le bandeau aussi
 * pour que son logo et son scroll header restent visibles correctement. */
body.has-admin-banner .app-navbar,
body.has-impersonate-banner .app-navbar {
    top: 32px !important;
    /* La règle de base (modern-dashboard.css) impose height:100% sur un élément
     * fixed = toute la hauteur de l'écran. Décalée de 32px sans être raccourcie,
     * la sidebar débordait de 32px sous le bas de l'écran, et son overflow:hidden
     * rendait le dernier item du menu inatteignable même en butée de défilement. */
    height: calc(100% - 32px) !important;
}

/* Respiration en bas du menu : sans elle le dernier item colle au bord de la zone
 * de défilement (9px de marge seulement en mode client, sous-menus dépliés). */
.sidebar-nav ul.metismenu {
    padding-bottom: 24px !important;
}

/* ============================================================
   SweetAlert2 - alignement sur la charte (24/09/2026)
   Forme, typographie et espacements seulement. Les COULEURS de
   boutons sont posees en style inline par chaque appel via
   confirmButtonColor / cancelButtonColor : une regle CSS ne les
   atteindrait qu'avec !important, ce qui ecraserait aussi le rouge
   des actions destructives - or ce rouge est un signal, pas une
   couleur de marque. On laisse donc les appels decider.
   --theme-color suit le theme du client (voxolib, leadheero,
   spoticall), rien n'est code en dur.
   Classes couvertes pour SweetAlert2 v7/v9 (.swal2-content) comme
   v11 (.swal2-html-container) : le code appelant gere les deux.
   ============================================================ */
.swal2-popup {
    border-radius: 10px;
    padding: 26px 24px 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}
.swal2-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    padding: 0 0 4px;
}
.swal2-content,
.swal2-html-container {
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
}
.swal2-content b,
.swal2-html-container b {
    color: #1f2937;
    font-weight: 600;
}
.swal2-icon {
    width: 62px;
    height: 62px;
    margin: 4px auto 18px;
}
.swal2-icon .swal2-icon-content { font-size: 34px; }
.swal2-actions { margin-top: 20px; }
.swal2-styled {
    border-radius: 6px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    transition: filter 0.12s ease;
}
.swal2-styled:hover { filter: brightness(0.94); }
.swal2-styled:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.16);
}
/* Bouton de confirmation des modales qui ne fixent PAS de couleur :
   il prend celle du theme au lieu du bleu par defaut de la librairie. */
.swal2-confirm:not([style*="background"]) {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}
.swal2-close:focus { box-shadow: none; }