.ops-overview { --ops-blue:#087eb8; --ops-online:#188b75; --ops-amber:#bd7a18; --ops-offline:#cc4859; --ops-other:#8996a6; color:var(--ip-text); }
.ops-overview button { appearance:none; }
[data-bs-theme="dark"] .ops-overview { --ops-blue:#55b9ec; --ops-online:#57c7ad; --ops-amber:#e9b25c; --ops-offline:#f07c89; --ops-other:#8e9daf; }
.ops-header { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin:.25rem 0 1.6rem; }
.ops-eyebrow { color:var(--ops-blue); font-size:.67rem; font-weight:750; letter-spacing:.16em; margin-bottom:.4rem; }
.ops-header h1 { font-size:clamp(1.6rem,2.3vw,2rem); font-weight:700; letter-spacing:-.04em; margin:0 0 .4rem; }
.ops-header p { color:var(--ip-muted); font-size:.9rem; margin:0; }
.ops-snapshot { display:flex; align-items:center; gap:.7rem; flex-shrink:0; color:var(--ip-muted); font-size:.72rem; }
.ops-snapshot__icon { width:34px; height:34px; display:grid; place-items:center; font-size:1.25rem; border-radius:50%; background:var(--ip-surface); border:1px solid var(--ip-border-soft); }
.ops-snapshot strong,.ops-snapshot span:not(.ops-snapshot__icon) { display:block; }
.ops-snapshot strong { font-weight:600; color:var(--ip-text); margin-bottom:.15rem; }
.ops-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.2rem; }
.ops-metric { display:flex; flex-direction:column; text-align:left; min-width:0; padding:1.1rem 1.25rem; border-radius:14px; border:1px solid var(--ip-border-soft); background:var(--ip-surface); color:var(--ip-text); box-shadow:0 3px 10px rgba(22,40,65,.025); font:inherit; }
button.ops-metric { cursor:pointer; transition:border-color .15s,transform .15s; }
button.ops-metric:hover { border-color:var(--ops-blue); transform:translateY(-2px); }
.ops-metric__top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; color:var(--ip-muted); font-size:.8rem; font-weight:600; }
.ops-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--ops-blue); background:color-mix(in srgb,var(--ops-blue) 9%,transparent); }
.ops-metric--amber .ops-icon { color:var(--ops-amber); background:color-mix(in srgb,var(--ops-amber) 10%,transparent); }
.ops-metric--violet .ops-icon { color:#8362c6; background:rgba(131,98,198,.09); }
[data-bs-theme="dark"] .ops-metric--violet .ops-icon { color:#bda0f5; background:rgba(189,160,245,.12); }
.ops-metric__value { font-size:2.25rem; line-height:1.2; font-weight:700; letter-spacing:-.045em; margin:.55rem 0 .3rem; font-variant-numeric:tabular-nums; }
.ops-metric__detail { color:var(--ip-muted); font-size:.73rem; line-height:1.4; }
.ops-chart-grid { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.4fr); gap:1.2rem; margin-bottom:1.6rem; }
.ops-card { min-width:0; border:1px solid var(--ip-border-soft); border-radius:14px; background:var(--ip-surface); overflow:hidden; box-shadow:0 3px 10px rgba(22,40,65,.025); }
.ops-card__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.25rem 1.3rem .9rem; }
.ops-card h2,.ops-section-heading h2 { font-size:.97rem; font-weight:650; margin:0 0 .3rem; letter-spacing:-.015em; }
.ops-card__heading p,.ops-section-heading p { font-size:.73rem; line-height:1.5; color:var(--ip-muted); margin:0; }
.ops-subtle-tag { flex-shrink:0; font-size:.65rem; padding:.25rem .5rem; background:var(--ip-surface-muted); color:var(--ip-muted); border-radius:5px; }
.ops-health { display:flex; flex-direction:column; }
.ops-health__body { flex:1; display:grid; grid-template-columns:minmax(130px,.9fr) minmax(120px,1fr); align-items:center; gap:1.3rem; padding:.8rem 1.3rem 1.4rem; }
.ops-ring { position:relative; width:100%; max-width:200px; aspect-ratio:1; display:grid; place-items:center; justify-self:center; }
.ops-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ops-ring circle { fill:none; stroke-width:15px; }
.ops-ring__track { stroke:var(--ip-surface-muted); }
.ops-ring__segment { stroke-linecap:butt; }
.ops-ring__center { text-align:center; display:grid; gap:.2rem; }
.ops-ring__center strong { font-size:1.85rem; line-height:1.1; letter-spacing:-.045em; font-weight:700; }
.ops-ring__center span { font-size:.7rem; color:var(--ip-muted); }
.ops-legend { padding:0; margin:0; list-style:none; display:grid; gap:.9rem; font-size:.75rem; }
.ops-legend li { display:flex; justify-content:space-between; gap:.8rem; }
.ops-legend li>span { display:flex; align-items:center; gap:.5rem; color:var(--ip-muted); }
.ops-legend strong { font-variant-numeric:tabular-nums; }
.ops-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ops-color--online { background:var(--ops-online); }.ops-stroke--online { stroke:var(--ops-online); }
.ops-color--degraded { background:var(--ops-amber); }.ops-stroke--degraded { stroke:var(--ops-amber); }
.ops-color--offline { background:var(--ops-offline); }.ops-stroke--offline { stroke:var(--ops-offline); }
.ops-color--other { background:var(--ops-other); }.ops-stroke--other { stroke:var(--ops-other); }
.ops-card__foot { padding:.8rem 1.3rem; border-top:1px solid var(--ip-border-soft); color:var(--ip-muted); font-size:.7rem; }
.ops-system-list { padding:0 1.3rem .5rem; }
.ops-system-row { display:grid; grid-template-columns:minmax(100px,.6fr) minmax(0,1.4fr); align-items:center; gap:1.15rem; padding:.8rem 0; border-bottom:1px solid var(--ip-border-soft); }
.ops-system-row:last-child { border-bottom:0; }
.ops-system-row__label { display:grid; gap:.18rem; }
.ops-system-row__label>a { color:var(--ip-text); text-decoration:none; font-size:.78rem; font-weight:600; }
.ops-system-row__label>a:hover { color:var(--ops-blue); text-decoration:underline; }
.ops-system-row__label>span { color:var(--ip-muted); font-size:.67rem; }
.ops-status-bar { display:flex; height:7px; width:100%; background:var(--ip-surface-muted); border-radius:4px; overflow:hidden; }
.ops-status-bar>span { height:100%; }
.ops-system-row__counts { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin-top:.45rem; font-size:.7rem; color:var(--ip-muted); }
.ops-system-row__counts button { display:inline-flex; align-items:center; gap:.3rem; background:none; border:0; color:inherit; padding:0; font:inherit; text-align:left; cursor:pointer; }
.ops-system-row__counts>span { display:inline-flex; align-items:center; gap:.3rem; }
.ops-system-row__counts button:hover { color:var(--ops-blue); text-decoration:underline; }
.ops-system-row__counts button { min-height:22px; }
.ops-flapping { color:var(--ops-amber) !important; }
.ops-other-count { color:var(--ip-muted); }
.ops-empty-systems { display:flex; flex-wrap:wrap; gap:.4rem .7rem; padding:.75rem 1.3rem; border-top:1px solid var(--ip-border-soft); font-size:.65rem; color:var(--ip-muted); }
.ops-empty-systems a { text-decoration:none; color:var(--ip-muted); }.ops-empty-systems a:hover { color:var(--ops-blue); text-decoration:underline; }
.ops-empty-systems a>span { font-weight:700; margin-left:.15rem; }
.ops-section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.9rem; }
.ops-section-heading>a { display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; color:var(--ops-blue); font-size:.75rem; font-weight:600; }
.ops-section-heading>a svg { width:16px; height:16px; }
.ops-site-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.ops-site-card { display:flex; flex-direction:column; gap:.25rem; text-align:left; font:inherit; color:var(--ip-text); background:var(--ip-surface); border:1px solid var(--ip-border-soft); border-radius:12px; padding:1.1rem; min-width:0; transition:border-color .15s; }
.ops-site-card:hover { border-color:var(--ops-blue); }
.ops-site-card__top { display:flex; align-items:center; justify-content:space-between; gap:.65rem; margin-bottom:.7rem; }
.ops-site-icon { color:var(--ops-blue); }
.ops-status-label { display:flex; align-items:center; gap:.35rem; font-size:.65rem; text-transform:capitalize; color:var(--ip-muted); }
.ops-site-card>strong { font-size:.85rem; font-weight:650; overflow-wrap:anywhere; }
.ops-site-card__customer { font-size:.67rem; color:var(--ip-muted); overflow-wrap:anywhere; }
.ops-site-card__counts { display:flex; flex-wrap:wrap; gap:.35rem; font-size:.68rem; color:var(--ip-muted); margin-top:.65rem; }
.ops-site-card__bottom { display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-top:1px solid var(--ip-border-soft); padding-top:.65rem; margin-top:.55rem; color:var(--ip-muted); font-size:.66rem; }
.ops-site-card__bottom svg { width:15px; height:15px; color:var(--ops-blue); }
.ops-site-card__issues { color:var(--ops-amber); }
.ops-operational-strip { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1.35rem; padding:1rem 0 1.5rem; font-size:.7rem; color:var(--ip-muted); }
.ops-operational-strip>span { font-weight:650; color:var(--ip-text); }
.ops-operational-strip button,.ops-operational-strip a { background:none; border:0; padding:0; color:inherit; font:inherit; text-decoration:none; }
.ops-operational-strip strong { font-weight:700; margin-left:.3rem; color:var(--ip-text); }
.ops-operational-strip button:hover,.ops-operational-strip a:hover { color:var(--ops-blue); text-decoration:underline; }
.ops-empty-state { grid-column:1/-1; padding:2rem; color:var(--ip-muted); font-size:.85rem; }
.ops-overview button:focus-visible,.ops-overview a:focus-visible { outline:3px solid var(--ops-blue); outline-offset:4px; }
#page-dashboard .dashboard-main-row>.col-xl-6 { margin-bottom:.15rem; }
#page-dashboard .dashboard-panel-card,#page-dashboard .dashboard-main-row>.col-12>.card { border-radius:14px; border-color:var(--ip-border-soft); box-shadow:0 3px 10px rgba(22,40,65,.025) !important; overflow:hidden; }
#page-dashboard .dashboard-panel-card>.card-header,#page-dashboard .dashboard-main-row>.col-12>.card>.card-header { background:var(--ip-surface); border-bottom:1px solid var(--ip-border-soft); padding:1rem 1.2rem; font-size:.85rem; }
#page-dashboard .dashboard-panel-card .table { font-size:.78rem; }
@media (min-width:1450px) { .ops-health__body { gap:1.5rem; } }
@media (max-width:1200px) { .ops-chart-grid { grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); }.ops-health__body { grid-template-columns:1fr; gap:.8rem; }.ops-ring { max-width:160px; }.ops-legend { grid-template-columns:1fr 1fr; gap:.6rem 1.1rem; }.ops-site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:960px) { .ops-metric-grid { gap:.75rem; }.ops-metric { padding:1rem; }.ops-metric__top { font-size:.7rem; }.ops-metric__detail { font-size:.66rem; }.ops-icon { width:30px; height:30px; }.ops-metric__value { font-size:2rem; }.ops-chart-grid { grid-template-columns:1fr; }.ops-health__body { grid-template-columns:minmax(130px,.7fr) 1fr; padding-top:0; }.ops-ring { max-width:160px; }.ops-legend { grid-template-columns:1fr 1fr; }.ops-snapshot { display:none; } }
@media (max-width:991.98px) {
  .content-pane,.sidebar { transition:none; }
  .content-pane>.navbar .container-fluid { gap:.65rem; }
  .content-pane>.navbar .container-fluid>.d-flex:first-child { width:100%; }
  .content-pane>.navbar .container-fluid>.d-flex:last-child { gap:.5rem !important; flex-wrap:wrap; width:100%; }
  .content-pane>.navbar #authUser { font-size:.7rem !important; }
  .content-pane>.navbar .navbar-text { min-width:0; }
}
@media (max-width:600px) { .ops-header { margin-bottom:1.2rem; }.ops-header p { font-size:.8rem; }.ops-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.ops-metric__detail { min-height:2em; }.ops-card__heading { padding:1.1rem; }.ops-health__body { grid-template-columns:140px minmax(0,1fr); gap:1rem; padding:0 1.1rem 1.1rem; }.ops-legend { grid-template-columns:1fr; font-size:.67rem; }.ops-system-list { padding:0 1.1rem .3rem; }.ops-system-row { grid-template-columns:minmax(85px,.55fr) minmax(0,1.2fr); gap:.8rem; }.ops-system-row__counts { gap:.4rem .65rem; }.ops-site-grid { grid-template-columns:1fr 1fr; gap:.75rem; }.ops-site-card { padding:.9rem; }.ops-site-card__top { flex-wrap:wrap; gap:.4rem; }.ops-operational-strip { gap:.7rem 1rem; }.ops-card h2,.ops-section-heading h2 { font-size:.9rem; }.ops-section-heading p { font-size:.67rem; } }
@media (max-width:370px) { .ops-site-grid { grid-template-columns:1fr; }.ops-health__body { grid-template-columns:125px minmax(0,1fr); gap:.65rem; }.ops-ring__center strong { font-size:1.6rem; } }
@media (prefers-reduced-motion:reduce) { .ops-overview * { transition:none !important; } }
@media print { .ops-overview { --ops-online:#188b75; --ops-amber:#bd7a18; --ops-offline:#cc4859; --ops-other:#8996a6; }.ops-chart-grid,.ops-site-grid { break-inside:avoid; }.ops-snapshot { display:none; } }