/* Modo compacto (pedido do cliente, 29/09) - so' tem efeito quando
   <html> tem a classe "modo-compacto" (ativada na tela de login, so'
   oferecida em celular - ver js/deviceMode.js). Layout normal (tablet/
   desktop) continua 100% inalterado sem essa classe. */

/* Cabecalho vira 2 linhas EXPLICITAS (nao um flex-wrap "solto" que deixa
   um botao isolado sozinho numa 3a linha): marca no topo, todos os
   controles (sino, usuario, idioma, tema, sair) embaixo, tendo a largura
   toda do cabecalho pra se organizar sozinhos em ate' 2 fileiras. */
html.modo-compacto .app-header {
  padding: 0.5rem 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

/* So' o icone do dente no cabecalho, sem o texto "Portal do Consultorio"
   - economiza a linha inteira que antes quebrava o layout. */
html.modo-compacto .app-header .brand h1 {
  display: none;
}

html.modo-compacto .app-header .actions {
  width: 100%;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

html.modo-compacto .user-info {
  font-size: 0.78rem;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.modo-compacto .app-header select,
html.modo-compacto .app-header button.secondary {
  font-size: 0.78rem;
  padding: 0.3rem 0.4rem;
}

/* Menu de abas: em vez de quebrar linha ou cortar (Configuracoes Gerais
   sumindo da tela), vira uma faixa com rolagem horizontal - padrao comum
   em apps de celular (arrastar pros lados pra ver mais abas). */
html.modo-compacto nav.tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.75rem;
  gap: 0.3rem;
}

html.modo-compacto nav.tabs button {
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

html.modo-compacto .refresh-btn {
  width: 2.6rem;
  height: 2.6rem;
}

html.modo-compacto .refresh-btn svg {
  width: 1.4rem;
  height: 1.4rem;
}

html.modo-compacto main {
  padding: 0.75rem;
}

html.modo-compacto .toolbar {
  flex-wrap: wrap;
}

html.modo-compacto .toolbar input[type="search"] {
  max-width: none !important;
  flex-basis: 100%;
}

/* Tabela -> lista de cartoes empilhados (padrao "responsive table"): cada
   <tr> vira um cartao, cada <td> mostra o rotulo da coluna (data-label,
   preenchido no JS) na frente do valor. So' se aplica a tabelas marcadas
   com a classe "tabela-compacta" (pedido inicial: Agenda + Pacientes). */
@media (max-width: 640px) {
  html.modo-compacto table.tabela-compacta,
  html.modo-compacto table.tabela-compacta thead,
  html.modo-compacto table.tabela-compacta tbody,
  html.modo-compacto table.tabela-compacta th,
  html.modo-compacto table.tabela-compacta td,
  html.modo-compacto table.tabela-compacta tr {
    display: block;
    width: 100%;
  }

  html.modo-compacto table.tabela-compacta thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  html.modo-compacto table.tabela-compacta tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.6rem;
  }

  /* Linhas de cabecalho de agrupamento por mes (month-group-header, ver
     monthGroups.js) continuam com aparencia de faixa inteira, nao de
     cartao com rotulos - ja tem o proprio estilo. */
  html.modo-compacto table.tabela-compacta tr.month-group-header {
    border: none;
    padding: 0;
    margin-bottom: 0.3rem;
  }
  html.modo-compacto table.tabela-compacta tr.month-group-header td {
    padding: 0;
  }

  html.modo-compacto table.tabela-compacta td {
    border: none;
    padding: 0.3rem 0 0.3rem 42%;
    position: relative;
    text-align: left;
    min-height: 1.4rem;
  }

  html.modo-compacto table.tabela-compacta td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 38%;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: normal;
  }

  /* Celula sem rotulo (ex.: acoes/botoes) ocupa a linha toda, sem recuo. */
  html.modo-compacto table.tabela-compacta td:not([data-label]) {
    padding-left: 0;
  }
}