/* =========================
   MAIN TAB — Clean Top Tabs
   ========================= */
#main-tab{
  /* design tokens */
  --brand:#0d6e8c;          /* header blue */
  --brand-600:#0d6e8c;      /* deeper blue */
  --accent:#0d6e8c;         /* PGC red accent */
  --text:#1f2937; --muted:#6b7280;
  --bg:#f7fafc; --surface:#fff;
  --row:#f9fafb; --row-hover:#eef6f9; --border:#e5e7eb;
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 6px 20px rgba(16,24,40,.08);
  --radius:12px; --radius-sm:8px;
  --ring:0 0 0 3px color-mix(in srgb, #0d6e8c 22%, transparent);
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:20px; --space-5:28px;
  --topbar-h:72px;
  color:var(--text);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-family: proxima-nova, Helvetica, Arial, sans-serif; 
}

/* Layout */
#main-tab .layout{ display:flex; flex-direction:column; min-height:100dvh; overflow:hidden; }

/* ===== TOP BAR with Menu */
#main-tab #sidebar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:flex-start;
  height:var(--topbar-h); width:100%;
  padding:0 24px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 0%), var(--brand-600));
  color:#fff; box-shadow:var(--shadow-sm);
  overflow:visible;
  font-family: proxima-nova, Helvetica, Arial, sans-serif;   
}
/* thin red strip */
#main-tab #sidebar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent);
}
/* Logo */
#main-tab .sidebar__header{ padding:0; border:0; display:flex; align-items:center; }
#main-tab .sidebar__logo{ height:60px; width:auto; margin-right:32px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* Tabs (right of logo) */
#main-tab .menu{
  display:flex; align-items:center; gap:32px;
  margin:0; padding:0; flex:1; overflow:auto; scrollbar-width:none;
}
#main-tab .menu::-webkit-scrollbar{ display:none; }

#main-tab .menu__item{
  position:relative; margin:0; padding:6px 0;
  color:#f8fafc; text-decoration:none; white-space:nowrap;
  font-weight:700; font-size:15px; letter-spacing:.45px; text-transform:uppercase;
  transition:color .18s ease;
}
/* remove legacy chevron */
#main-tab .menu__item::before{ content:none; }

#main-tab .menu__item:hover{ color:#ffd166; }            /* gold hover */
#main-tab .menu__item[aria-current="page"]{ color:#ffd166; } /* active text */

#main-tab .menu__item[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--accent); border-radius:2px;           /* red underline */
}

/* toggle button (mobile only) */
#main-tab #menu-toggle{ display:none; }

/* ===== MAIN CONTENT ===== */
#main-tab .main{
  flex:1; padding:var(--space-5); overflow:auto;
  background:radial-gradient(1200px 800px at 30% -10%, #ffffff 0%, #f6fbff 55%, #f1f5f9 100%);
}

#main-tab .stack{ display:grid; gap:var(--space-4); max-width:1200px; margin:0 auto; }
#main-tab .section{ margin-bottom:var(--space-4); }

/* Cards */
#main-tab .card{ background:var(--surface); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); text-align:center; }
#main-tab .card a{ color:#0f3957; font-weight:700; text-decoration:none; }
#main-tab .card a:hover{ text-decoration:underline; }

/* Camp header */
#main-tab header.section h1 {
  font-family: "Oswald", sans-serif;
  font-size: clamp(20px, 2.3vw, 28px);
  margin: 0 0 6px;
  letter-spacing: 0.2px;
}

#main-tab header.section p{ margin:2px 0; color:var(--muted); }
#main-tab header.section strong{ color:var(--text); }

/* Total bar */
#main-tab .total-players{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:12px 16px; background:linear-gradient(180deg,#ff8a1a,#ff7a00);
  color:#fff; font-weight:800; border:1px solid #e56f00; border-radius:var(--radius); box-shadow:var(--shadow-md);
}
#main-tab .total-players .count{ padding:6px 12px; background:rgba(255,255,255,.18); border-radius:999px; font-variant-numeric:tabular-nums; }

/* Search */
#main-tab .search-row{ display:flex; gap:10px; align-items:center; margin:var(--space-3) 0 var(--space-2); }
#main-tab .search-row input{
  width:min(360px,100%); padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
  transition:box-shadow .15s ease, border-color .15s ease;
}
#main-tab .search-row input:focus{ outline:none; border-color:#1a73e8; box-shadow:var(--ring), inset 0 1px 0 rgba(0,0,0,.02); }
#main-tab .no-results{ color:var(--muted); font-style:italic; }

/* Table container */
#main-tab .table-container{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }

/* Tables */
#main-tab table{ width:100%; border-collapse:separate; border-spacing:0; }
#main-tab thead{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 0%), var(--brand-600));
  color:#fff; position:sticky; top:0; z-index:2; box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
#main-tab th,#main-tab td{ padding:12px 14px; font-size:14px; text-align:center; border-bottom:1px solid var(--border); }
#main-tab th{ font-weight:700; text-transform:uppercase; letter-spacing:.45px; }
#main-tab tbody tr:nth-child(even){ background:var(--row); }
#main-tab tbody tr:hover{ background:var(--row-hover); transition:background-color .18s ease; }

/* First-column tint */
#main-tab td:first-child,#main-tab th:first-child{ position:relative; }
#main-tab tbody td:first-child{ background:linear-gradient(90deg, rgba(21,113,132,.05), transparent 60%); }

/* Form controls */
#main-tab select{
  width:100%; padding:8px 10px; font-size:14px; border:1px solid var(--border); border-radius:8px; background:var(--surface);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L1 3h8L5 7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:10px 10px;
  transition:box-shadow .15s ease, border-color .15s ease;
}
#main-tab select:focus{ border-color:#1a73e8; outline:none; box-shadow:var(--ring); }

/* Utilities */
#main-tab .hidden{ display:none !important; }

/* ===== Mobile / tablet: dropdown ===== */
@media (max-width:768px){
  /* Make the blue bar (sidebar) flex row: logo left, button right */
  #main-tab #sidebar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky; top:0; z-index:50;
    padding:0 12px;
    height:var(--topbar-h);
    background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 0%), var(--brand-600));
  }

  /* Toggle button lives inside the blue bar */
@media (max-width:768px){
  #main-tab #sidebar{
    display:flex; align-items:center; justify-content:space-between;
    height:var(--topbar-h); padding:0 12px; position:sticky; top:0; z-index:50;
  }
  #main-tab #menu-toggle{
    display:inline-flex; align-items:center; gap:6px;
    margin-left:auto; height:38px; padding:0 14px;
    background:#fff; color:#0d3b4f; border:2px solid rgba(255,255,255,.65);
    border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.18);
    font-weight:700; font-size:13px; text-transform:uppercase;
  }
  #main-tab #sidebar.is-open #menu-toggle{ background:#ffd166; border-color:#ffd166; }

  /* keep dropdown under the bar */
  #main-tab #sidebar .menu{
    position:fixed; top:var(--topbar-h); left:0; right:0; z-index:49;
    display:none; flex-direction:column; gap:10px; padding:12px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 0%), var(--brand-600));
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  #main-tab #sidebar.is-open .menu{ display:flex; }

  /* hide the old floating “OPEN MENU” button if it exists */
  .open-menu-legacy{ display:none !important; }
}


/* Desktop scrollbar */
@media (pointer:fine){
  #main-tab .main::-webkit-scrollbar{ height:10px; width:10px; }
  #main-tab .main::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--brand) 40%, #0000); border-radius:999px; border:2px solid #0000; }
  #main-tab .main::-webkit-scrollbar-track{ background:#0000; }
}

/* Emphasis bar retained */
#main-tab .total-players{
  background:#ff7a00; color:#fff; border:0; border-radius:6px; box-shadow:none;
  padding:10px 16px; min-height:44px; display:flex; align-items:center; justify-content:space-between;
  text-transform:uppercase; letter-spacing:.4px; font-weight:800;
}
#main-tab .total-players .count{
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:999px; padding:4px 10px; font-variant-numeric:tabular-nums; font-weight:700;
}