/* Screen-only workspace layout. Printed statements keep their original geometry. */
@media screen {
  #app-view {
    max-width: 100%;
    grid-template-columns: 250px minmax(0, 1fr);
  }

  #app-view .workspace,
  #workspace-content,
  #workspace-content :is(.panel, .member-admin-sections, .member-admin-section,
    .content-status-section, .cards-list, .operation-card, .purchase-editor,
    .purchase-list, .route-admin-list, .route-admin-editor) {
    min-width: 0;
    max-width: 100%;
  }

  #workspace-content {
    container: workspace / inline-size;
  }

  /* Explicit zero-minimum tracks prevent a search row or long address from
     widening every card in the list beyond the panel's clipped right edge. */
  #workspace-content :is(.cards-list, .member-admin-sections, .content-status-section) {
    grid-template-columns: minmax(0, 1fr);
  }

  #workspace-content .operation-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #workspace-content .operation-card > :not(.operation-card-actions):not(.card-selection) {
    flex: 1 1 20rem;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #workspace-content .operation-card-actions {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
  }

  #app-view :is(.topbar, .topbar-actions),
  #workspace-content :is(.panel-header, .panel-header-actions, .toolbar,
    .dialog-actions, .purchase-toolbar, .purchase-heading) {
    flex-wrap: wrap;
    min-width: 0;
  }

  #app-view .topbar-actions {
    max-width: 100%;
    justify-content: flex-end;
  }

  #workspace-content :is(.panel-header, .member-admin-section > header,
    .content-status-section > header, .route-editor-section > header) > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #workspace-content :is(.panel-header h2, .operation-card h3,
    .operation-card p, .route-admin-item b, .route-admin-item code) {
    overflow-wrap: anywhere;
  }

  #workspace-content .toolbar {
    align-items: center;
  }

  #workspace-content .toolbar > :is(input, .submitted-search) {
    flex: 1 1 14rem;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  #workspace-content .toolbar > select {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  #workspace-content .toolbar > :is(button, small) {
    flex: 0 0 auto;
    max-width: 100%;
  }

  #workspace-content .submitted-search {
    flex-wrap: wrap;
  }

  #workspace-content .submitted-search > input {
    flex: 1 1 10rem;
    width: auto;
    min-width: 0;
  }

  #workspace-content :is(.operation-card-actions, .panel-header-actions,
    .toolbar, .dialog-actions) button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Dense cargo and purchase tables retain their columns, but scrolling is
     contained in the table rather than pushing the surrounding screen out. */
  #workspace-content :is(.data-table-wrap, .table-scroll, .purchase-table-wrap) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
  }

  #workspace-content .data-table:has(> tbody > tr > td:last-child .row-action-buttons) > :is(thead, tbody) > tr > :last-child:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -1px 0 var(--line);
  }

  #workspace-content .data-table:has(> tbody > tr > td:last-child .row-action-buttons) > thead > tr > :last-child:not([colspan]) {
    z-index: 3;
    background: #f0f4f8;
  }

  #workspace-content .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  #workspace-content :is(.form-grid, .purchase-fields, .route-form-grid) > label {
    min-width: 0;
  }

  #workspace-content :is(.form-grid, .purchase-fields, .route-form-grid) :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
  }

  #workspace-content .route-admin-workspace {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }

  @container workspace (max-width: 60rem) {
    #workspace-content .route-admin-workspace { grid-template-columns: minmax(0, 1fr); }
    #workspace-content .route-admin-list { border-right: 0; border-bottom: 1px solid var(--line); }
  }

  @container workspace (max-width: 48rem) {
    #workspace-content .purchase-layout { grid-template-columns: minmax(0, 1fr); }
    #workspace-content .purchase-list { position: static; max-height: 240px; overflow: auto; }
    #workspace-content .excel-run-bar { grid-template-columns: minmax(0, 1fr); }
  }
}