/* ====================================================================
   ASPA MEMBER PORTAL - STYLESHEET
   ====================================================================
   Loaded alongside ../../css/style.css (the public site's stylesheet)
   to reuse its CSS variables, buttons, and form styles. This file only
   adds what's specific to the logged-in portal: the app shell/nav,
   login card, OTP input, directory grid, and Knowledge Center tabs.
   ==================================================================== */

body { background: var(--color-offwhite); }

/* ---------- App shell (every page except login) ---------- */
.portal-header {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-sm) 0;
}
/* Mobile-first: stacked - a top row (brand left, profile icon right)
   with the nav centered on its own row below. At the 640px breakpoint
   this reflows into a single row with the brand pinned to the far
   left, the profile icon pinned to the far right corner, and the nav
   truly centered between them regardless of how wide either side is
   (CSS Grid, not flexbox - flexbox can't center a middle item against
   the container as a whole when its neighbors have unequal widths). */
.portal-header .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.portal-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.portal-header .brand { display: flex; align-items: center; gap: var(--space-xs); }
.portal-header .brand img { height: 24px; }
.portal-header .brand span { font-weight: 700; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }

.portal-profile-wrap { position: relative; }
.portal-profile-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  flex-shrink: 0;
}
.portal-profile-icon-btn img { width: 100%; height: 100%; object-fit: cover; }
.portal-profile-dropdown {
  position: absolute;
  top: 48px;
  right: 0; /* opens leftward from the icon, which now sits in the corner */
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(6, 26, 63, 0.2);
  min-width: 150px;
  overflow: hidden;
  z-index: 150;
}
.portal-profile-dropdown a,
.portal-profile-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.portal-profile-dropdown a:hover,
.portal-profile-dropdown button:hover { background: var(--color-offwhite); }

.portal-nav { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.portal-nav a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.4rem 0;
}
.portal-nav a.is-active,
.portal-nav a:hover { color: var(--color-white); }

.portal-main { padding-block: var(--space-lg); }

/* ---------- Login page ---------- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.login-card {
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid rgba(6, 26, 63, 0.08);
  padding: var(--space-lg);
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.login-card img.brand-logo { height: 40px; margin: 0 auto var(--space-md); }
.login-card h1 { font-size: 1.4rem; }
.login-card p.lead { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.otp-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
}
.login-message {
  border-radius: var(--radius);
  padding: var(--space-sm);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
  text-align: left;
}
.login-message--error { background: #FDECEC; color: #B3261E; }
.login-message--info { background: rgba(0, 134, 255, 0.08); color: var(--color-blue-deep); }

/* Google sign-in button - follows Google's brand guidelines loosely
   (white background, official "G" mark, "Sign in with Google" label,
   subtle border) without pulling in their button-rendering JS/CSS. */
.google-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-white);
  border: 1px solid #DADCE0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3C4043;
  cursor: pointer;
}
.google-signin-btn:hover { background: #F8F9FA; }
.google-signin-btn:disabled { opacity: 0.6; cursor: default; }

.login-toggle-link {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-blue);
  cursor: pointer;
  text-align: center;
}
.login-toggle-link:hover { text-decoration: underline; }

.login-divider {
  border: none;
  border-top: 1px solid rgba(6, 26, 63, 0.1);
  margin: var(--space-md) 0;
}
#recaptcha-container { display: flex; justify-content: center; margin: var(--space-sm) 0; }

/* ---------- Profile page ---------- */
.profile-card {
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid rgba(6, 26, 63, 0.08);
  padding: var(--space-lg);
  max-width: 520px;
}
.profile-field { padding-block: var(--space-sm); border-bottom: 1px solid rgba(6, 26, 63, 0.06); }
.profile-field:last-child { border-bottom: none; }
.profile-field .field-label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.profile-field .field-value { font-size: 1.05rem; color: var(--color-navy); font-weight: 600; }
.membership-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.membership-badge--active { background: rgba(11, 192, 239, 0.15); color: var(--color-blue-deep); }

/* ---------- Directory page ---------- */
.directory-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.directory-filters input,
.directory-filters select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #C7CBD6;
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
.directory-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.directory-card {
  background: var(--color-white);
  border: 1px solid rgba(6, 26, 63, 0.08);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.directory-card .name { font-weight: 700; color: var(--color-navy); font-size: 1.05rem; }
.directory-card .meta { color: var(--color-text-muted); font-size: 0.9rem; margin: 0.25rem 0 var(--space-sm); }
.directory-card .contact-block {
  background: var(--color-offwhite);
  border-radius: 8px;
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  font-size: 0.9rem;
}
.directory-card .request-status {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---------- Knowledge Center ---------- */
.kc-tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.kc-tab {
  background: var(--color-white);
  border: 1px solid rgba(6, 26, 63, 0.12);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-navy);
}
.kc-tab.is-active { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white); }
.kc-item {
  background: var(--color-white);
  border: 1px solid rgba(6, 26, 63, 0.08);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}
.kc-item .kc-type-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-blue-deep);
  background: rgba(0, 134, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
}
.kc-item .kc-title { font-weight: 700; color: var(--color-navy); }
.kc-item .kc-description { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.25rem; }

/* ---------- Generic empty/loading state ---------- */
.portal-empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-lg) 0;
}

@media (min-width: 640px) {
  .directory-filters { flex-direction: row; }
  .directory-grid { grid-template-columns: repeat(2, 1fr); }

  /* Header: single row - brand far left, nav truly centered, profile
     icon in the far right corner. "display: contents" unwraps
     .portal-header-top-row so its two children (brand, profile-wrap)
     become direct grid items alongside .portal-nav. */
  .portal-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .portal-header-top-row { display: contents; }
  .portal-header-top-row .brand { grid-column: 1; justify-self: start; }
  .portal-profile-wrap { grid-column: 3; justify-self: end; }
  .portal-nav { grid-column: 2; justify-self: center; }
}
@media (min-width: 900px) {
  .directory-grid { grid-template-columns: repeat(3, 1fr); }
}