* {
    box-sizing: border-box;
}


html {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


body {
    margin: 0;

    background:
        #f4f6f8;

    color:
        #1f252b;
}


input,
select,
textarea,
button {
    font: inherit;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.app-header {
    height: 78px;

    display: flex;

    align-items: center;

    padding:
        0
        28px;

    background:
        #ffffff;

    border-bottom:
        1px solid #dce1e6;
}


.app-header h1 {
    margin: 0;

    font-size:
        24px;
}


.app-header p {
    margin:
        3px
        0
        0;

    color:
        #68717b;
}


/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.layout {
    display: grid;

    grid-template-columns:
        310px
        minmax(0, 1fr);

    min-height:
        calc(100vh - 78px);
}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/

.sidebar {
    padding: 20px;

    background:
        #ffffff;

    border-right:
        1px solid #dce1e6;
}


.sidebar-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;

    margin-bottom:
        15px;
}


.sidebar-header h2 {
    margin: 0;

    font-size:
        18px;
}


.sidebar-form,
.inline-form {
    padding: 16px;

    margin-bottom: 18px;

    border:
        1px solid #dce1e6;

    border-radius:
        8px;

    background:
        #f8f9fa;
}


.sidebar-form h3,
.inline-form h3,
.inline-form h4 {
    margin-top: 0;
}


.sidebar-form label {
    display: block;

    margin-bottom:
        11px;

    font-size:
        13px;

    font-weight:
        600;
}


.sidebar-form input,
.sidebar-form textarea {
    width: 100%;

    margin-top:
        5px;
}


.full-width {
    width: 100%;

    margin-bottom:
        14px;
}


.project-entry {
    display: block;

    width: 100%;

    padding:
        12px
        14px;

    margin-bottom:
        8px;

    text-align: left;

    border:
        1px solid #dce1e6;

    border-radius:
        7px;

    background:
        #ffffff;

    cursor: pointer;
}


.project-entry:hover {
    background:
        #f4f6f8;
}


.project-entry.active {
    background:
        #e9edf1;

    border-color:
        #606973;
}


.project-entry strong {
    display: block;

    margin-bottom:
        3px;
}


.project-entry small {
    color:
        #707984;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.content {
    width: 100%;

    max-width:
        1400px;

    padding: 24px;
}


.card {
    padding: 20px;

    margin-bottom:
        20px;

    background:
        #ffffff;

    border:
        1px solid #dce1e6;

    border-radius:
        9px;
}


.hidden {
    display: none !important;
}


.muted {
    color:
        #717a84;
}


/*
|--------------------------------------------------------------------------
| Projekt
|--------------------------------------------------------------------------
*/

.project-heading {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 20px;
}


.project-heading h2 {
    margin:
        0
        0
        4px;
}


.project-data {
    display: flex;

    gap: 50px;

    margin-top:
        18px;
}


.project-data div {
    display: flex;

    flex-direction:
        column;

    gap: 3px;
}


.section-actions {
    margin-top:
        20px;

    padding-top:
        16px;

    border-top:
        1px solid #e5e8eb;
}


/*
|--------------------------------------------------------------------------
| Formulare
|--------------------------------------------------------------------------
*/

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap: 14px;
}


.form-grid label,
.inline-form > label {
    display: flex;

    flex-direction:
        column;

    gap: 6px;

    font-size:
        13px;

    font-weight:
        600;
}


input,
select,
textarea {
    min-height:
        38px;

    padding:
        7px
        9px;

    border:
        1px solid #c9d0d7;

    border-radius:
        5px;

    background:
        #ffffff;
}


textarea {
    resize:
        vertical;
}


.form-actions {
    display: flex;

    flex-wrap:
        wrap;

    gap: 8px;

    margin-top:
        15px;
}


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

.button {
    min-height:
        36px;

    padding:
        8px
        13px;

    border: 0;

    border-radius:
        5px;

    cursor: pointer;

    font-weight:
        650;
}


.button-primary {
    background:
        #252b31;

    color:
        #ffffff;
}


.button-secondary {
    background:
        #e5e9ed;

    color:
        #252b31;
}


.button:hover {
    opacity:
        0.87;
}

.button-danger {
    background:
        #b93636;

    color:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| Panels
|--------------------------------------------------------------------------
*/

.panel-header-row {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;
}


.panel-header h3 {
    margin: 0;
}


.panel-meta {
    margin-top:
        4px;

    color:
        #707984;
}

.panel-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content:
        flex-end;

    gap: 7px;
}


.section-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


/*
|--------------------------------------------------------------------------
| Loop
|--------------------------------------------------------------------------
*/

.loop-card {
    margin-top:
        17px;

    padding:
        18px;

    border:
        1px solid #dce1e6;

    border-radius:
        8px;

    background:
        #f9fafb;
}


.loop-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;

    margin-bottom:
        15px;
}


.loop-header h4 {
    margin:
        0
        0
        5px;
}


.loop-meta {
    display: flex;

    flex-wrap:
        wrap;

    gap:
        7px
        18px;

    font-size:
        14px;

    color:
        #69727c;
}

.loop-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content:
        flex-end;

    gap: 7px;
}

/*
|--------------------------------------------------------------------------
| Komponenten
|--------------------------------------------------------------------------
*/

.component-table {
    width: 100%;

    margin-top:
        14px;

    border-collapse:
        collapse;
}


.component-table th,
.component-table td {
    padding:
        9px
        8px;

    border-bottom:
        1px solid #e3e7ea;

    text-align: left;
}


.component-table th {
    color:
        #6d7680;

    font-size:
        13px;
}


.add-component {
    display: grid;

    grid-template-columns:
        minmax(
            250px,
            1fr
        )
        100px
        auto;

    gap: 8px;

    margin-top:
        17px;

    padding-top:
        15px;

    border-top:
        1px solid #dce1e6;
}


/*
|--------------------------------------------------------------------------
| Calculation
|--------------------------------------------------------------------------
*/

.calculation {
    margin-top:
        18px;

    padding:
        16px;

    background:
        #ffffff;

    border:
        1px solid #dce1e6;

    border-radius:
        7px;
}


.calculation-heading {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 15px;
}


.calculation-heading h4 {
    margin:
        0
        0
        15px;
}


.calculation-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    gap: 14px;
}


.metric {
    padding: 14px;

    border:
        1px solid #e1e5e8;

    border-radius:
        7px;
}


.metric-label {
    color:
        #707984;

    font-size:
        13px;
}


.metric-value {
    margin:
        5px
        0;

    font-size:
        21px;

    font-weight:
        700;
}


.metric-row {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 10px;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.progress {
    height: 8px;

    margin-top:
        9px;

    overflow: hidden;

    background:
        #e4e7ea;

    border-radius:
        20px;
}


.progress-bar {
    height: 100%;
}


.progress-ok {
    background:
        #3a874e;
}


.progress-warning {
    background:
        #c79613;
}


.progress-critical {
    background:
        #d46a1d;
}


.progress-error {
    background:
        #c93f3f;
}


.progress-unknown {
    background:
        #777f87;
}


/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.badge {
    display: inline-block;

    padding:
        4px
        9px;

    border-radius:
        30px;

    font-size:
        12px;

    font-weight:
        750;

    text-transform:
        uppercase;
}


.status-ok {
    background:
        #daf1df;

    color:
        #226636;
}


.status-warning {
    background:
        #fff0c0;

    color:
        #725600;
}


.status-critical {
    background:
        #ffe0bc;

    color:
        #914700;
}


.status-error {
    background:
        #ffd7d7;

    color:
        #962828;
}


.status-unknown {
    background:
        #e5e8eb;

    color:
        #555e67;
}


/*
|--------------------------------------------------------------------------
| Meldungen
|--------------------------------------------------------------------------
*/

.messages {
    margin-top:
        13px;
}


.message-warning,
.message-error {
    padding: 10px;

    margin-top:
        7px;

    border-radius:
        5px;
}


.message-warning {
    background:
        #fff0c0;
}


.message-error {
    background:
        #ffd7d7;
}

.quantity-input {
    width: 90px;
}


.component-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.button-small {
    min-height: 32px;

    padding:
        6px
        10px;

    font-size:
        13px;
}


.button-danger {
    background:
        #b93636;

    color:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 850px
) {

    .layout {
        grid-template-columns:
            1fr;
    }


    .sidebar {
        border-right: 0;

        border-bottom:
            1px solid #dce1e6;
    }


    .content {
        padding: 14px;
    }


    .project-data {
        flex-direction:
            column;

        gap: 12px;
    }


    .loop-header,
    .panel-header-row {
        flex-direction:
            column;
    }


    .add-component {
        grid-template-columns:
            1fr;
    }
	
	.panel-actions {
    width: 100%;

    justify-content:
        flex-start;
}

.aux-section-header {
    align-items:
        flex-start;

    flex-direction:
        column;
}

}
/*
|--------------------------------------------------------------------------
| Login
|--------------------------------------------------------------------------
*/

.login-view {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background: #f4f6f8;
}


.login-card {
    width: 100%;

    max-width: 420px;

    padding: 30px;

    background: #ffffff;

    border:
        1px solid #dce1e6;

    border-radius: 10px;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.07);
}


.login-card h1 {
    margin:
        0
        0
        4px;
}


.login-card h2 {
    margin-top: 28px;
}


.login-card label {
    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 15px;

    font-size: 14px;

    font-weight: 600;
}


.login-card input {
    width: 100%;
}


.remember-row {
    flex-direction: row !important;

    align-items: center;

    font-weight: normal !important;
}


.remember-row input {
    width: auto;
}


.user-area {
    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 15px;
}


#current-user-name {
    font-weight: 600;

    color: #525b65;
}

.line-details {
    margin-top: 16px;

    padding: 14px;

    border:
        1px solid #e1e5e8;

    border-radius: 7px;

    background:
        #f8f9fa;
}


.line-detail-grid {
    display: flex;

    flex-wrap: wrap;

    gap:
        8px
        25px;

    margin-top: 8px;

    font-size: 14px;

    color:
        #59626c;
}

/*
|--------------------------------------------------------------------------
| AUX
|--------------------------------------------------------------------------
*/

.aux-section {
    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid #e2e6ea;
}


.aux-section-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 15px;

    margin-bottom: 12px;
}


.aux-section-header h4 {
    margin: 0;
}


.aux-supply-card {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 15px;

    padding: 13px;

    margin-top: 8px;

    border:
        1px solid #dfe4e8;

    border-radius:
        7px;

    background:
        #fafbfc;
}


.aux-meta {
    display: flex;

    flex-wrap: wrap;

    gap:
        6px
        18px;

    margin-top: 5px;

    font-size: 13px;

    color:
        #68717b;
}

/*
|--------------------------------------------------------------------------
| AUX-Auswertung
|--------------------------------------------------------------------------
*/

.aux-calculation-details {
    margin-top: 16px;

    padding: 14px;

    border: 1px solid #e1e5e8;

    border-radius: 7px;

    background: #f8f9fa;
}


.aux-calculation-grid {
    display: flex;

    flex-wrap: wrap;

    gap: 8px 25px;

    margin-top: 8px;

    font-size: 14px;

    color: #59626c;
}


.aux-consumer-table {
    margin-top: 14px;
}

.aux-source-select {
    min-width: 210px;

    max-width: 320px;
}

.aux-supply-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.aux-supply-card {
    flex-wrap: wrap;
}


.aux-supply-main {
    flex: 1;

    min-width: 250px;
}


.aux-supply-card .inline-form {
    width: 100%;

    margin-top: 12px;
}