/* ============================================================
   premium_overrides.css (v8) — JSL Distribution
   Chargé en DERNIER: garde-fous finaux uniquement.

   Règles:
   - `styles.css` intouchable
   - Aucun layout fixe sur composants métier
   - One-scroll policy: pas de scroll-box vertical interne (hors tables en X)
   ============================================================ */

/* Last-resort anti overflow (certifiable) */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ------------------------------------------------------------
   Commentaires / Réputation — Avis (format ligne par ligne)
   ------------------------------------------------------------ */
.reviews-list {
  max-width: 56.25rem; /* 900px */
  margin: 0.625rem auto 0 auto; /* 10px */
  text-align: left;
}

.review-line {
  display: grid;
  gap: 0.375rem; /* 6px */
  padding: 0.75rem 0.125rem; /* 12px 2px */
}

.review-line__name {
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.review-line__stars {
  font-size: 1rem;
  letter-spacing: 1.5px;
  color: #d1a22b; /* doré sobre */
}

.review-line__text {
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.review-line__note {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: color-mix(in srgb, var(--muted) 80%, var(--primary-500));
}

.reviews-divider {
  height: 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  margin: 0.75rem auto;
  max-width: 56.25rem; /* 900px */
}

@media (prefers-color-scheme: dark) {
  .reviews-divider {
    border-top: 1px solid color-mix(in srgb, var(--border-strong) 85%, transparent);
  }
}

/* ------------------------------------------------------------
   App (enterprise) — Badges débit/crédit + previews
   ------------------------------------------------------------ */
.badge.credit {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #22c55e;
}

.badge.debit {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.preview-frame,
.preview-frame iframe {
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   Box Uniformization — standard visuel cohérent (v1)
   Toutes les boîtes/cartes/panneaux du projet suivent le même
   système de tokens. styles.css étant intouchable, ces overrides
   sont appliqués ici (chargé EN DERNIER).
   ============================================================ */

/* ── Grandes cartes (radius 16px) ─────────────────────────── */
.summary-card,
.sidebar-box,
.depot-box,
.employe-container,
.container-box {
  border-radius: var(--premium-radius-16, 16px) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow) !important;
  background: var(--card) !important;
}
.summary-card:hover,
.sidebar-box:hover,
.depot-box:hover,
.employe-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover) !important;
}

/* ── Cartes compactes (radius 12px) ───────────────────────── */
.summary-box,
.section-box {
  border-radius: var(--premium-radius-12, 12px) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow) !important;
  background: var(--card) !important;
}

/* ── Boîtes colorées (gradient conservé) ─────────────────── */
.balance-box,
.retrait-box {
  border-radius: var(--premium-radius-16, 16px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ── Enterprise form components (radius 12px) ────────────── */
.enterprise-feedforward,
.enterprise-form-section,
.enterprise-feedback,
.enterprise-form-notice {
  border-radius: var(--premium-radius-12, 12px) !important;
}

/* ── Badge warn (contre-écriture / alertes) ──────────────── */
.badge.warn {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fbbf24;
}

/* ============================================================
   Harmonisation palette — pages legacy (design system global)
   Tokens : --primary-500 (#1f3c88), --danger (#c3002f), etc.
   ============================================================ */

/* ── Breadcrumb (toutes pages) ───────────────────────────── */
.app-layout .enterprise-breadcrumb__link {
  color: var(--primary-500);
  font-weight: 600;
  transition: color 0.12s ease;
}
.app-layout .enterprise-breadcrumb__link:hover {
  color: var(--primary-600);
  text-decoration: underline;
}
.app-layout .enterprise-breadcrumb__sep {
  color: var(--muted);
  opacity: 0.6;
}

/* ── Titre de page "section-title modern" : soulignement
      dégradé accent + success (signature visuelle) ───────── */
.app-main .section-title.modern {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.app-main .section-title.modern::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  width: 140px;
  max-width: 45%;
  background: linear-gradient(90deg, var(--primary-500) 0%, #4f77c4 55%, #0f766e 100%);
  border-radius: 2px;
}
/* Variante centrée (utilisée sur certaines pages) */
.app-main .guided-center > .section-title.modern {
  text-align: center;
}
.app-main .guided-center > .section-title.modern::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ── Sous-titres (h2 des cartes) : barre verticale accent ── */
.app-main .section-subtitle {
  color: var(--primary-500);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.app-main .section-subtitle::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 20px;
  background: linear-gradient(180deg, var(--primary-500) 0%, #4f77c4 100%);
  border-radius: 3px;
  display: inline-block;
}

/* ── Cartes .login-card : liseré haut dégradé subtil ─────── */
.app-main .login-card.fadeIn {
  position: relative;
  overflow: hidden;
}
.app-main .login-card.fadeIn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-500) 0%, #4f77c4 55%, #0f766e 100%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* ── summary-box : grille + .summary-card avec barres cycliques */
.app-main .summary-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.app-main .summary-card {
  position: relative;
  padding: 14px 16px 14px 20px;
  overflow: hidden;
}
.app-main .summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}
.app-main .summary-box > .summary-card:nth-child(4n+1)::before {
  background: linear-gradient(180deg, var(--primary-500) 0%, #4f77c4 100%);
}
.app-main .summary-box > .summary-card:nth-child(4n+2)::before {
  background: linear-gradient(180deg, #4f77c4 0%, var(--primary-500) 100%);
}
.app-main .summary-box > .summary-card:nth-child(4n+3)::before {
  background: linear-gradient(180deg, #0f766e 0%, #0a5e58 100%);
}
.app-main .summary-box > .summary-card:nth-child(4n+4)::before {
  background: linear-gradient(180deg, #b45309 0%, #8a3f07 100%);
}
.app-main .summary-card strong {
  color: var(--fg);
  font-size: 16px;
  display: inline-block;
  margin-top: 4px;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

/* ── Tableaux .enterprise-table.styled-table : thead accent ─── */
/* Note : styles.css applique `-webkit-text-fill-color: transparent` + background-clip: text
   au thead pour un effet de dégradé sur texte ; on neutralise ici pour garantir la lisibilité. */
.app-main .enterprise-table.styled-table thead th {
  background: rgba(31, 60, 136, 0.08) !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--primary-500) !important;
  border-bottom: 2px solid var(--primary-500);
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11.5px;
}
.app-main .enterprise-table.styled-table tbody tr {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.app-main .enterprise-table.styled-table tbody tr:nth-child(even) {
  background: #fbfcfe;
}
.app-main .enterprise-table.styled-table tbody tr:hover {
  background: rgba(31, 60, 136, 0.045);
  box-shadow: inset 3px 0 0 0 var(--primary-500);
}
.app-main .enterprise-table.styled-table tbody td {
  font-variant-numeric: tabular-nums;
}

/* ── Cellules fin-mono : teinte accent, ligatures propres ── */
.app-main .fin-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--primary-500);
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Boutons legacy .btn.btn-muted : bordure accent + hover plein */
.app-main .btn.btn-muted {
  background: #fff;
  border: 1px solid rgba(31, 60, 136, 0.28);
  color: var(--primary-500);
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.app-main .btn.btn-muted:hover {
  background: var(--primary-500);
  color: #fff;
  border-color: var(--primary-500);
  box-shadow: 0 4px 12px rgba(31, 60, 136, 0.22);
}

/* ── Texte "enterprise-boxtext muted" : homogène ──────────── */
.app-main .enterprise-boxtext.enterprise-boxtext--muted {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.2px;
}

/* ── Mode sombre : ajustements palette + contrastes ───────── */
@media (prefers-color-scheme: dark) {
  /* Cartes legacy */
  .app-main .login-card.fadeIn { background: var(--card); color: var(--fg); }
  .app-main .summary-card,
  .app-main .summary-box > .summary-card { background: var(--card); color: var(--fg); }
  .app-main .summary-card strong { color: var(--fg); }

  /* Titres / sous-titres */
  .app-main .section-title.modern,
  .app-main .section-subtitle { color: var(--fg); }
  .app-main .section-subtitle { color: var(--primary-500); }

  /* Texte muted : lisible sur fond sombre */
  .app-main .enterprise-boxtext.enterprise-boxtext--muted { color: var(--muted); }

  /* Tables legacy .enterprise-table.styled-table : header accent + zebra */
  .app-main .enterprise-table.styled-table { background: var(--card); }
  .app-main .enterprise-table.styled-table thead th {
    background: rgba(96, 165, 250, 0.12) !important;
    color: var(--primary-500) !important;
    border-bottom-color: var(--primary-500);
  }
  .app-main .enterprise-table.styled-table tbody tr { background: var(--card); }
  .app-main .enterprise-table.styled-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
  }
  .app-main .enterprise-table.styled-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.08);
  }
  .app-main .enterprise-table.styled-table tbody td { color: var(--fg); border-bottom-color: var(--border-strong); }

  /* Boutons legacy */
  .app-main .btn.btn-muted {
    background: transparent;
    color: var(--primary-500);
    border-color: rgba(96, 165, 250, 0.35);
  }
  .app-main .btn.btn-muted:hover {
    background: var(--primary-500);
    color: #0b1220;
  }

  /* fin-mono — couleur adaptée au fond sombre */
  .app-main .fin-mono { color: var(--primary-500); }

  /* Badges credit/debit/warn : contrastes sombres */
  .app-main .badge.credit { background: rgba(52, 211, 153, 0.15); color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
  .app-main .badge.debit  { background: rgba(248, 113, 113, 0.15); color: #f87171; border-color: rgba(248, 113, 113, 0.35); }
  .app-main .badge.warn   { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }
}

/* Duplication pour le mode sombre manuel (classes explicites) */
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .login-card.fadeIn,
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .summary-card,
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .enterprise-table.styled-table {
  background: var(--card);
  color: var(--fg);
}
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .enterprise-table.styled-table thead th {
  background: rgba(96, 165, 250, 0.12) !important;
  color: var(--primary-500) !important;
  border-bottom-color: var(--primary-500);
}
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .enterprise-table.styled-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .enterprise-table.styled-table tbody tr:hover {
  background: rgba(96, 165, 250, 0.08);
}
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .btn.btn-muted {
  background: transparent;
  color: var(--primary-500);
  border-color: rgba(96, 165, 250, 0.35);
}
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .badge.credit { background: rgba(52, 211, 153, 0.15); color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .badge.debit  { background: rgba(248, 113, 113, 0.15); color: #f87171; border-color: rgba(248, 113, 113, 0.35); }
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) .app-main .badge.warn   { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }