/* ========================================
   COMSERV INTERCOMPANY LOGIN
======================================== */

* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family: Arial, sans-serif;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.88),
            rgba(0, 25, 12, 0.92)
        ),
        url("../images/it-background.jpg");

    background-size: cover;

    background-position: center;

    min-height: 100vh;
}


/* LOGIN PAGE */

.login-page {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 30px;
}


/* LOGIN BOX */

.login-box {

    width: 100%;

    max-width: 450px;

    background: rgba(5, 10, 8, 0.96);

    border: 1px solid #149447;

    border-radius: 18px;

    padding: 45px 40px;

    box-shadow:
        0 0 40px rgba(0, 180, 80, 0.25);

    color: white;

    text-align: center;
}


/* LOGO */

.login-logo img {

    max-width: 150px;

    margin-bottom: 20px;
}


.login-box h1 {

    color: white;

    margin-bottom: 10px;

    font-size: 28px;
}


/* NOTICE */

.login-notice {

    color: #b8b8b8;

    line-height: 1.6;

    margin-bottom: 30px;
}


/* INPUTS */

.input-group {

    text-align: left;

    margin-bottom: 20px;
}


.input-group label {

    display: block;

    margin-bottom: 8px;

    color: #00c853;

    font-weight: bold;
}


.input-group input {

    width: 100%;

    padding: 14px;

    background: #101512;

    border: 1px solid #333;

    border-radius: 8px;

    color: white;

    font-size: 16px;

    outline: none;
}


.input-group input:focus {

    border-color: #00c853;

    box-shadow:
        0 0 10px rgba(0, 200, 83, 0.3);
}


/* LOGIN BUTTON */

.login-button {

    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 8px;

    background: #078b39;

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}


.login-button:hover {

    background: #00b84d;

    transform: translateY(-2px);
}


/* ERROR */

.error-message {

    background: rgba(200, 30, 30, 0.2);

    border: 1px solid #d83030;

    color: #ff7777;

    padding: 12px;

    border-radius: 6px;

    margin-bottom: 20px;
}


/* SECURITY NOTICE */

.security-notice {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #222;

    color: #888;

    font-size: 13px;
}


/* LOGOUT BUTTON */

.logout-button {

    display: inline-block;

    float: right;

    padding: 10px 20px;

    background: #111;

    color: white;

    text-decoration: none;

    border: 1px solid #078b39;

    border-radius: 6px;
}


.logout-button:hover {

    background: #078b39;
}