@media (max-width: 1120px) {
  html,
  body,
  .app-shell,
  .main-area,
  .page-content {
    max-width: 100%;
    overflow-x: clip;
  }

  .two-column-grid,
  .three-column-grid {
    grid-template-columns: 1fr;
  }

  .app-top-nav {
    gap: 10px;
    padding-inline: 18px;
  }

  .brand {
    min-width: auto;
  }

  .brand-subtitle {
    display: none;
  }

  .nav-actions {
    min-width: auto;
  }

  .nav-link {
    padding-inline: 8px;
    font-size: 13px;
  }

  .desktop-nav {
    gap: 4px;
  }

  .page-grid,
  .page-grid > *,
  .two-column-grid,
  .two-column-grid > *,
  .table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .data-table {
    min-width: 0;
    table-layout: auto;
  }

  .data-table th,
  .data-table td {
    white-space: normal;
  }
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .app-shell {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .main-area {
    width: 100%;
    min-width: 0;
  }

  .app-top-nav {
    min-height: 62px;
    padding: 9px 16px;
  }

  .desktop-nav,
  .desktop-settings-nav {
    display: none;
  }

  .brand-title {
    font-size: 14px;
  }

  .nav-actions {
    flex: 1 1 auto;
  }

  .nav-actions > .user-menu {
    display: none;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .mobile-active-page {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-nav-panel {
    position: absolute;
    inset: calc(100% + 8px) 12px auto;
    z-index: 21;
    display: none;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }

  body.mobile-menu-open .mobile-nav-panel {
    display: grid;
  }

  .mobile-nav-panel .nav-link {
    justify-content: flex-start;
    min-height: 44px;
  }

  .topbar {
    padding: 16px 18px;
  }

  .page-content {
    padding: 20px 18px 28px;
  }

  .page-grid,
  .detail-layout,
  .case-detail,
  .new-case-card {
    width: 100%;
    min-width: 0;
  }

  .page-grid,
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-detail {
    overflow: hidden;
  }

  .case-detail .table-wrap {
    max-width: 100%;
  }

  .case-detail .data-table {
    min-width: 560px;
  }

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

  .today-actions {
    gap: 12px;
  }

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

  .territorial-planning-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .diagnosis-card,
  .diagnosis-facts {
    grid-template-columns: 1fr;
  }

  .diagnosis-card-meta {
    justify-content: flex-start;
    text-align: left;
  }

  .diagnosis-dialog {
    width: min(760px, 100%);
    max-height: calc(100dvh - 28px);
  }

  .quick-entry-grid {
    grid-template-columns: 1fr;
  }

  .case-hero,
  .job-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-actions .button {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 620px) {
  .app-top-nav {
    gap: 8px;
  }

  .notification-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    left: 16px;
    width: auto;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .brand-text {
    gap: 0;
  }

  .brand-title {
    max-width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar h1 {
    font-size: 22px;
  }

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

  .variable-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .quick-create-case-form,
  .quick-create-case-form .field.full,
  .quick-create-case-form .button.full {
    grid-column: 1 / -1;
  }

  .create-section,
  .address-autocomplete-group {
    grid-template-columns: 1fr;
  }

  .create-section {
    padding: 14px;
  }

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

  .create-field-name,
  .create-field-phone,
  .create-field-appliance,
  .create-field-appliance-other,
  .create-field-brand,
  .create-field-nr,
  .create-field-location,
  .create-field-source,
  .create-address-grid .address-combo-field:nth-of-type(1),
  .create-address-grid .address-combo-field:nth-of-type(2),
  .create-address-grid .address-combo-field:nth-of-type(3),
  .create-address-grid .address-combo-field:nth-of-type(4),
  .create-address-grid .address-combo-field:nth-of-type(5),
  .create-address-grid .field:nth-of-type(6),
  .address-autocomplete-group .field,
  .address-autocomplete-group .address-combo-field:nth-of-type(4) {
    grid-column: 1 / -1;
  }

  .address-suggestions {
    right: auto;
    left: 0;
    width: min(100%, calc(100vw - 48px));
    max-height: min(424px, 52vh);
  }

  .practices-table-wrap {
    display: none;
  }

  .practice-card-list {
    display: grid;
    gap: 12px;
  }

  .practice-card-grid {
    grid-template-columns: 1fr;
  }

  .practice-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .practice-card-actions .cell-button,
  .practice-card-actions .row-actions,
  .practice-card-actions .row-actions summary {
    width: 100%;
  }

  .practice-card-actions .row-actions-menu {
    position: static;
    width: 100%;
  }

  .diagnostics-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .diagnosis-backdrop {
    padding: 0;
  }

  .diagnosis-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .diagnosis-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top) + 12px);
    background: var(--surface);
  }

  .diagnosis-dialog-header h2 {
    font-size: 18px;
  }

  .diagnosis-dialog-footer {
    align-items: stretch;
    flex-direction: column;
    padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
    background: var(--surface);
  }

  .diagnosis-dialog-footer .button {
    width: 100%;
    min-height: 48px;
  }

  .parts-order-dialog {
    width: 100%;
    max-height: calc(100dvh - 22px);
  }

  .parts-order-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .parts-order-footer .button {
    width: 100%;
    min-height: 46px;
  }

  .parts-order-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .parts-order-row-action {
    justify-content: flex-end;
  }

  .parts-row-action {
    width: 100%;
    min-width: 44px;
    min-height: 46px;
  }

  .page-content .table-wrap {
    overflow-x: auto;
  }

  .parts-mobile-list {
    display: grid;
    gap: 10px;
  }

  .parts-mobile-list + .table-wrap,
  .card > .table-wrap:has(+ .parts-mobile-list) {
    display: none;
  }

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

  .diagnosis-lightbox {
    padding: 0;
  }

  .diagnosis-lightbox figure {
    width: 100%;
    height: 100dvh;
    max-height: none;
    align-content: center;
    border-radius: 0;
  }

  .compact-parts-list .part-edit-row {
    grid-template-columns: 1fr;
  }

  .detail-form,
  .compact-calendar-form,
  .duration-custom-form {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-form .button,
  .compact-calendar-form .button,
  .duration-custom-form .button {
    width: 100%;
  }

  .card {
    padding: 18px;
  }

  .section-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-calendar {
    min-height: 680px;
    overflow-x: auto;
  }

  .service-calendar .fc {
    min-width: 0;
  }

  .service-calendar .fc-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .service-calendar .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .service-calendar .fc-button {
    min-height: 42px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .service-calendar .fc-toolbar-title {
    text-align: center;
    font-size: 17px;
  }

  .calendar-shell > .card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-header-actions {
    justify-content: stretch;
  }

  .calendar-header-actions .button {
    flex: 1 1 auto;
  }

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

  .calendar-panel-actions .button,
  .case-form-actions .button {
    width: 100%;
  }

  .calendar-add-button[data-delivery-add] {
    width: 100%;
    min-width: 0;
  }

  .quick-actions .button,
  .settings-actions .button,
  .settings-message-actions .button {
    width: 100%;
  }

  .activity-sticky-actions {
    left: 0;
    right: 0;
    flex-direction: column;
    margin: 0;
  }

  .activity-sticky-actions .button {
    width: 100%;
  }

  .activity-resolution-actions {
    flex-direction: column;
  }

  .activity-resolution-actions .button {
    width: 100%;
  }

  .full-mobile {
    width: 100%;
  }

  .technician-load-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .technician-load-actions .split-actions,
  .technician-load-actions .button,
  .technician-load-actions a {
    width: 100%;
  }

  .schedule-slot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-day {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .schedule-day h3 {
    align-self: start;
  }

  .schedule-block {
    width: 100%;
  }

  .schedule-block select.input,
  .schedule-block input.input {
    width: 100%;
  }

  .schedule-actions .button {
    width: 100%;
  }

  .variable-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .variables-modal-card {
    max-height: calc(100dvh - 32px);
  }
}