/* ==========================================================================
   NOT (DÜZELTME): Bu projedeki "Açık Mod / Koyu Mod" butonu, Kanboard'un
   kendi tema sistemini değil, KanboardCSS eklentisinin KENDİ --kb-* önekli
   CSS değişkenlerini ve [data-theme] mekanizmasını kullanıyor. Bu yüzden
   burada Kanboard'un native var(--color-primary) gibi değişkenleri değil,
   doğrudan KanboardCSS'in --kb-* değişkenlerini kullanıyoruz — böylece
   butona basıldığında bizim kutularımız da gerçekten tema değiştiriyor.
   Her var(...) çağrısında ikinci parametre (virgülden sonraki), KanboardCSS
   hiç yüklenmemişse veya değişken tanımlı değilse kullanılacak açık-mod
   uyumlu yedek (fallback) değerdir.
   ========================================================================== */

/* ===== Board kart rozeti ===== */
.task-issues-badge {
    display: inline-block;
    background-color: #d9534f;
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 4px;
}

/* ===== Görev detay paneli ===== */
.task-issues-panel {
    border: 1px solid var(--kb-border, #ddd);
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
    background: var(--kb-surface, #fcfcfc);
    color: var(--kb-text-main, #333);
}

.task-issues-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-issues-panel-header h3 {
    margin: 0;
    font-size: 15px;
    color: var(--kb-text-main, #333);
}

.task-issues-count-badge {
    display: inline-block;
    background-color: #d9534f;
    color: #fff;
    border-radius: 50%;
    padding: 1px 7px;
    font-size: 12px;
    margin-left: 4px;
}

.task-issues-toggle-form {
    font-size: 13px;
    color: var(--kb-primary, #36c);
}

.task-issues-add-form {
    margin: 10px 0;
    padding: 10px;
    background: var(--kb-input-bg, #fff);
    border: 1px solid var(--kb-border, #eee);
    border-radius: 4px;
    color: var(--kb-text-main, #333);
}

.task-issues-add-form .form-column {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    margin-right: 1%;
}

.task-issues-add-form select,
.task-issues-add-form textarea {
    background: var(--kb-input-bg, #fff);
    color: var(--kb-text-main, #333);
    border: 1px solid var(--kb-border, #ccc);
}

.task-issues-form-actions {
    margin-top: 8px;
}

.task-issues-empty {
    color: var(--kb-text-muted, #888);
    font-style: italic;
    margin: 8px 0 0;
}

.task-issues-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.task-issues-item {
    border-left: 4px solid var(--kb-border, #ccc);
    background: var(--kb-surface, #fff);
    color: var(--kb-text-main, #333);
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 3px;
}

/* Önem derecesi renkleri (sol kenarlık) kasıtlı olarak sabit tutuluyor —
   kırmızı/turuncu/sarı her iki temada da yeterli kontrast sağlıyor. */
.task-issues-item.color-red { border-left-color: #d9534f; }
.task-issues-item.color-orange { border-left-color: #f0ad4e; }
.task-issues-item.color-yellow { border-left-color: #e0c419; }

.task-issues-item-resolved {
    opacity: 0.75;
}

.task-issues-item-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.task-issues-type {
    font-weight: bold;
    color: var(--kb-text-main, #333);
}

.task-issues-severity {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--kb-text-muted, #666);
}

.task-issues-meta {
    font-size: 12px;
    color: var(--kb-text-muted, #888);
}

.task-issues-auto-badge {
    display: inline-block;
    font-size: 10px;
    background: var(--kb-column-bg, #eef2f7);
    color: var(--kb-text-main, #4a5568);
    border: 1px solid var(--kb-border, transparent);
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
}

.task-issues-note {
    margin-top: 4px;
    font-size: 13px;
    color: var(--kb-text-main, #444);
    white-space: pre-line;
}

.task-issues-resolution-note {
    color: #2b6f2b;
}

.task-issues-resolve-form {
    margin-top: 6px;
}

.task-issues-resolved-history summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--kb-text-muted, #666);
    margin-top: 10px;
}

/* ===== Sorunlu Görevler dashboard sayfası ===== */
.task-issues-filter-form {
    margin-bottom: 12px;
}

.task-issues-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.task-issues-filter-row label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--kb-text-muted, #666);
}

.task-issues-filter-row select {
    background: var(--kb-input-bg, #fff);
    color: var(--kb-text-main, #333);
    border: 1px solid var(--kb-border, #ccc);
}

.task-issues-filter-disabled {
    opacity: 0.5;
}

.task-issues-bulk-toolbar {
    margin-bottom: 10px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--kb-text-main, #333);
}

.task-issues-bulk-action-label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--kb-text-muted, #666);
}

.task-issues-bulk-toolbar select,
.task-issues-bulk-toolbar input {
    background: var(--kb-input-bg, #fff);
    color: var(--kb-text-main, #333);
    border: 1px solid var(--kb-border, #ccc);
}

.task-issues-bulk-note {
    min-width: 220px;
}

.task-issues-table .table-list-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    background: var(--kb-surface, transparent);
    border-color: var(--kb-border, #e5e5e5);
}

.task-issues-row-select {
    flex: 0 0 20px;
    padding-top: 3px;
}

.task-issues-row-severity {
    flex: 0 0 70px;
}

.task-issues-severity-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    color: #fff;
}

/* Rozet arka planları sabit renk tutuluyor (kırmızı/turuncu/sarı üzerinde
   beyaz yazı her iki temada da yeterli kontrast sağlıyor). */
.task-issues-severity-badge.color-red { background-color: #d9534f; }
.task-issues-severity-badge.color-orange { background-color: #f0ad4e; }
.task-issues-severity-badge.color-yellow { background-color: #cfa800; }

.task-issues-row-main {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--kb-text-main, #333);
}

.task-issues-row-main a {
    color: var(--kb-primary, #36c);
}

.task-issues-row-details {
    font-size: 12px;
    color: var(--kb-text-muted, #888);
}

.task-issues-closed-tag {
    font-size: 11px;
    color: var(--kb-text-muted, #999);
    border: 1px solid var(--kb-border, #ccc);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

.task-issues-project-wide-tag {
    font-size: 11px;
    font-style: italic;
    color: var(--kb-primary, #3b82f6);
    border: 1px solid var(--kb-primary, #3b82f6);
    border-radius: 3px;
    padding: 0 4px;
}

.task-issues-row-assignee {
    flex: 0 0 150px;
    font-size: 13px;
    color: var(--kb-text-main, #333);
}

.task-issues-unassigned {
    color: var(--kb-text-muted, #aaa);
    font-style: italic;
}

.task-issues-row-date {
    flex: 0 0 140px;
    font-size: 12px;
    color: var(--kb-text-muted, #888);
    text-align: right;
}

.task-issues-row-actions {
    flex: 0 0 70px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--kb-text-muted, #888);
}

.task-issues-row-actions a {
    color: var(--kb-text-muted, #888);
}

.task-issues-row-actions a:hover {
    color: var(--kb-primary, #3b82f6);
}

/* ===== "Yeni Sorun Oluştur" modal formu ===== */
.task-issues-create-columns {
    display: flex;
    gap: 16px;
}

.task-issues-create-column {
    flex: 1 1 0;
}

#voice-recorder-container .recorder-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

#voice-recorder-container .recording-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d9534f;
    animation: task-issues-pulse 1s infinite;
}

@keyframes task-issues-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 1; }
}

#audio-preview-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}