/* styles.css - Unificado, organizado e padronizado */

/* =========================
   RESET E CONFIGURAÇÕES BASE
   ========================= */
:root{
    --sidebar-width: 260px;
    --chat-width: 320px;
    --primary: #0d6efd;
    --primary-600: #2563eb;
    --primary-800: #1e40af;
    --muted: #6c757d;
    --bg: #0d6efd;
    --surface: #f8f9fa;
    --border: #dee2e6;
    --text: #212529;
    --radius: 12px;
    --transition: 0.2s ease-in-out;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Use quando a página for a tela de login */
.page-login {
    background: linear-gradient(135deg, var(--primary) 0%, #0dcaf0 100%);
    min-height: 100dvh;
}

/* =========================
   LAYOUT PRINCIPAL
   ========================= */
#layoutContainer{
    width:100vw;
    height:100dvh;
    display:flex;
    overflow:hidden;
}

main{ min-width:0; flex:1; overflow:auto; }

/* Sidebar / chat - transições e estados */
.transition-sidebar{
    transition: all .3s ease-in-out;
    overflow:hidden;
    white-space:nowrap;
}

.sidebar-collapsed{
    width:0 !important;
    padding:0 !important;
    opacity:0;
    overflow:hidden;
    border:none !important;
    margin:0 !important;
}

/* =========================
   TIPOGRAFIA E LINKS
   ========================= */
a{ color: var(--primary); text-decoration:none; transition: color var(--transition); }
a:hover{ color: var(--primary-600); }

/* Nav pills (ajustes visuais) */
.nav-pills .nav-link{
    color: rgba(255,255,255,0.85);
    transition: background-color 0.2s;
}
.nav-pills .nav-link:hover{ color:#fff; background-color: rgba(255,255,255,0.1); }
.nav-pills .nav-link.active{
    background-color: rgba(255,255,255,0.2);
    color:#fff;
    font-weight:600;
}
#submenuGestao .nav-link{ font-size:0.9rem; padding-left:1rem; }

/* =========================
   TABELAS E FORMULÁRIOS
   ========================= */
.table-primary.custom-header th{
    background-color: var(--primary-600);
    color: #fff;
    border-bottom: 2px solid var(--primary-800);
    vertical-align: middle;
    font-weight:600;
    font-size:0.9rem;
}

.custom-header input{
    background-color: rgba(255,255,255,0.9);
    border:none;
    font-size:0.85rem;
}
.custom-header input:focus{
    background:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,0.5);
}

.col-valor{
    text-align:right;
    font-family:'Consolas', monospace;
    font-weight:500;
}

input[type="date"]{ min-width:100px; }

/* Botões de ação */
.action-btn{
    border:none;
    background:transparent;
    padding:4px 8px;
    transition: transform 0.2s;
}
.action-btn:hover{ transform: scale(1.2); }

/* Card container para tabelas */
#card-tabela .table-responsive{
    border-radius: 12px;
    

    border:1px solid var(--border);
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}

/* =========================
   CHAT: estrutura & balões
   ========================= */
#sidebarChat{ height:100%; max-height:100dvh; }

/* Chat footer safe-area */
#sidebarChat .border-top{
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}

/* Scrollbars custom */
#chatMessages::-webkit-scrollbar{ width:6px; }
#chatMessages::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.2); border-radius:4px; }

#chatInput{ resize:none; overflow-y:hidden; min-height:45px; max-height:120px; }
#chatInput::-webkit-scrollbar{ width:5px; }
#chatInput::-webkit-scrollbar-thumb{ background:#ccc; border-radius:4px; }

/* Pulsing (gravação) */
.animate-pulse{ animation: pulse 1.5s infinite; }
@keyframes pulse { 0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1} }

/* Mensagens (layout dinâmico) */
.chat-row{ display:flex; width:100%; margin-bottom:12px; }
.chat-row.user{ justify-content:flex-end; }
.chat-row.bot{ justify-content:flex-start; }

.chat-bubble{
    width: fit-content;
    max-width:90%;
    min-width:80px;
    padding:8px 12px;
    font-size:0.95rem;
    line-height:1.3;
    position:relative;
    box-shadow:0 1px 2px rgba(0,0,0,0.1);
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-bubble.user-style{
    background-color: var(--primary);
    color: #fff;
    border-radius: 18px 2px 18px 18px;
}
.chat-bubble.bot-style{
    background-color: #fff;
    color: var(--text);
    border:1px solid var(--border);
    border-radius: 2px 18px 18px 18px;
}
.chat-bubble strong{ font-weight:600; }

/* Indicador de digitando */
.typing-indicator{ display:flex; align-items:center; justify-content:center; height:10px; padding:5px 0; }
.typing-dot{
    width:6px; height:6px; margin:0 2px; background:#8b8b8b; border-radius:50%; opacity:0.6;
    animation: typingAnimation 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1){ animation-delay:-0.32s; }
.typing-dot:nth-child(2){ animation-delay:-0.16s; }
@keyframes typingAnimation { 0%,80%,100%{ transform: scale(0);} 40%{ transform: scale(1);} }

/* =========================
   UTILITÁRIOS E ANIMAÇÕES
   ========================= */
.fade-in{ animation: fadeIn .4s ease-in; }
@keyframes fadeIn { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.sr-only{
    position:absolute;
    width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================
   LOGIN (escopado) - usar <body class="page-login">
   ========================= */
.login-card{ max-width:400px; width:100%; border-radius:15px; }
.brand-icon{
    width:80px;height:80px;background:#e7f1ff;color:var(--primary);
    border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto 20px;
}

/* =========================
   RESPONSIVO E CORREÇÕES MOBILE
   ========================= */
/* Menu sobreposto em telas menores */
@media (max-width:992px){
    #sidebarMenu{
        position:absolute; left:0; top:0; bottom:0; height:100%; z-index:2000;
        box-shadow:5px 0 15px rgba(0,0,0,0.2);
    }

    body.menu-open::before{
        content:'';
        position:fixed; top:0; left:0; width:100vw; height:100vh;
        background: rgba(0,0,0,0.5); z-index:1040; pointer-events:none;
    }

    #sidebarChat{
        position:absolute; right:0; top:0; height:100%; z-index:2050;
        box-shadow:-5px 0 15px rgba(0,0,0,0.2);
    }
}

/* Ajustes para telas médias em diante */
@media (min-width:768px){
    #card-tabela{ width:max-content !important; margin:0 auto !important; }
    #cardsContainer{ max-width:max-content !important; min-width:40% !important; margin:0 auto !important; }
}

/* Ajustes gerais usados por várias páginas */
:root {
    --chat-width: 360px; /* corresponde ao valor inline visto (360px) */
}

/* label com largura fixa e centralizado (ex: labelCurrentDate) */
.label-current-date {
    min-width: 120px;
    text-align: center;
    display: inline-block;
}

/* container com scroll-snap (accounts) */
#accounts-container,
.accounts-snap {
    scroll-snap-type: x mandatory;
}

/* textos pequenos reaproveitáveis */
.text-xs-75 { font-size: 0.75rem; } /* small usado em extrato/fluxo */
.text-xs-65 { font-size: 0.65rem; } /* notas menores */

/* sidebar / avatar / chat utilities */
#sidebarMenu { z-index: 1000; }         /* evita inline style */
#userAvatar { object-fit: cover; }      /* avatar com object-fit */
#sidebarChat { width: var(--chat-width); z-index: 1050; }

/* ícone circular pequeno (robô etc) */
.circle-32 { width: 32px; height: 32px; display:inline-flex; align-items:center; justify-content:center; }

/* botão de enviar do chat (círculo) */
.btn-send-circle { width: 35px; height: 35px; padding: 0; }

/* textarea do chat (reaproveita regras já existentes, redundância segura) */
.textarea-no-resize { resize: none; overflow: hidden; max-height: 120px; min-height: 24px; }

/* tabelas: fonte menor reaproveitável */
.table-font-sm { font-size: 0.9rem; }

/* utilitários para larguras de colunas / botões */
.w-120 { width: 120px !important; }
.w-100 { width: 100px !important; }
.w-150 { width: 150px !important; }
.min-w-130 { min-width: 130px !important; }
.min-w-200 { min-width: 200px !important; }
.w-160 { width: 160px !important; }
.max-w-150 { max-width: 150px !important; }

/* preview de foto do perfil */
.img-preview-120 { width: 120px; height: 120px; background-color: #fff; }

/* cursor pointer utilitário */
.cursor-pointer { cursor: pointer; }

/* borda de botão personalizado (index.html) */
.btn-outline-muted { border-color: #ced4da !important; }

/* substitui inputs com max-width inline */
.input-max-150 { max-width: 150px !important; }

/* pequenas correções de acessibilidade/visuais */
.card-min-80vh { min-height: 80vh; }
.chat-messages-60vh { height: 60vh; overflow: auto; }

/* Igualar largura dos cards e scroll interno da tabela */
#cardsContainer{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    flex-wrap:wrap; /* permite empilhar em telas pequenas */
}

#cardsContainer > .card{
    flex: 1 1 0;
    min-width: 0; /* crucial: permite que o conteúdo faça overflow interno em vez de expandir o card */
    max-width: 100%;
}

/* garante que o card da tabela não "vaze" do flex container */
#card-tabela{
    display:flex;
    flex-direction:column;
    min-width: 0;
}

/* rolagem horizontal só na área da tabela */
#card-tabela .table-responsive{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* define largura mínima da tabela para ativar o scroll quando necessário;
   ajuste min-width conforme número/complexidade de colunas */
#card-tabela .table-responsive > table{
    width: 100%;
    min-width: 900px; /* ajustar conforme necessidade; reduza se quer menos scroll */
}

.accordion-header, .accordion-button {
    width: 100%;
    min-width: 100%;
}

/* =========================
   EXTRATO / CONTAS (Customizações)
   ========================= */

/* Simula o ring-2 do Tailwind para indicar a conta selecionada */
.ring-2 {
    box-shadow: 0 0 0 2px var(--primary) !important;
}

/* Efeito de hover suave nos cartões das contas */
.card-hover-effect {
    transition: transform var(--transition), box-shadow var(--transition);
}

.card-hover-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
}

/* comportamento em telas pequenas 
@media (max-width: 768px){
    #cardsContainer{ flex-direction: column; }
    #card-tabela .table-responsive > table{ min-width: 720px; }
}*/