/* =====================================================================
   SYNVIX DARK MODE — dark-mode.css
   Aplica-se com body.dark-theme. Não modifica o CSS original.
   ===================================================================== */

/* ── 1. TRANSIÇÃO GLOBAL ─────────────────────────────────────────── */
body.dark-theme * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ── 2. FUNDO GERAL ──────────────────────────────────────────────── */
body.dark-theme {
    background: #0a1929 !important;
    color: #e2e8f0 !important;
}

/* ── 3. SHELL / LAYOUT ───────────────────────────────────────────── */
body.dark-theme .synvix-main,
body.dark-theme .synvix-content,
body.dark-theme .app-body,
body.dark-theme #app { background: #0a1929 !important; }

/* ── 4. TOPBAR ───────────────────────────────────────────────────── */
body.dark-theme .synvix-topbar {
    background: #0f2942 !important;
    border-bottom-color: #1e3a5f !important;
}
body.dark-theme .synvix-topbar-title h1 { color: #f1f5f9 !important; }
body.dark-theme .synvix-topbar-title p   { color: #94a3b8 !important; }

body.dark-theme .btn-support {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
    color: #94a3b8 !important;
}
body.dark-theme .btn-support:hover {
    background: #1e3a5f !important;
    color: #e2e8f0 !important;
}

/* ── 5. SIDEBAR ──────────────────────────────────────────────────── */
body.dark-theme .synvix-sidebar {
    background: #050e1a !important;
    border-right: 1px solid #0f2942;
}
body.dark-theme .synvix-sidebar .asset-card {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.04) !important;
}
body.dark-theme .synvix-sidebar .asset-card:hover {
    background: rgba(255,255,255,0.05) !important;
}
body.dark-theme .sidebar-btn {
    border-color: rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.6) !important;
}
body.dark-theme .sidebar-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    color: white !important;
}
body.dark-theme .sidebar-user {
    background: rgba(255,255,255,0.02) !important;
}

/* ── 6. PRODUCT SWITCHER ─────────────────────────────────────────── */
body.dark-theme .synvix-product-switcher {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}
body.dark-theme .synvix-product-switcher button.current {
    background: #1e3a5f !important;
    border-color: #2d5a8e !important;
    color: #e2e8f0 !important;
}
body.dark-theme .synvix-product-switcher button:not(.current) {
    color: #94a3b8 !important;
}

/* ── 7. MASTER CONTROL CARD ──────────────────────────────────────── */
body.dark-theme .master-control-card,
body.dark-theme #master-control-card {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}
body.dark-theme .control-label { color: #64748b !important; }

/* ── 8. TABS NAVBAR ──────────────────────────────────────────────── */
body.dark-theme .tabs-navbar {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}
body.dark-theme .tab-btn {
    color: #94a3b8 !important;
}
body.dark-theme .tab-btn:hover { color: #e2e8f0 !important; }
body.dark-theme .tab-btn.active {
    color: #E86B1A !important;
    border-bottom-color: #E86B1A !important;
}

/* ── 9. SELECTOR DE UNIDADE / CÂMERA ─────────────────────────────── */
body.dark-theme #global-city-selector-wrapper {
    background: #0f2942 !important;
    border-bottom-color: #1e3a5f !important;
}
body.dark-theme .cam-btn,
body.dark-theme .pill-group button {
    background: #0a1929 !important;
    border-color: #1e3a5f !important;
    color: #94a3b8 !important;
}
body.dark-theme .cam-btn:hover,
body.dark-theme .pill-group button:hover {
    background: #1e3a5f !important;
    color: #e2e8f0 !important;
}
body.dark-theme .cam-btn.active,
body.dark-theme .pill-group button.active {
    background: #003B73 !important;
    color: white !important;
    border-color: #005BAA !important;
}

/* ── 10. TELEMETRIA ──────────────────────────────────────────────── */
body.dark-theme [id^="telemetry-bar-"] {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}

/* ── 11. GRID DE FOTOS ───────────────────────────────────────────── */
body.dark-theme .main-grid,
body.dark-theme #main-grid { background: transparent !important; }

body.dark-theme .img-card {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}
body.dark-theme .img-card:hover {
    border-color: #E86B1A !important;
    box-shadow: 0 4px 15px rgba(232,107,26,0.15) !important;
}
body.dark-theme .card-meta {
    background: rgba(10,25,41,0.9) !important;
    color: #94a3b8 !important;
}

/* ── 12. CALENDÁRIO / CHIPS ──────────────────────────────────────── */
body.dark-theme .days-status-line,
body.dark-theme #calendar-bar {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}
body.dark-theme .day-chip {
    background: #0a1929 !important;
    border-color: #1e3a5f !important;
    color: #94a3b8 !important;
}
body.dark-theme .day-chip.active,
body.dark-theme .day-chip:hover {
    background: #003B73 !important;
    color: white !important;
}

/* ── 13. INPUTS / SELECTS ────────────────────────────────────────── */
body.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-theme select,
body.dark-theme textarea {
    background: #0a1929 !important;
    border-color: #1e3a5f !important;
    color: #e2e8f0 !important;
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder { color: #475569 !important; }
body.dark-theme input:disabled,
body.dark-theme select:disabled { color: #475569 !important; background: #0f1e2e !important; }

body.dark-theme .date-input,
body.dark-theme .comp-date,
body.dark-theme .comp-select,
body.dark-theme .select-input {
    background: #0a1929 !important;
    border-color: #1e3a5f !important;
    color: #e2e8f0 !important;
}

/* ── 14. BOTÕES PRIMÁRIOS ────────────────────────────────────────── */
body.dark-theme .btn-primary {
    background: #E86B1A !important;
    color: white !important;
}

/* ── 15. WELCOME STATE ───────────────────────────────────────────── */
body.dark-theme #welcome-state,
body.dark-theme .welcome-empty-state {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}
body.dark-theme .welcome-empty-state h2 { color: #e2e8f0 !important; }
body.dark-theme .welcome-empty-state p  { color: #94a3b8 !important; }

/* ── 16. CARDS DE RDO ────────────────────────────────────────────── */
body.dark-theme [id^="rdo-doc-"] {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
    color: #e2e8f0 !important;
}
body.dark-theme #grid-rdos-cliente { background: transparent !important; }

/* ── 17. DASHBOARD COCKPIT ───────────────────────────────────────── */
body.dark-theme #dashboard-wrapper > div,
body.dark-theme .cockpit-card,
body.dark-theme [id="cockpit-view"] { background: transparent !important; }

body.dark-theme [id="cockpit-view"] > div > div[style*="background: white"],
body.dark-theme [id="cockpit-view"] div[style*="background: white"] {
    background: #0f2942 !important;
}
body.dark-theme [id="cockpit-view"] div[style*="background: #f8fafc"] {
    background: #0a1929 !important;
}

/* ── 18. MODAIS GENÉRICOS ────────────────────────────────────────── */
body.dark-theme .modal-overlay,
body.dark-theme [id*="modal"] > div > div[style*="background: white"],
body.dark-theme [id*="modal"] > div[style*="background: white"] {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
    color: #e2e8f0 !important;
}
body.dark-theme [id*="modal"] div[style*="background: #f8fafc"],
body.dark-theme [id*="modal"] div[style*="background: #f1f5f9"] {
    background: #0a1929 !important;
}
body.dark-theme [id*="modal"] label { color: #94a3b8 !important; }

/* ── 19. MODAL PERFIL ────────────────────────────────────────────── */
body.dark-theme #modal-perfil-cliente > div {
    background: #0f2942 !important;
}
body.dark-theme #perfil-dados-conteudo > div[style*="background: #f8fafc"] {
    background: #0a1929 !important;
    border-color: #1e3a5f !important;
}

/* ── 20. MODAL SUPORTE ───────────────────────────────────────────── */
body.dark-theme #modal-suporte-synvix > div {
    background: #0f2942 !important;
}
body.dark-theme #modal-suporte-synvix a[style*="background:#f0fdf4"] {
    background: #0a2a1a !important;
    border-color: #166534 !important;
}
body.dark-theme #modal-suporte-synvix a[style*="background:#eff6ff"] {
    background: #0a1a3a !important;
    border-color: #1e3a8a !important;
}
body.dark-theme #modal-suporte-synvix a[style*="background:#fafafa"] {
    background: #0a1929 !important;
    border-color: #1e3a5f !important;
}

/* ── 21. UPSELL MODAL ────────────────────────────────────────────── */
body.dark-theme .upsell-card {
    background: #0f2942 !important;
    color: #e2e8f0 !important;
}

/* ── 22. COMPARADOR ──────────────────────────────────────────────── */
body.dark-theme .comparator-view,
body.dark-theme #comparator-view { background: transparent !important; }
body.dark-theme .slider-hint { color: #94a3b8 !important; }

/* ── 23. TELEMETRIA DO LIGHTBOX ──────────────────────────────────── */
/* Já é dark by design — não precisa de override */

/* ── 24. LOADING STATE ───────────────────────────────────────────── */
body.dark-theme .loading-state { color: #64748b !important; }

/* ── 25. FLATPICKR ───────────────────────────────────────────────── */
body.dark-theme .flatpickr-calendar {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
body.dark-theme .flatpickr-day { color: #e2e8f0 !important; }
body.dark-theme .flatpickr-day:hover { background: #1e3a5f !important; }
body.dark-theme .flatpickr-day.selected,
body.dark-theme .flatpickr-day.selected:hover {
    background: #E86B1A !important;
    border-color: #E86B1A !important;
}
body.dark-theme .flatpickr-day.flatpickr-disabled { color: #334155 !important; }
body.dark-theme .flatpickr-months,
body.dark-theme .flatpickr-weekdays {
    background: #0a1929 !important;
    color: #e2e8f0 !important;
}
body.dark-theme .flatpickr-month,
body.dark-theme .flatpickr-weekday { color: #e2e8f0 !important; fill: #e2e8f0 !important; }
body.dark-theme .flatpickr-current-month input.cur-year,
body.dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    color: #e2e8f0 !important;
}
body.dark-theme .numInputWrapper span { border-color: #1e3a5f !important; }

/* ── 26. ÍNDICE / HUB PAGE ───────────────────────────────────────── */
body.dark-theme .app-body { background: #0a1929 !important; }
body.dark-theme .app-sidebar,
body.dark-theme .sidebar { background: #050e1a !important; }
body.dark-theme .top-header { background: #0f2942 !important; border-color: #1e3a5f !important; }
body.dark-theme .content-area,
body.dark-theme .main-content { background: #0a1929 !important; }
body.dark-theme .card,
body.dark-theme .dashboard-card {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
}

/* ── 27. RDO PAGE SPECIFIC ───────────────────────────────────────── */
body.dark-theme .rdo-container,
body.dark-theme #rdo-view { background: transparent !important; }

/* ── 28. SCROLLBAR ───────────────────────────────────────────────── */
body.dark-theme ::-webkit-scrollbar-track { background: #0a1929 !important; }
body.dark-theme ::-webkit-scrollbar-thumb { background: #1e3a5f !important; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: #2d5a8e !important; }

/* ── 29. BADGE MONITORANDO DESDE ─────────────────────────────────── */
body.dark-theme #badge-primeira-foto {
    background: #0a2a1a !important;
    border-color: #166534 !important;
    color: #4ade80 !important;
}

/* ── 30. BOTÃO TOGGLE DARK MODE ──────────────────────────────────── */
#synvix-dark-toggle {
    background: transparent;
    border: 1px solid var(--synvix-line, #e2e8f0);
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}
#synvix-dark-toggle:hover {
    background: #f1f5f9;
    color: #0f172a;
}
body.dark-theme #synvix-dark-toggle {
    background: #0f2942 !important;
    border-color: #1e3a5f !important;
    color: #f1c40f !important;
}
body.dark-theme #synvix-dark-toggle:hover {
    background: #1e3a5f !important;
}