/* ==========================================================================
   Nymphea App — alignement visuel sur NymphRemote (et NymphReach)
   Mêmes neutres (fond, cartes, textes), même violet, même échelle de texte,
   même logo dans le menu, même pastille active et mêmes boutons.
   Chargé après styles.css, enhancements.css et auth-showcase.css.
   ========================================================================== */

/* ---------- Couleurs ---------- */
:root {
  /* Sombre : fond #17151b, cartes #242127, comme NymphRemote */
  --bg: #17151b;
  --panel: #242127;
  --panel-2: #2b2730;
  --panel-inset: #1d1b21;
  --ink: #f3eff6;
  --ink-soft: #d6cfdc;
  --muted: #aaa2af;
  --faint: #988f9e;
  --line: #3d3741;
  --line-soft: #312c35;
  --accent: #a866ed;
  --accent-strong: #c08ef5;
  --accent-deep: #8d43d7;
  --accent-soft: rgba(168, 102, 237, 0.14);
  --accent-border: rgba(168, 102, 237, 0.36);
  --accent-glow: rgba(168, 102, 237, 0.2);
  --series-1: #a866ed;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] {
  /* Clair : fond #f8f7fa, cartes blanches, textes gris-violet */
  --bg: #f8f7fa;
  --panel: #ffffff;
  --panel-2: #f4f1f8;
  --panel-inset: #f0edf4;
  --ink: #27232d;
  --ink-soft: #4f4857;
  --muted: #6e6876;
  --faint: #8a8391;
  --line: #e9e5ee;
  --line-soft: #f0edf3;
  --accent: #8238d2;
  --accent-strong: #6f2bb9;
  --accent-deep: #6f2bb9;
  --accent-soft: #f2e8ff;
  --accent-border: #e0cdf6;
  --accent-glow: rgba(130, 56, 210, 0.15);
  --series-1: #8238d2;
  --shadow: 0 12px 34px rgba(40, 19, 68, 0.035);
}
body,
[data-theme="light"] body {
  background: var(--bg);
}
.sidebar {
  background: #211b2b;
}
[data-theme="light"] .sidebar {
  background: #ffffff;
}
[data-theme="dark"] .topbar {
  background: var(--bg);
}
[data-theme="light"] .topbar {
  background: #ffffff;
}

/* ---------- Logo du menu : même hauteur que NymphRemote ---------- */
.sidebar .brand .nx-wordmark,
.sidebar .brand .brand-wordmark {
  width: auto;
  height: 31px;
  flex: 0 0 auto;
}

/* ---------- Boutons principaux : même dégradé que NymphRemote ---------- */
.primary-button,
.overview-cta,
.compact-create,
.nx-toolbar-actions .nx-toolbar-cta {
  color: #fff;
  background: linear-gradient(135deg, #792fc0, #a051df);
  border-color: transparent;
  box-shadow: 0 8px 20px #8d48cb28;
}
[data-theme="dark"] .primary-button,
[data-theme="dark"] .overview-cta,
[data-theme="dark"] .compact-create {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.primary-button:not(:disabled):hover,
.overview-cta:hover,
.compact-create:hover {
  filter: brightness(1.07);
}

/* ---------- Ordinateur : navigation et échelle de texte ---------- */
@media (min-width: 761px) {
  .topbar {
    min-height: 72px;
  }
  .nav-overline {
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav-item {
    min-height: 42px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 550;
  }
  .nav-item span:not(.nav-badge) {
    font-size: 13px;
  }
  /* Pastille active pleine (l'indicateur glissant recopie ce fond) */
  .nav-item.active,
  [data-theme="light"] .nav-item.active,
  [data-theme="light"] .nav-item.active:hover {
    color: #fff;
    background: linear-gradient(135deg, #7936ba, #8e45cf);
    box-shadow: inset 0 0 0 1px #a061d8, 0 6px 16px rgba(121, 54, 186, 0.28);
  }
  .nav-item.active svg,
  [data-theme="light"] .nav-item.active svg {
    color: #fff;
  }
  .nav-item.active::before,
  [data-theme="light"] .nav-item.active::before {
    display: none;
  }
  .nav.nx-has-indicator .nav-item.active {
    color: #fff;
  }
  .nav-item:not(.active):hover svg {
    color: var(--accent);
    transform: translateX(1px) scale(1.06);
  }

  .eyebrow {
    font-size: 12px;
  }
  .panel-head h2,
  .panel h2 {
    font-size: 17px;
    font-weight: 620;
  }
  td,
  th {
    font-size: 13px;
  }
  .sync-state-label,
  .remote-module-tooltip,
  .reach-module-tooltip,
  .remote-module-copy small,
  .reach-module-copy small {
    font-size: 11px;
  }
}

/* ---------- Entrée des vues : cascade aussi en thème clair ---------- */
[data-theme="light"] .view.active > * {
  animation: rise 0.5s var(--ease-out) both;
}
[data-theme="light"] .view.active > *:nth-child(2) { animation-delay: 0.045s; }
[data-theme="light"] .view.active > *:nth-child(3) { animation-delay: 0.09s; }
[data-theme="light"] .view.active > *:nth-child(4) { animation-delay: 0.135s; }
[data-theme="light"] .view.active > *:nth-child(5) { animation-delay: 0.18s; }
[data-theme="light"] .view.active > *:nth-child(6) { animation-delay: 0.225s; }
[data-theme="light"] .view.active > *:nth-child(n + 7) { animation-delay: 0.27s; }

/* ---------- Cartes et lignes ouvrables d'un clic ----------
   Toute la carte ouvre sa destination (voir enhancements.js, section 11) ;
   les boutons d'action gardent leur propre rôle. */
.priority-item[data-goto],
.management-brief-item:has(> button[data-goto], > button[data-scroll]),
.management-block-item:has([data-goto]),
.alert:has(a[data-goto], a[data-scroll]),
tr:has([data-model-open]) {
  cursor: pointer;
}
.priority-item[data-goto] {
  position: relative;
  padding-right: 34px;
  transition: border-color 160ms ease, background-color 160ms ease, transform 200ms var(--ease-out);
}
.priority-item[data-goto]::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
  transition: color 160ms ease, transform 200ms var(--ease-out);
}
.priority-item[data-goto]:hover {
  border-color: var(--accent-border);
}
.priority-item[data-goto]:hover::after {
  color: var(--accent);
  transform: translate(3px, -50%);
}
.priority-item[data-goto]:hover strong,
.management-brief-item:hover strong,
.management-block-item:has([data-goto]):hover strong,
tr:has([data-model-open]):hover td:first-child {
  color: var(--accent-strong);
}
.priority-item[data-goto]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.priority-item[data-goto]:active {
  transform: scale(0.995);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .view.active > *,
  .nav-item:not(.active):hover svg,
  .priority-item[data-goto]:active {
    animation: none;
    transform: none;
  }
}