/* ═══════════════════════════════════════════════════════════════
   RevendasDB — "casca" de aplicativo no celular (≤ 900 px)
   Barra inferior com as áreas do sistema, como um app instalado.
   Usada por: index (Painel), crm, coleta, roteiro, whatsapp.
   O comportamento fica em /js/app-shell.js.
   ═══════════════════════════════════════════════════════════════ */

.rdb-tabbar, .rdb-mais, .rdb-mais-fundo { display: none; }

@media (max-width: 900px) {
  body.rdb-app { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px); }

  .rdb-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 6px 6px calc(6px + var(--safe-bottom));
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(15,45,74,.08);
    box-shadow: 0 -6px 24px rgba(15,45,74,.08);
  }
  [data-theme="dark"] .rdb-tabbar { background: rgba(12,30,48,.94); border-top-color: rgba(255,255,255,.06); }

  .rdb-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; padding: 0; cursor: pointer; text-decoration: none;
    font: 600 10.5px/1 var(--fonte); color: var(--texto-suave); letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent; min-height: 48px;
  }
  .rdb-tab .rdb-ico {
    width: 40px; height: 30px; border-radius: 15px; display: grid; place-items: center;
    transition: background .18s, transform .18s;
  }
  .rdb-tab svg { width: 21px; height: 21px; }
  .rdb-tab[aria-current="page"] { color: var(--cor-tab, var(--marca-primaria)); }
  .rdb-tab[aria-current="page"] .rdb-ico { background: var(--cor-tab-claro, var(--cor-azul-claro)); transform: translateY(-1px); }
  .rdb-tab:active .rdb-ico { transform: scale(.92); }

  /* Cada área com a sua cor */
  .rdb-tab[data-area="painel"]  { --cor-tab: var(--cor-azul);   --cor-tab-claro: var(--cor-azul-claro); }
  .rdb-tab[data-area="crm"]     { --cor-tab: var(--cor-roxo);   --cor-tab-claro: var(--cor-roxo-claro); }
  .rdb-tab[data-area="coleta"]  { --cor-tab: var(--cor-verde);  --cor-tab-claro: var(--cor-verde-claro); }
  .rdb-tab[data-area="roteiro"] { --cor-tab: var(--cor-ambar);  --cor-tab-claro: var(--cor-ambar-claro); }
  .rdb-tab[data-area="mais"]    { --cor-tab: var(--cor-indigo); --cor-tab-claro: var(--cor-indigo-claro); }
  /* No escuro, os tons da marca ficam escuros demais sobre a barra (≈3:1) */
  [data-theme="dark"] .rdb-tab[data-area="painel"]  { --cor-tab: #38bdf8; }
  [data-theme="dark"] .rdb-tab[data-area="crm"]     { --cor-tab: #a78bfa; }
  [data-theme="dark"] .rdb-tab[data-area="coleta"]  { --cor-tab: #34d399; }
  [data-theme="dark"] .rdb-tab[data-area="roteiro"] { --cor-tab: #fbbf24; }
  [data-theme="dark"] .rdb-tab[data-area="mais"]    { --cor-tab: #a5b4fc; }

  /* Folha "Mais" */
  .rdb-mais-fundo {
    display: block; position: fixed; inset: 0; z-index: 950; background: rgba(15,23,42,.45);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .rdb-mais {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 960;
    background: var(--card, #fff); color: var(--text, #1e293b);
    border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + var(--safe-bottom));
    transform: translateY(105%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -12px 40px rgba(0,0,0,.25); max-height: 80vh; overflow-y: auto;
  }
  body.rdb-mais-aberto .rdb-mais-fundo { opacity: 1; pointer-events: auto; }
  body.rdb-mais-aberto .rdb-mais { transform: none; }
  .rdb-mais-alca { width: 40px; height: 5px; border-radius: 3px; background: rgba(148,163,184,.5); margin: 0 auto 12px; }
  .rdb-mais h3 { font: 800 15px/1.2 var(--fonte); margin: 0 0 12px; }
  .rdb-mais-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .rdb-mais-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
    padding: 14px 6px; border-radius: 16px; text-decoration: none; color: inherit;
    background: var(--hover, #f8fafc); border: 1px solid var(--border, #e2e8f0);
    font: 600 11.5px/1.2 var(--fonte); cursor: pointer;
  }
  .rdb-mais-item .rdb-bolha { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
  .rdb-mais-item svg { width: 21px; height: 21px; }

  /* Toast/avisos das páginas não ficam atrás da barra */
  #toastWrap, .toast-wrap { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px) !important; }
}

/* App instalado (tela cheia): respeita o entalhe do iPhone */
@media (display-mode: standalone) {
  body.rdb-app { padding-top: var(--safe-top); }
}