// Applies the user's saved display settings (theme, accent color, font,
// layout width, density, card style, corner radius) to whichever page
// includes this script. Settings are fetched from /api/settings, which
// resolves the stored choices into actual CSS values server-side, so
// this file doesn't need to duplicate any of those mappings.
(function () {
    function apply(data) {
        const root = document.documentElement;
        const vars = data.css_vars || {};
        Object.keys(vars).forEach(function (name) {
            root.style.setProperty(name, vars[name]);
        });

        const settings = data.settings || {};
        if (settings.theme) root.setAttribute('data-theme', settings.theme);
        if (settings.density) root.setAttribute('data-density', settings.density);
        if (settings.card_style) root.setAttribute('data-card-style', settings.card_style);
    }

    fetch('/api/settings')
        .then(function (r) { return r.json(); })
        .then(apply)
        .catch(function (err) {
            console.warn('Could not load display settings, using page defaults:', err);
        });

    // Exposed so the settings page itself can live-preview changes
    // before saving.
    window.__offlineuApplyTheme = apply;
})();