:root {
  --petroleum: #2F343B;
  --petroleum-dark: #1F2937;
  --ink: #1f2937;
  --muted: #667085;
  --line: #D1D5DB;
  --bg: #F4F6F8;
  --card: #ffffff;
  --accent: #D97706;
  --danger: #DC2626;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.initial-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(135deg, #1f2329 0%, #303640 52%, #20252c 100%);
  color: #ffffff;
}

.initial-loading-panel {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(31, 35, 41, 0.72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.initial-loading-logo {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 78px;
  text-align: center;
}

.initial-loading-logo img {
  max-width: 190px;
  max-height: 58px;
  object-fit: contain;
}

.initial-loading-logo strong {
  display: none;
  font-size: 18px;
  letter-spacing: 0;
}

.industrial-loader {
  position: relative;
  width: min(240px, 100%);
  height: 42px;
}

.metal-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 12px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 18% 82%, rgba(255, 255, 255, 0.1)),
    linear-gradient(180deg, #d7dde4 0%, #8b949f 50%, #535c66 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px rgba(0, 0, 0, 0.24);
}

.cut-line {
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
  height: 30px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.95), 0 0 28px rgba(217, 119, 6, 0.55);
  animation: loading-cut 1.45s ease-in-out infinite;
}

.spark {
  position: absolute;
  top: 20px;
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: #fbbf24;
  opacity: 0;
  transform-origin: left center;
  animation: loading-spark 1.45s ease-out infinite;
}

.spark-a {
  transform: rotate(-22deg);
}

.spark-b {
  transform: rotate(18deg);
  animation-delay: 0.12s;
}

.initial-loading p {
  margin: 0;
  color: #E5E7EB;
  font-size: 15px;
  font-weight: 700;
}

.internal-loading {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--petroleum-dark);
}

.internal-loading .internal-industrial-loader {
  width: min(180px, 100%);
  height: 30px;
}

.internal-loading .metal-bar {
  top: 11px;
  height: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 7px 18px rgba(47, 52, 59, 0.12);
}

.internal-loading .cut-line {
  top: 5px;
  width: 3px;
  height: 22px;
  animation-name: internal-loading-cut;
}

.internal-loading .spark {
  top: 15px;
  width: 18px;
  animation-name: internal-loading-spark;
}

.internal-loading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.operation-loading-host {
  position: relative;
}

.operation-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: 28px;
  background: rgba(244, 246, 248, 0.58);
  backdrop-filter: blur(1px);
  pointer-events: auto;
}

.operation-loading-overlay .internal-loading {
  min-height: 86px;
  padding: 8px 16px;
}

.error-state {
  border-color: #f0b0a8;
  background: #fff7f5;
  color: #9b1c1c;
}

@keyframes internal-loading-cut {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(176px);
  }
}

@keyframes internal-loading-spark {
  0%,
  42% {
    left: 0;
    opacity: 0;
  }

  50% {
    left: calc(100% - 7px);
    opacity: 1;
  }

  76%,
  100% {
    left: calc(100% + 12px);
    opacity: 0;
  }
}

@keyframes loading-cut {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(236px);
  }
}

@keyframes loading-spark {
  0%,
  42% {
    left: 0;
    opacity: 0;
  }

  50% {
    left: calc(100% - 8px);
    opacity: 1;
  }

  76%,
  100% {
    left: calc(100% + 18px);
    opacity: 0;
  }
}

@media (max-width: 380px) {
  .industrial-loader {
    width: 210px;
  }

  @keyframes loading-cut {
    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(206px);
    }
  }
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, #1f2329 0%, #343941 48%, #22272e 100%);
  padding: 32px;
}

.login-shell {
  display: grid;
  width: min(480px, 100%);
  gap: 18px;
  justify-items: center;
}

.login-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  padding: 34px 38px;
  display: grid;
  gap: 16px;
}

.login-card h1 {
  margin: 0;
  font-size: 28px;
  text-align: center;
}

.login-heading {
  display: grid;
  gap: 6px;
  text-align: center;
  margin-bottom: 4px;
}

.login-heading span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.login-logo {
  display: grid;
  place-items: center;
  min-height: 78px;
}

.login-logo img,
.brand img {
  max-height: 64px;
  max-width: 210px;
  object-fit: contain;
}

.logo-fallback {
  display: none;
  width: 74px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.logo-fallback.large {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  width: 110px;
  height: 58px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
}

input:focus,
select:focus {
  outline: 2px solid rgba(217, 119, 6, 0.18);
  border-color: var(--petroleum);
}

select[data-locked="true"] {
  background: #F4F6F8;
  color: var(--muted);
}

select:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.primary-button,
.secondary-button,
.ghost-button {
  border: 0;
  border-radius: 6px;
  min-height: 40px;
  padding: 0 16px;
  font-weight: 700;
}

.primary-button {
  background: var(--petroleum);
  color: #FFFFFF;
}

.primary-button:hover:not(:disabled) {
  background: var(--petroleum-dark);
}

.secondary-button {
  background: #F4F6F8;
  color: var(--petroleum-dark);
}

.ghost-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.primary-button.full {
  width: 100%;
}

.primary-button:disabled,
.secondary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  height: 72px;
  background: var(--petroleum);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 18px;
}

.brand,
.topbar-actions,
.toolbar,
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-notifications {
  position: relative;
}

.notification-bell-button {
  position: relative;
  min-width: 42px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #DC2626;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
}

.notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, 92vw);
  max-height: 70vh;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 30;
}

.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.notification-dropdown-header > strong {
  color: var(--petroleum-dark);
}

.notification-history-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-item {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #F8FAFC;
  color: var(--ink);
  text-align: left;
}

.notification-item.is-pending {
  border-left: 4px solid #D97706;
  background: #FFFBEB;
}

.notification-item.is-resolved {
  opacity: 0.78;
}

.notification-item strong,
.notification-item em {
  color: var(--petroleum-dark);
}

.notification-item span,
.notification-item em {
  font-size: 12px;
  line-height: 1.35;
}

.notification-item em {
  justify-self: start;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.14);
  padding: 2px 7px;
  font-style: normal;
  font-weight: 900;
}

.notification-history-backdrop {
  z-index: 80;
}

.notification-history-modal {
  display: grid;
  gap: 14px;
}

.notification-history-list {
  display: grid;
  gap: 10px;
}

.logged-user {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding-left: 4px;
}

.logged-user strong {
  font-size: 14px;
  line-height: 1.15;
}

.logged-user span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.list-actions {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.list-actions .search {
  width: min(520px, 100%);
}

.list-actions .primary-button {
  white-space: nowrap;
}

.brand strong {
  font-size: 20px;
}

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 0 28px;
}

.internal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.internal-tab {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  min-height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  font-weight: 700;
}

.internal-tab.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(217, 119, 6, 0.08);
}

.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 16px 14px;
  font-weight: 700;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab:hover {
  color: #F59E0B;
}

.page {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 32px 32px 24px;
  min-width: 0;
}

.page:has(.stock-page) {
  width: calc(100vw - 48px);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.page:has(.dashboard-page) {
  width: 100%;
  max-width: 1760px;
  padding-left: clamp(20px, 1.6vw, 28px);
  padding-right: clamp(20px, 1.6vw, 28px);
}

.page:has(.planning-page) {
  width: calc(100vw - 48px);
  max-width: 1760px;
}

.page:has(.registrations-page),
.page:has(.launches-page),
.page:has(.tracking-page),
.page:has(.analysis-page),
.page:has(.productivity-matrix-page) {
  width: calc(100% - 40px);
  max-width: 1760px;
}

.stack {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.institutional-footer {
  width: min(1360px, 100%);
  margin: 8px auto 28px;
  padding: 8px 32px 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.institutional-footer img {
  display: block;
  width: clamp(110px, 12vw, 120px);
  max-width: 70%;
  height: auto;
  opacity: 0.78;
}

.login-shell .institutional-footer {
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
}

.stack > *,
.panel,
.table-target,
.stock-table-target,
.launches-target,
.registrations-target,
.internal-tabs-target {
  min-width: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.page-header h1,
.panel h2 {
  margin: 0;
}

.page-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.panel,
.metric-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.panel {
  padding: 20px;
}

.panel,
.metric-card {
  animation: cardFadeIn 420ms ease both;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
}

.registration-actions {
  justify-content: flex-start;
}

.registration-form .wide-field,
.material-form .wide-field {
  grid-column: 1 / -1;
}

.readonly-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.readonly-chip-list {
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfc;
  padding: 7px 10px;
}

.material-autocomplete {
  position: relative;
}

.material-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(16, 24, 40, 0.14);
}

.material-suggestions button,
.material-suggestion-empty {
  width: 100%;
  display: grid;
  gap: 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
}

.material-suggestions button {
  cursor: pointer;
}

.material-suggestions button:hover,
.material-suggestions button:focus {
  background: #F4F6F8;
}

.material-suggestions span,
.material-suggestion-empty {
  color: var(--muted);
  font-size: 12px;
}

.date-mode-field {
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  align-items: center;
  gap: 6px;
  background: #f8fbfc;
}

.date-mode-field legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 0 4px;
}

.choice-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.choice-pill input {
  width: 16px;
  min-width: 16px;
}

.chip-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
}

.chip-entry .secondary-button {
  padding: 0;
  min-width: 44px;
  font-size: 20px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 24px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #F4F6F8;
  color: var(--petroleum-dark);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}

.chip button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(47, 52, 59, 0.12);
  color: var(--petroleum-dark);
  line-height: 1;
  padding: 0;
}

.multi-material-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  max-height: 180px;
  overflow: auto;
}

.material-usage-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  max-height: 260px;
  overflow: auto;
}

.material-selector-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  max-height: 180px;
  overflow: auto;
}

.consumed-selector-block {
  display: grid;
  gap: 10px;
}

.consumed-selector-block h3 {
  margin: 4px 0 0;
  font-size: 15px;
}

.compact-heading {
  margin: 0;
}

.production-models-target {
  display: grid;
  gap: 12px;
}

.production-model-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.production-model-card-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.consumed-material-header,
.consumed-material-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px);
  gap: 12px;
  align-items: center;
}

.consumed-material-header {
  color: var(--petroleum-dark);
  font-size: 12px;
  text-transform: uppercase;
}

.consumed-material-row {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.muted-block {
  opacity: 0.55;
}

.material-usage-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px);
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.material-usage-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.material-option {
  color: var(--ink);
  font-weight: 600;
}

.empty-state.compact {
  padding: 8px;
  text-align: left;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.42);
}

body.analysis-fullscreen-open .modal-backdrop {
  z-index: 240;
}

.modal-backdrop:has(.operation-modal),
.modal-backdrop-floating {
  place-items: start;
  background: rgba(16, 24, 40, 0.16);
  pointer-events: none;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
  padding: 20px;
}

.modal-backdrop:has(.operation-modal) .modal,
.modal-backdrop-floating .modal {
  pointer-events: auto;
}

.wide-modal {
  width: min(1180px, 100%);
}

.user-management-modal {
  display: grid;
  gap: 18px;
}

.user-form {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.user-table-wrap table {
  min-width: 920px;
}

.user-table input,
.user-table select {
  min-width: 140px;
}

.user-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.operation-modal .modal-header {
  cursor: grab;
  user-select: none;
}

.operation-modal.is-floating,
.operation-modal.is-dragging {
  position: fixed;
  z-index: 31;
}

.operation-modal.is-dragging .modal-header {
  cursor: grabbing;
}

.modal-header h2 {
  margin: 0;
}

.grid-form,
.filters {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  align-items: end;
}

.filters {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  margin-bottom: 18px;
}

.tracking-filters {
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.tracking-page {
  gap: 26px;
}

.tracking-filter-panel {
  padding-bottom: 16px;
}

.tracking-table-card {
  display: grid;
  gap: 14px;
}

.tracking-table-card .table-wrap {
  max-height: 58vh;
}

.tracking-unplanned-card {
  min-height: 360px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.checkbox-line input {
  width: auto;
}

.form-actions {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.production-tree,
.production-tree ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.production-tree li {
  line-height: 1.45;
}

.production-tree span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.inventory-material {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfd;
  display: grid;
  gap: 10px;
}

.inventory-material h3,
.inventory-material p {
  margin: 0;
}

.inventory-material p,
.inventory-material span {
  color: var(--muted);
  font-size: 12px;
}

.launches-wide-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.launches-target {
  gap: 34px;
}

.inventory-history-panel {
  margin-top: 10px;
}

.launches-wide-panel .table-wrap {
  max-height: 66vh;
  width: 100%;
}

.production-launch-panel {
  max-width: 100%;
  margin: 0 auto;
}

.page:has(.production-page) {
  padding-left: 12px;
  padding-right: 12px;
}

.production-launch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.production-consult-card,
.production-table-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: center;
}

.production-table-card .section-heading {
  margin-bottom: 16px;
}

.production-launch-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0;
}

.production-launch-table-wrap table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.production-launch-table-wrap th,
.production-launch-table-wrap td {
  padding: 8px 7px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 12px;
}

.production-launch-table-wrap th {
  white-space: normal;
}

.production-launch-table-wrap .sortable-header {
  align-items: flex-start;
  gap: 5px;
  line-height: 1.2;
  white-space: normal;
}

.production-launch-table-wrap .sortable-header span:first-child {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.production-launch-table-wrap .sort-indicator {
  flex: 0 0 auto;
  margin-left: auto;
  padding-top: 1px;
}

.production-launch-table-wrap th:nth-child(1),
.production-launch-table-wrap td:nth-child(1) {
  width: 5.2%;
  white-space: nowrap;
}

.production-launch-table-wrap th:nth-child(2),
.production-launch-table-wrap td:nth-child(2) {
  width: 10.8%;
}

.production-launch-table-wrap th:nth-child(3),
.production-launch-table-wrap td:nth-child(3) {
  width: 8.8%;
  white-space: normal;
  overflow-wrap: normal;
}

.production-launch-table-wrap th:nth-child(4),
.production-launch-table-wrap td:nth-child(4) {
  width: 10.2%;
  white-space: normal;
  overflow-wrap: normal;
}

.production-launch-table-wrap th:nth-child(5),
.production-launch-table-wrap td:nth-child(5) {
  width: 6.5%;
}

.production-launch-table-wrap th:nth-child(6),
.production-launch-table-wrap td:nth-child(6) {
  width: 4.2%;
}

.production-launch-table-wrap th:nth-child(7),
.production-launch-table-wrap td:nth-child(7),
.production-launch-table-wrap th:nth-child(8),
.production-launch-table-wrap td:nth-child(8) {
  width: 6.5%;
}

.production-launch-table-wrap th:nth-child(9),
.production-launch-table-wrap td:nth-child(9) {
  width: 6.3%;
}

.production-launch-table-wrap th:nth-child(10),
.production-launch-table-wrap td:nth-child(10) {
  width: 6.8%;
  white-space: normal;
  overflow-wrap: normal;
}

.production-launch-table-wrap th:nth-child(11),
.production-launch-table-wrap td:nth-child(11) {
  width: 6.8%;
}

.production-launch-table-wrap th:nth-child(12),
.production-launch-table-wrap td:nth-child(12) {
  width: 5.7%;
  white-space: normal;
  overflow-wrap: normal;
}

.production-launch-table-wrap th:nth-child(13),
.production-launch-table-wrap td:nth-child(13) {
  width: 9.5%;
  padding-right: 12px;
  text-align: center;
}

.production-launch-table-wrap th:nth-child(14),
.production-launch-table-wrap td:nth-child(14) {
  width: 6.2%;
  padding-left: 12px;
  text-align: center;
}

.production-launch-table-wrap td:nth-child(14) .link-button {
  white-space: nowrap;
}

.production-lot-list {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.production-lot-list span {
  display: block;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}

.production-filters {
  grid-template-columns: minmax(320px, 1.45fr) minmax(180px, 0.9fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) auto auto;
  margin: 0;
}

.production-filters button {
  white-space: nowrap;
}

.production-material-filter {
  display: grid;
  gap: 6px;
  position: relative;
  align-self: end;
}

.production-material-filter-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.production-material-filter-search {
  width: 100%;
  min-height: 42px;
}

.production-material-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(520px, 92vw);
  max-height: 380px;
  overflow: auto;
  display: none;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  z-index: 15;
}

.production-material-filter.open .production-material-filter-menu {
  display: grid;
  gap: 12px;
}

.production-material-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.production-material-filter-actions span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.production-material-filter-actions .link-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 12px;
  color: var(--petroleum-dark);
  font-weight: 800;
}

.production-material-filter-actions .link-button:hover,
.production-material-filter-actions .link-button:focus {
  border-color: var(--petroleum);
  background: rgba(18, 93, 90, 0.08);
}

.production-material-filter-list {
  display: grid;
  gap: 4px;
}

.production-material-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.production-material-option:hover {
  background: #F4F6F8;
}

.production-material-option.is-filtered-out {
  display: none;
}

.production-material-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--petroleum);
}

.production-material-option span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.production-selected-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
  min-height: 4px;
}

.production-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(18, 93, 90, 0.12);
  color: var(--petroleum-dark);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.production-filter-pill button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.production-filter-pill button:hover,
.production-filter-pill button:focus {
  background: rgba(18, 93, 90, 0.16);
}

.production-summary-grid {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.inventory-modal,
.production-modal {
  width: min(1120px, 96vw);
}

.inventory-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 14px 0 8px;
}

.inventory-search-results {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  margin-bottom: 12px;
}

.inventory-search-results button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
  color: var(--petroleum-dark);
  text-align: left;
  cursor: pointer;
}

.inventory-search-results button.is-selected {
  border-color: var(--petroleum);
  background: rgba(217, 119, 6, 0.08);
}

.inventory-search-results span {
  color: var(--muted);
  font-size: 12px;
}

.inventory-card-list {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.inventory-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
  gap: 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px 14px 14px 50px;
}

.inventory-card > .remove-inventory-material {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 26px;
  padding: 4px 8px;
}

.inventory-card h3,
.inventory-card p {
  margin: 0;
}

.inventory-card p {
  color: var(--muted);
  font-size: 12px;
}

.inventory-location-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.inventory-location-list label {
  display: grid;
  gap: 5px;
}

.inventory-location-list small {
  color: var(--muted);
  font-weight: 700;
}

.inventory-total-field {
  align-self: stretch;
}

.inventory-edit-info {
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.manual-record-form {
  margin-bottom: 16px;
}

.manual-record-form .wide-field {
  min-width: min(320px, 100%);
}

.inventory-modal-actions {
  display: flex;
  justify-content: space-between;
}

.inventory-modal label.wide-field {
  margin: 18px 0 16px;
}

.modal-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.production-realization-form {
  display: grid;
  gap: 18px;
}

.production-lines-section,
.produced-lines-target {
  display: grid;
  gap: 12px;
}

.produced-line {
  display: grid;
  grid-template-columns: minmax(100px, 0.75fr) minmax(92px, 0.55fr) minmax(118px, 0.65fr) minmax(110px, 0.7fr) minmax(140px, 0.85fr) minmax(140px, 0.85fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.produced-line .readonly-field {
  min-height: 64px;
  align-content: center;
}

.produced-line .remove-produced-line {
  grid-column: -1;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
}

.compact-chip-list {
  min-height: 34px;
  padding: 5px 7px;
  gap: 5px;
}

.compact-chip-list .code-pill {
  padding: 2px 6px;
  font-size: 11px;
}

.consumed-inputs-section,
.consumed-inputs-target,
.inventory-view-list {
  display: grid;
  gap: 12px;
}

.consumed-input-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.75fr);
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.inventory-view-card {
  padding-left: 14px;
}

.inventory-view-modal .detail-summary-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.inventory-view-modal .inventory-view-list {
  gap: 14px;
}

.production-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.production-modal-actions .cancel-production {
  margin-right: auto;
}

.production-canceled-modal,
.production-cancel-requested-modal,
.production-needs-benefit-modal {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.production-canceled-modal > *,
.production-cancel-requested-modal > *,
.production-needs-benefit-modal > * {
  position: relative;
  z-index: 1;
}

.production-canceled-modal::after,
.production-cancel-requested-modal::after,
.production-needs-benefit-modal::after {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  color: rgba(220, 38, 38, 0.14);
  font-size: clamp(42px, 8vw, 92px);
  font-weight: 900;
  letter-spacing: 0;
  transform: translate(-50%, -50%) rotate(-17deg);
  pointer-events: none;
  white-space: nowrap;
}

.production-canceled-modal::after {
  content: "CANCELADO";
}

.production-cancel-requested-modal::after {
  content: "CANCELAMENTO SOLICITADO";
  color: rgba(217, 119, 6, 0.15);
  font-size: clamp(34px, 6vw, 74px);
}

.production-needs-benefit-modal::after {
  content: "NÃO BENEFICIADO";
  color: rgba(148, 96, 11, 0.15);
}

.production-cancellation-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 6px;
  background: #FFFBEB;
  padding: 12px;
}

.production-cancellation-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(170px, 1fr));
  gap: 10px;
}

.production-cancellation-grid article {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(217, 119, 6, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
}

.production-cancellation-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.production-cancellation-grid strong {
  color: var(--petroleum-dark);
  font-size: 13px;
  line-height: 1.35;
}

tr.production-canceled-row,
tr.production-needs-benefit-row {
  position: relative;
}

tr.production-canceled-row td {
  background: #fff3f2;
  color: var(--ink);
}

tr.production-needs-benefit-row td {
  background: #ffffff;
  color: var(--ink);
}

.production-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.production-status-pill.launched {
  color: #16A34A;
  background: rgba(22, 163, 74, 0.12);
}

.production-status-pill.canceled {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.13);
}

.production-status-pill.cancel-requested {
  color: #B45309;
  background: rgba(245, 158, 11, 0.18);
}

.production-cancel-request-backdrop {
  z-index: 40;
}

.production-cancel-request-modal {
  max-width: 560px;
}

.production-speech-message {
  min-height: 20px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.production-status-pill.needs-benefit {
  min-width: 106px;
  color: #8a5a0a;
  background: rgba(251, 188, 5, 0.24);
}

tr.planning-canceled-row td {
  background: #fff1f2;
  color: #7f1d1d;
}

.planning-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 9px;
  background: #F4F6F8;
  color: var(--petroleum-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.planning-status-pill.canceled {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.13);
}

.tracking-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.tracking-status-pill.pending,
.tracking-status-pill.scheduled {
  color: #1D4ED8;
  background: rgba(59, 130, 246, 0.16);
}

.tracking-status-pill.partial,
.tracking-status-pill.in-progress {
  color: #D97706;
  background: rgba(217, 119, 6, 0.16);
}

.tracking-status-pill.done {
  color: #16A34A;
  background: rgba(22, 163, 74, 0.14);
}

.tracking-status-pill.anticipated {
  color: #047857;
  background: rgba(20, 184, 166, 0.16);
}

.tracking-status-pill.exceeded {
  color: #C2410C;
  background: rgba(249, 115, 22, 0.18);
}

.tracking-status-pill.missed {
  color: #8f142b;
  border: 1px solid rgba(143, 20, 43, 0.28);
  background: rgba(143, 20, 43, 0.16);
}

.tracking-status-pill.canceled {
  color: #7F1D1D;
  border: 1px solid rgba(220, 38, 38, 0.22);
  background: #FEE2E2;
}

.tracking-status-pill.neutral {
  color: #475467;
  background: #F4F6F8;
}

tr.tracking-canceled-row td {
  background: #FEF2F2;
  color: #7F1D1D;
}

tr.tracking-canceled-row:hover td {
  background: #FEE2E2;
}

.inline-plan-link {
  border: 0;
  background: transparent;
  color: var(--petroleum);
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.inline-plan-link:hover,
.inline-plan-link:focus-visible {
  color: var(--petroleum-dark);
}

.code-separator {
  color: var(--muted);
}

.tracking-section-heading {
  margin: 26px 0 12px;
}

.tracking-plan-detail-row td {
  background: #F8FAFC;
}

.tracking-plan-detail-row .table-wrap {
  margin: 0;
}

.tracking-plan-detail-row .tracking-status-pill + .tracking-status-pill {
  margin-left: 6px;
}

.plan-json {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
  white-space: pre-wrap;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.compact-summary {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.tracking-summary {
  margin-bottom: 26px;
}

.metric-card {
  padding: 18px;
  display: grid;
  gap: 8px;
}

.metric-card.compact {
  min-height: 86px;
  padding: 12px;
  gap: 5px;
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

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

.metric-card.compact strong {
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.metric-card small {
  color: var(--muted);
  font-size: 12px;
}

.table-wrap {
  overflow: auto;
  max-height: 60vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.dashboard-page {
  width: 100%;
  gap: 18px;
}

.dashboard-filter-panel {
  padding-bottom: 16px;
}

.dashboard-filters {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  align-items: end;
}

.dashboard-summary {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.dashboard-summary .metric-card {
  min-height: 104px;
}

.dashboard-charts-grid,
.dashboard-tables-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-chart-wide,
.dashboard-table-wide {
  grid-column: 1 / -1;
}

.dashboard-material-feature {
  grid-column: span 7;
}

.dashboard-machine-feature,
.dashboard-critical-feature,
.dashboard-table-panel:not(.dashboard-table-wide) {
  grid-column: span 6;
}

.dashboard-status-feature {
  grid-column: span 5;
}

.dashboard-unplanned-feature {
  grid-column: 1 / -1;
}

.dashboard-chart-card {
  min-height: 260px;
  overflow: hidden;
}

.dashboard-chart-wide {
  min-height: 360px;
}

.dashboard-status-feature,
.dashboard-machine-feature,
.dashboard-critical-feature,
.dashboard-unplanned-feature {
  min-height: 0;
}

.dashboard-chart-card .section-heading,
.dashboard-table-panel .section-heading,
.reports-panel .section-heading {
  margin-bottom: 12px;
}

.dashboard-chart-card h2,
.dashboard-table-panel h2,
.reports-panel h2 {
  font-size: 18px;
}

.dashboard-svg-chart {
  width: 100%;
  min-width: 0;
  height: auto;
  display: block;
}

.planned-actual-chart {
  max-height: 360px;
}

.dashboard-svg-chart text {
  fill: var(--muted);
  font-size: 11px;
}

.chart-axis {
  stroke: #d8dee6;
  stroke-width: 1;
}

.chart-legend,
.reports-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.chart-legend {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chart-legend span,
.dashboard-status-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i,
.dashboard-status-list i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.horizontal-bars {
  display: grid;
  gap: 14px;
}

.horizontal-bar-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.15fr) minmax(150px, 2fr) 82px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}

.horizontal-bar-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.horizontal-bar-row span strong,
.horizontal-bar-row span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-bar-row span small {
  color: var(--muted);
  font-size: 11px;
}

.horizontal-bar-row em {
  color: var(--petroleum-dark);
  text-align: right;
  font-style: normal;
  font-weight: 800;
}

.horizontal-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.horizontal-bar-track i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, #2F80ED, #16A34A);
  transform-origin: left center;
  animation: barGrow 700ms ease both;
}

.chart-grow-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: svgBarGrow 720ms ease both;
}

.chart-actual-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawLine 900ms ease forwards;
}

.chart-line-point {
  opacity: 0;
  animation: pointFade 480ms ease forwards 420ms;
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes svgBarGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes pointFade {
  to { opacity: 1; }
}

.dashboard-donut-wrap {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(180px, 1fr);
  gap: 18px;
  align-items: center;
}

.dashboard-donut {
  width: clamp(180px, 15vw, 220px);
  height: clamp(180px, 15vw, 220px);
  transform: rotate(-90deg);
}

.dashboard-donut text {
  fill: var(--petroleum-dark);
  font-weight: 800;
  transform: rotate(90deg);
  transform-origin: 50px 50px;
}

.dashboard-donut text:last-child {
  fill: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-status-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-status-list strong {
  color: var(--text);
}

.critical-stock-list {
  display: grid;
  gap: 10px;
}

.critical-stock-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.critical-stock-list article:last-child {
  border-bottom: 0;
}

.critical-stock-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.critical-stock-list span:not(.pcp-status-pill) {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-empty-chart {
  min-height: 118px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfd;
  text-align: center;
  padding: 18px;
}

.dashboard-chart-wide .dashboard-empty-chart {
  min-height: 220px;
}

.dashboard-unplanned-feature .dashboard-empty-chart,
.dashboard-status-feature .dashboard-empty-chart,
.dashboard-machine-feature .dashboard-empty-chart {
  min-height: 96px;
}

.dashboard-table-panel .table-wrap {
  max-height: 420px;
}

.dashboard-table-panel table {
  min-width: 760px;
}

.reports-panel .muted-text {
  margin: 4px 0 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
  background: #ffffff;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  background: #F4F6F8;
  color: var(--petroleum-dark);
  z-index: 1;
}

.sortable-header {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.sortable-header.active {
  color: var(--petroleum);
}

.sort-indicator {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

thead tr:first-child th {
  top: 0;
  z-index: 3;
}

thead tr:nth-child(2) th {
  top: 39px;
  z-index: 2;
}

.stock-summary {
  grid-template-columns: repeat(3, minmax(220px, 380px));
  justify-content: start;
  align-items: stretch;
}

.stock-period-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.stock-period-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.stock-period-form input,
.stock-period-form button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

.stock-period-business-days,
.stock-period-form button {
  grid-column: 1 / -1;
}

.stock-period-business-days {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.stock-period-business-days strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.stock-minimum-card {
  align-self: start;
  height: auto;
  padding: 14px 16px;
  gap: 6px;
}

.stock-minimum-card label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.stock-minimum-card input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

.analysis-page {
  min-width: 0;
}

.analysis-panel {
  padding: 18px;
  overflow: hidden;
}

.analysis-calendar-toolbar,
.analysis-navigation,
.analysis-calendar-actions,
.calendar-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analysis-calendar-toolbar {
  justify-content: space-between;
  margin-bottom: 16px;
}

.analysis-calendar-title {
  margin-left: 8px;
  text-transform: capitalize;
}

.calendar-view-toggle .is-active {
  color: #ffffff;
  border-color: var(--petroleum);
  background: var(--petroleum);
}

.analysis-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  min-width: 910px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.analysis-calendar-target {
  overflow: auto;
  max-height: 72vh;
  border-radius: 8px;
}

.analysis-weekday,
.analysis-day-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.analysis-weekday {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 9px;
  color: var(--muted);
  background: #F4F6F8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.analysis-day-cell {
  min-height: 150px;
  padding: 7px;
  background: #ffffff;
}

.analysis-day-cell.weekend,
.analysis-time-day.weekend,
.analysis-all-day-row > .weekend,
.analysis-time-day-headers > .weekend,
.analysis-mini-days button.weekend {
  background-color: #f8fafb;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(71, 84, 103, 0.045) 8px,
    rgba(71, 84, 103, 0.045) 10px
  );
}

.analysis-day-cell.outside-month {
  background: #f8fafb;
  color: var(--muted);
}

.analysis-day-cell.holiday,
.analysis-agenda-day.holiday {
  background: #fff7ed;
}

.analysis-day-cell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
}

.analysis-day-cell > header > button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.analysis-day-cell > header > button:hover {
  background: #eaf4f6;
}

.analysis-holiday-label,
.analysis-time-day-headers header button {
  border: 0;
  background: transparent;
  color: #b54708;
  font-size: 9px;
  line-height: 1.15;
  text-align: right;
  padding: 0;
  cursor: help;
}

.analysis-day-cell > header .analysis-team-capacity-list {
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.analysis-day-events,
.analysis-agenda-day > div {
  display: grid;
  gap: 5px;
}

.analysis-event {
  display: grid;
  align-content: center;
  gap: 3px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-left: 5px solid var(--event-border, var(--petroleum));
  border-radius: 6px;
  color: var(--event-text, #163b34);
  background: var(--event-bg, #ecf8f3);
  text-align: left;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
  cursor: pointer;
}

.analysis-event strong,
.analysis-event span,
.analysis-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-event strong {
  color: var(--event-text, #263142);
  font-size: 12px;
  line-height: 1.2;
}

.analysis-event strong em {
  float: right;
  margin-left: 5px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.75;
}

.analysis-event span,
.analysis-event small {
  color: color-mix(in srgb, var(--event-text, #263142) 78%, transparent);
  font-size: 11px;
  line-height: 1.25;
}

.analysis-event:hover,
.analysis-event:focus {
  border-color: var(--event-border, var(--petroleum));
  filter: saturate(1.08) brightness(0.98);
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.13);
  transform: translateY(-1px);
}

.commercial-pin-list,
.commercial-day-pins {
  display: grid;
  gap: 5px;
}

.commercial-pin-list {
  margin: 5px 0;
}

.commercial-pin,
.commercial-pin-count {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--pin-color, #2F80ED) 34%, #ffffff);
  border-radius: 6px;
  color: #263142;
  background: color-mix(in srgb, var(--pin-color, #2F80ED) 10%, #ffffff);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.commercial-pin span,
.commercial-mini-pin {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pin-color, #2F80ED);
}

.commercial-pin strong,
.commercial-pin em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commercial-pin em {
  font-style: normal;
  color: var(--muted);
}

.commercial-pin.compact {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 10px;
}

.commercial-pin-count {
  display: inline-flex;
  width: auto;
  min-height: 20px;
  color: var(--petroleum-dark);
}

.commercial-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.commercial-request-modal .commercial-request-form {
  display: grid;
  gap: 18px;
}

.commercial-request-modal .grid-form {
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr);
  align-items: start;
}

.commercial-request-modal label.wide-field {
  grid-column: 1 / -1;
}

.commercial-request-modal textarea {
  min-height: 128px;
  resize: none;
}

.commercial-request-modal .modal-actions {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .commercial-request-modal .grid-form {
    grid-template-columns: 1fr;
  }
}

.commercial-timeline-pins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.commercial-timeline-pins > div {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.commercial-timeline-pins > div > button {
  border: 0;
  background: transparent;
  color: var(--petroleum-dark);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.commercial-calendar-page .calendar-gantt-commercial .gantt-zoom-controls {
  display: none;
}

.analysis-mini-days button.has-commercial-pins {
  position: relative;
}

.analysis-mini-days .commercial-mini-pin {
  position: absolute;
  right: 3px;
  bottom: 3px;
}

.analysis-time-calendar {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(var(--analysis-body-height), 1fr);
  min-width: var(--analysis-min-width);
  border: 1px solid var(--line);
  background: #ffffff;
}

.analysis-time-calendar.without-all-day {
  grid-template-rows: auto minmax(var(--analysis-body-height), 1fr);
}

.analysis-time-corner,
.analysis-all-day-label {
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--petroleum-dark);
  background: #F4F6F8;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.analysis-time-day-headers,
.analysis-all-day-row,
.analysis-time-days {
  display: grid;
  grid-template-columns: repeat(var(--analysis-days), minmax(var(--analysis-day-width, 170px), 1fr));
}

.analysis-time-day-headers > header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 92px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  background-color: #F4F6F8;
  cursor: pointer;
}

.analysis-time-day-headers > header strong {
  color: var(--petroleum-dark);
  font-size: 13px;
  text-transform: uppercase;
}

.analysis-time-day-headers > header span {
  color: var(--muted);
  font-size: 12px;
}

.analysis-time-day-headers > header small {
  overflow: hidden;
  color: #b54708;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-team-capacity-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.analysis-team-capacity {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--petroleum-dark);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.analysis-team-capacity.has-override {
  border-color: #4D86A6;
  background: #EEF6FA;
}

.analysis-team-capacity.exceeded {
  border-color: #e66f3f;
  color: #9f3a15;
  background: #fff1e8;
}

.analysis-team-capacity:hover,
.analysis-team-capacity:focus-visible {
  border-color: var(--petroleum);
  outline: none;
}

.analysis-stock-alert {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #ffffff;
  background: #c62828;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  box-shadow: 0 0 0 2px #ffffff;
}

.analysis-time-day-headers .analysis-stock-alert {
  justify-self: center;
  width: 20px;
  height: 20px;
  font-size: 13px;
}

.analysis-capacity-form .modal-actions {
  margin-top: 14px;
}

.analysis-day-modal-capacity {
  justify-content: flex-start;
}

.analysis-day-modal-capacity .analysis-team-capacity {
  min-height: 24px;
  padding: 4px 10px;
  font-size: 11px;
}

.analysis-all-day-row > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 72px;
  padding: 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.analysis-no-events {
  color: #98a2b3;
  text-align: center;
}

.analysis-hour-axis {
  position: relative;
  height: var(--analysis-body-height);
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.analysis-hour-axis span {
  position: absolute;
  top: calc(var(--analysis-top-pad, 0px) + var(--hour-index) * var(--analysis-hour-height));
  right: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  transform: translateY(-50%);
}

.analysis-time-days {
  min-height: var(--analysis-body-height);
}

.analysis-time-day {
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--analysis-hours), var(--analysis-hour-height));
  box-sizing: border-box;
  padding-top: var(--analysis-top-pad, 0px);
  border-right: 1px solid var(--line);
  background: #fbfcfd;
  cursor: pointer;
}

.analysis-hour-line {
  position: relative;
  border-bottom: 1px solid rgba(208, 213, 221, 0.88);
  background-image: linear-gradient(to bottom, transparent 49.5%, rgba(208, 213, 221, 0.42) 50%, transparent 50.5%);
  background-size: 100% calc(var(--analysis-hour-height) / 2);
  pointer-events: none;
}

.analysis-pause-band {
  position: absolute;
  top: var(--pause-top);
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  height: var(--pause-height);
  border-bottom: 1px solid rgba(102, 112, 133, 0.22);
  background: rgba(152, 162, 179, 0.26);
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.82), 0 3px 0 rgba(255, 255, 255, 0.82);
}

.analysis-event.timed-event {
  position: absolute;
  top: var(--event-top);
  left: var(--event-left);
  width: var(--event-width);
  z-index: 4;
  height: var(--event-height);
  min-height: 18px;
  max-height: none;
  overflow: hidden;
}

.analysis-event.all-day-event {
  min-height: 50px;
}

.analysis-agenda-grid {
  display: grid;
  gap: 12px;
}

.analysis-agenda-day {
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.analysis-agenda-day > header {
  display: grid;
  align-content: start;
  gap: 5px;
}

.analysis-agenda-day > header span {
  color: #b54708;
  font-size: 12px;
}

.analysis-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 16px;
}

.analysis-year-month {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.analysis-year-month > button {
  border: 0;
  color: var(--petroleum-dark);
  background: transparent;
  font-weight: 800;
  text-transform: capitalize;
}

.analysis-mini-weekdays,
.analysis-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 8px;
  text-align: center;
}

.analysis-mini-weekdays {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.analysis-mini-days button {
  min-height: 25px;
  padding: 5px 2px;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.analysis-mini-days button.has-events {
  position: relative;
  overflow: hidden;
  color: var(--year-day-text, var(--petroleum-dark));
  background: var(--year-day-bg, #dceef4);
  box-shadow: inset 0 0 0 1px var(--year-day-border, #8bb7c9);
  font-weight: 800;
}

.analysis-mini-days button.has-stock-alert {
  color: #9f1d1d;
  font-weight: 900;
}

.analysis-mini-days button.has-stock-alert .analysis-year-day-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #c62828;
}

.analysis-mini-days button.has-events.has-stock-alert {
  box-shadow:
    inset 0 0 0 1px var(--year-day-border, #8bb7c9),
    inset 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.analysis-mini-days button.has-events.weekend {
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.34) 5px,
      rgba(71, 84, 103, 0.08) 5px,
      rgba(71, 84, 103, 0.08) 7px
    ),
    var(--year-day-bg-image, linear-gradient(#dceef4, #dceef4));
}

.analysis-mini-days button.has-events.holiday {
  box-shadow:
    inset 0 0 0 1px var(--year-day-border, #8bb7c9),
    inset 0 -2px 0 #f79009;
}

.analysis-mini-days button.has-events.has-stock-alert.holiday {
  box-shadow:
    inset 0 0 0 1px var(--year-day-border, #8bb7c9),
    inset 0 0 0 3px rgba(255, 255, 255, 0.72),
    inset 0 -2px 0 #f79009;
}

.analysis-mini-days button.holiday:not(.has-events) {
  color: #b54708;
  background: #fff1df;
}

.analysis-mini-days button:hover,
.analysis-mini-days button:focus {
  outline: 2px solid rgba(11, 111, 94, 0.35);
  transform: translateY(-1px);
}

.analysis-event-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analysis-event-detail span {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
}

.analysis-event-detail strong {
  color: var(--ink);
  font-size: 14px;
}

.analysis-event-modal .modal-actions {
  margin-top: 18px;
}

.analysis-fullscreen-button {
  white-space: nowrap;
}

body.analysis-fullscreen-open {
  overflow: hidden;
}

.analysis-panel.is-analysis-fullscreen {
  position: fixed;
  inset: 10px;
  z-index: 120;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
  padding: 16px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.28);
}

.analysis-panel.is-analysis-fullscreen .analysis-calendar-target {
  max-height: none;
  min-height: 0;
}

.analysis-day-modal {
  width: min(1180px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  display: grid;
  gap: 18px;
  overflow: auto;
}

.analysis-day-holiday {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid #f3c58f;
  border-radius: 7px;
  color: #8a4b0f;
  background: #fff7ed;
}

.analysis-day-summary-section {
  display: grid;
  gap: 12px;
  min-height: 0;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.analysis-day-summary-section h3 {
  margin: 0;
  color: var(--petroleum-dark);
  font-size: 15px;
}

.analysis-summary-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.analysis-summary-events > button {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--event-border);
  border-left: 5px solid var(--event-border);
  border-radius: 7px;
  color: var(--event-text);
  background: var(--event-bg);
  text-align: left;
  cursor: pointer;
}

.analysis-summary-events > button span,
.analysis-summary-events > button small {
  font-size: 11px;
}

.analysis-stock-table-wrap {
  max-height: min(46vh, 430px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

.analysis-stock-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
}

.analysis-stock-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 10px;
  color: var(--petroleum-dark);
  background: #f4f6f8;
  text-align: right;
}

.analysis-stock-table th:first-child,
.analysis-stock-table td:first-child {
  text-align: left;
}

.analysis-stock-table th .sortable-header {
  justify-content: flex-end;
}

.analysis-stock-table th:first-child .sortable-header {
  justify-content: space-between;
}

.analysis-stock-table td {
  padding: 10px;
  border-top: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

.analysis-stock-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.analysis-alerts-layout {
  display: grid;
  gap: 18px;
}

.analysis-alert-table .stock-alert-critical td {
  color: #7f1d1d;
  background: #fef2f2;
}

.analysis-alert-table .stock-alert-critical td:first-child {
  border-left: 5px solid #dc2626;
}

.analysis-assistant-panel {
  padding: 18px;
}

.pcp-assistant {
  display: grid;
  gap: 16px;
}

.pcp-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.pcp-summary-card {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid #98a2b3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.07);
}

.pcp-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pcp-summary-card label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pcp-summary-card strong {
  color: var(--petroleum-dark);
  font-size: 24px;
  line-height: 1.1;
}

.pcp-ideal-days-input {
  width: 112px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--petroleum-dark);
  font-size: 22px;
  font-weight: 800;
}

.pcp-summary-card.critical {
  border-left-color: #dc2626;
  background: #fff7f7;
}

.pcp-summary-card.attention {
  border-left-color: #f59e0b;
  background: #fffbeb;
}

.pcp-summary-card.production-alert {
  border-left-color: #2e90fa;
  background: #eff8ff;
}

.pcp-summary-card.target {
  border-left-color: var(--petroleum);
  background: #f0f9f6;
}

.pcp-rules-strip,
.pcp-recommendation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pcp-rules-strip {
  flex-wrap: wrap;
}

.pcp-rules-strip span {
  color: var(--muted);
  font-size: 13px;
}

.pcp-rules-strip strong,
.pcp-recommendation h3 {
  color: var(--petroleum-dark);
}

.pcp-recommendation {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: stretch;
  background: #fbfcfd;
}

.pcp-recommendation h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.pcp-recommendation p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.pcp-recommendation-header {
  min-width: 0;
}

.pcp-recommendation-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(168px, 1fr));
  gap: 10px;
  min-width: 0;
}

.pcp-recommendation-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid #98a2b3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
  color: var(--ink);
}

.pcp-recommendation-card > strong {
  min-height: 38px;
  color: var(--petroleum-dark);
  font-size: 14px;
  line-height: 1.25;
}

.pcp-recommendation-card-top,
.pcp-recommendation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pcp-recommendation-card-top {
  justify-content: space-between;
}

.pcp-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--petroleum-dark);
  font-size: 13px;
  font-weight: 900;
}

.pcp-recommendation-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.pcp-recommendation-card dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.pcp-recommendation-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.pcp-recommendation-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.pcp-recommendation-actions {
  align-self: end;
  flex-direction: column;
  justify-content: flex-end;
}

.pcp-recommendation-actions button {
  width: 152px;
}

.pcp-table-wrap {
  max-height: min(62vh, 620px);
}

.pcp-priority-table {
  min-width: 1540px;
}

.pcp-priority-table th,
.pcp-priority-table td {
  text-align: left;
}

.pcp-date-cell {
  white-space: nowrap;
}

.pcp-priority-input {
  width: 72px;
  min-height: 34px;
}

.pcp-row-ideal-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pcp-row-ideal-input {
  width: 68px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--petroleum-dark);
  font-weight: 800;
}

.pcp-produce-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--petroleum);
}

.pcp-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pcp-status-pill.critical {
  color: #991b1b;
  background: #fee2e2;
}

.pcp-status-pill.attention {
  color: #92400e;
  background: #fef3c7;
}

.pcp-status-pill.production-alert {
  color: #175cd3;
  background: #dbeafe;
}

.pcp-status-pill.planned {
  color: #175cd3;
  background: #eff8ff;
}

.pcp-row-critical td:first-child {
  border-left: 5px solid #dc2626;
}

.pcp-row-attention td:first-child {
  border-left: 5px solid #f59e0b;
}

.pcp-row-production-alert td:first-child {
  border-left: 5px solid #2e90fa;
}

.pcp-row-planned td:first-child {
  border-left: 5px solid #84caff;
}

.stock-page,
.stock-page > *,
.stock-table-target {
  min-width: 0;
}

.stock-filters {
  grid-template-columns: minmax(260px, 420px) 112px;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.stock-filters input,
.stock-filters button {
  height: 40px;
}

.stock-panel {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 16px;
}

.stock-table-wrap {
  max-height: 68vh;
  overflow-x: hidden;
  overflow-y: auto;
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  width: 100%;
}

.stock-overview-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}

.stock-overview-table .col-codes {
  width: 10%;
}

.stock-overview-table .col-material {
  width: 18%;
}

.stock-overview-table .col-nasajon {
  width: 9%;
}

.stock-overview-table .col-adjustment {
  width: 9%;
}

.stock-overview-table .col-correction {
  width: 12%;
}

.stock-overview-table .col-inventory {
  width: 12%;
}

.stock-overview-table .col-total {
  width: 12%;
}

.stock-overview-table .col-total-estimated {
  width: 13%;
}

.stock-overview-table .col-empty {
  width: 150px;
}

.stock-overview-table th {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  height: auto;
  min-height: 48px;
  padding: 10px 8px;
  border-right: 1px solid rgba(47, 52, 59, 0.08);
  border-bottom-color: var(--line);
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0;
}

.stock-overview-table td {
  height: 56px;
  padding: 8px 10px;
  border-right: 1px solid rgba(47, 52, 59, 0.06);
  color: #243443;
  font-size: 13px;
  line-height: 1.2;
  vertical-align: middle;
}

.stock-overview-table .material-name {
  font-weight: 700;
  color: var(--ink);
}

.group-material {
  background: #f7f9fb;
}

.group-nasajon {
  background: #eef7f4;
}

.group-inventory {
  background: #f7f3e9;
}

.group-totals {
  background: #F4F6F8;
}

.numeric-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stock-inventory-cell {
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
}

.stock-inventory-cell strong {
  font-variant-numeric: tabular-nums;
}

.stock-inventory-cell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.total-estimated {
  font-weight: 800;
  color: var(--petroleum-dark);
}

.total-estimated.stock-duration-warning {
  color: #c62828;
}

.inline-number-input {
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  height: 34px;
  margin: 0 auto;
  padding: 0 8px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.code-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.stock-overview-table td.code-cell {
  display: table-cell;
  vertical-align: middle;
}

.stock-code-pill-stack {
  display: inline-grid;
  align-content: center;
  justify-items: start;
  vertical-align: middle;
}

.stock-code-pill-row {
  line-height: 1;
}

.stock-code-pill-row:not(:last-child) {
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(47, 52, 59, 0.14);
}

.stock-code-pill-row .code-pill {
  width: max-content;
}

.stock-code-stack {
  display: grid;
  gap: 6px;
  width: 100%;
}

.stock-code-stack span {
  min-height: 22px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(47, 52, 59, 0.08);
}

.stock-code-stack span:last-child {
  border-bottom: 0;
}

.numeric-stack span {
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.correction-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
}

.correction-input {
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.correction-input:disabled {
  background: #F4F6F8;
  color: var(--ink);
}

.icon-edit-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--petroleum-dark);
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.adjustment-cell,
.stock-overview-table .group-inventory {
  text-align: center;
}

.stock-overview-table thead tr:first-child th {
  min-height: 42px;
  font-size: 12.5px;
  font-weight: 800;
}

.stock-overview-table tbody tr:nth-child(even) td {
  filter: brightness(0.992);
}

.stock-overview-table tbody tr:hover td {
  background-image: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.34));
}

@media (max-width: 1200px) {
  .stock-panel {
    overflow: hidden;
  }

  .stock-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
  }

  .stock-overview-table {
    width: max-content;
    min-width: max(100%, 1280px);
  }

  .stock-overview-table .col-codes {
    width: 130px;
  }

  .stock-overview-table .col-material {
    width: 240px;
  }

  .stock-overview-table .col-nasajon,
  .stock-overview-table .col-adjustment {
    width: 118px;
  }

  .stock-overview-table .col-correction {
    width: 170px;
  }

  .stock-overview-table .col-inventory {
    width: 160px;
  }

  .stock-overview-table .col-total {
    width: 150px;
  }

  .stock-overview-table .col-total-estimated {
    width: 170px;
  }

  .stock-overview-table th,
  .stock-overview-table .material-name,
  .stock-overview-table td {
    overflow-wrap: normal;
    word-break: normal;
  }
}

.code-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--petroleum-dark);
}

.muted-text {
  color: var(--muted);
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--petroleum);
  font-weight: 700;
  padding: 0;
}

.link-button.danger {
  color: var(--danger);
}

.small-action-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--petroleum);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.small-action-button.danger {
  color: var(--danger);
}

.danger-button {
  min-height: 40px;
  border: 1px solid #e5a3a3;
  border-radius: 8px;
  background: #fff1f1;
  color: #DC2626;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}

.history-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.empty-state {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.planning-results {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

.planning-results[hidden] {
  display: none;
}

.planning-builder-panel .planning-form {
  display: grid;
  gap: 18px;
}

.planning-section-heading {
  margin-top: 6px;
}

.planning-inner-grid {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.shifts-target,
.productions-target {
  display: grid;
  gap: 12px;
}

.planning-subcard {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}

.planning-subcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}

.planning-subcard-header h3 {
  margin: 0;
  font-size: 16px;
}

.production-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--production-text, var(--petroleum-dark));
}

.production-gradient-key {
  width: 34px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--production-border, var(--accent));
  background: var(--production-start, var(--production-border, var(--accent)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  flex: 0 0 auto;
}

.production-color-trigger {
  cursor: pointer;
  padding: 0;
}

.production-color-trigger:hover,
.production-color-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--production-border, var(--accent)) 55%, #ffffff);
  outline-offset: 3px;
}

.production-color-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(352px, calc(100vw - 48px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 18px 36px rgba(16, 24, 40, 0.18);
}

.production-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.production-color-option {
  width: 100%;
  aspect-ratio: 1;
  min-height: 38px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--swatch-color);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 8px rgba(16, 24, 40, 0.14);
}

.production-color-option:hover,
.production-color-option:focus-visible {
  border-color: #ffffff;
  outline: 2px solid var(--swatch-color);
  outline-offset: 2px;
}

.production-color-option.is-selected {
  border-color: #ffffff;
  outline: 3px solid var(--petroleum-dark);
  outline-offset: 2px;
}

.production-block {
  border-color: color-mix(in srgb, var(--production-border, var(--line)) 54%, var(--line));
  background: #ffffff;
}

.production-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.production-source-badge,
.production-source-warning {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

.production-source-badge {
  color: #175cd3;
  background: #dbeafe;
}

.production-source-warning {
  color: #92400e;
  background: #fef3c7;
}

.planning-subcard-header h3 span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.production-flows-target {
  display: grid;
  gap: 12px;
}

.production-flow-card {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--production-border, var(--line)) 55%, var(--line));
  border-left: 5px solid var(--production-border, var(--accent));
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  overflow-x: auto;
}

.planning-summary-modal .modal-actions {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.modal-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.planning-detail-dialog {
  position: relative;
  display: grid;
  width: min(1480px, calc(100vw - 48px));
  max-height: calc(100vh - 32px);
  gap: 14px;
}

.planning-canceled-watermark {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(220, 38, 38, 0.16);
  font-size: clamp(64px, 12vw, 170px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  transform: rotate(-28deg);
}

.planning-detail-dialog > :not(.planning-canceled-watermark) {
  position: relative;
  z-index: 1;
}

.planning-detail-section {
  display: grid;
  gap: 10px;
}

.planning-detail-section h3 {
  margin: 0;
  color: var(--petroleum-dark);
  font-size: 15px;
}

.detail-summary-strip {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.detail-summary-strip article {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.detail-summary-strip span,
.detail-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.detail-summary-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.planning-detail-two-cols {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.planning-detail-shifts {
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  align-items: center;
}

.planning-detail-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.planning-detail-inline p {
  margin: 0;
}

.detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1040px;
  background: #ffffff;
}

.detail-table th,
.detail-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.detail-table td {
  font-size: 12px;
  color: var(--ink);
}

.flow-tree-list {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  overflow-x: auto;
}

.flow-tree-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-tree-list li ul {
  margin-top: 8px;
}

.flow-tree-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(110px, auto));
  gap: 10px;
  align-items: center;
  margin-left: calc(var(--flow-level, 0) * 20px);
  border-left: 3px solid var(--line);
  background: #fbfcfd;
  padding: 9px 10px;
}

.flow-tree-row em {
  color: var(--petroleum);
  font-style: normal;
  font-weight: 800;
}

.planning-alert-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.production-flow-graph {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  align-items: center;
  gap: 52px;
  min-width: max-content;
  padding: 6px 8px 10px;
}

.production-flow-column {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 18px;
}

.production-flow-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.production-flow-connector {
  fill: none;
  stroke: color-mix(in srgb, var(--production-border, #D1D5DB) 66%, #D1D5DB);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.production-flow-arrow {
  fill: color-mix(in srgb, var(--production-border, #D1D5DB) 66%, #D1D5DB);
}

.production-flow-node {
  position: relative;
  width: 260px;
  min-width: 260px;
  display: grid;
  gap: 10px;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--production-border, #D1D5DB) 54%, #D1D5DB);
  border-left: 5px solid var(--production-border, var(--accent));
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 12px 12px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.07);
}

.production-flow-node-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.production-flow-production-markers {
  height: 7px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}

.production-flow-node.stock-covered {
  border-color: color-mix(in srgb, #5fb58d 45%, var(--production-border, #b9ddcc));
  border-left-color: var(--production-border, var(--accent));
  background: #ffffff;
}

.production-flow-node.needs-production {
  border-color: color-mix(in srgb, var(--production-border, #edd0a3) 76%, #edd0a3);
  border-left-color: var(--production-border, var(--accent));
  background: #ffffff;
}

.production-flow-node.raw-material-warning {
  border-color: #e66f3f;
  border-left-color: #e66f3f;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.11);
}

.production-flow-node strong,
.production-flow-node span {
  overflow-wrap: anywhere;
}

.production-flow-node-header span:not(.production-flow-status) {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.production-flow-status {
  justify-self: start;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--production-border, #D1D5DB) 45%, #D1D5DB);
  border-radius: 999px;
  background: var(--production-card, var(--production-soft, #F4F6F8));
  color: var(--production-text, var(--ink));
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
}

.production-flow-status.stock-ok {
  background: #eef9f3;
  color: #245d3e;
  border-color: #b9ddcc;
}

.production-flow-status.using-stock {
  background: #fff7e8;
  color: #6a4315;
  border-color: #edd0a3;
}

.production-flow-status.raw-warning {
  background: #fff0e8;
  color: #9f3a15;
  border-color: #f0b197;
}

.production-flow-status.needs-production,
.production-flow-status.full-production {
  background: var(--production-card, var(--production-soft, #F4F6F8));
  color: var(--production-text, var(--ink));
}

.production-flow-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.production-flow-metrics strong {
  color: var(--ink);
}

.stock-only-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.stock-only-toggle input {
  width: 16px;
  height: 16px;
}

.stock-only-info {
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}

.unsimulated-notice {
  margin: -4px 0 12px;
  border: 1px solid #edd0a3;
  border-radius: 6px;
  background: #fffaf0;
  color: #7a4b12;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
}

.unsimulated-notice[hidden] {
  display: none;
}

.transport-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.transport-list {
  display: grid;
  gap: 10px;
}

.transport-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.transport-row .remove-transport {
  min-height: 38px;
  padding-bottom: 8px;
}

.empty-state.compact {
  padding: 14px;
  text-align: left;
}

.operation-config-target {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.operation-config-card,
.engineering-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.operation-config-card {
  display: grid;
  gap: 10px;
}

.operation-config-card strong,
.engineering-node strong {
  display: block;
  margin-bottom: 4px;
}

.operation-config-card span,
.operation-meta,
.engineering-node span {
  color: var(--muted);
  font-size: 12px;
}

.operation-meta {
  display: grid;
  gap: 4px;
}

.engineering-tree {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.engineering-level {
  min-width: 230px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.engineering-level:not(:last-child)::after {
  content: ">";
  color: var(--petroleum);
  font-weight: 900;
  text-align: center;
}

.engineering-level-label {
  color: var(--petroleum-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.engineering-level-items {
  display: grid;
  gap: 8px;
}

.calendar-gantt {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  margin-top: 4px;
}

.calendar-panel,
.calendar-panel .timeline-target {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.calendar-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.calendar-grid {
  min-width: max(100%, calc(var(--calendar-days) * 210px));
  display: grid;
  grid-template-columns: repeat(var(--calendar-days), minmax(190px, 1fr));
}

.calendar-column {
  min-height: 300px;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.calendar-column:last-child {
  border-right: 0;
}

.calendar-date {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 58px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: #F4F6F8;
  color: var(--petroleum-dark);
}

.calendar-date span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.calendar-events {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.calendar-empty-day {
  min-height: 54px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
}

.production-card {
  display: grid;
  gap: 5px;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

.production-card span {
  color: var(--muted);
  font-size: 12px;
}

.production-card small {
  color: var(--muted);
  font-size: 11px;
}

.gantt-board {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(78vh, 820px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  position: relative;
}

.gantt-board-full {
  min-width: 0;
}

.gantt-zoom-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.calendar-view-toggle {
  display: inline-flex;
  gap: 4px;
  margin-right: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
  padding: 3px;
}

.gantt-zoom-controls .secondary-button {
  width: 38px;
  min-height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.gantt-zoom-controls .calendar-view-toggle .secondary-button {
  width: auto;
  min-width: 92px;
  min-height: 30px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.gantt-zoom-controls .calendar-view-toggle .secondary-button.is-active {
  border-color: var(--petroleum);
  background: #ffffff;
  color: var(--petroleum-dark);
  box-shadow: 0 4px 10px rgba(47, 52, 59, 0.12);
}

.gantt-zoom-controls .fullscreen-button {
  width: auto;
  min-width: 96px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.fullscreen-close {
  display: none;
}

.calendar-range-alert {
  margin: 0 0 10px;
  border: 1px solid #f0b07c;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a4a12;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

body.calendar-fullscreen-open {
  overflow: hidden;
}

.calendar-gantt.is-calendar-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 10px;
  background: #ffffff;
  width: 100vw;
  height: 100vh;
  max-width: none;
  overflow: hidden;
}

.calendar-gantt.is-calendar-fullscreen .gantt-zoom-controls {
  margin-bottom: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.calendar-gantt.is-calendar-fullscreen .gantt-board {
  max-height: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.calendar-gantt.is-calendar-fullscreen .fullscreen-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  border-color: var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--petroleum-dark);
  font-size: 16px;
  font-weight: 900;
}

.calendar-gantt.is-calendar-fullscreen .fullscreen-button {
  display: none;
}

.calendar-gantt.is-calendar-fullscreen .calendar-range-alert {
  margin: 0;
}

.agenda-grid {
  --agenda-time-width: 86px;
  display: grid;
  grid-template-columns: var(--agenda-time-width) max(100%, calc(var(--calendar-days) * var(--calendar-day-width, 260px)));
  grid-template-rows: 92px var(--calendar-body-height, 880px);
  width: max(100%, calc(var(--agenda-time-width) + (var(--calendar-days) * var(--calendar-day-width, 260px))));
  min-width: max(100%, calc(var(--agenda-time-width) + (var(--calendar-days) * var(--calendar-day-width, 260px))));
}

.gantt-dates {
  display: grid;
  grid-template-columns: repeat(var(--calendar-days), minmax(var(--calendar-day-width, 260px), 1fr));
  position: sticky;
  top: 0;
  z-index: 8;
  background: #F4F6F8;
  border-bottom: 1px solid var(--line);
}

.gantt-date {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 92px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
}

.gantt-date span {
  color: var(--muted);
  font-size: 11px;
}

.gantt-date.team-exceeded {
  background: #fff3ea;
  box-shadow: inset 0 -3px 0 #e66f3f;
}

.gantt-date.has-team-override {
  box-shadow: inset 0 -3px 0 #4D86A6;
}

.gantt-date.team-exceeded.has-team-override {
  box-shadow: inset 0 -3px 0 #e66f3f, inset 0 3px 0 #4D86A6;
}

.gantt-date.non-working-day,
.agenda-day-column.non-working-day,
.machine-day-cell.non-working-day {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(47, 52, 59, 0.08) 0,
      rgba(47, 52, 59, 0.08) 7px,
      transparent 7px,
      transparent 15px
    );
}

.gantt-date.non-working-day {
  background-color: #F4F6F8;
}

.team-capacity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.team-capacity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--petroleum-dark);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.team-capacity:hover,
.team-capacity:focus {
  border-color: var(--petroleum);
  color: var(--petroleum-dark);
}

.team-capacity.exceeded {
  border-color: #e66f3f;
  background: #fff0e8;
  color: #9f3a15;
}

.capacity-modal {
  max-width: 420px;
}

.agenda-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 92px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #F4F6F8;
  color: var(--petroleum-dark);
}

.agenda-corner span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.agenda-time-axis {
  position: sticky;
  left: 0;
  z-index: 7;
  height: var(--calendar-body-height, 880px);
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.agenda-time-axis span {
  position: absolute;
  top: var(--time-top);
  right: 10px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agenda-days {
  display: grid;
  grid-template-columns: repeat(var(--calendar-days), minmax(var(--calendar-day-width, 260px), 1fr));
  height: var(--calendar-body-height, 880px);
  background: #ffffff;
}

.agenda-day-column {
  position: relative;
  min-width: var(--calendar-day-width, 260px);
  height: var(--calendar-body-height, 880px);
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.agenda-day-column.non-working-day {
  background-color: #f7fafb;
}

.machine-day-cell.non-working-day {
  background-color: #f7fafb;
}

.agenda-day-column:last-child {
  border-right: 0;
}

.agenda-hour-line {
  position: absolute;
  top: var(--time-top);
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(47, 52, 59, 0.1);
  pointer-events: none;
}

.gantt-bar {
  position: absolute;
  box-sizing: border-box;
  left: var(--event-left, 8px);
  width: var(--event-width, calc(100% - 16px));
  top: var(--event-top);
  height: var(--event-height);
  min-height: 18px;
  margin: 0;
  display: grid;
  gap: 3px;
  align-content: center;
  border: 0;
  border-left: 5px solid var(--event-border, var(--accent));
  border-radius: 6px;
  background: var(--event-bg, #2F343B);
  color: var(--event-text, #ffffff);
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
  z-index: 4;
  overflow: hidden;
}

.gantt-bar-compact {
  padding: 0 6px;
  place-items: center;
}

.gantt-compact-label {
  color: var(--event-text, #263142);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.gantt-bar-transport {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.38) 0,
      rgba(255, 255, 255, 0.38) 6px,
      rgba(198, 206, 214, 0.18) 6px,
      rgba(198, 206, 214, 0.18) 12px
    ),
    var(--event-bg, #f3f5f7);
  box-shadow: 0 6px 14px rgba(61, 71, 82, 0.1);
}

.gantt-bar-existing {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.42) 0,
      rgba(255, 255, 255, 0.42) 4px,
      rgba(38, 49, 66, 0.14) 4px,
      rgba(38, 49, 66, 0.14) 8px
    ),
    var(--event-bg, #eef3f6);
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(38, 49, 66, 0.12), 0 6px 14px rgba(61, 71, 82, 0.08);
}

.gantt-status-pill {
  justify-self: start;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--event-border, #667085) 36%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--event-text, #263142);
  padding: 1px 6px;
  overflow: hidden;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.gantt-bar-historical,
.calendar-gantt.is-read-only .gantt-bar {
  filter: grayscale(0.55);
  opacity: 0.68;
  cursor: not-allowed;
}

.calendar-gantt-commercial.is-read-only .gantt-bar {
  filter: none;
  opacity: 1;
  cursor: pointer;
}

.gantt-lunch-band {
  position: absolute;
  top: var(--lunch-top);
  left: 0;
  right: 0;
  height: var(--lunch-height);
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(102, 112, 133, 0.22);
  background: rgba(152, 162, 179, 0.26);
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.86), 0 3px 0 rgba(255, 255, 255, 0.86);
}

.calendar-tooltip {
  position: fixed;
  z-index: 9999;
  width: max-content;
  max-width: min(320px, 80vw);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #101828;
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.26);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
}

.calendar-tooltip[hidden] {
  display: none;
}

.gantt-bar span,
.gantt-bar small {
  overflow: hidden;
  color: color-mix(in srgb, var(--event-text, #263142) 78%, transparent);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-bar strong {
  overflow: hidden;
  color: var(--event-text, #263142);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-grid {
  --machine-axis-width: 118px;
  display: grid;
  grid-template-columns: var(--machine-axis-width) max(100%, calc(var(--calendar-days) * var(--calendar-day-width, 260px)));
  grid-template-rows: 92px var(--calendar-body-height, 832px);
  width: max(100%, calc(var(--machine-axis-width) + (var(--calendar-days) * var(--calendar-day-width, 260px))));
  min-width: max(100%, calc(var(--machine-axis-width) + (var(--calendar-days) * var(--calendar-day-width, 260px))));
}

.machine-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 92px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #F4F6F8;
  color: var(--petroleum-dark);
}

.machine-corner span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.machine-dates {
  display: grid;
  grid-template-columns: repeat(var(--calendar-days), minmax(var(--calendar-day-width, 260px), 1fr));
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 92px;
  background: #F4F6F8;
  border-bottom: 1px solid var(--line);
}

.machine-dates .gantt-date {
  min-height: 92px;
}

.machine-axis {
  position: sticky;
  left: 0;
  z-index: 7;
  height: var(--calendar-body-height, 832px);
  border-right: 1px solid var(--line);
  background: #ffffff;
}

.machine-axis-row {
  display: grid;
  align-items: center;
  height: var(--machine-row-height, 104px);
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--petroleum-dark);
  font-size: 13px;
  font-weight: 900;
}

.machine-days {
  display: grid;
  grid-template-rows: repeat(8, var(--machine-row-height, 104px));
  height: var(--calendar-body-height, 832px);
  background: #ffffff;
}

.machine-row {
  display: grid;
  grid-template-columns: repeat(var(--calendar-days), minmax(var(--calendar-day-width, 260px), 1fr));
  height: var(--machine-row-height, 104px);
  border-bottom: 1px solid var(--line);
}

.machine-day-cell {
  position: relative;
  min-width: var(--calendar-day-width, 260px);
  height: var(--machine-row-height, 104px);
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.machine-row:last-child,
.machine-axis-row:last-child {
  border-bottom: 0;
}

.machine-day-cell:last-child {
  border-right: 0;
}

.machine-lunch-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lunch-left);
  width: var(--lunch-width);
  display: grid;
  place-items: center;
  background: rgba(152, 162, 179, 0.26);
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  pointer-events: none;
  z-index: 3;
}

.machine-day-cell .gantt-bar {
  min-height: 24px;
  min-width: 0;
  z-index: 5;
}

.operation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.operation-detail-grid article,
.operation-detail-grid label {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.operation-detail-grid .wide {
  grid-column: 1 / -1;
}

.operation-breakdown {
  align-content: start;
}

.operation-breakdown strong {
  color: var(--petroleum-dark);
  font-size: 13px;
}

.operation-productions-section {
  display: grid;
  gap: 12px;
}

.operation-productions-list {
  display: grid;
  gap: 10px;
}

.operation-production-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.operation-production-split {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  justify-items: start;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.operation-production-heading {
  display: grid;
  gap: 4px;
  align-self: center;
}

.operation-production-heading strong {
  color: var(--petroleum-dark);
  font-size: 14px;
}

.operation-production-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

.operation-detail-grid span,
.operation-detail-grid label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.operation-detail-grid label select {
  margin-top: 4px;
  text-transform: none;
}

.operation-modal {
  width: min(860px, 100%);
}

.operation-modal-form {
  display: grid;
  gap: 16px;
}

.operation-split-section {
  display: grid;
  gap: 12px;
}

.split-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operation-splits-target {
  display: grid;
  gap: 10px;
}

.operation-split-row {
  display: grid;
  grid-template-columns: 90px repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.operation-modal.is-split-mode .split-hide-when-active {
  display: none;
}

.operation-split-row strong {
  align-self: center;
  color: var(--petroleum-dark);
}

.operation-split-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.modal-actions {
  justify-content: flex-end;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--petroleum-dark);
  color: #ffffff;
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(16, 24, 40, 0.22);
  z-index: 20;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-weight: 700;
  text-align: center;
}

.form-success {
  margin: 0;
  color: #2f7d57;
  font-weight: 700;
  text-align: center;
}

.login-reset-link {
  justify-self: center;
}

@media (max-width: 1040px) {
  .page,
  .page:has(.stock-page),
  .page:has(.planning-page),
  .page:has(.registrations-page),
  .page:has(.launches-page),
  .page:has(.tracking-page),
  .page:has(.dashboard-page),
  .page:has(.analysis-page),
  .page:has(.productivity-matrix-page) {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid-form,
  .filters,
  .summary-grid,
  .dashboard-filters,
  .dashboard-charts-grid,
  .dashboard-tables-grid,
  .compact-summary,
  .production-cancellation-grid,
  .planning-inner-grid,
  .transport-row,
  .operation-production-row,
  .operation-split-row,
  .inventory-card,
  .consumed-input-row,
  .produced-line,
  .detail-summary-strip,
  .planning-detail-two-cols,
  .planning-detail-shifts,
  .user-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-flow-node {
    grid-template-columns: 1fr;
  }

  .table-wrap,
  .detail-table-wrap,
  .production-launch-table-wrap,
  .user-table-wrap,
  .calendar-scroll,
  .gantt-board,
  .production-flow-card,
  .flow-tree-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table-wrap,
  .production-launch-table-wrap,
  .stock-table-wrap,
  .detail-table-wrap,
  .user-table-wrap {
    max-width: 100%;
  }

  .table-wrap table {
    width: 100%;
    min-width: max(100%, 1120px);
  }

  .stock-panel {
    overflow: hidden;
  }

  .stock-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
  }

  .stock-overview-table {
    width: max-content;
    min-width: max(100%, 1280px);
  }

  .stock-overview-table .col-codes {
    width: 130px;
  }

  .stock-overview-table .col-material {
    width: 240px;
  }

  .stock-overview-table .col-nasajon,
  .stock-overview-table .col-adjustment {
    width: 118px;
  }

  .stock-overview-table .col-correction {
    width: 170px;
  }

  .stock-overview-table .col-total {
    width: 150px;
  }

  .stock-overview-table .col-total-estimated {
    width: 170px;
  }

  .stock-summary,
  .analysis-year-grid,
  .pcp-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcp-recommendation {
    grid-template-columns: 1fr;
  }

  .pcp-recommendation-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcp-recommendation-actions {
    align-items: stretch;
    flex-direction: row;
  }

  .pcp-recommendation-actions button {
    width: auto;
  }

  .stock-overview-table th {
    overflow-wrap: normal;
    word-break: normal;
  }

  .stock-overview-table .material-name,
  .stock-overview-table td {
    overflow-wrap: normal;
    word-break: normal;
  }

  .modal-backdrop {
    align-items: start;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal,
  .wide-modal,
  .inventory-modal,
  .production-modal,
  .planning-detail-dialog,
  .user-management-modal {
    width: min(100%, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
  }

  .operation-modal {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
  }

  .operation-modal.is-floating,
  .operation-modal.is-dragging {
    max-width: calc(100vw - 32px);
  }

  .modal-header {
    align-items: flex-start;
  }

  .calendar-gantt {
    overflow: visible;
  }

  .gantt-zoom-controls {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .calendar-view-toggle {
    margin-right: 0;
  }

  .dashboard-chart-card,
  .dashboard-chart-card:not(.dashboard-chart-wide):not(.dashboard-status-feature):not(.dashboard-unplanned-feature),
  .dashboard-status-feature,
  .dashboard-unplanned-feature,
  .dashboard-table-panel,
  .dashboard-table-panel:not(.dashboard-table-wide) {
    grid-column: 1 / -1;
  }

  .dashboard-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .gantt-board {
    max-height: min(72dvh, 760px);
    touch-action: pan-x pan-y;
  }

  .calendar-gantt.is-calendar-fullscreen {
    height: 100dvh;
  }
}

@media (max-width: 720px) {
  .topbar {
    height: auto;
    padding: 16px;
    flex-wrap: wrap;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .tabs,
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tabs {
    scrollbar-width: thin;
  }

  .tab {
    padding: 14px 12px;
  }

  .grid-form,
  .filters,
  .summary-grid,
  .dashboard-filters,
  .dashboard-charts-grid,
  .dashboard-tables-grid,
  .compact-summary,
  .production-cancellation-grid,
  .planning-inner-grid,
  .multi-material-selector,
  .material-selector-list,
  .material-usage-row,
  .consumed-material-header,
  .consumed-material-row,
  .transport-row,
  .operation-production-row,
  .operation-split-row,
  .inventory-picker,
  .inventory-card,
  .consumed-input-row,
  .produced-line,
  .detail-summary-strip,
  .planning-detail-two-cols,
  .planning-detail-shifts,
  .user-form,
  .inventory-grid {
    grid-template-columns: 1fr;
  }

  .production-flow-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-chart-wide,
  .dashboard-table-wide {
    grid-column: auto;
  }

  .dashboard-donut-wrap,
  .horizontal-bar-row {
    grid-template-columns: 1fr;
  }

  .horizontal-bar-row em {
    text-align: left;
  }

  .list-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .list-actions .search,
  .list-actions .primary-button {
    width: 100%;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .stock-panel {
    padding: 16px;
  }

  .modal-backdrop {
    padding: 10px;
  }

  .modal,
  .wide-modal,
  .inventory-modal,
  .production-modal,
  .planning-detail-dialog,
  .user-management-modal,
  .operation-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  .modal-header {
    gap: 10px;
  }

  .modal-header h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .modal-header-actions,
  .production-modal-actions,
  .inventory-modal-actions,
  .modal-actions,
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .production-modal-actions .cancel-production {
    margin-right: 0;
  }

  .modal-header-actions button,
  .production-modal-actions button,
  .inventory-modal-actions button,
  .modal-actions button,
  .form-actions button {
    width: 100%;
  }

  .inventory-card {
    padding-left: 14px;
  }

  .inventory-card > .remove-inventory-material {
    position: static;
    justify-self: start;
  }

  .inventory-search-results button {
    display: grid;
  }

  .stock-table-wrap {
    max-height: 64dvh;
  }

  .stock-summary,
  .stock-period-form,
  .analysis-year-grid,
  .analysis-event-detail,
  .analysis-agenda-day,
  .pcp-summary-grid {
    grid-template-columns: 1fr;
  }

  .pcp-recommendation {
    display: grid;
  }

  .pcp-recommendation-cards,
  .pcp-recommendation-actions {
    grid-template-columns: 1fr;
  }

  .pcp-recommendation-actions {
    flex-direction: column;
  }

  .pcp-recommendation-actions button {
    width: 100%;
  }

  .stock-period-form strong {
    grid-column: auto;
  }

  .analysis-calendar-toolbar,
  .analysis-navigation,
  .analysis-calendar-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .analysis-calendar-toolbar {
    display: grid;
  }

  .analysis-calendar-actions {
    display: grid;
  }

  .analysis-calendar-title {
    width: 100%;
    margin-left: 0;
  }

  .analysis-fullscreen-button {
    width: 100%;
  }

  .gantt-zoom-controls {
    gap: 6px;
  }

  .calendar-view-toggle {
    width: 100%;
    overflow-x: auto;
  }

  .gantt-zoom-controls .calendar-view-toggle .secondary-button {
    flex: 1 0 112px;
  }

  .gantt-board {
    max-height: 68dvh;
  }

  .agenda-grid {
    --agenda-time-width: 72px;
  }

  .machine-grid {
    --machine-axis-width: 96px;
  }

  .calendar-tooltip {
    max-width: calc(100vw - 24px);
  }
}