/* ============================================================
   mobile.css — camada mobile nativa (carregada só em ≤860px)
   Componentes e ajustes exclusivos do mobile. Mantém o desktop intacto.
   ============================================================ */

/* ---------- Bottom tab bar ---------- */
.crm-tabbar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
}
.crm-tabbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  min-width: 0;
  text-decoration: none;
  color: #64748b;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.crm-tabbar-item:active { transform: scale(0.94); }
.crm-tabbar-ic {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.crm-tabbar-ic svg, .crm-tabbar-ic img { width: 23px; height: 23px; object-fit: contain; }
.crm-tabbar-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.crm-tabbar-item.is-active { color: #3461f0; }
.crm-tabbar-item.is-active .crm-tabbar-ic { background: rgba(52, 97, 240, 0.12); border-radius: 12px; }

/* Espaço para o conteúdo não ficar atrás da tab bar; FAB do assistente acima dela */
.layout .content { padding-bottom: 76px !important; }
.crm-assistant-fab { bottom: 84px; }
.crm-assistant-panel { bottom: 150px; }

/* Dark mode */
html[data-theme="dark"] .crm-tabbar {
  background: rgba(17, 24, 39, 0.9);
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .crm-tabbar-item { color: #94a3b8; }
html[data-theme="dark"] .crm-tabbar-item.is-active { color: #6ea0ff; }
html[data-theme="dark"] .crm-tabbar-item.is-active .crm-tabbar-ic { background: rgba(79, 123, 255, 0.18); }

/* ---------- Bottom sheets (menus portados ao body) ---------- */
@keyframes crmSheetUp { from { transform: translateY(100%); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
body > [data-portaled-menu] {
  position: fixed !important;
  top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; max-width: 100% !important;
  max-height: 82vh !important; overflow-y: auto;
  border-radius: 22px 22px 0 0 !important;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -18px 50px rgba(15, 23, 42, 0.28) !important;
  z-index: 6000 !important;
  animation: crmSheetUp .24s cubic-bezier(.2, .8, .2, 1) both !important;
}
body > [data-portaled-menu][hidden] { display: none !important; }
body > [data-portaled-menu]::before {
  content: "" !important; display: block; width: 38px; height: 4px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.18); margin: 2px auto 12px;
}
html[data-theme="dark"] body > [data-portaled-menu]::before { background: rgba(255, 255, 255, 0.22); }

/* O menu de moeda usa .is-open (não [hidden]) — quando portado, vira sheet só ao abrir */
body > .crm-currency-menu[data-portaled-menu] { visibility: hidden; }
body > .crm-currency-menu[data-portaled-menu].is-open { visibility: visible; transform: translateY(0) !important; }

/* Backdrop atrás do bottom sheet aberto (fecha ao tocar fora) */
@keyframes crmFadeIn { from { opacity: 0; } to { opacity: 1; } }
body:has(> [data-portaled-menu]:not([hidden]):not(.crm-currency-menu))::before,
body:has(> .crm-currency-menu[data-portaled-menu].is-open)::before {
  content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42);
  z-index: 5999; animation: crmFadeIn .2s ease both;
}

/* ---------- Tabelas: rolagem lateral premium (1ª coluna fixa) ---------- */
.crm-table-wrap, .crm-table-wrap-premium { position: relative; }
/* primeira coluna (identificador) fica fixa ao rolar horizontalmente */
.crm-table thead th:first-child,
.crm-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--shell-card, #ffffff);
  box-shadow: 6px 0 12px -8px rgba(15, 23, 42, 0.18);
}
.crm-table thead th:first-child { z-index: 4; }
/* scrollbar discreta */
.crm-table-wrap::-webkit-scrollbar, .crm-table-wrap-premium::-webkit-scrollbar { height: 6px; }
.crm-table-wrap::-webkit-scrollbar-thumb, .crm-table-wrap-premium::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.22); border-radius: 999px;
}
html[data-theme="dark"] .crm-table thead th:first-child,
html[data-theme="dark"] .crm-table tbody td:first-child { background: #111827; }
html[data-theme="dark"] .crm-table-wrap::-webkit-scrollbar-thumb,
html[data-theme="dark"] .crm-table-wrap-premium::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); }