/* Distributor Management System page — on top of scm-page + pp-page + mfg-page + frame + light + mono. */

/* ---- Hero art: one warehouse, six beats, outlets around it */
.dm-net { display: block; width: 100%; height: auto; font-family: "Source Sans 3", sans-serif; }
.dm-ring { fill: none; stroke: rgba(161, 225, 238, 0.12); stroke-dasharray: 2 5; }
.dm-spoke { stroke: rgba(161, 225, 238, 0.22); stroke-width: 1; }
.dm-run { fill: none; stroke: rgba(161, 225, 238, 0.45); stroke-width: 1.3; }
.dm-van { fill: #e6f7fb; }
.dm-out { fill: rgba(230, 247, 251, 0.6); }
.dm-out--pend { fill: #56ddf8; }
.dm-out--late { fill: #e08a80; animation: dm-blink 1.8s ease-in-out infinite; }
@keyframes dm-blink { 50% { opacity: 0.4; } }
.dm-hub { fill: #048eaa; stroke: #e6f7fb; stroke-width: 1.5; }
.dm-hub-t { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
.dm-beat { fill: rgba(230, 247, 251, 0.45); font: 600 9.5px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; text-anchor: middle; }

/* ---- Dispatch desk */
.dms-table tbody tr.is-sel { background: #ecf9fc; box-shadow: inset 3px 0 0 #048eaa; }
.dms-table tbody tr.is-closed { cursor: default; opacity: 0.55; }
.dms-st { display: inline-block; padding: 3px 8px; font: 600 10px/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; }
.dms-st--pending { color: #048eaa; }
.dms-st--done { color: #43757c; background: #eef4f5; border-color: #eef4f5; }
.dms-st--cancel { color: #b42318; }
.dms-items { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.dms-items li { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; align-items: baseline; font-size: 13.5px; color: #2f3a3d; }
.dms-items b { font-weight: 600; color: #43757c; }
.dms-items em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.dms-items__t { padding-top: 8px; border-top: 1px solid #ddebed; font-weight: 700; }
.dms-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dms-feed-wrap { margin-top: 14px; padding: 14px 16px 16px; background: #0b8fa8; }
.dms-feed__lead { margin: 0 0 10px; font: 600 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #a1e1ee; }
.dms-feed { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .dms-feed { grid-template-columns: repeat(4, 1fr); } }
.dms-msg { padding: 10px 12px; background: #0b8fa8; border-left: 3px solid #56ddf8; color: #e6f7fb; font-size: 12.5px; line-height: 1.45; }
.dms-msg p { margin: 0; }
.dms-msg__h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px !important; font-weight: 700; color: #fff; }
.dms-msg__h time { font: 500 10.5px "IBM Plex Mono", monospace; color: rgba(230, 247, 251, 0.5); }
.dms-msg b { color: #a1e1ee; }
.dms-msg--warn { border-left-color: #bae9f3; }
.dms-msg--neg { border-left-color: #e08a80; }
.dms-msg.is-new { animation: dms-in 0.6s ease both; }
@keyframes dms-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dms-pdf { display: inline-block; margin-top: 8px; padding: 5px 8px 5px 26px; position: relative; background: rgba(255, 255, 255, 0.07); font: 600 10.5px "IBM Plex Mono", monospace; color: #e6f7fb; }
.dms-pdf::before { content: "PDF"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 7.5px; padding: 2px; background: #e08a80; color: #2f3a3d; }

/* ---- Phone mock (WhatsApp bot) */
.dms-phone { display: flex; flex-direction: column; background: #0b8fa8; border-radius: 18px; padding: 10px; box-shadow: 0 0 0 1px rgba(161, 225, 238, 0.2), 0 30px 60px -30px rgba(11, 143, 168, 0.8); }
.dms-phone__head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; color: #fff; }
.dms-phone__head b { display: block; font-size: 14px; }
.dms-phone__head small { font-size: 11px; color: rgba(230, 247, 251, 0.55); }
.dms-phone__av { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #56ddf8, #048eaa); }
.dms-phone__body { display: flex; flex-direction: column; gap: 8px; height: 360px; overflow-y: auto; padding: 12px; border-radius: 10px; background: #0b8fa8 linear-gradient(rgba(161, 225, 238, 0.04) 1px, transparent 1px) 0 0 / 100% 22px; scroll-behavior: smooth; }
.dms-bot__hint { margin: auto; font-size: 12.5px; color: rgba(230, 247, 251, 0.55); text-align: center; }
.dms-b { max-width: 86%; margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.45; animation: dms-in 0.35s ease both; }
.dms-b--me { align-self: flex-end; background: #bae9f3; color: #2f3a3d; border-radius: 10px 2px 10px 10px; }
.dms-b--bot { align-self: flex-start; background: #0b8fa8; color: #e6f7fb; border-radius: 2px 10px 10px 10px; }
.dms-b--bot b { color: #a1e1ee; }
.dms-qr { display: inline-block; margin: 6px 6px 0 0; padding: 4px 12px; border: 1px solid rgba(161, 225, 238, 0.5); border-radius: 12px; font-size: 12px; font-weight: 700; color: #a1e1ee; }
.dms-bot { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .dms-bot { grid-template-columns: 1fr 340px; } }
.dms-bot__lead { margin: 0 0 10px; font-size: 14px; color: #43757c; }
.dms-intent { display: grid; gap: 6px; margin: 16px 0; padding: 12px 14px; background: #0b8fa8; }
.dms-intent span { font: 600 10px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #56ddf8; }
.dms-intent code { font: 500 13px/1.5 "IBM Plex Mono", monospace; color: #e6f7fb; word-break: break-word; }
.dms-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dms-facts li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.45; color: #43757c; }
.dms-facts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: #048eaa; transform: rotate(45deg); }
.dms-facts b { color: #2f3a3d; }

/* ---- Stock cycle */
.pp-legend .dm-g { background: #ddebed; } .pp-legend .dm-d { background: #0b8fa8; } .pp-legend .dm-r { background: #56ddf8; } .pp-legend .dm-f { background: #bae9f3; outline: 1px dashed #048eaa; }
.dms-stock { display: grid; gap: 10px; padding: 16px; background: #fff; border: 1px solid #ddebed; }
.dms-stock__row { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; align-items: center; }
@media (min-width: 700px) { .dms-stock__row { grid-template-columns: 130px 1fr 230px; } }
.dms-stock__n { font-size: 13.5px; font-weight: 600; color: #2f3a3d; }
.dms-stock__bar { display: flex; width: var(--g); height: 18px; background: #ddebed; overflow: hidden; transition: width 0.4s ease; }
.dms-stock__bar i { display: block; width: var(--w); height: 100%; transition: width 0.5s ease; }
.dms-stock__bar i.d { background: #0b8fa8; }
.dms-stock__bar i.r { background: #56ddf8; }
.dms-stock__v { font-size: 13px; color: #43757c; }
.dms-stock__v b { font-size: 15px; color: #2f3a3d; font-variant-numeric: tabular-nums; }
.dms-stock__v em { font-style: normal; font-weight: 600; margin-left: 6px; }

/* ---- Retailer dues */
.dms-age { display: flex; width: max(var(--t), 4px); min-width: 4px; height: 10px; background: #eef4f5; }
.dms-age i { display: block; width: var(--w); height: 100%; }
.dms-age .a0, .dms-agekey .a0 { background: #bae9f3; }
.dms-age .a1, .dms-agekey .a1 { background: #56ddf8; }
.dms-age .a2, .dms-agekey .a2 { background: #0b8fa8; }
.dms-age .a3, .dms-agekey .a3 { background: #b42318; }
.dms-agekey { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 10px 12px; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.06em; color: #79a2a8; border-top: 1px solid #edf5f6; }
.dms-agekey i { display: inline-block; width: 12px; height: 8px; margin-right: -6px; }

/* ---- SLA */
.dms-two { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .dms-two { grid-template-columns: 1fr 1.25fr; } }
.dms-two > * { min-width: 0; }
.dms-panel { padding: 14px 16px; background: #fff; border: 1px solid #ddebed; overflow-x: auto; }
.dms-panel__h { margin: 0 0 12px; font: 600 10.5px/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #79a2a8; }
.dms-panel .ck-heat { border: 0; padding: 0; }
.dms-bars b { white-space: nowrap; }

/* ---- Forecast */
.ck-chart .dm-hist { fill: #0b8fa8; }
.ck-chart .dm-fc { fill: #bae9f3; stroke: #048eaa; stroke-dasharray: 3 2; }
.ck-chart .dm-now { stroke: #048eaa; stroke-dasharray: 4 3; }

/* ---- Sections */
.dms-roles { list-style: none; margin: 0; 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); }
@media (min-width: 760px) { .dms-roles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .dms-roles { grid-template-columns: repeat(4, 1fr); } }
.dms-roles li { display: grid; align-content: start; gap: 10px; padding: 24px 22px 26px; background: #fff; }
.dms-roles small { font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #048eaa; }
.dms-roles h3 { margin: 0; font: 500 24px/1.15 "Newsreader", Georgia, serif; color: #2f3a3d; }
.dms-roles p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #43757c; }
.dms-roles ul { list-style: none; margin: 4px 0 0; padding: 12px 0 0; display: grid; gap: 6px; border-top: 1px solid #e3edee; }
.dms-roles ul li { display: block; padding: 0 0 0 14px; position: relative; font-size: 13.5px; line-height: 1.4; color: #2f3a3d; background: none; }
.dms-roles ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 1px; background: #048eaa; }

.dms-formula { display: grid; gap: 1px; grid-template-columns: 1fr; margin-bottom: 1px; background: rgba(11, 143, 168, 0.1); border: 1px solid rgba(11, 143, 168, 0.1); }
@media (min-width: 900px) { .dms-formula { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; } }
.dms-formula > div { display: grid; align-content: start; gap: 8px; padding: 22px 20px; background: #fff; }
.dms-formula > span { display: grid; place-items: center; padding: 6px 14px; background: #f4fcfd; font: 500 28px/1 "Newsreader", Georgia, serif; color: #048eaa; }
.dms-formula b { font: 500 22px/1.1 "Newsreader", Georgia, serif; color: #2f3a3d; }
.dms-formula small { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #79a2a8; }
.dms-formula p { margin: 0; font-size: 14px; line-height: 1.5; color: #43757c; }
.dms-formula > div:last-child { background: #0b8fa8; }
.dms-formula > div:last-child b { color: #fff; }
.dms-formula > div:last-child p { color: rgba(230, 247, 251, 0.75); }
.dms-formula > div:last-child small { color: #56ddf8; }

.dms-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12); }
@media (min-width: 760px) { .dms-alerts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .dms-alerts { grid-template-columns: repeat(3, 1fr); } }
.dms-alerts li { display: grid; gap: 6px; padding: 20px 22px; background: #fff; }
.dms-alerts time { font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #048eaa; }
.dms-alerts h3 { margin: 0; font: 500 20px/1.2 "Newsreader", Georgia, serif; color: #2f3a3d; }
.dms-alerts p { margin: 0; font-size: 14px; line-height: 1.5; color: #43757c; }