/**
 * VulNova Dashboard Styles
 *
 * Design Philosophy: Calm Technology, Progressive Disclosure
 * 70%+ neutral colors, amber for warnings, red only for active exploits/SLA breach
 * All classes prefixed with `db-` to avoid collisions with shared styles.
 */

/* ============================================================================
   GLOBAL WILDCARD OVERRIDES
   modern.css sets [class*="card"] { border-radius: 0.75rem }
   theme.css sets  [class*="card"] { border: 1px solid var(--vn-border-subtle) !important }
   Both match our db- prefixed cards. Override them here in one place.
   ============================================================================ */

.db-hero-card,
.db-card,
.db-action-card,
.db-action-calm {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--vn-border-radius-md) !important;
}

/* ============================================================================
   SKELETON LOADING TOGGLE
   body.db-loading shows skeleton placeholders, hides real content.
   ============================================================================ */

body.db-loading .db-real-content { display: none !important; }
body.db-loading .db-skeleton-content { display: block !important; }
body:not(.db-loading) .db-skeleton-content { display: none !important; }
body:not(.db-loading) .db-real-content { display: block !important; }

/* Skeleton shape variants */
.db-skeleton-hero { height: 120px; border-radius: var(--vn-border-radius-md); }
.db-skeleton-breakdown { height: 240px; border-radius: var(--vn-border-radius-md); }
.db-skeleton-action { height: 88px; border-radius: var(--vn-border-radius-md); }
.db-skeleton-detail { height: 280px; border-radius: var(--vn-border-radius-md); }
.db-skeleton-secondary { height: 220px; border-radius: var(--vn-border-radius-md); }

/* ============================================================================
   SECTION LAYOUT
   ============================================================================ */

.db-section {
  margin-bottom: var(--vn-sp-6);
}

.db-section-title {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vn-sp-4);
}

/* ============================================================================
   SHARED CARD BASE
   ============================================================================ */

.db-card {
  padding: var(--vn-modern-gap-md) var(--vn-sp-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--vn-border-radius-md);
}

.db-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--vn-sp-4);
}

.db-card__title {
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
}

.db-card__link {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  color: var(--vn-accent-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.db-card__link:hover {
  text-decoration: underline;
}

/* ============================================================================
   ROW 1: HERO METRICS (4 large clickable cards)
   UX: Hick's Law (max 4), Fitt's Law (large targets), Goal-Gradient (links)
   ============================================================================ */

.db-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vn-modern-gap-md);
}

.db-hero-card {
  padding: var(--vn-modern-gap-md) var(--vn-sp-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--vn-border-radius-md);
  cursor: pointer;
  transition: background var(--vn-modern-duration) var(--vn-modern-ease);
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}

.db-hero-card:hover {
  background: var(--glass-bg-hover);
}

.db-hero-card__label {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-muted);
  margin-bottom: var(--vn-sp-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-hero-card__label i,
.db-hero-card__label svg {
  width: 14px;
  height: 14px;
}

.db-hero-card__value {
  font-size: var(--vn-hero-metric-size);
  font-weight: var(--vn-hero-metric-weight);
  color: var(--vn-text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.db-hero-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  margin-top: var(--vn-sp-2);
  padding: 2px 8px;
  border-radius: var(--vn-border-radius-full);
}

.db-hero-card__trend i,
.db-hero-card__trend svg {
  width: 12px;
  height: 12px;
}

.db-trend--down {
  color: var(--vn-success);
  background: rgba(52, 184, 127, 0.2);
}

.db-trend--up {
  color: var(--vn-destructive);
  background: rgba(226, 90, 90, 0.2);
}

.db-trend--neutral {
  color: var(--vn-text-muted);
  background: var(--vn-surface);
}

.db-hero-card__sub {
  font-size: var(--vn-font-small);
  color: var(--vn-text-muted);
  margin-top: var(--vn-sp-1);
}

/* Conditional severity coloring */
.db-hero-card--warning .db-hero-card__value {
  color: var(--vn-warning);
}

.db-hero-card--danger .db-hero-card__value {
  color: var(--vn-severity-critical);
}

/* ============================================================================
   ROW 2: BREAKDOWN (Severity bars + Trend chart)
   UX: Law of Praegnanz (simple bars > pie charts), Progressive Disclosure
   ============================================================================ */

.db-breakdown-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--vn-modern-gap-md);
}

/* Severity horizontal bars */
.db-severity-bars {
  display: flex;
  flex-direction: column;
  gap: var(--vn-sp-3);
}

.db-severity-row {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-3);
  cursor: pointer;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--vn-border-radius-md);
  transition: background var(--vn-transition-fast);
}

.db-severity-row:hover {
  background: var(--vn-surface-hover);
}

.db-severity-row__label {
  width: 64px;
  font-size: 13px;
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-secondary);
  flex-shrink: 0;
}

.db-severity-row__bar-track {
  flex: 1;
  height: 8px;
  background: var(--vn-progress-track);
  border-radius: var(--vn-border-radius-full);
  overflow: hidden;
}

.db-severity-row__bar-fill {
  height: 100%;
  border-radius: var(--vn-border-radius-full);
  transition: width 800ms var(--vn-modern-ease);
  width: 0;
}

.db-severity-row__count {
  width: 36px;
  text-align: right;
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Trend chart */
.db-trend-chart-wrapper {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.db-trend-toggle {
  display: flex;
  gap: 2px;
  background: var(--vn-surface);
  border-radius: var(--vn-border-radius-md);
  padding: 2px;
}

.db-trend-toggle button {
  padding: 4px 10px;
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  border: none;
  background: transparent;
  color: var(--vn-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--vn-transition-fast);
}

.db-trend-toggle button.active {
  background: var(--vn-surface-elevated);
  color: var(--vn-accent-primary);
}

.db-trend-toggle button:hover:not(.active) {
  color: var(--vn-text-primary);
}

/* ============================================================================
   ROW 3: ACTION CARDS (conditional, only shown when count > 0)
   UX: Zeigarnik Effect (incomplete tasks), Von Restorff (color only here)
   ============================================================================ */

.db-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vn-modern-gap-md);
}

.db-action-card {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-4);
  padding: var(--vn-sp-4) var(--vn-sp-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--vn-border-radius-md);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--vn-modern-duration) var(--vn-modern-ease);
}

.db-action-card:hover {
  background: var(--glass-bg-hover);
}

/* Hide cards when count is 0 */
.db-action-card[data-count="0"] {
  display: none;
}

.db-action-card__indicator {
  width: 4px;
  height: 48px;
  border-radius: 2px;
  flex-shrink: 0;
}

.db-action-card__indicator--warning {
  background: var(--vn-warning);
}

.db-action-card__indicator--danger {
  background: var(--vn-destructive);
}

.db-action-card__body {
  flex: 1;
  min-width: 0;
}

.db-action-card__metric {
  font-size: 20px;
  font-weight: var(--vn-weight-bold);
  color: var(--vn-text-primary);
  line-height: 1.1;
}

.db-action-card__title {
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  margin-top: 2px;
}

.db-action-card__desc {
  font-size: var(--vn-font-small);
  color: var(--vn-text-muted);
  margin-top: 2px;
}

.db-action-card__cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: var(--vn-weight-medium);
  color: var(--vn-accent-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.db-action-card__cta i,
.db-action-card__cta svg {
  width: 14px;
  height: 14px;
}

/* All-clear state when no action cards are visible */
.db-action-calm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vn-sp-3);
  padding: var(--vn-sp-8) var(--vn-sp-6);
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--vn-border-radius-md);
}

.db-action-calm__icon {
  color: var(--vn-success);
}

.db-action-calm__title {
  font-size: 16px;
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  margin: 0;
}

.db-action-calm__desc {
  font-size: 13px;
  color: var(--vn-text-muted);
  margin: 0;
  max-width: 360px;
}

/* ============================================================================
   ROW 4: DRILL-DOWN (Top CVEs + Department Risk Scores)
   UX: Progressive Disclosure (below fold), Law of Praegnanz (simple tables)
   ============================================================================ */

.db-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vn-modern-gap-md);
}

/* CVE table */
.db-cve-table {
  width: 100%;
}

.db-cve-row {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--vn-border);
  gap: var(--vn-sp-3);
  transition: background var(--vn-transition-fast);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.db-cve-row:last-child {
  border-bottom: none;
}

.db-cve-row:hover {
  background: var(--vn-surface-hover);
  border-radius: var(--vn-border-radius-md);
}

.db-cve-id {
  font-size: 13px;
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-accent-primary);
  min-width: 140px;
}

.db-cve-name {
  flex: 1;
  font-size: 13px;
  color: var(--vn-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-cve-devices {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  background: var(--vn-surface);
  padding: 2px 10px;
  border-radius: var(--vn-border-radius-full);
  white-space: nowrap;
}

.db-cve-severity {
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-semibold);
  padding: 2px 10px;
  border-radius: var(--vn-border-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-cve-severity--critical { background: rgba(229, 115, 115, 0.15); color: var(--vn-severity-critical); }
.db-cve-severity--high { background: rgba(255, 152, 0, 0.15); color: var(--vn-severity-high); }
.db-cve-severity--medium { background: rgba(255, 213, 79, 0.15); color: var(--vn-severity-medium); }
.db-cve-severity--low { background: rgba(129, 199, 132, 0.15); color: var(--vn-severity-low); }

/* Department risk scores */
.db-dept-list {
  display: flex;
  flex-direction: column;
  gap: var(--vn-sp-2);
}

.db-dept-row {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-3);
  padding: 8px;
  border-radius: var(--vn-border-radius-md);
  transition: background var(--vn-transition-fast);
  cursor: pointer;
}

.db-dept-row:hover {
  background: var(--vn-surface-hover);
}

.db-dept-name {
  width: 100px;
  font-size: 13px;
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-primary);
}

.db-dept-bar-track {
  flex: 1;
  height: 6px;
  background: var(--vn-progress-track);
  border-radius: var(--vn-border-radius-full);
  overflow: hidden;
}

.db-dept-bar-fill {
  height: 100%;
  border-radius: var(--vn-border-radius-full);
  transition: width 800ms var(--vn-modern-ease);
}

.db-dept-score {
  width: 36px;
  text-align: right;
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.db-dept-badge {
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-semibold);
  padding: 2px 8px;
  border-radius: var(--vn-border-radius-full);
  min-width: 60px;
  text-align: center;
}

.db-dept-badge--critical { background: rgba(229, 115, 115, 0.15); color: var(--vn-severity-critical); }
.db-dept-badge--high { background: rgba(255, 152, 0, 0.15); color: var(--vn-severity-high); }
.db-dept-badge--medium { background: rgba(255, 213, 79, 0.15); color: var(--vn-severity-medium); }
.db-dept-badge--low { background: rgba(129, 199, 132, 0.15); color: var(--vn-severity-low); }

/* ============================================================================
   ROW 5: SECONDARY INSIGHTS (Vuln Age + Risk Accepted + Threat Feed)
   UX: Tesler's Law (minimal complexity), Aesthetic Usability
   ============================================================================ */

.db-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--vn-modern-gap-md);
}

/* Mini stat rows */
.db-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-mini-stat__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.db-mini-stat__label {
  color: var(--vn-text-secondary);
}

.db-mini-stat__value {
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  font-variant-numeric: tabular-nums;
}

.db-mini-stat__row--dim {
  opacity: 0.35;
}

.db-mini-stat__divider {
  height: 1px;
  background: var(--vn-border);
  margin: 4px 0;
}

/* Risk Accepted center metric */
.db-risk-accepted-hero {
  text-align: center;
  padding: 8px 0 16px;
}

.db-risk-accepted-hero__value {
  font-size: 2rem;
  font-weight: var(--vn-weight-metric);
  color: var(--vn-text-primary);
}

.db-risk-accepted-hero__label {
  font-size: var(--vn-font-small);
  color: var(--vn-text-muted);
}

.db-risk-accepted-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vn-sp-2);
  text-align: center;
}

.db-risk-accepted-grid__count {
  font-size: 16px;
  font-weight: var(--vn-weight-semibold);
}

.db-risk-accepted-grid__label {
  font-size: var(--vn-font-micro);
  color: var(--vn-text-muted);
}

/* Threat feed items */
.db-threat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--vn-border);
}

.db-threat-item:last-child {
  border-bottom: none;
}

.db-threat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.db-threat-dot--critical { background: var(--vn-severity-critical); }
.db-threat-dot--high { background: var(--vn-severity-high); }
.db-threat-dot--medium { background: var(--vn-severity-medium); }
.db-threat-dot--low { background: var(--vn-severity-low); }

.db-threat-title {
  font-size: 13px;
  color: var(--vn-text-primary);
  font-weight: var(--vn-weight-medium);
}

.db-threat-meta {
  font-size: var(--vn-font-micro);
  color: var(--vn-text-muted);
  margin-top: 2px;
}

/* ============================================================================
   INTEGRATION COVERAGE GRID
   ============================================================================ */

.db-skeleton-integration { height: 200px; border-radius: var(--vn-border-radius-md); }

.db-integration-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--vn-sp-3);
}

.db-integration-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--vn-border-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--vn-transition-fast);
}

.db-integration-tile:hover {
  background: var(--vn-surface-hover);
}

.db-integration-tile__icon-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-integration-tile__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
}

.db-cov-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
}

.db-cov-status--active { background: var(--vn-success); }
.db-cov-status--inactive { background: var(--vn-destructive); }

.db-integration-tile__name {
  font-size: 11px;
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-secondary);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-integration-tile__bar-track {
  width: 100%;
  height: 4px;
  background: var(--vn-progress-track);
  border-radius: var(--vn-border-radius-full);
  overflow: hidden;
}

.db-integration-tile__bar-fill {
  height: 100%;
  border-radius: var(--vn-border-radius-full);
  width: 0;
  transition: width 800ms var(--vn-modern-ease);
}

.db-cov--full    { background: var(--vn-success); }
.db-cov--partial { background: var(--vn-warning); }
.db-cov--low     { background: var(--vn-destructive); }

.db-integration-tile__count {
  font-size: 11px;
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   HERO CARD LEFT-BORDER ACCENTS
   ============================================================================ */

.db-hero-card--accent-critical {
  border-left: 3px solid var(--vn-severity-critical) !important;
}

.db-hero-card--accent-high {
  border-left: 3px solid var(--vn-severity-high) !important;
}

.db-hero-card--accent-warning {
  border-left: 3px solid var(--vn-warning) !important;
}

.db-hero-card--accent-accent {
  border-left: 3px solid var(--vn-accent-primary) !important;
}

/* ============================================================================
   SEVERITY BAR CLICK AFFORDANCE
   ============================================================================ */

.db-severity-row__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
  color: var(--vn-text-muted);
  transition: opacity var(--vn-transition-fast);
}

.db-severity-row:hover .db-severity-row__arrow {
  opacity: 0.6;
}

/* ============================================================================
   SKELETON-TO-CONTENT FADE
   ============================================================================ */

@keyframes db-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body:not(.db-loading) .db-real-content {
  animation: db-fade-in 300ms ease-out;
}

/* ============================================================================
   ANIMATION (reuses existing keyframes from modern.css)
   ============================================================================ */

.db-animate {
  animation: vn-modern-fade-in-up var(--vn-modern-duration-slow) var(--vn-modern-ease) backwards;
}

.db-stagger-1 { animation-delay: var(--vn-stagger-1); }
.db-stagger-2 { animation-delay: var(--vn-stagger-2); }
.db-stagger-3 { animation-delay: var(--vn-stagger-3); }
.db-stagger-4 { animation-delay: var(--vn-stagger-4); }
.db-stagger-5 { animation-delay: var(--vn-stagger-5); }
.db-stagger-6 { animation-delay: var(--vn-stagger-6); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1024px) {
  .db-hero-grid { grid-template-columns: repeat(2, 1fr); }
  .db-breakdown-grid { grid-template-columns: 1fr; }
  .db-action-grid { grid-template-columns: 1fr; }
  .db-detail-grid { grid-template-columns: 1fr; }
  .db-secondary-grid { grid-template-columns: 1fr; }
  .db-integration-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .db-hero-grid { grid-template-columns: 1fr; }
  .db-integration-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.db-hero-card:focus-visible,
.db-action-card:focus-visible,
.db-severity-row:focus-visible,
.db-cve-row:focus-visible,
.db-dept-row:focus-visible {
  outline: 2px solid var(--vn-accent-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .db-animate,
  body:not(.db-loading) .db-real-content {
    animation: none !important;
  }

  .db-severity-row__bar-fill,
  .db-dept-bar-fill,
  .db-hero-card,
  .db-action-card,
  .db-severity-row,
  .db-cve-row,
  .db-severity-row__arrow {
    transition: none !important;
  }
}