/* Custom styles for perfect grid alignment */

/* Force pixel-perfect grid */
.calendar-grid-container {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
}

/* Ensure borders align perfectly */
.calendar-grid-container > div {
    box-sizing: border-box;
}

/* Fix border rendering */
.hour-cell-fixed {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-right: -1px;
    margin-bottom: -1px;
}

/* Event positioning - ensure it stays within bounds */
.event {
    position: absolute;
    left: 2px;
    right: 2px;
    pointer-events: auto;
    z-index: 10;
}

/* CSS Variables for theme switching */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --border-color: #dadce0;
    --hover-bg: rgba(0, 0, 0, 0.04);
}

html.dark {
    --bg-primary: #202124;
    --bg-secondary: #292a2d;
    --bg-tertiary: #35363a;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --border-color: #5f6368;
    --hover-bg: rgba(255, 255, 255, 0.05);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Time input color scheme */
html.dark input[type="time"] {
    color-scheme: dark;
}

html:not(.dark) input[type="time"] {
    color-scheme: light;
}

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

.animate-slide-in {
    animation: slideIn 0.2s ease-out;
}

/* Perfect grid - exact copy of Google Calendar approach */
.calendar-wrapper {
    position: relative;
}

.calendar-table {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    width: 100%;
    gap: 0;
}

.calendar-row {
    display: contents;
}

.calendar-cell,
.time-cell {
    height: 48px;
    position: relative;
    box-sizing: border-box;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.time-cell {
    text-align: right;
    padding-right: 8px;
    padding-top: 4px;
    background: var(--bg-secondary);
}

/* First column gets left border */
.time-cell {
    border-left: 1px solid var(--border-color);
}

/* First row gets top border */
.calendar-cell:nth-child(-n+8),
.time-cell:nth-child(-n+8) {
    border-top: 1px solid var(--border-color);
}

/* Header alignment fix - ensure vertical lines are perfectly straight */
#calendarHeader {
    display: grid !important;
    grid-template-columns: 60px repeat(7, 1fr);
    width: 100%;
    gap: 0;
}

#calendarHeader .calendar-row {
    display: contents;
}

#calendarHeader .calendar-cell,
#calendarHeader .time-cell {
    box-sizing: border-box;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

#calendarHeader .time-cell {
    border-left: 1px solid var(--border-color);
}

/* Ensure all grid columns are perfectly aligned */
#calendarGrid .calendar-table,
#calendarHeader {
    grid-template-columns: 60px repeat(7, 1fr);
}

/* Remove any default margins/padding that could offset alignment */
#calendarGrid .calendar-cell,
#calendarGrid .time-cell,
#calendarHeader .calendar-cell,
#calendarHeader .time-cell {
    margin: 0;
    padding: 0;
}

/* Reset time-cell specific padding */
#calendarGrid .time-cell {
    padding-right: 8px;
    padding-top: 4px;
}

/* Individual column border adjustments using pseudo-elements */
/* You can adjust the 'right' value for each column to align borders perfectly */

/* Column 0 (first day) - adjust right value in px */
.calendar-col-0 {
    /* Add custom styles here if needed */
}

/* Column 1 (second day) - adjust right value in px */
.calendar-col-1 {
    position: relative;
}

.calendar-col-1::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    z-index: 1;
}

/* Hide original border for column 1 */
.calendar-col-1 {
    border-right: none !important;
}

/* Column 2 (third day) - adjust right value in px */
.calendar-col-2 {
    /* Add custom styles here if needed */
}

/* Column 3 (fourth day) - adjust right value in px */
.calendar-col-3 {
    /* Add custom styles here if needed */
}

/* Column 4 (fifth day) - adjust right value in px */
.calendar-col-4 {
    /* Add custom styles here if needed */
}

/* Column 5 (sixth day) - adjust right value in px */
.calendar-col-5 {
    /* Add custom styles here if needed */
}

/* Column 6 (seventh day) - adjust right value in px */
.calendar-col-6 {
    /* Add custom styles here if needed */
}