/* ============================================================================
   FinPulse AI - Overrides de tema (light), responsividade e utilitários
   Derivado de src/index.css (frontend React original). Não usa build.
   ============================================================================ */

/* Ícones de tema controlados via classe raiz (dark/light) */
[data-theme-icon-dark] { display: none; }
[data-theme-icon-light] { display: none; }
html.dark [data-theme-icon-dark] { display: inline-block; }
html.light [data-theme-icon-light] { display: inline-block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.animate-fadeIn { animation: fadeIn .2s ease-out; }

.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
:root {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

/* Light Theme Styling Overrides */
html.light body {
  background-color: #f8fafc !important; /* slate-50 */
  color: #0f172a !important; /* slate-900 */
}

/* Background overrides for light theme */
html.light .bg-slate-950 {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/50,
html.light .bg-slate-950\/60 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .bg-slate-900 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-900\/80,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/50 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light .bg-slate-800\/80,
html.light .bg-slate-800\/70,
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/50,
html.light .bg-slate-800\/40,
html.light .bg-slate-800\/30 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-800\/50:hover {
  background-color: #e2e8f0 !important;
}

html.light .hover\:bg-slate-700:hover {
  background-color: #cbd5e1 !important;
}

/* Borders */
html.light .border-slate-900,
html.light .border-slate-800,
html.light .border-slate-800\/60,
html.light .border-slate-800\/80,
html.light .border-slate-700,
html.light .border-slate-700\/80,
html.light .border-slate-700\/60 {
  border-color: #e2e8f0 !important;
}

/* Text contrast in light mode */
html.light .text-slate-100,
html.light .text-slate-200 {
  color: #0f172a !important;
}

html.light .text-slate-300 {
  color: #334155 !important;
}

html.light .text-slate-400 {
  color: #64748b !important;
}

html.light .text-slate-500 {
  color: #475569 !important;
}

/* Form controls in light mode */
html.light input,
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

/* Dividers */
html.light .divide-slate-800\/80 > :not([hidden]) ~ :not([hidden]),
html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* ============================================================================
   MOBILE RESPONSIVENESS OPTIMIZATIONS
   Media queries para dispositivos móveis - preservando desktop intacto
   ============================================================================ */

/* Smartphones (até 640px) */
@media (max-width: 640px) {
  /* Touch targets mínimos 44x44px para botões e inputs */
  button:not(.no-touch-target),
  [role="button"]:not(.no-touch-target),
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select:not(.no-touch-target),
  .btn-mobile {
    min-height: 44px;
  }

  /* Inputs e selects mais altos para toque */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.no-touch-target),
  select:not(.no-touch-target),
  textarea:not(.no-touch-target) {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75px;
  }

  /* Espaçamento entre botões em grupos */
  .flex > button + button,
  .flex > .btn-mobile + .btn-mobile,
  .flex > [role="button"] + [role="button"],
  .space-x-2 > * + *,
  .space-x-3 > * + * {
    margin-left: 0.5rem;
  }

  /* Modais: margens menores, largura quase total */
  .modal-mobile,
  [class*="max-w-md"],
  [class*="max-w-lg"],
  [class*="max-w-xl"],
  [class*="max-w-2xl"] {
    max-width: calc(100vw - 1rem) !important;
    margin: 0.5rem !important;
  }

  /* Dropdowns do usuário não ultrapassam tela */
  .dropdown-mobile {
    max-width: calc(100vw - 1rem) !important;
    right: 0.5rem !important;
    left: auto !important;
  }

  /* Tabelas: padding menor, fonte menor */
  table th, table td {
    padding: 0.5rem 0.375rem !important;
    font-size: 0.7rem !important;
  }

  /* Tabs de navegação: fonte menor, padding ajustado */
  nav button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.65rem !important;
  }

  /* Cards grid: 1 coluna no mobile */
  .grid-mobile-1 {
    grid-template-columns: 1fr !important;
  }

  /* Reduzir títulos */
  h1, h2, h3, h4 {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
  }

  /* Reduzir spacing excessivo */
  .space-y-6 > * + * { margin-top: 1rem !important; }
  .space-y-4 > * + * { margin-top: 0.75rem !important; }
  .gap-4 { gap: 0.75rem !important; }
  .gap-6 { gap: 1rem !important; }
  .p-5, .p-6 { padding: 1rem !important; }

  /* Botões de ação em tabela: ícones maiores, padding */
  table td button {
    padding: 0.5rem !important;
    min-width: 44px;
    min-height: 44px;
  }

  /* Selects e dropdowns: fonte legível, altura adequada */
  select {
    font-size: 1rem !important; /* evita zoom no iOS */
    padding: 0.625rem 2rem 0.625rem 0.75rem !important;
  }

  /* Inputs de texto: fonte 1rem evita zoom iOS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  textarea {
    font-size: 1rem !important;
  }

  /* Badges e tags não quebram */
  .badge-mobile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Scrollbars mais finas */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
  }
}

/* Tablets portrait (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
  /* Touch targets ainda importantes */
  button:not(.no-touch-target),
  [role="button"]:not(.no-touch-target),
  select:not(.no-touch-target) {
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.no-touch-target),
  select:not(.no-touch-target),
  textarea:not(.no-touch-target) {
    min-height: 44px;
  }

  /* Modais com margem confortável */
  .modal-mobile,
  [class*="max-w-md"],
  [class*="max-w-lg"] {
    max-width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
  }

  /* Tabs navegação */
  nav button {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.7rem !important;
  }

  /* Grid 2 colunas vira 1 em alguns casos */
  .grid-tablet-1 {
    grid-template-columns: 1fr !important;
  }

  /* Padding reduzido */
  .p-5, .p-6 { padding: 1.25rem !important; }
  .gap-4 { gap: 1rem !important; }
  .gap-6 { gap: 1.25rem !important; }

  /* Tabelas */
  table th, table td {
    padding: 0.625rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

/* Ajustes para tablets landscape e desktop pequeno (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Apenas ajustes leves se necessário */
  .grid-desktop-sm-1 {
    grid-template-columns: 1fr !important;
  }
}

/* Melhorias gerais de usabilidade touch */
@media (hover: none) and (pointer: coarse) {
  /* Remove dependência de hover para ações importantes */
  .hover\:bg-slate-800:hover,
  .hover\:bg-slate-700:hover,
  .hover\:text-white:hover,
  .hover\:text-slate-200:hover,
  .hover\:border-emerald-500:hover {
    /* No touch, estados hover não funcionam bem - garantir que estado default seja usável */
  }

  /* Aumentar área de toque em dropdowns e menus */
  select, [role="combobox"] {
    padding-right: 3rem !important;
  }

  /* Botões de ação em cards e tabelas */
  .action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Prevenção de overflow horizontal global.
   IMPORTANTE: não aplicar overflow-x:hidden em containers internos (.max-w-7xl,
   main etc.): quando um eixo é fixado, o navegador computa overflow-y:auto e
   cria um contexto de rolagem que prende o dropdown do usuário dentro do
   cabeçalho (menu abrindo em uma barra de rolagem). A prevenção fica apenas
   na raiz (html/body), que não cria esse contexto para elementos absolutos. */
html, body {
  overflow-x: hidden;
}

/* Tabelas com scroll horizontal contido */
.table-container, .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Animações mais suaves no mobile */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Foco visível para acessibilidade */
*:focus-visible {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}

/* ============================================================================
   TABELA DE LANÇAMENTOS (cabe no card sem overflow horizontal no desktop)
   A partir de 1024px as colunas têm largura definida (colgroup) e a tabela
   usa table-layout:fixed, para a descrição absorver o espaço restante e nunca
   estourar o card. Abaixo disso volta para layout automático (scroll interno).
   ============================================================================ */
@media (min-width: 1024px) {
  #tx-table {
    table-layout: fixed;
  }
  #tx-table td form select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  #tx-table td {
    overflow: hidden;
  }
}

@media (max-width: 1023.98px) {
  #tx-table colgroup col {
    width: auto !important;
  }
}

/* Melhorar selects nativos no mobile */
@media (max-width: 768px) {
  select {
    background-image: none !important;
    appearance: none !important;
  }
}

/* ============================================================================
   MENU DO USU�RIO (popover desktop)
   Abre ancorado no botão, sem criar barra de rolagem no cabeçalho.
   ============================================================================ */
[data-menu-chevron] {
  transition: transform 0.2s ease;
}

[data-menu-toggle][aria-expanded="true"] [data-menu-chevron] {
  transform: rotate(180deg);
}

[data-menu-panel] {
  transform-origin: top right;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

[data-menu-panel]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Popover: entrada suave (scale + fade) e sombra destacada do cabeçalho */
[data-menu-panel]:not([hidden]) {
  animation: userMenuIn 0.16s ease-out;
}

@keyframes userMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-menu-panel]:not([hidden]) {
    animation: none;
  }
  [data-menu-chevron] {
    transition: none;
  }
}