/* ============================================================
   THEME.CSS v1.0
   Sistema de tema CLARO / ESCURO do Ityrapuã Store.

   ✅ Modo CLARO agora é o padrão — inspirado em marketplaces como
      Mercado Livre e Shopee: fundo branco/cinza-claro, cartões
      brancos com sombra suave, azul como cor de ação (mantém a
      identidade atual do sistema) e âmbar como cor de destaque.
   ✅ Modo ESCURO continua disponível a qualquer momento pelo botão
      no canto superior direito (praticamente o visual antigo).
   ✅ Não precisa editar nenhum arquivo .js: este arquivo sobrescreve
      as MESMAS classes Tailwind que já são usadas em todo o sistema,
      só quando <html data-theme="light"> — ou seja, funciona em
      cima do que já existe, sem duplicar lógica.

   Como funciona: o tema.js define o atributo data-theme no <html>.
   Sem esse atributo (ou com data-theme="dark"), o sistema continua
   exatamente como estava antes.
   ============================================================ */

:root {
    --lt-bg-page: #f1f5f9;
    --lt-bg-surface: #ffffff;
    --lt-bg-surface-alt: #f8fafc;
    --lt-bg-input: #eef2f7;
    --lt-border: #e2e8f0;
    --lt-border-strong: #cbd5e1;
    --lt-text-primary: #0f172a;
    --lt-text-secondary: #475569;
    --lt-text-muted: #94a3b8;
}

/* ---------------------------------------------------------
   Tipografia — leve ajuste de suavização, vale pros dois temas
   --------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------
   Fundo geral e texto base
   --------------------------------------------------------- */
html[data-theme="light"] body,
html[data-theme="light"] .bg-\[\#0b0f1a\] {
    background-color: var(--lt-bg-page) !important;
    color: var(--lt-text-primary);
}

html[data-theme="light"] body { color-scheme: light; }
html[data-theme="dark"]  body { color-scheme: dark; }

/* ---------------------------------------------------------
   Sidebar (desktop) e barra inferior (mobile)
   --------------------------------------------------------- */
html[data-theme="light"] aside.app-sidebar {
    background-color: var(--lt-bg-surface) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 2px 0 12px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] #bottom-nav {
    background: rgba(255, 255, 255, 0.97) !important;
    border-top-color: var(--lt-border) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .bnav-btn { color: #94a3b8; }
html[data-theme="light"] .bnav-btn:hover { background: rgba(15, 23, 42, 0.05); color: #334155; }

/* ✅ FIX: item de menu (sidebar e bottom nav) selecionado ou em hover
   ficava com texto BRANCO sobre fundo agora claro (bg-white/10 ou
   hover:bg-white/5, virados cinza-claro) — ficava ilegível ("LOJA" e
   "BI/GESTÃO" sumindo). navigation.js aplica as classes bg-white/10 +
   text-white direto no <button data-nav>, e o CSS do próprio Tailwind
   usa group-hover:text-white no hover — os dois precisam virar escuro
   no tema claro. */
html[data-theme="light"] [data-nav].text-white {
    color: var(--lt-text-primary) !important;
}
html[data-theme="light"] .group:hover .group-hover\:text-white {
    color: var(--lt-text-primary) !important;
}

/* ---------------------------------------------------------
   Cartões e painéis — a base visual de quase toda tela
   (produtos, KPIs do BI, listas de admin/estoque, anúncios,
   vendedores, modais, carrinho...)
   --------------------------------------------------------- */
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] .bg-slate-900\/40,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-\[\#161b2c\] {
    background-color: var(--lt-bg-surface) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/50,
html[data-theme="light"] .bg-slate-700,
html[data-theme="light"] .bg-slate-600\/30,
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/10 {
    background-color: var(--lt-bg-input) !important;
}

html[data-theme="light"] .hover\:bg-white\/5:hover,
html[data-theme="light"] .hover\:bg-slate-700:hover,
html[data-theme="light"] .hover\:bg-slate-600:hover {
    background-color: var(--lt-border) !important;
}

/* Inputs / selects / textareas — precisam de borda mais visível
   pra não sumir dentro do cartão branco */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color: var(--lt-text-primary) !important;
    border-color: var(--lt-border-strong) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .placeholder-slate-500::placeholder {
    color: #94a3b8 !important;
}

/* ---------------------------------------------------------
   Bordas
   --------------------------------------------------------- */
html[data-theme="light"] .border-white\/5,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-800\/50,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-600 {
    border-color: var(--lt-border) !important;
}

/* ---------------------------------------------------------
   Texto neutro (cinza) — nunca usado em botões coloridos,
   então é seguro escurecer pra ficar legível no fundo claro
   --------------------------------------------------------- */
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300 { color: var(--lt-text-secondary) !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
/* ✅ FIX: text-slate-600 estava mapeado pra #cbd5e1 (cinza quase
   branco) — no tema escuro original ele é usado como "texto bem
   discreto", mas em fundo claro isso o deixava praticamente invisível
   (selo "PROTEGIDO", "X ativos • Y inativos" nas estatísticas de
   vendedores, etc). Agora fica discreto mas ainda legível. */
html[data-theme="light"] .text-slate-600 { color: #94a3b8 !important; }

/* ---------------------------------------------------------
   Texto branco — só troca quando é título/valor dentro de um
   cartão. NÃO troca dentro de <button>, <a>, nem de elementos
   com gradiente inline (avatares, selos "Novidade" etc.), que
   precisam continuar brancos por cima de fundo colorido.
   --------------------------------------------------------- */
html[data-theme="light"] .text-white:not(button):not(a):not([style*="gradient"]) {
    color: var(--lt-text-primary) !important;
}

/* ---------------------------------------------------------
   Selos/textos em tom pastel que ficam ilegíveis no fundo claro
   --------------------------------------------------------- */
html[data-theme="light"] .text-blue-300  { color: #1d4ed8 !important; }
html[data-theme="light"] .text-yellow-300{ color: #92400e !important; }
html[data-theme="light"] .text-yellow-400,
html[data-theme="light"] .text-yellow-500{ color: #b45309 !important; }
html[data-theme="light"] .text-cyan-400  { color: #0e7490 !important; }
html[data-theme="light"] .text-green-300 { color: #15803d !important; }

/* ---------------------------------------------------------
   Cards de estatística com gradiente (aba VENDEDORES: Total de
   Vendedores / Produtos no Catálogo / Itens em Estoque / Valor em
   Estoque). O gradiente original (from-*-900/30 to-*-800/10) foi
   pensado pra cima de fundo escuro — no fundo claro virava um
   lavanda/azul quase invisível, e o número (text-*-400, um tom claro)
   sumia em cima. Aqui trocamos por fundo pastel sólido + texto bem
   mais escuro e saturado, em vez do gradiente translúcido.
   --------------------------------------------------------- */
html[data-theme="light"] .from-purple-900\/30.to-purple-800\/10 {
    background-image: none !important;
    background-color: #f3eeff !important;
    border-color: #ddd0ff !important;
}
html[data-theme="light"] .from-purple-900\/30.to-purple-800\/10 .text-purple-400 { color: #7c3aed !important; }

html[data-theme="light"] .from-blue-900\/30.to-blue-800\/10 {
    background-image: none !important;
    background-color: #eaf2ff !important;
    border-color: #bfdbfe !important;
}
html[data-theme="light"] .from-blue-900\/30.to-blue-800\/10 .text-blue-400 { color: #1d4ed8 !important; }

html[data-theme="light"] .from-yellow-900\/30.to-yellow-800\/10 {
    background-image: none !important;
    background-color: #fff6e0 !important;
    border-color: #fde68a !important;
}
html[data-theme="light"] .from-yellow-900\/30.to-yellow-800\/10 .text-yellow-400 { color: #b45309 !important; }

html[data-theme="light"] .from-green-900\/30.to-green-800\/10 {
    background-image: none !important;
    background-color: #e8faf0 !important;
    border-color: #bbf7d0 !important;
}
html[data-theme="light"] .from-green-900\/30.to-green-800\/10 .text-green-400 { color: #15803d !important; }

/* Legendas dentro desses 4 cards — mais escuras pra não ficarem
   apagadas em cima do fundo pastel */
html[data-theme="light"] .from-purple-900\/30.to-purple-800\/10 .text-slate-500,
html[data-theme="light"] .from-blue-900\/30.to-blue-800\/10 .text-slate-500,
html[data-theme="light"] .from-yellow-900\/30.to-yellow-800\/10 .text-slate-500,
html[data-theme="light"] .from-green-900\/30.to-green-800\/10 .text-slate-500 { color: #334155 !important; }

html[data-theme="light"] .from-purple-900\/30.to-purple-800\/10 .text-slate-600,
html[data-theme="light"] .from-blue-900\/30.to-blue-800\/10 .text-slate-600,
html[data-theme="light"] .from-yellow-900\/30.to-yellow-800\/10 .text-slate-600,
html[data-theme="light"] .from-green-900\/30.to-green-800\/10 .text-slate-600 { color: #64748b !important; }

/* ---------------------------------------------------------
   Modais (login, perfil, produto, checkout, detalhes de
   vendedor) — herdam o mesmo cartão branco
   --------------------------------------------------------- */
html[data-theme="light"] #auth-modal .bg-\[\#161b2c\],
html[data-theme="light"] #profile-modal .bg-\[\#161b2c\],
html[data-theme="light"] #admin-modal .bg-\[\#161b2c\],
html[data-theme="light"] #customer-modal .bg-\[\#161b2c\],
html[data-theme="light"] #tenant-details-modal .bg-\[\#161b2c\] {
    background-color: var(--lt-bg-surface) !important;
}

/* ---------------------------------------------------------
   Carrinho e toasts de feedback
   --------------------------------------------------------- */
html[data-theme="light"] #cart-drawer {
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .cart-toast {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: var(--lt-text-primary) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}

/* ---------------------------------------------------------
   Scrollbar
   --------------------------------------------------------- */
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--lt-bg-page); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------------------------------------------------------
   Classes CSS PRÓPRIAS do sistema (não são utilitários Tailwind,
   por isso não eram cobertas pelas regras acima) — chips de
   categoria, legenda de gráfico, subtítulo da vitrine e o painel
   "Status da Loja" (vendor-settings), que usa várias classes com
   cor fixa escrita direto no style.css.
   --------------------------------------------------------- */
html[data-theme="light"] .category-chip {
    background: var(--lt-bg-input) !important;
    border-color: var(--lt-border) !important;
    color: #475569 !important;
}
html[data-theme="light"] .category-chip:hover {
    background: var(--lt-border) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .category-chip-count {
    background: rgba(15, 23, 42, 0.08) !important;
    color: #334155 !important;
}

html[data-theme="light"] .market-subtitle { color: #64748b !important; }
html[data-theme="light"] .scroll-cue { color: #64748b !important; }

html[data-theme="light"] .legend-name { color: var(--lt-text-primary) !important; }
html[data-theme="light"] .legend-value { color: #64748b !important; }

html[data-theme="light"] .product-sold-count { color: #64748b !important; }

/* Painel "Status da Loja" — onde fica o botão de fechar a loja */
html[data-theme="light"] .vendor-status-section,
html[data-theme="light"] .schedule-times {
    background: var(--lt-bg-input) !important;
    border-color: var(--lt-border) !important;
}
html[data-theme="light"] .vendor-status-header h3,
html[data-theme="light"] .vendor-schedule-container h4,
html[data-theme="light"] .vendor-status-history h4 {
    color: var(--lt-text-secondary) !important;
}
html[data-theme="light"] .info-label,
html[data-theme="light"] .toggle-label { color: #64748b !important; }
html[data-theme="light"] .info-value { color: var(--lt-text-primary) !important; }
html[data-theme="light"] .history-item {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid var(--lt-border);
}
html[data-theme="light"] .history-time { color: #94a3b8 !important; }
html[data-theme="light"] .time-input-group input {
    background: #ffffff !important;
    color: var(--lt-text-primary) !important;
    border-color: var(--lt-border-strong) !important;
}
/* ✅ FIX (auditoria de contraste): faltava essa — o rótulo "Abertura"/
   "Fechamento" continuava #cbd5e1 (cinza bem claro), quase invisível
   em cima do fundo agora claro do painel de horário. */
html[data-theme="light"] .time-input-group label { color: #64748b !important; }

/* ---------------------------------------------------------
   ✅ FIX (auditoria de contraste): BARRA DE BUSCA — o campo usava
   fundo/borda translúcidos de branco (pensados pra ficar sutil sobre
   fundo ESCURO) e texto quase branco (#e2e8f0). Em cima do fundo
   agora claro, o campo praticamente sumia e o texto digitado ficava
   ilegível (cinza claríssimo sobre branco).
   --------------------------------------------------------- */
html[data-theme="light"] #market-search-input {
    background: #ffffff !important;
    border-color: var(--lt-border-strong) !important;
    color: var(--lt-text-primary) !important;
}
html[data-theme="light"] #market-search-input::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] #market-search-bar .market-search-icon { color: #94a3b8 !important; }
html[data-theme="light"] #market-search-clear {
    background: var(--lt-bg-input) !important;
    color: #475569 !important;
}
html[data-theme="light"] #market-search-clear:hover { background: var(--lt-border) !important; }

/* ---------------------------------------------------------
   ✅ FIX (auditoria de contraste): CARTÃO DO ADMIN/ESTOQUE — nome do
   vendedor (âmbar claro #fbbf24) e o selinho azul claro (#93c5fd)
   foram pensados pra cima do fundo escuro do cartão; em cima do
   cartão agora branco (.admin-card), ambos ficavam com contraste
   baixo demais pra ler confortavelmente.
   --------------------------------------------------------- */
html[data-theme="light"] .admin-card-vendor { color: #b45309 !important; }
html[data-theme="light"] .admin-card-badge {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #1d4ed8 !important;
}
html[data-theme="light"] .admin-card-thumb-empty { color: #64748b !important; }

/* ---------------------------------------------------------
   ✅ FIX (auditoria de contraste): SELO "PROMOÇÕES" E PÍLULAS DE
   ATACADO — no card de produto (título e cada "Leve X por RS Y"),
   o ciano claro (#22d3ee / #a5f3fc) desenhado pra fundo escuro vira
   quase invisível sobre o cartão branco.
   --------------------------------------------------------- */
html[data-theme="light"] .product-bulk-badge {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}
html[data-theme="light"] .product-bulk-badge-title { color: #0e7490 !important; }
html[data-theme="light"] .product-bulk-tier-pill {
    background: rgba(6, 182, 212, 0.1) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    color: #0e7490 !important;
}
html[data-theme="light"] .product-bulk-tier-pill strong { color: #0e7490 !important; }

/* ---------------------------------------------------------
   ✅ FIX (auditoria de contraste): POP-UP DE BOAS-VINDAS — o texto
   descritivo e o botão de fechar (✕) usavam cinza claro/translúcido
   branco, pensados pro cartão escuro; ficavam apagados no cartão
   agora branco (o título já tinha sido corrigido antes).
   --------------------------------------------------------- */
html[data-theme="light"] .home-hero-popup-text { color: #475569 !important; }
html[data-theme="light"] .home-hero-popup-close {
    background: var(--lt-bg-input) !important;
    color: #64748b !important;
}
html[data-theme="light"] .home-hero-popup-close:hover {
    background: var(--lt-border) !important;
    color: #0f172a !important;
}

/* ---------------------------------------------------------
   ✅ FIX (auditoria de contraste): BOTÕES DE PERÍODO DO BI (Hoje /
   Ontem / 7 dias / Este mês...) — fundo translúcido branco quase
   invisível sobre página clara, e texto cinza claro. Vira uma pílula
   sólida e legível, com o estado ativo mantendo o azul de sempre.
   --------------------------------------------------------- */
html[data-theme="light"] .bi-period-btn {
    background: var(--lt-bg-input) !important;
    border-color: var(--lt-border) !important;
    color: #475569 !important;
}
html[data-theme="light"] .bi-period-btn:hover {
    background: var(--lt-border) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .bi-period-btn-active {
    background: var(--accent, #3b82f6) !important;
    border-color: var(--accent, #3b82f6) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------
   Botão de alternar tema — fixo no canto superior direito,
   visível em qualquer aba do sistema
   --------------------------------------------------------- */
#theme-toggle-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 250;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--lt-border);
    background: #ffffff;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

#theme-toggle-btn:hover { transform: scale(1.08); filter: none; }
#theme-toggle-btn:active { transform: scale(0.94); }
#theme-toggle-btn svg { width: 20px; height: 20px; pointer-events: none; }

html[data-theme="dark"] #theme-toggle-btn {
    background: #161b2c;
    color: #fbbf24;
    border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    #theme-toggle-btn { top: 12px; right: 12px; width: 40px; height: 40px; }
}