/* ==========================================================================
   1. DESIGN TOKENS (3-Layer System)
   ========================================================================== */

/*
 * Layer 1: Primitive Tokens (The Raw Materials)
 * Define base values for colors, spacing, shadows, etc.
 */
:root {
  /* --- Color Palette (Hues) --- */
  --color-blue-500: #0dcaf0; /* Bootstrap Info */
  --color-cyan-500: #39aabc;
  --color-green-500: #198754; /* Bootstrap Success */
  --color-red-500: #dc3545; /* Bootstrap Danger */
  --color-teal-300: #52c5a9;
  --color-teal-500: #20c997;
  --color-yellow-500: #f0e68c; /* Bootstrap Warning (approx) */
  --color-orange-500: #fd7e14; /* Bootstrap Warning (actual) - Adding for consistency */
  --color-purple-500: #6f42c1; /* Bootstrap Purple (approx) */
  --color-pink-500: #d63384; /* Bootstrap Pink (approx) */

  /* --- Grayscale Palette --- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f8f8f8;
  --color-gray-200: #e9ecef; /* Bootstrap gray-200 (approx) */
  --color-gray-300: #dee2e6; /* Bootstrap gray-300 */
  --color-gray-400: #ced4da; /* Bootstrap gray-400 (approx) */
  --color-gray-500: #adb5bd; /* Bootstrap gray-500 (approx) */
  --color-gray-600: #6c757d; /* Bootstrap gray-600 (approx) */
  --color-gray-700: #495057; /* Bootstrap gray-700 (approx) */
  --color-gray-800: #343a40; /* Bootstrap gray-800 (approx) */
  --color-gray-900: #212529; /* Bootstrap gray-900 (approx) */

  /* --- Semantic Status Colors (Primitive Base) --- */
  /* Use specific shades or standard Bootstrap mappings */
  --color-status-success: var(--color-green-500);
  --color-status-info: var(--color-blue-500);
  --color-status-warning: var(--color-orange-500); /* Corrected mapping to Bootstrap warning */
  --color-status-danger: var(--color-red-500);
  --color-status-danger-100: #f8d7da; /* Light danger for backgrounds */
  --color-status-danger-200: #f5c6cb; /* Lighter danger border */
  --color-status-danger-700: #721c24; /* Darker danger text */

  /* --- Extended Palette & Theme Bases --- */
  --color-light-blue-300: #add8e6;
  --color-light-green-100: #f0fff0;
  --color-dark-green-500: #28a745;
  --color-dark-green-800: #1a2e1a;
  --color-purple-100: #a0a0b0;
  --color-purple-300: #8b9dc3; /* This seems more like a slate/blue color */
  --color-serene-blue-accent-alt: #4a4a6e; /* Renamed from duplicate --color-purple-500 */

  /* --- Theme: Serene Blue (Dark Mode Candidate Palette) --- */
  /* Some values are used directly in the dark theme override */
  --color-serene-blue-bg: #1a2332;
  --color-serene-blue-accent: #89b4fa;
  --color-serene-blue-card: #242f42;
  --color-serene-blue-border: #3a4c6d;
  --color-serene-blue-text: #e0eafc;
  --color-serene-blue-secondary: #5d7a9e;
  --color-serene-blue-hover: #a2c4fa;
  --color-serene-blue-shadow: rgba(10, 25, 41, 0.5);

  /* --- Theme: Fall (Light Mode Candidate Palette) --- */
  /* Some values are used directly in the light theme default */
  --color-light-bg-warm: #f5f5f0;
  --color-card-bg-subtle: #f9f7ef;
  --color-fall-primary: #e3a86b;
  --color-warm-gray-border: #d6d3d1;

  /* --- Actual Dark Theme Palette (Defined as Primitives) --- */
  /* These hex values were previously hardcoded in the dark theme override */
  --color-dark-theme-bg: #0A1929;
  --color-dark-theme-text: #E0E0E0;
  --color-dark-theme-card-bg: #1A2A3A;
  --color-dark-theme-border: #2A3A4A;
  --color-dark-theme-primary: #64B5F6; /* Light blue primary */
  --color-dark-theme-link: #90CAF9; /* Light link color */
  --color-dark-theme-link-hover: #BBDEFB; /* Even lighter link hover */
  --color-dark-theme-accent-bg: #243447; /* Lighter bg for cards/dropzones in dark mode */

  /* --- RGB Components for RGBA calculations (e.g., shadows, glows) --- */
  /* Allows using CSS variables within rgba() */
  --color-black-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;
  --color-serene-blue-shadow-rgb: 10, 25, 41;
  --color-status-danger-rgb: 220, 53, 69; /* From --color-red-500 */
  --color-status-warning-rgb: 253, 126, 20; /* From --color-orange-500 */
  --color-status-success-rgb: 25, 135, 84; /* From --color-green-500 */
  --color-dark-theme-bg-rgb: 10, 25, 41; /* From --color-dark-theme-bg */
  --color-light-theme-bg-rgb: 245, 245, 240; /* From --color-light-bg-warm */
  --theme-primary-rgb: 227, 168, 107; /* From --color-fall-primary */
  --color-dark-theme-primary-rgb: 100, 181, 246; /* From --color-dark-theme-primary */


  /* --- Spacing Scale --- */
  --spacing-xxs: 0.125rem; /* Added smaller step */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem; /* Added larger step */

  /* --- Typography Scale --- */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.85rem;    /* ~14px */
  --font-size-md: 1rem;       /* 16px (base) */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-xxl: 1.5rem;    /* 24px */

  /* --- Shadow System --- */
  /* Using RGB variables for rgba() */
  --shadow-sm: 0 0.125rem 0.25rem rgba(var(--color-black-rgb), 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(var(--color-black-rgb), 0.15);
  --shadow-lg: 0 1rem 1.5rem rgba(var(--color-black-rgb), 0.1);
  --shadow-serene-blue: 0 0 15px rgba(var(--color-serene-blue-shadow-rgb), 0.5); /* Example usage */


  /* --- Transition System --- */
  --transition-fast: all 0.2s ease-in-out;
  --transition-medium: all 0.3s ease;
  --transition-slow: all 0.5s ease; /* Added slower option */

  /* --- Border Radius Scale --- */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-pill: 50rem; /* For pill shapes */
}

/*
 * Layer 2: Semantic Tokens (Light Theme Default)
 * Map primitive tokens to roles (e.g., theme background, primary color).
 */
:root {
  /* --- Theme Colors --- */
  --theme-bg: var(--color-light-bg-warm);
  --theme-text: var(--color-gray-700); /* Using Bootstrap gray 700 as default text */
  --theme-card-bg: var(--color-card-bg-subtle);
  --theme-border: var(--color-warm-gray-border);
  --theme-primary: var(--color-fall-primary);
  --theme-secondary-bg: var(--theme-card-bg); /* Often same as card-bg in light */
  --theme-tertiary-bg: var(--theme-card-bg); /* Often same as card-bg in light */
  --theme-link: var(--color-gray-500); /* Using Bootstrap gray 500 for default link */
  --theme-link-hover: var(--color-black); /* Using black for contrast on hover */
  --theme-button-secondary-hover-bg: var(--color-teal-500);

  /* --- Semantic Status Colors (Themed) --- */
  /* Map semantic status roles to potentially themed primitives */
  --color-success: var(--color-status-success);
  --color-info: var(--color-status-info);
  --color-warning: var(--color-status-warning);
  --color-danger: var(--color-status-danger);
  --color-danger-bg: var(--color-status-danger-100);
  --color-danger-border: var(--color-status-danger-200);
  --color-danger-text: var(--color-status-danger-700);

  /* --- Component-Specific Semantic Defaults --- */
  --color-batch-dropzone-bg: var(--theme-card-bg);
  --color-batch-dropzone-border: var(--theme-link);
  --color-batch-dropzone-icon: var(--theme-primary);
  --color-progress-bg: var(--color-gray-300);

  /* --- Semantic RGB Components (for rgba() calculations) --- */
  --theme-text-rgb: 73, 80, 87;       /* From --color-gray-700 */
  --theme-card-bg-rgb: 249, 247, 239; /* From --color-card-bg-subtle */
  --theme-link-rgb: 173, 181, 189;    /* From --color-gray-500 */
}

/*
 * Layer 3: Theme Overrides (e.g., Dark Mode)
 * Override semantic tokens based on context (e.g., [data-bs-theme="dark"]).
 */
[data-bs-theme="dark"] {
  /* --- Theme Color Overrides (Referencing Layer 1 Dark Primitives) --- */
  --theme-bg: var(--color-dark-theme-bg);
  --theme-text: var(--color-dark-theme-text);
  --theme-card-bg: var(--color-dark-theme-card-bg);
  --theme-border: var(--color-dark-theme-border);
  --theme-primary: var(--color-dark-theme-primary);
  --theme-secondary-bg: var(--theme-card-bg); /* Match card-bg in dark */
  --theme-tertiary-bg: var(--theme-card-bg); /* Match card-bg in dark */
  --theme-link: var(--color-dark-theme-link);
  --theme-link-hover: var(--color-dark-theme-link-hover);
  --theme-button-secondary-hover-bg: var(--color-teal-300); /* Use teal for secondary hover */

  /* --- Semantic Status Color Overrides --- */
  --color-info: var(--color-cyan-500); /* Use cyan for info in dark mode */

  /* --- Component-Specific Semantic Overrides --- */
  --color-progress-bg: var(--color-gray-700); /* Darker progress bar background */
  
  /* Dark mode specific overrides for better contrast */
  --color-batch-dropzone-bg: var(--color-dark-theme-accent-bg); /* Lighter than default card background for better visibility */
  --color-batch-card-bg: var(--color-dark-theme-accent-bg); /* Lighter than default card background for better visibility */

  /* --- Sync Bootstrap CSS variables with theme --- */
  --bs-body-bg: var(--theme-bg);
  --bs-body-color: var(--theme-text);
  --bs-border-color: var(--theme-border);
  --bs-secondary-bg: var(--theme-secondary-bg);
  --bs-tertiary-bg: var(--theme-tertiary-bg);
  --bs-card-bg: var(--theme-card-bg);
  --bs-card-border-color: var(--theme-border);
  --bs-dark: var(--theme-border); /* Bootstrap dark maps to border */
  --bs-light: var(--theme-link); /* Bootstrap light maps to link */
  /* Add more BS color mappings if needed */
  --bs-primary: var(--theme-primary);
  --bs-success: var(--color-success);
  --bs-info: var(--color-info);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
}


/* ==========================================================================
   2. GLOBAL STYLES
   ========================================================================== */

body {
  font-family: 'Roboto', sans-serif; /* Consider adding fallbacks */
  background-color: var(--theme-bg);
  color: var(--theme-text);
  line-height: 1.5; /* Standardizing line height */
}

/* ==========================================================================
   3. UTILITIES & BOOTSTRAP OVERRIDES
   ========================================================================== */

/* --- Bootstrap Button Overrides --- */
/* Apply common styles to all buttons first */
.btn {
  transition: var(--transition-fast);
}

/* Added focus style for accessibility */
.btn:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

.btn-primary {
  border: none;
  background-color: var(--theme-primary);
}

.btn-primary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--theme-link); /* Was theme-link, keep */
  color: var(--theme-card-bg); /* Text color inverse of link/background */
  border: none;
}

.btn-secondary:hover {
  background-color: var(--theme-button-secondary-hover-bg);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- Form & Alert Overrides --- */
.alert-danger {
  color: var(--color-danger-text);
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

/* Themed focus ring for form elements */

/* Dark mode check input override */


/* --- General Utilities --- */

/**
 * .u-interactive-lift - Utility class for a subtle lift-on-hover effect.
 * Applies box-shadow and transform on hover.
 */

/* Generic utility border */

/* Text color utilities */ /* Using theme-link as secondary text */


/* --- State Indicators & Loaders --- */
.spinner-border {
  color: var(--theme-primary);
}

/* Specific overrides for batch process buttons (Using IDs as in original) */
#start-batch-btn,
#load-more-btn {
  font-weight: 500;
}

#start-batch-btn:disabled,
#load-more-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

#load-more-btn.loading .spinner-border {
  width: var(--spacing-md); /* Use spacing variable */
  height: var(--spacing-md); /* Use spacing variable */
  border-width: 0.2em;
}

/* ==========================================================================
   4. BRAND LOGO STYLES
   ========================================================================== */

.navbar-brand-container {
  display: flex;
  align-items: center;
}

.navbar-brand {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-fast);
  align-items: baseline; /* Better visual alignment */
}

.navbar-brand:hover {
  background-color: rgba(var(--theme-primary-rgb, 227, 168, 107), 0.08);
  transform: translateY(-1px);
}

.brand-logo {
  transition: var(--transition-medium);
  border-radius: 6px;
  max-width: 48px;
  height: auto;
  filter: none;
  box-shadow: 0 1px 3px rgba(var(--color-black-rgb), 0.1);
  border: 1px solid rgba(var(--theme-text-rgb), 0.08);
  margin-bottom: 2px; /* Subtle baseline adjustment */
}

/* Dark mode logo adjustments */
[data-bs-theme="dark"] .brand-logo {
  filter: brightness(1.1) contrast(0.9);
  border-color: rgba(var(--color-dark-theme-text), 0.15);
  box-shadow: 0 1px 3px rgba(var(--color-black-rgb), 0.3);
}

.brand-text {
  color: var(--theme-text);
  transition: var(--transition-medium);
  margin-bottom: 0;
  font-size: 1.75rem; /* More balanced than display-5 */
  font-weight: 600; /* Semi-bold instead of bold */
  letter-spacing: -0.025em; /* Tighter spacing for premium feel */
}

.navbar-brand:hover .brand-logo {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 2px 8px rgba(var(--color-black-rgb), 0.15);
  transition: var(--transition-medium);
}

.navbar-brand:hover .brand-text {
  color: var(--theme-primary);
  transform: translateX(2px);
}

/* Dark mode navbar-brand hover enhancement */
[data-bs-theme="dark"] .navbar-brand:hover {
  background-color: rgba(var(--color-dark-theme-primary-rgb, 100, 181, 246), 0.12);
}

[data-bs-theme="dark"] .navbar-brand:hover .brand-logo {
  box-shadow: 0 2px 8px rgba(var(--color-black-rgb), 0.4);
}

/* Responsive logo sizing */
@media (max-width: 575.98px) {
  .brand-logo {
    max-width: 32px;
  }
  .brand-text {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .brand-logo {
    max-width: 64px;
  }
}

/* Accessibility - Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand:hover .brand-logo,
  .brand-logo {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   5. COMPONENT STYLES
   ========================================================================== */

/* --- Dropzone --- */
.dropzone {
  padding: var(--spacing-xl);
  border: 2px dashed var(--theme-link); /* Uses theme-link */
  border-radius: var(--border-radius-sm); /* Use border radius variable */
  background-color: var(--theme-card-bg); /* Uses theme-card-bg */
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative; /* Needed for absolute positioning of tooltip/help icon */
}

.dropzone .dz-message .fas {
  animation: pulse 2s infinite ease-in-out; /* Apply pulse animation to the icon */
}

/* Ensure reduced motion preference is respected for the icon */
@media (prefers-reduced-motion: reduce) {
  .dropzone .dz-message .fas {
    animation: none !important;
  }
}

.dropzone:hover {
  border-color: var(--theme-primary);
  transition: var(--transition-fast);
}

/* Enhanced hover effect for dark mode - more visible with glow */
[data-bs-theme="dark"] .dropzone:hover {
  border-color: var(--theme-primary);
  box-shadow: 0 0 8px rgba(var(--color-dark-theme-primary-rgb, 100, 181, 246), 0.4);
  outline: 1px solid var(--theme-primary);
  outline-offset: 1px;
}

/* Specific batch dropzone overrides (Using ID as in original) */
/* Simplify: only override styles that differ from base .dropzone or add behavior */
#batch-pdf-upload {
  /* border-color and background-color were redundant as semantic tokens mapped to theme */
  /* Only add/override what's unique or different hover */
}

#batch-pdf-upload .dz-message .fas {
  color: var(--color-batch-dropzone-icon); /* Uses semantic batch token */
}

/* Dropzone Help Button */
.dropzone-help-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 10; /* Ensure it's above other elements */
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.dropzone-help-btn:hover {
  opacity: 1;
}

/* Dropzone Tooltip */
.dropzone-tooltip {
  position: absolute;
  bottom: 100%; /* Position above the dropzone */
  left: 50%;
  transform: translateX(-50%) translateY(-10px); /* Adjust for arrow and spacing */
  background-color: var(--theme-text);
  color: var(--theme-card-bg);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 1001;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--theme-border);
}

.dropzone-tooltip::after { /* Tooltip arrow */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--theme-text) transparent transparent transparent;
}

/* Dark mode tooltip colors */
[data-bs-theme="dark"] .dropzone-tooltip {
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

[data-bs-theme="dark"] .dropzone-tooltip::after {
  border-top-color: var(--theme-card-bg);
  filter: drop-shadow(0 1px 0 var(--theme-border)); /* Match border shadow */
}

/* Show tooltip */
.dropzone-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Reduced motion support for tooltip */
@media (prefers-reduced-motion: reduce) {
  .dropzone-tooltip {
    transition: none !important;
    transform: translateX(-50%) translateY(0) !important; /* Snap to final position */
  }
}


/* --- Cards (Results & Batch) --- */

.batch-card {
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  background-color: var(--theme-card-bg);
  border: 2px solid var(--theme-border);
  margin: var(--spacing-lg); /* Increased spacing between batch cards */
}

.batch-card .card-header {
  background-color: var(--theme-secondary-bg);
  padding: var(--spacing-sm) var(--spacing-md);
}

.batch-card .card-header button {
  color: var(--theme-text);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Remove old triangle implementation - now using morphing icons */
.batch-card .card-header button::after {
  display: none;
}

/* Individual batch toggle morphing icons */
.batch-individual-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: var(--spacing-sm);
  flex-shrink: 0;
}

.batch-individual-icon-container {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.batch-individual-expand-icon,
.batch-individual-collapse-icon {
  position: absolute;
  font-size: 12px;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--theme-text);
}

/* Default state (expanded) - Show collapse icon (minus), hide expand icon (plus) */
.batch-individual-collapse-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.batch-individual-expand-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* When collapsed - Hide collapse icon (minus), show expand icon (plus) */
.batch-card .card-header button.collapsed .batch-individual-collapse-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.batch-card .card-header button.collapsed .batch-individual-expand-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.batch-card .card-body {
  padding: var(--spacing-md);
}

/* Combined hover effect, leveraging u-interactive-lift logic */

#batch-results-container { /* Using ID as in original */
  padding: var(--spacing-md) 0; /* Use spacing variable */
}


/* --- Result Image --- */
.result-image {
  height: 200px;
  max-width: 100%;
  border-radius: var(--border-radius-sm); /* Use border radius variable */
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

/* --- Batch Info Overlay --- */

/* --- Progress Bars --- */
.progress {
  position: relative;
  height: var(--spacing-lg); /* Use spacing variable (1.5rem approx) */
  background-color: var(--color-progress-bg);
  border-radius: var(--border-radius-md); /* Use border radius variable */
  overflow: hidden; /* Ensure bar and text are clipped */
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white); /* Default text color, may be overridden by text shadow */
  transition: width 0.4s ease; /* Smooth filling animation */
}

/* Accessibility fix for progress bar text contrast */
.progress-bar {
  text-shadow: 1px 1px 2px rgba(var(--color-black-rgb), 0.7);
}

.progress-sm {
  height: var(--spacing-md); /* Use spacing variable (1rem) */
  font-size: 0.8rem;
}

/* Ensure text is visible on a 100% full progress bar */
.progress-text-visible {
  padding: 0 var(--spacing-sm);
}

/* Batch progress bar specific styles (Using IDs as in original) */
#batch-progress .progress {
  height: var(--spacing-lg); /* Keep original height */
}

#batch-progress-bar {
  background-color: var(--color-info); /* Use info color */
  font-weight: bold;
}

/* --- Navigation Tabs (Batch) --- */
.nav-tabs {
  border-bottom: 1px solid var(--theme-border);
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; /* Use border radius variable */
  color: var(--theme-link);
  transition: var(--transition-medium);
  /* Add themed focus style */
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--theme-text);
  background-color: var(--theme-card-bg); /* Match card background */
  border-color: var(--theme-border) var(--theme-border) var(--theme-card-bg); /* Hide bottom border */
  font-weight: 500;
}

.nav-tabs .nav-link:hover {
  border-color: var(--theme-border); /* Show border on hover */
  isolation: isolate; /* Prevent border bleeding issues */
  color: var(--theme-link-hover);
}


/* ==========================================================================
   5. MODAL SYSTEM (Glass Effect + Motion + Skeleton)
   ========================================================================== */

.modal-content {
  /* Liquid Glass effect with fallbacks */
  background-color: rgba(var(--color-white-rgb), 0.9); /* Fallback for non-supporting browsers */
  background-color: rgba(var(--color-white-rgb), 0.65); /* Modern browsers with backdrop-filter */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(var(--color-white-rgb), 0.3);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 8px 32px 0 rgba(var(--color-black-rgb), 0.37);
}

/* Feature detection fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .modal-content {
    background-color: rgba(var(--color-white-rgb), 0.95); /* More opaque fallback */
  }
  [data-bs-theme="dark"] .modal-content {
    background-color: rgba(var(--color-dark-theme-bg-rgb), 0.95); /* More opaque dark fallback */
  }
}

/* --- Modal Tabs --- */
#modalTabs {
  border-bottom: 1px solid var(--theme-border);
}

#modalTabs .nav-link {
  color: var(--theme-link);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: var(--transition-fast);
}

#modalTabs .nav-link.active {
  color: var(--theme-primary);
  background-color: var(--theme-bg);
  border-color: var(--theme-border) var(--theme-border) var(--theme-bg);
  font-weight: 500;
}

#modalTabs .nav-link:hover:not(.active) {
  color: var(--theme-link-hover);
  background-color: rgba(var(--theme-primary-rgb, 227, 168, 107), 0.1);
}

[data-bs-theme="dark"] #modalTabs .nav-link.active {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border) var(--theme-border) var(--theme-card-bg);
}

/* --- Modal Tab Content --- */
.tab-content {
  padding: var(--spacing-md);
}

.tab-pane {
  background-color: var(--theme-bg);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-md);
}

[data-bs-theme="dark"] .tab-pane {
  background-color: var(--theme-card-bg);
}

/* --- Feedback Section --- */
#feedback-section {
  background-color: rgba(var(--theme-primary-rgb, 227, 168, 107), 0.05);
  border-color: var(--theme-border);
}

[data-bs-theme="dark"] #feedback-section {
  background-color: rgba(var(--theme-primary-rgb, 100, 181, 246), 0.1);
}

.feedback-btn {
  transition: var(--transition-fast);
}

.feedback-btn:hover {
  transform: scale(1.05);
}

.feedback-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

[data-bs-theme="dark"] .modal-content {
  /* Dark mode Liquid Glass effect */
  background-color: rgba(var(--color-dark-theme-bg-rgb), 0.75);
  border: 1px solid rgba(var(--color-dark-theme-primary-rgb, 100, 181, 246), 0.3);
}

.modal-header {
  border-bottom: 2px solid var(--theme-primary); /* Themed border */
}

.modal-footer {
  border-top: 2px solid var(--theme-border); /* Themed border */
}

/* --- Modal Entrance Animation --- */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform: translateY(-50px) scale(0.95);
  opacity: 0;
  will-change: transform, opacity; /* Optimize animation */
}

.modal.fade.show .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
  will-change: auto; /* Reset will-change */
}

/* --- Staggered Entrance for Modal Content --- */
/* Using a class applied during modal opening (e.g., via JS) */
.modal-entering .modal-header {
  animation: fadeInUp 0.3s ease-out forwards; /* Added forwards to retain state */
}

.modal-entering .modal-body {
  animation: fadeInUp 0.4s ease-out 0.1s forwards; /* Added forwards */
}

.modal-entering .modal-footer {
  animation: fadeInUp 0.3s ease-out 0.2s forwards; /* Added forwards */
}

/* --- Modal Typography Hierarchy --- */
.modal-title {
  font-size: var(--font-size-xxl); /* Use proper font size variable */
  font-weight: 700;
}

.modal-body h4 {
  font-size: var(--font-size-lg); /* Use proper font size variable */
  font-weight: 600;
}

.modal-body h5 {
  font-size: var(--font-size-md); /* Use proper font size variable */
  font-weight: 500;
}

.modal-body p, .modal-body li {
  font-size: 0.9rem;
}

/* --- Modal Footer Button Micro-interactions --- */
.modal-footer .btn {
  transition: var(--transition-fast); /* Simplified transition */
  min-width: 44px; /* Touch-friendly target size */
  min-height: 44px; /* Touch-friendly target size */
  /* Focus style already applied to .btn */
}

/* Move interactive transforms to a shared utility or apply consistently */
/* Keeping specific transforms for modal buttons as in original */
.modal-footer .btn:hover {
  transform: scale(1.05);
}

.modal-footer .btn:active {
  transform: scale(0.95);
}

/* ======================== Modal Card Title Fixes ======================== */
/* Fix for card titles appearing too small in modal content */
.modal .card-title {
  font-size: 1.125rem; /* 18px - proper readable size for card titles */
  font-weight: 600; /* Semi-bold for better hierarchy */
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* Specific styling for Quick Summary card title */
.modal #overview .card-title {
  font-size: 1.25rem; /* 20px - slightly larger for main summary */
  font-weight: 700; /* Bold for primary importance */
  color: var(--theme-text);
}

/* Detailed analysis card titles */
.modal #detailed-analysis .card-title {
  font-size: 1.125rem; /* 18px - consistent readable size */
  font-weight: 600;
  color: var(--theme-text);
  text-transform: capitalize; /* Improve readability of snake_case criteria names */
}

/* ======================== Modal Card Background Fixes ======================== */
/* Ensure all modal cards use proper theme background */
.modal .card {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

/* Quick Summary card specific styling */
.modal #overview .card {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border);
}

/* Detailed analysis cards */
.modal #detailed-analysis .card {
  background-color: var(--theme-card-bg);
  border-color: var(--theme-border);
}

/* Ensure card bodies inherit proper theme colors */
.modal .card-body {
  background-color: inherit;
  color: var(--theme-text);
}

/* ======================== Modal Image Zoom Z-Index Fixes ======================== */
/* Fix for zoomed images appearing behind modal content */
.modal .result-image {
  position: relative;
  z-index: 1; /* Base z-index for images */
  transition: transform 0.2s ease-out, z-index 0s;
}

/* When image is zoomed (scaled), ensure it appears above all modal content */
/* Assumes a 'zoomed' class is toggled on the image via JavaScript */
.modal .result-image.zoomed {
  transform: scale(1.5); /* Example zoom level */
  z-index: 100; /* High z-index to appear above other modal content */
  cursor: zoom-out;
}

/* Ensure modal content has proper stacking context */
.modal .card {
  position: relative;
  z-index: 1;
}

/* Specific z-index for summary card to prevent overlap */
.modal #overview .card {
  z-index: 2;
}

/* Image containers should allow z-index inheritance */
.modal .image-container {
  position: relative;
  z-index: inherit;
}

/* --- Skeleton Screens for Modal Loading States --- */
.skeleton-image {
  background: linear-gradient(90deg, 
    rgba(var(--theme-text-rgb), 0.1) 25%, 
    rgba(var(--theme-text-rgb), 0.2) 50%, 
    rgba(var(--theme-text-rgb), 0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-sm);
  height: 200px;
  width: 100%;
}

.skeleton-text {
  background: linear-gradient(90deg, 
    rgba(var(--theme-text-rgb), 0.1) 25%, 
    rgba(var(--theme-text-rgb), 0.2) 50%, 
    rgba(var(--theme-text-rgb), 0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-sm);
  height: 1em;
  margin-bottom: var(--spacing-sm);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.long { width: 100%; }

/* Loading spinner for skeleton content */
.skeleton-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: 2px solid rgba(var(--theme-text-rgb), 0.2);
  border-top: 2px solid var(--theme-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}


/* ==========================================================================
   6. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* --- Keyframe Definitions --- */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Generalized glow using RGB variable for base color */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--glow-color-rgb, 0, 0, 0), 0.5); }
  50% { box-shadow: 0 0 15px rgba(var(--glow-color-rgb, 0, 0, 0), 0.9); }
}

/* Risk-aware glow keyframes using specific RGB variables */
@keyframes glow-danger {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--color-status-danger-rgb), 0.5); }
  50% { box-shadow: 0 0 15px rgba(var(--color-status-danger-rgb), 0.9); }
}

@keyframes glow-warning {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--color-status-warning-rgb), 0.5); }
  50% { box-shadow: 0 0 15px rgba(var(--color-status-warning-rgb), 0.9); }
}

@keyframes glow-success {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--color-status-success-rgb), 0.5); }
  50% { box-shadow: 0 0 15px rgba(var(--color-status-success-rgb), 0.9); }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Shimmer for skeleton loaders */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spin for loaders */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* --- Animation Utility Classes --- */
/* Apply specific glow classes directly */
.glow-danger { animation: glow-danger 2s ease-in-out infinite; }
.glow-warning { animation: glow-warning 2s ease-in-out infinite; }

/* Example of using the generalized glow with a custom variable */
/* .my-element-glowing-primary {
  --glow-color-rgb: var(--color-dark-theme-primary-rgb, 100, 181, 246);
  animation: glow 2s ease-in-out infinite;
} */

/* Apply glow-success to .progress-complete */
.progress-complete {
  animation: glow-success 2s ease-in-out infinite; /* Use specific glow */
}

#batch-complete-icon { /* Using ID as in original */
  animation: fadeIn 0.5s ease-out forwards;
}


/* ==========================================================================
   7. DARK MODE COMPONENT OVERRIDES
   ========================================================================== */

/* Apply dark theme variables where default component styles don't pick them up */
/* Note: Many Bootstrap components already use CSS variables that are synced in layer 3,
   but some custom components or deeply nested elements might need explicit overrides. */

/* Card */
/* Note: Explicit dark mode overrides for generic .card are not needed
   because Bootstrap's variables (--bs-card-bg, --bs-card-border-color, etc.)
   are already synced with our theme variables in Layer 3. */
   
/* Batch cards need distinct background in dark mode */
[data-bs-theme="dark"] .batch-card {
  background-color: var(--color-batch-card-bg);
  border-color: var(--theme-border);
}

[data-bs-theme="dark"] .batch-card .card-header {
  background-color: var(--color-batch-card-bg);
}

[data-bs-theme="dark"] .batch-card .card-body {
  background-color: var(--color-batch-card-bg);
}

/* Dropzone */
/* Base dropzone colors are already using theme variables, overrides handle the theme switch */
[data-bs-theme="dark"] .dropzone {
  background-color: var(--color-batch-dropzone-bg); /* Use lighter background for better visibility */
  border-color: var(--theme-border);
  color: var(--theme-text);
}

/* Ensure dropzone message text/icons are themed */
[data-bs-theme="dark"] .dropzone .dz-message,
[data-bs-theme="dark"] .dropzone .dz-message h4,
[data-bs-theme="dark"] .dropzone .dz-message .fas {
  color: var(--theme-text);
}


/* Navigation Tabs Dark Mode */
/* Nav link colors are already themed, only active/hover specific styles needed */
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--theme-text);
    background-color: var(--theme-secondary-bg); /* Darker background for active tab */
    border-color: var(--theme-border) var(--theme-border) var(--theme-secondary-bg);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--theme-border);
    background-color: var(--theme-tertiary-bg); /* Darker background on hover */
}


/* --- Enhanced Theme Toggle --- */
.enhanced-theme-toggle {
  position: relative;
  display: inline-block;
}

.theme-toggle-container {
  position: relative;
  display: inline-block;
}

.theme-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-pill);
  background: linear-gradient(135deg, var(--color-fall-primary), var(--color-teal-500));
  border: 2px solid var(--theme-border);
  cursor: pointer;
  transition: var(--transition-medium);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Touch-friendly sizing */
  min-width: 44px;
  min-height: 44px;
}

.theme-toggle-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
}

.theme-toggle-button:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 3px;
}

.theme-toggle-button:active {
  transform: translateY(0) scale(0.98);
  transition: var(--transition-fast);
}

.icon-container {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sun-icon,
.moon-icon {
  position: absolute;
  font-size: 18px;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Light mode (default) - Show sun, hide moon */
.sun-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  color: var(--color-yellow-500);
}

.moon-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: var(--color-gray-300);
}

/* Dark mode - Hide sun, show moon */
#theme-toggle:checked + .theme-toggle-button .sun-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

#theme-toggle:checked + .theme-toggle-button .moon-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  color: var(--color-gray-100);
}

/* Dark mode background gradient */
#theme-toggle:checked + .theme-toggle-button {
  background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-800));
  border-color: var(--color-gray-600);
}

/* Tooltip */
.theme-tooltip {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--theme-text);
  color: var(--theme-card-bg);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

.theme-toggle-container:hover .theme-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* Tooltip text visibility based on theme state */
.tooltip-text {
  display: block;
}

.light-text {
  display: block;
}

.dark-text {
  display: none;
}

#theme-toggle:checked ~ .theme-tooltip .light-text {
  display: none;
}

#theme-toggle:checked ~ .theme-tooltip .dark-text {
  display: block;
}

/* Dark mode tooltip colors */
[data-bs-theme="dark"] .theme-tooltip {
  background-color: var(--theme-card-bg);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
}

[data-bs-theme="dark"] .tooltip-arrow {
  border-bottom-color: var(--theme-card-bg);
  filter: drop-shadow(0 -1px 0 var(--theme-border));
}

/* Screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==========================================================================
   8. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 575.98px) { /* Use standard Bootstrap breakpoint */
  /* Smaller margins and full height/overflow for small screens */
  .modal-dialog {
    margin: var(--spacing-sm); /* Use spacing variable */
    max-height: calc(100vh - var(--spacing-md)); /* Use spacing variable */
  }
  .modal-content {
    height: calc(100vh - var(--spacing-md)); /* Use spacing variable */
    overflow-y: auto;
  }
  .modal-body {
    padding: var(--spacing-md); /* Use spacing variable */
  }
  /* Stack modal body content */
  .modal-body .row {
    flex-direction: column;
  }
  /* Adjust image sizing */
  .modal-body img {
    width: 100%;
    height: auto;
    max-height: 40vh;
    object-fit: contain;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) { /* Use standard Bootstrap breakpoints */
  /* Slightly smaller max-width for medium screens */
  .modal-dialog {
    max-width: 90%;
  }
  /* Adjust image sizing */
  .modal-body img {
    max-height: 30vh;
  }
}

@media (min-width: 768px) { /* Use standard Bootstrap breakpoint */
  /* Ensure large modals can be wider */
  .modal-dialog.modal-xl {
    max-width: 90vw;
  }
  /* Adjust image sizing */
  .modal-body img {
    max-height: 50vh;
    object-fit: contain;
  }
}

/* ==========================================================================
   9. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

/* Disable transitions and animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Disable transitions globally, then re-enable selectively if needed */
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; /* Also good practice */
  }

  /* Ensure elements that rely on transitions/animations for initial state */
  .modal.fade .modal-dialog {
    transform: none; /* Snap to final position */
    opacity: 1; /* Snap to visible */
  }

  /* Disable staggered modal entrance animations */
  .modal-entering .modal-header,
  .modal-entering .modal-body,
  .modal-entering .modal-footer {
    animation: none;
  }

  /* Disable specific component animations */
  .glow-danger,
  .glow-warning,
  .progress-complete {
    animation: none !important; /* Use !important to override animation classes */
    box-shadow: none !important; /* Remove glows */
  }

  /* Static state for batch complete icon */
  #batch-complete-icon {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }

  /* Disable spinner animation */
  .spinner-border {
    animation: none !important;
    /* Consider adding a static visual indicator if the spinner is crucial */
  }

   /* Disable specific transforms on hover/active */
  .btn:hover,
  .btn:active,
  #batch-pdf-upload:hover,
  .theme-toggle-button:hover,
  .theme-toggle-button:active {
    transform: none !important; /* Remove hover/active transforms */
  }
  
  /* Disable theme toggle animations */
  .theme-toggle-button,
  .sun-icon,
  .moon-icon,
  .theme-tooltip {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   10. PASTE FUNCTIONALITY STYLES
   ========================================================================== */

/* Paste-ready visual feedback for dropzones */
.dropzone.paste-ready {
  outline: 2px solid var(--theme-primary) !important;
  box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 227, 168, 107), 0.5) !important;
  transition: all 0.3s ease-in-out;
}

.dropzone.paste-ready .dz-message h4 {
  position: relative;
}

.dropzone.paste-ready .dz-message h4::after {
  content: attr(data-original-text);
  font-size: 100%;
  font-weight: normal;
  color: var(--theme-text);
  display: block;
}

/* Removed duplicate paste text CSS - handled by JavaScript */

@media (prefers-reduced-motion: reduce) {
  .dropzone.paste-ready .dz-message h4::before {
    animation: none;
  }
}

/* Dark mode adjustments for paste-ready state */
[data-bs-theme="dark"] .dropzone.paste-ready {
  outline-color: var(--theme-primary);
  box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 100, 181, 246), 0.5) !important;
}

/* ==========================================================================
   11. BATCH TOGGLE BUTTON (Similar to Theme Toggle)
   ========================================================================== */

.batch-toggle-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-md);
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-link));
  border: 2px solid var(--theme-border);
  cursor: pointer;
  transition: var(--transition-medium);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Touch-friendly sizing */
  min-width: 32px;
  min-height: 32px;
}

.batch-toggle-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
}

.batch-toggle-button:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

.batch-toggle-button:active {
  transform: translateY(0) scale(0.98);
  transition: var(--transition-fast);
}

.batch-icon-container {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expand-icon,
.collapse-icon {
  position: absolute;
  font-size: 14px;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
}

/* Default state - Show collapse icon (minus), hide expand icon (plus) */
.collapse-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.expand-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* When toggled - Hide collapse icon (minus), show expand icon (plus) */
.batch-toggle-button.toggled .collapse-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.batch-toggle-button.toggled .expand-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Dark mode batch toggle background gradient */
[data-bs-theme="dark"] .batch-toggle-button {
  background: linear-gradient(135deg, var(--color-dark-theme-primary), var(--color-gray-700));
  border-color: var(--color-gray-600);
}

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .batch-toggle-button,
    .expand-icon,
    .collapse-icon,
    .batch-individual-expand-icon,
    .batch-individual-collapse-icon {
      transition: none !important;
      animation: none !important;
    }

    .batch-toggle-button:hover,
    .batch-toggle-button:active {
      transform: none !important;
    }
  }

/* ==========================================================================
   12. SOCIAL MEDIA LINKS INTEGRATION
   ========================================================================== */

/* Social Media Section Styling */
.social-section {
  margin-bottom: var(--spacing-lg);
}

.social-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: var(--spacing-md);
}

/* Social Links Container */
.social-links-container {
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--theme-card-bg);
  border: 2px solid var(--theme-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.social-links-container:hover {
  box-shadow: var(--shadow-md);
}

/* Dark mode adjustments for social container */
[data-bs-theme="dark"] .social-links-container {
  background-color: var(--color-batch-card-bg);
  border-color: var(--theme-border);
  box-shadow: var(--shadow-lg);
}

/* Social Links List */
.social-links-container .list-unstyled {
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
}

/* Individual Social Links */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid var(--theme-link);
  color: var(--theme-link);
  font-size: 1.5rem;
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}

/* Enhanced focus and hover states */
.social-link:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 3px;
}

.social-link:hover {
  border-color: var(--theme-primary);
  color: var(--theme-primary);
  background-color: rgba(var(--theme-primary-rgb, 227, 168, 107), 0.08);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb, 227, 168, 107), 0.25);
}

/* Active state for pressed effect */
.social-link:active {
  transform: translateY(0) scale(0.98);
  transition: var(--transition-fast);
}

/* Icon sizing and positioning */
.social-link i {
  transition: var(--transition-fast);
}

.social-link:hover i {
  transform: scale(1.1);
}

/* Specific icon colors and hover effects */
.social-link[href*="linkedin"] {
  --social-hover-color: #0077b5;
  border-color: #0077b5;
  color: #0077b5;
}

.social-link[href*="x.com"] {
  --social-hover-color: #000000;
  border-color: #000000;
  color: #000000;
}

.social-link[href*="twitter"] {
  --social-hover-color: #000000;
  border-color: #000000;
  color: #000000;
}

/* Homepage link styling (teal/primary theme) */
.social-link[href*="aifoudahub.com"] {
  --social-hover-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}

/* Hover states with specific social colors */
/* Apply social-specific hover colors */
.social-link[href*="linkedin"]:hover {
  background-color: rgba(0, 119, 181, 0.08);
  border-color: var(--social-hover-color);
  color: var(--social-hover-color);
  box-shadow: 0 4px 15px rgba(0, 119, 181, 0.25);
}

.social-link[href*="x.com"]:hover,
.social-link[href*="twitter"]:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: var(--social-hover-color);
  color: var(--social-hover-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.social-link[href*="aifoudahub.com"]:hover {
  background-color: rgba(var(--theme-primary-rgb, 227, 168, 107), 0.08);
  border-color: var(--social-hover-color);
  color: var(--social-hover-color);
  box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb, 227, 168, 107), 0.25);
}

/* Copyright Section */
.copyright-section {
  color: var(--theme-link);
  margin-top: var(--spacing-lg);
  font-weight: 500;
}

/* Combined container styling for cohesive footer */
footer .container {
  max-width: 800px;
}

/* ==========================================================================
   13. SOCIAL MEDIA RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Tablet and mobile breakpoints */
@media (max-width: 767.98px) {
  /* Stack social links vertically on tablets/small screens */
  .social-links-container .d-flex {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  /* Smaller container padding on mobile */
  .social-links-container {
    padding: var(--spacing-md);
  }

  /* Enlarge social links for touch targets */
  .social-link {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
  }
}

@media (max-width: 575.98px) {
  /* Mobile-first optimizations */
  .social-section {
    margin-bottom: var(--spacing-md);
  }

  .social-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-sm);
  }

  .social-links-container {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-md);
  }

  /* Ensure adequate touch targets */
  .social-link {
    min-width: 48px;
    min-height: 48px;
  }

  .copyright-section {
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
  }
}

/* ==========================================================================
   14. SOCIAL MEDIA DARK MODE SUPPORT
   ========================================================================== */

/* Adjust social link colors for dark mode */
[data-bs-theme="dark"] .social-link {
  border-color: var(--theme-link);
  color: var(--theme-link);
}

/* Dark mode specific hover adjustments */
[data-bs-theme="dark"] .social-link:hover {
  background-color: rgba(var(--theme-primary-rgb, 100, 181, 246), 0.12);
}

/* Dark mode social-specific colors (brighter versions) */
[data-bs-theme="dark"] .social-link[href*="linkedin"] {
  border-color: #42a5f5;
  color: #42a5f5;
}

[data-bs-theme="dark"] .social-link[href*="x.com"],
[data-bs-theme="dark"] .social-link[href*="twitter"] {
  border-color: #ffffff;
  color: #ffffff;
}

[data-bs-theme="dark"] .social-link[href*="linkedin"]:hover {
  background-color: rgba(66, 165, 245, 0.15);
  border-color: #42a5f5;
  color: #42a5f5;
}

[data-bs-theme="dark"] .social-link[href*="x.com"]:hover,
[data-bs-theme="dark"] .social-link[href*="twitter"]:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  color: #ffffff;
}

/* ==========================================================================
   15. SOCIAL MEDIA ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Ensure high contrast mode support */
@media (prefers-contrast: high) {
  .social-link {
    border-width: 3px;
  }

  .social-link:hover {
    transform: none;
  }
}

/* Reduced motion support for social links */
@media (prefers-reduced-motion: reduce) {
  .social-link,
  .social-link i,
  .social-link:hover,
  .social-link:active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Focus enhancement for keyboard navigation */
.social-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 227, 168, 107), 0.5);
  z-index: 10;
}

/* Dark mode focus enhancement */
[data-bs-theme="dark"] .social-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--color-dark-theme-primary-rgb, 100, 181, 246), 0.5);
}