:root {
  --blue-dark:  #1a2b4a;
  --blue-main:  #2563eb;
  --blue-light: #3b82f6;
  --blue-pale:  #eff6ff;
  --blue-pale2: #dbeafe;
  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-400:   #94a3b8;
  --gray-600:   #475569;
  --gray-800:   #1e293b;
  --radius:     12px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(180deg, var(--blue-pale) 0%, var(--gray-50) 340px);
    color: var(--gray-800);
}

/* ── Navbar ── */
.site-navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--blue-pale2);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-navbar .navbar-brand {
    color: var(--blue-dark) !important;
    font-weight: 800;
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.site-navbar .navbar-brand .brand-mark {
    width: 28px; height: 28px;
    background: var(--blue-main);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.site-navbar .nav-link {
    color: var(--gray-600);
    font-weight: 500;
    font-size: .92rem;
    border-radius: 8px;
    padding-left: .7rem !important;
    padding-right: .7rem !important;
}
.site-navbar .nav-link:hover {
    color: var(--blue-main);
}
.site-navbar .nav-link.active {
    color: var(--blue-main) !important;
    font-weight: 600;
    background: var(--blue-pale);
}
.site-navbar .navbar-toggler {
    border-color: var(--blue-pale2);
}

/* ── Cards ── */
.card {
    border: 1px solid var(--blue-pale2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card h6 {
    color: var(--blue-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.card h6::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue-main);
    display: inline-block;
}

/* ── Stat cards ── */
.stat-card {
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--blue-pale) 0%, #fff 100%);
    border: 1px solid var(--blue-pale2);
}
.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--blue-dark);
}
.stat-card .text-muted.small {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .5px;
    color: var(--blue-main) !important;
}

/* ── Buttons ── */
.btn {
    font-weight: 600;
    border-radius: 8px;
}
.btn-primary {
    background-color: var(--blue-main);
    border-color: var(--blue-main);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
}
.btn-outline-primary {
    color: var(--blue-main);
    border-color: var(--blue-main);
}
.btn-outline-primary:hover {
    background-color: var(--blue-main);
    border-color: var(--blue-main);
}
.btn-outline-dark {
    color: var(--blue-dark);
    border-color: var(--blue-dark);
}
.btn-outline-dark:hover {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
}
.btn-outline-secondary {
    color: var(--blue-dark);
    border-color: var(--blue-pale2);
    background: #fff;
}
.btn-outline-secondary:hover {
    background-color: var(--blue-pale);
    border-color: var(--blue-light);
    color: var(--blue-dark);
}

/* ── Table ── */
/* Le fondu est posé sur la ligne d'en-tête (thead tr) pour filer sur toute la largeur du tableau,
   pas case par case — chaque th garde un fond transparent pour laisser le dégradé de la ligne
   apparaître (une couleur posée par cellule aurait recréé un dégradé répété à chaque colonne). */
table.table thead tr {
    background: linear-gradient(to right, var(--blue-pale) 0%, #fff 100%);
}
table.table thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--blue-main);
    background: transparent;
    border-bottom-width: 1px;
    border-color: var(--blue-pale2);
}
/* Couleur appliquée sur les cellules (> td), pas sur la ligne (tr) : Bootstrap peint son propre
   fond de cellule par-dessus celui de la ligne, donc un simple background-color sur tr reste invisible. */
table.table tbody tr:nth-child(even) > td {
    background-color: var(--blue-pale);
}
/* Pas de fond bleu sur la ligne étoilée (.best-row) : l'étoile ⭐ seule suffit comme indicateur,
   sur demande explicite de l'utilisateur (pas de bleu "en plus" qui n'a pas à en avoir). */
table.table tbody tr:hover > td {
    background-color: var(--blue-pale2);
}

/* ── Badges ── */
.badge {
    font-weight: 600;
    border-radius: 20px;
    padding: 5px 12px;
}
.badge-actif, .badge-active, .badge-payee {
    background-color: #16a34a;
}
.badge-inactif, .badge-terminee, .badge-en_retard {
    background-color: #dc2626;
}
.badge-pausee, .badge-en_attente {
    background-color: #ea580c;
}

/* ── Period filter ── */
.btn-group .btn-outline-secondary {
    font-size: .82rem;
}
.btn-group .btn-outline-secondary.active {
    background-color: var(--blue-main);
    border-color: var(--blue-main);
    color: #fff;
}

/* ── Modals ── */
.modal-header {
    background: var(--blue-pale);
    border-bottom: 1px solid var(--blue-pale2);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.modal-header .modal-title {
    color: var(--blue-dark);
    font-weight: 700;
}
.modal-content {
    border-radius: var(--radius);
    border: none;
}

/* ── Client logo ── */
.client-logo {
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--blue-pale2);
    padding: 3px;
}
.client-logo-lg {
    width: 72px; height: 72px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--blue-pale2);
    padding: 6px;
}

/* Channel badges (Google Ads / Meta Ads) : icônes SVG inline (voir platform_icon_svg() dans helpers.php) */
.channel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    margin-right: 4px;
}
.channel-badge svg { display: block; }

/* Sortable table headers */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-th:hover { color: var(--blue-main); }
.sortable-th::after {
    content: ' \21C5';
    font-size: 0.75em;
    color: var(--blue-pale2);
}
.sortable-th.sort-asc::after { content: ' \2191'; color: var(--blue-main); }
.sortable-th.sort-desc::after { content: ' \2193'; color: var(--blue-main); }

/* Zébrures + en-tête + étoile (.best-row) : règles réelles définies plus haut dans "── Table ──",
   toutes appliquées au niveau cellule (> td), pas de la ligne (tr) — voir commentaire là-bas. */

/* Miniatures de créas agrandissables au clic (voir sortable.js) : la taille de base reste celle
   posée en inline (width/height existants), le transform ne fait qu'agrandir visuellement sans
   changer la mise en page environnante (les cellules voisines ne bougent pas). */
.thumb-zoom {
    cursor: zoom-in;
    transition: transform 0.15s ease;
    position: relative;
}
.thumb-zoom.is-expanded {
    transform: scale(3.2);
    z-index: 20;
    cursor: zoom-out;
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
}

/* Barre réduire/agrandir sur chaque bloc de la fiche client admin (2026-08-27) : pleine largeur avec
   le nom du bloc, plus visible qu'une simple icône dans un coin. Bootstrap ajoute automatiquement la
   classe .collapsed sur le bouton quand le bloc ciblé est masqué, pas besoin de JS pour le chevron. */
.admin-block-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    color: var(--gray-600);
    text-align: left;
}
.admin-block-toggle:hover {
    background: var(--gray-200);
}
.admin-block-toggle-icon {
    display: inline-block;
    transition: transform 0.15s ease;
}
.admin-block-toggle.collapsed .admin-block-toggle-icon {
    transform: rotate(-90deg);
}