/* ═══════════════════════════════════════════════════════════════
   LCC — Görev detay paneli ortak görünümü  (lcc_detail.css)

   ÖNCESİ: detay paneli, her biri kendi çerçevesi olan birbirinin
   aynı 6 kutunun alt alta dizilmesiydi. Çerçeve + dolgu + kesikli
   camgöbeği kutular + karışık glif/emoji ikonlar üst üste binince
   panel "form doldurma ekranı" gibi okunuyordu; hiçbir öğe diğerinden
   daha önemli görünmüyordu.

   SONRASI: tek bir "özellik kartı" (.detail-group) — satırlar kendi
   çerçevelerini bırakır, aralarını saç teli çizgi ayırır. İkonlar tek
   çizgi ailesinden (lcc_detail.js) ve kendi kutucuğunda; değer varsa
   kutucuk vurgu rengine döner, yani "dolu/boş" bir bakışta okunur.
   Değerler renkli hap, boş durum ise sessiz "Ekle ›".

   Kapsam: sınıf adları DEĞİŞMEDİ — 01 (.detail-row ailesi) ve
   13 (.drow ailesi) aynı kurallarla boyanıyor, JS'e dokunulmuyor.
   Bu dosya modülün kendi <style>'ından SONRA yüklenmeli.
   ═══════════════════════════════════════════════════════════════ */

/* ── Ortak jeton: saç teli ayraç + satır vurgusu ───────────────── */
body{
  --det-hair:color-mix(in srgb, var(--border) 62%, transparent);
  --det-tile:color-mix(in srgb, var(--text3) 15%, transparent);
  --det-tile-on:color-mix(in srgb, var(--accent2) 17%, transparent);
  --det-row-hover:color-mix(in srgb, var(--accent2) 7%, transparent);
}

/* ── İkon: tek aile, tek boy ──────────────────────────────────── */
.d-ic{width:15px;height:15px;display:block;flex-shrink:0}

/* ═══ ÖZELLİK KARTI ═══════════════════════════════════════════ */
.detail-group{
  background:var(--bg2);
  border:1px solid var(--card-border);
  border-radius:6px;
  box-shadow:var(--card-shadow);
  /* overflow:hidden YOK — tarih/bildirim seçicileri satırın İÇİNE
     (position:absolute) ekleniyor, kırpılırlarsa seçici görünmez olur. */
}

/* Kart içindeki satırlar kendi çerçevesini bırakır */
.detail-group > .detail-row,
.detail-group > .detail-myday,
.detail-group > .drow,
.detail-group > .d-row,
.detail-group > .myday-r,
.detail-group > .myday-row{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:10px 12px!important;
  gap:11px!important;
  min-height:46px;
  transition:background .15s ease;
}
/* Köşeler: kart kırpmadığı için ilk/son satır kendi yuvarlatmasını taşır */
.detail-group > *:first-child{border-top-left-radius:5px!important;border-top-right-radius:5px!important}
.detail-group > *:last-child{border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}

/* Ayraç — ilk satır hariç her satırın üstünde */
.detail-group > .detail-row + .detail-row,
.detail-group > .detail-row + .detail-myday,
.detail-group > .detail-myday + .detail-row,
.detail-group > .drow + .drow,
.detail-group > .drow + .myday-row,
.detail-group > .myday-row + .drow,
.detail-group > .rp + .drow,
.detail-group > .d-row + .d-row,
.detail-group > .d-row + .detail-myday,
.detail-group > .detail-myday + .d-row,
.detail-group > .lccrp-wrap + .d-row,
.detail-group > .drow + .myday-r,
.detail-group > .myday-r + .drow,
.detail-group > .myday-row + .d-row,
.detail-group > .d-row + .myday-row,
.detail-group > .rp + .d-row,
.detail-group > .fp + .d-row,
.detail-group > .lccrp-wrap + .detail-row,
.detail-group > .lccrp-wrap + .drow,
.detail-group > .rp-picker + .drow{
  border-top:1px solid var(--det-hair)!important;
}
.detail-group > .detail-row:hover,
.detail-group > .drow:hover,
.detail-group > .d-row:hover,
.detail-group > .detail-myday:hover,
.detail-group > .myday-r:hover,
.detail-group > .myday-row:hover{background:var(--det-row-hover)!important}

/* İkon kutucuğu — "dolu/boş" göstergesi de bu */
.detail-group .detail-row-icon,
.detail-group .di,
.detail-group .dri,
.detail-group .d-row-icon,
.detail-group > .detail-myday > span:first-child,
.detail-group > .myday-r > span:first-child,
.detail-group > .myday-row > span:first-child{
  width:26px!important;height:26px!important;flex:0 0 26px!important;
  display:flex!important;align-items:center;justify-content:center;
  border-radius:6px!important;
  background:var(--det-tile);
  color:var(--text2)!important;
  font-size:12px!important;line-height:1;text-align:center;
  transition:background .15s ease,color .15s ease;
}
/* Değeri olan satır: kutucuk vurguya döner (:has → markup'a dokunmadan) */
.detail-group > .detail-row:has(.detail-row-val) .detail-row-icon,
.detail-group > .drow:has(.dv) .di,
.detail-group > .drow:has(.drv) .dri,
.detail-group > .d-row:has(.d-row-val) .d-row-icon{
  background:var(--det-tile-on);color:var(--accent2)!important;
}
.detail-group > .detail-myday.added > span:first-child,
.detail-group > .myday-r.on > span:first-child,
.detail-group > .myday-row.on > span:first-child{
  background:color-mix(in srgb, var(--amber) 20%, transparent);color:var(--amber)!important;
}
/* Yıldız işaretliyken içi dolu + kutucuk kehribara döner */
.detail-group .d-ic.on{fill:currentColor}
.detail-group > .detail-row:has(.d-ic.on) .detail-row-icon,
.detail-group > .drow:has(.d-ic.on) .di,
.detail-group > .drow:has(.d-ic.on) .dri,
.detail-group > .d-row:has(.d-ic.on) .d-row-icon{
  background:color-mix(in srgb, var(--amber) 20%, transparent);color:var(--amber)!important;
}

/* Etiket — panelin ana metni, değer ikincil */
.detail-group .detail-row-text,
.detail-group .detail-myday-text,
.detail-group .dt,
.detail-group .drt,
.detail-group .d-row-text,
.detail-group .myday-t,
.detail-group .myday-txt{
  font-size:13.5px!important;font-weight:500;color:var(--text)!important;
  letter-spacing:.1px;flex:1 1 auto;min-width:56px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.detail-group > .detail-myday.added .detail-myday-text,
.detail-group > .myday-r.on .myday-t,
.detail-group > .myday-row.on .myday-txt{color:var(--amber)!important}

/* Günüm satırı etiketi uzun ("Dashboard Günüm'de görünüyor") ve yanında hap
   yok — kırpmak yerine alt satıra sarsın. */
.detail-group .myday-txt,
.detail-group .myday-t,
.detail-group .detail-myday-text{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}

/* Değer hapı — rengi satırdan (inline color) gelir */
.detail-group .detail-row-val,
.detail-group .dv,
.detail-group .drv,
.detail-group .d-row-val{
  font-size:11px!important;font-weight:600;letter-spacing:.2px;
  padding:3px 8px!important;border-radius:6px!important;max-width:130px!important;
  background:color-mix(in srgb, currentColor 13%, transparent)!important;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent)!important;
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Boş durum — çerçeveli tuş değil, sessiz bir davet */
.detail-group .detail-row-add,
.detail-group .dv-add,
.detail-group .drv-add,
.detail-group .d-row-add{
  border:none!important;background:none!important;padding:0!important;
  font-size:12px!important;font-weight:500!important;color:var(--text3)!important;
  display:inline-flex;align-items:center;gap:5px;
}
.detail-group .detail-row-add::after,
.detail-group .dv-add::after,
.detail-group .drv-add::after,
.detail-group .d-row-add::after{content:'›';font-size:15px;line-height:1;opacity:.75}
.detail-group > .detail-row:hover .detail-row-add,
.detail-group > .drow:hover .dv-add,
.detail-group > .drow:hover .drv-add,
.detail-group > .d-row:hover .d-row-add{color:var(--accent2)!important}

/* Temizle (✕) ve ertele — satır içinde sessiz kalsın */
.detail-group .detail-row-clear,
.detail-group .dclr,
.detail-group .d-row-clear,
.detail-group .d-clr{
  font-size:14px!important;color:var(--text3);opacity:.65;
  padding:6px 4px!important;margin:-6px -2px -6px 0!important;
  transition:color .15s,opacity .15s;
}
.detail-group .detail-row-clear:hover,
.detail-group .dclr:hover,
.detail-group .d-row-clear:hover,
.detail-group .d-clr:hover{color:var(--red);opacity:1}
/* Ertele: 300px'lik panelde "Son tarih + 25 Ağustos + Ertele + ✕" yan yana
   sığmıyordu (etiket iki satıra kırılıyordu). Tuş simgeye indi — başlığı
   (title) dururken metin gizlenir. */
.detail-group .detail-row-postpone{
  width:26px;height:26px;padding:0!important;flex:0 0 26px;margin-right:2px!important;
  justify-content:center;border-radius:6px!important;
  background:var(--ctl-bg)!important;border:1px solid var(--ctl-bd)!important;
  color:var(--ctl-tx)!important;box-shadow:var(--ctl-sh);
}
.detail-group .detail-row-postpone .btn-lbl{display:none}
.detail-group .detail-row-postpone:hover{border-color:var(--accent2)!important;color:var(--accent2)!important}

/* Yinele paneli — kartın içinde gömülü bir bölme */
.detail-group > .lccrp-wrap,
.detail-group > .rp-picker,
.detail-group > .rp,
.detail-group > .fp{
  background:var(--bg3)!important;border:none!important;border-radius:0!important;
  border-top:1px solid var(--det-hair)!important;
  margin:0!important;padding:12px!important;
}

/* ═══ BAŞLIK BLOĞU ════════════════════════════════════════════ */
.detail-task-row,.det-taskrow{align-items:flex-start!important;gap:12px!important;padding:2px 0 2px}
.detail-title,.det-title{font-size:16px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:-.1px}
.detail-circle,.det-chk{
  width:22px!important;height:22px!important;border-width:1.5px!important;
  margin-top:2px!important;font-size:13px!important;
}

/* ═══ BÖLÜM BAŞLIKLARI ════════════════════════════════════════ */
.det-sec-lbl{
  font-size:10px;font-weight:700;letter-spacing:1.8px;
  color:var(--text3);margin:6px 0 7px;text-transform:none;
}

/* ═══ NOT ALANI — gerçek bir yüzey ════════════════════════════ */
.det-note-wrap{
  background:var(--bg2);border:1px solid var(--card-border);border-radius:6px;
  box-shadow:var(--card-shadow);padding:11px 12px;
  transition:border-color .15s ease;
}
.det-note-wrap:focus-within{border-color:var(--accent2)}
.det-note-wrap textarea{
  min-height:44px!important;line-height:1.6!important;
  background:transparent!important;border:none!important;
  padding:0!important;box-shadow:none!important;
}

/* ═══ ADIM EKLE ═══════════════════════════════════════════════ */
.detail-step-add,.step-add{
  background:var(--bg2)!important;border:1px solid var(--card-border)!important;
  border-radius:6px!important;box-shadow:var(--card-shadow);
  padding:9px 12px!important;
}
.detail-step-add:focus-within,.step-add:focus-within{border-color:var(--accent2)!important}
.detail-step-add > span:first-child,.step-add > span:first-child{
  width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;background:var(--det-tile-on);color:var(--accent2);font-size:12px;
}

/* ═══ KAYNAK / HEDEF / LİSTE — aynı dil ═══════════════════════ */
.detail-src-badge{
  font-size:11px!important;font-weight:600;letter-spacing:.4px!important;
  padding:4px 9px!important;border-radius:6px!important;
  background:color-mix(in srgb, var(--accent2) 11%, transparent)!important;
  border:1px solid color-mix(in srgb, var(--accent2) 26%, transparent)!important;
  color:var(--accent2)!important;
}
/* lcc_goal_links.js / lcc_list_move.js kendi kesikli camgöbeği kutusunu
   çiziyor (sabit renkler — light temada da camgöbeği). Panel içinde
   özellik kartıyla aynı dile çekiliyor. */
.gp-label,.lm-label{
  font-size:10px!important;font-weight:700!important;letter-spacing:1.8px!important;
  color:var(--text3)!important;margin-bottom:7px!important;
}
.gp-btn,.lm-btn{
  border:1px solid var(--card-border)!important;border-style:solid!important;
  background:var(--bg2)!important;box-shadow:var(--card-shadow);
  padding:10px 12px!important;border-radius:6px!important;min-height:46px;
}
.gp-btn:hover,.lm-btn:hover{border-color:var(--accent2)!important;background:var(--bg2)!important}
.gp-btn-icon,.lm-btn-icon{
  width:26px!important;height:26px!important;border-radius:6px!important;
  background:var(--det-tile)!important;font-size:13px!important;
}
.gp-btn-txt,.lm-btn-txt{font-size:13px!important;color:var(--text2)!important}
.gp-btn-arr,.lm-btn-arr{
  font-size:10px!important;font-weight:700;letter-spacing:.8px;
  color:var(--text3)!important;
}
.gp-btn:hover .gp-btn-arr,.lm-btn:hover .lm-btn-arr{color:var(--accent2)!important}

/* ═══ SİL — panelin dibinde, sessiz ═══════════════════════════ */
.detail-delete,.det-del{
  display:flex!important;align-items:center;justify-content:center;gap:7px;
  background:none!important;border:1px solid color-mix(in srgb, var(--red) 26%, transparent)!important;
  color:var(--red)!important;font-size:12px!important;font-weight:600;letter-spacing:.3px;
  padding:10px!important;border-radius:6px!important;min-height:42px;
  transition:background .15s ease,border-color .15s ease;
}
.detail-delete:hover,.det-del:hover{
  background:color-mix(in srgb, var(--red) 10%, transparent)!important;
  border-color:color-mix(in srgb, var(--red) 45%, transparent)!important;
}

/* ═══ MOBİL ═══════════════════════════════════════════════════ */
@media(max-width:768px){
  .detail-group > .detail-row,
  .detail-group > .detail-myday,
  .detail-group > .drow,
  .detail-group > .d-row,
  .detail-group > .myday-r,
  .detail-group > .myday-row{padding:12px 13px!important;min-height:52px}
  .detail-group .detail-row-icon,
  .detail-group .di,
  .detail-group .dri,
  .detail-group .d-row-icon,
  .detail-group > .detail-myday > span:first-child,
  .detail-group > .myday-r > span:first-child,
.detail-group > .myday-row > span:first-child{width:28px!important;height:28px!important;flex:0 0 28px!important}
  .d-ic{width:16px;height:16px}
  .detail-group .detail-row-text,
  .detail-group .detail-myday-text,
  .detail-group .dt,
  .detail-group .drt,
  .detail-group .d-row-text,
  .detail-group .myday-t,
.detail-group .myday-txt{font-size:14.5px!important}
  .detail-group .detail-row-clear,
  .detail-group .dclr,
.detail-group .d-row-clear,
.detail-group .d-clr{padding:11px 8px!important;margin:-11px -4px -11px 0!important;font-size:16px!important}
  .detail-title,.det-title{font-size:17px!important}
  /* iOS odak yakınlaştırmasını engelleyen 16px kuralı korunur */
  .det-note-wrap textarea{font-size:16px!important}
}