@media (max-width: 720px) {
  .two-col { grid-template-columns: 1fr; }
  .period-dropdown { min-width: 0; position: fixed; left: 0; right: 0; width: 100%; border-radius: 0 0 8px 8px; margin: 0; }
  .period-backdrop { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 99; }
  .ms-topbar-backdrop { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 99; }
  .ms-topbar-dropdown { min-width: 0; position: fixed; left: 0; right: 0; width: 100%; border-radius: 0 0 8px 8px; margin: 0; }
  .popover-backdrop { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 99; }
}
@media (max-width: 600px) {
  h1 { font-size: 1.375rem; margin: 20px 0 8px; }
  .login-form { padding: 20px; }
  .report h1 { font-size: 1.1875rem; }
  .report th, .report td { padding: 5px 8px; }
  .chart-container { height: 240px; }
  .period-backdrop { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 99; }
  .period-dropdown { position: fixed; left: 0; right: 0; min-width: 0; width: 100%; max-height: 70vh; overflow: visible; overflow-y: auto; border-radius: 0 0 8px 8px; z-index: 100; margin-top: 0; }
  .ms-topbar-dropdown { max-height: 70vh; }
  .period-dropdown-item { padding: 14px 16px; font-size: inherit; }
  .ms-topbar-item { padding: 14px 16px; font-size: inherit; }
  .panel-select-item { padding: 14px 16px; font-size: inherit; }
  .period-custom-range { flex-direction: column; }
  .period-custom { min-width: 0; }
  .search-form { grid-template-columns: 1fr; }
}