/* ============================================================
   mobile.css — Componentes mobile-first do Novo Mercado Pet ERP
   Criado em 2026-04-29 | Branch: refatoracao-mobile
   Regra: NUNCA usar max-width em media queries aqui.
          Todo estilo base é mobile; min-width expande para cima.
   ============================================================ */

/* ============================================================
   1. BOTTOM NAVIGATION BAR
   ============================================================ */

.bottom-nav {
  display: none; /* oculto em desktop — ativado em mobile via media query */
}

@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* height cresce para incluir a safe area do home indicator (iPhone) */
    height: calc(var(--bottom-nav-height, 60px) + var(--bottom-nav-safe-area, env(safe-area-inset-bottom, 0px)));
    padding-bottom: var(--bottom-nav-safe-area, env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--color-border, #E5E7EB);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    align-items: stretch;
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 6px 4px;
    color: var(--color-text-muted, #6B7280);
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--touch-target, 44px);
    transition: color 0.15s;
    position: relative;
  }

  .bottom-nav__item i {
    font-size: 20px;
    line-height: 1;
  }

  .bottom-nav__item span {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  /* NAV-GLOBAL-ICONES — glifos agora sao SVG coloridos "tipo desenho" (inline). */
  .bottom-nav__item svg {
    width: 26px;
    height: 26px;
    display: block;
  }

  /* Item ativo: rotulo teal-dark (Cambua) + ponto laranja acima do icone. Escopado a
     .bottom-nav p/ NAO mexer no --color-primary do resto do app. .active e setado pelo
     JS existente (data-bnav-route === rota) — logica preservada, so o estilo muda. */
  .bottom-nav__item.active {
    color: var(--color-primary, #2563EB);
  }

  .bottom-nav__item.active i {
    color: var(--color-primary, #2563EB);
  }

  .bottom-nav .bottom-nav__item.active {
    color: #2F6E75;
  }

  .bottom-nav .bottom-nav__item.active::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #F58634;
  }

  /* Badge de contagem no ícone (ex: itens no carrinho) */
  .bottom-nav__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 16px);
    background: var(--color-danger, #DC2626);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .bottom-nav__item:active {
    opacity: 0.7;
    transform: scale(0.94);
    transition: transform 0.08s, opacity 0.08s;
  }

  /* Espaço no final do conteúdo principal para não ficar atrás do bottom nav */
  .main {
    padding-bottom: calc(var(--bottom-nav-height, 60px) + var(--bottom-nav-safe-area, env(safe-area-inset-bottom, 0px)) + 8px) !important;
  }
}

/* ============================================================
   2. SIDEBAR / DRAWER — NOTAS DE IMPLEMENTAÇÃO
   O sistema de drawer (transform, .mobile-open, overlay) já está
   implementado em style.css em @media (max-width: 1024px), gerenciado
   pelo NavBarNew (MOBILE_BREAKPOINT=1024). Não duplicar aqui.
   O botão "Mais" do bottom nav chama NavBarNew._toggleMobileMenu().
   ============================================================ */

/* ============================================================
   2b. SIDEBAR FOOTER — RODAPÉ FIXO (MENU-2.1)
   Configurações + Minha Conta + Sair. Visível em desktop E mobile,
   colado embaixo via flex-column do .sidebar (.sidebar-footer = flex:0 0 auto).
   Cores casam com o tema ESCURO do sidebar (var(--sidebar-*)).
   ============================================================ */

.sidebar-footer {
  flex: 0 0 auto; /* não encolhe: fica no fim da coluna do .sidebar */
  display: block;
  padding: 8px 8px 12px;
  border-top: 1px solid var(--sidebar-separator, #e8eaf0); /* MENU-3.1: linha clara (era branco-translúcido) */
  margin-top: 4px;
}

.sidebar-footer-link,
.sidebar-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  min-height: var(--touch-target, 44px);
  -webkit-tap-highlight-color: transparent;
}

.sidebar-footer-link {
  color: var(--sidebar-text, #283042); /* MENU-3.1: tinta escura no fundo branco */
}

.sidebar-footer-link:hover {
  background: var(--sidebar-item-hover, #eef9fa);
  color: var(--sidebar-text, #283042); /* MENU-3.1: mantém tinta escura no hover claro (branco sumiria) */
}

.sidebar-logout-btn {
  color: #d33d52; /* MENU-3.1: vermelho legível sobre o fundo branco (era #F87171 p/ tema escuro) */
}

.sidebar-logout-btn:hover {
  background: rgba(224, 85, 107, 0.12); /* MENU-3.1: tom vermelho claro sobre branco */
  color: #b32d42; /* MENU-3.1: vermelho mais forte no hover (era #FCA5A5, sumiria no branco) */
}

.sidebar-footer-link:active,
.sidebar-logout-btn:active {
  background: var(--sidebar-item-hover, rgba(255, 255, 255, 0.08));
}

/* Topbar-Fase3: linha do TEMA no rodape (capsula sol/lua realojada da topbar
   enterrada — antes so existia na topbar, que agora nao renderiza). Mesma
   geometria dos outros itens do rodape; a capsula .theme-toggle vai a direita. */
.sidebar-footer-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  min-height: var(--touch-target, 44px);
  color: var(--sidebar-text, #283042);
  font-size: 14px;
  font-weight: 600;
}
.sidebar-footer-theme .theme-toggle {
  margin-left: auto; /* empurra a capsula pra direita da linha */
}
/* Rail recolhido (desktop): so a capsula, centralizada (label ja some pela
   regra global .sidebar.collapsed .sidebar-label). */
.sidebar.collapsed .sidebar-footer-theme {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar.collapsed .sidebar-footer-theme .nav-emoji {
  display: none;
}
.sidebar.collapsed .sidebar-footer-theme .theme-toggle {
  margin-left: 0;
}

/* ============================================================
   3. TOPBAR MOBILE — SIMPLIFICADA
   ============================================================ */

@media (max-width: 767px) {
  .topbar {
    height: 52px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* impede .top-right de quebrar para segunda linha */
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--topbar-bg, #fff);
    border-bottom: 1px solid var(--topbar-border, #E5E7EB);
  }

  /* style.css ≤680px define width:100% no .top-right, causando a "lupa órfã" abaixo do título.
     Sobrescreve aqui para manter tudo na mesma linha. */
  .topbar .top-right {
    width: auto;
  }

  /* Topbar-Fase3: .top-middle (busca global) enterrado — regra removida. */

  /* Ocultar itens secundários da topbar em mobile. (Topbar-Fase3: #btn-export,
     #btn-refresh e #period-filter sairam do seletor — foram removidos com os
     controles mortos do dashboard.) */
  #userDisplay,
  #btn-user,
  #btn-logout {
    display: none !important;
  }

  /* Cabeçalhos de módulo ocultos em mobile:
     o título já aparece no #top-title da topbar (atualizado dinamicamente por JS).
     .module-title → padrão global (Animais, Clientes, Financeiro, etc.)
     .pdv-title    → específico do módulo PDV */
  .module-title,
  .pdv-title {
    display: none !important;
  }

  /* Topbar-Fase3: #btn-topbar-search (lupa mobile) + #topbar-search-expanded +
     #btn-search-close REMOVIDOS — a busca global e sua versao mobile expansivel
     foram enterradas junto com a topbar. */

  /* Título da topbar — menos destaque em mobile */
  #top-title {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }

  /* Botão hambúrguer maior para toque */
  #btn-sidebar-toggle {
    min-width: var(--touch-target, 44px);
    min-height: var(--touch-target, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
}

/* ============================================================
   4. INDICADOR ONLINE / OFFLINE
   ============================================================ */

#connection-badge {
  display: none; /* oculto por padrão — JS mostra apenas quando offline */
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

#connection-badge.offline {
  display: inline-flex;
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

#connection-badge.online-flash {
  display: inline-flex;
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
  animation: badge-fade 2.5s ease forwards;
}

@keyframes badge-fade {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; display: none; }
}

/* ============================================================
   5. BOTTOM SHEET — .modal-card sobe da base em mobile
   ============================================================ */

@media (max-width: 767px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh;
    max-height: 92vh; /* fallback para browsers sem dvh */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: nmp-slideUp 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 !important;
  }

  /* Handle visual de arrasto */
  .modal-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #D1D5DB;
    border-radius: 2px;
    margin: 12px auto 4px;
    flex-shrink: 0;
  }
}

@keyframes nmp-slideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1;   }
}

/* ============================================================
   6. TABLE → CARDS EM MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .table-responsive.table-cards thead {
    display: none;
  }

  .table-responsive.table-cards .table,
  .table-responsive.table-cards table {
    border: none;
    background: transparent;
  }

  .table-responsive.table-cards tbody tr {
    display: block;
    background: var(--color-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
    margin-bottom: 10px;
    padding: 12px 14px;
    position: relative;
  }

  .table-responsive.table-cards tbody tr:active {
    background: var(--color-bg, #F9FAFB);
  }

  .table-responsive.table-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none !important;
    border-bottom: 1px solid var(--color-border, #F3F4F6) !important;
    font-size: 13px;
    min-height: 0;
  }

  .table-responsive.table-cards tbody td:last-child {
    border-bottom: none !important;
  }

  /* Label gerado via data-label ou JS */
  .table-responsive.table-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted, #6B7280);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    margin-right: 8px;
    white-space: nowrap;
  }

  /* Coluna de ações: não mostra label, alinha à direita */
  .table-responsive.table-cards tbody td[data-label="Ações"],
  .table-responsive.table-cards tbody td[data-label="ações"],
  .table-responsive.table-cards tbody td:last-child:not([data-label]) {
    justify-content: flex-end;
    padding-top: 8px;
  }

  .table-responsive.table-cards tbody td[data-label="Ações"]::before,
  .table-responsive.table-cards tbody td[data-label="ações"]::before {
    display: none;
  }

  /* Colapsa largura da tabela e células para caber no viewport (fix: table-layout:fixed sem thead visível) */
  .table-responsive.table-cards .table,
  .table-responsive.table-cards table {
    display: block;
    width: 100%;
  }

  .table-responsive.table-cards tbody {
    display: block;
    width: 100%;
  }

  .table-responsive.table-cards tbody td {
    width: 100%;
    overflow: visible;
    white-space: normal;
    box-sizing: border-box;
  }
}

/* ============================================================
   7. FAB — FLOATING ACTION BUTTON
   ============================================================ */

.fab {
  display: none; /* desktop: sem FAB — usa botões inline normais */
}

@media (max-width: 767px) {
  .fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(var(--bottom-nav-height, 60px) + var(--bottom-nav-safe-area, env(safe-area-inset-bottom, 0px)) + 16px);
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary, #2563EB);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.40);
    z-index: 800;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, box-shadow 0.15s;
  }

  .fab:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
  }

  /* FAB com label de texto */
  .fab--extended {
    width: auto;
    border-radius: 28px;
    padding: 0 20px;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    height: 52px;
  }
}

/* ============================================================
   8. FEEDBACK TÁTIL — :active UNIVERSAL EM MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .btn:active,
  .btn-icon:active,
  .btn-top:active,
  [data-route]:active,
  .menu a:active,
  .metric-card:active,
  .data-card:active {
    opacity: 0.72;
    transform: scale(0.97);
    transition: transform 0.08s ease, opacity 0.08s ease;
  }
}

/* ============================================================
   9. ALVOS DE TOQUE MÍNIMOS
   ============================================================ */

@media (max-width: 767px) {
  .btn,
  .btn-icon,
  .btn-top,
  button[type="submit"],
  button[type="button"],
  a[data-route] {
    min-height: var(--touch-target, 44px);
  }

  .btn-icon {
    min-width: var(--touch-target, 44px);
    min-height: var(--touch-target, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Inputs maiores em mobile — mais confortáveis com polegares */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* evita zoom automático no iOS */
  }
}

/* ============================================================
   10. PÁGINA MOBILE — HEADER DA SEÇÃO
   ============================================================ */

.page-header-mobile {
  display: none;
}

@media (max-width: 767px) {
  .page-header-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    background: var(--color-surface, #fff);
    position: sticky;
    top: 52px; /* altura da topbar em mobile */
    z-index: 700;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
  }

  .page-header-mobile h1,
  .page-header-mobile h2 {
    font-size: 17px;
    margin: 0;
    font-weight: 700;
  }
}

/* ============================================================
   12. CONTAINER QUERIES — PROGRESSIVE ENHANCEMENT
   Fallback via media query obrigatório ANTES do @supports
   ============================================================ */

/* Fallback: comportamento responsivo via media query */
@media (max-width: 767px) {
  .data-card {
    flex-direction: column;
  }

  .metric-widget {
    min-width: unset;
    flex: 1 1 calc(50% - 8px);
  }
}

/* Container Query (Chrome 105+, Firefox 110+, Safari 16+) */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
    container-name: card-ctx;
  }

  @container card-ctx (max-width: 400px) {
    .data-card {
      flex-direction: column;
    }
  }
}

/* ============================================================
   13. UTILS MOBILE GERAIS
   ============================================================ */

/* Scroll suave em todos os contêineres com overflow */
@media (max-width: 767px) {
  .overflow-x-scroll-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Esconder em mobile (somente desktop) */
  .desktop-only {
    display: none !important;
  }

  /* Mostrar apenas em mobile */
  .mobile-only {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

/* ---- Fatia 4-PDV: Faixa "Abrir prontuário de [animal]" ---- */
@media (max-width: 767px) {
  .pdvm-faixa-prontuario {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 16px 12px;
    background: var(--cor-destaque-historico-bg);
    border-left: 3px solid var(--cor-destaque-historico);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .pdvm-faixa-prontuario:active {
    background: #C4EBDE;
  }
  .pdvm-faixa-prontuario-icon {
    color: var(--cor-destaque-historico);
    font-size: 18px;
    flex-shrink: 0;
  }
  .pdvm-faixa-prontuario-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .pdvm-faixa-prontuario-acao {
    font-size: 11px;
    color: var(--cor-destaque-historico-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
  }
  .pdvm-faixa-prontuario-nome {
    font-size: 14px;
    color: var(--cor-destaque-historico-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pdvm-faixa-prontuario-chevron {
    color: var(--cor-destaque-historico);
    font-size: 14px;
    flex-shrink: 0;
  }
}