/**
 * WHMP Nexum - client area theme
 *
 * Every colour comes from the --nx-* tokens generated by the WHMP Nexum plugin
 * (/client/plugin/whmp_nexum/client_main/css/). Dark mode only re-points those
 * tokens, so light and dark can never drift apart.
 */

/* ============================================================ 1. BASE ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: var(--nx-font);
    font-size: var(--nx-font-size);
    font-weight: var(--nx-font-weight);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 var(--nx-space-2);
    color: var(--nx-heading);
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-heading-weight);
    line-height: 1.25;
}

h1, .h1 { font-size: 1.9rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1.02rem; }
h6, .h6 { font-size: 0.92rem; }

p { margin: 0 0 var(--nx-space-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--nx-primary);
    text-decoration: none;
    transition: color var(--nx-transition);
}

a:hover,
a:focus {
    color: var(--nx-primary-hover);
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--nx-divider);
    margin: var(--nx-space-4) 0;
}

small, .small { font-size: 0.85em; }

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
    background: var(--nx-surface-2);
    color: var(--nx-on-primary-soft);
    padding: 0.15em 0.45em;
    border-radius: var(--nx-radius-sm);
    font-size: 0.88em;
}

pre {
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: var(--nx-space-3);
    overflow-x: auto;
}

address {
    font-style: normal;
    margin: 0;
}

img { max-width: 100%; height: auto; }

::selection {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

::placeholder { color: var(--nx-input-placeholder); opacity: 1; }

/* Scrollbars follow the palette instead of the OS default */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--nx-border-strong);
    border-radius: 999px;
    border: 2px solid var(--nx-bg);
}

*::-webkit-scrollbar-thumb:hover { background: var(--nx-text-faint); }

/* Bootstrap text/background helpers, re-pointed at the palette */
.text-muted { color: var(--nx-text-muted) !important; }
.text-primary { color: var(--nx-primary) !important; }
.text-success { color: var(--nx-success) !important; }
.text-danger { color: var(--nx-danger) !important; }
.text-warning { color: var(--nx-warning) !important; }
.text-info { color: var(--nx-info) !important; }
.text-secondary { color: var(--nx-text-muted) !important; }
.text-dark { color: var(--nx-heading) !important; }
.text-body { color: var(--nx-text) !important; }
.text-white { color: #fff !important; }

.bg-light { background-color: var(--nx-surface-2) !important; }
.bg-white { background-color: var(--nx-surface) !important; }
.bg-primary { background-color: var(--nx-primary-solid) !important; color: var(--nx-on-primary) !important; }
.bg-success { background-color: var(--nx-success-solid) !important; color: var(--nx-on-success) !important; }
.bg-danger { background-color: var(--nx-danger-solid) !important; color: var(--nx-on-danger) !important; }
.bg-warning { background-color: var(--nx-warning-solid) !important; color: var(--nx-on-warning) !important; }
.bg-info { background-color: var(--nx-info-solid) !important; color: var(--nx-on-info) !important; }

.border { border-color: var(--nx-border) !important; }
.border-top { border-top-color: var(--nx-border) !important; }
.border-bottom { border-bottom-color: var(--nx-border) !important; }
.border-left { border-left-color: var(--nx-border) !important; }
.border-right { border-right-color: var(--nx-border) !important; }

/* ======================================================== 2. LAYOUT ======= */

.container,
.container-md,
.container-fluid {
    width: 100%;
    max-width: var(--nx-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nx-space-3);
    padding-right: var(--nx-space-3);
}

.nx-shell {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
}

.nx-main {
    flex: 1 0 auto;
    padding: var(--nx-space-5) 0 var(--nx-space-6);
}

.nx-page-title {
    padding: var(--nx-space-4) 0 0;
}

.nx-page-title h1 {
    margin: 0;
    font-size: 1.55rem;
}

.nx-footer {
    flex-shrink: 0;
    padding: var(--nx-space-4) 0;
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.nx-footer p { margin: 0; }

/* Sidebar layout ---------------------------------------------------------- */

body.nx-nav-sidebar { flex-direction: row; }

.nx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--nx-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--nx-header-bg);
    border-right: 1px solid var(--nx-divider);
    z-index: 1040;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nx-sidebar-brand {
    display: flex;
    align-items: center;
    min-height: var(--nx-header-height);
    padding: 0 var(--nx-space-3);
    border-bottom: 1px solid var(--nx-divider);
    flex-shrink: 0;
}

.nx-sidebar-brand img { max-height: 38px; width: auto; }

.nx-sidebar-nav {
    padding: var(--nx-space-3) var(--nx-space-2);
    flex: 1 1 auto;
}

body.nx-nav-sidebar .nx-shell {
    margin-left: var(--nx-sidebar-width);
    max-width: calc(100% - var(--nx-sidebar-width));
}

.nx-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--nx-overlay);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .nx-sidebar {
        transform: translateX(-100%);
        transition: transform var(--nx-transition);
    }

    body.nx-sidebar-open .nx-sidebar { transform: translateX(0); }
    body.nx-sidebar-open .nx-sidebar-backdrop { display: block; }

    body.nx-nav-sidebar .nx-shell {
        margin-left: 0;
        max-width: 100%;
    }
}

/* ==================================================== 3. HEADER & NAV ===== */

.nx-topbar {
    background: var(--nx-header-bg);
    color: var(--nx-header-text);
    border-bottom: 1px solid var(--nx-divider);
    position: relative;
    z-index: 1030;
}

body.nx-sticky .nx-topbar {
    position: sticky;
    top: 0;
}

.nx-topbar-inner {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-height: var(--nx-header-height);
}

.nx-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--nx-header-text);
    font-weight: 700;
    font-size: 1.05rem;
}

.nx-brand:hover { color: var(--nx-header-text); }
.nx-brand img { max-height: 38px; width: auto; }

.nx-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.nx-nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--nx-header-text);
    transition: transform var(--nx-transition), opacity var(--nx-transition);
}

/* Top navigation ---------------------------------------------------------- */

.nx-topnav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--nx-space-3);
}

.nx-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.nx-menu-item { position: relative; }

.nx-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--nx-radius);
    color: var(--nx-header-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--nx-transition), color var(--nx-transition);
}

.nx-menu-link:hover,
.nx-menu-item.show > .nx-menu-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nx-menu-item.active > .nx-menu-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-weight: 600;
}

.nx-menu-link .nx-caret {
    font-size: 9px;
    opacity: 0.65;
    margin-left: 2px;
}

body.nx-no-nav-icons .nx-menu-link > i:first-child,
body.nx-no-nav-icons .nx-sidenav-link > i:first-child { display: none; }

/* Header actions ---------------------------------------------------------- */

.nx-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.nx-action { position: relative; }

.nx-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--nx-header-text);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--nx-transition), color var(--nx-transition), border-color var(--nx-transition);
}

.nx-action-btn:hover,
.nx-action.show > .nx-action-btn {
    background: var(--nx-surface-hover);
    border-color: var(--nx-border);
    color: var(--nx-primary);
}

.nx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.nx-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.nx-theme-toggle .nx-icon-dark { display: none; }
body#whmp-dark-mode .nx-theme-toggle .nx-icon-light { display: none; }
body#whmp-dark-mode .nx-theme-toggle .nx-icon-dark { display: inline-block; }

/* Sidebar navigation ------------------------------------------------------ */

.nx-sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nx-sidenav-item + .nx-sidenav-item { margin-top: 2px; }

.nx-sidenav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--nx-radius);
    color: var(--nx-header-muted);
    font-weight: 500;
    transition: background var(--nx-transition), color var(--nx-transition);
}

.nx-sidenav-link > i:first-child {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nx-sidenav-link:hover {
    background: var(--nx-surface-hover);
    color: var(--nx-primary);
}

.nx-sidenav-item.active > .nx-sidenav-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-weight: 600;
}

.nx-sidenav-link .nx-caret {
    margin-left: auto;
    font-size: 9px;
    opacity: 0.6;
    transition: transform var(--nx-transition);
}

.nx-sidenav-item.open > .nx-sidenav-link .nx-caret { transform: rotate(180deg); }

.nx-sidenav-sub {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0 0 0 30px;
    display: none;
}

.nx-sidenav-item.open > .nx-sidenav-sub,
.nx-sidenav-item.active > .nx-sidenav-sub { display: block; }

/* ... ausser der Benutzer hat sie zugeklappt.
   Eine Gruppe, die als `active` gilt, blieb offen, egal wie oft man auf sie
   klickte: der Pfeil drehte sich, das Untermenue blieb stehen. Robin am
   26.09.2026 an "Produkte" bei Company 4. Die Regel darueber gewinnt sonst
   gegen jedes Zuklappen, weil `open` und `active` gleich spezifisch sind
   und beide auf `block` stehen.
   `nx-closed` setzt das JavaScript beim Zuklappen und nimmt es beim
   Aufklappen wieder weg. */
.nx-sidenav-item.nx-closed > .nx-sidenav-sub { display: none; }
.nx-sidenav-item.nx-closed > .nx-sidenav-link .nx-caret { transform: none; }

.nx-sidenav-sub a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text-muted);
    font-size: 0.92em;
}

.nx-sidenav-sub a:hover { background: var(--nx-surface-hover); color: var(--nx-primary); }
.nx-sidenav-sub a.active { color: var(--nx-primary); font-weight: 600; }

/* Header dropdowns -------------------------------------------------------- */

.nx-topbar .dropdown-menu,
.nx-sidebar .dropdown-menu {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-lg);
    padding: 6px;
    margin-top: 8px;
    min-width: 210px;
}

.nx-topbar .dropdown-item,
.nx-sidebar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-weight: 500;
}

.nx-topbar .dropdown-item:hover,
.nx-topbar .dropdown-item.active,
.nx-sidebar .dropdown-item:hover {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nx-topbar .dropdown-divider,
.nx-sidebar .dropdown-divider {
    border-top-color: var(--nx-divider);
    margin: 5px 0;
}

/* Staff impersonation banner --------------------------------------------- */

.nx-staff-banner {
    background: var(--nx-info-soft);
    color: var(--nx-on-info-soft);
    border-bottom: 1px solid var(--nx-info-border);
    padding: 9px 0;
    font-size: 0.875rem;
}

.nx-staff-banner .container { display: flex; align-items: center; gap: 8px; }
.nx-staff-banner a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: auto; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .nx-nav-toggle { display: flex; }

    body.nx-nav-top .nx-topnav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--nx-space-2);
        padding: var(--nx-space-3);
        background: var(--nx-surface);
        border-bottom: 1px solid var(--nx-border);
        box-shadow: var(--nx-shadow-lg);
        max-height: calc(100vh - var(--nx-header-height));
        overflow-y: auto;
        display: none;
    }

    body.nx-nav-top .nx-topnav.show { display: flex; }

    body.nx-nav-top .nx-menu {
        flex-direction: column;
        align-items: stretch;
    }

    body.nx-nav-top .nx-menu-link { justify-content: flex-start; }

    body.nx-nav-top .nx-actions {
        margin-left: 0;
        flex-wrap: wrap;
        border-top: 1px solid var(--nx-divider);
        padding-top: var(--nx-space-2);
    }

    body.nx-nav-top .nx-topnav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--nx-border);
        border-radius: 0;
        margin: 2px 0 2px 12px;
        padding-left: 8px;
    }

    body.nx-sticky .nx-topbar { position: relative; }
}

@media (min-width: 992px) {
    body.nx-nav-sidebar .nx-nav-toggle { display: none; }
}

/* ======================================================== 4. CARDS ======== */

.card,
.card-blesta,
.panel {
    position: relative;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    margin-bottom: var(--nx-space-4);
    min-width: 0;
}

body.nx-cards-elevated .card,
body.nx-cards-elevated .panel {
    border-color: var(--nx-divider);
    box-shadow: var(--nx-shadow-sm);
}

body.nx-cards-flat .card,
body.nx-cards-flat .panel {
    border-color: transparent;
    box-shadow: none;
    background: var(--nx-surface-2);
}

body.nx-cards-bordered .card,
body.nx-cards-bordered .panel {
    border-color: var(--nx-border-strong);
    box-shadow: none;
}

.card-header,
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-4);
    background: transparent;
    border-bottom: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-lg) var(--nx-radius-lg) 0 0;
    color: var(--nx-heading);
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-heading-weight);
    font-size: 1.02rem;
    min-width: 0;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.card-body,
.panel-body { padding: var(--nx-space-4); min-width: 0; }

.card-footer,
.panel-footer {
    padding: var(--nx-space-3) var(--nx-space-4);
    background: transparent;
    border-top: 1px solid var(--nx-divider);
    border-radius: 0 0 var(--nx-radius-lg) var(--nx-radius-lg);
}

.card-content { min-width: 0; }

.card > .list-group:first-child .list-group-item:first-child { border-top: 0; }

/* Widget header extras ---------------------------------------------------- */

.lagom-action-buttons,
.lagom-widget-nav { flex: 0 0 auto; }

.lagom-action-buttons { display: inline-flex; gap: 6px; }

.lagom-status-dropdown { position: relative; }

.lagom-status-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 1000;
    min-width: 190px;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg);
    padding: 5px;
}

.lagom-status-dropdown.show .dropdown-menu { display: block; }

.lagom-status-btn { white-space: nowrap; }

.lagom-status-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
}

.lagom-status-item:hover,
.lagom-status-item.active {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.lagom-status-count {
    background: var(--nx-surface-3);
    color: var(--nx-text-muted);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.lagom-status-item.active .lagom-status-count,
.lagom-status-item:hover .lagom-status-count {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

/* Widget filters ---------------------------------------------------------- */

.widget_filter_form {
    background: var(--nx-surface-2);
    border-bottom: 1px solid var(--nx-divider);
    padding: var(--nx-space-3) var(--nx-space-4);
    margin: 0;
}

.lagom-search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    min-width: 0;
}

.lagom-search-field {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 100%;
}

.lagom-search-field .form-control,
.lagom-search-field select { width: 100%; }

.card-body > .widget_filter_form:first-child {
    margin: calc(var(--nx-space-4) * -1) calc(var(--nx-space-4) * -1) var(--nx-space-4);
    border-radius: 0;
}

/* ======================================================= 5. BUTTONS ======= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--nx-control-height);
    padding: 0 var(--nx-space-3);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-btn);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--nx-transition), border-color var(--nx-transition),
                color var(--nx-transition), box-shadow var(--nx-transition);
}

.btn:focus,
.btn.focus { box-shadow: 0 0 0 3px var(--nx-input-focus-ring); outline: 0; }

.btn.disabled,
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-lg { height: calc(var(--nx-control-height) + 8px); padding: 0 var(--nx-space-4); font-size: 1rem; }
.btn-sm { height: var(--nx-control-height-sm); padding: 0 var(--nx-space-2); font-size: 0.84rem; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 0.78rem; gap: 5px; }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: 8px; }

.btn i { font-size: 0.92em; }

/* Solid (default) */
.btn-primary { background: var(--nx-primary-solid); border-color: var(--nx-primary-solid); color: var(--nx-on-primary); }
.btn-primary:hover { background: var(--nx-primary-solid-hover); border-color: var(--nx-primary-solid-hover); color: var(--nx-on-primary); }

.btn-secondary { background: var(--nx-secondary); border-color: var(--nx-secondary); color: var(--nx-on-secondary); }
.btn-secondary:hover { background: var(--nx-secondary-hover); border-color: var(--nx-secondary-hover); color: var(--nx-on-secondary); }

.btn-success { background: var(--nx-success-solid); border-color: var(--nx-success-solid); color: var(--nx-on-success); }
.btn-success:hover { background: var(--nx-success); border-color: var(--nx-success); color: var(--nx-on-success); filter: brightness(0.93); }

.btn-danger { background: var(--nx-danger-solid); border-color: var(--nx-danger-solid); color: var(--nx-on-danger); }
.btn-danger:hover { background: var(--nx-danger); border-color: var(--nx-danger); color: var(--nx-on-danger); filter: brightness(0.93); }

.btn-warning { background: var(--nx-warning-solid); border-color: var(--nx-warning-solid); color: var(--nx-on-warning); }
.btn-warning:hover { background: var(--nx-warning); border-color: var(--nx-warning); color: var(--nx-on-warning); filter: brightness(0.93); }

.btn-info { background: var(--nx-info-solid); border-color: var(--nx-info-solid); color: var(--nx-on-info); }
.btn-info:hover { background: var(--nx-info); border-color: var(--nx-info); color: var(--nx-on-info); filter: brightness(0.93); }

.btn-light,
.btn-default {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.btn-light:hover,
.btn-default:hover {
    background: var(--nx-surface-hover);
    border-color: var(--nx-border-strong);
    color: var(--nx-primary);
}

.btn-dark { background: var(--nx-heading); border-color: var(--nx-heading); color: var(--nx-surface); }

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--nx-primary);
    height: auto;
    padding: 0;
    font-weight: 600;
}

.btn-link:hover { color: var(--nx-primary-hover); text-decoration: underline; }

.btn-outline-primary { background: transparent; border-color: var(--nx-primary); color: var(--nx-primary); }
.btn-outline-primary:hover { background: var(--nx-primary-solid); color: var(--nx-on-primary); }
.btn-outline-secondary { background: transparent; border-color: var(--nx-border-strong); color: var(--nx-text); }
.btn-outline-secondary:hover { background: var(--nx-surface-hover); border-color: var(--nx-primary); color: var(--nx-primary); }
.btn-outline-success { background: transparent; border-color: var(--nx-success); color: var(--nx-success); }
.btn-outline-success:hover { background: var(--nx-success-solid); color: var(--nx-on-success); }
.btn-outline-danger { background: transparent; border-color: var(--nx-danger); color: var(--nx-danger); }
.btn-outline-danger:hover { background: var(--nx-danger-solid); color: var(--nx-on-danger); }
.btn-outline-info { background: transparent; border-color: var(--nx-info); color: var(--nx-info); }
.btn-outline-info:hover { background: var(--nx-info-solid); color: var(--nx-on-info); }
.btn-outline-warning { background: transparent; border-color: var(--nx-warning); color: var(--nx-warning); }
.btn-outline-warning:hover { background: var(--nx-warning-solid); color: var(--nx-on-warning); }

/* Soft button style */
body.nx-btn-soft .btn-primary { background: var(--nx-primary-soft); border-color: transparent; color: var(--nx-on-primary-soft); }
body.nx-btn-soft .btn-primary:hover { background: var(--nx-primary-solid); color: var(--nx-on-primary); }
body.nx-btn-soft .btn-success { background: var(--nx-success-soft); border-color: transparent; color: var(--nx-on-success-soft); }
body.nx-btn-soft .btn-success:hover { background: var(--nx-success-solid); color: var(--nx-on-success); filter: none; }
body.nx-btn-soft .btn-danger { background: var(--nx-danger-soft); border-color: transparent; color: var(--nx-on-danger-soft); }
body.nx-btn-soft .btn-danger:hover { background: var(--nx-danger-solid); color: var(--nx-on-danger); filter: none; }
body.nx-btn-soft .btn-info { background: var(--nx-info-soft); border-color: transparent; color: var(--nx-on-info-soft); }
body.nx-btn-soft .btn-info:hover { background: var(--nx-info-solid); color: var(--nx-on-info); filter: none; }
body.nx-btn-soft .btn-warning { background: var(--nx-warning-soft); border-color: transparent; color: var(--nx-on-warning-soft); }
body.nx-btn-soft .btn-warning:hover { background: var(--nx-warning-solid); color: var(--nx-on-warning); filter: none; }

/* Outline button style */
body.nx-btn-outline .btn-primary { background: transparent; border-color: var(--nx-primary); color: var(--nx-primary); }
body.nx-btn-outline .btn-primary:hover { background: var(--nx-primary-solid); color: var(--nx-on-primary); }
body.nx-btn-outline .btn-success { background: transparent; border-color: var(--nx-success); color: var(--nx-success); }
body.nx-btn-outline .btn-success:hover { background: var(--nx-success-solid); color: var(--nx-on-success); filter: none; }
body.nx-btn-outline .btn-danger { background: transparent; border-color: var(--nx-danger); color: var(--nx-danger); }
body.nx-btn-outline .btn-danger:hover { background: var(--nx-danger-solid); color: var(--nx-on-danger); filter: none; }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--nx-radius-btn); border-bottom-left-radius: var(--nx-radius-btn); }
.btn-group > .btn:last-child { border-top-right-radius: var(--nx-radius-btn); border-bottom-right-radius: var(--nx-radius-btn); }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:hover { z-index: 2; }

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.3em;
    vertical-align: 0.16em;
    content: "";
    border-top: 0.32em solid;
    border-right: 0.32em solid transparent;
    border-left: 0.32em solid transparent;
}

.caret { display: none; }

/* ======================================================= 6. DROPDOWNS ===== */

.dropdown-menu {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg);
    padding: 5px;
    color: var(--nx-text);
    font-size: 0.94rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.dropdown-divider { border-top-color: var(--nx-divider); margin: 5px 0; }
.dropdown-header { color: var(--nx-text-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px 4px; }

/* Legacy <ul class="dropdown-menu"><li><a> markup */
.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    white-space: nowrap;
}

.dropdown-menu > li > a:hover {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

/* ========================================================= 7. FORMS ======= */
/*
 * Native inputs are restyled in place. No markup or behaviour is replaced, so
 * every Blesta/plugin script that reads .val(), :checked or .change() keeps
 * working exactly as before.
 */

label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--nx-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group { margin-bottom: var(--nx-space-3); }
.form-group:last-child { margin-bottom: 0; }

.form-control,
input[type="text"]:not(.nx-native),
input[type="email"]:not(.nx-native),
input[type="password"]:not(.nx-native),
input[type="number"]:not(.nx-native),
input[type="search"]:not(.nx-native),
input[type="tel"]:not(.nx-native),
input[type="url"]:not(.nx-native),
input[type="date"]:not(.nx-native),
textarea:not(.nx-native),
select:not(.nx-native) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--nx-control-height);
    padding: 0 var(--nx-space-2);
    background-color: var(--nx-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--nx-input-border);
    border-radius: var(--nx-radius);
    color: var(--nx-input-text);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
    appearance: none;
    -webkit-appearance: none;
}

textarea,
textarea.form-control {
    min-height: 110px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6;
    resize: vertical;
}

.form-control:focus,
input:not(.nx-native):focus,
textarea:not(.nx-native):focus,
select:not(.nx-native):focus {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px var(--nx-input-focus-ring);
    color: var(--nx-input-text);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--nx-input-disabled-bg);
    color: var(--nx-text-muted);
    cursor: not-allowed;
}

.form-control-sm,
.input-sm { min-height: var(--nx-control-height-sm); font-size: 0.86rem; }

.form-control-lg { min-height: calc(var(--nx-control-height) + 8px); font-size: 1rem; }

.form-text,
.help-block {
    display: block;
    margin-top: 6px;
    color: var(--nx-text-muted);
    font-size: 0.84rem;
    font-weight: 400;
}

/* Select ------------------------------------------------------------------ */

select:not([multiple]):not([size]):not(.nx-native),
select.form-control:not([multiple]):not([size]),
.custom-select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808a9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px;
    cursor: pointer;
}

select[multiple],
select[size] {
    padding: 6px;
    height: auto;
}

select option {
    background: var(--nx-surface);
    color: var(--nx-text);
}

/* Checkbox and radio ------------------------------------------------------ */

input[type="checkbox"]:not(.nx-native),
input[type="radio"]:not(.nx-native) {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    padding: 0;
    flex: 0 0 18px;
    vertical-align: -3px;
    background: var(--nx-input-bg);
    border: 1.5px solid var(--nx-border-strong);
    cursor: pointer;
    transition: background var(--nx-transition), border-color var(--nx-transition),
                box-shadow var(--nx-transition);
    background-repeat: no-repeat;
    background-position: center;
}

input[type="checkbox"]:not(.nx-native) { border-radius: var(--nx-radius-sm); }
input[type="radio"]:not(.nx-native) { border-radius: 50%; }

input[type="checkbox"]:not(.nx-native):hover,
input[type="radio"]:not(.nx-native):hover { border-color: var(--nx-primary); }

input[type="checkbox"]:not(.nx-native):focus-visible,
input[type="radio"]:not(.nx-native):focus-visible {
    box-shadow: 0 0 0 3px var(--nx-input-focus-ring);
    outline: 0;
}

input[type="checkbox"]:not(.nx-native):checked {
    background-color: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    background-size: 13px;
}

input[type="radio"]:not(.nx-native):checked {
    background-color: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
    box-shadow: inset 0 0 0 3.5px var(--nx-input-bg);
}

input[type="checkbox"]:not(.nx-native):disabled,
input[type="radio"]:not(.nx-native):disabled {
    background-color: var(--nx-input-disabled-bg);
    border-color: var(--nx-border);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Rows built from a bare label wrapping the control */
.radio,
.checkbox {
    position: relative;
    margin-bottom: 6px;
}

.radio label,
.checkbox label,
.form-check-label,
label.nx-choice {
    display: flex;
    align-items: flex-start;
    gap: 0;
    font-weight: 500;
    color: var(--nx-text);
    cursor: pointer;
    margin-bottom: 0;
}

.radio label > input,
.checkbox label > input { margin-top: 2px; }

/* Bootstrap custom-control markup */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 28px;
}

.custom-control-input {
    position: absolute;
    left: 0;
    top: 2px;
    z-index: 1;
    width: 18px;
    height: 18px;
    opacity: 0;
    margin: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--nx-text);
    cursor: pointer;
}

.custom-control-label::before {
    position: absolute;
    top: 2px;
    left: -28px;
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background: var(--nx-input-bg);
    border: 1.5px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    transition: background var(--nx-transition), border-color var(--nx-transition);
}

.custom-radio .custom-control-label::before { border-radius: 50%; }

.custom-control-label::after {
    position: absolute;
    top: 2px;
    left: -28px;
    display: block;
    width: 18px;
    height: 18px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none;
    box-shadow: inset 0 0 0 3.5px var(--nx-input-bg);
    border-radius: 50%;
}

.custom-control-input:focus-visible ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--nx-input-focus-ring);
}

/* Switch ------------------------------------------------------------------ */

.nx-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}

.nx-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    margin: 0;
    border-radius: 999px;
    background: var(--nx-border-strong);
    border: 0;
    position: relative;
    transition: background var(--nx-transition);
}

.nx-switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--nx-transition);
}

.nx-switch input[type="checkbox"]:checked { background: var(--nx-primary-solid); }
.nx-switch input[type="checkbox"]:checked::after { transform: translateX(18px); }

/* File input -------------------------------------------------------------- */

input[type="file"] {
    display: block;
    width: 100%;
    padding: 9px 10px;
    background: var(--nx-input-bg);
    border: 1px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius);
    color: var(--nx-text-muted);
    font-size: 0.9rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
}

input[type="file"]:hover { border-color: var(--nx-primary); }

/* Range ------------------------------------------------------------------- */

input[type="range"] {
    width: 100%;
    accent-color: var(--nx-primary);
}

/* Input groups ------------------------------------------------------------ */

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }

.input-group-prepend,
.input-group-append { display: flex; }

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 var(--nx-space-2);
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-input-border);
    color: var(--nx-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.input-group > .input-group-prepend > * { border-radius: var(--nx-radius) 0 0 var(--nx-radius); border-right: 0; }
.input-group > .input-group-append > * { border-radius: 0 var(--nx-radius) var(--nx-radius) 0; border-left: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Validation -------------------------------------------------------------- */

.is-invalid,
.form-control.error,
input.error,
select.error,
textarea.error {
    border-color: var(--nx-danger) !important;
}

.invalid-feedback,
.error_message,
span.error {
    display: block;
    margin-top: 5px;
    color: var(--nx-danger);
    font-size: 0.84rem;
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

legend {
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-heading-weight);
    font-size: 1.05rem;
    color: var(--nx-heading);
    margin-bottom: var(--nx-space-2);
}

/* ======================================================== 8. TABLES ======= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--nx-text);
}

.table th,
.table td {
    padding: var(--nx-space-2) var(--nx-space-3);
    border-top: 0;
    border-bottom: 1px solid var(--nx-divider);
    vertical-align: middle;
}

.table thead th {
    background: var(--nx-surface-2);
    border-bottom: 1px solid var(--nx-border);
    color: var(--nx-text-muted);
    font-size: 0.79rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.table thead th a { color: inherit; }
.table thead th a:hover { color: var(--nx-primary); }

.table thead th a.asc::after,
.table thead th a.desc::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.table thead th a.asc::after { border-bottom: 5px solid currentColor; }
.table thead th a.desc::after { border-top: 5px solid currentColor; }

.table tbody tr:last-child > td { border-bottom: 0; }

.table-striped tbody tr:nth-of-type(odd),
.table-striped-alt tbody tr:nth-of-type(even) { background: var(--nx-surface-2); }

.table-hover tbody tr:hover { background: var(--nx-surface-hover); }

.table .expand { cursor: pointer; }
.table .expand_details > td { padding: 0; border-bottom: 0; }
.table .subtable { background: var(--nx-surface-2); }
.table .subtable .table { background: transparent; }
.table .subtable thead th { background: transparent; }

.card > .table-responsive > .table > thead th:first-child,
.card > .table-responsive > .table > tbody td:first-child { padding-left: var(--nx-space-4); }

.card > .table-responsive > .table > thead th:last-child,
.card > .table-responsive > .table > tbody td:last-child { padding-right: var(--nx-space-4); }

/* ===================================================== 9. LIST GROUP ====== */

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--nx-radius);
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--nx-space-3);
    background: var(--nx-surface);
    border: 1px solid var(--nx-divider);
    color: var(--nx-text);
}

.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:first-child { border-radius: var(--nx-radius) var(--nx-radius) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--nx-radius) var(--nx-radius); }
.list-group-item:only-child { border-radius: var(--nx-radius); }

.list-group-flush > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.list-group-flush > .list-group-item:first-child { border-top: 0; }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }

a.list-group-item,
.list-group-item-action { color: var(--nx-text); transition: background var(--nx-transition), color var(--nx-transition); }

a.list-group-item:hover,
.list-group-item-action:hover {
    background: var(--nx-surface-hover);
    color: var(--nx-primary);
    z-index: 1;
}

.list-group-item.active {
    background: var(--nx-primary-soft);
    border-color: var(--nx-divider);
    color: var(--nx-on-primary-soft);
    font-weight: 600;
    z-index: 2;
}

.list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--nx-primary);
}

/* Secondary page navigation ---------------------------------------------- */

.nx-side-nav { margin-bottom: var(--nx-space-4); }

.nx-side-nav .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* ==================================================== 10. NEXUM LISTS ===== */

.nexum-list .list-group-item { padding: 0; }

.list-group-item-content {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3);
    min-width: 0;
}

.graphic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--nx-radius);
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-size: 17px;
}

.graphic-item i { color: inherit; }

.list-group-item-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 220px;
    min-width: 0;
    color: inherit;
}

a.list-group-item-name:hover { color: var(--nx-primary); }

.list-group-item-fullname {
    /* KORREKTUR 15.08.2026: In Lagom hatte die Klasse eine eigene Schriftgroesse
       (0.95rem) und Gewicht 500, fett war nur das <b> darin. In Nexum 2.0 fehlt
       die Groesse ganz -- der Text erbt dadurch die Umgebungsgroesse und wirkt
       zu gross und durchgehend fett. Hier wieder angeglichen. */
    display: block;
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: var(--nx-heading);
    overflow-wrap: anywhere;
}

.list-group-item-fullname b {
    font-weight: 600;
}

.list-group-item-group {
    color: var(--nx-text-muted);
    font-weight: 400;
    margin-left: 6px;
}

.text-domain {
    color: var(--nx-text-muted);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.list-group-item-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 110px;
}

.lagom-date-label {
    color: var(--nx-text-faint);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.lagom-date-value { font-size: 0.88rem; color: var(--nx-text); }

.list-group-item-status { flex: 0 0 auto; }

.list-group-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.nexum-list-item-details {
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-surface-2);
    padding: var(--nx-space-3);
}

.nexum-list-item-details:empty { display: none; }

.transaction_applied { cursor: pointer; }

.invoice_applied.expanded i,
.transaction_applied.expanded .list-group-item-actions i { transform: rotate(180deg); }

.invoice_applied i,
.transaction_applied .list-group-item-actions i { transition: transform var(--nx-transition); }

/* Sort chips -------------------------------------------------------------- */

.nexum-list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 0 var(--nx-space-3);
}

.nexum-list-toolbar-label { color: var(--nx-text-faint); font-size: 0.8rem; }

.nexum-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid var(--nx-border);
    border-radius: 999px;
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-size: 0.79rem;
    font-weight: 600;
}

.nexum-sort:hover { border-color: var(--nx-primary); color: var(--nx-primary); }

.nexum-sort.active {
    background: var(--nx-primary-soft);
    border-color: transparent;
    color: var(--nx-on-primary-soft);
}

.nexum-sort.asc::after,
.nexum-sort.desc::after {
    content: "";
    display: inline-block;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
}

.nexum-sort.asc::after { border-bottom: 4.5px solid currentColor; }
.nexum-sort.desc::after { border-top: 4.5px solid currentColor; }

@media (max-width: 767.98px) {
    .list-group-item-content { flex-wrap: wrap; }
    .list-group-item-name { flex-basis: 100%; }
    .list-group-item-date { min-width: 0; }
    .list-group-item-actions { margin-left: 0; width: 100%; }
    .list-group-item-actions .btn { flex: 1 1 auto; }
}

/* ==================================================== 11. DASHBOARD ======= */

.tiles { margin-bottom: var(--nx-space-2); }

.tiles > [class*="col-"] { margin-bottom: var(--nx-space-3); }

.tile {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--nx-radius-lg);
    color: inherit;
    overflow: hidden;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition);
}

a.tile:hover { color: inherit; transform: translateY(-2px); }
body.nx-cards-elevated a.tile:hover { box-shadow: var(--nx-shadow-md); }

.tile-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 104px;
    padding: var(--nx-space-3) var(--nx-space-4);
    background: var(--nx-surface);
    border: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-lg);
    /* Set so cards carrying an admin chosen background can flip their own text */
    color: var(--nx-text);
}

body.nx-cards-elevated .tile-content { box-shadow: var(--nx-shadow-sm); }
body.nx-cards-flat .tile-content { border-color: transparent; box-shadow: none; background: var(--nx-surface-2); }

.tile-stat {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
    font-family: var(--nx-font-heading);
}

.tile-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.72;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tile-icon-absolute {
    position: absolute;
    top: var(--nx-space-3);
    right: var(--nx-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--nx-radius);
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
    font-size: 15px;
}

/* Cards that carry an admin chosen background colour */
.tile-content.nx-tile-colored { border-color: transparent; }
.tile-content.nx-tile-colored .tile-icon-absolute {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
}

body.nx-tiles-stat .tile-content { min-height: 92px; }
body.nx-tiles-stat .tile-stat { font-size: 1.5rem; }

body.nx-tiles-minimal .tile-content {
    min-height: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: var(--nx-space-2) 0;
}

body.nx-tiles-minimal .tile-icon-absolute { display: none; }

/* ======================================================= 12. PORTAL ======= */

.portal-box,
.nx-portal-box { margin-bottom: var(--nx-space-3); }

.portal-box .card,
.nx-portal-box .card { height: 100%; text-align: center; margin-bottom: 0; }

.portal-box .card-body i,
.portal-box .card-body .fas,
.portal-box .card-body .far { color: var(--nx-primary); }

/* ======================================================= 13. ALERTS ======= */

.alert {
    position: relative;
    padding: var(--nx-space-3) var(--nx-space-4);
    margin-bottom: var(--nx-space-3);
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--nx-radius);
    font-size: 0.92rem;
}

.alert p:last-child { margin-bottom: 0; }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }

.alert-info,
.alert-notice {
    background: var(--nx-info-soft);
    border-color: var(--nx-info-border);
    border-left-color: var(--nx-info);
    color: var(--nx-on-info-soft);
}

.alert-success {
    background: var(--nx-success-soft);
    border-color: var(--nx-success-border);
    border-left-color: var(--nx-success);
    color: var(--nx-on-success-soft);
}

.alert-danger,
.alert-error {
    background: var(--nx-danger-soft);
    border-color: var(--nx-danger-border);
    border-left-color: var(--nx-danger);
    color: var(--nx-on-danger-soft);
}

.alert-warning {
    background: var(--nx-warning-soft);
    border-color: var(--nx-warning-border);
    border-left-color: var(--nx-warning);
    color: var(--nx-on-warning-soft);
}

.alert-secondary,
.alert-light {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    border-left-color: var(--nx-border-strong);
    color: var(--nx-text);
}

.alert .close,
.close {
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
}

.close:hover { opacity: 1; color: inherit; }

.alert-dismissible { padding-right: var(--nx-space-6); }
.alert-dismissible .close { position: absolute; top: var(--nx-space-3); right: var(--nx-space-3); }

/* ======================================================= 14. BADGES ======= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-primary { background: var(--nx-primary-soft); color: var(--nx-on-primary-soft); }
.badge-secondary { background: var(--nx-surface-3); color: var(--nx-text-muted); }
.badge-success { background: var(--nx-success-soft); color: var(--nx-on-success-soft); }
.badge-danger { background: var(--nx-danger-soft); color: var(--nx-on-danger-soft); }
.badge-warning { background: var(--nx-warning-soft); color: var(--nx-on-warning-soft); }
.badge-info { background: var(--nx-info-soft); color: var(--nx-on-info-soft); }
.badge-light { background: var(--nx-surface-2); color: var(--nx-text-muted); }
.badge-dark { background: var(--nx-heading); color: var(--nx-surface); }
.badge-default { background: var(--nx-surface-3); color: var(--nx-text-muted); }

.badge-pill { border-radius: 999px; }

/* Counters inside widget tabs */
.lagom-status-name + .lagom-status-count,
.nx-menu-link .badge { font-size: 0.7rem; }

/* =================================================== 15. PAGINATION ======= */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
}

.page-item .page-link,
.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-size: 0.88rem;
    font-weight: 600;
}

.page-item .page-link:hover,
.pagination li a:hover {
    background: var(--nx-surface-hover);
    border-color: var(--nx-primary);
    color: var(--nx-primary);
}

.page-item.active .page-link,
.pagination li.active a,
.pagination li.active span {
    background: var(--nx-primary-solid);
    border-color: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.page-item.disabled .page-link,
.pagination li.disabled a,
.pagination li.disabled span {
    background: var(--nx-surface-2);
    color: var(--nx-text-faint);
    cursor: not-allowed;
}

/* ========================================================= 16. TABS ======= */

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--nx-divider);
    padding-left: 0;
    margin-bottom: var(--nx-space-3);
    list-style: none;
}

.nav-tabs .nav-link,
.nav-tabs > li > a {
    display: block;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0;
    background: transparent;
    color: var(--nx-text-muted);
    font-weight: 600;
}

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { background: var(--nx-surface-hover); color: var(--nx-primary); }

.nav-tabs .nav-link.active,
.nav-tabs > li.active > a {
    background: transparent;
    border-bottom-color: var(--nx-primary);
    color: var(--nx-primary);
}

.nav-pills .nav-link { border-radius: var(--nx-radius); color: var(--nx-text-muted); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--nx-primary-solid); color: var(--nx-on-primary); }

.tab-content > .tab-pane { padding-top: var(--nx-space-2); }

/* ======================================================== 17. MODALS ====== */

.modal-backdrop { background: var(--nx-overlay); }
.modal-backdrop.show { opacity: 1; }

.modal-content {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    box-shadow: var(--nx-shadow-xl);
    color: var(--nx-text);
}

.modal-header {
    align-items: center;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-bottom: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-xl) var(--nx-radius-xl) 0 0;
}

.modal-header h5,
.modal-title { margin: 0; font-size: 1.05rem; }

.modal-body { padding: var(--nx-space-4); }

.modal-footer {
    gap: 8px;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-top: 1px solid var(--nx-divider);
    border-radius: 0 0 var(--nx-radius-xl) var(--nx-radius-xl);
}

.modal-footer:empty { display: none; }

/* ====================================================== 18. TOOLTIPS ====== */

.tooltip-inner {
    background: var(--nx-heading);
    color: var(--nx-surface);
    border-radius: var(--nx-radius-sm);
    padding: 6px 10px;
    font-size: 0.82rem;
}

.bs-tooltip-top .arrow::before { border-top-color: var(--nx-heading); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--nx-heading); }
.bs-tooltip-left .arrow::before { border-left-color: var(--nx-heading); }
.bs-tooltip-right .arrow::before { border-right-color: var(--nx-heading); }

.popover {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-lg);
}

.popover-header { background: var(--nx-surface-2); border-bottom-color: var(--nx-divider); color: var(--nx-heading); }
.popover-body { color: var(--nx-text); }

/* ==================================================== 19. AUTH PAGES ====== */

.nx-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nx-header-height));
    padding: var(--nx-space-5) 0;
}

.whmp-login-box,
.nx-auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: var(--nx-space-5);
    background: var(--nx-surface);
    border: 1px solid var(--nx-divider);
    border-radius: var(--nx-radius-xl);
    box-shadow: var(--nx-shadow-lg);
}

.whmp-login-logo,
.nx-auth-logo { text-align: center; margin-bottom: var(--nx-space-3); }
.whmp-login-logo img,
.nx-auth-logo img { max-height: 52px; width: auto; }

.whmp-login-title,
.nx-auth-title { text-align: center; margin-bottom: var(--nx-space-4); }
.whmp-login-title h4 { margin-bottom: 4px; }

.whmp-empty-state,
.nx-empty {
    text-align: center;
    padding: var(--nx-space-6) var(--nx-space-3);
    color: var(--nx-text-muted);
}

.whmp-empty-state i,
.nx-empty i { color: var(--nx-text-faint); }

/* ==================================================== 20. UTILITIES ======= */

.nx-visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nx-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: 10px 16px;
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
    border-radius: 0 0 var(--nx-radius) 0;
}

.nx-skip-link:focus { left: 0; color: var(--nx-on-primary); }

.fa-spin { animation: nx-spin 1s linear infinite; }

@keyframes nx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Blesta injects this wrapper around ajax loaded widgets */
.widget_box, .widget { min-width: 0; }

/* Keep long content from forcing horizontal page scroll */
.row { min-width: 0; }
[class*="col-"] { min-width: 0; }

@media print {
    .nx-topbar,
    .nx-sidebar,
    .nx-footer,
    .nx-staff-banner,
    .list-group-item-actions,
    .nexum-list-toolbar { display: none !important; }

    body { background: #fff; color: #000; }
    .card { border: 1px solid #ccc; box-shadow: none; }
}

/* ============================================== 21. ACCOUNT SUMMARY ======= */

.card-client-details { overflow: hidden; }

.nx-client-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--nx-space-4) var(--nx-space-3);
    text-align: center;
    background: var(--nx-gradient);
    color: var(--nx-on-gradient);
}

.nx-summary-solid .nx-client-head { background: var(--nx-primary-solid); }

/* ANPASSUNG 15.08.2026: Der Kopfbereich beginnt oben links in der gewaehlten
   Primaerfarbe -- derselben, die auch die Kacheln daneben tragen -- und wird
   nach rechts unten dunkler. Umgesetzt als schwarze Lage mit steigender
   Deckkraft ueber der Farbe, damit es jedem Farbschema folgt, ohne einen
   zweiten Farbwert zu brauchen. Der frueher hier liegende weisse Lichtschein
   ist entfallen; er hat die Flaeche ausgewaschen und sie heller wirken lassen
   als die Nachbarkacheln. */
.nx-summary-gradient .nx-client-head {
    /* EINZIGER REGLER: wie stark die rechte untere Ecke abdunkelt.
       0    = gar nicht, die Flaeche ist einfarbig wie die Nachbarkachel
       0.30 = jetziger Stand, deutlich sichtbar
       0.45 = kraeftig
       Die Farbe selbst bleibt dabei unangetastet -- sie kommt aus
       `--nx-primary`, also aus dem gewaehlten Farbschema. Abgedunkelt wird
       mit einer neutralen schwarzen Lage darueber, damit jeder Farbwechsel
       automatisch mitgeht. */
    --nx-summary-darken: 0.42;

    background:
        linear-gradient(135deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, calc(var(--nx-summary-darken) * 0.33)) 45%,
            rgba(0, 0, 0, var(--nx-summary-darken)) 100%),
        var(--nx-primary);
}

.nx-client-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    color: inherit;
    font-family: var(--nx-font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.nx-summary-plain .nx-client-avatar {
    background: var(--nx-primary-solid);
    box-shadow: none;
    color: var(--nx-on-primary);
}

.nx-client-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nx-client-name {
    font-family: var(--nx-font-heading);
    font-size: 1.05rem;
    font-weight: var(--nx-heading-weight);
    line-height: 1.3;
    color: inherit;
}

.nx-client-company { font-size: 0.86rem; opacity: 0.9; }

.nx-client-id {
    margin-top: 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nx-summary-plain .nx-client-id { background: var(--nx-surface-3); color: var(--nx-text-muted); }

.nx-client-body {
    padding: var(--nx-space-3);
    font-size: 0.86rem;
    color: var(--nx-text-muted);
    text-align: center;
}

.nx-client-body address { margin: 0; line-height: 1.7; }
.nx-client-body address:empty { display: none; }

.nx-client-email {
    display: inline-block;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.nx-client-numbers {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    line-height: 1.7;
}

.nx-client-actions {
    display: flex;
    gap: 8px;
    padding: 0 var(--nx-space-3) var(--nx-space-3);
}

.nx-client-actions .btn { flex: 1 1 0; min-width: 0; }

.card-client-contacts .card-header i { color: var(--nx-primary); }

.list-options .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.list-options .list-group-item i { flex-shrink: 0; color: var(--nx-text-faint); }
.list-options .list-group-item p { margin: 0; font-size: 0.86rem; }

.amounts .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.currency_value { font-weight: 700; color: var(--nx-heading); }

/* =========================================== 22. LEGACY CLASS SUPPORT ===== */
/*
 * Older markup (or a partially deployed template) uses these class names. They
 * are mapped onto the same tokens so the page still renders correctly instead of
 * falling back to unstyled Bootstrap.
 */

.header,
.nexum-topbar,
.nav-content {
    background: var(--nx-header-bg);
    color: var(--nx-header-text);
    border-bottom: 1px solid var(--nx-divider);
}

.nexum-nav,
.whmp-nav,
#main-navbar {
    background: transparent;
}

.nexum-topbar-inner,
.header-right {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-height: var(--nx-header-height);
}

.nexum-nav-list,
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nexum-nav-link,
.navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--nx-radius);
    color: var(--nx-header-muted);
    font-weight: 500;
    white-space: nowrap;
}

.nexum-nav-link:hover,
.navbar-nav .nav-link:hover,
.nexum-nav-item.active > .nexum-nav-link,
.navbar-nav .nav-item.active > .nav-link {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nexum-actions,
.nexum-account { display: flex; align-items: center; gap: 6px; }

.nexum-avatar,
.client-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.nexum-footer,
.footer {
    padding: var(--nx-space-4) 0;
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.nexum-staff-banner {
    background: var(--nx-info-soft);
    color: var(--nx-on-info-soft);
    border-bottom: 1px solid var(--nx-info-border);
    padding: 9px 0;
    font-size: 0.875rem;
}

.client-avatar {
    display: flex;
    justify-content: center;
    padding: var(--nx-space-4) var(--nx-space-3) 0;
}

.client-avatar img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }

.client-address,
.client-numbers { color: var(--nx-text-muted); font-size: 0.86rem; }
.client-numbers { list-style: none; margin: 8px 0 0; padding: 0; }

/* The page title bar reads its colour from the tokens, not Blesta's theme.css */
.title,
.whmp-page-title {
    background: var(--nx-surface);
    border-bottom: 1px solid var(--nx-divider);
    padding: var(--nx-space-4) 0 0;
}

.title h1,
.title h3 {
    margin: 0;
    color: var(--nx-heading);
    font-size: 1.55rem;
}

.nx-page-title { background: transparent; border-bottom: 0; }

/* ====================================== 23. BLESTA theme.css OVERRIDES ==== */
/*
 * Blesta generates theme.css from Settings > Company > Look and Feel > Themes and
 * loads it before this file. A few of its rules out-specify or !important the
 * component styles above, which produced clashing colours (purple card headers on
 * a blue palette). Those exact rules are neutralised here so the Nexum palette
 * owns its own components; everything theme.css touches that Nexum does not style
 * still applies.
 */

.card.card-blesta > .card-header,
.card-blesta > .card-header {
    background: transparent;
    color: var(--nx-heading);
}

.title,
.title h3,
.title h1 {
    color: var(--nx-heading);
}

a.list-group-item:hover,
a.list-group-item:focus,
.list-group.list-options a.list-group-item:hover,
.list-group.list-options a.list-group-item:focus {
    background-color: var(--nx-surface-hover) !important;
    color: var(--nx-primary);
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: var(--nx-primary-soft) !important;
    color: var(--nx-on-primary-soft);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--nx-surface-hover) !important;
}

.list-group-item.credits {
    color: var(--nx-text) !important;
}

.list-group-item h4 {
    color: var(--nx-heading) !important;
}

.top-focus-box {
    background-color: var(--nx-surface-2) !important;
}

/* Blesta paints the body and links from theme.css too */
body { background: var(--nx-bg); }

/* ================================== 24. MODERN REFRESH & FIXES =========== */

/* -- Readable brand colour ------------------------------------------------ */
/*
 * --nx-primary is the exact brand colour and is used for fills and accents.
 * Text sitting directly on a card uses --nx-primary-readable, which is the same
 * hue nudged until it clears 4.5:1, so links and active tabs never wash out.
 */

a { color: var(--nx-primary-readable); }
a:hover, a:focus { color: var(--nx-primary-hover); }

.nav-tabs .nav-link.active,
.nav-tabs > li.active > a,
.nav-tabs li a.active {
    color: var(--nx-primary-readable);
    background: transparent;
    border-bottom-color: var(--nx-primary);
}

.nav-tabs .nav-link,
.nav-tabs > li > a { background: transparent; }

.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { color: var(--nx-primary-readable); }

.list-group-item.active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus { color: var(--nx-on-primary-soft); }

.nexum-sort:hover,
.table thead th a:hover,
a.list-group-item-name:hover,
.list-options .list-group-item:hover { color: var(--nx-primary-readable); }

.text-primary { color: var(--nx-primary-readable) !important; }

/* -- Widget header action buttons ---------------------------------------- */
/*
 * NexumWidgetClient renders "Make Payment" / "Open Ticket" as .btn.btn-sm with
 * no colour class, which left them invisible. Give them a real appearance.
 */

.lagom-action-btn,
.card-header .btn:not([class*="btn-"]),
.card-header .lagom-action-btn {
    background: var(--nx-primary-soft);
    border-color: transparent;
    color: var(--nx-on-primary-soft);
    font-weight: 600;
}

.lagom-action-btn:hover,
.card-header .lagom-action-btn:hover {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.lagom-status-btn {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.lagom-status-btn:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary-readable);
}

/* -- One caret only ------------------------------------------------------- */
/*
 * Menu links render an explicit chevron icon, so Bootstrap's ::after triangle
 * has to be suppressed on those specific elements or both show.
 */

.nx-menu-link.dropdown-toggle::after,
.nx-action-btn.dropdown-toggle::after,
.nx-sidenav-link::after { display: none; }

/* -- Cards ---------------------------------------------------------------- */

.card,
.panel {
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
}

body.nx-cards-elevated .card,
body.nx-cards-elevated .panel {
    border-color: var(--nx-border);
    box-shadow: var(--nx-shadow-sm);
}

/* A one pixel highlight along the top edge reads as light falling on the card */
body.nx-cards-elevated .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--nx-sheen);
    pointer-events: none;
    z-index: 1;
}

body.nx-cards-flat .card::before,
body.nx-cards-bordered .card::before { display: none; }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--nx-divider);
}

/* -- Buttons -------------------------------------------------------------- */

.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 3px var(--nx-primary-glow); }

.btn-primary:hover { box-shadow: 0 2px 10px var(--nx-primary-glow); }

.btn-light,
.btn-default {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.btn-light:hover,
.btn-default:hover {
    background: var(--nx-surface-3);
    border-color: var(--nx-border-strong);
    color: var(--nx-primary-readable);
}

/* -- Forms ---------------------------------------------------------------- */

input[type="file"]::file-selector-button {
    background: var(--nx-primary-solid);
    color: var(--nx-on-primary);
}

.custom-select {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-input-border);
    color: var(--nx-input-text);
}

.custom-file-label,
.custom-file-label::after {
    background-color: var(--nx-input-bg);
    border-color: var(--nx-input-border);
    color: var(--nx-input-text);
}

.input-group-text {
    background: var(--nx-surface-2);
    border-color: var(--nx-input-border);
    color: var(--nx-text-muted);
}

/* Blesta renders a small helper trigger inside some inputs */
.input-group-append .btn,
.input-group-prepend .btn {
    background: var(--nx-surface-2);
    border-color: var(--nx-input-border);
    color: var(--nx-text-muted);
}

.input-group-append .btn:hover,
.input-group-prepend .btn:hover {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

/* -- Tables --------------------------------------------------------------- */

.table,
.table td,
.table th {
    background-color: transparent;
    border-color: var(--nx-divider);
    color: var(--nx-text);
}

.table thead th {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text-muted);
}

.table-curved,
.table-curved td,
.table-curved th { background-color: transparent; }

/* -- Widget filter bar ---------------------------------------------------- */

form.widget_filter_form,
.widget_filter_form,
.well {
    background: var(--nx-surface-2) !important;
    border: 0;
    border-bottom: 1px solid var(--nx-divider);
    box-shadow: none;
    color: var(--nx-text);
}

/* -- Alerts / message boxes ---------------------------------------------- */

.alert-info a,
.alert-success a,
.alert-danger a,
.alert-warning a { color: inherit; }

/* Blesta's CMS content block on the portal page */
.well p,
.well li,
.well h1, .well h2, .well h3, .well h4 { color: var(--nx-text); }

/* -- Portal boxes --------------------------------------------------------- */

.portal-box .card-body h3,
.portal-box .card-body h4,
.nx-portal-box .card-body h3 { color: var(--nx-heading); }

.portal-box .card-body i,
.portal-box .card-body .fas,
.portal-box .card-body .far,
.portal-box .card-body .fab {
    color: var(--nx-primary-readable);
    font-size: 2.1rem;
    margin-bottom: var(--nx-space-2);
}

/* -- Tiles ---------------------------------------------------------------- */

.tile-content {
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
}

.tile-content:not(.nx-tile-colored) .tile-stat { color: var(--nx-heading); }
.tile-content:not(.nx-tile-colored) .tile-title { color: var(--nx-text-muted); opacity: 1; }

.tile-content.nx-tile-colored .tile-stat,
.tile-content.nx-tile-colored .tile-title { color: inherit; }

/* -- Account summary, fully themed --------------------------------------- */
/*
 * The body no longer stays white under a coloured header: it sits on a tinted
 * surface so the card reads as one object.
 */

.nx-summary-gradient .nx-client-body,
.nx-summary-solid .nx-client-body {
    background: var(--nx-primary-soft);
    color: var(--nx-on-primary-soft);
}

.nx-summary-gradient .nx-client-body a,
.nx-summary-solid .nx-client-body a { color: var(--nx-on-primary-soft); font-weight: 600; }

.nx-summary-gradient .nx-client-actions,
.nx-summary-solid .nx-client-actions {
    background: var(--nx-primary-soft);
    padding-top: var(--nx-space-2);
}

.nx-client-head {
    position: relative;
    z-index: 1;
    padding-bottom: var(--nx-space-4);
}

.card-client-details { border-radius: var(--nx-radius-lg); }

/* -- Staff banner --------------------------------------------------------- */

.nx-staff-banner { border-bottom-color: var(--nx-border); }

/* -- Dropdown menus ------------------------------------------------------- */

.dropdown-menu {
    background: var(--nx-surface);
    border-color: var(--nx-border);
    box-shadow: var(--nx-shadow-lg);
}

/* -- Modals --------------------------------------------------------------- */

.modal-content {
    background: var(--nx-surface);
    border-color: var(--nx-border);
}

/* -- Pagination ----------------------------------------------------------- */

.page-item .page-link,
.pagination li a,
.pagination li span {
    background: var(--nx-surface);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

.page-item.disabled .page-link { background: var(--nx-surface-2); color: var(--nx-text-faint); }

/* -- Progress / misc ------------------------------------------------------ */

.progress { background: var(--nx-surface-3); }
.img-thumbnail { background: var(--nx-surface-2); border-color: var(--nx-border); }
.breadcrumb { background: var(--nx-surface-2); border-radius: var(--nx-radius); }
.close { color: var(--nx-text); }
hr { border-top-color: var(--nx-divider); }

/* ============================== 25. BLESTA PLUGIN COMPATIBILITY ========== */
/*
 * Large parts of the client area are rendered by Blesta's own plugins (CMS
 * portal, order forms, knowledgebase, downloads, documents). Their stylesheets
 * are injected after this one, so their colours are neutralised by
 * tools/tokenize_css.php. What follows gives those components the same shape,
 * spacing and elevation as the rest of the theme.
 *
 * Everything here is presentation only: no markup or class name is expected to
 * change, so every plugin's JavaScript keeps working untouched.
 */

/* -- CMS portal ----------------------------------------------------------- */

.thanks blockquote,
blockquote {
    padding: var(--nx-space-3) var(--nx-space-4) !important;
    margin: 0 0 var(--nx-space-4) !important;
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-left: 3px solid var(--nx-primary) !important;
    border-right: 0 !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    color: var(--nx-text) !important;
    font-size: 0.94rem !important;
}

.thanks blockquote h1,
.thanks blockquote h2,
.thanks blockquote h3,
.thanks blockquote h4 { color: var(--nx-heading) !important; }

.thanks blockquote a { color: var(--nx-primary-readable) !important; font-weight: 600 !important; }

.portal-box { margin-bottom: var(--nx-space-3) !important; }

.portal-box .card {
    height: 100% !important;
    margin-bottom: 0 !important;
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition),
                border-color var(--nx-transition) !important;
}

.portal-box .card:hover {
    background: var(--nx-surface) !important;
    border-color: var(--nx-primary) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--nx-shadow-md) !important;
}

.portal-box .card .card-body { padding: var(--nx-space-4) var(--nx-space-3) !important; text-align: center !important; }

.portal-box a { color: inherit !important; display: block !important; height: 100% !important; }
.portal-box a:hover { color: inherit !important; }

.portal-box i,
.portal-box .fas,
.portal-box .far,
.portal-box .fab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto var(--nx-space-2) !important;
    border-radius: var(--nx-radius-lg) !important;
    background: var(--nx-primary-soft) !important;
    color: var(--nx-on-primary-soft) !important;
    font-size: 22px !important;
    transition: background var(--nx-transition), color var(--nx-transition) !important;
}

.portal-box .card:hover i,
.portal-box .card:hover .fas,
.portal-box .card:hover .far {
    background: var(--nx-primary-solid) !important;
    color: var(--nx-on-primary) !important;
}

.portal-box h4 {
    margin-bottom: 6px !important;
    color: var(--nx-heading) !important;
    font-size: 1.02rem !important;
}

.portal-box p {
    margin: 0 !important;
    color: var(--nx-text-muted) !important;
    font-size: 0.88rem !important;
}

/* -- Order form: sections and steps --------------------------------------- */

.section-title {
    margin: 0 0 var(--nx-space-3) !important;
    padding-bottom: var(--nx-space-2) !important;
    border-bottom: 1px solid var(--nx-divider) !important;
}

.section-title h3,
.section-title h4 {
    margin: 0 !important;
    color: var(--nx-heading) !important;
    font-size: 1.12rem !important;
}

.card-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--nx-space-2) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--nx-space-4) !important;
}

.card-steps .nav-link,
.card-steps a {
    border-radius: 999px !important;
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-text-muted) !important;
    padding: 7px 15px !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
}

.card-steps .nav-link.active,
.card-steps a.active,
.card-steps li.active a {
    background: var(--nx-primary-solid) !important;
    border-color: transparent !important;
    color: var(--nx-on-primary) !important;
}

/* -- Order form: packages ------------------------------------------------- */

.package-groups,
.package-boxes,
.package-list { margin-bottom: var(--nx-space-3) !important; }

.package,
.package-item,
.package-block {
    position: relative !important;
    height: 100% !important;
    padding: var(--nx-space-4) !important;
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition),
                transform var(--nx-transition) !important;
}

.package:hover,
.package-item:hover,
.package-block:hover {
    border-color: var(--nx-primary) !important;
    box-shadow: var(--nx-shadow-md) !important;
    transform: translateY(-2px) !important;
}

.package.selected,
.package-item.selected,
.package-block.active,
.package-selected {
    border-color: var(--nx-primary) !important;
    box-shadow: 0 0 0 3px var(--nx-primary-glow) !important;
}

.package-name,
.package h3,
.package h4,
.package-block h3 {
    color: var(--nx-heading) !important;
    font-family: var(--nx-font-heading) !important;
}

.package-description,
.package p { color: var(--nx-text-muted) !important; font-size: 0.9rem !important; }

.package .price,
.package-item .price,
.package-slider .package-selected h3 {
    color: var(--nx-primary-readable) !important;
    font-weight: 700 !important;
}

.instructions { color: var(--nx-text-muted) !important; font-size: 0.88rem !important; }

/* Bootstrap-slider used by the wizard template */
.package-slider .slider-track,
.package-slider .slider-track-high,
.package-slider .slider-track-low { background: var(--nx-surface-3) !important; }

.package-slider .slider-selection { background: var(--nx-primary-solid) !important; }

.package-slider .slider-handle {
    background: var(--nx-primary-solid) !important;
    border: 2px solid var(--nx-surface) !important;
    box-shadow: var(--nx-shadow-sm) !important;
}

/* -- Order form: cart and totals ------------------------------------------ */

.card-order,
.cart-summary,
.totals-box,
.order-listing {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
    overflow: hidden !important;
}

.card-order .table,
.cart-summary .table,
.totals .table { margin-bottom: 0 !important; background: transparent !important; }

.card-order .table > thead > tr > th,
.cart-summary .table > thead > tr > th {
    background: var(--nx-surface-2) !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-text-muted) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.card-order .table > tbody > tr > td,
.cart-summary .table > tbody > tr > td {
    border-color: var(--nx-divider) !important;
    color: var(--nx-text) !important;
}

.card-order .total-due,
.totals-box .total-due,
.total-due {
    padding: var(--nx-space-3) var(--nx-space-4) !important;
    background: var(--nx-primary-soft) !important;
    color: var(--nx-on-primary-soft) !important;
    border-top: 1px solid var(--nx-border) !important;
}

.card-order .total-due h4,
.total-due h4 { margin: 0 !important; color: inherit !important; font-weight: 700 !important; }

.order-row,
.order-details-cell,
.order-details-content { border-color: var(--nx-divider) !important; color: var(--nx-text) !important; }

/* -- Order form: payment -------------------------------------------------- */

/* KORREKTUR 16.08.2026: Diese Regel behandelte `.gateway` und `.payment_type`
   als Container. Blesta vergibt beide aber an BEDIENELEMENTE -- `gateway` sitzt
   auf dem Radioknopf der Zahlungsart (`client_pay_method.pdt:96` und
   `plugins/order/.../checkout.pdt:118`), `payment_type` ist der Feldname eines
   Auswahlfelds. Aus einem 18 Pixel grossen Radioknopf wurde dadurch ein Kasten
   mit Rahmen und Innenabstand, und `background: ... !important` uebermalte den
   ausgefuellten Punkt im Zustand `:checked` -- die Auswahl war unsichtbar, die
   Offline-Zahlungsarten (SwissQR, Banueberweisung) wirkten funktionslos.
   Formularelemente sind hier deshalb ausgenommen; `.payment_buttons` ist ein
   echter Container und behaelt seine Gestaltung. */
.payment_type:not(input):not(select):not(textarea),
.gateway:not(input):not(select),
.payment_buttons {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    padding: var(--nx-space-3) !important;
    margin-bottom: var(--nx-space-2) !important;
    transition: border-color var(--nx-transition), background var(--nx-transition) !important;
}

.payment_type:not(input):not(select):hover,
.gateway:not(input):not(select):hover { border-color: var(--nx-primary) !important; background: var(--nx-surface-hover) !important; }

.gateway-logo { max-height: 34px !important; width: auto !important; }

.currency,
.currency-selector { color: var(--nx-text-muted) !important; }
.currency form * { color: inherit !important; }

.currency_value { color: var(--nx-heading) !important; font-weight: 700 !important; }

/* Terms of service block */
.terms,
#tos,
.tos {
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    padding: var(--nx-space-3) !important;
    color: var(--nx-text) !important;
}

/* -- Order form: signup / login ------------------------------------------- */

.signup_form,
.login_form,
.continue_form,
.confirm,
.credit_confirm { color: var(--nx-text) !important; }

/* ... ausser im Bezahlknopf.
   Blesta nennt den Textbehaelter IM Knopf ebenfalls `confirm` bzw.
   `credit_confirm` (`plugins/order/views/templates/wizard/checkout.pdt`,
   der Knopf "Pay & Complete Order"). Die Regel darueber meint die
   Formularbereiche der Bestellstrecke, trifft mit `!important` aber auch
   diesen span -- und faerbte die Beschriftung dunkel, waehrend der Pfeil
   daneben ausserhalb des span steht und weiss blieb. Genau dieses Bild
   hatte Robin am 26.09.2026 vor sich.
   Innerhalb eines Knopfes gilt dessen eigene Schriftfarbe. */
.btn .confirm,
.btn .credit_confirm { color: inherit !important; }

.signup_form legend,
.login_form legend { color: var(--nx-heading) !important; }

.package_options,
.package_options .form-group { color: var(--nx-text) !important; }

.input-group-addon {
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--nx-space-2) !important;
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-input-border) !important;
    color: var(--nx-text-muted) !important;
}

.help-block,
.instructions,
.noindent { color: var(--nx-text-muted) !important; }

.order-tooltip { color: var(--nx-text-faint) !important; }

/* -- Knowledgebase (support manager) -------------------------------------- */

.kb-category,
.kb-article,
.knowledgebase .card {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
}

.kb-category:hover,
.kb-article:hover { border-color: var(--nx-primary) !important; }

.knowledgebase h1,
.knowledgebase h2,
.knowledgebase h3 { color: var(--nx-heading) !important; }

.breadcrumbs .breadcrumb,
.breadcrumb {
    background: var(--nx-surface-2) !important;
    border-radius: var(--nx-radius) !important;
    color: var(--nx-text-muted) !important;
}

.breadcrumb a { color: var(--nx-primary-readable) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nx-text-faint) !important; }

/* -- Support tickets ------------------------------------------------------ */

.ticket-reply,
.ticket_reply,
.reply {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    margin-bottom: var(--nx-space-3) !important;
}

.ticket-reply.staff,
.reply.staff { border-left: 3px solid var(--nx-primary) !important; }

.ticket-reply .reply-header,
.reply-header {
    background: var(--nx-surface-2) !important;
    border-bottom: 1px solid var(--nx-divider) !important;
    color: var(--nx-text-muted) !important;
}

/* -- Downloads and documents ---------------------------------------------- */

.download-category,
.download-item,
.document-item {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
}

/* -- Generic plugin scaffolding ------------------------------------------- */
/*
 * Plugins commonly reuse these Bootstrap 3 era wrappers. Give them the theme's
 * surface treatment so nothing renders as a bare white slab.
 */

.well,
.panel-default,
.jumbotron,
.thumbnail {
    background: var(--nx-surface-2) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    color: var(--nx-text) !important;
    box-shadow: none !important;
}

.panel-default > .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--nx-divider) !important;
    color: var(--nx-heading) !important;
}

.page-header {
    border-bottom: 1px solid var(--nx-divider) !important;
    margin: 0 0 var(--nx-space-4) !important;
    padding-bottom: var(--nx-space-2) !important;
}

.page-header h1,
.page-header h2 { color: var(--nx-heading) !important; }

/* Anything a plugin renders inside a widget keeps the theme's text colour */
.widget_box,
.widget,
.widget_content { color: var(--nx-text) !important; }

/* ANPASSUNG 15.08.2026: Seitentitel kleiner und mit vorangestelltem Zeichen.
   Er stand vorher gross ueber jeder Seite und wiederholte nur „My Account". */
.nx-page-title h1 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
    opacity: 0.85;
    /* Einzug um etwa eine Symbolbreite, sonst klebt das Symbol an der Kante. */
    padding-left: 1.5rem;
}

.nx-page-title-mark {
    /* Symbol des aktiven Menuepunktes vor dem Titel. Bewusst kleiner und
       gedaempfter als die Schrift, damit es begleitet statt zu dominieren. */
    display: inline-block;
    width: 1.4em;
    font-size: 0.9em;
    opacity: 0.5;
    color: var(--nx-primary);
    text-align: left;
}


/* ANPASSUNG 15.08.2026: Logo im Dunkelmodus weiss darstellen.
   Blesta kennt ein dunkles Logo nur fuer den Adminbereich (`logo_admin_dark`),
   fuer den Kundenbereich gibt es keines -- und Nexum bringt auch keines mit.
   Statt eine zweite Datei zu pflegen, wird das vorhandene Logo hier zu einer
   weissen Flaeche umgerechnet: `brightness(0)` macht alles schwarz,
   `invert(1)` dreht es zu weiss. Das funktioniert mit SVG wie mit PNG und
   unabhaengig davon, welches Logo hochgeladen wurde.

   Zu bedenken: es wird das GANZE Logo weiss, also auch farbige Bildmarken.
   Wer die Farbe behalten will, braucht eine eigene helle Fassung als Datei. */
body#whmp-dark-mode .nx-brand img,
html[data-nx-theme="dark"] .nx-brand img {
    filter: brightness(0) invert(1);
}
/* -- Bestellformular-Liste: Rahmen im Rahmen und abgeschnittener Knopf ------
   18.08.2026

   `plugins/order/views/default/forms.pdt` baut je Formular:

       <div class="col-lg-12 order-listing">   <- Gitterspalte
           <div class="card bg-light p-3">     <- die eigentliche Karte

   `.order-listing` ist also die SPALTE, nicht die Karte. Die Regel weiter oben
   (Abschnitt "Order form: cart and totals") dekoriert sie trotzdem wie eine --
   daher der doppelte Rahmen. Ihr `overflow: hidden` schneidet zusaetzlich den
   "Order Now"-Knopf ab, denn der haengt an `pull-right`: eine Bootstrap-3-
   Klasse, die Blesta nur noch als Notbehelf `float: right` mitliefert. Als
   Float sitzt er ausserhalb des Flusses und stoesst an die Kante.

   Deshalb hier: die Spalte wieder neutral, die Dekoration auf die Karte, und
   die Kopfzeile mit Flexbox statt Float ausrichten. Rein im Theme geloest --
   `forms.pdt` gehoert Blesta und wird beim naechsten Update ersetzt. */
.order-listing {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.order-listing > .card {
    background: var(--nx-surface) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-sm) !important;
}

/* Titel und Knopf auf einer Hoehe, der Knopf rechtsbuendig ohne Float. */
.order-listing > .card > .row { align-items: center; }

.order-listing .head-item {
    display: flex;
    align-items: center;
}

.order-listing .head-item > .btn {
    float: none !important;
    margin-left: auto;
    white-space: nowrap;
}

/* Der zweite Knopf in `forms.pdt` ist fuer schmale Fenster gedacht
   (`d-sm-none`) und haengt direkt in der `.row`. Als Flex-Element waere er
   nur so breit wie sein Text -- `btn-block` allein reicht in Bootstrap 4
   nicht, wenn der Elternteil ein Flex-Container ist. */
.order-listing > .card > .row > .btn {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Nachtrag: `.card` traegt weiter oben (Abschnitt Karten) selbst ein
   `overflow: hidden`. Das galt der abgerundeten Ecke bei Karten mit Tabelle
   oder Kopfleiste -- hier schneidet es den Knopf ab, sobald er auch nur einen
   Pixel ueber die Karte hinausragt. Fuer diese eine Karte zuruecknehmen. */
.order-listing > .card { overflow: visible !important; }