/* ==========================================================================
   Dark Mode — Full overrides for body.darkmode
   Variables are already swapped in variables.css; this file handles
   component-level tweaks that need more than a variable swap.
   ========================================================================== */

/* ==========================================================================
   Global
   ========================================================================== */
body.darkmode {
  color-scheme: dark;
}

/* ==========================================================================
   Backgrounds
   ========================================================================== */
body.darkmode {
  background-color: var(--bg-body);
}

body.darkmode .bg-surface,
body.darkmode .auth-card,
body.darkmode .manga-details,
body.darkmode .chapter-list-container,
body.darkmode .sidebar-chart,
body.darkmode .browse-filters,
body.darkmode .update-item,
body.darkmode .updates-list__item,
body.darkmode .listing-item,
body.darkmode .category-block {
  background-color: var(--bg-surface);
}

/* ==========================================================================
   Text Colors
   ========================================================================== */
body.darkmode {
  color: var(--text-primary);
}

body.darkmode .text-muted,
body.darkmode .manga-header__alt-title,
body.darkmode .manga-description__text,
body.darkmode .comment__text,
body.darkmode .site-footer__desc,
body.darkmode .settings-section__desc {
  color: var(--text-secondary);
}

body.darkmode .manga-card__title,
body.darkmode .listing-item__title a,
body.darkmode .update-item__title a,
body.darkmode .updates-list__title a,
body.darkmode .chapter-list__link,
body.darkmode .sidebar-chart__info-title {
  color: var(--text-primary);
}

/* ==========================================================================
   Borders
   ========================================================================== */
body.darkmode .border,
body.darkmode .border-top,
body.darkmode .border-bottom,
body.darkmode .chapter-card,
body.darkmode .chapter-list__item,
body.darkmode .manga-details,
body.darkmode .chapter-list-container,
body.darkmode .chapter-list-header,
body.darkmode .sidebar-chart,
body.darkmode .browse-filters,
body.darkmode .update-item,
body.darkmode .updates-list__item,
body.darkmode .listing-item,
body.darkmode .category-block,
body.darkmode .genre-card,
body.darkmode .settings-row,
body.darkmode .library-tabs,
body.darkmode hr,
body.darkmode .auth-divider::before,
body.darkmode .auth-divider::after,
body.darkmode .site-footer,
body.darkmode .site-footer__bottom,
body.darkmode .reader-nav,
body.darkmode .chapter-nav,
body.darkmode .comment {
  border-color: var(--border-color);
}

/* ==========================================================================
   Cards & Surfaces
   ========================================================================== */
body.darkmode .manga-card {
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

body.darkmode .manga-card:hover {
  box-shadow: var(--shadow-lg);
}

body.darkmode .manga-card__cover,
body.darkmode .listing-item__cover,
body.darkmode .update-item__cover,
body.darkmode .updates-list__cover,
body.darkmode .sidebar-chart__cover,
body.darkmode .manga-poster,
body.darkmode .comment__avatar,
body.darkmode .reader-image-loading {
  background-color: var(--bg-surface-sunken);
}

body.darkmode .chapter-card {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

body.darkmode .chapter-card:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* ==========================================================================
   Inputs & Forms
   ========================================================================== */
body.darkmode .form-control,
body.darkmode .form-select {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.darkmode .form-control:focus,
body.darkmode .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.20);
}

body.darkmode .form-control::placeholder {
  color: var(--text-tertiary);
}

body.darkmode .search-bar__input {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.darkmode .search-bar__input:focus {
  background-color: var(--bg-surface);
  border-color: var(--color-primary);
}

body.darkmode .chapter-search__input {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.darkmode .browse-filters__select,
body.darkmode .reader-nav__select,
body.darkmode .advanced-dropdown__trigger {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.darkmode .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%239CA3AF'/%3E%3C/svg%3E");
}

body.darkmode .browse-filters__select,
body.darkmode .reader-nav__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%239CA3AF'/%3E%3C/svg%3E");
}

body.darkmode .comment-form textarea {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
body.darkmode .site-header {
  background-color: var(--bg-surface);
  border-bottom-color: var(--border-color);
}

body.darkmode .site-header__logo {
  color: var(--text-primary);
}

body.darkmode .sidebar {
  background-color: var(--bg-surface);
  border-right-color: var(--border-color);
}

body.darkmode .mobile-menu {
  background-color: var(--bg-surface);
}

body.darkmode .mobile-menu-toggle {
  color: var(--text-primary);
}

body.darkmode .mobile-menu-toggle:hover {
  background-color: var(--bg-surface-sunken);
}

body.darkmode .reader-nav {
  background-color: var(--bg-surface);
}

/* ── Breadcrumbs ── */
body.darkmode .breadcrumbs__item:last-child {
  color: var(--text-primary);
}

/* ==========================================================================
   Buttons (dark adjustments)
   ========================================================================== */
body.darkmode .btn-light {
  background-color: var(--bg-surface-sunken);
  color: var(--text-primary);
  border-color: var(--border-color);
}

body.darkmode .btn-light:hover {
  background-color: var(--border-color);
}

body.darkmode .btn-ghost:hover {
  background-color: var(--bg-surface-sunken);
  color: var(--text-primary);
}

body.darkmode .btn-dark {
  background-color: #E4E6EB;
  color: #1A1D26;
}

body.darkmode .btn-dark:hover {
  background-color: #fff;
}

body.darkmode .chapter-nav__btn--prev {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ==========================================================================
   Dropdowns & Modals
   ========================================================================== */
body.darkmode .dropdown__menu,
body.darkmode .advanced-dropdown__panel {
  background-color: var(--bg-surface-raised);
  border-color: var(--border-color);
}

body.darkmode .dropdown__item:hover {
  background-color: var(--color-primary-light);
}

body.darkmode .modal {
  background-color: var(--bg-surface);
}

body.darkmode .modal__close:hover {
  background-color: var(--bg-surface-sunken);
}

/* ==========================================================================
   Tags & Badges
   ========================================================================== */
body.darkmode .tag {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.darkmode .tag:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

body.darkmode .badge-light {
  background-color: var(--bg-surface-sunken);
  color: var(--text-secondary);
}

body.darkmode .updates-list__chapter-badge {
  background-color: var(--bg-surface-sunken);
  color: var(--text-secondary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
body.darkmode .pagination__item {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.darkmode .pagination__item:hover {
  background-color: var(--bg-surface-sunken);
  color: var(--text-primary);
}

body.darkmode .pagination__item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Star Ratings
   ========================================================================== */
body.darkmode .star-rating__star {
  color: var(--border-color);
}

body.darkmode .star-rating__star.is-filled,
body.darkmode .star-rating__star.is-half {
  color: #F59E0B;
}

/* ==========================================================================
   Share & Bookmark
   ========================================================================== */
body.darkmode .share-btn {
  background-color: var(--bg-surface-sunken);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.darkmode .bookmark-btn {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.darkmode .bookmark-btn.is-bookmarked {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ==========================================================================
   Swiper
   ========================================================================== */
body.darkmode .swiper-button-prev,
body.darkmode .swiper-button-next {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

body.darkmode .swiper-button-prev:hover,
body.darkmode .swiper-button-next:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   View Toggle
   ========================================================================== */
body.darkmode .view-toggle {
  border-color: var(--border-color);
}

body.darkmode .view-toggle__btn {
  background-color: var(--bg-surface);
  color: var(--text-tertiary);
}

body.darkmode .view-toggle__btn:not(:last-child) {
  border-right-color: var(--border-color);
}

body.darkmode .view-toggle__btn.active {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Trending Tabs
   ========================================================================== */
body.darkmode .trending-tabs__tab {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body.darkmode .trending-tabs__tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

body.darkmode .trending-tabs__tab.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Library Tabs
   ========================================================================== */
body.darkmode .library-tabs__tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   Chapter Sort
   ========================================================================== */
body.darkmode .chapter-sort-btn {
  border-color: var(--border-color);
  color: var(--text-tertiary);
}

body.darkmode .chapter-sort-btn:hover,
body.darkmode .chapter-sort-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   Genre Cards
   ========================================================================== */
body.darkmode .genre-card {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.darkmode .genre-card:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
body.darkmode .site-footer {
  background-color: var(--bg-surface);
  border-top-color: var(--border-color);
}

body.darkmode .site-footer__brand {
  color: var(--text-primary);
}

body.darkmode .site-footer__heading {
  color: var(--text-primary);
}

body.darkmode .site-footer__links a {
  color: var(--text-secondary);
}

body.darkmode .site-footer__links a:hover {
  color: var(--color-primary);
}

body.darkmode .site-footer__bottom {
  border-top-color: var(--border-color);
  color: var(--text-tertiary);
}

/* ==========================================================================
   Alerts (dark)
   ========================================================================== */
body.darkmode .alert-info {
  background-color: rgba(13, 115, 119, 0.12);
  border-color: rgba(13, 115, 119, 0.25);
}

body.darkmode .alert-success {
  background-color: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.25);
}

body.darkmode .alert-warning {
  background-color: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.25);
}

body.darkmode .alert-danger {
  background-color: rgba(232, 97, 77, 0.12);
  border-color: rgba(232, 97, 77, 0.25);
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */
body.darkmode .loading-skeleton {
  background: linear-gradient(90deg, var(--bg-surface-sunken) 25%, var(--bg-surface) 50%, var(--bg-surface-sunken) 75%);
  background-size: 200% 100%;
}

/* ==========================================================================
   Spinner
   ========================================================================== */
body.darkmode .spinner {
  border-color: var(--border-color);
  border-top-color: var(--color-primary);
}

/* ==========================================================================
   Scrollbar (dark)
   ========================================================================== */
body.darkmode ::-webkit-scrollbar-track {
  background: var(--bg-body);
}

body.darkmode ::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

body.darkmode ::-webkit-scrollbar-thumb:hover {
  background: var(--border-color-strong);
}

/* ==========================================================================
   Selection (dark)
   ========================================================================== */
body.darkmode ::selection {
  background-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Manga Header Banner (dark)
   ========================================================================== */
body.darkmode .manga-header__banner::after {
  background: linear-gradient(to bottom, transparent 0%, var(--bg-body) 100%);
}

body.darkmode .manga-description__text::after {
  background: linear-gradient(transparent, var(--bg-body));
}

/* ==========================================================================
   Hero Slider (dark adjustments)
   ========================================================================== */
body.darkmode .hero-slider__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 60%);
}

/* ==========================================================================
   Error Page
   ========================================================================== */
body.darkmode .error-page__code {
  color: var(--color-primary);
}

/* ==========================================================================
   Auth Card
   ========================================================================== */
body.darkmode .auth-card {
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

body.darkmode .auth-divider {
  color: var(--text-tertiary);
}