/* ============================================================================
   member-role-hubs.css — Scoped styles for Member Portal Single-Portal Role Hubs
   (#tab-event-desk & #tab-treasurer)
   Built strictly from oecta-tokens.css — zero raw hex, zero global rules,
   mobile-first (375px) + dark mode via semantic --oecta-* custom properties.
   ============================================================================ */

#tab-event-desk .mrh-shell,
#tab-treasurer .mrh-shell {
  width: min(100%, var(--oecta-content-max));
  margin: 0 auto;
  padding: var(--oecta-space-lg) var(--oecta-space-md) var(--oecta-space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-lg);
  color: var(--oecta-on-surface);
}

@media (min-width: 768px) {
  #tab-event-desk .mrh-shell,
  #tab-treasurer .mrh-shell {
    padding: var(--oecta-space-xl) var(--oecta-space-xl) var(--oecta-space-3xl);
    gap: var(--oecta-space-xl);
  }
}

#tab-event-desk .mrh-mono,
#tab-treasurer .mrh-mono {
  font-family: var(--oecta-font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */
#tab-event-desk .mrh-head,
#tab-treasurer .mrh-head {
  background: var(--oecta-gradient-navy);
  color: var(--oecta-on-primary);
  border-radius: var(--oecta-radius-xl);
  padding: var(--oecta-space-lg);
  box-shadow: var(--oecta-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-md);
}

@media (min-width: 768px) {
  #tab-event-desk .mrh-head,
  #tab-treasurer .mrh-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--oecta-space-xl);
  }
}

#tab-event-desk .mrh-head__titles,
#tab-treasurer .mrh-head__titles {
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-xs);
}

#tab-event-desk .mrh-eyebrow,
#tab-treasurer .mrh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-xs);
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oecta-on-primary);
  opacity: 0.88;
}

#tab-event-desk .mrh-title,
#tab-treasurer .mrh-title {
  margin: 0;
  font-family: var(--oecta-font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem);
  font-weight: var(--oecta-weight-extrabold);
  color: var(--oecta-on-primary);
  line-height: 1.2;
}

#tab-event-desk .mrh-sub,
#tab-treasurer .mrh-sub {
  margin: 0;
  font-size: var(--oecta-text-base);
  color: var(--oecta-on-primary);
  opacity: 0.9;
}

#tab-event-desk .mrh-head__meta,
#tab-treasurer .mrh-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-term-pill,
#tab-treasurer .mrh-term-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-xs);
  padding: var(--oecta-space-xs) var(--oecta-space-md);
  border-radius: var(--oecta-radius-pill);
  background: var(--oecta-glass-border);
  color: var(--oecta-on-primary);
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-semibold);
}

/* ── KPI Strip ────────────────────────────────────────────────────────────── */
#tab-event-desk .mrh-kpis,
#tab-treasurer .mrh-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--oecta-space-md);
}

#tab-event-desk .mrh-kpi,
#tab-treasurer .mrh-kpi {
  background: var(--oecta-surface-lowest);
  border-radius: var(--oecta-radius-lg);
  padding: var(--oecta-space-lg);
  box-shadow: var(--oecta-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-xs);
}

#tab-event-desk .mrh-kpi__label,
#tab-treasurer .mrh-kpi__label {
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--oecta-text-muted);
}

#tab-event-desk .mrh-kpi__value,
#tab-treasurer .mrh-kpi__value {
  font-family: var(--oecta-font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: var(--oecta-text-xl);
  font-weight: var(--oecta-weight-extrabold);
  color: var(--oecta-on-surface);
}

#tab-event-desk .mrh-kpi__sub,
#tab-treasurer .mrh-kpi__sub {
  font-size: var(--oecta-text-xs);
  color: var(--oecta-text-muted);
}

/* ── Controls, Inputs & Buttons (44px touch targets, 16px floor) ─────────── */
#tab-event-desk .mrh-toolbar,
#tab-treasurer .mrh-toolbar {
  background: var(--oecta-surface-low);
  border-radius: var(--oecta-radius-lg);
  padding: var(--oecta-space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-field,
#tab-treasurer .mrh-field {
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-xs);
  flex: 1 1 14rem;
}

#tab-event-desk .mrh-label,
#tab-treasurer .mrh-label {
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-semibold);
  color: var(--oecta-on-surface-variant);
}

#tab-event-desk .mrh-input,
#tab-event-desk .mrh-select,
#tab-treasurer .mrh-input,
#tab-treasurer .mrh-select {
  min-height: 2.75rem;
  padding: var(--oecta-space-sm) var(--oecta-space-md);
  border-radius: var(--oecta-radius-md);
  border: 0.0625rem solid var(--oecta-outline-variant);
  background: var(--oecta-surface-lowest);
  color: var(--oecta-on-surface);
  font-family: var(--oecta-font-body);
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

#tab-event-desk .mrh-input::placeholder,
#tab-treasurer .mrh-input::placeholder {
  color: var(--oecta-text-subtle);
}

#tab-event-desk .mrh-btn,
#tab-treasurer .mrh-btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: var(--oecta-space-sm) var(--oecta-space-lg);
  border-radius: var(--oecta-radius-md);
  border: none;
  font-family: var(--oecta-font-body);
  font-size: var(--oecta-text-base);
  font-weight: var(--oecta-weight-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oecta-space-xs);
  transition: transform var(--oecta-duration-instant) var(--oecta-ease),
              background var(--oecta-duration-fast) var(--oecta-ease);
}

#tab-event-desk .mrh-btn--primary,
#tab-treasurer .mrh-btn--primary {
  background: var(--oecta-primary-container);
  color: var(--oecta-on-primary-container);
}

#tab-event-desk .mrh-btn--accent,
#tab-treasurer .mrh-btn--accent {
  background: var(--oecta-accent-container);
  color: var(--oecta-on-surface);
}

#tab-event-desk .mrh-btn--ghost,
#tab-treasurer .mrh-btn--ghost {
  background: var(--oecta-surface-lowest);
  color: var(--oecta-on-surface);
  box-shadow: var(--oecta-shadow-xs);
}

#tab-event-desk .mrh-btn--danger,
#tab-treasurer .mrh-btn--danger {
  background: var(--oecta-error-soft);
  color: var(--oecta-error-text);
}

#tab-event-desk .mrh-btn[disabled],
#tab-treasurer .mrh-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

#tab-event-desk :where(button, a, input, select, textarea, [tabindex]):focus-visible,
#tab-treasurer :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--oecta-focus-ring);
}

/* ── Tabs (ARIA tablist) ──────────────────────────────────────────────────── */
#tab-event-desk .mrh-tabs,
#tab-treasurer .mrh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oecta-space-xs);
  background: var(--oecta-surface-low);
  padding: var(--oecta-space-xs);
  border-radius: var(--oecta-radius-lg);
}

#tab-event-desk .mrh-tab,
#tab-treasurer .mrh-tab {
  min-height: 2.75rem;
  padding: var(--oecta-space-sm) var(--oecta-space-lg);
  border: none;
  border-radius: var(--oecta-radius-md);
  background: transparent;
  color: var(--oecta-on-surface-variant);
  font-family: var(--oecta-font-body);
  font-size: var(--oecta-text-base);
  font-weight: var(--oecta-weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-xs);
  position: relative;
}

#tab-event-desk .mrh-tab.is-active,
#tab-treasurer .mrh-tab.is-active {
  background: var(--oecta-surface-lowest);
  color: var(--oecta-on-surface);
  font-weight: var(--oecta-weight-bold);
  box-shadow: var(--oecta-shadow-xs);
}

#tab-event-desk .mrh-tab.is-active::after,
#tab-treasurer .mrh-tab.is-active::after {
  content: '';
  position: absolute;
  left: var(--oecta-space-md);
  right: var(--oecta-space-md);
  bottom: var(--oecta-space-xs);
  height: 0.1875rem;
  border-radius: var(--oecta-radius-pill);
  background: var(--oecta-accent);
}

/* ── Cards, Rows & Status Pills ───────────────────────────────────────────── */
#tab-event-desk .mrh-card,
#tab-treasurer .mrh-card {
  background: var(--oecta-surface-lowest);
  border-radius: var(--oecta-radius-xl);
  padding: var(--oecta-space-lg);
  box-shadow: var(--oecta-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-md);
}

#tab-event-desk .mrh-list,
#tab-treasurer .mrh-list {
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-row,
#tab-treasurer .mrh-row {
  background: var(--oecta-surface-low);
  border-radius: var(--oecta-radius-lg);
  padding: var(--oecta-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-sm);
}

@media (min-width: 768px) {
  #tab-event-desk .mrh-row,
  #tab-treasurer .mrh-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--oecta-space-md) var(--oecta-space-lg);
  }
}

#tab-event-desk .mrh-row__main,
#tab-treasurer .mrh-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--oecta-space-xs);
  min-width: 0;
  flex: 1;
}

#tab-event-desk .mrh-row__title,
#tab-treasurer .mrh-row__title {
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-md);
  font-weight: var(--oecta-weight-bold);
  color: var(--oecta-on-surface);
}

#tab-event-desk .mrh-row__meta,
#tab-treasurer .mrh-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oecta-space-sm);
  font-size: var(--oecta-text-sm);
  color: var(--oecta-text-muted);
}

#tab-event-desk .mrh-row__actions,
#tab-treasurer .mrh-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-pill,
#tab-treasurer .mrh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-xs);
  padding: var(--oecta-space-xs) var(--oecta-space-sm);
  border-radius: var(--oecta-radius-pill);
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-bold);
}

#tab-event-desk .mrh-pill--success,
#tab-treasurer .mrh-pill--success {
  background: var(--oecta-success-soft);
  color: var(--oecta-success-text);
}

#tab-event-desk .mrh-pill--pending,
#tab-treasurer .mrh-pill--pending {
  background: var(--oecta-chip-payment-bg);
  color: var(--oecta-chip-payment-fg);
}

#tab-event-desk .mrh-pill--info,
#tab-treasurer .mrh-pill--info {
  background: var(--oecta-chip-profile-bg);
  color: var(--oecta-chip-profile-fg);
}

#tab-event-desk .mrh-pill--error,
#tab-treasurer .mrh-pill--error {
  background: var(--oecta-error-soft);
  color: var(--oecta-error-text);
}

#tab-event-desk .mrh-pill--neutral,
#tab-treasurer .mrh-pill--neutral {
  background: var(--oecta-chip-system-bg);
  color: var(--oecta-chip-system-fg);
}

/* ── Camera QR Scanner Box & Live Status Banner ───────────────────────────── */
#tab-event-desk .mrh-scanner-box {
  background: var(--oecta-surface-container);
  border-radius: var(--oecta-radius-lg);
  padding: var(--oecta-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-qr-viewport {
  width: min(100%, 22rem);
  border-radius: var(--oecta-radius-md);
  overflow: hidden;
  background: var(--oecta-primary);
}

#tab-event-desk .mrh-banner,
#tab-treasurer .mrh-banner {
  border-radius: var(--oecta-radius-md);
  padding: var(--oecta-space-md);
  font-size: var(--oecta-text-base);
  font-weight: var(--oecta-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-banner--ok,
#tab-treasurer .mrh-banner--ok {
  background: var(--oecta-success-soft);
  color: var(--oecta-success-text);
}

#tab-event-desk .mrh-banner--warn,
#tab-treasurer .mrh-banner--warn {
  background: var(--oecta-chip-payment-bg);
  color: var(--oecta-chip-payment-fg);
}

#tab-event-desk .mrh-banner--err,
#tab-treasurer .mrh-banner--err {
  background: var(--oecta-error-soft);
  color: var(--oecta-error-text);
}

/* ── Budget Progress Meter & Inline Action Drawer ─────────────────────────── */
#tab-treasurer .mrh-meter {
  width: 100%;
  height: 0.5rem;
  border-radius: var(--oecta-radius-pill);
  overflow: hidden;
  background: var(--oecta-surface-high);
  appearance: none;
  border: none;
}

#tab-treasurer .mrh-meter::-webkit-progress-bar {
  background: var(--oecta-surface-high);
  border-radius: var(--oecta-radius-pill);
}

#tab-treasurer .mrh-meter::-webkit-progress-value {
  background: var(--oecta-primary-container);
  border-radius: var(--oecta-radius-pill);
}

#tab-treasurer .mrh-meter--over::-webkit-progress-value {
  background: var(--oecta-error);
}

#tab-treasurer .mrh-inline-form {
  width: 100%;
  margin-top: var(--oecta-space-sm);
  padding: var(--oecta-space-md);
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--oecta-space-sm);
}

#tab-treasurer .mrh-receipt-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oecta-space-xs);
}

#tab-treasurer .mrh-receipt-link {
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-xs);
  min-height: 2.75rem;
  padding: 0 var(--oecta-space-md);
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-lowest);
  color: var(--oecta-primary-container);
  text-decoration: none;
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-bold);
}

#tab-event-desk .mrh-empty,
#tab-treasurer .mrh-empty {
  text-align: center;
  padding: var(--oecta-space-2xl) var(--oecta-space-md);
  color: var(--oecta-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oecta-space-sm);
}

#tab-event-desk .mrh-paused-notice,
#tab-treasurer .mrh-paused-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--oecta-space-md);
  padding: var(--oecta-space-xl);
}

#tab-event-desk .mrh-paused-notice__icon,
#tab-treasurer .mrh-paused-notice__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--oecta-radius-lg);
  background: var(--oecta-surface-low);
  color: var(--oecta-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#tab-event-desk .mrh-paused-notice__title,
#tab-treasurer .mrh-paused-notice__title {
  margin: 0;
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-lg);
  font-weight: var(--oecta-weight-bold);
  color: var(--oecta-on-surface);
  line-height: 1.3;
}

#tab-event-desk .mrh-paused-notice__body,
#tab-treasurer .mrh-paused-notice__body {
  margin: 0;
  max-width: 60ch;
  font-size: var(--oecta-text-base);
  line-height: 1.6;
  color: var(--oecta-on-surface-variant);
}

#tab-event-desk .mrh-paused-notice__actions,
#tab-treasurer .mrh-paused-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oecta-space-sm);
  margin-top: var(--oecta-space-xs);
}

@media (prefers-reduced-motion: reduce) {
  #tab-event-desk .mrh-btn,
  #tab-treasurer .mrh-btn {
    transition-duration: 0.01ms !important;
  }
}