/* input(13,67): run-time error CSS1031: Expected selector, found '/'
input(13,67): run-time error CSS1025: Expected comma or open brace, found '/' */
/* ============================================================================================
   SLATE · sl-task-panel — GÖREV PANELİ (Katalog §07.3)
   Parça: RA_E2_PLAN.md · E2-P9a. Motor: js/Common/sl-task-panel.js.

   Bu dosya SALT GÖRÜNÜM'dür; davranış (süzme, seçim, derin link) motorda yaşar.

   Satır İÇERİĞİ bu dosyanın işi DEĞİL: aday zonu + durum hücresi SlAssignmentCard'dan
   gelir ve görsel dilleri css/Shared/list-zones.css'tedir (.asg-*). Burada yalnız
   PANELİN yerleşimi vardır: satır kabı, sebep chip'i, boş durum, iskelet.

   ⚠️ SEGMENT ŞERİDİ de bu dosyanın işi değil — SlStatStrip çizer (sl-stat-strip.css).

   TOKEN KURALI (P1): literal renk YOK; ölçüler --space-*/--font-*/--line-*/--radius-*
   ızgarasından. Satır yüksekliği --task-row-h (Ek C — §07.3 için tanımlanmış token).
   ============================================================================================ */

.tp {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.tp *,
.tp *::before,
.tp *::after { box-sizing: border-box; }


/* ── Satır listesi ────────────────────────────────────────────────────────────────────────── */
.tp-list {
    display: flex;
    flex-direction: column;
}

/* Satır — §07.3/5: 48px taban (sebep satırı payı); içerik taşarsa büyür, kırpılmaz. */
.tp-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-height: var(--task-row-h);
    padding: var(--space-8) var(--space-12);

    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color var(--motion-micro) var(--motion-ease);
}

.tp-row + .tp-row { border-top: var(--border-w) solid var(--border); }

.tp-row:hover { background: var(--surface-sunken); }

.tp-row:focus-visible {
    outline: var(--border-w-strong) solid var(--link);
    outline-offset: calc(var(--space-4) * -1);
}

.tp-row__main   { flex: 1 1 40%; min-width: 0; }
.tp-row__status { flex: 1 1 34%; min-width: 0; }

.tp-row__side {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 0 0 auto;
    margin-left: auto;
}

.tp-row__go {
    color: var(--text-muted);
    font-size: var(--font-13);
}

.tp-row:hover .tp-row__go { color: var(--link); }


/* ── Sebep chip'i — ikon + ton KODA göre (metin V198/P9b'de eklenecek) ───────────────────────
   RENK TEK KANAL DEĞİL: her kodun kendi ikonu var; kod title/aria'da. Tonlar status
   token ailesinden (anlamsal katman) — literal renk yok. */
.tp-reason {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Kapalı ikon ölçeğinde 28 yok → 24 + 4 çevre (yeni token açılmadı). */
    width: calc(var(--icon-24) + var(--space-4));
    height: calc(var(--icon-24) + var(--space-4));
    border-radius: var(--radius-full);
    font-size: var(--font-13);
}

.tp-reason--primary { color: var(--accent-primary-text); background: var(--accent-primary-subtle); }
.tp-reason--info    { color: var(--status-info-text);    background: var(--status-info-subtle); }
.tp-reason--warning { color: var(--status-warning-text); background: var(--status-warning-subtle); }
.tp-reason--danger  { color: var(--status-danger-text);  background: var(--status-danger-subtle); }
.tp-reason--pending { color: var(--status-pending-text); background: var(--status-pending-subtle); }


/* ── Boş durum — kutlamasız, sakin (§07.3/11); "0" değil BOŞ (P6 ayrımı) ─────────────────── */
.tp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-24) var(--space-16);

    font-size: var(--font-12);
    line-height: var(--line-12);
    color: var(--text-muted);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.tp-retry {
    padding: var(--space-4) var(--space-12);
    font-size: var(--font-12);
    line-height: var(--line-12);
    color: var(--link);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.tp-retry:focus-visible {
    outline: var(--border-w-strong) solid var(--link);
    outline-offset: var(--space-4);
}


/* ── İskelet (§07.3/12) — sabit satır yüksekliği, CLS 0 ──────────────────────────────────── */
.tp-row--skeleton { cursor: default; }

.tp-skel {
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    animation: tp-pulse 1200ms ease-in-out infinite;
}

.tp-skel--av   { width: var(--space-32); height: var(--space-32); border-radius: var(--radius-full); flex: 0 0 auto; }
.tp-skel--txt  { height: var(--line-13); flex: 1 1 50%; }
.tp-skel--pill { height: var(--line-13); flex: 0 0 20%; }

@keyframes tp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }


/* ── Dar ekran (<992 — sayfa ızgarasıyla AYNI kırılma noktası) ───────────────────────────── */
@media (max-width: 991.98px) {
    .tp-row { flex-wrap: wrap; }
    .tp-row__main   { flex-basis: 100%; }
    .tp-row__status { flex-basis: 70%; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-row,
    .tp-skel { transition: none; animation: none; }
}

/* ── Tek birincil eylem (E2-P9b) ─────────────────────────────────────────────────────────── */
/* Eylemsiz sebepte düğme HİÇ YOK (disabled değil) — 2.1 kuralı. Düğme yalnız çağıran
   onAction verdiyse çizilir; salt-okuma kullanımlar (varsa) etkilenmez. */
.tp-act {
    flex: 0 0 auto;
    padding: var(--space-4) var(--space-12);

    font: inherit;
    font-size: var(--font-12);
    line-height: var(--line-12);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    color: var(--link);
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;

    transition: background-color var(--motion-micro) var(--motion-ease);
}

.tp-act:hover { background: var(--surface-sunken); }

.tp-act:focus-visible {
    outline: var(--border-w-strong) solid var(--link);
    outline-offset: var(--space-4);
}

/* Yürütme sürerken (çift tıklama kilidi) — durum belirsiz görünmesin. */
.tp-act:disabled { opacity: .6; cursor: default; }

/* ── 120ms satır çıkışı (E2.14/5) ────────────────────────────────────────────────────────── */
/* Yalnız GÖRSEL: "işlem alındı" hissi. Gerçek liste ve sayaçlar uçtan yeniden gelir
   (istemcide count-- YASAK); bu sınıf render yenilenince zaten kaybolur. */
.tp-row--leaving {
    opacity: 0;
    transform: translateX(var(--space-8));
    transition: opacity var(--motion-micro) var(--motion-ease),
                transform var(--motion-micro) var(--motion-ease);
    pointer-events: none;
}

/* FAZ 83 (K5 · A3-5): pozisyonu müşteri firma kaskadıyla pasif olan görev satırı — soluk + 'Firma pasif' etiketi (danger tonu; ikon pause). */
.tp-row--passive { opacity: .78; }
.tp-row--passive:hover { opacity: 1; }
.tp-meta__it--danger { color: var(--status-danger-text); }
.tp-meta__it--danger i { color: var(--status-danger-text); }