/* Monitoring only. No shared Overview/Recording selectors are changed. */
.monitor-page { min-width: 0; }
.monitor-page-toolbar { margin-bottom: 8px; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.monitor-page-actions,.monitor-period-form { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.monitor-period-form label { display:grid; gap:4px; color:var(--muted); font-size:var(--font-caption); font-weight:700; }
.monitor-period-form select,.monitor-period-form input { min-height:34px; padding:0 9px; border:1px solid var(--line-strong); border-radius:7px; background:#fff; color:var(--text); }
.monitor-context { min-height:24px; margin-bottom:7px; display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:var(--font-caption); }
.monitor-notice { min-height:20px; margin-bottom:4px; color:#806019; font-size:var(--font-small); }
.monitor-widget-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; align-items:start; }
.monitor-widget { min-width:0; overflow:hidden; }
.monitor-size-compact { grid-column:span 3; }
.monitor-size-standard { grid-column:span 6; }
.monitor-size-wide { grid-column:span 12; }

.monitor-widget-head { min-height:54px; padding:10px 14px; display:flex; align-items:start; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.monitor-widget-head h2 { margin:0; color:var(--text-strong); font-size:var(--font-body); letter-spacing:-.015em; }
.monitor-widget-head div > span { display:block; margin-top:2px; color:var(--muted); font-size:var(--font-caption); }
.monitor-period-tag { flex:0 0 auto; padding:3px 7px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fafbfd; font-size:11px; white-space:nowrap; }
.monitor-widget-body { padding:14px; }
.monitor-widget-controls { padding:7px 9px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); background:#f8fafc; }
.monitor-widget-controls button,.monitor-widget-controls select { min-height:30px; padding:0 8px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:#53657c; font-size:var(--font-caption); font-weight:700; }
.monitor-widget-controls button { cursor:pointer; }
.monitor-widget-controls button:disabled { opacity:.45; cursor:not-allowed; }
.monitor-widget-controls label { margin-left:auto; display:flex; align-items:center; gap:5px; color:var(--muted); font-size:var(--font-caption); }
.monitor-drag-handle { width:28px; min-height:30px; display:grid; place-items:center; color:#63758c; letter-spacing:-2px; user-select:none; }
.monitor-widget-drag-zone { cursor:grab; touch-action:none; user-select:none; }
.monitor-widget-drag-zone:active { cursor:grabbing; }
.monitor-widget-drag-zone:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.monitor-drag-active,.monitor-drag-active * { cursor:grabbing !important; }
.monitor-drag-grid { isolation:isolate; }
.monitor-drag-placeholder { min-width:0; border:1.5px dashed #8bb3f7; border-radius:10px; background:rgba(61,126,235,.055); box-shadow:inset 0 0 0 1px rgba(61,126,235,.03); }
.monitor-drag-floating { overflow:hidden; opacity:.96; pointer-events:none !important; box-shadow:0 18px 42px rgba(33,55,88,.22),0 3px 10px rgba(33,55,88,.12); will-change:transform; transform-origin:center; }
.monitor-drag-settling { transition:transform 140ms cubic-bezier(.2,.8,.2,1),box-shadow 140ms ease,opacity 140ms ease; }
@media (prefers-reduced-motion:reduce) {
  .monitor-drag-settling { transition:none; }
}

.monitor-editor { margin-bottom:12px; overflow:hidden; }
.monitor-editor-head { padding:12px 14px; display:flex; justify-content:space-between; align-items:start; gap:12px; border-bottom:1px solid var(--line); }
.monitor-editor-head h2 { margin:0; color:var(--text-strong); font-size:var(--font-body); }
.monitor-editor-head p { margin:3px 0 0; color:var(--muted); font-size:var(--font-small); }
.monitor-catalog { padding:12px 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.monitor-catalog label { min-width:0; padding:9px; display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }
.monitor-catalog input { margin-top:3px; }
.monitor-catalog strong,.monitor-catalog small { display:block; }
.monitor-catalog strong { color:var(--text-strong); font-size:var(--font-small); }
.monitor-catalog small { margin-top:2px; color:var(--muted); font-size:var(--font-caption); line-height:1.35; }
.monitor-editor > .monitor-footnote { padding:0 14px 12px; }

.monitor-metric strong,.monitor-metric span { display:block; }
.monitor-metric strong { color:var(--text-strong); font-size:30px; line-height:1.08; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.monitor-metric span { margin-top:6px; color:var(--muted); font-size:var(--font-small); }
.monitor-footnote { margin:9px 0 0; color:var(--muted); font-size:var(--font-caption); line-height:1.45; }
.monitor-dual { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.monitor-dual > div { padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--panel-muted); }
.monitor-dual strong,.monitor-dual span { display:block; }
.monitor-dual strong { color:var(--text-strong); font-size:25px; }
.monitor-dual span { margin-top:2px; color:var(--muted); font-size:var(--font-caption); }
.monitor-health-summary { margin-bottom:8px; padding:8px 9px; border-radius:7px; font-size:var(--font-small); font-weight:700; }
.monitor-health-summary.good,.monitor-clear { color:#087854; background:var(--green-soft); }
.monitor-health-summary.warn { color:#8a5b12; background:var(--amber-soft); }
.monitor-service-list { margin:0; padding:0; list-style:none; }
.monitor-service-list li { min-height:30px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); font-size:var(--font-small); }
.monitor-service-list li:last-child { border-bottom:0; }
.monitor-service-list strong.good { color:#087854; }
.monitor-service-list strong.bad { color:var(--red); }
.monitor-storage-meter,.monitor-distribution meter { width:100%; accent-color:var(--blue); }
.monitor-storage-meter { margin-top:12px; }

.monitor-live-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(220px,1.25fr); border:1px solid #dbe5f2; border-radius:9px; background:#f6f9fe; overflow:hidden; }
.monitor-live-summary > div { min-width:0; padding:13px 16px; border-right:1px solid #dbe5f2; }
.monitor-live-summary > div:last-child { border-right:0; }
.monitor-live-summary strong,.monitor-live-summary span { display:block; }
.monitor-live-summary strong { color:var(--text-strong); font-size:26px; font-variant-numeric:tabular-nums; }
.monitor-live-summary span { margin-top:3px; color:#617187; font-size:var(--font-caption); }
.monitor-feed-state strong { font-size:var(--font-small); }
.monitor-feed-state.good strong { color:#087854; }
.monitor-feed-state.bad strong { color:var(--red); }
.monitor-toolbar { margin-top:12px; display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(150px,.5fr) auto; gap:8px; align-items:end; }
.monitor-toolbar label { min-width:0; display:grid; gap:4px; color:var(--muted); font-size:var(--font-caption); }
.monitor-toolbar input,.monitor-toolbar select,.monitor-inline-control select { width:100%; min-height:36px; padding:0 9px; border:1px solid var(--line-strong); border-radius:7px; background:#fff; color:var(--text); }
.monitor-shown { margin:9px 0 7px; color:var(--muted); font-size:var(--font-caption); }
.monitor-call-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.monitor-call-card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.monitor-call-top { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.monitor-live-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:999px; background:var(--green-soft); color:#087854; font-size:var(--font-caption); font-weight:700; }
.monitor-live-pill i { width:6px; height:6px; border-radius:50%; background:var(--green); }
.monitor-direction { color:#496078; font-size:var(--font-caption); }
.monitor-extension { display:block; margin-top:10px; color:#255fc9; font-size:22px; line-height:1.15; overflow-wrap:anywhere; }
.monitor-party { display:block; min-height:37px; margin-top:5px; color:#4f6078; font-size:var(--font-small); overflow-wrap:anywhere; }
.monitor-call-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
.monitor-call-grid small,.monitor-call-grid strong { display:block; }
.monitor-call-grid small { color:var(--muted); font-size:var(--font-caption); }
.monitor-call-grid strong { margin-top:1px; color:var(--text-strong); font-size:var(--font-small); font-variant-numeric:tabular-nums; }
.monitor-media { margin-top:10px; padding-top:8px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:7px; color:var(--muted); font-size:var(--font-caption); }
.monitor-media.good span:first-child { color:#087854; font-weight:700; }
.monitor-media.warn span:first-child { color:#9a6510; font-weight:700; }
.monitor-details-button { margin-top:9px; }
.monitor-call-details { margin-top:9px; padding-top:9px; border-top:1px dashed var(--line-strong); }
.monitor-call-details dl { margin:0; display:grid; gap:5px; }
.monitor-call-details dl div { min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px; font-size:var(--font-caption); }
.monitor-call-details dt { color:var(--muted); }
.monitor-call-details dd { margin:0; overflow-wrap:anywhere; }
.monitor-call-details ul { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:5px; }
.monitor-call-details li { padding:6px; border-radius:6px; background:var(--panel-muted); }
.monitor-call-details li strong,.monitor-call-details li span { display:block; font-size:var(--font-caption); }
.monitor-call-details li span { margin-top:2px; color:var(--muted); }

.monitor-list { margin:0; padding:0; list-style:none; }
.monitor-list > li { min-width:0; min-height:54px; padding:9px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.monitor-list > li:last-child { border-bottom:0; }
.monitor-list li > div { min-width:0; }
.monitor-list strong,.monitor-list span { display:block; overflow-wrap:anywhere; }
.monitor-list strong { color:var(--text-strong); font-size:var(--font-small); }
.monitor-list span,.monitor-list time { margin-top:2px; color:var(--muted); font-size:var(--font-caption); }
.monitor-state { flex:0 0 auto; padding:3px 7px; border-radius:999px; }
.monitor-state.warn { color:#936012; background:var(--amber-soft); }
.monitor-clear { padding:12px; border-radius:8px; }
.monitor-clear strong,.monitor-clear span { display:block; }
.monitor-clear span { margin-top:3px; font-size:var(--font-small); }
.monitor-alert { margin-bottom:7px; padding:9px; border-radius:7px; font-size:var(--font-small); }
.monitor-alert.warn { color:#875912; background:var(--amber-soft); }
.monitor-inline-control { margin-bottom:8px; display:flex; justify-content:flex-end; }
.monitor-inline-control label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--font-caption); }
.monitor-inline-control select { width:auto; min-height:32px; }
.monitor-empty { grid-column:1 / -1; padding:28px 14px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--muted); text-align:center; }
.monitor-empty.compact { padding:16px 10px; border:0; }
.monitor-empty strong { display:block; color:var(--text-strong); }
.monitor-empty p { margin:4px 0 0; font-size:var(--font-small); }
.monitor-empty-layout { grid-column:1/-1; padding:28px; text-align:center; }
.monitor-empty-layout h2 { margin:0; color:var(--text-strong); font-size:18px; }
.monitor-empty-layout p { margin:5px 0 0; color:var(--muted); font-size:var(--font-small); }

.monitor-distribution { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.monitor-distribution li > div { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:var(--font-small); }
.monitor-distribution meter { height:7px; margin-top:3px; }
.monitor-bars { height:180px; display:flex; align-items:end; gap:3px; padding:8px 2px 24px; border-bottom:1px solid var(--line); }
.monitor-bar-wrap { position:relative; min-width:3px; height:100%; flex:1; display:flex; align-items:end; }
.monitor-bar-wrap i { width:100%; min-height:3px; border-radius:3px 3px 0 0; background:var(--blue); opacity:.82; }
.monitor-bar-wrap span { position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%); color:var(--muted); font-size:10px; white-space:nowrap; }

@media (max-width:1180px) {
  .monitor-size-compact { grid-column:span 6; }
  .monitor-call-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitor-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitor-live-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .monitor-feed-state { grid-column:1/-1; border-top:1px solid #dbe5f2; }
}
@media (max-width:760px) {
  .monitor-size-compact,.monitor-size-standard,.monitor-size-wide { grid-column:span 12; }
  .monitor-page-toolbar,.monitor-context { align-items:stretch; flex-direction:column; }
  .monitor-page-actions { width:100%; }
  .monitor-page-actions .btn { flex:1; }
  .monitor-catalog { grid-template-columns:minmax(0,1fr); }
  .monitor-call-list { grid-template-columns:minmax(0,1fr); }
  .monitor-live-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitor-live-summary > div:nth-child(2n) { border-right:0; }
  .monitor-feed-state { grid-column:1/-1; }
  .monitor-toolbar { grid-template-columns:minmax(0,1fr); }
  .monitor-toolbar .btn { width:100%; }
  .monitor-widget-controls label { width:100%; margin-left:0; justify-content:flex-end; }
  .monitor-editor-head { flex-direction:column; }
}
@media (max-width:430px) {
  .monitor-live-summary { grid-template-columns:minmax(0,1fr); }
  .monitor-live-summary > div { border-right:0; border-bottom:1px solid #dbe5f2; }
  .monitor-live-summary > div:last-child { border-bottom:0; }
  .monitor-period-form { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .monitor-period-form label:first-child { grid-column:1/-1; }
  .monitor-period-form input,.monitor-period-form select { width:100%; }
}