/* =====================================================
   THEME SYSTEM - Dark/Light Mode
   ===================================================== */

/* Root CSS Variables */
:root {
  /* Transition speed */
  --theme-transition: 0.3s ease;
}

/* Light Theme (Default) */
:root,
:root.light-theme {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  
  /* Override old dark theme variables */
  --bg-dark: #ffffff;
  --bg-darker: #f8f9fa;
  --card-bg: #ffffff;
  --card-hover: #f8f9fa;
  
  /* Surface Colors */
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fa;
  --surface-elevated: #ffffff;
  
  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  --text-inverse: #ffffff;
  
  /* Border Colors */
  --border-primary: #dee2e6;
  --border-secondary: #e9ecef;
  --border-hover: #ced4da;
  
  /* Accent Colors */
  --accent-primary: #667eea;
  --accent-secondary: #764ba2;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;
  --accent-info: #3b82f6;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  
  /* 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);
  
  /* Card/Container */
  --card-bg: #ffffff;
  --card-border: #e9ecef;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  
  /* Inputs */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-text: #212529;
  --input-placeholder: #6c757d;
  --input-focus-border: #667eea;
  
  /* Navbar */
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --navbar-border: rgba(0, 0, 0, 0.05);
  --navbar-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  
  /* Code Blocks */
  --code-bg: #f8f9fa;
  --code-text: #e83e8c;
  --code-border: #e9ecef;
  
  /* Hover Effects */
  --hover-bg: #f8f9fa;
  --hover-border: #ced4da;
}

/* Dark Theme */
:root.dark-theme {
  /* Background Colors */
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f2e;
  --bg-tertiary: #252b3b;
  
  /* Override old variables for consistency */
  --bg-dark: #0a0e27;
  --bg-darker: #050816;
  --card-bg: rgba(26, 32, 53, 0.8);
  --card-hover: rgba(26, 32, 53, 0.95);
  
  /* Surface Colors */
  --surface-primary: #1a1f2e;
  --surface-secondary: #252b3b;
  --surface-elevated: #2d3548;
  
  /* Text Colors */
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-tertiary: #6c757d;
  --text-inverse: #212529;
  
  /* Border Colors */
  --border-primary: #343a40;
  --border-secondary: #252b3b;
  --border-hover: #495057;
  
  /* Accent Colors (slightly brighter for dark mode) */
  --accent-primary: #7c93f5;
  --accent-secondary: #8b5fc7;
  --accent-success: #34d399;
  --accent-warning: #fbbf24;
  --accent-error: #f87171;
  --accent-info: #60a5fa;
  
  /* Gradients (brighter for dark mode) */
  --gradient-primary: linear-gradient(135deg, #7c93f5 0%, #8b5fc7 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  
  /* Shadows (darker 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);
  
  /* Card/Container */
  --card-bg: #1a1f2e;
  --card-border: #343a40;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  
  /* Inputs */
  --input-bg: #252b3b;
  --input-border: #343a40;
  --input-text: #e9ecef;
  --input-placeholder: #6c757d;
  --input-focus-border: #7c93f5;
  
  /* Navbar */
  --navbar-bg: rgba(26, 31, 46, 0.95);
  --navbar-border: rgba(255, 255, 255, 0.05);
  --navbar-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  
  /* Code Blocks */
  --code-bg: #252b3b;
  --code-text: #f687b3;
  --code-border: #343a40;
  
  /* Hover Effects */
  --hover-bg: #252b3b;
  --hover-border: #495057;
}

/* =====================================================
   SMOOTH TRANSITIONS
   ===================================================== */

.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color var(--theme-transition),
              border-color var(--theme-transition),
              color var(--theme-transition),
              box-shadow var(--theme-transition) !important;
  transition-delay: 0s !important;
}

/* =====================================================
   APPLY THEME TO ELEMENTS
   ===================================================== */

/* Body */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Override animated background for light theme */
:root.light-theme body::before {
  background: 
    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(240, 147, 251, 0.02) 0%, transparent 50%);
}

/* Keep dark theme animated background */
:root.dark-theme body::before {
  background: 
    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(240, 147, 251, 0.05) 0%, transparent 50%);
}

/* Navbar */
.navbar {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border);
  box-shadow: var(--navbar-shadow);
}

/* Better navbar for light theme */
:root.light-theme .navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Better navbar for dark theme - restore original look */
:root.dark-theme .navbar {
  background: rgba(10, 14, 39, 0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

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

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

/* Cards */
.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
}

.card-header,
.card-footer {
  background-color: var(--surface-secondary);
  border-color: var(--border-primary);
}

/* Better card styling for themes */
:root.light-theme .card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:root.dark-theme .card {
  background: rgba(26, 32, 53, 0.8);
  border: 1px solid rgba(102, 126, 234, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Buttons */
.btn {
  transition: all 0.2s ease;
}

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

.btn-outline-primary:hover {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}

/* Inputs */
.form-control,
.form-select {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.form-control::placeholder {
  color: var(--input-placeholder);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  border-color: var(--input-focus-border);
  color: var(--input-text);
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Tables */
.table {
  color: var(--text-primary);
}

.table > :not(caption) > * > * {
  background-color: var(--surface-primary);
  border-bottom-color: var(--border-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-secondary);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--hover-bg);
}

/* Modals */
.modal-content {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.modal-header,
.modal-footer {
  border-color: var(--border-primary);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--surface-elevated);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

.dropdown-divider {
  border-color: var(--border-primary);
}

/* Alerts */
.alert {
  border-color: var(--border-primary);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--accent-success);
  color: var(--text-primary);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--accent-warning);
  color: var(--text-primary);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--accent-error);
  color: var(--text-primary);
}

.alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: var(--accent-info);
  color: var(--text-primary);
}

/* Badges */
.badge {
  color: var(--text-inverse);
}

/* Code */
code {
  background-color: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

pre {
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--text-primary);
}

/* Links */
a {
  color: var(--accent-primary);
}

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

/* Borders */
.border {
  border-color: var(--border-primary) !important;
}

.border-top {
  border-top-color: var(--border-primary) !important;
}

.border-bottom {
  border-bottom-color: var(--border-primary) !important;
}

/* Theme Toggle Button */
#theme-toggle {
  background: transparent;
  border: 2px solid var(--border-primary);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

#theme-toggle:hover {
  border-color: var(--accent-primary);
  background-color: rgba(102, 126, 234, 0.1);
  transform: rotate(15deg);
}

#theme-toggle:active {
  transform: rotate(15deg) scale(0.95);
}

#theme-toggle i {
  width: 20px;
  height: 20px;
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
  /* Force light theme for printing */
  :root {
    --bg-primary: #ffffff;
    --text-primary: #000000;
    --card-bg: #ffffff;
  }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .theme-transitioning,
  .theme-transitioning *,
  .theme-transitioning *::before,
  .theme-transitioning *::after {
    transition: none !important;
  }
  
  #theme-toggle {
    transition: none !important;
  }
  
  #theme-toggle:hover {
    transform: none !important;
  }
}

/* Focus visible for keyboard navigation */
#theme-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* =====================================================
   ADDITIONAL ELEMENT THEMING
   ===================================================== */

/* Main content area */
main,
.main-content,
.container {
  color: var(--text-primary);
}

/* Hero sections */
.hero,
.hero-section,
.jumbotron {
  color: var(--text-primary);
}

/* Feature cards/boxes */
.feature-card,
.feature-box,
.info-box {
  background-color: var(--card-bg);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* Sections */
section {
  color: var(--text-primary);
}

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

/* Paragraphs in light theme should be darker */
:root.light-theme p {
  color: #4a5568;
}

:root.dark-theme p {
  color: #a0aec0;
}

/* List items */
li {
  color: var(--text-primary);
}

/* Footer */
footer {
  background-color: var(--surface-secondary);
  border-top: 1px solid var(--border-primary);
  color: var(--text-primary);
}

:root.light-theme footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid #e9ecef !important;
}

:root.dark-theme footer {
  background-color: rgba(10, 14, 39, 0.95) !important;
  border-top: 1px solid rgba(102, 126, 234, 0.1) !important;
}

/* Executor/Script cards (common pattern) */
.executor-card,
.script-card,
.tool-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.executor-card:hover,
.script-card:hover,
.tool-card:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-hover);
}

/* Grid containers */
.grid,
.card-grid,
.executor-grid,
.script-grid {
  color: var(--text-primary);
}

/* Stats/Info boxes */
.stats-box,
.info-card,
.stat-card {
  background-color: var(--card-bg);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

/* Search bars */
.search-bar,
.search-input,
input[type="search"] {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

/* Badges and tags */
.badge-secondary,
.tag-secondary {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

/* Text utilities */
.text-muted {
  color: var(--text-tertiary) !important;
}

/* Background utilities */
.bg-light {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

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

/* Light theme specific text colors */
:root.light-theme .text-secondary {
  color: #718096 !important;
}

:root.light-theme .text-muted {
  color: #a0aec0 !important;
}

/* Dark theme specific text colors */
:root.dark-theme .text-secondary {
  color: #a0aec0 !important;
}

:root.dark-theme .text-muted {
  color: #718096 !important;
}

/* =====================================================
   TOOLS PAGE - Tab Buttons & Inputs
   ===================================================== */

/* Tool tab buttons */
.tool-tab {
  background: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

:root.light-theme .tool-tab {
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  color: #4a5568 !important;
}

:root.dark-theme .tool-tab {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.tool-tab:hover {
  background: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

:root.light-theme .tool-tab:hover {
  background: #e9ecef !important;
  color: #212529 !important;
}

:root.dark-theme .tool-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* Active tab stays gradient in both themes */
.tool-tab.active {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Tool inputs, selects, textareas */
.tool-input,
.tool-select,
.tool-textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

:root.light-theme .tool-input,
:root.light-theme .tool-select,
:root.light-theme .tool-textarea {
  background: #ffffff !important;
  border: 2px solid #e9ecef !important;
  color: #212529 !important;
}

:root.dark-theme .tool-input,
:root.dark-theme .tool-select,
:root.dark-theme .tool-textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus {
  border-color: #8b5cf6 !important;
  background: var(--input-bg) !important;
}

:root.light-theme .tool-input:focus,
:root.light-theme .tool-select:focus,
:root.light-theme .tool-textarea:focus {
  background: #ffffff !important;
}

:root.dark-theme .tool-input:focus,
:root.dark-theme .tool-select:focus,
:root.dark-theme .tool-textarea:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* =====================================================
   BYPASS PAGE - Userscript Section
   ===================================================== */

/* Userscripts section container */
.userscripts-section {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}

:root.light-theme .userscripts-section {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
}

:root.dark-theme .userscripts-section {
  background: rgba(30, 30, 46, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Userscripts header */
.userscripts-header {
  border-bottom-color: var(--border-primary) !important;
}

:root.light-theme .userscripts-header {
  border-bottom: 1px solid #e9ecef !important;
}

:root.dark-theme .userscripts-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.userscripts-header h3 {
  color: var(--text-primary) !important;
}

.userscripts-header p {
  color: var(--text-secondary) !important;
}

:root.dark-theme .userscripts-header p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Userscript cards */
.userscript-card {
  background: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
}

:root.light-theme .userscript-card {
  background: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
}

:root.dark-theme .userscript-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.userscript-card:hover {
  border-color: rgba(102, 126, 234, 0.3) !important;
}

.userscript-header h4 {
  color: var(--text-primary) !important;
}

.userscript-description {
  color: var(--text-secondary) !important;
}

:root.dark-theme .userscript-description {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Userscript features list */
.userscript-features li {
  color: var(--text-primary) !important;
}

:root.dark-theme .userscript-features li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.userscript-info {
  color: var(--text-tertiary) !important;
}

:root.dark-theme .userscript-info {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Info items in userscript section */
.info-item {
  color: var(--text-primary) !important;
}

:root.dark-theme .info-item {
  color: rgba(255, 255, 255, 0.8) !important;
}

.info-item strong {
  color: var(--text-primary) !important;
}

:root.dark-theme .info-item strong {
  color: white !important;
}

/* Feature items */
.feature-item {
  color: var(--text-primary) !important;
}

:root.dark-theme .feature-item {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* =====================================================
   FORM INPUTS - All Pages
   ===================================================== */

/* Generic form-input class used across pages */
.form-input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

:root.light-theme .form-input {
  background: #ffffff !important;
  border: 2px solid #e9ecef !important;
  color: #212529 !important;
}

:root.dark-theme .form-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.form-input::placeholder {
  color: var(--input-placeholder) !important;
}

:root.dark-theme .form-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.form-input:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--input-focus-border) !important;
  color: var(--input-text) !important;
}

:root.light-theme .form-input:focus {
  background: #ffffff !important;
}

:root.dark-theme .form-input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* =====================================================
   MOBILE SIDEBAR / NAV MENU
   ===================================================== */

/* Mobile navigation menu */
.nav-menu {
  background-color: var(--surface-primary) !important;
  border-color: var(--border-primary) !important;
}

:root.light-theme .nav-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

:root.dark-theme .nav-menu {
  background: rgba(10, 14, 39, 0.98) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Nav menu links */
.nav-menu .nav-link {
  color: var(--text-primary) !important;
}

.nav-menu .nav-link:hover {
  background-color: var(--hover-bg) !important;
  color: var(--accent-primary) !important;
}

:root.light-theme .nav-menu .nav-link:hover {
  background-color: #f8f9fa !important;
}

:root.dark-theme .nav-menu .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* =====================================================
   SCRIPTS PAGE - Search Container
   ===================================================== */

/* Search container on scripts page */
.search-container {
  background-color: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
}

:root.light-theme .search-container {
  background: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
}

:root.dark-theme .search-container {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Search input on scripts page */
.search-container .search-input,
.search-input {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

:root.light-theme .search-container .search-input,
:root.light-theme .search-input {
  background: #ffffff !important;
  border: 2px solid #e9ecef !important;
  color: #212529 !important;
}

:root.dark-theme .search-container .search-input,
:root.dark-theme .search-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.search-input::placeholder {
  color: var(--input-placeholder) !important;
}

:root.dark-theme .search-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.search-input:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--input-focus-border) !important;
}

:root.light-theme .search-input:focus {
  background: #ffffff !important;
}

:root.dark-theme .search-input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Search container SVG icon */
.search-container svg {
  color: var(--text-secondary) !important;
}

:root.dark-theme .search-container svg {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Scripts search form */
.scripts-search {
  background-color: var(--surface-primary) !important;
}

/* Provider buttons on scripts page */
.provider-btn {
  background-color: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

:root.light-theme .provider-btn {
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  color: #4a5568 !important;
}

:root.dark-theme .provider-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.provider-btn:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--accent-primary) !important;
}

:root.light-theme .provider-btn:hover {
  background: #e9ecef !important;
}

:root.dark-theme .provider-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.provider-btn.active {
  background: var(--gradient-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
}
