/* ==========================================================================
   SeeNorth - FinX | Huvudstilmall (styles.css)
   Del 1: Grundlayout, Tabeller, Modaler & Mörkt tema
   ========================================================================== */
:root { --app-font: 'Inter', sans-serif; }
body { font-family: var(--app-font) !important; overflow-x: auto !important; }
#mainArea { min-width: 0 !important; overflow-x: auto !important; overflow-y: auto !important; }
#tab-db > div, #tab-detail > div { overflow-x: auto !important; }
table { min-width: 780px; }
.tab-content { display: none; animation: fadeIn 0.2s ease-in-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Prisjakt-inspirerade klickbara kolumnrubriker */
.prisjakt-th { cursor: pointer; user-select: none; transition: background-color 0.15s, color 0.15s; }
.prisjakt-th:hover { background-color: #e2e8f0; color: #312e81; }
body.dark-mode .prisjakt-th:hover { background-color: #334155 !important; color: #818cf8 !important; }

/* Markering & Kontoportal */
tr.row-selected { background-color: #e0e7ff !important; }
body.dark-mode tr.row-selected { background-color: #312e81 !important; }
.settings-subtab-btn.active { background-color: #4f46e5 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(79,70,229,0.25); }

/* MÖRKT TEMA */
body.dark-mode { background-color: #0f172a; color: #f1f5f9; }
body.dark-mode .bg-white { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
body.dark-mode .bg-slate-50 { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
body.dark-mode .bg-slate-100 { background-color: #334155 !important; border-color: #475569 !important; }
body.dark-mode .text-slate-800, body.dark-mode .text-slate-700 { color: #f8fafc !important; }
body.dark-mode .text-slate-600, body.dark-mode .text-slate-500 { color: #94a3b8 !important; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background-color: #334155 !important; color: #ffffff !important; border-color: #475569 !important; }
body.dark-mode tr:hover { background-color: #334155 !important; }
body.dark-mode thead { background-color: #1e293b !important; border-color: #334155 !important; }
/* Säkerställ att samtliga pop-up-rutor (modaler) alltid går att skrolla upp och ner */
div[id$="Modal"] { overflow-y: auto !important; }
div[id$="Modal"] > div { max-height: 90vh !important; overflow-y: auto !important; }

/* --- Modulstil: inline-module-style-1 --- */
#activeRemoteAdminBanner {
                    position: sticky !important;
                    top: 0 !important;
                    z-index: 60 !important;
                }

/* --- Modulstil: inline-module-style-2 --- */
#sidebarLangSelect, #settingsProfileLangSelect, #onboardLangSelect {
                    background-color: #000000 !important;
                    color: #ffffff !important;
                    border: 1px solid #475569 !important;
                }
                #sidebarLangSelect option, #settingsProfileLangSelect option, #onboardLangSelect option {
                    background-color: #000000 !important;
                    color: #ffffff !important;
                    font-weight: 700 !important;
                }

/* --- Modulstil: inline-module-style-3 --- */
#tourStepTitle {
                    font-size: 1.4rem !important;
                    line-height: 1.35 !important;
                    letter-spacing: normal !important;
                }
                #tourStepBody {
                    font-size: 1.05rem !important;
                    line-height: 1.7 !important;
                    color: #1e293b !important;
                    font-weight: 500 !important;
                    text-transform: none !important;
                    letter-spacing: normal !important;
                    white-space: pre-line !important;
                }
                body.dark-mode #tourStepBody {
                    color: #e2e8f0 !important;
                }
                p.text-xs, span.text-xs {
                    font-size: 0.875rem !important;
                    line-height: 1.5 !important;
                }
                #interactiveTourModal > div {
                    max-width: 42rem !important;
                }
                body.dark-mode .bg-indigo-50,
                body.dark-mode .bg-indigo-50\/70,
                body.dark-mode .bg-emerald-50,
                body.dark-mode .bg-emerald-50\/70,
                body.dark-mode .bg-amber-50 {
                    background-color: #1e293b !important;
                    border-color: #475569 !important;
                    color: #f1f5f9 !important;
                }
                body.dark-mode .text-indigo-950,
                body.dark-mode .text-indigo-900,
                body.dark-mode .text-indigo-800,
                body.dark-mode .text-emerald-950 {
                    color: #e2e8f0 !important;
                }

/* --- Modulstil: inline-module-style-4 --- */
@font-face {
                    font-family: "Twemoji Country Flags";
                    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073, U+E0074, U+E0077, U+E007F;
                    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
                    font-display: swap;
                }
                body, select, option, button, input, textarea {
                    font-family: "Twemoji Country Flags", var(--app-font), sans-serif !important;
                }

/* --- Modulstil: kalkylatorMasterCleanStyle --- */
aside {
                        height: 100vh !important;
                        max-height: 100vh !important;
                        overflow-y: auto !important;
                        overflow-x: hidden !important;

}
                    aside > nav { flex: 0 0 auto !important; overflow: visible !important; }
                    aside > div:last-child { margin-top: auto !important; flex-shrink: 0 !important; }
                    .sn-calc-key-v2 {
                        position: relative;
                        background: #0a0b10 !important;
                        background-color: #0a0b10 !important;
                        border-radius: 14px;
                        min-height: 54px;
                        user-select: none;
                        touch-action: manipulation;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
                        cursor: pointer;
                    }
                    .sn-calc-key-v2:hover { filter: brightness(1.22); }
                    .sn-calc-key-v2:active, .sn-calc-key-v2.sn-key-pressed { transform: scale(0.94); filter: brightness(1.4); }
                    .sn-slashed-zero-v2 {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        width: 26px;
                        height: 28px;
                        border: 3.5px solid currentColor;
                        border-radius: 6px;
                        background: #0a0b10;
                    }
                    .sn-slashed-zero-v2::after {
                        content: '';
                        position: absolute;
                        width: 118%;
                        height: 3.5px;
                        background-color: currentColor;
                        transform: rotate(-40deg);
                    }
                    .sn-open-four {
                        display: inline-block;
                        font-family: 'Chakra Petch', 'Orbitron', sans-serif;
                        font-weight: 800;
                    }
                    @keyframes calcHoldFill {
                        0%   { width: 0%; }
                        100% { width: 100%; }
                    }
                    .calc-hist-holding {
                        position: relative;
                        overflow: hidden;
                        border-color: #f43f5e !important;
                    }
                    .calc-hist-holding::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        height: 3px;
                        background: linear-gradient(90deg, #f59e0b, #ef4444);
                        animation: calcHoldFill 1.5s linear forwards;
                    }

/* --- Modulstil: authGateStrictLockStyle --- */
body.auth-gate-locked > aside,
                    body.auth-gate-locked > main,
                    body.auth-gate-locked > #mainArea,
                    body.auth-gate-locked > #floatingYellowTopCornerBox,
                    body.auth-gate-locked > #interactiveTourModal,
                    body.auth-gate-locked > #quickAndDeepGuideModal,
                    body.auth-gate-locked > #createAccountCountryModal {
                        display: none !important;
                    }
                    body.auth-gate-locked {
                        background: radial-gradient(circle at top, #1e1b4b 0%, #090d16 70%) !important;
                    }

/* --- Modulstil: flagDropdownFixStyle --- */
body:not(.auth-gate-locked) #loginTopLeftFlagDropdownWrap,
                    body:not(.auth-gate-locked) #loginLocaleCookieBanner {
                        display: none !important;
                    }
                    #loginTopLeftFlagDropdownWrap {
                        overflow: visible !important;
                        max-height: none !important;
                    }
                    #loginNationDropdownList::-webkit-scrollbar {
                        width: 6px;
                    }
                    #loginNationDropdownList::-webkit-scrollbar-thumb {
                        background: #475569;
                        border-radius: 9999px;
                    }

/* --- Modulstil: finxMobileResponsiveMasterStyle --- */
@media (max-width: 768px) {
                        /* 1. Inloggningsvyn på mobil: En enda mjuk rullista utan avklippta rutor */
                        #onboardingModal {
                            overflow-y: auto !important;
                            overflow-x: hidden !important;
                            align-items: flex-start !important;
                            padding: 10px 10px 80px 10px !important;
                        }
                        #onboardingModal > div {
                            overflow: visible !important;
                            max-height: none !important;
                            height: auto !important;
                            padding-top: 64px !important;
                            padding-bottom: 65px !important;
                            width: 100% !important;
                        }
                        /* FinX-logotypen skalas proportionerligt så den aldrig hamnar bakom rullgardinen */
                        #onboardingModal .finx-transparent-logo {
                            height: 110px !important;
                            max-width: 240px !important;
                            margin-top: 4px !important;
                        }
                        #onboardingModal p.italic {
                            font-size: 11px !important;
                            padding: 0 8px !important;
                            line-height: 1.35 !important;
                        }
                        /* Vita inloggningsrutan på mobil */
                        #onboardingModal .bg-white.rounded-3xl {
                            max-height: none !important;
                            overflow: visible !important;
                            padding: 18px 14px 22px 14px !important;
                            border-radius: 22px !important;
                        }
                        #onboardingModal .bg-white.rounded-3xl h3 {
                            font-size: 19px !important;
                            line-height: 1.25 !important;
                        }
                        /* Fix för "Logga in" och "Skapa nytt konto"-knapparna så de aldrig bryts på 3 rader */
                        #onboardingModal .grid.grid-cols-2 {
                            gap: 6px !important;
                            padding: 5px !important;
                        }
                        #onboardingModal .grid.grid-cols-2 > button {
                            font-size: 12.5px !important;
                            padding: 10px 6px !important;
                            white-space: nowrap !important;
                            line-height: 1.2 !important;
                        }

                        /* 2. Flaggmenyn (vänster) och SeeNorth GlobalCore-rullgardinen (höger) i mobilen */
                        #loginTopLeftFlagDropdownWrap {
                            top: 10px !important;
                            left: 10px !important;
                        }
                        #loginTopLeftFlagDropdownWrap button {
                            padding: 5px 7px !important;
                            border-radius: 10px !important;
                        }
                        #loginTopLeftFlagDropdownWrap button img {
                            width: 28px !important;
                            height: 19px !important;
                        }
                        #loginNationDropdownList {
                            top: 52px !important;
                            left: 10px !important;
                            width: calc(100vw - 20px) !important;
                            max-width: 310px !important;
                        }

                        #snTopRightCornerWrap {
                            top: 8px !important;
                            right: 10px !important;
                            max-width: calc(100vw - 74px) !important;
                        }
                        #snTopTriggerBtn {
                            padding: 6px 10px !important;
                            border-radius: 12px !important;
                        }
                        #snTopLogoImg {
                            width: 148px !important;
                            max-width: 48vw !important;
                        }
                        #snDropdownArrow {
                            width: 26px !important;
                            height: 26px !important;
                            font-size: 14px !important;
                        }
                        #snTopTaglineText {
                            font-size: 8.5px !important;
                            letter-spacing: 0.9px !important;
                            margin-top: 3px !important;
                            white-space: nowrap !important;
                        }
                        #snDropdownMenuPanel {
                            width: calc(100vw - 20px) !important;
                            max-width: 340px !important;
                            max-height: 78vh !important;
                            overflow-y: auto !important;
                        }

                        /* 3. Molnsynk-märket på mobil: kompakt och ur vägen för Logga in-knappen */
                        #finxCloudSyncBadge {
                            bottom: 8px !important;
                            right: 8px !important;
                            font-size: 10px !important;
                            padding: 5px 10px !important;
                            opacity: 0.92 !important;
                        }

                        /* 4. Inne i appen efter inloggning på mobil: Utdragbar sidomeny (Drawer) */
                        body:not(.auth-gate-locked) > aside {
                            position: fixed !important;
                            top: 0 !important;
                            bottom: 0 !important;
                            left: 0 !important;
                            width: 270px !important;
                            z-index: 9990 !important;
                            transform: translateX(-105%) !important;
                            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
                        }
                        body.finx-mobile-sidebar-open:not(.auth-gate-locked) > aside {
                            transform: translateX(0) !important;
                        }
                        body:not(.auth-gate-locked) > #mainArea {
                            width: 100vw !important;
                            padding: 56px 12px 80px 12px !important;
                        }
                    }

/* --- Modulstil: snGlobalCoreStyles --- */
.sn-globalcore-tagline {
                        font-family: 'Montserrat', 'Cinzel', sans-serif;
                        font-size: 12px;
                        font-weight: 900;
                        letter-spacing: 1.8px;
                        text-transform: uppercase;
                        background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 48%, #6ee7b7 100%);
                        -webkit-background-clip: text;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                        text-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
                        margin-top: 7px;
                        text-align: center;
                        transition: all 0.25s ease;
                    }
                    .sn-top-trigger-box:hover .sn-globalcore-tagline {
                        letter-spacing: 2.3px;
                        filter: brightness(1.15);
                    }
                    .sn-dropdown-panel {
                        transform-origin: top right;
                        animation: snDropFade 0.2s ease-out forwards;
                    }
                    @keyframes snDropFade {
                        from { opacity: 0; transform: translateY(-8px) scale(0.97); }
                        to { opacity: 1; transform: translateY(0) scale(1); }
                    }

/* --- Modulstil: finxSandboxLayoutOffsetStyle --- */
body > aside > div:first-child {
                        padding-top: 56px !important;
                    }
                    body.finx-sandbox-bar-active > aside,
                    body.finx-sandbox-bar-active > #mainSidebar {
                        margin-top: var(--finx-sandbox-bar-h, 58px) !important;
                        height: calc(100vh - var(--finx-sandbox-bar-h, 58px)) !important;
                        max-height: calc(100vh - var(--finx-sandbox-bar-h, 58px)) !important;
                    }
                    body.finx-sandbox-bar-active > main,
                    body.finx-sandbox-bar-active > #mainArea {
                        margin-top: var(--finx-sandbox-bar-h, 58px) !important;
                        height: calc(100vh - var(--finx-sandbox-bar-h, 58px)) !important;
                        max-height: calc(100vh - var(--finx-sandbox-bar-h, 58px)) !important;
                    }
                    body.finx-sandbox-bar-active #finxHamburgerTopLeftBtn {
                        top: calc(var(--finx-sandbox-bar-h, 58px) + 10px) !important;
                    }
                    body.finx-sandbox-bar-active #finxAmbientBackgroundLogo {
                        top: calc(var(--finx-sandbox-bar-h, 58px) + 8px) !important;
                    }
                    body.finx-sandbox-bar-active #floatingYellowTopCornerBox {
                        top: calc(var(--finx-sandbox-bar-h, 58px) + 10px) !important;
                    }

/* --- Modulstil: finxProportionalCardsAndBadgesStyle --- */
.finx-tier-card-option {
                        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
                    }
                    .finx-tier-card-option:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.55);
                    }
                    .finx-admin-crown-hero-logo {
                        width: 84px !important;
                        height: 84px !important;
                        min-width: 84px !important;
                        object-fit: cover !important;
                        border-radius: 18px !important;
                        border: 2.5px solid #facc15 !important;
                        box-shadow: 0 0 26px rgba(250, 204, 21, 0.65), 0 8px 20px rgba(0, 0, 0, 0.65) !important;
                        background: #0f172a !important;
                        padding: 2px !important;
                        display: block !important;
                    }

/* --- Modulstil: finxCardShapesAndSizesStyle --- */
#dashTitleHideArrowBtn,
                #dashTitleShowAgainBtn,
                #transpBarShowArrowBtn,
                #tab-dash > div:first-child p.text-sm.text-slate-500,
                .btn-card-color-picker,
                .btn-card-font-picker,
                #btnChartSizeShapeStudio,
                #btnChartFontStudio,
                #btnOpen20ChartsGallery {
                    display: none !important;
                }

                #dashCardsGrid {
                    align-items: start !important;
                }

                #dashCardsGrid.finx-align-flex-mode {
                    display: flex !important;
                    flex-wrap: wrap !important;
                    gap: 20px !important;
                    align-items: flex-start !important;
                }
                #dashCardsGrid.finx-align-left {
                    justify-content: flex-start !important;
                }
                #dashCardsGrid.finx-align-center {
                    justify-content: center !important;
                }
                #dashCardsGrid.finx-align-right {
                    justify-content: flex-end !important;
                }

                #dashCardsGrid > div {
                    position: relative !important;
                    overflow: hidden !important;
                    box-sizing: border-box !important;
                    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
                }

                .finx-true-shape-svg {
                    position: absolute !important;
                    inset: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    pointer-events: none !important;
                    z-index: 0 !important;
                }

                .finx-card-safe-inner {
                    position: relative !important;
                    z-index: 2 !important;
                    width: 100% !important;
                    height: 100% !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: space-between !important;
                    box-sizing: border-box !important;
                    overflow: hidden !important;
                    word-break: break-word !important;
                }

                /* Liten storlek (1. Liten / Kompakt): skalar ner text, avstånd och höjd på alla former */
                .finx-card-size-small .finx-card-main-amount {
                    font-size: 1.4rem !important;
                    line-height: 1.2 !important;
                }
                .finx-card-size-small .finx-card-title-text {
                    font-size: 0.68rem !important;
                    margin-top: 0.35rem !important;
                    margin-bottom: 0.1rem !important;
                }
                .finx-card-size-small .finx-card-footer-box {
                    margin-top: 0.5rem !important;
                    padding-top: 0.35rem !important;
                    font-size: 0.68rem !important;
                }

                /* 1. Klassisk Rundad (Standard) */
                .finx-shape-standard {
                    border-radius: 24px !important;
                }

                /* 2. Rund Cirkel / Medaljong – all text centrerad i cirkelns säkra mittzon */
                .finx-shape-circle {
                    border-radius: 50% !important;
                    border-width: 3px !important;
                }
                .finx-shape-circle .finx-card-safe-inner {
                    padding: 15% 17% 15% 17% !important;
                    text-align: center !important;
                    align-items: center !important;
                }
                .finx-shape-circle .finx-card-header-row {
                    justify-content: center !important;
                    gap: 8px !important;
                    width: 100% !important;
                }
                .finx-shape-circle .finx-card-footer-box {
                    width: 86% !important;
                }

                /* 3. Kapsel / Pillerform – indragna sidor så rundningen aldrig skär i texten */
                .finx-shape-capsule {
                    border-radius: 9999px !important;
                    border-width: 3px !important;
                }
                .finx-shape-capsule .finx-card-safe-inner {
                    padding: 20px 14% 20px 14% !important;
                }

                /* 4. Valvbåge / Kupol – indragen topp så etikett och penna ligger under kupolbågen */
                .finx-shape-arch,
                .finx-shape-ticket,
                .finx-shape-diamond,
                .finx-shape-hexagon,
                .finx-shape-shield,
                .finx-shape-star {
                    background: transparent !important;
                    background-color: transparent !important;
                    border-color: transparent !important;
                    box-shadow: none !important;
                    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)) !important;
                }
                .finx-shape-arch .finx-card-safe-inner {
                    padding: 15% 12% 16px 12% !important;
                }

                /* 5. Biljett / Kupong – indragen från de 4 urklippta hörnen */
                .finx-shape-ticket .finx-card-safe-inner {
                    padding: 18px 13% 18px 13% !important;
                }

                /* 6. Skarp Rektangel (90° Dubbelram) */
                .finx-shape-sharp {
                    border-radius: 0px !important;
                    border-width: 3px !important;
                    outline: 2px solid rgba(255, 255, 255, 0.32) !important;
                    outline-offset: -8px !important;
                }
                .finx-shape-sharp .finx-card-safe-inner {
                    padding: 18px 20px !important;
                }

                /* 7. Juvel / 8-Kantig Diamant – säker korridor mellan de fasade hörnen */
                .finx-shape-diamond .finx-card-safe-inner {
                    padding: 18px 16% 18px 16% !important;
                }

                /* 8. Sexkant (Äkta Hexagon) – håller all text mellan 17% och 83% i bredd */
                .finx-shape-hexagon .finx-card-safe-inner {
                    padding: 18px 17% 18px 17% !important;
                }

                /* 9. Vapensköld (Shield) – extra bottenmarginal + smalare fot så sköldens spets aldrig skär texten */
                .finx-shape-shield .finx-card-safe-inner {
                    padding: 16px 11% 18% 11% !important;
                }
                .finx-shape-shield .finx-card-footer-box {
                    width: 78% !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                }

                /* 10. Stjärna (Äkta 5-uddig Stjärna) – all text centrerad i stjärnans inre kärna */
                .finx-shape-star .finx-card-safe-inner {
                    padding: 23% 23% 23% 23% !important;
                    text-align: center !important;
                    align-items: center !important;
                    justify-content: center !important;
                    gap: 4px !important;
                }
                .finx-shape-star .finx-card-header-row {
                    justify-content: center !important;
                    gap: 6px !important;
                    width: 100% !important;
                }
                .finx-shape-star .finx-card-main-amount {
                    font-size: 1.45rem !important;
                    line-height: 1.15 !important;
                }
                .finx-shape-star .finx-card-title-text {
                    font-size: 0.68rem !important;
                    margin-top: 0.25rem !important;
                }
                .finx-shape-star .finx-card-footer-box {
                    width: 88% !important;
                    margin-top: 0.35rem !important;
                    padding-top: 0.3rem !important;
                    font-size: 0.65rem !important;
                }

                .finx-MergedSubmenuSafeWrap {
                    margin-top: 10px !important;
                    padding: 8px !important;
                    border-radius: 14px !important;
                    background: rgba(2, 6, 23, 0.38) !important;
                    border: 1px solid rgba(255, 255, 255, 0.18) !important;
                    box-sizing: border-box !important;
                    width: 100% !important;
                    overflow: hidden !important;
                }

                /* Småkortens 10 former */
                .finx-subshape-standard { border-radius: 14px !important; }
                .finx-subshape-circle { border-radius: 9999px !important; padding: 10px 16px !important; text-align: center !important; }
                .finx-subshape-capsule { border-radius: 9999px !important; padding: 8px 16px !important; }
                .finx-subshape-arch,
                .finx-subshape-ticket,
                .finx-subshape-diamond,
                .finx-subshape-hexagon,
                .finx-subshape-shield,
                .finx-subshape-star {
                    position: relative !important;
                    background: transparent !important;
                    background-color: transparent !important;
                    border-color: transparent !important;
                }
                .finx-subshape-arch > *:not(.finx-true-shape-svg),
                .finx-subshape-ticket > *:not(.finx-true-shape-svg),
                .finx-subshape-diamond > *:not(.finx-true-shape-svg),
                .finx-subshape-hexagon > *:not(.finx-true-shape-svg),
                .finx-subshape-shield > *:not(.finx-true-shape-svg),
                .finx-subshape-star > *:not(.finx-true-shape-svg) {
                    position: relative !important;
                    z-index: 2 !important;
                }
                .finx-subshape-sharp { border-radius: 0px !important; }

                @keyframes cardHoldPulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(0.985); }
                    100% { transform: scale(1); }
                }
                .finx-card-holding-15s {
                    animation: cardHoldPulse 1.5s ease-in-out infinite !important;
                }

/* --- Modulstil: finxInnerSubCardsAndDotsStyle --- */
.finx-subcards-flex-container {
                    display: flex !important;
                    flex-wrap: wrap !important;
                    gap: 12px !important;
                    align-items: center !important;
                    width: 100% !important;
                }
                .finx-subcards-align-left { justify-content: flex-start !important; }
                .finx-subcards-align-center { justify-content: center !important; }
                .finx-subcards-align-right { justify-content: flex-end !important; }

                /* Litet kort med bara färg (Ingen text inuti) */
                .finx-subcard-dot-item {
                    cursor: pointer !important;
                    position: relative !important;
                    overflow: hidden !important;
                    transition: transform 0.18s ease, box-shadow 0.18s ease, outline 0.18s ease !important;
                    display: inline-block !important;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.38) !important;
                    flex-shrink: 0 !important;
                }
                .finx-subcard-dot-item:hover {
                    transform: scale(1.16) !important;
                    z-index: 10 !important;
                }
                .finx-subcard-dot-selected {
                    outline: 3.5px solid #facc15 !important;
                    outline-offset: 3px !important;
                    transform: scale(1.14) !important;
                    box-shadow: 0 0 18px rgba(250, 204, 21, 0.9) !important;
                }

                /* Småkort med text (Storlek 2, 3 och 4) */
                .finx-subcard-box-item {
                    position: relative !important;
                    overflow: hidden !important;
                    box-sizing: border-box !important;
                    cursor: pointer !important;
                    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: space-between !important;
                    color: #ffffff !important;
                    box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.4) !important;
                }
                .finx-subcard-box-item:hover {
                    transform: translateY(-2px) !important;
                }
                .finx-subcard-box-selected {
                    outline: 3.5px solid #facc15 !important;
                    outline-offset: 2px !important;
                    box-shadow: 0 0 22px rgba(250, 204, 21, 0.65) !important;
                }

                .finx-subcard-safe-inner {
                    position: relative !important;
                    z-index: 2 !important;
                    width: 100% !important;
                    height: 100% !important;
                    flex: 1 1 auto !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: space-between !important;
                    box-sizing: border-box !important;
                    overflow: hidden !important;
                }

                .finx-card-safe-inner {
                    flex: 1 1 auto !important;
                }

/* --- Modulstil: finxWysiwygAllShapesStyle --- */
#dashChartCard {
                    position: relative !important;
                    overflow: hidden !important;
                    box-sizing: border-box !important;
                    min-height: 390px !important;
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                }
                #dashChartCard > #dashChartSafeInner {
                    position: relative !important;
                    z-index: 2 !important;
                    width: 100% !important;
                    height: 100% !important;
                }
                #dashChartCard canvas#dashDoughnut {
                    background: rgba(15, 23, 42, 0.52) !important;
                    border-radius: 18px !important;
                    padding: 12px !important;
                    border: 1px solid rgba(255, 255, 255, 0.25) !important;
                }

                .finx-shape-standard,
                .finx-shape-circle,
                .finx-shape-capsule,
                .finx-shape-arch,
                .finx-shape-ticket,
                .finx-shape-sharp,
                .finx-shape-diamond,
                .finx-shape-hexagon,
                .finx-shape-shield,
                .finx-shape-star {
                    border-radius: 0px !important;
                    background: transparent !important;
                    background-color: transparent !important;
                    border-color: transparent !important;
                    outline: none !important;
                    box-shadow: none !important;
                }

                .finx-subshape-standard,
                .finx-subshape-circle,
                .finx-subshape-capsule,
                .finx-subshape-arch,
                .finx-subshape-ticket,
                .finx-subshape-sharp,
                .finx-subshape-diamond,
                .finx-subshape-hexagon,
                .finx-subshape-shield,
                .finx-subshape-star {
                    border-radius: 0px !important;
                    position: relative !important;
                    background: transparent !important;
                    background-color: transparent !important;
                    border-color: transparent !important;
                    outline: none !important;
                    box-shadow: none !important;
                }

                #dashCardsGrid .finx-card-safe-inner {
                    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important;
                }
                #dashCardsGrid .finx-card-title-text {
                    white-space: normal !important;
                    overflow: visible !important;
                    text-overflow: clip !important;
                    word-break: break-word !important;
                    overflow-wrap: anywhere !important;
                    line-height: 1.25 !important;
                    display: block !important;
                    width: 100% !important;
                    color: var(--finx-card-text-color, #ffffff) !important;
                    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
                }
                #dashCardsGrid .finx-card-main-amount {
                    white-space: normal !important;
                    overflow: visible !important;
                    word-break: break-word !important;
                    line-height: 1.15 !important;
                    color: var(--finx-card-text-color, #ffffff) !important;
                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92) !important;
                }
                #dashCardsGrid .finx-card-header-row {
                    flex-wrap: wrap !important;
                    gap: 4px !important;
                    width: 100% !important;
                }

                .finx-shape-shield .finx-card-safe-inner,
                .finx-shape-diamond .finx-card-safe-inner,
                .finx-shape-circle .finx-card-safe-inner,
                .finx-shape-star .finx-card-safe-inner,
                .finx-shape-capsule .finx-card-safe-inner,
                .finx-shape-arch .finx-card-safe-inner {
                    text-align: center !important;
                    align-items: center !important;
                }
                .finx-shape-shield .finx-card-header-row,
                .finx-shape-diamond .finx-card-header-row,
                .finx-shape-circle .finx-card-header-row,
                .finx-shape-star .finx-card-header-row,
                .finx-shape-capsule .finx-card-header-row,
                .finx-shape-arch .finx-card-header-row {
                    justify-content: center !important;
                }
                .finx-shape-shield .finx-card-footer-box,
                .finx-shape-shield .finx-MergedSubmenuSafeWrap,
                .finx-shape-shield .finx-card-debts-widget {
                    width: 84% !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                }
                .finx-shape-diamond .finx-card-footer-box,
                .finx-shape-diamond .finx-MergedSubmenuSafeWrap,
                .finx-shape-diamond .finx-card-debts-widget {
                    width: 76% !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                }
                .finx-shape-star .finx-card-footer-box,
                .finx-shape-star .finx-MergedSubmenuSafeWrap,
                .finx-shape-star .finx-card-debts-widget {
                    width: 82% !important;
                    margin-left: auto !important;
                    margin-right: auto !important;
                }

/* --- Modulstil: finxMasterClockGlobalStyle --- */
#finxGlobalClockTopDock,
#finxGlobalClockBottomDock {
    width: 100%;
    box-sizing: border-box;
    z-index: 42;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
    transition: padding 0.2s ease;
}

#finxGlobalClockTopDock > *,
#finxGlobalClockBottomDock > * {
    pointer-events: auto;
}

#finxGlobalClockTopDock.finx-clock-sticky-top {
    position: sticky !important;
    top: 0px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 8px;
    margin-bottom: 8px;
}

#finxGlobalClockTopDock.finx-clock-static-top {
    position: relative !important;
    background: transparent !important;
    padding: 4px 4px 10px 4px;
    margin-bottom: 6px;
}

#finxGlobalClockBottomDock.finx-clock-sticky-bottom {
    position: sticky !important;
    bottom: 0px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 8px;
    margin-top: 10px;
}

#finxGlobalClockBottomDock.finx-clock-static-bottom {
    position: relative !important;
    background: transparent !important;
    padding: 10px 4px 4px 4px;
    margin-top: 8px;
}
                #finxClockFreeFloatingMount {
                    position: fixed !important;
                    z-index: 9980 !important;
                    user-select: none !important;
                }
                .finx-clock-freemove-active {
                    outline: 3px dashed #34d399 !important;
                    outline-offset: 4px !important;
                    cursor: move !important;
                    box-shadow: 0 0 28px rgba(52, 211, 153, 0.75), 0 12px 30px rgba(0, 0, 0, 0.85) !important;
                }
                #finxClockSidebarTopMount,
                #finxClockSidebarBottomMount {
                    width: 100% !important;
                    max-width: 100% !important;
                    overflow: hidden !important;
                    box-sizing: border-box !important;
                    display: flex !important;
                    justify-content: center !important;
                }

/* --- Modulstil: finxClockHoverAndWeatherStyle --- */
.finx-clock-slot-unit {
                    position: relative;
                    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease, background-color 0.2s ease;
                    border-radius: 14px;
                    padding: 4px 6px;
                }
                .finx-clock-slot-unit.finx-hover-zoom-on:hover {
                    transform: scale(var(--finx-clock-hover-scale, 1.14));
                    z-index: 9999 !important;
                    background: rgba(15, 23, 42, 0.88);
                    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.78), 0 0 0 1.5px rgba(251, 191, 36, 0.75);
                }
                .finx-clock-hover-extra-panel {
                    display: none;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: calc(100% + 8px);
                    min-width: 245px;
                    max-width: 310px;
                    background: linear-gradient(160deg, #0f172a 0%, #020617 100%);
                    color: #ffffff;
                    border: 2px solid #fbbf24;
                    border-radius: 16px;
                    padding: 10px 12px;
                    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.92);
                    z-index: 10005;
                    pointer-events: none;
                    white-space: normal;
                }
                #finxGlobalClockBottomDock .finx-clock-hover-extra-panel,
                #finxClockSidebarBottomMount .finx-clock-hover-extra-panel {
                    top: auto !important;
                    bottom: calc(100% + 8px) !important;
                }
                .finx-clock-slot-unit.finx-hover-zoom-on:hover .finx-clock-hover-extra-panel {
                    display: block;
                    animation: finxClockHoverFadeIn 0.18s ease-out forwards;
                }
                @keyframes finxClockHoverFadeIn {
                    from { opacity: 0; margin-top: 4px; }
                    to   { opacity: 1; margin-top: 0px; }
                }

/* --- Modulstil: finxHistoricalClocksStyle4K --- */
@keyframes finxEmpirePendulumSwing {
                    0%   { transform: rotate(-7deg); }
                    50%  { transform: rotate(7deg); }
                    100% { transform: rotate(-7deg); }
                }
                .finx-empire-pendulum {
                    transform-origin: 50px 50px;
                    animation: finxEmpirePendulumSwing 2s ease-in-out infinite;
                }

/* --- Modulstil: finxFinalCleanLogoOverrideStyle --- */
body > aside > div:first-child {
                        padding: 12px 12px 14px 12px !important;
                    }
                    body.finx-sandbox-bar-active {
                        padding-top: var(--finx-sandbox-bar-h, 52px) !important;
                        box-sizing: border-box !important;
                    }
                    body.finx-sandbox-bar-active > aside,
                    body.finx-sandbox-bar-active > #mainSidebar,
                    body.finx-sandbox-bar-active > main,
                    body.finx-sandbox-bar-active > #mainArea {
                        margin-top: 0 !important;
                        height: calc(100vh - var(--finx-sandbox-bar-h, 52px)) !important;
                        max-height: calc(100vh - var(--finx-sandbox-bar-h, 52px)) !important;
                    }

                    #internationalBrandHeaderBox img#heroAdminCrownImg,
                    #finxSandboxLauncherPreviewLogo,
                    .finx-admin-crown-hero-logo {
                        background: transparent !important;
                        background-color: transparent !important;
                        border: none !important;
                        border-radius: 0 !important;
                        box-shadow: none !important;
                        padding: 0 !important;
                        object-fit: contain !important;
                        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.72)) !important;
                    }
                    #internationalBrandHeaderBox img#heroAdminCrownImg {
                        width: 100% !important;
                        max-width: 190px !important;
                        height: 118px !important;
                        max-height: 118px !important;
                        margin: 0 auto !important;
                        display: block !important;
                    }
                    #finxSandboxLauncherPreviewLogo {
                        width: 54px !important;
                        height: 54px !important;
                        min-width: 54px !important;
                    }

                    #internationalBrandHeaderBox img.finx-tier-badge-img,
                    #dualAccountSwitcherBox img.finx-tier-badge-img,
                    #iukImprovedSandboxTopBar img.finx-tier-badge-img,
                    .finx-tier-badge-img {
                        width: 18px !important;
                        height: 18px !important;
                        min-width: 18px !important;
                        max-width: 18px !important;
                        max-height: 18px !important;
                        object-fit: contain !important;
                        display: inline-block !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        background: transparent !important;
                        background-color: transparent !important;
                        border: none !important;
                        border-radius: 0 !important;
                        box-shadow: none !important;
                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
                    }

                    #dualAccountSwitcherBox {
                        display: block !important;
                    }
                    #finxAdminCrownHeaderBadge {
                        display: none !important;
                    }
/* --- Modulstil: finxFramelessAndResizeStyle (Ramlösa knappar, Infällbar klockmeny & Storlekshandtag) --- */
.finx-icon-hit-btn,
body.finx-frameless-buttons-global .finx-frameless-candidate,
.finx-frameless-scope-on .finx-frameless-candidate {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.finx-icon-hit-btn:hover,
body.finx-frameless-buttons-global .finx-frameless-candidate:hover,
.finx-frameless-scope-on .finx-frameless-candidate:hover {
    transform: scale(1.14);
    opacity: 1;
}

.finx-clock-tools-drawer {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: max-width 0.22s ease, opacity 0.18s ease;
    overflow: hidden;
}

.finx-clock-tools-drawer.is-collapsed {
    max-width: 0px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.finx-resizable-active {
    outline: 2.5px dashed #34d399 !important;
    outline-offset: 4px !important;
    position: relative !important;
}

.finx-resize-handle {
    position: absolute;
    z-index: 9992;
    background: #10b981;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.finx-resize-handle:hover {
    background: #fbbf24;
    transform: scale(1.2);
}

.finx-resize-handle-se {
    width: 16px;
    height: 16px;
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.finx-resize-handle-e {
    width: 10px;
    height: 24px;
    right: -6px;
    top: calc(50% - 12px);
    cursor: ew-resize;
}

.finx-resize-handle-s {
    width: 24px;
    height: 10px;
    bottom: -6px;
    left: calc(50% - 12px);
    cursor: ns-resize;
}
/* --- Sidförankrad fri klockplacering (stannar kvar på sidan vid skrollning) --- */
#mainArea {
    position: relative;
}

#finxClockFreePageMount {
    position: absolute !important;
    z-index: 60 !important;
    user-select: none !important;
}
/* --- Röda stängningskryss (✕) i övre högra hörnet + stark hover-glöd på osynlig träffyta --- */
.finx-universal-close-x {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
    background: rgba(244, 63, 94, 0.10);
    border: 1.5px solid rgba(244, 63, 94, 0.32);
    color: #e11d48 !important;
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, text-shadow 0.16s ease, border-color 0.16s ease;
}

.finx-universal-close-x:hover {
    background: #e11d48 !important;
    border-color: #fda4af !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(225, 29, 72, 0.65), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transform: scale(1.08);
}

/* När fyrkanten runt knappar är bortvald: osynlig ruta i vila, starkt upplyst ikon vid hover */
body.finx-frameless-buttons-global .finx-universal-close-x,
.finx-frameless-scope-on .finx-universal-close-x {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #ef4444 !important;
}

body.finx-frameless-buttons-global .finx-universal-close-x:hover,
.finx-frameless-scope-on .finx-universal-close-x:hover {
    background: rgba(225, 29, 72, 0.14) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #ff1e42 !important;
    text-shadow: 0 0 12px rgba(255, 30, 66, 0.95), 0 0 24px rgba(225, 29, 72, 0.75) !important;
    transform: scale(1.22);
}

body.finx-frameless-buttons-global .finx-frameless-candidate:not(.finx-universal-close-x):hover,
.finx-frameless-scope-on .finx-frameless-candidate:not(.finx-universal-close-x):hover {
    background: rgba(251, 191, 36, 0.12) !important;
    filter: brightness(1.35) drop-shadow(0 0 8px rgba(251, 191, 36, 0.85));
    transform: scale(1.20);
}
/* --- Lås mot automatisk uppskrollning vid klockans sekundtick (Scroll Anchoring Fix) --- */
#mainArea,
#finxClockFreePageMount,
#finxGlobalClockTopDock,
#finxGlobalClockBottomDock {
    overflow-anchor: none !important;
}

#finxClockFreePageMount {
    contain: layout style;
}
/* --- Ramlösa ikonknappar: behåller hela sin osynliga klickyta men döljer fyrkanten i vila --- */
body.finx-frameless-buttons-global .finx-frameless-candidate:not(.finx-universal-close-x),
.finx-frameless-scope-on .finx-frameless-candidate:not(.finx-universal-close-x) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Diskret liten flikknapp för klockans infällbara knapprad */
.finx-clock-toolbar-tab-btn {
    width: 20px;
    height: 28px;
    min-width: 20px;
    min-height: 28px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(253, 224, 71, 0.80);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.16s ease, background-color 0.16s ease, transform 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.finx-clock-toolbar-tab-btn:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.88);
    color: #fde047;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
    transform: scale(1.08);
}

/* === FINX SLEEK GLASS SCROLLBARS === */
/* Chrome, Edge & Safari: ta bort vita spår och pilknappar överallt på hemsidan */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.24);
    border-radius: 9999px;
    border: none;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.48);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(251, 191, 36, 0.65);
}

/* Inuti alla översiktskort, småkortsytor och mörka paneler: supertunn (4px) & nästan osynlig tills man hovrar */
#dashCardsGrid ::-webkit-scrollbar,
.finx-MergedSubmenuSafeWrap ::-webkit-scrollbar,
.finx-subcards-flex-container::-webkit-scrollbar,
#sidebar ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

#dashCardsGrid ::-webkit-scrollbar-thumb,
.finx-MergedSubmenuSafeWrap ::-webkit-scrollbar-thumb,
.finx-subcards-flex-container::-webkit-scrollbar-thumb,
#sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 9999px;
}

#dashCardsGrid *:hover::-webkit-scrollbar-thumb,
.finx-MergedSubmenuSafeWrap:hover ::-webkit-scrollbar-thumb,
.finx-MergedSubmenuSafeWrap *:hover::-webkit-scrollbar-thumb,
.finx-subcards-flex-container:hover::-webkit-scrollbar-thumb,
#sidebar:hover ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.30);
}

#dashCardsGrid ::-webkit-scrollbar-thumb:active,
.finx-MergedSubmenuSafeWrap ::-webkit-scrollbar-thumb:active,
.finx-subcards-flex-container::-webkit-scrollbar-thumb:active {
    background: rgba(251, 191, 36, 0.65);
}

/* Fallback enbart för Firefox (där ::-webkit-scrollbar inte stöds) */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }
}

/* === FINX MODAL OVERFLOW & HEADER GUARD === */
#cardManagerModal > div,
#cardSizeAndShapeStudioModal > div,
#innerSubCardEditorModal > div {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
#cardManagerModal {
    padding: 12px !important;
}
#cardManagerModal > div {
    max-height: 96vh !important;
    padding: 20px 22px !important;
}
#cardSizeAndShapeStudioModal button[onclick*="oppnaWordFontStudioModal"] {
    margin-right: 40px !important;
}

/* === FINX SIDEBAR CLOCK & HOVER POPOUT === */
/* Säkerställ att tomma klock-dockor ALDRIG fångar musklick ovanpå menyer och knappar */
#finxGlobalClockTopDock,
#finxGlobalClockBottomDock,
#finxClockFreeFloatingMount,
#finxClockFreePageMount {
    pointer-events: none !important;
}

#finxGlobalClockTopDock [id^="finxMasterClockWidget_"],
#finxGlobalClockBottomDock [id^="finxMasterClockWidget_"],
#finxClockFreeFloatingMount [id^="finxMasterClockWidget_"],
#finxClockFreePageMount [id^="finxMasterClockWidget_"],
#finxClockMoveAndSizeBanner {
    pointer-events: auto !important;
}

/* Hög klickprioritet på Inställningarnas infällbara toppmenyer */
#settingsMasterClockRestoreBox,
#settingsUniversalPensManagerBox {
    position: relative !important;
    z-index: 45 !important;
    pointer-events: auto !important;
}

.finx-sidebar-drop-highlight {
    outline: 2px dashed #fbbf24 !important;
    outline-offset: -4px !important;
    box-shadow: inset 0 0 28px rgba(251, 191, 36, 0.22) !important;
}

#finxClockSidebarTopMount,
#finxClockSidebarMidMount,
#finxClockSidebarBottomMount {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.finx-clock-in-sidebar [id^="finxMasterClockWidget_"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    cursor: grab !important;
    pointer-events: auto !important;
}

.finx-clock-in-sidebar [id^="finxMasterClockWidget_"] > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}

.finx-clock-in-sidebar .finx-clock-slot-unit {
    width: 100% !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    background: rgba(2, 6, 23, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    zoom: 0.72;
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
    cursor: pointer !important;
}

.finx-clock-in-sidebar .finx-clock-slot-unit:hover {
    border-color: #fbbf24 !important;
    background: rgba(15, 23, 42, 0.78) !important;
}

.finx-clock-in-sidebar .finx-clock-hover-extra-panel {
    display: none !important;
}

#finxSidebarClockHoverPopout {
    position: fixed;
    z-index: 999995;
    pointer-events: none !important;
    transition: opacity 0.16s ease, transform 0.16s ease;
    filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.78));
}

/* === RIKTIG FRILÄGGNING AV KRONAN (#internationalBrandHeaderBox & #finxPrimaryLogoSlot) === */
#internationalBrandHeaderBox,
#finxPrimaryLogoSlot,
#finxPrimaryLogoSlot > div,
#internationalBrandHeaderBox > div:first-child,
div:has(> #finxPrimaryLogoSlot),
div:has(> img.finx-transparent-logo) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
}

#finxPrimaryLogoSlot img,
#internationalBrandHeaderBox img.finx-transparent-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}



/* Hover-effekt på frilagda knappar */
#mainFolderBtn {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
#mainFolderBtn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
/* === FAVORIT-STJÄRNOR & TOPPSORTERING FÖR DIAGRAMVYER === */
.finx-chart-fav-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.finx-chart-QuickStar-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.finx-chart-QuickStar-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: scale(1.15);
}

.finx-chart-QuickStar-btn.is-fav {
    color: #facc15 !important;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.55));
}

.finx-chart-QuickStar-btn.not-fav {
    color: rgba(255, 255, 255, 0.45) !important;
}

.finx-custom-chart-trigger {
    background: rgba(15, 23, 42, 0.92) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    max-width: 260px !important;
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
}

.finx-custom-chart-trigger:hover {
    border-color: rgba(250, 204, 21, 0.65) !important;
    background: rgba(15, 23, 42, 1) !important;
}

.finx-custom-chart-trigger .trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finx-custom-chart-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.65);
    z-index: 9999;
    padding: 6px;
}

.finx-chart-group-header {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 8px 4px 8px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.finx-chart-group-header.fav-header {
    color: #fde047;
    border-bottom: 1px solid rgba(250, 204, 21, 0.2);
    margin-bottom: 4px;
}

.finx-chart-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    color: #e2e8f0;
    transition: background-color 0.12s ease;
}

.finx-chart-option-row:hover {
    background: rgba(255, 255, 255, 0.09);
}

.finx-chart-option-row.active-view {
    background: rgba(16, 185, 129, 0.22);
    color: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.45);
}

.finx-chart-row-star {
    background: transparent !important;
    border: none !important;
    padding: 3px 5px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
    transition: transform 0.14s ease, color 0.14s ease !important;
}

.finx-chart-row-star:hover {
    transform: scale(1.25);
    background: rgba(255, 255, 255, 0.1) !important;
}

.finx-chart-row-star.is-fav {
    color: #facc15 !important;
}

.finx-chart-row-star.not-fav {
    color: rgba(148, 163, 184, 0.45) !important;
}

/* === FINX KNAPPSTIL-VÄXEL: FAST RAM VS FRILAGD MED STARK HOVER === */

:root {
    --finx-sb-active-bg: #059669;
    --finx-sb-active-txt: #ffffff;
}

/* Kronan och alla logotyper ska ALLTID vara 100% frilagda oavsett knappläge */
#internationalBrandHeaderBox,
#finxPrimaryLogoSlot,
#companyLogoPlaceholder,
img.finx-transparent-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ENDAST den menyknapp som faktiskt är aktiv just nu lyser upp */
html body #mainSidebar button.finx-active-nav-btn {
    background: var(--finx-sb-active-bg, #059669) !important;
    background-color: var(--finx-sb-active-bg, #059669) !important;
    background-image: none !important;
    color: var(--finx-sb-active-txt, #ffffff) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.26) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

html body #mainSidebar button.finx-active-nav-btn span,
html body #mainSidebar button.finx-active-nav-btn i,
html body #mainSidebar button.finx-active-nav-btn svg {
    color: var(--finx-sb-active-txt, #ffffff) !important;
    text-shadow: none !important;
    filter: none !important;
}

/* -------------------------------------------------------------------------
   LÄGE 1: KNAPPAR MED FAST RAM (body.finx-btn-mode-framed)
   ------------------------------------------------------------------------- */
body.finx-btn-mode-framed #mainFolderBtn,
body.finx-btn-mode-framed #finxHamburgerTopLeftBtn,
body.finx-btn-mode-framed .finx-frameless-bars-btn,
body.finx-btn-mode-framed #finxPaletteTriggerLabel,
body.finx-btn-mode-framed .finx-frameless-candidate,
body.finx-btn-mode-framed .finx-card-icon-btn {
    background: rgba(30, 41, 59, 0.92) !important;
    border: 1.5px solid rgba(148, 163, 184, 0.38) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
    border-radius: 12px !important;
    transition: all 0.18s ease !important;
}

body.finx-btn-mode-framed #mainFolderBtn:hover,
body.finx-btn-mode-framed #finxHamburgerTopLeftBtn:hover,
body.finx-btn-mode-framed .finx-frameless-bars-btn:hover,
body.finx-btn-mode-framed #finxPaletteTriggerLabel:hover,
body.finx-btn-mode-framed .finx-frameless-candidate:hover,
body.finx-btn-mode-framed .finx-card-icon-btn:hover {
    background: rgba(51, 65, 85, 1) !important;
    border-color: rgba(250, 204, 21, 0.85) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
    transform: translateY(-1px);
}

/* Inaktiva menyknappar i Läge 1 (inklusive #btn-t-dash när man lämnat Översikt) */
html body.finx-btn-mode-framed #mainSidebar button.finx-nav-btn-item:not(.finx-active-nav-btn),
html body.finx-btn-mode-framed #mainSidebar #btn-t-dash:not(.finx-active-nav-btn) {
    background: rgba(30, 41, 59, 0.65) !important;
    background-image: none !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.18s ease !important;
}

html body.finx-btn-mode-framed #mainSidebar button.finx-nav-btn-item:not(.finx-active-nav-btn):hover,
html body.finx-btn-mode-framed #mainSidebar #btn-t-dash:not(.finx-active-nav-btn):hover {
    background: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(56, 189, 248, 0.55) !important;
}

body.finx-btn-mode-framed [id*="dash"] button[onclick*="redigera"],
body.finx-btn-mode-framed [id*="dash"] button[onclick*="oppna"],
body.finx-btn-mode-framed .finx-chart-QuickStar-btn {
    background: rgba(15, 23, 42, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* -------------------------------------------------------------------------
   LÄGE 2: HELT FRILAGT MED STARKARE HOVER-LJUS (body.finx-btn-mode-frameless)
   ------------------------------------------------------------------------- */
body.finx-btn-mode-frameless #mainFolderBtn,
body.finx-btn-mode-frameless #finxHamburgerTopLeftBtn,
body.finx-btn-mode-frameless .finx-frameless-bars-btn,
body.finx-btn-mode-frameless #finxPaletteTriggerLabel,
body.finx-btn-mode-frameless .finx-frameless-candidate,
body.finx-btn-mode-frameless .finx-card-icon-btn,
body.finx-btn-mode-frameless .finx-chart-QuickStar-btn {
    background: transparent !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease, filter 0.18s ease !important;
}

body.finx-btn-mode-frameless #mainFolderBtn:hover,
body.finx-btn-mode-frameless #finxHamburgerTopLeftBtn:hover,
body.finx-btn-mode-frameless .finx-frameless-bars-btn:hover,
body.finx-btn-mode-frameless #finxPaletteTriggerLabel:hover,
body.finx-btn-mode-frameless .finx-frameless-candidate:hover,
body.finx-btn-mode-frameless .finx-card-icon-btn:hover,
body.finx-btn-mode-frameless .finx-chart-QuickStar-btn:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(250, 204, 21, 0.92) !important;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.45), 0 0 8px rgba(56, 189, 248, 0.45), inset 0 0 10px rgba(255, 255, 255, 0.14) !important;
    transform: scale(1.08);
    filter: brightness(1.22);
}

/* Inaktiva menyknappar i Läge 2 (inklusive #btn-t-dash när man lämnat Översikt) */
html body #mainSidebar button.finx-nav-btn-item:not(.finx-active-nav-btn),
html body #mainSidebar #btn-t-dash:not(.finx-active-nav-btn) {
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
}

html body.finx-btn-mode-frameless #mainSidebar button.finx-nav-btn-item:not(.finx-active-nav-btn):hover,
html body.finx-btn-mode-frameless #mainSidebar #btn-t-dash:not(.finx-active-nav-btn):hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(56, 189, 248, 0.85) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

body.finx-btn-mode-frameless [id*="dash"] button[onclick*="redigera"],
body.finx-btn-mode-frameless [id*="dash"] button[onclick*="oppna"] {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
}

body.finx-btn-mode-frameless [id*="dash"] button[onclick*="redigera"]:hover,
body.finx-btn-mode-frameless [id*="dash"] button[onclick*="oppna"]:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(250, 204, 21, 0.9) !important;
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
    transform: scale(1.1);
}

.finx-btnmode-card {
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    border-radius: 16px;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dark .finx-btnmode-card {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(148, 163, 184, 0.25);
    color: #f1f5f9;
}

.finx-btnmode-card:hover {
    border-color: #6366f1;
}

.finx-btnmode-card.is-selected {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
}


/* === FINX SIDOSPALT MODAL & KONTRASTSTYRNING === */

#mainSidebar .finx-lang-visible-item {
    opacity: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

.finx-sb-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.finx-sb-detail-label {
    font-size: 12px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.finx-sb-detail-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.finx-sb-color-box {
    width: 36px;
    height: 32px;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
}

.finx-sb-hex-box {
    width: 82px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    outline: none;
}

.finx-sb-hex-box:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.finx-sb-sync-mini-btn {
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}

.finx-sb-sync-mini-btn:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: #a5b4fc;
}

/* === FINX GLOBALA YTOR, ADMINFÄRGER & KONTRASTVAKT === */

:root {
    --finx-menu-bg: #ffffff;
    --finx-menu-text: #0f172a;
    --finx-menu-border: rgba(148, 163, 184, 0.32);

    --finx-subbox-bg: #f8fafc;
    --finx-subbox-text: #1e293b;

    --finx-modal-bg: #ffffff;
    --finx-modal-text: #0f172a;
    --finx-modal-subbox-bg: #f8fafc;

    --finx-field-bg: #ffffff;
    --finx-field-text: #0f172a;
    --finx-field-placeholder: rgba(100, 116, 139, 0.85);
    --finx-field-border: rgba(148, 163, 184, 0.45);
    --finx-field-scheme: light;

    --finx-btn-sec-bg: #ffffff;
    --finx-btn-sec-text: #0f172a;
    --finx-btn-sec-border: rgba(148, 163, 184, 0.45);

    --finx-page-heading-text: #ffffff;

    --finx-seg-track-bg: rgba(2, 6, 23, 0.68);
    --finx-seg-track-border: rgba(148, 163, 184, 0.32);
}

/* -------------------------------------------------------------------------
   1. SIDRUBRIKER OVANFÖR MENYER
   ------------------------------------------------------------------------- */
html body.finx-custom-headings-active .finx-page-heading:not([data-finx-zone-override="1"]),
html body.finx-custom-headings-active .finx-page-heading:not([data-finx-zone-override="1"]) span,
html body.finx-custom-headings-active .finx-page-heading:not([data-finx-zone-override="1"]) i {
    color: var(--finx-page-heading-text) !important;
}

/* -------------------------------------------------------------------------
   2. ALLA MENYER, PANELER, AI-SKANNER, KALKYLATORER & TABELLER
   ------------------------------------------------------------------------- */
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) {
    background: var(--finx-menu-bg) !important;
    color: var(--finx-menu-text) !important;
    border-color: var(--finx-menu-border) !important;
}

html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) h1:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) h2:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) h3:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) h4:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) p:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) label:not(.finx-surface-subbox):not(.finx-seg-item):not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) th:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-panel:not([data-finx-zone-override="1"]) td:not([data-finx-zone-override="1"]) {
    color: var(--finx-menu-text) !important;
}

html body.finx-custom-menus-active .finx-surface-subbox:not(.finx-seg-group):not(.finx-seg-item):not([data-finx-zone-override="1"]) {
    background: var(--finx-subbox-bg) !important;
    color: var(--finx-subbox-text) !important;
    border-color: var(--finx-menu-border) !important;
}

html body.finx-custom-menus-active .finx-surface-subbox:not(.finx-seg-group):not(.finx-seg-item):not([data-finx-zone-override="1"]) span:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-subbox:not(.finx-seg-group):not(.finx-seg-item):not([data-finx-zone-override="1"]) p:not([data-finx-zone-override="1"]),
html body.finx-custom-menus-active .finx-surface-subbox:not(.finx-seg-group):not(.finx-seg-item):not([data-finx-zone-override="1"]) strong:not([data-finx-zone-override="1"]) {
    color: var(--finx-subbox-text) !important;
}

/* -------------------------------------------------------------------------
   3. INMATNINGSFÄLT, DATUMFÄLT, BELOPP & RULLGARDINSMENYER
   ------------------------------------------------------------------------- */
html body.finx-custom-fields-active input.finx-surface-field:not([data-finx-zone-override="1"]),
html body.finx-custom-fields-active select.finx-surface-field:not([data-finx-zone-override="1"]),
html body.finx-custom-fields-active textarea.finx-surface-field:not([data-finx-zone-override="1"]),
html body.finx-custom-fields-active #formContainer input.finx-surface-field:not([data-finx-zone-override="1"]),
html body.finx-custom-fields-active #formContainer select.finx-surface-field:not([data-finx-zone-override="1"]),
html body.finx-custom-fields-active #formContainer textarea.finx-surface-field:not([data-finx-zone-override="1"]) {
    background: var(--finx-field-bg) !important;
    background-color: var(--finx-field-bg) !important;
    color: var(--finx-field-text) !important;
    border-color: var(--finx-field-border) !important;
    color-scheme: var(--finx-field-scheme) !important;
}

html body.finx-custom-fields-active input.finx-surface-field:not([data-finx-zone-override="1"])::placeholder,
html body.finx-custom-fields-active textarea.finx-surface-field:not([data-finx-zone-override="1"])::placeholder {
    color: var(--finx-field-placeholder) !important;
    opacity: 1 !important;
}

html body.finx-custom-fields-active select.finx-surface-field:not([data-finx-zone-override="1"]) option {
    background-color: #0f172a;
    color: #f8fafc;
}

/* -------------------------------------------------------------------------
   4. SEKUNDÄRKNAPPAR (T.ex. + Dela Upp)
   ------------------------------------------------------------------------- */
html body.finx-custom-secbtns-active button.finx-surface-secbtn:not(.finx-seg-item):not([data-finx-zone-override="1"]) {
    background: var(--finx-btn-sec-bg) !important;
    color: var(--finx-btn-sec-text) !important;
    border-color: var(--finx-btn-sec-border) !important;
}

html body.finx-custom-secbtns-active button.finx-surface-secbtn:not(.finx-seg-item):not([data-finx-zone-override="1"]) span,
html body.finx-custom-secbtns-active button.finx-surface-secbtn:not(.finx-seg-item):not([data-finx-zone-override="1"]) i {
    color: var(--finx-btn-sec-text) !important;
}

/* -------------------------------------------------------------------------
   5. GLIDANDE VÄXLINGSKNAPPAR FÖR BÅDE RADIO-LABELS OCH KNAPPAR
      (Utgift <-> Inkomst  |  Hushåll <-> Personligt  |  Betald <-> Obetald)
   ------------------------------------------------------------------------- */
html body .finx-seg-group {
    position: relative !important;
    isolation: isolate !important;
    background: var(--finx-seg-track-bg, rgba(2, 6, 23, 0.68)) !important;
    background-image: none !important;
    border: 1.5px solid var(--finx-seg-track-border, rgba(148, 163, 184, 0.32)) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.42) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

html body .finx-seg-group > .finx-seg-slider-pill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.32) !important;
    will-change: transform, width, height, background-color;
}

html body .finx-seg-group > .finx-seg-slider-pill.is-animated {
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.28s ease,
        box-shadow 0.28s ease !important;
}

/* Nollställ alla fasta bakgrunder på själva label/button-elementet OCH dess inre div/span
   så att den glidande kapseln under (z-index: 1) alltid syns 100% fritt! */
html body .finx-seg-group > .finx-seg-item,
html body .finx-seg-group > .finx-seg-item > div,
html body .finx-seg-group > .finx-seg-item > span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html body .finx-seg-group > .finx-seg-item {
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.22s ease, transform 0.12s ease !important;
}

html body .finx-seg-group > .finx-seg-item:active {
    transform: scale(0.97);
}

/* -------------------------------------------------------------------------
   6. POPUP-FÖNSTER & MODALER
   ------------------------------------------------------------------------- */
html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) {
    background: var(--finx-modal-bg) !important;
    color: var(--finx-modal-text) !important;
    border-color: var(--finx-menu-border) !important;
}

html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) h2,
html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) h3,
html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) label,
html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) .finx-sb-detail-label {
    color: var(--finx-modal-text) !important;
}

html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) .finx-sb-detail-row,
html body.finx-custom-modals-active .finx-surface-modal:not([data-finx-zone-override="1"]) .finx-modal-inner-box:not([data-finx-zone-override="1"]) {
    background: var(--finx-modal-subbox-bg) !important;
    color: var(--finx-modal-text) !important;
    border-color: var(--finx-menu-border) !important;
}

/* -------------------------------------------------------------------------
   7. PEKA & FÄRGLÄGG VALFRITT ELEMENT
   ------------------------------------------------------------------------- */
body.finx-pick-surface-mode * {
    cursor: crosshair !important;
}

.finx-pick-hover-target {
    outline: 3px solid #facc15 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.28), 0 0 22px rgba(250, 204, 21, 0.6) !important;
    transition: outline 0.08s ease, box-shadow 0.08s ease !important;
}

#finxPickModeTopBanner {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100020 !important;
    background: linear-gradient(135deg, #090d16 0%, #1e1b4b 60%, #854d0e 100%) !important;
    color: #fde047 !important;
    border: 2px solid #facc15 !important;
    border-radius: 16px !important;
    padding: 12px 20px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
}

#finxSingleZoneQuickModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100030 !important;
    background: rgba(2, 6, 23, 0.58) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#finxSingleZoneQuickModal.hidden {
    display: none !important;
}

.finx-studio-tab-pill {
    flex: 1;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid #cbd5e1;
    background: #f1f5f9;
    color: #334155;
    transition: all 0.16s ease;
}

.finx-studio-tab-pill.is-active {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    color: #fde047;
    border-color: #facc15;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}