/* ============================================================================
   Tactical Controls — unified buttons, text inputs, and select dropdowns
   ----------------------------------------------------------------------------
   Replaces fragmented predecessors:
     - Buttons:  Bootstrap .btn/.btn-primary/.btn-outline-secondary,
                 .premium-btn / .premium-btn-primary / .premium-btn-outline /
                 .premium-btn-sm, .match-admin-btn*, .player-admin-btn*.
     - Inputs:   .gs-input / .gs-input-wrap (global search),
                 .premium-theme .form-control, .fs-filter-input,
                 .sq-search, .pc-search__input.
     - Selects:  .premium-theme .form-select, .es-hero-league__season-select,
                 .team-hero__season-select, .player-season-select.
   Token-driven only — no hardcoded colors, no 1px solid borders (No-Line Rule).
   Tokens consumed from theme.css: --surface-*, --on-surface*, --primary*,
   --on-primary, --tertiary, --te-radius-*, --te-transition-*.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Tactical Button — .tactical-btn
   ------------------------------------------------------------------------ */
.tactical-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-container-low);
  color: var(--on-surface);
  border: 0;
  border-radius: var(--te-radius-sm); /* 6px = DESIGN.md §5 'md' = 0.375rem */
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--te-transition-fast), color var(--te-transition-fast), transform var(--te-transition-fast);
}

.tactical-btn:hover {
  background: var(--surface-container);
  color: var(--on-surface);
  text-decoration: none;
}

.tactical-btn:active { transform: translateY(1px); }

.tactical-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-container) 35%, transparent);
}

.tactical-btn:disabled,
.tactical-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Variants -------------------------------------------------------- */

/* Primary — Signature Texture gradient (DESIGN.md §2 "Glass & Gradient" rule) */
.tactical-btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
}
.tactical-btn--primary:hover {
  background: linear-gradient(135deg, var(--primary-container) 0%, var(--primary) 100%);
  color: var(--on-primary);
}

/* Secondary — solid tonal fill, no border */
.tactical-btn--secondary {
  background: var(--surface-container);
  color: var(--on-surface);
}
.tactical-btn--secondary:hover { background: var(--surface-container-high); }

/* Ghost — transparent until hover */
.tactical-btn--ghost {
  background: transparent;
  color: var(--on-surface-variant);
}
.tactical-btn--ghost:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* Danger — tertiary (live/critical) emphasis */
.tactical-btn--danger {
  background: var(--tertiary);
  color: var(--on-primary);
}
.tactical-btn--danger:hover {
  background: color-mix(in srgb, var(--tertiary) 88%, var(--on-surface) 12%);
  color: var(--on-primary);
}

/* --- Density modifiers ---------------------------------------------- */
.tactical-btn--sm {
  padding: 6px 12px;
  font-size: 0.6875rem;
  gap: 6px;
}
.tactical-btn--lg {
  padding: 12px 22px;
  font-size: 0.8125rem;
  gap: 10px;
}
.tactical-btn--block { width: 100%; }

/* --- Slots ----------------------------------------------------------- */
.tactical-btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tactical-btn--sm .tactical-btn__icon { width: 14px; height: 14px; }
.tactical-btn--lg .tactical-btn__icon { width: 18px; height: 18px; }


/* ---------------------------------------------------------------------------
   2. Tactical Field — .tactical-field (text input + floating label)
   ------------------------------------------------------------------------ */
.tactical-field {
  position: relative;
  display: block;
  width: 100%;
}

.tactical-field__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 18px 14px 6px;
  /* --surface-highest: only tier that contrasts with BOTH the page (--surface)
     and cards (--surface-container) in light AND dark. Lower tiers collide in
     light mode where --surface-container-low == --surface (#f8f9fa). */
  background: var(--surface-highest);
  color: var(--on-surface);
  border: 0;
  border-radius: var(--te-radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  appearance: none;
  transition: background var(--te-transition-fast), box-shadow var(--te-transition-fast);
}

.tactical-field__input::placeholder {
  /* placeholder is a single-space sentinel for :placeholder-shown — keep invisible */
  color: transparent;
}

.tactical-field__input:hover {
  background: color-mix(in srgb, var(--surface-highest) 90%, var(--on-surface));
}

.tactical-field__input:focus {
  outline: 0;
  background: color-mix(in srgb, var(--surface-highest) 90%, var(--on-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-container) 30%, transparent);
}

.tactical-field__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Live validity ring — green when an async/live check confirms the value is
   valid. Mirrors the :focus ring technique so :focus still wins while editing. */
.tactical-field--valid .tactical-field__input {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 45%, transparent);
}

/* Inline validation feedback (username availability, password match). */
.tactical-field__hint-row {
  min-height: 18px;
  margin-top: 6px;
}
.tactical-field__hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.tactical-field__hint .ph { font-size: 0.95rem; }
.tactical-field__hint.is-ok { color: var(--success); }
.tactical-field__hint.is-bad { color: var(--error); }

/* Live requirement checklist (e.g. password complexity), domain-agnostic. */
.tactical-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tactical-checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  transition: color var(--te-transition-fast);
}
.tactical-checklist__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--te-radius-full);
  background: var(--outline-variant);
  flex-shrink: 0;
  transition: background var(--te-transition-fast);
}
.tactical-checklist__item.is-met { color: var(--success); }
.tactical-checklist__item.is-met .tactical-checklist__dot { background: var(--success); }

/* Floating label — DOM order: <input> then <label> so adjacent sibling works */
.tactical-field__label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 4px;
  color: var(--on-surface-variant);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  transition: top var(--te-transition-fast), transform var(--te-transition-fast),
              font-size var(--te-transition-fast), letter-spacing var(--te-transition-fast),
              text-transform var(--te-transition-fast), color var(--te-transition-fast);
}

.tactical-field__input:focus + .tactical-field__label,
.tactical-field__input:not(:placeholder-shown) + .tactical-field__label {
  top: 9px;
  transform: translateY(0);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* Leading icon variant */
.tactical-field--has-icon .tactical-field__input { padding-left: 40px; }
.tactical-field--has-icon .tactical-field__label { left: 40px; }
.tactical-field__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--on-surface-variant);
  pointer-events: none;
}

/* Compact density */
.tactical-field--sm .tactical-field__input {
  min-height: 36px;
  padding: 14px 12px 4px;
  font-size: 0.8125rem;
}
.tactical-field--sm .tactical-field__label { left: 12px; font-size: 0.8125rem; }
.tactical-field--sm .tactical-field__input:focus + .tactical-field__label,
.tactical-field--sm .tactical-field__input:not(:placeholder-shown) + .tactical-field__label {
  top: 6px;
  font-size: 0.5625rem;
}
.tactical-field--sm.tactical-field--has-icon .tactical-field__input { padding-left: 34px; }
.tactical-field--sm.tactical-field--has-icon .tactical-field__label { left: 34px; }

/* Plain (non-floating) variant — used by search inputs that rely on placeholder + icon */
.tactical-field--plain .tactical-field__input {
  padding: 10px 14px;
  min-height: 40px;
}
.tactical-field--plain .tactical-field__input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.9;
}
.tactical-field--plain.tactical-field--has-icon .tactical-field__input { padding-left: 40px; }
.tactical-field--plain .tactical-field__label { display: none; }


/* ---------------------------------------------------------------------------
   3. Global Search — preserve .gs-input / .gs-input-wrap markup, restyle here
   (Migrated from premium.css:6462–6502 — single source of truth.)
   ------------------------------------------------------------------------ */
.gs-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--surface-highest);
  border-radius: var(--te-radius-full);
  transition: background var(--te-transition-fast), box-shadow var(--te-transition-fast);
}

.gs-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: var(--on-surface);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}

.gs-input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.9;
}

.gs-input:focus {
  outline: 0;
  box-shadow: none;
  border: 0;
}

.app-topbar__search:focus-within .gs-input-wrap,
.gs-input-wrap:focus-within {
  background: color-mix(in srgb, var(--surface-highest) 90%, var(--on-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-container) 30%, transparent);
}

.app-topbar__search-icon {
  flex-shrink: 0;
  color: var(--on-surface-variant);
  font-size: 16px;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   4. Tactical Select — .tactical-select (native <select> with custom chevron)
   ------------------------------------------------------------------------ */
.tactical-select {
  position: relative;
  display: inline-block;
}

.tactical-select__control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 36px 0 14px;
  background: var(--surface-highest);
  color: var(--on-surface);
  border: 0;
  border-radius: var(--te-radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--te-transition-fast), box-shadow var(--te-transition-fast);
}

.tactical-select__control:hover {
  background: color-mix(in srgb, var(--surface-highest) 90%, var(--on-surface));
}

.tactical-select__control:focus,
.tactical-select__control:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--surface-highest) 90%, var(--on-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-container) 30%, transparent);
}

.tactical-select__control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Native option list — make sure dark mode is legible */
.tactical-select__control option {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* Chevron drawn via ::after on the wrapper so the native <select> stays clean */
.tactical-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--on-surface-variant);
  border-bottom: 2px solid var(--on-surface-variant);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color var(--te-transition-fast);
}

.tactical-select:focus-within::after,
.tactical-select:hover::after {
  border-right-color: var(--on-surface);
  border-bottom-color: var(--on-surface);
}

/* Compact density */
.tactical-select--sm .tactical-select__control {
  min-height: 32px;
  padding: 0 30px 0 12px;
  font-size: 0.75rem;
}
.tactical-select--sm::after {
  right: 11px;
  width: 8px;
  height: 8px;
}

/* Full-width form layout */
.tactical-select--block {
  display: block;
  width: 100%;
}
.tactical-select--block .tactical-select__control { width: 100%; }