/* =========================
   THEME / BASE
   ========================= */
:root{
  --bg:#0b6623;
  --bg2:#145a32;
  --panel:#1f6b3c;
  --text:#fff;
  --muted:#cfe7d6;
  --accent:#f1c40f;
  --accent-2:#1abc9c;
  --danger:#e74c3c;
  --gray:#95a5a6;
  --header:#1e8449;
  --footer:#0b3d16;
  --radius:14px;
}

@font-face{
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Tajawal");
}

html, body{
  height:100%;
  margin:0;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family: "Tajawal", Arial, sans-serif;
}

.content{
  padding:16px;
  max-width:1000px;
  margin-inline:auto;
  padding-bottom:90px; /* keep footer from covering content */
}

h2{
  text-align:center;
  margin:8px 0 16px;
}

/* =========================
   HEADER / NAV (desktop + mobile)
   ========================= */
.main-header{
  position:sticky; top:0; z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--header);
  padding:12px 16px;
  box-shadow:0 3px 6px rgba(0,0,0,.2);
}

.main-header .logo{
  font-size:1.4em;
  font-weight:700;
}

.nav-wrap{ display:flex; align-items:center; gap:10px; width:100%; justify-content:space-between; }

.main-nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.main-nav a{
  color:#fff; text-decoration:none; font-weight:700;
  padding:10px 8px; display:inline-flex; align-items:center; gap:6px;
}
.main-nav a:hover{ color:var(--accent); }

/* Hamburger toggle (mobile only) */
.nav-toggle{
  display:none;
  background:transparent; border:0; color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
  padding:8px; border-radius:8px;
}
.nav-toggle:focus{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width: 820px){
  .main-header{ padding:10px 12px; }
  .main-header .logo{ font-size:1.15em; }
  .nav-toggle{ display:inline-flex; }
  .main-nav{
    position:fixed; inset-inline:0; top:56px; /* below header */
    background:#154f2c; border-top:1px solid rgba(255,255,255,.15);
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 12px;
  }
  .main-nav.show{ display:flex; }
  .main-nav a, .main-nav form select, .main-nav .btn-logout, .main-nav .btn-login{
    width:100%; margin:6px 0;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    padding:10px 12px;
  }
}

/* Super admin school select inside nav */
.main-nav select{
  background:#fff; color:#000; border:1px solid #ccc; border-radius:8px;
  padding:10px 12px; font-size:16px; min-height:44px;
}

/* =========================
   FORMS (uniform height + grid)
   ========================= */
button, .btn, input, select{
  font-size:16px;                    /* prevent iOS zoom */
  line-height:1.2;
  min-height:44px;                   /* tap target */
  padding:12px 14px;
  border-radius:10px;
  border:0;
}

.school-form{
  /* grid makes all controls line up symmetrically */
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:14px;
  justify-content:center;
  max-width:1000px;
  margin:14px auto 0;
}

.school-form input,
.school-form select,
.school-form button{
  box-sizing:border-box;
  width:100%;
  min-height:56px;          /* identical height for all controls */
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ccc;
  font-size:16px;
  line-height:1.2;
}

.school-form select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#fff; color:#000;
}

.school-form button{
  background:#f39c12; color:#fff; font-weight:700; cursor:pointer;
  border:0; transition:.25s;
}
.school-form button:hover{ background:#e67e22; }

@media (max-width: 720px){
  .school-form{ grid-template-columns: 1fr; }
}

/* Round selector (above forms/tables) */
.round-nav{
  display:flex; justify-content:center; align-items:center; gap:12px; margin:14px 0;
}
.round-form select{
  background:#fff; color:#000; border:1px solid #ccc; border-radius:8px;
  padding:10px 14px; font-size:1.05em; cursor:pointer;
}

/* =========================
   TABLES (desktop look + horizontal scroll on phones)
   ========================= */
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch; /* smooth on iOS */
}
.table-scroll::-webkit-scrollbar{ height:8px; }
.table-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:8px; }

.standings{
  width:100%;
  border-collapse:separate; border-spacing:0;
  background:transparent;
}
.standings thead th{
  background:#145a32;
  padding:12px 10px; text-align:center;
}
.standings td, .standings th{
  padding:12px 10px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.standings tr{ background:rgba(255,255,255,.06); }
.standings tr:hover{ background:rgba(255,255,255,.12); }

/* Tight, minimal spacing + vertical separators for wide tables */
.standings.standings-wide{
  border-collapse: collapse !important;
  table-layout: auto;
  min-width: 980px; /* tune if you add/remove columns */
}
.standings.standings-wide th,
.standings.standings-wide td{
  padding: 8px 10px !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.25);
}
.standings.standings-wide th:first-child,
.standings.standings-wide td:first-child{
  border-left: 1px solid rgba(255,255,255,.25);
}
.standings.standings-wide th:last-child,
.standings.standings-wide td:last-child{
  border-right: none;
}
.standings.standings-wide thead th{
  background:#145a32;
  border-right: 1px solid rgba(255,255,255,.35);
}
.standings.standings-wide thead th:first-child{
  border-left: 1px solid rgba(255,255,255,.35);
}
.standings.standings-wide tbody tr:hover{
  background: rgba(255,255,255,.08);
}

/* =========================
   LAST-5 RESULT CIRCLES
   ========================= */
.circle{ display:inline-block; width:18px; height:18px; border-radius:50%; margin:0 2px; }
.circle.win  { background:#2ecc71; }
.circle.draw { background:#95a5a6; }
.circle.loss { background:#e74c3c; }

/* =========================
   FOOTER (sticky, thin; grows a bit)
   ========================= */
.main-footer{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--footer);
  color:#f1f1f1;
  font-size:.85em;
  border-top:2px solid var(--accent);
  padding:6px 10px; /* thin by default */
  display:flex; justify-content:center; align-items:center; gap:8px;
  z-index:1000;
  transition:padding .25s, font-size .25s;
}
.main-footer .icon{ font-size:1.2em; color:var(--accent); }
.main-footer.expanded{ padding:18px 10px; font-size:1em; }

/* --- Compact admin forms & tables (overrides) --- */
.school-form{
  grid-template-columns: repeat(3, minmax(180px, 1fr)); /* narrower columns */
  gap:10px;
  max-width:900px;
}

.school-form input,
.school-form select,
.school-form button{
  min-height:40px;         /* was 56px */
  padding:8px 10px;        /* was 12/14 */
  border-radius:8px;       /* a bit smaller */
  font-size:14.5px;        /* down from 16px */
}

/* make selects still readable */
.round-form select{ font-size:14.5px; padding:8px 10px; }

.standings,
.standings.standings-wide{
  font-size:14px;          /* smaller table text */
}
.standings td, .standings th{
  padding:6px 8px !important; /* tighter cells */
}

/* mobile single column stays compact */
@media (max-width:720px){
  .school-form{ grid-template-columns: 1fr; max-width:500px; }
}

/* ===== Compact matches table overrides ===== */

/* 1) Tighten table cells */
.standings,
.standings.standings-wide{
  font-size:13.5px;
}
.standings.standings-wide th,
.standings.standings-wide td{
  padding:4px 6px !important;      /* less vertical & horizontal space */
}

/* 2) Make inline edit controls small */
.standings td form{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px !important;               /* override inline styles if any */
  margin:0;
}

.standings td input[type="number"]{
  width:48px;                       /* small boxes */
  min-height:30px;                  /* override global min-height */
  padding:4px 6px;                  /* compact padding */
  border-radius:6px;
  font-size:13px;                   /* smaller text */
  line-height:1.1;
  border:1px solid #cfcfcf;
  background:#fff;
  color:#000;
}

.standings td button{
  min-height:30px;                  /* compact button */
  padding:6px 8px;
  border-radius:6px;
  font-size:13px;
  line-height:1;
}

/* 3) Optional: tighten the result column visually */
.standings td strong{
  font-size:14px;
}

/* 4) Reduce extra margin around the scroll wrapper if used */
.table-scroll{
  margin-top:8px;
}