/**
 * IBEC Horizon — Camada responsiva global (v7A.9.21.52).
 *
 * Conserta os quebra-galhos mais comuns no celular sem reescrever cada tela:
 * tabelas largas com rolagem, toolbars/filtros que quebram em coluna, formulários
 * em coluna única, modais em tela cheia e alvos de toque adequados.
 *
 * Carregada por último (front e wp-admin) para sobrepor os estilos base.
 * Tudo dentro de @media para não afetar o desktop.
 */

/* Tab bar inferior (mobile) e folha "Mais": ocultas no desktop por padrão.
   Só aparecem dentro do @media (max-width: 640px) abaixo. */
.etm-mobile-tabbar,
.etm-mobile-sheet { display: none; }

/* ───────────── Tablets e celulares (≤ 980px) ───────────── */
@media (max-width: 980px) {
  /* Tabelas largas: rolagem horizontal suave em vez de espremer/estourar. */
  .etm-manage-table,
  .ibec-portal-table,
  .ibec-instructor-agenda-table,
  .widefat.striped,
  .etm-table-wrap > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .etm-table-wrap,
  .ibec-portal-table-wrap,
  .etm-manage-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Toolbars e filtros quebram em coluna. */
  .etm-manage-toolbar,
  .etm-manage-toolbar-actions,
  .etm-students-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .etm-manage-search,
  .etm-students-filter-form,
  .etm-manage-search-wide {
    flex-wrap: wrap;
    width: 100%;
  }
  .etm-manage-search input,
  .etm-manage-search select,
  .etm-manage-search-wide input,
  .etm-manage-search-wide select {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ───────────── Celulares (≤ 640px) ───────────── */
@media (max-width: 640px) {
  /* Formulários em coluna única. */
  .etm-manage-form-grid,
  .ibec-si-link-grid {
    grid-template-columns: 1fr !important;
  }
  .etm-span-2,
  .etm-manage-form-grid .full {
    grid-column: 1 / -1 !important;
  }

  /* KPIs/cards do painel: 2 por linha (em vez de espremer). */
  .etm-front-grid-cards,
  .ibec-student-kpis--v2,
  .etm-manage-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* KPIs do painel gerencial: cards compactos no celular.
     (no desktop são linhas altas com seta; aqui viram blocos baixos 2-a-2) */
  .etm-manage-stat--linked {
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "icon value"
      "icon label" !important;
    column-gap: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .etm-manage-stat-arrow {
    display: none !important;
  }
  .etm-manage-stat-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }
  .etm-manage-stat-icon .etm-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .etm-manage-stat--linked .etm-manage-stat-value {
    font-size: 22px !important;
  }
  .etm-manage-stat--linked .etm-manage-stat-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Alvos de toque adequados + botões mais largos. */
  .etm-manage-btn,
  .etm-manage-btn-light,
  .etm-manage-btn-warning,
  .etm-manage-btn-sm {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .etm-manage-toolbar-actions .etm-manage-btn,
  .etm-students-actions .etm-manage-btn,
  .etm-students-actions .etm-manage-btn-light {
    flex: 1 1 100%;
  }
  .etm-manage-toolbar-actions form.etm-bulk-access-form {
    flex: 1 1 100%;
  }
  .etm-manage-toolbar-actions form.etm-bulk-access-form .etm-manage-btn {
    width: 100%;
  }

  /* Modais inline em quase tela cheia. */
  #ibec-add-student-modal > div,
  #ibec-mc-modal > div,
  .ibec-si-modal,
  .ibec-serpro-modal,
  .etm-batch-modal__dialog,
  .etm-modal-dialog,
  .etm-drawer-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 12px auto !important;
    border-radius: 14px !important;
  }
  .ibec-si-body,
  .ibec-serpro-modal__body {
    padding: 16px !important;
  }

  /* Reduz respiros laterais grandes. */
  .etm-manage-card {
    padding: 14px !important;
  }
  .etm-manage-shell,
  .ibec-horizon-portal {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Cabeçalho da agenda do professor: empilha. */
  .etm-agenda-row td > div h3 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Tabela de mapeamento do smart-import: rola. */
  .ibec-si-mapping-table,
  .ibec-si-sample table,
  .ibec-serpro-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ─────── Navegação estilo app: tab bar fixa no rodapé ───────
     A sidebar do painel é ocultada e vira uma barra inferior fixa
     com os principais + "Mais" (folha com a lista completa). */
  .etm-manage-shell--v2 .etm-manage-sidebar {
    display: none !important;
  }
  .etm-manage-main {
    /* espaço para o conteúdo não ficar atrás da barra fixa */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.etm-sheet-open {
    overflow: hidden !important;
  }

  .etm-mobile-tabbar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    background: #0B1F4D;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 18px rgba(11, 31, 77, .22);
  }
  .etm-mtab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    min-height: 56px;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    position: relative;
  }
  .etm-mtab .etm-icon {
    width: 22px;
    height: 22px;
  }
  .etm-mtab__label {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .etm-mtab.is-active {
    color: #fff;
  }
  .etm-mtab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #FFC72C;
  }
  .etm-mtab__dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #0B1F4D;
  }

  /* Folha "Mais" (bottom sheet) */
  .etm-mobile-sheet:not([hidden]) {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 10000;
  }
  .etm-mobile-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 40, .55);
  }
  .etm-mobile-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(8, 15, 40, .3);
    animation: etm-sheet-up .22s ease;
  }
  @keyframes etm-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .etm-mobile-sheet__handle {
    width: 42px;
    height: 4px;
    border-radius: 3px;
    background: #d1d5db;
    margin: 4px auto 12px;
    cursor: pointer;
  }
  .etm-mobile-sheet__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .etm-mobile-sheet__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 12px;
    border-radius: 12px;
    background: #f4f6fb;
    color: #0B1F4D;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    position: relative;
  }
  .etm-mobile-sheet__item .etm-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .etm-mobile-sheet__item.is-active {
    background: #0B1F4D;
    color: #fff;
  }
  .etm-mobile-sheet__item--logout {
    color: #b91c1c;
    background: #fef2f2;
  }
}

/* ───────────── Telas bem pequenas (≤ 400px) ───────────── */
@media (max-width: 400px) {
  .etm-front-grid-cards,
  .ibec-student-kpis--v2 {
    grid-template-columns: 1fr !important;
  }
}