/* ═══════════════════════════════════════════════════════
   UMW SITEMAP — Match Card Grid v8
   v8: Readable time, prominent league headers
═══════════════════════════════════════════════════════ */

:root {
  --mc-blue:    #1d4ed8;
  --mc-sky:     #0ea5e9;
  --mc-navy:    #0f172a;
  --mc-green:   #16a34a;
  --mc-red:     #dc2626;
  --mc-amber:   #d97706;
  --mc-gray:    #64748b;
  --mc-border:  #e2e8f0;
  --mc-bg:      #f1f5f9;
  --mc-card:    #ffffff;
  --mc-radius:  10px;
  --mc-shadow:  0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --f-u: 'Raleway','Segoe UI',sans-serif;
  --f-b: 'Source Sans 3','Segoe UI',sans-serif;
  --f-d: 'Bebas Neue',Impact,sans-serif;
  /* League group accent palette */
  --a1: #3b82f6;
  --a2: #10b981;
  --a3: #f59e0b;
  --a4: #ec4899;
  --a5: #8b5cf6;
  --a6: #06b6d4;
}

/* ── Wrapper ─────────────────────────────────────────── */
.umw-sitemap-html {
  padding: 16px;
  background: var(--mc-bg);
  font-family: var(--f-b);
}

/* ── Date Picker ─────────────────────────────────────── */
.sitemap-filter {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.sitemap-filter form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mc-card);
  border: 1.5px solid var(--mc-border);
  border-radius: 10px;
  padding: 8px 18px;
  box-shadow: var(--mc-shadow);
}
.sitemap-filter input[type="date"] {
  border: none; outline: none;
  font-size: 15px; font-family: var(--f-u); font-weight: 700;
  color: var(--mc-navy); background: transparent; cursor: pointer;
}
.sitemap-filter .cal-icon { color: var(--mc-sky); font-size: 16px; }

/* Status legend hidden in umw_sitemap_html */
.status-legend { display: none; }

/* ═══════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════ */
.umw-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  border-bottom: 2px solid var(--mc-border);
}
.umw-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--f-u);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mc-gray);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all .15s;
}
.umw-tab-btn:hover              { color: var(--mc-navy); background: rgba(14,165,233,.07); }
.umw-tab-btn.active             { color: var(--mc-blue); border-bottom-color: var(--mc-blue); background: rgba(29,78,216,.06); }
.umw-tab-btn.umw-tab-live       { color: #b91c1c; }
.umw-tab-btn.umw-tab-live.active{ border-bottom-color: var(--mc-red); background: rgba(220,38,38,.05); color: var(--mc-red); }

.umw-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 20px; background: #e2e8f0;
  color: var(--mc-gray); font-size: 10px; font-weight: 700; font-family: var(--f-b);
  transition: all .15s;
}
.umw-tab-btn.active .umw-tab-count              { background: var(--mc-blue); color: #fff; }
.umw-tab-btn.umw-tab-live.active .umw-tab-count { background: var(--mc-red);  color: #fff; }

/* ═══════════════════════════════════════════════════════
   LEAGUE GROUP
═══════════════════════════════════════════════════════ */
.umw-league-group {
  margin-bottom: 18px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Header: dark base + left accent cycling */
.umw-league-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #0f172a;
  border-left: 6px solid var(--a1);
}
.umw-league-group:nth-child(6n+1) .umw-league-header { border-left-color: var(--a1); }
.umw-league-group:nth-child(6n+2) .umw-league-header { border-left-color: var(--a2); }
.umw-league-group:nth-child(6n+3) .umw-league-header { border-left-color: var(--a3); }
.umw-league-group:nth-child(6n+4) .umw-league-header { border-left-color: var(--a4); }
.umw-league-group:nth-child(6n+5) .umw-league-header { border-left-color: var(--a5); }
.umw-league-group:nth-child(6n+6) .umw-league-header { border-left-color: var(--a6); }

/* Country name — subtle tapi readable */
.umw-country-name {
  font-family: var(--f-u);
  font-size: 10.5px;
  font-weight: 800;
  color: #fb923c;          /* orange-400 — jelas, tidak silau, kontras di atas dark */
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.umw-lh-sep {
  color: rgba(255,255,255,.2);
  font-size: 14px;
  line-height: 1;
}
/* League name — BESAR & JELAS */
.umw-league-name {
  font-family: var(--f-u);
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .01em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umw-match-count {
  font-size: 10px; font-weight: 700; font-family: var(--f-b);
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  border-radius: 20px; padding: 2px 9px;
  flex-shrink: 0;
}

/* Cards grid inside group */
.umw-league-group .match-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  border: 1.5px solid var(--mc-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: #dde3ec; /* gap fill between cards */
}
.umw-league-group .mc-card {
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: var(--mc-card);
  outline: 1px solid var(--mc-border);
  transition: background .12s, outline-color .12s;
}
.umw-league-group .mc-card:hover    { background: #f0f9ff; outline-color: #7dd3fc; z-index: 2; position: relative; }
.umw-league-group .mc-card.is-live  { background: #fff5f5; outline-color: #fca5a5; }
.umw-league-group .mc-card.is-ft    { background: #f8fafc; }
.umw-league-group .mc-card.is-ft .mc-tname { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════
   MATCH CARD (standalone)
═══════════════════════════════════════════════════════ */
.mc-card {
  background: var(--mc-card);
  border: 1.5px solid var(--mc-border);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative;
}
.mc-card:hover         { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,165,233,.15); border-color: var(--mc-sky); }
.mc-card.is-live       { border-color: var(--mc-red); animation: live-border 2s ease-in-out infinite; }
@keyframes live-border { 0%,100%{border-color:#ef4444;} 50%{border-color:#fca5a5;} }

.mc-link { display: block; text-decoration: none; color: inherit; }

/* Card header (for other shortcodes) */
.mc-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--mc-navy); gap: 8px; }
.mc-comp   { font-family: var(--f-u); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status badges (other shortcodes) */
.mc-status             { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-u); font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.mc-status.s-ns        { background:#1a1a1a; color:#facc15; border:1px solid #facc1533; }
.mc-status.s-live      { background:#15803d; color:#fff; animation:mc-pulse 1.4s ease-in-out infinite; }
.mc-status.s-ht        { background:var(--mc-amber); color:#fff; }
.mc-status.s-ft        { background:#94a3b8; color:#1e293b; }
.mc-status.s-aet,.mc-status.s-pen { background:#94a3b8; color:#1e293b; }
.mc-status.s-pst       { background:rgba(255,255,255,.1); color:#93c5fd; border:1px solid #93c5fd44; }
.mc-status.s-canc      { background:rgba(220,38,38,.25); color:#fca5a5; }
.mc-status.s-susp      { background:rgba(217,119,6,.25); color:#fcd34d; }
.mc-dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:mc-blink 1s ease-in-out infinite; }
@keyframes mc-pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
@keyframes mc-blink { 0%,100%{opacity:1} 50%{opacity:.15} }

/* ── Card Body ─────────────────────────────────────────── */
.mc-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px 12px;
  gap: 4px;
}
.mc-team         { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mc-tname {
  font-family: var(--f-u);
  font-weight: 800;
  font-size: 12px;
  color: #1e293b;
  text-align: center;
  line-height: 1.25;
}

/* ── Center: time or score ─────────────────────────────── */
.mc-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 64px;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 8px;
  background: #f1f5f9; /* subtle panel */
}

/* Kickoff time — dark, legible, NOT glaring */
.mc-kickoff {
  font-family: var(--f-d);
  font-size: 26px;
  line-height: 1;
  color: #1e293b;      /* dark slate, tidak silau */
  letter-spacing: 1.5px;
  font-weight: 400;
}
.mc-tz {
  font-family: var(--f-u);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--mc-gray);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Score: live → merah, FT → abu */
.mc-score {
  font-family: var(--f-d);
  font-size: 30px;
  line-height: 1;
  color: #1e293b;
  letter-spacing: 1px;
}
.mc-card.is-live .mc-score { color: #dc2626; }
.mc-card.is-live .mc-center{ background: #fff1f2; }
.mc-card.is-ft  .mc-score  { color: #94a3b8; }
.mc-card.is-ft  .mc-center { background: #f8fafc; }
.mc-score .mc-sep  { color: #cbd5e1; font-size: .6em; margin: 0 1px; }
.mc-score-sub      { font-family: var(--f-b); font-size: 9px; color: var(--mc-gray); letter-spacing:.05em; text-transform:uppercase; }

/* VS for postponed */
.mc-vs { font-family: var(--f-u); font-size: 11px; font-weight: 700; color: var(--mc-gray); }

/* Live badge (in card center, replaces header badge) */
.mc-live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-u); font-size: 9px; font-weight: 900; letter-spacing: .1em;
  color: #fff; background: var(--mc-red);
  border-radius: 20px; padding: 2px 7px; margin-bottom: 3px;
  animation: mc-pulse 1.4s ease-in-out infinite;
}

/* ── Card Footer (other shortcodes) ───────────────────── */
.mc-footer    { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-top:1px solid var(--mc-border); background:var(--mc-bg); }
.mc-meta      { font-size:11px; color:var(--mc-gray); font-family:var(--f-b); }
.mc-season-badge { font-family:var(--f-u); font-size:10px; font-weight:700; color:var(--mc-sky); background:#e0f2fe; padding:2px 7px; border-radius:10px; }
.mc-round-badge  { font-family:var(--f-b); font-size:10px; color:rgba(255,255,255,.4); }

/* Standalone match list */
.match-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }

/* ── Empty state ──────────────────────────────────────── */
.mc-empty { text-align:center; padding:48px 24px; color:var(--mc-gray); font-family:var(--f-b); font-size:15px; }
.mc-empty span { font-size:40px; display:block; margin-bottom:12px; opacity:.3; }

/* ── Status legend (other shortcodes) ─────────────────── */
.status.ns   { background:#1a1a1a; color:#facc15; }
.status.live { background:#15803d; color:#fff; }
.status.ht   { background:var(--mc-amber); color:#fff; }
.status.ft   { background:#94a3b8; color:#1e293b; }
.status.pst  { background:#dbeafe; color:var(--mc-blue); }
.status.canc { background:#fee2e2; color:var(--mc-red); }
.status.susp { background:#fef3c7; color:var(--mc-amber); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .umw-sitemap-html { padding: 10px; }
  .umw-league-group .match-list { grid-template-columns: 1fr 1fr; }
  .match-list       { grid-template-columns: 1fr; }
  .mc-tname         { font-size: 11px; }
  .mc-score         { font-size: 26px; }
  .mc-kickoff       { font-size: 22px; }
  .umw-tabs         { overflow-x: auto; flex-wrap: nowrap; }
  .umw-tab-btn      { padding: 8px 14px; font-size: 10px; white-space: nowrap; }
  .umw-league-name  { font-size: 13px; }
}