/* Vertex Control — Design System */
/* Brand: #1d355b (navy), #bc965a (gold), #faf9f5 (cream bg) */

* { box-sizing: border-box; }
/* Tema claro é o padrão. Sem declarar color-scheme, o Chrome com o SO em modo
   escuro auto-escurece os controles NATIVOS (ex.: <input type="date">),
   pintando o texto da data numa cor clara sobre o campo branco — a data some.
   O Safari não faz esse auto-dark, por isso aparecia só nele. Fixamos o esquema
   por tema (o modo escuro do app declara color-scheme:dark mais abaixo). */
html { color-scheme: light; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #faf9f5; }

/* ======================== ANIMATIONS ======================== */
@keyframes slide-in  { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fade-in   { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.animate-slide-in { animation: slide-in 0.3s ease; }
.fade-in { animation: fade-in 0.22s ease; }

/* ======================== CARDS ======================== */
.card { background:#fff; border-radius:12px; border:1px solid #e8e4dc; box-shadow:0 1px 4px rgba(29,53,91,0.06); }

/* ======================== KPI CARDS ======================== */
.kpi-card { background:#fff; border-radius:12px; padding:18px 20px; border:1px solid #e8e4dc; position:relative; overflow:hidden; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.kpi-navy::before   { background:#1d355b; }
.kpi-gold::before   { background:#bc965a; }
.kpi-green::before  { background:#22c55e; }
.kpi-red::before    { background:#ef4444; }
.kpi-blue::before   { background:#3b82f6; }
.kpi-yellow::before { background:#f59e0b; }
.kpi-purple::before { background:#8b5cf6; }

/* ======================== BADGES ======================== */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:600; letter-spacing:0.02em; }
.badge-gray   { background:#f0ede8; color:#6b6355; }
.badge-blue   { background:#dbeafe; color:#1d4ed8; }
.badge-navy   { background:#e0e8f4; color:#1d355b; }
.badge-gold   { background:#f5ebdc; color:#9a7535; }
.badge-yellow { background:#fef9c3; color:#a16207; }
.badge-green  { background:#dcfce7; color:#15803d; }
.badge-red    { background:#fee2e2; color:#b91c1c; }
.badge-purple { background:#f3e8ff; color:#7e22ce; }

/* ======================== FORM ======================== */
.form-input { width:100%; border:1px solid #d6d0c8; border-radius:8px; padding:8px 12px; font-size:14px; background:#fff; outline:none; transition:border-color 0.15s,box-shadow 0.15s; color:#1a1a1a; color-scheme: light; }
.form-input:focus { border-color:#bc965a; box-shadow:0 0 0 3px rgba(188,150,90,0.15); }
.form-label { display:block; font-size:12px; font-weight:600; color:#4a3f2f; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em; }

/* ======================== BUTTONS ======================== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.15s; border:none; }
.btn-primary   { background:#1d355b; color:#fff; }
.btn-primary:hover { background:#162843; }
.btn-gold      { background:#bc965a; color:#fff; }
.btn-gold:hover { background:#a07d45; }
.btn-secondary { background:#f0ede8; color:#4a3f2f; border:1px solid #d6d0c8; }
.btn-secondary:hover { background:#e5e0d8; }
.btn-danger    { background:#fee2e2; color:#b91c1c; }
.btn-danger:hover { background:#fecaca; }
.btn-success   { background:#dcfce7; color:#15803d; }
.btn-success:hover { background:#bbf7d0; }
.btn-warning   { background:#fef9c3; color:#a16207; }
.btn-warning:hover { background:#fef08a; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ======================== TABLE ======================== */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:10px 16px; font-size:11px; font-weight:700; color:#6b5e4a; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid #e8e4dc; background:#faf9f5; }
.data-table td { padding:12px 16px; font-size:14px; color:#2c2416; border-bottom:1px solid #f0ede8; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#faf9f5; }

/* ======================== KANBAN ======================== */
.kanban-col { background:#f0ede8; border-radius:10px; min-width:250px; padding:12px; }
.kanban-card { background:#fff; border-radius:8px; padding:12px; margin-bottom:8px; border:1px solid #e8e4dc; cursor:pointer; transition:box-shadow 0.15s; }
.kanban-card:hover { box-shadow:0 4px 16px rgba(29,53,91,0.12); border-color:#bc965a; }

/* ======================== PRIORITY ======================== */
.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.priority-baixa   { background:#9ca3af; }
.priority-normal  { background:#3b82f6; }
.priority-alta    { background:#f59e0b; }
.priority-urgente { background:#ef4444; }

/* ======================== RECONCILIATION ======================== */
.recon-matched   { background:#f0fdf4 !important; }
.recon-ignored   { background:#fafafa !important; opacity:0.6; }
.recon-unmatched { background:#fff; }
.recon-unmatched:hover { background:#fefce8; }
.drop-zone { border:2px dashed #d6d0c8; border-radius:12px; padding:40px; text-align:center; transition:all 0.2s; cursor:pointer; }
.drop-zone:hover, .drop-zone.drag-over { border-color:#bc965a; background:#fdf8f0; }

/* ======================== LAYOUT ======================== */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.empty-state { text-align:center; padding:60px 20px; color:#a09080; }
.empty-state i { font-size:48px; margin-bottom:16px; opacity:0.25; display:block; }
.loading { display:flex; align-items:center; justify-content:center; padding:60px; }

/* ======================== SCROLLBAR ======================== */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d6d0c8; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#bc965a; }

/* ======================== SIDEBAR ======================== */
.sidebar { background:#1d355b; overflow:hidden; }
.sidebar-hover:hover { background:rgba(255,255,255,0.08); border-radius:8px; }
.sidebar-active { background:rgba(188,150,90,0.15); border-radius:8px; border-left:3px solid #bc965a; }

/* ======================== RESPONSIVE ======================== */
@media (max-width:768px) {
  .sidebar { position:fixed; z-index:30; height:100%; }
}

[x-cloak] { display:none !important; }
.gold-text { color:#bc965a; }
.navy-text { color:#1d355b; }

/* ======================== TESTE: TEMA ESCURO (NAVY) ======================== */
/* Dark mode "de verdade" baseado no navy da marca (#1d355b), não um
   filtro genérico de inversão. Ligado/desligado pelo botão de paleta no
   topbar (estado salvo em localStorage).

   Cobertura: a maioria dos elementos estruturais usa classes (.card,
   .kpi-card, .data-table, .btn-*, .badge-*) e é sobrescrita normalmente
   abaixo. Texto/bordas secundários do app, porém, usam cor inline
   (style="color:#...") em vez de classe — para esses, usamos seletores
   de atributo com !important nos tons hex conhecidos do design system
   (documentados no topo deste arquivo). Fundos pastéis inline dos
   kpi-cards coloridos (a maioria começa com #f/#e/#d, ex: #f5ebdc,
   #e0e8f4, #dcfce7) são unificados numa única superfície escura — a
   barra superior colorida de cada kpi-card continua indicando o tipo. */
html.theme-dark {
  background: #0f1d33;
  color-scheme: dark;
}
html.theme-dark body { background:#0f1d33; color:#dde3ed; }

html.theme-dark .card,
html.theme-dark .kpi-card,
html.theme-dark .kanban-card,
html.theme-dark .kanban-col,
html.theme-dark .form-input,
html.theme-dark .btn-secondary,
html.theme-dark .bg-white {
  background:#16294a !important;
  border-color:#2a3f5f !important;
  color:#dde3ed;
}

html.theme-dark .data-table th { background:#0f1d33 !important; color:#9fb0c9 !important; border-color:#2a3f5f !important; }
html.theme-dark .data-table td { color:#dde3ed !important; border-color:#223657 !important; }
html.theme-dark .data-table tbody tr:hover { background:#1c3257 !important; }
html.theme-dark .empty-state { color:#7e91ad !important; }
html.theme-dark .form-input { color:#dde3ed !important; color-scheme: dark; }
html.theme-dark .form-label { color:#9fb0c9 !important; }
html.theme-dark .btn-secondary { color:#dde3ed !important; }
html.theme-dark .navy-text { color:#9fc1ff !important; }

/* Sidebar: mantém branca (já era assim no tema claro), só o texto/
   ícones passam para navy em vez de branco translúcido — os itens da
   sidebar usam color:rgba(255,255,255,X) inline com várias opacidades,
   não hex, por isso precisam de seletor próprio. */
html.theme-dark .sidebar { background:#fff !important; color:#1d355b !important; }
html.theme-dark .sidebar [style*="rgba(255,255,255"] { color:#1d355b !important; }
html.theme-dark .sidebar [style*="border-color:rgba(255,255,255"] { border-color:rgba(29,53,91,0.15) !important; }
html.theme-dark .sidebar-hover:hover { background:rgba(29,53,91,0.08) !important; }
html.theme-dark .sidebar [style*="background:rgba(255,255,255"] { background:rgba(29,53,91,0.1) !important; }

/* Badges — preenchimento mais claro/saturado que o fundo dos cards (~#16253f)
   para não "sumirem" no tema escuro, com texto forte por cima. */
html.theme-dark .badge-gray   { background:#3b4d67 !important; color:#dbe3f0 !important; }
html.theme-dark .badge-blue   { background:#245081 !important; color:#bcdcff !important; }
html.theme-dark .badge-navy   { background:#2c5391 !important; color:#d3e4ff !important; }
html.theme-dark .badge-gold   { background:#6a5526 !important; color:#f4cd7e !important; }
html.theme-dark .badge-yellow { background:#6a5a1c !important; color:#ffe483 !important; }
html.theme-dark .badge-green  { background:#1f5233 !important; color:#8ff0b3 !important; }
html.theme-dark .badge-red    { background:#5c2626 !important; color:#ffa3a3 !important; }
html.theme-dark .badge-purple { background:#42305e !important; color:#dab6ff !important; }

/* Botões com fundo pastel (classe) */
html.theme-dark .btn-danger   { background:#3a1818 !important; color:#ff8a8a !important; }
html.theme-dark .btn-success  { background:#16331f !important; color:#6ee7a0 !important; }
html.theme-dark .btn-warning  { background:#3d3414 !important; color:#f5d76e !important; }

/* Texto secundário inline (cores hex específicas do design system) */
html.theme-dark [style*="color:#a09080"], html.theme-dark [style*="color: #a09080"] { color:#8fa0bc !important; }
html.theme-dark [style*="color:#6b5e4a"], html.theme-dark [style*="color: #6b5e4a"] { color:#a8b6cc !important; }
html.theme-dark [style*="color:#4a3f2f"], html.theme-dark [style*="color: #4a3f2f"] { color:#c3cee0 !important; }
html.theme-dark [style*="color:#2c2416"], html.theme-dark [style*="color: #2c2416"] { color:#dde3ed !important; }
html.theme-dark [style*="color:#1a1a1a"], html.theme-dark [style*="color: #1a1a1a"] { color:#dde3ed !important; }
html.theme-dark [style*="color:#92400e"], html.theme-dark [style*="color: #92400e"] { color:#f0b86e !important; }

/* Bordas inline claras → bordas escuras sutis */
html.theme-dark [style*="border-color:#e8e4dc"], html.theme-dark [style*="border-color: #e8e4dc"] { border-color:#2a3f5f !important; }
html.theme-dark [style*="border-color:#d6d0c8"], html.theme-dark [style*="border-color: #d6d0c8"] { border-color:#2a3f5f !important; }

/* Fundos pastéis inline (kpi-cards coloridos, alertas) */
html.theme-dark [style*="background:#f"], html.theme-dark [style*="background: #f"],
html.theme-dark [style*="background:#e8"], html.theme-dark [style*="background: #e8"],
html.theme-dark [style*="background:#d"], html.theme-dark [style*="background: #d"] {
  background:#16294a !important;
}

/* Fundos-tint claros do Tailwind (bg-*-50) usados como realce de linha/seção —
   no tema escuro viram tons escuros, senão o texto claro (ex.: título das
   tarefas em navy-text, que no dark vira azul-claro) some sobre o fundo claro.
   Caso da lista de tarefas atrasadas (bg-red-50). */
html.theme-dark .bg-red-50,    html.theme-dark .hover\:bg-red-50:hover    { background-color:#3a1f22 !important; }
html.theme-dark .bg-green-50,  html.theme-dark .hover\:bg-green-50:hover  { background-color:#123020 !important; }
html.theme-dark .bg-yellow-50, html.theme-dark .hover\:bg-yellow-50:hover { background-color:#332e18 !important; }
html.theme-dark .bg-blue-50,   html.theme-dark .hover\:bg-blue-50:hover   { background-color:#1a2c49 !important; }
html.theme-dark .bg-orange-50, html.theme-dark .hover\:bg-orange-50:hover { background-color:#3a2a1a !important; }
html.theme-dark .bg-purple-50, html.theme-dark .hover\:bg-purple-50:hover { background-color:#281f3d !important; }