/* Puantaj ızgarası — 31 sütun yan yana, sol sütun sabit.

   Kendi dosyasında, tables.css'in içinde değil: buradaki kurallar tek bir ekranın ızgarasına ait
   ve tables.css firma geneli tablo kuralları (nova-sayi, nova-islem) için. App.razor'dan
   bağlanıyor — wwwroot/app.css hiçbir yerden bağlanmadığı için oraya yazılan hiçbir şey
   çalışmıyor. */

.puantaj-kaydirma {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

table.puantaj {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.puantaj th,
table.puantaj td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0;
}

/* Ad sütunu kaydırmada yerinde kalıyor: 31 sütun sağa kaydırıldığında satırın kime ait olduğu
   görünmezse ızgara okunamaz hâle gelir. */
table.puantaj .ad {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    padding: 0.25rem 0.75rem;
    text-align: left;
    min-width: 12rem;
    max-width: 16rem;
    white-space: normal;
}

table.puantaj thead .ad {
    z-index: 3;
}

table.puantaj thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.3rem 0;
    min-width: 2.1rem;
    color: var(--mud-palette-text-secondary);
}

table.puantaj thead th .gun-no {
    display: block;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

/* Tatil sütunu: tam gün dolu, arefe yarı yoğunlukta. Renk tek başına taşımıyor — başlıkta
   title ile tatilin adı da var. */
table.puantaj thead th.tatil {
    background: rgba(190, 40, 90, 0.14);
    color: var(--mud-palette-text-primary);
}

table.puantaj thead th.tatil-yarim {
    background: rgba(190, 40, 90, 0.07);
}

table.puantaj tbody tr:hover .hucre:not(:disabled) {
    outline: 1px solid var(--mud-palette-lines-default);
    outline-offset: -1px;
}

.hucre {
    display: block;
    width: 100%;
    min-width: 2.1rem;
    height: 2rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    line-height: 2rem;
    text-align: center;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.hucre:disabled {
    cursor: default;
}

.hucre:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Vardiya renkleri. Gece ile gündüz birbirinden açıkça ayrılmalı: ızgaranın en çok sorulan
   sorusu "bu adam kaç gece tuttu".

   Her kural hem hücreye hem de açıklama satırındaki örnek kutuya uygulanıyor. Yalnızca .hucre'ye
   yazılsaydı açıklama satırı boş çerçevelerden oluşur ve hiçbir şey anlatmazdı — rengi tarif eden
   satırın kendisi renksiz kalırdı. */
.hucre.v1, .kutu.v1 { background: rgba(245, 190, 60, 0.30); }   /* Gündüz */
.hucre.v2, .kutu.v2 { background: rgba(70, 90, 170, 0.30); }    /* Gece   */
.hucre.v3, .kutu.v3 { background: rgba(80, 160, 120, 0.25); }   /* Tam gün */
.hucre.v4, .kutu.v4 { color: var(--mud-palette-text-disabled); } /* Çalışmadı */
.hucre.v5, .kutu.v5 { background: rgba(200, 60, 60, 0.28); font-weight: 700; } /* Devamsız */

/* İzinli gün: hücre yazılabilir kalıyor (izinliyken işe gelen kapıcı gerçek bir durum), ama
   çizgili zemin "bu gün izinli" diyor. */
.hucre.izinli, .kutu.izinli {
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0 4px,
        rgba(120, 120, 120, 0.28) 4px 8px);
}

/* Açıklama satırındaki tatil örneği — başlık hücresiyle aynı ton. */
.kutu.tatil-ornek {
    background: rgba(190, 40, 90, 0.14);
}

/* Kaydedilmemiş değişiklik. Kaydet düğmesindeki sayı ile aynı şeyi söylüyor, ama hücre
   bazında — operatör neyi değiştirdiğini kaydetmeden önce görebilmeli. */
.hucre.degisti, .kutu.degisti {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
    font-weight: 700;
}

.puantaj-aciklama {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
}

.puantaj-aciklama .oge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.puantaj-aciklama .kutu {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    font-size: 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

@media (max-width: 600px) {
    table.puantaj .ad {
        min-width: 8rem;
        font-size: 0.8rem;
    }
}