// ==========================================================================
// Reports Page Styles
// ==========================================================================

// Reports page specific styles
.reports-page {
  background: var(--bs-body-bg);

  .stats-card {
    @include stats-card-hover();
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
  }

  .stats-icon {
    @include stats-icon();
  }

  .report-card {
    @include admin-card();
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;

    &:hover {
      border-color: var(--bs-primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
    }

    &.selected {
      border-color: var(--bs-primary);
      background-color: var(--bs-primary-bg-subtle);
    }
  }

  .chart-container {
    @include chart-container(350px, 350px);
  }

  .date-range-picker {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .metric-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .metric-change {
    font-size: 0.875rem;
    font-weight: 500;

    &.positive {
      color: var(--bs-success);
    }

    &.negative {
      color: var(--bs-danger);
    }

    &.neutral {
      color: var(--bs-secondary-color);
    }
  }

  .card {
    @include admin-card();
  }

  .card-header {
    @include admin-card-header();
  }

  .hamburger-menu {
    @include hamburger-menu();

    .admin-wrapper.sidebar-collapsed & {
      left: 1rem;
    }
  }

  .report-filter {
    background: var(--bs-secondary-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--bs-border-color);
  }

  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .progress-ring {
    @include progress-ring();
  }

  .report-status-badge {
    @include status-badge();

    &.ready {
      background-color: var(--bs-success-bg-subtle);
      color: var(--bs-success-text-emphasis);
      border: 1px solid var(--bs-success-border-subtle);
    }

    &.generating {
      background-color: var(--bs-warning-bg-subtle);
      color: var(--bs-warning-text-emphasis);
      border: 1px solid var(--bs-warning-border-subtle);
    }

    &.failed {
      background-color: var(--bs-danger-bg-subtle);
      color: var(--bs-danger-text-emphasis);
      border: 1px solid var(--bs-danger-border-subtle);
    }
  }

  .export-format-selector {
    .form-select {
      border-color: var(--bs-primary);
      
      &:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
      }
    }
  }

  .recent-reports-table {
    .table {
      margin-bottom: 0;
      
      th {
        border-bottom: 2px solid var(--bs-border-color);
        font-weight: 600;
        color: var(--bs-emphasis-color);
      }
      
      td {
        vertical-align: middle;
      }
    }
    
    .table-hover tbody tr:hover {
      background-color: var(--bs-secondary-bg-subtle);
    }
  }
}

