/* NitHub — Camada adaptativa mobile (PWA) — segue FUNDAMENTOS_NIT/design-system/padrao-mobile.md
 * Não cria telas duplicadas, mas adapta as mesmas telas para toque com paridade 100%.
 * Incluído depois de dashboard-netflix.css / helpdesk.css / agendamentos.css para vencer por cascata.
 */

/* 1. Toch targets 44×44 mínimo para todo interativo em mobile */
@media (max-width: 768px) {
  .nf-btn,
  .nf-icon-btn,
  .nf-nav__link,
  .hd-turno__btn,
  .ag-cal__evento,
  .ag-participante-chip__remover,
  .ag-participante-chip__opcional {
    min-height: 44px;
    min-width: 44px;
  }
  .nf-icon-btn { width: 44px; height: 44px; }
  .nf-nav__link { padding: 10px 14px; }
}

/* 2. Topbar adaptativa em mobile:
   - .nf-nav (nav real do desktop) fica sempre fora da tela — a bottom nav já cobre Início/Chamados/Salas/Perfil.
   - #mobileHamburger é reposicionado no HTML para dentro de .nf-topbar__right (no lugar da foto de perfil).
     Ele some só a foto/menu secundário; a ação principal da página (Abrir chamado/Novo chamado/Reservar sala)
     continua solta e visível ao lado.
   - mobile.js reparenta pra dentro de #topbarMenuPanel (sem duplicar elemento/handler) o que hoje já existe
     no topbar: Perfil, Alertas, ações secundárias da página e Sair — e restaura tudo se a tela virar desktop. */
.nf-topbar__hamburger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--color-borda);
  background: var(--color-bg);
  border-radius: 10px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-texto);
}
.nf-topbar__menuPanel { display: none; }
@media (max-width: 860px) {
  .nf-topbar { padding: 0 14px; }
  .nf-topbar__left { gap: 10px; }
  .nf-topbar__right { gap: 8px; }
  .nf-topbar__hamburger { display: inline-flex; }
  .nf-nav {
    position: fixed;
    top: var(--nf-topbar-height);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-borda);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 6px;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 60;
  }
  .nf-nav__link { width: 100%; justify-content: flex-start; }

  /* Painel do novo menu (Perfil, Alertas, ações secundárias, Sair) */
  .nf-topbar__menuPanel {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px;
    min-width: 240px;
    max-width: calc(100vw - 28px);
    background: var(--color-surface);
    border: 1px solid var(--color-borda);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    padding: 8px;
    flex-direction: column;
    gap: 2px;
    z-index: 60;
  }
  .nf-topbar__menuPanel.is-open { display: flex; }

  .nf-topbar__menuPanel .nf-profile {
    background: transparent;
    border: 0;
    padding: 10px;
  }
  .nf-topbar__menuPanel .nf-profile__meta { display: grid; }

  .nf-topbar__menuPanel > * {
    width: 100%;
    min-height: 44px;
  }
  .nf-topbar__menuPanel .nf-btn,
  .nf-topbar__menuPanel .nf-nav__link,
  .nf-topbar__menuPanel .hd-alertas__btn,
  .nf-topbar__menuPanel #logoutBtn {
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--color-texto);
    box-shadow: none;
    padding: 10px;
  }
  .nf-topbar__menuPanel .nf-btn:hover,
  .nf-topbar__menuPanel .nf-nav__link:hover,
  .nf-topbar__menuPanel .hd-alertas__btn:hover,
  .nf-topbar__menuPanel #logoutBtn:hover {
    background: var(--color-bg);
  }
  .nf-topbar__menuPanel #logoutBtn { color: var(--color-marca); }

  /* helpdesk.css espreme .hd-alertas__btn pra virar quadrado só-ícone em telas
     estreitas (era pensado pra caber ao lado de Sair/Perfil na fileira horizontal).
     Dentro do painel vertical não tem mais esse aperto — texto volta a aparecer. */
  .nf-topbar__menuPanel .hd-alertas__btn {
    width: 100%;
    font-size: 0.88rem;
  }
  .nf-topbar__menuPanel .hd-alertas__btn i { font-size: 14px; }
  .nf-topbar__menuPanel .hd-alertas__painel { left: 0; right: auto; }
  .nf-topbar__menuPanel .nf-topbar__menuLabel { margin-left: 10px; font-weight: 600; }
  .nf-topbar__menuPanel > * + * { border-top: 1px solid var(--color-borda); }
}

/* 3. Bottom nav dedicada (padrão mobile NIT) — barra inferior para destinos principais */
.nf-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--color-borda);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  z-index: 55;
  gap: 6px;
}
.nf-bottom-nav__link {
  flex: 1;
  display: grid; place-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-texto-muted);
  font-size: 10px; font-weight: 700;
  line-height: 1;
}
.nf-bottom-nav__link i { font-size: 16px; }
.nf-bottom-nav__link.is-active {
  color: var(--color-marca);
  background: var(--color-marca-suave);
  border-radius: 999px;
  margin: 0 2px;
}
@media (max-width: 768px) {
  .nf-bottom-nav { display: flex; }
  /* dá respiro para não ficar atrás da barra */
  .nf-browse, .hd-page, .ag-page { padding-bottom: 78px; }
}

/* 4. Modais viram tela cheia / bottom sheet em mobile */
@media (max-width: 768px) {
  .nf-modal__panel,
  .hd-modal__panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: 0;
  }
  .hd-modal__panel--wide, .ag-cal-modal-panel { width: 100vw; max-height: 100dvh; }
  .ag-cal__grid { min-width: 620px; }
  .ag-cal__scroll { max-height: 52vh; }
  .ag-form-row { grid-template-columns: 1fr; }
}

/* 5. Tabelas densas → cards (admin) */
@media (max-width: 720px) {
  .nf-table-wrap { border: 0; background: transparent; box-shadow: none; }
  .nf-table, .nf-table thead, .nf-table tbody, .nf-table tr, .nf-table th, .nf-table td { display: block; width: 100%; }
  .nf-table thead { display: none; }
  .nf-table tbody tr {
    background: var(--color-surface);
    border: 1px solid var(--color-borda);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: var(--nf-shadow-warm-soft);
  }
  .nf-table td {
    display: flex; justify-content: space-between; align-items: center;
    border: 0; padding: 8px 0;
    border-bottom: 1px dashed var(--color-borda);
  }
  .nf-table td:last-child { border-bottom: 0; }
  .nf-table td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--color-texto-suave);
  }
  .nf-table--users td::before { content: attr(data-label); }
}

/* 6. Dashboard: carrossel vira coluna única já existe (700px), reforça gap */
@media (max-width: 520px) {
  .nf-sys-grid { grid-template-columns: 1fr; gap: 12px; }
  .nf-row__track { padding: 8px 14px 10px; }
}

/* 7. Melhorias de gesto: puxar para atualizar visual (complementar, não único) */
.ag-page, .hd-page { overscroll-behavior-y: contain; }

/* 8. Dashboard: densidade e consistência de raio nos cards (lista estilo app) */
@media (max-width: 520px) {
  /* Raio único para cards de conteúdo — cards de sistema, links e placeholder vazio */
  .nf-sys-card,
  .nf-link-card,
  .nf-empty {
    border-radius: 14px;
  }

  /* "Meus Sistemas": card mais enxuto, descrição em 2 linhas para caber mais itens sem rolar tanto */
  .nf-sys-card {
    padding: 14px;
    gap: 12px;
    min-height: 0;
  }
  .nf-sys-card__body { padding-right: 26px; }
  .nf-sys-card__desc { -webkit-line-clamp: 2; }
  .nf-sys-card__info {
    width: 30px;
    height: 30px;
    top: 12px;
    right: 12px;
  }

  /* Links Favoritos/Úteis: placeholder vazio some de ocupar a largura de um poster 16:9 */
  .nf-empty { width: 172px; }

  /* Botões de ação da seção de favoritos ganham respiro proporcional ao alvo de toque de 44px */
  .nf-row-title__actions { gap: 10px; }
}

/* 9. Helpdesk e Salas: mesmo raio de 14px dos cards do dashboard (item 8).
   .hd-card também é a base de .ag-card (reunião) — um ajuste aqui cobre os dois. */
@media (max-width: 520px) {
  .hd-resumo__card,
  .hd-card {
    border-radius: 14px;
  }

  /* KPI da fila do NIT: 2 colunas fixas (menos ping-pong de largura que auto-fit
     minmax(180px) tinha perto do breakpoint) e menos padding pra caber sem apertar. */
  .hd-resumo {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .hd-resumo__card { padding: 14px 16px; }
  .hd-resumo__card strong { font-size: 1.6rem; }
}

/* 10. Calendário de salas e "Minha agenda": o cabeçalho (setas + rótulo da
   semana + toggle Semana/Dia/Mês + "Hoje") é uma única linha `nowrap` em
   desktop. Em mobile, o item 1 acima força 44px de alvo de toque em cada
   botão do toggle e nas setas — somados ao rótulo, a linha passa da largura
   da tela e ficava cortada/sobreposta (não tinha `flex-wrap` nenhum aqui).
   Passa a quebrar em linhas centralizadas, e o rótulo para de reservar
   130px fixos (min-width da versão desktop) pra não sobrar vazio à toa. */
@media (max-width: 640px) {
  .ag-cal__head { flex-direction: column; align-items: stretch; }
  .ag-cal__nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
  .ag-cal__label { min-width: 0; text-align: center; }
  .ag-cal__salas.hd-turno,
  .ag-cal__visao.hd-turno {
    width: 100%;
  }
  /* .ag-cal__visao .hd-turno__btn é `flex: none` no desktop (agendamentos.css)
     pra não esticar 3 abas curtas — em coluna cheia isso sobrava vazio nas
     pontas; aqui ele preenche a linha como as demais abas do módulo. */
  .ag-cal__visao.hd-turno .hd-turno__btn {
    flex: 1 1 auto;
  }
}