/* ==========================================================================
 * 1. CZCIONKI (WSPÓLNE DLA OBU TRYBÓW)
 * ========================================================================== */
:root {
    --md-text-font: "Inter", -apple-system, sans-serif;
    --md-code-font: "JetBrains Mono", "Fira Code", monospace;
}

/* Wymuszamy płynne przejścia */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* ==========================================================================
 * 2. TRYB JASNY (DOMYŚLNY) - TWARDE NADPISANIE
 * ========================================================================== */
body[data-md-color-scheme="default"] {
    /* Tło strony i akcenty */
    --md-default-bg-color: #f8fafc;
    --md-default-fg-color: #334155; /* Zwykły tekst (przyjemny ciemnoszary) */
    --md-accent-fg-color:  #15803d; /* Zieleń maski lutowniczej */
    --md-code-bg-color:    #f1f5f9; /* Tło kodu */

    /* NAPRAWA NA TELEFONY: Wymuszenie zmiennych dla całego UI (w tym menu mobilnego) */
    --md-primary-fg-color: #0f172a !important; /* Ciemny grafit jako główny kolor */
    --md-primary-bg-color: #cbd5e1 !important; /* Jasny tekst na ciemnym tle */

    /* Subtelna, szara siatka inżynierska w tle */
    background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-attachment: fixed !important;
}

/* CIEMNY PASEK W JASNYM MOTYWIE (Elegancja i kontrast) */
body[data-md-color-scheme="default"] .md-header,
body[data-md-color-scheme="default"] .md-tabs,
body[data-md-color-scheme="default"] .md-nav__title[for="__drawer"] {
    background-color: #0f172a !important; /* Bardzo głęboki granatowo-czarny */
}

/* Jasne ikony i tekst na ciemnym pasku */
body[data-md-color-scheme="default"] .md-header__button,
body[data-md-color-scheme="default"] .md-tabs__link {
    color: #cbd5e1 !important; /* Jasnoszary */
}

/* Po najechaniu myszką - linki na pasku stają się zielone (nasz Solder Mask Green) */
body[data-md-color-scheme="default"] .md-header__button:hover,
body[data-md-color-scheme="default"] .md-tabs__link:hover,
body[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
    color: #22c55e !important; /* Jaśniejszy zielony dla lepszego kontrastu na czarnym pasku */
}

/* NAPRAWA NAGŁÓWKÓW - Mają być ostre i bardzo ciemne (prawie czarne) */
body[data-md-color-scheme="default"] .md-typeset h1,
body[data-md-color-scheme="default"] .md-typeset h2,
body[data-md-color-scheme="default"] .md-typeset h3,
body[data-md-color-scheme="default"] .md-typeset h4 {
    color: #0f172a !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}


/* ==========================================================================
 * 3. TRYB CIEMNY (SLATE) - TWARDE NADPISANIE
 * ========================================================================== */
body[data-md-color-scheme="slate"] {
    --md-default-bg-color: #09090b;
    --md-default-fg-color: #e4e4e7; /* Jasnoszary tekst */
    --md-accent-fg-color:  #22c55e; /* Neonowa zieleń LED */
    --md-code-bg-color:    #000000;

    /* NAPRAWA NA TELEFONY: Wymuszenie zmiennych dla całego UI (w tym menu mobilnego) */
    --md-primary-fg-color: #18181b !important; /* Grafit z Landing Page */
    --md-primary-bg-color: #a1a1aa !important;

    /* Biała siatka inżynierska */
    background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    background-attachment: fixed !important;
}

/* Wymuszamy grafitowy pasek górny (jak na Landing Page) */
body[data-md-color-scheme="slate"] .md-header,
body[data-md-color-scheme="slate"] .md-tabs,
body[data-md-color-scheme="slate"] .md-nav__title[for="__drawer"] {
    background-color: #18181b !important;
}

/* Szare ikony na pasku w trybie ciemnym */
body[data-md-color-scheme="slate"] .md-header__button,
body[data-md-color-scheme="slate"] .md-tabs__link {
    color: #a1a1aa !important;
}

/* Neonowa zieleń przy najechaniu myszką */
body[data-md-color-scheme="slate"] .md-header__button:hover,
body[data-md-color-scheme="slate"] .md-tabs__link:hover,
body[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
    color: var(--md-accent-fg-color) !important;
}

/* NAPRAWA NAGŁÓWKÓW - Mają być czysto białe, by odcinać się od szarego tekstu */
body[data-md-color-scheme="slate"] .md-typeset h1,
body[data-md-color-scheme="slate"] .md-typeset h2,
body[data-md-color-scheme="slate"] .md-typeset h3,
body[data-md-color-scheme="slate"] .md-typeset h4 {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}


/* ==========================================================================
 * 4. ESTETYKA: ZIELONE LINIE PASKÓW I BLOKI KODU (WSPÓLNE)
 * ========================================================================== */

/* Usuwamy domyślne cienie MkDocs */
.md-header, .md-tabs {
    box-shadow: none !important;
}

/* Zielona "ścieżka z laminatu" na dole paska zakładek */
.md-tabs {
    border-bottom: 2px solid var(--md-accent-fg-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Cień oddzielający pasek od białego tła */
}

/* Jeśli nie ma zakładek, zielona ścieżka trafia na główny pasek */
.md-header {
    border-bottom: 2px solid var(--md-accent-fg-color);
}
.md-header:has(~ .md-tabs) {
    border-bottom: none;
}

/* Mocny cień panelu w trybie ciemnym, by oderwać go od tła */
body[data-md-color-scheme="slate"] .md-tabs,
body[data-md-color-scheme="slate"] .md-header:not(:has(~ .md-tabs)) {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* --- BLOKI KODU I LINKI W TEKŚCIE --- */

/* Linki (hiperłącza) - płynna zmiana koloru */
.md-typeset a {
    color: var(--md-accent-fg-color);
    transition: all 0.2s ease;
}
body[data-md-color-scheme="default"] .md-typeset a:hover {
    opacity: 0.7;
}

/* W trybie ciemnym linki mocniej "świecą" po najechaniu (efekt neonu) */
body[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: #4ade80;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Stylizacja kontenerów z kodem w C/C++ */
.md-typeset pre > code {
    border-radius: 8px;
    border-left: 3px solid var(--md-accent-fg-color); /* Gruby akcent po lewej */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* W trybie ciemnym dodajemy subtelną obramówkę dookoła kodu */
body[data-md-color-scheme="slate"] .md-typeset pre > code {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
 * 5. BOCZNE MENU - NAPRAWA CZYTELNOŚCI I PACYFIKACJA SCROLL SPY
 * ========================================================================== */

/* --- TRYB CIEMNY (SLATE) --- */
/* Tytuły w menu */
body[data-md-color-scheme="slate"] .md-nav__title,
body[data-md-color-scheme="slate"] .md-nav__title .md-nav__icon {
    color: #ffffff !important;
    font-weight: 600;
}

/* Zwykłe linki */
body[data-md-color-scheme="slate"] .md-nav__link {
    color: #cbd5e1 !important;
    font-weight: 400;
    transition: color 0.2s ease-in-out;
}

/* LEWE MENU (Spis plików): Zostawiamy oryginalne podświetlanie aktualnej strony */
body[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link:hover,
body[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link--active {
    color: var(--md-accent-fg-color) !important;
    font-weight: 600;
}

/* PRAWE MENU (Spis Treści): Ignorujemy klasę od Scroll Spy, włączamy podświetlenie na kliknięcie/hover */
body[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link--active {
    color: #cbd5e1 !important; /* Siłowo gasimy narzut od JS */
    font-weight: 400 !important;
}
body[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link:hover,
body[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link:focus {
    color: var(--md-accent-fg-color) !important;
    font-weight: 600 !important;
}


/* --- TRYB JASNY (DEFAULT) --- */
/* Tytuły w menu */
body[data-md-color-scheme="default"] .md-nav__title,
body[data-md-color-scheme="default"] .md-nav__title .md-nav__icon {
    color: #0f172a !important;
    font-weight: 600;
}

/* Zwykłe linki */
body[data-md-color-scheme="default"] .md-nav__link {
    color: #475569 !important;
    font-weight: 400;
    transition: color 0.2s ease-in-out;
}

/* LEWE MENU (Spis plików): */
body[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link:hover,
body[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link--active {
    color: var(--md-accent-fg-color) !important;
    font-weight: 600;
}

/* PRAWE MENU (Spis Treści): Ignorujemy klasę od Scroll Spy */
body[data-md-color-scheme="default"] .md-sidebar--secondary .md-nav__link--active {
    color: #475569 !important;
    font-weight: 400 !important;
}
body[data-md-color-scheme="default"] .md-sidebar--secondary .md-nav__link:hover,
body[data-md-color-scheme="default"] .md-sidebar--secondary .md-nav__link:focus {
    color: var(--md-accent-fg-color) !important;
    font-weight: 600 !important;
}