.wwx-theme .card,
.wwx-theme .wwx-card {
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-card);
    border: 1px solid var(--wwx-border-subtle);
    border-radius: var(--wwx-radius-lg);
    box-shadow: var(--wwx-shadow-sm);
}

.wwx-theme .card-header,
.wwx-theme .card-footer {
    background: var(--wwx-surface-muted);
    border-color: var(--wwx-border-subtle);
}

.wwx-theme .card > .card-header:first-child {
    border-radius: calc(var(--wwx-radius-lg) - 1px) calc(var(--wwx-radius-lg) - 1px) 0 0;
}

.wwx-theme .card > .card-footer:last-child {
    border-radius: 0 0 calc(var(--wwx-radius-lg) - 1px) calc(var(--wwx-radius-lg) - 1px);
}

/*
 * Einige ältere Views verwenden .card und Bootstrap-Spaltenklasse am selben
 * Element. Der Spalten-Gutter wird dadurch zum Card-Innenabstand.
 */
.wwx-theme .row > .card[class*="col-"] {
    width: calc(var(--bs-card-column-width, 100%) - var(--bs-gutter-x));
    margin-right: calc(var(--bs-gutter-x) * 0.5);
    margin-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 576px) {
    .wwx-theme .row > .card.col-sm-1 { --bs-card-column-width: 8.33333333%; }
    .wwx-theme .row > .card.col-sm-2 { --bs-card-column-width: 16.66666667%; }
    .wwx-theme .row > .card.col-sm-3 { --bs-card-column-width: 25%; }
    .wwx-theme .row > .card.col-sm-4 { --bs-card-column-width: 33.33333333%; }
    .wwx-theme .row > .card.col-sm-5 { --bs-card-column-width: 41.66666667%; }
    .wwx-theme .row > .card.col-sm-6 { --bs-card-column-width: 50%; }
    .wwx-theme .row > .card.col-sm-7 { --bs-card-column-width: 58.33333333%; }
    .wwx-theme .row > .card.col-sm-8 { --bs-card-column-width: 66.66666667%; }
    .wwx-theme .row > .card.col-sm-9 { --bs-card-column-width: 75%; }
    .wwx-theme .row > .card.col-sm-10 { --bs-card-column-width: 83.33333333%; }
    .wwx-theme .row > .card.col-sm-11 { --bs-card-column-width: 91.66666667%; }
    .wwx-theme .row > .card.col-sm-12 { --bs-card-column-width: 100%; }
}

.wwx-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wwx-space-4);
    margin-bottom: var(--wwx-space-5);
}

.wwx-page-header__title {
    margin: 0;
    font-size: var(--wwx-font-size-xl);
    font-weight: 700;
}

.wwx-page-header__description {
    margin: var(--wwx-space-1) 0 0;
    color: var(--wwx-text-secondary);
}

.wwx-action-bar,
.wwx-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--wwx-space-3);
}

.wwx-empty-state {
    padding: var(--wwx-space-8) var(--wwx-space-5);
    text-align: center;
    color: var(--wwx-text-secondary);
    border: 1px dashed var(--wwx-border-strong);
    border-radius: var(--wwx-radius-lg);
}

.wwx-empty-state__icon {
    display: block;
    margin-bottom: var(--wwx-space-3);
    color: var(--wwx-color-forest-300);
    font-size: 2rem;
}

.wwx-theme .toast-container {
    z-index: var(--wwx-z-toast);
}

.wwx-theme .alert {
    border: 1px solid transparent;
    border-radius: var(--wwx-radius-md);
}

.wwx-theme .alert-success {
    color: var(--wwx-color-success);
    background: var(--wwx-color-success-soft);
    border-color: var(--wwx-color-success);
}

.wwx-theme .alert-info {
    color: var(--wwx-color-info);
    background: var(--wwx-color-info-soft);
    border-color: var(--wwx-color-info);
}

.wwx-theme .alert-warning {
    color: var(--wwx-color-warning);
    background: var(--wwx-color-warning-soft);
    border-color: var(--wwx-color-warning);
}

.wwx-theme .alert-danger {
    color: var(--wwx-color-danger);
    background: var(--wwx-color-danger-soft);
    border-color: var(--wwx-color-danger);
}

.wwx-theme .badge {
    border-radius: var(--wwx-radius-pill);
    font-weight: 600;
}

.wwx-theme.wwx-color-dark .badge.text-bg-warning,
.wwx-theme.wwx-color-dark .badge.bg-warning,
.wwx-theme.wwx-color-dark .badge.bg-warning-subtle,
.wwx-theme.wwx-color-dark .badge.badge-soft-warning {
    color: #2b1a00 !important;
    background-color: #f4c95d !important;
    border: 1px solid #ffe09a !important;
}

.wwx-theme.wwx-color-dark .badge.text-bg-success,
.wwx-theme.wwx-color-dark .badge.bg-success,
.wwx-theme.wwx-color-dark .badge.bg-success-subtle,
.wwx-theme.wwx-color-dark .badge.badge-soft-success {
    color: #eafff2 !important;
    background-color: #176b46 !important;
    border: 1px solid #4fc58a !important;
}

.wwx-theme.wwx-color-dark .badge.text-bg-danger,
.wwx-theme.wwx-color-dark .badge.bg-danger,
.wwx-theme.wwx-color-dark .badge.bg-danger-subtle {
    color: #fff1f1 !important;
    background-color: #9f3f42 !important;
    border: 1px solid #e47b7d !important;
}

.wwx-theme.wwx-color-dark .badge.text-bg-info,
.wwx-theme.wwx-color-dark .badge.bg-info,
.wwx-theme.wwx-color-dark .badge.bg-info-subtle {
    color: #eaf8ff !important;
    background-color: #236c99 !important;
    border: 1px solid #69b6e6 !important;
}

.wwx-theme.wwx-color-dark .badge.text-bg-primary,
.wwx-theme.wwx-color-dark .badge.bg-primary,
.wwx-theme.wwx-color-dark .badge.bg-primary-subtle,
.wwx-theme.wwx-color-dark .badge.badge-soft-primary {
    color: #eef4ff !important;
    background-color: #315eae !important;
    border: 1px solid #78a5f2 !important;
}

.wwx-theme.wwx-color-dark .badge.text-bg-secondary,
.wwx-theme.wwx-color-dark .badge.bg-secondary,
.wwx-theme.wwx-color-dark .badge.bg-secondary-subtle,
.wwx-theme.wwx-color-dark .badge.badge-soft-secondary,
.wwx-theme.wwx-color-dark .badge.text-bg-light,
.wwx-theme.wwx-color-dark .badge.bg-light {
    color: #f1f5f7 !important;
    background-color: #45535e !important;
    border: 1px solid #7c8c98 !important;
}

.wwx-theme.wwx-color-dark .badge.text-bg-dark,
.wwx-theme.wwx-color-dark .badge.bg-dark {
    color: #ffffff !important;
    background-color: #111b23 !important;
    border: 1px solid #647482 !important;
}

.wwx-theme .card-header.bg-primary,
.wwx-theme .card-header.bg-secondary,
.wwx-theme .card-header.bg-info,
.wwx-theme .card-header.bg-success,
.wwx-theme .card-header.bg-light {
    color: var(--wwx-text-primary) !important;
    background: rgba(18, 54, 41, 0.94) !important;
    border-bottom-color: var(--wwx-border-strong);
}

.wwx-theme .dropdown-menu {
    --bs-dropdown-color: var(--wwx-text-primary);
    --bs-dropdown-bg: var(--wwx-surface-glass);
    --bs-dropdown-border-color: var(--wwx-border-subtle);
    --bs-dropdown-link-color: var(--wwx-text-primary);
    --bs-dropdown-link-hover-color: var(--wwx-color-white);
    --bs-dropdown-link-hover-bg: var(--wwx-color-slate-hover);
    --bs-dropdown-link-active-color: var(--wwx-color-white);
    --bs-dropdown-link-active-bg: var(--wwx-color-forest-600);
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-glass);
    border: 1px solid var(--wwx-border-subtle);
    border-radius: var(--wwx-radius-md);
    box-shadow: var(--wwx-shadow-md);
    backdrop-filter: blur(22px);
}

.wwx-theme .dropdown-header {
    color: var(--wwx-text-secondary);
}

.wwx-theme .list-group {
    --bs-list-group-color: var(--wwx-text-primary);
    --bs-list-group-bg: var(--wwx-surface-raised);
    --bs-list-group-border-color: var(--wwx-border-subtle);
    --bs-list-group-action-color: var(--wwx-text-primary);
    --bs-list-group-action-hover-color: var(--wwx-color-white);
    --bs-list-group-action-hover-bg: var(--wwx-color-slate-hover);
    --bs-list-group-active-color: var(--wwx-color-white);
    --bs-list-group-active-bg: var(--wwx-color-forest-600);
    --bs-list-group-active-border-color: var(--wwx-color-forest-500);
}

.wwx-theme .accordion {
    --bs-accordion-color: var(--wwx-text-primary);
    --bs-accordion-bg: var(--wwx-surface-card);
    --bs-accordion-border-color: var(--wwx-border-subtle);
    --bs-accordion-btn-color: var(--wwx-text-primary);
    --bs-accordion-btn-bg: var(--wwx-surface-raised);
    --bs-accordion-active-color: var(--wwx-color-white);
    --bs-accordion-active-bg: var(--wwx-color-forest-soft);
}

.wwx-theme .accordion-button::after {
    filter: invert(1) grayscale(1);
}

.wwx-theme .nav-tabs {
    --bs-nav-tabs-border-color: var(--wwx-border-subtle);
    --bs-nav-tabs-link-hover-border-color: var(--wwx-border-subtle);
    --bs-nav-tabs-link-active-color: var(--wwx-text-primary);
    --bs-nav-tabs-link-active-bg: var(--wwx-surface-raised);
    --bs-nav-tabs-link-active-border-color: var(--wwx-border-strong);
}

.wwx-theme .pagination {
    --bs-pagination-color: var(--wwx-text-primary);
    --bs-pagination-bg: var(--wwx-surface-raised);
    --bs-pagination-border-color: var(--wwx-border-subtle);
    --bs-pagination-hover-color: var(--wwx-color-white);
    --bs-pagination-hover-bg: var(--wwx-color-slate-hover);
    --bs-pagination-hover-border-color: var(--wwx-border-strong);
    --bs-pagination-active-bg: var(--wwx-color-forest-600);
    --bs-pagination-active-border-color: var(--wwx-color-forest-500);
    --bs-pagination-disabled-bg: var(--wwx-surface-muted);
    --bs-pagination-disabled-border-color: var(--wwx-border-subtle);
}

.wwx-theme .dashboard-header,
.wwx-theme .dashboard-header-icon {
    color: var(--wwx-text-primary);
}

.wwx-theme .pointer {
    cursor: pointer;
}

.wwx-theme .action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    gap: var(--wwx-space-3);
}

.wwx-theme .action-tile {
    display: flex;
    min-height: 2.75rem;
    padding: var(--wwx-space-3);
    align-items: center;
    gap: var(--wwx-space-2);
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-muted);
    border: 1px solid var(--wwx-border-subtle);
    border-radius: var(--wwx-radius-md);
    text-decoration: none;
}

.wwx-theme .action-tile:hover,
.wwx-theme .action-tile:focus-visible {
    color: var(--wwx-color-white);
    background: var(--wwx-color-slate-hover);
    border-color: var(--wwx-border-strong);
}

.wwx-theme .tile-primary {
    background: var(--wwx-color-info-soft);
}

.wwx-theme .tile-success {
    background: var(--wwx-color-success-soft);
}

.wwx-theme .tile-warning {
    background: var(--wwx-color-warning-soft);
}

.wwx-theme .tile-info {
    background: var(--wwx-color-forest-soft);
}

.wwx-theme .page-toolbar-shell {
    color: var(--wwx-text-primary);
    background:
        radial-gradient(circle at top right, var(--wwx-color-forest-soft), transparent 36%),
        linear-gradient(135deg, var(--wwx-surface-glass), var(--wwx-surface-card));
    border-color: var(--wwx-border-subtle);
    box-shadow: var(--wwx-shadow-sm);
}

.wwx-theme .page-toolbar-kicker {
    color: var(--wwx-color-forest-300);
}

.wwx-theme .toolbar-stat {
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-muted);
    border-color: var(--wwx-border-subtle);
}

.wwx-theme .section-block {
    --sec-border: var(--wwx-border-subtle);
    --sec-bg-tint: transparent;
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-glass);
    border-color: var(--sec-border);
    box-shadow: var(--wwx-shadow-sm);
}

.wwx-theme .section-block[data-timebucket="future"] {
    --sec-border: rgba(123, 195, 159, 0.42);
    --sec-bg-tint: rgba(47, 138, 99, 0.08);
}

.wwx-theme .section-block[data-timebucket="past"] {
    --sec-border: rgba(174, 185, 194, 0.22);
    --sec-bg-tint: rgba(100, 116, 130, 0.06);
}

.wwx-theme .section-block .section-header {
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-raised) !important;
    border-bottom-color: var(--sec-border);
}

.wwx-theme .section-block .card-row {
    background: var(--wwx-surface-raised);
    border: 1px solid var(--wwx-border-subtle);
    box-shadow: 0 0.2rem 0.65rem rgba(24, 54, 43, 0.06);
}

.wwx-theme .section-block .card-row:hover {
    border-color: var(--wwx-border-strong);
    box-shadow: var(--wwx-shadow-sm);
}

.wwx-theme .pr-card-control {
    color: var(--wwx-text-primary);
    background: var(--wwx-surface-muted);
    border: 1px solid var(--wwx-border-subtle);
}

.wwx-theme .text-bg-light,
.wwx-theme .badge.bg-light {
    color: var(--wwx-text-primary) !important;
    background: var(--wwx-surface-muted) !important;
    border: 1px solid var(--wwx-border-subtle);
}