/* ==========================================
   🌙 DARK-MODE.CSS - CZYSTE STYLE BEZ !important
   ========================================== */

/* Import variables */
@import url('./variables.css');

/* ==========================================
   🎨 PODSTAWOWA KONFIGURACJA DARK MODE
   ========================================== */

/* Color scheme dla przeglądarki */
html[data-theme="dark"] {
    color-scheme: dark;
    background-color: var(--bg-page); /* Fix białego paska - HTML musi mieć ciemne tło */
}

/* Wymuś zawsze scrollbar - zawsze rezerwuj 17px */
/* Usunięto - powodowało layout shift */

/* ==========================================
   🔧 WYŁĄCZ TRANSITION - ZAPOBIEGA LAYOUT SHIFT
   ========================================== */

/* Wyłącz transition na WSZYSTKO przy przełączaniu dark mode - brak !important na zmiennych */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] * {
    transition: none !important;
}

/* Body - podstawowe tło i kolor tekstu */
html[data-theme="dark"] body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: none !important;
}

/* ==========================================
   🏗️ ASTRA THEME CONTAINERS - DARK MODE FIX
   Naprawia biały pasek pod navbarem
   ========================================== */

/* Główne kontenery Astra - przezroczyste tło dziedziczące z body */
html[data-theme="dark"] .ast-container,
html[data-theme="dark"] .ast-plain-container,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] #content,
html[data-theme="dark"] .ast-separate-container .ast-article-single,
html[data-theme="dark"] .ast-separate-container .ast-article-post {
    background: transparent;
    color: var(--text-primary);
}

/* Site main - główny kontener strony */
html[data-theme="dark"] #primary,
html[data-theme="dark"] .site-main {
    background: transparent;
}

/* Strony z custom template (dla-firm, oferty-pracy, etc.) */
html[data-theme="dark"] .page-template-dla-firm,
html[data-theme="dark"] .page-template-oferty-pracy,
html[data-theme="dark"] .page-template {
    background: var(--bg-page);
}

/* Entry content - zawartość wpisu/strony */
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .ast-article-single {
    background: transparent;
    color: var(--text-primary);
}

/* ==========================================
   🏗️ LAYOUT I KONTENERY
   ========================================== */

/* Główne kontenery stron */
/* Front page container - przezroczysty żeby pokazać tło strony */
html[data-theme="dark"] .portal-front-page-container {
    background: transparent;
    color: var(--text-primary);
}

/* Pozostałe kontenery z gradientem */
html[data-theme="dark"] .portal-search-section,
html[data-theme="dark"] .portal-offers-content,
html[data-theme="dark"] .portal-filters-sidebar,
html[data-theme="dark"] .portal-offers-main {
    background: var(--hero-gradient);
    color: var(--text-primary);
}

/* Mapa - standardowe tło karty zamiast gradientu */
html[data-theme="dark"] .portal-map-section {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Sekcje - przezroczyste tło dziedziczące z kontenera */

/* 
 * ⚠️ KRYTYCZNE - NIE DODAWAJ .hero-section TUTAJ!
 * 
 * .hero-section ma własny gradient zdefiniowany w:
 * - style.css (linia 162-168) z !important
 * 
 * Jeśli dodasz tutaj .hero-section z background: transparent
 * → ZEPSUJE TO GRADIEN na front-page.php!
 * 
 * Historia: Bug z 2025-10-25 - gradient znikał bo dark-mode.css
 * nadpisywał background na transparent.
 */

html[data-theme="dark"] .categories-section,
html[data-theme="dark"] .portal-stats-section {
    background: transparent;
    color: var(--text-primary);
}

/* Search section - szare tło zamiast przezroczystego */
html[data-theme="dark"] .search-section {
    background: var(--bg-card);
    color: var(--text-primary);
}

html[data-theme="dark"] .features-section {
    background: var(--section-bg);
    color: var(--text-primary);
}

html[data-theme="dark"] .why-section {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .cta-section {
    background-color: var(--bg-secondary);
    background-image: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .cta-section .cta-title {
    color: var(--accent-color);
}

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

html[data-theme="dark"] .cta-section p {
    color: var(--text-primary);
}

html[data-theme="dark"] .cta-main-btn:hover {
    box-shadow: 0 8px 25px rgba(74, 158, 255, 0.4);
}

/* ==========================================
   🧭 NAVBAR - DARK MODE
   ========================================== */

/* Navbar podstawowe style */
html[data-theme="dark"] .portal-navbar,
html[data-theme="dark"] .custom-navbar {
    background: #1a1a1a;
    /* box-shadow i border-bottom usunięte dla czystego designu */
}

/* Portal header - dark mode */
html[data-theme="dark"] .portal-header,
html[data-theme="dark"] .site-header {
    background: var(--bg-navbar);
    /* box-shadow i border-bottom usunięte dla czystego designu */
}

/* Logo */
html[data-theme="dark"] .portal-navbar-logo,
html[data-theme="dark"] .navbar-logo {
    color: var(--accent-color);
}

html[data-theme="dark"] .portal-navbar-logo:hover,
html[data-theme="dark"] .navbar-logo:hover {
    color: var(--link-hover);
}

/* Menu linki */
html[data-theme="dark"] .portal-navbar-menu a {
    color: var(--text-primary);
    transition: var(--transition);
}

html[data-theme="dark"] .portal-navbar-menu a:hover {
    color: var(--accent-color);
    background: rgba(74, 158, 255, 0.1);
}

/* Przyciski specjalne w navbar */
html[data-theme="dark"] .portal-navbar-menu a[href*="ogloszenia"] {
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
}

html[data-theme="dark"] .portal-navbar-menu a[href*="ogloszenia"]:hover {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
    transform: translateY(-1px);
}

html[data-theme="dark"] .portal-navbar-menu a[href*="dla-firm"] {
    background: #1e3a8a;
    color: #93c5fd;
    border: 1px solid #3b82f6;
}

html[data-theme="dark"] .portal-navbar-menu a[href*="dla-firm"]:hover {
    background: #1e40af;
    color: #bfdbfe;
    border-color: #60a5fa;
    transform: translateY(-1px);
}

/* ==========================================
   🏢 DLA-FIRM.PHP - DARK MODE STYLES
   ========================================== */

/* Hero section */
html[data-theme="dark"] .dla-firm-hero {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: var(--text-primary);
}

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

html[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary);
}

html[data-theme="dark"] .hero-stats .stat-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .hero-stats .stat-number {
    color: var(--accent-color);
}

html[data-theme="dark"] .hero-stats .stat-label {
    color: var(--text-secondary);
}

/* Benefits boxes - ciemne tło w dark mode */
html[data-theme="dark"] .benefit-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .benefit-box:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

html[data-theme="dark"] .benefit-title {
    color: var(--accent-color);
}

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

/* Benefits section - REMOVED (nieużywana klasa) */

/* How it works section - REMOVED (nieużywana klasa) */

html[data-theme="dark"] .step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .step-card:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .step-card h3 {
    color: var(--text-primary);
}

html[data-theme="dark"] .step-card p {
    color: var(--text-secondary);
}

/* Pricing section */
html[data-theme="dark"] .pricing-preview {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

html[data-theme="dark"] .promotion-banner {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .plan-card:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .plan-card h3 {
    color: var(--text-primary);
}

html[data-theme="dark"] .plan-card .plan-price {
    color: var(--text-primary);
}

html[data-theme="dark"] .plan-card .plan-features li {
    color: var(--text-secondary);
}

/* Testimonials section - REMOVED (nieużywana klasa) */

/* FAQ section - REMOVED (nieużywana klasa) */

/* Final CTA section */
html[data-theme="dark"] .final-cta {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}

html[data-theme="dark"] .final-cta h2 {
    color: var(--text-primary);
}

html[data-theme="dark"] .final-cta p {
    color: var(--text-secondary);
}

/* ==========================================
   🏢 PANEL-FIRMY.PHP - DARK MODE STYLES
   ========================================== */

/* Dashboard wrapper */
html[data-theme="dark"] .portal-dashboard-wrapper {
    background: var(--bg-page);
    color: var(--text-primary);
}

html[data-theme="dark"] .portal-dashboard-container {
    background: var(--bg-page);
    color: var(--text-primary);
}

/* Dashboard welcome dark mode DZIEDZICZONY z variables.css - nie trzeba nadpisywać! */

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

html[data-theme="dark"] .alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .alert-success {
    background: var(--success-bg);
    border-color: var(--success-color);
    color: var(--text-primary);
}

/* Account status banner */
html[data-theme="dark"] .account-status-banner {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .account-status-banner.status-pending {
    background: var(--warning-bg);
    border-color: var(--warning-color);
}

html[data-theme="dark"] .account-status-banner.status-rejected {
    background: var(--error-bg);
    border-color: var(--error-color);
}

/* Dashboard grid */
html[data-theme="dark"] .dashboard-grid {
    background: var(--bg-page);
}

/* Stats section */
html[data-theme="dark"] .dashboard-limits {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .dashboard-limits h2 {
    color: var(--text-primary);
}

html[data-theme="dark"] .stat-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .stat-box:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .stat-number {
    color: var(--accent-color);
}

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

html[data-theme="dark"] .stat-description {
    color: var(--text-secondary);
}

/* Charts section */
html[data-theme="dark"] .dashboard-charts {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .dashboard-charts h2 {
    color: var(--text-primary);
}

html[data-theme="dark"] .chart-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Quick actions */
html[data-theme="dark"] .quick-actions {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .quick-actions h2 {
    color: var(--text-primary);
}

html[data-theme="dark"] .action-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .action-card:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .action-card h3 {
    color: var(--text-primary);
}

html[data-theme="dark"] .action-card p {
    color: var(--text-secondary);
}

/* Dashboard help */
html[data-theme="dark"] .dashboard-help {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .help-contact h4 {
    color: var(--text-primary);
}

html[data-theme="dark"] .help-contact p {
    color: var(--text-secondary);
}

html[data-theme="dark"] .help-links a {
    color: var(--accent-color);
}

html[data-theme="dark"] .help-links a:hover {
    color: var(--link-hover);
}

html[data-theme="dark"] .portal-navbar-menu a.cta {
    background: #1a2e1a;
    color: #a7f3d0;
    border: 1px solid #374151;
}

html[data-theme="dark"] .portal-navbar-menu a.cta:hover {
    background: #14532d;
    color: #d1fae5;
    border-color: #6ee7b7;
    transform: translateY(-1px);
}

html[data-theme="dark"] .portal-navbar-menu a.login-btn {
    background: #581c87;
    color: #c4b5fd;
    border: 1px solid #8b5cf6;
}

html[data-theme="dark"] .portal-navbar-menu a.login-btn:hover {
    background: #6b21a8;
    color: #e9d5ff;
    border-color: #a78bfa;
    transform: translateY(-1px);
}

/* ==========================================
   🌙 DARK MODE TOGGLE - DARK THEME
   ========================================== */

/* Language switcher i dark mode toggle - DARK MODE */
html[data-theme="dark"] .language-switcher-inline,
html[data-theme="dark"] .dark-mode-toggle {
    background: #1e293b;
    border: 1px solid #334155;
    color: var(--text-primary);
    transform: translateY(0);
    will-change: transform;
}

html[data-theme="dark"] .language-switcher-inline:hover,
html[data-theme="dark"] .dark-mode-toggle:hover {
    background: #334155;
    border-color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3);
}

html[data-theme="dark"] .dark-mode-toggle:focus,
html[data-theme="dark"] .dark-mode-toggle:active {
    background: #1e293b;
    border-color: #475569;
    outline: none;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);
    transform: translateY(0);
}

/* Usunięto duplikat - reguły przeniesione na koniec pliku */

html[data-theme="dark"] .language-switcher-inline .lang-flag {
    background: var(--bg-card);
    border-color: var(--border-color);
}

html[data-theme="dark"] .language-switcher-inline .lang-flag:hover {
    border-color: var(--accent-color);
}

html[data-theme="dark"] .language-switcher-inline .lang-flag.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
}

/* ==========================================
   🎯 KOMPONENTY - KARTY I ELEMENTY
   ========================================== */

/* Karty podstawowe */
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .portal-stat-item,
html[data-theme="dark"] .why-list li,
html[data-theme="dark"] .app-btn,
html[data-theme="dark"] .oferta-box,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .stat-item {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

html[data-theme="dark"] .category-card:hover,
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .portal-stat-item:hover,
html[data-theme="dark"] .offer-card:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Hero content */
/* .hero-content został usunięty - style przeniesione do .hero-section */

html[data-theme="dark"] .why-image-box {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .why-image-box:hover {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   🔍 SEARCH SECTION
   ========================================== */

html[data-theme="dark"] .portal-search-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .search-section-fullwidth {
    background: var(--bg-card);
    color: var(--text-primary);
    /* Usunięto: border, border-radius, padding - powodowały double padding (55px!) */
}

html[data-theme="dark"] .search-input-fullwidth {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .search-input-fullwidth:focus {
    border-color: var(--accent-color);
    background: var(--bg-hover);
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .search-input-fullwidth::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .search-hint {
    color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] #clear-search-fullwidth {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

html[data-theme="dark"] #clear-search-fullwidth:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--accent-color);
}

/* ==========================================
   📝 FORMULARZE I INPUTY
   ========================================== */

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .filter-field input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="file"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .filter-field input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .filter-field label,
html[data-theme="dark"] label {
    color: var(--text-primary);
}

/* ==========================================
   🎯 PRZYCISKI
   ========================================== */

html[data-theme="dark"] .btn-details,
html[data-theme="dark"] .search-btn,
html[data-theme="dark"] .btn-load-more,
html[data-theme="dark"] .btn-reset {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

html[data-theme="dark"] .btn-details:hover,
html[data-theme="dark"] .search-btn:hover,
html[data-theme="dark"] .btn-load-more:hover,
html[data-theme="dark"] .btn-reset:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .btn-favorite {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .btn-primary {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}

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

html[data-theme="dark"] .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

html[data-theme="dark"] .btn-danger {
    background: var(--danger-color);
    color: white;
}

html[data-theme="dark"] .btn-danger:hover {
    background: #e53e3e;
}

/* ==========================================
   🎛️ FILTRY I SIDEBAR
   ========================================== */

html[data-theme="dark"] .portal-filters-sidebar,
html[data-theme="dark"] .portal-action-bar,
html[data-theme="dark"] .portal-offers-main {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .checkbox-box {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .checkbox-label input:checked + .checkbox-box {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

/* ==========================================
   🗺️ MAPA I KONTROLKI
   ========================================== */

html[data-theme="dark"] .map-controls,
html[data-theme="dark"] .offer-side-panel {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* ==========================================
   📊 STATYSTYKI I BADGES
   ========================================== */

html[data-theme="dark"] .salary-type-badge.salary-netto {
    background: var(--bg-card);
    color: #9d88ff;
    border: 1px solid #9d88ff;
}

html[data-theme="dark"] .stat-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .stat-number {
    color: var(--accent-color);
}

html[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* ==========================================
   📋 LISTY I TABELE
   ========================================== */

html[data-theme="dark"] .offers-list,
html[data-theme="dark"] .results-header,
html[data-theme="dark"] .pagination-container,
html[data-theme="dark"] .tryb-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .page-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .page-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* ==========================================
   🔍 AUTOCOMPLETE I DROPDOWN
   ========================================== */

html[data-theme="dark"] .autocomplete-dropdown,
html[data-theme="dark"] .autocomplete-list,
html[data-theme="dark"] .ui-autocomplete,
html[data-theme="dark"] .city-suggestions {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* ==========================================
   💬 KOMUNIKATY I STANY
   ========================================== */

html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .error-state,
html[data-theme="dark"] .loading-state,
html[data-theme="dark"] .loading-spinner,
html[data-theme="dark"] .infinite-end,
html[data-theme="dark"] .no-offers-message {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* ==========================================
   🎨 TYPOGRAPHY I TEKSTY
   ========================================== */

html[data-theme="dark"] .search-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .category-title,
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .why-text h2,
html[data-theme="dark"] .oferta-tytul,
html[data-theme="dark"] .firma-nazwa,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .filter-section h4 {
    color: var(--text-primary);
}

/* .portal-offers-header dziedziczy z style.css (linia 166-177) - identyczny jak .hero-section */

html[data-theme="dark"] .firma-lokalizacja,
html[data-theme="dark"] .offer-meta,
html[data-theme="dark"] .filter-field label,
html[data-theme="dark"] .salary-range span,
html[data-theme="dark"] .category-count,
html[data-theme="dark"] .feature-desc,
html[data-theme="dark"] .portal-stat-label {
    color: var(--text-secondary);
}

html[data-theme="dark"] .why-list strong,
html[data-theme="dark"] .portal-stat-number {
    color: var(--text-primary);
}

html[data-theme="dark"] .why-list i {
    color: var(--accent-color);
}

/* ==========================================
   🌐 SCROLLBAR
   ========================================== */

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm); /* 4px - Shape & Sizing System v4.0 */
}

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

/* ==========================================
   🔧 OVERRIDES I FIXES
   ========================================== */

/* Wszystkie białe tła na ciemne */
html[data-theme="dark"] *[style*="background: white"],
html[data-theme="dark"] *[style*="background-color: white"],
html[data-theme="dark"] *[style*="background: #fff"],
html[data-theme="dark"] *[style*="background-color: #fff"],
html[data-theme="dark"] *[style*="background: #ffffff"],
html[data-theme="dark"] *[style*="background-color: #ffffff"] {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* ==========================================
   🦶 FOOTER - PRZENIESIONY DO global-footer.css
   ========================================== */

/*
 * Footer dark mode styles zostały przeniesione do assets/css/global-footer.css
 * Powód: Spójny footer na wszystkich stronach
 * 
 * Dark mode styles footer znajdują się w: assets/css/global-footer.css
 * Linie 150-200: Dark mode styles dla footer
 */

/* ==========================================
   📱 RESPONSIVE
   ========================================== */

@media (max-width: 968px) {
    html[data-theme="dark"] .portal-navbar-menu {
        background: var(--bg-secondary);
        /* box-shadow usunięty dla spójności z light mode */
    }
}

@media (max-width: 768px) {
    html[data-theme="dark"] .search-section {
        background: var(--bg-card);
    }
}

/* ==========================================
   🌙 MODAL I OVERLAY
   ========================================== */

html[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

html[data-theme="dark"] .application-modal-content,
html[data-theme="dark"] .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .modal-close {
    color: var(--text-secondary);
}

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

/* ==========================================
   📬 TOAST NOTIFICATIONS
   ========================================== */

html[data-theme="dark"] .toast-notification {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .toast-notification.success {
    border-left: 4px solid var(--success-color);
}

html[data-theme="dark"] .toast-notification.info {
    border-left: 4px solid var(--info-color);
}

html[data-theme="dark"] .toast-notification.error {
    border-left: 4px solid var(--danger-color);
}

/* ==========================================
   📋 ALERTS I MESSAGES
   ========================================== */

html[data-theme="dark"] .alert-success {
    background: rgba(72, 187, 120, 0.2);
    color: var(--success-color);
    border-left: 4px solid var(--success-color);
}

html[data-theme="dark"] .alert-error {
    background: rgba(245, 101, 101, 0.2);
    color: var(--danger-color);
    border-left: 4px solid var(--danger-color);
}

html[data-theme="dark"] .alert-info {
    background: rgba(66, 153, 225, 0.2);
    color: var(--info-color);
    border-left: 4px solid var(--info-color);
}

/* ==========================================
   🔐 SECURITY I DANGER ZONES
   ========================================== */

html[data-theme="dark"] .danger-zone {
    background: rgba(245, 101, 101, 0.1);
    border: 1px solid rgba(245, 101, 101, 0.3);
}

html[data-theme="dark"] .danger-zone h3 {
    color: var(--danger-color);
}

html[data-theme="dark"] .danger-zone p {
    color: var(--text-secondary);
}

html[data-theme="dark"] .security-info {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* ==========================================
   🔧 FORCE DARK MODE TOGGLE ICONS - NAJWYŻSZY PRIORYTET
   ========================================== */

/* Usunięto duplikat - reguły przeniesione na koniec pliku */

/* ==========================================
   🏢 COMPANY LANDING - STARE STYLE USUNIĘTE
   ========================================== */

/* Nowa strona dla-firm.php używa company-landing-clean.css */
/* z wbudowanym dark mode przez CSS variables */

/* ==========================================
   🚨 NAPRAWKA IKONEK DARK MODE - NAJWYŻSZA SPECYFICZNOŚĆ
   ========================================== */

/* ==========================================
   🚨 EMOJI FORCING - NAJWYŻSZA SPECYFICZNOŚĆ
   ========================================== */

/* Stare konfliktujące style usunięte - zastąpione czystymi stylami poniżej */

/* ==========================================
   🌙 DARK MODE ICONS - WYSOKA SPECYFICZNOŚĆ
   ========================================== */

/* Podstawowe style dla ikony */
.dark-mode-toggle .theme-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: transparent;
    font-size: 0;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* 🧹 BLOKUJ EMOJI - tylko krytyczne !important dla WordPress */
.dark-mode-toggle .theme-icon img,
.dark-mode-toggle .theme-icon img.emoji,
.dark-mode-toggle .theme-icon *:not(::before):not(::after) {
    display: none !important;
    opacity: 0 !important;
}

/* Stare duplikaty usunięte - zastąpione finalną wersją poniżej */

/* ==========================================
   🌙 DARK MODE ICONS - FINALNA WERSJA
   ========================================== */

/* Light mode - słońce SVG */
.dark-mode-toggle .theme-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-image: url('../images/sun.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    z-index: 10;
    filter: brightness(1.2) contrast(1.1);
    pointer-events: none;
}

/* Dark mode - księżyc SVG */
html[data-theme="dark"] .dark-mode-toggle .theme-icon::before {
    background-image: url('../images/moon.svg');
    filter: brightness(1.5);
}

/* Hover states - efekt przezroczystości */
.dark-mode-toggle:hover .theme-icon::before {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
}

html[data-theme="dark"] .dark-mode-toggle:hover .theme-icon::before {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Napraw hover przycisku - usuń niebieski kolor z Astra */
.dark-mode-toggle:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
}

/* ==========================================
   🏗️ PORTAL NAVBAR - DARK MODE
   ========================================== */

/* Navbar w dark mode */
html[data-theme="dark"] .portal-navbar {
    background: var(--bg-navbar);
    /* box-shadow usunięty dla czystego, flat designu */
}

/* ==========================================
   KARTA LOGOWANIA - DARK MODE
   ========================================== */

/* Reguła usunięta - powodowała konflikt ze stylami w auth.css */
/* Ta sekcja jest teraz w pełni zarządzana przez assets/css/auth.css */

/* Cała sekcja "STRONY AUTORYZACJI - DARK MODE" została usunięta, aby wyeliminować konflikt. */
/* Wszystkie style logowania/rejestracji dla trybu ciemnego znajdują się teraz w assets/css/auth.css. */