/**
 * Theme Toggle Styling for Vigthoria LLM Chat
 */

/* Light Theme Variables */
[data-theme="light"] {
  --font-primary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-monospace: 'Consolas', 'Monaco', monospace;

  /* Core Colors */
  --color-background: #ffffff; /* White background */
  --color-surface: #f8f9fa;   /* Slightly off-white for cards, panels */
  --color-border: #ced4da;    /* Standard border color */
  --color-text: #212529;      /* Dark grey for primary text */
  --color-text-secondary: #6c757d; /* Lighter grey for secondary text */
  --color-text-muted: #adb5bd;    /* Muted text */

  /* Primary/Accent Colors (Professional Blue) */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-text: #ffffff; /* Text on primary background */

  /* Secondary/Accent Colors (Optional - e.g., a subtle grey or complementary color) */
  --color-secondary: #6c757d; /* Grey */
  --color-secondary-hover: #545b62;
  --color-secondary-text: #ffffff;

  /* Functional Colors */
  --color-success: #28a745;
  --color-warning: #FFA726; /* Muted Amber/Orange */
  --color-error: #dc3545;
  --color-info: #17a2b8;

  /* Shadows (Subtle) */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* Links */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  /* Compatibility with existing cyberpunk variable names, mapping to new light theme values */
  --neon-pink: var(--color-secondary); /* Or a more serious accent */
  --neon-blue: var(--color-primary);
  --neon-yellow: var(--color-warning);
  --neon-green: var(--color-success);
  --neon-purple: #6f42c1; /* A professional purple */
  --dark-bg: var(--color-surface);
  --darker-bg: #e9ecef; /* Slightly darker than surface for depth */
  --panel-bg: var(--color-surface);
  --digital-pattern: none; /* No digital pattern for light mode */

  --primary-color: var(--color-primary);
  --secondary-color: var(--color-secondary); /* Or a specific accent */
  --tertiary-color: var(--color-warning);
  --background-color: var(--color-background);
  --grid-color: rgba(0, 0, 0, 0.05); /* Subtle grid lines */
  --text-color: var(--color-text);
  --accent-color: var(--color-primary); /* Main accent */
  --dark-accent: var(--color-primary-hover);
  --border-color: var(--color-border);
  --header-height: 60px; /* Keep consistent if layout depends on it */
  --sidebar-width: 300px; /* Keep consistent */
  --glitch-duration: 0s; /* Disable glitch effects */
  --glow-primary: none;
  --glow-secondary: none;
  --card-bg: var(--color-surface);
}

/* Dark Theme is already defined in styles.css */

/* Theme Toggle Button */
.theme-toggle {
  position: relative;
  width: 50px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 2px;
}

.theme-toggle:hover {
  box-shadow: var(--glow-primary);
}

.theme-toggle::before {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: var(--color-primary);
  left: 2px;
  transition: transform 0.3s ease;
}

[data-theme="light"] .theme-toggle::before {
  transform: translateX(25px);
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  position: absolute;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.theme-toggle .sun-icon {
  right: 5px;
  opacity: 0;
  color: #fff;
}

.theme-toggle .moon-icon {
  left: 5px;
  opacity: 1;
  color: #fff;
}

[data-theme="light"] .theme-toggle .sun-icon {
  opacity: 1;
}

[data-theme="light"] .theme-toggle .moon-icon {
  opacity: 0;
}

/* Light Theme Specific Adjustments */
[data-theme="light"] .cyber-sidebar {
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-right: 1px solid var(--color-border);
}

[data-theme="light"] .cyber-main {
  background-color: var(--color-background);
}

[data-theme="light"] input, 
[data-theme="light"] select, 
[data-theme="light"] textarea {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px;
  border-radius: 4px;
  font-family: var(--font-primary);
  box-shadow: none; /* No inset shadows */
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring */
  outline: none;
}

[data-theme="light"] .chat-container {
  background-color: var(--color-background); /* Or var(--color-surface) if preferred */
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .message-user .message-content {
  background-color: rgba(0, 123, 255, 0.1); /* Light blue tint */
  border: 1px solid rgba(0, 123, 255, 0.2);
  color: var(--color-text);
  box-shadow: none;
}

[data-theme="light"] .message-assistant .message-content {
  background-color: #e9ecef; /* Light grey tint for assistant */
  border: 1px solid #ced4da;
  color: var(--color-text);
  box-shadow: none;
}

[data-theme="light"] .cyber-button {
  background-color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .cyber-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  padding: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

[data-theme="light"] .cyber-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

[data-theme="light"] body::before {
  background-image: none;
}

/* General Light Theme Styles */
[data-theme="light"] body {
  font-family: var(--font-primary);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 {
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 600; /* Bolder headings */
}

[data-theme="light"] a {
  color: var(--color-link);
  text-decoration: none;
}

[data-theme="light"] a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

[data-theme="light"] button,
[data-theme="light"] .button,
[data-theme="light"] .cyber-button {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary);
  padding: 8px 15px; /* Adjusted padding */
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-family: var(--font-primary);
  font-size: 14px; /* Added/Adjusted font size */
  text-shadow: none; /* Remove text shadows */
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] button:hover,
[data-theme="light"] .button:hover,
[data-theme="light"] .cyber-button:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] button.secondary,
[data-theme="light"] .button.secondary {
  background-color: var(--color-secondary);
  color: var(--color-secondary-text);
  border-color: var(--color-secondary);
}

[data-theme="light"] button.secondary:hover,
[data-theme="light"] .button.secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

[data-theme="light"] .card,
[data-theme="light"] .cyber-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .model-card,
[data-theme="light"] .product-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  padding: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .cyber-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .model-card:hover,
[data-theme="light"] .product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Remove animations and excessive text-shadows for light mode */
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-extreme-title,
[data-theme="light"] .main-headline,
[data-theme="light"] .main-title-enhanced,
[data-theme="light"] .brand-title,
[data-theme="light"] .cyber-glitch,
[data-theme="light"] .cyber-heading,
[data-theme="light"] .cyber-tagline p,
[data-theme="light"] .cyber-glitch-text {
  animation: none !important; /* Disable all animations */
  text-shadow: none !important; /* Remove all text shadows */
}

/* Specific overrides for hero titles in light mode */
[data-theme="light"] .hero-title {
  color: var(--color-primary); /* Use primary color */
  font-size: 48px; /* Adjust as needed */
}

[data-theme="light"] .hero-extreme-title {
  color: var(--color-primary);
  font-size: 60px; /* Adjust as needed */
}

[data-theme="light"] .hero-subtitle {
  color: var(--color-text-secondary);
  text-shadow: none;
}

[data-theme="light"] .main-headline {
    color: var(--color-primary);
}
[data-theme="light"] .main-title-enhanced {
    color: var(--color-secondary); /* Or a different accent */
}
[data-theme="light"] .brand-title {
    color: var(--color-primary);
}

/* Remove background effects for light mode */
[data-theme="light"] .scan-lines,
[data-theme="light"] .digital-noise,
[data-theme="light"] #neural-canvas,
[data-theme="light"] .neural-background,
[data-theme="light"] .cyber-extreme-background,
[data-theme="light"] .floating-circuit,
[data-theme="light"] .data-nodes,
[data-theme="light"] .dashboard-container::after {
  display: none !important;
}

[data-theme="light"] .header-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-theme="light"] .nav-item {
  color: var(--color-primary);
  text-shadow: none;
  font-size: 14px; /* Added font size for readability */
  padding: 8px 12px; /* Added padding for consistency */
  display: inline-flex; /* Helps with alignment */
  align-items: center; /* Vertical alignment */
}
[data-theme="light"] .nav-item:hover {
  color: var(--color-primary-hover);
  background-color: rgba(0, 123, 255, 0.05);
  border-color: transparent; /* Or a very subtle border */
}
[data-theme="light"] .nav-item:before {
  display: none; /* Remove animated underline/scan */
}

[data-theme="light"] .theme-toggle {
  background-color: #e9ecef; /* Lighter background for the toggle itself */
  border: 1px solid var(--color-border);
}

[data-theme="light"] .theme-toggle:hover {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
}

[data-theme="light"] .theme-toggle::before {
  background-color: var(--color-primary); /* The moving part of the toggle */
}

[data-theme="light"] .theme-toggle .sun-icon {
  color: var(--color-primary); /* Sun icon color when active */
}

[data-theme="light"] .theme-toggle .moon-icon {
  color: var(--color-text-muted); /* Moon icon color when inactive */
}

/* Ensure cyberpunk specific classes don't apply their dark-theme styles in light mode */
[data-theme="light"] .cyberpunk-landing,
[data-theme="light"] .cyberpunk {
    /* Reset properties that might be set by .cyberpunk class if it's still applied */
    --neon-pink: var(--color-secondary);
    --neon-blue: var(--color-primary);
    /* ... reset other cyberpunk variables to light theme equivalents ... */
    background-color: var(--color-background) !important; /* Ensure body background is light */
    color: var(--color-text) !important;
}

[data-theme="light"] .cyber-section-title {
    color: var(--color-primary);
}
[data-theme="light"] .cyber-section-title:after {
    background: var(--color-primary);
}

[data-theme="light"] .status-indicator { /* For server status etc. */
    background-color: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
}

[data-theme="light"] .terminal-access {
    color: var(--color-primary);
    background: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.3);
    box-shadow: none;
}
[data-theme="light"] .terminal-access:hover {
    background: rgba(0, 123, 255, 0.1);
    border-color: var(--color-primary);
}
[data-theme="light"] .terminal-access i {
    color: var(--color-primary);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .theme-toggle-container {
    margin-bottom: 15px;
  }
}

[data-theme="light"] .model-card .model-icon,
[data-theme="light"] .model-card .model-name {
  color: var(--color-text); /* Primary dark text color */
}

[data-theme="light"] .model-card .model-description,
[data-theme="light"] .model-card .model-size {
  color: var(--color-text-secondary); /* Slightly lighter dark text for secondary info */
}

[data-theme="light"] .model-card.active .model-icon,
[data-theme="light"] .model-card:focus .model-icon,
[data-theme="light"] .model-card:hover .model-icon,
[data-theme="light"] .model-card.active .model-name,
[data-theme="light"] .model-card:focus .model-name,
[data-theme="light"] .model-card:hover .model-name {
  color: var(--color-primary); /* Use accent color for text on hover/active for light theme */
}

[data-theme="light"] .prompt-template-select {
  background-color: var(--color-background);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="light"] .advanced-model-selector {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .advanced-model-selector .model-info-label,
[data-theme="light"] .advanced-model-selector .tokens-label,
[data-theme="light"] .advanced-model-selector .prompt-templates-label {
  color: var(--color-text-secondary);
}

[data-theme="light"] .advanced-model-selector .model-info-value,
[data-theme="light"] .advanced-model-selector .tokens-value {
  color: var(--color-text);
}

[data-theme="light"] #model-search {
  background-color: var(--color-background);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: none;
}

[data-theme="light"] #model-search:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  color: var(--color-text);
}

[data-theme="light"] .models-container {
  background-color: transparent;
}

[data-theme="light"] .model-tag {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="light"] .model-tag:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-primary-text);
  border-color: var(--color-primary-hover);
}

[data-theme="light"] .model-tag.model-active {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

[data-theme="light"] .model-tag .model-tag-icon {
  color: var(--color-primary);
}

[data-theme="light"] .model-tag.model-active .model-tag-icon {
  color: var(--color-primary-text);
}

[data-theme="light"] .settings-item {
  background-color: var(--color-surface);
}

[data-theme="light"] .settings-item:hover {
  background-color: #e9ecef;
}

[data-theme="light"] .settings-icon {
 color: var(--color-primary);
}

[data-theme="light"] .toggle-slider {
  background-color: #ccc;
  border-color: #bbb;
}

[data-theme="light"] .toggle-slider:before {
  background-color: var(--color-background);
}

[data-theme="light"] input:checked + .toggle-slider {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-theme="light"] input:checked + .toggle-slider:before {
  background-color: var(--color-primary-text);
}

[data-theme="light"] .sidebar {
  background: var(--color-surface);
  color: var(--color-text);
  border-right-color: var(--color-border);
}

[data-theme="light"] .main-content-flex {
  background-color: var(--color-background);
  color: var(--color-text);
}

[data-theme="light"] .dashboard-advanced-panel {
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

[data-theme="light"] .model-info-label,
[data-theme="light"] .tokens-label,
[data-theme="light"] .prompt-templates-label,
[data-theme="light"] .dropdown-icon {
  color: var(--color-text-secondary);
}

[data-theme="light"] .model-info-value,
[data-theme="light"] .tokens-value {
  color: var(--color-text);
}

[data-theme="light"] .text-color {
    color: var(--color-text) !important;
}

/* Attempt to catch inline white text - use with caution */
/*
[data-theme="light"] [style*="color: #FFFFFF"],
[data-theme="light"] [style*="color: #ffffff"],
[data-theme="light"] [style*="color: white"] {
    color: var(--color-text) !important;
}
*/

[data-theme="light"] .search-input::placeholder,
[data-theme="light"] #model-search::placeholder {
  color: var(--color-text-muted);
}

/* Ensure specific cyberpunk classes also adopt light theme text if they were missed */
[data-theme="light"] .cyber-glitch,
[data-theme="light"] .cyber-heading,
[data-theme="light"] .cyber-tagline p,
[data-theme="light"] .cyber-glitch-text {
  color: var(--color-text); /* Fallback, specific overrides for titles are already present */
}

/* Chat History Sidebar Light Theme Adjustments */
[data-theme="light"] .chat-history .chat-item .chat-item-title {
  color: #212529; /* Explicitly set to dark grey for light theme chat titles */
}

[data-theme="light"] .chat-history .chat-item .chat-item-date {
  color: var(--color-text-secondary); /* Secondary, slightly lighter dark text */
}

[data-theme="light"] .chat-history .chat-item.active .chat-item-title,
[data-theme="light"] .chat-history .chat-item:hover .chat-item-title {
  color: var(--color-primary); /* Accent color for active/hover states */
}

[data-theme="light"] .chat-history .chat-item.active .chat-item-date,
[data-theme="light"] .chat-history .chat-item:hover .chat-item-date {
  color: var(--color-primary); /* Accent color for active/hover states */
}

[data-theme="light"] .chat-history .empty-history {
  color: var(--color-text-muted); /* Muted text for empty state */
}

[data-theme="light"] .chat-history .empty-history i {
  color: var(--color-text-muted); /* Muted icon color */
}

[data-theme="light"] .chat-history .empty-history p {
  color: var(--color-text-muted); /* Muted text color */
}

/* Ensure chat item actions (like delete icon) are also visible */
[data-theme="light"] .chat-history .chat-item .chat-item-actions button {
  color: var(--color-text-secondary);
}

[data-theme="light"] .chat-history .chat-item .chat-item-actions button:hover {
  color: var(--color-error); /* Or a suitable hover color */
}