@import url('/ui/framework/style/index.css');

:root {
  --wms-line: rgb(0 0 0 / 12%);
  --wms-muted: rgb(0 0 0 / 60%);
  --wms-soft: rgb(0 0 0 / 3%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 20rem; }
button, input, select { font: inherit; }

.production-page, .migrations-page { display: grid; gap: 0.75rem; width: 100%; max-width: 100rem; margin: 0 auto; }
.lifecycle-card { width: min(100%, 34rem); margin: 2rem auto; }
.lifecycle-card > .v-head > .v-title { margin-top: 0; font-size: 1.15rem; font-weight: 500; }
.section-description { margin: 0.2rem 0 0; color: var(--wms-muted); }
.connection-status { min-width: max-content; padding: 0.25rem 0.6rem; border-radius: var(--v-border-radius-button); background: #eee; font-size: 0.75rem; font-weight: 500; }
.connection-status[data-state="ok"] { color: #315a16; background: #e5f1d2; }
.connection-status[data-state="warning"] { color: #7a1f18; background: #f9dfdb; }
.connection-status[data-state="error"] { color: #7a1f18; background: #f9dfdb; }

.work-card > .v-head { min-height: 3rem; }
.work-card > .v-head > .v-title { margin-top: 0; margin-left: 0; font-weight: 500; }
.work-card > .v-content { padding-top: 0.25rem; }
.work-card h3 { margin: 1.25rem 0 0.55rem; font-size: 1rem; font-weight: 500; }
.v-header .v-button { margin-left: auto; }

label { display: grid; gap: 0.25rem; color: var(--v-primary); font-size: 0.86rem; font-weight: 500; }
input, select { width: 100%; min-height: 2.6rem; padding: 0.65rem 0.55rem 0.25rem; color: rgb(0 0 0 / 87%); background: #fff; border: 0; border-bottom: 1px solid rgb(0 0 0 / 24%); border-radius: 0; outline: 0; }
input:hover, select:hover { border-color: var(--v-secondary); }
input:focus, select:focus { border-bottom: 2px solid var(--v-secondary); }

.primary-button { color: #fff; background: var(--v-secondary); border-color: var(--v-secondary); }
.secondary-button { color: var(--v-accent); background-color: #fff; }
.form-grid, .toolbar { display: flex; align-items: flex-start; gap: 1rem; margin: 0.75rem 0; }
.form-grid > label { flex: 1 1 14rem; }
.toolbar > label { min-width: 10rem; }
.grow { flex: 1 1 24rem; }
.align-end { align-self: end; }

.table-scroll { width: 100%; margin-top: 0.75rem; overflow-x: auto; border: 1px solid var(--wms-line); }
table { width: 100%; min-width: 48rem; border-spacing: 0; border-collapse: collapse; table-layout: fixed; }
.v-datagrid > table > thead > tr > th,
.v-datagrid > table > tbody > tr > td,
.component-details-table > thead > tr > th,
.component-details-table > tbody > tr > td {
  position: relative;
  height: 2.75rem;
  padding: 0.35rem 0.65rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--wms-line);
  font-size: 0.75rem;
  line-height: 1.2rem;
}
.v-datagrid > table > thead > tr > th,
.component-details-table > thead > tr > th { color: #fff; background: var(--v-secondary); font-weight: 500; white-space: nowrap; }
.v-datagrid > table > tbody > tr > td { cursor: default; }
tbody tr:nth-child(even) td { background: rgb(0 0 0 / 5%); }
tbody tr:last-child td { border-bottom: 0; }
.v-datagrid > table > thead > tr > th.numeric-header,
.v-datagrid > table > tbody > tr > td.numeric-cell,
.v-datagrid > table > thead > tr > th.date-header,
.v-datagrid > table > tbody > tr > td.date-cell,
.v-datagrid > table > thead > tr > th.action-header,
.v-datagrid > table > tbody > tr > td.action-cell,
.component-details-table > thead > tr > th.numeric-header,
.component-details-table > tbody > tr > td.numeric-cell,
.component-details-table > thead > tr > th.date-header,
.component-details-table > tbody > tr > td.date-cell,
.component-details-table > thead > tr > th.action-header,
.component-details-table > tbody > tr > td.action-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.status-cell { white-space: nowrap; }
.sort-button { display: block; width: 100%; padding: 0; color: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; line-height: inherit; }
.sort-button::after { margin-left: 0.35rem; content: '↕'; }
.sort-button.numeric-sort { text-align: right; }
th[aria-sort="ascending"] .sort-button::after { content: '↑'; }
th[aria-sort="descending"] .sort-button::after { content: '↓'; }

.prominent-number { font-weight: 600; }
.stale-value { color: var(--wms-muted); text-decoration: underline dotted; text-underline-offset: 0.2rem; }
.mhd-value { display: inline-block; min-width: 4.5rem; padding: 0.15rem 0.4rem; border-radius: 0.25rem; text-align: center; font-weight: 600; }
.mhd-red { color: #a52a22; background: #fbe9e7; }
.mhd-yellow { color: #725800; background: #fff1c2; }
.mhd-green { color: #315a16; background: #e5f1d2; }
.mhd-future { color: #115442; background: #d7efe7; border: 1px solid #78b8a5; }
.version-value { display: inline-block; min-width: 4.5rem; padding: 0.15rem 0.4rem; border-radius: 0.25rem; text-align: center; font-weight: 600; color: #3f4a37; background: #edf2e8; }
.inactive-row { opacity: 0.62; }
.table-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0.3rem; }
.overview-grid { min-width: 96rem; }
.sets-grid { min-width: 58rem; }
.booking-preview-grid { min-width: 76rem; }
.component-editor-grid { min-width: 62rem; }
.history-grid { min-width: 78rem; }
.mhd-grid { min-width: 32rem; }
.col-expand { width: 3rem; }
.col-article-number { width: 9rem; }
.col-article-name { width: auto; }
.col-status { width: 11rem; }
.col-quantity { width: 8rem; }
.col-producible { width: 11rem; }
.col-mhd { width: 11rem; }
.col-plan { width: 13rem; }
.col-components { width: 7.5rem; }
.col-action { width: 11rem; }
.col-date { width: 12rem; }
.col-order { width: 8rem; }
.col-error { width: 17rem; }
.article-name-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.interactive-row { cursor: pointer; }
.interactive-row > td { cursor: pointer !important; }
.interactive-row:focus-visible { outline: 2px solid var(--v-info); outline-offset: -2px; }
.table-button { min-height: 1.9rem; padding: 0.15rem 0.6rem; color: #fff; background: var(--v-secondary); border: 1px solid var(--v-secondary); border-radius: var(--v-border-radius-button); cursor: pointer; white-space: nowrap; }
.table-button.secondary { color: var(--v-accent); background: #fff; border-color: lightgrey; }
.expand-header, .expand-cell { text-align: center !important; }
.details-toggle { width: 2rem; min-width: 2rem; padding: 0.1rem; }
.plan-controls { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; }
.plan-controls input { width: 5rem; min-height: 1.9rem; }
.plan-controls input:disabled { color: inherit; background: #f3f3f3; opacity: 1; }
.plan-controls .plan-save { min-width: auto; }
.overview-details-row td { padding: 0.65rem 1rem 0.8rem 3rem !important; background: #fff !important; }
.component-details-scroll { overflow-x: auto; border: 1px solid var(--wms-line); }
.component-details-table { min-width: 68rem; }
.component-details-table > thead > tr > th,
.component-details-table > tbody > tr > td { height: 2.4rem; padding-block: 0.25rem; }
.mhd-planning { margin: 1rem 0; padding: 0.75rem; border: 1px solid var(--wms-line); background: #fff; }
.booking-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.booking-action-bar p { margin: 0.25rem 0 0; }
.booking-action-bar .v-button { flex: 0 0 auto; }
.booking-details { margin-top: 0.8rem; border-top: 1px solid var(--wms-line); }
.booking-details > summary { padding: 0.7rem 0; color: var(--v-accent); font-size: 0.82rem; font-weight: 500; cursor: pointer; }
.booking-details-content { padding-bottom: 0.25rem; }
.mhd-component + .mhd-component { margin-top: 0.9rem; }
.mhd-component h4 { margin: 0; font-size: 0.82rem; font-weight: 600; }
.mhd-grid input { min-height: 2rem; padding: 0.2rem 0.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.set-mhd-summary { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1.25rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--wms-line); }
.set-mhd-summary label { min-width: 15rem; }
.history-details-row > td { padding: 0.65rem 1rem !important; background: #fff !important; }
.history-movements-grid { min-width: 58rem; }
.error-code-cell { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.7rem !important; }
.limiting-component td:first-child { color: #765a00; font-weight: 600; }

.status-badge { display: inline-flex; width: max-content; padding: 0.2rem 0.5rem; border-radius: var(--v-border-radius-button); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.status-badge[data-status="ready"] { color: #315a16; background: #e5f1d2; }
.status-badge[data-status="blocked"], .status-badge[data-status="stale"] { color: #725400; background: #fff2c7; }
.status-badge[data-status="buffer"] { color: #7a1f18; background: #f9dfdb; }
.status-badge[data-status="unavailable"] { color: #7a1f18; background: #f9dfdb; }
.status-badge[data-status="inactive"] { color: #555; background: #e8e8e8; }
.loading-copy, .notice { margin-top: 1rem; padding: 0.7rem 0.85rem; background: #f4f7ef; border-left: 4px solid var(--v-secondary); }
.probe-card { border: 2px solid #b64a3a; }
.probe-warning { padding: 0.85rem 1rem; color: #681b15; background: #f9dfdb; border-left: 4px solid var(--v-negative); }
.probe-result label { display: block; margin-top: 0.85rem; }
.probe-result select, .probe-result input { width: 100%; }
.loading-copy[data-state="error"] { color: #7a1f18; background: #fdecea; border-color: var(--v-negative); }
.updated-copy { margin: 0.65rem 0 0; color: var(--wms-muted); font-size: 0.8rem; text-align: right; }
.empty-copy, .muted { color: var(--wms-muted); }

.editor-card, .result-card { margin-top: 1rem; padding: 1rem; background: #fafafa; border: 1px solid var(--wms-line); border-radius: var(--v-border-radius); }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.editor-heading h3 { margin: 0; }
.selected-article { margin: 1rem 0; padding: 0.7rem; background: #eef6e2; }
.search-results { display: grid; gap: 0.25rem; max-height: 14rem; margin: 0.4rem 0 1rem; overflow-y: auto; }
.search-results p { margin: 0; padding: 0.45rem; color: var(--wms-muted); }
.search-result { padding: 0.55rem 0.7rem; text-align: left; background: #fff; border: 1px solid var(--wms-line); cursor: pointer; }
.search-result:disabled { cursor: not-allowed; opacity: 0.55; }
.editor-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.editor-actions #save-set { margin-left: auto; }
.danger-button { color: var(--v-negative); border-color: var(--v-negative); }
.empty-state { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem; color: var(--wms-muted); }
.empty-state p { margin: 0.15rem 0 0; }
.empty-icon { display: grid; width: 2rem; height: 2rem; place-items: center; color: #fff; background: var(--v-info); border-radius: 50%; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem; }
.page-footer p { margin: 0; color: var(--wms-muted); }
.footer-context { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.message { position: sticky; z-index: 4; top: 0.5rem; padding: 0.75rem 1rem; color: #315a16; background: #e5f1d2; border-left: 4px solid var(--v-positive); box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
.message[data-type="error"] { color: #7a1f18; background: #f9dfdb; border-color: var(--v-negative); }
.status-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem 1.4rem; margin: 0; }
.status-list div { min-width: 0; }
.status-list dt { color: var(--wms-muted); font-size: 0.78rem; }
.status-list dd { margin: 0.15rem 0 0; font-weight: 500; overflow-wrap: anywhere; }

button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--v-info); outline-offset: 2px; }
.numeric-cell input { padding-right: 0.25rem; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 52rem) {
  .form-grid, .toolbar { align-items: stretch; flex-direction: column; }
  .form-grid > label, .toolbar > label { flex: none; width: 100%; min-width: 0; }
  .align-end { align-self: stretch; justify-content: center; }
  .booking-action-bar { align-items: stretch; flex-direction: column; }
  .booking-action-bar .v-button { justify-content: center; }
}

@media (max-width: 34rem) {
  body { padding: 0.5rem; }
  .work-card > .v-head { align-items: stretch; flex-direction: column; }
  .work-card > .v-head > .v-header { justify-content: stretch; padding: 0 1rem 0.6rem; }
  .work-card > .v-head > .v-header .v-button { width: 100%; justify-content: center; }
  .page-footer { align-items: stretch; flex-direction: column; }
  .editor-actions { align-items: stretch; flex-direction: column-reverse; }
  .editor-actions #save-set { width: 100%; margin-left: 0; justify-content: center; }
  .editor-actions #toggle-set-active { width: 100%; justify-content: center; }
}