/* ==========================================================================
   DashOS · Responsividade (celular e tablet)
   Carregado por ÚLTIMO em todas as páginas: concentra as correções de layout móvel.
   Breakpoints: ≤ 820px (menu lateral vira gaveta) · ≤ 640px (celular) · ≤ 380px (celular pequeno)
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* --- Campos com 16px no celular: abaixo disso o Safari do iPhone dá zoom ao tocar no campo ---------- */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  input::placeholder, textarea::placeholder { font-size: 15px; }
}

@media (max-width: 820px) {
  /* Nada passa da largura da tela (a rolagem lateral fica só dentro de tabelas/quadros) */
  html, body { max-width: 100%; overflow-x: clip; }
  .main-area { min-width: 0; max-width: 100vw; }

  /* --- Menu lateral (gaveta): acima do topo, altura real da tela e rolagem própria --------------- */
  .sidebar {
    z-index: 20010 !important;
    width: min(86vw, 300px);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-shell.sidebar-open .mobile-overlay { z-index: 20000 !important; }
  .sidebar .brand { flex-shrink: 0; height: 64px; padding: 0 14px 0 20px; }
  .sidebar-nav { flex: 0 0 auto; overflow: visible; padding: 16px 12px 8px; }
  .sidebar-bottom { margin-top: auto; flex-shrink: 0; padding: 12px 12px 16px; }
  .sidebar-close { width: 36px; height: 36px; }
  .nav-link { height: 44px; }

  /* --- Topo ----------------------------------------------------------------------------------- */
  .topbar { height: 60px; padding: 0 14px; gap: 10px; }
  .topbar-left { display: flex; align-items: center; min-width: 0; flex: 1; }
  .mobile-menu { flex-shrink: 0; width: 38px; height: 38px; margin-right: 8px; }
  .breadcrumb { min-width: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .breadcrumb > span, .breadcrumb > .icon { flex-shrink: 0; }
  .breadcrumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { flex-shrink: 0; gap: 8px; }
}

@media (max-width: 640px) {
  /* No celular o caminho vira só o nome da página e o perfil só o avatar */
  .breadcrumb > span, .breadcrumb > .icon { display: none; }
  .breadcrumb strong { font-size: 14px; }
  .profile-switcher { padding: 4px; gap: 0; }
  .profile-switcher-info { display: none; }
  .topbar-actions .dropdown-menu, .topbar-actions .notification-popover {
    position: fixed !important;
    top: 66px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
}

/* ==========================================================================
   Layout das páginas no celular (≤ 640px)
   ========================================================================== */
@media (max-width: 640px) {
  .page-content { padding: 20px 14px 24px; }

  /* Título da página: linha de contexto (eyebrow) quebra sem espaços estranhos */
  .eyebrow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px; line-height: 1.5; }
  .eyebrow .heading-separator { margin: 0; }
  .page-heading h1 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.1; }
  .page-heading p { font-size: 13px; }
  .heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .heading-actions > :only-child, .heading-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .heading-actions .button, .heading-actions > a, .heading-actions .dropdown-anchor { width: 100%; min-width: 0; }
  .heading-actions .button { height: 42px; justify-content: center; }

  /* Cabeçalho de cartão: título em cima, ações/busca embaixo, ocupando a largura toda */
  .card-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .card-header > div:last-child:not(:first-child) { width: 100%; }
  .card-header h2 { font-size: 16px; }
  .table-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0; }
  .table-search { flex: 1 1 100%; min-width: 0; height: 42px; }
  .table-actions .dropdown-anchor, .table-actions > .button { flex: 1 1 auto; }
  .table-actions .table-filter-button { width: 100%; justify-content: space-between; }

  /* Cartões com espaço interno menor (mais área útil) */
  .card { border-radius: 16px; }
  .clients-cards-grid { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 12px; }

  /* Indicadores (KPIs) em 2 colunas, com números que cabem */
  .finance-kpi-grid, .cockpit-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .finance-kpi-grid > *, .cockpit-stats-grid > * { min-width: 0; padding: 14px !important; }
  /* Valor do KPI numa linha só ("R$ 18.300,00" nunca quebra no meio), com fonte que cabe na coluna */
  .finance-kpi-box strong { font-size: clamp(16px, 4.8vw, 20px) !important; white-space: nowrap; letter-spacing: -0.02em; }
  .finance-kpi-box span { font-size: 11px; line-height: 1.35; }
  .finance-kpi-box small { font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
  /* Selo do mês de operação (Dashboard): texto corrido, sem picotar */
  .comparison-notice-badge { display: block !important; width: 100%; line-height: 1.5; padding: 8px 10px !important; white-space: normal !important; }
  .comparison-notice-badge > * { display: inline !important; }
  .comparison-notice-badge .icon { vertical-align: -2px; margin-right: 4px; }

  /* Filtros em coluna, todos com a largura toda */
  .filter-bar-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .filter-bar-header { flex-wrap: wrap; gap: 10px; }
  .platform-pill-selector { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-pill { text-align: center; }
  .form-row { grid-template-columns: minmax(0, 1fr) !important; }
  .ds-select-wrap { max-width: 100%; }

  /* Tabelas: rolagem lateral só dentro do quadro, sem espremer as colunas */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .table-scroll > table, .table-scroll > .data-table { min-width: 640px; }
  .data-table th, .data-table td { white-space: normal; }

  /* Financeiro: controles do cabeçalho e abas */
  .finance-head-controls { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px !important; }
  .finance-head-controls .custom-select-wrap, .finance-head-controls .custom-select-trigger { width: 100%; }
  .finance-head-controls #financeCurrencyTabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .finance-head-controls #financeCurrencyTabs .button { width: 100%; padding: 0 4px !important; justify-content: center; }
  .finance-tabs-card { padding: 8px !important; }
  .finance-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .finance-tabs::-webkit-scrollbar { display: none; }
  .finance-tabs .button { flex: 0 0 auto; }

  /* CRM: filtros empilhados */
  .crm-filter-row { flex-direction: column; align-items: stretch !important; width: 100%; }
  .crm-filter-row .custom-select-wrap, .crm-filter-row .custom-select-trigger { width: 100%; }
  .crm-filter-card .custom-select-value { max-width: none; }

  /* Equipe: rótulo do filtro acima dos botões */
  .team-filter-row { flex-direction: column; align-items: flex-start !important; width: 100%; }

  /* Popovers dos seletores antigos (Financeiro, CRM, Tarefas): nunca maiores que a tela */
  .custom-select-popover { max-width: calc(100vw - 28px); }
}

/* Login, recuperar e redefinir senha, completar cadastro: cartão com margem lateral */
@media (max-width: 640px) {
  .login-card { width: auto !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; padding: 28px 20px !important; }
}

/* ==========================================================================
   Modais no celular
   ========================================================================== */
@media (max-width: 640px) {
  .modal-overlay { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); align-items: center; }
  .modal-window { max-width: 100% !important; width: 100% !important; border-radius: 16px; max-height: calc(100dvh - 20px); }
  .modal-header { padding: 14px 16px; gap: 10px; }
  .modal-header h3 { font-size: 15px; line-height: 1.3; min-width: 0; }
  .modal-header .icon-button { flex-shrink: 0; }
  .modal-body { padding: 16px; gap: 14px; max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* Rodapé: botões quebram linha e dividem a largura (nunca cortados) */
  .modal-footer { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }
  .modal-footer > .button, .modal-footer > button, .modal-footer > a { flex: 1 1 auto; min-width: calc(50% - 4px); justify-content: center; height: 42px; }
  .modal-footer > :only-child { flex-basis: 100%; }
}
@media (max-width: 640px) {
  /* Formulário entre a janela e o conteúdo: o conteúdo rola e o rodapé com os botões fica sempre visível */
  .modal-window { max-height: calc(100dvh - 20px) !important; }
  .modal-window > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .modal-window > form > .modal-body, .modal-window > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .modal-header, .modal-footer { flex-shrink: 0; }
  /* Grupos de botões dentro do rodapé (ex.: Cancelar + Aplicar) dividem a largura */
  .modal-footer > div { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .modal-footer > div > .button, .modal-footer > div > button { flex: 1 1 auto; justify-content: center; height: 42px; }

  /* Cabeçalho com ações (ficha do cliente/colaborador): ações quebram para a linha de baixo */
  .modal-header { flex-wrap: wrap; align-items: flex-start !important; }
  .modal-header > div:first-child { min-width: 0; flex: 1 1 0; }
  .modal-header > div:not(:first-child):not(:last-child),
  .modal-header > div:nth-child(2):has(.button) { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .modal-header > div:has(> .button) .button { flex: 1 1 auto; justify-content: center; }
  #modalClientDetail .modal-header { padding: 14px 16px !important; }
}
@media (max-width: 640px) {
  /* Ficha do cliente: o X continua no canto superior direito quando as ações descem de linha */
  #modalClientDetail .modal-header { position: relative; padding-right: 52px !important; }
  #modalClientDetail .modal-header [data-close-modal] { position: absolute; top: 12px; right: 12px; }
  #modalClientDetail .modal-header .button { height: 38px !important; }
}
@media (max-width: 640px) {
  /* Nova demanda: no desktop o conteúdo fica "visível" para os seletores abrirem por cima; no celular ele rola */
  #modalCreateTask .modal-window { overflow: hidden !important; }
  #modalCreateTask .modal-body { overflow-y: auto !important; }
  /* Campos lado a lado dentro de modais viram uma coluna */
  .modal-body [style*="grid-template-columns: 1fr 1fr"]:has(> .form-field),
  .modal-body [style*="grid-template-columns:1fr 1fr"]:has(> .form-field),
  .modal-body [style*="repeat(2, 1fr)"]:has(> .form-field),
  .modal-body [style*="repeat(2,1fr)"]:has(> .form-field) { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  /* Seletores antigos (Tarefas, Financeiro, CRM): o nome escolhido usa a largura do campo */
  .form-custom-select-trigger .custom-select-value, .custom-select-wrap .custom-select-trigger .custom-select-value { max-width: none; min-width: 0; flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Telas estreitas (≤ 400px): indicadores com valores em dinheiro numa coluna só, para o número aparecer inteiro */
@media (max-width: 400px) {
  .finance-kpi-box strong { font-size: clamp(15px, 4.6vw, 18px) !important; }
}
@media (max-width: 640px) {
  /* Cartão do cliente: mensalidade nunca separa o "R$" do número */
  .client-card-fee-box { min-width: 0; }
  .client-card-fee-val { white-space: nowrap; font-size: clamp(14px, 4.4vw, 17px); }
  /* WhatsApp: filtros (cliente e datas) com a largura toda */
  .wa-filter-card { flex-direction: column; align-items: stretch !important; padding: 14px !important; }
  .wa-filter-card .form-field { min-width: 0 !important; width: 100%; }
  .wa-filter-card .form-input { width: 100%; height: 42px !important; }
  .wa-filter-card > :last-child { text-align: left !important; margin-left: 0 !important; }
}
@media (max-width: 640px) {
  /* Grades escritas direto no HTML dos modais: colunas que encolhem de verdade (sem estourar a largura) */
  .modal-body [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .modal-body [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .modal-body [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Ficha do cliente: cartões Meta Ads / Google Ads um embaixo do outro */
  #modalClientDetail .modal-body > div[style*="repeat(2, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  #modalClientDetail .modal-body * { min-width: 0; }
}
@media (max-width: 640px) {
  /* Kanban (Tarefas e CRM): uma coluna por tela, encaixando ao arrastar, com a próxima aparecendo na borda */
  .kanban-board-container { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 6px; }
  .kanban-column { width: min(84vw, 320px) !important; flex: 0 0 min(84vw, 320px) !important; scroll-snap-align: start; }
}

/* Tela obrigatória de notificações (celular): cobre o sistema até o usuário permitir as notificações. */
.push-gate { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; overflow-y: auto; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse 520px 420px at 50% 20%, rgba(121, 86, 192, .2), transparent 75%), rgba(8, 9, 18, .97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.push-gate[hidden] { display: none; }
html.push-gate-open, html.push-gate-open body { overflow: hidden; }
.push-gate-card { width: 100%; max-width: 400px; padding: 28px 22px 22px; text-align: center; background: var(--color-surface, #12121f); border: 1px solid rgba(190, 180, 235, .16); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.push-gate-icon { width: 58px; height: 58px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 16px; color: var(--color-accent-high, #d2c2ff); background: rgba(188, 163, 255, .14); }
.push-gate-icon.is-warning { color: #ffc46b; background: rgba(255, 186, 82, .13); }
.push-gate-icon svg { width: 28px; height: 28px; }
.push-gate-card h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.push-gate-card > p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary, #a9a3c2); }
.push-gate-card .pwa-ios-steps { text-align: left; margin-bottom: 18px; }
.push-gate-cta { width: 100%; height: 46px; justify-content: center; font-size: 14px; }
.push-gate-hint { display: block; margin-top: 10px; font-size: 12px; color: var(--color-text-muted, #7d7896); }
.push-gate-logout { margin-top: 14px; padding: 8px 12px; background: none; border: 0; color: var(--color-text-muted, #7d7896); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Notificador no celular */
@media (max-width: 640px) {
  .notifier-form, .notifier-history { padding: 18px 14px; }
  .notifier-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .notifier-roles { gap: 6px; }
  .notifier-chip { flex: 1 1 100%; min-width: 0; min-height: 40px; }
  .notifier-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notifier-chip small { margin-left: auto; }
  .notifier-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .notifier-history .card-header .ds-select-wrap, .notifier-history .card-header .filter-select { width: 100%; }
  .notifier-item { padding: 12px; }
  .notifier-item-top { flex-direction: column; gap: 6px; }
  .notifier-item-actions .button { width: 100%; height: 36px; }
}

/* Arrastar cards com o dedo: segurar o card não seleciona texto nem abre o menu do navegador. */
.kanban-card[draggable="true"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Tarefas no celular: cabeçalho baixo, filtros recolhidos e atalhos das etapas */
.kanban-filter-toggle, .kanban-stage-tabs { display: none; }
@media (max-width: 640px) {
  .kanban-page-content .page-heading { gap: 10px; margin-bottom: 12px; }
  .kanban-page-content .page-heading .eyebrow { display: none; }
  .kanban-page-content .page-heading h1 { font-size: 24px; margin-top: 0; }
  .kanban-page-content .heading-actions { grid-template-columns: minmax(0, 1fr) auto auto; }
  .kanban-page-content .heading-actions > * { grid-column: auto !important; }
  .kanban-page-content .heading-actions #btnOpenTaskModal { order: -1; }
  .kanban-page-content .heading-actions .button { height: 40px; padding: 0 12px; font-size: 12px; }
  .kanban-page-content .heading-actions .button[hidden] { display: none; }

  #kanbanToolbar { padding: 8px 10px; gap: 8px; margin-bottom: 8px; align-items: center; }
  #kanbanToolbar .kanban-toolbar-left { display: none; order: 3; width: 100%; }
  #kanbanToolbar.filters-open .kanban-toolbar-left { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  #kanbanToolbar .kanban-toolbar-caption { display: none; }
  #kanbanToolbar.filters-open .custom-select-wrap, #kanbanToolbar.filters-open .custom-select-trigger { width: 100%; }
  #kanbanToolbar .kanban-toolbar-right { margin-left: auto; }
  .kanban-filter-toggle { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--color-border); background: rgba(255, 255, 255, .03); color: var(--color-text); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
  .kanban-filter-toggle b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 10.5px; background: var(--color-accent); color: #fff; }
  .kanban-filter-toggle.has-active { border-color: rgba(185, 165, 255, .5); }
  .kanban-filter-toggle .kanban-filter-arrow { transition: transform 160ms ease; opacity: .6; }
  #kanbanToolbar.filters-open .kanban-filter-arrow { transform: rotate(180deg); }

  .kanban-stage-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kanban-stage-tabs::-webkit-scrollbar { display: none; }
  .kanban-stage-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 16px; border: 1px solid var(--color-border); background: rgba(255, 255, 255, .025); color: var(--color-text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
  .kanban-stage-tabs button b { font-size: 10.5px; color: var(--color-text-muted); font-weight: 700; }
  .kanban-stage-tabs button.is-active { border-color: rgba(185, 165, 255, .55); background: var(--color-accent-soft); color: var(--color-accent-high); }
  .kanban-stage-tabs button.is-active b { color: var(--color-accent-high); }
  .kanban-page-content .kanban-board-container { height: calc(100dvh - 250px); min-height: 380px; }
}

/* Janelas no celular: nada rola para o lado. Data e hora no Safari do iPhone têm largura própria maior que a
   do campo; aqui elas obedecem a largura da janela (era o que empurrava "Nova Demanda" para a direita). */
@media (max-width: 640px) {
  .modal-window, .modal-window .modal-body, .modal-window form { overflow-x: hidden; max-width: 100%; }
  .modal-window .form-row > *, .modal-window .form-field { min-width: 0; }
  .modal-window input[type="date"], .modal-window input[type="time"], .modal-window input[type="datetime-local"], .modal-window input[type="month"] {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  .modal-window input[type="date"]::-webkit-date-and-time-value, .modal-window input[type="time"]::-webkit-date-and-time-value,
  .modal-window input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
}
@media (max-width: 640px) {
  .modal-window .modal-header { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .modal-window .modal-header > h3, .modal-window .modal-header > div:first-child { min-width: 0; flex: 1 1 auto; }
  .modal-window .modal-header > .icon-button { flex-shrink: 0; }
}
/* Todos os campos de data e hora no celular (inclusive fora das janelas e no app instalado / PWA do iPhone):
   o Safari dá a eles uma largura própria que ignora a do campo e estoura a tela. */
@media (max-width: 640px) {
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  input[type="date"].form-input, input[type="time"].form-input, input[type="datetime-local"].form-input, input[type="month"].form-input { width: 100%; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
  .form-row > *, .form-field, .form-group { min-width: 0; }
}

/* ===== Alertas no celular: cartões com faixa de gravidade e botões embaixo ===== */
@media (max-width: 640px) {
  #alertsToolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  #alertsToolbar > :last-child:nth-child(even) { grid-column: 1 / -1; }
  #alertsToolbar > [role="tablist"] { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; }
  #alertsToolbar > [role="tablist"] .button { height: 36px !important; justify-content: center; font-size: 12px !important; }
  #alertsToolbar .ds-select-wrap, #alertsToolbar select, #alertsToolbar .custom-select-wrap { width: 100% !important; min-width: 0 !important; }
  #alertsToolbar .ds-select-trigger, #alertsToolbar .form-custom-select-trigger { width: 100%; min-width: 0; font-size: 11.5px; padding-left: 10px; padding-right: 8px; }
  #attentionSection { padding: 16px 12px !important; }
  #attentionSection .card-header p { display: none; }

  .attention-item { flex-direction: column; align-items: stretch !important; gap: 10px; padding: 12px 12px 12px 14px !important; border-radius: 12px; border-left: 3px solid var(--color-border) !important; }
  .attention-item.sev-critico { border-left-color: var(--color-negative) !important; background: rgba(255, 92, 124, 0.06); }
  .attention-item.sev-atencao { border-left-color: var(--color-warning) !important; background: rgba(248, 201, 142, 0.04); }
  .attention-item.sev-informativo { border-left-color: var(--color-accent-high) !important; }
  .attention-item-left { gap: 0 !important; width: 100%; min-width: 0; }
  .attention-item .severity-dot { display: none; }
  .attention-info { min-width: 0; width: 100%; }
  .attention-info strong { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px !important; line-height: 1.3; }
  .attention-info strong .attention-client { flex: 1 1 auto; min-width: 0; }
  .attention-info strong .attention-type { margin-left: 0 !important; order: 2; }
  .attention-info strong .attention-title { order: 3; flex-basis: 100%; font-size: 12.5px !important; font-weight: 600 !important; }
  .attention-item.sev-critico .attention-title { color: var(--color-negative) !important; }
  .attention-item.sev-atencao .attention-title { color: var(--color-warning) !important; }
  .attention-info .attention-paren { display: none; }
  .attention-info p { font-size: 12.5px !important; line-height: 1.5 !important; margin: 6px 0 !important; }
  .attention-info > small { font-size: 11px; line-height: 1.5; display: block; }
  .attention-actions { width: 100%; display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .attention-actions:empty { display: none !important; }
  .attention-actions .button { height: 38px !important; font-size: 12px !important; justify-content: center; width: 100%; }
}

/* ===== Financeiro no celular: indicadores em 2 colunas e faturas/despesas como cartões ===== */
@media (max-width: 640px) {
  .finance-kpi-grid > .finance-kpi-box:first-child { grid-column: 1 / -1; }
  .finance-kpi-box small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  table:has(#invoicesTableBody), table:has(#expensesTableBody) { min-width: 0 !important; width: 100%; display: block; }
  table:has(#invoicesTableBody) thead, table:has(#expensesTableBody) thead { display: none; }
  #invoicesTableBody, #expensesTableBody, #invoicesTableFoot, #expensesTableFoot { display: block; padding-top: 10px; }
  #invoicesTableBody > tr, #expensesTableBody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
    margin: 0 10px 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: rgba(255, 255, 255, .02);
  }
  #invoicesTableBody > tr > td, #expensesTableBody > tr > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; max-width: none !important; white-space: normal; }
  #invoicesTableBody > tr:has(> td[colspan]), #expensesTableBody > tr:has(> td[colspan]) { display: block; border: 0; background: none; }

  /* Fatura: cliente | valor / serviço | situação / vencimento | pagamento / ações */
  #invoicesTableBody > tr > td:nth-child(2) { grid-column: 1; grid-row: 1; }
  #invoicesTableBody > tr > td:nth-child(2) strong { font-size: 14px !important; }
  #invoicesTableBody > tr > td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  #invoicesTableBody > tr > td:nth-child(4) strong { font-size: 15px !important; }
  #invoicesTableBody > tr > td:nth-child(1) { grid-column: 1; grid-row: 2; }
  #invoicesTableBody > tr > td:nth-child(1) small { display: none; }
  #invoicesTableBody > tr > td:nth-child(6) { grid-column: 2; grid-row: 2; text-align: right; }
  #invoicesTableBody > tr > td:nth-child(5) { grid-column: 1; grid-row: 3; }
  #invoicesTableBody > tr > td:nth-child(5)::before { content: "Vence "; font-size: 11px; color: var(--color-text-muted); }
  #invoicesTableBody > tr > td:nth-child(8) { grid-column: 2; grid-row: 3; text-align: right; }
  #invoicesTableBody > tr > td:nth-child(3), #invoicesTableBody > tr > td:nth-child(7) { display: none; }
  #invoicesTableBody > tr > td:nth-child(9) { grid-column: 1 / -1; grid-row: 4; text-align: left !important; padding-top: 8px !important; border-top: 1px solid var(--color-border) !important; }

  /* Despesa: descrição | valor / categoria | situação / vencimento / observações / ações */
  #expensesTableBody > tr > td:nth-child(2) { grid-column: 1; grid-row: 1; }
  #expensesTableBody > tr > td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  #expensesTableBody > tr > td:nth-child(3) strong { font-size: 15px !important; }
  #expensesTableBody > tr > td:nth-child(1) { grid-column: 1; grid-row: 2; }
  #expensesTableBody > tr > td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; }
  #expensesTableBody > tr > td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  #expensesTableBody > tr > td:nth-child(4)::before { content: "Vence "; font-size: 11px; color: var(--color-text-muted); }
  #expensesTableBody > tr > td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
  #expensesTableBody > tr > td:nth-child(7) { grid-column: 1 / -1; grid-row: 5; text-align: left !important; padding-top: 8px !important; border-top: 1px solid var(--color-border) !important; }

  #invoicesTableBody > tr > td:last-child > div, #expensesTableBody > tr > td:last-child > div { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: stretch !important; }
  #invoicesTableBody > tr > td:last-child .button, #expensesTableBody > tr > td:last-child .button { flex: 1 1 auto; height: 34px !important; justify-content: center; }
  #invoicesTableFoot > tr, #expensesTableFoot > tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 14px 12px; }
  #invoicesTableFoot > tr > td, #expensesTableFoot > tr > td { display: inline; padding: 0 !important; border: 0 !important; }
}

/* DRE no celular: descrição em cima, competência e caixa lado a lado embaixo (cada um com o seu rótulo) */
@media (max-width: 640px) {
  .dre-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px !important; }
  .dre-grid > span:first-child { grid-column: 1 / -1; font-size: 12.5px; }
  .dre-head { display: none; }
  .dre-grid .dre-comp, .dre-grid .dre-cash { text-align: left !important; display: flex; flex-direction: column; font-size: 14px; }
  .dre-grid .dre-comp::before, .dre-grid .dre-cash::before { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
  .dre-grid .dre-comp::before { content: "Competência"; }
  .dre-grid .dre-cash::before { content: "Caixa"; }
  .dre-row { padding: 10px 12px !important; }
  #dreContent { overflow-x: hidden; }
}
/* Abas do Financeiro no celular: as três sempre visíveis, lado a lado (texto quebra em 2 linhas) */
@media (max-width: 640px) {
  .finance-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; overflow: visible; }
  .finance-tabs .button { height: 38px !important; padding: 0 6px !important; white-space: nowrap; font-size: 12px !important; justify-content: center; text-align: center; }
  .finance-tabs .tab-long { display: none; }
  .finance-tabs .tab-short { display: inline !important; margin-right: 3px; }
  .finance-tabs .button { gap: 0 !important; }
}

/* ===== CRM no celular: cabeçalho baixo, indicadores compactos, filtros lado a lado e atalhos das etapas ===== */
@media (max-width: 640px) {
  .page-content:has(#crmFunnelBoard) .page-heading { gap: 10px; margin-bottom: 12px; }
  .page-content:has(#crmFunnelBoard) .page-heading .eyebrow,
  .page-content:has(#crmFunnelBoard) .page-heading p { display: none; }
  .page-content:has(#crmFunnelBoard) .page-heading h1 { font-size: 24px; margin-top: 0; }
  .page-content:has(#crmFunnelBoard) .heading-actions { grid-template-columns: minmax(0, 1fr) auto auto; }
  .page-content:has(#crmFunnelBoard) .heading-actions > * { grid-column: auto !important; }
  .page-content:has(#crmFunnelBoard) .heading-actions #btnOpenCreateDealModal { order: -1; }
  .page-content:has(#crmFunnelBoard) .heading-actions .button { height: 40px; padding: 0 12px; font-size: 12px; }
  .page-content:has(#crmFunnelBoard) .heading-actions .button[hidden] { display: none; }
  #btnOpenWebhooksModal { font-size: 0 !important; gap: 0 !important; padding: 0 12px !important; }
  #btnOpenWebhooksModal svg { width: 16px; height: 16px; }

  .page-content:has(#crmFunnelBoard) .finance-kpi-grid { gap: 8px !important; margin-bottom: 12px !important; }
  .page-content:has(#crmFunnelBoard) .finance-kpi-box { padding: 10px 12px !important; }
  .page-content:has(#crmFunnelBoard) .finance-kpi-box span { font-size: 10.5px; }
  .page-content:has(#crmFunnelBoard) .finance-kpi-box strong { font-size: clamp(15px, 4.4vw, 18px) !important; margin: 2px 0; }
  .page-content:has(#crmFunnelBoard) .finance-kpi-box small { -webkit-line-clamp: 1 !important; font-size: 10.5px; }

  .crm-filter-card { padding: 8px !important; margin-bottom: 8px !important; }
  .crm-filter-card .crm-filter-hint { display: none; }
  .crm-filter-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px !important; flex-direction: initial; }
  .crm-filter-row .custom-select-trigger { height: 38px !important; padding: 0 10px !important; }
  .crm-filter-row .custom-select-label { display: none; }

  .crm-stage-tabs { display: flex; }
  .kanban-stage-tabs button.crm-tab-fechado b { color: var(--color-positive); }
  .kanban-stage-tabs button.crm-tab-perdido b { color: var(--color-negative); }
  .page-content:has(#crmFunnelBoard) .kanban-board-container { height: calc(100dvh - 230px) !important; min-height: 400px; }
}

/* ---- Relatórios: modal "Relatório para cliente" (styles/client-reports.css) ---- */
@media (max-width: 820px) {
  .crep-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crep-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crep-tile.is-highlight { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .crep-window { max-width: 100%; }
  .crep-header { padding: 16px; }
  .crep-head-text p { display: none; }
  .crep-tabs { padding: 6px 12px 0; }
  .crep-tab { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  .crep-body { padding: 16px; }
  .crep-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .crep-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crep-fetch-field { grid-column: 1 / -1; }
  .crep-fetch-field .button { width: 100%; height: 44px; }
  .crep-chip { flex: 1 1 0; padding: 0 8px; height: 40px; white-space: nowrap; }
  .crep-input-box .form-input { height: 46px; }
  .crep-preview { padding: 10px; gap: 8px; }
  .crep-tile { padding: 11px 12px; }
  .crep-tile-value { font-size: 16px; }
  .crep-footer { padding: 12px 16px; flex-wrap: nowrap; }
  .crep-footer > .button { height: 44px; min-width: 0; }
  .crep-footer > [data-crep-close] { flex: 0 0 auto; padding: 0 16px; }
  .crep-footer > #crepSaveBtn { flex: 1 1 auto; }
  .crep-done-actions { flex-direction: column; width: 100%; }
  .crep-done-actions .button, .crep-again { width: 100%; height: 46px; }
  .crep-history-filter { max-width: none; }
  .crep-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .crep-item-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .crep-item-actions .button { height: 40px; }
  .crep-item-actions .icon-button { width: 40px; height: 40px; }
  .crep-confirm { grid-column: 1 / -1; justify-content: space-between; }
  .page-heading #btnOpenClientReports { order: -1; }
}
@media (max-width: 400px) {
  .crep-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .crep-inputs { grid-template-columns: minmax(0, 1fr); }
  .crep-chip { font-size: 11.5px; }
}