/**
 * Anbaukalender Styles - Wochen-basierte Darstellung
 * 
 * @package Weezelbau
 * @subpackage Modules/Anbaukalender
 * @version 1.2.0
 */

.anbaukalender-wrapper {
    border: 1px solid var(--bs-border-color);
    border-radius: 7px;
    padding: 1rem;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.anbaukalender-wrapper h3 {
    font-weight: 600;
    margin: 0;
}

h3#kalender-titel {
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

#ernte-prognose {
    background: var(--primary-700);
    margin-bottom: 1.5rem;
    color: var(--gray-50);
    padding: .25rem .75rem;
    border-radius: 50px;
}

.calendar-grid-container {
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.calendar-grid-container::-webkit-scrollbar {
    height: 6px;
}

.calendar-grid-container::-webkit-scrollbar-thumb {
    background-color: #ced4da;
    border-radius: 3px;
}

.calendar-grid-container::-webkit-scrollbar-thumb:hover {
    background-color: #adb5bd;
}

/* Wochen-basiertes Grid */
.calendar-grid-weeks {
    display: grid;
    grid-template-columns: 140px repeat(52, 30px); /* 52 Wochen */
    gap: 1px;
    min-width: 1700px; /* 140 + (52 * 30) + gaps */
}

.calendar-grid-weeks .phase-bar-container {
    min-height: 40px;
    position: relative;
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(52, 1fr);
    gap: 1px;
    align-items: center;
}

/* Wochen-Header */
.calendar-grid-weeks .week-cell {
    background: #f8f9fa;
    border-radius: 2px;
    text-align: center;
    padding: 5px 2px;
    font-size: 0.65rem;
    color: #6c757d;
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.calendar-grid-weeks .week-cell.month-start {
    background: #e9ecef;
    font-weight: 600;
}

.calendar-grid-weeks .week-cell .month-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 2px;
}

.calendar-grid-weeks .week-cell .week-num {
    font-size: 0.55rem;
    color: #868e96;
}

/* Phase Labels */
.calendar-grid-weeks .phase-label {
    font-weight: 600;
    border-right: 4px solid #e9ecef;
    font-size: 0.9rem;
    grid-column: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
}

.calendar-grid-weeks .header-cell {
    grid-column: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #212529;
}

/* Phase Bars */
.calendar-grid-weeks .phase-bar {
    height: 20px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Border zwischen Zeilen */
.calendar-grid-weeks .phase-label:not(#label-ernte) {
    border-bottom: 1px solid #e9ecef;
}

.calendar-grid-weeks .phase-bar-container:not(#bar-ernte) {
    border-bottom: 1px solid #e9ecef;
}

/* Phase Colors */
.phase-bar[data-phase="growzeit"] {
    background-color: #e9ecef;
}

.phase-bar[data-phase="anwuchs"] {
    background-color: #5887ff;
}

.phase-bar[data-phase="wuchs"] {
    background-color: #f7b267;
}

.phase-bar[data-phase="training"] {
    background-color: #00b4d8;
}

.phase-bar[data-phase="bluete"] {
    background-color: #8338ec;
}

.phase-bar[data-phase="ernte"] {
    background-color: #f25f5c;
}

/* Hover-Effekt für Wochen */
.calendar-grid-weeks .week-cell:hover {
    background: #dee2e6;
    cursor: crosshair;
}

/* Tooltip für Wochen (optional) */
.calendar-grid-weeks .week-cell:hover::after {
    content: attr(data-date);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #212529;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .anbaukalender-wrapper {
        padding: 1rem;
    }
    
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .calendar-grid-weeks {
        grid-template-columns: 100px repeat(52, 25px);
        min-width: 1400px;
    }
    
    .calendar-grid-weeks .phase-label {
        font-size: 0.8rem;
        padding: 0 8px;
    }
    
    .calendar-grid-weeks .week-cell {
        padding: 3px 1px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .anbaukalender-wrapper {
        background-color: #1a1a1a;
        border-color: #2d2d2d;
        color: #e0e0e0;
    }
    
    .calendar-grid-weeks .week-cell {
        background: #2d2d2d;
        color: #b0b0b0;
    }
    
    .calendar-grid-weeks .week-cell.month-start {
        background: #3d3d3d;
    }
    
    .calendar-grid-weeks .header-cell,
    .calendar-grid-weeks .phase-label {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .calendar-grid-container::-webkit-scrollbar-thumb {
        background-color: #4a4a4a;
    }
    
    .calendar-grid-container::-webkit-scrollbar-thumb:hover {
        background-color: #5a5a5a;
    }
}

/* Print styles */
@media print {
    .anbaukalender-wrapper {
        break-inside: avoid;
    }
    
    .calendar-grid-container {
        overflow: visible;
    }
    
    .calendar-grid-weeks {
        min-width: 100%;
    }
}


/* Phase Bars */
.calendar-grid-weeks .phase-bar {
    height: 20px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zeit-Text in den Balken */
.phase-bar .phase-time {
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spezielle Farben für bessere Lesbarkeit */
.phase-bar[data-phase="growzeit"] .phase-time {
    color: #495057;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.phase-bar[data-phase="wuchs"] .phase-time {
    color: #212529;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Phase Bars */
.calendar-grid-weeks .phase-bar {
    height: 20px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zeit-Text in den Balken */
.phase-bar .phase-time {
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spezielle Farben für bessere Lesbarkeit */
.phase-bar[data-phase="growzeit"] .phase-time {
    color: #495057;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.phase-bar[data-phase="wuchs"] .phase-time {
    color: #212529;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}