/**
 * Login Interface Stylesheet
 * 
 * 
 * Design System:
 * - Dark theme with high contrast ratios
 * - Blue accent color (#4b6cb7) for interactive elements
 * - Open Sans font family for readability
 * - Mobile-first responsive approach
 * 
 * @author GoneClear Development Team
 * @version 1.0
 * @since 2025
 */

/* ============================================================================
   FONT IMPORTS
   ============================================================================ */

/* Import Open Sans font family from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================================
   RESET AND BASE STYLES
   ============================================================================ */

/* 
 * Universal reset for consistent cross-browser styling
 * Removes default margins, paddings, and sets box-sizing to border-box
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

/* 
 * Body styling for dark theme
 * Creates full-height centered layout for login interface
 */
body {
    background-color: #121212;  /* Dark background for modern appearance */
    color: #fff;                /* White text for high contrast */
    min-height: 100vh;          /* Full viewport height */
    display: flex;              /* Flexbox for centering */
    justify-content: center;    /* Horizontal centering */
    align-items: center;        /* Vertical centering */
}

/* ============================================================================
   CONTAINER STYLES
   ============================================================================ */

/* 
 * Main container for login interface
 * Provides responsive width and centers content
 */
.container {
    width: 100%;
    max-width: 480px;           /* Maximum width for readability */
    padding: 20px;              /* Outer spacing */
    display: flex;
    flex-direction: column;     /* Stack logo and form vertically */
    align-items: center;        /* Center align all content */
}

/* ============================================================================
   LOGO STYLES
   ============================================================================ */

/* 
 * Logo container styling
 * Provides spacing and centers the company logo
 */
.logo-container {
    margin-bottom: 30px;        /* Space between logo and form */
    text-align: center;
}

/* 
 * Responsive logo image styling
 * Ensures logo scales properly on all devices
 */
.logo-container img {
    max-height: 80px;           /* Prevent logo from being too large */
    width: auto;                /* Maintain aspect ratio */
    max-width: 100%;            /* Responsive scaling */
}

/* ============================================================================
   FORM CONTAINER STYLES
   ============================================================================ */

/* 
 * Form container styling for login form
 * Creates elevated appearance with rounded corners and shadow
 */
.login-form {
    width: 100%;
    background-color: #222222;  /* Slightly lighter than body for contrast */
    border-radius: 8px;         /* Rounded corners for modern appearance */
    padding: 30px;              /* Internal spacing */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
}

/* ============================================================================
   TYPOGRAPHY STYLES
   ============================================================================ */

/* 
 * Main heading styling
 * Large, centered heading with appropriate weight
 */
h1 {
    font-size: 28px;
    margin-bottom: 30px;        /* Space before form elements */
    text-align: center;
    font-weight: 500;           /* Medium weight for readability */
}

/* ============================================================================
   FORM ELEMENT STYLES
   ============================================================================ */

/* 
 * Input field container styling
 * Provides consistent spacing between form fields
 */
.input-field {
    margin-bottom: 20px;        /* Space between input fields */
}

/* 
 * Label styling for form inputs
 * Positioned above inputs with subtle color
 */
label {
    display: block;             /* Full width above input */
    margin-bottom: 8px;         /* Space between label and input */
    font-size: 14px;
    color: #ccc;                /* Light gray for subtle appearance */
}

/* 
 * Input field styling for various input types
 * Consistent appearance across all form inputs
 */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;                /* Full width of container */
    padding: 12px 15px;         /* Internal spacing */
    border: none;               /* Remove default border */
    border-radius: 4px;         /* Slightly rounded corners */
    background-color: #333;     /* Dark input background */
    color: #fff;                /* White text */
    font-size: 16px;            /* Readable font size (prevents zoom on iOS) */
    transition: all 0.2s ease;  /* Smooth transitions */
}

/* 
 * Focus state styling for inputs
 * Provides visual feedback when user interacts with fields
 */
input:focus {
    outline: none;              /* Remove default browser outline */
    box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.5); /* Blue focus ring */
    background-color: #3a3a3a;  /* Slightly lighter on focus */
}

/* ============================================================================
   BUTTON STYLES
   ============================================================================ */

/* 
 * Primary button styling (main action buttons)
 * Blue gradient background with hover effects
 */
.btn-primary {
    width: 100%;                /* Full width button */
    padding: 14px;              /* Adequate touch target size */
    background-color: #4b6cb7;  /* Primary brand color */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;           /* Semi-bold text */
    cursor: pointer;
    transition: all 0.3s ease;  /* Smooth transitions */
}

/* Primary button hover state */
.btn-primary:hover {
    background-color: #3b5998;  /* Darker shade on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.3);
}

/* Primary button active state */
.btn-primary:active {
    transform: translateY(0);
}

/* 
 * Secondary button styling (alternative actions)
 * Subtle gray background with hover effects
 */
.btn-secondary {
    display: inline-block;
    width: 100%;
    padding: 12px;
    background-color: #333;     /* Dark gray background */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;      /* Remove underline for links */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Secondary button hover state */
.btn-secondary:hover {
    background-color: #444;     /* Lighter gray on hover */
    transform: translateY(-1px);
}

/* Secondary button active state */
.btn-secondary:active {
    transform: translateY(0);
}

/* ============================================================================
   NAVIGATION LINKS
   ============================================================================ */

/* 
 * Forgot password link container
 * Right-aligned with appropriate spacing
 */
.forgot-link {
    text-align: right;
    margin-bottom: 25px;        /* Space before submit button */
}

/* 
 * Forgot password link styling
 * Matches primary color scheme
 */
.forgot-link a {
    color: #4b6cb7;             /* Primary brand color */
    text-decoration: none;
    font-size: 14px;
}

/* Forgot password link hover state */
.forgot-link a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
}

/* ============================================================================
   SEPARATOR STYLES
   ============================================================================ */

/* 
 * Visual separator with "OR" text
 * Creates horizontal line with centered text overlay
 */
.separator {
    position: relative;
    text-align: center;
    margin: 30px 0;             /* Vertical spacing around separator */
}

/* 
 * Horizontal line behind separator text
 * Created using CSS pseudo-element
 */
.separator::before {
    content: "";
    position: absolute;
    top: 50%;                   /* Vertically center the line */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #444;     /* Subtle gray line */
}

/* 
 * Separator text styling
 * Appears above the horizontal line
 */
.separator span {
    position: relative;         /* Above the pseudo-element line */
    background-color: #222;     /* Match form background to hide line */
    padding: 0 15px;            /* Horizontal spacing around text */
    color: #999;                /* Subtle gray text */
    font-size: 14px;
}

/* ============================================================================
   ACCOUNT LINKS SECTION
   ============================================================================ */

/* 
 * Container for account creation links
 * Centers content and provides spacing
 */
.account-links {
    margin-top: 25px;           /* Space above account links */
    text-align: center;
}

/* 
 * Descriptive text above account links
 * Subtle styling to introduce the action
 */
.account-links p {
    margin-bottom: 15px;        /* Space before button */
    color: #ccc;                /* Light gray text */
    font-size: 14px;
}

/* 
 * General link styling for consistent branding
 * Used for various text links throughout the form
 */
.link-text {
    color: #4b6cb7;             /* Primary brand color */
    text-decoration: none;
    font-weight: 500;
}

/* Link hover state */
.link-text:hover {
    text-decoration: underline;
}

/* ============================================================================
   MESSAGE STYLES
   ============================================================================ */

/* 
 * Success message styling (verification confirmations)
 * Green color scheme for positive feedback
 */
.success-message {
    padding: 12px;              /* Internal spacing */
    border-radius: 4px;         /* Rounded corners */
    margin-bottom: 20px;        /* Space before form elements */
    font-size: 14px;
    background-color: rgba(52, 211, 153, 0.2); /* Transparent green background */
    color: #34d399;                             /* Solid green text */
    border-left: 4px solid #34d399;
}

/* 
 * Error message styling (login failures, validation errors)
 * Red color scheme for error indication
 */
.error-message {
    padding: 12px;              /* Internal spacing */
    border-radius: 4px;         /* Rounded corners */
    margin-bottom: 20px;        /* Space before form elements */
    font-size: 14px;
    background-color: rgba(239, 68, 68, 0.2);  /* Transparent red background */
    color: #ef4444;                             /* Solid red text */
    border-left: 4px solid #ef4444;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* 
 * Mobile and tablet responsive styles
 * Adjusts layout and spacing for smaller screens
 */
@media (max-width: 576px) {
    
    /* Reduce container padding on mobile */
    .container {
        padding: 15px;
    }
    
    /* Reduce form padding on mobile */
    .login-form,
    .register-form {
        padding: 20px;          /* Less padding for mobile screens */
    }
    
    /* Convert two-column layouts to single column on mobile */
    .two-columns {
        grid-template-columns: 1fr; /* Single column layout */
    }
}

/* ============================================================================
   SUCCESS MODAL STYLES (FUTURE USE)
   ============================================================================ */

/* 
 * Modal overlay for success messages
 * Currently unused but prepared for future enhancements
 */
.success-modal {
    display: none;              /* Hidden by default */
    position: fixed;            /* Fixed positioning for overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
    z-index: 1000;              /* High z-index to appear above other content */
    justify-content: center;
    align-items: center;
}

/* Modal content box */
.modal-content {
    background-color: #222;     /* Match form background */
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

/* Modal icon styling */
.modal-icon {
    color: #4bb543;             /* Success green color */
    font-size: 48px;
    margin-bottom: 20px;
}

/* Modal heading */
.modal-content h2 {
    margin-bottom: 15px;
}

/* Modal description text */
.modal-content p {
    margin-bottom: 25px;
    color: #ccc;
}

/* Modal button container */
.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Modal button styling */
.modal-login-btn,
.modal-close-btn {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

/* Primary modal button */
.modal-login-btn {
    background-color: #4b6cb7;  /* Primary color */
    color: white;
    border: none;
}

/* Secondary modal button */
.modal-close-btn {
    background-color: #333;     /* Dark gray */
    color: white;
    border: none;
}