/* ------------------------------------------------------------------
   In-app UI theme (authenticated product). Public marketing pages use
   wwwroot/css/public-*.css — change landing look there, not here.
------------------------------------------------------------------- */

/* ------------------------------------------------------------------
   Global theme tokens (Campaign-Comparison reference inspired)
   We keep Bootstrap's `data-bs-theme` mechanism and expose our own
   CSS variables that app/layout/nav can consume consistently.
------------------------------------------------------------------- */

:root {
    --app-font-size: 16px;
    --app-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --app-display-font-family: "Chonburi", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Light theme: warm page background */
    --app-bg: #ede0d0;
    --app-fg: #111827;

    /* Page template background in light mode */
    --effect-template-bg: #ede0d0;

    /* Light theme "surface" (cards/panels) */
    --app-card: #fbf7ef;
    --app-card-fg: #111827;

    --app-muted: #f3efe6;
    --app-muted-fg: #717182;

    --app-border: rgba(0, 0, 0, 0.10);

    --app-primary: #2563eb;
    --app-primary-fg: #ffffff;

    /* Navbar / sidebar in light mode: cream */
    --app-sidebar: #fbf7ef;
    --app-sidebar-fg: #111827;
    --app-sidebar-accent: #eef2ff;
    --app-sidebar-accent-fg: #111827;
    --app-sidebar-border: rgba(0, 0, 0, 0.10);

    /* Inaktiv hover i sidomeny / flikar (samma värde som NavMenu.razor) */
    --app-nav-link-hover-bg: linear-gradient(180deg, rgba(199, 166, 121, 0.2), rgba(177, 138, 88, 0.28));
    --app-nav-link-hover-color: rgba(92, 61, 24, 0.96);

    --app-radius: 0.75rem;

    /* Brand: Cinnamon-100 — loading spinners, accents */
    --app-cinnamon-100: #b78e53;

}

html, body {
    background: var(--app-bg);
    color: var(--app-fg);
    font-size: var(--app-font-size);
    font-family: var(--app-font-family);
    --bs-body-font-family: var(--app-font-family);
}

/* Loading spinners app-wide (overrides text-primary / text-light on spinner elements) */
.spinner-border,
.spinner-grow {
    color: var(--app-cinnamon-100) !important;
}

button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu {
    font-family: var(--app-font-family);
}

h1,
.page-title,
.effect-page-template-title {
    font-family: var(--app-display-font-family);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Chonburi only on explicit CTAs — toggles and .btn-primary stay Poppins */
.start-button,
.submit-button {
    font-family: var(--app-display-font-family);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Shared surface container used across pages (LandingPage, Settings, etc.) */
.white-container {
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

/* Theme-aware brand logo variants. Default keeps the existing white logo. */
.logo-img-light {
    display: none;
}

.logo-img-dark {
    display: block;
}

html[data-bs-theme="light"] .logo-img-light {
    display: block;
}

html[data-bs-theme="light"] .logo-img-dark {
    display: none;
}

/* Header: två <img> (ljus/mörk variant) — säkerställ exakt en synlig oavsett scoped layout-CSS */
html[data-bs-theme="light"] .app-shell-header .logo-img-light {
    display: block !important;
}

html[data-bs-theme="light"] .app-shell-header .logo-img-dark {
    display: none !important;
}

html[data-bs-theme="dark"] .app-shell-header .logo-img-light {
    display: none !important;
}

html[data-bs-theme="dark"] .app-shell-header .logo-img-dark {
    display: block !important;
}

/* Bootstrap surfaces aligned with app tokens */
.card {
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.card .card-header {
    background-color: color-mix(in srgb, var(--app-card) 88%, var(--app-muted));
    border-bottom: 1px solid var(--app-border);
    color: var(--app-card-fg);
}

.list-group-item {
    background-color: transparent;
    color: inherit;
    border-color: var(--app-border);
}

a.text-muted, .text-muted {
    color: var(--app-muted-fg) !important;
}

a, .btn-link {
    color: #006bb7;
}

.nav-link {
    color: #1a1b1c;
    text-decoration: none; /* Remove underline */
    border-radius: 4px; /* Optional: round the corners */
    transition: background-color 0.3s ease;
}

    .nav-link:hover {
        color: black;
        background-color: #f0f0f0;
    }

    .nav-link:active {
        color: #999; 
    }

.btn-primary {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="dark"] .btn-primary {
    color: #fff;
    background-color: #258cfb;
    border-color: #1861ac;
    background-image: none;
    text-shadow: none;
}

/* Default focus ring for fields (Bootstrap blue) when no theme match */
.form-control:focus,
.form-control:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html[data-bs-theme="light"] .btn:focus,
html[data-bs-theme="light"] .btn:focus-visible,
html[data-bs-theme="light"] .btn:active:focus,
html[data-bs-theme="light"] .btn-link:focus,
html[data-bs-theme="light"] .btn-link:focus-visible,
html[data-bs-theme="light"] .nav-link:focus,
html[data-bs-theme="light"] .nav-link:focus-visible {
    border-color: #b78e53;
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.85), 0 0 0 0.25rem rgba(183, 142, 83, 0.35);
    outline: 0;
}

html[data-bs-theme="dark"] .btn:focus,
html[data-bs-theme="dark"] .btn:focus-visible,
html[data-bs-theme="dark"] .btn:active:focus,
html[data-bs-theme="dark"] .btn-link:focus,
html[data-bs-theme="dark"] .btn-link:focus-visible,
html[data-bs-theme="dark"] .nav-link:focus,
html[data-bs-theme="dark"] .nav-link:focus-visible {
    border-color: #b78e53;
    box-shadow: 0 0 0 0.1rem rgba(24, 20, 18, 0.65), 0 0 0 0.25rem rgba(183, 142, 83, 0.45);
    outline: 0;
}

html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-control:focus-visible,
html[data-bs-theme="light"] .form-select:focus,
html[data-bs-theme="light"] .form-select:focus-visible,
html[data-bs-theme="light"] .form-check-input:focus,
html[data-bs-theme="light"] .form-check-input:focus-visible,
html[data-bs-theme="light"] input:focus,
html[data-bs-theme="light"] input:focus-visible,
html[data-bs-theme="light"] textarea:focus,
html[data-bs-theme="light"] textarea:focus-visible,
html[data-bs-theme="light"] select:focus,
html[data-bs-theme="light"] select:focus-visible {
    border-color: #b78e53;
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.85), 0 0 0 0.25rem rgba(183, 142, 83, 0.35);
    outline: 0;
}

/* Light theme: all checkboxes / radios / switches — cinnamon (not Bootstrap primary blue) */
html[data-bs-theme="light"] input[type="checkbox"]:not(.form-check-input),
html[data-bs-theme="light"] input[type="radio"]:not(.form-check-input) {
    accent-color: #b78e53;
}

html[data-bs-theme="light"] .form-check-input:checked {
    background-color: #b78e53;
    border-color: #a07848;
}

html[data-bs-theme="light"] .form-check-input:checked:focus,
html[data-bs-theme="light"] .form-check-input:checked:focus-visible {
    border-color: #b78e53;
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.85), 0 0 0 0.25rem rgba(183, 142, 83, 0.35);
}

html[data-bs-theme="light"] .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

html[data-bs-theme="light"] .form-check-input[type="checkbox"]:indeterminate {
    background-color: #b78e53;
    border-color: #a07848;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

html[data-bs-theme="light"] .form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.5' fill='%23ffffff'/%3e%3c/svg%3e");
}

html[data-bs-theme="light"] .form-switch .form-check-input:checked {
    background-color: #b78e53;
    border-color: #a07848;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Av-läge: tydligare kant och lite mer kontrast än "disabled"-beige */
html[data-bs-theme="light"] .form-switch .form-check-input:not(:checked) {
    background-color: #ede4d8;
    border-color: rgba(124, 90, 46, 0.42);
    box-shadow: inset 0 1px 2px rgba(91, 64, 33, 0.08), 0 0 0 1px rgba(124, 90, 46, 0.14);
}

/* Native <select> list highlight (where browsers allow styling) */
html[data-bs-theme="light"] select.form-select,
html[data-bs-theme="light"] select.form-control {
    accent-color: #b78e53;
}

html[data-bs-theme="light"] select.form-select option:checked,
html[data-bs-theme="light"] select.form-select option:hover,
html[data-bs-theme="light"] select.form-control option:checked,
html[data-bs-theme="light"] select.form-control option:hover {
    background-color: #b78e53;
    color: #fff;
}

html[data-bs-theme="dark"] select.form-select option:checked,
html[data-bs-theme="dark"] select.form-select option:hover,
html[data-bs-theme="dark"] select.form-control option:checked,
html[data-bs-theme="dark"] select.form-control option:hover {
    background-color: #b78e53;
    color: #fff;
}

html[data-bs-theme="light"] {
    --bs-dropdown-link-hover-bg: rgba(183, 142, 83, 0.22);
    --bs-dropdown-link-hover-color: #111827;
    --bs-dropdown-link-active-bg: #b78e53;
    --bs-dropdown-link-active-color: #fff;

    /* Info alerts / empty-state panels (replace Bootstrap baby blue) */
    --bs-info-bg-subtle: #d7c7ca;
    --bs-info-text-emphasis: #111827;
    --bs-info-border-subtle: #c4b0b4;
}

html[data-bs-theme="light"] .alert.alert-info {
    background-color: #d7c7ca;
    border-color: #c4b0b4;
    color: #111827;
}

/* Cinnamon hover for all Bootstrap dropdown menus (some bundles override CSS variables). */
html[data-bs-theme="light"] .dropdown-menu .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-menu .dropdown-item:focus,
html[data-bs-theme="light"] .dropdown-menu > li > .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-menu > li > .dropdown-item:focus {
    background-color: rgba(183, 142, 83, 0.22) !important;
    color: #111827 !important;
}

html[data-bs-theme="light"] .dropdown-menu .dropdown-item.active,
html[data-bs-theme="light"] .dropdown-menu .dropdown-item:active {
    background-color: #b78e53 !important;
    color: #fff !important;
}

html[data-bs-theme="dark"] {
    --bs-dropdown-link-hover-bg: rgba(183, 142, 83, 0.22);
    --bs-dropdown-link-hover-color: #f5f0ea;
    --bs-dropdown-link-active-bg: #b78e53;
    --bs-dropdown-link-active-color: #fffaf2;
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus,
html[data-bs-theme="dark"] .dropdown-menu > li > .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-menu > li > .dropdown-item:focus {
    background-color: rgba(183, 142, 83, 0.22) !important;
    color: #f5f0ea !important;
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active {
    background-color: #b78e53 !important;
    color: #fffaf2 !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.create-ad-container {
    max-width: 1920px;
    margin: auto;
    padding: 20px;
}

/* Skapa annonser — warm dark surfaces (Google / Meta / LinkedIn builders) */
html[data-bs-theme="dark"] .create-ad-container,
html[data-bs-theme="dark"] .createads-main {
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .create-ad-container .bg-body,
html[data-bs-theme="dark"] .createads-main .bg-body {
    background-color: var(--app-bg) !important;
    color: var(--app-fg) !important;
}

html[data-bs-theme="dark"] .create-ad-container .white-container,
html[data-bs-theme="dark"] .createads-main .white-container {
    background: linear-gradient(180deg, rgba(42, 39, 36, 0.96), rgba(35, 32, 29, 0.92));
    border: 1px solid var(--app-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] .create-ad-container .card,
html[data-bs-theme="dark"] .create-ad-container .card-section,
html[data-bs-theme="dark"] .createads-main .card,
html[data-bs-theme="dark"] .createads-main .card-section {
    background-color: var(--app-card) !important;
    color: var(--app-card-fg) !important;
    border-color: var(--app-border) !important;
}

html[data-bs-theme="dark"] .create-ad-container .bg-light,
html[data-bs-theme="dark"] .createads-main .bg-light {
    background-color: var(--app-muted) !important;
    color: var(--app-card-fg) !important;
    border-color: var(--app-border) !important;
}

html[data-bs-theme="dark"] .create-ad-container .bg-primary-subtle,
html[data-bs-theme="dark"] .createads-main .bg-primary-subtle {
    background-color: rgba(183, 142, 83, 0.22) !important;
    color: #e8d4b8 !important;
}

html[data-bs-theme="dark"] .create-ad-container .text-primary,
html[data-bs-theme="dark"] .createads-main .text-primary {
    color: var(--app-accent) !important;
}

html[data-bs-theme="dark"] .create-ad-container .border-primary,
html[data-bs-theme="dark"] .createads-main .border-primary {
    border-color: var(--app-accent) !important;
}

html[data-bs-theme="dark"] .create-ad-container .list-group-item-action:hover,
html[data-bs-theme="dark"] .create-ad-container .list-group-item-action:focus,
html[data-bs-theme="dark"] .createads-main .list-group-item-action:hover,
html[data-bs-theme="dark"] .createads-main .list-group-item-action:focus {
    background-color: rgba(183, 142, 83, 0.22) !important;
    color: var(--app-fg) !important;
}

html[data-bs-theme="dark"] .create-ad-container .list-group-item-action:active,
html[data-bs-theme="dark"] .createads-main .list-group-item-action:active {
    background-color: rgba(183, 142, 83, 0.32) !important;
    color: var(--app-fg) !important;
}

html[data-bs-theme="dark"] .createads-top-nav-group {
    background: var(--app-card);
    border-color: var(--app-border);
}

/* Custom selects in ad builders — cinnamon hover (native <select> cannot be fully styled on Windows) */
html[data-bs-theme="dark"] .create-ad-container .effect-bootstrap-select .dropdown-menu,
html[data-bs-theme="dark"] .createads-main .effect-bootstrap-select .dropdown-menu {
    background-color: var(--app-card);
    border-color: var(--app-border);
    color: var(--app-card-fg);
}

/* Consistent page header (matches DashboardTwo/Settings typography) */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.page-title {
    font-size: 1.5rem;
    font-family: var(--app-display-font-family);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--app-fg);
}

.page-subtitle {
    color: var(--app-muted-fg);
    margin: 0.25rem 0 0 0;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* App panel (DashboardTwo-style) */
.panel-dark {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.25rem;
    color: var(--app-card-fg);
}

.panel-title {
    color: inherit;
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
}

/* Bakgrund för hela sidan i dark mode */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    /* Warm dark theme — same brand family as light (cinnamon / forest / raspberry) */
    --app-bg: #1f1c19;
    --app-fg: #f5f0ea;

    --app-card: #2a2724;
    --app-card-fg: #f5f0ea;

    --app-muted: #332f2b;
    --app-muted-fg: #b8aea3;

    --app-border: rgba(255, 255, 255, 0.1);

    --app-accent: #b78e53;
    --app-accent-hover: #c49a5f;
    --app-accent-border: #917848;
    --app-accent-fg: #fffaf2;
    --app-accent-muted: rgba(183, 142, 83, 0.22);
    --app-forest: #3a5d4a;
    /* Ljusare än #82202d — läsbar mot mörk bakgrund (samma ton som Landing KPI-trender). */
    --app-raspberry: #c96b7a;
    /* Diagram: burgundy #61202d är för mörk mot mörk bakgrund. */
    --app-chart-burgundy: #9e4f52;
    --app-raspberry-border: #a85a68;
    --app-raspberry-hover: #b55d6c;
    --app-raspberry-pressed: #a04f5d;

    --app-primary: var(--app-accent);
    --app-primary-fg: var(--app-accent-fg);

    --app-sidebar: #2a2724;
    --app-sidebar-fg: #f5f0ea;
    --app-sidebar-accent: #3a3530;
    --app-sidebar-accent-fg: #f5f0ea;
    --app-sidebar-border: rgba(255, 255, 255, 0.1);

    --app-nav-link-hover-bg: linear-gradient(180deg, rgba(183, 142, 83, 0.18), rgba(163, 121, 65, 0.26));
    --app-nav-link-hover-color: #f5e8d6;

    --app-radius: 0.75rem;
    --effect-template-bg: #1f1c19;

    /* Bootstrap sync */
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-fg);
    --bs-border-color: var(--app-border);
    --bs-secondary-bg: var(--app-muted);
    --bs-tertiary-bg: var(--app-muted);
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 183, 142, 83;
    --bs-link-color: #d4b896;
    --bs-link-hover-color: #e8d4b8;

    --bs-info-bg-subtle: #3d3234;
    --bs-info-text-emphasis: #f5f0ea;
    --bs-info-border-subtle: #524548;

    /* Replace Bootstrap blue tints in dark UI */
    --bs-primary-bg-subtle: rgba(183, 142, 83, 0.22);
    --bs-primary-text-emphasis: #e8d4b8;
    --bs-list-group-action-hover-bg: rgba(183, 142, 83, 0.22);
    --bs-list-group-action-hover-color: var(--app-fg);
    --bs-list-group-action-active-bg: rgba(183, 142, 83, 0.32);
    --bs-list-group-action-active-color: var(--app-fg);

    background-color: var(--app-bg);
    color: var(--app-fg);
}

/* =================================================================
   Dark theme: global harmonization (mirrors light cinnamon system)
   ================================================================= */

html[data-bs-theme="dark"] .alert.alert-info {
    background-color: #3d3234;
    border-color: #524548;
    color: #f5f0ea;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-control:focus-visible,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .form-select:focus-visible,
html[data-bs-theme="dark"] .form-check-input:focus,
html[data-bs-theme="dark"] .form-check-input:focus-visible,
html[data-bs-theme="dark"] input:focus,
html[data-bs-theme="dark"] input:focus-visible,
html[data-bs-theme="dark"] textarea:focus,
html[data-bs-theme="dark"] textarea:focus-visible,
html[data-bs-theme="dark"] select:focus,
html[data-bs-theme="dark"] select:focus-visible {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.1rem rgba(31, 28, 25, 0.85), 0 0 0 0.25rem rgba(183, 142, 83, 0.35);
    outline: 0;
}

html[data-bs-theme="dark"] input[type="checkbox"]:not(.form-check-input),
html[data-bs-theme="dark"] input[type="radio"]:not(.form-check-input) {
    accent-color: var(--app-accent);
}

html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent-border);
}

html[data-bs-theme="dark"] .form-check-input:checked:focus,
html[data-bs-theme="dark"] .form-check-input:checked:focus-visible {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 0.1rem rgba(31, 28, 25, 0.85), 0 0 0 0.25rem rgba(183, 142, 83, 0.35);
}

html[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--app-forest);
    border-color: #2b4536;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b78e53'/%3e%3c/svg%3e");
}

html[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-color: var(--app-raspberry);
    border-color: var(--app-raspberry-border);
}

html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] select.form-select,
html[data-bs-theme="dark"] select.form-control {
    accent-color: #b78e53 !important;
    color-scheme: dark;
}

html[data-bs-theme="light"] select,
html[data-bs-theme="light"] select.form-select,
html[data-bs-theme="light"] select.form-control {
    accent-color: #b78e53 !important;
}

html[data-bs-theme="dark"] .btn.btn-primary {
    color: var(--app-accent-fg);
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    background-image: none;
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="dark"] .btn.btn-primary:hover,
html[data-bs-theme="dark"] .btn.btn-primary:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

html[data-bs-theme="dark"] .btn.btn-outline-primary {
    color: #e8d4b8;
    border-color: rgba(183, 156, 108, 0.65);
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-card));
}

html[data-bs-theme="dark"] .btn.btn-outline-primary:hover,
html[data-bs-theme="dark"] .btn.btn-outline-primary:focus-visible {
    color: var(--app-accent-fg);
    background: color-mix(in srgb, var(--app-accent) 28%, var(--app-card));
    border-color: rgba(145, 104, 52, 0.75);
}

html[data-bs-theme="dark"] .btn.btn-outline-secondary {
    color: #d8d0c6;
    border-color: rgba(255, 255, 255, 0.16);
    background: transparent;
}

html[data-bs-theme="dark"] .btn.btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn.btn-outline-secondary:focus-visible {
    color: #fff;
    background: color-mix(in srgb, var(--app-accent) 14%, var(--app-muted));
    border-color: rgba(183, 156, 108, 0.45);
}

html[data-bs-theme="dark"] .btn.btn-secondary {
    color: #f5f0ea;
    background: color-mix(in srgb, var(--app-accent) 18%, var(--app-muted));
    border-color: rgba(183, 156, 108, 0.35);
}

html[data-bs-theme="dark"] .btn.btn-secondary:hover,
html[data-bs-theme="dark"] .btn.btn-secondary:focus-visible {
    color: #fff;
    background: color-mix(in srgb, var(--app-accent) 26%, var(--app-muted));
    border-color: rgba(145, 104, 52, 0.55);
}

html[data-bs-theme="dark"] .btn.btn-danger {
    color: #ffffff;
    background-color: var(--app-raspberry);
    border-color: var(--app-raspberry-border);
}

html[data-bs-theme="dark"] .btn.btn-danger:hover,
html[data-bs-theme="dark"] .btn.btn-danger:focus-visible {
    color: #ffffff;
    background-color: var(--app-raspberry-hover);
    border-color: var(--app-raspberry-pressed);
}

html[data-bs-theme="dark"] .text-danger {
    color: var(--app-raspberry) !important;
}

html[data-bs-theme="dark"] .card {
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .list-group-item {
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

/* Flikar (list-group i sidonav + Skapa annonser): samma inaktiv-hover som i sidomenyn */
html[data-bs-theme="light"] .createads-top-nav-group .list-group-item:hover:not(.active),
html[data-bs-theme="light"] .settings-side-nav-group .list-group-item:hover:not(.active) {
    background: var(--app-nav-link-hover-bg);
    color: var(--app-nav-link-hover-color);
}

html[data-bs-theme="dark"] .createads-top-nav-group .list-group-item:hover:not(.active),
html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item:hover:not(.active) {
    background: var(--app-nav-link-hover-bg);
    color: var(--app-nav-link-hover-color);
}

    /* App shell sticky header (dark theme) */
    html[data-bs-theme="dark"] body .app-shell-header {
        background-color: var(--app-bg);
        border-bottom-color: var(--app-sidebar-border);
    }

    /* Dashboard */
    html[data-bs-theme="dark"] body .spinnerSpinn-overlay {
        background-color: #21252999;
    }

    html[data-bs-theme="dark"] body .white-container {
        background-color: var(--app-card);
        color: var(--app-card-fg);
    }

    html[data-bs-theme="dark"] body .filters-section,
    html[data-bs-theme="dark"] body .filters,
    html[data-bs-theme="dark"] body .key-metrics,
    html[data-bs-theme="dark"] body .chart {
        background-color: var(--app-card);
        color: var(--app-card-fg);
    }

    html[data-bs-theme="dark"] body .notification-box {
        background-color: var(--app-muted);
        color: var(--app-card-fg);
    }

    html[data-bs-theme="dark"] body .disabled-section .form-control {
        background-color: var(--app-muted);
        border-color: var(--app-border);
        color: var(--app-card-fg);
    }

    /* Nav-länk hover */
    html[data-bs-theme="dark"] body .nav-link:hover {
        background-color: var(--app-sidebar-accent);
    }

    /* CompanyRegistration */
    html[data-bs-theme="dark"] body .popular-label {
        background-color: #011853;
    }

    html[data-bs-theme="dark"] body .start-button,
    html[data-bs-theme="dark"] body .submit-button {
        background-color: #2F498C;
    }

    html[data-bs-theme="dark"] body .cm-card,
    html[data-bs-theme="dark"] body .subscription-card {
        background-color: var(--app-card);
        color: var(--app-card-fg);
    }

    html[data-bs-theme="dark"] body .drppro-preset {
        background: var(--hover);
        color: var(--text);
    }

        html[data-bs-theme="dark"] body .drppro-preset:hover {
            background: color-mix(in srgb, var(--app-accent) 14%, var(--app-muted));
        }

    html[data-bs-theme="dark"] body .icon-btn {
        background: var(--app-muted);
        color: var(--text);
    }

        html[data-bs-theme="dark"] body .icon-btn:hover {
            background: color-mix(in srgb, var(--app-accent) 18%, var(--app-muted));
        }

    /* lilla pilen ovanför panelen */

    html[data-bs-theme="dark"] body .drp-arrow {
        background: var(--app-card);
        border-left-color: var(--app-border);
        border-top-color: var(--app-border);
    }

    html[data-bs-theme="dark"] body .alert.alert-warning {
        background-color: rgba(255, 193, 7, 0.15);
        border-color: #ffc107;
        color: var(--app-fg);
    }

    html[data-bs-theme="dark"] body .date-filter .form-control {
        background-color: var(--app-muted);
        border-color: var(--app-border);
        color: var(--app-fg);
    }

/* ----- Kampanjanalys + Organisk analys (warm dark, same structure as light) ----- */

html[data-bs-theme="dark"] .effect-page-template-title,
html[data-bs-theme="dark"] .effect-page-template-subtitle {
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .ad-performance-page,
html[data-bs-theme="dark"] .analytics-page {
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .ad-performance-page .form-label,
html[data-bs-theme="dark"] .ad-performance-page .form-check-label,
html[data-bs-theme="dark"] .analytics-page .form-label {
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .ad-performance-page .text-muted,
html[data-bs-theme="dark"] .analytics-page .text-muted {
    color: var(--app-muted-fg) !important;
}

html[data-bs-theme="dark"] .ad-performance-page .card,
html[data-bs-theme="dark"] .analytics-page .card {
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .ad-performance-page .card .card-body,
html[data-bs-theme="dark"] .analytics-page .card .card-body {
    background-color: transparent;
    color: inherit;
}

html[data-bs-theme="dark"] .ad-performance-page .card h5,
html[data-bs-theme="dark"] .analytics-page .card h6,
html[data-bs-theme="dark"] .analytics-page .white-container h5 {
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] .ad-performance-page .alert-light,
html[data-bs-theme="dark"] .analytics-page .alert-light {
    background-color: var(--app-muted);
    border-color: var(--app-border);
    color: var(--app-muted-fg);
}

html[data-bs-theme="dark"] body .performance-table,
html[data-bs-theme="dark"] body .performance-table thead,
html[data-bs-theme="dark"] body .performance-table tbody {
    background-color: var(--app-card) !important;
    border-color: var(--app-border);
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] body .performance-table th {
    background-color: var(--app-muted) !important;
    color: var(--app-card-fg) !important;
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .table-light {
    background-color: var(--app-muted) !important;
    color: var(--app-card-fg) !important;
}

html[data-bs-theme="dark"] body .table-light th {
    color: var(--app-card-fg) !important;
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .performance-table .table-primary td {
    background-color: color-mix(in srgb, var(--app-accent) 12%, var(--app-card)) !important;
    color: var(--app-card-fg) !important;
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .performance-table td,
html[data-bs-theme="dark"] body .performance-table td.fw-bold {
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .performance-table .table-sm td,
html[data-bs-theme="dark"] body .performance-table .table-sm th {
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .analytics-page .table {
    --bs-table-color: var(--app-card-fg);
    --bs-table-bg: var(--app-card);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: color-mix(in srgb, var(--app-muted) 55%, var(--app-card));
    --bs-table-hover-bg: color-mix(in srgb, var(--app-accent) 14%, var(--app-muted));
    --bs-table-hover-color: var(--app-card-fg);
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .analytics-page .table thead th {
    background-color: var(--app-muted);
    color: var(--app-card-fg);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .analytics-page .analytics-info {
    color: var(--app-muted-fg);
}

html[data-bs-theme="dark"] .analytics-page .analytics-info:hover {
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .analytics-page .analytics-info-tooltip {
    background: var(--app-card);
    border-color: var(--app-border);
    color: var(--app-card-fg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="light"] .analytics-page .white-container,
html[data-bs-theme="light"] .ad-performance-page .white-container {
    background: linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(250, 244, 234, 0.92));
    border: 1px solid rgba(124, 90, 46, 0.16);
    box-shadow: 0 8px 24px rgba(91, 64, 33, 0.08);
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] .analytics-page .white-container,
html[data-bs-theme="dark"] .ad-performance-page .white-container,
html[data-bs-theme="dark"] body .analytics-page .white-container {
    background: linear-gradient(180deg, rgba(42, 39, 36, 0.96), rgba(35, 32, 29, 0.92));
    border: 1px solid var(--app-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] body .pricing {
    /* Motsvarar sidbakgrund i dark mode */
    background: #2B2927;
}

html[data-bs-theme="dark"] body .pricing-card {
    /* Matchar .subscription-card och dashboard-kort i app.css */
    background: #212529;
    color: #f3f6fa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

    /* Rubriker / text i korten (valfritt men bra för kontrast) */
    html[data-bs-theme="dark"] body .pricing-card .price,
    html[data-bs-theme="dark"] body .pricing-card .features li,
    html[data-bs-theme="dark"] body .pricing-card .card-header h2,
    html[data-bs-theme="dark"] body .pricing-header h1,
    html[data-bs-theme="dark"] body .pricing-header p {
        color: #f3f6fa;
    }

/* Ribbon och primärknapp behåller guldaccenten men mot mörk bakgrund */
html[data-bs-theme="dark"] body .ribbon {
    background: #b79c6c;
    color: #000;
}

html[data-bs-theme="dark"] body .btn.primary {
    background: #b79c6c;
    color: #000;
}

/* Sekundärknapp – mörkare variant som passar paletten */
html[data-bs-theme="dark"] body .btn.secondary {
    background: #2b3138;
    color: #f3f6fa;
    border: 1px solid #3b3f44;
}

/* Outline-knapp – transparent mot mörk bakgrund, behåll guldaccent */
html[data-bs-theme="dark"] body .btn.outline {
    background: transparent;
    border-color: #b79c6c;
    color: #f3f6fa;
}

/* Toggle-länken – ljus text i dark mode */
html[data-bs-theme="dark"] body .toggle {
    color: #e5e7eb;
}

    html[data-bs-theme="dark"] body .toggle:hover {
        color: #f9fafb;
    }

/* Detalj-popover är redan mörk, men vi kan bara se till att den följer paletten */
html[data-bs-theme="dark"] body .details-popover {
    background: #0b0f1a; /* funkar redan bra som mörk panel */
    color: #e5e7eb;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

    html[data-bs-theme="dark"] body .details-popover::after {
        border-color: #0b0f1a transparent transparent transparent;
    }

/* =================================================================
   Theme: Annons­prestanda, Analytics, skapa-annons, datumväljare
   Ljust: brunt (samma som sidomeny / dashboard-metric)
   Mörkt: globala .btn-regler ovan (cinnamon)
   ================================================================= */

/* --- Delade knappmönster (återanvänder dashboard-gradient) --- */
html[data-bs-theme="light"] .ad-performance-page .btn.btn-primary,
html[data-bs-theme="light"] .analytics-page .btn.btn-primary {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="light"] .ad-performance-page .btn.btn-primary:hover,
html[data-bs-theme="light"] .ad-performance-page .btn.btn-primary:focus-visible,
html[data-bs-theme="light"] .analytics-page .btn.btn-primary:hover,
html[data-bs-theme="light"] .analytics-page .btn.btn-primary:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

html[data-bs-theme="light"] .ad-performance-page .btn.btn-secondary {
    color: rgba(92, 61, 24, 0.95);
    background: color-mix(in srgb, #b79c6c 16%, #fff);
    border-color: rgba(183, 156, 108, 0.8);
}

html[data-bs-theme="light"] .ad-performance-page .btn.btn-secondary:hover,
html[data-bs-theme="light"] .ad-performance-page .btn.btn-secondary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 26%, #fff);
    border-color: rgba(145, 104, 52, 0.75);
}

/* Skapa-annons: Google, LinkedIn, wizard-steg */
html[data-bs-theme="light"] .create-ad-container .btn.btn-primary {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="light"] .create-ad-container .btn.btn-primary:hover,
html[data-bs-theme="light"] .create-ad-container .btn.btn-primary:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

html[data-bs-theme="light"] .create-ad-container .btn.btn-outline-primary {
    color: rgba(92, 61, 24, 0.95);
    border-color: rgba(183, 156, 108, 0.88);
    background: color-mix(in srgb, #b79c6c 12%, var(--app-card, #fbf7ef));
}

html[data-bs-theme="light"] .create-ad-container .btn.btn-outline-primary:hover,
html[data-bs-theme="light"] .create-ad-container .btn.btn-outline-primary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 24%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.75);
}

html[data-bs-theme="light"] .create-ad-container .btn.btn-outline-secondary {
    color: rgba(92, 61, 24, 0.9);
    border-color: rgba(183, 156, 108, 0.65);
    background: color-mix(in srgb, #b79c6c 8%, var(--app-card, #fbf7ef));
}

html[data-bs-theme="light"] .create-ad-container .btn.btn-outline-secondary:hover,
html[data-bs-theme="light"] .create-ad-container .btn.btn-outline-secondary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 18%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.6);
}

/* Startsida: "Skapa lista" / "Redigera" (global så child-komponent får stil utan ::deep-problem) */
html[data-bs-theme="light"] .landing-list .btn.btn-primary {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="light"] .landing-list .btn.btn-primary:hover,
html[data-bs-theme="light"] .landing-list .btn.btn-primary:focus-visible {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

/* Admin + Inställningar: primär/secondary/outline (ljus; mörk via globala regler) */
html[data-bs-theme="light"] .admin-layout .btn.btn-primary,
html[data-bs-theme="light"] .settings-page .btn.btn-primary {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="light"] .admin-layout .btn.btn-primary:hover,
html[data-bs-theme="light"] .admin-layout .btn.btn-primary:focus-visible,
html[data-bs-theme="light"] .settings-page .btn.btn-primary:hover,
html[data-bs-theme="light"] .settings-page .btn.btn-primary:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

html[data-bs-theme="light"] .admin-layout .btn.btn-outline-primary,
html[data-bs-theme="light"] .settings-page .btn.btn-outline-primary {
    color: rgba(92, 61, 24, 0.95);
    border-color: rgba(183, 156, 108, 0.88);
    background: color-mix(in srgb, #b79c6c 12%, var(--app-card, #fbf7ef));
}

html[data-bs-theme="light"] .admin-layout .btn.btn-outline-primary:hover,
html[data-bs-theme="light"] .admin-layout .btn.btn-outline-primary:focus-visible,
html[data-bs-theme="light"] .settings-page .btn.btn-outline-primary:hover,
html[data-bs-theme="light"] .settings-page .btn.btn-outline-primary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 24%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.75);
}

html[data-bs-theme="light"] .admin-layout .btn.btn-outline-secondary,
html[data-bs-theme="light"] .settings-page .btn.btn-outline-secondary {
    color: rgba(92, 61, 24, 0.9);
    border-color: rgba(183, 156, 108, 0.65);
    background: color-mix(in srgb, #b79c6c 8%, var(--app-card, #fbf7ef));
}

html[data-bs-theme="light"] .admin-layout .btn.btn-outline-secondary:hover,
html[data-bs-theme="light"] .admin-layout .btn.btn-outline-secondary:focus-visible,
html[data-bs-theme="light"] .settings-page .btn.btn-outline-secondary:hover,
html[data-bs-theme="light"] .settings-page .btn.btn-outline-secondary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 18%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.6);
}

html[data-bs-theme="light"] .admin-layout .btn.btn-secondary,
html[data-bs-theme="light"] .settings-page .btn.btn-secondary {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 16%, #fff);
    border-color: rgba(183, 156, 108, 0.8);
}

html[data-bs-theme="light"] .admin-layout .btn.btn-secondary:hover,
html[data-bs-theme="light"] .admin-layout .btn.btn-secondary:focus-visible,
html[data-bs-theme="light"] .settings-page .btn.btn-secondary:hover,
html[data-bs-theme="light"] .settings-page .btn.btn-secondary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 26%, #fff);
    border-color: rgba(145, 104, 52, 0.75);
}

/* Skapa/redigera lista — modal (CreateAccountListModal) */
html[data-bs-theme="light"] .account-list-modal .btn.btn-primary {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.15);
}

html[data-bs-theme="light"] .account-list-modal .btn.btn-primary:hover,
html[data-bs-theme="light"] .account-list-modal .btn.btn-primary:focus-visible {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

html[data-bs-theme="light"] .account-list-modal .btn.btn-outline-primary {
    color: rgba(92, 61, 24, 0.95);
    border-color: rgba(183, 156, 108, 0.88);
    background: color-mix(in srgb, #b79c6c 12%, var(--app-card, #fbf7ef));
}

html[data-bs-theme="light"] .account-list-modal .btn.btn-outline-primary:hover,
html[data-bs-theme="light"] .account-list-modal .btn.btn-outline-primary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 24%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.75);
}

html[data-bs-theme="light"] .account-list-modal .btn.btn-outline-secondary {
    color: rgba(92, 61, 24, 0.9);
    border-color: rgba(183, 156, 108, 0.65);
    background: color-mix(in srgb, #b79c6c 8%, var(--app-card, #fbf7ef));
}

html[data-bs-theme="light"] .account-list-modal .btn.btn-outline-secondary:hover,
html[data-bs-theme="light"] .account-list-modal .btn.btn-outline-secondary:focus-visible {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 18%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.6);
}

/* Ta bort lista / Bekräfta — raspberry (matchar Settings switches off) */
html[data-bs-theme="light"] .account-list-modal .btn.btn-danger {
    color: #ffffff;
    background-color: #82202d;
    border-color: #5e171f;
}

html[data-bs-theme="light"] .account-list-modal .btn.btn-danger:hover,
html[data-bs-theme="light"] .account-list-modal .btn.btn-danger:focus-visible {
    color: #ffffff;
    background-color: #6b1a25;
    border-color: #5e171f;
}

html[data-bs-theme="dark"] .account-list-modal .btn.btn-danger {
    color: #ffffff;
    background-color: var(--app-raspberry);
    border-color: var(--app-raspberry-border);
}

html[data-bs-theme="dark"] .account-list-modal .btn.btn-danger:hover,
html[data-bs-theme="dark"] .account-list-modal .btn.btn-danger:focus-visible {
    color: #ffffff;
    background-color: var(--app-raspberry-hover);
    border-color: var(--app-raspberry-pressed);
}

/* Kalender (CustomDatePicker .drppro) — ljust tema */
html[data-bs-theme="light"] .drppro {
    --card: #fbf7ef;
    --bg: #ffffff;
    --border: rgba(0, 0, 0, 0.12);
    --text: #111827;
    --muted: #9ca3af;
    --subtle: #6b7280;
    --hover: color-mix(in srgb, #b79c6c 14%, #fbf7ef);
    --ring: rgba(145, 104, 52, 0.45);
    --sel: color-mix(in srgb, #b79c6c 22%, #f5efe4);
    --sel-strong: #9a6a3a;
    background: var(--card) !important;
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

html[data-bs-theme="light"] .drppro .drppro-preset:hover {
    background: color-mix(in srgb, #b79c6c 12%, #f0ebe3);
}

html[data-bs-theme="light"] .drppro .drppro-cell:hover {
    background: color-mix(in srgb, #b79c6c 18%, transparent);
}

html[data-bs-theme="light"] .drppro .icon-btn {
    background: #ede8e0;
    color: #3d3020;
}

html[data-bs-theme="light"] .drppro .icon-btn:hover {
    background: #e0d8cc;
}

html[data-bs-theme="light"] .drppro .btn.btn-primary {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border-color: rgba(145, 104, 52, 0.95);
}

html[data-bs-theme="light"] .drppro .btn.btn-primary:hover,
html[data-bs-theme="light"] .drppro .btn.btn-primary:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
    border-color: rgba(125, 90, 45, 0.95);
}

html[data-bs-theme="light"] .drppro .btn.btn-outline-secondary {
    color: rgba(92, 61, 24, 0.95);
    border-color: rgba(183, 156, 108, 0.75);
    background: color-mix(in srgb, #b79c6c 10%, #fff);
}

html[data-bs-theme="light"] .drppro .btn.btn-outline-secondary:hover,
html[data-bs-theme="light"] .drppro .btn.btn-outline-secondary:focus-visible {
    background: color-mix(in srgb, #b79c6c 22%, #fff);
    color: rgba(50, 32, 10, 0.98);
    border-color: rgba(145, 104, 52, 0.65);
}

html[data-bs-theme="dark"] .drppro {
    --card: var(--app-card);
    --bg: var(--app-muted);
    --border: var(--app-border);
    --text: var(--app-fg);
    --muted: var(--app-muted-fg);
    --subtle: #9a9086;
    --hover: color-mix(in srgb, var(--app-accent) 16%, var(--app-card));
    --ring: rgba(183, 142, 83, 0.45);
    --sel: color-mix(in srgb, var(--app-accent) 24%, var(--app-muted));
    --sel-strong: var(--app-accent);
    background: var(--card) !important;
    border-color: var(--border);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .drppro .drppro-preset:hover {
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-muted));
}

html[data-bs-theme="dark"] .drppro .drppro-cell:hover {
    background: color-mix(in srgb, var(--app-accent) 18%, transparent);
}

html[data-bs-theme="dark"] .drppro .icon-btn {
    background: var(--app-muted);
    color: #f5e8d6;
}

html[data-bs-theme="dark"] .drppro .icon-btn:hover {
    background: color-mix(in srgb, var(--app-accent) 20%, var(--app-muted));
}

/* Datumväljare — trigger + liten popover (DateRangeDropdown) */
html[data-bs-theme="light"] .drp-toggle {
    background: var(--app-card, #fbf7ef);
    color: var(--app-fg, #111827);
    border: 1px solid rgba(183, 156, 108, 0.5);
}

html[data-bs-theme="light"] .drp-toggle:hover {
    background: color-mix(in srgb, #b79c6c 8%, var(--app-card, #fbf7ef));
    border-color: rgba(145, 104, 52, 0.55);
}

html[data-bs-theme="dark"] .drp-toggle {
    background: var(--app-card);
    color: var(--app-fg);
    border: 1px solid var(--app-border);
}

html[data-bs-theme="dark"] .drp-toggle:hover {
    background: color-mix(in srgb, var(--app-accent) 10%, var(--app-card));
    border-color: rgba(183, 156, 108, 0.45);
    color: #fff;
}

html[data-bs-theme="light"] .drp-popover,
html[data-bs-theme="light"] .drp-panel {
    background: var(--app-card, #fbf7ef);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

html[data-bs-theme="dark"] .drp-popover,
html[data-bs-theme="dark"] .drp-panel {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .drp-arrow {
    background: var(--app-card);
    border-left-color: var(--app-border);
    border-top-color: var(--app-border);
}

/* Wizard (LinkedIn full create m.fl.) — ljust brunt, mörkt blått */
.wizard-theme-header {
    padding: 1.5rem 0;
    --w-accent: #b78e53;
    --w-connector-on: #c4a574;
}

html[data-bs-theme="light"] .wizard-theme-header {
    --w-accent: #a38652;
    --w-connector-on: #c4a574;
}

html[data-bs-theme="dark"] .wizard-theme-header {
    --w-accent: #b78e53;
    --w-connector-on: #c4a574;
}

.wizard-theme-header .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.wizard-theme-header .step-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 60%;
    right: -40%;
    height: 2px;
    background: #dee2e6;
    z-index: -1;
}

html[data-bs-theme="dark"] .wizard-theme-header .step-item:not(:last-child)::after {
    background: #2b3138;
}

.wizard-theme-header .step-item.completed::after {
    background: var(--w-connector-on);
}

.wizard-theme-header .step-item.active .step-circle {
    background: var(--w-accent);
    color: white;
    border-color: var(--w-accent);
}

.wizard-theme-header .step-item.completed .step-circle {
    background: #198754;
    color: white;
    border-color: #198754;
}

.wizard-theme-header .step-item.pending .step-circle {
    background: #fff;
    color: #6c757d;
    border-color: #dee2e6;
}

html[data-bs-theme="dark"] .wizard-theme-header .step-item.pending .step-circle {
    background: #1f232a;
    color: #9aa3af;
    border-color: #2b3138;
}

.wizard-theme-header .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
    transition: all 0.3s;
}

.wizard-theme-header .step-title {
    font-size: 0.875rem;
    text-align: center;
    color: #6c757d;
}

html[data-bs-theme="dark"] .wizard-theme-header .step-title {
    color: #9aa3af;
}

.wizard-theme-header .step-item.active .step-title {
    color: var(--w-accent);
    font-weight: 600;
}

html[data-bs-theme="light"] .wizard-theme-header .progress-bar.bg-primary,
html[data-bs-theme="light"] .wizard-theme-header .wizard-theme-progress .progress-bar {
    background-color: #b79c6c !important;
}

html[data-bs-theme="dark"] .wizard-theme-header .progress-bar.bg-primary,
html[data-bs-theme="dark"] .wizard-theme-header .wizard-theme-progress .progress-bar {
    background-color: #b78e53 !important;
}