/* ═══════════════════════════════════════════════════════════
   MYMOBI CRM v2.0 — layout.css
   Sidebar, Header e estrutura de layout — Tema Claro
══════════════════════════════════════════════════════════════ */

body { display: flex; min-height: 100vh; }

/* ══════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-normal);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  transition: width var(--transition-slow);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Collapsed */
.sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-soon,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-search-input,
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-menu-btn { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }

.sidebar.collapsed .sidebar-search { justify-content: center; padding: var(--space-2); }
.sidebar.collapsed .nav-item       { justify-content: center; padding: 0 var(--space-2); }
.sidebar.collapsed .sidebar-user   { justify-content: center; padding: var(--space-4) var(--space-2); }
.sidebar.collapsed .sidebar-toggle i { transform: rotate(180deg); }

/* ── LOGO ────────────────────────────────────────── */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: var(--header-height);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  flex-shrink: 0;
}

.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-brand);
}

.logo-letter {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--transition-slow);
  white-space: nowrap;
}

.logo-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.8px;
  line-height: 1.2;
}

.logo-tag {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.sidebar-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: var(--transition-base);
  border: 1px solid var(--border-normal);
}

.sidebar-toggle:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--border-brand);
}

.sidebar-toggle i { transition: transform var(--transition-slow); }

/* ── SIDEBAR SEARCH ───────────────────────────────── */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: var(--transition-base);
}

.sidebar-search:focus-within {
  border-color: var(--border-brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.sidebar-search i { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }

.sidebar-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
  width: 100%;
  transition: var(--transition-slow);
}

.sidebar-search-input::placeholder { color: var(--text-muted); }

/* ── NAV ─────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-2) var(--space-1);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  min-height: 38px;
}

.nav-item:hover:not(.disabled) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}

.nav-item.disabled { opacity: 0.45; cursor: not-allowed; }

.nav-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  flex-shrink: 0;
  transition: var(--transition-base);
}

.nav-item.active .nav-icon {
  color: var(--brand);
  background: rgba(0, 168, 107, 0.1);
}

.nav-label { flex: 1; transition: opacity var(--transition-slow); overflow: hidden; text-overflow: ellipsis; }

.nav-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge.badge-yellow { background: var(--color-warning); }
.nav-badge.badge-green  { background: var(--color-success); }
.nav-badge.badge-red    { background: var(--color-danger); }

.nav-soon {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.nav-indicator { display: none; }

/* ── USER FOOTER ─────────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
  position: relative;
}

.sidebar-user:hover { background: var(--bg-elevated); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}

.user-status-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid #fff;
  animation: pulse-dot 2s infinite;
}

.user-info { flex: 1; overflow: hidden; }
.user-name { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { display: block; font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.user-menu-btn { color: var(--text-muted); font-size: 13px; padding: var(--space-1); transition: var(--transition-fast); }
.user-menu-btn:hover { color: var(--text-primary); }

.user-dropdown {
  display: none;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 8px);
  padding: 6px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-normal);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-sidebar) + 10);
}

.user-dropdown.open { display: block; }

.user-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  text-align: left;
}

.user-dropdown-item i { width: 16px; color: var(--text-muted); text-align: center; }
.user-dropdown-item:hover, .user-dropdown-item:focus { background: var(--bg-elevated); outline: none; }
.user-dropdown-item.danger, .user-dropdown-item.danger i { color: #EF4444; }
.user-dropdown-separator { height: 1px; margin: 5px 4px; background: var(--border-subtle); }

/* ══════════════════════════════════════════════════════
   MAIN WRAPPER
══════════════════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
}

.main-wrapper.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed);
  width: calc(100% - var(--sidebar-collapsed));
}

/* ══════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-normal);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  contain: layout style;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.header-menu-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 1px solid var(--border-normal);
  transition: var(--transition-base);
}

.header-menu-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--border-brand); }

.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.breadcrumb-icon { color: var(--brand); font-size: 13px; }
.breadcrumb-label { color: var(--text-primary); font-weight: 600; }

/* ── HEADER SEARCH ────────────────────────────────── */
.header-center { flex: 1; max-width: 460px; margin: 0 auto; }

.header-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  height: 36px;
  transition: var(--transition-base);
}

.header-search:focus-within {
  background: #fff;
  border-color: var(--border-brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.header-search i { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.header-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; }
.header-search input::placeholder { color: var(--text-muted); }

.search-shortcut {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-normal);
  font-family: monospace;
  flex-shrink: 0;
}

/* ── HEADER RIGHT ─────────────────────────────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.header-action-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border: 1px solid var(--border-normal);
  position: relative;
  transition: var(--transition-base);
}

.header-action-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--border-brand); }

.action-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base);
}

.header-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--border-brand);
  transition: var(--transition-base);
}

.header-avatar:hover { box-shadow: var(--shadow-brand); }

/* ══════════════════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════════════════ */
.content-area {
  flex: 1;
  padding: var(--content-padding);
  overflow-y: auto;
  overflow-x: hidden; /* JS sobrescreve para 'auto' no modo kanban */
  background: var(--bg-base);
  will-change: scroll-position;
}

/* Modo kanban: permite scroll horizontal para o board */
.content-area.kanban-mode {
  overflow-x: auto;
}

/* ── PAGE HEADER ─────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; margin-bottom: 3px; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); }
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ── SECTION HEADER ──────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-title i { color: var(--brand); }
.section-actions { display: flex; gap: var(--space-2); }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1024px) { :root { --sidebar-width: 220px; } .header-center { max-width: 300px; } }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; transition: transform var(--transition-slow); }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .main-wrapper { margin-left: 0 !important; width: 100% !important; }
  .header-center { display: none; }
  .content-area { padding: var(--space-4); }
  .page-header { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════
   INBOX MODE — Ativado quando Central de Conversas está
   visível. Remove padding + scroll do content-area e
   transfere controle total para o módulo interno.
═══════════════════════════════════════════════════════ */
.content-area.inbox-mode {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* A .conversas-page ocupa 100% do content-area */
.content-area.inbox-mode .conversas-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* O grid de 3 colunas preenche todo o espaço restante */
.content-area.inbox-mode .conv-layout {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
  /* grid-template-columns já definido no hotfix anterior */
}

/* Coluna esquerda — scroll apenas na lista de itens */
.content-area.inbox-mode .conv-lista-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.content-area.inbox-mode .conv-lista-header {
  flex-shrink: 0;
}
.content-area.inbox-mode .conv-lista-itens {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Coluna central — header fixo + mensagens scroll + input fixo */
.content-area.inbox-mode .conv-chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.content-area.inbox-mode .conv-chat-header {
  flex-shrink: 0;
}
.content-area.inbox-mode .conv-mensagens {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.content-area.inbox-mode .conv-input-area {
  flex-shrink: 0;
}

/* Coluna direita — scroll independente dentro do painel */
.content-area.inbox-mode .conv-contexto-panel {
  overflow-y: auto;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════
   INBOX MODE — Mensagens ancoradas no bottom
   Spacer flex antes das mensagens empurra conteúdo para baixo,
   igual WhatsApp Web / Intercom / Kommo.
═══════════════════════════════════════════════════════ */
.content-area.inbox-mode .conv-mensagens {
  display: flex;
  flex-direction: column;
  /* Alinha mensagens no bottom quando há pouco conteúdo */
  justify-content: flex-start;
}

/* Spacer invisível que cresce e empurra as mensagens para baixo */
.content-area.inbox-mode .conv-mensagens::before {
  content: '';
  flex: 1 1 auto;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   INBOX MODE v3 — HEIGHT CHAIN FIX
   
   Problema raiz:
   • body e .main-wrapper usam min-height (não height), quebrando
     a cadeia de altura para filhos com flex:1 ou height:100%
   • .conv-layout tinha height:calc(100%-64px) do topbar do v1.0
   
   Solução:
   • .content-area.inbox-mode recebe height CONCRETA via calc()
   • Isso ancora toda a cadeia abaixo: flex:1 e height:100% passam
     a ter um valor pai definido para calcular
   • flex:0 0 auto remove o flex-grow para não conflitar com height
═══════════════════════════════════════════════════════════════ */

/* 1. Altura concreta no content-area — âncora de toda a cadeia */
.content-area.inbox-mode {
  height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  flex: 0 0 auto;       /* não cresce além da altura explícita */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── AGENDA MODE — mesmo padrão do inbox-mode ─────────────────
   Remove padding do content-area e dá altura concreta para que
   agenda-page possa usar height:100% sem transbordar.
────────────────────────────────────────────────────────────── */
.content-area.agenda-mode {
  height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.content-area.agenda-mode .agenda-page {
  flex: 1 1 0px;
  min-height: 0;
  height: 100%;         /* herda do pai — sem calc com valor errado */
  overflow: hidden;
}

/* 2. conversas-page: flex item que preenche o content-area */
.content-area.inbox-mode .conversas-page {
  flex: 1 1 0px;        /* 0px basis + grow = altura definida */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 3. Grid de 3 colunas: preenche conversas-page
      height:100% funciona porque o pai agora tem altura definida
      Override do height:calc(100%-64px) legado do v1.0           */
.content-area.inbox-mode .conv-layout {
  flex: 1 1 0px;
  min-height: 0;
  overflow: hidden;
  height: 100%;         /* override do calc(100%-64px) do v1.0 */
}

/* 4. Colunas do grid: precisam de min-height:0 para não colapsar */
.content-area.inbox-mode .conv-lista-panel,
.content-area.inbox-mode .conv-chat-panel,
.content-area.inbox-mode .conv-contexto-panel {
  min-height: 0;
  overflow: hidden;
}

/* 5. Coluna esquerda — lista */
.content-area.inbox-mode .conv-lista-panel {
  display: flex;
  flex-direction: column;
}
.content-area.inbox-mode .conv-lista-header {
  flex-shrink: 0;
}
.content-area.inbox-mode .conv-lista-itens {
  flex: 1 1 0px;
  overflow-y: auto;
  min-height: 0;
}

/* 6. Coluna central — chat */
.content-area.inbox-mode .conv-chat-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.content-area.inbox-mode .conv-chat-header {
  flex-shrink: 0;
}
.content-area.inbox-mode .conv-mensagens {
  flex: 1 1 0px;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Spacer empurra mensagens para o bottom quando há espaço sobrando */
}
.content-area.inbox-mode .conv-mensagens::before {
  content: '';
  flex: 1 1 auto;       /* cresce enquanto há espaço; encolhe quando cheio */
}
.content-area.inbox-mode .conv-input-area {
  flex-shrink: 0;
}

/* 7. Coluna direita — painel operacional */
.content-area.inbox-mode .conv-contexto-panel {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}