/* ==========================================================================
   NewsHub Dark Mode — Clean CSS Custom Properties Override
   Loads BEFORE theme-redesign.css so variables are available.
   No !important needed — variables cascade naturally.
   ========================================================================== */

[data-theme="dark"] {
  /* === Surface Colors === */
  --bg-primary: #1A2735;
  --bg-secondary: #0F1923;
  --bg-tertiary: #223040;
  --bg-card: #1A2735;
  --bg-header: #1A2735;

  /* === Text Colors === */
  --text-primary: #E8ECF0;
  --text-secondary: #B0B8C1;
  --text-muted: #6B7A8A;

  /* === Borders === */
  --border-color: #2A3A4A;

  /* === Accent === */
  --accent-color: #FF6B6B;
  --accent-hover: #FF8585;

  /* === Shadows === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* === Form Elements === */
  --input-bg: #1A2735;
  --input-border: #2A3A4A;

  /* === Interactive === */
  --hover-bg: #1F3040;
  --footer-bg: #0D1520;
  --footer-text: rgba(255, 255, 255, 0.6);
  --badge-bg: #223040;
  --badge-text: #B0B8C1;
  --link-color: #FF6B6B;
  --overlay-dark: rgba(0, 0, 0, 0.8);
  --carousel-caption-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

/* === Body === */
[data-theme="dark"] body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* === Header === */
[data-theme="dark"] .site-navbar {
  background-color: var(--bg-header);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .site-navbar.navbar-scrolled {
  background: rgba(26, 39, 53, 0.92);
}

[data-theme="dark"] .site-navbar .navbar-brand,
[data-theme="dark"] .site-navbar .nav-link {
  color: var(--text-primary);
}

/* === Cards & Posts === */
[data-theme="dark"] .post-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .post-item .post-title {
  color: var(--text-primary);
}

[data-theme="dark"] .post-item .post-title:hover {
  color: var(--accent-color);
}

[data-theme="dark"] .post-item .post-footer {
  color: var(--text-muted);
}

/* === Forms === */
[data-theme="dark"] .form-control {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

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

/* === Buttons === */
[data-theme="dark"] .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

[data-theme="dark"] .btn-outline-dark {
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-dark:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

/* === Sidebar === */
[data-theme="dark"] .sidebar-block {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .sidebar-heading {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sidebar-heading span::before {
  background: var(--accent-color);
}

/* === Site Heading === */
[data-theme="dark"] .site-heading {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .site-heading span {
  border-left-color: var(--accent-color);
}

/* === Slider === */
[data-theme="dark"] #latestSlider {
  border-radius: 8px;
  overflow: hidden;
}

/* === Links === */
[data-theme="dark"] a {
  color: var(--link-color);
}

[data-theme="dark"] a:hover {
  color: var(--accent-hover);
}

/* === Pagination === */
[data-theme="dark"] .pagination .page-link {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

[data-theme="dark"] .pagination .page-link:hover {
  background-color: var(--hover-bg);
}

/* === Breadcrumb === */
[data-theme="dark"] .breadcrumb {
  background: var(--bg-card);
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--accent-color);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--text-secondary);
}

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

/* === Cards (Bootstrap) === */
[data-theme="dark"] .card {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

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

[data-theme="dark"] .card-footer {
  background-color: var(--bg-tertiary);
  border-top-color: var(--border-color);
}

/* === Dropdown === */
[data-theme="dark"] .dropdown-menu {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
  background: var(--hover-bg);
}

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

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

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

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

/* === Nav Tabs === */
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
}

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

/* === Mobile Nav === */
[data-theme="dark"] .offcanvas-collapse {
  background: var(--bg-card);
}

[data-theme="dark"] .navbar-categories .nav-link {
  color: var(--text-primary);
}

[data-theme="dark"] .navbar-categories .nav-link:hover {
  background: var(--hover-bg);
}

[data-theme="dark"] .navbar-categories .nav-link.active {
  background: var(--accent-color);
  color: #fff;
}

/* === Theme Toggle === */
[data-theme="dark"] .theme-toggle-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background: var(--hover-bg);
  border-color: var(--accent-color);
}

/* === Utility Overrides === */
[data-theme="dark"] .bg-white {
  background-color: var(--bg-card);
}

[data-theme="dark"] .bg-light {
  background-color: var(--bg-tertiary);
}

[data-theme="dark"] .text-muted {
  color: var(--text-muted);
}

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

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

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* === Search === */
[data-theme="dark"] body.search {
  background: var(--bg-secondary);
}

[data-theme="dark"] .search-box {
  background: var(--bg-secondary);
}

[data-theme="dark"] .autocomplete-suggestions {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .autocomplete-suggestion {
  color: var(--text-secondary);
}

[data-theme="dark"] .autocomplete-suggestion b {
  color: var(--text-primary);
}

[data-theme="dark"] .autocomplete-suggestion.selected {
  background: var(--accent-color);
  color: #fff;
}

[data-theme="dark"] .autocomplete-suggestion.selected b {
  color: #fff;
}

/* === Dark mode placeholder animation === */
[data-theme="dark"] .placeholder {
  background-color: #2A3A4A;
  animation: loadingPlaceholdersDark 1.5s ease-in infinite;
}

@keyframes loadingPlaceholdersDark {
  0% { background-color: #2A3A4A; }
  50% { background-color: #3A4A5A; }
  100% { background-color: #2A3A4A; }
}