/* This file is ONLY for the most general stylings across the whole app */

/* ── Shared dropdown panel — Status, Export, Profile ── */
/* All values come from --ef-dropdown-* tokens in easyfirma-theme.css  */

.ef-dropdown-menu {
    min-width:     var(--ef-dropdown-min-width);
    background:    var(--ef-dropdown-bg);
    border:        var(--ef-dropdown-border);
    border-radius: var(--ef-dropdown-radius);
    box-shadow:    var(--ef-dropdown-shadow);
    padding:       var(--ef-dropdown-padding-y) 0;
}

.ef-dropdown-item {
    display:     flex;
    align-items: center;
    gap:         var(--ef-dropdown-item-gap);
    width:       100%;
    padding:     var(--ef-dropdown-item-py) var(--ef-dropdown-item-px);
    border:      none;
    background:  transparent;
    font-size:   var(--ef-dropdown-item-fs);
    font-weight: var(--ef-dropdown-item-fw);
    color:       var(--ef-dropdown-item-color);
    cursor:      pointer;
    transition:  background-color 0.12s ease;
    text-align:  left;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
}

.ef-dropdown-item:hover,
.ef-dropdown-item:focus,
.ef-dropdown-item:active {
    background-color: var(--ef-dropdown-item-hover-bg);
    outline: none;
}

.ef-dropdown-item i,
.ef-dropdown-item .ef-dropdown-item__icon {
    font-size:   var(--ef-dropdown-icon-fs);
    flex-shrink: 0;
    color:       var(--ef-dropdown-icon-color);
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-size-small: 0.833rem;    /* 10pt ≈ 13.33px */
    --font-size-medium: 1rem;       /* 12pt = 16px */
    --font-size-big: 1.167rem;      /* 14pt ≈ 18.67px */
    --content-window-width: 100rem;
    --edit-view-width: 62.5rem;
    --ef-modal-popup-content-leftright-padding: 5.9375rem;
    /* Breakpoints – kept in px (industry standard) */
    --breakpoint-xsmall-max: 575px; /* < 576px */
    --breakpoint-small-min: 576px;
    --breakpoint-small-max: 767px;
    --breakpoint-medium-min: 768px;
    --breakpoint-medium-max: 991px;
    --breakpoint-large-min: 992px;
    --breakpoint-large-max: 1199px;
    --breakpoint-xlarge-min: 1200px;
}

html {
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    height: 100%;
    font-size: var(--font-size-medium);
    background-color: var(--ef-bg-canvas);
}

body {
    height: 100%;
    background-color: var(--ef-bg-canvas);
}

/* Remove underlines from all links */
a, .btn-link {
    text-decoration: none !important;
}

/* Global input styles */
input[type="text"], input[type="number"], input[type="password"] {
    padding: 0.3125rem 0.4375rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--ef-text-primary) !important;
    height: var(--ef-input-height);
}

input[type="checkbox"] {
    height: 1.5em;
    width: 1.5em;
}

/* DxButton */
.dxbl-btn.ef-button {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    min-width: 10.625rem;
    height: auto;
    transition: all 0.2s ease;
    border-radius: 0.4rem;
}

.dxbl-btn.dxbl-btn-primary.ef-button {
    background-color: var(--ef-primary);
    color: var(--ef-text-light);
}

.dxbl-btn.dxbl-btn-secondary.ef-button {
    background-color: var(--ef-primary);
    color: var(--ef-text-light);
}

.dxbl-btn.dxbl-btn-light.ef-button {
    background-color: var(--ef-button-gray);
    color: var(--ef-text-light);
}

.dxbl-btn.dxbl-btn-dark.ef-button {
    background-color: var(--ef-text-primary);
    color: var(--ef-text-light);
}

/* ── ef-button-var-4: green style (Neu) ── */
.dxbl-btn.ef-button.ef-button-var-4 {
    background-color: var(--ef-button-Neu);
    color: var(--ef-text-light);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-4:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-Neu) 82%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-4:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-Neu) 70%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-4:disabled {
        background-color: var(--ef-button-disable);
        color: var(--ef-text-tertiary);
    }
/* ── ef-button-var-3: blue style (Vorschau) ── */
.dxbl-btn.ef-button.ef-button-var-3 {
    background-color: var(--ef-primary);
    color: var(--ef-text-light);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-3:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-primary) 82%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-3:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-primary) 70%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-3:disabled {
        background-color: var(--ef-button-disable);
        color: var(--ef-text-tertiary);
    }
/* ── ef-button-var-5: blue style (Bearbeiten) ── */
.dxbl-btn.ef-button.ef-button-var-5 {
    background-color: var(--ef-primary);
    color: var(--ef-text-light);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-5:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-primary) 82%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-5:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-primary) 70%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-5:disabled {
        background-color: var(--ef-button-disable);
        color: var(--ef-text-tertiary);
    }
/* ── ef-button-var-7: amber style (Status) ── */
.dxbl-btn.ef-button.ef-button-var-7 {
    background-color: var(--ef-warning);
    color: var(--ef-text-light);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-7:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-warning) 82%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-7:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-warning) 70%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-7:disabled {
        background-color: var(--ef-button-disable);
        color: var(--ef-text-tertiary);
    }
/* ── ef-button-var-8: teal style (Rechnung / invoice) ── */
.dxbl-btn.ef-button.ef-button-var-8 {
    background-color: var(--ef-dok-accent);
    color: var(--ef-text-light);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-8:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-dok-accent) 82%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-8:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-dok-accent) 70%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-8:disabled {
        background-color: var(--ef-button-disable);
        color: var(--ef-text-tertiary);
    }
/* ── ef-button-var-1: red style (Löschen) ── */
.dxbl-btn.ef-button.ef-button-var-1 {
    background-color: var(--ef-button-Löschen);
    color: var(--ef-text-light);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-1:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-Löschen) 82%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-1:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-Löschen) 70%, #000000);
        color: var(--ef-text-light);
    }

    .dxbl-btn.ef-button.ef-button-var-1:disabled {
        background-color: var(--ef-button-disable);
        color: var(--ef-text-tertiary);
    }

/* ── ef-button-var-6: gray style (Schließen / Abbrechen) ── */
.dxbl-btn.ef-button.ef-button-var-6 {
    background-color: var(--ef-button-cancel);
    color: var(--ef-text-primary);
    font-weight: 600;
}

    .dxbl-btn.ef-button.ef-button-var-6:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-cancel) 82%, #000000);
        color: var(--ef-text-primary);
    }

    .dxbl-btn.ef-button.ef-button-var-6:active:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-cancel) 70%, #000000);
        color: var(--ef-text-primary);
    }

    .dxbl-btn.ef-button.ef-button-var-6:disabled {
        background-color: color-mix(in srgb, var(--ef-button-cancel) 82%, #000000);
        color: var(--ef-text-primary);
    }

.dxbl-btn {
    border: 0 !important;
}

    .dxbl-btn i {
        margin-right: 0.5rem !important;
        font-size: 1.25rem !important;
    }

/* Transparent EF button */
.ef-button-transparent {
    transition: all 0.2s ease;
    border: 0;
}

    .ef-button-transparent:hover:not(:disabled) {
        opacity: 0.5;

    }

    .ef-button-transparent:active:not(:disabled) {
        transform: translateY(0.2rem);
    }

    .ef-button-transparent:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .ef-button-transparent:focus {
        outline: 0.125rem solid var(--ef-primary);
        outline-offset: 0.125rem;
    }

        .ef-button-transparent:focus:not(:focus-visible) {
            outline: none;
        }

/* DxTabs */
.dxbl-tabs .tab-pane-content {
    margin-top: 1rem;
}

/* DxTabs – ef-tabs-new: stepper with TabTemplate + bar only under active tab */
.ef-tabs-new.dxbl-tabs {
    --ef-tabs-active:   var(--ef-primary);
    --ef-tabs-inactive: var(--ef-primary-medium);
    --ef-tabs-label:    var(--ef-primary-dark);
}

    .ef-tabs-new.dxbl-tabs .dxbl-tabs-header,
    .ef-tabs-new.dxbl-tabs .nav-tabs,
    .ef-tabs-new.dxbl-tabs [role="tablist"] {
        display: flex;
        border: none;
        position: relative;
        padding-bottom: 0.25rem;
    }

        .ef-tabs-new.dxbl-tabs .nav-item,
        .ef-tabs-new.dxbl-tabs [role="tablist"] > * {
            flex: 1;
        }

    .ef-tabs-new.dxbl-tabs .nav-link,
    .ef-tabs-new.dxbl-tabs [role="tab"],
    .ef-tabs-new.dxbl-tabs .dxbl-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0.5rem 0.75rem;
        border: none;
        background: transparent;
        color: var(--ef-tabs-label);
        position: relative;
    }

    .ef-tabs-new.dxbl-tabs .ef-tab-stepper-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ef-tabs-new.dxbl-tabs .ef-tab-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin-bottom: 0.5rem;
        border-radius: 50%;
        background-color: var(--ef-tabs-inactive);
        color: var(--ef-text-light);
        font-weight: 600;
        font-size: 0.875rem;
    }

    .ef-tabs-new.dxbl-tabs .nav-link.active .ef-tab-circle,
    .ef-tabs-new.dxbl-tabs .nav-link.dxbl-active .ef-tab-circle,
    .ef-tabs-new.dxbl-tabs .dxbl-tab.dxbl-active .ef-tab-circle,
    .ef-tabs-new.dxbl-tabs [role="tab"][aria-selected="true"] .ef-tab-circle {
        background-color: var(--ef-tabs-active);
        color: var(--ef-text-light);
    }

    .ef-tabs-new.dxbl-tabs .ef-tab-label {
        font-weight: 500;
        font-size: 0.9375rem;
    }

    .ef-tabs-new.dxbl-tabs .nav-link::after,
    .ef-tabs-new.dxbl-tabs [role="tab"]::after,
    .ef-tabs-new.dxbl-tabs .dxbl-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.25rem;
        height: 0.25rem;
        background-color: var(--ef-tabs-inactive);
    }

    .ef-tabs-new.dxbl-tabs .nav-link.active::after,
    .ef-tabs-new.dxbl-tabs .nav-link.dxbl-active::after,
    .ef-tabs-new.dxbl-tabs .dxbl-tab.dxbl-active::after,
    .ef-tabs-new.dxbl-tabs [role="tab"][aria-selected="true"]::after {
        background-color: var(--ef-tabs-active);
    }

    .ef-tabs-new.dxbl-tabs .dxbl-tabs-content {
        margin-top: 0;
        padding-top: 1.25rem;
    }

/* Authoring Panel Styles */
.ef-authoring-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ef-bg-primary);
    border-radius: var(--ef-radius-md);
    align-self: flex-start;
}

.ef-authoring-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--ef-bg-primary);
}

@keyframes ef-slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Delete Confirmation Panel Styles */
.ef-delete-confirm-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 2rem;
    background: var(--ef-bg-primary);
    border-radius: var(--ef-radius-xl);
    max-width: 31.25rem;
    margin: 2rem auto;
    animation: ef-slideIn 0.25s ease-out;
}

.ef-delete-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background-color: var(--ef-danger-light);
    border-radius: 50%;
    color: var(--ef-danger);
    font-size: 2.5rem;
}


.ef-delete-confirm-content {
    text-align: center;
}

.ef-delete-confirm-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ef-text-primary);
    margin: 0 0 0.75rem 0;
}

.ef-delete-confirm-message {
    font-size: 1rem;
    color: var(--ef-text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.ef-delete-confirm-list {
    list-style: none;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    text-align: left;
    background: var(--ef-bg-secondary);
    border-radius: var(--ef-radius-md);
}

    .ef-delete-confirm-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0;
        color: var(--ef-text-secondary);
        font-size: 1rem;
    }

        .ef-delete-confirm-list li i {
            color: var(--ef-text-secondary);
        }

        .ef-delete-confirm-list li:not(:last-child) {
            border-bottom: 1px solid var(--ef-border-light);
        }

.ef-delete-confirm-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ef-danger);
    margin: 0;
    padding: 0.75rem;
    background: var(--ef-danger-light);
    border-radius: var(--ef-radius-sm);
}

    .ef-delete-confirm-warning i {
        color: var(--ef-danger);
    }

.ef-delete-confirm-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

    .ef-delete-confirm-actions .ef-button {
        min-width: 8.75rem;
    }

    .ef-delete-confirm-actions .delete-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
    }

    /* Abbrechen — cancel gray */
    .ef-delete-confirm-actions .dxbl-btn.dxbl-btn-secondary.ef-button:not(.delete-btn) {
        background-color: var(--ef-button-cancel) !important;
        border-color:     var(--ef-button-cancel) !important;
        color:            var(--ef-text-primary) !important;
        box-shadow:       none !important;
    }

    .ef-delete-confirm-actions .dxbl-btn.dxbl-btn-secondary.ef-button:not(.delete-btn):hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-cancel) 82%, #000000) !important;
        border-color:     color-mix(in srgb, var(--ef-button-cancel) 82%, #000000) !important;
        box-shadow:       none !important;
    }

    /* Endgültig löschen — EasyFirma danger red */
    .ef-delete-confirm-actions .dxbl-btn.delete-btn {
        background-color: var(--ef-button-Löschen) !important;
        border-color:     var(--ef-button-Löschen) !important;
        color:            var(--ef-text-light) !important;
        box-shadow:       none !important;
    }

    .ef-delete-confirm-actions .dxbl-btn.delete-btn:hover:not(:disabled) {
        background-color: color-mix(in srgb, var(--ef-button-Löschen) 82%, #000000) !important;
        border-color:     color-mix(in srgb, var(--ef-button-Löschen) 82%, #000000) !important;
        box-shadow:       none !important;
    }

/* DxAccordion Content Padding */
.ef-accordion-padding .dxbl-group-body {
    padding: 1rem !important;
}

/* Field with Icon */
.ef-field-with-icon {
    display: flex;
    align-items: flex-end;
    width: 100%;
}

    .ef-field-with-icon .add-button {
        margin-left: 0.5rem;
    }

    .ef-field-with-icon .ef-text-field {
        flex: 1;
        min-width: 0;
    }

/* DxDrawer */
.mobile-nav-drawer > .dxbl-drawer-panel .dxbl-drawer-body {
    background-color: var(--ef-primary);
}

/* DxDrawer – layout fix: complete the flex height chain so article.content can scroll.
   DevExpress sets .dxbl-drawer-content { height:100%; overflow:hidden } but never
   makes it a flex-column container, so article.content { flex:1 } has no effect
   and the page content just overflows off-screen (clipped by html overflow:hidden). */
.mobile-nav-drawer {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

    .mobile-nav-drawer > .dxbl-drawer-content {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }

/* Mobile (<768px = below --ef-bp-tablet): widen drawer beyond MainLayout's
   PanelWidth=280px and cap at 92vw so labels like "Zeiterfassung" or
   "AI Command Log" never get clipped. !important is needed because
   DevExpress sets the panel width inline based on PanelWidth. */
@media (max-width: 767.98px) {
    .mobile-nav-drawer > .dxbl-drawer-panel {
        width: min(20rem, 92vw) !important;
        max-width: 92vw !important;
    }
}

.ef-label {
    margin-bottom: 0.125rem;
}

/* DxGrid */
.dxbl-grid .dxbl-grid-table {
    --dxbl-grid-font-size: 12px;
}

/* Grid header row background */
.dxbl-grid .dxbl-grid-table thead tr,
.dxbl-grid .dxbl-grid-table thead th,
.dxbl-grid .dxbl-grid-table thead td {
    background-color: var(--ef-bg-secondary) !important;
}

/* Content wrappers */
.std-content {
    width: 100%;
    max-width: var(--content-window-width);
    padding: clamp(0.75rem, 1.2vw, 1.5rem);
    min-width: 0;
    align-items: flex-start;
}

.wide-content {
    width: 100%;
    padding: 0 clamp(0.75rem, 1.2vw, 1.5rem);
    min-width: 0;
    min-height: 0;
    justify-content: flex-start;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Action button bar */
.ef-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    flex-wrap: wrap;
    flex-shrink: 0;
}

    .ef-page-actions .ef-refresh-button {
        margin-left: auto;
    }

    .ef-page-actions .ef-actionbar {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        gap: 0.4rem !important;
        width: auto !important;
    }

        .ef-page-actions .ef-actionbar .ef-actionbar__item {
            flex: 0 0 auto !important;
        }

            .ef-page-actions .ef-actionbar .ef-actionbar__item .dxbl-btn.ef-actionbar__btn {
                height: 2rem !important;
                font-size: 0.76rem !important;
                padding: 0 0.7rem !important;
                border-radius: var(--ef-radius-md) !important;
                width: 6.875rem !important;
                min-width: 0 !important;
            }

/* Common grid section */
.grid-section {
    width: 100%;
}

/* Document preview */
.document-preview-body .dxbrv-toolbar {
    display: none;
}

/* DxMemo */
.dxbl-memo-edit.dxbl-text-edit {
    --dxbl-text-edit-font-size: 1rem;
    --dxbl-text-edit-line-height: 1.5rem;
    --dxbl-text-edit-color: var(--ef-text-primary);
}

    .dxbl-memo-edit.dxbl-text-edit textarea {
        font-weight: 600;
    }

/* !important has no effect on custom properties – removed */
.dxbl-text-edit {
    --dxbl-text-edit-border-color: var(--ef-border-medium);
}

    /* NullText (placeholder) should be visually lighter than real input text */
    .dxbl-text-edit input::placeholder,
    .dxbl-memo-edit.dxbl-text-edit textarea::placeholder {
        color: var(--ef-text-secondary);
        font-weight: 400;
        opacity: 1;
    }

/* Align DxCheckBox label color with EFLabel to ensure consistent label styling across the app */
.dxbl-checkbox label {
    font-size: 1rem;
    color: var(--ef-text-primary);
}

/* Switch control styling */
.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-checked {
    --ef-btn-h: 211;
    --ef-btn-s: 32%;
    --ef-btn-l: 55%;
}

.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked {
    --ef-btn-h: 0;
    --ef-btn-s: 0%;
    --ef-btn-l: 85%;
}

    .dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-checked .dxbl-checkbox-check-element,
    .dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
        background-color: hsl(var(--ef-btn-h), var(--ef-btn-s), var(--ef-btn-l)) !important;
        border: 0 !important;
        opacity: 1 !important;
    }

        .dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-checked .dxbl-checkbox-check-element:hover:not(:disabled),
        .dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked .dxbl-checkbox-check-element:hover:not(:disabled) {
            background-color: hsl(var(--ef-btn-h), var(--ef-btn-s), calc(var(--ef-btn-l) + 10%)) !important;
        }

/* Hide elements like cancel button on mobile */
@media (max-width: 1199px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* =====================================================================
   Settings page – section cards & themed tabs
   ===================================================================== */

/* Section card: replaces Bootstrap "card bg-light border-0" */
.ef-settings-section {
    background-color: var(--ef-primary);
    border: 1px solid var(--ef-border-light);
    border-radius: var(--ef-radius-md);
    overflow: hidden;
}

    .ef-settings-section .card-body {
        padding: 1.25rem 1.5rem;
    }

    .ef-settings-section .card-title {
        color: var(--ef-text-primary);
        font-weight: 600;
        font-size: 0.9375rem;
    }

/* Accented section card (e.g. connection string box): replaces "card border-primary" */
.ef-settings-section-accent {
    border-color: var(--ef-primary) !important;
}

    .ef-settings-section-accent > .ef-settings-section-header {
        background-color: var(--ef-primary-light);
        border-bottom: 1px solid var(--ef-primary);
        padding: 0.65rem 1.25rem;
    }

/* Section card header row */
.ef-settings-section-header {
    background-color: var(--ef-primary-light);
    border-bottom: 1px solid var(--ef-border-light);
    padding: 0.65rem 1.25rem;
}

/* Collapsible group header */
.ef-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0 !important;
}

    .ef-collapsible-header:hover {
        color: var(--ef-primary);
    }

.ef-collapse-icon {
    font-size: 0.85rem;
    color: var(--ef-text-secondary);
    transition: transform 0.2s ease;
}

    .ef-collapsible-header:hover .ef-collapse-icon {
        color: var(--ef-primary);
    }

/* DxTabs – settings-tabs: clean blue underline style */
.settings-tabs.dxbl-tabs .dxbl-tabs-header,
.settings-tabs.dxbl-tabs .nav-tabs,
.settings-tabs.dxbl-tabs [role="tablist"] {
    border-bottom: 0.125rem solid var(--ef-border-light);
}

.settings-tabs.dxbl-tabs .dxbl-tab,
.settings-tabs.dxbl-tabs .nav-link {
    color: var(--ef-text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.6rem 1.1rem;
    border: none;
    background: transparent;
    position: relative;
    transition: color 0.15s ease;
}

    .settings-tabs.dxbl-tabs .dxbl-tab:hover,
    .settings-tabs.dxbl-tabs .nav-link:hover {
        color: var(--ef-primary);
    }

    .settings-tabs.dxbl-tabs .dxbl-tab::after,
    .settings-tabs.dxbl-tabs .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 3px;
        background: transparent;
        transition: background 0.15s ease;
    }

    .settings-tabs.dxbl-tabs .dxbl-tab.dxbl-active::after,
    .settings-tabs.dxbl-tabs .nav-link.active::after {
        background-color: var(--ef-primary);
    }

    .settings-tabs.dxbl-tabs .dxbl-tab.dxbl-active,
    .settings-tabs.dxbl-tabs .nav-link.active {
        color: var(--ef-primary);
    }

.settings-tabs.dxbl-tabs .dxbl-tabs-content {
    padding-top: 1.25rem;
}

/* ── Auto-width button override ──────────────────────────────── */
.dxbl-btn.ef-button.ef-button-auto-width {
    width: auto;
    min-width: 10rem;
    white-space: nowrap;
}

/* =====================================================================
   Detail pages – shared layout (Produkte, Zeiterfassungen)
   ===================================================================== */

.ef-detail-grid {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem 1.5rem;
    align-items: start;
    background: transparent;
    padding: 0.25rem;
    border-radius: var(--ef-radius-xs);
    min-width: 0;
}

.ef-detail-grid .section-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ef-radius-xs);
    color: var(--ef-text-primary);
    background-color: var(--ef-bg-secondary);
}

.ef-detail-grid .section-header .section-title {
    font-weight: 600;
}

.ef-detail-grid .label {
    font-weight: 600;
    color: var(--bs-body-color);
}

.ef-detail-grid .value {
    color: var(--bs-body-color);
    word-break: break-word;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    overflow: visible;
}

.ef-detail-grid .description-text {
    grid-column: 1 / -1;
    color: var(--bs-body-color);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ── Confirm-Delete Modal (shared across Kunden, Produkte, Zeiterfassungen) ── */

.ef-confirm-delete {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    gap: 1.5rem;
}

.ef-confirm-delete .confirm-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--ef-danger-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ef-danger);
    font-size: 2rem;
}

.ef-confirm-delete .confirm-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ef-text-primary);
}

.ef-confirm-delete .confirm-message {
    margin: 0;
    font-size: 1rem;
    color: var(--ef-text-primary);
    line-height: 1.5;
}

.ef-confirm-delete .confirm-message strong {
    color: var(--ef-error);
    font-weight: 600;
}

.ef-confirm-delete .confirm-warning {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ef-text-secondary);
    font-style: italic;
}

.ef-confirm-delete .confirm-buttons {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

.ef-confirm-delete .confirm-buttons .ef-button {
    min-width: 7.5rem;
}

/* Löschen button inside confirm-delete — flat red, no gradient */
.ef-confirm-delete .confirm-buttons .dxbl-btn.dxbl-btn-secondary.ef-button {
    background-color: var(--ef-button-Löschen);
    border-color: var(--ef-button-Löschen);
    color: var(--ef-text-light);
}

.ef-confirm-delete .confirm-buttons .dxbl-btn.dxbl-btn-secondary.ef-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--ef-button-Löschen) 82%, #000000);
    border-color: color-mix(in srgb, var(--ef-button-Löschen) 82%, #000000);
}

/* Abbrechen button inside confirm-delete — flat gray */
.ef-confirm-delete .confirm-buttons .dxbl-btn.dxbl-btn-light.ef-button {
    background-color: var(--ef-button-disable);
    border-color: var(--ef-button-disable);
    color: var(--ef-text-primary);
}

.ef-confirm-delete .confirm-buttons .dxbl-btn.dxbl-btn-light.ef-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--ef-button-disable) 82%, #000000);
    border-color: color-mix(in srgb, var(--ef-button-disable) 82%, #000000);
}

.ef-confirm-delete .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* ── Listbox shared infrastructure (Kunden, Produkte, Positionen) ── */

.ef-listbox-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.ef-listbox__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem;
}

.ef-listbox__loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
}

.ef-listbox__spinner {
    width: 2rem;
    height: 2rem;
    border: 0.1875rem solid var(--ef-border-light);
    border-top-color: var(--ef-primary);
    border-radius: 50%;
    animation: ef-listbox-spin 0.6s linear infinite;
}

@keyframes ef-listbox-spin {
    to { transform: rotate(360deg); }
}

.ef-listbox__option {
    flex-shrink: 0;
    min-width: 0;
    cursor: pointer;
}

.ef-listbox__option:hover > .ef-listbox-item {
    border-color: var(--ef-primary);
    background-color: color-mix(in srgb, var(--ef-primary-light) 40%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ef-primary) 20%, transparent);
}

.ef-listbox__option.selected > .ef-listbox-item {
    border-color: var(--ef-primary);
    border-left: 0.25rem solid var(--ef-primary-dark);
    background-color: var(--ef-primary-light);
    box-shadow: 0 2px 8px rgba(var(--ef-primary-rgb), 0.18);
}

.ef-listbox__option.selected:hover > .ef-listbox-item {
    border-color: var(--ef-primary-dark);
    border-left: 0.25rem solid var(--ef-primary-dark);
    box-shadow: 0 2px 8px rgba(var(--ef-primary-rgb), 0.24);
}

.ef-listbox__option.selected > .ef-listbox-item .ef-listbox-item__name {
    color: var(--ef-primary-dark);
}

.ef-listbox__option.selected > .ef-listbox-item .ef-listbox-item__nummer {
    background-color: var(--ef-primary);
    color: var(--ef-text-light);
}

.ef-listbox-item {
    display: flex;
    align-items: stretch;
    padding: 0.4rem 0.75rem;
    width: 100%;
    min-width: 0;
    border: 1.5px solid var(--ef-border-light);
    border-radius: var(--ef-radius-md);
    background-color: var(--ef-bg-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.ef-listbox-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ef-listbox-item__row-first {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.ef-listbox-item__nummer {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ef-primary-dark);
    background-color: var(--ef-primary-light);
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    line-height: 1.4;
}

.ef-listbox-item__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ef-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    min-width: 0;
}

.ef-listbox-item__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.ef-listbox-item__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--ef-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Shared detail-page layout (Produkte, Zeiterfassungen) ── */

.ef-detail-page-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ef-detail-page-grid > .grid-item {
    flex: 1;
    min-width: 19.5rem;
    overflow: hidden;
}

.ef-detail-page-wrapper {
    width: 100%;
    max-width: var(--edit-view-width);
}

.ef-detail-page-desc {
    margin-top: 1.5rem;
}

.ef-detail-page-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 767px) {
    .ef-detail-page-grid {
        flex-direction: column;
    }

    .ef-detail-page-wrapper {
        width: 90vw;
    }
}

@media (max-width: 575px) {
    .ef-detail-page-actions {
        justify-content: stretch;
    }

    .ef-detail-page-actions .ef-button {
        flex: 1;
    }
}

/* Error toast: persistent, selectable text for easy copy */
.ef-toast-error .dxbl-toast-body {
    user-select: text;
    cursor: text;
}

.ef-toast-error .dxbl-toast-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--bs-font-monospace);
    font-size: 0.85rem;
}

/* ── Collapsed nav sidebar: icon-only mode ───────────────────────── */
a.nav-menu-item--icon-only .nav-menu-item-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

a.nav-menu-item--icon-only .nav-menu-item-text {
    display: none !important;
}

a.nav-menu-item--icon-only {
    margin-bottom: 0.75rem !important;
}

/* ── Nav item highlight box: centered within the sidebar ─────────── */
a.nav-menu-item {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

/* ── Collapsed sidebar: logo symbol alignment ────────────────────── */
a.nav-brand-icon-only {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 1rem 0 0.5rem 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

a.nav-brand-icon-only .nav-brand-symbol {
    display: block !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

a.nav-brand-icon-only .nav-brand-version {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: white !important;
    font-size: 0.65rem !important;
    margin-top: 0.25rem !important;
    opacity: 0.75;
}

/* Zero out any DevExpress drawer inner padding when the nav is collapsed */
.mobile-nav-drawer > .dxbl-drawer-panel .dxbl-drawer-body:has(.is-collapsed) {
    padding: 0 !important;
}

.nav-wrapper.is-collapsed {
    padding: 0 !important;
    width: 100% !important;
}

.nav-wrapper.is-collapsed .nav-scrollable > div {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}