/* Final layer: intentionally overrides earlier mobile-first rules on larger screens. */
.view[hidden] { display: none !important; }
@media (min-width: 960px) {
  .app-shell { max-width: 1440px; padding-left: 36px; padding-right: 36px; }
  .topbar { margin-left: -36px; margin-right: -36px; padding-left: 36px; padding-right: 36px; }
  .tabs { padding-left: 0; padding-right: 0; }
  .tab { min-width: 132px; }
  #dashboardView { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; }
  #dashboardView > .today-head { grid-column: 1 / -1; margin-bottom: 0; }
  #dashboardView > .clock-card { grid-column: span 7; margin: 0; }
  #dashboardView > .metrics-grid { grid-column: span 5; margin: 0; grid-template-columns: 1fr; }
  #dashboardView > .planner-card, #dashboardView > .week-card { grid-column: span 7; max-width: none; margin: 0; }
  #dashboardView > .eik-card { grid-column: span 5; margin: 0; }
  .view-heading { margin-top: 42px; }
  .full-planner, .info-card { max-width: none; }
  .planner-schedule { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
}
@media (max-width: 620px) {
  .settings-section .settings-grid, .settings-section .roster-grid { grid-template-columns: 1fr; }
  .settings-modal .automation-panel { margin: 18px; }
  .app-loading { position: fixed; }
}