/**
 * public/css/mobile.css
 *
 * StormZ Mobile Responsive Layer v1.0
 * 100% additive — wrapped in @media queries so desktop is NEVER affected.
 *
 * Uma exceção de propósito: #bb-mobile-secondary (e qualquer futuro
 * wrapper igual) usa display:contents fora de @media. Ele existe só pra
 * dar um alvo pro "Ver mais detalhes" no mobile; contents faz o próprio
 * wrapper sumir da árvore de caixas em qualquer largura, então o grid
 * desktop/tablet enxerga os cards como se o wrapper nunca tivesse sido
 * inserido — sustenta o layout original, não muda ele.
 */
[id$="-mobile-secondary"] {
  display: contents;
}

.mobile-collapse-btn {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAV BAR (Bottom Tab Bar)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* LIQUID GLASS MOBILE DOCK */
  .liquid-dock {
    display: flex !important;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    z-index: 100;

    /* Liquid Glass Core: sheen de vidro (mais claro em cima, esmaece
       pra baixo) sobre a base translúcida escura — sem isso backdrop-
       filter sozinho fica só "desfocado", não "vidro". */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 45%),
      rgba(10, 12, 16, 0.55);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);

    /* Borda fina + duas sombras (ambiente + contato) + realce interno
       no topo, como luz pegando a borda de um vidro de verdade. */
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.5),
      0 2px 10px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    border-radius: 26px;

    padding: 6px;
    justify-content: space-evenly;
    align-items: center;
    gap: 2px;
  }

  /* Esconde o dock enquanto o painel "Mais" está aberto — os dois ficam
     na mesma faixa inferior da tela e o dock (mais alto na pilha) cobria
     os itens do painel. */
  .liquid-dock.dock-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }

  .liquid-nav-item {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 18px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 64px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    outline: none;
  }

  /* Focus visible for accessibility */
  .liquid-nav-item:focus-visible {
    box-shadow: 0 0 0 2px var(--accent, #ef4444);
  }

  /* Inner glow pseudo-element */
  .liquid-nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
    z-index: -1;
  }

  /* Active state bubble */
  .liquid-nav-item.active {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.15);
    box-shadow: 
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -2px 6px rgba(239, 68, 68, 0.4),
      0 0 20px rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.4);
    transform: scale(1.05);
  }

  .liquid-nav-item.active::before {
    opacity: 1;
  }

  /* Haptic touch feedback */
  .liquid-nav-item:active {
    transform: scale(0.92);
    transition: transform 0.1s;
  }

  .liquid-nav-item i,
  .liquid-nav-item svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .liquid-nav-item.active i,
  .liquid-nav-item.active svg {
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 6px rgba(239,68,68,0.6));
  }

  .liquid-nav-item span {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
  }

  /* Handle prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .liquid-nav-item,
    .liquid-nav-item i,
    .liquid-nav-item svg {
      transition: opacity 0.2s ease !important;
      transform: none !important;
    }
    .liquid-nav-item.active {
      transform: none !important;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════
     MOBILE "MAIS" SHEET
     ═══════════════════════════════════════════════════════════════════ */
  #mobile-more-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 3, 4, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  #mobile-more-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  #mobile-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    background: #0a0c10;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #mobile-more-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-more-handle {
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  .mobile-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }

  #mobile-more-close {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(255, 255, 255, 0.5);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  #mobile-more-close i {
    width: 14px;
    height: 14px;
  }

  .mobile-more-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 20px;
  }

  .mobile-more-group + .mobile-more-group {
    margin-top: 14px;
  }

  .mobile-more-group-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    padding: 4px 10px 6px;
  }

  .mobile-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 10px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    min-height: 44px;
    cursor: pointer;
  }

  .mobile-more-item:active {
    background: rgba(255, 255, 255, 0.06);
  }

  .mobile-more-item i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
  }

  .mobile-more-item .role-lock-icon {
    margin-left: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET BREAKPOINT (768px - 1023px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Hide the desktop sidebar */
  .sidebar {
    display: none !important;
  }

  /* App shell: remove flex row, make it a single column */
  #app-shell {
    flex-direction: column !important;
  }

  /* Main content fills the screen */
  /* #main-content, não .main-content — o elemento real é <main id="main-content">
     (só tem classes utilitárias Tailwind, nenhuma "main-content"). O
     seletor de classe nunca bateu com nada; o padding-bottom de verdade
     vinha só do pb-24 (96px) fixo no HTML, sem contar a safe-area do
     dock — por isso o painel do sinal ficava quase encostando nele. */
  #main-content {
    width: 100% !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  /* Header: allow horizontal scroll as a safety net if content ever overflows */
  header {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    overflow-x: auto;
  }

  /* Sync time and divider */
  header .w-px {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT (max-width: 767px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─── HEADER: uma linha só, compacta ─────────────────────────────── */
  header {
    height: 48px !important;
    min-height: 48px !important;
    flex-wrap: nowrap !important;
    padding: 0 12px !important;
    gap: 10px !important;
  }

  header > div {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  /* Status pill: só o ponto pulsante, sem texto */
  .status-pill {
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .status-pill-label,
  .status-pill-version {
    display: none !important;
  }

  .status-pill .pulse-dot {
    width: 8px !important;
    height: 8px !important;
  }

  /* Badge de usuários online: não cabe numa linha de 48px */
  #header-online-badge {
    display: none !important;
  }

  /* Hora de sincronização: mantém só a hora, esconde o rótulo */
  #header-sync-time span:first-child {
    display: none !important;
  }

  /* Banner de usuário: agora vive dentro do header, compacto, sem fundo próprio */
  #global-user-banner {
    padding: 4px 8px !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Mode selector buttons */
  header .flex.bg-white\/5 {
    flex-wrap: nowrap;
  }

  header .flex.bg-white\/5 button {
    font-size: 8px !important;
    padding: 4px 8px !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap;
  }

  /* Hide the signal mode selector on mobile (too cramped) — o seletor
     antigo (header .ml-4) nunca bateu com nenhum elemento real; pra quem
     é admin o QUANTIDADE/QUALIDADE ficava visível e estourava a largura
     do header de 48px, empurrando o avatar pra fora da tela. */
  #header-mode-selector {
    display: none !important;
  }

  /* ─── ALL PAGES: PADDING ─────────────────────────────────────────── */
  section[id^="page-"] {
    padding: 16px !important;
  }

  section[id^="page-"] .space-y-8 > * + * {
    margin-top: 16px;
  }

  /* Grids desktop usam gap-8 (32px) pensado pra várias colunas; forçados
     a 1 coluna no mobile isso vira 32px de vão vazio puro entre cards
     empilhados — aperta pra 16px. */
  .grid.gap-8 {
    gap: 16px !important;
  }

  /* ─── "VER MAIS DETALHES": esconde conteúdo secundário por padrão ─── */
  [id$="-mobile-secondary"] {
    display: none;
    margin-top: 16px;
  }

  [id$="-mobile-secondary"].expanded {
    display: block;
  }

  [id$="-mobile-secondary"] > * + * {
    margin-top: 16px;
  }

  .mobile-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin-top: 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
  }

  .mobile-collapse-btn:active {
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-collapse-chevron {
    width: 14px;
    height: 14px;
    transition: transform 200ms ease;
  }

  .mobile-collapse-btn[aria-expanded="true"] .mobile-collapse-chevron {
    transform: rotate(180deg);
  }

  /* ─── GRID OVERRIDES ─────────────────────────────────────────────── */
  /* Force all grids to single column on mobile */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* Exception: small stat grids that look fine in 2 cols */
  .grid.grid-cols-2,
  .grid-cols-3:not(.xl\:grid-cols-6):not(.xl\:grid-cols-12) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* The 6-col tech status row: 2 cols on mobile */
  .grid.xl\:grid-cols-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Reset column spans */
  [class*="col-span"] {
    grid-column: span 1 !important;
  }

  /* 2-col grids inside Neural Intel */
  .grid.grid-cols-2 [class*="col-span-2"] {
    grid-column: span 2 !important;
  }

  /* ─── HERO MONITOR ───────────────────────────────────────────────── */
  .xl\:col-span-8.panel.min-h-\[400px\],
  .panel.min-h-\[400px\] {
    min-height: 240px !important;
    padding: 16px !important;
  }

  /* "ANALISANDO MESA" é ícone-ao-lado-do-texto (diferente de GREEN!/LOSS,
     que já empilham ícone-em-cima-do-texto) — em 36px "ANALISANDO MESA"
     quebra em 2 linhas no mobile, a fileira vira largura cheia do painel,
     e sem text-align nem direção de coluna as duas linhas ficavam
     coladas à esquerda em vez de centralizadas uma sobre a outra. Empilha
     igual aos outros estados. */
  #bb-analyzing-mode .flex.items-center.gap-4 {
    flex-direction: column;
    gap: 8px;
  }

  #bb-analyzing-mode h2 {
    text-align: center;
  }

  /* Signal intel row */
  #bb-signal-intel {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* ─── TIE GAUGE ──────────────────────────────────────────────────── */
  #bb-tiePanel {
    padding: 16px !important;
  }

  #bb-tiePanel .w-48 {
    width: 120px !important;
    height: 120px !important;
  }

  /* ─── ROLAGEM HORIZONTAL: some com fade, não corte seco ────────────── */
  /* Bead Road e Big Road rolam de lado; sem isso a última coluna corta
     em cheio na borda da tela e parece quebrado em vez de "role pro
     lado". O fade só aparece quando tem overflow de verdade — sem
     overflow, os últimos 28px ficam vazios mesmo, o mask não muda nada. */
  #bb-beadRoad,
  #bb-bigRoad {
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }

  /* ─── BIG ROAD ───────────────────────────────────────────────────── */
  #bb-bigRoad {
    min-height: 100px !important;
  }

  .history-bead {
    width: 26px !important;
    height: 26px !important;
    font-size: 9px !important;
  }

  /* ─── PANELS: padding único, sem variação por p-8/p-12 ───────────── */
  .panel,
  .panel.p-8,
  .panel.p-12 {
    padding: 16px !important;
  }

  /* ─── ESCALA MOBILE: números "hero" e títulos ────────────────────── */
  /* Teto único pros números de destaque (sinal, win rate, gauge de
     empate, meta do dia, controle ao vivo) em vez de um valor diferente
     por ID — em 375px de largura, 2.5–3rem (40-48px) sobra da tela. */
  #bb-signalAction,
  #bb-winRate,
  #bb-tiePanel .text-7xl,
  #goal-progress-label,
  #ws-signal-action,
  .text-7xl,
  .text-8xl {
    font-size: 2rem !important;
  }

  .heading-xl,
  .text-5xl {
    font-size: 1.5rem !important;
  }

  .text-3xl {
    font-size: 1.25rem !important;
  }

  /* ─── DECISION LOG ───────────────────────────────────────────────── */
  #bb-decisionLog {
    max-height: 200px !important;
  }

  /* ─── STRATEGY LIST ──────────────────────────────────────────────── */
  #bb-strategyList {
    max-height: 250px;
    overflow-y: auto;
  }

  /* ─── PAGE: TRAINING ─────────────────────────────────────────────── */
  #page-training .heading-xl {
    font-size: 1.75rem !important;
  }

  /* ─── PAGE: FINANCE ──────────────────────────────────────────────── */
  #page-finance input,
  #page-finance select {
    font-size: 14px !important; /* Prevent iOS zoom */
  }

  /* ─── PAGE: DAILY GOAL ───────────────────────────────────────────── */
  #page-daily-goal .flex.items-end.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ─── PAGE: MANAGEMENT ───────────────────────────────────────────── */
  #page-management .text-5xl {
    font-size: 2rem !important;
  }

  /* ─── PAGE: TUTORIAL ─────────────────────────────────────────────── */
  #page-tutorial {
    padding: 16px 12px !important;
  }
  
  #page-tutorial header {
    margin-bottom: 16px !important;
  }

  #page-tutorial header h2 {
    font-size: 1.5rem !important;
  }
  
  #page-tutorial header p {
    font-size: 0.75rem !important;
  }

  /* Make sure sidebar tabs wrap or scroll nicely */
  #tut-sidebar {
    padding: 8px 4px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    margin-bottom: 8px !important;
    flex-direction: row !important;
  }
  
  .tut-nav-item {
    padding: 8px 12px !important;
    flex-shrink: 0;
  }
  
  .tut-nav-item span {
    font-size: 10px !important;
  }
  
  /* Fix content area height to scroll within mobile screen */
  #tut-content-area {
    padding: 4px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px !important;
  }
  
  /* Fix typewriter effect overflow on mobile */
  .tut-typewriter {
    white-space: normal !important;
    border-right: none !important;
    animation: none !important;
  }

  /* ─── PAGE: OPERATIONAL LIVE ─────────────────────────────────────── */
  #page-live {
    padding: 0 !important;
  }

  #page-live > div {
    flex-direction: column !important;
  }

  /* Live house iframe area */
  #page-live .h-\[65\%\] {
    height: 45vh !important;
    min-height: 280px;
  }

  /* Bottom intelligence panel */
  #page-live .flex-1.overflow-y-auto {
    padding: 8px !important;
  }

  #page-live .flex-1.overflow-y-auto .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Live controls */
  #ws-start-btn, #ws-stop-btn {
    padding: 12px !important;
  }

  /* Session logs */
  #ws-logs {
    max-height: 120px !important;
  }

  /* ─── CHARTS ─────────────────────────────────────────────────────── */
  .h-\[200px\] {
    height: 150px !important;
  }

  .h-\[260px\] {
    height: 180px !important;
  }

  .h-\[140px\] {
    height: 120px !important;
  }

  /* ─── AUTH SCREEN ────────────────────────────────────────────────── */
  .auth-card {
    padding: 24px 20px !important;
  }

  /* ─── CAPTURE LOG ────────────────────────────────────────────────── */
  #capture-log-list {
    grid-template-columns: 1fr !important;
  }

  /* ─── AUDIT PANEL ────────────────────────────────────────────────── */
  .border-gold\/20.bg-gold\/5 {
    padding: 16px !important;
  }

  .border-gold\/20.bg-gold\/5 h3 {
    font-size: 0.875rem !important;
  }

  /* ─── TABLES ─────────────────────────────────────────────────────── */
  table {
    font-size: 12px;
  }

  th, td {
    padding: 8px 6px !important;
  }

  /* ─── NOTIFICATION CONTAINER ─────────────────────────────────────── */
  #notification-container {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: 100% !important;
  }
  
  /* Toast Items inside container */
  #notification-container > div {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(10, 10, 10, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* ─── INPUTS (prevent iOS zoom) ──────────────────────────────────── */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Reset font size for very small labels */
  input[type="range"] {
    font-size: inherit !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EXTRA SMALL MOBILE (max-width: 380px) — iPhone SE, etc.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .liquid-dock {
    padding: 4px 2px;
  }

  .liquid-nav-item {
    min-width: 40px;
    padding: 4px 2px;
  }

  .liquid-nav-item i,
  .liquid-nav-item svg {
    width: 18px;
    height: 18px;
  }

  .liquid-nav-item span {
    font-size: 7px;
  }

  #header-sync-time {
    display: none !important;
  }

  /* #bb-signalAction e .heading-xl já ficam em 2rem/1.5rem pela regra
     geral de "@media (max-width: 767px)" — nada menor precisa aqui,
     senão a tela mais estreita acaba com texto MAIOR que a mais larga. */

  .grid.xl\:grid-cols-6 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDSCAPE MOBILE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .liquid-dock {
    padding: 2px 4px;
  }

  .liquid-nav-item {
    padding: 2px 6px;
  }

  .liquid-nav-item span {
    display: none;
  }

  .liquid-nav-item i,
  .liquid-nav-item svg {
    width: 18px;
    height: 18px;
  }

  #main-content {
    padding-bottom: calc(44px + env(safe-area-inset-bottom)) !important;
  }

  #page-live .h-\[65\%\] {
    height: 55vh !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOUCH ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices to prevent sticky states */
  .panel:hover {
    transform: none;
    box-shadow: none;
  }

  .nav-btn:hover {
    transform: none;
  }

  /* Increase tap targets */
  .nav-btn {
    min-height: 44px;
  }

  button {
    min-height: 44px;
  }

  /* Smooth scrolling for momentum */
  .overflow-y-auto,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
}