/* Global accent palette. Default Marineblau uses the app's original styles.
   Swatch values are defined in css/common/ui-variables.css. */
:root {
    --app-theme-sidebar: var(--app-color-marine);
    /* Shared row selection surfaces for Kontakte and Deals.
       Values follow the active theme, including the default Marineblau palette. */
    --app-theme-row-selection-soft-bg: color-mix(in srgb, var(--app-theme-sidebar) 7%, white);
    --app-theme-row-selection-bg: color-mix(in srgb, var(--app-theme-sidebar) 16%, white);
    --app-theme-row-selection-border: color-mix(in srgb, var(--app-theme-sidebar) 27%, white);
    --app-theme-row-selection-indicator: var(--app-theme-sidebar);
    --app-theme-node-border: #334398;
    --app-theme-node-complete: #46a9ff;
    --app-theme-node-active: #55b5ff;
    --app-theme-node-upcoming: #7087c7;
    --app-theme-active-nav-bg: rgba(68, 145, 255, .22);
    --app-theme-connector-end: #6e8cff;
    --app-theme-connector-glow: rgba(70, 169, 255, .28);
    --app-theme-node-complete-glow: rgba(70, 169, 255, .12);
    --app-theme-node-active-halo: rgba(85, 181, 255, .17);
    --app-theme-node-active-glow: rgba(85, 181, 255, .48);
}

html[data-app-theme="violet"] {
    --app-theme-sidebar: var(--app-color-violet);
    --app-theme-primary: var(--app-color-violet);
    --app-theme-primary-hover: #4f2d8c;
    --app-theme-focus: rgba(99, 59, 167, .18);
    --app-theme-node-border: #4e2d8c;
    --app-theme-node-complete: #c7aeff;
    --app-theme-node-active: #d9caff;
    --app-theme-node-upcoming: #9874c2;
    --app-theme-active-nav-bg: rgba(204, 169, 255, .23);
    --app-theme-connector-end: #9874c2;
    --app-theme-connector-glow: rgba(199,174,255,.28);
    --app-theme-node-complete-glow: rgba(199,174,255,.12);
    --app-theme-node-active-halo: rgba(217,202,255,.17);
    --app-theme-node-active-glow: rgba(217,202,255,.48);
}

html[data-app-theme="gold"] {
    --app-theme-sidebar: #795307;
    --app-theme-primary: var(--app-color-gold);
    --app-theme-primary-hover: #765006;
    --app-theme-focus: rgba(147, 99, 12, .19);
    --app-theme-node-border: #6b4705;
    --app-theme-node-complete: #ffe28b;
    --app-theme-node-active: #ffdc70;
    --app-theme-node-upcoming: #b39252;
    --app-theme-active-nav-bg: rgba(255, 220, 112, .20);
    --app-theme-connector-end: #ffdc70;
    --app-theme-connector-glow: rgba(255,226,139,.28);
    --app-theme-node-complete-glow: rgba(255,226,139,.12);
    --app-theme-node-active-halo: rgba(255,220,112,.17);
    --app-theme-node-active-glow: rgba(255,220,112,.48);
}

html[data-app-theme="petrol"] {
    --app-theme-sidebar: var(--app-color-petrol);
    --app-theme-primary: var(--app-color-petrol);
    --app-theme-primary-hover: #0b5552;
    --app-theme-focus: rgba(17, 107, 104, .19);
    --app-theme-node-border: #0c5654;
    --app-theme-node-complete: #8fe2db;
    --app-theme-node-active: #a7f1eb;
    --app-theme-node-upcoming: #4f9a95;
    --app-theme-active-nav-bg: rgba(143, 226, 219, .20);
    --app-theme-connector-end: #a7f1eb;
    --app-theme-connector-glow: rgba(143,226,219,.28);
    --app-theme-node-complete-glow: rgba(143,226,219,.12);
    --app-theme-node-active-halo: rgba(167,241,235,.17);
    --app-theme-node-active-glow: rgba(167,241,235,.48);
}

html[data-app-theme="bordeaux"] {
    --app-theme-sidebar: var(--app-color-bordeaux);
    --app-theme-primary: var(--app-color-bordeaux);
    --app-theme-primary-hover: #60162d;
    --app-theme-focus: rgba(123, 30, 58, .20);
    --app-theme-node-border: #60162d;
    --app-theme-node-complete: #ffc3d2;
    --app-theme-node-active: #ffdae3;
    --app-theme-node-upcoming: #b6768a;
    --app-theme-active-nav-bg: rgba(255, 195, 210, .20);
    --app-theme-connector-end: #ffdae3;
    --app-theme-connector-glow: rgba(255, 195, 210, .28);
    --app-theme-node-complete-glow: rgba(255, 195, 210, .12);
    --app-theme-node-active-halo: rgba(255, 218, 227, .17);
    --app-theme-node-active-glow: rgba(255, 218, 227, .48);
}

/* Scope recoloring to primary actions, keeping success, errors, warnings and card layouts unchanged. */
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-primary {
    --bs-btn-bg: var(--app-theme-primary);
    --bs-btn-border-color: var(--app-theme-primary);
    --bs-btn-hover-bg: var(--app-theme-primary-hover);
    --bs-btn-hover-border-color: var(--app-theme-primary-hover);
    --bs-btn-active-bg: var(--app-theme-primary-hover);
    --bs-btn-active-border-color: var(--app-theme-primary-hover);
    color: #fff;
    background: var(--app-theme-primary) !important;
    border-color: var(--app-theme-primary) !important;
}

html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-primary:hover:not(:disabled),
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-primary:active:not(:disabled) {
    background: var(--app-theme-primary-hover) !important;
    border-color: var(--app-theme-primary-hover) !important;
}

html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-outline-primary {
    --bs-btn-color: var(--app-theme-primary);
    --bs-btn-border-color: var(--app-theme-primary);
    --bs-btn-hover-bg: var(--app-theme-primary);
    --bs-btn-hover-border-color: var(--app-theme-primary);
    --bs-btn-active-bg: var(--app-theme-primary);
    --bs-btn-active-border-color: var(--app-theme-primary);
    color: var(--app-theme-primary);
    border-color: var(--app-theme-primary);
}

html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-outline-primary:hover:not(:disabled),
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-outline-primary:active:not(:disabled) {
    color: #fff;
    background-color: var(--app-theme-primary) !important;
    border-color: var(--app-theme-primary) !important;
}

html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-primary:focus-visible,
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .btn.btn-outline-primary:focus-visible,
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .form-control:focus,
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .form-select:focus {
    border-color: var(--app-theme-primary) !important;
    box-shadow: 0 0 0 .2rem var(--app-theme-focus) !important;
}

/* Shared "insgesamt" badge theme: opt-in from each page with app-total-badge.
   The Marineblau theme keeps the existing page styling unchanged. */
html:is([data-app-theme="violet"], [data-app-theme="gold"], [data-app-theme="petrol"], [data-app-theme="bordeaux"]) .app-total-badge {
    color: var(--app-theme-primary) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-theme-primary) 9%, white),
        color-mix(in srgb, var(--app-theme-primary) 2%, white)
    ) !important;
    border-color: color-mix(in srgb, var(--app-theme-primary) 20%, white) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--app-theme-primary) 8%, transparent) !important;
}