/* Business Service Management demo (illustrative): shared by /unified360 and the Solutions pages */
.bsm { --up:#16a34a; --deg:#f59e0b; --imp:#ea580c; --down:#e11d48; font-family:var(--font,system-ui,sans-serif); color:#0b1437; }
.bsm * { box-sizing:border-box; }
.bsm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px; background:#eef1fb; border-bottom:1px solid rgba(31,95,255,.14); }
.bsm-head b { font-size:.82rem; letter-spacing:.02em; } .bsm-badge { font-size:.625rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:#fff; border:1px solid rgba(11,20,55,.16); color:#4b5878; }
.bsm-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:.7rem; font-weight:700; color:#4b5878; } .bsm-legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.bsm-legend .l-up { background:var(--up); } .bsm-legend .l-deg { background:var(--deg); } .bsm-legend .l-imp { background:var(--imp); } .bsm-legend .l-down { background:var(--down); }
.bsm-stage { padding:10px 10px 0; background:radial-gradient(circle at 1px 1px,rgba(31,95,255,.1) 1px,transparent 0) 0 0/22px 22px,#fff; } .bsm-svg { display:block; width:100%; height:auto; overflow:visible; }
.bsm-col { font-size:9px; font-weight:800; letter-spacing:.16em; fill:#8a96b8; text-anchor:middle; text-transform:uppercase; font-family:var(--font,system-ui,sans-serif); }
.bsm-line { fill:none; stroke:#c4cbe0; stroke-width:2; transition:stroke .3s; } .bsm-line.hot { stroke:var(--imp); stroke-width:3; stroke-dasharray:7 6; animation:bsmflow 1s linear infinite; } .bsm-dep { fill:none; stroke:#9aa6c8; stroke-width:1.8; stroke-dasharray:4 4; marker-end:url(#bsm-arr); } .bsm-dep.hot { stroke:var(--imp); }
@keyframes bsmflow { to { stroke-dashoffset:-26; } }
.bsm-n rect { fill:#fff; stroke:#c4cbe0; stroke-width:2; transition:stroke .3s,fill .3s; } .bsm-n text { font-family:var(--font,system-ui,sans-serif); pointer-events:none; } .bsm-n .t1 { font-size:12.5px; font-weight:800; fill:#0b1437; } .bsm-n .t2 { font-size:9.5px; font-weight:700; fill:#7a86a8; letter-spacing:.04em; }
.bsm-n .dot { fill:var(--up); transition:fill .3s; } .bsm-n .st { font-size:8.5px; font-weight:900; letter-spacing:.08em; text-anchor:end; fill:var(--up); font-family:var(--font,system-ui,sans-serif); transition:fill .3s; }
.bsm-n.s-DEGRADED rect { stroke:var(--deg); fill:#fffaf0; } .bsm-n.s-DEGRADED .dot,.bsm-n.s-DEGRADED .st { fill:var(--deg); }
.bsm-n.s-IMPACTED rect { stroke:var(--imp); fill:#fff5ee; } .bsm-n.s-IMPACTED .dot,.bsm-n.s-IMPACTED .st { fill:var(--imp); }
.bsm-n.s-DOWN rect { stroke:var(--down); fill:#fff1f3; stroke-width:2.6; } .bsm-n.s-DOWN .dot,.bsm-n.s-DOWN .st { fill:var(--down); }
.bsm-n.app rect { stroke-width:2.6; } .bsm-n.app { filter:drop-shadow(0 8px 14px rgba(11,20,55,.12)); }
.bsm-ctl { padding:14px 18px 6px; } .bsm-ctl p { font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#4b5878; margin-bottom:10px; }
.bsm-btns { display:flex; flex-wrap:wrap; gap:8px; }
.bsm-b { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid rgba(11,20,55,.18); background:#fff; font:700 .8rem var(--font,system-ui,sans-serif); color:#0b1437; cursor:pointer; transition:background-color .18s,border-color .18s,color .18s,transform .18s; }
.bsm-b small { font-weight:600; color:#7a86a8; } .bsm-b:hover { border-color:var(--down); } .bsm-b[aria-pressed="true"] { background:var(--down); border-color:var(--down); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(225,29,71,.35); } .bsm-b[aria-pressed="true"] small { color:#ffd0d8; }
.bsm-b.reset { border-style:dashed; } .bsm-b:focus-visible { outline:3px solid #1f5fff; outline-offset:2px; }
.bsm-out { margin:12px 18px 18px; padding:12px 14px; border-radius:12px; background:#f4f6fd; border:1px solid rgba(31,95,255,.14); font-size:.86rem; line-height:1.5; color:#2b3658; min-height:64px; } .bsm-out b { color:#0b1437; } .bsm-out .path { display:block; margin-top:4px; font-weight:700; }
.bsm-out .p-DEGRADED { color:#b45309; } .bsm-out .p-IMPACTED { color:#c2410c; } .bsm-out .p-DOWN { color:#be123c; } .bsm-out .p-UP { color:#15803d; }
@media (prefers-reduced-motion:reduce) { .bsm-line.hot { animation:none; } }