/* =============================================================
   NicoLog CMS — Shell CSS
   Layout header unificato, varianti welcome/app, nav, transizioni
   ============================================================= */

/* ── Varianti header: visibilità condizionale ── */

/* Welcome: mostra nav welcome, nasconde nav app e user menu */
.cms-header[data-variant="welcome"] .header-nav--app    { display: none; }
.cms-header[data-variant="welcome"] .cms-app-only        { display: none; }

/* App: mostra nav app e user menu, nasconde nav welcome e mobile menu */
.cms-header[data-variant="app"] .header-nav--welcome     { display: none; }
.cms-header[data-variant="app"] .cms-welcome-only        { display: none; }

/* ── Nav app inline (links principali nell'header) ── */
.header-nav--app {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cms-nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color var(--transition), color var(--transition);
}

.cms-nav-link:hover {
    background: var(--table-row-hover, rgba(255,255,255,0.06));
    color: var(--text-primary);
}

.cms-nav-link.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    font-weight: 600;
}

.cms-nav-link i {
    font-size: 0.9rem;
}

/* Label testo visibile solo su desktop */
.cms-nav-label {
    display: none;
}

@media (min-width: 640px) {
    .cms-nav-label {
        display: inline;
    }
    .cms-nav-link {
        padding: 0.45rem 0.85rem;
        font-size: 0.88rem;
    }
}

/* ── Content area ── */
.cms-content {
    min-height: calc(100vh - var(--header-h, 60px) - 200px);
}

/* ── Transizione pagina (fade leggero) ── */
.cms-content {
    animation: cmsFadeIn 0.2s ease-out;
}

@keyframes cmsFadeIn {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}

/* ── CMS header layout: ensure flex with spacer works ── */
.cms-header .header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.cms-header .header-spacer {
    flex: 1;
}

/* ── Mobile: nav app icone compatte ── */
@media (max-width: 639px) {
    .header-nav--app {
        gap: 0;
    }
    .cms-nav-link {
        padding: 0.35rem 0.55rem;
        font-size: 0.8rem;
    }
}

/* ── Dark theme adjustments ── */
[data-theme="dark"] .cms-nav-link.active {
    background: rgba(var(--primary-rgb), 0.18);
}