/* App shell: fixed left sidebar (nav) + scrolling content column with a
   photo hero up top, replacing the old single horizontal topbar. */
.portal-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
}

/* Admin dashboard reuses this same sidebar shell but has no utility-bar
   above it (that's a portal/checkout-only element), so it needs the full
   viewport height rather than the 60px-short calc above. No hero image
   either — this is Mia's own tool, not attendee-facing branding.
   Desktop-only (min-width matches the mobile breakpoint below) — otherwise
   this ID-scoped rule outranks the mobile reset on specificity and the
   collapsed horizontal nav bar ends up vertically centered in a
   full-height empty container. */
@media (min-width: 861px) {
  #dashboard-screen .portal-layout,
  #dashboard-screen .portal-sidebar {
    min-height: 100vh;
  }
}

#dashboard-screen .dashboard-main {
  max-width: 1400px;
}

.tab-hidden {
  display: none !important;
}

.portal-sidebar {
  width: 240px;
  flex-shrink: 0;
  min-height: calc(100vh - 60px);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
}

.portal-sidebar-logo {
  height: 36px;
  margin: 4px 0 28px 10px;
}

/* Notification bell — lets Mia see recent attendee-portal logins without
   getting emailed on every single one (unworkable at thousands of
   attendees). Lives in the sidebar so it's visible from every tab. */
.login-notif {
  position: relative;
  margin-bottom: 16px;
}

.login-notif-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
}

.login-notif-btn:hover {
  border-color: var(--gold);
}

.login-notif-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.login-notif-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--gold);
  color: #14140f;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.login-notif-panel-header {
  position: sticky;
  top: 0;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.login-notif-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.login-notif-row:last-child {
  border-bottom: none;
}

.login-notif-row strong {
  font-size: 13px;
}

.login-notif-row span {
  font-size: 12px;
  color: var(--text-dim);
}

.login-notif-empty {
  padding: 20px 16px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

.login-notif-viewall {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--gold);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.login-notif-viewall:hover {
  background: var(--surface-2);
}

.portal-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.portal-nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.portal-nav-item.is-active {
  background: var(--gold);
  color: #1a0f08;
}

#portal-nav-logout-btn {
  margin-top: 8px;
  padding-top: 19px;
  border-top: 1px solid var(--border);
}

.portal-nav-icon {
  font-size: 16px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.portal-sidebar-footer {
  margin-top: auto;
  padding: 12px 14px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  word-break: break-word;
}

/* Extends the same event photo used in the hero band into an ambient
   blurred backdrop behind the rest of the tab content, so scrolling past
   the hero doesn't drop into flat black — same technique as the login
   screen below. Panels keep their own solid --surface background, so
   they read as cards floating over the photo rather than blending into it. */
.portal-content {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.portal-content::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: url("../assets/fearless-convention.jpg") center 30% / cover no-repeat;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.1);
  z-index: -2;
}

.portal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.94));
  z-index: -1;
}

.portal-hero {
  position: relative;
  height: 220px;
  background: url("../assets/fearless-convention.jpg") center 35% / cover no-repeat;
}

.portal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.9) 100%);
}

.portal-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 40px 22px;
}

.portal-hero-content h1 {
  margin: 0;
  font-size: 28px;
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.portal-tab-panel.hidden {
  display: none;
}

/* Mobile hamburger nav — attendee portal only (#portal-app-screen). Mia's
   admin dashboard keeps its horizontal scrolling tab row below, since it
   has its own separate ID and isn't targeted by these rules. */
.portal-mobile-nav-toggle {
  display: none;
}

@media (max-width: 860px) {
  #portal-app-screen .portal-sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    position: relative;
  }

  #portal-app-screen .portal-mobile-nav-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  #portal-app-screen .portal-mobile-nav-toggle-icon {
    font-size: 16px;
    line-height: 1;
  }

  #portal-app-screen .portal-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    z-index: 30;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  #portal-app-screen .portal-nav.is-open {
    display: flex;
  }

  #portal-app-screen .portal-nav-item {
    white-space: normal;
  }

  #portal-app-screen .portal-sidebar-footer {
    display: none;
  }
}

@media (max-width: 860px) {
  .portal-layout {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  .portal-sidebar {
    width: 100%;
    min-height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    overflow-x: auto;
  }

  .portal-sidebar-logo {
    display: none;
  }

  .portal-nav {
    flex-direction: row;
    flex: 1;
  }

  .portal-nav-item {
    white-space: nowrap;
  }

  .portal-sidebar-footer {
    margin-top: 0;
    padding: 0 0 0 14px;
    border-top: none;
    border-left: 1px solid var(--border);
    flex-shrink: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portal-hero {
    height: 280px;
  }

  .portal-hero-content {
    padding: 0 20px 20px;
  }

  .portal-hero-content h1 {
    font-size: 26px;
  }

  /* The floating support bubble duplicates the FAQ tab's exact content
     (same search, same list, same "Still need help" footer — see
     renderFaqList() in portal.js) and just eats screen space on phones.
     Scoped to .portal-body so event.html's own copy of this widget is
     untouched. */
  .portal-body .support-fab,
  .portal-body .support-panel {
    display: none !important;
  }
}

/* Login screen: centered on a dimmed, blurred event photo instead of
   floating in a plain black void. Heavily blurred/darkened on purpose —
   this photo has its own event's promo text baked in (dates, event name),
   and an attendee logging in for a *different* event shouldn't see readable
   text that isn't about their event. Only the color/mood should read. */
#portal-login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

#portal-login-screen::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: url("../assets/fearless-convention.jpg") center 30% / cover no-repeat;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.1);
}

#portal-login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.82), rgba(10, 10, 10, 0.93));
}

#portal-login-screen .login-card {
  position: relative;
  z-index: 1;
  background: rgba(28, 31, 34, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.section-icon {
  margin-right: 8px;
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-summary-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-summary-info strong {
  font-size: 18px;
}

.profile-summary-info span {
  color: var(--text-dim);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-subheading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.account-subsection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.account-subsection select {
  margin-bottom: 20px;
}

.tab-faq-footer {
  border-top: none;
  padding-top: 14px;
}

.portal-check-email {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.portal-check-email p:first-child {
  color: var(--success);
  font-weight: 600;
}

.portal-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.portal-main section {
  margin-bottom: 36px;
}

.portal-main h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.ticket-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ticket-card-thumb {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.ticket-card-thumb-fallback {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.ticket-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket-card-info strong {
  display: block;
  margin-bottom: 4px;
}

.ticket-card-info span {
  color: var(--text-dim);
  font-size: 13px;
}

.ticket-calendar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}

.calendar-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.calendar-link:hover {
  text-decoration: underline;
}

.referral-card {
  margin-top: 20px;
}

.referral-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.referral-code-row code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.referral-usage-text {
  margin: 0;
}

.agenda-item {
  display: flex;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

.agenda-item-time {
  flex-shrink: 0;
  width: 150px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}

.agenda-item-body strong {
  display: block;
  margin-bottom: 4px;
}

.agenda-item-body p {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.agenda-item-event,
.agenda-item-location {
  display: inline-block;
  color: var(--text-dim);
  font-size: 12px;
  margin-right: 12px;
}

@media (max-width: 640px) {
  .agenda-item {
    flex-direction: column;
    gap: 6px;
  }

  .agenda-item-time {
    width: auto;
  }
}

.ticket-card-qr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 14px;
  border-left: 1px dashed var(--border);
}

.ticket-card-qr .qr-box {
  background: #fff;
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
}

@media (max-width: 640px) {
  .ticket-card {
    flex-wrap: wrap;
  }

  .ticket-card-body {
    flex-wrap: wrap;
  }

  .ticket-card-qr {
    border-left: none;
    padding-left: 0;
    margin-left: auto;
  }
}

.ticket-status-pill {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ticket-status-valid {
  background: rgba(76, 175, 125, 0.15);
  color: var(--success);
}

.ticket-status-used {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
}

.live-access-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

#portal-payment-history.panel .data-table {
  margin: 0;
}

#portal-payment-history.panel:empty {
  display: none;
}

.live-access-card strong {
  display: block;
  margin-bottom: 8px;
}

.live-access-card .empty-text {
  margin: 0;
}

.portal-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 32px 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.portal-footer .site-logo {
  height: 40px;
  margin: 0 auto 14px;
}

.portal-footer a {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  transition: color 0.15s;
}

.portal-footer a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.portal-footer .footer-copyright {
  margin: 0;
}