/* Emados Championship 2026 — layered dark theme, orange accent (#E08E00 fixed)
   Reference feel: livescore.in / goal.com livescore (layered surfaces, tight
   match-row/card structure, accent used for status & CTAs, not flat black). */

:root {
  --ec-bg: #100E0A;
  --ec-surface-1: #1B1712;
  --ec-surface-2: #231E16;
  --ec-surface-3: #2B241A;
  --ec-border: #3A3122;

  --ec-text: #F7F3EA;
  --ec-text-muted: #A79A82;
  --ec-text-faint: #776B54;

  --ec-accent: #E08E00;
  --ec-accent-hover: #FFA724;
  --ec-accent-soft: rgba(224, 142, 0, 0.14);
  --ec-accent-ink: #1A1200;

  --ec-win: #3DDC84;
  --ec-win-soft: rgba(61, 220, 132, 0.14);
  --ec-draw: #93A0B4;
  --ec-lose: #C75450;

  --ec-radius: 10px;
  --ec-radius-sm: 6px;
  --ec-radius-pill: 999px;
  --ec-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

  /* Poppins is the dominant font sitewide (2026-07-28) — used for both body
     copy and headings/display text, replacing the old Oswald+Inter pairing.
     IBM Plex Mono is kept ONLY for tabular numbers/scores (a functional
     choice — fixed-width digits align better in score columns — not a
     stylistic one, so it's unaffected by the "dominantly Poppins" request). */
  --ec-font-display: "Poppins", sans-serif;
  --ec-font-body: "Poppins", sans-serif;
  --ec-font-mono: "IBM Plex Mono", monospace;
}

/* ============ base ============ */

body {
  background-color: var(--ec-bg);
  color: var(--ec-text);
  font-family: var(--ec-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ec-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ec-eyebrow {
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ec-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.ec-eyebrow::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--ec-accent);
  border-radius: 2px;
}

.ec-score, .ec-number, .ec-mono {
  font-family: var(--ec-font-mono);
}

a { color: var(--ec-accent); }
a:hover { color: var(--ec-accent-hover); }

hr.ec-divider {
  border-color: var(--ec-border);
  opacity: 1;
}

/* ============ top accent strip + navbar ============ */

.ec-topstrip {
  height: 3px;
  background: linear-gradient(90deg, var(--ec-accent), var(--ec-accent-hover));
}

.navbar-ec {
  background-color: var(--ec-surface-3);
  border-bottom: 1px solid var(--ec-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.navbar-ec .navbar-brand {
  color: var(--ec-text);
  font-family: var(--ec-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.navbar-ec .navbar-brand .ec-brand-accent {
  color: var(--ec-accent);
}

.navbar-ec .nav-link {
  color: var(--ec-text-muted);
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.navbar-ec .nav-link.active,
.navbar-ec .nav-link:hover {
  color: var(--ec-text);
  border-bottom-color: var(--ec-accent);
}

/* ============ navbar logo (center, flanked by split nav) ============ */

.ec-nav-container {
  position: relative;
}

.ec-navbar-logo {
  height: 40px;
  width: auto;
  display: block;
}
@media (min-width: 992px) {
  .ec-navbar-logo { height: 48px; }
}

/* Absolute-centered within .ec-nav-container regardless of how wide the
   left/right nav groups are — a plain flex justify-content-between would
   only center it if both sides were equal width, which they aren't (2 vs 3
   links), so this is the reliable way to keep the mark dead-center. */
.ec-navbar-brand-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.4rem 0;
}

.navbar-ec .ec-nav-left,
.navbar-ec .ec-nav-right {
  gap: 0.25rem;
}

/* ============ footer logo ============ */

.ec-footer-logo {
  height: 56px;
  width: auto;
  display: block;
  opacity: 0.95;
}
@media (min-width: 768px) {
  .ec-footer-logo { height: 68px; }
}

/* ============ pill tabs (area toggle, cabor filter) ============ */

.ec-pill-tabs {
  display: inline-flex;
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-pill);
  padding: 4px;
  gap: 4px;
  flex-wrap: wrap;
}
.ec-pill-tabs .ec-pill {
  border: 0;
  background: transparent;
  color: var(--ec-text-muted);
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 1rem;
  border-radius: var(--ec-radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.ec-pill-tabs .ec-pill.active {
  background: var(--ec-accent);
  color: var(--ec-accent-ink);
  font-weight: 600;
}
.ec-pill-tabs .ec-pill:not(.active):hover {
  color: var(--ec-text);
}

/* ============ cards ============ */

.card-ec {
  background-color: var(--ec-surface-1);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
}

.card-ec-hover {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card-ec-hover:hover {
  transform: translateY(-2px);
  border-color: var(--ec-accent);
}

/* ============ stat tiles (Beranda summary) ============ */

.stat-tile {
  background-color: var(--ec-surface-1);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 1.1rem 1.25rem;
}
.stat-tile__value {
  font-family: var(--ec-font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ec-accent);
  line-height: 1.1;
}
.stat-tile__label {
  color: var(--ec-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============ status pills (live / upcoming / finished) ============ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--ec-radius-pill);
  white-space: nowrap;
}
.status-pill--upcoming {
  background: var(--ec-surface-2);
  color: var(--ec-text-muted);
  border: 1px solid var(--ec-border);
}
.status-pill--finished {
  background: var(--ec-surface-2);
  color: var(--ec-text-faint);
  border: 1px solid var(--ec-border);
}

/* ============ match row ============ */

.match-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ec-border);
}
.match-row:last-child { border-bottom: 0; }
.match-row:hover { background: var(--ec-surface-2); }

.match-row__meta {
  width: 5.5rem;
  flex-shrink: 0;
  color: var(--ec-text-muted);
  font-size: 0.78rem;
}

.match-row__teams {
  flex: 1;
  min-width: 0;
}
.match-row__team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.match-row__team + .match-row__team { margin-top: 0.3rem; }
.match-row__crest {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ec-surface-3);
  border: 1px solid var(--ec-border);
  flex-shrink: 0;
}
.match-row__team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-row__team--winner .match-row__team-name {
  color: var(--ec-text);
  font-weight: 600;
}
.match-row__team--loser .match-row__team-name {
  color: var(--ec-text-muted);
}

.match-row__score {
  width: 3.2rem;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--ec-font-mono);
  font-weight: 600;
  font-size: 0.95rem;
}
.match-row__score span { display: block; }
.match-row__score span + span { margin-top: 0.3rem; }

.match-row__status {
  width: 6.5rem;
  flex-shrink: 0;
  text-align: right;
}

/* ============ badges ============ */

.badge-jabo {
  background-color: var(--ec-accent-soft);
  color: var(--ec-accent);
}
.badge-non-jabo {
  background-color: var(--ec-win-soft);
  color: var(--ec-win);
}

/* ============ buttons ============ */

.btn-ec {
  background-color: var(--ec-accent);
  border-color: var(--ec-accent);
  color: var(--ec-accent-ink);
  font-weight: 600;
}
.btn-ec:hover {
  background-color: var(--ec-accent-hover);
  border-color: var(--ec-accent-hover);
  color: var(--ec-accent-ink);
}

.btn-outline-ec {
  background-color: transparent;
  border: 1px solid var(--ec-accent);
  color: var(--ec-accent);
  font-weight: 600;
}
.btn-outline-ec:hover {
  background-color: var(--ec-accent);
  color: var(--ec-accent-ink);
}

/* ============ forms (dark-friendly overrides) ============ */

.form-control-ec, .form-select-ec {
  background-color: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  color: var(--ec-text);
}
.form-control-ec::placeholder { color: var(--ec-text-faint); }
.form-control-ec:focus, .form-select-ec:focus {
  background-color: var(--ec-surface-2);
  border-color: var(--ec-accent);
  color: var(--ec-text);
  box-shadow: 0 0 0 0.2rem var(--ec-accent-soft);
}
/* Bootstrap's own :disabled rule forces a light background but doesn't touch
   our light text color — without this, disabled fields render as invisible
   light-on-light text (e.g. Pendaftaran's auto-filled "Tim" field). */
.form-control-ec:disabled, .form-select-ec:disabled,
.form-control-ec[readonly] {
  background-color: var(--ec-surface-1);
  color: var(--ec-text-muted);
  opacity: 1;
}

.form-check-input {
  background-color: var(--ec-surface-2);
  border-color: var(--ec-text-faint);
}
.form-check-input:checked {
  background-color: var(--ec-accent);
  border-color: var(--ec-accent);
}
.form-check-input:focus {
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 0.2rem var(--ec-accent-soft);
}
.form-check-label { color: var(--ec-text); }

/* ============ tables ============ */

/* Bootstrap 5.3 sets cell color/background directly on every <td>/<th> via
   --bs-table-color/--bs-table-bg (not inherited from <table>'s own `color`),
   so overriding just `color` on .table-ec was never enough — every table
   body cell was actually rendering black-on-white by default, invisible the
   moment anything (e.g. a bg-ec-surface-2 highlighted row) forced a dark
   background under it. Override Bootstrap's own variables instead of
   fighting them. */
.table-ec {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ec-text);
  --bs-table-border-color: var(--ec-border);
  --bs-table-striped-bg: var(--ec-surface-2);
  --bs-table-striped-color: var(--ec-text);
  --bs-table-active-bg: var(--ec-surface-2);
  --bs-table-active-color: var(--ec-text);
  --bs-table-hover-bg: var(--ec-surface-2);
  --bs-table-hover-color: var(--ec-text);
  color: var(--ec-text);
  margin-bottom: 0;
}
.table-ec thead th {
  background-color: var(--ec-surface-3);
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ec-text-muted);
  border-color: var(--ec-border);
  white-space: nowrap;
}
.table-ec td {
  border-color: var(--ec-border);
  vertical-align: middle;
}
.table-ec tbody tr:hover {
  background-color: var(--ec-surface-2);
}
.table-ec tbody tr.rank-top { background-color: var(--ec-accent-soft); }

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-family: var(--ec-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--ec-surface-3);
  color: var(--ec-text-muted);
}
.rank-badge--1 { background: var(--ec-accent); color: var(--ec-accent-ink); }
.rank-badge--2 { background: #C7C7C7; color: #1A1200; }
.rank-badge--3 { background: #B5824A; color: #1A1200; }

/* ============ team directory cards ============ */

.team-card__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ec-surface-3);
  border: 1px solid var(--ec-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ec-font-display);
  font-weight: 700;
  color: var(--ec-accent);
  flex-shrink: 0;
}

.ec-roster-list {
  list-style: none;
  padding-left: 0;
}
.ec-roster-list li {
  border-top: 1px solid var(--ec-border);
}
.ec-roster-list li:first-child {
  border-top: 0;
}

/* ============ footer ============ */

.ec-footer {
  background-color: var(--ec-surface-3);
  border-top: 1px solid var(--ec-border);
  color: var(--ec-text-muted);
}

/* ============ alerts (dark-friendly, via Bootstrap's own CSS vars) ============ */

.alert-danger {
  --bs-alert-color: #FFD3D0;
  --bs-alert-bg: rgba(199, 84, 80, 0.16);
  --bs-alert-border-color: rgba(199, 84, 80, 0.4);
}
.alert-success {
  --bs-alert-color: #C7F5DC;
  --bs-alert-bg: var(--ec-win-soft);
  --bs-alert-border-color: rgba(61, 220, 132, 0.4);
}
.alert-warning {
  --bs-alert-color: #FFE1AD;
  --bs-alert-bg: var(--ec-accent-soft);
  --bs-alert-border-color: rgba(224, 142, 0, 0.4);
}

/* ============ modals (dark-friendly, via Bootstrap's own CSS vars) ============ */

.modal-content {
  --bs-modal-color: var(--ec-text);
  --bs-modal-bg: var(--ec-surface-1);
  --bs-modal-border-color: var(--ec-border);
  --bs-modal-header-border-color: var(--ec-border);
  --bs-modal-footer-border-color: var(--ec-border);
  --bs-modal-footer-bg: transparent;
}
.modal-title { color: var(--ec-text); }

/* ============ pagination (dark-friendly, via Bootstrap's own CSS vars) ============ */

.pagination {
  --bs-pagination-color: var(--ec-text);
  --bs-pagination-bg: var(--ec-surface-2);
  --bs-pagination-border-color: var(--ec-border);
  --bs-pagination-hover-color: var(--ec-text);
  --bs-pagination-hover-bg: var(--ec-surface-3);
  --bs-pagination-hover-border-color: var(--ec-border);
  --bs-pagination-focus-color: var(--ec-text);
  --bs-pagination-focus-bg: var(--ec-surface-3);
  --bs-pagination-active-color: var(--ec-accent-ink);
  --bs-pagination-active-bg: var(--ec-accent);
  --bs-pagination-active-border-color: var(--ec-accent);
  --bs-pagination-disabled-color: var(--ec-text-faint);
  --bs-pagination-disabled-bg: var(--ec-surface-1);
  --bs-pagination-disabled-border-color: var(--ec-border);
}

/* ============ knockout bracket (Klasemen detail per cabor) ============ */
/* 2026-07-28: rebuilt as a native HTML <table> with rowspan (was flexbox
   with justify-content:space-around) — user reported the flex version
   looked sparse/misaligned with large uneven gaps once later rounds were
   still placeholders. A table with rowspan gives reliable browser-native
   vertical alignment: each round's cells get a rowspan computed in PHP
   (ec_distribute_rowspans()) so they always sum to the SAME total row count
   as Round 1, regardless of how unevenly a round's match count reduces
   round-to-round (byes mean it's not always a clean halving). Styling
   (solid-fill winner highlight, card shadow, blocky header) still adapted
   from a reference March-Madness-style bracket the user shared, re-themed
   to our dark/gold palette — but NOT that reference's hardcoded CSS-grid
   row numbers, since those only work for its fixed 64-team/4-region shape
   and ours is dynamic (however many kontingen/peserta actually registered). */

/* Brackets are inherently wider than any viewport, so scroll horizontally on
   mobile rather than trying to squeeze columns — the standard pattern for
   this kind of content, same approach already used for wide tables. */
.ec-bracket-wrap {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.ec-bracket-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: max-content;
  table-layout: fixed;
}
.ec-bracket-table thead th {
  width: 230px;
  text-align: center;
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ec-text);
  background: var(--ec-surface-3);
  padding: 0.6rem 0.5rem;
  border: none;
}
.ec-bracket-table thead th:first-child { border-radius: var(--ec-radius-sm) 0 0 var(--ec-radius-sm); }
.ec-bracket-table thead th:last-child { border-radius: 0 var(--ec-radius-sm) var(--ec-radius-sm) 0; }
.ec-bracket-cell {
  vertical-align: middle;
  text-align: center;
  padding: 0.6rem 0.85rem;
  border-right: 1px solid var(--ec-border);
}
.ec-bracket-cell:last-child { border-right: none; }
.ec-bracket-cell--champion { background: transparent; }
.ec-bracket-match {
  position: relative;
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.ec-bracket-match:not(.ec-bracket-match--placeholder):not(.ec-bracket-match--bye):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.ec-bracket-match--placeholder {
  background: transparent;
  border-style: dashed;
  border-color: var(--ec-text-faint);
  box-shadow: none;
}
.ec-bracket-match--bye {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.ec-bracket-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.25;
}
.ec-bracket-slot + .ec-bracket-slot {
  border-top: 1px solid var(--ec-border);
}
.ec-bracket-slot__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Solid accent fill for the winner row — a much stronger, "who advanced"
   signal than a text-color change alone, matching the reference's solid
   `.winner` block. Applied per-slot (not the whole card), since a match's
   loser row still needs to stay legible right next to it. */
.ec-bracket-slot--winner {
  background-color: var(--ec-accent);
  border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
}
.ec-bracket-slot:first-child.ec-bracket-slot--winner {
  border-radius: var(--ec-radius-sm) var(--ec-radius-sm) 0 0;
}
.ec-bracket-slot--winner .ec-bracket-slot__name {
  color: var(--ec-accent-ink);
  font-weight: 700;
}
.ec-bracket-slot--loser {
  opacity: 0.7;
}
.ec-bracket-slot--loser .ec-bracket-slot__name {
  color: var(--ec-text-faint);
}
.ec-bracket-slot--tbd .ec-bracket-slot__name {
  color: var(--ec-text-faint);
  font-style: italic;
}
.ec-bracket-slot__score {
  font-family: var(--ec-font-mono);
  color: var(--ec-text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.ec-bracket-slot--winner .ec-bracket-slot__score {
  color: var(--ec-accent-ink);
  font-weight: 700;
}
.ec-bracket-bye-label {
  padding: 0.6rem 0.7rem;
  font-size: 0.8rem;
  color: var(--ec-text-muted);
  font-style: italic;
}
.ec-bracket-champion-box {
  background: var(--ec-accent);
  border: 1px solid var(--ec-accent);
  border-radius: var(--ec-radius);
  padding: 0.9rem 1.1rem;
  text-align: center;
  font-family: var(--ec-font-display);
  font-weight: 700;
  color: var(--ec-accent-ink);
  font-size: 1rem;
  box-shadow: 0 4px 18px var(--ec-accent-soft);
}
.ec-bracket-champion-box--pending {
  background: transparent;
  border-style: dashed;
  border-color: var(--ec-text-faint);
  color: var(--ec-text-faint);
  font-weight: 500;
  font-style: italic;
}

/* ============ misc utility ============ */

.text-ec-muted { color: var(--ec-text-muted) !important; }
.text-ec-faint { color: var(--ec-text-faint) !important; }
.bg-ec-surface-2 { background-color: var(--ec-surface-2) !important; }