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

/* Universal reset - removes default margins, padding and sets consistent box model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

.logo:hover {
    transition: all 0.3s ease;
    cursor: pointer;
    transform: translateY(-5px);
}

/* Body styles - sets the overall look and feel of the application */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, readable font stack */
    background: linear-gradient(180deg, #98c3ed 0%, #e2e8f0 20%, #cbd5e1 100%); /* Blue gradient background */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    padding: 20px; /* Outer spacing around the entire application */
    color: #1e293b; /* Dark gray text color for good readability */
    transition: background 0.3s ease; /* Smooth transition for any background changes */
}

/* Accessibility - custom focus outline for keyboard navigation */
:focus-visible {
    outline: 3px solid #a2e14a; /* Green outline matching brand colors */
    outline-offset: 2px; /* Space between element and outline */
}

/* ====================================================================
   MAIN CONTAINER
   ==================================================================== */

/* Main container - wraps all application content with glassmorphism effect */
.main-container {
    max-width: 1150px; /* Limit width for better readability on large screens */
    margin: 0 auto; /* Center the container horizontally */
    border-radius: 20px; /* Rounded corners for modern look */
    box-shadow: 0 20px 40px rgba(162, 225, 74, 0.5); /* Large green shadow for depth */
    padding: 40px; /* Internal spacing */
    background: rgba(255, 255, 255, 0.95); /* Semi-transparent white background */
    backdrop-filter: blur(10px); /* Glassmorphism blur effect */
    border: 1px solid rgba(162, 225, 74, 0.1); /* Subtle green border */
}

/* ====================================================================
   HEADER SECTION
   ==================================================================== */

/* Header wrapper */
.header {
    width: 100%; /* Full width of container */
    margin-bottom: 40px; /* Space below header */
}

/* Header content layout - logo, title, and login button */
.header-content {
    display: flex; /* Horizontal layout */
    justify-content: space-between; /* Logo left, title center, button right */
    align-items: center; /* Vertically center all items */
    max-width: 1000px; /* Limit width */
    margin: 0 auto; /* Center the header content */
    padding: 0 20px; /* Horizontal padding */
}

/* Title section in center of header */
.header-text {
    text-align: center; /* Center the text */
    flex: 1; /* Take up remaining space between logo and button */
}

/* Main title styling with gradient text effect */
.header h1 {
    font-size: 2.5rem; /* Large title size */
    margin-bottom: 10px; /* Space below title */
    background: #a2e14a; /* Green background for gradient text */
    -webkit-background-clip: text; /* Webkit prefix for text clipping */
    background-clip: text; /* Clip background to text shape */
    color: transparent; /* Make text transparent to show background */
    text-shadow: 0 0 20px rgba(162, 225, 74, 0.2); /* Subtle glow effect */
}

/* Subtitle styling */
.header p {
    color: #475569; /* Medium gray color */
    font-size: 1.1rem; /* Slightly larger than normal text */
}

/* ====================================================================
   SECTION LAYOUTS
   ==================================================================== */

/* Base section styling - used for all major content blocks */
.section {
    margin-bottom: 40px; /* Space between sections */
    background: rgba(248, 250, 252, 0.9); /* Light semi-transparent background */
    border-radius: 15px; /* Rounded corners */
    padding: 30px; /* Internal spacing */
    color: #1e293b; /* Dark text color */
    box-shadow: 0 10px 30px rgba(162, 225, 74, 0.2); /* Green shadow for depth */
    border: 1px solid rgba(162, 225, 74, 0.15); /* Subtle green border */
    animation: fadeInUp 0.4s ease; /* Fade-in animation when section appears */
    backdrop-filter: blur(5px); /* Subtle blur effect */
}

/* Section titles with consistent styling */
.section-title {
    display: flex; /* Horizontal layout for title and any icons */
    align-items: center; /* Vertically center content */
    gap: 10px; /* Space between title text and icons */
    color: #a2e14a; /* Brand green color */
    font-size: 1.5rem; /* Large title size */
    margin-bottom: 20px; /* Space below title */
    padding-bottom: 10px; /* Space above bottom border */
    border-bottom: 2px solid #a2e14a; /* Green underline */
}

/* ====================================================================
   INPUT SECTION STYLES
   ==================================================================== */

/* Large textarea for user travel requests */
.input-section textarea {
    width: 100%; /* Full width of container */
    height: 150px; /* Fixed height with vertical resize allowed */
    padding: 20px; /* Internal spacing */
    border: 2px solid rgba(162, 225, 74, 0.2); /* Light green border */
    border-radius: 12px; /* Rounded corners */
    font-size: 16px; /* Readable text size */
    font-family: inherit; /* Use same font as body */
    resize: vertical; /* Allow vertical resizing only */
    transition: all 0.3s ease; /* Smooth transitions for interactions */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    color: #1e293b; /* Dark text color */
}

/* Focus state for textarea - provides visual feedback when user is typing */
.input-section textarea:focus {
    outline: none; /* Remove default browser outline */
    border-color: #a2e14a; /* Change border to brand green */
    box-shadow: 0 0 0 3px rgba(162, 225, 74, 0.2); /* Green glow effect */
    background: rgba(255, 255, 255, 1); /* Make background fully opaque */
}

/* Placeholder text styling */
.input-section textarea::placeholder {
    color: #64748b; /* Gray color for placeholder text */
}

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

/* Primary button styling with gradient background */
.btn {
    background: linear-gradient(45deg, #a2e14a, #8ac441, #7cb938); /* Green gradient */
    color: #ffffff; /* White text */
    border: none; /* Remove default border */
    padding: 12px 30px; /* Vertical and horizontal padding */
    border-radius: 25px; /* Rounded pill shape */
    font-size: 16px; /* Readable text size */
    font-weight: 600; /* Semi-bold text */
    cursor: pointer; /* Show pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transitions for all properties */
    display: inline-flex; /* Inline flex for icon + text layout */
    align-items: center; /* Vertically center content */
    gap: 8px; /* Space between icon and text */
    text-decoration: none; /* Remove underline if used as link */
    box-shadow: 0 4px 15px rgba(162, 225, 74, 0.2); /* Green shadow */
    border: 1px solid rgba(162, 225, 74, 0.3); /* Subtle green border */
}

/* Button hover state - provides visual feedback */
.btn:hover {
    transform: translateY(-2px); /* Lift button slightly */
    box-shadow: 0 10px 25px rgba(162, 225, 74, 0.3); /* Larger shadow */
    background: linear-gradient(45deg, #8ac441, #7cb938, #6ea130); /* Darker gradient */
}

/* Button active state - when button is being clicked */
.btn:active {
    transform: translateY(0); /* Return to normal position */
}

/* Container for centering buttons */
.btn-center {
    display: flex; /* Horizontal layout */
    justify-content: center; /* Center buttons horizontally */
    margin-top: 20px; /* Space above buttons */
    margin-bottom: 20px; /* Space below buttons */
    gap: 15px; /* Space between multiple buttons */
}

/* Small trash/delete buttons for clearing drop zones */
.trash-button {
    background: none; /* No background */
    border: none; /* No border */
    color: #dc2626; /* Red color */
    cursor: pointer; /* Pointer cursor */
    margin-left: 10px; /* Space from adjacent content */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Trash button hover state */
.trash-button:hover {
    color: #b91c1c; /* Darker red on hover */
}

/* Prevent pointer events on trash button icons */
.trash-button i {
    pointer-events: none; /* Ensures click events go to button, not icon */
}

/* ====================================================================
   PROGRAM GRID LAYOUT
   ==================================================================== */

/* Grid layout for displaying available programs */
.programs-grid {
    display: grid; /* CSS Grid layout */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive columns */
    gap: 15px; /* Space between grid items */
    margin-top: 20px; /* Space above grid */
}

/* Individual program card styling - these are draggable */
.program-item {
    background: linear-gradient(45deg, #f1f5f9, #e2e8f0); /* Light gradient background */
    color: #1e293b; /* Dark text */
    padding: 15px 20px; /* Internal spacing */
    border-radius: 12px; /* Rounded corners */
    cursor: grab; /* Grab cursor indicates draggable */
    transition: all 0.3s ease; /* Smooth transitions */
    display: flex; /* Vertical layout */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    gap: 10px; /* Space between elements */
    font-weight: 500; /* Medium font weight */
    box-shadow: 0 5px 15px rgba(162, 225, 74, 0.2); /* Green shadow */
    animation: fadeInUp 0.4s ease; /* Fade-in animation */
    border: 1px solid rgba(162, 225, 74, 0.2); /* Light green border */
}

/* Program item hover state - visual feedback for draggable items */
.program-item:hover {
    transform: translateY(-3px); /* Lift item slightly */
    box-shadow: 0 10px 25px rgba(162, 225, 74, 0.2); /* Larger shadow */
    border-color: #a2e14a; /* Brighter green border */
    background: linear-gradient(45deg, #f0f9e9, #e6f4d9); /* Light green background */
}

/* Program item active state - when being dragged */
.program-item:active {
    cursor: grabbing; /* Grabbing cursor during drag */
}

/* Program description text styling */
.program-description {
    font-size: 0.70rem; /* Small text size */
    color: #7f8c8d; /* Gray color */
    font-style: italic; /* Italic text */
}

/* ====================================================================
   PLANNING CONTROLS
   ==================================================================== */

/* Controls for schedule generation (day selector, number of days) */
.planning-controls {
    display: flex; /* Horizontal layout */
    align-items: center; /* Vertically center all controls */
    gap: 20px; /* Space between controls */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-bottom: 30px; /* Space below controls */
}

/* Individual control group (label + input/select) */
.control-group {
    display: flex; /* Vertical layout */
    flex-direction: column; /* Stack label above input */
    gap: 8px; /* Space between label and input */
}

/* Labels for form controls */
.control-group label {
    font-weight: 600; /* Semi-bold text */
    color: #a2e14a; /* Brand green color */
    font-size: 14px; /* Small text size */
}

/* Form inputs and selects */
.control-group select,
.control-group input {
    padding: 10px 15px; /* Internal spacing */
    border: 2px solid rgba(162, 225, 74, 0.2); /* Light green border */
    border-radius: 8px; /* Rounded corners */
    font-size: 14px; /* Readable text size */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    color: #1e293b; /* Dark text */
    transition: border-color 0.3s ease; /* Smooth border transition */
}

/* Focus states for form controls */
.control-group select:focus,
.control-group input:focus {
    outline: none; /* Remove default outline */
    border-color: #a2e14a; /* Green border on focus */
    background: rgba(255, 255, 255, 1); /* Fully opaque background */
}

/* ====================================================================
   PLANNING GRID (SCHEDULE)
   ==================================================================== */

/* Grid layout for daily schedule cards */
.planning-grid {
    display: grid; /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between day cards */
    margin-top: 20px; /* Space above grid */
}

/* Individual day card in the schedule */
.day-card {
    background: rgba(248, 250, 252, 0.9); /* Light semi-transparent background */
    border: 2px solid rgba(162, 225, 74, 0.2); /* Light green border */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Internal spacing */
    transition: all 0.3s ease; /* Smooth transitions */
    animation: fadeInUp 0.4s ease; /* Fade-in animation */
    backdrop-filter: blur(5px); /* Subtle blur effect */
}

/* Day card hover state */
.day-card:hover {
    border-color: #a2e14a; /* Brighter green border */
    box-shadow: 0 5px 15px rgba(162, 225, 74, 0.2); /* Green shadow */
    background: rgba(255, 255, 255, 0.95); /* More opaque background */
}

/* Day header (e.g., "Monday (Day 1)") */
.day-header {
    display: flex; /* Horizontal layout */
    align-items: center; /* Vertically center content */
    gap: 8px; /* Space between elements */
    font-weight: 600; /* Semi-bold text */
    color: #1e293b; /* Dark text */
    margin-bottom: 15px; /* Space below header */
    padding-bottom: 10px; /* Space above bottom border */
    border-bottom: 1px solid rgba(162, 225, 74, 0.2); /* Light green separator */
}

/* Time slots (Morning/Afternoon containers) */
.time-slot {
    margin-bottom: 15px; /* Space between time slots */
}

/* Time labels (Morning/Afternoon) */
.time-label {
    font-weight: 600; /* Semi-bold text */
    color: #a2e14a; /* Brand green color */
    font-size: 14px; /* Small text size */
    margin-bottom: 8px; /* Space below label */
    display: flex; /* Horizontal layout for label and trash button */
    align-items: center; /* Vertically center content */
    gap: 5px; /* Space between elements */
}

/* ====================================================================
   DROP ZONES (DRAG & DROP TARGETS)
   ==================================================================== */

/* Drop zones where programs can be dropped */
.drop-zone {
    min-height: 60px; /* Minimum height for usability */
    border: 2px dashed rgba(162, 225, 74, 0.3); /* Dashed green border */
    border-radius: 8px; /* Rounded corners */
    padding: 15px; /* Internal spacing */
    background: rgba(248, 250, 252, 0.6); /* Light semi-transparent background */
    transition: all 0.3s ease; /* Smooth transitions */
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    color: #64748b; /* Gray text color */
    font-style: italic; /* Italic placeholder text */
}

/* Drop zone hover and drag-over states */
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: #a2e14a; /* Solid green border */
    background: rgba(240, 249, 233, 0.5); /* Light green background */
    color: #a2e14a; /* Green text color */
}

/* Drop zone with content (after program is dropped) */
.drop-zone.has-content {
    background: linear-gradient(45deg, #a2e14a, #8ac441, #7cb938); /* Green gradient */
    color: white; /* White text */
    border-color: transparent; /* Remove border */
    font-style: normal; /* Remove italic styling */
    font-weight: 500; /* Medium font weight */
    position: relative; /* For positioning the checkmark */
    box-shadow: 0 4px 15px rgba(162, 225, 74, 0.2); /* Green shadow */
}

/* Checkmark icon for filled drop zones */
.drop-zone.has-content::after {
    content: "✔"; /* Checkmark character */
    position: absolute; /* Position relative to drop zone */
    right: 10px; /* Position from right edge */
    font-size: 16px; /* Icon size */
    color: white; /* White color */
}

/* ====================================================================
   RESUME/SUMMARY SECTION
   ==================================================================== */

/* Textarea for displaying generated summaries */
.resume-section textarea {
    width: 100%; /* Full width */
    height: 200px; /* Fixed height with resize allowed */
    padding: 20px; /* Internal spacing */
    border: 2px solid rgba(162, 225, 74, 0.2); /* Light green border */
    border-radius: 12px; /* Rounded corners */
    font-size: 14px; /* Readable text size */
    font-family: inherit; /* Use same font as body */
    resize: vertical; /* Allow vertical resizing only */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    color: #1e293b; /* Dark text */
    line-height: 1.6; /* Comfortable line spacing */
}

/* Focus state for summary textarea */
.resume-section textarea:focus {
    border-color: #a2e14a; /* Green border on focus */
    background: rgba(255, 255, 255, 1); /* Fully opaque background */
}

/* Placeholder text for summary textarea */
.resume-section textarea::placeholder {
    color: #64748b; /* Gray placeholder text */
}

/* ====================================================================
   STATUS MESSAGES (LOADING, ERROR, SUCCESS)
   ==================================================================== */

/* Loading indicators - hidden by default */
.loading {
    display: none; /* Hidden by default */
    text-align: center; /* Center text */
    color: #a2e14a; /* Brand green color */
    font-style: italic; /* Italic text */
}

/* Show loading indicators when .show class is added */
.loading.show {
    display: block; /* Make visible */
}

/* Error message styling */
.error-message {
    background: rgba(254, 226, 226, 0.8); /* Light red background */
    color: #dc2626; /* Red text */
    padding: 15px; /* Internal spacing */
    border-radius: 8px; /* Rounded corners */
    border-left: 4px solid #dc2626; /* Red left border accent */
    margin-top: 15px; /* Space above message */
    display: none; /* Hidden by default */
    border: 1px solid rgba(220, 38, 38, 0.3); /* Light red border */
}

/* Success message styling */
.success-message {
    background: rgba(220, 252, 231, 0.8); /* Light green background */
    color: #059669; /* Green text */
    padding: 15px; /* Internal spacing */
    border-radius: 8px; /* Rounded corners */
    border-left: 4px solid #10b981; /* Green left border accent */
    margin-top: 15px; /* Space above message */
    display: none; /* Hidden by default */
    border: 1px solid rgba(16, 185, 129, 0.3); /* Light green border */
}

/* ====================================================================
   ANIMATIONS
   ==================================================================== */

/* Fade-in animation used throughout the application */
@keyframes fadeInUp {
    from {
        opacity: 0; /* Start transparent */
        transform: translateY(10px); /* Start slightly below final position */
    }
    to {
        opacity: 1; /* End fully visible */
        transform: translateY(0); /* End at final position */
    }
}

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

/* Mobile and tablet responsive styles */
@media (max-width: 768px) {
    /* Reduce container padding and margins on small screens */
    .main-container {
        padding: 20px; /* Less padding */
        margin: 10px; /* Less margin */
    }

    /* Smaller header title on mobile */
    .header h1 {
        font-size: 2rem; /* Smaller font size */
    }

    /* Stack planning controls vertically on mobile */
    .planning-controls {
        flex-direction: column; /* Vertical layout */
        align-items: stretch; /* Full width controls */
    }

    /* Single column layout for planning grid on mobile */
    .planning-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    /* Single column layout for programs grid on mobile */
    .programs-grid {
        grid-template-columns: 1fr; /* Single column */
    }
}