/* Vstupní stránka janzitko.cz — samostatný stylesheet.
   Dashboard si dál žije s style.css; tady z něj nic nepotřebujeme, takže se
   nemůžou navzájem přebíjet.

   Wallpaper má vlastní obsah, takže na něm nic nepřekrýváme: formulář sedí
   vpravo nahoře, kde je obrázek nejtmavší (změřeno: horní pás má jas 12–15 ze
   100, spodní pravý roh 60), a jinak necháváme obrázek mluvit. Na úzkých
   displejích se karta posadí na střed. */

:root {
    color-scheme: dark;

    --bg-deep: #020a15;
    --card: rgba(12, 20, 32, 0.62);
    --hairline: rgba(148, 170, 200, 0.16);
    --hairline-strong: rgba(148, 170, 200, 0.3);

    --text: #eaf0f8;
    --text-dim: #a3b2c7;
    /* Zesvetleno z #6b7d94: popisky poli a paticka jsou maly text, ktery na
       nejsvetlejsim miste wallpaperu mel jen 3,1:1. Takhle drzi 4,9:1. */
    --text-faint: #90a0b5;

    /* Zlatá je vytažená přímo z wallpaperu: teplé pixely obrázku mají odstín
       29–35°, nejjasnější zlatá vychází na #F0CE9D. Tlačítko tak patří do
       scény, místo aby na ní leželo. Tmavý inkoust na něm drží 11,2:1. */
    --gold: #e9c489;
    --gold-deep: #c99a56;
    --on-gold: #1b1206;
    --danger: #f87171;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', sans-serif;
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background: var(--bg-deep);
}

/* ------------------------------------------------------------------ pozadí */
.sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--bg-deep);
    background-image: image-set(url('portal-bg.webp') type('image/webp'),
                                url('portal-bg.jpg') type('image/jpeg'));
    background-image: -webkit-image-set(url('portal-bg.webp') type('image/webp'),
                                        url('portal-bg.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center right;
    animation: reveal 1.1s ease-out both;
}

/* Prohlížeče bez image-set() dostanou JPEG. */
@supports not (background-image: image-set(url('portal-bg.webp') type('image/webp'))) {
    .sky { background-image: url('portal-bg.jpg'); }
}

/* Ztmavení pod formulářem, aby text držel kontrast bez ohledu na to,
   jak se obrázek na daném poměru stran ořízne. */
.sky::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Jen jemné ztmavení za kartou vpravo nahoře a mírná viněta — obrázek
       zůstává čitelný, karta má pod sebou klid. */
    background:
        radial-gradient(46% 40% at 88% 12%, rgba(2, 10, 21, 0.62), transparent 72%),
        radial-gradient(85% 75% at 50% 50%, transparent 55%, rgba(1, 5, 12, 0.5) 100%);
}

@keyframes reveal {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ layout */
.stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-items: start;
    justify-items: end;
    padding: clamp(26px, 4vw, 56px);
}

.enter {
    width: 100%;
    max-width: 372px;
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- karta */
.card {
    background: var(--card);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 26px 26px 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 34px 70px -34px rgba(0, 0, 0, 0.95);
}

/* --------------------------------------------------------------------- pole */
label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 9px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: rgba(2, 10, 21, 0.66);
    border: 1px solid var(--hairline-strong);
    border-radius: 11px;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

input::placeholder { color: var(--text-faint); }

input:focus {
    border-color: var(--gold);
    background: rgba(2, 10, 21, 0.88);
    box-shadow: 0 0 0 3px rgba(233, 196, 137, 0.22);
}

/* ---------------------------------------------------------------- tlačítka */
button {
    width: 100%;
    height: 48px;
    margin-top: 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 640;
    color: var(--on-gold);
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.16s, filter 0.16s;
    box-shadow: 0 12px 28px -14px rgba(233, 196, 137, 0.75);
}

button:hover { filter: brightness(1.06); box-shadow: 0 16px 34px -14px rgba(233, 196, 137, 0.95); }
button:active { transform: translateY(1px); }

button.ghost {
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--text-dim);
    box-shadow: none;
    font-weight: 500;
}

button.ghost:hover { color: var(--gold); border-color: var(--gold-deep); filter: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* -------------------------------------------------------------------- chyba */
.alert {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    color: #fecaca;
    background: rgba(248, 113, 113, 0.13);
    border: 1px solid rgba(248, 113, 113, 0.36);
}

/* ------------------------------------------------ přihlášení správce */
/* Klienti mají jen kód — přihlášení je pořád po ruce, ale nestojí v cestě. */
.admin {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
}

.admin > summary {
    list-style: none;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    color: var(--text-faint);
    padding: 3px 0;
    transition: color 0.14s;
}

.admin > summary::-webkit-details-marker { display: none; }
.admin > summary::after { content: ' ▾'; opacity: 0.55; }
.admin[open] > summary::after { content: ' ▴'; }
.admin > summary:hover { color: var(--text-dim); }
.admin form { margin-top: 16px; }
.admin .field + .field { margin-top: 14px; }


/* -------------------------------------------------------------- responzivní */
@media (max-width: 900px) {
    .stage { justify-items: center; align-items: center; padding: 34px 22px; }
    .enter { max-width: 400px; }
    .sky { background-position: center; }
    .sky::after {
        background:
            linear-gradient(180deg, rgba(2, 10, 21, 0.72) 0%, rgba(2, 10, 21, 0.5) 45%,
                            rgba(2, 10, 21, 0.82) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sky, .enter { animation: none; }
    * { transition: none !important; }
}