:root,
[data-bs-theme="light"] {
    --theme-primary: #E8A817;
    --theme-primary-rgb: 232, 168, 23;
    --theme-primary-strong: #c48e0f;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f5f7fa;
    --theme-border: #d9dee7;
    --theme-text: #1f2937;
    --theme-text-muted: #667085;
    --theme-topbar: #18212b;
    --theme-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

    --bs-primary: var(--theme-primary, #E8A817);
    --bs-primary-rgb: var(--theme-primary-rgb);

    /* Anthrazit / Dunkelgrau für Kontraste */
    --bs-dark: #2b2b2b;
    --bs-dark-rgb: 43, 43, 43;

    /* Header & listhead tokens */
    --header-bg-start: #243244;
    --header-bg-end: #18212b;
    --header-border-subtle: rgba(255, 255, 255, 0.08);
    --header-accent-line: var(--theme-primary, #E8A817);
    --listhead-bg: #eef1f5;
    --listhead-text: #1f2937;
    --listhead-border: #d9dee7;
}

body.app-shell {
    background: linear-gradient(180deg, #f7f8fb 0%, #eef2f7 100%);
    color: var(--theme-text);
    padding-top: 5.5rem;
}

.app-main {
    min-height: calc(100vh - 5.5rem);
}

.app-content {
    padding-bottom: 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem auto 1rem;
    max-width: 1140px;
}

.page-header> :first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.page-header .page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: 100%;
}

.page-header .page-actions>* {
    max-width: 100%;
}

/* Aktionsleisten mit vielen Einträgen dürfen auf schmalen Viewports umbrechen.
   Bootstrap setzt die Radien der inneren Buttons einer .btn-group zurück, damit
   sie zusammengewachsen aussehen - beim Umbruch wirken die Zeilen dadurch wie
   abgeschnittene Fragmente. Deshalb hier Radien und Abstände zurückholen. */
@media (max-width: 575.98px) {
    .btn-group-wrap {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .btn-group-wrap>.btn {
        flex: 1 1 auto;
        margin-left: 0;
        border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    }
}

.surface-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    box-shadow: var(--theme-shadow);
}

.mail-queue-page-header {
    margin-bottom: 1.25rem;
}

.mail-queue-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.mail-queue-stat-card {
    min-height: 9.5rem;
    padding: 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.mail-queue-stat-card--critical {
    background: linear-gradient(180deg, #dc3545 0%, #c92a3a 100%);
    border-color: rgba(201, 42, 58, 0.55);
    color: #ffffff;
}

.mail-queue-stat-card__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}

.mail-queue-stat-card--critical .mail-queue-stat-card__label,
.mail-queue-stat-card--critical .mail-queue-stat-card__meta {
    color: rgba(255, 255, 255, 0.86);
}

.mail-queue-stat-card__value {
    display: block;
    margin: 0.35rem 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
    font-weight: 800;
    color: var(--theme-text);
}

.mail-queue-stat-card--critical .mail-queue-stat-card__value {
    color: #ffffff;
}

.mail-queue-stat-card__meta {
    display: block;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--theme-text-muted);
}

.mail-queue-overview-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.25);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(232, 168, 23, 0.12) 0%, rgba(232, 168, 23, 0.06) 100%);
}

.mail-queue-overview-actions__hint {
    color: var(--theme-text-muted);
    font-size: 0.95rem;
}

.mail-queue-content-shell {
    display: block;
}

.mail-queue-preview-frame {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.dashboard-shell {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.dashboard-section {
    border: 1px solid rgba(24, 33, 43, 0.1);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 253, 0.95) 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
    padding: 1.1rem;
}

.dashboard-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.65rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(24, 33, 43, 0.1);
}

.dashboard-section-title {
    margin: 0;
    font-size: clamp(1.05rem, 1.45vw, 1.35rem);
    letter-spacing: 0.02em;
    font-weight: 700;
    color: #1d2633;
}

.dashboard-section-lead {
    margin: 0;
    max-width: 54ch;
    color: var(--theme-text-muted);
    font-size: 0.95rem;
}

.dashboard-action-grid,
.dashboard-context-grid,
.dashboard-communication-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
}

.dashboard-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(24, 33, 43, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.dashboard-panel__body {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
}

.dashboard-panel__eyebrow {
    margin: 0;
    color: #566173;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
}

.dashboard-panel__title {
    margin: 0;
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-panel__text {
    margin: 0;
    color: #4a5565;
    line-height: 1.5;
}

.dashboard-panel .btn {
    align-self: flex-start;
}

.song-detail-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.song-attachment-item {
    min-width: 0;
}

.song-attachment-item .text-truncate {
    min-width: 0;
    display: block;
}

.song-attachment-item form {
    margin: 0;
    flex: 0 0 auto;
}

.dashboard-panel--critical {
    background: linear-gradient(180deg, #dc3545 0%, #c52d3d 100%);
    border-color: rgba(197, 45, 61, 0.78);
}

.dashboard-panel--critical .dashboard-panel__eyebrow,
.dashboard-panel--critical .dashboard-panel__title,
.dashboard-panel--critical .dashboard-panel__text {
    color: #ffffff;
}

.dashboard-panel--empty {
    border-style: dashed;
    border-color: rgba(102, 112, 133, 0.4);
    background: linear-gradient(180deg, #ffffff 0%, #f2f5f9 100%);
}

.dashboard-section--actions {
    border-top: 3px solid #2f5e9e;
}

.dashboard-section--context {
    border-top: 3px solid #425776;
}

.dashboard-section--communication {
    border-top: 3px solid #8a3240;
}

.form-surface,
.filter-surface {
    border: 1px solid rgba(24, 33, 43, 0.1);
    border-top: 3px solid #2f5e9e;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 253, 0.96) 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.table-shell {
    border: 1px solid rgba(24, 33, 43, 0.1);
    border-top: 3px solid #425776;
    border-radius: 1rem;
    overflow: hidden;
}

.budget-category-list {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.budget-category-card {
    overflow: hidden;
}

.budget-category-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
}

.budget-category-header {
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    min-width: 0;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.budget-category-header__name {
    font-weight: 600;
}

.budget-category-header__stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--theme-text-muted);
}

.budget-category-header__chevron {
    transition: transform 0.15s ease;
    color: var(--theme-text-muted);
}

.budget-category-header[aria-expanded="true"] .budget-category-header__chevron {
    transform: rotate(90deg);
}

.budget-category-header__actions {
    flex-shrink: 0;
}

.budget-summary-bar {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 0.85rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(24, 33, 43, 0.1);
    font-weight: 600;
}

.table-shell .table {
    margin-bottom: 0;
}

.roles-matrix-label {
    max-width: 220px;
    white-space: normal;
}

.downloads-section .accordion-button {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.downloads-section .accordion-button .badge {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .downloads-shell {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .mail-queue-stat-card {
        min-height: auto;
    }

    .mail-queue-overview-actions {
        align-items: stretch;
    }

    .mail-queue-overview-actions .btn {
        width: 100%;
    }

    .dashboard-section {
        padding: 0.9rem;
    }

    .dashboard-section-head {
        align-items: stretch;
    }

    .dashboard-action-grid,
    .dashboard-context-grid,
    .dashboard-communication-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel .btn {
        width: 100%;
    }

    .song-attachment-item {
        flex-wrap: wrap;
    }

    .song-attachment-item .text-truncate {
        flex-basis: calc(100% - 2rem);
    }

    .downloads-section {
        padding: 0.55rem;
    }

    .downloads-section .dashboard-section-head {
        margin-bottom: 0.7rem;
        padding-bottom: 0.65rem;
    }

    .downloads-surface {
        padding: 0.35rem !important;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .downloads-accordion-body {
        padding: 0.35rem;
    }

    .downloads-song-panel {
        padding: 0.25rem;
        border-radius: 0.75rem;
        box-shadow: none;
    }

    .downloads-song-panel .dashboard-panel__body {
        margin-bottom: 0.55rem;
        gap: 0.35rem;
    }

    .downloads-section .accordion-item {
        margin-bottom: 0.6rem !important;
        box-shadow: none !important;
    }

    .downloads-section .dashboard-panel__title {
        flex-wrap: wrap;
        line-height: 1.3;
        font-size: 1rem;
    }

    .downloads-section .dashboard-panel__text {
        overflow-wrap: anywhere;
        font-size: 0.9rem;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .downloads-files-table td {
        text-align: left !important;
        padding-left: 44%;
        min-height: 40px;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .table-responsive {
        padding-left: 0;
        padding-right: 0;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .downloads-files-table {
        width: 100% !important;
        min-width: 100% !important;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .downloads-files-table td::before {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        max-width: calc(46% - 0.4rem);
        line-height: 1.2;
        top: 0.45rem;
        transform: none;
        hyphens: none;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .downloads-files-table tr {
        margin-bottom: 0.5rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        border-radius: 0.6rem;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .downloads-files-table td[data-label="Wiedergabe"] {
        align-items: stretch;
    }

    .downloads-section [data-table-engine="true"]:not([data-active-view="table"]) .downloads-files-table td[data-label="Aktionen"] .btn {
        width: auto;
    }
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    .song-detail-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .song-attachment-item {
        flex-wrap: wrap;
    }

    .song-attachment-item .text-truncate {
        flex-basis: calc(100% - 2rem);
    }
}

@media (max-width: 430px) {
    .downloads-shell {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .downloads-section {
        padding: 0.45rem;
    }

    .downloads-accordion-body {
        padding: 0.3rem;
    }

    .downloads-song-panel {
        padding: 0.2rem;
    }
}

/* Navbar Styling */
.navbar.bg-dark.app-topbar {
    background: linear-gradient(135deg, rgba(36, 50, 68, 0.97) 0%, rgba(24, 33, 43, 0.97) 100%) !important;
    backdrop-filter: blur(12px);
    border-bottom: 3px solid var(--header-accent-line, #E8A817);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.navbar-dark .navbar-brand {
    color: var(--theme-primary, #E8A817);
    font-weight: 700;
    letter-spacing: 0.5px;
    min-width: 0;
    max-width: calc(100% - 3.25rem);
}

.navbar.bg-dark.app-topbar .container-fluid {
    flex-wrap: nowrap;
}

.navbar-logo {
    height: 36px;
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.app-topbar__brand-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar.bg-dark.app-topbar .navbar-toggler {
    flex-shrink: 0;
    margin-left: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar.bg-dark.app-topbar .navbar-toggler .toggler-icon {
    display: block;
    line-height: 1;
}

.navbar.bg-dark.app-topbar .navbar-toggler .toggler-icon-close {
    display: none;
}

.navbar.bg-dark.app-topbar .navbar-toggler[aria-expanded="true"] .toggler-icon-open {
    display: none;
}

.navbar.bg-dark.app-topbar .navbar-toggler[aria-expanded="true"] .toggler-icon-close {
    display: block;
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: color-mix(in srgb, var(--theme-primary, #E8A817) 85%, #ffffff);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: var(--theme-primary, #E8A817);
}

.navbar-dark .nav-link {
    font-weight: 500;
}

.navbar-dark .nav-link.active,
.navbar-dark .nav-link.dropdown-toggle.active {
    color: var(--theme-primary, #E8A817);
    background: rgba(var(--theme-primary-rgb), 0.12);
    border-radius: 0.375rem;
}

.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--theme-primary, #E8A817);
    color: #2b2b2b;
    font-weight: 600;
}

/* Mail badge (nav envelope icon with unread-count overlay) */
.mail-badge-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mail-badge-trigger .mail-badge-count {
    position: absolute;
    top: -0.4rem;
    right: -0.6rem;
    font-size: 0.625rem;
    line-height: 1;
    padding: 0.2em 0.4em;
}

@media (max-width: 991.98px) {
    .navbar.bg-dark.app-topbar .container-fluid {
        flex-wrap: wrap;
        align-items: center;
    }

    .navbar.bg-dark.app-topbar .navbar-collapse {
        width: 100%;
        flex-basis: 100%;
        margin-top: 0.5rem;
    }

    .navbar.bg-dark.app-topbar .navbar-collapse:not(.show) {
        display: none !important;
    }

    .navbar.bg-dark.app-topbar .navbar-collapse.show {
        display: block !important;
    }

    .navbar .navbar-collapse {
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .navbar .dropdown-menu {
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .page-header {
        align-items: stretch;
    }

    .page-header .page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .navbar-dark .navbar-brand {
        max-width: calc(100% - 2.75rem);
    }

    .navbar-logo {
        height: 32px;
    }
}

/* =====================================================================
   Corporate Listhead
   Applies to all three table header variants: .table-dark, .table-light,
   and bare thead with no class. All render as the same light-neutral surface
   with an accent bottom border.
   Bootstrap reads --bs-table-bg and --bs-table-color on thead and cascades
   them down to tr and td/th via its own .table > :not(caption) > * > * rule.
   The `thead th` block adds direct cell overrides as a safe fallback and
   applies the typographic treatment.
   ===================================================================== */
thead.table-dark,
thead.table-light,
thead:not([class]) {
    --bs-table-bg: var(--listhead-bg, #eef1f5);
    --bs-table-color: var(--listhead-text, #1f2937);
    --bs-table-border-color: var(--listhead-border, #d9dee7);
    border-bottom: 3px solid var(--header-accent-line, #E8A817);
}

thead th {
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--listhead-text, #1f2937);
    background-color: var(--listhead-bg, #eef1f5);
}

.finances-table .finance-amount-column,
.finances-table .finance-actions-column,
.finances-table .finance-amount-cell,
.finances-table .finance-actions-cell {
    white-space: nowrap;
}

.finances-table .finance-actions-column,
.finances-table .finance-actions-cell {
    width: 1%;
}

/* Spalten, die in der Tabellenansicht nur ein Icon zeigen: so schmal wie der
   Inhalt. In der Kartenansicht setzt die Table-Engine display/width neu, dort
   greift die Breitenbegrenzung nicht mehr. */
.finances-table .finance-icon-column {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Die Beschreibung ist die elastische Spalte: sie nimmt den Rest der Breite auf
   und gibt ihn wieder her, wenn eine der übrigen Spalten mehr braucht. Ohne das
   verteilt das Tabellenlayout den Platz gleichmäßig und die kurzen Spalten
   brechen um, statt dass der Fließtext schrumpft. */
.finances-table .finance-description-column {
    width: 100%;
}

.finances-table .finance-account-name {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

/* Buchungsart: in der Tabellenansicht nur das Icon, damit die Spalte schmal
   bleibt. Der Klartext bleibt im DOM (Tabellensuche, Screenreader) und wird in
   der Kartenansicht wieder eingeblendet, wo die Breite keine Rolle spielt. */
.finances-table .finance-type-label {
    display: none;
}

[data-table-engine="true"][data-active-view="cards"] .finances-table .finance-type-label {
    display: inline;
    margin-left: 0.25rem;
}

.finance-import-table .finance-amount-column,
.finance-import-table .finance-import-select-column {
    white-space: nowrap;
}

.finance-import-table .finance-import-select-column {
    width: 1%;
}

.finance-import-table select {
    min-width: 9rem;
}

.finances-report .finance-report-table-wrap {
    overflow-x: auto;
}

.finances-report .finance-report-table {
    width: 100%;
}

.finances-report .finance-report-table th,
.finances-report .finance-report-table td {
    padding: 0.55rem 0.65rem;
    vertical-align: middle;
}

.finances-report .finance-report-amount-cell,
.finances-report .finance-report-date-cell,
.finances-report .finance-report-number-cell {
    white-space: nowrap;
    width: 1%;
}

.finances-report .finance-report-description-cell {
    min-width: 14rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.task-description-html {
    line-height: 1.5;
}

.task-description-html>:last-child {
    margin-bottom: 0;
}

.task-description-html ul,
.task-description-html ol {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.task-description-html p {
    margin-bottom: 0.75rem;
}

.finances-table .finance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.finances-table .finance-actions form {
    margin: 0;
}

/* =====================================================================
   Corporate Card Header
   Harmonized with listhead style. Semantic Bootstrap header colors
   (success / danger / warning / info) are excluded via :not() guards so
   they retain their communicative meaning.
   !important is required: Bootstrap utility classes (.bg-dark, .bg-white,
   .bg-light etc.) also declare background-color with !important. Our
   selector has higher specificity, so our !important rule wins.
   ===================================================================== */
.card>.card-header:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    background-color: var(--listhead-bg, #eef1f5) !important;
    color: var(--listhead-text, #1f2937) !important;
    border-bottom: 3px solid var(--header-accent-line, #E8A817);
    font-weight: 600;
}

/* Narrow-viewport refinements for listhead and card-header.
   This block must come after the base thead and card-header rules above
   so that at ≤767.98px these values override them in the cascade. */
@media (max-width: 767.98px) {
    thead th {
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .card>.card-header:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
        padding: 0.625rem 1rem;
    }

    .finances-report .finance-report-table {
        font-size: 0.84rem;
    }

    .finances-report .finance-report-table th,
    .finances-report .finance-report-table td {
        padding: 0.45rem 0.5rem;
    }

    .finances-report .finance-report-description-cell {
        min-width: 10rem;
    }
}

/* Primary Button Overrides (Dark text on yellow for readability) */
.btn-primary {
    --bs-btn-color: #2b2b2b;
    --bs-btn-bg: var(--theme-primary, #E8A817);
    --bs-btn-border-color: var(--theme-primary, #E8A817);
    --bs-btn-hover-color: #2b2b2b;
    --bs-btn-hover-bg: color-mix(in srgb, var(--theme-primary, #E8A817) 88%, #000000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-primary, #E8A817) 80%, #000000);
    --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
    --bs-btn-active-color: #2b2b2b;
    --bs-btn-active-bg: color-mix(in srgb, var(--theme-primary, #E8A817) 80%, #000000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--theme-primary, #E8A817) 72%, #000000);
    font-weight: 600;
}

/* Outline Primary Button */
.btn-outline-primary {
    --bs-btn-color: var(--theme-primary-strong);
    --bs-btn-border-color: var(--theme-primary, #E8A817);
    --bs-btn-hover-color: #2b2b2b;
    --bs-btn-hover-bg: var(--theme-primary, #E8A817);
    --bs-btn-hover-border-color: var(--theme-primary, #E8A817);
    --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
    --bs-btn-active-color: #2b2b2b;
    --bs-btn-active-bg: var(--theme-primary, #E8A817);
    --bs-btn-active-border-color: var(--theme-primary, #E8A817);
}

/* Text Primary */
.text-primary {
    color: var(--theme-primary-strong) !important;
}

/* Badges */
.bg-primary {
    background-color: var(--theme-primary, #E8A817) !important;
    color: #2b2b2b !important;
}

/* Cards */
.border-primary {
    border-color: var(--theme-primary, #E8A817) !important;
}

/* Links */
a {
    color: var(--theme-primary-strong);
}

a:hover {
    color: #946b08;
}

/* Login Card specific */
.login-header {
    background-color: #2b2b2b;
    color: var(--theme-primary, #E8A817);
    border-bottom: 4px solid var(--theme-primary, #E8A817);
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
    padding: 1.5rem;
    text-align: center;
}

.auth-shell {
    min-height: calc(100vh - 8rem);
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(320px, 1fr);
    overflow: hidden;
}

.auth-brand-panel {
    background: linear-gradient(160deg, #18212b 0%, #243244 100%);
    color: #fff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo {
    max-height: 64px;
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.logo-preview-frame {
    min-width: 120px;
}

.logo-preview {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.settings-form-shell {
    width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
}

.settings-logo-row {
    align-items: stretch;
}

/* Events calendar readability and responsive behavior */
#event-calendar .fc-daygrid-event {
    white-space: normal;
}

#event-calendar .fc-daygrid-dot-event .fc-event-title {
    white-space: normal;
    overflow: visible;
}

#event-calendar .fc .fc-toolbar {
    gap: 0.5rem;
}

#event-calendar .fc .fc-toolbar-title {
    font-size: clamp(1.1rem, 2.4vw, 1.75rem);
}

@media (max-width: 991.98px) {
    #event-calendar .fc .fc-toolbar {
        flex-wrap: wrap;
    }

    #event-calendar .fc .fc-toolbar-chunk {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    #event-calendar .fc .fc-toolbar-chunk:first-child {
        justify-content: space-between;
    }
}

.settings-logo-preview {
    min-width: 220px;
}

.settings-logo-input {
    display: grid;
    align-content: center;
}

.auth-form-panel {
    background: #fff;
}

@media (max-width: 991.98px) {
    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        padding: 1.5rem;
    }

    .settings-logo-preview {
        min-width: 100%;
    }
}

/* =====================================================================
   Utility classes replacing inline styles
   ===================================================================== */

/* Small fixed-size progress bar (e.g. evaluation percentage column) */
.progress-sm {
    width: 60px;
    height: 8px;
}

.projects-table-shell {
    overflow: visible;
}

.projects-table-shell .projects-table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 12rem;
}

.projects-table-shell .dropdown-menu {
    z-index: 2000;
}

.projects-table-shell #projectsTable tbody tr {
    position: relative;
}

.projects-table-shell #projectsTable td[data-label="Aktionen"] {
    overflow: visible;
}

@media (max-width: 767.98px) {
    .projects-table-shell .projects-table-responsive {
        padding-bottom: 14rem;
    }
}

/* Dynamic progress bar value via CSS custom property.
   Set --progress-value on the element from a Twig expression. */
.progress-bar-dynamic {
    width: var(--progress-value, 0%);
}

/* Minimum-width constraint for project/member select dropdowns */
.select-min-220 {
    min-width: 220px;
}

/* Avatar circle for comment author initials */
.avatar-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Timeline dot marker */
.timeline-dot {
    width: 12px;
    height: 12px;
    top: 6px;
}

.timeline-item:last-child {
    border-left-color: transparent !important;
}

/* Newsletter HTML-content preview area */
.newsletter-content-preview {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 4px;
}

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

.newsletter-content table {
    width: 100%;
    border-collapse: collapse;
}

.newsletter-content table,
.newsletter-content th,
.newsletter-content td {
    border: 1px solid #ddd;
}

.newsletter-content th,
.newsletter-content td {
    padding: 12px;
    text-align: left;
}

.newsletter-content th {
    background-color: #f2f2f2;
}

/* Newsletter action modal: almost full width, but capped at 1200px */
#newsletterActionModal {
    --newsletter-modal-edge-gap: 1rem;
}

#newsletterActionModal .modal-dialog.modal-xl {
    max-width: min(1200px, calc(100vw - (var(--newsletter-modal-edge-gap) * 2))) !important;
    width: calc(100vw - (var(--newsletter-modal-edge-gap) * 2));
}

@media (max-width: 575.98px) {
    #newsletterActionModal {
        --newsletter-modal-edge-gap: 0.5rem;
    }
}

/* Attendance status buttons: keep one row on small screens without overflow */
.attendance-status-group {
    display: flex;
    width: 100%;
}

.attendance-status-group>.btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .attendance-status-group>.btn {
        font-size: 0.95rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 420px) {
    .attendance-status-group>.btn {
        font-size: 0.85rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .attendance-status-group>.btn i {
        margin-right: 0.2rem;
    }
}

/* =====================================================================
   Kanban Board Styling
   ===================================================================== */
.kanban-container {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.kanban-column {
    background: var(--theme-surface-muted, #f5f7fa);
    border: 1px solid var(--theme-border, #d9dee7);
    border-radius: 1rem;
    padding: 0;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    transition: all 0.3s ease;
}

.kanban-column-header {
    padding: 1rem 1.25rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: #ffffff;
    border-bottom: 1px solid var(--theme-border, #d9dee7);
}

.kanban-column-header h3 {
    font-weight: 700;
    color: var(--theme-text, #1f2937);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.kanban-cards-container {
    padding: 1rem;
    flex-grow: 1;
    min-height: 150px;
    min-height: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    position: relative;
}

.kanban-cards-container.kanban-drop-active {
    outline: 2px dashed var(--theme-primary, #E8A817);
    outline-offset: -2px;
    background-color: rgba(232, 168, 23, 0.04);
}

/* Drag over highlight styles */
.kanban-cards-container.drag-over {
    background-color: rgba(232, 168, 23, 0.08);
    /* theme-primary with opacity */
    border: 2px dashed var(--theme-primary, #E8A817);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.kanban-card {
    background: #ffffff;
    border: 1px solid var(--theme-border, #d9dee7);
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: grab;
    position: relative;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    border-color: color-mix(in srgb, var(--theme-primary, #E8A817) 40%, var(--theme-border, #d9dee7));
}

.kanban-card.dragging {
    opacity: 0.4;
    border: 2px dashed var(--theme-primary, #E8A817);
    transform: scale(0.96);
    box-shadow: none;
}

.kanban-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--theme-text, #1f2937);
    margin-bottom: 0.75rem;
}

.kanban-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.kanban-card-title a:hover {
    color: var(--theme-primary, #E8A817);
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--theme-text-muted, #667085);
}

/* User Avatar Initials Badge */
.avatar-initials {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #eef2f6;
    color: #4b5563;
    font-weight: 700;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border, #d9dee7);
}

.avatar-initials[title] {
    cursor: help;
}

.kanban-card-badge {
    font-size: 0.75rem;
    padding: 0.25em 0.6em;
    border-radius: 0.375rem;
    font-weight: 600;
}

/* Custom styles for status color headers */
.kanban-column[data-status="Offen"] {
    border-top: 4px solid var(--theme-text-muted, #667085);
}

.kanban-column[data-status="In Bearbeitung"] {
    border-top: 4px solid #17a2b8;
    /* Cyan */
}

.kanban-column[data-status="Blockiert"] {
    border-top: 4px solid #dc3545;
    /* Red */
}

.kanban-column[data-status="Abgeschlossen"] {
    border-top: 4px solid #28a745;
    /* Green */
}

/* Date warning in Kanban Card */
.kanban-date-warning {
    color: #dc3545;
    font-weight: 700;
}

/* Empty placeholder in column */
.kanban-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--theme-text-muted, #667085);
    border: 2px dashed rgba(102, 112, 133, 0.2);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin: auto 0;
}

.kanban-empty-placeholder i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

/* Toggle Views transition */
#list-view,
#kanban-view {
    transition: opacity 0.25s ease-in-out;
}

.fade-in {
    animation: fadeIn 0.25s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Termin-Anmeldung (Registration) */
.registration-badge-yes {
    background-color: var(--bs-success);
}

.registration-badge-no {
    background-color: var(--bs-danger);
}

.registration-badge-maybe {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

.registration-badge-open {
    background-color: var(--bs-secondary);
}

.registration-proxy-select {
    width: auto;
    min-width: 8rem;
}

.registration-proxy-note {
    width: 14rem;
    max-width: 100%;
}

/* Hilfe / How-To-Anleitungen */
.help-guide-card {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.help-guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    border-color: color-mix(in srgb, var(--theme-primary, #E8A817) 40%, var(--theme-border, #d9dee7));
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child {
    margin-top: 0;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--theme-border, #d9dee7);
    border-radius: 0.5rem;
    margin: 0.5rem 0 1.25rem;
}

.markdown-content table {
    width: 100%;
    margin-bottom: 1.25rem;
}

.markdown-content table,
.markdown-content th,
.markdown-content td {
    border: 1px solid var(--theme-border, #d9dee7);
    border-collapse: collapse;
    padding: 0.5rem 0.75rem;
}

.markdown-content blockquote {
    border-left: 3px solid var(--theme-primary, #E8A817);
    padding-left: 1rem;
    color: var(--bs-secondary-color);
}

.markdown-content pre {
    background: var(--bs-tertiary-bg, #f5f6f8);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}