/* Profile / Courses — modals */
.courses-modal .modal-dialog {
    margin: 1rem auto;
}

.courses-modal__content {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.courses-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, var(--secondary-50) 0%, var(--surface-card) 100%);
}

.courses-modal__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-heading);
}

.courses-modal__close,
.courses-modal__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-muted) !important;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.courses-modal__back {
    width: auto;
    height: auto;
    padding: 0.5rem 0.75rem;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
}

.courses-modal__close:hover,
.courses-modal__back:hover {
    background: var(--surface-muted);
    color: var(--text-heading) !important;
    border-color: var(--border-default);
}

.courses-modal__body {
    padding: 1rem 1.25rem 1.25rem;
    max-height: min(72vh, 680px);
    overflow-y: auto;
}

.courses-modal__body--center {
    text-align: center;
}

.courses-modal__empty {
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.courses-modal__sections {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.courses-modal__section-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.courses-modal__section-trigger span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.courses-modal__section-trigger i:first-child {
    color: var(--secondary-600);
}

.courses-modal__section-icon {
    color: var(--text-muted);
    font-size: 0.8125rem;
    transition: transform 0.15s ease;
}

.courses-modal__section-trigger:hover {
    background: var(--surface-muted);
    border-color: var(--secondary-200);
}

.courses-modal__panel {
    margin-top: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.courses-modal__panel-inner {
    margin-top: 0.75rem;
}

.courses-modal__hint {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.courses-modal__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.875rem;
}

.courses-modal__radio {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-heading);
    cursor: pointer;
}

.courses-modal__radio input {
    accent-color: var(--primary);
}

.courses-modal__radio--danger {
    color: var(--danger);
}

.courses-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.courses-modal__textarea,
.courses-modal__input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-heading);
    font-size: 0.9375rem;
    line-height: 1.6;
    resize: vertical;
}

.courses-modal__textarea:focus,
.courses-modal__input:focus {
    outline: none;
    border-color: var(--secondary-400);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.courses-modal__field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.courses-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: flex-start;
    margin-top: 0.75rem;
}

.courses-modal__actions--center {
    justify-content: center;
}

.courses-modal__btn {
    min-width: 7rem;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
}

.courses-modal__section-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-subtle);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-heading);
}

.courses-modal__section-title--danger {
    color: var(--danger);
    border-bottom-color: rgba(239, 68, 68, 0.25);
}

.courses-modal__section-title--success {
    color: var(--primary-700);
    border-bottom-color: rgba(145, 190, 81, 0.35);
}

.courses-modal__table {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-card);
}

.courses-modal__table-head,
.courses-modal__table-row {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
}

.courses-modal__table-head {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

.courses-modal__table-row {
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-heading);
    text-align: center;
    line-height: 1.6;
}

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

.courses-modal__table-row:nth-child(even) {
    background: rgba(248, 250, 252, 0.7);
}

.courses-modal__table--4 .courses-modal__table-head,
.courses-modal__table--4 .courses-modal__table-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.courses-modal__table--5 .courses-modal__table-head,
.courses-modal__table--5 .courses-modal__table-row {
    grid-template-columns: 1.2fr 0.8fr 1.4fr 0.8fr 0.9fr;
}

.courses-modal__table--exams .courses-modal__table-head,
.courses-modal__table--exams .courses-modal__table-row {
    grid-template-columns: 1.1fr 0.8fr 1.5fr 0.8fr 1fr;
}

.courses-modal__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.courses-modal__status--info {
    background: var(--secondary-soft-bg);
    color: var(--secondary-700);
}

.courses-modal__status--muted {
    background: var(--surface-muted);
    color: var(--text-muted);
}

.courses-modal__rules {
    padding: 0.25rem 0;
}

.courses-modal__rules ol {
    margin: 0 0 1rem;
    padding-right: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

.courses-modal__rules hr {
    margin: 1rem 0;
    border: none;
    border-top: 1px solid var(--border-subtle);
}

.courses-modal__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.courses-modal__summary strong {
    font-weight: 700;
}

.courses-modal__summary-price {
    color: var(--secondary-700);
}

.courses-modal__summary-penalty {
    color: var(--danger);
}

.courses-modal__accept {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.courses-modal__survey-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.courses-modal__survey-item + .courses-modal__survey-item {
    margin-top: 0.625rem;
}

.courses-modal__survey-label {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-heading);
}

.courses-modal__report-score {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-md);
    background: var(--primary-soft-bg);
    text-align: center;
}

.courses-modal__report-score strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.25rem;
    color: var(--primary-700);
}

.courses-modal__report-block {
    margin-bottom: 1rem;
}

.courses-modal__report-block h5 {
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-heading);
}

.courses-modal__data-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.courses-modal__data-table th,
.courses-modal__data-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.875rem;
    text-align: center;
    vertical-align: middle;
}

.courses-modal__data-table thead th {
    background: var(--surface-muted);
    color: var(--text-muted);
    font-weight: 600;
}

.courses-modal__data-table tbody tr:last-child td {
    border-bottom: none;
}

.courses-modal__data-table .row-success td {
    background: rgba(145, 190, 81, 0.08);
}

.courses-modal__data-table .row-danger td {
    background: rgba(239, 68, 68, 0.06);
}

.courses-modal__data-table .row-info td {
    background: rgba(59, 130, 246, 0.06);
}

.courses-modal .modal-backdrop.show {
    opacity: 0.45;
}

@media (max-width: 767px) {
    .courses-modal__body {
        padding: 0.875rem;
        max-height: 78vh;
    }

    .courses-modal__table-head {
        display: none;
    }

    .courses-modal__table-row {
        grid-template-columns: 1fr !important;
        gap: 0.375rem;
        text-align: right;
    }

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

    .courses-modal__survey-item {
        flex-direction: column;
        align-items: stretch;
    }

    .courses-modal__accept {
        flex-direction: column;
        align-items: stretch;
    }
}