/* ======================================================================
   NEXUS PREMIUM BRIDGE — Auto-upgrade des classes legacy
   ======================================================================
   Ce fichier intercepte TOUTES les classes existantes (.page-header,
   .kpi-card, .card, .tab-button, .btn-*, .sidebar, .topbar, ...) et
   leur applique le look premium (Apple / Air France La Première) sans
   toucher au JS des composants. Inclus APRÈS nexus.css mais AVANT
   nexus-premium.css pour que les classes .nx-* restent souveraines.
   ====================================================================== */

/* ─── HEADER DE PAGE (legacy .page-header) ──────────────────────────── */
.page-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px;
  padding: 28px 0 24px !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
}
.page-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--txt) !important;
  margin-bottom: 6px !important;
}
.page-subtitle {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-size: 14px !important;
  color: var(--txm) !important;
}
.page-actions { display: flex; gap: 10px; align-items: center; }

/* ─── BOUTONS (legacy .btn / .btn-primary / .btn-secondary / .btn-sm) ── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--txt) !important;
  background: var(--s2) !important;
  border: 1px solid var(--nx-line-strong, rgba(255,255,255,0.10)) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}
.btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(34, 118, 102, 0.45) !important;
  background: var(--s2) !important;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34, 118, 102, 0.25); }

/* Bug existant : .btn-primary utilise --blue. On force teal. */
.btn-primary,
.btn.btn-primary {
  color: #fff !important;
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--tl, #2a9980) !important;
  border-color: var(--tl, #2a9980) !important;
}

.btn-secondary { background: transparent !important; border-color: var(--nx-line-strong, rgba(255,255,255,0.10)) !important; }
.btn-ghost     { background: transparent !important; border-color: transparent !important; }
.btn-ghost:hover { border-color: var(--nx-line-strong, rgba(255,255,255,0.10)) !important; }

.btn-sm, .btn-small { padding: 6px 12px !important; font-size: 11px !important; }
.btn-lg            { padding: 14px 24px !important; font-size: 13px !important; }

/* CTAs gold (finance) */
.btn-gold {
  color: var(--obs) !important;
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}
.btn-gold:hover { background: var(--gl, #d4b86a) !important; border-color: var(--gl, #d4b86a) !important; }

/* ─── KPI CARDS (legacy .kpi-card) ──────────────────────────────────── */
.kpi-card {
  position: relative;
  background: var(--s2) !important;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  border-radius: 8px !important;
  padding: 20px 18px !important;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 260ms ease,
              box-shadow 260ms ease !important;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 50%, transparent 100%);
  opacity: 0.55;
}
.kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--nx-line-strong, rgba(255,255,255,0.10)) !important;
  box-shadow: 0 12px 32px rgba(34, 118, 102, 0.08) !important;
}
.kpi-card.gold::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.kpi-card.rose::before { background: linear-gradient(90deg, transparent, #f43f5e, transparent); }
.kpi-card.success::before,
.kpi-card.green::before { background: linear-gradient(90deg, transparent, var(--grn), transparent); }

.kpi-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--txm) !important;
  margin-bottom: 8px !important;
}
.kpi-value {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--txt) !important;
  font-variant-numeric: tabular-nums !important;
}
.kpi-unit { font-size: 14px !important; color: var(--txm) !important; }

.kpi-mini-value {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--txt) !important;
}
.kpi-mini-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--txm) !important;
}

/* ─── CARDS génériques (.card) ──────────────────────────────────────── */
.card {
  background: var(--s1) !important;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  transition: box-shadow 260ms ease !important;
}
.card:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 36px rgba(0, 0, 0, 0.28) !important; }

/* ─── TAB BUTTONS (legacy .tab-button) ──────────────────────────────── */
.tab-button {
  position: relative;
  padding: 12px 18px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--txm) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  cursor: pointer;
  transition: color 180ms ease !important;
}
.tab-button::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}
.tab-button:hover { color: var(--txt) !important; border-bottom-color: transparent !important; }
.tab-button.active {
  color: var(--txt) !important;
  font-weight: 600 !important;
  border-bottom-color: transparent !important;
}
.tab-button.active::after { transform: scaleX(1); }

/* ─── TOPBAR (header global) ────────────────────────────────────────── */
.topbar {
  background: rgba(11, 13, 13, 0.92) !important;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
.topbar-logo {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--txt) !important;
}
.topbar-subtitle {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  color: var(--txm) !important;
}
.topbar-search {
  background: var(--s2) !important;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  border-radius: 999px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.topbar-search:hover,
.topbar-search:focus-within {
  border-color: rgba(34, 118, 102, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(34, 118, 102, 0.10);
}

/* ─── SIDEBAR (navigation principale) ──────────────────────────────── */
.sidebar {
  background: var(--obs) !important;
  border-right: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
}
.sidebar-section { margin-bottom: 18px; }
.sidebar-section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--txd, #3d5252) !important;
  padding: 0 18px 8px !important;
  opacity: 0.85;
}
.sidebar-item {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  padding: 10px 18px !important;
  margin: 1px 8px !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--txm) !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease !important;
}
.sidebar-item:hover {
  background: rgba(34, 118, 102, 0.06) !important;
  color: var(--txt) !important;
}
.sidebar-item.active {
  background: rgba(34, 118, 102, 0.10) !important;
  color: var(--txt) !important;
  font-weight: 600 !important;
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--teal);
}
.sidebar-icon { opacity: 0.6; transition: opacity 180ms ease; }
.sidebar-item:hover .sidebar-icon,
.sidebar-item.active .sidebar-icon { opacity: 1; }
.sidebar-badge {
  margin-left: auto;
  padding: 2px 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--teal) !important;
  background: rgba(34, 118, 102, 0.12) !important;
  border: 1px solid rgba(34, 118, 102, 0.22) !important;
  border-radius: 999px !important;
}

/* ─── STATUS TAGS ───────────────────────────────────────────────────── */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 1px solid transparent;
}

/* ─── INPUTS & SELECTS (legacy .input-field, form-input, select) ───── */
.input-field, .form-input, input[type="text"]:not(.cl-input):not(.dc-input):not(.cpt-input):not(.nx-input):not(.dfield-input):not(.bm-input):not(.pay-field):not(.fa-input):not(.cvp-input--compact):not(.cvp-form-input):not(.nx-cinput):not(.nx-edit-input):not(.pp-field):not(.bp-cell), input[type="search"], input[type="number"], input[type="email"], textarea, select {
  font-family: 'Montserrat', sans-serif;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.input-field:focus,
.form-input:focus,
select:focus {
  outline: none;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(34, 118, 102, 0.15) !important;
}

/* ─── TABLES (génériques) ───────────────────────────────────────────── */
table.data-table,
table.table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}
table.data-table thead th,
table.table thead th {
  padding: 14px 16px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--txm) !important;
  text-align: left;
  border-bottom: 1px solid var(--nx-line-strong, rgba(255,255,255,0.10)) !important;
  background: transparent !important;
}
table.data-table tbody td,
table.table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  vertical-align: middle;
}
table.data-table tbody tr,
table.table tbody tr {
  transition: background 180ms ease;
}
table.data-table tbody tr:hover,
table.table tbody tr:hover {
  background: rgba(34, 118, 102, 0.04) !important;
}

/* ─── PARAMETRAGE settings sidebar (réutilisée par /parametrage) ────── */
.settings-sidebar { background: var(--obs) !important; border-right: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important; }
.nav-item {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-left: none !important;
  border-radius: 6px;
  margin: 1px 8px;
  padding: 10px 16px !important;
  transition: background 180ms ease, color 180ms ease !important;
}
.nav-item:hover { background: rgba(34, 118, 102, 0.06) !important; color: var(--txt) !important; }
.nav-item.active {
  background: rgba(34, 118, 102, 0.10) !important;
  color: var(--txt) !important;
  font-weight: 600 !important;
  border-left: none !important;
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--teal);
}

/* ─── BLOOMBERG (compta) — harmonisation feutrée ────────────────────── */
.cpt-card,
.fa-card,
.fournisseur-card {
  border-radius: 12px !important;
  border-color: var(--nx-line, rgba(255,255,255,0.06)) !important;
}

/* ─── MODALS — bordure & box-shadow plus doux ───────────────────────── */
.modal,
.modal-content,
.nx-modal {
  border-radius: 12px !important;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 168, 76, 0.06) !important;
}

/* ─── TOASTS ────────────────────────────────────────────────────────── */
.toast,
#toast > * {
  font-family: 'Montserrat', sans-serif;
  border-radius: 8px;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06));
}

/* ─── SCROLLBARS premium globales ───────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(34, 118, 102, 0.20); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(34, 118, 102, 0.40); background-clip: padding-box; border: 2px solid transparent; }

/* ─── Sélection texte ───────────────────────────────────────────────── */
::selection { background: rgba(201, 168, 76, 0.30); color: var(--txt); }

/* ─── ANIMATIONS GLOBALES de transition de vue ──────────────────────── */
.view {
  animation: nx-view-fade 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes nx-view-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── FORM GROUPS / FORM ROWS (génériques) ──────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label,
.form-group > label:first-child {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--txm) !important;
  margin-bottom: 6px !important;
}

/* ─── DASH-* legacy (anciennes classes dashboard) — fallback premium ── */
/* Si certaines pages utilisent encore .dash-* hors dashboard.js refondu */
.dash-card,
.dash-hero-card {
  background: var(--s1) !important;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.dash-card-title,
.dash-hero-label {
  font-family: 'Cormorant Garamond', serif !important;
}

/* ─── Couleurs sémantiques pour les anciens kpi-card variantes ──────── */
.kpi-card.teal .kpi-value { color: var(--teal) !important; }
.kpi-card.gold .kpi-value { color: var(--gold) !important; }
.kpi-card.rose .kpi-value { color: #f43f5e !important; }
.kpi-card.success .kpi-value,
.kpi-card.green .kpi-value { color: var(--grn) !important; }

/* ─── Liens premium ─────────────────────────────────────────────────── */
a:not(.btn):not(.nx-btn):not(.sidebar-item):not(.nav-item):not(.nx-sourcing__btn):not(.nx-btn--primary):not(.nx-btn--gold):not(.nx-btn--ghost) {
  color: var(--teal);
  text-decoration: none;
  transition: opacity 180ms ease;
}
a:not(.btn):not(.nx-btn):not(.sidebar-item):not(.nav-item):not(.nx-sourcing__btn):not(.nx-btn--primary):not(.nx-btn--gold):not(.nx-btn--ghost):hover { opacity: 0.75; }

/* ─── Boutons CTA dans pages avec ＋ emoji unicode → remplacé par + Montserrat ── */
/* Aucune règle nécessaire — le glyphe Unicode reste mais le style s'aligne via .btn */

/* ─── FOCUS ring premium (a11y) ─────────────────────────────────────── */
:focus-visible:not(.btn):not(.nx-btn) {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 118, 102, 0.30);
  border-radius: 4px;
}

/* ─── ASTORM LOGO — refined La Première feel ─────────────────────────── */
.astorm-mark {
  background: linear-gradient(135deg, #d4b86a 0%, #c9a84c 40%, #a8873c 100%) !important;
  border-radius: 6px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(201, 168, 76, 0.4) !important;
}
.astorm-logo-text {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: var(--gold) !important;
}
.astorm-logo-sub {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 8.5px !important;
  letter-spacing: 0.20em !important;
  color: var(--txd) !important;
  text-transform: uppercase;
}

/* ─── GREETING (dashboard legacy) ────────────────────────────────────── */
.greeting-text {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--txt) !important;
}
.greeting-date {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
}

/* ─── Mobile bottom nav (si présente) ────────────────────────────────── */
.mobile-bottom-nav {
  background: rgba(11, 13, 13, 0.92) !important;
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
}

/* ─── KBD (raccourcis clavier) — look macOS ─────────────────────────── */
kbd, .search-kbd {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06)) !important;
  color: var(--txm) !important;
}

/* ─── Pagination (générique) ─────────────────────────────────────────── */
.pagination button,
.pager-btn {
  width: 32px; height: 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--nx-line, rgba(255,255,255,0.06));
  color: var(--txm);
  transition: all 180ms ease;
}
.pagination button:hover,
.pager-btn:hover { border-color: rgba(34, 118, 102, 0.4); color: var(--txt); }
.pagination button.active,
.pager-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ─── PREMIUM — désactivation des "shimmer" gauche-droite trop animés ── */
/* Garde le shimmer subtil de .dc-pipe-fill (la référence) mais retire   */
/* tous les autres effets brillants qui font cheap.                      */
.shine, .glow-animated { animation: none !important; }

/* ─── BACKDROP des overlays (modales, drawers, drawers Spotlight) ───── */
.modal-backdrop,
.nx-modal-backdrop,
.dc-modal-overlay,
.cl-modal-overlay,
.dc-contact-modal-overlay {
  background: rgba(3, 5, 6, 0.72) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
}

/* ─── Anciens .dash-* boutons primaires — alignés sur kit ───────────── */
.dash-cta,
.dash-card-action,
.dash-period-chip {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* ─── Conteneur principal des vues — padding cohérent ───────────────── */
.view {
  padding: 0 32px 48px !important;
}
@media (max-width: 900px) {
  .view { padding: 0 16px 32px !important; }
}

/* Le dashboard et le reporting refondus gèrent leur propre layout via   */
/* nx-page-hero + nx-wrap → ils restent edge-to-edge, non perturbés.    */
.view[data-view="dashboard"],
.view[data-view="reporting"],
.view[data-view="developpement"] {
  padding: 0 !important;
}