/* AFL Match Lab v66 — all-page UI clarity / mobile QA layer.
   Loaded last to neutralise legacy global button !important rules without changing app logic. */
:root{
  --uiq-ink:#173247;
  --uiq-muted:#5f7482;
  --uiq-green:#087156;
  --uiq-green-soft:#e7f5ef;
  --uiq-soft:#f3f8f6;
  --uiq-line:#d9e5e3;
  --uiq-red:#a83a48;
  --uiq-red-soft:#fff0f2;
  --uiq-amber:#8c641d;
  --uiq-amber-soft:#fff5de;
}

/* ---------- P2 navigation / decision controls ---------- */
.p2-flow-step{
  background:transparent!important;
  color:var(--uiq-ink)!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.p2-flow-step:hover{background:#fff!important;border-color:#dbe7e4!important}
.p2-flow-step.active{
  background:#fff!important;
  border-color:#c8ded6!important;
  color:var(--uiq-green)!important;
  box-shadow:0 2px 7px rgba(8,34,49,.05)!important;
}
.p2-flow-step .p2-flow-copy strong{color:inherit!important}
.p2-flow-step .p2-flow-copy small{color:#6c7f8b!important}
.p2-flow-step.active .p2-flow-index{background:var(--uiq-green)!important;color:#fff!important}

.p2-multi-mode{
  background:transparent!important;
  color:#526a78!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.p2-multi-mode.active{
  background:#fff!important;
  color:var(--uiq-green)!important;
  box-shadow:0 2px 8px rgba(8,34,49,.08)!important;
}

.p2-drawer-item{
  background:#f6faf8!important;
  color:#203b4e!important;
  border:1px solid #e0e9e7!important;
  box-shadow:none!important;
  filter:none!important;
}
.p2-drawer-item:hover,.p2-drawer-item.active{
  background:#edf8f4!important;
  border-color:#b9d9ce!important;
  color:#173f34!important;
}
.p2-drawer-item strong{color:inherit!important}
.p2-drawer-item small{color:#667b88!important}
.p2-drawer-close{
  background:#eef4f2!important;color:#405a6b!important;border:0!important;box-shadow:none!important
}
.p2-system-refresh{
  background:#fff!important;color:#385566!important;border:1px solid #dce6e4!important;box-shadow:none!important
}
.p2-secondary-back{
  background:transparent!important;color:var(--uiq-green)!important;border:0!important;box-shadow:none!important;padding:6px 4px!important
}

/* ---------- Match + Player Markets ---------- */
.threshold-step,
.market-stepper button{
  background:#edf5f2!important;
  color:var(--uiq-green)!important;
  border:1px solid #d8e6e1!important;
  box-shadow:none!important;
  filter:none!important;
}
.threshold-step:hover,
.market-stepper button:hover{background:#e3f1ec!important}
.threshold-input,.market-stepper input{color:var(--uiq-ink)!important;background:#fff!important}

.player-market-row .add-leg{
  background:var(--uiq-green)!important;
  color:#fff!important;
}
.player-market-row .add-leg:disabled{background:#d8e1df!important;color:#71818a!important}

.note,.match-meta,.prediction-foot{color:#607583!important}
.note{line-height:1.55}

/* ---------- System Multi + Multi Lab ---------- */
.remove-leg{
  background:var(--uiq-red-soft)!important;
  color:var(--uiq-red)!important;
  border:1px solid #f0d5d9!important;
  box-shadow:none!important;
}
.remove-leg:hover{background:#fde5e8!important}

.match-leg-choice{
  background:#fff!important;
  color:var(--uiq-ink)!important;
  border:1px solid #dce6e3!important;
  box-shadow:none!important;
  filter:none!important;
}
.match-leg-choice:hover{
  background:#f8fbfa!important;
  border-color:#bfd9cf!important;
  box-shadow:0 5px 14px rgba(20,55,40,.06)!important;
}
.match-leg-choice span,.match-leg-choice b,.match-leg-choice strong{color:var(--uiq-ink)!important}
.match-leg-choice small,.choice-kicker,.choice-market{color:#667a87!important}

.value-box button.value-btn,#builderValueBtn{
  background:var(--uiq-green)!important;color:#fff!important
}
.send-builder{background:var(--uiq-green)!important;color:#fff!important}

/* ---------- Field / lineup / player modal ---------- */
.lineup-team-filters button{
  background:transparent!important;
  color:#334d5c!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.lineup-team-filters button.active{
  background:var(--uiq-green)!important;
  color:#fff!important;
}

.lineup-player-card{
  background:#fff!important;
  color:#182f3f!important;
  border-color:#dbe4e4!important;
  filter:none!important;
}
.lineup-player-card strong{color:#182f3f!important}
.lineup-player-card:hover{background:#f7fbf9!important}

.field-player{
  background:#fff!important;
  color:var(--uiq-ink)!important;
  border-color:#dce5e4!important;
  box-shadow:none!important;
}
.field-player.bench{background:var(--uiq-amber-soft)!important;color:#6c511f!important}
.field-player.emergency{background:var(--uiq-red-soft)!important;color:#8f3943!important}

.mini-player-dot.team-0{background:#32145f!important;color:#fff!important}
.mini-player-dot.team-1{background:#0d4f86!important;color:#fff!important}
.mini-player-dot{border:2px solid #fff!important;box-shadow:0 1px 4px rgba(0,0,0,.25)!important}

.modal-close,.lineup-float-close,.lineup-float-remove{
  background:#f3f7f6!important;
  color:#334d5c!important;
  border:1px solid #dce5e4!important;
  box-shadow:none!important;
}
.prob-band{
  background:#eef7f3!important;
  color:var(--uiq-green)!important;
  border:1px solid #d7e9e1!important;
  box-shadow:none!important;
}
.prob-band strong{color:var(--uiq-green)!important}
.prob-band small{color:#687d89!important}
.threshold-choice{
  background:#f5f8f7!important;
  color:var(--uiq-ink)!important;
  border:1px solid #dce5e4!important;
  box-shadow:none!important;
}
.threshold-choice strong{color:var(--uiq-ink)!important}
.threshold-choice small{color:var(--uiq-green)!important}
.lineup-float-open{background:var(--uiq-green)!important;color:#fff!important}

/* ---------- Review ---------- */
#reviewRefresh,#reviewPrev,#reviewNext,#clearBuilder,#systemFilterReset{
  background:#fff!important;
  color:var(--uiq-ink)!important;
  border:1px solid var(--uiq-line)!important;
  box-shadow:none!important;
}
#reviewSelect{color:var(--uiq-ink)!important}

/* ---------- Validation / Shadow ---------- */
.validation-table-wrap{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.validation-table th{
  position:sticky;top:0;z-index:1;background:#f7faf9!important;color:#526977!important
}
.validation-table td{color:#294759!important}
.shadow-step-head{min-width:0}
.shadow-step-head>div{min-width:0}
.shadow-step-head strong,.shadow-delta{color:#294759!important}
.shadow-step-head span,.shadow-hash,.shadow-pending{color:#687c89!important}

/* ---------- Global visual-accessibility hardening ---------- */
.badge{white-space:nowrap}
.section-head>div{min-width:0}
.section-head h2,.section-head h3{overflow-wrap:anywhere}
input,select,button{max-width:100%}
button:disabled{filter:none!important}

/* ---------- Mobile all-page fixes ---------- */
@media(max-width:900px){
  /* Matchday flow: show all four stages at once. No clipped third/fourth card. */
  .p2-decision-flow{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    padding:6px!important;
  }
  .p2-flow-step{
    min-width:0!important;
    min-height:52px!important;
    padding:6px 4px!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:5px!important;
    align-items:center!important;
    text-align:left!important;
  }
  .p2-flow-index{width:22px!important;height:22px!important;font-size:8px!important}
  .p2-flow-copy strong{font-size:8.5px!important;line-height:1.15!important;white-space:normal!important}
  .p2-flow-copy small{display:none!important}

  /* Multi switch is a neutral segmented control, never five green buttons. */
  .p2-multi-modes{background:#eaf1ef!important}
  .p2-multi-mode{min-height:36px!important}

  /* More sheet remains readable under the legacy global button rule. */
  .p2-more-drawer{background:rgba(255,255,255,.99)!important}
  .p2-drawer-item{min-width:0!important}
  .p2-drawer-item strong{font-size:10.5px!important}
  .p2-drawer-item small{font-size:8.5px!important}

  /* Review select: compact enough to show teams + date instead of clipping immediately. */
  #reviewSelect{
    width:100%!important;
    font-size:12px!important;
    padding-left:10px!important;
    padding-right:30px!important;
  }
  #view-reviews>.panel:first-child .section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  #reviewRefresh{min-height:38px!important;padding:8px 11px!important;font-size:11px!important}

  /* Player controls remain readable at narrow widths. */
  .threshold-step{min-height:34px!important;padding:5px!important}
  .threshold-input{min-height:34px!important}
  .player-market-row .add-leg{min-height:36px!important}

  /* System Multi controls: keep readable grid, no squeezed 3-column checkbox labels. */
  .system-market-filters{grid-template-columns:1fr 1fr!important}
  .system-market-check{min-width:0;font-size:10px!important}
  .system-filter-actions button{min-height:38px!important}

  /* Multi Lab market cards should not inherit dark-green button backgrounds. */
  .match-leg-choice{min-height:60px!important}
  .builder-summary{grid-template-columns:1fr 1fr!important}
  .builder-leg{grid-template-columns:minmax(0,1fr) auto!important}
  .builder-leg .remove-leg{min-width:56px!important}

  /* Field: preserve contrast and make controls touch-friendly. */
  .lineup-team-filters{width:min(100%,320px)!important;min-width:0!important}
  .lineup-team-filters button{min-height:34px!important;padding:6px 10px!important}
  .field-player{min-height:36px!important}
  .modal-close{min-width:38px!important}
  .prob-band,.threshold-choice{min-height:48px!important}

  /* Tactics / P1 */
  .p1-role-card,.p1-corr-shell,.p1-scenario-wrap{min-width:0}
  .p1-scenario-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch}

  /* Validation tables communicate that they scroll, and first column stays visible. */
  .validation-table-wrap{
    position:relative;
    max-width:100%;
    border-radius:8px;
  }
  .validation-table th:first-child,
  .validation-table td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:#fff!important;
    box-shadow:1px 0 0 #e1e8e7;
  }
  .validation-table th:first-child{z-index:3;background:#f7faf9!important}
  .validation-table th,.validation-table td{
    font-size:11px!important;
    line-height:1.35!important;
    white-space:nowrap;
  }

  /* Shadow timeline */
  .shadow-step-head{flex-wrap:wrap!important;gap:7px!important}
  .shadow-step-head>div{flex:1 1 180px}
  .shadow-step-body{padding:11px!important}
  .shadow-metrics{gap:7px!important}
  .shadow-metrics span{padding:3px 5px;border-radius:6px;background:#f3f7f6}

  /* Secondary-page context bar */
  .p2-secondary-context{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .p2-secondary-context span{max-width:none!important;line-height:1.4}
  .p2-secondary-back{white-space:nowrap!important}

  /* Minimum readable supporting text. */
  .note{font-size:11px!important}
  .match-meta,.prediction-foot{font-size:10px!important}
}

@media(max-width:560px){
  .p2-flow-step{
    grid-template-columns:1fr!important;
    grid-template-rows:22px auto!important;
    place-items:center!important;
    text-align:center!important;
    gap:3px!important;
    min-height:58px!important;
  }
  .p2-flow-copy strong{font-size:8px!important}
  .p2-drawer-grid{grid-template-columns:1fr 1fr!important}
  .p2-drawer-item{min-height:68px!important;padding:9px!important}
  .system-market-filters{grid-template-columns:1fr 1fr!important}
  #reviewSummary .stats-grid{grid-template-columns:1fr 1fr!important}
}

@media(max-width:430px){
  .p2-decision-flow{gap:4px!important;padding:5px!important}
  .p2-flow-step{padding:5px 2px!important}
  .p2-flow-copy strong{font-size:7.6px!important}
  .p2-nav-copy strong{font-size:8.5px!important}

  .player-market-row{grid-template-columns:minmax(0,1fr) 54px 62px!important}
  .threshold-stepper{grid-template-columns:minmax(82px,1fr) 32px 60px 32px 12px!important}
  .recent-cell{min-width:42px!important}

  .validation-hero,.stat-grid{grid-template-columns:1fr 1fr!important}
  .p1-role-metrics{grid-template-columns:1fr 1fr!important}
  .p1-corr-hero{grid-template-columns:1fr 1fr!important}
}