/* ==========================================================================
   Alpes — App shell (tokens + reset + navbar + layout)
   CSS compartilhado e CACHEADO por todas as páginas internas do cliente.
   Estilos específicos de cada página ficam no {% block headers %} da própria.
   Os toasts (.alert-*) vivem em base/alerts.html.
   ========================================================================== */

:root {
    --canvas: #0a0a0a;
    --canvas-deep: #050505;
    --surface-1: #161616;
    --surface-2: #1f1f1f;
    --surface-3: #2b2b2b;
    --hairline: #2e2e2e;
    --hairline-soft: #1c1c1c;
    --ink: #fafafa;
    --ink-muted: #a0a0a0;
    --ink-faint: #636363;
    --display: 'Space Grotesk', system-ui, sans-serif;
    --body: 'Inter', system-ui, sans-serif;
}

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

/* Remove as setinhas (spin buttons) dos inputs numéricos */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

html, body {
    height: 100%;
    font-family: var(--body);
    background: var(--canvas);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv01','cv05','cv09','cv11','ss03';
}

.app-container { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ===== NAVBAR ===== */
.navbar {
    height: 64px; flex-shrink: 0;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline-soft);
    display: flex; align-items: center; padding: 0 24px;
    position: relative; z-index: 100;
}
.navbar-content { display: flex; align-items: center; width: 100%; gap: 22px; }

/* ===== BRAND ===== */
.navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.navbar-brand svg { width: 26px; height: 26px; }
.navbar-brand span { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.04em; color: var(--ink); }

/* ===== NAVIGATION (centered, icon-only) ===== */
.navbar-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 8px; }
.nav-item { position: relative; }
.nav-link {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    color: var(--ink-muted); text-decoration: none;
    background: transparent; border: none; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.nav-link:active { background: rgba(255,255,255,0.1); }
.nav-link.active { color: var(--ink); background: rgba(255,255,255,0.06); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.nav-link:hover .nav-icon { transform: scale(1.14); }
.nav-link:active .nav-icon { transform: scale(0.96); }

/* tooltip */
.tooltip {
    position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%);
    background: var(--surface-3); color: var(--ink);
    padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 500;
    white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, bottom 0.18s ease; z-index: 1000; border: 1px solid var(--hairline);
}
.tooltip::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: var(--surface-3); }
.nav-link:hover .tooltip, .sign-out-btn:hover .tooltip { opacity: 1; visibility: visible; bottom: -33px; }

/* ===== ACTIONS ===== */
.navbar-actions { display: flex; align-items: center; }
.sign-out-btn {
    position: relative; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--ink-muted);
    cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.sign-out-btn:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.sign-out-btn:hover .sign-out-icon { transform: scale(1.14); }
.sign-out-icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }

.nav-link:focus-visible, .sign-out-btn:focus-visible, .navbar-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ===== MAIN CONTENT ===== */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.content-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* ===== MOBILE → bottom tab bar ===== */
@media (max-width: 768px) {
    .navbar {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        height: auto; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--hairline-soft); border-bottom: none;
        background: rgba(10,10,10,0.94);
    }
    .navbar-content { gap: 0; align-items: stretch; }
    .navbar-brand { display: none; }
    .navbar-nav, .nav-list, .navbar-actions { display: contents; }
    .nav-item { flex: 1 1 0; display: flex; }
    .nav-link {
        flex: 1; width: 100%; height: auto;
        flex-direction: column; gap: 4px; padding: 7px 2px; border-radius: 14px;
    }
    .nav-link .nav-icon, .sign-out-btn .sign-out-icon { width: 22px; height: 22px; }
    .sign-out-btn {
        flex: 1 1 0; width: auto; height: auto;
        flex-direction: column; gap: 4px; padding: 7px 2px; border-radius: 14px;
    }
    .tooltip {
        position: static; transform: none; opacity: 1; visibility: visible;
        background: none; border: none; padding: 0; box-shadow: none; pointer-events: auto;
        font-size: 10.5px; font-weight: 500; line-height: 1; color: inherit; letter-spacing: 0.005em;
    }
    .tooltip::before { display: none; }
    .nav-link:hover .nav-icon, .sign-out-btn:hover .sign-out-icon { transform: none; }
    .content-wrapper { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===== SCROLLBAR ===== */
.content-wrapper::-webkit-scrollbar { width: 8px; }
.content-wrapper::-webkit-scrollbar-track { background: transparent; }
.content-wrapper::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
.content-wrapper::-webkit-scrollbar-thumb:hover { background: #383838; }