/* Samu Planner — desktop dashboard only.
   The existing calendar, deadline, today, tomorrow and statistics nodes remain
   untouched; their placement changes without duplicating content or data. */
@media (min-width: 1100px) {
  .app {
    /* Fill the whole desktop viewport; keep only a small, responsive gutter. */
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(12px, 1vw, 22px);
    padding-right: clamp(12px, 1vw, 22px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    column-gap: 18px;
    row-gap: 16px;
    align-items: start;
  }
  .app > .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    margin-bottom: 3px;
  }
  /* Left: monthly/weekly calendar and the selected-day agenda. */
  .app > #calendar-section {
    grid-column: 1;
    grid-row: 2 / span 4;
    align-self: start;
    min-width: 0;
    margin-top: 0;
    padding: 18px 16px 20px;
  }
  #calendar-section .calendar-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  #calendar-section .calendar-card {padding: 15px 12px;}
  #calendar-section .calendar-grid {gap: 4px;}
  #calendar-section .datecell {min-height: 74px;}
  #calendar-section .datecell .activity-dots {gap: 4px;}
  #calendar-section .peek-card {
    min-height: 0;
    padding: 16px;
  }
  #calendar-section .peek-items {
    flex: initial;
    margin-top: 14px;
    gap: 8px;
  }
  /* Right: four independent, vertically stacked dashboards. */
  .app > #deadline-section,
  .app > #today-section,
  .app > #tomorrow-section,
  .app > #stats-section {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    border-radius: 19px;
    padding: 17px 18px 19px;
  }
  .app > #deadline-section {grid-row: 2;}
  .app > #today-section {grid-row: 3;}
  .app > #tomorrow-section {grid-row: 4;}
  .app > #stats-section {grid-row: 5;}
  #deadline-section .v4-countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #deadline-section .v4-countdown {
    min-width: 0;
    padding: 10px;
    gap: 10px;
  }
  #deadline-section .v4-countdown-clock {
    width: 55px;
    min-height: 57px;
  }
  #deadline-section .v4-countdown-clock strong {font-size: 22px;}
  #today-section .section-head,
  #tomorrow-section .section-head {flex-wrap: wrap;}
  #today-section .period-grid,
  #tomorrow-section .period-grid {gap: 9px;}
  #today-section .period-card,
  #tomorrow-section .period-card {padding: 12px;gap: 9px;}
  #today-section .period-icon,
  #tomorrow-section .period-icon {
    width: 31px;
    height: 31px;
  }
  #today-section .period-icon svg,
  #tomorrow-section .period-icon svg {width: 17px;height: 17px;}
  #today-section .period-top,
  #tomorrow-section .period-top {gap: 7px;}
  #today-section .period-name,
  #tomorrow-section .period-name {font-size: 13px;}
  #today-section .period-time,
  #tomorrow-section .period-time {font-size: 10px;}
  #stats-section .v4-stats-panel {padding: 12px;}
  /* Restore full-width common footer once the right column ends. */
  .app > .category-strip {
    grid-column: 1 / -1;
    grid-row: 6;
    min-width: 0;
    margin-top: 5px;
  }
  .app > .bottom {
    grid-column: 1 / -1;
    grid-row: 7;
    min-width: 0;
  }
}
/* More readable cards on standard 13–14-inch laptops. */
@media (min-width: 1100px) and (max-width: 1380px) {
  #today-section .period-grid,
  #tomorrow-section .period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #today-section .period-grid > .period-card:last-child,
  #tomorrow-section .period-grid > .period-card:last-child {
    grid-column: 1 / -1;
  }
  #stats-section .v4-stats-summary {grid-template-columns: repeat(2, minmax(0, 1fr));}
  #stats-section .v4-stats-content {grid-template-columns: minmax(0, 1fr);}
}