/**
 * Google Calendar Widget Styles
 * Modern, responsive calendar with easy-to-customize theming
 * 
 * HOW TO CUSTOMIZE COLORS:
 * 1. Choose your theme mode: light or dark (add class to .gc-widget)
 * 2. Set your 3 brand colors: primary, secondary, accent
 * 3. All gradients and variations are auto-generated!
 * 
 * Example - Client Theme:
 * .gc-widget[data-theme="client-name"] {
 *     --gc-primary: #2D5CAA;
 *     --gc-secondary: #ABC8E7;
 *     --gc-accent: #C10230;
 * }
 */

/* ================================================
   THEME CONFIGURATION
   Edit these color values to customize your calendar
   ================================================ */

/* Default Theme (Light) */
:root,
.gc-widget {
    /* ===== BRAND COLORS - Edit these 3 colors ===== */
    --gc-primary: #1C4A8C;      /* Main brand color (2563eb) */
    --gc-secondary: #2D5CAA;    /* Secondary/supporting color (ABC8E7) */
    --gc-accent: #D59E0F;       /* Accent/highlight color (dc2626).  */
    
    /* ===== BACKGROUND MODE - Set to 'light' or 'dark' ===== */
    --gc-bg-mode: light;
    
    /* ================================================
       AUTO-GENERATED COLORS (Do not edit below)
       Using CSS color-mix() for automatic variations
       ================================================ */
    
    /* Primary Color Variations */
    --gc-primary-hover: color-mix(in srgb, var(--gc-primary), black 15%);
    --gc-primary-dark: color-mix(in srgb, var(--gc-primary), black 25%);
    --gc-primary-light: color-mix(in srgb, var(--gc-primary), white 85%);
    --gc-primary-transparent: color-mix(in srgb, var(--gc-primary), transparent 85%);
    
    /* Secondary Color Variations */
    --gc-secondary-hover: color-mix(in srgb, var(--gc-secondary), black 10%);
    --gc-secondary-dark: color-mix(in srgb, var(--gc-secondary), black 20%);
    
    /* Accent Color Variations */
    --gc-accent-hover: color-mix(in srgb, var(--gc-accent), black 15%);
    --gc-accent-light: color-mix(in srgb, var(--gc-accent), white 85%);
    
    /* Background Colors - Light Theme (default) */
    --gc-bg: #ffffff;
    --gc-bg-secondary: #f9fafb;
    --gc-bg-hover: #f3f4f6;
    --gc-bg-transparent: rgba(255, 255, 255, 0.9);
    
    /* Text Colors - Light Theme */
    --gc-text-primary: #1f2937;
    --gc-text-secondary: #6b7280;
    --gc-text-muted: #9ca3af;
    --gc-text-inverse: #ffffff;
    
    /* Border Colors - Light Theme */
    --gc-border: #e5e7eb;
    --gc-border-hover: #d1d5db;
    
    /* Today Highlight */
    --gc-today-bg: color-mix(in srgb, var(--gc-accent), white 90%);
    --gc-today-border: var(--gc-accent);
    
    /* Event Colors - Derived from primary and accent */
    --gc-event-default: var(--gc-secondary);
    --gc-event-1: var(--gc-secondary);
    --gc-event-2: #059669; /* Green */
    --gc-event-3: var(--gc-secondary);
    --gc-event-4: #7c3aed; /* Purple */
    --gc-event-5: #ea580c; /* Orange */
    --gc-event-6: #0891b2; /* Cyan */
    --gc-event-7: #db2777; /* Pink */
    --gc-event-8: #65a30d; /* Lime */
    --gc-event-9: #0d9488; /* Teal */
    --gc-event-10: #4f46e5; /* Indigo */
    --gc-event-11: #ca8a04; /* Yellow */
    
    /* Shadows */
    --gc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --gc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --gc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Spacing */
    --gc-spacing-xs: 4px;
    --gc-spacing-sm: 8px;
    --gc-spacing-md: 16px;
    --gc-spacing-lg: 24px;
    --gc-spacing-xl: 32px;
    
    /* Border Radius */
    --gc-radius-sm: 4px;
    --gc-radius-md: 8px;
    --gc-radius-lg: 12px;
    --gc-radius-full: 9999px;
    
    /* Transitions */
    --gc-transition-fast: 150ms ease;
    --gc-transition-normal: 250ms ease;
    --gc-transition-slow: 350ms ease;
    
    /* Font */
    --gc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ================================================
   DARK THEME
   Add class "gc-theme-dark" to .gc-widget for dark mode
   ================================================ */
.gc-widget.gc-theme-dark,
.gc-widget[data-theme-mode="dark"] {
    --gc-bg-mode: dark;
    
    /* Background Colors - Dark Theme */
    --gc-bg: #1f2937;
    --gc-bg-secondary: #111827;
    --gc-bg-hover: #374151;
    --gc-bg-transparent: rgba(31, 41, 55, 0.95);
    
    /* Text Colors - Dark Theme */
    --gc-text-primary: #f9fafb;
    --gc-text-secondary: #d1d5db;
    --gc-text-muted: #9ca3af;
    
    /* Border Colors - Dark Theme */
    --gc-border: #374151;
    --gc-border-hover: #4b5563;
    
    /* Today Highlight - Dark Theme */
    --gc-today-bg: color-mix(in srgb, var(--gc-accent), black 70%);
    
    /* Shadows - Dark Theme */
    --gc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --gc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --gc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}

/* System preference dark mode (optional - uncomment to enable) */
/*
@media (prefers-color-scheme: dark) {
    .gc-widget:not(.gc-theme-light):not([data-theme-mode="light"]) {
        --gc-bg-mode: dark;
        --gc-bg: #1f2937;
        --gc-bg-secondary: #111827;
        --gc-bg-hover: #374151;
        --gc-bg-transparent: rgba(31, 41, 55, 0.95);
        --gc-text-primary: #f9fafb;
        --gc-text-secondary: #d1d5db;
        --gc-text-muted: #9ca3af;
        --gc-border: #374151;
        --gc-border-hover: #4b5563;
        --gc-today-bg: color-mix(in srgb, var(--gc-accent), black 70%);
        --gc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
        --gc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
        --gc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
    }
}
*/

/* ================================================
   CLIENT THEME EXAMPLES
   Copy and modify for each client
   ================================================ */

/* Client 1: Tolhurst Creative (Default blue theme) */
.gc-widget[data-theme="tolhurst"] {
    --gc-primary: #2563eb;
    --gc-secondary: #e0e7ff;
    --gc-accent: #dc2626;
}

/* Client 2: Custom theme with white background */
.gc-widget[data-theme="client-custom"] {
    --gc-primary: #2D5CAA;
    --gc-secondary: #ABC8E7;
    --gc-accent: #C10230;
}

/* You can also combine with dark mode */
.gc-widget[data-theme="client-custom"].gc-theme-dark {
    /* Dark mode overrides for this theme if needed */
}

/* ================================================
   QUICK THEME PRESETS
   Ready-to-use theme configurations
   ================================================ */

/* Ocean Blue Theme */
.gc-widget[data-theme="ocean"] {
    --gc-primary: #0ea5e9;
    --gc-secondary: #e0f2fe;
    --gc-accent: #f59e0b;
}

/* Forest Green Theme */
.gc-widget[data-theme="forest"] {
    --gc-primary: #059669;
    --gc-secondary: #d1fae5;
    --gc-accent: #f43f5e;
}

/* Purple Theme */
.gc-widget[data-theme="purple"] {
    --gc-primary: #7c3aed;
    --gc-secondary: #ede9fe;
    --gc-accent: #f59e0b;
}

/* Minimal Theme (Grayscale with accent) */
.gc-widget[data-theme="minimal"] {
    --gc-primary: #374151;
    --gc-secondary: #f3f4f6;
    --gc-accent: #ef4444;
}

/* ================================================
   BASE STYLES
   ================================================ */

/* Container */
.gc-widget {
    font-family: var(--gc-font-family);
    background-color: var(--gc-bg);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-shadow);
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    color: var(--gc-text-primary);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gc-widget *,
.gc-widget *::before,
.gc-widget *::after {
    box-sizing: border-box;
}

/* Header - Uses gradient from primary to auto-darkened primary */
.gc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gc-spacing-md) var(--gc-spacing-lg);
    background: linear-gradient(135deg, var(--gc-primary) 0%, var(--gc-primary-dark) 100%);
    color: var(--gc-text-inverse);
    flex-shrink: 0;
}

.gc-header-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gc-spacing-sm);
}

.gc-header-title svg {
    width: 24px;
    height: 24px;
}

.gc-nav {
    display: flex;
    align-items: center;
    gap: var(--gc-spacing-sm);
}

.gc-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--gc-text-inverse);
    border-radius: var(--gc-radius-md);
    cursor: pointer;
    transition: background-color var(--gc-transition-fast);
}

.gc-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.gc-nav-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.gc-nav-btn:active {
    background-color: rgba(255, 255, 255, 0.35);
}

.gc-nav-btn svg {
    width: 20px;
    height: 20px;
}

.gc-current-month {
    font-size: 1.125rem;
    font-weight: 500;
    min-width: 160px;
    text-align: center;
}

/* Header Controls Container */
.gc-header-controls {
    display: flex;
    align-items: center;
    gap: var(--gc-spacing-md);
}

/* View Toggle Buttons */
.gc-view-toggle {
    display: flex;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--gc-radius-md);
    padding: 3px;
}

.gc-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--gc-text-inverse);
    border-radius: var(--gc-radius-sm);
    cursor: pointer;
    transition: all var(--gc-transition-fast);
    opacity: 0.7;
}

.gc-view-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

.gc-view-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.gc-view-btn--active {
    background-color: rgba(255, 255, 255, 0.25);
    opacity: 1;
}

.gc-view-btn svg {
    width: 18px;
    height: 18px;
}

/* Loading State */
.gc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gc-spacing-xl);
    color: var(--gc-text-secondary);
}

.gc-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gc-border);
    border-top-color: var(--gc-primary);
    border-radius: 50%;
    animation: gc-spin 1s linear infinite;
    margin-right: var(--gc-spacing-md);
}

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

/* Error State */
.gc-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gc-spacing-xl);
    color: var(--gc-text-secondary);
    text-align: center;
}

.gc-error-icon {
    width: 48px;
    height: 48px;
    color: var(--gc-accent);
    margin-bottom: var(--gc-spacing-md);
}

.gc-error-message {
    font-size: 0.875rem;
    max-width: 300px;
}

.gc-retry-btn {
    margin-top: var(--gc-spacing-md);
    padding: var(--gc-spacing-sm) var(--gc-spacing-md);
    background-color: var(--gc-primary);
    color: var(--gc-text-inverse);
    border: none;
    border-radius: var(--gc-radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color var(--gc-transition-fast);
}

.gc-retry-btn:hover {
    background-color: var(--gc-primary-hover);
}

/* Calendar Grid */
.gc-calendar {
    padding: var(--gc-spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gc-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Days of Week Header */
.gc-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--gc-spacing-sm);
    flex-shrink: 0;
}

.gc-day-name {
    padding: var(--gc-spacing-sm);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Calendar Days Grid */
.gc-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 2px;
    background-color: var(--gc-border);
    border-radius: var(--gc-radius-md);
    overflow: hidden;
    flex: 1;
}

/* Individual Day Cell */
.gc-day {
    min-width: 0; /* Ensures uniform column width - prevents content overflow from expanding cells */
    min-height: 60px;
    padding: var(--gc-spacing-xs);
    background-color: var(--gc-bg);
    display: flex;
    flex-direction: column;
    transition: background-color var(--gc-transition-fast);
}

.gc-day:hover {
    background-color: var(--gc-bg-hover);
}

.gc-day--other-month {
    background-color: var(--gc-bg-secondary);
}

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

.gc-day--today {
    background-color: var(--gc-today-bg);
}

.gc-day--today .gc-day-number {
    background-color: var(--gc-today-border);
    color: var(--gc-text-inverse);
}

.gc-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--gc-radius-full);
    margin-bottom: var(--gc-spacing-xs);
}

/* Events Container */
.gc-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Individual Event */
.gc-event {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--gc-radius-sm);
    background-color: var(--gc-event-default);
    color: var(--gc-text-inverse);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: filter var(--gc-transition-fast), transform var(--gc-transition-fast);
    line-height: 1.3;
}

.gc-event:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.gc-event--color-1 { background-color: var(--gc-event-1); }
.gc-event--color-2 { background-color: var(--gc-event-2); }
.gc-event--color-3 { background-color: var(--gc-event-3); }
.gc-event--color-4 { background-color: var(--gc-event-4); }
.gc-event--color-5 { background-color: var(--gc-event-5); }
.gc-event--color-6 { background-color: var(--gc-event-6); }
.gc-event--color-7 { background-color: var(--gc-event-7); }
.gc-event--color-8 { background-color: var(--gc-event-8); }
.gc-event--color-9 { background-color: var(--gc-event-9); }
.gc-event--color-10 { background-color: var(--gc-event-10); }
.gc-event--color-11 { background-color: var(--gc-event-11); }

.gc-event--all-day {
    font-weight: 500;
}

.gc-event-time {
    font-size: 0.65rem;
    opacity: 0.9;
    margin-right: 4px;
}

/* More Events Indicator */
.gc-more-events {
    font-size: 0.7rem;
    color: var(--gc-primary);
    padding: 2px 4px;
    cursor: pointer;
    font-weight: 500;
}

.gc-more-events:hover {
    text-decoration: underline;
}

/* Event Tooltip/Popover */
.gc-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 320px;
    padding: var(--gc-spacing-md);
    background-color: var(--gc-bg);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-shadow-lg);
    border: 1px solid var(--gc-border);
    animation: gc-tooltip-in 0.2s ease;
}

@keyframes gc-tooltip-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gc-tooltip-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--gc-spacing-sm) 0;
    color: var(--gc-text-primary);
    display: flex;
    align-items: flex-start;
    gap: var(--gc-spacing-sm);
}

.gc-tooltip-color {
    width: 12px;
    height: 12px;
    border-radius: var(--gc-radius-sm);
    flex-shrink: 0;
    margin-top: 4px;
}

.gc-tooltip-content {
    font-size: 0.875rem;
    color: var(--gc-text-secondary);
}

.gc-tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: var(--gc-spacing-sm);
    margin-bottom: var(--gc-spacing-xs);
}

.gc-tooltip-row:last-child {
    margin-bottom: 0;
}

.gc-tooltip-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gc-text-muted);
}

.gc-tooltip-close {
    position: absolute;
    top: var(--gc-spacing-sm);
    right: var(--gc-spacing-sm);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gc-text-muted);
    cursor: pointer;
    border-radius: var(--gc-radius-sm);
    transition: background-color var(--gc-transition-fast);
}

.gc-tooltip-close:hover {
    background-color: var(--gc-bg-hover);
    color: var(--gc-text-primary);
}

.gc-tooltip-description {
    margin-top: var(--gc-spacing-sm);
    padding-top: var(--gc-spacing-sm);
    border-top: 1px solid var(--gc-border);
    font-size: 0.8125rem;
    line-height: 1.5;
    max-height: 100px;
    overflow-y: auto;
}

/* Footer */
.gc-footer {
    padding: var(--gc-spacing-sm) var(--gc-spacing-md);
    text-align: center;
    font-size: 0.75rem;
    color: var(--gc-text-muted);
    border-top: 1px solid var(--gc-border);
    flex-shrink: 0;
}

.gc-footer a {
    color: var(--gc-primary);
    text-decoration: none;
}

.gc-footer a:hover {
    text-decoration: underline;
}

/* ================================
   Responsive Design
   ================================ */

/* Tablet Styles (768px and below) */
@media (max-width: 768px) {
    .gc-header {
        padding: var(--gc-spacing-sm) var(--gc-spacing-md);
    }
    
    .gc-header-title {
        font-size: 1.125rem;
    }
    
    .gc-calendar {
        padding: var(--gc-spacing-sm);
    }
    
    .gc-day {
        min-height: 70px;
    }
    
    .gc-list-view {
        padding: var(--gc-spacing-sm);
    }
}

/* Mobile Styles (600px and below) - List view only */
@media (max-width: 600px) {
    .gc-header {
        flex-direction: column;
        gap: var(--gc-spacing-sm);
        padding: var(--gc-spacing-sm);
    }
    
    .gc-header-title {
        font-size: 1rem;
    }
    
    .gc-header-title svg {
        width: 20px;
        height: 20px;
    }
    
    .gc-header-controls {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--gc-spacing-xs);
    }
    
    /* Hide view toggle on mobile - list view only */
    .gc-view-toggle {
        display: none;
    }
    
    .gc-nav {
        flex: 1;
        justify-content: center;
    }
    
    .gc-current-month {
        font-size: 0.9rem;
        min-width: auto;
    }
    
    .gc-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    /* Hide grid view elements on mobile */
    .gc-days-header,
    .gc-days-grid {
        display: none;
    }
    
    /* Ensure list view is always visible on mobile */
    .gc-list-view {
        display: block;
        padding: var(--gc-spacing-xs);
    }
    
    .gc-list-day-header {
        padding: var(--gc-spacing-xs) var(--gc-spacing-sm);
        flex-wrap: wrap;
    }
    
    .gc-list-day-name {
        font-size: 0.875rem;
    }
    
    .gc-list-day-date {
        font-size: 0.75rem;
    }
    
    .gc-list-event-content {
        padding: var(--gc-spacing-xs) var(--gc-spacing-sm);
    }
    
    .gc-list-event-title {
        font-size: 0.875rem;
    }
    
    .gc-list-event-details {
        font-size: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .gc-list-event-location {
        max-width: 100%;
    }
}

/* Small Mobile Styles (380px and below) */
@media (max-width: 380px) {
    .gc-header {
        padding: var(--gc-spacing-xs);
    }
    
    .gc-header-title {
        font-size: 0.9rem;
    }
    
    .gc-header-title svg {
        width: 18px;
        height: 18px;
    }
    
    .gc-view-toggle {
        padding: 2px;
    }
    
    .gc-view-btn {
        width: 36px;
        height: 36px;
    }
    
    .gc-view-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .gc-nav-btn {
        width: 36px;
        height: 36px;
    }
    
    .gc-nav-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .gc-current-month {
        font-size: 0.8rem;
    }
    
    .gc-day-name {
        font-size: 0.55rem;
        padding: 2px;
    }
    
    .gc-day {
        min-height: 45px;
        padding: 1px;
    }
    
    .gc-day-number {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }
    
    .gc-event {
        font-size: 0.5rem;
        padding: 0 2px;
    }
    
    .gc-more-events {
        font-size: 0.5rem;
    }
    
    .gc-list-day-header {
        padding: 2px var(--gc-spacing-xs);
    }
    
    .gc-list-day-name {
        font-size: 0.75rem;
    }
    
    .gc-list-day-date {
        font-size: 0.65rem;
    }
    
    .gc-list-day-today-badge {
        font-size: 0.6rem;
        padding: 1px 6px;
    }
    
    .gc-list-event-content {
        padding: 4px var(--gc-spacing-xs);
    }
    
    .gc-list-event-title {
        font-size: 0.75rem;
    }
    
    .gc-list-event-details {
        font-size: 0.65rem;
    }
    
    .gc-list-event-location {
        display: none;
    }
    
    .gc-footer {
        font-size: 0.65rem;
        padding: var(--gc-spacing-xs);
    }
}

/* Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
    .gc-nav-btn,
    .gc-view-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .gc-event {
        min-height: 24px;
        padding: 4px 6px;
    }
    
    .gc-list-event {
        min-height: 48px;
    }
    
    .gc-more-events {
        min-height: 24px;
        padding: 4px;
    }
}

/* Print Styles */
@media print {
    .gc-widget {
        box-shadow: none;
        border: 1px solid var(--gc-border);
    }
    
    .gc-nav-btn,
    .gc-tooltip {
        display: none;
    }
    
    .gc-day--today {
        background-color: transparent;
    }
    
    .gc-day--today .gc-day-number {
        background-color: var(--gc-text-primary);
        color: var(--gc-text-inverse);
    }
}

/* ================================
   List View Styles
   ================================ */

.gc-list-view {
    padding: var(--gc-spacing-md);
    flex: 1;
    overflow-y: auto;
}

.gc-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gc-spacing-xl) var(--gc-spacing-md);
    color: var(--gc-text-secondary);
    text-align: center;
}

.gc-list-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--gc-spacing-md);
    opacity: 0.5;
}

.gc-list-empty p {
    font-size: 1rem;
    margin: 0;
}

.gc-list-day {
    margin-bottom: var(--gc-spacing-md);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-md);
    overflow: hidden;
}

.gc-list-day:last-child {
    margin-bottom: 0;
}

.gc-list-day--today {
    border-color: var(--gc-today-border);
}

.gc-list-day--today .gc-list-day-header {
    background-color: var(--gc-today-bg);
}

.gc-list-day-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gc-spacing-sm);
    padding: var(--gc-spacing-sm) var(--gc-spacing-md);
    background-color: var(--gc-bg-secondary);
    border-bottom: 1px solid var(--gc-border);
}

.gc-list-day-name {
    font-weight: 600;
    color: var(--gc-text-primary);
}

.gc-list-day-date {
    color: var(--gc-text-secondary);
    font-size: 0.875rem;
}

.gc-list-day-today-badge {
    background-color: var(--gc-today-border);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--gc-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gc-list-events {
    padding: var(--gc-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--gc-spacing-xs);
}

.gc-list-event {
    display: flex;
    align-items: stretch;
    background-color: var(--gc-bg);
    border-radius: var(--gc-radius-sm);
    cursor: pointer;
    transition: all var(--gc-transition-fast);
    border: 1px solid transparent;
}

.gc-list-event:hover {
    background-color: var(--gc-bg-hover);
    border-color: var(--gc-border);
}

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

.gc-list-event-color-bar {
    width: 4px;
    min-height: 100%;
    border-radius: 2px 0 0 2px;
    flex-shrink: 0;
}

/* Event color variations for list view */
.gc-list-event.gc-event--color-1 .gc-list-event-color-bar { background-color: var(--gc-event-1); }
.gc-list-event.gc-event--color-2 .gc-list-event-color-bar { background-color: var(--gc-event-2); }
.gc-list-event.gc-event--color-3 .gc-list-event-color-bar { background-color: var(--gc-event-3); }
.gc-list-event.gc-event--color-4 .gc-list-event-color-bar { background-color: var(--gc-event-4); }
.gc-list-event.gc-event--color-5 .gc-list-event-color-bar { background-color: var(--gc-event-5); }
.gc-list-event.gc-event--color-6 .gc-list-event-color-bar { background-color: var(--gc-event-6); }
.gc-list-event.gc-event--color-7 .gc-list-event-color-bar { background-color: var(--gc-event-7); }
.gc-list-event.gc-event--color-8 .gc-list-event-color-bar { background-color: var(--gc-event-8); }
.gc-list-event.gc-event--color-9 .gc-list-event-color-bar { background-color: var(--gc-event-9); }
.gc-list-event.gc-event--color-10 .gc-list-event-color-bar { background-color: var(--gc-event-10); }
.gc-list-event.gc-event--color-11 .gc-list-event-color-bar { background-color: var(--gc-event-11); }

.gc-list-event-content {
    flex: 1;
    padding: var(--gc-spacing-sm) var(--gc-spacing-md);
    min-width: 0;
}

.gc-list-event-title {
    font-weight: 500;
    color: var(--gc-text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-list-event-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gc-spacing-sm);
    font-size: 0.875rem;
    color: var(--gc-text-secondary);
}

.gc-list-event-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gc-list-event-time--all-day {
    font-style: italic;
    color: var(--gc-text-muted);
}

.gc-list-event-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.gc-list-event-location svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* List view responsive styles */
@media (max-width: 480px) {
    .gc-list-view {
        padding: var(--gc-spacing-sm);
    }
    
    .gc-list-day-header {
        padding: var(--gc-spacing-xs) var(--gc-spacing-sm);
    }
    
    .gc-list-event-content {
        padding: var(--gc-spacing-xs) var(--gc-spacing-sm);
    }
    
    .gc-list-event-title {
        font-size: 0.875rem;
    }
    
    .gc-list-event-details {
        font-size: 0.75rem;
    }
    
    .gc-list-event-location {
        max-width: 150px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .gc-widget *,
    .gc-widget *::before,
    .gc-widget *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
.gc-event:focus,
.gc-day:focus,
.gc-list-event:focus {
    outline: 2px solid var(--gc-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --gc-border: #000000;
        --gc-text-primary: #000000;
        --gc-text-secondary: #000000;
    }
    
    .gc-event {
        border: 1px solid #000000;
    }
}