/* =============================================================================
   Preline Calendar - Premium Calendar Component CSS
   Pixel-perfect implementation of Preline Pro Calendar styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Variables / Design Tokens
   ----------------------------------------------------------------------------- */

:root {
    /* Colors - Primary */
    --preline-calendar-primary: #2563eb;
    --preline-calendar-primary-dark: #1d4ed8;
    --preline-calendar-primary-light: #3b82f6;
    --preline-calendar-primary-bg: #eff6ff;
    
    /* Colors - Neutral */
    --preline-calendar-bg: #ffffff;
    --preline-calendar-bg-hover: #f9fafb;
    --preline-calendar-bg-active: #f3f4f6;
    --preline-calendar-border: #e5e7eb;
    --preline-calendar-border-dark: #d1d5db;
    
    /* Text */
    --preline-calendar-text: #111827;
    --preline-calendar-text-secondary: #6b7280;
    --preline-calendar-text-muted: #9ca3af;
    --preline-calendar-text-inverse: #ffffff;
    
    /* Time Indicator */
    --preline-calendar-time-indicator: #ef4444;
    
    /* Sizing */
    --preline-calendar-sidebar-width: 280px;
    --preline-calendar-header-height: 64px;
    --preline-calendar-hour-height: 60px;
    --preline-calendar-mini-day-size: 32px;
    --preline-calendar-event-min-height: 24px;
    
    /* Spacing */
    --preline-calendar-gap-xs: 4px;
    --preline-calendar-gap-sm: 8px;
    --preline-calendar-gap-md: 16px;
    --preline-calendar-gap-lg: 24px;
    --preline-calendar-gap-xl: 32px;
    
    /* Borders */
    --preline-calendar-radius-sm: 4px;
    --preline-calendar-radius-md: 8px;
    --preline-calendar-radius-lg: 12px;
    --preline-calendar-radius-full: 9999px;
    
    /* Shadows */
    --preline-calendar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --preline-calendar-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --preline-calendar-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --preline-calendar-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --preline-calendar-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --preline-calendar-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index */
    --preline-calendar-z-sidebar: 10;
    --preline-calendar-z-header: 20;
    --preline-calendar-z-time-indicator: 30;
    --preline-calendar-z-event: 40;
    --preline-calendar-z-event-hover: 50;
    --preline-calendar-z-modal: 100;
    --preline-calendar-z-modal-backdrop: 99;
}

/* Dark mode variables */
.dark {
    --preline-calendar-bg: #1f2937;
    --preline-calendar-bg-hover: #374151;
    --preline-calendar-bg-active: #4b5563;
    --preline-calendar-border: #374151;
    --preline-calendar-border-dark: #4b5563;
    --preline-calendar-text: #f9fafb;
    --preline-calendar-text-secondary: #9ca3af;
    --preline-calendar-text-muted: #6b7280;
    --preline-calendar-primary-bg: #1e3a5f;
}

/* -----------------------------------------------------------------------------
   Main Container
   ----------------------------------------------------------------------------- */

.preline-calendar {
    display: grid;
    grid-template-columns: var(--preline-calendar-sidebar-width) 1fr;
    height: 100%;
    min-height: 600px;
    background: var(--preline-calendar-bg);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-lg);
    overflow: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.preline-calendar--sidebar-closed {
    grid-template-columns: 1fr;
}

.preline-calendar--sidebar-closed .preline-calendar-sidebar {
    display: none;
}

/* -----------------------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------------------- */

.preline-calendar-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-md);
    padding: var(--preline-calendar-gap-md);
    background: var(--preline-calendar-bg);
    border-right: 1px solid var(--preline-calendar-border);
    overflow-y: auto;
    z-index: var(--preline-calendar-z-sidebar);
}

/* Create Button */
.preline-calendar-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--preline-calendar-gap-sm);
    width: 100%;
    padding: 12px 24px;
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: var(--preline-calendar-radius-lg);
    cursor: pointer;
    transition: background-color var(--preline-calendar-transition);
    box-shadow: var(--preline-calendar-shadow-sm);
}

.preline-calendar-create-btn:hover {
    background: var(--preline-calendar-primary-dark);
}

.preline-calendar-create-btn:focus {
    outline: 2px solid var(--preline-calendar-primary);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Main Content Area
   ----------------------------------------------------------------------------- */

.preline-calendar-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--preline-calendar-bg);
}

.preline-calendar-content {
    flex: 1;
    overflow: auto;
    position: relative;
}

/* Loading State */
.preline-calendar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--preline-calendar-gap-md);
    height: 100%;
    color: var(--preline-calendar-text-secondary);
    font-size: 14px;
}

.preline-calendar-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--preline-calendar-border);
    border-top-color: var(--preline-calendar-primary);
    border-radius: 50%;
    animation: preline-calendar-spin 0.8s linear infinite;
}

@keyframes preline-calendar-spin {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */

.preline-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--preline-calendar-gap-md);
    padding: var(--preline-calendar-gap-md) var(--preline-calendar-gap-lg);
    background: var(--preline-calendar-bg);
    border-bottom: 1px solid var(--preline-calendar-border);
    min-height: var(--preline-calendar-header-height);
}

.preline-calendar-header-left {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-md);
}

.preline-calendar-header-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    margin: 0;
    white-space: nowrap;
}

.preline-calendar-header-nav {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-xs);
}

.preline-calendar-header-right {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-sm);
}

/* Navigation Buttons */
.preline-calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--preline-calendar-text-secondary);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-nav-btn:hover {
    background: var(--preline-calendar-bg-hover);
    color: var(--preline-calendar-text);
    border-color: var(--preline-calendar-border-dark);
}

.preline-calendar-nav-btn:focus {
    outline: 2px solid var(--preline-calendar-primary);
    outline-offset: 2px;
}

.preline-calendar-today-btn {
    padding: 8px 16px;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    background: var(--preline-calendar-bg);
    color: var(--preline-calendar-text);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
}

.preline-calendar-today-btn:hover {
    background: var(--preline-calendar-bg-hover);
    border-color: var(--preline-calendar-border-dark);
}

/* View Switcher */
.preline-calendar-view-switcher {
    display: flex;
    align-items: center;
    background: var(--preline-calendar-bg-hover);
    border-radius: var(--preline-calendar-radius-md);
    padding: 4px;
    gap: 2px;
}

.preline-calendar-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--preline-calendar-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-view-btn:hover {
    color: var(--preline-calendar-text);
    background: var(--preline-calendar-bg);
}

.preline-calendar-view-btn--active {
    color: var(--preline-calendar-text);
    background: var(--preline-calendar-bg);
    box-shadow: var(--preline-calendar-shadow-sm);
}

/* Sidebar Toggle */
.preline-calendar-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--preline-calendar-text-secondary);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-sidebar-toggle:hover {
    background: var(--preline-calendar-bg-hover);
    color: var(--preline-calendar-text);
}

/* -----------------------------------------------------------------------------
   Mini Calendar
   ----------------------------------------------------------------------------- */

.preline-calendar-mini {
    background: var(--preline-calendar-bg);
    padding: var(--preline-calendar-gap-sm);
    border-radius: var(--preline-calendar-radius-md);
}

.preline-calendar-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--preline-calendar-gap-sm);
    margin-bottom: var(--preline-calendar-gap-sm);
}

.preline-calendar-mini-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    margin: 0;
}

.preline-calendar-mini-nav {
    display: flex;
    gap: 4px;
}

.preline-calendar-mini-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    color: var(--preline-calendar-text-secondary);
    border: none;
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-mini-nav-btn:hover {
    background: var(--preline-calendar-bg-hover);
    color: var(--preline-calendar-text);
}

.preline-calendar-mini-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: var(--preline-calendar-gap-xs);
}

.preline-calendar-mini-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--preline-calendar-mini-day-size);
    font-size: 11px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
    text-transform: uppercase;
}

.preline-calendar-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.preline-calendar-mini-day {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--preline-calendar-mini-day-size);
    height: var(--preline-calendar-mini-day-size);
    font-size: 13px;
    font-weight: 400;
    color: var(--preline-calendar-text);
    background: transparent;
    border: none;
    border-radius: var(--preline-calendar-radius-full);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-mini-day:hover {
    background: var(--preline-calendar-bg-hover);
}

.preline-calendar-mini-day--other-month {
    color: var(--preline-calendar-text-muted);
}

.preline-calendar-mini-day--today {
    font-weight: 600;
    color: var(--preline-calendar-primary);
}

.preline-calendar-mini-day--selected {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
    font-weight: 500;
}

.preline-calendar-mini-day--selected:hover {
    background: var(--preline-calendar-primary-dark);
}

.preline-calendar-mini-day--has-events::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--preline-calendar-primary);
    border-radius: var(--preline-calendar-radius-full);
}

.preline-calendar-mini-day--selected.preline-calendar-mini-day--has-events::after {
    background: var(--preline-calendar-text-inverse);
}

.preline-calendar-mini-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-weight: 500;
}

.preline-calendar-mini-event-dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--preline-calendar-primary);
    border-radius: var(--preline-calendar-radius-full);
}

/* -----------------------------------------------------------------------------
   Calendar Accounts Sidebar
   ----------------------------------------------------------------------------- */

.preline-calendar-accounts {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-md);
}

.preline-calendar-account {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-sm);
}

.preline-calendar-account-header {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-sm);
    padding: var(--preline-calendar-gap-sm) 0;
}

.preline-calendar-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    color: var(--preline-calendar-text-inverse);
    background: var(--preline-calendar-primary);
    border-radius: var(--preline-calendar-radius-full);
}

.preline-calendar-account-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--preline-calendar-text);
}

.preline-calendar-categories {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-xs);
    padding-left: 40px;
}

.preline-calendar-category {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-sm);
    padding: var(--preline-calendar-gap-sm);
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    transition: background-color var(--preline-calendar-transition);
}

.preline-calendar-category:hover {
    background: var(--preline-calendar-bg-hover);
}

.preline-calendar-category-checkbox {
    position: relative;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.preline-calendar-category-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.preline-calendar-category-checkbox-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--preline-calendar-bg);
    border: 2px solid currentColor;
    border-radius: var(--preline-calendar-radius-sm);
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-category-checkbox input:checked + .preline-calendar-category-checkbox-indicator {
    background: currentColor;
}

.preline-calendar-category-checkbox input:checked + .preline-calendar-category-checkbox-indicator svg {
    display: block;
}

.preline-calendar-category-checkbox-indicator svg {
    display: none;
    width: 10px;
    height: 10px;
    color: var(--preline-calendar-text-inverse);
}

.preline-calendar-category-name {
    flex: 1;
    font-size: 13px;
    color: var(--preline-calendar-text-secondary);
}

/* -----------------------------------------------------------------------------
   Time Grid
   ----------------------------------------------------------------------------- */

.preline-calendar-time-grid {
    display: flex;
    flex-direction: column;
    min-height: calc(24 * var(--preline-calendar-hour-height));
}

.preline-calendar-time-slot {
    display: flex;
    align-items: flex-start;
    position: relative;
    height: var(--preline-calendar-hour-height);
}

.preline-calendar-time-label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 var(--preline-calendar-gap-sm);
    width: 60px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
    transform: translateY(-8px);
}

.preline-calendar-time-grid-line {
    position: absolute;
    left: 60px;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--preline-calendar-border);
}

.preline-calendar-time-grid-line-half {
    position: absolute;
    left: 60px;
    right: 0;
    height: 1px;
    background: var(--preline-calendar-border);
    opacity: 0.5;
}

/* -----------------------------------------------------------------------------
   Current Time Indicator
   ----------------------------------------------------------------------------- */

.preline-calendar-time-indicator {
    position: absolute;
    left: 0;
    right: 0;
    z-index: var(--preline-calendar-z-time-indicator);
    pointer-events: none;
}

.preline-calendar-time-indicator-line {
    position: relative;
    height: 2px;
    background: var(--preline-calendar-time-indicator);
}

.preline-calendar-time-indicator-dot {
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--preline-calendar-time-indicator);
    border-radius: var(--preline-calendar-radius-full);
}

.preline-calendar-time-indicator-label {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--preline-calendar-text-inverse);
    background: var(--preline-calendar-time-indicator);
    border-radius: var(--preline-calendar-radius-sm);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Day/Week View
   ----------------------------------------------------------------------------- */

.preline-calendar-day-view,
.preline-calendar-week-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: var(--preline-calendar-bg);
}

/* Week View Header */
.preline-calendar-week-view-header {
    display: grid;
    grid-template-columns: 60px 1fr;
    border-bottom: 1px solid var(--preline-calendar-border);
    background: var(--preline-calendar-bg);
    position: sticky;
    top: 0;
    z-index: var(--preline-calendar-z-header);
}

.preline-calendar-time-gutter-header {
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid var(--preline-calendar-border);
}

.preline-calendar-week-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* All-Day Row */
.preline-calendar-week-all-day {
    display: grid;
    grid-template-columns: 60px 1fr;
    border-bottom: 1px solid var(--preline-calendar-border);
    background: var(--preline-calendar-bg);
    min-height: 32px;
}

.preline-calendar-all-day-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--preline-calendar-gap-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
    border-right: 1px solid var(--preline-calendar-border);
}

.preline-calendar-all-day-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.preline-calendar-all-day-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-left: 1px solid var(--preline-calendar-border);
    min-height: 32px;
}

.preline-calendar-all-day-cell:first-child {
    border-left: none;
}

.preline-calendar-all-day-cell--today {
    background: var(--preline-calendar-primary-bg);
}

.preline-calendar-all-day-event {
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preline-calendar-all-day-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.preline-calendar-week-view-time-gutter {
    width: 60px;
    flex-shrink: 0;
}

.preline-calendar-day-view-columns,
.preline-calendar-week-view-columns {
    display: flex;
    flex: 1;
}

.preline-calendar-day-column-header {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--preline-calendar-gap-sm);
    border-left: 1px solid var(--preline-calendar-border);
    min-height: 60px;
}

.preline-calendar-day-column-header:first-child {
    border-left: none;
}

.preline-calendar-day-column-weekday {
    font-size: 12px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.preline-calendar-day-column-date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    border-radius: var(--preline-calendar-radius-full);
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-day-column-header--today .preline-calendar-day-column-date {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
}

.preline-calendar-day-column-header--selected .preline-calendar-day-column-date:not(.preline-calendar-day-column-header--today .preline-calendar-day-column-date) {
    background: var(--preline-calendar-primary-bg);
    color: var(--preline-calendar-primary);
}

/* Day headers (week/day view) */
.preline-calendar-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--preline-calendar-gap-sm);
    border-left: 1px solid var(--preline-calendar-border);
    min-height: 60px;
}

.preline-calendar-day-header:first-child {
    border-left: none;
}

.preline-calendar-day-header-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.preline-calendar-day-header-date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    border-radius: var(--preline-calendar-radius-full);
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-day-header-date--today {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
}

/* All Day Events Row */
.preline-calendar-all-day-row {
    display: flex;
    border-bottom: 1px solid var(--preline-calendar-border);
    background: var(--preline-calendar-bg);
    min-height: 40px;
}

.preline-calendar-all-day-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--preline-calendar-gap-sm);
    width: 60px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
}

.preline-calendar-all-day-events {
    display: flex;
    flex: 1;
}

.preline-calendar-all-day-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-left: 1px solid var(--preline-calendar-border);
    min-height: 32px;
}

.preline-calendar-all-day-cell:first-child {
    border-left: none;
}

/* Day View Body */
.preline-calendar-day-view-body,
.preline-calendar-week-view-body {
    display: flex;
    flex: 1;
    overflow: auto;
}

.preline-calendar-time-grid-container {
    display: grid;
    grid-template-columns: 60px 1fr;
    width: 100%;
}

.preline-calendar-day-view-content,
.preline-calendar-week-view-content {
    display: flex;
    flex: 1;
    position: relative;
}

.preline-calendar-day-columns {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

.preline-calendar-day-columns--week {
    grid-template-columns: repeat(7, 1fr);
}

/* Day Column */
.preline-calendar-day-column {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--preline-calendar-border);
    min-height: calc(24 * var(--preline-calendar-hour-height));
}

.preline-calendar-day-column:first-child {
    border-left: none;
}

/* Hour cells - support both naming conventions */
.preline-calendar-hour-cell,
.preline-calendar-day-column-slot {
    height: var(--preline-calendar-hour-height);
    border-bottom: 1px solid var(--preline-calendar-border);
    cursor: pointer;
    position: relative;
}

.preline-calendar-hour-cell:hover,
.preline-calendar-day-column-slot:hover {
    background: var(--preline-calendar-bg-hover);
}

.preline-calendar-hour-cell::after,
.preline-calendar-day-column-slot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--preline-calendar-border);
    opacity: 0.5;
}

.preline-calendar-day-column-events {
    position: absolute;
    top: 0;
    left: 0;
    right: 4px;
    bottom: 0;
    pointer-events: none;
}

.preline-calendar-day-column-events > * {
    pointer-events: auto;
}

/* -----------------------------------------------------------------------------
   Event Card
   ----------------------------------------------------------------------------- */

.preline-calendar-event {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    overflow: hidden;
    z-index: var(--preline-calendar-z-event);
    transition: box-shadow var(--preline-calendar-transition), transform var(--preline-calendar-transition);
    border-left-width: 3px;
    border-style: solid;
    background: var(--preline-calendar-bg);
    color: var(--preline-calendar-text);
}

.preline-calendar-event:hover {
    z-index: var(--preline-calendar-z-event-hover);
    box-shadow: var(--preline-calendar-shadow-md);
}

.preline-calendar-event:focus {
    outline: 2px solid var(--preline-calendar-primary);
    outline-offset: 2px;
}

.preline-calendar-event--compact {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
}

.preline-calendar-event--all-day {
    position: relative;
    border-width: 1px;
}

.preline-calendar-event--tentative {
    opacity: 0.75;
}

.preline-calendar-event--cancelled {
    opacity: 0.5;
    text-decoration: line-through;
}

.preline-calendar-event-content {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.preline-calendar-event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.preline-calendar-event-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.preline-calendar-event-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preline-calendar-event-time {
    font-size: 11px;
    opacity: 0.85;
    white-space: nowrap;
}

.preline-calendar-event-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Event Recurrence Icon */
.preline-calendar-event-recurring-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    opacity: 0.75;
}

.preline-calendar-event-recurring-icon svg {
    width: 12px;
    height: 12px;
}

.preline-calendar-event-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
}

/* All Day Event in Day/Week View */
.preline-calendar-all-day-event {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   Month View
   ----------------------------------------------------------------------------- */

.preline-calendar-month-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preline-calendar-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--preline-calendar-border);
    background: var(--preline-calendar-bg);
}

.preline-calendar-month-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--preline-calendar-gap-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--preline-calendar-text-muted);
    text-transform: uppercase;
}

.preline-calendar-month-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.preline-calendar-month-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

.preline-calendar-month-day {
    display: flex;
    flex-direction: column;
    min-height: 100px;
    border-right: 1px solid var(--preline-calendar-border);
    border-bottom: 1px solid var(--preline-calendar-border);
    background: var(--preline-calendar-bg);
    cursor: pointer;
    transition: background-color var(--preline-calendar-transition);
}

.preline-calendar-month-day:nth-child(7n) {
    border-right: none;
}

.preline-calendar-month-day:hover {
    background: var(--preline-calendar-bg-hover);
}

.preline-calendar-month-day--other-month {
    background: var(--preline-calendar-bg-hover);
}

.preline-calendar-month-day--today .preline-calendar-month-day-number {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
}

.preline-calendar-month-day--selected {
    background: var(--preline-calendar-primary-bg);
}

.preline-calendar-month-day-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--preline-calendar-gap-sm);
}

.preline-calendar-month-day-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--preline-calendar-text);
    border-radius: var(--preline-calendar-radius-full);
}

.preline-calendar-month-day--other-month .preline-calendar-month-day-number {
    color: var(--preline-calendar-text-muted);
}

.preline-calendar-month-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--preline-calendar-gap-xs) var(--preline-calendar-gap-xs);
    flex: 1;
    overflow: hidden;
}

.preline-calendar-month-event {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--preline-calendar-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.preline-calendar-month-event-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.preline-calendar-month-event-time {
    font-weight: 600;
}

.preline-calendar-month-event-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--preline-calendar-radius-full);
    flex-shrink: 0;
}

.preline-calendar-month-more-btn {
    background: transparent;
    color: var(--preline-calendar-text-secondary);
    font-weight: 500;
    padding: 2px;
}

.preline-calendar-month-more-btn:hover {
    color: var(--preline-calendar-primary);
}

/* -----------------------------------------------------------------------------
   Year View
   ----------------------------------------------------------------------------- */

.preline-calendar-year-view {
    display: block;
    padding: var(--preline-calendar-gap-lg);
    overflow: auto;
}

.preline-calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--preline-calendar-gap-lg);
}

@media (max-width: 1024px) {
    .preline-calendar-year-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .preline-calendar-year-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .preline-calendar-year-grid {
        grid-template-columns: 1fr;
    }
}

.preline-calendar-year-month {
    background: var(--preline-calendar-bg);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
    overflow: hidden;
}

.preline-calendar-year-month-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--preline-calendar-gap-sm) var(--preline-calendar-gap-md);
    background: var(--preline-calendar-bg-hover);
    border: none;
    border-bottom: 1px solid var(--preline-calendar-border);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    width: 100%;
    transition: background-color var(--preline-calendar-transition);
}

.preline-calendar-year-month-header:hover {
    background: var(--preline-calendar-bg-active);
}

.preline-calendar-year-month-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--preline-calendar-text);
}

.preline-calendar-year-month-grid {
    padding: var(--preline-calendar-gap-sm);
}

.preline-calendar-year-month-body {
    padding: var(--preline-calendar-gap-sm);
}

/* Year view weekday headers - support both naming conventions */
.preline-calendar-year-weekdays,
.preline-calendar-year-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: var(--preline-calendar-gap-xs);
}

.preline-calendar-year-weekday,
.preline-calendar-year-month-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--preline-calendar-text-muted);
    text-transform: uppercase;
    height: 20px;
}

/* Year view days grid - support both naming conventions */
.preline-calendar-year-days,
.preline-calendar-year-month-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.preline-calendar-year-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-size: 11px;
    color: var(--preline-calendar-text);
    background: transparent;
    border: none;
    border-radius: var(--preline-calendar-radius-sm);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-year-day:hover {
    background: var(--preline-calendar-bg-hover);
}

.preline-calendar-year-day--other-month {
    color: var(--preline-calendar-text-muted);
    visibility: hidden;
}

.preline-calendar-year-day--today {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
    font-weight: 600;
}

.preline-calendar-year-day--has-events {
    position: relative;
}

.preline-calendar-year-day--has-events::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--preline-calendar-primary);
    border-radius: var(--preline-calendar-radius-full);
}

.preline-calendar-year-day--today.preline-calendar-year-day--has-events::after {
    background: var(--preline-calendar-text-inverse);
}

.preline-calendar-year-event-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--preline-calendar-primary);
    border-radius: var(--preline-calendar-radius-full);
}

.preline-calendar-year-day--today .preline-calendar-year-event-dot {
    background: var(--preline-calendar-text-inverse);
}

/* -----------------------------------------------------------------------------
   Modals
   ----------------------------------------------------------------------------- */

.preline-calendar-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--preline-calendar-z-modal-backdrop);
    opacity: 0;
    transition: opacity var(--preline-calendar-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--preline-calendar-gap-lg);
}

.preline-calendar-modal-backdrop--open {
    opacity: 1;
}

.preline-calendar-modal {
    background: var(--preline-calendar-bg);
    border-radius: var(--preline-calendar-radius-lg);
    box-shadow: var(--preline-calendar-shadow-xl);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: var(--preline-calendar-z-modal);
    transform: scale(0.95);
    transition: transform var(--preline-calendar-transition);
}

.preline-calendar-modal-backdrop--open .preline-calendar-modal {
    transform: scale(1);
}

.preline-calendar-modal--wide {
    max-width: 640px;
}

.preline-calendar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--preline-calendar-gap-lg);
    border-bottom: 1px solid var(--preline-calendar-border);
}

.preline-calendar-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    margin: 0;
}

.preline-calendar-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--preline-calendar-text-secondary);
    border: none;
    border-radius: var(--preline-calendar-radius-md);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-modal-close:hover {
    background: var(--preline-calendar-bg-hover);
    color: var(--preline-calendar-text);
}

.preline-calendar-modal-body {
    padding: var(--preline-calendar-gap-lg);
}

.preline-calendar-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--preline-calendar-gap-sm);
    padding: var(--preline-calendar-gap-md) var(--preline-calendar-gap-lg);
    border-top: 1px solid var(--preline-calendar-border);
}

/* Form Elements */
.preline-calendar-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-xs);
    margin-bottom: var(--preline-calendar-gap-md);
}

.preline-calendar-form-group:last-child {
    margin-bottom: 0;
}

.preline-calendar-form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--preline-calendar-text);
}

.preline-calendar-form-input,
.preline-calendar-form-select,
.preline-calendar-form-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--preline-calendar-text);
    background: var(--preline-calendar-bg);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
    transition: border-color var(--preline-calendar-transition), box-shadow var(--preline-calendar-transition);
}

.preline-calendar-form-input:focus,
.preline-calendar-form-select:focus,
.preline-calendar-form-textarea:focus {
    outline: none;
    border-color: var(--preline-calendar-primary);
    box-shadow: 0 0 0 3px var(--preline-calendar-primary-bg);
}

.preline-calendar-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.preline-calendar-form-checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-sm);
}

.preline-calendar-form-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--preline-calendar-primary);
}

.preline-calendar-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--preline-calendar-gap-md);
}

/* Buttons */
.preline-calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--preline-calendar-gap-sm);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: var(--preline-calendar-radius-md);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-btn:focus {
    outline: 2px solid var(--preline-calendar-primary);
    outline-offset: 2px;
}

.preline-calendar-btn--primary {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
}

.preline-calendar-btn--primary:hover {
    background: var(--preline-calendar-primary-dark);
}

.preline-calendar-btn--secondary {
    background: var(--preline-calendar-bg);
    color: var(--preline-calendar-text);
    border: 1px solid var(--preline-calendar-border);
}

.preline-calendar-btn--secondary:hover {
    background: var(--preline-calendar-bg-hover);
    border-color: var(--preline-calendar-border-dark);
}

.preline-calendar-btn--danger {
    background: #ef4444;
    color: #ffffff;
}

.preline-calendar-btn--danger:hover {
    background: #dc2626;
}

.preline-calendar-btn--ghost {
    background: transparent;
    color: var(--preline-calendar-text-secondary);
}

.preline-calendar-btn--ghost:hover {
    background: var(--preline-calendar-bg-hover);
    color: var(--preline-calendar-text);
}

.preline-calendar-btn--sm {
    padding: 6px 12px;
    font-size: 13px;
}

.preline-calendar-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

/* Event Detail Modal */
.preline-calendar-event-detail {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-md);
}

.preline-calendar-event-detail-header {
    display: flex;
    align-items: flex-start;
    gap: var(--preline-calendar-gap-md);
}

.preline-calendar-event-detail-color {
    width: 4px;
    border-radius: var(--preline-calendar-radius-full);
    align-self: stretch;
}

.preline-calendar-event-detail-content {
    flex: 1;
}

.preline-calendar-event-detail-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    margin: 0 0 var(--preline-calendar-gap-sm);
}

.preline-calendar-event-detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--preline-calendar-gap-sm);
    padding: var(--preline-calendar-gap-sm) 0;
    color: var(--preline-calendar-text-secondary);
    font-size: 14px;
}

.preline-calendar-event-detail-row svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.preline-calendar-event-detail-row-content {
    flex: 1;
}

/* Color Picker */
.preline-calendar-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--preline-calendar-gap-sm);
}

.preline-calendar-color-option {
    width: 28px;
    height: 28px;
    border-radius: var(--preline-calendar-radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-color-option:hover {
    transform: scale(1.1);
}

.preline-calendar-color-option--selected {
    border-color: var(--preline-calendar-text);
    box-shadow: 0 0 0 2px var(--preline-calendar-bg);
}

/* Recurrence Editor */
.preline-calendar-recurrence-editor {
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
    padding: var(--preline-calendar-gap-md);
}

.preline-calendar-recurrence-weekdays {
    display: flex;
    gap: var(--preline-calendar-gap-xs);
}

.preline-calendar-recurrence-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    color: var(--preline-calendar-text-secondary);
    background: var(--preline-calendar-bg);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-full);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-recurrence-weekday:hover {
    background: var(--preline-calendar-bg-hover);
    border-color: var(--preline-calendar-border-dark);
}

.preline-calendar-recurrence-weekday--selected {
    background: var(--preline-calendar-primary);
    color: var(--preline-calendar-text-inverse);
    border-color: var(--preline-calendar-primary);
}

/* Delete Confirmation */
.preline-calendar-delete-confirm {
    text-align: center;
}

.preline-calendar-delete-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #fef2f2;
    color: #ef4444;
    border-radius: var(--preline-calendar-radius-full);
    margin-bottom: var(--preline-calendar-gap-md);
}

.preline-calendar-delete-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--preline-calendar-text);
    margin: 0 0 var(--preline-calendar-gap-sm);
}

.preline-calendar-delete-confirm-message {
    font-size: 14px;
    color: var(--preline-calendar-text-secondary);
    margin: 0 0 var(--preline-calendar-gap-lg);
}

.preline-calendar-delete-scope-options {
    display: flex;
    flex-direction: column;
    gap: var(--preline-calendar-gap-sm);
    text-align: left;
    margin-bottom: var(--preline-calendar-gap-lg);
}

.preline-calendar-delete-scope-option {
    display: flex;
    align-items: center;
    gap: var(--preline-calendar-gap-sm);
    padding: var(--preline-calendar-gap-sm) var(--preline-calendar-gap-md);
    background: var(--preline-calendar-bg);
    border: 1px solid var(--preline-calendar-border);
    border-radius: var(--preline-calendar-radius-md);
    cursor: pointer;
    transition: all var(--preline-calendar-transition);
}

.preline-calendar-delete-scope-option:hover {
    background: var(--preline-calendar-bg-hover);
    border-color: var(--preline-calendar-border-dark);
}

.preline-calendar-delete-scope-option--selected {
    background: var(--preline-calendar-primary-bg);
    border-color: var(--preline-calendar-primary);
}

.preline-calendar-delete-scope-option input {
    display: none;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .preline-calendar {
        grid-template-columns: 1fr;
    }
    
    .preline-calendar-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--preline-calendar-transition-slow);
        z-index: var(--preline-calendar-z-sidebar);
        box-shadow: var(--preline-calendar-shadow-lg);
    }
    
    .preline-calendar-sidebar--open {
        transform: translateX(0);
    }
    
    .preline-calendar-header {
        flex-wrap: wrap;
    }
    
    .preline-calendar-header-title {
        font-size: 16px;
    }
    
    .preline-calendar-view-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .preline-calendar {
        min-height: 500px;
    }
    
    .preline-calendar-header {
        padding: var(--preline-calendar-gap-sm) var(--preline-calendar-gap-md);
    }
    
    .preline-calendar-header-left {
        width: 100%;
        margin-bottom: var(--preline-calendar-gap-sm);
    }
    
    .preline-calendar-header-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .preline-calendar-month-day {
        min-height: 80px;
    }
    
    .preline-calendar-month-event {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .preline-calendar-modal {
        margin: var(--preline-calendar-gap-sm);
        max-width: calc(100% - var(--preline-calendar-gap-lg));
    }
    
    .preline-calendar-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .preline-calendar-header-nav {
        order: -1;
    }
    
    .preline-calendar-today-btn {
        display: none;
    }
    
    .preline-calendar-day-column-header {
        padding: var(--preline-calendar-gap-xs);
    }
    
    .preline-calendar-day-column-weekday {
        font-size: 10px;
    }
    
    .preline-calendar-day-column-date {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .preline-calendar-time-grid-label {
        width: 40px;
        font-size: 10px;
    }
}

/* -----------------------------------------------------------------------------
   Print Styles
   ----------------------------------------------------------------------------- */

@media print {
    .preline-calendar {
        border: none;
        box-shadow: none;
    }
    
    .preline-calendar-sidebar,
    .preline-calendar-create-btn,
    .preline-calendar-header-nav,
    .preline-calendar-view-switcher,
    .preline-calendar-sidebar-toggle {
        display: none !important;
    }
    
    .preline-calendar {
        grid-template-columns: 1fr;
    }
    
    .preline-calendar-event-card:hover {
        box-shadow: none;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   Accessibility
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .preline-calendar,
    .preline-calendar * {
        transition: none !important;
        animation: none !important;
    }
}

.preline-calendar :focus-visible {
    outline: 2px solid var(--preline-calendar-primary);
    outline-offset: 2px;
}

/* Screen reader only */
.preline-calendar-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .preline-calendar {
        --preline-calendar-border: #000000;
        --preline-calendar-text: #000000;
    }
    
    .preline-calendar-event-card {
        border: 2px solid currentColor;
    }
}