:root {
            --primary-green: #1a4d32;
            --primary-red: #dc3545;
            --dark-overlay: rgba(26, 77, 50, 0.85); /* Green tint overlay */
        }

        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* Background image route provided */
            background: url('assets/images/adminBlock01.jpg') no-repeat center center fixed;
            background-size: cover;
        }

        /* Full screen overlay to anchor the corporate green theme */
        .login-overlay {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), var(--dark-overlay));
            
            /* FIX: Force calculation based on the absolute device viewport screen height */
            min-height: 100vh; 
            width: 100%;
            
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-card {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            width: 100%;
            max-width: 450px;
            /*border-top: 10px solid var(--primary-red);*/
        }

        .login-header {
            background-color: #ffffff;
            padding: 35px 30px 0px 30px;
            text-align: center;
        }

        .login-logo {
            max-height: 85px;
            width: auto;
            margin-bottom: 15px;
        }

        .portal-title {
            color: var(--primary-green);
            font-weight: 700;
            letter-spacing: 0.5px;
            font-size: 22px;
            margin-bottom: 5px;
        }

        .portal-subtitle {
            color: #6c757d;
            font-size: 13px;
            font-weight: 500;
        }

        .login-body {
            padding: 10px 35px 35px 35px;
        }

        .form-label {
            font-size: 13px;
            font-weight: 600;
            color: #495057;
            margin-bottom: 6px;
        }

        .input-group-text {
            background-color: #f8f9fa;
            border-color: #ced4da;
            color: var(--primary-green);
        }

        .form-control:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 0.25rem rgba(26, 77, 50, 0.15);
        }

        /* Beautiful Sign In Button */
        .btn-signin {
            background-color: var(--primary-green);
            border: none;
            color: #ffffff;
            font-weight: 600;
            padding: 12px;
            font-size: 15px;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            border-radius: 6px;
        }

        .btn-signin:hover {
            background-color: #113321;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(26, 77, 50, 0.3);
        }

        /* Status Display Bar styling */
        .status-bar {
            display: none; /* Controlled via JS when submitting */
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            color: #856404;
            border-radius: 6px;
            padding: 12px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 20px;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .status-bar i {
            color: var(--primary-red);
        }

        .portal-footer {
            text-align: center;
            font-size: 12px;
            color: #ced4da;
            margin-top: 20px;
        }

/* =========================================================
   MAUTH CONNECT SIGN-IN FOOTER
========================================================= */

.portal-footer {
    width: 100%;
    margin-top: 25px;
    padding: 14px 15px 8px;
    text-align: center;
    box-sizing: border-box;
    color: #66756d;
    font-family: inherit;
}

/* Elegant divider */
.portal-footer-line {
    width: 55px;
    height: 3px;
    margin: 0 auto 11px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #1a4d32,
        #198754,
        #dc3545
    );
}

/* Hospital name */
.portal-footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 1.3;
}

.portal-footer-brand strong {
    color: #1a4d32;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.25px;
}

.portal-footer-brand span {
    color: #dc3545;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

/* Portal identification */
.portal-footer-meta {
    margin-top: 4px;
    color: #7a8780;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Copyright */
.portal-footer-copy {
    margin-top: 8px;
    color: #9aa49f;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.5;
}

.portal-footer-copy span {
    color: #7d8983;
    font-weight: 600;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .portal-footer {
        margin-top: 20px;
        padding: 12px 10px 7px;
    }

    .portal-footer-line {
        width: 45px;
        height: 2px;
        margin-bottom: 9px;
    }

    .portal-footer-brand strong {
        font-size: 10px;
    }

    .portal-footer-brand span {
        font-size: 9px;
    }

    .portal-footer-meta {
        font-size: 7px;
        letter-spacing: 0.6px;
    }

    .portal-footer-copy {
        margin-top: 7px;
        font-size: 7px;
    }
}

/* =========================================================
   MAUTH LOGIN LOGO - PREMIUM ROTATION
========================================================= */

.login-logo {
    display: inline-block;
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: visible;
    perspective: 1000px;

    animation: mauthLoginLogoPremium 7s ease-in-out infinite;
}

@keyframes mauthLoginLogoPremium {

    0%,
    20% {
        transform: rotateY(0deg);
    }

    35% {
        transform: rotateY(180deg);
    }

    50%,
    70% {
        transform: rotateY(360deg);
    }

    85% {
        transform: rotateY(540deg);
    }

    100% {
        transform: rotateY(720deg);
    }
}