/* ===== Style block 1 from original index.html ===== */

    * { box-sizing: border-box; }
    html, body { overflow-x: hidden; max-width: 100%; }
    :root {
  --dark: #fffafb;
  --panel: #ffffff;
  --panel-2: #fff5fa;
  --line: #f2c5db;
  --pink: #e91e63;
  --rose: #ff4f9a;
  --coral: #ff7eb6;
  --orange: #ffb3d1;
  --gold: #e91e63;
  --soft: #fff5fa;
  --text: #1a1a1a;
  --muted: #7b3654;
  --danger: #e53935;
  --green: #e91e63;
  --lime: #ff7eb6;
  --brand-gradient: linear-gradient(135deg, #e91e63, #ff4f9a, #ffc1dd);
}
    body { margin: 0; font-family: Arial, sans-serif; background: var(--dark); color: #1a1a1a; }
    .app { max-width: 1400px; margin: auto; padding: 20px; overflow-x: hidden; }
    .tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } /* default - overridden for #mainNavTabs */
    .tab-button { background: white; color: var(--green); border: 0; padding: 12px 20px; border-radius: 12px; font-weight: 900; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); letter-spacing: 0.3px; }
    .tab-button.active { background: var(--green); color: white; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .hero { background: linear-gradient(135deg, #087c35, #0fbf5a); color: white; padding: 28px; border-radius: 22px; margin-bottom: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .logo { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; background: white; margin-bottom: 10px; }
    .hero h1 { margin: 5px 0; font-size: 38px; }
    .brand-tagline { font-size: 20px; font-weight: 800; margin-top: 6px; opacity: .96; }
    .fair-badge { display: inline-block; margin-top: 12px; background: rgba(0,0,0,.22); color: white; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 900; }
    #sessionDisplay { font-size: 22px; font-weight: 800; }
    #sessionMeta, #remainingTimer { margin-top: 8px; font-size: 15px; line-height: 1.6; }
    #remainingTimer { display: inline-block; background: rgba(0,0,0,.22); padding: 10px 18px; border-radius: 999px; font-size: 20px; font-weight: 800; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
    @media (max-width: 900px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
      .setup-row, .desktop-row { grid-template-columns: 1fr !important; }
    }
    .stat-card { background: white; border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
    .stat-card small { color: #666; font-weight: 800; }
    .stat-card div { font-size: 30px; font-weight: 900; margin-top: 8px; color: var(--green); }
    .layout { display: flex; flex-direction: column; gap: 18px; }
    .setup-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .desktop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
    .desktop-row > .panel { height: 100%; }
    .panel { background: white; border-radius: 18px; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
    .panel h2 { margin-top: 0; font-size: 20px; color: var(--green); }
    label { display: block; margin-top: 10px; font-weight: 800; color: #245332; }
    input, button { padding: 10px; margin: 4px 0; border-radius: 10px; border: 1px solid #ccc; font-size: 14px; }
    input { width: 100%; }
    button { cursor: pointer; font-weight: 800; border: none; margin-right: 6px; }
    .btn-primary { background: var(--green); color: white; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-dark { background: #12351f; color: white; }
    .btn-light { background: #eefbea; color: var(--green); border: 1px solid #b7e6c6; }
    .player, .court, .match, .rank-card, .session-card { background: var(--soft); border-radius: 14px; padding: 12px; margin: 10px 0; border-left: 6px solid var(--lime); }
    .court { border: 2px solid var(--lime); background: #f5fff7; }
    .court h3 { margin-top: 0; color: var(--green); }
    .team { background: white; padding: 10px; border-radius: 12px; margin: 8px 0; border: 1px solid #d8f3df; }
    .score { width: 100%; display: block; margin: 0; box-sizing: border-box; }
    .score-row { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; margin-top: 8px; }
    .score-row .score { width: 100%; margin: 0; text-align: center; font-size: 22px; font-weight: 900; }
    .score-btn { background: #12351f; color: white; min-height: 44px; border-radius: 12px; font-size: 20px; }

    .winner-box { background: var(--green); color: white; padding: 10px; border-radius: 12px; font-weight: 800; margin-top: 10px; }
    .skill-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .skill-badge { display: inline-block; margin-top: 5px; background: #e8f5ff; color: #075985; border: 1px solid #bae6fd; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; }
    .hidden { display: none !important; }
    .hold-player { border-left-color: var(--gold); background: #fff9e8; }
    .hold-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .time-label { font-size: 13px; color: #666; margin: 4px 0; }
    .rank-card.rank-1 { background: #fff7d6; border-left-color: var(--gold); }
    .rank-card.rank-2 { background: #f1f1f1; border-left-color: #999; }
    .rank-card.rank-3 { background: #fff0df; border-left-color: #b87333; }
    .footer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .muted { color: #667; font-size: 13px; }
    .previous-layout { display: grid; grid-template-columns: 360px 1fr; gap: 18px; }

    .previous-subtabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
    .previous-subtab-button { background: #eefbea; color: var(--green); border: 1px solid #b7e6c6; padding: 12px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; }
    .previous-subtab-button.active { background: var(--green); color: white; }
    .previous-subtab-content { display: none; }
    .previous-subtab-content.active { display: block; }

    .session-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
    .session-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .session-filter-summary { background: #eefbea; border-left: 6px solid var(--lime); border-radius: 12px; padding: 10px; margin: 10px 0 14px; font-size: 13px; line-height: 1.6; }
    select { width: 100%; padding: 10px; margin: 4px 0; border-radius: 10px; border: 1px solid #ccc; font-size: 14px; background: white; }
    .mvp-card { background: #fff7d6; border-left: 6px solid var(--gold); border-radius: 14px; padding: 14px; margin: 10px 0 14px; }
    .completed-bottom, .queue-bottom { margin-top: 20px; }

    .bottom-actions-panel {
      margin-top: 20px;
      border-top: 6px solid var(--green);
    }

    .bottom-reset-panel {
      margin-top: 12px;
      border-top: 6px solid var(--danger);
    }

    .bottom-actions-panel .footer-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
    }


    .queue-bottom {
      margin-top: 20px;
    }

    .queue-bottom #queueList,
    .queue-bottom #doublesQueueList {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .queue-bottom .player {
      margin: 0;
    }

    .table-wrap { width: 100%; overflow-x: auto; }
    .leaderboard-table { width: 100%; border-collapse: collapse; min-width: 0; background: white; border-radius: 12px; overflow: hidden; }
    .leaderboard-table th { background: var(--green); color: white; padding: 8px 6px; text-align: center; font-size: 12px; white-space: nowrap; }
    .leaderboard-table td { padding: 10px; border-bottom: 1px solid #f3c4d9; text-align: center; font-size: 13px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: #1a1a1a; }
    .leaderboard-table tbody tr:nth-child(even) { background: #f7fff9; }
    .leaderboard-table tbody tr:hover { background: #eefbea; }
    .leaderboard-table .player-name { text-align: left; font-weight: 800; }
    .leaderboard-table .rank-cell { font-weight: 900; }
    .leaderboard-table .top-1 { background: #fff7d6; }
    .leaderboard-table .top-2 { background: #f1f1f1; }
    .leaderboard-table .top-3 { background: #fff0df; }


    .accordion-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      list-style: none;
      color: var(--green);
      font-size: 20px;
      font-weight: 900;
    }

    .accordion-summary::-webkit-details-marker {
      display: none;
    }

    .accordion-summary::after {
      content: "Hide";
      background: #eefbea;
      color: var(--green);
      border: 1px solid #b7e6c6;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    details:not([open]) .accordion-summary::after {
      content: "Show";
    }

    .accordion-body {
      margin-top: 14px;
    }

    .leaderboard-actions {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }

    .leaderboard-actions button {
      margin-right: 0;
    }


    /* Compact Live Courts layout */
    .panel-header-compact {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .panel-header-compact h2 {
      margin: 0;
      white-space: nowrap;
    }

    .court-control-inline {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .court-control-inline label {
      margin: 0;
      font-size: 13px;
    }

    .court-control-inline input {
      width: 72px;
      min-height: 38px;
      padding: 6px 8px;
      text-align: center;
    }

    .court-control-inline button {
      min-height: 38px;
      padding: 7px 12px;
      margin: 0;
    }

    #courtsList,
    #doublesCourtsList {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      align-items: stretch;
    }

    #courtsList .court,
    #doublesCourtsList .court {
      margin: 0;
      padding: 10px;
      border-radius: 12px;
      border-left-width: 5px;
    }

    #courtsList .court h3,
    #doublesCourtsList .court h3 {
      font-size: 17px;
      margin-bottom: 4px;
    }

    #courtsList .time-label,
    #doublesCourtsList .time-label {
      font-size: 11px;
      line-height: 1.25;
      margin: 2px 0;
    }

    #courtsList .team,
    #doublesCourtsList .team {
      padding: 7px;
      margin: 6px 0;
      border-radius: 10px;
      font-size: 13px;
    }

    #courtsList .team label,
    #doublesCourtsList .team label {
      margin-top: 4px;
      font-size: 12px;
    }

    #courtsList .score-row,
    #doublesCourtsList .score-row {
      grid-template-columns: 36px 1fr 36px;
      gap: 6px;
      margin-top: 4px;
    }

    #courtsList .score-row .score,
    #doublesCourtsList .score-row .score {
      min-height: 36px;
      font-size: 18px;
      padding: 4px;
    }

    #courtsList .score-btn,
    #doublesCourtsList .score-btn {
      min-height: 36px;
      font-size: 18px;
      padding: 4px;
      border-radius: 9px;
    }

    #courtsList .court > .btn-primary,
    #doublesCourtsList .court > .btn-primary {
      min-height: 38px;
      padding: 7px 10px;
      margin-top: 6px;
      font-size: 13px;
      width: 100%;
    }


    @media (max-width: 1000px) { .setup-row, .desktop-row, .stats-grid, .previous-layout { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } }


    /* Mobile-first polish */
    .mobile-quick-add { display: none !important; }
    body.on-queue-page .mobile-quick-add { display: block !important; }

    @media (max-width: 760px) {
      body {
        background: #043816;
      }

      .app {
        padding: 12px;
        padding-bottom: 92px;
      }

      /* .tabs and .tab-button mobile rules removed — overridden by #mainNavTabs below */

      .hero {
        padding: 18px 14px;
        border-radius: 18px;
        margin-bottom: 14px;
      }

      .logo {
        width: 82px;
        height: 82px;
      }

      .hero h1 {
        font-size: 28px;
        line-height: 1.1;
      }

      .brand-tagline {
        font-size: 15px;
      }

      .fair-badge {
        width: 100%;
        border-radius: 14px;
        font-size: 13px;
      }

      #sessionDisplay {
        font-size: 18px;
      }

      #sessionMeta {
        font-size: 13px;
      }

      #remainingTimer {
        width: 100%;
        font-size: 17px;
        border-radius: 14px;
        padding: 12px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
      }

      .stat-card {
        padding: 14px;
        border-radius: 16px;
      }

      .stat-card small {
        font-size: 11px;
      }

      .stat-card div {
        font-size: 26px;
      }

      .layout {
        gap: 12px;
      }

      /* Keep the original panel order on mobile */
      .layout > div {
        order: 0;
      }

      .panel {
        border-radius: 16px;
        padding: 14px;
        margin-bottom: 12px;
      }

      .panel h2 {
        font-size: 19px;
      }

      input,
      button {
        min-height: 48px;
        font-size: 16px;
      }

      button {
        width: auto;
        margin-right: 6px;
        margin-top: 8px;
      }

      .footer-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .player,
      .court,
      .match,
      .session-card {
        border-radius: 14px;
        padding: 14px;
      }

      .team,
      .player,
      .match {
        overflow-wrap: break-word;
        word-break: break-word;
      }

      .court {
        box-shadow: 0 8px 20px rgba(8, 124, 53, .15);
      }

      .court h3 {
        font-size: 22px;
        margin-bottom: 8px;
      }

      .team {
        padding: 12px;
      }

      .score {
        width: 100%;
        display: block;
        margin: 0;
        text-align: center;
        font-size: 28px;
        font-weight: 900;
      }

      .score-row {
        grid-template-columns: 58px 1fr 58px;
        gap: 10px;
      }

      .score-btn {
        min-height: 56px;
        font-size: 24px;
      }


      .leaderboard-table {
        min-width: 0;
      }

      .leaderboard-table th,
      .leaderboard-table td {
        padding: 9px 8px;
        font-size: 12px;
      }

      .previous-layout {
        grid-template-columns: 1fr;
      }


      .session-filter-grid,
      .skill-row {
        grid-template-columns: 1fr;
      }


      .panel-header-compact {
        align-items: flex-start;
        flex-direction: column;
      }

      .court-control-inline {
        width: 100%;
        justify-content: flex-start;
      }

      .court-control-inline input {
        flex: 0 0 80px;
      }

      .court-control-inline button {
        flex: 1;
      }

      #courtsList,
      #doublesCourtsList {
        grid-template-columns: 1fr;
      }

      /* Only show Add Player bar on queue pages */
      body.on-queue-page .mobile-quick-add {
        display: block;
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 80;
        background: white;
        border-radius: 18px;
        padding: 10px;
        box-shadow: 0 10px 35px rgba(0,0,0,.32);
        border: 1px solid rgba(8,124,53,.2);
      }

      .mobile-quick-add-row {
        display: grid;
        grid-template-columns: 1fr 96px;
        gap: 8px;
        align-items: center;
      }

      .mobile-quick-add input,
      .mobile-quick-add button {
        margin: 0;
        min-height: 48px;
      }

      .mobile-quick-add button {
        width: 100%;
      }
    }

  
    /* Mariveles Pickleball Ground Dark Pink + Orange Theme */
    body {
      background:
        radial-gradient(circle at top right, rgba(255,15,120,.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(248,155,41,.15), transparent 30%),
        var(--dark) !important;
      color: #1a1a1a !important;
    }

    .app {
      max-width: 1500px;
    }

    .tabs {
      background: rgba(5,5,6,.82);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 10px;
      box-shadow: var(--shadow);
    }

    .tab-button {
      background: #111113 !important;
      color: #1a1a1a !important;
      border: 1px solid var(--line) !important;
      box-shadow: none !important;
    }

    .tab-button.active {
      background: var(--brand-gradient) !important;
      color: #fff !important;
      box-shadow: 0 0 22px rgba(255,15,120,.25) !important;
    }

    .hero {
      background:
        linear-gradient(135deg, rgba(255,15,120,.92), rgba(252,101,82,.86), rgba(248,155,41,.92)) !important;
      color: white !important;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 45px rgba(0,0,0,.45), 0 0 35px rgba(255,15,120,.22) !important;
    }

    .hero h1 {
      font-style: italic;
      font-weight: 1000;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .brand-tagline {
      text-transform: uppercase;
      letter-spacing: 4px;
    }

    .logo {
      border-radius: 22px !important;
      background: #0b0b0d !important;
      border: 2px solid rgba(255,255,255,.35);
    }

    .panel,
    .stat-card,
    .session-card {
      background: rgba(17,17,19,.94) !important;
      color: #1a1a1a !important;
      border: 1px solid var(--line) !important;
      box-shadow: var(--shadow) !important;
    }

    .panel h2,
    .accordion-summary {
      color: var(--pink) !important;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .stat-card small,
    label,
    .muted,
    .time-label,
    small {
      color: var(--muted) !important;
    }

    .stat-card div {
      color: var(--orange) !important;
    }

    input,
    select {
      background: #19191c !important;
      color: #1a1a1a !important;
      border: 1px solid #33333a !important;
    }

    input::placeholder {
      color: #77777f;
    }

    .btn-primary {
      background: var(--brand-gradient) !important;
      color: #fff !important;
      border: 0 !important;
      box-shadow: 0 0 22px rgba(255,15,120,.2);
    }

    .btn-dark,
    .score-btn {
      background: #25252a !important;
      color: #fff !important;
      border: 1px solid #3a3a40 !important;
    }

    .btn-light {
      background: rgba(255,15,120,.10) !important;
      color: var(--pink) !important;
      border: 1px solid rgba(255,15,120,.35) !important;
    }

    .btn-danger {
      background: var(--danger) !important;
      color: #fff !important;
    }

    .player,
    .court,
    .match,
    .rank-card {
      background: #151517 !important;
      color: #1a1a1a !important;
      border-left-color: var(--pink) !important;
      border-top: 1px solid var(--line);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .court {
      border: 1px solid rgba(255,15,120,.35) !important;
      border-left: 6px solid var(--pink) !important;
    }

    .court h3 {
      color: var(--orange) !important;
    }

    .team {
      background: #0f0f11 !important;
      color: #1a1a1a !important;
      border: 1px solid #303036 !important;
    }

    .skill-badge {
      background: rgba(248,155,41,.14) !important;
      color: var(--gold) !important;
      border: 1px solid rgba(248,155,41,.45) !important;
    }

    .winner-box {
      background: linear-gradient(135deg, rgba(255,15,120,.92), rgba(248,155,41,.92)) !important;
      color: white !important;
    }

    .leaderboard-table {
      background: #111113 !important;
      color: #1a1a1a !important;
    }

    .leaderboard-table th {
      background: linear-gradient(135deg, var(--pink), var(--orange)) !important;
      color: white !important;
    }

    .leaderboard-table td {
      border-bottom: 1px solid var(--line) !important;
    }

    .leaderboard-table tbody tr:nth-child(even),
    .leaderboard-table tbody tr:hover,
    .leaderboard-table .top-1,
    .leaderboard-table .top-2,
    .leaderboard-table .top-3 {
      background: #18181b !important;
    }

    .leaderboard-table .player-name,
    .legend-row strong {
      color: #1a1a1a !important;
    }

    .accordion-summary::after {
      background: rgba(255,15,120,.12) !important;
      color: var(--pink) !important;
      border: 1px solid rgba(255,15,120,.35) !important;
    }

    .bottom-actions-panel {
      border-top-color: var(--orange) !important;
    }

    .bottom-reset-panel {
      border-top-color: var(--pink) !important;
    }

    #remainingTimer,
    #doublesRemainingTimer,
    .fair-badge {
      background: rgba(5,5,6,.35) !important;
      border: 1px solid rgba(255,255,255,.14);
    }

    @media (max-width: 760px) {
      body {
        background:
          radial-gradient(circle at top, rgba(255,15,120,.18), transparent 30%),
          var(--dark) !important;
      }

      .tabs {
        background: rgba(5,5,6,.96) !important;
      }

      body.on-queue-page .mobile-quick-add {
        background: #111113 !important;
        border: 1px solid var(--line) !important;
      }
    }

  
    .brand-fallback {
      display: inline-grid !important;
      place-items: center;
      font-size: 42px;
      font-weight: 1000;
      letter-spacing: -5px;
      color: #050506 !important;
      background: var(--brand-gradient) !important;
    }
  
    .override-fixed {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
      z-index: 120;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .override-fixed button {
      pointer-events: auto;
      min-width: 220px;
      background: var(--brand-gradient) !important;
      color: #fff !important;
      border: 0 !important;
      border-radius: 999px !important;
      padding: 14px 22px !important;
      box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 26px rgba(255,15,120,.28);
      font-weight: 1000;
      text-transform: uppercase;
      letter-spacing: .8px;
    }

    .override-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 130;
      background: rgba(0,0,0,.72);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .override-modal-backdrop.active {
      display: flex;
    }

    .override-modal {
      width: min(760px, 100%);
      max-height: 90vh;
      overflow: auto;
      background: #111113;
      color: #1a1a1a;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 24px 60px rgba(0,0,0,.62);
    }

    .override-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .override-modal-header h2 {
      margin: 0;
      color: var(--pink);
      text-transform: uppercase;
    }

    .override-close {
      background: #25252a !important;
      color: #fff !important;
      border: 1px solid #3a3a40 !important;
      border-radius: 999px !important;
      padding: 8px 12px !important;
      margin: 0 !important;
    }

    .override-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .override-team-box {
      background: #151517;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
    }

    .override-team-box h3 {
      margin: 0 0 10px;
      color: var(--orange);
    }

    .override-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    @media (max-width: 760px) {
      .override-grid {
        grid-template-columns: 1fr;
      }

      .override-fixed {
        bottom: calc(78px + env(safe-area-inset-bottom));
      }

      .override-fixed button {
        width: 100%;
      }
    }

  
    /* Mariveles Pickleball Ground Court Booking<br><small>5:00 AM – 4:00 PM: ₱250/hr per court | 5:00 PM onwards: ₱300/hr per court</small> */
    .booking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.booking-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:10px}.booking-time{background:#fff0f7;color:#c2185b;border:1px solid #f3c4d9;border-radius:12px;padding:12px;text-align:center;font-weight:900;cursor:pointer;user-select:none;font-size:13px;}.booking-time.selected{background:var(--brand-gradient);color:#fff;border-color:transparent}.booking-time.booked{opacity:.35;cursor:not-allowed;text-decoration:line-through}.booking-summary-box{background:#151517;border:1px solid var(--line);border-left:6px solid var(--orange);border-radius:14px;padding:14px;margin-top:12px}.booking-calendar-toolbar{display:grid;grid-template-columns:1fr 180px 180px;gap:12px;align-items:end;margin-bottom:14px}.booking-card{background:#151517;border:1px solid var(--line);border-left:6px solid var(--pink);border-radius:14px;padding:14px;margin:10px 0}.booking-card strong{color:var(--orange)}.booking-status{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900;background:rgba(248,155,41,.14);color:var(--gold);border:1px solid rgba(248,155,41,.35)}.calendar-day-group{border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;background:#111113}.calendar-day-header{background:linear-gradient(135deg,rgba(255,15,120,.22),rgba(248,155,41,.18));padding:12px 14px;font-weight:1000;color:var(--text)}@media(max-width:760px){.booking-grid,.booking-calendar-toolbar{grid-template-columns:1fr}}

  
    /* Enhanced Booking Calendar */
    .booking-alert-note {
      color: #ff3860 !important;
      font-weight: 1000;
      margin-top: 14px;
      line-height: 1.5;
    }
    .booking-calendar-month {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }
    .booking-calendar-weekday {
      text-align: center;
      color: var(--muted);
      font-weight: 1000;
      font-size: 12px;
      text-transform: uppercase;
    }
    .booking-calendar-day {
      min-height: 140px;
      background: #151517;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px;
      overflow: hidden;
    }
    .booking-calendar-day.empty {
      opacity: .35;
      background: #E03671;
    }
    .booking-calendar-date {
      font-weight: 1000;
      color: var(--orange);
      margin-bottom: 8px;
    }
    .booking-mini {
      border-radius: 10px;
      padding: 8px;
      margin: 6px 0;
      font-size: 12px;
      line-height: 1.35;
      border-left: 4px solid var(--pink);
      background: #111113;
    }
    .booking-mini.waitlisted { border-left-color: var(--gold); }
    .booking-mini.booked { border-left-color: var(--green); }
    .booking-section-title {
      color: var(--pink);
      margin-top: 18px;
      border-top: 1px solid var(--line);
      padding-top: 16px;
    }
    .booking-admin-box {
      border: 1px solid rgba(255,15,120,.35);
      background: rgba(255,15,120,.08);
      border-radius: 14px;
      padding: 14px;
      margin: 14px 0;
    }
    .receipt-thumb {
      display: block;
      max-width: 220px;
      max-height: 220px;
      border-radius: 12px;
      border: 1px solid var(--line);
      margin: 10px 0;
    }
    @media (max-width: 900px) {
      .booking-calendar-month { grid-template-columns: 1fr; }
      .booking-calendar-weekday { display: none; }
      .booking-calendar-day.empty { display: none; }
    }

  
/* Mariveles Pickleball Ground Main Website Menu */
.main-menu {
  align-items: stretch;
}
.nav-accordion {
  position: relative;
  display: inline-block;
}
.nav-accordion summary {
  list-style: none;
  background: #111113;
  color: #1a1a1a;
  border: 1px solid var(--line);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
}
.nav-accordion summary::-webkit-details-marker {
  display: none;
}
.nav-accordion summary::after {
  content: " ▼";
  font-size: 12px;
}
.nav-accordion[open] summary {
  background: var(--brand-gradient);
  color: #fff;
}
.nav-accordion-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #111113;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow);
  z-index: 100;
}
.sub-tab-button {
  width: 100%;
  text-align: left;
  display: block;
  background: #19191c !important;
  color: #1a1a1a !important;
  border: 1px solid #33333a !important;
  border-radius: 10px;
  padding: 11px 12px;
  margin: 5px 0;
  font-weight: 800;
}
.sub-tab-button.active,
.sub-tab-button:hover {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}
@media (max-width: 760px) {
  .nav-accordion {
    width: 100%;
  }
  .nav-accordion summary {
    width: 100%;
    text-align: center;
    border-radius: 999px;
    min-height: 48px;
    padding: 14px 10px;
  }
  .nav-accordion-body {
    position: static;
    margin-top: 8px;
    width: 100%;
  }
}


/* Mariveles Pickleball Ground Pink Theme Override */
:root {
  --dark: #fffafb;
  --panel: #ffffff;
  --panel-2: #fff5fa;
  --line: #f2c5db;
  --pink: #e91e63;
  --rose: #ff4f9a;
  --coral: #ff7eb6;
  --orange: #ffb3d1;
  --gold: #e91e63;
  --soft: #fff5fa;
  --text: #ffffff;
  --muted: #8a5b73;
  --danger: #e53935;
  --green: #e91e63;
  --lime: #ff7eb6;
  --brand-gradient: linear-gradient(135deg, #e91e63, #ff4f9a, #ffc1dd);
}

body {
  background:
    radial-gradient(circle at top right, rgba(255,79,184,.28), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,158,214,.22), transparent 32%),
    var(--dark) !important;
}

.hero {
  background:
    linear-gradient(135deg, rgba(255,47,146,.96), rgba(255,79,184,.92), rgba(255,158,214,.88)) !important;
}

.tab-button.active,
.sub-tab-button.active,
.sub-tab-button:hover,
.btn-primary,
.booking-time.selected,
.nav-accordion[open] summary,
.winner-box,
.leaderboard-table th,
.override-fixed button {
  background: var(--brand-gradient) !important;
}

.panel h2,
.accordion-summary,
.booking-section-title,
.override-modal-header h2 {
  color: var(--pink) !important;
}

.stat-card div,
.court h3,
.booking-card strong,
.booking-calendar-date,
.override-team-box h3 {
  color: var(--coral) !important;
}

.btn-light {
  background: rgba(255,79,184,.12) !important;
  color: var(--pink) !important;
  border-color: rgba(255,79,184,.38) !important;
}

.player,
.court,
.match,
.rank-card,
.booking-card {
  border-left-color: var(--pink) !important;
}

.skill-badge,
.booking-status {
  color: var(--gold) !important;
  border-color: rgba(255,158,214,.45) !important;
  background: rgba(255,158,214,.14) !important;
}


/* Open Play hover dropdown on desktop */
@media (min-width: 761px) {
  .nav-accordion .nav-accordion-body {
    display: none;
  }

  .nav-accordion:hover .nav-accordion-body,
  .nav-accordion:focus-within .nav-accordion-body {
    display: block;
  }

  .nav-accordion:hover summary {
    background: var(--brand-gradient);
    color: #fff;
  }

  .nav-accordion[open]:not(:hover):not(:focus-within) .nav-accordion-body {
    display: none;
  }
}


/* Calendar View Controls + Receipt Archive */
.calendar-view-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.calendar-view-btn {
  background: #ffffff !important;
  color: var(--pink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 900;
}
.calendar-view-btn.active {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}
.booking-list-day {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.booking-list-day h3 {
  margin-top: 0;
  color: var(--pink);
}
.booking-mini.both-courts,
.booking-card.both-courts {
  border-left-color: #9c27b0 !important;
}
.booking-status.booked { background: rgba(76,175,80,.12) !important; color: #2e7d32 !important; border-color: rgba(76,175,80,.35) !important; }
.booking-status.waitlisted { background: rgba(255,193,7,.14) !important; color: #9a6b00 !important; border-color: rgba(255,193,7,.35) !important; }
.booking-status.cancelled { background: rgba(229,57,53,.12) !important; color: #b71c1c !important; border-color: rgba(229,57,53,.35) !important; }
.receipt-archive-month {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
  background: #fff;
}
.receipt-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.receipt-archive-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--soft);
}
.config-warning {
  background: #fff3cd;
  border: 1px solid #ffe08a;
  color: #7a5a00;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
  font-weight: 800;
}
@media(max-width:760px){
  .calendar-view-actions { display:grid; grid-template-columns:1fr; }
}


/* Open Play regular page pill menu */
.open-play-pill-menu {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 0 18px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.open-play-pill-menu::-webkit-scrollbar { display: none; }

.open-play-pill {
  background: #fff5fa !important;
  color: var(--pink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 900;
  flex: 0 0 auto;
  white-space: nowrap;
}

.open-play-pill.active,
.open-play-pill:hover {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .open-play-pill-menu {
    display: grid;
    grid-template-columns: 1fr;
  }

  .open-play-pill {
    width: 100%;
  }
}


/* White text override */
body,
p,
span,
div,
label,
small,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
.panel,
.stat-card,
.booking-card,
.rank-card,
.court,
.match {
    color: #ffffff !important;
}


/* Court announcement controls */
.announce-courts-box {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 79, 184, .08);
}
.announce-courts-box small {
  display: block;
  margin-top: 6px;
}


/* Open Play main submenu */
.open-play-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.open-play-main-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 8px solid var(--pink);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.open-play-main-card h2 {
  margin-top: 0;
}
.open-play-main-card p {
  line-height: 1.6;
}
.open-play-main-card button {
  width: 100%;
  margin-top: 10px;
}

/* Better Bangers Queue mode: Live Courts only, no session saving/history navigation */
body.club-open-play-queue-mode #currentGame .open-play-pill-menu,
body.club-open-play-queue-mode #currentGame .completed-bottom,
body.club-open-play-queue-mode #currentGame .bottom-actions-panel,
body.club-open-play-queue-mode #currentGame .queue-bottom {
  display: none !important;
}

body.club-open-play-queue-mode #currentGame .hero #sessionDisplay::after {
  content: " - Better Bangers Queue";
}


/* ===== Professional UI Refresh ===== */
:root {
  --dark: #fff7fb;
  --panel: #ffffff;
  --panel-2: #fff0f7;
  --line: #f3c4d9;
  --pink: #d81b60;
  --rose: #ec407a;
  --coral: #f06292;
  --orange: #f8a8c8;
  --gold: #d81b60;
  --soft: #fff4fa;
  --text: #3b2130;
  --muted: #87596f;
  --danger: #d32f2f;
  --green: #d81b60;
  --lime: #f06292;
  --shadow: 0 12px 34px rgba(216, 27, 96, .12);
  --brand-gradient: linear-gradient(135deg, #d81b60, #ec407a, #f8bbd0);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(236, 64, 122, .12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(248, 187, 208, .20), transparent 32%),
    #fff7fb !important;
  color: #1a1a1a !important;
  font-family: Inter, Arial, sans-serif !important;
  line-height: 1.55;
}

.app {
  max-width: 1220px !important;
  padding: 22px !important;
}

/* Top Navigation */
.tabs.main-menu {
  position: sticky;
  top: 12px;
  z-index: 100;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(216, 27, 96, .16) !important;
  border-radius: 22px !important;
  padding: 10px !important;
  box-shadow: 0 18px 42px rgba(216, 27, 96, .12) !important;
  backdrop-filter: blur(12px);
}

.tab-button {
  background: transparent !important;
  color: #7b3654 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 12px 17px !important;
  font-size: 13px !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  transition: all .18s ease;
  box-shadow: none !important;
}

.tab-button:hover {
  background: #fff0f7 !important;
  color: var(--pink) !important;
  transform: translateY(-1px);
}

.tab-button.active {
  background: var(--brand-gradient) !important;
  color: white !important;
  box-shadow: 0 10px 22px rgba(216, 27, 96, .22) !important;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(216,27,96,.95), rgba(236,64,122,.86), rgba(248,187,208,.94)) !important;
  border-radius: 30px !important;
  padding: 46px 28px !important;
  box-shadow: 0 24px 60px rgba(216, 27, 96, .22) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}

.hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -100px;
  top: -120px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff !important;
  text-transform: none !important;
  font-style: normal !important;
  letter-spacing: -.5px !important;
  font-size: clamp(32px, 5vw, 58px) !important;
  line-height: 1.02;
  margin-bottom: 10px !important;
}

.brand-tagline {
  position: relative;
  z-index: 1;
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: 1px !important;
  font-size: clamp(16px, 2vw, 22px) !important;
  font-weight: 700 !important;
}

.fair-badge {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.logo {
  position: relative;
  z-index: 1;
  border-radius: 24px !important;
  width: 96px !important;
  height: 96px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Cards and Panels */
.panel,
.stat-card,
.open-play-main-card,
.booking-card,
.session-card,
.rank-card,
.court,
.match {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(216, 27, 96, .14) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow) !important;
}

.panel {
  padding: 24px !important;
}

.panel h1,
.panel h2,
.panel h3,
.accordion-summary,
.booking-section-title {
  color: var(--pink) !important;
  letter-spacing: -.2px !important;
  text-transform: none !important;
}

.panel p {
  color: #1a1a1a !important;
  font-size: 15px;
}

.muted,
small,
.time-label,
label {
  color: var(--muted) !important;
}

.stats-grid {
  gap: 16px !important;
}

.stat-card {
  padding: 22px !important;
  min-height: 116px;
  border-left: 6px solid rgba(216, 27, 96, .7) !important;
}

.stat-card small {
  color: var(--muted) !important;
  font-size: 12px !important;
  letter-spacing: .7px;
}

.stat-card div {
  color: var(--pink) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
}

/* Forms */
input,
select,
textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #edc2d5 !important;
  border-radius: 14px !important;
  min-height: 46px;
  transition: box-shadow .18s ease, border-color .18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 4px rgba(216, 27, 96, .10) !important;
}

input::placeholder {
  color: #b27b94 !important;
}

/* Buttons */
button,
.btn-primary,
.btn-dark,
.btn-light,
.btn-danger,
.score-btn {
  border-radius: 999px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

button:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(216, 27, 96, .20) !important;
}

.btn-dark {
  background: #3b2130 !important;
  color: #fff !important;
}

.btn-light {
  background: #fff0f7 !important;
  color: var(--pink) !important;
  border: 1px solid #f3c4d9 !important;
}

.btn-danger {
  background: #d32f2f !important;
  color: #fff !important;
}

/* Open Play Pills */
.open-play-pill-menu {
  background: rgba(255,255,255,.88) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(216, 27, 96, .14) !important;
  box-shadow: var(--shadow) !important;
}

.open-play-pill {
  background: #fff0f7 !important;
  color: var(--pink) !important;
  border: 1px solid #f3c4d9 !important;
}

.open-play-pill.active,
.open-play-pill:hover {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

/* Live Courts */
.court {
  border-left: 7px solid var(--pink) !important;
  background: #fff !important;
}

.court h3,
.booking-card strong,
.override-team-box h3 {
  color: var(--pink) !important;
}

.team {
  background: #fff7fb !important;
  color: #1a1a1a !important;
  border: 1px solid #f4d0df !important;
}

.player,
.match,
.rank-card {
  border-left: 7px solid var(--coral) !important;
  background: #fff !important;
}

/* Calendar and Booking */
.booking-time {
  background: #fff0f7 !important;
  color: #c2185b !important;
  border: 1px solid #f3c4d9 !important;
  font-size: 13px !important;
  padding: 10px 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 12px !important;
  text-align: center !important;
  font-weight: 900 !important;
  transition: all .15s;
}

.booking-time:hover:not(.booked) {
  background: #fce4ec !important;
  border-color: #e91e63 !important;
}

.booking-time.selected {
  background: linear-gradient(135deg, #e91e63, #ff4f9a) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.booking-time.booked {
  background: #f5f5f5 !important;
  color: #aaa !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  opacity: .6 !important;
}

.booking-summary-box,
.booking-admin-box,
.config-warning,
.booking-list-day,
.receipt-archive-month,
.receipt-archive-item {
  background: #fff7fb !important;
  color: #1a1a1a !important;
  border: 1px solid #f3c4d9 !important;
  border-radius: 18px !important;
}

.booking-alert-note {
  background: #fff0f4;
  border: 1px solid #ffc8d8;
  border-radius: 16px;
  padding: 12px 14px;
  color: #c2185b !important;
}

.booking-status {
  background: #fff0f7 !important;
  color: var(--pink) !important;
  border: 1px solid #f3c4d9 !important;
}

.booking-status.booked {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  border-color: #a5d6a7 !important;
}

.booking-status.waitlisted {
  background: #fff8e1 !important;
  color: #9a6b00 !important;
  border-color: #ffe082 !important;
}

/* Tables */
.leaderboard-table {
  background: #fff !important;
  color: #1a1a1a !important;
}

.leaderboard-table th {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

.leaderboard-table td {
  color: #1a1a1a !important;
  border-bottom: 1px solid #f3d3e1 !important;
}

.leaderboard-table tbody tr:nth-child(even),
.leaderboard-table tbody tr:hover {
  background: #fff7fb !important;
}

/* Fix previous forced white text */
body,
p,
span,
div,
label,
small,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
.panel,
.stat-card,
.booking-card,
.rank-card,
.court,
.match {
  color: inherit;
}

.hero *,
.btn-primary,
.btn-dark,
.btn-danger,
.tab-button.active,
.open-play-pill.active {
  color: #fff !important;
}

/* Mobile */
@media (max-width: 760px) {
  .app {
    padding: 12px !important;
  }

  .tabs.main-menu {
    top: 0;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
  }

  .tab-button {
    /* width/flex controlled by mobile nav override below */
  }

  .hero {
    padding: 28px 18px !important;
    border-radius: 24px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .panel {
    padding: 18px !important;
  }
}


/* Global Login Button */
.global-login-area {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 300;
}

.global-login-btn {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(216, 27, 96, .24);
}

.global-login-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(59, 33, 48, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.global-login-modal.active {
  display: flex;
}

.global-login-box {
  width: min(420px, 100%);
  background: #fff;
  color: #1a1a1a;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(59, 33, 48, .26);
}

.global-login-box h2 {
  margin-top: 0;
  color: var(--pink) !important;
}

.global-login-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.global-login-status {
  margin-top: 10px;
  font-weight: 800;
  color: var(--muted) !important;
}

@media (max-width: 760px) {
  .global-login-area {
    top: auto;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .global-login-btn {
    padding: 12px 16px !important;
  }
}


/* Calendar Subtabs + Open Play Schedule */
.calendar-subtabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 10px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.calendar-subtab-button {
  background: #fff0f7 !important;
  color: var(--pink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 900;
}

.calendar-subtab-button.active,
.calendar-subtab-button:hover {
  background: var(--brand-gradient) !important;
  color: #fff !important;
}

.calendar-subtab-content {
  display: none;
}

.calendar-subtab-content.active {
  display: block;
}

.open-play-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}

.open-play-schedule-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 7px solid var(--pink);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.open-play-schedule-card h3 {
  color: var(--pink) !important;
  margin-top: 0;
}

.open-play-player-list {
  margin-top: 10px;
  padding: 10px;
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-radius: 14px;
}

.open-play-request-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 7px solid #f8a8c8;
  border-radius: 18px;
  padding: 14px;
  margin: 10px 0;
  box-shadow: var(--shadow);
}

.open-play-request-status {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
  background: #fff0f7;
  color: var(--pink);
  border: 1px solid var(--line);
}

.open-play-request-status.confirmed { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }
.open-play-request-status.waitlisted { background:#fff8e1; color:#9a6b00; border-color:#ffe082; }
.open-play-request-status.requested { background:#fff0f7; color:var(--pink); border-color:var(--line); }

@media(max-width:760px){
  .calendar-subtabs { display:grid; grid-template-columns:1fr; }
  .calendar-subtab-button { width:100%; }
}


/* Calendar readability improvements */
#courtBookingCalendar,
#courtBookingCalendar * ,
#courtBookingCalendarSubtab,
#courtBookingCalendarSubtab *,
#openPlayScheduleSubtab,
#openPlayScheduleSubtab * {
  color: #2d3748 !important;
}

#courtBookingCalendar h1,
#courtBookingCalendar h2,
#courtBookingCalendar h3,
#openPlayScheduleSubtab h1,
#openPlayScheduleSubtab h2,
#openPlayScheduleSubtab h3 {
  color: #c2185b !important;
  font-weight: 700 !important;
}

.booking-card,
.open-play-schedule-card,
.open-play-request-card,
.booking-summary-box,
.booking-admin-box,
.booking-list-day,
.receipt-archive-item {
  background: #ffffff !important;
}

.booking-card strong,
.open-play-schedule-card strong,
.open-play-request-card strong {
  color: #1a202c !important;
}

.booking-card p,
.open-play-schedule-card p,
.open-play-request-card p,
.booking-card div,
.open-play-schedule-card div,
.open-play-request-card div,
.booking-card span,
.open-play-schedule-card span,
.open-play-request-card span {
  color: #2d3748 !important;
}

.booking-calendar-toolbar label,
.calendar-view-actions label,
#courtBookingCalendar label,
#openPlayScheduleSubtab label {
  color: #4a5568 !important;
  font-weight: 600 !important;
}

.booking-calendar-toolbar input,
.booking-calendar-toolbar select,
#courtBookingCalendar input,
#courtBookingCalendar select,
#openPlayScheduleSubtab input,
#openPlayScheduleSubtab select {
  color: #1a202c !important;
  background: #fff !important;
}

.booking-alert-note {
  color: #9c1c4f !important;
  font-weight: 600;
}

.open-play-player-list {
  color: #1a202c !important;
  background: #fafafa !important;
}

.calendar-subtab-button {
  font-weight: 700 !important;
}

.booking-status.booked {
  color: #1b5e20 !important;
}

.booking-status.waitlisted {
  color: #8a5a00 !important;
}

.open-play-request-status.confirmed {
  color: #1b5e20 !important;
}

.open-play-request-status.waitlisted {
  color: #8a5a00 !important;
}

.open-play-request-status.requested {
  color: #9c1c4f !important;
}


/* Revised Open Play Schedule cards */
.open-play-admin-player-tools {
  margin-top: 12px;
  padding: 12px;
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-radius: 16px;
}

.open-play-player-pill-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.open-play-player-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff0f7;
  border: 1px solid #f3c4d9;
  color: #2d3748 !important;
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 700;
}

.open-play-player-pill small {
  color: #9c1c4f !important;
  font-weight: 800;
}

.open-play-schedule-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.open-play-schedule-meta div {
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-radius: 14px;
  padding: 10px;
}

.open-play-empty-state {
  background: #fff7fb;
  border: 1px dashed #f3c4d9;
  border-radius: 18px;
  padding: 18px;
  color: #4a5568 !important;
}


/* Site-wide contrast pass */
button,
.btn-primary,
.btn-dark,
.btn-light,
.btn-danger,
.tab-button,
.open-play-pill,
.calendar-subtab-button,
.calendar-view-btn,
.previous-subtab-button,
.score-btn,
.global-login-btn {
  font-weight: 900 !important;
  text-shadow: none !important;
}

.btn-primary,
.tab-button.active,
.open-play-pill.active,
.calendar-subtab-button.active,
.calendar-view-btn.active,
.global-login-btn,
.winner-box,
.override-fixed button {
  color: #ffffff !important;
  background: linear-gradient(135deg, #c2185b, #e91e63, #f06292) !important;
  border: 1px solid #c2185b !important;
}

.btn-light,
.calendar-view-btn,
.calendar-subtab-button,
.open-play-pill,
.previous-subtab-button {
  color: #9c1c4f !important;
  background: #ffffff !important;
  border: 1px solid #c2185b !important;
}

.btn-light:hover,
.calendar-view-btn:hover,
.calendar-subtab-button:hover,
.open-play-pill:hover,
.previous-subtab-button:hover {
  color: #ffffff !important;
  background: #c2185b !important;
}

.btn-dark,
.score-btn {
  color: #ffffff !important;
  background: #4a1f35 !important;
  border: 1px solid #4a1f35 !important;
}

.btn-danger {
  color: #ffffff !important;
  background: #b71c1c !important;
  border: 1px solid #b71c1c !important;
}

button:disabled,
.booking-time.booked {
  color: #5f6368 !important;
  background: #eeeeee !important;
}

/* readable text on all light cards */
.panel,
.stat-card,
.open-play-main-card,
.booking-card,
.open-play-schedule-card,
.open-play-request-card,
.team,
.player,
.court,
.match,
.rank-card,
.session-card,
.booking-list-day,
.receipt-archive-item,
.open-play-player-list {
  color: #2d3748 !important;
}

.panel p,
.panel div,
.panel span,
.stat-card div,
.open-play-main-card p,
.booking-card,
.open-play-schedule-card,
.open-play-request-card,
.team,
.player,
.court,
.match,
.rank-card,
.session-card {
  color: #2d3748 !important;
}

.hero,
.hero *,
.btn-primary,
.btn-dark,
.btn-danger,
.tab-button.active,
.open-play-pill.active,
.calendar-subtab-button.active,
.calendar-view-btn.active,
.global-login-btn {
  color: #ffffff !important;
}

input,
select,
textarea {
  color: #1a202c !important;
  background: #ffffff !important;
}

/* Open Play empty state readable */
.open-play-empty-state {
  color: #2d3748 !important;
  background: #ffffff !important;
}


/* Simple Live Court Queue reset option */
.simple-queue-reset-panel {
  display: none;
}

body.club-open-play-queue-mode .simple-queue-reset-panel {
  display: block !important;
}



/* Pink + White Real Calendar Layout */
#courtBookingCalendar .panel {
  background: #ffffff !important;
  border: 1px solid #f8c8dc !important;
  box-shadow: 0 14px 35px rgba(216, 27, 96, .10) !important;
}
#courtBookingCalendar .booking-calendar-month {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  background: #f8c8dc !important;
  border: 1px solid #f8c8dc !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-top: 18px !important;
}
#courtBookingCalendar .booking-calendar-weekday {
  background: linear-gradient(135deg, #d81b60, #ec407a, #f8bbd0) !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 13px 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
}
#courtBookingCalendar .booking-calendar-day {
  min-height: 155px !important;
  background: #ffffff !important;
  border-right: 1px solid #f8c8dc !important;
  border-bottom: 1px solid #f8c8dc !important;
  border-radius: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
}
#courtBookingCalendar .booking-calendar-day.empty {
  background: #fff5fa !important;
  opacity: 1 !important;
}
#courtBookingCalendar .booking-calendar-date {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #fff0f7 !important;
  color: #c2185b !important;
  font-weight: 1000 !important;
  margin-bottom: 8px !important;
}
#courtBookingCalendar .booking-mini {
  background: #fff0f7 !important;
  border: 1px solid #f3c4d9 !important;
  border-left: 5px solid #ec407a !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin: 7px 0 !important;
  color: #2d3748 !important;
  box-shadow: 0 5px 12px rgba(216, 27, 96, .08) !important;
}
#courtBookingCalendar .booking-mini.booked {
  background: #ffe4ef !important;
  border-left-color: #d81b60 !important;
}
#courtBookingCalendar .booking-mini.waitlisted {
  background: #fff7fb !important;
  border-left-color: #f8a8c8 !important;
}
#courtBookingCalendar .booking-mini.cancelled {
  background: #fee2e2 !important;
  border-left-color: #b91c1c !important;
}
#courtBookingCalendar .booking-mini.both-courts {
  border-left-color: #9c27b0 !important;
}
#courtBookingCalendar .booking-mini-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 5px !important;
}
#courtBookingCalendar .booking-mini-top strong {
  color: #9c1c4f !important;
  font-size: 12px !important;
}
#courtBookingCalendar .booking-mini-name {
  color: #1f2937 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
#courtBookingCalendar .booking-mini-time {
  color: #4b5563 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
}
#courtBookingCalendar .booking-status {
  background: #ffffff !important;
  border: 1px solid #f3c4d9 !important;
  color: #c2185b !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
#courtBookingCalendar .booking-status.booked {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}
#courtBookingCalendar .booking-status.waitlisted {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #fed7aa !important;
}
#courtBookingCalendar .booking-status.cancelled {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}
#courtBookingCalendar .booking-section-title {
  background: #fff0f7 !important;
  border: 1px solid #f3c4d9 !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  color: #c2185b !important;
}
@media (max-width: 900px) {
  #courtBookingCalendar .booking-calendar-month {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  #courtBookingCalendar .booking-calendar-weekday {
    display: none !important;
  }
  #courtBookingCalendar .booking-calendar-day {
    min-height: auto !important;
    border: 1px solid #f8c8dc !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }
  #courtBookingCalendar .booking-calendar-day.empty {
    display: none !important;
  }
}



/* ===== Gallery Template: Pink & White Masonry + Admin Upload ===== */
.gallery-hero-note {
  max-width: 760px;
  margin: 16px auto 0;
  color: #fff !important;
  font-size: 16px;
}
.gallery-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.gallery-filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gallery-filter-btn {
  background: #fff !important;
  color: #c2185b !important;
  border: 1px solid #f3c4d9 !important;
  border-radius: 999px !important;
  padding: 10px 15px !important;
  font-weight: 900 !important;
}
.gallery-filter-btn.active,
.gallery-filter-btn:hover {
  background: linear-gradient(135deg, #c2185b, #e91e63, #f8bbd0) !important;
  color: #fff !important;
}
.gallery-admin-panel {
  display: none;
  background: #fff7fb !important;
  border: 1px solid #f3c4d9 !important;
  border-left: 7px solid #e91e63 !important;
  border-radius: 22px !important;
  padding: 18px !important;
  margin-bottom: 18px;
}
.gallery-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gallery-admin-panel h2,
.gallery-admin-panel h3 {
  color: #c2185b !important;
}
.gallery-admin-panel label,
.gallery-admin-panel small,
.gallery-admin-panel p,
.gallery-admin-panel div {
  color: #4a5568 !important;
}
.gallery-featured {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
  margin-bottom: 20px;
}
.gallery-featured-card,
.gallery-empty-state {
  background: linear-gradient(135deg, #fff, #fff7fb) !important;
  border: 1px solid #f3c4d9 !important;
  border-radius: 24px !important;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(216, 27, 96, .10);
}
.gallery-featured-card {
  min-height: 250px;
  position: relative;
}
.gallery-featured-card img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  display: block;
}
.gallery-featured-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  background: linear-gradient(transparent, rgba(59, 33, 48, .78));
  color: #fff !important;
}
.gallery-featured-overlay * {
  color: #fff !important;
}
.gallery-empty-state {
  padding: 30px;
  text-align: center;
  display: grid;
  place-items: center;
  min-height: 250px;
}
.gallery-empty-state h2 {
  color: #c2185b !important;
}
.gallery-empty-state p {
  color: #4a5568 !important;
}
.gallery-masonry {
  columns: 3 250px;
  column-gap: 14px;
}
.gallery-card {
  break-inside: avoid;
  margin: 0 0 14px;
  background: #fff !important;
  border: 1px solid #f3c4d9 !important;
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(216, 27, 96, .10);
  cursor: pointer;
}
.gallery-card img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.gallery-card-body {
  padding: 13px 14px 14px;
}
.gallery-card-body h3 {
  margin: 0 0 5px;
  color: #c2185b !important;
  font-size: 16px;
}
.gallery-card-body p,
.gallery-card-body small,
.gallery-card-body div {
  color: #4a5568 !important;
}
.gallery-category-badge {
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff0f7;
  border: 1px solid #f3c4d9;
  color: #c2185b !important;
  font-size: 12px;
  font-weight: 900;
}
.gallery-card-actions {
  display: none;
  padding: 0 14px 14px;
}
body.gallery-admin-visible .gallery-card-actions {
  display: block;
}
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(59, 33, 48, .78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.gallery-lightbox.active {
  display: flex;
}
.gallery-lightbox-box {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 26px;
  border: 1px solid #f3c4d9;
  box-shadow: 0 24px 70px rgba(59, 33, 48, .30);
}
.gallery-lightbox-box img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  background: #fff7fb;
}
.gallery-lightbox-content {
  padding: 18px;
}
.gallery-lightbox-content h2 {
  color: #c2185b !important;
  margin: 0 0 6px;
}
.gallery-lightbox-content p,
.gallery-lightbox-content small,
.gallery-lightbox-content div {
  color: #4a5568 !important;
}
.gallery-lightbox-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0 18px 18px;
}
@media (max-width: 900px) {
  .gallery-featured { grid-template-columns: 1fr; }
  .gallery-admin-grid { grid-template-columns: 1fr; }
}


/* ===== Calendar redesign requested: no header, booking subtabs, compact monthly view ===== */
#courtBookingCalendar > .hero {
  display: none !important;
}

.mpg-main-calendar-tabs {
  margin-bottom: 14px !important;
}

.mpg-calendar-panel {
  padding: 16px !important;
  overflow: hidden;
}

.mpg-booking-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-radius: 18px;
}

.mpg-calendar-toolbar {
  display: grid;
  grid-template-columns: 1fr 170px 170px;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.mpg-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 12px;
  font-size: 12px;
  font-weight: 800;
  color: #4a5568 !important;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 5px;
  vertical-align: -2px;
}

.legend-booked { background: #e53935; }
.legend-waitlisted { background: #f59e0b; }

.mpg-calendar-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin: 8px 0 10px;
}

.mpg-calendar-title-row h2 {
  margin: 0 !important;
  color: #c2185b !important;
}

.mpg-calendar-note {
  margin: 0;
  font-size: 12px;
  color: #87596f !important;
  font-weight: 700;
}

.mpg-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #f3c4d9;
  border-radius: 14px;
  background: #fff;
}

.mpg-today-table,
.mpg-week-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
  background: #fff;
}

.mpg-today-table th,
.mpg-today-table td,
.mpg-week-table th,
.mpg-week-table td {
  border: 1px solid #f3d3e1;
  padding: 7px 6px;
  text-align: center;
  font-size: 11px;
  color: #2d3748 !important;
  vertical-align: middle;
}

.mpg-today-table th,
.mpg-week-table th {
  background: #fff0f7;
  color: #9c1c4f !important;
  font-weight: 900;
}

.mpg-today-table .court-label,
.mpg-week-table .time-label-cell {
  background: #fff7fb;
  color: #9c1c4f !important;
  font-weight: 900;
  white-space: nowrap;
}

.mpg-slot-cell {
  min-width: 70px;
  height: 42px;
  background: #ffffff;
}

.mpg-slot-cell.booked {
  background: #e53935 !important;
  color: #ffffff !important;
  font-weight: 900;
}

.mpg-slot-cell.waitlisted {
  background: #f59e0b !important;
  color: #ffffff !important;
  font-weight: 900;
}

.mpg-slot-cell.open-play {
  background: #dbeafe !important;
  color: #1e40af !important;
  font-weight: 900;
}

.mpg-week-table {
  min-width: 1500px;
}

.mpg-week-table .day-head {
  background: #fce7f3;
  font-size: 12px;
}

.mpg-week-table .date-head {
  background: #fff7fb;
  color: #87596f !important;
}

.mpg-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.mpg-month-weekday {
  text-align: center;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 1000;
  color: #87596f !important;
  text-transform: uppercase;
}

.mpg-month-day {
  min-height: 74px;
  border: 1px solid #f3d3e1;
  background: #fff;
  border-radius: 9px;
  padding: 5px;
  overflow: hidden;
}

.mpg-month-day.empty {
  background: #fff8fb;
  opacity: .45;
}

.mpg-month-date {
  color: #c2185b !important;
  font-size: 11px;
  font-weight: 1000;
  margin-bottom: 3px;
}

.mpg-month-mini {
  display: block;
  padding: 3px 4px;
  margin-top: 3px;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2d3748 !important;
  background: #fff0f7;
  border-left: 3px solid #c2185b;
}

.mpg-month-mini.booked {
  background: #fee2e2;
  border-left-color: #e53935;
}

.mpg-month-mini.waitlisted {
  background: #fef3c7;
  border-left-color: #f59e0b;
}

@media (max-width: 900px) {
  .mpg-calendar-toolbar {
    grid-template-columns: 1fr;
  }

  .mpg-calendar-panel {
    padding: 12px !important;
  }

  .mpg-today-table,
  .mpg-week-table {
    min-width: 900px;
  }

  .mpg-month-grid {
    gap: 3px;
  }

  .mpg-month-day {
    min-height: 58px;
    padding: 4px;
    border-radius: 7px;
  }

  .mpg-month-mini {
    font-size: 8px;
    padding: 2px 3px;
  }
}

@media (max-width: 520px) {
  .mpg-booking-subtabs,
  .mpg-main-calendar-tabs {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .mpg-month-day {
    min-height: 42px;
  }

  .mpg-month-mini {
    display: none;
  }

  .mpg-month-day.has-booking::after {
    content: "•";
    display: block;
    color: #c2185b;
    font-size: 20px;
    line-height: 1;
  }
}


/* ===== Calendar fit-to-page adjustment ===== */
#courtBookingCalendar .mpg-calendar-panel {
  padding: 10px !important;
}

#courtBookingCalendar .mpg-main-calendar-tabs,
#courtBookingCalendar .mpg-booking-subtabs {
  gap: 6px !important;
  padding: 6px !important;
  margin-bottom: 8px !important;
}

#courtBookingCalendar .calendar-subtab-button,
#courtBookingCalendar .calendar-view-btn {
  padding: 7px 11px !important;
  min-height: 30px !important;
  font-size: 11px !important;
}

#courtBookingCalendar .mpg-calendar-toolbar {
  grid-template-columns: 1fr 130px 130px !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

#courtBookingCalendar .mpg-calendar-toolbar label {
  font-size: 10px !important;
  margin-top: 0 !important;
}

#courtBookingCalendar .mpg-calendar-toolbar input,
#courtBookingCalendar .mpg-calendar-toolbar select {
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

#courtBookingCalendar .mpg-calendar-legend {
  margin: 4px 0 6px !important;
  gap: 8px !important;
  font-size: 10px !important;
}

#courtBookingCalendar .mpg-calendar-title-row {
  margin: 4px 0 6px !important;
}

#courtBookingCalendar .mpg-calendar-title-row h2 {
  font-size: 17px !important;
}

#courtBookingCalendar .mpg-calendar-note {
  font-size: 10px !important;
}

/* avoid internal scroll where possible */
#courtBookingCalendar .mpg-table-wrap {
  overflow-x: visible !important;
  border-radius: 10px !important;
}

/* Today table: fit within page width */
#courtBookingCalendar .mpg-today-table {
  table-layout: fixed !important;
  min-width: 0 !important;
  width: 100% !important;
}

#courtBookingCalendar .mpg-today-table th,
#courtBookingCalendar .mpg-today-table td {
  padding: 4px 2px !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
  height: 30px !important;
}

#courtBookingCalendar .mpg-today-table .court-label {
  width: 54px !important;
  font-size: 9px !important;
}

#courtBookingCalendar .mpg-today-table .mpg-slot-cell {
  min-width: 0 !important;
}

/* Week table: compress heavily to reduce scrolling */
#courtBookingCalendar .mpg-week-table {
  table-layout: fixed !important;
  min-width: 0 !important;
  width: 100% !important;
}

#courtBookingCalendar .mpg-week-table th,
#courtBookingCalendar .mpg-week-table td {
  padding: 3px 1px !important;
  font-size: 7px !important;
  line-height: 1.05 !important;
  height: 24px !important;
}

#courtBookingCalendar .mpg-week-table .time-label-cell {
  width: 48px !important;
  font-size: 7px !important;
}

#courtBookingCalendar .mpg-week-table .day-head {
  font-size: 8px !important;
}

#courtBookingCalendar .mpg-week-table .date-head {
  font-size: 7px !important;
}

#courtBookingCalendar .mpg-week-table .mpg-slot-cell {
  min-width: 0 !important;
}

/* Monthly calendar: smaller and page-fit */
#courtBookingCalendar .mpg-month-grid {
  gap: 3px !important;
}

#courtBookingCalendar .mpg-month-weekday {
  font-size: 8px !important;
  padding: 2px 1px !important;
}

#courtBookingCalendar .mpg-month-day {
  min-height: 46px !important;
  padding: 3px !important;
  border-radius: 6px !important;
}

#courtBookingCalendar .mpg-month-date {
  font-size: 9px !important;
  margin-bottom: 1px !important;
}

#courtBookingCalendar .mpg-month-mini {
  font-size: 7px !important;
  line-height: 1.05 !important;
  padding: 2px 3px !important;
  margin-top: 2px !important;
  border-radius: 4px !important;
}

/* laptop/tablet fallback: allow horizontal only if screen is very narrow */
@media (max-width: 900px) {
  #courtBookingCalendar .mpg-table-wrap {
    overflow-x: auto !important;
  }

  #courtBookingCalendar .mpg-today-table {
    min-width: 760px !important;
  }

  #courtBookingCalendar .mpg-week-table {
    min-width: 980px !important;
  }

  #courtBookingCalendar .mpg-calendar-toolbar {
    grid-template-columns: 1fr !important;
  }

  #courtBookingCalendar .mpg-month-day {
    min-height: 40px !important;
  }
}

@media (max-width: 520px) {
  #courtBookingCalendar .mpg-month-grid {
    gap: 2px !important;
  }

  #courtBookingCalendar .mpg-month-day {
    min-height: 34px !important;
    padding: 2px !important;
  }

  #courtBookingCalendar .mpg-month-mini {
    display: none !important;
  }

  #courtBookingCalendar .mpg-month-day.has-booking::after {
    content: "•";
    display: block;
    color: #c2185b;
    font-size: 16px;
    line-height: 1;
  }
}


/* ===== Queue Master requested changes ===== */
.queue-master-menu-hero {
  min-height: 1in !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  margin-bottom: 12px !important;
}

.queue-master-menu-hero .logo,
.queue-master-menu-hero .fair-badge {
  display: none !important;
}

.queue-master-menu-hero h1 {
  font-size: 26px !important;
  margin: 0 0 4px !important;
  line-height: 1.05 !important;
}

.queue-master-menu-hero .brand-tagline {
  font-size: 15px !important;
  letter-spacing: .4px !important;
}

.queue-schedule-panel {
  padding: 12px !important;
  margin-bottom: 12px !important;
  text-align: center;
}

.queue-schedule-panel button {
  margin: 0 !important;
}

#currentGame > .hero {
  min-height: 2in !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  margin-bottom: 12px !important;
}

#currentGame > .hero .logo {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  margin-bottom: 4px !important;
}

#currentGame > .hero h1 {
  font-size: 24px !important;
  margin: 0 0 4px !important;
  line-height: 1.05 !important;
}

#currentGame > .hero .brand-tagline,
#currentGame > .hero .fair-badge {
  font-size: 12px !important;
  margin-top: 4px !important;
  padding: 5px 9px !important;
}

#currentGame #sessionDisplay {
  font-size: 15px !important;
  margin-top: 4px !important;
}

#currentGame #sessionMeta,
#currentGame #remainingTimer {
  font-size: 11px !important;
  margin-top: 3px !important;
  padding: 4px 8px !important;
}

@media (min-width: 900px) {
  #currentGame .desktop-row {
    display: grid !important;
    grid-template-columns: 1fr 50% !important;
    gap: 16px !important;
    align-items: start !important;
  }

  #currentGame #courtsList,
  #currentGame #doublesCourtsList {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #currentGame #courtsList .court,
  #currentGame #doublesCourtsList .court {
    width: 100% !important;
    max-width: none !important;
  }

  #currentGame #playerStatsList {
    max-width: 100% !important;
  }

  #currentGame .desktop-row > .panel:nth-child(2) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Open Access Queue: keep only the bottom reset button, hide save/download/history/registration tools */
body.club-open-play-queue-mode #currentGame .open-play-pill-menu,
body.club-open-play-queue-mode #currentGame .completed-bottom,
body.club-open-play-queue-mode #currentGame .bottom-actions-panel,
body.club-open-play-queue-mode #currentGame .queue-bottom {
  display: none !important;
}

body.club-open-play-queue-mode #currentGame .bottom-reset-panel {
  display: block !important;
}

/* Better Bangers keeps submenu as-is */
body:not(.club-open-play-queue-mode) #currentGame .open-play-pill-menu {
  display: flex !important;
}

@media (max-width: 760px) {
  .queue-master-menu-hero {
    min-height: auto !important;
    padding: 12px !important;
  }

  .queue-master-menu-hero h1 {
    font-size: 21px !important;
  }

  #currentGame > .hero {
    min-height: auto !important;
    padding: 12px !important;
  }

  #currentGame > .hero h1 {
    font-size: 20px !important;
  }
}


/* ===== Player Rankings fit-to-page ===== */
#currentGame #playerStatsList,
#currentGame .rank-card,
#currentGame .ranking-card {
  overflow: visible !important;
}

#currentGame #playerStatsList table,
#currentGame #playerStatsList .table {
  width: 100% !important;
  table-layout: fixed !important;
}

#currentGame #playerStatsList,
#currentGame #playerStatsList * {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

#currentGame #playerStatsList .player,
#currentGame #playerStatsList .rank-row,
#currentGame #playerStatsList li,
#currentGame #playerStatsList div {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

#currentGame .panel h2:has(+ small) {
  margin-bottom: 4px !important;
}

@media (min-width: 900px) {
  #currentGame #playerStatsList,
  #currentGame #playerStatsList * {
    font-size: 10px !important;
  }
}

@media (max-width: 760px) {
  #currentGame #playerStatsList,
  #currentGame #playerStatsList * {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
}


/* ===== Queue Master Option A: Live Courts 40%, Player Rankings 60% ===== */
@media (min-width: 900px) {
  #currentGame .desktop-row {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    gap: 16px !important;
    align-items: start !important;
  }

  #currentGame .desktop-row > .panel:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }

  #currentGame .desktop-row > .panel:nth-child(2) {
    width: 100% !important;
    max-width: 100% !important;
  }

  #currentGame #playerStatsList,
  #currentGame #playerStatsList * {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  #currentGame #playerStatsList {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ===== Better Bangers password modal + Open Access visibility update ===== */
.queue-password-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(59, 33, 48, .55);
}

.queue-password-modal.active {
  display: flex;
}

.queue-password-box {
  width: min(430px, 100%);
  background: #ffffff;
  color: #3b2130;
  border: 1px solid #f3c4d9;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(59, 33, 48, .26);
}

.queue-password-box h2 {
  margin: 0 0 8px;
  color: #d81b60 !important;
}

.queue-password-box p {
  color: #87596f !important;
  margin-top: 0;
}

.queue-password-box label {
  color: #87596f !important;
  font-weight: 900;
}

.queue-password-field {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 8px;
  align-items: center;
}

.queue-password-field input {
  min-height: 46px;
  border-radius: 14px !important;
  border: 1px solid #edc2d5 !important;
  color: #3b2130 !important;
  background: #fff !important;
  padding: 10px 12px !important;
}

.queue-password-field button {
  min-height: 46px;
  border-radius: 999px !important;
  background: #fff0f7 !important;
  color: #9c1c4f !important;
  border: 1px solid #c2185b !important;
  margin: 0 !important;
}

.queue-password-status {
  min-height: 20px;
  margin-top: 8px;
  font-weight: 900;
  color: #b71c1c !important;
}

.queue-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Open Access Queue: show Match History, Waiting to Play, and Taking a Break */
body.club-open-play-queue-mode #currentGame .completed-bottom,
body.club-open-play-queue-mode #currentGame .queue-bottom {
  display: block !important;
}

/* Open Access Queue: still hide submenu and save/download tools */
body.club-open-play-queue-mode #currentGame .open-play-pill-menu,
body.club-open-play-queue-mode #currentGame .bottom-actions-panel {
  display: none !important;
}

/* Open Access Queue: keep only bottom reset button */
body.club-open-play-queue-mode #currentGame .bottom-reset-panel {
  display: block !important;
}

@media (max-width: 760px) {
  .queue-password-box {
    padding: 18px;
    border-radius: 20px;
  }

  .queue-password-field {
    grid-template-columns: 1fr;
  }

  .queue-password-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* ===== Equal height courts ===== */
#courtsList,
#doublesCourtsList {
  align-items: stretch !important;
}

#courtsList .court,
#doublesCourtsList .court {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 420px !important;
  box-sizing: border-box !important;
}

#courtsList .court > *,
#doublesCourtsList .court > * {
  width: 100%;
}

#courtsList .court .court-body,
#doublesCourtsList .court .court-body {
  flex: 1 1 auto !important;
}

@media (max-width: 760px) {
  #courtsList .court,
  #doublesCourtsList .court {
    min-height: 320px !important;
  }
}


/* ===== Align Done Match buttons across courts ===== */
#courtsList .court,
#doublesCourtsList .court {
  display: flex !important;
  flex-direction: column !important;
}

#courtsList .court button,
#doublesCourtsList .court button,
#courtsList .court .done-match-btn,
#doublesCourtsList .court .done-match-btn {
  margin-top: auto !important;
  align-self: stretch !important;
}


/* ===== Spotify button beside Override for Better Bangers ===== */
.queue-club-bottom-controls {
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  pointer-events: none;
}

.queue-club-bottom-controls > * {
  pointer-events: auto;
}

.queue-club-bottom-controls .queue-spotify-toggle {
  min-width: auto !important;
  min-height: 38px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: #fff0f7 !important;
  color: #9c1c4f !important;
  border: 1px solid #c2185b !important;
  box-shadow: 0 12px 28px rgba(216, 27, 96, .18);
}

.queue-spotify-floating-player {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 119;
  width: min(620px, calc(100% - 32px));
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #f3c4d9;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 16px 42px rgba(59,33,48,.24);
}

.queue-spotify-floating-player.active {
  display: block;
}

.queue-spotify-floating-player iframe {
  height: 152px !important;
  display: block;
}

@media (max-width: 760px) {
  .queue-club-bottom-controls {
    left: 10px !important;
    right: 10px !important;
    justify-content: center !important;
  }

  .queue-club-bottom-controls button {
    flex: 1 1 auto;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  .queue-spotify-floating-player {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}


/* ===== Beautiful Courts & Pricing section ===== */
.courts-pricing-hero {
  margin-bottom: 16px !important;
}

.courts-pricing-wrap {
  display: grid;
  gap: 16px;
}

.courts-pricing-intro {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.courts-pricing-intro::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  top: -80px;
  border-radius: 999px;
  background: rgba(216, 27, 96, .08);
}

.courts-pricing-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 36px;
  box-shadow: 0 14px 30px rgba(216, 27, 96, .20);
}

.courts-pricing-intro h2 {
  margin: 0 0 6px !important;
}

.courts-pricing-intro p {
  margin: 0;
  color: #4a5568 !important;
}

.pricing-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pricing-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(216, 27, 96, .16);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--shadow);
  min-height: 210px;
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(216, 27, 96, .14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(248, 187, 208, .22), transparent 36%);
  pointer-events: none;
}

.pricing-card-top,
.pricing-card h2,
.pricing-card p,
.pricing-card .pricing-time {
  position: relative;
  z-index: 1;
}

.pricing-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pricing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff0f7;
  color: #c2185b !important;
  border: 1px solid #f3c4d9;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 1000;
  font-size: 12px;
}

.pricing-emoji {
  font-size: 30px;
}

.pricing-card h2 {
  margin: 18px 0 2px !important;
  color: #d81b60 !important;
  font-size: clamp(46px, 6vw, 72px) !important;
  line-height: .95;
  letter-spacing: -2px;
}

.pricing-subtitle {
  margin: 0 0 14px !important;
  color: #87596f !important;
  font-weight: 900;
  font-size: 15px !important;
}

.pricing-time {
  display: inline-flex;
  border-radius: 16px;
  padding: 10px 13px;
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  color: #3b2130 !important;
  font-weight: 900;
}

.peak-rate {
  border-color: rgba(216, 27, 96, .28);
}

.peak-rate::before {
  background:
    radial-gradient(circle at top right, rgba(194, 24, 91, .18), transparent 34%),
    linear-gradient(135deg, rgba(255, 240, 247, .75), rgba(255,255,255,.95));
}

.operating-hours-panel {
  padding: 22px !important;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.section-title-row h2 {
  margin: 0 !important;
}

.section-title-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff0f7;
  border: 1px solid #f3c4d9;
  font-size: 22px;
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hours-card {
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-left: 7px solid #d81b60;
  border-radius: 18px;
  padding: 16px;
}

.hours-card strong {
  display: block;
  color: #c2185b !important;
  font-size: 16px;
  margin-bottom: 6px;
}

.hours-card span {
  color: #3b2130 !important;
  font-weight: 900;
  font-size: 18px;
}

.booking-reminders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.reminder-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f3c4d9;
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.reminder-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff0f7;
  font-size: 26px;
}

.reminder-card strong {
  display: block;
  color: #c2185b !important;
  margin-bottom: 4px;
  font-size: 15px;
}

.reminder-card p {
  margin: 0;
  color: #4a5568 !important;
  font-size: 14px;
}

.approval {
  border-left: 7px solid #f59e0b;
}

.recommended {
  border-left: 7px solid #d81b60;
}

.courts-pricing-actions {
  justify-content: center;
  margin-top: 4px;
}

.courts-pricing-actions button {
  min-width: 170px;
}

@media (max-width: 760px) {
  .courts-pricing-intro,
  .pricing-card-grid,
  .hours-grid,
  .booking-reminders-grid {
    grid-template-columns: 1fr;
  }

  .courts-pricing-intro {
    text-align: center;
  }

  .courts-pricing-icon {
    margin: 0 auto;
  }

  .pricing-card {
    padding: 20px;
    min-height: 190px;
  }

  .pricing-card h2 {
    font-size: 48px !important;
  }

  .reminder-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .reminder-icon {
    margin: 0 auto;
  }

  .courts-pricing-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .courts-pricing-actions button {
    width: 100%;
  }
}


/* ===== Contact / Book compact header and admin booking requests ===== */
.simple-page-header.contact-book-header {
  background: var(--brand-gradient);
  border-radius: 22px;
  padding: 18px 22px;
  margin-bottom: 16px;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(216, 27, 96, .18);
}

.simple-page-header.contact-book-header h1 {
  margin: 0 0 4px;
  color: #ffffff !important;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1;
}

.simple-page-header.contact-book-header p {
  margin: 0;
  color: #ffffff !important;
  font-weight: 800;
  opacity: .95;
}

.contact-book-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.contact-book-card {
  min-height: 100%;
}

.contact-book-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.compact-booking-summary {
  margin-top: 12px;
}

.contact-book-submit {
  width: 100%;
  margin-top: 12px !important;
}

.booking-submit-message {
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20 !important;
  font-weight: 800;
}

.contact-admin-bookings {
  margin-top: 16px;
}

.contact-admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.contact-admin-bookings-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

.contact-admin-bookings-table th {
  background: var(--brand-gradient);
  color: #ffffff !important;
  padding: 10px;
  text-align: left;
  font-size: 12px;
}

.contact-admin-bookings-table td {
  border-bottom: 1px solid #f3d3e1;
  padding: 10px;
  color: #2d3748 !important;
  font-size: 12px;
  vertical-align: top;
}

.contact-booking-status {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 900;
  font-size: 11px;
}

.contact-booking-status.waitlisted {
  background: #fff8e1;
  color: #8a5a00 !important;
  border: 1px solid #ffe082;
}

.contact-booking-status.booked {
  background: #e8f5e9;
  color: #1b5e20 !important;
  border: 1px solid #a5d6a7;
}

.contact-booking-status.declined {
  background: #ffebee;
  color: #b71c1c !important;
  border: 1px solid #ffcdd2;
}

.contact-booking-actions {
  white-space: nowrap;
}

.contact-booking-actions button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  margin: 0 4px 4px 0 !important;
}

.admin-empty-bookings {
  padding: 16px;
  background: #fff7fb;
  border: 1px dashed #f3c4d9;
  border-radius: 16px;
  color: #4a5568 !important;
  font-weight: 800;
}

@media (max-width: 900px) {
  .contact-book-layout,
  .contact-book-form-grid {
    grid-template-columns: 1fr;
  }

  .simple-page-header.contact-book-header {
    padding: 16px;
    border-radius: 18px;
  }
}


/* ===== Admin booking edit/delete UI ===== */
.booking-edit-row td {
  padding: 0 !important;
  border-bottom: 0 !important;
}

.booking-edit-panel {
  display: grid;
  grid-template-columns: 180px 180px 1fr;
  gap: 12px;
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-radius: 16px;
  padding: 14px;
  margin: 8px 0 14px;
}

.booking-edit-panel label {
  color: #87596f !important;
  font-weight: 900 !important;
}

.booking-edit-slots {
  grid-column: span 1;
}

.booking-edit-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.booking-edit-slot {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #f3c4d9;
  border-radius: 999px;
  padding: 6px 9px;
  margin: 0 !important;
  font-size: 11px;
}

.booking-edit-slot input {
  width: auto !important;
  min-height: auto !important;
  margin: 0 !important;
}

.booking-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .booking-edit-panel {
    grid-template-columns: 1fr;
  }
}


/* ===== Gallery hero at top + existing submenu below ===== */
.gallery-hero-slider{position:relative;width:100%;height:clamp(320px,55vw,620px);overflow:hidden;border-radius:30px;box-shadow:0 24px 60px rgba(216,27,96,.22);border:1px solid rgba(216,27,96,.16);background:#111;margin-bottom:16px}
.gallery-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 900ms ease}
.gallery-hero-slide.active{opacity:1}
.gallery-hero-slide img{width:100%;height:100%;object-fit:cover;object-fit:cover;object-position:center 10%;display:block;filter:saturate(1.06) contrast(1.03)}
.gallery-hero-overlay{position:absolute;left:24px;right:24px;bottom:24px;z-index:4;padding:22px;border-radius:24px;color:#fff!important;background:linear-gradient(135deg,rgba(59,33,48,.78),rgba(216,27,96,.54));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);max-width:720px}
.gallery-hero-overlay span{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff!important;font-weight:1000;font-size:12px;letter-spacing:.6px;text-transform:uppercase}
.gallery-hero-overlay h2{margin:10px 0 4px!important;color:#fff!important;font-size:clamp(24px,4vw,48px);line-height:1.04}
.gallery-hero-overlay p{margin:0;color:#fff!important;font-weight:900;font-size:16px}
.gallery-slider-arrow{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;border-radius:999px!important;background:rgba(255,255,255,.88)!important;color:#c2185b!important;border:1px solid rgba(255,255,255,.7)!important;box-shadow:0 12px 28px rgba(0,0,0,.18);font-size:20px!important;margin:0!important;padding:0!important}
.gallery-slider-prev{left:18px}.gallery-slider-next{right:18px}
.gallery-slider-dots{position:absolute;left:50%;bottom:14px;z-index:6;transform:translateX(-50%);display:flex;gap:8px}
.gallery-slider-dots button{width:11px;height:11px;min-height:11px!important;padding:0!important;margin:0!important;border-radius:999px!important;background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.7)!important}
.gallery-slider-dots button.active{width:28px;background:#fff!important}
.gallery-admin-hero-panel{margin:0 0 16px!important}
.gallery-admin-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gallery-admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gallery-admin-note{margin-top:12px;padding:12px 14px;border-radius:16px;background:#fff8e1;border:1px solid #ffe082;color:#8a5a00!important;font-weight:800}
.gallery-admin-item{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;margin-top:12px;padding:10px;border:1px solid #f3c4d9;border-radius:16px;background:#fff7fb}
.gallery-admin-item img{width:120px;height:78px;object-fit:cover;border-radius:12px}
.gallery-admin-item strong,.gallery-admin-item small{color:#2d3748!important}
.gallery-submenu-content{margin-top:16px}
.gallery-sub-menu,.gallery-existing-submenu{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.gallery-sub-button{background:#fff0f7!important;color:#9c1c4f!important;border:1px solid #c2185b!important;border-radius:999px!important;padding:11px 16px!important;font-weight:900!important}
.gallery-sub-button.active,.gallery-sub-button:hover{background:var(--brand-gradient)!important;color:#fff!important}
.gallery-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gallery-photo-card{position:relative;background:#fff;border:1px solid #f3c4d9;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10}
.gallery-photo-card img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-photo-caption{position:absolute;left:10px;right:10px;bottom:10px;border-radius:14px;padding:8px 10px;background:rgba(59,33,48,.70);color:#fff!important;font-weight:900;font-size:12px}
@media(max-width:760px){.gallery-admin-upload-grid,.gallery-admin-item{grid-template-columns:1fr}.gallery-hero-slider{height:360px;border-radius:22px}.gallery-hero-overlay{left:12px;right:12px;bottom:44px;padding:14px;border-radius:18px}.gallery-slider-arrow{width:38px;height:38px}.gallery-slider-prev{left:10px}.gallery-slider-next{right:10px}.gallery-admin-item img{width:100%;height:170px}.gallery-sub-menu,.gallery-existing-submenu{display:grid;grid-template-columns:1fr}.gallery-sub-button{width:100%}}


/* ===== Gallery order fix: hero, submenu/content, then admin upload ===== */
#galleryPage .gallery-submenu-content {
  margin-top: 16px;
}

#galleryPage .gallery-admin-hero-panel {
  margin-top: 18px !important;
}


/* ===== Gallery category submenu directly below hero ===== */
.gallery-category-submenu {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.gallery-category-pill {
  background: #fff0f7 !important;
  color: #9c1c4f !important;
  border: 1px solid #c2185b !important;
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

.gallery-category-pill.active,
.gallery-category-pill:hover {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .gallery-category-submenu {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gallery-category-pill {
    width: 100%;
  }
}


/* ===== Gallery submenu directly under hero slider ===== */
#galleryPage .gallery-category-submenu {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px !important;
  padding: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

#galleryPage .gallery-category-pill {
  background: #fff0f7 !important;
  color: #9c1c4f !important;
  border: 1px solid #c2185b !important;
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

#galleryPage .gallery-category-pill.active,
#galleryPage .gallery-category-pill:hover {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  #galleryPage .gallery-category-submenu {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  #galleryPage .gallery-category-pill {
    width: 100%;
  }
}


/* ===== About Us page: editorial community layout ===== */
.about-mpg-page {
  display: grid;
  gap: 34px;
}

.about-mpg-title {
  background: #E03671;
  color: #ffffff !important;
  text-align: center;
  border-radius: 0;
  padding: 38px 20px;
  box-shadow: var(--shadow);
}

.about-mpg-title h1 {
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  font-weight: 1000;
}

.about-mpg-title p {
  margin: 10px 0 0;
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: .4px;
}

.about-story-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  min-height: 360px;
}

.about-text-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 2px solid #f3c4d9;
  color: #7b3654 !important;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  max-width: 620px;
}

.about-row-left .about-text-card {
  margin-left: 58px;
  margin-right: -42px;
}

.about-row-right .about-text-card {
  margin-right: 58px;
  margin-left: -42px;
}

.about-kicker {
  display: block;
  color: #9c1c4f !important;
  font-weight: 1000;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.about-text-card h2,
.about-love-card h2 {
  margin: 0 0 6px !important;
  color: #9c1c4f !important;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.02;
  font-weight: 1000;
}

.about-text-card p {
  color: #7b3654 !important;
  font-size: 14px;
  line-height: 1.65;
  margin: 10px 0;
}

.about-text-card strong {
  color: #9c1c4f !important;
}

.about-image-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: 0;
  box-shadow: 0 16px 34px rgba(216, 27, 96, .14);
  background: #fff0f7;
}

.about-image-card img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.about-stamped-card {
  padding-top: 54px;
}

.about-sticker { 
  background:#b7ff3c !important;
  border-radius:22px !important;
  border:4px solid #6fa800 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 12px 22px rgba(0,0,0,.18);

  position: absolute;
  top: -34px;
  right: 28px;
  width: 116px;
  height: 116px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #7ff5e8;
  color: #101010 !important;
  border: 3px solid #111;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.15;
  transform: rotate(10deg);
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}

.about-burst {
  background:#b7ff3c !important;
  border-radius:22px !important;
  clip-path:none !important;
  border:4px solid #6fa800 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 12px 22px rgba(0,0,0,.18);

  position: absolute;
  top: -42px;
  right: 28px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #9c1c4f !important;
  background: #4bff72;
  font-weight: 1000;
  font-size: 12px;
  line-height: 1.05;
  clip-path: polygon(50% 0%, 59% 25%, 84% 15%, 75% 41%, 100% 50%, 75% 59%, 84% 85%, 59% 75%, 50% 100%, 41% 75%, 16% 85%, 25% 59%, 0% 50%, 25% 41%, 16% 15%, 41% 25%);
  transform: rotate(-8deg);
  z-index: 4;
}

.about-love-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.about-love-image {
  overflow: hidden;
  min-height: 380px;
  background: #fff0f7;
}

.about-love-image img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

.about-love-card {
  background: #ffffff;
  border: 2px solid #f3c4d9;
  padding: clamp(22px, 3vw, 36px);
  color: #9c1c4f !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-feature-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.about-feature-grid div {
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-left: 6px solid #d81b60;
  border-radius: 16px;
  padding: 13px 14px;
  color: #7b3654 !important;
  font-size: 15px;
}

.about-feature-grid strong {
  color: #9c1c4f !important;
}

.about-bottom-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--brand-gradient);
  color: #ffffff !important;
  border-radius: 28px;
  padding: clamp(22px, 4vw, 40px);
  box-shadow: 0 18px 42px rgba(216, 27, 96, .20);
}

.about-bottom-banner h2 {
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.02;
  font-weight: 1000;
}

.about-bottom-banner p {
  margin: 6px 0 0;
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: .7px;
}

.about-bottom-banner button {
  white-space: nowrap;
  background: #ffffff !important;
  color: #c2185b !important;
  border: 1px solid rgba(255,255,255,.7) !important;
}

@media (max-width: 900px) {
  .about-story-row,
  .about-love-section {
    grid-template-columns: 1fr;
  }

  .about-row-left .about-text-card,
  .about-row-right .about-text-card {
    margin: 0;
    max-width: none;
  }

  .about-row-right .about-image-card {
    order: 2;
  }

  .about-row-right .about-text-card {
    order: 1;
  }

  .about-image-card,
  .about-image-card img,
  .about-love-image,
  .about-love-image img {
    min-height: 280px;
  }

  .about-text-card {
    border-radius: 0;
  }

  .about-sticker,
  .about-burst {
  background:#b7ff3c !important;
  border-radius:22px !important;
  clip-path:none !important;
  border:4px solid #6fa800 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 12px 22px rgba(0,0,0,.18);

    width: 88px;
    height: 88px;
    right: 18px;
    font-size: 9px;
  }

  .about-bottom-banner {
    display: grid;
    text-align: center;
  }

  .about-bottom-banner button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .about-mpg-page {
    gap: 22px;
  }

  .about-mpg-title {
    padding: 28px 16px;
  }

  .about-text-card,
  .about-love-card {
    padding: 20px;
  }
}


/* ===== About Us pink text + admin section image uploads ===== */
#aboutPage .about-text-card,
#aboutPage .about-love-card,
#aboutPage .about-feature-grid div {
  color: #7b3654 !important;
}

#aboutPage .about-text-card h2,
#aboutPage .about-love-card h2,
#aboutPage .about-kicker,
#aboutPage .about-text-card strong,
#aboutPage .about-feature-grid strong {
  color: #9c1c4f !important;
}

#aboutPage .about-text-card p,
#aboutPage .about-love-card p,
#aboutPage .about-feature-grid div {
  color: #7b3654 !important;
}

#aboutPage .about-mpg-title,
#aboutPage .about-mpg-title * {
  color: #ffffff !important;
}

#aboutPage .about-image-card,
#aboutPage .about-love-image {
  border: 1px solid #f3c4d9;
}


/* ===== Inline About image admin buttons ===== */
.about-image-card,
.about-love-image {
  position: relative;
}

.about-inline-image-admin {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 8;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid #f3c4d9;
  box-shadow: 0 12px 28px rgba(59,33,48,.18);
  backdrop-filter: blur(8px);
}

.about-change-image-btn,
.about-reset-image-btn {
  min-height: 38px !important;
  padding: 8px 13px !important;
  margin: 0 !important;
  font-size: 12px !important;
}

@media (max-width: 760px) {
  .about-inline-image-admin {
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .about-inline-image-admin[style*="display:none"] {
    display: none !important;
  }

  .about-change-image-btn,
  .about-reset-image-btn {
    width: 100%;
  }
}


/* ===== Keep Gallery Hero Upload only inside active Gallery page ===== */
.gallery-admin-hero-panel {
  display: none !important;
}

#galleryPage.active .gallery-admin-hero-panel {
  display: none !important;
}

#galleryPage.active.admin-logged-in .gallery-admin-hero-panel,
body.admin-logged-in #galleryPage.active .gallery-admin-hero-panel {
  display: block !important;
}


/* ===== Site-wide content spacing alignment: match Courts & Pricing ===== */
.app {
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.tab-content {
  width: 100% !important;
}

.tab-content > .hero,
.tab-content > .simple-page-header,
.tab-content > .about-mpg-page,
.tab-content > .courts-pricing-wrap,
.tab-content > .contact-book-layout,
.tab-content > .calendar-subtabs,
.tab-content > .panel,
.tab-content > .gallery-hero-slider,
.tab-content > .gallery-category-submenu,
.tab-content > .gallery-submenu-content,
.tab-content > .open-play-main-grid,
.tab-content > .faq-wrap,
.tab-content > .layout,
.tab-content > .stats-grid,
.tab-content > .previous-subtabs,
.tab-content > .previous-layout {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#courtsPricing,
#galleryPage,
#aboutPage,
#faqsPage,
#openPlayLanding,
#currentGame,
#bookCourt,
#courtBookingCalendar,
#previousGames,
#clubRegistration,
#registeredPlayers {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#galleryPage .gallery-hero-slider,
#aboutPage .about-mpg-page,
#courtsPricing .courts-pricing-wrap,
#bookCourt .contact-book-layout,
#bookCourt .contact-admin-bookings,
#courtBookingCalendar .panel,
#faqsPage .panel,
#openPlayLanding .open-play-main-grid,
#currentGame .layout,
#previousGames .previous-layout,
#clubRegistration .panel,
#registeredPlayers .panel {
  width: 100% !important;
}

.panel,
.hero,
.simple-page-header,
.gallery-hero-slider,
.gallery-category-submenu,
.about-mpg-title,
.about-story-row,
.about-love-section,
.about-bottom-banner,
.courts-pricing-wrap,
.contact-book-layout,
.calendar-subtabs,
.open-play-pill-menu,
.previous-subtabs {
  box-sizing: border-box !important;
}

.about-mpg-page {
  max-width: 100% !important;
}

.about-story-row,
.about-love-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.about-row-left .about-text-card {
  margin-left: 0 !important;
}

.about-row-right .about-text-card {
  margin-right: 0 !important;
}

.about-row-left .about-text-card {
  margin-right: -34px !important;
}

.about-row-right .about-text-card {
  margin-left: -34px !important;
}

@media (max-width: 900px) {
  .about-row-left .about-text-card,
  .about-row-right .about-text-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 760px) {
  .app {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tabs.main-menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .panel,
  .hero,
  .simple-page-header,
  .gallery-hero-slider,
  .gallery-category-submenu,
  .about-mpg-title,
  .about-story-row,
  .about-love-section,
  .about-bottom-banner {
    width: 100% !important;
  }
}


/* ===== Fixed page width alignment: match Courts & Pricing content container ===== */
:root {
  --mpg-page-max: 1120px;
}

#bookCourt,
#courtBookingCalendar,
#faqsPage,
#openPlayLanding,
#currentGame,
#aboutPage,
#previousGames,
#clubRegistration,
#registeredPlayers {
  max-width: var(--mpg-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

#bookCourt > *,
#courtBookingCalendar > *,
#faqsPage > *,
#openPlayLanding > *,
#currentGame > *,
#aboutPage > *,
#previousGames > *,
#clubRegistration > *,
#registeredPlayers > * {
  max-width: 100% !important;
}

/* Keep internal cards from breaking out to full viewport */
#bookCourt .contact-book-layout,
#bookCourt .contact-admin-bookings,
#courtBookingCalendar .panel,
#courtBookingCalendar .calendar-subtabs,
#faqsPage .panel,
#openPlayLanding .open-play-main-grid,
#currentGame .hero,
#currentGame .stats-grid,
#currentGame .layout,
#currentGame .open-play-pill-menu,
#aboutPage .about-mpg-page,
#previousGames .previous-subtabs,
#previousGames .previous-layout,
#clubRegistration .panel,
#registeredPlayers .panel {
  width: 100% !important;
  max-width: var(--mpg-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* About page was using edge-to-edge editorial rows; keep the design but inside aligned width */
#aboutPage .about-story-row,
#aboutPage .about-love-section,
#aboutPage .about-bottom-banner,
#aboutPage .about-mpg-title {
  max-width: var(--mpg-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#aboutPage .about-row-left .about-text-card {
  margin-left: 0 !important;
  margin-right: -34px !important;
}

#aboutPage .about-row-right .about-text-card {
  margin-right: 0 !important;
  margin-left: -34px !important;
}

/* Calendar and Queue Master tables can scroll inside their container, not stretch page */
#courtBookingCalendar .table-wrap,
#currentGame .table-wrap,
#previousGames .table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Ensure Gallery can keep its larger hero if desired, but align regular content too */
#galleryPage {
  max-width: var(--mpg-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

#galleryPage .gallery-hero-slider,
#galleryPage .gallery-category-submenu,
#galleryPage .gallery-submenu-content,
#galleryPage .gallery-admin-hero-panel {
  max-width: var(--mpg-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  #aboutPage .about-row-left .about-text-card,
  #aboutPage .about-row-right .about-text-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 760px) {
  #bookCourt,
  #courtBookingCalendar,
  #faqsPage,
  #openPlayLanding,
  #currentGame,
  #aboutPage,
  #previousGames,
  #clubRegistration,
  #registeredPlayers,
  #galleryPage {
    max-width: 100% !important;
  }
}


/* ===== Calendar Today vertical two-court UI + extended-hours styling ===== */
.mpg-today-title {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mpg-hours-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff0f7;
  color: #9c1c4f !important;
  border: 1px solid #c2185b;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 1000;
  white-space: nowrap;
}

.mpg-today-vertical-card {
  background: #ffffff;
  border: 1px solid #f3c4d9;
  border-radius: 26px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.mpg-today-day-banner {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  background: var(--brand-gradient);
  color: #ffffff !important;
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 14px;
}

.mpg-today-day-banner strong {
  color: #ffffff !important;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1;
}

.mpg-today-day-banner span {
  color: #ffffff !important;
  font-weight: 900;
  font-size: 16px;
}

.mpg-today-two-court-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mpg-court-column {
  background: #fff7fb;
  border: 1px solid #f3c4d9;
  border-radius: 22px;
  overflow: hidden;
}

.mpg-court-column-head {
  background: #E03671;
  color: #ffffff !important;
  text-align: center;
  font-weight: 1000;
  padding: 12px;
  font-size: 16px;
}

.mpg-today-slot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #f3d3e1;
  background: #ffffff;
}

.mpg-slot-time {
  color: #7b3654 !important;
  font-weight: 900;
}

.mpg-slot-state {
  display: inline-flex;
  justify-content: center;
  min-width: 92px;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff0f7;
  color: #9c1c4f !important;
  border: 1px solid #f3c4d9;
  font-weight: 900;
  font-size: 12px;
}

.mpg-today-slot.booked,
.mpg-slot-cell.booked {
  background: #ffebee !important;
}

.mpg-today-slot.booked .mpg-slot-state,
.mpg-slot-cell.booked {
  color: #b71c1c !important;
  font-weight: 1000;
}

.mpg-today-slot.waitlisted,
.mpg-slot-cell.waitlisted {
  background: #fff8e1 !important;
}

.mpg-today-slot.waitlisted .mpg-slot-state,
.mpg-slot-cell.waitlisted {
  color: #8a5a00 !important;
  font-weight: 1000;
}

.mpg-today-slot.unavailable,
.mpg-slot-cell.unavailable {
  background: #f3f4f6 !important;
  color: #8a8f98 !important;
}

.mpg-today-slot.unavailable .mpg-slot-time,
.mpg-today-slot.unavailable .mpg-slot-state {
  color: #8a8f98 !important;
}

.mpg-today-slot.unavailable .mpg-slot-state {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
}

.mpg-week-extended-table .extended-day {
  background: #E03671 !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .mpg-today-title {
    display: grid;
  }

  .mpg-hours-badge {
    width: 100%;
  }

  .mpg-today-two-court-grid {
    grid-template-columns: 1fr;
  }

  .mpg-today-slot {
    grid-template-columns: 1fr;
  }

  .mpg-slot-state {
    width: 100%;
  }
}


/* ===== This Month calendar overview tiles ===== */
.mpg-month-overview-title {
  align-items: center;
  justify-content: space-between;
}

.mpg-month-overview-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mpg-month-weekday {
  text-align: center;
  color: #9c1c4f !important;
  font-weight: 1000;
  font-size: 12px;
  text-transform: uppercase;
  padding: 8px 4px;
}

.mpg-month-day-tile {
  min-height: 138px;
  width: 100%;
  text-align: left;
  border: 1px solid #f3c4d9 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 10px !important;
  margin: 0 !important;
  box-shadow: 0 8px 20px rgba(216, 27, 96, .08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mpg-month-day-tile.empty {
  background: #fff7fb !important;
  opacity: .55;
  cursor: default;
  box-shadow: none;
}

.mpg-month-day-tile.has-bookings {
  border-left: 6px solid #E03671 !important;
}

.mpg-month-day-tile.no-bookings {
  border-left: 6px solid #f8bbd0 !important;
}

.mpg-month-day-tile:hover:not(.empty) {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(216, 27, 96, .16);
}

.mpg-month-day-number {
  color: #E03671 !important;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1;
}

.mpg-month-day-label {
  color: #87596f !important;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mpg-month-bookings-list {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.mpg-month-booking-pill {
  border-radius: 10px;
  padding: 6px 7px;
  background: #fff0f7;
  border: 1px solid #f3c4d9;
  line-height: 1.15;
}

.mpg-month-booking-pill strong {
  display: block;
  color: #9c1c4f !important;
  font-size: 11px;
  font-weight: 1000;
}

.mpg-month-booking-pill span {
  display: block;
  color: #7b3654 !important;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mpg-month-booking-pill.booked {
  background: #ffebee;
  border-color: #ffcdd2;
}

.mpg-month-booking-pill.booked strong,
.mpg-month-booking-pill.booked span {
  color: #b71c1c !important;
}

.mpg-month-booking-pill.waitlisted {
  background: #fff8e1;
  border-color: #ffe082;
}

.mpg-month-booking-pill.waitlisted strong,
.mpg-month-booking-pill.waitlisted span {
  color: #8a5a00 !important;
}

.mpg-month-booking-pill.cancelled {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.mpg-month-empty-note {
  color: #9aa0a6 !important;
  font-size: 12px;
  font-weight: 800;
  padding-top: 4px;
}

.mpg-month-more-note {
  color: #E03671 !important;
  font-size: 11px;
  font-weight: 1000;
  padding: 2px 4px;
}

@media (max-width: 900px) {
  .mpg-month-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mpg-month-weekday {
    display: none;
  }

  .mpg-month-day-tile.empty {
    display: none;
  }
}

@media (max-width: 560px) {
  .mpg-month-overview-grid {
    grid-template-columns: 1fr;
  }

  .mpg-month-day-tile {
    min-height: auto;
  }
}


/* ===== Gallery hero height adjustment ===== */
#galleryPage .gallery-hero-slider {
  height: 400px !important;
  max-height: 400px !important;
  min-height: 400px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

#galleryPage .gallery-hero-slider img,
#galleryPage .gallery-hero-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 900px) {
  #galleryPage .gallery-hero-slider {
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
  }
}

@media (max-width: 600px) {
  #galleryPage .gallery-hero-slider {
    height: 240px !important;
    max-height: 240px !important;
    min-height: 240px !important;
    border-radius: 20px !important;
  }
}


/* ===== Gallery category image uploads ===== */
.gallery-category-admin-panel {
  margin: 16px auto !important;
  background: #ffffff !important;
  border: 1px solid #f3c4d9 !important;
}

.gallery-category-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gallery-category-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.gallery-category-photo-grid,
#galleryCategoryPhotoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.gallery-category-photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #f3c4d9;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 11;
}

.gallery-category-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-category-photo-caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(59,33,48,.72);
  color: #ffffff !important;
  font-weight: 900;
  font-size: 12px;
}

.gallery-category-photo-category {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #E03671;
  color: #ffffff !important;
  font-weight: 1000;
  font-size: 11px;
}

.gallery-category-admin-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #fff7fb;
  border: 1px solid #f3c4d9;
}

.gallery-category-admin-item img {
  width: 110px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
}

.gallery-category-admin-item strong {
  color: #9c1c4f !important;
}

.gallery-category-admin-item small {
  color: #7b3654 !important;
  font-weight: 800;
}

.gallery-category-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed #f3c4d9;
  background: #fff7fb;
  color: #7b3654 !important;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 760px) {
  .gallery-category-admin-grid,
  .gallery-category-admin-item {
    grid-template-columns: 1fr;
  }

  .gallery-category-admin-item img {
    width: 100%;
    height: 170px;
  }

  .gallery-category-admin-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gallery-category-admin-actions button {
    width: 100%;
  }
}


/* ===== Contact admin booking table repair styling ===== */
.contact-admin-booking-table th,
.contact-admin-booking-table td {
  vertical-align: middle;
}

.contact-admin-booking-table .btn-primary,
.contact-admin-booking-table .btn-danger,
.contact-admin-booking-table .btn-light {
  margin: 2px !important;
  white-space: nowrap;
}



/* ===== Queue Master option cards: Better Bangers + GitGud + Open Access ===== */
.queue-master-options-wrap {
  display: grid;
  gap: 18px;
}

.queue-master-options-header {
  background: var(--brand-gradient);
  color: #ffffff !important;
  border-radius: 26px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow);
}

.queue-master-options-header h1,
.queue-master-options-header p {
  color: #ffffff !important;
  margin: 0;
}

.queue-master-options-header h1 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 1000;
}

.queue-master-options-header p {
  margin-top: 8px;
  font-weight: 800;
}

.queue-master-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.queue-master-card {
  background: #ffffff;
  border: 1px solid #f3c4d9;
  border-radius: 26px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.queue-master-logo-box {
  width: 2in;
  height: 2in;
  max-width: 100%;
  justify-self: center;
  border-radius: 24px;
  border: 1px solid #f3c4d9;
  background: #fff7fb;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.queue-master-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.queue-master-logo-fallback {
  font-size: 30px;
  font-weight: 1000;
  color: #E03671 !important;
  text-align: center;
}

.queue-master-card h2 {
  text-align: center;
  color: #E03671 !important;
  margin: 0;
  font-size: 26px;
}

.queue-master-card p {
  color: #3b2130 !important;
  text-align: center;
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}

.queue-master-card .btn-primary {
  width: 100%;
  margin: 0 !important;
  min-height: 52px;
}

@media (max-width: 1000px) {
  .queue-master-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .queue-master-card-grid {
    grid-template-columns: 1fr;
  }

  .queue-master-logo-box {
    width: 160px;
    height: 160px;
  }
}



/* ===== Style block 2 from original index.html ===== */

/* FINAL: Queue Master cards show only logo/image and button */
#openPlayLanding .queue-master-card h2,
#openPlayLanding .queue-master-card p,
#openPlayLanding .open-play-main-card h2,
#openPlayLanding .open-play-main-card p {
  display: none !important;
}


/* ===== Style block 3 from original index.html ===== */

/* ===== RESTORED OPEN ACCESS QUEUE FROM LOGO_AND_MENU_FIXED ===== */
/* Open Access should use the existing Live Courts screen, but without save/download tools. */
body.open-access-queue-mode #currentGame {
  display: block !important;
}

body.open-access-queue-mode #currentGame .open-play-pill-menu,
body.open-access-queue-mode #currentGame .bottom-actions-panel,
body.open-access-queue-mode #currentGame button[onclick*="saveSessionSettings"],
body.open-access-queue-mode #currentGame button[onclick*="saveCompletedSession"],
body.open-access-queue-mode #currentGame button[onclick*="downloadResultsCSV"],
body.open-access-queue-mode #currentGame button[onclick*="downloadResultsText"],
body.open-access-queue-mode #currentGame button[onclick*="downloadFullScreenshot"] {
  display: none !important;
}

body.open-access-queue-mode #currentGame .completed-bottom,
body.open-access-queue-mode #currentGame .queue-bottom,
body.open-access-queue-mode #currentGame .bottom-reset-panel,
body.open-access-queue-mode #currentGame .stats-grid,
body.open-access-queue-mode #currentGame .layout,
body.open-access-queue-mode #currentGame .desktop-row,
body.open-access-queue-mode #currentGame .setup-row {
  display: grid !important;
}

body.open-access-queue-mode #currentGame .completed-bottom,
body.open-access-queue-mode #currentGame .queue-bottom,
body.open-access-queue-mode #currentGame .bottom-reset-panel {
  display: block !important;
}

body.open-access-queue-mode #currentGame .hero #sessionDisplay::after {
  content: "" !important;
}

body.open-access-queue-mode #currentGame #sessionDisplay {
  font-weight: 900 !important;
}



/* ============================================================
   OVERRIDE + SPOTIFY — inline at page bottom (not floating)
   ============================================================ */

/* Remove the fixed/floating positioning — make it inline */
.override-fixed.queue-club-bottom-controls {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  background: #fff7fb !important;
  border: 1px solid #f3c4d9 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  width: 100% !important;
  bottom: auto !important; left: auto !important; right: auto !important;
}
.override-fixed.queue-club-bottom-controls > * { pointer-events: auto !important; }
.override-fixed.queue-club-bottom-controls button {
  min-width: auto !important;
  min-height: 44px !important;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 14px rgba(216,27,96,.20) !important;
}

/* Spotify panel — inline below the override bar */
.queue-spotify-floating-player {
  position: static !important;
  display: none;
  bottom: auto !important; left: auto !important; right: auto !important;
  width: 100% !important;
  border-radius: 14px !important;
  margin: 0 0 16px !important;
  padding: 8px !important;
}
.queue-spotify-floating-player.active { display: block !important; }
.queue-spotify-floating-player iframe { height: 152px !important; display: block; width: 100% !important; }

/* Mobile — keep inline too */
@media (max-width: 760px) {
  .override-fixed.queue-club-bottom-controls {
    flex-wrap: wrap !important;
    padding: 12px !important;
  }
  .override-fixed.queue-club-bottom-controls button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
  }
  .queue-spotify-floating-player iframe { height: 152px !important; }
}


/* ============================================================
   MOBILE NAV — single-line fixed pill bar (bottom)
   ============================================================ */



/* ── Modal boxes always solid white — override any theme ── */
.global-login-modal .global-login-box,
#editCourtModal .global-login-box,
#editBookingModal .global-login-box,
#mpgRosterModal .global-login-box,
.global-login-modal > div {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

.global-login-modal .global-login-box *,
#editCourtModal .global-login-box *,
#editBookingModal .global-login-box *,
#mpgRosterModal .global-login-box * {
  background-color: transparent !important;
  color: #1a1a1a !important;
}

/* Keep coloured elements inside modals */
.global-login-modal .global-login-box h2,
.global-login-modal .global-login-box h3 {
  color: #c2185b !important;
}
.global-login-modal .global-login-box .btn-primary,
.global-login-modal .global-login-box .btn-primary * {
  background: linear-gradient(135deg,#e91e63,#ff4f9a) !important;
  color: #ffffff !important;
}
.global-login-modal .global-login-box .btn-danger,
.global-login-modal .global-login-box .btn-danger * {
  background: #c62828 !important;
  color: #ffffff !important;
}
.global-login-modal .global-login-box .btn-light {
  background: #fff0f7 !important;
  color: #c2185b !important;
  border: 1px solid #f3c4d9 !important;
}
.global-login-modal .global-login-box input,
.global-login-modal .global-login-box select,
.global-login-modal .global-login-box textarea {
  background: #fff7fb !important;
  color: #1a1a1a !important;
  border: 1px solid #edc2d5 !important;
}


/* ============================================================
   MOBILE LAYOUT FIX — Full width, consistent sizing
   ============================================================ */
@media (max-width: 900px) {

  /* ── App container: full width, no side gaps ── */
  .app {
    padding: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── All panels: full width ── */
  .panel,
  #currentGame .panel,
  #previousGames .panel {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }

  /* ── Stat cards: always 2 per row, equal width ── */
  .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .stat-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }
  .stat-card div { font-size: clamp(22px, 8vw, 36px) !important; }
  .stat-card small { font-size: 10px !important; }

  /* ── Setup and desktop rows: always single column ── */
  .setup-row,
  .desktop-row,
  .previous-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* ── Pill menu: SINGLE horizontal scrollable line, no wrapping ── */
  .open-play-pill-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 4px 0 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .open-play-pill-menu::-webkit-scrollbar { display: none !important; }
  .open-play-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 9px 16px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
  }

  /* ── Court list: ONE court per row, full width ── */
  #courtsList,
  #doublesCourtsList {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  #courtsList .court,
  #doublesCourtsList .court {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  /* ── Score row: fixed layout so input doesn't stretch weird ── */
  #courtsList .score-row,
  #doublesCourtsList .score-row {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #courtsList .score-row .score,
  #doublesCourtsList .score-row .score {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 20px !important;
    text-align: center !important;
  }
  #courtsList .score-btn,
  #doublesCourtsList .score-btn {
    width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 20px !important;
    border-radius: 10px !important;
  }

  /* ── Team blocks: full width ── */
  #courtsList .team,
  #doublesCourtsList .team {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
  }

  /* ── Done Match button: full width ── */
  #courtsList .court > .btn-primary,
  #doublesCourtsList .court > .btn-primary {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    font-size: 15px !important;
    margin-top: 8px !important;
  }

  /* ── Announce court buttons: wrap nicely ── */
  .announce-courts-box {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #announceCourtButtons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #announceCourtButtons button {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* ── Inputs: prevent iOS zoom, full width ── */
  #currentGame input,
  #currentGame select,
  #currentGame textarea,
  #previousGames input,
  #previousGames select {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
  }

  /* ── Hero banner: full width ── */
  #currentGame .hero {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    padding: 18px 14px !important;
  }

  /* ── Queue player rows: full width ── */
  #currentGame .player {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  /* ── Hold/break actions: wrap inline ── */
  #currentGame .hold-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  #currentGame .hold-actions button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 38px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* ── Next Up panel: full width ── */
  #mpgNextUpPanel {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #mpgNextUpPanel > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   MOBILE FINAL FIX — No horizontal overflow, readable layout
   ============================================================ */
@media (max-width: 900px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .app {
    padding: 8px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* ── Every panel fills full width ── */
  .panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  /* ── Pill menu: one scrollable line ── */
  .open-play-pill-menu {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .open-play-pill-menu::-webkit-scrollbar { display: none !important; }
  .open-play-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    margin: 0 !important;
  }

  /* ── Announce court buttons ── */
  .announce-courts-box {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #announceCourtButtons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #announceCourtButtons button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: auto !important;
    height: auto !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ── Court list: vertical stack ── */
  #courtsList, #doublesCourtsList {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  #courtsList .court,
  #doublesCourtsList .court {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* ── Score row ── */
  #courtsList .score-row,
  #doublesCourtsList .score-row {
    grid-template-columns: 44px 1fr 44px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #courtsList .score-row .score,
  #doublesCourtsList .score-row .score {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    font-size: 20px !important;
  }
  #courtsList .score-btn,
  #doublesCourtsList .score-btn {
    width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 18px !important;
  }

  /* ── Rankings table: compact, no horizontal overflow ── */
  .table-wrap {
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .leaderboard-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 7px 4px !important;
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
  }
  .leaderboard-table .player-name {
    font-size: 12px !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .leaderboard-table .rank-cell {
    width: 30px !important;
    font-size: 13px !important;
  }

  /* ── Stats: 2 per row ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .stat-card div { font-size: clamp(20px, 7vw, 32px) !important; }
  .stat-card small { font-size: 10px !important; }

  /* ── All general buttons: full width ── */
  #currentGame .btn-primary:not(.score-btn):not(.open-play-pill):not(.mpg-back-to-queue),
  #currentGame .btn-danger:not(.score-btn),
  #currentGame .btn-dark {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 15px !important;
    margin: 4px 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Setup rows: single column ── */
  .setup-row, .desktop-row {
    grid-template-columns: 1fr !important;
  }

  /* ── Inputs: no zoom on iOS ── */
  #currentGame input,
  #currentGame select,
  #currentGame textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── FINAL: mobile-quick-add ONLY on queue pages ── */
.mobile-quick-add { display: none !important; }
body.on-queue-page .mobile-quick-add { display: block !important; }
@media (max-width: 900px) {
  .mobile-quick-add { display: none !important; }
  body.on-queue-page .mobile-quick-add { display: block !important; }
}


/* ── BOOKING PAGE: Mobile reorder (CSS only, no HTML changes) ──────────────
   Desktop: [Form+Receipt+Summary+Submit] | [Time Slots]
   Mobile:  Form → Receipt → Time Slots → Summary → Submit
   We use flexbox order on mobile to reorder without touching HTML.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Switch layout to single-column flex so order property works */
  .contact-book-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Left panel (form) becomes a flex column so we can order its children */
  .contact-book-layout .panel.contact-book-card:first-child {
    display: flex !important;
    flex-direction: column !important;
    order: 1 !important;
  }

  /* Right panel (Time Slot) slides between receipt and summary */
  .contact-book-layout .panel.contact-book-card:last-child {
    order: 2 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
  }

  /* Inside left panel: reorder children */
  /* 1. Title stays first */
  .contact-book-layout .panel.contact-book-card:first-child .section-title-row {
    order: 1;
  }
  /* 2. Form grid (name/contact/date/court) */
  .contact-book-layout .panel.contact-book-card:first-child .contact-book-form-grid {
    order: 2;
  }
  /* 3. Receipt label + input — push below form */
  .contact-book-layout .panel.contact-book-card:first-child > label {
    order: 3;
    margin-top: 14px;
  }
  .contact-book-layout .panel.contact-book-card:first-child > input[type="file"] {
    order: 4;
  }
  /* 4. Summary box — pushed to bottom */
  .contact-book-layout .panel.contact-book-card:first-child .booking-summary-box {
    order: 6;
    margin-top: 12px;
  }
  /* 5. Submit button — very bottom */
  .contact-book-layout .panel.contact-book-card:first-child .contact-book-submit {
    order: 7;
    width: 100% !important;
    min-height: 50px !important;
    font-size: 16px !important;
    margin-top: 10px !important;
  }
  /* 6. Thank you message */
  .contact-book-layout .panel.contact-book-card:first-child .booking-submit-message {
    order: 8;
  }
  /* Gap between receipt and time slot panel */
  .contact-book-layout .panel.contact-book-card:first-child > input[type="file"] {
    margin-bottom: 0 !important;
  }
}


/* ══ GLOBAL TEXT VISIBILITY FIX ══════════════════════════════
   Ensures no white text on white/light backgrounds anywhere.
   Elements with explicit dark/colored backgrounds keep their
   white text via their own rules which have higher specificity.
   ════════════════════════════════════════════════════════════ */
body, .app, .panel, .tab-content,
.contact-book-layout, .contact-book-card,
.booking-summary-box, .booking-times,
.court, .team, .player, .match,
.stat-card, .queue-row,
label, p, li, td, th, span, div, h1, h2, h3, h4, h5 {
  --text: #1a1a1a;
}

/* Inputs always readable */
input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  color: #1a1a1a !important;
  background-color: #fff !important;
}

/* Links */
a { color: #c2185b; }

/* Small/muted text */
small, .muted, .time-label { color: #7b3654 !important; }

/* Booking time slots — always visible */
.booking-time { color: #c2185b !important; background: #fff0f7 !important; }
.booking-time.selected { color: #fff !important; background: linear-gradient(135deg,#e91e63,#ff4f9a) !important; }
.booking-time.booked { color: #aaa !important; background: #f5f5f5 !important; }

/* Table cells */
.leaderboard-table td, .leaderboard-table tbody tr td { color: #1a1a1a !important; }
.leaderboard-table th { color: #fff !important; } /* white on pink header — correct */

/* Queue player rows */
.player { color: #1a1a1a !important; }
.queue-name, .queue-pos, .queue-games { color: #1a1a1a !important; }

/* ── Admin booking table — force dark text regardless of inheritance ── */
#contactAdminBookingsList,
#contactAdminBookingsList table,
#contactAdminBookingsList td,
#contactAdminBookingsList th,
#contactAdminBookingsList span,
#contactAdminBookingsList label,
#contactAdminBookingsList p,
#bkTbody td,
#bkTbody tr,
#bkTbody span {
  color: #1a1a1a !important;
}
#contactAdminBookingsList thead tr th {
  color: #ffffff !important; /* white on pink header */
}
#contactAdminBookingsList .btn-primary,
#contactAdminBookingsList button[style*="background:#16a34a"],
#contactAdminBookingsList button[style*="background:#d97706"],
#contactAdminBookingsList button[style*="background:#c2185b"],
#contactAdminBookingsList button[style*="background:#6b7280"] {
  color: #ffffff !important;
}

/* ===== MPG requested page-by-page fixes ===== */
.mpg-video-slot { margin-top: 18px; }
.mpg-video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px dashed #f3a6c9;
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg,#fff7fb,#ffe1ef);
  color: #c2185b;
  font-weight: 900;
  min-height: 220px;
}
.mpg-video-placeholder span { display:block; font-size: clamp(22px,3vw,42px); }
.mpg-video-placeholder small { display:block; margin-top:8px; color:#7b3654; }

.mpg-court-images-section { margin-top:18px; }
.mpg-court-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.mpg-court-image-card {
  border: 1px solid #f3c4d9;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  box-shadow: 0 8px 24px rgba(216,27,96,.08);
}
.mpg-court-image-card strong { display:block; padding:12px; color:#c2185b; }
.mpg-court-image-placeholder {
  aspect-ratio: 1000 / 1000;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg,#e91e63,#ff4f9a);
  color:#fff;
  font-size: clamp(20px,3vw,40px);
  font-weight: 900;
}
.mpg-gallery-header-simple {
  height: 3in;
  min-height: 220px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg,#e91e63,#ff4f9a,#ffc1dd);
  color: white;
  margin-bottom: 18px;
  padding: 20px;
}
.mpg-gallery-header-simple h1 {
  color:#fff!important;
  margin:0!important;
  font-size: clamp(28px,5vw,58px)!important;
  letter-spacing: .06em;
}
.mpg-gallery-square-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.mpg-gallery-square-card {
  border:1px solid #f3c4d9;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(216,27,96,.08);
}
.mpg-gallery-square-card img {
  width:100%;
  aspect-ratio: 1 / 1!important;
  object-fit:cover;
  display:block;
}
.mpg-gallery-square-card-title {
  padding:10px 12px;
  color:#c2185b;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mpg-admin-filter-bar {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin:0 0 12px;
  background:#fff7fb;
  border:1px solid #f3c4d9;
  border-radius:14px;
  padding:10px;
}
.mpg-admin-filter-bar label { font-size:11px;color:#7b3654;font-weight:900; }
.mpg-admin-filter-bar input,.mpg-admin-filter-bar select { width:100%; }

.mobile-quick-add,
body.on-queue-page .mobile-quick-add {
  display: none !important;
}
.mpg-hide-gitgud-card { display:none!important; }

@media (max-width: 768px) {
  .mpg-court-image-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
  .mpg-gallery-square-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .mpg-gallery-header-simple { height: auto; min-height: 150px; border-radius:20px; }
  .mpg-admin-filter-bar { grid-template-columns: 1fr; }
  .mpg-video-placeholder { min-height: 170px; }
}



/* MPG patch: permanently remove mobile bottom Add Player bar */
.mobile-quick-add,
body.on-queue-page .mobile-quick-add {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* MPG patch: Home video and server-managed court images */
.mpg-home-video-section {
  margin-top: 18px;
}
.mpg-home-video-display {
  width: 100%;
}
.mpg-home-video {
  display: block;
  width: 100%;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #111;
}
.mpg-site-media-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 2px dashed #f3c4d9;
  border-radius: 18px;
  background: #fff7fb;
  color: #c2185b;
  font-weight: 900;
  text-align: center;
  padding: 20px;
}
.mpg-site-media-admin {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #f3c4d9;
  border-radius: 16px;
  background: #fff7fb;
}
.mpg-site-media-admin input[type="file"] {
  width: 100%;
  margin: 6px 0 10px;
}
.mpg-court-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mpg-court-live-image-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff7fb;
}
.mpg-court-live-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
@media (max-width: 760px) {
  .mpg-court-admin-grid {
    grid-template-columns: 1fr;
  }
  .mpg-home-video {
    max-height: 260px;
  }
  .mpg-site-media-empty {
    min-height: 160px;
  }
}