/* ==========================================================================
   Jeinchat — calibragem COMPACTA (aproxima a densidade do Digisac).
   A fonte base do Huro já é ~14px (= Digisac); aqui o foco é reduzir
   títulos/KPIs gigantes e apertar paddings, deixando a tela mais tranquila.
   Carrega DEPOIS do main.css; !important onde precisa vencer o <style> da página.
   Referência medida no Digisac: linha de conversa ~45px, títulos 14–16px, header 60px.
   ========================================================================== */

/* ---- texto-base escuro no tema CLARO ----
   O Huro deixa o texto-base do body claro (#f9f9f9); no tema claro isso some no
   branco. Aqui garantimos um texto legível quando NÃO está no escuro.
   Elementos com cor própria (dark-inverted, light-text, tabela, tags) não mudam. */
body:not(.is-dark) { color: #41434d !important; }

/* ---- títulos e números menos gritantes ---- */
.title.is-1 { font-size: 1.9rem !important; }
.title.is-2 { font-size: 1.5rem !important; }
.title.is-3 { font-size: 1.2rem !important; }
.title.is-4 { font-size: 1.1rem !important; }
.title.is-5 { font-size: .95rem !important; }
.title.is-6 { font-size: .85rem !important; }
.subtitle   { font-size: .9rem !important; }

/* ícone grande dos KPIs (Agora/Estatísticas) mais discreto */
.icon.is-large { height: 2rem !important; width: 2rem !important; }
.icon.is-large svg, .icon.is-large [data-feather] { height: 22px !important; width: 22px !important; }

/* ---- densidade: linhas de conversa e listas ---- */
.conv-item { padding: .32rem .5rem !important; }
.media-flex-center { padding-top: .3rem !important; padding-bottom: .3rem !important; }

/* ---- cards mais enxutos ---- */
.r-card-advanced .card-body { padding: .85rem 1rem !important; }
.r-card-advanced .card-head, .r-card-advanced .card-foot { padding: .65rem 1rem !important; }

/* ---- avisos/notificações menores ---- */
.notification { padding: .8rem 1.4rem .8rem .95rem !important; font-size: .9rem; }

/* ---- seções (form-fieldset) mais próximas ---- */
.form-fieldset { padding: 1rem 1.1rem !important; margin-bottom: 1rem !important; }
.fieldset-heading { margin-bottom: .7rem !important; }
.fieldset-heading h4 { font-size: 1rem !important; }

/* ---- cabeçalho da página mais compacto ---- */
.page-title { margin-bottom: .5rem !important; }

/* ---- tabelas mais justas ---- */
.table td, .table th { padding: .45rem .6rem !important; }

/* ---- sidebar mais enxuta ---- */
.sidebar-block-inner .single-link { padding-top: .38rem !important; padding-bottom: .38rem !important; }
.sidebar-block-inner .menu-label { margin-top: .35rem !important; margin-bottom: .1rem !important; font-size: .68rem !important; }

/* ---- espaçamentos utilitários largos que usei, mais contidos ---- */
.p-5 { padding: 1rem !important; }
.px-5 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
.py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* ==========================================================================
   Caixa de atendimento com clima de WhatsApp (mantendo o tema ESCURO).
   Aplica só na conversa do inbox (.wa-chat), não no chat da IA de config.
   ========================================================================== */
/* fundo do chat acompanha o tema: bege claro (WhatsApp light) / escuro */
.wa-chat {
    background-color: #ece5dd;
    background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
    background-size: 20px 20px;
}
body.is-dark .wa-chat {
    background-color: #1e1e23;
    background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
}
/* balão enviado verde-WhatsApp nos dois temas */
.wa-chat .chat-msg.owner .chat-msg-text { background: #d9fdd3 !important; color: #0b141a !important; }
body.is-dark .wa-chat .chat-msg.owner .chat-msg-text { background: #0c6e5d !important; color: #eafff6 !important; }
/* recebido: branco no claro, cinza no escuro */
.wa-chat .chat-msg:not(.owner) .chat-msg-text { background: #ffffff !important; color: #111b21 !important; }
body.is-dark .wa-chat .chat-msg:not(.owner) .chat-msg-text { background: #2b2b30 !important; color: #c7c7d1 !important; }
/* selo verde do canal — borda acompanha o fundo da lista */
.conv-item .h-avatar { position: relative; }
.conv-item .h-avatar::after {
    content: ""; position: absolute; right: -2px; bottom: -2px;
    width: 13px; height: 13px; border-radius: 50%;
    background: #25d366; border: 2px solid #ffffff;
}
body.is-dark .conv-item .h-avatar::after { border-color: #23232a; }
/* nome do remetente na mensagem (formato WhatsApp/Digisac) */
.wa-chat .chat-msg-nome { display: block; font-weight: 700; font-size: .8em; margin-bottom: 1px; }
.wa-chat .chat-msg:not(.owner) .chat-msg-nome { color: #3f7fd0; }
body.is-dark .wa-chat .chat-msg:not(.owner) .chat-msg-nome { color: #86b7ff; }
.wa-chat .chat-msg.owner .chat-msg-nome { color: #0a6b57; }
body.is-dark .wa-chat .chat-msg.owner .chat-msg-nome { color: #a7f0dc; }
/* midia dentro do balao */
.chat-media { max-width: 240px; border-radius: 10px; display: block; }
.wa-chat audio { height: 34px; }

/* ==========================================================================
   Avisos/explicações mais discretos: painel sutil com barra de acento,
   no lugar do bloco colorido chapado (deixa as telas de gestão mais calmas).
   ========================================================================== */
.notification.is-primary {
    background: rgba(121, 123, 242, .12) !important;
    color: #4a4d78 !important;
    border-left: 3px solid #797bf2;
}
body.is-dark .notification.is-primary { color: #ccced9 !important; }
.notification.is-primary strong { color: #2a2c52 !important; }
body.is-dark .notification.is-primary strong { color: #ececf4 !important; }
.notification.is-primary .icon,
.notification.is-primary [class^="lnil"],
.notification.is-primary [class^="lnir"] { color: #797bf2 !important; }

.notification.is-warning {
    background: rgba(230, 150, 30, .14) !important;
    color: #8a6320 !important;
    border-left: 3px solid #ffb74d;
}
body.is-dark .notification.is-warning { color: #e0d4bd !important; }
.notification.is-warning strong { color: #6b4c14 !important; }
body.is-dark .notification.is-warning strong { color: #fff3e0 !important; }
.notification.is-warning .icon { color: #e6961e !important; }

/* ==========================================================================
   Responsividade: ocupar toda a largura (o tema limitava o conteúdo a 1200px
   e centralizava, deixando faixas vazias em monitores grandes) e recolher a
   sidebar corretamente no mobile/tablet (o Huro esconde a .sidebar-block mas
   não zerava a margem de 280px, empurrando o conteúdo).
   ========================================================================== */
.page-content-wrapper { max-width: 100% !important; }

/* o tema limita .form-fieldset a ~480px centralizado (ótimo p/ um formulário
   isolado, mas deixa as telas de gestão com tabela estreitas no meio da tela);
   nas nossas telas de administração o fieldset deve ocupar a largura toda. */
.form-fieldset { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* telas bem largas: um respiro proporcional nas laterais */
@media (min-width: 1600px) {
    .page-content { padding-left: 3rem !important; padding-right: 3rem !important; }
}

/* mobile (<=767px): Huro esconde a sidebar — zeramos a margem/largura que sobrava */
@media (max-width: 767px) {
    .view-wrapper,
    .view-wrapper.view-wrapper-full,
    .view-wrapper.view-wrapper-full.is-pushed-block { margin-left: 0 !important; width: 100% !important; }
    .page-content { padding: 1rem !important; }
    .page-content-wrapper { max-width: 100% !important; }
    /* KPIs e colunas empilham confortável no celular */
    .columns.is-multiline > .column { padding-top: .35rem; padding-bottom: .35rem; }
}

/* tablet em retrato (768–1024): Huro também esconde a sidebar aqui */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .view-wrapper,
    .view-wrapper.view-wrapper-full.is-pushed-block { margin-left: 0 !important; width: 100% !important; }
    .page-content { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}