/* ======================================================
   LINEA Verwaltung
   ====================================================== */

* {
    box-sizing: border-box;
}


:root {

    --green: #2e7d32;
    --green-dark: #256428;
    --green-light: #edf7ee;

    --background: #eef2f5;
    --card: #ffffff;

    --text: #263238;
    --muted: #6f7b83;

    --border: #dce3e7;

    --sidebar-width: 245px;

}


html,
body {

    margin: 0;

    min-height: 100%;

}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

}


button,
input,
select,
textarea {

    font: inherit;

}


button {

    cursor: pointer;

}


.hidden {

    display: none !important;

}


/* ======================================================
   LOGIN
   ====================================================== */

.login-view {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #eef5ef,
            #e7ecef
        );

}


.login-card {

    width: 100%;

    max-width: 430px;

    background: white;

    border-radius: 22px;

    padding: 42px;

    box-shadow:
        0 18px 50px
        rgba(20, 40, 30, 0.12);

}


.login-logo {

    color: var(--green);

    font-weight: 800;

    font-size: 30px;

    letter-spacing: 2px;

    margin-bottom: 8px;

}


.login-card h1 {

    margin: 0;

    font-size: 29px;

}


.login-intro {

    color: var(--muted);

    margin:
        8px
        0
        28px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;

}


.form-group label {

    font-size: 14px;

    font-weight: 650;

}


.form-group input {

    width: 100%;

    border:
        1px solid var(--border);

    border-radius: 10px;

    padding:
        12px
        14px;

    background: #fff;

    outline: none;

}


.form-group input:focus {

    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(46, 125, 50, 0.10);

}


.login-button {

    width: 100%;

}


.message {

    min-height: 20px;

    margin:
        13px
        0
        0;

    font-size: 13px;

    color: #b3261e;

}


/* ======================================================
   BUTTONS
   ====================================================== */

.primary-button {

    border: none;

    background: var(--green);

    color: white;

    padding:
        12px
        18px;

    border-radius: 10px;

    font-weight: 700;

}


.primary-button:hover {

    background: var(--green-dark);

}


/* ======================================================
   APP
   ====================================================== */

.app-view {

    min-height: 100vh;

}


/* ======================================================
   SIDEBAR
   ====================================================== */

.sidebar {

    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    width: var(--sidebar-width);

    background: #1f3124;

    color: white;

    padding:
        25px
        18px;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

}


.sidebar-brand {

    padding:
        5px
        12px
        27px;

}


.brand-name {

    font-size: 26px;

    font-weight: 800;

    letter-spacing: 1px;

}


.brand-subtitle {

    margin-top: 3px;

    color: #bfcac2;

    font-size: 13px;

}


.navigation {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.nav-button {

    width: 100%;

    border: none;

    background: transparent;

    color: #e3e8e4;

    padding:
        12px
        13px;

    text-align: left;

    border-radius: 9px;

    display: flex;

align-items: center;

}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;

    flex-shrink: 0;
}

.nav-button:hover {

    background:
        rgba(255,255,255,0.08);

}


.nav-button.active {

    background: var(--green);

    color: white;

    font-weight: 700;

}


.sidebar-bottom {

    margin-top: auto;

    padding:
        25px
        10px
        5px;

}


.logged-in-user {

    font-size: 12px;

    color: #bec9c0;

    margin-bottom: 10px;

    overflow-wrap: anywhere;

}


.logout-button {

    width: 100%;

    border:
        1px solid rgba(255,255,255,.18);

    background: transparent;

    color: white;

    border-radius: 8px;

    padding: 9px;

}


.logout-button:hover {

    background:
        rgba(255,255,255,.08);

}


/* ======================================================
   MAIN
   ====================================================== */

.main-content {

    margin-left: var(--sidebar-width);

    padding:
        34px
        38px
        60px;

}


.page-section {

    max-width: 1400px;

    margin: auto;

}


.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 26px;

}


.page-header h1 {

    margin: 0;

    font-size: 30px;

}


.page-header p {

    margin:
        5px
        0
        0;

    color: var(--muted);

}


/* ======================================================
   CARDS
   ====================================================== */

.content-card {

    background: var(--card);

    border:
        1px solid var(--border);

    border-radius: 17px;

    padding: 24px;

    margin-bottom: 22px;

    box-shadow:
        0 5px 16px
        rgba(20, 35, 30, 0.04);

}


.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 18px;

}


.card-header h2 {

    margin: 0;

    font-size: 19px;

}


.card-header p {

    margin:
        4px
        0
        0;

    color: var(--muted);

    font-size: 13px;

}


.date-selector {

    border:
        1px solid var(--border);

    border-radius: 9px;

    padding:
        9px
        11px;

}


/* ======================================================
   DASHBOARD
   ====================================================== */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

    margin-bottom: 22px;

}


.stat-card {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 15px;

    padding: 21px;

}


.stat-label {

    display: block;

    color: var(--muted);

    font-size: 13px;

    margin-bottom: 10px;

}


.stat-value {

    font-size: 29px;

    color: var(--green);

}


.finance-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

}


.finance-grid > div {

    background: #f7faf8;

    border-radius: 12px;

    padding: 17px;

}


.finance-label {

    display: block;

    color: var(--muted);

    font-size: 12px;

    margin-bottom: 8px;

}


.finance-value {

    font-size: 21px;

}


/* ======================================================
   SEARCH / EMPTY
   ====================================================== */

.search-field {

    width: 100%;

    border:
        1px solid var(--border);

    border-radius: 10px;

    padding:
        12px
        14px;

    outline: none;

    margin-bottom: 18px;

}


.search-field:focus {

    border-color: var(--green);

}


.empty-state {

    padding:
        30px
        12px;

    color: var(--muted);

    text-align: center;

    border:
        1px dashed var(--border);

    border-radius: 12px;

}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1100px) {

    .dashboard-grid,
    .finance-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 760px) {

    .sidebar {

        position: static;

        width: 100%;

    }


    .main-content {

        margin-left: 0;

        padding:
            22px
            16px
            45px;

    }


    .app-view {

        display: block;

    }


    .navigation {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

    }


    .sidebar-bottom {

        margin-top: 20px;

    }


    .dashboard-grid,
    .finance-grid {

        grid-template-columns:
            1fr;

    }


    .page-header,
    .card-header {

        align-items: flex-start;

        flex-direction: column;

    }

}
/* ======================================================
   TERMINE IM DASHBOARD
   ====================================================== */

.appointment-row {

    display: grid;

    grid-template-columns:
        110px 1fr auto;

    gap: 18px;

    align-items: center;

    padding:
        14px
        10px;

    border-bottom:
        1px solid var(--border);

}


.appointment-row:last-child {

    border-bottom: none;

}


.appointment-time {

    font-weight: 700;

    color: var(--green);

}


.appointment-school {

    margin-top: 3px;

    color: var(--muted);

    font-size: 13px;

}


.appointment-status {

    font-size: 12px;

    background: var(--green-light);

    color: var(--green-dark);

    padding:
        5px
        9px;

    border-radius: 999px;

}
/* ======================================================
   FORMULARE
   ====================================================== */

.form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        18px
        20px;

}


.full-width {

    grid-column:
        1 / -1;

}


.form-group textarea {

    width: 100%;

    border:
        1px solid var(--border);

    border-radius: 10px;

    padding:
        12px
        14px;

    resize: vertical;

    outline: none;

}


.form-group textarea:focus {

    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(46, 125, 50, 0.10);

}


.form-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 22px;

}


.secondary-button {

    border:
        1px solid var(--border);

    background: #f4f6f7;

    color: var(--text);

    padding:
        12px
        18px;

    border-radius: 10px;

    font-weight: 650;

}


.secondary-button:hover {

    background: #e8edef;

}


/* ======================================================
   SCHULENLISTE
   ====================================================== */

.school-row {

    display: grid;

    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(150px, 1fr)
        minmax(180px, 1fr)
        auto;

    gap: 18px;

    align-items: center;

    padding:
        14px
        10px;

    border-bottom:
        1px solid var(--border);

}


.school-row:last-child {

    border-bottom: none;

}


.school-name {

    font-weight: 700;

}


.school-meta {

    color: var(--muted);

    font-size: 13px;

}


.row-actions {

    display: flex;

    gap: 8px;

}


.small-button {

    border: none;

    background: #eef3ef;

    color: var(--green-dark);

    padding:
        7px
        10px;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 650;

}


.small-button:hover {

    background: #dfece1;

}


@media (max-width: 760px) {

    .form-grid {

        grid-template-columns:
            1fr;

    }


    .full-width {

        grid-column: auto;

    }


    .school-row {

        grid-template-columns:
            1fr;

    }


    .form-actions {

        flex-direction: column-reverse;

    }

}
/* ======================================================
   RECHNUNGSEMPFÄNGER
   ====================================================== */

.recipient-row {

    display: grid;

    grid-template-columns:
        minmax(220px, 1.5fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        auto;

    gap: 18px;

    align-items: center;

    padding:
        14px
        10px;

    border-bottom:
        1px solid var(--border);

}


.recipient-row:last-child {

    border-bottom: none;

}


.recipient-name {

    font-weight: 700;

}


.recipient-meta {

    color: var(--muted);

    font-size: 13px;

}


@media (max-width: 760px) {

    .recipient-row {

        grid-template-columns:
            1fr;

    }

}
/* ======================================================
   CHECKBOX RECHNUNGSEMPFÄNGER
   ====================================================== */

.recipient-checkbox-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

.recipient-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex: 0 0 18px;
}

.recipient-checkbox-row span {
    flex: 1;
    text-align: left;
    line-height: 1.5;
}
/* ======================================================
   ÜBUNGSLEITENDE
   ====================================================== */

.instructor-row {

    display: grid;

    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(170px, 1fr)
        minmax(220px, 1.2fr)
        auto;

    gap: 18px;

    align-items: center;

    padding:
        14px
        10px;

    border-bottom:
        1px solid var(--border);

}


.instructor-row:last-child {

    border-bottom: none;

}


.instructor-name {

    font-weight: 700;

}


.instructor-meta {

    color: var(--muted);

    font-size: 13px;

}


.document-check-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px
        18px;

    margin-top: 5px;

}


.document-check-row {

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 10px;

    cursor: pointer;

}


.document-check-row input[type="checkbox"] {

    width: 18px;

    height: 18px;

    margin: 2px 0 0 0;

    flex:
        0 0 18px;

}


.document-status {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 5px;

}


.status-pill {

    display: inline-block;

    padding:
        4px
        7px;

    border-radius: 999px;

    font-size: 11px;

    background: #eef3ef;

}


.status-pill.missing {

    background: #fff1ee;

    color: #9c2d20;

}


.status-pill.complete {

    background: var(--green-light);

    color: var(--green-dark);

}


@media (max-width: 760px) {

    .instructor-row {

        grid-template-columns:
            1fr;

    }


    .document-check-grid {

        grid-template-columns:
            1fr;

    }

}
/* ======================================================
   QUALIFIKATIONEN
   ====================================================== */

.qualification-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    margin-top: 10px;
}

.qualification-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.qualification-row:hover {
    background: #f5f7f5;
}

.qualification-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 2px 0 0 0;
    flex: 0 0 17px;
}

.qualification-row span {
    line-height: 1.4;
}

.qualification-add-area {
    margin-top: 16px;
}

.qualification-new {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.qualification-new input {
    flex: 1;
    max-width: 400px;
}

@media (max-width: 950px) {

    .qualification-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

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

    .qualification-new {
        flex-direction: column;
        align-items: stretch;
    }

}
/* ======================================================
   ÜBUNGSLEITENDENPORTAL
   ====================================================== */

.instructor-portal {
    min-height: 100vh;
    background: var(--background);
}

.instructor-portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 20px 28px;

    background: #1f3124;
    color: white;
}

.instructor-portal-content {
    max-width: 1250px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.instructor-welcome {
    margin-bottom: 25px;
}

.instructor-welcome h1 {
    margin: 0;
    font-size: 30px;
}

.instructor-welcome p {
    margin: 6px 0 0;
    color: var(--muted);
}

@media (max-width: 760px) {

    .instructor-portal-header {
        padding: 17px 16px;
    }

    .instructor-portal-content {
        padding: 22px 16px 45px;
    }

}

/* ======================================================
   ÜBUNGSLEITENDENPORTAL
   ====================================================== */

.instructor-portal {
    min-height: 100vh;
    background: var(--background);
}

.instructor-portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 20px 28px;

    background: #1f3124;
    color: white;
}

.instructor-portal-content {
    max-width: 1250px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.instructor-welcome {
    margin-bottom: 25px;
}

.instructor-welcome h1 {
    margin: 0;
    font-size: 30px;
}

.instructor-welcome p {
    margin: 6px 0 0;
    color: var(--muted);
}

@media (max-width: 760px) {

    .instructor-portal-header {
        padding: 17px 16px;
    }

    .instructor-portal-content {
        padding: 22px 16px 45px;
    }

}
/* ======================================================
   FIX: ÜBUNGSLEITENDENPORTAL SICHTBAR
   ====================================================== */

#instructorPortalView {
    display: block;
    width: 100%;
    min-width: 100%;
    min-height: 100vh;
    position: relative;
}

#instructorPortalView.hidden {
    display: none !important;
}

.instructor-portal-content {
    width: 100%;
    min-height: calc(100vh - 80px);
}
/* ======================================================
   ANGEBOTE
   ====================================================== */

.offer-instructor-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px 16px;

    margin-top: 8px;
}


.offer-instructor-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 7px 8px;

    border-radius: 8px;

    cursor: pointer;
}


.offer-instructor-row:hover {
    background: #f5f7f5;
}


.offer-instructor-row input {
    width: 17px;
    height: 17px;

    margin: 2px 0 0 0;
}


.time-grid {
    display: grid;
    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 8px;
}


.offer-calculation {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    padding: 18px;

    background: #f7faf8;

    border-radius: 12px;
}


.offer-calculation div {
    min-width: 0;
}


.offer-calculation span {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 12px;
}


.offer-calculation strong {
    font-size: 18px;

    color: var(--green-dark);
}


.offer-row {
    display: grid;

    grid-template-columns:
        minmax(230px, 1.5fr)
        minmax(170px, 1fr)
        minmax(120px, .7fr)
        minmax(120px, .7fr)
        auto;

    gap: 16px;

    align-items: center;

    padding: 14px 10px;

    border-bottom:
        1px solid var(--border);
}


.offer-row:last-child {
    border-bottom: none;
}


.offer-name {
    font-weight: 700;
}


.offer-meta {
    color: var(--muted);

    font-size: 13px;
}


@media (max-width: 1050px) {

    .offer-calculation {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .offer-instructor-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 760px) {

    .offer-calculation,
    .offer-instructor-grid {
        grid-template-columns:
            1fr;
    }

    .offer-row {
        grid-template-columns:
            1fr;
    }

}
/* ======================================================
   MEHRFACHAUSWAHL ÜBUNGSLEITENDE
   ====================================================== */

.multi-select {
    position: relative;
    width: 100%;
}

.multi-select-button {
    width: 100%;
    text-align: left;

    border: 1px solid var(--border);
    background: white;

    border-radius: 10px;

    padding: 12px 14px;
}

.multi-select-dropdown {
    position: absolute;
    z-index: 50;

    left: 0;
    right: 0;

    margin-top: 5px;

    padding: 12px;

    background: white;

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.12);

    max-height: 350px;

    overflow-y: auto;
}

.multi-select-dropdown input[type="search"] {
    width: 100%;

    margin-bottom: 10px;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 8px;
}

.multi-select-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px;

    border-radius: 7px;

    cursor: pointer;
}

.multi-select-option:hover {
    background: #f4f7f5;
}

.selected-instructors {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 10px;
}

.selected-instructor-pill {
    background: var(--green-light);
    color: var(--green-dark);

    padding: 6px 9px;

    border-radius: 999px;

    font-size: 12px;
}

/* ======================================================
   FIX: ÜBUNGSLEITENDEN-DROPDOWN
   ====================================================== */

.multi-select-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.multi-select-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100%;

    gap: 10px;

    padding: 9px 10px;

    margin: 0;

    border-radius: 8px;

    cursor: pointer;
}


.multi-select-option input[type="checkbox"] {
    flex: 0 0 auto;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
}


.multi-select-option span {
    display: inline !important;

    flex: 0 1 auto;

    width: auto !important;

    margin: 0 !important;

    text-align: left !important;

    font-weight: 500;
}


.multi-select-option:hover {
    background: #f4f7f5;
}

/* ======================================================
   LÖSCHEN BUTTON
   ====================================================== */

.danger-button {
    border: 1px solid #c93d32;

    background: #fff4f2;

    color: #a82820;

    padding: 12px 18px;

    border-radius: 10px;

    font-weight: 650;

    cursor: pointer;
}

.danger-button:hover {
    background: #ffe5e1;
}
.offer-code-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.offer-code-grid span {
    text-align: center;
    font-weight: 700;
}
/* ======================================================
   VERGÜTUNG PRO ÜBUNGSLEITUNG
   ====================================================== */

.offer-instructor-compensation {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.instructor-compensation-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: #fafcfb;
}

.instructor-compensation-card h4 {
    margin: 0 0 14px 0;
}

.instructor-compensation-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.instructor-compensation-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.compensation-warning {
    margin-top: 8px;
    color: #a82820;
    font-size: 12px;
}

@media (max-width: 950px) {

    .instructor-compensation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .instructor-compensation-grid {
        grid-template-columns: 1fr;
    }

}
/* Zahlenfelder ohne Hoch-/Runter-Pfeile */

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.compensation-help {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}
/* ======================================================
   TERMINVORSCHAU
   ====================================================== */

.offer-appointments-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.appointment-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.appointment-preview-row {
    display: grid;
    grid-template-columns:
        130px
        120px
        minmax(180px, 1fr);

    gap: 12px;
    align-items: center;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: white;
}

.appointment-preview-row.skipped {
    opacity: 0.65;
    background: #f7f7f7;
}

.appointment-preview-status {
    font-size: 12px;
    font-weight: 650;
}

@media (max-width: 760px) {

    .appointment-preview-row {
        grid-template-columns: 1fr;
    }

}
/* ======================================================
   SCHUL-SCHLIESSTAGE
   ====================================================== */

.school-closures-section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.school-closures-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.school-closure-row {
    display: grid;
    grid-template-columns:
        160px
        minmax(220px, 1fr)
        auto;

    gap: 12px;
    align-items: end;

    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 9px;
}

@media (max-width: 760px) {

    .school-closure-row {
        grid-template-columns: 1fr;
    }

}
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}
#appointmentGenerationPreview {
    width: 100%;
}

#appointmentPreviewList {
    width: 100%;
}

.appointment-preview-row {
    width: 100%;
    box-sizing: border-box;
}
/* ======================================================
   TERMIN-BEARBEITUNG MODAL
   ====================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.35);
}

.modal-overlay.hidden {
    display: none;
}

.modal-card {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;

    background: white;
    border-radius: 14px;
    padding: 24px;
    box-sizing: border-box;
}
/* ======================================================
   PORTAL-LINKS / ABRECHNUNGSUNTERLAGEN
   ====================================================== */

.portal-link-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 18px 20px;

    border: 1px solid #d9e1e6;
    border-radius: 12px;

    background: #ffffff;
}

.portal-link-row > div {
    flex: 1;
}

.portal-link-row a {
    flex-shrink: 0;
    text-decoration: none;
}

@media (max-width: 700px) {

    .portal-link-row {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-link-row a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

}
/* ==================================================
   ÜBUNGSLEITERPAUSCHALE
   ================================================== */

.allowance-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 24px;
}

.allowance-summary > div {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

.allowance-summary .offer-meta {
    display: block;
    margin-bottom: 6px;
}

.allowance-summary .stat-value {
    display: block;
    font-size: 1.4rem;
    line-height: 1.2;
}


/* Auszahlungshistorie */

#myAllowancePaymentsList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

#myAllowancePaymentsList .portal-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}


/* Mobil */

@media (max-width: 650px) {

    .allowance-summary {
        grid-template-columns: 1fr;
    }

}
/* ==================================================
   TERMINÜBERSICHT NACH KALENDERWOCHEN
   ================================================== */

.appointment-week-group {
    margin-bottom: 28px;
}

.appointment-week-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #f5f5f5;
}

.appointment-week-header strong {
    font-size: 1rem;
}

.appointment-week-header span {
    font-size: 0.85rem;
    opacity: 0.7;
}
/* ==================================================
   PASSWORT VERGESSEN
   ================================================== */

.text-button {
    display: block;

    margin:
        14px
        auto
        4px;

    padding: 4px 8px;

    border: none;
    background: transparent;

    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;

    color: #666;

    cursor: pointer;

    text-decoration: underline;
    text-underline-offset: 3px;
}


.text-button:hover {
    color: #222;
}


.text-button:disabled {
    opacity: 0.6;
    cursor: default;
}
.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 52px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: none;
    background: transparent;

    font-size: 1.15rem;
    line-height: 1;

    cursor: pointer;

    border-radius: 8px;
}

.password-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 52px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;
    border: none;
    background: transparent;

    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.password-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}
.offer-note {
    margin-top: 12px;
    padding: 12px 14px;

    border-radius: 10px;

    background: rgba(47, 133, 90, 0.08);

    font-size: 0.95rem;
    line-height: 1.5;
}

.offer-note strong {
    font-weight: 600;
}
.offer-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(47, 133, 90, 0.08);
    line-height: 1.5;
}
.open-appointments-group {
    padding: 18px 20px;
    margin-bottom: 16px;

    border: 1px solid #d9e2e6;
    border-radius: 14px;

    background: #ffffff;
}


.open-appointments-group:last-child {
    margin-bottom: 0;
}


.open-appointments-group .offer-name {
    margin-bottom: 4px;

    font-size: 1.05rem;
    font-weight: 700;
}


.open-appointments-group .offer-meta {
    margin-top: 2px;
    line-height: 1.4;
}


.offer-note {
    display: inline-block;

    margin-top: 12px;
    padding: 8px 12px;

    border-radius: 9px;

    background: rgba(47, 133, 90, 0.08);

    font-size: 0.92rem;
    line-height: 1.4;
}


.open-appointments-group .row-actions {
    margin-top: 14px;
}
/* =====================================================
   OFFENE VERTRETUNGEN – KOMPAKT
   ===================================================== */

.substitute-admin-note {
    width: 100%;
    min-height: 44px;
    max-height: 90px;
    padding: 10px 12px;
    resize: vertical;
    box-sizing: border-box;
}

.substitute-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.substitute-actions .secondary-button {
    padding: 8px 14px;
    min-height: auto;
}

/* Abstand zwischen den einzelnen Vertretungsfällen */
#openSubstituteRequests .open-appointments-group {
    padding: 16px 18px;
}
/* ======================================================
   OFFENE VERTRETUNGEN – KOMPAKT
   ====================================================== */

#openSubstituteRequests .open-appointments-group {
    padding: 16px 18px;
    margin-bottom: 12px;
}


#openSubstituteRequests .form-group {
    margin-top: 10px;
    margin-bottom: 10px;
}


#openSubstituteRequests .substitute-admin-note {
    min-height: 52px;
    height: 52px;
    padding: 10px 12px;

    resize: vertical;

    font-size: 0.95rem;
    line-height: 1.35;
}


#openSubstituteRequests .row-actions {
    display: inline-flex;
    gap: 8px;

    margin-top: 8px;
    margin-right: 8px;
}


#openSubstituteRequests .row-actions button {
    padding: 8px 12px;

    font-size: 0.9rem;
}


#openSubstituteRequests .offer-note {
    margin-top: 8px;
    padding: 8px 10px;
}
.dashboard-list-card {
    align-items: stretch;
}

.dashboard-mini-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.dashboard-mini-row {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.03);
}

.dashboard-mini-row strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.dashboard-mini-row .offer-meta {
    font-size: 0.85rem;
    line-height: 1.35;
}
/* ======================================================
   ÜBUNGSLEITENDENÜBERSICHT – KOMPAKT
   ====================================================== */

#instructorsList .instructor-row {
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(150px, 0.8fr)
        minmax(220px, 1.2fr)
        minmax(190px, 0.9fr)
        auto;

    gap: 18px;

    padding:
        16px
        14px;

    align-items: center;
}


#instructorsList .row-actions {
    margin: 0;
    justify-content: flex-end;
}


#instructorsList .instructor-name {
    font-size: 1rem;
    line-height: 1.3;
}


#instructorsList .instructor-meta {
    margin-top: 3px;
    line-height: 1.35;
}


#instructorsList .document-status {
    margin-top: 0;
}


#instructorsList .status-pill {
    padding:
        5px
        9px;

    font-size: 0.78rem;
}


#instructorsList .small-button {
    white-space: nowrap;
}


@media (max-width: 1000px) {

    #instructorsList .instructor-row {
        grid-template-columns:
            minmax(200px, 1.2fr)
            minmax(140px, 0.8fr)
            minmax(180px, 1fr);
    }

}


@media (max-width: 760px) {

    #instructorsList .instructor-row {
        grid-template-columns:
            1fr;
    }

    #instructorsList .row-actions {
        justify-content: flex-start;
    }

}
/* ======================================================
   ÜBUNGSLEITERPAUSCHALE – KOMPAKTER
   ====================================================== */

.allowance-summary {
    grid-template-columns: repeat(2, minmax(0, 240px));
    justify-content: start;
    gap: 12px;
    margin: 14px 0 22px;
}

.allowance-summary > div {
    padding: 12px 14px;
    border-radius: 10px;
    background: #f7faf8;
}

.allowance-summary .offer-meta {
    margin-bottom: 3px;
    font-size: 0.8rem;
}

.allowance-summary .stat-value {
    font-size: 1.65rem;
    color: var(--green);
}


/* Auszahlungsliste */

#myAllowancePaymentsList {
    gap: 6px;
    margin-top: 10px;
}

#myAllowancePaymentsList .portal-link-row {
    min-height: 0;
    padding: 10px 14px;
    border-radius: 9px;
}

#myAllowancePaymentsList .portal-link-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

#myAllowancePaymentsList .offer-name {
    font-size: 0.95rem;
}

#myAllowancePaymentsList .offer-meta {
    margin: 0;
    font-size: 0.85rem;
}
/* ======================================================
   ÜBUNGSLEITENDEN-AUSWAHL – DROPDOWN
   ====================================================== */

.multi-select {
    position: relative;
    width: 100%;
}


/* Button sieht wie ein normales Select aus */

#offerInstructorDropdownButton {
    position: relative;

    width: 100%;
    min-height: 44px;

    padding:
        10px
        42px
        10px
        13px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #ffffff;
    color: var(--text);

    text-align: left;
    font-weight: 400;

    cursor: pointer;
}


/* kleiner Dropdown-Pfeil */

#offerInstructorDropdownButton::after {
    content: "▾";

    position: absolute;
    right: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);
    font-size: 0.9rem;
}


#offerInstructorDropdownButton:hover {
    border-color: #b9c5ca;
}


#offerInstructorDropdownButton:focus {
    outline: none;

    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(46, 125, 50, 0.10);
}


/* Das eigentliche aufgeklappte Menü */

#offerInstructorDropdown {
    position: absolute;

    z-index: 100;

    top: calc(100% + 5px);
    left: 0;
    right: 0;

    max-height: 300px;

    padding: 8px;

    overflow-y: auto;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow:
        0 10px 28px
        rgba(20, 35, 30, 0.12);
}


/* Suche innerhalb des Dropdowns */

#offerInstructorSearch {
    width: 100%;

    margin: 0 0 6px;

    padding:
        9px
        10px;

    border: 1px solid var(--border);
    border-radius: 7px;

    outline: none;
}


#offerInstructorSearch:focus {
    border-color: var(--green);
}


/* Personen */

#offerInstructors {
    display: flex;
    flex-direction: column;

    gap: 1px;
}


#offerInstructors .multi-select-option {
    display: flex !important;

    align-items: center !important;

    width: 100%;

    gap: 9px;

    padding:
        8px
        9px;

    border-radius: 7px;

    cursor: pointer;
}


#offerInstructors .multi-select-option:hover {
    background: #f4f7f5;
}


#offerInstructors .multi-select-option input {
    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;

    flex-shrink: 0;
}


#offerInstructors .multi-select-option span {
    margin: 0 !important;

    font-size: 0.9rem;
    font-weight: 400;

    text-align: left !important;
}


/* bereits ausgewählte Personen */

#selectedOfferInstructors {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}


#selectedOfferInstructors .selected-instructor-pill {
    padding:
        4px
        8px;

    border-radius: 999px;

    background: var(--green-light);
    color: var(--green-dark);

    font-size: 0.78rem;
}
/* ======================================================
   ANGEBOTSÜBERSICHT – KLARER UND KOMPAKTER
   ====================================================== */

#offersList .offer-row {
    grid-template-columns:
        minmax(260px, 1.6fr)
        minmax(180px, 1fr)
        minmax(100px, 0.6fr)
        minmax(110px, 0.7fr)
        auto;

    gap: 20px;

    padding:
        14px
        16px;

    align-items: center;
}


#offersList .offer-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);

    margin-bottom: 3px;
}


#offersList .offer-meta {
    line-height: 1.35;
}


/* Kürzel etwas dezenter */

#offersList .offer-name + .offer-meta {
    font-size: 0.8rem;
    color: var(--muted);
}


/* Übungsleitung leicht absetzen */

#offersList .offer-name + .offer-meta + .offer-meta {
    margin-top: 2px;

    font-size: 0.82rem;
    color: #526068;
}


/* Status etwas stärker sichtbar */

#offersList .offer-row > .offer-meta:nth-of-type(3) {
    font-weight: 600;
}


/* Bearbeiten rechts sauber ausrichten */

#offersList .row-actions {
    justify-content: flex-end;
    margin: 0;
}


/* Beim Überfahren einer Zeile leichte Hervorhebung */

#offersList .offer-row {
    transition:
        background 0.15s ease;
}


#offersList .offer-row:hover {
    background: #f8faf9;
}


@media (max-width: 950px) {

    #offersList .offer-row {
        grid-template-columns:
            minmax(240px, 1.5fr)
            minmax(170px, 1fr)
            minmax(90px, 0.6fr)
            auto;
    }

}


@media (max-width: 760px) {

    #offersList .offer-row {
        grid-template-columns:
            1fr;

        gap: 7px;
    }

    #offersList .row-actions {
        justify-content: flex-start;
        margin-top: 5px;
    }

}
/* ======================================================
   QUALIFIKATIONEN – GRUPPIERT
   ====================================================== */

#instructorQualifications {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        8px
        16px;
}


#instructorQualifications .qualification-group-title {
    grid-column:
        1 / -1;

    margin:
        8px
        0
        4px;

    padding-bottom: 8px;

    font-size: 0.82rem;
    font-weight: 700;

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


#instructorQualifications .qualification-group-divider {
    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid var(--border);
}


#instructorQualifications .qualification-row {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    padding:
        8px
        9px;

    border-radius: 8px;

    cursor: pointer;
}


#instructorQualifications .qualification-row:hover {
    background: #f5f7f5;
}


#instructorQualifications .qualification-row input {
    width: 17px;
    height: 17px;

    margin: 0;

    flex:
        0 0 17px;
}


#instructorQualifications .qualification-row span {
    min-width: 0;

    line-height: 1.35;

    font-weight: 500;

    overflow-wrap: break-word;
}


@media (max-width: 950px) {

    #instructorQualifications {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    #instructorQualifications {
        grid-template-columns:
            1fr;
    }

}

.danger-button {
    background: #fff4f2;
    color: #a33a2b;
    border-color: #f0d4cf;
}

.danger-button:hover {
    background: #fde9e5;
    border-color: #e5bbb3;
}
/* ======================================================
   AUSWERTUNG – FIXKOSTEN KOMPAKT
   ====================================================== */

/* Drei Kennzahlen nebeneinander */

#page-auswertung .finance-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


#page-auswertung .finance-grid > div {
    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f8faf9;
}


#page-auswertung .finance-value {
    display: block;

    margin-top: 4px;

    font-size: 1.45rem;
    line-height: 1.15;

    color: var(--green);
}


/* Sicherheits-Puffer kompakter */

#evaluationBufferPercent {
    max-width: 180px;
}


#saveEvaluationBufferButton {
    min-width: 130px;

    padding:
        9px
        14px;
}


/* Fixkostenliste */

#fixedCostsList {
    margin-top: 14px;
}


#fixedCostsList .offer-row {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        150px
        auto;

    gap: 18px;

    align-items: center;

    padding:
        12px
        14px;

    border-bottom:
        1px solid var(--border);
}


#fixedCostsList .offer-name {
    font-size: 0.95rem;
    font-weight: 700;
}


#fixedCostsList .offer-row > strong,
#fixedCostsList .offer-row > .stat-value {
    font-size: 0.95rem;
}


/* Bearbeiten + Löschen nebeneinander */

#fixedCostsList .row-actions {
    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    margin: 0;
}


#fixedCostsList .small-button,
#fixedCostsList .danger-button {
    min-height: 0;

    padding:
        7px
        10px;

    border-radius: 8px;

    font-size: 0.8rem;
    font-weight: 650;

    white-space: nowrap;
}


/* Löschen bewusst etwas zurückhaltender */

#fixedCostsList .danger-button {
    background: transparent;

    color: #a33a2b;

    border:
        1px solid #edcbc5;
}


#fixedCostsList .danger-button:hover {
    background: #fff4f2;
}


/* Mobil */

@media (max-width: 800px) {

    #page-auswertung .finance-grid {
        grid-template-columns:
            1fr;
    }


    #fixedCostsList .offer-row {
        grid-template-columns:
            1fr;

        gap: 7px;
    }


    #fixedCostsList .row-actions {
        justify-content: flex-start;
    }

}
/* ======================================================
   FIXKOSTEN – NOCH KOMPAKTER
   ====================================================== */

#fixedCostsList .offer-row {
    grid-template-columns:
        minmax(260px, 1fr)
        130px
        190px;

    gap: 16px;

    min-height: 0;

    padding:
        9px
        12px;
}


#fixedCostsList .row-actions {
    display: grid;

    grid-template-columns:
        repeat(2, 88px);

    gap: 6px;

    justify-content: end;

    margin: 0;
}


#fixedCostsList .small-button,
#fixedCostsList .danger-button {
    width: 88px;

    min-height: 34px;

    padding:
        6px
        8px;

    margin: 0;

    border-radius: 7px;

    font-size: 0.78rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


#fixedCostsList .danger-button {
    background: #fff7f5;

    color: #a33a2b;

    border:
        1px solid #edcbc5;
}


#fixedCostsList .offer-row > strong {
    justify-self: end;

    font-size: 0.95rem;
}


/* Pufferbereich enger */

#evaluationBufferPercent {
    height: 42px;

    padding:
        8px
        12px;
}


#saveEvaluationBufferButton {
    height: 42px;

    padding:
        8px
        14px;
}
/* ======================================================
   FIXKOSTEN – KOMPAKTE VERWALTUNGSLISTE
   ====================================================== */

#fixedCostsList .offer-row {
    display: grid;

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

    align-items: center;

    gap: 20px;

    min-height: 0;

    padding:
        10px
        12px;

    border-bottom:
        1px solid var(--border);
}


#fixedCostsList .offer-row:last-child {
    border-bottom: none;
}


#fixedCostsList .offer-name {
    font-size: 0.95rem;
    font-weight: 700;
}


#fixedCostsList .offer-meta {
    margin-top: 2px;

    font-size: 0.8rem;

    line-height: 1.3;
}


/* Betrag + Buttons in EINER Zeile */

#fixedCostsList .fixed-cost-actions {
    display: grid;

    grid-template-columns:
        120px
        96px
        96px;

    gap: 8px;

    align-items: center;
}


/* Betrag */

#fixedCostsList .fixed-cost-actions strong {
    text-align: right;

    font-size: 0.95rem;

    white-space: nowrap;
}


/* beide Buttons exakt gleich */

#fixedCostsList .fixed-cost-actions button {
    width: 96px;
    height: 34px;

    min-height: 34px;

    margin: 0;

    padding:
        5px
        8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 0.78rem;
    font-weight: 650;
}


/* Bearbeiten neutral */

#fixedCostsList .edit-fixed-cost-button {
    background: #f4f6f7;

    color: var(--text);

    border:
        1px solid var(--border);
}


/* Löschen dezent rot */

#fixedCostsList .delete-fixed-cost-button {
    background: #fff7f5;

    color: #a33a2b;

    border:
        1px solid #edcbc5;
}


#fixedCostsList .delete-fixed-cost-button:hover {
    background: #ffece8;
}


@media (max-width: 760px) {

    #fixedCostsList .offer-row {
        grid-template-columns:
            1fr;
    }


    #fixedCostsList .fixed-cost-actions {
        grid-template-columns:
            1fr
            96px
            96px;
    }


    #fixedCostsList .fixed-cost-actions strong {
        text-align: left;
    }

}
/* ======================================================
   MATERIALIEN – THEMENGEBIETE
   ====================================================== */

.material-topic-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        7px
        12px;

    margin-top: 4px;
}


.material-topic-option {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px
        9px;

    border-radius: 8px;

    cursor: pointer;
}


.material-topic-option:hover {
    background: #f5f7f5;
}


.material-topic-option input {
    width: 17px;
    height: 17px;

    margin: 0;

    flex:
        0 0 17px;
}


.material-topic-option span {
    font-size: 0.9rem;

    line-height: 1.3;
}


@media (max-width: 900px) {

    .material-topic-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .material-topic-grid {
        grid-template-columns:
            1fr;
    }

}
/* ======================================================
   ANGEBOTSMODAL – VERGÜTUNG ÜBUNGSLEITENDE KOMPAKT
   ====================================================== */

.instructor-compensation-card {
    padding: 18px 20px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #fafcfb;
}


.instructor-compensation-card h4 {
    margin:
        0
        0
        16px;

    font-size: 1.05rem;
}


.instructor-compensation-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        12px
        16px;

    align-items: end;
}


.instructor-compensation-grid .form-group {
    margin-bottom: 0;
}


.instructor-compensation-grid label {
    min-height: 36px;

    display: flex;
    align-items: flex-end;

    font-size: 0.82rem;
    line-height: 1.25;
}


.instructor-compensation-grid input,
.instructor-compensation-grid select {
    width: 100%;

    min-height: 42px;

    padding:
        8px
        10px;
}


.instructor-compensation-summary {
    margin-top: 16px;

    padding-top: 12px;

    border-top:
        1px solid var(--border);

    font-size: 0.88rem;
    line-height: 1.5;
}


.instructor-compensation-summary strong {
    font-weight: 700;
}


/* Warnungen / Hinweise nicht unnötig hoch machen */

.compensation-warning:empty,
.compensation-help:empty {
    display: none;
}


@media (max-width: 900px) {

    .instructor-compensation-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .instructor-compensation-grid {
        grid-template-columns:
            1fr;
    }

}
/* ======================================================
   ANGEBOTSÜBERSICHT – GRUPPIERT
   ====================================================== */

#offersList {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


.offer-group {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #ffffff;
}


.offer-group-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        11px
        16px;

    font-size: 0.92rem;
    font-weight: 750;

    border-bottom:
        1px solid var(--border);
}


.offer-group-header span {
    flex-shrink: 0;

    font-size: 0.76rem;
    font-weight: 600;

    opacity: 0.7;
}


.offer-group-list .offer-row:last-child {
    border-bottom: none;
}


/* Kleine Farbkante an jeder Zeile */

.offer-group-list .offer-row {
    border-left:
        4px solid transparent;

    padding-left: 14px;
}


/* Gruppe 1 */

.offer-group-header-1 {
    background: #eef5ff;
    color: #345c8c;
}

.offer-group-1 {
    border-left-color: #7397c6 !important;
}


/* Gruppe 2 */

.offer-group-header-2 {
    background: #eef8f0;
    color: #376b43;
}

.offer-group-2 {
    border-left-color: #75a681 !important;
}


/* Gruppe 3 */

.offer-group-header-3 {
    background: #fff1ef;
    color: #94493f;
}

.offer-group-3 {
    border-left-color: #ca8177 !important;
}


/* Gruppe 4 */

.offer-group-header-4 {
    background: #fff7e8;
    color: #8a662a;
}

.offer-group-4 {
    border-left-color: #d2a857 !important;
}


/* Gruppe 5 */

.offer-group-header-5 {
    background: #f4effa;
    color: #6b4e87;
}

.offer-group-5 {
    border-left-color: #9a7bb8 !important;
}


/* Gruppe 6 */

.offer-group-header-6 {
    background: #eef8f8;
    color: #3e7073;
}

.offer-group-6 {
    border-left-color: #79abad !important;
}


/* Gruppe 7 */

.offer-group-header-7 {
    background: #f4f4f4;
    color: #5f666b;
}

.offer-group-7 {
    border-left-color: #9aa1a6 !important;
}
/* ======================================================
   TERMINE IM ANGEBOTSMODAL – KOMPAKTER
   ====================================================== */

.appointment-preview-row {
    display: grid;
    grid-template-columns: 180px 150px minmax(300px, 1fr) 170px;
    gap: 20px;
    align-items: start;

    padding: 18px 20px;
    margin-bottom: 10px;

    border: 1px solid #dfe5e8;
    border-radius: 12px;

    background: #fff;
}


/* Datum */

.appointment-preview-row > div:first-child {
    font-weight: 650;
    color: #263238;
}


/* Uhrzeit */

.appointment-preview-row > div:nth-child(2) {
    font-weight: 600;
    color: #263238;
}


/* Status + Details */

.appointment-preview-status {
    font-weight: 700;
    color: #263238;
}


/* Zusatzinformationen weniger dominant */

.appointment-preview-row .offer-meta {
    margin-top: 3px;

    font-size: 0.88rem;
    line-height: 1.35;

    color: #6b7780;
}


/* Checkboxbereich kompakter */

.appointment-preview-row label {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 10px;

    font-size: 0.9rem;
}


/* Bearbeiten-Button kleiner */

.appointment-preview-row .small-button {
    width: auto;
    min-width: 110px;

    padding: 9px 14px;
}


/* Mobil / schmales Fenster */

@media (max-width: 1000px) {

    .appointment-preview-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}
/* ======================================================
   TERMINE IM ANGEBOTSMODAL – MODALFREUNDLICH
   ====================================================== */

.appointment-preview-row {
    display: grid;

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

    gap:
        14px
        20px;

    align-items: start;

    width: 100%;

    padding:
        16px
        18px;

    overflow: hidden;
}


/* verhindert, dass lange Texte die Karte sprengen */

.appointment-preview-row > div {
    min-width: 0;
}


/* Detailbereich darf umbrechen */

.appointment-preview-row .offer-meta,
.appointment-preview-status {
    overflow-wrap: anywhere;
}


/* Checkbox + Bearbeiten nach unten */

.appointment-preview-row .row-actions,
.appointment-preview-row .checkbox-row {
    grid-column:
        1 / -1;
}


/* Falls Checkbox und Button zusammen in einem Container liegen */

.appointment-preview-row .row-actions {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    margin-top: 4px;
}


/* Bearbeiten kleiner */

.appointment-preview-row .small-button {
    width: auto;

    min-width: 105px;

    padding:
        8px
        12px;
}


/* Modal etwas breiter, aber weiterhin responsiv */

#offerFormModal .modal-card {
    width:
        min(
            1050px,
            calc(100vw - 48px)
        );
}


/* schmalere Fenster */

@media (max-width: 850px) {

    .appointment-preview-row {
        grid-template-columns:
            1fr;
    }

    .appointment-preview-row .row-actions,
    .appointment-preview-row .checkbox-row {
        grid-column:
            1;
    }

}
/* ======================================================
   TERMINDETAILS – RUHIGER UND ÜBERSICHTLICHER
   ====================================================== */

/* Rechte Informationsspalte */
.appointment-preview-status {
    font-size: 0.9rem;
    line-height: 1.45;

    color: #263238;
}


/* Zusatzinformationen */
.appointment-preview-status .offer-meta,
.appointment-preview-row .offer-meta {
    margin-top: 5px;

    font-size: 0.82rem;
    line-height: 1.4;

    color: #6f7b83;
}


/* Einzelne Detailblöcke etwas voneinander trennen */
.appointment-preview-status .offer-meta + .offer-meta,
.appointment-preview-row .offer-meta + .offer-meta {
    margin-top: 8px;
}


/* Datum und Uhrzeit kompakt halten */
.appointment-preview-row > div:first-child,
.appointment-preview-row > div:nth-child(2) {
    font-size: 0.95rem;
    line-height: 1.3;
}


/* Terminstatus soll klar herausstechen */
.appointment-preview-status {
    font-weight: 700;
}


/* Untergeordnete Texte wieder normal */
.appointment-preview-status .offer-meta {
    font-weight: 400;
}


/* Lange Rechnungsnummern dürfen sauber umbrechen */
.appointment-preview-row {
    overflow-wrap: anywhere;
}


/* Karte insgesamt etwas kompakter */
.appointment-preview-row {
    padding: 16px 18px;
}
.appointment-detail-block {
    margin-top: 10px;
    padding-top: 8px;

    border-top: 1px solid #edf0f2;

    font-size: 0.82rem;
    line-height: 1.4;

    font-weight: 400;
    color: #6f7b83;
}

.appointment-detail-block:first-of-type {
    margin-top: 6px;
}

.appointment-detail-important {
    font-weight: 650;
    color: #45545d;
}
/* ======================================================
   TERMINDETAILS – STRUKTURIERT
   ====================================================== */

.appointment-detail-block {
    margin-top: 10px;
    padding: 10px 12px;

    border-radius: 9px;

    background: #f7f9fa;

    font-size: 0.82rem;
    line-height: 1.4;

    font-weight: 400;
    color: var(--muted);
}


.appointment-detail-warning {
    background: #fff8ee;
}


.appointment-detail-title {
    margin-bottom: 7px;

    font-weight: 700;
    color: var(--text);
}


.appointment-detail-line {
    display: grid;

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

    gap: 10px;

    padding: 3px 0;
}


.appointment-detail-line span {
    color: var(--muted);
}


.appointment-detail-line strong {
    font-weight: 600;

    color: var(--text);

    overflow-wrap: anywhere;
}


.appointment-detail-sub {
    margin-top: 4px;

    font-size: 0.8rem;
    font-weight: 400;

    color: var(--muted);
}
/* ======================================================
   TERMINÜBERSICHT – ANGEBOTSGRUPPEN
   ====================================================== */

#adminAppointmentsList .offer-row {
    border-left:
        4px solid transparent;
}


/* 1.x */

#adminAppointmentsList .appointment-group-1 {
    border-left-color:
        #7397c6;
}


/* 2.x */

#adminAppointmentsList .appointment-group-2 {
    border-left-color:
        #75a681;
}


/* 3.x */

#adminAppointmentsList .appointment-group-3 {
    border-left-color:
        #ca8177;
}


/* 4.x */

#adminAppointmentsList .appointment-group-4 {
    border-left-color:
        #d2a857;
}


/* 5.x */

#adminAppointmentsList .appointment-group-5 {
    border-left-color:
        #9a7bb8;
}


/* 6.x */

#adminAppointmentsList .appointment-group-6 {
    border-left-color:
        #79abad;
}


/* 7.x */

#adminAppointmentsList .appointment-group-7 {
    border-left-color:
        #9aa1a6;
}
/* ======================================================
   TERMINÜBERSICHT – TAGESGRUPPIERUNG
   ====================================================== */

.appointment-day-group {
    margin-top: 16px;
}


.appointment-day-header {
    padding:
        9px
        14px;

    background: #f7f8f8;

    border-bottom:
        1px solid var(--border);

    font-size: 0.92rem;
    font-weight: 750;

    color: var(--text);

    text-transform: capitalize;
}


.appointment-day-list {
    padding-bottom: 8px;
}


/* Wechsel zur nächsten Hauptgruppe deutlicher */

#adminAppointmentsList
.appointment-group-start {
    margin-top: 10px;

    border-top:
        6px solid #ffffff;
}


/* Zeitspalte kompakter */

#adminAppointmentsList
.appointment-day-list
.offer-row {
    grid-template-columns:
        130px
        minmax(260px, 1.4fr)
        minmax(180px, 1fr)
        130px
        auto;

    padding:
        10px
        14px;
}


/* dieselben Farben wie bisher */

#adminAppointmentsList .appointment-group-1 {
    border-left:
        4px solid #7397c6;
}

#adminAppointmentsList .appointment-group-2 {
    border-left:
        4px solid #75a681;
}

#adminAppointmentsList .appointment-group-3 {
    border-left:
        4px solid #ca8177;
}

#adminAppointmentsList .appointment-group-4 {
    border-left:
        4px solid #d2a857;
}

#adminAppointmentsList .appointment-group-5 {
    border-left:
        4px solid #9a7bb8;
}

#adminAppointmentsList .appointment-group-6 {
    border-left:
        4px solid #79abad;
}

#adminAppointmentsList .appointment-group-7 {
    border-left:
        4px solid #9aa1a6;
}
/* ======================================================
   TERMINÜBERSICHT – RESPONSIVE ZEILEN
   ====================================================== */

#adminAppointmentsList
.appointment-day-list
.offer-row {
    display: grid;

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

    gap:
        8px
        24px;

    align-items: center;

    width: 100%;
    box-sizing: border-box;

    padding:
        12px
        16px;
}


/* Uhrzeit */

#adminAppointmentsList
.appointment-day-list
.offer-row > div:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
}


/* Angebot */

#adminAppointmentsList
.appointment-day-list
.offer-row > div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}


/* Übungsleitung */

#adminAppointmentsList
.appointment-day-list
.offer-row > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;

    font-size: 0.88rem;
}


/* Status */

#adminAppointmentsList
.appointment-day-list
.offer-row > div:nth-child(4) {
    grid-column: 3;
    grid-row: 1;

    white-space: nowrap;
}


/* Bearbeiten */

#adminAppointmentsList
.appointment-day-list
.offer-row > .row-actions {
    grid-column: 3;
    grid-row: 2;

    justify-self: end;
}


/* Lange Angebotsnamen dürfen umbrechen */

#adminAppointmentsList
.offer-name,
#adminAppointmentsList
.offer-meta {
    min-width: 0;

    overflow-wrap: anywhere;
}
@media (max-width: 900px) {

    #adminAppointmentsList
    .appointment-day-list
    .offer-row {

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

        gap:
            6px
            14px;
    }


    #adminAppointmentsList
    .appointment-day-list
    .offer-row > div:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }


    #adminAppointmentsList
    .appointment-day-list
    .offer-row > div:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }


    #adminAppointmentsList
    .appointment-day-list
    .offer-row > div:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }


    #adminAppointmentsList
    .appointment-day-list
    .offer-row > div:nth-child(4) {
        grid-column: 1;
        grid-row: 2;

        align-self: start;
    }


    #adminAppointmentsList
    .appointment-day-list
    .offer-row > .row-actions {
        grid-column: 1 / -1;
        grid-row: 3;

        justify-self: start;
    }

}
/* ======================================================
   BISHERIGE TERMINE – SAUBERE LISTE
   ====================================================== */

#myAppointmentHistoryList {
    display: block;

    border: 1px solid var(--border);
    border-radius: 12px;

    overflow: hidden;

    background: #ffffff;
}


#myAppointmentHistoryList .appointment-preview-row {
    display: grid;

    grid-template-columns:
        170px
        160px
        minmax(260px, 1fr)
        minmax(220px, 1fr);

    gap: 20px;

    align-items: start;

    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 16px 18px;

    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;

    background: #ffffff;
}


#myAppointmentHistoryList .appointment-preview-row:last-child {
    border-bottom: none;
}


#myAppointmentHistoryList .history-date,
#myAppointmentHistoryList .history-time {
    white-space: nowrap;
}


#myAppointmentHistoryList .history-time {
    font-weight: 600;
}


#myAppointmentHistoryList .history-offer,
#myAppointmentHistoryList .history-status {
    min-width: 0;
}


#myAppointmentHistoryList .offer-meta {
    margin-top: 4px;

    font-size: 0.82rem;
    line-height: 1.4;

    color: var(--muted);
}


/* Normales Laptop-Fenster */

@media (max-width: 1100px) {

    #myAppointmentHistoryList .appointment-preview-row {
        grid-template-columns:
            150px
            140px
            minmax(0, 1fr);

        gap: 8px 16px;
    }


    #myAppointmentHistoryList .history-status {
        grid-column:
            3;

        margin-top: 3px;
    }

}


/* Kleine Fenster */

@media (max-width: 760px) {

    #myAppointmentHistoryList .appointment-preview-row {
        grid-template-columns:
            1fr;

        gap: 5px;

        padding: 14px 16px;
    }


    #myAppointmentHistoryList .history-date,
    #myAppointmentHistoryList .history-time,
    #myAppointmentHistoryList .history-offer,
    #myAppointmentHistoryList .history-status {
        grid-column: 1;
    }


    #myAppointmentHistoryList .history-time {
        margin-bottom: 4px;
    }

}
/* ======================================================
   OFFENE VERTRETUNG – BESTÄTIGUNG
   ====================================================== */

.substitute-confirmation-area {
    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid var(--border);
}


.substitute-compensation-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.substitute-confirmation-area .form-group {
    margin-top: 8px;
    margin-bottom: 8px;
}


.substitute-confirm-checkbox-row {
    margin-top: 12px;
}


@media (max-width: 850px) {

    .substitute-compensation-grid {
        grid-template-columns:
            1fr;
    }

}
/* ======================================================
   VERTRETUNG BEREITS GEPLANT
   ====================================================== */

#openSubstituteRequests
.open-appointments-group.substitute-planned {
    border-left:
        5px solid #d2a857;

    background:
        #fffdf7;
}


.substitute-planned-badge {
    display: inline-block;

    margin-top: 8px;
    margin-bottom: 4px;

    padding:
        5px
        9px;

    border-radius: 999px;

    background:
        rgba(210, 168, 87, 0.16);

    font-size: 0.78rem;
    font-weight: 700;

    color:
        #80601e;
}
/* ======================================================
   OFFENE VERTRETUNGEN – KOMPAKTE AKTIONSBUTTONS
   ====================================================== */

#openSubstituteRequests .row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 10px;
}


#openSubstituteRequests .row-actions button {
    width: auto;
    min-width: 0;

    padding: 7px 12px;

    font-size: 0.82rem;
    line-height: 1.2;

    border-radius: 8px;

    flex: 0 0 auto;
}


/* Planung speichern / löschen ebenfalls kompakt */

#openSubstituteRequests
.substitute-planning-actions {
    justify-content: flex-start;
}


/* Der Abschluss darf etwas hervorgehoben sein,
   aber nicht riesig werden */

#openSubstituteRequests
.complete-substitute-button {
    width: auto;

    padding: 7px 13px;

    font-weight: 650;
}
#openSubstituteRequests
.substitute-details {
    margin-top: 12px;
    padding-top: 12px;

    border-top:
        1px solid var(--border);
}


#openSubstituteRequests
.substitute-details.hidden {
    display: none;
}
/* ======================================================
   TERMIN BEARBEITEN – KLARE BEREICHE
   ====================================================== */

#appointmentEditModal .appointment-edit-panel {
    width: min(760px, calc(100vw - 32px));
    max-height: 90vh;
    overflow-y: auto;
}

#appointmentEditModal .form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}

#appointmentPersonnelPlanningGroup,
#appointmentSubstituteRequestGroup {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8faf9;
}

#appointmentSubstituteRequestFields {
    margin-top: 14px;
}

#appointmentSubstituteRequestFields:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}

#appointmentSubstituteRequestFields select,
#appointmentSubstituteRequestFields input {
    width: 100%;
    box-sizing: border-box;
}

#appointmentEditModal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 650px) {
    #appointmentSubstituteRequestFields:not(.hidden) {
        grid-template-columns: 1fr;
    }
}
/* ======================================================
   TERMIN-HISTORIE – KOMPAKT
   ====================================================== */

#myAppointmentHistoryList .appointment-preview-row {
    padding: 12px 16px;
    min-height: 0;
    align-items: start;
    column-gap: 20px;
}


/* Datum und Uhrzeit kompakt */

#myAppointmentHistoryList .history-date,
#myAppointmentHistoryList .history-time {
    line-height: 1.3;
}


/* Angebotsname */

#myAppointmentHistoryList .offer-name {
    margin: 0;
    line-height: 1.25;
}


/* Schule und weitere Zusatzinfos */

#myAppointmentHistoryList .offer-meta {
    margin-top: 3px;
    line-height: 1.3;
}


/* Status */

#myAppointmentHistoryList .history-status {
    line-height: 1.3;
}


/* Konditionen der Vertretung in EINER Zeile */

#myAppointmentHistoryList .history-compensation {
    margin-top: 5px;

    font-size: 0.88rem;
    line-height: 1.3;

    color: var(--muted);
}


/* Zwischen den Terminen keine riesigen Abstände */

#myAppointmentHistoryList .appointment-preview-row + .appointment-preview-row {
    margin-top: 0;
}
/* ======================================================
   AUSWERTUNG – KOMPAKTER
   ====================================================== */

.evaluation-buffer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 18px;
    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.evaluation-buffer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.evaluation-buffer-controls input {
    width: 90px;
}

.evaluation-subsection {
    margin-top: 24px;
}

.evaluation-subsection h3 {
    margin-bottom: 4px;
}

.evaluation-target-highlight {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 14px;
}

.evaluation-target-value {
    margin-top: 4px;

    font-size: 1.8rem;
    font-weight: 700;
}
.allowance-forecast-warning {
    font-weight: 600;
}
/* ======================================================
   REDUZIERTER PORTAL-STYLE
   ====================================================== */

/* ------------------------------------------------------
   STANDARD-BUTTONS
   ------------------------------------------------------ */

.primary-button,
.secondary-button,
.danger-button {
    border-radius: 10px;
    font-weight: 600;
    box-shadow: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}


/* Primäre Aktionen – nicht mehr kräftig grün */

.primary-button {
    background: #374151;
    color: #ffffff;
    border: 1px solid #374151;
}

.primary-button:hover {
    background: #1f2937;
    border-color: #1f2937;
}


/* Normale Aktionen */

.secondary-button {
    background: #f8f9fa;
    color: #303840;
    border: 1px solid #d7dde2;
}

.secondary-button:hover {
    background: #eef1f3;
    border-color: #c8d0d6;
}


/* Löschen weiterhin erkennbar, aber deutlich ruhiger */

.danger-button {
    background: #ffffff;
    color: #8a3c34;
    border: 1px solid #dfc5c1;
}

.danger-button:hover {
    background: #faf3f2;
    border-color: #cda9a4;
}


/* ------------------------------------------------------
   BUTTONS IN TERMIN- UND ANGEBOTSKARTEN
   ------------------------------------------------------ */

.appointment-card button,
.offer-card button,
.appointment-item button {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.95rem;
}


/* ------------------------------------------------------
   KARTEN ETWAS RUHIGER
   ------------------------------------------------------ */

.stat-card,
.offer-card,
.appointment-card,
.modal-card {
    border-color: #dde2e5;
    box-shadow: none;
}


/* ------------------------------------------------------
   HINTERGRÜNDE
   ------------------------------------------------------ */

body {
    background: #f4f5f5;
}


/* ------------------------------------------------------
   FORMULARFELDER
   ------------------------------------------------------ */

input,
select,
textarea {
    border-color: #d4dadd;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #8b959c;
    box-shadow: 0 0 0 3px rgba(90, 100, 108, 0.08);
    outline: none;
}
/* ======================================================
   RUHIGERE KENNZAHLEN & FINANZBEREICHE
   ====================================================== */


/* ------------------------------------------------------
   ALLGEMEINE KENNZAHLEN
   ------------------------------------------------------ */

.stat-value {
    color: #303840 !important;
    font-size: 1.65rem;
    line-height: 1.15;
    font-weight: 650;
}


/* Labels etwas zurücknehmen */

.stat-label,
.finance-label {
    color: #707980;
    font-size: 0.9rem;
    font-weight: 500;
}


/* ------------------------------------------------------
   DASHBOARD
   ------------------------------------------------------ */

#page-dashboard .stat-card {
    background: #fafafa;
    border: 1px solid #dde2e5;
}

#page-dashboard .stat-value {
    color: #303840 !important;
    font-size: 1.55rem;
}


/* Finanzplanung auf dem Dashboard */

#page-dashboard .finance-grid > div {
    background: #fafafa;
    border: 1px solid #e0e4e7;
    border-radius: 10px;
    padding: 18px;
}

#page-dashboard .finance-value {
    display: block;
    margin-top: 6px;

    color: #303840 !important;

    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 650;
}

#page-dashboard .finance-subvalue {
    margin-top: 4px;
    color: #747d84;
    font-size: 0.85rem;
}


/* ------------------------------------------------------
   AUSWERTUNG
   ------------------------------------------------------ */

#page-auswertung .stat-card {
    background: #fafafa;
    border: 1px solid #e0e4e7;
    padding: 18px 20px;
}


/* Zahlen bewusst kleiner als bisher */

#page-auswertung .stat-value {
    color: #303840 !important;

    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 650;

    margin-top: 6px;
}


/* Monatsziel darf leicht hervorgehoben bleiben,
   aber ohne Grün */

#evaluationMonthlyTarget,
#evaluationTargetOverview {
    color: #20272d !important;
    font-weight: 700;
}


/* ------------------------------------------------------
   FINANZWERTE / ZAHLUNGEN
   ------------------------------------------------------ */

#evaluationFixedCosts,
#evaluationBuffer,
#evaluationMonthlyTarget,
#evaluationPlannedRevenue,
#evaluationInvoicedRevenue,
#evaluationPaidRevenue,
#evaluationInstructorPayments,
#evaluationContributionMargin,
#evaluationContributionMarginPercent,
#evaluationTargetProgress,
#evaluationRemainingTarget,
#evaluationAverageContributionPerAppointment,
#evaluationPlannedTargetProgress,
#evaluationPlannedRemainingTarget,
#evaluationRequiredAppointments {
    color: #303840 !important;
}


/* ------------------------------------------------------
   MINI-LISTEN AUF DEM DASHBOARD
   ------------------------------------------------------ */

.dashboard-mini-item {
    background: #f5f6f6;
    border: 1px solid #e3e6e8;
    border-radius: 8px;
}

.dashboard-mini-item strong {
    color: #303840;
}


/* ------------------------------------------------------
   CONTENT-CARDS NOCH ETWAS RUHIGER
   ------------------------------------------------------ */

.content-card {
    border-color: #e0e4e6;
    box-shadow: none;
}
#page-auswertung .stat-value {
    font-size: 1.35rem;
}
/* ======================================================
   SIDEBAR – REDUZIERTER GRAUER STYLE
   ====================================================== */

/* Gesamte Sidebar */

.sidebar {
    background: #252a2e !important;
}


/* Normale Navigation */

.nav-button {
    color: #e4e7e9;
    background: transparent;
}


/* Hover */

.nav-button:hover {
    background: #32383d !important;
    color: #ffffff;
}


/* Aktiver Menüpunkt */

.nav-button.active {
    background: #3b4247 !important;
    color: #ffffff !important;
}


/* Icons nicht zusätzlich hervorheben */

.nav-button.active .nav-icon {
    opacity: 1;
}


/* Benutzer unten */

.logged-in-user {
    color: #c7ccd0;
}


/* Abmelden */

.logout-button {
    background: transparent !important;
    color: #e4e7e9 !important;
    border-color: #555d63 !important;
}

.logout-button:hover {
    background: #32383d !important;
    border-color: #687177 !important;
}
/* ======================================================
   LOGIN – GRAUER REDUZIERTER STYLE
   ====================================================== */

.login-view {
    background: #f1f3f4 !important;
}


.login-card {
    background: #ffffff;
    border: 1px solid #e0e4e6;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.08);
}


/* LINEA e. V. nicht mehr grün */

.login-logo {
    color: #303840 !important;
}


/* Überschrift */

.login-card h1 {
    color: #252c31;
}


/* Untertitel */

.login-intro {
    color: #737c83;
}


/* Loginbutton genauso wie unsere anderen Hauptbuttons */

.login-button {
    background: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
}

.login-button:hover {
    background: #252c31 !important;
    border-color: #252c31 !important;
}


/* Passwort vergessen etwas dezenter */

#forgotPasswordButton {
    color: #60676c !important;
}

#forgotPasswordButton:hover {
    color: #252c31 !important;
}