/* ═══════════════════════════════════════════════════
   TASK MANAGER — Board, List, Timeline, Drawer, Review
═══════════════════════════════════════════════════ */

/* ── Bölüm 1: Board / List / Timeline / TM Sidebar ── */
.tm-board{display:flex;gap:12px;padding:14px 16px 20px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;min-height:calc(100vh - 220px)}
.tm-bcol{flex:0 0 280px;max-width:280px;display:flex;flex-direction:column;background:var(--surface2);border:1px solid var(--border);border-radius:10px;max-height:calc(100vh - 240px);overflow:hidden}
.tm-bcol.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,0,125,.25)}
.tm-bcol-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface3);flex-shrink:0}
.tm-bcol-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tm-bcol-name{font-size:12px;font-weight:700;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.3px;text-transform:uppercase}
.tm-bcol-cnt{font-size:10px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:1px 8px;font-weight:700}
.tm-bcol-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;display:flex;flex-direction:column;gap:8px}
.tm-bcol-body::-webkit-scrollbar{width:6px}
.tm-bcol-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.tm-bcol-empty{font-size:11px;color:var(--muted);padding:16px 8px;text-align:center;border:1px dashed var(--border);border-radius:8px;opacity:.5}
.tm-bcard{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--muted);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;cursor:grab;transition:background .12s,border-color .12s,transform .08s}
.tm-bcard:hover{background:rgba(245,240,232,.04);border-color:var(--accent)}
.tm-bcard:active{cursor:grabbing}
.tm-bcard.dragging{opacity:.4;transform:scale(.98)}
.tm-bcard-thumb{width:100%;height:78px;border-radius:5px;background:var(--surface3);overflow:hidden;position:relative;flex-shrink:0}
.tm-bcard-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tm-bcard-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tm-bcard-path{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-bcard-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tm-bcard-sub{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.tm-bcard-dot{width:16px;height:16px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* LIST VIEW */
/* Min-width: tüm sabit-width kolonların toplamı ~1100px. Daha dar ekranda
   yatay scroll çıksın; kolonlar shrink edip içerikler bozulmasın. tmGrid +
   tmListHeader container'ları yatay scroll'a açıktır. */
.tm-lhead, .tm-lrow{min-width:1100px}
.tm-lhead .tm-lcell[onclick]:hover{background:rgba(255,255,255,.05);border-radius:4px}
.tm-lrow{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);min-height:38px;cursor:default;transition:background .1s;border-left:3px solid transparent;user-select:none;background:transparent}
.tm-lrow:hover{background:rgba(245,240,232,.03)}
.tm-lrow.active{background:rgba(245,240,232,.08)}
.tm-lcell{padding:0 10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.tm-lcell.num{width:36px;color:var(--muted);font-size:11px;text-align:center}
.tm-lcell.thumb{width:52px;padding:0;overflow:hidden;height:38px;display:flex;align-items:center;justify-content:center;background:var(--surface3)}
.tm-lcell.name{flex:1;font-weight:600;color:var(--text);min-width:0;padding-bottom:3px;display:flex;align-items:center;justify-content:flex-start;text-align:left}
.tm-lhead .tm-lcell.name{justify-content:flex-start;text-align:left}
.tm-lcell.status{width:110px;display:flex;align-items:center;justify-content:center}
.tm-lcell.status select{width:100%;box-sizing:border-box;text-align:center;text-align-last:center}
.tm-lcell.person{width:120px;color:var(--muted2);display:flex;align-items:center;justify-content:center}
.tm-lcell.person select{width:100%;box-sizing:border-box;text-align:center;text-align-last:center}
.tm-lcell.priority{width:100px;display:flex;align-items:center;justify-content:center}
.tm-lcell.priority select{width:100%;box-sizing:border-box;text-align:center;text-align-last:center}
.tm-lcell.task-types{width:160px;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 8px;cursor:pointer;overflow:visible}
.tm-cb-cell{display:none !important}
#tmGrid.tm-selection-mode .tm-cb-cell{display:flex !important}
.tm-lcell.subtasks{width:140px;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 8px;overflow:visible}
.tm-lcell.actions{width:170px;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px}
.tm-lcell[data-col="time"]{width:80px;display:flex;align-items:center;justify-content:center;text-align:center}
.tm-lcell.budget{width:96px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px}
.tm-lhead{display:flex;align-items:center;background:var(--surface3);border-bottom:2px solid var(--border);border-left:3px solid transparent;position:relative}
.tm-lhead .tm-lcell{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding-top:7px;padding-bottom:7px;position:relative;overflow:visible;text-align:center;display:flex;align-items:center;justify-content:center}
/* Column header "paste column from clipboard" button — shown on hover */
.tm-hdr-paste-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;margin-left:5px;font-size:10px;line-height:1;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s;user-select:none;flex-shrink:0;border:1px solid transparent}
.tm-lhead .tm-lcell:hover .tm-hdr-paste-btn{opacity:.85}
.tm-hdr-paste-btn:hover{opacity:1 !important;background:rgba(232,0,125,.2);color:var(--accent);border-color:var(--accent)}
/* Scope-level paste buttons on scene/episode headers */
.tm-scope-paste-btn{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;line-height:1;background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;user-select:none;transition:background .15s,color .15s;border:1px solid transparent;letter-spacing:.3px;text-transform:uppercase}
.tm-scope-paste-btn:hover{background:rgba(232,0,125,.18);color:var(--accent);border-color:var(--accent)}
.tm-scope-paste-group{opacity:.55;transition:opacity .15s}
.tm-scene-hdr:hover .tm-scope-paste-group{opacity:1}
/* Column resize handle */
.tm-col-resizer{position:absolute;right:-4px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:5;user-select:none;display:flex;align-items:center;justify-content:center}
.tm-col-resizer::after{content:'';display:block;width:2px;height:70%;background:rgba(255,255,255,.2);border-radius:1px;transition:background .15s}
.tm-col-resizer:hover::after,.tm-col-resizer.dragging::after{background:var(--accent);width:3px}
/* Filter row — top bar with independent filters */
.tm-frow{display:flex;align-items:center;background:var(--surface2);border-bottom:2px solid var(--border);flex-shrink:0;padding:5px 0;border-left:3px solid transparent}
.tm-frow .tm-lcell{padding:0 10px;overflow:visible;display:flex;align-items:center;justify-content:center}
.tm-fsel{width:100%;box-sizing:border-box;background-color:var(--surface3);border:1px solid var(--border);color:var(--muted2);font-size:11px;padding:4px 6px;font-family:'Outfit',sans-serif;cursor:pointer;outline:none;border-radius:5px;text-align:center;text-align-last:center}
.tm-fsel:hover,.tm-fsel:focus{color:var(--text);border-color:var(--accent)}

/* View toggle buttons */
.tm-vbtns{display:flex;border:1px solid var(--border);border-radius:8px;overflow:visible}
.tm-vbtn{padding:6px 10px;background:transparent;border:none;border-right:1px solid var(--border);color:var(--muted);cursor:pointer;position:relative;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center}
.tm-vbtn:last-child{border-right:none}
.tm-vbtn:first-child{border-radius:7px 0 0 7px}
.tm-vbtn:last-child{border-radius:0 7px 7px 0}
.tm-vbtn.active{background:var(--surface3);color:var(--text)}
.tm-vbtn:hover:not(.active){background:rgba(245,240,232,.05)}
.tm-vbtn::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#1e1e1e;color:var(--text);font-size:11px;font-family:'Outfit',sans-serif;white-space:nowrap;padding:4px 9px;border-radius:5px;border:1px solid var(--border);pointer-events:none;opacity:0;transition:opacity .15s;z-index:200}
.tm-vbtn:hover::after{opacity:1}

/* Card/Board filter bar */
.tm-cfrow{display:flex;align-items:center;gap:6px;padding:7px 16px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;flex-wrap:wrap}
.tm-cfrow-label{font-size:11px;color:var(--muted);letter-spacing:.3px;flex-shrink:0;margin-right:2px}
/* Multi-select dropdown */
.tm-ms-wrap{position:relative;flex:1;min-width:110px;max-width:170px}
.tm-ms-btn{width:100%;box-sizing:border-box;background:var(--surface3);border:1px solid var(--border);color:var(--muted2);font-size:11px;padding:4px 8px;font-family:'Outfit',sans-serif;cursor:pointer;border-radius:5px;display:flex;align-items:center;gap:5px;text-align:left;transition:border-color .15s,color .15s}
.tm-ms-btn:hover{color:var(--text);border-color:rgba(232,0,125,.4)}
.tm-ms-btn.has-sel{color:var(--text);border-color:var(--accent);background:rgba(232,0,125,.07)}
.tm-ms-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-ms-cnt{background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;flex-shrink:0;display:none}
.tm-ms-btn.has-sel .tm-ms-cnt{display:inline}
.tm-ms-chev{flex-shrink:0;opacity:.4;transition:transform .15s}
.tm-ms-btn.open .tm-ms-chev{transform:rotate(180deg)}
.tm-ms-dd{position:absolute;top:calc(100% + 4px);left:0;min-width:170px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:400;padding:4px;display:none;max-height:230px;overflow-y:auto}
.tm-ms-dd.open{display:block}
.tm-ms-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--muted2);user-select:none}
.tm-ms-item:hover{background:rgba(245,240,232,.06);color:var(--text)}
.tm-ms-item input[type=checkbox]{accent-color:var(--accent);cursor:pointer;flex-shrink:0;width:13px;height:13px}
.tm-ms-sep{height:1px;background:var(--border);margin:3px 4px}
.tm-ms-clearrow{padding:3px 4px 2px}
.tm-ms-clearbtn{width:100%;padding:4px 8px;background:transparent;border:none;color:var(--muted);font-size:11px;font-family:'Outfit',sans-serif;cursor:pointer;text-align:left;border-radius:5px}
.tm-ms-clearbtn:hover{color:var(--accent)}

/* Quick-Nav: virtual views */
.tm-qnav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;background:transparent;border:1px solid transparent;color:var(--muted2);font-size:12px;font-family:'Outfit',sans-serif;cursor:pointer;border-radius:6px;text-align:left;transition:background .12s,color .12s,border-color .12s}
.tm-qnav-btn:hover{background:rgba(245,240,232,.05);color:var(--text)}
.tm-qnav-btn.active{background:rgba(232,0,125,.12);color:var(--text);border-color:rgba(232,0,125,.35)}

/* ── Card View (tm-row) ──
   Card view'da her task yatay bir flex satırıdır:
   [thumbnail][body][subtasks][actions]. v01'de shared.css'teydi; v02'de
   task-specific olduğu için buraya taşındı. */
.tm-row[style*="background-color"],
.tm-lrow[style*="background-color"]{background-color:transparent!important}
.tm-row[style*="background:"],
.tm-lrow[style*="background:"]{background:transparent!important}
.tm-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border);cursor:default;transition:background .1s;min-height:110px;user-select:none;background:transparent}
.tm-row:hover{background:rgba(245,240,232,.03)}
.tm-row.tm-selected,.tm-lrow.tm-selected{background:rgba(245,240,232,.14) !important;border-left-color:rgba(245,240,232,.5) !important;box-shadow:inset 3px 0 0 rgba(245,240,232,.5)}
.tm-row.active{background:rgba(245,240,232,.08);border-left:3px solid rgba(245,240,232,.4)}
.tm-name-link{cursor:pointer}.tm-name-link:hover{text-decoration:underline;text-underline-offset:3px}
.tm-hl{background:rgba(232,0,125,.35);color:#fff;border-radius:3px;padding:0 2px;box-shadow:0 0 0 1px rgba(232,0,125,.55)}
.tm-note-hit{background:rgba(232,0,125,.14) !important;box-shadow:inset 0 0 0 1px rgba(232,0,125,.55) !important;color:var(--text) !important}
.tm-thumb{width:160px;flex-shrink:0;background:var(--surface3);display:flex;align-items:center;justify-content:center;overflow:hidden;border-right:1px solid var(--border)}
.tm-body{flex:1;padding:14px 20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tm-subtasks{flex:0 1 auto;max-width:50%;display:flex;flex-direction:column;gap:4px;justify-content:center;padding:8px 10px;border-left:1px solid var(--border);position:relative;min-width:0}
/* Card view aksiyonları: dar, row-wrap layout. Butonlar icon-only kompakt
   olduğu için 108px container'a 3 buton sığar; folder/delete text varsa
   alt satıra wrap eder. drawer ise daha geniş alana sahip — .tm-drawer-actions
   override'ı (aşağıda) onu kontrol eder. */
.tm-actions{width:108px;flex-shrink:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;align-content:center;justify-content:flex-start;padding:10px 8px;border-left:1px solid var(--border)}
.tm-actions .tm-act-btn{flex:0 0 auto;min-width:0}
.tm-act-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:7px;border:1px solid var(--border);background:var(--surface3);color:var(--muted2);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Outfit',sans-serif;white-space:nowrap}
.tm-act-btn:hover{border-color:var(--accent);color:var(--text);background:rgba(232,0,125,.08)}
.tm-act-btn.ae:hover{border-color:#9999ff;color:#9999ff;background:rgba(153,153,255,.1)}
.tm-act-btn.nuke:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(240,134,26,.1)}
.tm-status-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s}
.tm-status-badge:hover{opacity:.8}

/* Board cards — base + hover. Base `background:var(--surface)` CSS default
   koruması: status paint/cleanup yollarında (`_tmPaintStatusSelect`,
   `tmSetStatus`, live-poll, auto-switch) inline `background` silindiğinde
   kart zemini transparan kalmasın. `.tm-row` ve `.tm-lrow` için aynı defansif
   pattern vardı; `.tm-board-card` eksikti. */
.tm-board-card{background:var(--surface)}
/* Board card defansif: inline background-color set edilirse de transparan kalmasın
   (var(--surface) base'i koru). `.tm-row` / `.tm-lrow` ile sembolik tutarlılık. */
.tm-board-card[style*="background-color"]{background-color:var(--surface)!important}
.tm-board-card:hover{border-color:rgba(232,0,125,.5)!important;transform:translateY(-1px)}

/* My Tasks + Timeline shared */
.tm-mt-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,background .15s}
.tm-mt-card:hover{border-color:var(--accent);background:rgba(232,0,125,.05)}
.tm-mt-proj{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--accent);text-transform:uppercase}
.tm-mt-name{font-size:13px;font-weight:700;color:var(--text)}
.tm-mt-path{font-size:10px;color:var(--muted)}

/* Timeline */
.tm-tl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border)}
.tm-tl-bar{position:relative;flex:1;height:34px;background:var(--surface3);border-radius:5px;overflow:hidden}
.tm-tl-block{position:absolute;top:2px;bottom:2px;border-radius:4px;cursor:grab;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-tl-block:active{cursor:grabbing}

/* Assignee autocomplete input — native search clear button gizle.
   v01'de `.gp-ac-noclear` / `.gp-assignee-input` ile yapılıyordu; v02'de
   prefix temizlendi → `.ac-noclear` / `.assignee-input`. */
.ac-noclear::-webkit-search-cancel-button,
.ac-noclear::-webkit-search-decoration,
.ac-noclear::-webkit-search-results-button,
.ac-noclear::-webkit-search-results-decoration { -webkit-appearance:none; display:none }
.ac-noclear::-ms-clear,
.ac-noclear::-ms-reveal { display:none }
input.assignee-input { appearance:none; -webkit-appearance:none }

/* Role-based UI gating — JS de gizliyor ama flicker önlemi olarak CSS yedeği.
   `auth.js:applyRoleVisibility` `body.role-{admin|coordinator|member}` ekliyor. */
body.role-coordinator [data-col="budget"],
body.role-member      [data-col="budget"],
body.role-coordinator .tm-lcell.budget,
body.role-member      .tm-lcell.budget,
body.role-coordinator #tmViewBoard,
body.role-member      #tmViewBoard { display:none !important }

/* Timeline + Board scroll bar — kalın horizontal bar (default 5px çok inceydi)
   shared.css'teki `*::-webkit-scrollbar` rule'ını override etmek için !important. */
#tmTlpScroll::-webkit-scrollbar,
#tmBoardWrap::-webkit-scrollbar         { height:14px !important; width:10px !important; background:var(--surface2) !important }
#tmTlpScroll::-webkit-scrollbar-track,
#tmBoardWrap::-webkit-scrollbar-track   { background:var(--surface2) !important; border-radius:7px }
#tmTlpScroll::-webkit-scrollbar-thumb,
#tmBoardWrap::-webkit-scrollbar-thumb   { background:rgba(245,240,232,.45) !important; border-radius:7px; border:2px solid var(--surface2); min-width:30px }
#tmTlpScroll::-webkit-scrollbar-thumb:hover,
#tmBoardWrap::-webkit-scrollbar-thumb:hover  { background:rgba(245,240,232,.65) !important }
#tmTlpScroll::-webkit-scrollbar-thumb:active,
#tmBoardWrap::-webkit-scrollbar-thumb:active { background:var(--accent) !important }
#tmTlpScroll::-webkit-scrollbar-corner,
#tmBoardWrap::-webkit-scrollbar-corner  { background:var(--surface2) !important }
/* Firefox */
#tmTlpScroll,
#tmBoardWrap { scrollbar-width:auto; scrollbar-color:rgba(245,240,232,.45) var(--surface2) }

/* TM Sidebar Tree (proje > sahne > plan) */
.tm-tree{display:flex;flex-direction:column;gap:1px}
.tm-tree-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--muted2);transition:background .1s;user-select:none;min-height:26px}
.tm-tree-item:hover{background:rgba(245,240,232,.04)}
.tm-tree-item.active{background:rgba(245,240,232,.10)}
.tm-tree-item.active .tm-tree-name{color:var(--text);font-weight:700}
.tm-tree-caret{width:12px;text-align:center;font-size:9px;color:var(--muted);flex-shrink:0;transition:transform .15s;line-height:1}
.tm-tree-caret.collapsed{transform:rotate(-90deg)}
.tm-tree-caret.leaf{visibility:hidden}
.tm-tree-caret:hover{color:var(--accent3)}
.tm-tree-icon{flex-shrink:0;font-size:13px;line-height:1}
.tm-tree-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
.tm-tree-item.lvl-0{padding-left:6px;font-weight:700}
.tm-tree-item.lvl-0 .tm-tree-name{font-size:13px}
.tm-tree-item.lvl-1{padding-left:18px}
.tm-tree-item.lvl-2{padding-left:32px}
.tm-tree-item.lvl-3{padding-left:46px}
.tm-tree-item.lvl-2 .tm-tree-name,
.tm-tree-item.lvl-3 .tm-tree-name{font-weight:500;font-size:11px;color:var(--muted2)}
.tm-tree-item.lvl-2.active .tm-tree-name,
.tm-tree-item.lvl-3.active .tm-tree-name{color:var(--text);font-weight:700}
.tm-sbar{display:flex;width:60px;height:6px;border-radius:3px;overflow:hidden;background:#1a1a1a;border:1px solid rgba(245,240,232,.08);flex-shrink:0}
.tm-sbar > span{display:block;height:100%}
.tm-tree-del{background:none;border:none;color:var(--muted);cursor:pointer;opacity:0;font-size:12px;padding:0 4px;flex-shrink:0;transition:opacity .1s}
.tm-tree-item:hover .tm-tree-del{opacity:.5}
.tm-tree-del:hover{opacity:1 !important;color:var(--red)}

/* Sahne başlıkları (Task Manager gruplama) */
.tm-scene-hdr{display:flex;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(90deg,rgba(245,240,232,.06),rgba(245,240,232,0));border-top:1px solid var(--border);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.tm-scene-hdr:hover{background:linear-gradient(90deg,rgba(232,0,125,.14),rgba(232,0,125,0))}
.tm-scene-hdr .caret{font-size:10px;color:var(--accent3);width:14px;transition:transform .15s}
.tm-scene-hdr.collapsed .caret{transform:rotate(-90deg)}
.tm-scene-hdr .icon{font-size:15px}
.tm-scene-hdr .name{font-size:13px;font-weight:800;color:var(--text);letter-spacing:.3px}
.tm-scene-hdr .count{font-size:10px;font-weight:700;color:var(--muted);background:var(--surface3);border-radius:10px;padding:2px 8px;border:1px solid var(--border)}
.tm-scene-hdr .stats{margin-left:auto;display:flex;gap:5px;align-items:center}
.tm-scene-hdr .stat-dot{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--muted2);padding:2px 7px;border-radius:10px;background:var(--surface3);border:1px solid var(--border)}
.tm-scene-hdr .stat-dot i{width:6px;height:6px;border-radius:50%;display:inline-block}
.tm-scene-grp.collapsed .tm-scene-body{display:none}

/* SUBTASK */
.st-bar{display:flex;align-items:stretch;gap:5px;padding:2px 0;flex-wrap:wrap;row-gap:5px}
.st-box{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px 10px;border-radius:8px;font-size:10px;font-weight:700;cursor:grab;transition:all .15s;border:1px solid var(--border);border-left-width:3px;background:var(--surface3);white-space:nowrap;user-select:none}
.st-box:active{cursor:grabbing}
.st-box:hover{filter:brightness(1.15)}
.st-box-label{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700}
.st-box-status{font-size:9px;font-weight:600;padding:1px 6px;border-radius:8px;margin-top:1px}
.st-box-person{font-size:9px;color:var(--muted);font-weight:400;margin-top:1px}
.st-add-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;border:1px dashed rgba(245,240,232,.2);background:transparent;color:var(--muted);font-size:16px;cursor:pointer;transition:all .15s;flex-shrink:0;position:relative}
.st-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.st-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px;z-index:200;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.st-dropdown-item{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted2);white-space:nowrap}
.st-dropdown-item:hover{background:var(--surface3);color:var(--text)}
.st-editor{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:0;display:flex;flex-direction:column;gap:8px;position:absolute;top:0;right:0;min-width:290px;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.st-editor input,.st-editor select{background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 9px;font-size:12px;font-family:'Outfit',sans-serif;width:100%}
.st-editor input:focus,.st-editor select:focus{outline:none;border-color:var(--accent)}


/* ── Bölüm 2: Task Drawer / Review Modal / Projeler Panosu ── */
/* ── Sağdan kayan plan detay paneli ── */
.tm-drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:100vw;background:var(--surface2);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .22s ease;z-index:900;display:flex;flex-direction:column;overflow:hidden;pointer-events:none;opacity:0}
.tm-drawer.open{transform:translateX(0);pointer-events:auto;opacity:1}

/* ── Fullpage (center modal) modu — Board view'dan açıldığında kullanılır ──
   Sağ kayan panel yerine ekranın ortasında geniş bir modal gibi gözükür.
   Drawer içeriği (header/body/sections) DOM olarak aynı kalır; sadece dış kabuk
   farklı pozisyonlanır. Backdrop için body'ye .tm-drawer-modal-open class'ı
   eklenmez — onun yerine drawer'ın kendisi shadow + fixed pseudo backdrop alır. */
.tm-drawer.tm-fullpage{
  top:5vh;right:auto;bottom:5vh;left:50%;
  width:min(1100px, 92vw);max-width:none;height:90vh;
  transform:translateX(-50%) scale(.96);
  border-left:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .22s ease, opacity .22s ease;
}
.tm-drawer.tm-fullpage.open{transform:translateX(-50%) scale(1)}
/* Fullpage modda body grid daha geniş kullanılabilir: thumbs sol-sabit,
   properties tek satıra sığsın. */
.tm-drawer.tm-fullpage .tm-drawer-body{padding:22px 28px}
.tm-drawer.tm-fullpage .tm-drawer-props{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 900px){
  .tm-drawer.tm-fullpage .tm-drawer-props{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
/* Backdrop — fullpage modda arka planı karart (sayfayla etkileşimi engelle). */
.tm-drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:899;opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.tm-drawer-backdrop.open{opacity:1;pointer-events:auto}

/* Fullpage'de preview thumb yüksekliğini kısalt — yönetim alanına yer aç.
   Normal drawer'da değişmesin (sadece fullpage modunda override). */
.tm-drawer.tm-fullpage .tm-drawer-thumb{
  max-height:180px;
}
.tm-drawer.tm-fullpage .tm-drawer-thumb img{
  max-height:180px;object-fit:cover;
}

/* ── Budget section (fullpage / board popup için) ────────────────────────── */
.tm-budget-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
}
.tm-budget-section .tm-budget-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.tm-budget-section h3{
  margin:0;font-size:13px;font-weight:700;color:var(--text);
  letter-spacing:.3px;text-transform:uppercase;
}
.tm-budget-section .tm-budget-total{
  font-size:13px;font-weight:700;color:#34d399;
  background:rgba(52,211,153,.12);
  border:1px solid rgba(52,211,153,.3);
  border-radius:8px;padding:4px 10px;
}
.tm-budget-row{
  display:grid;grid-template-columns:1fr 110px auto;
  gap:8px;align-items:center;
  padding:8px 0;border-top:1px dashed var(--border);
}
.tm-budget-row:first-of-type{border-top:none}
.tm-budget-row > .tm-budget-label{
  font-size:12px;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tm-budget-row > .tm-budget-label small{
  color:var(--muted);font-size:11px;display:block;margin-top:2px;
}
.tm-budget-row > .tm-budget-amount{
  font-size:12px;text-align:right;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--text);
}
.tm-budget-row.tm-budget-row-edit{
  grid-template-columns:1fr 110px auto;
}
.tm-budget-row input[type="text"],
.tm-budget-row input[type="number"]{
  background:var(--surface3);border:1px solid var(--border);
  color:var(--text);border-radius:6px;padding:6px 8px;
  font-size:12px;outline:none;width:100%;box-sizing:border-box;
}
.tm-budget-row input:focus{border-color:var(--accent)}
.tm-budget-row .tm-budget-del{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:14px;padding:2px 6px;border-radius:6px;
}
.tm-budget-row .tm-budget-del:hover{color:#ef4444;background:rgba(239,68,68,.08)}
.tm-budget-add-row{
  display:grid;grid-template-columns:1fr 110px auto;gap:8px;align-items:center;
  padding-top:10px;border-top:1px solid var(--border);
}
.tm-budget-add-row button{
  background:var(--accent);color:#fff;border:none;border-radius:6px;
  font-size:11px;font-weight:700;padding:7px 10px;cursor:pointer;
  letter-spacing:.4px;text-transform:uppercase;
}
.tm-budget-add-row button:hover{filter:brightness(1.1)}
.tm-budget-section .tm-budget-subgroup{
  font-size:10px;font-weight:700;color:var(--muted);
  letter-spacing:.5px;text-transform:uppercase;
  margin:8px 0 -4px 0;
}
/* Overview grid: thumbs satırı + properties bloğu — dikey yığın, aralarında nefes. */
.tm-drawer-overview-grid{display:flex;flex-direction:column;gap:14px}
/* Properties sağ kolon — ClickUp tarzı 2-kolon grid + ikon prefix.
   Her property: [ikon] [LABEL] [value] inline. 2 sütun yan yana sığar. */
.tm-drawer-props{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 18px;
  background:transparent;
}
@media (max-width: 720px){
  .tm-drawer-props{grid-template-columns:1fr}
}
.tm-drawer-prop{
  display:grid;
  grid-template-columns:84px 1fr;     /* icon kaldırıldı — sadece label + value */
  align-items:center;
  gap:10px;
  padding:4px 0;
  min-height:28px;
}
/* Dates satırı tam genişlik — iki tarih input'u dar kolona sığmadığı için
   alt satıra geçer ve iki sütunu birden kullanır. */
.tm-drawer-prop-dates{grid-column:1 / -1}
.tm-drawer-prop > label{
  margin:0;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.tm-prop-value{min-width:0;overflow:visible}
/* Form alanları kompakt — sadece geometry. Background/color INLINE style'a
   bırakıldı (status pill, priority pill rengini koruyabilsin). Aksi takdirde
   CSS shorthand inline rengi override ediyordu → ilk render'da renksiz. */
.tm-prop-value > select,
.tm-prop-value > .tm-type-picker,
.tm-prop-value > input[type="search"],
.tm-prop-value input[type="date"]{
  width:100% !important;     /* Assignee input width:auto idi, kolon'dan taşıyordu */
  max-width:100%;
  box-sizing:border-box;
  padding:4px 22px 4px 8px !important;
  font-size:11px !important;
  min-height:26px !important;
  height:26px !important;
  border-radius:5px;
  font-family:inherit;
  line-height:1.2;
  transition:border-color .12s;
}
.tm-prop-value input[type="date"]{
  padding:4px 8px !important;
  background:var(--surface3);   /* date input rengi yok, varsayılan ver */
  border:1px solid var(--border);
  color:var(--text);
}
.tm-prop-value > .tm-type-picker{
  background:var(--surface3);   /* type picker rengi yok */
  border:1px solid var(--border);
  color:var(--text);
}
.tm-prop-value > select:hover,
.tm-prop-value > .tm-type-picker:hover,
.tm-prop-value input[type="date"]:hover{border-color:var(--accent2)}
/* Status / Priority / TaskType pill içeriği — küçük font'a uydur */
.tm-prop-value .tm-status-pill,
.tm-prop-value .tm-priority-pill,
.tm-prop-value .tm-type-pill{font-size:10.5px !important;padding:2px 8px !important}
.tm-prop-value .tm-type-picker-empty{font-size:11px;color:var(--muted)}
/* Dates pair */
.tm-drawer-date-pair{
  display:flex;align-items:center;gap:5px;
}
.tm-drawer-date-pair input[type="date"]{flex:1;min-width:0}
.tm-date-arrow{color:var(--muted);font-size:11px;flex:none}

/* Type/Follower picker dropdown'ları absolute olsun ki içerik aşağı itmesin */
.tm-prop-value{position:relative}
.tm-prop-value .tm-type-dropdown,
.tm-prop-value .tm-follower-dropdown{
  position:absolute !important;
  top:calc(100% + 4px) !important;
  left:0 !important;
  right:auto !important;
  min-width:100%;
  max-width:280px;
  z-index:50;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}
.tm-drawer-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.tm-drawer-head .tm-drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:4px 8px;border-radius:6px}
.tm-drawer-head .tm-drawer-close:hover{background:var(--surface3);color:var(--text)}
.tm-drawer-head .tm-drawer-title{flex:1;font-size:14px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.tm-drawer-body label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;display:block;margin-bottom:6px}
.tm-drawer-body .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-type-picker{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:7px 28px 7px 10px;background:var(--surface3);border:1px solid var(--border2);border-radius:8px;cursor:pointer;font-size:12px;min-height:40px;position:relative;transition:border-color .15s}
.tm-type-picker:hover{border-color:var(--accent)}
.tm-type-picker::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;pointer-events:none}
.tm-type-picker-empty{color:var(--muted);font-size:12px}
.tm-type-dropdown{background:var(--surface3);border:1px solid var(--border2);border-radius:8px;margin-top:4px;padding:4px 0;display:none;overflow:hidden}
.tm-type-dropdown.open{display:block}
.tm-type-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12px;color:var(--text)}
.tm-type-opt:hover{background:rgba(255,255,255,.05)}
.tm-type-opt input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.tm-type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tm-drawer-body textarea{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;resize:none;min-height:76px;max-height:none;box-sizing:border-box;outline:none;overflow:hidden;line-height:1.5}
.tm-drawer-body textarea:focus{border-color:var(--accent)}
/* Description hover tooltip — kart ve liste görünümünde uzun metin için pop-up */
.tm-note-tooltip{position:fixed;display:none;max-width:360px;background:var(--surface2, #1a1a1a);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:99999;pointer-events:none}
.tm-drawer-body select{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;box-sizing:border-box;outline:none;cursor:pointer}
.tm-drawer-body select:focus{border-color:var(--accent)}
.tm-drawer-thumb{position:relative;width:100%;aspect-ratio:16/9;background:var(--surface3);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tm-drawer-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm-drawer-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* Footage/Render rozeti — thumbnail'ın sol-üst köşesinde küçük etiket */
.tm-drawer-thumb-tag{position:absolute;left:8px;top:8px;z-index:2;padding:3px 8px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:6px;pointer-events:none}
.tm-drawer-thumb-tag-render{background:rgba(94,124,226,.85);border-color:rgba(255,255,255,.25)}
.tm-drawer-thumb-tag-render span{font-size:10px;font-weight:600;opacity:.9;padding:1px 5px;background:rgba(0,0,0,.3);border-radius:4px;letter-spacing:0}
/* Footage + Render thumbnail satırı — yan yana, her biri 16:9 oranını korur */
.tm-drawer-thumbs-row{display:flex;gap:6px;width:100%;align-items:flex-start}
.tm-drawer-thumbs-row > .tm-drawer-thumb{flex:1 1 0;min-width:0;aspect-ratio:16/9;height:auto}
.tm-drawer-render-section{flex:1 1 0;min-width:0;display:flex}
.tm-drawer-render-section .tm-drawer-render-thumb{flex:1 1 0;min-width:0;aspect-ratio:16/9;height:auto}
/* Play button overlay — thumbnail üstünde durur, basıldığında review modal'ı açar */
.tm-play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.85);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;transition:background .15s,transform .1s;line-height:1}
.tm-play-btn:hover{background:rgba(0,0,0,.8);transform:translate(-50%,-50%) scale(1.06)}
.tm-play-btn:active{transform:translate(-50%,-50%) scale(.98)}
/* Spinner — review modal loading state'inde kullanılır */
.tm-play-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:tm-prv-spin .8s linear infinite}
@keyframes tm-prv-spin{to{transform:rotate(360deg)}}

/* ── Review Modal (Frame.io stili) ──────────────────────────────────────── */
/* Tam ekran yerine ortalanmış bir kutu — backdrop'a tıklayınca kapanır */
.tm-rev-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:none;align-items:center;justify-content:center;padding:40px}
.tm-rev-modal.open{display:flex}
.tm-rev-modal-inner{display:grid;grid-template-columns:1fr 340px;width:min(92vw,1280px);height:min(86vh,760px);position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.tm-rev-left{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tm-rev-left video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tm-rev-left-loading{position:absolute;color:#fff;font-size:13px;opacity:.75;display:none;flex-direction:column;align-items:center;gap:12px}
.tm-rev-left.loading .tm-rev-left-loading{display:flex}
.tm-rev-left-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(180,40,40,.9);color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;max-width:80%;text-align:center;display:none}
.tm-rev-left.error .tm-rev-left-error{display:block}
.tm-rev-left.error .tm-rev-left-loading{display:none}
.tm-rev-right{background:var(--surface);color:var(--text);display:flex;flex-direction:column;border-left:1px solid var(--border);min-height:0}
.tm-rev-head{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tm-rev-head-title{letter-spacing:.3px}
.tm-rev-head-count{font-size:11px;color:var(--muted);font-weight:500}
.tm-rev-list{flex:1;overflow-y:auto;padding:8px 8px;display:flex;flex-direction:column;gap:6px;min-height:0}
.tm-rev-empty{text-align:center;color:var(--muted);padding:28px 12px;font-size:12px}
.tm-rev-item{padding:8px 12px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;border:1px solid transparent;transition:background .1s,border-color .1s}
.tm-rev-item:hover{background:var(--surface3);border-color:var(--border)}
.tm-rev-row1{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.tm-rev-ts{font-family:ui-monospace,monospace;font-weight:700;color:var(--accent);background:rgba(99,102,241,.15);padding:2px 7px;border-radius:4px;font-size:11px}
.tm-rev-author{font-weight:600;color:var(--text)}
.tm-rev-date{margin-left:auto;font-size:10px;opacity:.7}
.tm-rev-text{font-size:13px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}
.tm-rev-del{opacity:0;background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 6px;font-size:14px;margin-left:auto;line-height:1}
.tm-rev-item:hover .tm-rev-del{opacity:.85}
.tm-rev-del:hover{color:#e06565;opacity:1 !important}
.tm-rev-composer{border-top:1px solid var(--border);padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--surface3)}
.tm-rev-compose-head{display:flex;align-items:center;gap:8px}
.tm-rev-compose-ts{font-family:ui-monospace,monospace;font-size:11px;color:var(--accent);background:rgba(99,102,241,.15);padding:3px 8px;border-radius:4px;font-weight:700}
.tm-rev-compose-hint{font-size:10px;color:var(--muted)}
.tm-rev-composer textarea{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 10px;font-size:13px;font-family:inherit;outline:none;resize:vertical;min-height:52px;max-height:160px;box-sizing:border-box;line-height:1.5}
.tm-rev-composer textarea:focus{border-color:var(--accent)}
.tm-rev-composer-row{display:flex;align-items:center;gap:8px}
.tm-rev-composer-row select{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;font-size:12px;outline:none;font-family:inherit}
.tm-rev-send{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:7px 18px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.tm-rev-send:hover{filter:brightness(1.1)}
.tm-rev-send:disabled{opacity:.5;cursor:not-allowed}
.tm-rev-close{position:absolute;top:10px;right:calc(340px + 10px);width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.2);font-size:18px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.tm-rev-close:hover{background:rgba(0,0,0,.85)}
/* ── Drawing/Annotation Layer (Frame.io stili per-frame çizim) ─────────────── */
/* Canvas, video'nun üzerine binen overlay. Drawing mode aktif değilse pointer
   olaylarını yakalamaz; sadece görsel olarak shape'leri gösterir. */
.tm-draw-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5;display:block}
.tm-rev-left.drawing .tm-draw-canvas{pointer-events:auto;cursor:crosshair}
.tm-rev-left.drawing video{pointer-events:none}
/* Drawing toolbar — video'nun üst-sol köşesinde ince bir bar */
.tm-draw-toolbar{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:6px 8px;display:none;align-items:center;gap:8px;z-index:8;box-shadow:0 4px 16px rgba(0,0,0,.4);font-family:'Outfit',sans-serif}
.tm-rev-left.drawing .tm-draw-toolbar{display:flex}
.tm-draw-toolbar-group{display:flex;align-items:center;gap:3px;border-right:1px solid rgba(255,255,255,.14);padding-right:6px}
.tm-draw-toolbar-group:last-child{border-right:none;padding-right:0}
.tm-draw-tool{background:transparent;border:1px solid transparent;color:rgba(255,255,255,.85);width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0;transition:background .12s,border-color .12s}
.tm-draw-tool:hover{background:rgba(255,255,255,.1)}
.tm-draw-tool.active{background:rgba(99,102,241,.25);border-color:rgba(99,102,241,.6);color:#fff}
.tm-draw-tool svg{width:16px;height:16px;display:block}
.tm-draw-color{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .1s}
.tm-draw-color:hover{transform:scale(1.15)}
.tm-draw-color.active{border-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.tm-draw-thickness{background:transparent;border:1px solid transparent;color:rgba(255,255,255,.85);min-width:28px;height:30px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;padding:0 6px;font-family:inherit;transition:background .12s}
.tm-draw-thickness:hover{background:rgba(255,255,255,.1)}
.tm-draw-thickness.active{background:rgba(99,102,241,.25);border-color:rgba(99,102,241,.6);color:#fff}
.tm-draw-action{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;height:30px;line-height:1;white-space:nowrap}
.tm-draw-action:hover{background:rgba(255,255,255,.12)}
.tm-draw-action.primary{background:var(--accent);border-color:var(--accent)}
.tm-draw-action.primary:hover{filter:brightness(1.1)}
.tm-draw-action.danger:hover{background:rgba(220,80,80,.25);border-color:rgba(220,80,80,.6)}
.tm-draw-action:disabled{opacity:.4;cursor:not-allowed}
/* Drawing toggle button — video player'ın üst-sol köşesinde küçük bir çizim
   açma/kapama butonu. Sağ üst köşede modal kapama (✕) ile çakışmaması için solda. */
.tm-draw-toggle{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);color:#fff;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:7;padding:0;transition:background .12s,border-color .12s}
/* Full Review media action bar — kalem butonunun sağında */
.tm-rev-media-actions{position:absolute;left:58px;top:14px;display:flex;gap:6px;z-index:7;align-items:center}
.tm-rev-media-actions button{background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);color:#fff;padding:0 12px;height:36px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Outfit',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:background .12s,border-color .12s,color .12s}
.tm-rev-media-actions button:hover{background:rgba(0,0,0,.9);border-color:rgba(255,255,255,.4)}
/* Brand colors — Adobe AE = mor (#9999FF logo brand), Premiere = mor-mavi (#9999FF). Finder mac-blue. */
.tm-rev-media-actions button.ae{color:#9999FF;border-color:#3a3a72;background:#1a1a2e}
.tm-rev-media-actions button.ae:hover{background:#252548;border-color:#9999FF;color:#bcbcff}
.tm-rev-media-actions button.pr{color:#EA77FF;border-color:#5a2a78;background:#251433}
.tm-rev-media-actions button.pr:hover{background:#3a1f50;border-color:#EA77FF;color:#f4a5ff}
.tm-rev-media-actions button.finder{color:#5ac8fa;border-color:#1f4565;background:#0e1f2e}
.tm-rev-media-actions button.finder:hover{background:#163048;border-color:#5ac8fa;color:#8edcff}
.tm-rev-media-actions button:disabled{opacity:.4;cursor:not-allowed}
.tm-draw-toggle:hover{background:rgba(0,0,0,.9);border-color:rgba(255,255,255,.4)}
.tm-rev-left.drawing .tm-draw-toggle{background:rgba(99,102,241,.5);border-color:rgba(99,102,241,.9)}
.tm-draw-toggle svg{width:18px;height:18px}
/* Comment'a iliştirilmiş çizim göstergesi (yorum kartında küçük ikon) */
.tm-rev-anno-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:var(--accent);background:rgba(99,102,241,.18);padding:2px 5px;border-radius:3px;font-weight:600}
.tm-rev-anno-badge svg{width:9px;height:9px}
/* Timeline marker bandı — native video scrubber'dan ayrı, kendi tick'leri olan
   click-to-seek progress bar. Native scrubber'ın iç padding'iyle hizalanmaya
   çalışmıyor (browser'a göre değişir, hatalı görünür); kendi başına tutarlı bir
   marker stripi olarak çalışır. */
.tm-rev-timeline{position:absolute;left:0;right:0;bottom:46px;height:14px;background:rgba(0,0,0,.55);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;z-index:6;display:none}
.tm-rev-modal.open .tm-rev-timeline{display:block}
.tm-rev-tl-track{position:absolute;left:8px;right:8px;top:50%;height:2px;background:rgba(255,255,255,.18);border-radius:1px;transform:translateY(-50%);pointer-events:none}
.tm-rev-tl-progress{position:absolute;left:8px;top:50%;height:2px;background:rgba(255,255,255,.6);border-radius:1px;transform:translateY(-50%);pointer-events:none;width:0}
.tm-rev-tl-playhead{position:absolute;top:50%;width:2px;height:14px;background:#fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.7);left:8px}
.tm-rev-tl-tick{position:absolute;top:50%;width:5px;height:14px;border-radius:2px;background:#facc15;box-shadow:0 0 4px rgba(0,0,0,.6);pointer-events:auto;cursor:pointer;transform:translate(-50%,-50%);transition:transform .12s,background .12s;border:1px solid rgba(0,0,0,.3)}
.tm-rev-tl-tick:hover{transform:translate(-50%,-50%) scale(1.25);background:#fde047}
.tm-rev-tl-tick.has-anno{background:var(--accent)}
.tm-rev-tl-tick.has-anno:hover{background:#a5b4fc}
.tm-rev-tl-tick.active{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 0 2px #fff,0 0 6px rgba(0,0,0,.7)}
/* Custom video controls — native <video controls> kaldırıldı, kendi kontrol barımız.
   Native scrubber çift timeline yaratıyordu; tek kontrol bar + üstündeki marker stripi
   yeterli ve daha tutarlı. */
.tm-rev-controls{position:absolute;left:0;right:0;bottom:0;height:40px;background:rgba(0,0,0,.78);border-top:1px solid rgba(255,255,255,.08);display:none;align-items:center;gap:10px;padding:0 12px;z-index:6;font-family:'Outfit',sans-serif;color:#fff;font-size:12px;box-sizing:border-box}
.tm-rev-modal.open .tm-rev-controls{display:flex}
.tm-rev-ctl-btn{background:transparent;border:none;color:#fff;width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s}
.tm-rev-ctl-btn:hover{background:rgba(255,255,255,.12)}
.tm-rev-ctl-btn svg{width:18px;height:18px;display:block}
.tm-rev-ctl-time{font-variant-numeric:tabular-nums;letter-spacing:.5px;color:rgba(255,255,255,.85);min-width:88px;text-align:center}
.tm-rev-ctl-spacer{flex:1}
/* Active comment kart highlight — yorum tıklamasında görsel feedback */
.tm-rev-item.active{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.45)}
.tm-drawer-path{font-size:11px;color:var(--muted);word-break:break-all;font-family:ui-monospace,monospace;background:var(--surface3);padding:6px 10px;border-radius:6px}
.tm-drawer-section{background:var(--surface3);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.tm-drawer-section-title{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}

/* Main task drawer — subtask listesi (her satırda DCC butonları).
   Eski main task DCC butonları yerine, her subtask kendi disiplinine göre
   buton gösterir. Satıra tıklanınca subtask drawer açılır. */
.tm-drawer-subtasks .tm-drawer-sub-list{display:flex;flex-direction:column;gap:4px}
.tm-drawer-sub-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;transition:background .12s,border-color .12s;
}
.tm-drawer-sub-row:hover{background:var(--surface1);border-color:var(--accent2)}
.tm-drawer-sub-row-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.tm-drawer-sub-row-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-drawer-sub-row-status{
  font-size:10px;font-weight:600;color:var(--muted);
  padding:2px 7px;background:var(--surface3);border-radius:4px;
  letter-spacing:.04em;text-transform:uppercase;
}
.tm-drawer-sub-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.tm-drawer-sub-row-actions .tm-act-btn{flex:0 0 auto;min-width:34px;padding:4px 6px;font-size:11px}

/* Add Subtask butonu + dropdown menüsü (ClickUp tarzı) */
.tm-drawer-add-sub-wrap{position:relative;display:inline-block;margin-top:4px}
.tm-drawer-add-sub-btn{
  background:transparent;border:1px dashed var(--border2);
  color:var(--muted);font-size:12px;font-weight:500;
  padding:7px 14px;border-radius:6px;cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.tm-drawer-add-sub-btn:hover{background:var(--surface3);color:var(--text);border-color:var(--accent2)}
.tm-drawer-add-sub-menu{
  position:absolute;top:calc(100% + 4px);left:0;z-index:50;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);
  min-width:200px;padding:4px;
}
.tm-drawer-add-sub-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:5px;cursor:pointer;
  font-size:12.5px;color:var(--text);
}
.tm-drawer-add-sub-item:hover{background:var(--surface3)}
.tm-drawer-sub-empty{
  font-size:12px;color:var(--muted);font-style:italic;
  padding:8px 10px;background:var(--surface2);border-radius:6px;
}
/* Drawer alt action bar — sticky, drawer'ın altında her zaman erişilebilir.
   Eskiden scroll içinde flex margin-top:auto ile gidiyordu; padding küçük olduğu
   için hitbox ufak kalıyor + uzun içerikte alt scroll sonrası ulaşılması zorlaşıyordu.
   Şimdi sticky position + büyük padding ile her durumda elin altında. */
.tm-drawer-actions{
  display:flex;flex-wrap:wrap;gap:8px;
  position:sticky;bottom:-18px;
  margin:auto -20px -18px;        /* drawer body padding'ini iptal et, edge-to-edge */
  padding:12px 20px 16px;
  background:var(--surface2);
  border-top:1px solid var(--border);
  z-index:5;
}
.tm-drawer-actions .tm-act-btn{flex:1;min-width:110px;padding:9px 14px;font-size:12px}
/* Archive mode: filesystem işlemleri devre dışı görünsün (tıklandıklarında alert gösterirler) */
body.tm-archived .tm-act-btn{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
body.tm-archived .tm-act-btn:hover{background:var(--surface3)}
/* Subtask drawer — ana task drawer'ının üstüne biner, hafif offset ile task drawer arkada görünür */
.tm-subdrawer{width:480px;z-index:950;box-shadow:-12px 0 40px rgba(0,0,0,.55)}
.tm-subdrawer.open{transform:translateX(0)}
.tm-subdrawer .tm-drawer-head{background:var(--surface3)}
.tm-subdrawer .tm-sub-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.4px}
/* Task drawer açıkken subtask drawer da açılırsa task drawer'ı hafif sola kaydır ki peek effect olsun */
.tm-drawer.open.tm-dimmed{transform:translateX(-40px);filter:brightness(.7)}
/* Plan satırı/kartı "tıklanabilir" görünümü için başlık alanları */
.tm-click-area{cursor:pointer}
.tm-click-area:hover{opacity:.85}
/* Sol panel (tmSidebar) için drag-resize handle */
.tm-resizer{width:5px;cursor:col-resize;background:transparent;flex-shrink:0;position:relative;z-index:10;transition:background .15s}
.tm-resizer:hover,.tm-resizer.dragging{background:var(--accent)}
body.tm-resizing{cursor:col-resize;user-select:none}
body.tm-resizing *{user-select:none !important}
/* ── Projeler Panosu (proje seçilmediğinde) ── */
.tm-dash{padding:24px 28px;display:flex;flex-direction:column;gap:22px}
.tm-dash-head{display:flex;flex-direction:column;gap:4px}
.tm-dash-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:.2px}
.tm-dash-sub{font-size:12px;color:var(--muted)}
.tm-dash-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tm-dash-stat{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.tm-dash-stat-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.tm-dash-stat-value{font-size:26px;font-weight:700;color:var(--text);line-height:1.1}
.tm-dash-stat-foot{font-size:11px;color:var(--muted);margin-top:2px}
.tm-dash-sbar{width:100%;height:8px;border-radius:6px;background:var(--surface3);overflow:hidden;display:flex}
.tm-dash-sbar > span{height:100%;display:block}
.tm-dash-status-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.tm-dash-status-chip{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted2)}
.tm-dash-status-chip .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.tm-dash-sec-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:-8px}
.tm-dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tm-dash-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.tm-dash-card:hover{border-color:var(--accent);background:var(--surface3)}
.tm-dash-card:active{transform:translateY(1px)}
.tm-dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tm-dash-card-name{font-size:14px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tm-dash-card-pct{font-size:13px;font-weight:700;color:var(--accent)}
.tm-dash-card-meta{font-size:10px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.tm-dash-card-meta span{white-space:nowrap}
.tm-dash-card-counts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tm-dash-card-counts > span{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.tm-dash-card-counts .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.tm-dash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:12px;color:var(--muted);text-align:center}
/* All-Projects aggregate list */
.tm-ap-wrap{padding:20px 24px 40px;display:flex;flex-direction:column;gap:18px}
.tm-ap-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.tm-ap-title{font-size:20px;font-weight:700;color:var(--text)}
.tm-ap-sub{font-size:12px;color:var(--muted)}
.tm-ap-section{background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.tm-ap-proj-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface3);cursor:pointer;transition:background .12s}
.tm-ap-proj-head:hover{background:rgba(232,0,125,.08)}
.tm-ap-section:has(.tm-ap-rows-head) .tm-ap-proj-head,
.tm-ap-section:has(.tm-ap-empty) .tm-ap-proj-head{border-bottom:1px solid var(--border)}
.tm-ap-caret{background:transparent;border:none;padding:2px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;border-radius:4px;transition:background .12s,color .12s,transform .18s}
.tm-ap-caret:hover{background:rgba(245,240,232,.1);color:var(--text)}
.tm-ap-caret svg{transition:transform .18s;transform:rotate(-90deg)}
.tm-ap-caret.open svg{transform:rotate(0deg)}
.tm-ap-proj-name{font-size:13px;font-weight:700;color:var(--text);flex:1}
.tm-ap-proj-count{font-size:11px;color:var(--muted);font-weight:600}
.tm-ap-proj-open{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.3px}
.tm-ap-empty{padding:10px 14px;font-size:11px;color:var(--muted)}
.tm-ap-rows-head{display:grid;grid-template-columns:minmax(220px,1.6fr) 130px 100px 180px 110px 110px;gap:8px;padding:6px 14px;background:var(--surface);border-bottom:1px solid var(--border);font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.tm-ap-sortable{cursor:pointer;user-select:none;transition:color .12s}
.tm-ap-sortable:hover{color:var(--text)}
.tm-ap-row{display:grid;grid-template-columns:minmax(220px,1.6fr) 130px 100px 180px 110px 110px;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);transition:background .1s;font-size:12px;color:var(--text)}
.tm-ap-row:last-child{border-bottom:none}
.tm-ap-row:hover{background:rgba(245,240,232,.04)}
.tm-ap-row-click{cursor:pointer}
.tm-ap-row-click:hover{background:rgba(245,240,232,.07)}
.tm-ap-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-ap-status{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;justify-self:start;white-space:nowrap}
.tm-ap-pr{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;justify-self:start;white-space:nowrap}
.tm-ap-assignee{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-ap-assignee-empty{color:var(--muted);font-style:italic;font-weight:500}
.tm-ap-av{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.tm-ap-start{font-size:11px;color:var(--muted2);font-weight:600}
.tm-ap-due{font-size:11px;color:var(--muted2);font-weight:600}
.tm-ap-due-empty{color:var(--muted)}
.tm-ap-overdue{color:#f87171 !important}
/* All Projects v2 — proje bazlı gruplu gerçek list view (inline edit) */
.tm-ap-wrap-v2{padding:14px 16px 40px;gap:12px}
.tm-ap-section-v2{overflow:visible;background:var(--surface2);border:1px solid var(--border);border-radius:10px}
.tm-ap-section-v2 .tm-ap-proj-head{border-bottom:1px solid var(--border)}
.tm-ap-proj-mode{font-size:10px;font-weight:600;color:var(--muted2);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:2px 8px;letter-spacing:.3px;flex-shrink:0}
.tm-ap-proj-dates{font-size:10px;font-weight:600;color:var(--accent);background:rgba(232,0,125,.1);border:1px solid rgba(232,0,125,.35);border-radius:10px;padding:2px 8px;letter-spacing:.3px;flex-shrink:0;font-family:ui-monospace,monospace}
.tm-ap-proj-dates-empty{color:var(--muted);background:transparent;border-color:var(--border);font-style:italic;font-family:inherit}
.tm-ap-proj-list{overflow-x:auto;position:relative}
.tm-ap-inline-lhead{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--border)}
/* Row'lar shared .tm-lrow/.tm-lcell yapısını kullanır — ekstra override yok */
.addlib-box{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:28px;width:440px;display:flex;flex-direction:column;gap:16px}
.lib-type-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:18px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text);transition:border-color .15s,background .15s}
.lib-type-card:hover{border-color:var(--accent);background:rgba(232,0,125,.06)}
.addlib-box h3{margin:0;font-size:16px;color:var(--text)}
.addlib-box input,.addlib-box select{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 12px;font-size:13px;width:100%;box-sizing:border-box}
.addlib-box input:focus,.addlib-box select:focus{outline:none;border-color:var(--accent)}
.addlib-row{display:flex;gap:8px}
.addlib-row input{flex:1}
.addlib-box label{font-size:12px;color:var(--muted2);margin-bottom:2px;display:block}
.addlib-actions{display:flex;gap:8px;justify-content:flex-end}
.addlib-actions button{padding:8px 20px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600}
.btn-cancel{background:var(--surface);color:var(--muted2)}
.btn-save{background:var(--accent);color:#fff}
.lib-delete-btn{font-size:10px;opacity:.4;cursor:pointer;padding:1px 5px;border-radius:4px;background:transparent;border:none;color:inherit;margin-left:4px}
.lib-delete-btn:hover{opacity:1;color:#e55}

/* ── Settings modal — Pipeline Graph aktifken büyük modal ───────────────── */
/* Inline style'lar (width:880px;height:82vh) :has() ile override edilemez,
   bu yüzden !important + body width referansları gerekir. */
#settingsModal:has(.pipeline-graph-section.active) > div {
  width: 96vw !important;
  max-width: none !important;
  height: 94vh !important;
  max-height: none !important;
}

/* ── Pipeline Graph section (Settings tab embed) ─────────────────────────── */
/* .gs-section default display:none / .active display:block — biz aktifken
   flex column lazım (header + iframe-wrap dikey). Override için !important. */
.gs-section.pipeline-graph-section.active {
  display: flex !important;
  flex-direction: column;
  padding: 0;
  margin: -22px -26px;     /* .gs-content padding'ini neutral'ze et */
  height: calc(100% + 44px);
}
.pipeline-graph-section .pg-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pipeline-graph-section .pg-frame-wrap {
  flex: 1;
  position: relative;
  background: var(--surface);
  min-height: 70vh;       /* Modal flex sizing patlarsa garantili yükseklik */
}
.pipeline-graph-section .pg-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #252422;
  display: block;
}
.pipeline-graph-section .pg-fallback {
  display: none;            /* JS hata olursa flex'e çevirir */
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* ── Settings Statuses — name input + kind dropdown stilleri ───────────────
   Status row'da name span'ı always-on input'a çevirdik. Default'ta border yok
   (sade), hover'da hafif çerçeve, focus'ta accent ring.
   Kind dropdown — Outfit, kompakt; row design ile uyumlu. */
.gs-status-name-input:hover {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}
.gs-status-name-input:focus {
  border-color: var(--accent3, var(--accent)) !important;
  background: var(--surface) !important;
}
.gs-kind-select:hover {
  border-color: var(--accent3, var(--accent)) !important;
}
.gs-kind-select:focus {
  border-color: var(--accent3, var(--accent)) !important;
  background-color: var(--bg-3, var(--surface)) !important;
}
.gs-kind-select option {
  background: var(--surface);
  color: var(--text);
}

/* ── Dynamic Status toggle checkbox (Settings → Statuses) ─────────────────────
   Global shared.css'teki `input { appearance: none }` reset native checkbox'ı
   görünmez yapıyor. auth-remember ile aynı pattern: custom kutu + ::after
   checkmark. Inline width:16px/height:16px HTML'de var; burada görsel kısım.

   Global asset-manager.css'te `label { text-transform:uppercase; font-size:10px;
   font-weight:700; letter-spacing:.5px; color:var(--muted) }` tüm label'lara
   uppercase basıyor — bizim toggle bir <label> olduğu için tetikleniyor.
   Explicit reset edelim (label child div'lerinin font'unu inline veriyoruz). */
.gs-dynamic-status {
  transition: background .12s, border-color .12s;
  text-transform: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
}
.gs-dynamic-status > div, .gs-dynamic-status > div > div {
  text-transform: none !important;
  letter-spacing: normal !important;
}
.gs-dynamic-status:hover {
  border-color: var(--accent3, var(--accent)) !important;
  background: var(--surface3, var(--surface2)) !important;
}
.gs-dynamic-status input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1.5px solid rgba(245, 240, 232, .35);
  border-radius: 4px;
  background: rgba(245, 240, 232, .04);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: all .12s ease;
}
.gs-dynamic-status input[type="checkbox"]:hover {
  border-color: var(--accent);
}
.gs-dynamic-status input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.gs-dynamic-status input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}