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: max-content;
    max-width: 200px;
    background-color: #1e293b;
    /* slate-800 */
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 8px 12px;
    position: absolute;
    z-index: 10000;
    /* Ensure it's on top of everything including nav */
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
    font-weight: 500;
    pointer-events: none;
    white-space: normal;
    line-height: 1.4;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.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.bg-amber-100 {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !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-on-call .event-icon {
    background: #fffbeb;
    color: #b45309;
}

.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-on-call {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

.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: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

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

#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%;
}

/* Force single column layout inside the sidebar */
#tab-content-scheduler.scheduler-generated-state .scheduler-config-section .grid {
    grid-template-columns: 1fr !important;
}

/* Restore 2-column layout for Action Buttons in sidebar */
#tab-content-scheduler.scheduler-generated-state #scheduler-action-buttons .grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Ensure flex containers wrap in sidebar if needed */
#tab-content-scheduler.scheduler-generated-state .scheduler-config-section .flex {
    flex-wrap: wrap;
}

/* Configuration Header with Toggle */
/* Mobile-only: Configuration toggle button */
@media (max-width: 1280px) {
    .scheduler-config-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100%;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .scheduler-config-header h2 {
        margin: 0 !important;
        flex: 0 1 auto;
        white-space: nowrap;
    }

    .scheduler-config-toggle-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.375rem;
        min-width: 32px;
        min-height: 32px;
        border-radius: 6px;
        background: transparent;
        border: 1px solid #cbd5e1;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        position: relative;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto;
        pointer-events: auto !important;
        z-index: 10;
    }

    .scheduler-config-toggle-btn:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
        color: #475569;
    }

    .scheduler-config-toggle-btn svg {
        width: 1rem;
        height: 1rem;
        fill: currentColor;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .scheduler-config-toggle-icon-plus {
        display: none;
    }

    .scheduler-config-toggle-icon-down {
        display: block;
    }

    /* Collapsed state */
    .scheduler-config-section.collapsed .scheduler-config-content {
        display: none !important;
    }

    .scheduler-config-section.collapsed .scheduler-config-toggle-icon-down {
        display: none !important;
    }

    .scheduler-config-section.collapsed .scheduler-config-toggle-icon-plus {
        display: block !important;
    }
}

/* Hide toggle button on desktop and ensure content is always visible */
@media (min-width: 1281px) {
    .scheduler-config-toggle-btn {
        display: none !important;
    }

    /* Always show config content on desktop, even if collapsed class is present */
    .scheduler-config-section.collapsed .scheduler-config-content {
        display: block !important;
    }
}

/* Events Tab - Hide controls when no schedule generated - use more specific selectors */
/* Target both direct and nested selectors to override Tailwind's flex class */
#tab-content-events .events-header-controls-group.flex:not(.has-schedule),
#tab-content-events .events-header-controls-group:not(.has-schedule),
#tab-content-events .events-header-row-1:not(.has-schedule) .events-header-controls-group.flex,
#tab-content-events .events-header-row-1:not(.has-schedule) .events-header-controls-group,
#tab-content-events .events-header-row-1:not(.has-schedule)>.events-header-controls-group,
#tab-content-events .events-header-row-2.flex:not(.has-schedule),
#tab-content-events .events-header-row-2:not(.has-schedule),
#tab-content-events .events-header-row-3.flex:not(.has-schedule),
#tab-content-events .events-header-row-3:not(.has-schedule) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
}

#tab-content-events .events-header-controls-group.has-schedule,
#tab-content-events .events-header-row-2.has-schedule,
#tab-content-events .events-header-row-3.has-schedule {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* Events Tab Mobile Layout */
@media (max-width: 768px) {
    #tab-content-events .events-header-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    #tab-content-events .events-header-row-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem;
        width: 100%;
    }

    #tab-content-events .events-header-row-1 h2 {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
    }

    /* Hide desktop controls on mobile */
    #tab-content-events .events-header-row-1 .events-header-controls-group {
        display: none !important;
    }

    #tab-content-events .events-header-row-2.has-schedule {
        flex-direction: column !important;
        gap: 0.75rem;
        width: 100%;
        align-items: stretch !important;
    }

    #tab-content-events .events-header-row-2.has-schedule>div:first-child {
        width: 100%;
    }

    #tab-content-events .events-header-row-2.has-schedule>div:first-child>button {
        flex: 1;
    }

    #tab-content-events .events-header-row-2.has-schedule>label,
    #tab-content-events .events-header-row-2.has-schedule>select,
    #tab-content-events .events-header-row-2.has-schedule>button:last-child {
        width: 100%;
    }

    #tab-content-events .events-header-row-2.has-schedule label {
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    #tab-content-events .events-header-row-2.has-schedule select {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
        min-height: 36px;
    }

    #tab-content-events .events-header-row-2.has-schedule button {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
        min-height: 36px;
    }

    #tab-content-events .events-header-row-3.has-schedule {
        width: 100%;
    }

    /* Calendar Tab Mobile Heading - match Files heading scale */
    #tab-content-calendar #calendar-heading {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: rgb(15, 23, 42) !important;
        margin: 0;
        width: 100%;
    }
}

/* Desktop: Keep original layout - heading and controls in one row */
@media (min-width: 769px) {
    #tab-content-events .events-header-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #tab-content-events .events-header-row-1 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #tab-content-events .events-header-row-1 h2 {
        margin: 0;
        flex: 0 1 auto;
    }

    /* Hide row 2 on desktop - controls are in row 1 */
    #tab-content-events .events-header-row-2.has-schedule {
        display: none !important;
    }

    /* Show controls in row 1 on desktop */
    #tab-content-events .events-header-row-1 .events-header-desktop-controls.has-schedule {
        display: flex !important;
        align-items: center;
        gap: 1rem;
        flex-wrap: nowrap;
    }

    /* Hide desktop controls on mobile */
    #tab-content-events .events-header-desktop-controls {
        display: none !important;
    }
}

#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: 1280px) {
    #tab-content-scheduler.scheduler-generated-state .scheduler-layout-container {
        grid-template-columns: 1fr !important;
        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;
    }

    /* Mobile Optimizations for Generated State */
    #tab-content-scheduler.scheduler-generated-state .scheduler-layout-container {
        gap: 1rem;
        padding: 0 0.5rem;
    }

    /* Configuration Section Mobile Optimizations */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section {
        padding: 1rem !important;
        /* Reduce from p-6 to p-4 equivalent */
    }

    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section h2 {
        font-size: 1.125rem;
        /* Slightly smaller heading */
        margin-bottom: 1rem;
    }

    /* Make year/timezone grid single column on mobile */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Touch-friendly form inputs */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section input,
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section select,
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section textarea {
        padding: 0.75rem !important;
        /* Increase from p-2 for better touch targets */
        font-size: 16px;
        /* Prevent zoom on iOS */
        min-height: 44px;
        /* Minimum touch target size */
    }

    /* Optimize button groups for mobile */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section .flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section .flex.gap-2 button {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        min-height: 36px;
    }

    /* Action Buttons - Single column on mobile */
    #tab-content-scheduler.scheduler-generated-state #scheduler-action-buttons .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    #tab-content-scheduler.scheduler-generated-state #scheduler-action-buttons button {
        padding: 0.875rem 1rem !important;
        /* Increase padding for easier tapping */
        font-size: 0.9375rem;
        min-height: 48px;
        /* Adequate touch target */
    }

    /* Reduce spacing in config section */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section .space-y-6>* {
        margin-bottom: 1.25rem;
    }

    /* Results Section Mobile Optimizations */
    #tab-content-scheduler.scheduler-generated-state .scheduler-results-section {
        margin-top: 1rem;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container {
        border-radius: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    /* Mobile table optimizations */
    #tab-content-scheduler.scheduler-generated-state #results-container table {
        font-size: 0.875rem;
        min-width: 100%;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container table th,
    #tab-content-scheduler.scheduler-generated-state #results-container table td {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container table th {
        font-size: 0.8125rem;
        font-weight: 600;
    }

    /* Ensure table wrapper is scrollable */
    #tab-content-scheduler.scheduler-generated-state #results-container .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Summary cards mobile optimization */
    #tab-content-scheduler.scheduler-generated-state #summary {
        margin-bottom: 1rem;
    }

    #tab-content-scheduler.scheduler-generated-state #summary .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* Optimize textarea height on mobile */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section textarea[rows="6"] {
        min-height: 120px;
        max-height: 150px;
    }

    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section textarea[rows="4"] {
        min-height: 100px;
        max-height: 120px;
    }

    /* Optimize rolling config flex layout */
    #tab-content-scheduler.scheduler-generated-state #rolling-config .flex.items-center {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #tab-content-scheduler.scheduler-generated-state #rolling-config .flex.items-center input {
        min-width: 60px;
    }

    /* Holiday and leave section button optimization */
    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    #tab-content-scheduler.scheduler-generated-state .scheduler-config-section .flex.items-center.justify-between .flex.gap-2 {
        width: 100%;
        justify-content: flex-start;
    }

    /* Mobile Card Layout for Schedule Table */
    #tab-content-scheduler.scheduler-generated-state #results-container .overflow-x-auto {
        overflow-x: visible;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container table {
        display: block;
        width: 100%;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container thead {
        display: none;
        /* Hide table header on mobile */
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tbody.scheduler-month-body {
        display: block;
        margin-bottom: 1.25rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }

    /* Month Header Card */
    #tab-content-scheduler.scheduler-generated-state #results-container tbody.scheduler-month-body {
        position: relative;
    }

    /* Show mobile header, hide desktop header on mobile */
    #tab-content-scheduler.scheduler-generated-state #results-container thead.scheduler-month-header {
        display: none !important;
        /* Hide desktop header on mobile */
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-mobile-header {
        display: table-row;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-mobile-header {
        display: block;
        width: 100%;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-mobile-header td {
        display: block;
        width: 100%;
        padding: 0.875rem 1rem;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-bottom: 1px solid #e2e8f0;
        box-sizing: border-box;
    }

    /* Ensure header container fills the td */
    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-mobile-header td .scheduler-mobile-header-container {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    /* Mobile Header Layout - Calendar icon left, Month center, Attendance/Customize right */
    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-mobile-header-container {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        position: relative;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-icon {
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        width: 32px;
        flex-shrink: 0;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-icon:hover {
        color: #0284c7;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-spacer-left {
        flex: 1;
        min-width: 0;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-month {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-weight: 700;
        font-size: 0.9375rem;
        color: #0f172a;
        text-decoration: none;
        white-space: nowrap;
        padding: 0;
        flex-shrink: 0;
        z-index: 1;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-month:hover {
        color: #0284c7;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-spacer-right {
        flex: 1;
        min-width: 0;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
        min-width: fit-content;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-right .show-calc-btn {
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-right .customize-month-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.375rem;
        min-width: 32px;
        min-height: 32px;
        border-radius: 6px;
        background: transparent;
        border: 1px solid #cbd5e1;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-right .customize-month-btn:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
        color: #475569;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-right .customize-month-btn.custom-mode {
        background: #dbeafe;
        border-color: #93c5fd;
        color: #1e40af;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-right .customize-month-btn svg {
        width: 1rem;
        height: 1rem;
    }

    /* Period Rows as Card Sections */
    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-period-row {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-period-row:last-child {
        border-bottom: none;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-period-row td {
        display: block;
        padding: 0;
        width: 100% !important;
        white-space: normal;
        text-align: center;
        border: none;
    }

    /* Period Range - First Row */
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-period-range {
        font-weight: 700;
        font-size: 0.875rem;
        color: #1e293b;
        margin-bottom: 0.5rem;
        padding-bottom: 0.375rem;
        border-bottom: 1px solid #e2e8f0;
        letter-spacing: 0.025em;
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Working Days - Second Row - Center aligned */
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-working-days {
        font-size: 0.8125rem;
        color: #475569;
        margin-bottom: 0.375rem;
        line-height: 1.4;
        display: block;
        width: 100%;
        text-align: center;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-working-days .text-xs {
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: 0.125rem;
        display: block;
    }

    /* WFO Days - Third Row - Center aligned */
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-wfo-days {
        font-size: 0.875rem;
        font-weight: 700;
        color: #0284c7;
        margin-bottom: 0.375rem;
        line-height: 1.4;
        display: block;
        width: 100%;
        text-align: center;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-wfo-days .text-xs {
        font-size: 0.75rem;
        font-weight: 500;
        margin-top: 0.125rem;
        display: block;
    }

    /* Date Range - Fourth Row - Center aligned */
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-date-range {
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 0.625rem;
        line-height: 1.5;
        word-break: break-word;
        font-weight: 500;
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Optimize Button - Last Row - Full width */
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-optimize {
        text-align: center;
        padding-top: 0.5rem;
        border-top: 1px solid #f1f5f9;
        margin-top: 0.375rem;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-optimize button {
        min-height: 36px;
        padding: 0.5rem 1.5rem;
        font-size: 0.8125rem;
        border-radius: 8px;
        width: 100%;
        max-width: 200px;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-optimize span {
        font-size: 0.75rem;
    }

    /* Remove unnecessary spacing */
    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-period-row+tr.scheduler-period-row {
        margin-top: 0;
    }

    /* Month card spacing - tighter */
    #tab-content-scheduler.scheduler-generated-state #results-container tbody.scheduler-month-body+tbody.scheduler-month-body {
        margin-top: 1rem;
    }

    /* Improve card visual hierarchy */
    #tab-content-scheduler.scheduler-generated-state #results-container tbody.scheduler-month-body {
        margin-bottom: 1.25rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-mobile-header td {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* Desktop: Hide mobile header and restore desktop table layout */
@media (min-width: 769px) {
    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-mobile-header {
        display: none !important;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container thead.scheduler-month-header {
        display: table-header-group !important;
    }

    /* Restore desktop table layout */
    #tab-content-scheduler.scheduler-generated-state #results-container table {
        display: table !important;
        width: 100%;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container thead {
        display: table-header-group !important;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tbody.scheduler-month-body {
        display: table-row-group !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-period-row {
        display: table-row !important;
        padding: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container tr.scheduler-period-row td {
        display: table-cell !important;
        padding: 0.75rem 1.5rem !important;
        width: auto !important;
        text-align: left !important;
        white-space: nowrap !important;
        border: none !important;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-period-range,
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-working-days,
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-wfo-days,
    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-date-range {
        text-align: left !important;
        display: table-cell !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        width: auto !important;
    }

    #tab-content-scheduler.scheduler-generated-state #results-container td.scheduler-optimize {
        text-align: right !important;
        display: table-cell !important;
        margin-top: 0 !important;
        width: auto !important;
    }

    /* Hide mobile header container elements on desktop */
    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-mobile-header-container,
    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-spacer-left,
    #tab-content-scheduler.scheduler-generated-state #results-container .scheduler-header-spacer-right {
        display: none !important;
    }
}

/* ===== 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;
}

/* Files Tab Header Styles - Similar to Events Tab */
.files-header-container {
    @apply flex flex-col gap-4;
}

.files-header-row-1 {
    @apply flex flex-wrap items-center gap-3;
    width: 100%;
}

#files-heading {
    @apply text-2xl font-bold text-slate-900;
    margin: 0;
    flex: 0 1 auto;
}

.files-header-controls-group {
    @apply flex items-center gap-4 flex-wrap;
    flex: 0 1 auto;
    min-width: 0;
}

.files-view-controls-group {
    @apply flex items-center gap-2;
}

/* Mobile adjustments for Files header */
@media (max-width: 768px) {
    #tab-content-files .files-header-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    #tab-content-files .files-header-row-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem;
        width: 100%;
    }

    #tab-content-files .files-header-row-1 h2 {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: rgb(15, 23, 42) !important;
        margin: 0;
        width: 100%;
    }

    /* Hide desktop controls on mobile */
    #tab-content-files .files-header-row-1 .files-header-controls-desktop,
    #tab-content-files .files-header-row-1 .files-header-controls-group.files-header-controls-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    #tab-content-files .files-header-row-2 {
        flex-direction: column !important;
        gap: 0.75rem;
        width: 100%;
        align-items: stretch !important;
        display: flex !important;
    }

    #tab-content-files .files-header-row-2>button,
    #tab-content-files .files-header-row-2>div {
        width: 100%;
    }

    .files-add-btn-mobile {
        width: 100% !important;
        display: flex !important;
    }

    #files-view-controls-mobile {
        display: flex !important;
        width: 100%;
    }

    .files-view-controls-group {
        width: 100%;
    }

    .files-view-controls-group>div {
        flex: 1;
    }

    #tab-content-notes .flex.items-center.justify-between.mb-6 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
    }

    #tab-content-notes #notes-heading {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        width: 100%;
    }

    #tab-content-notes .flex.items-center.justify-between.mb-6>div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    #tab-content-notes #add-note-btn {
        width: 100%;
        justify-content: center;
    }

    #tab-content-notes #notes-view-controls {
        margin-left: 0;
        width: 100%;
    }

    #tab-content-notes #notes-view-controls>div {
        flex: 1;
    }

    #tab-content-notes #notes-view-controls button {
        flex: 1;
        justify-content: center;
    }
}

/* Desktop adjustments for Files header */
@media (min-width: 769px) {
    #tab-content-files .files-header-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #tab-content-files .files-header-row-1 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-wrap: nowrap !important;
    }

    #tab-content-files .files-header-row-1 h2 {
        margin: 0;
        flex: 0 1 auto;
    }

    /* Hide row 2 on desktop - controls are in row 1 */
    #tab-content-files .files-header-row-2 {
        display: none !important;
    }

    /* Show controls in row 1 on desktop */
    #tab-content-files .files-header-row-1 .files-header-controls-group {
        display: flex !important;
        align-items: center;
        gap: 1rem;
        margin-left: auto !important;
    }

    /* Hide mobile controls on desktop - use more specific selectors */
    #tab-content-files .files-add-btn-mobile,
    #tab-content-files #add-file-btn-mobile.files-add-btn-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    #tab-content-files #files-view-controls-mobile,
    #tab-content-files .files-header-row-2 #files-view-controls-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    #tab-content-files .files-header-row-2 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show desktop controls */
    #tab-content-files .files-header-row-1 .files-header-controls-desktop,
    #tab-content-files .files-header-row-1 .files-header-controls-group.files-header-controls-desktop {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* Ensure desktop Add File button is visible */
    #tab-content-files .files-add-btn-desktop,
    #tab-content-files #add-file-btn.files-add-btn-desktop {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* Ensure desktop view controls are visible */
    #tab-content-files #files-view-controls-desktop {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* Desktop: Notes view controls alignment */
    #tab-content-notes #notes-view-controls {
        width: auto;
    }
}

/* 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-month-modal .customize-calendar-day.on-call {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !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;
}

/* Mobile Kanban Carousel */
@media (max-width: 768px) {
    #kanban-board {
        overflow: hidden;
        position: relative;
        min-height: 400px;
        height: calc(100vh - 140px);
        max-height: calc(100vh - 140px);
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1200px;
        background: #f1f5f9;
        padding: 10px 0;
        gap: 0;
        box-sizing: border-box;
    }

    .kanban-mobile-carousel {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1200px;
        transform-style: preserve-3d;
        padding: 0;
        touch-action: pan-x;
        overflow: hidden;
        box-sizing: border-box;
    }

    .kanban-mobile-card {
        position: absolute;
        width: 90%;
        max-width: 400px;
        height: calc(100% - 20px);
        max-height: calc(100% - 20px);
        min-height: 400px;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.4s ease,
            scale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center center;
        will-change: transform, opacity, scale;
        pointer-events: none;
        backface-visibility: hidden;
        touch-action: pan-y;
        opacity: 0;
        scale: 0.85;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%) scale(0.85);
        overflow: hidden;
        box-sizing: border-box;
    }

    .kanban-mobile-card.active {
        opacity: 1;
        scale: 1;
        z-index: 10;
        pointer-events: auto;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }

    .kanban-mobile-card.prev {
        transform: translateX(calc(-50% - 100%)) translateY(-50%) scale(0.85);
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }

    .kanban-mobile-card.next {
        transform: translateX(calc(-50% + 87%)) translateY(-50%) scale(0.85);
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }

    .kanban-mobile-card.swiping {
        transition: none !important;
    }

    /* Prevent visual artifacts during swipe */
    .kanban-mobile-card {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }

    .kanban-mobile-carousel {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }

    .kanban-mobile-card-container {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.2);
        touch-action: pan-y;
    }

    .kanban-mobile-card-header {
        flex-shrink: 0;
        padding: 24px 20px;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .kanban-mobile-card-header h3 {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        color: white;
        letter-spacing: -0.5px;
    }

    .kanban-mobile-card-header span {
        font-size: 15px;
        opacity: 0.95;
        color: white;
        font-weight: 500;
    }

    .kanban-mobile-card-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px;
        background: #f8fafc;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        min-height: 0;
        max-height: none;
    }

    .kanban-mobile-card-body::-webkit-scrollbar {
        width: 4px;
    }

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

    .kanban-mobile-card-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

    /* Ensure task cards in mobile carousel are properly styled */
    .kanban-mobile-card-body .kanban-task-card {
        margin-bottom: 12px;
    }

    /* Make edit button larger and easier to tap on mobile only */
    .kanban-mobile-card-body .mobile-edit-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 8px !important;
    }

    .kanban-mobile-card-body .mobile-edit-icon {
        width: 20px !important;
        height: 20px !important;
        pointer-events: none;
    }

    /* Hide desktop columns on mobile */
    #kanban-board .kanban-column {
        display: none;
    }
}

/* Desktop: Hide mobile carousel */
@media (min-width: 769px) {
    .kanban-mobile-carousel {
        display: none !important;
    }

    #kanban-board .kanban-column {
        display: flex;
    }
}

.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 Header Styles */
.kanban-header-container {
    @apply flex flex-col gap-4;
}

.kanban-header-row-1 {
    @apply flex items-center;
    width: 100%;
    justify-content: space-between;
    /* Desktop: title left, controls right */
}

#kanban-heading {
    @apply text-2xl font-bold text-slate-900;
    margin: 0;
    flex: 0 1 auto;
}

.kanban-header-controls-group {
    @apply flex items-center gap-3;
    flex: 0 1 auto;
    flex-wrap: wrap;
    /* Allow wrapping when needed */
    min-width: 0;
}

/* Desktop: Ensure proper alignment */
@media (min-width: 769px) {
    .kanban-header-row-1 {
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    #kanban-heading {
        flex: 0 1 auto !important;
    }

    .kanban-header-controls-group {
        flex: 0 1 auto !important;
        margin-left: auto !important;
        /* Push to the right */
        flex-wrap: wrap !important;
        /* Still allow wrapping if needed */
    }
}

/* Mobile adjustments for Kanban header */
@media (max-width: 768px) {
    .kanban-header-row-1 {
        @apply flex-col items-stretch;
        gap: 0.75rem;
        justify-content: flex-start !important;
    }

    #kanban-heading {
        font-size: 1.25rem !important;
        /* Match Events heading mobile size (text-xl = 1.25rem) */
        font-weight: 700 !important;
        color: rgb(15, 23, 42) !important;
        /* text-slate-900 */
        width: 100%;
        margin: 0;
    }

    .kanban-header-controls-group {
        width: 100%;
        flex-wrap: wrap;
        margin-left: 0 !important;
    }

    .kanban-header-controls-group>div,
    .kanban-header-controls-group>button {
        flex: 1 1 auto;
        min-width: 0;
    }

    .kanban-header-controls-group>div:first-child {
        width: 100%;
    }

    .kanban-header-controls-group>div:first-child>button {
        flex: 1;
    }
}

#kanban-filters {
    @apply bg-slate-50 rounded-lg border border-slate-200 p-4;
    overflow: hidden;
    /* Prevent content from going outside */
}

#kanban-filters>div {
    max-width: 100%;
    box-sizing: border-box;
}

#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;
    min-width: 0;
    /* Allow inputs to shrink */
    flex-shrink: 1;
    /* Allow flex items to shrink */
    max-width: 100%;
    box-sizing: border-box;
}

#kanban-filters label {
    @apply text-sm font-medium text-slate-700;
    flex-shrink: 0;
    /* Prevent labels from shrinking */
    white-space: nowrap;
}



#kanban-filter-start-date,
#kanban-filter-end-date {
    min-width: 100px !important;
    /* Minimum width for date inputs */
    max-width: 150px !important;
    /* Maximum width to prevent overflow */
    flex: 0 1 auto !important;
    /* Allow shrinking but don't grow */
    box-sizing: border-box !important;
    width: auto !important;
}

/* 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;
}

/* Files Tab - File Item Layout */
.file-item {
    width: 100%;
}

/* File item container - ensure proper layout */
.file-item>div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure the flex container with justify-between takes full width */
.file-item>div.flex.items-start.justify-between {
    width: 100% !important;
    max-width: 100% !important;
}

/* File actions container - fixed to right, right-aligned */
.file-actions-container {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    /* Align to top when file name wraps */
    margin-left: auto !important;
    min-width: fit-content !important;
    /* Ensure container doesn't shrink */
}

/* Ensure parent container allows proper spacing */
.file-item>div.flex {
    width: 100% !important;
    gap: 0.75rem !important;
    /* Add gap between file info and buttons */
}

/* File name - allow wrapping (override Tailwind truncate) */
.file-item h3,
.file-item h3.truncate,
.file-item h3.break-words {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    /* Override truncate's nowrap */
    overflow: visible !important;
    /* Override truncate's hidden */
    text-overflow: clip !important;
    /* Override truncate's ellipsis */
    max-width: 100% !important;
}

/* Files Tab - Mobile Dropdown for File Actions */
/* Desktop: Show desktop buttons, hide mobile dropdown */
.file-actions-desktop {
    display: flex !important;
}

.file-actions-mobile {
    display: none !important;
}

/* Mobile: Hide desktop buttons, show mobile dropdown */
@media (max-width: 768px) {
    .file-actions-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .file-actions-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    .file-actions-dropdown-btn {
        min-width: 44px !important;
        /* Apple recommended minimum touch target */
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .file-actions-menu {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        /* Position menu to the left of the button on mobile to prevent offscreen overflow */
        right: auto !important;
        left: auto !important;
        /* Position from the right edge of the button, but ensure it stays within viewport */
        transform: translateX(calc(-100% + 44px)) !important;
        /* Shift left by menu width minus button width */
        max-width: calc(100vw - 16px) !important;
        /* Ensure it doesn't exceed viewport width with padding */
        width: auto !important;
        min-width: 160px !important;
    }

    /* If menu would go offscreen on the left, position it to the right instead */
    .file-actions-mobile:last-child .file-actions-menu {
        transform: translateX(0) !important;
        right: 0 !important;
        left: auto !important;
    }

    .file-actions-menu button {
        min-height: 44px !important;
        /* Apple recommended minimum touch target */
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        /* Prevent text wrapping */
    }
}

/* Desktop: Ensure mobile dropdown is hidden */
@media (min-width: 769px) {
    .file-actions-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .file-actions-mobile .file-actions-dropdown-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

    .file-actions-mobile .file-actions-menu {
        display: none !important;
        visibility: hidden !important;
    }

    .file-actions-desktop {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
}

/* File Viewer Modal - Mobile Responsive */
@media (max-width: 768px) {

    /* Make the header container wrap on mobile */
    #file-viewer-modal .bg-white>div.border-b {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }

    /* Title and navigation section */
    #file-viewer-modal .bg-white>div.border-b>div:first-child {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    /* Button container - wrap buttons */
    #file-viewer-modal .bg-white>div.border-b>div:last-child {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
        align-items: flex-start !important;
    }

    /* Make buttons smaller and allow wrapping */
    #file-viewer-modal .bg-white>div.border-b>div:last-child button {
        flex: 0 1 auto !important;
        min-width: fit-content !important;
        font-size: 0.875rem !important;
        /* text-sm */
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    /* Ensure close button doesn't overlap */
    #file-viewer-modal .bg-white>div.border-b>div:last-child button.modal-close-btn {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        order: 999 !important;
        /* Put close button at the end */
    }

    /* Hide divider on mobile */
    #file-viewer-modal .bg-white>div.border-b>div:last-child>div.w-px {
        display: none !important;
    }

    /* Ensure buttons don't overflow */
    #file-viewer-modal .bg-white>div.border-b>div:last-child button,
    #file-viewer-modal .bg-white>div.border-b>div:last-child>div {
        max-width: 100% !important;
    }

    /* Adjust modal padding on mobile */
    #file-viewer-modal .bg-white {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    /* Adjust content area padding */
    #file-viewer-modal .bg-white>div:last-child {
        padding: 0.75rem !important;
    }

    /* File viewer title */
    #file-viewer-title {
        font-size: 1rem !important;
        word-break: break-word !important;
    }

    /* File viewer navigation counter */
    #file-viewer-navigation {
        font-size: 0.875rem !important;
    }
}

/* Tables Header Styles - Matching Kanban Layout */
.tables-header-container {
    @apply flex flex-col gap-4;
}

.tables-header-row-1 {
    @apply flex items-center;
    width: 100%;
    justify-content: space-between;
}

#tables-heading {
    @apply text-2xl font-bold text-slate-900;
    margin: 0;
    flex: 0 1 auto;
}

.tables-header-controls-group {
    @apply flex items-center gap-3;
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

/* Desktop: Ensure proper alignment */
@media (min-width: 769px) {
    .tables-header-row-1 {
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    #tables-heading {
        flex: 0 1 auto !important;
    }

    .tables-header-controls-group {
        flex: 0 1 auto !important;
        margin-left: auto !important;
        flex-wrap: wrap !important;
    }
}

/* Mobile adjustments for Tables header */
@media (max-width: 768px) {
    .tables-header-row-1 {
        @apply flex-col items-stretch;
        gap: 0.75rem;
        justify-content: flex-start !important;
    }

    #tables-heading {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: rgb(15, 23, 42) !important;
        width: 100%;
        margin: 0;
    }

    .tables-header-controls-group {
        width: 100%;
        flex-wrap: wrap;
        margin-left: 0 !important;
        gap: 0.75rem;
    }

    /* Toggle Container */
    .tables-header-controls-group>div:first-child {
        width: 100%;
        margin-right: 0 !important;
        display: flex;
    }

    /* Stretch toggle buttons */
    .tables-header-controls-group>div:first-child>button {
        flex: 1;
        justify-content: center;
    }

    /* Controls Container (Edit Mode, Customize, etc) */
    .tables-header-controls-group>div:nth-child(2) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Stretch items inside controls container */
    .tables-header-controls-group>div:nth-child(2)>* {
        flex: 1 1 auto;
        min-width: fit-content;
        justify-content: center;
    }

    /* Special handling for the Export/Import container to make it full width if needed or stretch its children */
    .tables-header-controls-group>div:nth-child(2)>div {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        gap: 0.75rem;
    }

    .tables-header-controls-group>div:nth-child(2)>div>button,
    .tables-header-controls-group>div:nth-child(2)>div>label {
        flex: 1;
        justify-content: center;
    }
}

/* ===== Notebook Modal Styles (Obsidian-like) ===== */
#notebook-modal {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#notebook-modal #notebook-sidebar {
    background-color: #f8fafc;
    /* slate-50 */
    border-right: 1px solid #e2e8f0;
    /* slate-200 */
}

/* Notebook Quill Overrides */
#notebook-modal .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 4%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

@media (min-width: 768px) {
    #notebook-modal .ql-toolbar.ql-snow {
        padding: 0.75rem 8%;
    }
}

#notebook-modal .ql-container.ql-snow {
    border: none;
    font-family: inherit;
    font-size: 1rem;
}

#notebook-modal #notebook-editor-container {
    padding: 2rem 4% 6rem;
}

@media (min-width: 768px) {
    #notebook-modal #notebook-editor-container {
        padding: 2rem 8% 6rem;
    }
}

#notebook-modal .ql-editor {
    min-height: 100%;
    padding: 0;
    line-height: 1.7;
    color: #334155;
    /* slate-700 */
}

#notebook-modal .ql-editor:focus {
    outline: none;
}

#notebook-modal .ql-editor h1,
#notebook-modal .ql-editor h2,
#notebook-modal .ql-editor h3 {
    color: #0f172a;
    /* slate-900 */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
}

#notebook-modal .ql-editor p {
    margin-bottom: 1em;
}

#notebook-modal .ql-editor pre {
    background-color: #f1f5f9;
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    color: #334155;
}

#notebook-modal .ql-editor blockquote {
    border-left: 4px solid #cbd5e1;
    padding-left: 1rem;
    color: #64748b;
    font-style: italic;
}

/* Custom Scrollbar for Notebook */
#notebook-modal ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#notebook-modal ::-webkit-scrollbar-track {
    background: transparent;
}

#notebook-modal ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

#notebook-modal ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}