/* ============================================================
   dashboard.css — faithful recreation of the real PMOx
   product dashboard, used inside the landing "live demo".
   Mirrors the app: alerts panel, info cards w/ status pills,
   health readout, semi-donut gauges, bar charts.
   ============================================================ */
.db {
  --d-red:   #E11D48;
  --d-amber: #F59E0B;
  --d-green: #16A34A;
  --d-blue:  #2563EB;
  --d-gray:  #5B6577;
  --d-cyan:  #06B6D4;
  font-family: var(--body);
  color: var(--text);
}

/* panel base shared by every dashboard card */
.db-panel {
  background: #0C0F17;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 16px 18px;
}

/* ---- header ---- */
.db-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.db-head .ic { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  background: color-mix(in oklab, var(--d-cyan) 16%, transparent); border: 1px solid color-mix(in oklab, var(--d-cyan) 34%, transparent); }
.db-head .ic svg { width: 20px; height: 20px; stroke: var(--d-cyan); }
.db-head .ht { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; }
.db-head .hs { font-size: 13px; color: var(--text-3); margin-top: 1px; }
.db-pills { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- status pill ---- */
.pill { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill.red    { background: var(--d-red);   color: #1A0709; }
.pill.amber  { background: var(--d-amber); color: #1A1303; }
.pill.green  { background: var(--d-green); color: #04130C; }
.pill.blue   { background: var(--d-blue);  color: #050E1E; }
.pill.cyan   { background: var(--d-cyan);  color: #04161A; }
.pill.gray   { background: var(--d-gray);  color: #E7ECF5; }
.pill.outline-cyan { background: color-mix(in oklab, var(--d-cyan) 18%, transparent); color: var(--d-cyan); border: 1px solid color-mix(in oklab, var(--d-cyan) 40%, transparent); }

/* ---- section label w/ count ---- */
.db-lbl { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); }
.db-lbl .cnt { font-size: 11px; font-weight: 700; color: #1A0709; background: var(--d-red); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; letter-spacing: 0; }
.db-lbl .cnt.cyan { background: var(--d-cyan); color: #04161A; }
.db-viewall { margin-left: auto; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-cyan); background: color-mix(in oklab, var(--d-cyan) 14%, transparent); padding: 4px 10px; border-radius: 999px; cursor: pointer; }

/* ---- alerts ---- */
.db-alerts { border: 1px solid color-mix(in oklab, var(--d-red) 32%, transparent); background: color-mix(in oklab, var(--d-red) 7%, #0C0F17); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.db-alerts .db-lbl { color: var(--d-red); margin-bottom: 12px; }
.db-alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 9px; }
.db-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0,0,0,0.28); border: 1px solid var(--border-soft); border-radius: 9px; padding: 11px 13px; }
.db-alert .t { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- info cards ---- */
.db-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.db-info .card { background: #0C0F17; border: 1px solid var(--border-soft); border-radius: 13px; padding: 15px 15px 17px; display: flex; flex-direction: column; }
.db-info .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.db-info .v { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 9px 0 2px; letter-spacing: -0.01em; }
.db-info .s { font-size: 12px; color: var(--text-3); }
.db-info .pill { margin-top: 13px; align-self: flex-start; }

/* ---- main grid (3-up rows) ---- */
.db-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin-bottom: 14px; }
.db-card-h { display: flex; align-items: center; margin-bottom: 14px; }

/* ---- health list ---- */
.db-health { display: flex; flex-direction: column; gap: 12px; }
.db-health .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.db-health .k { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.db-health .k .d { width: 7px; height: 7px; border-radius: 50%; background: var(--d-cyan); box-shadow: 0 0 8px var(--d-cyan); }
.db-health .val { font-size: 13px; color: var(--text-2); text-align: right; }

/* ---- gauge ---- */
.db-gauge { display: flex; flex-direction: column; align-items: center; }
.db-gauge svg { width: 100%; max-width: 210px; height: auto; }
.db-gauge .seg { transition: stroke-dashoffset 1.1s var(--ease) var(--gd, 0ms); }
.db-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 14px; margin-top: 10px; }
.db-legend .item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.db-legend .sq { width: 9px; height: 9px; border-radius: 3px; }

/* ---- bar chart ---- */
.db-bars { position: relative; height: 122px; padding-left: 22px; }
.db-bars .axis { position: absolute; left: 0; top: 0; bottom: 18px; width: 100%; }
.db-bars .gl { position: absolute; left: 22px; right: 0; border-top: 1px dashed var(--border-soft); }
.db-bars .yt { position: absolute; left: 0; font-size: 9.5px; color: var(--text-3); transform: translateY(-50%); }
.db-bars .cols { position: absolute; left: 22px; right: 0; top: 0; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; }
.db-bars .col { flex: 1 1 0; max-width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.db-bars .bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--c); height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease) var(--bd, 0ms); }
.db-bars .bv { font-size: 10.5px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }

/* reveal trigger */
.db.in .db-bars .bar { transform: scaleY(1); }

/* responsive inside the preview */
@media (max-width: 620px) {
  .db-info { grid-template-columns: repeat(2, 1fr); }
}