/* Bothlo UI emergency fix v2.
   Small, targeted overrides only. Keeps the restored pre-merge visual system intact. */

/* ---------- Global header / menu ---------- */
.header-inner,
.app-header-inner {
  position: relative;
}

/* Keep the hamburger/global menu available on desktop and mobile. */
.global-menu {
  display: block;
  flex: 0 0 auto;
}
.global-menu-button {
  display: block;
}

/* Account dropdown must follow the active theme instead of forcing a dark panel. */
.account-panel {
  width: min(224px, calc(100vw - 24px));
  padding: 9px;
  gap: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}
.account-panel-heading {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
}
.account-panel-action {
  min-height: 40px;
  border-radius: 10px;
  color: var(--text-primary);
}
.account-panel-action:hover {
  background: var(--surface-interactive);
}
.account-logout-action {
  margin-top: 2px;
  color: var(--danger);
}

/* ---------- Persistent 4-item primary switch ---------- */
.home-view-switch-wrap,
.global-view-switch-wrap {
  width: min(calc(100% - 40px), var(--container, 1180px));
  margin-inline: auto;
  padding-top: 18px;
  display: flex;
  justify-content: center;
}

.home-view-switch,
.global-view-switch {
  width: fit-content;
  min-width: 500px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-interactive);
  box-shadow: none;
}

.home-view-tab,
.global-view-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: .84rem;
  font-weight: 820;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.home-view-tab:hover,
.global-view-link:hover {
  background: var(--surface);
  color: var(--text-primary);
}
.home-view-tab[aria-selected="true"],
.global-view-link[aria-current="page"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Keep the injected switch present under the header on Archive/Ranking/Profile/etc. */
.global-view-switch-wrap + .app-main {
  padding-top: 34px;
}

/* ---------- Profile ---------- */
/* No card should move when the pointer moves/hovers on My Profile. */
[data-app-page="profile"] .profile-day-card,
[data-app-page="profile"] .profile-summary,
[data-app-page="profile"] .profile-form-card,
[data-app-page="profile"] .profile-record-stat {
  transform: none !important;
}
[data-app-page="profile"] .profile-record-stat:hover,
[data-app-page="profile"] .profile-day-card:hover,
[data-app-page="profile"] .profile-summary:hover,
[data-app-page="profile"] .profile-form-card:hover {
  transform: none !important;
}

/* Make the expanded profile stats readable without turning them into a giant wall. */
.profile-summary {
  position: relative;
}
.profile-record {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.profile-record-stat,
.profile-record-stat:not(.profile-points-stat):not(.profile-streak-stat),
.profile-points-stat,
.profile-streak-stat {
  grid-column: span 1;
  min-height: 72px;
  padding: 10px 8px;
}
.profile-points-stat {
  grid-column: span 2;
}
.profile-record-stat strong {
  font-size: 1.1rem;
}
.profile-record-stat span {
  font-size: .58rem;
  line-height: 1.25;
}

/* Security/account controls remain obvious instead of looking missing. */
.profile-security-card {
  display: block;
  overflow: hidden;
}
.profile-security-summary {
  background: transparent;
}
.profile-security-content {
  display: block;
}

/* ---------- Light theme visibility ---------- */
html[data-theme="light"] .account-panel,
html[data-theme="light"] .global-menu-panel {
  background: #fff;
  border-color: rgba(30,43,72,.18);
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(31,43,70,.14);
}
html[data-theme="light"] .account-panel-action:hover,
html[data-theme="light"] .global-menu-link:hover,
html[data-theme="light"] .global-menu-link[aria-current="page"] {
  background: #eef2f8;
  color: var(--text-primary);
}
html[data-theme="light"] .home-view-switch,
html[data-theme="light"] .global-view-switch {
  background: #e7ecf5;
  border-color: rgba(30,43,72,.16);
}
html[data-theme="light"] .home-view-tab[aria-selected="true"],
html[data-theme="light"] .global-view-link[aria-current="page"],
html[data-theme="light"] .home-view-tab:hover,
html[data-theme="light"] .global-view-link:hover {
  background: #fff;
  color: #151a2d;
}
html[data-theme="light"] .profile-summary,
html[data-theme="light"] .profile-day-card,
html[data-theme="light"] .profile-form-card,
html[data-theme="light"] .profile-security-card {
  background: #fff;
  border-color: rgba(30,43,72,.13);
}
html[data-theme="light"] .profile-record-stat {
  background: #f4f7fb;
  border-color: rgba(30,43,72,.14);
  color: var(--text-primary);
}
html[data-theme="light"] .profile-record-stat:hover {
  background: #f4f7fb;
  border-color: rgba(30,43,72,.20);
}
html[data-theme="light"] .profile-points-stat,
html[data-theme="light"] .profile-streak-stat {
  background: #fff8e7;
  border-color: rgba(152,96,0,.20);
}
html[data-theme="light"] .profile-points-stat strong,
html[data-theme="light"] .profile-streak-stat strong,
html[data-theme="light"] .profile-streak-stat svg {
  color: #8a5700;
}
html[data-theme="light"] .profile-security-content,
html[data-theme="light"] .profile-security-summary,
html[data-theme="light"] .profile-danger-zone,
html[data-theme="light"] .avatar-upload-zone {
  border-color: rgba(30,43,72,.13);
}
html[data-theme="light"] .profile-danger-zone {
  background: #fff7f8;
}
html[data-theme="light"] .avatar-upload-zone {
  background: #f7f9fc;
}
html[data-theme="light"] .ranking-table,
html[data-theme="light"] .ranking-table th,
html[data-theme="light"] .ranking-table td {
  color: var(--text-primary);
}

/* New shared vote/discussion pieces should inherit the same visual system. */
.pair-vote-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.shared-debate-comments.argument-comments {
  border-color: var(--border);
  background: var(--surface);
}
html[data-theme="light"] .pair-vote-panel,
html[data-theme="light"] .shared-debate-comments.argument-comments {
  background: #fff;
  border-color: rgba(30,43,72,.13);
}

@media (max-width: 760px) {
  .home-view-switch-wrap,
  .global-view-switch-wrap {
    width: min(calc(100% - 28px), var(--container, 1180px));
    padding-top: 14px;
  }
  .home-view-switch,
  .global-view-switch {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-view-tab,
  .global-view-link {
    min-height: 42px;
    padding-inline: 10px;
    font-size: .78rem;
  }
  .profile-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-points-stat {
    grid-column: span 2;
  }
}