# Implementation Guide: Fix Flag Visibility in Dark Mode

## Quick Fix (5 minutes)

### Add CSS Override with !important

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

**Location**: Inside the `<style>` tag (around line 820)

**Add this CSS**:
```css
/* ===== DARK MODE FLAG VISIBILITY FIX ===== */
/* Override inline styles for better dark mode visibility */

.dark .summary-value i.fa-flag {
    color: #fbbf24 !important; /* Bright yellow - default */
}

.dark .summary-value i.fa-flag[style*="dc3545"] {
    color: #f87171 !important; /* Bright red for NO_SUPPLIER_DATA */
}

.dark .summary-value span[title*="Estimated"] {
    color: #fb923c !important; /* Bright orange for estimated fees */
}

.dark .summary-value span[title*="Actual"] {
    color: #4ade80 !important; /* Bright green for actual fees */
}
```

**That's it!** This will make flags and indicators visible in dark mode.

---

## Proper Fix (15 minutes)

### Remove Inline Styles, Use CSS Classes

This is the **recommended approach** for better maintainability.

### Step 1: Update Flag Icon Code

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

**Location**: Line 1829

**BEFORE**:
```php
<i class="fa fa-flag" style="color: {{ $flagColor }}; margin-left: 5px;" title="{{ $flagTitle }}"></i>
```

**AFTER**:
```php
@php
    $flagClass = 'flag-default';
    if(trim($order->remarks) === 'DATE_PART_MATCH') {
        $flagClass = 'flag-date-part-match';
    } elseif(trim($order->remarks) === 'NO_SUPPLIER_DATA') {
        $flagClass = 'flag-no-supplier-data';
    }
@endphp
<i class="fa fa-flag {{ $flagClass }}" title="{{ $flagTitle }}"></i>
```

### Step 2: Update Fee Indicator Code

**File**: Same file

**Location**: Line 1847

**BEFORE**:
```php
@if($feeDisplay)
    <span style="color: {{ $feeColor }}; margin-left: 5px; font-weight: bold; font-size: 1.1em;" title="{{ $feeTitle }}">{{ $feeDisplay }}</span>
@endif
```

**AFTER**:
```php
@if($feeDisplay)
    @php
        $feeClass = trim($order->fee_data_source) === 'Actual' ? 'fee-actual' : 'fee-estimated';
    @endphp
    <span class="fee-indicator {{ $feeClass }}" title="{{ $feeTitle }}">{{ $feeDisplay }}</span>
@endif
```

### Step 3: Add CSS Classes

**File**: Same file

**Location**: Inside the `<style>` tag (around line 820)

**Add this CSS**:
```css
/* ===== FLAG ICONS ===== */
.fa-flag {
    margin-left: 5px;
}

/* Light mode colors */
.fa-flag.flag-default {
    color: #dc3545; /* Red */
}

.fa-flag.flag-date-part-match {
    color: #ffc107; /* Yellow */
}

.fa-flag.flag-no-supplier-data {
    color: #dc3545; /* Red */
}

/* Dark mode colors - brighter for visibility */
.dark .fa-flag.flag-default {
    color: #f87171; /* Bright red */
}

.dark .fa-flag.flag-date-part-match {
    color: #fbbf24; /* Bright yellow */
}

.dark .fa-flag.flag-no-supplier-data {
    color: #f87171; /* Bright red */
}

/* ===== FEE INDICATORS ===== */
.fee-indicator {
    margin-left: 5px;
    font-weight: bold;
    font-size: 1.1em;
}

/* Light mode colors */
.fee-indicator.fee-actual {
    color: #28a745; /* Green */
}

.fee-indicator.fee-estimated {
    color: #ff9800; /* Orange */
}

/* Dark mode colors - brighter for visibility */
.dark .fee-indicator.fee-actual {
    color: #4ade80; /* Bright green */
}

.dark .fee-indicator.fee-estimated {
    color: #fb923c; /* Bright orange */
}
```

---

## Testing

### Quick Manual Test

1. Navigate to: `https://central.go-parts.com/profitability?orderNumber=113-4594218-7554637`
2. Find order #113-4594218-7554637
3. **Light Mode**: Verify yellow flag and orange ≈ are visible
4. **Dark Mode**: Toggle dark mode and verify they're still visible (brighter colors)

### Automated Test (if login works)

```javascript
// Test with Puppeteer
const page = await browser.newPage();
await page.goto('https://central.go-parts.com/profitability?orderNumber=113-4594218-7554637');

// Check light mode
const lightColor = await page.evaluate(() => {
    const flag = document.querySelector('.summary-value i.fa-flag');
    return window.getComputedStyle(flag).color;
});
console.log('Light mode flag color:', lightColor); // Should be rgb(255, 193, 7)

// Toggle dark mode
await page.click('[aria-label*="dark" i]');
await page.waitForTimeout(1000);

// Check dark mode
const darkColor = await page.evaluate(() => {
    const flag = document.querySelector('.summary-value i.fa-flag');
    return window.getComputedStyle(flag).color;
});
console.log('Dark mode flag color:', darkColor); // Should be rgb(251, 191, 36)
```

---

## Rollback Plan

If something breaks:

### Quick Fix Rollback
Just remove the CSS you added. The page will return to the original behavior.

### Proper Fix Rollback
Use git:
```bash
git checkout resources/views/filament/pages/profitability.blade.php
```

Or manually revert the changes to lines 1829 and 1847.

---

## Verification Checklist

After implementing the fix:

- [ ] Light mode: Yellow flag visible on order #113-4594218-7554637
- [ ] Light mode: Orange ≈ visible on order #113-4594218-7554637
- [ ] Dark mode: Bright yellow flag visible
- [ ] Dark mode: Bright orange ≈ visible
- [ ] Other orders with flags still work correctly
- [ ] No console errors in browser DevTools
- [ ] Page loads without PHP errors

---

## Color Reference

### Flag Colors

| Remarks | Light Mode | Dark Mode | Description |
|---------|-----------|-----------|-------------|
| DATE_PART_MATCH | #ffc107 (Yellow) | #fbbf24 (Bright Yellow) | Date/Part match warning |
| NO_SUPPLIER_DATA | #dc3545 (Red) | #f87171 (Bright Red) | No supplier data error |
| Other | #dc3545 (Red) | #f87171 (Bright Red) | Generic warning |

### Fee Indicator Colors

| Fee Data Source | Symbol | Light Mode | Dark Mode | Description |
|----------------|--------|-----------|-----------|-------------|
| Actual | = | #28a745 (Green) | #4ade80 (Bright Green) | Actual fee data |
| Estimated | ≈ | #ff9800 (Orange) | #fb923c (Bright Orange) | Estimated fee data |

---

## Additional Notes

### Why This Happens

1. **Inline styles** have highest CSS specificity
2. Dark mode CSS uses `.dark` selector
3. `.dark .summary-value` changes text color
4. But `.dark .summary-value i` doesn't override `style="color: #xxx"`
5. Result: Icons keep their light mode colors in dark mode

### Why !important Works

- `!important` overrides inline styles
- It's a quick fix but not ideal for maintainability
- Better to remove inline styles entirely

### Why Classes Are Better

- Separation of concerns (style in CSS, not HTML)
- Easy to change colors without editing PHP
- Works automatically with dark mode
- More maintainable long-term
- Better performance (no PHP string concatenation)

---

## Support

If you encounter issues:

1. Check browser console for errors (F12)
2. Verify the CSS was added correctly
3. Clear browser cache (Ctrl+Shift+R)
4. Check if dark mode is actually active (`<html class="dark">`)
5. Verify the order has `remarks` and `fee_data_source` data

**Order #113-4594218-7554637 confirmed data**:
- `remarks`: "DATE_PART_MATCH" (should show yellow flag)
- `fee_data_source`: "Estimated" (should show orange ≈)

If neither icon appears at all, the issue is different (check PHP logic).
If icons appear in light mode but not dark mode, this fix will solve it.