/*
 * THE SIGN-IN DOOR, WITH A PICTURE BEHIND IT - 11 Oct 2026.
 *
 * Mišo: "na admin login background image neku lijepu njeznu sliku ...
 * toliko da imamo nekako tu pozadinu uređenu i fancy... nesto sto ce kupci
 * odmah vidjeti kao dobar design dodatak k loginu a ne samo suhoparni ulaz",
 * and then: realistic and warm, like the real world - not a drawing.
 *
 * The picture is signin-library.webp (with .jpg beside it for a browser
 * that cannot read WebP): a grand library under a glass dome, sunlight on
 * the floor, an owl in flight - AI-generated for us by Mišo (11 Oct 2026),
 * 1983 x 793, about 260 KB.
 *
 * Loaded ONLY by the two doors - templates/login.php (the school's sign-in)
 * and templates/landing.php (the school code). Both mark their <main> with
 * .signin-door, and every rule here is qualified by it, so no screen behind
 * the door can ever be touched by this file.
 *
 * WHY :has() AND NOT A BODY CLASS. The body's class list is the Router's
 * (admin + theme + mode, one place decides it), and a template that passed
 * its own bodyClass would replace those. `body:has(> main.signin-door)` asks
 * the page what it is instead. A browser without :has() simply shows the
 * door as it was before - plain, readable, nothing missing.
 *
 * READABILITY FIRST. The fields sit on a frosted panel; the picture is
 * dimmed well down in dark mode, so the text contrast is always the panel's,
 * never the picture's.
 *
 * WHERE THE PICTURE IS ANCHORED. It is a wide panorama (2.5 : 1) and a
 * screen is not, so `cover` crops its sides. 72% keeps the owl (top right)
 * in the frame on a laptop and a large monitor alike; the dome stays behind
 * the panel, where its light makes the frosted glass glow.
 */

/* ------------------------------------------------------------------ */
/* The picture                                                          */
/* ------------------------------------------------------------------ */

body.admin:has(> main.signin-door)
{
    background:
        linear-gradient(rgb(20 14 8 / .08), rgb(20 14 8 / .08)),
        url("signin-library.jpg") 72% 38% / cover no-repeat fixed,
        #3a2a1c;
    background:
        linear-gradient(rgb(20 14 8 / .08), rgb(20 14 8 / .08)),
        image-set(url("signin-library.webp") type("image/webp"), url("signin-library.jpg") type("image/jpeg")) 72% 38% / cover no-repeat fixed,
        #3a2a1c;
}

/*  DARK: the same room after hours. The picture stays (a door that changes
    its whole character with the system setting would feel like a different
    place), but dimmed, so the panel reads as the lit thing in it. Both ways
    the application picks dark: the explicit mode, and the system's answer
    where the reader has not chosen. */
body.admin.mode-dark:has(> main.signin-door)
{
    background:
        linear-gradient(rgb(10 12 18 / .62), rgb(10 12 18 / .62)),
        image-set(url("signin-library.webp") type("image/webp"), url("signin-library.jpg") type("image/jpeg")) 72% 38% / cover no-repeat fixed,
        #151820;
}

@media (prefers-color-scheme: dark)
{
    body.admin:not(.mode-light):has(> main.signin-door)
    {
        background:
            linear-gradient(rgb(10 12 18 / .62), rgb(10 12 18 / .62)),
            image-set(url("signin-library.webp") type("image/webp"), url("signin-library.jpg") type("image/jpeg")) 72% 38% / cover no-repeat fixed,
            #151820;
    }
}

/*  ON A PHONE the panel covers the middle anyway: show the right-hand side,
    the shelves and the owl. `fixed` is ignored by mobile browsers, which is
    fine - the page is barely taller than the screen. */
@media (max-width: 640px)
{
    /*  All three spellings of the door's background above, so the dark ones
        (more specific) do not put the window back in the middle. */
    body.admin:has(> main.signin-door),
    body.admin.mode-dark:has(> main.signin-door),
    body.admin:not(.mode-light):has(> main.signin-door)
    {
        background-position: 0 0, 86% 30%, 0 0;
    }
}

/* ------------------------------------------------------------------ */
/* The bar and the footer: glass, here only                             */
/* ------------------------------------------------------------------ */

/*  admin.css takes the frosted glass off the top bar on purpose - over a
    grid it blurs the row being read. On the door there is no grid, only the
    picture, and an opaque white band across the top of it would cut the
    room in two. */
body.admin:has(> main.signin-door) .topbar
{
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

body.admin:has(> main.signin-door) .foot
{
    margin-top: 28px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------------ */
/* The panel                                                            */
/* ------------------------------------------------------------------ */

/*  The whole column - logo, the two sentences, the form - on one frosted
    pane, so every line of text has the same calm ground under it. The form
    keeps its own card on top (admin.css), one step brighter. */
main.signin-door
{
    max-width: 480px;

    /*  `auto` underneath: the body is a column at least a screen tall
        (admin.css), so this pushes the footer down to the bottom edge
        instead of leaving it halfway across the picture. */
    margin: 44px auto auto;
    padding: 30px 30px 26px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid color-mix(in srgb, #ffffff 45%, transparent);
    box-shadow:
        0 1px 2px rgb(60 40 20 / .06),
        0 24px 60px -28px rgb(60 40 20 / .45);
}

body.admin.mode-dark main.signin-door
{
    border-color: color-mix(in srgb, #ffffff 10%, transparent);
    box-shadow: 0 24px 60px -28px rgb(0 0 0 / .7);
}

@media (prefers-color-scheme: dark)
{
    body.admin:not(.mode-light) main.signin-door
    {
        border-color: color-mix(in srgb, #ffffff 10%, transparent);
        box-shadow: 0 24px 60px -28px rgb(0 0 0 / .7);
    }
}

/*  The logo needs less room above it inside a panel than on a bare page. */
main.signin-door .signin-mark
{
    margin-top: 0;
}

/*  A phone: the panel is the screen's width less a margin, not a card
    floating in a strip of picture too thin to read as one. */
@media (max-width: 520px)
{
    main.signin-door
    {
        margin: 16px 12px auto;
        padding: 22px 18px 20px;
        border-radius: 16px;
    }
}