/* ============================================================
   MATH QUIZ APP - REPORT PAGE STYLES
   ============================================================
   Styles for report/quiz history page
   ============================================================ */

/* ------------------------------------------------------------
   1. REPORT ICON
   ------------------------------------------------------------ */
.report-icon {
  width: 64px;
  height: 64px;
  background: var(--color-primary-light);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-icon i {
  font-size: 2rem;
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   2. SUMMARY CARDS
   ------------------------------------------------------------ */
#report-summary .card {
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
}

#report-summary .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

#report-summary h3 {
  font-size: 1.75rem;
}

#report-summary small {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------
   3. FIFO WARNING
   ------------------------------------------------------------ */
#fifo-warning {
  background: #e8f0fe;
  border-left: 4px solid var(--color-primary) !important;
  font-size: 0.85rem;
  color: var(--color-gray-700);
}

/* ------------------------------------------------------------
   4. FILTER BAR
   ------------------------------------------------------------ */
#filter-type,
#sort-by,
#filter-date {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
}

#filter-type:focus,
#sort-by:focus,
#filter-date:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 2px rgba(11, 94, 215, 0.1);
}

/* ------------------------------------------------------------
   5. REPORT TABLE
   ------------------------------------------------------------ */
#report-table-wrap .table {
  font-size: 0.85rem;
}

#report-table-wrap thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
  font-weight: 600;
  border-bottom: 2px solid var(--color-gray-200);
  white-space: nowrap;
  padding: 0.75rem 0.5rem;
}

#report-table-wrap tbody td {
  padding: 0.75rem 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-gray-100);
}

#report-table-wrap tbody tr {
  transition: background var(--transition-fast);
}

#report-table-wrap tbody tr:hover {
  background-color: #f0f6ff;
}

/* Score colors */
.score-high {
  color: var(--color-success);
  font-weight: 700;
}

.score-medium {
  color: #f57c00;
  font-weight: 700;
}

.score-low {
  color: var(--color-danger);
  font-weight: 700;
}

/* Duration column */
.duration-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Date column */
.date-cell .date-main {
  font-weight: 500;
  color: var(--color-gray-700);
}

.date-cell .date-time {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  margin-left: 0.25rem;
}

/* Type badge */
.type-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--color-primary-light);
  color: var(--color-primary);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   6. PAGINATION
   ------------------------------------------------------------ */
#pagination-nav {
  display: flex;
  gap: 0.25rem;
}

.pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-700);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font-primary);
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(.active):not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#pagination-info {
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

/* ------------------------------------------------------------
   7. EMPTY STATE
   ------------------------------------------------------------ */
#report-empty {
  padding: 3rem 1rem;
}

#report-empty i {
  opacity: 0.3;
}

/* ------------------------------------------------------------
   8. LOADING STATE
   ------------------------------------------------------------ */
.report-loading {
  text-align: center;
  padding: 3rem;
}

.report-loading .spinner {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

/* ------------------------------------------------------------
   9. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .report-icon {
    width: 52px;
    height: 52px;
  }

  .report-icon i {
    font-size: 1.5rem;
  }

  #report-summary h3 {
    font-size: 1.35rem;
  }

  #report-summary small {
    font-size: 0.6rem;
  }

  #report-table-wrap .table {
    font-size: 0.78rem;
  }

  #report-table-wrap thead th {
    font-size: 0.65rem;
  }

  .pagination-btn {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  #report-summary .card {
    padding: 0.5rem !important;
  }

  #report-summary h3 {
    font-size: 1.2rem;
  }

  .type-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
  }
}

/* ------------------------------------------------------------
   10. PRINT STYLES
   ------------------------------------------------------------ */
@media print {
  .navbar,
  #filter-bar,
  #pagination-nav,
  #fifo-warning,
  .btn {
    display: none !important;
  }

  #report-table-wrap {
    box-shadow: none !important;
    border: 1px solid #ddd;
  }

  body {
    background: white;
  }
}