/* Paleta baseada no site institucional (web.netvaletelecom.com):
   ciano como cor de destaque, fonte Inter. Escuro é o padrão; claro é opt-in
   (alternado pelo menu do usuário, guardado em localStorage — ver base.html). */
:root,
[data-theme="dark"] {
    --brand: #06b6d4;
    --brand-dark: #0891b2;
    --brand-light: rgba(6, 182, 212, 0.18);
    --ink: #f3f4f6;
    --muted: #94a3b8;
    --surface: #1e293b;
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-2-hover: rgba(255, 255, 255, 0.06);
    --bg: #0f172a;
    --border: #334155;
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    --radius: 14px;
}

[data-theme="light"] {
    --brand: #06b6d4;
    --brand-dark: #0891b2;
    --brand-light: rgba(6, 182, 212, 0.12);
    --ink: #0f172a;
    --muted: #64748b;
    --surface: #ffffff;
    --surface-2: rgba(15, 23, 42, 0.035);
    --surface-2-hover: rgba(15, 23, 42, 0.06);
    --bg: #f1f5f9;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(20, 20, 40, 0.08), 0 1px 2px rgba(20, 20, 40, 0.06);
    --btn-close-filter: none;
    --radius: 14px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.text-muted { color: var(--muted) !important; }

/* Navbar — sempre escura (barra de marca), independente do tema do conteúdo */
.navbar.bg-dark {
    background: linear-gradient(180deg, #19132b, #100a1f) !important;
}
.navbar-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: -0.02em; }
.navbar-brand img { height: 32px; width: auto; }
.nav-link:hover, .nav-link:focus { color: var(--brand) !important; }

/* Menu do usuário (avatar + dropdown: Tema / Sair) */
.avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 0.95rem;
}
.avatar-btn:hover, .avatar-btn:focus { background: var(--brand-dark); color: #fff; }

/* Sininho de notificações (só admin) */
.bell-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bell-btn:hover, .bell-btn:focus { background: rgba(255, 255, 255, 0.1); color: #fff; }
.bell-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    padding: 0.25em 0.4em;
    line-height: 1;
}
.bell-btn.piscando { animation: sino-piscar 1s infinite; }
@keyframes sino-piscar {
    0%, 100% { color: #fff; }
    50% { color: #ff4d4f; }
}
.notificacao-item { white-space: normal; }
.notificacao-item.erro { border-left: 3px solid #dc3545; }
.notificacao-item.sucesso { border-left: 3px solid #198754; }
.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 0.4rem;
    min-width: 220px;
}
.dropdown-header { color: var(--muted); font-size: 0.8rem; }
.dropdown-item {
    color: var(--ink);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
/* O Bootstrap define uma cor escura fixa pra essa classe (pensada pra fundo
   claro) — sem isso, texto normal dentro dela (ex: título das notificações)
   fica ilegível em cima do fundo escuro do tema. */
.dropdown-item-text { color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2-hover); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active {
    background: var(--brand) !important;
    color: #fff !important;
}
.dropdown-divider { border-color: var(--border); margin: 0.4rem 0; }

/* Cards */
.card {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    padding: 1rem 1.25rem;
}

/* Botões (pílula, como no site) */
.btn { border-radius: 9999px; font-weight: 600; min-height: 44px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-success { background: #10b981; border-color: #10b981; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-secondary { color: var(--muted); border-color: var(--border); }
.btn-outline-secondary:hover { background: var(--surface-2-hover); border-color: var(--muted); color: var(--ink); }
.btn-outline-danger:hover { color: #fff; }
.btn-close { filter: var(--btn-close-filter); }

/* Modal do Bootstrap não segue o tema por padrão (fica sempre branco) — sem
   isso, o texto claro do tema escuro fica ilegível em cima do fundo branco. */
.modal-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
}
.modal-header, .modal-footer {
    border-color: var(--border);
}

/* Inputs */
.form-control, .form-select {
    background: var(--surface-2);
    border-radius: 10px;
    border: 1.5px solid var(--border);
    color: var(--ink);
    min-height: 46px;
    padding: 0.5rem 0.85rem;
}
.form-control::placeholder { color: var(--muted); }
/* A lista aberta do <select> é renderizada pelo navegador (não pelo nosso
   CSS) e não respeita bem fundo translúcido — força cor sólida aqui pra não
   ficar com texto claro em fundo branco no tema escuro. */
.form-select option {
    background-color: var(--surface);
    color: var(--ink);
}
.form-control:focus, .form-select:focus {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--surface-2-hover);
    color: var(--muted);
}
.form-label { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.form-control.is-invalid, .form-select.is-invalid { border-color: #f87171; }
.form-check-input { background-color: var(--surface-2-hover); border-color: var(--border); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-label { color: var(--ink); }
.form-text { color: var(--muted); }

/* Tabelas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: var(--surface-2-hover);
    --bs-table-hover-color: var(--ink);
    --bs-table-border-color: var(--border);
}
.table thead th { color: var(--muted); font-weight: 600; border-bottom-width: 1px; }
.table td, .table th { vertical-align: middle; }

/* Números/links clicáveis dentro de tabela (ex: drill-down de clientes nas
   abas Equipe/Clientes e receita) -- sem isso, o Bootstrap usa o azul
   padrão dele (--bs-link-color), que não é a cor de marca do app. */
.btn-link, .btn-link:hover {
    color: var(--brand);
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; color: var(--brand-dark); }

/* Alertas */
.alert { border-radius: 10px; border: 1px solid transparent; }
.alert-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.4); color: #10b981; }
.alert-danger { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; }
.alert-warning { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); color: #d97706; }
.alert-info { background: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.4); color: #0891b2; }

/* ---------------- Stepper (formulário em etapas) ---------------- */
.stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    position: relative;
}
.stepper::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.stepper .step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 6px;
}
.stepper .step .circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all .2s ease;
}
.stepper .step .label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}
.stepper .step.active .circle { background: var(--brand); border-color: var(--brand); color: #fff; }
.stepper .step.active .label { color: var(--brand); }
.stepper .step.done .circle { background: #10b981; border-color: #10b981; color: #fff; }

@media (max-width: 576px) {
    .stepper .step .label { display: none; }
}

.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn .25s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.step-nav .btn { flex: 1; }

.invalid-feedback-custom {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: none;
}
.is-invalid ~ .invalid-feedback-custom,
.form-control.is-invalid + .invalid-feedback-custom,
.form-select.is-invalid + .invalid-feedback-custom {
    display: block;
}

/* Cards de histórico */
.venda-card { border-left: 4px solid var(--brand); }
.venda-card.erro { border-left-color: #f87171; }

/* Lista "Todas as vendas"/"Minhas vendas" -- linha compacta (ver
   historico.html) e os "chips" de filtro ativo, removível no X. */
.venda-row:hover { background: var(--surface-2-hover); }
a.badge.rounded-pill:hover { filter: brightness(1.15); }

/* Abas (nav-tabs) */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link {
    color: var(--muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-color: var(--border); }
.nav-tabs .nav-link.active {
    color: var(--brand);
    background: transparent;
    border-color: var(--brand);
}

/* Sub-abas dentro de um grupo (nav-pills) -- sem isso, o Bootstrap usa o
   azul sólido padrão dele no ".active", que destoa do resto do app (tudo
   em ciano/escuro) e fica com cara de "não terminado". */
.nav-pills .nav-link {
    color: var(--muted);
    background: transparent;
    font-weight: 500;
    border: 1px solid transparent;
}
.nav-pills .nav-link:hover { color: var(--ink); background: var(--surface-2-hover); }
.nav-pills .nav-link.active {
    color: var(--brand);
    background: var(--brand-light);
    border-color: var(--brand);
}