/* appStyle.css
 *
 * Global styles
 */

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap");

/* Font definitions */
:root {
  --font-family-primary: "Montserrat", "Poppins", sans-serif;
}

html,
body {
  background: linear-gradient(135deg, rgb(30, 30, 30) 0%, #6b21a8 50%, #7d1450 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--font-family-primary) !important;
  min-height: 100vh;
}

.v-application {
  background: linear-gradient(135deg, rgb(30, 30, 30) 0%, #6b21a8 50%, #7d1450 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--font-family-primary) !important;
}

.main-background {
  background: transparent !important;
}

/* Ensure Vuetify components don't override gradient */
.v-main {
  background: transparent !important;
}

.v-container {
  background: transparent !important;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  color: white;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-title-mobile {
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-top: var(--safe-area-inset-top, 0px);
}

/* Scrolling text animation for player titles */
.animated-text {
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.text--ellipsis {
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lighten dialog scrim (backdrop overlay) */
.v-overlay--active > .v-overlay__scrim {
  opacity: 0.1 !important;
}

/* Glass-style overlay for all dialogs and menus */
.v-dialog .v-card,
.v-overlay__content .v-card {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Player glass effect */
.player__container.v-card {
  background: rgba(30, 30, 30, 0.65) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.player__container .v-list {
  background: transparent !important;
}

.player__container .v-list-item {
  background: transparent !important;
}

.v-dialog .v-card {
  border-radius: 16px !important;
  overflow: hidden;
}

.v-dialog .v-card .v-card-title {
  padding: 20px 24px !important;
  font-size: 18px;
  font-weight: 600;
}

.v-dialog .v-card .v-card-text {
  padding: 24px !important;
}

.v-dialog .v-card .v-card-actions {
  padding: 16px 24px !important;
}

.v-dialog .v-card .v-card-title,
.v-dialog .v-card .v-card-text,
.v-overlay__content .v-card .v-card-title,
.v-overlay__content .v-card .v-card-text {
  color: white !important;
}

.v-dialog .v-card .v-card-actions .v-btn,
.v-overlay__content .v-card .v-card-actions .v-btn {
  color: white;
}

.v-dialog .v-card label,
.v-overlay__content .v-card label {
  color: rgba(255, 255, 255, 0.7) !important;
}

.v-dialog .v-card input,
.v-overlay__content .v-card input {
  color: white !important;
}

.v-dialog .v-card .v-field__outline,
.v-overlay__content .v-card .v-field__outline {
  color: rgba(255, 255, 255, 0.3);
}

.v-dialog .v-card .v-field--focused .v-field__outline,
.v-overlay__content .v-card .v-field--focused .v-field__outline {
  color: rgba(255, 255, 255, 0.7);
}

.v-dialog .v-card .text-medium-emphasis,
.v-overlay__content .v-card .text-medium-emphasis {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Glass-style for menus */
.v-menu .v-list,
.v-menu .v-overlay__content .v-list {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.v-menu .v-list-item {
  color: white;
}

.v-menu .v-list-item-title {
  color: white;
}

.v-menu .v-list-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.v-menu .v-icon {
  color: white;
}

/* Glass-style for tooltips */
.v-tooltip .v-overlay__content {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px);
  color: white !important;
}

.v-tooltip .v-overlay__content * {
  color: white !important;
}

/* Only target tooltip role when inside v-tooltip */
.v-tooltip div[role="tooltip"] {
  color: white !important;
}

.v-tooltip div[role="tooltip"] * {
  color: white !important;
}

/* Glass-style for snackbars */
.v-snackbar .v-snackbar__wrapper {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white !important;
}

/* Common glass-style card classes */
.glass-card {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Apply white text to specific card content areas */
.glass-card .v-card-text > p,
.glass-card .v-card-text > div:not([class*="v-"]),
.glass-card .v-card-title > div:not([class*="v-"]),
.glass-card .v-list-item-title,
.glass-card .v-list-item-subtitle {
  color: white;
}

/* Text emphasis classes - but not inside chips or buttons */
.glass-card .text-medium-emphasis:not(.v-chip__content):not(.v-chip__content *) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.glass-card .text-caption:not(.v-chip__content):not(.v-chip__content *) {
  color: rgba(255, 255, 255, 0.6) !important;
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Apply white text to specific card content areas */
.glass-card-light .v-card-text > p,
.glass-card-light .v-card-text > div:not([class*="v-"]),
.glass-card-light .v-card-title > div:not([class*="v-"]) {
  color: white;
}

/* Text emphasis classes - but not inside chips or buttons */
.glass-card-light .text-medium-emphasis:not(.v-chip__content):not(.v-chip__content *) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.glass-card-light .text-caption:not(.v-chip__content):not(.v-chip__content *) {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Common text color classes for glass backgrounds */
.glass-text {
  color: white !important;
}

.glass-text-secondary {
  color: rgba(255, 255, 255, 0.7) !important;
}

.glass-text-tertiary {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Common border styles for glass components */
.glass-border {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form validation error colors - use primary color instead of red */
.v-input--error .v-field__outline {
  color: rgb(236, 2, 126) !important;
}

.v-input--error .v-messages__message {
  color: rgb(236, 2, 126) !important;
}

.v-input--error .v-label {
  color: rgb(236, 2, 126) !important;
}

.v-input--error .v-field__prepend-inner .v-icon,
.v-input--error .v-field__append-inner .v-icon,
.v-input--error .v-field__clearable .v-icon,
.v-input--error .v-input__prepend .v-icon,
.v-input--error .v-input__append .v-icon {
  color: white !important;
}

/* Slider thumb label text color */
.v-slider-thumb__label {
  color: black !important;
}