/*
 * Flux CRM 5.3.4 · acabamento claro e Inbox em largura total
 * Este arquivo deve ser carregado por último.
 */

/* --------------------------------------------------------------------------
   Superfícies internas: nenhum card escuro
   -------------------------------------------------------------------------- */
body[data-theme="crm-premium"] .content :where(
  .panel,
  .stat-card,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class^="card-"],
  .kanban-column,
  .sales-column,
  .table-wrap,
  .form-section,
  .settings-section,
  .integration-section,
  .widget,
  .tile,
  fieldset
){
  background:#ffffff!important;
  background-image:none!important;
  color:#263449!important;
  border-color:#dfe6ee!important;
  text-shadow:none!important;
}

body[data-theme="crm-premium"] .content :where(
  .panel,
  .stat-card,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class^="card-"],
  .kanban-column,
  .sales-column,
  .table-wrap,
  .form-section,
  .settings-section,
  .integration-section,
  .widget,
  .tile
){
  box-shadow:0 2px 10px rgba(15,35,60,.045)!important;
}

body[data-theme="crm-premium"] .content :where(
  .panel,
  .stat-card,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class^="card-"],
  .kanban-column,
  .sales-column,
  .form-section,
  .settings-section,
  .integration-section,
  .widget,
  .tile
) :where(h1,h2,h3,h4,h5,h6,strong,b){
  color:#172033!important;
}

body[data-theme="crm-premium"] .content :where(
  .panel,
  .stat-card,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class^="card-"],
  .kanban-column,
  .sales-column,
  .form-section,
  .settings-section,
  .integration-section,
  .widget,
  .tile
) :where(p,small,span:not(.badge):not(.status-dot):not(.menu-icon)){
  text-shadow:none!important;
}

/* Neutraliza brilhos e pseudo-elementos escuros herdados de cards antigos. */
body[data-theme="crm-premium"] .content :where(.stat-card,[class$="-card"],[class*="-card "])::after{
  opacity:.08!important;
  filter:blur(45px)!important;
}

/* --------------------------------------------------------------------------
   Inbox: ocupa 100% da largura disponível, sem faixa vazia lateral
   -------------------------------------------------------------------------- */
html:has(body[data-route="inbox"]),
body[data-route="inbox"]{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#ffffff!important;
  overflow:hidden!important;
}

body[data-route="inbox"] .sidebar,
body[data-route="inbox"] .mobile-nav-overlay{
  display:none!important;
}

body[data-route="inbox"] .main{
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"] .topbar{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body[data-route="inbox"] .content{
  width:100%!important;
  max-width:none!important;
  height:calc(100dvh - 60px)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"] .inbox-layout{
  display:grid!important;
  grid-template-columns:210px minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  resize:none!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#ffffff!important;
  box-shadow:none!important;
}

/* Barra de canais clara: os itens continuam com as cores próprias das redes. */
body[data-route="inbox"] .inbox-channel-rail{
  min-width:0!important;
  height:100%!important;
  padding:24px 14px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-right:1px solid #e2e9f1!important;
  background:#f7f9fc!important;
  color:#263449!important;
}

body[data-route="inbox"] .inbox-channel-rail>header{
  padding:0 8px 16px!important;
}

body[data-route="inbox"] .inbox-channel-rail>header strong{
  color:#172033!important;
  font-size:16px!important;
}

body[data-route="inbox"] .inbox-channel-rail>header small{
  color:#7b899c!important;
}

body[data-route="inbox"] .inbox-channel-tabs{
  display:grid!important;
  gap:7px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

body[data-route="inbox"] .inbox-channel-tabs a{
  position:relative!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-height:48px!important;
  height:auto!important;
  padding:8px 10px!important;
  overflow:visible!important;
  border:1px solid #e4eaf1!important;
  border-radius:10px!important;
  background:#ffffff!important;
  color:#344258!important;
  box-shadow:0 1px 3px rgba(16,35,60,.035)!important;
}

body[data-route="inbox"] .inbox-channel-tabs a:hover{
  border-color:#cbd9e8!important;
  background:#fafdff!important;
  color:#172033!important;
}

body[data-route="inbox"] .inbox-channel-tabs a.is-active,
body[data-route="inbox"] .inbox-channel-tabs a.active{
  border-color:#9fc5f0!important;
  background:#eaf4ff!important;
  color:#125fae!important;
  box-shadow:inset 3px 0 #1c83f5,0 2px 8px rgba(28,131,245,.08)!important;
}

body[data-route="inbox"] .inbox-channel-tabs a>b{
  min-width:25px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  background:#eef2f7!important;
  color:#526174!important;
  font-size:11px!important;
  text-align:center!important;
}

body[data-route="inbox"] .inbox-channel-tabs a.is-active>b,
body[data-route="inbox"] .inbox-channel-tabs a.active>b{
  background:#d6eaff!important;
  color:#125fae!important;
}

/* Área de conversas + mensagens sempre usa todo o restante da tela. */
body[data-route="inbox"] .inbox-workspace{
  --flux-pane-size:340px!important;
  display:grid!important;
  grid-template-columns:var(--flux-pane-size) 12px minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"] .inbox-workspace:not(.flux-split-ready){
  grid-template-columns:minmax(280px,340px) minmax(0,1fr)!important;
}

body[data-route="inbox"] .conversation-list{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  background:#ffffff!important;
}

body[data-route="inbox"] .chat-panel{
  width:100%!important;
  max-width:none!important;
  min-width:260px!important;
  background:#fbfcfe!important;
}

/* Divisor mais fácil de agarrar e claramente redimensionável. */
body[data-route="inbox"] .flux-split-handle{
  position:relative!important;
  z-index:8!important;
  width:12px!important;
  min-width:12px!important;
  height:100%!important;
  cursor:col-resize!important;
  touch-action:none!important;
  outline:0!important;
  background:linear-gradient(90deg,transparent 0 4px,#d9e3ee 4px 8px,transparent 8px 12px)!important;
}

body[data-route="inbox"] .flux-split-handle::after{
  content:"⋮"!important;
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:66px!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid #cfdbe8!important;
  border-radius:999px!important;
  background:#ffffff!important;
  color:#68829e!important;
  font-size:19px!important;
  line-height:1!important;
  box-shadow:0 5px 18px rgba(24,50,80,.12)!important;
}

body[data-route="inbox"] .flux-split-handle:hover::after,
body[data-route="inbox"] .flux-split-handle:focus-visible::after,
body[data-route="inbox"] .inbox-workspace.flux-split-dragging .flux-split-handle::after{
  border-color:#7fb3eb!important;
  color:#176fc8!important;
  box-shadow:0 0 0 4px rgba(28,131,245,.10),0 6px 20px rgba(24,50,80,.14)!important;
}

body[data-route="inbox"] .inbox-workspace.flux-split-dragging,
body[data-route="inbox"] .inbox-workspace.flux-split-dragging *{
  cursor:col-resize!important;
  user-select:none!important;
}

body[data-route="inbox"] .conversation,
body[data-route="inbox"] .conversation-row,
body[data-route="inbox"] .search,
body[data-route="inbox"] .inbox-list-heading,
body[data-route="inbox"] .chat-head,
body[data-route="inbox"] .inbox-send-composer{
  background:#ffffff!important;
}

body[data-route="inbox"] .conversation.active{
  background:#eef6ff!important;
}

body[data-route="inbox"] .messages{
  background-color:#f8fafc!important;
  background-image:radial-gradient(#dfe7ef .8px,transparent .8px)!important;
  background-size:18px 18px!important;
}

body[data-route="inbox"] .message,
body[data-route="inbox"] .message.in{
  background:#ffffff!important;
  color:#263449!important;
  border-color:#e1e8ef!important;
}

body[data-route="inbox"] .message.out{
  background:#e2f7e5!important;
  color:#263449!important;
  border-color:#ccebd2!important;
}

/* Em telas intermediárias, a barra vira somente ícones para liberar mensagens. */
@media(max-width:1180px) and (min-width:761px){
  body[data-route="inbox"] .inbox-layout{
    grid-template-columns:78px minmax(0,1fr)!important;
  }
  body[data-route="inbox"] .inbox-channel-rail{
    padding:16px 8px!important;
  }
  body[data-route="inbox"] .inbox-channel-rail>header,
  body[data-route="inbox"] .inbox-channel-tabs a>span:nth-child(2){
    display:none!important;
  }
  body[data-route="inbox"] .inbox-channel-tabs a{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    min-height:48px!important;
    padding:8px!important;
  }
  body[data-route="inbox"] .inbox-channel-tabs a>b{
    position:absolute!important;
    top:2px!important;
    right:2px!important;
    min-width:18px!important;
    padding:1px 4px!important;
    font-size:9px!important;
  }
}

@media(max-width:760px){
  body[data-route="inbox"]{
    overflow:auto!important;
  }
  body[data-route="inbox"] .main,
  body[data-route="inbox"] .content{
    width:100%!important;
  }
  body[data-route="inbox"] .inbox-layout{
    grid-template-columns:1fr!important;
    grid-template-rows:62px minmax(0,1fr)!important;
  }
  body[data-route="inbox"] .inbox-channel-rail{
    padding:7px 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-right:0!important;
    border-bottom:1px solid #e2e9f1!important;
  }
  body[data-route="inbox"] .inbox-channel-tabs{
    display:flex!important;
    min-width:max-content!important;
  }
  body[data-route="inbox"] .inbox-channel-tabs a{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    padding:7px!important;
  }
  body[data-route="inbox"] .inbox-channel-rail>header,
  body[data-route="inbox"] .inbox-channel-tabs a>span:nth-child(2){
    display:none!important;
  }
  body[data-route="inbox"] .inbox-workspace,
  body[data-route="inbox"] .inbox-workspace:not(.flux-split-ready){
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  body[data-route="inbox"] .flux-split-handle{
    display:none!important;
  }
  body[data-route="inbox"] .chat-panel{
    min-width:0!important;
  }
}