/* Layout only. Visual styles and interactions remain in the original files. */
@media (min-width: 1151px) {
  .layout {
    grid-template-columns: clamp(190px, 15vw, 216px) minmax(0, 1fr) clamp(250px, 20vw, 292px);
    grid-template-areas: "sidebar calendar details";
    gap: 20px;
    padding: 24px 24px 40px;
    align-items: start;
  }

  .left-panel {
    grid-area: sidebar;
    padding-top: 0;
    align-self: stretch;
  }

  .calendar-main {
    grid-area: calendar;
  }

  .detail-panel {
    grid-area: details;
    align-self: stretch;
  }

  .calendar-toolbar {
    min-height: 80px;
    align-items: center;
    padding-bottom: 16px;
  }

  .calendar-actions {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
}

@media (min-width: 721px) and (max-width: 1150px) {
  .layout {
    grid-template-columns: 185px minmax(0, 1fr);
    grid-template-areas:
      "sidebar calendar"
      "sidebar details";
    gap: 24px 20px;
  }

  .left-panel { grid-area: sidebar; }
  .calendar-main { grid-area: calendar; }
  .detail-panel { grid-area: details; }
}

@media (max-width: 720px) {
  .calendar-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
  }

  .calendar-actions {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 9px;
  }
}