/* Role-based dashboards showcase (platform.html#live-dashboards) */
.role-dashboards{--rd-ink:#0e2a47;--rd-muted:#5b6b79;--rd-line:#e3e9ef;--rd-bg:#f5f7fa;--rd-blue:#2f76e0;--rd-green:#22a861;--rd-orange:#ec7a36;--rd-red:#e04b4f;--rd-purple:#6b57d6;--rd-yellow:#f2b93b;border-top:1px solid var(--line,#d8e1ea);margin-top:56px;padding-top:56px;font-family:'Saira',Arial,sans-serif;color:var(--rd-ink)}
.role-dashboards *{box-sizing:border-box}
.rd-head{max-width:760px;margin:0 auto 28px;text-align:center}
.rd-head h3{font-size:34px;line-height:1.2;margin:0 0 12px;color:var(--rd-ink)}
.rd-head p:last-child{font-size:17px;line-height:1.6;color:var(--rd-muted);margin:0}
.rd-ic{width:20px;height:20px;flex-shrink:0}

/* Role tabs */
.rd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:900px;margin:0 auto 28px}
.rd-tabs button{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:8px;border:1px solid var(--rd-line);background:#fff;font:inherit;color:var(--rd-muted);cursor:pointer;min-height:64px;transition:border-color .2s,box-shadow .2s}
.rd-tabs button:hover{border-color:#b9cbd8}
.rd-tabs button[aria-selected=true]{border-color:#1f98a7;box-shadow:0 0 0 1px #1f98a7,0 10px 24px rgba(14,42,71,.10)}
.rd-tabs button:focus-visible{outline:3px solid #1f98a7;outline-offset:3px}
.rd-tab-ic{flex:0 0 40px;height:40px;border-radius:8px;display:grid;place-items:center;background:#eef4f7;color:#0e5a74}
.rd-tabs button[aria-selected=true] .rd-tab-ic{background:linear-gradient(135deg,#1f98a7,#0e5a74);color:#fff}
.rd-tabs strong{display:block;font-size:16px;line-height:1.25;color:var(--rd-ink)}
.rd-tabs small{font-size:13px}

/* Panel */
.rd-panel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:36px;align-items:start}
.rd-panel[hidden]{display:none}
.rd-panel.in .rd-window{animation:rdIn .4s ease both}
@keyframes rdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rd-for{font-size:12px;letter-spacing:0;font-weight:600;color:#0b7d8b;margin:6px 0 10px}
.rd-copy h4{font-size:26px;line-height:1.2;margin:0 0 10px;color:var(--rd-ink)}
.rd-copy>p{font-size:16px;line-height:1.6;color:var(--rd-muted);margin:0 0 18px}
.rd-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rd-copy li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--rd-muted)}
.rd-copy li svg{width:20px;height:20px;color:#fff;background:#1f98a7;border-radius:50%;padding:3px;flex:0 0 20px;margin-top:2px}
.rd-copy li strong{display:block;color:var(--rd-ink);font-size:16px}

/* Window */
.rd-window{background:#fff;border:1px solid var(--rd-line);border-radius:8px;box-shadow:0 24px 50px rgba(14,42,71,.12);overflow:hidden}
.rd-window-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rd-line);flex-wrap:wrap}
.rd-title{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600}
.rd-chips{display:flex;border:1px solid var(--rd-line);border-radius:8px;padding:3px;gap:2px}
.rd-chips span{font-size:12px;padding:4px 10px;border-radius:6px;color:var(--rd-muted)}
.rd-chips span.on{background:var(--rd-bg);color:var(--rd-ink);font-weight:600}
.rd-body{padding:16px;background:var(--rd-bg);display:grid;gap:12px}
.rd-card{background:#fff;border:1px solid var(--rd-line);border-radius:8px;padding:14px}
.rd-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.rd-card-head strong{font-size:14px;font-weight:600}
.rd-card-head span{font-size:12px;color:var(--rd-muted)}
.rd-row{display:grid;gap:12px}
.rd-row--care{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.rd-row--maint{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* KPIs */
.rd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rd-kpi{background:#fff;border:1px solid var(--rd-line);border-radius:8px;padding:12px 12px 10px;display:grid;gap:4px}
.rd-kpi-label{font-size:12px;color:var(--rd-muted);line-height:1.3}
.rd-kpi-value{font-size:22px;font-weight:600;line-height:1.1;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rd-kpi-value small{font-size:12px;font-weight:600}
.rd-kpi-value small.good{color:var(--rd-green)}.rd-kpi-value small.bad{color:var(--rd-red)}
.rd-spark{width:100%;height:26px}
.rd-spark polyline{fill:none;stroke:var(--rd-blue);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}

/* Histogram */
.rd-hist-plot{position:relative}
.rd-hist-bars{position:relative;height:120px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid var(--rd-line)}
.rd-hist-bars i{flex:1;height:var(--h);background:var(--rd-blue);border-radius:3px 3px 0 0;min-height:3px}
.rd-hist-bars i.over{background:var(--rd-orange)}
.rd-target{position:absolute;left:var(--x);top:0;bottom:0;border-left:1.5px dashed var(--rd-ink)}
.rd-target em{position:absolute;left:6px;top:-2px;font-size:11px;font-style:normal;white-space:nowrap;color:var(--rd-ink)}
.rd-hist-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--rd-muted);padding-top:4px}
.rd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--rd-muted);margin-top:8px}
.rd-legend span{display:inline-flex;align-items:center;gap:6px}
.rd-legend i,.rd-list i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--rd-green)}
.rd-legend .b{background:var(--rd-blue)}.rd-legend .o{background:var(--rd-orange)}.rd-legend .r{background:var(--rd-red)}.rd-legend .y{background:var(--rd-yellow)}
.rd-dh .rd-legend{margin:0 0 10px}

/* Heat map */
.rd-heat-grid{display:grid;gap:3px}
.rd-heat-row{display:grid;grid-template-columns:30px repeat(12,minmax(0,1fr));gap:3px;align-items:center}
.rd-heat-row span{font-size:11px;color:var(--rd-muted)}
.rd-heat-row i{height:14px;border-radius:3px;background:#dbe8fb}
.rd-heat-row .l2{background:#b3cdf5}.rd-heat-row .l3{background:#80abee}.rd-heat-row .l4{background:#4d88e4}.rd-heat-row .l5{background:#1f5fc9}
.rd-heat-hours em{font-size:10px;font-style:normal;color:var(--rd-muted)}
.rd-callout{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 11px;background:#e9f6f4;border-radius:8px;font-size:13px;line-height:1.45;color:#0d5d68}
.rd-callout svg{width:17px;height:17px;margin-top:1px}

/* Maintenance */
.rd-big{font-size:30px;font-weight:600;margin:0 0 10px;line-height:1}
.rd-big small{font-size:14px;font-weight:400;color:var(--rd-muted)}
.rd-segbar,.rd-test-split{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px;margin-bottom:12px}
.rd-segbar i,.rd-test-split i{width:var(--w);min-width:6px;background:var(--rd-green)}
.rd-segbar .r,.rd-test-split .r,.rd-list .r{background:var(--rd-red)}
.rd-segbar .p,.rd-list .p{background:var(--rd-purple)}
.rd-test-split .b,.rd-list .b{background:var(--rd-blue)}
.rd-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rd-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--rd-ink)}
.rd-list b{margin-left:auto;font-weight:600}
.rd-warn{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 10px;border:1px solid #f3d38a;background:#fff8e6;border-radius:8px;font-size:13px;font-weight:500}
.rd-warn svg{width:17px;height:17px;color:#b26a12}
.rd-mbars{display:flex;align-items:flex-end;gap:4px;height:44px;margin-top:12px}
.rd-mbars i{flex:1;height:var(--h);background:#9cc0f2;border-radius:2px 2px 0 0}
.rd-mbars i:last-child{background:var(--rd-blue)}
.rd-dh-grid{display:grid;gap:4px}
.rd-dh-row{display:grid;grid-template-columns:150px repeat(30,minmax(0,1fr));gap:2px;align-items:center}
.rd-dh-row span{font-size:12px;color:var(--rd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.rd-dh-row i{height:16px;border-radius:2px;background:var(--rd-green)}
.rd-dh-row .o{background:var(--rd-orange)}.rd-dh-row .r{background:var(--rd-red)}.rd-dh-row .y{background:var(--rd-yellow)}
.rd-dh-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--rd-muted);margin:6px 0 0 150px}

/* System health */
.rd-now{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rd-now strong{font-size:16px}
.rd-pill{font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:#fdeaea;color:#b3312f}
.rd-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rd-check{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--rd-line);border-radius:8px;padding:11px 12px}
.rd-check>i{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:5px;background:var(--rd-green)}
.rd-check>i.y{background:var(--rd-yellow)}.rd-check>i.r{background:var(--rd-red);box-shadow:0 0 0 4px #fbe1e1}
.rd-check strong{display:block;font-size:13px;font-weight:600}
.rd-check span{font-size:12px;color:var(--rd-muted);line-height:1.4}
.rd-tl-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:9px}
.rd-tl-row>span{font-size:11px;color:var(--rd-muted);text-align:right;line-height:1.3}
.rd-tl-row strong{display:block;font-size:12px;color:var(--rd-ink);font-weight:600}
.rd-track{position:relative;height:14px;border-radius:999px;background:#bfe3cf}
.rd-track b{position:absolute;left:var(--x);width:var(--w);min-width:6px;top:-2px;bottom:-2px;border-radius:4px;background:var(--rd-red)}
.rd-track b.y{background:var(--rd-yellow)}
.rd-tl-axis{display:grid;grid-template-columns:110px repeat(7,minmax(0,1fr));gap:0 12px;font-size:11px;color:var(--rd-muted)}
.rd-callout--link{background:#f1eefc;color:#3e2f93;border-left:3px solid var(--rd-purple)}

.rd-note{text-align:center;font-size:12px;color:var(--rd-muted);margin:18px 0 28px}

@media(max-width:1100px){.rd-panel{grid-template-columns:1fr;gap:22px}.rd-copy{max-width:720px}}
@media(max-width:760px){
.rd-tabs{grid-template-columns:1fr;gap:8px}
.rd-tabs button{min-height:56px;padding:10px 12px}
.rd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.rd-row--care,.rd-row--maint{grid-template-columns:1fr}
.rd-checks{grid-template-columns:1fr 1fr}
.rd-dh-row{grid-template-columns:96px repeat(30,minmax(0,1fr));gap:1px}
.rd-dh-row span{font-size:11px}
.rd-dh-axis{margin-left:96px}
.rd-tl-row,.rd-tl-axis{grid-template-columns:78px minmax(0,1fr)}
.rd-tl-axis span:not(:first-child){display:none}
.rd-body{padding:10px}
.rd-copy h4{font-size:22px}
}
@media(max-width:420px){.rd-checks{grid-template-columns:1fr}.rd-chips{display:none}}
@media(prefers-reduced-motion:reduce){.rd-panel.in .rd-window{animation:none}.rd-tabs button{transition:none}}

@media(max-width:620px){.rd-head h3{font-size:26px}}