/*
 * Motyw marki taklab - WSPOLNY dla witryny publicznej i panelu operatora.
 *
 * MOTYW PRZEPISANY Z APLIKACJI taklab-hub, zeby czlowiek, ktory widzial
 * telefon, poznal te sama marke w przegladarce. Zrodla po stronie
 * aplikacji:
 *   ~/taklab-hub/aplikacja/app/src/main/java/eu/taklab/app/ui/Kolory.kt
 *   ~/taklab-hub/aplikacja/app/src/main/java/eu/taklab/app/ui/Motyw.kt
 * Piec kolorow, jeden krój (Rajdhani) i cztery chwyty ukladu: wersaliki z
 * rozstrzeleniem w naglowkach, pionowy pasek akcentu z lewej strony
 * naglowka i kafelka, ciemnozielona poswiata pod kafelkiem, ukosne smugi w
 * tle. Zmieniajac cokolwiek nizej, zmien to najpierw TAM - inaczej strona i
 * telefon zaczna sie rozjezdzac.
 *
 * DLACZEGO OSOBNY PLIK (zmiana 2026-09-18): do tej zmiany caly ten motyw
 * mieszkal w `site.css`, a `app.css` panelu trzymal WLASNA kopie piatki
 * kolorow i wlasne, okrojone wersje `.surface-card`, `.btn-accent`,
 * `.badge-soft` i `.list-clean`. Kopia raz juz sie rozjechala (panel
 * doczekal sie wyrownania palety dopiero 2026-09-17, poltora tygodnia po
 * witrynie) i nadal trzymal tlo `radial-gradient(... #18294d ...)` w
 * granacie spoza palety. Wspolne reguly stoja wiec TU, a oba arkusze
 * dokladaja juz wylacznie to, co maja wlasne: `site.css` - pasek
 * nawigacji, stopke, kafle sklepu i baner ciasteczek; `app.css` - latki na
 * gotowe ekrany EasyAdmina.
 *
 * KOLEJNOSC WCZYTANIA (obie strony wczytuja ten plik PRZED swoim wlasnym):
 *   - witryna: dwa <link> w `templates/site/base.html.twig`,
 *   - panel: dwa importy w `assets/app.js`, w tej samej kolejnosci -
 *     AssetMapper wypisuje znaczniki <link> w kolejnosci importow.
 * Oba arkusze wlasne licza na to, ze moga nadpisac reguly stad.
 *
 * KRÓJ: Rajdhani leci z NASZEGO serwera, z `assets/fonts/rajdhani/`
 * (reguly @font-face ponizej). Do 2026-10-02 obie strony braly go z Google
 * Fonts - decyzja wlasciciela z tego dnia (RODO): adres IP odwiedzajacego
 * nie ma prawa trafic do Google ani do zadnego CDN-a. Lista w `font-family`
 * nizej nadal podaje za Rajdhani krój systemowy, wiec brakujacy plik
 * psuje typografie, a nie strone.
 */

/*
 * Rajdhani 500/600/700 - te same trzy grubosci, ktore zamawial znacznik
 * `fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700`. Pliki
 * woff2 pobrane 2026-10-02 z fonts.gstatic.com/s/rajdhani/v17/ wraz z
 * podzialem na zakresy znakow, ktory Google podawal w swoim arkuszu:
 * przegladarka sciaga tylko te pliki, ktorych znaki sa na stronie (polskie
 * litery siedza w `latin-ext`). Licencja SIL OFL 1.1 lezy obok plikow
 * (`assets/fonts/rajdhani/OFL.txt`).
 */

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-500-devanagari-7U4JZhv.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-500-latin-ext-HAnRGbC.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-500-latin-SqioKtf.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-600-devanagari-LxOCN2g.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-600-latin-ext-2Etpyb3.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-600-latin-_gG1_gi.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-700-devanagari-m2Bu3MX.woff2") format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-700-latin-ext-_gfhWiy.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/rajdhani/rajdhani-700-latin-b1l1q71.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Kolory 1:1 z Kolory.kt. Nazwy zostaja angielskie, jak reszta kodu. */
    --bg: #04070C;
    --bg-soft: #071014;
    --card: #0a1a1c;
    --text: #D8FFFB;
    --muted: #7FA9A5;
    --accent: #29FFF0;
    --accent-strong: #00d9c8;
    --alert: #FF2B3D;
    --border: rgba(41, 255, 240, 0.22);
}

html, body {
    background: var(--bg);
    color: var(--text);
}

/*
 * Ukosne smugi z ekranow aplikacji. Sa TLEM, nie trescia: leza pod cala
 * strona w `body::before`, z `pointer-events: none`, wiec nie lapia
 * klikniec i nie wchodza w kolejnosc czytania. Przezroczystosc trzymamy
 * nisko (ponizej 0.1) - przy mocniejszej smuga przechodzaca za tekstem
 * zbija kontrast ponizej progu WCAG AA.
 */
body {
    min-height: 100vh;
    line-height: 1.55;
    font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(104deg, transparent 0 14%, rgba(41, 255, 240, 0.07) 14.1% 14.4%, transparent 14.5% 38%,
                        rgba(255, 43, 61, 0.06) 38.1% 38.35%, transparent 38.5% 61%,
                        rgba(41, 255, 240, 0.05) 61.1% 61.3%, transparent 61.4% 82%,
                        rgba(255, 43, 61, 0.05) 82.1% 82.3%, transparent 82.4%),
        radial-gradient(circle at 12% 0%, rgba(41, 255, 240, 0.09) 0%, transparent 46%);
}

/*
 * Czerwone smugi w ruchu, z ekranow aplikacji. Osobna warstwa od
 * `body::before`: tamte smugi stoja, te plyna z gory na dol.
 *
 * Jedno `body::after` zamiast szesciu <div>-ow z makiety - linie rysuje
 * powtarzalny gradient, a ruch daje przesuwanie tla o WYSOKOSC JEDNEGO
 * POWTORZENIA (360px). Dzieki temu klatka koncowa pokrywa sie z poczatkowa
 * i petli nie widac. Element jest obrocony i rozciagniety poza ekran
 * (`inset: -50%`), bo obrocony prostokat inaczej pokazalby gole rogi.
 *
 * Dwa gradienty na linie: waski rdzen i szersza, slabsza poswiata pod nim -
 * `box-shadow` z makiety nie dziala na gradient, wiec swiecenie trzeba
 * namalowac.
 *
 * Krycie rdzenia (0.22) lamie prog 0.1 z komentarza wyzej i to jest
 * swiadome: tamten prog pilnuje SZEROKICH smug, ktore kladna sie za calym
 * akapitem. Tu linia ma dwa piksele i przecina tekst w poprzek, wiec zabiera
 * kontrast jednemu wierszowi pikseli, a nie literze.
 */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-20deg);
    background:
        repeating-linear-gradient(180deg,
            transparent 0 179px,
            rgba(255, 43, 61, 0.22) 179px 181px,
            transparent 181px 360px),
        repeating-linear-gradient(180deg,
            transparent 0 174px,
            rgba(255, 43, 61, 0.07) 174px 186px,
            transparent 186px 360px);
    animation: red-stripes-flow 15s linear infinite;
}

@keyframes red-stripes-flow {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 360px, 0 360px; }
}

/*
 * Ruch w tle jest ozdoba, a dla czesci ludzi - powodem zawrotow glowy albo
 * migreny. Kto poprosil system o ograniczenie animacji, dostaje te same
 * smugi, tylko nieruchome.
 */
@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none;
    }
}

/* Cala tresc idzie NAD smugami - inaczej tlo kladloby sie na tekscie. */
body > * {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: 0.06em;
}

a {
    color: var(--accent);
    text-decoration-color: rgba(41, 255, 240, 0.4);
}

a:hover, a:focus {
    color: var(--text);
}

.text-muted-custom { color: var(--muted); }

.hero { padding: 4.5rem 0 2.5rem; }

.section-pad { padding: 2.5rem 0; }

/*
 * Naglowek sekcji ma pasek akcentu z lewej - ten sam element, ktorym
 * aplikacja oznacza tytul ekranu ("| MÓJ SERWER"). Pasek rysuje
 * pseudoelement, wiec nie wchodzi do tekstu odczytywanego przez
 * czytnik ekranu.
 */
.section-title {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-left: 0.9rem;
    position: relative;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    background: var(--accent);
}

.surface-card {
    background: linear-gradient(180deg, rgba(41, 255, 240, 0.07), rgba(4, 7, 12, 0.2)), var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Kafelek dostaje ten sam pasek, co pozycja listy w aplikacji. */
.surface-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}

.badge-soft {
    background: rgba(41, 255, 240, 0.14);
    border: 1px solid rgba(41, 255, 240, 0.4);
    color: var(--accent);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 0.25rem;
}

.btn-accent:hover, .btn-accent:focus {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--bg);
}

/*
 * Bootstrap maluje .btn-outline-info wlasnym bladym blekitem, ktory obok
 * cyjanu aplikacji wyglada na pomylke. Nadpisujemy oba stany - zwykly i
 * wskazany - jednym kolorem akcentu.
 */
.btn-outline-info, .btn-outline-light {
    border-color: var(--border);
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 0.25rem;
}

.btn-outline-info:hover, .btn-outline-info:focus,
.btn-outline-light:hover, .btn-outline-light:focus {
    background-color: rgba(41, 255, 240, 0.14);
    border-color: var(--accent);
    color: var(--accent);
}

.list-clean { margin: 0; padding-left: 0; list-style: none; }

/* Pozycja listy powtarza wiersz menu aplikacji: pasek, potem tresc. */
.list-clean li {
    margin-bottom: 0.45rem;
    padding-left: 0.9rem;
    position: relative;
}

.list-clean li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 3px;
    height: 1em;
    background: var(--accent);
}

.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
}

/*
 * Notka cenowa i ostrzezenia biora czerwien ostrzegawcza aplikacji zamiast
 * zoltego z poprzedniego motywu - w aplikacji ten kolor znaczy "uwaga" i
 * ma znaczyc to samo tutaj.
 */
.price-note,
.alert-warning {
    background: rgba(255, 43, 61, 0.12);
    border: 1px solid rgba(255, 43, 61, 0.45);
    border-radius: 0.35rem;
    color: #ffd2d6;
    padding: 0.75rem 1rem;
}

.alert-danger {
    background: rgba(255, 43, 61, 0.16);
    border: 1px solid var(--alert);
    color: #ffd2d6;
}

.alert-success {
    background: rgba(41, 255, 240, 0.12);
    border: 1px solid var(--border);
    color: var(--text);
}

/*
 * Znak + napis: animowany znak 36 px, obok „TAKLAB" w Rajdhani 600 w kolorze
 * akcentu, a pod napisem opcjonalny, mniejszy i przygaszony dopisek.
 * Siatka zamiast zagniezdzonego bloku: znak zajmuje oba wiersze, wiec bez
 * dopisku stoi na srodku, a z dopiskiem obejmuje napis i dopisek. Wymiary
 * znaku sa stale, zeby wolniej wczytany SVG nie przesuwal paska.
 */
.brand-lockup {
    display: inline-grid;
    grid-template-columns: 36px auto;
    column-gap: 0.6rem;
    align-items: center;
    color: var(--accent);
    text-decoration: none;
    line-height: 1.05;
    max-width: 100%;
}

.brand-lockup__mark {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
}

.brand-lockup__name {
    grid-column: 2;
    font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-lockup__tag {
    grid-column: 2;
    font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* Jasny motyw EasyAdmina: cyjan #29FFF0 na bialym nie ma kontrastu, wiec
   nazwa dostaje ciemniejszy odcien tej samej barwy, a dopisek ciemny szary. */
body.ea-light-scheme .brand-lockup__name {
    color: #00776e;
}

body.ea-light-scheme .brand-lockup__tag {
    color: #4b5563;
}

/* Wazka na telefonie: nawigacja witryny nie moze zawinac sie przez logo. */
@media (max-width: 400px) {
    .brand-lockup {
        column-gap: 0.45rem;
    }

    .brand-lockup__name {
        font-size: 1.25rem;
        letter-spacing: 0.1em;
    }

    .brand-lockup__tag {
        font-size: 0.7rem;
    }
}