/* CUSTOM SCROLLBARS */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* APP BACKGROUND IMAGE */
#bg-image {
  background-image: url('https://images.unsplash.com/photo-1615551043360-33de8b5f410c?w=1920&q=80'); /* Beautiful HD red-rock canyon landscape matches Mesa biome */
  /* Fallback to local screenshot if offline (blurs to hide UI elements) */
  background-color: #1a1a2e;
}

/* Glassmorphism custom styles */
.bg-glassDark {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Table hover effects */
tbody tr {
  transition: background-color 150ms ease;
}

tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Input shadow inner effect */
.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Custom button styles */
.btn-danger {
  color: #ef4444;
}
.btn-danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* Preview media limits */
#preview-content img,
#preview-content video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

#preview-content iframe {
  width: 100%;
  height: 450px;
  border: none;
  background-color: white;
  border-radius: 8px;
}