/*
 * obsidian_v30.css
 *
 * V30 User Website UX Restructuring — Phase 1 (Asset Strategy).
 *
 * This file is strictly ADDITIVE. It defines new, unused-until-wired
 * primitives for later phases of docs/V30_USER_WEBSITE_UX_RESTRUCTURING_PATCH_PLAN.md:
 *   - .view-switch          (Phase 3: Wagers page Browse/My Match Rooms switch)
 *   - .wizard-step-indicator (Phase 6: Profile KYC step wizard)
 *   - .action-console-trigger (Phase 6: Wallet deposit/withdraw modal triggers)
 *
 * No existing class in obsidian_v93.css is renamed, overridden, or removed
 * by this file. No template currently references any selector defined here;
 * that wiring happens in later phases. All tokens below reuse the existing
 * :root custom properties defined in obsidian_v93.css (--line, --line-strong,
 * --text-main, --text-dim, --accent, --panel, --shadow) so new components
 * stay visually consistent with the live theme without introducing new
 * color values.
 */

/* ------------------------------------------------------------------ */
/* View Switch — segmented mode toggle (Phase 3)                       */
/* ------------------------------------------------------------------ */

.view-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}

.view-switch-btn {
  width: auto;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.view-switch-btn:hover {
  border-color: rgba(177, 199, 141, 0.32);
  color: var(--text-main);
  filter: none;
}

.view-switch-btn.is-active {
  border-color: rgba(177, 199, 141, 0.5);
  background: rgba(177, 199, 141, 0.1);
  color: var(--text-main);
}

.view-switch-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.action-console-trigger:focus-visible,
.wizard-step-nav .btn-inline:focus-visible,
.wizard-step-nav .btn-inline-compact:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* A view-switch pane hidden by JS. Guarded so that if JavaScript never
   runs (see user_flow_v30.js "no-JS fallback" behavior), no pane carries
   this class and everything stays visible/stacked. */
.view-switch-pane[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Wizard Step Indicator — multi-step modal flow (Phase 6)             */
/* ------------------------------------------------------------------ */

.wizard-step-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
}

.wizard-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(8, 8, 8, 0.6);
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
}

.wizard-step.is-active {
  border-color: rgba(177, 199, 141, 0.55);
  color: var(--text-main);
  background: rgba(177, 199, 141, 0.14);
}

.wizard-step.is-complete {
  border-color: rgba(16, 185, 129, 0.5);
  color: #9bf5d0;
  background: rgba(16, 185, 129, 0.12);
}

.wizard-step-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  min-width: 12px;
}

.wizard-step-label {
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* A wizard step panel hidden by JS. Same guarded pattern as
   .view-switch-pane: absent class == everything visible, no-JS-safe. */
.wizard-step-panel[hidden] {
  display: none;
}

.wizard-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.wizard-step-nav .btn-inline,
.wizard-step-nav .btn-inline-compact {
  width: auto;
}

/* ------------------------------------------------------------------ */
/* Action Console Trigger — small buttons that open an existing        */
/* .mission-dialog-styled <dialog> instead of an always-open card      */
/* (Phase 6). Reuses the existing .mission-dialog dialog styling from  */
/* obsidian_v93.css; only the trigger button is new here.              */
/* ------------------------------------------------------------------ */

.action-console-trigger {
  width: auto;
  margin: 0;
  padding: 6px 14px;
}

.wallet-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 10px 0 14px;
}

.wallet-stat-card {
  min-height: 92px;
  justify-content: space-between;
}

.wallet-stat-label {
  display: block;
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wallet-stat-value {
  display: block;
  margin-top: 8px;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.action-console-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------------ */
/* Notification Bell + Popover (Phase 4)                               */
/* ------------------------------------------------------------------ */

.nav-notification-bell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-notification-bell .badge {
  min-width: 18px;
  text-align: center;
  line-height: 1;
}

.notification-popover {
  position: relative;
  margin: -2px 0 10px;
  border: 1px solid var(--line);
  background: rgba(8, 8, 8, 0.86);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  padding: 10px;
}

.notification-popover-list {
  display: grid;
  gap: 8px;
}

.notification-popover-item {
  margin: 0;
}

.notification-popover-actions {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .view-switch {
    width: 100%;
  }

  .view-switch-btn {
    width: 100%;
    justify-content: center;
  }

  .wallet-stats-grid {
    grid-template-columns: 1fr;
  }

  .action-console-triggers {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-console-trigger {
    width: 100%;
  }

  .wizard-step-indicator {
    flex-wrap: wrap;
  }

  .wizard-step-line {
    min-width: 0;
  }

  .wizard-step-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .wizard-step-nav .btn-inline,
  .wizard-step-nav .btn-inline-compact {
    width: 100%;
  }

  .notification-popover {
    margin-top: 8px;
  }
}