/* Explicitly hide the tailwind-keep-alive dummy div */
#tailwind-keep-alive-dummy {
    display: none ;
  }

/* Generic hidden class fallback, essential if Windi CSS doesn't load immediately */

.hidden {
    display: none !important;
}


/* Specific rule to hide the file management action buttons by default */
#fileManagementActions {
    display: none !important;
}

/* General Body and Font Styles */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #e0f2f7 0%, #c1dceb 100%);
    color: #333;
    min-height: 100vh;
    padding: 2rem;
    display: flex;
    flex-direction: column; /* This is the key to stacking vertically */
    align-items: center;
    justify-content: flex-start;         
}

/* App Container Styling (Main wrapper for the entire UI) */
#app {
    max-width: 1200px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    border-radius: 20px; /* More prominent rounded corners */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), /* Main shadow for lift */
                0 0 10px rgba(0, 0, 0, 0.05) inset; /* Subtle inner shadow */
    padding: 2.5rem;
    position: relative;
    z-index: 1; /* Ensures it's above potential background elements */
    overflow: hidden; /* For rounded corners */
}

/* Headings */
h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
    text-align: center;
    color: #1a202c; /* Darker text for headings */
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0c4a6e; /* Deep blue for main title */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2b6cb0;
}

h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
#addProjectModal {
  position: fixed;
  inset: 0;            /* shorthand for top/right/bottom/left:0 */
  display: none;       /* hidden by default */
  z-index: 10000;      
  background: rgba(0,0,0,0.5);
}
#addProjectModal.visible {
  display: flex;      
  align-items: center;
  justify-content: center;
}

/* Buttons (General Styling) */
button {
    padding: 0.75rem 1.8rem 0.75rem 1.1rem; /*padding: 0.75rem 1.5rem; 06-29 */ 
    border-radius: 0.5rem; /* Rounded button corners */
    font-weight: 600;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Lifted shadow */
    transform: translateY(0); /* For hover effect */
    background-color: darkcyan;
}

button:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.15); /* Light overlay for subtle effect */
    border-radius: 50%;
    transition: all 0.75s ease-out;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.close-btn {
  margin-right: 0;
}
/* Specific Button Colors */
#authButtons button.bg-green-600 {
    background: linear-gradient(145deg, #48bb78, #38a169); /* Green gradient */
}
#authButtons button.bg-blue-600 {
    background: linear-gradient(145deg, #4299e1, #3182ce); /* Blue gradient */
}
/* Cancel buttons maintain their specific colors */
.cancel-btn.bg-red-600 {
    background: linear-gradient(145deg, #ef4444, #dc2626); /* Red gradient */
}
.content-hidden {
    visibility: hidden;
    opacity: 0;
}

/* Primary Action Buttons (Edit Project, Upload File, OK in modals, Save in edit modal) - consistently blue/green */
#showMondayEditFormButton,
#uploadFileForm button[type="submit"],
#mondayEditModal button[type="submit"], /* Save button in edit modal */
#customAlertModal button#customAlertOKButton,
#sessionWarningModal button#stayLoggedInButton { /* New button for session modal */
    background: linear-gradient(145deg, #4299e1, #3182ce); /* Blue gradient */
    color: #ffffff;
}
#showMondayEditFormButton:hover,
#uploadFileForm button[type="submit"]:hover,
#mondayEditModal button[type="submit"]:hover,
#customAlertModal button#customAlertOKButton:hover,
#sessionWarningModal button#stayLoggedInButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* New: Button for "View Uploaded Files" / "Manage Files" / "Delete Files" */
#showDropboxFilesModalButton { /* Initial state for "View Uploaded Files" */
    background: linear-gradient(145deg, #4299e1, #3182ce); /* Blue gradient */
    color: #ffffff;
}
#toggleManageFilesBtn { /* White on green "Manage Files" */
    background: linear-gradient(145deg, #48bb78, #38a169); /* Green gradient */
    color: #ffffff;
}
#deleteSelectedFilesBtn { /* White on red "Delete Files" */
    background: linear-gradient(145deg, #ef4444, #dc2626); /* Red gradient */
    color: #ffffff;
}


/* Cancel in Monday Edit Modal */
#mondayEditModal button#cancelMondayEdit {
    background: linear-gradient(145deg, #a0aec0, #718096); /* Grey gradient for cancel */
    color: #ffffff;
}
#mondayEditModal button#cancelMondayEdit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}


/* Modals (Register, Login, Logout, Custom Alert, Dropbox, and Session Warning) */
.fixed.inset-0 {
    background: rgba(0, 0, 0, 0.6); /* Darker, slightly blurred background for modals */
    backdrop-filter: blur(5px); /* Subtle blur effect */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure these are on top */
    z-index: 1000;
}

.fixed.inset-0 > div { /* Target the inner modal content box */
    background: linear-gradient(160deg, #f9fafb, #ffffff); /* Light gradient for modal background */
    border-radius: 15px; /* Consistent rounded corners */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Stronger lift for modals */
    padding: 2.5rem;
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: scale(0.95); /* Initial slight scale down */
    animation: modalAppear 0.3s ease-out forwards; /* Smooth appearance */
}
/* Specific max-width for Dropbox modal if it needs to be wider */
#dropboxFilesModal > div {
    max-width: 700px; /* Example for a wider Dropbox modal */
    padding: 2.5rem 3rem; /* More generous padding for file list */
}
/* Max-width for Session Warning modal */
#sessionWarningModal > div {
    max-width: 450px;
}


/* Note: 'hidden' class needs to be toggled by JS to control visibility */
.fixed.inset-0.hidden > div {
    animation: modalDisappear 0.3s ease-in forwards; /* Smooth disappearance */
}

@keyframes modalAppear {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalDisappear {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.85) translateY(20px); }
}

.fixed.inset-0 > div .flex.justify-end > button { /* Close button style (X button) */
    background: none;
    box-shadow: none;
    color: #718096; /* Gray text */
    font-size: 1.8rem;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 15px;
    right: 20px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.fixed.inset-0 > div .flex.justify-end > button:hover {
    color: #e53e3e; /* Red on hover */
    transform: scale(1.1) translateY(0);
}

/* Form Inputs */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form textarea {
    width: 90%;
    padding: 0.85rem 1rem;
    border: 1px solid #cbd5e0; /* Light gray border */
    border-radius: 0.5rem; /* Rounded input fields */
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Inner shadow for depth */
    margin-bottom: 1rem; /* Space between inputs */
}
form label { /* Added styling for labels in Monday Edit Modal */
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #4a5568;
}

form input:focus,
form textarea:focus {
    outline: none;
    border-color: #63b3ed; /* Blue focus border */
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Blue focus ring */
}

/* Password Toggle */
.relative span#toggleLoginPassword {
    position: absolute;
    /*right: 1rem;*/ /* Adjust positioning */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem; /* text-sm */
    color: #a0aec0; /* text-gray-500 */
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}
.relative span#toggleLoginPassword:hover {
    color: #4a5568; /* Darker on hover */
}
/* Specific width for login inputs */
#loginForm input[type="text"]#login_username,
#loginForm input[type="password"]#login_password {
    width: 16rem; /* Equivalent to style="width: 16rem;" */
}


/* Dashboard Specific Styles */
#dashboard {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly more opaque for dashboard */
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    margin-top: 1.5rem; /* Space from auth buttons */
    position: relative;
}

.dashboard-header-row { /* New flex container for welcome/logo/logout */
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to the top of the cross axis */
    margin-bottom: 1.5rem;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 1rem; /* Space between flex items */
}

.showleft {
    /* Removed float: left; as it conflicts with display: flex on parent */
    margin-bottom: 0; /* Adjust as needed */
    flex-grow: 1; /* Allow to grow and take available space */
}

.logo {
    /* Removed float: right; and negative margin-top */
    display: flex;
    flex-direction: column; /* Stack logo and logout button vertically */
    align-items: center; /* Center items within this column */
    gap: 0.75rem; /* Space between logo and logout button */
    margin-top: 0; /* Remove problematic negative margin-top */
    width: 100px; /* Fixed width for logo container */
    height: 100px; /* Fixed height for logo container */
    background-image: url('/images/AE-Logo-rnd-400.webp'); /* Your logo image */
    background-size: contain; /* Ensure logo fits within the div */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px; /* Rounded logo */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent logo from shrinking */
}
.logo_main {
    /* Removed float: right; and negative margin-top */
    display: flex;
    flex-direction: column; /* Stack logo and logout button vertically */
    align-items: center; /* Center items within this column */
    gap: 0.75rem; /* Space between logo and logout button */
    margin-top: 0; /* Remove problematic negative margin-top */
    width: 100px; /* Fixed width for logo container */
    height: 100px; /* Fixed height for logo container */
    background-image: url('/images/AE-Logo-rnd-400.webp'); /* Your logo image */
    background-size: contain; /* Ensure logo fits within the div */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px; /* Rounded logo */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* Prevent logo from shrinking */
    margin: 0 auto;
}
#mainLogoContainer {
    position: absolute;
    top: 0; /* Adjust this value to change the distance from the top */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Ensures it sits above the background but below modals */
}
/* Removed .logo img rule as img tag is no longer used */

/* Clearfix is no longer strictly needed with flexbox */
/* #dashboard::after { content: ""; display: table; clear: both; } */

/* Dashboard Cards Container (Project Status and Details) */
#projectCardsContainer {
    display: grid;
    gap: 1.5rem; /* Space between cards */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    margin-top: 1.5rem;
}

/* Individual Dashboard Card Styling */
#projectCardsContainer .card {
    background: linear-gradient(160deg, #e6fffa, #edf2f7); /* Light, subtle gradient for cards */
    border-radius: 15px; /* Rounded corners for dashboard cards */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Standard lift */
    transition: all 0.3s ease;
    height: auto; /* Allow height to adjust to content */
    min-height: 250px; /* Ensure minimum height for consistency */
    display: flex;
    flex-direction: column; /* Stack heading and content vertically */
    overflow: hidden; /* Ensure rounded corners are respected */
}

#projectCardsContainer .card:hover {
    transform: translateY(-5px) scale(1.01); /* Lift and slight enlarge on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    /* subtle 3D tilt on hover */
    transform: perspective(1000px) rotateX(1deg) rotateY(1deg) translateY(-5px);
}

#projectCardsContainer .card .heading {
    background: linear-gradient(45deg, #3182ce, #4299e1); /* Blue gradient for card headings */
    color: #ffffff;
    height: 60px; /* Fixed height for card headings */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; /* Larger font for card headings */
    font-weight: 700;
    border-top-left-radius: 15px; /* Match card's top rounding */
    border-top-right-radius: 15px; /* Match card's top rounding */
    padding: 0 1rem; /* Add horizontal padding if needed */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); /* Text shadow for pop */
}

#projectCardsContainer .card .content {
    padding: 1.25rem; /* More padding inside content */
    color: #4a5568; /* Darker text for readability */
    flex-grow: 1; /* Allow content to take available space */
    line-height: 1.6; /* Better line spacing */
}
#projectCardsContainer .card .content p {
    margin-bottom: 0.5rem; /* Space between paragraphs */
}
#projectCardsContainer .card .content strong {
    color: #2d3748; /* Darker bold text */
}
#projectCardsContainer .card .content span {
    font-weight: 500;
}
#projectListContainer {
  max-height: 500px;
  overflow-y: auto;
}

/* Buttons at bottom of dashboard (Edit Project Details, Upload File, Logout) */
.dashboard-bottom-actions {
    display: flex;
    justify-content: space-between; /* Space buttons evenly */
    align-items: center; /* Vertically align items */
    margin-top: 2rem;
    padding-top: 1.5rem; /* Add some padding from content above */
    border-top: 2px solid #4386df; /* Subtle separator line */
    /* Removed position: relative; if it's not strictly needed for other children */
}

/* Reposition Logout button to be explicitly at the right within its flex container */
#logoutButton {
    margin-left: auto; /* Pushes button to the right within flex container */
    margin-bottom: 0; /* Clear any conflicting margins */
    /* Removed align-self: flex-end; as margin-left: auto is typically sufficient */
}

/* Dropbox Files Modal Content (similar to a card) */
#dropboxFilesModal h2 {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0; /* Separator for title */
}
#dropboxFilesModal .dropbox-files-container { /* New container for files list and management buttons */
    background: linear-gradient(160deg, #e6fffa, #edf2f7); /* Light, subtle gradient for the list container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
    padding: 1.5rem;
    max-height: 400px; /* Limit height and add scroll */
    overflow-y: auto;
    margin-bottom: 1.5rem; /* Space below the list */
}
#dropboxFilesModal .dropbox-files-container ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
}
#dropboxFilesModal .dropbox-files-container li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #edf2f7; /* Light separator */
    display: flex; /* For aligning icon and text */
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}
#dropboxFilesModal .dropbox-files-container li:last-child {
    border-bottom: none;
}
#dropboxFilesModal .dropbox-files-container a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
    flex-grow: 1; /* Allow link to take space */
    transition: color 0.2s ease;
}
#dropboxFilesModal .dropbox-files-container a:hover {
    color: #2b6cb0;
    text-decoration: underline;
}
#dropboxFilesModal .dropbox-files-container p {
    font-style: italic;
    color: #718096;
    text-align: center;
    padding: 1rem;
}

/* Delete/Checkmark Icons for Dropbox Files List */
.delete-file-icon, .confirm-delete-icon {
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    width: 20px; /* Fixed width to prevent layout shift */
    text-align: center;
    flex-shrink: 0; /* Prevent shrinking */
}
.delete-file-icon {
    color: #e53e3e; /* Red 'X' */
}
.delete-file-icon:hover {
    color: #c53030;
    transform: scale(1.1);
}
.confirm-delete-icon {
    color: #38a169; /* Green checkmark */
}
.confirm-delete-icon:hover {
    color: #2f855a;
    transform: scale(1.1);
}


/* File Upload Form */
#uploadFileForm {
    /* Styling integrated into dashboard-bottom-actions for layout */
    flex-grow: 1; /* Allow it to take available space */
    margin-top: 0 !important; /* Override default margin */
    padding: 0 !important; /* Override default padding if inside the new flex container */
    background: none !important; /* Remove background, handled by parent */
    box-shadow: none !important; /* Remove box-shadow */
    border-radius: 0 !important;
    flex-direction: row; /* Layout elements in a row */
    align-items: center; /* Vertically align items */
    gap: 1rem; /* Space between input and button */
    justify-content: flex-start; /* Align to start */
}
#uploadFileForm input[type="file"] {
    border: 2px dashed #a0aec0; /* Dashed border for file input */
    border-radius: 0.5rem;
    padding: 0.75rem;
    width: auto; /* Allow width to be content-based */
    max-width: 250px; /* Max width for file input */
    background-color: #edf2f7;
    cursor: pointer;
    color: #4a5568;
    font-size: 0.95rem;
    flex-grow: 1; /* Allow input to grow */
}
#uploadFileForm input[type="file"]::file-selector-button {
    background-color: #3182ce;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    margin-right: 1rem;
    transition: background-color 0.2s ease;
}
#uploadFileForm input[type="file"]::file-selector-button:hover {
    background-color: #2b6cb0;
}

#uploadFileMessage {
    font-size: 0.9rem;
    color: #718096;
    margin-top: 0.5rem;
    text-align: right; /* Align message to the right if button is left */
    width: 100%; /* Take full width to align text */
}
#authView #authButtons {
    display: flex ;
}
#projectListContainer .card {
    background: linear-gradient(160deg, #f0fff4, #ebf8ff);
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#projectListContainer .card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
#projectListContainer .heading {
    background: linear-gradient(45deg, #48bb78, #38a169);
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 0.75rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1rem; }
    #app { padding: 1.5rem; border-radius: 15px; }
    .fixed.inset-0 > div { padding: 1.5rem; border-radius: 10px; }
    #projectCardsContainer {
        grid-template-columns: 1fr; /* Stack cards on small screens */
    }
    .dashboard-header-row {
        flex-direction: column; /* Stack logo/user info vertically */
        align-items: center; /* Center them */
        text-align: center;
    }
    .logo {
        margin-top: 1rem; /* Adjust margin if stacked */
        margin-right: 0;
    }
    .showleft {
        text-align: center; /* Center user info text */
    }
    .dashboard-bottom-actions {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons */
        gap: 1rem;
    }
    #uploadFileForm {
        flex-direction: column; /* Stack file input and button */
        width: 100%; /* Take full width */
    }
    #uploadFileForm input[type="file"] {
        max-width: 100%; /* Allow full width */
    }
    #projectListContainer {
      overflow-x: auto;
      white-space: nowrap;
    }
    .card {
      display: inline-block;
      width: 300px;
      margin-right: 1rem;
    }
}

@media screen and (max-width:600px) {
    .logo img {
      max-width: 100px; /* Constrain logo size */
        height: auto;
    }
    body{
      font-size:1rem;
    }
    p { margin-block-start:.5rem; margin-block-end:.5rem;}
}
.content {
  background-color: rgba(205, 255, 104, 0.07);
}