/**
 * App background color — set from Theme settings (data-hkits-app-bg).
 * Paints the app shell (body / wrapper / main), NOT .main-content.
 * Content areas stay transparent so the shell color shows through;
 * cards & panels keep their own surfaces.
 */

:root {
    --kitsofts-app-bg: #ffffff;
    --kitsofts-app-bg-text: #0f172a;
}

html[data-hkits-app-bg="white"] {
    --kitsofts-app-bg: #ffffff;
    --kitsofts-app-bg-text: #0f172a;
}

html[data-hkits-app-bg="sky-tint"] {
    --kitsofts-app-bg: #b0c9e8;
    --kitsofts-app-bg-text: #0f172a;
}

html[data-hkits-app-bg="pale-blue"] {
    --kitsofts-app-bg: rgba(56, 189, 248, 0.35);
    --kitsofts-app-bg-text: #0f172a;
}

html[data-hkits-app-bg="navy"] {
    --kitsofts-app-bg: #002366;
    --kitsofts-app-bg-text: #f8fafc;
}

html[data-hkits-app-bg="green"] {
    --kitsofts-app-bg: #22c55e;
    --kitsofts-app-bg-text: #052e16;
}

html[data-hkits-app-bg] {
    --hkits-bg: var(--kitsofts-app-bg);
    --hkits-dashboard-page-bg: var(--kitsofts-app-bg);
    --page-bg: var(--kitsofts-app-bg);
}

/* App shell canvas — this is what the theme background changer should tint */
html[data-hkits-app-bg] body.hkits-app,
html[data-hkits-app-bg] body.hkits-app .hkits-wrapper,
html[data-hkits-app-bg] body.hkits-app .hkits-main,
html[data-hkits-app-bg] body.hkits-app .hkits-main-inner,
html[data-hkits-app-bg] body.kitsofts-navy-app-shell,
html[data-hkits-app-bg] body.kitsofts-navy-app-shell .hkits-wrapper,
html[data-hkits-app-bg] body.kitsofts-navy-app-shell .hkits-main,
html[data-hkits-app-bg] body.kitsofts-navy-app-shell .hkits-main-inner,
html[data-hkits-app-bg] body.kitsofts-purchases-app-shell,
html[data-hkits-app-bg] body.kitsofts-purchases-app-shell .hkits-wrapper,
html[data-hkits-app-bg] body.kitsofts-purchases-app-shell .hkits-main,
html[data-hkits-app-bg] body.kitsofts-purchases-app-shell .hkits-main-inner,
html[data-hkits-app-bg][data-hkits-theme] body.hkits-app,
html[data-hkits-app-bg][data-hkits-theme] body.hkits-app .hkits-wrapper,
html[data-hkits-app-bg][data-hkits-theme] body.hkits-app .hkits-main,
html[data-hkits-app-bg][data-hkits-theme] body.hkits-app .hkits-main-inner,
html[data-hkits-app-bg] body.hkits-app.kitsofts-pos-app-shell,
html[data-hkits-app-bg] body.hkits-app.kitsofts-pos-app-shell.kitsofts-pos-page {
    background: var(--kitsofts-app-bg) !important;
    background-color: var(--kitsofts-app-bg) !important;
}

/* Do not paint .main-content — keep it clear so the app shell color shows */
html[data-hkits-app-bg] body.hkits-app .main-content,
html[data-hkits-app-bg] body.hkits-app .dashboard-content,
html[data-hkits-app-bg] body.hkits-app #list_container,
html[data-hkits-app-bg] body.hkits-app .hkits-service-page,
html[data-hkits-app-bg] body.hkits-app .kitsofts-workspace,
html[data-hkits-app-bg] body.hkits-app .management-module-page,
html[data-hkits-app-bg] body.hkits-app .business-module-page,
html[data-hkits-app-bg] body.hkits-app .business-module-page > .container,
html[data-hkits-app-bg] body.hkits-app .expenses-page,
html[data-hkits-app-bg] body.hkits-app .kitsofts-navy-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-dashboard-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-reports-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-contacts-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-management-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-settings-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-garage-workspace,
html[data-hkits-app-bg] body.hkits-app .kitsofts-restaurant-workspace,
html[data-hkits-app-bg] body.hkits-app [id^="kitsofts-"][id$="-workspace"],
html[data-hkits-app-bg] body.hkits-app .kitsofts-pos-workspace {
    background: transparent !important;
    background-color: transparent !important;
}

html[data-hkits-app-bg] body.hkits-app .kitsofts-pos-workspace {
    --page-bg: var(--kitsofts-app-bg);
}

/* Theme settings preview swatches */
.hkits-app-bg-preview {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    margin-bottom: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.hkits-app-bg-card.is-active .hkits-app-bg-preview {
    box-shadow: 0 0 0 2px #002366, inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

html[data-hkits-ui-shape="flat"] .hkits-app-bg-preview {
    border-radius: 0;
}