/* Faz 9: Sub Task'lar — KB Task sayfasındaki bölüm (kb.html), Proje Kimlik Kartı bölümü (index.html)
   ve iki sayfada ortak oluşturma / düzenleme penceresi. Renkler iki sayfanın ortak değişkenlerinden gelir
   (app.css ve kb.css); koyu tema body.dark-mode. */

.st-muted { color: var(--text-muted, #8391a7); }
.st-pad { padding: 6px 2px; }
.st-spacer { flex: 1; }
.st-nowrap { white-space: nowrap; }

/* ---------- Durum rozetleri (roles.css'teki durum renkleriyle aynı) ---------- */
.st-status, .st-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    padding: 1px 8px;
    border-radius: 9999px;
    white-space: nowrap;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
.st-status-planned { background: rgba(100, 116, 139, 0.12); color: #475569; }
.st-status-in_progress { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.st-status-delayed { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.st-status-submitted { background: rgba(99, 102, 241, 0.14); color: #4338ca; }
.st-status-completed { background: rgba(16, 185, 129, 0.12); color: #059669; }
body.dark-mode .st-status-planned, body.dark-mode .st-chip.st-status-planned { color: #cbd5e1; background: rgba(148, 163, 184, 0.16); }
body.dark-mode .st-status-in_progress { color: #93c5fd; }
body.dark-mode .st-status-delayed { color: #fca5a5; }
body.dark-mode .st-status-submitted { color: #a5b4fc; }
body.dark-mode .st-status-completed { color: #6ee7b7; }
.st-chip { font-weight: 600; }
.st-chip-deleted { background: transparent; border: 1px dashed var(--border-light, #e5e8ee); color: var(--text-muted, #8391a7); }

.st-tag {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
}
.st-tag-pill {
    display: inline-block;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--accent-purple-light, var(--accent-light, rgba(124, 58, 237, 0.09)));
    color: var(--accent-purple, var(--accent, #7c3aed));
    text-decoration: none;
    white-space: nowrap;
}
a.st-tag-pill:hover { text-decoration: underline; }

.st-overdue-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 9999px;
    background: #fef2f2;
    color: #dc2626;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
body.dark-mode .st-overdue-pill { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.st-due-overdue { color: #dc2626; font-weight: 700; }
body.dark-mode .st-due-overdue { color: #fca5a5; }
.st-overdue-word { font-weight: 600; font-size: 10.5px; text-transform: lowercase; }

.st-badge-deleted {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 5px;
    background: #fef2f2;
    color: #dc2626;
}
body.dark-mode .st-badge-deleted { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }

.st-note {
    font-size: 11.5px;
    color: var(--text-secondary, #475569);
    background: var(--sidebar-bg, var(--bg-soft, #f8fafc));
    border: 1px solid var(--border-light, #e5e8ee);
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1.45;
}
.st-note-lock { border-style: dashed; }
.st-error { font-size: 12px; color: #dc2626; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-empty { font-size: 12px; color: var(--text-muted, #8391a7); padding: 6px 2px; }
.st-check { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-secondary, #475569); cursor: pointer; user-select: none; }
.st-check input { margin: 0; width: auto; }

.st-icon-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary, #475569);
    border-radius: 6px;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.st-icon-btn svg { display: block; }
.st-icon-btn:hover, .st-icon-btn:focus-visible { border-color: var(--border-light, #e5e8ee); background: var(--bg-shell, #fff); color: var(--accent-purple, var(--accent, #7c3aed)); }
.st-icon-danger:hover, .st-icon-danger:focus-visible { color: #dc2626; }
.st-icon-text { font-size: 11px; font-weight: 600; }
.st-btn-sm { font-size: 11.5px !important; padding: 5px 10px !important; }
.st-btn-danger { color: #dc2626 !important; }

@keyframes st-flash { from { background: rgba(124, 58, 237, 0.16); } to { background: transparent; } }
.st-flash { animation: st-flash 2.4s ease-out; }

/* ---------- Proje Kimlik Kartı ---------- */
.st-card-section {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.st-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.st-card-title { margin-top: 0; }
.st-count { font-size: 10.5px; color: var(--text-muted, #8391a7); text-transform: none; letter-spacing: 0; }
.st-groups { display: flex; flex-direction: column; gap: 8px; }
.st-task-group {
    border: 1px solid var(--border-light, #e5e8ee);
    border-radius: 10px;
    background: var(--sidebar-bg, #fafbfc);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.st-task-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.st-task-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-company-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 12px;
    color: var(--text-primary, #0f172a);
    background: var(--bg-shell, #fff);
    border: 1px solid var(--border-subtle, #f1f3f7);
    border-left: 3px solid transparent;
    border-radius: 7px;
    padding: 5px 8px;
    cursor: pointer;
}
.st-company-row:hover { border-color: var(--border-light, #e5e8ee); }
.st-company-row:focus-visible { outline: 2px solid var(--accent-purple, #7c3aed); outline-offset: 1px; }
.st-company-row.has-overdue { border-left-color: #dc2626; }
.st-caret { width: 10px; color: var(--text-muted, #8391a7); font-size: 10px; }
.st-company-name { font-weight: 700; }
.st-company-total {
    font-size: 10.5px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--border-subtle, #f1f3f7);
    color: var(--text-secondary, #475569);
}
.st-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.st-items { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 4px 14px; }
.st-item {
    background: var(--bg-shell, #fff);
    border: 1px solid var(--border-subtle, #f1f3f7);
    border-radius: 7px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.st-item.st-is-overdue { border-left: 3px solid #dc2626; }
.st-item.st-is-deleted { opacity: 0.65; }
.st-item.st-is-deleted .st-item-title { text-decoration: line-through; }
.st-item-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-item-actions { margin-left: auto; display: inline-flex; gap: 2px; }
.st-item-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #0f172a); line-height: 1.35; word-break: break-word; }
.st-item-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-secondary, #475569); }

/* ---------- KB Task sayfası ---------- */
.st-kb-section .st-kb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.st-kb-section .st-kb-head h3 { margin: 0; }
.st-kb-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-kb-hint { margin: 0 0 10px; }
.st-kb-section .st-note { margin-bottom: 10px; }
.st-kb-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.st-kb-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--border-light, #e5e8ee);
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: var(--bg-soft, #f8fafc);
}
.st-kb-summary-item.has-overdue { border-left-color: #dc2626; }
.st-table-wrap { max-height: none; }
.st-table td { vertical-align: middle; }
.st-row-title { font-weight: 600; word-break: break-word; }
.st-row-desc { font-size: 11.5px; color: var(--text-muted, #8391a7); margin-top: 2px; word-break: break-word; }
.st-table tr.st-is-overdue td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.st-table tr.st-is-deleted td { opacity: 0.6; }
.st-table tr.st-is-deleted .st-row-title { text-decoration: line-through; }
.st-td-actions { text-align: right; }
.st-linked { font-size: 11px; }

/* ---------- Pencere ---------- */
.st-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}
.st-modal-overlay.active { display: flex; }
/* kb.html: bildirimler (kb-toast, z-index 100) pencerenin üstünde kalsın. */
.st-modal-overlay.st-on-kb { z-index: 90; }
.st-modal-box {
    width: 640px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--bg-shell, #fff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-light, #e5e8ee);
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    font-family: var(--font-sans, Inter, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: 13px;
    overflow: hidden;
}
.st-modal-done { width: 460px; }
.st-modal-box form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.st-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border-light, #e5e8ee);
}
.st-modal-title { font-size: 15px; font-weight: 700; }
.st-modal-meta { font-size: 11.5px; margin-top: 2px; }
.st-modal-close {
    border: 1px solid var(--border-light, #e5e8ee);
    background: transparent;
    color: var(--text-secondary, #475569);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}
.st-modal-close:hover { color: var(--text-primary, #0f172a); }
.st-modal-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.st-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-light, #e5e8ee);
}
.st-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.st-span2 { grid-column: 1 / -1; }
.st-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary, #475569); }
.st-req { color: #dc2626; }
.st-modal-box input:not([type=checkbox]):not([type=hidden]), .st-modal-box select, .st-modal-box textarea {
    font: inherit;
    font-size: 13px;
    width: 100%;
    color: var(--text-primary, #0f172a);
    background: var(--bg-shell, #fff);
    border: 1px solid var(--border-light, #e5e8ee);
    border-radius: 8px;
    padding: 7px 9px;
    min-height: 34px;
    box-sizing: border-box;
}
.st-modal-box textarea { resize: vertical; min-height: 64px; }
.st-modal-box input:focus, .st-modal-box select:focus, .st-modal-box textarea:focus {
    outline: 2px solid var(--accent-purple-light, var(--accent-light, rgba(124, 58, 237, 0.12)));
    border-color: var(--accent-purple, var(--accent, #7c3aed));
}
.st-modal-box [aria-invalid="true"] { border-color: #dc2626 !important; outline-color: rgba(220, 38, 38, 0.18) !important; }
.st-static { display: flex; align-items: center; gap: 6px; min-height: 34px; font-size: 13px; flex-wrap: wrap; }
.st-static-title { color: var(--text-primary, #0f172a); font-weight: 600; }
.st-field-hint { font-size: 11px; color: var(--text-muted, #8391a7); line-height: 1.4; }
.st-field-error { font-size: 11px; color: #dc2626; font-weight: 600; }
.st-tag-hint { margin-top: -2px; }
.st-form-error {
    border: 1px solid rgba(220, 38, 38, 0.3);
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.st-form-error[hidden] { display: none; }
.st-form-error.st-form-info { border-color: rgba(37, 99, 235, 0.3); background: rgba(37, 99, 235, 0.07); color: var(--accent-blue, #2563eb); }
body.dark-mode .st-form-error { background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.st-err-text { font-weight: 600; }
.st-err-list { margin: 0; padding-left: 18px; color: var(--text-primary, #0f172a); font-weight: 400; }
.st-done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px 0 4px; }
.st-done-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #8391a7); }
.st-done-tag {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-purple, var(--accent, #7c3aed));
    background: var(--accent-purple-light, var(--accent-light, rgba(124, 58, 237, 0.09)));
    border-radius: 10px;
    padding: 6px 14px;
    user-select: all;
}
.st-done-title { font-size: 14px; font-weight: 600; word-break: break-word; }

@media (max-width: 560px) {
    .st-form-grid { grid-template-columns: minmax(0, 1fr); }
}