/* 
 * BERLIN IMMOBILIEN - Dark Mode Styles
 * Dark mode theme for the real estate website
 */

/* ===== DARK MODE VARIABLES ===== */
.dark-mode {
  /* Primary Colors */
  --primary-turquoise: #0cebeb;
  --primary-blue: #20e3b2;
  --primary-violet: #7873f5;
  
  /* Inverted Neutral Colors */
  --neutral-100: #1a202c;
  --neutral-200: #2d3748;
  --neutral-300: #4a5568;
  --neutral-400: #718096;
  --neutral-500: #a0aec0;
  --neutral-600: #cbd5e0;
  --neutral-700: #e2e8f0;
  --neutral-800: #edf2f7;
  --neutral-900: #f7fafc;
  
  /* Secondary Colors - Brighter for Dark Mode */
  --secondary-yellow: #ffd000;
  --secondary-red: #ff4d4d;
  --secondary-green: #4ade80;
  
  /* Shadows - Darker and More Pronounced */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.4);
}

/* ===== DARK MODE BASE STYLES ===== */
.dark-mode body {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

/* ===== DARK MODE TYPOGRAPHY ===== */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
  color: var(--neutral-800);
}

.dark-mode p {
  color: var(--neutral-600);
}

.dark-mode a {
  color: var(--primary-turquoise);
}

.dark-mode a:hover {
  color: var(--primary-blue);
}

.dark-mode .text-primary {
  color: var(--primary-violet);
}

.dark-mode .text-secondary {
  color: var(--primary-turquoise);
}

/* ===== DARK MODE COMPONENTS ===== */

/* Navigation */
.dark-mode .navbar {
  background-color: rgba(26, 32, 44, 0.95);
  backdrop-filter: blur(10px);
}

.dark-mode .navbar-brand {
  color: var(--primary-turquoise);
}

.dark-mode .nav-link {
  color: var(--neutral-500);
}

.dark-mode .nav-link:hover,
.dark-mode .nav-link.active {
  color: var(--primary-turquoise);
}

.dark-mode .navbar-toggler span {
  background-color: var(--neutral-500);
}

.dark-mode .navbar-collapse {
  background-color: var(--neutral-100);
}

.dark-mode .dropdown-menu {
  background-color: var(--neutral-200);
  border-color: var(--neutral-300);
}

.dark-mode .dropdown-item {
  color: var(--neutral-500);
}

.dark-mode .dropdown-item:hover {
  background-color: var(--neutral-300);
  color: var(--neutral-800);
}

/* Buttons */
.dark-mode .btn-outline {
  border-color: var(--primary-turquoise);
  color: var(--primary-turquoise);
}

.dark-mode .btn-outline:hover {
  background-color: var(--primary-turquoise);
  color: var(--neutral-100);
}

/* Cards */
.dark-mode .card,
.dark-mode .property-card,
.dark-mode .feature-card,
.dark-mode .blog-card {
  background-color: var(--neutral-200);
  box-shadow: var(--shadow-md);
}

.dark-mode .card-body,
.dark-mode .property-content,
.dark-mode .feature-content,
.dark-mode .blog-content {
  color: var(--neutral-600);
}

.dark-mode .card-title,
.dark-mode .property-title,
.dark-mode .feature-title,
.dark-mode .blog-title {
  color: var(--neutral-800);
}

.dark-mode .card-text,
.dark-mode .property-address,
.dark-mode .feature-text,
.dark-mode .blog-excerpt {
  color: var(--neutral-500);
}

.dark-mode .card-footer,
.dark-mode .property-footer,
.dark-mode .blog-footer {
  background-color: var(--neutral-300);
  border-top-color: var(--neutral-400);
}

.dark-mode .card-detail,
.dark-mode .property-feature,
.dark-mode .property-agent-name {
  color: var(--neutral-500);
}

/* Hero Section */
.dark-mode .hero-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
}

.dark-mode .hero-search {
  background-color: var(--neutral-200);
  box-shadow: var(--shadow-xl);
}

.dark-mode .hero-search-title {
  color: var(--neutral-800);
}

.dark-mode .hero-search-tab {
  color: var(--neutral-500);
}

.dark-mode .hero-search-tab.active {
  color: var(--primary-turquoise);
  border-bottom-color: var(--primary-turquoise);
}

/* Forms */
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: var(--neutral-300);
  border-color: var(--neutral-400);
  color: var(--neutral-700);
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  border-color: var(--primary-turquoise);
  box-shadow: 0 0 0 0.2rem rgba(12, 235, 235, 0.25);
}

.dark-mode .form-label,
.dark-mode .form-check-label {
  color: var(--neutral-600);
}

.dark-mode .form-check-input {
  background-color: var(--neutral-300);
  border-color: var(--neutral-400);
}

.dark-mode .form-check-input:checked {
  background-color: var(--primary-turquoise);
  border-color: var(--primary-turquoise);
}

/* Range Slider */
.dark-mode .range-slider-rail {
  background-color: var(--neutral-400);
}

.dark-mode .range-slider-handle {
  background-color: var(--neutral-200);
  border-color: var(--primary-turquoise);
}

.dark-mode .range-slider-values {
  color: var(--neutral-500);
}

/* Badges */
.dark-mode .badge {
  background: var(--gradient-primary);
}

.dark-mode .badge-warning {
  color: var(--neutral-100);
}

/* Alerts */
.dark-mode .alert-primary {
  color: var(--primary-turquoise);
  background-color: rgba(12, 235, 235, 0.1);
  border-color: rgba(12, 235, 235, 0.2);
}

.dark-mode .alert-success {
  color: var(--secondary-green);
  background-color: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
}

.dark-mode .alert-warning {
  color: var(--secondary-yellow);
  background-color: rgba(255, 208, 0, 0.1);
  border-color: rgba(255, 208, 0, 0.2);
}

.dark-mode .alert-danger {
  color: var(--secondary-red);
  background-color: rgba(255, 77, 77, 0.1);
  border-color: rgba(255, 77, 77, 0.2);
}

/* Features Section */
.dark-mode .features {
  background-color: var(--neutral-100);
}

.dark-mode .feature-icon {
  background: var(--gradient-primary);
  color: white;
}

/* Properties Section */
.dark-mode .properties {
  background-color: var(--neutral-200);
}

.dark-mode .property-filter {
  background-color: var(--neutral-300);
  border-color: var(--neutral-400);
  color: var(--neutral-600);
}

.dark-mode .property-filter:hover {
  border-color: var(--primary-turquoise);
  color: var(--primary-turquoise);
}

.dark-mode .property-filter.active {
  background: var(--gradient-primary);
  color: white;
}

.dark-mode .property-price {
  color: var(--primary-turquoise);
}

.dark-mode .property-action {
  background-color: var(--neutral-300);
  color: var(--neutral-500);
}

.dark-mode .property-action:hover {
  background: var(--gradient-primary);
  color: white;
}

/* Testimonials */
.dark-mode .testimonials {
  background: linear-gradient(135deg, var(--neutral-900), var(--neutral-800));
}

.dark-mode .testimonial-slide {
  background-color: rgba(26, 32, 44, 0.5);
}

/* Call to Action */
.dark-mode .cta {
  background-color: var(--neutral-900);
}

/* Footer */
.dark-mode .footer {
  background-color: var(--neutral-900);
  color: var(--neutral-500);
}

.dark-mode .footer-title {
  color: var(--neutral-800);
}

.dark-mode .footer-link a {
  color: var(--neutral-500);
}

.dark-mode .footer-link a:hover {
  color: var(--primary-turquoise);
}

.dark-mode .footer-contact-icon {
  color: var(--primary-turquoise);
}

.dark-mode .footer-social-link {
  background-color: var(--neutral-800);
}

.dark-mode .footer-bottom {
  border-top-color: var(--neutral-800);
}

/* ===== DARK MODE FEATURE SPECIFIC STYLES ===== */

/* Map */
.dark-mode .map-container {
  box-shadow: var(--shadow-lg);
}

.dark-mode .map-filters-container,
.dark-mode .map-popup,
.dark-mode .map-legend,
.dark-mode .map-results-count {
  background-color: var(--neutral-200);
}

.dark-mode .map-filters-header {
  background: var(--gradient-primary);
}

.dark-mode .map-filters-body {
  color: var(--neutral-600);
}

.dark-mode .map-filters-section-title {
  color: var(--neutral-700);
}

.dark-mode .map-filter-label {
  color: var(--neutral-600);
}

.dark-mode .map-price-input input {
  background-color: var(--neutral-300);
  border-color: var(--neutral-400);
  color: var(--neutral-700);
}

.dark-mode .map-filters-footer {
  border-top-color: var(--neutral-300);
}

.dark-mode .map-popup-address {
  color: var(--neutral-500);
}

.dark-mode .map-popup-price {
  color: var(--primary-turquoise);
}

.dark-mode .map-popup-feature {
  color: var(--neutral-500);
}

.dark-mode .map-popup-link {
  background-color: var(--neutral-300);
  border-top-color: var(--neutral-400);
}

.dark-mode .map-legend-item {
  color: var(--neutral-600);
}

.dark-mode .map-search-input {
  background-color: var(--neutral-300);
  color: var(--neutral-700);
}

/* Virtual Tour */
.dark-mode .virtual-tour-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.dark-mode .virtual-tour-control {
  background: rgba(26, 32, 44, 0.5);
}

/* Calculator */
.dark-mode .calculator {
  background-color: var(--neutral-200);
}

.dark-mode .calculator-result {
  background: var(--gradient-primary);
}

.dark-mode .calculator-breakdown-item {
  border-bottom-color: var(--neutral-300);
}

.dark-mode .calculator-breakdown-label {
  color: var(--neutral-500);
}

/* Chatbot */
.dark-mode .chatbot-container {
  background-color: var(--neutral-200);
}

.dark-mode .chatbot-header {
  background: var(--gradient-primary);
}

.dark-mode .chatbot-message-bot {
  background-color: var(--neutral-300);
  color: var(--neutral-700);
}

.dark-mode .chatbot-input {
  border-top-color: var(--neutral-300);
}

.dark-mode .chatbot-input-field {
  background-color: var(--neutral-300);
  border-color: var(--neutral-400);
  color: var(--neutral-700);
}

/* Notification */
.dark-mode .notification {
  background-color: var(--neutral-200);
}

.dark-mode .notification-close {
  color: var(--neutral-500);
}

/* AR Preview */
.dark-mode .ar-preview-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* AI Search */
.dark-mode .ai-search-input {
  background-color: var(--neutral-300);
  border-color: var(--neutral-400);
  color: var(--neutral-700);
}

.dark-mode .ai-search-results {
  background-color: var(--neutral-200);
}

.dark-mode .ai-search-result {
  border-bottom-color: var(--neutral-300);
}

.dark-mode .ai-search-result:hover {
  background-color: var(--neutral-300);
}

.dark-mode .ai-search-suggestion {
  background-color: var(--neutral-300);
  color: var(--neutral-500);
}

/* Blog Detail */
.dark-mode .blog-detail-meta {
  color: var(--neutral-500);
}

.dark-mode .blog-detail-subtitle {
  color: var(--neutral-500);
}

.dark-mode .blog-detail-content blockquote {
  border-left-color: var(--primary-turquoise);
  color: var(--neutral-500);
}

.dark-mode .blog-detail-tag {
  background-color: var(--neutral-300);
  color: var(--neutral-600);
}

.dark-mode .blog-detail-share-link {
  background-color: var(--neutral-300);
  color: var(--neutral-600);
}

.dark-mode .blog-detail-author {
  background-color: var(--neutral-200);
}

.dark-mode .blog-detail-author-bio {
  color: var(--neutral-500);
}

.dark-mode .blog-detail-author-social-link {
  background-color: var(--neutral-300);
  color: var(--neutral-600);
}

.dark-mode .blog-detail-comment-content {
  background-color: var(--neutral-200);
}

.dark-mode .blog-detail-comment-date {
  color: var(--neutral-500);
}

/* Property Detail */
.dark-mode .property-detail-address {
  color: var(--neutral-500);
}

.dark-mode .property-detail-price {
  color: var(--primary-turquoise);
}

.dark-mode .property-detail-id {
  color: var(--neutral-500);
}

.dark-mode .property-detail-section-title::after {
  background: var(--gradient-primary);
}

.dark-mode .property-detail-feature i {
  background: var(--gradient-primary);
}

.dark-mode .property-detail-amenity i {
  color: var(--primary-turquoise);
}

.dark-mode .property-detail-agent {
  background-color: var(--neutral-200);
}

.dark-mode .property-detail-agent-title {
  color: var(--neutral-500);
}

.dark-mode .property-detail-form {
  background-color: var(--neutral-200);
}

/* ===== DARK MODE ANIMATIONS ===== */
.dark-mode .gradient-animate {
  background: linear-gradient(270deg, var(--primary-turquoise), var(--primary-blue), var(--primary-violet));
}

.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--neutral-300) 25%, var(--neutral-400) 50%, var(--neutral-300) 75%);
}

/* ===== DARK MODE TOGGLE ===== */
.dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--neutral-800);
  color: var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.dark-mode .dark-mode-toggle {
  background-color: var(--neutral-200);
  color: var(--neutral-800);
}

/* Sun and Moon Icons */
.dark-mode-toggle i {
  font-size: 1.5rem;
  transition: transform var(--transition-normal);
}

.dark-mode-toggle:hover i {
  transform: rotate(30deg);
}

/* ===== DARK MODE TRANSITION ===== */
body,
body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== DARK MODE PRINT STYLES ===== */
@media print {
  .dark-mode {
    --neutral-100: white;
    --neutral-200: white;
    --neutral-300: #f0f0f0;
    --neutral-400: #d0d0d0;
    --neutral-500: #a0a0a0;
    --neutral-600: #707070;
    --neutral-700: #404040;
    --neutral-800: #202020;
    --neutral-900: black;
    
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
  
  .dark-mode body {
    background-color: white;
    color: black;
  }
  
  .dark-mode .card,
  .dark-mode .property-card,
  .dark-mode .feature-card {
    background-color: white;
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .dark-mode-toggle {
    display: none;
  }
}