CSS Architecture Fixes (Dec 2025)

Issues Resolved

1. Missing :root Selector

Problem: CSS variables were defined without a selector, causing parse errors.

Before (broken):

/* Status Colors */
--status-available-bg: #E6F4EA;
--status-available-text: #1E8E3E;
/* ... more variables */
}

After (fixed):

:root {
  /* Brand Colors */
  --ski-blue: #0066CC;
  --ski-blue-dark: #003087;
  --ski-green: #00A86B;
  --ski-gold: #FFD700;

  /* Base Colors */
  --bg-color: #F5F5F5;
  --card-bg: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --border-color: #E0E0E0;

  /* Status Colors */
  --status-available-bg: #E6F4EA;
  /* ... */
}

2. Orphaned CSS Properties

Problem: Desktop media query wrapper was missing, leaving properties without selector.

Before (broken, line 719):

max-width: 1200px;
flex-direction: row;
align-items: flex-start;
padding: var(--space-lg);
gap: var(--space-lg);
}

After (fixed):

@media (min-width: 768px) {
  .app-container {
    max-width: 1200px;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--space-lg);
    gap: var(--space-lg);
  }
  /* ... more desktop styles */
}

3. Inline Style Warnings

Problem: ESLint flagged inline styles as non-compliant.

Fixed by: - Created .button-group and .button-group-margin CSS classes - Moved progress bar width to DOM manipulation via useRef + useEffect - Removed all inline style attributes from Step3Details.tsx and ProgressSteps.tsx

Before:

<div style={{ display: 'flex', gap: '10px' }}>
  <button style={{ flex: 1, padding: '15px' }}>...</button>
</div>

After:

<div className="button-group">
  <button className="chip">...</button>
</div>

Build Output

Final build with zero CSS warnings and zero lint errors:

✓ 59 modules transformed.
dist/index.html                   0.45 kB │ gzip:   0.29 kB
dist/assets/index-D3Vd9f3b.css   16.15 kB │ gzip:   3.53 kB
dist/assets/index-CTxlaopi.js   542.69 kB │ gzip: 168.78 kB
✓ built in 3.36s

Files Modified

• admin/src/ski-gk-theme.css - Fixed :root, media queries, added utility classes
• admin/src/components/steps/Step3Details.tsx - Removed inline styles
• admin/src/components/ProgressSteps.tsx - Replaced inline style with useEffect