/* 🌿 auth/login.php Module Styles */
/* Extracted 2026-10-02 */

/* 🌿 Login — Digital Greenhouse */
        body { 
            background: linear-gradient(160deg, #e8f5e9 0%, #c8e6c9 30%, #a5d6a7 60%, #c5e1c5 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--gh-font);
            position: relative;
            overflow: hidden;
        }

        /* Subtle floating orbs for atmosphere */
        body::before, body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.3;
            z-index: 0;
        }
        body::before {
            width: 400px; height: 400px;
            background: var(--gh-primary-fixed);
            top: -10%; right: -5%;
        }
        body::after {
            width: 300px; height: 300px;
            background: var(--gh-tertiary-container);
            bottom: -5%; left: -5%;
        }

        /* Login card — surface-container-lowest */
        .login-card {
            width: 100%;
            max-width: 420px;
            border: none;
            border-radius: var(--gh-radius-lg);
            box-shadow: var(--gh-shadow-lg);
            overflow: hidden;
            background-color: var(--gh-surface-lowest);
            position: relative;
            z-index: 1;
            animation: ghSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .login-header {
            background: var(--gh-surface-lowest);
            padding: 32px 24px 12px;
            text-align: center;
        }
        
        .logo-img {
            max-height: 140px;
            max-width: 260px;
            margin-bottom: 12px;
        }

        .erp-title {
            font-weight: 800;
            color: var(--gh-on-surface);
            letter-spacing: 0.5px;
            margin-bottom: 4px;
            font-size: 1.25rem;
        }

        /* Inputs — bottom-border style */
        .login-card .form-control {
            height: 48px;
            background-color: var(--gh-surface-highest);
            border: none;
            border-bottom: 2px solid var(--gh-outline-variant);
            border-radius: var(--gh-radius) var(--gh-radius) 0 0;
            font-size: 0.92rem;
            padding-left: 14px;
            transition: border-color var(--gh-transition), box-shadow var(--gh-transition);
        }
        
        .login-card .form-control:focus {
            border-bottom-color: var(--gh-primary);
            box-shadow: 0 2px 0 0 var(--gh-primary);
            background-color: var(--gh-surface-highest);
        }

        .login-card .input-group-text {
            background-color: var(--gh-surface-highest);
            border: none;
            border-bottom: 2px solid var(--gh-outline-variant);
            border-radius: var(--gh-radius) 0 0 0;
            color: var(--gh-text-muted);
        }

        #togglePassword {
            border-radius: 0 var(--gh-radius) 0 0;
            cursor: pointer;
        }

        /* Submit button — gradient primary */
        .btn-login {
            height: 48px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: var(--gh-radius-md);
            background: linear-gradient(135deg, var(--gh-primary) 0%, var(--gh-primary-container) 100%);
            border: none;
            color: #fff;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(0, 107, 50, 0.25);
        }
        
        .btn-login:hover {
            background: linear-gradient(135deg, var(--gh-primary-container) 0%, var(--gh-primary) 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 107, 50, 0.3);
            color: #fff;
        }

        .invalid-feedback {
            font-size: 0.82rem;
            margin-top: 5px;
            margin-left: 5px;
        }

        .card-footer {
            background: var(--gh-surface-lowest) !important;
            border: none !important;
        }