/* ========================================
   MAIN STYLESHEET FOR TASK BOT APPLICATION
   ========================================
   This file contains all the main styles used across the application
   It creates a modern dark theme with glassmorphism effects
*/

/* ========================================
   RESET AND BASE STYLES
   ========================================
   Remove default browser styling and set up basic page structure
*/

/* Reset all elements to have no margin/padding and use border-box sizing */
* {
    margin: 0;                    /* Remove default margins */
    padding: 0;                   /* Remove default padding */
    box-sizing: border-box;       /* Include padding/border in element width/height */
}

/* Main body styling - sets up the dark theme background */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* Modern font stack */
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);  /* Dark gradient background */
    color: #ffffff;               /* White text by default */
    min-height: 100vh;            /* Full viewport height minimum */
    overflow-x: hidden;           /* Prevent horizontal scrolling */
}

/* ========================================
   HEADER NAVIGATION STYLES
   ========================================
   Top navigation bar with logo, title, and user info
*/

/* Main header container - uses flexbox for layout */
.header {
    display: flex;                                      /* Use flexbox layout */
    align-items: center;                                /* Center items vertically */
    justify-content: space-between;                     /* Space items evenly */
    padding: 20px 40px;                                 /* Internal spacing */
    background: rgba(20, 20, 20, 0.9);                 /* Semi-transparent dark background */
    backdrop-filter: blur(10px);                       /* Glassmorphism blur effect */
    border-bottom: 2px solid #8a2be2;                  /* Purple bottom border */
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3);    /* Purple glow shadow */
}

/* Logo section (left side of header) */
.logo-container {
    flex: 1;                      /* Take 1/3 of available space */
    display: flex;                /* Use flexbox */
    align-items: center;          /* Center logo vertically */
}

/* Logo image styling */
.logo {
    height: 60px;                                       /* Fixed height */
    width: auto;                                        /* Maintain aspect ratio */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));  /* White glow effect */
    background: rgba(255, 255, 255, 0.1);              /* Semi-transparent background */
    padding: 8px;                                       /* Internal spacing */
    border-radius: 8px;                                 /* Rounded corners */
    backdrop-filter: blur(5px);                        /* Glassmorphism effect */
}

/* Page title (center of header) */
.page-title {
    flex: 2;                                            /* Take 2/3 of available space (larger) */
    text-align: center;                                 /* Center the text */
    font-size: 2.5rem;                                  /* Large font size */
    font-weight: 300;                                   /* Light font weight */
    color: #ffffff;                                     /* White text */
    text-shadow: 0 0 20px rgba(138, 43, 226, 0.8);     /* Purple glow effect */
}

/* Spacer element (right side of header when no user info) */
.spacer {
    flex: 1;                      /* Take 1/3 of available space to balance layout */
}

/* ========================================
   USER INFO AND LOGOUT STYLES
   ========================================
   User email display and logout button (right side of header)
*/

/* Container for user info elements */
.user-info {
    flex: 1;                      /* Take 1/3 of available space */
    display: flex;                /* Use flexbox layout */
    align-items: center;          /* Center items vertically */
    justify-content: flex-end;    /* Align items to the right */
    gap: 15px;                    /* Space between email and logout button */
}

/* User email display */
.user-email {
    color: rgba(255, 255, 255, 0.8);                   /* Slightly transparent white */
    font-size: 0.9rem;                                 /* Smaller font size */
    background: rgba(138, 43, 226, 0.1);               /* Light purple background */
    padding: 8px 12px;                                 /* Internal spacing */
    border-radius: 6px;                                /* Rounded corners */
    border: 1px solid rgba(138, 43, 226, 0.3);         /* Purple border */
}

/* Logout button */
.logout-button {
    background: rgba(255, 255, 255, 0.1);              /* Semi-transparent background */
    color: #ffffff;                                     /* White text */
    border: 1px solid rgba(138, 43, 226, 0.5);         /* Purple border */
    padding: 8px 16px;                                 /* Internal spacing */
    border-radius: 6px;                                /* Rounded corners */
    font-size: 0.9rem;                                 /* Smaller font size */
    cursor: pointer;                                    /* Show pointer cursor on hover */
    transition: all 0.3s ease;                         /* Smooth transitions */
    text-transform: uppercase;                          /* Uppercase text */
    letter-spacing: 0.5px;                             /* Slight letter spacing */
}

/* Logout button hover effect */
.logout-button:hover {
    background: rgba(138, 43, 226, 0.2);               /* More purple background on hover */
    border-color: rgba(138, 43, 226, 0.8);             /* Stronger purple border */
    transform: translateY(-1px);                       /* Slight upward movement */
}

/* ========================================
   MAIN CONTENT AREA
   ========================================
   Container for the main page content
*/

/* Main content container */
.main-content {
    display: flex;                /* Use flexbox layout */
    justify-content: center;      /* Center content horizontally */
    align-items: center;          /* Center content vertically */
    min-height: calc(100vh - 120px);  /* Full height minus header */
    padding: 40px 20px;           /* Internal spacing */
}

/* ========================================
   FORM CONTAINER STYLES
   ========================================
   Glassmorphism container for forms
*/

/* Form container with glassmorphism effect */
.form-container {
    background: rgba(20, 20, 20, 0.9);                 /* Semi-transparent dark background */
    backdrop-filter: blur(15px);                       /* Strong blur effect */
    border: 2px solid rgba(138, 43, 226, 0.3);         /* Purple border */
    border-radius: 20px;                               /* Rounded corners */
    padding: 40px;                                     /* Internal spacing */
    max-width: 500px;                                  /* Maximum width */
    width: 100%;                                       /* Full width up to max */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),        /* Dark shadow */
                0 0 30px rgba(138, 43, 226, 0.2);      /* Purple glow */
}

/* ========================================
   FORM INPUT STYLES
   ========================================
   Styling for form inputs and labels
*/

/* Input group container */
.input-group {
    margin-bottom: 30px;          /* Space below each input group */
}

/* Input field labels */
.input-label {
    display: block;               /* Block element (full width) */
    margin-bottom: 10px;          /* Space below label */
    color: rgba(255, 255, 255, 0.9);  /* Slightly transparent white */
    font-size: 1.1rem;            /* Slightly larger font */
    font-weight: 500;             /* Medium font weight */
}

/* Text input fields */
.input-field {
    width: 100%;                                       /* Full width */
    padding: 15px 20px;                                /* Internal spacing */
    background: rgba(255, 255, 255, 0.1);              /* Semi-transparent background */
    border: 2px solid rgba(138, 43, 226, 0.3);         /* Purple border */
    border-radius: 12px;                               /* Rounded corners */
    color: #ffffff;                                    /* White text */
    font-size: 1rem;                                   /* Normal font size */
    transition: all 0.3s ease;                         /* Smooth transitions */
    backdrop-filter: blur(5px);                        /* Glassmorphism effect */
}

/* Input field focus state */
.input-field:focus {
    outline: none;                                     /* Remove default outline */
    border-color: rgba(138, 43, 226, 0.8);            /* Stronger purple border */
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);     /* Purple glow */
    background: rgba(255, 255, 255, 0.15);            /* Slightly more opaque background */
}

/* Placeholder text styling */
.input-field::placeholder {
    color: rgba(255, 255, 255, 0.5);  /* Semi-transparent white */
}

/* ========================================
   BUTTON STYLES
   ========================================
   Submit buttons and other action buttons
*/

/* Main submit button */
.submit-button {
    width: 100%;                                       /* Full width */
    padding: 18px 30px;                                /* Internal spacing */
    background: linear-gradient(135deg, #8a2be2 0%, #9932cc 100%);  /* Purple gradient */
    color: white;                                      /* White text */
    border: none;                                      /* No border */
    border-radius: 12px;                               /* Rounded corners */
    font-size: 1.2rem;                                 /* Larger font */
    font-weight: 600;                                  /* Bold font */
    cursor: pointer;                                   /* Pointer cursor */
    transition: all 0.3s ease;                         /* Smooth transitions */
    text-transform: uppercase;                          /* Uppercase text */
    letter-spacing: 1px;                               /* Letter spacing */
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);   /* Purple shadow */
}

/* Submit button hover effect */
.submit-button:hover {
    background: linear-gradient(135deg, #9932cc 0%, #8a2be2 100%);  /* Reversed gradient */
    transform: translateY(-2px);                       /* Lift effect */
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.4);   /* Stronger shadow */
}

/* Submit button active/pressed state */
.submit-button:active {
    transform: translateY(0);                          /* Return to normal position */
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);   /* Normal shadow */
}

/* Disabled button state */
.submit-button:disabled {
    opacity: 0.6;                     /* Make it look faded */
    cursor: not-allowed;              /* Show "not allowed" cursor */
    transform: none;                  /* No hover effects */
}

/* ========================================
   RESPONSIVE DESIGN
   ========================================
   Adjustments for smaller screens
*/

/* Tablet and mobile adjustments */
@media (max-width: 768px) {
    /* Adjust header for smaller screens */
    .header {
        padding: 15px 20px;           /* Less padding */
        flex-direction: column;       /* Stack elements vertically on very small screens */
        gap: 10px;                    /* Space between stacked elements */
    }
    
    /* Smaller page title */
    .page-title {
        font-size: 2rem;             /* Smaller font size */
    }
    
    /* Adjust form container */
    .form-container {
        padding: 30px 20px;          /* Less padding */
        margin: 20px;                /* Add margin */
        border-radius: 15px;         /* Smaller border radius */
    }
    
    /* Adjust main content */
    .main-content {
        padding: 20px 10px;          /* Less padding */
    }
}

/* Mobile phone adjustments */
@media (max-width: 480px) {
    /* Even smaller page title */
    .page-title {
        font-size: 1.8rem;           /* Even smaller font */
    }
    
    /* Adjust form elements */
    .input-field {
        padding: 12px 15px;          /* Less padding */
        font-size: 0.9rem;           /* Smaller font */
    }
    
    .submit-button {
        padding: 15px 25px;          /* Less padding */
        font-size: 1.1rem;           /* Smaller font */
    }
}