/* ============================================================
   GESTIONNAIRE DE PROJETS V5.0 — Styles
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0D0D0F;--bg2:#161619;--bg3:#1E1E22;--bg4:#26262C;
  --surface:#1A1A1D;--surfaceLight:#2A2A2E;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.14);
  --text:#F0F0F2;--text2:rgba(240,240,242,0.6);--text3:rgba(240,240,242,0.35);
  --blue:#3A6FD8;--blue-soft:rgba(58,111,216,0.15);
  --green:#1D9E75;--green-soft:rgba(29,158,117,0.12);
  --gold:#C49A2A;--gold-soft:rgba(196,154,42,0.15);
  --red:#C84040;--red-soft:rgba(200,60,60,0.15);
  --orange:#E07830;--purple:#7060D0;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
#app{display:flex;height:100vh}

/* ===== SIDEBAR ===== */
.sidebar{width:240px;min-width:240px;background:var(--bg);border-right:0.5px solid var(--border);display:flex;flex-direction:column;height:100vh;flex-shrink:0;z-index:2;position:relative}
.sb-logo{padding:16px 24px;display:flex;align-items:center;gap:10px;border-bottom:0.5px solid var(--border)}
.logo-img{width:28px;height:28px;border-radius:6px;object-fit:contain;flex-shrink:0}
.logo-sep{border-left:1px solid rgba(255,255,255,0.14);height:30px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;gap:0;line-height:1.2;justify-content:center;height:30px}
.logo-line{font-size:9px;font-weight:600;color:rgba(240,240,242,0.35);letter-spacing:1.5px;text-transform:uppercase}
.sb-section{padding:20px 24px 8px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);font-weight:600}
.sb-ws-list{flex:1;overflow-y:auto;padding:4px 0}
.sb-ws{display:flex;align-items:center;gap:10px;padding:10px 24px;cursor:pointer;color:var(--text2);font-size:14px;font-weight:500;transition:all .15s;border-left:3px solid transparent}
.sb-ws:hover{background:rgba(42,42,46,0.5);color:var(--text)}
.sb-ws.active{background:var(--surfaceLight);border-left:3px solid var(--blue);color:#fff;font-weight:600}
.sb-ws-gear{display:none;cursor:pointer;color:var(--text3);transition:color .15s;flex-shrink:0}
.sb-ws-gear:hover{color:#fff}
.sb-ws:hover .sb-ws-gear,.sb-ws.active .sb-ws-gear{display:flex}
.sb-ws-lock{display:flex;align-items:center;color:var(--text3);flex-shrink:0}
.sb-add{color:var(--text3);font-size:13px;cursor:pointer;padding:6px 0;transition:color .15s}
.sb-add:hover{color:#fff}
.sb-add-ws{padding:10px 24px;margin-top:4px}
.sb-brand{color:var(--text3);font-size:12px;padding:12px 24px}

/* ===== MAIN CONTENT ===== */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}

/* Header */
.header{padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--border);flex-shrink:0}
.hdr-left{display:flex;align-items:center;gap:12px}
.view-btns{display:flex;gap:2px}
.view-tab{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 14px;border-radius:8px;background:transparent;color:rgba(240,240,242,0.35);cursor:pointer;font-family:var(--font);transition:all .15s;border:none;font-weight:500}
.view-tab:hover{background:#2A2A2E;color:rgba(240,240,242,0.6)}
.view-tab.active{background:#2A2A2E;color:#FFFFFF;border:0.5px solid rgba(255,255,255,0.14);font-weight:600}
.view-tab svg{flex-shrink:0}

/* Header profile */
.hdr-prof{display:flex;align-items:center;gap:6px;cursor:pointer;position:relative;padding:4px 8px;border-radius:8px;transition:background .15s}
.hdr-prof:hover{background:var(--surfaceLight)}
.hdr-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
img.hdr-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.hdr-prof-chev{color:var(--text3);display:flex;align-items:center}
.hdr-prof-dd{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--surfaceLight);border-radius:10px;padding:6px;min-width:240px;display:none;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.hdr-prof-dd.open{display:block}
.hdr-prof-info{display:flex;align-items:center;gap:10px;padding:10px 10px 8px;color:var(--text)}
.hdr-prof-info-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.hdr-prof-info-name{font-size:13px;font-weight:600;color:#fff}
.hdr-prof-info-email{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-prof-sep{height:1px;background:rgba(255,255,255,0.08);margin:4px 6px}
.hdr-prof-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text2);cursor:pointer;transition:all .12s}
.hdr-prof-opt:hover{background:var(--bg3);color:#fff}
.hdr-prof-opt svg{flex-shrink:0;width:14px;height:14px}
.hdr-prof-logout{color:var(--red)}
.hdr-prof-logout:hover{background:rgba(200,64,64,0.1);color:#E07070}

/* ===== PROFILE MODAL ===== */
.prof-avatar-section{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0 20px}
.prof-avatar-wrap{width:64px;height:64px;position:relative}
.prof-avatar-img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.prof-avatar-circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff}
.prof-avatar-btn{font-size:12px;color:var(--blue);cursor:pointer;transition:color .15s}
.prof-avatar-btn:hover{color:#6A9FEE}
.prof-field{margin-bottom:14px}
.prof-label{display:block;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.prof-input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;font-size:13px;color:#fff;font-family:var(--font);outline:none;transition:border-color .15s}
.prof-input:focus{border-color:var(--blue)}
.prof-color-row{display:flex;gap:8px;flex-wrap:wrap}
.prof-color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s}
.prof-color-swatch:hover{transform:scale(1.15)}
.prof-color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,0.2)}
.prof-role-badge{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:16px;background:rgba(58,111,216,0.12);color:#6A9FEE}
.prof-notice{display:flex;align-items:flex-start;gap:10px;padding:16px;background:var(--bg3);border-radius:8px;border:1px solid var(--border);font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:16px}
.prof-notice svg{flex-shrink:0;margin-top:2px;color:var(--text3)}

/* Sub-menu */
.submenu{padding:8px 24px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.sm-btn{background:transparent;border:1px solid var(--surfaceLight);border-radius:6px;padding:5px 12px;color:var(--text3);font-size:12px;font-family:var(--font);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;position:relative;white-space:nowrap}
.sm-btn:hover{background:var(--surfaceLight);color:#fff;border-color:var(--border2)}
.sm-btn.sm-btn-icon{padding:5px 8px;color:rgba(240,240,242,0.5)}
.sm-btn.sm-btn-icon:hover{color:rgba(240,240,242,0.7)}
.sm-btn.primary{color:var(--blue);border-color:rgba(58,111,216,0.3)}
.sm-btn.primary:hover{background:rgba(58,111,216,0.1);color:var(--blue)}
.sm-btn.has-filter{background:rgba(58,111,216,0.08);color:var(--blue);border-color:rgba(58,111,216,0.3)}
.sm-dd{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--surfaceLight);border-radius:8px;padding:8px;min-width:200px;display:none;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4);max-height:300px;overflow-y:auto}
.sm-dd.open{display:block}
.sm-dd-opt{padding:7px 10px;border-radius:5px;font-size:12px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .1s}
.sm-dd-opt:hover{background:var(--bg3);color:#fff}
.sm-dd-opt.active{color:#fff;font-weight:600}
.sm-dd-opt .check{width:14px;text-align:center;color:var(--green)}
.sm-dd-sep{height:1px;background:var(--border);margin:4px 0}
.sm-dd-reset{padding:7px 10px;font-size:11px;color:var(--red);cursor:pointer;border-radius:5px;transition:background .1s}
.sm-dd-reset:hover{background:var(--red-soft)}

/* Assignee filter dropdown (Personne button) */
.filter-assignee-dd{position:absolute;top:calc(100% + 6px);left:0;background:#1A1A1D;border:1px solid #2A2A2E;border-radius:10px;padding:6px;width:220px;display:none;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.filter-assignee-dd.open{display:block}
.filter-assignee-sep{height:1px;background:rgba(255,255,255,0.06);margin:4px 0}
.filter-assignee-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .1s;font-size:12px;color:rgba(240,240,242,0.7)}
.filter-assignee-opt:hover{background:rgba(255,255,255,0.06)}
.filter-assignee-opt.active{background:rgba(58,111,216,0.08);color:#fff}
.filter-assignee-ico{display:flex;align-items:center;color:#3A6FD8;flex-shrink:0}
.filter-assignee-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-assignee-check{display:flex;align-items:center;color:#3A6FD8;flex-shrink:0}
.filter-dd{position:absolute;top:calc(100% + 6px);left:0;background:#1A1A1D;border:1px solid #2A2A2E;border-radius:10px;padding:6px;width:240px;display:none;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.filter-dd.open{display:block}
.filter-section-title{font-size:10px;font-weight:600;color:rgba(240,240,242,0.4);text-transform:uppercase;letter-spacing:0.5px;padding:6px 8px 4px;margin-top:2px}
.filter-dd-opt{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;transition:background .1s;font-size:12px;color:rgba(240,240,242,0.7)}
.filter-dd-opt:hover{background:rgba(255,255,255,0.06)}
.filter-dd-opt.active{background:rgba(58,111,216,0.08);color:#fff}
.filter-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.filter-dd-ico{display:flex;align-items:center;color:rgba(240,240,242,0.4);flex-shrink:0}
.filter-dd-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-dd-check{display:flex;align-items:center;color:#3A6FD8;flex-shrink:0;opacity:0}
.filter-dd-opt.active .filter-dd-check{opacity:1}
.filter-dd-sep{height:1px;background:rgba(255,255,255,0.06);margin:4px 0}
.filter-dd-reset{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .1s;font-size:11px;color:rgba(240,240,242,0.5);margin-top:2px}
.filter-dd-reset:hover{background:rgba(255,255,255,0.06);color:rgba(240,240,242,0.7)}
.filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;background:#3A6FD8;color:#fff;font-size:10px;font-weight:700;margin-left:6px;padding:0 4px}
.sm-chk{width:13px;height:13px;min-width:13px;border-radius:3px;border:1px solid var(--border2);cursor:pointer;flex-shrink:0;position:relative;transition:all .15s}
.sm-chk.on{background:var(--blue);border-color:var(--blue)}
.sm-chk.on::after{content:'';position:absolute;left:3px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* ===== CONTENT AREA ===== */
.content{flex:1;overflow-y:auto;overflow-x:auto}

/* ===== KANBAN ===== */
.kanban{display:flex;gap:16px;padding:16px 24px;align-items:stretch;min-width:max-content;min-height:calc(100vh - 120px)}
.kcol{min-width:280px;max-width:280px;background:var(--surface);border-radius:12px;display:flex;flex-direction:column;min-height:100%}
.kcol-banner{padding:8px 14px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;margin:8px 8px 0}
.kcol-banner .kcol-name{font-size:13px;font-weight:600;color:#fff}
.kcol-banner .kcol-cnt{font-size:11px;color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.15);padding:2px 8px;border-radius:10px}
.kcol-cards{flex:1;padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px;min-height:60px;overflow-y:auto;transition:background .15s}
.kcol-cards.drag-over{background:rgba(58,111,216,0.05);border-radius:0 0 12px 12px}
.kcol-add{font-size:12px;color:var(--text3);padding:8px 4px;cursor:pointer;transition:all .15s;opacity:0;margin-top:4px}
.kcol:hover .kcol-add{opacity:1}
.kcol-add:hover{color:#fff}

/* ===== PROJECT CARD ===== */
.pcard{background:var(--surfaceLight);border:0.5px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;padding:14px}
.pcard:hover{border:1px solid var(--blue)}
.pcard.dragging{opacity:.5}
.pcard-name{font-size:14px;font-weight:500;color:#fff;line-height:1.3}
.pcard-client{font-size:12px;color:var(--text3);margin-top:4px}
.pcard-bar-w{background:var(--surface);height:3px;border-radius:2px;overflow:hidden;margin-top:10px}
.pcard-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:2px;transition:width .3s}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.pcard-cnt{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:8px}
.pcard-avs{display:flex}
.sm-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;margin-left:-4px;border:1.5px solid var(--surfaceLight);flex-shrink:0}
.sm-av:first-child{margin-left:0}
img.sm-av{width:24px;height:24px;border-radius:50%;object-fit:cover;margin-left:-4px;border:1.5px solid var(--surfaceLight);flex-shrink:0}
img.sm-av:first-child{margin-left:0}

/* Task panel inside project card */
.pcard-tasks{background:var(--surface);padding:10px 14px;border-top:1px solid var(--surfaceLight);margin:-14px;margin-top:10px;border-radius:0 0 8px 8px}
.ptask{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.ptask:last-child{border-bottom:none}
.ptask>.chk{width:14px;min-width:14px;box-sizing:content-box;padding-right:2px}
.ptask-title{font-size:12px;color:var(--text2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptask-title.done{text-decoration:line-through;opacity:.5}
.ptask-date{font-size:10px;color:var(--text3);white-space:nowrap}
.ptask-date.overdue{color:var(--red)}
.ptask-date-empty{color:rgba(240,240,242,0.2);font-style:italic}
.ptask-av-wrap{width:30px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:opacity .15s}
.ptask-av-wrap:hover{opacity:0.8}
.ptask-date-wrap{width:70px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;border-radius:4px;padding:1px 0;transition:background .15s}
.ptask-date-wrap:hover{background:rgba(255,255,255,0.06)}
.micro-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:#fff;flex-shrink:0}
img.micro-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* Checkbox */
.chk{width:14px;height:14px;min-width:14px;border-radius:3px;border:1px solid var(--surfaceLight);cursor:pointer;flex-shrink:0;position:relative;transition:all .15s}
.chk:hover{border-color:var(--green)}
.chk.done{background:var(--green);border-color:var(--green)}
.chk.done::after{content:'';position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* ===== TASK CARD (direct) ===== */
.tcard{background:var(--surfaceLight);border:0.5px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer;transition:all .2s}
.tcard:hover{border:1px solid var(--blue)}
.tcard.dragging{opacity:.5}
.tcard-overdue{background:rgba(200,64,64,0.08);border-color:rgba(200,64,64,0.2)}
.tcard-top{display:flex;align-items:center;gap:10px}
.tcard-title{font-size:13px;font-weight:500;color:#fff}
.tcard-title.done{text-decoration:line-through;opacity:.5}
.tcard-bot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-left:24px}
.tcard-date{font-size:11px;color:var(--text3)}
.tcard-date.overdue{color:var(--red)}

/* ===== LIST VIEW (CSS Grid) ===== */
.list-c{padding:16px 20px;overflow-x:auto}

/* Grid container — single grid for header + all rows */
.lg{display:grid;width:100%;background:#1A1A1D;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}

/* Header row — display:contents so cells sit in parent grid */
.lg-hdr{display:contents}
.lg-hd{font-size:11px;color:var(--text2);font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;user-select:none;white-space:nowrap;background:#222226}
.lg-hd-chk{justify-content:center}
.lg-hd-arrow{}
.lg-hd-title{justify-content:flex-start}
.lg-hd-data{justify-content:center;gap:4px;border-left:1px solid rgba(255,255,255,0.08)}
.lg-hd-add{justify-content:center;border-left:1px solid rgba(255,255,255,0.08)}
.lg-hd[draggable="true"]{cursor:grab}
.lg-hd[draggable="true"]:active{cursor:grabbing}
.lg-hd-dragging{opacity:0.4}
.lg-hd-drop-left{box-shadow:inset 3px 0 0 0 var(--blue)}
.lg-hd-drop-right{box-shadow:inset -3px 0 0 0 var(--blue)}

/* Data rows — display:contents so every cell is a direct grid child */
.lg-row{display:contents;cursor:pointer}

/* Group headers — span all columns */
.lg-grp{padding:10px 16px 8px;font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;user-select:none}
.list-grp-cnt{font-size:11px;font-weight:500;color:var(--text2);background:rgba(255,255,255,0.08);padding:1px 8px;border-radius:10px;margin-left:8px}
.lg-grp-done{background:rgba(29,158,117,0.06);border-radius:6px;cursor:pointer}
.lg-grp-done:hover{background:rgba(29,158,117,0.1)}

/* All cells (shared) */
.lg-c{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.06);transition:background .12s;overflow:hidden}

/* Hover: highlight all cells in a row */
.lg-row:hover > .lg-c{background:var(--surfaceLight)}
.lg-row-overdue > .lg-c{background:rgba(200,64,64,0.06)}
.lg-row-overdue:hover > .lg-c{background:rgba(200,64,64,0.1)}
.lg-row-sub > .lg-c{background:#111113;border-bottom:1px solid rgba(255,255,255,0.04)}
.lg-row-sub:hover > .lg-c{background:var(--bg3)}

/* Specific cell types */
.lg-c-del{display:flex;align-items:center;justify-content:center;padding:0;border-radius:2px 0 0 2px}
.lg-c-chk{justify-content:center}
.lg-c-arrow{justify-content:center}
.lg-c-title{justify-content:flex-start}
.lg-c-sub-title{padding-left:8px}
.lg-c-data{justify-content:center;border-left:1px solid rgba(255,255,255,0.08);padding-left:8px;padding-right:8px}
.lg-c-add{border-left:1px solid rgba(255,255,255,0.08)}

/* Delete icon — main rows */
.lg-del-ico{display:none;align-items:center;justify-content:center;width:14px;height:14px;cursor:pointer;color:rgba(240,240,242,0.25);transition:color .15s;border-radius:3px}
.lg-del-ico:hover{color:#C84040}
.lg-row:hover .lg-del-ico{display:inline-flex}
.lg-hd-del{padding:0}

/* Text styles */
.list-pn{font-size:14px;font-weight:500;color:#fff}
.list-pn.done{text-decoration:line-through;color:var(--text3)}
.list-tn{font-size:13px;font-weight:500;color:#fff}
.list-tn.done{text-decoration:line-through;color:var(--text3)}
.st-pill{cursor:pointer;line-height:1;box-sizing:border-box}

/* Title wrap + expand icon */
.lg-title-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.lg-title-wrap .inline-edit-title{cursor:text;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-expand-ico{display:none;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:rgba(240,240,242,0.35);cursor:pointer;flex-shrink:0;transition:all .12s}
.lg-expand-ico:hover{background:rgba(255,255,255,0.05);color:rgba(240,240,242,0.6)}
.lg-row:hover .lg-expand-ico{display:inline-flex}

/* Inline trigger for date/assignee/status cells */
.lg-inline-trigger{cursor:pointer;display:flex;align-items:center;gap:4px;border-radius:4px;padding:2px 4px;transition:background .12s}
.lg-inline-trigger:hover{background:rgba(255,255,255,0.06)}
.mini-bar-w{width:50px;height:2px;background:var(--bg4);border-radius:2px;overflow:hidden}
.mini-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:2px}
.mini-pct{font-size:10px;color:var(--text3);margin-left:6px}
.list-prog{display:flex;align-items:center;justify-content:center}
.lg-c-data .mini-bar-w{width:60px;height:3px}

/* ===== SUBTASK BLOCK (Monday style) ===== */
.sub-block{margin-left:40px;background:transparent;border-radius:0 0 8px 0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06)}

/* Standalone subtask block (separated from parent grid) */
.sub-block-standalone{margin-left:24px;margin-top:-1px;background:#1A1A1D;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}

/* Spacer between split grid blocks */
.lg-block-spacer{height:12px}

/* L-connector between expanded task and subtask block */
.lg-connector{width:25px;height:36px;border-left:2px solid;border-bottom:2px solid;border-right:none;border-top:none;border-radius:0 0 0 12px;margin-top:-1px;margin-left:1px;pointer-events:none;box-sizing:border-box}

/* Continuation grids (no header) keep same styling as main grid */
.lg-continuation{}
.sub-grid{display:grid;width:100%}

/* Sub-header */
.sub-hdr{display:contents}
.sub-hd{font-size:10px;color:rgba(240,240,242,0.6);font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;user-select:none;white-space:nowrap;gap:4px;background:#222226}
.sub-hd-chk{justify-content:center}
.sub-hd-title{justify-content:flex-start}
.sub-hd-data{justify-content:center;border-left:1px solid rgba(255,255,255,0.05)}
.sub-hd-add{justify-content:center;border-left:1px solid rgba(255,255,255,0.05)}
.sub-hd-more{display:inline-flex;align-items:center;color:rgba(240,240,242,0.15);cursor:pointer;transition:all .15s;padding:1px;flex-shrink:0}
.sub-hd-more:hover{color:rgba(240,240,242,0.4)}
.sub-add-col-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;color:rgba(240,240,242,0.2);cursor:pointer;transition:all .15s}
.sub-add-col-btn:hover{background:rgba(255,255,255,0.06);color:rgba(240,240,242,0.5)}

/* Sub-rows */
.sub-row{display:contents;cursor:pointer}
.sub-c{display:flex;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,0.03);transition:background .12s;overflow:hidden;font-size:12px}
.sub-row:hover > .sub-c{background:rgba(255,255,255,0.03)}
.sub-c-del{display:flex;align-items:center;justify-content:center;padding:0;border-bottom-color:transparent}
.sub-c-chk{justify-content:center}
.sub-c-title{justify-content:flex-start}
.sub-c-data{justify-content:center;border-left:1px solid rgba(255,255,255,0.05);padding-left:8px;padding-right:8px}
.sub-c-add{border-left:1px solid rgba(255,255,255,0.05)}

/* Delete icon — sub rows */
.sub-del-ico{display:none;align-items:center;justify-content:center;width:14px;height:14px;cursor:pointer;color:rgba(240,240,242,0.25);transition:color .15s;border-radius:3px}
.sub-del-ico:hover{color:#C84040}
.sub-row:hover .sub-del-ico{display:inline-flex}
.sub-hd-del{padding:0;border-bottom-color:transparent}
.sub-row .lg-expand-ico{display:none}
.sub-row:hover .lg-expand-ico{display:inline-flex}
.sub-row .lg-title-wrap{gap:4px}
.sub-row .list-tn{font-size:12px}
.sub-row .st-pill{font-size:10px;padding:4px 12px;border-radius:20px}
.sub-row .lg-inline-trigger{padding:1px 3px}
.sub-row .chk{width:14px;height:14px;border-radius:3px}

/* Add subtask button */
.sub-add-row{padding:6px 10px;display:flex;align-items:center}
.sub-add-btn{font-size:11px;color:rgba(240,240,242,0.2);cursor:pointer;transition:all .15s;padding:3px 6px;border-radius:4px}
.sub-add-btn:hover{color:rgba(240,240,242,0.5);background:rgba(255,255,255,0.04)}

/* ===== INLINE EDIT (List view) ===== */
.inline-edit-trigger{cursor:pointer}
.inline-edit-trigger:hover{opacity:.8}
.ie-dd{position:fixed;background:var(--surface);border:1px solid var(--surfaceLight);border-radius:8px;padding:6px;min-width:180px;z-index:400;box-shadow:0 8px 24px rgba(0,0,0,.5);max-height:260px;overflow-y:auto}
.ie-dd-opt{padding:6px 10px;border-radius:5px;font-size:12px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .1s}
.ie-dd-opt:hover{background:var(--bg3);color:#fff}
.ie-dd-opt.ie-active{color:#fff;font-weight:600}
.ie-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ie-empty-av{width:20px;height:20px;border-radius:50%;border:1px dashed var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text3);cursor:pointer;transition:all .15s}
.ie-empty-av:hover{border-color:var(--blue);color:var(--blue)}
.ie-empty-date{font-size:12px;color:var(--text3);cursor:pointer}
.ie-empty-date:hover{color:var(--blue)}
.ie-date{width:140px}

/* ===== CALENDAR VIEW ===== */
.cal-c{padding:16px 24px}
.cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cal-nav-btn{background:transparent;border:1px solid var(--surfaceLight);border-radius:6px;padding:5px 8px;color:var(--text2);cursor:pointer;display:flex;align-items:center;transition:all .15s}
.cal-nav-btn:hover{background:var(--surfaceLight);color:#fff}
.cal-title{font-size:16px;font-weight:600;margin:0 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cal-day-hdr{background:var(--bg2);text-align:center;font-size:11px;font-weight:600;color:var(--text3);padding:8px 4px;text-transform:uppercase;letter-spacing:.5px}
.cal-cell{background:var(--bg2);min-height:100px;padding:6px;display:flex;flex-direction:column;gap:3px;transition:background .12s}
.cal-cell:hover{background:var(--bg3)}
.cal-empty{background:var(--bg)}
.cal-today{background:rgba(58,111,216,0.06)}
.cal-today:hover{background:rgba(58,111,216,0.1)}
.cal-day-num{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:2px}
.cal-today .cal-day-num{color:var(--blue);font-weight:700}
/* Calendar toggle */
.cal-tgl-wrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.cal-tgl-label{font-size:12px;color:rgba(240,240,242,0.35)}
.cal-tgl-all{font-size:12px;color:#F0F0F2;font-weight:500}
.cal-tgl{width:40px;height:20px;border-radius:10px;background:#2A2A2E;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.cal-tgl.on{background:#3A6FD8}
.cal-tgl-knob{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .2s}
.cal-tgl.on .cal-tgl-knob{transform:translateX(20px)}

.cal-task{font-size:10px;color:var(--text);padding:3px 6px;background:var(--surfaceLight);border-radius:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s}
.cal-task:hover{background:var(--bg4)}
.cal-more{font-size:10px;color:var(--text3);padding:2px 4px;cursor:default}
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.cal-legend-item{display:flex;align-items:center;gap:5px}
.cal-legend-sq{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.cal-legend-txt{font-size:10px;color:rgba(240,240,242,0.25)}

/* ===== MY TASKS ===== */
.mt{padding:16px 24px;max-width:960px}
.mt-prof{background:var(--surface);border-radius:12px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:14px;border:0.5px solid var(--border);position:relative;overflow:hidden}
.mt-blob{position:absolute;top:-30px;right:-20px;width:160px;height:90px;background:radial-gradient(ellipse at 40% 60%,rgba(58,111,216,0.2)0%,rgba(196,154,42,0.1)60%,transparent 80%);filter:blur(16px);pointer-events:none;border-radius:50%}
.mt-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;position:relative;background:var(--blue)}
img.mt-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;position:relative}
.mt-name{font-size:16px;font-weight:600;position:relative}
.mt-sub{font-size:13px;color:var(--text2);position:relative}
.stats-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px}
.stat-c{background:var(--surface);border-radius:10px;padding:16px;border:1px solid var(--surfaceLight)}
.stat-n{font-size:28px;font-weight:700}
.stat-n.overdue{color:var(--red)}
.stat-l{font-size:12px;color:var(--text3);margin-top:2px}
.mt-stitle{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.mt-empty{text-align:center;padding:40px;color:var(--text3);font-size:14px}
.mt-row{background:var(--surface);border-radius:8px;padding:12px 16px;border:1px solid var(--surfaceLight);margin-bottom:6px;display:flex;align-items:center;gap:10px;transition:all .15s}
.mt-row:hover{border-color:var(--border2);background:var(--bg3)}
.mt-row-overdue{background:rgba(200,64,64,0.06);border-color:rgba(200,64,64,0.2)}
.mt-row-overdue:hover{background:rgba(200,64,64,0.1)}
.mt-info{flex:1}
.mt-ttl{font-size:13px;font-weight:500}
.mt-ttl.done{text-decoration:line-through;opacity:.5}
.mt-prj{font-size:11px;color:var(--text3)}
.mt-date{font-size:11px;color:var(--text3);white-space:nowrap}
.mt-date.overdue{color:var(--red)}
.mt-tbl-hdr{display:flex;gap:0;padding:0 12px 8px;border-bottom:1px solid rgba(255,255,255,0.12)}
.mt-tbl-hc{font-size:11px;color:var(--text3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:0 6px}
.mt-tbl-row{display:flex;gap:0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,0.06);align-items:center;transition:all .12s}
.mt-tbl-row:hover{background:var(--surfaceLight)}
.mt-tbl-cell{display:flex;align-items:center;padding:0 6px}

/* Notifications */
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:50%;background:#C84040;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-section{margin-bottom:16px;border-radius:10px;border:0.5px solid rgba(255,255,255,0.08);overflow:hidden;background:#161619}
.notif-hdr{display:flex;align-items:center;gap:8px;background:#161619;border-radius:0;border:none;padding:12px 16px;cursor:pointer;transition:background .15s}
.notif-section.collapsed .notif-hdr{border-radius:0}
.notif-hdr:hover{background:#1a1a1d}
.notif-icon{display:flex;align-items:center;color:#3A6FD8}
.notif-title{font-size:13px;font-weight:600;color:#fff}
.notif-hdr-badge{min-width:18px;height:18px;border-radius:50%;background:#C84040;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.notif-chev{display:flex;align-items:center;color:var(--text3)}
.notif-body{background:#161619;border-radius:0;border:none;border-top:0.5px solid rgba(255,255,255,0.06);overflow:hidden}
.notif-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background .12s}
.notif-row:last-child{border-bottom:none}
.notif-row:hover{background:rgba(255,255,255,0.03)}
.notif-row:not(.notif-read){background:rgba(58,111,216,0.04)}
.notif-read{opacity:0.5}
.notif-chk{width:14px;height:14px;min-width:14px;border-radius:3px;border:1px solid var(--surfaceLight);cursor:pointer;flex-shrink:0;position:relative;transition:all .15s}
.notif-chk:hover{border-color:var(--green)}
.notif-chk.done{background:var(--green);border-color:var(--green)}
.notif-chk.done::after{content:'';position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.notif-txt{flex:1;min-width:0}
.notif-msg{font-size:12px;color:var(--text2)}
.notif-task-link{font-size:12px;color:#3A6FD8;cursor:pointer}
.notif-task-link:hover{text-decoration:underline}
.notif-time{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.notif-dot{width:7px;height:7px;border-radius:50%;background:#3A6FD8;flex-shrink:0}

/* ===== MODALS ===== */
.m-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fi .12s}
@keyframes fi{from{opacity:0}to{opacity:1}}
.m-box{background:var(--surface);border-radius:12px;padding:28px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;border:0.5px solid var(--border2);animation:su .15s}
@keyframes su{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.m-title{font-size:18px;font-weight:600;margin-bottom:24px}
.fg{margin-bottom:14px}
.fl{display:block;font-size:11px;color:var(--text2);font-weight:600;margin-bottom:4px}
.fi{width:100%;background:var(--bg);border:1px solid var(--surfaceLight);border-radius:6px;color:var(--text);padding:10px 12px;font-family:var(--font);font-size:13px;transition:border-color .15s}
.fi:focus{outline:none;border-color:var(--blue)}
.fi option{background:var(--bg);color:var(--text)}
.fi-sm{padding:6px 8px;font-size:12px}
.m-acts{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.m-right{display:flex;gap:8px;margin-left:auto}
.m-div{height:0.5px;background:var(--border);margin:16px 0}
.m-ttitle{font-size:14px;font-weight:600;margin-bottom:10px}
.m-trow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:0.5px solid var(--border)}
.m-tname{font-size:12px;color:var(--text2);flex:1}
.m-tname.done{text-decoration:line-through;color:var(--text3)}
.m-tdate{font-size:11px;color:var(--text3)}
.m-tadd{font-size:12px;color:var(--text3);cursor:pointer;padding:8px 0;transition:color .15s}
.m-tadd:hover{color:var(--text2)}
.m-tadd.hidden{display:none}
.m-tform{display:flex;gap:6px;align-items:center;padding:8px 0}
.m-tform.hidden{display:none}

/* Update indicator pill */
.upd-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#fff;background:#3A6FD8;padding:0 6px;border-radius:10px;white-space:nowrap;min-width:20px;height:18px;justify-content:center}
.upd-pill svg{flex-shrink:0}
.upd-pill-mini{height:14px;min-width:auto;padding:0 4px;font-size:9px;gap:1px}
.upd-pill-mini svg{width:9px;height:9px}

/* Recurrence icon hover in date cells */
.date-cell-wrap:hover .rec-hover-only{opacity:1!important;pointer-events:auto!important}

/* ===== UPDATES (task modal) ===== */
.upd-compose{margin-top:8px}
.upd-textarea{width:100%;background:var(--bg);border:1px solid var(--surfaceLight);border-radius:8px;padding:12px;color:var(--text);font-family:var(--font);font-size:13px;min-height:80px;resize:vertical;transition:border-color .15s}
.upd-textarea:focus{outline:none;border-color:var(--blue)}
.upd-textarea::placeholder{color:var(--text3)}
.upd-editor{width:100%;background:#0D0D0F;border:1px solid var(--surfaceLight);border-radius:8px;padding:12px;color:var(--text);font-family:var(--font);font-size:13px;min-height:80px;max-height:300px;overflow-y:auto;transition:border-color .15s;outline:none;line-height:1.5;word-break:break-word}
.upd-editor:focus{border-color:var(--blue)}
.upd-editor:empty::before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.upd-editor img{max-width:100%;border-radius:6px;margin:8px 0;display:block}
.upd-toolbar{display:flex;align-items:center;gap:8px;margin-top:8px}
.upd-img-btn{background:transparent;border:1px solid var(--surfaceLight);border-radius:6px;padding:4px 8px;cursor:pointer;color:rgba(240,240,242,0.4);display:inline-flex;align-items:center;transition:all .15s}
.upd-img-btn:hover{color:rgba(240,240,242,0.7);border-color:rgba(240,240,242,0.2)}
.upd-img-input{display:flex;gap:6px;align-items:center}
.upd-img-input.hidden{display:none}
.upd-list{margin-top:16px}
.upd-item{padding:12px 0;border-bottom:0.5px solid var(--border)}
.upd-item:last-child{border-bottom:none}
.upd-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.upd-author{font-size:12px;color:#fff;font-weight:500}
.upd-time{font-size:11px;color:var(--text3);margin-left:auto}
.upd-del{cursor:pointer;color:var(--text3);opacity:0;transition:all .15s;margin-left:6px}
.upd-item:hover .upd-del{opacity:1}
.upd-del:hover{color:var(--red)}
.upd-content{font-size:13px;color:rgba(240,240,242,0.7);line-height:1.5;word-break:break-word}
.upd-content .update-link{color:var(--blue);text-decoration:underline}
.upd-content .update-link:hover{color:#5a8fe8}
.upd-inline-img{max-width:100%;border-radius:6px;margin:6px 0;display:block}
.upd-edit{cursor:pointer;color:var(--text3);opacity:0;transition:all .15s;margin-left:4px;display:flex;align-items:center}
.upd-item:hover .upd-edit{opacity:1}
.upd-edit:hover{color:var(--blue)}
.upd-replies{margin-left:28px;border-left:2px solid var(--border);padding-left:12px;margin-top:6px}
.upd-reply{padding:6px 0;border-bottom:0.5px solid var(--border)}
.upd-reply:last-child{border-bottom:none}
.upd-reply-btn{font-size:11px;color:var(--text3);cursor:pointer;transition:color .15s;margin-top:4px;display:inline-block}
.upd-reply-btn:hover{color:var(--blue)}
.upd-reply-form{display:flex;gap:6px;align-items:center;margin-top:6px}
.upd-reply-form.hidden{display:none}

/* ===== WORKSPACE SETTINGS ===== */
.ws-status-list{display:flex;flex-direction:column;gap:6px}
.ws-status-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-radius:6px;transition:all .15s}
.ws-status-row[draggable="true"]{cursor:default}
.ws-status-row.ws-dragging{opacity:0.4;background:var(--bg3)}
.ws-status-row.ws-drag-over{border-top:2px solid var(--blue);padding-top:2px}
.ws-grip{display:flex;align-items:center}
.ws-color-pick{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;background:transparent;padding:0}
.ws-color-pick::-webkit-color-swatch-wrapper{padding:0}
.ws-color-pick::-webkit-color-swatch{border:1px solid var(--border2);border-radius:6px}
.ws-status-del{cursor:pointer;color:var(--text3);transition:color .15s;flex-shrink:0}
.ws-status-del:hover{color:var(--red)}

/* ===== TEAM MODAL ===== */
.team-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.team-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:0.5px solid var(--border)}
.team-info{flex:1}
.team-del{cursor:pointer;color:var(--text3);transition:color .15s}
.team-del:hover{color:var(--red)}
.team-edit{cursor:pointer;color:var(--text3);transition:color .15s;display:flex;align-items:center}
.team-edit:hover{color:var(--blue)}
.team-add-form{padding:12px 0;display:flex;flex-direction:column;gap:8px}
.team-add-form.hidden{display:none}

/* Team avatar wrapper with camera overlay */
.team-av-wrap{position:relative;width:36px;height:36px;flex-shrink:0;border-radius:50%;overflow:hidden}
.team-av-img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.team-cam-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);opacity:0;transition:opacity .15s;cursor:pointer;border-radius:50%;color:#fff}
.team-av-wrap:hover .team-cam-overlay{opacity:1}

/* New member photo picker */
.team-photo-pick{display:inline-block}
.team-photo-preview{width:60px;height:60px;border-radius:50%;background:var(--bg3);border:2px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);transition:all .15s;overflow:hidden}
.team-photo-preview:hover{border-color:var(--blue);color:var(--blue)}

/* Preferences modal */
.pref-section-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:12px}
.pref-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.pref-row:last-child{border-bottom:none}
.pref-left{flex:1;margin-right:16px}
.pref-label{font-size:13px;color:#fff;font-weight:500}
.pref-sub{font-size:11px;color:rgba(240,240,242,0.35);margin-top:2px}
.pref-switch{width:44px;height:22px;border-radius:11px;background:#2A2A2E;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.pref-switch.on{background:#3A6FD8}
.pref-knob{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .2s}
.pref-switch.on .pref-knob{transform:translateX(22px)}

/* Edit user photo */
.edit-photo-wrap{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;display:inline-block}
.edit-photo-img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.edit-photo-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.edit-photo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);opacity:0;transition:opacity .15s;cursor:pointer;border-radius:50%;color:#fff;gap:1px}
.edit-photo-overlay span{font-size:7px;font-weight:600}
.edit-photo-wrap:hover .edit-photo-overlay{opacity:1}

/* Buttons */
.btn-p{background:var(--blue);border:none;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-family:var(--font);font-weight:600;cursor:pointer;transition:filter .15s;white-space:nowrap}
.btn-p:hover{filter:brightness(1.15)}
.btn-g{background:transparent;color:rgba(240,240,242,0.5);border:1px solid #2A2A2E;padding:8px 16px;border-radius:8px;font-size:12px;font-family:var(--font);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-g:hover{border-color:rgba(255,255,255,0.15);color:rgba(240,240,242,0.7)}
.btn-g svg,.btn-d svg{flex-shrink:0}
.btn-d{background:var(--red-soft);color:var(--red);border:none;padding:8px 16px;border-radius:8px;font-size:13px;font-family:var(--font);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-d:hover{filter:brightness(1.2)}
.btn-sm{padding:6px 10px;font-size:11px}

/* Radio group */
.rg{display:flex;flex-direction:column;gap:8px}
.ro{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--surfaceLight);border-radius:8px;cursor:pointer;transition:all .15s;background:var(--bg)}
.ro:hover{border-color:var(--border2);background:var(--bg3)}
.ro.sel{border-color:var(--blue);background:rgba(58,111,216,0.05)}
.ro input{margin-top:3px;accent-color:var(--blue)}
.ro strong{display:block;font-size:13px;font-weight:600}
.ro strong svg{vertical-align:middle;margin-right:4px}
.ro span{font-size:11px;color:var(--text3)}

/* Confirm dialog */
.c-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1100}
.c-box{background:var(--surface);border-radius:12px;padding:24px;max-width:340px;text-align:center;border:0.5px solid var(--border2)}
.c-txt{font-size:14px;margin-bottom:18px}
.c-acts{display:flex;gap:10px;justify-content:center}

/* Calendar icon white (Étape 11) */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}

/* ===== LIST ARROW (Monday style) ===== */
.list-arrow{display:inline-flex;align-items:center;color:transparent;transition:all .2s;flex-shrink:0;margin-right:4px;margin-left:4px;cursor:default;width:14px}
.list-arrow.has-subs{color:rgba(240,240,242,0.35);cursor:pointer}
.list-arrow.has-subs:hover{color:rgba(240,240,242,0.7)}
.list-arrow.open{transform:rotate(90deg);color:rgba(240,240,242,0.6)}
.lg-row:hover .list-arrow{color:rgba(240,240,242,0.25)}
.lg-row:hover .list-arrow.has-subs{color:rgba(240,240,242,0.5)}
.list-arrow.list-arrow-ghost{color:transparent;cursor:pointer}
.list-arrow.list-arrow-ghost.open{color:rgba(240,240,242,0.5);transform:rotate(90deg)}
.lg-row:hover .list-arrow.list-arrow-ghost{color:rgba(240,240,242,0.18)}
.lg-row:hover .list-arrow.list-arrow-ghost:hover{color:rgba(240,240,242,0.45)}

/* Sub-task counter badge */
.list-sub-cnt{font-size:10px;color:var(--text3);background:rgba(255,255,255,0.06);padding:1px 6px;border-radius:8px;margin-right:6px;white-space:nowrap;flex-shrink:0}

/* Completed section */
.list-chev-completed{display:inline-flex;align-items:center;color:var(--text3);margin-left:auto}
.list-pn.done{text-decoration:line-through;color:var(--text3)}

/* Inline title edit */
.inline-title-input{background:var(--bg)!important;border:1px solid var(--blue)!important;border-radius:4px!important;color:var(--text)!important;font-family:var(--font)!important}

/* Column header 3-dots menu */
.lhc-label{pointer-events:none}
.lhc-more{display:inline-flex;align-items:center;color:rgba(240,240,242,0.2);cursor:pointer;transition:all .15s;padding:2px;flex-shrink:0}
.lhc-more:hover{color:rgba(240,240,242,0.5)}

/* Column resize handle */
.lg-resize{position:absolute;right:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:25;background:transparent;transition:background .1s}
.lg-resize:hover,.lg-resize.dragging{background:rgba(255,255,255,0.15)}
.lhc-rename-input{background:var(--bg);border:1px solid var(--blue);border-radius:4px;color:var(--text);font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:1px 4px;width:90px;outline:none}
.ie-dd-sep{height:1px;background:rgba(255,255,255,0.07);margin:4px 0}
.ie-dd-ico{display:inline-flex;align-items:center;width:14px;flex-shrink:0}
.ie-dd-red{color:#e55 !important}
.ie-dd-red:hover{background:rgba(229,85,85,0.12) !important;color:#f66 !important}

/* Add column button */
.list-add-col-btn{width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:rgba(240,240,242,0.35);transition:all .15s}
.list-add-col-btn:hover{background:rgba(255,255,255,0.07);color:rgba(240,240,242,0.6);border-color:rgba(255,255,255,0.18)}

/* Column value in list */
.list-col-val{cursor:pointer;min-height:24px;display:flex;align-items:center}
.list-col-val:hover{opacity:.85}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#3a3a3e}

/* ===== Add Column Dropdown ===== */
.add-col-dd-title{font-size:13px;font-weight:600;color:#fff;padding:4px 8px 8px;border-bottom:1px solid #2A2A2E;margin-bottom:4px}
.add-col-type-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .15s}
.add-col-type-opt:hover{background:#2A2A2E}
.add-col-type-ico{display:flex;align-items:center;color:rgba(240,240,242,0.55);flex-shrink:0}
.add-col-type-info{display:flex;flex-direction:column;gap:1px}
.add-col-type-name{font-size:13px;color:#f0f0f2;font-weight:500}
.add-col-type-desc{font-size:11px;color:rgba(240,240,242,0.38)}

/* Add Column Form */
.add-col-name-input{width:100%;background:#111114;border:1px solid #2A2A2E;border-radius:6px;color:#f0f0f2;font-size:13px;padding:7px 10px;margin:6px 0 8px;box-sizing:border-box;font-family:var(--font);outline:none;transition:border-color .15s}
.add-col-name-input:focus{border-color:#3A6FD8}
.add-col-name-input::placeholder{color:rgba(240,240,242,0.3)}
.add-col-opts-section{margin-top:4px}
.add-col-opts-label{font-size:11px;color:rgba(240,240,242,0.4);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;padding:0 2px}
.add-col-opts-list{display:flex;flex-direction:column;gap:5px;margin-bottom:6px;max-height:140px;overflow-y:auto}
.add-col-opt-row{display:flex;align-items:center;gap:6px}
.add-col-opt-color{width:12px;height:12px;border-radius:3px;flex-shrink:0;cursor:pointer;position:relative;overflow:visible}
.add-col-opt-input{flex:1;background:#111114;border:1px solid #2A2A2E;border-radius:4px;color:#f0f0f2;font-size:12px;padding:4px 8px;font-family:var(--font);outline:none;transition:border-color .15s}
.add-col-opt-input:focus{border-color:#3A6FD8}
.add-col-opt-input::placeholder{color:rgba(240,240,242,0.25)}
.add-col-opt-del{background:none;border:none;color:rgba(240,240,242,0.25);cursor:pointer;display:flex;align-items:center;padding:2px;border-radius:3px;transition:color .15s;flex-shrink:0}
.add-col-opt-del:hover{color:#e55}
.add-col-add-opt-btn{background:none;border:none;color:rgba(240,240,242,0.38);font-size:12px;cursor:pointer;padding:4px 2px;font-family:var(--font);transition:color .15s}
.add-col-add-opt-btn:hover{color:rgba(240,240,242,0.65)}
.add-col-btn-row{display:flex;gap:6px;justify-content:flex-end;margin-top:10px;padding-top:8px;border-top:1px solid #2A2A2E}
.add-col-cancel-btn{background:none;border:1px solid #2A2A2E;border-radius:6px;color:rgba(240,240,242,0.55);font-size:12px;padding:5px 12px;cursor:pointer;font-family:var(--font);transition:all .15s}
.add-col-cancel-btn:hover{background:#2A2A2E;color:#f0f0f2}
.add-col-add-btn{background:#3A6FD8;border:none;border-radius:6px;color:#fff;font-size:12px;font-weight:600;padding:5px 14px;cursor:pointer;font-family:var(--font);transition:background .15s}
.add-col-add-btn:hover{background:#4a7fe8}

/* Inline input for list cells */
.list-inline-input{appearance:none;-webkit-appearance:none}

/* ===== Status Dropdown (st-dd) ===== */
.st-dd{position:fixed;background:#1A1A1D;border:1px solid #2A2A2E;border-radius:10px;padding:6px;z-index:500;box-shadow:0 8px 24px rgba(0,0,0,0.4);max-height:340px;overflow-y:auto}
.st-dd-pill-row{padding:3px 6px}
.st-dd-pill{padding:5px 14px;border-radius:20px;font-size:11px;font-weight:600;text-align:center;cursor:pointer;transition:opacity .12s;display:inline-block;line-height:1}
.st-dd-pill:hover{opacity:.8}
.st-dd-pill-sel{outline:2px solid rgba(240,240,242,0.2);outline-offset:1px}
.st-dd-pill-none{padding:5px 14px;border-radius:20px;font-size:11px;font-weight:600;color:rgba(240,240,242,0.35);background:rgba(240,240,242,0.05);border:1px solid rgba(240,240,242,0.08);cursor:pointer;display:inline-block;line-height:1;transition:opacity .12s}
.st-dd-pill-none:hover{opacity:.75}
.st-dd-sep{height:1px;background:rgba(255,255,255,0.07);margin:5px 2px}
.st-dd-action{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:11px;color:rgba(240,240,242,0.35);cursor:pointer;transition:all .1s}
.st-dd-action:hover{background:rgba(255,255,255,0.05);color:rgba(240,240,242,0.55)}
.st-dd-action svg{width:12px;height:12px;flex-shrink:0}
.st-dd-action-blue{color:#3A6FD8}
.st-dd-action-blue:hover{background:rgba(58,111,216,0.1);color:#5B8FEE}
.st-dd-title{font-size:11px;font-weight:600;color:rgba(240,240,242,0.55);padding:6px 10px 4px}
.st-dd-edit-list{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.st-dd-edit-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:5px}
.st-dd-edit-row:hover{background:rgba(255,255,255,0.03)}
.st-dd-swatch{width:16px;height:16px;border-radius:4px;cursor:pointer;flex-shrink:0}
.st-dd-edit-inp{flex:1;background:transparent;border:1px solid rgba(255,255,255,0.08);border-radius:5px;padding:4px 8px;font-size:11px;color:#fff;font-family:var(--font);outline:none;min-width:0}
.st-dd-edit-inp:focus{border-color:rgba(58,111,216,0.5)}
.st-dd-edit-del{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;color:rgba(240,240,242,0.25);transition:all .12s;flex-shrink:0}
.st-dd-edit-del:hover{color:#e55;background:rgba(229,85,85,0.1)}
.st-dd-edit-del svg{width:12px;height:12px}
.st-dd-edit-del-disabled{opacity:0.25;cursor:not-allowed}
.st-dd-edit-del-disabled:hover{color:rgba(240,240,242,0.25);background:transparent}
.st-dd-done-btn{margin:4px 6px;padding:6px 0;border-radius:6px;background:#3A6FD8;color:#fff;font-size:11px;font-weight:600;text-align:center;cursor:pointer;transition:background .12s}
.st-dd-done-btn:hover{background:#4A7FE8}
.st-dd-warn{font-size:10px;color:#e55;padding:2px 8px 4px 32px;animation:st-warn-fade 3s ease-out forwards}
@keyframes st-warn-fade{0%,70%{opacity:1}100%{opacity:0}}

/* 'Aucun' (none) status styles */
.st-dd-pill-none{background:transparent !important;color:rgba(240,240,242,0.25) !important;border:1px dashed rgba(255,255,255,0.15) !important}
.st-dd-edit-row-none{opacity:0.5;pointer-events:none}
.st-dd-swatch-none{width:16px;height:16px;border-radius:4px;border:1px dashed rgba(255,255,255,0.2);background:transparent !important}
.lg-grp-none{color:rgba(240,240,242,0.3) !important}
.kcol-none{opacity:0.65}

@keyframes ivFadeIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== SIDEBAR TRASH BUTTON ===== */
.sidebar{display:flex;flex-direction:column}
.sb-trash{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;border-top:1px solid rgba(255,255,255,0.06);transition:all .15s}
.sb-trash-ico{display:flex;align-items:center;color:rgba(240,240,242,0.25)}
.sb-trash-ico svg{width:14px;height:14px}
.sb-trash-label{font-size:12px;color:rgba(240,240,242,0.25);transition:color .15s}
.sb-trash:hover .sb-trash-ico,.sb-trash:hover .sb-trash-label{color:rgba(240,240,242,0.4)}
.sb-trash.active .sb-trash-ico,.sb-trash.active .sb-trash-label{color:rgba(240,240,242,0.6)}
.sb-trash-badge{background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto}

/* ===== TRASH VIEW ===== */
.trash-view{padding:28px 32px}
.trash-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.trash-hdr-left{display:flex;flex-direction:column;gap:4px}
.trash-title{font-size:16px;font-weight:600;color:#fff;margin:0}
.trash-subtitle{font-size:12px;color:rgba(240,240,242,0.35);margin:0}
.trash-empty-btn{background:none;border:none;color:#C84040;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;transition:background .15s}
.trash-empty-btn:hover{background:rgba(200,64,64,0.1)}
.trash-empty-btn svg{width:14px;height:14px}
.trash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 0;text-align:center}
.trash-list{display:flex;flex-direction:column;gap:6px}
.trash-card{background:#1A1A1D;border-radius:8px;padding:12px 16px}
.trash-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.trash-card-info{flex:1;min-width:0}
.trash-card-title{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trash-card-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px;font-size:11px;color:rgba(240,240,242,0.35)}
.trash-days-left{color:rgba(240,240,242,0.25)}
.trash-card-actions{display:flex;gap:8px;flex-shrink:0}
.trash-restore-btn{background:none;border:none;color:#3A6FD8;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:background .15s;white-space:nowrap}
.trash-restore-btn:hover{background:rgba(58,111,216,0.1)}
.trash-restore-btn svg{width:14px;height:14px}
.trash-permdel-btn{background:none;border:none;color:#C84040;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;transition:background .15s;white-space:nowrap}
.trash-permdel-btn:hover{background:rgba(200,64,64,0.1)}
.trash-permdel-btn svg{width:14px;height:14px}
.trash-subs{margin-top:8px;padding-left:20px;border-left:2px solid rgba(255,255,255,0.06)}
.trash-sub-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:rgba(240,240,242,0.4)}
.trash-sub-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-sub-meta{font-size:11px;color:rgba(240,240,242,0.25);flex-shrink:0}
.trash-confirm-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:400px;width:90%}
.trash-confirm-text{font-size:14px;color:var(--text1);margin:0 0 20px 0;line-height:1.5}
.trash-confirm-btns{display:flex;justify-content:flex-end;gap:8px}

/* ===== MY TASKS V2 ===== */
.mt2-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 14px;border-bottom:1px solid var(--border)}
.mt2-hdr-left{display:flex;align-items:center;gap:12px}
.mt2-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
img.mt2-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.mt2-hdr-title{font-size:16px;font-weight:600;color:#fff}
.mt2-badges{display:flex;gap:8px}
.mt2-badge{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:16px;font-size:11px;font-weight:600}
.mt2-badge-num{font-weight:700}
.mt2-badge-lbl{font-weight:500;opacity:0.85}
.mt2-badge-red{background:rgba(200,64,64,0.12);color:#E07070}
.mt2-badge-blue{background:rgba(58,111,216,0.12);color:#6A9FEE}
.mt2-badge-green{background:rgba(29,158,117,0.12);color:#4ACA8A}
.mt2-badge-gray{background:rgba(240,240,242,0.08);color:rgba(240,240,242,0.5)}

/* Section headers */
.mt2-sec-hdr{display:flex;align-items:center;gap:8px;padding:14px 28px 6px;user-select:none}
.mt2-sec-hdr:hover{background:rgba(255,255,255,0.02)}
.mt2-sec-chev{display:flex;align-items:center;color:var(--text3);transition:color .15s}
.mt2-sec-icon{display:flex;align-items:center}
.mt2-sec-title{font-size:12px;font-weight:700;letter-spacing:0.3px}
.mt2-sec-count{font-size:11px;font-weight:700;margin-left:2px}
.mt2-sec-detail{font-size:11px;color:var(--text3);margin-left:4px}

/* Section table */
.mt2-tbl{margin:0 28px 12px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;overflow:hidden}
.mt2-tbl-hdr{display:flex;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.08);background:#222226}
.mt2-th{font-size:10px;color:rgba(240,240,242,0.6);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;padding:0 6px}

/* Table rows */
.mt2-row{display:flex;align-items:center;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:#1A1A1D;transition:background .12s}
.mt2-row:last-child{border-bottom:none}
.mt2-row:hover{background:rgba(255,255,255,0.03)}
.mt2-cell{display:flex;align-items:center;padding:0 6px;min-width:0}
.mt2-ttl{font-size:13px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt2-ttl.done{text-decoration:line-through;opacity:.45}
.mt2-sub-tag{font-size:9px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:rgba(240,240,242,0.4);background:rgba(255,255,255,0.08);padding:1px 5px;border-radius:3px;white-space:nowrap}
.mt2-ws{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt2-date{font-size:12px;color:var(--text3)}

/* Title block — single line */
.mt2-title-block{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}
.mt2-ttl-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;flex:1}
.mt2-ttl-left .mt2-ttl{flex-shrink:1;min-width:0}
.mt2-parent-ref{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:8px}
.mt2-parent-ico{display:flex;align-items:center;color:rgba(240,240,242,0.35);flex-shrink:0}
.mt2-parent-name{font-size:11px;color:rgba(240,240,242,0.45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}

/* Completed rows */
.mt2-row-done{opacity:0.4}