/* ==========================================================================
 * reports.css -- Report dashboard styles
 *
 * Responsive layout for the reports page including filters, summary cards,
 * Chart.js containers, and the breakdown data table.
 *
 * Desktop: cards in row, chart full-width, table below.
 * Tablet: cards in row (smaller), chart full-width.
 * Mobile: cards stacked, chart + table horizontal scroll.
 *
 * All values reference CSS custom properties from variables.css.
 *
 * Requirements: 12 (Reports Dashboard)
 * Design reference: Section 18 (Reports Page)
 * ========================================================================== */


/* ==========================================================================
 * 1. PAGE LAYOUT
 * ========================================================================== */

.reports-page {
  padding: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.reports-header {
  margin-bottom: var(--space-4);
}

.reports-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
}


/* ==========================================================================
 * 2. FILTERS SECTION
 * ========================================================================== */

.reports-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Quick date range selector buttons */
.reports-filters__quick {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.reports-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  min-height: 36px;
}

.reports-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.reports-filter-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.reports-filter-btn--active:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

/* Date inputs row */
.reports-filters__dates {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.reports-filters__date-group {
  flex: 1;
  min-width: 140px;
}

/* Category filter + submit button row */
.reports-filters__actions {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.reports-filters__category {
  flex: 1;
  min-width: 160px;
}

.reports-filters__submit {
  white-space: nowrap;
  min-width: 120px;
}


/* ==========================================================================
 * 3. ERROR STATE
 * ========================================================================== */

.reports-error {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}


/* ==========================================================================
 * 4. EMPTY STATE (initial, before first fetch)
 * ========================================================================== */

.reports-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  min-height: 200px;
  gap: var(--space-3);
}


/* ==========================================================================
 * 5. NO DATA STATE
 * ========================================================================== */

.reports-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  min-height: 200px;
}


/* ==========================================================================
 * 6. SUMMARY CARDS
 * ========================================================================== */

.reports-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.reports-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}

.reports-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.reports-card__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}


/* ==========================================================================
 * 7. CHART SECTIONS
 * ========================================================================== */

.reports-chart-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.reports-section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.reports-chart-container {
  position: relative;
  height: 300px;
  width: 100%;
}

.reports-chart-container--horizontal {
  height: 350px;
}

/* Top items header with tabs */
.reports-top-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.reports-top-items-tabs {
  display: flex;
  gap: var(--space-2);
}


/* ==========================================================================
 * 8. DATA TABLE SECTION
 * ========================================================================== */

.reports-table-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}


/* ==========================================================================
 * 9. RESPONSIVE: TABLET (768px - 1024px)
 * ========================================================================== */

@media (max-width: 1024px) {
  .reports-summary {
    gap: var(--space-3);
  }

  .reports-card {
    padding: var(--space-3) var(--space-4);
  }

  .reports-card__value {
    font-size: var(--font-size-lg);
  }
}


/* ==========================================================================
 * 10. RESPONSIVE: MOBILE (< 768px)
 * ========================================================================== */

@media (max-width: 767px) {
  .reports-page {
    padding: var(--space-3);
  }

  /* Stack summary cards vertically */
  .reports-summary {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Stack filter controls */
  .reports-filters__dates {
    flex-direction: column;
  }

  .reports-filters__actions {
    flex-direction: column;
  }

  .reports-filters__submit {
    width: 100%;
  }

  /* Filter buttons: allow wrapping */
  .reports-filter-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Chart: fit within mobile viewport */
  .reports-chart-container {
    min-width: 0;
    width: 100%;
    height: 250px;
  }

  .reports-chart-container--horizontal {
    height: 300px;
  }

  /* Table: horizontal scroll */
  .reports-table-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Top items header: stack */
  .reports-top-items-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ==========================================================================
 * REPORT TABS (new report types)
 * ========================================================================== */

.reports-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.reports-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.reports-tab:hover {
  color: var(--color-text);
}
.reports-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}


/* ==========================================================================
 * PEAK HOURS HEATMAP (7 days × 24 hours grid)
 * ========================================================================== */

.heatmap-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-x: auto;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: 60px repeat(24, minmax(20px, 1fr));
  gap: 2px;
  min-width: 600px;
}
.heatmap-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-1) 0;
}
.heatmap-row-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  padding-right: var(--space-2);
}
.heatmap-cell {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--color-primary);
  cursor: pointer;
  transition: transform 150ms ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.heatmap-cell:hover {
  transform: scale(1.15);
  z-index: 1;
}
.heatmap-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 150ms;
}
.heatmap-cell:hover .heatmap-tooltip {
  opacity: 1;
}