/* ============================================================
   Account Menu — navbar avatar, dropdown popover & feedback modal
   Shared across all post-login pages (homepage, subjects, workspace,
   important-dates, profile). Builds on the design tokens in
   variables.css and the navbar in home.css.
   ============================================================ */

/* ---- Avatar button (navbar entry to the personal center) ---- */
.navbar__avatar {
  --avatar-size: 40px;
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  background: var(--color-gradient);
  color: #fff;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform var(--transition-bounce), box-shadow var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}

/* Soft ring that animates in on hover / open */
.navbar__avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--color-accent-primary);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
  z-index: 2;
}

.navbar__avatar:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: var(--shadow-glow);
}

.navbar__avatar:hover::after,
.navbar__avatar[aria-expanded="true"]::after {
  opacity: 0.55;
  transform: scale(1);
}

.navbar__avatar:active {
  transform: scale(0.95);
}

.navbar__avatar:focus-visible {
  outline: none;
}
.navbar__avatar:focus-visible::after {
  opacity: 0.9;
  transform: scale(1);
}

.navbar__avatar-initials {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.navbar__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ---- Popover menu ----------------------------------------- */
.account-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 290px;
  max-width: calc(100vw - 24px);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform-origin: top right;
  transform: translateY(-10px) scale(0.94);
  transition: opacity var(--transition-base),
              transform var(--transition-smooth),
              visibility 0s linear var(--transition-base);
  pointer-events: none;
}

.account-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--transition-base),
              transform var(--transition-smooth),
              visibility 0s;
  pointer-events: auto;
}

.account-pop__card {
  position: relative;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* Little caret pointing at the avatar */
.account-pop__card::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--glass-bg-strong);
  border-left: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  transform: rotate(45deg);
}

/* Header: identity */
.account-pop__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  background: var(--color-gradient-subtle);
  border-bottom: 1px solid var(--glass-border);
}

.account-pop__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-gradient);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.account-pop__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-pop__identity {
  min-width: 0;
  flex: 1;
}

.account-pop__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-pop__email {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Item list */
.account-pop__list {
  padding: var(--spacing-sm);
}

.account-pop__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.account-pop__item:hover {
  background: rgba(0, 113, 227, 0.08);
  color: var(--color-text-primary);
}
.account-pop__item:active {
  transform: scale(0.985);
}

.account-pop__item-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-accent-primary);
  transition: background var(--transition-fast);
}
.account-pop__item-icon svg {
  width: 17px;
  height: 17px;
}
.account-pop__item:hover .account-pop__item-icon {
  background: rgba(0, 113, 227, 0.14);
}

.account-pop__item-label { flex: 1; }
.account-pop__item-chevron {
  color: var(--color-text-tertiary);
  opacity: 0.6;
  transition: transform var(--transition-fast);
}
.account-pop__item:hover .account-pop__item-chevron {
  transform: translateX(2px);
}

.account-pop__divider {
  height: 1px;
  margin: var(--spacing-sm) var(--spacing-md);
  background: var(--glass-border);
}

.account-pop__item--danger { color: var(--color-error); }
.account-pop__item--danger .account-pop__item-icon {
  background: rgba(255, 59, 48, 0.08);
  color: var(--color-error);
}
.account-pop__item--danger:hover {
  background: rgba(255, 59, 48, 0.1);
  color: var(--color-error);
}
.account-pop__item--danger:hover .account-pop__item-icon {
  background: rgba(255, 59, 48, 0.16);
}

/* Staggered reveal of the items when the menu opens */
.account-pop.is-open .account-pop__item {
  animation: accPopItem 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.account-pop.is-open .account-pop__item:nth-child(1) { animation-delay: 0.04s; }
.account-pop.is-open .account-pop__item:nth-child(2) { animation-delay: 0.08s; }
.account-pop.is-open .account-pop__item:nth-child(3) { animation-delay: 0.12s; }
.account-pop.is-open .account-pop__item:nth-child(4) { animation-delay: 0.16s; }
.account-pop.is-open .account-pop__item:nth-child(5) { animation-delay: 0.20s; }

@keyframes accPopItem {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Feedback modal (shared) ------------------------------- */
.fb-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background: rgba(20, 20, 22, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
}
.fb-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-base), visibility 0s;
}

.fb-modal__card {
  width: 100%;
  max-width: 460px;
  background: var(--color-bg-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform var(--transition-smooth), opacity var(--transition-base);
  max-height: calc(100dvh - 2 * var(--spacing-lg));
  overflow-y: auto;
}
.fb-modal.is-open .fb-modal__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.fb-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md);
}
.fb-modal__title {
  flex: 1;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.fb-modal__subtitle {
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
}
.fb-modal__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.fb-modal__close:hover { background: rgba(0, 0, 0, 0.08); color: var(--color-text-primary); transform: rotate(90deg); }
.fb-modal__close svg { width: 18px; height: 18px; }

.fb-modal__body { padding: 0 var(--spacing-xl) var(--spacing-md); }

.fb-field-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.fb-chip {
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fb-chip:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
.fb-chip.is-active {
  background: var(--color-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.fb-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 320px;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  resize: vertical;
  line-height: var(--line-height-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fb-textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.fb-textarea::placeholder { color: var(--color-text-tertiary); }

.fb-modal__note {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  line-height: var(--line-height-normal);
}

/* ── Feedback history (profile page) ───────────────────────── */
.fb-history {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.fb-history__empty,
.fb-history__loading {
  margin: 0;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.fb-history__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}
.fb-history__item--resolved { opacity: 0.86; }
.fb-history__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}
.fb-history__cat {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: capitalize;
}
.fb-history__date {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.fb-history__msg {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Admin reply attached to a feedback item */
.fb-history__item--replied { border-color: rgba(52, 199, 89, 0.4); }
.fb-history__reply {
  margin-top: var(--spacing-sm);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-success);
  background: rgba(52, 199, 89, 0.08);
}
.fb-history__reply-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
}
.fb-history__reply-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: #1e8e3e;
}
.fb-history__reply-date {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.fb-history__reply-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Status badges — mirror the admin console's status vocabulary */
.fb-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.fb-badge--new      { color: #1d6fe0; background: rgba(0, 113, 227, 0.10); border-color: rgba(0, 113, 227, 0.25); }
.fb-badge--resolved { color: #0f9d58; background: rgba(52, 168, 83, 0.12);  border-color: rgba(52, 168, 83, 0.28); }
.fb-badge--deferred { color: #b8860b; background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.35); }

.fb-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
}

/* Buttons reused inside modal + profile page */
.acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.acc-btn--primary {
  background: var(--color-gradient);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.acc-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-strong); }
.acc-btn--primary:active { transform: translateY(0) scale(0.98); }
.acc-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.acc-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.acc-btn--ghost:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--color-text-tertiary); }
.acc-btn--danger {
  background: var(--color-error);
  color: #fff;
}
.acc-btn--danger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 59, 48, 0.32); }
.acc-btn--danger:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 767px) {
  /* On phones the username + standalone sign-out are folded into the
     avatar menu, so hide their outside duplicates. */
  #navUserEmail,
  #navSignOut { display: none !important; }

  .navbar__avatar { --avatar-size: 38px; }

  /* Anchor the popover to the viewport edge so it never overflows. */
  .account-pop {
    position: fixed;
    top: calc(var(--navbar-height) + 8px);
    right: 12px;
    left: auto;
    width: min(320px, calc(100vw - 24px));
  }
  .account-pop__card::before { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar__avatar,
  .account-pop,
  .account-pop__item,
  .fb-modal,
  .fb-modal__card,
  .acc-btn { transition-duration: 1ms; animation: none !important; }
}