/* Styles related to the form and input elements */
form {
    max-width: 700px;
    margin: 0 auto;
}

textarea {
    width: 100%;
    max-width: 600px;
    min-width: 400px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0; /* Remove unnecessary padding to allow the chat area to take full space */
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column; /* Make elements stack vertically */
    justify-content: space-between; /* Ensure elements are spaced out */
    background-image: url('/static/images/koop-bg2.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out h1, user-info, and button */
    padding: 10px 20px;
    position: relative;
    background: url('/static/images/koop-ai.png') no-repeat left center;
    background-size: auto 100px;  /* Adjust size as needed */
    height: 80px;  /* Ensures enough height for the logo */
}

header h1 {
    margin: 0;
    color: white;
}

/* Right side group for simple headers */
header .right-header-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

header a.button-style {
    color: white; /* Match your design */
    text-decoration: none;
}

.message {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.message img {
    width: 45px; /* You can adjust the size as needed */
    height: 50px;
    border-radius: 50%; /* Makes the image circular */
    margin-right: 10px;
}
.message .text {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 10px;
}
/* Style for the initial message */
#initial-message {
    text-align: center;
    margin: 20px;
    background-color: white; /* Sets the background to white */
    padding: 15px; /* Adds some padding inside the p element */
    border-radius: 10px; /* Optional: Rounds the corners of the p element */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for better separation from the background */
    display: inline-block; /* Makes the p element wrap content */
    max-width: 80%; /* Restricts the width, change as needed */
}

#initial-message p {
    /* Now you can remove the margin-top here if you've added padding to the container */
    /* Other paragraph styles if needed */
}

#initial-message img {
    display: block; /* Makes the image a block element */
    margin: 0 auto; /* Centers the image horizontally */
    width: 100px;
    height: 130px;
    border-radius: 50%; /* Makes the image circular */
}

.spinner {
height: 15px;
width: 15px;
background-color: green; /* Solid color */
border-radius: 50%;
animation: spin 1s infinite linear;
margin: auto; /* Center spinner in the surrounding div */
}

@keyframes spin {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(0.5);
    }
}

.logout-button {
    float: right;
    margin-right: 20px;
    background-color: #4CAF50; /* Green background for better visibility */
    color: white; /* White text */
    padding: 10px 20px; /* Sufficient padding */
    text-decoration: none; /* No underline */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold; /* Makes the text bold */
    transition: background-color 0.3s; /* Smooth background color transition for hover effect */
    outline: none; /* Remove the outline to make it cleaner */
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
}

.logout-button:hover {
    background-color: #45a049; /* Darker shade when hovered for interaction feedback */
}

.button-style {
    display: inline-block; /* Allows the padding and margins to affect the link */
    margin: 10px 0; /* Adds some margin around the button */
    background-color: black; /* Green background for better visibility */
    color: white; /* White text */
    padding: 10px 20px; /* Sufficient padding */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold; /* Makes the text bold */
    transition: background-color 0.3s; /* Smooth background color transition for hover effect */
    text-align: center; /* Center the text inside the button */
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
}

.button-style:hover {
    background-color: #45a049; /* Darker shade when hovered for interaction feedback */
}

.message .text.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.reminder-message {
    color: white; /* Sets the text color to white */
    font-weight: bold; /* Makes the text bold */
    margin-top: 10px; /* Adds space above the reminder for better spacing */
}

#chat-area {
    height: 500px; /* Set a fixed height for the chat area */
    overflow-y: auto; /* Enable vertical scrolling when the content overflows */
    padding: 10px; /* Optional: Add padding to the content inside the chat area */
    background-color: rgba(255, 255, 255, 0.8); /* Light background for better contrast */
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
}

/* Flexbox for input and send button */
#input-container {
    display: flex;
    align-items: center; /* Align input and button vertically */
    gap: 5px; /* Ensure there's minimal gap between input and button */
    padding: 10px;
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Adjust the user input field */
#user-input {
    width: 85%; /* Adjust the width of the input */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    /* Remove any margin or padding that could add unnecessary space */
}

/* Adjust the send button */
#sendButton {
    width: auto;
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Hover effect for the button */
#sendButton:hover {
    background-color: #45a049;
}

/* Update and enhance calendar grid styles */
.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 5px;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 4px;
}

.calendar-day label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.calendar-day select {
    width: 100%;
    padding: 0.25rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
    font-size: 0.9rem;
}

.calendar-day.empty {
    visibility: hidden;
}

/* Style for error state */
.calendar-day select.input-error {
    border-color: #dc3545;
    background-color: #fff8f8;
}

/* Responsive adjustments for the calendar */
@media screen and (max-width: 768px) {
    .calendar-week {
        display: flex;
        flex-direction: column;
    }

    .calendar-day {
        margin-bottom: 0.5rem;
    }

    .calendar-day.empty {
        display: none;
    }

    .calendar-day label {
        font-size: 1rem;
    }
}

/* Styles for new Calendar */
/* Style for phase events based on their phase type */
/* Style for SSR/ER events to ensure black text */

/* Make sure user-select is allowed on the list view */
.fc-list-day {
    user-select: auto !important;
}


.fc-day {
    cursor: pointer; /* Make the whole day block clickable */
}

.fc-daygrid-day {
    position: relative;
}

.fc-daygrid-day-number {
    z-index: 1; /* Ensure the date number stays on top */
}

.fc-daygrid-day-top {
    cursor: pointer; /* Make sure empty space inside the day block is also clickable */
}


.fc-event.phase-event.SSR-ER {
    background-color: yellow !important;  /* Yellow for SSR/ER */
    border: 1px solid gold !important;
    color: black !important; /* Force black text color for SSR/ER */
}

/* Additional specificity to override dark mode */
.fc-event.phase-event.SSR-ER * {
    color: black !important; /* Force black text color for SSR/ER even for nested elements */
}

.fc-event.phase-event.running-intervals {
    background-color: red !important;  /* Red for Running Intervals */
    border: 1px solid darkred !important;
}

.fc-event.phase-event.recovery {
    background-color: lightblue !important;  /* Light Blue for Recovery */
    border: 1px solid blue !important;
}

.fc-event.phase-event.tempo {
    background-color: orange !important;  /* Orange for Tempo */
    border: 1px solid darkorange !important;
}

.fc-event.phase-event.green-phase {
    background-color: green !important;  /* Green for Acclimatization, Taper, Unscheduled */
    border: 1px solid darkgreen !important;
}

/* Optional fallback for other phases that don't match any case */
.fc-event.phase-event.other-phase {
    background-color: green !important;  /* Green for other phases (if necessary) */
    border: 1px solid darkgreen !important;
}

/* Phase-only events */
.phase-events .fc-event {
    background-color: #d4e157; /* Light green for phase-only events */
    border: 1px solid #9e9d24; /* Dark green border */
    color: black; /* Black text for visibility */
    font-weight: bold; /* Make phase events stand out */
}

/* Detailed active events */
.active-events .fc-event {
    background-color: #64b5f6; /* Light blue for detailed events */
    border: 1px solid #1976d2; /* Dark blue border */
    color: white; /* White text for contrast */
    font-weight: normal; /* Regular weight for active events */
}

/* Tooltip styling */
.tooltip {
    position: absolute;
    background-color: #333; /* Dark background for the tooltip */
    color: #fff; /* White text */
    padding: 5px 10px; /* Add padding for readability */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for better visibility */
    font-size: 0.9em; /* Slightly smaller font */
    z-index: 1000; /* Ensure tooltip appears above everything */
    pointer-events: none; /* Prevent mouse interaction with tooltip */
}

/* Hover effect for all events */
.fc-event:hover {
    filter: brightness(1.1); /* Slightly brighten the event on hover */
    cursor: pointer; /* Change cursor to pointer to indicate interactivity */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .fc-event {
        font-size: 0.8em; /* Reduce font size for smaller screens */
        padding: 2px; /* Minimize padding for better fit */
    }
}


.fc-event-title {
        white-space: pre-wrap;  /* Preserve newlines for multi-line text */
        font-size: 14px;  /* Adjust text size */
        line-height: 1.4;  /* Increase line height for better spacing */
    }


/* Change the calendar header and toolbar to green */
.fc-toolbar {
    background-color: #4CAF50; /* Match the green from your home page */
    color: white;
}

/* Change the background of each day cell */
.fc-daygrid-day {
    background-color: #f4f4f9; /* Light complementary color for better contrast */
}

/* Style the events with green borders and text */
.fc-event {
    background-color: #4CAF50; /* Event background */
    border-color: #4CAF50;    /* Event border */
    color: white;             /* Event text */
}

/* Style the hover state of events */
.fc-event:hover {
    background-color: #45a049; /* Slightly darker green on hover */
}

.fc-day-today {
    background-color: rgba(255, 255, 255, 0.6) !important; /* Make "today" translucent */
    border: 2px solid #4CAF50; /* Highlight "today" with a green border */
    backdrop-filter: blur(5px); /* Optional: Adds a slight blur effect */
    z-index: 1; /* Ensure it appears above any overlapping elements */
}

.fc-col-header-cell {
    background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
    color: white; /* White text for contrast */
    font-weight: bold; /* Makes the text stand out */
    padding: 10px 0; /* Add padding for better spacing */
    text-align: center; /* Center-align the day names */
}

.fc-event-title {
    white-space: pre-wrap; /* Preserve newlines */
}

.fc-event {
    padding: 2px 4px; /* Add padding for better readability */
    font-size: 12px; /* Smaller text size for labels */
}

/* Style for events with missing feedback */
.missing-feedback {
    background-color: #e57373 !important; /* Muted red */
    border: 3px solid black !important;   /* Thick black border */
    color: white !important; /* White text for visibility */
}

/* Non-Compliant Event (Green with Black Border) */
.fc-event.non-compliant-event {
    background-color: #81C784 !important; /* Lighter green background */
    border: 3px solid black !important;   /* Thick black border */
    color: white !important;             /* White text */
}

/* Workout Changed Event (Orange) */
.fc-event.changed-event {
    background-color: #81C784 !important; /* Lighter green background */
    border: 3px solid black !important;   /* Thick black border */
    color: black !important;             /* Black text */
}

/*Styles for flash alerts used for compliance check*/
.alert-success {
    color: green;
}
.alert-warning {
    color: orange;
}
.alert-info {
    color: blue;
}

.illness-event {
    background-color: #ffcccc; /* Light red for illness */
    border: 2px solid red;
}

.injured-event {
    background-color: #cce5ff; /* Light blue for injured */
    border: 2px solid blue;
}


.input-error {
    border-color: red;
}

/* Styles related to the form and input elements */
form {
    max-width: 700px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8); /* Optional form background */
    padding: 20px;
    border-radius: 10px;
}

label {
    font-size: 18px;
    font-weight: bold;
    color: black;
}

textarea, input[type="date"] {
    width: 100%;
    max-width: 600px;
    min-width: 200px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9); /* Background for better contrast */
    color: black;
}

textarea::placeholder, input[type="date"]::placeholder {
    color: #666;
}

/* Responsive design adjustments */
@media screen and (max-width: 600px) {
    label {
        font-size: 20px;
    }

    textarea, input[type="date"] {
        min-width: unset;
    }
}

/*for mobile view of calendar*/
html, body, #calendar {
    height: 100%; /* Ensure the calendar container takes up full height */
    margin: 0; /* Remove default margins */
    padding: 0;
    display: flex;
    flex-direction: column;
}

.fc-list {
    flex: 1; /* Allow the calendar list view to grow and fill available space */
    overflow-y: auto; /* Enable scrolling if the content overflows */
}

.bold-white-text {
    color: white;        /* Text color */
    font-weight: bold;   /* Make text bold */
    text-align: center;  /* Center text horizontally */
    margin: 0 auto;      /* Optional: Center the block itself if necessary */
}

.workout-explanation {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

.form-group {
    margin-bottom: 1rem;
}

/* Additional form styles for motivation section */
textarea {
    min-height: 100px;
    resize: vertical;
}

input[type="url"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.form-group textarea,
.form-group input[type="url"],
.form-group select {
    margin-bottom: 1rem;
}

.input-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

@media (max-width: 768px) {
    /* Prevent any interaction styles (hover, active, focus) on mobile */
    .fc-event:active,
    .fc-event:focus,
    .fc-event:hover,
    .fc-event.fc-selected {
        background-color: inherit !important; /* Prevent the background color from changing */
        color: inherit !important; /* Keep the text color unchanged */
        box-shadow: none !important; /* Remove any shadow */
        transform: none !important; /* Prevent any transformations */
        pointer-events: none !important; /* Prevent pointer events like click and hover */
    }

    /* Ensure no background or text color change */
    .fc-event {
        background-color: #4CAF50 !important; /* Default background color */
        color: inherit !important; /* Ensure text remains unchanged */
        opacity: 1 !important; /* Remove any transparency */
        box-shadow: none !important; /* Remove box-shadow */
    }

    /* Ensure that selected events don't change */
    .fc-event.fc-selected {
        background-color: #4CAF50 !important;
        color: inherit !important;
    }
}

.settings-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#settings-form {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.setting-group {
    margin-bottom: 20px;
}

.cancel-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.cancel-message {
    max-width: 600px;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    text-align: center;
}

.cancel-message h2 {
    margin-top: 0;
    color: white;
}

.cancel-message p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: white;
}

.cancel-message strong {
    color: white;
    font-size: 1.2em;
}

.training-input-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.training-week {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.week-label {
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.input-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-wrap: nowrap;  /* Ensure fields stay on one line */
}

.input-group {
    flex: 1;
    min-width: 0;  /* Allow fields to shrink if needed */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-group label {
    font-size: 0.9em;
    color: #666;
}

.input-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
}

/* Force no wrapping for training week inputs specifically */
.training-week .input-row {
    flex-wrap: nowrap !important;
}

.training-week .input-group {
    min-width: 0 !important;  /* Allow shrinking */
    flex: 1 !important;
}

/* Responsive layout - only stack vertically on very small screens */
@media (max-width: 768px) {
    .input-row {
        flex-wrap: wrap;  /* Allow wrapping on smaller screens */
    }
    
    .input-group {
        flex: 1 1 45%;  /* Take up roughly half width, allowing 2 per row */
        min-width: 120px;  /* Reduced from 150px to prevent wrapping */
    }
    
    /* Still enforce no wrapping for training weeks even on smaller screens */
    .training-week .input-row {
        flex-wrap: nowrap !important;
    }
    
    .training-week .input-group {
        min-width: 0 !important;
        flex: 1 !important;
        font-size: 0.9em;  /* Slightly smaller text on smaller screens */
    }
}

@media (max-width: 480px) {
    .input-row {
        flex-direction: column;
        gap: 10px;
    }

    .input-group {
        width: 100%;
    }
}

.red-button {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

.red-button:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}