/* MASS workspace presentation v1. Scoped to existing pages, preserving handlers. */
#appShell { --workspace-gap: 20px; }
#appShell .content[data-workspace-page] { max-width: 1680px; margin-inline: auto; }
#appShell .content[data-workspace-page] > * + * { margin-block-start: 18px; }
#appShell .content[data-workspace-page] .panel { min-width: 0; }
#appShell .content[data-workspace-page] .panel-head { padding: 18px 20px; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--mass-v1-border); }
#appShell .content[data-workspace-page] .panel-head h3 { font-size: 17px; line-height: 1.6; margin: 0; }
#appShell .content[data-workspace-page] .panel-head small { font-size: 12px; line-height: 1.7; }
#appShell .content[data-workspace-page] .panel-body { padding: 18px 20px; }
#appShell .content[data-workspace-page] :is(.toolbar,.row-actions) { gap: 10px; flex-wrap: wrap; }
#appShell .content[data-workspace-page] .toolbar { padding: 14px 16px; border: 1px solid var(--mass-v1-border); border-radius: 12px; background: var(--mass-v1-surface); margin-bottom: 18px; }
#appShell .content[data-workspace-page] :is(.toolbar-left,.toolbar-right) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
#appShell .content[data-workspace-page] :is(input,select,textarea) { max-width: 100%; font: inherit; font-size: 14px; }
#appShell .content[data-workspace-page] :is(input:not([type=checkbox]):not([type=radio]),select) { min-height: 42px; }
#appShell .content[data-workspace-page] .search { flex: 1 1 280px; min-width: 160px; }
#appShell .content[data-workspace-page] .table-wrap { overflow: auto; max-width: 100%; overscroll-behavior-inline: contain; }
html[data-mass-theme] #appShell .content[data-workspace-page] table th { font-size: 13px; line-height: 1.5; padding: 12px 14px; font-weight: 600; }
html[data-mass-theme] #appShell .content[data-workspace-page] table td { font-size: 14px; line-height: 1.65; padding: 12px 14px; }
#appShell .content[data-workspace-page] table td :is(small,.table-secondary-text) { font-size: 12px; line-height: 1.6; }
#appShell .content[data-workspace-page] :is(.amount,.number-code,.next-number) { font-variant-numeric: tabular-nums; }
#appShell .content[data-workspace-page] :is(button,a,input,select,summary):focus-visible { outline: 2px solid var(--mass-v1-focus); outline-offset: 3px; }
#appShell .content[data-workspace-page] :is(.panel-footer,.table-pager) { padding: 14px 18px; gap: 12px; flex-wrap: wrap; }
#appShell .workspace-field-label { display: grid; gap: 6px; min-width: 0; flex: 1 1 170px; }
#appShell .workspace-field-label > span { font-size: 12px; font-weight: 600; color: var(--mass-v1-text-secondary); }
#appShell .workspace-field-label > :is(input,select) { width: 100%; }
#appShell .workspace-note { margin: 12px 0; padding: 12px 16px; border-inline-start: 3px solid var(--mass-v1-gold); background: var(--mass-v1-surface-secondary); color: var(--mass-v1-text-secondary); font-size: 13px; line-height: 1.8; }

/* 1. Contract register, detail workspace and ERP. */
#appShell .contracts-header-controls { display: flex !important; flex-wrap: wrap; gap: 10px; width: 100%; margin-bottom: 16px; padding: 16px; background: var(--mass-v1-surface); border: 1px solid var(--mass-v1-border); border-radius: 12px; }
#appShell .contracts-header-controls #contractSearch { order: -1; flex: 1 1 100%; max-width: none; min-height: 44px; }
#appShell .contracts-header-controls > select { flex: 1 1 210px; min-height: 42px; width: auto; }
#appShell .contracts-header-controls .contract-new-btn { margin-inline-start: auto; }
#appShell .content[data-workspace-page=contracts] .mass-register-filters { margin-bottom: 18px; }
#appShell .content[data-workspace-page=contracts] .mass-register-filters > summary { padding: 14px 16px; font-size: 14px; }
#appShell .content[data-workspace-page=contracts] .contract-facets-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
#appShell .content[data-workspace-page=contracts] .contract-status-zone-head { font-size: 13px; margin-bottom: 8px; }
#appShell .content[data-workspace-page=contracts] .contract-status-strip { display: flex; gap: 8px; flex-wrap: wrap; }
#appShell .content[data-workspace-page=contracts] .status-filter-btn { min-height: 38px; padding: 7px 12px; font-size: 13px; }
#appShell .content[data-workspace-page=contracts] .contract-vendor-cell { min-width: 190px; max-width: 300px; white-space: normal; }
#appShell .content[data-workspace-page=contracts] .contract-scope-cell { min-width: 170px; max-width: 280px; white-space: normal; }
#appShell .content[data-workspace-page=contracts] .contract-number-cell { min-width: 160px; }
#appShell .content[data-workspace-page=contracts] .contract-number-cell b { font-size: 14px; font-weight: 700; }
#appShell .content[data-workspace-page=contracts] .contract-amount-cell { white-space: nowrap; }
#appShell .contract-mobile-card { padding: 18px; }
#appShell .contract-mobile-card :is(.contract-mobile-party,.contract-mobile-scope) { margin-block: 10px; font-size: 14px; line-height: 1.7; }
#appShell .contract-mobile-states { display: flex; gap: 8px; flex-wrap: wrap; }
.contract-detail-workspace { max-width: 1560px; margin-inline: auto; font-family: var(--font); }
.contract-detail-workspace .contract360-hero { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; padding: 24px; border: 1px solid var(--mass-v1-border); border-inline-start: 4px solid var(--mass-v1-gold); border-radius: 12px; background: var(--mass-v1-surface); margin-bottom: 18px; }
.contract-detail-workspace .contract360-hero h3 { font-size: 24px; line-height: 1.5; margin: 6px 0; overflow-wrap: anywhere; }
.contract-detail-workspace .contract360-hero small { font-size: 14px; line-height: 1.8; }
.contract-detail-workspace .contract-detail-tabs { position: relative; top: auto; z-index: auto; display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding: 8px; margin-bottom: 20px; background: var(--mass-v1-surface); border: 1px solid var(--mass-v1-border); border-radius: 10px; }
.contract-detail-workspace .contract-detail-tab { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; font-size: 14px; }
.contract-detail-workspace .detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 18px; }
.contract-detail-workspace .detail { min-width: 0; padding: 14px; border: 1px solid var(--mass-v1-border-subtle); border-radius: 8px; background: var(--mass-v1-surface-secondary); overflow-wrap: anywhere; }
.contract-detail-workspace .detail small { display: block; margin-bottom: 7px; font-size: 12px; line-height: 1.6; color: var(--mass-v1-text-secondary); }
.contract-detail-workspace .detail b { font-size: 15px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.contract-detail-workspace .contract360-grid .detail-grid { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); }
.contract-detail-workspace .master-lifecycle-track { border: 1px solid var(--mass-v1-border); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.contract-detail-workspace .master-lifecycle-track-head { margin-bottom: 14px; }
.contract-detail-workspace .master-lifecycle-track-head small { font-size: 12px; line-height: 1.8; }
.contract-detail-workspace .contract-timeline-step { min-width: 0; padding: 12px; }
.contract-detail-workspace .contract-timeline-step b { font-size: 14px; line-height: 1.6; }
.contract-detail-workspace .mass-erp-contract-section { gap: 18px; }
.contract-detail-workspace .mass-erp-source > :is(p,small) { display: block; margin: 12px 20px; font-size: 13px; line-height: 1.8; }
.contract-detail-workspace .mass-erp-changes { padding: 18px 20px; }
.contract-detail-workspace .mass-erp-changes h4 { font-size: 15px; margin: 0 0 14px; }
.contract-detail-workspace .mass-erp-table { overflow: auto; }
.contract-detail-workspace .mass-erp-table table { min-width: 580px; width: 100%; }
.contract-detail-workspace .mass-erp-table :is(th,td) { padding: 12px 14px; font-size: 14px; line-height: 1.6; }
.contract-detail-workspace .workspace-note { margin: 14px 20px; }

/* 2. Bonds and operational alerts. */
#appShell .content[data-workspace-page=bonds] .bond-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-block: 18px; }
#appShell .content[data-workspace-page=bonds] .bond-summary > div { padding: 18px 20px; background: var(--mass-v1-surface); border: 1px solid var(--mass-v1-border); border-block-start: 3px solid var(--mass-v1-gold); border-radius: 10px; }
#appShell .content[data-workspace-page=bonds] .bond-summary span { display: block; font-size: 13px; color: var(--mass-v1-text-secondary); margin-bottom: 8px; }
#appShell .content[data-workspace-page=bonds] .bond-summary b { font-size: 28px; }
#appShell .content[data-workspace-page=bonds] .bonds-table { min-width: 1080px; }
#appShell .content[data-workspace-page=bonds] .bonds-table td:first-child { min-width: 200px; max-width: 300px; white-space: normal; }
#appShell .content[data-workspace-page=bonds] .bonds-table td:nth-child(6) { font-weight: 600; font-variant-numeric: tabular-nums; }
#appShell .content[data-workspace-page=alerts] .r14-alert-card { padding: 20px; border: 1px solid var(--mass-v1-border); border-inline-start: 3px solid var(--mass-v1-warning); border-radius: 10px; background: var(--mass-v1-surface); margin-bottom: 14px; }
#appShell .content[data-workspace-page=alerts] .r14-alert-card.is-ack { border-inline-start-color: var(--mass-v1-success); background: var(--mass-v1-surface-secondary); opacity: 1; }
#appShell .content[data-workspace-page=alerts] .r14-alert-top { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
#appShell .content[data-workspace-page=alerts] .r14-alert-card h4 { font-size: 16px; line-height: 1.6; margin: 12px 0 8px; }
#appShell .content[data-workspace-page=alerts] .r14-alert-card p { font-size: 14px; line-height: 1.9; margin: 0 0 16px; }
#appShell .content[data-workspace-page=alerts] .r14-alert-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 3. Directory, numbering, classification, analytics and settings. */
#appShell .content[data-workspace-page=vendors] .vendor-master-table { min-width: 1000px; }
#appShell .content[data-workspace-page=vendors] .vendor-master-table td:nth-child(2) { min-width: 240px; max-width: 340px; white-space: normal; }
#appShell .content[data-workspace-page=vendors] .vendor-master-table td:nth-child(4) { min-width: 180px; max-width: 280px; white-space: normal; }
#appShell .content[data-workspace-page=vendors] .vendor-register-count { padding: 8px 12px; border-radius: 8px; background: var(--mass-v1-surface-secondary); font-size: 13px; }
#appShell .content[data-workspace-page=numbering] .numbering-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#appShell .content[data-workspace-page=numbering] .number-group-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; margin-top: 18px; }
#appShell .content[data-workspace-page=numbering] .next-number { display: inline-block; padding: 6px 10px; border-radius: 6px; background: var(--mass-v1-selected); color: var(--mass-v1-text); font-size: 15px; }
#appShell .content[data-workspace-page=numbering] .numbering-archive-details > summary { display: flex; gap: 12px; flex-wrap: wrap; padding: 18px 20px; cursor: pointer; font-size: 15px; font-weight: 600; }
#appShell .content[data-workspace-page=numbering] .numbering-archive-details > summary small { font-weight: 400; line-height: 1.7; }
#appShell .content[data-workspace-page=classification] > .two-col { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; align-items: start; }
#appShell .content[data-workspace-page=classification] td { min-width: 95px; white-space: normal; }
#appShell .content[data-workspace-page=classification] td:nth-child(2),
#appShell .content[data-workspace-page=classification] td:nth-child(3) { min-width: 160px; overflow-wrap: anywhere; }
#appShell .workspace-class-tabs { display: none; }
#appShell .analytics-header-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
#appShell .content[data-workspace-page=analytics] .analytics-question-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; margin-bottom: 20px; }
#appShell .content[data-workspace-page=analytics] .analytics-question { min-height: 130px; padding: 20px; gap: 10px; font-family: var(--font); }
#appShell .content[data-workspace-page=analytics] .analytics-question span { font-size: 14px; line-height: 1.6; font-weight: 600; }
#appShell .content[data-workspace-page=analytics] .analytics-question strong { font-size: 27px; line-height: 1.3; font-variant-numeric: tabular-nums; }
#appShell .content[data-workspace-page=analytics] .analytics-question small { font-size: 12px; line-height: 1.7; }
#appShell .content[data-workspace-page=analytics] .analytics-question.active { border-color: var(--mass-v1-gold); background: var(--mass-v1-selected); }
#appShell .content[data-workspace-page=analytics] .analytics-detail-stage { padding: 20px; border-radius: 12px; }
#appShell .content[data-workspace-page=settings] .r27-settings-tabs { position: relative; top: auto; z-index: auto; }
#appShell .content[data-workspace-page=settings] .r27-settings-tabs > button { min-height: 44px; padding: 10px 16px; font-size: 14px; }
#appShell .content[data-workspace-page=settings] .r27-settings-panel.active { display: grid; gap: 20px; }
#appShell .content[data-workspace-page=settings] .health-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
#appShell .content[data-workspace-page=settings] .health-item { padding: 16px; min-width: 0; overflow-wrap: anywhere; }
#appShell .content[data-workspace-page=settings] .team-activity-filters { display: flex; flex-wrap: wrap; gap: 12px; }
#appShell .workspace-sensitive { border-inline-start: 3px solid var(--mass-v1-danger) !important; }
#appShell .content[data-workspace-page=settings] [data-action=delete-access] { color: var(--mass-v1-danger); border-color: var(--mass-v1-danger); }
#appShell .projects-table td:first-child { min-width: 180px; }
#appShell .project360-overview-grid { gap: 18px; }
#appShell .project360-overview-card { padding: 20px; border-radius: 12px; }
#appShell .project360-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

/* Existing mobile-card conversion remains authoritative; never force desktop widths. */
@media (max-width: 1000px) {
  .contract-detail-workspace .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #appShell .content[data-workspace-page=classification] > .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #appShell .content[data-workspace-page] :is(.toolbar,.panel-body,.panel-head) { padding: 14px; }
  #appShell .content[data-workspace-page] .toolbar-left { width: 100%; }
  #appShell .content[data-workspace-page] .toolbar-right { width: 100%; }
  #appShell .contracts-header-controls { padding: 12px; gap: 10px; }
  #appShell .contracts-header-controls > select { flex: 1 1 100%; }
  #appShell .contracts-header-controls > :is(button,a) { flex: 1 1 auto; min-height: 44px !important; }
  #appShell .content[data-workspace-page=contracts] .contract-facets-grid { grid-template-columns: 1fr; gap: 16px; }
  #appShell .content[data-workspace-page=bonds] .bond-summary { gap: 10px; }
  #appShell .content[data-workspace-page=bonds] .bond-summary > div { padding: 14px 10px; }
  #appShell .content[data-workspace-page=bonds] .bond-summary b { font-size: 24px; }
  #appShell .workspace-class-tabs { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--mass-v1-border); border-radius: 10px; background: var(--mass-v1-surface); margin-bottom: 16px; }
  #appShell .workspace-class-tabs button { flex: 1; padding: 10px; min-height: 44px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; color: var(--mass-v1-text); }
  #appShell .workspace-class-tabs button[aria-selected=true] { background: var(--mass-v1-selected); font-weight: 700; }
  #appShell .analytics-header-tools { width: 100%; }
  #appShell .analytics-header-tools .workspace-field-label:first-child { flex-basis: 100%; }
  #appShell .content[data-workspace-page=analytics] .analytics-question-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #appShell .content[data-workspace-page=analytics] .analytics-question { padding: 14px; min-height: 124px; }
  #appShell .content[data-workspace-page=analytics] .analytics-question strong { font-size: 23px; overflow-wrap: anywhere; }
  .contract-detail-workspace .contract360-hero { padding: 18px; }
  .contract-detail-workspace .contract360-hero h3 { font-size: 21px; }
  .contract-detail-workspace .detail-grid { grid-template-columns: 1fr; padding: 14px; }
  .contract-detail-workspace .master-lifecycle-track { padding: 14px; }
}
@media (max-width: 600px) {
  .contract-detail-workspace .mass-erp-table table.mobile-card-table { min-width: 0; max-width: 100%; width: 100%; }
  .contract-detail-workspace .mass-erp-table table.mobile-card-table td { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  html[data-mass-theme] #appShell .content[data-workspace-page] table.mobile-card-table { min-width: 0; width: 100%; }
  #appShell .content[data-workspace-page] table.mobile-card-table tbody { padding: 12px; gap: 14px; }
  #appShell .content[data-workspace-page] table.mobile-card-table tr { min-width: 0; border-radius: 10px; }
  html[data-mass-theme] #appShell .content[data-workspace-page] table.mobile-card-table td { min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
  #appShell .content[data-workspace-page] table.mobile-card-table td::before { font-size: 11px; line-height: 1.7; }
  #appShell .content[data-workspace-page] table.mobile-card-table td:last-child .btn { min-height: 44px !important; }
  #appShell .content[data-workspace-page] :is(.row-actions,.toolbar-right) .btn { min-height: 44px !important; }
}
@media print {
  #appShell .workspace-class-tabs { display: none !important; }
  #appShell [data-class-pane][hidden] { display: block !important; }
  #appShell .content[data-workspace-page] { max-width: none; }
}