/* ═══════════════════════════════════════════════════════════════
   SERA CAPITAL ECOSYSTEM — MASTER UNIFIED DESIGN SYSTEM
   Version 37.0 (Unified Across All 13 Applications)
   Source unique : packages/ui-theme/sera-core.css, symlinké dans
   chaque apps/<app>/public/sera-core.css — ne plus éditer les copies.
   ⚠️ Jamais d'astérisque suivi d'une barre oblique dans un commentaire : il le fermerait
   (c'est ce qui invalidait l'@import des polices et tout le bloc :root jusqu'en v36).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─── 1. GLOBAL DESIGN TOKENS & ROOTS ────────────────────────────── */
:root {
  /* Background Palette (Obsidian Deep Space Charcoal / Midnight Navy) */
  --bg-primary: #060913;
  --bg-base: #060913;
  --bg-surface: rgba(18, 26, 52, 0.72);
  --bg-card: rgba(22, 32, 62, 0.65);
  --bg-card-hover: rgba(30, 44, 84, 0.75);
  --bg-input: rgba(13, 19, 36, 0.75);
  --bg-dark: #060913;
  --bg-panel: rgba(18, 26, 52, 0.72);

  /* Glass Borders */
  --panel-border: rgba(255, 255, 255, 0.10);
  --panel-border-hover: rgba(255, 255, 255, 0.22);
  --border-color: rgba(255, 255, 255, 0.10);
  --border-card: rgba(255, 255, 255, 0.10);
  --border-focus: var(--primary, #8b5cf6);

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #7d8ba1; /* v37 : 5,4:1 sur #060913 (WCAG AA) ; l'ancien #64748b plafonnait à 4,1:1 */
  --text-main: #f8fafc;

  /* Universal Fonts */
  --font-display: 'Space Grotesk', sans-serif;
  --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Universal Border Radius System */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-card: 18px;
  --radius: 18px;
  --radius-pill: 9999px;
  --border-radius: 18px;

  /* Default Primary Theme Colors (Overridden by individual app style.css) */
  --primary: #8b5cf6;
  --primary-light: #c4b5fd;
  --primary-glow: rgba(139, 92, 246, 0.45);
  
  /* Semantic Colors */
  --accent-gold: #f59e0b;
  --accent-emerald: #10b981;
  --accent-blue: #3b82f6;
  --accent-red: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --error: #ef4444;
  --info: #3b82f6;

  /* Standard Elevation & Glow Shadows */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 25px var(--primary-glow, rgba(139, 92, 246, 0.3));

  /* Animations & Easing */
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── COMPATIBILITY ALIASES (used in all apps, defined here once) ─────────
     These prevent var() from resolving to empty → which causes white bg.
     Every app's style.css used these names but they were never in sera-core.
     ─────────────────────────────────────────────────────────────────────── */
  --bg-main: #060913;
  --bg-color: #060913;
  --bg-grid: #0f1526;
  --panel-bg: rgba(18, 26, 52, 0.72);
  --glass-bg: rgba(22, 32, 62, 0.65);
  --glass-blur: blur(16px);
  --border-hover: rgba(255, 255, 255, 0.22);
  --text-normal: #f8fafc;
  --primary-hover: var(--primary-light, #c4b5fd);
  --bg-secondary: rgba(18, 26, 52, 0.85);
  --bg-glass: rgba(22, 32, 62, 0.65);
}

/* ─── 2. UNIVERSAL RESET & BASE STYLES ───────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--bg-primary, #060913) !important;
  color: var(--text-primary, #f8fafc) !important;
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hidden {
  display: none !important;
}

body {
  min-height: 100vh;
  background-color: var(--bg-primary, #060913) !important;
  background-image: none !important;
  color: var(--text-primary, #f8fafc) !important;
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  line-height: 1.5;
  overflow-x: clip;
}

/* ─── UNIVERSAL TYPOGRAPHY SYSTEM (Identical Across All Apps) ────── */
h1, h2, h3, h4, h5, h6,
.card-title,
.header-title,
.section-title,
.card-header-premium h3,
.logo-text,
.hero-title,
.hero-subtitle,
.page-title {
  font-family: var(--font-title, 'Outfit', 'Inter', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

p, span, a, label, li, td, th, div, button, input, select, textarea {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.kpi-title,
.kpi-lbl,
.kpi-label {
  font-family: var(--font-title, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary, #94a3b8) !important;
  letter-spacing: 0.2px !important;
}

.kpi-val,
.kpi-value,
.stat-val,
.stat-value,
.number,
.crypto-amount,
.currency,
.amount {
  font-family: var(--font-mono, 'JetBrains Mono', 'Space Grotesk', monospace) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.kpi-subtitle,
.kpi-sub {
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 0.72rem !important;
  color: var(--text-muted, #64748b) !important;
  font-weight: 500 !important;
}

/* ─── UNIFIED BACKGROUND OVERRIDES (Remove conflicting app gradients) */
.space-bg,
.app-bg,
.bg-gradient {
  background: var(--bg-primary, #060913) !important;
  background-image: none !important;
}

.glow-orb,
.orb-1,
.orb-2,
.orb-3,
.blob,
.blob-1,
.blob-2,
.blob-3 {
  display: none !important;
}

/* ─── 4. UNIVERSAL DESKTOP TABBAR / SUB-NAV ──────────────────────── */
/* Outer wrappers MUST NEVER have padding or margin around the tabbar */
body,
html,
.dashboard-container,
.app-container,
.app-shell,
.view {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Universal Navigation Container: Always visible by default on desktop, tablet, and iframes */
.sub-nav,
.sera-tabbar,
.plant-tabs,
.tax-tabs,
.app-nav,
.nav-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 24px 2rem 0 2rem !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 !important;
  background: rgba(9, 13, 26, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: none !important;
  border-bottom: 1px solid var(--panel-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sub-nav::-webkit-scrollbar,
.sera-tabbar::-webkit-scrollbar,
.plant-tabs::-webkit-scrollbar,
.tax-tabs::-webkit-scrollbar,
.app-nav::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar {
  display: none !important;
}

/* Universal Tab Buttons */
.nav-tab,
.tab-btn,
.sub-nav a,
.sub-nav button,
.sera-tabbar a,
.sera-tabbar button,
.plant-tabs button,
.tax-tabs button,
.app-nav button,
.nav-tabs button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-secondary, #94a3b8) !important;
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 14px 10px 14px !important;
  height: auto !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

/* Strict text inheritance for all inner spans */
.sub-nav .nav-tab span:not(.tab-badge):not(.badge),
.sub-nav .tab-btn span:not(.tab-badge):not(.badge),
.sera-tabbar .nav-tab span:not(.tab-badge):not(.badge),
.sera-tabbar .tab-btn span:not(.tab-badge):not(.badge),
.plant-tabs .tab-btn span:not(.tab-badge):not(.badge),
.tax-tabs .nav-tab span:not(.tab-badge):not(.badge),
.app-nav .tab-btn span:not(.tab-badge):not(.badge),
.nav-tabs .nav-tab span:not(.tab-badge):not(.badge) {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* Strict 16px icon sizing across all tabs */
.nav-tab i,
.nav-tab svg,
.tab-btn i,
.tab-btn svg,
.sub-nav a i,
.sub-nav a svg,
.sub-nav button i,
.sub-nav button svg,
.sera-tabbar a i,
.sera-tabbar a svg,
.sera-tabbar button i,
.sera-tabbar button svg,
.plant-tabs button i,
.plant-tabs button svg,
.tax-tabs button i,
.tax-tabs button svg,
.app-nav button i,
.app-nav button svg,
.nav-tabs button i,
.nav-tabs button svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.nav-tab:hover,
.tab-btn:hover,
.sub-nav a:hover,
.sub-nav button:hover,
.sera-tabbar a:hover,
.sera-tabbar button:hover,
.plant-tabs button:hover,
.tax-tabs button:hover,
.app-nav button:hover,
.nav-tabs button:hover {
  color: var(--text-primary, #ffffff) !important;
}

.nav-tab:hover:not(.active),
.tab-btn:hover:not(.active),
.sub-nav a:hover:not(.active),
.sub-nav button:hover:not(.active),
.sera-tabbar a:hover:not(.active),
.sera-tabbar button:hover:not(.active),
.plant-tabs button:hover:not(.active),
.tax-tabs button:hover:not(.active),
.app-nav button:hover:not(.active),
.nav-tabs button:hover:not(.active) {
  border-bottom-color: transparent !important;
}

.nav-tab:hover i,
.nav-tab:hover svg,
.tab-btn:hover i,
.tab-btn:hover svg {
  color: var(--text-primary, #ffffff) !important;
  stroke: var(--text-primary, #ffffff) !important;
}

/* Active Tab State */
.nav-tab.active,
.tab-btn.active,
.sub-nav a.active,
.sub-nav button.active,
.sera-tabbar a.active,
.sera-tabbar button.active,
.plant-tabs button.active,
.tax-tabs button.active,
.app-nav button.active,
.nav-tabs button.active {
  color: var(--primary-light, var(--primary, #c4b5fd)) !important;
  border-bottom: 2px solid var(--primary, #8b5cf6) !important;
  text-shadow: 0 0 12px var(--primary-glow, rgba(139, 92, 246, 0.45)) !important;
  font-weight: 600 !important;
  background: transparent !important;
  transform: none !important;
}

.nav-tab.active i,
.nav-tab.active svg,
.tab-btn.active i,
.tab-btn.active svg {
  color: var(--primary, #8b5cf6) !important;
  stroke: var(--primary, #8b5cf6) !important;
  filter: drop-shadow(0 0 6px var(--primary-glow, rgba(139, 92, 246, 0.45))) !important;
}

/* ─── 4.1. UNIFIED CONTENT SPACING (Directly below Tabbar - 100% FULL WIDTH) ───────── */
/* SINGLE SOURCE OF TRUTH for the gap between the tabbar/header and the first/last
   content element, desktop and mobile alike. No app's own stylesheet should
   redeclare padding on these selectors — that's what caused every app to drift
   to a slightly different value before this pass unified them. */

.app-main-content,
.dashboard,
.app-content,
.tax-main,
.main-content,
.dashboard-grid,
.dashboard-main,
.hub-container,
#page-container,
.page,
.app-shell,
.plants-container,
.plant-care-main,
.cinevault-main,
.watchlist-main,
.content-wrapper,
#main-content,
.page-container,
.tab-pane {
  padding-top: 1.5rem !important;
  padding-bottom: 2.5rem !important;
  padding-left: 2.0rem !important;
  padding-right: 2.0rem !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.app-main-content > *:first-child,
.dashboard > *:first-child,
.app-content > *:first-child,
.tax-main > *:first-child,
.main-content > *:first-child,
.media-container > *:first-child,
.dashboard-grid > *:first-child,
.dashboard-main > *:first-child,
.hub-container > *:first-child,
#page-container > *:first-child,
.page-container > *:first-child,
.tab-pane > *:first-child,
.tab-content > *:first-child {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .app-main-content,
  .dashboard,
  .app-content,
  .tax-main,
  .main-content,
  .dashboard-grid,
  .dashboard-main,
  .hub-container,
  #page-container,
  .page,
  .app-shell,
  .plants-container,
  .plant-care-main,
  .cinevault-main,
  .watchlist-main,
  .content-wrapper,
  #main-content,
  .page-container,
  .tab-pane {
    padding-top: 1.25rem !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 16px)) !important;
    padding-left: 1.0rem !important;
    padding-right: 1.0rem !important;
  }

  /* Hub's own pages have no mobile bottom bar (its app-switcher is card-based,
     not a tab strip) — they only need to clear the safe area, not a 64px nav. */
  .page {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 16px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   📱 UNIVERSAL MOBILE BOTTOM BAR (STRICT WATCHLIST / DEV HUB STANDARD)
   ══════════════════════════════════════════════════════════════════ */

.mobile-bottom-bar {
  display: none !important;
}

@media (max-width: 768px) {
  .sub-nav,
  .sera-tabbar,
  .plant-tabs,
  .tax-tabs,
  .app-nav,
  .nav-tabs {
    display: none !important;
  }

  .mobile-bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    background: #060913 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 0.25rem env(safe-area-inset-bottom, 0) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-bottom-bar .mobile-nav-item,
  .mobile-bottom-bar .nav-tab,
  .mobile-bottom-bar .tab-btn,
  .mobile-bottom-bar button,
  .mobile-bottom-bar a {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    color: var(--text-secondary, #94a3b8) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    flex: 1 !important;
    height: 100% !important;
    cursor: pointer !important;
    padding: 6px 0 !important;
    transition: all 0.2s ease !important;
    font-family: var(--font-title, 'Outfit', sans-serif) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  .mobile-bottom-bar .mobile-nav-item span:not(.mobile-badge),
  .mobile-bottom-bar .nav-tab span:not(.mobile-badge),
  .mobile-bottom-bar .tab-btn span:not(.mobile-badge),
  .mobile-bottom-bar button span:not(.mobile-badge),
  .mobile-bottom-bar a span:not(.mobile-badge),
  .mobile-bottom-bar span:not(.mobile-badge) {
    font-family: var(--font-title, 'Outfit', sans-serif) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    display: block !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    color: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .mobile-bottom-bar svg,
  .mobile-bottom-bar i,
  .mobile-bottom-bar .mobile-nav-item svg,
  .mobile-bottom-bar .mobile-nav-item i,
  .mobile-bottom-bar .nav-tab svg,
  .mobile-bottom-bar .nav-tab i,
  .mobile-bottom-bar button svg,
  .mobile-bottom-bar button i {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    display: block !important;
    margin: 0 auto !important;
    stroke: currentColor !important;
  }

  .mobile-bottom-bar .mobile-nav-item:hover,
  .mobile-bottom-bar .nav-tab:hover,
  .mobile-bottom-bar button:hover {
    color: #ffffff !important;
  }

  .mobile-bottom-bar .mobile-nav-item.active,
  .mobile-bottom-bar .nav-tab.active,
  .mobile-bottom-bar .tab-btn.active,
  .mobile-bottom-bar button.active,
  .mobile-bottom-bar a.active {
    color: var(--primary-light, var(--primary, #c4b5fd)) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }

  .mobile-bottom-bar .mobile-nav-item.active svg,
  .mobile-bottom-bar .mobile-nav-item.active i,
  .mobile-bottom-bar .nav-tab.active svg,
  .mobile-bottom-bar .nav-tab.active i,
  .mobile-bottom-bar button.active svg,
  .mobile-bottom-bar button.active i {
    color: var(--primary, #8b5cf6) !important;
    stroke: var(--primary, #8b5cf6) !important;
    transform: translateY(-2px) !important;
  }
}

/* ─── 6. GLASSMORPHISM CARDS & PANELS — SUBTLE, FLAT-LEANING DEPTH ──────── */
/* v2: replaced the old "3D tactile relief" treatment (a heavy 30px/0.55-opacity
   drop shadow on every single card, everywhere, all the time) with a much
   quieter resting shadow. A screen with a dozen cards should read as a calm
   grid, not a pile of independently floating panels. */
.glass-card,
.glass-panel,
.cockpit-card,
.card,
.hub-card,
.kpi-card,
.chart-section,
.agents-section,
.summary-card,
.widget,
.plant-card,
.watchlist-card,
.tax-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(18, 26, 52, 0.72) !important;
  background-color: rgba(18, 26, 52, 0.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: var(--radius-card, 18px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 16px -10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transition: all var(--transition-smooth) !important;
  position: relative !important;
}

.glass-card:hover,
.glass-panel:hover,
.cockpit-card:hover,
.hub-card:hover,
.kpi-card:hover,
.card:hover,
.plant-card:hover,
.watchlist-card:hover,
.tax-card:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28), 0 10px 24px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ─── 7. KPI CARDS & GRIDS ───────────────────────────────────────── */
.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  width: 100% !important;
  margin-bottom: 1.5rem !important;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
}

.kpi-card {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.25rem 1.5rem !important;
}

.kpi-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: var(--primary, #8b5cf6) !important;
}

.kpi-icon svg,
.kpi-icon i {
  width: 22px !important;
  height: 22px !important;
}

.kpi-val,
.kpi-value {
  font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
}

.kpi-lbl,
.kpi-label {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ─── 8. BUTTONS & BADGES ────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: none !important;
}

.btn-primary {
  background: var(--primary, #8b5cf6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 15px var(--primary-glow, rgba(139, 92, 246, 0.3)) !important;
}

.btn-primary:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 0 22px var(--primary-glow, rgba(139, 92, 246, 0.5)) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--panel-border) !important;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: var(--panel-border-hover) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--text-secondary) !important;
}

.btn-ghost:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.tab-badge,
.badge {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--primary-light, var(--primary, #c4b5fd)) !important;
  border: 1px solid var(--panel-border) !important;
  font-family: var(--font-mono, monospace) !important;
}

/* ─── 9. FORM INPUTS & CONTROLS ──────────────────────────────────── */
.input-group,
.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  margin-bottom: 1rem !important;
}

.input-group label,
.form-group label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
  background: var(--bg-input) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;
  outline: none !important;
  transition: all var(--transition-fast) !important;
  width: 100% !important;
  color-scheme: dark !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary, #8b5cf6) !important;
  box-shadow: 0 0 12px var(--primary-glow, rgba(139, 92, 246, 0.25)) !important;
}

/* Universal Search Inputs with Icons (Anti-overlap master fix) */
.search-box input,
.search-box .input-field,
.search-input-wrapper input,
.search-input-wrapper .input-field,
.search-input-wrap input,
.search-wrapper input,
.search-container input,
.search-bar input,
.filter-search-wrapper input,
.filter-search-wrapper .input-field,
.sm-search-input,
.sm-search-wrap input,
.sm-search-row input,
.search-input,
input.search-input,
input#search-input,
input#sm-search-input,
input#holdings-search-input,
input#news-search-input,
input#feed-search-input,
input#artists-search-input,
input#spotify-search-input,
input#drawer-artist-search,
input#drawer-genre-search,
input#archive-search,
input#task-search-input {
  padding-left: 2.6rem !important;
}

/* ─── 10. MODALS & DIALOGS ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 1.5rem;
}

/* Modals opened via active, open, show, or without .hidden */
.modal-overlay:not(.hidden):not([style*="display: none"]),
.modal-overlay.active,
.modal-overlay.open,
.modal-overlay.show,
.modal-overlay.is-open {
  display: flex;
}

/* Always force hidden when .hidden or [hidden] is present */
.modal-overlay.hidden,
.hidden,
[hidden] {
  display: none !important;
}

.modal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%), #0d1324 !important;
  background-color: #0d1324 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--radius-card, 18px) !important;
  padding: 2rem !important;
  max-width: 580px !important;
  width: 100% !important;
  box-shadow: var(--shadow-lg), 0 0 35px var(--primary-glow, rgba(139, 92, 246, 0.2)), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  position: relative !important;
}

.modal-content {
  background: #0d1324 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--radius-card, 18px) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-lg), 0 0 35px var(--primary-glow, rgba(139, 92, 246, 0.2)), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  position: relative !important;
}

/* ─── 11. UNIFIED PREMIUM SCROLLBARS ─────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(6, 7, 9, 0.4);
  backdrop-filter: blur(8px);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary, rgba(139, 92, 246, 0.45)), rgba(255, 255, 255, 0.2));
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary, rgba(139, 92, 246, 0.85));
  box-shadow: 0 0 10px var(--primary-glow, rgba(139, 92, 246, 0.5));
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary, rgba(139, 92, 246, 0.45)) rgba(6, 7, 9, 0.4);
}

/* ─── 12. UNIFIED PREMIUM LOADER ─────────────────────────────────── */
#loader-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--bg-primary, #060913) !important;
  background-image: none !important;
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  gap: 0;
}

#loader-overlay.loader-exit,
#loader-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(1.04) !important;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease !important;
}

.loader-icon-wrapper {
  position: relative !important;
  width: 96px !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
}

.loader-glow-halo {
  position: absolute !important;
  inset: -10px !important;
  border-radius: 50% !important;
  background: var(--primary-glow, rgba(59, 130, 246, 0.3)) !important;
  filter: blur(14px) !important;
  animation: loader-pulse 2s ease-in-out infinite !important;
}

.loader-icon-inner {
  position: relative !important;
  z-index: 2 !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--primary, rgba(139, 92, 246, 0.3)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 30px var(--primary-glow, rgba(139, 92, 246, 0.2)), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.loader-icon-inner svg {
  width: 42px !important;
  height: 42px !important;
}

.loader-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 96px !important;
  height: 96px !important;
  transform: rotate(-90deg) !important;
  pointer-events: none !important;
}

.loader-rect {
  fill: none !important;
  stroke: var(--primary, #3b82f6) !important;
  stroke-width: 2.5px !important;
  stroke-linecap: round !important;
  stroke-dasharray: 289 !important;
  animation: loader-rect-stroke 2s ease-in-out infinite !important;
  filter: drop-shadow(0 0 5px var(--primary-glow, rgba(59, 130, 246, 0.6))) !important;
}

.loader-app-name {
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 6px 0 !important;
  line-height: 1 !important;
}

.loader-app-subtitle {
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--primary, #3b82f6) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 0 0 28px 0 !important;
}

.loader-progress-track {
  width: 220px !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  position: relative !important;
}

.loader-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, transparent 0%, var(--primary, #3b82f6) 45%, rgba(255, 255, 255, 0.9) 75%, transparent 100%) !important;
  box-shadow: 0 0 10px var(--primary-glow, rgba(59, 130, 246, 0.8)) !important;
  animation: loader-indeterminate-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

.loader-status-text {
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

@keyframes loader-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50% { opacity: 0.85; transform: scale(1.12); }
}

@keyframes loader-rect-stroke {
  0% { stroke-dashoffset: 289; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -289; }
}

@keyframes loader-indeterminate-slide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(15%); }
  100% { transform: translateX(100%); }
}



/* Universal Segmented Controls & Pill Toggles (Compact Mobile Padding) */
.segment-btn,
.segment-btn-group button,
.timeframe-btn,
.timeframe-toggle button,
.toggle-btn,
.toggle-group button,
.tab-pill,
.tab-pills button,
.pill-btn,
.btn-pill,
.btn-toggle,
.period-btn,
.range-btn {
  padding: 0.35rem 0.75rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: 7px !important;
  height: auto !important;
}


/* 🔍 UNIVERSAL ROUNDED PILL SEARCH BARS */
.search-input-wrap,
.search-input-wrapper,
.search-box,
.search-bar,
.sm-search-wrapper,
.table-search {
  border-radius: 99px !important;
}

.search-input-wrap input,
.search-input-wrapper input,
.search-box input,
.search-bar input,
.sm-search-wrapper input,
.table-search input,
input[type="search"],
input.search-input {
  border-radius: 99px !important;
}



/* 💬 CHAT INPUT WRAPPER & INNER TEXTAREA UNIVERSAL ELEGANT STYLING */
.chat-input-wrapper {
  background: rgba(14, 20, 36, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px !important;
  padding: 0.65rem 0.75rem 0.65rem 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-height: 76px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.chat-input-wrapper:focus-within {
  border-color: var(--primary, #3b82f6) !important;
  box-shadow: 0 0 16px var(--primary-glow, rgba(59, 130, 246, 0.3)) !important;
}

.chat-input-wrapper textarea,
#chat-user-input,
.chat-input-bar textarea {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.4rem !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  min-height: 58px !important;
  height: 58px !important;
  max-height: 160px !important;
  overflow-y: hidden !important;
  resize: none !important;
  color: #fff !important;
  width: 100% !important;
}

.chat-input-wrapper textarea:focus,
#chat-user-input:focus,
.chat-input-bar textarea:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}



/* 📱 UNIVERSAL MOBILE MODAL ALIGNMENT & COMPACT SIZING */
@media (max-width: 768px) {
  .modal-overlay, .modal-backdrop { position: fixed !important; inset: 0 !important; padding: 12px 12px 35px 12px !important; align-items: center !important; justify-content: center !important; overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 999999 !important;
  }

  .modal-card,
  .modal-content {
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    padding: 12px 14px !important;
    margin: 8px auto !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .modal-header {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }

  .modal-header h3 {
    font-size: 1.05rem !important;
  }

  .form-group {
    margin-bottom: 8px !important;
  }

  .form-group label {
    font-size: 0.76rem !important;
    margin-bottom: 2px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 7px 10px !important;
    font-size: 0.86rem !important;
  }

  .modal-footer,
  .modal-actions {
    margin-top: 10px !important;
    padding-top: 8px !important;
  }
}


/* 🛡️ MODAL BODY ZERO-NESTED-BORDER RULE */
.modal-body {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}


/* 🛡️ ZERO DOUBLE SCROLLBAR OVERLAY RULE */
.modal-overlay,
.modal-backdrop,
#detail-modal,
#search-modal {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

.modal-content,
.modal-card {
  max-height: calc(100vh - 85px) !important;
  max-height: calc(100dvh - 85px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal-body {
  overflow: visible !important;
  max-height: none !important;
  border: none !important;
  box-shadow: none !important;
}



/* ══════════════════════════════════════════════════════════════════
   💎 UNIFIED SEAMLESS GLASS MODAL CARD SYSTEM (ZERO PATCHWORK BANDS)
   ══════════════════════════════════════════════════════════════════ */

.modal-overlay,
.modal-backdrop,
.sm-backdrop,
.cmd-palette-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(3, 5, 10, 0.86) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  animation: modalOverlayFadeIn 0.2s ease-out forwards;
}

.modal-overlay.hidden,
.modal-backdrop.hidden,
.sm-backdrop.hidden,
.cmd-palette-overlay.hidden {
  display: none !important;
}

/* 💎 ONE UNIFIED CONTINUOUS SEAMLESS CARD */
.modal-card,
.modal-content,
.sm-panel,
.cmd-palette-box {
  position: relative !important;
  background: #0b0f19 !important; /* Single uniform dark slate obsidian background */
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95) !important;
  width: 100% !important;
  max-width: 580px !important;
  max-height: calc(100vh - 80px) !important;
  max-height: calc(100dvh - 80px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: auto !important;
  animation: modalContentZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 💎 EN-TÊTE SEAMLESS SANS BANDEAU DE COULEUR DIFFÉRENTE */
.modal-header,
.modal-header-premium,
.sm-header,
.cmd-palette-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 8px 20px !important;
  border-bottom: none !important; /* No dividing band line */
  background: transparent !important; /* Seamless with card */
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.modal-header h2,
.modal-header h3,
.modal-header-premium h2,
.modal-header-premium h3,
.modal-title {
  margin: 0 !important;
  font-family: var(--font-title, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

.modal-close,
.btn-close,
.icon-btn-close,
.close-modal-btn,
.sm-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.modal-close:hover,
.btn-close:hover,
.icon-btn-close:hover,
.close-modal-btn:hover,
.sm-close-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.modal-close svg,
.modal-close i,
.btn-close svg,
.btn-close i,
.icon-btn-close svg,
.icon-btn-close i,
.close-modal-btn svg,
.close-modal-btn i,
.sm-close-btn svg,
.sm-close-btn i {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

/* 💎 CORPS CONTINU SEAMLESS */
.modal-body,
.modal-form,
.sm-body,
.cmd-palette-body {
  padding: 8px 20px 16px 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 💎 FORM CONTROLS ÉPURÉS (SANS NÉON AGRESSIF) */
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-content input,
.modal-content select,
.modal-content textarea {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  box-shadow: none !important; /* No harsh neon glow */
  outline: none !important;
}

.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 💎 PIED DE PAGE SEAMLESS SANS BANDEAU */
.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 8px 20px 18px 20px !important;
  border-top: none !important; /* No cut-off line */
  background: transparent !important; /* Seamless continuous card */
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"] {
  background: var(--primary, #38bdf8) !important;
  color: #081225 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 8px 16px !important;
}

.modal-footer .btn-secondary,
.modal-footer #btn-cancel-modal,
.modal-footer #btn-cancel-version-modal {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}

.modal-footer .btn-danger,
.modal-footer #btn-delete-task {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}

@media (max-width: 768px) {
  .modal-overlay,
  .modal-backdrop,
  .sm-backdrop,
  .cmd-palette-overlay {
    padding: 12px 12px 35px 12px !important;
  }

  .modal-card,
  .modal-content,
  .sm-panel,
  .cmd-palette-box {
    max-height: calc(100vh - 85px) !important;
    max-height: calc(100dvh - 85px) !important;
    border-radius: 14px !important;
    margin: auto auto 24px auto !important;
  }

  .modal-header,
  .modal-header-premium,
  .sm-header,
  .cmd-palette-header {
    padding: 14px 16px 6px 16px !important;
  }

  .modal-body,
  .modal-form,
  .sm-body,
  .cmd-palette-body {
    padding: 6px 16px 14px 16px !important;
  }

  .modal-footer {
    padding: 6px 16px 16px 16px !important;
    flex-wrap: wrap !important;
  }

  .modal-footer button {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    justify-content: center !important;
  }
}
.modal-card,
.modal-content,
.sm-panel,
.cmd-palette-box {
  position: relative !important;
  background: #0d121f !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9) !important;
  width: 100% !important;
  max-width: 580px !important;
  max-height: calc(100vh - 80px) !important;
  max-height: calc(100dvh - 80px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: auto !important;
  animation: modalContentZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalContentZoomIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 💎 TOP HEADER (TITRE TOUT EN HAUT À GAUCHE + CROIX FERMETURE À DROITE) */
.modal-header,
.modal-header-premium,
.sm-header,
.cmd-palette-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.modal-header h2,
.modal-header h3,
.modal-header-premium h2,
.modal-header-premium h3,
.modal-title {
  margin: 0 !important;
  font-family: var(--font-title, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.modal-close,
.btn-close,
.icon-btn-close,
.close-modal-btn,
.sm-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.modal-close:hover,
.btn-close:hover,
.icon-btn-close:hover,
.close-modal-btn:hover,
.sm-close-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.modal-close svg,
.modal-close i,
.btn-close svg,
.btn-close i,
.icon-btn-close svg,
.icon-btn-close i,
.close-modal-btn svg,
.close-modal-btn i,
.sm-close-btn svg,
.sm-close-btn i {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

/* 💎 CORPS DÉFILABLE UNIQUE (OVERSCROLL CONTAIN) */
.modal-body,
.modal-form,
.sm-body,
.cmd-palette-body {
  padding: 16px 18px 20px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 💎 PIED DE PAGE OPTIONNEL */
.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .modal-overlay,
  .modal-backdrop,
  .sm-backdrop,
  .cmd-palette-overlay {
    padding: 12px 12px 35px 12px !important;
  }

  .modal-card,
  .modal-content,
  .sm-panel,
  .cmd-palette-box {
    max-height: calc(100vh - 85px) !important;
    max-height: calc(100dvh - 85px) !important;
    border-radius: 14px !important;
    margin: auto auto 24px auto !important;
  }

  .modal-header,
  .modal-header-premium,
  .sm-header,
  .cmd-palette-header {
    padding: 12px 14px !important;
  }

  .modal-body,
  .modal-form,
  .sm-body,
  .cmd-palette-body {
    padding: 14px 14px 18px 14px !important;
  }

  .modal-footer {
    padding: 10px 14px !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   💎 PERFECT MODAL FOOTER BUTTONS ALIGNMENT (SINGLE HORIZONTAL ROW)
   ══════════════════════════════════════════════════════════════════ */

.modal-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 10px 20px 20px 20px !important;
  background: transparent !important;
  border-top: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Danger / Delete button is pushed to the far left */
.modal-footer .btn-danger,
.modal-footer #btn-delete-task,
.modal-footer #btn-delete-version,
.modal-footer .btn-delete {
  margin-right: auto !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.modal-footer .btn-secondary,
.modal-footer #btn-cancel-modal,
.modal-footer #btn-cancel-version-modal {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"] {
  background: var(--primary, #38bdf8) !important;
  color: #081225 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

@media (max-width: 768px) {
  .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px 16px 16px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .modal-footer button {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 0.82rem !important;
    padding: 7px 12px !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   💎 PERFECT EQUAL-HEIGHT MODAL FOOTER BUTTONS (38PX)
   ══════════════════════════════════════════════════════════════════ */

.modal-footer button,
.modal-footer .btn,
.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer .btn-danger,
.modal-footer #btn-cancel-modal,
.modal-footer #btn-cancel-version-modal,
.modal-footer #btn-delete-task,
.modal-footer #btn-delete-version,
.modal-footer #btn-save-task,
.modal-footer #btn-save-version {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.modal-footer button svg,
.modal-footer button i {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"] {
  background: var(--primary, #38bdf8) !important;
  color: #081225 !important;
  font-weight: 700 !important;
  border: none !important;
}

.modal-footer .btn-secondary,
.modal-footer #btn-cancel-modal,
.modal-footer #btn-cancel-version-modal {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

.modal-footer .btn-danger,
.modal-footer #btn-delete-task,
.modal-footer #btn-delete-version {
  margin-right: auto !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}



/* ══════════════════════════════════════════════════════════════════
   💎 SPACIOUS DESKTOP MODAL DIMENSIONS (BREATHING ROOM ON PC)
   ══════════════════════════════════════════════════════════════════ */

.modal-card,
.modal-content,
.sm-panel,
.cmd-palette-box {
  width: 100% !important;
  max-width: 720px !important; /* Generous width for desktop forms and content */
  max-height: calc(100vh - 80px) !important;
  max-height: calc(100dvh - 80px) !important;
  box-sizing: border-box !important;
}

/* CineVault Wide Media & Search Modals */
#detail-modal .modal-content,
.detail-modal .modal-content {
  max-width: 840px !important;
}

#search-modal .sm-panel,
.search-modal .sm-panel {
  max-width: 880px !important;
}

/* Watch List Dev Spacious Form Modals */
#task-modal .modal-card,
#version-modal .modal-card {
  max-width: 760px !important;
}

/* Sera Pay Full PDF Preview & Validation Modals */
#pdf-modal .modal-card,
#pdf-modal .modal-content {
  max-width: 1050px !important;
}

#validation-modal .modal-card {
  max-width: 720px !important;
}

/* Sera Tax Spacious Fiscal Forms */
#modal-add-purchase .modal-card,
#modal-add-account .modal-card {
  max-width: 680px !important;
}

/* Plant Care */
#plant-modal .modal-card {
  max-width: 680px !important;
}

/* Mobile Responsiveness (< 768px) */
@media (max-width: 768px) {
  .modal-card,
  .modal-content,
  .sm-panel,
  .cmd-palette-box,
  #detail-modal .modal-content,
  #search-modal .sm-panel,
  #task-modal .modal-card,
  #version-modal .modal-card,
  #pdf-modal .modal-card,
  #validation-modal .modal-card,
  #modal-add-purchase .modal-card,
  #modal-add-account .modal-card,
  #plant-modal .modal-card {
    max-width: 100% !important;
    width: 100% !important;
  }
}



/* ══════════════════════════════════════════════════════════════════
   💎 UNIVERSAL LOADER PRIMARY COLOR INHERITANCE
   ══════════════════════════════════════════════════════════════════ */
.loader-icon-inner {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.loader-icon-inner svg {
  stroke: var(--primary) !important;
  color: var(--primary) !important;
}



/* ══════════════════════════════════════════════════════════════════
   💎 PROMINENT HERO COMMAND PALETTE (CTRL+K) DESIGN
   ══════════════════════════════════════════════════════════════════ */

.cmd-palette-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 12vh !important;
  background: rgba(3, 5, 10, 0.86) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.cmd-palette-box {
  width: 92% !important;
  max-width: 680px !important;
  background: #0b0f19 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95), 0 0 35px rgba(99, 102, 241, 0.25) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.cmd-palette-box .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 8px 20px !important;
  background: transparent !important;
  border-bottom: none !important;
}

.cmd-palette-box .modal-title {
  margin: 0 !important;
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.cmd-palette-box .modal-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.cmd-palette-box .modal-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.cmd-palette-box .modal-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #94a3b8 !important;
}

.cmd-palette-box .modal-close:hover svg {
  stroke: #ffffff !important;
}

.cmd-palette-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 20px 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cmd-search-icon {
  width: 22px !important;
  height: 22px !important;
  color: #818cf8 !important;
  flex-shrink: 0 !important;
}

#cmd-palette-input {
  flex: 1 !important;
  height: 48px !important;
  min-height: 48px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  color: #ffffff !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#cmd-palette-input:focus {
  border-color: rgba(99, 102, 241, 0.6) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 16px rgba(99, 102, 241, 0.25) !important;
}

.cmd-kbd {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

.cmd-palette-body {
  max-height: 420px !important;
  overflow-y: auto !important;
  padding: 12px 16px !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.cmd-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  color: #94a3b8 !important;
}

.cmd-item:hover,
.cmd-item.selected {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #ffffff !important;
}



/* ══════════════════════════════════════════════════════════════════
   💎 UNIVERSAL TOAST NOTIFICATION COMPONENT (SERA ECOSYSTEM)
   ══════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

.toast-msg {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  background: rgba(13, 18, 32, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transition: all 0.25s ease !important;
}

.toast-msg.success {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.25) !important;
}

.toast-msg.error {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.25) !important;
}

.toast-msg.info {
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.25) !important;
}

.toast-msg.toast-exit {
  opacity: 0 !important;
  transform: translateY(12px) scale(0.95) !important;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .toast-container {
    bottom: 80px !important; /* Above mobile bottom bar */
    right: 16px !important;
    left: 16px !important;
    align-items: center !important;
  }
  .toast-msg {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   🔍 UNIVERSAL PERFECT-CENTERED SEARCH INPUTS (SERA ECOSYSTEM)
   ══════════════════════════════════════════════════════════════════ */

.search-box,
.search-bar-wrap,
.search-input-wrap,
.search-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.search-box .search-icon,
.search-bar-wrap .search-icon,
.search-input-wrap .search-icon,
.search-input-wrapper .search-icon,
.search-box > svg:first-child,
.search-box > i:first-child,
.search-bar-wrap > svg:first-child,
.search-input-wrap > svg:first-child,
.search-input-wrapper > svg:first-child {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
  display: block !important;
  margin: 0 !important;
  color: var(--text-muted, #64748b) !important;
  opacity: 0.7 !important;
}

.search-box input,
.search-bar-wrap input,
.search-input-wrap input,
.search-input-wrapper input {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 36px !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
}


/* FORCE MOBILE NAV SVG VISIBILITY */
.mobile-bottom-bar .mobile-nav-item svg,
.mobile-bottom-bar button svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 auto 3px auto !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ══════════════════════════════════════════════════════════════════
   📱 CLEAN MOBILE SCROLLBAR (ZERO DESKTOP SCROLLBAR OVERFLOW ON MOBILE)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html,
  body,
  #app-shell,
  #page-container,
  main,
  .page,
  .tab-pane,
  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .mobile-bottom-bar,
  #cinevault-mobile-nav,
  #mobile-bottom-bar {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   💎 MASTER DESIGN SYSTEM STANDARDS (SERA ECOSYSTEM UNIVERSAL)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. UNIVERSAL TABLE HEADERS & MONOSPACE CELLS ──────────────── */
table th,
.table th,
.archive-table th,
.holdings-table th,
.tax-table th,
.transactions-table th,
.merchants-table th,
.trades-ledger-table th {
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted, #94a3b8) !important;
  background: rgba(13, 19, 36, 0.6) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

table td.numeric,
table td.amount,
table td.date,
table td.hash,
.table td.numeric,
.archive-table td.amount,
.holdings-table td.amount,
.tax-table td.amount,
.transactions-table td.amount {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
}

table th.actions,
table td.actions,
.archive-table th.actions,
.archive-table td.actions,
.tax-table th.actions,
.tax-table td.actions {
  display: table-cell !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* ── 2. UNIVERSAL KPI & STAT CARDS ─────────────────────────────── */
.kpi-card,
.stat-card,
.summary-card,
.metric-card {
  background: rgba(18, 24, 41, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-card, 16px) !important;
  padding: 1.25rem 1.5rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.kpi-card:hover,
.stat-card:hover,
.summary-card:hover,
.metric-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.kpi-label,
.stat-label,
.summary-label,
.metric-label,
.kpi-card .card-title,
.stat-card .stat-title {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted, #94a3b8) !important;
  margin-bottom: 6px !important;
}

.kpi-value,
.stat-value,
.summary-value,
.metric-value,
.kpi-card .card-value,
.stat-card .stat-number {
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}

.kpi-trend.positive,
.stat-trend.positive,
.trend-badge.positive {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.kpi-trend.negative,
.stat-trend.negative,
.trend-badge.negative {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ── 3. UNIVERSAL ACTION BUTTONS & HIGH CONTRAST ───────────────── */
.btn-primary,
.cyber-btn,
.btn-create-task,
button.primary {
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* High-Contrast Law on bright buttons */
.btn-primary[style*="#fbbf24"],
.btn-primary[style*="#f59e0b"],
.btn-primary[style*="#38bdf8"],
.btn-primary[style*="#10b981"],
.btn-primary[style*="rgb(251, 191, 36)"],
.btn-primary[style*="rgb(56, 189, 248)"] {
  color: #040711 !important;
}

.btn-secondary,
.btn-ghost {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* ── 4. UNIVERSAL MODAL OVERLAYS & CLOSE BUTTONS ───────────────── */
.modal-overlay,
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(4, 7, 17, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

.modal-overlay.hidden,
.modal-backdrop.hidden {
  display: none !important;
}

.modal-card,
.modal-content,
.modal-box {
  background: rgba(13, 19, 36, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-card, 18px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  width: 100% !important;
  max-width: 600px !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-title {
  font-family: var(--font-title, 'Outfit', sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.modal-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-muted, #94a3b8) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: rotate(90deg) !important;
}

.modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 1.25rem 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── 5. UNIVERSAL EMPTY STATES ─────────────────────────────────── */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 1.5rem !important;
  text-align: center !important;
}

.empty-state svg,
.empty-state i {
  width: 48px !important;
  height: 48px !important;
  color: var(--text-muted, #64748b) !important;
  opacity: 0.5 !important;
  margin-bottom: 1rem !important;
}

.empty-state p {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  color: var(--text-muted, #94a3b8) !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

@media (min-width: 769px) {
  #page-container > .page,
  .page,
  .dashboard,
  .dashboard-main,
  .main-content,
  .app-content,
  .tax-main,
  .tab-pane,
  #view-library,
  #view-search {
    padding: 1.5rem 2.0rem 2.5rem 2.0rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  #page-container > .page,
  .page,
  .dashboard,
  .dashboard-main,
  .main-content,
  .app-content,
  .tax-main,
  .tab-pane,
  #view-library,
  #view-search {
    padding: 1.25rem 1.0rem calc(96px + env(safe-area-inset-bottom, 16px)) 1.0rem !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MASTER ECOSYSTEM UNIFIED PAGE CONTAINER PADDING STANDARD
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #page-container > .page,
  .page,
  .dashboard,
  .dashboard-main,
  .main-content,
  .app-main-content,
  .app-content,
  .tax-main,
  #view-library,
  #view-search {
    padding: 1.5rem 2.0rem 2.5rem 2.0rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  #page-container > .page,
  .page,
  .dashboard,
  .dashboard-main,
  .main-content,
  .app-main-content,
  .app-content,
  .tax-main,
  #view-library,
  #view-search {
    padding: 1.25rem 1.0rem calc(96px + env(safe-area-inset-bottom, 16px)) 1.0rem !important;
    box-sizing: border-box !important;
  }
}

/* ⛔ PREVENT NESTED DOUBLE PADDING ON TAB-PANES INSIDE MAIN CONTAINERS */
main .tab-pane,
.main-content .tab-pane,
.app-main-content .tab-pane,
.dashboard-main .tab-pane,
.page .tab-pane,
#tab-portfolio,
#tab-trades,
#tab-reports,
#tab-plants,
#tab-overview,
#tab-tasks,
#tab-timeline,
#tab-architecture {
  padding: 0 !important;
  margin: 0 !important;
}

/* 📱 HUB PAGES WITHOUT BOTTOM BAR (HOME, SERVER MONITORING) */
@media (max-width: 768px) {
  #page-container > .page,
  #page-home,
  #page-sera,
  #page-sera.page,
  #page-sera.active {
    padding: 1.25rem 1.0rem calc(1.75rem + env(safe-area-inset-bottom, 16px)) 1.0rem !important;
    box-sizing: border-box !important;
  }
}

/* Firefox button focus & border clipping resets */
button::-moz-focus-inner,
.nav-tab::-moz-focus-inner,
.tab-btn::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

.hidden, [hidden], .modal-overlay.hidden, .modal-backdrop.hidden, .modal-card.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   13. ACCESSIBILITÉ & ÉTATS DE DONNÉES (v37) — communs à toutes les apps
   Classes préfixées « sera- » : aucune collision avec les .spinner locaux.
   ══════════════════════════════════════════════════════════════════ */

/* Focus clavier visible partout (les « outline: none » ci-dessus visaient la souris) */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"]):focus-visible,
.sub-nav button:focus-visible,
.nav-tab:focus-visible,
.tab-btn:focus-visible,
.mobile-nav-item:focus-visible {
  outline: 2px solid var(--primary-light, #c4b5fd) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-xs, 6px);
}

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Indicateur de chargement */
.sera-spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--primary, #8b5cf6);
  border-radius: 50%;
  animation: sera-spin 0.8s linear infinite;
  vertical-align: middle;
}
.sera-spinner.sm { width: 14px; height: 14px; }
.sera-spinner.lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes sera-spin { to { transform: rotate(360deg); } }

/* Squelette de contenu (plutôt qu'un faux « 0,00 € » pendant le chargement) */
.sera-skeleton {
  display: inline-block;
  min-width: 4ch; min-height: 1em;
  border-radius: var(--radius-xs, 6px);
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: sera-shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
}
@keyframes sera-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Bandeau d'état : erreur réseau, données en repli, budget atteint… */
.sera-banner {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--panel-border, rgba(255,255,255,0.1));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94a3b8);
  font-size: 0.85rem; line-height: 1.4;
}
.sera-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.sera-banner.warning { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); color: #fcd34d; }
.sera-banner.danger  { border-color: rgba(239, 68, 68, 0.35);  background: rgba(239, 68, 68, 0.08);  color: #fca5a5; }
.sera-banner.success { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.08); color: #6ee7b7; }
.sera-banner .sera-banner-action {
  margin-left: auto; background: none; border: 1px solid currentColor; color: inherit;
  border-radius: var(--radius-pill, 9999px); padding: 0.2rem 0.7rem; font-size: 0.78rem; cursor: pointer;
}

/* Pastille de fraîcheur des données (« à l'instant », « il y a 2 h ») */
.sera-freshness {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--text-muted, #7d8ba1);
}
.sera-freshness::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success, #10b981);
}
.sera-freshness.stale::before { background: var(--warning, #f59e0b); }
.sera-freshness.dead::before  { background: var(--danger, #ef4444); }

/* Moins d'animations pour qui le demande au système */
@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;
  }
}