/* ============================================================
   OKY — App audit page (redesign)
   Pixel-perfect implementation of the Figma "Dashboard · App audit".

   Reuses the dashboard.css --d-* palette + the .ov page frame
   (.ov-active gutters, aura glow). All page-specific styling is
   prefixed `pg-apps-` so it can't collide with the shared classes.
   ============================================================ */

.pg-apps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }

/* ----------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------- */
.pg-apps-head { display: flex; flex-direction: column; gap: 4px; }
.pg-apps-title {
  font-family: var(--font-mont);
  font-weight: 700; font-size: 30px;
  line-height: 33px; letter-spacing: -0.025em;
  color: var(--d-ink);
  margin: 0;
}
.pg-apps-sub {
  font-family: var(--font-body);
  font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--d-muted);
  margin: 0;
}

/* ----------------------------------------------------------------
   METRIC CARDS — same surface language as the Overview .ov-metric*
   ---------------------------------------------------------------- */
.pg-apps-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .pg-apps-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pg-apps-metrics { grid-template-columns: 1fr; } }
.pg-apps-metric {
  background: var(--d-card);
  border: 1px solid rgba(229,229,229,0.55);
  border-radius: 18px;
  box-shadow: var(--d-shadow-soft);
  padding: 16px 18px;
  min-height: 100px;
  display: flex; flex-direction: column; gap: 8px;
}
.pg-apps-metric-label {
  font-family: var(--font-body);
  font-weight: 400; font-size: 12px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--d-muted);
}
.pg-apps-metric-value {
  font-family: var(--font-mont);
  font-weight: 700; font-size: 30px; line-height: 33px;
  color: var(--d-ink);
}
.pg-apps-metric-sub {
  font-family: var(--font-body);
  font-weight: 400; font-size: 13px; line-height: 18px;
  color: var(--d-muted);
}
.pg-apps-metric-sub.link    { color: var(--d-blue); }
.pg-apps-metric-sub.danger  { color: var(--d-danger-ink); }
.pg-apps-metric-sub.warn    { color: var(--d-warn-ink); }

/* ----------------------------------------------------------------
   GRID — Risk breakdown (left) + Analysis layers (right)
   ---------------------------------------------------------------- */
.pg-apps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.536fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 1040px) { .pg-apps-grid { grid-template-columns: 1fr; } }

.pg-apps-card {
  background: var(--d-card);
  border: 1px solid rgba(229,229,229,0.55);
  border-radius: 18px;
  box-shadow: var(--d-shadow-card);
  padding: 20px;
}
.pg-apps-card-title {
  font-family: var(--font-mont);
  font-weight: 600; font-size: 15px; letter-spacing: -0.025em;
  color: var(--d-ink); margin: 0 0 16px;
}

/* ----------------------------------------------------------------
   RISK BREAKDOWN — stacked bar + legend
   ---------------------------------------------------------------- */
.pg-apps-bar {
  display: flex; height: 10px;
  border-radius: 5px; overflow: hidden;
  background: var(--d-line);
  margin-bottom: 14px;
}
.pg-apps-bar-seg { height: 100%; transition: width .3s ease; }
.pg-apps-bar-seg.clean      { background: #16a34a; }
.pg-apps-bar-seg.suspicious { background: #f59e0b; }
.pg-apps-bar-seg.malicious  { background: #dc2626; }

.pg-apps-legend {
  display: flex; flex-wrap: wrap; gap: 22px;
}
.pg-apps-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 400; font-size: 13px; line-height: 1;
  color: var(--d-ink-soft);
}
.pg-apps-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pg-apps-legend-dot.clean      { background: #16a34a; }
.pg-apps-legend-dot.suspicious { background: #f59e0b; }
.pg-apps-legend-dot.malicious  { background: #dc2626; }

/* ----------------------------------------------------------------
   ANALYSIS LAYERS — status rows (dot + name + state)
   ---------------------------------------------------------------- */
.pg-apps-layers { display: flex; flex-direction: column; }
.pg-apps-layer {
  display: flex; align-items: center; gap: 12px;
  height: 35px;
}
.pg-apps-layer-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pg-apps-layer-dot.on  { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.pg-apps-layer-dot.off { background: #cfd6e0; }
.pg-apps-layer-name {
  flex: 1; min-width: 0;
  font-family: var(--font-body);
  font-weight: 400; font-size: 14px; line-height: 18px;
  color: var(--d-ink);
}
.pg-apps-layer-state {
  font-family: var(--font-body);
  font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--d-muted);
}
.pg-apps-layer-state.premium { color: var(--d-blue); }

/* ----------------------------------------------------------------
   UPGRADE BANNER — shown only on the free tier
   ---------------------------------------------------------------- */
.pg-apps-upgrade {
  display: flex; align-items: center; gap: 14px;
  background: var(--d-card);
  border: 1px solid rgba(21,93,252,0.18);
  border-radius: 18px;
  box-shadow: var(--d-shadow-card);
  padding: 16px 18px;
}
.pg-apps-upgrade-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  background: #eef3ff; color: var(--d-blue);
  display: grid; place-items: center;
}
.pg-apps-upgrade-body { flex: 1; min-width: 0; }
.pg-apps-upgrade-title {
  font-family: var(--font-mont);
  font-weight: 700; font-size: 16px; color: var(--d-ink);
  margin: 0 0 2px;
}
.pg-apps-upgrade-sub {
  font-family: var(--font-body);
  font-size: 13px; line-height: 18px; color: var(--d-muted); margin: 0;
}
.pg-apps-upgrade-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; flex-shrink: 0;
  border-radius: 9px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--d-blue-600); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  transition: background .15s;
}
.pg-apps-upgrade-btn:hover { background: #1d4fd0; }
@media (max-width: 620px) {
  .pg-apps-upgrade { flex-wrap: wrap; }
  .pg-apps-upgrade-btn { order: 3; width: 100%; }
}

/* ----------------------------------------------------------------
   EMPTY STATE — no scans yet (honest, no fabricated rows)
   ---------------------------------------------------------------- */
.pg-apps-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
  padding: 50px 24px;
}
.pg-apps-empty-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--d-safe-soft); color: var(--d-safe-ink);
  display: grid; place-items: center; margin-bottom: 8px;
}
.pg-apps-empty h4 {
  font-family: var(--font-mont); font-weight: 600; font-size: 17px;
  letter-spacing: -0.025em; color: var(--d-ink); margin: 0;
}
.pg-apps-empty p {
  font-family: var(--font-body); font-size: 13px; line-height: 19px;
  color: var(--d-muted); margin: 0; max-width: 380px;
}