/* ============================================================
   DEVELOPER DASHBOARD / VERTICAL DRILL-DOWN (C2.5D-DASHBOARD-P4)
   ------------------------------------------------------------
   Own content stylesheet, consumes shared-ui/tokens.css var(...) only
   -- no new colors/spacing/radii values defined here (task spec §15).
   ============================================================ */

.dv-root { padding: 24px 28px 56px; max-width: 1100px; }

.dv-head { margin-bottom: 18px; }
.dv-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--ink); }
.dv-lead { margin: 0; font-size: 13px; color: var(--ink-faint, var(--ink-muted)); max-width: 640px; }

.dv-breadcrumb {
  padding: 6px 0 16px;
  font-size: 12px;
  color: var(--ink-faint, var(--ink-muted));
}
.dv-breadcrumb a { color: var(--accent); text-decoration: none; }
.dv-breadcrumb a:hover { text-decoration: underline; }
.dv-breadcrumb-sep { margin: 0 6px; opacity: 0.6; }

.dv-section-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint, var(--ink-muted));
}

.dv-domains, .dv-orgs, .dv-org-detail { margin-bottom: 28px; }
.dv-domains.hidden, .dv-orgs.hidden, .dv-org-detail.hidden { display: none; }

.dv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.dv-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dv-card-clickable { }
.dv-card-title { font-size: 14px; font-weight: 650; color: var(--ink); }

.dv-pill {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.dv-pill-connectable,
.dv-pill-vertical_installation,
.dv-pill-status-installed,
.dv-pill-status-active { background: var(--success-wash, rgba(61,214,140,0.15)); color: var(--success); }
.dv-pill-blocked_by_identity_p1,
.dv-pill-status-error { background: var(--danger-wash, rgba(255,107,107,0.15)); color: var(--danger); }
.dv-pill-status-unverified,
.dv-pill-status-disconnected,
.dv-pill-status-disabled { background: var(--surface-alt, transparent); color: var(--ink-muted); }

.dv-open-btn {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
}
.dv-open-btn:hover { border-color: var(--accent); color: var(--accent); }

.dv-empty, .dv-error {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-faint, var(--ink-muted));
  font-size: 13px;
}
.dv-error { border-style: solid; border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

@media (max-width: 760px) {
  .dv-root { padding: 18px 14px 44px; }
  .dv-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}