/* Away Game Theme - Black & Gold Design System */

:root {
  /* Primary Colors */
  --bh-black: #000000;
  --bh-gold: #ffc107;
  --bh-gold-dark: #f9a825;
  --bh-gold-light: #ffca28;
  
  /* Background Colors */
  --bh-bg-primary: #000000;
  --bh-bg-card: #1a1a1a;
  --bh-bg-card-alt: #2a2a2a;
  --bh-bg-card-hover: #333333;
  
  /* Text Colors */
  --bh-text-primary: #ffffff;
  --bh-text-secondary: #9e9e9e;
  --bh-text-muted: #757575;
  
  /* Border Colors */
  --bh-border-gold: #ffc107;
  --bh-border-subtle: #333333;
  --bh-border-card: #4a4a4a;
  
  /* Spacing */
  --bh-radius: 16px;
  --bh-radius-sm: 8px;
  --bh-radius-lg: 24px;
}

/* Global Background */

.q-page {
  background-color: var(--bh-bg-primary) !important;
  color: var(--bh-text-primary);
  min-height: 100vh;
}

/* Apply gold border to ALL Quasar cards by default */

.q-card {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius) !important;
  color: var(--bh-text-primary) !important;
}

/* Apply gold border to clickable list items */

.q-item.q-item--clickable {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius) !important;
  margin-bottom: 12px;
  color: var(--bh-text-primary) !important;
}

/* Ensure all text in cards is visible */

.q-card .text-grey-5,
.q-card .text-grey-6,
.q-card .text-grey-7 {
  color: var(--bh-text-secondary) !important;
}

.q-card .text-caption {
  color: var(--bh-text-muted) !important;
}

/* Default Card Style - Gold Border (Primary) */

.bh-card,
.bh-card-gold {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius) !important;
  color: var(--bh-text-primary) !important;
}

/* Card Styles - Version 2: Subtle Border (for less important items) */

.bh-card-subtle {
  background-color: var(--bh-bg-card) !important;
  border: 1px solid var(--bh-border-subtle) !important;
  border-radius: var(--bh-radius) !important;
  color: var(--bh-text-primary) !important;
}

/* Card Styles - Version 3: No Border (for nested content) */

.bh-card-clean {
  background-color: var(--bh-bg-card-alt) !important;
  border: none !important;
  border-radius: var(--bh-radius) !important;
  color: var(--bh-text-primary) !important;
}

/* Hover Effects */

.q-card:hover,
.bh-card:hover,
.bh-card-gold:hover,
.bh-card-subtle:hover,
.bh-card-clean:hover {
  background-color: var(--bh-bg-card-hover) !important;
  border-color: var(--bh-gold-light) !important;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* Typography */

.bh-title {
  color: var(--bh-gold) !important;
  font-weight: bold;
}

.bh-subtitle {
  color: var(--bh-text-secondary) !important;
}

.bh-text-muted {
  color: var(--bh-text-muted) !important;
}

/* ALL Buttons - Default to gold theme */

.q-btn {
  border-radius: var(--bh-radius-sm) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Primary buttons - Filled gold */

.q-btn.q-btn--unelevated:not(.q-btn--flat):not(.q-btn--outline),
.q-btn.bg-primary,
.q-btn.bg-positive,
.q-btn.bg-green-8,
.q-btn[color="primary"],
.q-btn[color="positive"],
.q-btn[color="green-8"],
.bh-btn-gold {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
  border: none !important;
  font-weight: bold;
}

.q-btn.q-btn--unelevated:hover,
.q-btn.bg-primary:hover,
.q-btn.bg-positive:hover,
.bh-btn-gold:hover {
  background-color: var(--bh-gold-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4) !important;
}

/* Outlined buttons */

.q-btn.q-btn--outline,
.q-btn[outline],
.bh-btn-outline {
  background-color: transparent !important;
  color: var(--bh-gold) !important;
  border: 2px solid var(--bh-gold) !important;
}

.q-btn.q-btn--outline:hover,
.bh-btn-outline:hover {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4) !important;
}

/* Flat buttons (text only) */

.q-btn.q-btn--flat {
  color: var(--bh-gold) !important;
}

.q-btn.q-btn--flat:hover {
  background-color: rgba(255, 193, 7, 0.1) !important;
}

/* Round icon buttons */

.q-btn.q-btn--round {
  border: 1px solid var(--bh-border-subtle) !important;
  background-color: var(--bh-bg-card) !important;
}

.q-btn.q-btn--round:hover {
  border-color: var(--bh-gold) !important;
  background-color: var(--bh-bg-card-hover) !important;
}

/* Danger/Negative buttons stay red */

.q-btn.bg-negative,
.q-btn[color="negative"],
.q-btn.text-negative {
  background-color: #c10015 !important;
  color: white !important;
}

/* Disabled buttons */

.q-btn.disabled,
.q-btn[disabled] {
  opacity: 0.4 !important;
}

/* Chips/Badges */

.bh-chip {
  background-color: transparent !important;
  color: var(--bh-gold) !important;
  border: 1px solid var(--bh-gold) !important;
  font-weight: 600;
}

.bh-chip-filled {
  background-color: var(--bh-gold) !important;
  color: var(--bh-black) !important;
  font-weight: bold;
}

/* Navigation Bar */

.bh-navbar {
  background-color: var(--bh-black) !important;
  border-top: 1px solid var(--bh-border-subtle) !important;
}

.bh-navbar .q-btn {
  color: var(--bh-text-secondary) !important;
}

.bh-navbar .q-btn.active,
.bh-navbar .q-btn:hover {
  color: var(--bh-gold) !important;
}

/* Header/App Bar */

.bh-header {
  background-color: var(--bh-black) !important;
  border-bottom: 1px solid var(--bh-border-subtle) !important;
}

/* Section Headers */

.bh-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.bh-section-header .q-icon {
  color: var(--bh-gold);
}

.bh-section-header-title {
  color: var(--bh-gold);
  font-size: 1.25rem;
  font-weight: bold;
}

/* Interactive Hints */

.bh-hint {
  color: var(--bh-text-muted);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bh-hint .q-icon {
  font-size: 1rem;
}

/* Tournament/Special Cards */

.bh-card-tournament {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-gold) !important;
  border-radius: var(--bh-radius) !important;
  position: relative;
  overflow: hidden;
}

.bh-card-tournament::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bh-gold), var(--bh-gold-light));
}

/* Game Cards */

.bh-game-card {
  background-color: var(--bh-bg-card) !important;
  border-left: 4px solid var(--bh-gold) !important;
  border-radius: var(--bh-radius-sm) !important;
  padding: 16px;
  margin-bottom: 12px;
}

/* Lists */

.bh-list {
  background-color: transparent !important;
}

.bh-list-item {
  background-color: var(--bh-bg-card) !important;
  border-radius: var(--bh-radius-sm) !important;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--bh-border-subtle);
}

.bh-list-item:hover {
  background-color: var(--bh-bg-card-hover) !important;
  border-color: var(--bh-gold);
}

/* Team Cards - Special styling for team schedule items */

.team-card,
.q-item.team-item {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius) !important;
  margin-bottom: 12px;
  color: var(--bh-text-primary) !important;
}

.team-card:hover,
.q-item.team-item:hover {
  background-color: var(--bh-bg-card-hover) !important;
  border-color: var(--bh-gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  transition: all 0.3s ease;
}

/* Dialogs and Modals */

.q-dialog__inner--minimized > div,
.q-dialog .q-card,
.bh-dialog {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-gold) !important;
  border-radius: var(--bh-radius) !important;
  color: var(--bh-text-primary) !important;
}

.q-dialog__backdrop {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Menus and Dropdowns */

.q-menu {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-gold) !important;
  border-radius: var(--bh-radius-sm) !important;
  color: var(--bh-text-primary) !important;
}

.q-menu .q-item:hover {
  background-color: var(--bh-bg-card-hover) !important;
}

/* Notifications */

.q-notification {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-gold) !important;
  border-radius: var(--bh-radius-sm) !important;
  color: var(--bh-text-primary) !important;
}

/* Loading spinner */

.q-loading {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

.q-spinner {
  color: var(--bh-gold) !important;
}

/* Tooltips */

.q-tooltip {
  background-color: var(--bh-bg-card) !important;
  border: 1px solid var(--bh-gold) !important;
  color: var(--bh-text-primary) !important;
  border-radius: var(--bh-radius-sm) !important;
}

/* Form Inputs - Apply to ALL inputs */

.q-field--filled .q-field__control,
.q-field--outlined .q-field__control,
.q-input,
.q-select,
.q-field__control {
  background-color: var(--bh-bg-card) !important;
  color: var(--bh-text-primary) !important;
  border-radius: var(--bh-radius-sm) !important;
}

/* Outlined inputs get gold border */

.q-field--outlined .q-field__control:before {
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius-sm) !important;
}

.q-field--outlined.q-field--focused .q-field__control:before {
  border-color: var(--bh-gold-light) !important;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.3) !important;
}

/* Filled inputs */

.q-field--filled .q-field__control {
  background-color: var(--bh-bg-card-alt) !important;
  border: 1px solid var(--bh-border-subtle) !important;
  border-radius: var(--bh-radius-sm) !important;
}

.q-field--filled.q-field--focused .q-field__control {
  border-color: var(--bh-gold) !important;
  background-color: var(--bh-bg-card) !important;
}

.q-field--filled .q-field__control:before {
  background-color: transparent !important;
}

.q-field--filled.q-field--focused .q-field__control:after {
  background-color: var(--bh-gold) !important;
}

/* Input labels and hints */

.q-field__label {
  color: var(--bh-text-secondary) !important;
}

.q-field--focused .q-field__label {
  color: var(--bh-gold) !important;
}

.q-field__messages {
  color: var(--bh-text-muted) !important;
}

/* Text areas */

.q-textarea .q-field__control {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius-sm) !important;
}

/* Search inputs specifically */

.search-input-mobile .q-field__control {
  background-color: var(--bh-bg-card) !important;
  border: 2px solid var(--bh-border-gold) !important;
  border-radius: var(--bh-radius-sm) !important;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bh-bg-card);
}

::-webkit-scrollbar-thumb {
  background: var(--bh-border-subtle);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bh-gold);
}

/* Text Contrast Fixes - Ensure all text is readable */

.text-dark,
.text-grey-10,
.text-grey-9,
.text-grey-8 {
  color: var(--bh-text-primary) !important;
}

.text-grey-7,
.text-grey-6,
.text-grey-5 {
  color: var(--bh-text-secondary) !important;
}

.text-grey-4,
.text-grey-3,
.text-grey-2 {
  color: var(--bh-text-muted) !important;
}

/* Headers and titles */

.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
  color: var(--bh-text-primary) !important;
}

/* Captions and overlines */

.text-caption {
  color: var(--bh-text-muted) !important;
}

.text-overline {
  color: var(--bh-gold) !important;
  letter-spacing: 0.05em;
}

/* Links */

a {
  color: var(--bh-gold) !important;
  text-decoration: none;
}

a:hover {
  color: var(--bh-gold-light) !important;
  text-decoration: underline;
}

/* Special text colors */

.text-primary { color: var(--bh-gold) !important; }

.text-amber { color: var(--bh-gold) !important; }

.text-yellow { color: var(--bh-gold) !important; }

.text-white { color: var(--bh-text-primary) !important; }

/* Icons */

.q-icon {
  color: currentColor;
}

.q-icon.text-primary,
.q-icon.text-amber {
  color: var(--bh-gold) !important;
}

/* Tabs text */

.q-tab__label {
  color: inherit !important;
}

/* Dialog text */

.q-dialog__inner {
  color: var(--bh-text-primary) !important;
}

/* Utility Classes */

.bh-bg-black { background-color: var(--bh-black) !important; }

.bh-bg-gold { background-color: var(--bh-gold) !important; }

.bh-text-gold { color: var(--bh-gold) !important; }

.bh-text-white { color: var(--bh-text-primary) !important; }

.bh-text-grey { color: var(--bh-text-secondary) !important; }

.bh-border-gold { border-color: var(--bh-gold) !important; }

@media (max-width: 599px) {
  .text-grey-5 {
    color: #bdbdbd !important;
  }
  .text-grey-6 {
    color: #9e9e9e !important;
  }
  .text-grey-7 {
    color: #e0e0e0 !important;
  }
  .text-grey-8 {
    color: #f5f5f5 !important;
  }
  .q-btn {
    min-height: 40px;
    font-size: 0.875rem;
  }
  .q-card {
    border-radius: 12px;
  }
  .q-btn,
  .q-tab,
  .q-item {
    min-height: 44px;
  }
  .q-pa-md {
    padding: 12px !important;
  }
  .q-pa-sm {
    padding: 8px !important;
  }
  .q-mb-md {
    margin-bottom: 12px !important;
  }
  .q-mb-lg {
    margin-bottom: 16px !important;
  }
  .text-h6 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
  .text-body1 {
    font-size: 0.9rem !important;
    line-height: 1.4;
  }
  .text-body2 {
    font-size: 0.875rem !important;
    line-height: 1.4;
  }
  .text-caption {
    font-size: 0.75rem !important;
  }
  * {
    -webkit-overflow-scrolling: touch;
  }
  .q-btn,
  .q-tab,
  .q-item {
    -webkit-user-select: none;
    user-select: none;
  }
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

.body--dark {
  background-color: #1a1a1a;
  color: #f5f5f5;
}

.text-amber {
  color: #ffd700 !important;
}

.bg-amber {
  background-color: #ffd700 !important;
}

:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
}
.border-top-gold[data-v-f2883334] {
  border-top: 2px solid #ffd700;
}
.bg-dark[data-v-f2883334] {
  background-color: #000000;
}
/* Logo responsive sizing */
.logo-image[data-v-f2883334] {
  height: 40px;
  cursor: pointer;
  transition: transform 0.2s;
  background: transparent !important;
  border: none;
}
/* Bottom navigation tab styling */
.bottom-nav-tab[data-v-f2883334] {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.tab-label[data-v-f2883334] {
  font-size: 11px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
/* Mobile responsive adjustments - Enhanced */
@media (max-width: 599px) {
.logo-image[data-v-f2883334] {
    height: 35px;
}
.q-toolbar[data-v-f2883334] {
    padding: 8px 12px !important;
}
.q-footer[data-v-f2883334] {
    background-color: #000000 !important;
    border-top: 2px solid #ffd700 !important;
}
.bottom-nav-tab[data-v-f2883334] {
    min-height: 52px !important;
    padding: 4px 0;
}
  /* iPhone notch support */
.q-footer[data-v-f2883334] {
    padding-bottom: env(safe-area-inset-bottom);
}
  /* Ensure page content doesn't hide behind footer */
.q-page-container[data-v-f2883334] {
    padding-bottom: 56px !important;
}
.tab-label[data-v-f2883334] {
    font-size: 10px;
    font-weight: 600;
    margin-top: 1px;
}
.q-tab__icon[data-v-f2883334] {
    font-size: 20px !important;
}
  /* Better active state visibility */
.q-tab--active .tab-label[data-v-f2883334] {
    color: #ffd700 !important;
}
.q-tab--active .q-icon[data-v-f2883334] {
    color: #ffd700 !important;
}
  /* Improve inactive tab visibility */
.q-tab[data-v-f2883334]:not(.q-tab--active) {
    color: #9e9e9e !important;
}
}
/* Small tablets */
@media (min-width: 600px) and (max-width: 799px) {
.logo-image[data-v-f2883334] {
    height: 40px;
}
}