/* Choir Termine — Frontend Styles */

.ct-wrap { max-width: 900px; margin: 0 auto; font-family: inherit; }

/* Header */
.ct-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ct-header h2 { margin: 0; }
.ct-welcome { margin: 0; color: #555; }
.ct-logout { margin-left: 12px; font-size: 13px; color: #c00; text-decoration: none; }
.ct-logout:hover { text-decoration: underline; }
.ct-back { font-size: 14px; color: #555; text-decoration: none; }
.ct-back:hover { color: #000; }

/* Event cards (list view) */
.ct-event-list { display: flex; flex-direction: column; gap: 16px; }

.ct-event-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .15s;
}
.ct-event-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.ct-event-card.ct-past { opacity: .6; }

.ct-event-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }

.ct-event-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 3px;
    background: #e0e0e0;
    color: #333;
}
.ct-type-probe    { background: #d1ecf1; color: #0c5460; }
.ct-type-auftritt { background: #d4edda; color: #155724; }
.ct-type-singmim  { background: #e8d5f5; color: #5b2c8d; }
.ct-type-sonstiges{ background: #fff3cd; color: #856404; }

.ct-event-date { font-size: 13px; color: #555; }

.ct-event-title { margin: 4px 0 6px; font-size: 18px; }
.ct-event-title a { text-decoration: none; color: inherit; }
.ct-event-title a:hover { color: #2271b1; }

.ct-event-location { margin: 4px 0; color: #666; font-size: 14px; }

.ct-event-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 13px;
}

.ct-my-response.ct-responded { color: #155724; }
.ct-my-response.ct-not-responded { color: #856404; }

.ct-deadline { color: #666; }
.ct-deadline.ct-deadline-passed { color: #c00; }

/* Buttons */
.ct-btn {
    display: inline-block;
    padding: 6px 16px;
    background: #2271b1;
    color: #fff !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
}
.ct-btn:hover { background: #135e96; }
.ct-btn-primary { padding: 8px 22px; font-size: 15px; margin-top: 12px; }

/* Detail view */
.ct-event-detail-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 24px;
}
.ct-event-data { margin: 16px 0 0; }
.ct-event-data dt { font-weight: 600; margin-top: 8px; }
.ct-event-data dd { margin: 2px 0 0 0; color: #444; }
.ct-deadline-passed { color: #c00 !important; }

/* Response form */
.ct-response-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.ct-response-section h3 { margin-top: 0; }

.ct-current-response { color: #155724; background: #d4edda; padding: 8px 12px; border-radius: 4px; margin-bottom: 16px; }
.ct-current-response small { color: #555; margin-left: 6px; }

.ct-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

.ct-option-label {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ct-option-label:hover { border-color: #2271b1; background: #f0f6fc; }
.ct-option-label.ct-option-selected,
.ct-option-label input:checked ~ .ct-option-title { font-weight: 700; }
.ct-option-label:has(input:checked) { border-color: #2271b1; background: #f0f6fc; }

.ct-option-label input[type="radio"] { display: none; }
.ct-option-title { font-size: 15px; font-weight: 600; }
.ct-option-desc  { font-size: 13px; color: #555; margin-top: 3px; }

/* Notices */
.ct-notice {
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}
.ct-notice-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ct-notice-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* Admin summary (inline on detail page) */
.ct-admin-summary {
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 16px 20px;
}
.ct-admin-summary h3 { margin-top: 0; font-size: 14px; color: #555; }

/* Empty state */
.ct-empty { color: #666; font-style: italic; }

/* Card header */
.ct-card-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }

/* Inline response options */
.ct-inline-form { margin-top: 12px; }
.ct-inline-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.ct-inline-option {
    display: grid;
    grid-template-columns: 160px 1fr 42px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ct-inline-option:hover { border-color: #2271b1; background: #f0f6fc; }
.ct-inline-option.ct-selected { border-color: #2271b1; background: #f0f6fc; }
.ct-inline-option input[type="radio"] { display: none; }

.ct-readonly .ct-inline-option { cursor: default; }
.ct-readonly .ct-inline-option:hover { border-color: #e0e0e0; background: transparent; }

.ct-opt-label { font-size: 14px; font-weight: 500; white-space: nowrap; }
.ct-opt-count { font-weight: 400; color: #666; margin-left: 3px; }
.ct-opt-pct   { font-size: 13px; color: #444; text-align: right; }

/* Progress bar */
.ct-progress-wrap {
    height: 10px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
}
.ct-progress-bar {
    display: block;
    height: 100%;
    background: #2271b1;
    border-radius: 5px;
    transition: width .3s ease;
}

.ct-inline-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.ct-participation { font-size: 12px; color: #666; }
.ct-btn-sm { padding: 4px 14px; font-size: 13px; }

/* Details section */
.ct-details-toggle { margin-top: 10px; }
.ct-toggle-btn {
    background: none;
    border: none;
    color: #2271b1;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
}
.ct-toggle-btn:hover { color: #135e96; }

.ct-details-section {
    margin-top: 10px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 13px;
}
/* Detail table */
.ct-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ct-detail-table th {
    background: #4a6fa5;
    color: #fff;
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
}
.ct-detail-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #e0e0e0;
    background: #dce3ef;
}
.ct-detail-table tr:nth-child(even) td { background: #c8d2e6; }
.ct-row-nbc td { background: #4a6fa5 !important; color: #fff; }
.ct-td-vp  { width: 90px; white-space: nowrap; }
.ct-td-name { min-width: 130px; }
.ct-td-mark { text-align: center; width: 60px; }
.ct-mark { color: #c0392b; font-size: 16px; font-weight: 700; }

@media (max-width: 600px) {
    .ct-inline-option { grid-template-columns: 130px 1fr 36px; }
    .ct-header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 600px) {
    .ct-header { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ct-event-footer { flex-direction: column; align-items: flex-start; }
}