/* ==========================================================================
   Cards — Clean Section System
   Reusable card containers used across dashboard, quiz, and settings.
   ========================================================================== */

/* Main container for clean, elegant sections */
.clean-section {
  background: var(--dq-bg-card);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  margin-bottom: var(--dq-space-4);
  overflow: hidden;
  box-shadow: none;
}

/* Overflow protection for content-heavy cards */
.clean-section {
  overflow-x: auto;
}

/* Optional header for sections */
.clean-section-header {
  background: var(--dq-bg);
  padding: var(--dq-space-3) var(--dq-space-4);
  border-bottom: 1px solid var(--dq-border);
  font-weight: var(--dq-font-weight-semibold);
  font-size: var(--dq-font-size-sm);
  color: var(--dq-gray-600);
}

/* Body content area */
.clean-section-body {
  padding: var(--dq-space-4);
}

/* Variant without header for simpler sections */
.clean-section-simple {
  background: var(--dq-bg-card);
  border: 1px solid var(--dq-border);
  border-radius: var(--dq-radius-md);
  margin-bottom: var(--dq-space-4);
  padding: var(--dq-space-4);
  box-shadow: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .clean-section-header {
    padding: var(--dq-space-3) var(--dq-space-3);
    font-size: var(--dq-font-size-xs);
  }

  .clean-section-body {
    padding: var(--dq-space-3);
  }

  .clean-section-simple {
    padding: var(--dq-space-3);
  }
}

/* ==========================================================================
   Pill Toggle
   Compact radio-group toggle with rounded pill shape.
   ========================================================================== */

.dq-pill-toggle {
  display: inline-flex;
  background: var(--dq-gray-100);
  border-radius: var(--dq-radius-full);
  padding: 2px;
  gap: 2px;
}

.dq-pill-toggle .btn-check { display: none; }

.dq-pill-option {
  padding: 0.25rem 0.75rem;
  font-size: var(--dq-font-size-sm);
  font-weight: var(--dq-font-weight-medium);
  color: var(--dq-text-muted);
  border-radius: var(--dq-radius-full);
  cursor: pointer;
  transition: all var(--dq-transition-fast);
  line-height: 1.4;
  user-select: none;
}

.dq-pill-option:hover {
  color: var(--dq-text);
}

.btn-check:checked + .dq-pill-option {
  background: var(--dq-bg-card);
  color: var(--dq-primary);
  box-shadow: var(--dq-shadow-sm);
  font-weight: var(--dq-font-weight-semibold);
}

/* ==========================================================================
   Metric Card
   Clickable stat display used in dashboard analytics.
   ========================================================================== */

.metric-card {
  cursor: pointer;
  padding: 10px;
  border-radius: var(--dq-radius-md);
  transition: all var(--dq-transition-fast);
}

.metric-card:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.metric-card.active {
  background-color: var(--dq-primary-50);
  border: 2px solid rgba(0, 123, 255, 0.25); /* --dq-primary at 25% */
}

/* Metric delta indicators */
.metric-delta {
  margin: 0.25rem 0 0.5rem 0;
  min-height: 1.2rem;
}

.metric-delta small {
  font-weight: var(--dq-font-weight-medium);
  padding: 0.125rem 0.375rem;
  border-radius: var(--dq-radius-sm);
}

.metric-delta small.text-success {
  background: var(--dq-secondary-50);
}

.metric-delta small.text-danger {
  background: var(--dq-danger-50);
}

.metric-delta small.text-muted {
  background: var(--dq-gray-100);
}

/* Metric count sub-text */
.metric-counts {
  font-size: var(--dq-font-size-xs);
  font-weight: var(--dq-font-weight-normal);
}

@media (max-width: 767px) {
  .metric-delta {
    font-size: var(--dq-font-size-xs);
  }
}