/* SCM for Manufacturers page — on top of scm-page.css + pp-page.css + frame + light. */

/* ---- Hero network art */
.mf-net { display: block; width: 100%; height: auto; font-family: "Source Sans 3", sans-serif; }
.mf-arc { fill: none; stroke: rgba(49, 221, 255, 0.35); stroke-width: 1.4; }
.mf-sec { stroke: rgba(122, 233, 255, 0.14); stroke-width: 1; }
.mf-dot { fill: #34d399; }
.mf-dot--late { fill: #fb7185; }
.mf-plant { fill: rgba(9, 187, 223, 0.2); stroke: #09bbdf; }
.mf-l { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle; }
.mf-rdc { fill: #fff; stroke: #0b8fa8; stroke-width: 2; }
.mf-rdc--warn { fill: #fbbf24; }
.mf-rdc--crit { fill: #fb7185; animation: mf-blink 1.6s ease-in-out infinite; }
@keyframes mf-blink { 50% { opacity: 0.45; } }
.mf-ds { fill: rgba(224, 245, 250, 0.55); }
.mf-col { fill: rgba(224, 245, 250, 0.5); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; text-anchor: middle; }
.mfg-warn { color: #d97706 !important; }

/* ---- Cold chain */
.mfg-band { fill: rgba(16, 185, 129, 0.08); stroke: rgba(16, 185, 129, 0.35); stroke-dasharray: 4 3; }
.mfg-band-l { font: 600 10.5px "IBM Plex Mono", monospace; fill: #059669; }
.mfg-trace { fill: none; stroke: #048eaa; stroke-width: 2; stroke-linejoin: round; }
.mfg-ex { fill: #f43f5e; }

/* ---- Load plan */
.mfg-truck { display: grid; grid-template-columns: 70px 1fr 44px; align-items: stretch; gap: 0; padding: 16px; background: #fff; border: 1px solid #ddebed; overflow-x: auto; }
.mfg-truck__cab { min-height: 150px; background: linear-gradient(160deg, #0b8fa8, #0b8fa8); clip-path: polygon(0 18%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.mfg-truck__bed { display: grid; grid-template-columns: repeat(var(--cols), minmax(22px, 1fr)); gap: 3px; padding: 6px; background: #eef4f5; border: 2px solid #9dbfc4; min-width: 360px; }
.mfg-truck__bed i { aspect-ratio: 1 / 1; display: block; transition: background-color 0.35s ease, transform 0.35s ease; }
.mfg-truck__bed i.e { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #f3d7dd 4px, #f3d7dd 6px); }
.mfg-truck__bed i.d1 { background: #048eaa; }
.mfg-truck__bed i.d2 { background: #09bbdf; }
.mfg-truck__bed i.d3 { background: #a78bfa; }
.mfg-truck__door { display: grid; place-items: center; writing-mode: vertical-rl; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #79a2a8; border: 2px solid #9dbfc4; border-left: 0; }
.pp-legend .d1 { background: #048eaa; } .pp-legend .d2 { background: #09bbdf; } .pp-legend .d3 { background: #a78bfa; }
.pp-legend .a0 { background: #10b981; } .pp-legend .a1 { background: #f59e0b; } .pp-legend .a2 { background: #f97316; } .pp-legend .a3 { background: #e11d48; }

/* ---- Scenario twin */
.mfg-page .pp-plan-bar .pp-seg { flex-wrap: wrap; }
.mfg-page .pp-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.mfg-scen { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: #ddebed; border: 1px solid #ddebed; }
@media (min-width: 900px) { .mfg-scen { grid-template-columns: repeat(4, 1fr); } }
.mfg-act { display: grid; gap: 4px; padding: 14px 16px; background: #fff; transition: background-color 0.3s ease; }
.mfg-act b { font: 500 20px/1 "Newsreader", Georgia, serif; color: #9dbfc4; }
.mfg-act span { font-size: 14px; font-weight: 600; color: #2f3a3d; }
.mfg-act em { font-style: normal; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #79a2a8; }
.mfg-act.is-on { background: #ecfdf5; }
.mfg-act.is-on b, .mfg-act.is-on em { color: #059669; }

/* ---- Chat with DB */
.mfg-sql { margin: 0 0 8px; padding: 10px 12px; background: #0b8fa8; color: #96e4f4; font: 500 12px/1.5 "IBM Plex Mono", monospace; white-space: pre-wrap; }
.mfg-res { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 13px; }
.mfg-res td { padding: 6px 8px; border-bottom: 1px solid #ddebed; color: #2f3a3d; }

/* ---- Architecture */
.arch { display: grid; gap: 1px; grid-template-columns: 1fr; background: rgba(11, 143, 168, 0.1); border: 1px solid rgba(11, 143, 168, 0.1); position: relative; }
@media (min-width: 760px) { .arch { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .arch { grid-template-columns: repeat(5, 1fr); } }
.arch__layer { position: relative; padding: 22px 20px 24px; background: #fff; }
.arch__layer h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font: 500 22px/1.1 "Newsreader", Georgia, serif; color: #2f3a3d; }
.arch__layer h3 span { font: 600 11px "IBM Plex Mono", monospace; color: #048eaa; }
.arch__layer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arch__layer li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.45; color: #43757c; }
.arch__layer li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #09bbdf; transform: rotate(45deg); }
@media (min-width: 1180px) {
  .arch__layer:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 22px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; background: #048eaa; color: #fff; font-size: 12px; }
}

/* ---- KPI table */
.mfg-kpis table { min-width: 0; }
.mfg-kpis td b { color: #048eaa; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Rollout */
.phases { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: rgba(11, 143, 168, 0.1); border: 1px solid rgba(11, 143, 168, 0.1); position: relative; }
@media (min-width: 900px) { .phases { grid-template-columns: repeat(4, 1fr); } }
.phases li { position: relative; display: grid; gap: 6px; padding: 22px 20px 24px; background: #fff; }
.phases li::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; background: linear-gradient(90deg, #048eaa, #09bbdf); }
.phases li:nth-child(1)::before { width: 25%; } .phases li:nth-child(2)::before { width: 50%; } .phases li:nth-child(3)::before { width: 75%; } .phases li:nth-child(4)::before { width: 100%; }
.phases b { font: 500 24px/1 "Newsreader", Georgia, serif; color: #2f3a3d; }
.phases span { font: 600 11px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #048eaa; }
.phases p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #43757c; }

@media (prefers-reduced-motion: reduce) { .mf-rdc--crit { animation: none; } }