# Period Statistics Section - Styling Analysis Report

**Analysis Date:** 2025-10-31
**Page URL:** https://central.go-parts.com/profitability?dateRange=08%2F01%2F2025+-+08%2F31%2F2025
**Credentials Used:** Dan / Iv6T6FMJuGhw

---

## Executive Summary

The Period Statistics section on the profitability page has **critical dark mode styling issues**. While the CSS includes dark mode rules, **inline styles with hardcoded light mode colors override them**, making the section unusable in dark mode.

---

## Screenshots

All screenshots saved to `/home/centralgoparts/public_html/`:

1. **Light Mode (Collapsed):** `profitability-period-stats-light-collapsed.png` ✅ Working correctly
2. **Light Mode (Expanded):** `profitability-period-stats-light-expanded.png` ✅ Working correctly
3. **Dark Mode (Collapsed):** `profitability-period-stats-dark-collapsed.png` ❌ White background visible
4. **Dark Mode (Expanded):** `profitability-period-stats-dark-expanded.png` ❌ White backgrounds on all cards

---

## Styling Issues Found

### 1. **CRITICAL: Dark Mode Collapsed State**
**Issue:** `.summary-stats` container still has white/light background in dark mode
**Root Cause:** Inline styles or insufficient CSS specificity

### 2. **CRITICAL: Dark Mode Expanded State - Inner Cards (4 instances)**
**Issue:** All 4 detail cards have white backgrounds with dark text in dark mode
**Files Affected:**
- Orders & Revenue card
- Profitability card
- COGS Breakdown card
- Data Accuracy Breakdown card

**Evidence from HTML:**
```html
<div style="background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px; margin-bottom: 10px; min-height: 100px;">
```

---

## CSS Classes Found

The following CSS classes are used in the Period Statistics section:

```
btn
btn-default
btn-sm
col-md-2
col-md-6
col-sm-12
col-sm-4
fa
fa-chart-line
fa-chevron-down
fa-chevron-up
fa-info-circle
row
```

---

## Problematic Inline Styles

### Hardcoded Light Mode Colors:

1. **Text Colors:**
   - `color: #212529` (dark text - not visible on dark background)
   - `color: #6c757d` (gray text - low contrast on dark background)

2. **Background Colors:**
   - `background: white` (literal white background in dark mode)

3. **Border Colors:**
   - `border: 1px solid #e9ecef` (light gray borders)
   - `border-right: 1px solid #e9ecef`
   - `border-top: 1px solid rgb(233, 236, 239)`

### Example Problem Areas:

**Collapsed Summary Row:**
```html
<div style="font-size: 18px; font-weight: bold; color: #212529;">3,876</div>
<div style="font-size: 10px; color: #6c757d; text-transform: uppercase;">Orders</div>
```

**Expanded Detail Cards:**
```html
<div style="background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px; margin-bottom: 10px; min-height: 100px;">
    <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; letter-spacing: 0.5px;">Orders & Revenue</div>
    <div style="font-size: 20px; font-weight: bold; color: #212529;">4,655</div>
    <div style="font-size: 10px; color: #6c757d; margin-top: 4px;">Total Items</div>
</div>
```

---

## Existing Dark Mode CSS (From profitability.blade.php)

The CSS file already has dark mode rules defined (lines 846-866):

```css
/* Period Statistics - CRITICAL FIX */
.dark .summary-stats {
    background: rgb(24, 24, 27);
    color: rgb(229, 231, 235);
    box-shadow: 0 1px 3px rgba(255,255,255,0.05);
}

/* Stat Groups */
.dark .stat-group {
    background: rgb(39, 39, 42);
    border: 1px solid rgb(63, 63, 70);
}

.dark .stat-group-title {
    color: rgb(161, 161, 170);
}
```

**However, these rules are NOT being applied because inline styles have higher specificity.**

---

## Color Values Detected

### Light Mode (Working):
- Background: `rgba(0, 0, 0, 0)` (transparent) on `.summary-stats`
- Text: `rgb(9, 9, 11)` (dark gray/black)
- Borders: `rgb(228, 228, 231)` (light gray)

### Dark Mode (Broken):
- Text colors are STILL: `rgb(9, 9, 11)` (dark text on dark background = invisible)
- Border colors are STILL: `rgb(228, 228, 231)` (light borders)
- Card backgrounds are STILL: `rgb(255, 255, 255)` (white)

---

## Recommended Fixes

### Option 1: Remove Inline Styles (Recommended)
**File:** `/home/centralgoparts/public_html/resources/views/filament/pages/profitability.blade.php`

Replace inline styles with CSS classes:

1. **Replace hardcoded colors:**
   ```html
   <!-- BEFORE -->
   <div style="font-size: 18px; font-weight: bold; color: #212529;">

   <!-- AFTER -->
   <div class="stat-value" style="font-size: 18px; font-weight: bold;">
   ```

2. **Replace hardcoded backgrounds:**
   ```html
   <!-- BEFORE -->
   <div style="background: white; border: 1px solid #e9ecef; border-radius: 4px; padding: 12px;">

   <!-- AFTER -->
   <div class="stat-detail-card" style="border-radius: 4px; padding: 12px;">
   ```

3. **Add CSS classes:**
   ```css
   .stat-value {
       color: #212529;
   }

   .dark .stat-value {
       color: rgb(229, 231, 235);
   }

   .stat-label {
       color: #6c757d;
   }

   .dark .stat-label {
       color: rgb(161, 161, 170);
   }

   .stat-detail-card {
       background: white;
       border: 1px solid #e9ecef;
   }

   .dark .stat-detail-card {
       background: rgb(39, 39, 42);
       border: 1px solid rgb(63, 63, 70);
   }
   ```

### Option 2: Use CSS Variables (More Maintainable)
```css
:root {
    --stats-bg: white;
    --stats-text: #212529;
    --stats-label: #6c757d;
    --stats-border: #e9ecef;
}

.dark {
    --stats-bg: rgb(39, 39, 42);
    --stats-text: rgb(229, 231, 235);
    --stats-label: rgb(161, 161, 170);
    --stats-border: rgb(63, 63, 70);
}
```

Then in HTML:
```html
<div style="background: var(--stats-bg); border: 1px solid var(--stats-border); ...">
```

### Option 3: Use !important (Quick Fix, Not Recommended)
```css
.dark .summary-stats * {
    color: rgb(229, 231, 235) !important;
}

.dark .summary-stats div[style*="background: white"] {
    background: rgb(39, 39, 42) !important;
}
```

---

## Specific Line Numbers to Fix

**File:** `/home/centralgoparts/public_html/resources/views/filament/pages/profitability.blade.php`

### Collapsed State (Always Visible):
- **Lines 21-23:** Border and text colors
- **Lines 27-29:** Border and text colors
- **Lines 33-35:** Border and text colors
- **Lines 38-45:** Border and text colors
- **Lines 48-53:** Border and text colors
- **Lines 57-61:** Border and text colors

### Expanded State (Collapsible):
- **Line 67:** Border color in `#detailedStats`
- **Line 71:** `background: white` and border
- **Lines 72, 75-76, 79-80:** Text colors
- **Line 88:** `background: white` and border
- **Lines 89, 92-93, 96-97:** Text colors
- **Line 105:** Similar pattern continues...

---

## HTML Structure

The Period Statistics section structure:
```
.summary-stats (main container)
├── div (header with toggle button)
│   ├── h4 (title)
│   └── button#toggleStatsBtn (expand/collapse)
├── div.row (compact summary - always visible)
│   ├── div.col-md-2.col-sm-4 (Orders)
│   ├── div.col-md-2.col-sm-4 (Revenue)
│   ├── div.col-md-2.col-sm-4 (Avg Margin %)
│   ├── div.col-md-2.col-sm-4 (Profit Split)
│   ├── div.col-md-2.col-sm-4 (COGS %)
│   └── div.col-md-2.col-sm-4 (Data Accuracy)
└── div#detailedStats (expanded content - toggleable)
    ├── div.row
    │   ├── div.col-md-6 (Orders & Revenue card)
    │   └── div.col-md-6 (Profitability card)
    └── div.row
        ├── div.col-md-6 (COGS Breakdown card)
        └── div.col-md-6 (Data Accuracy Breakdown card)
```

---

## Test Results

✅ **Light Mode Collapsed:** Working perfectly
✅ **Light Mode Expanded:** Working perfectly
❌ **Dark Mode Collapsed:** White/light background visible
❌ **Dark Mode Expanded:** All 4 detail cards have white backgrounds with dark (invisible) text

---

## Files Referenced

1. **PHP Controller:** `/home/centralgoparts/public_html/app/Filament/Pages/Profitability.php`
2. **Blade View:** `/home/centralgoparts/public_html/resources/views/filament/pages/profitability.blade.php`
3. **Analysis Script:** `/home/centralgoparts/public_html/analyze-period-stats-final.cjs`
4. **Results JSON:** `/home/centralgoparts/public_html/profitability-styling-analysis.json`
5. **HTML Dump:** `/home/centralgoparts/public_html/profitability-period-stats-html.txt`

---

## Next Steps

1. ✅ **Completed:** Puppeteer analysis with screenshots in both modes
2. ⏭️ **Recommended:** Remove inline styles and use CSS classes
3. ⏭️ **Alternative:** Implement CSS variables for theme-aware styling
4. ⏭️ **Testing:** Verify fixes in both light and dark modes after implementation

---

**Generated by:** Puppeteer automated analysis script
**Report Location:** `/home/centralgoparts/public_html/period-stats-styling-report.md`