/* CSS Variables for a more maintainable color palette */
:root {
    --navy-blue: #1A2E40;       /* Darkest navy for primary elements/text */
    --dark-grey: #34495E;       /* Dark grey for secondary text/headers */
    --medium-grey: #6C7A89;     /* Medium grey for borders/less important text */
    --light-grey: #EAECEF;      /* Light grey for backgrounds/hover states */
    --white: #FFFFFF;           /* Pure white for main backgrounds */
    --border-color: #D3DCE6;    /* Soft border color */
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.15);

    /* Status colors (keep vibrant for clarity) */
    --success-color: #28A745;   /* Green for success */
    --warning-color: #FFC107;   /* Yellow for warning */
    --danger-color: #DC3545;    /* Red for danger */
    --info-color: #17A2B8;      /* Cyan for info */

    /* New status cell background colors */
    --status-completed-bg: #e8f5e9; /* Light green */
    --status-in-progress-bg: #e0f2f7; /* Light cyan */
    --status-on-hold-bg: #fffde7; /* Light yellow */
    --status-overdue-bg: #fce4e6; /* Light red */
    --status-not-started-bg: #f0f4f7; /* Very light grey/blue */
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-grey);
    color: var(--navy-blue);
    line-height: 1.6;
    scroll-behavior: smooth;
    display: flex; /* Use flexbox for main layout */
    flex-direction: column; /* Stack h1 above main-wrapper */
    min-height: 100vh; /* Ensure body takes full viewport height */
}

h1 {
    color: var(--navy-blue);
    text-align: center;
    margin: 30px 0;
    font-size: 2.5em;
    font-weight: 700;
    width: 100%; /* Ensure h1 spans full width */
    flex-shrink: 0; /* Prevent h1 from shrinking */
}

.main-wrapper {
    display: flex;
    flex-grow: 1; /* Allow wrapper to fill remaining space */
    padding: 20px;
    gap: 20px; /* Space between side dashboard and main content */
    max-width: 1600px; /* Max width for the entire application */
    margin: 0 auto; /* Center the wrapper */
}


/* --- Side Dashboard Styles (Navigation) --- */
#sideDashboard {
    flex-shrink: 0; /* Prevent dashboard from shrinking */
    width: 280px; /* Fixed width for the sidebar */
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 20px var(--shadow-light);
    padding: 25px;
    overflow-y: auto; /* Enable scrolling for content within sidebar */
    position: sticky; /* Make it sticky */
    top: 20px; /* Stick to top with some margin */
    align-self: flex-start; /* Align to the start of the cross-axis */
    max-height: calc(100vh - 40px); /* Max height to fit viewport */
}

#sideDashboard h2 {
    color: var(--navy-blue);
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.dashboard-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-nav .nav-item {
    padding: 12px 18px;
    background-color: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    color: var(--dark-grey);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-nav .nav-item:hover {
    background-color: var(--light-grey);
    color: var(--navy-blue);
    transform: translateX(3px);
}

.dashboard-nav .nav-item.active {
    background-color: var(--navy-blue);
    color: var(--white);
    font-weight: 600;
    box-shadow: 0 3px 10px var(--shadow-medium);
    transform: translateX(0); /* Remove transform for active state */
}
.dashboard-nav .nav-item.active:hover { /* Override hover for active state */
    background-color: var(--navy-blue);
    color: var(--white);
}

/* --- Main Content Area (Dynamic Pages) --- */
.content-area {
    flex-grow: 1; /* Allows content area to fill remaining space */
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 20px var(--shadow-light);
    padding: 30px;
    min-width: 0; /* Allow content to shrink if needed */
}

.content-page {
    display: none; /* Hidden by default */
    animation: fadeIn 0.5s ease-out; /* Fade in animation */
}

.content-page.active {
    display: block; /* Show active page */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-page h2 {
    color: var(--navy-blue);
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* Styles for Analytical Data page (Dashboard stats) */
#dashboard {
    display: flex;
    flex-wrap: wrap; /* Allow stats to flow horizontally */
    gap: 15px;
    margin-bottom: 25px;
    justify-content: center; /* Center stats if not filling row */
}

.dashboard-stat {
    background-color: var(--light-grey);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 1 1 calc(33% - 15px); /* Three columns on larger screens */
    min-width: 180px; /* Minimum width for stats */
    max-width: 250px;
}

.dashboard-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-stat h3 {
    margin-top: 0;
    color: var(--dark-grey);
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 8px;
}

.dashboard-stat p {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--navy-blue);
    margin: 0;
}

/* Specific colors for dashboard stats */
.dashboard-stat.total p { color: var(--navy-blue); }
.dashboard-stat.completed p { color: var(--success-color); }
.dashboard-stat.in-progress p { color: var(--info-color); }
.dashboard-stat.on-hold p { color: var(--warning-color); }
.dashboard-stat.overdue p { color: var(--danger-color); }
/* NEW dashboard stat colors */
.dashboard-stat.in-house p { color: #6f42c1; } /* Purple */
.dashboard-stat.outsourced p { color: #fd7e14; } /* Orange */


/* Styles for Project Actions, Data Management, Import/Export, Filters, Dropdown Management */
.main-actions-container, .save-load-options-container, .import-export-options-container,
.filter-options-container, .dropdown-management-options-container {
    display: flex;
    flex-direction: column; /* Stack buttons/inputs vertically */
    gap: 15px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--light-grey);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
    max-width: 600px; /* Constrain width for better form presentation */
    margin: 0 auto; /* Center these sections */
}

.main-btn {
    padding: 12px 20px;
    border: 1px solid var(--navy-blue); /* Added border */
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    color: var(--white);
    width: 100%; /* Full width within container */
    display: inline-flex; /* For icon alignment */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between icon and text */
}

.main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px var(--shadow-medium);
    border-color: #0A1E2F; /* Match border to background on hover */
}

.add-project-btn-content {
     /* Specific style for add project btn on its own page */
    background-color: var(--navy-blue);
    margin-bottom: 25px;
    width: fit-content;
    display: block;
    padding: 15px 30px;
    font-size: 1.1em;
    margin-left: auto;
    margin-right: auto;
}
.add-project-btn-content:hover {
    background-color: #0A1E2F;
}

.sort-btn { background-color: var(--dark-grey); border-color: var(--dark-grey);}
.sort-btn:hover { background-color: #283747; border-color: #283747;}

.btn-save-load { background-color: var(--dark-grey); border-color: var(--dark-grey);}
.btn-save-load:hover { background-color: #283747; border-color: #283747;}

.btn-clear { background-color: var(--medium-grey); border-color: var(--medium-grey);}
.btn-clear:hover { background-color: #5A6268; border-color: #5A6268;}

.btn-action { background-color: var(--info-color); border-color: var(--info-color);}
.btn-action:hover { background-color: #138496; border-color: #138496;}

.filter-options-container input, .filter-options-container select,
.dropdown-management-options-container input, .dropdown-management-options-container select {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--navy-blue);
    background-color: var(--white);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.filter-options-container input:focus, .filter-options-container select:focus,
.dropdown-management-options-container input:focus, .dropdown-management-options-container select:focus {
    border-color: var(--navy-blue);
    box-shadow: 0 0 0 3px rgba(26, 46, 64, 0.2);
    outline: none;
}
.filter-options-container label, .dropdown-management-options-container label {
    font-size: 0.9em;
    color: var(--dark-grey);
    margin-top: 5px;
    margin-bottom: 2px;
    display: block; /* Ensure labels take full width */
    font-weight: 600;
}
#csvFileInput, #jsonFileInput { display: none; }

/* Project activities container */
.projects-container {
    margin-top: 0;
}

.project-section {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.project-section.project-completed {
    background-color: #f8fcfd; /* Lighter background for completed */
    border-color: #cee5d7; /* Softer green border */
    opacity: 0.85; /* Slightly faded */
    transition: all 0.5s ease-in-out;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03); /* Softer shadow */
}
.project-section.project-completed .project-header {
    background-color: #e6f3ea; /* Even lighter green header */
    color: var(--medium-grey);
}
.project-section.project-completed .project-header input {
    background-color: #e6f3ea;
    color: var(--medium-grey);
}
.project-section.project-completed .toggle-btn,
.project-section.project-completed .remove-project-btn {
    color: #999;
}
.project-section.project-completed .activityTable tbody tr {
    background-color: #fcfdfe !important; /* Even lighter background for rows */
}
.project-section.project-completed .activityTable tbody tr td {
    color: #888;
}
.project-completion-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dark-grey);
    font-size: 0.95em;
    font-weight: 500;
}
.project-completion-toggle input[type="checkbox"] {
    transform: scale(1.2);
}

.project-header {
    background-color: var(--light-grey);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--navy-blue);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

.project-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
    flex-wrap: wrap;
}
.project-header label {
    color: var(--dark-grey);
}

.project-header input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9em;
    width: 160px;
    box-sizing: border-box;
    color: var(--navy-blue);
    background-color: var(--white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.project-header input[type="text"]:focus {
    border-color: var(--navy-blue);
    box-shadow: 0 0 0 3px rgba(26, 46, 64, 0.2);
    outline: none;
}

.project-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toggle-btn, .remove-project-btn, .project-mic-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: var(--dark-grey);
    transition: transform 0.2s ease, color 0.2s ease;
}

.toggle-btn:hover, .remove-project-btn:hover, .project-mic-btn:hover {
    color: var(--navy-blue);
}

.toggle-btn.collapsed .fa-chevron-up {
    transform: rotate(180deg);
}

.remove-project-btn {
    color: var(--danger-color);
}
.remove-project-btn:hover {
    color: #C82333;
}
.project-mic-btn {
    color: var(--info-color); /* A distinct color for the project mic button */
}
.project-mic-btn.active-selection-mode {
    color: var(--warning-color); /* Yellow when in selection mode */
    animation: pulse 1s infinite alternate;
}

.project-content {
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

.table-container {
    overflow-x: auto;
    margin-top: 15px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table th, table td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    font-size: 0.85em;
    vertical-align: top;
}

table th {
    background-color: var(--light-grey);
    color: var(--dark-grey);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
table tbody tr:hover {
    background-color: #F3F6F9;
}

/* Specific column widths - keep these for general desktop layout */
table th:nth-child(1), table td:nth-child(1) { width: 4%; min-width: 40px; text-align: center;} /* SR. NO. */
table th:nth-child(2), table td:nth-child(2) { width: 9%; min-width: 80px; } /* DRAWING NO. */
table th:nth-child(3), table td:nth-child(3) { width: 11%; min-width: 100px; } /* ITEM DESCRIPTION */
table th:nth-child(4), table td:nth-child(4) { width: 10%; min-width: 90px; } /* ACTIVITY CATEGORY */
table th:nth-child(5), table td:nth-child(5) { width: 9%; min-width: 80px; } /* ACTIVITY TYPE (NEW) */
table th:nth-child(6), table td:nth-child(6) { width: 15%; min-width: 140px; } /* ACTIVITY DESCRIPTION (ADJUSTED FROM 5) */
table th:nth-child(7), table td:nth-child(7) { width: 9%; min-width: 80px; } /* RESPONSIBLE PERSON (ADJUSTED FROM 6) */
table th:nth-child(8), table td:nth-child(8) { width: 9%; min-width: 80px; } /* FINAL AUTHORITY (ADJUSTED FROM 7) */
table th:nth-child(9), table td:nth-child(9) { width: 8%; min-width: 70px; } /* STATUS (ADJUSTED FROM 8) */
table th:nth-child(10), table td:nth-child(10) { width: 8%; min-width: 70px; } /* REQUIRED COMPLETION DATE (ADJUSTED FROM 9) */
table th:nth-child(11), table td:nth-child(11) { width: 8%; min-width: 70px; } /* ACTUAL COMPLETION DATE (ADJUSTED FROM 10) */
table th:nth-child(12), table td:nth-child(12) { width: 7%; min-width: 60px; text-align: center; } /* DAYS REMAINING/OVERDUE (ADJUSTED FROM 11) */
table th:nth-child(13), table td:nth-child(13) { width: 6%; min-width: 50px; text-align: center;} /* Actions (ADJUSTED FROM 12) */


table input[type="text"],
table select,
table input[type="date"] {
    width: calc(100% - 4px);
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 0.85em;
    color: var(--navy-blue);
    background-color: var(--white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

table input[type="text"]:focus,
table select:focus,
table input[type="date"]:focus {
    border-color: var(--navy-blue);
    box-shadow: 0 0 0 2px rgba(26, 46, 64, 0.2);
    outline: none;
}

input:invalid {
    border-color: var(--danger-color);
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.5);
}
.status-overdue {
    background-color: var(--status-overdue-bg) !important; /* Lighter red */
}
.status-overdue td {
    border-color: #ef9a9a !important;
}
.status-nearing-deadline {
    background-color: var(--status-on-hold-bg) !important; /* Lighter yellow */
}
.status-nearing-deadline td {
    border-color: #ffeb3b !important;
}
.status-completed-row { /* New class for row when status is COMPLETED */
    background-color: var(--status-completed-bg) !important; /* Lighter green */
}
.status-completed-row td {
    border-color: #a5d6a7 !important;
}

/* Specific background colors for status cells */
td .status-select.COMPLETED { background-color: var(--status-completed-bg); }
td .status-select.IN-PROGRESS { background-color: var(--status-in-progress-bg); }
td .status-select.ON-HOLD { background-color: var(--status-on-hold-bg); }
td .status-select.NOT-STARTED { background-color: var(--status-not-started-bg); }


.is-duplicate-input {
    border: 2px solid var(--danger-color) !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5) !important;
}
.is-duplicate-input::after {
    content: 'Duplicate!';
    color: var(--danger-color);
    font-size: 0.7em;
    display: block;
    margin-top: 2px;
}
.project-no-input.is-duplicate-input::after {
    content: 'Duplicate Project No!';
}
.date-validation-error {
    border: 2px solid var(--danger-color) !important;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5) !important;
}
.date-validation-error::after {
    content: 'Invalid Date Order!';
    color: var(--danger-color);
    font-size: 0.7em;
    display: block;
    margin-top: 2px;
}

/* Style for inputs in dictation selection mode */
.dictation-selectable {
    border: 2px dashed var(--info-color) !important;
    box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.3) !important;
    cursor: crosshair !important;
}


.add-row-btn {
    background-color: var(--dark-grey);
    color: white;
    padding: 9px 18px;
    border: 1px solid var(--dark-grey); /* Added border */
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex; /* Changed to inline-flex for icon */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    margin-top: 15px;
    width: fit-content;
}

.add-row-btn:hover {
    background-color: #283747;
    transform: translateY(-2px);
    border-color: #283747;
}
.add-row-btn i {
    font-size: 1em; /* Size for icon in add row button */
}

/* Styling for the icon-only action buttons in the table */
.delete-row-btn, .duplicate-row-btn {
    background-color: transparent; /* Transparent background */
    border: 1px solid; /* Border will be colored by specific class */
    padding: 5px; /* Smaller padding for compact icon */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-size: 0.9em; /* Base font size for icon */
    transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease, color 0.3s ease;
    display: inline-flex; /* Use flexbox to center icon */
    align-items: center;
    justify-content: center;
    width: 30px; /* Fixed width for square button */
    height: 30px; /* Fixed height for square button */
    margin: 2px; /* Small margin between buttons */
    box-sizing: border-box; /* Include padding and border in width/height */
}

.delete-row-btn {
    color: var(--danger-color); /* Icon color */
    border-color: var(--danger-color); /* Border color */
}
.delete-row-btn:hover {
    background-color: var(--danger-color);
    color: var(--white);
}
.duplicate-row-btn {
    color: var(--success-color); /* Icon color */
    border-color: var(--success-color); /* Border color */
}
.duplicate-row-btn:hover {
    background-color: var(--success-color);
    color: var(--white);
}

/* Ensure Font Awesome icons within buttons are sized correctly */
.delete-row-btn i, .duplicate-row-btn i {
    font-size: 1.2em; /* Slightly larger icon */
    pointer-events: none; /* Allows click events to pass through to the button */
}

.dropdown-management-options-container label {
    text-align: left;
    margin-top: 10px;
    font-weight: 600;
}

.manage-option-btn {
    background-color: var(--dark-grey);
    color: white;
    padding: 10px 18px;
    border: 1px solid var(--dark-grey); /* Added border */
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}
.manage-option-btn.remove {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}
.manage-option-btn.remove:hover {
    background-color: #C82333;
    transform: translateY(-2px);
}
.manage-option-btn:hover {
    background-color: #283747;
    transform: translateY(-2px);
}

/* Auto-save toggle styling */
.auto-save-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    font-weight: 500;
    color: var(--dark-grey);
    justify-content: center;
}
.auto-save-toggle-container input[type="checkbox"] {
    transform: scale(1.2);
    cursor: pointer;
}
#save-status-message {
    margin-top: 10px;
    padding: 8px;
    background-color: #d4edda; /* Light green for success */
    border: 1px solid #28a745;
    border-radius: 5px;
    color: #155724;
    font-size: 0.85em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#save-status-message.show {
    opacity: 1;
}

/* Collapsible filter section styling */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}
.filter-header h2 {
    margin: 0;
    padding: 0;
    border-bottom: none; /* Override content-page h2 border */
}
.filter-header .toggle-btn {
    font-size: 1.5em;
}
.filter-content {
    display: block; /* Default to open */
    transition: all 0.3s ease-out;
    overflow: hidden;
}
.filter-content.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
}


/* Responsive Adjustments */
@media (max-width: 1200px) {
    .main-wrapper {
        flex-direction: column; /* Stack dashboard and content vertically */
        padding: 15px;
        gap: 15px;
    }
    #sideDashboard {
        position: static; /* Remove sticky position */
        width: auto; /* Allow it to take full width */
        max-height: none; /* Remove max height constraint */
        margin-bottom: 20px;
    }
    #sideDashboard h2 {
        text-align: left; /* Align title to left when stacked */
    }
    .dashboard-nav {
        flex-direction: row; /* Horizontal for small screens */
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .dashboard-nav .nav-item {
        flex: 1 1 auto;
        max-width: 200px; /* Limit nav item width */
    }
    #dashboard {
        flex-direction: row; /* Allow stats to flow horizontally */
        flex-wrap: wrap; /* Wrap stats if not enough space */
        justify-content: center;
        gap: 10px;
    }
    .dashboard-stat {
        flex: 1 1 calc(50% - 10px); /* Two columns on smaller screens */
        min-width: 150px;
    }
    .main-actions-container, .save-load-options-container, .import-export-options-container,
    .filter-options-container, .dropdown-management-options-container {
        max-width: 100%;
        padding: 15px;
    }
    .main-btn {
        width: auto; /* Allow buttons to size based on content */
        flex-grow: 1; /* Allow them to grow */
        max-width: 250px; /* Max width for buttons */
    }
    .filter-options-container, .dropdown-management-options-container {
        flex-direction: row; /* Arrange filter/dropdown controls horizontally */
        flex-wrap: wrap;
        justify-content: center;
    }
    .filter-options-container label, .dropdown-management-options-container label {
        width: 100%;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
    }
    .content-area {
        padding: 20px;
    }
    table th, table td {
        padding: 6px 8px;
        font-size: 0.8em;
    }
    table {
        table-layout: auto; /* Allow content to dictate width for better responsiveness */
    }
    table th:nth-child(1), table td:nth-child(1) { width: auto; min-width: 40px; }
    table th:nth-child(2), table td:nth-child(2) { width: auto; min-width: 80px; }
    table th:nth-child(3), table td:nth-child(3) { width: auto; min-width: 100px; }
    table th:nth-child(4), table td:nth-child(4) { width: auto; min-width: 90px; }
    table th:nth-child(5), table td:nth-child(5) { width: auto; min-width: 80px; } /* Activity Type */
    table th:nth-child(6), table td:nth-child(6) { width: auto; min-width: 140px; } /* Activity Description */
    table th:nth-child(7), table td:nth-child(7) { width: auto; min-width: 80px; } /* Responsible Person */
    table th:nth-child(8), table td:nth-child(8) { width: auto; min-width: 80px; } /* Final Authority */
    table th:nth-child(9), table td:nth-child(9) { width: auto; min-width: 70px; } /* Status */
    table th:nth-child(10), table td:nth-child(10) { width: auto; min-width: 70px; } /* Required Completion Date */
    table th:nth-child(11), table td:nth-child(11) { width: auto; min-width: 70px; } /* Actual Completion Date */
    table th:nth-child(12), table td:nth-child(12) { width: auto; min-width: 60px; } /* Days Remaining/Overdue */
    table th:nth-child(13), table td:nth-child(13) { width: auto; min-width: 70px; } /* Actions */
}

@media (max-width: 768px) {
    h1 {
        font-size: 2em;
        margin: 20px 0;
    }
    .main-wrapper {
        padding: 10px;
        gap: 10px;
    }
    #sideDashboard {
        padding: 15px;
    }
    .dashboard-nav .nav-item {
        font-size: 0.9em;
        padding: 10px 15px;
    }
    .dashboard-stat {
        flex: 1 1 calc(100% - 10px); /* Single column on smallest screens */
    }
    .main-actions-container, .save-load-options-container, .import-export-options-container,
    .filter-options-container, .dropdown-management-options-container {
        gap: 10px;
    }
    .main-btn, .filter-options-container input, .filter-options-container select,
    .dropdown-management-options-container input, .dropdown-management-options-container select,
    .manage-option-btn {
        max-width: 100%;
    }
    .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 15px;
    }
    .project-header input[type="text"] {
        width: 100%;
    }
    .project-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .project-content {
        padding: 15px;
    }
    .delete-row-btn, .duplicate-row-btn {
        margin-right: 0;
        width: 45%; /* Adjust width for two buttons side-by-side */
        margin-bottom: 5px;
    }
    table td:nth-child(13) {
        display: flex;
        flex-direction: row; /* Arrange buttons horizontally */
        flex-wrap: wrap;
        justify-content: space-around; /* Space them out */
        gap: 5px; /* Gap between buttons */
    }
}

/* Print Specific Styles for PDF Export */
@media print {
    body {
        background-color: #fff;
        padding: 0;
        display: block; /* Override flex for printing */
    }
    h1 {
        text-align: center;
        margin-top: 0;
        padding-top: 20px;
        color: #000; /* Print black for readability */
        font-size: 2em;
    }
    .main-wrapper {
        flex-direction: column;
        padding: 0;
        gap: 0;
        max-width: 100%;
    }
    #sideDashboard,
    .content-page:not(.print-active), /* Hide pages not meant for print, use specific class for current view */
    .main-btn, .add-row-btn, .delete-row-btn, .duplicate-row-btn,
    .project-actions, .project-completion-toggle,
    .dashboard-nav, .microphone-btn, .project-mic-btn,
    .auto-save-toggle-container, #save-status-message, .filter-header .toggle-btn { /* Hide microphone buttons for print */
        display: none !important; /* Hide UI elements not relevant for print */
    }
    .content-area {
        box-shadow: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        max-width: 100%;
        background-color: #fff;
    }
    .content-page.print-active { /* Show the specifically marked page for printing */
        display: block !important;
        padding: 20px; /* Add padding for print view */
    }
    .filter-content.collapsed { /* Ensure filter content is visible if print-active */
        height: auto !important;
        opacity: 1 !important;
        padding: initial !important;
    }
    .project-section {
        border: 1px solid #ccc;
        page-break-inside: avoid; /* Prevent breaking project sections across pages */
        margin-bottom: 20px;
        box-shadow: none;
    }
    .project-section.project-completed {
        background-color: #f0f4f7 !important; /* Keep a light background for completed */
        border-color: #c9d6df !important;
        opacity: 1 !important; /* Ensure full opacity for print */
    }
    .project-section.project-completed .project-header {
        background-color: #e2e8ed !important;
        color: #555 !important;
    }
    .project-header {
        background-color: #e9e9e9;
        border-bottom: 1px solid #ccc;
        color: #333;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }
    table th, table td {
        border: 1px solid #bbb;
        padding: 8px;
        font-size: 0.8em;
        color: #000; /* Ensure text is black for readability */
    }
    table input[type="text"], table select, table input[type="date"] {
        border: none; /* Hide input borders for cleaner print */
        padding: 0;
        width: auto;
        background-color: transparent;
    }
    .project-content {
        border-top: none;
    }
    /* Ensure the calculated days remaining is visible in print */
    td.days-remaining-cell {
        font-weight: bold;
        text-align: center;
        color: #000;
    }
    /* Ensure status colors are visible in print */
    td .status-select.COMPLETED { background-color: var(--status-completed-bg) !important; }
    td .status-select.IN-PROGRESS { background-color: var(--status-in-progress-bg) !important; }
    td .status-select.ON-HOLD { background-color: var(--status-on-hold-bg) !important; }
    td .status-select.NOT-STARTED { background-color: var(--status-not-started-bg) !important; }
    td.status-overdue { background-color: var(--status-overdue-bg) !important; }
    td.status-nearing-deadline { background-color: var(--status-on-hold-bg) !important; }
    td.status-completed-row { background-color: var(--status-completed-bg) !important; }
}

/* Styles for Microphone Button */
.input-with-mic {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between input and mic icon */
    position: relative; /* For positioning the mic icon */
}

.input-with-mic input[type="text"] {
    flex-grow: 1; /* Allow input to take available space */
}

/* ONLY for global search and dropdown management inputs */
.filter-options-container .input-with-mic input,
.dropdown-management-options-container .input-with-mic input {
    padding-right: 35px; /* Keep padding for inputs that still have mic buttons */
}

.microphone-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--medium-grey);
    font-size: 1.1em;
    transition: color 0.2s ease;
    padding: 5px; /* Add padding for easier clicking */
    border-radius: 50%; /* Make it round */
    position: absolute; /* Position relative to .input-with-mic */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Ensure it's above the input */
}

.microphone-btn:hover {
    color: var(--dark-grey);
}

.microphone-btn.listening {
    color: var(--danger-color); /* Red when listening */
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { transform: translateY(-50%) scale(1); opacity: 1; }
    to { transform: translateY(-50%) scale(1.1); opacity: 0.8; }
}

#mic-status-message {
    margin-top: 10px;
    padding: 10px;
    background-color: #ffe0b2; /* Light orange */
    border: 1px solid #ffb74d; /* Darker orange */
    border-radius: 8px;
    color: #e65100; /* Dark orange text */
    font-size: 0.9em;
    text-align: center;
    display: none; /* Hidden by default */
}
#mic-status-message.active {
    display: block;
}