html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.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%;
}

/* Rave Central Custom Styles */
body {
  margin-bottom: 60px;
  background-color: #121212 !important;
  color: #e0e0e0;
}

/* Subtle Neon Glow Effect for Branding */
.text-neon {
  color: #ff00ff;
  text-shadow: 0 0 3px rgba(255, 0, 255, 0.8), 0 0 6px rgba(255, 0, 255, 0.4);
  font-weight: 600;
}

/* Enhanced Navigation Styling */
.navbar-dark .navbar-nav .nav-link:hover {
  color: #ff00ff;
  transition: color 0.3s ease;
}



/* Card Styles for Social Content */
.card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
}

.card-header {
  background-color: #2d2d2d;
  border-bottom: 1px solid #444;
}

/* Form Elements */
.form-control {
  background-color: #2d2d2d;
  border: 1px solid #555;
  color: #e0e0e0;
}

.form-control:focus {
  background-color: #2d2d2d;
  border-color: #ff00ff;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 255, 0.25);
}

/* Button Variants for Rave Theme */
.btn-primary {
  background-color: #ff00ff;
  border-color: #ff00ff;
}

.btn-primary:hover {
  background-color: #e600e6;
  border-color: #e600e6;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.btn-outline-primary {
  color: #ff00ff;
  border-color: #ff00ff;
}

.btn-outline-primary:hover {
  background-color: #ff00ff;
  border-color: #ff00ff;
  color: white;
}

/* Alert and Notification Styling */
.alert-info {
  background-color: rgba(0, 123, 255, 0.1);
  border-color: rgba(0, 123, 255, 0.3);
  color: #87ceeb;
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.3);
  color: #90ee90;
}

/* Footer Styling */
footer {
  margin-top: auto;
  background-color: #1a1a1a;
  border-top: 1px solid #333;
}

/* Utility Classes */
.bg-rave-dark {
  background-color: #1a1a1a !important;
}

.bg-rave-darker {
  background-color: #0f0f0f !important;
}

.bg-rave-accent {
  background-color: #ff00ff !important;
}

.text-rave-primary {
  color: #ff00ff !important;
}

/* Mobile Responsiveness */
@media (max-width: 767.98px) {
  .navbar-brand {
    font-size: 1.2rem;
  }

  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Loading Animation for Future Use */
.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  40% { color: #ff00ff; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  60% { text-shadow: .25em 0 0 #ff00ff, .5em 0 0 rgba(0,0,0,0); }
  80%, 100% { text-shadow: .25em 0 0 #ff00ff, .5em 0 0 #ff00ff; }
}

/* ========================================
   ASP.NET CORE IDENTITY UI OVERRIDES
   Apply Rave Theme to Login/Register Pages
   ======================================== */

/* Identity UI Page Container */
.page {
  background-color: #121212 !important;
  min-height: 100vh;
  padding: 2rem 0;
}

/* Identity UI Main Content Areas */
@media (min-width: 768px) {
  .page .container {
    max-width: 28rem;
  }
}

/* Identity UI Cards */
.page .card {
  background-color: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(255, 0, 255, 0.1) !important;
}

.page .card-header {
  background-color: #2d2d2d !important;
  border-bottom: 1px solid #444 !important;
  border-radius: 8px 8px 0 0 !important;
}

.page .card-header h4,
.page .card-header h5 {
  color: #ff00ff !important;
  font-weight: 600;
}

/* Identity UI Form Elements */
.page .form-control {
  background-color: #2d2d2d !important;
  border: 1px solid #555 !important;
  color: #e0e0e0 !important;
  border-radius: 4px;
}

.page .form-control:focus {
  background-color: #2d2d2d !important;
  border-color: #ff00ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 255, 0.25) !important;
}

.page .form-floating > label {
  color: #ccc;
}

/* Identity UI Buttons */
.page .btn-primary {
  background-color: #ff00ff !important;
  border-color: #ff00ff !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

.page .btn-primary:hover {
  background-color: #e600e6 !important;
  border-color: #e600e6 !important;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4) !important;
}

.page .btn-secondary {
  background-color: #333 !important;
  border-color: #555 !important;
  color: #e0e0e0 !important;
}

.page .btn-secondary:hover {
  background-color: #555 !important;
  border-color: #777 !important;
  color: #ffffff !important;
}

/* Identity UI Links */
.page a {
  color: #ff00ff !important;
  text-decoration: none;
}

.page a:hover {
  color: #e600e6 !important;
  text-decoration: underline;
}

/* Identity UI Text Styling */
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
  color: #ffffff !important;
}

.page p,
.page label {
  color: #e0e0e0 !important;
}

/* Identity UI Alert Messages */
.page .alert {
  background-color: rgba(255, 0, 255, 0.1) !important;
  border: 1px solid rgba(255, 0, 255, 0.3) !important;
  color: #fff !important;
}

.page .text-danger {
  color: #ff6b6b !important;
}

.page .text-success {
  color: #90ee90 !important;
}

/* Identity UI Form Validation */
.page .field-validation-error {
  color: #ff6b6b !important;
  font-size: 0.875rem;
}

/* Identity UI Footer */
.page footer {
  background-color: #0f0f0f !important;
  border-top: 1px solid #333 !important;
  color: #888;
}

/* Identity UI Mobile Responsive */
@media (max-width: 767.98px) {
  .page .card {
    margin: 0 1rem;
  }

  .page .card-header h4 {
    font-size: 1.25rem;
  }
}
