feat(events): add CSS template selector to event edit page

- Add CSS template selector to ThemeCustomizerEnhanced component
- Rename "Custom CSS" to "Event-specific Custom CSS" for clarity
- Load and save css_template_id when editing events
- Fetch CSS templates when entering edit mode on EventDetailsPage
- Pass CSS template props to ThemeEditorModal
- Add backend validation for css_template_id field

backend/src/routes/adminEvents.js

@@ -581,7 +581,8 @@ router.put('/:id', adminAuth, requirePermission('events.edit'), [
       throw new Error('Password must be at least 6 characters long');
     }
     return true;
-  })
+  }),
+  body('css_template_id').optional({ nullable: true, checkFalsy: true }).isInt()
 ], async (req, res) => {
   try {
     const errors = validationResult(req);

frontend/src/components/admin/ThemeCustomizerEnhanced.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Palette, RotateCcw, Check, Layout, Type, Sparkles, Grid3X3, Layers, Play, Clock, Image, LayoutGrid, ChevronDown, Code, Info } from 'lucide-react';
+import { Palette, RotateCcw, Check, Layout, Type, Sparkles, Grid3X3, Layers, Play, Clock, Image, LayoutGrid, ChevronDown, Code, Info, FileCode } from 'lucide-react';
 import { Button, Card, Input } from '../common';
 import { ThemeConfig, GALLERY_THEME_PRESETS, GalleryLayoutType } from '../../types/theme.types';
+import type { EnabledTemplate } from '../../services/cssTemplates.service';
 // import { settingsService } from '../../services/settings.service';
 // import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +17,10 @@ interface ThemeCustomizerEnhancedProps {
   hideActions?: boolean;
   onApply?: (theme: ThemeConfig, metadata: { presetName: string }) => Promise<void> | void;
   isApplying?: boolean;
+  // CSS Template props
+  cssTemplates?: EnabledTemplate[];
+  cssTemplateId?: number | null;
+  onCssTemplateChange?: (templateId: number | null) => void;
 }
 
 const layoutIcons: Record<GalleryLayoutType, React.ReactNode> = {
@@ -38,7 +43,10 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
   showGalleryLayouts = true,
   hideActions = false,
   onApply,
-  isApplying = false
+  isApplying = false,
+  cssTemplates,
+  cssTemplateId,
+  onCssTemplateChange
 }) => {
   const { t } = useTranslation();
   const [localTheme, setLocalTheme] = useState<ThemeConfig>(value);
@@ -566,11 +574,67 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
         </div>
       </Card>
 
-      {/* Custom CSS */}
+      {/* CSS Template Selector - only show if templates are provided */}
+      {cssTemplates && cssTemplates.length > 0 && onCssTemplateChange && (
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
+            <FileCode className="w-5 h-5" />
+            {t('branding.cssTemplate', 'CSS Template')}
+          </h3>
+          <p className="text-sm text-neutral-600 mb-4">
+            {t('branding.cssTemplateDescription', 'Select a pre-built CSS template to apply application-wide styling to this gallery. Templates can be managed in Settings > CSS Templates.')}
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {/* No template option */}
+            <button
+              onClick={() => onCssTemplateChange(null)}
+              className={`relative p-4 rounded-lg border-2 transition-all text-left ${
+                !cssTemplateId
+                  ? 'border-primary-600 bg-primary-50'
+                  : 'border-neutral-200 hover:border-neutral-300'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm">{t('branding.noTemplate', 'No Template')}</span>
+                {!cssTemplateId && (
+                  <Check className="w-4 h-4 text-primary-600 flex-shrink-0" />
+                )}
+              </div>
+              <span className="text-xs text-neutral-600 mt-1 block">
+                {t('branding.noTemplateDescription', 'Use only theme settings without a CSS template')}
+              </span>
+            </button>
+            {/* Template options */}
+            {cssTemplates.map((template) => (
+              <button
+                key={template.id}
+                onClick={() => onCssTemplateChange(template.id)}
+                className={`relative p-4 rounded-lg border-2 transition-all text-left ${
+                  cssTemplateId === template.id
+                    ? 'border-primary-600 bg-primary-50'
+                    : 'border-neutral-200 hover:border-neutral-300'
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-medium text-sm">{template.name}</span>
+                  {cssTemplateId === template.id && (
+                    <Check className="w-4 h-4 text-primary-600 flex-shrink-0" />
+                  )}
+                </div>
+                <span className="text-xs text-neutral-600 mt-1 block">
+                  {t('branding.templateSlot', 'Slot {{slot}}', { slot: template.slot_number })}
+                </span>
+              </button>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {/* Event-specific Custom CSS */}
       <Card className="p-6">
         <h3 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
           <Code className="w-5 h-5" />
-          {t('branding.customCSS')}
+          {t('branding.eventCustomCSS', 'Event-specific Custom CSS')}
         </h3>
 
         {/* Collapsible Instructions Panel */}

frontend/src/components/admin/ThemeEditorModal.tsx

@@ -4,13 +4,15 @@ import { Button } from '../common';
 import { ThemeCustomizerEnhanced } from './ThemeCustomizerEnhanced';
 import { GalleryPreview } from './GalleryPreview';
 import { ThemeConfig, GALLERY_THEME_PRESETS, GalleryLayoutType } from '../../types/theme.types';
+import { cssTemplatesService, type EnabledTemplate } from '../../services/cssTemplates.service';
 import { useTranslation } from 'react-i18next';
 
 interface ThemeEditorModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (theme: ThemeConfig, presetName: string) => void;
+  onSave: (theme: ThemeConfig, presetName: string, cssTemplateId: number | null) => void;
   currentTheme: ThemeConfig | string;
+  currentCssTemplateId?: number | null;
   eventName: string;
 }
 
@@ -28,12 +30,29 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
   onClose,
   onSave,
   currentTheme,
+  currentCssTemplateId,
   eventName
 }) => {
   const { t } = useTranslation();
   const [theme, setTheme] = useState<ThemeConfig>(GALLERY_THEME_PRESETS.default.config);
   const [presetName, setPresetName] = useState<string>('default');
   const [previewLayout, setPreviewLayout] = useState<GalleryLayoutType | undefined>(undefined);
+  const [cssTemplates, setCssTemplates] = useState<EnabledTemplate[]>([]);
+  const [cssTemplateId, setCssTemplateId] = useState<number | null>(currentCssTemplateId ?? null);
+
+  // Fetch CSS templates when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      cssTemplatesService.getEnabledTemplates()
+        .then(setCssTemplates)
+        .catch(err => console.error('Failed to load CSS templates:', err));
+    }
+  }, [isOpen]);
+
+  // Update cssTemplateId when prop changes
+  useEffect(() => {
+    setCssTemplateId(currentCssTemplateId ?? null);
+  }, [currentCssTemplateId]);
 
   useEffect(() => {
     if (currentTheme) {
@@ -82,7 +101,7 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
   };
 
   const handleSave = () => {
-    onSave(theme, presetName);
+    onSave(theme, presetName, cssTemplateId);
     onClose();
   };
 
@@ -128,6 +147,9 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
                 isPreviewMode={true}
                 showGalleryLayouts={true}
                 hideActions={true}
+                cssTemplates={cssTemplates}
+                cssTemplateId={cssTemplateId}
+                onCssTemplateChange={setCssTemplateId}
               />
             </div>
             

frontend/src/pages/admin/EventDetailsPage.tsx

@@ -58,6 +58,7 @@ import { archiveService } from '../../services/archive.service';
 import { externalMediaService } from '../../services/externalMedia.service';
 import { photosService, AdminPhoto, type PhotoFilters as PhotoFilterParams, type FeedbackFilters, type FilterSummary } from '../../services/photos.service';
 import { feedbackService, FeedbackSettings as FeedbackSettingsType } from '../../services/feedback.service';
+import { cssTemplatesService, type EnabledTemplate } from '../../services/cssTemplates.service';
 import { ThemeConfig, GALLERY_THEME_PRESETS } from '../../types/theme.types';
 
 const resolveShareLink = (link: string): string => {
@@ -141,6 +142,7 @@ export const EventDetailsPage: React.FC = () => {
   type EditFormState = {
     welcome_message: string;
     color_theme: string;
+    css_template_id: number | null;
     expires_at: string;
     allow_user_uploads: boolean;
     upload_category_id: number | null;
@@ -164,6 +166,7 @@ export const EventDetailsPage: React.FC = () => {
   const [editForm, setEditForm] = useState<EditFormState>({
     welcome_message: '',
     color_theme: '',
+    css_template_id: null,
     expires_at: '',
     allow_user_uploads: false,
     upload_category_id: null,
@@ -207,7 +210,17 @@ export const EventDetailsPage: React.FC = () => {
   const [showRenameDialog, setShowRenameDialog] = useState(false);
   const [currentTheme, setCurrentTheme] = useState<ThemeConfig | null>(null);
   const [currentPresetName, setCurrentPresetName] = useState<string>('default');
-  
+  const [cssTemplates, setCssTemplates] = useState<EnabledTemplate[]>([]);
+
+  // Fetch CSS templates when component mounts or editing starts
+  useEffect(() => {
+    if (isEditing) {
+      cssTemplatesService.getEnabledTemplates()
+        .then(setCssTemplates)
+        .catch(err => console.error('Failed to load CSS templates:', err));
+    }
+  }, [isEditing]);
+
   // Photo filters state
   const [photoFilters, setPhotoFilters] = useState<PhotoFilterParams>({
     category_id: undefined as number | null | undefined,
@@ -375,6 +388,7 @@ export const EventDetailsPage: React.FC = () => {
     setEditForm({
       welcome_message: event.welcome_message || '',
       color_theme: event.color_theme || '',
+      css_template_id: event.css_template_id || null,
       expires_at: format(safeParseDate(event.expires_at), 'yyyy-MM-dd'),
       allow_user_uploads: event.allow_user_uploads || false,
       upload_category_id: event.upload_category_id || null,
@@ -474,6 +488,7 @@ export const EventDetailsPage: React.FC = () => {
       expires_at: editForm.expires_at,
       allow_user_uploads: editForm.allow_user_uploads,
       require_password: editForm.require_password,
+      css_template_id: editForm.css_template_id,
       // Download protection settings
       protection_level: editForm.protection_level,
       disable_right_click: editForm.disable_right_click,
@@ -1357,6 +1372,9 @@ export const EventDetailsPage: React.FC = () => {
                 isPreviewMode={true}
                 showGalleryLayouts={true}
                 hideActions={true}
+                cssTemplates={cssTemplates}
+                cssTemplateId={editForm.css_template_id}
+                onCssTemplateChange={(templateId) => setEditForm(prev => ({ ...prev, css_template_id: templateId }))}
               />
             </Card>
           )}