Update CLAUDE.md with v1.2.4 learnings and CSS troubleshooting guide

Added comprehensive CSS specificity documentation from v1.2.4 bugfixes:
- CSS Specificity Issues section documenting table border and help-tip positioning problems
- Detailed troubleshooting guide for WooCommerce CSS overrides
- Solution patterns for table styling and float-based layouts
- General rules and diagnostic steps for CSS issues

Updated:
- Last Updated date to 2025-12-30
- Roadmap section to mark v1.2.4 bugs as completed
- Moved future enhancements to v1.2.5+ section

Key learnings documented:
- WooCommerce core CSS requires !important flags for overrides
- Float-based layouts should be replaced with flexbox for precise control
- Table borders require comprehensive targeting of all structural elements
- border-collapse: collapse is essential for borderless tables

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

CLAUDE.md

@@ -1,6 +1,6 @@
 # WooCommerce Tier and Package Prices - AI Context Document
 
-**Last Updated:** 2025-12-29
+**Last Updated:** 2025-12-30
 **Current Version:** 1.2.4
 **Author:** Marco Graetsch
 **Project Status:** Production-ready WordPress plugin
@@ -305,6 +305,41 @@ Location: includes/class-wc-tpp-cart.php:233
 - **Fix:** Changed method signature to accept `WC_Product $product` instead of `$cart_item` array
 - **Status:** FIXED in v1.1.20
 
+### CSS Specificity Issues (v1.2.3 → v1.2.4)
+
+**Problem:** Admin table borders still visible despite `border: none` declarations in v1.2.3
+
+```txt
+Issue: WooCommerce's core admin CSS has higher specificity border rules
+Location: assets/css/admin.css
+Symptom: Tables still showing borders in product edit screens
+```
+
+- **Root Cause:** WooCommerce's default admin CSS uses highly specific selectors that override simple `border: none` declarations
+- **Failed Approach (v1.2.3):** Adding `border: none` to table elements without `!important`
+- **Successful Fix (v1.2.4):**
+  - Added `!important` flags to ALL border removal rules
+  - Added `border-collapse: collapse !important` to force borderless styling
+  - Targeted all table structural elements: `table`, `th`, `td`, `thead`, `tbody`, `tr`
+- **Lesson:** When overriding WooCommerce core CSS, `!important` is often necessary due to high specificity in core styles
+
+**Problem:** Help icon positioned at right edge instead of next to label text
+
+```txt
+Issue: WooCommerce help-tip uses float: right positioning
+Location: assets/css/admin.css (checkbox/label layout)
+Symptom: Help icon appearing far from label text at container edge
+```
+
+- **Root Cause:** WooCommerce's default `.woocommerce-help-tip` styling uses `float: right`
+- **Failed Approach (v1.2.3):** Simple margin adjustments without changing positioning model
+- **Successful Fix (v1.2.4):**
+  - Removed float positioning: `float: none`
+  - Changed to `display: inline-block` with `vertical-align: middle`
+  - Wrapped label and help-tip in flexbox container: `display: inline-flex; align-items: center`
+  - Controlled precise spacing with margins (checkbox: 12px, help-tip: 6px)
+- **Lesson:** Overriding float-based layouts often requires changing to flexbox for proper control
+
 ## Release Process
 
 ### Version Bumping
@@ -506,6 +541,83 @@ When modifying admin input fields in Twig templates, use WooCommerce's standard
 
 **Location:** `templates/admin/*.twig` for admin UI changes
 
+#### CSS Specificity and WooCommerce Overrides
+
+**CRITICAL LESSON from v1.2.4:** WooCommerce's core admin CSS uses high-specificity selectors that require `!important` to override.
+
+**Problem Symptoms:**
+- CSS rules not applying despite correct selectors
+- Styles work in simple cases but fail with WooCommerce elements
+- Browser DevTools shows rule crossed out or overridden
+
+**Diagnostic Steps:**
+1. Inspect element in browser DevTools
+2. Check "Computed" tab to see which styles are actually applied
+3. Look for crossed-out rules in "Styles" tab (indicates override)
+4. Check selector specificity - WooCommerce often uses complex selectors
+
+**Solution Patterns:**
+
+**For Table Styling:**
+```css
+/* ❌ This will likely be overridden */
+.wc-tpp-tiers-table {
+    border: none;
+}
+
+/* ✅ Use !important for core WooCommerce overrides */
+.wc-tpp-tiers-table,
+.wc-tpp-tiers-table th,
+.wc-tpp-tiers-table td,
+.wc-tpp-tiers-table thead,
+.wc-tpp-tiers-table tbody,
+.wc-tpp-tiers-table tr {
+    border: none !important;
+}
+
+/* ✅ Also use border-collapse to prevent cell borders */
+.wc-tpp-tiers-table {
+    border-collapse: collapse !important;
+}
+```
+
+**For Float-Based Layouts:**
+```css
+/* ❌ Float positioning is hard to control precisely */
+.woocommerce-help-tip {
+    float: right;
+    margin-left: 10px;
+}
+
+/* ✅ Use flexbox for precise control */
+label[for="_wc_tpp_restrict_to_packages"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+}
+
+.woocommerce-help-tip {
+    float: none;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 6px;
+    margin-right: 0;
+}
+```
+
+**General Rules:**
+1. **Always test in actual WordPress admin** - browser preview may not show WooCommerce's CSS
+2. **Target all related elements** - tables require styling on `table`, `thead`, `tbody`, `tr`, `th`, `td`
+3. **Use `!important` sparingly but don't fear it** - sometimes it's the only way to override WooCommerce core
+4. **Prefer flexbox over floats** - gives better control over alignment and spacing
+5. **Check across browsers** - table rendering can vary between Chrome/Firefox/Safari
+
+**When Styles Don't Apply:**
+- First verify selector is correct (DevTools should show rule, even if crossed out)
+- If selector is correct but crossed out, increase specificity or add `!important`
+- If selector doesn't appear at all, check file is enqueued and cache is cleared
+- Use browser's "Inspect" right-click to see exact element structure
+
 #### Git Workflow Issues
 
 **Problem:** Cannot rebase due to uncommitted changes
@@ -647,6 +759,12 @@ Roadmap for the upcoming development.
 
 2. ~~Bug 2 in v1.2.3: Increase the margin between checkbox and label and put the help icon right next to the label, not at the right border~~ ✅ **FIXED in v1.2.4** - Increased checkbox right margin from 8px to 12px. Repositioned help tip icon to display inline right next to the label text using flexbox layout with `display: inline-flex`, removing float positioning that caused it to appear at the right edge.
 
+##### Planned Enhancements for v1.2.5+
+
+1. Hide the table-headers in admin area until a tier or respectivly a package price is defined.
+
+2. Make it possible to define tier or package prices on variable products in the parent product as a default for that product and all variants of it unless a variant has its own tier or package prices.
+
 ##### New Features
 
 1. Create different, selectable templates for tierprices and packages to use in the frontend. Make the new templates selectable globally on the settings-page, not per product.