/* Mobile CSS unificado (admin + aluno)
   Escopado por data-app para evitar interferência entre telas. */

/* ===== Conteúdo migrado de public/css/admin_responsive.css ===== */
/* Responsivo do painel admin (separado para evitar quebras no CSS principal)
   Somente regras que podem ser ajustadas sem afetar o desktop atual. */
/* Cabeçalho e botões: permitir quebra e ocupar espaçamento adequado */
body[data-app="admin"] .content-header { flex-wrap: wrap; gap: 8px; }

/* ===== Guard rails globais (evitar overflow horizontal) ===== */
html, body{ max-width: 100%; overflow-x: hidden; }
body [class*="container"],
body .main-content,
body .card{ box-sizing: border-box; max-width:  100%; }
img, table{ max-width: 100%; height: auto; }

/* ===== Breakpoints padrão do sistema ===== */
/* Laptops pequenos */
@media (max-width: 1280px){
  /* Espaços ligeiramente menores ajudam a não estourar */
  body[data-app="admin"] .main-content{ padding-left: 16px; padding-right: 16px; max-width: 100vw; }
  body[data-app="admin"] .card{ width: 100%; max-width: none; }
}

/* Tablets (retrato ou paisagem) */
@media (max-width: 1024px){
  body[data-app="admin"] .main-content{ padding-left: 14px; padding-right: 14px; }
  body[data-app="admin"] .card{ width: 100%; max-width: none; }
  body[data-app="admin"] .grid-2, body[data-app="admin"] .grid-3{ grid-template-columns: 1fr !important; }
  body[data-app="admin"] .table{ table-layout: fixed; width: 100%; }
  body[data-app="admin"] .table td a{ max-width: 60vw; }
}

/* Mobile normal (retrato) */
@media (max-width: 768px){
  body[data-app="admin"] .main-content{ overflow-x: hidden; padding-left: 12px; padding-right: 12px; max-width: 100vw; }
  body[data-app="admin"] .card{ width: 100%; }
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 140px; }
  /* Inputs e botões ocupam largura disponível */
  body[data-app="admin"] .filters-section .filter-group > *{ width: 100%; max-width: 100%; }
}

/* Mobile pequeno (muito estreitos) */
@media (max-width: 480px){
  /* Ações ainda mais compactas e sem forçar largura */
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 120px; padding-right: 8px; }
  body[data-app="admin"] .table td.col-acoes .btn{ padding: 5px 8px; font-size: 12px; }
  /* Cards e containers ocupam toda a largura visível */
  body[data-app="admin"] .main-content{ padding-left: 10px; padding-right: 10px; }
  body[data-app="admin"] .card{ margin-left: 0; margin-right: 0; width: 100%; }
  /* Modal: ocupar quase a largura total em celulares antigos */
  body[data-app="admin"] .overlay .modal{ width: 98vw; }
}

/* Esconder colunas menos críticas em telas muito estreitas (somente nas tabelas dos cards, não no modal) */
@media (max-width: 520px){
  /* Oculta a coluna de Status (3ª coluna) quando existir, apenas no conteúdo principal */
  body[data-app="admin"] .main-content .table thead th:nth-child(3),
  body[data-app="admin"] .main-content .table tbody td:nth-child(3){ display: none; }
}
@media (max-width: 420px){
  /* Oculta a coluna de CPF/extra (4ª coluna) quando existir, apenas no conteúdo principal */
  body[data-app="admin"] .main-content .table thead th:nth-child(4),
  body[data-app="admin"] .main-content .table tbody td:nth-child(4){ display: none; }
}

/* Ações mais enxutas em telas muito pequenas */
@media (max-width: 480px){
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 130px; padding-right: 8px; }
  body[data-app="admin"] .table td.col-acoes .btn{ padding: 5px 8px; font-size: 12px; }
}

/* ===== Listas em cards (Turmas, Graduação, etc.) no mobile ===== */
@media (max-width: 900px){
  /* Evitar corte dos botões à direita nas listas (pontinhos vermelhos) */
  body[data-app="admin"] .card,
  body[data-app="admin"] .card .list,
  body[data-app="admin"] .card .items,
  body[data-app="admin"] .card .rows,
  body[data-app="admin"] .card .list-group{ width: 100%; }
  /* Cada item: conteúdo à esquerda e ações à direita */
  body[data-app="admin"] .card .list .item,
  body[data-app="admin"] .card .items .item,
  body[data-app="admin"] .card .rows .row,
  body[data-app="admin"] .card .list-group .list-group-item{
    display: flex; align-items: center; gap: 8px; padding-right: 16px;
  }

  /* Ajustes estruturais gerais do modal (independente do breakpoint abaixo) */
  body[data-app="admin"] .overlay .modal,
  body[data-app="admin"] .overlay .modal .modal-content{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body[data-app="admin"] .overlay .modal .modal-content{ padding: 12px; }
  body[data-app="admin"] .overlay .modal .modal-body{
    display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%;
  }
  /* Inputs e botões ocupando toda a largura dentro do modal */
  body[data-app="admin"] .overlay .modal .modal-body input,
  body[data-app="admin"] .overlay .modal .modal-body select,
  body[data-app="admin"] .overlay .modal .modal-body button,
  body[data-app="admin"] .overlay .modal .modal-body .btn{
    width: 100% !important; max-width: 100% !important;
  }






  /* Grupo de botões (Editar/Excluir) alinhados lado a lado, dividindo espaço */
  body[data-app="admin"] .overlay .modal .button-group{ display: flex; gap: 8px; width: 100%; }
  body[data-app="admin"] .overlay .modal .button-group button,
  body[data-app="admin"] .overlay .modal .button-group .btn{ flex: 1; }

  /* Mobile normal: modal ocupa a tela inteira e bordas retas */
  @media (max-width: 768px){
    body[data-app="admin"] .overlay .modal,
    body[data-app="admin"] .overlay .modal .modal-content{
      margin: 0; border-radius: 0; height: 100vh;
    }
  }
  /* Em celulares muito estreitos, modal quase full-width e com menos padding interno */
  @media (max-width: 480px){
    body[data-app="admin"] .overlay .modal{ width: 99vw; }
    body[data-app="admin"] .overlay .modal .card{ padding-left: 8px; padding-right: 8px; }
  }
  /* Primeira área do item ocupa o espaço elástico (protege contra .row/.col) */
  body[data-app="admin"] .card .list .item > :first-child,
  body[data-app="admin"] .card .items .item > :first-child,
  body[data-app="admin"] .card .rows .row > :first-child,
  body[data-app="admin"] .card .list-group .list-group-item > :first-child,
  body[data-app="admin"] .card .list .item .row > :first-child,
  body[data-app="admin"] .card .rows .row .col:first-child{ flex: 1 1 auto; min-width: 0; }
  /* Conteúdo do item com ellipsis */
  body[data-app="admin"] .card .list .item > *,
  body[data-app="admin"] .card .items .item > *,
  body[data-app="admin"] .card .rows .row > *{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Ações à direita */
  body[data-app="admin"] .card .list .item .actions,
  body[data-app="admin"] .card .items .item .actions,
  body[data-app="admin"] .card .rows .row .actions,
  body[data-app="admin"] .card .list-group .list-group-item .actions{
    display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-left: auto; flex: 0 0 auto; min-width: 120px;
  }






  
  /* Empurrar botões/links para a direita mesmo sem wrapper .actions */
  body[data-app="admin"] .card .list .item > .btn-danger,
  body[data-app="admin"] .card .list .item > .btn,
  body[data-app="admin"] .card .list-group .list-group-item > .btn-danger,
  body[data-app="admin"] .card .list-group .list-group-item > .btn{ margin-left: auto; flex: 0 0 auto; }
  /* Botão vermelho com raio menor no mobile (evita parecer "cortado") */
  body[data-app="admin"] .card .list .item .btn-danger,
  body[data-app="admin"] .card .list-group .list-group-item .btn-danger{ border-radius: 6px; }
  /* Botões das ações compactos e sem quebra */
  body[data-app="admin"] .card .list .item .actions .btn,
  body[data-app="admin"] .card .list-group .list-group-item .actions .btn{ white-space: nowrap; min-width: 68px; padding:6px 10px; flex: 0 0 auto; }
  /* Fallback: se não houver .actions, empurra o botão vermelho com auto margin */
  body[data-app="admin"] .card .list-group .list-group-item .btn-danger{ margin-left: auto; flex: 0 0 auto; }
  /* Forçar 100% de largura e remover quaisquer limites herdados nos containers */
  body[data-app="admin"] .card .list,
  body[data-app="admin"] .card .items,
  body[data-app="admin"] .card .rows,
  body[data-app="admin"] .card .list-group,
  body[data-app="admin"] .card .list-group .list-group-item{
    width: 100% !important; max-width: none !important; box-sizing: border-box;
  }



  /* Evitar quebra interna quando existir .row/.col dentro do item */
  body[data-app="admin"] .card .list-group .list-group-item .row{ flex-wrap: nowrap !important; }
  body[data-app="admin"] .card .list-group .list-group-item .row > [class*="col"]{ min-width: 0; }
  body[data-app="admin"] .card .list-group .list-group-item .row > [class*="col"]:first-child{ flex: 1 1 auto; }
}
 

/* ===== Modal: Detalhes do aluno (mobile) ===== */
@media (max-width: 900px){
  /* Modal mais largo e com área de conteúdo rolável confortável */
  body[data-app="admin"] .overlay .modal{ width: 96vw; max-width: none; }
  body[data-app="admin"] .overlay .modal-body{
    max-height: calc(100vh - 180px); /* cabeçalho + rodapé aproximados */
    overflow: auto; padding-bottom: 16px;
  }
  body[data-app="admin"] .overlay .modal-footer{
    position: sticky; bottom: 0; background: #fff;
    padding: 10px 12px; border-top: 1px solid #e5e7eb;
  }
  /* Inputs e botões não comprimirem horizontalmente */
  body[data-app="admin"] .overlay .modal input,
  body[data-app="admin"] .overlay .modal select{ min-height: 40px; }
  body[data-app="admin"] .overlay .modal .btn{ min-height: 40px; }
  /* Espaçamento entre blocos (Matrículas, Graduação, etc.) */
  body[data-app="admin"] .overlay .modal h3,
  body[data-app="admin"] .overlay .modal h4{ margin-top: 16px; margin-bottom: 8px; }
  body[data-app="admin"] .overlay .modal .section,
  body[data-app="admin"] .overlay .modal .card{ margin-bottom: 12px; }
  /* Tabelas dentro do modal: evitar colapso e permitir ellipsis */
  body[data-app="admin"] .overlay .modal table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
  body[data-app="admin"] .overlay .modal th,
  body[data-app="admin"] .overlay .modal td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Matrículas/Graduação no modal: layout estável no mobile, sem ocultar dados */
  @media (max-width: 700px){
    /* Tabelas do modal com truncamento suave */
    body[data-app="admin"] .overlay .modal table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
    body[data-app="admin"] .overlay .modal th,
    body[data-app="admin"] .overlay .modal td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Permitir que colunas de dados no modal quebrem linha e não comprimam tudo */
    body[data-app="admin"] .overlay .modal td:not(:last-child){ white-space: normal; word-break: break-word; min-width: 0; }
    /* Inputs/selects dentro das células devem ocupar a largura disponível */
    body[data-app="admin"] .overlay .modal td input,
    body[data-app="admin"] .overlay .modal td select{ max-width: 100%; width: 100%; }
    /* Listas (ex.: Graduação/Matrículas) dentro do modal seguem o mesmo padrão dos cards */
    /* GRID para itens no modal, sem coluna de índice no mobile: [conteúdo] [ações] */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item{ 
      display: grid; grid-template-columns: 1fr minmax(120px, max-content);
      align-items: center; gap: 8px; padding-right: 12px; overflow: visible;
    }
    /* Conteúdo elástico com quebra agressiva se necessário */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item > :nth-child(1){
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal;
      overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
    }
    /* Esconde a antiga coluna de índice no mobile (
       se existir como primeiro filho) para liberar largura */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item > :first-child:has(+ *){
      display: none;
    }
    /* Ações na 2ª coluna, alinhadas à direita */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item .actions{ grid-column: 2; justify-self: end; display: inline-flex; gap: 8px; }
    /* Inputs/Selects dentro do item ocupam a largura disponível sem estourar */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item input,
    body[data-app="admin"] .overlay .modal .list-group .list-group-item select{ max-width: 100%; width: 100%; }
    /* Ações: tentam ficar à direita; se faltar espaço, vão para a linha de baixo ocupando 100% */
    /* Quando houver quebra vertical, as ações continuam na coluna 3 e alinhadas à direita */
    /* Quebras seguras em estruturas .row/.col dentro do modal */
    body[data-app="admin"] .overlay .modal .row{ flex-wrap: wrap; }
    body[data-app="admin"] .overlay .modal .row > [class*="col"]{ min-width: 0; flex: 1 1 auto; }
    body[data-app="admin"] .overlay .modal .row > [class*="col"]:last-child{ flex: 0 0 auto; }
    /* Botão vermelho direto dentro do item: empurra para a direita */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item > .btn-danger{ margin-left: auto; }
    body[data-app="admin"] .overlay .modal .list-group .list-group-item .actions .btn{ white-space: nowrap; padding: 5px 8px; font-size: 12px; }
    /* Coluna de ações um pouco maior no modal para evitar compressão */
    body[data-app="admin"] .overlay .modal td:last-child{ width: 150px; text-align: right; padding-right: 8px; }
    body[data-app="admin"] .overlay .modal td:last-child .btn{ padding: 5px 8px; font-size: 12px; white-space: nowrap; }
    /* Respira entre linhas */
    body[data-app="admin"] .overlay .modal table tbody tr > td{ padding-top: 10px; padding-bottom: 10px; }

    /* Layout "card" para tabelas do modal em telas estreitas: empilha as células */
    body[data-app="admin"] .overlay .modal table thead{ display: none; }
    /* TR em GRID no modal, sem coluna de índice no mobile: [conteúdo] [ações] */
    body[data-app="admin"] .overlay .modal table tbody tr{
      display: grid; grid-template-columns: 1fr minmax(130px, max-content);
      align-items: center; column-gap: 8px; row-gap: 6px; border-bottom: 1px solid #f0f0f0; padding: 6px 0;
    }
    body[data-app="admin"] .overlay .modal table tbody td{ white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
    /* Oculta o primeiro td (índice) no mobile para liberar largura */
    body[data-app="admin"] .overlay .modal table tbody td:first-child{ display: none; }
    /* Última coluna (ações) alinhada à direita */
    body[data-app="admin"] .overlay .modal table tbody td:last-child{ justify-self: end; display: inline-flex; gap: 8px; }

    /* Modal-body ocupa a largura total do modal para não "estreitar" conteúdo */
    body[data-app="admin"] .overlay .modal-body{ width: 100%; max-width: 100%; padding-left: 12px; padding-right: 12px; }
  }
}

/* Forçar contêineres da tabela a usarem 100% no mobile e remover espaçamento à direita */
@media (max-width: 900px){
  body[data-app="admin"] .table-container,
  body[data-app="admin"] .table-wrapper,
  body[data-app="admin"] .card:has(table),
  body[data-app="admin"] .card .table{ width: 100% !important; }
  body[data-app="admin"] .table-container{ padding-right: 0 !important; margin-right: 0 !important; }
  /* Card da lista: reduzir padding lateral para alinhar com os botões do topo */
  body[data-app="admin"] .card:has(table){ padding-left: 12px; padding-right: 0; }
  /* Alinhar a coluna Ações com o botão Buscar do topo (mesma borda direita) */
  body[data-app="admin"] .table{ margin-right: 0 !important; }
}

/* ===== Layout tabular responsivo no celular (sem quebrar visual) ===== */
@media (max-width: 600px){
  /* Layout tabular com colunas enxutas */
  body[data-app="admin"] .table{ table-layout: fixed; width: 100% !important; border-collapse: collapse; border-spacing: 0; }
  /* Oculta header no mobile para evitar sobreposição e ganhar espaço */
  body[data-app="admin"] .table thead{ display: none; }
  body[data-app="admin"] .table tbody tr{ display: table-row; }
  body[data-app="admin"] .table th, 
  body[data-app="admin"] .table td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 8px; vertical-align: middle; }
  body[data-app="admin"] .table td a{ display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Esconde a 1ª coluna (ordem) para abrir espaço */
  body[data-app="admin"] .table thead th:nth-child(1),
  body[data-app="admin"] .table tbody td:nth-child(1){ display: none; }

  /* Redistribui larguras: Nome auto, CI 80px, Ações 140px */
  body[data-app="admin"] .table thead th:nth-child(2),
  body[data-app="admin"] .table tbody td:nth-child(2){ width: auto; }
  body[data-app="admin"] .table thead th:nth-child(3),
  body[data-app="admin"] .table tbody td:nth-child(3){ width: 70px; padding-right: 12px; text-align: right; }
  body[data-app="admin"] .table thead th:last-child{ padding-right: 0; }
  body[data-app="admin"] .table tbody td:last-child{
    width: 160px; text-align: right; padding-right: 0; 
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  }

  /* Botões de ação mais compactos */
  body[data-app="admin"] .table tbody td:last-child .btn{ padding: 6px 10px; font-size: 13px; line-height: 1.2; flex: 0 0 auto; white-space: nowrap; min-width: 72px; }
  body[data-app="admin"] .table tbody td:last-child .btn.btn-danger{ padding: 6px 10px; font-size: 12.5px; flex: 0 0 auto; }
  body[data-app="admin"] .table tbody td:last-child .btn + .btn{ margin-left: 6px; }
}
/* Evitar sobreposição do título com o botão ☰ e descer a linha de ações */
@media (max-width: 992px){
  body[data-app="admin"] .content-title{ padding-left: 52px; } /* botão ~40px + espaçamento */
  body[data-app="admin"] .content-header .header-actions{ margin-top: 12px; }
}

/* Admin: grids para 1 coluna no mobile */
@media (max-width: 700px){
  body[data-app="admin"] .grid-2,
  body[data-app="admin"] .grid-3{ grid-template-columns: 1fr !important; }
  body[data-app="admin"] .main-content{ padding: 12px !important; }
  body[data-app="admin"] .card{ padding: 12px; }
  /* Botões do topo: manter 3 por linha com calc (descontando gaps) */
  body[data-app="admin"] .content-header .header-actions{ gap: 6px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-app="admin"] .content-header .header-actions > *{ min-width: 0 !important; width: 100% !important; }
  body[data-app="admin"] .content-header .header-actions .btn{ padding: 8px 10px; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* (removido) bloco temporário de prova de vida */

/* ===== M8: Tipografia otimizada para mobile ===== */
@media (max-width: 700px){
  /* Base font e line-height um pouco maiores para leitura */
  body[data-app="admin"],
  body[data-app="aluno"],
  body[data-app="saas"],
  body[data-app="home"]{ font-size: 15px; line-height: 1.5; }

  /* Títulos */
  body[data-app="admin"] .content-title,
  body[data-app="saas"] .content-title{ font-size: 22px; }
  body[data-app="home"] .hero-section h1{ font-size: 2.1rem; }
}

@media (max-width: 480px){
  /* Texto levemente menor para caber em telas mu ito estreitas */
  body[data-app="admin"],
  body[data-app="aluno"],
  body[data-app="saas"],
  body[data-app="home"]{ font-size: 14px; line-height: 1.5; }

  /* Títulos */
  body[data-app="admin"] .content-title,
  body[data-app="saas"] .content-title{ font-size: 20px; }
  body[data-app="home"] .hero-section h1{ font-size: 1.9rem; }
  /* Subtítulos e labels mais legíveis */
  body[data-app="admin"] .filter-label,
  body[data-app="saas"] .label{ font-size: 12px; }
}

/* ===== M5: Foco/ativo acessível no mobile (outline visível) ===== */
@media (max-width: 900px){
  /* Botões, inputs e links clicáveis */
  body[data-app="admin"] .btn:focus-visible,
  body[data-app="admin"] button:focus-visible,
  body[data-app="admin"] a:focus-visible,
  body[data-app="admin"] input:focus-visible,
  body[data-app="admin"] select:focus-visible,
  body[data-app="aluno"] .btn:focus-visible,
  body[data-app="aluno"] button:focus-visible,
  body[data-app="aluno"] a:focus-visible,
  body[data-app="aluno"] input:focus-visible,
  body[data-app="aluno"] select:focus-visible,
  body[data-app="saas"] .btn:focus-visible,
  body[data-app="saas"] button:focus-visible,
  body[data-app="saas"] a:focus-visible,
  body[data-app="saas"] input:focus-visible,
  body[data-app="saas"] select:focus-visible{
    outline: 2px solid #3b82f6; /* azul da marca */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
  }
  /* Itens de navegação (admin/saas) */
  body[data-app="admin"] .nav-item:focus-visible,
  body[data-app="saas"] .nav-item:focus-visible{
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  /* Estado ativo sutil para feedback tátil/visual */
  body[data-app="admin"] .btn:active,
  body[data-app="aluno"] .btn:active,
  body[data-app="saas"] .btn:active{ filter: brightness(0.98); }
}

/* ===== M4: Modais em telas muito pequenas (<=360px) ===== */
@media (max-width: 360px){
  /* Admin: overlay/modal mais compactos */
  body[data-app="admin"] .overlay .modal{ width: 96vw; max-width: none; padding: 10px; border-radius: 10px; }
  body[data-app="admin"] .overlay .modal-body{ max-height: calc(92vh - 90px); }

  /* Aluno: caixas de modal e áreas internas */
  body[data-app="aluno"] .modal .box{ width: 96vw; padding: 10px; border-radius: 10px; }
  body[data-app="aluno"] #cardBody{ max-height: calc(92vh - 56px); }
  body[data-app="aluno"] .code{ font-size: 11px; }

  /* Home: modal-content mais estreito e com margens menores */
  body[data-app="home"] .modal-content{ width: 94vw; margin: 6% auto; border-radius: 12px; }
  body[data-app="home"] .modal-header{ padding: 14px; }
}

/* ===== M3: Tap targets e inputs mais confortáveis em <=480px ===== */
@media (max-width: 480px){
  /* Botões maiores (admin/aluno/saas) */
  body[data-app="admin"] .btn,
  body[data-app="aluno"] .btn,
  body[data-app="saas"] .btn{ min-height: 40px; padding: 10px 12px; }

  /* Inputs/Selects com altura melhor para toque */
  body[data-app="admin"] input,
  body[data-app="admin"] select,
  body[data-app="aluno"] input,
  body[data-app="aluno"] select,
  body[data-app="saas"] input,
  body[data-app="saas"] select{ min-height: 40px; padding: 10px 12px; }

  /* Espaçamento entre botões de ações em tabela */
  body[data-app="admin"] .action-buttons{ gap: 10px; }

  /* Títulos um pouco menores para caber melhor */
  body[data-app="admin"] .content-title,
  body[data-app="saas"] .content-title{ font-size: 20px; }
}
body[data-app="admin"] .header-actions { flex-wrap: wrap; }

/* Aba Mensalidades: manter botões visíveis */
body[data-app="admin"] #view-mensalidades .content-header { align-items: flex-start; }
body[data-app="admin"] #view-mensalidades .header-actions { justify-content: flex-start; padding-right: 0; }
body[data-app="admin"] #view-mensalidades .header-actions .btn { flex: 0 1 auto; }

/* Filtros: linhas quebram, grupos flexíveis e inputs sem estourar a largura */
body[data-app="admin"] .filters-section { overflow-x: hidden; }
body[data-app="admin"] .filters-row { flex-wrap: wrap; }
body[data-app="admin"] .filter-group { flex: 1 1 180px; min-width: 160px; }
body[data-app="admin"] .filter-group.flex-1 { flex: 1 1 240px; }

/* Inputs/Selects/Botões mais flexíveis e sem estourar a largura */
body[data-app="admin"] .filters-section .filter-group input,
body[data-app="admin"] .filters-section .filter-group select,
body[data-app="admin"] .filters-section .filter-group button { max-width: 100%; width: 100%; flex: 1 1 auto; }

/* Grupos especiais (checkbox Agrupar por aluno e botão Filtrar) não esticam */
body[data-app="admin"] #m_group_wrap.filter-group,
body[data-app="admin"] .filters-section .filter-group:has(> button.btn.btn-primary) { flex: 0 0 auto; min-width: max-content; }

/* Breakpoints seguros */
@media (max-width: 1200px) {
  body[data-app="admin"] .content-header .header-actions { width: 100%; justify-content: flex-start; }
  /* Sidebar mais enxuta e conteúdo ajustado */
  body[data-app="admin"] .sidebar { width: 220px; }
  body[data-app="admin"] .main-content { margin-left: 220px; }
}

@media (max-width: 992px) {
  body[data-app="admin"] .filters-section .filter-group { flex: 1 1 45%; min-width: 220px; }
  body[data-app="admin"] .sidebar { width: 200px; }
  body[data-app="admin"] .main-content { margin-left: 200px; }
}

@media (max-width: 768px) {
  body[data-app="admin"] .content-header { flex-direction: column; align-items: flex-start; }
  body[data-app="admin"] .content-header .header-actions { width: 100%; justify-content: flex-start; }
  body[data-app="admin"] .content-header .header-actions .btn { flex: 1 1 auto; }

  body[data-app="admin"] .filters-section .filter-group { flex: 1 1 100%; min-width: 220px; }
  body[data-app="admin"] #m_group_wrap.filter-group { flex: 0 0 auto; }
  body[data-app="admin"] .filters-section .filter-group:has(> button.btn.btn-primary) { align-self: flex-end; }

  /* Sidebar compacta para sobrar espaço de conteúdo */
  body[data-app="admin"] .sidebar { width: 180px; }
  body[data-app="admin"] .main-content { margin-left: 180px; }

  

/* Estados quando aberto + animação suave*/
body[data-app="admin"] .sidebar-overlay{ opacity: 0; transition: opacity .25s ease; }
body[data-app="admin"].sidebar-open .sidebar-overlay{ display: block; opacity: 1; }

/* Sidebar off-canvas no mobile (forçado) */
@media (max-width: 992px){
  body[data-app="admin"] .mobile-menu-btn{ display: inline-flex !important; }
  body[data-app="admin"] .sidebar{
    position: fixed !important; top:0; left:0; height:100vh; width:250px;
    transform: translateX(-100%) !important; transition: transform .25s ease; z-index: 1101; will-change: transform;
  }
  body[data-app="admin"].sidebar-open .sidebar{ transform: translateX(0) !important; }
  body[data-app="admin"] .main-content{ margin-left: 0 !important; }
  /* Evita rolagem do fundo quando o menu está aberto */
  body.sidebar-open{ overflow: hidden !important; }
}

/* ===== Regras mobile extraidas de resources/views/admin_panel.blade.php ===== */
@media (max-width: 900px){
  body[data-app="admin"] .content-header { flex-direction: column; align-items: stretch; gap: 8px; }
  /* Grid resolve estouro com cálculo automático */
  body[data-app="admin"] .content-header .header-actions{
    width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; align-items: stretch;
  }
  body[data-app="admin"] .content-header .header-actions > *{
    min-width: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; margin: 0 !important;
  }
  body[data-app="admin"] .content-header .header-actions .btn{
    padding: 8px 10px; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100% !important; display: inline-flex; align-items: center; justify-content: center;
  }
  body[data-app="admin"] .content-header .header-actions .btn svg{ flex: 0 0 auto; }
}
@media (max-width: 900px){
  /* Filtros em 1 coluna e sem estouro */
  body[data-app="admin"] .filters-section{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  body[data-app="admin"] .filters-row{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  body[data-app="admin"] .filters-section .filter-group{ min-width: 0 !important; width: 100% !important; }
  body[data-app="admin"] .filters-section input,
  body[data-app="admin"] .filters-section select,
  body[data-app="admin"] .filters-section .btn{ width: 100%; }

  /* Status + Buscar na mesma linha (quando houver botão na mesma row) */
  body[data-app="admin"] .filters-row:has(button),
  body[data-app="admin"] .filters-row:has(.btn){
    grid-template-columns: 1fr minmax(120px, 160px);
    align-items: end;
  }
  body[data-app="admin"] .filters-row:has(button) .btn,
  body[data-app="admin"] .filters-row:has(.btn) .btn{ width: auto; }

  /* 3 na mesma linha (60/20/20): [input busca 60%][status 20%][botão 20%] */
  body[data-app="admin"] .filters-row:has(input):has(select):has(.btn){
    grid-template-columns: 3fr 1fr 1fr; /* equivalente a ~60/20/20 e não estoura com gap */
    align-items: end;
  }
  body[data-app="admin"] .filters-row:has(input):has(select):has(.btn) input{ min-width: 0; }
  body[data-app="admin"] .filters-row:has(input):has(select):has(.btn) .btn{ width: auto; }
}
/* Removido min-width forçado da tabela no mobile para não estourar */
@media (max-width: 900px){
  /* Sidebar mantida visível, mas mais estreita */
  body[data-app="admin"] .sidebar{ width: 220px; padding: 14px 0; }
  body[data-app="admin"] .logo{ padding: 0 12px 16px; }
  body[data-app="admin"] .logo-img{ max-width: 120px; height: 48px; }
  body[data-app="admin"] .logo-title{ display:block; }
  body[data-app="admin"] .nav-item{ justify-content: flex-start; padding: 10px 12px; }
  body[data-app="admin"] .nav-item .label{ display: inline; }
  body[data-app="admin"] .nav-item .icon{ margin-right: 10px; }
  body[data-app="admin"] .main-content{ margin-left: 220px; padding: 14px; }
  body[data-app="admin"] .content-header{ gap: 10px; }
  body[data-app="admin"] .header-actions .btn{ flex: 1 1 100%; }
}
@media (max-width: 600px){
  body[data-app="admin"] .main-content{ padding: 12px; }
  body[data-app="admin"] .content-title{ font-size: 20px; }
  body[data-app="admin"] .btn{ padding: 8px 12px; font-size: 14px; }
  body[data-app="admin"] .btn-primary{ width: 100%; }
}
@media (max-width: 600px){
  body[data-app="admin"] .overlay .modal{ width: 96vw; padding: 12px; }
  body[data-app="admin"] .overlay .modal-body{ max-height: calc(92vh - 100px); }
}

/* ===== Regras mobile extraidas de resources/views/aluno_panel.blade.php ===== */
@media (max-width: 700px){
  body[data-app="aluno"] .grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  body[data-app="aluno"] #cardBrickContainer iframe{ transform: scale(.94); width:108%; }
  body[data-app="aluno"] .modal .box{ width:94vw; padding:12px; max-height:92vh; }
  body[data-app="aluno"] #cardBody{ max-height: calc(92vh - 64px); }
  body[data-app="aluno"] #cardModal .box > .row:first-child strong{ font-size:16px; }
}
/* Topbar responsiva no aluno */
@media (max-width: 700px){
  body[data-app="aluno"] .topbar{ gap:8px; flex-wrap: wrap; justify-content: space-between; }
  body[data-app="aluno"] .topbar .title{ font-size:22px; }
  body[data-app="aluno"] .table-actions .btn{ flex: 1 1 auto; }
}
@media (max-width: 480px){
  body[data-app="aluno"] .table-actions .btn{ width:100%; }
  body[data-app="aluno"] .btn-icon{ justify-content:center; }
}

/* ===== Regras mobile extraídas de resources/views/saas_client_panel.blade.php ===== */
@media (max-width: 800px){
  body[data-app="saas"] .grid-2{ grid-template-columns: 1fr; }
}

/* ===== Regras mobile extraídas de resources/views/saas_panel.blade.php ===== */
@media (max-width: 1000px){
  body[data-app="saas"] .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
  body[data-app="saas"] .grid-2,
  body[data-app="saas"] .grid-3{ grid-template-columns: 1fr; }
}

/* ===== Regras mobile extraídas de resources/views/home.blade.php ===== */
@media (max-width: 768px){
  body[data-app="home"] .container{ grid-template-columns: 1fr; width: 95vw; margin: 20px 0; }
  body[data-app="home"] .hero-section h1{ font-size: 2rem; }
  body[data-app="home"] .options-section{ padding: 30px 20px; }
}

/* ===== UX de rolagem horizontal no mobile (tabelas/listas) ===== */
@media (max-width: 900px){
  /* Admin: container de tabelas */
  body[data-app="admin"] .table-container{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  body[data-app="admin"] .table-container::-webkit-scrollbar{ height: 8px; }
  body[data-app="admin"] .table-container::-webkit-scrollbar-track{ background: #f3f4f6; }
  body[data-app="admin"] .table-container::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 8px; }

  /* Fallback: quando tabela não está dentro de .table-container */
  body[data-app="admin"] table.table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-app="aluno"] #mensalidadesOut::-webkit-scrollbar,
  body[data-app="aluno"] #gradHistorico::-webkit-scrollbar{ height: 8px; }
  body[data-app="aluno"] #mensalidadesOut::-webkit-scrollbar-track,
  body[data-app="aluno"] #gradHistorico::-webkit-scrollbar-track{ background: #f3f4f6; }
  body[data-app="aluno"] #mensalidadesOut::-webkit-scrollbar-thumb,
  body[data-app="aluno"] #gradHistorico::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 8px; }
}

/* ===== M7: Refinos de tabelas no mobile (truncamento com ellipsis) ===== */
@media (max-width: 900px){
  /* Garantia adicional no mobile */
  body[data-app="admin"] .table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
  /* Admin: aplica ellipsis em células, exceto coluna de ações */
  body[data-app="admin"] .table th,
  body[data-app="admin"] .table td:not(.col-acoes){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* permite truncar sem comprimir a linha inteira */
  }
  /* Mantém ações visíveis */
  body[data-app="admin"] .table td.col-acoes{ white-space: nowrap; }
  /* Alinhar coluna de ações ao padrão do topo e reservar espaço mínimo */ 
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 140px; text-align: right; padding-right: 6px; }
  body[data-app="admin"] .table th.col-acoes{ width: 140px; text-align: right; padding-right: 6px; }
 
  /* Tipografia e espaçamento menores para caber melhor */
  body[data-app="admin"] .table th,
  body[data-app="admin"] .table td{ padding: 6px 8px; font-size: 12.5px; }
  /* Links dentro da célula com truncamento e largura relativa */
  body[data-app="admin"] .table td a{
    display: inline-block; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Botões de ação levemente menores para caber melhor */
  body[data-app="admin"] .table td.col-acoes .btn{ padding: 5px 9px; font-size: 12.5px; line-height: 1.2; margin-right: 0; }
  /* Aluno: nas mensalidades, aplica ellipsis nas 3 primeiras colunas */
  body[data-app="aluno"] #mensalidadesOut table td:nth-child(-n+3),
  body[data-app="aluno"] #mensalidadesOut table th:nth-child(-n+3){
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body[data-app="aluno"] #gradHistorico table td,
  body[data-app="aluno"] #gradHistorico table th{
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}






/* ===== FINALIZAÇÃO (mobile/tablet) – regras específicas ===== */

/* 1) Filtros (Alunos): 50% | 30% | 20% somente na linha .compact (600–900px) */
@media (min-width: 600px) and (max-width: 900px){
    body[data-app="admin"] .filters-section .filters-row.compact{
      display: grid !important;
      grid-template-columns: minmax(300px, 50%) minmax(200px, 30%) minmax(160px, 20%) !important;
      gap: 8px; align-items: end; width: 100%;
    }
    body[data-app="admin"] .filters-section .filters-row.compact > .filter-group{ min-width: 0 !important; }
    body[data-app="admin"] .filters-section .filters-row.compact input,
    body[data-app="admin"] .filters-section .filters-row.compact select,
    body[data-app="admin"] .filters-section .filters-row.compact .btn{
      width: 100%; max-width: 100%; box-sizing: border-box;
    }
    body[data-app="admin"] .filters-section .filters-row.compact .btn{
      white-space: nowrap; min-width: 160px;
    }
  }
  
  /* 2) Detalhes do aluno > Gerar mensalidade pendente (linha com 4 blocos) */
  @media (max-width: 1400px){
    /* Linha onde estão Mês, Ano, Valor, Botões (em admin_panel.blade.php linhas 2664–2680) */
    body[data-app="admin"] #modalDetalhes .card .row{
      display: flex !important; flex-wrap: wrap; gap: 12px; align-items: end;
    }
    /* Mês e Ano lado a lado (35% + 35%), com mínimo para não “apertar” */
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(1),
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(2){
      flex: 0 0 calc(35% - 6px) !important; max-width: calc(35% - 6px) !important;
      min-width: 140px; box-sizing: border-box;
    }
    /* Valor ocupa 100% na linha seguinte */
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(3){
      flex: 0 0 100% !important; max-width: 100% !important;
    }
    /* Botões ocupam 100% na linha seguinte (lado a lado, mesma altura) */
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(4){
      flex: 0 0 100% !important; max-width: 100% !important;
      display: inline-flex !important; gap: 8px; flex-wrap: nowrap;
    }
    body[data-app="admin"] #modalDetalhes #qg_mes,
    body[data-app="admin"] #modalDetalhes #qg_ano,
    body[data-app="admin"] #modalDetalhes #qg_valor{
      width: 100% !important; max-width: 100% !important;
    }
  }
  
  /* 3) Consolidação: ações em listas/cards (empurra à direita e compacta) */
  @media (max-width: 900px){
    body[data-app="admin"] .card .list .item > .btn,
    body[data-app="admin"] .card .list .item > .btn-danger,
    body[data-app="admin"] .card .list-group .list-group-item > .btn,
    body[data-app="admin"] .card .list-group .list-group-item > .btn-danger{
      margin-left: auto; flex: 0 0 auto;
    }
    body[data-app="admin"] .card .list .item .actions .btn,
    body[data-app="admin"] .card .list-group .list-group-item .actions .btn{
      white-space: nowrap; min-width: 68px; padding: 6px 10px; flex: 0 0 auto;
    }
  }

  /* ===== Modal Detalhes: expandir Matrículas e Graduação (mobile) ===== */
@media (max-width: 900px){
    /* Contêineres ocupam toda a largura útil */
    body[data-app="admin"] #modalDetalhes #qd_matriculas,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes{
      width: 100% !important; max-width: 100% !important;
    }
  
    /* Tabelas desses blocos: layout auto e SEM grid/card */
    body[data-app="admin"] #modalDetalhes #qd_matriculas table,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes table{
      table-layout: auto !important; width: 100% !important; border-collapse: collapse;
    }
    /* Garante que o thead apareça (desfaz ocultação global do mobile) */
    body[data-app="admin"] #modalDetalhes #qd_matriculas thead,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes thead{
      display: table-header-group !important;
    }
    /* Desfaz conversão para grid/“cartões” nessas linhas específicas */
    body[data-app="admin"] #modalDetalhes #qd_matriculas tbody tr,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes tbody tr{
      display: table-row !important;
    }
  
    /* Células com quebra normal: mostram o conteúdo inteiro */
    body[data-app="admin"] #modalDetalhes #qd_matriculas th,
    body[data-app="admin"] #modalDetalhes #qd_matriculas td,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes th,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td{
      white-space: normal !important;
      word-break: break-word;
      overflow: visible;
      min-width: 0;
    }
  
    /* Links nessas tabelas: sem limite de largura */
    body[data-app="admin"] #modalDetalhes #qd_matriculas td a,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td a{
      max-width: none !important; white-space: normal !important;
    }
  
    /* Coluna de ações: mantém botões numa linha, sem esmagar as outras colunas */
    body[data-app="admin"] #modalDetalhes #qd_matriculas td:last-child,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td:last-child{
      white-space: nowrap; text-align: right;
    }
    body[data-app="admin"] #modalDetalhes #qd_matriculas td:last-child .btn,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td:last-child .btn{
      white-space: nowrap; min-width: 72px;
    }
  }

  /* ===== Modal Detalhes: garantir largura TOTAL só para Matrículas e Graduação ===== */
@media (max-width: 900px){
    /* Se estiverem dentro de .row/.col: força a coluna desses blocos a ocupar 100% */
    body[data-app="admin"] #modalDetalhes .row:has(#qd_matriculas) > *,
    body[data-app="admin"] #modalDetalhes .row:has(#qd_graduacoes) > *{
      flex: 1 1 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
    }
  
    /* Se o pai for grid, faz o bloco atravessar todas as colunas (1 até o fim) */
    body[data-app="admin"] #modalDetalhes *:has(> #qd_matriculas),
    body[data-app="admin"] #modalDetalhes *:has(> #qd_graduacoes){
      grid-column: 1 / -1 !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  
    /* O próprio container dos dados ocupa 100% e não herda limites */
    body[data-app="admin"] #modalDetalhes #qd_matriculas,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes{
      width: 100% !important;
      max-width: 100% !important;
      align-self: stretch !important;
    }
  
    /* Tabelas desses blocos: largura total, sem compressão */
    body[data-app="admin"] #modalDetalhes #qd_matriculas table,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes table{
      table-layout: auto !important;
      width: 100% !important;
      max-width: 100% !important;
    }