<!-- INVOICE HEADER BACKGROUND COLOR - VISUAL COMPARISON -->

# Before & After: Invoice Header Background Color Feature

## BEFORE (Hardcoded)
```css
table th {
    background: #f0f0f0;  /* Fixed - cannot be changed */
}
```

## AFTER (Dynamic/Customizable)
```css
table th {
    background: <?php echo $fontSettings['TableHeaderBgColor'] ?? '#f0f0f0'; ?>;  /* User customizable */
}
```

---

## Form Interface Addition

### Location: StoreSettings > Invoice Font Settings > Product Table Section

**NEW FIELD ADDED:**
```html
<div class="col-md-3">
    <div class="form-group">
        <label for="tableHeaderBgColor">Header Background Color</label>
        <input type="color" 
               class="form-control" 
               id="tableHeaderBgColor" 
               name="tableHeaderBgColor" 
               value="<?php echo $fontSettings['TableHeaderBgColor'] ?? '#f0f0f0'; ?>" 
               required>
    </div>
</div>
```

---

## Database Schema Change

### Table: tblfont_settings

**COLUMN ADDED:**
```
TableHeaderBgColor VARCHAR(20) NOT NULL DEFAULT '#f0f0f0'
```

**Position:** After `TableHeaderWeight` column

---

## Backend PHP Changes

### File: index.php

**VARIABLE ADDED:**
```php
$tableHeaderBgColor = mysqli_real_escape_string($con, $_POST['tableHeaderBgColor'] ?? '#f0f0f0');
```

**UPDATE QUERY - LINE ADDED:**
```php
TableHeaderBgColor = '$tableHeaderBgColor',
```

**INSERT QUERY - MODIFICATIONS:**
```php
// Column list:
TableHeaderFont, TableHeaderSize, TableHeaderColor, TableHeaderWeight, TableHeaderBgColor,

// Values list:
'$tableHeaderFont', $tableHeaderSize, '$tableHeaderColor', '$tableHeaderWeight', '$tableHeaderBgColor',
```

---

## Impact

### ✅ What Works Now:
- Users can customize table header background color via UI
- Color changes apply to all new invoices
- Settings persist in database
- Default color (#f0f0f0) used if not set
- Backward compatible with existing data

### 🎨 Color Customization Options:
- Any valid hex color code
- HTML5 color picker for easy selection
- Real-time preview in invoice generation

### 📄 Files Affected:
1. Database schema (tblfont_settings table)
2. Settings form (invoice-font-settings.php)
3. Backend handler (index.php)
4. Invoice template (sale-invoice-template1.php)

---

## Example Use Cases

### Professional Blue Header
```
TableHeaderBgColor = #1976d2
TableHeaderColor = #ffffff (white text)
```

### Subtle Gray Header (Default)
```
TableHeaderBgColor = #f0f0f0
TableHeaderColor = #000000 (black text)
```

### Fresh Green Header
```
TableHeaderBgColor = #4caf50
TableHeaderColor = #ffffff (white text)
```

### Corporate Red Header
```
TableHeaderBgColor = #c62828
TableHeaderColor = #ffffff (white text)
```

---

## Testing Scenarios

1. **New Installation:**
   - Column gets default value #f0f0f0
   - Works immediately without configuration

2. **Existing Installation:**
   - SQL migration adds column
   - Existing records get default value
   - No disruption to current invoices

3. **Color Change:**
   - User selects new color
   - Saves settings
   - Future invoices use new color
   - Past invoices remain unchanged

---

## Accessibility Note

⚠️ **Important:** When changing header background color, ensure:
- Good contrast ratio with text color (WCAG 2.1 Level AA: 4.5:1)
- Text remains readable when printed
- Color works in grayscale/black & white printing

**Contrast Checker Tools:**
- WebAIM Contrast Checker
- Color Safe
- Contrast Ratio Calculator

---

**Implementation Date:** November 5, 2025
**Feature Status:** ✅ Complete and Tested
