/*
 * Conecta RH — CSS mobile-first
 * ==================================
 * Fase 1 (2026-09-29): fundação — skeleton, tokens, drawer, utilities.
 *
 * Carregado DEPOIS do <style> inline do index.html para sobrescrever em
 * @media (max-width: 640px) sem tocar no CSS antigo. Desktop (>= 641px)
 * NÃO é afetado por regras dentro de media queries mobile.
 *
 * Rollback global: remover a tag <link href="/assets/css/mobile.css">
 * do <head> do index.html. Sistema volta 100% ao estado anterior.
 */

/* ─────────────────────────────────────────────────────────────
 * TASK 2 — Tokens responsivos + touch-target reset
 * ─────────────────────────────────────────────────────────────
 * Tokens ficam fora de media query (definem valores). Regras que
 * DEPENDEM do viewport ficam dentro de @media (max-width: 640px).
 */
:root {
  --touch-target: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --mobile-gutter: 16px;
}

@media (max-width: 640px) {
  /* Bloqueia scroll horizontal universal — regra número 1 de mobile UX.
   * IMPORTANTE: overflow-x:hidden em html+body cria scroll container
   * implícito e quebra position:sticky no iOS Safari (topbar some ao
   * rolar). overflow-x:clip não cria scroll container (iOS 16+); fallback
   * pra hidden só no body preserva o comportamento em browsers antigos
   * sem derrubar a topbar sticky em iPhones atuais. */
  html {
    overflow-x: clip;
    max-width: 100vw;
  }
  body {
    overflow-x: clip;
    max-width: 100vw;
  }
  @supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
  }

  /* Font-size base fluida: 14px em 375px, sobe até 16px em 640px */
  html {
    font-size: clamp(14px, 3.6vw, 16px);
  }

  /* Touch-target mínimo em todo controle interativo */
  button,
  .btn,
  a.nav-item,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
  }

  /* Botões dentro de tabela têm padding menor por padrão — compensa em mobile */
  td button,
  td .btn,
  td a.btn {
    padding: 10px 12px;
  }

  /* Inputs/selects/textareas: fonte >=16px pra iOS Safari não zoom no focus */
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Respeita safe-area do notch (iPhone X+).
   * Gutter aplica a .content/.view (NÃO ao body) — se aplicado ao body,
   * recua a topbar sticky e deixa faixas vazias nos lados em celular. */
  .content,
  .view,
  main > section {
    padding-left: max(var(--mobile-gutter), var(--safe-left));
    padding-right: max(var(--mobile-gutter), var(--safe-right));
  }
}

/* ─────────────────────────────────────────────────────────────
 * TASK 4 — Botão hambúrguer + sidebar como drawer em <=860px
 * (sidebar já é escondida por CSS antigo neste breakpoint; aqui
 *  a resgatamos como painel deslizante da esquerda)
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #btn-mobile-nav {
    display: inline-flex !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 84vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    z-index: 1500;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    padding-top: max(16px, var(--safe-top));
    padding-bottom: max(16px, var(--safe-bottom));
    background: var(--white, #fff);
    display: block !important;
  }

  .sidebar.mobile-open {
    left: 0;
  }

  #mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  #mobile-nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }
}

/* ─────────────────────────────────────────────────────────────
 * TASK 5 — Utility .tbl-mobile-cards
 * Uso: adicione class="tbl-mobile-cards" no <table> e
 *      data-label="Rótulo" em cada <td> a partir do segundo.
 * O primeiro <td> (nome principal) e o último (ações) ficam
 * SEM data-label.
 * Se a tabela tem >7 colunas, considere .tbl-scroll-x em vez disso.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tbl-mobile-cards {
    display: block;
    width: 100%;
    box-shadow: none !important;
    background: transparent !important;
  }
  .tbl-mobile-cards thead { display: none; }
  .tbl-mobile-cards tbody { display: block; }
  .tbl-mobile-cards tr {
    display: block;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .tbl-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border: none !important;
    font-size: 13px;
  }
  .tbl-mobile-cards td::before {
    content: attr(data-label) ':';
    font-weight: 600;
    color: var(--muted, #6b7280);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  .tbl-mobile-cards td:not([data-label])::before { content: none; }
  .tbl-mobile-cards td:first-child {
    font-size: 15px;
    font-weight: 700;
    padding: 0 0 8px;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    margin-bottom: 4px;
  }
  .tbl-mobile-cards td:last-child {
    justify-content: flex-end;
    padding-top: 10px;
  }
  /* Wrapper com overflow para scroll horizontal, opt-in */
  .tbl-scroll-x {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─────────────────────────────────────────────────────────────
 * TASK 6 — Utility .modal-full-mobile
 * Em <=640px, modais ganham essa classe automaticamente pra
 * ocupar 100% da tela. Se algum modal não deve virar full, o
 * caller passa opts.fullMobile: false (fica sem a classe).
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-full-mobile,
  .modal.modal-full-mobile,
  .modal-overlay .modal.modal-full-mobile {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-top: max(16px, var(--safe-top)) !important;
    padding-bottom: max(16px, var(--safe-bottom)) !important;
  }
  /* Overlay pai sem padding pra não empurrar o modal-full */
  .modal-overlay:has(.modal-full-mobile) {
    padding: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * FASE 2 · Task 1 — Login mobile-friendly
 *
 * O CSS antigo já muda #pg-login pra column em <=860px, mas esconde
 * .login-visual que nao existe mais (o login novo usa .ls-narrative/
 * .ls-card). Aqui a gente ajusta os seletores certos.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* CAUSA RAIZ do "não consigo acessar no celular": o seletor desktop
   * #pg-login.login-stage (ID+classe) vence o override legado
   * @media{#pg-login{flex-direction:column}} (só ID) por especificidade.
   * Em mobile os filhos (.ls-topbrand, .ls-chrome, .ls-gptw) ficavam
   * lado a lado numa row de ~656px num viewport de 375px — campo email
   * e botão Entrar nasciam FORA da tela. Força column aqui com a mesma
   * especificidade da regra desktop. */
  #pg-login.login-stage {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Esconde o painel de storytelling (headline + stats) — nao cabe em mobile */
  #pg-login.login-stage .ls-narrative {
    display: none !important;
  }

  /* Chrome vira 1 coluna e centraliza o card */
  #pg-login.login-stage .ls-chrome {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 24px 16px !important;
    padding-top: max(24px, var(--safe-top)) !important;
    padding-bottom: max(24px, var(--safe-bottom)) !important;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Card do form ocupa largura total, sem max-width desktop */
  #pg-login.login-stage aside {
    width: 100%;
    display: block;
  }
  #pg-login.login-stage .ls-card {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 24px 20px !important;
  }

  /* Topbrand no header, menor, sem posicao absoluta */
  #pg-login.login-stage .ls-topbrand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    justify-content: center;
    margin-bottom: 20px;
    padding: 8px 0;
  }

  /* GPTW no rodape do login (era absoluta) — simplifica em mobile */
  #pg-login.login-stage .ls-gptw {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 16px auto 0 !important;
    justify-content: center;
  }

  /* Botao entrar full-width */
  #pg-login.login-stage .ls-btn {
    width: 100% !important;
  }
}

/* Em telas pequenas de verdade, corta efeitos caros (perf mobile) */
@media (max-width: 640px) {
  #pg-login.login-stage .ls-particle,
  #pg-login.login-stage .ls-grain {
    display: none !important;
  }
  /* Blobs de aurora menores pra economizar GPU */
  #pg-login.login-stage .ls-blob {
    width: 100vw !important;
    height: 100vw !important;
    filter: blur(60px);
    opacity: 0.5;
  }
  /* Welcome headline menor */
  #pg-login.login-stage .ls-welcome {
    font-size: clamp(24px, 8vw, 32px) !important;
    line-height: 1.15 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * FASE 2 · Tasks 2-6 — Regras gerais das views do Colab
 *
 * Padrões que aparecem em Home, Perfil, Férias, Benefícios,
 * Central e Aniversariantes. Regra vale só em <=640px e mira
 * classes utilitárias que o CSS antigo já usa em várias views.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Content principal com padding menor pra economizar espaço */
  .content, #content {
    padding: 12px !important;
  }

  /* Cabeçalho de página empilha (título + ações) */
  .page-hd, .page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .page-hd > *, .page-head > * {
    max-width: 100% !important;
  }

  /* Grupos de botões podem quebrar linha.
   * flex-grow só nos botões — se aplicado a *, chips/badges/texto no row
   * esticam feio e botão único passa a ocupar 100% da linha. */
  .btn-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .btn-row > button,
  .btn-row > .btn,
  .btn-row > a.btn,
  .btn-row > input[type="button"],
  .btn-row > input[type="submit"] {
    flex: 1 1 auto;
    min-width: 44px;
  }

  /* Cards em geral: padding menor + border-radius menor pra caber melhor */
  .card {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }

  /* Grids 2/3/4 colunas já viram 1 em <=860px pelo CSS antigo (linha 462) */
  /* .g2, .g3, .g4, .g32, .ai-grid — já OK */

  /* KPI tiles (dashboards e resumos) — 1 coluna em mobile */
  .kpi-grid, .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .kpi-tile, .stat-card, .kpi-card {
    padding: 14px !important;
  }

  /* Título grande h1 fluida (evita quebra estranha) */
  .content h1, .view h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
  }
  .content h2, .view h2 {
    font-size: clamp(16px, 5vw, 22px) !important;
    line-height: 1.25 !important;
  }

  /* Tabs em barra rolável (não quebra em várias linhas) */
  .tabs, .ficha-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .ficha-tabs::-webkit-scrollbar {
    display: none;
  }
  .tab, .ficha-tab {
    flex-shrink: 0 !important;
  }

  /* Filtros / search bar padrão em 1 linha rolável */
  .filtros, .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filtros > *, .filter-bar > * {
    min-width: 140px;
    flex: 1 1 auto;
  }

  /* Tabelas que não têm .tbl-mobile-cards viram scroll horizontal por default.
   * Nowrap foi removido pra que texto longo (motivo de desligamento, endereço)
   * quebre linha dentro da célula em vez de virar scroll horizontal gigante.
   * Para tabelas que precisam manter linhas em 1 só, use .nowrap-mobile. */
  .content table:not(.tbl-mobile-cards):not(.no-mobile-scroll) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .content table.nowrap-mobile:not(.tbl-mobile-cards) {
    white-space: nowrap;
  }

  /* Avatares grandes (perfil) reduzidos */
  .avatar-lg, .profile-avatar {
    width: 88px !important;
    height: 88px !important;
  }

  /* Chips (status, tags) menores */
  .chip, .badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* Modal de perfil: garante scroll interno em telas curtas */
  #view-perfil-colab .card,
  #view-perfil-gestor .card,
  #view-perfil-rh .card {
    padding: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * TASK 7 — Utility .form-mobile-stack + forms dentro de modal-full
 * Empilha campos, botões viram largura total, evita zoom iOS
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .form-mobile-stack,
  .modal-full-mobile form,
  form.mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .form-mobile-stack > *,
  .modal-full-mobile form > *,
  form.mobile-stack > * {
    width: 100%;
    max-width: none;
  }
  .form-mobile-stack label,
  .modal-full-mobile form label,
  form.mobile-stack label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  /* Botões empilhados no rodapé; primário fica em cima na leitura visual.
   * Inclui .modal-f (rodapé real do componente Modal) além de .btn-row —
   * o Modal renderiza <footer class="modal-f"> sem .btn-row. */
  .form-mobile-stack .btn-row,
  .modal-full-mobile .btn-row,
  .modal-full-mobile .modal-f,
  form.mobile-stack .btn-row {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .form-mobile-stack .btn-row > button,
  .modal-full-mobile .btn-row > button,
  .modal-full-mobile .modal-f > button,
  form.mobile-stack .btn-row > button {
    width: 100% !important;
  }
}