/* Dark theme + clean layout */
:root { --bg:#0b1320; --card:#111a2c; --muted:#93a0b0; --text:#e9eef5; --accent:#61dafb; --ok:#21c392; --warn:#ffb020; --err:#ff5d5d; }
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:1000px;margin:0 auto;padding:20px 16px}
header h1{margin:0 0 4px;font-size:28px}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid #22304a;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.predict-row .btn{background-color: #1ea77c;}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:780px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
label{font-size:12px;color:var(--muted)}
input,select,button,textarea{border-radius:12px;border:1px solid #2a3b5c;background:#0f182a;color:var(--text);padding:10px 12px;font-size:16px}
button{cursor:pointer}

/* Buttons */
.btn{border:1px solid #0c3a60}
/* More contrast for navigation buttons */
.btn.secondary{color:#ffffff;border-radius:12px;padding:8px 12px;text-decoration:none}
.btn.ok{border-radius: 10px;padding: 8px 10px;color: white;text-decoration: none;}
#btnSaveAll.btn.ok{background-color:#1ea77c}
#btnLogin.btn.ok{background-color: #1ea77c;}
.btn.warn{border-color:#cf0606;color:#be3e3e}
.btn:hover{filter:brightness(1.05)}
.btn.secondary:hover{filter:brightness(1.07)}
.btn.ok.save{background-color: #1ea77c;}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #2a3b5c;background:#0f1b2f;color:var(--muted)}
.tabs{display:flex;gap:10px;margin:12px 0}
.tab{padding:8px 12px;border-radius:12px;background:#0e182a;border:1px solid #1f2e4b;cursor:pointer}
.tab.active{background:#16233b;border-color:#2a3b5c}
.divider{height:1px;background:#1b2942;margin:12px 0}
.tag{font-size:11px;color:#9fb3d1}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
th,td{padding:10px 12px;text-align:center}
tr{background:#0f192b;border-radius:12px}
tr td:first-child, tr th:first-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
tr td:last-child, tr th:last-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.status{float:inline-end}

/* Utility */
.hidden{display:none !important}

/* Normalize number inputs & remove spinners */
input[type=number]{ appearance: textfield; -moz-appearance: textfield; width: 20px;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* Mini badge for ב/ח - hidden by default (desktop) */
.mini{ display:none; align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;
  font-size:12px;border:1px solid #2a3b5c;background:#0f1b2f;color:#c7d2e0}

/* --- Mobile layout only for MATCHES table --- */
@media (max-width:1029px){
  .container{padding:14px 12px}
  header h1{font-size:22px}

  /* Only affect matches table (NOT leaderboard) */
  .table--matches{border-spacing:0}
  .table--matches thead{display:none}
  .table--matches, .table--matches tbody{display:block;width:100%}
  .table--matches tbody tr{display:block;padding:12px;border-radius:14px;margin:10px 0;background:#0f182a;border:1px solid #23314b}
  .table--matches tbody td{
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    text-align:start;
  }
  .table--matches tbody td[data-label]::before{
    content:attr(data-label); color:var(--muted); font-size:12px;
  }
  .table--matches tbody td.vs{display:none} /* hide VS column on narrow screens */

  /* Show mini badges only on mobile */
  .mini{ display:inline-flex; }

  .predict-row{gap:10px; align-items:center}
  .predict-row input[type=number]{width:20px;text-align:center}
  .predict-row .btn{min-width:88px;background-color: #1ea77c;}
}

/* --- Mobile layout for Admin tables: scorers & champions & relegated --- */
@media (max-width: 600px){
  #scorersTable, #champTable, #relegatedTable { width: 100%; border-spacing: 0; }
  #scorersTable thead, #champTable thead, #relegatedTable thead { display: none; }
  #scorersTable, #scorersTable tbody,
  #champTable,   #champTable tbody,
  #relegatedTable, #relegatedTable tbody { display: block; width: 100%; }

  #scorersTable tbody tr,
  #champTable   tbody tr,
  #relegatedTable tbody tr {
    display: block;
    padding: 12px;
    border-radius: 14px;
    margin: 10px 0;
    background: #0f182a;
    border: 1px solid #23314b;
  }
  #scorersTable tbody td,
  #champTable   tbody td,
  #relegatedTable tbody td {
    display: block;
    width: 100%;
    text-align: start;
    padding: 8px 6px;
  }

  /* קלטים רוחב מלא ונוחים למגע */
  #scorersTable input[type="text"],
  #scorersTable input[type="number"],
  #champTable   input[type="text"],
  #relegatedTable input[type="text"] {
    min-width: 0;
  }

  /* כפתורי שמירה במסך צר-רוחב מלא */
  #scorersTable .btn,
  #champTable   .btn,
  #relegatedTable .btn {
    width: 100%;
  }

  /* הכרזות עונה - מובייל */
  #outcomes-admin .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Popup Styles */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.popup-content {
  background: #0f182a;
  border: 1px solid #23314b;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0 20px;
  border-bottom: 1px solid #23314b;
  margin-bottom: 20px;
}

.popup-header h3 {
  margin: 0;
  color: #fff;
}

.popup-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.popup-close:hover {
  background: #23314b;
}

.popup-body {
  padding: 0 20px 20px 20px;
}

.season-picks-grid {
  display: grid;
  gap: 16px;
}

.pick-card {
  background: #1a2332;
  border: 1px solid #23314b;
  border-radius: 8px;
  padding: 16px;
}

.pick-card h4 {
  margin: 0 0 8px 0;
  color: #fff;
  font-size: 16px;
}

.pick-value {
  color: #a0aec0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.pick-value small {
  color: #93a0b0;
  font-size: 14px;
  font-weight: normal;
}

.loading {
  text-align: center;
  color: #a0aec0;
  padding: 20px;
}

@media (max-width: 600px) {
  .popup-content {
    margin: 10px;
    max-height: 90vh;
  }
  
  .popup-header {
    padding: 15px 15px 0 15px;
  }
  
  .popup-body {
    padding: 0 15px 15px 15px;
  }
}

/* Family Predictions List */
.family-predictions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prediction-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #1a2332;
  border: 1px solid #23314b;
  border-radius: 8px;
}

.prediction-nickname {
  font-weight: 500;
  color: #fff;
}

.prediction-score {
  font-size: 18px;
  font-weight: 600;
  color: #61dafb;
  background: #0f182a;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #23314b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-label {
  font-size: 12px;
  color: #93a0b0;
  font-weight: normal;
}

@media (min-width: 768px) {
  .score-label {
    font-size: 14px;
  }
  
  .score-label:first-child::after {
    content: "ית";
  }
  
  .score-label:last-child::after {
    content: "וץ";
  }
}