/* ============================================================
   ManuCars Web — Temas (paridade com App/Services/ThemeService)
   Claro (padrao) / Escuro / Azul oficina.
   Carregado depois de app.css: as regras tematicas prevalecem.
   ============================================================ */

:root {
    --primary: #0F766E;
    --primary-dark: #115E59;
    --on-primary: #FFFFFF;
    --secondary: #CCFBF1;
    --accent: #F97316;
    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;
    --page-background: #F8FAFC;
    --surface: #EEF2F7;
    --card: #FFFFFF;
    --input: #FFFFFF;
    --border: #D9E2EC;
    --text-primary: #111827;
    --text-secondary: #64748B;
    --muted: #94A3B8;
    --shell-background: #0F766E;
    --shell-foreground: #FFFFFF;
    --chart-fuel: #14B8A6;
    --chart-spend: #F97316;
}

[data-theme='dark'] {
    --primary: #38BDF8;
    --primary-dark: #0284C7;
    --on-primary: #07111F;
    --secondary: #0F2A3D;
    --accent: #FBBF24;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #F87171;
    --page-background: #0B1220;
    --surface: #111827;
    --card: #172033;
    --input: #0F172A;
    --border: #334155;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --muted: #94A3B8;
    --shell-background: #0F172A;
    --shell-foreground: #E0F2FE;
    --chart-fuel: #38BDF8;
    --chart-spend: #FBBF24;
}

[data-theme='blue'] {
    --primary: #0E7490;
    --primary-dark: #155E75;
    --on-primary: #FFFFFF;
    --secondary: #CFFAFE;
    --accent: #FACC15;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #E11D48;
    --page-background: #EFF6FF;
    --surface: #DBEAFE;
    --card: #FFFFFF;
    --input: #F8FAFC;
    --border: #B6D3E8;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --muted: #64748B;
    --shell-background: #075985;
    --shell-foreground: #FFFFFF;
    --chart-fuel: #06B6D4;
    --chart-spend: #FACC15;
}

/* ── Superficies principais ────────────────────────────────── */
body {
    background: var(--page-background);
    color: var(--text-primary);
}

.top-bar {
    background: var(--shell-background);
    color: var(--shell-foreground);
}

.bottom-nav {
    background: var(--card);
    border-top: 1px solid var(--border);
}

.bottom-nav a { color: var(--text-secondary); }
.bottom-nav a.active { color: var(--primary); }

.form-card,
.list-card,
.dashboard-card,
.report-card,
.dashboard-access-code {
    background: var(--card);
    color: var(--text-primary);
    border-color: var(--border);
}

.form-group label,
.card-sub,
.report-card span,
.dashboard-access-code p {
    color: var(--text-secondary);
}

.form-input,
select.form-input {
    background: var(--input);
    color: var(--text-primary);
    border-color: var(--border);
}

.form-input:focus { border-color: var(--primary); }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--text-primary); }
.btn-success { background: var(--success); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }

.sync-modal { background: var(--card); color: var(--text-primary); }
.sync-progress-fill { background: var(--primary); }

.empty, .profile-help { color: var(--text-secondary); }

/* ── Seletor de tema (Perfil) ──────────────────────────────── */
.theme-options { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-option {
    flex: 1 1 100px;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    background: var(--card);
    color: var(--text-primary);
    font-size: 13px;
}
.theme-option.selected { border-color: var(--primary); font-weight: 700; }
.theme-swatch {
    display: block;
    height: 22px;
    border-radius: 6px;
    margin-bottom: 6px;
}

/* ── Menu / cabecalho ──────────────────────────────────────── */
.help-button {
    background: transparent;
    border: none;
    color: var(--shell-foreground);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
}
.help-button svg { width: 22px; height: 22px; }

.new-vehicle-footer {
    position: fixed;
    bottom: 64px;
    right: 12px;
    z-index: 50;
}