/* === GLOBAL RESETS & BASE STYLES === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #F4F5F7; /* Atlassian N20 - Page background */
    color: #172B4D; /* Atlassian N800 - Default text */
    line-height: 1.6;
}

body.modal-open {
    overflow: hidden; /* Prevents scrolling of the background page */
}

/* === LAYOUT STRUCTURE === */
.app-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 768px; /* A common max-width for content */
    margin: 0 auto;
    padding: 0 16px; /* Horizontal padding */
}

.app-header {
    padding: 24px 0 20px;
    text-align: center;
}

.app-main-content {
    flex-grow: 1;
    background-color: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31); /* Atlassian card shadow */
    padding: 24px;
    margin-bottom: 24px;
}

.app-footer {
    text-align: center;
    padding: 20px 16px;
    background-color: #091E42; /* Atlassian N900 - Dark footer */
    color: #B3BAC5; /* N70 - Light text for contrast */
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 0.875rem; /* 14px */
}

.app-footer p {
    margin: 0;
}

.app-footer p a {
    color: #8993A4; /* N80 */
    text-decoration: none;
    font-weight: 500;
}

.app-footer p a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* === TYPOGRAPHY === */
h1 { /* Assuming this is inside .app-header */
    font-size: 1.875rem; /* ~30px */
    font-weight: 600;
    color: #091E42; /* Atlassian N900 */
    margin: 0;
	text-align: center;
}

/* === USER MESSAGES (TOAST/NOTIFICATION) === */
.message-area {
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 0.875rem; /* 14px */
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    border-width: 1px; /* Keep border for structure if background is light */
    border-style: solid;
    position: fixed;
    top: 24px; /* More space from top */
    left: 50%;
    transform: translateX(-50%) translateY(-120px); /* Start further off-screen */
    z-index: 10000;
    min-width: 320px;
    max-width: calc(100% - 32px); /* Ensure it doesn't touch edges on small screens */
    box-shadow: 0px 8px 16px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31); /* More prominent shadow */
}

.message-area.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Slide in */
    transition-delay: 0s;
}

.message-area.success {
    background-color: #E3FCEF; /* G50 */
    color: #006644; /* G500 */
    border-color: #79F2C0; /* G200 */
}

.message-area.error {
    background-color: #FFEBE6; /* R50 */
    color: #BF2600; /* R500 */
    border-color: #FF8F73; /* R200 */
}

/* === FORMS & CONTROLS SECTION === */
.controls-section { /* Wraps form and sort options */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end; /* Align items nicely */
    margin-bottom: 24px;
    gap: 16px;
}

#addTaskForm {
    display: flex;
    flex-wrap: nowrap; /* Prefer to keep on one line, will wrap due to children min-width */
    gap: 8px;
    align-items: center; /* Changed to center for better vertical alignment of mixed height items if any */
    flex-grow: 1; /* Allow form to take up space */
}

/* Common styles for form inputs and selects */
#addTaskForm input[type="text"],
#addTaskForm select#taskPriority,
#addTaskForm input[type="date"],
.edit-task-input, /* Apply to edit mode inputs as well */
.edit-priority-select,
.edit-due-date-input {
    background-color: #FAFBFC; /* Atlassian N20A */
    border: 1px solid #DFE1E6; /* N40 */
    border-radius: 3px;
    color: #172B4D; /* N800 */
    padding: 0 10px;
    font-family: inherit; /* Ensure Inter font is used */
    font-size: 0.875rem; /* 14px */
    height: 36px;
    line-height: 34px; /* For text vertical centering */
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

#addTaskForm input[type="text"]:hover,
#addTaskForm select#taskPriority:hover,
#addTaskForm input[type="date"]:hover,
.edit-task-input:hover,
.edit-priority-select:hover,
.edit-due-date-input:hover {
    background-color: #EBECF0; /* N30A */
}

#addTaskForm input[type="text"]:focus,
#addTaskForm select#taskPriority:focus,
#addTaskForm input[type="date"]:focus,
.edit-task-input:focus,
.edit-priority-select:focus,
.edit-due-date-input:focus {
    background-color: #FFFFFF;
    border-color: #4C9AFF; /* Atlassian Blue B400 */
    box-shadow: 0 0 0 1px #4C9AFF; /* Focus ring */
}

#addTaskForm input#taskDescription { /* Assuming ID from your HTML */
    flex-grow: 1;
    min-width: 200px;
}

#addTaskForm select#taskPriority {
    min-width: 120px;
    cursor: pointer;
    flex-grow: 0; /* Don't let it grow too much */
    flex-basis: 130px;
}

#addTaskForm input#taskDueDate { /* Assuming ID from your HTML */
    min-width: 130px;
    cursor: pointer;
    line-height: normal; /* Often better for date inputs */
    padding-top: 1px; padding-bottom: 1px; /* Fine-tune vertical alignment if needed */
    flex-grow: 0;
    flex-basis: 140px;
}

/* General Button Styling - Atlassian Inspired */
.button, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.875rem; /* 14px */
    font-weight: 500; /* Medium weight */
    border-radius: 3px;
    padding: 0 12px;
    height: 36px;
    line-height: 34px; /* (height - 2*border_width) */
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.1s ease-out, border-color 0.1s ease-out, box-shadow 0.1s ease-out;
    outline: none; /* Manage focus with box-shadow */
}
.button:hover, button:hover { text-decoration: none; }
.button:focus, button:focus {
    box-shadow: 0 0 0 2px #B3D4FF; /* B100 - Default focus for non-primary/input elements */
}

/* Primary Button (e.g., Add Task, Save Edit) */
.button-primary {
    background-color: #0052CC; /* B400 */
    color: white;
}
.button-primary:hover { background-color: #0065FF; /* B300 */ }
.button-primary:active { background-color: #0747A6; /* B500 */ }
.button-primary:focus { border-color: #0052CC; box-shadow: 0 0 0 2px #B3D4FF; }

/* Default/Secondary Button (e.g., Cancel Edit) */
.button-default {
    background-color: #F4F5F7; /* N20A */
    color: #42526E; /* N500 */
}
.button-default:hover { background-color: #EBECF0; /* N30A */ }
.button-default:active { background-color: #DFE1E6; /* N40 */ }
.button-default:focus { border-color: #4C9AFF; box-shadow: 0 0 0 1px #4C9AFF; }

/* Subtle Button (e.g., Edit Task in list) */
.button-subtle {
    background-color: transparent;
    color: #42526E; /* N500 */
    padding: 0 8px; /* Can be more compact */
    height: 32px; line-height: 30px; /* Slightly smaller */
}
.button-subtle:hover { background-color: #091e420f; /* N30A with alpha */ color: #091E42; }
.button-subtle:active { background-color: #091e4221; /* N40A with alpha */ }

/* Danger Button (e.g., Delete Task in list) */
.button-danger-subtle { /* For text buttons that are destructive */
    background-color: transparent;
    color: #DE350B; /* R400 - Red text */
    padding: 0 8px;
    height: 32px; line-height: 30px;
}
.button-danger-subtle:hover { background-color: #FFEBE6; /* R50 */ color: #BF2600; /* R500 */ }
.button-danger-subtle:active { background-color: #FFBDAD; /* R75 */ color: #BF2600; }


#addTaskForm button[type="submit"] { /* Specifically the Add Task button */
    /* It will inherit .button and should have .button-primary for styling */
    flex-shrink: 0; /* Don't shrink */
}

/* Sort Options Dropdown */
.sort-options-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Don't shrink if form is long */
}
.sort-options-container label {
    font-size: 0.875rem; /* 14px */
    color: #5E6C84; /* N200 */
    white-space: nowrap;
}
#sortTasks {
    min-width: 180px; /* For longer sort option text */
    height: 36px;
    padding: 0 8px; /* Adjust padding */
    line-height: 34px;
    background-color: #FAFBFC; /* N20A */
    border: 1px solid #DFE1E6; /* N40 */
    border-radius: 3px;
    font-size: 0.875rem; /* 14px */
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
#sortTasks:hover { background-color: #EBECF0; /* N30A */ }
#sortTasks:focus { background-color: #FFFFFF; border-color: #4C9AFF; box-shadow: 0 0 0 1px #4C9AFF; }

/* === TASK LIST === */
#taskList {
    list-style-type: none;
    padding: 0;
    margin: 0 0 24px 0; /* Space after the list */
    border: 1px solid #DFE1E6; /* N40 */
    border-radius: 3px;
    overflow: hidden; /* Contain child elements and animations */
}

#taskList li {
    background-color: #FFFFFF;
    padding: 12px 16px;
    padding-left: 36px; /* Space for priority indicator */
    border-bottom: 1px solid #EBECF0; /* N30A - lighter border */
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: background-color 0.15s ease;
}
#taskList li:hover { background-color: #F4F5F7; /* N20A */ }
#taskList li:last-child { border-bottom: none; }

#taskList li .task-meta-info { /* Optional wrapper if you used it in PHP */
    display: flex;
    align-items: baseline; /* Align text nicely */
    gap: 8px; /* Space between number and heading */
    margin-bottom: 4px; /* Space below meta info */
}

#taskList li .task-number {
    font-size: 0.8rem; /* ~13px */
    color: #6B778C; /* Atlassian N100 - for meta info */
    font-weight: 500; /* Slightly bolder than regular text */
    background-color: #F4F5F7; /* N20A */
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

#taskList li .task-heading {
    font-size: 1rem; /* 16px, slightly larger than description */
    font-weight: 600; /* Semi-bold */
    color: #091E42; /* N900 - darker for headings */
    display: block; /* Make it take its own line if long */
    margin-bottom: 4px; /* Space below heading, before full description */
    word-break: break-word;
}

#taskList li .task-text { /* Existing style, ensure it fits with new heading */
    font-size: 0.875rem; /* 14px, can be slightly smaller than heading */
    color: #172B4D; /* N800 */
    line-height: 1.5; /* Adjust for readability */
    /* display: block; */ /* Already block by default probably */
}

/* Adjust padding for .task-content if needed */
#taskList li .task-content {
    /* padding: 2px 0; */ /* Original was this */
    /* Maybe remove vertical padding here if children have margins */
}

/* Priority Indicator */
.priority-indicator {
    width: 6px;
    height: 22px; /* Slightly taller */
    border-radius: 3px; /* Rounded */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.priority-high .priority-indicator { background-color: #DE350B; } /* R400 */
.priority-medium .priority-indicator { background-color: #FFAB00; } /* Y400 */
.priority-low .priority-indicator { background-color: #0065FF; } /* B300 */

/* Task Content (Text & Due Date) */
#taskList li .task-content {
    flex-grow: 1;
    margin-right: 16px; /* Space before actions */
    min-width: 100px; /* Ensure it doesn't collapse too much */
    padding: 2px 0; /* Align text baseline with buttons */
}
#taskList li .task-text {
    font-size: 0.9375rem; /* 15px */
    color: #172B4D; /* N800 */
    font-weight: 400; /* Regular weight for readability */
    word-break: break-word;
    line-height: 1.45; /* Slightly more line height for task text */
}
#taskList li .due-date {
    font-size: 0.8125rem; /* ~13px */
    color: #5E6C84; /* N200 */
    margin-top: 4px;
    display: block;
}
#taskList li .due-date.overdue { color: #BF2600; font-weight: 600; }
#taskList li .due-date.due-today { color: #FF8B00; font-weight: 600; }
#taskList li .due-date.due-soon { color: #0052CC; font-weight: 500; }

/* Completed Task Styling */
#taskList li.completed .task-text,
#taskList li.completed .due-date {
    text-decoration: line-through;
    color: #7A869A; /* N80 */
    opacity: 0.85; /* Slightly fade */
}
#taskList li.completed .priority-indicator { opacity: 0.6; }

/* Task Actions Area & Buttons (Text Buttons as requested) */
#taskList li .actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* Apply general .button styles, then specific overrides */
#taskList li .actions .complete-btn { /* .button.complete-btn */
    background-color: #0065FF; color: white;
}
#taskList li .actions .complete-btn:hover { background-color: #0747A6; }

#taskList li.completed .actions .complete-btn { /* Undo button */
    background-color: #FFAB00; color: #172B4D;
}
#taskList li.completed .actions .complete-btn:hover { background-color: #FFC400; }

#taskList li .actions .edit-btn { /* .button.edit-btn - use subtle style */
    background-color: transparent; color: #42526E;
}
#taskList li .actions .edit-btn:hover { background-color: #091e420f; color: #091E42; }

#taskList li .actions .delete-btn { /* .button.delete-btn - use subtle danger style */
    background-color: transparent; color: #DE350B;
}
#taskList li .actions .delete-btn:hover { background-color: #FFEBE6; color: #BF2600; }


/* --- STYLING FOR TASK EDIT MODE --- */
#taskList li.editing {
    background-color: #F4F5F7; /* N20A - same as hover for consistency */
    /* padding will be inherited or can be adjusted */
}
#taskList li.editing .task-content,
#taskList li.editing .priority-indicator { display: none; }

/* Edit mode inputs inherit from common input styles defined earlier */
#taskList li.editing .edit-task-input,
#taskList li.editing .edit-priority-select,
#taskList li.editing .edit-due-date-input {
    width: 100%;
    margin-bottom: 12px; /* Space between edit inputs */
}

#taskList li.editing .actions { /* Container for Save/Cancel */
    width: 100%;
    justify-content: flex-end;
    padding-top: 4px; /* Align with bottom of last input */
    gap: 8px; /* Space between Save and Cancel */
}
/* Save button should have .button and .button-primary */
/* Cancel button should have .button and .button-default */


/* --- ANIMATION CLASSES --- */
#taskList li.task-fade-enter {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
}
#taskList li.task-fade-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.25s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.25s cubic-bezier(0.215, 0.610, 0.355, 1);
}

#taskList li.task-fade-exit {
    opacity: 1;
    transform: translateX(0) scale(1);
}
#taskList li.task-fade-exit-active {
    opacity: 0;
    transform: translateX(15px) scale(0.97);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

#taskList li.task-status-changed.completed {
    animation: highlight-complete 0.5s ease-out;
}
#taskList li.task-status-changed.pending {
    animation: highlight-pending 0.5s ease-out;
}
@keyframes highlight-complete {
    0% { background-color: #E3FCEF; } /* G50 */
    100% { background-color: #FFFFFF; } /* Revert to base or hover state if applicable */
}
@keyframes highlight-pending {
    0% { background-color: #DEEBFF; } /* B50 */
    100% { background-color: #FFFFFF; }
}

/* --- EMPTY STATE MESSAGE --- */
.empty-state-message, #noTasksMessage {
    text-align: center;
    color: #5E6C84; /* N200 */
    padding: 48px 24px; /* More prominent padding */
    font-size: 1rem;
    line-height: 1.5;
}
.empty-state-message p { margin: 0; }

/* style.css */

/* === MODAL STYLING === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 30, 66, 0.54); /* Atlassian N900 with alpha for overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it's above other content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.modal-card {
    background-color: #FFFFFF;
    border-radius: 3px; /* Atlassian standard radius */
    box-shadow: 0px 12px 24px -6px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31); /* Atlassian elevation for modals */
    width: 100%;
    max-width: 520px; /* Good width for a form modal */
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s ease-out;
}

.modal-overlay.show .modal-card {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #DFE1E6; /* N40 */
}

.modal-header h2 {
    font-size: 1.25rem; /* ~20px */
    font-weight: 600;
    color: #091E42; /* N900 */
    margin: 0;
}

.modal-close-btn { /* Uses .button and .button-subtle from general button styles */
    padding: 4px !important; /* Make it more compact */
    height: 28px !important;
    width: 28px !important;
    line-height: 1 !important;
    font-size: 1.5rem; /* For the '×' character */
    font-weight: 400; /* Lighter for close icon */
    color: #5E6C84; /* N200 */
}
.modal-close-btn:hover {
    background-color: #EBECF0; /* N30A */
    color: #172B4D; /* N800 */
}


.modal-body {
    padding: 20px 24px;
    flex-grow: 1;
    /* If content might overflow: */
    /* max-height: calc(80vh - 120px); */ /* Adjust based on header/footer height */
    /* overflow-y: auto; */
}

.modal-body .form-group {
    margin-bottom: 16px;
}

.modal-body .form-group label {
    display: block;
    font-size: 0.875rem; /* 14px */
    font-weight: 600; /* Bolder labels */
    color: #5E6C84; /* N200 */
    margin-bottom: 6px;
}

/* Inputs and Selects in Modal will use the common styles defined in your main CSS */
#editTaskModalForm input[type="text"],
#editTaskModalForm select,
#editTaskModalForm input[type="date"] {
    width: 100%; /* Full width within modal */
    /* They should inherit styles from the main CSS section:
       #addTaskForm input[type="text"], .edit-task-input etc.
       Ensure these common styles are general enough or duplicate necessary ones.
    */
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 24px;
    background-color: #F4F5F7; /* N20A - subtle footer background */
    border-top: 1px solid #DFE1E6; /* N40 */
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.modal-footer .button {
    margin-left: 8px;
}


/* --- MEDIA QUERIES FOR RESPONSIVENESS --- */
@media (max-width: 768px) { /* Tablets and smaller */
    .app-container { padding: 0 12px; margin-top:0; margin-bottom:0; }
    .app-header { padding: 20px 0 16px; }
    .app-header h1 { font-size: 1.625rem; }
    .app-main-content { padding: 16px; margin-bottom: 16px; border-radius:0; box-shadow:none; }
    .app-footer { padding: 16px 12px; }

    .controls-section { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
    #addTaskForm { flex-direction: column; align-items: stretch; gap: 12px; }
    #addTaskForm input[type="text"],
    #addTaskForm select#taskPriority,
    #addTaskForm input[type="date"],
    #addTaskForm button[type="submit"] { width: 100%; min-width: 0; }

    .sort-options-container { justify-content: flex-start; }
    #sortTasks { width: 100%; }
}

@media (max-width: 480px) { /* Small mobile screens */
    .app-header h1 { font-size: 1.375rem; }
    .app-main-content { padding: 12px; }

    #taskList li {
        padding: 10px 12px;
        padding-left: 30px; /* Adjust for priority indicator */
        flex-wrap: wrap; /* Allow actions to wrap below content */
    }
    #taskList li .task-content {
        width: 100%; /* Take full width initially */
        margin-right: 0;
        margin-bottom: 8px; /* Space if actions wrap */
    }
    #taskList li .actions {
        width: 100%; /* Take full width if wrapped */
        justify-content: flex-end; /* Align buttons to the right */
        margin-top: 4px;
    }
    #taskList li .actions .button {
        font-size: 0.8125rem; /* Consistent small button size */
        height: 30px; line-height: 28px;
        padding: 0 8px;
        margin-bottom: 4px; /* Spacing if buttons themselves wrap */
    }
    #taskList li .task-text { font-size: 0.875rem; }
    #taskList li .due-date { font-size: 0.75rem; }

    .message-area {
        width: calc(100% - 24px); /* Full width minus padding */
        left: 12px; right: 12px; /* Pin to sides */
        transform: translateX(0) translateY(-120px); /* Adjust for no translateX -50% */
    }
    .message-area.show {
        transform: translateY(0);
    }
}