/* ============================================================================
Tricky — Tasks / Kanban module
Ported from the CFS-ADMIN prototype (security-audited: no external calls,
no trackers, no eval). The prototype was built DARK; we render it LIGHT to
match the rest of Tricky. The base palette below themes the variable-driven
rules; the override block at the END of this file (see "LIGHT CONSISTENCY
OVERRIDES") fixes the rules that hardcoded dark-only colors so every surface
is light with readable dark text and the Tricky purple accent.
============================================================================ */
#tasksSection {
--primary: #452E5A;
--primary-hover: #36234A;
--primary-10: rgba(69,46,90,0.10);
--primary-20: rgba(69,46,90,0.18);
--surface: #F4F4F8;
--surface-hover: #EDEDF2;
--card-bg: #FFFFFF;
--border: #ECEAF1;
--text: #1C1C1C;
--text-primary: #1C1C1C;
--text-secondary: #6B7280;
--text-muted: #9A93A6;
color: var(--text);
}
.tasks-overlay{display:none;padding:20px 12px;background:var(--surface)}
.tasks-overlay.open{display:block}
.tasks-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.tasks-title-wrap{display:flex;align-items:center;gap:12px}
.tasks-back{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;color:var(--text-secondary);transition:background .15s,color .15s,border-color .15s}
.tasks-back:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:rgba(124,58,237,.35)}
.tasks-back svg{width:16px;height:16px}
.tasks-title{font-size:22px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.4px}
.tasks-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tasks-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;background:var(--primary);color:#fff;transition:opacity .2s,background .15s}
.tasks-btn:hover{opacity:.92}
.tasks-btn svg{width:14px;height:14px}
.tasks-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--text)}
.tasks-btn-ghost:hover{background:rgba(255,255,255,.04);border-color:rgba(124,58,237,.35);opacity:1}
.tasks-view-toggle{display:flex;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;padding:3px;gap:2px}
.tasks-view-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--text-secondary);border-radius:5px;transition:background .15s,color .15s}
.tasks-view-btn:hover{color:var(--text)}
.tasks-view-btn.active{background:var(--primary);color:#fff}
.tasks-view-btn svg{width:15px;height:15px}
.tasks-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.tasks-board-list{display:flex;flex-direction:column;gap:10px}
.tasks-board-card{background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,.012) 100%);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,box-shadow .2s;display:flex;flex-direction:column;position:relative}
.tasks-board-card::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(180deg,rgba(124,58,237,0) 0%,rgba(124,58,237,.18) 100%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.tasks-board-card:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.3);box-shadow:0 14px 36px rgba(0,0,0,.32),0 2px 8px rgba(124,58,237,.08)}
.tasks-board-card:hover::before{opacity:1}
/* Cover area — softer gradients, subtle radial decoration, board initials badge */
.tasks-board-cover{height:118px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:12px;overflow:hidden}
.tasks-board-cover::before{content:'';position:absolute;top:-40%;right:-15%;width:65%;height:140%;background:radial-gradient(ellipse at center,rgba(255,255,255,.14) 0%,transparent 60%);pointer-events:none}
.tasks-board-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.18) 100%);pointer-events:none}
.tasks-board-cover.dark{background:linear-gradient(135deg,#1E293B 0%,#334155 50%,#475569 100%)}
.tasks-board-cover.purple{background:linear-gradient(135deg,#5B21B6 0%,#7C3AED 50%,#A855F7 100%)}
.tasks-board-cover.blue{background:linear-gradient(135deg,#1E40AF 0%,#3B82F6 50%,#60A5FA 100%)}
.tasks-board-cover.green{background:linear-gradient(135deg,#065F46 0%,#10B981 50%,#34D399 100%)}
.tasks-board-cover.rose{background:linear-gradient(135deg,#9F1239 0%,#E11D48 50%,#FB7185 100%)}
/* Board identity badge — initials in a glass tile, anchored bottom-left of the cover */
.tasks-board-badge{position:absolute;bottom:14px;left:14px;width:44px;height:44px;border-radius:11px;background:rgba(0,0,0,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:1}
.tasks-board-cover-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.tasks-private-toggle{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:12px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10.5px;font-weight:600;color:#fff;cursor:pointer;user-select:none;border:1px solid rgba(255,255,255,.12);letter-spacing:.2px;transition:background .15s}
.tasks-private-toggle:hover{background:rgba(0,0,0,.6)}
.tasks-private-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.7);transition:all .2s}
.tasks-private-toggle.on .tasks-private-dot{background:#A78BFA;box-shadow:0 0 6px rgba(167,139,250,.6)}
.tasks-board-actions{display:flex;gap:6px;align-items:center}
.tasks-board-icon-btn{width:28px;height:28px;border-radius:7px;background:rgba(0,0,0,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.tasks-board-icon-btn:hover{background:rgba(0,0,0,.65);transform:scale(1.05)}
.tasks-board-icon-btn svg{width:13px;height:13px}
/* Body section */
.tasks-board-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.tasks-board-name{font-size:15.5px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.2px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasks-board-name-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Stat chips row — gives at-a-glance signal of board activity */
.tasks-board-stats{display:flex;gap:8px;flex-wrap:wrap}
.tasks-board-stat{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);font-size:11px;font-weight:600;color:var(--text-secondary);letter-spacing:.1px}
.tasks-board-stat svg{width:11px;height:11px;opacity:.85}
.tasks-board-stat strong{color:var(--text);font-weight:700;margin-right:2px}
.tasks-board-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}
.tasks-member-stack{display:flex;align-items:center;gap:8px;cursor:pointer;padding:2px;border-radius:6px;transition:background .15s}
.tasks-member-stack:hover{background:rgba(255,255,255,.03)}
.tasks-member-count{font-size:11.5px;color:var(--text-secondary);font-weight:500}
.tasks-avatar-stack{display:flex}
.tasks-avatar{width:24px;height:24px;border-radius:6px;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;margin-left:-6px;background:linear-gradient(135deg,#6b21a8,#7C3AED);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tasks-avatar:first-child{margin-left:0}
.tasks-avatar-more{background:rgba(255,255,255,.08);color:var(--text-secondary);font-size:10px;border-radius:6px}
/* Status pill + inline toggle — refined into a single tidy unit */
.tasks-board-status-wrap{display:inline-flex;align-items:center;gap:7px}
.tasks-board-status{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:9px;letter-spacing:.3px;text-transform:uppercase}
.tasks-board-status.active{background:rgba(52,211,153,.13);color:#6EE7B7;border:1px solid rgba(52,211,153,.2)}
.tasks-board-status.inactive{background:rgba(248,113,113,.13);color:#F87171;border:1px solid rgba(248,113,113,.2)}
/* List-view variant: horizontal layout */
.tasks-board-list .tasks-board-card{flex-direction:row;align-items:center}
.tasks-board-list .tasks-board-cover{height:72px;width:124px;flex-shrink:0;padding:8px}
.tasks-board-list .tasks-board-cover .tasks-board-badge{display:none}
.tasks-board-list .tasks-board-info{flex:1;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 18px}
.tasks-board-list .tasks-board-stats,.tasks-board-list .tasks-board-meta{padding-top:0;border-top:none}
.tasks-empty{padding:60px;text-align:center;color:var(--text-secondary);background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.08);border-radius:14px}
/* List-view table (mirrors the Candidates table style, scoped to Tasks) */
.tasks-list-wrap{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:14px;overflow:hidden}
.tasks-list-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tasks-list-table thead th{padding:14px 16px;text-align:left;font-weight:600;font-size:12.5px;color:var(--primary);white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.05);letter-spacing:.2px;background:transparent}
.tasks-list-table tbody td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;font-size:13px;color:var(--text)}
.tasks-list-table tbody tr:last-child td{border-bottom:none}
.tasks-list-table tbody tr{transition:background .15s;cursor:pointer}
.tasks-list-table tbody tr:hover{background:rgba(255,255,255,.03)}
.tasks-list-table input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.tasks-list-check-col{width:40px}
.tasks-list-actions-col{width:120px;text-align:right}
.tasks-list-name-cell{display:flex;align-items:center;gap:10px;min-width:0}
.tasks-list-cover{width:34px;height:34px;border-radius:8px;flex-shrink:0;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tasks-list-cover.dark{background:linear-gradient(135deg,#0F172A,#1E293B,#334155)}
.tasks-list-cover.purple{background:linear-gradient(135deg,#3B0764,#6B21A8,#A855F7)}
.tasks-list-cover.blue{background:linear-gradient(135deg,#1E3A8A,#3B82F6,#60A5FA)}
.tasks-list-cover.green{background:linear-gradient(135deg,#064E3B,#10B981,#34D399)}
.tasks-list-cover.rose{background:linear-gradient(135deg,#881337,#E11D48,#FB7185)}
.tasks-list-name-text{min-width:0}
.tasks-list-name{font-weight:600;color:var(--text);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.1px}
.tasks-list-id{font-size:10.5px;color:var(--text-secondary);font-family:ui-monospace,Menlo,monospace;margin-top:2px}
.tasks-list-vis{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:10px;font-size:10.5px;font-weight:600;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);color:var(--text-secondary);letter-spacing:.2px}
.tasks-list-vis::before{content:'';width:6px;height:6px;border-radius:50%;background:#64748B}
.tasks-list-vis.public::before{background:#6EE7B7}
.tasks-list-vis.public{color:#BBF7D0}
.tasks-list-members{display:inline-flex;align-items:center;gap:8px}
.tasks-list-members .tasks-avatar-stack{display:inline-flex}
.tasks-list-members .tasks-avatar{width:22px;height:22px;font-size:9px;border-width:2px;margin-left:-6px}
.tasks-list-members-count{color:var(--text);font-weight:500;font-size:12.5px}
.tasks-list-num{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.tasks-list-date{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:12.5px}
/* Active/Inactive toggle switch (mirrors the .toggle-sw shape used elsewhere, but purple-themed and self-contained) */
.tasks-list-toggle{width:34px;height:20px;border-radius:12px;cursor:pointer;position:relative;border:none;padding:0;flex-shrink:0;transition:background .2s;vertical-align:middle}
.tasks-list-toggle.on{background:var(--primary)}
.tasks-list-toggle.off{background:rgba(255,255,255,.14)}
.tasks-list-toggle::after{content:'';position:absolute;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .2s}
.tasks-list-toggle.on::after{left:16px}
.tasks-list-toggle.off::after{left:2px}
.tasks-list-kebab{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:6px;transition:background .15s,color .15s}
.tasks-list-kebab:hover{background:rgba(255,255,255,.06);color:var(--text)}
.tasks-list-kebab svg{width:14px;height:14px}
/* Footer strip at the bottom of the list view (shows board count) */
.tasks-list-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-secondary)}
.tasks-list-footer-right{display:inline-flex;align-items:center;gap:8px}
.tasks-list-footer-btn{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.tasks-list-footer-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.tasks-list-footer-btn:disabled{opacity:.35;cursor:not-allowed}
.tasks-list-footer-btn svg{width:11px;height:11px}
/* When container is in list mode, it's a block wrapper, not a flex column */
.tasks-board-list{display:block}
/* Board member-stack → clickable profile surface */
.tasks-member-stack{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 6px;border-radius:20px;border:1px solid transparent;transition:background .15s,border-color .15s}
.tasks-member-stack:hover{background:rgba(255,255,255,.04);border-color:rgba(124,58,237,.3)}
.tasks-member-count{font-size:11px;color:var(--text-secondary);font-weight:600}
/* ===== Members Modal ===== */
.tm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:320;display:none;align-items:flex-start;justify-content:center;padding:60px 20px;overflow-y:auto}
.tm-backdrop.open{display:flex}
.tm-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(520px,96vw);max-height:calc(100vh - 120px);display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}
.tm-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(124,58,237,.06),transparent)}
.tm-head-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(124,58,237,.1));color:#C4B5FD;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(124,58,237,.25);flex-shrink:0}
.tm-head-icon svg{width:17px;height:17px}
.tm-head-text{flex:1;min-width:0}
.tm-head-title{font-size:16px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.2px}
.tm-head-sub{font-size:11.5px;color:var(--text-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-close{width:32px;height:32px;border-radius:8px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.tm-close:hover{background:var(--surface-hover);color:var(--text)}
.tm-close svg{width:15px;height:15px}
.tm-search{padding:12px 20px;border-bottom:1px solid var(--border);position:relative;display:flex;align-items:center;gap:8px}
.tm-search svg{position:absolute;left:30px;width:14px;height:14px;color:var(--text-secondary);pointer-events:none}
.tm-search input{flex:1;padding:9px 12px 9px 34px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s}
.tm-search input:focus{border-color:rgba(124,58,237,.45)}
.tm-invite-btn{padding:9px 13px;border-radius:8px;border:none;background:rgba(124,58,237,.9);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;transition:background .15s}
.tm-invite-btn:hover{background:rgb(124,58,237)}
.tm-invite-btn svg{width:12px;height:12px}
.tm-body{padding:8px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.tm-body::-webkit-scrollbar{width:5px}
.tm-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.tm-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;transition:background .15s}
.tm-item:hover{background:rgba(255,255,255,.03)}
.tm-item-av{width:38px;height:38px;border-radius:8px;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.04);position:relative}
.tm-item-av::after{content:'';position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#6B7280;border:2px solid var(--card-bg)}
.tm-item-av.online::after{background:#34D399}
.tm-item-info{flex:1;min-width:0}
.tm-item-name{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tm-item-you{font-size:10px;font-weight:700;color:#A78BFA;background:rgba(124,58,237,.15);padding:1px 7px;border-radius:8px}
.tm-item-meta{font-size:11.5px;color:var(--text-secondary);margin-top:2px}
.tm-item-role{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:10px;flex-shrink:0;text-transform:uppercase;letter-spacing:.3px}
.tm-item-role.owner{background:rgba(245,158,11,.18);color:#FCD34D}
.tm-item-role.admin{background:rgba(124,58,237,.18);color:#A78BFA}
.tm-item-role.member{background:rgba(148,163,184,.15);color:#CBD5E1}
.tm-item-kebab{width:28px;height:28px;border:none;background:none;color:var(--text-secondary);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.tm-item-kebab:hover{background:var(--surface-hover);color:var(--text)}
.tm-item-kebab.active{background:rgba(124,58,237,.18);color:#C4B5FD}
.tm-item-kebab svg{width:14px;height:14px}
.tm-empty{padding:30px 20px;text-align:center;color:var(--text-secondary);font-size:13px}
/* Member Action Menu — appears next to the clicked kebab */
.tm-member-menu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);min-width:220px;padding:6px 0;z-index:360;opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;transition:opacity .15s,transform .15s}
.tm-member-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.tm-member-menu-head{padding:10px 14px 6px;font-size:10.5px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.tm-member-menu-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 0}
.tm-member-menu-item{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap;justify-content:space-between;transition:background .12s}
.tm-member-menu-item:hover{background:var(--surface-hover)}
.tm-member-menu-item.danger{color:#F87171}
.tm-member-menu-item.danger:hover{background:rgba(231,0,11,.1)}
.tm-member-menu-item.danger svg{color:#F87171}
.tm-member-menu-item.has-sub{position:relative}
.tm-member-menu-item-inner{display:flex;align-items:center;gap:10px;min-width:0}
.tm-member-menu-item-inner svg{width:13px;height:13px;flex-shrink:0}
.tm-member-menu-chev{width:10px;height:10px;opacity:.55;flex-shrink:0}
/* Role submenu */
.tm-role-submenu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);min-width:180px;padding:6px 0;z-index:361;opacity:0;transform:translateX(-4px) scale(.97);pointer-events:none;transition:opacity .15s,transform .15s}
.tm-role-submenu.open{opacity:1;transform:translateX(0) scale(1);pointer-events:all}
.tm-role-submenu-item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;font-size:13px;cursor:pointer;color:var(--text);gap:10px}
.tm-role-submenu-item:hover{background:var(--surface-hover)}
.tm-role-submenu-item.active{color:#C4B5FD}
.tm-role-submenu-item .tm-role-check{width:13px;height:13px;color:#A78BFA;opacity:0}
.tm-role-submenu-item.active .tm-role-check{opacity:1}
.tm-role-submenu-item .tm-role-label{display:flex;align-items:center;gap:10px}
.tm-role-submenu-item .tm-role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tm-role-submenu-item .tm-role-dot.owner{background:#FCD34D}
.tm-role-submenu-item .tm-role-dot.admin{background:#C4B5FD}
.tm-role-submenu-item .tm-role-dot.member{background:#94A3B8}
/* ===== Share Modal ===== */
.ts-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:320;display:none;align-items:flex-start;justify-content:center;padding:80px 20px;overflow-y:auto}
.ts-backdrop.open{display:flex}
.ts-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(460px,96vw);display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}
.ts-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(124,58,237,.06),transparent)}
.ts-head-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(124,58,237,.1));color:#C4B5FD;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(124,58,237,.25);flex-shrink:0}
.ts-head-icon svg{width:17px;height:17px}
.ts-head-text{flex:1;min-width:0}
.ts-head-title{font-size:16px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.2px}
.ts-head-sub{font-size:11.5px;color:var(--text-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px}
.ts-section-label{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.ts-link-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:6px 6px 6px 12px}
.ts-link-row input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:12.5px;color:var(--text);font-family:inherit;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.ts-link-row input:focus{outline:none}
.ts-copy-btn{padding:7px 14px;border-radius:6px;border:none;background:rgba(124,58,237,.9);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;transition:background .15s}
.ts-copy-btn:hover{background:rgb(124,58,237)}
.ts-copy-btn.copied{background:#059669}
.ts-copy-btn svg{width:11px;height:11px}
.ts-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ts-platform{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--text);font-size:11px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.ts-platform:hover{background:var(--surface-hover);border-color:rgba(124,58,237,.35);transform:translateY(-1px)}
.ts-platform-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.ts-platform-icon svg{width:18px;height:18px}
.ts-platform.whatsapp .ts-platform-icon{background:#25D366}
.ts-platform.telegram .ts-platform-icon{background:#229ED9}
.ts-platform.twitter .ts-platform-icon{background:#1DA1F2}
.ts-platform.linkedin .ts-platform-icon{background:#0A66C2}
.ts-platform.email .ts-platform-icon{background:linear-gradient(135deg,#EF4444,#B91C1C)}
.ts-platform.slack .ts-platform-icon{background:#4A154B}
.ts-platform.facebook .ts-platform-icon{background:#1877F2}
.ts-platform.more .ts-platform-icon{background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.ts-access{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:9px}
.ts-access-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.ts-access-icon{width:28px;height:28px;border-radius:8px;background:rgba(124,58,237,.15);color:#A78BFA;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-access-icon svg{width:14px;height:14px}
.ts-access-title{font-size:12.5px;color:var(--text);font-weight:600}
.ts-access-sub{font-size:10.5px;color:var(--text-secondary);margin-top:1px}
.ts-access-select{padding:6px 10px;border-radius:6px;background:var(--card-bg);border:1px solid var(--border);color:var(--text);font-size:12px;font-family:inherit;cursor:pointer;outline:none}
.ts-access-select:focus{border-color:rgba(124,58,237,.45)}
/* ===== Themed Confirm Modal ===== */
.tc-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:340;display:none;align-items:center;justify-content:center;padding:24px}
.tc-backdrop.open{display:flex}
.tc-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(400px,96vw);box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}
.tc-body{padding:22px 22px 8px;display:flex;gap:14px;align-items:flex-start}
.tc-icon{width:40px;height:40px;border-radius:10px;background:rgba(239,68,68,.15);color:#FCA5A5;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tc-icon svg{width:18px;height:18px}
.tc-text{flex:1;min-width:0}
.tc-title{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px;letter-spacing:-.1px}
.tc-msg{font-size:12.5px;color:var(--text-secondary);line-height:1.55}
.tc-msg strong{color:var(--text);font-weight:600}
.tc-actions{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px 20px}
.tc-btn{padding:9px 16px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.tc-btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.tc-btn.ghost:hover{background:var(--surface-hover);color:var(--text)}
.tc-btn.danger{background:#DC2626;color:#fff}
.tc-btn.danger:hover{background:#B91C1C}
/* Create/Edit Board Modal */
.tasks-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;align-items:center;justify-content:center;padding:24px}
.tasks-modal-backdrop.open{display:flex}
/* Board Detail "Add Task" / "Add Sub Task" modal needs to sit above the Task Detail modal (td-overlay is z-index:300) so the Sub-Task flow visibly opens on top of the Task Detail page */
#tbdTaskModal{z-index:330}
.tasks-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tasks-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.tasks-modal-title{font-size:18px;font-weight:700;margin:0}
.tasks-modal-close{width:28px;height:28px;border-radius:6px;background:transparent;border:none;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}
.tasks-modal-close:hover{background:var(--surface-hover);color:var(--text)}
.tasks-modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.tasks-field{display:flex;flex-direction:column;gap:6px}
.tasks-label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}
.tasks-input,.tasks-select{height:40px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:13px;color:var(--text);background:var(--surface);outline:none;font-family:inherit}
.tasks-input:focus,.tasks-select:focus{border-color:var(--primary)}
.tasks-cover-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tasks-cover-option{height:50px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .15s}
.tasks-cover-option:hover{transform:scale(1.05)}
.tasks-cover-option.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)}
.tasks-modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
.tasks-kebab-menu{position:fixed;background:var(--card-bg);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5);border:1px solid var(--border);z-index:999;min-width:180px;padding:6px 0;display:none}
.tasks-kebab-menu.open{display:block}
.tasks-kebab-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;cursor:pointer;color:var(--text)}
.tasks-kebab-item:hover{background:var(--surface-hover)}
.tasks-kebab-item svg{width:14px;height:14px;opacity:.7}
.tasks-kebab-item.danger{color:#F87171;border-top:1px solid var(--border);margin-top:4px;padding-top:12px}
/* ===== Task Report Modal — Refined Dashboard ===== */
.tr-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(2px);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.tr-backdrop.open{display:flex}
.tr-modal{background:var(--card-bg);border:none;border-radius:0;width:100vw;height:100vh;max-height:100vh;display:flex;flex-direction:column;box-shadow:none;overflow:hidden}
.tr-backdrop{padding:0;align-items:stretch;justify-content:stretch}
/* Header */
.tr-head{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:linear-gradient(180deg,rgba(124,58,237,.06),transparent)}
.tr-head-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tr-head-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(124,58,237,.1));color:#C4B5FD;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(124,58,237,.25)}
.tr-head-icon svg{width:19px;height:19px}
.tr-head-title{font-size:18px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.2px}
.tr-head-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}
.tr-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Filter (user picker) */
.tr-filter{position:relative}
.tr-filter-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.tr-filter-btn:hover{border-color:rgba(124,58,237,.45);background:var(--surface-hover)}
.tr-filter-btn svg{width:12px;height:12px;opacity:.7}
.tr-filter-menu{display:none;position:absolute;top:100%;right:0;margin-top:6px;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.5);min-width:220px;max-height:320px;overflow-y:auto;z-index:10;padding:6px}
.tr-filter-menu.open{display:block}
.tr-filter-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s}
.tr-filter-opt:hover{background:var(--surface-hover)}
.tr-filter-opt.active{background:rgba(124,58,237,.15);color:#A78BFA}
.tr-filter-mini{width:24px;height:24px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.tr-filter-mini.a{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.tr-filter-mini.b{background:linear-gradient(135deg,#10B981,#059669)}
.tr-filter-mini.c{background:linear-gradient(135deg,#F59E0B,#B45309)}
.tr-filter-mini.d{background:linear-gradient(135deg,#EC4899,#BE185D)}
.tr-close{width:34px;height:34px;border-radius:8px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.tr-close:hover{background:var(--surface-hover);color:var(--text)}
.tr-close svg{width:16px;height:16px}
/* ===== Manual reports UI ===== */
/* Header submit button */
.tr-submit-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:none;background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(124,58,237,.28);transition:transform .15s,box-shadow .15s}
.tr-submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,58,237,.4)}
.tr-submit-btn svg{width:13px;height:13px}
/* Toolbar — search + status tabs */
.tr-toolbar{display:flex;align-items:center;gap:14px;padding:12px 24px 14px;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap;background:transparent}
.tr-search{position:relative;flex:1;min-width:240px;max-width:480px}
.tr-search > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-secondary);pointer-events:none}
.tr-search input{width:100%;height:38px;padding:0 14px 0 36px;background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:9px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.tr-search input::placeholder{color:var(--text-secondary);opacity:.7}
.tr-search input:focus{border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.tr-status-tabs{display:flex;gap:2px;padding:0;background:transparent;border:none;border-radius:0}
.tr-status-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:none;background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:600;cursor:pointer;border-radius:7px;font-family:inherit;transition:background .15s,color .15s;letter-spacing:.1px}
.tr-status-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.tr-status-tab.active{background:rgba(124,58,237,.14);color:#C4B5FD}
.tr-status-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:17px;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.06);font-size:10.5px;font-weight:700;color:var(--text-secondary);letter-spacing:.2px}
.tr-status-tab.active .tr-status-tab-count{background:rgba(124,58,237,.25);color:#E9D5FF}
.tr-tab-icon{width:11px;height:11px;flex-shrink:0;opacity:.85}
/* History view: week-group sections with section heading */
.tr-hist-group{display:flex;flex-direction:column}
.tr-hist-group + .tr-hist-group{margin-top:18px}
.tr-hist-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:0;position:sticky;top:-6px;background:linear-gradient(180deg,var(--card-bg) 0%,var(--card-bg) 60%,transparent 100%);z-index:1}
.tr-hist-group-label{font-size:11.5px;font-weight:700;color:#A78BFA;text-transform:uppercase;letter-spacing:.6px}
.tr-hist-group-count{font-size:11px;color:var(--text-secondary);font-weight:600}
.tr-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tr-status-dot.submitted{background:#34D399;box-shadow:0 0 6px rgba(52,211,153,.5)}
.tr-status-dot.missing{background:#F87171;box-shadow:0 0 6px rgba(248,113,113,.5)}
/* Body — list of report rows */
.tr-body{padding:6px 24px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
/* List rows — flat / inbox style with subtle hairline dividers (no boxy cards) */
.tr-row{display:flex;align-items:flex-start;gap:14px;padding:14px 6px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.05);border-radius:0;cursor:pointer;transition:background .15s}
.tr-row:hover{background:rgba(255,255,255,.025)}
.tr-row:last-child{border-bottom:none}
.tr-row-missing{background:transparent;cursor:default;border-bottom:1px solid rgba(255,255,255,.05)}
.tr-row-missing:hover{background:rgba(248,113,113,.04)}
.tr-row-av{width:38px;height:38px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;letter-spacing:.4px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.tr-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tr-row-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-row-role{color:var(--text-secondary);font-weight:500;font-size:12.5px}
.tr-row-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-secondary);flex-wrap:wrap}
.tr-row-week{color:#C4B5FD;font-weight:600}
.tr-row-time{color:var(--text);font-weight:600}
.tr-row-when{font-style:italic}
.tr-row-sep{opacity:.4}
.tr-row-missing-text{color:#F87171;font-style:italic}
.tr-row-att{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--text-secondary)}
.tr-row-att svg{width:11px;height:11px}
.tr-row-preview{font-size:12.5px;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tr-row-status{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;align-self:flex-start;margin-top:2px}
.tr-row-status.submitted{background:rgba(52,211,153,.12);color:#6EE7B7;border:1px solid rgba(52,211,153,.22)}
.tr-row-status.missing{background:rgba(248,113,113,.12);color:#F87171;border:1px solid rgba(248,113,113,.22)}
.tr-row-action{padding:6px 12px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0;align-self:flex-start;margin-top:2px;transition:background .15s,border-color .15s,color .15s}
.tr-row-action:hover{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.4);color:#C4B5FD}
/* Empty state */
.tr-empty{padding:60px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text-secondary)}
.tr-empty-icon{width:64px;height:64px;border-radius:14px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);color:#A78BFA;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tr-empty-icon svg{width:30px;height:30px}
.tr-empty-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.tr-empty-sub{font-size:12.5px;line-height:1.5;max-width:300px}
/* ===== Submit form modal (layered over trBackdrop) ===== */
.trf-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(2px);z-index:310;display:none;align-items:flex-start;justify-content:center;padding:60px 20px;overflow-y:auto}
.trf-backdrop.open{display:flex}
#trvBackdrop{padding:30px 20px}
.trf-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(820px,96vw);max-height:calc(100vh - 80px);display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden}
/* View-detail modal — bigger reading screen than the submit form */
#trvBackdrop .trf-modal{width:min(1200px,92vw);max-height:calc(100vh - 60px)}
.trf-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(124,58,237,.05),transparent)}
.trf-head-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.trf-head-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(124,58,237,.1));color:#C4B5FD;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(124,58,237,.25)}
.trf-head-icon svg{width:18px;height:18px}
.trf-head-title{font-size:16px;font-weight:700;color:var(--text);margin:0}
.trf-head-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}
.trf-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.trf-row{display:flex;flex-direction:column;gap:6px}
.trf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trf-row-2 > div{display:flex;flex-direction:column;gap:6px}
.trf-label{font-size:11.5px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}
.trf-label-hint{text-transform:none;font-weight:500;opacity:.7;letter-spacing:0}
.trf-input{width:100%;height:38px;padding:0 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.trf-input:focus{border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.trf-textarea{height:auto;padding:10px 12px;resize:vertical;min-height:120px;line-height:1.5}
/* ===== Rich text editor (Submit Report → "What did you do this week?") ===== */
.trf-editor{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.trf-editor:focus-within{border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.trf-editor-toolbar{display:flex;align-items:center;gap:3px;padding:6px 8px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.18);flex-wrap:wrap}
.trf-tb-btn{width:28px;height:28px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;flex-shrink:0;transition:background .12s,color .12s,border-color .12s;padding:0;position:relative}
.trf-tb-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}
.trf-tb-btn:active{background:rgba(124,58,237,.18);color:#C4B5FD}
.trf-tb-btn.active{background:rgba(124,58,237,.18);color:#C4B5FD;border-color:rgba(124,58,237,.3)}
.trf-tb-btn svg{width:14px;height:14px}
.trf-tb-sep{width:1px;height:18px;background:rgba(255,255,255,.08);margin:0 4px;flex-shrink:0}
.trf-tb-select{height:28px;padding:0 24px 0 8px;font-size:12px;font-weight:500;color:var(--text);background:transparent;border:1px solid transparent;border-radius:6px;font-family:inherit;cursor:pointer;color-scheme:dark;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 6px center;flex-shrink:0;outline:none;transition:background-color .12s,border-color .12s}
.trf-tb-select:hover{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.trf-tb-select:focus{border-color:rgba(124,58,237,.4)}
.trf-tb-select option{background:#1a1a1f;color:var(--text)}
.trf-tb-num{width:38px;height:28px;text-align:center;background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--text);font-size:12.5px;font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums;outline:none;transition:border-color .12s,background-color .12s}
.trf-tb-num:hover{background-color:rgba(255,255,255,.04)}
.trf-tb-num:focus{border-color:rgba(124,58,237,.4);background-color:rgba(124,58,237,.06)}
.trf-tb-fontsize{width:24px}
/* Color picker buttons — show a color bar at the bottom of the icon */
.trf-tb-color{position:relative;cursor:pointer;flex-direction:column;gap:0;padding-bottom:3px}
.trf-tb-color svg{margin-bottom:1px}
.trf-tb-color-bar{position:absolute;bottom:4px;left:6px;right:6px;height:3px;border-radius:2px;background:#A78BFA;pointer-events:none}
.trf-tb-color-input{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0;width:100%;height:100%}
/* Editor surface */
.trf-editor-surface{min-height:180px;max-height:380px;padding:12px 14px;overflow-y:auto;font-size:14px;line-height:1.6;color:var(--text);outline:none;font-family:inherit;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.trf-editor-surface::-webkit-scrollbar{width:6px}
.trf-editor-surface::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
.trf-editor-surface:empty::before{content:attr(data-placeholder);color:var(--text-secondary);opacity:.6;pointer-events:none}
.trf-editor-surface h1{font-size:22px;font-weight:700;margin:.4em 0 .3em;letter-spacing:-.3px}
.trf-editor-surface h2{font-size:18px;font-weight:700;margin:.4em 0 .3em}
.trf-editor-surface h3{font-size:15.5px;font-weight:700;margin:.3em 0 .2em}
.trf-editor-surface p{margin:.3em 0}
.trf-editor-surface blockquote{margin:.5em 0;padding:6px 14px;border-left:3px solid #7C3AED;color:var(--text-secondary);background:rgba(124,58,237,.06);border-radius:0 6px 6px 0}
.trf-editor-surface pre{margin:.5em 0;padding:10px 14px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre-wrap}
.trf-editor-surface ul,.trf-editor-surface ol{margin:.4em 0;padding-left:1.6em}
.trf-editor-surface li{margin:.2em 0}
.trf-editor-surface a{color:#A78BFA;text-decoration:underline;text-underline-offset:2px}
.trf-editor-surface a:hover{color:#C4B5FD}
.trf-editor-surface img{max-width:100%;border-radius:8px;margin:.4em 0}
.trf-editor-surface ::selection{background:rgba(124,58,237,.4)}
.trf-editor-invalid{outline:2px solid #F87171;outline-offset:-2px}
select.trf-input{color-scheme:dark;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
select.trf-input option{background:#1a1a1f;color:var(--text);padding:8px}
select.trf-input option:checked,select.trf-input option:hover{background:#7C3AED;color:#fff}
.trf-attachments{display:flex;flex-direction:column;gap:8px}
.trf-attach-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:rgba(124,58,237,.06);border:1px dashed rgba(124,58,237,.3);border-radius:8px;color:#C4B5FD;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.trf-attach-btn:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.5)}
.trf-attach-btn svg{width:13px;height:13px}
.trf-attach-list{display:flex;flex-direction:column;gap:6px}
.trf-attach-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--text)}
.trf-attach-chip svg{width:13px;height:13px;color:#C4B5FD;flex-shrink:0}
.trf-attach-chip > span:first-of-type{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trf-attach-size{font-size:10.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.trf-attach-chip button{width:20px;height:20px;border-radius:5px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.trf-attach-chip button:hover{background:rgba(248,113,113,.12);color:#F87171}
.trf-attach-chip button svg{width:10px;height:10px}
.trf-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:rgba(0,0,0,.12)}
.tr-btn-ghost{padding:9px 16px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.tr-btn-ghost:hover{background:var(--surface-hover);border-color:rgba(255,255,255,.2)}
.tr-btn-primary{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;border:none;background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(124,58,237,.28);transition:transform .15s,box-shadow .15s}
.tr-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,58,237,.4)}
.tr-btn-primary svg{width:13px;height:13px}
/* ===== View detail (read-only) — flat / less-boxy layout ===== */
.trv-meta-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:6px 0 18px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:18px}
.trv-meta-cell{padding:0 18px;border-left:1px solid rgba(255,255,255,.05)}
.trv-meta-cell:first-child{border-left:none;padding-left:0}
.trv-meta-label{font-size:10.5px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.trv-meta-value{font-size:14px;font-weight:600;color:var(--text);line-height:1.35}
.trv-section{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.trv-section:last-child{margin-bottom:0}
.trv-section-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}
.trv-section-body{padding:0;background:transparent;border:none;border-radius:0;font-size:14.5px;line-height:1.7;color:var(--text)}
.trv-section-body.trv-rich h1{font-size:22px;font-weight:700;margin:.4em 0 .3em;color:var(--text);letter-spacing:-.3px}
.trv-section-body.trv-rich h2{font-size:18px;font-weight:700;margin:.4em 0 .3em;color:var(--text)}
.trv-section-body.trv-rich h3{font-size:15.5px;font-weight:700;margin:.3em 0 .2em;color:var(--text)}
.trv-section-body.trv-rich p{margin:.4em 0}
.trv-section-body.trv-rich blockquote{margin:.5em 0;padding:6px 14px;border-left:3px solid #7C3AED;color:var(--text-secondary);background:rgba(124,58,237,.06);border-radius:0 6px 6px 0}
.trv-section-body.trv-rich pre{margin:.5em 0;padding:10px 14px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre-wrap}
.trv-section-body.trv-rich ul,.trv-section-body.trv-rich ol{margin:.4em 0;padding-left:1.6em}
.trv-section-body.trv-rich li{margin:.2em 0}
.trv-section-body.trv-rich a{color:#A78BFA;text-decoration:underline;text-underline-offset:2px}
.trv-section-body.trv-rich a:hover{color:#C4B5FD}
.trv-section-body.trv-rich img{max-width:100%;border-radius:8px;margin:.4em 0}
.trv-att-list{display:flex;flex-direction:column;gap:0}
.trv-att{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;cursor:pointer;transition:padding-left .15s,color .15s}
.trv-att:last-child{border-bottom:none}
.trv-att:hover{padding-left:6px;color:#C4B5FD}
.trv-att svg{width:15px;height:15px;color:#C4B5FD;flex-shrink:0}
.trv-att-name{flex:1;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trv-att:hover .trv-att-name{color:#C4B5FD}
.trv-att-size{font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
/* Wider modal also gets more body padding for reading comfort */
#trvBackdrop .trf-body{padding:22px 28px 26px}
#trvBackdrop .trf-head{padding:18px 28px}
/* Body & section titles */
.tr-body::-webkit-scrollbar{width:5px}
.tr-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.tr-section-label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tr-section-label-right{font-size:11px;color:var(--text-secondary);font-weight:500;text-transform:none;letter-spacing:0}
/* KPI cards */
.tr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:720px){.tr-kpis{grid-template-columns:repeat(2,1fr)}}
.tr-kpi{position:relative;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;transition:background .2s,border-color .2s;overflow:hidden}
.tr-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,#A78BFA);opacity:.7}
.tr-kpi.total{--accent:#A78BFA}
.tr-kpi.progress{--accent:#60A5FA}
.tr-kpi.done{--accent:#34D399}
.tr-kpi.overdue{--accent:#F87171}
.tr-kpi:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
.tr-kpi-top{display:flex;align-items:center;gap:10px}
.tr-kpi-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tr-kpi-icon svg{width:15px;height:15px}
.tr-kpi.total .tr-kpi-icon{background:rgba(167,139,250,.15);color:#C4B5FD}
.tr-kpi.progress .tr-kpi-icon{background:rgba(96,165,250,.15);color:#93C5FD}
.tr-kpi.done .tr-kpi-icon{background:rgba(52,211,153,.15);color:#6EE7B7}
.tr-kpi.overdue .tr-kpi-icon{background:rgba(248,113,113,.15);color:#FCA5A5}
.tr-kpi-label{font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tr-kpi-value{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.6px;line-height:1.05;font-variant-numeric:tabular-nums}
.tr-kpi-foot{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-secondary);min-height:18px}
.tr-kpi-trend{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.2px}
.tr-kpi-trend svg{width:9px;height:9px}
.tr-kpi-trend.up{background:rgba(52,211,153,.15);color:#6EE7B7}
.tr-kpi-trend.down{background:rgba(248,113,113,.15);color:#FCA5A5}
.tr-kpi-trend.neutral{background:rgba(148,163,184,.12);color:#CBD5E1}
/* Two-column overview + breakdown */
.tr-grid-2{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
@media (max-width:820px){.tr-grid-2{grid-template-columns:1fr}}
.tr-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:18px}
.tr-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:10px}
.tr-card-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.1px}
.tr-card-sub{font-size:11px;color:var(--text-secondary);margin-top:2px}
.tr-card-tag{font-size:10px;font-weight:700;color:#6EE7B7;background:rgba(52,211,153,.15);padding:3px 8px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase}
.tr-card-tag.warn{color:#FCD34D;background:rgba(245,158,11,.15)}
/* Donut + stats */
.tr-overall{display:flex;align-items:center;gap:22px}
.tr-ring{position:relative;width:144px;height:144px;flex-shrink:0}
.tr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tr-ring-bg{stroke:rgba(255,255,255,.06);fill:none;stroke-width:11}
.tr-ring-fg{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .8s cubic-bezier(.22,1,.36,1)}
.tr-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tr-ring-pct{font-size:30px;font-weight:700;color:var(--text);letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.tr-ring-sub{font-size:10px;color:var(--text-secondary);margin-top:4px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.tr-overall-detail{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.tr-overall-stat{display:flex;align-items:center;gap:10px;font-size:13px}
.tr-overall-stat-swatch{width:10px;height:10px;border-radius:3px;background:var(--c,#A78BFA);flex-shrink:0}
.tr-overall-stat-name{color:var(--text-secondary);flex:1}
.tr-overall-stat-value{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.tr-overall-stat-pct{color:var(--text-secondary);font-size:11px;font-weight:600;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
/* Stacked single-line distribution bar */
.tr-stack{display:flex;flex-direction:column;gap:10px}
.tr-stack-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.04)}
.tr-stack-seg{height:100%;transition:flex-grow .6s;min-width:0}
.tr-stack-seg + .tr-stack-seg{margin-left:2px}
.tr-stack-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}
.tr-stack-legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
.tr-stack-legend-swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.tr-stack-legend-name{color:var(--text-secondary);flex:1}
.tr-stack-legend-val{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
/* Insights — horizontal strip */
.tr-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.05);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
@media (max-width:720px){.tr-insights{grid-template-columns:1fr}}
.tr-insight{background:rgba(255,255,255,.02);padding:16px 18px;display:flex;gap:12px;align-items:center;transition:background .2s}
.tr-insight:hover{background:rgba(255,255,255,.04)}
.tr-insight-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tr-insight-icon svg{width:16px;height:16px}
.tr-insight.top .tr-insight-icon{background:rgba(52,211,153,.15);color:#6EE7B7}
.tr-insight.risk .tr-insight-icon{background:rgba(248,113,113,.15);color:#FCA5A5}
.tr-insight.team .tr-insight-icon{background:rgba(96,165,250,.15);color:#93C5FD}
.tr-insight-body{min-width:0;flex:1}
.tr-insight-title{font-size:10px;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px}
.tr-insight-val{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-insight-sub{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Team performance table */
.tr-table-wrap{overflow-x:auto;margin:0 -6px;scrollbar-width:thin}
.tr-table-wrap::-webkit-scrollbar{height:5px}
.tr-table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.tr-table{width:100%;border-collapse:collapse;font-size:13px;min-width:780px}
.tr-table th{text-align:left;padding:10px 14px;font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap;background:rgba(255,255,255,.015)}
.tr-table th:first-child{border-top-left-radius:8px}
.tr-table th:last-child{border-top-right-radius:8px}
.tr-table th.num{text-align:right}
.tr-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);vertical-align:middle}
.tr-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tr-table tbody tr:last-child td{border-bottom:none}
.tr-table tbody tr{transition:background .15s}
.tr-table tbody tr:hover{background:rgba(255,255,255,.025)}
.tr-user-cell{display:flex;align-items:center;gap:10px;min-width:180px}
.tr-user-av{width:32px;height:32px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#7C3AED,#5B21B6);box-shadow:0 0 0 2px rgba(255,255,255,.04)}
.tr-user-av.a{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.tr-user-av.b{background:linear-gradient(135deg,#10B981,#059669)}
.tr-user-av.c{background:linear-gradient(135deg,#F59E0B,#B45309)}
.tr-user-av.d{background:linear-gradient(135deg,#EC4899,#BE185D)}
.tr-user-info{min-width:0}
.tr-user-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.tr-user-role{font-size:11px;color:var(--text-secondary);margin-top:1px}
/* Compact breakdown cell: mini stacked bar + counts tooltip-friendly */
.tr-breakdown{display:flex;flex-direction:column;gap:5px;min-width:170px}
.tr-breakdown-bar{display:flex;height:6px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.05)}
.tr-breakdown-seg{height:100%;transition:flex-grow .5s}
.tr-breakdown-seg + .tr-breakdown-seg{margin-left:1.5px}
.tr-breakdown-counts{display:flex;gap:10px;font-size:10px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.tr-breakdown-count{display:inline-flex;align-items:center;gap:4px}
.tr-breakdown-count::before{content:'';width:6px;height:6px;border-radius:2px;background:var(--c)}
/* Progress column */
.tr-progress{display:flex;align-items:center;gap:10px;min-width:140px}
.tr-progress-track{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.tr-progress-fill{height:100%;background:linear-gradient(90deg,#7C3AED,#A78BFA);border-radius:5px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.tr-progress-fill.warn{background:linear-gradient(90deg,#F59E0B,#FCD34D)}
.tr-progress-fill.low{background:linear-gradient(90deg,#EF4444,#FCA5A5)}
.tr-progress-pct{font-size:12px;font-weight:700;color:var(--text);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
/* Status pill */
.tr-status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
.tr-status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px rgba(255,255,255,0)}
.tr-status-pill.active{background:rgba(52,211,153,.15);color:#6EE7B7}
.tr-status-pill.active::before{animation:tr-pulse 2s infinite}
@keyframes tr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(110,231,183,.5)}50%{box-shadow:0 0 0 4px rgba(110,231,183,0)}}
.tr-status-pill.busy{background:rgba(96,165,250,.15);color:#93C5FD}
.tr-status-pill.idle{background:rgba(245,158,11,.15);color:#FCD34D}
.tr-status-pill.offline{background:rgba(148,163,184,.15);color:#CBD5E1}
/* Activity feed */
.tr-activity-list{display:flex;flex-direction:column;gap:2px}
.tr-activity{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;transition:background .15s}
.tr-activity:hover{background:rgba(255,255,255,.025)}
.tr-activity-av{width:28px;height:28px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.tr-activity-av.a{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.tr-activity-av.b{background:linear-gradient(135deg,#10B981,#059669)}
.tr-activity-av.c{background:linear-gradient(135deg,#F59E0B,#B45309)}
.tr-activity-av.d{background:linear-gradient(135deg,#EC4899,#BE185D)}
.tr-activity-body{flex:1;min-width:0}
.tr-activity-text{font-size:12.5px;color:var(--text-secondary);line-height:1.55}
.tr-activity-text strong{color:var(--text);font-weight:600}
.tr-activity-text em{font-style:normal;color:#A78BFA;font-weight:600}
.tr-activity-meta{font-size:10.5px;color:var(--text-secondary);opacity:.7;margin-top:3px;display:flex;align-items:center;gap:6px}
.tr-activity-meta-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
/* ===== Task History Modal ===== */
.th-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.th-backdrop.open{display:flex}
.th-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(880px,96vw);max-height:calc(100vh - 80px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.th-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.th-head-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.th-head-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(124,58,237,.1));color:#A78BFA;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.th-head-icon svg{width:18px;height:18px}
.th-head-title{font-size:17px;font-weight:700;color:var(--text);margin:0}
.th-head-sub{font-size:12px;color:var(--text-secondary);margin-top:2px;display:inline-flex;align-items:center;gap:6px}
.th-head-sub-tag{background:rgba(124,58,237,.18);color:#A78BFA;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.th-close{width:32px;height:32px;border-radius:8px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.th-close:hover{background:var(--surface-hover);color:var(--text)}
.th-close svg{width:16px;height:16px}
.th-toolbar{display:flex;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.th-search{flex:1;min-width:200px;position:relative;display:flex;align-items:center}
.th-search svg{position:absolute;left:10px;width:14px;height:14px;color:var(--text-secondary);pointer-events:none}
.th-search input{width:100%;padding:8px 10px 8px 32px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s}
.th-search input:focus{border-color:rgba(124,58,237,.45)}
.th-board-filter{position:relative}
.th-board-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s;max-width:220px}
.th-board-btn:hover{border-color:rgba(124,58,237,.45)}
.th-board-btn svg{width:12px;height:12px;opacity:.7;flex-shrink:0}
.th-board-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-board-menu{display:none;position:absolute;top:100%;right:0;margin-top:6px;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.5);min-width:220px;max-height:300px;overflow-y:auto;z-index:10;padding:6px}
.th-board-menu.open{display:block}
.th-board-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s}
.th-board-opt:hover{background:var(--surface-hover)}
.th-board-opt.active{background:rgba(124,58,237,.15);color:#A78BFA}
.th-chips{display:flex;gap:6px;padding:10px 20px 4px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.th-chip{padding:5px 10px;border-radius:14px;background:var(--surface);border:1px solid transparent;color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.th-chip:hover{color:var(--text)}
.th-chip.active{background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.35);color:#A78BFA}
.th-chip-count{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:8px;font-size:10px;font-weight:700}
.th-chip.active .th-chip-count{background:rgba(124,58,237,.28)}
.th-body{padding:10px 20px 20px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.th-body::-webkit-scrollbar{width:5px}
.th-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.th-day{margin-top:14px}
.th-day-label{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;padding:6px 4px;position:sticky;top:0;background:var(--card-bg);z-index:1}
.th-entry{display:flex;gap:12px;padding:10px 12px;border-radius:10px;transition:background .15s;position:relative}
.th-entry:hover{background:rgba(255,255,255,.025)}
.th-entry-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.th-entry-icon svg{width:14px;height:14px}
.th-entry-icon.create{background:rgba(16,185,129,.18);color:#6EE7B7}
.th-entry-icon.update{background:rgba(59,130,246,.18);color:#93C5FD}
.th-entry-icon.comment{background:rgba(236,72,153,.18);color:#F9A8D4}
.th-entry-icon.upload{background:rgba(245,158,11,.18);color:#FCD34D}
.th-entry-icon.delete{background:rgba(239,68,68,.18);color:#FCA5A5}
.th-entry-icon.assign{background:rgba(124,58,237,.18);color:#A78BFA}
.th-entry-body{flex:1;min-width:0}
.th-entry-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.th-entry-actor{display:inline-flex;align-items:center;gap:6px}
.th-entry-av{width:20px;height:20px;border-radius:50%;color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.th-entry-av.a{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.th-entry-av.b{background:linear-gradient(135deg,#10B981,#059669)}
.th-entry-av.c{background:linear-gradient(135deg,#F59E0B,#B45309)}
.th-entry-av.d{background:linear-gradient(135deg,#EC4899,#BE185D)}
.th-entry-name{font-size:13px;font-weight:700;color:var(--text)}
.th-entry-role{font-size:11px;color:var(--text-secondary);padding:1px 6px;border-radius:8px;background:rgba(255,255,255,.05)}
.th-entry-role.admin{background:rgba(124,58,237,.15);color:#A78BFA}
.th-entry-text{font-size:12px;color:var(--text-secondary);line-height:1.55;margin-top:3px}
.th-entry-text strong{color:var(--text);font-weight:600}
.th-entry-text em{font-style:normal;color:#A78BFA;font-weight:600}
.th-entry-text .th-old{color:#FCA5A5;text-decoration:line-through;text-decoration-color:rgba(252,165,165,.5);opacity:.75}
.th-entry-text .th-new{color:#6EE7B7;font-weight:600}
.th-entry-target{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.04);font-size:11px;color:var(--text);font-weight:600;margin:0 2px}
.th-entry-target svg{width:10px;height:10px;opacity:.7}
.th-entry-meta{font-size:10px;color:var(--text-secondary);opacity:.7;margin-top:4px;display:flex;align-items:center;gap:6px}
.th-entry-meta-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.th-empty{text-align:center;padding:40px 20px;color:var(--text-secondary);font-size:13px}
.th-empty-icon{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--text-secondary)}
.th-empty-icon svg{width:22px;height:22px}
/* ===== Board Detail (Kanban) ===== */
.tbd-overlay{display:none;padding:20px 12px;background:var(--surface)}
.tbd-overlay.open{display:block}
.tbd-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.tbd-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.tbd-back{width:32px;height:32px;border-radius:8px;border:none;background:none;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.tbd-back:hover{background:rgba(255,255,255,.04);color:var(--text)}
.tbd-back svg{width:18px;height:18px}
.tbd-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.4px;margin:0}
.tbd-header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tbd-avatars{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:20px;border:1px solid transparent;transition:background .15s,border-color .15s}
.tbd-avatars:hover{background:rgba(255,255,255,.04);border-color:rgba(124,58,237,.3)}
.tbd-avatars:hover .tbd-avatar-overflow{color:#A78BFA}
.tbd-avatar-stack{display:flex;padding-right:5px}
.tbd-avatar-stack .tbd-av{width:26px;height:26px;border-radius:6px;border:1.5px solid var(--card-bg);margin-right:-6px;background:linear-gradient(135deg,#6b21a8,#7C3AED);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.tbd-avatar-stack .tbd-av:nth-child(2){background:linear-gradient(135deg,#F59E0B,#EF4444)}
.tbd-avatar-stack .tbd-av:nth-child(3){background:linear-gradient(135deg,#10B981,#059669)}
.tbd-avatar-stack .tbd-av:nth-child(4){background:linear-gradient(135deg,#EC4899,#BE185D)}
.tbd-avatar-overflow{font-size:12px;font-weight:700;color:var(--text)}
.tbd-btn{padding:8px 14px;border-radius:6px;border:none;background:var(--primary);color:#fff;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tbd-btn:hover{opacity:.9}
.tbd-btn svg{width:14px;height:14px}
.tbd-btn-ghost{padding:8px 10px;border:none;background:none;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-family:inherit}
.tbd-btn-ghost:hover{color:var(--primary)}
.tbd-btn-ghost svg{width:16px;height:16px}
.tbd-kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:14px;min-height:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.tbd-kanban::-webkit-scrollbar{height:6px;width:6px}
.tbd-kanban::-webkit-scrollbar-track{background:transparent}
.tbd-kanban::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;transition:background .2s}
.tbd-kanban:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.tbd-kanban::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}
.tbd-col{flex:0 0 296px;min-width:296px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 200px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;transition:background .2s,border-color .2s}
.tbd-col::-webkit-scrollbar{width:4px}
.tbd-col::-webkit-scrollbar-track{background:transparent}
.tbd-col::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px}
.tbd-col:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.tbd-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;background:transparent;padding:8px 4px;margin:-4px -4px 0;z-index:1}
.tbd-col-title{font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.6px}
.tbd-col-count{font-size:10.5px;font-weight:700;color:var(--text-secondary);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:10px;min-width:20px;text-align:center;letter-spacing:.2px}
.tbd-col-kebab{width:22px;height:22px;border-radius:5px;border:none;background:none;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s,color .15s}
.tbd-col-kebab:hover{background:rgba(255,255,255,.06);color:var(--text)}
.tbd-col-kebab svg{width:13px;height:13px}
.tbd-col-menu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:999;min-width:200px;padding:6px 0;opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;transition:all .2s}
.tbd-col-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.tbd-col-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap}
.tbd-col-menu-item:hover{background:var(--surface-hover)}
.tbd-col-menu-item.has-sub{justify-content:space-between;position:relative}
.tbd-col-menu-item.has-sub .tbd-col-menu-chev{margin-left:auto;opacity:.6}
.tbd-col-menu-sep{height:1px;background:rgba(255,255,255,.06);margin:6px 0}
.tbd-col-menu-item.danger{color:#F87171}
.tbd-col-menu-item.danger:hover{background:rgba(231,0,11,.1)}
.tbd-col-menu-item.danger svg{color:#F87171}
.tbd-col-submenu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.45);z-index:1000;min-width:210px;padding:6px 0;opacity:0;transform:translateX(-4px) scale(.97);pointer-events:none;transition:all .18s}
.tbd-col-submenu.open{opacity:1;transform:translateX(0) scale(1);pointer-events:all}
.tbd-col-submenu-head{font-size:10.5px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;padding:8px 16px 6px}
.tbd-col-submenu-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;cursor:pointer;color:var(--text);white-space:nowrap;justify-content:space-between}
.tbd-col-submenu-item:hover{background:var(--surface-hover)}
.tbd-col-submenu-item .tbd-col-submenu-check{width:13px;height:13px;color:#A78BFA;opacity:0}
.tbd-col-submenu-item.active .tbd-col-submenu-check{opacity:1}
.tbd-col-submenu-item.active{color:#C4B5FD}
.tbd-col-submenu-item-inner{display:flex;align-items:center;gap:10px}
.tbd-col-add{padding:9px 10px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;display:flex;align-items:center;justify-content:flex-start;gap:7px;transition:background .15s,color .15s;margin-top:2px}
.tbd-col-add:hover{background:rgba(124,58,237,.1);color:#A78BFA}
.tbd-col-add svg{width:13px;height:13px}
.tbd-col-add-floating{width:40px;height:40px;flex:0 0 40px;border-radius:10px;border:1px dashed rgba(124,58,237,.35);background:rgba(124,58,237,.06);color:#A78BFA;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:36px;transition:background .15s,border-color .15s}
.tbd-col-add-floating:hover{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.6)}
.tbd-col-add-floating svg{width:16px;height:16px}
.tbd-card{background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,.06);border-radius:0;padding:10px 2px 12px;cursor:pointer;transition:background .18s;display:flex;flex-direction:column;gap:9px;margin:0}
.tbd-card[draggable="true"]{cursor:grab}
.tbd-card[draggable="true"]:active{cursor:grabbing}
.tbd-card.dragging{opacity:.4;cursor:grabbing}
/* Column reordering — head is the grab handle */
.tbd-col-head[draggable="true"]{cursor:grab}
.tbd-col-head[draggable="true"]:active{cursor:grabbing}
.tbd-col.col-dragging{opacity:.45}
.tbd-col.col-dragging .tbd-col-head{cursor:grabbing}
/* Vertical drop indicator on the left or right edge of the hovered column */
.tbd-col.col-drop-before{box-shadow:-3px 0 0 0 #7C3AED, -8px 0 16px -2px rgba(124,58,237,.5)}
.tbd-col.col-drop-after{box-shadow:3px 0 0 0 #7C3AED, 8px 0 16px -2px rgba(124,58,237,.5)}
.tbd-col.drop-target{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.35);box-shadow:0 0 0 1px rgba(124,58,237,.15) inset}
.tbd-drop-indicator{height:2px;margin:2px 0;background:linear-gradient(90deg,transparent,#7C3AED 20%,#7C3AED 80%,transparent);border-radius:2px;box-shadow:0 0 8px rgba(124,58,237,.5);pointer-events:none;animation:tbdDropPulse .8s ease-in-out infinite}
@keyframes tbdDropPulse{0%,100%{opacity:.7}50%{opacity:1}}
.tbd-card:hover{background:rgba(255,255,255,.02);border-bottom-color:rgba(124,58,237,.22)}
.tbd-card:last-child{border-bottom:none}
.tbd-card-cover{width:100%;height:72px;border-radius:7px;background:linear-gradient(135deg,#1E3A8A,#312E81);display:flex;align-items:flex-start;justify-content:flex-start;padding:8px;position:relative;overflow:hidden}
.tbd-card-cover[data-cover="purple"]{background:linear-gradient(135deg,#581C87,#7E22CE)}
.tbd-card-cover[data-cover="teal"]{background:linear-gradient(135deg,#064E3B,#0F766E)}
.tbd-card-cover[data-cover="pink"]{background:linear-gradient(135deg,#831843,#BE185D)}
.tbd-card-cover[data-cover="orange"]{background:linear-gradient(135deg,#7C2D12,#EA580C)}
.tbd-visibility{background:rgba(0,0,0,.35);backdrop-filter:blur(6px);border-radius:12px;padding:2px 8px 2px 4px;display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.2px}
.tbd-visibility.public{background:rgba(124,58,237,.85);color:#fff}
.tbd-visibility-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.9)}
.tbd-card-top{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap}
.tbd-priority{font-size:10px;font-weight:600;padding:2.5px 8px;border-radius:4px;letter-spacing:.2px;text-transform:capitalize}
.tbd-priority.low{background:rgba(167,139,250,.15);color:#C4B5FD}
.tbd-priority.medium{background:rgba(245,158,11,.15);color:#FCD34D}
.tbd-priority.high{background:rgba(239,68,68,.15);color:#FCA5A5}
.tbd-priority.urgent{background:rgba(127,29,29,.4);color:#FECACA;border:1px solid rgba(239,68,68,.3)}
.tbd-due{font-size:10px;font-weight:600;padding:2.5px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px;background:rgba(52,211,153,.15);color:#6EE7B7}
.tbd-due.overdue{background:rgba(239,68,68,.15);color:#FCA5A5}
.tbd-due.upcoming{background:rgba(245,158,11,.15);color:#FCD34D}
.tbd-due svg{width:10px;height:10px}
.tbd-card-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;letter-spacing:-.1px}
.tbd-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:1px}
.tbd-card-meta-left{display:flex;align-items:center;gap:11px;color:var(--text-secondary);font-size:11px}
.tbd-card-meta-left .tbd-meta-item{display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.tbd-card-meta-left .tbd-meta-item:hover{color:var(--text)}
.tbd-card-meta-left svg{width:11px;height:11px;opacity:.7}
.tbd-card-assignee{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#F59E0B,#B45309);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;box-shadow:0 0 0 2px rgba(255,255,255,.03)}
/* Card kebab (⋮) — hover-reveal, lives in the card's top-right corner */
.tbd-card{position:relative}
.tbd-card-kebab{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;border:none;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s,background .15s;z-index:2}
.tbd-card:hover .tbd-card-kebab,.tbd-card-kebab:focus,.tbd-card-kebab.open{opacity:1;transform:translateY(0)}
.tbd-card-kebab:hover{background:rgba(0,0,0,.55)}
.tbd-card-kebab svg{width:12px;height:12px}
/* Kebab placement adapts when a cover is present (sits inside the cover) */
.tbd-card > .tbd-card-cover + .tbd-card-kebab{top:10px;right:10px}
/* Card menu */
.tbd-card-menu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);z-index:999;min-width:200px;padding:6px;opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;transition:all .15s}
.tbd-card-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.tbd-card-menu-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s}
.tbd-card-menu-item:hover{background:var(--surface-hover)}
.tbd-card-menu-item svg{width:13px;height:13px;flex-shrink:0;opacity:.8}
.tbd-card-menu-item.danger{color:#F87171;border-top:1px solid var(--border);margin-top:4px;padding-top:10px}
.tbd-card-menu-sep{height:1px;background:var(--border);margin:4px 2px}
/* Nested "Move to" submenu (inline, not flyout — simpler and mobile-friendly) */
.tbd-card-menu-sub{display:none;padding:2px 0 4px}
.tbd-card-menu-sub.open{display:block}
.tbd-card-menu-subitem{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 28px;border-radius:6px;font-size:12.5px;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.tbd-card-menu-subitem:hover{background:var(--surface-hover);color:var(--text)}
.tbd-card-menu-subitem.disabled{opacity:.4;cursor:default;pointer-events:none}
/* ===== Board Detail: Add Task modal extras ===== */
.tbd-task-body{padding:20px 24px 8px;display:flex;flex-direction:column;gap:16px}
.tbd-task-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.tbd-task-row2{grid-template-columns:1fr}}
.tbd-task-label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;display:block}
.tbd-task-input,.tbd-task-select,.tbd-task-textarea{width:100%;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s}
.tbd-task-input:focus,.tbd-task-select:focus,.tbd-task-textarea:focus{border-color:rgba(124,58,237,.45)}
.tbd-task-textarea{min-height:72px;resize:vertical;font-family:inherit;line-height:1.5}
.tbd-task-input[type="datetime-local"]{color-scheme:dark}
.tbd-priority-group{display:flex;gap:6px}
.tbd-priority-btn{flex:1;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.tbd-priority-btn:hover{color:var(--text)}
.tbd-priority-dot{width:8px;height:8px;border-radius:50%;background:var(--c,#A78BFA)}
.tbd-priority-btn.active[data-p="low"]{border-color:#A78BFA;background:rgba(167,139,250,.12);color:#C4B5FD}
.tbd-priority-btn.active[data-p="medium"]{border-color:#FCD34D;background:rgba(245,158,11,.12);color:#FCD34D}
.tbd-priority-btn.active[data-p="high"]{border-color:#FCA5A5;background:rgba(239,68,68,.12);color:#FCA5A5}
.tbd-visibility-group{display:flex;gap:6px}
.tbd-visibility-btn{flex:1;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.tbd-visibility-btn:hover{color:var(--text)}
.tbd-visibility-btn svg{width:12px;height:12px}
.tbd-visibility-btn.active{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.12);color:#C4B5FD}
/* Estimate input + quick picks */
.tbd-estimate-wrap{display:flex;gap:8px;align-items:stretch}
.tbd-estimate-wrap .tbd-task-input{flex:1}
.tbd-estimate-chips{display:flex;gap:4px}
.tbd-estimate-chip{padding:0 10px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.tbd-estimate-chip:hover{color:var(--text);border-color:rgba(124,58,237,.35)}
.tbd-estimate-chip.active{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.12);color:#C4B5FD}
/* Reusable chip surface inside Add Task modal (reuses td-chip tokens) */
.tbd-chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;min-height:40px;transition:border-color .15s}
.tbd-chip-row:hover,.tbd-chip-row:focus-within{border-color:rgba(124,58,237,.35)}
.tbd-chip-hint{color:var(--text-secondary);font-size:12px;flex:1}
.tbd-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600}
.tbd-chip.reporter{background:rgba(236,72,153,.15);color:#F9A8D4}
.tbd-chip.assignee{background:rgba(249,115,22,.18);color:#FDBA74}
.tbd-chip.assignee.variant-b{background:rgba(59,130,246,.18);color:#93C5FD}
.tbd-chip.assignee.variant-c{background:rgba(16,185,129,.18);color:#6EE7B7}
.tbd-chip.assignee.variant-d{background:rgba(167,139,250,.2);color:#C4B5FD}
.tbd-chip.label{background:rgba(16,185,129,.18);color:#6EE7B7}
.tbd-chip-x{background:rgba(0,0,0,.28);width:14px;height:14px;border-radius:50%;color:#fff;font-size:10px;display:inline-flex;align-items:center;justify-content:center;margin-left:3px;cursor:pointer;line-height:1}
.tbd-chip-plus{border:1px dashed var(--border);background:none;color:var(--text-secondary);width:22px;height:22px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}
.tbd-chip-plus:hover{border-color:rgba(124,58,237,.5);color:#A78BFA}
.tbd-chip-plus svg{width:10px;height:10px}
/* Chip picker popover (dropdown) */
.tbd-picker{position:absolute;z-index:360;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.5);padding:8px;min-width:220px;max-width:300px;max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.tbd-picker::-webkit-scrollbar{width:5px}
.tbd-picker::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.tbd-picker-title{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin:0 4px 6px;padding:0}
.tbd-picker-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s}
.tbd-picker-opt:hover{background:var(--surface-hover)}
.tbd-picker-opt.active{background:rgba(124,58,237,.15);color:#A78BFA}
.tbd-picker-mini{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(124,58,237,.15));color:#C4B5FD;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tbd-picker-sub{font-size:11px;color:var(--text-secondary);margin-left:auto}
/* ===== Cover picker popover ===== */
.tbd-cover-menu{position:absolute;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);padding:14px;min-width:240px;z-index:305;display:none}
.tbd-cover-menu.open{display:block}
.tbd-cover-menu-title{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0 2px 10px}
.tbd-cover-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tbd-cover-swatch{height:44px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;position:relative}
.tbd-cover-swatch:hover{transform:scale(1.05)}
.tbd-cover-swatch.selected{border-color:#A78BFA;box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px rgba(167,139,250,.5)}
.tbd-cover-swatch.dark{background:linear-gradient(135deg,#1F2937,#111827)}
.tbd-cover-swatch.purple{background:linear-gradient(135deg,#7C3AED,#4C1D95)}
.tbd-cover-swatch.blue{background:linear-gradient(135deg,#3B82F6,#1E3A8A)}
.tbd-cover-swatch.green{background:linear-gradient(135deg,#10B981,#065F46)}
.tbd-cover-swatch.rose{background:linear-gradient(135deg,#EC4899,#9D174D)}
.tbd-cover-menu-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.tbd-cover-mini-btn{padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s}
.tbd-cover-mini-btn:hover{background:var(--surface-hover);border-color:rgba(124,58,237,.35)}
.tbd-cover-mini-btn svg{width:11px;height:11px}
/* ===== Board kebab menu (reuses tasks-kebab-menu positioning but distinct id) ===== */
.tbd-board-menu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);padding:6px;min-width:220px;max-width:min(260px,calc(100vw - 24px));z-index:305;display:none}
.tbd-board-menu.open{display:block}
.tbd-board-menu-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;font-family:inherit;transition:background .15s}
.tbd-board-menu-item:hover{background:var(--surface-hover)}
.tbd-board-menu-item.danger{color:#F87171;border-top:1px solid var(--border);margin-top:4px;padding-top:12px}
.tbd-board-menu-item svg{width:14px;height:14px;flex-shrink:0;opacity:.85}
/* ---- Task Detail (td-*) — appended from prototype, themed via #tasksSection ---- */
.td-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:none;opacity:0;transition:opacity .25s}
.td-overlay.open{display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;opacity:1;overflow-y:auto}
.td-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(1280px,96vw);max-height:calc(100vh - 80px);display:grid;grid-template-columns:1fr 420px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:width .25s,height .25s,max-height .25s,border-radius .25s}
.td-overlay.fullscreen{padding:0;align-items:stretch}
.td-overlay.fullscreen .td-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;border-left:none;border-right:none}
.td-overlay.fullscreen .td-left{max-height:calc(100vh - 55px)}
.td-overlay.fullscreen .td-right{max-height:calc(100vh - 55px)}
.td-tool-btn.active{background:rgba(124,58,237,.18);color:#A78BFA}
/* History popover (opened from the toolbar History button) */
.td-hist-popover{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.55);width:min(420px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 120px));display:none;flex-direction:column;overflow:hidden;z-index:315}
.td-hist-popover.open{display:flex}
.td-hist-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.td-hist-pop-title{font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.td-hist-pop-title svg{width:14px;height:14px;color:#A78BFA}
.td-hist-pop-close{width:24px;height:24px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.td-hist-pop-close:hover{background:var(--surface-hover);color:var(--text)}
.td-hist-pop-close svg{width:12px;height:12px}
.td-hist-pop-body{flex:1;overflow-y:auto;padding:10px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.td-hist-pop-body::-webkit-scrollbar{width:5px}
.td-hist-pop-body::-webkit-scrollbar-track{background:transparent}
.td-hist-pop-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px}
.td-hist-pop-body:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.td-hist-pop-body .td-hist-list{gap:10px}
/* ===== Bottom Tasks section (sibling tasks from the same board) ===== */
.td-tasks-body{padding:4px 0 0}
.td-tasks-list{display:flex;flex-direction:column}
.td-task-item{display:flex;align-items:center;gap:14px;padding:12px 2px;background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,.06);border-radius:0;cursor:pointer;transition:background .15s,border-color .15s}
.td-task-item:last-child{border-bottom:none}
.td-task-item:hover{background:rgba(255,255,255,.02);border-bottom-color:rgba(124,58,237,.28)}
.td-task-item.current{background:rgba(124,58,237,.06);border-left:3px solid rgba(124,58,237,.85);padding-left:10px;border-radius:8px;border-bottom-style:solid;border-bottom-color:rgba(124,58,237,.22)}
.td-task-item.current:hover{background:rgba(124,58,237,.08)}
.td-task-id{font-size:10.5px;color:var(--text-secondary);font-family:ui-monospace,Menlo,monospace;letter-spacing:.3px;flex-shrink:0;min-width:56px}
.td-task-title{flex:1;font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.1px}
.td-task-list-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.04);color:var(--text-secondary);letter-spacing:.4px;text-transform:uppercase;flex-shrink:0}
.td-task-pri{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);font-weight:600;flex-shrink:0}
.td-task-pri-dot{width:7px;height:7px;border-radius:50%;background:#F59E0B}
.td-task-pri-dot.low{background:#A78BFA}
.td-task-pri-dot.high{background:#DC2626}
.td-task-openbtn{width:24px;height:24px;border-radius:6px;border:none;background:rgba(255,255,255,.03);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}
.td-task-openbtn:hover{background:rgba(124,58,237,.2);color:#C4B5FD}
.td-task-openbtn svg{width:12px;height:12px}
.td-tasks-empty{padding:20px 4px;text-align:center;font-size:12px;color:var(--text-secondary)}
.td-task-add{display:inline-flex;align-items:center;gap:7px;margin:12px 0 2px;padding:9px 14px;border:1px dashed rgba(124,58,237,.4);border-radius:8px;background:rgba(124,58,237,.05);color:#C4B5FD;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
.td-task-add:hover{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.7);color:#fff}
.td-task-add svg{width:12px;height:12px}
.td-updates-body{padding:4px 0 0}
/* Interactive filter chips — click a chip to filter the feed by tag */
.td-updates-filters{display:flex;align-items:center;gap:6px;padding:4px 0 12px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.05);flex-wrap:wrap}
.td-updates-filter{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
.td-updates-filter:hover{color:var(--text);border-color:rgba(255,255,255,.14)}
.td-updates-filter.active{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.4);color:#C4B5FD}
.td-updates-filter-dot{width:7px;height:7px;border-radius:50%;background:#A78BFA}
.td-updates-filter-dot.progress{background:#FCD34D}
.td-updates-filter-dot.blocker{background:#F87171}
.td-updates-filter-dot.milestone{background:#C4B5FD}
.td-updates-filter-dot.note{background:#6EE7B7}
.td-updates-filter-dot.status{background:#C4B5FD}
.td-updates-filter-dot.start{background:#93C5FD}
.td-updates-filter-dot.due{background:#FCA5A5}
.td-updates-empty-note{font-size:11.5px;color:var(--text-secondary);padding:6px 10px 12px;font-style:normal;display:flex;align-items:center;gap:8px}
.td-updates-empty-note::before{content:'';width:14px;height:14px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at center,rgba(124,58,237,.3) 0%,rgba(124,58,237,.08) 60%,transparent 100%);border:1px solid rgba(124,58,237,.2)}
.td-updates-empty{padding:18px;text-align:center;color:var(--text-secondary);font-size:12px;background:rgba(255,255,255,.015);border:1px dashed rgba(255,255,255,.08);border-radius:9px;margin-top:6px}
.td-updates-last{margin-left:auto;font-size:11px;color:var(--text-secondary);font-weight:500}
.td-updates-last strong{color:var(--text);font-weight:600}
.td-updates-list{display:flex;flex-direction:column;position:relative;padding:4px 0 0}
.td-updates-list::before{content:'';position:absolute;left:14px;top:24px;bottom:24px;width:1px;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.06) 8%,rgba(255,255,255,.06) 92%,transparent 100%);pointer-events:none}
.td-update-item{display:flex;align-items:flex-start;gap:14px;padding:10px 8px 14px;background:transparent;border:none;border-bottom:none;border-radius:0;position:relative;transition:background .15s}
.td-update-item + .td-update-item{margin-top:2px}
.td-update-item:hover{background:rgba(255,255,255,.018)}
.td-update-item[data-tag="progress"],.td-update-item[data-tag="milestone"],.td-update-item[data-tag="blocker"],.td-update-item[data-tag="note"],.td-update-item[data-tag="status"],.td-update-item[data-tag="start"],.td-update-item[data-tag="due"]{border-left-color:transparent}
.td-update-item.hidden{display:none}
.td-update-av{width:30px;height:30px;border-radius:8px;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#7C3AED,#5B21B6);letter-spacing:.2px;position:relative;z-index:1;box-shadow:0 0 0 3px var(--card-bg),0 1px 3px rgba(0,0,0,.25)}
.td-updates-filter-count{font-size:10px;padding:1px 6px;border-radius:9px;background:rgba(255,255,255,.08);color:var(--text-secondary);min-width:14px;text-align:center;font-weight:700;letter-spacing:.2px}
.td-updates-filter.active .td-updates-filter-count{background:rgba(124,58,237,.35);color:#fff}
.td-updates-last{margin-left:auto;font-size:11.5px;color:var(--text-secondary);font-weight:500}
.td-updates-last strong{color:var(--text);font-weight:700}
.td-update-av.orange{background:linear-gradient(135deg,#F59E0B,#B45309)}
.td-update-av.green{background:linear-gradient(135deg,#10B981,#059669)}
.td-update-av.blue{background:linear-gradient(135deg,#3B82F6,#1E40AF)}
.td-update-av.pink{background:linear-gradient(135deg,#EC4899,#BE185D)}
.td-update-body{flex:1;min-width:0}
.td-update-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.td-update-name{font-size:12.5px;font-weight:700;color:var(--text)}
.td-update-tag{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase}
.td-update-tag.progress{background:rgba(245,158,11,.15);color:#FCD34D}
.td-update-tag.milestone{background:rgba(124,58,237,.18);color:#C4B5FD}
.td-update-tag.blocker{background:rgba(248,113,113,.15);color:#F87171}
.td-update-tag.note{background:rgba(52,211,153,.14);color:#6EE7B7}
.td-update-tag.status{background:rgba(124,58,237,.18);color:#C4B5FD}
.td-update-tag.start{background:rgba(59,130,246,.18);color:#93C5FD}
.td-update-tag.due{background:rgba(248,113,113,.15);color:#FCA5A5}
.td-update-from{background:rgba(255,255,255,.05);color:var(--text-secondary);padding:1px 6px;border-radius:4px;font-size:12px;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.td-update-to{background:rgba(124,58,237,.15);color:#C4B5FD;padding:1px 6px;border-radius:4px;font-size:12px;font-weight:600}
.td-update-time{font-size:11px;color:var(--text-secondary);margin-left:auto}
.td-update-text{font-size:13px;color:var(--text);line-height:1.55;word-wrap:break-word}
.td-update-progress{margin-top:8px;display:flex;align-items:center;gap:10px}
.td-update-progress-bar{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.td-update-progress-fill{height:100%;background:linear-gradient(90deg,#7C3AED,#A78BFA);border-radius:3px;transition:width .25s}
.td-update-progress-label{font-size:11px;color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}
.td-updates-composer{margin-top:14px;padding:12px 2px 2px;background:transparent;border:none;border-top:1px solid rgba(255,255,255,.05);border-radius:0}
.td-updates-composer-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.td-updates-composer-label{font-size:10.5px;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
/* Tag buttons are now colored pills that PREVIEW how the posted update will look */
.td-updates-tag-picker{display:inline-flex;flex-wrap:wrap;gap:6px;background:transparent;border-radius:0;padding:0}
.td-updates-tag-btn{border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--text-secondary);font-size:10px;font-weight:700;padding:4px 10px 4px 9px;border-radius:999px;cursor:pointer;font-family:inherit;letter-spacing:.4px;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s;display:inline-flex;align-items:center;gap:6px}
.td-updates-tag-btn::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.td-updates-tag-btn:hover{color:var(--text);border-color:rgba(255,255,255,.16)}
.td-updates-tag-btn[data-tag="progress"].active{color:#FCD34D;border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.12)}
.td-updates-tag-btn[data-tag="milestone"].active{color:#C4B5FD;border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.14)}
.td-updates-tag-btn[data-tag="blocker"].active{color:#F87171;border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.12)}
.td-updates-tag-btn[data-tag="note"].active{color:#6EE7B7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.1)}
.td-updates-composer textarea{width:100%;min-height:72px;max-height:160px;padding:8px 2px;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;color:var(--text);font-size:13px;font-family:inherit;resize:vertical;outline:none;transition:border-color .15s;line-height:1.55}
.td-updates-composer textarea:focus{border-bottom-color:rgba(124,58,237,.45)}
.td-updates-composer textarea::placeholder{color:var(--text-secondary)}
.td-updates-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.td-updates-foot-left{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.td-updates-shortcut{font-size:10.5px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px}
.td-updates-shortcut kbd{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:10px;font-family:ui-monospace,Menlo,monospace;color:var(--text);font-weight:600}
.td-updates-char{font-size:10.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:600}
.td-updates-char.warn{color:#FCD34D}
.td-updates-char.over{color:#F87171}
.td-updates-hint{font-size:11px;color:var(--text-secondary)}
.td-updates-post-btn{padding:7px 16px;border-radius:999px;border:none;background:var(--primary);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .05s;letter-spacing:.2px}
.td-updates-post-btn:hover{opacity:.92}
.td-updates-post-btn:active{transform:translateY(1px)}
.td-updates-post-btn:disabled{opacity:.35;cursor:not-allowed}
/* Task Detail kebab menu */
.td-kebab-menu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);z-index:400;min-width:210px;padding:6px;opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;transition:all .15s}
.td-kebab-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.td-kebab-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s}
.td-kebab-item:hover{background:var(--surface-hover)}
.td-kebab-item svg{width:13px;height:13px;flex-shrink:0;opacity:.8}
.td-kebab-item.danger{color:#F87171;border-top:1px solid var(--border);margin-top:4px;padding-top:10px}
.td-kebab-item-shortcut{margin-left:auto;font-size:10.5px;color:var(--text-secondary);opacity:.7;font-weight:500;letter-spacing:.2px}
@media (max-width:980px){.td-modal{grid-template-columns:1fr}}
.td-toolbar{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--card-bg)}
.td-tool-btn{width:28px;height:28px;border-radius:6px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.td-tool-btn:hover{background:var(--surface-hover);color:var(--text)}
.td-tool-btn svg{width:16px;height:16px}
.td-left{padding:20px 24px;overflow-y:auto;max-height:calc(100vh - 135px);display:flex;flex-direction:column;gap:14px}
/* Minimalist scrollbars — task modal only */
.td-left,.td-right-body{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.td-left::-webkit-scrollbar,.td-right-body::-webkit-scrollbar{width:5px;height:5px}
.td-left::-webkit-scrollbar-track,.td-right-body::-webkit-scrollbar-track{background:transparent;border:0}
.td-left::-webkit-scrollbar-thumb,.td-right-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;transition:background .2s}
.td-left:hover::-webkit-scrollbar-thumb,.td-right-body:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.td-left::-webkit-scrollbar-thumb:hover,.td-right-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}
.td-left::-webkit-scrollbar-corner,.td-right-body::-webkit-scrollbar-corner{background:transparent}
.td-id{font-size:12px;color:var(--text-secondary);font-weight:600;letter-spacing:.3px}
.td-title-row{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.td-title-left{display:flex;align-items:center;gap:8px;min-width:0}
.td-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.3px;outline:none;border:1px solid transparent;border-radius:6px;padding:2px 6px;margin-left:-6px}
.td-title:focus{border-color:var(--primary);background:var(--surface)}
.td-title-edit,.td-star{width:26px;height:26px;border-radius:6px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.td-title-edit:hover,.td-star:hover{background:var(--surface-hover);color:var(--text)}
.td-star.active{color:#F59E0B}
.td-title-edit svg,.td-star svg{width:14px;height:14px}
.td-addsub-btn{padding:7px 12px;border-radius:6px;background:rgba(124,58,237,.12);color:#A78BFA;font-size:12px;font-weight:600;border:1px solid rgba(124,58,237,.25);cursor:pointer;font-family:inherit}
.td-addsub-btn:hover{background:rgba(124,58,237,.2)}
.td-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px;padding-bottom:4px}
.td-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.td-field-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}
.td-field-value{font-size:13px;color:var(--text);display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 8px;border-radius:6px;border:1px solid transparent}
.td-field-value:hover{background:var(--surface-hover)}
.td-field-value svg{width:12px;height:12px;opacity:.6}
.td-pri-dot{width:8px;height:8px;border-radius:50%;background:#F59E0B;flex-shrink:0}
.td-pri-dot.high{background:#DC2626}
.td-pri-dot.low{background:#7C3AED}
.td-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.td-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600}
.td-chip-reporter{background:rgba(236,72,153,.15);color:#F9A8D4}
.td-chip-assignee{background:rgba(249,115,22,.18);color:#FDBA74}
.td-chip-assignee.variant-b{background:rgba(59,130,246,.18);color:#93C5FD}
.td-chip-label{background:rgba(16,185,129,.18);color:#6EE7B7}
.td-chip-status{background:rgba(245,158,11,.18);color:#FCD34D}
.td-chip-close{background:rgba(0,0,0,.25);width:14px;height:14px;border-radius:50%;color:#fff;font-size:10px;display:inline-flex;align-items:center;justify-content:center;margin-left:3px;cursor:pointer}
.td-chip-add{border:1px dashed var(--border);background:none;color:var(--text-secondary);width:22px;height:22px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.td-chip-add:hover{border-color:var(--primary);color:var(--primary)}
.td-chip-add svg{width:10px;height:10px}
.td-section{border-top:1px solid rgba(255,255,255,.05);padding-top:18px;margin-top:6px}
.td-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.td-section-title{font-size:12.5px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px}
.td-section-actions{display:flex;gap:4px}
.td-sec-btn{width:26px;height:26px;border-radius:6px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.td-sec-btn:hover{background:var(--surface-hover);color:var(--text)}
.td-sec-btn.danger:hover{color:#F87171;background:rgba(248,113,113,.12)}
.td-sec-btn svg{width:14px;height:14px}
.td-bug-list{display:flex;flex-direction:column;gap:8px}
.td-bug{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text)}
.td-bug-num{color:var(--text-secondary);font-size:12px;flex-shrink:0;width:16px}
.td-bug-text{flex:1;min-width:0}
.td-bug-status{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;background:rgba(245,158,11,.18);color:#FCD34D;cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:none;font-family:inherit;transition:background .15s,color .15s,box-shadow .15s;user-select:none}
.td-bug-status svg{opacity:.75;transition:opacity .15s,transform .15s}
.td-bug-status:hover{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.td-bug-status:hover svg{opacity:1}
.td-bug-status.open svg{transform:rotate(180deg);opacity:1}
.td-bug-status.todo{background:rgba(96,165,250,.16);color:#93C5FD}
.td-bug-status.progress{background:rgba(245,158,11,.18);color:#FCD34D}
.td-bug-status.review{background:rgba(124,58,237,.2);color:#C4B5FD}
.td-bug-status.done{background:rgba(52,211,153,.16);color:#6EE7B7}
.td-bug-status.blocked{background:rgba(248,113,113,.16);color:#F87171}
/* Status picker popover (opened from any sub-task's status pill) */
.td-status-menu{position:fixed;background:var(--card-bg);border:1px solid var(--border);border-radius:9px;box-shadow:0 16px 40px rgba(0,0,0,.55);padding:5px;min-width:168px;z-index:325;display:none}
.td-status-menu.open{display:block}
.td-status-menu-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:inherit;border:none;background:transparent;width:100%;text-align:left;transition:background .15s}
.td-status-menu-item:hover{background:var(--surface-hover)}
.td-status-menu-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.td-status-menu-item[data-s="todo"] .dot{background:#93C5FD}
.td-status-menu-item[data-s="progress"] .dot{background:#FCD34D}
.td-status-menu-item[data-s="review"] .dot{background:#C4B5FD}
.td-status-menu-item[data-s="done"] .dot{background:#6EE7B7}
.td-status-menu-item[data-s="blocked"] .dot{background:#F87171}
.td-status-menu-item.current{background:rgba(124,58,237,.1);color:#C4B5FD;font-weight:600}
.td-add-bug{padding:10px 14px;background:transparent;color:#A78BFA;border:1px dashed rgba(124,58,237,.25);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;text-align:left;display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s,color .15s;margin-top:4px;align-self:flex-start}
.td-add-bug:hover{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.45);color:#C4B5FD}
.td-add-bug::before{content:'+';font-size:15px;font-weight:700;opacity:.85}
/* ===== Sub Task Accordion ===== */
.td-subtask-list{display:flex;flex-direction:column;gap:0}
.td-subtask{background:transparent;border:1px solid transparent;border-bottom:1px dashed rgba(255,255,255,.06);border-left:2px solid transparent;border-radius:0;overflow:hidden;transition:background .2s,border-color .2s,border-radius .2s,padding .2s,margin .2s,box-shadow .2s}
.td-subtask:last-child{border-bottom:none}
.td-subtask:hover{background:rgba(255,255,255,.015)}
.td-subtask.open{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.38);border-left:3px solid rgba(124,58,237,.85);border-radius:10px;padding:0 12px;margin:6px 0;box-shadow:0 4px 18px rgba(124,58,237,.08)}
.td-subtask.open:hover{background:rgba(124,58,237,.08)}
/* Chat-selection state: a filled purple background + stronger left accent + purple-tinted ID/title, signalling which sub-task's chat is currently showing */
.td-subtask.selected{background:rgba(124,58,237,.14);border-left:3px solid #A78BFA;padding-left:10px;box-shadow:0 0 0 1px rgba(124,58,237,.25)}
.td-subtask.selected .td-subtask-id{color:#C4B5FD}
.td-subtask.selected .td-subtask-title{color:#fff}
.td-subtask.selected:hover{background:rgba(124,58,237,.18)}
/* Chat empty state (shown when a sub-task with no messages is selected) */
.td-chat-empty{padding:20px 18px;text-align:center;font-size:12px;color:var(--text-secondary);line-height:1.6}
.td-subtask-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;cursor:pointer;user-select:none}
.td-subtask-head:hover{background:transparent}
.td-subtask-meta{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.td-subtask-id{font-size:11px;color:var(--text-secondary);font-weight:600;letter-spacing:.3px}
.td-subtask-title-row{display:flex;align-items:center;gap:8px;min-width:0}
.td-subtask-title{font-size:14px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.td-subtask-icon-btn{width:22px;height:22px;border-radius:5px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.td-subtask-icon-btn:hover{background:var(--surface-hover);color:var(--text)}
.td-subtask-icon-btn.active{color:#F59E0B}
.td-subtask-icon-btn svg{width:13px;height:13px}
.td-subtask-head-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.td-subtask-chevron{width:26px;height:26px;border-radius:6px;border:none;background:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.td-subtask-chevron:hover{background:var(--surface-hover);color:var(--text)}
.td-subtask-chevron svg{width:14px;height:14px;transition:transform .25s}
.td-subtask.open .td-subtask-chevron svg{transform:rotate(180deg)}
.td-subtask-body{display:none;padding:6px 2px 14px;border-top:1px solid rgba(255,255,255,.05);background:transparent}
.td-subtask.open .td-subtask-body{display:block}
.td-subtask-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px}
@media (max-width:720px){.td-subtask-fields{grid-template-columns:repeat(2,1fr)}}
/* Description content body (shared by main task + sub tasks) */
.td-desc-body{background:transparent;border:none;border-radius:0;padding:4px 2px 8px;font-size:13px;color:var(--text);line-height:1.65;min-height:72px;outline:none;transition:background .2s,border-color .2s;white-space:pre-wrap}
.td-desc-body:hover{background:transparent}
.td-desc-body:focus{background:transparent;border-color:transparent}
.td-desc-body:empty::before{content:attr(data-placeholder);color:var(--text-secondary);font-style:italic}
/* Sub-task inner description section */
.td-subtask-description{border-top:1px solid rgba(255,255,255,.05);padding-top:14px;margin-top:14px}
.td-subtask-description-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.td-subtask-description-title{font-size:13px;font-weight:700;color:var(--text)}
.td-subtask-description-actions{display:flex;gap:4px}
/* Per-sub-task Attachments block (compact, sits below Description inside the expanded sub-task body) */
.td-subtask-attachments{border-top:1px solid rgba(255,255,255,.05);padding-top:14px;margin-top:14px}
.td-subtask-attachments-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.td-subtask-attachments-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.td-subtask-attachments-count{font-size:10.5px;font-weight:700;color:#A78BFA;background:rgba(124,58,237,.15);padding:2px 8px;border-radius:10px;letter-spacing:.3px}
.td-subtask-attachments-actions{display:flex;gap:4px}
.td-subtask-attachments-list{display:flex;flex-direction:column;gap:6px}
.td-subtask-attachments-empty{padding:14px;text-align:center;color:var(--text-secondary);font-size:12px;background:rgba(255,255,255,.015);border:1px dashed rgba(255,255,255,.08);border-radius:9px}
/* Inline subtask Updates + History sections (mirror the separate-screen view) */
.td-subtask-updates,.td-subtask-history{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05)}
.td-subtask-updates-head,.td-subtask-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.td-subtask-updates-title,.td-subtask-history-title{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.tdsubinline-filters{padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.04)}
.tdsubinline-list .td-update-item.hidden,.td-updates-list .td-update-item.hidden{display:none}
.td-subtask-attach-btn{background:transparent;border:1px dashed rgba(124,58,237,.25);color:#A78BFA;font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:6px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s}
.td-subtask-attach-btn:hover{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.45)}
.td-subtask-attach-btn svg{width:10px;height:10px}
/* Sub-task head: add an Open Full View button */
.td-subtask-openbtn{width:22px;height:22px;border-radius:5px;border:none;background:rgba(255,255,255,.04);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}
.td-subtask-openbtn:hover{background:rgba(124,58,237,.18);color:#C4B5FD}
.td-subtask-openbtn svg{width:11px;height:11px}
/* Explicit Open / Close labeled buttons on each sub-task row */
.td-subtask-ocbtn{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:var(--text-secondary);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}
.td-subtask-ocbtn svg{width:10px;height:10px}
.td-subtask-ocbtn.open{border-color:rgba(124,58,237,.35);color:#C4B5FD;background:rgba(124,58,237,.08)}
.td-subtask-ocbtn.open:hover{background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.6);color:#fff}
.td-subtask-ocbtn.close{opacity:.55}
.td-subtask-ocbtn.close:hover{background:rgba(255,255,255,.04);color:var(--text);opacity:1}
.td-subtask.open .td-subtask-ocbtn.close{opacity:1;border-color:rgba(124,58,237,.25);color:#C4B5FD}
/* ===== Sub Task Detail Overlay (full-screen view for a single sub-task) ===== */
.tdsub-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:335;display:none;opacity:0;transition:opacity .25s}
.tdsub-overlay.open{display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;opacity:1;overflow-y:auto}
.tdsub-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;width:min(1180px,96vw);max-height:calc(100vh - 80px);display:grid;grid-template-columns:1fr 380px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:width .25s,height .25s,max-height .25s,border-radius .25s}
@media (max-width:980px){.tdsub-modal{grid-template-columns:1fr}}
.tdsub-overlay.fullscreen{padding:0;align-items:stretch}
.tdsub-overlay.fullscreen .tdsub-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;border-left:none;border-right:none}
.tdsub-toolbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--card-bg)}
.tdsub-breadcrumb{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-secondary);min-width:0}
.tdsub-breadcrumb-link{color:var(--text-secondary);background:transparent;border:none;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:5px;transition:background .15s,color .15s;min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdsub-breadcrumb-link:hover{background:rgba(255,255,255,.05);color:var(--text)}
.tdsub-breadcrumb-link svg{width:11px;height:11px;flex-shrink:0}
.tdsub-breadcrumb-sep{color:var(--text-secondary);opacity:.5;font-size:12px}
.tdsub-breadcrumb-self{color:var(--text);font-weight:600;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tdsub-toolbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tdsub-left{padding:20px 24px;overflow-y:auto;max-height:calc(100vh - 135px);display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.tdsub-left::-webkit-scrollbar{width:5px}
.tdsub-left::-webkit-scrollbar-track{background:transparent}
.tdsub-left::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px}
.tdsub-left:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.tdsub-right{display:flex;flex-direction:column;border-left:1px solid var(--border);max-height:calc(100vh - 135px);overflow:hidden}
.tdsub-overlay.fullscreen .tdsub-left,.tdsub-overlay.fullscreen .tdsub-right{max-height:calc(100vh - 55px)}
.tdsub-id{font-size:11px;color:var(--text-secondary);font-weight:700;letter-spacing:.5px}
.tdsub-title{font-size:22px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.3px;outline:none}
.tdsub-title-row{display:flex;align-items:center;gap:8px;margin-top:6px}
/* ===== Collapsible section (Attachments, History) ===== */
.td-section.td-collapsible .td-section-head{cursor:pointer;user-select:none}
.td-section.td-collapsible .td-section-body{display:none}
.td-section.td-collapsible.open .td-section-body{display:block;margin-top:12px}
.td-section-chevron{transition:transform .25s}
.td-section.td-collapsible.open .td-section-chevron{transform:rotate(180deg)}
/* ===== Attachment tabs ===== */
.td-att-tabs{display:flex;gap:4px;background:transparent;border:none;border-radius:0;padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.td-att-tab{flex:1;padding:7px 10px;border:none;background:none;color:var(--text-secondary);font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:color .15s,background .15s}
.td-att-tab:hover{color:var(--text)}
.td-att-tab.active{background:rgba(124,58,237,.9);color:#fff}
.td-att-tab-count{font-size:10px;padding:1px 6px;border-radius:10px;background:rgba(255,255,255,.18);color:inherit;font-weight:700;min-width:18px;text-align:center}
.td-att-tab:not(.active) .td-att-tab-count{background:var(--surface-hover);color:var(--text-secondary)}
.td-att-panel{display:none}
.td-att-panel.active{display:flex;flex-direction:column;gap:6px}
/* ===== Attachment item ===== */
.td-att-item{display:flex;align-items:center;gap:12px;padding:10px 2px;background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,.06);border-radius:0;transition:background .15s}
.td-att-item:last-child{border-bottom:none}
.td-att-item:hover{background:rgba(255,255,255,.015);border-bottom-color:rgba(124,58,237,.25)}
.td-att-thumb{width:34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(124,58,237,.15);color:#A78BFA}
.td-att-thumb.image{background:rgba(59,130,246,.18);color:#93C5FD}
.td-att-thumb.video{background:rgba(249,115,22,.18);color:#FDBA74}
.td-att-thumb.doc{background:rgba(16,185,129,.18);color:#6EE7B7}
.td-att-thumb.link{background:rgba(236,72,153,.18);color:#F9A8D4}
.td-att-thumb svg{width:15px;height:15px}
.td-att-info{flex:1;min-width:0}
.td-att-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-att-name a{color:inherit;text-decoration:none}
.td-att-name a:hover{color:#A78BFA}
.td-att-meta{font-size:11px;color:var(--text-secondary);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.td-att-meta-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.td-att-kebab{width:26px;height:26px;border:none;background:none;color:var(--text-secondary);border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td-att-kebab:hover{background:var(--surface-hover);color:var(--text)}
.td-att-kebab svg{width:14px;height:14px}
.td-att-empty{text-align:center;padding:22px 14px;color:var(--text-secondary);font-size:12px;border:1px dashed var(--border);border-radius:8px;background:rgba(0,0,0,.12)}
/* ===== History ===== */
.td-hist-list{display:flex;flex-direction:column;gap:10px}
.td-hist-item{display:flex;gap:10px;align-items:flex-start}
.td-hist-av{width:28px;height:28px;border-radius:6px;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.td-hist-av.green{background:linear-gradient(135deg,#10B981,#059669)}
.td-hist-av.orange{background:linear-gradient(135deg,#F59E0B,#B45309)}
.td-hist-av.blue{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.td-hist-av.pink{background:linear-gradient(135deg,#EC4899,#BE185D)}
.td-hist-content{flex:1;min-width:0;padding-top:2px}
.td-hist-text{font-size:12px;color:var(--text-secondary);line-height:1.55}
.td-hist-text strong{font-weight:700;color:var(--text)}
.td-hist-text em{font-style:normal;color:#A78BFA;font-weight:600}
.td-hist-time{font-size:10px;color:var(--text-secondary);opacity:.7;margin-top:3px}
/* ===== Field editor popover ===== */
.td-popover{position:absolute;z-index:400;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.45);padding:10px;min-width:220px;max-width:320px;max-height:320px;overflow-y:auto;font-family:inherit}
.td-popover::-webkit-scrollbar{width:5px}
.td-popover::-webkit-scrollbar-track{background:transparent}
.td-popover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.td-popover-title{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin:0 4px 8px;padding:0}
.td-popover-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s}
.td-popover-opt:hover{background:var(--surface-hover)}
.td-popover-opt.active{background:rgba(124,58,237,.15);color:#A78BFA}
.td-popover-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.td-popover-mini{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(124,58,237,.15));color:#C4B5FD;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td-popover-opt-sub{font-size:11px;color:var(--text-secondary);margin-left:auto}
.td-popover-input{width:100%;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box}
.td-popover-input:focus{border-color:rgba(124,58,237,.5)}
.td-popover-input[type="datetime-local"]{color-scheme:dark}
.td-popover-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.td-popover-btn{flex:1;padding:8px 10px;background:rgba(124,58,237,.9);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.td-popover-btn:hover{background:rgb(124,58,237)}
.td-popover-btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.td-popover-btn.ghost:hover{background:var(--surface-hover);color:var(--text)}
/* Surface clickable fields to signal editability */
.td-field-value,.td-chip-status,.td-chip-close,.td-chip-add{cursor:pointer}
.td-right{background:linear-gradient(180deg,var(--surface) 0%,rgba(0,0,0,.08) 100%);border-left:1px solid var(--border);display:flex;flex-direction:column;max-height:calc(100vh - 135px);position:relative}
.td-right-head{padding:16px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;background:linear-gradient(180deg,rgba(124,58,237,.04) 0%,transparent 100%)}
.td-right-title{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:700;color:var(--text);min-width:0;flex:1}
.td-right-title-row{display:flex;align-items:center;gap:8px}
.td-right-title svg{width:16px;height:16px;color:var(--text-secondary)}
.td-right-title-context{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.1px;display:flex;align-items:center;flex-wrap:wrap;gap:0;line-height:1.35;min-width:0}
.td-right-title-context.empty{display:none}
.td-right-title-context > span{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.td-right-title-context #tdChatContextMain,
.td-right-title-context #tdSubChatContextMain{flex-shrink:1;min-width:0}
.td-right-title-context .sep{color:var(--text-secondary);opacity:.5;margin:0 8px;font-weight:400;flex-shrink:0;width:auto}
.td-right-title-context .sub{color:#C4B5FD;font-weight:600;font-size:13px;flex-shrink:1;min-width:0}
/* Right-side actions cluster in the chat header (scope pill + kebab) */
.td-right-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Sub-line right under the title showing whether you're viewing main vs sub-task chat */
.td-chat-scope-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:10px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);color:#C4B5FD;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;width:fit-content;flex-shrink:0;max-width:160px;overflow:hidden;white-space:nowrap}
.td-chat-scope-pill svg{width:9px;height:9px;flex-shrink:0}
.td-chat-scope-pill > span{overflow:hidden;text-overflow:ellipsis}
.td-chat-scope-pill.main{background:rgba(124,58,237,.06);color:var(--text-secondary);border-color:rgba(255,255,255,.08)}
/* Small sub-task context badge above chat bubbles (shown for sub-task chat messages) */
.td-comment-ctx-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;margin-bottom:4px;border-radius:6px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.22);font-size:10px;font-weight:600;color:#C4B5FD;max-width:100%;overflow:hidden}
.td-comment-ctx-id{font-family:ui-monospace,Menlo,monospace;letter-spacing:.3px;white-space:nowrap;flex-shrink:0}
.td-comment-ctx-sep{opacity:.5}
.td-comment-ctx-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.td-right-body{flex:1;overflow-y:auto;padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.td-right-body::-webkit-scrollbar{width:5px}
.td-right-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px}
.td-right-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
/* Day separator: centered chip with hairline rules on either side */
.td-comment-day{align-self:stretch;display:flex;align-items:center;gap:10px;font-size:10.5px;color:var(--text-secondary);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin:6px 0 4px}
.td-comment-day::before,.td-comment-day::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.td-comment{display:flex;gap:10px;align-items:flex-end;animation:tdMsgIn .25s ease-out}
.td-comment.me{flex-direction:row-reverse}
@keyframes tdMsgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.td-comment-av{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#7C3AED,#6b21a8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.25);letter-spacing:.3px}
.td-comment.me .td-comment-av{background:linear-gradient(135deg,#A78BFA,#7C3AED)}
.td-comment-av.dw{background:linear-gradient(135deg,#10B981,#059669)}
.td-comment-av.jd{background:linear-gradient(135deg,#F59E0B,#D97706)}
.td-comment-av.mh{background:linear-gradient(135deg,#3B82F6,#2563EB)}
.td-comment-av.jp{background:linear-gradient(135deg,#EC4899,#BE185D)}
.td-comment-body{max-width:78%;display:flex;flex-direction:column;gap:4px;min-width:0}
.td-comment.me .td-comment-body{align-items:flex-end}
.td-comment-name{font-size:11.5px;font-weight:600;color:var(--text-secondary);padding:0 4px}
.td-comment-name .role{display:inline-block;margin-left:5px;color:#34D399;font-weight:600;font-size:10px}
.td-comment-bubble{background:var(--card-bg);border:1px solid rgba(255,255,255,.06);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:13px;color:var(--text);line-height:1.45;box-shadow:0 1px 3px rgba(0,0,0,.15);word-wrap:break-word;overflow-wrap:break-word}
.td-comment.me .td-comment-bubble{background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;border-color:rgba(167,139,250,.3);border-radius:14px 14px 4px 14px;box-shadow:0 2px 8px rgba(124,58,237,.25)}
.td-comment.me .td-comment-bubble.deleted{background:rgba(124,58,237,.5);opacity:.85;font-style:italic;font-size:12px}
.td-comment-time{font-size:10px;color:var(--text-secondary);padding:0 4px;letter-spacing:.2px}
/* Attachment bubbles — files + image grids */
.td-comment-file{background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;padding:10px 14px;border-radius:14px 14px 4px 14px;display:flex;align-items:center;gap:11px;max-width:260px;box-shadow:0 2px 8px rgba(124,58,237,.25);border:1px solid rgba(167,139,250,.3)}
.td-comment-file svg{width:24px;height:24px;flex-shrink:0;opacity:.95}
.td-comment-file-info{flex:1;min-width:0}
.td-comment-file-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-comment-file-size{font-size:10.5px;opacity:.8;margin-top:1px}
.td-img-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;max-width:240px;border-radius:12px;overflow:hidden}
.td-img-grid img,.td-img-grid .td-img-ph{width:100%;height:84px;object-fit:cover;background:linear-gradient(135deg,#6b21a8,#7C3AED)}
.td-img-grid .td-img-ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
/* Single-thumbnail preview (cleaner than the broken-looking grid placeholders) */
.td-img-thumb-wrap{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.25);max-width:240px;cursor:default}
.td-img-thumb{width:42px;height:42px;border-radius:8px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.td-img-thumb svg{width:22px;height:22px;opacity:.95}
.td-img-thumb-count{font-size:12px;font-weight:600;letter-spacing:.2px}
/* Empty state — shown when a sub-task has no messages yet */
.td-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:10px;color:var(--text-secondary);flex:1}
.td-chat-empty-icon{width:48px;height:48px;border-radius:12px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);display:flex;align-items:center;justify-content:center;color:#A78BFA;margin-bottom:4px}
.td-chat-empty-icon svg{width:22px;height:22px}
.td-chat-empty-title{font-size:13px;font-weight:600;color:var(--text)}
.td-chat-empty-sub{font-size:11.5px;line-height:1.5;max-width:240px}
/* Composer / input area */
.td-input-wrap{padding:12px 14px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;background:linear-gradient(0deg,rgba(0,0,0,.12) 0%,transparent 100%)}
.td-input-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:var(--card-bg);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s,border-color .15s}
.td-input-btn:hover{color:#C4B5FD;border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.08)}
.td-input-btn svg{width:15px;height:15px}
.td-input{flex:1;height:38px;border:1px solid var(--border);border-radius:9px;padding:0 14px;font-family:inherit;font-size:13px;color:var(--text);background:var(--card-bg);outline:none;transition:border-color .15s,box-shadow .15s}
.td-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.td-input::placeholder{color:var(--text-secondary);opacity:.7}
.td-send{width:38px;height:38px;border-radius:9px;border:none;background:linear-gradient(135deg,#7C3AED,#6D28D9);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(124,58,237,.3);transition:transform .15s,box-shadow .15s}
.td-send:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,.4)}
.td-send:active{transform:translateY(0)}
.td-send svg{width:16px;height:16px}
/* ============================================================================
LIGHT CONSISTENCY OVERRIDES (Tricky)
The prototype hardcoded rgba(255,255,255,…) borders/backgrounds/hovers that
were meant for a dark canvas and vanish on our light UI. These rules restore
visible structure with light surfaces, our borders, and the purple accent.
============================================================================ */
#tasksSection .tasks-btn-ghost { border-color: var(--border); }
#tasksSection .tasks-btn-ghost:hover { background: var(--surface-hover); }
#tasksSection .tasks-view-toggle { background: var(--surface); border-color: var(--border); }
#tasksSection .tasks-view-btn.active { background: #fff; color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
#tasksSection .tasks-board-card { background: #fff; border-color: var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
#tasksSection .tasks-board-card:hover { border-color: #D9D4E4; box-shadow: 0 8px 22px rgba(0,0,0,.10); }
#tasksSection .tbd-col { background: #FAFAFB; border-color: var(--border); }
#tasksSection .tbd-col:hover { background: #F5F4F8; border-color: #E0DCEA; }
#tasksSection .tbd-col.col-dragging { background: #EFEDF4; }
#tasksSection .tbd-card { border-bottom-color: #ECEAF1; }
#tasksSection .tbd-card:hover { background: #F7F6FA; border-bottom-color: rgba(69,46,90,.22); }
#tasksSection .tbd-card.dragging { background: #F2EFF7; }
#tasksSection .tbd-col-add:hover { background: var(--surface-hover); color: var(--primary); }
#tasksSection .td-overlay { background: rgba(28,28,28,.45); }
#tasksSection .td-modal { box-shadow: 0 20px 60px rgba(0,0,0,.25); }
#tasksSection .td-comment-bubble { border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
#tasksSection .td-comment.me .td-comment-bubble { background: var(--primary); color: #fff; border-color: transparent; }
#tasksSection .td-input-wrap { border-top: 1px solid var(--border); }
#tasksSection .td-section { border-color: var(--border); }
#tasksSection .td-att-item { border-color: var(--border); }
#tasksSection .tasks-modal { box-shadow: 0 20px 60px rgba(0,0,0,.25); }
#tasksSection .tasks-kebab-menu { box-shadow: 0 8px 30px rgba(0,0,0,.18); }
#tasksSection .tasks-kebab-item:hover { background: var(--surface-hover); }
/* Scrollbars → light */
#tasksSection ::-webkit-scrollbar-thumb { background: #D9D4E4; border-radius: 4px; }
#tasksSection * { scrollbar-color: #D9D4E4 transparent; }
#tasksSection .tasks-board-stat { background: var(--surface); border-color: var(--border); }
#tasksSection .tbd-col-count { background: var(--surface-hover); color: var(--text-secondary); }
#tasksSection .tbd-col-kebab:hover, #tasksSection .tbd-card-kebab:hover { background: var(--surface-hover); color: var(--primary); }
/* ============================================================================
KANBAN POLISH — make task cards look like real, movable cards and the
columns like clear lanes (the prototype's borderless cards read as floating
text on light UI and didn't signal drag-ability).
============================================================================ */
#tasksSection .tbd-kanban { gap: 18px; padding-top: 4px; }
/* Columns = distinct light lanes */
#tasksSection .tbd-col {
background: #F1EFF5;
border: 1px solid #E7E3EF;
border-radius: 14px;
padding: 12px 12px 16px;
gap: 0;
}
#tasksSection .tbd-col:hover { background: #EEEBF3; border-color: #DCD6E8; }
#tasksSection .tbd-col-head { background: transparent; padding: 4px 4px 10px; margin: 0 0 6px; }
#tasksSection .tbd-col.col-drop-before { box-shadow: inset 3px 0 0 var(--primary); }
#tasksSection .tbd-col.col-drop-after { box-shadow: inset -3px 0 0 var(--primary); }
/* Cards = solid white, bordered, draggable */
#tasksSection .tbd-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 12px 11px;
margin: 0 0 9px;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
cursor: grab;
transition: box-shadow .15s, border-color .15s, transform .12s;
}
#tasksSection .tbd-card:hover {
background: #fff;
border-color: #C9BEDC;
box-shadow: 0 5px 16px rgba(69,46,90,.13);
transform: translateY(-1px);
}
#tasksSection .tbd-card:active { cursor: grabbing; }
#tasksSection .tbd-card.dragging { opacity: .55; transform: rotate(1.5deg); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
/* Keep the kebab clear of the title text */
#tasksSection .tbd-card .tbd-card-title { padding-right: 20px; }
/* Add-task button sits inside the lane, full width */
#tasksSection .tbd-col-add {
width: 100%; justify-content: flex-start;
background: transparent; border: 1px dashed transparent; border-radius: 8px;
}
#tasksSection .tbd-col-add:hover { background: #fff; border-color: var(--border); color: var(--primary); }
/* "Add list" floating button → tidy tile */
#tasksSection .tbd-col-add-floating {
flex: 0 0 52px; width: 52px; height: 52px; align-self: flex-start;
border: 1px dashed #C9C2D8; border-radius: 12px; background: #F7F6FA; color: var(--primary);
}
#tasksSection .tbd-col-add-floating:hover { background: #fff; border-color: var(--primary); }
/* ===== Drag handle, drop indicators, priority accents, empty drop zone ===== */
#tasksSection .tbd-card { position: relative; padding-left: 22px; }
#tasksSection .tbd-card-grip {
position: absolute; left: 3px; top: 9px; width: 15px; height: 18px;
display: flex; align-items: center; justify-content: center;
color: #B9B1CB; cursor: grab; opacity: 0; transition: opacity .15s; border-radius: 4px;
}
#tasksSection .tbd-card:hover .tbd-card-grip { opacity: 1; }
#tasksSection .tbd-card-grip:hover { background: var(--surface-hover); color: var(--primary); }
#tasksSection .tbd-card-grip:active { cursor: grabbing; }
#tasksSection .tbd-card-grip svg { width: 13px; height: 13px; }
#tasksSection .tbd-card.pri-high { box-shadow: inset 3px 0 0 #EF4444, 0 1px 2px rgba(0,0,0,.05); }
#tasksSection .tbd-card.pri-medium { box-shadow: inset 3px 0 0 #F59E0B, 0 1px 2px rgba(0,0,0,.05); }
#tasksSection .tbd-card.pri-low { box-shadow: inset 3px 0 0 #A78BFA, 0 1px 2px rgba(0,0,0,.05); }
#tasksSection .tbd-card.pri-high:hover { box-shadow: inset 3px 0 0 #EF4444, 0 5px 16px rgba(69,46,90,.13); }
#tasksSection .tbd-card.pri-medium:hover { box-shadow: inset 3px 0 0 #F59E0B, 0 5px 16px rgba(69,46,90,.13); }
#tasksSection .tbd-card.pri-low:hover { box-shadow: inset 3px 0 0 #A78BFA, 0 5px 16px rgba(69,46,90,.13); }
#tasksSection .tbd-col-body { display: flex; flex-direction: column; flex: 1; min-height: 64px; }
#tasksSection .tbd-drop-line { height: 3px; background: var(--primary); border-radius: 2px; margin: 1px 0 8px; box-shadow: 0 0 0 1px rgba(69,46,90,.18); }
#tasksSection .tbd-col.is-drop { background: #EAE6F2; border-color: #C9BEDC; }
#tasksSection .tbd-col-empty { text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 20px 0; border: 1px dashed transparent; border-radius: 8px; }
#tasksSection .tbd-col.is-drop .tbd-col-empty { border-color: #C9BEDC; color: var(--primary); }