/* Synth Hosting Theme - Black and Blue */

/* General Styles */
body {
  background-color: #0a0a0a;
  color: #f8f9fa;
  font-family: 'Inter', sans-serif;
}

/* Background Colors */
.bg-synth-black {
  background-color: #0a0a0a !important;
}

.bg-synth-dark {
  background-color: #121212 !important;
}

.bg-synth-card {
  background-color: #181818 !important;
}

.bg-synth-blue {
  background-color: #1e88e5 !important;
}

/* Text Colors */
.text-synth-blue {
  color: #1e88e5 !important;
}

.text-synth-blue-light {
  color: #42a5f5 !important;
}

.text-synth-text {
  color: #f8f9fa !important;
}

.text-synth-text-secondary {
  color: #adb5bd !important;
}

.text-synth-text-muted {
  color: #6c757d !important;
}

/* Border Colors */
.border-synth-border {
  border-color: #2a2a2a !important;
}

.border-synth-blue {
  border-color: #1e88e5 !important;
}

/* Card Styles */
.card-synth {
  background-color: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 0.5rem;
}

.card-header-synth {
  background-color: #181818;
  border-bottom: 1px solid #2a2a2a;
  color: #f8f9fa;
}

.card-body-synth {
  background-color: #181818;
  color: #f8f9fa;
}

.card-footer-synth {
  background-color: #181818;
  border-top: 1px solid #2a2a2a;
}

/* Form Styles */
.form-control-synth {
  background-color: #181818;
  border: 1px solid #2a2a2a;
  color: #f8f9fa;
}

.form-control-synth:focus {
  background-color: #181818;
  border-color: #1e88e5;
  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.25);
  color: #f8f9fa;
}

.form-select-synth {
  background-color: #181818;
  border: 1px solid #2a2a2a;
  color: #f8f9fa;
}

.form-select-synth:focus {
  background-color: #181818;
  border-color: #1e88e5;
  box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.25);
  color: #f8f9fa;
}

/* Button Styles */
.btn-synth-blue {
  background-color: #1e88e5;
  border-color: #1e88e5;
  color: #f8f9fa;
}

.btn-synth-blue:hover {
  background-color: #1565c0;
  border-color: #1565c0;
  color: #f8f9fa;
}

.btn-synth-outline {
  background-color: transparent;
  border-color: #1e88e5;
  color: #1e88e5;
}

.btn-synth-outline:hover {
  background-color: #1e88e5;
  color: #f8f9fa;
}

/* Table Styles */
.table-synth {
  color: #f8f9fa;
}

.table-synth thead th {
  background-color: #121212;
  border-bottom: 1px solid #2a2a2a;
  color: #f8f9fa;
}

.table-synth tbody tr {
  background-color: #181818;
}

.table-synth tbody tr:hover {
  background-color: #202020;
}

.table-synth td, .table-synth th {
  border-top: 1px solid #2a2a2a;
}

/* Navbar Styles */
.navbar-synth {
  background-color: #0a0a0a;
  border-bottom: 1px solid #2a2a2a;
}

.navbar-synth .navbar-brand {
  color: #f8f9fa;
}

.navbar-synth .nav-link {
  color: #adb5bd;
}

.navbar-synth .nav-link:hover {
  color: #f8f9fa;
}

.navbar-synth .nav-link.active {
  color: #1e88e5;
}

/* Sidebar Styles */
.sidebar-synth {
  background-color: #0a0a0a;
  border-right: 1px solid #2a2a2a;
}

.sidebar-synth .sidebar-link {
  color: #adb5bd;
}

.sidebar-synth .sidebar-link:hover {
  color: #f8f9fa;
  background-color: #181818;
}

.sidebar-synth .sidebar-link.active {
  color: #1e88e5;
  background-color: #181818;
}

/* Alert Styles */
.alert-synth-blue {
  background-color: rgba(30, 136, 229, 0.2);
  border-color: #1e88e5;
  color: #f8f9fa;
}

/* Badge Styles */
.badge-synth-blue {
  background-color: #1e88e5;
  color: #f8f9fa;
}

/* Tooltip Styles */
.tooltip-synth {
  background-color: #181818;
  border: 1px solid #2a2a2a;
  color: #f8f9fa;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #121212;
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}

/* Custom Styles for Synth Hosting */
.gradient-blue {
  background: linear-gradient(90deg, #1e88e5 0%, #42a5f5 100%);
}

.hover-lift {
  transition: transform 0.2s ease-in-out;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* Override existing styles */
.bg-darkblue {
  background-color: #0a0a0a !important;
}

.bg-slate-800\/80 {
  background-color: rgba(24, 24, 24, 0.8) !important;
}

.bg-slate-900\/50 {
  background-color: rgba(18, 18, 18, 0.5) !important;
}

.bg-slate-700 {
  background-color: #202020 !important;
}

.bg-slate-800 {
  background-color: #181818 !important;
}

.border-slate-700 {
  border-color: #2a2a2a !important;
}

.border-slate-600 {
  border-color: #2a2a2a !important;
}

.hover\:border-blue-500:hover {
  border-color: #1e88e5 !important;
}

.hover\:border-green-500:hover {
  border-color: #1e88e5 !important;
}

.hover\:border-yellow-500:hover {
  border-color: #1e88e5 !important;
}

.hover\:border-purple-500:hover {
  border-color: #1e88e5 !important;
}

.hover\:border-indigo-500:hover {
  border-color: #1e88e5 !important;
}

.hover\:border-amber-500:hover {
  border-color: #1e88e5 !important;
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: #1e88e5 !important;
}

.bg-blue-600 {
  background-color: #1e88e5 !important;
}

.hover\:bg-blue-700:hover {
  background-color: #1565c0 !important;
}

.text-blue-500 {
  color: #1e88e5 !important;
}

.text-blue-400 {
  color: #42a5f5 !important;
}

/* Override color classes for consistency */
.bg-green-500\/20 {
  background-color: rgba(30, 136, 229, 0.2) !important;
}

.text-green-500 {
  color: #1e88e5 !important;
}

.bg-gradient-to-r.from-green-600.to-green-400 {
  background-image: linear-gradient(to right, #1565c0, #42a5f5) !important;
}

.bg-yellow-500\/20 {
  background-color: rgba(30, 136, 229, 0.2) !important;
}

.text-yellow-500 {
  color: #1e88e5 !important;
}

.bg-gradient-to-r.from-yellow-600.to-yellow-400 {
  background-image: linear-gradient(to right, #1565c0, #42a5f5) !important;
}

.bg-purple-500\/20 {
  background-color: rgba(30, 136, 229, 0.2) !important;
}

.text-purple-500 {
  color: #1e88e5 !important;
}

.bg-gradient-to-r.from-purple-600.to-purple-400 {
  background-image: linear-gradient(to right, #1565c0, #42a5f5) !important;
}

.bg-indigo-500\/20 {
  background-color: rgba(30, 136, 229, 0.2) !important;
}

.text-indigo-500 {
  color: #1e88e5 !important;
}

.bg-gradient-to-r.from-indigo-600.to-indigo-400 {
  background-image: linear-gradient(to right, #1565c0, #42a5f5) !important;
}

.bg-amber-500\/20 {
  background-color: rgba(30, 136, 229, 0.2) !important;
}

.text-amber-500 {
  color: #1e88e5 !important;
}

.bg-gradient-to-r.from-amber-600.to-amber-400 {
  background-image: linear-gradient(to right, #1565c0, #42a5f5) !important;
}