/*
 * dark_theme.css
 *
 * This file contains a complete dark theme for the Nova URL website.
 * It uses CSS variables to define a cohesive color palette and
 * applies styles to override the default light theme.
 *
 * @author Gemini
 * @version 1.2
 */

/* ==========================================================================
   1. Color Variables
   ========================================================================== */
:root {
  /* Background colors for different levels of depth */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2d2d2d;

  /* Text colors for readability */
  --text-primary: #e0e0e0; /* Main text color */
  --text-secondary: #a0a0a0; /* Sub-text, labels, and helper text */
  --text-white: #ffffff; /* For buttons and special elements */

  /* Accent colors for branding and interactive elements */
  --accent-purple: #bb86fc;
  --accent-pink: #ff79c6;
  --accent-teal: #03dac6;
  --accent-blue: #82aaff;
  --accent-amber: #ffb86c;
  --accent-emerald: #50fa7b;
  --accent-red: #ff5555;

  /* Border and line colors */
  --border-color: #383838;

  /* Status message colors */
  --success: #50fa7b;
  --error: #ff5555;
  --warning: #ffb86c;
  --info: #82aaff;
}

/* ==========================================================================
   2. General and Base Styles
   ========================================================================== */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, strong, b {
  color: var(--text-primary) !important;
}

/* Overriding Tailwind's default gray text classes */
.text-gray-900 { color: var(--text-primary) !important; }
.text-gray-800 { color: var(--text-primary) !important; }
.text-gray-700 { color: var(--text-white) !important; }
.text-gray-600 { color: var(--text-white) !important; }
.text-gray-500 { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-secondary) !important; }

/* Overriding Tailwind's default gray backgrounds */
.bg-gray-100 { background-color: var(--bg-primary) !important; }
.bg-gray-200 { background-color: var(--bg-secondary) !important; }
.bg-white { background-color: var(--bg-secondary) !important; }
.bg-gray-800 { background-color: var(--bg-tertiary) !important; }

/* Overriding default gray borders */
.border-gray-200 { border-color: var(--border-color) !important; }

/* FIX: Ensure the background gradient for the main section is dark */
.bg-gradient-to-r.from-gray-50.to-gray-200 {
  background: var(--bg-primary) !important;
}

/* ==========================================================================
   3. Navigation and Links
   ========================================================================== */
.navbar {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color);
}

.navbar-brand, .nav-link {
  color: var(--text-white) !important;
}

.nav-link:hover {
  color: var(--accent-purple) !important;
}

.btn-outline-primary {
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}

.btn-outline-primary:hover {
  background-color: var(--accent-purple);
  border-color: var(--accent-purple);
  color: var(--bg-primary);
}

/* Specific link color overrides */
a {
  color: var(--accent-blue);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-purple);
}

.text-purple-600 {
  color: var(--accent-purple) !important;
}

.text-purple-700 {
  color: #a45ee5 !important;
}

/* Fix for login/signup links in header */
.nav-link.text-gray-600 {
  color: var(--text-white) !important;
}


/* ==========================================================================
   4. Forms and Inputs
   ========================================================================== */
input, select, textarea {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-purple) !important;
  box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.2) !important;
  outline: none;
}

input::placeholder, textarea::placeholder {
  color: var(--text-secondary) !important;
}


/* ==========================================================================
   5. Buttons
   ========================================================================== */
.bg-gradient-to-r.from-purple-600.to-pink-600 {
  background: linear-gradient(to right, var(--accent-purple), var(--accent-pink)) !important;
  /* Düzeltme: Düğme metninin her zaman beyaz olmasını sağlar */
  color: var(--text-white) !important;
}

.bg-gradient-to-r.from-purple-600.to-pink-600:hover {
  background: linear-gradient(to right, #a45ee5, #f761a6) !important;
}

/* Düzeltme: Kırmızı gradyanlı düğme metninin beyaz olmasını sağlar */
.bg-gradient-to-r.from-red-600.to-red-700 {
    color: var(--text-white) !important;
}


/* ==========================================================================
   6. Cards and Tables
   ========================================================================== */
.bg-purple-50 {
  background-color: rgba(187, 134, 252, 0.1) !important;
}

.border-purple-200 {
  border-color: rgba(187, 134, 252, 0.3) !important;
}

.shadow-xl, .shadow-md {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

table {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

td {
  border-color: var(--border-color) !important;
}

tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dashboard statistics cards */
.bg-white.p-6.rounded-3xl {
  background-color: var(--bg-tertiary) !important;
}


/* ==========================================================================
   7. Modals and Messages
   ========================================================================== */
/* QR Modal overlay */
.bg-gray-900.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Copy message */
#copy-message {
  background-color: var(--accent-purple);
  color: var(--bg-primary);
}

/* Share dropdown */
#share-dropdown {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

#share-dropdown a {
  color: var(--text-primary);
}

#share-dropdown a:hover {
  background-color: var(--bg-secondary);
  color: var(--accent-purple);
}

/* Modal content background */
.bg-white.rounded-2xl {
  background-color: var(--bg-secondary) !important;
}


/* ==========================================================================
   8. Specific Fixes and Enhancements
   ========================================================================== */
/* Fix for the footer section. This overrides the default light theme styles. */
footer.bg-gray-200 {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
}

footer a.text-gray-600 {
  color: var(--text-secondary) !important;
}

footer a.hover\:text-gray-900:hover {
  color: var(--text-primary) !important;
}

/* Dashboard action buttons */
.text-teal-600 {
  color: var(--accent-teal) !important;
}

.text-teal-600:hover {
  color: #02b3a0 !important;
}

.text-blue-600 {
  color: var(--accent-blue) !important;
}

.text-blue-600:hover {
  color: #6a92e6 !important;
}

.text-red-600 {
  color: var(--accent-red) !important;
}

.text-red-600:hover {
  color: #ff3838 !important;
}

/* Error and success messages */
.text-red-500 {
  color: var(--accent-red) !important;
}

.bg-green-100 {
  background-color: rgba(80, 250, 123, 0.1) !important;
}

.border-green-400 {
  border-color: rgba(80, 250, 123, 0.3) !important;
}

.text-green-700 {
  color: var(--accent-emerald) !important;
}

/* ==========================================================================
   9. Animations and Effects
   ========================================================================== */
.hover\:shadow-2xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}


/* ==========================================================================
   10. Scrollbar and Selection
   ========================================================================== */
/* Scrollbar for Webkit-based browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-purple);
}

/* Text selection styles */
::selection {
  background-color: var(--accent-purple);
  color: var(--bg-primary);
}

/* ==========================================================================
   11. Text Gradient Fix
   ========================================================================== */