/* =========================================================
   ESTRUTURA RESPONSIVA
   Computador (≥ 1100px): menu lateral fixo
   Tablet (721–1099px): abas em pílulas roláveis abaixo da barra superior
   Celular (≤ 720px): barra de navegação inferior com ícones
========================================================= */

/* ---------- Computador ---------- */
#appRoot.app{
  max-width: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-areas: "top top" "nav main";
  grid-template-rows: auto 1fr;   /* evita que a barra e as abas estiquem em telas curtas */
  min-height: 100vh;
}
#appRoot > .topbar{ grid-area: top; }
#appRoot > .tabs{
  grid-area: nav;
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 20px 14px;
  background: var(--paper-raised);
  border-bottom: none; border-right: 1px solid var(--line);
  overflow-y: auto;
}
#appRoot > .tab-panel{
  grid-area: main;
  width: 100%; max-width: 1080px;
  padding: 32px 40px 72px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1099px){
  #appRoot.app{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "nav" "main";
    grid-template-rows: auto auto 1fr;
  }
  #appRoot > .tabs{
    position: sticky; top: var(--topbar-h); z-index: 120;
    height: auto;
    flex-direction: row; gap: 6px;
    padding: 10px 20px;
    border-right: none; border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  #appRoot > .tabs::-webkit-scrollbar{ display: none; }
  #appRoot .tab-btn{ width: auto; flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; gap: 8px; }
  #appRoot .tab-btn .tab-icon svg{ width: 19px; height: 19px; }
  #appRoot > .tab-panel{ max-width: none; padding: 24px 24px 64px; }
  .notif-panel{ max-width: calc(100vw - 24px); }
  #platformAdminRoot .report-table{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Celular ---------- */
@media (max-width: 720px){
  :root{ --topbar-h: 58px; }
  body{ font-size: 16px; }

  .topbar{ padding: 0 12px 0 14px; gap: 10px; }
  .brand-mark{ width: 34px; height: 34px; }
  .brand-text > span, .user-meta{ display: none; }
  .brand-text strong{ font-size: 15.5px; }
  .user-chip{ border: none; padding: 0; gap: 4px; }

  #appRoot > .tabs{
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 160;
    height: auto; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-bottom: none; border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -4px 16px rgba(28, 36, 48, .06);
  }
  #appRoot .tab-btn{
    flex: 1 0 68px;
    flex-direction: column; justify-content: center; gap: 3px;
    padding: 4px 2px; border-radius: 12px;
    font-size: 11.5px; font-weight: 700; line-height: 1.2;
    background: none; text-align: center;
  }
  #appRoot .tab-btn:hover{ background: none; }
  #appRoot .tab-btn.active{ background: none; color: var(--brand); }
  #appRoot .tab-btn .tab-icon{ padding: 3px 16px; border-radius: 999px; transition: background-color .15s ease; }
  #appRoot .tab-btn.active .tab-icon{ background: var(--brand-soft); }
  #appRoot .tab-btn .tab-icon svg{ width: 22px; height: 22px; }
  .tab-label{ display: none; }
  .tab-short{ display: block; white-space: nowrap; }

  #appRoot > .tab-panel{
    padding: 18px 14px calc(var(--bottomnav-h) + 32px + env(safe-area-inset-bottom));
  }
  .toast{ bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); text-align: center; }
  .notif-panel{ position: fixed; top: calc(var(--topbar-h) + 6px); left: 8px; right: 8px; width: auto; max-width: none; max-height: 70vh; }

  /* Cabeçalhos e ações */
  .toolbar{ flex-direction: column; align-items: stretch; gap: 12px; }
  .booklet-title{ font-size: 22px; }
  .toolbar-actions{ width: 100%; }
  .toolbar-actions .btn{ flex: 1 1 auto; }
  .btn{ min-height: 44px; white-space: normal; }
  .home-more{ width: 100%; }
  .summary-hint{ display: none; }

  /* Campos: 16px evita o zoom automático do iPhone */
  input, select, textarea{ font-size: 16px !important; }
  .form-row, .report-grid{ grid-template-columns: 1fr; }
  .stat-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card .stat-value{ font-size: 26px; }

  /* Programação */
  .pub-header, .pub-sub{ padding-left: 16px; padding-right: 16px; }
  .section-band{ padding: 9px 16px; }
  .part{ padding: 12px 16px; }
  .ro-part{ grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .ro-part > div:first-child{ display: none; }
  .ro-week-banner{ padding: 11px 16px; }
  .fs-day-row{ grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .fs-day-name{ padding-top: 0; }
  .segmented{ display: flex; width: 100%; }
  .segmented button{ flex: 1; }
  .dropdown{ width: min(290px, calc(100vw - 40px)); }

  /* Tabelas com rolagem própria, sem empurrar a página */
  .report-table{ display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Cartões */
  .member-card, .territory-card, .fs-group-card{ padding: 14px 16px; }
  .report-card-header{ padding: 12px 16px; flex-wrap: wrap; }
  .rc-row{ padding: 12px 16px; }
  .pcard-section{ padding: 14px 16px; }

  /* Janela do cartão vira painel que sobe de baixo */
  .modal-overlay{ padding: 0; align-items: flex-end; }
  .modal-box{ border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; }
  .modal-head{ border-radius: 20px 20px 0 0; position: sticky; top: 0; z-index: 1; }

  /* Painel da plataforma */
  #platformAdminRoot{ padding: 20px 14px 48px; }
}