/* ===== Imports: nur echte CSS-Dateien laden ===== */
@import url("farben.css");
@import url("Buttons.css");
@import url("Checkbox.css");
@import url("Dialog.css");
@import url("DropDownList.css");
@import url("Headers.css");
@import url("Grid.css");
/* @import url("sh.scss");  /* SCSS nicht im Browser importieren → entfernen oder vorkompilieren */

/* ===== Typo/Grundlagen ===== */
@font-face {
    font-family: 'glb';
    src: url('Graphik-Semibold.otf');
    font-style: normal;
}

@font-face {
    font-family: 'gl';
    src: url('Graphik-Light.otf');
    font-style: normal;
}

html, body {
    font-family: Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Links und Primaerfarbe: siehe farben.css */

/* ===== Form/Validation ===== */
textarea.k-textarea[disabled] {
    color: #000 !important;
    opacity: 1 !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ===== Layout-Helfer ===== */
.content {
    padding-top: 1.1rem;
}

.selected-customer {
    color: dimgray;
    font-size: 1.1em;
}

.grid-link {
    color: var(--mm-orange-text);
    text-decoration: underline;
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

/* Flex-Helfer */
.flex-container {
    display: flex;
    justify-content: space-between;
}

.flex-item {
    flex: 1;
}

.vertical-divider {
    border-left: 1px solid #ccc;
    padding-left: 10px;
    margin-right: 10px;
}

/* Nur Buttons in Toolbars anfassen, NICHT alle Buttons der Seite */
html body .k-toolbar .k-button,
html body .k-grid-toolbar .k-button,
html body .k-toolbar .btn,
html body .k-grid-toolbar .btn {
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
}

/* Toolbars als Zeilen mit Abstand */
html body .k-toolbar,
html body .k-grid-toolbar,
html body .k-toolbar .k-toolbar-items,
html body .k-grid-toolbar .k-toolbar-items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    align-items: center !important;
}

    /* Buttons innerhalb von Toolbars explizit NICHT wachsen lassen */
    html body .k-toolbar .k-toolbar-items .k-button,
    html body .k-grid-toolbar .k-toolbar-items .k-button {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: max-content !important;
    }

/* Falls Grid-Toolbar in Adaptive/Overflow-Modus flex:1 setzt → neutralisieren */
html body .k-grid .k-grid-toolbar .k-button,
html body .k-grid .k-grid-toolbar .btn {
    flex: 0 0 auto !important;
}

/* Utility-Klassen für bewusste Volle-Breite-Buttons */
.w-100, .k-w-100 {
    width: 100% !important;
    display: block !important;
    flex: 1 0 100% !important;
}

/* ===== Notifications/Modals (deine Stile beibehalten) ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem;
    }

.center-notification-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.center-notification-box {
    background-color: var(--mm-anthrazit);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    pointer-events: auto;
    animation: fadeInOut 2.5s ease-in-out;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: scale(.95);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(.95);
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-box {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    max-width: 480px;
    width: 90%;
    border: none;
    animation: fadeInModal .2s ease-out;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.modal-icon {
    font-size: 3rem;
    color: var(--mm-orange);
    margin-bottom: 1rem;
}

.modal-button {
    background: var(--mm-orange);
    color: var(--mm-anthrazit);
    padding: .5rem 1.25rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* ===== Individuelle Styles ===== */
.radio-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

    .radio-options label {
        font-size: 1.2em;
        display: flex;
        align-items: center;
    }

    .radio-options input[type="radio"] {
        transform: scale(1.5);
        margin-right: 10px;
    }

.partial-invoice-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.custom-button {
    background: var(--mm-anthrazit);
    color: #fff;
    font-size: 1.2em;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .custom-button:hover {
        background: var(--mm-accent);
    }

.hg-schremlblau {
    background: var(--mm-box-bg);
    padding: 10px;
    color: var(--mm-box-fg);
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

/* Toolbar horizontal ausrichten */
html body .k-toolbar,
html body .k-grid-toolbar,
html body .k-toolbar .k-toolbar-items,
html body .k-grid-toolbar .k-toolbar-items {
    display: flex !important;
    flex-direction: row !important; /* entscheidend */
    flex-wrap: wrap !important;
    gap: .5rem !important;
    align-items: center !important;
}

    /* Jede Toolbar-Child-Zelle NICHT auf 100% breiten */
    html body .k-toolbar .k-toolbar-items > *,
    html body .k-grid-toolbar .k-toolbar-items > *,
    html body .k-toolbar .k-toolbar-item,
    html body .k-grid-toolbar .k-toolbar-item {
        flex: 0 0 auto !important; /* keine Dehnung */
        width: auto !important; /* keine Vollbreite */
        max-width: max-content !important;
    }

    /* Sicherheit: die eigentlichen Buttons auch nicht wachsen lassen */
    html body .k-toolbar .k-toolbar-items .k-button,
    html body .k-grid-toolbar .k-toolbar-items .k-button,
    html body .k-toolbar .k-toolbar-items .btn,
    html body .k-grid-toolbar .k-toolbar-items .btn {
        flex: 0 0 auto !important;
        width: auto !important;
    }

/* Grid-Toolbar: Kinder nebeneinander und nicht wachsen */
html body .k-grid .k-grid-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .5rem !important;
}

    html body .k-grid .k-grid-toolbar > .k-toolbar-start,
    html body .k-grid .k-grid-toolbar > .k-toolbar-end {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: .5rem !important;
        flex: 0 0 auto !important;
    }

        /* **entscheidend**: NUR direkte Kinder der Start/End-Container */
        html body .k-grid .k-grid-toolbar > .k-toolbar-start > *,
        html body .k-grid .k-grid-toolbar > .k-toolbar-end > * {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: max-content !important;
            display: inline-flex !important;
        }

    /* Suchbox auf feste Breite bändigen */
    html body .k-grid .k-grid-toolbar .k-searchbox {
        flex: 0 0 auto !important;
        width: auto !important;
    }

        html body .k-grid .k-grid-toolbar .k-searchbox .k-input {
            width: 16rem;
            min-width: 12rem;
        }


    /* === Nuklear: Toolbar-Items nebeneinander, Flex ignorieren === */
    html body .k-grid .k-grid-toolbar .k-toolbar-items {
        display: block !important; /* Flex aus */
        white-space: normal !important;
    }

        html body .k-grid .k-grid-toolbar .k-toolbar-items > * {
            display: inline-block !important; /* neben­einander */
            width: auto !important; /* keine Vollbreite */
            max-width: none !important;
            flex: 0 0 auto !important; /* falls Flex noch wirkt */
            vertical-align: middle !important;
        }

    /* Falls Start/End-Wrapper selbst dehnen: auch neutralisieren */
    html body .k-grid .k-grid-toolbar > .k-toolbar-start,
    html body .k-grid .k-grid-toolbar > .k-toolbar-end {
        display: block !important; /* kein Flex-Wrapper */
    }

        html body .k-grid .k-grid-toolbar > .k-toolbar-start > *,
        html body .k-grid .k-grid-toolbar > .k-toolbar-end > * {
            display: inline-block !important;
            width: auto !important;
            flex: 0 0 auto !important;
        }


/* 1) Toolbar-Items horizontal */
.k-grid .k-grid-toolbar .k-toolbar-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    align-items: center !important;
}

    /* 2) Jedes direkte Kind NICHT auf 100% breiten */
    .k-grid .k-grid-toolbar .k-toolbar-items > .k-toolbar-item {
        flex: 0 0 auto !important; /* killt flex: 1 0 100% */
        width: auto !important;
        display: inline-flex !important; /* nebeneinander */
    }

/* 3) Auch Start/End-Wrapper nicht dehnen */
.k-grid .k-grid-toolbar > .k-toolbar-start,
.k-grid .k-grid-toolbar > .k-toolbar-end {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

/* 4) Buttons selbst sicherheitshalber nicht wachsen lassen */
.k-grid .k-grid-toolbar .k-button,
.k-grid .k-grid-toolbar .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
}

/* 5) Suchbox bändigen */
.k-grid .k-grid-toolbar .k-searchbox {
    flex: 0 0 auto !important;
    width: auto !important;
}

    .k-grid .k-grid-toolbar .k-searchbox .k-input {
        width: 16rem;
        min-width: 12rem;
    }


/* Erzwingt wieder das korrekte Verstecken von Elementen mit k-hidden */
.k-hidden {
    display: none !important;
}

::deep .k-hidden {
    display: none !important;
}

/* Grid-Auswahl, Betriebsfarben und Telerik-Primaerfarbe: siehe farben.css */

.kalk-btn--pending {
    background-color: #d32f2f !important; /* rot */
    border-color: #d32f2f !important;
    color: #fff !important;
}