/* Grass Roots League — Theme v3 (Gold + Blue, premium)
   Drop-in CSS. Uses local SVG assets in /public/assets/.
*/
:root{
  --gold:#D4AF37;
  --gold2:#F2D675;
  --blue:#0B2E6D;
  --blue2:#1E40AF;
  --sea:#0EA5E9;

  --sand:#FDF6E3;
  --sand2:#F6ECCD;
  --ink:#0B162B;
  --muted:#5B6E8A;

  --card:#FFFFFF;
  --border:rgba(224,216,188,0.88);

  --shadow: 0 18px 46px rgba(17, 24, 39, 0.12);
  --shadow-sm: 0 9px 20px rgba(17, 24, 39, 0.10);
  --shadow-in: inset 0 1px 0 rgba(255,255,255,0.75);

  --radius:16px;
  --radius-lg:22px;

  --ring: 0 0 0 4px rgba(11,46,109,0.14);

  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 260ms;

  --container: 1140px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 25% -10%, rgba(14,165,233,0.14), transparent 60%),
    radial-gradient(900px 700px at 90% 0%, rgba(212,175,55,0.18), transparent 55%),
    linear-gradient(180deg, var(--sand2) 0%, var(--sand) 220px);
  line-height:1.5;
}

a{color:inherit; text-decoration:none;}
a:hover{text-decoration:underline;}

.container{max-width:var(--container); margin:0 auto; padding:18px;}
.main{padding-top:18px;}

.topbar{
  position:sticky; top:0; z-index:30;
  background: rgba(253, 246, 227, 0.72);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(224,216,188,0.65);
}
.topbarInner{display:flex; align-items:center; justify-content:space-between; gap:14px;}

.brand{
  font-weight:950;
  letter-spacing:-0.02em;
  color:var(--blue);
  display:flex; align-items:center; gap:10px;
}
.brand:before{
  content:"";
  width:34px; height:34px;
  border-radius:12px;
  display:inline-flex;
  background: linear-gradient(180deg, #fff, #FFF6D8);
  border:1px solid rgba(224,216,188,0.9);
  box-shadow: var(--shadow-in), 0 10px 18px rgba(17,24,39,0.10);
}
.brand:after{
  content:"";
  display:block;
  height:4px; width:104px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold), rgba(212,175,55,0.25));
  margin-left:10px;
}

.nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.nav a{
  position:relative;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  color:var(--ink);
  transition: background var(--t), transform var(--t-fast);
}
.nav a:after{
  content:"";
  position:absolute;
  left:14px; right:14px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  transform: scaleX(0);
  transform-origin:left;
  background: linear-gradient(90deg, rgba(212,175,55,0.95), rgba(14,165,233,0.72));
  transition: transform var(--t);
}
.nav a:hover{ text-decoration:none; background: rgba(11,46,109,0.07); }
.nav a:hover:after{transform: scaleX(1);}
.nav a:active{transform: translateY(1px);}

.muted{color:var(--muted);}
.small{font-size:12px;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding:16px;
  margin:14px 0;
}

.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;}

.card.lift{
  position:relative;
  overflow:hidden;
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
}
.card.lift:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(212,175,55,0.55);
  text-decoration:none;
}
.cardHeader{
  height:74px;
  border-radius:16px;
  background: url("/public/assets/card_header.svg") center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  margin-bottom:12px;
  transition: transform var(--t-slow);
}
.card.lift:hover .cardHeader{transform: scale(1.03);}

.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:14px;
  align-items:stretch;
  padding:22px;
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,249,232,0.98) 100%),
    url("/public/assets/hero.svg") right top/auto 120% no-repeat;
  box-shadow: var(--shadow);
}
.hero h1{margin:0; font-size: clamp(30px, 4vw, 46px); letter-spacing:-0.03em;}
.hero p{margin:10px 0 0; color:var(--muted); max-width: 62ch;}

.heroPanel{
  border-radius: var(--radius);
  border:1px solid rgba(224,216,188,0.9);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF6 100%);
  padding:14px;
  box-shadow: var(--shadow-sm);
}
.statRow{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0;}
.statNum{font-size:22px; font-weight:950; color:var(--blue2);}
.statLbl{color:var(--muted); font-weight:900;}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  gap:8px;
  padding:11px 16px;
  border-radius: 999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t);
  box-shadow: var(--shadow-in);
}
.btn:hover{background:#FFF9E8; text-decoration:none; box-shadow: var(--shadow-sm), var(--shadow-in);}
.btn:active{transform: translateY(1px);}

.btn.primary{
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  border-color: rgba(212,175,55,0.95);
  color: var(--blue);
  box-shadow: 0 14px 26px rgba(212,175,55,0.22), var(--shadow-in);
}
.btn.primary:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.40) 35%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--t-slow);
}
.btn.primary:hover:before{transform: translateX(120%);}

.badge{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(224,216,188,1);
  background: rgba(255,249,232,1);
  font-size:12px;
  font-weight:950;
}
.badge.ok{background:#E8FAF1; border-color:#A5E3C6; color:#085734;}
.badge.warn{background:#FFF5E6; border-color:#F5D2A0; color:#945500;}

.tag{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
}

.tableWrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  background:#fff;
  box-shadow: var(--shadow-sm);
}
.table{width:100%; border-collapse:collapse; min-width:760px;}
.table th, .table td{padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;}
.table th{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  background: #FFFDF4;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tr:nth-child(even) td{background:#FFFCF3;}
.table tr:hover td{background: rgba(14,165,233,0.06);}

input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  transition: box-shadow var(--t), border-color var(--t);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(11,46,109,0.55);
  box-shadow: var(--ring);
}

.footer{
  margin-top:44px;
  padding:18px 0;
  border-top:1px solid rgba(224,216,188,0.8);
  background: rgba(255, 252, 243, 0.7);
  color: var(--muted);
}

@media (max-width: 980px){
  .cards{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .table{min-width:640px;}
  .brand:after{display:none;}
}
/* ✅ Checkbox/radio alignment fix (admin + anywhere) */
input[type="checkbox"],
input[type="radio"]{
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  accent-color: var(--primary);
}

label > input[type="checkbox"],
label > input[type="radio"]{
  flex: 0 0 auto;
}