body {
    font-family: 'Inter', sans-serif;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
}

/* Prevent horizontal scroll in modal content */
.modal-content .grid {
    overflow-x: hidden;
}

.modal-content .md\:max-h-\[60vh\] {
    overflow-x: hidden;
}

/* Ensure no horizontal scroll in modal */
.modal-content * {
    box-sizing: border-box;
}

.modal-content .grid {
    max-width: 100%;
}

/* Prevent content from overflowing */
.modal-content .space-y-4 > * {
    max-width: 100%;
    overflow-wrap: break-word;
}

.modal-content input,
.modal-content textarea,
.modal-content select {
    max-width: 100%;
}

/* Prevent layout shifts from dependency indicators */
.dependency-indicator {
    min-width: 0;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

/* Ensure stable layout for task cards */
.task-card .flex.items-center.gap-2.mb-2 {
    min-height: 1.5rem;
    align-items: center;
}

/* Reserve space for dependency indicators */
.task-card .flex.items-center.gap-2.mb-2::after {
    content: '';
    min-width: 0;
    flex-shrink: 0;
}
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Save indicator styles */
.save-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #10b981;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}


/* Generate button transitions */
#generate-btn {
    transition: all 0.3s ease;
}

#generate-container {
    transition: all 0.3s ease;
}

/* Dropzone for attachments in event modal */
.dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
}
.dropzone.dragging {
    border-color: #0ea5e9;
    background: #f0f9ff;
}
.dropzone .dropzone-btn {
    font-weight: 600;
}

/* Note preview clamp and overflow handling */
.note-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.keyboard-navigation *:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
.keyboard-navigation button:focus,
.keyboard-navigation input:focus,
.keyboard-navigation select:focus,
.keyboard-navigation textarea:focus {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Enhanced Calendar Styling for Custom Mode */
.calendar-day-enhanced {
    min-height: 80px;
    padding: 8px 4px;
    border-radius: 8px;
    transition: all 200ms ease;
    cursor: pointer;
    position: relative;
}

.calendar-day-enhanced:hover {
    background-color: rgba(248, 250, 252, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.calendar-day-enhanced:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Calendar day states - ensure WFO/WFH colors show up */
.calendar-day-enhanced.bg-blue-500 {
    background-color: #3b82f6 !important;
    color: white !important;
}

.calendar-day-enhanced.bg-green-100 {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

.calendar-day-enhanced.bg-orange-500 {
    background-color: #f97316 !important;
    color: white !important;
}

.calendar-day-enhanced.bg-red-500 {
    background-color: #ef4444 !important;
    color: white !important;
}

.calendar-day-enhanced.weekend-cell {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.calendar-date-cell-enhanced {
    min-height: 100px;
    padding: 8px 4px;
    border-radius: 8px;
    transition: all 200ms ease;
    cursor: pointer;
    position: relative;
}

.calendar-date-cell-enhanced:hover {
    background-color: rgba(248, 250, 252, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.calendar-date-cell-enhanced:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.weekend-cell {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.weekend-cell:hover {
    background-color: #f1f5f9;
}





/* Enhanced grid spacing for modal */
.calendar-modal-grid {
    gap: 4px;
}

@media (min-width: 640px) {
    .calendar-modal-grid {
        gap: 6px;
    }
}

.calendar-modal-grid .calendar-date-cell-enhanced {
    min-height: 2.5rem;
    padding: 4px 2px;
}

@media (min-width: 640px) {
    .calendar-modal-grid .calendar-date-cell-enhanced {
        min-height: 3rem;
        padding: 6px 4px;
    }
}

/* Ensure calendar modal fits within viewport */
#calendar-modal .bg-white {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#calendar-modal #calendar-modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .text-3xl {
        font-size: 1.875rem;
    }
    .text-4xl {
        font-size: 2rem;
    }
    .p-6 {
        padding: 1rem;
    }
    .p-8 {
        padding: 1.5rem;
    }
    .max-w-2xl {
        max-width: 95vw;
    }
    .max-w-lg {
        max-width: 95vw;
    }
    .max-w-md {
        max-width: 95vw;
    }
}


/* Events Tab - Professional Card Styles */
.event-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    transition: box-shadow 0.2s ease, transform 0.05s ease, border-color 0.2s ease;
}
.event-item:hover {
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
    border-color: #cbd5e1;
}
.event-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
}

/* Accented icon backgrounds per event type */
.event-wfo .event-icon { background: #eff6ff; color: #1d4ed8; }
.event-wfh .event-icon { background: #ecfeff; color: #0891b2; }
.event-holiday .event-icon { background: #fff7ed; color: #ea580c; }
.event-leave .event-icon { background: #fef2f2; color: #dc2626; }
.event-weekend .event-icon { background: #f1f5f9; color: #475569; }

/* Compact badge styling */
.event-badge {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 9999px;
    border: 1px solid transparent;
    text-transform: uppercase;
    font-weight: 600;
}
.event-badge-wfo { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }
.event-badge-wfh { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.event-badge-holiday { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.event-badge-leave { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.event-badge-weekend { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* Small chips for event meta (notes, attachments) */
.event-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}
.chip svg { color: currentColor; }
.chip-note { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.chip-attach { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }

.chip.clickable { cursor: pointer; }
.chip.clickable:hover { filter: brightness(0.98); }
.chip.clickable:active { transform: translateY(0.5px); }

/* Tag chips row */
.tags-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tag-chip {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tag-chip-more { background: #e2e8f0; color: #0f172a; }

/* Calendar tags legend: limit to two rows with vertical scrolling */
#calendar-tags-legend .tags-row {
    max-height: 56px; /* ~2 rows */
    overflow-y: auto;
    padding-right: 4px;
}

/* Subtle right fade for scrollbar area on WebKit */
#calendar-tags-legend .tags-row::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
#calendar-tags-legend .tags-row::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

/* Active Filters (Events) */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f9ff;
    color: #075985;
    border: 1px solid #bae6fd;
    padding: 6px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}
.filter-chip .filter-key { opacity: 0.8; }
.filter-chip .filter-val { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip .filter-clear { background: transparent; border: none; color: inherit; cursor: pointer; font-weight: 700; }
.filter-chip .filter-clear:hover { opacity: 0.8; }

/* Event type filter buttons */
.event-type-btn {
    background: #e2e8f0;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    padding: 6px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}
.event-type-btn.active {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0284c7;
}
.event-type-clear {
    background: transparent;
    color: #334155;
    border: 1px dashed #cbd5e1;
    padding: 6px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

/* Task-specific styles */
.task-card {
    @apply transition-all duration-200;
}

.task-card.selected {
    @apply ring-2 ring-sky-500 bg-sky-50;
}

/* Task grid view styles */
.tasks-grid-view .task-card {
    @apply min-h-[120px];
}

.tasks-grid-view .task-card .task-thumbnail {
    @apply w-8 h-8;
}

.tasks-grid-view .task-card .task-title {
    @apply text-sm font-medium;
}

.tasks-grid-view .task-card .task-meta {
    @apply text-xs;
}

/* Task list view styles */
.tasks-list-view .task-card {
    @apply min-h-[80px];
}

.tasks-list-view .task-card .task-thumbnail {
    @apply w-10 h-10;
}

.tasks-list-view .task-card .task-title {
    @apply text-sm font-medium;
}

.tasks-list-view .task-card .task-meta {
    @apply text-xs;
}

.task-card:hover {
    @apply shadow-lg;
}

/* Task status badges */
.task-status-badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.task-status-todo {
    @apply bg-slate-100 text-slate-700;
}

.task-status-in-progress {
    @apply bg-blue-100 text-blue-700;
}

.task-status-in-review {
    @apply bg-yellow-100 text-yellow-700;
}

.task-status-done {
    @apply bg-green-100 text-green-700;
}

.task-status-blocked {
    @apply bg-red-100 text-red-700;
}

/* Task priority indicators */
.task-priority-low {
    @apply text-green-600;
}

.task-priority-medium {
    @apply text-yellow-600;
}

.task-priority-high {
    @apply text-orange-600;
}

.task-priority-critical {
    @apply text-red-600;
}

/* Task progress bar */
.task-progress-bar {
    @apply bg-slate-200 rounded-full h-2 transition-all duration-300;
}

.task-progress-fill {
    @apply bg-sky-500 h-2 rounded-full transition-all duration-300;
}

.task-progress-overdue {
    @apply bg-red-500;
}

/* Task dependencies */
.task-dependency-blocking {
    @apply border-l-4 border-red-400;
}

.task-dependency-waiting {
    @apply border-l-4 border-yellow-400;
}

/* Recurring task indicator */
.task-recurring {
    @apply relative;
}

.task-recurring::after {
    content: "🔄";
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
    background: white;
    border-radius: 50%;
    padding: 1px;
}

/* Task completion checkbox */
.task-completion-checkbox {
    @apply w-4 h-4 text-sky-600 bg-white border-slate-300 rounded focus:ring-sky-500 focus:ring-2;
}

/* Task activity log */
.task-activity-log {
    @apply max-h-32 overflow-y-auto border border-slate-200 rounded-md bg-slate-50 p-2;
}

.task-activity-item {
    @apply text-xs text-slate-600 border-b border-slate-200 pb-1 mb-1 last:border-b-0 last:mb-0;
}

.task-activity-timestamp {
    @apply font-mono text-slate-500;
}

.task-activity-action {
    @apply font-medium text-slate-800;
}

/* Task comments */
.task-comments {
    @apply space-y-2 max-h-32 overflow-y-auto;
}

.task-comment {
    @apply bg-slate-50 border border-slate-200 rounded-md p-2 text-sm;
}

.task-comment-timestamp {
    @apply text-xs text-slate-500 font-mono;
}

.task-comment-text {
    @apply text-slate-800 mt-1;
}

/* Task form enhancements */
.task-form-section {
    @apply space-y-4;
}

.task-form-row {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.task-form-field {
    @apply space-y-1;
}

.task-form-label {
    @apply block text-sm font-medium text-slate-700;
}

.task-form-input {
    @apply w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500;
}

.task-form-select {
    @apply w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500;
}

.task-form-textarea {
    @apply w-full p-2 border border-slate-300 rounded-md shadow-sm focus:ring-sky-500 focus:border-sky-500 resize-none;
}

/* Task list enhancements */
.task-list-item {
    @apply p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors cursor-pointer;
}

.task-list-item.selected {
    @apply border-sky-400 bg-sky-50;
}

.task-list-item:hover {
    @apply shadow-md;
}

/* Task thumbnail */
.task-thumbnail {
    @apply w-10 h-10 rounded bg-slate-200 flex items-center justify-center text-slate-500 text-xs;
}

/* Tab interface styling */
.modal-tab {
    @apply px-4 py-2 text-sm font-medium rounded-lg transition-colors;
}

.modal-tab.active {
    @apply bg-sky-100 text-sky-700 border border-sky-200;
}

.modal-tab.inactive {
    @apply text-slate-600 hover:text-slate-800 hover:bg-slate-100;
}

/* Scheduler Tab Layout States */
.scheduler-layout-container {
    transition: all 0.4s ease;
}

/* Initial State - Full width centered configuration */
#tab-content-scheduler.scheduler-initial-state .scheduler-layout-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

#tab-content-scheduler.scheduler-initial-state .scheduler-config-section {
    width: 100%;
    max-width: 600px;
}

#tab-content-scheduler.scheduler-initial-state .scheduler-results-section {
    display: none;
}

/* Generated State - 2-column grid layout */
#tab-content-scheduler.scheduler-generated-state .scheduler-layout-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

#tab-content-scheduler.scheduler-generated-state .scheduler-config-section {
    width: 100%;
}

#tab-content-scheduler.scheduler-generated-state .scheduler-results-section {
    display: block;
}

/* Welcome Section */
.scheduler-welcome-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.scheduler-welcome-content {
    max-width: 500px;
    margin: 0 auto;
}

.scheduler-welcome-icon {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scheduler-welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.scheduler-welcome-description {
    color: #475569;
    font-size: 1rem;
    line-height: 1.5;
}

/* Loading Overlay */
.scheduler-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: opacity 0.3s ease;
}

.scheduler-loading-overlay.hidden {
    display: none;
}

.scheduler-loading-content {
    text-align: center;
    color: white;
}

.scheduler-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(14, 165, 233, 0.3);
    border-top: 4px solid #0ea5e9;
    border-radius: 50%;
    animation: scheduler-spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes scheduler-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.scheduler-loading-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: white;
    margin: 0;
}

/* Transitions */
.scheduler-transition {
    transition: all 0.4s ease;
}

.scheduler-regeneration-transition {
    transition: all 0.15s ease;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    #tab-content-scheduler.scheduler-generated-state .scheduler-layout-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .scheduler-welcome-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .scheduler-welcome-title {
        font-size: 1.5rem;
    }
    
    .scheduler-welcome-description {
        font-size: 0.875rem;
    }
    
    #tab-content-scheduler.scheduler-initial-state .scheduler-layout-container {
        padding: 0 0.5rem;
    }
}

/* ===== PHASE 2: ENHANCED DEPENDENCY STYLES ===== */

/* Blocking Impact Section */
.blocking-impact-section {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.blocking-impact-section label {
    color: #475569;
    font-weight: 500;
}

#blocking-impact-display {
    margin-top: 0.5rem;
}

#toggle-blocking-details {
    transition: color 0.2s ease-in-out;
}

#toggle-blocking-details:hover {
    color: #0369a1;
}

#blocking-details {
    transition: all 0.3s ease-in-out;
}

#blocking-details.hidden {
    display: none;
}

/* Dependency Suggestions */
.dependency-suggestions {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
}

.dependency-suggestions label {
    color: #475569;
    font-weight: 500;
}

#dependency-suggestions-display {
    margin-top: 0.5rem;
}

.add-suggestion-dependency {
    transition: all 0.2s ease-in-out;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.add-suggestion-dependency:hover {
    background-color: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dependency Chain Tooltip */
.dependency-chain-tooltip {
    position: relative;
    cursor: help;
}

.dependency-chain-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e293b;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 1000;
    max-width: 200px;
    word-wrap: break-word;
    white-space: normal;
}

.dependency-chain-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Circular Dependency Error */
.circular-dependency-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.circular-dependency-error::before {
    content: "⚠️ ";
    margin-right: 0.5rem;
}

/* Enhanced dependency status badges */
.dependency-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.dependency-status-badge.completed {
    background-color: #dcfce7;
    color: #166534;
}

.dependency-status-badge.in-progress {
    background-color: #fef3c7;
    color: #92400e;
}

.dependency-status-badge.blocked {
    background-color: #fecaca;
    color: #dc2626;
}

.dependency-status-badge.not-started {
    background-color: #f3f4f6;
    color: #374151;
}

/* Critical path highlighting */
.critical-path-task {
    background-color: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding-left: 0.5rem;
}

.critical-path-task::before {
    content: "🔥 ";
    margin-right: 0.25rem;
}

/* Suggestion match score styling */
.suggestion-score {
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-weight: 600;
}

/* Responsive adjustments for Phase 2 features */
@media (max-width: 768px) {
    .blocking-impact-section,
    .dependency-suggestions {
        padding: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .dependency-chain-tooltip::after {
        max-width: 150px;
        font-size: 0.625rem;
    }
    
    .add-suggestion-dependency {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
}

/* ===== PROJECTS TAB STYLES ===== */

/* Projects View Switcher */
.projects-view-btn {
    @apply transition-all duration-200;
}

.projects-view-btn.active {
    @apply bg-sky-100 text-sky-700;
}

.projects-view-btn:not(.active) {
    @apply text-slate-600 hover:text-slate-800 hover:bg-slate-100;
}

/* Projects Canvas */
.projects-canvas-wrapper {
    @apply relative bg-slate-50 rounded-lg overflow-hidden;
    border: 1px solid #e2e8f0;
}

#projects-canvas {
    @apply w-full h-full cursor-grab;
    background-image: 
        radial-gradient(circle, #e2e8f0 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
}

#projects-canvas:active {
    @apply cursor-grabbing;
}

/* Projects Minimap */
#projects-minimap {
    @apply absolute top-4 right-4 w-48 h-32 bg-white border border-slate-300 rounded-lg shadow-lg;
    backdrop-filter: blur(8px);
}

#projects-minimap-canvas {
    @apply w-full h-full rounded-lg;
}

/* Projects Tree */
.tree-node {
    @apply transition-all duration-200;
}

.tree-node.selected {
    @apply ring-2 ring-sky-500 bg-sky-50;
}

.tree-node.dragging {
    @apply opacity-50 transform rotate-2;
}

.tree-node.drag-over {
    @apply ring-2 ring-blue-400 bg-blue-50;
}

.tree-expand-btn {
    @apply transition-transform duration-200;
}

.tree-expand-btn.expanded {
    @apply transform rotate-90;
}

.tree-action-btn {
    @apply opacity-0 transition-opacity duration-200;
}

.tree-node:hover .tree-action-btn {
    @apply opacity-100;
}

/* Projects Gantt */
.gantt-container {
    @apply relative;
}

.gantt-header {
    @apply sticky top-0 z-10 bg-white border-b border-slate-200;
}

.gantt-header-row {
    @apply flex;
}

.gantt-sidebar-header {
    @apply bg-slate-50 border-r border-slate-200 flex items-center;
}

.gantt-timeline-header {
    @apply flex overflow-x-auto;
}

.gantt-header-cell {
    @apply flex flex-col items-center justify-center p-2 border-r border-slate-200 bg-white;
    min-width: 30px;
}

.gantt-header-cell.today {
    @apply bg-sky-100 text-sky-700;
}

.gantt-header-cell.weekend {
    @apply bg-slate-50 text-slate-500;
}

.gantt-header-cell.current-week {
    @apply bg-blue-50 text-blue-700;
}

.gantt-header-cell.current-month {
    @apply bg-blue-50 text-blue-700;
}

.gantt-body {
    @apply relative;
}

.gantt-row {
    @apply flex border-b border-slate-100 hover:bg-slate-50 transition-colors;
    min-height: 40px;
}

.gantt-sidebar {
    @apply bg-white border-r border-slate-200 flex items-center;
}

.gantt-timeline {
    @apply relative flex-1 overflow-x-auto;
    min-height: 40px;
}

.gantt-bar {
    @apply absolute top-2 h-6 rounded-md cursor-pointer transition-all duration-200;
    min-width: 20px;
}

.gantt-bar:hover {
    @apply shadow-md transform scale-105;
}

.gantt-bar.selected {
    @apply ring-2 ring-sky-500 ring-offset-1;
}

.gantt-bar.project-bar {
    @apply h-8;
    background: linear-gradient(135deg, var(--project-color, #0ea5e9) 0%, var(--project-color-dark, #0284c7) 100%);
}

.gantt-bar.task-bar {
    @apply h-6;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
}

.gantt-bar.task-bar.completed {
    @apply bg-green-100 border-green-300;
}

.gantt-bar.task-bar.overdue {
    @apply bg-red-100 border-red-300;
}

.gantt-bar-content {
    @apply relative h-full flex items-center px-2 text-xs font-medium text-white overflow-hidden;
}

.gantt-bar-label {
    @apply truncate;
}

.gantt-bar-progress {
    @apply absolute top-0 left-0 h-full bg-white bg-opacity-30 transition-all duration-300;
}

/* Projects Side Panel */
#projects-side-panel {
    @apply fixed top-0 right-0 w-80 h-full bg-white border-l border-slate-200 shadow-xl transform translate-x-full transition-transform duration-300 z-50;
}

/* Project Modal Custom Classes */
.project-modal-hidden {
    display: none !important;
}

.project-modal-visible {
    display: flex !important;
}

#projects-side-panel.open {
    @apply translate-x-0;
}

/* Projects Bulk Actions Bar */
#projects-bulk-actions-bar {
    @apply fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-slate-900 text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-300;
    backdrop-filter: blur(8px);
}

#projects-bulk-actions-bar.hidden {
    @apply opacity-0 pointer-events-none transform -translate-x-1/2 translate-y-4;
}

/* Projects Toolbar */
.projects-toolbar {
    @apply flex items-center justify-between mb-4;
}

.projects-toolbar button {
    @apply p-2 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors;
}

.projects-toolbar button:hover {
    @apply transform scale-105;
}

/* Projects Search */
#projects-search {
    @apply px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition-all duration-200;
    min-width: 250px;
}

#projects-search:focus {
    @apply shadow-md;
}

/* Projects Filter */
#projects-filter-btn {
    @apply p-2 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors;
}

#projects-filter-btn.active {
    @apply bg-sky-100 text-sky-700;
}

/* Projects Grid Toggle */
#projects-grid-toggle.active {
    @apply bg-sky-100 text-sky-700;
}

/* Projects Minimap Toggle */
#projects-minimap-toggle.active {
    @apply bg-sky-100 text-sky-700;
}

/* Projects View Containers */
.projects-view-container {
    @apply transition-all duration-300;
}

.projects-view-container.hidden {
    @apply hidden;
}

/* Projects Empty States */
.projects-empty-state {
    @apply text-center py-12;
}

.projects-empty-state .empty-icon {
    @apply w-16 h-16 mx-auto mb-4 bg-slate-100 rounded-full flex items-center justify-center;
}

.projects-empty-state .empty-title {
    @apply text-lg font-medium text-slate-900 mb-2;
}

.projects-empty-state .empty-description {
    @apply text-slate-500 mb-6;
}

.projects-empty-state .empty-action {
    @apply bg-sky-600 text-white px-4 py-2 rounded-lg hover:bg-sky-700 transition-colors;
}

/* Projects Loading States */
.projects-loading {
    @apply flex items-center justify-center py-12;
}

.projects-loading-spinner {
    @apply w-8 h-8 border-4 border-slate-200 border-t-sky-600 rounded-full animate-spin;
}

/* Projects Animations */
@keyframes projects-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes projects-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.projects-fade-in {
    animation: projects-fade-in 0.3s ease-out;
}

.projects-slide-in {
    animation: projects-slide-in 0.3s ease-out;
}

/* Projects Responsive */
@media (max-width: 1024px) {
    #projects-side-panel {
        @apply w-full;
    }
    
    .gantt-sidebar {
        @apply w-32;
    }
    
    .projects-toolbar {
        @apply flex-col gap-3 items-stretch;
    }
    
    .projects-toolbar > div {
        @apply flex-wrap gap-2;
    }
}

@media (max-width: 768px) {
    .projects-view-btn {
        @apply text-xs px-2 py-1;
    }
    
    .projects-view-btn ion-icon {
        @apply hidden;
    }
    
    .gantt-header-cell {
        @apply text-xs p-1;
    }
    
    .gantt-bar {
        @apply h-4;
    }
    
    .gantt-bar-content {
        @apply text-xs px-1;
    }
    
    #projects-bulk-actions-bar {
        @apply bottom-2 left-2 right-2 transform-none;
    }
}

/* Projects Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .projects-canvas-wrapper {
        @apply bg-slate-900 border-slate-700;
    }
    
    .gantt-header-cell {
        @apply bg-slate-800 border-slate-700 text-slate-200;
    }
    
    .gantt-row {
        @apply border-slate-700 hover:bg-slate-800;
    }
    
    .gantt-sidebar {
        @apply bg-slate-800 border-slate-700;
    }
    
    .gantt-bar.task-bar {
        @apply bg-slate-700 border-slate-600;
    }
}

/* ===== CUSTOMIZE MODAL STYLES ===== */

/* Legend colors - ensure they show up */
#customize-month-modal .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#customize-month-modal .legend-color {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid;
}

#customize-month-modal .legend-color.wfo {
    background-color: #dbeafe;
    border-color: #93c5fd;
}

#customize-month-modal .legend-color.wfh {
    background-color: #dcfce7;
    border-color: #86efac;
}

#customize-month-modal .legend-color.holiday {
    background-color: #fed7aa;
    border-color: #fdba74;
}

#customize-month-modal .legend-color.leave {
    background-color: #fecaca;
    border-color: #f87171;
}

#customize-month-modal .legend-color.weekend {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* Customize Modal Calendar Grid */
.customize-calendar-day {
    @apply min-h-[60px] p-2 border border-slate-200 cursor-pointer transition-all duration-200 relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#customize-month-modal .customize-calendar-day:hover {
    @apply transform scale-105;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#customize-month-modal .customize-calendar-day.wfo:hover {
    background-color: #bfdbfe !important;
}

#customize-month-modal .customize-calendar-day.wfh:hover {
    background-color: #bbf7d0 !important;
}

#customize-month-modal .customize-calendar-day.weekend:hover {
    background-color: #e2e8f0 !important;
}

.customize-calendar-day:active {
    @apply transform scale-95;
}

/* Day states */
#customize-month-modal .customize-calendar-day.wfo {
    background-color: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}

#customize-month-modal .customize-calendar-day.wfh {
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

#customize-month-modal .customize-calendar-day.holiday {
    background-color: #fed7aa !important;
    border-color: #fdba74 !important;
    color: #c2410c !important;
}

#customize-month-modal .customize-calendar-day.leave {
    background-color: #fecaca !important;
    border-color: #f87171 !important;
    color: #dc2626 !important;
}

#customize-month-modal .customize-calendar-day.weekend {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}


.customize-calendar-day.disabled {
    @apply bg-slate-50 text-slate-400 cursor-not-allowed;
}

.customize-calendar-day.disabled:hover {
    @apply transform-none bg-slate-50;
    box-shadow: none;
}

/* Day number styling */
.customize-day-number {
    @apply text-sm font-medium;
}

.customize-day-label {
    @apply text-xs mt-1 font-medium;
}

/* Multi-select mode styling */
.customize-multi-select .customize-calendar-day {
    @apply cursor-crosshair;
}

.customize-multi-select .customize-calendar-day:hover {
    @apply bg-sky-50 border-sky-300;
}

/* Attendance progress bar colors */
.customize-attendance-good {
    background-color: #10b981 !important; /* green-500 */
}

.customize-attendance-warning {
    background-color: #f59e0b !important; /* amber-500 */
}

.customize-attendance-danger {
    background-color: #ef4444 !important; /* red-500 */
}

/* Bulk actions toolbar */

/* Customize modal responsive */
@media (max-width: 768px) {
    .customize-calendar-day {
        @apply min-h-[50px] p-1;
    }
    
    .customize-day-number {
        @apply text-xs;
    }
    
    .customize-day-label {
        @apply text-xs;
    }
    
    #customize-month-modal .modal-content {
        @apply max-w-full mx-2;
    }
}

/* Customize warning modal */
.customize-warning-icon {
    @apply w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center;
}

.customize-warning-actions {
    @apply flex gap-3 justify-end;
}

.customize-warning-actions button {
    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors;
}

.customize-warning-actions .btn-cancel {
    @apply text-slate-600 hover:text-slate-800;
}

.customize-warning-actions .btn-primary {
    @apply bg-sky-500 text-white hover:bg-sky-600;
}

.customize-warning-actions .btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600;
}

/* Customize button in scheduler/calendar */
.customize-month-btn {
    @apply px-3 py-1 text-xs font-medium rounded-md transition-colors;
    @apply bg-slate-100 text-slate-700 hover:bg-slate-200;
}

.customize-month-btn.custom-mode {
    @apply bg-blue-100 text-blue-700 hover:bg-blue-200;
}

/* Attendance percentage display */
.attendance-percentage {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.attendance-percentage.good {
    @apply bg-green-100 text-green-700;
}

.attendance-percentage.warning {
    @apply bg-amber-100 text-amber-700;
}

.attendance-percentage.danger {
    @apply bg-red-100 text-red-700;
}

/* Customize mode indicators */
.custom-mode-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700;
}

.optimized-mode-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700;
}

/* Kanban Board Styles */
#kanban-container {
    @apply w-full;
}

#kanban-board {
    @apply flex gap-4 overflow-x-auto pb-4;
    min-height: 500px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#kanban-board::-webkit-scrollbar {
    height: 8px;
}

#kanban-board::-webkit-scrollbar-track {
    @apply bg-slate-100 rounded;
}

#kanban-board::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded;
}

#kanban-board::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400;
}

.kanban-column {
    @apply flex flex-col;
    flex-shrink: 0;
    min-height: 400px;
    max-height: calc(100vh - 300px);
}

.kanban-column-header {
    @apply flex items-center justify-between p-3;
    @apply font-semibold text-sm;
    @apply rounded-t-lg;
    position: sticky;
    top: 0;
    z-index: 10;
}

.kanban-column-body {
    @apply flex-1 overflow-y-auto p-2;
    @apply rounded-b-lg;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.kanban-column-body::-webkit-scrollbar {
    width: 6px;
}

.kanban-column-body::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded;
}

.kanban-column-body::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400;
}

.kanban-column-body.drag-over {
    @apply bg-sky-100;
    @apply border-2 border-dashed border-sky-400;
}

.kanban-task-card {
    @apply bg-white border border-slate-200 rounded-lg;
    @apply shadow-sm;
    @apply transition-all duration-200;
    @apply cursor-grab;
    user-select: none;
}

.kanban-task-card:hover {
    @apply shadow-md;
    transform: translateY(-2px);
}

.kanban-task-card.dragging {
    @apply opacity-50;
    @apply cursor-grabbing;
    transform: rotate(2deg);
}

.kanban-task-card .task-checkbox {
    @apply w-4 h-4;
    @apply text-sky-600;
    @apply border-slate-300 rounded;
    @apply focus:ring-2 focus:ring-sky-500;
    cursor: pointer;
}

.kanban-task-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kanban Filters */
#kanban-filters {
    @apply bg-slate-50 rounded-lg border border-slate-200 p-4;
}

#kanban-filters select,
#kanban-filters input[type="date"] {
    @apply px-3 py-1 border border-slate-300 rounded-md text-sm;
    @apply focus:ring-2 focus:ring-sky-500 focus:border-sky-500;
}

#kanban-filters label {
    @apply text-sm font-medium text-slate-700;
}

/* Kanban Empty State */
#kanban-empty-state {
    @apply text-center py-12;
}

#kanban-empty-state svg {
    @apply mx-auto text-slate-400 mb-4;
}

#kanban-empty-state p {
    @apply text-slate-600;
}

/* Kanban Customization Modal */
#kanban-customization-modal {
    @apply fixed inset-0 bg-black bg-opacity-50 z-[1300];
    @apply flex items-center justify-center p-4;
}

#kanban-customization-modal .modal-content {
    @apply bg-white rounded-xl shadow-2xl;
    @apply max-w-4xl w-full max-h-[90vh];
    @apply overflow-hidden flex flex-col;
}

#kanban-columns-config {
    @apply space-y-3;
}

#kanban-columns-config > div {
    @apply p-4 border border-slate-200 rounded-lg bg-white;
}

#kanban-columns-config input[type="text"],
#kanban-columns-config select {
    @apply px-3 py-1 border border-slate-300 rounded-md text-sm;
    @apply focus:ring-2 focus:ring-sky-500 focus:border-sky-500;
}

#kanban-columns-config input[type="color"] {
    @apply w-12 h-10 rounded border border-slate-300;
    cursor: pointer;
}

#kanban-columns-config .remove-column-btn {
    @apply px-3 py-1 bg-red-100 text-red-700 rounded-md text-sm;
    @apply hover:bg-red-200 transition-colors;
}

/* View Toggle Buttons */
#events-view-toggle,
#kanban-view-toggle {
    @apply px-3 py-1 rounded text-sm font-medium transition-colors;
}

/* Responsive Design */
@media (max-width: 768px) {
    #kanban-board {
        @apply flex-col;
    }
    
    .kanban-column {
        @apply w-full;
        min-width: 100%;
    }
    
    #kanban-filters {
        @apply flex-col gap-3;
    }
    
    #kanban-filters > div {
        @apply flex-col gap-2;
    }
}

/* Drag and Drop Visual Feedback */
.kanban-column-body.drag-over-active {
    @apply bg-sky-50;
    @apply border-2 border-dashed border-sky-400;
    @apply rounded-lg;
}

.kanban-task-card.drag-ghost {
    @apply opacity-30;
    @apply transform scale-95;
}