/* ============================================================
   WPF — Banani dashboard design system (Home)
   Loaded AFTER legacy styles so it overrides where needed.
   Palette: tropical navy + gold (brand), clean premium surface.
   ============================================================ */

:root {
  --wpf-navy-950: #071827;
  --wpf-navy-900: #0D1B2A;
  --wpf-navy-800: #15283D;
  --wpf-navy-700: #1E3450;

  --wpf-gold: #F6B700;
  --wpf-gold-hover: #E5A600;
  --wpf-sand: #F4D06F;

  --wpf-cream: #FFF9EC;
  --wpf-surface: #FFFFFF;
  --wpf-card: #FFFFFF;
  --wpf-page: #F3F5F7;

  --wpf-text: #071827;
  --wpf-muted: #6B7A8D;

  --wpf-win: #4CAF7A;
  --wpf-loss: #E05C68;
  --wpf-success: var(--wpf-win);
  --wpf-warning: #D98324;
  --wpf-danger: var(--wpf-loss);

  --wpf-border: #E2E6EA;

  --wpf-font-head: "Space Grotesk", "Inter", "Arial Narrow", Arial, sans-serif;
  --wpf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wpf-sidebar-w: 232px;
  --wpf-topbar-h: 52px;
  --wpf-radius: 8px;
  --wpf-radius-sm: 6px;
  --wpf-shadow: 0 1px 2px rgba(7, 24, 39, 0.04), 0 8px 24px rgba(7, 24, 39, 0.05);
  --wpf-shadow-lg: 0 18px 50px rgba(7, 24, 39, 0.18);

  --wpf-modal-backdrop: rgba(5, 18, 30, 0.78);
}

/* ============================================================
   GLOBAL MODAL BACKDROP — dark navy translucent (overrides legacy blue)
   Centralized so ALL modals (Bootstrap + SweetAlert2) share one treatment.
   ============================================================ */
.modal-backdrop,
body.modal-open .modal-backdrop {
  background-color: var(--wpf-modal-backdrop) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.modal-backdrop.show {
  opacity: 1 !important;
  z-index: 1040 !important;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* No GPU/compositing triggers; keep in root stacking context with backdrop. */
  transform: none;
  filter: none;
  perspective: none;
  contain: layout style;
  isolation: auto;
  will-change: auto;
}
.modal.modal-dialog-centered,
.modal.fade.show {
  z-index: 1050;
  transform: none;
  filter: none;
}
.modal.fade .modal-dialog {
  transform: none;
  transition: opacity .2s ease;
}

/* SweetAlert2 backdrop — same dark navy treatment, NO GPU blur/compositing */
.swal2-container.swal2-backdrop-show,
body.swal2-shown .swal2-container {
  background-color: var(--wpf-modal-backdrop) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile dialog sizing: safe-area inset aware, force no vw overflow, no
   forced vertical centering (tall modals must scroll reachably) */
@media (max-width: 767px) {
  .wpf-squad-modal .modal-dialog,
  .wpf-modal .modal-dialog,
  .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: max(12px, env(safe-area-inset-top)) !important;
    margin-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  .wpf-squad-modal .modal-content,
  .wpf-modal .modal-content {
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
    transform: none;
    filter: none;
    perspective: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- Base resets scoped to our shell ---------- */
body {
  font-family: var(--wpf-font-body);
  background: var(--wpf-page);
  color: var(--wpf-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wpf-font-head);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.wpf-app {
  min-height: 100vh;
  display: flex;
}

.wpf-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--wpf-sidebar-w);
  background: var(--wpf-navy-950);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow: hidden;
}

.wpf-sidebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px;
  background:
    linear-gradient(
      to bottom,
      #071827 0%,
      rgba(7, 24, 39, 0.75) 30%,
      rgba(7, 24, 39, 0.25) 75%,
      rgba(7, 24, 39, 0.1) 100%
    ),
    url('../images/background/wpf-home-sunset-wide.png');
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.wpf-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 20px;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  z-index: 1;
}
.wpf-brand:hover { color: #fff; text-decoration: none; }
.wpf-brand-badge {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
}

.wpf-nav {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.wpf-nav-group-label {
  font-family: var(--wpf-font-head);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  padding: 14px 12px 6px;
}

.wpf-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: var(--wpf-radius-sm);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.wpf-nav-link i {
  width: 16px;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, .5);
}
.wpf-nav-link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  text-decoration: none;
}
.wpf-nav-link.is-active {
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
  font-weight: 700;
}
.wpf-nav-link.is-active i { color: var(--wpf-navy-950); }

.wpf-sidebar-bottom {
  position: relative;
  z-index: 1;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ============================================================
   MAIN COLUMN
   ============================================================ */
.wpf-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--wpf-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wpf-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--wpf-topbar-h);
  min-height: var(--wpf-topbar-h);
  background: var(--wpf-card);
  border-bottom: 1px solid var(--wpf-border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
}

.wpf-burger {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--wpf-border);
  background: var(--wpf-surface);
  border-radius: var(--wpf-radius-sm);
  color: var(--wpf-text);
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.wpf-topbar-title {
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--wpf-text);
}

.wpf-topbar-spacer { flex: 1; }

.wpf-topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wpf-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wpf-gold), var(--wpf-sand));
  color: var(--wpf-navy-950);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
}
.wpf-topbar-user-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--wpf-text);
}
.wpf-topbar-chevron { font-size: 10px; color: var(--wpf-muted); }

.wpf-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 32px;
}

.wpf-footer {
  border-top: 1px solid var(--wpf-border);
  background: var(--wpf-surface);
}
.wpf-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 28px;
  font-size: 13px;
  color: var(--wpf-muted);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.wpf-footer-muted { opacity: .7; }

@media (max-width: 1023px) {
  .wpf-footer-inner { padding: 14px 16px; }
}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.wpf-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 24, 39, .5);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.wpf-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 84%;
  max-width: 340px;
  background: var(--wpf-navy-950);
  color: #fff;
  z-index: 80;
  transform: translateX(-102%);
  transition: transform .26s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--wpf-shadow-lg);
}
.wpf-drawer.is-open { transform: translateX(0); }
.wpf-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.wpf-lock { overflow: hidden; }

.wpf-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wpf-drawer-close {
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: #fff;
  border-radius: var(--wpf-radius-sm);
  font-size: 16px;
  cursor: pointer;
}
.wpf-drawer-body { flex: 1; padding: 12px; overflow-y: auto; }
.wpf-drawer-body .wpf-nav { padding: 0; }
.wpf-drawer-head .wpf-brand {
  padding: 0;
  border-bottom: 0;
  justify-content: flex-start;
}
.wpf-drawer-head .wpf-brand-badge {
  width: 72px;
  height: 72px;
}

/* ============================================================
   CARD PRIMITIVES
   ============================================================ */
.wpf-card {
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
}

.wpf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0;
  color: var(--wpf-text);
}
.wpf-card-link {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpf-gold-hover);
  text-decoration: none;
}
.wpf-card-link:hover { color: var(--wpf-navy-700); text-decoration: none; }

.wpf-card-body { padding: 6px 18px 8px; }

.wpf-empty { color: var(--wpf-muted); padding: 18px; text-align: center; font-size: 14px; }

/* Section heading (used for Upcoming) */
.wpf-upcoming .wpf-section-head { margin-bottom: 12px; }
.wpf-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0;
  color: var(--wpf-text);
}

/* ============================================================
   NEXT MATCH HERO
   ============================================================ */
.wpf-hero {
  position: relative;
  display: flex;
  min-height: 240px;
  background: var(--wpf-navy-900);
  border: 1px solid var(--wpf-navy-700);
  border-radius: var(--wpf-radius);
  overflow: hidden;
  color: #fff;
}
.wpf-hero-top { display: flex; flex-direction: column; gap: 6px; }
.wpf-hero-badges { display: flex; align-items: center; gap: 10px; }

.wpf-hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.wpf-hero-title {
  font-family: var(--wpf-font-head);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 2px 0 0;
  text-transform: uppercase;
  color: #fff;
}
.wpf-hero-time {
  font-family: var(--wpf-font-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wpf-gold);
}
.wpf-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}
.wpf-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.wpf-hero-meta i { color: var(--wpf-sand); font-size: 12px; }

.wpf-hero-bottom { display: flex; flex-direction: column; gap: 14px; }
.wpf-hero-capacity { max-width: 320px; }
.wpf-hero-capacity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 6px;
}
.wpf-hero-capacity .wpf-cap-bar { background: rgba(255, 255, 255, .14); }

.wpf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Hero main: content (left) shares the row; visual bg sits behind both; slogan is absolute centered across full card width */
.wpf-hero-main {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  min-height: 240px;
  box-sizing: border-box;
}
.wpf-hero-content {
  flex: 1 1 62%;
  min-width: 0;
  max-width: 62%;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0;
}
.wpf-hero-content .wpf-hero-capacity { width: 100%; max-width: 340px; align-self: flex-start; }
.wpf-hero-content .wpf-hero-actions { justify-content: flex-start; align-self: flex-start; }
.wpf-hero-content [data-wpf-cal] { align-self: flex-start; }

/* Absolute-centered slogan wrapper: center relative to ENTIRE hero width */
.wpf-hero-slogan {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 44%;
  width: 44%;
  padding: 20px 0;
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
.wpf-hero-slogan img {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: 140px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}

/* Hero tropical sunset artwork (real asset) */
.wpf-hero-visual {
  position: absolute;
  inset: 0 0 0 0;
  min-height: 240px;
  overflow: hidden;
  background-image: url('../images/background/wpf-home-hero.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 1;
  margin: 0;
  padding: 0;
}
.wpf-hv-blend {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 62%;
  background: linear-gradient(90deg, var(--wpf-navy-900) 0%, rgba(13, 27, 42, .78) 35%, rgba(13, 27, 42, .35) 62%, rgba(13,27,42,0) 85%);
  z-index: 2;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.wpf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.wpf-badge--success {
  background: rgba(76, 175, 122, .18);
  border: 1px solid rgba(76, 175, 122, .35);
  color: var(--wpf-win);
}
.wpf-badge--success::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wpf-win);
}
.wpf-badge--warning {
  background: rgba(217, 131, 36, .14);
  border: 1px solid rgba(217, 131, 36, .28);
  color: #8a4c00;
}

/* ============================================================
   BUTTONS (booking actions)
   ============================================================ */
.wpf-match-actions .readon,
.wpf-match-actions .readon_book,
.wpf-hero-actions .readon,
.wpf-hero-actions .readon_book,
.wpf-match-actions .btn,
.wpf-hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--wpf-radius-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none;
  background-image: none;
  margin: 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wpf-match-actions .readon,
.wpf-match-actions .readon_book,
.wpf-match-actions .btn {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
}
.wpf-hero-actions .readon,
.wpf-hero-actions .readon_book,
.wpf-hero-actions .btn {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 13px;
}

/* Primary book / login */
.wpf-match-actions .readon,
.wpf-hero-actions .readon {
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
}
.wpf-match-actions .readon:hover,
.wpf-hero-actions .readon:hover,
.wpf-match-actions .readon:focus,
.wpf-hero-actions .readon:focus,
.wpf-match-actions .readon:visited,
.wpf-hero-actions .readon:visited {
  background: var(--wpf-gold-hover);
  color: var(--wpf-navy-950);
  text-decoration: none;
}

/* Remove booking */
.wpf-match-actions .readon_book,
.wpf-hero-actions .readon_book {
  background: var(--wpf-loss);
  color: #fff;
}
.wpf-match-actions .readon_book:hover,
.wpf-hero-actions .readon_book:hover,
.wpf-match-actions .readon_book:focus,
.wpf-hero-actions .readon_book:focus,
.wpf-match-actions .readon_book:visited,
.wpf-hero-actions .readon_book:visited {
  background: #cf4f5a;
  color: #fff;
  text-decoration: none;
}

/* Who's Playing — secondary */
.wpf-match-actions .btn-warning {
  background: transparent;
  border-color: var(--wpf-border);
  color: var(--wpf-navy-700);
}
.wpf-match-actions .btn-warning:hover,
.wpf-match-actions .btn-warning:focus {
  background: rgba(13, 27, 42, .05);
  color: var(--wpf-navy-700);
}
.wpf-hero-actions .btn-warning {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.wpf-hero-actions .btn-warning:hover,
.wpf-hero-actions .btn-warning:focus {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* Standby */
.wpf-match-actions .btn-info,
.wpf-hero-actions .btn-info {
  background: var(--wpf-navy-800);
  color: #fff;
}
.wpf-match-actions .btn-info:hover,
.wpf-hero-actions .btn-info:hover,
.wpf-match-actions .btn-info:focus,
.wpf-hero-actions .btn-info:focus {
  background: var(--wpf-navy-700);
  color: #fff;
}
.wpf-match-actions .btn-danger,
.wpf-hero-actions .btn-danger {
  background: var(--wpf-loss);
  color: #fff;
}
.wpf-match-actions .btn-danger:hover,
.wpf-hero-actions .btn-danger:hover,
.wpf-match-actions .btn-danger:focus,
.wpf-hero-actions .btn-danger:focus {
  background: #cf4f5a;
  color: #fff;
}
.wpf-match-actions .mb-2,
.wpf-hero-actions .mb-2 { margin-bottom: 0 !important; }

/* Non-action "Game Full" */
.wpf-cta--muted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid var(--wpf-border);
  background: rgba(13, 27, 42, .05);
  color: var(--wpf-muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: not-allowed;
}
.wpf-match-actions .wpf-cta--muted {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
}
.wpf-hero-actions .wpf-cta--muted {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .75);
}

/* ---- Add to Calendar (replaces legacy .cal-*) ---- */
.wpf-home-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  text-align: center;
}
.wpf-home-calendar__label {
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.wpf-home-calendar__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wpf-cal-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
}
.wpf-cal-action i { font-size: 13px; color: var(--wpf-gold); }
.wpf-cal-action:hover,
.wpf-cal-action:focus-visible {
  background: var(--wpf-gold);
  border-color: var(--wpf-gold);
  color: var(--wpf-navy-950);
  text-decoration: none;
  transform: translateY(-1px);
}
.wpf-cal-action:hover i,
.wpf-cal-action:focus-visible i { color: var(--wpf-navy-950); }

/* Compact icon-only variant for hero + upcoming match cards — equal size circles */
.wpf-cal-action.wpf-cal-action--icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 999px !important;
  gap: 0 !important;
  flex: 0 0 38px !important;
}
.wpf-cal-action.wpf-cal-action--icon i { font-size: 14px !important; margin: 0 !important; }
.wpf-cal-action.wpf-cal-action--icon > span { display: none !important; }

/* Light match-card surface variant — same component, navy-on-white (no white-on-white). */
.wpf-match-card .wpf-home-calendar {
  align-items: flex-start;
  text-align: left;
  margin-top: 2px;
}
.wpf-match-card .wpf-home-calendar__label { color: var(--wpf-muted); }
.wpf-match-card .wpf-cal-action {
  border-color: var(--wpf-border);
  background: var(--wpf-card);
  color: var(--wpf-navy-900);
}
.wpf-match-card .wpf-cal-action i { color: var(--wpf-navy-700); }
.wpf-match-card .wpf-cal-action:hover,
.wpf-match-card .wpf-cal-action:focus-visible {
  background: var(--wpf-gold);
  border-color: var(--wpf-gold);
  color: var(--wpf-navy-950);
}
.wpf-match-card .wpf-cal-action:hover i,
.wpf-match-card .wpf-cal-action:focus-visible i { color: var(--wpf-navy-950); }

/* ---- Live-booking slot wrappers (flex-safe) ---- */
[data-wpf-cta],
[data-wpf-stb] { display: inline-flex; align-items: center; }
.wpf-match-actions [data-wpf-cta] { flex: 1 1 auto; }
.wpf-match-actions [data-wpf-cta] .readon,
.wpf-match-actions [data-wpf-cta] .readon_book { width: 100%; }
[data-wpf-cal] { display: block; }

/* ---- Standby active/locked state (solid gold, reads on dark + light) ---- */
.wpf-stb-on {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--wpf-gold);
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.wpf-stb-on i { color: var(--wpf-navy-950); font-size: 13px; }
.wpf-stb-on:hover,
.wpf-stb-on:focus-visible {
  background: var(--wpf-gold-hover);
  border-color: var(--wpf-gold-hover);
  color: var(--wpf-navy-950);
  transform: translateY(-1px);
}
.wpf-stb-on:hover i,
.wpf-stb-on:focus-visible i { color: var(--wpf-navy-950); }

/* ---- Booking confirmation modal (SweetAlert2, scoped) ---- */
.wpf-swal--booking {
  background: #0d1b2a !important;
  border: 1px solid #1f3a52;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  color: #f7f8fa;
}
.wpf-swal--booking .wpf-swal__title {
  font-family: var(--wpf-font-head);
  color: #f7f8fa;
  font-weight: 700;
}
.wpf-swal--booking .wpf-swal__body {
  color: rgba(247, 248, 250, .78);
  font-size: 14px;
}
.wpf-swal--booking .wpf-swal__meta {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #f5c04a;
  line-height: 1.5;
}
.wpf-swal--booking .wpf-swal__confirm {
  background: #e05c68 !important;
  border-radius: 8px !important;
  font-family: var(--wpf-font-head);
  font-weight: 700;
}
.wpf-swal--booking .wpf-swal__cancel {
  background: #5b6b7c !important;
  border-radius: 8px !important;
  font-family: var(--wpf-font-head);
  font-weight: 700;
}

/* ============================================================
   CAPACITY BAR
   ============================================================ */
.wpf-cap-bar {
  height: 3px;
  border-radius: 999px;
  background: #E8ECF0;
  overflow: hidden;
}
.wpf-cap-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wpf-gold);
}

/* ============================================================
   UPCOMING MATCH CARDS
   ============================================================ */
.wpf-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}
.wpf-match-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wpf-match-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.wpf-match-name {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
  line-height: 1.2;
}
.wpf-match-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-navy-700);
}
.wpf-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--wpf-muted);
}
.wpf-match-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wpf-match-meta i { color: var(--wpf-gold-hover); font-size: 11px; }
.wpf-match-actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--wpf-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.wpf-match-actions .readon,
.wpf-match-actions .readon_book { flex: 1 1 auto; }

/* ============================================================
   DASHBOARD GRIDS
   ============================================================ */
.wpf-dash-grid {
  display: grid;
  gap: 16px;
  align-items: stretch;
}
.wpf-dash-grid--results {
  grid-template-columns: 3fr 2fr;
}

.wpf-dash-card { display: flex; flex-direction: column; }
.wpf-dash-card .wpf-card-body { flex: 1; }

/* ============================================================
   RECENT RESULTS
   ============================================================ */
.wpf-result-list { list-style: none; margin: 0; padding: 0; }
.wpf-result-item {
  display: grid;
  grid-template-columns: 46px 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-result-item:last-child { border-bottom: 0; }
.wpf-result-date {
  font-size: 12px;
  color: var(--wpf-muted);
}
.wpf-result-team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.wpf-result-team--1 { justify-content: flex-end; }
.wpf-result-team--2 { justify-content: flex-start; }
.wpf-result-score {
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 20px;
  color: var(--wpf-navy-900);
  min-width: 52px;
  text-align: center;
}
.wpf-team-dot { width: 10px; height: 10px; border-radius: 3px; }
.wpf-team-dot--1 { background: #2f6fe4; }
.wpf-team-dot--2 { background: #e0443c; }

/* ============================================================
   HOME — RECENT RESULTS WIDGET (COMPACT OVERRIDE)
   Visual cleanup only: single-line layout, subtle match type.
   ============================================================ */
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-list .wpf-result-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--wpf-border);
  grid-template-columns: none;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-list .wpf-result-item:last-child { border-bottom: 0; }

.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
}

.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 238px;
  min-width: 238px;
  max-width: 238px;
  width: 238px;
  color: var(--wpf-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left .wpf-result-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wpf-navy-800);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-width: auto;
  text-align: left;
  flex: 0 0 auto;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left .wpf-result-time {
  font-weight: 500;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left .wpf-result-loc {
  font-weight: 500;
  max-width: 90px;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left .wpf-result-sep {
  color: var(--wpf-border);
  font-weight: 600;
  flex: 0 0 auto;
  opacity: .9;
}

.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-scoreline {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team--1 { justify-self: stretch; justify-content: flex-end; text-align: right; }
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team--2 { justify-self: stretch; justify-content: flex-start; text-align: left; }
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team > span {
  flex: 0 0 auto;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-score {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--wpf-font-head);
  color: var(--wpf-navy-900);
  width: 100%;
  min-width: 0;
  text-align: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  justify-self: stretch;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-scoreline--tournament {
  justify-content: center;
  gap: 10px;
}

.wpf-dash-grid--results > .wpf-card:first-child .wpf-team-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-type {
  flex: 0 0 88px;
  min-width: 88px;
  max-width: 88px;
  width: 88px;
  text-align: center;
  font-family: var(--wpf-font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-type--standard {
  color: var(--wpf-muted);
  background: rgba(13, 27, 42, .05);
  border: 1px solid rgba(13, 27, 42, .08);
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-type--tournament {
  color: #7a5a00;
  background: rgba(246, 183, 0, .12);
  border: 1px solid rgba(246, 183, 0, .22);
}

.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-view {
  flex: 0 0 34px;
  min-width: 34px;
  max-width: 34px;
  width: 34px;
  height: 26px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 4px 7px;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-view--tournament {
  flex: 0 0 auto;
  min-width: auto;
  max-width: none;
  width: auto;
  height: auto;
}

/* Home widget — tournament row single-line */
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-item--tournament {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 0;
}
.wpf-dash-grid--results > .wpf-card:first-child .wpf-result-tournament-counts {
  font-size: 11px;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--wpf-muted);
  font-family: var(--wpf-font-head);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mobile responsiveness — home widget clean 2-line card layout */
@media (max-width: 560px) {
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-item {
    padding: 10px 0;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-item:not(:last-child) {
    border-bottom: 1px solid var(--wpf-border);
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    column-gap: 10px;
    width: 100%;
    align-items: center;
    flex-wrap: nowrap;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left {
    grid-column: 1 / -1;
    grid-row: 1;
    order: unset;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    justify-self: start;
    padding-left: 0;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-meta-left .wpf-result-date {
    font-size: 13px;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-scoreline {
    grid-column: 1 / -1;
    grid-row: 2;
    order: unset;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(44px, auto) minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 8px;
    align-items: center;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team {
    font-size: 12px;
    max-width: 100%;
    letter-spacing: .02em;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team--1 {
    justify-self: stretch;
    justify-content: flex-end;
    text-align: right;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-team--2 {
    justify-self: stretch;
    justify-content: flex-start;
    text-align: left;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-score {
    font-size: 17px;
    font-weight: 800;
    padding: 2px 8px;
    min-width: 52px;
    justify-self: center;
    background: rgba(13, 27, 42, .04);
    border-radius: 8px;
    line-height: 1.15;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-scoreline--tournament {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    justify-content: start;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-type {
    grid-column: 1;
    grid-row: 3;
    order: unset;
    justify-self: start;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    font-size: 10px;
    padding: 3px 8px;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-view,
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-view--tournament {
    grid-column: 2;
    grid-row: 3;
    order: unset;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    justify-self: end;
    align-self: center;
    position: relative;
    z-index: 2;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-item:last-child .wpf-result-view {
    margin-bottom: 38px;
  }
  .wpf-dash-grid--results > .wpf-card:first-child .wpf-result-tournament-counts {
    font-size: 10.5px;
    letter-spacing: .06em;
    justify-self: start;
  }
}

/* ============================================================
   TOP SCORERS / STAT LIST
   ============================================================ */
.wpf-stat-list { list-style: none; margin: 0; padding: 0; }
.wpf-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-stat-row:last-child { border-bottom: 0; }
.wpf-stat-rank {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(13, 27, 42, .06);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wpf-muted);
  flex: 0 0 auto;
}
.wpf-stat-rank--1 { background: rgba(246, 183, 0, .25); color: #8a6a00; }
.wpf-stat-rank--2 { background: rgba(104, 113, 125, .18); color: #4a525c; }
.wpf-stat-rank--3 { background: rgba(205, 127, 50, .2); color: #8a4c00; }
.wpf-stat-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--wpf-text); }
.wpf-stat-value {
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--wpf-navy-900);
}
.wpf-stat-unit { font-size: 11px; color: var(--wpf-muted); font-weight: 600; margin-left: 3px; }

/* ============================================================
   FINES
   ============================================================ */
.wpf-fines-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0 12px;
}
.wpf-fines-title {
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--wpf-navy-700);
}
.wpf-fines-note { color: var(--wpf-muted); font-size: 12px; }
.wpf-fines-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--wpf-radius-sm);
  background: linear-gradient(135deg, var(--wpf-cream), #fff6e0);
  border: 1px solid rgba(246, 183, 0, .28);
  margin-bottom: 4px;
}
.wpf-fines-label {
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wpf-navy-700);
}
.wpf-fines-amount {
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 24px;
  color: var(--wpf-navy-900);
}

/* ============================================================
   WIN / LOSS
   ============================================================ */
.wpf-stat-row.wpf-wl-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name counts" "bar bar";
  gap: 6px 12px;
  align-items: center;
}
.wpf-wl-name { grid-area: name; font-weight: 600; font-size: 13px; color: var(--wpf-text); }
.wpf-wl-counts { grid-area: counts; display: flex; gap: 8px; font-family: var(--wpf-font-head); font-weight: 700; font-size: 13px; }
.wpf-wl-win { color: var(--wpf-win); }
.wpf-wl-loss { color: var(--wpf-loss); }
.wpf-wl-bar { grid-area: bar; height: 6px; border-radius: 999px; background: rgba(224, 92, 104, .16); overflow: hidden; display: flex; }
.wpf-wl-bar-win { height: 100%; background: var(--wpf-win); }
.wpf-wl-bar-loss { height: 100%; background: rgba(224, 92, 104, .85); }

/* ============================================================
   WHO'S PLAYING MODAL (Bootstrap 4 modal, WPF restyle)
   ============================================================ */
.wpf-modal .modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(7, 24, 39, .28);
  overflow: hidden;
}
.wpf-modal .modal-header {
  background: var(--wpf-navy-950);
  border-bottom: 1px solid var(--wpf-navy-700);
  padding: 16px 22px;
}
.wpf-modal .modal-title {
  font-family: var(--wpf-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.wpf-modal .modal-header .close {
  color: rgba(255, 255, 255, .85);
  opacity: 1;
  text-shadow: none;
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
}
.wpf-modal .modal-header .close:hover { color: var(--wpf-gold); }

.wpf-modal .modal-body { padding: 16px 22px 20px; }
.wpf-modal .modal-body .h6 {
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wpf-muted);
  margin: 16px 0 4px;
}
.wpf-modal .modal-footer {
  border-top: 1px solid var(--wpf-border);
  padding: 12px 22px;
  background: var(--wpf-page);
}
.wpf-modal .modal-footer .btn-secondary {
  background: var(--wpf-navy-800);
  border: 1px solid var(--wpf-navy-800);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 18px;
  border-radius: var(--wpf-radius-sm);
}
.wpf-modal .modal-footer .btn-secondary:hover,
.wpf-modal .modal-footer .btn-secondary:focus {
  background: var(--wpf-navy-700);
  border-color: var(--wpf-navy-700);
  color: #fff;
}

/* Player list rows */
.wpf-modal .radio-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wpf-modal .radio-list li {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--wpf-border);
  font-size: 14px;
}
.wpf-modal .radio-list li:last-child { border-bottom: 0; }
.wpf-modal .radio-list li.header {
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wpf-muted);
  border-bottom: 2px solid var(--wpf-navy-900);
  padding: 6px 4px;
}
.wpf-modal .radio-list li .col { text-align: center; }
.wpf-modal .radio-list input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.wpf-modal .radio-list input[type="radio"][value="1"] { accent-color: #2f6fe4; }
.wpf-modal .radio-list input[type="radio"][value="2"] { accent-color: #e0443c; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .wpf-sidebar { display: none; }
  .wpf-main { margin-left: 0; }
  .wpf-burger { display: inline-flex; }
  .wpf-topbar { padding: 0 16px; }
  .wpf-content { padding: 16px 16px 28px; }
  .wpf-dash-grid--results { grid-template-columns: 1fr; }
  .wpf-hero { flex-direction: column; }
  .wpf-hero-main { flex-direction: column; min-height: 0; }
  .wpf-hero-content { flex: 1 1 auto; max-width: 100%; padding: 20px 22px; }
  .wpf-hero-slogan {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: 0 22px 18px;
    display: flex;
    justify-content: center;
  }
  .wpf-hero-slogan img { max-width: 440px; max-height: 120px; }
  .wpf-hero-visual { flex: 0 0 180px; min-height: 180px; }
}

@media (max-width: 767px) {
  .wpf-matches-grid { grid-template-columns: 1fr; }
  .wpf-hero-title { font-size: 28px; }
  .wpf-hero-time { font-size: 22px; }
  .wpf-hero { padding: 0; }
  .wpf-topbar-user-name { display: none; }
  .wpf-hero-content { padding: 16px; max-width: 100%; }
  .wpf-hero-slogan { padding: 0 16px 16px; }
  .wpf-hero-slogan img { max-width: 100%; max-height: 100px; }
  .wpf-hero-content .wpf-hero-capacity { max-width: 100%; }
  .wpf-home-calendar__actions { flex-wrap: wrap; }
  .wpf-hero-visual { display: none; }
}

/* ============================================================
   WHO'S PLAYING SQUAD MODAL (redesign)
   ============================================================ */
.wpf-squad-modal .modal-dialog {
  max-width: 960px;
  width: min(94vw, 960px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  touch-action: pan-y;
}
.wpf-squad-modal .modal-content {
  max-height: min(86vh, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  height: max-content;
}
.wpf-squad-modal .modal-header { flex: 0 0 auto; align-items: flex-start; gap: 16px; min-height: 0; }
.wpf-squad-modal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0;
  min-width: 0;
  overscroll-behavior: contain;
}
.wpf-squad-modal .modal-footer { flex: 0 0 auto; min-height: 0; }

/* Inner squad wrappers — allow shrink through every flex/grid layer
   so that WebKit actually creates an internal scroll region. */
.wpf-squad { display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }
.wpf-squad-stb { margin-top: 14px; min-height: 0; min-width: 0; }
.wpf-squad-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; min-width: 0; }
.wpf-squad-teams--n3 { grid-template-columns: repeat(3, 1fr); }
.wpf-squad-teams--n4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 880px) {
  .wpf-squad-teams--n4 { grid-template-columns: repeat(4, 1fr); }
}
.wpf-squad-col { border: 1px solid var(--wpf-border); border-radius: var(--wpf-radius); overflow: hidden; min-width: 0; min-height: 0; }
.wpf-squad-col--team1 { border-top: 3px solid #2f6fe4; }
.wpf-squad-col--team2 { border-top: 3px solid #e0443c; }
.wpf-squad-col--team3 { border-top: 3px solid #22c55e; }
.wpf-squad-col--team4 { border-top: 3px solid #9333ea; }

.wpf-squad-head { display: flex; flex-direction: column; gap: 6px; }
.wpf-squad-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.wpf-squad-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.wpf-squad-meta-item i { color: var(--wpf-sand); font-size: 12px; }
.wpf-squad-meta-item strong { color: #fff; font-weight: 600; }

.wpf-squad-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--wpf-page);
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-text);
}
.wpf-squad-count { font-size: 11px; font-weight: 600; color: var(--wpf-muted); letter-spacing: .02em; text-transform: none; }

.wpf-squad-list { list-style: none; margin: 0; padding: 0; }
.wpf-squad-player {
  display: grid;
  grid-template-columns: 32px 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-top: 1px solid var(--wpf-border);
}
.wpf-squad-list .wpf-squad-player:first-child { border-top: 0; }
.wpf-squad-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  display: block;
}
.wpf-squad-num { font-family: var(--wpf-font-head); font-size: 12px; font-weight: 700; color: var(--wpf-muted); }
.wpf-squad-name { font-size: 14px; font-weight: 600; color: var(--wpf-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpf-squad-guest {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(217, 131, 36, .14);
  color: #8a4c00;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wpf-squad-empty { padding: 14px; text-align: center; color: var(--wpf-muted); font-size: 13px; border-top: 1px solid var(--wpf-border); list-style: none; }

/* Segmented team toggle */
.wpf-team-toggle {
  display: inline-flex;
  border: 1px solid var(--wpf-border);
  border-radius: 6px;
  overflow: hidden;
}
.wpf-seg { position: relative; display: inline-flex; }
.wpf-seg + .wpf-seg { border-left: 1px solid var(--wpf-border); }
.wpf-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.wpf-seg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--wpf-muted);
  background: #fff;
  transition: background .15s ease, color .15s ease;
  user-select: none;
  white-space: nowrap;
}
.wpf-seg:hover span { background: var(--wpf-page); }
.wpf-seg input:focus-visible + span { outline: 2px solid var(--wpf-gold); outline-offset: -2px; }
.wpf-seg input[value="1"]:checked + span { background: #2f6fe4; color: #fff; }
.wpf-seg input[value="2"]:checked + span { background: #e0443c; color: #fff; }
.wpf-seg input[value="3"]:checked + span { background: #22c55e; color: #fff; }
.wpf-seg input[value="4"]:checked + span { background: #9333ea; color: #fff; }

/* Unassigned + Standby sections */
.wpf-squad-section { border: 1px solid var(--wpf-border); border-radius: var(--wpf-radius); overflow: hidden; }
.wpf-squad-section--standby { border-color: rgba(246, 183, 0, .28); background: rgba(246, 183, 0, .05); }
.wpf-squad-section--standby .wpf-squad-col-head { background: rgba(246, 183, 0, .1); }
.wpf-squad-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(246, 183, 0, .18);
  color: #8a6a00;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.wpf-squad-tag--team {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
}
.wpf-squad-tag--team.wpf-squad-tag--team1 {
  background: rgba(47, 111, 228, .12);
  color: #1a4899;
  border: 1px solid rgba(47, 111, 228, .22);
}
.wpf-squad-tag--team.wpf-squad-tag--team2 {
  background: rgba(224, 68, 60, .12);
  color: #8a211a;
  border: 1px solid rgba(224, 68, 60, .22);
}
.wpf-squad-tag--team.wpf-squad-tag--team3 {
  background: rgba(34, 197, 94, .12);
  color: #14532d;
  border: 1px solid rgba(34, 197, 94, .22);
}
.wpf-squad-tag--team.wpf-squad-tag--team4 {
  background: rgba(147, 51, 234, .12);
  color: #4c1d95;
  border: 1px solid rgba(147, 51, 234, .22);
}
.wpf-squad-tag--team.wpf-squad-tag--unassigned {
  background: rgba(13, 27, 42, .06);
  color: #4b5564;
  border: 1px solid rgba(13, 27, 42, .10);
}

/* ============================================================
   HOME GOAL BARS
   ============================================================ */
.wpf-stat-row.wpf-goal-row { align-items: center; }
.wpf-goal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wpf-goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wpf-goal-bar { display: block; height: 6px; border-radius: 999px; background: rgba(246, 183, 0, .14); overflow: hidden; }
.wpf-goal-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wpf-gold), var(--wpf-sand)); }

/* ============================================================
   STATISTICS PAGE
   ============================================================ */
.wpf-stats { display: flex; flex-direction: column; gap: 18px; }
.wpf-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wpf-page-title {
  font-family: var(--wpf-font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--wpf-text);
}

.wpf-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--wpf-surface);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
}
.wpf-tab {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wpf-tab:hover { color: var(--wpf-text); }
.wpf-tab.is-active { background: var(--wpf-navy-900); color: #fff; }

.wpf-tab-panel { display: none; }
.wpf-tab-panel.is-active { display: block; }

.wpf-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; margin-bottom: 30px; }
.wpf-podium-card {
  position: relative;
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: 16px;
  padding: 26px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wpf-podium-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--wpf-gold), transparent);
  opacity: 0;
}
.wpf-podium-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(13, 27, 42, .12); }
.wpf-podium-card--1 {
  background: linear-gradient(180deg, #fffdf5, var(--wpf-card));
  border-color: rgba(246, 183, 0, .5);
  box-shadow: 0 16px 40px rgba(246, 183, 0, .2);
  padding: 32px 20px 24px;
}
.wpf-podium-card--1::before { opacity: 1; }
.wpf-podium-avatar { position: relative; }

/* Player photo avatars (Statistics) */
.wpf-podium-img,
.wpf-stat-avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  flex: 0 0 auto;
  display: block;
}
.wpf-podium-img {
  width: 68px; height: 68px;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(13, 27, 42, .18), 0 0 0 1px var(--wpf-border);
}
.wpf-podium-card--1 .wpf-podium-img {
  width: 86px; height: 86px;
  box-shadow: 0 8px 22px rgba(246, 183, 0, .35), 0 0 0 3px rgba(246, 183, 0, .35);
}
.wpf-stat-avatar {
  width: 32px; height: 32px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(13, 27, 42, .18), 0 0 0 1px var(--wpf-border);
}

.wpf-podium-rank {
  position: absolute;
  right: -7px;
  bottom: -3px;
  width: 27px; height: 27px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wpf-font-head); font-weight: 800; font-size: 12px;
  background: var(--wpf-navy-900); color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(13, 27, 42, .25);
}
.wpf-podium-card--1 .wpf-podium-rank { width: 31px; height: 31px; font-size: 13px; background: var(--wpf-gold); color: var(--wpf-navy-950); }
.wpf-podium-meta { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.wpf-podium-name { font-size: 15px; font-weight: 700; color: var(--wpf-text); }
.wpf-podium-goals { font-family: var(--wpf-font-head); font-size: 25px; font-weight: 800; color: var(--wpf-navy-900); line-height: 1; }
.wpf-podium-card--1 .wpf-podium-goals { font-size: 30px; color: #8a6a00; }
.wpf-podium-goals small { font-size: 11px; font-weight: 600; color: var(--wpf-muted); }

.wpf-stat-list--full { margin-top: 4px; }
.wpf-stat-list--full .wpf-goal-row,
.wpf-stat-list--full .wpf-wl-row {
  padding: 13px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  transition: background .16s ease;
}
.wpf-stat-list--full .wpf-goal-row:hover,
.wpf-stat-list--full .wpf-wl-row:hover { background: rgba(246, 183, 0, .07); }

/* Win/Loss full row (statistics page) */
.wpf-stat-row.wpf-wl-row--full { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.wpf-wl-row--full .wpf-wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wpf-wl-ident { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.wpf-wl-row--full .wpf-wl-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpf-wl-row--full .wpf-wl-counts { font-family: var(--wpf-font-head); font-weight: 700; font-size: 13px; }
.wpf-wl-pct { font-family: var(--wpf-font-head); font-weight: 800; font-size: 13px; color: var(--wpf-navy-900); margin-left: 8px; }

/* Refined bars (Statistics) — editorial leaderboard feel */
@keyframes wpf-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.wpf-stats .wpf-goal-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(13, 27, 42, .06);
  box-shadow: inset 0 1px 3px rgba(13, 27, 42, .1);
  overflow: hidden;
}
.wpf-stats .wpf-goal-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #E9A800, var(--wpf-gold) 55%, var(--wpf-sand));
  box-shadow: 0 1px 4px rgba(246, 183, 0, .4), inset 0 -1px 0 rgba(0, 0, 0, .08);
  transform-origin: left center;
  animation: wpf-bar-grow .9s cubic-bezier(.22, .61, .36, 1) both;
}
.wpf-stats .wpf-goal-row:first-child .wpf-goal-bar > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #D99300, var(--wpf-gold) 50%, #FFD54F);
  box-shadow: 0 2px 7px rgba(246, 183, 0, .55), inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.wpf-stats .wpf-wl-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(13, 27, 42, .06);
  box-shadow: inset 0 1px 3px rgba(13, 27, 42, .1);
  overflow: hidden;
  display: flex;
}
.wpf-stats .wpf-wl-bar-win {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #3E9C6D, var(--wpf-win));
  border-radius: 999px 0 0 999px;
  box-shadow: 0 1px 4px rgba(76, 175, 122, .35);
  transform-origin: left center;
  animation: wpf-bar-grow .9s cubic-bezier(.22, .61, .36, 1) both;
}
.wpf-stats .wpf-wl-bar-loss {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #E05C68, #C14B56);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 1px 4px rgba(224, 92, 104, .3);
  transform-origin: left center;
  animation: wpf-bar-grow .9s cubic-bezier(.22, .61, .36, 1) both;
}

/* ============================================================
   RESPONSIVE — SQUAD MODAL + STATISTICS
   ============================================================ */
@media (max-width: 767px) {
  .wpf-squad-modal .modal-dialog {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
    margin-top: max(12px, env(safe-area-inset-top)) !important;
    margin-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .wpf-squad-modal .modal-content {
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
  }
  .wpf-squad-teams { grid-template-columns: 1fr; }
  .wpf-squad-player { grid-template-columns: 32px 22px 1fr; gap: 10px; row-gap: 8px; padding: 9px 12px; }
  .wpf-team-toggle { grid-column: 1 / -1; width: 100%; }
  .wpf-team-toggle .wpf-seg { flex: 1; }
  .wpf-team-toggle .wpf-seg span { width: 100%; padding: 9px 12px; }
  .wpf-squad-player--standby .wpf-squad-tag { grid-column: 1 / -1; justify-self: start; }
  .wpf-podium { grid-template-columns: 1fr; }
  .wpf-podium-card--1 { order: -1; }
  .wpf-tabs { width: 100%; }
  .wpf-tab { flex: 1; text-align: center; }
}

/* ============================================================
   WPF AUTH
   Dedicated fullscreen Login / Create Account experience.
   Scoped to .wpf-auth-* and body.wpf-auth-page only.
   ============================================================ */
.wpf-auth-page {
  --wpf-auth-input: #091E33;
  --wpf-auth-border: #1F3A52;
  --wpf-auth-text: #F7F8FA;
  --wpf-auth-muted: #7A92AA;
  --wpf-gold-soft: #F5C04A;

  min-height: 100vh;
  margin: 0;
  background: #071827;
  color: var(--wpf-auth-text);
  overflow-x: hidden;
}

.wpf-auth {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ---------- Left brand panel ---------- */
.wpf-auth__brand {
  position: relative;
  flex: 0 0 47%;
  max-width: 47%;
  min-height: 100vh;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
  display: flex;
  align-items: stretch;
}

.wpf-auth__brand-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.wpf-auth__brand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 24, 39, .72), rgba(7, 24, 39, .45) 35%, rgba(7, 24, 39, .55) 65%, rgba(7, 24, 39, .85));
}

.wpf-auth__brand-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 56px 48px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wpf-auth__logo {
  width: 186px;
  height: 186px;
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(246, 183, 0, .35));
  margin-bottom: 22px;
}

.wpf-auth__title {
  font-family: var(--wpf-font-head);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  margin: 0;
}

.wpf-auth__title-white { color: #f7f8fa; }
.wpf-auth__title-gold { color: var(--wpf-gold); }

.wpf-auth__sub {
  font-family: var(--wpf-font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--wpf-gold);
  margin: 12px 0 16px;
}

.wpf-auth__tagline {
  font-size: 15px;
  color: rgba(247, 248, 250, .72);
  margin: 0 0 30px;
}

.wpf-auth__features {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.wpf-auth__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.wpf-auth__feature-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(246, 183, 0, .5);
  color: var(--wpf-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.wpf-auth__feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpf-auth__feature-text strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #f7f8fa;
}

.wpf-auth__feature-text span {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(247, 248, 250, .6);
}

.wpf-auth__copyright {
  margin: 48px 0 0;
  font-size: 12px;
  color: rgba(247, 248, 250, .55);
}

/* ---------- Right auth area ---------- */
.wpf-auth__main {
  flex: 1;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(21, 40, 61, .5), transparent 60%),
    linear-gradient(180deg, #0D1B2A 0%, #091520 100%);
}

.wpf-auth-card {
  width: 100%;
  max-width: 600px;
  background: linear-gradient(165deg, #0e2438, #0a1f32);
  border: 1px solid rgba(246, 183, 0, .22);
  border-radius: 18px;
  box-shadow: 0 32px 96px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}

/* ---------- Tabs ---------- */
.wpf-auth-tabs {
  display: flex;
  border-bottom: 1px solid #1a3149;
  background: #091d2f;
}

.wpf-auth-tab {
  flex: 1 1 50%;
  height: 62px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #506070;
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.wpf-auth-tab:hover { color: #c7d3df; }

.wpf-auth-tab.is-active {
  color: var(--wpf-gold);
  background: linear-gradient(180deg, #0f2438, #0c1e2e);
  border-bottom-color: var(--wpf-gold);
}

/* ---------- Panels ---------- */
.wpf-auth-panel {
  display: none;
  padding: 32px 36px 36px;
}

.wpf-auth-panel.is-active { display: block; }

.wpf-auth-head { margin-bottom: 24px; }

.wpf-auth-heading {
  font-family: var(--wpf-font-head);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--wpf-auth-text);
  margin: 0 0 6px;
}

.wpf-auth-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--wpf-auth-muted);
  margin: 0;
}

/* ---------- Fields ---------- */
.wpf-auth-field { margin-bottom: 16px; }

.wpf-auth-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #d4dfe8;
  margin-bottom: 8px;
}

.wpf-auth-field input[type="text"],
.wpf-auth-field input[type="email"],
.wpf-auth-field input[type="tel"],
.wpf-auth-field input[type="password"] {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  background: var(--wpf-auth-input);
  border: 1px solid var(--wpf-auth-border);
  border-radius: 12px;
  padding: 0 18px;
  color: var(--wpf-auth-text);
  font-size: 15px;
  font-family: var(--wpf-font-body);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpf-auth-field input::placeholder { color: var(--wpf-auth-muted); }

.wpf-auth-field input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}

.wpf-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wpf-auth-inputwrap { position: relative; }

.wpf-auth-inputwrap input { padding-right: 48px; }

.wpf-auth-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #5a7a95;
  font-size: 16px;
  cursor: pointer;
}

.wpf-auth-eye:hover { color: var(--wpf-gold); }

/* ---------- Remember me / lost password ---------- */
.wpf-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 20px;
}

.wpf-auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #9da9b7;
  cursor: pointer;
  margin: 0;
}

.wpf-auth-remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--wpf-gold);
  border-radius: 4px;
  background: rgba(246, 183, 0, .12);
  cursor: pointer;
  position: relative;
}

.wpf-auth-remember input[type="checkbox"]:checked { background: var(--wpf-gold); }

.wpf-auth-remember input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #071827;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wpf-auth-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--wpf-gold);
  text-decoration: none;
}

.wpf-auth-link:hover { color: var(--wpf-gold-soft); text-decoration: underline; }

/* ---------- Submit ---------- */
.wpf-auth-submit {
  width: 100%;
  height: 58px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #f6b700 0%, #f5c04a 100%);
  color: #071827;
  font-family: var(--wpf-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.6px;
  cursor: pointer;
  transition: filter .2s ease, transform .15s ease;
}

.wpf-auth-submit:hover { filter: brightness(1.04); }
.wpf-auth-submit:active { transform: translateY(1px); }
.wpf-auth-submit:disabled { opacity: .7; cursor: not-allowed; }

.wpf-auth-switch {
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--wpf-auth-muted);
  margin: 20px 0 0;
}

.wpf-auth-switch a {
  color: var(--wpf-gold);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.wpf-auth-switch a:hover { text-decoration: underline; }

/* ---------- Alerts / feedback ---------- */
.wpf-auth-alert { margin: 0 0 16px; }

.wpf-auth-alert .alert {
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.wpf-auth-alert .alert-danger { background: rgba(224, 92, 104, .14); color: #ffb4bc; }
.wpf-auth-alert .alert-success { background: rgba(76, 175, 122, .14); color: #8fe3b0; }
.wpf-auth-alert .alert-warning { background: rgba(246, 183, 0, .14); color: #f5c04a; }

.wpf-auth-alert .btn-primary {
  background: var(--wpf-gold);
  border-color: var(--wpf-gold);
  color: #071827;
  font-weight: 600;
}

.wpf-auth-spinner {
  text-align: center;
  color: var(--wpf-gold);
  margin: 0 0 16px;
}

/* ============================================================
   RESPONSIVE — WPF AUTH
   ============================================================ */
@media (max-width: 1200px) {
  .wpf-auth__logo { width: 150px; height: 150px; }
  .wpf-auth__title { font-size: 34px; }
  .wpf-auth__brand-content { padding: 40px 32px 36px; }
}

@media (max-width: 1024px) {
  .wpf-auth__main { padding: 36px 28px; }
  .wpf-auth__brand-content { padding: 36px 24px 32px; }
  .wpf-auth__logo { width: 136px; height: 136px; }
  .wpf-auth__title { font-size: 30px; }
  .wpf-auth__sub { font-size: 16px; letter-spacing: .2em; }
}

@media (max-width: 900px) {
  .wpf-auth { flex-direction: column; }

  .wpf-auth__brand {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    clip-path: none;
  }

  .wpf-auth__brand-content {
    min-height: 0;
    padding: 32px 20px 26px;
  }

  .wpf-auth__logo { width: 96px; height: 96px; margin-bottom: 12px; }
  .wpf-auth__title { font-size: 26px; }
  .wpf-auth__sub { font-size: 14px; letter-spacing: .22em; margin: 8px 0 10px; }
  .wpf-auth__tagline,
  .wpf-auth__features { display: none; }
  .wpf-auth__copyright { margin: 16px 0 0; }

  .wpf-auth__main {
    min-height: 0;
    padding: 0 16px 32px;
  }

  .wpf-auth-card { max-width: 100%; }
  .wpf-auth-panel { padding: 24px 20px 28px; }
  .wpf-auth-heading { font-size: 24px; }
  .wpf-auth-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   WPF ACCOUNT (My Account)
   ============================================================ */
.wpf-account { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Top: profile + next match ---------- */
.wpf-account-top {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.wpf-account-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  padding: 20px;
}
.wpf-account-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  display: block;
  flex: 0 0 auto;
}
.wpf-account-profile-name { font-size: 20px; margin: 0; color: var(--wpf-text); }
.wpf-account-profile-meta {
  margin: 0;
  font-size: 13px;
  color: var(--wpf-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
}
.wpf-account-profile-meta i { color: var(--wpf-gold-hover); width: 14px; text-align: center; }
.wpf-account-profile-edit { margin-top: 4px; }

.wpf-account-next {
  position: relative;
  border-radius: var(--wpf-radius);
  padding: 22px 24px;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(7, 24, 39, .96) 0%, rgba(13, 27, 42, .9) 52%, rgba(21, 40, 61, .6) 100%),
    url('../images/background/wpf-home-hero.png') center right / cover no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wpf-account-next-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.wpf-account-next-title { font-size: 26px; margin: 0; letter-spacing: .02em; }
.wpf-account-next-time { font-size: 20px; font-weight: 700; color: var(--wpf-sand); }
.wpf-account-next-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .78); }
.wpf-account-next-meta i { color: var(--wpf-sand); }
.wpf-account-next-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.wpf-account-next-empty { margin: 0; color: rgba(255, 255, 255, .72); }

/* ---------- Badges ---------- */
.wpf-account-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.2;
}
.wpf-account-badge--gold { background: var(--wpf-gold); color: var(--wpf-navy-950); }
.wpf-account-badge--win { background: rgba(76, 175, 122, .12); color: #2f8f5b; border: 1px solid rgba(76, 175, 122, .3); }
.wpf-account-badge--stb { background: rgba(217, 131, 36, .12); color: #b06c14; border: 1px solid rgba(217, 131, 36, .3); }
.wpf-account-badge--nc { background: rgba(239, 68, 68, .1); color: #b91c1c; border: 1px solid rgba(239, 68, 68, .3); }
.wpf-account-badge--played { background: rgba(15, 23, 42, .08); color: #334155; border: 1px solid rgba(15, 23, 42, .18); }
.wpf-account-next .wpf-account-badge--win { background: rgba(76, 175, 122, .22); color: #8ef0b6; border-color: rgba(76, 175, 122, .45); }
.wpf-account-next .wpf-account-badge--stb { background: rgba(246, 183, 0, .2); color: var(--wpf-sand); border-color: rgba(246, 183, 0, .5); }
.wpf-account-next .wpf-account-badge--nc { background: rgba(239, 68, 68, .18); color: #fecaca; border-color: rgba(239, 68, 68, .5); }

/* ---------- Metric cards ---------- */
.wpf-account-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.wpf-account-metric {
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wpf-account-metric-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-muted);
}
.wpf-account-metric-top i { color: var(--wpf-gold-hover); font-size: 13px; }
.wpf-account-metric-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--wpf-text);
  font-family: var(--wpf-font-head);
}
.wpf-account-metric-sub { font-size: 11px; color: var(--wpf-muted); }

/* ---------- Main: matches + side ---------- */
.wpf-account-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.wpf-account-matches {
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  overflow: hidden;
}
.wpf-account-matches-head {
  padding: 16px 20px 0;
}
.wpf-account-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0;
  color: var(--wpf-text);
}
.wpf-account-card-sub { margin: 4px 0 0; font-size: 12px; color: var(--wpf-muted); }

.wpf-account-tabs {
  display: flex;
  gap: 24px;
  padding: 12px 20px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-account-tab {
  border: 0;
  background: transparent;
  padding: 0 0 12px;
  margin-bottom: -1px;
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.wpf-account-tab:hover { color: var(--wpf-text); }
.wpf-account-tab.is-active {
  color: var(--wpf-gold-hover);
  border-bottom-color: var(--wpf-gold);
}

.wpf-account-panel { display: none; }
.wpf-account-panel.is-active { display: block; }

/* ---------- MY MATCHES table (semantic, single source of truth) ---------- */
.wpf-account-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Single column definition shared by thead + tbody */
.wpf-account-table .col-date    { width: 14%; }
.wpf-account-table .col-match   { width: 16%; }
.wpf-account-table .col-status  { width: 19%; }
.wpf-account-table .col-players { width: 8%; }
.wpf-account-table .col-goals   { width: 7%; }
.wpf-account-table .col-assists { width: 7%; }
.wpf-account-table .col-actions { width: 29%; }

.wpf-account-table th {
  text-align: center;
  vertical-align: middle;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wpf-border);
  background: #fafbfc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-muted);
  white-space: nowrap;
}

.wpf-account-table td {
  vertical-align: middle;
  padding: 12px;
  border-bottom: 1px solid var(--wpf-border);
}

.wpf-account-table tbody tr:hover { background: #fafbfc; }
.wpf-account-table tbody tr:last-child td { border-bottom: 0; }

/* Body alignment */
.wpf-account-table td:nth-child(1),
.wpf-account-table td:nth-child(2),
.wpf-account-table td:nth-child(3) {
  text-align: left;
}

.wpf-account-table th:nth-child(4),
.wpf-account-table th:nth-child(5),
.wpf-account-table th:nth-child(6),
.wpf-account-table td:nth-child(4),
.wpf-account-table td:nth-child(5),
.wpf-account-table td:nth-child(6) {
  text-align: center;
}

.wpf-account-table td:nth-child(7) { text-align: right; }

.wpf-account-cell--date { line-height: 1.35; }
.wpf-account-row-date { display: block; font-size: 13px; font-weight: 600; color: var(--wpf-text); }
.wpf-account-row-time { display: block; font-size: 12px; color: var(--wpf-muted); }
.wpf-account-row-name { font-size: 14px; font-weight: 700; color: var(--wpf-text); }

.wpf-account-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wpf-navy-700);
  background: var(--wpf-page);
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.wpf-account-cell--stat .wpf-account-input {
  display: inline-block;
  width: 44px;
  height: 38px;
  padding: 0 6px;
  text-align: center;
  font-size: 14px;
  -moz-appearance: textfield;
}
.wpf-account-cell--stat .wpf-account-input::-webkit-outer-spin-button,
.wpf-account-cell--stat .wpf-account-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wpf-account-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.wpf-account-actions .wpf-account-btn { padding: 6px 10px; }
.wpf-account-standby {
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-muted);
  padding: 7px 2px;
  white-space: nowrap;
}
.wpf-account-standby--muted { color: var(--wpf-muted); opacity: .65; font-style: italic; }

.wpf-account-input {
  width: 100%;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  font-size: 14px;
  padding: 8px 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-account-input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}

/* ----- Goals / Assists save-state visual feedback (Samsung reliability layer) ----- */
.wpf-account-input.is-saving {
  pointer-events: none;
  opacity: .7;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='7' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-dasharray='20 100' stroke-dashoffset='0'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.9s' repeatCount='indefinite'/></circle></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 14px 14px;
  padding-right: 24px;
}
.wpf-account-input.is-saved {
  border-color: #2f8f5b !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 122, .18) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 13l4 4L19 7' stroke='%232f8f5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 14px 14px;
  padding-right: 24px;
}
.wpf-account-input.is-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M12 9v4M12 17h.01M10.3 5.5l-7.7 13.4C1.8 20.5 3 22 4.7 22h14.6c1.7 0 2.9-1.5 2.1-3.1l-7.7-13.4C13.2 4.3 10.8 4.3 10.3 5.5z' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 14px 14px;
  padding-right: 24px;
  animation: wpf-shake .45s ease-in-out;
}
@keyframes wpf-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.wpf-account-empty { padding: 28px 18px; text-align: center; color: var(--wpf-muted); font-size: 14px; }

/* ---------- History toolbar + pager (compact, non-DataTables) ---------- */
.wpf-account-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 20px;
  border-bottom: 1px solid var(--wpf-border);
  background: #fafbfc;
}
.wpf-account-toolbar-search { max-width: 220px; }
.wpf-account-toolbar-sort { max-width: 150px; width: auto; }
.wpf-account-pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 20px;
  border-top: 1px solid var(--wpf-border);
}
.wpf-account-pager .wpf-account-btn { padding: 5px 12px; }

/* ---------- Side: account details + performance ---------- */
.wpf-account-side { display: flex; flex-direction: column; gap: 16px; }
.wpf-account-details,
.wpf-account-performance {
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  padding: 18px;
}
.wpf-account-card-head { margin-bottom: 14px; }

.wpf-account-form { display: flex; flex-direction: column; gap: 14px; }
.wpf-account-form-grid { display: flex; flex-direction: column; gap: 12px; }
.wpf-account-field { display: flex; flex-direction: column; gap: 6px; }
.wpf-account-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpf-muted);
}
.wpf-account-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.wpf-account-field--photo { gap: 8px; }
.wpf-account-photo { position: relative; display: flex; align-items: center; gap: 12px; }
.wpf-account-photo-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
}
.wpf-account-photo-choose { padding: 7px 12px; cursor: pointer; }
.wpf-account-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.wpf-account-card-head--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wpf-account-card-head--split .wpf-account-btn { padding: 5px 11px; }

.wpf-account-detail-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wpf-account-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-account-detail-item:last-child { border-bottom: 0; }
.wpf-account-detail-item dt {
  margin: 0;
  font-size: 12px;
  color: var(--wpf-muted);
}
.wpf-account-detail-item dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-text);
  text-align: right;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wpf-account-perf { display: flex; flex-direction: column; gap: 14px; }
.wpf-account-perf-row { display: flex; gap: 16px; }
.wpf-account-perf-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wpf-muted); }
.wpf-account-perf-meta strong { font-size: 18px; color: var(--wpf-text); }
.wpf-account-perf-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(224, 92, 104, .16);
}
.wpf-account-perf-bar span { background: var(--wpf-win); }
.wpf-account-perf-bar span.is-loss { background: var(--wpf-loss); }
.wpf-account-perf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wpf-account-perf-stat { display: flex; flex-direction: column; gap: 6px; }
.wpf-account-perf-stat > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpf-muted);
}
.wpf-account-perf-stat > strong { font-size: 20px; color: var(--wpf-text); }
.wpf-account-perf-mini { height: 6px; border-radius: 999px; background: var(--wpf-page); overflow: hidden; }
.wpf-account-perf-mini i { display: block; height: 100%; background: var(--wpf-gold); }
.wpf-account-perf-rate { font-size: 13px; color: var(--wpf-muted); }
.wpf-account-perf-rate strong { color: var(--wpf-text); font-size: 15px; }

/* ---------- Buttons ---------- */
.wpf-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 13px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wpf-account-btn i { font-size: 12px; }
.wpf-account-btn--primary { background: var(--wpf-navy-900); color: #fff; border-color: var(--wpf-navy-900); }
.wpf-account-btn--primary:hover { background: var(--wpf-navy-700); color: #fff; border-color: var(--wpf-navy-700); text-decoration: none; }
.wpf-account-btn--ghost { background: #fff; color: var(--wpf-navy-700); border-color: var(--wpf-border); }
.wpf-account-btn--ghost:hover { border-color: var(--wpf-gold); color: var(--wpf-navy-900); background: #fff; text-decoration: none; }
.wpf-account-btn--danger { background: #fff; color: var(--wpf-loss); border-color: rgba(224, 92, 104, .4); }
.wpf-account-btn--danger:hover { background: var(--wpf-loss); color: #fff; border-color: var(--wpf-loss); }

.wpf-account-next .wpf-account-btn--primary { background: var(--wpf-gold); color: var(--wpf-navy-950); border-color: var(--wpf-gold); }
.wpf-account-next .wpf-account-btn--primary:hover { background: var(--wpf-sand); border-color: var(--wpf-sand); }
.wpf-account-next .wpf-account-btn--danger { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.wpf-account-next .wpf-account-btn--danger:hover { background: var(--wpf-loss); border-color: var(--wpf-loss); color: #fff; }

/* ---------- Invite Guest modal (non-DataTables guest list) ---------- */
.wpf-modal-head { display: flex; flex-direction: column; gap: 3px; }
.wpf-modal-sub {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}
.wpf-guest-label {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wpf-muted);
}
.wpf-guest-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  overflow: hidden;
}
.wpf-guest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--wpf-border);
  background: #fff;
}
.wpf-guest-row:last-child { border-bottom: 0; }
.wpf-guest-input { flex: 1; }
.wpf-guest-row .wpf-account-btn { padding: 6px 10px; }
.wpf-guest-empty {
  display: none;
  padding: 22px 12px;
  text-align: center;
  color: var(--wpf-muted);
  font-size: 13px;
  line-height: 1.5;
}
.wpf-guest-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wpf-navy-700);
  background: transparent;
  border: 1px dashed var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  padding: 8px 12px;
  cursor: pointer;
}
.wpf-guest-add:hover { border-color: var(--wpf-gold); color: var(--wpf-navy-900); }
.wpf-guest-add i { font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .wpf-account-main { grid-template-columns: 1fr; }
  .wpf-account-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 1100px) {
  .wpf-account-top { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .wpf-account-table { display: block; }
  .wpf-account-table thead { display: none; }
  .wpf-account-table tbody { display: block; }

  /* ----- COMPACT MOBILE CARD (3 rows max per match, minimal scroll) ----- */
  .wpf-account-table tr {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr auto auto;
    grid-template-areas:
      "datetime venue   status  players"
      "datetime venue   goals   assists"
      "actions  actions actions actions";
    gap: 6px 10px;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--wpf-border);
    border-radius: var(--wpf-radius);
    background: var(--wpf-card);
  }

  .wpf-account-table td {
    display: block;
    padding: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
    align-self: center;
  }

  /* Cell → area assignment (pure CSS, HTML untouched) */
  .wpf-account-table td:nth-child(1) { grid-area: datetime; } /* Date + Time */
  .wpf-account-table td:nth-child(2) { grid-area: venue;    } /* Location name */
  .wpf-account-table td:nth-child(3) { grid-area: status;   } /* Status badge */
  .wpf-account-table td:nth-child(4) { grid-area: players;  } /* X/Y players */
  .wpf-account-table td:nth-child(5) { grid-area: goals;    } /* Goals input  */
  .wpf-account-table td:nth-child(6) { grid-area: assists;  } /* Assists input */
  .wpf-account-table td:nth-child(7) { grid-area: actions;  } /* Action buttons */

  /* 1. DATETIME CELL (left column, 2 rows span): Date + Time INLINE (1 line each, stacked tight) */
  .wpf-account-cell--date { line-height: 1.25; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
  .wpf-account-cell--date .wpf-account-row-date { display: block; font-size: 12px; font-weight: 700; color: var(--wpf-text); }
  .wpf-account-cell--date .wpf-account-row-time { display: block; font-size: 11px; color: var(--wpf-muted); font-weight: 500; }

  /* 2. VENUE CELL (2 rows span): location name, vertically centered + tiny divider icon via CSS */
  .wpf-account-cell--match {
    display: flex;
    align-items: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-left: 1px dashed var(--wpf-border);
    min-height: 100%;
    height: 100%;
  }
  .wpf-account-row-name { font-size: 13px; font-weight: 700; color: var(--wpf-text); line-height: 1.2; }

  /* 3. STATUS BADGE (compact, tiny, uppercase tight) */
  .wpf-account-cell--status .wpf-account-badge {
    padding: 3px 7px !important;
    font-size: 9px !important;
    letter-spacing: .04em !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* 4. PLAYERS COUNT (pill-shaped, compact, tiny) */
  .wpf-account-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    gap: 3px !important;
    white-space: nowrap;
  }

  /* 5+6. GOALS / ASSISTS inputs: label via CSS ::before (👁 G / 🎯 A) + compact size */
  .wpf-account-cell--stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .wpf-account-cell--stat::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--wpf-muted);
    text-transform: uppercase;
  }
  .wpf-account-table td:nth-child(5).wpf-account-cell--stat::before { content: "⚽ G"; }
  .wpf-account-table td:nth-child(6).wpf-account-cell--stat::before { content: "🎯 A"; }
  .wpf-account-cell--stat .wpf-account-input {
    width: 34px !important;
    height: 26px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  /* 7. ACTIONS ROW (Who's Playing / Invite / Remove → compact icon-text, tight flex, minimal wrap) */
  .wpf-account-actions {
    display: flex;
    gap: 6px !important;
    align-items: center;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-top: 6px;
    border-top: 1px dashed var(--wpf-border);
    margin-top: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .wpf-account-actions::-webkit-scrollbar { display: none; }
  .wpf-account-actions .wpf-account-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    gap: 4px !important;
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 6px !important;
    line-height: 1.35 !important;
  }
  .wpf-account-actions .wpf-account-btn i { font-size: 11px !important; }
  .wpf-account-standby {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 4px !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .wpf-account-side { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .wpf-account-next { padding: 20px 18px; }
  .wpf-account-next-title { font-size: 22px; }
  .wpf-account-metric-value { font-size: 22px; }
}

/* ============================================================
   PLAYERS MANAGEMENT (users.php)
   Banani Player Directory visual + existing DataTables engine.
   ============================================================ */
.wpf-players { display: flex; flex-direction: column; gap: 16px; }

.wpf-players-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wpf-players-title {
  font-family: var(--wpf-font-head);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--wpf-text);
}
.wpf-players-subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--wpf-muted);
}
.wpf-players-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wpf-players-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(246, 183, 0, .1);
  border: 1px solid rgba(246, 183, 0, .2);
  color: #b38900;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.wpf-players-count i { font-size: 12px; }

.wpf-players-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--wpf-radius-sm);
  background: linear-gradient(135deg, #f6b700 0%, #f5c04a 100%);
  color: #071827;
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.wpf-players-add:hover { filter: brightness(1.04); }
.wpf-players-add:active { transform: translateY(1px); }
.wpf-players-add i { font-size: 13px; }

.wpf-players-card { overflow-x: auto; }

/* ---------- Table ---------- */
.wpf-players-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.wpf-players-table thead th {
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--wpf-muted);
  white-space: nowrap;
}
.wpf-players-table thead th:nth-child(4) { text-align: center; }
.wpf-players-table thead th:nth-child(6) { text-align: right; }

.wpf-players-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--wpf-text);
}
.wpf-players-table tbody tr:last-child td { border-bottom: 0; }
.wpf-players-table tbody tr:hover { background: #fafbfc; }
.wpf-players-table td.wpf-player-status { text-align: center; }
.wpf-players-table td.wpf-player-actions { text-align: right; }
.wpf-players-table td.wpf-player-cell { text-align: left; }

/* ---------- Player identity cell ---------- */
.wpf-player-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.wpf-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  flex: 0 0 auto;
  display: block;
}
.wpf-player-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 2px;
  min-width: 0;
}
.wpf-player-name {
  display: block;
  width: 100%;
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--wpf-text);
  line-height: 1.2;
}
.wpf-player-username {
  display: block;
  width: 100%;
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  font-size: 12px;
  color: var(--wpf-muted);
}

/* ---------- Secondary cells ---------- */
.wpf-player-contact { color: var(--wpf-muted); }
.wpf-player-contact i { margin-right: 6px; color: var(--wpf-gold-hover); font-size: 12px; }
.wpf-player-phone { white-space: nowrap; }
.wpf-player-created { color: var(--wpf-muted); font-size: 12px; white-space: nowrap; }

/* ---------- Actions cell ---------- */
.wpf-player-actions {
  position: relative;
}
.wpf-player-actions-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  background: inherit;
  padding: 2px 0;
}
.wpf-players-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wpf-players-btn:hover { border-color: var(--wpf-gold); color: var(--wpf-navy-900); }
.wpf-players-btn--edit:hover { background: rgba(246, 183, 0, .1); }
.wpf-players-btn--delete { color: var(--wpf-loss); border-color: rgba(224, 92, 104, .35); }
.wpf-players-btn--delete:hover { background: var(--wpf-loss); border-color: var(--wpf-loss); color: #fff; }

/* ---------- Verify button (actionable state) ---------- */
.wpf-players-verify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(217, 131, 36, .35);
  background: rgba(217, 131, 36, .1);
  color: #b06c14;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.wpf-players-verify:hover { background: rgba(217, 131, 36, .2); }
.wpf-players-verify i { font-size: 12px; }

/* ---------- Add / Edit modal form ---------- */
.wpf-players-modal .modal-dialog { max-width: 520px; }
.wpf-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wpf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wpf-field--full { grid-column: 1 / -1; }
.wpf-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpf-muted);
}
.wpf-input {
  width: 100%;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  font-size: 14px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}

.wpf-form-msg {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.wpf-form-msg--error { background: rgba(224, 92, 104, .1); color: var(--wpf-loss); border: 1px solid rgba(224, 92, 104, .3); }
.wpf-form-msg--success { background: rgba(76, 175, 122, .1); color: var(--wpf-win); border: 1px solid rgba(76, 175, 122, .3); }

/* ---------- Edit player profile photo ---------- */
.wpf-user-photo-field { display: none; }
.wpf-user-photo-field.is-visible { display: flex; }
.wpf-user-status-field { display: none; }
.wpf-user-status-field.is-visible { display: flex; }
.wpf-user-photo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wpf-user-photo-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--wpf-border);
  background: var(--wpf-page);
  flex: 0 0 auto;
  display: block;
}
.wpf-user-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wpf-user-photo-choose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-navy-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wpf-user-photo-choose:hover {
  border-color: var(--wpf-gold);
  color: var(--wpf-navy-900);
  background: rgba(246, 183, 0, .08);
}
.wpf-user-photo-hint {
  font-size: 11px;
  color: var(--wpf-muted);
}
.wpf-user-photo-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Screen-reader-only text used for DataTables search/sort orthogonal data */
.wpf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- DataTables visual overrides (scoped) ---------- */
#playersTable_wrapper .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
}
#playersTable_wrapper .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
}

#playersTable_wrapper .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
#playersTable_wrapper .dt-length select {
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 6px 8px;
  font-size: 13px;
}

#playersTable_wrapper .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  background: #f9fafb;
  border-radius: var(--wpf-radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--wpf-text);
}
#playersTable_wrapper .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}

#playersTable_wrapper .dt-info {
  font-size: 12px;
  color: var(--wpf-muted);
}

#playersTable_wrapper .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
#playersTable_wrapper .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#playersTable_wrapper .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
#playersTable_wrapper .dt-paging-button:focus {
  outline: none;
  border-color: var(--wpf-gold);
}
#playersTable_wrapper .dt-paging-button.current,
#playersTable_wrapper .dt-paging-button.current:hover,
#playersTable_wrapper .dt-paging-button.current:focus,
#playersTable_wrapper .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
#playersTable_wrapper .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
#playersTable_wrapper .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* ---------- Players responsive ---------- */
@media (max-width: 767px) {
  .wpf-players-head { flex-direction: column; align-items: flex-start; }
  .wpf-players-head-actions { width: 100%; justify-content: space-between; }
  #playersTable_wrapper .dt-search input { width: 100%; }
  .wpf-form-grid { grid-template-columns: 1fr; }
}

/* ---------- WPF themed Players modal / alert backdrop (scoped) ---------- */
/* Global backdrop handled by centralized .modal-backdrop rule above. */

.swal2-container.wpf-players-swal.swal2-backdrop-show {
  background-color: transparent !important;
  background-image:
    linear-gradient(
      rgba(4, 14, 25, .86),
      rgba(4, 14, 25, .90)
    ),
    url('../images/background/wpf-home-sunset-wide.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   MATCH MANAGEMENT (admin.php)
   Mirrors Players Management visual language.
   ============================================================ */
.wpf-match-admin { display: flex; flex-direction: column; gap: 16px; }

.wpf-match-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wpf-match-admin-title {
  font-family: var(--wpf-font-head);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--wpf-text);
}
.wpf-match-admin-subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--wpf-muted);
}
.wpf-match-admin-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wpf-match-admin-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(246, 183, 0, .1);
  border: 1px solid rgba(246, 183, 0, .2);
  color: #b38900;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.wpf-match-admin-count i { font-size: 12px; }
.wpf-match-admin-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--wpf-radius-sm);
  background: linear-gradient(135deg, #f6b700 0%, #f5c04a 100%);
  color: #071827;
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.wpf-match-admin-add:hover { filter: brightness(1.04); }
.wpf-match-admin-add:active { transform: translateY(1px); }
.wpf-match-admin-add i { font-size: 13px; }

/* ---------- Summary cards ---------- */
.wpf-match-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.wpf-match-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  padding: 18px;
}
.wpf-match-summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
}
.wpf-match-summary-icon--gold { background: rgba(246, 183, 0, .14); border: 1px solid rgba(246, 183, 0, .30); color: #b38900; }
.wpf-match-summary-icon--green { background: rgba(76, 175, 122, .13); border: 1px solid rgba(76, 175, 122, .28); color: #2e7d52; }
.wpf-match-summary-icon--navy { background: rgba(30, 52, 80, .10); border: 1px solid rgba(30, 52, 80, .18); color: var(--wpf-navy-700); }
.wpf-match-summary-value {
  font-family: var(--wpf-font-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--wpf-text);
}
.wpf-match-summary-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wpf-muted);
  white-space: nowrap;
}

.wpf-match-admin-card { overflow-x: auto; }

/* ---------- Table ---------- */
.wpf-match-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.wpf-match-table thead th {
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--wpf-muted);
  white-space: nowrap;
}
.wpf-match-table thead th:nth-child(5) { text-align: center; }
.wpf-match-table thead th:nth-child(8) { text-align: right; }

.wpf-match-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--wpf-text);
}
.wpf-match-table tbody tr:last-child td { border-bottom: 0; }
.wpf-match-table tbody tr:hover { background: #fafbfc; }
.wpf-match-table td.wpf-match-actions {
  display: table-cell;
  margin-top: 0;
  padding-top: 12px;
  border-top: 0;
  text-align: right;
  white-space: nowrap;
}
.wpf-match-table td.wpf-match-created { color: var(--wpf-muted); white-space: nowrap; }
.wpf-match-table td.wpf-match-stb { text-align: center; }

/* ---------- Date & time ---------- */
.wpf-match-datetime { min-width: 150px; }
.wpf-match-datetime-date { font-weight: 600; color: var(--wpf-text); white-space: nowrap; }
.wpf-match-datetime-time { margin-top: 2px; font-size: 12px; color: var(--wpf-muted); white-space: nowrap; }
.wpf-match-datetime-time i { margin-right: 4px; font-size: 11px; }

/* ---------- Location ---------- */
.wpf-match-loc { min-width: 140px; }
.wpf-match-loc-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wpf-match-loc-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(246, 183, 0, .14);
  color: #b38900;
  font-size: 12px;
}
.wpf-match-loc-name { font-weight: 600; }

/* ---------- Players capacity ---------- */
.wpf-match-cap { min-width: 150px; }
.wpf-match-cap-top { display: flex; align-items: center; margin-bottom: 5px; }
.wpf-match-cap-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wpf-match-cap-badge--normal { background: rgba(76, 175, 122, .12); color: #2e7d52; }
.wpf-match-cap-badge--near { background: rgba(246, 183, 0, .16); color: #b38900; }
.wpf-match-cap-badge--full { background: rgba(246, 183, 0, .28); color: #8a6700; }
.wpf-match-cap-bar { height: 6px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.wpf-match-cap-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease, background .3s ease;
}
.wpf-match-cap-fill--normal { background: var(--wpf-win); }
.wpf-match-cap-fill--near { background: var(--wpf-gold); }
.wpf-match-cap-fill--full { background: linear-gradient(90deg, var(--wpf-gold), var(--wpf-gold-hover)); }

/* ---------- Standby ---------- */
.wpf-match-stb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.wpf-match-stb-badge--empty {
  background: rgba(107, 122, 141, .08);
  border: 1px solid rgba(107, 122, 141, .16);
  color: var(--wpf-muted);
}
.wpf-match-stb-badge--used {
  background: rgba(246, 183, 0, .14);
  border: 1px solid rgba(246, 183, 0, .38);
  color: #b38900;
}
.wpf-match-stb-badge--full {
  background: rgba(246, 183, 0, .26);
  border: 1px solid rgba(246, 183, 0, .55);
  color: #8a6700;
}

/* ---------- Status ---------- */
.wpf-match-status { min-width: 110px; }
.wpf-match-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.wpf-match-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wpf-match-status-badge--confirmed {
  background: rgba(76, 175, 122, .14);
  border: 1px solid rgba(76, 175, 122, .32);
  color: var(--wpf-win);
}
.wpf-match-status-badge--pending {
  background: rgba(246, 183, 0, .14);
  border: 1px solid rgba(246, 183, 0, .38);
  color: #b38900;
}

/* ---------- Match type badge ---------- */
.wpf-match-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.wpf-match-type-badge--standard {
  background: linear-gradient(180deg, rgba(30, 52, 80, .06), rgba(30, 52, 80, .12));
  border: 1px solid rgba(30, 52, 80, .16);
  color: var(--wpf-navy-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.wpf-match-type-badge--tournament {
  background: linear-gradient(135deg, rgba(246, 183, 0, .30), rgba(246, 183, 0, .14));
  border: 1px solid rgba(246, 183, 0, .55);
  color: #7a5c00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ---------- Actions ---------- */
.wpf-match-actions-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.wpf-match-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wpf-match-btn:hover { border-color: var(--wpf-gold); color: var(--wpf-navy-900); text-decoration: none; }
.wpf-match-btn--edit:hover { background: rgba(246, 183, 0, .12); }
.wpf-match-btn--delete { background: rgba(224, 92, 104, .08); color: var(--wpf-loss); border-color: rgba(224, 92, 104, .28); }
.wpf-match-btn--delete:hover { background: var(--wpf-loss); border-color: var(--wpf-loss); color: #fff; }

/* ---------- Add Match modal ---------- */
.wpf-match-modal { max-width: 640px; }
.wpf-match-modal-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}
.wpf-match-modal .modal-footer .btn-primary {
  background: var(--wpf-gold);
  border-color: var(--wpf-gold);
  color: #071827;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 18px;
  border-radius: var(--wpf-radius-sm);
}
.wpf-match-modal .modal-footer .btn-primary:hover,
.wpf-match-modal .modal-footer .btn-primary:focus {
  background: var(--wpf-gold-hover);
  border-color: var(--wpf-gold-hover);
  color: #071827;
}

/* ---------- DataTables overrides (matches, scoped) ---------- */
#matchesTable_wrapper .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
}
#matchesTable_wrapper .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
}
#matchesTable_wrapper .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
#matchesTable_wrapper .dt-length select {
  height: 38px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 0 10px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#matchesTable_wrapper .dt-length select:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}
#matchesTable_wrapper .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  background: #fff;
  border-radius: var(--wpf-radius-sm);
  padding: 0 12px;
  font-size: 14px;
  color: var(--wpf-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#matchesTable_wrapper .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}
#matchesTable_wrapper .dt-info {
  font-size: 12px;
  color: var(--wpf-muted);
}
#matchesTable_wrapper .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
#matchesTable_wrapper .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#matchesTable_wrapper .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
#matchesTable_wrapper .dt-paging-button:focus { outline: none; border-color: var(--wpf-gold); }
#matchesTable_wrapper .dt-paging-button.current,
#matchesTable_wrapper .dt-paging-button.current:hover,
#matchesTable_wrapper .dt-paging-button.current:focus,
#matchesTable_wrapper .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
#matchesTable_wrapper .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
#matchesTable_wrapper .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* ---------- Sort indicators (matches, scoped) ---------- */
#matchesTable_wrapper table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
#matchesTable_wrapper table.dataTable thead th.dt-orderable-asc span.dt-column-order::after,
#matchesTable_wrapper table.dataTable thead th.dt-orderable-desc span.dt-column-order::before,
#matchesTable_wrapper table.dataTable thead th.dt-orderable-desc span.dt-column-order::after {
  color: var(--wpf-muted);
  opacity: .35;
}
#matchesTable_wrapper table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
#matchesTable_wrapper table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
  color: var(--wpf-navy-700);
  opacity: 1;
}

/* ---------- Matches responsive ---------- */
@media (max-width: 767px) {
  .wpf-match-admin-head { flex-direction: column; align-items: flex-start; }
  .wpf-match-admin-head-actions { width: 100%; justify-content: space-between; }
  .wpf-match-summary { grid-template-columns: 1fr; }
  #matchesTable_wrapper .dt-search input { width: 100%; }
  .wpf-form-grid { grid-template-columns: 1fr; }
}

/* ---------- WPF themed Match modal / alert backdrop (scoped) ---------- */
/* Global backdrop handled by centralized .modal-backdrop rule above. */

.swal2-container.wpf-match-swal.swal2-backdrop-show {
  background-color: transparent !important;
  background-image:
    linear-gradient(
      rgba(4, 14, 25, .86),
      rgba(4, 14, 25, .90)
    ),
    url('../images/background/wpf-home-sunset-wide.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   MATCH MANAGEMENT — ADD / DELETE MODAL FIDELITY PASS (scoped)
   ============================================================ */

/* ---------- Add Match: header ---------- */
.wpf-match-modal .modal-header {
  background: var(--wpf-navy-950);
  padding: 14px 20px;
  align-items: center;
}
.wpf-match-modal .modal-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.wpf-match-modal .wpf-match-modal-sub {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}
.wpf-match-modal .modal-header .close {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: background .15s ease, color .15s ease;
}
.wpf-match-modal .modal-header .close:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* ---------- Add Match: body / form ---------- */
.wpf-match-modal .modal-body { padding: 20px; }
.wpf-match-modal .wpf-form-grid { gap: 16px; }
.wpf-match-modal .wpf-input {
  height: 42px;
  padding: 10px 12px;
  font-size: 14px;
}
.wpf-input-icon { position: relative; display: block; }
.wpf-input-icon > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  color: var(--wpf-muted);
  pointer-events: none;
  z-index: 1;
}
.wpf-input-icon .wpf-input { padding-left: 38px; }

/* ---------- Add Match: footer ---------- */
.wpf-match-modal .modal-footer {
  padding: 12px 20px;
  background: var(--wpf-page);
  justify-content: flex-end;
  gap: 10px;
}
.wpf-match-modal .modal-footer .btn {
  height: 40px;
  min-width: 108px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--wpf-radius-sm);
}
.wpf-match-modal .modal-footer .btn-secondary {
  background: var(--wpf-navy-900);
  border-color: var(--wpf-navy-900);
  color: #fff;
}
.wpf-match-modal .modal-footer .btn-secondary:hover,
.wpf-match-modal .modal-footer .btn-secondary:focus {
  background: var(--wpf-navy-700);
  border-color: var(--wpf-navy-700);
  color: #fff;
}

/* ---------- Delete Match: SweetAlert (scoped) ---------- */
.wpf-match-swal .wpf-match-delete-swal {
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 24, 39, .35);
}
.wpf-match-swal .wpf-match-delete-swal .swal2-title { display: none; }
.wpf-match-swal .wpf-match-delete-swal .swal2-icon { display: none; }
.wpf-match-swal .wpf-match-delete-swal .swal2-html-container {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.wpf-match-delete-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wpf-navy-950);
  padding: 16px 20px;
}
.wpf-match-delete-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(224, 92, 104, .15);
  color: var(--wpf-loss);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.wpf-match-delete-title {
  font-family: var(--wpf-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.wpf-match-delete-body { padding: 20px; }
.wpf-match-delete-text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wpf-text);
}
.wpf-match-delete-text strong { color: var(--wpf-navy-900); font-weight: 700; }
.wpf-match-delete-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wpf-muted);
}
.wpf-match-swal .wpf-match-delete-swal .swal2-actions {
  margin: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--wpf-border);
  background: var(--wpf-page);
  justify-content: flex-end;
  gap: 10px;
}
.wpf-match-swal .wpf-match-delete-swal .swal2-styled {
  height: 40px;
  min-width: 108px;
  margin: 0;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--wpf-radius-sm);
}
.wpf-match-swal .wpf-match-delete-swal .swal2-confirm {
  background: var(--wpf-loss);
  color: #fff;
}
.wpf-match-swal .wpf-match-delete-swal .swal2-cancel {
  background: #fff;
  color: var(--wpf-navy-900);
  border: 1px solid var(--wpf-border);
}
.wpf-match-swal .wpf-match-delete-swal .swal2-cancel:hover {
  background: #f6f8fa;
  color: var(--wpf-navy-900);
}

/* ============================================================
   EDIT MATCH — STANDARD CONTROL CENTER (strongly scoped)
   ============================================================ */
.wpf-edit-match {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ---------- 1. Match Control Header ---------- */
.wpf-edit-match-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1626 0%, var(--wpf-navy-900) 42%, #14273c 100%);
  border: 1px solid var(--wpf-navy-700);
  border-radius: var(--wpf-radius);
  color: #fff;
  box-shadow: 0 1px 2px rgba(7, 24, 39, .1), 0 18px 44px rgba(7, 24, 39, .32);
}
.wpf-edit-match-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(7, 24, 39, .9) 0%, rgba(13, 27, 42, .72) 46%, rgba(13, 27, 42, .38) 100%),
    url('../images/background/wpf-home-hero.png') center right / cover no-repeat;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
.wpf-edit-match-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 300px at 16% -12%, rgba(246, 183, 0, .14), transparent 55%),
    radial-gradient(900px 520px at 104% 116%, rgba(21, 40, 61, .6), transparent 62%);
  pointer-events: none;
  z-index: 1;
}
.wpf-edit-match-header-main {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 2px 0;
}
.wpf-edit-match-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--wpf-sand);
  margin-bottom: 10px;
}
.wpf-edit-match-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wpf-gold), var(--wpf-sand));
}
.wpf-edit-match-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.wpf-edit-match-title {
  font-family: var(--wpf-font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
.wpf-edit-match-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(246, 183, 0, .22), rgba(246, 183, 0, .1));
  border: 1px solid rgba(246, 183, 0, .45);
  color: var(--wpf-sand);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(246, 183, 0, .16);
}
.wpf-edit-match-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.wpf-edit-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wpf-edit-fact-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .48);
}
.wpf-edit-fact-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.wpf-edit-fact-value i {
  color: var(--wpf-sand);
  font-size: 12px;
  opacity: .92;
}
.wpf-edit-fact-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 999px;
}
.wpf-edit-fact-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.wpf-edit-fact-status--confirmed {
  color: #5BD2A0;
  background: rgba(76, 175, 122, .16);
  border: 1px solid rgba(76, 175, 122, .38);
}
.wpf-edit-fact-status--pending {
  color: var(--wpf-sand);
  background: rgba(246, 183, 0, .14);
  border: 1px solid rgba(246, 183, 0, .34);
}

.wpf-edit-match-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  align-self: center;
  padding: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
}

/* Buttons (scoped to Edit Match) */
.wpf-edit-match .wpf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  padding: 10px 16px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid transparent;
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.wpf-edit-match .wpf-btn:active { transform: translateY(1px); }
.wpf-edit-match .wpf-btn--gold {
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
}
.wpf-edit-match .wpf-btn--gold:hover {
  background: var(--wpf-gold-hover);
  box-shadow: 0 6px 18px rgba(246, 183, 0, .28);
}
.wpf-edit-match .wpf-btn--danger {
  background: rgba(224, 92, 104, .14);
  border-color: rgba(224, 92, 104, .45);
  color: #ffb3ba;
}
.wpf-edit-match .wpf-btn--danger:hover {
  background: rgba(224, 92, 104, .24);
  color: #fff;
}

/* ---------- 2/3. Details + Result grid ---------- */
.wpf-edit-match-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr);
  gap: 20px;
  align-items: start;
}
.wpf-edit-card {
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  overflow: hidden;
}
.wpf-edit-card .wpf-card-head {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
  padding: 16px 20px;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-edit-card .wpf-card-title {
  font-family: var(--wpf-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--wpf-navy-900);
}
.wpf-edit-card .wpf-card-body { padding: 20px; }
.wpf-edit-card .wpf-field label {
  color: var(--wpf-navy-700);
  letter-spacing: .05em;
}
.wpf-edit-card .wpf-input {
  border-color: #d4dce4;
  color: var(--wpf-navy-900);
  font-weight: 600;
}
.wpf-edit-card .wpf-input-icon > i { color: var(--wpf-navy-700); }

.wpf-edit-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.wpf-edit-form-grid .wpf-field--full { grid-column: 1 / -1; }

/* Booking confirmation switch */
.wpf-edit-confirm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--wpf-radius-sm);
  background: rgba(76, 175, 122, .08);
  border: 1px solid rgba(76, 175, 122, .28);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.wpf-edit-confirm:hover { background: rgba(76, 175, 122, .12); }
.wpf-edit-confirm > input[type="checkbox"] { display: none; }
.wpf-edit-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(76, 175, 122, .16);
  color: var(--wpf-win);
  font-size: 15px;
  flex-shrink: 0;
}
.wpf-edit-confirm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.wpf-edit-confirm-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--wpf-text);
}
.wpf-edit-confirm-text span {
  font-size: 11px;
  color: var(--wpf-muted);
}
.wpf-edit-confirm-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #cfd6dd;
  flex-shrink: 0;
  transition: background .2s ease;
}
.wpf-edit-confirm-track {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(7, 24, 39, .3);
  transition: transform .2s ease;
}
.wpf-edit-confirm.is-on .wpf-edit-confirm-switch { background: var(--wpf-win); }
.wpf-edit-confirm.is-on .wpf-edit-confirm-track { transform: translateX(18px); }

/* ---------- Match Result scoreboard ---------- */
.wpf-edit-result-note {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  color: var(--wpf-muted);
  font-size: 13px;
}
.wpf-edit-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 12px;
}
.wpf-edit-score-side {
  flex: 1;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fbfcfd;
}
.wpf-edit-score-team {
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wpf-navy-800);
}
.wpf-edit-score-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpf-edit-score-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wpf-edit-score-btn:hover {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .1);
  color: var(--wpf-navy-900);
}
.wpf-edit-score-input {
  width: 64px;
  height: 44px;
  text-align: center;
  font-family: var(--wpf-font-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--wpf-navy-900);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  padding: 0 8px;
  -moz-appearance: textfield;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-edit-score-input::-webkit-outer-spin-button,
.wpf-edit-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpf-edit-score-input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}
.wpf-edit-score-sep {
  font-family: var(--wpf-font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--wpf-navy-700);
}

/* ---------- 5. Registered Players ---------- */
.wpf-edit-players {
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  overflow: hidden;
}

/* Section header */
.wpf-edit-players-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-edit-players-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wpf-edit-players-subtitle {
  font-size: 12px;
  color: var(--wpf-muted);
}

/* Summary stat chips */
.wpf-edit-summary {
  display: flex;
  gap: 10px;
}
.wpf-edit-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 86px;
  padding: 9px 14px;
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  border: 1px solid var(--wpf-border);
  box-shadow: 0 1px 2px rgba(7, 24, 39, .04);
}
.wpf-edit-summary-value {
  font-family: var(--wpf-font-head);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--wpf-navy-900);
}
.wpf-edit-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--wpf-muted);
}
.wpf-edit-summary-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--wpf-muted);
}
.wpf-edit-summary-item--max .wpf-edit-summary-label::before { background: var(--wpf-navy-700); }
.wpf-edit-summary-item--confirmed .wpf-edit-summary-label::before { background: var(--wpf-win); }
.wpf-edit-summary-item--standby .wpf-edit-summary-label::before { background: var(--wpf-warning); }

/* Team summary */
.wpf-edit-team-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--wpf-border);
  background: var(--wpf-page);
}
.wpf-edit-team-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  border: 1px solid var(--wpf-border);
  border-left: 3px solid var(--wpf-navy-700);
}
.wpf-edit-team-card--2 { border-left-color: var(--wpf-gold); }
.wpf-edit-team-card-name {
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-navy-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wpf-edit-team-card-name::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--wpf-navy-700);
  flex-shrink: 0;
}
.wpf-edit-team-card--2 .wpf-edit-team-card-name::before { background: var(--wpf-gold); }
.wpf-edit-team-card-stats { display: flex; }
.wpf-edit-team-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wpf-edit-team-metric + .wpf-edit-team-metric {
  margin-left: 22px;
  padding-left: 22px;
  border-left: 1px solid var(--wpf-border);
}
.wpf-edit-team-metric-value {
  font-family: var(--wpf-font-head);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: var(--wpf-navy-900);
}
.wpf-edit-team-metric-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpf-muted);
}

/* Table container + toolbar */
.wpf-edit-table-wrap { padding: 0; }
#example_wrapper { width: 100% !important; }
#example_wrapper .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
  background: #fff;
}
#example_wrapper .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
  background: #fff;
}
#example_wrapper .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
#example_wrapper .dt-length select {
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 6px 8px;
  font-size: 13px;
}
#example_wrapper .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #f9fafb;
  padding: 0 12px;
  font-size: 13px;
  color: var(--wpf-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#example_wrapper .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}

/* Table */
#example_wrapper table.dataTable {
  border-collapse: collapse;
  width: 100% !important;
  font-size: 13px;
  margin: 0 !important;
}
#example_wrapper table.dataTable thead th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wpf-muted);
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  white-space: nowrap;
}
#example_wrapper table.dataTable thead th:nth-child(n+2) { text-align: center; }
#example_wrapper table.dataTable tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
}
#example_wrapper table.dataTable tbody td:nth-child(n+2) { text-align: center; }
#example_wrapper table.dataTable tbody tr:last-child td { border-bottom: 0; }
#example_wrapper table.dataTable tbody tr:hover td {
  background: #fafbfc;
}

/* Player identity */
.wpf-edit-player {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}
.wpf-edit-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  box-shadow: 0 1px 2px rgba(7, 24, 39, .08);
  flex-shrink: 0;
}
.wpf-edit-player-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.wpf-edit-player-name {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wpf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpf-edit-player-sub {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--wpf-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpf-edit-player-sub--guest {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Team select */
.wpf-edit-team-select {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 30px 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--wpf-navy-800);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7A8D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-edit-team-select:hover { border-color: #cfd6dd; }
.wpf-edit-team-select:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}

/* Goals / Assists stat inputs */
.wpf-edit-stat {
  width: 56px;
  height: 34px;
  text-align: center;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wpf-text);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  -moz-appearance: textfield;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-edit-stat::-webkit-outer-spin-button,
.wpf-edit-stat::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpf-edit-stat:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}

/* Status badges */
.wpf-edit-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wpf-edit-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  margin-right: 6px;
}
.wpf-edit-status--confirmed {
  background: rgba(76, 175, 122, .12);
  color: var(--wpf-win);
  border: 1px solid rgba(76, 175, 122, .3);
}
.wpf-edit-status--standby {
  background: rgba(217, 131, 36, .12);
  color: var(--wpf-warning);
  border: 1px solid rgba(217, 131, 36, .3);
}

/* Actions */
.wpf-edit-action {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wpf-edit-action:hover { box-shadow: 0 2px 6px rgba(7, 24, 39, .1); }
.wpf-edit-action + .wpf-edit-action { margin-left: 6px; }
.wpf-edit-action--danger:hover {
  background: var(--wpf-loss);
  border-color: var(--wpf-loss);
  color: #fff;
}
.wpf-edit-action--promote:hover {
  background: var(--wpf-win);
  border-color: var(--wpf-win);
  color: #fff;
}
.wpf-edit-action-empty { color: var(--wpf-muted); }

/* Pagination + info */
#example_wrapper .dt-info {
  padding: 0;
  font-size: 12px;
  color: var(--wpf-muted);
}
#example_wrapper .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
#example_wrapper .dt-paging nav { display: flex; align-items: center; gap: 4px; }
#example_wrapper .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#example_wrapper .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
#example_wrapper .dt-paging-button:focus { outline: none; border-color: var(--wpf-gold); }
#example_wrapper .dt-paging-button.current,
#example_wrapper .dt-paging-button.current:hover,
#example_wrapper .dt-paging-button.current:focus,
#example_wrapper .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
#example_wrapper .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
#example_wrapper .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* Message box */
.wpf-edit-match #add_msg .alert { margin-top: 0; }

/* Players lower-half responsive */
@media (max-width: 600px) {
  .wpf-edit-players-head { align-items: stretch; }
  .wpf-edit-summary { width: 100%; flex-wrap: wrap; }
  .wpf-edit-summary-item { flex: 1; min-width: 0; }
  .wpf-edit-table-wrap .dt-search input { width: 100%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .wpf-edit-match-grid { grid-template-columns: 1fr; }
  .wpf-edit-match-header { flex-direction: column; }
  .wpf-edit-match-header-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .wpf-edit-match .wpf-btn { flex: 1; }
  .wpf-edit-form-grid { grid-template-columns: 1fr 1fr; }
  .wpf-edit-form-grid .wpf-field--full { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .wpf-edit-form-grid { grid-template-columns: 1fr; }
  .wpf-edit-form-grid .wpf-field--full { grid-column: auto; }
  .wpf-edit-team-summary { grid-template-columns: 1fr; }
  .wpf-edit-scoreboard { gap: 12px; }
  .wpf-edit-score-input { width: 52px; height: 40px; font-size: 22px; }
  .wpf-edit-score-btn { width: 32px; height: 32px; }
}

/* ============================================================
   EDIT MATCH — TOURNAMENT (strongly scoped, standard untouched)
   ============================================================ */

/* Booking confirmation — pending (neutral/gold) state */
.wpf-edit-confirm.is-off {
  background: rgba(246, 183, 0, .07);
  border-color: rgba(246, 183, 0, .32);
}
.wpf-edit-confirm.is-off:hover { background: rgba(246, 183, 0, .13); }
.wpf-edit-confirm.is-off .wpf-edit-confirm-icon {
  background: rgba(246, 183, 0, .18);
  color: #C89106;
}

/* ---- Tournament navigation strip ---- */
.wpf-tournament-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
}
.wpf-tournament-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--wpf-radius-sm);
  background: transparent;
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wpf-navy-700);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wpf-tournament-tab:hover { background: #f2f4f7; color: var(--wpf-navy-900); }
.wpf-tournament-tab.is-active { background: var(--wpf-navy-900); color: #fff; }
.wpf-tournament-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(246, 183, 0, .2);
  color: var(--wpf-navy-900);
  font-size: 11px;
  font-weight: 700;
}
.wpf-tournament-tab.is-active .wpf-tournament-tab-count {
  background: var(--wpf-gold);
  color: var(--wpf-navy-900);
}

/* ---- Tab panels ---- */
.wpf-tournament-panel { display: none; }
.wpf-tournament-panel.is-active { display: block; }

/* ---- Overview two-column composition ---- */
.wpf-tournament-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.wpf-tournament-col { min-width: 0; }
.wpf-tournament-col--full { grid-column: 1 / -1; }

/* ---- Compact fixtures table ---- */
.wpf-tournament-fixtures .wpf-card-head { align-items: center; }
.wpf-tournament-fixtures .wpf-btn {
  min-width: 0;
  padding: 8px 14px;
  font-size: 11px;
}
.wpf-tournament-fixtures .wpf-card-body,
.wpf-tournament-players .wpf-card-body,
.wpf-tournament-standby .wpf-card-body { padding: 12px 16px; }

.wpf-tournament-fixtures-table,
.wpf-tournament-players-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.wpf-tournament-fixtures-table thead th,
.wpf-tournament-players-table thead th {
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wpf-muted);
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  white-space: nowrap;
  text-align: center;
}
.wpf-tournament-fixtures-table thead th:first-child,
.wpf-tournament-players-table thead th:first-child { text-align: left; }
.wpf-tournament-fixtures-table tbody td,
.wpf-tournament-players-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  color: var(--wpf-navy-800);
}
.wpf-tournament-fixtures-table tbody tr:last-child td,
.wpf-tournament-players-table tbody tr:last-child td { border-bottom: 0; }
.wpf-tournament-fixtures-table tbody tr:hover td,
.wpf-tournament-players-table tbody tr:hover td { background: #fafbfc; }

.wpf-tournament-fixture-num {
  text-align: center;
  color: var(--wpf-muted);
  font-weight: 700;
  width: 34px;
}
.wpf-tournament-fixture-team {
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wpf-navy-800);
}
.wpf-tournament-fixture-team--a { text-align: right; }
.wpf-tournament-fixture-team--b { text-align: left; }
.wpf-tournament-fixture-score-cell { text-align: center; white-space: nowrap; }
.wpf-tournament-fixture-score {
  font-family: var(--wpf-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--wpf-navy-900);
}
.wpf-tournament-fixture-sep {
  font-family: var(--wpf-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--wpf-navy-700);
  margin: 0 5px;
}
.wpf-tournament-fixture-actions { text-align: right; white-space: nowrap; }
.wpf-tournament-fixture-actions .wpf-edit-action {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.wpf-tournament-fixtures-empty-row td {
  text-align: center !important;
  color: var(--wpf-muted);
  padding: 24px 12px !important;
}

.wpf-tournament-fixtures-empty {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  color: var(--wpf-muted);
  font-size: 13px;
}

/* ---- Registered players compact panel ---- */
.wpf-tournament-players-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--wpf-muted);
  padding: 4px 10px;
  background: #f2f4f7;
  border: 1px solid var(--wpf-border);
  border-radius: 999px;
  white-space: nowrap;
}
.wpf-tournament-players-table .wpf-edit-player-avatar { width: 32px; height: 32px; }
.wpf-tournament-players-table tbody td { padding: 9px 12px; }

/* ---- Tournament teams compact card grid ---- */
.wpf-tournament-teams .wpf-card-body { padding: 16px; }
.wpf-tournament-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.wpf-tournament-teams-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpf-tournament-teams-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wpf-tournament-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  border: 1px solid var(--wpf-border);
  border-top: 3px solid var(--wpf-navy-700);
  box-shadow: 0 1px 2px rgba(7, 24, 39, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wpf-tournament-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 24, 39, .08);
  border-color: #d4dce4;
}
.wpf-tournament-team-card--2 { border-top-color: var(--wpf-gold); }
.wpf-tournament-team-card--3 { border-top-color: var(--wpf-win); }
.wpf-tournament-team-card--4 { border-top-color: var(--wpf-loss); }
.wpf-tournament-team-name {
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-navy-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wpf-tournament-team-name::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--wpf-navy-700);
  flex-shrink: 0;
}
.wpf-tournament-team-card--2 .wpf-tournament-team-name::before { background: var(--wpf-gold); }
.wpf-tournament-team-card--3 .wpf-tournament-team-name::before { background: var(--wpf-win); }
.wpf-tournament-team-card--4 .wpf-tournament-team-name::before { background: var(--wpf-loss); }
.wpf-tournament-team-stats { display: flex; }
.wpf-tournament-team-metric { display: flex; flex-direction: column; gap: 2px; }
.wpf-tournament-team-metric + .wpf-tournament-team-metric {
  margin-left: 22px;
  padding-left: 22px;
  border-left: 1px solid var(--wpf-border);
}
.wpf-tournament-team-value {
  font-family: var(--wpf-font-head);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: var(--wpf-navy-900);
}
.wpf-tournament-team-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wpf-muted);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .wpf-tournament-overview-grid { grid-template-columns: 1fr; }
  .wpf-tournament-teams-grid--3,
  .wpf-tournament-teams-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wpf-tournament-tabs { gap: 2px; padding: 4px; }
  .wpf-tournament-tab { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
  .wpf-tournament-teams-grid--3,
  .wpf-tournament-teams-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   WPF HOME — Capacity state + premium data visualization
   Scoped to .wpf-cap-bar states and .wpf-home-* lists.
   ============================================================ */

/* ---- Capacity bar: WPF state language (green healthy / gold near+full) ---- */
.wpf-cap-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .12); }
.wpf-cap-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wpf-win), #57c98a);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.wpf-cap-bar > span[data-state="near"],
.wpf-cap-bar > span[data-state="full"] {
  background: linear-gradient(90deg, #f6b700, var(--wpf-sand));
  box-shadow: 0 0 10px rgba(246, 183, 0, .55);
}

/* ---- Home statistics: reuse the Statistics-page leaderboard treatment ---- */
.wpf-home-scorers .wpf-goal-bar,
.wpf-home-winloss .wpf-wl-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(13, 27, 42, .06);
  box-shadow: inset 0 1px 3px rgba(13, 27, 42, .1);
  overflow: hidden;
}
.wpf-home-winloss .wpf-wl-bar { display: flex; }
.wpf-home-scorers .wpf-goal-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #E9A800, var(--wpf-gold) 55%, var(--wpf-sand));
  box-shadow: 0 1px 4px rgba(246, 183, 0, .4), inset 0 -1px 0 rgba(0, 0, 0, .08);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.wpf-home-scorers .wpf-goal-row:first-child .wpf-goal-bar > span {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #D99300, var(--wpf-gold) 50%, #FFD54F);
  box-shadow: 0 2px 7px rgba(246, 183, 0, .55), inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.wpf-home-winloss .wpf-wl-bar .wpf-wl-bar-win {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #3E9C6D, var(--wpf-win));
  border-radius: 999px 0 0 999px;
  box-shadow: 0 1px 4px rgba(76, 175, 122, .35);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.wpf-home-winloss .wpf-wl-bar .wpf-wl-bar-loss {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #E05C68, #C14B56);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 1px 4px rgba(224, 92, 104, .3);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wpf-home-scorers .wpf-goal-bar > span,
  .wpf-home-winloss .wpf-wl-bar .wpf-wl-bar-win,
  .wpf-home-winloss .wpf-wl-bar .wpf-wl-bar-loss { transition: none; }
}

/* ============================================================
   FINES MANAGEMENT (fines.php)
   Mirrors Players / Matches Management visual language.
   ============================================================ */
.wpf-fines { display: flex; flex-direction: column; gap: 16px; }

.wpf-fines-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wpf-fines-title {
  font-family: var(--wpf-font-head);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--wpf-text);
}
.wpf-fines-subtitle {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--wpf-muted);
}

/* Collection title as a KPI value (text, reduced to avoid overflow) */
.wpf-fines-summary-title {
  font-family: var(--wpf-font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--wpf-text);
  word-break: break-word;
}

/* Two-column management forms row */
.wpf-fines-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.wpf-fines-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Card containing the player picker must not clip the dropdown */
.wpf-fines-forms .wpf-edit-card.wpf-fines-picker-card { overflow: visible; }
.wpf-fines-forms .wpf-edit-card.wpf-fines-picker-card .wpf-card-head {
  border-radius: var(--wpf-radius) var(--wpf-radius) 0 0;
}

/* Fines buttons — WPF gold primary / navy secondary treatment */
.wpf-fines-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid transparent;
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.wpf-fines-btn:active { transform: translateY(1px); }
.wpf-fines-btn i { font-size: 13px; }
.wpf-fines-btn--gold {
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
}
.wpf-fines-btn--gold:hover {
  background: var(--wpf-gold-hover);
  box-shadow: 0 6px 18px rgba(246, 183, 0, .28);
}
.wpf-fines-btn--navy {
  background: var(--wpf-navy-800);
  border-color: var(--wpf-navy-800);
  color: #fff;
}
.wpf-fines-btn--navy:hover {
  background: var(--wpf-navy-700);
  border-color: var(--wpf-navy-700);
  color: #fff;
}

/* Player picker — compact WPF identity dropdown */
.wpf-fines-picker { position: relative; }
.wpf-fines-picker-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 5px 10px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-fines-picker.is-open .wpf-fines-picker-field,
.wpf-fines-picker-field:focus-within {
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}
.wpf-fines-picker-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--wpf-border);
  background: var(--wpf-page);
  flex: 0 0 auto;
  display: block;
}
.wpf-fines-picker-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--wpf-text);
  padding: 0;
}
.wpf-fines-picker-input::placeholder { color: var(--wpf-muted); }
.wpf-fines-picker-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow-lg);
}
.wpf-fines-picker.is-open .wpf-fines-picker-panel { display: block; }
.wpf-fines-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.wpf-fines-picker-item:hover,
.wpf-fines-picker-item:focus {
  background: rgba(246, 183, 0, .08);
  outline: none;
}
.wpf-fines-picker-item + .wpf-fines-picker-item { border-top: 1px solid var(--wpf-border); }
.wpf-fines-picker-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--wpf-muted);
  text-align: center;
}

/* Fines list card + table */
.wpf-fines-card { overflow-x: auto; }
.wpf-fines-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wpf-muted);
  white-space: nowrap;
}
.wpf-fines-total strong {
  font-family: var(--wpf-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--wpf-text);
}

.wpf-fines-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.wpf-fines-table thead th {
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--wpf-muted);
  white-space: nowrap;
}
.wpf-fines-table thead th:nth-child(4) { text-align: right; }
.wpf-fines-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--wpf-text);
}
.wpf-fines-table tbody tr:last-child td { border-bottom: 0; }
.wpf-fines-table tbody tr:hover { background: #fafbfc; }
.wpf-fines-table td.wpf-fines-amount {
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.wpf-fines-table td.wpf-fines-date {
  color: var(--wpf-muted);
  font-size: 12px;
  white-space: nowrap;
}
.wpf-fines-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Edit modal player identity */
.wpf-fines-modal { max-width: 520px; }
.wpf-fines-modal .modal-footer { gap: 10px; }
.wpf-fines-modal-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: var(--wpf-page);
}

/* Global backdrop handled by centralized .modal-backdrop rule above. */

/* ---------- DataTables visual overrides for fines (scoped) ---------- */
#finesTable_wrapper .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
}
#finesTable_wrapper .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
}
#finesTable_wrapper .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
#finesTable_wrapper .dt-length select {
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 6px 8px;
  font-size: 13px;
}
#finesTable_wrapper .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  background: #f9fafb;
  border-radius: var(--wpf-radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--wpf-text);
}
#finesTable_wrapper .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}
#finesTable_wrapper .dt-info {
  font-size: 12px;
  color: var(--wpf-muted);
}
#finesTable_wrapper .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
#finesTable_wrapper .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#finesTable_wrapper .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
#finesTable_wrapper .dt-paging-button:focus {
  outline: none;
  border-color: var(--wpf-gold);
}
#finesTable_wrapper .dt-paging-button.current,
#finesTable_wrapper .dt-paging-button.current:hover,
#finesTable_wrapper .dt-paging-button.current:focus,
#finesTable_wrapper .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
#finesTable_wrapper .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
#finesTable_wrapper .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* ---------- Fines responsive ---------- */
@media (max-width: 767px) {
  .wpf-fines-head { flex-direction: column; align-items: flex-start; }
  .wpf-fines-forms { grid-template-columns: 1fr; }
  #finesTable_wrapper .dt-search input { width: 100%; }
}

/* ============================================================
   MY ACCOUNT — EMAIL NOTIFICATION PREFERENCES
   Reuses the My Account card + toggle design language.
   ============================================================ */
.wpf-notif-list {
  display: flex;
  flex-direction: column;
}
.wpf-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-notif-row:first-child { padding-top: 0; }
.wpf-notif-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wpf-notif-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.wpf-notif-text strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpf-text);
}
.wpf-notif-text span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--wpf-muted);
}
.wpf-notif-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: #cfd6dd;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}
.wpf-notif-track {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(7, 24, 39, .3);
  transition: transform .2s ease;
}
.wpf-notif-toggle.is-on { background: var(--wpf-win); }
.wpf-notif-toggle.is-on .wpf-notif-track { transform: translateX(18px); }
.wpf-notif-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246, 183, 0, .28); }
.wpf-notif-note {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--wpf-muted);
}
.wpf-notif-saved {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wpf-win);
  opacity: 0;
  transition: opacity .3s ease;
}

@media (max-width: 767px) {
  .wpf-notif-row { align-items: flex-start; }
  .wpf-notif-text span { font-size: 11px; }
}

/* ============================================================
   EMAIL MANAGEMENT CENTER — scoped polish
   ============================================================ */

/* KPI row: 4 equal cards on desktop */
.wpf-emails-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Delivery log table — matches Players/Matches WPF management tables */
.wpf-email-log {
  width: 100%;
  border-collapse: collapse;
}
.wpf-email-log thead th {
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--wpf-muted);
  white-space: nowrap;
}
.wpf-email-log tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--wpf-text);
}
.wpf-email-log tbody tr:last-child td { border-bottom: 0; }
.wpf-email-log tbody tr:hover { background: #fafbfc; }

.wpf-email-event {
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-text);
  white-space: nowrap;
}
.wpf-email-transport {
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Status pills */
.wpf-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wpf-email-pill--sent { background: rgba(76, 175, 122, .14); color: #2f8f5b; }
.wpf-email-pill--failed { background: rgba(224, 92, 104, .14); color: #b23a44; }
.wpf-email-pill--suppressed { background: rgba(246, 183, 0, .16); color: #8a6a00; }
.wpf-email-pill--pref-off { background: #eef0f3; color: #6b7280; }

/* Empty state */
.wpf-email-log-empty {
  text-align: center;
  padding: 52px 16px;
  color: var(--wpf-muted);
}
.wpf-email-log-empty i {
  display: block;
  font-size: 36px;
  color: var(--wpf-border);
  margin-bottom: 14px;
}
.wpf-email-log-empty-title {
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wpf-text);
  margin-bottom: 6px;
}
.wpf-email-log-empty-sub {
  font-size: 12px;
  color: var(--wpf-muted);
}

/* Preview modal */
.wpf-email-preview-modal .modal-dialog { max-width: 820px; }
.wpf-email-preview-subject {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--wpf-muted);
}
.wpf-email-preview-canvas {
  background: #e9ebef;
  padding: 22px;
  border-radius: var(--wpf-radius-sm);
}
.wpf-email-preview-frame {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(7, 24, 39, .12);
  display: block;
}

/* DataTables chrome (delivery log) — mirrors Players/Matches */
#mailLogTable_wrapper .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
}
#mailLogTable_wrapper .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
}
#mailLogTable_wrapper .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
#mailLogTable_wrapper .dt-length select {
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 6px 8px;
  font-size: 13px;
}
#mailLogTable_wrapper .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  background: #f9fafb;
  border-radius: var(--wpf-radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--wpf-text);
}
#mailLogTable_wrapper .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}
#mailLogTable_wrapper .dt-info {
  font-size: 12px;
  color: var(--wpf-muted);
}
#mailLogTable_wrapper .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
#mailLogTable_wrapper .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#mailLogTable_wrapper .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
#mailLogTable_wrapper .dt-paging-button:focus {
  outline: none;
  border-color: var(--wpf-gold);
}
#mailLogTable_wrapper .dt-paging-button.current,
#mailLogTable_wrapper .dt-paging-button.current:hover,
#mailLogTable_wrapper .dt-paging-button.current:focus,
#mailLogTable_wrapper .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
#mailLogTable_wrapper .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
#mailLogTable_wrapper .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* Sort indicators */
#mailLogTable_wrapper table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
#mailLogTable_wrapper table.dataTable thead th.dt-orderable-asc span.dt-column-order::after,
#mailLogTable_wrapper table.dataTable thead th.dt-orderable-desc span.dt-column-order::before,
#mailLogTable_wrapper table.dataTable thead th.dt-orderable-desc span.dt-column-order::after {
  color: var(--wpf-muted);
  opacity: .35;
}
#mailLogTable_wrapper table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
#mailLogTable_wrapper table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
  color: var(--wpf-navy-700);
  opacity: 1;
}

/* Email center responsive */
@media (max-width: 1023px) {
  .wpf-emails-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .wpf-emails-kpis { grid-template-columns: 1fr; }
  #mailLogTable_wrapper .dt-search input { width: 100%; }
  .wpf-email-preview-canvas { padding: 12px; }
  .wpf-email-preview-frame { height: 460px; }
}

/* ============================================================
   RESULTS PAGE (scoped)
   ============================================================ */
.wpf-results {
  padding: 4px 0 0;
}

/* ---------- Page header ---------- */
.wpf-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 14px;
}
.wpf-results-title {
  font-family: var(--wpf-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--wpf-navy-900);
  margin: 0;
  line-height: 1.2;
}
.wpf-results-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--wpf-muted);
}
.wpf-results-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wpf-results-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(30, 52, 80, .06);
  border: 1px solid rgba(30, 52, 80, .12);
  font-size: 12px;
  font-weight: 700;
  color: var(--wpf-navy-700);
  white-space: nowrap;
}
.wpf-results-count i { font-size: 12px; color: var(--wpf-gold-hover); }

/* ---------- Summary KPI cards ---------- */
.wpf-results-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.wpf-results-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  padding: 18px;
}
.wpf-results-summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
}
.wpf-results-summary-icon--gold { background: rgba(246, 183, 0, .14); border: 1px solid rgba(246, 183, 0, .30); color: #b38900; }
.wpf-results-summary-icon--green { background: rgba(76, 175, 122, .13); border: 1px solid rgba(76, 175, 122, .28); color: #2e7d52; }
.wpf-results-summary-icon--navy { background: rgba(30, 52, 80, .10); border: 1px solid rgba(30, 52, 80, .18); color: var(--wpf-navy-700); }
.wpf-results-summary-value {
  font-family: var(--wpf-font-head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--wpf-text);
}
.wpf-results-summary-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wpf-muted);
  white-space: nowrap;
}

/* ---------- Results card / table ---------- */
.wpf-results-card { overflow-x: auto; }

.wpf-results-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.wpf-results-table thead th {
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--wpf-muted);
  white-space: nowrap;
}
.wpf-results-table thead th:nth-child(3) { text-align: center; }
.wpf-results-table thead th:nth-child(4) { text-align: center; }
.wpf-results-table thead th:nth-child(5) { text-align: right; }

.wpf-results-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--wpf-text);
}
.wpf-results-table tbody tr:last-child td { border-bottom: 0; }
.wpf-results-table tbody tr:hover { background: #fafbfc; }
.wpf-results-table td.wpf-results-score-cell { text-align: center; }
.wpf-results-table td.wpf-results-type { text-align: center; }
.wpf-results-table td.wpf-results-actions { text-align: right; }
.wpf-results-empty { text-align: center; color: var(--wpf-muted); padding: 24px; font-size: 14px; }

/* ---------- Date & time cell ---------- */
.wpf-results-datetime { min-width: 140px; }
.wpf-results-date { font-weight: 600; color: var(--wpf-text); white-space: nowrap; }
.wpf-results-time { margin-top: 2px; font-size: 12px; color: var(--wpf-muted); white-space: nowrap; }
.wpf-results-time i { margin-right: 4px; font-size: 11px; }

/* ---------- Matchup cell (standard) ---------- */
.wpf-result-matchup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wpf-result-team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--wpf-navy-700);
  white-space: nowrap;
}
.wpf-result-team--1 { justify-content: flex-end; }
.wpf-result-team--2 { justify-content: flex-start; }
.wpf-result-score {
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--wpf-navy-900);
  min-width: 60px;
  text-align: center;
  white-space: nowrap;
}
.wpf-result-score--tournament {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wpf-muted);
}
.wpf-result-score-num {
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 20px;
  color: var(--wpf-navy-900);
  white-space: nowrap;
}

/* ---------- Tournament matchup cell ---------- */
.wpf-result-tournament {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpf-result-tournament-label {
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7a5c00;
}
.wpf-result-tournament-teams {
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-muted);
}

/* ---------- Actions ---------- */
.wpf-results-actions-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* ---------- DataTables overrides (results, scoped) ---------- */
#resultsTable_wrapper .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
}
#resultsTable_wrapper .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
}
#resultsTable_wrapper .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
#resultsTable_wrapper .dt-length select {
  height: 38px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 0 10px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#resultsTable_wrapper .dt-length select:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}
#resultsTable_wrapper .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  background: #fff;
  border-radius: var(--wpf-radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--wpf-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#resultsTable_wrapper .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}
#resultsTable_wrapper .dt-info {
  font-size: 12px;
  color: var(--wpf-muted);
}
#resultsTable_wrapper .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
#resultsTable_wrapper .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#resultsTable_wrapper .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
#resultsTable_wrapper .dt-paging-button:focus { outline: none; border-color: var(--wpf-gold); }
#resultsTable_wrapper .dt-paging-button.current,
#resultsTable_wrapper .dt-paging-button.current:hover,
#resultsTable_wrapper .dt-paging-button.current:focus,
#resultsTable_wrapper .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
#resultsTable_wrapper .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
#resultsTable_wrapper .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* Sort indicators */
#resultsTable_wrapper table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
#resultsTable_wrapper table.dataTable thead th.dt-orderable-asc span.dt-column-order::after,
#resultsTable_wrapper table.dataTable thead th.dt-orderable-desc span.dt-column-order::before,
#resultsTable_wrapper table.dataTable thead th.dt-orderable-desc span.dt-column-order::after {
  color: var(--wpf-muted);
  opacity: .35;
}
#resultsTable_wrapper table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
#resultsTable_wrapper table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
  color: var(--wpf-navy-700);
  opacity: 1;
}

/* ---------- Results modal ---------- */
.wpf-results-modal .modal-dialog { max-width: 680px; }
.wpf-results-modal .modal-body { padding: 16px 22px 20px; }

/* Two-column team layout */
.wpf-result-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.wpf-result-team-col {
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  overflow: hidden;
}
.wpf-result-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--wpf-border);
  font-family: var(--wpf-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wpf-navy-700);
}
.wpf-result-team-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--wpf-muted);
  background: rgba(107, 122, 141, .1);
  padding: 1px 8px;
  border-radius: 999px;
}
.wpf-result-team-body { padding: 8px 14px; }

/* Player row */
.wpf-result-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-result-player:last-child { border-bottom: 0; }
.wpf-result-player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  flex: 0 0 auto;
  display: block;
}
.wpf-result-player-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.wpf-result-player-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--wpf-text);
  line-height: 1.2;
}
.wpf-result-player-sub {
  font-size: 11px;
  color: var(--wpf-muted);
}
.wpf-result-player-sub--guest {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(217, 131, 36, .14);
  color: #8a4c00;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Roster section (unassigned / standby / tournament teams) */
.wpf-result-roster {
  margin-top: 16px;
  border-top: 1px solid var(--wpf-border);
  padding-top: 12px;
}
.wpf-result-roster:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.wpf-result-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.wpf-result-roster-label {
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wpf-muted);
}
.wpf-result-roster-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--wpf-muted);
  background: rgba(107, 122, 141, .1);
  padding: 1px 8px;
  border-radius: 999px;
}
.wpf-result-roster-body { padding: 0 2px; }
.wpf-result-roster--standby .wpf-result-roster-label { color: var(--wpf-warning); }

/* Empty state inside modal */
.wpf-result-empty {
  text-align: center;
  color: var(--wpf-muted);
  padding: 18px;
  font-size: 13px;
}

/* Tournament fixtures */
.wpf-result-fixtures { margin-bottom: 16px; }
.wpf-result-fixtures-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wpf-result-fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-result-fixture:last-child { border-bottom: 0; }
.wpf-result-fixture-team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--wpf-navy-700);
}
.wpf-result-fixture-team:first-child { justify-content: flex-end; }
.wpf-result-fixture-team:last-child { justify-content: flex-start; }
.wpf-result-fixture-score {
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--wpf-navy-900);
  min-width: 50px;
  text-align: center;
}

/* Team dots for tournaments (3, 4). 5+ fall back to navy. */
.wpf-team-dot--3 { background: #4caf7a; }
.wpf-team-dot--4 { background: #9c27b0; }
.wpf-team-dot--5 { background: #1b6bff; }
.wpf-team-dot--6 { background: #e48a00; }
.wpf-team-dot--7, .wpf-team-dot--8, .wpf-team-dot--9, .wpf-team-dot--0 { background: var(--wpf-navy-700); }

/* ---------- RECENT RESULTS: Tournament row (Home) ---------- */
.wpf-result-item--tournament {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  padding: 11px 0;
}
.wpf-result-row--tournament {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wpf-result-tournament-main { display: contents; }
.wpf-result-tournament-head {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}
.wpf-result-tournament-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a5a00;
  background: rgba(246, 183, 0, .16);
  border: 1px solid rgba(246, 183, 0, .28);
}
.wpf-result-tournament-badge i { color: var(--wpf-gold-hover); font-size: 11px; }
.wpf-result-tournament-counts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wpf-navy-700);
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}
.wpf-result-tournament-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}
.wpf-result-view,
.wpf-result-view--tournament {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(13, 27, 42, .10);
  background: rgba(13, 27, 42, .04);
  color: var(--wpf-navy-800);
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
}
.wpf-result-view:hover,
.wpf-result-view--tournament:hover {
  background: rgba(246, 183, 0, .14);
  border-color: rgba(246, 183, 0, .28);
  color: #7a5a00;
}
.wpf-result-view--tournament {
  background: linear-gradient(180deg, rgba(246,183,0,.10), rgba(246,183,0,.05));
  border-color: rgba(246,183,0,.24);
  color: #7a5a00;
}
.wpf-result-meta--tournament {
  grid-row: 2;
  grid-column: 2;
}

/* Standard recent results: add an "eye" button. */
.wpf-result-item:not(.wpf-result-item--tournament) {
  grid-template-columns: 52px 1fr auto 1fr 28px;
  grid-template-rows: auto auto;
}
.wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-date {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-team--1 { grid-column: 2; grid-row: 1; justify-self: end; }
.wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-score     { grid-column: 3; grid-row: 1; justify-self: center; padding: 2px 8px; min-width: 52px; }
.wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-team--2 { grid-column: 4; grid-row: 1; justify-self: start; }
.wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-view     { grid-column: 5; grid-row: 1 / span 2; align-self: center; justify-self: end; padding: 4px 6px; }
.wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-meta {
  grid-row: 2;
  grid-column: 2 / span 3;
}

/* ---------- TOURNAMENT RESULT MODAL: summary header + body ---------- */
.wpf-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 10px 0 6px;
}
.wpf-result-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 10px;
  font-family: var(--wpf-font-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a5a00;
  background: rgba(246, 183, 0, .14);
  border: 1px solid rgba(246, 183, 0, .26);
}
.wpf-result-summary-badge i { color: var(--wpf-gold-hover); font-size: 12px; }
.wpf-result-summary-badge--standard {
  color: var(--wpf-navy-800);
  background: rgba(13, 27, 42, .06);
  border-color: rgba(13, 27, 42, .12);
}
.wpf-result-summary-badge--standard i { color: var(--wpf-navy-700); }
.wpf-result-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.wpf-result-summary-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wpf-navy-700);
  letter-spacing: .02em;
}
.wpf-result-summary-meta i { color: var(--wpf-gold-hover); font-size: 12px; }
.wpf-result-summary-when {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding: 2px 2px 6px;
  font-size: 12.5px;
  color: var(--wpf-muted);
}
.wpf-result-summary-when > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wpf-result-summary-when i { color: var(--wpf-gold-hover); font-size: 12px; }
.wpf-result-body-sep {
  height: 1px;
  background: var(--wpf-border);
  margin: 10px -22px 12px;
}
.wpf-result-empty--inline {
  padding: 14px 0;
  margin: 0;
}

/* Results responsive + mobile modal scrolling */
@media (max-width: 560px) {
  .wpf-result-item--tournament {
    grid-template-columns: 48px 1fr;
    column-gap: 10px;
    row-gap: 8px;
    padding: 10px 0;
  }
  .wpf-result-tournament-counts { font-size: 10.5px; letter-spacing: .06em; }
  .wpf-result-item:not(.wpf-result-item--tournament) {
    grid-template-columns: 48px 1fr auto 1fr;
  }
  .wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-view {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-left: 58px;
  }
  .wpf-result-item:not(.wpf-result-item--tournament) > .wpf-result-meta { grid-column: 2 / -1; }
  .wpf-result-summary { padding-top: 6px; }
  .wpf-result-body-sep { margin-left: -12px; margin-right: -12px; }
  .wpf-results-modal .modal-dialog { max-width: calc(100vw - 20px); margin: 10px auto; }
  .wpf-results-modal .modal-body { padding: 12px 12px 14px; max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* ============================================================
   WPF GLOBAL — CONSOLIDATED DESIGN TOKENS & SHARED COMPONENTS
   Centralized overrides applied AFTER legacy styles.
   ============================================================ */

/* ---- Additional consolidated design-token aliases (safe, no palette changes) ---- */
:root {
  --wpf-page-bg: var(--wpf-page);
  --wpf-card-bg: var(--wpf-card);
  --wpf-surface-bg: var(--wpf-surface);
  --wpf-text-primary: var(--wpf-text);
  --wpf-text-secondary: var(--wpf-muted);
  --wpf-border-subtle: var(--wpf-border);
  --wpf-accent-gold: var(--wpf-gold);
  --wpf-accent-navy: var(--wpf-navy-900);
  --wpf-state-success: var(--wpf-win);
  --wpf-state-warning: var(--wpf-warning);
  --wpf-state-danger: var(--wpf-loss);
  --wpf-radius-lg: var(--wpf-radius);
  --wpf-radius-md: var(--wpf-radius-sm);
  --wpf-radius-xs: 4px;
  --wpf-shadow-soft: var(--wpf-shadow);
  --wpf-shadow-strong: var(--wpf-shadow-lg);
}

/* ============================================================
   GLOBAL MODAL BACKDROP — Premium dark tropical treatment
   Replaces legacy royal-blue with WPF navy + subtle sunset.
   Shared by Bootstrap modals, SweetAlert2, and custom overlays.
   ============================================================ */
.modal-backdrop,
body.modal-open .modal-backdrop,
.modal-backdrop.show {
  background-color: transparent !important;
  background-image:
    linear-gradient(
      rgba(4, 14, 25, .86),
      rgba(4, 14, 25, .90)
    ),
    url('../images/background/wpf-home-sunset-wide.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 1 !important;
  z-index: 1040 !important;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
}

.swal2-container.swal2-backdrop-show,
body.swal2-shown .swal2-container {
  background-color: transparent !important;
  background-image:
    linear-gradient(
      rgba(4, 14, 25, .86),
      rgba(4, 14, 25, .90)
    ),
    url('../images/background/wpf-home-sunset-wide.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.wpf-drawer-backdrop.is-open {
  background-color: transparent;
  background-image:
    linear-gradient(
      rgba(4, 14, 25, .58),
      rgba(4, 14, 25, .62)
    );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   GLOBAL SWEETALERT2 — standard WPF modal treatment
   ============================================================ */
.swal2-container {
  z-index: 1100 !important;
}
.swal2-container .swal2-popup {
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 24, 39, .28);
  font-family: var(--wpf-font-body);
}
.swal2-container .swal2-popup .swal2-title {
  font-family: var(--wpf-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 16px 22px;
  margin: 0;
  background: var(--wpf-navy-950);
  color: #fff;
  text-align: left;
}
.swal2-container .swal2-popup .swal2-html-container {
  padding: 18px 22px;
  margin: 0;
  color: var(--wpf-text);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.swal2-container .swal2-popup .swal2-icon {
  margin: 22px auto 10px;
}
.swal2-container .swal2-popup .swal2-actions {
  padding: 12px 22px;
  margin: 0;
  background: var(--wpf-page);
  border-top: 1px solid var(--wpf-border);
  gap: 10px;
  justify-content: flex-end;
}
.swal2-container .swal2-popup .swal2-styled {
  border-radius: var(--wpf-radius-sm);
  padding: 8px 18px;
  min-height: 40px;
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.swal2-container .swal2-popup .swal2-confirm {
  background: var(--wpf-gold);
  border-color: var(--wpf-gold);
  color: var(--wpf-navy-950);
}
.swal2-container .swal2-popup .swal2-confirm:hover {
  background: var(--wpf-gold-hover);
  color: var(--wpf-navy-950);
}
.swal2-container .swal2-popup .swal2-cancel {
  background: var(--wpf-navy-900);
  border-color: var(--wpf-navy-900);
  color: #fff;
}
.swal2-container .swal2-popup .swal2-cancel:hover {
  background: var(--wpf-navy-700);
  border-color: var(--wpf-navy-700);
  color: #fff;
}
.swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm,
.swal2-container .swal2-popup.swal2-icon-error .swal2-confirm {
  background: var(--wpf-loss);
  border-color: var(--wpf-loss);
  color: #fff;
}
.swal2-container .swal2-popup.swal2-icon-warning .swal2-confirm:hover,
.swal2-container .swal2-popup.swal2-icon-error .swal2-confirm:hover {
  background: #cf4f5a;
  color: #fff;
}
.swal2-container .swal2-popup .swal2-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
  line-height: 1;
  text-shadow: none;
  z-index: 5;
}
.swal2-container .swal2-popup .swal2-close:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* ============================================================
   GLOBAL BOOTSTRAP MODAL — standardized WPF cards
   ============================================================ */
.modal-dialog {
  margin: 1.75rem auto;
}
.modal .modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(7, 24, 39, .28);
  overflow: hidden;
}
.modal .modal-header {
  background: var(--wpf-navy-950);
  border-bottom: 1px solid var(--wpf-navy-700);
  padding: 16px 22px;
  align-items: center;
}
.modal .modal-title {
  font-family: var(--wpf-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.modal .modal-header .close {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
}
.modal .modal-header .close:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.modal .modal-body {
  padding: 18px 22px;
  background: #fff;
}
.modal .modal-footer {
  border-top: 1px solid var(--wpf-border);
  padding: 12px 22px;
  background: var(--wpf-page);
  gap: 10px;
  justify-content: flex-end;
}
.modal .modal-footer .btn {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--wpf-radius-sm);
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.modal .modal-footer .btn-secondary,
.modal .modal-footer .btn-default {
  background: var(--wpf-navy-900);
  border: 1px solid var(--wpf-navy-900);
  color: #fff;
}
.modal .modal-footer .btn-secondary:hover,
.modal .modal-footer .btn-default:hover,
.modal .modal-footer .btn-secondary:focus,
.modal .modal-footer .btn-default:focus {
  background: var(--wpf-navy-700);
  border-color: var(--wpf-navy-700);
  color: #fff;
}
.modal .modal-footer .btn-primary {
  background: var(--wpf-gold);
  border: 1px solid var(--wpf-gold);
  color: var(--wpf-navy-950);
}
.modal .modal-footer .btn-primary:hover,
.modal .modal-footer .btn-primary:focus {
  background: var(--wpf-gold-hover);
  border-color: var(--wpf-gold-hover);
  color: var(--wpf-navy-950);
}
.modal .modal-footer .btn-danger {
  background: var(--wpf-loss);
  border: 1px solid var(--wpf-loss);
  color: #fff;
}
.modal .modal-footer .btn-danger:hover,
.modal .modal-footer .btn-danger:focus {
  background: #cf4f5a;
  border-color: #cf4f5a;
  color: #fff;
}
.modal .modal-footer .btn-success {
  background: var(--wpf-win);
  border: 1px solid var(--wpf-win);
  color: #fff;
}
.modal .modal-footer .btn-success:hover,
.modal .modal-footer .btn-success:focus {
  background: #3E9C6D;
  border-color: #3E9C6D;
  color: #fff;
}

@media (max-width: 767px) {
  .modal-dialog {
    max-width: calc(100vw - 24px);
    margin: 12px auto;
  }
  .modal .modal-content {
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
  }
  .modal .modal-body {
    overflow-y: auto;
    min-height: 0;
    padding: 14px 16px;
  }
  .modal .modal-header {
    padding: 14px 16px;
    flex: 0 0 auto;
  }
  .modal .modal-footer {
    padding: 10px 16px;
    flex: 0 0 auto;
  }
}

/* ============================================================
   GLOBAL DATATABLES — unified WPF chrome (all wrappers)
   ============================================================ */
div[id$="Table_wrapper"] .dt-layout-row:first-child,
#example_wrapper .dt-layout-row:first-child,
div[class*="dataTables_wrapper"] > .dt-layout-row:first-child {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wpf-border);
}
div[id$="Table_wrapper"] .dt-layout-row:last-child,
#example_wrapper .dt-layout-row:last-child,
div[class*="dataTables_wrapper"] > .dt-layout-row:last-child {
  padding: 12px 16px;
  border-top: 1px solid var(--wpf-border);
}
div[id$="Table_wrapper"] .dt-length label,
#example_wrapper .dt-length label,
div[class*="dataTables_wrapper"] .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wpf-muted);
}
div[id$="Table_wrapper"] .dt-length select,
#example_wrapper .dt-length select,
div[class*="dataTables_wrapper"] .dt-length select {
  height: 38px;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  padding: 0 10px;
  font-size: 13px;
}
div[id$="Table_wrapper"] .dt-length select:focus,
#example_wrapper .dt-length select:focus,
div[class*="dataTables_wrapper"] .dt-length select:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}
div[id$="Table_wrapper"] .dt-search input,
#example_wrapper .dt-search input,
div[class*="dataTables_wrapper"] .dt-search input {
  height: 38px;
  width: 240px;
  max-width: 100%;
  border: 1px solid var(--wpf-border);
  background: #f9fafb;
  border-radius: var(--wpf-radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--wpf-text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
div[id$="Table_wrapper"] .dt-search input:focus,
#example_wrapper .dt-search input:focus,
div[class*="dataTables_wrapper"] .dt-search input:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
  background: #fff;
}
div[id$="Table_wrapper"] .dt-info,
#example_wrapper .dt-info,
div[class*="dataTables_wrapper"] .dt-info {
  font-size: 12px;
  color: var(--wpf-muted);
}
div[id$="Table_wrapper"] .dt-paging,
#example_wrapper .dt-paging,
div[class*="dataTables_wrapper"] .dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}
div[id$="Table_wrapper"] .dt-paging nav,
#example_wrapper .dt-paging nav,
div[class*="dataTables_wrapper"] .dt-paging nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
div[id$="Table_wrapper"] .dt-paging-button,
#example_wrapper .dt-paging-button,
div[class*="dataTables_wrapper"] .dt-paging-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  border-radius: var(--wpf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
div[id$="Table_wrapper"] .dt-paging-button:hover:not(.disabled),
#example_wrapper .dt-paging-button:hover:not(.disabled),
div[class*="dataTables_wrapper"] .dt-paging-button:hover:not(.disabled) {
  border-color: var(--wpf-gold);
  background: rgba(246, 183, 0, .08);
  color: var(--wpf-navy-900);
}
div[id$="Table_wrapper"] .dt-paging-button:focus,
#example_wrapper .dt-paging-button:focus,
div[class*="dataTables_wrapper"] .dt-paging-button:focus {
  outline: none;
  border-color: var(--wpf-gold);
}
div[id$="Table_wrapper"] .dt-paging-button.current,
div[id$="Table_wrapper"] .dt-paging-button.current:hover,
div[id$="Table_wrapper"] .dt-paging-button.current:focus,
div[id$="Table_wrapper"] .dt-paging-button.current:active,
#example_wrapper .dt-paging-button.current,
#example_wrapper .dt-paging-button.current:hover,
#example_wrapper .dt-paging-button.current:focus,
#example_wrapper .dt-paging-button.current:active,
div[class*="dataTables_wrapper"] .dt-paging-button.current,
div[class*="dataTables_wrapper"] .dt-paging-button.current:hover,
div[class*="dataTables_wrapper"] .dt-paging-button.current:focus,
div[class*="dataTables_wrapper"] .dt-paging-button.current:active {
  background: var(--wpf-navy-900) !important;
  border-color: var(--wpf-gold) !important;
  color: #fff !important;
  box-shadow: none;
}
div[id$="Table_wrapper"] .dt-paging-button.disabled,
#example_wrapper .dt-paging-button.disabled,
div[class*="dataTables_wrapper"] .dt-paging-button.disabled {
  color: var(--wpf-muted) !important;
  background: #f2f4f7;
  border-color: var(--wpf-border);
  opacity: .55;
  cursor: not-allowed;
}
div[id$="Table_wrapper"] .dt-paging-button.disabled:hover,
#example_wrapper .dt-paging-button.disabled:hover,
div[class*="dataTables_wrapper"] .dt-paging-button.disabled:hover {
  background: #f2f4f7;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border);
}

/* ======================================================================
   ★ WPF CANONICAL DATA TABLES SYSTEM — ONE SHARED IMPLEMENTATION
   Catches ALL wrappers via dt-container / dataTables_wrapper class
   (no longer relies on brittle ID-suffix patterns such as [id$="Table_wrapper"],
   which missed My Account wrappers: id="wpf-dt-upcoming_wrapper").
   Desktop rules first, responsive layouts inside @media blocks.
   ====================================================================== */

/* ---------- Toolbar rows ---------- */
div.dt-container .dt-layout-row:first-child,
div.dataTables_wrapper > .dt-layout-row:first-child,
div.dt-container .dt-layout-top,
div.dataTables_wrapper > .dt-layout-top {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--wpf-border) !important;
}
div.dt-container .dt-layout-row:last-child,
div.dataTables_wrapper > .dt-layout-row:last-child,
div.dt-container .dt-layout-bottom,
div.dataTables_wrapper > .dt-layout-bottom {
  padding: 12px 16px !important;
  border-top: 1px solid var(--wpf-border) !important;
}

/* ---------- Length / Show selector ---------- */
div.dt-container .dt-length label,
div.dataTables_wrapper .dt-length label,
div.dt-container div.dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--wpf-muted) !important;
}
div.dt-container .dt-length select,
div.dataTables_wrapper .dt-length select,
div.dt-container div.dataTables_length select {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--wpf-border) !important;
  border-radius: var(--wpf-radius-sm) !important;
  background: #fff !important;
  color: var(--wpf-text) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
div.dt-container .dt-length select:focus,
div.dataTables_wrapper .dt-length select:focus,
div.dt-container div.dataTables_length select:focus {
  outline: none !important;
  border-color: var(--wpf-gold) !important;
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15) !important;
}

/* ---------- Search field ---------- */
div.dt-container .dt-search input,
div.dataTables_wrapper .dt-search input,
div.dt-container div.dataTables_filter input[type="search"] {
  height: 38px !important;
  min-height: 38px !important;
  width: 240px !important;
  max-width: 100% !important;
  border: 1px solid var(--wpf-border) !important;
  background: #f9fafb !important;
  border-radius: var(--wpf-radius-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  color: var(--wpf-text) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
div.dt-container .dt-search input:focus,
div.dataTables_wrapper .dt-search input:focus,
div.dt-container div.dataTables_filter input[type="search"]:focus {
  outline: none !important;
  border-color: var(--wpf-gold) !important;
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15) !important;
  background: #fff !important;
}
div.dt-container .dt-search label,
div.dataTables_wrapper .dt-search label,
div.dt-container div.dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--wpf-muted) !important;
}

/* ---------- Info text ---------- */
div.dt-container .dt-info,
div.dataTables_wrapper .dt-info,
div.dt-container div.dataTables_info {
  font-size: 12px !important;
  color: var(--wpf-muted) !important;
}

/* ---------- Pagination (shared) ---------- */
div.dt-container .dt-paging,
div.dataTables_wrapper .dt-paging,
div.dt-container div.dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
div.dt-container .dt-paging nav,
div.dataTables_wrapper .dt-paging nav,
div.dt-container div.dataTables_paginate > span,
div.dt-container div.dataTables_paginate > ul {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* page buttons (modern + legacy markup) */
div.dt-container .dt-paging-button,
div.dataTables_wrapper .dt-paging-button,
div.dt-container div.dataTables_paginate .paginate_button,
div.dt-container ul.pagination .page-link {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid var(--wpf-border) !important;
  background: #fff !important;
  color: var(--wpf-navy-700) !important;
  border-radius: var(--wpf-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
  box-sizing: border-box !important;
}
/* Hover (non-disabled) */
div.dt-container .dt-paging-button:hover:not(.disabled),
div.dataTables_wrapper .dt-paging-button:hover:not(.disabled),
div.dt-container div.dataTables_paginate .paginate_button:hover:not(.disabled),
div.dt-container ul.pagination .page-item:not(.disabled) .page-link:hover {
  border-color: var(--wpf-gold) !important;
  background: rgba(246, 183, 0, .08) !important;
  color: var(--wpf-navy-900) !important;
}
/* Focus */
div.dt-container .dt-paging-button:focus,
div.dataTables_wrapper .dt-paging-button:focus,
div.dt-container div.dataTables_paginate .paginate_button:focus,
div.dt-container ul.pagination .page-link:focus {
  outline: none !important;
  border-color: var(--wpf-gold) !important;
}
/* ACTIVE PAGE — always readable (WPF NAVY background, WHITE text, GOLD border) */
div.dt-container .dt-paging-button.current,
div.dt-container .dt-paging-button.current:hover,
div.dt-container .dt-paging-button.current:focus,
div.dt-container .dt-paging-button.current:active,
div.dataTables_wrapper .dt-paging-button.current,
div.dataTables_wrapper .dt-paging-button.current:hover,
div.dataTables_wrapper .dt-paging-button.current:focus,
div.dataTables_wrapper .dt-paging-button.current:active,
div.dt-container div.dataTables_paginate .paginate_button.current,
div.dt-container div.dataTables_paginate .paginate_button.current:hover,
div.dt-container div.dataTables_paginate .paginate_button.current:focus,
div.dt-container ul.pagination .page-item.active .page-link {
  background: var(--wpf-navy-900) !important;   /* #0D1B2A */
  border-color: var(--wpf-gold) !important;     /* #F6B700 */
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 700 !important;
}
/* — NUCLEAR OVERRIDE: beats any (0,4,0) account-wide resets (My Account, Statistics, etc.) — */
/* — Always readable active page: Navy bg + White text + Gold border — HARD CODED not var-based — */
html body div.dt-container .dt-paging-button.current,
html body div.dt-container .dt-paging-button.current:hover,
html body div.dt-container .dt-paging-button.current:focus,
html body div.dt-container .dt-paging-button.current:active,
html body div.dataTables_wrapper .dt-paging-button.current,
html body div.dataTables_wrapper .dt-paging-button.current:hover,
html body div.dataTables_wrapper .dt-paging-button.current:focus,
html body div.dataTables_wrapper .dt-paging-button.current:active {
  background: #0D1B2A !important;   /* WPF NAVY 900 — hardcoded, not var */
  border: 1px solid #F6B700 !important;     /* WPF GOLD — hardcoded */
  border-color: #F6B700 !important;
  color: #FFFFFF !important;                /* WHITE — always readable */
  box-shadow: none !important;
  transform: none !important;
  font-weight: 700 !important;
}
/* — My Account / Statistics scoped (extra high specificity to beat 4-class 0,4,0 nuclear resets) — */
html body .wpf-account div.dt-container .dt-paging-button.current,
html body .wpf-account div.dt-container .dt-paging-button.current:hover,
html body .wpf-account div.dt-container .dt-paging-button.current:focus,
html body .wpf-stats div.dt-container .dt-paging-button.current,
html body .wpf-stats div.dt-container .dt-paging-button.current:hover,
html body .wpf-stats div.dt-container .dt-paging-button.current:focus {
  background: #0D1B2A !important;
  border-color: #F6B700 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 700 !important;
}
/* Disabled */
div.dt-container .dt-paging-button.disabled,
div.dataTables_wrapper .dt-paging-button.disabled,
div.dt-container div.dataTables_paginate .paginate_button.disabled,
div.dt-container ul.pagination .page-item.disabled .page-link {
  color: var(--wpf-muted) !important;
  background: #f2f4f7 !important;
  border-color: var(--wpf-border) !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}
div.dt-container .dt-paging-button.disabled:hover,
div.dataTables_wrapper .dt-paging-button.disabled:hover,
div.dt-container div.dataTables_paginate .paginate_button.disabled:hover,
div.dt-container ul.pagination .page-item.disabled .page-link:hover {
  background: #f2f4f7 !important;
  color: var(--wpf-muted) !important;
  border-color: var(--wpf-border) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Ellipsis (DataTables sometimes uses this state) */
div.dt-container .dt-paging-button.ellipsis,
div.dataTables_wrapper .dt-paging-button.ellipsis,
div.dt-container div.dataTables_paginate .paginate_button.ellipsis {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 20px !important;
  padding: 0 2px !important;
  color: var(--wpf-muted) !important;
  font-weight: 500 !important;
  cursor: default !important;
}

/* ---------- Responsive table wrapper (body NEVER scrolls horizontally) ---------- */
div.dt-container,
div.dataTables_wrapper,
div.dt-container .dt-layout-table,
div.dataTables_wrapper .dataTables_scrollBody {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
div.dt-container,
div.dataTables_wrapper {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  -ms-overflow-style: -ms-autohiding-scrollbar !important;
}
div.dt-container table.dataTable,
div.dataTables_wrapper table.dataTable {
  width: 100% !important;
  max-width: none !important;
}

/* ---------- Shared mobile responsive layout (fires ≤ 768px everywhere) ---------- */
@media (max-width: 768px) {
  /* Toolbar: stack 2 rows SHOW then SEARCH */
  div.dt-container .dt-layout-top,
  div.dataTables_wrapper > .dt-layout-top,
  div.dt-container .dt-layout-row:first-child,
  div.dataTables_wrapper > .dt-layout-row:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "length" "search" !important;
    gap: 8px !important;
    padding: 10px 10px 6px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  div.dt-container .dt-layout-top > div,
  div.dataTables_wrapper > .dt-layout-top > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Length full-width */
  div.dt-container .dt-length,
  div.dataTables_wrapper .dt-length,
  div.dt-container div.dataTables_length {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  div.dt-container .dt-length select,
  div.dataTables_wrapper .dt-length select,
  div.dt-container div.dataTables_length select {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Search full-width */
  div.dt-container .dt-search,
  div.dataTables_wrapper .dt-search,
  div.dt-container div.dataTables_filter {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }
  div.dt-container .dt-search input,
  div.dataTables_wrapper .dt-search input,
  div.dt-container div.dataTables_filter input[type="search"] {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  /* Bottom row: INFO center above PAGINATION */
  div.dt-container .dt-layout-bottom,
  div.dataTables_wrapper > .dt-layout-bottom,
  div.dt-container .dt-layout-row:last-child,
  div.dataTables_wrapper > .dt-layout-row:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "info" "paging" !important;
    gap: 8px !important;
    padding: 6px 10px 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  div.dt-container .dt-info,
  div.dataTables_wrapper .dt-info,
  div.dt-container div.dataTables_info {
    text-align: center !important;
    justify-self: center !important;
    padding: 2px 0 !important;
    font-size: 11.5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: keep-all !important;
  }
  /* Pagination: horizontal swipe if needed, centered, min 36×36 touch */
  div.dt-container .dt-paging,
  div.dataTables_wrapper .dt-paging,
  div.dt-container div.dataTables_paginate {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  div.dt-container .dt-paging::-webkit-scrollbar,
  div.dataTables_wrapper .dt-paging::-webkit-scrollbar,
  div.dt-container div.dataTables_paginate::-webkit-scrollbar { display: none !important; }
  div.dt-container .dt-paging-button,
  div.dataTables_wrapper .dt-paging-button,
  div.dt-container div.dataTables_paginate .paginate_button,
  div.dt-container ul.pagination .page-link {
    flex: 0 0 auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    border-radius: var(--wpf-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Mobile active — SAME visuals (navy bg + white text + gold border), just bigger for touch */
  div.dt-container .dt-paging-button.current,
  div.dataTables_wrapper .dt-paging-button.current,
  div.dt-container div.dataTables_paginate .paginate_button.current,
  div.dt-container ul.pagination .page-item.active .page-link {
    background: var(--wpf-navy-900) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--wpf-gold) !important;
    box-shadow: none !important;
    transform: none !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
  }
  div.dt-container .dt-paging-button.disabled,
  div.dataTables_wrapper .dt-paging-button.disabled,
  div.dt-container div.dataTables_paginate .paginate_button.disabled,
  div.dt-container ul.pagination .page-item.disabled .page-link {
    background: #F3F5F7 !important;
    color: var(--wpf-muted) !important;
    border-color: var(--wpf-border) !important;
    opacity: .85 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  div.dt-container .dt-paging-button.ellipsis,
  div.dataTables_wrapper .dt-paging-button.ellipsis,
  div.dt-container div.dataTables_paginate .paginate_button.ellipsis {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 20px !important;
    padding: 0 2px !important;
    color: var(--wpf-muted) !important;
  }
  /* Tables keep readable min-width; scrolling is internal to wrapper above */
  div.dt-container table.dataTable,
  div.dataTables_wrapper table.dataTable {
    min-width: 560px !important;
  }
}

@media (max-width: 560px) {
  div.dt-container .dt-paging-button,
  div.dataTables_wrapper .dt-paging-button,
  div.dt-container div.dataTables_paginate .paginate_button,
  div.dt-container ul.pagination .page-link {
    min-width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
  }
  div.dt-container .dt-length select,
  div.dataTables_wrapper .dt-length select,
  div.dt-container div.dataTables_length select,
  div.dt-container .dt-search input,
  div.dataTables_wrapper .dt-search input,
  div.dt-container div.dataTables_filter input[type="search"] {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 12.5px !important;
  }
  div.dt-container table.dataTable,
  div.dataTables_wrapper table.dataTable { min-width: 520px !important; }
}

@media (max-width: 430px) {
  div.dt-container .dt-paging-button,
  div.dataTables_wrapper .dt-paging-button,
  div.dt-container div.dataTables_paginate .paginate_button,
  div.dt-container ul.pagination .page-link {
    min-width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }
  div.dt-container .dt-length select,
  div.dataTables_wrapper .dt-length select,
  div.dt-container div.dataTables_length select,
  div.dt-container .dt-search input,
  div.dataTables_wrapper .dt-search input,
  div.dt-container div.dataTables_filter input[type="search"] {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
  div.dt-container table.dataTable,
  div.dataTables_wrapper table.dataTable { min-width: 520px !important; }
}

@media (max-width: 360px) {
  div.dt-container .dt-paging-button,
  div.dataTables_wrapper .dt-paging-button,
  div.dt-container div.dataTables_paginate .paginate_button,
  div.dt-container ul.pagination .page-link {
    min-width: 32px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
  }
  div.dt-container .dt-length select,
  div.dataTables_wrapper .dt-length select,
  div.dt-container div.dataTables_length select,
  div.dt-container .dt-search input,
  div.dataTables_wrapper .dt-search input,
  div.dt-container div.dataTables_filter input[type="search"] {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11.5px !important;
  }
  div.dt-container table.dataTable,
  div.dataTables_wrapper table.dataTable { min-width: 500px !important; }
}

/* ★ END WPF CANONICAL DATA TABLES SYSTEM ★ */

/* Sort indicator color (all tables) */
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::after {
  color: var(--wpf-muted);
  opacity: .35;
}
table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::after {
  color: var(--wpf-navy-700);
  opacity: 1;
}

/* Table header baseline (light neutral, uppercase labels) */
table.dataTable thead th,
.wpf-players-table thead th,
.wpf-match-table thead th,
.wpf-fines-table thead th,
.wpf-account-table thead th,
.wpf-email-log thead th,
.wpf-tournament-fixtures-table thead th,
.wpf-tournament-players-table thead th {
  background: #f7f8fa !important;
  border-bottom: 1px solid var(--wpf-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wpf-muted);
  white-space: nowrap;
  vertical-align: middle;
  padding: 10px 16px;
}
table.dataTable tbody td,
.wpf-players-table tbody td,
.wpf-match-table tbody td,
.wpf-fines-table tbody td,
.wpf-account-table tbody td,
.wpf-email-log tbody td,
.wpf-tournament-fixtures-table tbody td,
.wpf-tournament-players-table tbody td {
  border-bottom: 1px solid var(--wpf-border);
  vertical-align: middle;
  padding: 10px 16px;
  color: var(--wpf-text);
  font-size: 13px;
}
table.dataTable tbody tr:last-child td {
  border-bottom: 0;
}
table.dataTable tbody tr:hover td,
.wpf-account-table tbody tr:hover td {
  background: #fafbfc;
}

/* Legacy DataTables v1 selector fallback (odd/even row neutral) */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background-color: #fff;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: #fff;
}
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
  background-color: rgba(246, 183, 0, .08) !important;
}

/* ============================================================
   LEGACY TEMPLATE OVERRIDES — Khelo template fight-backs
   ============================================================ */

/* Kill the template-wide table-center plague that fights WPF left-aligned
   player identity cells. Re-apply text-align selectively only where needed. */
thead, th, tr, td, tbody {
  text-align: inherit !important;
}

/* Legacy .container-fluid lateral padding fight-back (WPF uses the sidebar shell). */
.container-fluid {
  padding: 0;
  margin: 0;
}

/* Anchor underline removal for action buttons (DataTables row actions). */
a.wpf-players-btn,
a.wpf-match-btn,
a.wpf-account-btn,
a.wpf-edit-action,
a.wpf-edit-action--danger,
a.wpf-edit-action--promote {
  text-decoration: none !important;
  outline: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Remove template default link underline from nav/CTA anchors. */
.wpf-nav-link,
.wpf-card-link,
.wpf-auth-link,
.wpf-cal-action,
.wpf-players-add,
.wpf-match-admin-add,
.wpf-fines-btn,
.wpf-tab,
.wpf-account-tab,
.wpf-auth-tab,
.wpf-tournament-tab,
.wpf-account-btn {
  text-decoration: none !important;
  outline: none !important;
}

/* H1/H2/H3 body font reset (template uses Fira Sans aggressively) */
body.wpf-auth-page h1,
body.wpf-auth-page h2,
body.wpf-auth-page h3,
body.wpf-auth-page h4,
body.wpf-auth-page h5,
body.wpf-auth-page h6,
body:not(.wpf-auth-page) h1,
body:not(.wpf-auth-page) h2,
body:not(.wpf-auth-page) h3,
body:not(.wpf-auth-page) h4,
body:not(.wpf-auth-page) h5,
body:not(.wpf-auth-page) h6 {
  font-family: var(--wpf-font-head);
  letter-spacing: .01em;
}

/* Body line-height reduced from template's roomy 26px. */
body {
  line-height: 1.55;
}
body p {
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Hide template preloader (bouncing-ball) root node — WPF loader replaces it. */
.loading#loading,
div#loading.loading {
  display: none !important;
}

/* ============================================================
   GLOBAL PAGE LOADER — WPF brand transition (replaces football)
   ============================================================ */
#wpf-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #071827;
  background-image:
    radial-gradient(1200px 600px at 50% -20%, rgba(246, 183, 0, .08), transparent 60%),
    linear-gradient(
      rgba(4, 14, 25, .94),
      rgba(4, 14, 25, .97)
    ),
    url('../images/background/wpf-home-sunset-wide.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity .28s ease, visibility .28s ease;
  opacity: 1;
  visibility: visible;
}
#wpf-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.wpf-loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.wpf-loader-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .4));
  animation: wpf-loader-breath 2.1s ease-in-out infinite;
  transform-origin: center;
}
.wpf-loader-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 183, 0, .22) 0%, rgba(246, 183, 0, .08) 40%, transparent 70%);
  animation: wpf-loader-halo 2.1s ease-in-out infinite;
  pointer-events: none;
}
.wpf-loader-label {
  font-family: var(--wpf-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
@keyframes wpf-loader-breath {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes wpf-loader-halo {
  0%, 100% { transform: scale(.92); opacity: .6; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wpf-loader-logo { animation: none; }
  .wpf-loader-halo { animation: none; opacity: .75; }
  #wpf-page-loader { transition: opacity .1s linear; }
}
@media (max-width: 480px) {
  .wpf-loader-logo { width: 72px; height: 72px; }
  .wpf-loader-halo { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
}

/* ============================================================
   GLOBAL TOPBAR AVATAR — real image / WPF logo fallback
   Initials rendered only as a true last resort.
   ============================================================ */
.wpf-topbar-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  display: block;
  flex: 0 0 auto;
}
.wpf-avatar.wpf-avatar--initials {
  background: linear-gradient(135deg, var(--wpf-gold), var(--wpf-sand));
  color: var(--wpf-navy-950);
}

/* ============================================================
   GLOBAL ACTION BUTTONS — table actions (edit/delete/verify)
   No underline, consistent sizing, hover feedback.
   ============================================================ */
a.wpf-players-btn,
button.wpf-players-btn,
a.wpf-match-btn,
button.wpf-match-btn,
a.wpf-edit-action,
button.wpf-edit-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--wpf-radius-sm);
  border: 1px solid var(--wpf-border);
  background: #fff;
  color: var(--wpf-navy-700);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  vertical-align: middle;
  padding: 0;
}
a.wpf-players-btn:hover,
button.wpf-players-btn:hover,
a.wpf-match-btn:hover,
button.wpf-match-btn:hover,
a.wpf-edit-action:hover,
button.wpf-edit-action:hover {
  border-color: var(--wpf-gold);
  color: var(--wpf-navy-900);
  text-decoration: none !important;
}
a.wpf-players-btn--edit:hover,
button.wpf-players-btn--edit:hover {
  background: rgba(246, 183, 0, .1);
}
a.wpf-players-btn--delete,
button.wpf-players-btn--delete,
a.wpf-match-btn--delete,
button.wpf-match-btn--delete,
a.wpf-edit-action--danger,
button.wpf-edit-action--danger {
  color: var(--wpf-loss);
  border-color: rgba(224, 92, 104, .35);
}
a.wpf-players-btn--delete:hover,
button.wpf-players-btn--delete:hover,
a.wpf-match-btn--delete:hover,
button.wpf-match-btn--delete:hover,
a.wpf-edit-action--danger:hover,
button.wpf-edit-action--danger:hover {
  background: var(--wpf-loss);
  border-color: var(--wpf-loss);
  color: #fff;
}
a.wpf-edit-action--promote:hover,
button.wpf-edit-action--promote:hover {
  background: var(--wpf-win);
  border-color: var(--wpf-win);
  color: #fff;
}

/* ============================================================
   GLOBAL PLAYER IDENTITY PATTERN (reusable)
   Full Name (strong, primary) + @username / GUEST (muted, secondary)
   ============================================================ */
.wpf-player-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.wpf-player-identity__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wpf-page);
  border: 1px solid var(--wpf-border);
  flex: 0 0 auto;
  display: block;
}
.wpf-player-identity__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.wpf-player-identity__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--wpf-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wpf-player-identity__sub {
  font-size: 12px;
  color: var(--wpf-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wpf-player-identity__sub--guest {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(217, 131, 36, .14);
  color: #8a4c00;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wpf-player-identity__sub--username {
  color: var(--wpf-muted);
}
.wpf-player-identity__sub--username:empty {
  display: none;
}

/* ============================================================
   GLOBAL FORM SYSTEM (scoped to .wpf-form-field)
   ============================================================ */
.wpf-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wpf-form-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wpf-muted);
}
.wpf-form-input,
.wpf-form-textarea,
.wpf-form-select {
  width: 100%;
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  background: #fff;
  color: var(--wpf-text);
  font-size: 14px;
  padding: 9px 12px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpf-form-textarea {
  min-height: 96px;
  resize: vertical;
}
.wpf-form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7A8D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  padding-right: 36px;
}
.wpf-form-input:focus,
.wpf-form-textarea:focus,
.wpf-form-select:focus {
  outline: none;
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246, 183, 0, .15);
}
.wpf-form-input:disabled,
.wpf-form-textarea:disabled,
.wpf-form-select:disabled {
  background: #f2f4f7;
  color: var(--wpf-muted);
  cursor: not-allowed;
  opacity: .8;
}
.wpf-form-hint {
  font-size: 11px;
  color: var(--wpf-muted);
}
.wpf-form-error {
  font-size: 12px;
  color: var(--wpf-loss);
}
.wpf-form-input.is-invalid,
.wpf-form-textarea.is-invalid,
.wpf-form-select.is-invalid {
  border-color: var(--wpf-loss);
}
.wpf-form-input.is-invalid:focus,
.wpf-form-textarea.is-invalid:focus,
.wpf-form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(224, 92, 104, .15);
}

/* ============================================================
   GLOBAL ALERT / TOAST NOTIFICATIONS
   ============================================================ */
.alert {
  border-radius: var(--wpf-radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
  margin-bottom: 16px;
}
.alert-dismissible .close {
  padding: 6px 12px;
}
.alert-success {
  background: rgba(76, 175, 122, .12);
  border-color: rgba(76, 175, 122, .30);
  color: #2e7d52;
}
.alert-danger {
  background: rgba(224, 92, 104, .12);
  border-color: rgba(224, 92, 104, .30);
  color: #a2303a;
}
.alert-warning {
  background: rgba(246, 183, 0, .12);
  border-color: rgba(246, 183, 0, .30);
  color: #8a6a00;
}
.alert-info {
  background: rgba(30, 52, 80, .08);
  border-color: rgba(30, 52, 80, .20);
  color: var(--wpf-navy-700);
}

/* ============================================================
   RESPONSIVE — Cross-page table overflow controls
   Prevent body horizontal scroll; contain inside card wrappers.
   ============================================================ */
.wpf-card,
.wpf-players-card,
.wpf-match-admin-card,
.wpf-fines-card,
.wpf-results-card,
.wpf-edit-table-wrap,
.wpf-tournament-fixtures-body,
.wpf-tournament-players-body {
  overflow-x: auto;
}
.wpf-card table,
.wpf-players-card table,
.wpf-match-admin-card table,
.wpf-fines-card table {
  margin: 0;
}
@media (max-width: 767px) {
  .wpf-content {
    padding: 14px 12px 24px;
    gap: 14px;
  }
  .wpf-topbar {
    padding: 0 12px;
    height: 48px;
    min-height: 48px;
  }
  .wpf-page-title,
  .wpf-players-title,
  .wpf-match-admin-title,
  .wpf-fines-title,
  .wpf-stats-head .wpf-page-title {
    font-size: 19px;
  }
  .wpf-push-toggle--icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .wpf-push-toggle--icon .wpf-push-toggle__track { display: none !important; }
  .wpf-push-toggle--icon .wpf-push-toggle__label { display: none !important; }
  .wpf-tabs,
  .wpf-stats-head .wpf-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .wpf-tab {
    flex: 0 0 auto;
  }
  .wpf-match-summary,
  .wpf-fines-forms,
  .wpf-account-metrics {
    grid-template-columns: 1fr;
  }
  table.dataTable thead th,
  .wpf-players-table thead th,
  .wpf-match-table thead th,
  .wpf-fines-table thead th {
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 1px;
  }
  table.dataTable tbody td,
  .wpf-players-table tbody td,
  .wpf-match-table tbody td,
  .wpf-fines-table tbody td {
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .wpf-player-avatar,
  .wpf-player-identity__avatar {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 420px) {
  .wpf-topbar-title {
    font-size: 11.5px;
    letter-spacing: 2.5px;
  }
  .wpf-brand-badge {
    width: 80px;
    height: 80px;
  }
  .wpf-hero-title {
    font-size: 24px;
  }
  .wpf-hero-time {
    font-size: 19px;
  }
}

.wpf-hero .wpf-hero-tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: 92%;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.wpf-hero .wpf-hero-tagline-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 3px rgba(7, 24, 39, .6);
  font-style: normal;
  white-space: nowrap;
}
.wpf-hero .wpf-hero-tagline-icon {
  font-size: 1.3em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(7, 24, 39, .65));
}
.wpf-hero .wpf-hero-tagline-icon:first-child { transform: translateY(-1px); }
.wpf-hero .wpf-hero-tagline-icon:last-child  { transform: translateY(-1px) scaleX(-1); }
.wpf-hero .wpf-hero-tagline-text { position: relative; }
.wpf-hero .wpf-hero-tagline-text::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 213, 79, .85), transparent);
  vertical-align: middle;
  margin-right: 10px;
}
.wpf-hero .wpf-hero-tagline-text::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 213, 79, .85), transparent);
  vertical-align: middle;
  margin-left: 10px;
}

/* ========= Tablet (960↓) — hero stacks column, tagline sits IN-FLOW between content & visual ========= */
@media (max-width: 960px) {
  .wpf-hero .wpf-hero-tagline {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    pointer-events: auto;
    padding: 6px 28px 12px;
    margin: -2px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wpf-hero .wpf-hero-tagline-inner {
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}

/* ========= Smaller Tablet (880↓) ========= */
@media (max-width: 880px) {
  .wpf-hero .wpf-hero-tagline { padding: 4px 22px 10px; }
  .wpf-hero .wpf-hero-tagline-inner {
    font-size: 13px;
    gap: 9px;
  }
}

/* ========= Mobile 767↓ — hero-visual hidden, tagline as IN-FLOW centered row AFTER content (no overlap!) ========= */
@media (max-width: 767px) {
  .wpf-hero .wpf-hero-tagline {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    pointer-events: auto;
    padding: 10px 16px 14px;
    margin: -2px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wpf-hero .wpf-hero-tagline-inner {
    font-size: 12.5px;
    letter-spacing: .03em;
    gap: 8px;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .wpf-hero .wpf-hero-tagline-text::before,
  .wpf-hero .wpf-hero-tagline-text::after {
    width: 14px;
  }
}

/* ========= Tiny Mobile 380↓ — remove dividers, tightest gap ========= */
@media (max-width: 380px) {
  .wpf-hero .wpf-hero-tagline-text::before,
  .wpf-hero .wpf-hero-tagline-text::after {
    display: none;
  }
  .wpf-hero .wpf-hero-tagline-inner { gap: 6px; }
}

/* ============================================================
   AUTO-BALANCE TEAMS — ADDITIVE CLASSES (Phase 1, Rec #1)
   All rules below are APPENDED; existing visual rules untouched.
   ============================================================ */

/* ---------- Modal balance bar (team meters + GAP chip) ---------- */
.wpf-balance-bar {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.55), rgba(30, 41, 59, 0.55));
  border: 1px solid var(--wpf-border, #e5e7eb);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.wpf-balance-bar__meters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.wpf-balance-meter {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wpf-balance-meter__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wpf-muted, #6b7280);
}
.wpf-balance-meter__label { color: var(--wpf-text, #111827); }
.wpf-balance-meter--team1 .wpf-balance-meter__label { color: #2563eb; }
.wpf-balance-meter--team2 .wpf-balance-meter__label { color: #dc2626; }
.wpf-balance-meter--team3 .wpf-balance-meter__label { color: #059669; }
.wpf-balance-meter--team4 .wpf-balance-meter__label { color: #c026d3; }
.wpf-balance-meter__val {
  font-variant-numeric: tabular-nums;
  color: var(--wpf-text, #111827);
}
.wpf-balance-meter__val small {
  color: var(--wpf-muted, #6b7280);
  font-weight: 500;
}
.wpf-balance-meter__track {
  width: 100%;
  height: 7px;
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.wpf-balance-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: #6b7280;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.wpf-balance-meter--team1 .wpf-balance-meter__fill { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.wpf-balance-meter--team2 .wpf-balance-meter__fill { background: linear-gradient(90deg, #dc2626, #f87171); }
.wpf-balance-meter--team3 .wpf-balance-meter__fill { background: linear-gradient(90deg, #059669, #34d399); }
.wpf-balance-meter--team4 .wpf-balance-meter__fill { background: linear-gradient(90deg, #c026d3, #e879f9); }

/* GAP chip */
.wpf-balance-bar__gap {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #6b7280;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.wpf-balance-bar__gap-label { opacity: .9; font-weight: 600; }
.wpf-balance-bar__gap-val  { font-size: 13px; font-variant-numeric: tabular-nums; }
.wpf-balance-bar__gap--green  { background: linear-gradient(135deg, #10b981, #059669); }
.wpf-balance-bar__gap--yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wpf-balance-bar__gap--orange { background: linear-gradient(135deg, #ea580c, #c2410c); }
.wpf-balance-bar__gap--red    { background: linear-gradient(135deg, #dc2626, #991b1b); }

/* ---------- Balance button in footer ---------- */
.wpf-balance-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.wpf-balance-btn:disabled { opacity: .75; box-shadow: none; cursor: progress; }
.wpf-balance-btn i { font-size: 14px; }

/* ---------- Power-tier chip per player ---------- */
.wpf-power-tier {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  background: #e5e7eb;
  color: #111827;
  border: 1px solid rgba(0,0,0,.06);
  flex: 0 0 auto;
  margin-right: 6px;
  user-select: none;
}
.wpf-power-tier__pw { font-variant-numeric: tabular-nums; }
.wpf-power-tier__sep { opacity: .6; font-weight: 600; }

/* Tier colors — power 0..100 → D..S+ */
.wpf-power-tier--Splus { background: linear-gradient(135deg, #ff7eb3, #ff4d8d); color: #fff; border-color: rgba(255,77,141,.3); }
.wpf-power-tier--S     { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: rgba(217,119,6,.3); }
.wpf-power-tier--A     { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-color: rgba(79,70,229,.3); }
.wpf-power-tier--B     { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border-color: rgba(22,163,74,.3); }
.wpf-power-tier--C     { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; border-color: rgba(2,132,199,.3); }
.wpf-power-tier--D     { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; border-color: rgba(100,116,139,.3); }

/* Admin override: gold ring + glow on chip */
.wpf-power-tier--override {
  position: relative;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.6), 0 2px 6px rgba(234,179,8,.2);
}
.wpf-power-tier--override::after {
  content: "★";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px; height: 14px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  background: #eab308;
  color: #111827;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* ---------- Admin override input (next to chip) ---------- */
.wpf-power-override-input {
  width: 56px;
  height: 22px;
  padding: 0 5px;
  border: 1px dashed rgba(234, 179, 8, 0.55);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #92400e;
  background: #fffbeb;
  flex: 0 0 auto;
  margin-right: 6px;
  text-align: center;
  transition: all .18s ease;
  outline: none;
  -moz-appearance: textfield;
}
.wpf-power-override-input::-webkit-outer-spin-button,
.wpf-power-override-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpf-power-override-input::placeholder { color: #ca8a04; font-weight: 600; font-size: 10px; letter-spacing: .01em; }
.wpf-power-override-input:hover  { border-color: #eab308; background: #fef9c3; }
.wpf-power-override-input:focus  { border-color: #ca8a04; background: #fff; box-shadow: 0 0 0 2px rgba(234,179,8,.25); }

/* 3-state visual feedback (reuses existing is-saving / is-saved / is-error semantics) */
.wpf-power-override-input.is-saving { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.wpf-power-override-input.is-saved  { border-color: #16a34a; background: #f0fdf4; color: #15803d; box-shadow: 0 0 0 2px rgba(22,163,74,.25); }
.wpf-power-override-input.is-error  { border-color: #dc2626; background: #fef2f2; color: #991b1b; animation: wpf-shake .35s ease-in-out 0s 1; }

/* ---------- Swal popup balance styling ---------- */
.wpf-swal--balance .wpf-swal-gap {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  margin-top: 8px;
  font-size: 14px;
}
.wpf-swal--balance .wpf-swal-gap.wpf-balance-bar__gap--green  { background: linear-gradient(135deg, #10b981, #059669); }
.wpf-swal--balance .wpf-swal-gap.wpf-balance-bar__gap--yellow { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wpf-swal--balance .wpf-swal-gap.wpf-balance-bar__gap--orange { background: linear-gradient(135deg, #ea580c, #c2410c); }
.wpf-swal--balance .wpf-swal-gap.wpf-balance-bar__gap--red    { background: linear-gradient(135deg, #dc2626, #991b1b); }

/* ---------- Layout tweaks for player row with chip+override ---------- */
.wpf-squad-player {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.wpf-squad-player .wpf-squad-num,
.wpf-squad-player .wpf-squad-name {
  flex: 0 0 auto;
}
.wpf-squad-player .wpf-team-toggle {
  margin-left: auto;
  flex: 0 0 auto;
}

/* ================================================================
   [PHASE 2 ADDITIVE-ONLY] Smart Calendar + Push Notifications CSS
   All classes prefixed wpf-cal-feed | wpf-push-* | wpf-notif-*-push
   ZERO edits applied to any pre-PHASE-2 classes.
   ================================================================ */

/* ---- 1) Calendar feed action links (calendar_subscribe.php download) --------- */
.wpf-home-calendar .wpf-cal-feed {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: 1px solid #059669;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
  transition: transform 0.2s ease;
  white-space: nowrap;
}
.wpf-home-calendar .wpf-cal-feed i {
  color: #fff;
}
.wpf-home-calendar .wpf-cal-feed:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  color: #fff;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.wpf-home-calendar .wpf-cal-feed.is-pressed {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.15);
}

/* ---- 2) Push toggle switch (bell + switch) ------------------------- */
.wpf-push-toggle {
  --wpf-push-on: #2563eb;
  --wpf-push-off: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 10px;
  background: #fff;
  border: 1px solid var(--wpf-push-off);
  border-radius: 999px;
  cursor: pointer;
  color: var(--wpf-push-off);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.wpf-push-toggle:hover:not(.is-disabled):not(.is-loading) {
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.25);
}
.wpf-push-toggle > i {
  font-size: 13px;
  transition: color 0.2s ease;
}
.wpf-push-toggle__label {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}
.wpf-push-toggle__track {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.2s ease;
  margin-left: 2px;
}
.wpf-push-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ON state */
.wpf-push-toggle.is-on {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: var(--wpf-push-on);
  color: var(--wpf-push-on);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
}
.wpf-push-toggle.is-on > i { color: var(--wpf-push-on); }
.wpf-push-toggle.is-on .wpf-push-toggle__track {
  background: var(--wpf-push-on);
}
.wpf-push-toggle.is-on .wpf-push-toggle__thumb {
  transform: translateX(12px);
}

/* LOADING state (spinner dot) */
.wpf-push-toggle.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.wpf-push-toggle.is-loading::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wpf-push-spin 0.8s linear infinite;
}
@keyframes wpf-push-spin {
  to { transform: rotate(360deg); }
}

/* Larger variant for My Account master switch ----------------------- */
.wpf-push-toggle--large {
  height: 40px;
  padding: 0 12px 0 14px;
  gap: 8px;
  font-size: 13px;
}
.wpf-push-toggle--large > i { font-size: 15px; }
.wpf-push-toggle--large .wpf-push-toggle__label { font-size: 12px; }
.wpf-push-toggle--large .wpf-push-toggle__track {
  width: 32px;
  height: 16px;
}
.wpf-push-toggle--large .wpf-push-toggle__thumb {
  width: 12px;
  height: 12px;
}
.wpf-push-toggle--large.is-on .wpf-push-toggle__thumb {
  transform: translateX(16px);
}

/* Icon-only circular Push toggle (hero + upcoming match cards) ------ */
.wpf-push-toggle.wpf-push-toggle--icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 999px !important;
  flex: 0 0 38px !important;
  border-width: 1px !important;
}
.wpf-push-toggle.wpf-push-toggle--icon > i {
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wpf-push-toggle.wpf-push-toggle--icon .wpf-push-toggle__label { display: none !important; }
.wpf-push-toggle.wpf-push-toggle--icon .wpf-push-toggle__track {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.wpf-push-toggle.wpf-push-toggle--icon.is-on {
  background: linear-gradient(135deg, var(--wpf-gold) 0%, #e9ad00 100%) !important;
  border-color: var(--wpf-gold) !important;
  color: var(--wpf-navy-950) !important;
  box-shadow: 0 2px 10px rgba(246, 183, 0, 0.32) !important;
}
.wpf-push-toggle.wpf-push-toggle--icon.is-on > i { color: var(--wpf-navy-950) !important; }
.wpf-push-toggle.wpf-push-toggle--icon.is-loading::after {
  width: 10px;
  height: 10px;
  margin-left: -5px !important;
  left: 50% !important;
  top: auto !important;
  position: absolute !important;
}

/* ---- 3) Push flash status chip ---------------------------- */
.wpf-push-flash {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  line-height: 1.3;
}
.wpf-push-flash[data-kind="error"] {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

/* ---- 4) My Account Push notification rows: header + action inline row + tweaks --------------- */
.wpf-notif-row--header {
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 10px;
}
.wpf-notif-row--header .wpf-notif-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  color: #1e40af;
  letter-spacing: 0.03em;
}
.wpf-notif-row--header .wpf-notif-section-title i {
  color: #2563eb;
}
.wpf-notif-row--header .wpf-notif-text span {
  color: #475569;
  font-size: 12.5px;
}
.wpf-push-actions-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wpf-push-actions-inline .wpf-cal-feed {
  text-decoration: none;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: 1px solid #059669;
  transition: all 0.2s ease;
}
.wpf-push-actions-inline .wpf-cal-feed i { color: #fff; }
.wpf-push-actions-inline .wpf-cal-feed:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.wpf-push-actions-inline .wpf-cal-feed.is-pressed {
  transform: scale(0.97);
}

/* Push-specific notif rows (subtle blue left border accent) */
.wpf-notif-row--push {
  border-left: 3px solid #bfdbfe;
  padding-left: 14px;
  margin-left: 2px;
  transition: border-color 0.2s ease;
}
.wpf-notif-row--push:hover {
  border-left-color: #2563eb;
}
.wpf-notif-toggle--push {
  /* Same visuals as the inherited wpf-notif-toggle but when ON shows BLUE accent */
}
.wpf-notif-row--push .wpf-notif-toggle--push.is-on {
  background: #2563eb;
  border-color: #2563eb;
}
.wpf-notif-row--push .wpf-notif-toggle--push.is-on .wpf-notif-track {
  background: #2563eb;
}

/* Saved chip color variants for flash  */
#wpf-notif-saved.is-saved {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 700;
  display: inline-block;
  margin-left: 6px;
}
#wpf-notif-saved.is-error {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 700;
  display: inline-block;
  margin-left: 6px;
}

/* ---- 5) Mobile / Responsive tweaks for small hero + cards ----------------------- */
@media (max-width: 480px) {
  .wpf-push-toggle:not(.wpf-push-toggle--icon):not(.wpf-push-toggle--large) .wpf-push-toggle__label {
    display: none;
  }
  .wpf-push-toggle:not(.wpf-push-toggle--icon):not(.wpf-push-toggle--large) {
    padding: 0 6px 0 8px;
    height: 32px;
    gap: 4px;
  }
  .wpf-notif-row--header {
    padding: 12px 14px;
  }
  .wpf-push-actions-inline {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Subtle transition for all calendar wrap that gets new Subscribe + Push ---------- */
.wpf-home-calendar__actions {
  flex-wrap: wrap;
}
.wpf-home-calendar__actions > * + * {
  margin-left: 6px;
}
.wpf-home-calendar {
  padding-bottom: 2px;
}

/* ================================================================
 * [PHASE 3 ADDITIVE-ONLY] Player of the Month (POTM) Styles — WPF TOKEN-ALIGNED (v2)
 * All classes prefixed "wpf-potm-*". Design matches Banani dashboard:
 *   Colors: --wpf-gold, --wpf-navy-950/900/800, --wpf-success, --wpf-danger, --wpf-muted
 *   Radii : --wpf-radius (8px), --wpf-radius-sm (6px), modal 12px
 *   Shadow: --wpf-shadow, --wpf-shadow-lg
 *   Fonts : --wpf-font-head (Space Grotesk), --wpf-font-body (Inter)
 * ================================================================ */

/* ========== 1. POTM Hero Widget (fixed bottom-right, dismissable) ========== */
.wpf-potm-widget {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 998;
  width: 240px;
  background: linear-gradient(135deg, var(--wpf-gold) 0%, var(--wpf-sand) 100%);
  color: var(--wpf-navy-950);
  border: 1px solid rgba(209, 154, 0, .28);
  border-radius: 12px;
  box-shadow: var(--wpf-shadow-lg);
  padding: 14px 16px;
  font-family: var(--wpf-font-body);
  animation: wpf-potm-slide-in 520ms cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
@keyframes wpf-potm-slide-in {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.wpf-potm-widget::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 15% 10%, rgba(255,255,255,.5) 0%, transparent 55%),
                    radial-gradient(circle at 90% 90%, rgba(255,255,255,.22) 0%, transparent 55%);
  pointer-events: none;
}
.wpf-potm-widget__head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.wpf-potm-widget__title {
  font-family: var(--wpf-font-head);
  font-size: 10px;
  letter-spacing: 2.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wpf-navy-900);
  opacity: .9;
}
.wpf-potm-widget__month {
  font-family: var(--wpf-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: rgba(7,24,39,.1);
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.wpf-potm-widget__dismiss {
  position: absolute;
  top: -4px; right: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(7,24,39,.12);
  color: var(--wpf-navy-950);
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
  opacity: .82;
  transition: opacity .15s, background .15s;
}
.wpf-potm-widget__dismiss:hover { opacity: 1; background: rgba(7,24,39,.22); }

.wpf-potm-widget__body {
  position: relative;
  display: flex; gap: 10px; align-items: center;
}
.wpf-potm-widget__avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wpf-font-head);
  font-weight: 700; color: var(--wpf-gold-hover);
  font-size: 18px;
  box-shadow: 0 0 0 2px #fff, var(--wpf-shadow);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.wpf-potm-widget__info { flex: 1; min-width: 0; }
.wpf-potm-widget__name {
  font-family: var(--wpf-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--wpf-navy-950);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpf-potm-widget__stats {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wpf-navy-900);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.wpf-potm-widget__stat {
  background: rgba(7,24,39,.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--wpf-font-head);
  letter-spacing: .5px;
}
.wpf-potm-widget__empty {
  position: relative;
  font-size: 12px;
  padding: 10px 6px 6px;
  color: var(--wpf-navy-900);
  opacity: .9;
  text-align: center;
}

/* ========== 2. POTM Profile Badge (inline, next to username) ========== */
.wpf-potm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: linear-gradient(135deg, var(--wpf-gold), var(--wpf-sand));
  color: var(--wpf-navy-950);
  border-radius: 99px;
  border: 1px solid rgba(209,154,0,.28);
  font-family: var(--wpf-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: var(--wpf-shadow);
  vertical-align: middle;
  margin-left: 6px;
  animation: wpf-potm-shimmer 2.6s ease-in-out infinite;
}
.wpf-potm-badge::before { content: "🏆 "; }
@keyframes wpf-potm-shimmer {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.12); }
}

/* ========== 3. Vote Chips (Recent Results list items, right-aligned) ========== */
li.wpf-result-item {
  position: relative;
  z-index: 1;
}
li.wpf-result-item > .wpf-result-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.wpf-potm-vote-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  padding: 4px 12px !important;
  min-width: 96px !important;
  min-height: 26px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  font-family: var(--wpf-font-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
  cursor: default !important;
  text-decoration: none !important;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, border-color .14s ease !important;
  box-shadow: var(--wpf-shadow) !important;
}
.wpf-potm-vote-chip__icon { line-height: 1 !important; display: inline-flex !important; align-items: center !important; }

/* OPEN (gold — primary CTA) */
li.wpf-result-item .wpf-potm-vote-chip--open {
  cursor: pointer !important;
  background: linear-gradient(135deg, var(--wpf-gold) 0%, var(--wpf-gold-hover) 100%) !important;
  color: var(--wpf-navy-950) !important;
  border-color: rgba(209,154,0,.42) !important;
}
li.wpf-result-item .wpf-potm-vote-chip--open:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 3px 10px rgba(246,183,0,.28) !important;
}
li.wpf-result-item .wpf-potm-vote-chip--open:active { transform: translateY(0) !important; }

/* VOTED (success green, clickable to re-edit within 48h) */
li.wpf-result-item .wpf-potm-vote-chip--voted {
  cursor: pointer !important;
  background: var(--wpf-success) !important;
  color: #fff !important;
  border-color: rgba(76,175,122,.35) !important;
}
li.wpf-result-item .wpf-potm-vote-chip--voted:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
}
li.wpf-result-item .wpf-potm-vote-chip--voted:active { transform: translateY(0) !important; }

/* CLOSED (muted grey) */
li.wpf-result-item .wpf-potm-vote-chip--closed {
  background: var(--wpf-border) !important;
  color: var(--wpf-muted) !important;
  border-color: rgba(107,122,141,.28) !important;
  opacity: .85 !important;
}

/* LOCKED / INELIGIBLE (danger red) */
li.wpf-result-item .wpf-potm-vote-chip--locked {
  background: rgba(224,92,104,.10) !important;
  color: var(--wpf-danger) !important;
  border-color: rgba(224,92,104,.28) !important;
}

/* ========== 4. Vote Modal — WPF-aligned (matches .wpf-modal look & feel) ========== */
.wpf-potm-modal-backdrop {
  position: fixed; inset: 0;
  background: var(--wpf-modal-backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: wpf-potm-fade-in .2s ease;
}
@keyframes wpf-potm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.wpf-potm-modal {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  background: var(--wpf-card);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(7,24,39,.28);
  overflow: hidden;
  display: flex; flex-direction: column;
  font-family: var(--wpf-font-body);
  color: var(--wpf-text);
  animation: wpf-potm-pop .3s cubic-bezier(.2,.8,.2,1.1);
}
@keyframes wpf-potm-pop { from { transform: scale(.96) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

.wpf-potm-modal__head {
  background: var(--wpf-navy-950);
  border-bottom: 1px solid var(--wpf-navy-700);
  padding: 16px 22px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.wpf-potm-modal__title {
  font-family: var(--wpf-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.wpf-potm-modal__subtitle {
  font-family: var(--wpf-font-body);
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
}
.wpf-potm-modal__close {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  opacity: 1;
  font-weight: 300;
  width: 30px; height: 30px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .15s, background .15s;
  border-radius: 4px;
}
.wpf-potm-modal__close:hover { color: var(--wpf-gold); background: rgba(255,255,255,.08); }

.wpf-potm-modal__body {
  padding: 16px 22px 20px;
  overflow-y: auto;
  flex: 1;
}
.wpf-potm-modal__rules {
  background: var(--wpf-cream);
  border-left: 3px solid var(--wpf-gold);
  padding: 10px 12px;
  border-radius: var(--wpf-radius-sm);
  font-size: 12.5px;
  color: var(--wpf-navy-900);
  margin-bottom: 14px;
  line-height: 1.55;
}
.wpf-potm-modal__rules b { color: var(--wpf-navy-950); font-weight: 700; }

/* Rank rows (1st/2nd/3rd) */
.wpf-potm-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wpf-border);
}
.wpf-potm-rank-row:last-of-type { border-bottom: 0; }
.wpf-potm-rank {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
  color: #fff;
  box-shadow: var(--wpf-shadow);
}
.wpf-potm-rank--1 { background: linear-gradient(135deg, var(--wpf-gold), var(--wpf-gold-hover)); color: var(--wpf-navy-950); }
.wpf-potm-rank--2 { background: linear-gradient(135deg, #b0b8c1, #85919e); }
.wpf-potm-rank--3 { background: linear-gradient(135deg, #d19a66, #a9794b); }

/* Select dropdown (WPF-style form control) */
.wpf-potm-select {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: var(--wpf-surface);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius-sm);
  font-family: var(--wpf-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wpf-text);
  cursor: pointer;
  outline: none;
  height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
.wpf-potm-select:focus {
  border-color: var(--wpf-gold);
  box-shadow: 0 0 0 3px rgba(246,183,0,.18);
}
.wpf-potm-select option { padding: 4px; }
.wpf-potm-select[data-error="1"] {
  border-color: var(--wpf-danger);
  box-shadow: 0 0 0 3px rgba(224,92,104,.18);
  animation: wpf-potm-shake .34s ease;
}
@keyframes wpf-potm-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Footer (actions + message) */
.wpf-potm-modal__foot {
  padding: 12px 22px;
  border-top: 1px solid var(--wpf-border);
  background: var(--wpf-page);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.wpf-potm-modal__msg {
  font-size: 12.5px;
  font-weight: 600;
  min-height: 16px;
  font-family: var(--wpf-font-body);
}
.wpf-potm-modal__msg--err { color: var(--wpf-danger); }
.wpf-potm-modal__msg--ok  { color: var(--wpf-success); }

.wpf-potm-btn {
  border: 1px solid transparent;
  padding: 8px 18px;
  border-radius: var(--wpf-radius-sm);
  font-family: var(--wpf-font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .14s, filter .14s, opacity .14s, background .14s, border-color .14s, color .14s;
}
.wpf-potm-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.wpf-potm-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.wpf-potm-btn--primary {
  background: linear-gradient(135deg, var(--wpf-gold) 0%, var(--wpf-gold-hover) 100%);
  color: var(--wpf-navy-950);
  border-color: rgba(209,154,0,.42);
  box-shadow: 0 3px 10px rgba(246,183,0,.22);
}
.wpf-potm-btn--secondary {
  background: var(--wpf-navy-800);
  border-color: var(--wpf-navy-800);
  color: #fff;
}
.wpf-potm-btn--secondary:hover:not(:disabled) { background: var(--wpf-navy-700); border-color: var(--wpf-navy-700); filter: none; }

/* ========== 5. Voting History Card (My Account) — wpf-card aligned ========== */
.wpf-potm-history {
  margin-top: 28px;
  background: var(--wpf-card);
  border: 1px solid var(--wpf-border);
  border-radius: var(--wpf-radius);
  box-shadow: var(--wpf-shadow);
  overflow: hidden;
  font-family: var(--wpf-font-body);
  color: var(--wpf-text);
}
.wpf-potm-history__head {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--wpf-navy-900) 0%, var(--wpf-navy-800) 100%);
  border-bottom: 1px solid var(--wpf-navy-700);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.wpf-potm-history__title {
  font-family: var(--wpf-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.wpf-potm-history__standing {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.wpf-potm-chip {
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,.14);
  font-family: var(--wpf-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}
.wpf-potm-chip--rank {
  background: var(--wpf-gold);
  color: var(--wpf-navy-950);
}

.wpf-potm-history__empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--wpf-muted);
}
.wpf-potm-history__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.wpf-potm-history__item {
  padding: 11px 18px;
  border-bottom: 1px solid var(--wpf-border);
  display: flex; justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.wpf-potm-history__item:last-child { border-bottom: 0; }
.wpf-potm-history__match {
  font-weight: 600;
  color: var(--wpf-text);
  flex: 1;
  min-width: 0;
}
.wpf-potm-history__match small {
  display: block;
  color: var(--wpf-muted);
  font-weight: 400;
  margin-top: 2px;
  font-size: 11.5px;
  letter-spacing: .01em;
}
.wpf-potm-history__votes {
  display: flex; gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wpf-potm-vote-pill {
  font-family: var(--wpf-font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.wpf-potm-vote-pill--1 { background: linear-gradient(135deg, var(--wpf-gold), var(--wpf-gold-hover)); color: var(--wpf-navy-950); }
.wpf-potm-vote-pill--2 { background: linear-gradient(135deg, #b0b8c1, #85919e); }
.wpf-potm-vote-pill--3 { background: linear-gradient(135deg, #d19a66, #a9794b); }

/* ========== 6. Responsive ========== */
@media (max-width: 480px) {
  .wpf-potm-widget {
    right: 10px;
    bottom: 64px;
    width: calc(100% - 20px);
    max-width: 360px;
  }
  .wpf-potm-modal { border-radius: var(--wpf-radius); }
  .wpf-potm-modal__head { padding: 14px 18px; }
  .wpf-potm-modal__body { padding: 14px 18px; }
  .wpf-potm-modal__foot { padding: 12px 18px; }
  .wpf-potm-history__item { flex-direction: column; align-items: flex-start; }
  .wpf-potm-history__votes { justify-content: flex-start; width: 100%; }
  .wpf-potm-rank-row { flex-wrap: wrap; }
  li.wpf-result-item .wpf-potm-vote-chip {
    min-width: 92px !important;
    padding: 4px 10px !important;
    font-size: 10.5px !important;
  }
}


/* ================================================================
[PHASE 4 ADDITIVE-ONLY] Predictions + Leaderboard Styles
Last-wins token-aligned CSS beats legacy cascade only.
Also index.php + my-account.php inject inline JS style[data-pred-token-override="1"]
for 100% guarantee on cached files — but keep on-disk rules here for production cache-clear reference.
================================================================ */

/* ========== SECTION 1 — CHIPS (.wpf-pred-chip) 5 states ========== */
.wpf-pred-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  min-width: 116px;
  padding: 8px 12px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 1px 2px rgba(7,24,39,.04), 0 8px 24px rgba(7,24,39,.05);
  cursor: pointer;
  border: none;
}
.wpf-pred-chip--open {
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(246,183,0,.28);
}
.wpf-pred-chip--voted {
  background: #4CAF7A;
  color: #fff;
  cursor: pointer;
}
.wpf-pred-chip--closed {
  background: #E2E6EA;
  color: #6B7A8D;
  opacity: .85;
  cursor: default;
}
.wpf-pred-chip--locked {
  background: rgba(224,92,104,.10);
  color: #E05C68;
  cursor: not-allowed;
}
.wpf-pred-chip--not-yet {
  background: rgba(30,52,80,.08);
  color: #1E3450;
  cursor: default;
}
.wpf-pred-chip:not(.wpf-pred-chip--closed):not(.wpf-pred-chip--locked):not(.wpf-pred-chip--not-yet):hover {
  transform: translateY(-1px);
}

/* ========== SECTION 2 — LEADERBOARD WIDGET (.wpf-pred-widget) ========== */
.wpf-pred-widget {
  position: fixed;
  right: 16px;
  bottom: 312px;
  width: 280px;
  z-index: 997;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(7,24,39,.18);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(246,183,0,.35);
}
.wpf-pred-widget__head {
  background: linear-gradient(135deg,#071827,#1E3450);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wpf-pred-widget__title {
  color: #fff;
  font-family: "Space Grotesk";
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}
.wpf-pred-widget__close {
  color: #fff;
  opacity: .85;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.wpf-pred-widget__close:hover {
  background: rgba(246,183,0,.18);
  color: #F6B700;
}
.wpf-pred-widget__body {
  padding: 10px 12px;
  max-height: 280px;
  overflow-y: auto;
}
.wpf-pred-widget__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 6px;
  font-family: Inter;
  font-size: 12.5px;
  color: #071827;
}
.wpf-pred-widget__row:nth-child(even) {
  background: rgba(7,24,39,.02);
}
.wpf-pred-widget__row.me {
  border-left: 3px solid #F6B700;
  background: rgba(246,183,0,.08);
  font-weight: 600;
  padding-left: 6px;
}
.wpf-pred-widget__rank {
  min-width: 24px;
  text-align: center;
  font-family: "Space Grotesk";
  font-weight: 700;
  font-size: 11px;
}
.wpf-pred-widget__rank.top1 {
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  border-radius: 4px;
  padding: 2px 4px;
}
.wpf-pred-widget__rank.top2 {
  background: #9FAEB9;
  color: #fff;
  border-radius: 4px;
  padding: 2px 4px;
}
.wpf-pred-widget__rank.top3 {
  background: #B97844;
  color: #fff;
  border-radius: 4px;
  padding: 2px 4px;
}
.wpf-pred-widget__name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpf-pred-widget__points {
  font-family: "Space Grotesk";
  font-weight: 700;
  color: #071827;
  font-size: 12px;
}
.wpf-pred-widget__points small {
  font-weight: 400;
  color: #6B7A8D;
  font-size: 10px;
}
.wpf-pred-widget__footer {
  padding: 8px 14px;
  background: #F3F5F7;
  border-top: 1px solid #E2E6EA;
  font-size: 11px;
  color: #6B7A8D;
  text-align: center;
}

/* ========== SECTION 3 — MODAL (.wpf-pred-modal) ========== */
.wpf-pred-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5,18,30,.78);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.wpf-pred-modal {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(7,24,39,.18);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
}
.wpf-pred-modal__head {
  padding: 14px 18px;
  background: linear-gradient(135deg,#071827,#0D1B2A);
  border-bottom: 1px solid rgba(246,183,0,.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wpf-pred-modal__title {
  color: #fff;
  font-family: "Space Grotesk";
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.wpf-pred-modal__close {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 4px;
}
.wpf-pred-modal__close:hover {
  background: rgba(246,183,0,.18);
  color: #F6B700;
}
.wpf-pred-modal__body {
  padding: 18px;
}
.wpf-pred-modal__meta {
  display: flex;
  justify-content: space-between;
  font-family: Inter;
  font-size: 13px;
  color: #6B7A8D;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E2E6EA;
}
.wpf-pred-modal__rules {
  background: #FFF9EC;
  border-left: 3px solid #F6B700;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.wpf-pred-modal__rules-title {
  font-weight: 600;
  color: #071827;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.wpf-pred-modal__rules li {
  color: #071827;
  font-size: 12.5px;
  padding: 2px 0;
}
.wpf-pred-modal__score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.wpf-pred-modal__score-team-col {
  text-align: center;
}
.wpf-pred-modal__score-label {
  font-family: "Space Grotesk";
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #071827;
  margin-bottom: 6px;
}
.wpf-pred-modal__score-input {
  width: 100%;
  max-width: 140px;
  margin: 0 auto;
  height: 44px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #E2E6EA;
  color: #071827;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  font-family: "Space Grotesk";
}
.wpf-pred-modal__score-input:focus {
  outline: none;
  border-color: #F6B700;
  box-shadow: 0 0 0 3px rgba(246,183,0,.22);
}
.wpf-pred-modal__score-vs {
  text-align: center;
  font-family: "Space Grotesk";
  font-size: 20px;
  font-weight: 700;
  color: #1E3450;
}
.wpf-pred-modal__countdown {
  text-align: center;
  margin-bottom: 14px;
  font-size: 12px;
  color: #6B7A8D;
  padding: 5px;
  background: rgba(30,52,80,.05);
  border-radius: 6px;
}
.wpf-pred-modal__msg {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  margin-bottom: 12px;
}
.wpf-pred-modal__msg.info {
  background: rgba(246,183,0,.10);
  color: #0D1B2A;
  border-left: 3px solid #F6B700;
}
.wpf-pred-modal__msg.error {
  background: rgba(224,92,104,.10);
  color: #E05C68;
  border-left: 3px solid #E05C68;
}
.wpf-pred-modal__footer {
  padding: 14px 18px;
  background: #F3F5F7;
  border-top: 1px solid #E2E6EA;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.wpf-pred-modal__btn {
  height: 40px;
  border-radius: 8px;
  padding: 0 18px;
  font-family: "Space Grotesk";
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: none;
  cursor: pointer;
  flex: 1;
}
.wpf-pred-modal__btn--secondary {
  background: #1E3450;
  color: #fff;
}
.wpf-pred-modal__btn--secondary:hover {
  background: #0D1B2A;
}
.wpf-pred-modal__btn--primary {
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  box-shadow: 0 2px 6px rgba(246,183,0,.30);
}
.wpf-pred-modal__btn--primary:hover {
  box-shadow: 0 4px 14px rgba(246,183,0,.40);
}

/* ========== SECTION 4 — HISTORY CARD (My-Account .wpf-pred-history) ========== */
.wpf-pred-history {
  margin-top: 18px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(7,24,39,.04), 0 8px 24px rgba(7,24,39,.05);
  border: 1px solid #E2E6EA;
  overflow: hidden;
}
.wpf-pred-history__head {
  background: linear-gradient(135deg,#0D1B2A,#1E3450);
  padding: 12px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wpf-pred-history__title {
  font-family: "Space Grotesk";
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #fff;
}
.wpf-pred-history__standing {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wpf-pred-history__chip {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,.10);
  color: #fff;
}
.wpf-pred-history__chip.rank {
  background: linear-gradient(135deg,#F6B700,#F4D06F);
  color: #071827;
}
.wpf-pred-history__empty {
  padding: 18px;
  text-align: center;
  color: #6B7A8D;
  font-size: 13.5px;
}
.wpf-pred-history__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wpf-pred-history__item {
  padding: 12px 16px;
  border-bottom: 1px solid #E2E6EA;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wpf-pred-history__item:last-child {
  border-bottom: none;
}
.wpf-pred-history__item:hover {
  background: #F3F5F7;
}
.wpf-pred-history__match {
  flex: 1;
  font-size: 13px;
  color: #071827;
}
.wpf-pred-history__match small {
  display: block;
  color: #6B7A8D;
  font-size: 11.5px;
  margin-top: 2px;
}
.wpf-pred-history__votes {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.wpf-pred-history__pill {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.wpf-pred-history__pill.pred {
  background: rgba(30,52,80,.08);
  color: #1E3450;
}
.wpf-pred-history__pill.final {
  background: rgba(76,175,122,.10);
  color: #0D1B2A;
  font-weight: 700;
}
.wpf-pred-history__pill.pending {
  background: rgba(244,208,111,.30);
  color: #071827;
}
.wpf-pred-history__pill.points-3 {
  background: linear-gradient(135deg,#4CAF7A,#45a36f);
  color: #fff;
}
.wpf-pred-history__pill.points-1 {
  background: linear-gradient(135deg,#1E3450,#0D1B2A);
  color: #fff;
}
.wpf-pred-history__pill.points-0 {
  background: #E2E6EA;
  color: #6B7A8D;
}
.wpf-pred-history__pill.exact-tag {
  margin-right: 2px;
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  padding: 2px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ========== SECTION 5 — Responsive (< 480px) ========== */
@media (max-width: 480px) {
  .wpf-pred-widget {
    width: calc(100% - 32px);
    right: 16px;
    bottom: 270px;
    max-height: 40vh;
    overflow-y: auto;
  }
  .wpf-pred-chip {
    min-width: auto;
    padding: 6px 8px;
    font-size: 10.5px;
  }
  .wpf-pred-modal__score-input {
    height: 40px;
    font-size: 18px;
  }
}

/* ========== SECTION 6 — dismiss/hide ========== */
.wpf-pred-widget.is-dismissed {
  display: none !important;
}

/* ==========================================================
 * WPF PHASE 6 — Leaderboard + 1vs1 Duel
 * Anchor: LAST LINE OF CSS (9174 END — Additive only)
 * Design tokens: sharp 6-8px, no emoji, navy/gold/sand tokens
 * ======================================================== */

/* -------- STATISTICS PAGE TABS (expanded: Goals / WinLoss / LB / Duel) -------- */
.wpf-stats-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.wpf-page-title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  color: #071827;
  font-size: 22px;
  letter-spacing: 0.3px;
  margin: 0;
}
.wpf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  background: #F3F5F7;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
}
.wpf-tab {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #6B7A8D;
  cursor: pointer;
  transition: all .16s ease;
}
.wpf-tab:hover { color: #071827; background: rgba(7,24,39,.04); }
.wpf-tab.is-active {
  background: linear-gradient(135deg,#071827,#1E3450);
  color: #F6B700;
  box-shadow: 0 1px 3px rgba(7,24,39,.2);
}
.wpf-tab-panel { display: none; }
.wpf-tab-panel.is-active { display: block; }

/* -------- TOOLBAR (period filter + search + actions) -------- */
.wpf-lb-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
@media (max-width: 960px) {
  .wpf-lb-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}
.wpf-lb-toolbar label {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #6B7A8D;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wpf-lb-toolbar select,
.wpf-lb-toolbar input[type="text"] {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E2E6EA;
  border-radius: 6px;
  background: #fff;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: #071827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wpf-lb-toolbar select:focus,
.wpf-lb-toolbar input[type="text"]:focus {
  border-color: #F6B700;
  box-shadow: 0 0 0 2px rgba(246,183,0,.18);
}
.wpf-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(7,24,39,.15);
  background: linear-gradient(135deg,#071827,#1E3450);
  color: #F6B700;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow: 0 1px 2px rgba(7,24,39,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wpf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(7,24,39,.18);
}
.wpf-btn--green {
  background: linear-gradient(135deg,#4CAF7A,#3E9767);
  border-color: rgba(76,175,122,.5);
  color: #fff;
}
.wpf-btn--ghost {
  background: #fff;
  color: #071827;
  border: 1px solid #E2E6EA;
}
.wpf-btn--ghost:hover { background: #F3F5F7; }
.wpf-btn--gold {
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  border-color: rgba(246,183,0,.55);
}

/* -------- RANK DOTS (square swatches, 7x7 — same as MyAccount P5) -------- */
.rank-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
}
.rank-dot--g1 { background: linear-gradient(135deg,#F6B700,#E5A600); }
.rank-dot--g2 { background: linear-gradient(135deg,#C9D3DA,#9FAEB9); }
.rank-dot--g3 { background: linear-gradient(135deg,#D99761,#B97844); }
.rank-dot--rest { background: #E2E6EA; }

/* -------- DIMENSION CARDS (7 lb dimension cards on leaderboard) -------- */
.wpf-lb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.wpf-lb-card {
  grid-column: span 6;
  background: #fff;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(7,24,39,.05);
}
.wpf-lb-card--wide { grid-column: span 12; }
@media (max-width: 960px) {
  .wpf-lb-card { grid-column: span 12; }
}
.wpf-lb-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg,#071827,#0D1B2A);
  border-bottom: 1px solid rgba(246,183,0,.2);
}
.wpf-lb-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: #F6B700;
}
.wpf-lb-card__meta {
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  color: rgba(255,255,255,.55);
  letter-spacing: 1px;
}
.wpf-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 12.5px;
}
.wpf-lb-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #6B7A8D;
  background: #F3F5F7;
  border-bottom: 1px solid #E2E6EA;
  white-space: nowrap;
}
.wpf-lb-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(226,230,234,.55);
  color: #071827;
  vertical-align: middle;
}
.wpf-lb-table tbody tr:last-child td { border-bottom: 0; }
.wpf-lb-table tbody tr:nth-child(even) td { background: rgba(7,24,39,.015); }
.wpf-lb-table tbody tr.is-me td {
  background: rgba(246,183,0,.07) !important;
  border-left: 3px solid #F6B700;
  padding-left: 9px;
  font-weight: 600;
}
.wpf-lb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  background: #F3F5F7;
  border-radius: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #6B7A8D;
  letter-spacing: 0.5px;
}
.wpf-lb-rank.top-1 {
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
}
.wpf-lb-rank.top-2 {
  background: linear-gradient(135deg,#C9D3DA,#9FAEB9);
  color: #071827;
}
.wpf-lb-rank.top-3 {
  background: linear-gradient(135deg,#D99761,#B97844);
  color: #fff;
}
.wpf-lb-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wpf-lb-name img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  background: #F3F5F7;
  border: 1px solid #E2E6EA;
}
.wpf-lb-name small {
  display: block;
  color: #6B7A8D;
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 1px;
}
.wpf-lb-val {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #071827;
  letter-spacing: 0.2px;
}
.wpf-lb-val .unit {
  font-weight: 500;
  color: #6B7A8D;
  font-size: 10.5px;
  margin-left: 3px;
  letter-spacing: 0;
}

/* -------- STANDING CHIPS (two-part lbl-sml + val — P5 pattern) -------- */
.chip-stg {
  display: inline-flex;
  align-items: center;
  border: 1px solid #E2E6EA;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  height: 24px;
}
.chip-stg .lbl-sml {
  padding: 0 8px;
  background: #F3F5F7;
  color: #6B7A8D;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  border-right: 1px solid #E2E6EA;
}
.chip-stg .val {
  padding: 0 9px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  color: #071827;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  height: 24px;
  display: inline-flex;
  align-items: center;
}
.chip-stg.chip--gold .lbl-sml {
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  border-right: 0;
}
.chip-stg.chip--gold .val { background: rgba(246,183,0,.08); color: #071827; }

/* -------- DUEL SECTION (1v1 head-to-head) -------- */
.wpf-duel-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 60px 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  background: #fff;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .wpf-duel-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wpf-duel-toolbar {
    grid-template-columns: 1fr;
  }
}
.wpf-duel-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2.5px;
  color: #F6B700;
  background: linear-gradient(135deg,#071827,#1E3450);
  border-radius: 8px;
}
.wpf-select-wrap label {
  display: block;
  margin-bottom: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #6B7A8D;
}
.wpf-select-wrap select,
.wpf-select-wrap input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  background: #fff;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  color: #071827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.wpf-select-wrap select:focus,
.wpf-select-wrap input:focus {
  border-color: #F6B700;
  box-shadow: 0 0 0 2px rgba(246,183,0,.18);
}

/* DUEL: Winner banner */
.wpf-duel-winner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 14px;
  padding: 10px 20px;
  background: linear-gradient(135deg,#F6B700,#E5A600);
  color: #071827;
  border-radius: 6px;
  max-width: 520px;
  box-shadow: 0 8px 18px rgba(246,183,0,.25);
}
.wpf-duel-winner .chip-stg {
  background: transparent;
  border-color: rgba(7,24,39,.35);
}
.wpf-duel-winner .chip-stg .lbl-sml {
  background: rgba(7,24,39,.12);
  color: #071827;
  border-right-color: rgba(7,24,39,.35);
}
.wpf-duel-winner .chip-stg .val { background: transparent; }

/* DUEL: two side-by-side player cards */
.wpf-duel-cards {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .wpf-duel-cards { grid-template-columns: 1fr; }
}
.wpf-duel-card {
  background: #fff;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(7,24,39,.05);
}
.wpf-duel-card.is-winner {
  border-color: rgba(246,183,0,.55);
  box-shadow: 0 8px 24px rgba(246,183,0,.14);
}
.wpf-duel-card__head {
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg,#071827,#0D1B2A);
  color: #fff;
}
.wpf-duel-card.is-winner .wpf-duel-card__head {
  background: linear-gradient(135deg,#0D1B2A,#1E3450);
  border-bottom: 2px solid #F6B700;
}
.wpf-duel-avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
}
.wpf-duel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wpf-duel-card.is-winner .wpf-duel-avatar { border-color: #F6B700; }
.wpf-duel-meta { flex: 1; min-width: 0; }
.wpf-duel-name {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.2px;
  margin-bottom: 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.wpf-duel-sub {
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wpf-duel-card__body { padding: 12px 14px; }

/* DUEL: 12 category rows */
.wpf-duel-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(226,230,234,.55);
}
.wpf-duel-row:last-child { border-bottom: 0; }
.wpf-duel-row__label {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #6B7A8D;
}
.wpf-duel-row__bar {
  position: relative;
  height: 14px;
  background: #F3F5F7;
  border-radius: 6px;
  overflow: hidden;
}
.wpf-duel-row__bar span {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;
}
.wpf-duel-row__bar .u1 {
  left: 0;
  background: linear-gradient(90deg,#1E3450,#071827);
}
.wpf-duel-row__bar .u2 {
  right: 0;
  background: linear-gradient(270deg,#E5A600,#F6B700);
}
.wpf-duel-row__v1,
.wpf-duel-row__v2 {
  display: inline-flex;
  align-items: center;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #071827;
  border-radius: 6px;
  padding: 3px 8px;
}
.wpf-duel-row__v1 { justify-content: flex-end; }
.wpf-duel-row.is-winner-u1 .wpf-duel-row__v1 { background: rgba(30,52,80,.12); color: #071827; }
.wpf-duel-row.is-winner-u2 .wpf-duel-row__v2 { background: rgba(246,183,0,.15); color: #071827; }

/* DUEL: Head-to-head meetings table */
.wpf-duel-h2h {
  background: #fff;
  border: 1px solid #E2E6EA;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(7,24,39,.05);
}
.wpf-duel-h2h__head {
  padding: 12px 14px;
  background: #F3F5F7;
  border-bottom: 1px solid #E2E6EA;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wpf-duel-h2h__title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #071827;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wpf-duel-h2h__tally {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wpf-duel-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 12.5px;
}
.wpf-duel-table th {
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #6B7A8D;
  border-bottom: 1px solid #E2E6EA;
}
.wpf-duel-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(226,230,234,.55);
  color: #071827;
}
.wpf-duel-table tr:last-child td { border-bottom: 0; }
.wpf-duel-table tr:nth-child(even) td { background: rgba(7,24,39,.015); }

.wpf-empty {
  padding: 24px;
  text-align: center;
  color: #6B7A8D;
  font-family: Inter, sans-serif;
  font-size: 13px;
}

/* Home widget LB mini (P6-5) */
.wpf-lbmini {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 290px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(246,183,0,.35);
  box-shadow: 0 18px 50px rgba(7,24,39,.16);
  overflow: hidden;
  z-index: 996;
}
.wpf-lbmini__head {
  padding: 10px 14px;
  background: linear-gradient(135deg,#071827,#1E3450);
  color: #F6B700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wpf-lbmini__title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.wpf-lbmini__close {
  color: #fff;
  opacity: .8;
  font-size: 16px;
  cursor: pointer;
}
.wpf-lbmini__close:hover { opacity: 1; color: #F6B700; }
.wpf-lbmini__row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  font-family: Inter, sans-serif;
  font-size: 12px;
}
.wpf-lbmini__row:nth-child(even) { background: rgba(7,24,39,.02); }
.wpf-lbmini__rank {
  text-align: center;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #6B7A8D;
}
.wpf-lbmini__row.top-1 .wpf-lbmini__rank { color: #071827; background: linear-gradient(135deg,#F6B700,#E5A600); border-radius: 4px; padding: 2px 3px; }
.wpf-lbmini__row.top-2 .wpf-lbmini__rank { color: #071827; background: linear-gradient(135deg,#C9D3DA,#9FAEB9); border-radius: 4px; padding: 2px 3px; }
.wpf-lbmini__row.top-3 .wpf-lbmini__rank { color: #fff; background: linear-gradient(135deg,#D99761,#B97844); border-radius: 4px; padding: 2px 3px; }
.wpf-lbmini__name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #071827; font-weight: 500; }
.wpf-lbmini__pts {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: #071827;
}
.wpf-lbmini__footer {
  padding: 8px 12px;
  background: #F3F5F7;
  border-top: 1px solid #E2E6EA;
  font-size: 10.5px;
  color: #6B7A8D;
  text-align: center;
  font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.wpf-lbmini__footer a {
  color: #F6B700;
  font-weight: 700;
  text-decoration: none;
}
.wpf-lbmini.is-dismissed { display: none !important; }

/* ============================================================
   PHASE 6 RESPONSIVE OVERHAUL — Tablet + Mobile + Small Mobile
   Breakpoints: 1024 (Tablet), 768 (Mobile), 480 (Small Mobile)
   Fixes: every P6 component scales gracefully below desktop
   ========================================================== */

/* -------- TABLET (≤1024px) -------- */
@media (max-width: 1024px) {
  /* Tabs: reduce min-width so they still fit 4 across */
  .wpf-tab { min-width: 90px; padding: 9px 12px; font-size: 11px; }

  /* Leaderboard Toolbar: period+search on row1, refresh+goduel on row2 */
  .wpf-lb-toolbar { grid-template-columns: 1fr 1fr; }

  /* Leaderboard grid: wide cards 100%, rest 50/50 */
  .wpf-lb-grid { gap: 12px; }
  .wpf-lb-card { grid-column: span 6; }

  /* Tables: slightly smaller font + padding */
  .wpf-lb-table { font-size: 11.5px; }
  .wpf-lb-table thead th, .wpf-lb-table tbody td { padding: 8px 10px; }
  .wpf-lb-table thead th { font-size: 9.5px; letter-spacing: 1.1px; }
  .wpf-duel-table { font-size: 11.5px; }
  .wpf-duel-table th, .wpf-duel-table td { padding: 8px 10px; }
  .wpf-duel-table th { font-size: 9.5px; letter-spacing: 1.1px; }

  /* Duel winner banner */
  .wpf-duel-winner { max-width: 100%; margin: 8px 0 12px; padding: 9px 14px; }

  /* Duel cards: 3-col (u1 / VS / u2) — make VS 44px instead of 56px */
  .wpf-duel-cards { grid-template-columns: 1fr 16px 1fr; gap: 10px; }
  .wpf-duel-avatar { width: 44px; height: 44px; }
  .wpf-duel-name { font-size: 13.5px; }
  .wpf-duel-sub { font-size: 10px; letter-spacing: 0.5px; }

  /* Duel rows: smaller font */
  .wpf-duel-row { padding: 8px 0; }
  .wpf-duel-row__label { font-size: 9.5px; letter-spacing: 0.9px; }
  .wpf-duel-row__v1, .wpf-duel-row__v2 { font-size: 11.5px; padding: 2px 6px; }
  .wpf-duel-row__bar { height: 12px; }

  /* Duel h2h head: allow wrap */
  .wpf-duel-h2h__head { flex-wrap: wrap; gap: 8px; }

  /* Chips: slightly smaller */
  .chip-stg { height: 22px; }
  .chip-stg .lbl-sml { font-size: 9px; letter-spacing: 1px; height: 22px; padding: 0 7px; }
  .chip-stg .val { font-size: 10.5px; height: 22px; padding: 0 8px; }
}

/* -------- MOBILE (≤768px) — main phones portrait + small tablets landscape -------- */
@media (max-width: 768px) {
  /* Page title: smaller */
  .wpf-page-title { font-size: 18px; }

  /* TABS: 2x2 GRID — NO horizontal scroll (was hiding Goals tab completely!) */
  .wpf-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    gap: 4px;
    padding: 5px;
    scrollbar-width: none;
  }
  .wpf-tabs::after,
  .wpf-tabs::before { display: none; }
  .wpf-tab {
    flex: 1 1 calc(50% - 4px);
    min-width: 0 !important;
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 0.9px;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.25;
  }

  /* LEADERBOARD TOOLBAR: FORCE 1 column, full width, high-specificity selectors to beat desktop */
  .wpf-stats .wpf-lb-toolbar {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    gap: 10px !important;
    padding: 10px !important;
  }
  .wpf-stats .wpf-lb-toolbar > * {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .wpf-stats .wpf-lb-toolbar label {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    text-align: left !important;
  }
  .wpf-stats .wpf-lb-toolbar label > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wpf-stats .wpf-lb-toolbar select,
  .wpf-stats .wpf-lb-toolbar input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .wpf-stats .wpf-lb-toolbar .wpf-btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* LEADERBOARD GRID: EVERY CARD full width */
  .wpf-stats .wpf-lb-grid { grid-template-columns: repeat(12, 1fr) !important; gap: 10px !important; }
  .wpf-stats .wpf-lb-card,
  .wpf-stats .wpf-lb-card--wide { grid-column: span 12 !important; }

  /* Card head: smaller + allow wrap */
  .wpf-lb-card__head {
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .wpf-lb-card__title { font-size: 10.5px; letter-spacing: 1.8px; }
  .wpf-lb-card__meta { font-size: 9.5px; letter-spacing: 0.7px; }

  /* OVERALL LB TABLE — horizontal scroll container per-card to prevent cutoff */
  .wpf-lb-card > div:last-child > div { /* the overflow-x auto wrapper */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .wpf-lb-table {
    font-size: 10.5px;
    min-width: 560px; /* prevent squeeze; allows natural horizontal scroll */
    width: 100%;
  }
  .wpf-lb-table thead th {
    font-size: 8px;
    letter-spacing: 0.8px;
    padding: 7px 7px;
  }
  .wpf-lb-table tbody td {
    padding: 7px 7px;
    font-size: 10.5px;
    white-space: nowrap;
  }
  .wpf-lb-name { gap: 6px; }
  .wpf-lb-name img { width: 20px; height: 20px; border-radius: 5px; }
  .wpf-lb-name small { font-size: 9px; }
  .wpf-lb-val { font-size: 11px; }
  .wpf-lb-val .unit { font-size: 9px; }
  .wpf-lb-rank {
    min-width: 25px;
    height: 20px;
    padding: 0 4px;
    font-size: 9.5px;
    border-radius: 5px;
  }

  /* DUEL TOOLBAR: 1 column FORCE */
  .wpf-duel-toolbar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .wpf-duel-vs {
    height: 44px;
    font-size: 14px;
    letter-spacing: 2px;
    border-radius: 8px;
  }
  .wpf-select-wrap select,
  .wpf-select-wrap input { height: 42px; font-size: 12.5px; width: 100% !important; box-sizing: border-box !important; }

  /* DUEL WINNER BANNER: stack + wrap chip */
  .wpf-duel-winner {
    flex-direction: column;
    padding: 10px 12px;
    gap: 6px;
    text-align: center;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .wpf-duel-winner .chip-stg { width: 100%; height: auto; min-height: 28px; box-sizing: border-box !important; }
  .wpf-duel-winner .chip-stg .lbl-sml,
  .wpf-duel-winner .chip-stg .val {
    height: auto;
    min-height: 28px;
    word-break: break-word;
    white-space: normal;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.3;
  }

  /* DUEL CARDS: 1 column u1 then VS then u2 — VS becomes horizontal separator */
  .wpf-duel-cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .wpf-duel-cards > :nth-child(2) { /* the VS div in the middle */
    height: 40px;
  }
  .wpf-duel-card__head { padding: 10px 12px; gap: 10px; }
  .wpf-duel-avatar { width: 40px; height: 40px; border-radius: 7px; }
  .wpf-duel-name { font-size: 13px; }
  .wpf-duel-sub { font-size: 9.5px; gap: 6px; }
  .wpf-duel-card__body { padding: 8px 10px; }

  /* DUEL 12 CATEGORY ROWS: stack vertically (label FIRST, then v1/bar/v2) */
  .wpf-duel-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    text-align: center;
  }
  .wpf-duel-row__v1,
  .wpf-duel-row__v2 {
    justify-content: center !important;
    display: inline-flex;
    width: auto !important;
    padding: 4px 10px;
    margin: 0 auto;
    font-size: 12px;
  }
  .wpf-duel-row__label {
    text-align: center;
    order: -1; /* put label FIRST on mobile */
    font-size: 9.5px;
    letter-spacing: 1px;
    padding: 2px 0;
  }
  .wpf-duel-row__bar {
    height: 16px;
    border-radius: 7px;
  }
  .wpf-duel-row__v1 { order: 1; }
  .wpf-duel-row__v2 { order: 3; }
  .wpf-duel-row > div:nth-child(2) { order: 2 !important; }

  /* DUEL H2H: full wrap head + smaller table */
  .wpf-duel-h2h__head {
    padding: 10px 12px;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .wpf-duel-h2h__tally {
    width: 100%;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
  }
  .wpf-duel-h2h__title { font-size: 10px; letter-spacing: 1.5px; }
  .wpf-duel-table {
    font-size: 10px;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
  .wpf-duel-table th {
    font-size: 8px;
    letter-spacing: 0.8px;
    padding: 7px 7px;
    white-space: nowrap;
  }
  .wpf-duel-table td {
    padding: 7px 7px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* LB Summary chips: full wrap + chip-stg flexible */
  #wpfLbSummary > div {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  #wpfLbSummary .chip-stg {
    flex: 1 1 calc(50% - 6px);
    height: auto !important;
    min-height: 26px;
  }
  #wpfLbSummary .chip-stg .lbl-sml,
  #wpfLbSummary .chip-stg .val {
    height: auto !important;
    min-height: 26px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.3;
  }

  /* MINI WIDGET: full width on mobile, bottom fixed */
  .wpf-lbmini {
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 10px;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wpf-lbmini__row { padding: 6px 10px; font-size: 11.5px; }
  .wpf-lbmini__head { padding: 8px 12px; }
  .wpf-lbmini__title { font-size: 9.5px; letter-spacing: 1.8px; }
  .wpf-lbmini__pts { font-size: 11px; }
  .wpf-lbmini__footer { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.8px; }
}

/* -------- SMALL MOBILE (≤480px) — iPhone SE / small Androids -------- */
@media (max-width: 480px) {
  /* Tabs: slightly smaller */
  .wpf-tab {
    min-width: 105px;
    padding: 9px 10px;
    font-size: 10px;
    letter-spacing: 0.9px;
  }

  /* Buttons: slightly shorter but still ≥ 40px tap area */
  .wpf-btn {
    height: 42px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 7px;
  }
  .wpf-select-wrap select,
  .wpf-select-wrap input,
  .wpf-lb-toolbar select,
  .wpf-lb-toolbar input[type="text"] {
    height: 42px;
    font-size: 12.5px;
    padding: 0 10px;
    border-radius: 7px;
  }

  /* Tables: even tighter */
  .wpf-lb-table { font-size: 10.5px; }
  .wpf-lb-table thead th {
    font-size: 8px;
    letter-spacing: 0.7px;
    padding: 6px 6px;
  }
  .wpf-lb-table tbody td { padding: 6px 6px; font-size: 10.5px; }
  .wpf-duel-table { font-size: 10px; }
  .wpf-duel-table th { font-size: 8px; padding: 6px 6px; letter-spacing: 0.7px; }
  .wpf-duel-table td { padding: 6px 6px; font-size: 10px; }

  /* Name + avatar even smaller */
  .wpf-lb-name img { width: 20px; height: 20px; border-radius: 4px; }
  .wpf-lb-name small { font-size: 9px; }
  .wpf-lb-val { font-size: 11px; }
  .wpf-lb-rank {
    min-width: 24px;
    height: 19px;
    padding: 0 4px;
    font-size: 9.5px;
  }

  /* Duel rows: slightly smaller values */
  .wpf-duel-row__v1,
  .wpf-duel-row__v2 { font-size: 12px; padding: 3px 8px; }
  .wpf-duel-row__label { font-size: 9.5px; letter-spacing: 0.9px; }
  .wpf-duel-row__bar { height: 14px; }

  /* Cards: tighter body padding */
  .wpf-lb-card__body { padding: 8px 10px; }
  .wpf-duel-card__body { padding: 6px 8px; }

  /* Mini widget: allow close button to not overlap */
  .wpf-lbmini {
    width: calc(100vw - 12px);
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 9px;
  }
  .wpf-lbmini__row { padding: 5px 8px; font-size: 11px; gap: 6px; }
  .wpf-lbmini__rank { font-size: 9.5px; }
  .wpf-lbmini__pts { font-size: 10.5px; }
}

/* ---------- MY ACCOUNT — ★ NUCLEAR FINAL MOBILE-FIRST OVERHAUL ★ 4-CLASS SPECIFICITY (0,4,0) — UNLOSSABLE ---------- */
/* Fixes 8 bugs from iPhone 15 Pro Max screenshot (430px): theme container gaps, rows escaping right, badges cut, buttons cut */

/* ============================================================================
   ★ N°1 — NUCLEAR THEME CONTAINER RESET (fixes the big blue left/right gaps!)
   Targets ALL WordPress theme wrappers: 2024/FSE/Classic/Elementor/anything
   ============================================================================ */
html body[class*="page-my-account"],
html body[class*="my-account"],
html body .wpf-account,
html body *:has(> .wpf-account),
html body *:has(> *:has(> .wpf-account)),
html body *:has(> *:has(> *:has(> .wpf-account))),
html body .site,
html body #page,
html body #content,
html body #primary,
html body #main,
html body main,
html body article,
html body .entry-content,
html body .content-area,
html body .site-main,
html body .wp-site-blocks,
html body .wp-block-group,
html body .is-layout-constrained,
html body .is-layout-flow,
html body .is-content-justification-center,
html body .wp-container-content,
html body .wp-block-post-content,
html body > div,
html body > div > div,
html body > div > div > div,
html body > div > div > div > div {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
html body {
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .wpf-account {
  padding: 6px 10px 24px !important;
}

/* ============================================================================
   ★ N°2 — UNIVERSAL NO-ESCAPE RULE (NOTHING can exceed viewport width EVER!)
   ============================================================================ */
html body .wpf-account,
html body .wpf-account *,
html body .wpf-account *::before,
html body .wpf-account *::after {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ============================================================================
   ★ N°3 — TABLET / ANYTHING ≤ 1100px = MOBILE LAYOUT (Sidebar below matches FOREVER)
   4-Class specificity beats every cascade war imaginable
   ============================================================================ */
@media (max-width: 1100px) {
  /* --- MAIN GRID: 1 column only --- */
  html body .wpf-account .wpf-account-main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
  }
  html body .wpf-account .wpf-account-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* --- 7 METRICS → 2 columns (2-2-2-1), NEVER LOST, full width --- */
  html body .wpf-account .wpf-account-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 10px 0 14px !important;
    display: grid !important;
  }
  html body .wpf-account .wpf-account-metric {
    padding: 8px 10px !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  html body .wpf-account .wpf-account-metric-value {
    font-size: 20px !important;
    line-height: 1 !important;
    font-family: var(--wpf-font-head), "Space Grotesk", sans-serif !important;
  }
  html body .wpf-account .wpf-account-metric-top {
    font-size: 9px !important;
    gap: 5px !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
  }
  html body .wpf-account .wpf-account-metric-sub {
    font-size: 10px !important;
  }

  /* --- TOP: Profile + Next Match → single column, tight --- */
  html body .wpf-account .wpf-account-top {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    display: grid !important;
  }
  html body .wpf-account .wpf-account-profile {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    display: flex !important;
  }
  html body .wpf-account .wpf-account-profile-body {
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body .wpf-account .wpf-account-profile-edit {
    align-self: center !important;
  }
  html body .wpf-account .wpf-account-next {
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .wpf-account-next-title { font-size: 15px !important; line-height: 1.2 !important; }
  html body .wpf-account .wpf-account-next-time  { font-size: 12px !important; }
  html body .wpf-account .wpf-account-next-meta  { font-size: 11px !important; line-height: 1.35 !important; }
  html body .wpf-account .wpf-account-next-badges {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  html body .wpf-account .wpf-account-next-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html body .wpf-account .wpf-account-next-actions .wpf-account-btn {
    flex: 1 1 calc(50% - 6px) !important;
    justify-content: center !important;
    min-width: 0 !important;
    font-size: 11px !important;
    height: 40px !important;
    padding: 0 8px !important;
  }

  /* --- 5 TABS: SMART WRAP (UPCOMING + HISTORY + POTM on row 1; PREDICTIONS + SETTINGS on row 2) --- */
  html body .wpf-account .wpf-account-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    padding: 10px 10px 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: flex-end !important;
  }
  html body .wpf-account .wpf-account-tab {
    font-size: 9px !important;
    letter-spacing: .03em !important;
    padding: 0 0 6px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    line-height: 1.05 !important;
  }

  /* --- MY MATCHES CARD: OVERFLOW CLIP X, VISIBLE Y — fixes rows escaping right! --- */
  html body .wpf-account .wpf-account-matches {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-bottom: 6px !important;
  }
  html body .wpf-account .wpf-account-matches-head {
    padding: 14px 12px 0 !important;
    overflow: visible !important;
  }
  html body .wpf-account .wpf-account-panel {
    padding: 12px 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body .wpf-account .wpf-account-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
  }
  html body .wpf-account .wpf-account-toolbar > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- COMPACT MATCH ROWS (the cards): FIX grid percentages to NEVER escape right --- */
  html body .wpf-account .wpf-account-table { display: block !important; width: 100% !important; overflow: hidden !important; }
  html body .wpf-account .wpf-account-table tbody { display: block !important; width: 100% !important; }
  html body .wpf-account .wpf-account-table tr {
    display: grid !important;
    grid-template-columns: 29% 32% 21% 18% !important;
    grid-template-areas:
      "datetime venue   status  players"
      "datetime venue   goals   assists"
      "actions  actions actions actions" !important;
    gap: 4px 6px !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  html body .wpf-account .wpf-account-table td {
    display: block !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
    align-self: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* --- Cells: extreme compactness for 430px --- */
  html body .wpf-account .wpf-account-cell--date {
    line-height: 1.15 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
  }
  html body .wpf-account .wpf-account-row-date { font-size: 11px !important; font-weight: 700 !important; }
  html body .wpf-account .wpf-account-row-time { font-size: 10px !important; color: var(--wpf-muted) !important; }

  html body .wpf-account .wpf-account-cell--match {
    display: flex !important;
    align-items: center !important;
    padding-left: 6px !important;
    padding-right: 4px !important;
    border-left: 1px dashed var(--wpf-border) !important;
    min-height: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  html body .wpf-account .wpf-account-row-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* STATUS BADGE: max 90px, tiny, TRUNCATE */
  html body .wpf-account .wpf-account-cell--status {
    display: flex !important;
    justify-content: center !important;
    max-width: 92px !important;
    width: 100% !important;
  }
  html body .wpf-account .wpf-account-cell--status .wpf-account-badge {
    padding: 2px 5px !important;
    font-size: 8px !important;
    letter-spacing: .03em !important;
    line-height: 1.15 !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* PLAYERS COUNT pill */
  html body .wpf-account .wpf-account-cell--players {
    display: flex !important;
    justify-content: center !important;
  }
  html body .wpf-account .wpf-account-count {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
  }

  /* GOALS + ASSISTS inputs: 28px wide */
  html body .wpf-account .wpf-account-cell--stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
  }
  html body .wpf-account .wpf-account-cell--stat::before {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
  }
  html body .wpf-account .wpf-account-cell--stat .wpf-account-input {
    width: 28px !important;
    height: 24px !important;
    padding: 0 3px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  /* ACTIONS ROW (3 buttons): overflow-x auto + HIDDEN scrollbar + RIGHT PADDING so last btn not cut */
  html body .wpf-account .wpf-account-actions {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 4px 4px 0 !important;
    margin-top: 2px !important;
    border-top: 1px dashed var(--wpf-border) !important;
  }
  html body .wpf-account .wpf-account-actions::-webkit-scrollbar { display: none !important; }
  html body .wpf-account .wpf-account-actions { scrollbar-width: none !important; }
  html body .wpf-account .wpf-account-actions .wpf-account-btn {
    padding: 4px 7px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    gap: 3px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    height: 32px !important;
  }

  /* --- TABLES inside panels: scroll-x momentum, min 500px --- */
  html body .wpf-account .wpf-account-panel > div,
  html body .wpf-account .wpf-account-panel > table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  html body .wpf-account .wpf-account-panel table {
    min-width: 500px !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  html body .wpf-account .wpf-account-panel table thead th,
  html body .wpf-account .wpf-account-panel table tbody td {
    white-space: nowrap !important;
  }
}

/* ============================================================================
   ★ N°4 — SMALL MOBILE ≤ 480px (iPhone 14/15/16 all models + Pixel + Android)
   ============================================================================ */
@media (max-width: 480px) {
  html body .wpf-account {
    padding: 5px 8px 20px !important;
  }
  html body .wpf-account .wpf-account-metrics { gap: 5px !important; }
  html body .wpf-account .wpf-account-metric { padding: 7px 9px !important; }
  html body .wpf-account .wpf-account-metric-top { font-size: 8.5px !important; letter-spacing: .05em !important; }
  html body .wpf-account .wpf-account-metric-value { font-size: 18px !important; }
  html body .wpf-account .wpf-account-metric-sub { font-size: 9.5px !important; }
  html body .wpf-account .wpf-account-tab { font-size: 8.5px !important; letter-spacing: .02em !important; gap: 2px !important; }
  html body .wpf-account .wpf-account-panel { padding: 10px 8px 14px !important; }
  html body .wpf-account .wpf-account-matches-head { padding: 12px 10px 0 !important; }
  html body .wpf-account .wpf-account-next { padding: 10px !important; }
  html body .wpf-account .wpf-account-next-title { font-size: 14px !important; }
  html body .wpf-account .wpf-account-next-time { font-size: 11.5px !important; }
  html body .wpf-account .wpf-account-next-meta { font-size: 10.5px !important; }
  html body .wpf-account .wpf-account-badge {
    padding: 2px 6px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
  }
}

/* ============================================================================
   ★ N°5 — EXACT TUNING PER IPHONE 15/16 FAMILY
   ============================================================================ */
/* iPhone 15 Pro Max / 16 Plus / 16 Pro Max = 430px width */
@media (max-width: 440px) {
  html body .wpf-account .wpf-account-tabs {
    gap: 2px 6px !important;
    padding: 9px 9px 0 !important;
  }
  html body .wpf-account .wpf-account-tab {
    font-size: 8.5px !important;
    padding: 0 0 5px !important;
  }
  html body .wpf-account .wpf-account-table tr {
    grid-template-columns: 28% 31% 22% 19% !important;
    gap: 3px 5px !important;
    padding: 7px 9px !important;
  }
  html body .wpf-account .wpf-account-cell--status .wpf-account-badge {
    font-size: 7.5px !important;
    padding: 2px 4px !important;
    max-width: 88px !important;
  }
}

/* iPhone 15 / 15 Pro / 16 / 16 Pro = 393px → TIGHT */
@media (max-width: 400px) {
  html body .wpf-account .wpf-account-tabs {
    gap: 1px 4px !important;
    padding: 8px 7px 0 !important;
  }
  html body .wpf-account .wpf-account-tab {
    font-size: 8px !important;
    letter-spacing: .01em !important;
    padding: 0 2px 5px 2px !important;
  }
  html body .wpf-account .wpf-account-metric { padding: 6px 8px !important; }
  html body .wpf-account .wpf-account-metric-value { font-size: 17px !important; }
  html body .wpf-account .wpf-account-metric-top { font-size: 8px !important; }
  html body .wpf-account .wpf-account-table tr {
    grid-template-columns: 27% 30% 23% 20% !important;
    gap: 2px 4px !important;
    padding: 6px 8px !important;
  }
  html body .wpf-account .wpf-account-row-date { font-size: 10.5px !important; }
  html body .wpf-account .wpf-account-row-time { font-size: 9.5px !important; }
  html body .wpf-account .wpf-account-row-name { font-size: 10.5px !important; }
  html body .wpf-account .wpf-account-count { font-size: 9px !important; padding: 2px 4px !important; }
  html body .wpf-account .wpf-account-actions .wpf-account-btn {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    height: 30px !important;
    gap: 2px !important;
  }
  html body .wpf-account .wpf-account-cell--status .wpf-account-badge {
    font-size: 7px !important;
    letter-spacing: 0 !important;
    padding: 2px 3px !important;
    max-width: 82px !important;
  }
}

/* iPhone SE 3rd / small Androids = 375px → ULTRA TIGHT */
@media (max-width: 380px) {
  html body .wpf-account .wpf-account-tab {
    font-size: 7.5px !important;
    padding: 0 1px 4px 1px !important;
  }
  html body .wpf-account .wpf-account-tabs {
    gap: 1px 3px !important;
    padding: 8px 6px 0 !important;
  }
}

/* ============================================================================
   ★ PHASE6 — TAB HIDDEN PATTERN (DataTables-compatible, no display:none)
   Avoids display:none which breaks width calculations for tables inside tabs.
   Uses visibility:hidden + height:0 + overflow:hidden → layout is still rendered.
   HIGH SPECIFICITY to override any earlier default display:none rules in this file.
   ============================================================================ */
/* — My Account panels (SPECIFICITY 0,4,0 — wins over L2535 L2536) — */
html body .wpf-account .wpf-account-panel {
  display: block !important;
  visibility: hidden !important;
  position: relative !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
html body .wpf-account .wpf-account-panel.is-active {
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 12px 18px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
/* — Statistics default Tabs (Goals / WinLoss) — 0,2,0 specificity — */
html body .wpf-tab-panel {
  display: block !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html body .wpf-tab-panel.is-active {
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
/* — Phase6 LB Tabs + Duel — 0,2,0 specificity — */
html body .wpf-lb-tab-panel {
  display: block !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html body .wpf-lb-tab-panel.is-active {
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* ============================================================================
   ★ MOBILE RESPONSIVE POLISH — ONLY scoped @media queries (NO desktop changes)
   Desktop design above 1024px = FROZEN UNCHANGED.
   ============================================================================ */

/* Prevent any My Account child from inheriting min-width:auto (flex default = overflow root cause) */
@media (max-width: 1024px) {
  html body .wpf-account,
  html body .wpf-account * {
    box-sizing: border-box !important;
  }
  html body .wpf-account > *,
  html body .wpf-account-main,
  html body .wpf-account-side,
  html body .wpf-account-side > *,
  html body .wpf-account-matches,
  html body .wpf-account-panel,
  html body .wpf-account-panel > *,
  html body .wpf-stats > *,
  html body .wpf-phase6 > *,
  html body .dt-container,
  html body .dt-layout-row,
  html body .dt-layout-cell,
  html body .dt-layout-top,
  html body .dt-layout-bottom {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Strongest containment: no element under My Account escapes viewport width */
  html body .wpf-account,
  html body .wpf-account-main,
  html body .wpf-account-side {
    overflow-x: hidden !important;
  }
}

/* -------------------------------------------------------------------------- */
/* --- [MQ-1] TABLET: ≤ 1024px                                             --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* — My Account: stack main 1col below 1024; sidebar comes AFTER matches — */
  html body .wpf-account {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  html body .wpf-account-side {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .wpf-account-main {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* — My Account: PROFILE CARD = EXPLICIT GRID, NO flex-wrap (never detached orphan) — */
  html body .wpf-account .wpf-account-profile {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar name"
      "avatar meta1"
      "avatar meta2"
      "edit edit" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    padding: 14px 14px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  html body .wpf-account .wpf-account-avatar {
    grid-area: avatar !important;
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
  }
  html body .wpf-account .wpf-account-profile-name {
    grid-area: name !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    justify-self: start !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body .wpf-account .wpf-account-profile-body {
    display: contents !important; /* children inherit parent grid areas */
  }
  html body .wpf-account .wpf-account-profile-meta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .wpf-account .wpf-account-profile-meta:nth-of-type(1) {
    grid-area: meta1 !important;
    align-self: center !important;
    justify-self: start !important;
  }
  html body .wpf-account .wpf-account-profile-meta:nth-of-type(2) {
    grid-area: meta2 !important;
    align-self: start !important;
    justify-self: start !important;
  }
  html body .wpf-account .wpf-account-profile-edit {
    grid-area: edit !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    justify-self: stretch !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 8px 0 0 0 !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* — My Account: Next Match = full containment, no escape — */
  html body .wpf-account .wpf-account-next {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 14px 14px !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .wpf-account-next > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* — My Account: Next Match buttons balanced widths 2col — */
  html body .wpf-account .wpf-account-next-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .wpf-account .wpf-account-next-actions .wpf-account-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    justify-content: center !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* — My Account: Metrics (KPIs) 2 columns, equal heights, NO escape — */
  html body .wpf-account .wpf-account-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 10px !important;
    padding: 12px 10px 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .wpf-account-metric {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    min-height: 72px !important;
    padding: 10px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  html body .wpf-account .wpf-account-metrics > .wpf-account-metric:nth-child(7) {
    grid-column: 1 / -1 !important; /* STANDBY full width intentional */
  }
  html body .wpf-account .wpf-account-metric-value {
    font-size: 20px !important;
    word-break: break-word !important;
  }
  html body .wpf-account .wpf-account-metric-top span,
  html body .wpf-account .wpf-account-metric-sub {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* — My Matches TABS: horizontal strip (nowrap) swipeable, scrollbar hidden — */
  html body .wpf-account .wpf-account-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    padding: 2px 2px 4px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .wpf-account-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html body .wpf-account .wpf-account-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .wpf-account-tab i {
    font-size: 12px !important;
    opacity: .9 !important;
    color: inherit !important;
    flex: 0 0 auto !important;
  }
  /* — Statistics tabs (same pattern) — */
  html body .wpf-stats .wpf-lb-tabs,
  html body .wpf-phase6 .wpf-lb-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    padding: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  html body .wpf-stats .wpf-lb-tabs::-webkit-scrollbar,
  html body .wpf-phase6 .wpf-lb-tabs::-webkit-scrollbar { display: none !important; }
  html body .wpf-stats .wpf-lb-tab-btn,
  html body .wpf-phase6 .wpf-lb-tab-btn {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    height: 40px !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  /* — Statistics LB Toolbar stack 1col on tablet — */
  html body .wpf-stats .wpf-lb-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(40px, auto) !important;
    gap: 10px !important;
    padding: 10px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .wpf-stats .wpf-lb-toolbar > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .wpf-stats .wpf-lb-toolbar .wpf-btn,
  html body .wpf-phase6 .wpf-btn {
    min-height: 40px !important;
    height: 40px !important;
    justify-content: center !important;
    width: 100% !important;
  }
  /* — LB Summary cards 2x2 = more compact — */
  html body .wpf-stats .wpf-lb-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* — GLOBAL MOBILE TABLE RULE (≤1024): BODY no overflow-x; tables internal overflow only — */
  html body,
  html body > * {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  html body .wpf-account .dt-container,
  html body .wpf-stats .dt-container,
  html body .dt-container,
  html body .dataTables_wrapper,
  html body .wpf-tab-scroll,
  html body .wpf-lb-card table,
  html body .wpf-lb-card .dt-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: -ms-autohiding-scrollbar !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body table.dataTable,
  html body table.wpf-dt-table,
  html body table.wpf-tab-table,
  html body .wpf-lb-card table {
    min-width: 560px !important;
    width: 100% !important;
    max-width: none !important; /* allow table to be wider than container (internal scroll) */
  }
  /* — DataTables rows slightly more compact on tablet — */
  html body table.dataTable tbody tr td,
  html body table.wpf-dt-table tbody tr td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
  }
  html body table.dataTable thead th,
  html body table.wpf-dt-table thead th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 11px !important;
  }
  /* — Statistics Duel card 1col — */
  html body .wpf-duel-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  html body .wpf-duel-toolbar > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .wpf-duel-player-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .wpf-duel-rows-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  /* — Statistics Duel rows: label first + bar stacked vertically for mobile — */
  html body .wpf-duel-row {
    grid-template-columns: 1fr !important;
    gap: 4px 4px !important;
  }
  /* — MODAL 12–16px outer margins, max-h 85vh internal scroll — */
  html body .modal-dialog,
  html body .wpf-modal,
  html body [role="dialog"],
  html body .modal-content {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }
  html body .modal-body,
  html body .wpf-modal-body {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* -------------------------------------------------------------------------- */
/* --- [MQ-2] MOBILE: ≤ 768px (Tablet small / Phablet)                     --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* — Top bar / Header: align hamburger + title + avatar cleanly — */
  html body .wpf-topbar,
  html body .wpf-header,
  html body header .wpf-wrap,
  html body .site-header .wrap {
    min-height: 52px !important;
    height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  html body .wpf-hamburger,
  html body .menu-toggle {
    min-height: 40px !important;
    min-width: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .wpf-avatar-topbar {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }
  /* — Profile card mobile: avatar 52px, explicit grid tighter — */
  html body .wpf-account .wpf-account-profile {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    padding: 12px 12px !important;
  }
  html body .wpf-account .wpf-account-avatar {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }
  html body .wpf-account .wpf-account-profile-name {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
  html body .wpf-account .wpf-account-profile-meta {
    font-size: 12px !important;
  }
  html body .wpf-account .wpf-account-profile-edit {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    margin-top: 6px !important;
  }
  /* — Next Match card tighter — */
  html body .wpf-account .wpf-account-next {
    padding: 12px 12px 12px !important;
    gap: 8px !important;
  }
  html body .wpf-account .wpf-account-next-title {
    font-size: 18px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  html body .wpf-account .wpf-account-next-time {
    font-size: 16px !important;
  }
  html body .wpf-account .wpf-account-next-meta {
    font-size: 12px !important;
    gap: 6px 12px !important;
    flex-wrap: wrap !important;
  }
  /* — KPI cards: consistent min-height 68px, numbers 19px — */
  html body .wpf-account .wpf-account-metrics {
    gap: 8px !important;
    padding: 10px 8px 2px !important;
  }
  html body .wpf-account .wpf-account-metric {
    min-height: 68px !important;
    padding: 9px 9px !important;
  }
  html body .wpf-account .wpf-account-metric-value {
    font-size: 19px !important;
  }
  html body .wpf-account .wpf-account-metric-top span {
    font-size: 9.5px !important;
  }
  /* — DataTables Toolbar (mobile) — STACK vertically (length on top, search below), full widths — */
  html body .wpf-account .dt-container .dt-layout-top,
  html body .wpf-stats .dt-container .dt-layout-top,
  html body .dt-container .dt-layout-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "length" "search" !important;
    gap: 8px !important;
    padding: 10px 6px 6px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .dt-layout-top > div,
  html body .dt-layout-top > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .wpf-account .dt-length,
  html body .dt-length {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .wpf-account .dt-length select,
  html body .dt-length select {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .dt-search,
  html body .dt-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }
  html body .wpf-account .dt-search input[type="search"],
  html body .dt-search input[type="search"] {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  /* — DataTables Bottom (info + pagination) — stack vertically mobile, centered — */
  html body .wpf-account .dt-container .dt-layout-bottom,
  html body .wpf-stats .dt-container .dt-layout-bottom,
  html body .dt-container .dt-layout-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "info" "paging" !important;
    gap: 8px !important;
    padding: 6px 6px 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .wpf-account .dt-info,
  html body .dt-info {
    text-align: center !important;
    justify-self: center !important;
    padding: 2px 0 !important;
    font-size: 11.5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  html body .wpf-account .dt-paging,
  html body .dt-paging {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  html body .wpf-account .dt-paging::-webkit-scrollbar,
  html body .dt-paging::-webkit-scrollbar { display: none !important; }
  /* — DT page buttons (mobile): LAYOUT ONLY — visual style owned by WPF CANONICAL block (div.dt-container*) — */
  html body .wpf-account .dt-paging-button,
  html body .dt-paging .dt-paging-button {
    flex: 0 0 auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  /* — Active / Disabled / Ellipsis: VISUAL DEFERRED TO CANONICAL (no local bg/color/shadow/transform here) — */
  html body .wpf-account .dt-paging-button.current,
  html body .dt-paging .dt-paging-button.current {
    min-width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    line-height: 36px !important;
    letter-spacing: .01em !important;
  }
  html body .wpf-account .dt-paging-button.disabled,
  html body .dt-paging .dt-paging-button.disabled {
    opacity: .85 !important;
  }
  html body .wpf-account .dt-paging-button.ellipsis,
  html body .dt-paging .dt-paging-button.ellipsis {
    min-width: 20px !important;
    padding: 0 2px !important;
  }
  /* — Statistics mini widget bottom-right = mobile bottom-center, no overlap buttons — */
  html body .wpf-lbmini {
    bottom: 12px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    min-width: 0 !important;
    z-index: 30 !important;
  }
  /* — Statistics Duel = toolbar + cards + rows 1col super tight — */
  html body .wpf-duel-toolbar select,
  html body .wpf-duel-toolbar input,
  html body .wpf-stats select,
  html body .wpf-stats input,
  html body .wpf-phase6 select,
  html body .wpf-phase6 input {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }
  /* — MODAL mobile: 100% - 20px, header tight, action buttons 100% — */
  html body .modal-dialog,
  html body .wpf-modal {
    max-width: calc(100vw - 20px) !important;
    width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }
  html body .modal-header,
  html body .wpf-modal-header {
    padding: 10px 12px !important;
  }
  html body .modal-body {
    padding: 10px 12px !important;
    max-height: 68vh !important;
  }
  html body .modal-footer,
  html body .wpf-modal-footer {
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  html body .modal-footer .btn,
  html body .wpf-modal-footer .wpf-btn {
    min-height: 40px !important;
    height: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* --- [MQ-3] SMALL MOBILE: ≤ 560px (large phones 480-560)                 --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  html body .wpf-account,
  html body .wpf-stats,
  html body .wpf-phase6,
  html body .wpf-main,
  html body main,
  html body #main {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  /* — Profile card 560px: explicit grid, avatar 50px, Edit below full width — */
  html body .wpf-account .wpf-account-profile {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    padding: 12px 12px !important;
  }
  html body .wpf-account .wpf-account-avatar {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
  html body .wpf-account .wpf-account-profile-name {
    font-size: 15.5px !important;
  }
  html body .wpf-account .wpf-account-profile-edit {
    margin-top: 5px !important;
  }
  /* — Next Match card 560px: action buttons 1col stack balanced touch area — */
  html body .wpf-account .wpf-account-next-actions {
    grid-template-columns: 1fr !important;
  }
  /* — KPI: 2 col, min-height 66px — no cards smaller than others */
  html body .wpf-account .wpf-account-metrics {
    gap: 8px 8px !important;
    padding: 10px 8px 2px !important;
  }
  html body .wpf-account .wpf-account-metric {
    min-height: 66px !important;
    padding: 8px 8px 7px !important;
  }
  html body .wpf-account .wpf-account-metric-value {
    font-size: 18px !important;
  }
  /* — Tabs 560px: slightly smaller, min-height 38px — */
  html body .wpf-account .wpf-account-tab,
  html body .wpf-stats .wpf-lb-tab-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
  }
  /* — Table rows slightly more compact 560px — */
  html body table.dataTable tbody tr td,
  html body table.wpf-dt-table tbody tr td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 12.5px !important;
  }
  html body table.dataTable thead th,
  html body table.wpf-dt-table thead th {
    padding: 9px 10px !important;
    font-size: 10.5px !important;
  }
  html body table.dataTable,
  html body table.wpf-dt-table,
  html body table.wpf-tab-table {
    min-width: 520px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* --- [MQ-4] TINY PHONE: ≤ 430px (iPhone 15/16 Plus/Pro Max 430)         --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  html body .wpf-account,
  html body .wpf-stats,
  html body .wpf-phase6 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* — Profile card ultra tight: explicit grid — */
  html body .wpf-account .wpf-account-profile {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    padding: 10px 10px !important;
  }
  html body .wpf-account .wpf-account-avatar {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
  html body .wpf-account .wpf-account-profile-name {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  html body .wpf-account .wpf-account-profile-meta {
    font-size: 11.5px !important;
    gap: 5px !important;
  }
  html body .wpf-account .wpf-account-profile-meta i {
    width: 12px !important;
    font-size: 11px !important;
    flex: 0 0 12px !important;
  }
  html body .wpf-account .wpf-account-profile-edit {
    margin-top: 4px !important;
  }
  /* — Next Match: title 17px, time 15px, no clipping — */
  html body .wpf-account .wpf-account-next {
    padding: 10px 10px 12px !important;
  }
  html body .wpf-account .wpf-account-next-title { font-size: 17px !important; }
  html body .wpf-account .wpf-account-next-time  { font-size: 15px !important; }
  html body .wpf-account .wpf-account-next-meta  { font-size: 11.5px !important; gap: 5px 10px !important; }
  html body .wpf-account .wpf-account-next-badges { gap: 6px !important; padding-top: 2px !important; flex-wrap: wrap !important; }
  html body .wpf-account .wpf-account-next-actions .wpf-account-btn {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }
  /* — KPI: font size 17px number; label 9px uppercase; — */
  html body .wpf-account .wpf-account-metrics { gap: 6px 6px !important; padding: 8px 6px 2px !important; }
  html body .wpf-account .wpf-account-metric { min-height: 64px !important; padding: 8px 8px 6px !important; }
  html body .wpf-account .wpf-account-metric-value { font-size: 17px !important; }
  html body .wpf-account .wpf-account-metric-top span { font-size: 8.8px !important; letter-spacing: .05em !important; }
  html body .wpf-account .wpf-account-metric-sub { font-size: 9.8px !important; line-height: 1.15 !important; }
  /* — Tabs: 36px min height; subtle padding; keep icon+label visible — */
  html body .wpf-account .wpf-account-tab,
  html body .wpf-stats .wpf-lb-tab-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
    letter-spacing: .005em !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }
  html body .wpf-account .wpf-account-tab i,
  html body .wpf-stats .wpf-lb-tab-btn i { font-size: 11px !important; flex: 0 0 auto !important; }
  /* — DT: sizing only (visual: global canonical) — */
  html body .wpf-account .dt-length select,
  html body .dt-length select,
  html body .wpf-account .dt-search input[type="search"],
  html body .dt-search input[type="search"] {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 12.5px !important;
  }
  html body .wpf-account .dt-info,
  html body .dt-info {
    font-size: 11px !important;
  }
  html body .wpf-account .dt-paging-button,
  html body .dt-paging .dt-paging-button {
    min-height: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }
  html body .wpf-account .dt-paging-button.current,
  html body .dt-paging .dt-paging-button.current {
    /* — no visual overrides: uses global canonical WPF navy/gold — */
  }
}

/* -------------------------------------------------------------------------- */
/* --- [MQ-5] ULTRA SMALL: ≤ 390px (iPhone 16/15/14 390–393px)            --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  /* — Profile: name 14.5, meta 11 — */
  html body .wpf-account .wpf-account-profile {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }
  html body .wpf-account .wpf-account-avatar {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }
  html body .wpf-account .wpf-account-profile-name { font-size: 14.5px !important; }
  html body .wpf-account .wpf-account-next-title { font-size: 16px !important; }
  html body .wpf-account .wpf-account-next-time { font-size: 14.5px !important; }
  /* — KPI: 2 cols OK; last full = standby — */
  html body .wpf-account .wpf-account-metric-value { font-size: 16px !important; }
  html body .wpf-account .wpf-account-metric { min-height: 62px !important; padding: 7px 7px 5px !important; }
  /* — Tabs: never shrink text to unreadable, keep nowrap+scroll instead — */
  html body .wpf-account .wpf-account-tab,
  html body .wpf-stats .wpf-lb-tab-btn {
    font-size: 10.8px !important;
    padding: 0 10px !important;
    min-height: 35px !important;
    height: 35px !important;
  }
  html body .wpf-account .wpf-account-tab i,
  html body .wpf-stats .wpf-lb-tab-btn i { font-size: 10.5px !important; }
  /* — DT toolbar/pagination: sizing only (visual: global canonical) — */
  html body .wpf-account .dt-length select,
  html body .dt-length select,
  html body .wpf-account .dt-search input[type="search"],
  html body .dt-search input[type="search"] {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding-left: 10px !important;
  }
  html body .wpf-account .dt-paging-button,
  html body .dt-paging .dt-paging-button {
    min-height: 33px !important;
    min-width: 33px !important;
    height: 33px !important;
    line-height: 33px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* --- [MQ-6] PICO PHONE: ≤ 360px (iPhone SE 2022 375px & SE3 379, 360)   --- */
/* -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  html body .wpf-account,
  html body .wpf-stats,
  html body .wpf-phase6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* — Profile card: avatar 44px, ultra compact explicit grid — */
  html body .wpf-account .wpf-account-profile {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    row-gap: 2px !important;
    padding: 10px 8px !important;
  }
  html body .wpf-account .wpf-account-avatar {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
  html body .wpf-account .wpf-account-profile-name { font-size: 14px !important; }
  html body .wpf-account .wpf-account-profile-meta { font-size: 11px !important; }
  html body .wpf-account .wpf-account-profile-edit {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 11.5px !important;
    margin-top: 4px !important;
  }
  /* — Next match: title 15.5px, meta wrap if needed, buttons stack balanced 40px — */
  html body .wpf-account .wpf-account-next { padding: 10px 10px 12px !important; gap: 7px !important; }
  html body .wpf-account .wpf-account-next-title { font-size: 15.5px !important; }
  html body .wpf-account .wpf-account-next-time { font-size: 14px !important; }
  html body .wpf-account .wpf-account-next-meta { font-size: 11px !important; flex-wrap: wrap !important; }
  /* — KPI: keep 2 cols standby full, very compact but not microscopic — */
  html body .wpf-account .wpf-account-metrics { gap: 5px 5px !important; padding: 7px 5px 1px !important; }
  html body .wpf-account .wpf-account-metric { min-height: 60px !important; padding: 6px 7px 4px !important; border-radius: 7px !important; }
  html body .wpf-account .wpf-account-metric-value { font-size: 15px !important; }
  html body .wpf-account .wpf-account-metric-top span { font-size: 8.2px !important; }
  html body .wpf-account .wpf-account-metric-sub { font-size: 9.3px !important; }
  /* — Tabs: compact 34px — */
  html body .wpf-account .wpf-account-tab,
  html body .wpf-stats .wpf-lb-tab-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: 10.4px !important;
  }
  html body .wpf-account .wpf-account-tab i,
  html body .wpf-stats .wpf-lb-tab-btn i { font-size: 10px !important; }
  /* — DT rows more compact for SE — */
  html body table.dataTable tbody tr td,
  html body table.wpf-dt-table tbody tr td {
    padding: 8px 9px !important;
    font-size: 12px !important;
  }
  html body table.dataTable thead th,
  html body table.wpf-dt-table thead th {
    padding: 8px 9px !important;
    font-size: 10px !important;
  }
  html body table.dataTable,
  html body table.wpf-dt-table,
  html body table.wpf-tab-table {
    min-width: 500px !important;
  }
  /* — DT controls: 34px, paging 32px, info 10.5px centered — */
  html body .wpf-account .dt-length select,
  html body .dt-length select,
  html body .wpf-account .dt-search input[type="search"],
  html body .dt-search input[type="search"] {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11.5px !important;
  }
  html body .wpf-account .dt-paging-button,
  html body .dt-paging .dt-paging-button {
    min-height: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
  }
  html body .wpf-account .dt-info,
  html body .dt-info {
    font-size: 10.5px !important;
  }
  /* — Mini widget bottom center 44px safe inset above pager area — */
  html body .wpf-lbmini {
    bottom: 8px !important;
    z-index: 30 !important;
  }
}