/* ============================================================
   carQ light-theme overlay (admin + auth pages)
   White surfaces, red #E2231C primary, black secondary.
   Navbar/topbar is a dedicated black-background / red-text
   treatment (see --c-navbar-* below) — distinct from the white
   card surfaces so recoloring one doesn't blacken the other.
   Loaded after the inline <style> block in each admin page so
   it wins specificity ties.

   Public user pages (/<code>) are NOT included — they keep
   per-user theme colours from the Design tab.
   ============================================================ */

:root {
    --c-bg:      #ffffff;
    --c-elev:    #fafafa;
    --c-card:    #ffffff;
    --c-card-2:  #f5f5f5;
    --c-border:  #e5e5e5;
    --c-text:    #000000;
    --c-text-2:  #555555;
    --c-muted:   #888888;
    --c-accent:  #E2231C;
    --c-accent-soft: rgba(226, 35, 28, 0.08);
    --c-navbar-bg:   #000000;
    --c-navbar-text: #E2231C;
}

html, body {
    background: var(--c-bg) !important;
    color: var(--c-text);
}

/* ---------- Navbar ---------- */
.navbar, .topbar, header.main-header {
    background: var(--c-navbar-bg) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    color: var(--c-navbar-text);
    border-bottom: 1px solid #000000;
}
.navbar h2, .navbar-logo, .navbar-right span, .navbar-right a {
    color: var(--c-navbar-text) !important;
}
.navbar h2 { color: var(--c-navbar-text) !important; }

/* ---------- Cards / containers ---------- */
.card, .stat-card, .info-box, .premium-box, .panel, .auth-box,
.contact-card, .container > .card, .form-card,
.theme-card, .code-tier, .pricing-card-inner {
    background: var(--c-card) !important;
    color: var(--c-text) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--c-border) !important;
}

.stat-card h3 { color: var(--c-text-2) !important; }
.stat-card .value { color: var(--c-accent) !important; }
.card h2, .card h3, .card h4 { color: var(--c-text) !important; }
.card p, .card label, .card small { color: var(--c-text-2); }

/* ---------- Tabs ----------
   Only targets generic underline-style tab strips (e.g. tab-btn). The
   dashboard pill tabs (.tab / .tab.active) style themselves and must not
   be overridden here — otherwise the active pill ends up with orange text
   on an orange background. */
.tab-btn { color: var(--c-text-2) !important; }
.tab-btn.active {
    color: var(--c-accent) !important;
    border-bottom-color: var(--c-accent) !important;
}

/* ---------- Buttons ---------- */
/* Generic .btn on the auth pages (login, register, forgot-password) has only
   one variant — a primary action — so we treat plain .btn as the primary. */
.btn,
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
input[type="submit"].btn,
button.btn {
    background: var(--c-accent) !important;
    color: #ffffff !important;
    font-weight: 700;
    border: none !important;
}
.btn-secondary, button.btn-secondary {
    background: var(--c-card-2) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
}
.btn-danger { background: #dc2626 !important; color: #fff !important; }
.btn:hover, .btn-primary:hover { filter: brightness(1.05); }

/* ---------- Form inputs ---------- */
.card input[type="text"], .card input[type="email"], .card input[type="password"],
.card input[type="tel"], .card input[type="url"], .card input[type="number"],
.card textarea, .card select,
input.form-control, textarea.form-control, select.form-control,
.form-group input, .form-group textarea, .form-group select {
    background: #ffffff !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--c-muted) !important; }

/* Focus state on inputs */
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--c-accent) !important;
    outline-offset: 0;
    border-color: var(--c-accent) !important;
}

/* ---------- Labels / form text ---------- */
.card label, label, .form-label {
    color: var(--c-text) !important;
}

/* ---------- Generic links ---------- */
a { color: var(--c-accent); }
a:hover { color: var(--c-accent); filter: brightness(0.9); }

/* ---------- Tables (owner/users page) ---------- */
table { background: var(--c-card) !important; color: var(--c-text) !important; }
table thead { background: var(--c-card-2) !important; }
table th { color: var(--c-text) !important; border-color: var(--c-border) !important; }
table td { border-color: var(--c-border) !important; }
table tr:hover { background: var(--c-card-2) !important; }

/* ---------- Modals / popovers (cropper.js, theme picker) ---------- */
.modal, .modal-content, .modal-dialog {
    background: var(--c-card) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
}
.modal-header, .modal-footer {
    background: var(--c-card-2) !important;
    border-color: var(--c-border) !important;
}

/* ---------- Theme gallery preview cards ---------- */
.theme-tile, .theme-preview {
    background: var(--c-card) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
}
.theme-tile h3 { color: var(--c-accent) !important; }

/* ---------- Alerts ---------- */
.alert-success { background: #ecfdf3 !important; color: #155724 !important; border-color: #16a34a !important; }
.alert-error,
.alert-danger   { background: #fdecec !important; color: #721c24 !important; border-color: #dc2626 !important; }
.alert-warning  { background: #fff7e6 !important; color: #7c4a03 !important; border-color: #f59e0b !important; }
.alert-info     { background: #eef4ff !important; color: #1e3a8a !important; border-color: #3b82f6 !important; }

/* ---------- Footer ---------- */
footer, .footer, .page-footer {
    background: var(--c-text) !important;
    color: #f5f5f5 !important;
}
footer a, .footer a, .page-footer a { color: var(--c-accent) !important; }

/* ---------- Small text fixes ---------- */
small, .muted, .text-muted, .hint, .help-text {
    color: var(--c-muted) !important;
}

/* ---------- Map / leaflet ---------- */
.leaflet-container { background: #f0f0f0 !important; }

/* ---------- Auth screens (login, register, forgot-password) ---------- */
.auth-wrap, .auth-page {
    background: var(--c-bg) !important;
    color: var(--c-text);
}
.auth-card, .auth-box {
    background: var(--c-card) !important;
    color: var(--c-text);
    border: 1px solid var(--c-border);
}

/* ---------- Premium highlight boxes ---------- */
.premium-warning, .premium-feature, .upgrade-prompt {
    background: var(--c-accent-soft) !important;
    border: 1px solid var(--c-accent) !important;
    color: var(--c-text) !important;
}