/* =============================================================================
 * NeuroGen Processor - Main CSS Styles
 * Enhanced with better organization, variable usage, and optimized selectors
 * =============================================================================
 */

/* -----------------------------------------------------------------------------
 * 1. CSS VARIABLES - Define all theme colors and styles in one place
 * -----------------------------------------------------------------------------
 */
 :root {
  /* Light theme variables */
  --light-bg-primary: #ffffff;
  --light-bg-secondary: #f8f9fa;
  --light-bg-card: #ffffff;
  --light-bg-input: #ffffff;
  --light-border-color: #dee2e6;
  --light-text-primary: #212529;
  --light-text-secondary: #6c757d;
  
  /* Dark theme variables */
  --dark-bg-primary: #121212;
  --dark-bg-secondary: #1c3156;  /* Header background */
  --dark-bg-card: #2d3238;       /* Card background */
  --dark-bg-input: #343a40;      /* Form input background */
  --dark-border-color: #495057;  /* Border color */
  --dark-text-primary: #f8f9fa;  /* Main text color */
  --dark-text-secondary: #adb5bd; /* Secondary text color */
  --dark-muted-text: #a0aec0;     /* Muted text color */
  
  /* Component-specific dark theme colors */
  --dark-alert-info-bg: #1f4f6e;
  --dark-alert-info-border: #216d93;
  --dark-alert-success-bg: #1e5631;
  --dark-alert-success-border: #2a7342;
  --dark-alert-danger-bg: #742029;
  --dark-alert-danger-border: #972b35;
  --dark-alert-warning-bg: #7a5a10;
  --dark-alert-warning-border: #9d7213;
  
  /* Code display */
  --dark-code-bg: #2a2a2a;
  --dark-code-color: #e0e0e0;
  
  /* Bootstrap color overrides */
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;
  
  /* Layout variables */
  --border-radius: 0.5rem;
  --transition-speed: 0.3s;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --dark-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* -----------------------------------------------------------------------------
 * 2. BASE STYLES
 * -----------------------------------------------------------------------------
 */
body {
  font-family: var(--font-family);
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  background-color: var(--light-bg-secondary);
  color: var(--light-text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  margin-top: auto;
  padding: 1.5rem 0;
}

/* -----------------------------------------------------------------------------
 * 3. DARK MODE BASE THEME
 * -----------------------------------------------------------------------------
 */
/* Apply dark theme to html element */
html[data-theme="dark"],
html[data-bs-theme="dark"] {
  background-color: var(--dark-bg-primary) !important;
}

/* Apply dark theme to body element */
[data-theme="dark"],
[data-bs-theme="dark"] {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

[data-theme="dark"] body,
[data-bs-theme="dark"] body {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-muted {
  color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--dark-bg-input) !important;
}

[data-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark {
  color: var(--dark-text-primary) !important;
}

/* -----------------------------------------------------------------------------
 * 4. HEADER & NAVIGATION
 * -----------------------------------------------------------------------------
 */
/* Enhanced Header with Dark Mode Support */
header {
  background: linear-gradient(135deg, var(--primary-color) 0%, rgba(13, 110, 253, 0.9) 100%);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-speed) ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Add subtle animation to header background */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

header:hover::before {
  left: 100%;
}

/* Navbar Brand Styling */
.navbar-brand {
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
  transition: transform var(--transition-speed) ease;
}

.navbar-brand:hover {
  transform: scale(1.02);
}

.brand-text {
  font-family: var(--font-family);
  letter-spacing: -0.5px;
}

/* Connection Status Toggle Button */
.connection-status-container {
  display: flex;
  align-items: center;
}

.connection-toggle-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  min-width: 90px;
  justify-content: flex-start;
}

.connection-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

.connection-indicator {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc3545; /* Red for disconnected */
  transition: all var(--transition-speed) ease;
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
}

/* Connected State */
.connection-toggle-btn.connected {
  border-color: rgba(40, 167, 69, 0.6);
  background: rgba(40, 167, 69, 0.1);
}

.connection-toggle-btn.connected .connection-dot {
  background: #28a745; /* Green for connected */
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
  animation: pulse-connected 2s infinite;
}

.connection-toggle-btn.connected:hover {
  background: rgba(40, 167, 69, 0.2);
}

/* Connecting State */
.connection-toggle-btn.connecting {
  border-color: rgba(255, 193, 7, 0.6);
  background: rgba(255, 193, 7, 0.1);
}

.connection-toggle-btn.connecting .connection-dot {
  background: #ffc107; /* Yellow for connecting */
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.7);
  animation: pulse-connecting 1s infinite;
}

/* Pulse Animations */
@keyframes pulse-connected {
  0% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
  }
}

@keyframes pulse-connecting {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* System Buttons (Login/Signup) Styling */
.btn-system {
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 16px;
  transition: all var(--transition-speed) ease;
  border-width: 1px;
  font-size: 0.875rem;
}

.btn-system:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-system:active {
  transform: translateY(0);
}

/* Override Bootstrap outline-light for better system integration */
.btn-outline-light.btn-system {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.btn-outline-light.btn-system:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  color: white;
}

.btn-light.btn-system {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
}

.btn-light.btn-system:hover {
  background-color: white;
  border-color: white;
  color: var(--primary-color);
}

/* Enhanced Header Container */
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 70px;
}

/* Logo and Brand Styling */
.header-container h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  color: white;
  display: flex;
  align-items: center;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.header-container h1 img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform var(--transition-speed) ease;
}

.header-container h1:hover img {
  transform: scale(1.05);
}

/* Dark Mode Header Styles */
[data-theme="dark"] header,
[data-bs-theme="dark"] header {
  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, rgba(28, 49, 86, 0.95) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .header-container,
[data-bs-theme="dark"] .header-container {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .header-container h1,
[data-bs-theme="dark"] .header-container h1 {
  color: var(--dark-text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Enhanced Toggle Buttons Styling */
.toggle-btn {
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all var(--transition-speed) ease;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.toggle-btn:active {
  transform: translateY(0);
}

/* Socket Status Indicator Enhancement */
.socket-status-indicator {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  backdrop-filter: blur(10px);
  transition: all var(--transition-speed) ease;
}

/* Dark Mode Enhancements */
[data-theme="dark"] .toggle-btn,
[data-bs-theme="dark"] .toggle-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .toggle-btn:hover,
[data-bs-theme="dark"] .toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .socket-status-indicator,
[data-bs-theme="dark"] .socket-status-indicator {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--dark-text-primary);
}

/* Enhanced Navbar Spacing */
.navbar-nav .nav-link {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin: 0 0.25rem;
  transition: all var(--transition-speed) ease;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

[data-theme="dark"] .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
}

/* Connection Status Button Legacy Support */
[data-theme="dark"] .connection-toggle-btn,
[data-bs-theme="dark"] .connection-toggle-btn {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--dark-text-primary);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .connection-toggle-btn:hover,
[data-bs-theme="dark"] .connection-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .connection-toggle-btn.connected,
[data-bs-theme="dark"] .connection-toggle-btn.connected {
  border-color: rgba(40, 167, 69, 0.5);
  background: rgba(40, 167, 69, 0.08);
}

[data-theme="dark"] .connection-toggle-btn.connecting,
[data-bs-theme="dark"] .connection-toggle-btn.connecting {
  border-color: rgba(255, 193, 7, 0.5);
  background: rgba(255, 193, 7, 0.08);
}

/* Dark Mode System Buttons */
[data-theme="dark"] .btn-outline-light.btn-system,
[data-bs-theme="dark"] .btn-outline-light.btn-system {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .btn-outline-light.btn-system:hover,
[data-bs-theme="dark"] .btn-outline-light.btn-system:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .btn-light.btn-system,
[data-bs-theme="dark"] .btn-light.btn-system {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .btn-light.btn-system:hover,
[data-bs-theme="dark"] .btn-light.btn-system:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--dark-text-primary);
}

/* =============================================================================
 * 4. HEADER & NAVBAR ENHANCEMENTS
 * =============================================================================
 */

/* Enhanced Header with Gradient Background */
header {
  background: linear-gradient(135deg, var(--primary-color) 0%, rgba(13, 110, 253, 0.9) 100%);
  transition: all var(--transition-speed) ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

header:hover::before {
  opacity: 1;
}

/* Dark Mode Header */
[data-theme="dark"] header,
[data-bs-theme="dark"] header {
  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, rgba(28, 49, 86, 0.95) 100%);
  box-shadow: var(--dark-shadow);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Enhanced Navbar Brand - Clean and Professional */
.navbar-brand {
  padding: 0.75rem 1.5rem;
  transition: all var(--transition-speed) ease;
  position: relative;
  margin-right: 0 !important;
}

.navbar-brand:hover {
  transform: scale(1.05);
  text-decoration: none;
}

/* Mobile centering for logo */
@media (max-width: 991.98px) {
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  
  .navbar-brand:hover {
    transform: translateX(-50%) scale(1.05);
  }
}

.navbar-brand .brand-text {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.5px;
  transition: all var(--transition-speed) ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

[data-theme="dark"] .navbar-brand .brand-text,
[data-bs-theme="dark"] .navbar-brand .brand-text {
  color: var(--dark-text-primary) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Responsive Header */
@media (max-width: 768px) {
  header {
    min-height: 60px;
  }
  
  .navbar-brand .brand-text {
    font-size: 1.5rem !important;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 576px) {
  .navbar-brand .brand-text {
    font-size: 1.3rem !important;
  }
}

/* Toggle Buttons */
.toggle-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform var(--transition-speed) ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.toggle-btn:hover {
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.1);
}

.toggle-btn.active {
  color: var(--warning-color);
}

/* Navbar Layout Improvements */
.navbar-nav {
  align-items: center;
}

.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border-radius: 6px;
  transition: all var(--transition-speed) ease;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.navbar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

/* Improved Navbar Container Layout */
.navbar-expand-lg .navbar-nav {
  margin-left: 2rem; /* Better spacing from brand */
}

@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-nav {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* Tabs Navigation */
.nav-tabs {
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--light-border-color);
}

.nav-tabs .nav-link {
  padding: 0.75rem 1.25rem;
  border-radius: 8px 8px 0 0;
  transition: all var(--transition-speed) ease;
  font-weight: 500;
  margin-right: 0.25rem;
  border: 1px solid transparent;
  background: transparent;
}

.nav-tabs .nav-link:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.03);
  border-color: var(--light-border-color);
}

.nav-tabs .nav-link.active {
  font-weight: 600;
  background-color: white;
  border-color: var(--light-border-color);
  border-bottom-color: white;
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .nav-tabs,
[data-bs-theme="dark"] .nav-tabs {
  border-color: var(--dark-border-color);
}

[data-theme="dark"] .nav-tabs .nav-link,
[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--dark-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-color);
  border-bottom-color: var(--dark-bg-card);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover:not(.active),
[data-bs-theme="dark"] .nav-tabs .nav-link:hover:not(.active) {
  border-color: var(--dark-border-color);
  background-color: rgba(255, 255, 255, 0.05);
}

.tab-pane {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.tab-pane.show {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
 * 5. CARDS & CONTAINERS - Modern Facebook-like Design
 * -----------------------------------------------------------------------------
 */
.custom-card, .card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-speed) ease;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: white;
}

.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Main container improvements */
.container {
  max-width: 1200px;
}

/* Card body spacing */
.card-body {
  padding: 1.5rem;
}

/* Cleaner card headers */
.card-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1rem 1.5rem;
  font-weight: 600;
}

[data-theme="dark"] .card,
[data-theme="dark"] .custom-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .custom-card {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-color);
  box-shadow: var(--dark-shadow);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  border-color: var(--dark-border-color);
  background-color: rgba(0, 0, 0, 0.15);
}

/* Container Transitions */
.transition-container {
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* -----------------------------------------------------------------------------
 * 6. FORM ELEMENTS
 * -----------------------------------------------------------------------------
 */
.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-control,
.form-select {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--dark-bg-input);
  border-color: var(--dark-border-color);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--dark-bg-input);
  border-color: #6c757d;
  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.25);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .form-text,
[data-bs-theme="dark"] .form-text {
  color: var(--dark-text-secondary);
}

/* Input Groups */
.input-group > *:not(:first-child) {
  margin-left: -1px;
}

.input-group > *:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > *:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Form Validation */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  background-image: none;
  padding-right: 0.75rem;
}

.input-group.has-validation .invalid-feedback {
  position: absolute;
  width: auto;
  margin-top: calc(1.5em + 0.75rem);
}

/* Directory Status Icons */
.dir-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.dir-status.exists {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success);
}

.dir-status.not-exists {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning);
}

.dir-status.error {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

[data-theme="dark"] .dir-status.exists,
[data-bs-theme="dark"] .dir-status.exists {
  background-color: rgba(25, 135, 84, 0.2);
}

[data-theme="dark"] .dir-status.not-exists,
[data-bs-theme="dark"] .dir-status.not-exists {
  background-color: rgba(255, 193, 7, 0.2);
}

[data-theme="dark"] .dir-status.error,
[data-bs-theme="dark"] .dir-status.error {
  background-color: rgba(220, 53, 69, 0.2);
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed #ced4da;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  margin: 1rem 0;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
}

.drop-zone:hover {
  border-color: var(--secondary-color);
  background-color: rgba(0, 0, 0, 0.03);
}

.drop-zone.drag-active {
  border-color: var(--primary-color);
  background-color: rgba(13, 110, 253, 0.1);
}

[data-theme="dark"] .drop-zone,
[data-bs-theme="dark"] .drop-zone {
  border-color: #495057;
}

[data-theme="dark"] .drop-zone:hover,
[data-bs-theme="dark"] .drop-zone:hover {
  border-color: #adb5bd;
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .drop-zone.drag-active,
[data-bs-theme="dark"] .drop-zone.drag-active {
  border-color: var(--primary-color);
  background-color: rgba(13, 110, 253, 0.2);
}

/* -----------------------------------------------------------------------------
 * 7. BUTTONS
 * -----------------------------------------------------------------------------
 */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all var(--transition-speed) ease;
  padding: 0.5rem 1rem;
}

.btn-primary, .btn-success {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-primary:hover, 
.btn-success:hover, 
.btn-danger:hover, 
.btn-warning:hover, 
.btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #6c757d;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #6c757d;
  color: var(--dark-text-primary);
}

.btn-highlight {
  animation: pulse-animation 1s ease-in-out 2;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
  }
}

/* Fix for close buttons in dark mode */
[data-theme="dark"] .btn-close,
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* -----------------------------------------------------------------------------
 * 8. ALERTS & TOASTS
 * -----------------------------------------------------------------------------
 */
/* Toasts */
.toast-container {
  z-index: 9999;
}

[data-theme="dark"] .toast,
[data-bs-theme="dark"] .toast {
  background-color: transparent !important;
  border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .toast-header,
[data-bs-theme="dark"] .toast-header {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-bottom-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .toast-body,
[data-bs-theme="dark"] .toast-body {
  background-color: var(--dark-bg-input) !important;
  color: var(--dark-text-primary) !important;
}

/* Alerts */
[data-theme="dark"] .alert-info,
[data-bs-theme="dark"] .alert-info {
  background-color: var(--dark-alert-info-bg);
  border-color: var(--dark-alert-info-border);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-success {
  background-color: var(--dark-alert-success-bg);
  border-color: var(--dark-alert-success-border);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-danger {
  background-color: var(--dark-alert-danger-bg);
  border-color: var(--dark-alert-danger-border);
  color: var(--dark-text-primary);
}

[data-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-warning {
  background-color: var(--dark-alert-warning-bg);
  border-color: var(--dark-alert-warning-border);
  color: var(--dark-text-primary);
}

/* Path info styling */
#path-info.success .alert {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success);
}

#path-info.warning .alert {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning);
}

#path-info.error .alert {
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger);
}

/* -----------------------------------------------------------------------------
 * 9. PROGRESS BARS
 * -----------------------------------------------------------------------------
 */
.progress {
  height: 25px;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #e9ecef;
  margin-bottom: 1rem;
}



.progress-bar {
  transition: width 0.5s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
}

.completed-animation {
  transition: all 0.5s ease-in-out;
  animation: pulse 1.5s ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* -----------------------------------------------------------------------------
 * 10. TABLES
 * -----------------------------------------------------------------------------
 */
[data-theme="dark"] .table,
[data-bs-theme="dark"] .table {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--dark-bg-input);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  border-color: var(--dark-border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.15);
}

/* History Table */
#history-table {
  border-collapse: separate;
  border-spacing: 0;
}

#history-table thead th {
  background-color: #f8f9fa;
  border-bottom-width: 2px;
  position: sticky;
  top: 0;
  z-index: 10;
}

[data-theme="dark"] #history-table thead th,
[data-bs-theme="dark"] #history-table thead th {
  background-color: #343a40;
  color: #f8f9fa;
}

#history-table tbody tr {
  transition: all 0.2s ease;
  animation: fadeIn 0.3s ease forwards;
}

#history-table tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

[data-theme="dark"] #history-table tbody tr:hover,
[data-bs-theme="dark"] #history-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Empty state styling */
.history-empty-row td {
  color: #6c757d;
  font-style: italic;
}

/* Task type badge styling */
#history-table .badge {
  padding: 0.35em 0.5em;
  font-size: 75%;
}

/* Improve button hover state */
#history-table .btn-group .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Task details */
#task-details-content {
  max-height: 70vh;
  overflow-y: auto;
}

#task-details-content .border {
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

#task-details-content .border:hover {
  background-color: rgba(0, 123, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

[data-theme="dark"] #task-details-content .border:hover,
[data-bs-theme="dark"] #task-details-content .border:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* List Items */
.list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
}

.list-group-item .badge {
  min-width: 70px;
  text-align: center;
}

[data-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-color);
  color: var(--dark-text-primary);
}

/* Recent Tasks */
.recent-task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background-color var(--transition-speed) ease;
}

.recent-task-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .recent-task-item,
[data-bs-theme="dark"] .recent-task-item {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .recent-task-item:hover,
[data-bs-theme="dark"] .recent-task-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------------------------------------------
 * 11. PDF DOWNLOAD & VIEWER
 * -----------------------------------------------------------------------------
 */
/* PDF Download Item Styling */
.pdf-download-item {
  padding: 10px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdf-download-item:hover {
  background-color: var(--bs-gray-100);
}

[data-theme="dark"] .pdf-download-item:hover,
[data-bs-theme="dark"] .pdf-download-item:hover {
  background-color: var(--bs-gray-700);
}

/* Status-specific styling */
.pdf-download-item[data-status="downloading"] {
  border-left-color: var(--bs-info);
}

.pdf-download-item[data-status="success"] {
  border-left-color: var(--bs-success);
}

.pdf-download-item[data-status="error"] {
  border-left-color: var(--bs-danger);
}

/* PDF download progress bar */
.pdf-download-item .progress {
  height: 6px;
  transition: all 0.5s ease;
  margin-top: 4px;
}

/* PDF item title with truncation */
.pdf-item-title {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  padding-left: 20px;
}

.pdf-item-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ff4136' d='M320 464C328.8 464 336 456.8 336 448V416H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V416H48V448C48 456.8 55.16 464 64 464H320zM256 160C238.3 160 224 145.7 224 128V48H64C55.16 48 48 55.16 48 64V192H0V64C0 28.65 28.65 0 64 0H229.5C246.5 0 262.7 6.743 274.7 18.75L365.3 109.3C377.3 121.3 384 137.5 384 154.5V192H336V160H256zM88 224C88 202.3 105.5 184 128 184H256C277.7 184 296 202.3 296 224V336C296 357.7 277.7 376 256 376H128C106.3 376 88 357.7 88 336V224zM144 208V240H240V208H144zM240 336V272H144V336H240z'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/* Action buttons styling */
.pdf-actions {
  display: flex;
  gap: 5px;
}

.pdf-actions .btn {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* PDF Viewer container */
.pdf-viewer-container {
  background-color: var(--bs-gray-200);
  border-radius: 0.25rem;
  height: 75vh;
  overflow: auto;
}

[data-theme="dark"] .pdf-viewer-container,
[data-bs-theme="dark"] .pdf-viewer-container {
  background-color: var(--bs-gray-700);
}

/* PDF Page rendering */
.pdf-page {
  display: block;
  margin: 1rem auto;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .pdf-page,
[data-bs-theme="dark"] .pdf-page {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Navigation controls */
.pdf-nav-controls {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid #ddd;
  padding: 8px 16px;
}

[data-theme="dark"] .pdf-nav-controls,
[data-bs-theme="dark"] .pdf-nav-controls {
  background-color: var(--bs-gray-700);
  border-bottom-color: var(--bs-gray-600);
}

/* PDF info section styling */
#pdf-info-section {
  border-left: 4px solid var(--bs-info);
}

/* PDF downloads progress section */
#pdf-download-progress {
  transition: all 0.3s ease;
  border-left: 4px solid var(--bs-info);
}

/* -----------------------------------------------------------------------------
 * 12. MODALS
 * -----------------------------------------------------------------------------
 */
[data-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-content {
  background-color: var(--dark-bg-card);
  border-color: var(--dark-border-color);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--dark-border-color);
}

/* -----------------------------------------------------------------------------
 * 13. CODE & PRE ELEMENTS
 * -----------------------------------------------------------------------------
 */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code {
  background-color: var(--dark-code-bg);
  color: var(--dark-code-color);
}

/* -----------------------------------------------------------------------------
 * 14. HELP MODE
 * -----------------------------------------------------------------------------
 */
.help-mode * {
  cursor: help !important;
}

.help-mode button.toggle-btn {
  cursor: pointer !important;
}

.help-mode .help-target {
  position: relative;
  outline: 2px dashed var(--bs-primary);
}

.help-tooltip {
  position: absolute;
  z-index: 1050;
  background-color: var(--bs-dark);
  color: var(--bs-white);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  max-width: 350px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.help-tooltip.active {
  opacity: 1;
}

.help-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: transparent;
  color: var(--bs-white);
  border: none;
  font-size: 14px;
}

.help-content {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

[data-theme="dark"] .help-tooltip,
[data-bs-theme="dark"] .help-tooltip {
  background-color: var(--dark-bg-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .help-content,
[data-bs-theme="dark"] .help-content {
  color: var(--dark-text-primary);
}

[data-theme="dark"] .help-close-btn,
[data-bs-theme="dark"] .help-close-btn {
  color: var(--dark-text-secondary);
}

[data-theme="dark"] .help-close-btn:hover,
[data-bs-theme="dark"] .help-close-btn:hover {
  color: var(--dark-text-primary);
}

/* -----------------------------------------------------------------------------
 * 15. UTILITIES AND BADGES
 * -----------------------------------------------------------------------------
 */
/* Badges */
[data-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light {
  background-color: #495057 !important;
  color: var(--dark-text-primary) !important;
}

/* Modern UI improvements */
body {
  background: #f8f9fa;
}

/* Improved spacing */
main {
  padding: 2rem 0;
}

/* Modern button styling */
.btn {
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Improved form styling */
.form-control, .form-select {
  border-radius: 8px;
  border: 1px solid #e1e5e9;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  background: white;
}

.form-control:focus, .form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
  background: white;
}

/* Input group improvements */
.input-group .form-control:not(:last-child) {
  border-right: none;
}

.input-group .btn {
  border-left: none;
}

/* Progress improvements */
.progress {
  border-radius: 8px;
  height: 28px;
  background: #f1f3f4;
}

.progress-bar {
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Alert improvements */
.alert {
  border-radius: 8px;
  border: none;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* -----------------------------------------------------------------------------
 * 16. MEDIA QUERIES FOR RESPONSIVE DESIGN
 * -----------------------------------------------------------------------------
 */
@media (max-width: 768px) {
  /* Mobile Header Adjustments */
  header {
    padding: 0.75rem 0;
  }
  
  .header-container {
    padding: 0 1rem;
    min-height: 60px;
  }
  
  .header-container h1 {
    font-size: 1.4rem;
  }
  
  .header-container h1 img {
    height: 24px;
    margin-right: 0.5rem;
  }
  
  .toggle-btn {
    padding: 0.4rem;
    margin-left: 0.25rem;
  }
  
  .socket-status-indicator {
    padding: 0.4rem 0.6rem;
    margin-right: 0.5rem;
    font-size: 0.875rem;
  }
  
  /* Stack input groups on mobile */
  .input-group {
    flex-direction: column;
  }
  
  .input-group > * {
    margin-bottom: 0.5rem;
    width: 100%;
    border-radius: 0.375rem !important;
  }
  
  .input-group > *:not(:first-child) {
    margin-left: 0;
  }
  
  .input-group > :last-child {
    margin-bottom: 0;
  }
  
  /* Stack button groups on mobile */
  .d-flex.gap-2 {
    flex-direction: column;
  }
  
  .d-flex.gap-2 > * {
    margin-bottom: 0.5rem;
    width: 100%;
  }
  
  .d-flex.gap-2 > :last-child {
    margin-bottom: 0;
  }
  
  /* Smaller tabs on mobile */
  .nav-tabs .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  /* Stack PDF items on mobile */
  .pdf-download-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .pdf-item-title {
    max-width: 100%;
    margin-bottom: 8px;
  }
  
  .pdf-actions {
    margin-top: 8px;
    width: 100%;
    justify-content: flex-end;
  }
  
  /* History table adjustments */
  #history-table {
    font-size: 0.85rem;
  }
  
  #history-table .btn-group .btn {
    padding: 0.2rem 0.4rem;
  }
  
  /* Stack form controls on mobile */
  .form-floating {
    margin-bottom: 1rem;
  }
  
  /* PDF summary cards */
  .pdf-summary-card {
    margin-bottom: 1rem;
  }
}

/* Extra small devices */
@media (max-width: 576px) {
  /* Further reduce font sizes */
  body {
    font-size: 0.875rem;
  }
  
  /* Shrink buttons further */
  .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
  }
  
  /* Make cards full width */
  .card {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 0;
  }
  
  /* Adjust padding for containers */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Simplify modals */
  .modal-header,
  .modal-footer {
    padding: 0.75rem;
  }
  
  .modal-body {
    padding: 0.75rem;
  }
  
  /* Stack input groups even more tightly */
  .input-group > * {
    margin-bottom: 0.25rem;
  }
  
  /* Simplify PDF viewer on mobile */
  .pdf-viewer-container {
    height: 65vh;
  }
  
  .pdf-nav-controls {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* -----------------------------------------------------------------------------
 * 17. ANIMATIONS AND TRANSITIONS
 * -----------------------------------------------------------------------------
 */
/* Page transition animations */
.transition-container {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.transition-container.hidden {
  opacity: 0;
  transform: translateY(20px);
}

/* Progress completion animation */
@keyframes completed {
  0% { background-color: var(--primary-color); }
  100% { background-color: var(--success-color); }
}

.progress-bar.completed {
  animation: completed 0.5s ease forwards;
}

/* Button click animation */
.btn:active {
  transform: scale(0.98);
}

/* Loading spinner */
.spinner {
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Notification badges animation */
@keyframes notification-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.badge-notification {
  animation: notification-pulse 1s ease infinite;
}

/* PDF processing effect */
@keyframes processing-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.processing-item {
  animation: processing-pulse 1.5s ease-in-out infinite;
}

/* Help mode highlight animation */
@keyframes help-highlight {
  0% { outline-color: rgba(13, 110, 253, 0.5); }
  50% { outline-color: rgba(13, 110, 253, 1); }
  100% { outline-color: rgba(13, 110, 253, 0.5); }
}

.help-mode .help-target {
  animation: help-highlight 2s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
 * 18. PRINT STYLES
 * -----------------------------------------------------------------------------
 */
@media print {
  /* Hide navigation, buttons, and other UI elements not needed for printing */
  header, footer, .nav-tabs, .btn, .form-control, .no-print {
    display: none !important;
  }
  
  /* Adjust container width */
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  /* Remove shadows and borders to save ink */
  .card, .custom-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  
  /* Force background colors to white and text to black */
  body, .card, .table {
    background-color: #fff !important;
    color: #000 !important;
  }
  
  /* Ensure table content is readable */
  .table th, .table td {
    border-color: #000 !important;
  }
  
  /* Break long strings if needed */
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }
  
  /* Expand all collapse elements */
  .collapse {
    display: block !important;
    height: auto !important;
  }
  
  /* Display URLs after links for reference */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  
  /* But don't display URLs for internal links or javascript */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  
  /* Add page breaks where appropriate */
  h2, h3 {
    page-break-after: avoid;
  }
  
  img {
    page-break-inside: avoid;
  }
  
  /* Break to new page when printing multiple cards */
  .card {
    page-break-inside: avoid;
  }
}

/* Academic Search Integration CSS */

/* Academic source badges */
.academic-source-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.25rem;
}

.academic-source-arxiv {
  background-color: #b31b1b;
  color: white;
}

.academic-source-semantic {
  background-color: #1857b8;
  color: white;
}

.academic-source-openalex {
  background-color: #00a396;
  color: white;
}

/* Academic search card styling */
.card.border-primary {
  border-width: 1px;
  transition: all 0.3s ease;
}

.card.border-primary:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.2);
}

/* Enhanced PDF Download Item Styling (duplicate removed) */


/* PDF download progress bar */
.pdf-download-item .progress {
  height: 6px;
  transition: all 0.5s ease;
  margin-top: 4px;
}

/* PDF item title with truncation */
.pdf-item-title {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  padding-left: 20px;
}

.pdf-item-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ff4136' d='M320 464C328.8 464 336 456.8 336 448V416H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V416H48V448C48 456.8 55.16 464 64 464H320zM256 160C238.3 160 224 145.7 224 128V48H64C55.16 48 48 55.16 48 64V192H0V64C0 28.65 28.65 0 64 0H229.5C246.5 0 262.7 6.743 274.7 18.75L365.3 109.3C377.3 121.3 384 137.5 384 154.5V192H336V160H256zM88 224C88 202.3 105.5 184 128 184H256C277.7 184 296 202.3 296 224V336C296 357.7 277.7 376 256 376H128C106.3 376 88 357.7 88 336V224zM144 208V240H240V208H144zM240 336V272H144V336H240z'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/* Action buttons styling */
.pdf-actions {
  display: flex;
  gap: 5px;
}

.pdf-actions .btn {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Dark mode adjustments */
[data-theme="dark"] .academic-search-card,
[data-bs-theme="dark"] .academic-search-card {
  background-color: #2d3238;
}

[data-theme="dark"] .academic-search-card .card-header,
[data-bs-theme="dark"] .academic-search-card .card-header {
  background-color: #1c3156;
}

/* =============================================================================
 * PROGRESS BAR ENHANCEMENTS FOR NEUROGEN
 * =============================================================================
 */

/* Base progress bar styling improvements */
.progress {
  height: 25px;
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #e9ecef;
  margin-bottom: 1rem;
  position: relative; /* Required for absolute positioning of child elements */
}


/* Improved progress bar animation and transitions */
.progress-bar {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
  position: relative; /* For z-index control */
  z-index: 10;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* CSS pseudo-element removed to prevent dual percentages - text is now handled by JavaScript */
/* .progress-bar::after {
  content: attr(aria-valuenow) '%';
  position: absolute;
  right: 8px;
  color: white;
} */

/* Ensure the progress percentage is always visible - Commented out to prevent dual percentages */
/* .progress-bar[aria-valuenow="0"]::after {
  color: #212529;
  right: 8px;
  left: auto;
} */

/* Better striped and animated styles */
.progress-bar-striped {
  background-image: linear-gradient(45deg, 
    rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, 
    transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* Completed state styling - for 100% progress */
.progress-bar.completed,
.progress-bar[aria-valuenow="100"] {
  background-color: #198754 !important; /* Success green */
  transition: background-color 0.5s ease;
}

/* Add pulsing effect for completed progress bars */
.progress-bar.completed-animation,
.progress-bar[aria-valuenow="100"] {
  animation: pulse 1.5s ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

[data-theme="dark"] .container,
[data-bs-theme="dark"] .container {
  color: var(--dark-text-primary);
}