/* LOMMEPENGE DARK - nattehimlen over sparegrisen: dyb navy, lysende
   sparegris-blaa og guldmoenter der popper. Bygger paa material-dark. */

@import url("/_content/Radzen.Blazor/css/material-dark-base.css");
@import url("lommepenge-faelles.css?v=2");

:root {
    /* ---------- Temaets egne byggesten ---------- */
    /* Nattehimlen som PENGE-SCENE (mindre godnathistorie): en GULDMOENT som
       maane, en flyvende moent med fartstriber, en svaevende pengeseddel og
       en skyline af moentstakke langs bunden - plus aurora og stjernestoev. */
    --lp-maane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg opacity='0.45'%3E%3Ccircle cx='75' cy='75' r='58' fill='%23f4c34f' opacity='0.25'/%3E%3Ccircle cx='75' cy='75' r='46' fill='%23f4c34f'/%3E%3Ccircle cx='75' cy='75' r='34' fill='none' stroke='%23d6a02a' stroke-width='3'/%3E%3Ctext x='75' y='87' font-family='Arial' font-size='30' font-weight='700' fill='%23a8781c' text-anchor='middle'%3E%E2%82%AC%3C/text%3E%3C/g%3E%3C/svg%3E");
    --lp-flyvemoent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cg%3E%3Cpath d='M10 78L156 30' stroke='%239db8dc' stroke-width='3' stroke-linecap='round' opacity='0.35'/%3E%3Cpath d='M36 84L160 44' stroke='%23cfe3f8' stroke-width='2' stroke-linecap='round' opacity='0.28'/%3E%3Cg opacity='0.55'%3E%3Ccircle cx='186' cy='24' r='15' fill='%23f4c34f'/%3E%3Ccircle cx='186' cy='24' r='10' fill='none' stroke='%23d6a02a' stroke-width='2'/%3E%3C/g%3E%3Cpath fill='%23cfe3f8' opacity='0.4' d='M205 54l3 7 7 3-7 3-3 7-3-7-7-3 7-3z'/%3E%3C/g%3E%3C/svg%3E");
    --lp-seddel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 96'%3E%3Cg opacity='0.34' transform='rotate(-11 80 48)'%3E%3Crect x='14' y='18' width='132' height='60' rx='9' fill='%233aa06a'/%3E%3Crect x='22' y='26' width='116' height='44' rx='5' fill='none' stroke='%23bfe8d2' stroke-width='2'/%3E%3Ccircle cx='80' cy='48' r='15' fill='none' stroke='%23bfe8d2' stroke-width='2'/%3E%3Ctext x='80' y='53' font-family='Arial' font-size='13' font-weight='700' fill='%23bfe8d2' text-anchor='middle'%3E%E2%82%AC%3C/text%3E%3C/g%3E%3C/svg%3E");
    --lp-stakke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 100'%3E%3Cg fill='%236db1ec' opacity='0.12'%3E%3Cellipse cx='45' cy='92' rx='24' ry='7'/%3E%3Cellipse cx='45' cy='82' rx='24' ry='7'/%3E%3Cellipse cx='45' cy='72' rx='24' ry='7'/%3E%3Cellipse cx='45' cy='62' rx='24' ry='7'/%3E%3Cellipse cx='110' cy='92' rx='24' ry='7'/%3E%3Cellipse cx='110' cy='82' rx='24' ry='7'/%3E%3Cellipse cx='175' cy='92' rx='24' ry='7'/%3E%3Cellipse cx='175' cy='82' rx='24' ry='7'/%3E%3Cellipse cx='175' cy='72' rx='24' ry='7'/%3E%3Cellipse cx='175' cy='62' rx='24' ry='7'/%3E%3Cellipse cx='175' cy='52' rx='24' ry='7'/%3E%3Cellipse cx='240' cy='92' rx='24' ry='7'/%3E%3Cellipse cx='240' cy='82' rx='24' ry='7'/%3E%3Cellipse cx='240' cy='72' rx='24' ry='7'/%3E%3Cellipse cx='305' cy='92' rx='24' ry='7'/%3E%3C/g%3E%3Cellipse cx='175' cy='40' rx='24' ry='7' fill='%23f4c34f' opacity='0.18' transform='rotate(-9 175 40)'/%3E%3C/svg%3E");
    --lp-baggrund: var(--lp-maane) left 6% top 22px / 128px auto no-repeat,
        var(--lp-flyvemoent) right 5% top 11% / 210px auto no-repeat,
        var(--lp-seddel) right 9% bottom 24% / 140px auto no-repeat,
        var(--lp-stakke) left bottom / 380px auto repeat-x,
        var(--lp-moenster) left top / 360px 360px repeat,
        radial-gradient(720px 520px at 6% 8%, rgba(99, 169, 234, 0.2), transparent 65%),
        radial-gradient(900px 620px at 85% -120px, rgba(244, 195, 79, 0.1), transparent 60%),
        radial-gradient(820px 700px at 72% 92%, rgba(122, 90, 214, 0.17), transparent 65%),
        linear-gradient(180deg, #0b1322 0%, #101c30 55%, #142138 100%);
    /* Rigtige moenter (med "kr" og rand), gnister og stjerner paa nattehimlen. */
    --lp-moenster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg transform='translate(70 84) rotate(-14)' opacity='0.15'%3E%3Ccircle r='26' fill='none' stroke='%23f4c34f' stroke-width='4'/%3E%3Ccircle r='18' fill='none' stroke='%23f4c34f' stroke-width='2'/%3E%3Ctext y='6' font-family='Arial' font-size='15' font-weight='700' fill='%23f4c34f' text-anchor='middle'%3E%E2%82%AC%3C/text%3E%3C/g%3E%3Cg transform='translate(276 196) rotate(11)' opacity='0.13'%3E%3Ccircle r='20' fill='none' stroke='%236db1ec' stroke-width='4'/%3E%3Ccircle r='13' fill='none' stroke='%236db1ec' stroke-width='2'/%3E%3Ctext y='5' font-family='Arial' font-size='12' font-weight='700' fill='%236db1ec' text-anchor='middle'%3E%E2%82%AC%3C/text%3E%3C/g%3E%3Cg transform='translate(150 306) rotate(-7)' opacity='0.11'%3E%3Ccircle r='13' fill='none' stroke='%236db1ec' stroke-width='3.5'/%3E%3Ccircle r='8' fill='none' stroke='%236db1ec' stroke-width='1.5'/%3E%3C/g%3E%3Cpath fill='%23f4c34f' opacity='0.15' d='M305 52l5 12 12 5-12 5-5 12-5-12-12-5 12-5z'/%3E%3Cpath fill='%23cfe3f8' opacity='0.14' d='M40 250l3 7 7 3-7 3-3 7-3-7-7-3 7-3z'/%3E%3Cg fill='%23cfe3f8' opacity='0.17'%3E%3Ccircle cx='180' cy='36' r='2.2'/%3E%3Ccircle cx='330' cy='140' r='1.7'/%3E%3Ccircle cx='24' cy='150' r='1.7'/%3E%3Ccircle cx='210' cy='240' r='2.2'/%3E%3Ccircle cx='96' cy='180' r='1.4'/%3E%3Ccircle cx='300' cy='320' r='1.7'/%3E%3Ccircle cx='250' cy='300' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
    --lp-panel: #16243d;
    --lp-header: rgba(16, 28, 48, 0.48);
    --lp-sidebar-bg: rgba(16, 28, 48, 0.25);
    /* Kortene: lidt LYSERE navy end himlen, saa glasset kan ses - og kun let
       sloering, ellers udviskes moenstret bagved. (25%, Ryes oenske) */
    --lp-kort-bg: rgba(42, 66, 104, 0.25);
    --lp-blur: 10px;
    --lp-kort-blur: 4px;
    --lp-kant: #26395a;
    --lp-guld: #f4c34f;
    --lp-guld-lys: #f9d77e;
    --lp-guld-moerk: #d6a02a;
    --lp-guld-skygge: rgba(244, 195, 79, 0.25);
    --lp-dyb-skygge: rgba(2, 8, 18, 0.7);

    /* ---------- Grundtoner: nat-navy ---------- */
    --rz-base: #1b2c4a;
    --rz-base-50: #101c30;
    --rz-base-100: #13213a;
    --rz-base-200: #1b2c4a;
    --rz-base-300: #26395a;
    --rz-base-400: #33517d;
    --rz-base-500: #4c6a94;
    --rz-base-600: #7d97b8;
    --rz-base-700: #a3b8d3;
    --rz-base-800: #c8d7ea;
    --rz-base-900: #e8f1fb;
    --rz-base-light: #1b2c4a;
    --rz-base-lighter: #16243d;
    --rz-base-dark: #7d97b8;
    --rz-base-darker: #e8f1fb;
    --rz-base-background-color: var(--lp-panel);
    --rz-body-background-color: #101c30;

    /* ---------- Lysende sparegris-blaa ---------- */
    --rz-primary: #63a9ea;
    --rz-primary-light: #8cc0f1;
    --rz-primary-lighter: rgba(99, 169, 234, 0.16);
    --rz-primary-dark: #4a8ccb;
    --rz-primary-darker: #3a74ab;

    /* ---------- Koral ---------- */
    --rz-secondary: #f5895f;
    --rz-secondary-light: #f8a685;
    --rz-secondary-lighter: rgba(245, 137, 95, 0.16);
    --rz-secondary-dark: #d16d47;
    --rz-secondary-darker: #b05a3a;

    /* ---------- Signalfarver ---------- */
    --rz-info: #5fb2ec;
    --rz-info-light: #87c6f1;
    --rz-info-lighter: rgba(95, 178, 236, 0.18);
    --rz-info-dark: #4a90c1;
    --rz-info-darker: #3d78a1;
    --rz-success: #4cc383;
    --rz-success-light: #74d2a0;
    --rz-success-lighter: rgba(76, 195, 131, 0.18);
    --rz-success-dark: #3b9d68;
    --rz-success-darker: #318356;
    --rz-warning: #f4c34f;
    --rz-warning-light: #f8d47c;
    --rz-warning-lighter: rgba(244, 195, 79, 0.2);
    --rz-warning-dark: #d6a02a;
    --rz-warning-darker: #b38521;
    --rz-danger: #ef6d61;
    --rz-danger-light: #f39189;
    --rz-danger-lighter: rgba(239, 109, 97, 0.18);
    --rz-danger-dark: #c85449;
    --rz-danger-darker: #a8453c;

    /* ---------- Links i sparegris-blaa (Radzens standard er sekundaerfarven = koral) ---------- */
    --rz-link-color: var(--rz-primary);
    --rz-link-hover-color: var(--rz-primary-light);

    /* ---------- Tekst: maanelys paa navy ---------- */
    --rz-text-title-color: #ecf4fd;
    --rz-text-color: #cfdff2;
    --rz-text-secondary-color: #9db4d1;
    --rz-text-tertiary-color: #7d97b8;
    --rz-text-font-family: ui-rounded, "Segoe UI", Roboto, system-ui, sans-serif;

    /* ---------- Form og bloedhed ---------- */
    --rz-border-radius: 12px;
    --rz-card-border-radius: 16px;
    --rz-card-border: 1px solid var(--lp-kant);
    --rz-card-shadow: 0 8px 24px -10px rgba(2, 8, 18, 0.6);
    --rz-button-border-radius: 999px;
    --rz-badge-border-radius: 999px;
    --rz-dialog-border-radius: 18px;
    /* Radzens dialog(titel) bruger base-900, som i VORES omvendte skala er
       naesten hvid - deraf den hvide bjaelke. Peg direkte paa panelfarven. */
    --rz-dialog-background-color: var(--lp-panel);
    --rz-dialog-title-background-color: var(--lp-panel);
    --rz-outline-color: var(--lp-guld);

    /* ---------- Sidebar og menu ---------- */
    --rz-sidebar-width: 214px;
    --rz-sidebar-background-color: var(--lp-panel);
    --rz-sidebar-toggle-hover-border-radius: 10px;
    --rz-header-background-color: transparent;
    /* Menupunkterne maa IKKE male massiv baggrund oven paa glas-panelet
       (Radzens standard er panelfarven + kantlinjer mellem punkterne). */
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-active-background-color: var(--rz-primary-lighter);
    --rz-panel-menu-item-active-color: var(--rz-primary-light);
    --rz-panel-menu-item-hover-background-color: rgba(99, 169, 234, 0.1);
    --rz-panel-menu-icon-color: var(--rz-primary);
    --rz-panel-menu-font-weight: 600;

    /* ---------- Grafer ---------- */
    --rz-series-1: #63a9ea;
    --rz-series-2: #f4c34f;
    --rz-series-3: #f5895f;
    --rz-series-4: #4cc383;
    --rz-series-5: #87c6f1;
    --rz-series-6: #a98fe0;
    --rz-series-7: #4bbcb3;
    --rz-series-8: #ef86ab;
}