cssTemplates.js

/* cssTemplates.js
 *
 * CSS Template Strings for CSSGnomme Theme Overlay Generation
 * Separated from overlayThemeManager.js for better organization and string pooling
 * OPTIMIZATION: Reusable templates reduce memory allocation during theme generation
 */

/* exported CSSTemplates */

const ExtensionUtils = imports.misc.extensionUtils;
const Me = ExtensionUtils.getCurrentExtension();
const Constants = Me.imports.constants.Constants;

/**
 * CSS Template Generator
 * Provides reusable CSS template strings with parameter substitution
 * All templates are cached in memory for reuse across multiple theme generations
 */
var CSSTemplates = class CSSTemplates {

    /**
     * Initialize CSS template cache
     * Templates are compiled once and reused for performance
     */
    constructor() {
        // Cache compiled templates for reuse
        this._templateCache = new Map();
    }

    // ===== GTK THEME IMPORT TEMPLATES =====

    /**
     * Generate GTK theme import statement
     * @param {string} sourceThemePath - Path to source theme CSS
     * @param {boolean} isDark - Is dark variant
     * @returns {string} CSS import statement
     */
    getGtkImport(sourceThemePath, isDark) {
        const variant = isDark ? 'dark' : 'light';
        return `/* Base theme import - tint removed, original styles preserved */\n@import url('${sourceThemePath}');\n\n`;
    }

    /**
     * Generate GTK base CSS wrapper
     * @param {string} version - GTK version (gtk-3.0, gtk-4.0)
     * @param {string} modifiedCss - Modified CSS content
     * @returns {string} Complete CSS with header
     */
    getGtkBaseCssWrapper(version, modifiedCss) {
        return `/* CSSGnomme Overlay - ${version} Base Theme
 * Original theme CSS with Zorin tint colors removed
 * Preserves all other theme styling
 */

${modifiedCss}
`;
    }

    // ===== PANEL & POPUP COLOR OVERRIDES =====

    /**
     * Generate panel color override CSS
     * @param {string} panelColor - Panel color (rgba format)
     * @param {number} opacity - Panel opacity (0-1)
     * @param {boolean} applyRadius - Apply border radius
     * @param {number} borderRadius - Border radius value
     * @returns {string} Panel override CSS
     */
    getPanelColorOverride(panelColor, opacity, applyRadius, borderRadius) {
        // Cache key for this combination
        const cacheKey = `panel_${panelColor}_${opacity}_${applyRadius}_${borderRadius}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const radiusRule = applyRadius ? `border-radius: ${borderRadius}px;` : '';

        const css = `
/* Panel Background Override */
.panel {
    background-color: ${panelColor} !important;
    ${radiusRule}
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    /**
     * Generate popup menu color override CSS
     * @param {string} popupColor - Popup color (rgba format)
     * @param {number} opacity - Popup opacity (0-1)
     * @param {boolean} applyRadius - Apply border radius
     * @param {number} borderRadius - Border radius value
     * @returns {string} Popup override CSS
     */
    getPopupColorOverride(popupColor, opacity, applyRadius, borderRadius) {
        const cacheKey = `popup_${popupColor}_${opacity}_${applyRadius}_${borderRadius}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const radiusRule = applyRadius ? `border-radius: ${borderRadius}px;` : '';

        const css = `
/* Popup Menu Background Override */
.popup-menu,
.popup-menu-content {
    background-color: ${popupColor} !important;
    ${radiusRule}
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    // ===== BLUR EFFECTS =====

    /**
     * Generate backdrop-filter CSS only (for flexible usage)
     * @param {number} radius - Blur radius
     * @param {number} saturate - Saturation multiplier
     * @param {number} contrast - Contrast multiplier
     * @param {number} brightness - Brightness multiplier
     * @returns {string} Backdrop-filter CSS or empty string if disabled
     */
    getBackdropFilter(radius, saturate, contrast, brightness) {
        if (radius <= 0) return "";

        const cacheKey = `backdrop_${radius}_${saturate}_${contrast}_${brightness}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const css = `backdrop-filter: blur(${radius}px) saturate(${saturate}) contrast(${contrast}) brightness(${brightness}) !important;`;
        this._templateCache.set(cacheKey, css);
        return css;
    }

    // ===== GNOME SHELL SPECIFIC =====

    /**
     * Generate Shell panel styling
     * @param {string} panelColor - Panel background color
     * @param {boolean} applyRadius - Apply border radius
     * @param {number} borderRadius - Border radius value
     * @returns {string} Shell panel CSS
     */
    getShellPanelStyle(panelColor, applyRadius, borderRadius) {
        const cacheKey = `shell_panel_${panelColor}_${applyRadius}_${borderRadius}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const radiusRule = applyRadius ? `border-radius: ${borderRadius}px;` : '';

        const css = `
/* GNOME Shell Panel */
#panel {
    background-color: ${panelColor} !important;
    ${radiusRule}
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    /**
     * Generate Shell popup menu styling
     * @param {string} popupColor - Popup background color
     * @param {boolean} applyRadius - Apply border radius
     * @param {number} borderRadius - Border radius value
     * @returns {string} Shell popup CSS
     */
    getShellPopupStyle(popupColor, applyRadius, borderRadius) {
        const cacheKey = `shell_popup_${popupColor}_${applyRadius}_${borderRadius}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const radiusRule = applyRadius ? `border-radius: ${borderRadius}px;` : '';

        const css = `
/* GNOME Shell Popup Menus */
.popup-menu-boxpointer,
.popup-menu-content,
.modal-dialog {
    background-color: ${popupColor} !important;
    ${radiusRule}
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    // ===== ZORIN ACCENT COLOR INTEGRATION =====

    /**
     * Generate Zorin accent color CSS
     * @param {string} accentRgb - Accent color in rgb() format
     * @param {boolean} isDark - Is dark theme
     * @returns {string} Accent color CSS
     */
    getZorinAccentStyle(accentRgb, isDark) {
        const cacheKey = `zorin_accent_${accentRgb}_${isDark}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        // Enhanced pastel for dark themes
        const displayColor = isDark ? this._enhancePastelForDark(accentRgb) : accentRgb;
        const fgColor = isDark ? "#ffffff" : "#161c1f"; // Contrasting text color

        const css = `
/* Zorin Theme Accent Color */
@define-color accent_color ${displayColor};
@define-color accent_bg_color ${displayColor};

/* Switch widget - track (container) */
switch:checked {
    background-color: ${displayColor};
    background-image: image(${displayColor});
    border-color: ${displayColor};
}

/* Switch slider - contrasting color for visibility */
switch:checked > slider {
    background-color: ${fgColor};
}

/* Checkboxes and Radio buttons - use accent color */
check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
    background-color: ${displayColor};
    background-image: image(${displayColor});
    border-color: ${displayColor};
    color: ${fgColor};
    box-shadow: none;
}

/* Note: Checkbox/Radio icons use theme's own assets (e.g., Fluent uses assets/scalable/*.svg)
 * We do NOT override -gtk-icon-source here to preserve theme's icon styling
 */

/* Progress bars */
progressbar > trough > progress {
    background-color: ${displayColor};
}

/* Selected items in lists */
row.activatable:selected,
.view:selected,
.view:selected:focus,
.view text:selected,
.view text:selected:focus,
textview text:selected,
textview text:selected:focus,
iconview:selected,
iconview:selected:focus,
flowbox > flowboxchild:selected,
.content-view .tile:selected {
    background-color: ${displayColor};
    color: ${fgColor};
}

/* Links hover state */
link:hover {
    color: ${displayColor};
}

/* Spinbutton/Entry progress indicator */
spinbutton > progress > trough > progress,
entry > progress > trough > progress {
    background-color: ${displayColor};
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    // ===== GTK4 SPECIFIC OVERRIDES =====

    /**
     * Get GTK4-specific CSS overrides
     * @param {number} borderRadius - Border radius value
     * @returns {string} GTK4 override CSS
     */
    getGtk4Overrides(borderRadius) {
        const cacheKey = `gtk4_overrides_${borderRadius}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const css = `
/* GTK4 Specific Overrides */
.card {
    background: @cssgnomme_popup_bg;
    border-radius: ${borderRadius}px;
}

popover.menu {
    border-radius: ${borderRadius}px;
}

window {
    border-radius: ${borderRadius}px;
}

window > box > box > box {
    border-radius: ${borderRadius}px;
}

/* GTK4 window decorations */
windowhandle,
windowcontrols {
    border-radius: ${borderRadius}px ${borderRadius}px 0 0;
}

headerbar {
    border-radius: ${borderRadius}px ${borderRadius}px 0 0;
}

/* Fix ComboRow dropdown popup border (Adwaita preferences) */
.menu.background {
    border: none;
    box-shadow: none;
    background: transparent;
}

.menu > arrow {
    border: none;
    background: transparent;
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    // ===== SHADOW EFFECTS =====

    /**
     * Generate shadow effect CSS
     * @param {string} shadowColor - Shadow color
     * @param {number} strength - Shadow strength (0-1)
     * @returns {string} Shadow CSS
     */
    getShadowStyle(shadowColor, strength) {
        const cacheKey = `shadow_${shadowColor}_${strength}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const spread = Math.round(strength * Constants.SHADOW_SPREAD_MULTIPLIER);

        const css = `
/* Shadow Effects */
.panel,
.popup-menu {
    box-shadow: 0 2px ${spread}px ${shadowColor};
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    // ===== UTILITY METHODS =====

    /**
     * Clear template cache (for cleanup)
     */
    clearCache() {
        this._templateCache.clear();
    }

    /**
     * Get cache size for monitoring
     * @returns {number} Number of cached templates
     */
    getCacheSize() {
        return this._templateCache.size;
    }

    /**
     * Enhance pastel colors for dark themes
     * @private
     * @param {string} rgbColor - Color in rgb() format
     * @returns {string} Enhanced color
     */
    _enhancePastelForDark(rgbColor) {
        // Parse rgb(r, g, b) format
        const match = rgbColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
        if (!match) return rgbColor;

        const r = parseInt(match[1]);
        const g = parseInt(match[2]);
        const b = parseInt(match[3]);

        // Use ThemeUtils if available, otherwise simple boost
        try {
            const ThemeUtils = Me.imports.themeUtils.ThemeUtils;
            const enhanced = ThemeUtils.enhancePastelColor([r, g, b], 0.3, 0.25);
            return `rgb(${enhanced[0]}, ${enhanced[1]}, ${enhanced[2]})`;
        } catch (e) {
            // Fallback: Simple saturation boost
            const max = Math.max(r, g, b);
            const min = Math.min(r, g, b);
            const delta = max - min;

            if (delta === 0) return rgbColor;

            const boost = 1.3;
            const newR = Math.min(255, Math.round(r + (r - min) * boost * 0.3));
            const newG = Math.min(255, Math.round(g + (g - min) * boost * 0.3));
            const newB = Math.min(255, Math.round(b + (b - min) * boost * 0.3));

            return `rgb(${newR}, ${newG}, ${newB})`;
        }
    }

    /**
     * Generate complete CSS from multiple sections
     * @param {Object} sections - Object with section names as keys and CSS strings as values
     * @returns {string} Complete CSS document
     */
    assembleCss(sections) {
        const parts = [];

        // Add header
        parts.push(`/* CSSGnomme Dynamic Theme Overlay */\n/* Generated: ${new Date().toISOString()} */\n`);

        // Add each section with separator
        for (const [name, css] of Object.entries(sections)) {
            if (css && css.trim()) {
                parts.push(`\n/* ========== ${name.toUpperCase()} ========== */\n`);
                parts.push(css);
            }
        }

        return parts.join('\n');
    }

    // ===== GNOME SHELL COMPONENT CSS GENERATORS =====

    /**
     * Generate panel-specific CSS for GNOME Shell
     * This is a large CSS template that defines panel, panel buttons, and Zorin Taskbar styling
     *
     * @param {Object} vars - Complete variables object from _extractShellCssVars
     * @param {number} vars.borderRadius - Border radius in pixels
     * @param {number} vars.borderWidth - Border width in pixels
     * @param {boolean} vars.applyPanelRadius - Apply border radius to panel
     * @param {boolean} vars.enableZorinIntegration - Enable Zorin-specific styling
     * @param {boolean} vars.isZorinTheme - Is current theme a Zorin theme
     * @param {boolean} vars.isLightTheme - Is light theme mode
     * @param {string} vars.accentRgb - Accent color RGB (e.g., "59, 66, 82")
     * @param {string} vars.borderColor - Border color (rgba format)
     * @param {string} vars.hoverRgb - Hover state RGB
     * @param {number} vars.hoverOpacity - Hover state opacity
     * @param {number} vars.activeOpacity - Active state opacity
     * @param {string} vars.panelBackgroundCss - Panel background CSS rule
     * @param {string} vars.backdropFilter - Backdrop filter CSS rule
     * @param {string} vars.shadowColor - Shadow color (rgba format)
     * @param {number} vars.shadowPanelBlur - Panel shadow blur radius
     * @param {number} vars.shadowButtonBlur - Button shadow blur radius
     * @param {number} vars.shadowInsetBlur - Inset shadow blur radius
     * @param {number} vars.blurRadius - Blur radius in pixels
     * @param {number} vars.blurSaturate - Blur saturation multiplier
     * @param {number} vars.blurContrast - Blur contrast multiplier
     * @param {number} vars.blurBrightness - Blur brightness multiplier
     * @param {string} vars.blurBackgroundOverlay - Blur background overlay color
     * @returns {string} Panel CSS content
     */
    getPanelCss(vars) {
        const {
            borderRadius,
            borderWidth,
            applyPanelRadius,
            enableZorinIntegration,
            isZorinTheme,
            isLightTheme,
            accentRgb,
            borderColor,
            hoverRgb,
            hoverOpacity,
            activeOpacity,
            panelBackgroundCss,
            backdropFilter,
            shadowColor,
            shadowPanelBlur,
            shadowButtonBlur,
            shadowInsetBlur,
            blurRadius,
            blurSaturate,
            blurContrast,
            blurBrightness,
            blurBackgroundOverlay
        } = vars;

        return `
/* Panel - Using !important to override Zorin Taskbar inline styles */
#panel {
    ${panelBackgroundCss}
    ${
        applyPanelRadius
            ? `border-radius: ${borderRadius}px !important;`
            : "/* border-radius disabled by user preference */"
    }
    border: ${borderWidth}px solid ${borderColor} !important;
    backdrop-filter: blur(${blurRadius}px) saturate(${blurSaturate}) contrast(${blurContrast}) brightness(${blurBrightness}) !important;
    -webkit-backdrop-filter: blur(${blurRadius}px) saturate(${blurSaturate}) contrast(${blurContrast}) brightness(${blurBrightness}) !important;
    box-shadow: ${borderWidth > 0 ? `0 3px ${shadowPanelBlur}px ${shadowColor}, inset 0 0 ${shadowInsetBlur}px ${blurBackgroundOverlay}` : `0 3px ${shadowPanelBlur}px ${shadowColor}`} !important;
}

#panel .panel-button {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.panelButton}) !important;
    transition: all 150ms ease-in-out !important;
}

/* Panel button hover - subtle background color change */
#panel .panel-button:hover {
    background-color: rgba(${hoverRgb}, ${hoverOpacity}) !important;
}

${
    isZorinTheme
        ? `
/* Zorin Theme: Clock display fix - hide parent hover, apply to inner .clock element */
#panel .panel-button.clock-display {
    border-radius: 0 !important;
}

#panel .panel-button.clock-display:hover {
    background-color: transparent !important;
}

#panel .panel-button.clock-display .clock {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.panelButton}) !important;
    transition: all 150ms ease-in-out !important;
}

#panel .panel-button.clock-display:hover .clock {
    background-color: rgba(${hoverRgb}, ${hoverOpacity}) !important;
}

/* Clock active/focus/checked state - stronger highlight on inner .clock */
#panel .panel-button.clock-display:active .clock,
#panel .panel-button.clock-display:focus .clock,
#panel .panel-button.clock-display:checked .clock {
    background-color: rgba(${hoverRgb}, ${activeOpacity}) !important;
}

/* Ensure parent stays transparent even when active/focus/checked */
#panel .panel-button.clock-display:active,
#panel .panel-button.clock-display:focus,
#panel .panel-button.clock-display:checked {
    background-color: transparent !important;
}
`
        : ""
}

/* Panel button active/checked - stronger background */
#panel .panel-button:active,
#panel .panel-button:focus,
#panel .panel-button:checked {
    background-color: rgba(${hoverRgb}, ${activeOpacity}) !important;
}

${
    isZorinTheme && isLightTheme
        ? `
/* Zorin Light Theme: Accent color for active/checked icons */
#panel .panel-button:active StIcon,
#panel .panel-button:focus StIcon,
#panel .panel-button:checked StIcon {
    color: rgb(${accentRgb}) !important;
}
`
        : ""
}

${
    enableZorinIntegration
        ? `
/* Zorin Taskbar specific enhancements - only if integration enabled */
.zorintaskbarMainPanel {
    ${panelBackgroundCss}
    ${backdropFilter}
    ${
        applyPanelRadius
            ? `border-radius: ${borderRadius}px !important;`
            : "/* border-radius disabled by user preference */"
    }
    border: ${borderWidth}px solid ${borderColor} !important;
    box-shadow: 0 2px ${shadowButtonBlur}px ${shadowColor} !important;
}

.zorintaskbarMainPanel .panel-button {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.panelButton}) !important;
    transition: all 150ms ease-in-out !important;
}

/* Zorin Taskbar button hover - subtle background color change */
.zorintaskbarMainPanel .panel-button:hover {
    background-color: rgba(${hoverRgb}, ${hoverOpacity}) !important;
}

${
    isZorinTheme
        ? `
/* Zorin Theme: Clock display fix - hide parent hover, apply to inner .clock element */
.zorintaskbarMainPanel .panel-button.clock-display {
    border-radius: 0 !important;
}

.zorintaskbarMainPanel .panel-button.clock-display:hover {
    background-color: transparent !important;
}

.zorintaskbarMainPanel .panel-button.clock-display .clock {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.panelButton}) !important;
    transition: all 150ms ease-in-out !important;
}

.zorintaskbarMainPanel .panel-button.clock-display:hover .clock {
    background-color: rgba(${hoverRgb}, ${hoverOpacity}) !important;
}

/* Clock active/focus/checked state - stronger highlight on inner .clock */
.zorintaskbarMainPanel .panel-button.clock-display:active .clock,
.zorintaskbarMainPanel .panel-button.clock-display:focus .clock,
.zorintaskbarMainPanel .panel-button.clock-display:checked .clock {
    background-color: rgba(${hoverRgb}, ${activeOpacity}) !important;
}

/* Ensure parent stays transparent even when active/focus/checked */
.zorintaskbarMainPanel .panel-button.clock-display:active,
.zorintaskbarMainPanel .panel-button.clock-display:focus,
.zorintaskbarMainPanel .panel-button.clock-display:checked {
    background-color: transparent !important;
}
`
        : ""
}

/* Zorin Taskbar button active/checked - stronger background */
.zorintaskbarMainPanel .panel-button:active,
.zorintaskbarMainPanel .panel-button:focus,
.zorintaskbarMainPanel .panel-button:checked {
    background-color: rgba(${hoverRgb}, ${activeOpacity}) !important;
}

${
    isZorinTheme && isLightTheme
        ? `
/* Zorin Light Theme: Accent color for active/checked icons in taskbar */
.zorintaskbarMainPanel .panel-button:active StIcon,
.zorintaskbarMainPanel .panel-button:focus StIcon,
.zorintaskbarMainPanel .panel-button:checked StIcon {
    color: rgb(${accentRgb}) !important;
}
`
        : ""
}
`
        : ""
}`;
    }

    /**
     * Generate popup/menu-specific CSS for GNOME Shell
     * This is a large CSS template that defines popup menus, quick settings, dash, notifications, OSD, app switcher
     *
     * @param {Object} vars - Complete variables object from _extractShellCssVars
     * @param {number} vars.borderRadius - Border radius in pixels
     * @param {number} vars.borderWidth - Border width in pixels
     * @param {boolean} vars.enableZorinIntegration - Enable Zorin-specific styling
     * @param {boolean} vars.isZorinTheme - Is current theme a Zorin theme
     * @param {string} vars.accentRgb - Accent color RGB
     * @param {string} vars.borderColor - Border color (rgba format)
     * @param {string} vars.blurBackgroundOverlay - Blur background overlay color
     * @param {string} vars.backdropFilter - Backdrop filter CSS rule
     * @param {string} vars.popupBackgroundCss - Popup background CSS rule
     * @param {string} vars.previewBackgroundCss - Preview background CSS rule
     * @param {string} vars.shadowColor - Shadow color (rgba format)
     * @param {number} vars.shadowPopupBlur - Popup shadow blur radius
     * @param {number} vars.shadowInsetBlur - Inset shadow blur radius
     * @param {boolean} vars.applyPanelRadius - Apply border radius (used for dash)
     * @returns {string} Popup/menu CSS content
     */
    getPopupCss(vars) {
        const {
            borderRadius,
            borderWidth,
            enableZorinIntegration,
            isZorinTheme,
            accentRgb,
            borderColor,
            blurBackgroundOverlay,
            backdropFilter,
            popupBackgroundCss,
            previewBackgroundCss,
            shadowColor,
            shadowPopupBlur,
            shadowInsetBlur
        } = vars;

        // Generate theme-aware shadow with conditional inset glow (glossy look only with border)
        const simpleShadow = vars.borderWidth > 0
            ? `box-shadow: 0 2px ${shadowPopupBlur}px ${shadowColor}, inset 0 0 ${shadowInsetBlur}px ${blurBackgroundOverlay} !important;`
            : `box-shadow: 0 2px ${shadowPopupBlur}px ${shadowColor} !important;`;

        return `
/* Popup Menus - outer wrapper (transparent, no visual styling) */
.popup-menu,
.app-menu,
.panel-menu {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Quick Settings - wrapper only (no border here) - FORCE OVERRIDE */
.quick-settings.quick-settings,
.quick-settings-menu.quick-settings-menu,
#panel .quick-settings,
#panel .quick-settings-menu {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Reset any pseudo-elements that might create ghost borders */
.popup-menu::before,
.popup-menu::after,
.quick-settings::before,
.quick-settings::after,
.quick-settings-menu::before,
.quick-settings-menu::after {
    display: none !important;
}

/* Popup menu content - actual visible container with border */
.popup-menu-content,
.popup-menu-box {
    ${popupBackgroundCss}
    border-radius: ${borderRadius}px !important;
    border: ${borderWidth}px solid ${borderColor} !important;
    ${simpleShadow}
    ${backdropFilter}
    padding: ${Constants.UI_PADDING.previewHeader.vertical}px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Quick Settings grid - visible container with border */
.quick-settings-grid {
    ${popupBackgroundCss}
    border-radius: ${borderRadius}px !important;
    border: ${borderWidth}px solid ${borderColor} !important;
    ${simpleShadow}
    ${backdropFilter}
    padding: ${Constants.UI_PADDING.previewHeader.horizontal}px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.popup-menu-item {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.popupItem}) !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}

${
    !isZorinTheme && enableZorinIntegration
        ? `
/* Fluent Theme Enhancement: Zorin-style menu improvements when integration enabled */

/* Visible separator line for better menu organization */
.popup-separator-menu-item {
    margin: 3px 0 !important;
    padding: 0 !important;
}

.popup-separator-menu-item .popup-separator-menu-item-separator {
    height: 1px !important;
    background-color: rgba(${accentRgb}, 0.2) !important;
    margin: 0 4px !important;
}

/* Enhanced menu item spacing and padding (Zorin-style) */
.popup-menu-item {
    padding: 7.5px 12px !important;
    border-radius: 8px !important;
    transition-duration: 150ms !important;
}

.popup-menu-item:ltr {
    padding-left: 8px !important;
}

.popup-menu-item:rtl {
    padding-right: 8px !important;
}

/* Sub-menu separators with proper margins */
.popup-sub-menu .popup-separator-menu-item {
    background-color: transparent !important;
}

.popup-sub-menu .popup-separator-menu-item:ltr {
    margin-right: 2.5em !important;
}

.popup-sub-menu .popup-separator-menu-item:rtl {
    margin-left: 2.5em !important;
}

.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.subtle}) !important;
}
`
        : ""
}

/* Overview - clean with accent border */
.overview-controls {
    border-radius: ${borderRadius}px;
}

/* Dash - strong accent border */
#dash {
    ${popupBackgroundCss}
    ${
        vars.applyPanelRadius
            ? `border-radius: ${borderRadius}px !important;`
            : "/* border-radius disabled by user preference */"
    }
    border: ${borderWidth}px solid rgba(${accentRgb}, 1.0) !important;
    box-shadow: 0 4px ${shadowPopupBlur}px ${shadowColor} !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Reset dash pseudo-elements */
#dash::before,
#dash::after {
    display: none !important;
}

/* Dash content with padding */
#dash > * {
    padding: 8px;
}

/* Message Tray / Notifications - use popup background and transparency */
.message-list-section,
.message {
    ${popupBackgroundCss}
    border-radius: ${borderRadius}px !important;
    border: ${borderWidth}px solid ${borderColor} !important;
    ${simpleShadow}
    ${backdropFilter}
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* OSD (Volume, Brightness popups) - strong accent */
.osd-window {
    border-radius: ${borderRadius}px !important;
    border: ${borderWidth}px solid rgba(${accentRgb}, 1.0) !important;
    ${simpleShadow}
    ${backdropFilter}
    padding: 16px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* Running App Indicators - use accent color */
.app-well-app-running-dot {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

StWidget.focused .app-well-app-running-dot${
            enableZorinIntegration
                ? `,
#zorintaskbarScrollview StWidget.focused .app-well-app-running-dot`
                : ""
        } {
    background-color: ${borderColor} !important;
}

${
    enableZorinIntegration
        ? `
/* Zorin Taskbar - Enhanced hover for app buttons (favorites and active apps) */
#zorintaskbarScrollview .app-well-app:hover .overview-icon {
    background-color: rgba(${accentRgb}, 0.3) !important;
    transition: background-color 150ms ease-out !important;
}

#zorintaskbarScrollview .app-well-app:active .overview-icon {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.active}) !important;
}

/* Zorin Menu - Add right padding to categories to prevent collision with slider */
.shortcuts-box {
    padding-right: 8px !important;
}

.popup-menu-item.category-menu-item {
    padding-right: 8px !important;
}

.vertical-separator {
    margin-right: 8px !important;
}
`
        : ""
}

/* GTK4/Adwaita - Fix ComboRow popup styling (preferences dropdown) */
.menu.background {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* App Switcher (Alt+Tab) - Complete Styling */
.switcher-popup {
    padding: 0 !important;
    spacing: 24px !important;
}

.switcher-list {
    ${popupBackgroundCss}
    border-radius: ${borderRadius}px !important;
    border: ${borderWidth}px solid ${borderColor} !important;
    ${simpleShadow}
    ${backdropFilter}
    padding: 10px !important;
    box-sizing: border-box !important;
}

.switcher-list .switcher-list-item-container {
    spacing: 12px !important;
}

/* App Switcher item boxes - base state */
.switcher-list .item-box {
    background-color: transparent !important;
    border-radius: calc(${borderRadius}px * 0.75) !important;
    padding: 6px !important;
    spacing: 6px !important;
    border: 2px solid transparent !important;
    transition-duration: 150ms !important;
    text-align: center !important;
}

/* App Switcher item hover */
.switcher-list .item-box:hover {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.subtle}) !important;
}

/* App Switcher item selected/focused - use accent color */
.switcher-list .item-box:selected,
.switcher-list .item-box:focus {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.medium}) !important;
    border-color: ${borderColor} !important;
}

.switcher-list .item-box:selected:hover,
.switcher-list .item-box:focus:hover {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.strong}) !important;
}

/* App Switcher arrow indicator */
.switcher-arrow {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.switcher-arrow:highlighted {
    border-color: ${borderColor} !important;
    color: ${borderColor} !important;
}

/* Zorin Taskbar - Window Preview Tooltip (hover over taskbar app groups) */
.dash-label {
    ${previewBackgroundCss}
    border-radius: ${borderRadius}px !important;
    border: ${borderWidth}px solid ${borderColor} !important;
    ${simpleShadow}
    ${backdropFilter}
    padding: ${Constants.UI_PADDING.dashLabel.vertical}px ${Constants.UI_PADDING.dashLabel.horizontal}px !important;
    box-sizing: border-box !important;
}

/* Zorin Taskbar - Window Preview Container */
.preview-container {
    ${previewBackgroundCss}
    border-radius: ${borderRadius}px !important;
    ${simpleShadow}
    ${backdropFilter}
    /* No explicit border - Zorin Taskbar clips it due to fixed layout */
}

/* Zorin Taskbar - Window Preview Container states - override inline styles */
/* Zorin Taskbar uses inline setStyle() on focus/hover which overrides CSS */
/* We need to force our background with multiple state selectors */
.preview-container,
.preview-container:hover,
.preview-container:focus,
.preview-container:active,
.preview-container:selected {
    background-color: ${previewBackgroundCss.match(/rgba\([^)]+\)/)?.[0] || "rgba(36, 31, 49, 0.1)"} !important;
}

/* Zorin Taskbar - Window Preview Header Box */
.preview-header-box {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.popupItem}) !important;
    padding: ${Constants.UI_PADDING.previewHeader.vertical}px ${Constants.UI_PADDING.previewHeader.horizontal}px !important;
    box-sizing: border-box !important;
}`;
    }

    // ===== GTK OVERLAY CSS COMPONENTS =====

    /**
     * Generate GTK CSS variables section
     * @param {Object} colorSettings - Color settings from _extractColorSettings
     * @returns {string} CSS variables
     */
    getGtkCssVariables(colorSettings) {
        return `
/*** CSSGnomme CSS Variables ***/

@define-color cssgnomme_panel_bg ${colorSettings.panel.color};
@define-color cssgnomme_panel_fg ${colorSettings.panel.fgCss};
@define-color cssgnomme_panel_hover ${colorSettings.panel.hoverCss};
@define-color cssgnomme_panel_solid_bg ${colorSettings.panel.solidCss};

@define-color cssgnomme_popup_bg ${colorSettings.popup.color};
@define-color cssgnomme_popup_fg ${colorSettings.popup.fgCss};
@define-color cssgnomme_popup_hover ${colorSettings.popup.hoverCss};
`;
    }

    /**
     * Generate HeaderBar styling
     * @param {number} borderRadius - Border radius value
     * @returns {string} HeaderBar CSS
     */
    getGtkHeaderBarStyle(borderRadius) {
        return `
/* HeaderBar Styling - only top corners rounded (window continues below) */
headerbar {
    background: @cssgnomme_panel_solid_bg;
    color: @cssgnomme_panel_fg;
    border-radius: ${borderRadius}px ${borderRadius}px 0 0;
}

headerbar button {
    border-radius: calc(${borderRadius}px * ${Constants.BORDER_RADIUS_SCALING.panelButton});
}

headerbar button:hover {
    background: @cssgnomme_panel_hover;
}
`;
    }

    /**
     * Generate Window styling (CSD decorations)
     * @param {number} borderRadius - Border radius value
     * @returns {string} Window CSS
     */
    getGtkWindowStyle(borderRadius) {
        return `
/* Window Styling - Client-Side Decorations */
window.csd,
window.csd decoration,
window.solid-csd decoration {
    border-radius: ${borderRadius}px;
}

/* Window background */
window.background {
    border-radius: ${borderRadius}px;
}

/* Dialogs and floating windows */
dialog.background,
.dialog-vbox {
    border-radius: ${borderRadius}px;
}
`;
    }

    /**
     * Generate Popover/Menu styling
     * @param {number} borderRadius - Border radius value
     * @returns {string} Popover CSS
     */
    getGtkPopoverStyle(borderRadius) {
        return `
/* Popover/Menu Styling */
popover.background,
.popup-menu {
    background: @cssgnomme_popup_bg;
    color: @cssgnomme_popup_fg;
    border-radius: ${borderRadius}px;
}

popover.background > contents {
    background: transparent;
}

/* Nautilus and other GTK4 app dropdowns */
menubutton > popover > contents {
    background: @cssgnomme_popup_bg;
    border-radius: ${borderRadius}px;
}

/* Ensure dropdown menus are not transparent */
menubutton popover.background {
    background: @cssgnomme_popup_bg !important;
}

/* GTK4 ComboBox dropdown */
combobox > popover > contents,
combobox popover.background {
    background: @cssgnomme_popup_bg;
    color: @cssgnomme_popup_fg;
}
`;
    }

    /**
     * Generate Tooltip styling
     * @param {number} borderRadius - Border radius value
     * @returns {string} Tooltip CSS
     */
    getGtkTooltipStyle(borderRadius) {
        return `
/* Tooltip Styling */
tooltip.background {
    background: @cssgnomme_popup_bg;
    color: @cssgnomme_popup_fg;
    border-radius: calc(${borderRadius}px * 0.5);
}
`;
    }

    /**
     * Generate Fluent theme titlebar fix (non-Zorin themes with Zorin integration)
     * @param {boolean} isZorinTheme - Is current theme a Zorin theme
     * @param {boolean} enableZorinIntegration - Is Zorin integration enabled
     * @returns {string} Fluent titlebar CSS or empty string
     */
    getFluentTitlebarFix(isZorinTheme, enableZorinIntegration) {
        if (isZorinTheme || !enableZorinIntegration) {
            return '';
        }

        return `
/* Fluent Theme: Window titlebar styling to match Zorin behavior when integration enabled */
/* IMPORTANT: This must be at the end to override Fluent's own headerbar rules */

/* Main titlebar/headerbar selectors - cover all window types */
.titlebar:not(headerbar),
headerbar,
window.csd > .titlebar:not(headerbar),
window.csd > headerbar,
window.solid-csd > .titlebar,
.solid-csd headerbar,
.default-decoration.titlebar:not(headerbar),
headerbar.default-decoration {
    background-color: @cssgnomme_panel_bg !important;
    background-image: none !important;
    color: @cssgnomme_panel_fg !important;
}

/* Backdrop state */
.titlebar:backdrop:not(headerbar),
headerbar:backdrop,
window.csd > .titlebar:backdrop:not(headerbar),
window.csd > headerbar:backdrop {
    background-color: @cssgnomme_panel_bg !important;
    background-image: none !important;
    color: @cssgnomme_panel_fg !important;
    opacity: 0.9;
}

/* Title and subtitle text */
.titlebar:not(headerbar) .title,
headerbar .title {
    color: @cssgnomme_panel_fg;
}

.titlebar:not(headerbar) .subtitle,
headerbar .subtitle {
    color: @cssgnomme_panel_fg;
    opacity: 0.7;
}
`;
    }

    /**
     * Generate complete GTK overlay CSS (imports + overrides)
     * @param {string} extensionName - Extension name
     * @param {string} timestamp - Generation timestamp
     * @param {string} version - GTK version (gtk-3.0, gtk-4.0)
     * @param {string} importSource - Import source path
     * @param {boolean} baseThemeExists - Does base-theme.css exist
     * @param {boolean} isDark - Is dark variant
     * @param {Object} colorSettings - Color settings from _extractColorSettings
     * @param {number} borderRadius - Border radius value
     * @param {Array|null} accentColor - Accent color [r, g, b] or null
     * @param {boolean} themeIsLight - Is theme light mode
     * @param {boolean} isZorinTheme - Is Zorin theme
     * @param {boolean} enableZorinIntegration - Enable Zorin integration
     * @returns {string} Complete GTK CSS
     */
    getGtkOverlayCss(
        extensionName,
        timestamp,
        version,
        importSource,
        baseThemeExists,
        isDark,
        colorSettings,
        borderRadius,
        accentColor,
        themeIsLight,
        isZorinTheme,
        enableZorinIntegration
    ) {
        const importNote = baseThemeExists
            ? (importSource.includes('base-theme')
                ? 'Modified base theme (Zorin tint removed/reduced)'
                : 'Original theme')
            : 'Original theme (base-theme not found, using fallback)';

        return `/*
 * ${extensionName} Overlay Theme - ${isDark ? 'Dark' : 'Light'} Variant
 * Generated: ${timestamp}
 * Source: ${importNote}
 * GTK Version: ${version}
 */

/* Import ${baseThemeExists ? (importSource.includes('base-theme') ? 'modified base theme (Zorin tint removed/reduced)' : 'original theme') : 'original theme (fallback)'} */
@import url("${importSource}");

${this.getGtkCssVariables(colorSettings)}

/*** ${extensionName} Overrides ***/

${this.getGtkHeaderBarStyle(borderRadius)}

${this.getGtkWindowStyle(borderRadius)}

${this.getGtkPopoverStyle(borderRadius)}

${this.getGtkTooltipStyle(borderRadius)}

${version === 'gtk-4.0' ? this.getGtk4Overrides(borderRadius) : ''}

${accentColor ? this.getZorinAccentStyle(`rgb(${accentColor[0]}, ${accentColor[1]}, ${accentColor[2]})`, !themeIsLight) : ''}

${this.getFluentTitlebarFix(isZorinTheme, enableZorinIntegration)}

/*** End ${extensionName} ***/
`;
    }

    /**
     * Generate Zorin-specific CSS enhancements
     * Currently provides minimal Zorin Menu category styling
     * Most Zorin-specific logic is integrated into panel and popup CSS
     *
     * @param {Object} vars - Variables object (not currently used, reserved for future)
     * @returns {string} Zorin-specific CSS content
     */
    getZorinCss(vars) {
        return `
/* Zorin Menu category arrow spacing to avoid scrollbar collision */
.apps-menu .popup-menu-item {
    padding-right: 20px !important;
}

/* Alternative: target the arrow icon specifically */
.apps-menu .popup-menu-item .popup-menu-icon:last-child {
    margin-right: 10px !important;
}
`;
    }

    // ===== SHELL THEME ZORIN INTEGRATION FIXES =====

    /**
     * Generate Shell Fluent titlebar fix CSS (uses accentRgb, not CSS variables)
     * @param {string} accentRgb - Accent color as "r, g, b" string
     * @param {boolean} isLightTheme - Whether theme is light mode
     * @returns {string} Shell titlebar fix CSS
     */
    getShellFluentTitlebarFix(accentRgb, isLightTheme) {
        const cacheKey = `shell_fluent_titlebar_${accentRgb}_${isLightTheme}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const css = `
/* CSSGnomme: Fluent Theme titlebar fix for Shell - added at end for highest specificity */

.titlebar:not(headerbar),
headerbar,
window.csd > .titlebar:not(headerbar),
window.csd > headerbar,
window.solid-csd > .titlebar,
.solid-csd headerbar,
.default-decoration.titlebar:not(headerbar),
headerbar.default-decoration {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.medium}) !important;
    background-image: none !important;
    color: ${isLightTheme ? "#2e3436" : "#eeeeec"} !important;
}

.titlebar:backdrop:not(headerbar),
headerbar:backdrop,
window.csd > .titlebar:backdrop:not(headerbar),
window.csd > headerbar:backdrop {
    background-color: rgba(${accentRgb}, ${Constants.ACCENT_HOVER_OPACITY.subtle}) !important;
    opacity: 0.9;
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    /**
     * Generate Zorin OS gradient fixes for third-party Shell themes
     * @param {string} accentRgb - Accent color as "r, g, b" string
     * @returns {string} Gradient fix CSS
     */
    getShellZorinGradientFixes(accentRgb) {
        const cacheKey = `shell_zorin_gradient_${accentRgb}`;

        if (this._templateCache.has(cacheKey)) {
            return this._templateCache.get(cacheKey);
        }

        const css = `
/* CSSGnomme: Zorin OS Gradient Fixes for Third-Party Shell Themes */
/* Fixes unwanted accent color gradient on Quick Settings, Calendar, Screenshot UI, etc. */

/* Quick Settings - Main Fix */
.quick-toggle:checked {
    transition-duration: 150ms;
    color: white;
    background-gradient-direction: none;
    box-shadow: none;
}

.quick-toggle:checked:hover,
.quick-toggle:checked:focus {
    box-shadow: 0 2px 4px rgba(${accentRgb}, 0.1);
}

.quick-toggle-menu .header .icon.active {
    color: white;
    background-gradient-direction: none;
}

/* Calendar - Today's date gradient fix */
.calendar .calendar-today {
    font-weight: 800;
    color: white !important;
    background-gradient-direction: none;
    box-shadow: 0 2px 4px rgba(${accentRgb}, 0.2);
}

.calendar .calendar-today:active,
.calendar .calendar-today:selected {
    background-gradient-direction: none;
    color: inherit;
    box-shadow: 0 2px 4px rgba(${accentRgb}, 0.2);
}

/* Screenshot UI - Button gradient fix */
.screenshot-ui-show-pointer-button:outlined,
.screenshot-ui-type-button:outlined,
.screenshot-ui-show-pointer-button:checked,
.screenshot-ui-type-button:checked {
    transition-duration: 150ms;
    color: white;
    background-gradient-direction: none;
    box-shadow: none;
}

/* General checked/active states */
#LookingGlassDialog > #Toolbar .lg-toolbar-button:checked,
.app-folder-dialog .folder-name-container .edit-folder-button:checked,
.button:checked,
.icon-button:checked {
    transition-duration: 150ms;
    color: white;
    background-gradient-direction: none;
    box-shadow: none;
}

#LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked,
.app-folder-dialog .folder-name-container .flat.edit-folder-button:checked,
.flat.button:checked,
.flat.icon-button:checked {
    transition-duration: 150ms;
    color: white;
    background-gradient-direction: none;
    box-shadow: none;
}

.modal-dialog .modal-dialog-linked-button:checked,
.hotplug-notification-item:checked,
.notification-banner .notification-button:checked {
    transition-duration: 150ms;
    color: white;
    background-gradient-direction: none;
    box-shadow: none;
}

/* Page navigation hints */
.page-navigation-hint.next:ltr,
.page-navigation-hint.previous:rtl {
    background-gradient-start: rgba(18, 51, 84, 0.05);
    background-gradient-end: transparent;
    background-gradient-direction: none;
    border-radius: 24px 0px 0px 24px;
}

.page-navigation-hint.previous:ltr,
.page-navigation-hint.next:rtl {
    background-gradient-start: transparent;
    background-gradient-end: rgba(18, 51, 84, 0.05);
    background-gradient-direction: none;
    border-radius: 0px 24px 24px 0px;
}
`;

        this._templateCache.set(cacheKey, css);
        return css;
    }

    /**
     * Assemble complete Shell CSS from component parts
     * Combines panel, popup, and Zorin CSS with header and base theme import
     *
     * @param {Object} vars - Variables object containing metadata
     * @param {string} vars.timestamp - Generation timestamp
     * @param {string} panelCss - Panel CSS from getPanelCss()
     * @param {string} popupCss - Popup CSS from getPopupCss()
     * @param {string} zorinCss - Zorin CSS from getZorinCss()
     * @param {string} extensionName - Extension name for header comments
     * @returns {string} Complete Shell CSS document
     */
    assembleShellCss(vars, panelCss, popupCss, zorinCss, extensionName = 'CSSGnomme') {
        const { timestamp } = vars;

        return `/*
 * ${extensionName} Shell Overlay
 * Generated: ${timestamp}
 * Source: Modified base theme (base-theme.css)
 */

/* Import modified base theme (tint removed, fixes applied) */
@import url("base-theme.css");

/*** ${extensionName} Dynamic Overrides ***/

${panelCss}

${popupCss}

${zorinCss}

/*** End ${extensionName} ***/
`;
    }

    // ===== PAD OSD CSS GENERATOR =====

    /**
     * Generate pad-osd.css with import + overrides
     * Pad OSD (On-Screen Display) is the tablet/stylus settings overlay
     *
     * @param {string} extensionName - Extension name for header comments
     * @param {string} sourcePath - Source theme path
     * @param {number} borderRadius - Border radius in pixels (0 = flat corners)
     * @returns {string} Complete pad-osd.css content
     */
    getPadOsdCss(extensionName, sourcePath, borderRadius) {
        const importPath = `${sourcePath}/gnome-shell/pad-osd.css`;
        const timestamp = new Date().toISOString().slice(0, 19).replace("T", " ");

        return `/*
 * ${extensionName} Pad OSD Overlay
 * Generated: ${timestamp}
 * Source: ${importPath}
 */

/* Import original Pad OSD theme */
@import url("${importPath}");

/*** ${extensionName} Pad OSD Overrides ***/

.pad-osd-window {
    border-radius: ${borderRadius}px;
}

.pad-osd-button {
    border-radius: calc(${borderRadius}px * 0.6);
}

/*** End ${extensionName} ***/
`;
    }
};