/* Theme utility classes for card and select using theme variables */
.theme-card {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: var(--border-radius-card) !important;
  border: 1px solid var(--border-color) !important;
  transition: var(--transition-base);
}

.theme-card-header {
  background-color: var(--content-bg) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.theme-card-body {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.theme-select {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.25rem 1.5rem 0.25rem 0 !important;
  transition: var(--transition-base);
}

.theme-select:focus {
  border: none !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.15) !important;
  outline: 1px solid var(--primary-color) !important;
  outline-offset: 1px !important;
}

.theme-select option {
  background-color: var(--content-bg) !important;
  color: var(--text-primary) !important;
}
/* Theme CSS Custom Properties */
/* This file defines all theme variables for easy customization */

:root {
  /* Primary Color Palette */
  --primary-color: #007bff;
  /* RGB values for --primary-color-rgb MUST be manually kept in sync with --primary-color hex value */
  /* #007bff = rgb(0, 123, 255) - update both values when changing primary color */
  --primary-color-rgb: 0, 123, 255;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --secondary-hover: #545b62;
  --danger-color: #dc3545;
  --danger-hover: #c82333;
  --success-color: #28a745;
  --success-hover: #218838;
  --warning-color: #ffc107;
  --warning-hover: #e0a800;
  --info-color: #17a2b8;
  --info-hover: #138496;
  --patreon-color: #FF424D;
  --patreon-hover: #e03040;

  /* Background Colors */
  --body-bg: #f9f9f9;
  --content-bg: #ffffff;
  --card-bg: #ffffff;
  --navbar-bg: #343a40;
  --hover-bg: #f8f9fa;
  
  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-light: #ffffff;
  --text-muted: #868e96;
  
  /* Border Colors */
  --border-color: #eeeeee;
  --border-light: #dee2e6;
  --border-input: #cccccc;
  
  /* Shadow and Effects */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --card-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-card: 8px;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  /** Layout: vertical padding for main content (space below navbar, above footer). Keep consistent. */
  --main-content-padding-y: var(--spacing-lg);
  
  /* Default badge (tags, environments, type, source) — visible on card background in all themes */
  --badge-default-bg: #6c757d;
  --badge-default-text: #ffffff;
  
  /* Input Widths */
  --input-width-sm: 60px;
  --input-width-md: 120px;
  
  /* Typography */
  --font-family-base: Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* Transitions */
  --transition-base: all 0.2s ease-in-out;
  --transition-fast: all 0.15s ease-in-out;
  --transition-slow: all 0.3s ease-in-out;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --body-bg: #1a1a1a;
  --content-bg: #2d2d2d;
  --card-bg: #3a3a3a;
  --navbar-bg: #000000;
  --hover-bg: #404040;
  
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  
  --border-color: #444444;
  --border-light: #555555;
  --border-input: #666666;
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  --card-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  
  --badge-default-bg: #555555;
  --badge-default-text: #ffffff;
}

/* Sandstone Theme Variables */
[data-theme="sandstone"] {
  --primary-color: #8B4513;
  /* RGB values for --primary-color-rgb MUST be manually kept in sync with --primary-color hex value */
  /* #8B4513 = rgb(139, 69, 19) - update both values when changing primary color */
  --primary-color-rgb: 139, 69, 19;
  --primary-hover: #654321;
  --secondary-color: #A0522D;
  --secondary-hover: #8B4513;
  --danger-color: #8B0000;
  --danger-hover: #660000;
  
  --body-bg: #F5E6D3;
  --content-bg: #FFF8DC;
  --card-bg: #FFFACD;
  --navbar-bg: #2F1B14;
  --hover-bg: #F0E68C;
  
  --text-primary: #2F1B14;
  --text-secondary: #5D4037;
  --text-light: #F5E6D3;
  
  --border-color: #D2691E;
  --border-light: #DEB887;
  --border-input: #CD853F;
  
  --card-shadow: 0 2px 15px rgba(139, 69, 19, 0.2);
  
  --badge-default-bg: #8B4513;
  --badge-default-text: #FFF8DC;
}

/* Forest Theme Variables */
[data-theme="forest"] {
  --primary-color: #228B22;
  /* RGB values for --primary-color-rgb MUST be manually kept in sync with --primary-color hex value */
  /* #228B22 = rgb(34, 139, 34) - update both values when changing primary color */
  --primary-color-rgb: 34, 139, 34;
  --primary-hover: #006400;
  --secondary-color: #8FBC8F;
  --secondary-hover: #556B2F;
  --danger-color: #B22222;
  --danger-hover: #8B0000;
  
  --body-bg: #F0F8F0;
  --content-bg: #F5FFFA;
  --card-bg: #FFFFFF;
  --navbar-bg: #2F4F2F;
  --hover-bg: #E0FFE0;
  
  --text-primary: #2F4F2F;
  --text-secondary: #556B2F;
  --text-light: #F0F8F0;
  
  --border-color: #90EE90;
  --border-light: #98FB98;
  --border-input: #8FBC8F;
  
  --card-shadow: 0 2px 15px rgba(34, 139, 34, 0.15);
  
  --badge-default-bg: #556B2F;
  --badge-default-text: #F5FFFA;
}

/* Apply theme to body for easy switching */
body {
  background-color: var(--body-bg);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  transition: var(--transition-base);
}

/* High Contrast Theme Variables */
[data-theme="high-contrast"] {
  --primary-color: #000000;
  --primary-color-rgb: 0, 0, 0;
  --primary-hover: #222222;
  --secondary-color: #ffffff;
  --secondary-hover: #cccccc;
  --danger-color: #ff0000;
  --danger-hover: #cc0000;

  --body-bg: #ffffff;
  --content-bg: #ffffff;
  --card-bg: #ffffff;
  --navbar-bg: #000000;
  --hover-bg: #ffff00;

  --text-primary: #000000;
  --text-secondary: #222222;
  --text-light: #ffffff;
  --text-muted: #333333;

  --border-color: #000000;
  --border-light: #222222;
  --border-input: #000000;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --card-shadow: none;
  
  --badge-default-bg: #000000;
  --badge-default-text: #ffffff;
}
/* Patreon button — uses --patreon-color so it's defined once */
.btn-patreon {
  background-color: var(--patreon-color) !important;
  border-color: var(--patreon-color) !important;
  color: #ffffff !important;
}
.btn-patreon:hover,
.btn-patreon:focus {
  background-color: var(--patreon-hover) !important;
  border-color: var(--patreon-hover) !important;
  color: #ffffff !important;
}

/* Admin stat cards — themed replacements for Bootstrap .bg-primary etc. */
.stat-card-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.stat-card-primary .card-body { color: var(--text-light) !important; }
.stat-card-success { background-color: var(--success-color) !important; border-color: var(--success-color) !important; }
.stat-card-success .card-body { color: var(--text-light) !important; }
.stat-card-info { background-color: var(--info-color) !important; border-color: var(--info-color) !important; }
.stat-card-info .card-body { color: var(--text-light) !important; }
.stat-card-warning { background-color: var(--warning-color) !important; border-color: var(--warning-color) !important; }
.stat-card-warning .card-body { color: #000000 !important; }