/* assets/style.css */

/* ML Upload pulse animation */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.pitch-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 lanes */
    grid-template-rows: repeat(3, 1fr);    /* 3 thirds */
    gap: 4px;
    width: 100%; /* Adjust width as needed */
    height: 500px; /* Adjust height as needed */
    background-color: #538d53; /* Pitch green */
    padding: 5px;
    border: 2px solid #fff;
    border-radius: 8px;
    margin-top: 10px;
}

.player-zone-box {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    text-align: center;
    transition: background-color 0.2s ease-in-out;
}

.player-zone-box:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.player-zone-box.selected {
    background-color: #f0ad4e; /* A bright color for selection */
    border: 2px solid #d9534f;
    font-weight: bold;
}

/* ---------- TactAI Dark UI fixes ---------- */

/* Cards (dbc.Card) */
.tact-card, .tact-card .card-header, .tact-card .card-body {
  background: #e5e7eb;
  color: #111827;
  border: 1px solid #334155;
}

/* Dash react-select dropdown (dcc.Dropdown) */
.tactai-dropdown .Select-control {
  background: #e5e7eb;
  color: #0b1220;
  border: 1px solid #334155;
}
.tactai-dropdown .Select-placeholder,
.tactai-dropdown .Select--single > .Select-control .Select-value .Select-value-label {
  color: #0b1220 !important;
}
.tactai-dropdown .Select-input input {
  color: #0b1220 !important;
}
.tactai-dropdown .Select-arrow-zone .Select-arrow {
  border-top-color: #0b1220 !important; /* dark arrow on light bg */
}

/* Menu + options */
.tactai-dropdown .Select-menu-outer,
.tactai-dropdown .Select-menu {
  background: #e5e7eb;          /* menu background */
  border: 1px solid #334155;
}
.tactai-dropdown .Select-option {
  color: #0b1220 !important;                /* option text color */
}
.tactai-dropdown .Select-option.is-focused {
  background: #d1d5db;          /* light hover */
}
.tactai-dropdown .Select-option.is-selected {
  background: #0b1220;          /* selected bg */
  color: #e5e7eb;               /* selected text */
}

/* Generic HTML inputs */
.tactai-input,
.tactai-input input,
.tactai-input select,
.tactai-input textarea {
  background: #e5e7eb !important;  /* added missing # */
  color: #0b1220 !important;
  border: 1px solid #334155 !important;
}



/* Keep multi-selected matches from making the dropdown control too tall */
.tactai-match-dropdown .Select-multi-value-wrapper {
    font-size: 12px;
    max-height: 84px;
    overflow-y: auto;
}
.tactai-match-dropdown .Select-control {
    height: auto;
    min-height: 38px;
}
/* Slightly thinner scrollbar where supported */
.tactai-match-dropdown .Select-multi-value-wrapper {
    scrollbar-width: thin;
}



/* Force readable options for this specific dropdown */
#scenarios-scenario-dropdown .Select-menu-outer,
#scenarios-scenario-dropdown .Select-menu ,
#scenarios-detail-dropdown .Select-menu-outer,
#scenarios-detail-dropdown .Select-menu ,
#scenarios-outcome-dropdown .Select-menu-outer,
#scenarios-outcome-dropdown .Select-menu ,
#player-team-select-dropdown .Select-menu-outer,
#player-team-select-dropdown .Select-menu {
  background: #f3f4f6 !important;      /* light menu */
  border: 1px solid #334155 !important;
}

/* default option lines */
#scenarios-scenario-dropdown .Select-option,
#scenarios-scenario-dropdown  .VirtualizedSelectOption ,
#scenarios-detail-dropdown .Select-option,
#scenarios-detail-dropdown  .VirtualizedSelectOption ,
#scenarios-outcome-dropdown .Select-option,
#scenarios-outcome-dropdown  .VirtualizedSelectOption ,
#player-team-select-dropdown .Select-option,
#player-team-select-dropdown .VirtualizedSelectOption {
  color: #0b1220 !important;            /* dark text */
  background: transparent !important;
  opacity: 1 !important;
}

/* hover/focus state */
#scenarios-scenario-dropdown .Select-option.is-focused,
#scenarios-scenario-dropdown .VirtualizedSelectFocusedOption,
#scenarios-detail-dropdown .Select-option.is-focused,
#scenarios-detail-dropdown .VirtualizedSelectFocusedOption,
#scenarios-outcome-dropdown .Select-option.is-focused,
#scenarios-outcome-dropdown .VirtualizedSelectFocusedOption,
#player-team-select-dropdown .Select-option.is-focused,
#player-team-select-dropdown .VirtualizedSelectFocusedOption {
  background: #e5e7eb !important;
  color: #0b1220 !important;
}

/* selected option */
#scenarios-scenario-dropdown .Select-option.is-selected ,
#scenarios-detail-dropdown .Select-option.is-selected ,
#scenarios-outcome-dropdown .Select-option.is-selected ,
#player-team-select-dropdown .Select-option.is-selected {
  background: #0b1220 !important;
  color: #e5e7eb !important;
}

/* closed control text + arrow (for completeness) */
#scenarios-scenario-dropdown .Select-control .Select-placeholder,
#scenarios-scenario-dropdown .Select--single > .Select-control .Select-value .Select-value-label,
#scenarios-scenario-dropdown .Select-control .Select-value,
#scenarios-detail-dropdown .Select-control .Select-placeholder,
#scenarios-detail-dropdown .Select--single > .Select-control .Select-value .Select-value-label,
#scenarios-detail-dropdown .Select-control .Select-value,
#scenarios-outcome-dropdown .Select-control .Select-placeholder,
#scenarios-outcome-dropdown .Select--single > .Select-control .Select-value .Select-value-label,
#scenarios-outcome-dropdown .Select-control .Select-value,
#player-team-select-dropdown .Select-control .Select-placeholder,
#player-team-select-dropdown .Select--single > .Select-control .Select-value .Select-value-label,
#player-team-select-dropdown .Select-control .Select-value {
  color: #0b1220 !important;
}
#player-team-select-dropdown .Select-arrow-zone .Select-arrow {
  border-top-color: #0b1220 !important;
}



/* Improve contrast, hover/focus, and selected state */
#player-main-tabs .tab {
  background-color: #f8f9fa;
  color: #0b1220;                 /* readable on light bg */
  border: 1px solid #dee2e6;
  border-bottom: none;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  font-weight: 600;
  padding: 8px 12px;
}
#player-main-tabs .tab:hover { color: #0b1220; }

#player-main-tabs .tab--selected {
  background-color: #ffffff;
  color: #0b1220;
  border-color: #0d6efd #dee2e6 #ffffff #dee2e6; /* thicker visual cue on bottom */
  border-bottom: 2px solid #0d6efd;
}

#player-main-tabs .tab[aria-disabled="true"] {
  opacity: 0.7; cursor: not-allowed;
}

/* Optional: dark mode support */
@media (prefers-color-scheme: dark) {
  #player-main-tabs .tab {
    background-color: #222;
    color: #f1f3f5;
    border-color: #444;
  }
  #player-main-tabs .tab--selected {
    background-color: #111;
    color: #ffffff;
    border-color: #4da3ff #444 #111 #444;
    border-bottom-color: #4da3ff;
  }
  #player-main-tabs .tab:hover { color: #ffffff; }
}

/* Better keyboard focus */
#player-main-tabs .tab:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* --- Long dropdown labels: wrap safely without overlapping --- */
.tactai-dropdown .Select-option,
.tactai-dropdown .VirtualizedSelectOption {
  /* allow wrapping */
  white-space: normal !important;
  overflow-wrap: anywhere;   /* break long team / player names */

  /* make two lines fit inside the fixed ~35px row */
  font-size: 11px;
  line-height: 14px;         /* 2 * 14px + padding < 35px total */
  padding-top: 3px;
  padding-bottom: 3px;
}