/* THIS IS A CUSTOM CSS FILE FOR LOCAL USER ADJUSTMENTS TO THE THEME */

/*
   NOT (DÜZELTME - 2. TUR): Bu dosyada önce Kanboard'un native tema
   değişkenlerini (var(--color-primary) gibi) kullanmıştık. Ancak bu
   projedeki "Açık Mod / Koyu Mod" butonu Kanboard'un kendi tema sistemini
   DEĞİL, KanboardCSS eklentisinin (bkz. kanboardcss.css) KENDİ --kb-* önekli
   değişkenlerini ve [data-theme] attribute'unu kullanıyor. Bu yüzden native
   değişkenler kullanıldığında buton bir işe yaramıyordu (sadece sunucudaki
   sabit/gerçek tema ayarına göre görünüyordu). Şimdi doğrudan --kb-*
   değişkenlerine bağlanıyoruz; böylece buton gerçekten ikisi arasında
   doğru şekilde geçiş yaptırıyor.
*/
/* Header'daki Açık / Koyu mod düğmesi
   (temel stil kanboardcss.css içindeki .theme-switch-btn; burada sadece header'a oturtuyoruz.
   "header" öneki, kanboardcss.css'in sonradan yüklenmesine rağmen bu kuralların kazanmasını sağlar) */
   

/* =====================================================================
   KOYU MOD OKUNABİLİRLİK DÜZELTMELERİ
   Kaynak: kanboardcss.css'teki açık tema sabit renkleri (çoğu !important).
   Sadece html[data-theme="dark"] altında çalışır, açık moda etkisi yoktur.
   ===================================================================== */

/* 0) ANA NEDEN: kanboardcss.css sonunda "body { color: #000000 !important }" var.
      Modal, açılır menü ve select2 listeleri <body>'ye eklendiği için siyahı miras alıyordu. */
html[data-theme="dark"] body {
    color: var(--kb-text-main) !important;
}

/* 1) Genel bağlantılar (.btn ve modal kapatma düğmesi hariç) */
html[data-theme="dark"] a:link:not(.btn):not(#modal-close-button),
html[data-theme="dark"] a:visited:not(.btn):not(#modal-close-button) {
    color: var(--kb-primary-hover);
}

/* 2) Form alanlarına yazılan metin siyahtı */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--kb-text-main) !important;
}

/* Placeholder: kanboardcss.css'te input[type="text"]:not(.input-addon-field)::placeholder
   { color: var(--pp-black) !important } var; yenebilmek için özgüllük bilerek yüksek ([type]). */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] input[type]::placeholder,
html[data-theme="dark"] .input-addon-field::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--kb-text-muted) !important;
    opacity: 1;
}

/* 3) Proje özeti satırı ve kulvar yolu */
html[data-theme="dark"] .table-list-row .table-list-details,
html[data-theme="dark"] .table-list-row .table-list-details small {
    color: var(--kb-text-muted) !important;
}

html[data-theme="dark"] .table-list-row .table-list-details strong {
    color: var(--kb-text-main) !important;
}

/* "2 proje" / "1 görev" sayaç başlıkları */
html[data-theme="dark"] .table-list-header-count {
    color: var(--kb-text-muted) !important;
}

/* 4) Görev satırındaki rozet/ikon grubu (süre, ek, açıklama, yaş, öncelik) */
html[data-theme="dark"] .task-list-icons,
html[data-theme="dark"] .task-list-icons a,
html[data-theme="dark"] .task-list-icons span,
html[data-theme="dark"] .task-list-icons i {
    color: var(--kb-text-muted) !important;
}

/* 5) Proje/görev başlık bağlantıları */
html[data-theme="dark"] .table-list-title a {
    color: var(--kb-primary-hover) !important;
}

/* 6) Görev detay başlığı (#B71234 koyu zeminde okunmuyordu) */
html[data-theme="dark"] #task-summary h2 {
    color: #f87171 !important;
}

/* 7) Logo: bağlantının tamamı %50 şeffaftı */
html[data-theme="dark"] header .logo a {
    opacity: 1;
}

html[data-theme="dark"] header .logo a span {
    color: var(--kb-text-muted);
}

/* 8) Board: görev kartları beyaz kalmıştı */
html[data-theme="dark"] .task-board,
html[data-theme="dark"] .board-task-list > div.task-board,
html[data-theme="dark"] div.task-board-recent {
    background-color: var(--kb-surface) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}

/* 9) Board: sütunların açık gri çerçeveleri */
html[data-theme="dark"] #board td,
html[data-theme="dark"] #board th {
    border-color: var(--kb-border) !important;
}

/* 10) Sol menü şeritleri */
html[data-theme="dark"] .sidebar li {
    border-left-color: transparent !important;
}

html[data-theme="dark"] .sidebar li.active {
    border-left-color: var(--kb-primary) !important;
}

/* 11) "Başka bir proje göster" seçicisi */
html[data-theme="dark"] .select-dropdown-input-container {
    background-color: var(--kb-input-bg) !important;
}

html[data-theme="dark"] .select-dropdown-input-container input,
html[data-theme="dark"] input.select-dropdown-input {
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .select-dropdown-chevron,
html[data-theme="dark"] .select-loading-icon,
html[data-theme="dark"] .select-loading-icon i {
    color: var(--kb-text-muted) !important;
}

/* 12) Modal (popup) penceresi */
html[data-theme="dark"] #modal-box {
    background-color: var(--kb-surface) !important;
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] #modal-close-button,
html[data-theme="dark"] #modal-close-button i {
    color: #ffffff !important;
}

html[data-theme="dark"] .form-required {
    color: #f87171 !important;
}

/* 13) Butonlar */
html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] button.btn-blue,
html[data-theme="dark"] a.btn-blue {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-blue:hover,
html[data-theme="dark"] button.btn-blue:hover {
    background-color: #1d4ed8 !important;
}

html[data-theme="dark"] .btn-red,
html[data-theme="dark"] button.btn-red,
html[data-theme="dark"] a.btn-red {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-red:hover,
html[data-theme="dark"] button.btn-red:hover {
    background-color: #b91c1c !important;
}

/* 14) Ürün / Materyal seçimi (select2) */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--kb-input-bg) !important;
    border-color: var(--kb-border) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-search__field {
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection__placeholder {
    color: var(--kb-text-muted) !important;
}

html[data-theme="dark"] .select2-dropdown {
    background-color: var(--kb-surface) !important;
    border-color: var(--kb-border) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--kb-input-bg) !important;
    border-color: var(--kb-border) !important;
}

/* 15) Ses kaydı bileşeni (voice-recorder.css sabit açık renk kullanıyor) */
html[data-theme="dark"] .voice-recorder-container {
    background-color: var(--kb-surface) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .voice-recorder-container .btn:not(.btn-red) {
    background-color: var(--kb-surface-hover) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .recording-timer {
    color: var(--kb-text-main);
}

html[data-theme="dark"] #audio-preview-container {
    border-top-color: var(--kb-border);
}

/* 16) Dosya / ekran görüntüsü yükleme alanı */
html[data-theme="dark"] #file-dropzone,
html[data-theme="dark"] #screenshot-zone {
    border-color: var(--kb-border) !important;
}

/* 17) Etkinlik akışı ayırıcı çizgileri */
html[data-theme="dark"] .activity-title,
html[data-theme="dark"] .activity-content {
    border-bottom-color: var(--kb-border) !important;
}

/* 18) Açık / Koyu mod düğmesi: varsayılan beyaz odak halkası yerine tema mavisi */
html[data-theme="dark"] .theme-switch-btn:focus-visible {
    outline: 2px solid var(--kb-primary);
    outline-offset: 2px;
}

/* ---------- 19-20: TARAYICIDA DOĞRULANMADI, uyguladıktan sonra kontrol et ---------- */

/* 19) "Başka bir proje göster" açılan listesi */
html[data-theme="dark"] .select-dropdown-menu {
    background-color: var(--kb-surface) !important;
    border-color: var(--kb-border) !important;
}

html[data-theme="dark"] .select-dropdown-menu-item {
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .select-dropdown-menu-item.active,
html[data-theme="dark"] .select-dropdown-menu-item:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* 20) Tarih / saat seçici (jQuery UI datepicker + timepicker) */
html[data-theme="dark"] .ui-datepicker {
    background-color: var(--kb-surface) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-datepicker-header {
    background-color: var(--kb-surface-hover) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-datepicker-title,
html[data-theme="dark"] .ui-datepicker th,
html[data-theme="dark"] .ui-datepicker dt,
html[data-theme="dark"] .ui-datepicker dd {
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-datepicker-prev .ui-icon,
html[data-theme="dark"] .ui-datepicker .ui-datepicker-next .ui-icon {
    filter: invert(1);
}

html[data-theme="dark"] .ui-datepicker td a,
html[data-theme="dark"] .ui-datepicker td span {
    background-color: var(--kb-input-bg) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
    text-decoration: none !important;
}

html[data-theme="dark"] .ui-datepicker td a.ui-state-highlight {
    background-color: var(--kb-surface-hover) !important;
    border-color: var(--kb-primary) !important;
}

html[data-theme="dark"] .ui-datepicker td a.ui-state-active {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .ui-datepicker td a:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane {
    border-top-color: var(--kb-border) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane button {
    background-color: var(--kb-surface-hover) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}

html[data-theme="dark"] .ui-datepicker input.ui_tpicker_time_input {
    background-color: var(--kb-input-bg) !important;
    border-color: var(--kb-border) !important;
    color: var(--kb-text-main) !important;
}
header .theme-switch-btn {
    margin-left: 0;
    margin-right: 6px;
    line-height: 1.2;
    white-space: nowrap;
}

header .theme-switch-btn .fa {
    color: var(--kb-primary);
}

/* Dar ekranlarda sadece ikon kalsın (header taşmasın) */
@media (max-width: 700px) {
    header .theme-switch-btn {
        padding: 6px 9px;
    }

    header .theme-switch-btn .theme-switch-label {
        display: none;
    }
}
/* Genel gövde ve temel metinler */
body, .page, #main {
    color: var(--kb-text-main) !important;
}

/* Üst bar, menü linkleri ve butonlar (Yeni proje, özel proje vb.) */
.page-header a,
.views-switcher a,
.action-menu a,
.sidebar a,
header a {
    color: var(--kb-text-main) !important;
}

.page-header a:hover,
.views-switcher a:hover,
header a:hover {
    color: var(--kb-primary-hover, var(--kb-primary)) !important;
}

/* Sol üst logo/başlık metni (SAHACAR CELIK) */
.logo, .logo a, .header-title {
    color: var(--kb-text-main) !important;
}

/* Proje listesi ve kart başlıkları (#4 asdasda, admin vb.) */
.project-list-title a,
.table-list-title a,
.dashboard-table-link a {
    color: var(--kb-primary) !important;
}

/* Proje/görev listesi altındaki özet bilgiler
   (örn. "3 Bekleme listesi, 0 Hazır, 0 İşlemde, 0 Tamamlandı") ve
   görev listesindeki atanan kişi ismi. */
.table-list-details,
.table-list-meta,
.table-list-header,
.task-avatar-assignee {
    color: var(--kb-text-muted) !important;
}

/* Arama ve form girdi alanları */
input[type="text"],
input[type="search"],
select,
textarea {
    background-color: var(--kb-input-bg) !important;
    color: var(--kb-text-main) !important;
    border: 1px solid var(--kb-border) !important;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder {
    color: var(--kb-text-muted) !important;
}

/* 21) Board kartındaki "#2 ▾" rozetinin oku (koyu gri, koyu zeminde görünmüyordu) */
html[data-theme="dark"] .dropdown-menu-link-icon strong,
html[data-theme="dark"] .dropdown-menu-link-icon i.fa-caret-down {
    color: var(--kb-text-muted) !important;
}