:root{
  --navy:#071857; --navy-2:#0b2472; --royal:#1b3fae; --orange:#f05a00;
  --ink:#0c1330; --muted:#6b7590; --line:#e3e7f0; --bg:#f4f6fb; --white:#fff; --good:#1f9d55; --bad:#c0392b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:'Sora',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
h1{font-family:'Bebas Neue','Sora',sans-serif;font-weight:400;letter-spacing:.02em;margin:0}
a{color:var(--royal);text-decoration:none}

.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand img{width:38px;height:38px}
.brand strong{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:.05em;display:block;line-height:1}
.brand small{color:#b9c4e8;font-size:.66rem;letter-spacing:.18em}
.back{color:#cdd6f5;font-size:.82rem;font-weight:600;white-space:nowrap}

main{flex:1;width:100%}
.wrap{max-width:1000px;margin:0 auto;padding:22px 16px 40px}
.titlebar h1{font-size:2.4rem;color:var(--navy)}
.titlebar p{color:var(--muted);margin:2px 0 0;font-size:.95rem}

.controls{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 14px}
.ctl{display:flex;flex-direction:column;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.ctl select{font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);padding:11px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--white);min-width:200px}

.viewtabs{display:inline-flex;gap:4px;background:#e9edf6;border-radius:12px;padding:4px;margin-bottom:14px}
.viewtabs button{border:0;background:none;font-family:inherit;font-size:.9rem;font-weight:700;color:var(--muted);
  padding:9px 18px;border-radius:9px;cursor:pointer}
.viewtabs button.active{background:var(--white);color:var(--navy);box-shadow:0 2px 8px rgba(7,24,87,.1)}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--white);
  box-shadow:0 12px 30px rgba(7,24,87,.05)}
table.stats{border-collapse:collapse;width:100%;font-size:.88rem;white-space:nowrap}
table.stats th,table.stats td{padding:11px 12px;text-align:right;border-bottom:1px solid #eef1f7}
table.stats thead th{position:sticky;top:0;background:var(--navy);color:#fff;font-weight:600;font-size:.76rem;
  letter-spacing:.03em;cursor:pointer;user-select:none}
table.stats thead th.sorted{background:#12327e}
table.stats thead th.sorted::after{content:' ▾';font-size:.7em;opacity:.9}
table.stats thead th.sorted.asc::after{content:' ▴'}
table.stats th.c-num,table.stats td.c-num{text-align:center;width:44px;color:var(--muted)}
table.stats th.c-name,table.stats td.c-name{text-align:left;position:sticky;left:0;background:var(--white);font-weight:600}
table.stats thead th.c-name{background:var(--navy)}
table.stats tbody tr:nth-child(even) td{background:#fafbfe}
table.stats tbody tr:nth-child(even) td.c-name{background:#fafbfe}
table.stats tbody tr:hover td{background:#fff4ec}
table.stats tbody tr:hover td.c-name{background:#fff4ec}
table.stats td.hi{color:var(--orange);font-weight:700}

.empty{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:34px 22px;text-align:center;
  color:var(--muted);line-height:1.6}
.rosterlist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.rosterlist span{background:#eef2fb;color:var(--navy);border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:600}
.loading{text-align:center;color:var(--muted);padding:60px 20px}

.ftr{text-align:center;color:var(--muted);font-size:.8rem;padding:20px 16px;border-top:1px solid var(--line)}

@media(max-width:560px){
  .titlebar h1{font-size:1.9rem}
  .controls{flex-direction:column}
  .ctl select{width:100%}
}

/* ===== Org 'Team' column ===== */
table.stats th.c-team, table.stats td.c-team { text-align:left; color:var(--muted); font-size:.82rem; white-space:nowrap; }
table.stats thead th.c-team { color:#fff; }

/* ===== Admin CSV upload ===== */
.adminbar { max-width:1000px; margin:24px auto 0; padding:0 16px; text-align:center; }
.linkbtn { border:0; background:none; color:var(--royal); font-family:inherit; font-weight:700; font-size:.92rem; text-decoration:underline; cursor:pointer; padding:6px; }
.adminbox { max-width:640px; margin:22px auto 0; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 12px 30px rgba(7,24,87,.06); }
.adminhead { display:flex; align-items:center; justify-content:space-between; }
.adminhead h2 { font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:1.7rem; color:var(--navy); }
.ahint { color:var(--muted); font-size:.85rem; line-height:1.5; margin:8px 0 12px; }
.agrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.agrid .ctl input, .agrid .ctl select { font-family:inherit; font-size:1rem; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); width:100%; min-width:0; }
.drop { margin-top:12px; border:2px dashed #c4cde6; border-radius:14px; background:#fbfcff; text-align:center; padding:22px 14px; color:var(--muted); }
.drop.over { border-color:var(--orange); background:#fff6ef; color:var(--navy); }
.drop p { margin:0; }
.apreview { margin-top:14px; }
.apreview p { font-size:.9rem; color:var(--ink); }
.acheck { display:flex; align-items:center; gap:8px; margin:10px 0; font-size:.9rem; color:var(--navy); font-weight:600; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:14px; border:0; border-radius:12px; background:var(--orange); color:#fff; font-family:inherit; font-weight:700; font-size:1rem; cursor:pointer; }
.amsg { margin-top:12px; padding:10px 12px; background:#eef2ff; border-left:.25rem solid var(--royal); border-radius:8px; color:var(--ink); font-size:.9rem; }
.warn { color:var(--bad); }
@media(max-width:560px){ .agrid { grid-template-columns:1fr; } }
