/* ============================================================
   QUESTS — Quest Log, Rewards, Active Quests & Event History
   WhoDASH / Belmont Labs — BL-002
   ============================================================
   Sources consolidated from style.css:
     ~4960–5452   Primary quests block — tabs, overview stat
                  cards, most-rewarding card, trends canvas,
                  zone bars, quest log table + filters,
                  notable quests grid, reward quality pie +
                  legend, slot bars, reward gallery,
                  responsive breakpoints.
     ~7728–7744   .current-quest-card / .quest-complete
                  (canonical; repeated in many sections as
                   dashboard widget copy — defined here once)
     ~159828–160069  Quest card anatomy, quest event history
                  timeline, level distribution bars, active
                  quest responsive overrides.
     ~160072–160132  Enhanced quest stats grid + canvas
                  containers (secondary override block).
     ~162155–162192  Contrast fixes: .quest-stat-value,
                  .quest-stat-label, .zone-bar-count,
                  .quest-card .stat-value.
   NOTE: .legend-item/color/label/value scoped under
   .pie-legend (column-stack — same pattern as role/combat/
   progression). .stat-icon/value/label/sublabel defined
   here for the quests context (duplicated from generic;
   quests is the only section where these appear alongside
   .quest-stat-card without a stronger parent scope).
   .mrq-reward-line and .quest-reward-cell exist in JS
   templates but have no CSS — left for future definition.
   ============================================================ */

/* ============================================================
   CONTAINER & TABS
   ============================================================ */

.quest-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.quest-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid #e6eefb;
  padding-bottom: 0;
}

.quest-tab {
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #6e7f9b;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -2px;
}

.quest-tab:hover  { color: #2456a5; background: #f7fafc; }
.quest-tab.active { color: #2456a5; border-bottom-color: #3182ce; background: #eef4ff; }

.quest-tab-content        { display: none; }
.quest-tab-content.active { display: block; }

.quest-content-wrapper { margin-top: 24px; }

/* ============================================================
   OVERVIEW — STAT CARDS
   ============================================================ */

.quest-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.quest-stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  border: 1px solid #e6eefb;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.quest-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.12);
}

/* Stat inner elements (quest context) */
.quest-stat-card .stat-icon     { font-size: 2.5rem; margin-bottom: 0.75rem; }
.quest-stat-card .stat-value    { font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 0.5rem; }
.quest-stat-card .stat-label    { font-size: 0.9rem; color: #6b7280; font-weight: 500; }
.quest-stat-card .stat-sublabel { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }

/* Success variant */
.stat-card-success { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #22c55e !important; }
.stat-card-success .stat-value { color: #16a34a; }

/* Contrast overrides */
.quest-stat-value { color: #1e40af !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); }
.quest-stat-label { color: #475569 !important; font-weight: 600 !important; }
.quest-card .stat-value { color: #1e3a8a !important; font-weight: 700 !important; }

/* ============================================================
   MOST REWARDING QUEST CARD
   ============================================================ */

.most-rewarding-quest-card {
  background: linear-gradient(135deg, #ffe064 0%, #775f00 100%);
  border: 2px solid #fbbf24;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
  margin-bottom: 24px;
}

.most-rewarding-quest-card h3 { margin: 0 0 16px 0; font-size: 1.5rem; color: #92400e; }

.rewarding-quest-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 12px;
}

.rewarding-quest-details {
  display: flex;
  gap: 20px;
  justify-content: center;
  font-size: 1.1rem;
  color: #92400e;
  font-weight: 600;
}

/* ============================================================
   QUEST TRENDS CANVAS
   ============================================================ */

.quest-trends-card {
  background: #fff;
  border: 1px solid #e6eefb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.06);
}

.quest-trends-card h3 { margin: 0 0 20px 0; font-size: 1.25rem; color: #2456a5; font-weight: 700; }

.quest-trends-canvas,
.quest-timeline-canvas {
  width: 100%;
  height: auto;
  max-width: 1000px;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   QUESTS BY ZONE — ZONE BARS
   ============================================================ */

.quests-by-zone-section {
  background: #fff;
  border: 1px solid #e6eefb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.06);
}

.quests-by-zone-section h3 { margin: 0 0 20px 0; font-size: 1.25rem; color: #2456a5; font-weight: 700; }

.zone-bars { display: flex; flex-direction: column; gap: 12px; }

.zone-bar-container {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  align-items: center;
  gap: 12px;
}

.zone-bar-label { font-weight: 600; color: #374151; font-size: 0.95rem; }

.zone-bar-track {
  height: 24px;
  background: #e6eefb;
  border-radius: 12px;
  overflow: hidden;
}

.zone-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 12px;
  transition: width 0.5s ease-out;
}

.zone-bar-count {
  font-weight: 700;
  color: #1e40af !important;
  text-align: right;
}

/* ============================================================
   QUEST LOG TAB — FILTERS & TABLE
   ============================================================ */

.quest-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.quest-log-header h3 { margin: 0; font-size: 1.25rem; color: #2456a5; font-weight: 700; }

.quest-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.quest-search-input,
.level-input {
  padding: 8px 12px;
  border: 1px solid #d7e3fb;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #374151;
  background: #fff;
  transition: border-color 0.2s;
}

.quest-search-input { min-width: 220px; }
.level-input        { width: 90px; }

.quest-search-input:focus,
.level-input:focus {
  outline: none;
  border-color: #2456a5;
  box-shadow: 0 0 0 3px rgba(36, 86, 165, 0.1);
}

.quest-log-table-container {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #e6eefb;
  border-radius: 12px;
  margin-bottom: 24px;
}

.quest-log-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.quest-log-table thead {
  background: linear-gradient(135deg, #2456a5 0%, #1e4a8f 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.quest-log-table th {
  padding: 14px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quest-log-table tbody tr { border-bottom: 1px solid #e6eefb; transition: background 0.15s; }
.quest-log-table tbody tr:hover { background: #f7fafc; }
.quest-log-table td { padding: 12px; color: #374151; font-size: 0.9rem; }

/* ============================================================
   NOTABLE QUESTS
   ============================================================ */

.notable-quests-section {
  background: #fff;
  border: 1px solid #e6eefb;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.06);
}

.notable-quests-section h3 { margin: 0 0 20px 0; font-size: 1.25rem; color: #2456a5; font-weight: 700; }

.notable-quests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.notable-quest-card {
  background: #f7fafc;
  border: 1px solid #e6eefb;
  border-radius: 8px;
  padding: 16px;
}

.notable-quest-card h4     { margin: 0 0 12px 0; color: #2456a5; font-size: 1rem; }
.notable-quest-card ul     { list-style: none; padding: 0; margin: 0; }
.notable-quest-card li     { padding: 6px 0; color: #374151; font-size: 0.9rem; border-bottom: 1px solid #e6eefb; }
.notable-quest-card li:last-child { border-bottom: none; }

/* ============================================================
   REWARDS TAB — PIE, SLOT BARS, REWARD GALLERY
   ============================================================ */

.reward-quality-section,
.reward-slot-section,
.top-rewards-section {
  background: #fff;
  border: 1px solid #e6eefb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.06);
}

.reward-quality-section { display: flex; flex-direction: column; align-items: center; }

.reward-quality-section h3,
.reward-slot-section h3,
.top-rewards-section h3 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: #2456a5;
  font-weight: 700;
  align-self: flex-start;
}

.quality-pie-chart { margin-bottom: 20px; }

/* Legend scoped — column-stack */
.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

.pie-legend .legend-item  { display: flex; align-items: center; gap: 12px; }
.pie-legend .legend-color { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.pie-legend .legend-label { flex: 1; font-weight: 600; color: #374151; }
.pie-legend .legend-value { color: #6e7f9b; font-weight: 600; }

/* Slot bars */
.slot-bars { display: flex; flex-direction: column; gap: 12px; }

.slot-bar-container {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 12px;
}

.slot-bar-label { font-weight: 600; color: #374151; font-size: 0.9rem; }

.slot-bar-track {
  height: 24px;
  background: #e6eefb;
  border-radius: 12px;
  overflow: hidden;
}

.slot-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #3182ce 0%, #1e4a8f 100%);
  border-radius: 12px;
  transition: width 0.5s ease-out;
}

.slot-bar-count { font-weight: 700; color: #2456a5; text-align: right; }

/* Top reward gallery */
.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.reward-card {
  background: linear-gradient(135deg, #262b33 0%, #1e5275 100%);
  border: 1px solid #e6eefb;
  border-radius: 8px;
  padding: 12px;
}

.reward-name  { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.reward-count { font-size: 0.85rem; color: #6e7f9b; font-weight: 600; }

/* ============================================================
   ACTIVE QUEST CARDS (current quest log widget)
   ============================================================ */

.current-quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.current-quest-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s;
}

.current-quest-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }

.current-quest-card.quest-complete {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #22c55e;
}

.quest-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.quest-card-title { font-weight: 600; font-size: 1.05rem; color: #1f2937; flex: 1; }

.quest-complete-badge {
  background: #22c55e;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.quest-objectives { margin: 0.75rem 0; }

.objective-item {
  padding: 0.5rem;
  margin: 0.25rem 0;
  background: #f9fafb;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.objective-item.objective-complete { background: #d1fae5; color: #065f46; text-decoration: line-through; }
.objective-progress { margin-left: auto; font-weight: 600; color: #6366f1; }

.quest-card-footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.85rem;
}

/* ============================================================
   QUEST EVENT HISTORY TIMELINE
   ============================================================ */

.quest-event-history-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 12px;
}

.quest-event-timeline {
  max-height: 600px;
  overflow-y: auto;
  margin-top: 1rem;
  padding-right: 0.5rem;
}

.quest-event-timeline::-webkit-scrollbar       { width: 8px; }
.quest-event-timeline::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.quest-event-timeline::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.quest-event-timeline::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.quest-event-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #cbd5e1;
  transition: all 0.2s;
}

.quest-event-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.event-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 50%;
}

.event-content { flex: 1; min-width: 0; }
.event-title   { font-weight: 600; color: #1f2937; margin-bottom: 0.25rem; }

.event-kind {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #e5e7eb;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 0.25rem;
}

.event-detail {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #6b7280;
}

.event-time { font-size: 0.85rem; margin-top: 0.5rem; }

/* ============================================================
   QUEST LEVEL DISTRIBUTION BARS
   ============================================================ */

.quest-level-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.level-bars { margin-top: 1rem; }

.level-bar-container {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.level-bar-label { font-size: 0.9rem; font-weight: 600; color: #4b5563; }

.level-bar-track {
  height: 28px;
  background: #f1f5f9;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.level-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 14px;
  transition: width 0.5s ease;
}

.level-bar-count { text-align: right; font-weight: 600; color: #6366f1; }

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

@media (max-width: 768px) {
  .quest-stats-grid     { grid-template-columns: 1fr; }
  .quest-tabs           { flex-wrap: wrap; }
  .quest-tab            { flex: 1; min-width: 100px; }
  .notable-quests-grid  { grid-template-columns: 1fr; }

  .zone-bar-container,
  .slot-bar-container   { grid-template-columns: 150px 1fr 50px; }

  .current-quest-grid   { grid-template-columns: 1fr; }

  .quest-event-item     { flex-direction: column; gap: 0.75rem; }
  .event-icon           { width: 100%; height: 48px; }

  .level-bar-container  { grid-template-columns: 60px 1fr 50px; gap: 0.75rem; }
}