@media (max-width: 900px) {
  .topbar .project-switcher > button strong {
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .projects-page > .page-header .page-heading h1,
  .monitoring-page > .page-header .page-heading h1 {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .projects-page > .page-header .page-heading p,
  .monitoring-page > .page-header .page-heading p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .projects-page .project-card-title h2 {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .projects-page > .page-header .page-actions .button {
    min-height: 2.875rem;
    height: 2.875rem;
    font-size: 0.9375rem;
  }

  .projects-page > .panel-toolbar .search-input,
  .projects-page > .panel-toolbar .select-trigger {
    min-height: 2.875rem;
    height: 2.875rem;
    font-size: 0.9375rem;
  }

  .projects-page > .panel-toolbar .search-input input {
    font-size: 0.9375rem;
  }

  .curve-page-toolbar .monitoring-date-range .date-time-trigger,
  .curve-page-toolbar .monitoring-date-range > .button,
  .monitoring-page .realtime-controls .button,
  .monitoring-page .monitor-section-actions .button {
    min-height: 2.875rem;
    height: auto;
    font-size: 0.9375rem;
  }

  .monitoring-page .realtime-controls .button {
    padding-inline: 0.75rem;
  }

  .monitoring-page .monitor-section-actions .button {
    min-width: 0;
    padding-inline: 0.75rem;
  }

  .curve-module h4 {
    font-size: 1rem;
    line-height: 1.4;
  }

  .curve-title-block > span,
  .curve-module > footer,
  .curve-legend-chip,
  .curve-legend-none,
  .curve-legend-trigger,
  .curve-legend-option-copy {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .curve-module > footer {
    gap: 0.5rem;
  }

  .curve-peak {
    font-size: 0.875rem;
  }

  .curve-peak small {
    font-size: 0.875rem;
  }

  .curve-peak strong {
    font-size: 0.875rem;
  }

  .curve-current span {
    font-size: 0.875rem;
  }

  .curve-legend-control {
    min-height: 2.75rem;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
  }

  .curve-legend-preview {
    max-height: none;
  }

  .curve-legend-chip {
    max-width: 100%;
    line-height: 1.4;
  }

  .curve-legend-trigger {
    min-height: 2.75rem;
    padding-inline: 0.625rem;
    white-space: nowrap;
  }

  .curve-legend-actions button,
  .curve-legend-options .checkbox-control {
    min-height: 2.75rem;
  }

  .curve-legend-actions button {
    font-size: 0.875rem;
  }
}

@media (max-width: 375px) {
  .topbar .project-switcher > button strong {
    font-size: 0.875rem;
  }

  .projects-page .project-card-title h2 {
    font-size: 1.0625rem;
  }

  .curve-module > footer {
    font-size: 0.875rem;
  }
}

@media (max-width: 767.98px) {
  .topbar .project-switcher > button strong {
    font-size: 0.875rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  .projects-page > .page-header .page-heading h1,
  .monitoring-page > .page-header .page-heading h1 {
    font-size: 1.375rem;
    line-height: 1.3;
  }

  .projects-page > .page-header .page-heading p,
  .monitoring-page > .page-header .page-heading p {
    font-size: 1rem;
    line-height: 1.45;
  }

  .projects-page > .page-header .page-actions .button {
    min-height: 3rem;
    height: 3rem;
    padding-inline: 0.875rem;
    font-size: 1rem;
  }

  .projects-page > .panel-toolbar .search-input,
  .projects-page > .panel-toolbar .select-wrap,
  .projects-page > .panel-toolbar .select-trigger {
    min-height: 3rem;
    height: 3rem;
  }

  .projects-page > .panel-toolbar .search-input input,
  .projects-page > .panel-toolbar .select-trigger {
    font-size: 1rem;
  }

  .projects-page .project-card-title h2 {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .projects-page .project-address {
    font-size: 0.875rem;
  }

  .monitor-workspace-head h2 {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .monitoring-page .page-heading h1 {
    font-size: 1.25rem;
    line-height: 1.35;
  }

  .curve-page-toolbar .monitoring-date-range .date-time-trigger,
  .curve-page-toolbar .monitoring-date-range > .button,
  .monitoring-page .realtime-controls .button,
  .curve-suite .monitor-section-actions .button {
    min-height: 3rem;
    height: auto;
    font-size: 1rem;
  }

  .page-stack .button > span {
    font-size: inherit;
  }

  .monitoring-page .curve-page-toolbar p,
  .monitoring-page .monitor-section-head > div > span,
  .monitoring-page .camera-count-summary {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .monitoring-page .realtime-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .monitoring-page .realtime-controls .button {
    width: auto;
    min-width: 0;
    justify-self: end;
    padding-inline: 0.75rem;
    white-space: nowrap;
  }

  .curve-suite .monitor-section-actions {
    display: flex !important;
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  .curve-suite .monitor-section-actions .button {
    width: 100%;
    min-height: 3rem;
    height: auto;
    justify-content: center;
    padding-inline: 0.75rem;
    font-size: 1rem;
  }

  .curve-suite .monitor-section-actions small {
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }

  .projects-page .view-switch .icon-button,
  .projects-page .project-action-menu > .icon-button,
  .projects-page .project-card > footer .button,
  .pagination button,
  .pagination .select-trigger,
  .pagination-jump-button,
  .icon-button,
  .tabs > button {
    min-height: 2.75rem;
  }
}

@media (max-width: 359px) {
  .topbar .project-switcher > button strong {
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .projects-page > .page-header .page-heading h1,
  .monitoring-page > .page-header .page-heading h1 {
    font-size: 1.25rem;
  }

  .projects-page .project-card-title h2,
  .monitor-workspace-head h2 {
    font-size: 1rem;
  }

  .monitoring-page .realtime-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .monitoring-page .realtime-controls .button {
    width: 100%;
    justify-self: stretch;
  }

  .curve-suite .monitor-section-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .curve-suite .monitor-section-actions .button {
    width: 100%;
    justify-self: stretch;
  }

  .curve-suite .monitor-section-actions small {
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .content-area {
    font-size: 1rem;
  }

  .overview-grid,
  .overview-grid.lower-grid,
  .metric-grid,
  .metric-grid-four,
  .metric-grid-five,
  .monitor-shell,
  .integration-layout,
  .settings-layout,
  .settings-info-grid,
  .curve-module-grid,
  .inspection-grid,
  .camera-feed-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-stack button:not(.toggle),
  .page-stack [role="button"],
  .topbar button,
  .tabs > button,
  .admin-tabs button,
  .settings-nav button,
  .filter-meta button,
  .hierarchy-footer > button,
  .distribution-map-controls button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 1rem;
  }

  .icon-button,
  .mobile-menu,
  .notification-button,
  .view-switch .icon-button,
  .project-action-menu > .icon-button {
    display: inline-grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    padding: 0.5rem;
  }

  .page-stack .button > svg,
  .page-stack .icon-button > svg,
  .topbar button > svg,
  .map-zoom-button > svg,
  .map-layer-button > svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
  }

  .map-zoom-button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .map-layer-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .page-stack input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  .page-stack select,
  .page-stack textarea {
    min-height: 2.75rem;
    font-size: 1rem;
  }

  .page-stack :where(
    .metric-topline,
    .metric-value span,
    .metric-delta,
    .field > span,
    .field-help,
    .filter-meta,
    .pagination-summary-text,
    .pagination-jump,
    .project-address,
    .project-card-status,
    .project-card-meta,
    .project-card-updated,
    .distribution-address,
    .settings-note,
    .toggle-copy small,
    .empty-state p,
    .integration-empty-state p,
    .integration-empty-panel p,
    .badge,
    .status-badge,
    .filing-link
  ) {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .data-table th,
  .data-table td {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .monitoring-page .primary-cell strong,
  .monitoring-page .primary-cell small,
  .monitoring-page .mono-text,
  .monitoring-page .online-state,
  .monitoring-page .online-state small,
  .monitoring-page .data-table td::before {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .recharts-cartesian-axis-tick-value {
    font-size: 0.875rem;
  }

  .pagination {
    position: static;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .pagination-summary {
    display: flex;
    min-width: 0;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .pagination-pages {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
  }

  .pagination-jump-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
  }

  .pagination button,
  .pagination .select-trigger,
  .pagination-jump,
  .pagination-jump input,
  .pagination-jump-button {
    min-height: 2.75rem;
    height: auto;
    font-size: 0.875rem;
  }

  .pagination button {
    min-width: 2.75rem;
  }

  .pagination .select-field {
    min-width: 0;
    flex: 0 1 9rem;
    margin-right: 0;
  }

  .pagination .select-trigger {
    padding-inline: 0.5rem 1.75rem;
  }

  .pagination-summary-text {
    min-width: 0;
    margin: 0;
    text-align: right;
  }

  .pagination-jump {
    min-width: 0;
    gap: 0.375rem;
    margin: 0;
  }

  .pagination-jump input {
    width: 3.5rem;
    min-width: 3.5rem;
  }

  .pagination-jump-button {
    min-width: 3.75rem !important;
  }

  .sidebar-footer .filing-link {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
  }

  .login-options .login-remember,
  .login-footer a {
    min-height: 2.75rem;
  }

  .login-footer a {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 900px) and (max-height: 500px) {
  .content-area {
    overflow: auto;
  }

  .reports-page,
  .devices-page {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .reports-page > .reports-panel,
  .devices-page > .devices-panel {
    min-height: 0;
    overflow: visible;
  }

  .reports-panel > .table-wrap,
  .devices-panel > .table-wrap,
  .data-panel > .table-wrap {
    height: auto;
    min-height: 12rem;
    flex: none;
  }

  .pagination {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .topbar .project-switcher > button strong {
    font-size: 1rem;
    line-height: 1.35;
  }

  .projects-page .project-card-title {
    min-width: 0;
    flex: 1 1 auto;
  }

  .projects-page .project-card-title h2 {
    font-size: 1.25rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .projects-page > .page-header .page-actions,
  .projects-page > .page-header .page-actions .button {
    width: 100%;
  }

  .projects-page > .page-header .page-actions .button {
    min-height: 3rem;
    height: 3rem;
    justify-content: center;
    font-size: 1rem;
  }

  .projects-page > .panel-toolbar .search-input,
  .projects-page > .panel-toolbar .select-trigger {
    min-height: 3rem;
    height: 3rem;
    font-size: 1rem;
  }

  .projects-page > .panel-toolbar .search-input input {
    font-size: 1rem;
  }

  .curve-page-toolbar .monitoring-date-range .date-time-trigger,
  .curve-page-toolbar .monitoring-date-range > .button,
  .monitoring-page .realtime-controls .button,
  .curve-suite .monitor-section-actions .button {
    min-height: 3rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .monitoring-page .realtime-controls {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 0.5rem;
  }

  .monitoring-page .realtime-controls .badge {
    justify-self: start;
  }

  .monitoring-page .realtime-controls .button {
    width: 100%;
    justify-self: stretch;
  }

  .curve-suite .monitor-section-actions {
    align-items: stretch;
  }

  .curve-suite .monitor-section-actions .button {
    width: 100%;
    justify-content: center;
  }

  .curve-suite .monitor-section-actions small {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .monitoring-page .online-state,
  .monitoring-page .online-state small {
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .projects-page .project-card-title h2 {
    font-size: 1.125rem;
  }
}