/*
 * Material UI 100% canvas density baseline r1
 * ContractRef:
 * project-docs/design/MATERIAL_UI_100_PERCENT_CANVAS_DENSITY_AUDIT_20260831.md#material-ui-100-canvas-baseline-r1
 *
 * This layer is intentionally loaded last. It owns the shared application
 * canvas and density decisions without changing business semantics.
 */

:root {
  --mui-sidebar-width: 176px;
  --mui-sidebar-width-compact: 168px;
  --mui-topbar-height: 52px;
  --mui-page-gutter: 18px;
  --mui-page-gutter-compact: 14px;
  --mui-page-gap: 10px;
  --mui-control-height: 36px;
  --mui-topbar-control-height: 34px;
  --mui-dense-row-height: 48px;
  --mui-business-row-height: 58px;
  --mui-panel-padding: 12px;
}

/* Shared desktop application shell. The production board is an explicit exception. */
.app-shell:not(.view-board) {
  grid-template-columns: var(--mui-sidebar-width) minmax(0, 1fr);
}

.app-shell:not(.view-board) .sidebar {
  padding: 10px 12px 12px;
}

.app-shell:not(.view-board) .brand {
  min-height: 42px;
  padding: 0 2px 8px;
}

.app-shell:not(.view-board) .brand-mark.small {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

.app-shell:not(.view-board) .sidebar nav {
  gap: 8px;
}

.app-shell:not(.view-board) .nav-group,
.app-shell:not(.view-board) .nav-group-items {
  gap: 3px;
}

.app-shell:not(.view-board) .nav-group-summary,
.app-shell:not(.view-board) .nav-group-label {
  min-height: 25px;
  padding-inline: 9px;
}

.app-shell:not(.view-board) .nav-item {
  min-height: 36px;
  gap: 8px;
  padding: 0 10px;
  font-size: 13px;
}

.app-shell:not(.view-board) .nav-item svg {
  width: 16px;
  height: 16px;
}

.app-shell:not(.view-board) .sidebar-user {
  padding: 12px 9px 2px;
}

.app-shell:not(.view-board) .sidebar-user span {
  font-size: 12px;
}

.app-shell:not(.view-board) .topbar,
.app-shell.view-progress .topbar,
.app-shell.view-order_progress .topbar,
.app-shell.view-personal_capacity .topbar {
  min-height: var(--mui-topbar-height);
  height: var(--mui-topbar-height);
  gap: 12px;
  padding: 0 16px;
}

.app-shell:not(.view-board) .topbar > .page-intro {
  gap: 10px;
}

.app-shell:not(.view-board) .topbar h1 {
  font-size: 23px;
  font-weight: 750;
  line-height: 1.12;
}

.app-shell:not(.view-board) .topbar p {
  margin: 0;
  font-size: 13px;
}

.app-shell:not(.view-board) .topbar .top-actions {
  gap: 8px;
}

.app-shell:not(.view-board) .topbar .button,
.app-shell:not(.view-board) .topbar .connection-button:not(.is-compact),
.app-shell.view-today #today-topbar-freshness .workbench-freshness > .button {
  height: var(--mui-topbar-control-height);
  min-height: var(--mui-topbar-control-height);
}

.app-shell:not(.view-board) .topbar .button {
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
}

.app-shell:not(.view-board) .topbar .connection-button:not(.is-compact) {
  padding: 0 8px;
  font-size: 12px;
}

/* Shared content rhythm. Wide operational pages use the available workspace. */
.app-shell:not(.view-board) .page-content {
  gap: var(--mui-page-gap);
  padding: 14px var(--mui-page-gutter) 18px;
}

.app-shell:is(
  .view-today,
  .view-orders,
  .view-products,
  .view-schedule,
  .view-reporting,
  .view-personal_capacity,
  .view-progress,
  .view-order_progress,
  .view-pattern_room,
  .view-insights
) .page-content {
  max-width: none;
}

.app-shell.view-system .page-content {
  max-width: 1680px;
}

.app-shell.view-today .page-content {
  gap: 10px;
  padding: 10px 16px 18px;
}

.app-shell.view-personal_capacity .page-content {
  gap: 4px;
  padding: 10px 14px 18px;
}

.app-shell.view-progress .page-content,
.app-shell.view-order_progress .page-content {
  gap: 6px;
  padding: 8px var(--mui-page-gutter) 18px;
}

.app-shell.view-pattern_room .page-content {
  padding-top: 10px;
}

/* Shared control density. Key facts and headings keep their role-specific sizes. */
.button {
  min-height: var(--mui-control-height);
  padding-inline: 13px;
  border-radius: 6px;
  font-size: 13px;
}

.button-small {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 12px;
}

.app-shell .progress-search-refresh.button-small {
  min-height: 36px;
  margin-left: 2px;
  padding: 0 8px;
  border-color: transparent;
  background: transparent;
  color: var(--progress-body, var(--muted-strong));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.app-shell .progress-search-refresh.button-small:hover,
.app-shell .progress-search-refresh.button-small:focus-visible {
  border-color: transparent;
  background: var(--surface-muted, #f1f5f9);
  color: var(--progress-primary, var(--primary-dark));
}

.icon-button {
  width: var(--mui-control-height);
  height: var(--mui-control-height);
  min-height: var(--mui-control-height);
  flex-basis: var(--mui-control-height);
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body select {
  min-height: var(--mui-control-height);
}

.search-input {
  min-height: var(--mui-control-height);
}

.segmented button,
.order-list-filter-menu > summary,
.order-list-tools > summary {
  min-height: 34px;
}

.page-toolbar-card {
  padding: 8px;
}

.content-section,
.action-band {
  padding: var(--mui-panel-padding);
}

.metric-tile {
  min-height: 72px;
  gap: 4px;
  padding: 10px 12px;
}

.metric-tile strong {
  font-size: 22px;
}

.responsive-table th,
.responsive-table td {
  padding: 8px 10px;
}

.status-badge,
.risk-badge {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 12px;
}

.empty-state,
.loading-state {
  min-height: 72px;
}

#toast-region {
  right: 14px;
  bottom: 14px;
  width: min(340px, calc(100vw - 28px));
}

.toast {
  padding: 11px 13px;
  font-size: 13px;
}

/* Dialog, drawer, date picker and floating surface baseline. */
dialog.app-dialog {
  max-height: calc(100vh - 28px);
}

.dialog-header {
  min-height: 56px;
  padding: 10px 16px;
}

.dialog-body {
  max-height: calc(100vh - 84px);
  padding: 16px;
}

.dialog-footer {
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
}

.dialog-section {
  margin-top: 16px;
  padding-top: 14px;
}

.managed-date-toggle {
  width: 36px;
  height: 36px;
}

.managed-date-icon {
  width: 20px;
  height: 20px;
}

.managed-date-calendar {
  padding: 10px;
}

.diagnostics-card {
  padding: 12px;
}

.personal-adjustment-drawer > header {
  min-height: 54px;
  padding: 9px 12px;
}

.personal-adjustment-drawer > p {
  padding: 7px 12px;
}

.personal-adjustment-footer {
  padding: 10px 12px;
}

/* Personal capacity: full-width operational matrix with corrected sticky offsets. */
.personal-capacity-command {
  min-height: 44px;
  padding: 7px 12px;
}

.personal-capacity-kpis {
  padding: 9px 12px 8px;
}

.personal-capacity-kpis > div {
  padding: 3px 10px;
}

.personal-capacity-kpis strong {
  font-size: 23px;
}

.personal-capacity-kpis > div:first-child strong {
  font-size: 27px;
}

.personal-capacity-department-status {
  margin: 0 12px 9px;
  padding: 8px 10px;
}

.personal-capacity-matrix-toolbar {
  top: var(--mui-topbar-height);
  min-height: 56px;
  padding: 6px 14px;
}

.personal-capacity-matrix-shell {
  --personal-worker-column-width: 176px;
  --personal-day-column-width: 176px;
}

.personal-capacity-date-header {
  top: 108px;
}

.personal-capacity-date-header th {
  height: 48px;
  padding: 7px 9px;
}

.personal-capacity-matrix th:not(.personal-worker-sticky),
.personal-capacity-matrix td {
  padding: 8px;
}

.personal-worker-info > strong {
  min-height: 22px;
  font-size: 16px;
}

.personal-worker-info > span,
.personal-worker-info > small,
.personal-day-capacity {
  font-size: 12px;
}

.personal-day-remaining {
  font-size: 15px;
}

/* Progress pages share the 52px shell; only the column heading remains sticky. */
.progress-matrix-sticky-head {
  top: 60px;
}

/* Scheduling representative page: exact 100% target density, unchanged business structure. */
.app-shell.view-schedule .page-content {
  gap: 0;
  padding: 14px 18px;
}

.view-schedule .schedule-workspace {
  gap: 0;
  min-height: 0;
  padding: 0;
}

.schedule-date-navigator-controls {
  min-height: 34px;
  height: 34px;
  margin-bottom: 6px;
}

.schedule-range-controls {
  height: 34px;
  padding: 1px;
}

.schedule-range-controls button {
  min-height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

.schedule-date-navigator .capacity-day {
  height: 142px;
  min-height: 142px;
  gap: 8px;
  padding: 13px 14px;
}

.schedule-date-navigator .capacity-day-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.schedule-date-navigator .capacity-day-heading > span > b {
  font-size: 15px;
}

.schedule-date-navigator .capacity-day-heading > span > small {
  font-size: 12px;
}

.schedule-date-navigator .capacity-day-heading strong {
  font-size: 22px;
}

.schedule-date-navigator .capacity-load-bar {
  height: 4px;
  margin-block: 2px 1px;
}

.schedule-date-navigator .capacity-day-primary {
  font-size: 15px;
}

.schedule-date-navigator .capacity-day-context {
  font-size: 12px;
}

.schedule-date-navigator .capacity-day.is-stopped .capacity-day-heading {
  display: grid;
}

.schedule-date-navigator .capacity-day.is-stopped .capacity-day-heading strong {
  font-size: 18px;
}

.schedule-workbench-grid {
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  height: calc(100vh - 272px);
  min-height: 400px;
  gap: 10px;
  margin-top: 10px;
}

.schedule-panel-toolbar {
  min-height: 50px;
  padding: 6px 12px;
}

.schedule-panel-title strong,
.schedule-worker-heading strong {
  font-size: 15px;
}

.schedule-order-search input,
.schedule-filter-select select {
  height: var(--mui-control-height);
  min-height: var(--mui-control-height);
}

.schedule-order-results,
.schedule-worker-table {
  max-height: none;
}

.schedule-order-list-head {
  min-height: 32px;
  padding-block: 4px;
}

.schedule-order-option {
  min-height: 58px;
}

.schedule-order-option-main {
  padding-block: 6px;
}

.schedule-order-option-identity strong,
.schedule-order-option-qty strong {
  font-size: 15px;
}

.schedule-order-option-identity small {
  font-size: 12px;
}

.schedule-worker-actions .button {
  min-height: 34px;
}

.schedule-worker-table th {
  height: 32px;
  padding: 6px 10px;
}

.schedule-worker-table td {
  height: 48px;
  padding: 4px 10px;
  font-size: 12px;
}

.schedule-worker-table td > strong {
  font-size: 14px;
}

.schedule-worker-table td > small {
  font-size: 10px;
}

/* Compact desktop: keep 1366 usable without shrinking business typography. */
@media (max-width: 1450px) {
  :root {
    --mui-sidebar-width: var(--mui-sidebar-width-compact);
    --mui-page-gutter: var(--mui-page-gutter-compact);
  }

  .app-shell.view-schedule .page-content {
    padding: 12px var(--mui-page-gutter-compact);
  }

  .schedule-date-navigator .capacity-day {
    padding-inline: 10px;
  }

  .schedule-workbench-grid {
    height: calc(100vh - 266px);
  }
}

@media (max-width: 1180px) and (min-width: 821px) {
  :root {
    --mui-sidebar-width: 156px;
  }

  .app-shell:not(.view-board) .nav-item {
    padding-inline: 8px;
  }

  .app-shell:not(.view-board) .topbar p {
    display: none;
  }
}

/* Medium width turns wide workbenches into local scroll or stacked panels. */
@media (max-width: 900px) {
  .schedule-workbench-grid {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-order-picker,
  .schedule-worker-panel {
    min-height: 360px;
  }

  .app-shell.view-personal_capacity .page-content {
    padding: 10px 0 18px;
  }

  .personal-capacity-matrix-toolbar {
    top: 0;
  }

  .personal-capacity-date-header {
    top: 0;
  }
}

/* Existing mobile mode remains a functional reflow, not a separate phone design. */
@media (max-width: 820px) {
  .app-shell:not(.view-board) {
    display: block;
  }

  .app-shell:not(.view-board) .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 8px 10px;
  }

  .app-shell:not(.view-board) .topbar,
  .app-shell.view-progress .topbar,
  .app-shell.view-order_progress .topbar,
  .app-shell.view-personal_capacity .topbar {
    height: auto;
    min-height: auto;
    padding: 9px 12px;
  }

  .app-shell:not(.view-board) .page-content,
  .app-shell.view-progress .page-content,
  .app-shell.view-order_progress .page-content {
    padding: 10px 12px 16px;
  }

  .progress-matrix-sticky-head {
    display: none;
  }
}

@media (max-width: 680px) {
  .app-shell:not(.view-board) .topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .app-shell:not(.view-board) .topbar .top-actions {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .app-shell:not(.view-board) .topbar .button {
    min-height: 36px;
  }

  .button {
    min-height: 40px;
  }

  dialog.app-dialog {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
  }

  .dialog-header,
  .dialog-body {
    padding-inline: 12px;
  }

  .schedule-date-navigator-controls {
    height: auto;
    min-height: 34px;
  }

  .schedule-date-navigator .capacity-day {
    height: 142px;
    min-height: 142px;
  }

  .schedule-order-option {
    min-height: 74px;
  }

  .schedule-worker-table td {
    height: auto;
    min-height: 0;
  }
}