/* ============================================
   DARK MODE CSS - Tecbamin
   Modern dark theme with smooth transitions
   ============================================ */

/* ====================
   CSS Variables - Light Mode (Default)
   ==================== */
:root {
  /* Background Colors */
  --bg-primary: #f7f5f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8f9fa;
  --bg-quaternary: #e9ecef;
  --bg-card: #ffffff;

  /* Text Colors */
  --text-primary: #221d1d;
  --text-secondary: #6c757d;
  --text-tertiary: #495057;
  --text-muted: #8a8a8a;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-color: #e9ecef;
  --border-light: #f1f3f5;
  --border-medium: #dee2e6;

  /* Shadow Colors */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(102, 126, 234, 0.15);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(102, 126, 234, 0.15);

  /* Gradients - Keep vibrant in both modes */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-navbar: linear-gradient(135deg, #667eea 0%, #2c1a87 100%);

  /* Ad Container Colors */
  --ad-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --ad-text: #6c757d;

  /* Special Colors */
  --spec-badge-bg: #f8f9fa;
  --spec-badge-text: #495057;
  --price-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;

  /* Transition */
  --transition-theme: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================
   CSS Variables - Dark Mode
   ==================== */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #242424;
  --bg-quaternary: #2d2d2d;
  --bg-card: #1a1a1a;

  /* Text Colors */
  --text-primary: #e5e5e5;
  --text-secondary: #a0a0a0;
  --text-tertiary: #8a8a8a;
  --text-muted: #6c6c6c;
  --text-inverse: #0f0f0f;

  /* Border Colors */
  --border-color: #2d2d2d;
  --border-light: #3a3a3a;
  --border-medium: #404040;

  /* Shadow Colors - Stronger in dark mode */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 30px rgba(102, 126, 234, 0.25);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 30px rgba(102, 126, 234, 0.3);

  /* Gradients - Slightly adjusted for dark mode */
  --gradient-primary: linear-gradient(135deg, #7c8cfa 0%, #8a5ab8 100%);
  --gradient-secondary: linear-gradient(135deg, #ff9ff3 0%, #ff6b7e 100%);
  --gradient-success: linear-gradient(135deg, #5bbcff 0%, #10d8ff 100%);
  --gradient-navbar: linear-gradient(135deg, #5568d3 0%, #1e0f5c 100%);

  /* Ad Container Colors */
  --ad-bg: linear-gradient(135deg, #1a1a1a 0%, #242424 100%);
  --ad-text: #8a8a8a;

  /* Special Colors */
  --spec-badge-bg: #242424;
  --spec-badge-text: #a0a0a0;
  --price-color: #4ade80;
  --warning-color: #fbbf24;
  --danger-color: #ef4444;
}

/* ====================
   Apply Variables to Elements
   ==================== */

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

/* Cards */
.phone-card,
.article-card,
.brand-card,
.card,
.modal-content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition-theme);
}

.phone-card:hover,
.article-card:hover,
.brand-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

/* Card Text Elements */
[data-theme="dark"] .phone-card-title,
[data-theme="dark"] .article-title,
[data-theme="dark"] .brand-name,
[data-theme="dark"] .card-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-primary) !important;
}

/* Card headers (e.g., TOC) */
[data-theme="dark"] .card-header {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Preserve article heading accent colors */
[data-theme="dark"] .article-content h2 {
  color: #007bff !important;
}

/* Form/readability tweaks */
[data-theme="dark"] .comment-form,
[data-theme="dark"] .comment-box,
[data-theme="dark"] .comment-form .form-control,
[data-theme="dark"] .comment-form textarea {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .comment-form .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .card-title a,
[data-theme="dark"] .related-link {
  color: var(--text-primary) !important;
}

/* Phones page - live search & quick search */
[data-theme="dark"] .live-search-dropdown {
  background: linear-gradient(180deg, #161616, #1e1e1e) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] .live-search-item {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .live-search-item:hover {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .live-search-item-name {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .live-search-item-specs {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .live-search-empty,
[data-theme="dark"] .live-search-loading {
  color: var(--text-primary) !important;
  background: linear-gradient(180deg, #1a1a1a, #212121) !important;
}

[data-theme="dark"] .live-search-highlight {
  background: #233266 !important;
  color: #8fb4ff !important;
}

[data-theme="dark"] #quick-search {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #quick-search::placeholder {
  color: var(--text-secondary) !important;
}

/* Phones page - filter chips */
[data-theme="dark"] .preset-chip,
[data-theme="dark"] .filter-tag {
  background: #1f1f1f !important;
  color: #f3f3f3 !important;
  border-color: #333 !important;
}

[data-theme="dark"] .preset-chip:hover {
  background: #2b2b2b !important;
  border-color: #8fb4ff !important;
  color: #f3f3f3 !important;
}

/* Feature checkbox hover */
[data-theme="dark"] .feature-checkbox:hover {
  background: var(--bg-tertiary) !important;
}

/* Filter search input */
[data-theme="dark"] #search-input {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #search-input::placeholder {
  color: var(--text-secondary) !important;
}

/* Floating toolbar buttons */
[data-theme="dark"] #floating-toolbar {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] #floating-toolbar .btn {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  background: transparent !important;
}

[data-theme="dark"] #floating-toolbar .btn:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Phones listing cards */
[data-theme="dark"] .phone-list-card {
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--border-color) !important;
}

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

[data-theme="dark"] .list-spec-item {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .phone-list-price {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .phone-list-price .price-starts-from {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .phone-list-actions {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .filter-section {
  background: transparent !important;
}

[data-theme="dark"] .filter-sidebar {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] .filter-sidebar::-webkit-scrollbar {
  width: 10px;
  background: var(--bg-secondary);
}

[data-theme="dark"] .filter-sidebar::-webkit-scrollbar-thumb {
  background: var(--bg-quaternary);
  border-radius: 6px;
  border: 2px solid var(--bg-secondary);
}

[data-theme="dark"] .filter-sidebar::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Auth pages: keep inputs readable in dark mode */
[data-theme="dark"] .auth-wrapper input,
[data-theme="dark"] .auth-wrapper textarea,
[data-theme="dark"] .auth-wrapper select,
[data-theme="dark"] .auth-form-control {
  background-color: var(--auth-input-bg, #111) !important;
  color: var(--auth-text-primary, #e5e5e5) !important;
  border-color: var(--auth-input-border, #2d2d2d) !important;
}

[data-theme="dark"] .auth-wrapper input::placeholder,
[data-theme="dark"] .auth-form-control::placeholder {
  color: var(--auth-text-secondary, #a0a0a0) !important;
}
.article-excerpt,
.text-muted,
.small,
.card-text {
  color: var(--text-secondary) !important;
}

/* Borders */
.phone-price-section,
.article-meta,
.border,
.border-top,
.border-bottom {
  border-color: var(--border-color) !important;
}

/* Spec Badges */
.spec-badge {
  background-color: var(--spec-badge-bg) !important;
  color: var(--spec-badge-text) !important;
}

/* Ad Containers */
.ad-container,
.ad-container-horizontal {
  background: var(--ad-bg) !important;
}

.ad-container .text-muted,
.ad-container-horizontal .text-muted {
  color: var(--ad-text) !important;
}

/* Buttons - Keep gradients but adjust slightly */
.cta-button {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Featured Article Banner */
.featured-article-banner {
  background: var(--gradient-secondary) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Hero Banner */
.hero-banner {
  background: var(--gradient-primary) !important;
}

/* Column Section Headers */
.column-section-header {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Forms */
.form-control,
.form-select,
input,
textarea,
select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Dropdowns & Modals */
.dropdown-menu,
.modal-body {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

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

.dropdown-item:hover {
  background-color: var(--bg-tertiary) !important;
}

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

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-tertiary) !important;
}

/* Pagination */
.page-link-custom {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.page-link-custom:hover,
.page-link-custom.active {
  background: var(--gradient-primary) !important;
  color: white !important;
}

/* List Groups */
.list-group-item {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

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

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--bg-tertiary) !important;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
  color: var(--text-primary) !important;
}

/* ====================
   Dark Mode Toggle Button
   ==================== */
.dark-mode-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-size: 1.2rem;
  padding: 0;
  backdrop-filter: blur(10px);
}

.dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1) rotate(15deg);
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

.dark-mode-toggle i {
  transition: all 0.3s ease;
}

/* Animation for icon transition */
@keyframes rotate-in {
  from {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.icon-animate {
  animation: rotate-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================
   Special Dark Mode Adjustments
   ==================== */

/* Images - Slight opacity reduction in dark mode */
[data-theme="dark"] img {
  opacity: 0.9;
  transition: opacity 0.3s;
}

[data-theme="dark"] img:hover {
  opacity: 1;
}

/* Links */
[data-theme="dark"] a {
  color: #8a9cff;
}

[data-theme="dark"] a:hover {
  color: #a5b4ff;
}

/* Article content readability */
[data-theme="dark"] .article-content {
  color: var(--text-primary) !important;
}

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

/* Code blocks (if any) */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Scrollbar - Dark mode styling */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  background-color: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bg-quaternary);
  border-radius: 6px;
  border: 2px solid var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Selection color */
[data-theme="dark"] ::selection {
  background: rgba(102, 126, 234, 0.3);
  color: var(--text-primary);
}

/* ====================
   Smooth Transitions
   ==================== */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent transition on page load */
.preload * {
  transition: none !important;
}

/* ====================
   Responsive Dark Mode Toggle
   ==================== */
@media (max-width: 768px) {
  .dark-mode-toggle {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .dark-mode-toggle {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}