/* Nav/header compartido entre a web pública e o panel interno.
   Tokens e estilos extraídos de templates/public/base.html. */

header a {
    text-decoration: none;
    color: inherit;
}

header ul {
    list-style: none;
}

        /* ── TOKENS ────────────────────────────────────────────── */
        :root {
            --red: #e63946;
            --red-hover: #c8313c;
            --red-dim: rgba(230, 57, 70, 0.08);
            --red-glow: rgba(230, 57, 70, 0.20);
            --bg: #0c0c0e;
            --s1: #1a1a22;
            /* surface level 1 */
            --s2: #21212a;
            /* surface level 2 */
            --s3: #2b2b35;
            /* surface level 3 */
            --b1: rgba(255, 255, 255, 0.09);
            /* border subtle */
            --b2: rgba(255, 255, 255, 0.16);
            /* border strong */
            --t1: #f0f0f2;
            /* text primary */
            --t2: #8a8a9e;
            /* text muted */
            --t3: #4a4a56;
            /* text subtle */
            --header-bg: rgba(12, 12, 14, 0.88);
            --ease: all 0.22s ease;
            --font-display: 'Outfit', 'Inter', sans-serif;
            --font-body: 'Inter', sans-serif;
            --texture-noise: none;
        }

        /* ── LIGHT THEME ────────────────────────────────────────── */
        [data-theme="light"] {
            --bg: #e9e8ee;
            --s1: #f3f2f8;
            --s2: #e4e3eb;
            --s3: #d8d7e0;
            --b1: rgba(0, 0, 0, 0.10);
            --b2: rgba(0, 0, 0, 0.18);
            --t1: #1a1a24;
            --t2: #555568;
            --t3: #747485;
            --header-bg: rgba(12, 12, 14, 0.88);
            --red-dim: rgba(230, 57, 70, 0.09);
            --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
        }

        /* ── HEADER ────────────────────────────────────────────── */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: 64px;
            padding: 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--header-bg);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid var(--b1);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: .25rem;
            font-weight: 800;
            font-size: 1.35rem;
            letter-spacing: -.5px;
        }

        .logo-container svg {
            width: 62px;
            height: 62px;
        }

        nav ul {
            display: flex;
            gap: .15rem;
            align-items: center;
        }

        nav a {
            font-size: .78rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: var(--t2);
            padding: .42rem .75rem;
            border-radius: 7px;
            transition: var(--ease);
        }

        nav a:hover {
            color: var(--t1);
            background: var(--b1);
        }

        .nav-highlight {
            color: var(--red) !important;
            background: var(--red-dim) !important;
        }

        .nav-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--red);
            color: #fff;
            border-radius: 999px;
            min-width: 17px;
            height: 17px;
            font-size: .62rem;
            font-weight: 700;
            padding: 0 4px;
            margin-left: 3px;
            vertical-align: middle;
        }

        .nav-user {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding-left: .75rem;
            margin-left: .2rem;
            border-left: 1px solid var(--b2);
        }

        .nav-username {
            color: var(--t2);
            font-size: .75rem;
            font-weight: 600;
        }

        .nav-logout {
            color: var(--t3) !important;
            font-size: .75rem;
            padding: .35rem .65rem;
            border-radius: 6px;
            transition: var(--ease);
        }

        .nav-logout:hover {
            color: var(--red) !important;
            background: var(--red-dim) !important;
        }

        button.nav-logout {
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            text-decoration: none;
            display: inline-block;
        }

        /* ── THEME TOGGLE ───────────────────────────────────────── */
        .nav-theme-toggle {
            background: none;
            border: 1px solid var(--b2);
            color: var(--t2);
            cursor: pointer;
            padding: .38rem .55rem;
            border-radius: 7px;
            font-size: .85rem;
            line-height: 1;
            display: flex;
            align-items: center;
            transition: var(--ease);
        }

        .nav-theme-toggle:hover {
            color: var(--t1);
            background: var(--b1);
        }