/* ModzBot brand layer — chargé APRÈS styles.css Metronic */

:root {
  --gradient-brand:         linear-gradient(135deg, #4263eb 0%, #22D3EE 100%);
  --gradient-brand-subtle:  linear-gradient(135deg, rgba(66, 99, 235,0.12) 0%, rgba(34, 211, 238,0.12) 100%);
  --gradient-brand-text:    linear-gradient(135deg, #4263eb, #22D3EE);
  --gradient-brand-border:  linear-gradient(135deg, rgba(66, 99, 235,0.45), rgba(34, 211, 238,0.45));
  --color-primary-glow:     rgba(66, 99, 235,0.30);
  --shadow-glow:            0 0 20px rgba(66, 99, 235,0.35);
  --shadow-glow-subtle:     0 0 12px rgba(66, 99, 235,0.18);
  --shadow-glow-success:    0 0 16px rgba(16,185,129,0.25);
}

/* ═══════════════════════════════════════════════════
   DARK PALETTE — source de vérité : config.ktui.css
   (compilée dans styles.css via Tailwind build).
   Les surcharges runtime ici sont supprimées pour éviter
   un double-override incohérent avec les valeurs configurées.
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   FIGMA QUALITY — Ambiance & profondeur
   ═══════════════════════════════════════════════════ */

/* ── Background : orbes gradient signature (dark) ── */
.dark body {
  background-image:
    radial-gradient(ellipse 900px 700px at -5% -8%,  rgba(66, 99, 235,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 700px 600px at 108% 108%, rgba(34, 211, 238,0.10) 0%, transparent 55%);
  background-attachment: fixed;
}

/* ── Background : orbes subtils (light) ── */
body {
  background-image:
    radial-gradient(ellipse 800px 600px at -5% -5%,  rgba(66, 99, 235,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 105% 105%, rgba(34, 211, 238,0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

/* ── Cards — élévation de repos + hover lift + border brand (KTUI natif) ──
   L'ombre de repos (absente avant, hover-only) est LA correction qui détache
   les cartes du fond en light ET dark (fix "aplat monochrome" / "blanc-sur-blanc"). */
.kt-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.06);
}

/* Dark : ombre plus dense + fin liseré interne haut = profondeur "premium". */
.dark .kt-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.04);
}

.kt-card:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.dark .kt-card:hover {
  border-color: rgba(66, 99, 235, 0.28);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 1px 6px rgba(0,0,0,0.20),
              inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

/* ── Stripe gradient en haut des cartes actives ── */
.mz-module-card--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: inherit inherit 0 0;
}

/* ── Sidebar gradient vertical subtil ── */
.dark #sidebar {
  background: linear-gradient(
    180deg,
    oklch(11.5% 0.038 275) 0%,
    oklch(10.5% 0.030 275) 100%
  ) !important;
}

/* ── Scrollbar brand (webkit + firefox) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(66, 99, 235,0.25) transparent;
}
*::-webkit-scrollbar       { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(66, 99, 235,0.25);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 99, 235,0.45);
}

/* ═══════════════════════════════════════════════════
   A11Y — bleu de marque en TEXTE sur fond sombre
   `--primary` (#4263eb) est calibré comme couleur de REMPLISSAGE : le blanc
   dessus passe AA (4.98:1). Mais en TEXTE sur une surface sombre il ne donne
   que 3.93:1 — sous le seuil AA 4.5:1. On éclaircit donc la teinte pour les
   usages texte/icône en dark uniquement (6.36:1, vérifié), sans toucher aux
   boutons ni aux fonds.
   ═══════════════════════════════════════════════════ */
.dark .text-primary { color: #6b8ef5; }

/* ── Focus ring brand ── */
:focus-visible {
  outline: 2px solid rgba(66, 99, 235,0.7);
  outline-offset: 2px;
}

/* ── Sidebar demo6 — active item accent brand ── */
.dark #sidebar .kt-menu-item.active > .kt-menu-link,
.dark #sidebar .kt-menu-item.show > .kt-menu-link {
  background: var(--gradient-brand-subtle) !important;
}

/* ── Module cards ── */
.mz-module-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark .mz-module-card--active {
  border-color: rgba(66, 99, 235, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10), var(--shadow-glow-subtle);
}

/* ── Module icon circle ── */
.mz-module-icon {
  background: var(--gradient-brand-subtle);
  color: #4263eb;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mz-module-icon--active {
  background: var(--gradient-brand);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(66, 99, 235, 0.40);
}

/* ── Tier badges (free / premium) ── */
.mz-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.mz-tier-badge i {
  font-size: 0.65rem;
}

.mz-tier-badge--free {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.30);
}

.dark .mz-tier-badge--free {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.25);
}

.mz-tier-badge--premium {
  background: var(--gradient-brand);
  color: #ffffff;
  border: 1px solid transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ── Primary buttons — gradient brand
   Metronic primary button = .kt-btn (sans modificateur).
   Les variants .kt-btn-secondary/.kt-btn-ghost etc. sont exclus.
   ── */
.kt-btn:not(.kt-btn-secondary):not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-mono):not(.kt-btn-destructive):not([disabled]) {
  background: var(--gradient-brand);
  border-color: transparent;
}
.kt-btn:not(.kt-btn-secondary):not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-mono):not(.kt-btn-destructive):not([disabled]):hover {
  background: linear-gradient(135deg, #3355d8 0%, #1cb8d4 100%);
}

/* ── Stat card — barre gradient signature ── */
.mz-stat-card-bar::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: 0.75rem 0.75rem 0 0;
}

/* ── Glow on save ── */
@keyframes glow-save {
  0%   { box-shadow: none; }
  50%  { box-shadow: var(--shadow-glow-success); }
  100% { box-shadow: none; }
}
.save-success { animation: glow-save 0.6s ease; }

/* ── Gradient text utilities ── */
.mz-counter,
.mz-text-gradient {
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Health ring ── */
.mz-health-ring {
  transform: rotate(-90deg);
}

/* ── Guild icon wrapper (gradient border dans la bannière) ── */
.mz-guild-icon-wrap {
  padding: 3px;
  border-radius: 18px;
  background: rgba(255,255,255,0.30);
}

.mz-guild-icon-wrap--empty {
  background: rgba(255,255,255,0.15);
}

/* ── Welcome banner dashboard ── */
.mz-welcome-banner {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
}

.mz-welcome-banner * { color: #fff !important; }

.mz-welcome-banner .mz-wb-sub {
  color: rgba(255,255,255,0.70) !important;
}

.mz-welcome-banner .mz-wb-cta {
  background: rgba(255,255,255,0.95) !important;
  color: var(--primary) !important;
}
.mz-welcome-banner .mz-wb-cta:hover {
  background: #fff !important;
}
.mz-welcome-banner .mz-wb-cta i {
  color: var(--primary) !important;
}

.mz-welcome-banner .mz-wb-btn {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  backdrop-filter: blur(8px);
  transition: background 0.18s ease;
}

.mz-welcome-banner .mz-wb-btn:hover {
  background: rgba(255,255,255,0.28);
}

/* ── KPI widget icon ── */
.mz-kpi-icon {
  background: var(--gradient-brand-subtle);
  color: #4263eb;
  transition: transform 0.2s ease;
}

.dark .mz-kpi-icon { color: #7c9df7; }

.kt-card:hover .mz-kpi-icon {
  transform: scale(1.08);
}

/* ── Quick action rows ── */
.mz-quick-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.dark .mz-quick-action:hover {
  background: var(--gradient-brand-subtle);
  border-color: rgba(66, 99, 235,0.25);
}

.mz-quick-action:hover {
  background: rgba(66, 99, 235,0.06);
  border-color: rgba(66, 99, 235,0.15);
}

.mz-quick-action .mz-qa-icon {
  background: var(--gradient-brand-subtle);
  color: #4263eb;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
}

.dark .mz-quick-action .mz-qa-icon { color: #7c9df7; }

/* ── Active module row ── */
.mz-active-module-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.mz-active-module-row:last-child {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════
   BRIDGE V3 → METRONIC — RETIRÉ
   Les vues utilisent désormais exclusivement les composants
   KTUI natifs (kt-card, kt-badge, kt-btn). Seul subsiste
   `.badge-premium`, modificateur de couleur de marque posé
   sur `.kt-badge` (pas d'équivalent KTUI natif).
   ═══════════════════════════════════════════════════ */
.badge-premium {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}

/* ── Log viewer ── */
.mz-log-viewer {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mz-log-ts   { color: var(--muted-foreground); margin-inline-end: 0.5rem; }
.mz-log-info { color: var(--primary); }
.mz-log-warn { color: #F59E0B; }
.mz-log-err  { color: #EF4444; }

/* ── Admin sidebar collapse ── */
#sidebar { transition: transform 0.25s ease; }
body.kt-sidebar-collapse #sidebar {
  transform: translateX(-270px);
  pointer-events: none;
}
body.kt-sidebar-collapse { --sidebar-width: 0px; }
body.kt-sidebar-collapse #sidebar_toggle i {
  transform: rotate(180deg);
}
body.kt-sidebar-collapse ~ * #content,
body.kt-sidebar-collapse > div > div > div {
  transition: margin-inline-start 0.25s ease;
}

/* ── Guild Select — Admin panel column ── */
.mz-admin-panel-col {
  width: 100%;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .mz-admin-panel-col {
    width: 260px;
  }
}

/* ═══════════════════════════════════════════════════
   A11Y — skip-link visible au focus (S4.2)
   ═══════════════════════════════════════════════════ */
.kt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kt-skip-link:focus,
.kt-skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 0.625rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--background, #0f172a);
  color: var(--foreground, #f8fafc);
  border: 2px solid var(--ring, #4263eb);
  border-radius: 8px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  outline: none;
  box-shadow: var(--shadow-glow);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════
   kt-btn-xs — LA CLASSE QUE 35 VUES ÉCRIVENT ET QUE RIEN NE DÉFINISSAIT

   Mesure : 87 occurrences dans 35 vues du panneau, et aucune déclaration —
   ni dans `styles.css` (artefact Metronic pré-compilé), ni ailleurs. Le dépôt
   n'a AUCUNE étape de build Tailwind : l'ensemble des classes utilisables est
   FIGÉ, donc écrire `kt-btn-xs` était un pari qu'aucune commande ne pouvait
   faire gagner. Il se perdait en silence — le bouton s'affiche, simplement à
   la taille par défaut, à côté de voisins `kt-btn-sm` correctement réduits.

   Défini ICI et non dans `styles.css` : cette feuille est la seule que
   `sync-metronic.js` préserve explicitement (« brand.css et app.js custom
   ModzBot sont préservés »), et elle est chargée APRÈS Metronic.

   Les valeurs sont DÉRIVÉES du barème du thème, jamais inventées :
   `kt-btn-sm` = hauteur 7, gap 1.25, padding 2.5, `--text-xs` ;
   `kt-btn-lg` = hauteur 10, gap 1.5,  padding 4,   `--text-sm`.
   Un cran en dessous de `sm` donne donc 6 / 1 / 2 / `--text-2xs`.
   ═══════════════════════════════════════════════════ */
.kt-btn-xs {
  height: calc(var(--spacing) * 6);
  gap: calc(var(--spacing) * 1);
  border-radius: calc(var(--radius) - 2px);
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-2xs);
  line-height: 1rem;
}

/* ═══════════════════════════════════════════════════
   LES CINQ VARIANTES DE BOUTON / BADGE QUE 25 SITES ÉCRIVENT SANS QU'ELLES EXISTENT

   Mesure : `kt-btn-destructive-soft` (8), `kt-badge-danger` (7),
   `kt-btn-success` (7), `kt-btn-warning` (2), `kt-btn-outline-destructive` (1)
   — aucune déclarée. Conséquence visible : le bouton qui VALIDE un virement
   SEPA rendait en gris neutre au lieu de vert, à côté d'un « Rejeter » rouge
   qui, lui, fonctionnait. Une affordance à moitié morte est pire qu'une
   absence d'affordance : elle fait hésiter sur le geste.

   Les couleurs ne sont pas inventées — elles reprennent EXACTEMENT ce que le
   thème pose déjà sur les badges de même nom (`kt-badge-success` utilise
   `--color-green-500` sur blanc, `kt-badge-warning` `--color-yellow-400`), et
   la variante « soft » reprend le couple `--chart-rose` / `--chart-rose-bg` que
   les tuiles du panneau emploient partout. Un ton choisi à l'œil aurait fait
   une sixième palette.
   ═══════════════════════════════════════════════════ */
.kt-btn-success {
  background-color: var(--color-green-500);
  color: var(--color-white);
  border-color: transparent;
}
.kt-btn-warning {
  background-color: var(--color-yellow-400);
  color: var(--color-white);
  border-color: transparent;
}
/* « soft » = le ton du danger sur un fond tamisé, pour une action destructive
   SECONDAIRE (retirer une ligne) qu'un aplat rouge plein rendrait plus
   alarmante que l'action principale de la page. */
.kt-btn-destructive-soft {
  background-color: var(--chart-rose-bg);
  color: var(--chart-rose);
  border-color: transparent;
}
.kt-btn-outline-destructive {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--destructive);
  background-color: transparent;
  color: var(--destructive);
}
/* `danger` est l'ancien nom de `destructive` : sept vues l'écrivent encore.
   Les faire converger d'un côté ou de l'autre changerait 7 ou 40 fichiers pour
   un alias de trois lignes. */
.kt-badge-danger {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}