body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; margin: 0; color: #333; }
#login-screen { height: 100vh; display: flex; justify-content: center; align-items: center; background: #2c3e50; }
.login-box { background: white; padding: 40px; border-radius: 8px; width: 300px; text-align: center; }
.login-box input { width: 90%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }
.login-box button { width: 100%; padding: 10px; background: #27ae60; color: white; border: none; border-radius: 4px; cursor: pointer; }
.error { color: red; font-size: 14px; }

#calendar-screen { 
    padding: 20px; 
    width: 100%; 
    max-width: none; /* Убираем предыдущее ограничение ширины */
    margin: 0; 
    box-sizing: border-box; 
}
.top-bar { display: flex; justify-content: space-between; margin-bottom: 20px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.controls { display: flex; gap: 15px; flex-grow: 1; }
/* Стили для легенды */
.legend-container { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; }
.legend-color { width: 16px; height: 16px; border-radius: 4px; }

/* Разрешаем тексту в календаре переноситься на новую строку */
.fc-event { cursor: pointer; padding: 2px 4px !important; }
.fc-event-title { white-space: normal !important; line-height: 1.2; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#year-selector { padding: 8px; font-size: 16px; border-radius: 4px; border: 1px solid #ccc; }
#live-search { padding: 8px; font-size: 16px; width: 300px; border-radius: 4px; border: 1px solid #ccc; }
.logout-btn { background: #e74c3c; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

#calendar { background: white; padding: 20px; border-radius: 8px; }
.fc-event { cursor: pointer; font-size: 0.8em; padding: 2px; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: #fff; margin: 5% auto; padding: 25px; border-radius: 8px; width: 60%; max-width: 600px; position: relative; }
.close-btn { color: #aaa; float: right; font-size: 28px; cursor: pointer; }
.detail-row { margin-bottom: 10px; line-height: 1.4; }
.detail-label { font-weight: bold; display: inline-block; width: 150px; }

/* Принудительно увеличиваем высоту каждого месяца и ячеек */
.fc .fc-multimonth-daygrid {
    min-height: 350px !important; /* Делает сам блок месяца выше */
}
.fc .fc-daygrid-day-frame {
    min-height: 50px !important; /* Увеличивает минимальную высоту отдельного квадратика дня */
}

/* Немного уменьшаем отступы внутри плашки, чтобы текст лучше влезал */
.fc-event { 
    padding: 2px 3px !important; 
    font-size: 0.8em;
}