/*
 * xpts-breakdown-modal.css — the xPts player breakdown modal, styled ONCE.
 *
 * Paired with public/vc/shared/xpts-breakdown-modal.js — change them together.
 * Every xPts board that mounts that module gets this file, so the modal cannot
 * look different on one board than on another. Before this existed the three
 * boards carried three private copies of these rules and they had already drifted:
 * IPL's value column was `text-align: left` (a PHYSICAL edge — wrong under any
 * future LTR locale) against PL's logical `end`; IPL's next-fixtures table used a
 * `.nf-table` skin with no xPts colour bins at all, PL's used `.next-fixtures`
 * with them. The differences were invisible to anyone reading either page alone.
 *
 * ⚠ The host page owns ONLY the `#breakdownModal` container element (empty in the
 * markup — the module fills it). Do not re-declare any rule below in a page's
 * <style> block: a page-local copy is exactly how the three copies happened.
 */

#breakdownModal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  /* Above the sticky page chrome AND the locked-preview overlay — at 200 either
     of those painted over the modal. */
  z-index: 9500;
  /* The OVERLAY scrolls, not the box: a modal taller than the viewport stays
     reachable by scrolling the backdrop, with no nested scroll area and no vh cap
     clipping content inside its own frame. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  align-items: flex-start;
  justify-content: center;
}
#breakdownModal.open { display: flex; }
#breakdownModal .modal-box {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  padding: 24px;
  /* `min(340px, 100%)`, never a flat 340px floor — that overflows a 320px phone.
     `margin: auto` centres the box inside the scrollable overlay. */
  min-width: min(340px, 100%);
  max-width: 480px;
  width: 100%;
  margin: auto;
}
@media (max-width: 600px) {
  #breakdownModal .modal-box { padding: 18px; }
}
#breakdownModal h3 {
  margin-bottom: 6px;
  font-size: 1.05rem;
  color: var(--vc-accent);
}
#breakdownModal .fixture-info {
  font-size: 0.8rem;
  color: var(--vc-text-sub);
  margin-bottom: 14px;
}
#breakdownModal table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
}
#breakdownModal td { padding: 5px 8px; }
#breakdownModal td:first-child { color: var(--vc-text-sub); }
/* LOGICAL, not physical: `end` follows the page's direction. The IPL copy said
   `left`, which is the inline-end edge in RTL by coincidence and the inline-START
   edge the moment a board renders LTR (pl/xpts.html serves /en). */
#breakdownModal td:last-child  { font-weight: 600; text-align: end; }
#breakdownModal .total-row td {
  border-top: 1px solid var(--vc-border);
  padding-top: 8px;
  color: var(--vc-text);
}
#breakdownModal .close-btn {
  margin-top: 16px;
  width: 100%;
  background: var(--vc-surface2);
  border: 1px solid var(--vc-border);
  border-radius: 6px;
  color: var(--vc-text);
  padding: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}
#breakdownModal .close-btn:hover { background: var(--vc-accent-dim); }

/* The upcoming-fixtures block (round · opponent · minutes · xPts). */
#breakdownModal .next-fixtures { margin-top: 14px; }
#breakdownModal .next-fixtures-title {
  font-size: 0.85rem; font-weight: 700; color: var(--vc-text);
  margin-bottom: 6px;
}
#breakdownModal .next-fixtures table { margin: 0; width: 100%; }
#breakdownModal .next-fixtures th {
  font-size: 0.72rem; font-weight: 600; color: var(--vc-text-sub);
  text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--vc-border);
}
#breakdownModal .next-fixtures td { padding: 5px 8px; font-weight: 500; }
#breakdownModal .next-fixtures td:first-child { color: var(--vc-text-sub); font-weight: 500; }
#breakdownModal .next-fixtures th:last-child,
#breakdownModal .next-fixtures td:last-child { text-align: end; font-weight: 700; }
#breakdownModal .nf-min { color: var(--vc-text-sub); text-align: center; font-weight: 500; }
/* Admin-only: a hand-set GLOBAL minutes override on this matchday (all users). */
#breakdownModal .nf-ovr { color: var(--vc-accent); font-weight: 800; }
/* A round this player's club does not play (IPL/UCL blanks; a bye in the FIFA
   sense elsewhere). Muted whole-row, so it reads as "nothing here" rather than
   as a zero score. */
#breakdownModal .next-fixtures tr.nf-bye td { color: var(--vc-text-sub); }
#breakdownModal .nf-xpts-good { color: #66bb6a; }
#breakdownModal .nf-xpts-mid  { color: #ffa726; }
#breakdownModal .nf-xpts-low  { color: #ef5350; }
#breakdownModal .nf-xpts-na   { color: var(--vc-text-sub); }

/* The methodology deep-link under the table. It arrived on pl/xpts.html alone,
   which is precisely the divergence this file exists to prevent, so it lives here
   and every board that passes `methodLink` gets the same footer. */
#breakdownModal .bd-method {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--vc-text-sub);
  text-align: center;
}
#breakdownModal .bd-method a { color: var(--vc-accent); font-weight: 600; text-decoration: none; }
#breakdownModal .bd-method a:hover { text-decoration: underline; }

/* ── Light theme ──────────────────────────────────────────────────────────────
   The palette both pages already used, moved here so the two cannot drift. */
html[data-vc-theme="light"] #breakdownModal .modal-box {
  background: #ffffff;
  border-color: #d6e1ef;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}
html[data-vc-theme="light"] #breakdownModal .fixture-info,
html[data-vc-theme="light"] #breakdownModal td:first-child,
html[data-vc-theme="light"] #breakdownModal .next-fixtures th,
html[data-vc-theme="light"] #breakdownModal .bd-method,
html[data-vc-theme="light"] #breakdownModal .nf-min { color: #64748b; }
html[data-vc-theme="light"] #breakdownModal .total-row td,
html[data-vc-theme="light"] #breakdownModal .next-fixtures-title { color: #10213a; }
html[data-vc-theme="light"] #breakdownModal .close-btn {
  background: #eef4fb;
  border-color: #d6e1ef;
  color: #10213a;
}
html[data-vc-theme="light"] #breakdownModal .close-btn:hover {
  background: rgba(219, 181, 128, 0.12);
  border-color: #dbb580;
  color: #dbb580;
}