/* Importing Poppins font from HTML link for usage */

:root {
    --primary-purple: #2e7d32; /* Main button/link color */
    --light-purple: #43a047;
    --dark-blue: #1b5e20; /* Text/header color */
    --text-muted: #888;
    --border-color: #ddd;
    --form-bg: #f5f5f5; /* For form elements */
    --graphic-bg: #291e66; /* Base color for the right panel */

     /* --primary-green: #2e7d32;
  --light-green: #43a047;
  --dark-green: #1b5e20;
  --text-dark: #1c1c1c;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --form-bg: #f9f9f9; */
}

html, body {
    height: 100%; /* Use 100% for better compatibility with vh */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Hide horizontal scrollbar just in case */
    font-family: 'Poppins', sans-serif;
}

/* --- Container and Layout --- */
.login-container {
    height: 100vh;
    padding: 0;
}

.h-100 {
    height: 100%;
}

/* --- Left Panel (Form) --- */
.left-panel {
    background-color: #fff;
}

.login-form-wrapper {
    max-width: 400px; /* Constrain form width */
    width: 100%;
    padding: 20px;
}

.logo-mock {
    /* Mock styles for the logo */
    width: 40px;
    height: 40px;
    background-color: var(--primary-purple);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 2L2 22h20L12 2zm0 4.31L17.7 18H6.3L12 6.31z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 2L2 22h20L12 2zm0 4.31L17.7 18H6.3L12 6.31z"/></svg>') no-repeat center;
    /* In a real project, use a proper image or SVG */
}


.display-5 {
    color: var(--dark-blue);
    font-size: 2.2rem;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* --- Form Styling --- */
.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-blue);
}

.required-label::after {
    content: '*';
    color: red;
    display: none; /* Hide the actual '*' based on the design image */
}

.form-control {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--form-bg);
    color: var(--dark-blue);
}

.form-control::placeholder {
    color: #a0a0a0;
    font-weight: 400;
}

/* Password Input Group Styling */
.password-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.toggle-password {
    background-color: var(--form-bg);
    border: 1px solid var(--border-color);
    border-left: none;
    cursor: pointer;
    color: var(--text-muted);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Remember Me Checkbox */
.form-check-input:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

.remember-me-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.forgot-password-link {
    color: var(--primary-purple);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 600;
}

/* --- Buttons --- */
.login-btn {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.login-btn:hover {
    background-color: var(--light-purple);
    border-color: var(--light-purple);
}

/* Divider Text */
.login-divider-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Google Button */
.google-btn {
    background-color: #fff;
    color: var(--dark-blue);
    border-color: #e0e0e0;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    position: relative;
    padding-left: 3rem; /* Make room for the icon */
}

.google-icon-mock {
    /* Mock for Google Icon */
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    /* In a real project, this would be an actual icon/SVG */
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23FFC107" d="M43.61 20.08v8.95H42V20.08h1.61z"/><path fill="%234285F4" d="M24 8c-8.28 0-15 6.72-15 15s6.72 15 15 15 15-6.72 15-15-6.72-15-15-15zm10.95 24.36c-2.43 3.32-6.38 5.64-10.95 5.64-8.28 0-15-6.72-15-15 0-4.57 2.32-8.52 5.64-10.95h.01L24 33.36l10.95-9z"/></svg>');
}

/* Register Link */
.register-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.register-link {
    color: var(--primary-purple);
    font-weight: 600;
    text-decoration: none;
}

/* --- Right Panel (Graphic) --- */
.right-panel {
    /* Use a visually similar background image for the abstract design */
    background-image: url('/assets/images/bg.png'); /* Replace with a real graphic image */
    background-color: var(--graphic-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    /* Hide the right panel on smaller screens (already handled by d-lg-block) */
    .login-container {
        padding: 20px;
    }

    .login-form-wrapper {
        max-width: none;
    }
}