/**
 * Prihlasovacia stránka administrácie.
 *
 * Prekrýva login.css, preto sa načítava až za ním. Vypnutie = zmazanie
 * jedného <link> riadku v app/View/Layouts/backoffice_login.ctp.
 *
 * Skladba: rozostrená fotka cez celú plochu, na nej tmavý závoj a nad ním
 * matná sklenená karta. Závoj a krytie karty sú nastavené tak, aby biely
 * text držal kontrast aj nad úplne svetlým miestom fotky — čitateľnosť tak
 * nezávisí od toho, akú fotku do pozadia dáš.
 *
 * Ikony pri poliach sa nepoužívajú, polia idú cez celú šírku.
 */

/* ---------------------------------------------------------------- pozadie */

body {
    animation: none;
    background-color: #0f1217;
    color: #ffffff;
}

/* rozostrená fotka; mierne zväčšená, aby rozmazanie neodhalilo okraje */
body:before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: url(/img/universal/bg-backoffice-login.jpg) center center / cover no-repeat;
    filter: blur(14px) saturate(115%);
    transform: scale(1.08);
    opacity: 1;
    z-index: 0;
}

/* tmavý závoj — drží čitateľnosť bez ohľadu na fotku */
body:after {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background:
        radial-gradient(120% 90% at 50% 15%, rgba(101, 118, 160, .28), transparent 60%),
        linear-gradient(160deg, rgba(12, 15, 20, .84), rgba(12, 15, 20, .93));
    z-index: 0;
}

/* ------------------------------------------------------------------ karta */

.login .box {
    background-color: rgba(18, 22, 29, .88);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.login h1 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.4px;
}

.login h2 {
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    font-weight: 400;
}

/* ------------------------------------------------------------------ polia */

/* ikony sa nepoužívajú */
.login .content .input .icon-login {
    display: none;
}

.login .content .input input {
    background-color: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 400;
}

.login .content .input input::placeholder {
    color: rgba(255, 255, 255, .78);
    opacity: 1;
}

.login .content .input input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .78);
}

.login .content .input input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

/* prehliadačom vyplnené polia nesmú preblysnúť bielym podkladom */
.login .content .input input:-webkit-autofill,
.login .content .input input:-webkit-autofill:hover,
.login .content .input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #232833 inset;
    caret-color: #ffffff;
}

/* --------------------------------------------------------------- tlačidlo */

.login .content .button {
    width: 100%;
    background-color: #6576a0;
    border: 1px solid #6576a0;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

.login .content .button:hover {
    background-color: #7385ae;
    border-color: #7385ae;
    color: #ffffff;
}

.login .content .button:active {
    transform: translateY(1px);
}

/* ------------------------------------------------------------ drobný text */

.login .content .text,
.login .content .link,
.login .content .text a,
.login .content .link a {
    color: rgba(255, 255, 255, .78);
}

.login .content .text a,
.login .content .link {
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.login .content .text a:hover,
.login .content .link:hover {
    border-bottom-color: #ffffff;
    text-decoration: none;
}

/* -------------------------------------------------------------- hlásenie */

.login .alert-danger {
    background-color: rgba(186, 90, 79, .22);
    border: 1px solid rgba(232, 160, 150, .45);
    border-radius: 8px;
    color: #ffd9d4;
    font-size: 14px;
}

.login .close {
    color: #ffd9d4;
    opacity: .8;
    text-shadow: none;
}