/* =====================================================
   EnviAgri – Login Page CSS
   ===================================================== */

:root {
    --g900: #1b5e20; --g800: #2e7d32; --g700: #388e3c;
    --g500: #4caf50; --g200: #a5d6a7; --g100: #e8f5e9;
    --gray-50: #f5f7f8; --gray-200: #cfd8dc; --gray-300: #b0bec5;
    --gray-400: #90a4ae; --gray-600: #546e7a; --gray-800: #2c3e50;
    --red: #c62828;
    --font: 'Inter', 'Segoe UI', Arial, sans-serif;
    --transition: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; font-family: var(--font); }

/* ── Background ── */
.login-body {
    background: linear-gradient(160deg, #0a2e0f 0%, #1b5e20 35%, #2e7d32 65%, #0d3b14 100%);
    min-height: 100vh;
    display: flex; align-items: stretch;
    position: relative; overflow: hidden;
}

/* Hero aerial field background image */
.login-hero-bg {
    position: fixed; inset: 0;
    background-size: cover;
    background-position: center right;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

.login-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-orb {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(105,240,174,0.08) 0%, transparent 70%);
    animation: orbFloat 8s ease-in-out infinite;
}
.bg-orb-1 { width: 600px; height: 600px; top: -200px; left: -200px; animation-delay: 0s; }
.bg-orb-2 { width: 400px; height: 400px; bottom: -100px; right: -100px; animation-delay: 3s; }
.bg-orb-3 { width: 300px; height: 300px; top: 40%; left: 35%; animation-delay: 5s; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -20px); }
}

/* ── Wrapper ── */
.login-wrapper {
    display: flex; width: 100%; position: relative; z-index: 1;
}

/* ── BRAND PANEL (left) ── */
.login-brand {
    flex: 1; display: flex; flex-direction: column;
    padding: 48px 56px;
    color: white;
    position: relative;
    /* Overlay dark green on top of hero image portion */
    background: linear-gradient(to right, rgba(10,46,15,0.92) 70%, rgba(10,46,15,0.6) 100%);
}

.brand-logo {
    margin-bottom: 48px;
}
.brand-logo-img {
    height: 52px;
    width: auto;
    /* Invert to white since logo is green on white bg */
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.brand-content { flex: 1; }
.brand-headline {
    font-size: 36px; font-weight: 700; line-height: 1.25;
    letter-spacing: -1px; margin-bottom: 16px;
}
.brand-desc {
    font-size: 15px; color: rgba(255,255,255,0.65);
    line-height: 1.6; max-width: 380px; margin-bottom: 40px;
}

.brand-features { display: flex; flex-direction: column; gap: 14px; }
.feature-item {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: rgba(255,255,255,0.75);
}
.feature-icon { font-size: 20px; width: 28px; text-align: center; }

.brand-footer {
    font-size: 12px; color: rgba(255,255,255,0.3);
    margin-top: 48px;
}

/* ── LOGIN PANEL (right) ── */
.login-panel {
    width: 460px; min-width: 400px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 40px;
}

.login-card {
    width: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 36px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.login-card.visible { opacity: 1; transform: translateY(0); }

.login-card-header { margin-bottom: 28px; }
.login-title {
    font-size: 24px; font-weight: 700; color: var(--gray-800);
    letter-spacing: -0.5px; margin-bottom: 4px;
}
.login-subtitle { font-size: 14px; color: var(--gray-400); }

/* Messages */
.login-messages { margin-bottom: 16px; }
.login-alert {
    padding: 10px 14px; border-radius: 8px;
    font-size: 13px; margin-bottom: 8px;
}
.login-alert-error, .login-alert-danger { background: #ffebee; color: var(--red); }
.login-alert-success { background: var(--g100); color: var(--g900); }

/* Form */
.login-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
    font-size: 12px; font-weight: 600; color: var(--gray-600);
    letter-spacing: 0.3px;
}
.input-wrapper {
    position: relative; display: flex; align-items: center;
}
.input-icon {
    position: absolute; left: 12px; color: var(--gray-300);
    pointer-events: none;
}
.input-wrapper .form-input,
.login-form input {
    width: 100%; padding: 11px 12px 11px 40px;
    border: 1.5px solid var(--gray-200); border-radius: 9px;
    font-size: 14px; font-family: var(--font); color: var(--gray-800);
    outline: none; transition: border-color var(--transition), box-shadow var(--transition);
    background: #fafafa;
}
.login-form input:focus {
    border-color: var(--g700);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
    background: #fff;
}
.form-error { font-size: 11px; color: var(--red); }

.toggle-password {
    position: absolute; right: 12px;
    background: none; border: none; cursor: pointer;
    color: var(--gray-300); display: flex; align-items: center;
    padding: 4px; transition: color var(--transition);
}
.toggle-password:hover { color: var(--gray-600); }

/* Submit button */
.btn-login {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, var(--g800), var(--g700));
    color: white; border: none; border-radius: 9px;
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; margin-top: 4px;
    transition: all var(--transition);
    box-shadow: 0 4px 14px rgba(46,125,50,0.35);
}
.btn-login:hover {
    background: linear-gradient(135deg, var(--g900), var(--g800));
    box-shadow: 0 6px 20px rgba(46,125,50,0.45);
    transform: translateY(-1px);
}
.btn-login.loading { opacity: 0.7; cursor: not-allowed; }

/* Back link */
.login-back { margin-top: 20px; text-align: center; }
.back-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--gray-400);
    text-decoration: none; transition: color var(--transition);
}
.back-link:hover { color: var(--g800); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .login-brand { display: none; }
    .login-panel { width: 100%; min-width: unset; border-left: none; }
}