/* v27g · Estados de recolhimento (device-aware) + mobile + botão Apps */

/* Hambúrguer NÃO é usado · o menu mobile é a calha de ícones (expande pelo ícone do app). */
.mobile-menu-btn { display: none !important; }
/* Ícone do app na barra de título existe só no mobile (mostrado no @media abaixo). */
.app-bar-icon { display: none; }

/* iOS/Safari · evita o "zoom no toque-duplo" nos controles tocáveis (mantém scroll
   e pinch-zoom de acessibilidade). Cobre o ícone do app, troca de produto e menus. */
.app-container.teams-layout .app-bar-icon,
.app-container.teams-layout .product-item,
.app-container.teams-layout .sidebar-product-cycle,
.app-container.teams-layout .sidebar-bar-toggle,
.app-container.teams-layout .nav-link,
.app-container.teams-layout button,
.app-container.teams-layout a { touch-action: manipulation; }

/* ===========================================================================
   PADRÃO do frontend · tabela responsiva (desktop = tabela · mobile = cards).
   Toda <table> com <thead> recebe a classe `.rwd-table` pelo enhancer
   (js/responsive-tables.js) e, abaixo de 768px, cada linha vira um card com
   "Rótulo: valor" (rótulo via data-label injetado do <thead>). Opt-out: .no-rwd.
   =========================================================================== */
@media (max-width: 768px) {
  .app-container.teams-layout .rwd-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .app-container.teams-layout .rwd-table,
  .app-container.teams-layout .rwd-table tbody,
  .app-container.teams-layout .rwd-table tr,
  .app-container.teams-layout .rwd-table td { display: block; width: 100%; }
  .app-container.teams-layout .rwd-table tr {
    margin: 0 0 10px; border: 1px solid #E5E5E5; border-radius: 10px;
    padding: 4px 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .app-container.teams-layout .rwd-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    text-align: right; padding: 8px 0; border: 0; border-bottom: 1px solid #F2F2F2;
    white-space: normal; min-height: 0;
  }
  .app-container.teams-layout .rwd-table td:last-child { border-bottom: 0; }
  .app-container.teams-layout .rwd-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 42%; text-align: left;
    font-weight: 600; color: #707070; font-size: 12px; text-transform: none; letter-spacing: 0;
  }
  /* célula sem rótulo (colspan/empty) ocupa a largura toda, centralizada */
  .app-container.teams-layout .rwd-table td:not([data-label]) { justify-content: center; text-align: center; }
}

/* Tabelas DENSAS de admin (muitas colunas, ex.: Plataforma › Usuários `.ua-table`) viram CARDS já a
   partir de 1400px de viewport. A tabela de Usuários tem 7 colunas (incl. e-mails/gestor longos) e
   precisa de ~1100px+ para mostrar TODAS as colunas; em 1366×768 a área útil (descontadas barra de
   produtos + menu lateral) fica ~950px e o FINAL da tabela ficava cortado — em 1024×768, pior ainda.
   Acima de 1400px sobra largura para a tabela. Reaproveita a transformação .rwd-table (data-label do enhancer). */
@media (max-width: 1400px) {
  .app-container.teams-layout .ua-table { min-width: 0; }
  .app-container.teams-layout .ua-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .app-container.teams-layout .ua-table,
  .app-container.teams-layout .ua-table tbody,
  .app-container.teams-layout .ua-table tr,
  .app-container.teams-layout .ua-table td { display: block; width: 100%; }
  .app-container.teams-layout .ua-table tr {
    margin: 0 0 10px; border: 1px solid #E5E5E5; border-radius: 10px;
    padding: 4px 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .app-container.teams-layout .ua-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    text-align: right; padding: 8px 0; border: 0; border-bottom: 1px solid #F2F2F2;
    white-space: normal; min-height: 0;
  }
  .app-container.teams-layout .ua-table td:last-child { border-bottom: 0; }
  .app-container.teams-layout .ua-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 40%; text-align: left;
    font-weight: 600; color: #707070; font-size: 12px; text-transform: none; letter-spacing: 0;
  }
}

/* === BOTÃO APPS no rodapé (aparece quando product-bar está oculta no desktop) === */
.nav-apps-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #605e5c;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s ease;
}
.nav-apps-btn:hover {
  background: rgba(43,99,148,.06);
  color: #2B6394;
  border-color: rgba(43,99,148,.2);
}
.nav-apps-btn svg { color: currentColor; }
.app-container.teams-layout.external-collapsed .nav-apps-btn {
  display: inline-flex;
}

.app-container.teams-layout .nav-logout-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* =========================================================================
   DESKTOP · recolher menu EXTERNO (product-bar) · sidebar interna mantém
   ========================================================================= */
@media (min-width: 769px) {
  .app-container.teams-layout {
    grid-template-columns: 68px 248px 1fr !important;
    transition: grid-template-columns .25s ease;
  }
  /* External recolhido: product-bar somem · borda navy fica na esquerda do sidebar */
  .app-container.teams-layout.external-collapsed {
    grid-template-columns: 0 252px 1fr !important;
  }
  .app-container.teams-layout.external-collapsed .product-bar {
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  .app-container.teams-layout.external-collapsed .navigation {
    border-left: 4px solid #0a2540 !important;   /* mesmo navy da product-bar */
  }
}

/* =========================================================================
   MOBILE · sidebar SEMPRE icon-only por default · chevron expande pra drawer
   product-bar fica no rodapé (fixed) · NÃO recolhe no mobile
   ========================================================================= */
@media (max-width: 768px) {
  /* App container vira block · sem grid */
  .app-container.teams-layout {
    display: block !important;
    height: 100vh;
    overflow: hidden;
  }

  /* Header FIXO no topo, LARGURA TOTAL · seu border-bottom vira o separador contínuo
     do topo (a calha começa limpa, sem borda própria). O ícone do app fica aqui. */
  .app-container.teams-layout .header.teams-header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    background: #f5f7fa !important;
    z-index: 50 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }
  /* Ícone do app na barra de título (esquerda) · cor do produto · toca p/ abrir o menu */
  .app-container.teams-layout .header.teams-header .app-bar-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border: none; border-radius: 10px; cursor: pointer;
    background: var(--p-color, #2B6394); color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
  }
  .app-container.teams-layout .header.teams-header .app-bar-icon svg { width: 22px; height: 22px; }
  .app-container.teams-layout .header.teams-header .app-bar-icon img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; display: block; }
  /* Nome do módulo/produto atual ao lado do logo Blanes (só mobile). */
  .app-container.teams-layout .header.teams-header .app-bar-product {
    display: inline-block !important;
    font-size: 15px !important; font-weight: 600 !important; color: #1f2937 !important;
    max-width: 42vw !important; overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important; line-height: 1 !important; margin-left: 1px !important;
  }
  /* "Blanes Framework" é só do desktop · oculto no mobile (mobile mostra o nome do módulo). */
  .app-container.teams-layout .header.teams-header .app-bar-brand { display: none !important; }
  /* Busca estilo Microsoft no mobile · LUPA no header (abre o palette em tela cheia).
     Sem campo persistente no título · só o ícone, agrupado à direita com sino/avatar. */
  .app-container.teams-layout .header.teams-header .teams-searchbar {
    display: block !important; position: static !important; transform: none !important;
    width: auto !important; max-width: none !important; margin-left: auto !important;
  }
  .app-container.teams-layout .header.teams-header .teams-search-placeholder { display: none !important; }
  .app-container.teams-layout .header.teams-header .teams-search-btn {
    width: 38px !important; height: 38px !important; justify-content: center !important;
    padding: 0 !important; background: transparent !important; border: none !important;
  }
  .app-container.teams-layout .header.teams-header .profile-info {
    margin-left: 6px !important;
  }

  /* Palette de busca em TELA CHEIA no mobile (overlay full-screen · estilo Microsoft) */
  #search-palette { padding-top: 0 !important; align-items: stretch !important; }
  #search-palette > div {
    max-width: none !important; width: 100vw !important; height: 100dvh !important;
    border-radius: 0 !important;
  }
  #search-palette #search-results { max-height: calc(100dvh - 64px) !important; }

  /* Product-bar (barra de escolha de apps) · OCULTA por padrão no mobile; surge SÓ quando o menu
     completo está expandido (toque no logo Blanes) — recolhem juntos. */
  .app-container.teams-layout .product-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 56px !important;
    flex-direction: row !important;
    z-index: 40 !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    transform: translateY(100%) !important;            /* escondida abaixo da tela por padrão */
    transition: transform .22s ease !important;
  }
  /* Menu expandido (logo tocado · :not(.sidebar-icon-only)) → a barra de apps sobe junto. */
  .app-container.teams-layout:not(.sidebar-icon-only) .product-bar { transform: translateY(0) !important; }
  .app-container.teams-layout .product-bar .product-logo,
  .app-container.teams-layout .product-bar .product-spacer { display: none !important; }
  .app-container.teams-layout .product-bar .product-item {
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .app-container.teams-layout .product-bar .product-item.active::before {
    top: auto !important; bottom: 0 !important;
    left: 50% !important; transform: translateX(-50%);
    width: 30px !important; height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
  }

  /* SIDEBAR mobile · calha de ÍCONES · começa ABAIXO do header (top:52), pois o
     ícone do app agora vive na barra de título. Expande ao tocar no ícone do header. */
  .app-container.teams-layout .navigation {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    bottom: 0 !important;   /* calha usa a altura toda (barra de apps oculta por padrão) */
    width: 60px !important;
    height: auto !important;
    box-sizing: border-box !important;   /* 60px JÁ inclui a borda · ícones não são cortados */
    z-index: 60 !important;
    background: #f5f7fa !important;
    border-right: 1px solid rgba(0,0,0,.10) !important;
    transition: width .25s ease, box-shadow .25s ease !important;
    overflow: hidden !important;         /* o scroll vive no .nav-content */
    transform: none !important;
  }
  /* Scroller da calha = .nav-content · barra ESCONDIDA (sem consumir espaço).
     A indicação de rolagem é o FADE/sombra fixo sobre o topo e a base (ver ::before/::after). */
  .app-container.teams-layout .navigation .nav-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .app-container.teams-layout .navigation .nav-content::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  /* FADE de rolagem · faixas FIXAS sobre o topo/base da calha (só icon-only).
     DINÂMICAS: a faixa do topo só aparece quando há conteúdo rolado ACIMA, a de
     baixo só quando há conteúdo ABAIXO (classes .can-scroll-up/.can-scroll-down
     setadas por JS). Sem rolagem possível → nenhuma faixa. Altura confortável. */
  .app-container.teams-layout.sidebar-icon-only .navigation::before,
  .app-container.teams-layout.sidebar-icon-only .navigation::after {
    content: '' !important;
    position: fixed !important;
    left: 0 !important;
    width: 60px !important;
    height: 26px !important;
    pointer-events: none !important;
    z-index: 62 !important;
    opacity: 0 !important;
    transition: opacity .18s ease !important;
  }
  .app-container.teams-layout.sidebar-icon-only .navigation::before {
    top: 52px !important;
    background: linear-gradient(to bottom, rgba(20,30,50,.22), rgba(20,30,50,0)) !important;
  }
  .app-container.teams-layout.sidebar-icon-only .navigation::after {
    bottom: 56px !important;
    background: linear-gradient(to top, rgba(20,30,50,.22), rgba(20,30,50,0)) !important;
  }
  .app-container.teams-layout.sidebar-icon-only .navigation.can-scroll-up::before { opacity: 1 !important; }
  .app-container.teams-layout.sidebar-icon-only .navigation.can-scroll-down::after { opacity: 1 !important; }
  /* Estados sem calha (expandido/oculto) NÃO mostram as faixas da calha */
  .app-container.teams-layout:not(.sidebar-icon-only) .navigation::before,
  .app-container.teams-layout:not(.sidebar-icon-only) .navigation::after,
  .app-container.teams-layout.sidebar-hidden .navigation::before,
  .app-container.teams-layout.sidebar-hidden .navigation::after {
    display: none !important;
  }
  /* O ícone do app foi para a barra de título → a calha NÃO mostra mais o toggle-row;
     começa limpa (sem separador próprio) com os itens do menu, com um respiro no topo. */
  .app-container.teams-layout .sidebar-toggle-row { display: none !important; }
  .app-container.teams-layout .navigation .nav-content { padding-top: 6px !important; }
  .app-container.teams-layout:not(.sidebar-icon-only) .navigation {
    width: min(85vw, 280px) !important;
    box-shadow: 6px 0 24px rgba(0,0,0,.20) !important;
    z-index: 80 !important;
    bottom: 56px !important;   /* expandido: deixa os 56px da barra de apps embaixo */
  }
  /* 3º estado · menu TOTALMENTE OCULTO · conteúdo ocupa toda a largura */
  .app-container.teams-layout.sidebar-hidden .navigation {
    width: 0 !important;
    border-right: none !important;
    overflow: hidden !important;
  }
  .app-container.teams-layout.sidebar-hidden .main-content {
    left: 0 !important;
  }

  /* Em icon-only mode (mobile default) · esconde labels */
  .app-container.teams-layout.sidebar-icon-only .nav-text,
  .app-container.teams-layout.sidebar-icon-only .nav-group-title,
  .app-container.teams-layout.sidebar-icon-only .sidebar-product-label,
  .app-container.teams-layout.sidebar-icon-only .nav-profile-label,
  .app-container.teams-layout.sidebar-icon-only .nav-logout-btn .nav-text,
  .app-container.teams-layout.sidebar-icon-only .nav-apps-btn .nav-text,
  /* placeholder "Em breve" de produto sem módulo · não deve ocupar a calha de ícones */
  .app-container.teams-layout.sidebar-icon-only .nav-stub-msg {
    display: none !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-link {
    justify-content: center !important;
    padding: 9px 0 !important;
    margin: 2px auto !important;
  }
  /* Na calha (icon-only): o seletor de persona sai (fica no avatar / ao expandir),
     e o ÍCONE DO APP ocupa o topo numa célula de 52px ALINHADA com a barra do sino. */
  .app-container.teams-layout.sidebar-icon-only .nav-header { display: none !important; }
  .app-container.teams-layout.sidebar-icon-only .sidebar-toggle-row {
    display: flex !important;
    flex-direction: column !important;
    height: 52px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;   /* mesma linha do header */
  }
  .app-container.teams-layout.sidebar-icon-only .nav-profile-badge {
    justify-content: center !important;
    padding: 8px 0 !important;
  }
  /* Chevron ">" (sidebar-bar-toggle) é REDUNDANTE no mobile: o ícone do produto já
     abre/fecha o drawer e a troca de produto é pela product-bar do rodapé. Escondido. */
  .app-container.teams-layout .sidebar-bar-toggle {
    display: none !important;
  }
  /* Sem o chevron, o toggle-row (drawer aberto) não reserva a coluna de 22px. */
  .app-container.teams-layout:not(.sidebar-icon-only) .sidebar-toggle-row {
    grid-template-columns: 40px 1fr !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-logout-footer {
    justify-content: center !important;
    padding: 8px 4px !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-logout-btn {
    width: 40px;
    padding: 0 !important;
    justify-content: center !important;
  }

  /* Conteúdo FIXO preenchendo EXATAMENTE entre header (52) / calha (60) / barra (56).
     Elimina faixa no topo, transbordo à direita e corte embaixo. */
  .app-container.teams-layout .main-content {
    position: fixed !important;
    top: 52px !important;
    left: 60px !important;
    right: 0 !important;
    bottom: 0 !important;   /* conteúdo usa a altura toda; a barra de apps (quando surge) sobrepõe os 56px de baixo */
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    /* iOS · o main-content NÃO rola (senão o header fixed, que é filho dele, rola
       junto e some no Safari real). O scroll vai para o .content-area abaixo. */
    overflow: hidden !important;
  }
  /* iOS · .content-area é o ÚNICO scroller · header não é descendente dele → fica
     fixo de verdade. inset:0 preenche o main-content (entre header/calha/barra). */
  .app-container.teams-layout .main-content .content-area {
    position: absolute !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* Recuo lateral MÍNIMO entre a borda da página e os cards · poucos px na raiz
       para os elementos ocuparem a largura. 4 classes → vence as outras. */
    padding: 8px 2px !important;
  }

  /* Wrappers de página com recuo lateral mínimo (evita empilhar padding com o
     content-area + card). O respiro lateral fica só no padding do próprio card. */
  .app-container.teams-layout .content-area { padding-left: 0 !important; padding-right: 0 !important; }
  .app-container.teams-layout .ss-page    { padding: 10px 2px !important; max-width: none !important; }
  .app-container.teams-layout .page-wrap  { padding: 10px 2px !important; }

  /* CARDS ANINHADOS no mobile · os containers externos (adherence-card, ss-card,
     ss-day-card) NÃO podem somar 24px+24px de borda cada — isso desperdiça espaço
     e espreme o conteúdo até estourar. Achatamos o recuo horizontal; o "card"
     visual passa a ser o container interno/linha, não 3 molduras empilhadas. */
  /* Borda (padding) dos cards reduzida à metade no mobile · respiro enxuto. */
  .app-container.teams-layout .adherence-card { padding: 6px 6px !important; margin-bottom: 10px !important; }
  .app-container.teams-layout .ss-card        { padding: 6px 6px !important; }
  .app-container.teams-layout .ss-day-card    { padding: 6px 6px !important; }
  .app-container.teams-layout .stats-card     { padding: 10px !important; }
  .app-container.teams-layout .card           { padding: 8px 10px !important; }
  /* Valores longos (UTC de auditoria, código, motivo) QUEBRAM em vez de estourar. */
  .app-container.teams-layout .rwd-table td,
  .app-container.teams-layout .ss-utc,
  .app-container.teams-layout code,
  .app-container.teams-layout .team-table td,
  .app-container.teams-layout .ss-punch-table td { overflow-wrap: anywhere !important; word-break: break-word !important; }
  /* A linha-card responsiva encosta menos · respiro coerente com o resto. */
  .app-container.teams-layout .rwd-table tr { padding: 4px 10px !important; }

  /* Backdrop quando o menu está expandido (à direita do drawer) */
  .mobile-backdrop {
    display: none !important;
    position: fixed !important;
    top: 52px !important;
    left: min(85vw, 280px) !important;
    right: 0 !important;
    bottom: 56px !important;
    background: rgba(0,0,0,.40) !important;
    z-index: 70 !important;
    cursor: pointer;
  }
}