html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Fix Tailwind's collapse class conflicting with Bootstrap navbar */
.navbar .collapse {
  visibility: visible !important;
}

.navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm .navbar-collapse {
    display: none !important;
  }
  .navbar-expand-sm .navbar-collapse.show,
  .navbar-expand-sm .navbar-collapse.collapsing {
    display: block !important;
  }
}

/* Dark mode base styles */
html.dark {
  background-color: #0a0a0a;
  color-scheme: dark;
}

html.dark body {
  background-color: #0a0a0a;
  color: #f5f5f5;
}

/* Dark mode form controls */
html.dark .form-control,
html.dark .form-select {
  background-color: #171717;
  border-color: #262626;
  color: #f5f5f5;
}

html.dark .form-control:focus,
html.dark .form-select:focus {
  background-color: #171717;
  border-color: #6366f1;
  color: #f5f5f5;
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

html.dark .form-control::placeholder {
  color: #737373;
}

/* Dark mode cards */
html.dark .card {
  background-color: #171717;
  border-color: #262626;
  color: #f5f5f5;
}

html.dark .card-header {
  background-color: #0a0a0a;
  border-color: #262626;
}

html.dark .card-footer {
  background-color: #0a0a0a;
  border-color: #262626;
}

/* Dark mode modal */
html.dark .modal-content {
  background-color: #171717;
  border-color: #262626;
  color: #f5f5f5;
}

html.dark .modal-header {
  border-color: #262626;
}

html.dark .modal-footer {
  border-color: #262626;
}

html.dark .modal-backdrop {
  background-color: #000;
}

/* Dark mode alerts */
html.dark .alert-info {
  background-color: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

html.dark .alert-warning {
  background-color: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}

html.dark .alert-success {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

html.dark .alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Dark mode text utilities */
html.dark .text-muted {
  color: #737373 !important;
}

html.dark .text-dark {
  color: #f5f5f5 !important;
}

/* Dark mode bg-light and bg-body-secondary */
html.dark .bg-light,
html.dark .bg-body-secondary {
  background-color: #1f1f1f !important;
  color: #f5f5f5;
}

/* Dark mode album cover container */
html.dark .album-cover-container {
  background-color: #262626;
}

/* Dark mode tooltips */
html.dark .tooltip-inner {
  background-color: #262626;
  color: #f5f5f5;
}

html.dark .tooltip.bs-tooltip-top .tooltip-arrow::before,
html.dark .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #262626;
}

html.dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
html.dark .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #262626;
}

html.dark .tooltip.bs-tooltip-start .tooltip-arrow::before,
html.dark .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: #262626;
}

html.dark .tooltip.bs-tooltip-end .tooltip-arrow::before,
html.dark .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: #262626;
}

/* Dark mode buttons */
html.dark .btn-outline-secondary {
  border-color: #404040;
  color: #a3a3a3;
}

html.dark .btn-outline-secondary:hover {
  background-color: #262626;
  border-color: #525252;
  color: #f5f5f5;
}

html.dark .btn-secondary {
  background-color: #404040;
  border-color: #404040;
}

/* Dark mode tables */
html.dark .table {
  color: #f5f5f5;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

html.dark .table-hover > tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

/* v-cloak for Vue */
[v-cloak] {
  display: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Mobile optimizations for vinyl cards */
@media (max-width: 767.98px) {
  .vinyl-card-img {
    height: 150px !important;
  }
  
  .vinyl-card .card-body {
    padding: 0.75rem;
  }
  
  .vinyl-card .card-title {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }
  
  .vinyl-card .card-subtitle {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  
  .vinyl-card .card-text {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  
  .vinyl-card .btn-group .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  .vinyl-card .card-footer {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

/* Spotify Integration Styles */
.spotify-stats {
  background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
  border-radius: 8px;
  padding: 1rem;
  color: white;
  margin: 0.5rem 0;
}

.spotify-stats .card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

.spotify-stats .card:hover {
  transform: translateY(-2px);
}

.listening-chart {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.75rem;
}

.listening-chart .progress {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

.listening-chart .progress-bar {
  border-radius: 12px;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.spotify-actions .btn {
  transition: all 0.2s ease-in-out;
}

.spotify-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Spotify success button styling */
.btn-success.spotify-btn {
  background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(29, 185, 84, 0.3);
}

.btn-success.spotify-btn:hover {
  background: linear-gradient(135deg, #1ed760 0%, #1db954 100%);
  box-shadow: 0 4px 8px rgba(29, 185, 84, 0.4);
}

/* Responsive adjustments for Spotify stats */
@media (max-width: 767.98px) {
  .spotify-stats {
    padding: 0.75rem;
  }
  
  .spotify-stats .card-title {
    font-size: 0.9rem;
  }
  
  .spotify-stats h2 {
    font-size: 1.5rem;
  }
  
  .listening-chart {
    padding: 0.5rem;
  }
}