/* ================================================================
   KFK PUAN DURUMU – style.css v2.0
   Widget ([kfk_widget]) + Tam Sayfa ([kfk_league_page])
   ================================================================ */

/* ---------- DESIGN TOKENS ---------- */
.kfk-standings {
  --bg:      #0f0f12;
  --bg2:     #13151a;
  --row:     #14161c;
  --row-alt: #191c24;
  --border:  #1f2330;
  --fg:      #e8eaf0;
  --muted:   #6b7280;
  --accent:  #7aa2ff;
  --promo:   #22c55e;
  --play:    #38bdf8;
  --releg:   #ef4444;
  --hl-bg:   rgba(122,162,255,.10);
  --hl-br:   rgba(122,162,255,.30);
  font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--fg);
}

/* ---------- BASE CARD ---------- */
.kfk-standings {
  background: linear-gradient(160deg, #0c0d11 0%, #0f1117 100%);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}

/* ---------- HEADER ---------- */
.kfk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.kfk-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.kfk-title span {
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
  font-size: 14px;
}
.kfk-updated {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.kfk-more {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.kfk-more:hover { text-decoration: underline; }

/* ---------- TABLE SHELL ---------- */
.kfk-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* ---------- ROWS ---------- */
.kfk-row {
  display: grid;
  align-items: center;
  padding: 9px 12px;
  background: var(--row);
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.kfk-row:last-child { border-bottom: none; }
.kfk-row:nth-child(even) { background: var(--row-alt); }
.kfk-row:not(.kfk-head):hover { background: #1c1f29; }

.kfk-head {
  background: #0b0c10 !important;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- WIDGET LAYOUT (4 cols) ---------- */
.kfk-table-widget .kfk-row {
  grid-template-columns: 34px 1fr 36px 42px;
  gap: 4px;
}

/* ---------- FULL TABLE LAYOUT (10 cols) ---------- */
.kfk-table-full .kfk-row {
  grid-template-columns: 34px 1fr repeat(6, 38px) 48px 44px;
  gap: 4px;
}

/* ---------- COLUMNS ---------- */
.kfk-col { display: block; min-width: 0; }

.c-rank {
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.c-team {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-num, .c-av, .c-pts {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.c-pts {
  font-weight: 700;
  color: #fff;
}
.c-av { color: var(--muted); }

/* ---------- STATUS RANK COLORS ---------- */
.status-promotion .c-rank { color: var(--promo) !important; }
.status-playoff   .c-rank { color: var(--play)  !important; }
.status-relegation .c-rank{ color: var(--releg) !important; }

/* left border accent */
.status-promotion  { border-left: 3px solid var(--promo); }
.status-playoff    { border-left: 3px solid var(--play);  }
.status-relegation { border-left: 3px solid var(--releg); }
.kfk-row:not(.status-promotion):not(.status-playoff):not(.status-relegation) {
  border-left: 3px solid transparent;
}

/* ---------- HIGHLIGHT ---------- */
.kfk-highlight {
  background: var(--hl-bg) !important;
  outline: 1px solid var(--hl-br);
  outline-offset: -1px;
}

/* ---------- LEGEND ---------- */
.kfk-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.kfk-legend .li {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.kfk-legend .promo  { background: var(--promo); }
.kfk-legend .playoff{ background: var(--play);  }
.kfk-legend .releg  { background: var(--releg); }

/* ---------- ERROR ---------- */
.kfk-error {
  padding: 12px 16px;
  background: rgba(239,68,68,.15);
  color: #fca5a5;
  border-radius: 8px;
  font-size: 13px;
}

/* ================================================================
   FULL LEAGUE PAGE  [kfk_league_page]
   ================================================================ */
.kfk-page {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 24px;
  align-items: start;
}

/* Loading overlay */
.kfk-page-main {
  transition: opacity .2s;
}
.kfk-page-main.kfk-loading {
  opacity: .4;
  pointer-events: none;
}

/* ---------- ASIDE ---------- */
.kfk-page-aside {
  background: linear-gradient(160deg, #0c0d11 0%, #0f1117 100%);
  border: 1px solid #1f2330;
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.kfk-aside-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #e8eaf0;
  background: #0b0c10;
  border-bottom: 1px solid #1f2330;
}
.kfk-aside-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}
.kfk-aside-list li { margin: 0; padding: 0; }
.kfk-aside-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: #9aa0b0;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.kfk-aside-item:hover {
  background: rgba(122,162,255,.08);
  color: #e8eaf0;
}
.kfk-aside-item.active {
  background: rgba(122,162,255,.12);
  color: #fff;
  font-weight: 600;
}
.kfk-aside-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d3045;
  flex-shrink: 0;
  transition: background .12s;
}
.kfk-aside-dot.active {
  background: var(--accent, #7aa2ff);
  box-shadow: 0 0 6px rgba(122,162,255,.5);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .kfk-page {
    grid-template-columns: 1fr;
  }
  .kfk-page-aside {
    position: static;
    order: -1;  /* aside üste gelsin */
  }
  .kfk-aside-list {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
    gap: 4px;
  }
  .kfk-aside-item {
    padding: 6px 10px;
    border-radius: 20px;
    background: #14161c;
    font-size: 12px;
  }
  .kfk-aside-item.active { background: rgba(122,162,255,.18); }
}

@media (max-width: 640px) {
  /* Full tablo → sadece #, Takım, AV, P */
  .kfk-table-full .kfk-row {
    grid-template-columns: 30px 1fr 42px 40px !important;
  }
  /* O,G,B,M,A,Y sütunlarını gizle (3–8. çocuk) */
  .kfk-table-full .kfk-row > .kfk-col:nth-child(3),
  .kfk-table-full .kfk-row > .kfk-col:nth-child(4),
  .kfk-table-full .kfk-row > .kfk-col:nth-child(5),
  .kfk-table-full .kfk-row > .kfk-col:nth-child(6),
  .kfk-table-full .kfk-row > .kfk-col:nth-child(7),
  .kfk-table-full .kfk-row > .kfk-col:nth-child(8) {
    display: none;
  }

  .kfk-standings { padding: 12px; }
  .kfk-title { font-size: 15px; }
}