/* css/dark-mode.css */

body.dark-mode {
    /* --- Definice barevných proměnných pro Dark Mode --- */
    /* Tyto proměnné přepíší ty definované v :root v style.css, když je aktivní .dark-mode */

    --primary-color: #7986CB;        /* Světlejší modrá pro nadpisy a hlavní prvky (původně tmavě modrá #1A237E) */
    --secondary-color: #64B5F6;      /* Světlejší modrá pro odkazy a sekundární prvky (původně #007bff) */
    --accent-color: #FFB74D;          /* Mírně světlejší/méně saturovaná oranžová (původně #FFA500) */

    /* Základní barvy pro pozadí a text */
    --background-color: #121212;      /* Hlavní pozadí stránky (nahrazuje --white-color z light módu) */
    --surface-color: #1E1E1E;         /* Pozadí pro "karty", boxy, sekce s obsahem */
    --surface-bg-color: #242424;      /* Mírně odlišné pozadí pro .section-bg (nahrazuje --light-gray-color) */

    --text-color: #E0E0E0;            /* Hlavní barva textu (nahrazuje --text-color z light módu) */
    --text-color-headings: #AAB6FE;   /* Specifická barva pro nadpisy, pokud chceme odlišit od --primary-color */

    /* Ohraničení a inputy */
    --border-color: #3A3A3A;
    --input-bg-color: #2C2C2C;
    --input-text-color: var(--text-color);
    --input-border-color: #4A4A4A;
    --input-focus-border-color: var(--secondary-color);
    --input-focus-box-shadow-color-rgb: 100, 181, 246; /* RGB pro #64B5F6 */

    /* Barvy pro tlačítka */
    --btn-primary-bg: var(--accent-color);
    --btn-primary-text: #1E1E1E; /* Tmavý text pro kontrast na světlejším oranžovém pozadí */
    --btn-primary-hover-bg: #FFCA64;
    --btn-primary-hover-text: #121212;

    --btn-secondary-bg: var(--primary-color); /* Použije světlejší modrou z dark mode proměnných */
    --btn-secondary-text: #FFFFFF;
    --btn-secondary-hover-bg: #5C6BC0; /* Tmavší varianta --primary-color */
    --btn-secondary-hover-text: #FFFFFF;

    /* Patička */
    --footer-bg-color: #0A0A0A;
    --footer-text-color: #A0A0A0;
    --footer-link-hover-color: #FFFFFF;

    /* Navbar */
    --navbar-bg-color: #1A1D2E; /* Tmavší modro-šedá pro navbar v dark mode */
    --navbar-text-color: var(--text-color);
    --navbar-scrolled-bg: rgba(30, 30, 30, 0.75);
    --navbar-scrolled-text-color: var(--text-color);
}

/* --- Obecné přepsání stylů pro Dark Mode --- */

body.dark-mode {
    background-color: var(--background-color);
    color: var(--text-color);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--text-color-headings);
}
body.dark-mode .section-title { /* Nadpisy sekcí */
    color: var(--text-color-headings);
}


body.dark-mode a {
    color: var(--secondary-color);
}
body.dark-mode a:hover {
    color: var(--accent-color);
}

/* --- Navbar --- */
body.dark-mode .navbar {
    background: linear-gradient(90deg, #1A1D2E 0%, #161929 40%, #1A1D2E 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
body.dark-mode .navbar-logo,
body.dark-mode .nav-link {
    color: var(--navbar-text-color);
}
body.dark-mode .nav-link:hover::after,
body.dark-mode .nav-link.active::after {
    background: var(--accent-color);
}
body.dark-mode .menu-toggle {
    color: var(--navbar-text-color);
}

body.dark-mode .navbar.scrolled {
    background: var(--navbar-scrolled-bg);
}
body.dark-mode .navbar.scrolled a:not(.btn) { /* Zahrnuje logo i nav-linky, ale ne CTA tlačítko */
    color: var(--navbar-scrolled-text-color) !important; /* !important pro přepsání inline stylů, pokud by byly přidány JS */
}
body.dark-mode .navbar.scrolled .navbar-logo {
    background: linear-gradient(90deg, #fff 0%, #fff 15%, #F59E0B 40%, #6990e7 60%, #fff 85%, #fff 100%);
    background-size: 600% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- Hero sekce (je univerzální, ale zajistíme barvy pro jistotu) --- */
body.dark-mode .hero h1 {
    color: #FFFFFF; /* Zůstává bílá */
}
body.dark-mode .hero p {
    color: #E0E0E0; /* Světle šedá, aby dobře kontrastovala */
}
/* Tlačítko v hero sekci (.btn-primary) je již pokryto globálními styly tlačítek */


/* --- Sekce s původně bílým nebo světlým pozadím --- */
body.dark-mode .section {
    /* Pokud by .section měla explicitní světlé pozadí v style.css, zde by bylo:
    background-color: var(--surface-color); // nebo var(--background-color) podle designu
    V našem případě .section nemá vlastní pozadí, takže zdědí z body. */
}

body.dark-mode .section-bg {
    background: linear-gradient(150deg, #1E1E1E 0%, #22273A 60%, #1E1E1E 100%);
}
body.dark-mode #process.section-bg {
    background: linear-gradient(150deg, #1A1E30 0%, #1E2540 55%, #1A1E30 100%);
}
body.dark-mode #why-us {
    background: linear-gradient(180deg, #121212 0%, #161B2E 100%);
}
body.dark-mode #about {
    background: linear-gradient(135deg, #121212 0%, #161B2C 50%, #131520 100%);
}
body.dark-mode #contact {
    background: linear-gradient(160deg, #0D1B3E 0%, #142E6E 100%);
}
body.dark-mode #contact .contact-form input[type="text"],
body.dark-mode #contact .contact-form input[type="email"],
body.dark-mode #contact .contact-form input[type="tel"],
body.dark-mode #contact .contact-form textarea {
    background-color: var(--input-bg-color);
    border-color: var(--input-border-color);
    color: var(--input-text-color);
}
body.dark-mode #contact .contact-form input::placeholder,
body.dark-mode #contact .contact-form textarea::placeholder {
    color: #888;
}
body.dark-mode #contact .contact-form input:focus,
body.dark-mode #contact .contact-form textarea:focus {
    border-color: var(--input-focus-border-color);
    box-shadow: 0 0 0 3px rgba(var(--input-focus-box-shadow-color-rgb), 0.3);
}

/* --- Prvky v sekcích --- */

/* Výhody Sekce (.feature-item) */
body.dark-mode .feature-item {
    background: var(--surface-color);
    border-top: 3px solid var(--accent-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.2),
        0 4px 14px rgba(0,0,0,0.28),
        0 10px 28px rgba(0,0,0,0.2);
}
body.dark-mode .feature-item:hover {
    transform: translateY(-6px);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.28),
        0 8px 22px rgba(0,0,0,0.35),
        0 18px 36px rgba(0,0,0,0.24);
}
body.dark-mode .feature-item h3 {
    color: var(--text-color-headings);
}
body.dark-mode .feature-icon {
    color: var(--accent-color);
    background-color: rgba(255, 183, 77, 0.10);
}

/* Služby Sekce (.service-tab, .service-item) */
body.dark-mode .service-tab {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
body.dark-mode .service-tab.active,
body.dark-mode .service-tab:hover {
    background-color: var(--secondary-color);
    color: #121212; /* Tmavý text na aktivním/hover tabu */
    border-color: var(--secondary-color);
}

body.dark-mode .service-item {
    background: var(--surface-color);
    border-left: 4px solid var(--secondary-color);
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.18),
        0 4px 14px rgba(0,0,0,0.25);
}
body.dark-mode .service-item:hover {
    border-color: var(--accent-color);
    border-left-color: var(--accent-color);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.32);
}
body.dark-mode .service-item h3 {
    color: var(--text-color-headings);
}

/* O Technikovi sekce */
body.dark-mode .about-technician-img img {
    border-color: var(--accent-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Jak Předat Zařízení sekce (.delivery-option) */
body.dark-mode .delivery-option {
    background: var(--surface-color);
    border-top: 3px solid var(--secondary-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.2),
        0 4px 14px rgba(0,0,0,0.26),
        0 10px 28px rgba(0,0,0,0.18);
}
body.dark-mode .delivery-option:hover {
    transform: translateY(-5px);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.26),
        0 8px 22px rgba(0,0,0,0.32),
        0 18px 36px rgba(0,0,0,0.22);
}
body.dark-mode .delivery-icon {
    color: var(--secondary-color);
    background-color: rgba(100, 181, 246, 0.10);
}

/* --- Kontakt --- */
body.dark-mode .contact-info strong {
    color: var(--text-color-headings); /* Pro konzistenci s ostatními nadpisy */
}

body.dark-mode .contact-form label {
    color: var(--text-color-headings);
}
body.dark-mode .contact-form input[type="text"],
body.dark-mode .contact-form input[type="email"],
body.dark-mode .contact-form input[type="tel"],
body.dark-mode .contact-form textarea {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
}
body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus {
    border-color: var(--input-focus-border-color);
    box-shadow: 0 0 0 3px rgba(var(--input-focus-box-shadow-color-rgb), 0.3);
}
body.dark-mode .contact-form .gdpr-label {
    color: var(--text-color); /* Běžný text formuláře */
}
body.dark-mode .form-message { /* Pro případné chybové/úspěšné hlášky ve formuláři */
    color: var(--text-color);
    /* Specifické barvy pro úspěch/chybu by se musely řešit zvlášť */
}


/* --- Dark mode toggle tlačítko --- */
body.dark-mode .dark-mode-toggle {
    color: var(--navbar-text-color);
}
body.dark-mode .navbar.scrolled .dark-mode-toggle {
    color: var(--navbar-scrolled-text-color);
}

/* --- Kontakt disclaimer --- */
body.dark-mode .contact-disclaimer {
    color: #999;
}

/* --- Tlačítka (pokryto proměnnými, ale pro jistotu) --- */
body.dark-mode .btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
body.dark-mode .btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-text);
}

body.dark-mode .btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}
body.dark-mode .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-text);
}

/* --- Patička --- */
body.dark-mode .footer {
    background: linear-gradient(135deg, #0A0A18 0%, #0D1628 50%, #0A2040 100%);
    color: var(--footer-text-color);
    border-top: 1px solid var(--border-color);
}
body.dark-mode .footer a {
    color: var(--accent-color);
}
body.dark-mode .footer a:hover {
    color: var(--footer-link-hover-color);
}