/* ═══════════════════════════════════════════════════════════════════
   QUTRIT DETAY MODAL + KOMPAKT SEKME PANELİ — TUR86
   ───────────────────────────────────────────────────────────────────
   Görev modülü alt sekmeleri (Yürütme Hatları, İşlem Logları, ...)
   inline yerine MODAL'da gösterilir. Sayfa scroll'u yok, ekran
   ortasında geniş bir çalışma alanı.

   Yapı:
     .qtr-detay-modal-overlay  → fixed full-screen dim background
       .qtr-detay-modal-box    → ortalı kutu (95vw / 90vh)
         .qtr-detay-modal-header  → görev adı + ✕ kapat
         .qtr-detay-modal-tabsbar → 10 sekme (modal içi geçiş)
         .qtr-detay-modal-body    → aktif sekmenin içeriği

   Tüm renkler design system değişkenleriyle bağlı (tema duyarlı).
   ═══════════════════════════════════════════════════════════════════ */

.qtr-detay-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9990;
  padding: 20px;
  animation: qtrDetayModalFadeIn .15s ease-out;
}
.qtr-detay-modal-overlay.is-open {
  display: flex;
}

.qtr-detay-modal-box {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  width: min(95vw, 1500px);
  /* 🆕 TUR86o — Modal yüksekliği SABİT DEĞİL, içeriğe göre büyür.
     Scroll asla olmasın diye: az içerik → küçük modal, çok içerik → 95vh sınır.
     Viewport sınırını geçemez (95vh) ama altında tüm içerik sığacak şekilde kalır.
     🆕 TUR86q — min-height eklendi: sekme değişince modal KÜÇÜLMEZ.
     İlk açıldığında ne kadarsa, tüm sekmelerde aynı yükseklikte kalır. */
  height: auto;
  min-height: min(85vh, 720px);
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: qtrDetayModalSlideUp .2s ease-out;
}

/* Header — görev adı + adres etiketi + WBS/AQB/kapat butonları */
.qtr-detay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-surface-alt);
  flex-shrink: 0;
}
.qtr-detay-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  min-width: 0;
  flex: 1;
}
.qtr-detay-modal-title .qtr-detay-modal-code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Monaco, monospace);
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.qtr-detay-modal-title .qtr-detay-modal-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Sağ taraf — adres + butonlar + kapat */
.qtr-detay-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 📍 Adres etiketi */
.qtr-detay-modal-address {
  display: inline-flex;
  align-items: center;
  max-width: 460px;
  padding: 4px 9px;
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  background: var(--color-bg-surface);
  color: var(--color-action-primary-hover);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Monaco, monospace);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  cursor: default;
}

/* WBS / AQB butonları */
.qtr-detay-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.qtr-detay-modal-btn:hover {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
  color: #fff;
  transform: translateY(-1px);
}
.qtr-detay-modal-btn.is-aqb {
  /* AQB butonu vurgusu — yeşil tonu (ribbon'daki ile uyumlu) */
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
  border-color: #10b981;
  color: #065f46;
}
.qtr-detay-modal-btn.is-aqb:hover {
  background: #10b981;
  border-color: #059669;
  color: #fff;
}

.qtr-detay-modal-close {
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  width: 32px;
  height: 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
  font-family: var(--font-sans);
}
.qtr-detay-modal-close:hover {
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
  border-color: var(--color-status-error);
}

/* Mobil — adres etiketi gizlensin, butonlar küçülsün */
@media (max-width: 900px) {
  .qtr-detay-modal-address { display: none; }
  .qtr-detay-modal-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
}

/* Sekme bar — modal içinde */
.qtr-detay-modal-tabsbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 12px 0;
  background: var(--color-bg-surface-alt);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.qtr-detay-modal-tabsbar .qtr-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all .12s;
  position: relative;
  top: 1px;
}
.qtr-detay-modal-tabsbar .qtr-tab:hover {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}
.qtr-detay-modal-tabsbar .qtr-tab.active {
  background: var(--color-bg-surface);
  border-color: var(--color-border-default);
  color: var(--color-action-primary);
  font-weight: 700;
}

/* Body — aktif sekme içeriği */
.qtr-detay-modal-body {
  flex: 1;
  overflow: auto;
  padding: 12px 16px;
  background: var(--color-bg-surface);
}
.qtr-detay-modal-body #qtr-detay-content {
  display: block;
}
/* Modal kapalıyken detay-content gizli (modal'a taşındı, ana sayfada gözükmesin) */
body:not(.qtr-detay-modal-active) #qtr-detay-content.qtr-moved-to-modal {
  display: none;
}

@keyframes qtrDetayModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes qtrDetayModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobil — modal full-screen */
@media (max-width: 768px) {
  .qtr-detay-modal-overlay { padding: 0; }
  .qtr-detay-modal-box {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .qtr-detay-modal-tabsbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 6px 8px 0;
  }
  .qtr-detay-modal-tabsbar .qtr-tab {
    flex-shrink: 0;
    font-size: 11px;
    padding: 7px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DETAYBAND PANEL GÖRÜNÜMÜ — TUR86
   ───────────────────────────────────────────────────────────────────
   Detay header silindi, sekme içerik modal'a taşındı. Geriye dış
   sekme bar (modal trigger) + context-actions kaldı. Bunları ortada
   yalnız satır gibi değil, kompakt bir kart/panel görünümünde sun.
   ═══════════════════════════════════════════════════════════════════ */
.qtr-detayband {
  margin: 0 12px 8px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Sekme bar üst border'ı (kalın mavi çizgi) gereksiz artık —
   panel kendi border'ına sahip */
.qtr-detayband .qtr-detay-tabs {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: var(--color-bg-surface-alt) !important;
}
.qtr-detayband .qtr-tabs-bar {
  background: transparent !important;
}
.qtr-detayband .qtr-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border-default) !important;
}
.qtr-detayband .qtr-context-band {
  border-bottom: none !important;
  background: var(--color-bg-surface) !important;
  padding: 6px 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LİSTE BİTİŞ İŞARETİ — TUR86
   ───────────────────────────────────────────────────────────────────
   Kök iş listesinin sonuna dekoratif bir kapanış satırı ekleniyor:
   ─── 📋 N KÖK İŞ LİSTELENDİ ───
   Görsel olarak listenin nerede bittiği belli olur, alttaki sekme
   bar paneline geçiş yumuşar.
   ═══════════════════════════════════════════════════════════════════ */
.qtr-list-end-row td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.qtr-list-end-row:hover td {
  background: transparent !important;
}
.qtr-list-end-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px 8px;
  margin-top: 4px;
  border-top: 2px dashed var(--color-border-default);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}
.qtr-list-end-marker::before,
.qtr-list-end-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-default), transparent);
  max-width: 200px;
}
.qtr-list-end-icon {
  font-size: 13px;
  flex-shrink: 0;
  filter: grayscale(0.2);
}
.qtr-list-end-text {
  flex-shrink: 0;
}


/* TUR24_31 — Detay modal sekmeleri: daha büyük, daha kare */
.qtr-detay-modal-tabsbar{
  gap:3px !important;
  padding:7px 12px 0 !important;
}
.qtr-detay-modal-tabsbar .qtr-tab{
  min-height:32px !important;
  padding:0 14px !important;
  border-radius:5px 5px 0 0 !important;
  font-size:12px !important;
  font-weight:800 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.qtr-detay-modal-tabsbar .qtr-tab.active{
  box-shadow:0 -3px 0 var(--color-action-primary) !important;
}