/* ============================================
   SPA SHELL — Navigation & structure
   ============================================ */

/* ── Tokens centralisés (couleurs, espacements, typo) ── */
@import url('./design-tokens.css');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    min-height: calc(100vh -48px);
}

/* ── Top navigation bar ──
   Les variables sont anchées ICI sur .spa-nav (spécificité 0,1,0)
   et non sur :root (0,0,1), ce qui les rend immunisées contre
   tout override de variables dans les CSS de vue (style.css, etc.) */
.spa-nav {
    /* ── Variables anchées sur le composant ── */
    --builder-nav-bg:           #f5f6fa;
    --builder-nav-border:       #e8e8ed;
    --builder-nav-text:         #18191a;
    --builder-nav-active-text:  #0a68f1;
    --builder-nav-active-accent:#0a68f1;
    --solocal-blue:             #0a68f1;

    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: 48px;
    background: var(--builder-nav-bg);
    /* Font explicite : jamais héritée de body, invariée quel que soit le CSS de vue */
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 0;
    border-bottom: 1px solid var(--builder-nav-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.spa-nav-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--builder-nav-text);
    letter-spacing: -.3px;
    margin-right: 24px;
    white-space: nowrap;
    text-decoration: none;
    opacity: .92;
}
.spa-nav-brand:hover { opacity: 1; }

.spa-nav-links {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 100%;
    flex: 1;
}

.spa-nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--builder-nav-text);
    opacity: .65;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
}

.spa-nav-link:hover {
    color: var(--builder-nav-text);
    opacity: 1;
}

.spa-nav-link.active {
    color: var(--builder-nav-active-text);
    opacity: 1;
    border-bottom-color: var(--builder-nav-active-accent);
}

.spa-nav-link .nav-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .7;
}
.spa-nav-link:hover .nav-icon,
.spa-nav-link.active .nav-icon  { opacity: 1; }

.spa-nav-sep {
    width: 1px;
    height: 20px;
    background: var(--builder-nav-border);
    align-self: center;
    margin: 0 4px;
}

.spa-nav-badge {
    font-family: 'Onest', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 700;
    background: var(--solocal-blue);
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* ── View container ── */
#spa-view {
    min-height: 100vh;
}

/* Tous les enfants directs sauf .builder-shell (qui gère son propre offset) */
#spa-view > *:not(.builder-shell) {
    padding-top: 48px;
    max-width: 100vw;
}

/* ── Loading transition ── */
#spa-view.loading {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

#spa-view.loaded {
    opacity: 1;
    transition: opacity .25s;
}

/* ── View transitions ── */
.view-enter {
    animation: viewEnter .25s ease-out both;
}

@keyframes viewEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .spa-nav-link .spa-nav-label { display: none; }
    .spa-nav-link { padding: 0 12px; }
    .spa-nav-brand { margin-right: 12px; }
}

/* ── SPA context overrides ──────────────────────────────────────────────────
   Sticky elements inside views must clear the 48px SPA nav bar.
   These rules only apply inside #spa-view (= when loaded via SPA shell).
   ──────────────────────────────────────────────────────────────────────── */

/* Catalog app (index.html / AppView) – sticky header */
#spa-view header {
    top: 48px;
}

/* Validator (catalog-validator / ValidatorView) – sticky header + drawer + sidebar */
#spa-view .header {
    top: 48px;
}
/* Pas de .header dans ValidatorView → le drawer + sidebar s'ancrent directement à la nav */
#spa-view .detail-drawer {
    top: 48px;
    height: calc(100vh - 48px);
}
#spa-view .sidebar {
    top: 48px;
    height: calc(100vh - 48px);
}

/* Admin builder shell – gère son propre offset (margin-top: 48px dans admin-page.css) */