@media (max-width: 1024px) {
      .app-shell {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .right-nav {
        grid-column: auto;
        position: static;
        grid-row: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 4px;
        margin-bottom: -1px;
        padding: 0 12px 0 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: auto;
      }

      .right-nav-title {
        display: none;
      }

      .nav-button::before,
      .nav-button.active::before {
        display: none !important;
      }

      .nav-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        margin-top: 6px;
        padding: 0 18px;
        border: 1px solid transparent;
        border-bottom: 0;
        border-radius: 13px 13px 0 0;
        text-align: center;
      }

      .nav-button.active::before,
      .nav-button.active::after {
        display: block !important;
        position: absolute;
        bottom: 0;
        width: 16px;
        height: 16px;
        pointer-events: none;
        content: "";
      }

      .staff-user-panel {
        order: 100;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin: 8px 0 0;
        padding: 10px 0 0;
        background: transparent;
        border: 0;
        border-top: 1px solid #e5eaf2;
        border-radius: 0;
      }

      .app-view {
        grid-column: auto;
        grid-row: 2;
        border-top-left-radius: 0;
      }

      .filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .registration-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .notice-layout {
        grid-template-columns: 1fr;
      }

      .notice-target-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .notice-list {
        grid-template-columns: 1fr;
      }

      .billing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .billing-tariff-hero {
        align-items: stretch;
        flex-direction: column;
      }

      .billing-settings-compact {
        justify-content: flex-start;
      }

      .billing-tariff-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .billing-tariff-toolbar {
        grid-template-columns: 1fr;
      }

      .notice-target-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .office-layout {
        grid-template-columns: 1fr;
      }

      .staff-auth-layout,
      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .engineer-dashboard-top {
        grid-template-columns: minmax(0, 1fr);
      }

      .engineer-dashboard-sections {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .registration-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 650px) {
      body {
        padding: 8px;
      }

      .card {
        border-radius: 18px;
      }

      .right-nav {
        align-items: stretch;
      }

      .nav-button {
        flex: 1 1 150px;
      }

      .staff-user-panel {
        width: 100%;
        margin-left: 0;
        padding-top: 10px;
        padding-left: 0;
        border-top: 1px solid #e5eaf2;
        border-left: 0;
      }

      .staff-auth-header {
        flex-direction: column;
      }

      .staff-role-select {
        grid-template-columns: 1fr;
      }

      .topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
      }

      .engineer-dashboard-top,
      .engineer-dashboard-sections,
      .engineer-section-metrics {
        grid-template-columns: 1fr;
      }

      .engineer-dashboard-summary-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .engineer-dashboard-summary-value {
        justify-content: flex-start;
        text-align: left;
      }

      .filters {
        grid-template-columns: 1fr;
      }

      .registration-filters {
        grid-template-columns: 1fr;
      }

      .edit-grid {
        grid-template-columns: 1fr;
      }

      .call-tabs,
      .call-grid {
        grid-template-columns: 1fr;
      }

      .notice-form-row {
        grid-template-columns: 1fr;
      }

      .notice-target-grid {
        grid-template-columns: 1fr;
      }

      .notice-target-detail-grid {
        grid-template-columns: 1fr;
      }

      .billing-summary-grid {
        grid-template-columns: 1fr;
      }

      .billing-tariff-summary-grid {
        grid-template-columns: 1fr;
      }

      .billing-tariff-tabs {
        display: grid;
        grid-template-columns: 1fr;
        justify-self: stretch;
      }

      .billing-settings-compact {
        display: grid;
        grid-template-columns: 1fr;
        min-width: 0;
      }

      .billing-tariff-table,
      .billing-tariff-table thead,
      .billing-tariff-table tbody,
      .billing-tariff-table tr,
      .billing-tariff-table th,
      .billing-tariff-table td {
        display: block;
      }

      .billing-tariff-table thead {
        display: none;
      }

      .billing-tariff-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid #edf1f7;
      }

      .billing-tariff-table tr:last-child {
        border-bottom: 0;
      }

      .billing-tariff-table td {
        padding: 5px 0;
        border-bottom: 0;
      }

      .billing-tariff-table th:last-child,
      .billing-tariff-table td:last-child {
        text-align: left;
      }

      .billing-tariff-actions {
        justify-content: flex-start;
      }

      .staff-directory-view {
        padding: 14px;
      }

      .staff-directory-view .office-resource-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .staff-directory-view .results-actions {
        width: 100%;
        flex-wrap: wrap;
      }

      .staff-directory-view .building-table-controls {
        margin-left: 0;
      }

      .work-schedule-toolbar {
        grid-template-columns: 1fr;
      }

      .work-schedule-controls,
      .work-schedule-actions {
        justify-content: flex-start;
      }

      .billing-settings-header {
        align-items: stretch;
        flex-direction: column;
      }

      .office-form-grid,
      .office-form-grid.three {
        grid-template-columns: 1fr;
      }

      .office-subtabs {
        display: grid;
        grid-template-columns: 1fr;
      }

      .call-field-wide {
        grid-column: auto;
      }

      .history-change {
        grid-template-columns: 1fr;
      }

      .change-arrow {
        display: none;
      }
    }