/* ============================================================
   PontoTrack — Tema WorldXambioa (Kit Visual v2.0)
   ------------------------------------------------------------
   Camada SOMENTE visual, carregada por último no index.html.
   Não altera lógica, dados nem estrutura: só sobrepõe cores,
   superfícies, bordas e sombras do tema escuro original.
   Para desativar o tema, basta remover o <link> deste arquivo.

   Identidade: Primary #29166F · Turquoise #3BB3C3 · Deep Navy #171343
   Superfícies brancas/cinza dominam; roxo = identidade e ações
   principais; turquesa = destaque. Verde = positivo, vermelho = negativo.
   ============================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  --wx-primary: #29166F;
  --wx-primary-600: #3A2590;
  --wx-primary-text: #4A35A8;   /* roxo legível para textos/links em fundo claro */
  --wx-turquoise: #3BB3C3;
  --wx-turquoise-text: #1E8E9E; /* turquesa legível para ícones/textos */
  --wx-navy: #171343;
  --wx-soft-purple: #F4F2FB;
  --wx-soft-purple-border: #E2DDF4;
  --wx-soft-turquoise: #EAF8FA;

  /* Mapeamento para os tokens já usados pelo app */
  --primary: #29166F;
  --primary-light: #4A35A8;
  --primary-dark: #171343;
  --primary-glow: rgba(41, 22, 111, 0.16);

  --accent: #3BB3C3;
  --accent-light: #1E8E9E;

  --success: #16A34A;
  --success-light: #15803D;
  --success-bg: #DCFCE7;
  --danger: #DC2626;
  --danger-light: #B91C1C;
  --danger-bg: #FEE2E2;
  --warning: #D97706;
  --warning-light: #B45309;
  --warning-bg: #FEF3C7;
  --info: #2563EB;
  --info-bg: #DBEAFE;

  --bg-primary: #F8F9FA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F3F4F6;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9FAFB;
  --bg-elevated: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-app: #F8F9FA;
  --surface: #FFFFFF;

  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #7B8494;
  --text-inverse: #FFFFFF;

  --border: #E5E7EB;
  --border-light: #D1D5DB;
  --border-focus: #29166F;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 10px 24px -6px rgba(17, 24, 39, 0.12);
  --shadow-xl: 0 20px 40px -12px rgba(17, 24, 39, 0.18);
  --shadow-glow: 0 0 0 4px rgba(41, 22, 111, 0.10);
}

/* ── 2. BASE ───────────────────────────────────────────────── */
html, body { background: var(--bg-primary); color: var(--text-primary); }
.admin-panel { background: var(--bg-primary) !important; }
a { color: var(--wx-primary-text); }
::selection { background: rgba(59, 179, 195, 0.25); }

/* ── 3. LOGIN ──────────────────────────────────────────────── */
.login-screen { background: linear-gradient(160deg, #F4F2FB 0%, #F8F9FA 45%, #EAF8FA 100%) !important; }
.login-screen::before, .login-screen::after, .login-orb-1, .login-orb-2 { display: none !important; }
.login-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
  backdrop-filter: none !important;
}
.login-tabs, .login-tab-group { background: var(--bg-tertiary) !important; border-color: var(--border) !important; }
.login-tab { color: var(--text-secondary) !important; }
.login-tab.active { background: var(--wx-primary) !important; color: #FFFFFF !important; box-shadow: none !important; }
.login-card button[type="submit"] { margin-top: 18px !important; }
/* Assinatura da marca no rodapé do card de login */
.login-card::after {
  content: "by World Informática";
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-tertiary);
  background: url("../img/world-informatica.png") no-repeat left calc(50% - 72px) center / 22px 22px;
  background-origin: content-box;
}
.loading-screen { background: var(--bg-primary) !important; }
.loading-brand h1 { background: none !important; -webkit-text-fill-color: var(--wx-primary) !important; color: var(--wx-primary) !important; }
.loading-brand p, .loading-text { color: var(--text-secondary) !important; }

/* ── 4. FORMULÁRIOS ────────────────────────────────────────── */
.form-group label { color: var(--text-primary) !important; font-weight: 500; }
.input-wrapper input, .input-wrapper select, .input-wrapper textarea,
.no-icon-input, input.no-icon-input, select.no-icon-input, textarea.no-icon-input,
.form-input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="month"], select, textarea {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.input-wrapper input:focus, .input-wrapper select:focus, .input-wrapper textarea:focus,
.no-icon-input:focus, .form-input:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--wx-primary) !important;
  box-shadow: 0 0 0 3px rgba(41, 22, 111, 0.12) !important;
}
.input-wrapper i { color: var(--text-tertiary) !important; }
/* Campos de data/hora com ícone: o ícone ficava por cima do texto (recuo de 16px em vez de 44px) */
.input-wrapper > i ~ input[type="date"], .input-wrapper > i ~ input[type="time"],
.input-wrapper > i ~ input[type="month"] { padding-left: 44px !important; }
input::placeholder, textarea::placeholder { color: #9CA3AF !important; }
select option, .form-group select option { background: #FFFFFF !important; color: var(--text-primary) !important; }
input[type="checkbox"] { background: #FFFFFF !important; border-color: var(--border-light) !important; accent-color: var(--wx-primary); }
input[type="checkbox"]:checked { background: var(--wx-primary) !important; border-color: var(--wx-primary) !important; }
.checkbox-label span { color: var(--text-primary); }
/* Ícones de calendário/relógio nativos visíveis no fundo claro */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { filter: none !important; opacity: 0.6; }

/* ── 5. BOTÕES (sólidos, sem degradês exagerados) ──────────── */
.btn-primary, .tab.active, .nav-center-circle, .btn-lunch {
  background: var(--wx-primary) !important; color: #FFFFFF !important; box-shadow: none !important;
}
.btn-primary:hover { background: var(--wx-primary-600) !important; }
.btn-secondary { background: #FFFFFF !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
.btn-secondary:hover { background: var(--bg-tertiary) !important; }
.btn-success, .btn-checkin, .btn-approve { background: var(--success) !important; color: #FFFFFF !important; }
.btn-danger, .btn-checkout { background: var(--danger) !important; color: #FFFFFF !important; }
.btn-warning, .btn-break, .btn-extra { background: var(--warning) !important; color: #FFFFFF !important; }
.btn-action::after { display: none !important; }
.btn-export.btn-excel { background: var(--success) !important; color: #FFFFFF !important; }
.btn-export.btn-pdf { background: var(--wx-primary) !important; color: #FFFFFF !important; } /* vermelho fica só p/ negativo */
.btn-icon, .modal-close, .close-btn {
  background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--text-secondary) !important;
}
.btn-icon:hover, .modal-close:hover, .close-btn:hover { background: #E5E7EB !important; color: var(--text-primary) !important; }

/* ── 6. NAVEGAÇÃO ──────────────────────────────────────────── */
.header, .app-header, .admin-header {
  background: #FFFFFF !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important;
}
.tabs {
  background: #FFFFFF !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}
.tab { color: var(--text-secondary) !important; }
.tab:hover { background: var(--wx-soft-purple) !important; color: var(--wx-primary) !important; }
.tab.active, .tab.active i { color: #FFFFFF !important; }
/* Desktop: barra lateral azul-marinho com item ativo turquesa (recomendação do kit) */
@media (min-width: 1024px) {
  .admin-panel .tabs { background: var(--wx-navy) !important; border-color: var(--wx-navy) !important; box-shadow: var(--shadow-md) !important; }
  .admin-panel .tab, .admin-panel .tab i { color: rgba(255, 255, 255, 0.74) !important; }
  .admin-panel .tab:hover { background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; }
  .admin-panel .tab:hover i { color: #FFFFFF !important; }
  .admin-panel .tab.active { background: var(--wx-turquoise) !important; font-weight: 700 !important; }
  .admin-panel .tab.active, .admin-panel .tab.active i { color: #FFFFFF !important; }
}
/* Ícone do cabeçalho do painel (era laranja/vermelho) → roxo da marca */
.user-avatar { background: var(--wx-primary) !important; }
.bottom-nav {
  background: #FFFFFF !important; border-top: 1px solid var(--border) !important;
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.06) !important; backdrop-filter: none !important;
}
.nav-item { color: var(--text-tertiary) !important; }
.nav-item.active, .nav-item.active i { color: var(--wx-primary) !important; }
.nav-item.nav-center i { color: #FFFFFF !important; }

/* ── 7. CARTÕES E MODAIS ───────────────────────────────────── */
.stat-card, .dashboard-card, .section-card, .settings-group, .employee-card, .record-item, .request-card,
.obra-card, .quick-action-card, .status-day-card, .emp-status-card, .reports-controls, .team-realtime-panel {
  background: #FFFFFF !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm);
}
.kpi-icon, .stat-icon { background: var(--wx-soft-purple) !important; }
.modal { background: rgba(23, 19, 67, 0.45) !important; }
.modal-content { background: #FFFFFF !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-xl) !important; }
.modal-header, .modal-footer { border-color: var(--border) !important; }
.modal-header h2, .modal-header h3 { color: var(--text-primary) !important; }
.report-summary { background: var(--wx-primary) !important; color: #FFFFFF !important; }
.empty-state { color: var(--text-secondary); }
#batchEmployeeList label:hover { background: var(--bg-tertiary) !important; }
.toast { background: #FFFFFF !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; }
.offline-banner { background: var(--danger) !important; }

/* ── 8. APP DO FUNCIONÁRIO ─────────────────────────────────── */
.emp-punch-big { background: var(--wx-primary) !important; box-shadow: 0 12px 28px -10px rgba(41, 22, 111, 0.45) !important; }
.emp-punch-ring { border-color: rgba(59, 179, 195, 0.45) !important; } /* anéis do relógio em turquesa (destaque) */
.emp-summary-row, .emp-last-item { background: var(--bg-tertiary) !important; }
.emp-bar { background: #CFC8EC !important; } /* dias anteriores: roxo suave */
.emp-bar-today, .bar-fill.today { background: var(--wx-turquoise) !important; }
.bar-fill { background: var(--wx-primary) !important; }

/* ── 9. DASHBOARD ──────────────────────────────────────────── */
/* Indicadores: paleta da marca (turquesa/roxo) + semântica (verde positivo, vermelho negativo) */
.dashboard-card::after { display: none !important; }
.dashboard-card[style*="--kpi-color:#3b82f6"] { --kpi-color: #3BB3C3 !important; --kpi-color2: #3BB3C3 !important; }
.dashboard-card[style*="--kpi-color:#10b981"] { --kpi-color: #29166F !important; --kpi-color2: #29166F !important; }
.dashboard-card[style*="--kpi-color:#f59e0b"] { --kpi-color: #16A34A !important; --kpi-color2: #16A34A !important; }
.dashboard-card[style*="--kpi-color:#ef4444"] { --kpi-color: #DC2626 !important; --kpi-color2: #DC2626 !important; }
.dash-greeting { background: linear-gradient(135deg, var(--wx-soft-purple), var(--wx-soft-turquoise)) !important; border-color: var(--wx-soft-purple-border) !important; }
.dash-greeting::before { display: none !important; }
/* Saudação: o flex com gap criava "Bom dia , Marcelo"; sem emoji (visual profissional) */
.dash-hello { display: block !important; }
.dash-emoji { display: none !important; }
.dash-date { color: var(--text-secondary) !important; }
.dash-clock-icon { color: var(--wx-turquoise-text) !important; }
.dash-hello, .dash-time-now, .trp-title h3, .trp-pill-num, .trp-name { color: var(--text-primary) !important; }
.dash-clock { background: #FFFFFF !important; border: 1px solid var(--border) !important; }
.team-realtime-panel { border-color: var(--border) !important; }
.trp-pill, .trp-item { background: var(--bg-tertiary) !important; border-color: var(--border) !important; }
.trp-pill:hover, .trp-item:hover { background: #E5E7EB !important; }
.trp-avatar-status { border-color: #FFFFFF !important; }

/* ── 10. ESTILOS INLINE DO TEMA ESCURO (HTML e JS) ─────────── */
/* Azul-claro e roxo-claro (feitos p/ fundo escuro) → roxo da marca / turquesa nos ícones */
[style*="color:#60a5fa"], [style*="color: #60a5fa"],
[style*="color:#a78bfa"], [style*="color: #a78bfa"],
[style*="color:#818cf8"], [style*="color:#93c5fd"] { color: var(--wx-primary-text) !important; }
i[style*="color:#60a5fa"], i[style*="color: #60a5fa"] { color: var(--wx-turquoise-text) !important; }
/* Verde/vermelho/amarelo claros → versões legíveis (verde = positivo, vermelho = negativo) */
[style*="color:#34d399"], [style*="color: #34d399"], [style*="color:#4ade80"], [style*="color:#10b981"] { color: var(--success) !important; }
[style*="color:#f87171"], [style*="color: #f87171"], [style*="color:#ef4444"] { color: var(--danger) !important; }
[style*="color:#fbbf24"], [style*="color: #fbbf24"], [style*="color:#f59e0b"] { color: var(--warning-light) !important; }
/* Textos claros sobre fundo escuro → texto escuro */
[style*="color:#f1f5f9"], [style*="color: #f1f5f9"], [style*="color:#e2e8f0"], [style*="color:#cbd5e1"] { color: var(--text-primary) !important; }
[style*="color:#94a3b8"], [style*="color: #94a3b8"] { color: var(--text-secondary) !important; }
/* Véus escuros/brancos usados como sub-cartões → cinza claro */
[style*="background:rgba(0,0,0,0.15)"], [style*="background:rgba(0,0,0,0.2)"], [style*="background:rgba(0,0,0,0.3)"],
[style*="background: rgba(0,0,0,0.15)"], [style*="background: rgba(0,0,0,0.2)"], [style*="background: rgba(0,0,0,0.3)"],
[style*="background:rgba(255,255,255,0.07)"], [style*="background:rgba(255,255,255,0.06)"],
[style*="background:rgba(255,255,255,0.05)"], [style*="background:rgba(255,255,255,0.02)"] { background: var(--bg-tertiary) !important; }
[style*="border:1px solid rgba(255,255,255,0.1)"], [style*="border:1px solid rgba(255,255,255,0.12)"] { border-color: var(--border) !important; }
/* Fundos escuros fixos (#0f172a, #1e293b) → superfícies brancas */
[style*="background:#0f172a"], [style*="background: #0f172a"], [style*="background:#1e293b"], [style*="background: #1e293b"],
[style*="background:#0f1f3a"], [style*="background:#111827"] { background: #FFFFFF !important; border-color: var(--border) !important; }
/* Tons de azul translúcido (ícones/destaques) → roxo suave da marca */
[style*="background:rgba(37,99,235,0.05)"], [style*="background:rgba(37,99,235,0.07)"], [style*="background:rgba(37,99,235,0.08)"],
[style*="background:rgba(37,99,235,0.1)"], [style*="background:rgba(37,99,235,0.12)"], [style*="background:rgba(37,99,235,0.15)"],
[style*="background:linear-gradient(135deg,rgba(37,99,235,"] { background: var(--wx-soft-purple) !important; }
[style*="border:1px solid rgba(37,99,235,"], [style*="border: 1px solid rgba(37,99,235,"] { border-color: var(--wx-soft-purple-border) !important; }
/* Botões inline azuis → roxo sólido da marca */
[style*="background:linear-gradient(135deg,#2563eb,#1d4ed8)"], [style*="background:linear-gradient(135deg,#2563eb,#7c3aed)"],
[style*="background:#2563eb"], [style*="background: #2563eb"] { background: var(--wx-primary) !important; }