/**
 * WB Gamification — Hub Design System
 *
 * Theme-independent stylesheet for the Gamification Hub page.
 * Uses --gam-* custom properties so no theme CSS leaks in.
 * Responsive down to 390px viewport.
 *
 * @package WBGamification
 * @since   1.0.0
 */

/* === THEME-INDEPENDENT COLOR SYSTEM === */
:root {
  --gam-text: #1a1a2e;
  --gam-text-secondary: #555770;
  --gam-text-muted: #8b8da3;
  --gam-surface: #ffffff;
  --gam-surface-hover: #f7f7fb;
  --gam-border: #e2e3ed;
  --gam-border-hover: #c8c9d9;
  --gam-accent: #5b4cdb;
  --gam-accent-light: #ededfc;
  --gam-accent-text: #4338b2;
  --gam-success: #0d9f6e;
  --gam-success-bg: #ecfdf3;
  --gam-warning: #c2770e;
  --gam-warning-bg: #fef7ec;
  --gam-info: #2563eb;
  --gam-info-bg: #eff4ff;
  --gam-gold: #b8860b;
  --gam-silver: #6b7280;
  --gam-bronze: #a0522d;
  --gam-radius: 10px;
  --gam-radius-sm: 6px;
  --gam-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --gam-shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
  --gam-transition: 0.2s ease;
  --gam-gap: 16px;
  --gam-page-max: 100%;
}

/* PAGE CONTAINER */
.gam-page {
  max-width: var(--gam-page-max);
  margin: 0 auto;
  padding: 24px var(--gam-gap);
}

/* NUDGE BAR */
.gam-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gam-surface);
  border: 1px solid var(--gam-accent-light);
  border-left: 4px solid var(--gam-accent);
  border-radius: var(--gam-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--gam-shadow);
}

.gam-nudge__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--gam-accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-accent);
}

.gam-nudge__icon i {
  font-size: 18px;
}

.gam-nudge__body {
  flex: 1;
  min-width: 0;
}

.gam-nudge__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gam-accent-text);
  margin-bottom: 2px;
}

.gam-nudge__text {
  font-size: 14px;
  color: var(--gam-text);
}

.gam-nudge__text strong {
  font-weight: 600;
}

.gam-nudge__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gam-accent);
  color: #fff;
  border: none;
  border-radius: var(--gam-radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--gam-transition);
  text-decoration: none;
}

.gam-nudge__action:hover {
  opacity: 0.9;
}

.gam-nudge__action i {
  font-size: 14px;
}

/* STATS ROW */
.gam-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.gam-stat {
  background: var(--gam-surface);
  border: 1px solid var(--gam-border);
  border-radius: var(--gam-radius);
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--gam-shadow);
}

.gam-stat__icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  background: var(--gam-accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-accent);
}

.gam-stat__icon i {
  font-size: 18px;
}

.gam-stat__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gam-text);
  line-height: 1.2;
  white-space: nowrap;
}

.gam-stat__label {
  font-size: 12px;
  color: var(--gam-text-muted);
  margin-top: 4px;
  display: block;
}

.gam-stat__bar {
  height: 4px;
  background: var(--gam-border);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}

.gam-stat__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gam-accent);
  transition: width 0.6s ease;
}

.gam-stat__sub {
  font-size: 11px;
  color: var(--gam-text-muted);
  margin-top: 4px;
}

/* CARD GRID */
.gam-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gam-card {
  background: var(--gam-surface);
  border: 1px solid var(--gam-border);
  border-radius: var(--gam-radius);
  padding: 20px;
  cursor: pointer;
  transition: border-color var(--gam-transition), box-shadow var(--gam-transition);
  box-shadow: var(--gam-shadow);
  text-decoration: none;
  color: inherit;
  display: block;
}

.gam-card:hover {
  border-color: var(--gam-border-hover);
  box-shadow: var(--gam-shadow-hover);
}

.gam-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gam-card__icon {
  width: 40px;
  height: 40px;
  background: var(--gam-accent-light);
  border-radius: var(--gam-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-accent);
}

.gam-card__icon i {
  font-size: 20px;
}

.gam-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.gam-pill--success {
  background: var(--gam-success-bg);
  color: var(--gam-success);
}

.gam-pill--warning {
  background: var(--gam-warning-bg);
  color: var(--gam-warning);
}

.gam-pill--info {
  background: var(--gam-info-bg);
  color: var(--gam-info);
}

.gam-pill--accent {
  background: var(--gam-accent-light);
  color: var(--gam-accent-text);
}

.gam-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gam-text);
  margin-bottom: 4px;
}

.gam-card__desc {
  font-size: 13px;
  color: var(--gam-text-secondary);
}

.gam-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gam-accent-text);
  margin-top: 10px;
}

.gam-card__link i {
  font-size: 14px;
}

.gam-card__progress {
  height: 4px;
  background: var(--gam-border);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}

.gam-card__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gam-accent);
}

/* PANEL */
.gam-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Account for WP admin bar when logged in */
.admin-bar .gam-panel-backdrop {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .gam-panel-backdrop,
  .admin-bar .gam-panel {
    top: 46px;
  }
}
.admin-bar .gam-panel {
  top: 32px;
}

.gam-panel-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.gam-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 90vw);
  background: var(--gam-surface);
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.gam-panel-backdrop.active .gam-panel {
  transform: translateX(0);
}

.gam-panel__header {
  position: sticky;
  top: 0;
  background: var(--gam-surface);
  border-bottom: 1px solid var(--gam-border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}

.gam-panel__back {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gam-border);
  border-radius: var(--gam-radius-sm);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-text-secondary);
  transition: background var(--gam-transition);
}

.gam-panel__back:hover {
  background: var(--gam-surface-hover);
}

.gam-panel__back i {
  font-size: 18px;
}

.gam-panel__title {
  font-size: 16px;
  font-weight: 600;
}

.gam-panel__body {
  padding: 20px;
}

/* ── Panel-scoped block adjustments ──
 *
 * The blocks render the same markup wherever they appear; their own
 * stylesheets ship container-query layouts so the grid adapts to the
 * host width without needing a panel override. Only fixes that are
 * panel-specific (heatmap horizontal scroll because the panel is too
 * narrow for 90 cells) stay here.
 *
 * Previous overrides forced 90px badge cards which crammed the title
 * into 2 ellipsed lines — removed in 1.4.0 in favour of the badge-
 * showcase's own container queries (`@container (max-width: 520px)`
 * yields 3 cols, `<= 360px` yields 2).
 */

.gam-panel__body .wb-gam-streak__heatmap {
	overflow-x: auto;
	max-width: 100%;
}

/* ── Empty state enhancements ──
   When blocks render empty content inside panels,
   show a helpful message with a subtle CTA feel. */

.gam-panel__body .wb-gam-challenges__empty,
.gam-panel__body .wb-gam-badge-showcase__empty,
.gam-panel__body .wb-gam-leaderboard__empty,
.gam-panel__body .wb-gam-kudos-feed__empty,
.gam-panel__body .wb-gam-points-history__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gam-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Empty state icon placeholder */
.gam-panel__body [class*="__empty"]::before {
  display: block;
  font-family: 'lucide';
  font-size: 32px;
  color: var(--gam-border);
  margin-bottom: 12px;
}

.gam-panel__body .wb-gam-badge-showcase__empty::before { content: "\e053"; /* award */ }
.gam-panel__body .wb-gam-challenges__empty::before { content: "\e183"; /* target */ }
.gam-panel__body .wb-gam-leaderboard__empty::before { content: "\e376"; /* trophy */ }
.gam-panel__body .wb-gam-kudos-feed__empty::before { content: "\e2d6"; /* heart-handshake */ }
.gam-panel__body .wb-gam-points-history__empty::before { content: "\e1f4"; /* history */ }

/* Badge grid inside panel */
.gam-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gam-badge-item {
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--gam-border);
  border-radius: var(--gam-radius);
  transition: border-color var(--gam-transition);
}

.gam-badge-item:hover {
  border-color: var(--gam-accent);
}

.gam-badge-item.locked {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.gam-badge-item__img {
  width: 48px;
  height: 48px;
  background: var(--gam-accent-light);
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-accent);
}

.gam-badge-item__img i {
  font-size: 22px;
}

.gam-badge-item__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gam-text);
}

.gam-badge-item__hint {
  font-size: 11px;
  color: var(--gam-text-muted);
  margin-top: 2px;
}

/* List items inside panel */
.gam-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--gam-radius-sm);
}

.gam-list-item:hover {
  background: var(--gam-surface-hover);
}

.gam-list-item__icon {
  font-size: 16px;
  color: var(--gam-accent);
  flex-shrink: 0;
}

.gam-list-item__text {
  flex: 1;
  font-size: 13px;
}

.gam-list-item__pts {
  font-weight: 600;
  font-size: 13px;
  color: var(--gam-success);
  white-space: nowrap;
}

.gam-list-item__time {
  font-size: 11px;
  color: var(--gam-text-muted);
  white-space: nowrap;
}

.gam-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gam-text-muted);
  margin-bottom: 8px;
  padding-top: 12px;
}

.gam-section-label:first-child {
  padding-top: 0;
}

/* Challenge card inside panel */
.gam-challenge {
  border: 1px solid var(--gam-border);
  border-radius: var(--gam-radius);
  padding: 16px;
  margin-bottom: 12px;
}

.gam-challenge--done {
  opacity: 0.6;
}

.gam-challenge__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.gam-challenge__name {
  font-weight: 600;
}

.gam-challenge__desc {
  font-size: 13px;
  color: var(--gam-text-secondary);
  margin-bottom: 8px;
}

.gam-challenge__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gam-text-muted);
}

/* Leaderboard inside panel */
.gam-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--gam-radius-sm);
}

.gam-lb-row--podium {
  background: var(--gam-surface-hover);
}

.gam-lb-row--you {
  background: var(--gam-accent-light);
}

.gam-lb-rank {
  width: 24px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.gam-lb-avatar {
  width: 32px;
  height: 32px;
  background: var(--gam-accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-accent);
}

.gam-lb-avatar--you {
  background: var(--gam-accent);
  color: #fff;
}

.gam-lb-avatar i {
  font-size: 16px;
}

.gam-lb-name {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
}

.gam-lb-pts {
  font-weight: 600;
  font-size: 14px;
  color: var(--gam-text-secondary);
}

.gam-lb-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.gam-lb-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gam-border);
  background: none;
  color: var(--gam-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.gam-lb-pill--active {
  border-color: var(--gam-accent);
  background: var(--gam-accent);
  color: #fff;
}

/* Kudos inside panel */
.gam-kudos {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--gam-border);
  border-radius: var(--gam-radius);
  margin-bottom: 12px;
}

.gam-kudos__avatar {
  width: 36px;
  height: 36px;
  background: var(--gam-accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gam-accent);
  flex-shrink: 0;
}

.gam-kudos__avatar i {
  font-size: 16px;
}

.gam-kudos__body {
  flex: 1;
  min-width: 0;
}

.gam-kudos__from {
  font-size: 13px;
}

.gam-kudos__from strong {
  font-weight: 600;
}

.gam-kudos__msg {
  font-size: 13px;
  color: var(--gam-text-secondary);
  margin-top: 2px;
}

.gam-kudos__time {
  font-size: 11px;
  color: var(--gam-text-muted);
  margin-top: 4px;
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .gam-stats { grid-template-columns: repeat(2, 1fr); }
  .gam-cards { grid-template-columns: 1fr; }
  .gam-nudge { flex-direction: column; align-items: flex-start; }
  .gam-nudge__action { align-self: stretch; justify-content: center; }
  .gam-badge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .gam-page { padding: 16px 12px; }
  .gam-stats { gap: 10px; }
  .gam-stat { padding: 12px 8px; }
  .gam-stat__value { font-size: 22px; }
  .gam-card { padding: 16px; }
  .gam-nudge { padding: 12px 14px; }
  .gam-panel { width: 100vw; }
}

/* CURRENCY CONVERT — per-tile button + shared modal. */
.gam-stat__convert {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid var(--wb-gam-color-border, #d4d4d4);
  background: var(--wb-gam-color-white, #fff);
  color: var(--wb-gam-color-accent, #2563eb);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gam-stat__convert:hover,
.gam-stat__convert:focus-visible {
  background: var(--wb-gam-color-accent, #2563eb);
  color: #fff;
  border-color: var(--wb-gam-color-accent, #2563eb);
}
.gam-stat__convert:focus:not(:focus-visible) { outline: none; }

.wbgam-convert-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  background: #fff;
  color: inherit;
}
.wbgam-convert-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.wbgam-convert-form { display: flex; flex-direction: column; gap: 0; margin: 0; }
.wbgam-convert-form__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wb-gam-color-border, #e5e7eb);
}
.wbgam-convert-form__title { margin: 0; font-size: 16px; font-weight: 600; }
.wbgam-convert-form__close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 4px 8px;
  color: var(--wb-gam-color-text-muted, #6b7280);
  border-radius: 6px;
}
.wbgam-convert-form__close:hover { background: var(--wb-gam-color-surface-muted, #f3f4f6); }
.wbgam-convert-form__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.wbgam-convert-form__balance { margin: 0; font-size: 13px; color: var(--wb-gam-color-text-muted, #6b7280); }
.wbgam-convert-form__balance strong { color: inherit; font-weight: 600; }
.wbgam-convert-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.wbgam-convert-form__field span { font-weight: 500; color: inherit; }
.wbgam-convert-form__field select,
.wbgam-convert-form__field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--wb-gam-color-border, #d4d4d4);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}
.wbgam-convert-form__field select:focus,
.wbgam-convert-form__field input:focus {
  border-color: var(--wb-gam-color-accent, #2563eb);
  outline: 2px solid color-mix(in srgb, var(--wb-gam-color-accent, #2563eb) 25%, transparent);
  outline-offset: 0;
}
.wbgam-convert-form__preview {
  margin: 0;
  padding: 8px 10px;
  background: var(--wb-gam-color-surface-muted, #f3f4f6);
  border-radius: 6px;
  font-size: 13px;
  min-height: 18px;
  color: var(--wb-gam-color-text, #1f2937);
}
.wbgam-convert-form__preview:empty { display: none; }
.wbgam-convert-form__actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--wb-gam-color-border, #e5e7eb);
  background: var(--wb-gam-color-surface-muted, #fafafa);
  border-radius: 0 0 12px 12px;
}
.wbgam-convert-form__actions .wbgam-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--wb-gam-color-accent, #2563eb);
  background: var(--wb-gam-color-accent, #2563eb);
  color: #fff;
  cursor: pointer;
}
.wbgam-convert-form__actions .wbgam-btn:hover:not(:disabled) {
  filter: brightness(0.95);
}
.wbgam-convert-form__actions .wbgam-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wbgam-convert-form__actions .wbgam-btn--secondary {
  background: #fff;
  color: inherit;
  border-color: var(--wb-gam-color-border, #d4d4d4);
}

@media (max-width: 640px) {
  .wbgam-convert-dialog { width: calc(100vw - 24px); border-radius: 10px; }
  .wbgam-convert-form__head,
  .wbgam-convert-form__body,
  .wbgam-convert-form__actions { padding-left: 16px; padding-right: 16px; }
}