/* Lommepenge-temaets faelles "haandvaerk" - deles af lys og moerk variant.
   Farverne kommer fra hver variants :root (--lp-*). Kun CSS: ingen scripts,
   ingen eksterne fonte, ingen billeder ud over smaa inline-SVG-moenstre. */

/* ---------- Himmel-scenen ----------
   HELE scenen (sol/maane, skyer/planeter, moent-moenster og gradienter) males
   EN gang paa body; layout og indhold er transparente, saa alt glas kigger
   ind i den samme baggrund uden dobbelt-tegning. */
body {
    background: var(--lp-baggrund);
    background-attachment: fixed;
}

.rz-layout,
.rz-body {
    background: transparent;
}

/* ---------- Glas: header, sidebar og kort lader himlen skinne igennem ---------- */
.rz-header {
    background: var(--lp-header);
    -webkit-backdrop-filter: blur(var(--lp-blur));
    backdrop-filter: blur(var(--lp-blur));
    border-bottom: 1px solid var(--lp-kant);
    box-shadow: none;
}

.rz-sidebar {
    background: var(--lp-sidebar-bg);
    -webkit-backdrop-filter: blur(var(--lp-blur));
    backdrop-filter: blur(var(--lp-blur));
    border-inline-end: 1px solid var(--lp-kant);
}

.rz-card {
    background-color: var(--lp-kort-bg);
    /* Kun LET sloering paa kort - kraftig blur udvisker moenstret bagved,
       og saa ligner glasset bare massiv farve. */
    -webkit-backdrop-filter: blur(var(--lp-kort-blur));
    backdrop-filter: blur(var(--lp-kort-blur));
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
    .rz-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 30px -12px var(--lp-dyb-skygge);
    }
}

/* Dialoger og dropdown-paneler skal forblive UIGENNEMSIGTIGE (laesbarhed). */
.rz-dialog,
.rz-dropdown-panel,
.rz-popup {
    background-color: var(--lp-panel);
}

/* ---------- App-ikonet som nedtonet vandmaerke i bunden af menuen ----------
   Det RIGTIGE app-ikon (blaa sparegris med guldmoent) - IKKE badge-silhuetten,
   som er en Android-notifikationsmaske (rettet 2026-07-19 efter Ryes oenske). */
.rz-sidebar::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 50%;
    width: 76px;
    height: 76px;
    margin-left: -38px;
    background: url("/icon-192.png") center / contain no-repeat;
    border-radius: 22%;
    opacity: 0.3;
    pointer-events: none;
}

/* Menupunkter som bloede piller; det aktive punkt faar en lille guldmoent. */
.rz-panel-menu .rz-navigation-item-wrapper {
    border-radius: 999px;
    margin: 2px 10px;
    overflow: hidden;
}

.rz-panel-menu .rz-navigation-item-link.active {
    position: relative;
    background-color: var(--rz-primary-lighter);   /* let glas-fremhaevning af aktivt punkt */
}

.rz-panel-menu .rz-navigation-item-link.active::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--lp-guld);
    box-shadow: 0 0 0 2.5px var(--lp-guld-skygge);
    pointer-events: none;
}

/* ---------- Sidebar-toggle: kvadratisk, centreret ikon, bloede hjoerner ----------
   Radzens knap-boks er smallere end ikonet (26px boks, 24px ikon + 13px padding),
   saa ikonet stak skaevt ud af hoejre side. Flex + auto-bredde centrerer det. */
.rz-sidebar-toggle,
.rz-sidebar-toggle:hover,
.rz-sidebar-toggle:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Radzens overflow:hidden lader flex-layoutet KLEMME knappen smallere end
       ikonet (deraf det skaeve udseende) - det maa den ikke. */
    flex: 0 0 auto;
    min-width: max-content;
    width: auto;
    height: auto;
    padding: 0.6rem;
    border-radius: 10px;
    /* Samme glas som resten - ikke en massiv klods. */
    background-color: color-mix(in srgb, var(--rz-primary) 20%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--rz-primary);
}

/* ---------- Knapper: piller med et lille "hop" ---------- */
.rz-button {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.rz-button:not(:disabled):not(.rz-state-disabled):hover {
    transform: translateY(-1px);
}

.rz-button:not(:disabled):not(.rz-state-disabled):active {
    transform: translateY(0);
}

/* Primaerknappen faar en diskret glans, som moenten i ikonet. */
.rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
}

/* ---------- Glas-knapper ----------
   Udfyldte knapper er halvtransparente med sloering, saa de matcher kortene.
   color-mix ignoreres af aeldre browsere -> de falder tilbage til massiv farve. */
.rz-button.rz-variant-filled {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.rz-button.rz-variant-filled.rz-primary {
    background-color: color-mix(in srgb, var(--rz-primary) 45%, transparent);
}

.rz-button.rz-variant-filled.rz-primary:hover {
    background-color: color-mix(in srgb, var(--rz-primary) 68%, transparent);
}

.rz-button.rz-variant-filled.rz-secondary {
    background-color: color-mix(in srgb, var(--rz-secondary) 45%, transparent);
}

.rz-button.rz-variant-filled.rz-secondary:hover {
    background-color: color-mix(in srgb, var(--rz-secondary) 68%, transparent);
}

.rz-button.rz-variant-filled.rz-success {
    background-color: color-mix(in srgb, var(--rz-success) 45%, transparent);
}

.rz-button.rz-variant-filled.rz-success:hover {
    background-color: color-mix(in srgb, var(--rz-success) 68%, transparent);
}

.rz-button.rz-variant-filled.rz-danger {
    background-color: color-mix(in srgb, var(--rz-danger) 45%, transparent);
}

.rz-button.rz-variant-filled.rz-danger:hover {
    background-color: color-mix(in srgb, var(--rz-danger) 68%, transparent);
}

.rz-button.rz-variant-filled.rz-warning {
    background-color: color-mix(in srgb, var(--rz-warning) 50%, transparent);
}

.rz-button.rz-variant-filled.rz-warning:hover {
    background-color: color-mix(in srgb, var(--rz-warning) 72%, transparent);
}

.rz-button.rz-variant-filled.rz-info {
    background-color: color-mix(in srgb, var(--rz-info) 45%, transparent);
}

.rz-button.rz-variant-filled.rz-info:hover {
    background-color: color-mix(in srgb, var(--rz-info) 68%, transparent);
}

/* Lyse/neutrale knapper (fx Log ud, Rediger): samme glas som kortene. */
.rz-button.rz-variant-filled.rz-light,
.rz-button.rz-variant-filled.rz-base {
    background-color: var(--lp-kort-bg);
    border: 1px solid var(--lp-kant);
    color: var(--rz-text-color);
}

.rz-button.rz-variant-filled.rz-light:hover,
.rz-button.rz-variant-filled.rz-base:hover {
    background-color: color-mix(in srgb, var(--lp-kant) 45%, transparent);
    color: var(--rz-text-color);
}

/* ---------- Fremdrift (opsparingsmaal): guld som moenten ---------- */
.rz-progressbar .rz-progressbar-value {
    background: linear-gradient(90deg, var(--lp-guld-moerk), var(--lp-guld) 60%, var(--lp-guld-lys));
    border-radius: 999px;
}

.rz-progressbar {
    border-radius: 999px;
}

/* ---------- Badges som runde maerkater ---------- */
.rz-badge {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Overskrifter med lidt mere personlighed ---------- */
.rz-text-h5,
.rz-text-h6,
.rz-text-subtitle1 {
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* ---------- Dialoger: bloede hjoerner og loeftet skygge ---------- */
.rz-dialog {
    box-shadow: 0 18px 50px -12px var(--lp-dyb-skygge);
}

/* ---------- Daempede tekster ----------
   Appen bruger .rz-color-secondary til "sekundaer/daempet tekst", men Radzens
   utility peger paa TEMA-sekundaerfarven MED !important - koral hos os, saa
   alle captions blev orange. Samme vaaben retur: !important + senere i kaskaden. */
.rz-color-secondary {
    color: var(--rz-text-secondary-color) !important;
}

/* ---------- Tabeller (kontoudtog m.m.): luftige raekker ---------- */
.rz-grid-table th {
    color: var(--rz-text-secondary-color);
    font-weight: 700;
}

/* ---------- Slanke, afrundede scrollbars i temaets farver ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--rz-primary-light);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rz-primary);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}