/* Keep responsive layout rules after the shared desktop theme. Wide data tables
   scroll inside their own panels; the application shell always fits the screen. */
.app-shell,
.workspace,
.content,
.content > *,
.topbar > *,
.topbar-actions > *,
.grid > *,
.field,
.form-columns > * {
  min-width: 0;
}

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

.workspace-page > * {
  min-width: 0;
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.app-shell {
  min-height: 100dvh;
}

.topbar {
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.company-tab,
.open-work-tab {
  min-height: 36px;
  flex: 0 1 230px;
}

.topbar-actions {
  flex: 1 1 440px;
  min-width: 0;
}

.topbar-actions .search-box {
  flex: 1 1 150px;
  width: auto;
  min-width: 0;
}

.search-box input {
  width: 100%;
  min-width: 0;
}

.topbar-actions > button,
.user-chip button {
  flex-shrink: 0;
}

.user-chip {
  flex-shrink: 0;
  padding-left: 4px;
}

.sidebar {
  height: 100dvh;
}

.table-wrap,
.schedule-week-scroll,
.schedule-month-scroll {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.materials-table-wrap {
  overflow-x: auto;
}

/* Keep row actions reachable inside the scrollable orders table. */
.materials-table-wrap .material-order-row-menu {
  position: static;
  margin-top: 6px;
}

.dashboard-record-row > div,
.employee-allocation-row > div,
.employee-job-tags,
.employee-job-tags button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.employee-job-tags button {
  max-width: 100%;
  flex-wrap: wrap;
  text-align: left;
}

@media (max-width: 1200px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .company-tab,
  .open-work-tab {
    min-width: 0;
    width: 100%;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  .live-dashboard .people-summary-panel {
    grid-column: 1 / -1;
  }

  .quote-summary-workspace,
  .quote-cost-centre-summary-grid,
  .reports-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A sideways phone keeps the compact navigation instead of switching to the
   tablet sidebar. The layout also works when the browser cannot lock rotation. */
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  }

  .brand,
  .sidebar-footer,
  .sidebar .nav-group .nav-flyout,
  .nav-item .nav-icon {
    display: none;
  }

  .nav-list {
    display: flex;
    min-width: 0;
    gap: 5px;
    padding: 0 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .nav-group {
    flex: 0 0 auto;
  }

  .nav-item {
    width: auto;
    min-width: 76px;
    min-height: 44px;
    padding: 8px 12px;
    grid-template-columns: 1fr;
    white-space: nowrap;
  }

  .nav-item span:not(.nav-icon) {
    display: block;
  }

  .topbar {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 6px;
    padding: 0;
  }

  .topbar-actions .search-box {
    width: 100%;
  }

  .topbar-actions > button {
    width: 44px;
    min-height: 44px;
  }

  .user-chip {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
  }

  .user-chip span {
    flex: 1 1 60px;
    min-width: 0;
    max-width: 100%;
  }

  .user-chip button {
    min-height: 40px;
  }

  .content {
    margin: 0;
    padding: 14px max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

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

  .dashboard-grid > * {
    grid-column: 1 / -1;
  }

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

  .dashboard-record-row > div {
    grid-column: 1 / -1;
  }

  .dashboard-record-row small {
    white-space: normal;
  }

  .employee-allocation-row,
  .job-form-panel .form-columns,
  .labour-entry-form .form-columns,
  .people-form-group .form-columns,
  .quote-form-config,
  .task-form,
  .time-row,
  .form-columns,
  .settings-grid,
  .report-list,
  .operating-grid,
  .report-grid,
  .filter-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-header,
  .page-title-row,
  .action-strip,
  .toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .content input:not([type="checkbox"]):not([type="radio"]),
  .content select,
  .content textarea,
  .search-box input {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  .workspace-modal-backdrop {
    padding: 8px;
  }

  .quote-document-row {
    grid-template-columns: 38px minmax(0, 1fr) 72px;
    overflow-wrap: anywhere;
  }

  .quote-time-modal,
  .people-editor {
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }
}