/* ============================================================
   Dashboard Polish Slice
   ------------------------------------------------------------
   - Health Score Hero: circular gauge ring + trend subtitle
   - Parameter Card: stronger colored left border + status glow
   - Camera Card: rounded placeholder polish + LIVE badge dot
   - Responsive: 375px touch sizing + card stacking guarantees
   Loaded after dashboard-cards.css and dashboard-mobile.css so
   these rules win without !important when specificity matches.
   ============================================================ */

/* ── Health Score Hero ─────────────────────────────────── */
.health-score-card {
  /* slightly more presence: lift, ring border, and inset glow */
  border-radius: 16px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-left-width: 4px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.health-score-inner {
  gap: 22px;
}

.health-score-num-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Circular gauge ring around the score number */
.health-score-gauge {
  position: relative;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.health-score-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.health-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 9;
}

.health-ring-fill {
  fill: none;
  stroke: var(--teal, #00d4aa);
  stroke-width: 9;
  stroke-linecap: round;
  /* circumference of r=52 is ~326.7. Use that as dasharray. */
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.5s;
  filter: drop-shadow(0 0 6px rgba(0, 212, 170, 0.35));
}

.health-ring-fill.excellent { stroke: var(--green,  #4ade80); filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.45)); }
.health-ring-fill.good      { stroke: var(--teal,   #00d4aa); filter: drop-shadow(0 0 6px rgba(0, 212, 170, 0.45)); }
.health-ring-fill.fair      { stroke: var(--yellow, #fbbf24); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45)); }
.health-ring-fill.attention { stroke: var(--red,    #ef4444); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.55)); }

.health-score-gauge-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.health-score-gauge-text .health-score-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 2px;
  opacity: 0.85;
}

.health-score-gauge-text .health-score-num {
  font-size: 2.6rem;
  margin-top: 0;
}

.health-score-trend {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin: -4px 0 8px;
  min-height: 0; /* let it collapse when empty */
}

.health-score-trend:empty { display: none; }

.health-score-trend strong {
  color: var(--text-bright);
  font-weight: 700;
}

/* ── Parameter Cards: stronger left border accent + glow ─ */
.param-card {
  /* Keep top/right/bottom border subtle, accent the LEFT */
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: rgba(255,255,255,0.10);
  /* gradient sheen behind value */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}

.param-card.status-ok   { border-left-color: var(--green,  #4ade80); }
.param-card.status-warn { border-left-color: var(--yellow, #fbbf24); }
.param-card.status-crit { border-left-color: var(--red,    #ef4444); }

.param-card.status-warn { box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,191,36,0.10) inset; }
.param-card.status-crit { box-shadow: 0 0 14px rgba(239,68,68,0.18), 0 0 0 1px rgba(239,68,68,0.18) inset; }

/* Slightly bigger value number for hero quality */
.param-card .param-value {
  font-size: 2rem;
}

/* ── Camera overview/feed cards: placeholder + LIVE polish ── */
.cam-ov-card,
.cam-feed-card,
.demo-cam-preview-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}

.cam-ov-card { transition: transform .2s, box-shadow .2s, border-color .2s; }

.cam-ov-card:hover {
  box-shadow:
    0 12px 28px rgba(0,212,170,0.18),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.cam-ov-img,
.cam-feed-img-wrap {
  background: linear-gradient(180deg, #0a1426 0%, #050b18 100%);
}

/* LIVE badge — only adds when image is loaded (placeholder fallback unaffected) */
.cam-ov-img::after,
.cam-feed-img-wrap::after {
  content: '';
}

.cam-ov-img img[data-cam-ov-img] + .cam-ov-live-badge,
.cam-feed-img-wrap img[data-cam-img] + .cam-feed-live-badge {
  display: inline-flex;
}

/* Universal LIVE pill (CSS-only) overlaid on cam image — pure decoration */
.cam-ov-img::before,
.cam-feed-img-wrap::before {
  /* Disabled — the placeholder SVGs already contain a "LIVE · DEMO" pill.
     Keeping a CSS pseudo-element here would double up. Reserved selector. */
  content: none;
}

/* ── Responsive polish: 375px and below ────────────────── */
@media (max-width: 480px) {
  /* Health hero: stack vertically, tighter padding */
  .health-score-card { padding: 14px 14px 12px; }
  .health-score-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .health-score-num-block { flex-direction: row; gap: 12px; align-items: center; justify-content: flex-start; }
  .health-score-gauge { width: 96px; height: 96px; flex-shrink: 0; }
  .health-score-gauge-text .health-score-num { font-size: 2rem; }
  .health-score-gauge-text .health-score-icon { font-size: 1rem; }
  .health-score-lbl { text-align: left; }
  .health-score-detail { width: 100%; min-width: 0; }
  .health-status-title { font-size: 1rem; }
  .health-score-trend { font-size: 0.74rem; margin-bottom: 6px; }

  /* Parameter cards: keep 2 columns but make value bigger to read on phone */
  .params-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .param-card { padding: 12px 10px 0; }
  .param-card .param-value { font-size: 1.7rem; }
  .param-card .param-name  { font-size: 0.76rem; }

  /* Camera cards: 1 column for clean stacking */
  .cam-overview-grid { grid-template-columns: 1fr; }
  .cam-feed-grid     { grid-template-columns: 1fr; }
  #demo-camera-preview-grid { grid-template-columns: 1fr; }
}

/* Touch-friendly button sizes on phones (>= 44px tap target) */
@media (max-width: 480px) {
  .cam-ov-actions .btn-live-view,
  .cam-feed-btns .btn,
  .demo-write-btn {
    min-height: 44px;
    min-width: 44px;
    font-size: 0.82rem;
    padding: 0 14px;
  }
}

/* Prevent horizontal scroll on small viewports */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  .container { padding-left: 12px; padding-right: 12px; }
}