/* 442Live — komponen spesifik livescore/prediksi, namespaced .lc-*
   Token-driven murni (var canon + color-mix dari --brand). NOL hex mentah.
   Layer di ATAS eclipse.css. Recipe canon dulu; ini cuma yang belum ada di canon. */

/* ── Brand di sidebar / drawer head ── */
.lc-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px; }
.lc-brand img { height: 30px; width: auto; object-fit: contain; }
.lc-brand strong { font-size: 1.2rem; font-weight: var(--fw-bold); color: var(--ink); }

/* ── Nav item dengan LOGO/FLAG (bukan svg) ── */
.lc-navlogo img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.lc-navctry img { width: 22px; height: 15px; object-fit: cover; flex-shrink: 0; border-radius: 3px; box-shadow: 0 0 0 1px var(--divider); }
.lc-navlogo span, .lc-navctry span, .nav-item span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.lc-navsearch { margin: 6px 12px 10px; }
.lc-navsearch input { min-height: 40px; }

/* ── Topbar icon buttons: SUBTLE (canon .btn-ghost pre-tinted terlalu berat di
      topbar mobile — 3 tile biru norak). Transparan, muted, hover baru tint. ── */
.ec-topbar .btn-icon,
.ec-drawer .dr-head .btn-icon {
  background: transparent; color: var(--ink-soft);
}
.ec-topbar .btn-icon:hover,
.ec-drawer .dr-head .btn-icon:hover {
  background: var(--hover); color: var(--ink);
}

/* ── Page-head title: lebih ringkas di mobile (24px kegedean di 390px) ── */
@media (max-width: 640px) {
  .page-head .ph-title { font-size: var(--fs-h5); }
  .ec-content { padding: 16px; }
}
.lc-navmore { width: 100%; justify-content: flex-start; color: var(--brand); margin-top: 2px; }

/* ── Topbar clusters ── */
.lc-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lc-top-left strong { font-size: var(--fs-h6); font-weight: var(--fw-bold); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lc-burger { display: none; }
@media (max-width: 900px) { .lc-burger { display: inline-flex; } }

/* ── Banner sponsor (admin-managed) ── */
.lc-banner { display: block; margin: var(--gap) var(--gap) 0; border-radius: var(--r-card); overflow: hidden; }
.lc-banner img { width: 100%; height: auto; display: block; }

/* ── Footer ── */
.lc-footer { text-align: center; padding: 28px var(--gap); margin-top: var(--gap);
  color: var(--muted); font-size: var(--fs-small); border-top: 1px solid var(--divider); }

/* ════════════════════════════════════════════════════════════════════
   KOMPONEN HALAMAN (diisi bertahap saat rebuild page): match-row,
   prob-bar, competition-block, date-strip, standings-form badge.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tab bar scroll indicator (fade kanan) — mobile ── */
/* Semua tab bar scrollable dibungkus .lc-tabs-wrap untuk gradient fade */
.lc-tabs-wrap {
  position: relative;
}
.lc-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: linear-gradient(to right, transparent, var(--paper));
  pointer-events: none;
  opacity: 0;                        /* default OFF — ec-init.js aktifin cuma pas overflow */
  transition: opacity 0.2s;
}
/* Fade nongol HANYA kalau tab bar beneran scrollable & belum di ujung (class dari ec-init.js) */
.lc-tabs-wrap.is-scrollable:not(.scrolled-end)::after { opacity: 1; }