body {
        font-family: 'Inter', sans-serif;
        background-color: #0f172a; /* Slate 900 */
        color: #f8fafc; /* Slate 50 */
      }
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #1e293b; 
      }
      ::-webkit-scrollbar-thumb {
        background: #475569; 
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #64748b; 
      }
      .animate-fade-in {
        animation: fadeIn 0.4s ease-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        background-color: #334155; 
      }
      .calendar-cell {
        background-color: #1e293b;
        min-height: 100px;
      }
      /* Fixed layout for week view */
      .week-view-container {
        display: grid;
        grid-template-columns: 60px repeat(7, 1fr);
        overflow-y: auto;
        height: 600px; /* Viewport height */
        background-color: #0f172a;
        border: 1px solid #334155;
        border-radius: 0.75rem;
        position: relative;
      }
      .week-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: #0f172a;
        border-bottom: 1px solid #334155;
        border-right: 1px solid #334155;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .time-column, .day-column {
        border-right: 1px solid #33415580;
      }
      input[type="time"]::-webkit-calendar-picker-indicator,
      input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        cursor: pointer;
      }
      /* Custom Checkbox */
    .custom-checkbox {
        position: relative;
        cursor: pointer;
        width: 20px;
        height: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        flex-shrink: 0;
    }

    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #334155; /* slate-700 */
        border-radius: 6px;
        transition: all 0.2s ease;
        border: 1px solid #475569; /* slate-600 */
    }

    .custom-checkbox:hover input ~ .checkmark {
        background-color: #475569; /* slate-600 */
    }

    .custom-checkbox input:checked ~ .checkmark {
        background-color: #6366f1; /* indigo-500 */
        border-color: #6366f1;
    }

    .custom-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .custom-checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    .custom-checkbox .checkmark:after {
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.calendar-task {
    position: absolute;
    width: calc(100% - 2px); /* Adjust for left/right padding/border */
    box-sizing: border-box;
    z-index: 10;
    padding: 2px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 10px;
    transition: background-color 0.2s, box-shadow 0.2s;
    /* Ensure content is selectable for task details if needed, but resize handle is above */
    user-select: none; /* Prevent text selection during drag/resize */
}

.calendar-task .task-content {
    pointer-events: none; /* Allow events to pass through to the parent for drag/click */
}

.calendar-task.opacity-50 {
    opacity: 0.5;
}

.day-column.bg-indigo-900\/20 {
    background-color: rgba(79, 70, 229, 0.2); /* indigo-600 with 20% opacity */
}

.resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px; /* Make it visible and clickable */
    background-color: rgba(255, 255, 255, 0.1); /* Light visual cue */
    cursor: row-resize;
    z-index: 20; /* Ensure it's above task content */
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s;
}

.calendar-task:hover .resize-handle {
    opacity: 1; /* Show on hover */
}

/* FullCalendar Customizations */
:root {
    --fc-bg-event-color: #4f46e5;
    --fc-border-color: #334155;
    --fc-daygrid-event-dot-width: 8px;
    --fc-list-event-dot-width: 10px;
    --fc-event-bg-color: var(--fc-bg-event-color);
    --fc-event-border-color: var(--fc-bg-event-color);
    --fc-event-text-color: #e2e8f0;
    --fc-page-bg-color: #0f172a;
    --fc-today-bg-color: rgba(79, 70, 229, 0.2);
    --fc-neutral-bg-color: #1e293b;
}

.fc {
    color: #f8fafc;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    color: #f8fafc;
}

.fc .fc-toolbar-title {
    color: #f8fafc;
}

.fc .fc-button {
    background: #334155;
    border: 1px solid #475569;
    color: #e2e8f0;
}

.fc .fc-button-primary:hover {
    background: #475569;
}

.fc .fc-button-primary:disabled {
    background: #1e293b;
    border-color: #1e293b;
}

.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    background: #4f46e5;
    border-color: #4f46e5;
}

.fc .fc-daygrid-day-frame {
    border: 1px solid #334155;
}

.fc .fc-day-today {
    background: var(--fc-today-bg-color) !important;
}

.fc .fc-col-header-cell-cushion {
    color: #94a3b8;
    text-decoration: none;
}

.fc .fc-daygrid-day-number {
    color: #94a3b8;
    text-decoration: none;
}