/* ============================================================================
   MCM Corners Methodology — table restyle
   Header : "Premium Gradient Bands"  (deep pitch-green gradients, teal LAST
            CORNER, white uppercase labels, translucent sub-row).
   Body   : "Heatmap Wash" frame — value-based colors set inline by setColor()
            in corners_methodology.js are PRESERVED (this file never sets a
            body cell background without leaving those inline colors to win).
   Protected columns  (.mcm-keep = MCM SPEED ATTACK/APPM/AGGRESSION/CROSS,
            HOME, AWAY) are left exactly as they were — every rule excludes them.
   Column/label/order/text of the header are unchanged; only visual style.
   ============================================================================ */

#datatable{
  --pg-pitch-deep:#0a3d2e;
  --pg-label:#f2fbf6;
  --pg-label-dim:rgba(242,251,246,.72);
  --pg-divider:rgba(95,240,196,.20);           /* luminous teal hairline (Design 4) */
  --pg-idband:linear-gradient(180deg,#093528,#05221a);
  /* stat-band gradients (escalating greens) */
  --pg-goal:linear-gradient(180deg,#0d5a3c,#0a3d2e);
  --pg-posse:linear-gradient(180deg,#106147,#0b4131);
  --pg-corner:linear-gradient(180deg,#14764f,#0d4c37);
  --pg-cross:linear-gradient(180deg,#178956,#0f573c);
  --pg-tshoot:linear-gradient(180deg,#1b9760,#116040);
  --pg-target:linear-gradient(180deg,#1fa768,#136a45);
  --pg-attack:linear-gradient(180deg,#1c9c62,#10603f);
  --pg-dgattack:linear-gradient(180deg,#23a86e,#136a45);
  --pg-shoot:linear-gradient(180deg,#178956,#0f573c);
  --pg-speedcalc:linear-gradient(180deg,#1fa768,#0d4c37);
  --pg-stat:linear-gradient(180deg,#178956,#0f573c);
  --pg-halftime:linear-gradient(180deg,#0e5137,#083726);
  --pg-lastcorner:linear-gradient(180deg,#0fb9a3,#086b62);   /* signature teal */
  --pg-lastgoal:linear-gradient(180deg,#0a7d75,#05413c);     /* deep teal (same family) */
  --pg-twoht:linear-gradient(180deg,#093528,#05221a);        /* deep green id-band */
  --pg-hover:rgba(15,185,163,.16);
  --pg-body-line:rgba(18,107,70,.16);
}

/* ---------------------------------------------------------------------------
   HEADER — row 1 group bands (colspan cells tagged with data-band)
   --------------------------------------------------------------------------- */
#datatable thead th[data-band]{
  color:var(--pg-label) !important;
  font-weight:800 !important;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-color:var(--pg-divider) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.30);
}
#datatable thead th[data-band] label{
  color:var(--pg-label) !important;
  font-weight:800 !important;
}
#datatable thead th[data-band="goal"]      { background:var(--pg-goal)       !important; }
#datatable thead th[data-band="posse"]     { background:var(--pg-posse)      !important; }
#datatable thead th[data-band="corner"]    { background:var(--pg-corner)     !important; }
#datatable thead th[data-band="cross"]     { background:var(--pg-cross)      !important; }
#datatable thead th[data-band="tshoot"]    { background:var(--pg-tshoot)     !important; }
#datatable thead th[data-band="target"]    { background:var(--pg-target)     !important; }
#datatable thead th[data-band="attack"]    { background:var(--pg-attack)     !important; }
#datatable thead th[data-band="dgattack"]  { background:var(--pg-dgattack)   !important; }
#datatable thead th[data-band="shoot"]     { background:var(--pg-shoot)      !important; }
#datatable thead th[data-band="speedcalc"] { background:var(--pg-speedcalc)  !important; }
#datatable thead th[data-band="stat"]      { background:var(--pg-stat)       !important; }
#datatable thead th[data-band="halftime"]  { background:var(--pg-halftime)   !important; }
#datatable thead th[data-band="lastcorner"]{ background:var(--pg-lastcorner) !important; }
#datatable thead th[data-band="lastgoal"]  { background:var(--pg-lastgoal)   !important; }
#datatable thead th[data-band="twoht"]     { background:var(--pg-twoht)      !important; }

/* ---------------------------------------------------------------------------
   HEADER — row 1 section-one individual columns (rowspan-2), except protected
   --------------------------------------------------------------------------- */
#datatable thead th.section-one:not(.mcm-keep){
  background:var(--pg-idband) !important;
  color:var(--pg-label) !important;
  border-color:var(--pg-divider) !important;
}
#datatable thead th.section-one:not(.mcm-keep) label{
  color:var(--pg-label) !important;
}
/* MCM SPEED / HOME / AWAY: give the HEADER cells the same dark-green id-band as
   the rest (their BODY cells stay protected via tbody .mcm-keep). */
#datatable thead th.section-one.mcm-keep{
  background:var(--pg-idband) !important;
  color:var(--pg-label) !important;
  border:1px solid var(--pg-divider) !important;
}
#datatable thead th.section-one.mcm-keep label{
  color:var(--pg-label) !important;
}

/* Mid-level metric groups (row 2): the "PESO / CONV ATTACK / SPEED VAR ..." cells
   that sit under a section band and above their H / A leaves. Bright pitch-green
   so they read as a distinct grouping level. */
#datatable thead th.mid-grp{
  background:linear-gradient(180deg, #1f9e63, #12704a) !important;
  color:var(--pg-label) !important;
  font-weight:800 !important;
  font-size:9px;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.05;
  border-color:var(--pg-divider) !important;
  white-space:normal;
}
#datatable thead th.mid-grp label{ color:var(--pg-label) !important; font-weight:800 !important; }

/* Paired-metric H/A leaf headers (bottom row): dark veil + short upright H / A,
   matching the A/D sub look under the GOAL~TARGET bands. Higher specificity than
   the section-one id-band rule above so it wins. */
#datatable thead tr th.main-sub{
  background:linear-gradient(180deg, rgba(4,26,19,.55), rgba(3,18,13,.86)), #0a3d2e !important;
  color:var(--pg-label-dim) !important;
  font-weight:700 !important;
  writing-mode:horizontal-tb;
  vertical-align:middle;
  letter-spacing:.04em;
}
/* Longer 2 HT group labels: shrink so they fit the narrow colspan-2 band */
#datatable thead th.main-2ht label{
  font-size:9px !important;
  letter-spacing:.02em;
  line-height:1.05;
}

/* ---------------------------------------------------------------------------
   HEADER — row 2 sub cells (section-two / section-four): translucent dark veil
   --------------------------------------------------------------------------- */
#datatable thead th.section-two,
#datatable thead th.section-four{
  background:linear-gradient(180deg, rgba(4,26,19,.55), rgba(3,18,13,.86)), #0a3d2e !important;
  color:var(--pg-label-dim) !important;
  font-weight:700 !important;
  border-color:var(--pg-divider) !important;
}
#datatable thead th.section-two label,
#datatable thead th.section-four label{
  color:var(--pg-label-dim) !important;
  font-weight:700 !important;
}

/* ---------------------------------------------------------------------------
   HEADER — borders for every restyled header cell (not the protected three)
   --------------------------------------------------------------------------- */
#datatable.dataTable thead th:not(.mcm-keep),
#datatable.dataTable thead td:not(.mcm-keep){
  border:1px solid var(--pg-divider) !important;
}

/* Sort arrows sit legibly on the dark bands */
#datatable thead th:not(.mcm-keep).sorting:before,
#datatable thead th:not(.mcm-keep).sorting:after,
#datatable thead th:not(.mcm-keep).sorting_asc:before,
#datatable thead th:not(.mcm-keep).sorting_asc:after,
#datatable thead th:not(.mcm-keep).sorting_desc:before,
#datatable thead th:not(.mcm-keep).sorting_desc:after{
  color:var(--pg-label) !important;
  opacity:.85;
}

/* ---------------------------------------------------------------------------
   BODY — dark theme (matches the green header). The value-based colours set by
   setColor() (inline background-color/color) WIN, because the dark base below
   uses NO !important on background. Un-coloured cells get the dark-green base
   with light text; JS-coloured cells keep popping on top.
   --------------------------------------------------------------------------- */
#datatable.mcm-dark tbody{ background:#081410 !important; }
#datatable.mcm-dark tbody td{
  background-color:#0e2018;                 /* dark-green base; setColor's inline bg overrides this */
  color:#e8f2ec;                            /* light text for un-coloured cells (JS sets its own on coloured) */
  border-color:rgba(95,240,196,.10);        /* faint teal hairlines (no !important -> keeps 3px separators) */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
#datatable.mcm-dark tbody tr:nth-child(even) td{ background-color:#0b1a13; }
#datatable.mcm-dark tbody .team--home,
#datatable.mcm-dark tbody .team--away,
#datatable.mcm-dark tbody .vs{ color:#e8f2ec; }

/* Cells that setColor() paints WHITE / near-white (neutral / zero values) look
   wrong on the dark body -> normalise them to the dark base + light text.
   Anchored on "background-color:" so a coloured cell that only has white TEXT
   (color: white) is never matched; real value-colours are untouched. */
#datatable.mcm-dark tbody td[style*="background-color: white"],
#datatable.mcm-dark tbody td[style*="background-color: rgb(255, 255, 255)"],
#datatable.mcm-dark tbody td[style*="background-color: rgb(239, 239, 239)"],
#datatable.mcm-dark tbody td[style*="background-color: rgb(237, 237, 237)"]{
  background-color:#0e2018 !important;
  color:#e8f2ec !important;
}

/* section separators (were 3px black) -> teal, to read on the dark body */
#datatable.mcm-dark tbody td.border-left-green{   border-left:solid 2px #0fb9a3 !important; }
#datatable.mcm-dark tbody td.border-right-green{  border-right:solid 2px #0fb9a3 !important; }
#datatable.mcm-dark tbody td.border-bottom-green{ border-bottom:solid 2px #0fb9a3 !important; }

/* minute (T) column -> dark chip with a glowing teal number (terminal feel) */
#datatable.mcm-dark tbody tr td:nth-child(2){
  color:#4df0d4 !important;
  font-weight:800 !important;
  background:#07271f !important;
  padding:3px 7px !important;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(77,240,212,.30);
  text-shadow:0 0 5px rgba(77,240,212,.85), 0 0 11px rgba(77,240,212,.45);
  letter-spacing:.02em;
}

/* CORNER value columns -> glowing teal number, matching the T (minute) column's
   font (bold + teal + glow). Cell background stays the dark base. */
#datatable.mcm-dark tbody td.corner-col{
  color:#4df0d4 !important;
  font-weight:800 !important;
  text-shadow:0 0 5px rgba(77,240,212,.85), 0 0 11px rgba(77,240,212,.45);
  letter-spacing:.02em;
}

/* Row hover: a translucent tint OVERLAY (inset box-shadow) that sits on top of
   each cell's own background, so the value colours stay visible in BOTH themes.
   The old solid grey/teal hover (which replaced the cell colour) is neutralised. */
#datatable.table-hover tbody tr:hover{ background-color:transparent !important; }
#datatable.table-hover tbody tr:hover td{
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.06);          /* light mode: gentle darken */
}
#datatable.table-hover.mcm-dark tbody tr:hover td{
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.09);    /* dark mode: gentle lift */
}

.btn-secondary.tbl-theme-btn{
  padding: 0px 11px !important;
}