/* ========== DARK MODE GLOBAL ========== */
:root {
    --dm-bg:         #0d1117;
    --dm-surface:    #161b22;
    --dm-surface2:   #21262d;
    --dm-surface3:   #2d333b;
    --dm-border:     #30363d;
    --dm-text:       #e6edf3;
    --dm-text-muted: #8b949e;
    --dm-input-bg:   #0d1117;
    --dm-accent:     #58a6ff;
    --dm-accent-hover: #79c0ff;
    --dm-shadow:     rgba(0,0,0,0.7);
    --dm-green:      #3fb950;
    --dm-red:        #f85149;
    --dm-yellow:     #d29922;
}

/* === BODY === */
body.dark-mode {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* === CONTAINER / SUPERFÍCIES === */
body.dark-mode .container,
body.dark-mode .os-container,
body.dark-mode .form-wrapper,
body.dark-mode .form-container,
body.dark-mode .modal-content,
body.dark-mode #resultados-pesquisa,
body.dark-mode .resultado-item,
body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .orcamento-box,
body.dark-mode .servicos-box,
body.dark-mode section,
body.dark-mode .analise-container,
body.dark-mode .form-section,
body.dark-mode .chart-container,
body.dark-mode .filter-container,
body.dark-mode .kpi-card,
body.dark-mode .chart-wrapper,
body.dark-mode .historico-card,
body.dark-mode .conc-card,
body.dark-mode .finalizado-card,
body.dark-mode .page-container,
body.dark-mode .finalize-os-info {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* Cards kanban */
body.dark-mode .cards-container {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode .service-card,
body.dark-mode .card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 2px 8px var(--dm-shadow) !important;
}
body.dark-mode .service-card:hover,
body.dark-mode .card:hover {
    background-color: var(--dm-surface2) !important;
    box-shadow: 0 4px 16px var(--dm-shadow) !important;
}

body.dark-mode header {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 2px 8px var(--dm-shadow) !important;
}

/* Toolbar Kanban */
body.dark-mode .toolbar {
    background-color: var(--dm-surface2) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

/* Kanban board bg */
body.dark-mode .kanban-board {
    background-color: var(--dm-bg) !important;
}

body.dark-mode .kanban-column h3 {
    color: var(--dm-text-muted) !important;
}

/* === TIPOGRAFIA === */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode p,
body.dark-mode label,
body.dark-mode span,
body.dark-mode td,
body.dark-mode th,
body.dark-mode li,
body.dark-mode strong {
    color: var(--dm-text) !important;
}

body.dark-mode .sem-resultados,
body.dark-mode .sem-historico,
body.dark-mode .data-finalizacao,
body.dark-mode .historico-titulo,
body.dark-mode .kpi-label,
body.dark-mode .chart-title,
body.dark-mode .hcard-desc,
body.dark-mode .hcard-bottom,
body.dark-mode .fc-desc,
body.dark-mode .conc-footer,
body.dark-mode .vazio-msg,
body.dark-mode .card-desc-mini,
body.dark-mode .card-aparelho,
body.dark-mode .info-label,
body.dark-mode .detalhe-label,
body.dark-mode .fc-data {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .card-content strong,
body.dark-mode .conc-nome,
body.dark-mode .fc-nome {
    color: var(--dm-text) !important;
}

body.dark-mode .card-valor,
body.dark-mode .fc-valor,
body.dark-mode .conc-garantia {
    color: var(--dm-green) !important;
}

/* === INPUTS === */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 1;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--dm-accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    background-color: var(--dm-surface2) !important;
}

body.dark-mode option {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-text) !important;
}

/* Modal content inputs (servicos) */
body.dark-mode .modal-content input,
body.dark-mode .modal-content textarea {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .modal-content input:focus,
body.dark-mode .modal-content textarea:focus {
    background-color: var(--dm-surface3) !important;
    border-color: var(--dm-accent) !important;
}
body.dark-mode .modal-content h2 {
    border-bottom-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* === BOTÕES GRID (tela principal) === */
body.dark-mode .button-grid button {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}
body.dark-mode .button-grid button:hover {
    background-color: var(--dm-surface3) !important;
    border-color: var(--dm-accent) !important;
}
body.dark-mode #concluidos-btn {
    background-color: #1a4731 !important;
    color: #3fb950 !important;
    border: 1px solid #238636 !important;
}
body.dark-mode #concluidos-btn:hover {
    background-color: #238636 !important;
    color: #fff !important;
}

/* === CARD ACTIONS (kanban) === */
body.dark-mode .card-actions button {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}
body.dark-mode .card-actions .edit-btn { color: var(--dm-accent) !important; }
body.dark-mode .card-actions .edit-btn:hover { background: rgba(88,166,255,0.1) !important; }
body.dark-mode .card-actions .remove-btn { color: var(--dm-red) !important; }
body.dark-mode .card-actions .remove-btn:hover { background: rgba(248,81,73,0.1) !important; }
body.dark-mode .card-actions .finalize-btn { background: #1a4731 !important; color: #3fb950 !important; border-color: #238636 !important; }
body.dark-mode .card-actions .finalize-btn:hover { background: #238636 !important; color: #fff !important; }

/* Tags no kanban */
body.dark-mode .os-tag { background: rgba(88,166,255,0.12) !important; color: var(--dm-accent) !important; }
body.dark-mode .orcamento-tag { background: rgba(249,115,22,0.12) !important; color: #fb923c !important; }

/* === BOTÕES AÇÃO (histórico, editar etc) === */
body.dark-mode .hcard-actions button,
body.dark-mode .conc-actions button,
body.dark-mode .acoes-cliente button {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-accent) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .hcard-actions button:hover,
body.dark-mode .conc-actions button:hover {
    background-color: var(--dm-accent) !important;
    color: #0d1117 !important;
    border-color: var(--dm-accent) !important;
}

/* === BOTÕES MODAL === */
body.dark-mode .modal-actions button[type="submit"],
body.dark-mode .modal-actions .btn-concluir {
    background-color: var(--dm-accent) !important;
    color: #0d1117 !important;
    border: none !important;
}
body.dark-mode .modal-actions button[type="submit"]:hover,
body.dark-mode .modal-actions .btn-concluir:hover {
    background-color: var(--dm-accent-hover) !important;
}
body.dark-mode .modal-actions button[type="button"],
body.dark-mode .modal-actions #cancel-edit-btn,
body.dark-mode .modal-actions #cancel-finalize-btn {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}
body.dark-mode .modal-actions button[type="button"]:hover {
    background-color: var(--dm-surface3) !important;
}

/* === MODAL OVERLAY === */
body.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(6px) !important;
}

/* === SUGESTÕES (OS autocomplete) === */
body.dark-mode .sugestoes-box,
body.dark-mode .sugestao-item {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .sugestao-item:hover {
    background-color: var(--dm-surface2) !important;
}

/* === OS CONTAINER === */
body.dark-mode .os-container {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}
body.dark-mode .os-container header {
    border-bottom-color: var(--dm-border) !important;
}

/* Datas, info OS */
body.dark-mode .form-row.dates p {
    color: var(--dm-text) !important;
}

/* Garantia texto */
body.dark-mode #texto-garantia {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* === STATUS BADGES === */
body.dark-mode .hcard-status.status-ok   { background: #1a4731 !important; color: #3fb950 !important; border: 1px solid #238636 !important; }
body.dark-mode .hcard-status.status-cancel { background: #3d1f1f !important; color: #f85149 !important; border: 1px solid #6e2e2e !important; }
body.dark-mode .hcard-status.status-pending { background: #3d2e00 !important; color: #e3b341 !important; border: 1px solid #6e4e00 !important; }

/* === LINKS === */
body.dark-mode a { color: var(--dm-accent) !important; }
body.dark-mode a:hover { color: var(--dm-accent-hover) !important; }
body.dark-mode .back-button img { filter: brightness(0.8) invert(1) !important; }

/* === TABELAS === */
body.dark-mode table { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
body.dark-mode th { background-color: var(--dm-surface2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
body.dark-mode td { border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
body.dark-mode tr:nth-child(even) { background-color: var(--dm-surface2) !important; }
body.dark-mode tr:hover { background-color: var(--dm-surface3) !important; }

/* === PADRÃO SENHA (bolinhas) === */
body.dark-mode .pattern-dot {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .pattern-dot.selected { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; }
body.dark-mode .pattern-dot.start-node { background-color: var(--dm-green) !important; border-color: var(--dm-green) !important; }

/* === FLATPICKR (calendario analise) === */
body.dark-mode .flatpickr-calendar {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 4px 16px var(--dm-shadow) !important;
}
body.dark-mode .flatpickr-day { color: var(--dm-text) !important; }
body.dark-mode .flatpickr-day:hover { background-color: var(--dm-surface2) !important; }
body.dark-mode .flatpickr-day.selected { background-color: var(--dm-accent) !important; color: #0d1117 !important; }
body.dark-mode .flatpickr-day.inRange { background-color: rgba(88,166,255,0.2) !important; }
body.dark-mode .flatpickr-months,
body.dark-mode .flatpickr-weekdays,
body.dark-mode .flatpickr-weekday { background-color: var(--dm-surface) !important; color: var(--dm-text-muted) !important; }
body.dark-mode .flatpickr-prev-month svg,
body.dark-mode .flatpickr-next-month svg { fill: var(--dm-text) !important; }

/* === FINALIZADOS CARDS (tela OS) === */
body.dark-mode .fc-servico-feito {
    background: rgba(63,185,80,0.08) !important;
    border-left-color: var(--dm-green) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .fc-garantia {
    background: rgba(63,185,80,0.12) !important;
    color: var(--dm-green) !important;
}

/* Concluidos filtros */
body.dark-mode .concluidos-filtros input,
body.dark-mode .concluidos-filtros select {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode #concluidos-count {
    color: var(--dm-text-muted) !important;
}

/* Finalize OS info */
body.dark-mode .finalize-os-info {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .info-val {
    color: var(--dm-text) !important;
}
body.dark-mode .garantia-opcoes label {
    color: var(--dm-text) !important;
}

/* Login - form container */
body.dark-mode .form-container {
    background-color: var(--dm-surface) !important;
    box-shadow: 0 4px 24px var(--dm-shadow) !important;
}
body.dark-mode .form-container h2,
body.dark-mode .form-container p {
    color: var(--dm-text) !important;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
body.dark-mode ::-webkit-scrollbar-track { background: var(--dm-surface2); }
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-surface3); border-radius: 4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--dm-border); }

/* Drag-over no kanban */
body.dark-mode .cards-container.drag-over {
    background-color: rgba(88, 130, 255, 0.08) !important;
    border-color: var(--dm-accent) !important;
}

/* Detalhe serviço */
body.dark-mode .detalhe-status { color: var(--dm-accent) !important; }
body.dark-mode .hcard-realizado { color: var(--dm-green) !important; }
body.dark-mode .conc-realizado { color: var(--dm-green) !important; }

/* ==========================================
   BOTÃO DARK MODE — FIXO AO LADO DO SAIR
   ========================================== */
#dark-mode-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    background-color: #ffffff;
    color: #111827;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
#dark-mode-toggle:hover { transform: scale(1.1); }

body.dark-mode #dark-mode-toggle {
    background-color: var(--dm-surface2);
    color: var(--dm-text);
    border-color: var(--dm-border);
    box-shadow: 0 2px 10px var(--dm-shadow);
}

/* Versão inline no header (ao lado do sair) */
#dark-mode-toggle.dark-mode-inline {
    position: fixed !important;
    bottom: auto !important;
    right: 20px !important;
    top: 11px !important;
    width: 40px;
    height: 40px;
    font-size: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    border: 2px solid #d1d5db;
    background-color: #f3f4f6;
    color: #111827;
    transform: none !important;
    border-radius: 50%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
#dark-mode-toggle.dark-mode-inline:hover {
    transform: scale(1.08) !important;
    background-color: #e5e7eb;
}

body.dark-mode #dark-mode-toggle.dark-mode-inline {
    background-color: var(--dm-surface2);
    color: var(--dm-text);
    border-color: var(--dm-border);
}
body.dark-mode #dark-mode-toggle.dark-mode-inline:hover {
    background-color: var(--dm-surface3) !important;
}

/* Quando há botão sair ao lado, ajusta a posição para não sobrepor */
/* Telas com #back-button no header: back = right:70px, dark = right:20px */
/* === TELA PRINCIPAL — NOVO LAYOUT === */
body.dark-mode .search-wrapper input[type="search"] {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .search-wrapper input[type="search"]:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px rgba(88,166,255,0.15) !important;
}
body.dark-mode .grid-btn { box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; }
body.dark-mode .sistema-subtitulo { color: var(--dm-text-muted) !important; }
body.dark-mode header {
    background-color: var(--dm-surface) !important;
    border-bottom-color: var(--dm-border) !important;
}

/* === MODAL CLIENTES === */
body.dark-mode .cliente-row {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .cliente-row:hover { box-shadow: 0 2px 10px var(--dm-shadow) !important; }
body.dark-mode .cliente-row-nome { color: var(--dm-text) !important; }
body.dark-mode .cliente-row-contato { color: var(--dm-text-muted) !important; }
body.dark-mode .cliente-row-acoes button {
    background-color: var(--dm-surface3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .cliente-row-acoes .btn-nova-os:hover { background: rgba(253,126,20,0.15) !important; border-color: #fd7e14 !important; color: #fd7e14 !important; }
body.dark-mode .cliente-row-acoes .btn-editar:hover  { background: rgba(88,166,255,0.15) !important; border-color: var(--dm-accent) !important; color: var(--dm-accent) !important; }
body.dark-mode .cliente-row-acoes .btn-excluir:hover { background: rgba(248,81,73,0.15) !important; border-color: var(--dm-red) !important; color: var(--dm-red) !important; }
body.dark-mode .cliente-historico-inline { border-top-color: var(--dm-border) !important; }
body.dark-mode .clientes-count { color: var(--dm-text-muted) !important; }
body.dark-mode .clientes-filtros input {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .clientes-filtros input:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px rgba(88,166,255,0.15) !important;
}
body.dark-mode .modal-clientes-header h2 { color: var(--dm-text) !important; }

/* === MODAL BASE ATUALIZADO === */
body.dark-mode .modal-content {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
}
body.dark-mode .modal-actions button[type="button"] {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}
body.dark-mode .modal-actions button[type="button"]:hover {
    background-color: var(--dm-surface3) !important;
}

/* === ANÁLISE DE FLUXO — BOTÕES DE FILTRO === */
body.dark-mode .quick-filter-btn {
    background-color: var(--dm-surface2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .quick-filter-btn:hover {
    background-color: var(--dm-surface3) !important;
    border-color: var(--dm-accent) !important;
}
body.dark-mode .quick-filter-btn.active {
    background-color: var(--dm-accent) !important;
    color: #0d1117 !important;
    border-color: var(--dm-accent) !important;
}
body.dark-mode #limpar-filtro-btn {
    background-color: var(--dm-surface3) !important;
    color: var(--dm-text-muted) !important;
    border: 1px solid var(--dm-border) !important;
}
body.dark-mode #limpar-filtro-btn:hover {
    background-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* === ABAS GERENCIAR USUÁRIOS === */
body.dark-mode .aba-btn {
    background: none !important;
    color: #888 !important;
    border-bottom-color: transparent !important;
}
body.dark-mode .aba-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #58a6ff !important;
}
body.dark-mode .aba-ativa {
    background: none !important;
    color: #58a6ff !important;
    border-bottom-color: #58a6ff !important;
}
/* ==========================================
   CORREÇÕES DE COMPATIBILIDADE GLOBAL
   ========================================== */

/* Analise body bg override */
body.dark-mode.analise-page,
body.dark-mode {
    background-color: var(--dm-bg) !important;
}

/* Orcamento / CadastrarCliente / OS — form-wrapper e form-container já cobertos acima */
/* Garante que .form-wrapper tenha bg correto no dark */
body.dark-mode .form-wrapper {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Cadastrar cliente — inputs com borda preta */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"] {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* Analise — chart wrapper e kpi card */
body.dark-mode .chart-wrapper,
body.dark-mode .kpi-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .kpi-valor { color: var(--dm-text) !important; }
body.dark-mode .kpi-label { color: var(--dm-text-muted) !important; }
body.dark-mode .kpi-success .kpi-valor { color: var(--dm-green) !important; }
body.dark-mode .kpi-warning .kpi-valor { color: var(--dm-yellow) !important; }
body.dark-mode .kpi-money .kpi-valor,
body.dark-mode .kpi-info .kpi-valor { color: var(--dm-accent) !important; }

/* Analise — filter container */
body.dark-mode .filter-container {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}

/* Servicos — toolbar */
body.dark-mode .toolbar {
    background-color: var(--dm-surface2) !important;
}

/* Kanban card text fixes */
body.dark-mode .card-desc-mini,
body.dark-mode .card-aparelho { color: var(--dm-text-muted) !important; }
body.dark-mode .card-content strong,
body.dark-mode .service-card .card-nome { color: var(--dm-text) !important; }
body.dark-mode .os-tag { background: rgba(88,166,255,0.12) !important; color: var(--dm-accent) !important; }
body.dark-mode .orcamento-tag { background: rgba(249,115,22,0.12) !important; color: #fb923c !important; }

/* Servicos page — reposiciona botão para não sobrepor o logo no header */
body:has(.page-container) #dark-mode-toggle.dark-mode-inline {
    top: 11px !important;
    right: 80px !important;
}

/* OS page — alinha dark mode toggle com o back-button (top: 20px) */
body:has(.os-container) #dark-mode-toggle.dark-mode-inline {
    top: 20px !important;
}

body.dark-mode:has(.os-container) #dark-mode-toggle.dark-mode-inline {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Botões submit em páginas (cadastrar, orcamento) */
body.dark-mode button[type="submit"]:not(.modal-actions button) {
    filter: brightness(0.9);
}

/* Convite form — labels e inputs */
body.dark-mode .convite-form label { color: var(--dm-text) !important; }
body.dark-mode .convite-form input,
body.dark-mode .convite-form select {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Usuario card nome/email no light mode (overrides dark semi-transparent) */
body:not(.dark-mode) .usuario-nome { color: #222 !important; }
body:not(.dark-mode) .usuario-email { color: #666 !important; }
body:not(.dark-mode) .usuario-card {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
}
body:not(.dark-mode) .aba-btn { color: #666 !important; }
body:not(.dark-mode) .aba-ativa { color: #0d6efd !important; border-bottom-color: #0d6efd !important; }
body:not(.dark-mode) .convite-form label { color: #444 !important; }
body:not(.dark-mode) .convite-form input,
body:not(.dark-mode) .convite-form select {
    background: #fff !important;
    border-color: #dde1e7 !important;
    color: #222 !important;
}
body:not(.dark-mode) .convite-info { color: #1d4ed8; }
body:not(.dark-mode) .btn-sec {
    background: #f3f4f6 !important;
    color: #444 !important;
    border-color: #dde1e7 !important;
}

/* ==========================================
   DARK MODE — NOVO LAYOUT BOTÕES GRID
   ========================================== */
body.dark-mode .grid-btn {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
body.dark-mode .grid-btn:hover {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-surface3) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
body.dark-mode .btn-label { color: var(--dm-text) !important; }
body.dark-mode .btn-desc  { color: var(--dm-text-muted) !important; }

/* icon-wrap no dark: mantém a cor do ícone mas escurece fundo */
body.dark-mode .btn-clientes   .btn-icon-wrap { background: rgba(37,99,235,0.15) !important; color: #60a5fa !important; }
body.dark-mode .btn-cadastrar  .btn-icon-wrap { background: rgba(124,58,237,0.15) !important; color: #a78bfa !important; }
body.dark-mode .btn-os         .btn-icon-wrap { background: rgba(217,119,6,0.15) !important;  color: #fbbf24 !important; }
body.dark-mode .btn-concluidos .btn-icon-wrap { background: rgba(22,163,74,0.15) !important;  color: #4ade80 !important; }
body.dark-mode .btn-servicos   .btn-icon-wrap { background: rgba(8,145,178,0.15) !important;  color: #38bdf8 !important; }
body.dark-mode .btn-analise    .btn-icon-wrap { background: rgba(192,38,211,0.15) !important; color: #e879f9 !important; }
body.dark-mode .btn-usuarios   .btn-icon-wrap { background: rgba(75,85,99,0.20) !important;   color: #9ca3af !important; }

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */
#toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
    pointer-events: none;
    align-items: center;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    min-width: 280px;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    pointer-events: all;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    background: #ffffff;
    color: #111827;
    border-left: 4px solid #6b7280;
}
.toast.toast-show  { opacity: 1; transform: translateY(0); }
.toast.toast-hide  { opacity: 0; transform: translateY(16px); }

.toast-success { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.toast-error   { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.toast-warning { border-left-color: #d97706; background: #fffbeb; color: #78350f; }
.toast-info    { border-left-color: #2563eb; background: #eff6ff; color: #1e3a8a; }

.toast-icon { font-size: 1rem; flex-shrink: 0; }
.toast-msg  { flex: 1; line-height: 1.4; }

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.5;
    padding: 0 2px;
    color: inherit;
    flex-shrink: 0;
    line-height: 1;
}
.toast-close:hover { opacity: 1; }

/* Dark mode toasts */
body.dark-mode .toast         { background: var(--dm-surface2); color: var(--dm-text); border-left-color: var(--dm-border); box-shadow: 0 4px 20px var(--dm-shadow); }
body.dark-mode .toast-success { background: #0d2818; color: #4ade80; border-left-color: #16a34a; }
body.dark-mode .toast-error   { background: #2d0f0f; color: #f87171; border-left-color: #dc2626; }
body.dark-mode .toast-warning { background: #2d1f00; color: #fbbf24; border-left-color: #d97706; }
body.dark-mode .toast-info    { background: #0d1f3c; color: #93c5fd; border-left-color: #2563eb; }

/* ==========================================
   LOGIN PAGE
   ========================================== */
body.dark-mode #login-container.form-container {
    background-color: var(--dm-surface) !important;
    box-shadow: 0 4px 24px var(--dm-shadow) !important;
}
body.dark-mode #login-container form h2 { color: var(--dm-text) !important; }
body.dark-mode #login-container form p  { color: var(--dm-text-muted) !important; }
body.dark-mode #login-container label  { color: var(--dm-text-muted) !important; }
body.dark-mode #login-container input:focus,
body.dark-mode #login-container select:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px rgba(88,166,255,0.15) !important;
}
body.dark-mode .toggle-link a { color: var(--dm-accent) !important; }

/* ==========================================
   CADASTRAR CLIENTE
   ========================================== */
body.dark-mode .form-wrapper {
    border-color: var(--dm-border) !important;
}
body.dark-mode .form-wrapper h1 { color: var(--dm-text) !important; }
body.dark-mode .form-wrapper input[type="text"],
body.dark-mode .form-wrapper input[type="email"],
body.dark-mode .form-wrapper input[type="tel"] {
    border-color: var(--dm-border) !important;
}

/* ==========================================
   ORÇAMENTO
   ========================================== */
body.dark-mode .form-container {
    border-color: var(--dm-border) !important;
}
body.dark-mode .form-container header {
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .sugestao-item:hover {
    background-color: var(--dm-surface2) !important;
}
body.dark-mode .footer-bar {
    background-color: var(--dm-surface2) !important;
}

/* ==========================================
   ANÁLISE DE FLUXO
   ========================================== */
body.dark-mode .analise-container h1,
body.dark-mode h1 { color: var(--dm-text) !important; }
body.dark-mode #calendario-inline {
    border-color: var(--dm-border) !important;
    background-color: var(--dm-surface) !important;
}

/* ==========================================
   TELA PRINCIPAL — MODAL GERENCIAR USUÁRIOS
   ========================================== */
body.dark-mode .gerenciar-header {
    border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .confirm-box {
    background-color: var(--dm-surface) !important;
    box-shadow: 0 8px 32px var(--dm-shadow) !important;
}
body.dark-mode .confirm-box p { color: var(--dm-text) !important; }
body.dark-mode .confirm-actions .btn-sec {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .confirm-actions .btn-sec:hover {
    background: var(--dm-surface3) !important;
}
body.dark-mode .paginacao button {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .paginacao button:hover:not(:disabled) {
    background: var(--dm-surface3) !important;
    border-color: var(--dm-accent) !important;
}
body.dark-mode .paginacao button.pag-ativa {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #0d1117 !important;
}
body.dark-mode .paginacao-info { color: var(--dm-text-muted) !important; }
body.dark-mode .lista-vazia    { color: var(--dm-text-muted) !important; }
body.dark-mode .usuario-card {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .usuario-card:hover {
    background: var(--dm-surface3) !important;
    box-shadow: 0 2px 10px var(--dm-shadow) !important;
}
/* ==========================================
   LIGHT MODE — RESET EXPLÍCITO
   Garante fundo branco quando dark mode está desligado
   ========================================== */
body:not(.dark-mode) {
    background-color: #ffffff !important;
    color: #333333 !important;
}

body:not(.dark-mode) header {
    background-color: #ffffff !important;
    border-bottom-color: rgba(0,0,0,0.07) !important;
    box-shadow: none !important;
}

body:not(.dark-mode) .container,
body:not(.dark-mode) .form-wrapper,
body:not(.dark-mode) .form-container,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .card,
body:not(.dark-mode) .page-container,
body:not(.dark-mode) .analise-container,
body:not(.dark-mode) .os-container {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #e2e5ea !important;
}

body:not(.dark-mode) .grid-btn {
    background-color: #ffffff !important;
    color: #1a1d23 !important;
    border-color: #e2e5ea !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

body:not(.dark-mode) .grid-btn:hover {
    background-color: #f9fafb !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
}

body:not(.dark-mode) .btn-label { color: #1a1d23 !important; }
body:not(.dark-mode) .btn-desc  { color: #6b7280 !important; }

body:not(.dark-mode) .toolbar {
    background-color: #f8f9fa !important;
    border-bottom-color: #e2e5ea !important;
}

body:not(.dark-mode) .kanban-board {
    background-color: #f0f2f5 !important;
}

body:not(.dark-mode) .cards-container {
    background-color: #e4e7eb !important;
    border-color: #d1d5db !important;
}

body:not(.dark-mode) .service-card {
    background-color: #ffffff !important;
    border-color: #e2e5ea !important;
    color: #333333 !important;
}

body:not(.dark-mode) .kanban-column h3 { color: #6b7280 !important; }

body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #dde1e7 !important;
}

body:not(.dark-mode) .modal-overlay {
    background-color: rgba(0,0,0,0.5) !important;
}

body:not(.dark-mode) .sistema-subtitulo { color: #888888 !important; }

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) p,
body:not(.dark-mode) label,
body:not(.dark-mode) span,
body:not(.dark-mode) td,
body:not(.dark-mode) th {
    color: inherit !important;
}

body:not(.dark-mode) .filter-container {
    background-color: #f8f9fa !important;
    border-color: #e2e5ea !important;
}

body:not(.dark-mode) .kpi-card,
body:not(.dark-mode) .chart-wrapper {
    background-color: #ffffff !important;
    border-color: #e2e5ea !important;
    color: #333333 !important;
}

body:not(.dark-mode) .service-card .card-desc-mini,
body:not(.dark-mode) .service-card .card-aparelho { color: #6b7280 !important; }

body:not(.dark-mode) .cliente-row {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
}

/* ==========================================
   DARK MODE — GERENCIAR USUÁRIOS (fixes após
   migração das classes para light-first)
   ========================================== */
body.dark-mode .btn-fechar-x:hover { background: rgba(255,255,255,0.1) !important; color: #eee !important; }
body.dark-mode .aba-btn { color: #888 !important; }
body.dark-mode .aba-grupo { border-bottom-color: rgba(255,255,255,0.1) !important; }
body.dark-mode .usuario-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .usuario-card:hover { background: rgba(255,255,255,0.07) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; }
body.dark-mode .usuario-nome { color: #f0f0f0 !important; }
body.dark-mode .usuario-email { color: #999 !important; }
body.dark-mode .convite-info { color: #aac4f0 !important; }
body.dark-mode .convite-form label { color: #ccc !important; }
body.dark-mode .convite-form input,
body.dark-mode .convite-form select { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #eee !important; }
body.dark-mode .btn-sec { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.15) !important; color: #ccc !important; }
body.dark-mode .btn-sec:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
body.dark-mode .edit-panel-header { color: #6ea8fe !important; }
/* ===== DARK MODE — PEÇAS NA FINALIZAÇÃO ===== */
body.dark-mode .finalize-valores {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .valor-row span,
body.dark-mode .valor-row strong {
    color: var(--dm-text) !important;
}
body.dark-mode .valor-calculado {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .valor-total-display {
    color: var(--dm-green) !important;
}
body.dark-mode .valor-row-total {
    border-top-color: var(--dm-border) !important;
}
body.dark-mode .valor-row input[type="number"] {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .pecas-lista {
    background: transparent !important;
}
body.dark-mode .pecas-vazio {
    color: var(--dm-text-muted) !important;
}
body.dark-mode .peca-row input {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .peca-row input:focus {
    background-color: var(--dm-surface2) !important;
    border-color: var(--dm-accent) !important;
}
body.dark-mode .peca-remove-btn {
    background: rgba(248,81,73,0.15) !important;
    color: var(--dm-red) !important;
    border: 1px solid rgba(248,81,73,0.3) !important;
}
body.dark-mode .peca-remove-btn:hover {
    background: rgba(248,81,73,0.25) !important;
}
body.dark-mode .btn-add-peca {
    background: rgba(88,166,255,0.08) !important;
    color: var(--dm-accent) !important;
    border-color: rgba(88,166,255,0.3) !important;
}
body.dark-mode .btn-add-peca:hover {
    background: rgba(88,166,255,0.15) !important;
}
body.dark-mode .aviso-sinal {
    background: rgba(210,153,34,0.15) !important;
    color: var(--dm-yellow) !important;
}

/* ===== DARK MODE — CARD ACTIONS SEMPRE VISÍVEL ===== */
body.dark-mode .card-actions button {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}
body.dark-mode .obs-btn {
    background: rgba(88,166,255,0.1) !important;
    color: var(--dm-accent) !important;
    border-color: rgba(88,166,255,0.3) !important;
}
body.dark-mode .obs-btn:hover {
    background: rgba(88,166,255,0.2) !important;
}

/* ===== DARK MODE — RELATÓRIO PEÇAS ANALISE ===== */
body.dark-mode .pecas-section {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .pecas-sub {
    color: var(--dm-text) !important;
}
body.dark-mode .peca-rank-row {
    background: rgba(63,185,80,0.08) !important;
    border-color: rgba(63,185,80,0.2) !important;
}
body.dark-mode .peca-rank-nome { color: var(--dm-text) !important; }
body.dark-mode .peca-rank-qtd  { color: var(--dm-text-muted) !important; }
body.dark-mode .peca-rank-valor { color: var(--dm-green) !important; }
body.dark-mode .peca-rank-pos  { color: var(--dm-green) !important; }
body.dark-mode .peca-detalhe-row {
    background: var(--dm-surface2) !important;
    border-color: var(--dm-border) !important;
}
body.dark-mode .peca-d-osid    { color: var(--dm-accent) !important; }
body.dark-mode .peca-d-cliente { color: var(--dm-text) !important; }
body.dark-mode .peca-d-aparelho { color: var(--dm-text-muted) !important; }
body.dark-mode .peca-d-nome    { color: var(--dm-text) !important; }
body.dark-mode .peca-d-valor   { color: var(--dm-green) !important; }
body.dark-mode .pecas-total-badge {
    background: rgba(63,185,80,0.15) !important;
    color: var(--dm-green) !important;
}

/* ===== DARK MODE — HISTÓRICO PEÇAS E OBS ===== */
body.dark-mode .hcard-observacoes {
    background: rgba(56,189,248,0.08) !important;
    border-left-color: #38bdf8 !important;
    color: var(--dm-text) !important;
}
body.dark-mode .hcard-pecas {
    background: rgba(74,222,128,0.08) !important;
    border-left-color: #4ade80 !important;
    color: var(--dm-text) !important;
}
body.dark-mode .hcard-pecas-lista { color: var(--dm-text) !important; }
body.dark-mode .hcard-pecas-total { color: var(--dm-green) !important; }

/* ===== DARK MODE — DETALHES PEÇAS ===== */
body.dark-mode .detalhe-peca-item {
    background: rgba(63,185,80,0.08) !important;
    color: var(--dm-text) !important;
}
body.dark-mode .detalhe-peca-nome { color: var(--dm-text) !important; }
body.dark-mode .detalhe-peca-valor { color: var(--dm-green) !important; }
body.dark-mode .detalhe-peca-total {
    color: var(--dm-green) !important;
    border-top-color: rgba(63,185,80,0.2) !important;
}
body.dark-mode .detalhe-obs {
    background: rgba(56,189,248,0.08) !important;
    border-left-color: #38bdf8 !important;
    color: var(--dm-text) !important;
}
body.dark-mode .detalhe-valor-destaque { color: var(--dm-green) !important; }
body.dark-mode .detalhe-row-pecas .detalhe-val { color: var(--dm-text) !important; }