/**
 * Site Theme Configuration
 * Defines color schemes for both light and dark modes
 * Theme toggle automatically switches between these CSS class-based themes
 */

/* ==================== Light Theme (Default) ==================== */
body.light {
  /* Primary Colors */
  --primary-color: #1f2937;
  --primary-hover: #263243;
  --primary-light: #1f2937;

  /* Background Colors */
  --main-color-bg: #FFFFFF;
  --main-color-bg-light: #F8F9FA;
  --main-color-bg-secondary: #E9ECEF;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(255, 255, 255, 0.95);

  /* Text Colors */
  --main-color-text: #222222;
  --text-primary: #2C3E50;
  --text-secondary: #7F8C8D;
  --text-muted: #95A5A6;
  --text-inverse: #FFFFFF;

  /* Border Colors */
  --border-color: #E1E8ED;
  --border-light: #F0F3F5;
  --border-dark: #CBD5E0;

  /* State Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Interactive Elements */
  --link-color: #3B82F6;
  --link-hover: #2563EB;
  --button-bg: var(--primary-color);
  --button-text: #FFFFFF;
  --button-hover-bg: var(--primary-hover);

  /* Theme Accent Color - Purple for driveu7home */
  --theme-color-accent: #9933ff;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Game Card Specific */
  --game-card-bg: #FFFFFF;
  --game-card-hover-bg: #F8F9FA;
  --game-card-border: #E1E8ED;
  --game-tag-bg: #F0F3F5;
  --game-tag-text: #4B5563;

  /* Header & Navigation */
  --header-bg: #FFFFFF;
  --header-text: #222222;
  --nav-link-color: #4B5563;
  --nav-link-hover: var(--primary-color);
  --sidebar-bg: #FFFFFF;

  /* Search */
  --search-bg: #F8F9FA;
  --search-border: #E1E8ED;
  --search-text: #222222;
  --search-placeholder: #95A5A6;
}

/* ==================== Dark Theme ==================== */
body.dark {
  /* Primary Colors - Slightly lighter for better dark mode contrast */
  --primary-color: #1f2937;
  --primary-hover: #263243;
  --primary-light: #3E2723;

  /* Background Colors */
  --main-color-bg: #7a97d0;
  --main-color-bg-light: #054bc2;
  --main-color-bg-secondary: #374151;
  --bg-card: #2963c5;
  --bg-overlay: rgba(26, 32, 44, 0.95);

  /* Text Colors */
  --main-color-text: #E2E8F0;
  --text-primary: #F7FAFC;
  --text-secondary: #CBD5E0;
  --text-muted: #A0AEC0;
  --text-inverse: #1A202C;

  /* Border Colors */
  --border-color: #4A5568;
  --border-light: #374151;
  --border-dark: #718096;

  /* State Colors - Adjusted for dark mode visibility */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-info: #60A5FA;

  /* Interactive Elements */
  --link-color: #60A5FA;
  --link-hover: #93C5FD;
  --button-bg: var(--primary-color);
  --button-text: #1A202C;
  --button-hover-bg: var(--primary-hover);

  /* Theme Accent Color - Purple for driveu7home */
  --theme-color-accent: #9933ff;

  /* Shadows - Lighter shadows for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

  /* Game Card Specific */
  --game-card-bg: #2963c5;
  --game-card-hover-bg: #374151;
  --game-card-border: #4A5568;
  --game-tag-bg: #374151;
  --game-tag-text: #CBD5E0;

  /* Header & Navigation */
  --header-bg: #2D3748;
  --header-text: #E2E8F0;
  --nav-link-color: #CBD5E0;
  --nav-link-hover: var(--primary-color);
  --sidebar-bg: #2D3748;

  /* Search */
  --search-bg: #374151;
  --search-border: #4A5568;
  --search-text: #E2E8F0;
  --search-placeholder: #9CA3AF;
}

/* ==================== Theme Transition ==================== */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for theme-aware elements */
.header,
.nav-side,
.game-card,
.search-form,
button,
a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==================== Markdown Table Styling ==================== */

/* Light Theme Table Styles */
body.light table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.light table th {
  background-color: #F0F3F5;
  color: var(--text-primary);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-right: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-dark);
}

body.light table th:last-child {
  border-right: none;
}

body.light table td {
  padding: 12px 16px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

body.light table td:last-child {
  border-right: none;
}

body.light table tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}

body.light table tbody tr:nth-child(even) {
  background-color: #F8F9FA;
}

body.light table tbody tr:hover {
  background-color: #EFF4F8;
  transition: background-color 0.2s ease;
}

body.light table tbody tr:last-child td {
  border-bottom: none;
}

/* Dark Theme Table Styles */
body.dark table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.dark table th {
  background-color: #374151;
  color: var(--text-primary);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-right: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-dark);
}

body.dark table th:last-child {
  border-right: none;
}

body.dark table td {
  padding: 12px 16px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

body.dark table td:last-child {
  border-right: none;
}

body.dark table tbody tr:nth-child(odd) {
  background-color: #2D3748;
}

body.dark table tbody tr:nth-child(even) {
  background-color: #374151;
}

body.dark table tbody tr:hover {
  background-color: #4A5568;
  transition: background-color 0.2s ease;
}

body.dark table tbody tr:last-child td {
  border-bottom: none;
}

/* ==================== Custom Layout Colors ==================== */
/* Override layout colors for Drive u 7 Home branding */

/* Header background color */
.header {
  background-color: #371c77 !important;
}

/* Main content area background color */
.layout__content {
  background-color: #7600d92e !important;
}

/* Footer background color */
.footer {
  background-color: #371c77 !important;
}

/* Sidebar background color */
.nav-side {
  background-color: #361c76 !important;
}

/* Sidebar category font size */
.nav-side__title {
  font-size: 18px !important;
}

/* Logo max width */
.header__logo {
  max-width: 330px !important;
}

/* Logo image styling */
.header__logo img,
.logo__image {
  max-width: 100%;
  height: auto;
  padding-right: 60px;
}

/* ==================== Custom Scrollbar ==================== */
/* Scrollbar for elements with .scroll class */
.scroll::-webkit-scrollbar {
  display: block;
  width: 16px;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: #9933ff; /* Thumb color - purple accent */
  border-radius: 8px; /* Border matches track */
}

.scroll::-webkit-scrollbar-thumb:hover {
  background-color: #b366ff; /* Lighter purple on hover */
}

/* Main body scrollbar (if visible) */
body::-webkit-scrollbar {
  display: block !important;
  width: 16px;
}

body::-webkit-scrollbar-thumb {
  background-color: #9933ff;
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #b366ff;
}