/* styles.css */
/* Global Styles */
* {
box-sizing: border-box; /* Global: Ensures borders/padding don't add to widths */
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Modern font stack */
--bg-color: #fff;
--text-color: #1a1a1a;
--header-bg: #f8f9fa;
--task-bg: #007bff;
--task-text: #fff;
--border-color: #e0e0e0;
--nav-bg: #343a40;
--nav-border: #495057; /* New: Darker border for nav to blend better on dark bg */
--nav-text: #fff;
--button-bg: #007bff;
--button-text: #fff;
--button-hover: #0056b3;
--panel-bg: #fff;
--hover-bg: #f8f9fa;
background: var(--bg-color);
color: var(--text-color);
line-height: 1.4; /* Base line-height to prevent general bloat */
}
input[type="text"],
input[type="number"],
select {
padding: 0 8px;
border: 1px solid var(--border-color);
border-radius: 6px; /* Slightly more modern radius */
font-size: 14px;
background: var(--bg-color);
color: var(--text-color);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
height: 32px; /* Fixed height to align with buttons */
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
outline: none;
border-color: var(--button-bg);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); /* Softer focus ring */
}
/* Flatpickr Input Styling */
.flatpickr-input {
padding: 0 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: var(--bg-color);
color: var(--text-color);
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
height: 32px; /* Match input height */
}
.flatpickr-input:focus {
border-color: var(--button-bg);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
/* Layout Containers */
.container {
display: flex;
height: calc(100vh - 40px);
position: relative;
margin-top: 40px;
}
.nav-menu {
background: var(--nav-bg);
color: var(--nav-text);
height: 40px;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
border-bottom: 1px solid var(--nav-border); /* Use darker border to avoid "white box" effect on dark nav bg */
}
.nav-menu ul {
list-style: none;
margin: 0;
padding: 0 8px; /* Minimal side padding */
display: flex;
gap: 8px; /* Tight spacing between items */
flex: 1;
align-items: center;
justify-content: flex-start; /* Align left for typical nav feel */
}
.nav-menu li {
margin: 0; /* Ensure no extra margins on li */
}
.nav-menu li.auth-item {
margin-left: auto; /* Pushes the auth buttons to the right */
margin-right: 8px; /* Minimal space from edge */
}
/* Unified styling for nav links and buttons: transparent bg, no borders, seamless integration */
.nav-menu a,
.nav-menu button {
color: var(--nav-text);
text-decoration: none;
background: transparent; /* Explicit transparent to override any default button bg (white/box issue) */
border: none; /* No borders to blend seamlessly */
padding: 0 8px; /* Minimal padding */
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 14px; /* Match body font size */
font-weight: 500;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
margin: 0; /* Drop margins—gap on ul handles spacing now */
white-space: nowrap; /* Prevent wrap */
display: inline-block; /* Ensure consistent block-like behavior */
line-height: 40px; /* Match nav height for perfect centering */
height: 40px; /* Full nav height */
}
.nav-menu a:hover,
.nav-menu a.active,
.nav-menu button:hover {
background: var(--nav-border); /* Lighter variant for hover/active to pop without white contrast */
color: var(--nav-text);
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle depth, no harsh outline */
text-decoration: none; /* Ensure no underline on hover */
}
/* Specific for active link */
.nav-menu a.active {
background: var(--nav-border);
font-weight: 600;
}
/* User menu buttons (login/logout) get same treatment, no extra styles needed now */
/* Remove or ignore unused .user-menu styles if not in HTML */
.left-panel {
width: 200px;
border-right: 1px solid var(--border-color);
padding: 8px; /* Reduced padding */
overflow-y: auto;
z-index: 5;
background: var(--panel-bg);
}
.top-bar {
position: fixed;
top: 40px;
left: 200px;
right: 200px;
padding: 8px; /* Reduced padding */
display: flex;
gap: 8px; /* Tighter gap */
z-index: 10;
transition: right 0.3s;
align-items: center;
border-bottom: 1px solid var(--border-color);
background: var(--header-bg); /* Explicit bg to match header */
}
.top-bar label {
display: flex;
flex-direction: column;
font-size: 12px;
font-weight: 500;
gap: 4px; /* Tight label-input spacing */
}
.top-bar.expanded {
right: 0;
}
.gantt-container {
flex: 1;
margin-left: 0;
margin-right: 200px;
margin-top: 48px; /* Adjusted for top-bar height */
overflow-x: auto; /* Explicit for horizontal */
overflow-y: auto; /* Explicit for vertical */
height: calc(100vh - 88px); /* Adjusted for nav + top-bar */
transition: margin-right 0.3s;
background: var(--bg-color);
/* Ensure scrolling context for sticky */
position: relative;
}
.gantt-container.expanded {
margin-right: 0;
}
.gantt-body {
/* Key fix: Force width to content for horizontal scroll without flex collapse */
display: block; /* Switch from flex to block for better sticky in rows */
width: fit-content; /* Expands to full content width */
min-width: 100%; /* At least viewport width */
overflow: visible; /* NEW: Allow tall cells to overflow without clipping */
}
.right-panel {
width: 200px;
border-left: 1px solid var(--border-color);
padding: 8px; /* Reduced padding */
overflow-y: auto;
z-index: 5;
position: absolute;
right: 0;
top: 88px; /* Nav + top-bar */
height: calc(100vh - 88px);
transition: width 0.3s, padding: 0.3s, border-left: 0.3s;
background: var(--panel-bg);
}
.right-panel.collapsed {
width: 0;
padding: 0;
border-left: none;
overflow: hidden;
}
/* Gantt Chart Elements */
.header-row,
.gantt-row {
display: flex;
align-items: stretch; /* Explicit: Stretch children to match row height for merged spans */
border-bottom: 1px solid var(--border-color);
min-height: 30px; /* Fallback min */
height: auto; /* Allow growth for merged */
position: relative; /* Provide context for sticky */
/* Ensure row expands fully */
min-width: fit-content;
width: fit-content;
background-clip: border-box; /* Clip backgrounds to border box to avoid bleed */
overflow: visible; /* Prevent clipping of overflowing tall cells */
}
#daysRow {
display: flex;
flex: 1;
}
/* Header user-col sticky to match body */
.gantt-header .user-col {
flex: 0 0 200px;
border: 1px solid var(--border-color);
border-right: 2px solid var(--border-color); /* Thicker right border to mask bleed */
padding: 0;
background: var(--header-bg) !important;
position: sticky;
left: 0;
z-index: 15;
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Subtle right shadow to separate from scrolling content */
will-change: transform;
transform: translateZ(0);
height: 30px; /* Fixed for header */
line-height: 30px; /* Center text vertically */
text-align: center;
}
.user-col {
flex: 0 0 200px; /* Explicit: no grow/shrink, basis 200px - key for sticky in flex */
border: 1px solid var(--border-color);
border-right: 2px solid var(--border-color); /* Thicker right border to mask bleed */
padding: 0;
font-weight: 500;
background: var(--panel-bg) !important; /* Force explicit bg to prevent transparent fallback */
display: flex;
align-items: center; /* Center text vertically */
justify-content: center; /* Center horizontally */
position: sticky; /* Pins it during horizontal scroll */
left: 0; /* Anchors to left edge */
z-index: 15 !important; /* Higher z-index to prevent overlap peeking */
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Subtle right shadow to separate from scrolling content */
height: 30px; /* Fixed height for normal rows - JS overrides for merged */
line-height: 30px; /* Matches height for perfect vertical centering of single-line text */
/* Performance boost for sticky */
will-change: transform;
transform: translateZ(0);
text-align: center;
}
.day-cell {
flex: 24 0 auto; /* Grow for 24 hours, no shrink */
border: 1px solid var(--border-color);
padding: 0;
text-align: center;
font-weight: 500;
background: var(--header-bg);
display: flex;
align-items: center;
justify-content: center;
min-width: 480px; /* 20px/hour * 24, adjust based on min cell width */
}
.hour-label-cell {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
padding: 0;
background: inherit;
color: var(--text-color);
border-right: 1px solid var(--border-color);
height: 30px;
line-height: 30px;
text-align: center;
}
.timezone-row {
background: var(--header-bg);
font-weight: 500;
}
.gantt-cell {
border-right: 1px solid var(--border-color);
cursor: pointer;
position: relative;
flex: 1 0 auto;
padding: 0;
background: var(--bg-color);
transition: background 0.2s ease;
min-width: 20px; /* Base min width, scales with zoom */
height: 100%; /* Stretch to fill timeline height - key for merged spans */
}
.gantt-row .timeline .gantt-cell:first-of-type {
border-left: 1px solid var(--border-color);
}
.gantt-cell:hover {
background: var(--hover-bg);
}
.task {
position: absolute;
background: var(--task-bg);
color: var(--task-text);
height: 100%;
z-index: 5;
padding: 0 4px; /* Minimal padding */
font-size: 11px;
font-weight: 500;
border-radius: 4px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box; /* Includes padding/borders in width */
transform: translateX(-0.5px); /* Subtle left nudge for border alignment */
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}
.local-dates-row {
background: var(--header-bg); /* Matches gantt-row for seamless flow */
height: 30px; /* Lock to exact gantt-row height—no auto bloat */
border-bottom: 2px solid var(--button-bg); /* Strong contrast line: theme primary, thicker for "strong" pop */
display: flex; /* Ensure full-row alignment */
}
.local-dates-row .timeline {
height: 100%; /* Stretch to row—no gaps */
border-left: 1px solid var(--border-color); /* Mirror first gantt-cell left border for continuity */
}
.local-dates-row .user-col {
background: var(--header-bg); /* Sync bg */
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
font-weight: 600; /* Bolder for TZ label pop */
border-right: 2px solid var(--border-color); /* Thicker right to match user-col bleed mask */
text-transform: uppercase; /* Optional: Compact/emphatic TZ codes (e.g., "AEST") */
letter-spacing: 0.5px; /* Subtle emphasis without width creep */
padding: 0;
line-height: 30px;
text-align: center;
}
.local-day {
position: absolute;
background: var(--header-bg); /* Exact match to row—no tint shift */
color: var(--text-color);
height: 100%;
z-index: 4;
padding: 0 4px; /* Minimal padding */
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
box-sizing: border-box;
font-size: 12px; /* Slightly smaller than hours for hierarchy */
text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* Micro depth for contrast if needed */
}
.local-dates-row .dummy-cell {
height: 100%; /* Full stretch—no 30px fixed, inherits row */
border-right: 1px solid var(--border-color);
cursor: default;
position: relative;
flex: 1 0 auto;
padding: 0;
background: var(--header-bg); /* Sync to prevent seams */
box-sizing: border-box; /* Borders inside width */
min-width: 20px; /* Match gantt-cell min */
}
.local-dates-row .timeline .dummy-cell:first-of-type {
border-left: none; /* No double-left with timeline border */
}
.local-dates-row .dummy-cell:hover {
background: none; /* No hover disruption */
}
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px); /* Modern blur */
align-items: center;
justify-content: center;
}
.modal-content {
background: var(--panel-bg);
padding: 16px; /* Reduced padding */
width: 320px; /* Slightly narrower */
color: var(--text-color);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Deeper shadow */
border: 1px solid var(--border-color);
}
.close,
.close-options {
float: right;
cursor: pointer;
font-size: 24px;
font-weight: bold;
color: #6c757d;
transition: color 0.2s ease;
padding: 0;
margin: -8px -8px 0 0; /* Offset to top-right corner */
}
.close:hover,
.close-options:hover {
color: var(--text-color);
}
form {
display: flex;
flex-direction: column;
gap: 8px; /* Tighter gap */
}
form label {
font-size: 14px;
font-weight: 500;
display: flex;
flex-direction: column;
gap: 4px; /* Tight spacing */
}
ul,
#tasksList {
list-style: none;
padding: 0;
margin: 0;
}
#userList li,
#tasksList > div {
margin: 4px 0; /* Minimal vertical spacing */
padding: 8px; /* Reduced internal padding */
background: var(--header-bg);
border-radius: 6px;
border: 1px solid var(--border-color);
}
.gantt-header {
position: sticky;
top: 0;
background: var(--bg-color);
z-index: 5;
border-bottom: 1px solid var(--border-color);
/* Mirror user-col sticky for header alignment */
display: flex;
width: fit-content;
min-width: 100%;
}
.timeline {
display: flex;
flex: 1 0 auto; /* Updated: grow yes, shrink no, basis auto - prevents unwanted shrinking during scroll */
position: relative;
z-index: 1; /* Low z-index to stay behind sticky user-col */
min-width: 0; /* Allow flex shrinking if needed, but content dictates width */
/* Force expansion for many cells/days */
width: fit-content;
height: auto; /* Lets it grow with row for merged blocks (overrides 100% if needed) */
align-items: stretch; /* NEW: Stretch child cells (gantt-cells) to full timeline height for merged rows */
}
button {
padding: 0 12px;
background: var(--button-bg);
color: var(--button-text);
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease, transform 0.1s ease;
height: 32px; /* Fixed height to align with inputs */
line-height: 32px;
}
/* ... (rest unchanged) */
button:hover:not(:disabled) {
background: var(--button-hover);
transform: translateY(-1px); /* Subtle lift */
}
button:disabled {
background: #6c757d;
cursor: not-allowed;
transform: none;
}
/* Flatpickr Calendar Styling (Base) */
.flatpickr-calendar {
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: inherit;
padding: 8px; /* Reduced if needed, but Flatpickr internal */
}
.flatpickr-calendar .flatpickr-current-month {
background: var(--header-bg);
color: var(--text-color);
border-bottom: 1px solid var(--border-color);
padding: 4px 0; /* Trim if bloated */
}
.flatpickr-calendar .flatpickr-day {
padding: 0;
margin: 2px; /* Tighten grid */
height: 32px;
line-height: 32px;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
background: var(--task-bg);
border-color: var(--task-bg);
color: var(--task-text);
}
.flatpickr-calendar .flatpickr-day:hover {
background: var(--hover-bg);
}
.flatpickr-calendar .flatpickr-day.disabled,
.flatpickr-calendar .flatpickr-day.disabled:hover {
color: #adb5bd;
}
/* Sub-rows for overlaps */
.sub-row-0 {
border-bottom: none !important; /* Suppress entire row bottom for merged block */
height: auto !important; /* Allow row to grow with tall cell */
padding: 0;
margin: 0;
}
.sub-row-0 .user-col.merged-user-col {
border-bottom: none !important; /* Seamless merge - already there, but !important for flex conflicts */
border-right: 2px solid var(--border-color); /* Keep right border for separation */
line-height: 1.4; /* Slightly looser for tall merged to avoid cramped text */
padding: 0;
}
.sub-row-0 .gantt-cell {
height: 100% !important; /* Fill full merged row height for alignment and sticky pinning */
}
.empty-user-col {
flex: 0 0 200px; /* Match .user-col for consistent width/sticky */
background: inherit !important; /* Let user-block tint flow through */
border: 1px solid transparent; /* Invisible borders overall for merge */
border-top: none !important; /* No top border to avoid cutting merged cell */
border-right: 2px solid var(--border-color); /* Thicker right border to mask bleed */
border-bottom: inherit; /* Let the row's border handle the bottom */
padding: 0;
position: sticky;
left: 0;
z-index: 15 !important; /* Match user-col z-index */
display: flex;
align-items: center;
justify-content: center;
height: 30px; /* Fixed for sub-rows */
line-height: 30px; /* Center any placeholder */
will-change: transform;
transform: translateZ(0);
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Subtle right shadow to separate from scrolling content */
text-align: center;
}
.no-bottom-border {
border-bottom: none !important; /* Suppress row border for inner sub-rows (no lines between merges) */
}
.no-top-border {
border-top: none; /* If you ever add top borders to rows, suppress for sub-rows */
}
/* Ensure merged cell centers fully (reinforce flex for tall spans) */
.merged-user-col {
border-bottom: none !important; /* Double-down on no bottom */
border-top: 1px solid var(--border-color); /* Keep top for user separation */
display: flex !important;
align-items: center !important; /* Vertical center across full height */
justify-content: center !important; /* Horizontal center */
text-align: center; /* Fallback for non-flex text */
font-weight: 500;
z-index: 16; /* Slightly higher to stay above any row lines */
position: sticky !important; /* Restore sticky for merged rows */
left: 0 !important; /* Pin to left edge */
padding: 0;
line-height: 1.4; /* Adaptive for tall height */
/* Inherit other sticky enhancers from .user-col */
will-change: transform;
transform: translateZ(0);
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}
/* ... (rest unchanged) */
.gantt-row.sub-row-0 .timeline {
border-bottom: none;
}
/* User Block Alternating Colors - Ensure they apply unbroken to merged blocks */
.user-block-0 .user-col,
.user-block-0 .gantt-cell,
.user-block-0 .empty-user-col,
.user-block-0 .merged-user-col {
background-color: #f2f8ff !important; /* Solid light blue tint (blended rgba on white) */
}
.user-block-1 .user-col,
.user-block-1 .gantt-cell,
.user-block-1 .empty-user-col,
.user-block-1 .merged-user-col {
background-color: #f7f8f8 !important; /* Solid light gray tint (blended rgba on white) */
}
/* Ensure empty cols still merge seamlessly */
.empty-user-col {
background-color: inherit; /* Fallback, but user-block overrides */
border: 1px solid transparent; /* Invisible border for consistent width */
border-right: 2px solid var(--border-color); /* Thicker right border to mask bleed */
padding: 0;
}
/* Enhanced Fix: Better Visual Separation (Optional but included for completeness) */
.no-bottom-border .user-col,
.no-bottom-border .empty-user-col {
border-bottom: none; /* Already there, but reinforce for empties */
}
.user-block-0 .empty-user-col,
.user-block-1 .empty-user-col {
border-top: 1px solid rgba(224, 224, 224, 0.3); /* Faint separator if overlaps >1; adjust opacity for themes */
}
/* Modal button tweak */
#taskModal .modal-content button:not([type="submit"]) {
background: #28a745;
margin-top: 8px; /* Reduced margin */
padding: 0 12px;
height: 32px;
line-height: 32px;
}
#taskModal .modal-content button:not([type="submit"]):hover {
background: #218838;
}
/* Themes */
body.light {
--bg-color: #ffffff;
--text-color: #212529;
--header-bg: #f8f9fa;
--task-bg: #007bff;
--task-text: #ffffff;
--border-color: #dee2e6;
--nav-bg: #343a40;
--nav-border: #495057;
--nav-text: #ffffff;
--button-bg: #007bff;
--button-text: #ffffff;
--button-hover: #0056b3;
--panel-bg: #ffffff;
--hover-bg: #f8f9fa;
}
body.light .flatpickr-calendar {
border-color: #dee2e6;
}
body.light .flatpickr-calendar .flatpickr-current-month {
background: #f8f9fa;
}
body.light .flatpickr-calendar .flatpickr-day:hover {
background: #e9ecef;
}
body.light .user-block-0 .user-col,
body.light .user-block-0 .gantt-cell,
body.light .user-block-0 .empty-user-col,
body.light .user-block-0 .merged-user-col {
background-color: #e3f2fd !important;
}
body.light .user-block-1 .user-col,
body.light .user-block-1 .gantt-cell,
body.light .user-block-1 .empty-user-col,
body.light .user-block-1 .merged-user-col {
background-color: #f0f0f0 !important;
}
body.light .nav-menu a:hover,
body.light .nav-menu a.active,
body.light .nav-menu button:hover {
background: #495057; /* Consistent with global hover, matches banner */
color: var(--nav-text);
}
body.dark {
--bg-color: #121212;
--text-color: #e0e0e0;
--header-bg: #1e1e1e;
--task-bg: #3f51b5;
--task-text: #ffffff;
--border-color: #333333;
--nav-bg: #1e1e1e;
--nav-border: #2c2c2c;
--nav-text: #e0e0e0;
--button-bg: #3f51b5;
--button-text: #ffffff;
--button-hover: #303f9f;
--panel-bg: #1e1e1e;
--hover-bg: #2a2a2a;
}
body.dark input[type="text"],
body.dark input[type="number"],
body.dark select,
body.dark .flatpickr-input {
background: #2a2a2a;
color: #e0e0e0;
border-color: #444444;
padding: 0 8px;
height: 32px;
}
body.dark .flatpickr-calendar {
background: #2a2a2a;
border-color: #444444;
color: #e0e0e0;
padding: 8px;
}
body.dark .flatpickr-calendar .flatpickr-current-month {
background: #1e1e1e;
color: #e0e0e0;
border-bottom-color: #333333;
padding: 4px 0;
}
body.dark .flatpickr-calendar .flatpickr-day {
background: transparent;
color: #e0e0e0;
padding: 0;
margin: 2px;
height: 32px;
line-height: 32px;
border-color: transparent;
}
body.dark .flatpickr-calendar .flatpickr-day:hover {
background: #2a2a2a;
}
body.dark .flatpickr-calendar .flatpickr-day.selected,
body.dark .flatpickr-calendar .flatpickr-day.selected:hover {
background: #3f51b5;
border-color: #3f51b5;
color: #ffffff;
}
body.dark .flatpickr-calendar .flatpickr-day.disabled,
body.dark .flatpickr-calendar .flatpickr-day.disabled:hover {
color: #666666;
}
body.dark .user-col,
body.dark .empty-user-col,
body.dark .merged-user-col {
line-height: 30px; /* Maintain centering in dark theme */
padding: 0;
}
body.dark .sub-row-0 .user-col.merged-user-col,
body.dark .merged-user-col {
line-height: 1.4; /* Adaptive for tall */
padding: 0;
}
body.dark .user-block-0 .user-col,
body.dark .user-block-0 .gantt-cell,
body.dark .user-block-0 .empty-user-col,
body.dark .user-block-0 .merged-user-col {
background-color: #1a1f3a !important;
}
body.dark .user-block-1 .user-col,
body.dark .user-block-1 .gantt-cell,
body.dark .user-block-1 .empty-user-col,
body.dark .user-block-1 .merged-user-col {
background-color: #242424 !important;
}
body.dark .user-block-0 .empty-user-col,
body.dark .user-block-1 .empty-user-col {
border-top: 1px solid rgba(51, 51, 51, 0.5); /* Dark-themed faint separator for overlaps */
}
body.dark .nav-menu a:hover,
body.dark .nav-menu a.active,
body.dark .nav-menu button:hover {
background: #2c2c2c; /* Slightly lighter variant for dark theme */
color: var(--nav-text);
}
body.blue {
--bg-color: #f0f8ff;
--text-color: #0c4a6e;
--header-bg: #e3f2fd;
--task-bg: #0288d1;
--task-text: #ffffff;
--border-color: #b3d9ff;
--nav-bg: #0277bd;
--nav-border: #01579b;
--nav-text: #ffffff;
--button-bg: #0288d1;
--button-text: #ffffff;
--button-hover: #0277bd;
--panel-bg: #f0f8ff;
--hover-bg: #e1f5fe;
}
body.blue .flatpickr-calendar {
border-color: #b3d9ff;
}
body.blue .flatpickr-calendar .flatpickr-current-month {
background: #e3f2fd;
color: #0c4a6e;
}
body.blue .flatpickr-calendar .flatpickr-day:hover {
background: #bbdefb;
}
body.blue .user-block-0 .user-col,
body.blue .user-block-0 .gantt-cell,
body.blue .user-block-0 .empty-user-col,
body.blue .user-block-0 .merged-user-col {
background-color: #dceffb; /* Solid blue tint (blended) */
}
body.blue .user-block-1 .user-col,
body.blue .user-block-1 .gantt-cell,
body.blue .user-block-1 .empty-user-col,
body.blue .user-block-1 .merged-user-col {
background-color: #dff0fe; /* Solid lighter blue tint (blended) */
}
body.blue .nav-menu a:hover,
body.blue .nav-menu a.active,
body.blue .nav-menu button:hover {
background: #01579b; /* Slightly darker blue variant for emphasis */
color: var(--nav-text);
}
/* Night Cell Shading */
.gantt-cell.night-cell {
position: relative; /* For potential overlays if needed */
}
body.light .gantt-cell.night-cell {
background-color: rgba(0, 0, 0, 0.05); /* Subtle darken for light theme */
}
body.dark .gantt-cell.night-cell {
background-color: rgba(255, 255, 255, 0.05); /* Subtle lighten for dark theme */
}
body.blue .gantt-cell.night-cell {
background-color: rgba(0, 0, 0, 0.05); /* Subtle darken for blue theme */
}
body.light .hour-label-cell.night-cell {
background-color: rgba(0, 0, 0, 0.05);
}
body.dark .hour-label-cell.night-cell {
background-color: rgba(255, 255, 255, 0.05);
}
body.blue .hour-label-cell.night-cell {
background-color: rgba(0, 0, 0, 0.05);
}
/* Remove unused user-menu styles to clean up (add back if implementing dropdown) */
/* .user-menu, .user-icon, .user-dropdown { ... } - Commented out for now */
/* Enhanced Hover Effects */
.gantt-cell:hover {
    transform: scale(1.05); /* Swell effect, matching tasks */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 10; /* Higher to overlap cells/tasks */
    background: var(--hover-bg); /* Keep existing background change */
}

.task:hover {
    transform: scale(1.05); /* Swell effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 10; /* Higher to overlap cells/tasks */
}

/* Theme-specific adjustments for task hover */
body.light .task:hover,
body.blue .task:hover {
    background: #0056b3; /* Darker blue for highlight */
}

body.dark .task:hover {
    background: #5c6bc0; /* Lighter indigo for dark theme */
}

/* Theme-specific for cell hover (to match task style) */
body.light .gantt-cell:hover,
body.blue .gantt-cell:hover {
    background: #e9ecef; /* Slightly darker than --hover-bg for stronger feedback */
}

body.dark .gantt-cell:hover {
    background: #3a3a3a; /* Lighter gray for dark theme */
}