@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Conteúdo (claro) — fundo com leve tom azulado, não branco puro */
    --bg:          #EAF0FB;
    --surface:     #FFFFFF;
    --surface-2:   #F1F5FD;
    --border:      #DCE6F7;
    --text:        #111827;
    --text-muted:  #6B7280;
    --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --shadow-md:   0 4px 10px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.05);
    --shadow-lg:   0 12px 28px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.06);

    /* Sidebar (sempre escura, nos dois temas) */
    --side-bg:      #0F1A33;
    --side-bg-2:    #16234A;
    --side-border:  #23335E;
    --side-text:    #B9BDCB;
    --side-text-hi: #FFFFFF;

    /* Marca */
    --signal:    #2E6FF2;
    --signal-2:  #1D4ED8;
    --signal-soft: #E7EFFE;

    --success: #12A150; --success-soft:#E7F8ED;
    --danger:  #E5484D; --danger-soft: #FDEBEC;
    --warning: #E8A93B; --warning-soft:#FDF4E3;
    --info:    #3B82F6; --info-soft:   #EAF2FE;
}

[data-tema="escuro"] {
    --bg:          #0A0C11;
    --surface:     #12141C;
    --surface-2:   #171A23;
    --border:      #262A38;
    --text:        #EEEFF3;
    --text-muted:  #8B90A0;
    --shadow-card: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md:   0 6px 16px rgba(0,0,0,.35);
    --shadow-lg:   0 16px 32px rgba(0,0,0,.45);

    --side-bg:      #060B18;
    --side-bg-2:    #0F1A33;
    --side-border:  #1C2C52;

    --signal:      #4A8CFF;
    --signal-2:    #6FA3FF;
    --signal-soft: #16264A;
    --success-soft:#0F2A19; --danger-soft:#33191A; --warning-soft:#332711; --info-soft:#132038;
}

* { -webkit-font-smoothing: antialiased; box-sizing: border-box; }

/* ---------------- Detalhes azuis espalhados pelo sistema ---------------- */

/* barrinha de destaque embaixo dos títulos de página (H1), em toda tela automaticamente */
main h1.font-display {
    position: relative;
    padding-bottom: .6rem;
    margin-bottom: .25rem !important;
}
main h1.font-display::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 42px; height: 3px;
    background: var(--signal);
    border-radius: 3px;
}

/* checkboxes e radios do sistema inteiro ficam azuis (não precisa de classe extra) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--signal); }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    transition: background-color .15s ease, color .15s ease;
}

.font-display { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -0.01em; }
.font-mono     { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background: var(--signal); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

.vg-surface   { background: var(--surface); border: 1px solid var(--border); }
.vg-surface-2 { background: var(--surface-2); }
.vg-border    { border-color: var(--border); }
.vg-text-muted{ color: var(--text-muted); }
.vg-bg        { background: var(--bg); }

/* ---------------- Marca / logo ---------------- */
.vg-logo-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(155deg, var(--signal), var(--signal-2));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(255,90,31,.35);
    object-fit: cover; /* só tem efeito quando o elemento é uma <img> (logo real) */
    flex-shrink: 0;
}
.vg-logo-mark svg { width: 18px; height: 18px; stroke: #fff; }

/* ---------------- Sidebar ---------------- */
.vg-sidebar { background: var(--side-bg); border-right: 1px solid var(--side-border); }
.vg-side-section {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #565B6C; padding: 1.1rem 1rem .4rem;
}
.vg-nav-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .8rem; border-radius: .55rem;
    color: var(--side-text); font-size: .86rem; font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
    position: relative;
}
.vg-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.vg-nav-item:hover { background: var(--side-bg-2); color: var(--side-text-hi); }
.vg-nav-item.ativo { background: var(--side-bg-2); color: var(--side-text-hi); }
.vg-nav-item.ativo svg { opacity: 1; stroke: var(--signal); }
.vg-nav-item.ativo::before {
    content: ''; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; background: var(--signal); border-radius: 0 4px 4px 0;
}

/* ---------------- Cards ---------------- */
.vg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); }
.vg-card-hover { transition: box-shadow .15s ease, transform .15s ease; }
.vg-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.vg-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 1.15rem 1.25rem; box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: .6rem;
}
.vg-stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.vg-stat-icon svg { width: 19px; height: 19px; }
.vg-stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.55rem; letter-spacing: -.02em; }
.vg-stat-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; }

/* ---------------- Formulários ---------------- */
.vg-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; display: block; }
.vg-input {
    background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text);
    border-radius: .6rem; padding: .6rem .8rem; font-size: .875rem; width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.vg-input:focus { outline: none; border-color: var(--signal); background: var(--surface); box-shadow: 0 0 0 3px var(--signal-soft); }
.vg-input::placeholder { color: var(--text-muted); opacity: .7; }

/* ---------------- Botões ---------------- */
.vg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    border-radius: .6rem; padding: .6rem 1.05rem; font-size: .85rem; font-weight: 600;
    transition: filter .12s ease, background-color .12s ease, box-shadow .12s ease, transform .05s ease;
    cursor: pointer; border: none;
}
.vg-btn svg { width: 16px; height: 16px; }
.vg-btn:active { transform: scale(.98); }
.vg-btn-primary { background: linear-gradient(155deg, var(--signal), var(--signal-2)); color: #fff; box-shadow: 0 2px 8px rgba(255,90,31,.32); }
.vg-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(255,90,31,.4); }
.vg-btn-secondary { background: var(--surface-2); color: var(--text); border: 1.5px solid var(--border); }
.vg-btn-secondary:hover { background: var(--surface); border-color: #cfd3dc; }
.vg-btn-danger { background: var(--danger-soft); color: var(--danger); border: 1.5px solid transparent; }
.vg-btn-danger:hover { filter: brightness(0.97); }
.vg-btn-success { background: var(--success-soft); color: var(--success); border: 1.5px solid transparent; }
.vg-btn-success:hover { filter: brightness(0.97); }
.vg-btn-ghost { background: transparent; color: var(--text-muted); }
.vg-btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* ---------------- Badges ---------------- */
.vg-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.vg-badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.vg-badge-slate  { background: var(--surface-2); color: var(--text-muted); }
.vg-badge-green  { background: var(--success-soft); color: var(--success); }
.vg-badge-red    { background: var(--danger-soft);  color: var(--danger); }
.vg-badge-amber  { background: var(--warning-soft); color: var(--warning); }
.vg-badge-blue   { background: var(--info-soft);    color: var(--info); }
.vg-badge-orange { background: var(--signal-soft);  color: var(--signal-2); }

/* ---------------- Tabelas ---------------- */
.vg-table { border-collapse: separate; border-spacing: 0; }
.vg-table th {
    text-align: left; font-size: .70rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); font-weight: 700; padding: .75rem 1rem;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.vg-table th:first-child { border-top-left-radius: 10px; }
.vg-table th:last-child { border-top-right-radius: 10px; }
.vg-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); font-size: .87rem; vertical-align: middle; }
.vg-table tbody tr { transition: background-color .1s ease; }
.vg-table tbody tr:hover { background: var(--surface-2); }
.vg-table tbody tr:last-child td { border-bottom: none; }

.vg-avatar {
    width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; color: #fff; flex-shrink: 0;
    background: linear-gradient(155deg, var(--signal), var(--signal-2));
}

/* ---------------- Topbar ---------------- */
.vg-topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.vg-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface-2); border: 1.5px solid var(--border); border-radius: .6rem;
    padding: .5rem .8rem; font-size: .85rem; color: var(--text-muted); min-width: 220px;
}
.vg-search svg { width: 16px; height: 16px; }
.vg-search input { background: transparent; border: none; outline: none; color: var(--text); width: 100%; font-size: .85rem; }

@keyframes vgFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.vg-fade-in { animation: vgFadeIn .25s ease both; }