* {
    box-sizing: border-box;
}
:root {
    --font_main: 'Encode Sans Semi Condensed', sans-serif;
    --clr_lines_frame: rgba(63, 71, 83, 1);
    --clr_test_blue: rgba(80, 208, 242, 1);
    --clr_base_black: rgba(1, 1, 4, 1);
    --clr_txt_base_white: rgba(198, 199, 202, 1);
    --clr_txt_light_gray: rgba(102, 115, 148, 1);
    --clr_inputs_bg: rgba(8, 16, 27, 1);
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--clr_base_black);
}

body {
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    min-width: 100vw;
    margin: 0;
}

main {
    min-height: fit-content;
    flex: 1;               
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-header {
    height: 77px;
    min-height: 77px;
    background-color:var(--clr_base_black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
}

.login-footer {
    height: 77px;
    min-height: 77px;
    font-family: var(--font_main);
    color: white;
    background-color: var(--clr_base_black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
}
.login-body{
    min-height: 500px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 100%; /* výška gridových řádků */
    width: 100%;
    position: relative;
}
.login-background-pic {
    background-color: aliceblue;
    grid-column: 1;     
    grid-row: 1;       
    background-image: url('../../static/pics/kotelna_login_background.png'); 
    background-size: cover;
    background-position: center;
    z-index: 0;
    width: 100%;
    height: 100%;                     
}
.login-background-mask {
    display: grid;
    grid-template-rows: 1fr 1fr;
    background: linear-gradient(90deg, #010104 16.67%, rgba(3, 4, 10, 0.1) 27.29%, rgba(2, 3, 7, 0) 30.88%, rgba(255, 255, 255, 0) 100%);
    grid-column: 1;     
    grid-row: 1;       
    z-index: 1;
    width: 100%;
    height: 100%;
}



.lines {
    width: 100%;
    height: 2px;
    background-color: var(--clr_lines_frame);
}
.upper-line {
    align-self: start;
}
.lower-line {
    align-self: end;
}

.login-form-container {
    grid-column: 1;     
    grid-row: 1;       
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(300px,1fr) 1fr 1fr;
    grid-template-rows: minmax(400px, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.login-form-holder {
    width: clamp(200px, 80%, 300px);
    height: clamp(200px, 80%, 750px);
    background: radial-gradient(166.74% 166.74% at 0% 100%, #03040A 49.33%, #06182C 100%);
    border: 1px solid var(--clr_lines_frame);
    display: grid;
    grid-template-columns: minmax(200px, 1fr);
    grid-template-rows: repeat(24,1fr);
}
.login-form-header {
    grid-column: 1;
    grid-row: 1 / span 5;
    z-index: 0;
    font-family: var(--font_main);
    color: var(--clr_test_blue);
    font-size: clamp(0.5rem, 1.25rem, 2.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: -0.01em;
}
.login-form-line {
    grid-column: 1;
    grid-row: 5;
    z-index: 1;
    background-image: url('../../static/pics/login-form-line.png');
    background-repeat: no-repeat;
    background-position: bottom center;    
    background-size: contain;       
    width: 100%;
    height: 100%;
}

.login-form {
    grid-column: 1;
    grid-row: 6 / span 18;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(14,1fr);
    justify-items: center;
    align-items: center;
}
.login-form input[type="text"] {
    letter-spacing: -0.01em;
    color:var(--clr_txt_light_gray);
    grid-column: 1;
    grid-row: 2/ span 2;
    width: 80%;
    height: 70%;

    background: var(--clr_inputs_bg);
    border: 1px solid var(--clr_lines_frame);
    border-radius: 2px;

}
.login-form input[type="text"]::placeholder {
    letter-spacing: -0.01em;
    color: var(--clr_txt_light_gray);
    opacity: 1;
}
.login-form input[type="password"] {
    letter-spacing: -0.01em;
    color: var(--clr_txt_light_gray);
    grid-column: 1;
    grid-row: 4 / span 2;
    width: 80%;
    height: 70%;

    background: var(--clr_inputs_bg);
    border: 1px solid var(--clr_lines_frame);
    border-radius: 2px;

}
.login-form input[type="password"]::placeholder {
    letter-spacing: -0.01em;
    color: var(--clr_txt_light_gray);
    opacity: 1;
}

.login-form button {
    position: relative; 
    grid-column: 1;
    grid-row: 8 / span 2;
    z-index: 2;
    width: 80%;
    height: 70%;
    border-radius: 1px;
    font-family: 'Encode Sans Semi Condensed';
    font-size: clamp(0.5rem, 1.25rem, 1.5rem);
    letter-spacing: -0.01em;
    color: #45C0E8;
    text-shadow: 0px 4px 4px #000206;
    background: radial-gradient(111.08% 144.29% at 50.15% 66.36%, #022B5B 23.92%, #0359AA 47.55%, #C0FCFD 100%);
    border: 2px solid rgba(201, 251, 253, 0.7);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 50px rgba(7, 105, 179, 0.35), inset 0px 0px 8px rgba(255, 255, 255, 0.25);
}

/* Glow 1 */
.login-form button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;   /* nyní odpovídá šířce tlačítka */
    height: 100%;  /* odpovídá výšce tlačítka */
    background: radial-gradient(111.08% 144.29% at 50.15% 66.36%, #2DE3FF 0%, rgba(45, 227, 255, 0) 100%);
    filter: blur(20px);
    opacity: 0.6;
    border-radius: 100px;
    z-index: -1;   /* za tlačítkem */
}

/* Glow 2 */
.login-form button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;    /* menší glow, relativně k tlačítku */
    height: 30%;
    background: #CFFAFA;
    filter: blur(25px);
    opacity: 0.7;
    border-radius: 100px;
    z-index: -1;   /* za tlačítkem, nad glow1 */
}
.login-form button:hover {
    cursor: pointer;
    background: radial-gradient(111.08% 144.29% at 50.15% 66.36%, #0359AA 23.92%, #022B5B 47.55%, #C0FCFD 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 70px rgba(7, 105, 179, 0.5), inset 0px 0px 10px rgba(255, 255, 255, 0.35);
}
.login-form button:active {
    background: radial-gradient(111.08% 144.29% at 50.15% 66.36%, #022B5B 23.92%, #0359AA 47.55%, #C0FCFD 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25), 0px 0px 30px rgba(7, 105, 179, 0.3), inset 0px 0px 5px rgba(255, 255, 255, 0.2);
}