/* Layout around the Shards dashboard theme: a fixed side nav and a main column. */
body { background: #f5f6f8; }
.panel { display: flex; min-height: 100vh; }
.panel-nav { width: 220px; flex: 0 0 220px; background: #fff; box-shadow: 0 0 6px rgba(90, 97, 105, .12); padding: 1rem 0; display: flex; flex-direction: column; }
.panel-brand { font-weight: 600; padding: 0 1.25rem 1rem; border-bottom: 1px solid #e1e5eb; margin-bottom: .5rem; }
.panel-nav .nav-link { color: #3d5170; padding: .6rem 1.25rem; }
.panel-nav .nav-link:hover { background: #fbfbfb; color: #007bff; }
.panel-user { margin-top: auto; padding: 1rem 1.25rem 0; border-top: 1px solid #e1e5eb; }
.panel-main { flex: 1; padding: 1.5rem 2rem; min-width: 0; }
.panel-narrow { max-width: 560px; }
.panel-form { max-width: 980px; }
.panel-actions .btn { margin: 0 .4rem .4rem 0; }
.panel-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.panel-login form { width: 340px; }
.panel-secret { font-size: 1.4rem; }
.panel-audio { height: 32px; max-width: 260px; }
/* The SVG has its own height and the legend follows it in the flow, so the card grows to fit both. */
.panel-chart { min-height: 240px; }
.panel-chart svg { display: block; width: 100%; height: 220px; }
.legend { margin-top: .5rem; }
.panel-chart .line { fill: none; stroke-width: 2; }
.panel-chart .s0 { stroke: #007bff; } .panel-chart .s1 { stroke: #17c671; } .panel-chart .s2 { stroke: #fb7906; }
.panel-chart .axis { stroke: #e1e5eb; } .panel-chart text { font-size: 11px; fill: #868e96; }
.legend span { margin-right: 1rem; } .legend .k0 { color: #007bff; } .legend .k1 { color: #17c671; } .legend .k2 { color: #fb7906; }
.badge-status-active { background: #17c671; color: #fff; } .badge-status-paused { background: #ffb400; color: #fff; }
.badge-status-stopped { background: #868e96; color: #fff; } .badge-status-finished { background: #00b8d8; color: #fff; }
.dash-card .value { font-size: 1.8rem; font-weight: 500; }
.stale { opacity: .5; }
@media (max-width: 768px) { .panel { flex-direction: column; } .panel-nav { width: 100%; flex-basis: auto; } .panel-main { padding: 1rem; } }