.bg-gradient {
  --background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
  background: radial-gradient(circle at top left, #2d3436 0%, #121212 100%);
}

.outfit-font {
  font-family: 'Outfit', sans-serif;
}

.settings-container {
  max-width: 600px;
  margin: 0 auto;
}

.settings-group {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}



.transparent-item {
  --background: transparent;
  --color: white;
  --padding-start: 16px;
  --inner-padding-end: 16px;
}

.settings-item-title {
  color: white;
  font-weight: 600;
  margin: 0;
}

.settings-item-subtitle {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.settings-group-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ion-color-secondary);
  margin: 0;
}

.sub-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.playlist-item {
  --min-height: 44px;
  background: rgba(255, 255, 255, 0.03) !important;
  margin: 4px 8px;
  border-radius: 8px;
  
  .settings-item-title {
    font-size: 0.9rem;
  }
}

ion-radio {
  --color: rgba(255, 255, 255, 0.4);
  --color-checked: var(--ion-color-secondary);
  font-size: 1rem;
  width: 100%;
  
  ion-label {
    color: white;
  }
}

.compact-mode {
  .filter-btn {
    flex: 1;
    justify-content: center;
  }
}

.group-header {
  margin-bottom: 8px;
}

.sync-info {
  margin-top: 4px;
  padding-left: 56px;
  p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    strong {
      color: var(--ion-color-secondary);
    }
  }
}

.sync-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  
  .progress-bar {
    height: 100%;
    background: var(--ion-color-secondary);
    transition: width 0.3s ease;
  }
}

.settings-footer-text {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
}

// High contrast overrides
:host-context(body.high-contrast) {
  .settings-item-title {
    color: black !important;
  }
  .settings-item-subtitle {
    color: rgba(0, 0, 0, 0.6) !important;
  }
  .settings-footer-text {
    color: rgba(0, 0, 0, 0.4) !important;
  }
  .sub-group-title {
    color: rgba(0, 0, 0, 0.7) !important;
  }
  .sync-info p {
    color: rgba(0, 0, 0, 0.7) !important;
  }
  ion-label {
    color: black !important;
  }
  ion-radio {
    --color: rgba(0, 0, 0, 0.3);
    color: black !important;
    
    ion-label {
      color: black !important;
    }
  }
}

.credits-footer {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  
  .credits-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ion-color-secondary);
    line-height: 1.6;
  }
  
  .email-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
  }
}

:host-context(body.high-contrast) {
  .credits-footer {
    border-top-color: rgba(0, 0, 0, 0.2);
    .credits-text {
      color: black !important;
    }
    .email-text {
      color: rgba(0, 0, 0, 0.6) !important;
    }
  }
}

.select-item-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.select-label-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.select-text-group {
  display: flex;
  flex-direction: column;

  .settings-item-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    margin: 0;
  }

  .settings-item-subtitle {
    font-size: 0.85rem !important;
    margin-top: 2px !important;
  }
}

.select-box-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px 12px;
  transition: background 0.2s ease, border-color 0.2s ease;

  &:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

.custom-select-block {
  --placeholder-color: rgba(255, 255, 255, 0.4);
  --placeholder-opacity: 1;
  --color: var(--ion-color-secondary);
  color: var(--ion-color-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  width: 100%;
  font-size: 0.95rem;

  &::part(placeholder), &::part(text) {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

:host-context(body.high-contrast) {
  .select-box-wrapper {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
  }
  .custom-select-block {
    --color: black !important;
    color: black !important;
  }
  .legend-content {
    .legend-intro {
      color: #333333 !important;
    }
    .legend-item {
      .legend-icon-wrapper {
        background: rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #cccccc;
      }
      .legend-text {
        h4 {
          color: #000000 !important;
        }
        p {
          color: #222222 !important;
        }
      }
    }
  }
}

.legend-content {
  .legend-intro {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    line-height: 1.4;
  }

  .legend-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .legend-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .legend-icon-wrapper {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      ion-icon {
        font-size: 1.2rem;
      }
    }

    .legend-text {
      flex: 1;

      h4 {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ion-color-secondary);
      }

      p {
        margin: 0;
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.4;
      }
    }
  }
}
