/*********************************************/
/* Toča Center                               */
/* Author: Matej Ramšak                      */
/* Version: 2.00                             */
/* 10.11.2025                                */
/* Custom CSS for login                      */
/*********************************************/


:root {
  --gold: #aa7b4c;
  --black: #0f0f0f;
}


#login-page{
    display: block;
    margin: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #333;
}

/*------ LEFT SIDE ------*/
.left-side{
    display: inherit;
    height: inherit;
}

.login-form{
    height: 520px;
    top: 50%;
    position: absolute;
    margin-top: -260px;
}

.profile-image-login {
  width: auto;
  height: 100px !important;
  margin-left: 20%;
}


/*------ RIGHT SIDE ------*/
.right-side{
    display: inherit;
    height: inherit;
    background-image: url('../images/login-bg.jpg');
    background-size: cover;
    background-position: center center; 
} 

.input-field label{
    top: 0rem;
}

input[type="text"], input[type="password"] {
    text-indent: 20px;
}

.input-field .prefix.active {
  color: #42adf5;
}

.error, .success{
    color: #d32f2f;
    font-size: 1.2rem;
    line-height: 0.3rem;
}

.success{
    color: #8bc34a;
}

.gear{
    display: block;
    height: 80px;
    background: url('../images/gear.svg') no-repeat; 
    position: absolute;
    top: -15%;
    left: 0;
}


/* =========================
   MODERN LOGIN OVERRIDES
   ========================= */

#login-page {
    font-family: 'Inter', 'Roboto', sans-serif;
}

/* Title */
#login-page .login-form-text {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Labels (force override) */
#login-page .input-field label {
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 500;
    top: -6px;
}

/* Icons */
#login-page .input-field .prefix {
    color: rgba(255,255,255,0.85) !important;
}

/* INPUTS — force browser-default styling */
#login-page input.browser-default {
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: #ffffff !important;
    font-size: 0.95rem;
}

/* Focus */
#login-page input.browser-default:focus {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.25) !important;
}

/* Forgot password */
#login-page #repass {
    color: #ffffff !important;
    opacity: 0.85;
    font-size: 0.8rem;
}

#login-page #repass:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Button */
#login-page #loginBtn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    height: 46px;
    line-height: 46px;
    background-color: var(--gold) !important;
    left: 8%;
    width: 50%;
    float: right;
}

/* Messages */
#login-page #ajax {
    color: #ffffff !important;
    font-size: 0.85rem;
    text-align: center;
}


/* Center labels vertically & horizontally */
#login-page .input-field label {
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.mdi-social-person-outline {
    top: 50%;
    transform: translateY(-50%);
}

.mdi-action-lock-outline {
    top: 50%;
    transform: translateY(-50%);
}