/* ============================================================
   BrainTest — UI Base (COMPONENTS + LAYOUT) — v3.8 HEADER MODE
   - Nenhuma cor hardcoded aqui
   - Usa somente tokens do ui-theme.css
   - DESKTOP: header/nav universal fixo no topo
   - MOBILE: top nav (utilidades) + bottom nav (navegação)
   - Compatibilidade:
     • Mantém classes/IDs antigos quando necessário
     • Neutraliza sidebar lateral antiga
   ============================================================ */

/* ===============================
   Reset e base
   =============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--bt-header-h-desktop);
}

body {
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===============================
   Tipografia base
   =============================== */
h1, h2, h3, h4 {
  margin: 0 0 0.6rem;
  color: var(--color-text);
  line-height: 1.15;
}

p {
  margin: 0 0 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

/* ===============================
   Utilitários
   =============================== */
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted, .muted { color: var(--color-muted) !important; }

.bt-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-clamp-2,
.bt-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bt-clamp-2 { -webkit-line-clamp: 2; }
.bt-clamp-3 { -webkit-line-clamp: 3; }

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus {
  outline: none;
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ===============================
   Variáveis globais de layout
   =============================== */
:root {
  --color-icon: var(--color-text);
  --icon-opacity: 0.92;
  --icon-filter: none;
  --icon-opacity-img: 0.92;

  --sidebar-width: 250px; /* legado */
  --bt-app-max: 1120px;

  --bt-header-h-desktop: 64px;
  --bt-header-h-mobile-top: 56px;
  --bt-header-h-mobile-bottom: 66px;

  --bt-gutter: clamp(16px, 2.2vw, 28px);
}

/* ===============================
   Ícones theme-aware
   =============================== */
.bt-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--color-icon, currentColor);
  opacity: var(--icon-opacity);

  -webkit-mask-image: var(--bt-icon-src);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: var(--bt-icon-src);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.bt-icon.sm { width: 16px; height: 16px; }
.bt-icon.md { width: 18px; height: 18px; }
.bt-icon.lg { width: 22px; height: 22px; }
.bt-icon.xl { width: 26px; height: 26px; }

.menu-item:hover .bt-icon,
button:hover .bt-icon,
a:hover .bt-icon {
  opacity: 1;
}

.menu-item.active .bt-icon {
  background: var(--color-primary);
  opacity: 1;
}

/* ===============================
   LEGADO: ícones via <img>
   =============================== */
.menu-item img,
.notification-btn img,
.mobile-menu-btn img,
.sidebar-toggle img,
.mobile-menu-logo img,
.sidebar-logo img {
  opacity: var(--icon-opacity-img);
  filter: var(--icon-filter);
}

.menu-item:hover img,
.notification-btn:hover img,
button:hover img,
a:hover img {
  opacity: 1;
}

.menu-item.active img {
  opacity: 1;
}

/* ===============================
   Layout principal
   =============================== */
.main-container {
  display: block;
  min-height: 100vh;
  width: 100%;
}

.content {
  width: 100%;
  margin: 0 !important;
  padding: calc(var(--bt-header-h-desktop) + 24px) var(--bt-gutter) 2rem;
  box-sizing: border-box;
}

section {
  max-width: var(--bt-app-max);
  margin-left: auto;
  margin-right: auto;
}

.content-inner,
.page-container,
.dashboard-container {
  max-width: var(--bt-app-max);
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   Header universal (desktop)
   =============================== */
.app-header,
[data-role="app-header"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bt-header-h-desktop);
  z-index: 1000;

  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}

.app-header-inner {
  height: 100%;
  max-width: calc(var(--bt-app-max) + (var(--bt-gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--bt-gutter);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(320px, 1fr);
  align-items: center;
  gap: 18px;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--color-text);
}

.app-brand img {
  width: 22px;
  height: 22px;
  display: block;
}

.app-brand span {
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  transition: var(--transition-theme);
  font-weight: 600;
  font-size: 0.92rem;
}

.app-nav a:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.app-nav a.active {
  background: var(--color-active);
  color: var(--color-primary);
  border-color: var(--color-border-soft);
}

.app-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
}

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-2) 80%, transparent);
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
}

.app-select {
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--input-bg);
  color: var(--color-text);
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1;
}

.app-logout {
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  border: 1px solid transparent;
  background: var(--color-danger);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-theme);
}

.app-logout:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ===============================
   Cards / surfaces
   =============================== */
.card,
.test-body,
.question-box,
.report-section,
.report-summary,
.login-card,
.page-container,
.dashboard-container,
.history-card,
.widget,
.test-card,
.benefit-card,
.modal,
.modal-content {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: var(--transition-theme);
}

.inner,
.card .inner,
.widget .inner,
.modal .inner,
.panel-inner {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
}

.card,
.widget,
.test-card,
.history-card,
.benefit-card,
.report-section,
.report-summary {
  padding: 1.25rem;
}

/* ===============================
   Sidebar legado neutralizado
   =============================== */
.sidebar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  overflow: visible !important;
  display: contents;
}

.sidebar-header,
.sidebar-footer,
.menu,
.wallet-box {
  max-width: var(--bt-app-max);
  margin-left: auto;
  margin-right: auto;
}

.sidebar-toggle {
  display: none !important;
}

/* ===============================
   Menu item base
   =============================== */
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition-theme);
  border: 1px solid transparent;
}

.menu-item img {
  width: 18px;
  height: 18px;
}

.menu-item:hover {
  background: var(--color-hover);
}

.menu-item.active {
  background: var(--color-active);
  color: var(--color-primary);
  border: 1px solid var(--color-border-soft);
}

/* ===============================
   Wallet legado
   =============================== */
.wallet-box {
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius);
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.wallet-box:hover {
  transform: translateY(-2px);
}

.wallet-value {
  font-size: 1.25rem;
  font-weight: 800;
}

.wallet-label {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* ===============================
   Footer btn compat
   =============================== */
.footer-btn {
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition-theme);
}

.footer-btn:hover {
  background: var(--color-hover);
}

.footer-btn-primary,
.mobile-menu-btn-primary {
  background: var(--color-danger);
  border: 1px solid transparent;
  color: #fff;
}

/* ===============================
   Botões
   =============================== */
.btn,
button.primary,
button[type="submit"] {
  background: linear-gradient(130deg, var(--color-primary), var(--color-secondary));
  border: none;
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  background-size: 200% 200%;
  transition: var(--transition-theme);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover,
button.primary:hover,
button[type="submit"]:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.btn:active,
button.primary:active,
button[type="submit"]:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-hover);
}

/* ===============================
   Inputs
   =============================== */
input,
select,
textarea {
  background: var(--input-bg);
  color: var(--color-text);
  border: 1px solid var(--input-border);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.25;
  transition: var(--transition-theme);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-placeholder);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
}

/* ===============================
   Chips / tags
   =============================== */
.chip,
.pill,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--color-text-secondary);
  line-height: 1;
  white-space: nowrap;
}

/* ===============================
   Modal
   =============================== */
.modal {
  background: color-mix(in srgb, var(--color-bg) 40%, transparent);
  backdrop-filter: blur(10px);
  border: none;
  box-shadow: none;
}

.modal-content {
  background: var(--color-elevated);
}

/* ===============================
   LEGADO MOBILE (mantido, mas não é a fonte principal)
   =============================== */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-bottom: 1px solid var(--color-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bt-header-h-mobile-top);
  z-index: 1100;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: max(0.6rem, env(safe-area-inset-top));
}

.mobile-logo {
  width: 30px;
}

.mobile-center span {
  font-weight: 700;
  color: var(--color-text);
}

.mobile-menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn img {
  width: 23px;
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-bg) 35%, black);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  flex-direction: column;
  padding: 1.4rem;
  z-index: 1050;
  box-sizing: border-box;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-menu-logo img {
  width: 28px;
}

.mobile-menu-close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.mobile-menu-content a {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-size: 1rem;
}

.mobile-menu-btn-row {
  margin-top: 1rem;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9rem;
}

/* ===============================
   MOBILE REAL — alinhado com sidebar.html atual
   =============================== */
#mobileHeader,
#mobileBottomNav,
#mobileMenu {
  display: none;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: var(--bt-header-h-mobile-top);
  }

  .content {
    padding:
      calc(var(--bt-header-h-mobile-top) + 18px)
      18px
      calc(2rem + var(--bt-header-h-mobile-bottom) + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 100%;
  }

  section,
  .page-container,
  .dashboard-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .card,
  .history-card,
  .test-card,
  .wallet-balance,
  .wallet-card,
  .benefit-card {
    width: 100%;
  }

  /* desktop header some no mobile */
  .app-nav {
    display: none;
  }

  .app-header-inner {
    grid-template-columns: 1fr auto;
  }

  /* fonte oficial mobile */
  #mobileHeader {
    display: grid;
  }

  #mobileBottomNav {
    display: grid;
  }

  #mobileMenu {
    display: none;
  }

  #mobileMenu.open {
    display: flex;
  }
}

@media (max-width: 600px) {
  .content {
    padding:
      calc(var(--bt-header-h-mobile-top) + 16px)
      16px
      calc(2rem + var(--bt-header-h-mobile-bottom) + env(safe-area-inset-bottom, 0px));
  }
}

/* ===============================
   Patch seguro — drag & drop / anti seleção
   =============================== */
.person-row,
.chip,
.menu-item,
.me-chip,
.me-btn {
  -webkit-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
}

.person-row {
  cursor: grab;
}

.person-row:active {
  cursor: grabbing;
}

[data-role="org-canvas"][data-dragover="true"] {
  outline: 1px solid var(--color-border);
  outline-offset: 2px;
}