/* =====================================================================================================
   XL Finans - PresentationLite new design (redesign step 1: shared design)
   -----------------------------------------------------------------------------------------------------
   Loaded only when the new design is on (appSettings "NewDesign", default on - see App_Code/XlfDesign.cs).
   Load order in <head>: style.css, responsive.css, the old theme (responsive-tabs-*.css), the page's own
   styles, THIS FILE, the brand file (brand-*.css).

   White label: this file holds NO brand colours. Every colour that belongs to a brand is a CSS variable
   (--brand, --brand-contrast, --brand-dark, --brand-light, --brand-ring, --nav-bg, --nav-fg, --logo-bg).
   The brand file (AllCssLite/brand-<name>.css) sets them. To re-brand an installation, edit only the
   brand file and the logo (appSettings "logourl", a file in ImagesLite) - exactly like today.

   Scopes:
     body.xlf-nd       - logged-in pages and the debtor page (MastersLite/*.master). Restyles the legacy classes.
     body.xlf-has-nav  - pages with the icon menu (MastersLite/Modules.master).
     body.xlf-public   - the public upload page BilagUpload.aspx (only its own classes are touched).
     .xlf-*            - new components for steps 2-5 (cards, KPI, pills, avatars, progress, table, tabs, buttons).
   ===================================================================================================== */

:root {
    /* Brand - default values; the brand file overrides them */
    --brand: #00678A;
    --brand-contrast: #FFFFFF;
    --brand-dark: color-mix(in srgb, var(--brand) 80%, #000000);
    --brand-light: color-mix(in srgb, var(--brand) 12%, #FFFFFF);
    --brand-ring: color-mix(in srgb, var(--brand) 28%, transparent);
    --nav-bg: var(--brand);
    --nav-fg: rgba(255, 255, 255, 0.85);
    --nav-fg-active: #FFFFFF;
    --nav-active-bg: rgba(255, 255, 255, 0.18);
    --nav-hover-bg: rgba(255, 255, 255, 0.10);
    --logo-bg: #FFFFFF;
    /* Neutral design tokens (shared by all brands) */
    --bg: #F3F5F8;
    --card: #FFFFFF;
    --text: #18202B;
    --muted: #5A6575;
    --line: #DCE1E8;
    --line-soft: #EEF1F5;
    --row-hover: #F7F9FC;
    --link: var(--brand-dark);
    --radius-card: 16px;
    --radius: 10px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.18);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --nav-w: 76px;
    --field-h: 42px;
    /* Status colours (pills, avatars) */
    --ok-bg: #E5F4EC;
    --ok-fg: #11663F;
    --warn-bg: #FDF1E4;
    --warn-fg: #9A4A0B;
    --err-bg: #FDECEC;
    --err-fg: #A61B1B;
    --info-bg: #E8EFFD;
    --info-fg: #1F4FB0;
    --neutral-bg: #EEF1F5;
    --neutral-fg: #3D4757;
    --draft-bg: #F3ECFB;
    --draft-fg: #6B2FB3;
}

/* =====================================================================================================
   1. Page frame
   ===================================================================================================== */
body.xlf-nd {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.xlf-nd input,
body.xlf-nd select,
body.xlf-nd textarea,
body.xlf-nd button {
    font-family: inherit;
}

body.xlf-has-nav {
    padding-left: var(--nav-w);
}

body.xlf-nd .container {
    max-width: none;
    margin: 0;
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
}

/* Pages (Accounting, ImportBookkeeping) switch #mainContainer between 1170px and 100% with inline styles;
   in the new design the content always uses the full width beside the menu. */
body.xlf-nd #mainContainer {
    max-width: none !important;
    padding: 0 36px 32px 36px !important;
}

body.xlf-nd .bodyarea {
    background: none;
    padding-bottom: 0;
    clear: both;
}

/* The page content sits in one white card (steps 2-5 split pages into several cards) */
body.xlf-nd .xlf-page-card {
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 24px;
    min-width: 0;
    box-sizing: border-box;
}

    body.xlf-nd .xlf-page-card::after {
        content: "";
        display: table;
        clear: both;
    }

/* =====================================================================================================
   2. Icon menu (MastersLite/Modules.master, nav.xlf-nav)
   ===================================================================================================== */
.xlf-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--nav-w);
    background: var(--nav-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    box-sizing: border-box;
}

.xlf-nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 44px;
    margin-bottom: 14px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: var(--radius);
    background: var(--logo-bg);
    overflow: hidden;
    flex: 0 0 auto;
}

    .xlf-nav-logo img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.xlf-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--nav-fg) !important;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

    .xlf-nav-item:hover {
        background: var(--nav-hover-bg);
        color: var(--nav-fg-active) !important;
    }

    .xlf-nav-item.active {
        background: var(--nav-active-bg);
        color: var(--nav-fg-active) !important;
    }

    .xlf-nav-item:focus-visible {
        outline: 2px solid var(--nav-fg-active);
        outline-offset: 2px;
    }

    .xlf-nav-item svg {
        width: 22px;
        height: 22px;
        display: block;
    }

/* Name of the menu item: a small dark label to the right of the icon on hover/focus */
.xlf-nav-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #18202B;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 2;
}

.xlf-nav-item:hover .xlf-nav-label,
.xlf-nav-item:focus-visible .xlf-nav-label {
    opacity: 1;
    visibility: visible;
}

.xlf-nav-spacer {
    flex: 1 1 auto;
    min-height: 8px;
}

@media only screen and (max-height: 760px) and (min-width: 768px) {
    .xlf-nav {
        gap: 2px;
        padding: 10px 0;
    }

    .xlf-nav-item {
        width: 42px;
        height: 42px;
    }

    .xlf-nav-logo {
        margin-bottom: 8px;
    }
}

/* =====================================================================================================
   3. Top icons, page header (company - accounting year, title), promo line, footer
   ===================================================================================================== */
body.xlf-nd .xlf-topbar {
    float: right;
    width: auto !important;
    padding: 28px 0 0 0 !important;
    overflow: visible !important;
}

    body.xlf-nd .xlf-topbar .container {
        padding-left: 0;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        gap: 8px;
    }

body.xlf-nd a.iconbut,
body.xlf-nd a.iconbut.iNotification {
    width: 38px;
    height: 38px;
    margin: 0;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 16px;
}

    body.xlf-nd a.iconbut:hover {
        background: var(--row-hover);
        color: var(--brand-dark);
    }

    body.xlf-nd a.iconbut i {
        margin-top: 0;
    }

body.xlf-nd .iNotification .nCount {
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: #DC2626;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

body.xlf-nd .header {
    width: auto;
    border-bottom: 0;
    background: transparent;
    overflow: hidden;
    padding: 28px 0 20px 0;
}

body.xlf-has-nav .header .logo,
body.xlf-has-nav .header .navarea {
    display: none;
}

body.xlf-nd .header .logo {
    margin-top: 0;
}

    body.xlf-nd .header .logo img {
        max-height: 48px;
        width: auto;
    }

body.xlf-nd .logorytarea {
    float: none !important;
    margin: 0;
}

    body.xlf-nd .logorytarea ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

        body.xlf-nd .logorytarea ul li {
            float: none;
            border: 0;
            font-size: 13px;
            line-height: 1.4;
            color: var(--muted);
        }

            body.xlf-nd .logorytarea ul li + li::before {
                content: "\00B7";
                margin-right: 6px;
                color: var(--muted);
            }

            body.xlf-nd .logorytarea ul li a,
            body.xlf-nd .logorytarea .dropbtn {
                padding: 0;
                color: var(--muted);
                background: transparent !important;
                font-size: 13px;
                font-weight: 500;
            }

                body.xlf-nd .logorytarea ul li a:hover,
                body.xlf-nd .logorytarea .dropbtn:hover {
                    color: var(--text);
                }

body.xlf-nd .dropdown-content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    padding: 6px 0;
    min-width: 200px;
}

    body.xlf-nd .dropdown-content a {
        color: var(--text);
        font-size: 14px;
    }

        body.xlf-nd .dropdown-content a:hover {
            background: var(--row-hover);
        }

.xlf-page-title {
    margin: 4px 0 0 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Breadcrumbs repeat the title - hidden; the promo line (Dansk Bilagsservice) and the Ezento logo stay */
body.xlf-nd .firstsecarea {
    padding: 0 0 16px 0;
    overflow: hidden;
}

    body.xlf-nd .firstsecarea ul.breadcrumbs:first-child {
        display: none;
    }

body.xlf-nd .rytcontarea {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    text-align: left;
}

    body.xlf-nd .rytcontarea p {
        flex: 1 1 260px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--muted);
    }

        body.xlf-nd .rytcontarea p img {
            display: none;
        }

    body.xlf-nd .rytcontarea a {
        line-height: 36px;
        font-size: 14px;
        border-radius: var(--radius);
        margin: 0;
        padding: 0 14px;
    }

body.xlf-nd .footer {
    background: transparent;
    border-bottom: 0;
    padding: 24px 0 32px 0;
}

    body.xlf-nd .footer .firstcolumn ul li {
        font-size: 13px;
        line-height: 26px;
    }

        body.xlf-nd .footer .firstcolumn ul li a {
            color: var(--muted);
        }

            body.xlf-nd .footer .firstcolumn ul li a:hover {
                color: var(--text);
            }

    body.xlf-nd .footer .secondcolumn {
        border-color: var(--line);
    }

    body.xlf-nd .footer .thirdcolumn {
        color: var(--muted);
        font-size: 13px;
    }

/* =====================================================================================================
   4. Section headings and tabs
   ===================================================================================================== */
body.xlf-nd #horizontalTab h5,
body.xlf-nd .salgcontarea h5 {
    background: transparent !important;
    color: var(--text);
    text-align: left;
    text-transform: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 16px 0;
    padding: 0;
}

/* responsiveTabs (#horizontalTab): filter pills */
body.xlf-nd ul.r-tabs-nav {
    border-bottom: 0;
    margin-bottom: 20px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.xlf-nd .r-tabs .r-tabs-nav .r-tabs-tab {
    line-height: normal;
    text-transform: none;
    font-size: 13px;
    font-weight: 600;
}

    body.xlf-nd .r-tabs .r-tabs-nav .r-tabs-tab a {
        display: block;
        height: 36px;
        line-height: 34px;
        padding: 0 14px;
        box-sizing: border-box;
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        background: var(--card) !important;
        color: var(--text) !important;
        white-space: nowrap;
    }

        body.xlf-nd .r-tabs .r-tabs-nav .r-tabs-tab a:hover {
            background: var(--row-hover) !important;
        }

body.xlf-nd .r-tabs .r-tabs-nav .r-tabs-state-active a,
body.xlf-nd .r-tabs .r-tabs-nav .r-tabs-state-active a:hover {
    background: var(--brand) !important;
    border-color: var(--brand);
    color: var(--brand-contrast) !important;
}

/* Phone: responsiveTabs shows accordion titles */
body.xlf-nd .r-tabs .r-tabs-accordion-title a {
    display: block;
    line-height: 20px;
    padding: 12px 16px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card) !important;
    color: var(--text) !important;
    font-weight: 600;
}

body.xlf-nd .r-tabs .r-tabs-accordion-title.r-tabs-state-active a {
    background: var(--brand) !important;
    border-color: var(--brand);
    color: var(--brand-contrast) !important;
}

/* The old theme colours EVERY link inside the active panel (".r-tabs .r-tabs-state-active a");
   in the new design plain links are links again. Buttons below set their own colours. */
body.xlf-nd .r-tabs .r-tabs-panel.r-tabs-state-active a {
    background: transparent;
    color: var(--link);
}

/* Tab buttons (div.tab a.tablinks) */
body.xlf-nd div.tab {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    border: 0;
    background: transparent;
    margin-bottom: 16px;
}

    body.xlf-nd div.tab a {
        float: none;
        width: auto;
        min-width: 0;
        height: 36px;
        line-height: 34px;
        padding: 0 14px;
        box-sizing: border-box;
        border: 1px solid var(--line) !important;
        border-radius: var(--radius-pill);
        background: var(--card) !important;
        color: var(--text) !important;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        transition: none;
    }

        body.xlf-nd div.tab a:hover {
            background: var(--row-hover) !important;
        }

        body.xlf-nd div.tab a.active,
        body.xlf-nd div.tab a.active:hover {
            background: var(--brand) !important;
            border-color: var(--brand) !important;
            color: var(--brand-contrast) !important;
        }

body.xlf-nd .tabcontent,
body.xlf-nd .tabAScontent {
    border: 0;
    padding: 6px 0;
}

/* Bottom tabs (.btmtabarea ul li) */
body.xlf-nd .btmtabarea {
    margin-top: 24px;
}

    body.xlf-nd .btmtabarea ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

        body.xlf-nd .btmtabarea ul li {
            float: none;
            line-height: 34px;
            padding: 0 14px;
            border: 1px solid var(--line);
            border-radius: var(--radius-pill);
            background: var(--card);
            font-size: 13px;
            font-weight: 600;
        }

            body.xlf-nd .btmtabarea ul li:hover {
                background-color: var(--row-hover);
                color: var(--text);
            }

            body.xlf-nd .btmtabarea ul li.active {
                background-color: var(--brand);
                border-color: var(--brand);
                color: var(--brand-contrast);
            }

/* Big gaps of the old layout */
body.xlf-nd .btmtabarea01 {
    margin-top: 24px;
}

body.xlf-nd .showtable,
body.xlf-nd .paginationsec {
    margin-top: 16px;
}

/* =====================================================================================================
   5. Fields (42-44 px, 10 px radius, grey border, focus ring in the brand colour)
   ===================================================================================================== */
body.xlf-nd .inputfield,
body.xlf-nd .inputfield1,
body.xlf-nd .inputfield2,
body.xlf-nd .inputfield3,
body.xlf-nd .inputfield11,
body.xlf-nd .selectfield,
body.xlf-nd .selectfield1,
body.xlf-nd .selectfield12,
body.xlf-nd .searchfield1 {
    height: var(--field-h);
    line-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--card);
    color: var(--text);
    font-size: 14px;
}

body.xlf-nd .inputfield0,
body.xlf-nd .inputfield01,
body.xlf-nd .inputfield011,
body.xlf-nd .inputfieldAdv {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
}

body.xlf-nd .inputfield011 {
    font-size: 12px;
}

body.xlf-nd .textarea1,
body.xlf-nd .textarea2,
body.xlf-nd .textareaInv,
body.xlf-nd .inputfieldQues,
body.xlf-nd .btmtabcontarea {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
}

body.xlf-nd select.selectfield,
body.xlf-nd select.selectfield1,
body.xlf-nd select.selectfield12 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}

body.xlf-nd input.calendar {
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6575' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 12px center;
}

body.xlf-nd input.calendarx30 {
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6575' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 8px center;
}

/* Search fields: large, with a search icon */
body.xlf-nd .searchfield {
    height: 44px;
    line-height: 42px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 14px 0 40px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-size: 14px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6575' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 14px center;
}

body.xlf-nd .inputfield:focus,
body.xlf-nd .inputfield0:focus,
body.xlf-nd .inputfield01:focus,
body.xlf-nd .inputfield011:focus,
body.xlf-nd .inputfield1:focus,
body.xlf-nd .inputfield2:focus,
body.xlf-nd .inputfield3:focus,
body.xlf-nd .inputfield11:focus,
body.xlf-nd .selectfield:focus,
body.xlf-nd .selectfield1:focus,
body.xlf-nd .selectfield12:focus,
body.xlf-nd .searchfield:focus,
body.xlf-nd .searchfield1:focus,
body.xlf-nd .textarea1:focus,
body.xlf-nd .textarea2:focus,
body.xlf-nd .textareaInv:focus,
body.xlf-nd .inputfieldQues:focus,
body.xlf-nd .btmtabcontarea:focus,
.xlf-field:focus,
.xlf-search input:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* =====================================================================================================
   6. Buttons: ONE primary (brand colour), the others neutral (white, grey border)
   ===================================================================================================== */
body.xlf-nd .submitbut01,
body.xlf-nd .submitbut02,
body.xlf-nd .submitbut03,
body.xlf-nd .submitbut04,
body.xlf-nd .Dropbox01,
body.xlf-nd a.buttonbut02,
body.xlf-nd a.buttonbutNew02,
body.xlf-nd a.buttonbut06,
body.xlf-nd a.bluebutton,
body.xlf-nd .bluebutton1,
body.xlf-nd .dropdown3 .dropbtn,
body.xlf-nd .rytcontarea a.bluebut,
body.xlf-nd .popupLogoutSwitchFooter button[data-popup-button="Yes"] {
    background: var(--brand) !important;
    color: var(--brand-contrast) !important;
    border: 1px solid var(--brand) !important;
    border-radius: var(--radius);
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}

    body.xlf-nd .submitbut01:hover,
    body.xlf-nd .submitbut02:hover,
    body.xlf-nd .submitbut03:hover,
    body.xlf-nd .submitbut04:hover,
    body.xlf-nd .Dropbox01:hover,
    body.xlf-nd a.buttonbut02:hover,
    body.xlf-nd a.buttonbutNew02:hover,
    body.xlf-nd a.buttonbut06:hover,
    body.xlf-nd a.bluebutton:hover,
    body.xlf-nd .bluebutton1:hover,
    body.xlf-nd .dropdown3 .dropbtn:hover,
    body.xlf-nd .rytcontarea a.bluebut:hover,
    body.xlf-nd .popupLogoutSwitchFooter button[data-popup-button="Yes"]:hover {
        background: var(--brand-dark) !important;
        border-color: var(--brand-dark) !important;
    }

body.xlf-nd .submitbut01,
body.xlf-nd .submitbut02,
body.xlf-nd .Dropbox01,
body.xlf-nd .dropdown3 .dropbtn {
    height: 44px;
    font-size: 14px;
}

body.xlf-nd .submitbut04,
body.xlf-nd .popupLogoutSwitchFooter button {
    height: 34px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

body.xlf-nd a.buttonbut02,
body.xlf-nd a.buttonbutNew02,
body.xlf-nd a.buttonbut06,
body.xlf-nd a.buttonbut03,
body.xlf-nd a.bluebutton,
body.xlf-nd .bluebutton1 {
    line-height: 40px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: var(--radius);
}

/* Neutral buttons. "Opret kreditnota" (Sales: btnAddCreaditNote/btnAddCreaditNoteAll) was red text on a
   blue button - now a neutral button next to the primary "Opret faktura". */
body.xlf-nd a.buttonbut03,
body.xlf-nd a.buttonbut02[id$="btnAddCreaditNote"],
body.xlf-nd a.buttonbut02[id$="btnAddCreaditNoteAll"],
body.xlf-nd .titlesec02 .submitbut01,
body.xlf-nd .titlesec02 input[type="button"],
body.xlf-nd .rytcontarea a.greybut,
body.xlf-nd .popupLogoutSwitchFooter button[data-popup-button="No"],
.xlf-btn-neutral {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    font-weight: 500;
}

    body.xlf-nd a.buttonbut03:hover,
    body.xlf-nd a.buttonbut02[id$="btnAddCreaditNote"]:hover,
    body.xlf-nd a.buttonbut02[id$="btnAddCreaditNoteAll"]:hover,
    body.xlf-nd .titlesec02 .submitbut01:hover,
    body.xlf-nd .titlesec02 input[type="button"]:hover,
    body.xlf-nd .rytcontarea a.greybut:hover,
    body.xlf-nd .popupLogoutSwitchFooter button[data-popup-button="No"]:hover,
    .xlf-btn-neutral:hover {
        background: var(--row-hover) !important;
        border-color: var(--line) !important;
    }

/* Button wrappers that were blue bars (titlesec01 = main action, titlesec02 = cancel/back) */
body.xlf-nd .titlesec01,
body.xlf-nd .titlesec02 {
    background: transparent !important;
    height: auto;
    line-height: normal;
    padding: 0;
    width: 100%;
    margin-top: 16px;
    color: var(--text);
}

body.xlf-nd .submitbut01:focus-visible,
body.xlf-nd .submitbut04:focus-visible,
body.xlf-nd a.buttonbut02:focus-visible,
body.xlf-nd a.buttonbut03:focus-visible,
.xlf-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Print / CSV / PDF links above lists */
body.xlf-nd ul.downloadableicon {
    margin-bottom: 12px;
}

    body.xlf-nd ul.downloadableicon li {
        margin-left: 8px;
    }

        body.xlf-nd ul.downloadableicon li a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: var(--card) !important;
            color: var(--text) !important;
            font-size: 12px;
            font-weight: 500;
        }

            body.xlf-nd ul.downloadableicon li a:hover {
                background: var(--row-hover) !important;
            }

/* Paging */
body.xlf-nd .paginationsec a {
    width: auto;
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm);
    background: var(--card) !important;
    color: var(--text) !important;
    font-size: 13px;
}

    body.xlf-nd .paginationsec a:hover {
        background: var(--row-hover) !important;
    }

    body.xlf-nd .paginationsec a.active,
    body.xlf-nd .paginationsec a.active:hover {
        background: var(--brand) !important;
        border-color: var(--brand) !important;
        color: var(--brand-contrast) !important;
    }

/* =====================================================================================================
   7. Tables (lists built on the server: .showtable, .showtable1, .showtable2, .tablesec)
   ===================================================================================================== */
body.xlf-nd .showtable,
body.xlf-nd .showtable1,
body.xlf-nd .showtable2,
body.xlf-nd .tablescrollformob {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.xlf-nd .tablescrollformob {
    clear: both;
}

body.xlf-nd .showtable table,
body.xlf-nd .showtable1 table,
body.xlf-nd .showtable2 table,
body.xlf-nd table.tablesec,
body.xlf-nd .tablesec table {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
}

    body.xlf-nd .showtable table th,
    body.xlf-nd .showtable1 table th,
    body.xlf-nd .showtable2 table th,
    body.xlf-nd .tablesec th {
        background: var(--row-hover);
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1.3;
        padding: 12px 14px;
        border-left: 0;
        text-align: left;
        vertical-align: bottom;
    }

        body.xlf-nd .showtable table th:first-child,
        body.xlf-nd .showtable2 table th:first-child {
            border-top-left-radius: 12px;
        }

        body.xlf-nd .showtable table th:last-child,
        body.xlf-nd .showtable2 table th:last-child {
            border-top-right-radius: 12px;
        }

        /* Sort links in headers have inline "color:#444444" */
        body.xlf-nd .showtable table th a,
        body.xlf-nd .showtable1 table th a,
        body.xlf-nd .showtable2 table th a,
        body.xlf-nd .tablesec th a {
            color: var(--muted) !important;
            background: none !important;
        }

            body.xlf-nd .showtable table th a:hover,
            body.xlf-nd .showtable2 table th a:hover {
                color: var(--text) !important;
            }

    body.xlf-nd .showtable table td,
    body.xlf-nd .showtable2 table td,
    body.xlf-nd .tablesec td {
        border-top: 1px solid var(--line-soft);
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: 12px 14px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--text);
    }

    body.xlf-nd .showtable1 table th {
        padding: 10px 6px;
    }

    body.xlf-nd .showtable1 table td {
        border-top: 1px solid var(--line-soft);
        padding: 4px 6px;
        font-size: 13px;
        color: var(--text);
    }

body.xlf-nd .showtable table tr:hover td,
body.xlf-nd .showtable2 table tr:hover td {
    background-color: var(--row-hover);
}

body.xlf-nd .trclass:hover td,
body.xlf-nd .trclassExPointer:hover td {
    background: var(--row-hover) !important;
}

/* =====================================================================================================
   8. Popups (master + pages: .popup / .popup-inner*, confirmation box popupLogoutSwitch)
   ===================================================================================================== */
body.xlf-nd .popup {
    background: rgba(16, 24, 40, 0.55);
}

body.xlf-nd .popup-inner,
body.xlf-nd .popup-innerKeyword,
body.xlf-nd .popup-innerMsg,
body.xlf-nd .popup-innerErrorSuccessMsg,
body.xlf-nd .popup-innerMail,
body.xlf-nd .popup-innerDebtorPostingSend,
body.xlf-nd .popup-innerMsgException {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

body.xlf-nd .popup-close {
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 30px;
    box-sizing: border-box;
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
    font-family: var(--font);
    font-size: 16px;
}

    body.xlf-nd .popup-close:hover {
        background: var(--row-hover) !important;
        color: var(--text) !important;
    }

body.xlf-nd .innerpopupLogoutSwitch {
    height: auto;
    overflow: hidden;
}

body.xlf-nd .popupLogoutSwitchHeader,
body.xlf-nd .popupLogoutSwitchHeader h5,
body.xlf-nd .popupLogoutSwitchHeader a {
    background: transparent !important;
    color: var(--text);
}

body.xlf-nd .popupLogoutSwitchHeader {
    border-bottom: 1px solid var(--line-soft);
}

    body.xlf-nd .popupLogoutSwitchHeader h5 {
        text-transform: none;
        font-size: 16px;
        font-weight: 600;
        line-height: 52px;
    }

    body.xlf-nd .popupLogoutSwitchHeader a {
        color: var(--muted);
        font-weight: 600;
        line-height: 52px;
    }

body.xlf-nd .popupLogoutSwitchMiddle {
    height: auto;
    min-height: 60px;
    padding: 20px 20px 16px 20px;
    color: var(--text);
}

body.xlf-nd .popupLogoutSwitchFooter {
    height: auto;
    padding: 12px 16px;
    background: var(--row-hover);
    border-top: 1px solid var(--line-soft);
}

/* =====================================================================================================
   9. DevExpress controls (theme-independent class prefixes): light, brand accent, same radius/font
   ===================================================================================================== */
body.xlf-nd .dxeEditArea,
body.xlf-nd .dxeEditAreaSys,
body.xlf-nd [class*="dxeTextBox_"],
body.xlf-nd [class*="dxeButtonEdit_"],
body.xlf-nd [class*="dxeMemo_"],
body.xlf-nd [class*="dxeListBox_"],
body.xlf-nd [class*="dxbButton_"],
body.xlf-nd [class*="dxpc-"],
body.xlf-nd [class*="dxgvControl_"],
body.xlf-nd [class*="dxucControl_"],
body.xlf-nd [class*="dxucTextBox_"] {
    font-family: var(--font) !important;
}

body.xlf-nd [class*="dxeTextBox_"],
body.xlf-nd [class*="dxeButtonEdit_"],
body.xlf-nd [class*="dxeMemo_"],
body.xlf-nd [class*="dxucTextBox_"] {
    border-color: var(--line) !important;
    border-radius: var(--radius);
    background-color: var(--card);
}

body.xlf-nd [class*="dxeFocused_"] {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-ring);
}

body.xlf-nd [class*="dxeButtonEditButton_"] {
    background-image: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

body.xlf-nd [class*="dxeListBox_"],
body.xlf-nd [class*="dxeDropDownWindow_"] {
    border-color: var(--line) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

body.xlf-nd [class*="dxeListBoxItemSelected_"] {
    background: var(--brand-light) !important;
    color: var(--text) !important;
}

body.xlf-nd [class*="dxeListBoxItemHover_"] {
    background: var(--row-hover) !important;
}

/* ASPxButton: neutral by default */
body.xlf-nd [class*="dxbButton_"] {
    background: var(--card) !important;
    background-image: none !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: none;
}

    body.xlf-nd [class*="dxbButton_"]:hover,
    body.xlf-nd [class*="dxbButtonHover_"] {
        background: var(--row-hover) !important;
    }

/* Popups and loading panel */
body.xlf-nd .dxpc-mainDiv,
body.xlf-nd [class*="dxpcLite_"] .dxpc-mainDiv,
body.xlf-nd [class*="dxdpLite_"] .dxpc-mainDiv {
    border: 0 !important;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop) !important;
    overflow: hidden;
}

body.xlf-nd .dxpc-header {
    background: var(--card) !important;
    background-image: none !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    font-weight: 600;
}

body.xlf-nd [class*="dxlpLoadingPanel_"],
body.xlf-nd [class*="dxlpLoadingPanelWithContent_"] {
    border: 0 !important;
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    background: var(--card) !important;
}

/* Html editor and upload control frames */
body.xlf-nd [class*="dxheControl_"] {
    border-color: var(--line) !important;
}

/* ASPxGridView (not used in PresentationLite today; ready for later steps) */
body.xlf-nd [class*="dxgvControl_"] {
    border: 1px solid var(--line-soft) !important;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
}

body.xlf-nd [class*="dxgvHeader_"] {
    background: var(--row-hover) !important;
    background-image: none !important;
    color: var(--muted) !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-color: var(--line-soft) !important;
}

body.xlf-nd [class*="dxgvDataRow_"] td {
    border-color: var(--line-soft) !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

body.xlf-nd [class*="dxgvFocusedRow_"],
body.xlf-nd [class*="dxgvSelectedRow_"] {
    background: var(--brand-light) !important;
    color: var(--text) !important;
}

body.xlf-nd [class*="dxgvEmptyDataRow_"] {
    color: var(--muted) !important;
}

/* =====================================================================================================
   10. Components for steps 2-5 (use these classes in new markup)
   ===================================================================================================== */
.xlf-card {
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    min-width: 0;
    box-sizing: border-box;
}

.xlf-card-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.xlf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.xlf-context {
    font-size: 13px;
    color: var(--muted);
}

.xlf-kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.xlf-kpi-value {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.xlf-kpi-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.xlf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .xlf-btn:hover {
        background: var(--row-hover);
    }

.xlf-btn-primary,
.xlf-btn.xlf-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
    font-weight: 600;
}

    .xlf-btn-primary:hover,
    .xlf-btn.xlf-btn-primary:hover {
        background: var(--brand-dark);
        border-color: var(--brand-dark);
        color: var(--brand-contrast);
    }

.xlf-field {
    height: var(--field-h);
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.xlf-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

    .xlf-search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        color: var(--text);
    }

    .xlf-search:focus-within {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-ring);
    }

.xlf-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.xlf-tab {
    height: 36px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .xlf-tab.active,
    .xlf-tab[aria-selected="true"] {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--brand-contrast);
    }

.xlf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.xlf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .xlf-table th {
        padding: 12px 16px;
        text-align: left;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .xlf-table td {
        padding: 14px 16px;
        border-top: 1px solid var(--line-soft);
        color: var(--text);
    }

    .xlf-table tbody tr:hover td {
        background: var(--row-hover);
    }

.xlf-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Status pills */
.xlf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    color: var(--neutral-fg);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.xlf-pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
.xlf-pill-warn { background: var(--warn-bg); color: var(--warn-fg); }
.xlf-pill-err { background: var(--err-bg); color: var(--err-fg); }
.xlf-pill-info { background: var(--info-bg); color: var(--info-fg); }
.xlf-pill-draft { background: var(--draft-bg); color: var(--draft-fg); }
.xlf-pill-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.xlf-pill-brand { background: var(--brand-light); color: var(--brand-dark); }

/* Coloured initials */
.xlf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--info-bg);
    color: var(--info-fg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.xlf-avatar-lg { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.xlf-av-1 { background: #E8EFFD; color: #1F4FB0; }
.xlf-av-2 { background: #FDF1E4; color: #9A4A0B; }
.xlf-av-3 { background: #EAF6EF; color: #11663F; }
.xlf-av-4 { background: #F3ECFB; color: #6B2FB3; }
.xlf-av-5 { background: #FDECEC; color: #A61B1B; }
.xlf-av-6 { background: #EEF1F5; color: #3D4757; }

/* Payment bar */
.xlf-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--line-soft);
    overflow: hidden;
}

    .xlf-progress > span {
        display: block;
        height: 100%;
        background: var(--brand);
    }

    .xlf-progress.xlf-progress-ok > span { background: #16A34A; }
    .xlf-progress.xlf-progress-warn > span { background: #F2A65A; }
    .xlf-progress.xlf-progress-err > span { background: #DC2626; }

/* =====================================================================================================
   11. Public upload page (BilagUpload.aspx) - maps its own variables to the brand
   ===================================================================================================== */
body.xlf-public {
    font-family: var(--font);
    --primary: var(--brand);
    --primary-text: var(--brand-contrast);
}

.xlf-public-top {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
}

.xlf-public-logo {
    display: block;
    max-height: 40px;
    max-width: 200px;
    width: auto;
    height: auto;
}

body.xlf-public h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.xlf-public .card {
    border-color: transparent;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

    body.xlf-public .card.focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-ring);
    }

body.xlf-public .btn {
    border-radius: var(--radius);
    border-color: var(--line);
    color: var(--text);
    font-family: inherit;
}

    body.xlf-public .btn.primary {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--brand-contrast);
    }

    body.xlf-public .btn:focus,
    body.xlf-public .btn:focus-within {
        outline-color: var(--brand-ring);
    }

body.xlf-public .banner {
    border-radius: 12px;
}

/* =====================================================================================================
   12. Phone and tablet
   ===================================================================================================== */
@media only screen and (max-width: 1100px) {
    body.xlf-nd .container,
    body.xlf-nd #mainContainer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.xlf-nd .lftsec,
    body.xlf-nd .rytsec {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    /* The icon menu becomes a bar at the top that scrolls sideways */
    body.xlf-has-nav {
        padding-left: 0;
    }

    .xlf-nav {
        position: relative;
        top: auto;
        bottom: auto;
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 4px;
        padding: 8px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .xlf-nav-logo {
        width: auto;
        max-width: 120px;
        height: 40px;
        margin: 0 8px 0 0;
    }

    .xlf-nav-item {
        width: 44px;
        height: 44px;
    }

    .xlf-nav-label,
    .xlf-nav-spacer {
        display: none;
    }

    body.xlf-nd .container,
    body.xlf-nd #mainContainer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.xlf-nd .xlf-topbar {
        float: none;
        width: 100% !important;
        padding: 12px 0 0 0 !important;
    }

        body.xlf-nd .xlf-topbar .container {
            padding-left: 16px;
        }

    body.xlf-nd .header {
        padding: 12px 0 16px 0;
    }

    .xlf-page-title {
        font-size: 22px;
    }

    body.xlf-nd .logorytarea {
        margin-top: 0 !important;
    }

    body.xlf-nd .xlf-page-card {
        padding: 16px;
        border-radius: 12px;
    }

    body.xlf-nd .searchfield {
        width: 100%;
    }

    /* responsiveTabs shows accordion titles instead of the tab row on phones */
    body.xlf-nd ul.r-tabs-nav {
        display: none;
    }

    body.xlf-nd .showtable table th,
    body.xlf-nd .showtable table td,
    body.xlf-nd .showtable2 table th,
    body.xlf-nd .showtable2 table td {
        white-space: nowrap;
    }

    body.xlf-nd .popup-inner,
    body.xlf-nd .popup-innerMail,
    body.xlf-nd .popup-innerKeyword,
    body.xlf-nd .popup-innerDebtorPostingSend {
        width: calc(100vw - 32px) !important;
        padding: 20px;
    }

    body.xlf-nd .footer .firstcolumn,
    body.xlf-nd .footer .secondcolumn,
    body.xlf-nd .footer .thirdcolumn {
        float: none;
        width: auto;
        border: 0;
        padding: 0 0 12px 0;
        text-align: left;
    }
}

/* =====================================================================================================
   13. Oversigt (PresentationLite/Main/Overview.aspx): Overblik (redesign step 3) and the dashboard view (step 2)
   ===================================================================================================== */
:root {
    /* Chart colours: income = the brand colour, expenses = this neutral accent (a brand file may override it) */
    --chart-2: #F2A65A;
}

/* Page actions in the page header (ContentPlaceHolder "NdHeaderActions" of MastersLite/Modules.master) */
.xlf-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

    .xlf-header-actions:empty {
        display: none;
    }

    .xlf-header-actions .xlf-btn {
        text-decoration: none;
    }

    .xlf-header-actions .xlf-btn-neutral {
        color: var(--text);
    }

    .xlf-header-actions .xlf-btn-primary {
        color: var(--brand-contrast);
    }

@media only screen and (min-width: 1101px) {
    body.xlf-nd .header .container {
        position: relative;
    }

    body.xlf-nd .header .xlf-header-actions {
        position: absolute;
        right: 36px;
        bottom: 0;
        margin-top: 0;
    }
}

/* "Overblik | Dashboard" */
.xlf-ov-views {
    margin: 0 0 16px 0;
}

    .xlf-ov-views a.xlf-tab {
        display: inline-flex;
        align-items: center;
        color: var(--text);
        text-decoration: none;
    }

        .xlf-ov-views a.xlf-tab:hover {
            background: var(--row-hover);
        }

        .xlf-ov-views a.xlf-tab.active,
        .xlf-ov-views a.xlf-tab.active:hover {
            background: var(--brand);
            border-color: var(--brand);
            color: var(--brand-contrast);
        }

/* Overblik */
.xlf-ov {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.xlf-ov-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media only screen and (max-width: 1000px) {
    .xlf-ov-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 560px) {
    .xlf-ov-kpis {
        grid-template-columns: 1fr;
    }
}

.xlf-ov-kpi .xlf-kpi-value {
    font-size: 26px;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

.xlf-ov-kpi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    min-height: 28px;
}

.xlf-ov-kpi .xlf-kpi-note {
    margin-top: 6px;
}

.xlf-ov-spark {
    flex: 0 0 auto;
    stroke: var(--muted);
}

.xlf-ov-spark-ok { stroke: #16A34A; }
.xlf-ov-spark-err { stroke: #DC2626; }

.xlf-ov-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 12px;
}

    .xlf-ov-head .xlf-card-title {
        margin: 0;
    }

.xlf-ov-link,
.xlf-ov-link:visited {
    color: var(--link);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .xlf-ov-link:hover {
        color: var(--brand-dark);
        text-decoration: underline;
    }

.xlf-ov-muted {
    margin: 0 0 12px 0;
    color: var(--muted);
    font-size: 13px;
}

.xlf-ov-empty {
    color: var(--muted);
}

/* Income and expenses per month */
.xlf-ov-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--muted);
    font-size: 13px;
}

    .xlf-ov-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.xlf-ov-sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.xlf-ov-sw-1,
.xlf-ov-bar-1 { background: var(--brand); }
.xlf-ov-sw-2,
.xlf-ov-bar-2 { background: var(--chart-2); }

.xlf-ov-chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.xlf-ov-bars {
    display: grid;
    gap: 10px;
    align-items: end;
    height: 220px;
    border-bottom: 1px solid var(--line);
}

.xlf-ov-bar {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
}

    .xlf-ov-bar span {
        display: block;
        width: 40%;
        max-width: 16px;
        border-radius: 4px 4px 0 0;
    }

.xlf-ov-months {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

    .xlf-ov-months span {
        color: var(--muted);
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
    }

/* Lists (customers who owe, bills to pay) and the to-do card */
.xlf-ov-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.xlf-ov-list,
.xlf-ov-todos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xlf-ov-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line-soft);
}

.xlf-ov-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.xlf-ov-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xlf-ov-item-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

    .xlf-ov-item-sub.xlf-ov-late {
        color: var(--err-fg);
        font-weight: 500;
    }

.xlf-ov-item-amount {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xlf-ov-foot {
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.xlf-ov-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--ok-bg);
    color: var(--ok-fg);
    font-size: 14px;
    font-weight: 500;
}

.xlf-ov-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: #FFFFFF;
}

.xlf-ov-todo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--row-hover);
}

    .xlf-ov-todo:last-child {
        margin-bottom: 0;
    }

.xlf-ov-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: var(--radius-pill);
    background: var(--muted);
}

.xlf-ov-dot-err { background: #DC2626; }
.xlf-ov-dot-warn { background: var(--chart-2); }
.xlf-ov-dot-brand { background: var(--brand); }
.xlf-ov-dot-info { background: var(--info-fg); }

.xlf-ov-todo-main {
    flex: 1 1 auto;
    min-width: 0;
}

.xlf-ov-todo-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.xlf-ov-todo-text {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

/* Dashboard view: the ASPxDashboard stays inside the page card (not over the whole window) */
body.xlf-nd #ContentPlaceHolder1_Dashboard {
    max-width: 100%;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    .xlf-ov-lists {
        grid-template-columns: 1fr;
    }

    .xlf-ov-kpi .xlf-kpi-value {
        font-size: 22px;
    }

    .xlf-header-actions .xlf-btn {
        flex: 1 1 auto;
    }
}

/* =====================================================================================================
   14. Salg (PresentationLite/Sales/Sales.aspx): invoice list "Fakturaer" and the invoice form (redesign step 4)
       Markup: App_Code/XlfInvoices.cs (list), Sales.aspx (toolbar), AllJsLite/xlf-invoices.js (form layout).
       The page keeps the shared white page card, so the cards inside it are outlined instead of floating.
   ===================================================================================================== */
.xlf-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Positioned, so .xlf-sr texts inside the horizontally scrolling table do not widen the page */
.xlf-inv,
.xlf-inv-head,
.xlf-inv .xlf-table-wrap,
.xlf-if {
    position: relative;
}

.xlf-inv .xlf-card,
.xlf-if .xlf-card {
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
}

/* Toolbar: search, "Opret kreditnota" (neutral), "Ny faktura" (primary) */
.xlf-inv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 20px;
}

    .xlf-inv-head .xlf-inv-search {
        flex: 1 1 320px;
        max-width: 460px;
        margin: 0;
        color: var(--muted);
        font-weight: 400;
    }

        .xlf-inv-head .xlf-inv-search input[type="search"] {
            height: 40px;
            padding: 0;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
        }

    .xlf-inv-head-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-left: auto;
    }

        .xlf-inv-head-actions .xlf-btn svg {
            flex: 0 0 auto;
        }

/* KPI cards */
.xlf-inv-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.xlf-inv-kpi {
    padding: 18px 20px;
}

.xlf-inv-kpi-err { color: var(--err-fg); }
.xlf-inv-kpi-ok { color: var(--ok-fg); }

/* List card: filter tabs with counts, print/CSV/PDF, table */
.xlf-inv-list {
    padding: 0;
    overflow: hidden;
}

.xlf-inv-listhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
}

    .xlf-inv-listhead .xlf-tab {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .xlf-inv-listhead .xlf-tab:not(.active):hover {
        background: var(--row-hover);
    }

.xlf-inv-count {
    font-weight: 600;
    opacity: 0.85;
}

body.xlf-nd #xlfInvOverview ul.downloadableicon {
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    body.xlf-nd #xlfInvOverview ul.downloadableicon li {
        margin: 0;
        float: none;
    }

.xlf-inv-table {
    min-width: 860px;
}

    .xlf-inv-table th {
        white-space: nowrap;
    }

        .xlf-inv-table th.xlf-num {
            text-align: right;
        }

    .xlf-inv-table td {
        vertical-align: middle;
    }

#xlfInvOverview a.xlf-inv-sort,
#xlfInvOverview a.xlf-inv-sort:hover {
    color: var(--muted) !important;
    background: none !important;
    text-decoration: none;
}

.xlf-inv-sortdir {
    margin-left: 4px;
}

.xlf-inv-no {
    color: var(--muted);
    white-space: nowrap;
}

.xlf-inv-sent {
    margin-right: 6px;
    color: var(--muted);
}

.xlf-inv-type {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.xlf-inv-cust {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.xlf-inv-name {
    font-weight: 500;
}

.xlf-inv-date {
    white-space: nowrap;
}

.xlf-inv-paidcol,
.xlf-inv-paid {
    width: 200px;
    min-width: 160px;
}

.xlf-inv-paidtext {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.xlf-progress.xlf-inv-progress-none > span {
    background: #94A3B8;
}

.xlf-inv-amount {
    font-weight: 600;
    white-space: nowrap;
}

.xlf-inv-actcol,
.xlf-inv-actions {
    text-align: right;
    white-space: nowrap;
}

#xlfInvOverview a.xlf-inv-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: none !important;
    color: var(--muted) !important;
    text-decoration: none;
}

    #xlfInvOverview a.xlf-inv-act:hover,
    #xlfInvOverview a.xlf-inv-act:focus-visible {
        background: var(--line-soft) !important;
        color: var(--text) !important;
    }

.xlf-inv-empty {
    padding: 28px 16px !important;
    text-align: center;
    color: var(--muted) !important;
}

#xlfInvOverview .paginationsec {
    padding: 12px 16px;
    border-top: 1px solid var(--line-soft);
}

/* ---------- Invoice form ("Opret faktura") - #dvAddInvoice gets .xlf-if-on when xlf-invoices.js has re-arranged it */
.xlf-if [hidden] {
    display: none !important;
}

#dvAddInvoice.xlf-if-on > .lftpanel,
#dvAddInvoice.xlf-if-on .btmtabarea01,
#dvAddInvoice.xlf-if-on .botlistarea.xlf-if-moved {
    display: none !important;
}

#dvAddInvoice.xlf-if-on .btmtabarea02 {
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: none;
}

#dvAddInvoice.xlf-if-on a.xlf-if-back,
#dvAddInvoice.xlf-if-on a.xlf-if-back:hover {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--link) !important;
    background: none !important;
    text-decoration: none;
}

body.xlf-nd #dvAddInvoice.xlf-if-on #hInvoice {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.xlf-if {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.xlf-if-main {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xlf-if-summary {
    flex: 1 1 340px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: 16px;
    padding: 22px;
}

.xlf-if label,
.xlf-if .xlf-if-label {
    display: block;
    text-transform: none;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    float: none;
    width: auto;
}

.xlf-if .xlf-if-label {
    margin-bottom: 8px;
}

.xlf-if .inputfield,
.xlf-if .selectfield,
.xlf-if input.calendar {
    padding-left: 12px;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    box-sizing: border-box;
}

.xlf-if-sub {
    font-size: 12px;
    color: var(--muted);
}

/* Customer: one search field, suggestions, the chosen customer, the customer details */
.xlf-if-search {
    height: 48px;
    color: var(--muted);
}

    .xlf-if-search input {
        height: 44px;
        font-size: 15px !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

.xlf-if-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.xlf-if-suggest {
    margin-top: 10px;
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #E6EAF0;
    border-radius: 12px;
    background: var(--card);
}

.xlf-if-sg-group {
    padding: 8px 14px;
    background: #F7F9FC;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

    .xlf-if-sg-item + .xlf-if-sg-group {
        border-top: 1px solid #E6EAF0;
    }

.xlf-if-sg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
}

    .xlf-if-sg-item[aria-selected="true"] {
        background: var(--brand-light);
    }

.xlf-if-sg-text {
    flex: 1 1 auto;
    min-width: 0;
}

.xlf-if-sg-name {
    font-size: 14px;
    font-weight: 500;
}

.xlf-if-sg-action {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--link);
}

.xlf-if-sg-note {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--muted);
}

.xlf-if-sg-sep {
    border-top: 1px solid #E6EAF0;
}

.xlf-if-picked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.xlf-if-picked-text {
    flex: 1 1 200px;
    min-width: 0;
}

.xlf-if-picked-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.xlf-if .xlf-if-change {
    height: 36px;
    font-size: 13px;
}

.xlf-if-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .xlf-if-toggle svg {
        transition: transform 0.15s ease;
    }

    .xlf-if-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

.xlf-if-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

    .xlf-if-details > div:empty {
        display: none;
    }

    .xlf-if-details > div {
        min-width: 0;
    }

    .xlf-if-details .xlf-if-wide {
        grid-column: 1 / -1;
    }

    .xlf-if-details label + input,
    .xlf-if-details label + select {
        margin-bottom: 12px !important;
    }

    .xlf-if-details .xlf-if-field > input:last-child,
    .xlf-if-details .xlf-if-field > select:last-child {
        margin-bottom: 0 !important;
    }

.xlf-if-zipcity {
    display: flex;
    gap: 10px;
}

    .xlf-if-zipcity > div {
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .xlf-if-zipcity > div:first-child {
            flex: 0 0 38%;
        }

        .xlf-if-zipcity > div:last-child {
            flex: 1 1 auto;
            min-width: 0;
        }

/* Dates and payment terms */
.xlf-if-terms-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
    gap: 14px;
}

    .xlf-if-terms-grid #divPayement > .xlf-if-field {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 7px);
    }

        .xlf-if-terms-grid #divPayement > .xlf-if-field + .xlf-if-field {
            margin-left: 14px;
        }

/* Lines: the existing line rows as a table */
.xlf-if-lines {
    padding: 0;
    overflow: hidden;
}

    body.xlf-nd .xlf-if-lines #hInvoice2 {
        margin: 0;
        padding: 18px 22px 8px 22px;
        font-size: 16px;
        font-weight: 600;
    }

#dvAddInvoice.xlf-if-on #box {
    min-width: 720px;
    padding: 0 22px 8px 22px;
    box-sizing: border-box;
    float: none;
    width: auto;
}

#dvAddInvoice.xlf-if-on #box > .toplistarea:first-child,
#dvAddInvoice.xlf-if-on #box #div > div[id^="container_"] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 220px 100px 130px 36px;
    gap: 10px;
    align-items: start;
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 0;
}

#dvAddInvoice.xlf-if-on #box.xlf-if-adv > .toplistarea:first-child,
#dvAddInvoice.xlf-if-on #box.xlf-if-adv #div > div[id^="container_"] {
    grid-template-columns: minmax(200px, 1fr) 220px 100px 130px 110px 36px;
}

#dvAddInvoice.xlf-if-on #box > .toplistarea:first-child {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}

    #dvAddInvoice.xlf-if-on #box > .toplistarea:first-child label {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

#dvAddInvoice.xlf-if-on #box #div > div[id^="container_"] {
    border-top: 1px solid var(--line-soft);
}

    #dvAddInvoice.xlf-if-on #box #div > div[id^="container_"]:first-child {
        border-top: 0;
    }

#dvAddInvoice.xlf-if-on #box .bigfieldarea,
#dvAddInvoice.xlf-if-on #box .smallfieldarea {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    min-width: 0;
}

#dvAddInvoice.xlf-if-on #box #div input[name="stockitem"],
#dvAddInvoice.xlf-if-on #box #div input[name="rebate"],
#dvAddInvoice.xlf-if-on #box #div input[name="Total"],
#dvAddInvoice.xlf-if-on #box #div input[name="Advance"] {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 4px 0 !important;
}

#dvAddInvoice.xlf-if-on #box #div input[name="number"],
#dvAddInvoice.xlf-if-on #box #div input[name="Price"] {
    display: inline-block;
    width: calc(50% - 4px) !important;
    box-sizing: border-box;
    margin: 0 0 4px 0 !important;
    text-align: right;
}

#dvAddInvoice.xlf-if-on #box #div input[name="number"] {
    margin-right: 8px !important;
}

#dvAddInvoice.xlf-if-on #box #div input[name="Total"],
#dvAddInvoice.xlf-if-on #box #div input[name="Advance"] {
    text-align: right;
    font-weight: 600;
    background: #F7F9FC;
}

#dvAddInvoice.xlf-if-on #box #div a[id^="contra_"],
#dvAddInvoice.xlf-if-on #box #div div[id^="commentId_"] {
    color: var(--link) !important;
    background: none !important;
    font-size: 12px !important;
}

#dvAddInvoice.xlf-if-on #box #div label[id^="contraLabel_"] {
    display: inline !important;
    margin: 0;
    font-size: 12px !important;
    font-weight: 400;
    color: var(--muted);
}

#dvAddInvoice.xlf-if-on #box #div i.fa-close {
    padding: 0 !important;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
}

    #dvAddInvoice.xlf-if-on #box #div i.fa-close:hover {
        background: var(--line-soft);
        color: var(--err-fg);
    }

#dvAddInvoice.xlf-if-on #btnNew {
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 22px 18px 22px;
    border-top: 1px solid var(--line-soft);
}

body.xlf-nd #dvAddInvoice.xlf-if-on #btnNew a#submit1 {
    display: inline-flex;
    align-items: center;
    float: none !important;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    border: 1px dashed #B8C2D0 !important;
    border-radius: var(--radius);
    background: var(--card) !important;
    color: var(--link) !important;
    font-weight: 500;
    text-decoration: none;
}

    body.xlf-nd #dvAddInvoice.xlf-if-on #btnNew a#submit1:hover {
        background: var(--row-hover) !important;
    }

/* Summary panel: customer, totals, the existing buttons */
.xlf-if-sumcust {
    display: flex;
    align-items: center;
    gap: 10px;
}

.xlf-if-sumtext {
    min-width: 0;
}

.xlf-if-sumname {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.xlf-if-sep {
    height: 1px;
    background: var(--line-soft);
}

#xlfIfTotals table {
    width: 100% !important;
    float: none !important;
    border-collapse: collapse;
}

#xlfIfTotals td {
    padding: 4px 0;
    border: 0;
    font-size: 14px;
    color: var(--muted);
    background: none;
}

    #xlfIfTotals td + td {
        width: 1%;
        padding-left: 12px;
        color: var(--text);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    #xlfIfTotals td label {
        display: inline;
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
    }

#xlfIfTotals tr:last-child td {
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    color: var(--text);
    font-size: 15px;
    vertical-align: baseline;
}

    #xlfIfTotals tr:last-child td label {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

.xlf-if-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

    .xlf-if-actions .rytpanel {
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body.xlf-nd .xlf-if-actions .titlesec01,
    body.xlf-nd .xlf-if-actions .titlesec02 {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }

    body.xlf-nd .xlf-if-actions input[type="button"] {
        width: 100%;
        height: 44px;
        margin: 0;
        border-radius: 12px;
        background: var(--card) !important;
        color: var(--text) !important;
        border: 1px solid var(--line) !important;
        font-weight: 500 !important;
        font-size: 14px;
    }

        body.xlf-nd .xlf-if-actions input[type="button"]:hover {
            background: var(--row-hover) !important;
        }

    body.xlf-nd .xlf-if-actions #btnSendInvoice {
        height: 48px;
        background: var(--brand) !important;
        border-color: var(--brand) !important;
        color: var(--brand-contrast) !important;
        font-weight: 600 !important;
        font-size: 15px;
    }

        body.xlf-nd .xlf-if-actions #btnSendInvoice:hover {
            background: var(--brand-dark) !important;
            border-color: var(--brand-dark) !important;
        }

    body.xlf-nd .xlf-if-actions a.buttonbutNew02,
    body.xlf-nd .xlf-if-actions a.buttonbutNew02:hover,
    body.xlf-nd .xlf-if-actions .xlf-if-cancel input[type="button"] {
        display: flex;
        align-items: center;
        justify-content: center;
        float: none;
        width: auto;
        height: 40px;
        line-height: normal;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none;
        color: var(--link) !important;
        font-weight: 500 !important;
        text-decoration: none;
    }

    body.xlf-nd .xlf-if-actions .xlf-if-cancel input[type="button"] {
        width: 100%;
        color: var(--muted) !important;
    }

@media only screen and (max-width: 1023px) {
    .xlf-if-summary {
        max-width: none;
        position: static;
    }
}

@media only screen and (max-width: 767px) {
    .xlf-inv-head .xlf-inv-search {
        flex-basis: 100%;
        max-width: none;
    }

    .xlf-inv-head-actions {
        width: 100%;
        margin-left: 0;
    }

        .xlf-inv-head-actions .xlf-btn {
            flex: 1 1 auto;
        }

    .xlf-inv-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .xlf-inv-kpi {
        padding: 14px;
    }

        .xlf-inv-kpi .xlf-kpi-value {
            font-size: 20px;
        }

    .xlf-inv-listhead {
        padding: 12px;
    }

    .xlf-if-terms-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        .xlf-if-terms-grid #divPayement > .xlf-if-field {
            display: block;
            width: auto;
        }

            .xlf-if-terms-grid #divPayement > .xlf-if-field + .xlf-if-field {
                margin: 14px 0 0 0;
            }

    .xlf-if-summary {
        flex-basis: 100%;
        padding: 18px;
    }

    .xlf-if-details {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 340px) {
    .xlf-inv-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================================================
   15. Remaining pages (redesign step 5): Tilbud, Kontakter, Bogfoering (+ Importer / Vis bogfoering),
       Rapporter, Scanning, Opsaetning, Virksomhed, Virksomhedsliste, Profil, Info, POS, DebtorInvoiceAndPosting.
       body.xlf-p5 + body.xlf-pg-[page] come from the masters; .xlf-view, .xlf-tb, .xlf-neutral, .xlf-actcell,
       .xlf-hdr-btn ... are added by AllJsLite/xlf-pages.js (new design only). The pages keep the shared white page
       card, so the cards inside it are outlined (as on Salg, step 4).
   ===================================================================================================== */

/* ---------- Views (a list, a form, a report) as cards ---------- */
body.xlf-p5 .xlf-view {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin: 0 0 20px 0;
    box-sizing: border-box;
    min-width: 0;
}

    body.xlf-p5 .xlf-view::after {
        content: "";
        display: table;
        clear: both;
    }

    body.xlf-p5 .xlf-view:last-child {
        margin-bottom: 0;
    }

body.xlf-p5 .xlf-panel {
    margin-bottom: 0 !important;
}

/* Titles: the first heading of a card sits at the top; the help-video title row is a card title */
body.xlf-p5 .xlf-view > h5:first-child,
body.xlf-p5 .xlf-view > div:first-child h5 {
    margin-top: 0 !important;
}

body.xlf-p5 #horizontalTab .xlf-view h5 {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

    body.xlf-p5 #horizontalTab .xlf-view h5 a.fa-play-circle {
        color: var(--muted) !important;
        font-size: 18px;
    }

/* The help-video title row of a tab (title + play icon) above the cards */
body.xlf-p5 .xlf-panel-title {
    margin: 0 0 12px 0;
}

    body.xlf-p5 #horizontalTab .xlf-panel-title h5 {
        margin: 0 !important;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
    }

/* ---------- Toolbars: search on the left, buttons on the right ---------- */
body.xlf-p5 .xlf-tb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    width: 100% !important;
    overflow: visible !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

    body.xlf-p5 .xlf-tb > .lftsec,
    body.xlf-p5 .xlf-tb > .rytsec,
    body.xlf-p5 .xlf-tb-solo {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        float: none !important;
        width: auto !important;
        max-width: 100%;
        margin: 0;
        padding: 0 !important;
        box-sizing: border-box;
    }

    body.xlf-p5 .xlf-tb > .xlf-tb-search {
        order: -1;
        flex: 1 1 320px;
        max-width: 460px;
    }

    body.xlf-p5 .xlf-tb > .xlf-tb-actions {
        margin-left: auto;
    }

    body.xlf-p5 .xlf-tb > h5 {
        flex: 1 1 100%;
        margin: 0 !important;
    }

    body.xlf-p5 .xlf-tb > .leftpanel {
        float: none;
        width: auto !important;
        margin: 0;
    }

    body.xlf-p5 .xlf-tb > div:not([class]) {
        flex: 0 0 0;
        width: 0;
        height: 0;
        overflow: hidden;
    }

body.xlf-p5 .xlf-tb-solo {
    margin: 0 0 16px 0 !important;
}

    body.xlf-p5 .xlf-tb-solo.xlf-tb-actions {
        justify-content: flex-end;
        width: 100% !important;
    }

    body.xlf-p5 .xlf-tb-solo.xlf-tb-search {
        width: 100% !important;
        max-width: 460px;
    }

body.xlf-p5 .xlf-tb-search .searchfield,
body.xlf-p5 .xlf-tb-search input[type="text"].searchfield {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    box-sizing: border-box;
}

/* A drop-down used as a search field (POS: Kassehistorik): a chevron instead of the search icon */
body.xlf-nd.xlf-p5 select.searchfield {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 34px 0 14px;
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}

body.xlf-p5 .xlf-tb a.buttonbut02,
body.xlf-p5 .xlf-tb a.buttonbutNew02,
body.xlf-p5 .xlf-tb-solo a.buttonbut02,
body.xlf-p5 .xlf-tb-solo a.buttonbutNew02,
body.xlf-p5 .xlf-header-actions a.xlf-hdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none !important;
    height: 44px;
    margin: 0 !important;
    padding: 0 16px;
    box-sizing: border-box;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
}

/* ---------- One primary button: the others are neutral ---------- */
body.xlf-nd.xlf-p5 a.xlf-neutral,
body.xlf-nd.xlf-p5 input.xlf-neutral,
body.xlf-nd.xlf-p5 .titlesec01 input.xlf-neutral,
body.xlf-nd.xlf-p5 .titlesec02 input.xlf-neutral {
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    font-weight: 500;
}

    body.xlf-nd.xlf-p5 a.xlf-neutral:hover,
    body.xlf-nd.xlf-p5 input.xlf-neutral:hover {
        background: var(--row-hover) !important;
        border-color: var(--line) !important;
    }

/* The page's "create" button in the page header (shown only while its list is on the screen) */
body.xlf-p5 .xlf-header-actions a.xlf-hdr-btn {
    padding: 0 18px;
    font-weight: 600;
}

    body.xlf-p5 .xlf-header-actions a.xlf-hdr-btn i.fa {
        font-size: 13px;
    }

body.xlf-p5 .xlf-hdr-off,
body.xlf-p5 .xlf-moved-away {
    display: none !important;
}

/* ---------- Forms: two columns without fixed widths, buttons side by side ---------- */
body.xlf-p5 .leftpanel,
body.xlf-p5 .rightpanel {
    width: calc(50% - 12px);
    max-width: none;
}

body.xlf-p5 .btmtabarea01 {
    margin-top: 8px;
}

/* Old blue bars around single buttons (inline background #00678A, e.g. Bogfoering: "Bogfoer og ny") */
body.xlf-p5 .rytpanel > div[style*="#00678A"],
body.xlf-p5 .lftpanel > div[style*="#00678A"] {
    background: transparent !important;
}

body.xlf-p5 .btmtabarea02 {
    margin-bottom: 20px !important;
}

body.xlf-p5 .xlf-actcell {
    float: left !important;
    width: auto !important;
    min-width: 150px;
    margin: 20px 12px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

    body.xlf-p5 .xlf-actcell .titlesec01,
    body.xlf-p5 .xlf-actcell .titlesec02 {
        width: auto !important;
        margin: 0 !important;
    }

    body.xlf-p5 .xlf-actcell input.submitbut01 {
        width: 100%;
        min-width: 150px;
        padding: 0 20px;
    }

/* ---------- Lists: initials next to names, status pills ---------- */
/* Positioned, so screen-reader texts (.xlf-sr) inside a horizontally scrolling table do not widen the page */
body.xlf-p5 .xlf-view,
body.xlf-p5 .showtable,
body.xlf-p5 .tablescrollformob {
    position: relative;
}

.xlf-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .xlf-name .xlf-avatar {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 11px;
    }

    .xlf-name .xlf-name-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }

body.xlf-p5 .showtable td .xlf-pill {
    vertical-align: middle;
}

/* ---------- Tilbud: key figures and list ---------- */
.xlf-of-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 4px 0 20px 0;
}

body.xlf-p5 .xlf-of-kpi {
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
}

.xlf-of-kpi-err { color: var(--err-fg); }
.xlf-of-kpi-ok { color: var(--ok-fg); }

body.xlf-p5 .xlf-of-list {
    margin-top: 0;
}

body.xlf-p5 .showtable table.xlf-of-table th a {
    color: inherit !important;
    background: none !important;
}

body.xlf-p5 .xlf-of-table .xlf-of-no {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

body.xlf-p5 .xlf-of-table .xlf-of-sent {
    margin-left: 6px;
    color: var(--muted);
}

body.xlf-p5 .xlf-of-table .xlf-of-note {
    max-width: 280px;
    color: var(--muted);
}

body.xlf-p5 .xlf-of-table td.xlf-num {
    font-weight: 600;
    white-space: nowrap;
}

body.xlf-p5 .xlf-of-table td.xlf-of-act,
body.xlf-p5 .xlf-of-table td[style*="width:10px"] {
    width: 1%;
    padding-left: 2px;
    padding-right: 2px;
}

body.xlf-p5 .xlf-of-table td.xlf-of-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
}

/* ---------- Tilbud: the offer form in cards (AllJsLite/xlf-pages.js) ---------- */
body.xlf-nd #divAddEditDebtorOffer.xlf-of-on > h5 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
}

#divAddEditDebtorOffer.xlf-of-on .xlf-of-rest,
#divAddEditDebtorOffer.xlf-of-on .xlf-of-empty {
    display: none !important;
}

.xlf-of-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

    .xlf-of-grid > div {
        min-width: 0;
    }

    .xlf-of-grid .xlf-of-wide {
        grid-column: 1 / -1;
    }

.xlf-of-zipcity {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr);
    gap: 12px;
}

    .xlf-of-zipcity > div {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

#divAddEditDebtorOffer.xlf-of-on .xlf-of-cvr {
    float: none !important;
    width: auto !important;
    margin: 0 0 14px 0;
    padding: 0 !important;
}

#divAddEditDebtorOffer.xlf-of-on .xlf-if-lines .xlf-card-title {
    margin: 0;
    padding: 18px 22px 8px 22px;
}

#divAddEditDebtorOffer.xlf-of-on .xlf-if-summary .xlf-card-title {
    margin-bottom: 4px;
}

#divAddEditDebtorOffer.xlf-if-on #box > .toplistarea:first-child > div[id] {
    grid-column: 1 / -1;
    height: 0;
}

#divAddEditDebtorOffer.xlf-if-on .xlf-if-actions > a#btnPreview,
#divAddEditDebtorOffer.xlf-if-on .xlf-if-actions > a[id$="_btnPreview"] {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: transparent !important;
    border: 0 !important;
    color: var(--link) !important;
    font-weight: 500;
}

    #divAddEditDebtorOffer.xlf-if-on .xlf-if-actions > a#btnPreview:hover,
    #divAddEditDebtorOffer.xlf-if-on .xlf-if-actions > a[id$="_btnPreview"]:hover {
        text-decoration: underline;
    }

/* The existing line rows as a table (the same rules as the invoice form of step 4, for #divAddEditDebtorOffer) */
#divAddEditDebtorOffer.xlf-if-on #box {
    min-width: 720px;
    padding: 0 22px 8px 22px;
    box-sizing: border-box;
    float: none;
    width: auto;
}
#divAddEditDebtorOffer.xlf-if-on #box > .toplistarea:first-child,
#divAddEditDebtorOffer.xlf-if-on #box #div > div[id^="container_"] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 220px 100px 130px 36px;
    gap: 10px;
    align-items: start;
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 0;
}
#divAddEditDebtorOffer.xlf-if-on #box.xlf-if-adv > .toplistarea:first-child,
#divAddEditDebtorOffer.xlf-if-on #box.xlf-if-adv #div > div[id^="container_"] {
    grid-template-columns: minmax(200px, 1fr) 220px 100px 130px 110px 36px;
}
#divAddEditDebtorOffer.xlf-if-on #box > .toplistarea:first-child {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
}
#divAddEditDebtorOffer.xlf-if-on #box > .toplistarea:first-child label {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
#divAddEditDebtorOffer.xlf-if-on #box #div > div[id^="container_"] {
    border-top: 1px solid var(--line-soft);
}
#divAddEditDebtorOffer.xlf-if-on #box #div > div[id^="container_"]:first-child {
        border-top: 0;
    }
#divAddEditDebtorOffer.xlf-if-on #box .bigfieldarea,
#divAddEditDebtorOffer.xlf-if-on #box .smallfieldarea {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    min-width: 0;
}
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="stockitem"],
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="rebate"],
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="Total"],
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="Advance"] {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 4px 0 !important;
}
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="number"],
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="Price"] {
    display: inline-block;
    width: calc(50% - 4px) !important;
    box-sizing: border-box;
    margin: 0 0 4px 0 !important;
    text-align: right;
}
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="number"] {
    margin-right: 8px !important;
}
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="Total"],
#divAddEditDebtorOffer.xlf-if-on #box #div input[name="Advance"] {
    text-align: right;
    font-weight: 600;
    background: #F7F9FC;
}
#divAddEditDebtorOffer.xlf-if-on #box #div a[id^="contra_"],
#divAddEditDebtorOffer.xlf-if-on #box #div div[id^="commentId_"] {
    color: var(--link) !important;
    background: none !important;
    font-size: 12px !important;
}
#divAddEditDebtorOffer.xlf-if-on #box #div label[id^="contraLabel_"] {
    display: inline !important;
    margin: 0;
    font-size: 12px !important;
    font-weight: 400;
    color: var(--muted);
}
#divAddEditDebtorOffer.xlf-if-on #box #div i.fa-close {
    padding: 0 !important;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
}
#divAddEditDebtorOffer.xlf-if-on #box #div i.fa-close:hover {
        background: var(--line-soft);
        color: var(--err-fg);
    }
#divAddEditDebtorOffer.xlf-if-on .xlf-of-addline {
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 22px 18px 22px;
    border-top: 1px solid var(--line-soft);
}
body.xlf-nd #divAddEditDebtorOffer.xlf-if-on .xlf-of-addline a#submit1 {
    display: inline-flex;
    align-items: center;
    float: none !important;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    border: 1px dashed #B8C2D0 !important;
    border-radius: var(--radius);
    background: var(--card) !important;
    color: var(--link) !important;
    font-weight: 500;
    text-decoration: none;
}
body.xlf-nd #divAddEditDebtorOffer.xlf-if-on .xlf-of-addline a#submit1:hover {
        background: var(--row-hover) !important;
    }

/* ---------- Rapporter: report filter in a card, the report in its own card ---------- */
body.xlf-p5 table.xlf-rpt-filter {
    display: table;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    padding: 16px 20px !important;
}

    body.xlf-p5 table.xlf-rpt-filter > tbody > tr > td {
        vertical-align: top;
    }

    body.xlf-p5 table.xlf-rpt-filter table td {
        padding-bottom: 8px !important;
    }

    body.xlf-p5 table.xlf-rpt-filter input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0 6px 0 0;
        vertical-align: -3px;
        accent-color: var(--brand);
    }

    body.xlf-p5 table.xlf-rpt-filter td[align="right"] a.buttonbut02 {
        display: inline-flex;
        align-items: center;
        height: 44px;
        margin-top: 10px;
        float: none;
    }

body.xlf-p5 .xlf-rpt-result {
    overflow-x: auto;
}

    body.xlf-p5 .xlf-rpt-result .showtable {
        margin-top: 0;
    }

/* Report rows: no light-blue / light-green backgrounds; headings and sums by weight and lines */
body.xlf-p5 .trAccountTypeHeading td {
    background: #F7F9FC !important;
    font-weight: 600 !important;
}

body.xlf-p5 .trAccountTypeTotalFrom td {
    font-weight: 600 !important;
    font-style: normal;
}

body.xlf-p5 .trAccountTypeTotalInterval td {
    background: none !important;
    font-weight: 700 !important;
    border-top: 1px solid var(--line) !important;
}

body.xlf-p5 .trAccountTypePageBreak td {
    background: none !important;
    font-size: inherit;
    font-weight: 600 !important;
    border-top: 2px solid var(--line) !important;
}

/* ---------- POS: the sub menu of "Luk kasse" / "Kassehistorik" (.navarea1) as pill tabs ---------- */
body.xlf-p5 .navarea1 {
    margin: 16px 0 !important;
}

    body.xlf-p5 .navarea1 ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding: 0;
        border-bottom: 0 !important;
    }

        body.xlf-p5 .navarea1 ul li {
            display: block;
            margin: 0;
            line-height: normal !important;
            font-size: 13px !important;
            text-transform: none !important;
        }

    body.xlf-p5 .navarea1 a.closureA {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 14px;
        box-sizing: border-box;
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        background: var(--card) !important;
        color: var(--text) !important;
        font-weight: 600;
        cursor: pointer;
    }

        body.xlf-p5 .navarea1 a.closureA:hover {
            background: var(--row-hover) !important;
            color: var(--text) !important;
        }

        body.xlf-p5 .navarea1 a.closureA.aactive,
        body.xlf-p5 .navarea1 a.closureA.aactive:hover {
            background: var(--brand) !important;
            border-color: var(--brand);
            color: var(--brand-contrast) !important;
        }

/* ---------- Pages without tabs (Vis bogfoering) ---------- */
body.xlf-p5 #horizontalTab.xlf-notabs > div > h5[style] {
    margin-top: 0 !important;
}

/* ---------- Tablet / phone ---------- */
@media only screen and (max-width: 1023px) {
    body.xlf-p5 .leftpanel,
    body.xlf-p5 .rightpanel {
        width: calc(50% - 8px);
    }
}

@media only screen and (max-width: 767px) {
    body.xlf-p5 .xlf-view {
        padding: 16px;
        border-radius: 14px;
        overflow-x: auto;
    }

    body.xlf-p5 .leftpanel,
    body.xlf-p5 .rightpanel,
    body.xlf-p5 .lftpanel,
    body.xlf-p5 .rytpanel,
    body.xlf-p5 .lftpartInvoice,
    body.xlf-p5 .rytpartInvoice,
    body.xlf-p5 .lftsec,
    body.xlf-p5 .rytsec,
    body.xlf-p5 #divOpenRegisterGridLeft,
    body.xlf-p5 #divOpenRegisterGridRigth,
    body.xlf-p5 #paySALESSUMMARYLeft,
    body.xlf-p5 #paySALESSUMMARYRight {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.xlf-p5 .xlf-tb > .xlf-tb-search,
    body.xlf-p5 .xlf-tb-solo.xlf-tb-search {
        flex-basis: 100%;
        max-width: none;
    }

    body.xlf-p5 .xlf-tb > .xlf-tb-actions {
        margin-left: 0;
    }

    body.xlf-p5 .xlf-actcell {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    body.xlf-p5 .xlf-of-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.xlf-p5 .xlf-of-kpi {
        padding: 14px;
    }

        body.xlf-p5 .xlf-of-kpi .xlf-kpi-value {
            font-size: 18px;
        }

    body.xlf-p5 table.xlf-rpt-filter,
    body.xlf-p5 table.xlf-rpt-filter > tbody,
    body.xlf-p5 table.xlf-rpt-filter > tbody > tr,
    body.xlf-p5 table.xlf-rpt-filter > tbody > tr > td {
        display: block;
        width: auto !important;
        text-align: left;
    }

        body.xlf-p5 table.xlf-rpt-filter input.selectfield {
            width: 100% !important;
            box-sizing: border-box;
        }

    body.xlf-p5 .xlf-view img,
    body.xlf-p5 .xlf-view iframe {
        max-width: 100%;
    }

    .xlf-of-zipcity {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================================================
   16. Login (LoginNew.aspx) and new password (resetpassword.aspx) - redesign step 5, group 6.
       body.xlf-nd.xlf-login (+ .xlf-reset) is set by the pages only when the new design is on. A centered card on
       the light grey page: logo, title, fields with the brand focus ring, ONE primary button, neutral links.
   ===================================================================================================== */
body.xlf-login {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    font-family: var(--font);
}

    body.xlf-login form {
        margin: 0;
    }

    body.xlf-login .flex-container {
        min-height: 100vh;
        height: auto;
        padding: 32px 16px;
        box-sizing: border-box;
        margin-top: 0 !important;
        align-items: center;
        justify-content: center;
    }

    /* The card */
    body.xlf-login .greenbox {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 440px !important;
        border: 0 !important;
        border-radius: var(--radius-card) !important;
        background: var(--card) !important;
        box-shadow: var(--shadow-pop) !important;
        color: var(--text) !important;
        font: 14px/1.45 var(--font) !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Old blue header bar and old title: replaced by the logo and the title of the new design */
    body.xlf-login .greenbox > .dxpc-header,
    body.xlf-login .greenbox h1.heading-3,
    body.xlf-reset .dxpc-mainDiv .dxpc-header {
        display: none !important;
    }

.xlf-login-brand {
    padding: 32px 32px 0 32px;
    text-align: center;
}

    .xlf-login-brand .xlf-login-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 220px;
        min-height: 56px;
        padding: 10px 16px;
        border-radius: 14px;
        background: var(--logo-bg, #FFFFFF);
        box-sizing: border-box;
    }

        .xlf-login-brand .xlf-login-logo img {
            display: block;
            max-width: 100%;
            max-height: 48px;
        }

    .xlf-login-brand h1 {
        margin: 20px 0 0 0;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text);
    }

body.xlf-login .greenbox .widget-block {
    padding: 6px 32px 0 32px !important;
    font: inherit !important;
    text-align: center;
}

    body.xlf-login .greenbox .widget-block p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

/* The form table: label above field, full width */
body.xlf-login table.edit-form {
    display: block;
    width: auto;
    margin: 0;
    padding: 20px 32px 28px 32px;
    border: 0;
    box-sizing: border-box;
}

    body.xlf-login table.edit-form > tbody {
        display: block;
    }

        body.xlf-login table.edit-form > tbody > tr {
            display: block;
            margin-bottom: 14px;
        }

            body.xlf-login table.edit-form > tbody > tr > td {
                display: block;
                width: auto !important;
                padding: 0;
                border: 0;
                text-align: left;
            }

    body.xlf-login table.edit-form [class*="dxeBase_"],
    body.xlf-login table.edit-form label,
    body.xlf-login table.edit-form td > span {
        display: block;
        margin-bottom: 6px;
        font: 600 13px/1.4 var(--font) !important;
        color: var(--text) !important;
    }

    /* Fields */
    body.xlf-login [class*="dxeTextBox_"] {
        width: 100% !important;
        height: 46px;
        border: 1px solid var(--line) !important;
        border-radius: var(--radius) !important;
        background: var(--card) !important;
        box-sizing: border-box;
    }

        body.xlf-login [class*="dxeTextBox_"] td {
            width: 100%;
            padding: 0 !important;
            border: 0 !important;
        }

        body.xlf-login [class*="dxeTextBox_"] input {
            width: 100% !important;
            border: 0 !important;
            outline: 0;
            box-shadow: none !important;
            height: 42px;
            padding: 0 12px !important;
            font: 15px var(--font) !important;
            color: var(--text) !important;
            background: transparent !important;
            box-sizing: border-box;
        }

    body.xlf-login [class*="dxeFocused_"] {
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px var(--brand-ring);
    }

    /* Message (wrong password, reset mail sent, ...) */
    body.xlf-login #divMsg:empty,
    body.xlf-login [id$="_divMsg"]:empty {
        display: none;
    }

    body.xlf-login #divMsg,
    body.xlf-login [id$="_divMsg"] {
        padding: 10px 12px;
        border-radius: var(--radius);
        background: var(--warn-bg);
        color: var(--warn-fg);
        font-size: 13px;
        font-weight: 500;
    }

    /* Last row: the primary button on top (full width), the "forgot password" / "log in" link below it */
    body.xlf-login table.edit-form > tbody > tr:last-child {
        display: flex;
        flex-direction: column-reverse;
        gap: 14px;
        margin: 20px 0 0 0;
    }

        body.xlf-login table.edit-form > tbody > tr:last-child > td {
            text-align: center;
        }

    /* ONE primary button: Log paa / Indsend */
    body.xlf-login #btnLogin,
    body.xlf-login [id$="_btnLogin"] {
        display: block;
        width: 100% !important;
        height: 48px;
        border: 1px solid var(--brand) !important;
        border-radius: 12px !important;
        background: var(--brand) !important;
        background-image: none !important;
        color: var(--brand-contrast) !important;
        box-shadow: none !important;
        cursor: pointer;
        box-sizing: border-box;
    }

        body.xlf-login #btnLogin:hover,
        body.xlf-login [id$="_btnLogin"]:hover {
            background: var(--brand-dark) !important;
            border-color: var(--brand-dark) !important;
        }

        body.xlf-login #btnLogin *,
        body.xlf-login [id$="_btnLogin"] * {
            color: var(--brand-contrast) !important;
            background: transparent !important;
            border: 0 !important;
            font: 600 15px/46px var(--font) !important;
            padding: 0 !important;
        }

    /* Links: neutral */
    body.xlf-login a.pointer,
    body.xlf-login [class*="dxeHyperlink_"] {
        color: var(--link) !important;
        font: 500 14px var(--font) !important;
        text-decoration: none;
        cursor: pointer;
    }

        body.xlf-login a.pointer:hover,
        body.xlf-login [class*="dxeHyperlink_"]:hover {
            text-decoration: underline;
        }

    /* Forgot password popup */
    body.xlf-login #PopUpOpenForgotPassword_PW-1 .dxpc-content,
    body.xlf-login .dxpc-content {
        font: 14px/1.45 var(--font);
        color: var(--text);
    }

/* New password (resetpassword.aspx): the DevExpress popup (positioned by DevExpress, so its width stays) as the card */
body.xlf-reset .dxpc-mainDiv {
    max-width: calc(100vw - 32px);
    border: 0 !important;
    border-radius: var(--radius-card) !important;
    background: var(--card) !important;
    box-shadow: var(--shadow-pop) !important;
    color: var(--text) !important;
    font: 14px/1.45 var(--font) !important;
    overflow: hidden;
}

/* New password (resetpassword.aspx): the DevExpress popup on the light grey page */
body.xlf-reset [class*="dxpcModalBackground"],
body.xlf-reset .dxpc-modalBackground {
    background: var(--bg) !important;
    opacity: 1 !important;
    filter: none !important;
}

body.xlf-reset .dxpc-content {
    padding: 0 !important;
}

body.xlf-reset .widget-block {
    padding: 6px 32px 0 32px;
    text-align: center;
}

    body.xlf-reset .widget-block h1.heading-3 {
        margin: 16px 0 0 0;
        font: 700 24px/1.3 var(--font);
        color: var(--text);
    }

@media only screen and (max-width: 480px) {
    body.xlf-login .flex-container {
        padding: 16px;
        align-items: flex-start;
    }

    .xlf-login-brand {
        padding: 24px 20px 0 20px;
    }

    body.xlf-login .greenbox .widget-block,
    body.xlf-reset .widget-block {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.xlf-login table.edit-form {
        padding: 18px 20px 22px 20px;
    }
}

/* =====================================================================================================
   17. Dashboard (DevExpress ASPxDashboard) on Oversigt: PresentationLite/Main/Overview.aspx?view=dashboard
       Server side: App_Code/XlfDashboardStyle.cs (colour scheme "light", brand palette) - new design only.
       The dashboard is in the page without the white page card (Context.Items["XlfPlainContent"]), so every
       dashboard item becomes a white card on the grey page.
       DevExpress class names: dx-dashboard-* / dx-layout-* / dx-flex-card-* (Web Dashboard client) and dx-datagrid-*,
       dxc-* (DevExtreme 26.1.6). After a DevExpress upgrade check this section first (see the dashboard report).
       Layout note: DevExpress sets the size of each item container in pixels (wrapper size - 6 px, 3 px margin), so
       margins/paddings of the containers must NOT be changed (the items would overlap). The wider gap between the
       cards is drawn by clipping each card 5 px inside its box (clip-path), which changes no size.
   ===================================================================================================== */
body.xlf-nd #ContentPlaceHolder1_Dashboard {
    margin-top: 4px;
    font-family: var(--font);
}

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-widget-container,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-loading-container,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-container,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-viewer,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-layout-container {
        background: transparent;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-widget {
        font-family: var(--font);
        color: var(--text);
    }

    /* Items: white cards with 16 px corners and a 16 px gap (3 + 3 px DevExpress margin + 2 x 5 px clip) */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-layout-item-wrapper > .dx-layout-item-container {
        background-color: var(--card);
        border-radius: 21px;
        box-shadow: inset 0 0 0 6px var(--line-soft);
        -webkit-clip-path: inset(5px round 16px);
        clip-path: inset(5px round 16px);
    }

    /* Groups and tab containers (and the items inside them) keep the DevExpress arrangement, only softer */
    body.xlf-nd #ContentPlaceHolder1_Dashboard dx-dashboard-layout-group .dx-layout-item-container,
    body.xlf-nd #ContentPlaceHolder1_Dashboard dx-dashboard-layout-tab-container .dx-layout-item-container,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-tabs-container {
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
        -webkit-clip-path: none;
        clip-path: none;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard dx-dashboard-layout-group .dx-layout-group .dx-layout-item-container,
    body.xlf-nd #ContentPlaceHolder1_Dashboard dx-dashboard-layout-tab-container .dx-layout-group .dx-layout-item-container {
        box-shadow: none;
        border-radius: 0;
    }

    /* Transparent items (no background in the designer) stay transparent */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-layout-item-wrapper > .dx-layout-item-container.dx-layout-item-container-transparent {
        background-color: transparent;
        box-shadow: none;
        -webkit-clip-path: none;
        clip-path: none;
    }

    /* Dashboard title bar (title + export / parameters buttons): subtle, on the page background */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar {
        background-color: transparent;
        padding-top: 0;
        padding-bottom: 2px;
    }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-toolbar-item,
        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-button-text {
            font-family: var(--font);
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
        }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-toolbar-before .dx-toolbar-item:first-child {
            padding-left: 6px;
        }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .filter-text {
            color: var(--link);
            font-weight: 500;
        }

    /* Item captions: the card-title style of the site (16 px, 600, dark), no line under the caption */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar {
        background-color: transparent;
        font-family: var(--font);
    }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar.dx-dashboard-caption-toolbar-border {
            border-bottom: 0;
        }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-toolbar-before .dx-toolbar-item,
        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-toolbar-before .dx-toolbar-label {
            font-family: var(--font);
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-toolbar-before .dx-toolbar-item:first-child {
            padding-left: 20px;
        }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-toolbar-after .dx-toolbar-item:last-child {
            padding-right: 14px;
        }

    /* Toolbar icons (export, maximize, clear filter ...): grey, brand colour when active */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-button svg use,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-button svg use {
        color: var(--muted);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-button.dx-state-hover svg use,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-button.dx-state-hover svg use,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-button.dx-dashboard-checked svg use,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-button.dx-dashboard-checked svg use,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-button.dx-dashboard-filter:not(.dx-state-hover):not(.dx-state-focused) svg use,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-title-toolbar .dx-button.dx-dashboard-filter:not(.dx-state-hover):not(.dx-state-focused) svg use {
        color: var(--brand);
    }

    /* Grids: light rows, no column lines, small uppercase grey headers */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid {
        background-color: transparent;
        color: var(--text);
        font-family: var(--font);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-borders > .dx-datagrid-headers,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-borders > .dx-datagrid-rowsview,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-borders > .dx-datagrid-total-footer {
        border-left: 0;
        border-right: 0;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-headers {
        color: var(--muted);
        border-bottom: 1px solid var(--line);
        background-color: transparent;
    }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-headers .dx-header-row > td {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--muted);
            border-bottom: 0;
        }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid .dx-column-lines > td {
        border-left: 0;
        border-right: 0;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-row-lines > td,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-row.dx-data-row > td {
        border-bottom: 1px solid var(--line-soft);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-data-row > td {
        font-size: 13px;
        color: var(--text);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-row-alt > td {
        background-color: transparent;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection) > td {
        background-color: var(--row-hover);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-headers .dx-header-row > td:first-child,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-data-row > td:first-child {
        padding-left: 18px;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-headers .dx-header-row > td:last-child,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-rowsview .dx-data-row > td:last-child {
        padding-right: 18px;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-datagrid-nodata {
        color: var(--muted);
        font-size: 13px;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-viewer .dx-datagrid-rowsview a {
        color: var(--link);
    }

    /* Charts: soft grid lines and axes, grey axis labels, Inter */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-val-grid path,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-arg-grid path {
        stroke: var(--line-soft);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-val-line path,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-arg-line path {
        stroke: var(--line);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-val-elements text,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-arg-elements text,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-val-title text,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-arg-title text {
        fill: var(--muted) !important;
        font-family: var(--font) !important;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-legend text,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dxc-title text {
        fill: var(--text) !important;
        font-family: var(--font) !important;
    }

    /* Card items: every card a white card with a coloured delta (green = good, red = bad) */
    @supports selector(:has(*)) {
        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-layout-item-wrapper > .dx-layout-item-container:has(.dx-flex-card-layout) {
            background-color: transparent;
            box-shadow: none;
            -webkit-clip-path: none;
            clip-path: none;
        }
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-widget-viewer-container .dx-flex-card-layout,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-layout-item-container .dx-dashboard-card-without-background .dx-flex-card-layout {
        background-color: var(--card);
        border: 0;
        border-radius: 17px;
        box-shadow: inset 0 0 0 4px var(--line-soft);
        -webkit-clip-path: inset(3px round 14px);
        clip-path: inset(3px round 14px);
    }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-widget-viewer-container .dx-flex-card-layout.dx-hovered-viewer-item {
            background-color: var(--row-hover);
        }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-widget-viewer-container .dx-cardItem {
        border: 1px solid var(--line-soft);
        border-radius: 14px;
        box-shadow: var(--shadow);
    }

        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-widget-viewer-container .dx-cardItem .dx-card-title,
        body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-widget-viewer-container .dx-cardItem span {
            font-family: var(--font);
        }

    /* Card texts in Inter. The same font for DevExpress' hidden measuring containers, so the texts fit as measured. */
    body.xlf-nd .dx-flex-card-layout-row-element,
    body.xlf-nd #dx-card-item-hidden-container,
    body.xlf-nd #dx-card-item-nowrap-hidden-container {
        font-family: var(--font) !important;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-carditem-positive-color {
        color: #16A34A;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-carditem-negative-color {
        color: #DC2626;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-carditem-warning-color {
        color: #D97706;
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-carditem-none-color,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-carditem-default-color {
        color: var(--muted);
    }

    /* Messages inside items ("Ingen data", loading) */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-item-container .dx-layout-item-loading,
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-item-container .dx-layout-item-empty {
        color: var(--muted);
        font-family: var(--font);
    }

    /* Popups of the dashboard (export dialog, parameters, data inspector): rounded, brand buttons and focus */
    body.xlf-nd .dx-dashboard-widget-container .dx-popup-wrapper > .dx-overlay-content {
        border-radius: 16px;
        border: 0;
        box-shadow: var(--shadow-pop);
        font-family: var(--font);
    }

    body.xlf-nd .dx-dashboard-widget-container .dx-popup-title.dx-toolbar {
        border-bottom-color: var(--line-soft);
        font-family: var(--font);
        font-weight: 600;
    }

    body.xlf-nd .dx-dashboard-widget-container .dx-button-mode-contained.dx-button-default {
        background-color: var(--brand);
        color: var(--brand-contrast);
        border-radius: var(--radius);
    }

        body.xlf-nd .dx-dashboard-widget-container .dx-button-mode-contained.dx-button-default.dx-state-hover {
            background-color: var(--brand-dark);
        }

    body.xlf-nd .dx-dashboard-widget-container .dx-checkbox-checked .dx-checkbox-icon {
        background-color: var(--brand);
        border-color: var(--brand);
    }

    body.xlf-nd .dx-dashboard-widget-container .dx-texteditor.dx-state-focused.dx-editor-outlined {
        border-color: var(--brand);
    }

    /* Mobile layout of DevExpress (narrow screens): the item list as cards */
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-mobile-layout .dx-dashboard-item-container {
        border-radius: 16px;
        box-shadow: var(--shadow);
    }

@media only screen and (max-width: 767px) {
    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-layout-item-wrapper > .dx-layout-item-container {
        -webkit-clip-path: inset(4px round 14px);
        clip-path: inset(4px round 14px);
        border-radius: 18px;
        box-shadow: inset 0 0 0 5px var(--line-soft);
    }

    body.xlf-nd #ContentPlaceHolder1_Dashboard .dx-dashboard-caption-toolbar .dx-toolbar-before .dx-toolbar-item:first-child {
        padding-left: 16px;
    }
}

/* =====================================================================================================
   18. Info -> Meddelelser (PresentationLite/info/info.aspx?Tab=Message): inbox
       List markup: App_Code/XlfMessages.cs (RenderList). Toolbar / preview: AllJsLite/xlf-messages.js.
       The page's ids and handlers are unchanged; these rules only style them (new design only).
   ===================================================================================================== */
body.xlf-nd.xlf-pg-info #divMessageTab > br,
body.xlf-nd.xlf-pg-info #divMessageTab > hr,
body.xlf-nd.xlf-pg-info #Message.xlf-msg-body > br,
body.xlf-nd.xlf-pg-info .xlf-msg-oldbar,
body.xlf-nd.xlf-pg-info .xlf-msg-oldbuttons {
    display: none !important;
}

/* Toolbar: filter tabs (Indbakke, Ulaeste, Sendt, Arkiv) + search */
body.xlf-nd.xlf-pg-info .xlf-msg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
}

body.xlf-nd.xlf-pg-info .xlf-msg-tabs a.xlf-msg-tab {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    width: auto !important;
    height: 36px;
    margin: 0 !important;
    padding: 0 14px !important;
    line-height: normal !important;
    border-radius: var(--radius-pill) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    font-size: 13px !important;
    font-weight: 600;
    text-decoration: none;
}

    body.xlf-nd.xlf-pg-info .xlf-msg-tabs a.xlf-msg-tab:hover {
        background: var(--row-hover) !important;
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-tabs a.xlf-msg-tab.active {
        background: var(--brand) !important;
        border-color: var(--brand) !important;
        color: var(--brand-contrast) !important;
    }

body.xlf-nd.xlf-pg-info .xlf-msg-search {
    flex: 0 1 320px;
    min-width: 200px;
}

    body.xlf-nd.xlf-pg-info .xlf-msg-search .searchfield {
        width: 100% !important;
        margin: 0 !important;
    }

/* Actions: select all + icon buttons (print, delete, archive, back to inbox) */
body.xlf-nd.xlf-pg-info #Message.xlf-msg-body {
    padding: 0 !important;
}

body.xlf-nd.xlf-pg-info .xlf-msg-actions {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0 0 12px 0;
    background: var(--row-hover);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
}

body.xlf-nd.xlf-pg-info a.xlf-msg-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: 36px !important;
    height: 36px;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px solid transparent !important;
    font-size: 15px;
}

    body.xlf-nd.xlf-pg-info a.xlf-msg-iconbtn:hover {
        background: var(--card) !important;
        border-color: var(--line) !important;
        color: var(--text) !important;
    }

    body.xlf-nd.xlf-pg-info a.xlf-msg-iconbtn[style*="display: block"],
    body.xlf-nd.xlf-pg-info a.xlf-msg-iconbtn[style*="display:block"] {
        display: inline-flex !important;
    }

body.xlf-nd.xlf-pg-info .xlf-msg-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

    body.xlf-nd.xlf-pg-info .xlf-msg-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--brand);
        cursor: pointer;
    }

body.xlf-nd.xlf-pg-info .xlf-msg-all {
    margin-right: 6px;
}

/* List + reading panel side by side (the old two-cell table becomes a grid) */
body.xlf-nd.xlf-pg-info .xlf-msg-layout,
body.xlf-nd.xlf-pg-info .xlf-msg-layout .tablescrollformob {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

    body.xlf-nd.xlf-pg-info .xlf-msg-layout table,
    body.xlf-nd.xlf-pg-info .xlf-msg-layout tbody {
        display: block;
        width: 100%;
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-layout tr {
        display: grid;
        grid-template-columns: minmax(300px, 40%) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
        background: transparent !important;
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-layout tr > td {
        display: block;
        width: auto !important;
        min-width: 0;
        white-space: normal !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

body.xlf-nd.xlf-pg-info #AllMessageList {
    margin-top: 0 !important;
    max-height: 680px;
    overflow-y: auto;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
}

/* Inbox rows */
body.xlf-nd.xlf-pg-info .xlf-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    background-color: var(--card) !important;
    cursor: pointer;
    outline: 0;
}

    body.xlf-nd.xlf-pg-info .xlf-msg-row:last-child {
        border-bottom: 0;
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-row:hover {
        background-color: var(--row-hover) !important;
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-row:focus-visible {
        box-shadow: inset 0 0 0 2px var(--brand-ring);
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-row.xlf-msg-active {
        background-color: var(--brand-light) !important;
        box-shadow: inset 3px 0 0 var(--brand);
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-row.xlf-msg-hidden {
        display: none;
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-row .xlf-msg-check {
        margin-top: 5px;
    }

body.xlf-nd.xlf-pg-info .xlf-msg-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.xlf-nd.xlf-pg-info .xlf-msg-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

body.xlf-nd.xlf-pg-info .xlf-msg-from {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

body.xlf-nd.xlf-pg-info .xlf-msg-date {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

body.xlf-nd.xlf-pg-info .xlf-msg-subject {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    min-width: 0;
    font-size: 13px;
    color: var(--text);
}

body.xlf-nd.xlf-pg-info .xlf-msg-subject-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.xlf-nd.xlf-pg-info .xlf-msg-clip {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
}

body.xlf-nd.xlf-pg-info .xlf-msg-pill {
    flex: 0 0 auto;
    padding: 1px 8px;
    font-size: 11px;
}

body.xlf-nd.xlf-pg-info .xlf-msg-snippet {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--muted);
}

/* Unread: bold with a dot in the brand colour */
body.xlf-nd.xlf-pg-info .xlf-msg-dot {
    display: inline-block;
    margin: 0 7px 1px 0;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

body.xlf-nd.xlf-pg-info .xlf-msg-row:not(.xlf-msg-unread) .xlf-msg-dot {
    display: none;
}

body.xlf-nd.xlf-pg-info .xlf-msg-row.xlf-msg-unread .xlf-msg-from,
body.xlf-nd.xlf-pg-info .xlf-msg-row.xlf-msg-unread .xlf-msg-subject {
    font-weight: 700;
}

body.xlf-nd.xlf-pg-info .xlf-msg-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

/* Reading panel */
body.xlf-nd.xlf-pg-info .xlf-msg-hint {
    padding: 48px 16px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

body.xlf-nd.xlf-pg-info #divPreviewMessage.xlf-msg-preview {
    margin-top: 0 !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}

    body.xlf-nd.xlf-pg-info #divPreviewMessage.xlf-msg-preview > div {
        padding: 20px 22px !important;
        background-color: var(--card) !important;
    }

body.xlf-nd.xlf-pg-info .xlf-msg-pv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

body.xlf-nd.xlf-pg-info #hSubject {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
}

body.xlf-nd.xlf-pg-info .xlf-msg-pv-actions {
    flex: 0 0 auto;
}

body.xlf-nd.xlf-pg-info a.xlf-msg-reply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none !important;
    width: auto !important;
    height: 38px;
    margin: 0 !important;
    padding: 0 14px !important;
    line-height: normal !important;
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    font-size: 13px !important;
    font-weight: 600;
}

    body.xlf-nd.xlf-pg-info a.xlf-msg-reply:hover {
        background: var(--row-hover) !important;
    }

    body.xlf-nd.xlf-pg-info a.xlf-msg-reply[style*="display: block"],
    body.xlf-nd.xlf-pg-info a.xlf-msg-reply[style*="display:block"] {
        display: inline-flex !important;
    }

body.xlf-nd.xlf-pg-info #FromUserDetails {
    padding: 0 !important;
    background-color: transparent !important;
}

    body.xlf-nd.xlf-pg-info #FromUserDetails > br {
        display: none;
    }

    body.xlf-nd.xlf-pg-info #FromUserDetails > hr {
        margin: 16px 0;
        border: 0;
        border-top: 1px solid var(--line-soft);
    }

body.xlf-nd.xlf-pg-info .xlf-msg-sender {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.xlf-nd.xlf-pg-info .xlf-msg-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.xlf-nd.xlf-pg-info #hFromUser {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text);
}

body.xlf-nd.xlf-pg-info .xlf-msg-who i,
body.xlf-nd.xlf-pg-info #lblOtherReceivers,
body.xlf-nd.xlf-pg-info #lblSendDate {
    margin: 0;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
}

body.xlf-nd.xlf-pg-info #lblAttachment {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

body.xlf-nd.xlf-pg-info #divMessageDocument {
    margin-bottom: 16px;
}

    body.xlf-nd.xlf-pg-info #divMessageDocument a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0 6px 6px 0;
        padding: 6px 12px;
        border: 1px solid var(--line) !important;
        border-radius: var(--radius-pill);
        background: var(--card) !important;
        color: var(--link) !important;
        font-size: 13px;
        text-decoration: none !important;
    }

        body.xlf-nd.xlf-pg-info #divMessageDocument a::before {
            content: "\f0c6";
            font-family: FontAwesome;
            color: var(--muted);
        }

        body.xlf-nd.xlf-pg-info #divMessageDocument a:hover {
            background: var(--row-hover) !important;
        }

    body.xlf-nd.xlf-pg-info #divMessageDocument br {
        display: none;
    }

body.xlf-nd.xlf-pg-info #MessageContent {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    overflow-wrap: anywhere;
}

    body.xlf-nd.xlf-pg-info #MessageContent img {
        max-width: 100%;
        height: auto;
    }

/* New message / reply: fields in two columns, the editor and the buttons across */
body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01,
body.xlf-nd.xlf-pg-info #divReply .btmtabarea01 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 24px;
    margin-top: 8px !important;
}

    body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01 > *,
    body.xlf-nd.xlf-pg-info #divReply .btmtabarea01 > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01 > .leftpanel,
    body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01 > .rytpartInvoice {
        grid-column: auto;
        width: auto !important;
        float: none !important;
        margin: 0 !important;
        display: block !important;
    }

    body.xlf-nd.xlf-pg-info #divReply .btmtabarea01 > .leftpanel {
        width: auto !important;
        display: block !important;
    }

    body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01 > input[type="hidden"],
    body.xlf-nd.xlf-pg-info #divReply .btmtabarea01 > input[type="hidden"] {
        display: none;
    }

    body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01 > .rightpanel,
    body.xlf-nd.xlf-pg-info #divReply .btmtabarea01 > .rightpanel {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 10px;
        width: auto !important;
        float: none !important;
        margin-top: 12px;
    }

        body.xlf-nd.xlf-pg-info #divNewMessage .rightpanel > div,
        body.xlf-nd.xlf-pg-info #divReply .rightpanel > div {
            width: auto !important;
            float: none !important;
            margin: 0 !important;
        }

body.xlf-nd.xlf-pg-info #divAttachment > div,
body.xlf-nd.xlf-pg-info #divReplyAttachment > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 6px 6px 0;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13px;
}

    body.xlf-nd.xlf-pg-info #divAttachment > div a,
    body.xlf-nd.xlf-pg-info #divReplyAttachment > div a {
        color: var(--link) !important;
    }

@media only screen and (max-width: 900px) {
    body.xlf-nd.xlf-pg-info .xlf-msg-layout tr {
        grid-template-columns: minmax(0, 1fr);
    }

    body.xlf-nd.xlf-pg-info #AllMessageList {
        max-height: 420px;
    }
}

@media only screen and (max-width: 767px) {
    body.xlf-nd.xlf-pg-info .xlf-msg-search {
        flex: 1 1 100%;
    }

    body.xlf-nd.xlf-pg-info #divNewMessage .btmtabarea01,
    body.xlf-nd.xlf-pg-info #divReply .btmtabarea01 {
        grid-template-columns: minmax(0, 1fr);
    }

    body.xlf-nd.xlf-pg-info .xlf-msg-pv-head {
        flex-direction: column;
    }

    body.xlf-nd.xlf-pg-info #divPreviewMessage.xlf-msg-preview > div {
        padding: 16px !important;
    }
}