/* ============================================
   Dark Mode - Primeira Solucao
   Ativado via classe html.dark-mode
   ============================================ */

/* === Override CSS Custom Properties === */
html.dark-mode {
    --color-bg: #0f172a;
    --color-bg-white: #1e293b;
    --color-bg-card: #1e293b;
    --color-bg-hover: #334155;
    --color-bg-admin: #0f172a;

    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #0f172a;
    --color-text-link: #60a5fa;

    --color-border: #334155;
    --color-border-hover: #475569;
    --color-border-focus: #3b82f6;

    --color-primary-light: #1e3a5f;
    --color-primary-dark: #1e3a5f;
    --color-cta-light: #3d2200;
    --color-success-light: #052e16;
    --color-error-light: #450a0a;
    --color-warning-light: #422006;
    --color-verified-light: #052e16;
    --color-bg-card-alt: #334155;

    /* Precos no dark mode */
    --color-price-current: #f1f5f9;
    --color-price-old: #64748b;
    --color-price-savings: #34d399;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.45), 0 4px 6px -4px rgba(0,0,0,0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);

    color-scheme: dark;
}

/* === Body === */
html.dark-mode body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* === Smooth transition when toggling === */
html.dark-mode *,
html.dark-mode *::before,
html.dark-mode *::after {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* === Form Inputs & Selects === */
html.dark-mode .form-input,
html.dark-mode .form-select,
html.dark-mode .form-textarea,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode input[type="url"],
html.dark-mode input[type="number"],
html.dark-mode input[type="tel"],
html.dark-mode select,
html.dark-mode textarea {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark-mode .form-input:focus,
html.dark-mode .form-select:focus,
html.dark-mode .form-textarea:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: var(--color-border-focus);
    background-color: var(--color-bg);
}

html.dark-mode .form-input::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--color-text-muted);
}

/* === Header === */
html.dark-mode .site-header {
    background: var(--color-bg-white);
    border-color: var(--color-border);
}

html.dark-mode .header-top {
    background: var(--color-bg-white);
}

html.dark-mode .header-nav {
    background: var(--color-bg);
    border-color: var(--color-border);
}

html.dark-mode .header-nav__item {
    color: var(--color-text-secondary);
}

html.dark-mode .header-nav__item:hover,
html.dark-mode .header-nav__item--active {
    color: var(--color-text);
}

html.dark-mode .header-top__search {
    background: var(--color-bg);
    border-color: var(--color-border);
}

html.dark-mode .header-top__search-input {
    background: transparent;
    color: var(--color-text);
}

html.dark-mode .header-top__search-btn {
    background: var(--color-primary);
    color: #fff;
}

html.dark-mode .header-act {
    color: var(--color-text-secondary);
}

html.dark-mode .header-act:hover {
    color: var(--color-text);
}

/* === Search Autocomplete === */
html.dark-mode .search-ac {
    background: var(--color-bg-white);
    border-color: var(--color-border);
}

html.dark-mode .search-ac__item:hover,
html.dark-mode .search-ac__item--hl {
    background: var(--color-bg-hover);
}

html.dark-mode .search-ac__name {
    color: var(--color-text);
}

html.dark-mode .search-ac__all {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* === Mobile Drawer === */
html.dark-mode .mobile-drawer {
    background: var(--color-bg-white);
    border-color: var(--color-border);
}

html.dark-mode .mobile-drawer__nav-item {
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark-mode .mobile-drawer__nav-item:hover {
    background: var(--color-bg-hover);
}

html.dark-mode .mobile-drawer__quick-btn {
    background: var(--color-bg-hover);
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark-mode .mobile-drawer__link {
    color: var(--color-text-secondary);
}

html.dark-mode .mobile-drawer__link:hover {
    color: var(--color-text);
}

html.dark-mode .mobile-drawer__divider {
    background: var(--color-border);
}

html.dark-mode .mobile-drawer__search .form-input {
    background: var(--color-bg);
    color: var(--color-text);
}

/* === Dropdown Menus === */
html.dark-mode .site-nav__dropdown {
    background: var(--color-bg-white);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xl);
}

html.dark-mode .site-nav__dropdown-item {
    color: var(--color-text-secondary);
}

html.dark-mode .site-nav__dropdown-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

html.dark-mode .site-nav__dropdown-divider {
    background: var(--color-border);
}

/* === Offer Cards === */
html.dark-mode .offer-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .offer-card:hover {
    border-color: var(--color-border-hover);
}

html.dark-mode .offer-card__image {
    background: var(--color-bg);
}

html.dark-mode .offer-card__body {
    color: var(--color-text);
}

html.dark-mode .offer-card__title {
    color: var(--color-text);
}

html.dark-mode .offer-card__marketplace {
    color: var(--color-text-secondary);
}

/* === Product Cards === */
html.dark-mode .product-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .product-card:hover {
    border-color: var(--color-border-hover);
}

/* === Coupon Cards === */
html.dark-mode .coupon-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .coupon-card:hover {
    border-color: var(--color-border-hover);
}

html.dark-mode .coupon-card__code {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* === Article Cards === */
html.dark-mode .article-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .article-card:hover {
    border-color: var(--color-border-hover);
}

/* === Badges & Tags === */
html.dark-mode .badge {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

html.dark-mode .tag {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* === Breadcrumbs === */
html.dark-mode .breadcrumb {
    color: var(--color-text-muted);
}

html.dark-mode .breadcrumb a {
    color: var(--color-text-secondary);
}

/* === Section Headings === */
html.dark-mode .section-title {
    color: var(--color-text);
}

/* === Hero Section === */
html.dark-mode .hero {
    background: var(--color-bg-white);
}

html.dark-mode .hero__search-input {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* === Category Cards === */
html.dark-mode .category-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    color: var(--color-text);
}

html.dark-mode .category-card:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
}

/* === FAQ === */
html.dark-mode .faq-item {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .faq-item__question {
    color: var(--color-text);
}

html.dark-mode .faq-item__answer {
    color: var(--color-text-secondary);
}

/* === Contact Form === */
html.dark-mode .contact-form__input,
html.dark-mode .contact-form__textarea {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* === Pagination === */
html.dark-mode .pagination__link {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

html.dark-mode .pagination__link:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

html.dark-mode .pagination__link--active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* === Tables === */
html.dark-mode table {
    border-color: var(--color-border);
}

html.dark-mode th {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark-mode td {
    border-color: var(--color-border);
    color: var(--color-text);
}

html.dark-mode tr:hover td {
    background: var(--color-bg-hover);
}

/* === Modals === */
html.dark-mode .modal,
html.dark-mode .price-alert-modal {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xl);
}

/* === Flash Messages === */
html.dark-mode .flash-message {
    border-color: var(--color-border);
}

/* === WhatsApp Hotbar === */
html.dark-mode .whatsapp-hotbar {
    background: #1a3d2e;
}

/* === Sidebar / Filters === */
html.dark-mode .sidebar,
html.dark-mode .filter-panel {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .filter-group__title {
    color: var(--color-text);
}

html.dark-mode .filter-group__label {
    color: var(--color-text-secondary);
}

/* === Carousel/Slider === */
html.dark-mode .carousel__arrow {
    background: var(--color-bg-card);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

html.dark-mode .carousel__arrow:hover {
    background: var(--color-bg-hover);
}

/* === Price History Chart area === */
html.dark-mode .price-history {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

/* === Tooltip === */
html.dark-mode .tooltip {
    background: var(--color-text);
    color: var(--color-bg);
}

/* === Tabs === */
html.dark-mode .tabs__tab {
    color: var(--color-text-secondary);
    border-color: transparent;
}

html.dark-mode .tabs__tab:hover {
    color: var(--color-text);
}

html.dark-mode .tabs__tab--active {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* === Offer Detail / Product Detail Page === */
html.dark-mode .offer-detail,
html.dark-mode .product-detail {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .offer-detail__price-old {
    color: var(--color-text-muted);
}

/* === Comments === */
html.dark-mode .comment {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

html.dark-mode .comment__author {
    color: var(--color-text);
}

html.dark-mode .comment__date {
    color: var(--color-text-muted);
}

html.dark-mode .comment__body {
    color: var(--color-text-secondary);
}

/* === Lists (editorial) === */
html.dark-mode .list-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

/* === Empty State === */
html.dark-mode .empty-state {
    color: var(--color-text-muted);
}

/* === Skeleton Loading === */
html.dark-mode .skeleton {
    background: var(--color-bg-hover);
}

html.dark-mode .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
}

/* === Scrollbar (dark) === */
html.dark-mode ::-webkit-scrollbar-track {
    background: var(--color-bg);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
}

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

/* === Location Modal (inline styles override) === */
html.dark-mode #location-modal > div {
    background: var(--color-bg-card) !important;
    box-shadow: var(--shadow-xl) !important;
}

html.dark-mode #location-modal h3 {
    color: var(--color-text) !important;
}

html.dark-mode #location-modal p {
    color: var(--color-text-secondary) !important;
}

/* === Price Alert Modal (dark mode) === */
html.dark-mode .pa-modal { background: var(--color-bg-card); }
html.dark-mode .pa-modal__header { border-color: var(--color-border); }
html.dark-mode .pa-modal__footer { background: var(--color-bg); border-color: var(--color-border); }
html.dark-mode .pa-input { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
html.dark-mode .pa-product-card { background: var(--color-bg); border-color: var(--color-border); }
html.dark-mode .pa-advanced { background: var(--color-bg); border-color: var(--color-border); }
html.dark-mode .pa-notify-info { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.2); }

/* === Images should remain unchanged === */
html.dark-mode img {
    /* no filter - keep original appearance */
}

/* === Gradient backgrounds that use hardcoded colors === */
html.dark-mode .offer-card__badge--flash,
html.dark-mode .flash-badge {
    background: linear-gradient(135deg, #991b1b 0%, #c2410c 100%);
}

/* === Accent color overrides (#d3ff6e) === */
html.dark-mode .offer-card__price-current { color: #d3ff6e; }
html.dark-mode .btn-outline { border-color: #d3ff6e; color: #d3ff6e; }
html.dark-mode .btn-outline:hover { background: #d3ff6e; color: #000; }
html.dark-mode .offer-card__cta { color: #fff; }
html.dark-mode .site-footer { background: #0b1120; }
html.dark-mode .footer-subtitle { color: #d3ff6e; }
html.dark-mode .po-card__price-now { color: #d3ff6e; }
html.dark-mode .btn-primary { background: #d3ff6e; color: #000; }
html.dark-mode .btn-primary:hover { background: #c5f05a; color: #000; }
html.dark-mode .cpn-card__tag { color: #d3ff6e; }
html.dark-mode .po-card-compact__price-now { color: #d3ff6e; }
html.dark-mode .header-top__search-btn { background: #d3ff6e; color: #000; }
html.dark-mode .list-offer-card__price-current { color: #d3ff6e; }
html.dark-mode .list-offer-card__position { color: #d3ff6e; }
html.dark-mode .ql-snow .ql-stroke { color: #fff; stroke: #fff; }
html.dark-mode .profile-section--danger { border-color: #000; }
html.dark-mode .profile-section--danger .profile-section__header { background: #000000; }
html.dark-mode .profile-sidebar__header { background: #0F172A; }

/* === Home personalized offers section === */
html.dark-mode .po-section--home { background: none; }

/* === My Offers usage bar === */
html.dark-mode .mo-usage__fill { background: #d3ff6e !important; }
html.dark-mode .mo-usage__numbers strong { color: #d3ff6e !important; }

/* === Dark mode toggle button === */
.header-act--theme {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-act--theme svg {
    width: 20px;
    height: 20px;
}

/* Mobile dark mode toggle */
.mobile-drawer__theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    margin-top: var(--space-3);
}

.mobile-drawer__theme-toggle:hover {
    background: var(--color-bg);
    border-color: var(--color-border-hover);
}

.mobile-drawer__theme-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}