/* Variables */
:root {
    --primary: #0D7D62;
    --primary-hover: #0A6550;
    --secondary: #FAAF3B;
    --accent: #8B5CF6;
    --text-dark: #2D3748;
    --text-light: #718096;
    --border-color: #E2E8F0;
    --bg-light: #F7FAFC;
}

/* Animated Background */
 .login-page {
            /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
            background-image: url('../asset/img/logo/login_back.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            /* min-height: 100vh; */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-box {
            width: 100%;
            max-width: 400px;
            margin: 2rem auto;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-radius: 0.5rem;
            overflow: hidden;

        }

        .card-header {
            /* background: white; */
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.5rem 1rem;
             background-color: var(--primary-hover) !important;
        }
        .h1 .text-primary {
            color: var(--secondary) !important;
        }
        .h1 .text-secondary {
            color: #FFF !important;
        }

        .card-header a {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
            text-decoration: none;
        }

        .card-body {
            padding: 1.5rem;
        }

        .login-box-msg {
            font-size: 1.1rem;
            color: var(--text-color);
            font-weight: 500;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .input-group {
            border-radius: 0.375rem;
            overflow: hidden;
            background: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            border-top: 1px solid rgba(0, 0, 0, 0.2);
        }
        .input-group:focus-within {
            border-color: var(--secondary);
        }

        .input-group-text {
            padding: 0.625rem 1rem;
            border: none;
            background: transparent;
            color: var(--primary-color);
        }

        .input-group-text i {
            font-size: 1.25rem;
            color: #0A6550;
        }

        .form-control {
            padding: 0.625rem 1rem;
            border: none;
            background: white;
            font-size: 1rem;
            color: var(--text-color);
        }

        .form-control:focus {
            box-shadow: none;
            border-color: transparent;
        }

        .password-toggle {
            padding: 0.625rem;
            border: none;
            background: none;
            cursor: pointer;
        }

        .btn-primary {
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            border-radius: 0.375rem;
            transition: all 0.2s ease;
            margin-top: 1rem;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(13, 125, 98, 0.1);
        }

        @media (max-width: 576px) {
            .login-box {
                margin: 1rem;
            }

            .card-header {
                padding: 1rem;
            }

            .card-body {
                padding: 1rem;
            }
        }