/* =============================================
   TODO / TASKS PAGE — Theme-aware (Light + Dark)
   ============================================= */
.todo-page{display:flex;height:100%;overflow:hidden;background:var(--bg-primary,#ffffff);color:var(--text-primary,#111827);font-family:var(--font-family,'Inter',sans-serif)}

/* --- Sidebar --- */
.todo-sidebar{width:260px;min-width:160px;max-width:520px;background:var(--bg-secondary,#f9fafb);border-right:none;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
/* --- Sidebar resize handle --- */
.todo-sidebar-resize{width:5px;cursor:col-resize;background:var(--border-color,#e5e7eb);flex-shrink:0;transition:background .15s;position:relative;z-index:10}
.todo-sidebar-resize:hover,.todo-sidebar-resize.resizing{background:var(--primary,#6366f1)}
.todo-sidebar-resize::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:40px;background:inherit;border-radius:2px;opacity:.6}
.todo-sidebar::-webkit-scrollbar{width:4px}
.todo-sidebar::-webkit-scrollbar-thumb{background:var(--text-tertiary,#9ca3af);border-radius:2px;opacity:.4}
.todo-sidebar-header{padding:20px 16px 10px;font-size:17px;font-weight:700;color:var(--text-primary,#111827);display:flex;align-items:center;gap:10px}
.todo-sidebar-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.todo-sidebar-icon i{color:#fff!important;font-size:16px}
.todo-sidebar-header i{font-size:20px;color:var(--primary,#6366f1)}
.todo-nav{list-style:none;padding:0;margin:0}
.todo-nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;color:var(--text-secondary,#6b7280);font-size:14px;transition:all .15s;border-left:3px solid transparent}
.todo-nav-item:hover{background:rgba(99,102,241,.04);color:var(--text-primary,#111827)}
.todo-nav-item.active{background:rgba(99,102,241,.1);color:var(--primary,#6366f1);border-left-color:var(--primary,#6366f1);font-weight:600}
.todo-nav-item i{width:20px;text-align:center;font-size:15px}
.todo-nav-item.active i{color:var(--primary,#6366f1)}
.todo-nav-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-nav-badge{margin-left:auto;background:rgba(255,255,255,.08);color:var(--text-secondary,#aaa);font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;min-width:20px;text-align:center}
.todo-nav-item.active .todo-nav-badge{background:rgba(99,91,255,.2);color:var(--primary,#635bff)}
.todo-nav-badge.overdue{background:rgba(239,68,68,.15);color:#ef4444}
.todo-nav-badge.zero{display:none}
.todo-nav-divider{height:1px;background:var(--border-color,#e5e7eb);margin:8px 16px}

/* --- Main area --- */
.todo-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* --- Header bar --- */
.todo-header{display:flex;align-items:center;gap:14px;padding:18px 28px;border-bottom:1px solid var(--border-color,#e5e7eb);flex-shrink:0;background:rgba(99,102,241,.015)}
.todo-header-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0;box-shadow:0 4px 14px rgba(99,102,241,.25)}
.todo-header-text{display:flex;flex-direction:column;gap:2px}
.todo-header-title{font-size:20px;font-weight:800;color:var(--text-primary,#111827);letter-spacing:-.4px;line-height:1.2}
.todo-header-subtitle{font-size:12px;color:var(--text-secondary,#6b7280);line-height:1.3}
.todo-header-count{font-size:12px;font-weight:600;color:var(--primary,#6366f1);background:rgba(99,102,241,.1);padding:4px 12px;border-radius:20px;white-space:nowrap}
.todo-header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* --- Search --- */
.todo-search-wrap{position:relative;display:flex;align-items:center}
.todo-search-wrap i{position:absolute;left:10px;color:var(--text-tertiary,#9ca3af);font-size:13px;pointer-events:none}
.todo-search-input{background:var(--bg-tertiary,#f3f4f6);border:1px solid var(--border-color,#e5e7eb);color:var(--text-primary,#111827);border-radius:8px;padding:7px 12px 7px 32px;font-size:13px;outline:none;width:220px;transition:all .2s}
.todo-search-input:focus{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.04);width:260px}
.todo-search-input::placeholder{color:var(--text-tertiary,#9ca3af)}

/* --- Toolbar / Filter Dropdowns --- */
.todo-toolbar{display:flex;flex-direction:column;gap:6px;padding:10px 28px;border-bottom:1px solid var(--border-color,#e5e7eb);flex-shrink:0}
.todo-filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.todo-filter-label{font-size:12px;font-weight:600;color:var(--text-secondary,#6b7280);display:flex;align-items:center;gap:5px;margin-right:4px}
.todo-filter-label i{font-size:11px}

.todo-filter-dropdown-wrap{position:relative}
.todo-filter-btn{background:var(--bg-tertiary,#f3f4f6);color:var(--text-secondary,#6b7280);border:1px solid var(--border-color,#e5e7eb);border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap}
.todo-filter-btn:hover{background:var(--sidebar-hover,#e5e7eb);color:var(--text-primary,#111827);border-color:var(--border-light,#d1d5db)}
.todo-filter-btn.active{background:rgba(99,102,241,.1);color:var(--primary,#6366f1);border-color:rgba(99,102,241,.3)}
.todo-filter-btn i{font-size:11px}
.todo-filter-chevron{font-size:9px!important;margin-left:2px;opacity:.5;transition:transform .2s}

.todo-filter-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;background:var(--card-bg,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:var(--shadow-lg,0 10px 20px -5px rgba(0,0,0,.12));z-index:100;display:none;overflow:hidden}
.todo-filter-dropdown.open{display:block;animation:todoFadeIn .15s ease}
.todo-filter-opt{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;color:var(--text-secondary,#6b7280);cursor:pointer;transition:all .1s}
.todo-filter-opt:hover{background:var(--sidebar-hover,#f3f4f6);color:var(--text-primary,#111827)}
.todo-filter-opt i{font-size:13px;width:16px;text-align:center;opacity:.7}
.todo-filter-clear{border-top:1px solid var(--border-color,#e5e7eb);color:var(--text-tertiary,#9ca3af);font-size:12px}
.todo-filter-clear:hover{color:var(--text-primary,#111827)}

/* Priority dots inside filter dropdown */
.todo-priority-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.todo-priority-dot.high{background:#ef4444}
.todo-priority-dot.medium{background:#f59e0b}
.todo-priority-dot.low{background:#6b7280}

/* Active filter pills */
.todo-active-filters{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.todo-active-filter-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:14px;font-size:11px;font-weight:600;background:rgba(99,102,241,.1);color:var(--primary,#6366f1);cursor:pointer;transition:all .15s}
.todo-active-filter-pill:hover{background:rgba(99,102,241,.18)}
.todo-active-filter-pill i:last-child{font-size:9px;opacity:.6;margin-left:2px}
.todo-clear-all-filters{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:14px;font-size:11px;font-weight:500;color:var(--text-tertiary,#9ca3af);cursor:pointer;transition:color .15s}
.todo-clear-all-filters:hover{color:#ef4444}

@keyframes todoFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* --- Add button --- */
.todo-add-btn{background:linear-gradient(135deg,#6366f1 0%,#7c3aed 100%);color:#fff;border:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all .2s;box-shadow:0 2px 10px rgba(99,102,241,.25)}
.todo-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.35)}
.todo-add-btn i{font-size:13px}

/* --- Quick Add row --- */
.todo-quick-add{display:flex;align-items:center;gap:10px;padding:10px 28px;border-bottom:1px solid var(--border-color,#e5e7eb);transition:all .2s}
.todo-quick-add.focused{background:rgba(99,102,241,.04);border-bottom-color:rgba(99,102,241,.2)}
.todo-quick-icon{color:var(--primary,#6366f1);font-size:14px;opacity:.5;transition:opacity .2s}
.todo-quick-add.focused .todo-quick-icon{opacity:1}
.todo-quick-input{flex:1;background:transparent;border:none;color:var(--text-primary,#111827);font-size:14px;outline:none;padding:4px 0}
.todo-quick-input::placeholder{color:var(--text-tertiary,#9ca3af)}

/* --- Task List --- */
.todo-list{flex:1;overflow-y:auto;padding:6px 20px}
.todo-list::-webkit-scrollbar{width:5px}
.todo-list::-webkit-scrollbar-thumb{background:var(--text-tertiary,#d1d5db);border-radius:3px;opacity:.3}

/* Section titles inside list */
.todo-section-title{font-size:11px;font-weight:700;color:var(--text-secondary,#6b7280);text-transform:uppercase;letter-spacing:.8px;padding:14px 8px 6px;display:flex;align-items:center;gap:6px}

/* --- Task Card --- */
.todo-card{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-radius:10px;cursor:pointer;transition:all .15s;position:relative;border:1px solid transparent;margin-bottom:2px}
.todo-card:hover{background:var(--sidebar-hover,#f3f4f6);border-color:var(--border-color,#e5e7eb)}
.todo-card.completed{opacity:.45}
.todo-card.dragging{opacity:.3;transform:scale(.97)}
.todo-card.drag-over{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.06)}

/* Checkbox / Status Indicator */
.todo-checkbox{width:22px;height:22px;border-radius:50%;border:none;flex-shrink:0;cursor:pointer;margin-top:2px;transition:all .2s;display:flex;align-items:center;justify-content:center;position:relative;background:transparent}
.todo-checkbox:hover{transform:scale(1.15)}
.todo-check-icon{font-size:11px;color:#fff;transition:color .2s}
.todo-status-ring{display:block}
.todo-checkbox.status-completed{background:#22c55e;border-radius:50%;width:20px;height:20px}
.todo-checkbox.status-inbox .todo-status-ring circle{transition:stroke .2s}
.todo-checkbox.status-in_review .todo-status-ring circle{transition:stroke .2s}
.todo-checkbox.status-in_progress .todo-status-ring circle{transition:stroke .2s}
.todo-checkbox.status-waiting .todo-status-ring circle{transition:stroke .2s}

/* Status Picker Dropdown (ClickUp-style) */
.todo-status-picker{position:fixed;z-index:10001;background:var(--card-bg,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.15);min-width:200px;padding:6px 0;animation:todoSpFadeIn .15s ease}
@keyframes todoSpFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.todo-sp-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-tertiary,#9ca3af);padding:8px 14px 4px;user-select:none}
.todo-sp-divider{border:none;border-top:1px solid var(--border-color,#e5e7eb);margin:4px 0}
.todo-sp-item{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;transition:background .12s;font-size:13px;font-weight:500;color:var(--text-primary,#111827);position:relative}
.todo-sp-item:hover{background:var(--sidebar-hover,#f3f4f6)}
.todo-sp-item.active{font-weight:700}
.todo-sp-item.active .todo-sp-label{color:var(--text-primary,#111827)}
.todo-sp-indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px}
.todo-sp-indicator svg{display:block}
.todo-sp-label{flex:1}
.todo-sp-check{font-size:11px;color:var(--primary,#6366f1);margin-left:auto}

/* Card content */
.todo-card-body{flex:1;min-width:0}
.todo-card-title{font-size:14px;font-weight:500;color:var(--text-primary,#111827);line-height:1.45}
.todo-card.completed .todo-card-title{text-decoration:line-through;color:var(--text-tertiary,#9ca3af)}
.todo-card-desc{font-size:12px;color:var(--text-secondary,#6b7280);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:400px}
.todo-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.todo-card-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:5px;font-weight:500}
.todo-card-tag{background:var(--bg-tertiary,#f3f4f6);color:var(--text-secondary,#6b7280)}
.todo-card-tag.due-today{background:rgba(245,158,11,.1);color:#d97706}
.todo-card-tag.overdue{background:rgba(239,68,68,.1);color:#dc2626}
.todo-card-tag.priority-high{background:rgba(239,68,68,.08);color:#dc2626}
.todo-card-tag.priority-low{background:rgba(107,114,128,.08);color:#6b7280}
.todo-card-tag.assignee{background:rgba(99,102,241,.08);color:#6366f1}
.todo-card-tag.team{background:rgba(16,185,129,.08);color:#059669}
.todo-card-tag.channel{background:rgba(56,189,248,.08);color:#0284c7}
.todo-card-tag.reminder{background:rgba(168,85,247,.08);color:#9333ea}
.todo-card-tag i{font-size:10px}

/* Card actions (show on hover) */
.todo-card-right{flex-shrink:0;display:flex;align-items:center}
.todo-card-actions{display:flex;gap:3px;opacity:0;transition:opacity .15s}
.todo-card:hover .todo-card-actions{opacity:1}
.todo-card-action{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary,#9ca3af);cursor:pointer;transition:all .15s;font-size:12px}
.todo-card-action:hover{background:var(--bg-tertiary,#f3f4f6);color:var(--text-primary,#111827)}
.todo-card-action.danger:hover{background:rgba(239,68,68,.08);color:#ef4444}

/* --- Empty state --- */
.todo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--text-secondary,#6b7280)}
.todo-empty i{font-size:52px;margin-bottom:18px;opacity:.25;color:var(--primary,#6366f1)}
.todo-empty-title{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--text-secondary,#6b7280)}
.todo-empty-sub{font-size:13px;color:var(--text-tertiary,#9ca3af)}

/* =============================================
   TASK DETAIL PANEL (slide-in)
   ============================================= */
.todo-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px)}
.todo-detail-overlay.show{opacity:1;pointer-events:auto}

.todo-detail-panel{position:fixed;top:0;right:-540px;width:520px;max-width:96vw;height:100vh;background:var(--card-bg,#ffffff);z-index:9999;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-xl,-6px 0 40px rgba(0,0,0,.15));pointer-events:none;border-left:1px solid var(--border-color,#e5e7eb)}
.todo-detail-panel.show{right:0;pointer-events:auto}

.todo-detail-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border-color,#e5e7eb);flex-shrink:0}
.todo-detail-close{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary,#6b7280);cursor:pointer;transition:all .15s;font-size:16px}
.todo-detail-close:hover{background:var(--bg-tertiary,#f3f4f6);color:var(--text-primary,#111827)}
.todo-detail-title-wrap{flex:1;min-width:0}

.todo-detail-body{flex:1;overflow-y:auto;padding:22px}
.todo-detail-body::-webkit-scrollbar{width:5px}
.todo-detail-body::-webkit-scrollbar-thumb{background:var(--text-tertiary,#d1d5db);border-radius:3px;opacity:.3}

.todo-detail-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary,#6b7280);margin:16px 0 8px;padding-top:8px;border-top:1px solid var(--border-color,#e5e7eb);display:flex;align-items:center;gap:6px}
.todo-detail-section-title i{font-size:12px;color:var(--primary,#6366f1)}

.todo-detail-field{margin-bottom:18px}
.todo-detail-label{font-size:12px;font-weight:600;color:var(--text-secondary,#6b7280);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.todo-detail-value{font-size:14px;color:var(--text-primary,#111827)}

/* Title editable */
.todo-detail-title-input{width:100%;background:transparent;border:none;color:var(--text-primary,#111827);font-size:18px;font-weight:700;outline:none;padding:4px 0}
.todo-detail-title-input::placeholder{color:var(--text-tertiary,#9ca3af)}

/* Description editable */
.todo-detail-desc{width:100%;min-height:80px;background:var(--bg-tertiary,#f3f4f6);border:1px solid var(--border-color,#e5e7eb);color:var(--text-primary,#111827);border-radius:8px;padding:10px 14px;font-size:13px;outline:none;resize:vertical;font-family:inherit;transition:border-color .2s;line-height:1.6}
.todo-detail-desc:focus{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.03)}

/* Field rows */
.todo-detail-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-color,#e5e7eb)}
.todo-detail-row-label{width:120px;font-size:12px;font-weight:600;color:var(--text-secondary,#6b7280);text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;display:flex;align-items:center;gap:6px}
.todo-detail-row-label i{font-size:13px;width:16px;text-align:center;color:var(--primary,#6366f1);opacity:.7}
.todo-detail-row-value{flex:1;min-width:0}

/* "Go to conversation" link in detail */
.todo-go-conversation{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--primary,#6366f1);background:rgba(99,102,241,.08);text-decoration:none;transition:all .15s;cursor:pointer}
.todo-go-conversation:hover{background:rgba(99,102,241,.15);transform:translateX(2px)}
.todo-go-conversation i{font-size:13px}

/* Selects and inputs in detail */
.todo-detail-select,.todo-detail-input{background:var(--bg-tertiary,#f3f4f6);border:1px solid var(--border-color,#e5e7eb);color:var(--text-primary,#111827);border-radius:7px;padding:7px 11px;font-size:13px;outline:none;width:100%;transition:all .2s}
.todo-detail-select:focus,.todo-detail-input:focus{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.04)}
.todo-detail-select option{background:var(--card-bg,#fff);color:var(--text-primary,#111827)}

/* Status pills in detail */
.todo-status-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border-radius:14px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;opacity:.45;margin-right:4px;background:rgba(0,0,0,.04);color:var(--text-secondary,#6b7280)}
.todo-status-pill.active{opacity:1!important;font-weight:700}
.todo-status-pill.inbox{background:rgba(156,163,175,.1);color:#6b7280}
.todo-status-pill.inbox.active{background:rgba(156,163,175,.2);color:#374151}
.todo-status-pill.in_review{background:rgba(234,179,8,.1);color:#a16207}
.todo-status-pill.in_review.active{background:rgba(234,179,8,.2);color:#854d0e}
.todo-status-pill.in_progress{background:rgba(16,185,129,.1);color:#047857}
.todo-status-pill.in_progress.active{background:rgba(16,185,129,.2);color:#065f46}
.todo-status-pill.waiting{background:rgba(249,115,22,.1);color:#c2410c}
.todo-status-pill.waiting.active{background:rgba(249,115,22,.2);color:#9a3412}
.todo-status-pill.completed{background:rgba(34,197,94,.1);color:#15803d}
.todo-status-pill.completed.active{background:rgba(34,197,94,.2);color:#166534}
.todo-status-pill:hover{opacity:.75}

/* Priority select pills */
.todo-priority-pills{display:flex;gap:6px}
.todo-priority-pill{padding:5px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border-color,#e5e7eb);transition:all .15s;background:transparent;color:var(--text-secondary,#6b7280)}
.todo-priority-pill:hover{background:var(--bg-tertiary,#f3f4f6);border-color:var(--border-light,#d1d5db)}
.todo-priority-pill.active.high{background:rgba(239,68,68,.1);color:#dc2626;border-color:rgba(239,68,68,.4)}
.todo-priority-pill.active.medium{background:rgba(245,158,11,.1);color:#d97706;border-color:rgba(245,158,11,.4)}
.todo-priority-pill.active.low{background:rgba(107,114,128,.1);color:#6b7280;border-color:rgba(107,114,128,.4)}

/* Source message preview */
.todo-source-preview{background:var(--bg-tertiary,#f3f4f6);border-left:3px solid var(--primary,#6366f1);padding:10px 14px;border-radius:0 8px 8px 0;font-size:13px;color:var(--text-secondary,#6b7280);margin-top:6px;line-height:1.55}

/* Attachments */
.todo-attachments{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.todo-att-item{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg-tertiary,#f3f4f6);border-radius:7px;font-size:12px;color:var(--text-secondary,#6b7280);transition:background .15s}
.todo-att-item:hover{background:var(--sidebar-hover,#e5e7eb)}
.todo-att-item i{font-size:14px;color:var(--primary,#6366f1)}
.todo-att-item .att-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-att-item .att-del{cursor:pointer;color:var(--text-tertiary,#9ca3af);padding:2px 4px;border-radius:4px;transition:color .15s}
.todo-att-item .att-del:hover{color:#ef4444}

/* Detail footer */
.todo-detail-footer{padding:14px 22px;border-top:1px solid var(--border-color,#e5e7eb);display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--bg-secondary,#f9fafb)}
.todo-detail-save{background:var(--primary,#6366f1);color:#fff;border:none;border-radius:8px;padding:8px 22px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(99,102,241,.2)}
.todo-detail-save:hover{background:var(--primary-dark,#4f46e5);box-shadow:0 4px 12px rgba(99,102,241,.35)}
.todo-detail-delete{background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.todo-detail-delete:hover{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.5)}
.todo-detail-created{margin-left:auto;font-size:11px;color:var(--text-tertiary,#9ca3af)}

/* =============================================
   CUSTOM FIELDS SETTINGS (inside todo page)
   ============================================= */
.todo-settings-section{padding:24px 28px}
.todo-settings-title{font-size:17px;font-weight:800;color:var(--text-primary,#111827);margin-bottom:18px;display:flex;align-items:center;gap:8px;letter-spacing:-.3px}
.todo-settings-title i{color:var(--primary,#6366f1)}

.todo-cf-list{display:flex;flex-direction:column;gap:8px}
.todo-cf-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-tertiary,#f3f4f6);border-radius:10px;border:1px solid var(--border-color,#e5e7eb);transition:border-color .15s}
.todo-cf-item:hover{border-color:var(--border-light,#d1d5db)}
.todo-cf-item .cf-name{flex:1;font-size:14px;font-weight:500;color:var(--text-primary,#111827)}
.todo-cf-item .cf-type{font-size:12px;color:var(--text-secondary,#6b7280);background:var(--bg-secondary,#f9fafb);padding:3px 10px;border-radius:5px;font-weight:500}
.todo-cf-item .cf-actions{display:flex;gap:4px}
.todo-cf-item .cf-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary,#6b7280);cursor:pointer;transition:all .15s;font-size:12px}
.todo-cf-item .cf-btn:hover{background:var(--sidebar-hover,#e5e7eb);color:var(--text-primary,#111827)}
.todo-cf-item .cf-btn.danger:hover{background:rgba(239,68,68,.08);color:#ef4444}

.todo-cf-form{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--bg-tertiary,#f3f4f6);border-radius:10px;border:1px solid var(--border-color,#e5e7eb);margin-top:14px}
.todo-cf-form-row{display:flex;gap:10px;align-items:center}
.todo-cf-form-row input,.todo-cf-form-row select{background:var(--card-bg,#fff);border:1px solid var(--border-color,#e5e7eb);color:var(--text-primary,#111827);border-radius:7px;padding:8px 11px;font-size:13px;outline:none;flex:1;transition:border-color .2s}
.todo-cf-form-row input:focus,.todo-cf-form-row select:focus{border-color:var(--primary,#6366f1)}
.todo-cf-form-row select{max-width:160px}
.todo-cf-save-btn{background:var(--primary,#6366f1);color:#fff;border:none;border-radius:7px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;align-self:flex-start;transition:all .2s;box-shadow:0 2px 8px rgba(99,102,241,.2)}
.todo-cf-save-btn:hover{background:var(--primary-dark,#4f46e5);box-shadow:0 4px 12px rgba(99,102,241,.35)}

/* =============================================
   CREATE TASK MODAL (from messages)
   ============================================= */
.todo-create-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
.todo-create-modal-overlay.show{opacity:1;pointer-events:auto}
.todo-create-modal{background:var(--card-bg,#ffffff);border:1px solid var(--border-color,#e5e7eb);border-radius:14px;width:580px;max-width:94vw;max-height:90vh;overflow-y:auto;padding:24px;box-shadow:var(--shadow-xl,0 20px 40px rgba(0,0,0,.15))}
.todo-create-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:8px}
.todo-create-modal-header h3{font-size:17px;font-weight:700;color:var(--text-primary,#111827);margin:0;display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.todo-create-modal-header h3 i{color:var(--primary,#6366f1);font-size:18px;flex-shrink:0}
.todo-modal-close-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:var(--text-secondary,#6b7280);font-size:1rem;flex-shrink:0;transition:background .15s,color .15s}
.todo-modal-close-btn:hover{background:var(--bg-tertiary,#f3f4f6);color:var(--text-primary,#111827)}
.todo-create-modal .form-group{margin-bottom:14px}
.todo-create-modal .form-group label{font-size:12px;font-weight:600;color:var(--text-secondary,#6b7280);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;display:block}
.todo-create-modal .form-group input,
.todo-create-modal .form-group select,
.todo-create-modal .form-group textarea{width:100%;background:var(--bg-tertiary,#f3f4f6);border:1px solid var(--border-color,#e5e7eb);color:var(--text-primary,#111827);border-radius:7px;padding:9px 12px;font-size:13px;outline:none;font-family:inherit;transition:all .2s;box-sizing:border-box}
.todo-create-modal .form-group input:focus,
.todo-create-modal .form-group select:focus,
.todo-create-modal .form-group textarea:focus{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.04)}
.todo-create-modal .form-group textarea{min-height:60px;resize:vertical}
.todo-create-modal .form-row{display:flex;gap:10px}
.todo-create-modal .form-row .form-group{flex:1}
.todo-create-modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border-color,#e5e7eb)}
.todo-create-modal .modal-cancel{background:transparent;color:var(--text-secondary,#6b7280);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;padding:9px 18px;font-size:13px;cursor:pointer;font-weight:500;transition:all .15s}
.todo-create-modal .modal-cancel:hover{background:var(--bg-tertiary,#f3f4f6);color:var(--text-primary,#111827)}
.todo-create-modal .modal-submit{background:var(--primary,#6366f1);color:#fff;border:none;border-radius:8px;padding:9px 22px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(99,102,241,.25)}
.todo-create-modal .modal-submit:hover{background:var(--primary-dark,#4f46e5);box-shadow:0 4px 12px rgba(99,102,241,.4)}

/* =============================================
   MULTI-SELECT ASSIGNEE COMPONENT
   ============================================= */
.todo-multi-select-wrap{position:relative;width:100%}
.todo-multi-select-trigger{display:flex;align-items:center;gap:6px;background:var(--bg-tertiary,#f3f4f6);border:1px solid var(--border-color,#e5e7eb);border-radius:7px;padding:6px 10px;min-height:36px;cursor:pointer;transition:all .2s;flex-wrap:wrap}
.todo-multi-select-trigger:hover{border-color:var(--border-light,#d1d5db)}
.todo-multi-select-placeholder{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.todo-ms-arrow{font-size:10px;color:var(--text-secondary,#6b7280);margin-left:auto;flex-shrink:0;transition:transform .2s}
.todo-ms-none{font-size:13px;color:var(--text-tertiary,#9ca3af)}
.todo-ms-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(99,102,241,.12);color:#6366f1;border-radius:12px;padding:2px 10px 2px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.todo-ms-chip-x{cursor:pointer;font-size:13px;font-weight:700;margin-left:2px;opacity:.6;transition:opacity .15s}
.todo-ms-chip-x:hover{opacity:1;color:#ef4444}
.todo-multi-select-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card-bg,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.12));z-index:1000;max-height:200px;overflow-y:auto;padding:4px 0}
.todo-multi-select-dropdown.open{display:block}
.todo-ms-option{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;transition:background .12s;font-size:13px;color:var(--text-primary,#111827)}
.todo-ms-option:hover{background:var(--sidebar-hover,#f3f4f6)}

/* =============================================
   ATTACHMENT DRAG & DROP
   ============================================= */
.todo-att-dropzone{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--border-color,#d1d5db);border-radius:10px;padding:24px 12px;margin-top:8px;background:var(--bg-tertiary,#f9fafb);color:var(--text-tertiary,#9ca3af);font-size:13px;transition:all .2s}
.todo-att-dropzone.active{display:flex;border-color:var(--primary,#6366f1);background:rgba(99,102,241,.06);color:var(--primary,#6366f1)}
.todo-att-dropzone i{font-size:22px}
.att-drag-handle{cursor:grab;color:var(--text-tertiary,#bbb)!important;font-size:11px;margin-right:4px;opacity:.5;transition:opacity .15s}
.todo-att-item:hover .att-drag-handle{opacity:1}
.todo-att-item[draggable="true"]{transition:background .15s,box-shadow .15s}
.todo-att-item.att-drag-over{background:rgba(99,102,241,.08);box-shadow:inset 0 -2px 0 0 var(--primary,#6366f1)}

/* =============================================
   ACTIVITY LOG
   ============================================= */
.todo-activity-log{margin-top:8px;border-top:1px solid var(--border-color,#e5e7eb);padding-top:8px;max-height:320px;overflow-y:auto}
.todo-activity-item{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border-color,#f3f4f6);font-size:13px}
.todo-activity-item:last-child{border-bottom:none}
.act-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-tertiary,#f3f4f6);font-size:13px}
.act-content{flex:1;min-width:0}
.act-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.act-header strong{font-size:13px;color:var(--text-primary,#111827)}
.act-time{font-size:11px;color:var(--text-tertiary,#9ca3af);margin-left:auto;white-space:nowrap}
.act-detail{margin-top:3px;font-size:12px;color:var(--text-secondary,#6b7280)}
.act-change{background:var(--bg-tertiary,#f3f4f6);padding:1px 6px;border-radius:4px;font-size:11px;font-family:monospace}
.act-field{font-weight:600;color:var(--text-secondary,#6b7280);margin-right:3px;font-size:12px}
.act-desc{font-size:12px;color:var(--text-secondary,#6b7280)}
.todo-activity-empty{text-align:center;padding:20px 12px;color:var(--text-tertiary,#9ca3af);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:6px}
.todo-activity-empty i{font-size:20px;opacity:.5}
.todo-activity-loading{text-align:center;padding:16px;color:var(--text-tertiary,#9ca3af);font-size:13px}
.todo-ms-option input[type="checkbox"]{accent-color:var(--primary,#6366f1);width:15px;height:15px;cursor:pointer}
.todo-create-modal .todo-multi-select-trigger{background:var(--bg-tertiary,#f3f4f6);border:1px solid var(--border-color,#e5e7eb)}
.todo-create-modal .todo-multi-select-dropdown{background:var(--card-bg,#fff)}

/* =============================================
   FOLDER TAG — Card meta
   ============================================= */
.todo-folder-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:500;color:var(--text-secondary,#6b7280);background:var(--bg-tertiary,#f3f4f6)}
.todo-folder-tag .ft-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* =============================================
   DARK MODE OVERRIDES (original)
   ============================================= */
[data-theme="dark"] .todo-card-tag.due-today{color:#fbbf24}
[data-theme="dark"] .todo-card-tag.overdue{color:#f87171}
[data-theme="dark"] .todo-card-tag.priority-high{color:#f87171}
[data-theme="dark"] .todo-card-tag.assignee{color:#818cf8}
[data-theme="dark"] .todo-card-tag.team{color:#34d399}
[data-theme="dark"] .todo-card-tag.channel{color:#38bdf8}
[data-theme="dark"] .todo-card-tag.reminder{color:#c084fc}
[data-theme="dark"] .todo-status-pill.inbox{color:#9ca3af}
[data-theme="dark"] .todo-status-pill.in_review{color:#fbbf24}
[data-theme="dark"] .todo-status-pill.in_progress{color:#34d399}
[data-theme="dark"] .todo-status-pill.waiting{color:#fb923c}
[data-theme="dark"] .todo-status-pill.completed{color:#4ade80}
[data-theme="dark"] .todo-priority-pill.active.high{color:#f87171}
[data-theme="dark"] .todo-priority-pill.active.medium{color:#fbbf24}
[data-theme="dark"] .todo-ms-chip{color:#818cf8}
[data-theme="dark"] .todo-detail-footer{background:rgba(0,0,0,.15)}
[data-theme="dark"] .todo-status-picker{background:var(--card-bg,#1f2937);border-color:var(--border-color,#374151);box-shadow:0 8px 30px rgba(0,0,0,.4)}
[data-theme="dark"] .todo-sp-item:hover{background:var(--sidebar-hover,#374151)}

/* =============================================
   CREATE MODAL — ATTACHMENT DROPZONE
   ============================================= */
.todo-att-dropzone.active-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:1rem;border:2px dashed var(--border-color,#d1d5db);border-radius:10px;background:var(--bg-primary,#fafafa);color:var(--text-secondary,#6b7280);font-size:0.85rem;transition:all .2s;cursor:default}
.todo-att-dropzone.active-zone i{font-size:1.4rem;color:var(--text-secondary,#9ca3af)}
.todo-att-dropzone.active-zone.active,.todo-att-dropzone.active-zone:hover{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.04)}
.todo-att-dropzone.active-zone.active i{color:var(--primary,#6366f1)}
.todo-cm-att-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.todo-cm-att-list .cm-att-item{padding:6px 8px;border:1px solid var(--border-color,#e5e7eb);border-radius:6px;background:var(--card-bg,#fff);cursor:grab}
.todo-cm-att-list .cm-att-item:hover{border-color:var(--primary,#6366f1)}
.todo-cm-att-list .cm-att-item .att-del{cursor:pointer;margin-left:auto}
[data-theme="dark"] .todo-att-dropzone.active-zone{border-color:#4b5563;background:#1f2937}
[data-theme="dark"] .todo-att-dropzone.active-zone.active{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.08)}
[data-theme="dark"] .todo-cm-att-list .cm-att-item{background:#1f2937;border-color:#374151}

/* =============================================
   SELECT2 FIX — inside flex rows
   Prevents select2-injected width:100% from
   overflowing flex containers in detail panel
   and create modal.
   ============================================= */
.todo-detail-row-value .select2-container{flex:1;width:auto!important;min-width:0}
.todo-detail-row-value .select2-hidden-accessible{flex:none!important}
/* "Promemoria ricorrente" reference select — compact width */
#detail-reminder-reference + .select2-container{flex:0 0 auto;min-width:120px}
/* "Ripeti ogni" unit select in detail + create modal */
#detail-repeat-unit + .select2-container,
#cm-repeat-unit + .select2-container{flex:1;width:auto!important;min-width:0}
/* Create modal: fix all select2 inside form-row flex grids */
.todo-create-modal .select2-container{width:auto!important;min-width:0}
.todo-create-modal .select2-hidden-accessible{flex:none!important}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:768px){
  /* Sidebar: accordion full-width (gestito da mobile.css) — ripristino label e badge */
  .todo-sidebar .todo-nav-item span,
  .todo-sidebar .todo-sidebar-header span { display: inline !important }
  .todo-sidebar .todo-nav-badge { display: inline-block !important }
  .todo-sidebar .todo-nav-item { padding: 10px 16px !important; justify-content: flex-start !important; border-left: 3px solid transparent }
  .todo-sidebar .todo-nav-item.active { border-left-color: var(--primary,#6366f1) }

  /* Detail panel: full width su mobile */
  .todo-detail-panel { width: 100%; max-width: 100% }

  /* Card meta: nascosta per compattezza */
  .todo-card-meta { display: none }

  /* Header: ridotto + azioni su seconda riga */
  .todo-header { padding: 10px 14px; flex-wrap: wrap; gap: 8px }
  .todo-header-icon { width: 36px; height: 36px; font-size: 16px }
  .todo-header-title { font-size: 16px }
  .todo-header-subtitle { display: none }
  .todo-header-count { font-size: 11px; padding: 3px 9px }
  .todo-header-actions { display: flex !important; width: 100%; flex-wrap: wrap; gap: 6px; margin-left: 0 }

  /* Search: larghezza piena */
  .todo-search-wrap { flex: 1; min-width: 0 }
  .todo-search-input { width: 100% !important }
  .todo-search-input:focus { width: 100% !important }

  /* Add button: non occupa tutta la riga, solo testo compatto */
  .todo-add-btn { flex-shrink: 0; padding: 7px 12px; font-size: 13px }

  /* Toolbar/filtri: scroll orizzontale invece di nasconderli */
  .todo-filter-group { display: flex !important; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch }
  .todo-filter-group::-webkit-scrollbar { display: none }
  .todo-active-filters { display: flex !important; flex-wrap: wrap }

  .todo-quick-add { padding: 10px 14px }
  .todo-list { padding: 6px 10px }
  .todo-folder-section { display: none }
  /* Prevent sidebar min-width from fighting 100% width on very narrow screens */
  .todo-sidebar { min-width: 0 !important; }
  /* Resize handle hidden on mobile */
  .todo-sidebar-resize { display: none !important; }
}

/* Strong responsive overrides for Todo view to avoid conflicts with global mobile.css */
@media (max-width: 768px) {
   .todo-page {
      flex-direction: column !important;
      height: 100% !important;
      overflow: hidden !important;
   }

   .todo-page .todo-sidebar {
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      max-height: 46vh !important;
      overflow-y: auto !important;
      border-right: none !important;
      border-bottom: 1px solid var(--border-color,#e5e7eb) !important;
      background: var(--bg-secondary,#f9fafb) !important;
   }

   .todo-page .todo-sidebar.mobile-expanded {
      max-height: 54vh !important;
   }

   .todo-page .todo-sidebar-header {
      min-height: 44px !important;
      padding: 8px 12px !important;
      border-bottom: 1px solid var(--border-color,#e5e7eb) !important;
   }

   .todo-page .todo-nav {
      padding: 4px 8px 10px !important;
   }

   .todo-page .todo-nav-item {
      padding: 9px 12px !important;
      margin-bottom: 2px !important;
      border-left: none !important;
      border-radius: 10px !important;
      font-size: 13px !important;
   }

   .todo-page .todo-nav-item.active {
      border-left: none !important;
      box-shadow: inset 2px 0 0 var(--primary,#6366f1) !important;
   }

   .todo-page .todo-nav-divider {
      margin: 6px 8px !important;
   }

   .todo-page .todo-main {
      flex: 1 !important;
      min-height: 0 !important;
      overflow: hidden !important;
   }

   .todo-page .todo-header {
      padding: 10px 12px !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
   }

   .todo-page .todo-header-title {
      font-size: 15px !important;
   }

   .todo-page .todo-header-actions {
      display: grid !important;
      grid-template-columns: 1fr auto auto;
      width: 100% !important;
      gap: 6px !important;
      margin-left: 0 !important;
      align-items: center !important;
   }

   .todo-page .todo-search-wrap {
      min-width: 0 !important;
   }

   .todo-page .todo-search-input,
   .todo-page .todo-search-input:focus {
      width: 100% !important;
   }

   .todo-page .todo-toolbar {
      padding: 8px 10px !important;
      gap: 8px !important;
   }

   .todo-page .todo-filter-group {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .todo-page .todo-filter-group::-webkit-scrollbar {
      display: none;
   }

   .todo-page #todo-bulk-toggle-btn {
      margin-left: 0 !important;
   }

   .todo-page .todo-quick-add {
      padding: 8px 10px !important;
   }

   .todo-page .todo-list {
      padding: 6px 8px !important;
   }
}

@media (max-width: 480px) {
   .todo-page .todo-sidebar {
      max-height: 42vh !important;
   }

   .todo-page .todo-sidebar.mobile-expanded {
      max-height: 48vh !important;
   }

   .todo-page .todo-header-actions {
      grid-template-columns: 1fr auto;
   }

   .todo-page .todo-export-wrap {
      display: none !important;
   }

   .todo-page .todo-add-btn {
      padding: 7px 10px !important;
      font-size: 12px !important;
   }

   .todo-page .todo-card {
      padding: 10px 10px !important;
      border-radius: 8px !important;
   }

   .todo-page .todo-card-title {
      font-size: 13px !important;
      line-height: 1.35 !important;
   }

   .todo-page .todo-card-desc {
      font-size: 11px !important;
   }
}

/* Responsive clarity pass for Activities (mobile/tablet) */
@media (max-width: 900px) {
   .todo-page .todo-sidebar {
      box-shadow: 0 1px 0 rgba(0,0,0,.04);
   }

   .todo-page .todo-header {
      position: static;
      top: auto;
      z-index: auto;
      background: var(--bg-primary,#fff);
   }

   .todo-page .todo-toolbar {
      position: static;
      top: auto;
      z-index: auto;
      background: var(--bg-primary,#fff);
      border-bottom: 1px solid var(--border-color,#e5e7eb);
   }

   .todo-page .todo-quick-add {
      position: static;
      top: auto;
      z-index: auto;
      background: var(--bg-primary,#fff);
   }

   .todo-page .todo-card {
      margin-bottom: 6px;
      border: 1px solid var(--border-color,#e5e7eb);
      background: var(--card-bg,#fff);
   }

   .todo-page .todo-card-actions {
      opacity: 1 !important;
   }

   .todo-page .todo-card-action {
      width: 30px;
      height: 30px;
      border: 1px solid var(--border-color,#e5e7eb);
      background: var(--bg-tertiary,#f3f4f6);
   }

   .todo-page .todo-folder-item {
      font-size: 13px !important;
      padding: 8px 10px !important;
      margin: 2px 6px !important;
      border-radius: 8px !important;
   }
}

@media (max-width: 768px) {
   .todo-page .todo-header-subtitle,
   .todo-page .todo-header-count {
      display: none !important;
   }

   .todo-page .todo-header-actions {
      grid-template-columns: 1fr auto !important;
      gap: 8px !important;
   }

   .todo-page .todo-add-btn {
      min-height: 36px;
   }

   .todo-page .todo-export-wrap {
      grid-column: 1 / -1;
      justify-self: start;
   }

   .todo-page .todo-export-btn {
      min-height: 34px;
      font-size: 12px !important;
      padding: 7px 10px !important;
   }

   .todo-page .todo-filter-group {
      gap: 8px !important;
      padding-bottom: 2px;
   }

   .todo-page .todo-filter-btn {
      min-height: 34px;
      padding: 6px 10px;
      font-size: 12px;
   }

   .todo-page #todo-bulk-toggle-btn {
      width: 100%;
      justify-content: center;
   }

   .todo-page .todo-bulk-bar {
      margin: 0 10px 8px !important;
      padding: 8px 10px !important;
      gap: 6px !important;
   }

   .todo-page .todo-bulk-action {
      flex: 1 1 auto;
      justify-content: center;
   }

   .todo-page .todo-create-modal {
      width: calc(100vw - 20px) !important;
      max-height: 88dvh !important;
      padding: 14px !important;
      border-radius: 12px !important;
   }

   .todo-page .todo-create-modal .form-row {
      flex-direction: column !important;
      gap: 8px !important;
   }

   .todo-page .todo-create-modal .modal-actions {
      position: sticky;
      bottom: 0;
      background: var(--card-bg,#fff);
      padding-top: 10px;
      margin-top: 12px;
   }

   .todo-page .todo-create-modal .modal-cancel,
   .todo-page .todo-create-modal .modal-submit {
      flex: 1;
      justify-content: center;
   }
}

@media (max-width: 480px) {
   .todo-page .todo-sidebar {
      max-height: 52px !important;
      overflow: hidden !important;
      transition: max-height .25s ease;
   }

   .todo-page .todo-sidebar.mobile-expanded {
      max-height: 58vh !important;
      overflow-y: auto !important;
   }

   .todo-page .todo-nav-item {
      font-size: 12px !important;
      padding: 8px 10px !important;
   }

   .todo-page .todo-nav-badge {
      font-size: 10px !important;
      min-width: 18px !important;
   }

   .todo-page .todo-header {
      padding: 8px 10px !important;
   }

   .todo-page .todo-toolbar {
      padding: 8px !important;
   }

   .todo-page .todo-quick-add {
      padding: 7px 8px !important;
   }

   .todo-page .todo-list {
      padding: 6px !important;
   }

   .todo-page .todo-card {
      gap: 8px;
      padding: 9px 8px !important;
   }

   .todo-page .todo-card-right {
      margin-left: auto;
   }

   .todo-page .todo-card-action {
      width: 28px;
      height: 28px;
   }
}

/* =============================================
   FOLDER TREE — Sidebar
   ============================================= */
.todo-folder-section{padding:0 8px}
.todo-folder-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary,#9ca3af)}
.todo-folder-header button{background:none;border:none;cursor:pointer;color:var(--text-tertiary,#9ca3af);font-size:14px;padding:2px 4px;border-radius:4px;transition:all .15s}
.todo-folder-header button:hover{color:var(--primary,#6366f1);background:rgba(99,102,241,.1)}
.todo-folders-tree{padding:0 4px 8px}
.todo-ft-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text-secondary,#6b7280);transition:all .13s;position:relative;user-select:none}
.todo-ft-item:hover{background:rgba(99,102,241,.06);color:var(--text-primary,#111827)}
.todo-ft-item.active{background:rgba(99,102,241,.12);color:var(--primary,#6366f1);font-weight:600}
.todo-ft-toggle{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-tertiary,#9ca3af);cursor:pointer;border-radius:3px;flex-shrink:0;transition:transform .15s}
.todo-ft-toggle:hover{background:rgba(99,102,241,.1)}
.todo-ft-toggle.expanded{transform:rotate(90deg)}
.todo-ft-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex-shrink:0}
.todo-ft-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-ft-count{font-size:10px;font-weight:600;color:var(--text-tertiary,#9ca3af);background:var(--bg-tertiary,#f3f4f6);padding:1px 6px;border-radius:8px;min-width:16px;text-align:center}
.todo-ft-menu{opacity:0;transition:opacity .13s;font-size:13px;color:var(--text-tertiary,#9ca3af);cursor:pointer;padding:2px 4px;border-radius:4px}
.todo-ft-item:hover .todo-ft-menu{opacity:1}
.todo-ft-menu:hover{color:var(--primary,#6366f1);background:rgba(99,102,241,.1)}
.todo-ft-children{padding-left:18px}

/* =============================================
   SELECTED CARDS — Bulk mode
   ============================================= */
.todo-card.selected{background:rgba(99,102,241,.08)!important;border-color:var(--primary,#6366f1)!important;box-shadow:0 0 0 1px rgba(99,102,241,.2)}
.todo-card .todo-bulk-cb{width:16px;height:16px;accent-color:var(--primary,#6366f1);cursor:pointer;flex-shrink:0;margin-top:2px}
.todo-card .todo-bulk-cb:not(:checked){opacity:.4}
.todo-card .todo-bulk-cb:checked{opacity:1}

/* =============================================
   BULK TOOLBAR
   ============================================= */
.todo-bulk-bar{display:none;align-items:center;gap:10px;padding:8px 28px;background:linear-gradient(135deg,rgba(99,102,241,.08) 0%,rgba(139,92,246,.06) 100%);border-bottom:1px solid rgba(99,102,241,.15);flex-shrink:0;animation:fadeSlideDown .2s ease}
.todo-bulk-bar.show{display:flex}
.todo-bulk-bar label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-secondary,#6b7280);cursor:pointer}
.todo-bulk-bar label input[type="checkbox"]{accent-color:var(--primary,#6366f1);width:15px;height:15px}
.todo-bulk-count{font-size:13px;font-weight:600;color:var(--primary,#6366f1)}
.todo-bulk-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.todo-bulk-btn{background:var(--bg-primary,#fff);border:1px solid var(--border-color,#e5e7eb);color:var(--text-primary,#111827);font-size:12px;font-weight:500;padding:5px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
.todo-bulk-btn:hover{border-color:var(--primary,#6366f1);color:var(--primary,#6366f1);background:rgba(99,102,241,.04)}
.todo-bulk-btn.danger:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.04)}
.todo-bulk-close{background:none;border:none;font-size:16px;color:var(--text-tertiary,#9ca3af);cursor:pointer;padding:4px;border-radius:4px;transition:all .15s}
.todo-bulk-close:hover{color:var(--text-primary,#111827);background:var(--bg-tertiary,#f3f4f6)}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* =============================================
   BULK DROPDOWN MENUS
   ============================================= */
.todo-bulk-dropdown{position:absolute;z-index:999;background:var(--bg-primary,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:200px;max-height:320px;overflow-y:auto;animation:fadeSlideDown .15s ease}
.todo-bulk-dropdown .bdd-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text-primary,#111827);transition:all .1s}
.todo-bulk-dropdown .bdd-item:hover{background:rgba(99,102,241,.08);color:var(--primary,#6366f1)}
.todo-bulk-dropdown .bdd-item i{font-size:14px;width:18px;text-align:center;color:var(--text-tertiary,#9ca3af)}
.todo-bulk-dropdown .bdd-item:hover i{color:var(--primary,#6366f1)}
.todo-bulk-dropdown .bdd-sub{padding-left:20px}
.todo-bulk-dropdown .bdd-sep{height:1px;background:var(--border-color,#e5e7eb);margin:4px 6px}

/* =============================================
   FOLDER CONTEXT MENU
   ============================================= */
.todo-folder-ctx{position:fixed;z-index:1000;background:var(--bg-primary,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:6px;min-width:180px;animation:fadeSlideDown .12s ease}
.todo-folder-ctx .fc-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text-primary,#111827);transition:all .1s}
.todo-folder-ctx .fc-item:hover{background:rgba(99,102,241,.08);color:var(--primary,#6366f1)}
.todo-folder-ctx .fc-item.danger{color:#ef4444}
.todo-folder-ctx .fc-item.danger:hover{background:rgba(239,68,68,.06)}
.todo-folder-ctx .fc-item i{width:18px;text-align:center;font-size:13px}

/* =============================================
   FOLDER MODAL
   ============================================= */
.todo-folder-modal-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.todo-folder-modal{background:var(--bg-primary,#fff);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:380px;max-width:90vw;padding:24px;animation:fadeSlideDown .2s ease}
.todo-folder-modal h3{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--text-primary,#111827)}
.todo-folder-modal .fm-field{margin-bottom:14px}
.todo-folder-modal .fm-field label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary,#6b7280);margin-bottom:5px}
.todo-folder-modal .fm-field input{width:100%;padding:8px 12px;border:1px solid var(--border-color,#e5e7eb);border-radius:8px;font-size:14px;color:var(--text-primary,#111827);background:var(--bg-primary,#fff);outline:none;transition:border .15s;box-sizing:border-box}
.todo-folder-modal .fm-field input:focus{border-color:var(--primary,#6366f1)}
.todo-folder-modal .fm-colors{display:flex;gap:6px;flex-wrap:wrap}
.todo-folder-modal .fm-color{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;display:flex;align-items:center;justify-content:center}
.todo-folder-modal .fm-color:hover{transform:scale(1.15)}
.todo-folder-modal .fm-color.active{border-color:var(--text-primary,#111827);box-shadow:0 0 0 2px rgba(99,102,241,.3)}
.todo-folder-modal .fm-color.active::after{content:'✓';color:#fff;font-size:12px;font-weight:700}
.todo-folder-modal .fm-icons{display:flex;gap:6px;flex-wrap:wrap}
.todo-folder-modal .fm-icon{width:32px;height:32px;border-radius:8px;cursor:pointer;border:1px solid var(--border-color,#e5e7eb);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-secondary,#6b7280);transition:all .13s;background:var(--bg-tertiary,#f3f4f6)}
.todo-folder-modal .fm-icon:hover{border-color:var(--primary,#6366f1);color:var(--primary,#6366f1)}
.todo-folder-modal .fm-icon.active{border-color:var(--primary,#6366f1);background:rgba(99,102,241,.1);color:var(--primary,#6366f1)}
.todo-folder-modal .fm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.todo-folder-modal .fm-btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.todo-folder-modal .fm-btn.cancel{background:var(--bg-tertiary,#f3f4f6);color:var(--text-secondary,#6b7280)}
.todo-folder-modal .fm-btn.cancel:hover{background:var(--border-color,#e5e7eb)}
.todo-folder-modal .fm-btn.save{background:var(--primary,#6366f1);color:#fff}
.todo-folder-modal .fm-btn.save:hover{background:#4f46e5}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* =============================================
   DARK MODE OVERRIDES
   ============================================= */
[data-theme="dark"] .todo-folder-modal{background:var(--bg-secondary,#1f2937);border:1px solid var(--border-color,#374151)}
[data-theme="dark"] .todo-folder-modal .fm-field input{background:var(--bg-tertiary,#374151);border-color:#4b5563}
[data-theme="dark"] .todo-folder-ctx{background:var(--bg-secondary,#1f2937);border-color:#4b5563}
[data-theme="dark"] .todo-bulk-dropdown{background:var(--bg-secondary,#1f2937);border-color:#4b5563}
[data-theme="dark"] .todo-bulk-btn{background:var(--bg-secondary,#1f2937);border-color:#4b5563;color:var(--text-primary,#e5e7eb)}