/* Cricket Local — experience pack: readability, touch targets, loading, weather */

:root {
  --text: #243328;
  --text-muted: #5c6d62;
  --text-soft: #7a8a80;
  --surface-white: #ffffff;
  --surface-soft: #f7f9f7;
  --touch: 52px;
  --touch-sm: 44px;
}

html.theme-dark,
body.theme-dark {
  --text: #d4e0d8;
  --text-muted: #9aa89e;
  --text-soft: #7d8f84;
  --surface-white: #1c2622;
  --surface-soft: #151d19;
}

/* Loading progress */
.loading-overlay-progress {
  margin: 18px 0 0;
  text-align: left;
}

.loading-overlay-progress__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(26, 77, 46, 0.12);
  overflow: hidden;
}

.loading-overlay-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-600), var(--green-500));
  transition: width 0.35s ease;
}

.loading-overlay-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
}

.loading-overlay-step {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
}

html.theme-dark .loading-overlay-progress__track,
body.theme-dark .loading-overlay-progress__track {
  background: rgba(255, 255, 255, 0.1);
}

/* Offline / cache status */
.status-bar.offline-cached {
  background: rgba(90, 74, 20, 0.14);
  color: #6b5a12;
  border-bottom: 1px solid rgba(90, 74, 20, 0.2);
}

html.theme-dark .status-bar.offline-cached,
body.theme-dark .status-bar.offline-cached {
  background: rgba(212, 184, 122, 0.12);
  color: #d4c49a;
}

.status-bar.cache-ready {
  background: rgba(26, 77, 46, 0.08);
  color: var(--text-muted);
}

/* Fixture weather chip */
.fixture-weather {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid rgba(26, 77, 46, 0.1);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.2;
  box-sizing: border-box;
}

.fixture-weather--loading,
.fixture-weather--unavailable {
  opacity: 0.85;
}

.fixture-weather__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: #3d7ea6;
}

.fixture-weather__svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

.fixture-weather__label {
  white-space: nowrap;
}

.fixture-weather__temp {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fixture-weather__rain {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

html.theme-dark .fixture-weather,
body.theme-dark .fixture-weather {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Touch targets & clean contrast */
.tab-inline,
.filter-chip,
.nav-item,
.match-card-btn,
.opening-btn,
.auth-btn,
.header-back,
.header-refresh,
.header-help,
.header-settings {
  min-height: var(--touch-sm);
}

.team-picker-row,
.fav-team-card,
.club-btn,
.finder-club-card {
  min-height: var(--touch);
}

.match-team-name,
.opponent-link {
  min-height: var(--touch-sm);
  padding-top: 4px;
  padding-bottom: 4px;
}

.hint-text,
.player-roster-hint,
.club-home-scope-note {
  color: var(--text-soft);
}

.match-card,
.team-card,
.quick-stat {
  color: var(--text);
}

.match-ground,
.match-date-bar {
  color: var(--text-muted);
}

.section-header .section-title {
  color: #0d2818;
  font-weight: 800;
}

/* Teams tab — high contrast for outdoor / bright light */
body.v3a-mode.v3a-ios.v3a-teams-view .team-picker-name,
body.v3a-mode.v3a-ios #view-v3a-teams .team-picker-name {
  color: #0d2818;
  font-weight: 800;
}

body.v3a-mode.v3a-ios.v3a-teams-view .team-picker-league,
body.v3a-mode.v3a-ios #view-v3a-teams .team-picker-league {
  color: #3f5345;
  font-weight: 700;
}

body.v3a-mode.v3a-ios.v3a-teams-view .v3a-teams-picker .team-picker-row,
body.v3a-mode.v3a-ios #view-v3a-teams .v3a-teams-picker .team-picker-row {
  background:
    linear-gradient(168deg, #ffffff 0%, #f8faf8 100%) padding-box,
    var(--cricket-rope-gradient) border-box;
  box-shadow: 0 1px 3px rgba(13, 40, 24, 0.12);
}

body.v3a-mode.v3a-ios.v3a-teams-view .fav-team-card-star,
body.v3a-mode.v3a-ios #view-v3a-teams .fav-team-card-star {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.v3a-mode.v3a-ios.v3a-teams-view .fav-team-card-star .cricket-ball-icon,
body.v3a-mode.v3a-ios #view-v3a-teams .fav-team-card-star .cricket-ball-icon {
  filter: drop-shadow(0 1px 3px rgba(120, 53, 15, 0.35));
}

body.v3a-mode.v3a-ios.v3a-teams-view .fav-team-card .fav-btn--row,
body.v3a-mode.v3a-ios #view-v3a-teams .fav-team-card .fav-btn--row {
  border: 2px solid #b45309;
  background: #fff8e6;
}

body.v3a-mode.v3a-ios.v3a-teams-view .fav-team-card .fav-btn--row.active,
body.v3a-mode.v3a-ios #view-v3a-teams .fav-team-card .fav-btn--row.active {
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
  border-color: #92400e;
}

body.v3a-mode.v3a-ios.v3a-teams-view .fav-team-card .fav-icon--filled.cricket-ball-icon,
body.v3a-mode.v3a-ios #view-v3a-teams .fav-team-card .fav-icon--filled.cricket-ball-icon {
  filter: drop-shadow(0 2px 5px rgba(120, 53, 15, 0.4));
}

body.v3a-mode.v3a-ios.v3a-teams-view .v3a-teams-hint p,
body.v3a-mode.v3a-ios #view-v3a-teams .v3a-screen-hero p {
  color: #3f5345;
  font-weight: 600;
}