@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/BlazorDateRangePicker/BlazorDateRangePicker.iitr8bszy4.bundle.scp.css';

/* /Components/CustomComponents/ChartSeriesToolbar.razor.rz.scp.css */
.chart-series-toolbar[b-kgu8wppknm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1.1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

html[data-bs-theme="dark"] .chart-series-toolbar[b-kgu8wppknm] {
    border-color: var(--app-border);
    background: var(--app-muted);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] .chart-series-chip[b-kgu8wppknm] {
    border-color: rgba(255, 255, 255, 0.12);
    background: color-mix(in srgb, var(--app-card) 88%, transparent);
    color: var(--app-fg);
}

html[data-bs-theme="dark"] .chart-series-chip.is-active[b-kgu8wppknm] {
    background: color-mix(in srgb, var(--app-card) 96%, transparent);
}

html[data-bs-theme="dark"] .chart-series-toolbar-reset[b-kgu8wppknm] {
    border-color: rgba(255, 255, 255, 0.14);
    background: color-mix(in srgb, var(--app-card) 70%, transparent);
    color: var(--app-fg);
}

.chart-series-toolbar-meta[b-kgu8wppknm] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.chart-series-toolbar-label[b-kgu8wppknm] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.chart-series-toolbar-count[b-kgu8wppknm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

.chart-series-toolbar-scroll[b-kgu8wppknm] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
}

.chart-series-chip[b-kgu8wppknm] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--bs-body-color, #212529);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, background-color 0.16s ease;
}

.chart-series-chip:hover:not(:disabled)[b-kgu8wppknm] {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.chart-series-chip:disabled[b-kgu8wppknm] {
    cursor: default;
}

.chart-series-chip.is-active[b-kgu8wppknm] {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(15, 23, 42, 0.06);
}

.chart-series-chip.is-hidden[b-kgu8wppknm] {
    background: rgba(255, 255, 255, 0.2);
    opacity: 0.58;
}

.chart-series-chip-dot[b-kgu8wppknm] {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: var(--series-color, #64748b);
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18);
    flex: 0 0 auto;
}

.chart-series-chip-label[b-kgu8wppknm] {
    white-space: nowrap;
}

.chart-series-toolbar-reset[b-kgu8wppknm] {
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--bs-body-color, #212529);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.chart-series-toolbar-reset:hover:not(:disabled)[b-kgu8wppknm] {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(59, 130, 246, 0.25);
}

.chart-series-toolbar-reset:disabled[b-kgu8wppknm] {
    opacity: 0.45;
}

/* Narrow chart cards (e.g. side-by-side on Marknadsdata) — stack reset below chips */
@container chart-panel (max-width: 520px) {
    .chart-series-toolbar[b-kgu8wppknm] {
        flex-direction: column;
        align-items: stretch;
    }

    .chart-series-toolbar-scroll[b-kgu8wppknm] {
        flex: 1 1 auto;
        width: 100%;
    }

    .chart-series-toolbar-reset[b-kgu8wppknm] {
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    .chart-series-toolbar[b-kgu8wppknm] {
        flex-direction: column;
        align-items: stretch;
    }

    .chart-series-toolbar-scroll[b-kgu8wppknm] {
        width: 100%;
    }

    .chart-series-toolbar-meta[b-kgu8wppknm],
    .chart-series-toolbar-reset[b-kgu8wppknm] {
        align-self: flex-start;
    }
}
/* /Components/CustomComponents/ConnectionModal.razor.rz.scp.css */
.connection-backdrop[b-izyge612t0] {
    position: fixed;
    inset: 0;
    z-index: 2000 !important;
}

.connection-modal-root[b-izyge612t0] {
    position: fixed;
    inset: 0;
    z-index: 2005 !important;
}

.connection-modal[b-izyge612t0] {
    max-height: 80vh;
}
/* /Components/CustomComponents/CustomDatePicker.razor.rz.scp.css */
/* ---------- tokens ---------- */
.drppro[b-9kautuvsmm] {
    --bg: #fff;
    --card: #ffffff;
    --border: #e5e7eb;
    --muted: #9ca3af;
    --text: #111827;
    --subtle: #6b7280;
    --hover: #f3f4f6;
    --ring: #93c5fd;
    --sel: #e5f0ff; 
    --sel-strong: #2f6fed;
    --shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.drppro[b-9kautuvsmm] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow);
    color: var(--text);
    box-sizing: border-box;
    max-width: 100%;
    overflow: auto;
}


.drppro-header[b-9kautuvsmm] {
    display: flex;
    gap: 12px;
    margin-bottom: 10px
}

.drppro-field[b-9kautuvsmm] {
    flex: 1;
    min-width: 220px;
}

@media (max-width: 949px) {
    .drppro-header[b-9kautuvsmm] {
        flex-direction: column;
    }

    .drppro-field[b-9kautuvsmm] {
        min-width: 0;
    }
}

    .drppro-field label[b-9kautuvsmm] {
        font-size: .85rem;
        color: var(--subtle)
    }

    .drppro-field .form-control[b-9kautuvsmm] {
        height: 40px;
        border-radius: 10px;
    }


.drppro-body[b-9kautuvsmm] {
    display: flex;
    gap: 16px
    ;
    min-width: 0;
}

.drppro-presets[b-9kautuvsmm] {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.drppro-preset[b-9kautuvsmm] {
    text-align: left;
    background: var(--hover);
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 500;
    color: var(--text);
}

    .drppro-preset:hover[b-9kautuvsmm] {
        background: #e9ecef
    }


.drppro-cals[b-9kautuvsmm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
    ;
    min-width: 0;
}

.drppro-cal[b-9kautuvsmm] {
    min-width: 320px
}

.drppro-cal-head[b-9kautuvsmm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 6px
}

.icon-btn[b-9kautuvsmm] {
    border: 0;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 4px 8px;
    line-height: 1;
    cursor: pointer
}

.icon-btn:hover[b-9kautuvsmm] {
        background: #e5e7eb
}

.icon-btn[disabled][b-9kautuvsmm] {
        opacity: .35;
        pointer-events: none
}


.drppro-weekdays[b-9kautuvsmm] {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 2px;
    color: var(--subtle);
    font-size: .8rem;
    margin-bottom: 4px;
    text-transform: lowercase
}

    .drppro-weekdays > div[b-9kautuvsmm] {
        text-align: center
    }


.drppro-grid[b-9kautuvsmm] {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 4px
}

.drppro-cell[b-9kautuvsmm] {
    appearance: none; 
    -webkit-appearance: none;
    border: 0 !important; 
    outline: 0;
    background: transparent;
    width: 42px;
    height: 36px; 
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

    .drppro-cell:hover[b-9kautuvsmm] {
        background: #eef2ff
    }

    .drppro-cell.muted[b-9kautuvsmm] {
        color: var(--muted)
    }

    .drppro-cell.disabled[b-9kautuvsmm] {
        opacity: .35;
        pointer-events: none
    }

    .drppro-cell.today[b-9kautuvsmm] {
        box-shadow: inset 0 0 0 2px var(--ring);
        border-radius: 8px
    }

    .drppro-cell.sel[b-9kautuvsmm] {
        background: var(--sel)
    }

    .drppro-cell.start[b-9kautuvsmm],
    .drppro-cell.end[b-9kautuvsmm] {
        background: var(--sel-strong);
        color: #fff;
        font-weight: 600;
    }

    .drppro-cell:focus-visible[b-9kautuvsmm] {
        outline: 2px solid var(--ring);
        outline-offset: 1px
    }

.drppro-footer[b-9kautuvsmm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px
}

.drppro-tz[b-9kautuvsmm] {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 6px;
}

/* ----- Narrow desktop / large tablet: stack presets + single calendar column ----- */
@media (max-width: 949px) {
    .drppro[b-9kautuvsmm] {
        max-width: calc(100vw - 1rem);
    }

    .drppro-body[b-9kautuvsmm] {
        flex-direction: column;
        gap: 12px;
    }

    .drppro-presets[b-9kautuvsmm] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .drppro-preset[b-9kautuvsmm] {
        flex: 1 1 calc(50% - 6px);
        min-width: 140px;
        text-align: center;
    }

    .drppro-cals[b-9kautuvsmm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .drppro-cal[b-9kautuvsmm] {
        min-width: 0;
        width: 100%;
    }
}

/* ----- Short viewports (e.g. phone landscape): avoid vertical overflow ----- */
@media (max-height: 520px) {
    .drppro[b-9kautuvsmm] {
        max-height: calc(100vh - 1rem);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        max-width: calc(100vw - 1rem);
    }

    .drppro-body[b-9kautuvsmm] {
        flex-direction: column;
        gap: 12px;
    }

    .drppro-presets[b-9kautuvsmm] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .drppro-preset[b-9kautuvsmm] {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 120px;
        text-align: center;
    }

    .drppro-cals[b-9kautuvsmm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ----- Tablet / iPad landscape: fit within viewport ----- */
@media (max-width: 950px) {
    .drppro[b-9kautuvsmm] {
        padding: 12px;
        max-width: calc(100vw - 1rem);
    }

    .drppro-cal[b-9kautuvsmm] {
        min-width: 0;
        width: 100%;
    }

    .drppro-cals[b-9kautuvsmm] {
        min-width: 0;
    }

    .drppro-cell[b-9kautuvsmm] {
        width: 100%;
        min-width: 0;
    }
}

/* ----- iPad portrait / small tablet: stack presets + single column calendars ----- */
@media (max-width: 768px) {
    .drppro[b-9kautuvsmm] {
        padding: 12px;
        max-width: calc(100vw - 1rem);
    }

    .drppro-body[b-9kautuvsmm] {
        flex-direction: column;
        gap: 12px;
    }

    .drppro-presets[b-9kautuvsmm] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .drppro-preset[b-9kautuvsmm] {
        flex: 1 1 calc(50% - 6px);
        min-width: 120px;
        text-align: center;
    }

    .drppro-cals[b-9kautuvsmm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .drppro-cal[b-9kautuvsmm] {
        min-width: 0;
        width: 100%;
    }

    .drppro-cal-head[b-9kautuvsmm] {
        font-size: 0.9rem;
    }

    .drppro-cell[b-9kautuvsmm] {
        min-width: 0;
        width: auto;
        height: 36px;
    }
}

/* ----- Responsive: stack layout on small screens ----- */
@media (max-width: 520px) {
    .drppro[b-9kautuvsmm] {
        padding: 10px;
    }

    .drppro-header[b-9kautuvsmm] {
        flex-direction: column;
        gap: 8px;
    }

    .drppro-body[b-9kautuvsmm] {
        flex-direction: column;
        gap: 12px;
    }

    .drppro-presets[b-9kautuvsmm] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .drppro-preset[b-9kautuvsmm] {
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        text-align: center;
    }

    .drppro-cals[b-9kautuvsmm] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .drppro-cal[b-9kautuvsmm] {
        min-width: 0;
        width: 100%;
    }

    .drppro-cal-head[b-9kautuvsmm] {
        font-size: 0.9rem;
    }

    .drppro-cell[b-9kautuvsmm] {
        min-width: 0;
        width: auto;
        height: 36px;
    }

    .drppro-grid[b-9kautuvsmm] {
        gap: 2px;
    }

    .drppro-footer[b-9kautuvsmm] {
        flex-wrap: wrap;
    }
}

/* Längst ned i CustomDatePicker.razor.css */
html[data-bs-theme="dark"] .drppro[b-9kautuvsmm] {
    --card: var(--app-card, #2a2724);
    --bg: var(--app-muted, #332f2b);
    --border: var(--app-border, rgba(255, 255, 255, 0.1));
    --text: var(--app-fg, #f5f0ea);
    --muted: var(--app-muted-fg, #b8aea3);
    --subtle: #9a9086;
    --hover: color-mix(in srgb, #b78e53 16%, var(--app-card, #2a2724));
    --ring: rgba(183, 142, 83, 0.45);
    --sel: color-mix(in srgb, #b78e53 24%, var(--app-muted, #332f2b));
    --sel-strong: #b78e53;
    background: var(--card) !important;
    border-color: var(--border);
    color: var(--text);
}
/* /Components/CustomComponents/DateRangeDropdown.razor.rz.scp.css */
.drp-wrapper[b-l1wfl4lpfz] {
    position: relative;
    display: inline-block;
}

.drp-toggle[b-l1wfl4lpfz] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--bs-btn-border-radius, 0.375rem);
    padding: .5rem .85rem;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.drp-label[b-l1wfl4lpfz] {
    white-space: nowrap;
}

    .drp-toggle:hover[b-l1wfl4lpfz] {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

.drp-panel[b-l1wfl4lpfz] {
    position: absolute;
    top: 110%;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    z-index: 1000;
}

.drp-arrow[b-l1wfl4lpfz] {
    position: absolute;
    top: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

/* Position is set by JS (position: fixed) to avoid page scroll when body is short */
.drp-popover[b-l1wfl4lpfz] {
    position: fixed;
    z-index: 1050;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    box-sizing: border-box;
    /* Keep arrow visible; scrolling happens inside the datepicker */
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

.drp-wrapper.drp-popover-right-edge .drp-popover[b-l1wfl4lpfz] {
    position: absolute;
    left: auto;
    left: calc(100% - 58rem);
    margin-right: 6px;
    margin-left: 0;
    top: 100%;
    margin-top: 6px;
}

.drp-wrapper.drp-popover-right-edge .drp-arrow[b-l1wfl4lpfz] {
    right: 6px;
    left: auto;
}

/* ----- Tablet / iPad: keep popover within viewport ----- */
@media (max-width: 950px) {
    .drp-popover[b-l1wfl4lpfz] {
        max-width: calc(100vw - 1rem) !important;
    }
    /* JS handles positioning; avoid switching to centered "modal" behavior here. */
}

/* ----- Responsive: datepicker popover fits viewport on small screens ----- */
@media (max-width: 768px) {
    .drp-wrapper[b-l1wfl4lpfz] {
        width: 100%;
        max-width: 100%;
    }

    .drp-toggle[b-l1wfl4lpfz] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    /* Popover fixed and centered on small screens so it fits viewport */
    .drp-popover[b-l1wfl4lpfz] {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 1rem) !important;
        max-width: min(400px, calc(100vw - 1rem));
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drp-wrapper.drp-popover-right-edge .drp-popover[b-l1wfl4lpfz] {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        margin: 0;
        transform: translate(-50%, -50%);
        width: calc(100vw - 1rem) !important;
        max-width: min(400px, calc(100vw - 1rem));
    }

    .drp-arrow[b-l1wfl4lpfz] {
        display: none;
    }
}
/* /Components/CustomComponents/EffectBootstrapSelect.razor.rz.scp.css */
.effect-bootstrap-select[b-1z16fs5l9c] {
    position: relative;
    display: block;
}

/* When open, stack above scrollable panels / sibling rows. */
.effect-bootstrap-select.dropdown.show[b-1z16fs5l9c] {
    z-index: 1080;
}

.effect-bootstrap-select .dropdown-menu[b-1z16fs5l9c] {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    max-height: min(16rem, calc(100vh - 8rem));
    overflow-y: auto;
}

/* Knappen använder .form-select som lägger till egen chevron — vi har redan bi-chevron-down */
.effect-bootstrap-select button.form-select[b-1z16fs5l9c],
.effect-bootstrap-select button.form-select-sm[b-1z16fs5l9c] {
    background-image: none !important;
}

/* Cinnamon hover/active — same family as form focus (native <select> list cannot be styled on Windows). */
.effect-bootstrap-select .dropdown-item:hover[b-1z16fs5l9c],
.effect-bootstrap-select .dropdown-item:focus[b-1z16fs5l9c] {
    background-color: rgba(183, 142, 83, 0.22);
    color: #111827;
}

.effect-bootstrap-select .dropdown-item.active[b-1z16fs5l9c],
.effect-bootstrap-select .dropdown-item:active[b-1z16fs5l9c] {
    background-color: #b78e53;
    color: #fff;
}

html[data-bs-theme="dark"] .effect-bootstrap-select .dropdown-item:hover[b-1z16fs5l9c],
html[data-bs-theme="dark"] .effect-bootstrap-select .dropdown-item:focus[b-1z16fs5l9c] {
    background-color: rgba(183, 142, 83, 0.22);
    color: #f5f0ea;
}

html[data-bs-theme="dark"] .effect-bootstrap-select .dropdown-item.active[b-1z16fs5l9c],
html[data-bs-theme="dark"] .effect-bootstrap-select .dropdown-item:active[b-1z16fs5l9c] {
    background-color: #b78e53;
    color: #fffaf2;
}
/* /Components/CustomComponents/PerformanceChart.razor.rz.scp.css */
.performance-chart-block[b-lsqpdvqwct] {
    container-type: inline-size;
    container-name: chart-panel;
    width: 100%;
}
/* /Components/CustomComponents/SparkCard.razor.rz.scp.css */
.legend .swatch[b-jm5wh62x0x] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px; 
    margin-right: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; 
}
/* /Components/Layout/EffectPageTemplate.razor.rz.scp.css */
.effect-page-template[b-hkzjria0ip] {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--effect-template-bg, var(--app-bg));
    /* Luft under app-shell-header (sticky) + gemensam horisontell marginal för alla mall-sidor */
    --ept-inline: clamp(1rem, 2.5vw, 1.5rem);
    padding-top: 1rem;
    /*border: 1px solid;
    border-radius: 5px;*/
}

.effect-page-template-header[b-hkzjria0ip] {
    margin-bottom: 1.5rem;
}

.effect-page-template-header-row[b-hkzjria0ip] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--ept-inline);
}

.effect-page-template-heading[b-hkzjria0ip] {
    min-width: 0;
    margin-left: 0;
}

.effect-page-template-title[b-hkzjria0ip] {
    font-size: 1.5rem;
    font-family: var(--app-display-font-family);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
}

.effect-page-template-subtitle[b-hkzjria0ip] {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

.effect-page-template-toolbar[b-hkzjria0ip] {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.effect-page-template-body[b-hkzjria0ip] {
    /* Prevent short pages from constraining popovers/layout */
    min-height: calc(100vh - 6rem);
    background-color: var(--effect-template-bg, var(--app-bg));
    box-sizing: border-box;
    /* Samma sid-indrag som rubrik/datum så t.ex. sidopaneler inte ligger klistrade vid kanten */
    padding-inline: var(--ept-inline);
}

@media (max-width: 900px) {
    .effect-page-template-title[b-hkzjria0ip] {
        font-size: 1.25rem;
    }

    .effect-page-template-subtitle[b-hkzjria0ip] {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .effect-page-template-header-row[b-hkzjria0ip] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .effect-page-template-toolbar[b-hkzjria0ip] {
        width: 100%;
        justify-content: center;
    }

    .effect-page-template-toolbar :deep(.drp-wrapper)[b-hkzjria0ip] {
        width: 100%;
    }

    .effect-page-template-toolbar :deep(.drp-toggle)[b-hkzjria0ip] {
        width: 100%;
        justify-content: center;
    }
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-2r65gix44h] {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    background: var(--app-bg);

}



main[b-2r65gix44h] {

    flex: 1;

    background: var(--app-bg);

    min-width: 0;

}



.sidebar[b-2r65gix44h] {

    /* Ensure NavMenu drawer can overlay page content on mobile */

    position: relative;

    background: var(--app-sidebar);

    border-top-right-radius: 7px;

    border-bottom-right-radius: 7px;

    border-right: 1px solid var(--app-sidebar-border);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);

    z-index: 2000;

    opacity: 1;

}



/* ——— Sticky app header: menu | logo | spacer | profile ——— */

.app-shell-header[b-2r65gix44h] {

    position: sticky;

    top: 0;

    /* Above .nav-scrollable (2000) so hamburger stays visible when menu is open */
    z-index: 2100;

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    gap: 0.5rem;

    min-height: 3.35rem;

    padding: 0.35rem 0.85rem 0.35rem 0.5rem;

    background: var(--app-bg);

    border-bottom: 1px solid var(--app-sidebar-border);

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);

}



.app-shell-header__menu.hamburger-btn[b-2r65gix44h] {

    position: relative;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2.75rem;

    height: 2.75rem;

    margin: 0;

    padding: 0;

    background: var(--app-sidebar);

    border: 1px solid var(--app-sidebar-border);

    font-size: 1.45rem;

    line-height: 1;

    color: var(--app-sidebar-fg);

    border-radius: 0.5rem;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

    cursor: pointer;

}



.app-shell-header__menu.hamburger-btn:hover[b-2r65gix44h] {

    filter: brightness(1.03);

}



.app-shell-header__brand[b-2r65gix44h] {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    line-height: 0;

    text-decoration: none;

    color: inherit;

    border-radius: 0.375rem;

    padding: 0.1rem 0.25rem;

}



.app-shell-header__brand:hover[b-2r65gix44h] {

    opacity: 0.9;

}



.app-shell-header__logo[b-2r65gix44h] {

    height: 2rem;

    width: auto;

    max-height: 2.35rem;

}



.app-shell-header__spacer[b-2r65gix44h] {

    flex: 1 1 auto;

    min-width: 0.5rem;

}



.app-shell-header__user[b-2r65gix44h] {

    flex-shrink: 0;

    display: flex;

    align-items: center;

}



.app-shell-header__user .userInfo[b-2r65gix44h] {

    position: relative;

    display: inline-flex;

    align-items: center;

    margin: 0;

    font-size: 0.95rem;

    font-weight: 500;

}



.app-shell-header__user .userInfo i[b-2r65gix44h] {

    margin-left: 0.35rem;

    font-size: 1.45rem;

    line-height: 1;

}



.layout-body[b-2r65gix44h],

.layout-article[b-2r65gix44h] {

    background: var(--app-bg);

}



.layout-body[b-2r65gix44h] {

    padding-left: 1rem;

    padding-right: 1rem;

}



@media (min-width: 641px) {

    .layout-body[b-2r65gix44h] {

        padding-left: 1.25rem;

        padding-right: 1.5rem;

    }

}



/* NOTE: nav drawer styles live in `NavMenu.razor.css`. */



@media (max-width: 640.98px) {

    .page[b-2r65gix44h] {

        flex-direction: column;

    }



    .nav-scrollable[b-2r65gix44h] {

        display: none;

        transform: translateX(-100%);

    }



    .nav-scrollable.show[b-2r65gix44h] {

        display: block;

        transform: translateX(0);

    }



    .app-shell-header__logo[b-2r65gix44h] {

        max-height: 1.9rem;

    }

}



@media (min-width: 641px) {

    .sidebar[b-2r65gix44h] {

        /* Don't reserve layout space; NavMenu is a fixed drawer via .nav-scrollable */

        width: 0;

        height: 0;

        position: static;

        overflow: visible;

    }

}



#blazor-error-ui[b-2r65gix44h] {

    background: lightyellow;

    bottom: 0;

    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);

    display: none;

    left: 0;

    padding: 0.6rem 1.25rem 0.7rem 1.25rem;

    position: fixed;

    width: 100%;

    z-index: 1000;

}



    #blazor-error-ui .dismiss[b-2r65gix44h] {

        cursor: pointer;

        position: absolute;

        right: 0.75rem;

        top: 0.5rem;

    }

/* /Components/Layout/NavMenu.razor.rz.scp.css */
.logo-img[b-kl9ltqq5c2] {
    max-height: 80px;
}

.logo-container[b-kl9ltqq5c2] {
    display: flex;
    justify-content: right; 
    align-items: center; 
    width: 100%;
    padding-right: 50px;
}

.nav-section-label[b-kl9ltqq5c2] {
    padding: 0.95rem 1.25rem 0.25rem 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--app-muted-fg);  
}
.nav-section-label:first-child[b-kl9ltqq5c2]
{
    padding-top: 2rem;
}

.nav-footer[b-kl9ltqq5c2] {
    margin-top: auto;
    padding: 0.75rem 0.75rem 1rem 0.75rem;
    border-top: 1px solid var(--app-sidebar-border);
}

.nav-inner[b-kl9ltqq5c2] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-main[b-kl9ltqq5c2] {
    display: flex;
    flex-direction: column;

}

.navbar-toggler[b-kl9ltqq5c2] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 1);
}

.navbar-toggler:checked[b-kl9ltqq5c2] {
    background-color: rgba(255, 255, 255, 0.5);
}

.navbar-brand[b-kl9ltqq5c2] {
    font-size: 1.1rem;
}

.bi[b-kl9ltqq5c2] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    top: -1px;
}

/*.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}*/

.item[b-kl9ltqq5c2] {
    font-size: 1rem;
    padding: 0.15rem 0.75rem;
    background-color: transparent;

}

    .item:first-of-type[b-kl9ltqq5c2] {
        padding-top: 0.5rem;
    }

    .item:last-of-type[b-kl9ltqq5c2] {
        padding-bottom: 1rem;
    }

    .item[b-kl9ltqq5c2]  .nav-link {
        color: var(--app-sidebar-fg);
        border: none;
        border-radius: calc(var(--app-radius) - 6px);
        height: 2.75rem;
        display: flex;
        align-items: center;
        line-height: 2.75rem;
        width: 100%;
        gap: 0.6rem;
        padding: 0 0.75rem;
    }

    .item[b-kl9ltqq5c2]  a.active {
        color: var(--app-sidebar-accent-fg);
        background-color: var(--app-sidebar-accent);
    }

    .item[b-kl9ltqq5c2]  .nav-link:hover {
        background: var(--app-nav-link-hover-bg);
        color: var(--app-nav-link-hover-color);
        cursor: pointer;
    }

html[data-bs-theme="light"] .item[b-kl9ltqq5c2]  a.active {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    color: #fffaf2;
    border-color: rgba(145, 104, 52, 0.9);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

html[data-bs-theme="dark"] .item[b-kl9ltqq5c2]  a.active {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    color: #fffaf2;
    border-color: rgba(145, 104, 52, 0.9);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

.nav-scrollable[b-kl9ltqq5c2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: var(--app-sidebar);
    color: var(--app-sidebar-fg);
    border-right: 1px solid var(--app-sidebar-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    overflow-y: auto;
    /* Keep drawer above page content + bootstrap components */
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding: 0.5rem 0;
}

    .nav-scrollable.show[b-kl9ltqq5c2] {
        display: block;
        transform: translateX(0);
    }

@media (min-width: 641px) {
    .navbar-toggler[b-kl9ltqq5c2] {
        display: none;
    }

    .nav-scrollable[b-kl9ltqq5c2] {
        display: block;
        height: 100vh;
        overflow-y: auto;

    }
}

@media (max-width: 640.98px) {
    /* Clear the sticky app header so the first nav label isn't covered */
    .nav-scrollable[b-kl9ltqq5c2] {
        padding-top: 3.5rem;
    }
}
/* /Components/PageInserts/AdminUserCard.razor.rz.scp.css */
.admin-user-table[b-wy0n5egzin] {
    width: 100%;
    table-layout: fixed; /* prevents a single long cell from expanding layout */
}

.admin-user-cell[b-wy0n5egzin] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Give practical widths but allow table to fit column */
.admin-user-user[b-wy0n5egzin] {
    width: 22%;
}

.admin-user-email[b-wy0n5egzin] {
    width: 28%;
}

.admin-user-company[b-wy0n5egzin] {
    width: 28%;
}

/* On smaller screens, allow wrapping for readability */
@media (max-width: 992px) {
    .admin-user-cell[b-wy0n5egzin] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }

    .admin-user-table[b-wy0n5egzin] {
        table-layout: auto;
    }
}

/* /Components/PageInserts/CreateAccountListModal.razor.rz.scp.css */
/* Above .nav-scrollable (2000) and .app-shell-header (2100) */
.account-list-modal-backdrop[b-59j3gt2w4h] {
    position: fixed;
    inset: 0;
    z-index: 2200 !important;
}

.account-list-modal-root[b-59j3gt2w4h] {
    position: fixed;
    inset: 0;
    z-index: 2210 !important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Dropdowns inside child components (EffectBootstrapSelect) */
.account-list-modal-root[b-59j3gt2w4h]  .dropdown-menu {
    z-index: 2220;
}
/* /Components/PageInserts/SimpleLinkedinAdCreation.razor.rz.scp.css */
.card-section[b-7m93h2c9jq] {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.form-group[b-7m93h2c9jq] {
    margin-bottom: 15px;
}

.summary p[b-7m93h2c9jq] {
    margin: 5px 0;
}

.image-preview-list[b-7m93h2c9jq] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.image-preview-item[b-7m93h2c9jq] {
    position: relative;
}

.image-preview-thumb[b-7m93h2c9jq] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
/* /Components/PageInserts/SubscriptionPlanCard.razor.rz.scp.css */
/* Prenumerationskort – samma utseende som tidigare Subscription-sida (scoped till kortkomponenten). */

.pricing-card[b-4gsr1qwuhp] {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    text-align: center;
}

    .pricing-card.featured[b-4gsr1qwuhp] {
        border: 2px solid #b79c6c;
        box-shadow: 0 14px 36px rgba(183, 156, 108, 0.35);
    }

.card-footer[b-4gsr1qwuhp] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ribbon[b-4gsr1qwuhp] {
    position: absolute;
    top: -12px;
    right: 16px;
    background: #b79c6c;
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}

.card-header h2[b-4gsr1qwuhp] {
    font-size: 1.5rem;
    font-weight: 700;
}

.price[b-4gsr1qwuhp] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0.75rem 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.35rem;
}

    .price .period[b-4gsr1qwuhp] {
        font-size: 1.25rem;
        font-weight: 500;
        color: #888;
    }

.features[b-4gsr1qwuhp] {
    list-style: none;
    padding: 0;
    margin: 0 0.4rem 1.5rem;
    text-align: start;
}

    .features li[b-4gsr1qwuhp] {
        margin-bottom: 0.6rem;
        color: #444;
    }

.btn[b-4gsr1qwuhp] {
    width: 100%;
    padding: 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    margin-bottom: 0.75rem;
}

    .btn.primary[b-4gsr1qwuhp] {
        background: #b79c6c;
        color: #000;
    }

    .btn.secondary[b-4gsr1qwuhp] {
        background: #eee;
        color: #000;
    }

    .btn.outline[b-4gsr1qwuhp] {
        background: transparent;
        border: 2px solid #b79c6c;
    }

.details-wrapper[b-4gsr1qwuhp] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.toggle[b-4gsr1qwuhp] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .toggle:hover[b-4gsr1qwuhp] {
        color: #111827;
    }

.toggle.caret[b-4gsr1qwuhp] {
    font-size: 0.9rem;
    transition: transform 0.25s ease;
}

.caret.open[b-4gsr1qwuhp] {
    transform: rotate(180deg);
}

.details-popover[b-4gsr1qwuhp] {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-height: 300px;
    background: #0b0f1a;
    color: #e5e7eb;
    text-align: left;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.88);
    z-index: 50;
    overflow-y: auto;
}

    .details-popover strong[b-4gsr1qwuhp] {
        color: #b79c6c;
        display: block;
        margin-bottom: 0.5rem;
        font-size: 1.15rem;
    }

    .details-popover p[b-4gsr1qwuhp] {
        font-weight: 550;
    }

    .details-popover ul[b-4gsr1qwuhp] {
        margin: 0.5rem 0 0;
        padding-left: 1rem;
    }

.details-popover[b-4gsr1qwuhp]::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #0b0f1a transparent transparent transparent;
}
/* /Components/Pages/Account/CompanyRegistration.razor.rz.scp.css */
body[b-oivfov4umm] {
    background-color: #0b0c0f;
    font-family: var(--app-font-family);

}

.page-wrapper[b-oivfov4umm] {
    text-align: center;
    padding: 4rem 2rem;
    width: 100%;
    background-color: black;
}


.titletext[b-oivfov4umm] {
    font-weight: 700;
    font-size: 3rem !important;
    margin-bottom: 2rem;
    color: white;
}

.subtext[b-oivfov4umm] {
    color: #9fa4fc;
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.info-banner[b-oivfov4umm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    color: #e0cfa8;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.dotedborder[b-oivfov4umm] {
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    border: 1px dashed #d1b774;
    font-weight: 500;
    color: #e4cf9f;

}

.separator[b-oivfov4umm] {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 -0.1rem;
    color: #e4cf9f;
}

.bordertext[b-oivfov4umm] {
    font-weight: 400;
    color: #e4cf9f;
}

.billing-toggle[b-oivfov4umm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

.fakturering[b-oivfov4umm] {
    color: #9fa4fc;
    font-size: 0.95rem;
    padding-right: 1rem;
}

.månad[b-oivfov4umm] {
    color: #9fa4fc;
    border: 1px solid #353b69; /* inre linje */
    border-radius: 999px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 0 0 5px #24272b, /* mellanring */
    0 0 0 6px #353b69; /* ytterkant */
}

/* -------------------------------------- */
/* PRISKORT OCH DETALJER */
/* -------------------------------------- */

/*.row {
    justify-content: center;
    padding-top: 4rem;*/ /* Lägg till padding över korten */
    /*width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    display: flex;
}*/

.card-wraper[b-oivfov4umm] {
    width: 25rem;
    flex: 0 0 390px;
    height: 515px;
}

/* Basstyling för prisboxarna */
.pricing-card[b-oivfov4umm] {
    background-color: #181919;
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: left;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    height: 508px;
}

.card-body[b-oivfov4umm] {
    height: 338px;
}

.text-plansumary[b-oivfov4umm] {
    color: #9fa4fc !important;
    margin-bottom: 1rem;

}

.pricing-card .price-prefix[b-oivfov4umm]
{
    margin-top: -0.8rem;
    margin-bottom: -1.5rem !important;
    font-size: small;
    color: white !important;
    text-align:left;
}


.price-value[b-oivfov4umm] {
    color: white;
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 1rem !important;
    margin-bottom: 1rem;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

    .price-value span[b-oivfov4umm] {
        color: #9fa4fc !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
    }


.feature-list[b-oivfov4umm] {
    margin-top: 1rem;
    min-height: 120px;
}

    .feature-list li[b-oivfov4umm] {
        padding-bottom: 0.8rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        color: white;
        display: inline-flex;
        align-items: flex-start;
    }

    .custom-checkbox[b-oivfov4umm] {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        background-color: #000000;
        border: 1px solid #d1b774;
        border-radius: 5px;
        font-size: 1.4rem;
        margin-right: 0.5rem;
    }

/* -------------------- */
/* POPULÄR KORT STYLING */
/* -------------------- */

.popular-label[b-oivfov4umm] {
    position: absolute;
    top: 55px;
    right: -45px;
    background-color: #ffe8ad;
    color: black;
    padding: 6px 65px;
    font-size: 0.90rem;
    font-weight: bold;
    transform: translateY(-2rem) rotate(40deg);
    z-index: 10;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.6), 0 0 24px rgba(255, 255, 255, 0.4);
    color: darkgoldenrod;
    text-align: center;
}

/* -------------------- */
/* FOOTER OCH KNAPP STYLING */
/* -------------------- */

.card-footer[b-oivfov4umm] {
    background-color: #181919 !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(209, 183, 116, 0.3)!important;
}


.read-more[b-oivfov4umm] {
    cursor: pointer;
    font-weight: 600;
    color: #d1b774 !important;
    margin-bottom: 1rem;
    font-size: large;

}


.start-button[b-oivfov4umm] {
    background-color: #d1b774;
    border-color: #d1b774;
    border-radius: 0.8rem;
    color: #0b0c0f;
    font-weight: bold;
    padding: 0.6rem 0;
    font-size: 1rem;
    transition: background-color 0.2s;
}

    .start-button:hover[b-oivfov4umm] {
        background-color: #4b4332 !important;
        border-color: #e4cf9f;
        color: #0b0c0f;
    }


.last-text[b-oivfov4umm] {
    text-align: center;
    width: 100%;
    padding-top: 5px;
    color: #9fa4fc !important;
}


.text-center[b-oivfov4umm] {
    color: #e4cf9f !important;
    font-size: 1rem;
    margin-top: 4rem;
    font-weight: bold;
}

@media (max-width: 600px) {
    .separator[b-oivfov4umm] {
        display: none;
    }
    .last-text[b-oivfov4umm] {
        white-space: nowrap;
    }
}

/*MODALER*/

.modal[b-oivfov4umm] {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.modal-content[b-oivfov4umm] {
    background-color: #181919;
    margin: 2% auto;
    padding: 0.1rem 1.2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    color: white;
    box-shadow: 0 0 20px #e4cf9f;
    max-height: none;
    overflow-y: visible;
    font-size: 0.85rem;
}

.close-button[b-oivfov4umm] {
    float: right;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background-color: orangered;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-block: 5px;
}

    .close-button:hover[b-oivfov4umm] {
        background-color: #862a0b;
    }

.modal-title[b-oivfov4umm] {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: white;
}

.subscription-form[b-oivfov4umm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-group[b-oivfov4umm] {
    display: flex;
    flex-direction: column;
}

    .form-group select[b-oivfov4umm] {
        appearance: none;
        padding-right: 1.8rem;
        background-image: url("data:image/svg+xml,%3Csvg fill='white' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.3rem center;
        background-size: 20px;
    }


    .form-group label[b-oivfov4umm] {
        font-weight: 600;
        margin-bottom: 0.2rem;
        color: #e4cf9f;
        font-size: 0.85rem;
    }

    .form-group input[b-oivfov4umm],
    .form-group select[b-oivfov4umm] {
        padding: 0.4rem 0.6rem;
        border-radius: 6px;
        border: 1px solid #353b69;
        background-color: #0b0c0f;
        color: white;
        font-size: 0.85rem;
    }

        .form-group input:focus[b-oivfov4umm],
        .form-group select:focus[b-oivfov4umm],
        .form-group textarea:focus[b-oivfov4umm] {
            outline: none;
            border-color: #4b5fcf;
            box-shadow: 0 0 6px 3px rgba(79, 100, 255, 0.5);
        }



    .form-group small[b-oivfov4umm] {
        font-size: 0.7rem;
        color: #9fa4fc;
        margin-top: 0.2rem;
    }

.form-row[b-oivfov4umm] {
    display: flex;
    gap: 0.8rem;
}

    .form-row .half[b-oivfov4umm] {
        flex: 1;
    }

.checkbox-group input[b-oivfov4umm] {
    margin-right: 0.4rem;
}

.terms-note[b-oivfov4umm] {
    font-size: 0.75rem;
    color: #9fa4fc;
    margin-top: 0.4rem;
}

.submit-button[b-oivfov4umm] {
    background-color: #d1b774;
    color: #0b0c0f;
    font-weight: bold;
    padding: 0.6rem;
    font-size: 0.85rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 0.2rem;
    width: 160px;
    margin-left: auto;
    margin-right: auto;
}

    .submit-button:hover[b-oivfov4umm] {
        background-color: #4b4332;
    }

.modal-footer[b-oivfov4umm] {
    margin-top: 1.2rem;
    font-size: 0.7rem;
    color: #9fa4fc;
    text-align: center;
}
/* /Components/Pages/Account/User/CustomerManagement.razor.rz.scp.css */
.subscription-card[b-ftwixwsjdf] {
    background: var(--app-muted);
    border-radius: var(--app-radius);
    padding: 1rem;
}

.cm-page[b-ftwixwsjdf] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1.25rem;
    align-items: flex-start;
}

.cm-right[b-ftwixwsjdf] {
    min-width: 0; /* allow tables/components to shrink within column */
}

/* Keep legacy hooks, but bind to tokens */
.cm-card[b-ftwixwsjdf] {
    border-radius: var(--app-radius);
    padding: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

html[data-bs-theme="dark"] .cm-card[b-ftwixwsjdf] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cm-card-title[b-ftwixwsjdf] {
    font-size: 1.05rem;
    font-weight: 600;
}

.cm-actions[b-ftwixwsjdf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cm-left[b-ftwixwsjdf],
.cm-right[b-ftwixwsjdf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cm-loading[b-ftwixwsjdf],
.cm-notauth[b-ftwixwsjdf] {
    margin-top: 2rem;
}

@media (max-width: 991.98px) {
    .cm-page[b-ftwixwsjdf] {
        grid-template-columns: 1fr;
    }
}

/* /Components/Pages/Account/User/MyPagesIndex.razor.rz.scp.css */
body[b-5earf61wrt] {
}


.white-container[b-5earf61wrt] {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* /Components/Pages/Account/User/Settings.razor.rz.scp.css */
/* Match EffectPageTemplate: luft under sticky header + sidmarginaler */
.settings-page.container[b-dhbbniypn3],
.container.settings-page[b-dhbbniypn3] {
    padding-top: 1rem;
    padding-left: clamp(1rem, 2.5vw, 1.5rem);
    padding-right: clamp(1rem, 2.5vw, 1.5rem);
    box-sizing: border-box;
}

.white-container[b-dhbbniypn3] {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: var(--app-radius, 0.75rem);
    border: 1px solid transparent;
}

html[data-bs-theme="light"] body .white-container[b-dhbbniypn3] {
    /* Light mode: softer cream card instead of stark white. */
    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);
}

.settings-accordion-row[b-dhbbniypn3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.settings-accordion-icon[b-dhbbniypn3] {
    color: rgba(255, 255, 255, 0.7);
}

html[data-bs-theme="light"] .settings-accordion-icon[b-dhbbniypn3] {
    color: rgba(17, 24, 39, 0.85);
}

.settings-layout[b-dhbbniypn3] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.settings-main[b-dhbbniypn3] {
    min-width: 0;
    grid-column: 2;
}

.settings-side-nav[b-dhbbniypn3] {
    top: 0;
    grid-row: 1;
    grid-column: 1;
}

.settings-side-nav-group[b-dhbbniypn3] {
    border: 1px solid var(--app-sidebar-border);
    border-radius: var(--app-radius);
    overflow: hidden;
}

html[data-bs-theme="light"] .settings-side-nav-group[b-dhbbniypn3] {
    border-color: rgba(124, 90, 46, 0.16);
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.95), rgba(248, 241, 231, 0.9));
}

.settings-side-nav-group .list-group-item[b-dhbbniypn3] {
    border: 0;
    border-bottom: 1px solid var(--app-sidebar-border);
    background: rgba(0, 0, 0, 0);
    color: var(--app-sidebar-fg);
}

html[data-bs-theme="light"] .settings-side-nav-group .list-group-item[b-dhbbniypn3] {
    border-bottom-color: rgba(124, 90, 46, 0.14);
    background: transparent;
    color: rgba(17, 24, 39, 0.85);
}

html[data-bs-theme="light"] .settings-side-nav-group .list-group-item.active[b-dhbbniypn3] {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    border-color: rgba(145, 104, 52, 0.9);
    color: #fffaf2;
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

html[data-bs-theme="light"] body .white-container .list-group[b-dhbbniypn3] {
    border-radius: 0.75rem;
    /* overflow:visible so EffectBootstrapSelect / .dropdown-menu is not clipped by the next row */
    overflow: visible;
}

html[data-bs-theme="light"] body .white-container .list-group-item[b-dhbbniypn3] {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(124, 90, 46, 0.12);
    color: rgba(37, 28, 18, 0.92);
}

html[data-bs-theme="light"] body .white-container .list-group-item:hover[b-dhbbniypn3] {
    background: rgba(255, 255, 255, 0.6);
}

html[data-bs-theme="light"] body .white-container h4[b-dhbbniypn3],
html[data-bs-theme="light"] body .white-container h5[b-dhbbniypn3],
html[data-bs-theme="light"] body .white-container label[b-dhbbniypn3],
html[data-bs-theme="light"] body .white-container .fw-semibold[b-dhbbniypn3] {
    color: rgba(52, 38, 24, 0.95);
}

html[data-bs-theme="light"] body .white-container .text-muted[b-dhbbniypn3],
html[data-bs-theme="light"] body .white-container .small[b-dhbbniypn3] {
    color: rgba(98, 78, 55, 0.82) !important;
}

html[data-bs-theme="light"] body .white-container .form-control[b-dhbbniypn3],
html[data-bs-theme="light"] body .white-container .form-select[b-dhbbniypn3] {
    background-color: rgba(255, 255, 255, 0.78);
    border-color: rgba(124, 90, 46, 0.18);
    color: rgba(37, 28, 18, 0.92);
    border-radius: 0.65rem;
    box-shadow: inset 0 1px 1px rgba(124, 90, 46, 0.04);
}

html[data-bs-theme="light"] body .white-container .form-control:focus[b-dhbbniypn3],
html[data-bs-theme="light"] body .white-container .form-select:focus[b-dhbbniypn3] {
    background-color: rgba(255, 255, 255, 0.96);
    border-color: rgba(168, 124, 70, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(214, 181, 136, 0.2);
}

html[data-bs-theme="light"] body .white-container .form-select[b-dhbbniypn3] {
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, rgba(124, 90, 46, 0.8) 50%),
        linear-gradient(135deg, rgba(124, 90, 46, 0.8) 50%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 242, 231, 0.92));
    background-position: calc(100% - 1rem) calc(50% - 0.18rem), calc(100% - 0.7rem) calc(50% - 0.18rem), 0 0;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem, 100% 100%;
    background-repeat: no-repeat;
    appearance: none;
}

html[data-bs-theme="light"] body .white-container .form-check-input[b-dhbbniypn3] {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(124, 90, 46, 0.24);
}

html body .white-container .form-switch .form-check-input[b-dhbbniypn3] {
    width: 2.6rem;
    height: 1.4rem;
    border-radius: 999px;
}

/* Marknadsdata switches (light): raspberry/cream OFF, cinnamon ON */
html[data-bs-theme="light"] body .white-container .form-switch .form-check-input:not(:checked)[b-dhbbniypn3] {
    background-color: #dbc3a3;
    border-color: #a07848;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(94, 23, 31, 0.28);
    background-image: 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");
    opacity: 1;
}

html[data-bs-theme="light"] body .white-container .form-switch .form-check-input:checked[b-dhbbniypn3] {
    background-color: #b78e53;
    border-color: #a07848;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    --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");
}

/* Marknadsdata switches (dark): cream OFF with visible knob; cinnamon ON with darker knob + check */
html[data-bs-theme="dark"] body .white-container .form-switch .form-check-input:not(:checked)[b-dhbbniypn3] {
    background-color: #dbc3a3;
    border-color: #a07848;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(94, 23, 31, 0.32);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%237a5c32'/%3E%3C/svg%3E");
    opacity: 1;
}

html[data-bs-theme="dark"] body .white-container .form-switch .form-check-input:checked[b-dhbbniypn3] {
    background-color: #b78e53;
    border-color: #8f6a3d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
    --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='%237a5c32'/%3E%3Cpath fill='none' stroke='%23fffaf2' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.9' d='M-1.35 0.05 L-0.15 1.25 L1.55-1.25'/%3E%3C/svg%3E");
}

html body .white-container .form-switch .form-check-input:focus[b-dhbbniypn3] {
    border-color: #b78e53;
    box-shadow: 0 0 0 0.2rem rgba(183, 142, 83, 0.22);
}

/* Shopify buttons: brown in light theme, default primary in dark theme. */
.btn-shopify[b-dhbbniypn3],
.btn-shopify-outline[b-dhbbniypn3] {
    border-radius: 0.65rem;
}

/* Light theme (brown) */
html[data-bs-theme="light"] .btn-shopify[b-dhbbniypn3] {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    border: 1px solid rgba(145, 104, 52, 0.9);
    color: #fffaf2;
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

html[data-bs-theme="light"] .btn-shopify:hover[b-dhbbniypn3],
html[data-bs-theme="light"] .btn-shopify:focus[b-dhbbniypn3] {
    background: linear-gradient(180deg, rgba(196, 156, 97, 0.94), rgba(171, 129, 72, 0.98));
    border-color: rgba(132, 92, 44, 0.95);
    color: #fffaf2;
}

html[data-bs-theme="light"] .btn-shopify:active[b-dhbbniypn3] {
    background: linear-gradient(180deg, rgba(163, 121, 65, 0.96), rgba(148, 108, 57, 0.98));
    border-color: rgba(120, 82, 38, 0.95);
    color: #fffaf2;
}

html[data-bs-theme="light"] .btn-shopify-outline[b-dhbbniypn3] {
    background: transparent;
    border: 1px solid rgba(145, 104, 52, 0.75);
    color: rgba(98, 78, 55, 0.95);
}

html[data-bs-theme="light"] .btn-shopify-outline:hover[b-dhbbniypn3],
html[data-bs-theme="light"] .btn-shopify-outline:focus[b-dhbbniypn3] {
    background: rgba(185, 144, 87, 0.14);
    border-color: rgba(145, 104, 52, 0.9);
    color: rgba(52, 38, 24, 0.95);
}

/* Dark theme — cinnamon (same brand as global buttons) */
html[data-bs-theme="dark"] .btn-shopify[b-dhbbniypn3] {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));
    border: 1px solid rgba(145, 104, 52, 0.95);
}

html[data-bs-theme="dark"] .btn-shopify:hover[b-dhbbniypn3],
html[data-bs-theme="dark"] .btn-shopify:focus[b-dhbbniypn3] {
    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-shopify-outline[b-dhbbniypn3] {
    background: transparent;
    border: 1px solid rgba(183, 156, 108, 0.65);
    color: #e8d4b8;
}

html[data-bs-theme="dark"] .btn-shopify-outline:hover[b-dhbbniypn3],
html[data-bs-theme="dark"] .btn-shopify-outline:focus[b-dhbbniypn3] {
    background: color-mix(in srgb, #b78e53 18%, var(--app-card, #2a2724));
    border-color: rgba(145, 104, 52, 0.75);
    color: #fffaf2;
}

.settings-side-nav-group .list-group-item:last-child[b-dhbbniypn3] {
    border-bottom: 0;
}

.settings-side-nav-group .list-group-item.active[b-dhbbniypn3] {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-fg);
}

html[data-bs-theme="dark"] .settings-side-nav-group[b-dhbbniypn3] {
    border-color: var(--app-sidebar-border);
    background: linear-gradient(180deg, rgba(42, 39, 36, 0.95), rgba(35, 32, 29, 0.92));
}

html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item[b-dhbbniypn3] {
    border-bottom-color: var(--app-border);
    color: var(--app-sidebar-fg);
}

html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item.active[b-dhbbniypn3] {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    border-color: rgba(145, 104, 52, 0.9);
    color: #fffaf2;
}

html[data-bs-theme="dark"] body .white-container[b-dhbbniypn3] {
    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);
}

html[data-bs-theme="dark"] body .white-container h4[b-dhbbniypn3],
html[data-bs-theme="dark"] body .white-container h5[b-dhbbniypn3],
html[data-bs-theme="dark"] body .white-container label[b-dhbbniypn3],
html[data-bs-theme="dark"] body .white-container .fw-semibold[b-dhbbniypn3] {
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] body .white-container .text-muted[b-dhbbniypn3],
html[data-bs-theme="dark"] body .white-container .small[b-dhbbniypn3] {
    color: var(--app-muted-fg);
}

html[data-bs-theme="dark"] body .white-container .form-control[b-dhbbniypn3],
html[data-bs-theme="dark"] body .white-container .form-select[b-dhbbniypn3] {
    background-color: var(--app-muted);
    border-color: var(--app-border);
    color: var(--app-card-fg);
}

@media (max-width: 991.98px) {
    .settings-layout[b-dhbbniypn3] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .settings-main[b-dhbbniypn3] {
        grid-column: auto;
        grid-row: 2;
    }

    .settings-side-nav[b-dhbbniypn3] {
        position: static;
        top: auto;
        grid-column: auto;
        grid-row: 1;
    }
}

@media (max-width: 575.98px) {
    .settings-layout[b-dhbbniypn3] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Ad-performance.razor.rz.scp.css */
/* Match DashboardTwo / Analytics: full width + same padding rhythm */

.ad-performance-page[b-bmui03jrdd] {

    width: 100%;

    padding: 1rem;

    box-sizing: border-box;

}



@media (max-width: 900px) {

    .ad-performance-page[b-bmui03jrdd] {

        padding: 0.75rem;

    }

}



@media (max-width: 768px) {

    .ad-performance-page[b-bmui03jrdd] {

        padding: 0.5rem;

    }



    .ad-performance-page .date-filter[b-bmui03jrdd] {

        flex-wrap: wrap;

        align-items: stretch !important;

        gap: 0.75rem;

    }



    .ad-performance-page .date-filter > div[b-bmui03jrdd] {

        width: 100%;

        max-width: 100%;

    }



    .ad-performance-page .date-filter .form-select[b-bmui03jrdd] {

        width: 100%;

        max-width: 100%;

    }



    .ad-performance-page .date-filter .form-check[b-bmui03jrdd] {

        width: 100%;

    }

}



.ad-performance-page .date-filter[b-bmui03jrdd] {

    /* Prefer wrapping over squishing controls */

    flex-wrap: wrap;

}



.ad-performance-page .date-filter > div[b-bmui03jrdd] {

    flex: 0 0 auto;

    min-width: 0;

}



/* Mid widths: keep buttons readable by wrapping */

@media (max-width: 1100px) {

    .ad-performance-page .date-filter[b-bmui03jrdd] {

        align-items: stretch !important;

        gap: 0.75rem;

    }



    .ad-performance-page .date-filter > div[b-bmui03jrdd] {

        /* Make each block wrap to a new row before it gets squished/clipped */

        flex: 1 1 220px;

    }



    .ad-performance-page .date-filter button[b-bmui03jrdd] {

        width: 100%;

    }



    /* Let the checkbox take a full row when needed */

    .ad-performance-page .date-filter .form-check[b-bmui03jrdd] {

        flex-wrap: wrap;

        gap: 0.5rem;

    }

}



.toggle-button[b-bmui03jrdd] {

    color: #ffffff;

    background: linear-gradient(180deg, rgba(185, 144, 87, 0.95), rgba(163, 121, 65, 0.98));

    border: 0;

    border-radius: 0.5rem;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    min-width: 2.15rem;

    min-height: 2.15rem;

    padding: 0.2rem 0.6rem;

    transition: background 0.2s ease, transform 0.1s ease;

    margin: 3px 3px 3px 3px;

}



.toggle-button:hover[b-bmui03jrdd],

.toggle-button:focus-visible[b-bmui03jrdd] {

    color: #ffffff;

    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));

}



.toggle-button:active[b-bmui03jrdd] {

    transform: translateY(1px);

}



table td[b-bmui03jrdd], table th[b-bmui03jrdd] {

    text-align: center;

    vertical-align: middle;

}



/* Tables: reduce horizontal overflow on common sizes */

@media (max-width: 1100px) {

    .performance-table[b-bmui03jrdd] {

        font-size: 0.9rem;

    }



    .performance-table th[b-bmui03jrdd],

    .performance-table td[b-bmui03jrdd] {

        padding: 0.4rem 0.45rem;

        white-space: nowrap;

    }

}



@media (max-width: 900px) {

    /* Hide less critical columns to avoid horizontal scroll */

    .performance-table th:nth-child(2)[b-bmui03jrdd],

    .performance-table td:nth-child(2)[b-bmui03jrdd] {

        display: none; /* Plattform */

    }



    .performance-table th:nth-child(6)[b-bmui03jrdd],

    .performance-table td:nth-child(6)[b-bmui03jrdd],

    .performance-table th:nth-child(7)[b-bmui03jrdd],

    .performance-table td:nth-child(7)[b-bmui03jrdd],

    .performance-table th:nth-child(9)[b-bmui03jrdd],

    .performance-table td:nth-child(9)[b-bmui03jrdd],

    .performance-table th:nth-child(11)[b-bmui03jrdd],

    .performance-table td:nth-child(11)[b-bmui03jrdd] {

        display: none; /* CPC, CTR, Kostnad/Försäljning, Effective Status */

    }



    /* Campaign name column: allow a bit more room */

    .performance-table th:nth-child(3)[b-bmui03jrdd],

    .performance-table td:nth-child(3)[b-bmui03jrdd] {

        text-align: left;

        white-space: normal;

        min-width: 180px;

    }

}



@media (max-width: 768px) {

    .performance-table[b-bmui03jrdd] {

        font-size: 0.85rem;

    }



    .performance-table th[b-bmui03jrdd],

    .performance-table td[b-bmui03jrdd] {

        padding: 0.35rem 0.4rem;

    }

}



.live-dot[b-bmui03jrdd] {
    height: 10px;
    width: 10px;
    background-color: #3a5d4a;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.live-ad-row > td[b-bmui03jrdd] {
    background-color: #3a5d4a;
}

/* Start / Pausa (kampanj, ad set, annons) */
.ap-ad-pause[b-bmui03jrdd] {
    color: #1a1a1a;
    background-color: #cf9e4e;
    border-color: #b88a3e;
}

    .ap-ad-pause:hover:not(:disabled)[b-bmui03jrdd] {
        color: #0d0d0d;
        background-color: #c4923f;
        border-color: #a67832;
    }

    .ap-ad-pause:focus-visible[b-bmui03jrdd] {
        box-shadow: 0 0 0 0.2rem rgba(207, 158, 78, 0.45);
    }

.ap-ad-start[b-bmui03jrdd] {
    color: #fff;
    background-color: #687c6d;
    border-color: #5a6b5e;
}

    .ap-ad-start:hover:not(:disabled)[b-bmui03jrdd] {
        color: #fff;
        background-color: #5a6b5e;
        border-color: #4d5c52;
    }

    .ap-ad-start:focus-visible[b-bmui03jrdd] {
        box-shadow: 0 0 0 0.2rem rgba(104, 124, 109, 0.45);
    }

    .ap-ad-pause:disabled[b-bmui03jrdd],
    .ap-ad-start:disabled[b-bmui03jrdd] {
        opacity: 0.65;
    }



html[data-bs-theme="dark"] .live-ad-row > td[b-bmui03jrdd] {

    background-color: rgba(58, 93, 74, 0.45) !important;

}



/* Light: cream panels like Settings / Marknadsdata */

html[data-bs-theme="light"] .ad-performance-page .card.shadow-sm[b-bmui03jrdd] {

    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);

}



html[data-bs-theme="light"] .ad-performance-page .alert-light[b-bmui03jrdd] {

    background: rgba(255, 255, 255, 0.55);

    border-color: rgba(124, 90, 46, 0.2);

    color: rgba(98, 78, 55, 0.9);

}



html[data-bs-theme="light"] .ad-performance-page .form-check-label[b-bmui03jrdd] {

    color: rgba(52, 38, 24, 0.95);

}



/* Dark: warm surfaces (global rules in app.css; page-specific tweaks) */

html[data-bs-theme="dark"] .ad-performance-page .table-striped > tbody > tr:nth-of-type(odd) > *[b-bmui03jrdd] {

    --bs-table-bg-type: color-mix(in srgb, var(--app-muted) 50%, var(--app-card));

    --bs-table-color-type: var(--app-card-fg);

}



html[data-bs-theme="dark"] .ad-performance-page .btn-warning[b-bmui03jrdd] {

    color: #1a1a1a;

}


/* /Components/Pages/AdminManagement/AdminPage.razor.rz.scp.css */
.admin-layout[b-e4sr7nfbbv] {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Match Settings.razor two-column layout; side nav följer samma ljust bruna tema */
.settings-layout[b-e4sr7nfbbv] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.settings-main[b-e4sr7nfbbv] {
    min-width: 0;
    grid-column: 2;
}

.settings-side-nav[b-e4sr7nfbbv] {
    top: 0;
    grid-row: 1;
    grid-column: 1;
}

.settings-side-nav-group[b-e4sr7nfbbv] {
    border: 1px solid var(--app-sidebar-border);
    border-radius: var(--app-radius);
    overflow: hidden;
}

html[data-bs-theme="light"] .settings-side-nav-group[b-e4sr7nfbbv] {
    border-color: rgba(124, 90, 46, 0.16);
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.95), rgba(248, 241, 231, 0.9));
}

.settings-side-nav-group .list-group-item[b-e4sr7nfbbv] {
    border: 0;
    border-bottom: 1px solid var(--app-sidebar-border);
    background: rgba(0, 0, 0, 0);
    color: var(--app-sidebar-fg);
}

html[data-bs-theme="light"] .settings-side-nav-group .list-group-item[b-e4sr7nfbbv] {
    border-bottom-color: rgba(124, 90, 46, 0.14);
    background: transparent;
    color: rgba(17, 24, 39, 0.85);
}

/* Aktiv flik: samma bruna gradient + vit text som Settings / Skapa annonser */
html[data-bs-theme="light"] .settings-side-nav-group .list-group-item.active[b-e4sr7nfbbv],
html[data-bs-theme="light"] .settings-side-nav-group .list-group-item.active:focus[b-e4sr7nfbbv],
html[data-bs-theme="light"] .settings-side-nav-group .list-group-item.active:focus-visible[b-e4sr7nfbbv] {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    border-color: rgba(145, 104, 52, 0.9);
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

html[data-bs-theme="light"] .settings-side-nav-group .list-group-item.active:hover[b-e4sr7nfbbv] {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.95), rgba(175, 133, 78, 0.99));
    border-color: rgba(125, 90, 45, 0.88);
}

.settings-side-nav-group .list-group-item:last-child[b-e4sr7nfbbv] {
    border-bottom: 0;
}

.settings-side-nav-group .list-group-item.active[b-e4sr7nfbbv] {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-fg);
}

html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item.active[b-e4sr7nfbbv],
html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item.active:hover[b-e4sr7nfbbv],
html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item.active:focus[b-e4sr7nfbbv],
html[data-bs-theme="dark"] .settings-side-nav-group .list-group-item.active:focus-visible[b-e4sr7nfbbv] {
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    border-color: rgba(145, 104, 52, 0.9);
    color: #fffaf2;
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

@media (max-width: 991.98px) {
    .settings-layout[b-e4sr7nfbbv] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .settings-main[b-e4sr7nfbbv] {
        grid-column: auto;
        grid-row: 2;
    }

    .settings-side-nav[b-e4sr7nfbbv] {
        position: static;
        top: auto;
        grid-column: auto;
        grid-row: 1;
    }
}

@media (max-width: 575.98px) {
    .settings-layout[b-e4sr7nfbbv] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
/* /Components/Pages/AiAnalysis.razor.rz.scp.css */
.ai-analysis-panel[b-cunyms6i8m] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

.ai-analysis-controls[b-cunyms6i8m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-analysis-control-grid[b-cunyms6i8m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

.ai-analysis-actions[b-cunyms6i8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ai-analysis-preview-head[b-cunyms6i8m] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.ai-analysis-badges[b-cunyms6i8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-analysis-section-title[b-cunyms6i8m] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.ai-analysis-stat-grid[b-cunyms6i8m],
.ai-analysis-grid[b-cunyms6i8m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
}

.ai-analysis-stat-grid[b-cunyms6i8m] {
    margin-bottom: 1rem;
}

.ai-analysis-stat-card[b-cunyms6i8m],
.ai-analysis-card[b-cunyms6i8m] {
    background: var(--app-card, var(--bs-body-bg, #fff));
    border: 1px solid var(--app-border, var(--bs-border-color, #dee2e6));
    border-radius: 0.5rem;
    padding: 1rem;
    min-width: 0;
}

.ai-analysis-stat-label[b-cunyms6i8m] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

.ai-info[b-cunyms6i8m] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: help;
}

.ai-info-tooltip[b-cunyms6i8m] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 280px;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease;
    z-index: 20;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.ai-info:hover .ai-info-tooltip[b-cunyms6i8m],
.ai-info:focus-visible .ai-info-tooltip[b-cunyms6i8m] {
    opacity: 1;
    visibility: visible;
}

.ai-analysis-stat-value[b-cunyms6i8m] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    line-height: 1.2;
    margin-top: 0.25rem;
}

.ai-analysis-stat-value-small[b-cunyms6i8m] {
    font-size: 1rem;
}

.ai-analysis-card-topline[b-cunyms6i8m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ai-analysis-card-meta[b-cunyms6i8m],
.ai-analysis-card-subtitle[b-cunyms6i8m] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ai-analysis-card-title[b-cunyms6i8m] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    color: var(--bs-body-color, #212529);
}

.ai-analysis-metrics-inline[b-cunyms6i8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.ai-metric-chip[b-cunyms6i8m] {
    min-width: 92px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--app-border, var(--bs-border-color, #dee2e6));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--app-card, #fff) 92%, var(--app-muted, #f3f4f6));
}

.ai-metric-chip-label[b-cunyms6i8m] {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.2rem;
}

.ai-metric-chip-value[b-cunyms6i8m] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
}

.ai-platform-badge[b-cunyms6i8m],
.ai-priority-badge[b-cunyms6i8m],
.ai-objective-badge[b-cunyms6i8m] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-objective-badge[b-cunyms6i8m] {
    background: rgba(111, 66, 193, 0.12);
    color: #5a2d9a;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.ai-badge-row[b-cunyms6i8m] {
    display: inline-flex;
    align-items: center;
}

.ai-platform-meta[b-cunyms6i8m] {
    background: rgba(33, 132, 255, 0.12);
    color: #1256a3;
}

.ai-platform-google[b-cunyms6i8m] {
    background: rgba(34, 139, 34, 0.12);
    color: #1f6f1f;
}

.ai-platform-linkedin[b-cunyms6i8m] {
    background: rgba(10, 102, 194, 0.12);
    color: #0a58aa;
}

.ai-platform-all[b-cunyms6i8m] {
    background: rgba(108, 117, 125, 0.12);
    color: #5c6770;
}

.ai-priority-high[b-cunyms6i8m] {
    background: rgba(220, 53, 69, 0.12);
    color: #b42333;
}

.ai-priority-medium[b-cunyms6i8m] {
    background: rgba(255, 193, 7, 0.18);
    color: #946200;
}

.ai-priority-low[b-cunyms6i8m] {
    background: rgba(25, 135, 84, 0.12);
    color: #176c43;
}

.ai-recommendation-image-wrap[b-cunyms6i8m] {
    margin: -1rem -1rem 0.9rem -1rem;
    border-bottom: 1px solid var(--app-border, var(--bs-border-color, #dee2e6));
    background: color-mix(in srgb, var(--app-card, #fff) 88%, var(--app-muted, #f3f4f6));
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 420px;
}

.ai-recommendation-image[b-cunyms6i8m] {
    display: block;
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ai-recommendation-creative-preview[b-cunyms6i8m],
.ai-recommendation-proposed-copy[b-cunyms6i8m],
.ai-recommendation-evidence[b-cunyms6i8m] {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--app-border, var(--bs-border-color, #dee2e6));
}

.ai-recommendation-summary-line[b-cunyms6i8m] {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    color: var(--bs-body-color, #212529);
}

.ai-detail-grid[b-cunyms6i8m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 0.75rem;
    margin-top: 0.65rem;
}

.ai-detail-item[b-cunyms6i8m] {
    min-width: 0;
}

.ai-detail-label[b-cunyms6i8m] {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.3rem;
}

.ai-detail-value[b-cunyms6i8m] {
    font-size: 0.92rem;
    color: var(--bs-body-color, #212529);
    font-weight: 600;
}

.ai-chip-list[b-cunyms6i8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ai-chip[b-cunyms6i8m] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-accent, #0d6efd) 12%, transparent);
    color: var(--bs-body-color, #212529);
    font-size: 0.78rem;
    border: 1px solid var(--app-border, var(--bs-border-color, #dee2e6));
}

.ai-recommendation-headline[b-cunyms6i8m] {
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.ai-recommendation-primary-text[b-cunyms6i8m],
.ai-recommendation-copy[b-cunyms6i8m] {
    font-size: 0.92rem;
    color: var(--bs-body-color, #212529);
    line-height: 1.5;
}

.ai-recommendation-cta[b-cunyms6i8m],
.ai-recommendation-section-title[b-cunyms6i8m] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bs-secondary-color, #6c757d);
}

.ai-recommendation-evidence ul[b-cunyms6i8m] {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
}

.ai-recommendation-evidence li[b-cunyms6i8m] {
    margin-bottom: 0.35rem;
}

@media (max-width: 768px) {
    .ai-analysis-preview-head[b-cunyms6i8m],
    .ai-analysis-card-topline[b-cunyms6i8m] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-analysis-actions[b-cunyms6i8m] {
        flex-direction: column;
    }

    .ai-analysis-actions .btn[b-cunyms6i8m] {
        width: 100%;
    }
}

html[data-bs-theme="dark"] .ai-analysis-panel[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-analysis-stat-card[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-analysis-card[b-cunyms6i8m] {
    background: color-mix(in srgb, var(--app-card, #202124) 94%, #0f1115);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .ai-analysis-card-title[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-analysis-stat-value[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-recommendation-primary-text[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-recommendation-copy[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-metric-chip-value[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-detail-value[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-recommendation-summary-line[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-chip[b-cunyms6i8m] {
    color: rgba(255, 255, 255, 0.92);
}

html[data-bs-theme="dark"] .ai-analysis-card-meta[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-analysis-card-subtitle[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-recommendation-cta[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-recommendation-section-title[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-analysis-stat-label[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-metric-chip-label[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-detail-label[b-cunyms6i8m] {
    color: rgba(255, 255, 255, 0.68);
}

html[data-bs-theme="dark"] .ai-metric-chip[b-cunyms6i8m],
html[data-bs-theme="dark"] .ai-chip[b-cunyms6i8m] {
    border-color: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--app-card, #202124) 94%, #0f1115);
}
/* /Components/Pages/Analytics.razor.rz.scp.css */
/* Match DashboardTwo: full width + same padding rhythm as .dashboard-two */
.analytics-page[b-mghtficv35] {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .analytics-page[b-mghtficv35] {
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    .analytics-page[b-mghtficv35] {
        padding: 0.5rem;
    }

    .analytics-controls-section .row.align-items-end[b-mghtficv35] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .analytics-controls-section .row .col-auto[b-mghtficv35] {
        width: 100%;
        max-width: 100%;
    }

    .analytics-controls-section .form-select[b-mghtficv35] {
        width: 100%;
        max-width: 100%;
    }
}

.white-container[b-mghtficv35] {
    padding: 20px;
    margin-bottom: 10px;
    overflow: visible;
    border-radius: var(--app-radius, 0.75rem);
    /* Theme colors: app.css + html[data-bs-theme] rules for .analytics-page .white-container */
}

.analytics-info[b-mghtficv35] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    cursor: help;
    font-size: 1rem;
    flex: 0 0 auto;
}

.analytics-info:hover[b-mghtficv35] {
    color: var(--bs-body-color, #212529);
}

.analytics-info-tooltip[b-mghtficv35] {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(100% + 0.45rem);
    transform: none;
    padding: 0.6rem 0.85rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: var(--bs-body-color, #212529);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    width: min(360px, calc(100vw - 2rem));
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

@media (min-width: 1200px) {
    .analytics-info-tooltip[b-mghtficv35] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: clamp(240px, 32vw, 360px);
        max-width: calc(100vw - 2rem);
    }
}

.analytics-info:hover .analytics-info-tooltip[b-mghtficv35] {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1199.98px) {
    .analytics-info-tooltip[b-mghtficv35] {
        position: fixed;
        left: max(1rem, env(safe-area-inset-left, 0px));
        right: max(1rem, env(safe-area-inset-right, 0px));
        top: 50vh;
        bottom: auto;
        width: auto;
        max-width: none;
        transform: translateY(-50%);
        margin: 0;
        max-height: min(70vh, 22rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 5000;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        text-align: left;
        box-sizing: border-box;
    }
}

/* Controls above GA4 data, but below sidebar (z-index 2) so popover doesn't overlap menu */
.analytics-controls-section[b-mghtficv35] {
    position: relative;
    z-index: 1;
}

.analytics-data-section[b-mghtficv35] {
    position: relative;
    z-index: 0;
}

.date-filter-row[b-mghtficv35],
.date-picker-container[b-mghtficv35],
.analytics-page[b-mghtficv35] {
    overflow: visible;
}

.ellipsis[b-mghtficv35] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.loading-overlay[b-mghtficv35] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ga-bar-source[b-mghtficv35],
.ga-bar-city[b-mghtficv35] {
    height: 10px;
    min-width: 2px;
    border-radius: 4px;
    display: block;
}

.ga-bar-source[b-mghtficv35] {
    background-color: #cf9e4e;
}

.ga-bar-city[b-mghtficv35] {
    background-color: #61202d;
}

html[data-bs-theme="dark"] .ga-bar-city[b-mghtficv35] {
    background-color: var(--app-chart-burgundy);
}

/* Endast GA4-containrarna (inte "Välj lista") - samma bakgrund som sidan, ingen skugga/kant */
.analytics-data-section .white-container[b-mghtficv35] {
    background-color: var(--effect-template-bg, var(--app-bg));
    box-shadow: none;
    border: none;
}

    .analytics-data-section .white-container .card[b-mghtficv35] {
        --bs-card-bg: var(--bs-body-bg, #fff);
        background-color: var(--bs-body-bg, #fff);
    }

.analytics-data-section .white-container .card .card-body[b-mghtficv35] {
    background-color: transparent;
}

/* Light: cream panels like Settings / Marknadsdata */
html[data-bs-theme="light"] .analytics-page .card.shadow-sm[b-mghtficv35] {
    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);
}

html[data-bs-theme="light"] .analytics-page .card h6[b-mghtficv35],
html[data-bs-theme="light"] .analytics-page .card h4[b-mghtficv35] {
    color: rgba(52, 38, 24, 0.95);
}

html[data-bs-theme="light"] .analytics-page .card .text-muted[b-mghtficv35] {
    color: rgba(98, 78, 55, 0.82) !important;
}

html[data-bs-theme="light"] .analytics-page .analytics-info[b-mghtficv35] {
    color: rgba(98, 78, 55, 0.82);
}

html[data-bs-theme="light"] .analytics-page .analytics-info:hover[b-mghtficv35] {
    color: rgba(52, 38, 24, 0.95);
}
/* /Components/Pages/Connections.razor.rz.scp.css */
.connect-card[b-l37xgcl679] {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 14px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.connect-card:hover[b-l37xgcl679] {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0,0,0,.08);
        border-color: rgba(0,0,0,.08);
}

/* "Ansluten" badge – Forest green to match Settings switches */
.connect-card .badge.text-bg-success[b-l37xgcl679] {
    background-color: #3a5d4a !important;
    color: #fff !important;
}

/* "Koppla från" button – Burgundy to match Settings switches (off state) */
.connect-card .btn-outline-danger[b-l37xgcl679] {
    --bs-btn-color: #82202d;
    --bs-btn-border-color: #82202d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #82202d;
    --bs-btn-hover-border-color: #82202d;
    --bs-btn-focus-shadow-rgb: 130, 32, 45;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #82202d;
    --bs-btn-active-border-color: #5e171f;
    --bs-btn-disabled-color: #82202d;
    --bs-btn-disabled-border-color: #82202d;
}

html[data-bs-theme="dark"] .connect-card .btn-outline-danger[b-l37xgcl679] {
    --bs-btn-color: var(--app-raspberry);
    --bs-btn-border-color: var(--app-raspberry-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-raspberry);
    --bs-btn-hover-border-color: var(--app-raspberry-border);
    --bs-btn-focus-shadow-rgb: 201, 107, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-raspberry-hover);
    --bs-btn-active-border-color: var(--app-raspberry-pressed);
    --bs-btn-disabled-color: var(--app-raspberry);
    --bs-btn-disabled-border-color: var(--app-raspberry-border);
}

.card-title[b-l37xgcl679] {
    font-weight: 600;
}

.small .spinner-border-sm[b-l37xgcl679] {
    width: .9rem;
    height: .9rem;
}

.overlay[b-l37xgcl679] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.overlay-content[b-l37xgcl679] {
    background-color: #222;
    color: #fff;
    padding: 2rem 3rem;
    border-radius: 0.75rem;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.connections-embedded-grid[b-l37xgcl679] {
    row-gap: 1rem;
}

.connections-embedded-col[b-l37xgcl679] {
    display: flex;
}

.connections-embedded-card[b-l37xgcl679] {
    width: 100%;
}

@media (min-width: 992px) {
    .connections-embedded-col[b-l37xgcl679] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .connections-embedded-body[b-l37xgcl679] {
        display: grid !important;
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
        grid-template-areas:
            "header actions"
            "copy actions";
        align-items: center;
        column-gap: 1.25rem;
        row-gap: 0.75rem;
    }

    .connections-embedded-body > :first-child[b-l37xgcl679] {
        grid-area: header;
        margin-bottom: 0 !important;
    }

    .connections-embedded-copy[b-l37xgcl679] {
        grid-area: copy;
        margin-bottom: 0 !important;
    }

    .connections-embedded-actions[b-l37xgcl679] {
        grid-area: actions;
        align-self: stretch;
        justify-self: end;
        width: min(100%, 320px);
    }
}
/* /Components/Pages/CreateAds.razor.rz.scp.css */
.createads-layout[b-rdhv9fh1v5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.createads-top-layout[b-rdhv9fh1v5] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.createads-top-nav[b-rdhv9fh1v5] {
    width: 100%;
}

.createads-top-nav-group[b-rdhv9fh1v5] {
    border: 1px solid var(--app-sidebar-border);
    border-radius: var(--app-radius);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: hidden;
    background: var(--app-card);
}

html[data-bs-theme="light"] .createads-top-nav-group[b-rdhv9fh1v5] {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.55);
}

.createads-top-nav-group .list-group-item[b-rdhv9fh1v5] {
    border: 0;
    border-right: 1px solid var(--app-sidebar-border);
    background: rgba(0, 0, 0, 0);
    color: var(--app-sidebar-fg);
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-bs-theme="light"] .createads-top-nav-group .list-group-item[b-rdhv9fh1v5] {
    border-right-color: rgba(0, 0, 0, 0.16);
    color: rgba(17, 24, 39, 0.85);
}

.createads-top-nav-group .list-group-item:last-child[b-rdhv9fh1v5] {
    border-right: 0;
}

/* Aktiv flik: vit text (Bootstrap/list-group sätter annars mörk färg) */
.createads-top-nav-group .list-group-item.active[b-rdhv9fh1v5],
.createads-top-nav-group .list-group-item.active:focus[b-rdhv9fh1v5],
.createads-top-nav-group .list-group-item.active:focus-visible[b-rdhv9fh1v5] {
    color: #ffffff !important;
    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.2);
}

.createads-top-nav-group .list-group-item.active:hover[b-rdhv9fh1v5] {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(195, 154, 97, 0.98), rgba(175, 133, 78, 1));
}

html[data-bs-theme="dark"] .createads-top-nav-group .list-group-item.active[b-rdhv9fh1v5],
html[data-bs-theme="dark"] .createads-top-nav-group .list-group-item.active:hover[b-rdhv9fh1v5] {
    color: #fffaf2;
    background: linear-gradient(180deg, rgba(185, 144, 87, 0.92), rgba(163, 121, 65, 0.96));
    border-color: rgba(145, 104, 52, 0.9);
    text-shadow: 0 1px 0 rgba(70, 45, 17, 0.18);
}

.createads-main[b-rdhv9fh1v5] {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .createads-top-nav-group .list-group-item[b-rdhv9fh1v5] {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .createads-layout[b-rdhv9fh1v5] {
        gap: 0.75rem;
    }
}

/* /Components/Pages/CreateMetaAd.razor.rz.scp.css */
.card-section[b-g6zwg92ei0] {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--app-radius, 8px);
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border: 1px solid var(--app-border);
}

.form-group[b-g6zwg92ei0] {
    margin-bottom: 15px;
}

.form-field-hint[b-g6zwg92ei0] {
    min-height: 1.35rem;
}

.summary p[b-g6zwg92ei0] {
    margin: 5px 0;
}

.image-preview-list[b-g6zwg92ei0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.image-preview-item[b-g6zwg92ei0] {
    position: relative;
}

.image-preview-thumb[b-g6zwg92ei0] {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.geo-map[b-g6zwg92ei0] {
    width: 100%;
    height: 420px;
    border-radius: 8px;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.flex-container[b-o69uuz0wso] {
    display: flex;
    justify-content: center; /* Center items horizontally */
    margin-bottom: 20px; /* Space below the charts */
    align-items: stretch;
}

.bar-chart-container[b-o69uuz0wso],
.pie-chart-container[b-o69uuz0wso] {
    margin: 0 10px; /* Space between charts */
}

.spinner-overlay[b-o69uuz0wso] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.spinnerSpinn-overlay[b-o69uuz0wso] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999; 
    background-color: rgba(255, 255, 255, 0.6); 
}

.white-container[b-o69uuz0wso] {
    background-color: rgba(255, 255, 255, 0.85); 
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-title[b-o69uuz0wso] {
    font-weight: bold; 
    color: #6c757d; 
}

.card-text[b-o69uuz0wso] {
    font-size: 2rem; 
    color: #343a40; 
}


.header[b-o69uuz0wso] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filters-section[b-o69uuz0wso] {
    background-color: #fff; 
    padding: 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.075);
}

.filters[b-o69uuz0wso] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
}

.filter-item[b-o69uuz0wso] {
    display: flex;
    margin: 0;
    flex-direction: column;
}


.filter-item-Date[b-o69uuz0wso] {
    display: flex
}

.message-placeholder[b-o69uuz0wso] {
    min-height: 20px; 
}

.dropdown-toggle[b-o69uuz0wso] {
    text-align: left; /* Align text to the left */
}

.key-metrics[b-o69uuz0wso] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: #e8e4d9;
    padding: 10px;
}

.metric-item[b-o69uuz0wso] {
    flex: 1;
    text-align: center;
}

.chart[b-o69uuz0wso] {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
}

.chart-title[b-o69uuz0wso] {
    font-weight: bold;
    margin-bottom: 5px; 
    color: #343a40; 
    text-align: match-parent;
}


.chart-content[b-o69uuz0wso] {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.export[b-o69uuz0wso] {
    display: flex;
    justify-content: flex-end;
}

.error-message[b-o69uuz0wso] {
    min-height: 20px; 
    visibility: hidden; 
}

    .error-message p[b-o69uuz0wso] {
        visibility: visible;
    }

.notification-box[b-o69uuz0wso] {
    position: absolute;
    top: 100px;
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 999;
    background-color: #d3d3d3;
    border: 1px solid #ccc;
    color: #333;
    padding: 20px; 
    border-radius: 5px;
    width: 80%; 
    max-width: 600px; 
    opacity: 1; 
    animation: pulsate-b-o69uuz0wso 2s infinite; 
    font-size: 30px; 
}

@keyframes pulsate-b-o69uuz0wso {
    0% {
        opacity: 1; 
        transform: translateX(-50%) scale(1); 
    }

    50% {
        opacity: 0.7; 
        transform: translateX(-50%) scale(1.05); 
    }

    100% {
        opacity: 1; 
        transform: translateX(-50%) scale(1); 
    }
}


.disabled-section[b-o69uuz0wso] {
    opacity: 0.5; 
    pointer-events: none; 
    color: grey;
}

    .disabled-section .form-control[b-o69uuz0wso] {
        background-color: #f0f0f0;
        border-color: #dcdcdc;
    }

    .disabled-section label[b-o69uuz0wso] {
        color: #a9a9a9; 
    }

    .disabled-section .form-control[b-o69uuz0wso] {
        cursor: not-allowed; 
    }

.info-icon[b-o69uuz0wso] {
    display: inline-block;
    position: relative;
    font-size: 1.2em;
    margin-left: 5px;
    border-radius: 50%; 
    text-align: center;
    line-height: 20px; 
}



.tooltip-text[b-o69uuz0wso] {
    visibility: hidden;
    width: 180px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -90px; 
    opacity: 0;
    transition: opacity 0.3s; 
} 
    .tooltip-text[b-o69uuz0wso]::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }


.info-icon:hover .tooltip-text[b-o69uuz0wso] {
    visibility: visible;
    opacity: 1;
}

.info-icon2[b-o69uuz0wso] {
    display: inline-block;
    position: absolute;
    font-size: 1.2em;
    margin-left: 5px;
    border-radius: 50%;
    margin-left: 600px;
    text-align: center;
    line-height: 20px;
}

    .info-icon2:hover .tooltip-text[b-o69uuz0wso] {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s;
    }

/* ----- palette ----- */
.dashboard-dark[b-o69uuz0wso] {
    --bg: #121417;
    --panel: #1b1f24;
    --card: #1f232a;
    --text: #f3f6fa;
    --muted: #9aa3af;
    --border: #2b3138;
    --success: #22c55e;
    --danger: #ef4444;
}

:root[b-o69uuz0wso] {
    --spark-card-height: 260px;
}


.spark-card[b-o69uuz0wso],
.card.h-100[b-o69uuz0wso] {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    height: var(--spark-card-height);
}

    /* STACK: title → value → trend → compared → hr → chart (bottom) */
    .spark-card .card-body[b-o69uuz0wso] {
        display: flex;
        flex-direction: column;
        align-items: center; /* center horizontally */
        text-align: center;
        padding: 14px 16px !important; /* compact */
        height: 100%;
    }

    .spark-card .title[b-o69uuz0wso] {
        color: var(--muted);
        font-size: .95rem;
        letter-spacing: .2px;
        margin-bottom: .25rem;
    }

    .spark-card .value[b-o69uuz0wso] {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: .25rem;
    }

    .spark-card .trend[b-o69uuz0wso] {
        font-weight: 600;
        margin-bottom: .25rem;
    }

.trend-up[b-o69uuz0wso] {
    color: var(--success);
}

.trend-down[b-o69uuz0wso] {
    color: var(--danger);
}

html[data-bs-theme="light"] .trend-up[b-o69uuz0wso] {
    color: #3a5d4a;
}

html[data-bs-theme="light"] .trend-down[b-o69uuz0wso] {
    color: #82202d;
}

html[data-bs-theme="dark"] .trend-down[b-o69uuz0wso] {
    color: var(--app-raspberry);
}

.spark-card .compare[b-o69uuz0wso] {
    color: var(--muted);
    font-size: .8rem;
    margin-bottom: .5rem;
}

.spark-sep[b-o69uuz0wso] {
    border: 0;
    border-top: 1px solid var(--border);
    opacity: .9;
    width: 100%;
    margin: .5rem 0;
}

/* chart area is always at the bottom */
.spark-card .chart-zone[b-o69uuz0wso] {
    margin-top: auto; /* PUSH to bottom */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.spark-card .pie-wrap[b-o69uuz0wso] {
    width: 56px;
    height: 56px;
    min-width: 56px;
}

.spark-card .legend[b-o69uuz0wso] {
    margin-top: .25rem;
}

    .spark-card .legend .dot[b-o69uuz0wso] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: .5rem;
    }

.metrics-wrap[b-o69uuz0wso] {
    overflow: hidden;
}

.metrics-grid[b-o69uuz0wso] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 16px;
    width: 100%;
}

.dashboard-dark[b-o69uuz0wso],
.metrics-wrap[b-o69uuz0wso],
.white-container[b-o69uuz0wso],
.card-container[b-o69uuz0wso] {
    width: 100%;
    max-width: none; 
}

.metrics-grid > .spark-card[b-o69uuz0wso] {
    width: 100%;
}

.metrics-grid > .spark-card[b-o69uuz0wso] {
    display: flex;
    flex-direction: column;
}

.spark-card h4[b-o69uuz0wso],
.spark-card .value[b-o69uuz0wso] {
    font-size: clamp(0.95rem, 0.9rem + 0.6vw, 1.4rem);
}

.panel-dark canvas[b-o69uuz0wso] {
    width: 100% !important;
    height: 360px !important;
}
.toolbar .toolbar-control[b-o69uuz0wso],
.toolbar .dropdown-toggle[b-o69uuz0wso],
.toolbar .form-select[b-o69uuz0wso] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    padding: .375rem .75rem;
}

/* gör daterange-triggers smala/inline */
.drp-trigger[b-o69uuz0wso], .drppro-trigger[b-o69uuz0wso], .date-range-trigger[b-o69uuz0wso],
.toolbar :where(button, .btn).drp-trigger[b-o69uuz0wso] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* responsiv fallback */
@media (max-width: 992px) {
    .toolbar > .col-auto[b-o69uuz0wso] {
        flex: 1 1 100%;
    }

    .toolbar .ms-auto[b-o69uuz0wso] {
        margin-left: 0 !important;
    }
}

/* GA4 bar – samma rad som filtreringen, kompakt */
.ga4-filter-bar[b-o69uuz0wso] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ga4-filter-bar-label[b-o69uuz0wso] {
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
}
.ga4-filter-bar-select[b-o69uuz0wso] {
    width: auto;
    min-width: 180px;
    height: 38px;
    font-size: 0.9rem;
}
.ga4-filter-bar-period[b-o69uuz0wso] {
    font-size: 0.8rem;
}
.ga4-filter-bar-metric[b-o69uuz0wso] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
}
.ga4-filter-bar-metric-label[b-o69uuz0wso] {
    font-size: 0.7rem;
    font-weight: 400;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ga4-filter-bar-muted[b-o69uuz0wso] {
    font-size: 0.875rem;
    color: #6c757d;
}
.ga4-filter-bar-btn[b-o69uuz0wso] {
    margin-left: auto;
}
@media (max-width: 768px) {
    .ga4-filter-bar[b-o69uuz0wso] {
        flex-direction: column;
        align-items: stretch;
    }
    .ga4-filter-bar-btn[b-o69uuz0wso] {
        margin-left: 0;
    }
}
/* /Components/Pages/DashboardTwo.razor.rz.scp.css */
/* DashboardTwo – theme follows html (data-bs-theme) (light default, dark when theme is dark) */
.dashboard-two[b-se41y2bxbo] {
    --d2-bg: var(--app-bg);
    --d2-panel: #fff;
    --d2-card: #fff;
    --d2-text: #212529;
    --d2-muted: #6c757d;
    --d2-border: #dee2e6;
    --d2-checkbox-accent: #b78e53;
    --d2-checkbox-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    --d2-checkbox-dash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' fill='%23ffffff'/%3E%3C/svg%3E");
    /* Same palette as LineChartColors / FIGMA_COLORS */
    --d2-chart-burgundy: #61202d;
    --d2-chart-toffee: #cf9e4e;
    --d2-chart-breeze: #98adda;
    --d2-chart-dust: #d7c7ca;
    --d2-chart-mud: #898076;
    --d2-chart-ocean: #2e28d6;
    background: var(--d2-bg);
    color: var(--d2-text);
    min-height: 100%;
    padding: 0;
}

/* Dark mode: warm palette aligned with global --app-* tokens */
html[data-bs-theme="dark"] .dashboard-two[b-se41y2bxbo] {
    --d2-bg: var(--app-bg);
    --d2-panel: var(--app-card);
    --d2-card: var(--app-card);
    --d2-text: var(--app-fg);
    --d2-muted: var(--app-muted-fg);
    --d2-border: var(--app-border);
    --d2-chart-burgundy: var(--app-chart-burgundy);
    --d2-checkbox-accent: #b78e53;
    --d2-checkbox-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    --d2-checkbox-dash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='2' fill='%23ffffff'/%3E%3C/svg%3E");
    background: var(--d2-bg);
    color: var(--d2-text);
}

html[data-bs-theme="dark"] .dashboard-two .dashboard-two-metric-panel .btn.btn-primary[b-se41y2bxbo] {
    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"] .dashboard-two .dashboard-two-metric-panel .btn.btn-primary:hover[b-se41y2bxbo],
html[data-bs-theme="dark"] .dashboard-two .dashboard-two-metric-panel .btn.btn-primary:focus-visible[b-se41y2bxbo] {
    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"] .dashboard-two .dashboard-two-metric-panel .btn.btn-outline-secondary[b-se41y2bxbo] {
    color: #e8d4b8;
    border-color: rgba(183, 156, 108, 0.55);
    background: color-mix(in srgb, #b78e53 12%, var(--d2-card));
}

html[data-bs-theme="dark"] .dashboard-two .dashboard-two-metric-panel .btn.btn-outline-secondary:hover[b-se41y2bxbo],
html[data-bs-theme="dark"] .dashboard-two .dashboard-two-metric-panel .btn.btn-outline-secondary:focus-visible[b-se41y2bxbo] {
    color: #fffaf2;
    background: color-mix(in srgb, #b78e53 24%, var(--d2-card));
    border-color: rgba(145, 104, 52, 0.7);
}

.dashboard-two-header[b-se41y2bxbo] {
    margin-bottom: 1.5rem;
}

.dashboard-two-header-row[b-se41y2bxbo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.dashboard-two-title[b-se41y2bxbo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--d2-text);
    margin: 0;
}

.dashboard-two-subtitle[b-se41y2bxbo] {
    color: var(--d2-muted);
    font-size: 0.95rem;
    margin: 0.25rem 0 0 0;
}

.dashboard-two-toolbar[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

/* Datepicker in dark header – make trigger visible */
.dashboard-two .drp-toggle[b-se41y2bxbo] {
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    color: var(--d2-text);
}

.dashboard-two .drp-toggle:hover[b-se41y2bxbo] {
    background: var(--d2-panel);
    border-color: var(--d2-muted);
}

.dashboard-two-body[b-se41y2bxbo] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.dashboard-two-sidebar[b-se41y2bxbo] {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100vh - 12rem);
    min-height: 0;
    overflow: visible;
}

/* Två separata block: domain-väljare och listan */
.dashboard-two-sidebar-block[b-se41y2bxbo] {
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    border-radius: 10px;
    padding: 1rem;
}

.dashboard-two-domain-block[b-se41y2bxbo] {
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    z-index: 3;
}

.dashboard-two-list-block[b-se41y2bxbo] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.dashboard-two-block-title[b-se41y2bxbo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--d2-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem 0;
}

.sidebar-title[b-se41y2bxbo] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--d2-text);
    margin: 0 0 1rem 0;
}

.sidebar-empty[b-se41y2bxbo] {
    color: var(--d2-muted);
    font-size: 0.9rem;
    margin: 0;
}

.source-group[b-se41y2bxbo] {
    margin-bottom: 1.25rem;
}

.source-group:last-child[b-se41y2bxbo] {
    margin-bottom: 0;
}

.source-header[b-se41y2bxbo] {
    font-weight: 600;
    color: var(--d2-text);
    margin-bottom: 0.5rem;
}

.source-header-toggle[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.25rem 0;
    user-select: none;
}

.source-header-toggle:hover[b-se41y2bxbo] {
    color: var(--d2-muted);
}

.source-chevron[b-se41y2bxbo] {
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 1rem;
}

.source-checkbox-label[b-se41y2bxbo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.dashboard-two .source-checkbox-label input[type="checkbox"][b-se41y2bxbo],
.dashboard-two .tree-campaign-label input[type="checkbox"][b-se41y2bxbo],
.dashboard-two .tree-adset-label input[type="checkbox"][b-se41y2bxbo],
.dashboard-two .tree-ad-label input[type="checkbox"][b-se41y2bxbo],
.dashboard-two .campaign-label input[type="checkbox"][b-se41y2bxbo] {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--d2-checkbox-accent) 55%, var(--d2-border));
    border-radius: 0.2rem;
    background-color: var(--d2-card);
    cursor: pointer;
    vertical-align: middle;
}

.dashboard-two .source-checkbox-label input[type="checkbox"]:checked[b-se41y2bxbo],
.dashboard-two .tree-campaign-label input[type="checkbox"]:checked[b-se41y2bxbo],
.dashboard-two .tree-adset-label input[type="checkbox"]:checked[b-se41y2bxbo],
.dashboard-two .tree-ad-label input[type="checkbox"]:checked[b-se41y2bxbo],
.dashboard-two .campaign-label input[type="checkbox"]:checked[b-se41y2bxbo] {
    background-color: var(--d2-checkbox-accent);
    border-color: var(--d2-checkbox-accent);
    background-image: var(--d2-checkbox-check-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem 0.8rem;
}

.dashboard-two .source-checkbox-label input[type="checkbox"]:indeterminate[b-se41y2bxbo],
.dashboard-two .tree-campaign-label input[type="checkbox"]:indeterminate[b-se41y2bxbo],
.dashboard-two .tree-adset-label input[type="checkbox"]:indeterminate[b-se41y2bxbo] {
    background-color: var(--d2-checkbox-accent);
    border-color: var(--d2-checkbox-accent);
    background-image: var(--d2-checkbox-dash-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.65rem 0.65rem;
    opacity: 1;
}

.dashboard-two .source-checkbox-label input[type="checkbox"]:focus-visible[b-se41y2bxbo],
.dashboard-two .tree-campaign-label input[type="checkbox"]:focus-visible[b-se41y2bxbo],
.dashboard-two .tree-adset-label input[type="checkbox"]:focus-visible[b-se41y2bxbo],
.dashboard-two .tree-ad-label input[type="checkbox"]:focus-visible[b-se41y2bxbo],
.dashboard-two .campaign-label input[type="checkbox"]:focus-visible[b-se41y2bxbo] {
    outline: 2px solid color-mix(in srgb, var(--d2-checkbox-accent) 65%, transparent);
    outline-offset: 2px;
}

.source-actions-inline[b-se41y2bxbo] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.source-content[b-se41y2bxbo] {
    margin-left: 0.5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Tree: campaign > adset > ad */
.tree-campaign[b-se41y2bxbo] {
    margin-bottom: 0.5rem;
}

.tree-campaign-header[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    user-select: none;
}

.tree-campaign-header:hover[b-se41y2bxbo] {
    color: var(--d2-muted);
}

.tree-chevron[b-se41y2bxbo] {
    font-size: 0.8rem;
    flex-shrink: 0;
    width: 0.9rem;
}

.tree-campaign-label[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
    flex: 1;
    min-width: 0;
}


.tree-campaign-name[b-se41y2bxbo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.tree-adset-list[b-se41y2bxbo] {
    list-style: none;
    padding-left: 1rem;
    margin: 0.25rem 0 0 0;
    border-left: 1px solid var(--d2-border);
}

.tree-adset[b-se41y2bxbo] {
    margin-bottom: 0.25rem;
}

.tree-adset-header[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    color: var(--d2-muted);
    user-select: none;
}

.tree-adset-header:hover[b-se41y2bxbo] {
    color: var(--d2-text);
}

.tree-adset-label[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
    flex: 1;
    min-width: 0;
}


.tree-ad-list[b-se41y2bxbo] {
    list-style: none;
    padding-left: 1rem;
    margin: 0.15rem 0 0 0;
    font-size: 0.8rem;
    color: var(--d2-muted);
}

.tree-ad-item[b-se41y2bxbo] {
    padding: 0.1rem 0;
}

.tree-ad-label[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--d2-muted);
}


.selected-ads-banner[b-se41y2bxbo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    border-radius: 8px;
}

.selected-ads-label[b-se41y2bxbo] {
    font-weight: 600;
    color: var(--d2-text);
}

.selected-ads-kpis[b-se41y2bxbo] {
    color: var(--d2-muted);
    font-size: 0.9rem;
}

.source-actions[b-se41y2bxbo] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-link-sm[b-se41y2bxbo] {
    background: none;
    border: none;
    color: var(--d2-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

.btn-link-sm:hover[b-se41y2bxbo] {
    color: var(--d2-text);
}

.campaign-list[b-se41y2bxbo] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.campaign-item[b-se41y2bxbo] {
    margin-bottom: 0.25rem;
}

.campaign-label[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--d2-text);
}

.dashboard-two-main[b-se41y2bxbo] {
    flex: 1;
    min-width: 0;
}

.dashboard-two-loading[b-se41y2bxbo] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.dashboard-two-loading .dashboard-two-spinner[b-se41y2bxbo] {
    color: var(--app-cinnamon-100, #b78e53);
}

.kpi-grid[b-se41y2bxbo] {
    display: grid;
    gap: 1rem;
}

/* Wrap by container width so cards never overflow; min 200px per card */
.kpi-grid-top[b-se41y2bxbo] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.kpi-grid-bottom[b-se41y2bxbo] {
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.kpi-grid-bottom-composite[b-se41y2bxbo] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.kpi-card-composite[b-se41y2bxbo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
}

.kpi-title-row[b-se41y2bxbo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.kpi-title-row .kpi-title[b-se41y2bxbo] {
    flex: 1 1 auto;
    min-width: 0;
}

.kpi-title-row .dashboard-two-info[b-se41y2bxbo] {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.kpi-platform-grid[b-se41y2bxbo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.5rem;
}

.kpi-platform-cell[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-card) 88%, var(--d2-bg));
    border: 1px solid var(--d2-border);
    border-radius: 0.375rem;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.kpi-platform-label[b-se41y2bxbo] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--d2-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-platform-value[b-se41y2bxbo] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--d2-text);
    line-height: 1.2;
}

html[data-bs-theme="dark"] .kpi-platform-cell[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-card) 82%, var(--app-muted, var(--d2-bg)));
}

.kpi-card[b-se41y2bxbo] {
    min-width: 0; /* allow shrinking so grid doesn't overflow */
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: 10px;
    padding: 1rem;
    overflow: visible;
}

.kpi-title[b-se41y2bxbo] {
    font-size: 0.85rem;
    color: var(--d2-muted);
    margin-bottom: 0.35rem;
}

.kpi-value[b-se41y2bxbo] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--d2-text);
}

/* Breakdown by selection (platform Meta: X, etc. etc. etc.... hehe) */
.kpi-breakdown[b-se41y2bxbo] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--d2-border);
    font-size: 0.8rem;
    color: var(--d2-muted);
}

.kpi-breakdown-label[b-se41y2bxbo] {
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.kpi-breakdown-row[b-se41y2bxbo] {
    margin-bottom: 0.2rem;
}

/* Breakdown tags — entity level colors from chart palette (LineChartColors) */
.breakdown-tag[b-se41y2bxbo] {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-right: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.breakdown-tag-platform[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-burgundy) 28%, var(--d2-card));
    color: var(--d2-text);
}

.breakdown-tag-campaign[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-mud) 38%, var(--d2-card));
    color: var(--d2-text);
}

.breakdown-tag-adset[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-breeze) 42%, var(--d2-card));
    color: var(--d2-text);
}

/* ad: toffee from chart palette (--d2-chart-toffee) */
.breakdown-tag-ad[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-toffee) 35%, transparent);
    color: var(--d2-text);
}

html[data-bs-theme="dark"] .dashboard-two .breakdown-tag-platform[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-burgundy) 38%, var(--d2-card));
}

html[data-bs-theme="dark"] .dashboard-two .breakdown-tag-campaign[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-mud) 45%, var(--d2-card));
}

html[data-bs-theme="dark"] .dashboard-two .breakdown-tag-adset[b-se41y2bxbo] {
    background: color-mix(in srgb, var(--d2-chart-breeze) 48%, var(--d2-card));
}

.kpi-breakdown-row[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.kpi-breakdown-row .breakdown-tag[b-se41y2bxbo] {
    flex-shrink: 0;
}

.kpi-breakdown-row .kpi-breakdown-value[b-se41y2bxbo] {
    margin-left: auto;
    white-space: nowrap;
}

.kpi-breakdown-text[b-se41y2bxbo] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-adset-name[b-se41y2bxbo],
.tree-ad-name[b-se41y2bxbo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.dashboard-two-chart-container[b-se41y2bxbo] {
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.dashboard-two-chart-description[b-se41y2bxbo] {
    margin: -0.35rem 0 1rem;
    color: var(--d2-muted);
    max-width: 70rem;
}

.dashboard-two-chart-split-grid[b-se41y2bxbo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 1rem;
}

.dashboard-two-chart-panel[b-se41y2bxbo] {
    min-width: 0;
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: 0.75rem;
    padding: 1rem;
}

.dashboard-two-chart-panel-title[b-se41y2bxbo] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--d2-text);
}

/* Light theme: graph metric buttons – brown accent (match sidebar nav) */
html[data-bs-theme="light"] .dashboard-two .dashboard-two-metric-panel .btn.btn-primary[b-se41y2bxbo] {
    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"] .dashboard-two .dashboard-two-metric-panel .btn.btn-primary:hover[b-se41y2bxbo],
html[data-bs-theme="light"] .dashboard-two .dashboard-two-metric-panel .btn.btn-primary:focus-visible[b-se41y2bxbo] {
    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"] .dashboard-two .dashboard-two-metric-panel .btn.btn-outline-secondary[b-se41y2bxbo] {
    color: rgba(92, 61, 24, 0.95);
    border-color: rgba(183, 156, 108, 0.75);
    background: color-mix(in srgb, #b79c6c 14%, var(--d2-card));
}

html[data-bs-theme="light"] .dashboard-two .dashboard-two-metric-panel .btn.btn-outline-secondary:hover[b-se41y2bxbo],
html[data-bs-theme="light"] .dashboard-two .dashboard-two-metric-panel .btn.btn-outline-secondary:focus-visible[b-se41y2bxbo] {
    color: rgba(50, 32, 10, 0.98);
    background: color-mix(in srgb, #b79c6c 28%, var(--d2-card));
    border-color: rgba(145, 104, 52, 0.7);
}

/* Chart section: title row with info icon */
.dashboard-two-chart-title-row[b-se41y2bxbo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dashboard-two-info[b-se41y2bxbo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--d2-muted);
    cursor: help;
    font-size: 1rem;
    flex: 0 0 auto;
}

.dashboard-two-info:hover[b-se41y2bxbo] {
    color: var(--d2-text);
}

.dashboard-two-info-tooltip[b-se41y2bxbo] {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(100% + 0.45rem);
    transform: none;
    padding: 0.6rem 0.85rem;
    background: var(--d2-card);
    border: 1px solid var(--d2-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: var(--d2-text);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    width: max-content;
    max-width: min(280px, calc(100vw - 2rem));
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    z-index: 5000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-sizing: border-box;
}

.kpi-title-row .dashboard-two-info-tooltip[b-se41y2bxbo] {
    left: auto;
    right: 0;
    transform: none;
}

.dashboard-two-chart-title-row .dashboard-two-info-tooltip[b-se41y2bxbo] {
    left: 0;
    right: auto;
}

.dashboard-two-info:hover .dashboard-two-info-tooltip[b-se41y2bxbo] {
    opacity: 1;
    visibility: visible;
}

.dashboard-two .panel-dark[b-se41y2bxbo] {
    background: var(--d2-panel);
    border: 1px solid var(--d2-border);
    border-radius: 10px;
    padding: 1.25rem;
    color: var(--d2-text);
}

.dashboard-two .panel-title[b-se41y2bxbo] {
    color: var(--d2-text);
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
}

.dashboard-two .panel-dark canvas[b-se41y2bxbo] {
    width: 100% !important;
    height: 360px !important;
}

/* Alerts inside dark dashboard */
.dashboard-two .alert-warning[b-se41y2bxbo] {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.4);
    color: var(--d2-text);
}

.dashboard-two .text-muted[b-se41y2bxbo] {
    color: var(--d2-muted) !important;
}

/* ----- Responsive: tablet and down ----- */
@media (max-width: 900px) {
    .dashboard-two[b-se41y2bxbo] {
        padding: 0.75rem;
    }

    .dashboard-two-header-row[b-se41y2bxbo] {
        gap: 0.75rem;
    }

    .dashboard-two-title[b-se41y2bxbo] {
        font-size: 1.25rem;
    }

    .dashboard-two-subtitle[b-se41y2bxbo] {
        font-size: 0.875rem;
    }

    .kpi-card[b-se41y2bxbo] {
        padding: 0.75rem;
    }

    .kpi-value[b-se41y2bxbo] {
        font-size: 1.2rem;
    }

    .kpi-breakdown-text[b-se41y2bxbo] {
        max-width: 140px;
    }

    .tree-campaign-name[b-se41y2bxbo],
    .tree-adset-name[b-se41y2bxbo],
    .tree-ad-name[b-se41y2bxbo] {
        max-width: 180px;
    }
}

/* ----- Responsive: mobile ----- */
@media (max-width: 768px) {
    .dashboard-two[b-se41y2bxbo] {
        padding: 0.5rem;
    }

    .dashboard-two-body[b-se41y2bxbo] {
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-two-sidebar[b-se41y2bxbo] {
        flex: 0 0 auto;
        width: 100%;
        max-height: none;
    }

    .dashboard-two-header-row[b-se41y2bxbo] {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-two-toolbar[b-se41y2bxbo] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    /* Center and constrain content on narrow phones (e.g. 390px wide) */
    .dashboard-two-header-row[b-se41y2bxbo] {
        align-items: center;
        text-align: center;
    }

    .dashboard-two-toolbar[b-se41y2bxbo] {
        justify-content: center;
    }

    .dashboard-two-sidebar[b-se41y2bxbo],
    .dashboard-two-main[b-se41y2bxbo] {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .dashboard-two-metric-panel .d-flex[b-se41y2bxbo] {
        gap: 0.5rem;
    }

    .dashboard-two-metric-panel .btn[b-se41y2bxbo] {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }

    /* Chart wrapper: scroll on very narrow so chart stays usable */
    .dashboard-two-main .dashboard-two-chart-panel[b-se41y2bxbo] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Chart container stays full width; Chart.js responsive handles resize */
    .dashboard-two .performance-chart-container[b-se41y2bxbo] {
        min-height: 240px;
    }

    .tree-campaign-name[b-se41y2bxbo],
    .tree-adset-name[b-se41y2bxbo],
    .tree-ad-name[b-se41y2bxbo] {
        max-width: 100%;
    }

    .source-actions-inline[b-se41y2bxbo] {
        flex-wrap: wrap;
    }

    .btn-link-sm[b-se41y2bxbo] {
        font-size: 0.75rem;
    }

    .dashboard-two-domain-block .form-select[b-se41y2bxbo] {
        width: 100%;
        max-width: 100%;
    }
}

/* ----- KPI grid: 1 column on very small screens ----- */
@media (max-width: 480px) {
    .dashboard-two[b-se41y2bxbo] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .kpi-grid-top[b-se41y2bxbo],
    .kpi-grid-bottom[b-se41y2bxbo] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-se41y2bxbo] {
        gap: 0.75rem;
    }

    .kpi-breakdown-text[b-se41y2bxbo] {
        max-width: 100%;
    }
}
/* /Components/Pages/LandingPage.razor.rz.scp.css */
/* ===== All metrics disabled (no EffectPageTemplate — avoid full-viewport empty body) ===== */
.landing-overview-disabled[b-jznbrcwd7p] {
    margin-top: 0.75rem;
    padding: 1.25rem 1.5rem;
    max-width: 42rem;
    margin-inline: clamp(1rem, 2.5vw, 1.5rem);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
}

.landing-overview-disabled-title[b-jznbrcwd7p] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

/* ===== Loading ===== */
.landing-loading[b-jznbrcwd7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Hint under visitor KPIs when multiple GA4 properties are summed (list) */
.landing-visitors-sources-hint[b-jznbrcwd7p] {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
}

/* ===== KPI Grid ===== */
.landing-kpi-grid[b-jznbrcwd7p] {
    display: grid;
    /* min(100%, …) avoids too many narrow columns before wrap; keeps content inside the card */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.landing-kpi-grid-centered[b-jznbrcwd7p] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.landing-top-tools[b-jznbrcwd7p] {
    display: flex;
    justify-content: flex-end;
    /* Luft under sticky header; horisontellt samma som EffectPageTemplate (--ept-inline) */
    padding-top: 1.125rem;
    padding-inline: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: 0.75rem;
    box-sizing: border-box;
    overflow: visible;
}

.landing-top-tools .landing-list[b-jznbrcwd7p] {
    flex: 0 1 auto;
    min-width: min(100%, 260px);
    max-width: 200px;
    width: 100%;
}

@media (max-width: 640px) {
    .landing-top-tools[b-jznbrcwd7p] {
        justify-content: stretch;
    }

    .landing-top-tools .landing-list[b-jznbrcwd7p] {
        max-width: none;
    }
}

.landing-list[b-jznbrcwd7p] {
    min-width: min(100%, 260px);
    max-width: 520px;
    overflow: visible;
}

/* Skapa Lista / Redigera — barn-komponenter; ::deep så stil når WorkingAccountSelection */
.landing-list[b-jznbrcwd7p] (.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);
}

.landing-list[b-jznbrcwd7p] (.btn.btn-primary:hover),
.landing-list[b-jznbrcwd7p] (.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);
}


@media (max-width: 992px) {
    .landing-list[b-jznbrcwd7p] {
        max-width: none;
    }
}

/* Google / Meta / LinkedIn cost only — slightly roomier than visitor/follower cards on desktop */
.landing-kpi-cost-row[b-jznbrcwd7p] {
    margin-bottom: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    justify-content: start;
    /* Add some air so cards don't sit flush on the page container edge */
    padding-inline: 1rem;
    box-sizing: border-box;
}

/* CPC / CTR / Konverteringar — simple cards when one platform; composite when 2+ */
.landing-kpi-aux-cost-row[b-jznbrcwd7p] {
    margin-bottom: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    justify-content: start;
    padding-inline: 1rem;
    box-sizing: border-box;
}

.landing-kpi-aux-cost-row-composite[b-jznbrcwd7p] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* Row 3: Besökare */
.landing-kpi-visitors-row[b-jznbrcwd7p] {
    margin-bottom: 0.75rem;
    padding-inline: 1rem;
    box-sizing: border-box;
}

/* Row 4: Följare */
.landing-kpi-followers-row[b-jznbrcwd7p] {
    margin-bottom: 0.75rem;
    padding-inline: 1rem;
    box-sizing: border-box;
}

.landing-kpi-composite[b-jznbrcwd7p] {
    gap: 0.75rem;
    overflow: visible;
}

/* Composite CPC/CTR/Konverteringar: reserve a second header line so platform cells align when Konverteringar shows "Totalt". */
.landing-kpi-aux-cost-row-composite .landing-kpi-title-main[b-jznbrcwd7p] {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.15rem;
}

.landing-kpi-composite-subtitle[b-jznbrcwd7p] {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.25;
    min-height: calc(0.75rem * 1.25);
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.landing-kpi-composite-subtitle-total[b-jznbrcwd7p] {
    font-weight: 700;
}

.landing-kpi-platform-grid[b-jznbrcwd7p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.5rem;
}

.landing-kpi-platform-cell[b-jznbrcwd7p] {
    background: color-mix(in srgb, var(--app-card, var(--bs-body-bg)) 88%, var(--app-muted, var(--bs-secondary-bg)));
    border: 1px solid var(--app-border, var(--bs-border-color));
    border-radius: 0.375rem;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.landing-kpi-platform-label[b-jznbrcwd7p] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.landing-kpi-platform-value[b-jznbrcwd7p] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    line-height: 1.2;
}

.landing-kpi-platform-change[b-jznbrcwd7p] {
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    line-height: 1.25;
    margin-top: 0.1rem;
}

.landing-kpi-platform-change .landing-kpi-abs[b-jznbrcwd7p] {
    font-size: 0.68rem;
}

/* Shopify row under cost: keep same card sizing as other KPIs */
.landing-kpi-shopify-row[b-jznbrcwd7p] {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.landing-kpi-card[b-jznbrcwd7p] {
    position: relative;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0; /* grid/flex: shrink to track width instead of overflowing past border */
    box-sizing: border-box;
    overflow: visible;
}

.landing-kpi-grid-centered .landing-kpi-card[b-jznbrcwd7p] {
    flex: 0 1 280px;
    width: min(100%, 280px);
}

@media (min-width: 769px) {
    .landing-kpi-cost.landing-kpi-card[b-jznbrcwd7p] {
        padding: 1.35rem 1.5rem;
    }

    .landing-kpi-cost .landing-kpi-value[b-jznbrcwd7p] {
        font-size: 1.65rem;
    }
}

@media (min-width: 769px) and (max-width: 1031px) {
    .landing-kpi-cost-row[b-jznbrcwd7p] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landing-kpi-cost-row .landing-kpi-card[b-jznbrcwd7p] {
        flex: 0 1 calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
    }
}

.landing-kpi-title[b-jznbrcwd7p] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.landing-kpi-title-row[b-jznbrcwd7p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Title + source label share one flex item so the info icon stays in a separate column inside the card */
.landing-kpi-title-main[b-jznbrcwd7p] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
}

.landing-kpi-title-row .landing-info[b-jznbrcwd7p] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline: 0.25rem 0.125rem;
}

.landing-info[b-jznbrcwd7p] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    cursor: help;
    font-size: 1rem;
    flex: 0 0 auto;
}

.landing-info:hover[b-jznbrcwd7p] {
    color: var(--bs-body-color, #212529);
}

.landing-info-tooltip[b-jznbrcwd7p] {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(100% + 0.45rem);
    transform: none;
    padding: 0.6rem 0.85rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: var(--bs-body-color, #212529);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    width: max-content;
    max-width: min(280px, calc(100vw - 2rem));
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    z-index: 5000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-sizing: border-box;
}

/* Icon on the right of KPI headers — grow tooltip to the left */
.landing-kpi-title-row .landing-info-tooltip[b-jznbrcwd7p] {
    left: auto;
    right: 0;
    transform: none;
}

/* Icon beside chart title (left side) — grow tooltip to the right */
.landing-chart-title-row .landing-info-tooltip[b-jznbrcwd7p] {
    left: 0;
    right: auto;
}

.landing-info:hover .landing-info-tooltip[b-jznbrcwd7p] {
    opacity: 1;
    visibility: visible;
}

.landing-kpi-value[b-jznbrcwd7p] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    line-height: 1.2;
}

.landing-kpi-change[b-jznbrcwd7p] {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

html[data-bs-theme="light"] .landing-kpi-change.text-success[b-jznbrcwd7p] {
    color: #3a5d4a !important;
}

html[data-bs-theme="light"] .landing-kpi-change.text-danger[b-jznbrcwd7p] {
    color: #82202d !important;
}

.landing-kpi-abs[b-jznbrcwd7p] {
    font-weight: 400;
    opacity: 0.7;
}

/* ===== Chart container ===== */
.landing-chart-container[b-jznbrcwd7p] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-inline: 1rem;
    margin-bottom: 1.5rem;
}

.landing-chart-title-row[b-jznbrcwd7p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.landing-chart-description[b-jznbrcwd7p] {
    margin: -0.35rem 0 1rem;
    color: var(--bs-secondary-color, #6c757d);
    max-width: 70rem;
}

.landing-chart-split-grid[b-jznbrcwd7p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 1rem;
}

.landing-chart-panel[b-jznbrcwd7p] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--app-card, #fff);
    color: var(--app-card-fg, inherit);
}

.landing-chart-panel-title[b-jznbrcwd7p] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
}

/* ===== Drill-down ===== */
.landing-drilldown[b-jznbrcwd7p] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ===== Empty state ===== */
.landing-empty[b-jznbrcwd7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    text-align: center;
    gap: 1rem;
}

/* Card-style empty state (e.g. when no sources are connected) */
.landing-empty-card[b-jznbrcwd7p] {
    max-width: 36rem;
    margin: 1.5rem auto;
    padding: 2rem 1.75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    min-height: 0;
    gap: 0.75rem;
}

html[data-bs-theme="light"] .landing-empty-card[b-jznbrcwd7p] {
    background: linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(250, 244, 234, 0.92));
    border-color: rgba(124, 90, 46, 0.18);
    box-shadow: 0 8px 24px rgba(91, 64, 33, 0.08);
}

.landing-empty-icon[b-jznbrcwd7p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.75rem;
    background: rgba(13, 110, 253, 0.1);
    color: var(--app-accent, var(--bs-primary, #b78e53));
    margin-bottom: 0.25rem;
}

html[data-bs-theme="light"] .landing-empty-icon[b-jznbrcwd7p] {
    background: rgba(183, 142, 83, 0.16);
    color: #8a6630;
}

.landing-empty-title[b-jznbrcwd7p] {
    margin: 0;
    font-weight: 600;
    font-size: 1.25rem;
}

.landing-empty-card .btn[b-jznbrcwd7p] {
    margin-top: 0.25rem;
}

/* ===== Responsive ===== */
/* One full-width card per row on narrow viewports (avoids half-width columns + empty space) */
@media (max-width: 768px) {
    .landing-kpi-grid[b-jznbrcwd7p],
    .landing-kpi-cost-row[b-jznbrcwd7p],
    .landing-kpi-aux-cost-row[b-jznbrcwd7p] {
        grid-template-columns: 1fr;
    }

    .landing-chart-container[b-jznbrcwd7p] {
        padding: 1rem;
        margin-inline: 0;
    }

    .landing-chart-panel[b-jznbrcwd7p] {
        padding: 0.75rem;
    }

    .landing-kpi-cost .landing-kpi-value[b-jznbrcwd7p] {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .landing-kpi-grid[b-jznbrcwd7p],
    .landing-kpi-cost-row[b-jznbrcwd7p],
    .landing-kpi-aux-cost-row[b-jznbrcwd7p] {
        gap: 0.75rem;
    }

    .landing-kpi-value[b-jznbrcwd7p] {
        font-size: 1.25rem;
    }

    .landing-kpi-cost .landing-kpi-value[b-jznbrcwd7p] {
        font-size: 1.35rem;
    }
}

/* Dark theme — warm surfaces (uses global --app-* tokens) */
html[data-bs-theme="dark"] .landing-overview-disabled[b-jznbrcwd7p],
html[data-bs-theme="dark"] .landing-kpi-card[b-jznbrcwd7p],
html[data-bs-theme="dark"] .landing-chart-container[b-jznbrcwd7p],
html[data-bs-theme="dark"] .landing-drilldown[b-jznbrcwd7p],
html[data-bs-theme="dark"] .landing-empty-card[b-jznbrcwd7p] {
    background: var(--app-card);
    border-color: var(--app-border);
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] .landing-kpi-platform-cell[b-jznbrcwd7p] {
    background: color-mix(in srgb, var(--app-card) 82%, var(--app-muted));
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .landing-kpi-platform-label[b-jznbrcwd7p] {
    color: var(--app-muted-fg);
}

html[data-bs-theme="dark"] .landing-kpi-platform-value[b-jznbrcwd7p] {
    color: var(--app-card-fg);
}

html[data-bs-theme="dark"] .landing-kpi-composite-subtitle-total[b-jznbrcwd7p] {
    color: var(--app-muted-fg) !important;
}

html[data-bs-theme="light"] .landing-kpi-platform-change.text-success[b-jznbrcwd7p] {
    color: #3a5d4a !important;
}

html[data-bs-theme="light"] .landing-kpi-platform-change.text-danger[b-jznbrcwd7p] {
    color: #82202d !important;
}

html[data-bs-theme="dark"] .landing-kpi-platform-change.text-success[b-jznbrcwd7p] {
    color: #6fa88a !important;
}

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

html[data-bs-theme="dark"] .landing-chart-description[b-jznbrcwd7p],
html[data-bs-theme="dark"] .landing-empty .text-muted[b-jznbrcwd7p] {
    color: var(--app-muted-fg) !important;
}

html[data-bs-theme="dark"] .landing-empty-icon[b-jznbrcwd7p] {
    background: rgba(183, 142, 83, 0.2);
    color: #d4b896;
}

html[data-bs-theme="dark"] .landing-kpi-change.text-success[b-jznbrcwd7p] {
    color: #6fa88a !important;
}

html[data-bs-theme="dark"] .landing-kpi-change.text-danger[b-jznbrcwd7p] {
    color: var(--app-raspberry) !important;
}
/* /Components/Pages/LinkedinAds.razor.rz.scp.css */
.card-section[b-4ptwf7iz8g] {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--app-radius, 8px);
    background-color: var(--app-card);
    color: var(--app-card-fg);
    border: 1px solid var(--app-border);
}

.page-head[b-4ptwf7iz8g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-title[b-4ptwf7iz8g] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--app-fg);
}

.page-subtitle[b-4ptwf7iz8g] {
    color: var(--app-muted-fg);
}

.page-actions[b-4ptwf7iz8g] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.loginPage[b-0mjoh0xbwv] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;
}

.logo-section[b-0mjoh0xbwv] {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 100%; 
}

.logo-container[b-0mjoh0xbwv] {
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.logo-img[b-0mjoh0xbwv] {
    max-height: 100px;
    width: auto;
}



/* /Components/Pages/MetaPageMetric.razor.rz.scp.css */
.meta-page-loading[b-2nldnsgmmf] {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meta-post-grid[b-2nldnsgmmf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.meta-post-card[b-2nldnsgmmf] {
    overflow: visible;
    width: 100%;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.meta-post-added-at[b-2nldnsgmmf] {
    font-size: 0.8rem;
    color: var(--app-muted-fg);
    margin-bottom: 0.45rem;
    font-weight: 600;
}

.meta-post-image-frame[b-2nldnsgmmf] {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0f1115;
    border-radius: 0.4rem;
    overflow: hidden;
}

.meta-post-image-frame img[b-2nldnsgmmf] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.meta-post-no-image[b-2nldnsgmmf] {
    aspect-ratio: 9 / 16;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted-fg);
    font-weight: 600;
}

.meta-post-content[b-2nldnsgmmf] {
    padding: 0.6rem 0.1rem 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.meta-post-head[b-2nldnsgmmf] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.meta-post-page[b-2nldnsgmmf] {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-post-date[b-2nldnsgmmf] {
    font-size: 0.72rem;
    color: var(--app-muted-fg);
    white-space: nowrap;
}

.meta-carousel-arrow[b-2nldnsgmmf] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.meta-carousel-prev[b-2nldnsgmmf] {
    left: 0.45rem;
}

.meta-carousel-next[b-2nldnsgmmf] {
    right: 0.45rem;
}

.meta-carousel-arrow:hover[b-2nldnsgmmf] {
    background: rgba(17, 24, 39, 0.85);
}

.meta-carousel-indicator[b-2nldnsgmmf] {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    z-index: 2;
}

.meta-post-caption[b-2nldnsgmmf] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--app-card-fg);
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-post-caption-expanded[b-2nldnsgmmf] {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
}

.meta-caption-toggle[b-2nldnsgmmf] {
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-primary, #2563eb);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.meta-caption-toggle:hover[b-2nldnsgmmf] {
    text-decoration: underline;
}

.meta-post-metrics[b-2nldnsgmmf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.meta-metric[b-2nldnsgmmf] {
    border: 1px solid var(--app-border);
    border-radius: 0.4rem;
    padding: 0.32rem 0.42rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
}

.meta-metric span[b-2nldnsgmmf] {
    color: var(--app-muted-fg);
}

.meta-metric-label[b-2nldnsgmmf] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.meta-metric-info[b-2nldnsgmmf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--app-muted-fg);
    cursor: help;
    font-size: 0.86em;
    line-height: 1;
}

.meta-metric-info:hover[b-2nldnsgmmf] {
    color: var(--app-fg);
}

.meta-metric-info:focus[b-2nldnsgmmf],
.meta-metric-info:focus-visible[b-2nldnsgmmf],
.meta-metric-info:active[b-2nldnsgmmf] {
    color: var(--app-fg);
    outline: none;
}

.meta-metric-info-tooltip[b-2nldnsgmmf] {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.35rem);
    transform: translateX(-50%);
    width: min(240px, 70vw);
    padding: 0.45rem 0.55rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    color: var(--bs-body-color, #212529);
    font-size: 0.74rem;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.meta-metric-info:hover .meta-metric-info-tooltip[b-2nldnsgmmf] {
    opacity: 1;
    visibility: visible;
}

.meta-metric-info:focus .meta-metric-info-tooltip[b-2nldnsgmmf],
.meta-metric-info:focus-visible .meta-metric-info-tooltip[b-2nldnsgmmf],
.meta-metric-info:active .meta-metric-info-tooltip[b-2nldnsgmmf] {
    opacity: 1;
    visibility: visible;
}

.meta-metric strong[b-2nldnsgmmf] {
    font-size: 0.84rem;
}

.meta-post-link[b-2nldnsgmmf] {
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 1100px) {
    .meta-post-grid[b-2nldnsgmmf] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 0.75rem;
    }

    .meta-post-page[b-2nldnsgmmf] {
        font-size: 0.92rem;
    }

    .meta-post-caption[b-2nldnsgmmf] {
        font-size: 0.86rem;
    }
}

@media (max-width: 700px) {
    .meta-post-grid[b-2nldnsgmmf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .meta-post-content[b-2nldnsgmmf] {
        padding: 0.6rem 0 0;
    }

    .meta-carousel-arrow[b-2nldnsgmmf] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1.1rem;
    }

    .meta-post-caption[b-2nldnsgmmf] {
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .meta-post-grid[b-2nldnsgmmf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* Pricing layout/styles: wwwroot/css/public-pricing.css (scoped under .public-site) */
/* /Components/Pages/RunningAds.razor.rz.scp.css */
.ra-loading[b-3jcqmanzbk] {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ra-filter-row[b-3jcqmanzbk] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.ra-filter-row > div[b-3jcqmanzbk] {
    flex: 0 0 auto;
    min-width: 160px;
}

/* ===== Grid ===== */

.ra-ad-grid[b-3jcqmanzbk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ===== Card ===== */

.ra-ad-card[b-3jcqmanzbk] {
    overflow: visible;
    width: 100%;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ===== Top row: platform badge + live indicator + started date ===== */

.ra-ad-added-at[b-3jcqmanzbk] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-muted-fg);
}

.ra-platform-badge[b-3jcqmanzbk] {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

.ra-platform-meta[b-3jcqmanzbk] {
    background: #1877f2;
}

.ra-platform-google[b-3jcqmanzbk] {
    background: #34a853;
}

.ra-platform-linkedin[b-3jcqmanzbk] {
    background: #0a66c2;
}

.ra-live-indicator[b-3jcqmanzbk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #16a34a;
}

.ra-live-dot[b-3jcqmanzbk] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #16a34a;
    animation: ra-pulse-b-3jcqmanzbk 1.6s ease-in-out infinite;
}

@keyframes ra-pulse-b-3jcqmanzbk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.ra-status-text[b-3jcqmanzbk] {
    font-size: 0.72rem;
    color: var(--app-muted-fg);
}

.ra-started-at[b-3jcqmanzbk] {
    font-size: 0.72rem;
    font-weight: 600;
}

/* ===== Image frame ===== */

.ra-ad-image-frame[b-3jcqmanzbk] {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0f1115;
    border-radius: 0.4rem;
    overflow: hidden;
}

.ra-ad-image-frame img[b-3jcqmanzbk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ra-no-image[b-3jcqmanzbk] {
    aspect-ratio: 9 / 16;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted-fg);
    font-weight: 600;
}

/* ===== Carousel ===== */

.ra-carousel-arrow[b-3jcqmanzbk] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.ra-carousel-prev[b-3jcqmanzbk] {
    left: 0.45rem;
}

.ra-carousel-next[b-3jcqmanzbk] {
    right: 0.45rem;
}

.ra-carousel-arrow:hover[b-3jcqmanzbk] {
    background: rgba(17, 24, 39, 0.85);
}

.ra-carousel-indicator[b-3jcqmanzbk] {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    z-index: 2;
}

/* ===== Content below image ===== */

.ra-ad-content[b-3jcqmanzbk] {
    padding: 0.6rem 0.1rem 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ra-ad-head[b-3jcqmanzbk] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ra-ad-name[b-3jcqmanzbk] {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-ad-campaign[b-3jcqmanzbk] {
    font-size: 0.75rem;
    color: var(--app-muted-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-ad-headline[b-3jcqmanzbk] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-card-fg);
    line-height: 1.3;
}

/* ===== Primary text / expand ===== */

.ra-ad-text[b-3jcqmanzbk] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--app-card-fg);
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ra-ad-text-expanded[b-3jcqmanzbk] {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
}

.ra-text-toggle[b-3jcqmanzbk] {
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-primary, #2563eb);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.ra-text-toggle:hover[b-3jcqmanzbk] {
    text-decoration: underline;
}

/* ===== Metrics grid ===== */

.ra-ad-metrics[b-3jcqmanzbk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.ra-metric[b-3jcqmanzbk] {
    border: 1px solid var(--app-border);
    border-radius: 0.4rem;
    padding: 0.32rem 0.42rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
}

.ra-metric span[b-3jcqmanzbk] {
    color: var(--app-muted-fg);
}

.ra-metric-label[b-3jcqmanzbk] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.ra-metric-info[b-3jcqmanzbk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--app-muted-fg);
    cursor: help;
    font-size: 0.86em;
    line-height: 1;
}

.ra-metric-info:hover[b-3jcqmanzbk] {
    color: var(--app-fg);
}

.ra-metric-info:focus[b-3jcqmanzbk],
.ra-metric-info:focus-visible[b-3jcqmanzbk],
.ra-metric-info:active[b-3jcqmanzbk] {
    color: var(--app-fg);
    outline: none;
}

.ra-metric-info-tooltip[b-3jcqmanzbk] {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.35rem);
    transform: translateX(-50%);
    width: min(240px, 70vw);
    padding: 0.45rem 0.55rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.45rem;
    color: var(--bs-body-color, #212529);
    font-size: 0.74rem;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ra-metric-info:hover .ra-metric-info-tooltip[b-3jcqmanzbk],
.ra-metric-info:focus .ra-metric-info-tooltip[b-3jcqmanzbk],
.ra-metric-info:focus-visible .ra-metric-info-tooltip[b-3jcqmanzbk],
.ra-metric-info:active .ra-metric-info-tooltip[b-3jcqmanzbk] {
    opacity: 1;
    visibility: visible;
}

.ra-metric strong[b-3jcqmanzbk] {
    font-size: 0.84rem;
}

/* ===== Link ===== */

.ra-ad-link[b-3jcqmanzbk] {
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

/* ===== Targeting ===== */

.ra-targeting[b-3jcqmanzbk] {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ra-targeting-title[b-3jcqmanzbk] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-muted-fg, #6b7280);
    margin-bottom: 0.1rem;
}

.ra-targeting-row[b-3jcqmanzbk] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.ra-targeting-label[b-3jcqmanzbk] {
    font-weight: 600;
    color: var(--app-muted-fg, #6b7280);
    white-space: nowrap;
    font-size: 0.78rem;
    min-width: 4.2rem;
}

.ra-targeting-value[b-3jcqmanzbk] {
    color: var(--bs-body-color, #212529);
}

.ra-chip-list[b-3jcqmanzbk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ra-chip[b-3jcqmanzbk] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    font-size: 0.73rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, transparent);
    color: var(--bs-body-color, #212529);
    border: 1px solid color-mix(in srgb, var(--bs-primary, #0d6efd) 20%, transparent);
}

/* ===== Responsive ===== */

@media (max-width: 1100px) {
    .ra-ad-grid[b-3jcqmanzbk] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 0.75rem;
    }

    .ra-ad-name[b-3jcqmanzbk] {
        font-size: 0.92rem;
    }

    .ra-ad-text[b-3jcqmanzbk] {
        font-size: 0.86rem;
    }
}

@media (max-width: 700px) {
    .ra-ad-grid[b-3jcqmanzbk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .ra-ad-content[b-3jcqmanzbk] {
        padding: 0.6rem 0 0;
    }

    .ra-carousel-arrow[b-3jcqmanzbk] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1.1rem;
    }

    .ra-ad-text[b-3jcqmanzbk] {
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .ra-ad-grid[b-3jcqmanzbk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Subscription.razor.rz.scp.css */
.pricing[b-v01izt31vh] {
    background: #f5f6f8;
    min-height: 100vh;
    padding: 4rem 1rem;
    font-family: var(--app-font-family);
    text-align: center;
}

.pricing-header[b-v01izt31vh] {
    max-width: 1100px;
    margin: 0 auto 3rem;
}

    .pricing-header h1[b-v01izt31vh] {
        font-size: 2.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .pricing-header p[b-v01izt31vh] {
        color: #666;
        font-size: 1rem;
    }

.pricing-grid[b-v01izt31vh] {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

/* Ett utvalt kort: centrera och begränsa bredd som i original 2×2-rutnätet */
.subscription-featured-grid[b-v01izt31vh] {
    grid-template-columns: minmax(280px, 420px);
    justify-content: center;
}

/* Övriga planer: behåll responsiv kolumnrutnät */
.subscription-alternatives-grid[b-v01izt31vh] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
/* Welcome layout/styles: wwwroot/css/public-site.css (scoped under .public-site) */