:root {
 --blue: #2f6fd6;
 --red: #e04b4b;
 --green: #3ca66b;
 --yellow: #f2c94c;
 --purple: #7c0798;
 --gray: #f4f6f9;
 --border: #e1e5ee;
 --text: #1f2d3d;
}

.calendar-container {
 background: white;
 border-radius: 10px;
 padding: 20px;
 margin-top: 20px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.calendar-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 flex-wrap: wrap;
 gap: 10px;
}

.calendar-header h2 {
 margin: 0;
 font-size: 1.5rem;
}

.calendar-nav {
 display: flex;
 gap: 10px;
}

.calendar-nav a {
 text-decoration: none;
 padding: 8px 15px;
 border-radius: 5px;
 transition: all 0.2s;
 border: 1px solid var(--border);
 color: var(--text);
 background: white;
}

.calendar-nav a:hover {
 background: var(--blue);
 color: white;
 border-color: var(--blue);
}

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 grid-auto-rows: minmax(120px, auto);
 /* Запрещаем сетке создавать новые колонки вправо */
 grid-auto-flow: row;
 gap: 5px;
}

.day-name {
 grid-row: 1;
 font-weight: 600;
 font-size: 14px;
 text-align: center;
 padding: 10px 0;
 background: var(--gray);
 border-radius: 5px;
}

.day-cell {
 min-height: 120px;
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 8px;
 font-size: 14px;
 background: #fff;
 transition: all 0.2s;
 position: relative;
 z-index: 1; /* Подложка снизу */
}

.day-cell:hover {
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 background: #fafafa;
}

.day-cell.today {
 border: 2px solid var(--blue);
 background: rgba(47, 111, 214, 0.02);
}

.day-cell.empty {
 background: #f9f9f9;
 border-color: #f0f0f0;
}

.day-number {
 font-weight: 600;
 margin-bottom: 5px;
 color: var(--text);
 font-size: 14px;
}

.events-list {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 margin-top: 40px;
}
.events-list > a {
 margin-top: 20px;
}

.event {
 z-index: 2;
 align-self: start;
 margin: 0 5px;
 overflow: hidden;
 display: flex;
 align-items: center;
 width: auto;
 white-space: nowrap;
 text-overflow: ellipsis; /* Три точки только в самом конце span */
 font-size: 11px;
 padding: 5px 10px;
 border-radius: 4px;
 color: white;
 cursor: pointer;
 transition: all 0.2s;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 height: 26px;
}

.event-text-wrapper {
 display: flex;
 align-items: center;
 white-space: nowrap;
 width: 100%;
 overflow: hidden;
}

.event.continuation {
 border-top-left-radius: 0; /* Прямой угол слева */
 border-bottom-left-radius: 0;
 border-left: 1px dashed rgba(255, 255, 255, 0.4);
 padding-left: 0;
 margin-right: 10px;
}

.event.continuation .event-continuation {
 float: right;
 font-size: 12px;
 padding-left: 0;
}

.event.has-more {
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}

.event:hover {
 transform: translateY(-1px);
 z-index: 10;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event.blue {
 background: var(--blue);
}
.event.red {
 background: var(--red);
}
.event.green {
 background: var(--green);
}
.event.yellow {
 background: var(--yellow);
 color: #333;
}
.event.purple {
 background: var(--purple);
}
.event-name {
 display: inline-block;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis; 
 font-weight: 500;
 margin-right: 4px;
 flex-shrink: 1; 
 max-width: 100%;
}

.event-time {
 font-size: 10px;
 opacity: 0.9;
}

.event-duration {
 font-size: 9px;
 background: rgba(255, 255, 255, 0.2);
 padding: 2px 4px;
 border-radius: 3px;
 margin-left: 4px;
}

.event-continuation {
 font-size: 10px;
 opacity: 0.7;
}

.mobile-event-card {
 display: none;
}

@media (max-width: 768px) {
 .event {
  margin-top: 30px;
  font-size: 10px;
  padding: 2px 4px;
 }
 .day-cell {
  min-height: 40px;
 }
 .day-name,
 .day-cell,
 .event {
  display: none !important;
 }

 /* Превращаем сетку в обычный вертикальный список */
 .calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: transparent;
  border: none;
 }

 .mobile-event-card {
  display: block;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 15px 5px;
 }

 .event-date {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1f2d3d;
  margin-bottom: 12px;
 }

 .event-time-badge::before {
  content: "";
 }

 .event-details {
  display: flex;
  justify-content: space-between; /* Название слева, время справа */
  align-items: center;
  background: #ffffff;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e1e5ee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
 }

 .event-title {
  font-weight: 500;
  color: #2f6fd6;
  font-size: 15px;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 .event-time-badge {
  font-weight: 500;
  color: #666;
  font-size: 14px;
  white-space: nowrap; /* Чтобы время не переносилось */
 }
}