/* =========================================================================
   termfull.css — Super App shell
   admin-volume-sync-and-termfull-redesign · tasks 5.1–5.3
   Tokens alinhados ao dashboard (--dash-*) + novas variáveis do terminal.
   Mobile-first em cenas swipeáveis; desktop ≥1200 vira tri-column.
   ========================================================================= */

:root {
  /* Herda do dashboard mas expõe aliases curtos para o terminal */
  --tf-bg:        #080c14;
  --tf-bg-2:      #0d1220;
  --tf-surface:   #111827;
  --tf-surface-2: #1a2332;
  --tf-border:    #1e2d45;
  --tf-border-br: #2a3f5f;
  --tf-text:      #e6ebf4;
  --tf-text-dim:  #8a95a8;
  --tf-text-mute: #545e72;
  --tf-bull:      #00D4A0;
  --tf-bear:      #FF4D6A;
  --tf-neutral:   #F59E0B;
  --tf-gold:      #f0b429;
  /* pai-review-full-v1 §5.1: accent primário alinhado com dashboard (teal).
     Gold (#ffd700) agora é semântico de warning/bonus. */
  --tf-accent:    #00D4A0;           /* era #ffd700 — alinha com --dash-accent */
  --tf-accent-2:  #00E6B4;
  --tf-warning:   #ffd700;           /* gold reservado para avisos/bonus */
  --tf-warning-soft: rgba(255,215,0,0.15);

  /* Tipografia fluida (mobile-first, escala p/ desktop) */
  --tf-fs-body:   clamp(13px, 3.6vw, 15px);
  --tf-fs-label:  clamp(11px, 3vw,   13px);
  --tf-fs-h:      clamp(15px, 4.2vw, 18px);
  --tf-fs-num:    clamp(17px, 4.8vw, 22px);
  --tf-fs-hero:   clamp(24px, 7vw,   34px);

  /* Alturas fixas */
  --tf-topbar-h:    56px;
  --tf-bottomnav-h: 64px;

  /* Safe areas + keyboard (iOS/Android) */
  --tf-safe-top:    env(safe-area-inset-top, 0);
  --tf-safe-bot:    env(safe-area-inset-bottom, 0);
  --tf-kbd:         env(keyboard-inset-height, 0);

  /* Raios e sombras */
  --tf-radius-sm:  8px;
  --tf-radius:     12px;
  --tf-radius-lg:  16px;
  --tf-shadow:     0 8px 24px rgba(0,0,0,.32);
  --tf-shadow-up:  0 -8px 24px rgba(0,0,0,.28);

  /* Transições */
  --tf-dur:   180ms;
  --tf-ease:  cubic-bezier(.2,.8,.2,1);
}

/* ---------- Shell root (aplicado ao body quando classe tf-shell ativa) ---- */
body.tf-shell {
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: var(--tf-fs-body);
  margin: 0;
  min-height: 100dvh;                 /* dvh resolve iOS keyboard/URL bar */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.tf-shell [data-tf="topbar"] {
  position: sticky; top: 0; z-index: 50;
  height: calc(var(--tf-topbar-h) + var(--tf-safe-top));
  padding-top: var(--tf-safe-top);
  background: rgba(8,12,20,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tf-border);
}

/* ---------- Scenes wrapper (carousel de cenas) ---------- */
body.tf-shell [data-tf="scenes"] {
  display: flex;
  width: 300%;
  transform: translateX(0);
  transition: transform var(--tf-dur) var(--tf-ease);
  will-change: transform;
  /* Reservamos espaço para topbar + bottomnav + keyboard */
  min-height: calc(100dvh - var(--tf-topbar-h) - var(--tf-bottomnav-h) - var(--tf-safe-bot) - var(--tf-kbd));
}
body.tf-shell [data-tf="scenes"][data-active="0"] { transform: translateX(0); }
body.tf-shell [data-tf="scenes"][data-active="1"] { transform: translateX(-33.3333%); }
body.tf-shell [data-tf="scenes"][data-active="2"] { transform: translateX(-66.6667%); }

body.tf-shell [data-tf="scene"] {
  flex: 0 0 33.3333%;
  padding: 12px 14px calc(var(--tf-bottomnav-h) + var(--tf-safe-bot) + var(--tf-kbd) + 12px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Títulos e labels dentro das cenas */
body.tf-shell [data-tf="scene"] h2,
body.tf-shell [data-tf="scene"] h3 {
  font-size: var(--tf-fs-h);
  color: var(--tf-text);
  margin: 10px 0 8px;
}
body.tf-shell [data-tf="scene"] .tf-label {
  font-size: var(--tf-fs-label);
  color: var(--tf-text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.tf-shell [data-tf="scene"] .tf-num {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Cards */
body.tf-shell .tf-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  padding: 14px;
  margin-bottom: 12px;
}
body.tf-shell .tf-card + .tf-card { margin-top: 0; }

/* Botões primários */
body.tf-shell .tf-btn {
  appearance: none;
  border: 1px solid var(--tf-border-br);
  background: var(--tf-surface-2);
  color: var(--tf-text);
  font: 600 var(--tf-fs-label)/1 'JetBrains Mono', monospace;
  padding: 10px 14px;
  border-radius: var(--tf-radius-sm);
  cursor: pointer;
  transition: transform var(--tf-dur) var(--tf-ease), background var(--tf-dur);
  min-height: 44px;                   /* 44pt Apple HIG / 48dp Material */
}
body.tf-shell .tf-btn:active { transform: scale(.98); }
body.tf-shell .tf-btn.tf-btn-primary {
  background: var(--tf-accent);
  color: #000;
  border-color: var(--tf-accent);
}
body.tf-shell .tf-btn.tf-btn-long  { background: var(--tf-bull); color: #04110b; border-color: var(--tf-bull); }
body.tf-shell .tf-btn.tf-btn-short { background: var(--tf-bear); color: #1a0509; border-color: var(--tf-bear); }

/* ---------- Bottom navigation ---------- */
body.tf-shell [data-tf="bottomnav"] {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: calc(var(--tf-bottomnav-h) + var(--tf-safe-bot));
  padding-bottom: var(--tf-safe-bot);
  background: rgba(8,12,20,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--tf-border);
  box-shadow: var(--tf-shadow-up);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
}
body.tf-shell [data-tf="bottomnav"] button {
  appearance: none;
  flex: 1 1 0;
  background: transparent;
  border: 0;
  color: var(--tf-text-dim);
  font: 500 11px/1.1 'JetBrains Mono', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 8px 4px;
  transition: color var(--tf-dur);
}
body.tf-shell [data-tf="bottomnav"] button .tf-nav-ico {
  font-size: 20px;
  line-height: 1;
}
body.tf-shell [data-tf="bottomnav"] button[aria-selected="true"] {
  color: var(--tf-accent);
}
body.tf-shell [data-tf="bottomnav"] button[aria-selected="true"] .tf-nav-ico {
  filter: drop-shadow(0 0 6px rgba(255,215,0,.45));
}

/* ---------- Bottom-sheet (ordem) ---------- */
body.tf-shell dialog.tf-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: auto;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 85dvh;
  border: 0;
  border-radius: var(--tf-radius-lg) var(--tf-radius-lg) 0 0;
  background: var(--tf-surface);
  color: var(--tf-text);
  padding: 16px 14px calc(16px + var(--tf-safe-bot) + var(--tf-kbd));
  box-shadow: var(--tf-shadow-up);
  overflow-y: auto;
}
body.tf-shell dialog.tf-sheet::backdrop {
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(4px);
}
body.tf-shell dialog.tf-sheet .tf-sheet-grip {
  width: 48px; height: 4px;
  background: var(--tf-border-br);
  border-radius: 2px;
  margin: 0 auto 12px;
}

/* ---------- Responsive ---------- */
/* Tablet: 2 cenas visíveis (Trade + contexto) */
@media (min-width: 768px) and (max-width: 1199px) {
  body.tf-shell [data-tf="scenes"] {
    width: 150%;
    transform: translateX(0);
  }
  body.tf-shell [data-tf="scenes"][data-active="0"] { transform: translateX(0); }
  body.tf-shell [data-tf="scenes"][data-active="1"] { transform: translateX(-16.6667%); }
  body.tf-shell [data-tf="scenes"][data-active="2"] { transform: translateX(-33.3333%); }
  body.tf-shell [data-tf="scene"] { flex: 0 0 33.3333%; }
}

/* Desktop ≥1200: 3 colunas lado a lado, sem bottomnav */
@media (min-width: 1200px) {
  body.tf-shell [data-tf="topbar"] {
    height: var(--tf-topbar-h);
    padding-top: 0;
  }
  body.tf-shell [data-tf="scenes"] {
    width: 100%;
    transform: none !important;
    display: grid;
    grid-template-columns: minmax(280px,1fr) minmax(480px,2fr) minmax(320px,1fr);
    gap: 0;
    min-height: calc(100dvh - var(--tf-topbar-h));
  }
  body.tf-shell [data-tf="scene"] {
    flex: initial;
    padding: 18px 20px;
    border-right: 1px solid var(--tf-border);
  }
  body.tf-shell [data-tf="scene"]:last-child { border-right: 0; }
  body.tf-shell [data-tf="bottomnav"] { display: none; }
  body.tf-shell { --tf-kbd: 0px; }
}

/* Ultrawide ≥1800: dá mais espaço pro chart */
@media (min-width: 1800px) {
  body.tf-shell [data-tf="scenes"] {
    grid-template-columns: minmax(320px,1fr) minmax(720px,2.5fr) minmax(360px,1fr);
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  body.tf-shell [data-tf="scenes"] { transition: none; }
  body.tf-shell .tf-btn { transition: none; }
}