/*
 * Ultra-Central — bundle global.
 *
 * Consolida 12 arquivos antigos (tokens + fonts + base + components + brand +
 * layout + topbar + sidebar + mobile-tabbar + scrollbar + tooltip + datetime)
 * em um unico request. Cascade order preservada:
 *
 *   1. Tokens (custom properties)
 *   2. Fonts (@font-face locais)
 *   3. Base reset / tipografia / a11y
 *   4. Components (btn, card, chip, tag, bokeh, grid)
 *   5. Brand (Skynet Aruja — sobrescreve .brand legado)
 *   6. Chrome (layout, topbar, sidebar, mobile-tabbar)
 *   7. Infra UI (scrollbar, tooltip, datetime)
 *
 * Carregado pelo layout app.blade.php (e parcialmente pelo guest.blade.php).
 * Sem CDN — todas as fontes referenciadas vivem em /public/fonts/.
 */

/* ═════════════════════════════════════════════════════════════════
 * 1) TOKENS
 * Fonte unica de design tokens — qualquer outro CSS deve referenciar
 * essas vars, nunca redeclarar hex.
 * ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand ──────────────────────────────────────────────── */
    --color-primary: #1ABCDC;
    --color-accent:  #A2C622;

    /* ── Verdes / limes ─────────────────────────────────────── */
    --green-600: #768E2D;
    --green-500: #84A534;
    --green-460: #93AF3A;
    --lime-520:  #A2C622;
    --lime-500:  #9FC93A;
    --lime-460:  #C1DD4E;
    --lime-440:  #B2E230;

    /* ── Cyans ──────────────────────────────────────────────── */
    --cyan-500:  #1ABCDC;
    --cyan-200:  #8FF6F9;

    /* ── Surfaces (dark mode unico) ─────────────────────────── */
    --bg-0:      #070A10;
    --bg-1:      #0B1018;
    --bg-2:      #0F1521;
    --bg-3:      #131B2A;
    --bg-card:   rgba(20, 28, 44, 0.72);
    --bg-card-2: rgba(15, 21, 33, 0.65);
    --hairline:   rgba(255, 255, 255, 0.08);
    --hairline-2: rgba(255, 255, 255, 0.14);

    /* ── Texto ──────────────────────────────────────────────── */
    --text:   #F4F7FA;
    --text-2: #C9D1DB;
    --text-3: #8B95A4;
    --text-4: #5D6675;

    /* ── Estados ────────────────────────────────────────────── */
    --danger: #FF6B6B;
    --warn:   #FFB547;
    --ok:     var(--lime-460);

    /* ── Gradientes ─────────────────────────────────────────── */
    --grad-brand: linear-gradient(135deg, var(--cyan-500) 0%, var(--lime-520) 100%);
    --grad-text:  linear-gradient(135deg, var(--cyan-200) 0%, var(--lime-460) 80%);
    --grad-cta:   linear-gradient(180deg, var(--lime-460) 0%, var(--lime-520) 100%);
    --grad-cyan:  linear-gradient(180deg, var(--cyan-200), var(--cyan-500));

    /* ── Sombras ────────────────────────────────────────────── */
    --shadow-sm: 0 6px 24px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-glow-cyan: 0 0 0 1px rgba(26, 188, 220, 0.35), 0 8px 32px rgba(26, 188, 220, 0.18);
    --shadow-glow-lime: 0 0 0 1px rgba(162, 198, 34, 0.35), 0 8px 32px rgba(162, 198, 34, 0.18);
    --shadow-glow-danger: 0 0 0 1px rgba(255, 107, 107, 0.35), 0 8px 32px rgba(255, 107, 107, 0.18);

    /* ── Raios ──────────────────────────────────────────────── */
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* ── Tipografia ─────────────────────────────────────────── */
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;

    /* ── Scrollbar (custom) ─────────────────────────────────── */
    --scrollbar-size:         12px;
    --scrollbar-track:        rgba(255, 255, 255, 0.04);
    --scrollbar-thumb:        linear-gradient(180deg, rgba(26, 188, 220, 0.7), rgba(162, 198, 34, 0.7));
    --scrollbar-thumb-hover:  linear-gradient(180deg, rgba(26, 188, 220, 1),   rgba(162, 198, 34, 1));
}

/* ═════════════════════════════════════════════════════════════════
 * 2) FONTS — Poppins (UI) + JetBrains Mono (numeros/MACs/IPs).
 * Subset latin. Servidas em /public/fonts/, sem CDN.
 * ═══════════════════════════════════════════════════════════════ */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/poppins-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/poppins-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/poppins-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/poppins-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═════════════════════════════════════════════════════════════════
 * 3) BASE — reset, tipografia raiz, foco a11y, helpers .num/.mono.
 * ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: var(--cyan-200);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Foco visivel — requisito de a11y do design */
*:focus-visible {
    outline: 2px solid var(--cyan-200);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link de a11y */
.skip-link {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
.skip-link:focus {
    left: 12px;
    top: 12px;
    padding: 8px 14px;
    background: var(--lime-460);
    color: var(--bg-0);
    z-index: 10000;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Numeros tabulares — usar onde houver valores monetarios alinhados */
.num {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Mono — para MAC, IP, linha digitavel, codigo de barras */
.mono {
    font-family: var(--font-mono);
}

/* Gradiente em texto */
.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ═════════════════════════════════════════════════════════════════
 * 4) COMPONENTS — botoes, cards, chips, tags, bokeh, grid overlay.
 * O bloco `.brand` legado (gradient ball + ULTRA CENTRAL) foi removido
 * pois nao ha mais views que o usem; brand-logo/brand-mark cobrem tudo.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Bokeh background — recria os glows do design ───────────── */
.bokeh {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bokeh::before,
.bokeh::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}
.bokeh::before {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(118, 142, 45, 0.95), rgba(118, 142, 45, 0) 70%);
    top: -160px;
    left: -120px;
}
.bokeh::after {
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(26, 188, 220, 0.7), rgba(26, 188, 220, 0) 70%);
    bottom: -220px;
    right: -140px;
}
.bokeh .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.38;
}
.bokeh .b1 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(162, 198, 34, 0.9), transparent 70%); top: 30%; left: 20%; }
.bokeh .b2 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(143, 246, 249, 0.65), transparent 70%); top: 55%; left: 60%; }
.bokeh .b3 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(193, 221, 78, 0.55), transparent 70%); top: 18%; left: 65%; }

/* Grid sutil */
.grid-overlay {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 50%, transparent 100%);
}

/* ── Botoes ─────────────────────────────────────────────────── */
.btn {
    --bb: var(--hairline-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--bb);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.btn:active {
    transform: translateY(0);
}
.btn.primary {
    background: var(--grad-cta);
    border: none;
    color: #1A1A1A;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(162, 198, 34, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn.primary:hover {
    box-shadow: 0 10px 28px rgba(162, 198, 34, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn.cyan {
    background: var(--grad-cyan);
    border: none;
    color: #062029;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(26, 188, 220, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn.ghost {
    background: transparent;
    border-color: var(--hairline);
}
.btn.sm  { padding: 7px 12px; font-size: 12.5px; gap: 6px; }
.btn.lg  { padding: 14px 22px; font-size: 15px; }
.btn.block {
    display: flex;
    width: 100%;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-sm);
}
.card.flat { background: var(--bg-card-2); }

/* ── Chips ──────────────────────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
}
.chip.cyan { background: rgba(26, 188, 220, 0.12); border-color: rgba(26, 188, 220, 0.35); color: var(--cyan-200); }
.chip.lime { background: rgba(162, 198, 34, 0.14); border-color: rgba(162, 198, 34, 0.4);  color: var(--lime-460); }
.chip.red  { background: rgba(255, 107, 107, 0.14); border-color: rgba(255, 107, 107, 0.4); color: #FFB3B3; }
.chip.warn { background: rgba(255, 181, 71, 0.14);  border-color: rgba(255, 181, 71, 0.4);  color: #FFD08A; }
.chip.dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

/* ── Tags ───────────────────────────────────────────────────── */
.tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}
.tag.paid { background: rgba(162, 198, 34, 0.14); color: var(--lime-460); border: 1px solid rgba(162, 198, 34, 0.35); }
.tag.open { background: rgba(255, 181, 71, 0.14); color: #FFC983; border: 1px solid rgba(255, 181, 71, 0.35); }
.tag.over { background: rgba(255, 107, 107, 0.14); color: #FF9A9A; border: 1px solid rgba(255, 107, 107, 0.35); }

/* Tag soft cyan — usado pra "Em aberto" neutro em listings de fatura/dashboard */
.tag.cyan-soft {
    background: rgba(26, 188, 220, 0.10);
    color: var(--cyan-200);
    border: 1px solid rgba(26, 188, 220, 0.30);
}

/* ═════════════════════════════════════════════════════════════════
 * 5) BRAND — Skynet Aruja (brand-logo + brand-mark)
 * ═══════════════════════════════════════════════════════════════ */

/* Logo padrao usada em topbar/sidebar — em linha, pequena. */
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.brand-logo img,
.brand-logo svg {
    height: 42px;
    width: auto;
    display: block;
}
.brand-logo.lg img,
.brand-logo.lg svg { height: 64px; }
.brand-logo.xl img,
.brand-logo.xl svg { height: 96px; }

/* Versao "marca + tagline" — usada em login/cards. */
.brand-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.brand-mark a {
    display: inline-flex;
    text-decoration: none;
    line-height: 0;
}
.brand-mark img,
.brand-mark svg {
    height: 72px;
    width: auto;
    display: block;
}
.brand-mark .brand-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--text-3);
    text-transform: uppercase;
}

/* Drop shadow sutil para que a logo branca "flutue" sobre o fundo escuro. */
.brand-logo img,
.brand-mark img {
    filter: drop-shadow(0 4px 16px rgba(26, 188, 220, 0.18));
}

/* Auth card — zera o margin do brand-mark para nao duplicar o padding do card */
.auth-card .brand-mark {
    margin-top: 0;
    margin-bottom: 24px;
}

/* ═════════════════════════════════════════════════════════════════
 * 6) CHROME — layout shell + topbar + sidebar + mobile-tabbar.
 * Breakpoint unico: 1024px.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────────────────── */
body.app-shell {
    min-height: 100vh;
    /* compensa altura da tabbar mobile + safe area, evitando que conteudo final
       fique escondido atras do tabbar. Em desktop, o seletor abaixo zera. */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
}

/* ── Corpo (sidebar + main) ───────────────────────────────── */
.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 20px 32px;
    position: relative;
    z-index: 1;
}

/* foco programatico no main nao deve mostrar contorno (skip-link ja indica) */
.app-main:focus {
    outline: none;
}

@media (min-width: 1024px) {
    body.app-shell {
        /* sem espaco para tabbar (tabbar nao aparece) */
        padding-bottom: 0;
    }
    .app-main {
        padding: 28px 32px 40px;
    }
}

@media (max-width: 1023.98px) {
    .app-main {
        padding: 20px 16px 24px;
    }
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 64px;
    padding: 12px 20px;
    background: rgba(7, 10, 16, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
    .topbar {
        padding: 12px 28px;
    }
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wrap do avatar + dropdown — ancora pro menu absoluto. */
.topbar-avatar-wrap {
    position: relative;
}

/* Dropdown generico (auto-bind via data-dropdown-toggle no app.js).
 * Anchored ao topbar-avatar-wrap; abre pra baixo e alinha pela direita. */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 6px;
    background: var(--surface-2, #11182B);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 90;
    animation: dropdown-in 0.14s ease-out;
}
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu { animation: none; }
}
.dropdown-menu[hidden] { display: none; }

.dropdown-header {
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dropdown-header-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.dropdown-header-contrato {
    font-size: 11.5px;
    color: var(--text-4);
}
.dropdown-header-contrato .mono { color: var(--text-2); }

.dropdown-sep {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 4px 0;
}

.dropdown-form { margin: 0; }
.dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    outline: none;
}
.dropdown-item-danger { color: #fca5a5; }
.dropdown-item-danger:hover,
.dropdown-item-danger:focus-visible {
    background: rgba(255, 107, 107, 0.10);
    color: #fecaca;
}

/* Bloco "Nome Sobrenome / Contrato: #XXXX" ao lado do avatar.
 * Visivel so em desktop — em mobile o espaco e' do avatar e icones. */
.topbar-perfil {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    margin-right: 4px;
    padding-right: 4px;
}
.topbar-perfil-nome {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}
.topbar-perfil-contrato {
    font-size: 11px;
    color: var(--text-4);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.topbar-perfil-contrato .mono {
    color: var(--text-2);
}
@media (min-width: 769px) {
    .topbar-perfil { display: flex; }
}

.topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.topbar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hairline-2);
    color: var(--text);
    transform: translateY(-1px);
}
.topbar-btn:active {
    transform: translateY(0);
}

/* avatar — preenchido com gradient brand, sem borda */
.topbar-avatar {
    border: none;
    background: var(--grad-brand);
    color: #062029;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(26, 188, 220, 0.25);
}
.topbar-avatar:hover {
    background: var(--grad-brand);
    color: #062029;
    filter: brightness(1.08);
}

/* ── Sidebar (desktop >= 1024px) ───────────────────────────── */
.sidebar {
    width: 256px;
    flex: 0 0 256px;
    padding: 22px 14px;
    background: rgba(7, 10, 16, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

@media (max-width: 1023.98px) {
    .sidebar {
        display: none;
    }
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    text-decoration: none;
}

.sidebar-item.active {
    color: var(--text);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(26, 188, 220, 0.18), rgba(162, 198, 34, 0.14));
    border-color: rgba(162, 198, 34, 0.28);
}
.sidebar-item.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    background: var(--grad-brand);
}

.sidebar-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-3);
    flex: 0 0 30px;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-item:hover .sidebar-icon {
    color: var(--text-2);
}
.sidebar-item.active .sidebar-icon {
    background: rgba(7, 10, 16, 0.5);
    color: var(--lime-460);
}

.sidebar-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Badge de notificacao — pill no item "Faturas". Verde quando >= 1 fatura,
   vermelha quando ha pelo menos uma vencida. */
.sidebar-badge {
    margin-left: auto;
    background: rgba(162, 198, 34, 0.18);
    color: var(--lime-460);
    border: 1px solid rgba(162, 198, 34, 0.42);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 6px;
    min-width: 22px;
    text-align: center;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    animation: sidebarBadgeIn 0.32s ease-out;
}
.sidebar-badge.is-overdue {
    background: rgba(255, 107, 107, 0.16);
    color: #FFB3B3;
    border-color: rgba(255, 107, 107, 0.45);
}
.sidebar-item.active .sidebar-badge {
    box-shadow: 0 0 8px rgba(162, 198, 34, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sidebar-item.active .sidebar-badge.is-overdue {
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@keyframes sidebarBadgeIn {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar-badge { animation: none; }
}

/* Rodape sidebar (logout + versao) */
.sidebar-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.sidebar-logout-form {
    margin: 0;
}
.sidebar-logout-btn {
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-3);
}
.sidebar-logout-btn:hover {
    color: var(--danger);
    border-color: rgba(255, 107, 107, 0.55);
    background: rgba(255, 107, 107, 0.06);
}
.sidebar-version {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

/* ── Mobile tabbar (< 1024px) ──────────────────────────────── */
.mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(7, 10, 16, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
    .mobile-tabbar {
        display: none;
    }
}

.tab-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    color: var(--text-3);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.15s ease;
}
.tab-item:hover {
    color: var(--text-2);
    text-decoration: none;
}
.tab-item.active {
    color: var(--cyan-200);
}
.tab-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--grad-brand);
    box-shadow: 0 0 12px rgba(143, 246, 249, 0.4);
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 0;
}

.tab-label {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.01em;
}
.tab-item.active .tab-label {
    font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════
 * 7) INFRA UI — scrollbar custom, tooltip, datetime picker.
 * Vivem fora dos modulos de pagina porque sao reusados em toda parte.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Scrollbar custom — thumb cyan -> lime ─────────────────────
 * Aplica globalmente em qualquer elemento rolavel (textareas, modais,
 * tabelas, listagens com overflow, etc) — antes era so body + opt-in
 * via .scroll-custom, agora vale em toda a app. Firefox usa a propriedade
 * unificada (scrollbar-color/width), Webkit usa os pseudo-elementos. */
:root,
.scroll-custom {
    scrollbar-color: var(--cyan-500) var(--scrollbar-track);
    scrollbar-width: thin;
}

*::-webkit-scrollbar,
.scroll-custom::-webkit-scrollbar {
    width:  var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track,
.scroll-custom::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb,
.scroll-custom::-webkit-scrollbar-thumb {
    background-image: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover,
.scroll-custom::-webkit-scrollbar-thumb:hover {
    background-image: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner,
.scroll-custom::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Tooltip — bubble compartilhado, posicionado por JS ────── */
.tooltip-bubble {
    position: fixed;
    top: 0;
    left: 0;

    max-width: 280px;
    padding: 8px 12px;

    background: var(--bg-card);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);

    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.4;
    white-space: normal;
    text-align: center;

    pointer-events: none;
    z-index: 9999;

    opacity: 0;
    transform: translate(0, 4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.tooltip-bubble[data-show="true"] {
    opacity: 1;
    transform: translate(0, 0);
}

.tooltip-bubble::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    transform: rotate(45deg);
    pointer-events: none;
}
.tooltip-bubble[data-pos="top"]::after {
    bottom: -5px;
    left: 50%;
    margin-left: -4px;
    border-top: 0;
    border-left: 0;
}
.tooltip-bubble[data-pos="bottom"]::after {
    top: -5px;
    left: 50%;
    margin-left: -4px;
    border-bottom: 0;
    border-right: 0;
}
.tooltip-bubble[data-pos="left"]::after {
    right: -5px;
    top: 50%;
    margin-top: -4px;
    border-bottom: 0;
    border-left: 0;
}
.tooltip-bubble[data-pos="right"]::after {
    left: -5px;
    top: 50%;
    margin-top: -4px;
    border-top: 0;
    border-right: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tooltip-bubble {
        transition: none;
        transform: none;
    }
    .tooltip-bubble[data-show="true"] {
        transform: none;
    }
}

/* ── Datetime picker — popover absoluto, sem horarios ──────── */
.dt-picker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;

    width: 280px;
    padding: 16px;

    background: var(--bg-card);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);

    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;

    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

.dt-picker[data-show="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .dt-picker {
        transition: none;
        transform: none;
    }
    .dt-picker[data-show="true"] {
        transform: none;
    }
}

.dt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.dt-title {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.dt-nav {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dt-nav:hover,
.dt-nav:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    outline: none;
    border-color: var(--hairline-2);
}

.dt-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: center;
}
.dt-weekdays span {
    padding: 4px 0;
}

.dt-grid {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    grid-auto-rows: 36px;
    gap: 2px;
    justify-content: center;
}

.dt-day {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.dt-day:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dt-day:focus-visible {
    outline: none;
    border-color: var(--cyan-500);
    box-shadow: 0 0 0 2px rgba(26, 188, 220, 0.25);
}

.dt-day.outside {
    opacity: 0.35;
}

.dt-day.today {
    border-color: var(--cyan-500);
    color: var(--cyan-200);
}

.dt-day.selected,
.dt-day.selected:hover {
    background: var(--grad-brand);
    color: #062029;
    font-weight: 600;
    border-color: transparent;
}

.dt-day.disabled,
.dt-day[aria-disabled="true"] {
    opacity: 0.2;
    cursor: not-allowed;
    background: transparent;
}

.dt-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
}

.dt-footer button {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.dt-footer button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.dt-footer .dt-apply {
    border-color: transparent;
    background: var(--grad-brand);
    color: #062029;
    font-weight: 600;
}

.dt-footer .dt-apply:hover {
    color: #062029;
    filter: brightness(1.05);
}