.grade-conversion-page {
    padding: 18px 20px 40px;
}

.grade-conversion-page header {
    margin-bottom: 18px;
}

.grade-conversion-page .subtitle {
    margin-top: 4px;
}

.conversion-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d7d7d7;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 18px;
    margin-bottom: 18px;
}

.conversion-controls {
    padding-bottom: 16px;
}

.conversion-explanation {
    background: #fff7d6;
    border: 1px solid #d7b35a;
    border-radius: 9px;
    padding: 12px 14px;
    line-height: 1.45;
}

.paste-hint {
    color: #555;
    font-size: 13px;
    margin-top: 8px;
}

.conversion-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

.conversion-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #2f6fed;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.conversion-toolbar button:hover {
    background: #2458c7;
    color: #fff;
    transform: translateY(-1px);
}

.conversion-toolbar .secondary-button {
    background: #f0f0f0;
    color: #222;
    border: 1px solid #aaa;
}

.conversion-toolbar .secondary-button:hover {
    background: #dedede;
    color: #111;
}

.conversion-status {
    font-weight: 700;
    margin-left: auto;
}

.conversion-status.saving { color: #a86100; }
.conversion-status.saved { color: #238636; }
.conversion-status.error { color: #c0392b; }

.conversion-table-wrapper {
    overflow: auto;
    max-height: calc(100vh - 315px);
    border: 1px solid #c8c8c8;
    border-radius: 10px;
}

.conversion-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 975px;
    min-width: 975px;
}

.conversion-table col.col-number { width: 55px; }
.conversion-table col.col-first-name,
.conversion-table col.col-last-name { width: 180px; }
.conversion-table col.col-grade { width: 140px; }

.conversion-table th,
.conversion-table td {
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    padding: 8px 10px;
    vertical-align: middle;
    box-sizing: border-box;
}

.conversion-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.conversion-table th {
    background: #dce6f1;
    text-align: center;
}

/*
 * Der komplette Tabellenkopf wird als eine Einheit fixiert. Einzelne sticky-
 * TH-Zellen mit rowspan werden von Safari sonst unterschiedlich positioniert;
 * dadurch entsteht zwischen den beiden Kopfzeilen ein sichtbarer Leerstreifen.
 */
.conversion-table thead tr:first-child th,
.conversion-table thead tr:nth-child(2) th {
    height: 42px;
}

.conversion-table thead th[rowspan="2"] {
    vertical-align: middle;
}

.conversion-table .direction-header {
    font-size: 15px;
    font-weight: 700;
}

.conversion-table .direction-a-to-c {
    background: #dbeadf;
}

.conversion-table .direction-c-to-a {
    background: #f4e5bf;
}

.conversion-table tbody tr:nth-child(even) td {
    background: #fafafa;
}

.conversion-table tbody tr.empty-student td {
    color: #888;
}

.conversion-table .row-number {
    width: 55px;
    text-align: center;
    font-weight: 700;
}

.conversion-table .student-name {
    width: 180px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grade-cell {
    text-align: center;
}

.grade-input {
    width: 88px;
    min-height: 38px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #aab7c4;
    border-radius: 7px;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.grade-input:focus {
    border-color: #2f6fed;
    outline: 2px solid rgba(47, 111, 237, 0.18);
}

.grade-input.invalid {
    border: 2px solid #c0392b;
    background: #fff1f0;
}

.target-grade {
    display: inline-flex;
    min-width: 70px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #aab7c4;
    border-radius: 7px;
    background: #eef4fa;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .conversion-status {
        width: 100%;
        margin-left: 0;
    }
}

@media print {
    nav,
    .main-nav,
    .conversion-toolbar,
    .conversion-explanation,
    .paste-hint {
        display: none !important;
    }

    .grade-conversion-page {
        padding: 0;
    }

    .conversion-card {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .conversion-controls {
        display: none;
    }

    .conversion-table-wrapper {
        max-height: none;
        overflow: visible;
        border: none;
    }

    .conversion-table {
        width: 100%;
        min-width: 0;
    }
}