/* ==========================================================================
   Katılım sonuç grafikleri
   Panel ve web sitesinde aynı dosya kullanılır; renkler sunucudan gelir.
   ========================================================================== */
.chart-card {
    --chart-track: #eef1f5;
    --chart-brand: #123265;
}

.chart { display: block; width: 100%; height: auto; }

/* ---------- Halka ---------- */
.chart-donut {
    position: relative;
    width: 180px;
    max-width: 100%;
    margin: 0 auto;
    flex-shrink: 0;
}

.chart--donut { overflow: visible; }

.chart-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 0 34px;
}

.chart-center strong {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--chart-brand);
}

.chart-center span {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.25;
    color: #7c8698;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Yatay çubuk ---------- */
.chart-bars { display: flex; flex-direction: column; gap: 9px; width: 100%; }

.chart-bar {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr minmax(74px, auto);
    align-items: center;
    gap: 12px;
}

.chart-bar__label {
    font-size: 13px;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chart-bar__track {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: var(--chart-track);
    overflow: hidden;
}

.chart-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

.chart-bar__value {
    font-size: 12px;
    color: #7c8698;
    text-align: right;
    white-space: nowrap;
}

.chart-bar__value strong { color: #1f2933; font-size: 13px; }

/* ---------- Dikey çubuk ---------- */
.chart-columns {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    width: 100%;
}

.chart-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.chart-column__count { font-size: 11px; color: #7c8698; margin-bottom: 3px; min-height: 14px; }

.chart-column__bar {
    display: block;
    width: 100%;
    max-width: 34px;
    height: 0;
    border-radius: 4px 4px 0 0;
    transition: height .6s cubic-bezier(.22, .61, .36, 1);
}

.chart-column__label { font-size: 11px; color: #7c8698; margin-top: 6px; }

/* ---------- Zaman çizgisi ---------- */
.chart--spark { height: 120px; }

/* ---------- Boş durum ---------- */
.chart-empty {
    padding: 26px 14px;
    text-align: center;
    font-size: 13px;
    color: #98a2b3;
    background: var(--chart-track);
    border-radius: 8px;
}

/* Koyu temada izler açılır */
[data-bs-theme="dark"] .chart-card { --chart-track: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .chart-bar__value strong { color: #e9ecef; }

@media (max-width: 575.98px) {
    .chart-bar { grid-template-columns: 1fr; gap: 4px; }
    .chart-bar__value { text-align: left; }
}

/* ==========================================================================
   Katılım formu girdileri
   Panel ve web sitesinde ortak; bu dosya iki yerde de yükleniyor.
   ========================================================================== */

/* ---------- Seçenek listesi ---------- */
.choice-list { display: flex; flex-direction: column; gap: 6px; }

.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid #dde3ea;
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color .15s ease, background-color .15s ease;
}

.choice:hover { border-color: #123265; }
.choice:has(input:checked) { border-color: #123265; background: rgba(18, 50, 101, .05); }
.choice input { flex-shrink: 0; margin: 0; }
.choice input:disabled { opacity: .6; }

/* ---------- Yıldız puanı ----------
   Yıldızlar HTML'de 5→1 sırasıyla basılır; böylece ~ seçicisi ile
   seçilenin solundaki (yani DOM'da sonrasındaki) yıldızlar da dolar. */
.rate-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    font-size: 30px;
    line-height: 1;
}

.rate-stars input { position: absolute; opacity: 0; width: 0; height: 0; }

.rate-stars label {
    color: #d8dee6;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.rate-stars label:hover,
.rate-stars label:hover ~ label,
.rate-stars input:checked ~ label { color: #e8a93c; }

.rate-stars label:hover { transform: scale(1.12); }
.rate-stars input:focus-visible + label { outline: 2px solid #123265; outline-offset: 3px; border-radius: 4px; }

/* ---------- Puan ölçeği ---------- */
.rate-scale { display: flex; gap: 5px; flex-wrap: wrap; }

.rate-scale input { position: absolute; opacity: 0; width: 0; height: 0; }

.rate-scale label {
    flex: 1 1 0;
    min-width: 38px;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    background: #f2f5f8;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.rate-scale label:hover { border-color: #123265; color: #123265; }
.rate-scale input:checked + label { background: #123265; color: #fff; }
.rate-scale input:focus-visible + label { outline: 2px solid #123265; outline-offset: 2px; }

.rate-scale__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11.5px;
    color: #94a3b8;
}

/* Koyu tema */
[data-bs-theme="dark"] .choice { border-color: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .choice:has(input:checked) { background: rgba(255, 255, 255, .06); }
[data-bs-theme="dark"] .rate-scale label { background: rgba(255, 255, 255, .07); color: #adb5bd; }
[data-bs-theme="dark"] .rate-stars label { color: rgba(255, 255, 255, .18); }

@media (max-width: 575.98px) {
    .rate-scale label { min-width: 30px; padding: 8px 0; font-size: 13px; }
    .rate-stars { font-size: 26px; }
}

/* ==========================================================================
   Katılımcıya gösterilen sonuç özeti (panel + web ortak)
   ========================================================================== */
.pr-block__head { margin-bottom: 18px; }
.pr-block__head h4 { margin: 0 0 3px; font-size: 19px; line-height: 1.3; }
.pr-block__head span { font-size: 13px; color: #7c8698; }

.pr-verdict {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    border-left: 4px solid #94a3b8;
    background: #f4f6f9;
}

.pr-verdict strong { font-size: 18px; line-height: 1.25; }
.pr-verdict span { font-size: 12.5px; color: #7c8698; }

.pr-verdict--accepted { border-left-color: #2a7f7a; background: rgba(42, 127, 122, .07); }
.pr-verdict--rejected { border-left-color: #d1495b; background: rgba(209, 73, 91, .07); }
.pr-verdict--tied { border-left-color: #e8a93c; background: rgba(232, 169, 60, .09); }

.pr-question { padding-top: 20px; margin-top: 20px; border-top: 1px solid #e8ecf1; }
.pr-question:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.pr-question h5 { margin: 0 0 2px; font-size: 15px; line-height: 1.4; }
.pr-question__meta { display: block; margin-bottom: 12px; font-size: 12.5px; color: #7c8698; }

.pr-donut-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.pr-legend { flex: 1 1 220px; min-width: 0; }

.pr-legend__row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    font-size: 13px;
}

.pr-legend__label { min-width: 0; overflow-wrap: anywhere; }
.pr-legend__value { margin-left: auto; color: #7c8698; white-space: nowrap; font-size: 12.5px; }

[data-bs-theme="dark"] .pr-verdict { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .pr-question { border-top-color: rgba(255, 255, 255, .09); }

/* ==========================================================================
   Sıralama ve matris soruları (panel + web ortak)
   ========================================================================== */

/* ---------- Sıralama ---------- */
.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    counter-reset: rank;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 9px;
    cursor: grab;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.rank-item:hover { border-color: #123265; }
.rank-item.is-dragging { opacity: .45; cursor: grabbing; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }

.rank-item__no {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #123265;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

.rank-item__grip { flex-shrink: 0; color: #b6bfca; font-size: 15px; }
.rank-item__label { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.rank-item__moves { flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; }

.rank-move {
    width: 24px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dde3ea;
    border-radius: 4px;
    background: #f6f8fa;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.rank-move:hover:not(:disabled) { border-color: #123265; color: #123265; }
.rank-move:disabled { opacity: .3; cursor: default; }

/* ---------- Matris ---------- */
.matrix-wrap { overflow-x: auto; }

.matrix {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.matrix th,
.matrix td { padding: 10px 8px; text-align: center; }

.matrix thead th {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.35;
    border-bottom: 1px solid #dde3ea;
}

.matrix tbody th {
    text-align: left;
    font-weight: 500;
    width: 40%;
    min-width: 150px;
    overflow-wrap: anywhere;
}

.matrix tbody tr + tr th,
.matrix tbody tr + tr td { border-top: 1px solid #eef1f5; }

.matrix tbody tr:hover { background: #f7f9fb; }

.matrix__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px 0;
    margin: 0;
    cursor: pointer;
}

.matrix__cell input { width: 18px; height: 18px; margin: 0; cursor: pointer; }

/* Sonuç görünümündeki matris ısı tablosu */
.matrix--result td { position: relative; }

.matrix__bar {
    display: block;
    padding: 5px 4px;
    border-radius: 5px;
    font-size: 12.5px;
    color: #1f2933;
}

.matrix__bar strong { font-weight: 600; }
.matrix__bar span { display: block; font-size: 11px; color: #7c8698; }

[data-bs-theme="dark"] .rank-item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
[data-bs-theme="dark"] .rank-move { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #adb5bd; }
[data-bs-theme="dark"] .matrix thead th { border-bottom-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .matrix tbody tr + tr th,
[data-bs-theme="dark"] .matrix tbody tr + tr td { border-top-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .matrix tbody tr:hover { background: rgba(255, 255, 255, .04); }
[data-bs-theme="dark"] .matrix__bar { color: #e9ecef; }

@media (max-width: 575.98px) {
    .rank-item { padding: 9px 11px; gap: 9px; }
    .rank-item__label { font-size: 13px; }
}

.matrix__bar.is-dense { color: #fff; }
.matrix__bar.is-dense span { color: rgba(255, 255, 255, .75); }