/* =====================================================================
   UEFA DATA HUB — shared design system
   ---------------------------------------------------------------------
   Include ONCE, globally (see plan §1). Drives Events, Passing, Crosses.
   Classes are namespaced `dh-` to avoid collisions with existing app CSS.
   CSS custom properties are the single source of truth for the palette.
   ===================================================================== */

:root{
  /* container — fill the parent (fixture card) */
  --app-width: 100%;

  /* surfaces — tuned to sit on the fixture card (#253b52) */
  --bg-0:#0e1f34; --bg-1:#152d47;
  --panel:#1c3652; --panel-2:#254566; --panel-3:#132840;
  --line:rgba(140,190,240,.18); --line-strong:rgba(140,190,240,.38);

  /* ink */
  --ink:#f4f8ff; --ink-dim:#b7c8e6; --ink-faint:#7f96bd;

  /* brand accents */
  --cyan:#38bdf8; --teal:#2dd4bf; --blue:#3b82f6; --blue-2:#60a5fa;
  --green:#22c55e; --amber:#f5b301; --red:#ef4444;

  /* club colours (crest-derived) */
  --ars:#ef2b34; --psg:#3b74c4;

  /* event-type palette */
  --ev-goal:#f5b301; --ev-freekick:#38bdf8; --ev-corner:#2dd4bf;
  --ev-shot:#a78bfa; --ev-ycard:#eab308; --ev-rcard:#ef4444;
  --ev-sub:#22c55e; --ev-foul:#fb923c; --ev-offside:#f472b6;

  /* geometry */
  --r-lg:14px; --r-md:10px; --r-sm:8px; --r-pill:999px; --gap:16px;
}

/* ---------- PRIMITIVES (shared by all three pages) ---------- */

.dh-panel{
  background:linear-gradient(180deg,rgba(38,72,110,.78),rgba(20,42,68,.9));
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
             0 22px 44px -24px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.02) inset;
  padding:20px;
}

.dh-sec{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.dh-sec h2{font-size:13.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:0;display:flex;align-items:center;gap:12px}
.dh-sec h2::before{content:"";width:4px;height:17px;border-radius:2px;
  background:linear-gradient(var(--cyan),var(--teal));box-shadow:0 0 14px rgba(56,189,248,.75)}
.dh-sec .dh-sub{font-size:12px;color:var(--ink-dim);margin-left:auto;font-weight:600}

.dh-btn{font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-sm);
  cursor:pointer;border:1px solid transparent;color:#fff;
  background:linear-gradient(180deg,var(--blue-2),var(--blue));transition:filter .15s,transform .05s,box-shadow .15s;
  box-shadow:0 4px 14px -6px rgba(59,130,246,.65),0 1px 0 rgba(255,255,255,.2) inset}
.dh-btn:hover{filter:brightness(1.1);box-shadow:0 6px 18px -6px rgba(59,130,246,.85),0 1px 0 rgba(255,255,255,.25) inset}
.dh-btn:active{transform:translateY(1px)}
.dh-btn.ghost{background:rgba(140,190,240,.06);border-color:var(--line-strong);color:var(--ink);
  box-shadow:none}
.dh-btn.ghost:hover{background:rgba(140,190,240,.14);border-color:var(--cyan);color:#fff;filter:none}

.dh-field{display:flex;flex-direction:column;gap:6px;min-width:180px}
.dh-field > label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:700;padding-left:2px}
/* pill-select shell — wrap the existing Telerik dropdown, or a native select */
.dh-select{appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;color:var(--ink);
  background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 34px 9px 13px;min-width:170px;cursor:pointer;transition:border-color .15s,background-color .15s;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),
                   linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.dh-select:hover{border-color:var(--line-strong)}
.dh-select:focus{outline:none;border-color:var(--cyan);background-color:#0c1e3f}

.dh-toggle{display:inline-flex;gap:6px;background:var(--panel-3);padding:5px;
  border-radius:var(--r-pill);border:1px solid var(--line)}
.dh-toggle button{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-dim);
  background:transparent;border:0;border-radius:var(--r-pill);padding:7px 15px;cursor:pointer;transition:.15s}
.dh-toggle button.on{color:#04210f;background:linear-gradient(180deg,#34d36b,var(--green));
  box-shadow:0 4px 14px -6px rgba(34,197,94,.8)}
.dh-toggle button:not(.on):hover{color:var(--ink)}

.dh-chips{display:flex;gap:10px;flex-wrap:wrap}
.dh-chip{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);
  background:linear-gradient(180deg,rgba(60,100,150,.35),rgba(30,60,95,.35));
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.15s;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.dh-chip:hover{border-color:var(--cyan);color:#fff;transform:translateY(-1px)}
.dh-chip.on{color:#04223a;border-color:transparent;
  background:linear-gradient(180deg,#7dd3fc,var(--cyan));
  box-shadow:0 6px 18px -6px rgba(56,189,248,.65),0 1px 0 rgba(255,255,255,.4) inset}
.dh-chip .dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor}
.dh-chip .n{color:var(--ink-dim);font-variant-numeric:tabular-nums;font-weight:700;
  padding:1px 8px;border-radius:var(--r-pill);background:rgba(0,0,0,.25);min-width:22px;text-align:center}
.dh-chip.on .n{color:#04223a;background:rgba(255,255,255,.35)}

.dh-bar{height:9px;border-radius:var(--r-pill);background:rgba(0,0,0,.28);overflow:hidden;
  border:1px solid rgba(140,190,240,.1);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.dh-bar > i{display:block;height:100%;border-radius:var(--r-pill);
  box-shadow:0 0 8px -2px currentColor}

/* ---------- FILTER BAR ---------- */
.dh-filterhead{display:flex;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.dh-filterhead .dh-btns{margin-left:auto;display:flex;gap:10px}
.dh-filterrow{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;
  padding-top:16px;margin-top:16px;border-top:1px dashed var(--line-strong)}
.dh-filterrow > .dh-field{flex:1 1 220px}

/* ---------- EVENTS: split layout ---------- */
.dh-events{display:flex;flex-direction:column;gap:var(--gap);width:100%;padding:16px 20px 20px;box-sizing:border-box}
.dh-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  gap:var(--gap);align-items:stretch}
.dh-split > .dh-panel{display:flex;flex-direction:column;min-width:0}
.dh-split > .dh-panel:first-child > .dh-feed{flex:1 1 auto;min-height:520px}

/* feed */
.dh-feed{max-height:none;overflow-y:auto;overflow-x:hidden;margin:-4px;padding:4px}
.dh-feed::-webkit-scrollbar{width:9px}
.dh-feed::-webkit-scrollbar-thumb{background:rgba(120,170,240,.2);border-radius:9px}
.dh-erow{display:grid;grid-template-columns:64px 38px 1fr auto;align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--r-md);cursor:pointer;
  border:1px solid rgba(140,190,240,.12);
  background:linear-gradient(180deg,rgba(30,58,90,.55),rgba(20,42,68,.55));
  position:relative;transition:background .12s,border-color .12s,transform .05s}
.dh-erow + .dh-erow{margin-top:6px}
.dh-erow::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--type-color,transparent);opacity:.55;transition:opacity .12s}
.dh-erow:hover{background:linear-gradient(180deg,rgba(56,110,160,.55),rgba(28,60,92,.55));
  border-color:var(--line-strong)}
.dh-erow:hover::before{opacity:1}
.dh-erow.on{background:linear-gradient(90deg,rgba(245,179,1,.22),rgba(245,179,1,.05));
  border-color:rgba(245,179,1,.6);
  box-shadow:0 0 0 1px rgba(245,179,1,.25) inset,0 6px 18px -8px rgba(245,179,1,.35)}
.dh-erow.on::before{background:var(--amber);opacity:1;box-shadow:0 0 12px rgba(245,179,1,.75)}
.dh-erow .time{font-variant-numeric:tabular-nums;font-weight:800;font-size:13.5px;color:var(--ink);
  background:rgba(0,0,0,.28);padding:5px 8px;border-radius:var(--r-sm);text-align:center;
  border:1px solid rgba(140,190,240,.12)}
.dh-erow .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--type-color) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--type-color) 55%,transparent);
  box-shadow:0 0 12px -4px color-mix(in srgb,var(--type-color) 60%,transparent)}
.dh-erow .ic svg{width:19px;height:19px;color:var(--type-color)}
.dh-erow .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.dh-erow .player{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-erow .kind{font-size:11.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em}
.dh-erow .club{font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill);
  color:var(--ink);background:rgba(140,190,240,.12);border:1px solid rgba(140,190,240,.3)}
.dh-erow .club.ars{color:#ffd9db;background:rgba(239,43,52,.18);border-color:rgba(239,43,52,.55)}
.dh-erow .club.psg,.dh-erow .club.par{color:#cfe0ff;background:rgba(59,116,196,.2);border-color:rgba(59,116,196,.55)}

/* context column */
.dh-videoframe{aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;position:relative;
  background:linear-gradient(180deg,#0a1c33,#05101f);border:1px solid var(--line-strong);
  display:grid;place-items:center;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset}
.dh-videoframe .pitch{position:absolute;inset:0;opacity:.18;background-repeat:no-repeat;background-position:center;
  background:linear-gradient(transparent 49.4%,rgba(120,180,255,.9) 49.4% 50.6%,transparent 50.6%),
             radial-gradient(circle at 50% 50%,transparent 44px,rgba(120,180,255,.7) 44px 46px,transparent 46px)}
.dh-videoframe .empty{position:relative;text-align:center;color:var(--ink-dim);font-size:13px;font-weight:500}
.dh-videoframe .empty svg{width:38px;height:38px;color:var(--cyan);opacity:.85;margin-bottom:10px}

.dh-selcard{margin-top:14px;display:flex;gap:14px;align-items:center;
  background:linear-gradient(180deg,rgba(38,72,110,.55),rgba(20,42,68,.55));
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.dh-selcard .avatar{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#3d5a86,#152845);color:var(--ink);font-weight:800;font-size:17px;
  border:2px solid var(--type-color,var(--line-strong));
  box-shadow:0 0 16px -4px var(--type-color,transparent)}
.dh-selcard .who{font-weight:800;font-size:15px;color:var(--ink)}
.dh-selcard .whoteam{font-size:12px;color:var(--ink-dim);margin-top:1px}
.dh-selcard .tag{font-size:12px;font-weight:700;color:var(--type-color,var(--cyan));margin-top:4px;
  text-transform:uppercase;letter-spacing:.06em}

.dh-insight{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.dh-brk{display:flex;flex-direction:column;gap:10px}
.dh-brk .row{display:grid;grid-template-columns:90px 1fr 32px;gap:12px;align-items:center;font-size:12.5px}
.dh-brk .row .lbl{color:var(--ink);display:flex;align-items:center;gap:8px;font-weight:600}
.dh-brk .row .lbl .dot{width:9px;height:9px;border-radius:2px;box-shadow:0 0 6px currentColor}
.dh-brk .row .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink)}

.dh-active{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.dh-pl{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(140,190,240,.05);border:1px solid transparent;transition:.12s}
.dh-pl:hover{background:rgba(140,190,240,.12);border-color:var(--line)}
.dh-pl .rk{font-size:11px;color:var(--cyan);width:16px;font-weight:800;text-align:center}
.dh-pl .av{width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#3d5a86,#152845);flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--ink);border:1px solid var(--line-strong)}
.dh-pl .nm{font-size:13px;font-weight:600;flex:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-pl .ct{font-size:12px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.dh-pl .ct b{color:var(--cyan);font-size:13px}

/* ---------- EVENTS: timeline ---------- */
.dh-tlhead{display:flex;align-items:center;gap:16px;margin-bottom:6px;flex-wrap:wrap}
.dh-legend{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.dh-legend span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink);font-weight:600}
.dh-legend span i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}
.dh-timeline{position:relative;padding:18px 12px 6px;user-select:none}
.dh-tltrack{position:relative;height:132px}
.dh-phase{position:absolute;top:0;bottom:22px;border-radius:6px}
.dh-phase.et{background:rgba(120,180,255,.08);border:1px dashed var(--line-strong)}
.dh-phaselbl{position:absolute;bottom:2px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.dh-axis{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-1.5px);border-radius:2px;
  background:linear-gradient(90deg,rgba(120,180,255,.35),rgba(45,212,191,.55),rgba(120,180,255,.35));
  box-shadow:0 0 12px -2px rgba(56,189,248,.35)}
.dh-axis .tick{position:absolute;top:-5px;width:1px;height:13px;background:rgba(140,190,240,.5)}
.dh-axis .tt{position:absolute;top:14px;transform:translateX(-50%);font-size:10.5px;color:var(--ink-dim);
  font-variant-numeric:tabular-nums;font-weight:600}
.dh-lane{position:absolute;left:6px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink);
  padding:2px 8px;background:rgba(0,0,0,.28);border-radius:var(--r-sm);border:1px solid var(--line-strong)}
.dh-lane.top{top:2px} .dh-lane.bot{bottom:24px}
.dh-evmark{position:absolute;transform:translateX(-50%);cursor:pointer;z-index:1}
.dh-evmark:hover,.dh-evmark:focus-visible,.dh-evmark.on{z-index:50}
.dh-evmark .stem{position:absolute;left:50%;width:1.5px;background:linear-gradient(180deg,rgba(140,190,240,.4),rgba(140,190,240,.1))}
.dh-evmark .bub{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#1a3454,#0e2038);
  border:2px solid var(--type-color);position:relative;z-index:2;transition:transform .12s,box-shadow .12s;
  box-shadow:0 0 10px -2px color-mix(in srgb,var(--type-color) 55%,transparent),0 1px 0 rgba(255,255,255,.15) inset}
.dh-evmark .bub svg{width:12px;height:12px;color:var(--type-color)}
.dh-evmark:hover .bub{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,var(--type-color) 25%,transparent)}
.dh-evmark.on .bub{transform:scale(1.25);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--type-color) 35%,transparent),0 0 18px color-mix(in srgb,var(--type-color) 60%,transparent)}
.dh-evmark.goal .bub{width:24px;height:24px}
.dh-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#0c1e40;
  border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;white-space:nowrap;font-size:11.5px;
  color:#fff;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;box-shadow:0 12px 30px -12px rgba(0,0,0,.9)}
.dh-tip b{color:var(--type-color);font-weight:800}
.dh-evmark:hover .dh-tip{opacity:1}
.dh-tlfoot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-dim);
  margin-top:12px;padding:10px 4px 0;border-top:1px solid var(--line);font-weight:600}

/* ---------- PASSING / CROSSES REFRESH (cosmetic reuse) ---------- */
/* Top-player card — apply to the existing Passing "Top Players" markup */
.dh-tpcard{display:flex;gap:12px;align-items:center;background:var(--panel-3);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px}
.dh-tpcard .av{width:44px;height:44px;border-radius:50%;flex:none;border:2px solid var(--psg);
  background:radial-gradient(circle at 50% 30%,#28406b,#13233f);display:grid;place-items:center;font-weight:700;color:var(--ink-dim);font-size:13px}
.dh-tpcard .nm{font-weight:700;font-size:14px} .dh-tpcard .tm{font-size:11px;color:var(--ink-dim)}
.dh-tpcard .stats{display:flex;gap:14px;margin-top:6px;font-size:11.5px;color:var(--ink-dim)}
.dh-tpcard .stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.dh-tpcard .succ{margin-top:8px}
.dh-tpcard .succ .dh-bar > i{background:linear-gradient(90deg,var(--teal),var(--green))}
.dh-keypill{display:inline-block;font-size:10.5px;font-weight:600;color:#cbb3ff;background:rgba(167,139,250,.16);
  border:1px solid rgba(167,139,250,.4);padding:3px 9px;border-radius:var(--r-pill);margin-top:9px}
/* Cross-origins / lengths — apply to the existing Crosses tiles */
.dh-metric{display:flex;flex-direction:column;gap:7px}
.dh-metric .m{display:grid;grid-template-columns:64px 1fr 42px;gap:10px;align-items:center}
.dh-metric .m .k{font-size:11.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em}
.dh-metric .m .v{text-align:right;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.dh-metric .m .dh-bar > i{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.dh-metriclbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:10px}

/* ---------- a11y ---------- */
.dh-erow:focus-visible,.dh-evmark:focus-visible,.dh-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}