/* Shared layout contract. Keep component styling and the existing mobile
   navigation; adapt the work area independently of the sidebar's width. */
:root {
  --ops-content-max: 1440px;
  --ops-page-gutter: clamp(14px, 2.5vw, 42px);
  --ops-page-space: clamp(22px, 2.5vw, 38px);
  --ops-layout-gap: clamp(14px, 1.5vw, 24px);
  --ops-card-padding: clamp(16px, 1.7vw, 24px);
}

.app-shell { grid-template-columns: 250px minmax(0, 1fr); }
.content, #view-root { min-width: 0; }
#view-root .page {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ops-content-max);
  min-width: 0;
  margin-inline: auto;
  padding: var(--ops-page-space) var(--ops-page-gutter);
  container: ops-page / inline-size;
}
.page-task-toolbar {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ops-content-max);
  padding: clamp(16px, 1.5vw, 24px) var(--ops-page-gutter) 0;
}
.topbar {
  padding-inline: max(var(--ops-page-gutter), calc((100% - var(--ops-content-max)) / 2 + var(--ops-page-gutter)));
  gap: clamp(10px, 1.4vw, 20px);
}
.live-workspace-notice {
  margin-inline: max(var(--ops-page-gutter), calc((100% - var(--ops-content-max)) / 2 + var(--ops-page-gutter)));
}
.global-search, .global-search input { min-width: 0; }
.soro-global-search-popup {
  width: min(560px, calc(100vw - 2 * var(--ops-page-gutter) - 46px));
}
.founder-live-portal {
  width: 100%;
  max-width: var(--ops-content-max);
  margin-inline: auto;
  padding-inline: var(--ops-page-gutter);
}
.top-actions { flex-shrink: 0; }
.topbar :is(.mobile-menu, .icon-button, .help) { flex-shrink: 0; }
.page-heading, .panel-head { flex-wrap: wrap; }
.page-heading > *, .panel-head > * { min-width: 0; }
.panel-head { gap: 12px; }
.heading-actions { max-width: 100%; }
.page :is(.panel, .metric, .comm-card, .wl-panel, .talent-review-workspace) {
  min-width: 0;
}
.page :is(.dashboard-grid, .client-profile-layout, .internal-client-profile-grid,
  .client-talent-profile-grid, .comm-layout) { gap: var(--ops-layout-gap); }
.page :is(.panel, .metric, .comm-card, .wl-panel, .talent-review-workspace) {
  padding: var(--ops-card-padding);
}
/* Preserve deliberate edge-to-edge sections and local table scrolling. */
.support-page .support-tickets-list,
.page .payroll-workspace,
.page .payroll-history { padding: 0; }
.page :is(.table-wrap, .table-scroll) { max-width: 100%; min-width: 0; }
.page :is(.client-profile-layout, .client-talent-hero, .client-talent-profile-grid,
  .profile-layout, .dashboard-grid, .comm-layout) > * { min-width: 0; }
.page :is(.comm-heading, .comm-tabs, .comm-record, .wl-heading,
  .wl-section-heading, .wl-request-bar, .wl-session-title, .wl-pagination) { flex-wrap: wrap; }
.communications-page :is(label, input, select, textarea) { min-width: 0; }
.comm-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.soro-reports :is(.filter-foot, .table-footer, .panel-title, .library-note) { flex-wrap: wrap; }
.soro-reports .definition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.talent-review-toolbar { flex-wrap: wrap; }
.talent-review-search { flex: 1 1 260px; min-width: 0; max-width: 430px; }
.talent-review-toolbar input { min-width: 0; }
.talent-review-sort { max-width: 100%; }
.talent-review-sort select { min-width: 0; max-width: 100%; }
.wl-summary, .wl-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-times > div { min-width: 0; overflow-wrap: anywhere; }

/* Reflow when the work area is narrow, even with desktop navigation open. */
@container ops-page (max-width: 1050px) {
  .talent-review-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .comm-layout, .client-profile-layout, .client-home-grid { grid-template-columns: minmax(0, 1fr); }
  .client-talent-hero {
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
  }
  .client-talent-assignment { grid-column: 1 / -1; }
  .client-talent-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .support-summary, .soro-reports .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-filters, .soro-reports .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-filters label:first-child, .wl-filters > button { grid-column: 1 / -1; }
  .talent-file-profile-panel .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .talent-profile-home-layout--dream > .profile-summary-column { display: contents; }
  .talent-profile-home-layout--dream .profile-details-section { order: 0; }
  .talent-profile-home-layout--dream > .profile-dream-column { order: 1; }
  .talent-profile-home-layout--dream .profile-screening { order: 2; }
}

@container ops-page (max-width: 820px) {
  .fa-heading { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fa-heading-copy p, .fa-heading-copy > small { max-width: none; }
  .fa-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .internal-client-profile-list--columns { grid-template-columns: minmax(0, 1fr); }
  .bench-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bench-search { grid-column: 1 / -1; }
  .bench-talent-card { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .bench-card-section { display: none; }
  .bench-card-facts { grid-column: 1 / -1; grid-row: 2; padding-top: 10px; border-top: 1px solid #e6edf4; }
  .bench-card-actions { grid-column: 2; grid-row: 1; }
  .support-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .support-case-sidebar { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-thread-main { grid-column: 1; grid-row: 2; }
  .support-page .support-management { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-ticket-open { grid-template-columns: 36px minmax(0, 1fr); }
  .support-row-trailing { grid-column: 2; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
  .support-attention-reasons { justify-content: flex-start; }
  .support-activity { text-align: left; }
  .support-row-arrow { margin-left: auto; }
  .comm-heading { align-items: flex-start; flex-direction: column; }
  .comm-policy { max-width: none; }
  .comm-template-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-times > div:last-child { grid-column: 1 / -1; }
  .client-talent-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container ops-page (max-width: 600px) {
  .fa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-home-aside, .internal-client-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .talent-review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .talent-review-search { flex-basis: 100%; max-width: none; }
  .talent-review-card-meta { grid-template-columns: minmax(0, 1fr); }
  .talent-review-card-meta > span { border-right: 0; border-bottom: 1px solid #e6edf4; }
  .talent-review-card-meta > span:last-child { border-bottom: 0; }
  .client-talent-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; }
  .client-talent-assignment { grid-column: auto; }
  .client-talent-photo-wrap { justify-self: center; }
  .client-talent-photo { transform: none; }
  .client-talent-photo::after { content: none; }
  .client-profile-form-grid, .soro-reports .library-grid,
  .soro-reports .filters, .soro-reports .definition-grid { grid-template-columns: minmax(0, 1fr); }
  .support-case-sidebar, .support-page .support-management { grid-template-columns: minmax(0, 1fr); }
  .support-filters label { min-width: min(130px, 100%); max-width: none; }
}

@container ops-page (max-width: 420px) {
  .card-grid, .comm-filters, .wl-filters { grid-template-columns: minmax(0, 1fr); }
  .bench-filters { grid-template-columns: minmax(0, 1fr); }
  .wl-summary { grid-template-columns: minmax(0, 1fr); }
  .wl-times { grid-template-columns: minmax(0, 1fr); }
  .comm-record { align-items: flex-start; flex-direction: column; }
  .soro-reports .library-tools { align-items: stretch; flex-direction: column; }
}

/* Dialogs stay usable on short screens without changing their content order. */
#task-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border-radius: 18px;
}
.task-detail-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-detail-form :is(fieldset, label, .task-detail-grid > *) { min-width: 0; }
.talent-verification-dialog.has-resume { width: min(var(--ops-content-max), 100vw); }

@media (max-width: 950px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* The existing queue toolbar is a column here: its flex basis is height. */
  .talent-review-search { flex: 0 1 auto; }
}
@media (max-width: 600px) {
  .topbar { height: auto; min-height: 74px; padding-block: 12px; flex-wrap: wrap; }
  .topbar .global-search { width: auto; flex: 1 1 170px; }
  .topbar .top-actions { gap: 8px; }
  .task-detail-pair { grid-template-columns: minmax(0, 1fr); }
  .toast { max-width: calc(100vw - 28px); right: 14px; }
}
@media (max-width: 560px) {
  .wl-times { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .client-talent-summary-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .card-grid, .comm-filters { grid-template-columns: minmax(0, 1fr); }
}