/* ===========================
   PGBHL /app/style.css
   =========================== */

/* ---- Design tokens ---- */
:root{
  --brand:#0b8a4a;        /* accent for buttons/pills (matches league green) */
  --ink:#111;
  --muted:#666;
  --line:#e9e9e9;
  --bg:#fafafa;
  --card:#fff;
  --ok:#0a7c2e;
  --warn:#b00020;
}

/* ---- Mini tables (home snapshots) ---- */
table.mini{width:100%;border-collapse:collapse}
table.mini th, table.mini td{padding:6px 8px;border-bottom:1px solid #e5e7eb;font-size:.9rem}
table.mini th{text-align:left;background:#f8fafc}
table.mini .num{text-align:right}

/* ---- Base ---- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---- Generic header (for pages that DON'T use injected site chrome) ----
   NOTE: we intentionally do not style header.site here (see hard overrides below). */
header:not(.site){
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:10;
}

/* Utility layout (legacy pages) */
.bar{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  gap:10px;
  align-items:center;
}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  color:inherit;
  text-decoration:none;
}

/* ✅ Logo alignment fix */
.brand img{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:6px;
  display:block; /* removes inline gap */
}
.brand strong{ line-height:1.1; }

/* Legacy .nav pill style (for non-injected headers) */
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.nav a{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.nav a.active,
.btn.primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

/* ---- Layout ---- */
main{ max-width:1100px; margin:0 auto; padding:16px }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
}
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.stack{ display:flex; flex-direction:column; gap:8px }
.grid2{ display:grid; grid-template-columns:1fr; gap:10px }
@media (min-width:880px){ .grid2{ grid-template-columns:1fr 1fr } }

/* Card header/body polish and safe overflow for snapshot tables */
.card .hd{ font-weight:800; margin-bottom:8px }
.card .bd{ font-size:.95rem; overflow:auto }

/* ---- Controls ---- */
select,input,button{
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
button{ cursor:pointer; font-weight:700 }
.btn{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.btn.small{ padding:6px 8px; font-weight:600 }

/* ---- Tokens / helpers ---- */
.badge,
.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
}
.big{ font-size:42px; font-weight:900; letter-spacing:1px }
.muted{ color:var(--muted) }
.hidden{ display:none }

/* ---- Tables (full) ---- */
.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.table th, .table td{
  padding:10px;
  border-bottom:1px solid var(--line);
  text-align:right;
}
.table th:first-child, .table td:first-child{ text-align:left }

/* ---- Toasts & Dialogs ---- */
.toast{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom:14px;
  padding:10px 12px;
  background:#111; color:#fff;
  border-radius:10px; opacity:.95;
  z-index:999;
}
.dialog{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
  z-index:1000;
}
.dialog>div{
  background:#fff;
  border-radius:12px;
  border:1px solid var(--line);
  padding:16px;
  max-width:420px;
  width:92%;
}

/* ---- Print ---- */
@media print{
  header{ display:none }
  main{ padding:0 }
  .btn,.nav,.badge,.pill,.toast{ display:none !important }
  .table th,.table td{ padding:6px }
}

/* ============================
   HARD OVERRIDES: Green theme
   for injected site chrome
   ============================ */
header.site { 
  background:#003300 !important; 
  color:#ffffff !important; 
  z-index:1000 !important;             /* keep above hero/overlays */
}
header.site .brand span { color:#ffffff !important; }

header.site a,
header.site .main-nav a { 
  color:#e8ffe8 !important; 
  text-decoration:none;
}
header.site .main-nav a:hover { 
  background:rgba(255,255,255,.10) !important; 
  color:#aaffaa !important;
}

/* Mobile sheet background for injected nav */
@media (max-width:800px){
  nav.main-nav{
    background:#003300 !important;
    z-index:1000 !important;
  }
}

/* Footer theme */
footer.site {
  background:#003300 !important;
  color:#ffffff !important;
}
footer.site a { color:#aaffaa !important; }