/*
ReadHaven Panel tasarim sistemi token'lari.

Kaynak dokuman: docs/ReadHavenPanel/03-ui-design-system.md
ReadHavenPanelTheme.cs bu degerleri MudBlazor temasina aynalar; iki taraf
birbirinden ayrisirsa once bu dosya ve dokuman guncellenir.

Sayfalara sabit hex renk veya sabit px bosluk yazilmaz; her sey buradaki
token'lar uzerinden kullanilir.
*/

:root {
    /* Marka */
    --rh-primary: #2C5FA0;
    --rh-primary-strong: #204B80;
    --rh-primary-soft: #EAF1FA;
    --rh-accent: #E5622E;
    --rh-teal: #1FA9B4;

    /* Durum */
    --rh-success: #3F9B4F;
    --rh-success-soft: #E8F4EA;
    --rh-warning: #C9821A;
    --rh-warning-soft: #FBF1E0;
    --rh-danger: #C0392B;
    --rh-danger-soft: #FAEAE8;
    --rh-info: #2C5FA0;
    --rh-info-soft: #EAF1FA;

    /* Yuzey */
    --rh-surface-page: #F5F7FA;
    --rh-surface-card: #FFFFFF;
    --rh-surface-sunken: #EEF1F6;

    /* Cizgi */
    --rh-border: #E3E8EF;
    --rh-border-strong: #CBD4E1;

    /* Metin */
    --rh-text: #1B2537;
    --rh-text-secondary: #5A6779;
    --rh-text-muted: #8A94A6;
    --rh-text-on-primary: #FFFFFF;

    /* Bosluk skalasi: ara deger uretilmez */
    --rh-space-1: 4px;
    --rh-space-2: 8px;
    --rh-space-3: 12px;
    --rh-space-4: 16px;
    --rh-space-5: 24px;
    --rh-space-6: 32px;
    --rh-space-7: 48px;

    /* Kose yaricapi */
    --rh-radius-card: 12px;
    --rh-radius-control: 8px;
    --rh-radius-pill: 999px;

    /* Golge: yalnizca iki seviye */
    --rh-shadow-raised: 0 1px 2px rgba(27, 37, 55, 0.04), 0 1px 3px rgba(27, 37, 55, 0.06);
    --rh-shadow-overlay: 0 8px 24px rgba(27, 37, 55, 0.12), 0 2px 6px rgba(27, 37, 55, 0.08);

    /* Kabuk olculeri */
    --rh-appbar-height: 56px;
    --rh-drawer-width: 240px;
    --rh-form-max-width: 880px;

    /* Tipografi */
    --rh-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html, body {
    font-family: var(--rh-font);
    color: var(--rh-text);
    background-color: var(--rh-surface-page);
    -webkit-font-smoothing: antialiased;
}

/* Sayfa govdesi hicbir zaman yatay kaymaz; genis icerik kendi icinde kayar. */
body {
    overflow-x: hidden;
}

h1:focus {
    outline: none;
}

/*
Sayisal hizalama. Tablo sayilari, KPI degerleri ve yuzdeler bu sinifi kullanir;
rakamlar sabit genislikte olur ve kolon halinde duzgun hizalanir.
*/
.rh-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Tipografi olcegi */
.rh-display {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

.rh-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.rh-subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.rh-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.rh-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--rh-text-secondary);
}

.rh-metric {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/*
Genis icerik sarmalayicisi. Tablo, grafik ve kod bloklari bunun icine konur;
kucuk ekranda kendi icinde yatay kayar.
*/
.rh-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Form sayfalari icin genislik siniri */
.rh-form-width {
    max-width: var(--rh-form-max-width);
}

/*
Yerlesim yardimcilari. Sayfalar bosluk vermek icin kendi CSS'ini yazmaz;
bu uc siniftan birini kullanir.
*/
.rh-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-5);
}

.rh-stack--tight {
    gap: var(--rh-space-3);
}

/* Esit genislikte kart izgarasi; dar ekranda kendiliginden tek kolona duser. */
.rh-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rh-space-4);
}

.rh-tile-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.rh-row-wrap {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    flex-wrap: wrap;
}

/*
Teknik kod alanlari (alt kurum kodu, sinif kodu). Monospace degil ama
harf araligi acik: kullanici kodu karakter karakter okuyabilsin.
*/
.rh-code {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--rh-text-secondary);
}

/*
Aktif/pasif durumu. Renk tek basina bilgi tasimaz; metin her zaman yazilir.
*/
.rh-status {
    display: inline-flex;
    align-items: center;
    gap: var(--rh-space-1);
    padding: 2px var(--rh-space-2);
    border-radius: var(--rh-radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.rh-status--active {
    background-color: var(--rh-success-soft);
    color: var(--rh-success);
}

.rh-status--passive {
    background-color: var(--rh-surface-sunken);
    color: var(--rh-text-secondary);
}

/* Dikkat cekmesi gereken ama hata olmayan durum (or. sifresi belirlenmemis hesap). */
.rh-status--warning {
    background-color: var(--rh-warning-soft);
    color: var(--rh-warning);
}

.rh-status--danger {
    background-color: var(--rh-danger-soft);
    color: var(--rh-danger);
}

/* Bas harf rozeti. Hem ust bardaki kullanici menusunde hem tablo hucrelerinde. */
.rh-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--rh-radius-pill);
    background-color: var(--rh-primary-soft);
    color: var(--rh-primary-strong);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Tablo hucresinde kisi: bas harf rozeti + ad. */
.rh-person {
    display: inline-flex;
    align-items: center;
    gap: var(--rh-space-2);
    min-width: 0;
}

.rh-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

/* Tablo icinde detaya goturen baglanti. Alti yalnizca uzerine gelince cizilir;
   liste yogunken surekli altcizgi gorsel gurultu yapiyor. */
.rh-link {
    color: var(--rh-primary);
    text-decoration: none;
    font-weight: 500;
}

.rh-link:hover,
.rh-link:focus-visible {
    text-decoration: underline;
}

.rh-muted {
    color: var(--rh-text-muted);
}

/* ===================================================================
   Birden fazla sayfada kullanilan icerik parcalari

   Bunlar once ilgili sayfanin .razor.css dosyasindaydi. Ikinci, ucuncu sayfa
   ayni gorunumu isteyince kural kopyalandi ve dort dosyada ayni tanim olustu.
   Ortak olan burada tek yerde durur; sayfaya OZGU olanlar (or. .rh-room)
   kendi scoped dosyasinda kalir.
   =================================================================== */

/* Kart govdesi Padded="false" iken ic bosluk gereken tekil bloklar. */
.rh-card-pad {
    padding: var(--rh-space-5);
}

/* Tablonun altindaki aciklama satiri: kolonun ne anlama geldigini yazar. */
.rh-table-note {
    margin: 0;
    padding: var(--rh-space-3) var(--rh-space-5);
    border-top: 1px solid var(--rh-border);
}

/* Tablo hucresinde ogrenci: ad ustte, kullanici adi altta. */
.rh-student {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Serit ve ozet alt alta; hucre dar kalsin. */
.rh-activity {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-1);
    min-width: 0;
}

/* Odevdeki paragraf sirasi. Sira ogrencinin okuma sirasidir. */
.rh-order {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rh-primary-soft);
    color: var(--rh-primary-strong);
    font-size: 12px;
    font-weight: 600;
}

/* Ilerleme cubugu + sayac ayni hucrede. */
.rh-para-progress {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    min-width: 140px;
}

.rh-para-progress__bar {
    flex: 1;
    min-width: 60px;
}

/* Odev satiri duran ama hesabi pasiflesmis ogrenci. */
.rh-inactive {
    margin-left: var(--rh-space-2);
    color: var(--rh-text-muted);
}

/*
Panodaki kisa listeler. Tablo degil liste: pano ozet verir, uzerinde
calisilmaz; tablo basliklari burada gurultu olurdu.
*/
.rh-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rh-panel-list__item {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    padding: var(--rh-space-3) var(--rh-space-5);
    border-bottom: 1px solid var(--rh-border);
}

.rh-panel-list__item:last-child {
    border-bottom: none;
}

.rh-panel-list__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

/* Odev hucresi: baslik ustte, ozet altta. */
.rh-assignment {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Gelisim alani adi: satirin cipasi, bu yuzden diger hucrelerden bir tik agir. */
.rh-area {
    font-weight: 500;
}

/* Rapor bolumlerindeki sayi izgarasi. */
.rh-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--rh-space-4);
}

.rh-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rh-fact__value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rh-text);
    font-variant-numeric: tabular-nums;
}

/* Kapsam gerekcesi listesi: neden veri yetersiz sayildi. */
.rh-reasons {
    margin: var(--rh-space-4) 0 0 0;
    padding-left: var(--rh-space-5);
    font-size: 0.8125rem;
    color: var(--rh-text-secondary);
}

.rh-reasons li {
    margin-bottom: 2px;
}

/* Rapor sonrasi sinif degisimi notu. Uyari degil, bilgi. */
.rh-moved {
    color: var(--rh-text-muted);
    font-style: italic;
}

/* Gelisim alani ikonu. Tanimaya yardim eder; renk tasimaz. */
.rh-area__icon {
    color: var(--rh-text-muted);
    flex: 0 0 auto;
}

/* Ogrencinin en zayif alani: alan adi ustte, kazanim altta. */
.rh-weak {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/*
Odak kartlari: sinifin en zayif ve en guclu alani. Tablonun ustunde durur
cunku ogretmenin ilk sorusu "nereye bakayim"dir; sekiz satiri okuyup en
dusugunu bulmasini beklemek yerine dogrudan yazilir.
*/
.rh-focus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--rh-space-4);
}

.rh-focus__item {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-1);
    padding: var(--rh-space-4);
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-card);
    background: var(--rh-surface-card);
    box-shadow: var(--rh-shadow-raised);
    /* Renk yalnizca sol seritte; metin her zaman hangi kart oldugunu yazar. */
    border-left-width: 3px;
}

.rh-focus__item--weak {
    border-left-color: var(--rh-danger);
}

.rh-focus__item--strong {
    border-left-color: var(--rh-success);
}

.rh-focus__area {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--rh-text);
}

.rh-focus__detail {
    font-size: 0.8125rem;
    color: var(--rh-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Kiyas tablosundaki fark kolonu. */
.rh-diff {
    font-weight: 600;
    color: var(--rh-text-secondary);
}

.rh-diff--positive {
    color: var(--rh-success);
}

.rh-diff--negative {
    color: var(--rh-danger);
}

/* ===================================================================
   Uygulama kabugu

   Bu kurallar MudBlazor'in render ettigi ogeleri (MudAppBar, MudDrawer,
   MudMainContent, MudNavMenu) hedefler. Bileşen-scoped CSS bunlara ULASAMAZ:
   scope niteligi yalnizca .razor dosyasindaki HTML ogelerine eklenir, bileşen
   etiketlerine eklenmez; "::deep" ise ATA ogede nitelik arar. Bu yuzden kabuk
   stilleri burada, global olarak durur.
   =================================================================== */

/* Ust bar: acik yuzeyli ve ince; marka rengiyle boyanmis kalin bir Material
   appbar kullanilmaz. */
.rh-appbar {
    background-color: var(--rh-surface-card);
    color: var(--rh-text);
    border-bottom: 1px solid var(--rh-border);
}

.rh-appbar__brand {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--rh-primary-strong);
    margin-left: var(--rh-space-2);
    white-space: nowrap;
}

/* Kapsam etiketi: kullanici hangi kurum/alt kurum icinde calistigini gorur. */
.rh-appbar__scope {
    margin-left: var(--rh-space-4);
    padding: 2px var(--rh-space-3);
    border-radius: var(--rh-radius-pill);
    background-color: var(--rh-surface-sunken);
    color: var(--rh-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.rh-appbar__user {
    text-transform: none;
    gap: var(--rh-space-2);
}

.rh-appbar__username {
    font-size: 14px;
    font-weight: 500;
}

.rh-usermenu__head {
    padding: var(--rh-space-3) var(--rh-space-4);
    min-width: 200px;
}

.rh-usermenu__head p {
    margin: 0;
}

/* Cikis gercek bir POST oldugu icin buton; menu ogesi gibi gorunur. */
.rh-usermenu__logout {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    width: 100%;
    padding: var(--rh-space-3) var(--rh-space-4);
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--rh-text);
    cursor: pointer;
    text-align: left;
}

.rh-usermenu__logout:hover {
    background-color: var(--rh-surface-sunken);
}

.rh-drawer {
    background-color: var(--rh-surface-card);
    border-right: 1px solid var(--rh-border);
}

.rh-main {
    background-color: var(--rh-surface-page);
    min-height: 100vh;
}

/* Icerik sarmalayicisi. Liste ve rapor sayfalari tam genislik kullanir; form
   sayfalari kendi icinde .rh-form-width ile daralir. */
.rh-content {
    padding: var(--rh-space-6);
    padding-bottom: var(--rh-space-7);
    max-width: 1600px;
}

/* Sol menu. Aktif oge marka rengiyle isaretlenir; pasif ogeler ikincil metin
   renginde kalir. Menu kromu sessiz, icerik one cikar. */
.rh-nav {
    padding-top: var(--rh-space-3);
}

.rh-nav .mud-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--rh-text-secondary);
    border-radius: var(--rh-radius-control);
    margin: 2px var(--rh-space-2);
    padding-top: 10px;
    padding-bottom: 10px;
}

.rh-nav .mud-nav-link:hover {
    background-color: var(--rh-surface-sunken);
    color: var(--rh-text);
}

.rh-nav .mud-nav-link.active {
    background-color: var(--rh-primary-soft);
    color: var(--rh-primary-strong);
    font-weight: 600;
}

.rh-nav .mud-nav-link.active .mud-icon-root {
    color: var(--rh-primary);
}

@media (max-width: 960px) {
    .rh-content {
        padding: var(--rh-space-4);
        padding-bottom: var(--rh-space-6);
    }
}

@media (max-width: 600px) {
    .rh-appbar__scope,
    .rh-appbar__username {
        display: none;
    }
}

/* Diyalog govdesi. Uyari/hata seridi MudAlert uzerinde durdugu icin bu
   kurallar da global olmak zorunda (bkz. yukaridaki kabuk notu). */
.rh-dialog__error {
    margin-bottom: var(--rh-space-4);
}

.rh-dialog__warning {
    margin-top: var(--rh-space-4);
}

.rh-dialog__form {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-4);
    min-width: 400px;
}

@media (max-width: 600px) {
    .rh-dialog__form {
        min-width: 0;
    }
}

/*
Öğrenci eklendikten sonra bir kez gösterilen giriş bilgileri.
*/
.rh-credentials {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-4);
    min-width: 400px;
}

.rh-credentials__note {
    margin: 0;
    color: var(--rh-text-secondary);
}

.rh-credential {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-1);
}

.rh-credential__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--rh-text-secondary);
}

.rh-credential__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rh-space-2);
    padding: var(--rh-space-2) var(--rh-space-2) var(--rh-space-2) var(--rh-space-3);
    background: var(--rh-surface-sunken);
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
}

.rh-credential__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    color: var(--rh-text);
    /* Uzun kullanici adlari kutuyu tasirmasin; deger secilebilir kalmali. */
    overflow-wrap: anywhere;
    user-select: all;
}

@media (max-width: 600px) {
    .rh-credentials {
        min-width: 0;
    }
}

/*
Paragraf detayı: metin, kelime kartları, sorular ve şıklar.
*/
.rh-para-intro {
    margin: 0 0 var(--rh-space-4);
    font-size: 15px;
    font-style: italic;
    color: var(--rh-text-secondary);
}

.rh-para-text {
    /* Okuma metni: satır uzunluğu sınırlı, satır aralığı geniş. Öğretmen
       burada veri taramıyor, öğrencinin okuduğunu okuyor. */
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.75;
    color: var(--rh-text);
}

.rh-para-text p {
    margin: 0 0 var(--rh-space-4);
}

.rh-para-text p:last-child {
    margin-bottom: 0;
}

.rh-vocab {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--rh-space-3);
}

.rh-vocab__item {
    padding: var(--rh-space-3);
    background: var(--rh-surface-sunken);
    border-radius: var(--rh-radius-control);
}

.rh-vocab__head {
    display: flex;
    align-items: center;
    gap: var(--rh-space-2);
}

.rh-vocab__word {
    font-weight: 600;
    color: var(--rh-text);
}

.rh-vocab__meaning {
    margin: var(--rh-space-1) 0 0;
    font-size: 13px;
    color: var(--rh-text-secondary);
}

.rh-vocab__example {
    margin: var(--rh-space-2) 0 0;
    font-size: 13px;
    font-style: italic;
    color: var(--rh-text-muted);
}

.rh-questions {
    display: flex;
    flex-direction: column;
}

.rh-question {
    padding: var(--rh-space-4);
    border-top: 1px solid var(--rh-border);
}

.rh-question:first-child {
    border-top: none;
}

.rh-question__head {
    display: flex;
    align-items: flex-start;
    gap: var(--rh-space-3);
}

.rh-question__number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
    border-radius: var(--rh-radius-pill);
    font-size: 13px;
    font-weight: 600;
}

.rh-question__title {
    flex: 1 1 auto;
    min-width: 0;
}

.rh-question__text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--rh-text);
}

.rh-question__score {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--rh-text-secondary);
}

.rh-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--rh-space-2);
    margin: var(--rh-space-3) 0 0 38px;
    padding: var(--rh-space-2) var(--rh-space-3);
    background: var(--rh-warning-soft);
    border-radius: var(--rh-radius-control);
    font-size: 13px;
    color: var(--rh-text-secondary);
}

.rh-options {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-2);
    margin: var(--rh-space-3) 0 0 38px;
}

.rh-option {
    display: flex;
    align-items: flex-start;
    gap: var(--rh-space-2);
    padding: var(--rh-space-3);
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-control);
}

/* Doğru şık yalnızca kenar ve ikonla ayrılır. Yanlış şıkları kırmızıya
   boyamak, orada toplanan öğrencileri "hata yığını" gibi gösterirdi. */
.rh-option--correct {
    border-color: var(--rh-success);
    background: var(--rh-success-soft);
}

.rh-option__mark {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--rh-text-muted);
}

.rh-option--correct .rh-option__mark {
    color: var(--rh-success);
}

.rh-option__body {
    flex: 1 1 auto;
    min-width: 0;
}

.rh-option__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rh-space-3);
}

.rh-option__text {
    font-size: 14px;
    color: var(--rh-text);
}

.rh-option__count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--rh-text-muted);
}

.rh-option__explanation {
    margin: var(--rh-space-1) 0 0;
    font-size: 13px;
    color: var(--rh-text-secondary);
}

.rh-option__students {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rh-space-1);
    margin-top: var(--rh-space-2);
}

.rh-student-chip {
    padding: 2px var(--rh-space-2);
    background: var(--rh-surface-card);
    border: 1px solid var(--rh-border-strong);
    border-radius: var(--rh-radius-pill);
    font-size: 12px;
    color: var(--rh-text-secondary);
    text-decoration: none;
}

.rh-student-chip:hover {
    border-color: var(--rh-primary);
    color: var(--rh-primary);
}

.rh-student-chip--correct {
    border-color: var(--rh-success);
    color: var(--rh-success);
}

@media (max-width: 600px) {
    .rh-hint,
    .rh-options {
        margin-left: 0;
    }
}

/*
Öğrenci cevap dökümü: tablo satırı açıldığında görünen soru-cevap listesi.
*/
.rh-answersheet__cell {
    padding: 0;
    background: var(--rh-surface-sunken);
}

.rh-answersheet {
    display: flex;
    flex-direction: column;
    gap: var(--rh-space-3);
    padding: var(--rh-space-4);
}

.rh-answersheet__row {
    display: flex;
    align-items: flex-start;
    gap: var(--rh-space-3);
}

.rh-answersheet__number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--rh-surface-card);
    border: 1px solid var(--rh-border-strong);
    border-radius: var(--rh-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--rh-text-secondary);
}

.rh-answersheet__body {
    min-width: 0;
}

.rh-answersheet__question {
    margin: 0;
    font-size: 13px;
    color: var(--rh-text-secondary);
}

.rh-answersheet__answer {
    display: flex;
    align-items: flex-start;
    gap: var(--rh-space-1);
    margin: var(--rh-space-1) 0 0;
    font-size: 14px;
}

.rh-answersheet__answer--correct {
    color: var(--rh-success);
}

/* Yanlis cevap burada kirmizidir: sik listesinin aksine burada bakilan sey
   TEK bir ogrencinin performansidir, sinifin dagilimi degil. */
.rh-answersheet__answer--wrong {
    color: var(--rh-danger);
}

.rh-answersheet__answer--none {
    color: var(--rh-text-muted);
    font-style: italic;
}

.rh-answersheet__expected {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--rh-text-secondary);
}

/*
Ödev dağıtım bilgi şeridi. Uyarı değil bilgi olduğu için primary-soft zemin
kullanır; sarı/kırmızı bir şerit, olağan çalışan bir düzeni sorun gibi gösterir.
*/
.rh-schedule-notice {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    flex-wrap: wrap;
    padding: var(--rh-space-3) var(--rh-space-4);
    margin-bottom: var(--rh-space-4);
    background: var(--rh-primary-soft);
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius-card);
}

.rh-schedule-notice__icon {
    color: var(--rh-primary);
    flex-shrink: 0;
}

.rh-schedule-notice__text {
    /* Sayaci saga itmek icin; dar ekranda alta sarar. */
    flex: 1 1 260px;
    min-width: 0;
}

.rh-schedule-notice__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rh-text);
}

.rh-schedule-notice__detail {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--rh-text-secondary);
}

.rh-schedule-countdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: var(--rh-space-4);
    border-left: 1px solid var(--rh-border-strong);
}

.rh-schedule-countdown__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rh-text-muted);
}

.rh-schedule-countdown__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--rh-primary);
    white-space: nowrap;
}

.rh-schedule-countdown__when {
    font-size: 12px;
    color: var(--rh-text-secondary);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .rh-schedule-countdown {
        align-items: flex-start;
        padding-left: 0;
        border-left: none;
    }
}

/*
Sekmeler. MudTabs kendi ogelerini render ettigi icin bu kurallar global
olmak zorunda (bkz. yukaridaki kabuk notu).
*/
.rh-tabs .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--rh-border);
}

.rh-tabs .mud-tab {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    min-height: 44px;
}

/* Sekme govdesi kendi kartini tasir; MudBlazor'in ic boslugu cift cerceve yapar. */
.rh-tabs .mud-tabs-panels {
    padding-top: var(--rh-space-5);
}

/* MudBlazor uzerinde token'lara hizalama */
.mud-table-container {
    overflow-x: auto;
}

#blazor-error-ui {
    color-scheme: light only;
    background: var(--rh-warning-soft);
    border-top: 1px solid var(--rh-warning);
    bottom: 0;
    box-shadow: var(--rh-shadow-overlay);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--rh-space-3) var(--rh-space-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 14px;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: var(--rh-space-3);
        top: var(--rh-space-2);
    }