/* ============================================================
   Personel Çizelge — WPF sürümünün (MainWindow.xaml) birebir
   web karşılığı. Renkler/ölçüler doğrudan XAML'den alındı,
   bkz. _web_surum/06_WPF_OZELLIK_ENVANTERI.md
   ============================================================ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: #FAFAFA;
    color: #212121;
    font-size: 12px;
    overflow: hidden;
}

/* ── Yükleniyor ─────────────────────────────────────────── */
.yukleniyor { padding: 2rem; color: #757575; }

/* ============================================================
   ÜST MARKA ŞERİDİ  (WPF: TitleBar, 44px)
   ============================================================ */

.ust-serit {
    height: 44px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #0D1B2A 0%, #1B2A3B 40%, #162032 100%);
    color: white;
    padding: 0 12px;
    flex: none;
}

.marka { display: flex; align-items: center; margin-right: 16px; }

.marka-ikon {
    width: 28px; height: 28px; border-radius: 6px; margin-right: 10px;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: bold; color: white;
}

.marka-ad { font-size: 12px; font-weight: bold; line-height: 14px; }
.marka-alt { font-size: 9px; color: #546E7A; }
.marka-alt b { color: #4FC3F7; font-weight: 600; }

.mod-ayirici { width: 1px; height: 24px; background: #37474F; margin-right: 12px; flex: none; }

/* ── Üst şerit butonları (AYARLAR + sık kullanılanlar) ── */
.ust-buton {
    height: 30px; padding: 0 12px; border: none; border-radius: 5px;
    font-size: 11px; font-weight: bold; cursor: pointer; white-space: nowrap;
    background: #37474F; color: white;
    display: inline-flex; align-items: center; gap: 5px;
}
.ust-buton:hover { filter: brightness(1.15); }
.ust-buton.sade { background: transparent; color: #90A4AE; }
.ust-buton.sade:hover { background: #37474F; color: white; }
.ust-buton input[type=file] { display: none; }

/* AYARLAR diğer butonlarla aynı akışta — .sik-kullanilan'ın gap'i geçerli */
.ayarlar-sarmal { position: relative; }
.ayarlar-buton { background: #455A64; }
.ayarlar-buton.aktif { background: #1565C0; }

/* AYARLAR açılır menüsü — üst şeritten aşağı iner.
   Buton en sağda olduğu için menü sağa hizalı (ekran dışına taşmasın). */
.ayarlar-menu {
    position: absolute; top: 36px; right: 0; z-index: 300;
    width: 300px; max-height: 72vh; overflow-y: auto;
    background: #F0F4FF; border: 1px solid #C5CAE9; border-radius: 6px;
    box-shadow: 0 8px 26px rgba(0,0,0,.35); padding: 8px;
}
.ayarlar-menu button {
    width: 100%; height: 32px; margin: 2px 0; border: none; border-radius: 3px;
    color: white; font-size: 11px; cursor: pointer;
}
.ayarlar-menu button.kucuk { height: 28px; font-size: 10px; }
.ayarlar-menu button:hover { filter: brightness(1.12); }
.ayarlar-menu hr { border: none; border-top: 1px solid #C5CAE9; margin: 6px 0; }
.ayarlar-menu label.dosya {
    display: block; width: 100%; margin: 2px 0; border-radius: 3px; color: white;
    font-size: 11px; cursor: pointer; padding: 8px; text-align: center;
}
.ayarlar-menu label.dosya input { display: none; }
.ayarlar-menu label.dosya:hover { filter: brightness(1.12); }

.sik-kullanilan { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 11px; color: #90A4AE; flex: none; }
.ust-sag form { display: inline; }

/* ============================================================
   ANA YERLEŞİM: 310px sol panel + kalan alan
   ============================================================ */

.uygulama { display: flex; flex-direction: column; height: 100vh; }
.govde { flex: 1; display: flex; min-height: 0; }

.sol-panel {
    width: 310px; flex: none;
    background: white;
    border-right: 1px solid #E0E0E0;
    padding: 10px;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.sag-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Sol panel: ay/yıl + şablon bloğu ── */
.kontrol-blok {
    background: #F8F9FA; border: 1px solid #E0E0E0; border-radius: 6px;
    padding: 8px; margin-bottom: 8px;
}
.ay-satiri { display: flex; gap: 5px; align-items: center; margin-bottom: 7px; }
.ay-satiri select { height: 30px; font-size: 12px; }
/* Ay kutusu kalan alanı alır ama fazla genişleyip butonları sıkıştırmasın */
.ay-satiri select.ay { flex: 1; min-width: 0; max-width: 108px; }
.ay-satiri select.yil { flex: none; width: 64px; }

.kare-buton {
    width: 30px; height: 30px; padding: 0; flex: none;
    border: 1px solid #C4C9CE; border-radius: 4px; background: #FFFFFF;
    cursor: pointer; font-size: 12px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.kare-buton:hover { background: #ECEFF1; }
.kare-buton:disabled { opacity: .4; cursor: not-allowed; }
.kare-buton.mavi { background: #1A237E; color: white; border-color: #1A237E; font-size: 14px; }
.kare-buton.buyuk { font-size: 17px; font-weight: bold; }
.kare-buton.duzenle { background: #0277BD; color: white; border-color: #0277BD; }
.kare-buton.sil { background: #C62828; color: white; border-color: #C62828; }
.kare-buton.mavi:hover, .kare-buton.duzenle:hover, .kare-buton.sil:hover { filter: brightness(1.15); }

.sablon-satiri { display: flex; gap: 5px; align-items: center; }
.sablon-satiri select { flex: 1; min-width: 0; height: 30px; font-size: 12px; }

/* ── Liste modu + sıralama ── */
.liste-secenek { display: flex; gap: 5px; margin-bottom: 5px; }
.mod-dugme {
    flex: 1; min-width: 0; height: 28px; border: none; border-radius: 4px;
    font-size: 11px; font-weight: 600; color: white; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mod-dugme.tum { background: #7B1FA2; }
.mod-dugme.sablon { background: #455A64; }
.mod-dugme:hover { filter: brightness(1.12); }
.siralama { width: 128px; flex: none; height: 28px; font-size: 11px; }

/* ── Sol panel: butonlar/arama ── */
.tam-buton {
    width: 100%; height: 28px; border: none; border-radius: 3px;
    font-size: 11px; color: white; cursor: pointer; margin-bottom: 4px;
}
.tam-buton:hover { filter: brightness(1.1); }

.arama-kutu { position: relative; }
.arama-kutu input { width: 100%; height: 28px; font-size: 11px; padding: 0 28px 0 6px; }
.arama-temizle {
    position: absolute; right: 3px; top: 3px; width: 22px; height: 22px;
    border: none; background: transparent; color: #999; cursor: pointer; font-size: 10px;
}
.arama-sonuc { font-size: 10px; color: #757575; margin: 2px 0 0 2px; }

/* ── Sol panel: personel listesi başlığı + toolbar ── */
.liste-baslik {
    display: flex; justify-content: space-between; align-items: center;
    margin: 5px 0 3px; font-size: 12px; font-weight: bold;
}
.liste-baslik .sayi { font-size: 11px; color: #757575; font-weight: normal; }

.toplu-toolbar { display: flex; gap: 3px; margin-bottom: 3px; }
.toplu-toolbar button {
    height: 24px; font-size: 10px; padding: 0 6px; border: none; border-radius: 3px;
    color: white; cursor: pointer; white-space: nowrap;
}

/* ── Sol panel: personel listesi ── */
.personel-liste {
    flex: 1; min-height: 60px; overflow-y: auto;
    border: 1px solid #D0D0D0; background: white;
}
.personel-satir {
    display: flex; align-items: flex-start; gap: 5px;
    padding: 3px 5px; cursor: pointer; border-bottom: 1px solid #F5F5F5;
}
.personel-satir:hover { background: #F0F7FF; }
.personel-satir.secili { background: #CCE4F7; }
.personel-satir .ad { font-size: 12px; font-weight: 600; }
.personel-satir .alt { font-size: 10px; color: #757575; }
.personel-satir .tc { color: #1565C0; font-weight: 600; }
.personel-satir .tc-yok { color: #C62828; font-weight: bold; }

/* Şablon üyeliği tik kutusu — tıklanınca çizelgeye ekler/çıkarır */
.sablon-tik {
    width: 17px; height: 17px; flex: none; margin-top: 2px;
    border: 1.5px solid #BDBDBD; border-radius: 3px; background: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; line-height: 1; cursor: pointer;
}
.sablon-tik.var { background: #2E7D32; border-color: #2E7D32; color: white; }
.sablon-tik.yok:hover { border-color: #2E7D32; background: #E8F5E9; }
.sablon-tik.var:hover { background: #C62828; border-color: #C62828; }
.sablon-tik.var:hover::after { content: "✕"; }
.sablon-tik.var:hover { font-size: 0; }
.sablon-tik.var:hover::after { font-size: 12px; }

/* ── Sağ tık menüsü ── */
.baglam-menu {
    position: fixed; z-index: 500; background: white; border: 1px solid #BDBDBD;
    border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 4px 0; min-width: 190px;
}
.baglam-menu button {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: 6px 14px; font-size: 12px; cursor: pointer;
}
.baglam-menu button:hover { background: #E3F2FD; }
.baglam-menu button.tehlike { color: #C62828; font-weight: bold; }
.baglam-menu .ayirici { height: 1px; background: #E0E0E0; margin: 4px 0; }

/* ── AYARLAR menüsü içi başlık/etiketler (üst şeritteki menüde kullanılır) ── */
.ayarlar-baslik {
    background: #EDE7F6; border: 1px solid #7B1FA2; border-radius: 4px;
    padding: 4px 6px; font-size: 10px; font-weight: bold; color: #4A148C; margin: 4px 0 3px;
}
.ayarlar-etiket { font-size: 10px; font-weight: bold; margin: 4px 0 2px; color: #37474F; }
.ayarlar-etiket.yesil { color: #1B5E20; }
.ayarlar-etiket.kirmizi { color: #B71C1C; }
.ayarlar-icerik label.dosya {
    display: block; width: 100%; margin: 2px 0; border-radius: 3px; color: white;
    font-size: 11px; cursor: pointer; padding: 7px 8px; text-align: center;
}
.ayarlar-icerik label.dosya input { display: none; }

/* ── Sol panel: durum mesajı ── */
.durum-mesaji {
    background: #F5F5F5; border-radius: 4px; padding: 6px; margin-top: 6px;
    font-size: 10px; color: #424242; flex: none;
}

/* ============================================================
   SAĞ PANEL — çizelge başlığı + tablo
   ============================================================ */

.cizelge-serit {
    background: #2E75B6; padding: 4px 12px; color: white;
    display: flex; align-items: center; gap: 6px; flex: none;
}
.cizelge-serit .etiket { font-weight: bold; font-size: 14px; }
.cizelge-serit .sablon-ad { font-weight: bold; font-size: 14px; color: #FFD54F; margin-right: 12px; }
.cizelge-serit .ay-yil { font-size: 13px; }

.tablo-alan { flex: 1; overflow: auto; padding: 4px 2px; }

.cizelge-tablo { border-collapse: collapse; font-size: 10px; }
.cizelge-tablo th, .cizelge-tablo td {
    border: 1px solid #E0E0E0; text-align: center; vertical-align: middle;
}
.cizelge-tablo thead th {
    position: sticky; top: 0; z-index: 3;
    background: #F5F5F5; padding: 4px 2px; font-size: 10px;
}
.cizelge-tablo th.birim-basi { min-width: 90px; width: 110px; }
.cizelge-tablo th .birim {
    display: block; font-weight: bold; color: #1F4E79; cursor: pointer;
}
.cizelge-tablo th .birim:hover { text-decoration: underline; }
.cizelge-tablo th .kisi { display: block; font-weight: normal; }

.st-tarih { width: 75px; min-width: 75px; font-weight: 600; }
.st-gun { width: 72px; min-width: 72px; }

.cizelge-tablo tbody tr { height: 24px; }
.cizelge-tablo tbody td { padding: 1px 2px; }

/* Satır renkleri — WPF DataGrid.RowStyle birebir */
tr.r-haftasonu { background: #EEEEEE; font-style: italic; }
tr.r-resmitatil { background: #FFF9C4; font-weight: bold; }
tr.r-idariizin { background: #EDE7F6; font-style: italic; }

.hucre { cursor: pointer; }
.hucre:hover { outline: 2px solid #1565C0; outline-offset: -2px; }
.hucre.kilitli { cursor: default; }

/* ============================================================
   MODAL / DİYALOG
   ============================================================ */

.modal-fon {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center; z-index: 400;
}
.modal {
    background: #F5F7FA; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
    width: min(94vw, 380px); max-height: 90vh; display: flex; flex-direction: column;
}
.modal.orta { width: min(94vw, 600px); }
.modal.genis { width: min(96vw, 980px); }

.modal-basi {
    background: #1976D2; color: white; padding: 12px 16px;
    border-radius: 8px 8px 0 0; font-weight: bold; font-size: 14px;
}
.modal-basi .alt { font-size: 11px; color: #B3E5FC; font-weight: normal; }
.modal-govde { padding: 14px 18px; overflow-y: auto; }
.modal-alt {
    padding: 12px 18px; display: flex; justify-content: flex-end; gap: 10px;
    border-top: 1px solid #E0E0E0; align-items: center;
}


.form-satir { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.form-satir > label { width: 175px; flex: none; font-size: 12px; font-weight: 600; }
.form-satir > input, .form-satir > select { flex: 1; height: 30px; font-size: 12px; }

label.satir-ici { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }

/* Butonlar — element seçici YOK: <a> etiketlerine de uygulanmalı
   (indirme/yazdırma bağlantıları <a> olduğu için; element seçiciliyken
   renk uygulanmıyordu, beyaz üstüne beyaz yazı çıkıyordu). */
.yesil, .gri, .mavi, .kirmizi {
    border: none; border-radius: 4px; color: white; cursor: pointer;
    padding: 8px 16px; font-size: 12px; text-decoration: none;
    display: inline-block; text-align: center;
}
.yesil { background: #388E3C; }
.gri { background: #9E9E9E; }
.mavi { background: #1976D2; }
.kirmizi { background: #C62828; }
button:hover:not(:disabled) { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Ana eylem butonları (indir/yazdır) — renk sınıflarından SONRA tanımlı,
   böylece padding/punto burada kesinleşir. */
.buyuk-buton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 24px; font-size: 14px; font-weight: 800; letter-spacing: .3px;
    border: 2px solid rgba(255,255,255,.55); border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,.28); color: white;
}
.buyuk-buton:hover { filter: brightness(1.15); }

/* Genel form öğeleri */
input, select, textarea {
    border: 1px solid #ADADAD; border-radius: 3px; padding: 3px 6px;
    font-family: inherit; font-size: 12px; background: white;
}
input:focus, select:focus { outline: 1px solid #1565C0; }

/* Bilgi/hata kutuları */
.mesaj-kutu { padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; font-size: 12px; }
.mesaj-kutu.hata { background: #FFEBEE; color: #B71C1C; }
.mesaj-kutu.basari { background: #E8F5E9; color: #1B5E20; }
.mesaj-kutu.bilgi { background: #E3F2FD; color: #0D47A1; }

/* ── Aylık toplu düzenleme tablosu ── */
.aylik-tablo { width: 100%; border-collapse: collapse; font-size: 11px; }
.aylik-tablo th {
    background: #F5F5F5; padding: 5px; border-bottom: 1px solid #E0E0E0;
    position: sticky; top: 0; z-index: 2;
}
.aylik-tablo td { padding: 3px 5px; border-bottom: 1px solid #EEEEEE; text-align: center; }
.aylik-tablo tr.hs { background: #F0F0F0; }
.aylik-tablo tr.rt { background: #FFF9C4; }
.aylik-tablo input { width: 62px; text-align: center; font-size: 10px; height: 24px; }
.aylik-tablo input.not { width: 100%; text-align: left; }
.durum-rozet {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 10px; font-weight: bold; min-width: 90px;
}
.hizli-butonlar { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.hizli-butonlar button {
    height: 24px; font-size: 10px; font-weight: bold; padding: 0 6px;
    border: 1px solid transparent; border-radius: 3px; cursor: pointer; color: white;
}
.hizli-butonlar button.secili { border-color: #000; border-width: 2px; }

.toplu-cubuk {
    background: #E3F2FD; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px;
}
.toplu-cubuk .satir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.toplu-cubuk .satir:last-child { margin-bottom: 0; }
.toplu-cubuk button {
    padding: 5px 10px; font-size: 11px; border: none; border-radius: 3px;
    color: white; cursor: pointer;
}

/* ── Giriş sayfası ── */
.bos-sayfa {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0D1B2A, #1B2A3B);
}
.giris-kutu {
    background: white; padding: 2.5rem; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35); width: min(90vw, 340px);
}
.giris-kutu h1 { margin: 0 0 .25rem; font-size: 1.3rem; }
.alt-baslik { margin: 0 0 1.5rem; color: #64748b; font-size: 12px; }
.giris-kutu form { display: flex; flex-direction: column; gap: 1rem; }
.giris-kutu label { display: flex; flex-direction: column; gap: .3rem; font-size: 12px; color: #475569; }
.giris-kutu input { height: 34px; font-size: 14px; }
.giris-kutu button {
    margin-top: .5rem; height: 38px; background: #1565C0; color: white;
    border: none; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.hata-mesaj { background: #FFEBEE; color: #B71C1C; padding: .6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 12px; }