/* Dashboard mockups shown inside case-study articles: a stylised "screenshot"
   of the KPI/monitoring screens the operator actually sees, framed like an
   app window, with a Grafana-style light panel board inside. Not tied to any
   single demo — reusable across all areas. */

.dsh-shot {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 18px 40px -22px rgb(15 23 42 / .28);
  overflow: hidden;
}
.dsh-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.dsh-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.dsh-dot:nth-child(1) { background: #f87171; }
.dsh-dot:nth-child(2) { background: #fbbf24; }
.dsh-dot:nth-child(3) { background: #34d399; }
.dsh-bar-title {
  margin-left: 6px;
  font: 600 12px var(--sans);
  color: #64748b;
  letter-spacing: .01em;
}
.dsh-body { padding: 0; }

.dsh-caption { margin: 10px 2px 0; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.dsh-caption b { display: block; color: var(--ink, #0f172a); font-weight: 600; margin-bottom: 3px; }

/*--------------------------------------------------------------
# Grafana-style panel board (light theme)
--------------------------------------------------------------*/
.gf-board {
  --gf-bg: #f4f5f7;
  --gf-panel: #ffffff;
  --gf-border: #e2e6eb;
  --gf-text: #1a2733;
  --gf-muted: #6b7785;
  --gf-green: #2f9e44;
  --gf-yellow: #f08c00;
  --gf-red: #e03131;
  --gf-blue: #1971c2;
  --gf-purple: #9c36b5;
  background: var(--gf-bg);
  padding: 12px;
}

.gf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.gf-topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 12.5px var(--sans);
  color: var(--gf-text);
  min-width: 0;
}
.gf-topbar-title span.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-live {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gf-green);
  box-shadow: 0 0 0 0 rgb(115 191 105 / .5);
  animation: gf-pulse 2s infinite;
}
@keyframes gf-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(115 191 105 / .5); }
  70%  { box-shadow: 0 0 0 6px rgb(115 191 105 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(115 191 105 / 0); }
}
.gf-topbar-range {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 10.5px var(--sans);
  color: var(--gf-muted);
  background: #eef1f4;
  border: 1px solid var(--gf-border);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}
.gf-topbar-range i { font-size: 10px; }

.gf-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 7px;
  margin-bottom: 7px;
}

.gf-panel {
  background: var(--gf-panel);
  border: 1px solid var(--gf-border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  overflow: hidden;
}
.gf-panel.full { margin-bottom: 7px; }
.gf-panel.full:last-child { margin-bottom: 0; }

.gf-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 9px;
  font: 600 10.5px var(--sans);
  color: var(--gf-muted);
  border-bottom: 1px solid var(--gf-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gf-panel-h span { overflow: hidden; text-overflow: ellipsis; }
.gf-panel-h i { opacity: .45; font-size: 10px; flex: none; }

.gf-panel-b { padding: 7px 9px 8px; }

/* stat panel */
.gf-stat-v {
  font: 700 19px/1.15 var(--sans);
  color: var(--gf-text);
  font-variant-numeric: tabular-nums;
}
.gf-stat-v.c-green  { color: var(--gf-green); }
.gf-stat-v.c-yellow { color: var(--gf-yellow); }
.gf-stat-v.c-red    { color: var(--gf-red); }
.gf-stat-v.c-blue   { color: var(--gf-blue); }
.gf-stat-v.c-purple { color: var(--gf-purple); }

.gf-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 600 10.5px var(--sans);
  margin-top: 2px;
}
.gf-stat-delta.up    { color: var(--gf-green); }
.gf-stat-delta.down  { color: var(--gf-red); }
.gf-stat-delta.flat  { color: var(--gf-muted); }
.gf-stat-delta i { font-size: 12px; }

.gf-stat-spark { margin-top: 5px; line-height: 0; }
.gf-stat-spark svg { display: block; width: 100%; height: 30px; }

/* timeseries panel */
.gf-chart svg { display: block; width: 100%; height: auto; }
.gf-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  font: 500 10px var(--sans);
  color: var(--gf-muted);
}
.gf-legend-item { display: flex; align-items: center; gap: 5px; }
.gf-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* gauge panel */
.gf-gauges {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 0;
}
.gf-gauge { display: flex; flex-direction: column; align-items: center; }
.gf-gauge svg { display: block; }
.gf-gauge-text { font: 700 15px var(--sans); fill: var(--gf-text); }
.gf-gauge-label {
  margin-top: 4px;
  font: 500 10.5px var(--sans);
  color: var(--gf-muted);
  text-align: center;
}

/* table panel */
.gf-table-rows { display: flex; flex-direction: column; }
.gf-trow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gf-border);
}
.gf-trow:last-child { border-bottom: none; }
.gf-trow-main { display: flex; flex-direction: column; min-width: 0; }
.gf-trow-name { font: 600 11.5px var(--sans); color: var(--gf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-trow-meta { font: 400 10px var(--sans); color: var(--gf-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-tpill { flex: none; font: 600 10px var(--sans); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.gf-tpill.ok   { background: rgb(115 191 105 / .15); color: var(--gf-green); }
.gf-tpill.warn { background: rgb(255 152 48 / .15); color: var(--gf-yellow); }
.gf-tpill.bad  { background: rgb(242 73 92 / .15); color: var(--gf-red); }
.gf-tpill.mut  { background: rgb(142 146 151 / .15); color: var(--gf-muted); }

@media (max-width: 575px) {
  .gf-stats-row { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .gf-stat-v { font-size: 17px; }
}