/* === Camera card tools & KPI styles === */
.icon-btn-sm {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:.65rem;
  background:#ffffff; border:1px solid rgba(59,130,246,.25); color:#1e3a8a;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.icon-btn-sm svg { width:17px; height:17px; stroke: currentColor; stroke-width: 2; fill: none; }
.icon-btn-sm:hover { transform: translateY(-1px); background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.55); box-shadow: 0 6px 18px rgba(59,130,246,.20); color:#1d4ed8; }
.dark .icon-btn-sm { background:#0b1320; border-color: rgba(96,165,250,.25); color:#93c5fd; }
.dark .icon-btn-sm:hover { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.55); box-shadow: 0 8px 22px rgba(0,0,0,.45); color:#60a5fa; }

.card-toolbar { position:absolute; top:.5rem; left:.5rem; display:flex; gap:.35rem; z-index:10; }

.kpi-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kpi-card {
  background: rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.06); border-radius: .9rem;
  padding: .9rem; display:flex; flex-direction:column; gap:.25rem;
}
.dark .kpi-card { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.09); }
.kpi-title { font-size:.75rem; opacity:.75; }
.kpi-value { font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
.kpi-sub { font-size:.75rem; opacity:.7; }

.chart-card { background: rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1rem; }
.dark .chart-card { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.09); }
.chart-wrap { position:relative; width:100%; height:320px; }