/* Login page — true glassmorphism, logo above card */

.login--container {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100vw;
    height          : 100vh;
    padding-top     : 0;
    box-sizing      : border-box;
    position        : relative;
}

/* Dark overlay — lighter so photo bleeds through glass */
.login--container::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(155deg, rgba(10,20,50,0.48) 0%, rgba(4,8,24,0.60) 100%);
    z-index    : 0;
}

/* Glass card — no header, fully transparent */
.login--block {
    position              : relative;
    z-index               : 1;
    font-size             : 0.95em;
    color                 : #fff !important;
    background            : rgba(255, 255, 255, 0.11) !important;
    backdrop-filter               : blur(26px) saturate(1.5);
    -webkit-backdrop-filter       : blur(26px) saturate(1.5);
    width                 : 380px;
    max-width             : calc(100vw - 32px);
    margin                : 80px 0 0 0;
    padding               : 28px 28px 32px 28px;
    box-sizing            : border-box;
    overflow              : visible;
    border                : 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius         : 20px !important;
    -moz-border-radius    : 20px !important;
    -webkit-border-radius : 20px !important;
    box-shadow            :
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 4px 16px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-box-shadow    : 0 24px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.20);
    -moz-box-shadow       : 0 24px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.20);
}

/* Logo floated above the card via absolute positioning */
.login--block .zagolovok {
    position      : absolute !important;
    top           : 0 !important;
    left          : 50% !important;
    transform     : translate(-50%, calc(-100% - 20px)) !important;
    margin        : 0 !important;
    padding       : 0 !important;
    background    : transparent !important;
    border        : 0 !important;
    border-radius : 0 !important;
    width         : max-content;
    text-align    : center;
    white-space   : nowrap;
}

.login--block .zagolovok img {
    height     : 44px !important;
    max-width  : 220px;
    object-fit : contain;
    display    : block;
    margin     : 0 auto;
    filter     : brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.35));
}

/* Page title — override .blue class from app.css */
.login--block h2,
.login--block .blue h2,
.login--block .div-center h2,
.login--block .div-center.blue h2,
.login--block .div-center.marg3 h2 {
    font-size      : 0.76em !important;
    font-weight    : 600 !important;
    color          : rgba(255,255,255,0.55) !important;
    letter-spacing : 0.14em !important;
    text-transform : uppercase !important;
    margin         : 0 0 16px 0 !important;
}

/* Revert legacy overrides */
.login--block i.green,
.login--block div.green { color : rgba(100,220,120,0.90) !important; }
.login--block .red      { color : rgba(255,120,100,0.90) !important; }

/* Show/hide password icon */
.login--block .showpass {
    position  : absolute;
    font-size : 1.1em;
    top       : 50%;
    right     : 14px;
    transform : translateY(-50%);
    color     : rgba(255,255,255,0.45);
}

/* Inputs — glass style, white text — high specificity to beat app.css */
.login--block .flex-string input[type="text"],
.login--block .flex-string input[type="password"],
.login--block .flex-string input[type="email"],
.login--block .flex-container input[type="text"],
.login--block .flex-container input[type="password"],
.login--block input[type="text"],
.login--block input[type="password"],
.login--block input[type="email"],
.login--block input {
    height             : auto !important;
    width              : 100% !important;
    border             : 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius      : 12px !important;
    font-size          : 0.96em !important;
    font-weight        : 400 !important;
    line-height        : 1.4 !important;
    padding            : 13px 42px 13px 16px !important;
    color              : #fff !important;
    background         : rgba(255, 255, 255, 0.13) !important;
    vertical-align     : middle;
    text-align         : left !important;
    outline-style      : none;
    box-shadow         : none !important;
    -webkit-box-shadow : none !important;
    -moz-box-shadow    : none !important;
    box-sizing         : border-box;
    transition         : border-color .2s ease, background .2s ease, box-shadow .2s ease;
    -webkit-transition : border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.login--block .flex-string input[type="text"]:focus,
.login--block .flex-string input[type="password"]:focus,
.login--block .flex-container input[type="text"]:focus,
.login--block .flex-container input[type="password"]:focus,
.login--block input[type="text"]:focus,
.login--block input[type="password"]:focus,
.login--block input[type="email"]:focus,
.login--block input:focus {
    border-color       : rgba(255,255,255,0.65) !important;
    background         : rgba(255, 255, 255, 0.22) !important;
    color              : #fff !important;
    box-shadow         : 0 0 0 3px rgba(255,255,255,0.09) !important;
    -webkit-box-shadow : 0 0 0 3px rgba(255,255,255,0.09) !important;
    transition         : all .2s ease;
    -webkit-transition : all .2s ease;
}

.login--block input::placeholder,
.login--block .flex-string input::placeholder {
    color       : rgba(255, 255, 255, 0.48) !important;
    font-weight : 400;
}

/* Links */
.login--block a,
.login--block a:active { color : rgba(160,200,255,0.85) !important; }

/* Copyright below card */
.login--block .copy {
    position  : absolute;
    bottom    : -28px;
    left      : 0;
    color     : rgba(255,255,255,0.40) !important;
    font-size : 0.78em;
}

/* Login button — solid blue stands out against glass */
a.loginbutton {
    display               : block !important;
    float                 : none !important;
    width                 : 100% !important;
    max-width             : 100% !important;
    height                : auto !important;
    line-height           : 1.4 !important;
    padding               : 14px 24px !important;
    font-size             : 0.88em !important;
    font-weight           : 700 !important;
    text-align            : center;
    text-decoration       : none;
    text-transform        : uppercase;
    letter-spacing        : 0.09em;
    color                 : #fff !important;
    background            : linear-gradient(135deg, #2179d4 0%, #1565C0 100%) !important;
    border                : none !important;
    border-radius         : 14px !important;
    -moz-border-radius    : 14px !important;
    -webkit-border-radius : 14px !important;
    box-sizing            : border-box !important;
    box-shadow            : 0 8px 24px rgba(21,101,192,0.55) !important;
    -webkit-box-shadow    : 0 8px 24px rgba(21,101,192,0.55) !important;
    -moz-box-shadow       : 0 8px 24px rgba(21,101,192,0.55) !important;
    transition            : transform .15s ease, box-shadow .15s ease !important;
    -webkit-transition    : transform .15s ease, box-shadow .15s ease !important;
}

a.loginbutton:hover {
    background   : linear-gradient(135deg, #2e85de 0%, #1a6ed4 100%) !important;
    border       : none !important;
    color        : #fff !important;
    transform    : translateY(-2px);
    box-shadow   : 0 12px 30px rgba(21,101,192,0.65) !important;
    -webkit-box-shadow : 0 12px 30px rgba(21,101,192,0.65) !important;
    transition   : all .2s ease !important;
    -webkit-transition : all .2s ease !important;
}

a.loginbutton:active {
    background   : linear-gradient(135deg, #1565C0 0%, #0d47a1 100%) !important;
    border       : none !important;
    color        : #fff !important;
    transform    : translateY(0);
    box-shadow   : 0 4px 14px rgba(21,101,192,0.40) !important;
    -webkit-box-shadow : 0 4px 14px rgba(21,101,192,0.40) !important;
    transition   : all .1s linear !important;
    -webkit-transition : all .1s linear !important;
}