/* ========================================
   RESET AND BASE STYLES
   ======================================== */
/* Universal reset to ensure consistent styling across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main body styling with abstract blue background */
body {
    font-family: 'Inter', sans-serif; /* Modern, clean font */
    height: 100vh; /* Full viewport height */
    background: #1E3A8A; /* Deep rich blue base color */
    position: relative; /* For positioning background pattern */
    overflow: hidden; /* Prevent scrollbars */
}

/* ========================================
   BACKGROUND PATTERN
   ======================================== */
/* Abstract diagonal lines pattern with subtle blue variations */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Create diagonal bands with varying blue shades */
    background-image: 
        linear-gradient(45deg, rgba(30, 58, 138, 0.8) 0%, rgba(37, 99, 235, 0.3) 20%, transparent 40%),
        linear-gradient(-45deg, rgba(30, 58, 138, 0.6) 0%, rgba(59, 130, 246, 0.2) 25%, transparent 50%),
        linear-gradient(45deg, transparent 30%, rgba(37, 99, 235, 0.4) 50%, rgba(30, 58, 138, 0.7) 70%, transparent 90%),
        linear-gradient(-45deg, transparent 20%, rgba(59, 130, 246, 0.3) 40%, rgba(30, 58, 138, 0.5) 60%, transparent 80%),
        linear-gradient(45deg, rgba(30, 58, 138, 0.4) 10%, transparent 30%, rgba(37, 99, 235, 0.2) 60%, transparent 80%);
    background-size: 200px 200px, 300px 300px, 250px 250px, 180px 180px, 320px 320px;
    background-position: 0 0, 50px 50px, 100px 100px, 150px 150px, 200px 200px;
    z-index: 1; /* Behind main content */
}

/* ========================================
   MAIN LAYOUT CONTAINER
   ======================================== */
/* Centered container for the entire login interface */
.login-container {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    height: 100vh; /* Full viewport height */
    position: relative;
    z-index: 2; /* Above background pattern */
}

/* ========================================
   BACK BUTTON
   ======================================== */
/* Back arrow button positioned in top left corner */
.back-button {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 3; /* Above all other elements */
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(-3px);
}

/* ========================================
   TOP RIGHT NAVIGATION TEXT
   ======================================== */
/* LOG IN text positioned in top right corner */
.top-right-text {
    position: absolute;
    top: 40px;
    right: 40px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px; /* Increased letter spacing for modern look */
    text-decoration: underline;
    text-underline-offset: 8px; /* Space between text and underline */
    z-index: 3; /* Above all other elements */
}

/* ========================================
   LOGIN FORM CONTAINER
   ======================================== */
/* Dark container that houses the login form */
.login-form-container {
    background: #0A1428; /* Very dark blue background */
    border-radius: 24px; /* Heavily rounded corners */
    padding: 48px 40px; /* Generous padding for breathing room */
    width: 100%;
    max-width: 420px; /* Maximum width for larger screens */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Deep shadow for elevation */
    position: relative;
}

/* Login form title styling */
.login-title {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 600; /* Semi-bold weight */
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: -0.5px; /* Slightly tighter letter spacing */
}

/* ========================================
   FORM LAYOUT
   ======================================== */
/* Main form container with vertical layout */
.login-form {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 20px; /* Consistent spacing between form elements */
}

/* ========================================
   INPUT FIELD GROUPS
   ======================================== */
/* Container for input fields with icons */
.input-group {
    position: relative; /* For positioning icons */
}

/* Base styling for all input fields */
.input-group input {
    width: 100%;
    padding: 16px 20px; /* Comfortable padding */
    background: #1A2B47; /* Dark blue background */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    border-radius: 12px; /* Rounded corners */
    color: #FFFFFF; /* White text */
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease; /* Smooth transitions */
    outline: none; /* Remove default outline */
}

/* Placeholder text styling */
.input-group input::placeholder {
    color: #A0AEC0; /* Light gray color */
    font-weight: 400;
}

/* Focus state for input fields */
.input-group input:focus {
    border-color: rgba(58, 141, 255, 0.5); /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(58, 141, 255, 0.1); /* Blue glow effect */
}

/* ========================================
   INPUT FIELD ICONS
   ======================================== */
/* Left side icons (like lock icon) */
.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%); /* Perfect vertical centering */
    color: #A0AEC0; /* Light gray color */
    font-size: 16px;
    pointer-events: none; /* Don't interfere with input clicks */
}

/* Extra padding for Admin ID field to accommodate person icon */
.input-group input[type="text"] {
    padding-left: 48px; /* Space for person icon */
}

/* Extra padding for password field to accommodate icons */
.input-group input[type="password"],
.input-group input.password-field {
    padding-left: 48px; /* Space for lock icon */
    padding-right: 48px; /* Space for eye icon */
}

/* Right side icon (password visibility toggle) */
.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%); /* Perfect vertical centering */
    color: #A0AEC0; /* Light gray color */
    font-size: 16px;
    cursor: pointer; /* Indicate clickable */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover state for password toggle icon */
.password-toggle:hover {
    color: #FFFFFF; /* White on hover */
}

/* ========================================
   FORM OPTIONS (REMEMBER ME & FORGOT PASSWORD)
   ======================================== */
/* Container for Remember Me checkbox and Forgot Password link */
.form-options {
    display: flex;
    justify-content: space-between; /* Space items apart */
    align-items: center; /* Vertical alignment */
    margin: 8px 0; /* Small vertical margin */
}

/* Remember Me checkbox styling */
.remember-me {
    display: flex;
    align-items: center;
    color: #A0AEC0; /* Light gray text */
    font-size: 14px;
    cursor: pointer; /* Indicate clickable */
    user-select: none; /* Prevent text selection */
}

/* Hide default checkbox */
.remember-me input[type="checkbox"] {
    display: none; /* We'll create a custom one */
}

/* Custom checkbox appearance */
.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #A0AEC0; /* Light gray border */
    border-radius: 4px; /* Slightly rounded corners */
    margin-right: 8px;
    position: relative;
    transition: all 0.3s ease; /* Smooth transitions */
}

/* Checked state styling */
.remember-me input[type="checkbox"]:checked + .checkmark {
    background: #3A8DFF; /* Blue background when checked */
    border-color: #3A8DFF; /* Blue border when checked */
}

/* Checkmark symbol when checked */
.remember-me input[type="checkbox"]:checked + .checkmark::after {
    content: '✓'; /* Checkmark symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfect centering */
    color: #FFFFFF; /* White checkmark */
    font-size: 12px;
    font-weight: bold;
}

/* Forgot Password link styling */
.forgot-password {
    color: #A0AEC0; /* Light gray color */
    font-size: 14px;
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover state for Forgot Password link */
.forgot-password:hover {
    color: #FFFFFF; /* White on hover */
}

/* ========================================
   LOGIN BUTTON
   ======================================== */
/* Main login button with gradient background */
.login-button {
    background: linear-gradient(135deg, #3A8DFF 0%, #0056B3 100%); /* Blue gradient */
    border: none;
    border-radius: 12px; /* Rounded corners */
    padding: 16px;
    color: #FFFFFF; /* White text */
    font-size: 16px;
    font-weight: 600; /* Semi-bold */
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transitions */
    margin-top: 12px;
    box-shadow: 0 4px 15px rgba(58, 141, 255, 0.3); /* Blue glow shadow */
    position: relative;
    overflow: hidden; /* For shine effect */
}

/* Shine effect overlay for button */
.login-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Shine gradient */
    transition: left 0.5s; /* Smooth sliding animation */
}

/* Animate shine effect on hover */
.login-button:hover::before {
    left: 100%; /* Slide shine across button */
}

/* Hover state for login button */
.login-button:hover {
    transform: translateY(-2px); /* Slight upward movement */
    box-shadow: 0 6px 20px rgba(58, 141, 255, 0.4); /* Enhanced glow */
}

/* Active state for login button (when clicked) */
.login-button:active {
    transform: translateY(0); /* Return to original position */
}

/* ========================================
   RESPONSIVE DESIGN - TABLET
   ======================================== */
/* Styles for tablets and smaller screens */
@media (max-width: 768px) {
    /* Adjust form container for smaller screens */
    .login-form-container {
        margin: 20px; /* Add margin for breathing room */
        padding: 32px 24px; /* Reduce padding */
        border-radius: 20px; /* Slightly less rounded */
    }
    
    /* Smaller title for mobile */
    .login-title {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    /* Adjust top right text position */
    .top-right-text {
        top: 20px;
        right: 20px;
        font-size: 16px;
    }
    
    /* Stack form options vertically on mobile */
    .form-options {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    /* Align forgot password to the right */
    .forgot-password {
        align-self: flex-end;
    }
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE
   ======================================== */
/* Styles for mobile phones */
@media (max-width: 480px) {
    /* Further reduce form container size */
    .login-form-container {
        margin: 16px;
        padding: 24px 20px;
    }
    
    /* Even smaller title for mobile */
    .login-title {
        font-size: 24px;
    }
    
    /* Adjust input field sizing */
    .input-group input {
        padding: 14px 16px;
        font-size: 14px;
    }
    
    /* Adjust password field padding for smaller icons */
    .input-group input[type="password"] {
        padding-left: 44px;
        padding-right: 44px;
    }
    
    /* Smaller icons for mobile */
    .input-icon,
    .password-toggle {
        font-size: 14px;
    }
    
    /* Smaller button for mobile */
    .login-button {
        padding: 14px;
        font-size: 14px;
    }
}

/* ========================================
   ALERT MESSAGES
   ======================================== */
/* Base styling for notification alerts */
.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    z-index: 1000; /* Above all other content */
    opacity: 0; /* Initially hidden */
    transform: translateY(-20px); /* Start above position */
    transition: all 0.3s ease; /* Smooth animations */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
}

/* Error alert styling with red gradient */
.alert-error {
    background: linear-gradient(135deg, #FF6B6B 0%, #E53E3E 100%);
}

/* Success alert styling with green gradient */
.alert-success {
    background: linear-gradient(135deg, #48BB78 0%, #38A169 100%);
}

/* ========================================
   DISABLED STATES
   ======================================== */
/* Styling for disabled login button */
.login-button:disabled {
    opacity: 0.7; /* Reduced opacity */
    cursor: not-allowed; /* Show disabled cursor */
    transform: none !important; /* Prevent hover animations */
}

/* Prevent hover effects when button is disabled */
.login-button:disabled:hover {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(58, 141, 255, 0.3) !important;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
/* Focus state for login button (keyboard navigation) */
.login-button:focus {
    outline: 2px solid #3A8DFF;
    outline-offset: 2px;
}

/* Remove default outline (we use custom focus styles) */
.input-group input:focus {
    outline: none;
}

/* ========================================
   GLOBAL TRANSITIONS
   ======================================== */
/* Apply smooth transitions to all interactive elements */
* {
    transition: all 0.3s ease;
}

/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */
/* Custom scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px; /* Thin scrollbar */
}

::-webkit-scrollbar-track {
    background: #1A2B47; /* Dark track */
}

::-webkit-scrollbar-thumb {
    background: #3A8DFF; /* Blue thumb */
    border-radius: 4px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
    background: #0056B3; /* Darker blue on hover */
}

/* ========================================
   ADDITIONAL ACTION BUTTONS
   ======================================== */
/* Container for the two additional buttons below the form */
.additional-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between the two buttons */
    margin-top: 24px; /* Space from the login button */
}

/* Styling for the additional action buttons */
.action-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3A8DFF 0%, #0056B3 100%); /* Blue gradient matching login button */
    border: none;
    border-radius: 12px; /* Rounded corners */
    color: #FFFFFF; /* White icons */
    font-size: 20px; /* Icon size */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transitions */
    box-shadow: 0 4px 15px rgba(58, 141, 255, 0.3); /* Blue glow shadow */
    position: relative;
    overflow: hidden; /* For shine effect */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shine effect overlay for action buttons */
.action-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* Shine gradient */
    transition: left 0.5s; /* Smooth sliding animation */
}

/* Animate shine effect on hover */
.action-button:hover::before {
    left: 100%; /* Slide shine across button */
}

/* Hover state for action buttons */
.action-button:hover {
    transform: translateY(-2px); /* Slight upward movement */
    box-shadow: 0 6px 20px rgba(58, 141, 255, 0.4); /* Enhanced glow */
}

/* Active state for action buttons (when clicked) */
.action-button:active {
    transform: translateY(0); /* Return to original position */
}

/* Focus state for action buttons (keyboard navigation) */
.action-button:focus {
    outline: 2px solid #3A8DFF;
    outline-offset: 2px;
}

/* Responsive design for action buttons on mobile */
@media (max-width: 480px) {
    .additional-buttons {
        gap: 16px; /* Reduce gap on mobile */
        margin-top: 20px;
    }
    
    .action-button {
        width: 50px;
        height: 50px;
        font-size: 18px; /* Slightly smaller icons on mobile */
    }
}

/* ========================================
   HIDE RFID ELEMENTS (EXPLICIT HIDING)
   ======================================== */
/* Explicitly hide any RFID-related elements */
.rfid-scan-container,
.rfid-scan-button,
#rfidScanningModal,
.rfid-scanning-icon,
.rfid-icon-container,
.rfid-button-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}