*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
::-webkit-scrollbar-track{background:transparent;}
*{scrollbar-color:var(--b2) transparent;}
#zoomLbl::-webkit-inner-spin-button,#zoomLbl::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
:root{
  --bg:#f7f9fb;
  --s1:#ffffff;--s2:#f2f4f6;--s3:#eceef0;--s4:#e6e8ea;--s5:#e0e3e5;
  --b1:#e0e3e5;--b2:#d8dadc;--b3:#747686;--b4:#444655;
  --t1:#191c1e;--t2:#444655;--t3:#747686;--t4:#c4c5d7;
  --acc:#0434c6;--acc2:#002290;--acc-g:rgba(4, 52, 198, 0.18);
  --green:#34d17a;--amber:#f5a623;--red:#ba1a1a;--violet:#8429c8;--cyan:#004f63;--rose:#f472b6;
  --row-h:36px;--hdr:58px;--lw:300px;--cw:32px;--bh:20px;
}
html,body{height:100%;overflow:hidden;background:transparent;}
body { color: var(--t1); font-family: 'Inter', sans-serif; display: flex; flex-direction: row; }

/* ══════════════════════════════
   LEFT NAV
══════════════════════════════ */
#nav{
  width:220px;flex-shrink:0;
  background:var(--s1);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;
  overflow:hidden;transition:width .22s cubic-bezier(.4,0,.2,1);
  position:relative;z-index:20;
}
#nav.collapsed{ width: 88px !important; padding-right: 0 !important; overflow-x: hidden !important; }
#nav.collapsed .px-8, #nav.collapsed .px-6 { padding-left: 16px !important; padding-right: 16px !important; }
#nav.collapsed .nav-label,
#nav.collapsed .nav-count,
#nav.collapsed .nav-section,
#nav.collapsed .nav-add,
#nav.collapsed .app-logo-text,
#nav.collapsed .nav-proj-del,
#nav.collapsed .nav-hide-collapsed,
#nav.collapsed .ws-header,
#nav.collapsed .ws-ungrouped-zone .nav-section { display:none !important; }
#nav.collapsed .app-logo-mark{margin:0 auto;cursor:pointer;}
#nav.collapsed .px-8.mb-10{padding-left:0 !important;padding-right:0 !important;display:flex;justify-content:center;}
#nav.collapsed .nav-btn{justify-content:center !important; padding:10px 0 !important;}
#nav.collapsed .nav-btn .nav-icon{width:auto;font-size:1rem;}
#nav.collapsed .nav-top{padding:12px 6px;justify-content:center;}
#nav.collapsed .project-list .nav-btn{padding:10px 0 !important; justify-content:center !important;}
#nav.collapsed a, #nav.collapsed button:not(#navCollapseBtn):not(#hamburger) { justify-content: center !important; gap: 0 !important; }
#nav.collapsed button[onclick="openNewProject()"] { border-radius: 12px !important; padding: 12px 0 !important; }
#nav.collapsed .nav-collapse-btn{display:none;}

/* Trial badge layout when sidebar is collapsed */
#nav.collapsed .nav-btn {
  position: relative;
  overflow: visible;
}
#nav.collapsed #navTrialBadge {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.75rem;
  padding: 2px 4px;
  line-height: 1;
  z-index: 5;
}
/* Nav collapse toggle button */
.nav-collapse-btn{
  background:none;border:none;cursor:pointer;
  color:var(--t3);font-size:1rem;padding:4px 6px;border-radius:5px;
  transition:background .12s, color .12s;line-height:1;flex-shrink:0;
}
.nav-collapse-btn:hover{background:var(--s4);color:var(--t1);}
.nav-top{padding:16px 14px 12px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:8px;}
.app-logo{font-family: 'Inter', sans-serif;font-size:1.2rem;font-weight:700;color:var(--t1);letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.app-logo-mark{width:36px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.app-logo-text{min-width:0;}
.app-logo-sub{font-size:0.75rem;font-family:'Inter',sans-serif;color:var(--t3);font-weight:400;display:block;margin-top:2px;}

/* ── top-level nav link active state ── */
#nav a.active,
#nav a.active:hover {
  background: var(--acc-g) !important;
  color: var(--acc2) !important;
  border-left: 2px solid var(--acc);
  font-weight: 600;
}
#nav a.active span.material-symbols-outlined {
  color: var(--acc) !important;
}

.nav-btn{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-radius:6px;margin:1px 6px;cursor:pointer;
  font-size:0.75rem;color:var(--t3);
  transition:all .12s;border:none;background:none;width:calc(100% - 12px);text-align:left;
  font-family:'Inter',sans-serif;
}
.nav-btn:hover{background:var(--s4);color:var(--t2);}
.nav-btn.active{background:var(--acc-g);color:var(--acc2);border-left:2px solid var(--acc);}
.nav-btn .nav-icon{width:16px;font-size:.8rem;flex-shrink:0;text-align:center;}
.nav-btn .nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;}
@keyframes marquee-slide{
  0%,15%  {transform:translateX(0);}
  80%,95% {transform:translateX(var(--ms,0px));}
  100%    {transform:translateX(0);}
}
.nav-btn:hover .nav-label.ms-on{
  text-overflow:clip;
  
}
.nav-btn .nav-count{font-size:0.75rem;background:var(--b2);padding:1px 5px;border-radius:10px;color:var(--t3);}
.nav-btn .nav-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

.project-list{flex:1;overflow-y:auto;padding-bottom:8px;}
.project-list::-webkit-scrollbar{width:3px;}
.project-list::-webkit-scrollbar-thumb{background:var(--b2);}

.nav-add{
  margin:8px;padding:8px 12px;background:var(--s4);border:1px dashed var(--b3);
  border-radius:6px;cursor:pointer;font-size:0.75rem;color:var(--t3);
  text-align:center;transition:all .12s;font-family:'Inter',sans-serif;
}
.nav-add:hover{border-color:var(--acc);color:var(--acc2);}

/* Workspace groups in nav */
.ws-group{margin-top:2px;}
.ws-header{
  display:flex;align-items:center;gap:6px;padding:4px 10px 3px;
  cursor:pointer;user-select:none;font-size:0.75rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--t3);font-weight:600;
  font-family:'Inter',sans-serif;transition:color .12s;
}
.ws-header:hover{color:var(--t1);}
.ws-header .ws-chevron{font-size:0.75rem;transition:transform .15s;display:inline-block;width:10px;text-align:center;}
.ws-header .ws-chevron.collapsed{transform:rotate(-90deg);}
.ws-header .ws-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-header .ws-actions{display:none;gap:2px;}
.ws-header:hover .ws-actions{display:flex;}
.ws-actions button{background:none;border:none;cursor:pointer;color:var(--t4);font-size:0.75rem;padding:1px 3px;border-radius:3px;line-height:1;}
.ws-actions button:hover{color:var(--t1);background:var(--s4);}
.ws-more-btn{display:none;margin-left:auto;cursor:pointer;color:var(--t4);font-size:0.85rem;font-weight:700;padding:0 4px;border-radius:3px;line-height:1;letter-spacing:1px;}
.ws-more-btn:hover{color:var(--t1);background:var(--s4);}
.ws-header:hover .ws-more-btn{display:inline-block;}
.ws-group.collapsed .ws-projects{display:none;}
/* Hide the group headers completely when the nav is collapsed */
#nav.collapsed .ws-group .ws-header {display:none !important;}

/* Hide any right-aligned meta icons (like the lock icon) so the dots stay perfectly centered */
#nav.collapsed .nav-btn > span[style*="margin-left:auto"],
#nav.collapsed .nav-btn > span[style*="margin-left: auto"] {display:none !important;}
.ws-drop-over{background:var(--acc-g) !important;border-radius:4px;outline:1px dashed var(--acc);outline-offset:-1px;}
.nav-dragging .nav-btn[draggable]{cursor:grabbing;}
.nav-dragging .ws-header{transition:background .12s;}

/* ── Workspace Switcher ── */
.ws-switcher{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;
  background:var(--acc);border-radius:10px;cursor:pointer;font-family:'Inter',sans-serif;
  transition:background .15s, box-shadow .15s, filter .15s;position:relative;
}
.ws-switcher:hover{filter:brightness(1.15);box-shadow:0 2px 12px rgba(0,0,0,.18);}
.ws-switcher-avatar{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:-.02em;
}
.ws-switcher-name{
  flex:1;font-size:.78rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:left;line-height:1.3;
}
.ws-switcher-chevron{font-size:.95rem !important;color:rgba(255,255,255,.5);flex-shrink:0;transition:transform .2s;}
.ws-switcher-chevron.open{transform:rotate(180deg);}
.ws-switcher-spacer{flex:0 0 1px;height:18px;background:rgba(255,255,255,.15);margin:0 2px;}
.ws-switcher-add{
  width:26px;height:26px;border-radius:7px;border:none;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:background .15s, transform .1s;font-size:0;
}
.ws-switcher-add .material-symbols-outlined{font-size:1rem;}
.ws-switcher-add:hover{background:#0848e8;transform:scale(1.08);}
.ws-switcher-add:active{transform:scale(.95);}

/* Dropdown */
.ws-switcher-dropdown{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:var(--s2);border:1px solid var(--b1);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);z-index:500;
  padding:8px 0;max-height:380px;overflow:hidden;flex-direction:column;
}
#nav.collapsed .ws-switcher-dropdown{
  position:fixed;left:auto;right:auto;top:auto;min-width:260px;
}
.ws-switcher-dropdown.open{display:flex;}
.ws-dd-search-wrap{
  padding:6px 10px 8px;flex-shrink:0;
}
.ws-dd-search{
  width:100%;padding:8px 10px 8px 32px;background:var(--s3);border:1px solid var(--b1);
  border-radius:8px;color:var(--t1);font-family:'Inter',sans-serif;font-size:.75rem;outline:none;
  box-sizing:border-box;transition:border-color .15s;
}
.ws-dd-search::placeholder{color:var(--t4);}
.ws-dd-search:focus{border-color:var(--acc);}
.ws-dd-search-icon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:.9rem;color:var(--t4);pointer-events:none;
}
.ws-dd-list{overflow-y:auto;max-height:260px;padding:0 6px;}
.ws-dd-section-label{
  font-size:.65rem;font-weight:700;color:var(--t4);text-transform:uppercase;
  letter-spacing:.08em;padding:10px 8px 4px;
}
.ws-dd-item{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;
  cursor:pointer;transition:background .12s;font-family:'Inter',sans-serif;
}
.ws-dd-item:hover{background:var(--s4);}
.ws-dd-item.active{background:var(--acc-g);}
.ws-dd-item .ws-dd-avatar{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0;
}
.ws-dd-item .ws-dd-label{
  flex:1;font-size:.78rem;font-weight:600;color:var(--t1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.ws-dd-item .ws-dd-check{
  font-size:.9rem;color:var(--acc);flex-shrink:0;opacity:0;
}
.ws-dd-item.active .ws-dd-check{opacity:1;}
.ws-dd-footer{
  display:flex;justify-content:space-between;padding:8px 10px 4px;border-top:1px solid var(--b1);margin-top:4px;
}
.ws-dd-footer button{
  background:none;border:none;font-size:.72rem;font-weight:600;cursor:pointer;
  font-family:'Inter',sans-serif;padding:6px 8px;border-radius:6px;transition:background .12s;
}
.ws-dd-footer button:hover{background:var(--s4);}
.ws-dd-footer .ws-dd-add{color:var(--acc);}
.ws-dd-footer .ws-dd-browse{color:var(--t3);}

/* ── Workspace Options Menu ── */
.ws-options-menu{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:var(--s2);border:1px solid var(--b1);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);z-index:9998;
  padding:6px 0;min-width:220px;font-family:'Inter',sans-serif;
}
.ws-options-menu.open{display:block;}
.ws-opt-item{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  cursor:pointer;color:var(--t2);font-size:0.75rem;font-weight:600;
  transition:background .1s;white-space:nowrap;position:relative;
}
.ws-opt-item:hover{background:var(--s4);color:var(--t1);}
.ws-opt-item .material-symbols-outlined{font-size:1.05rem;color:var(--t3);flex-shrink:0;}
.ws-opt-item:hover>.material-symbols-outlined{color:var(--t1);}
.ws-opt-item-arrow{margin-left:auto;font-size:0.85rem !important;color:var(--t4) !important;}
.ws-opt-item.danger{color:var(--red);}
.ws-opt-item.danger:hover{background:rgba(186,26,26,.1);}
.ws-opt-item.danger .material-symbols-outlined{color:var(--red);}
.ws-opt-item.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;}
.ws-opt-sep{height:1px;background:var(--b1);margin:4px 0;}
.ws-opt-submenu{
  display:none;position:fixed;
  background:var(--s2);border:1px solid var(--b1);border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.3);padding:6px 0;min-width:190px;z-index:9999;
}
.ws-opt-submenu.open{display:block;}
.ws-opt-submenu .ws-opt-item{padding:7px 14px;font-size:0.72rem;}

/* ── Browse All Workspaces Modal ── */
.ws-browse-overlay{
  position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  animation:wsBrowseFadeIn .18s ease;
}
@keyframes wsBrowseFadeIn{from{opacity:0}to{opacity:1}}
.ws-browse-modal{
  width:90vw;max-width:900px;height:80vh;max-height:680px;
  display:flex;flex-direction:column;background:var(--s1);
  color:var(--t1);font-family:'Inter',sans-serif;
  border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.45);
  border:1px solid var(--b1);overflow:hidden;
}
.ws-browse-header{
  display:flex;align-items:center;gap:16px;padding:14px 24px;
  border-bottom:1px solid var(--b1);flex-shrink:0;
}
.ws-browse-header h2{
  font-size:1rem;font-weight:700;margin:0;white-space:nowrap;color:var(--t1);
}
.ws-browse-search-wrap{
  position:relative;flex:0 1 340px;margin-left:auto;
}
.ws-browse-search-wrap .material-symbols-outlined{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:1.05rem;color:var(--t4);pointer-events:none;
}
.ws-browse-search{
  width:100%;padding:7px 12px 7px 32px;border-radius:6px;
  border:1px solid var(--b2);background:var(--s3);
  color:var(--t1);font-size:.8rem;font-family:'Inter',sans-serif;outline:none;
  transition:border-color .15s;
}
.ws-browse-search:focus{border-color:var(--acc);}
.ws-browse-close{
  background:none;border:none;color:var(--t3);cursor:pointer;
  padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;margin-left:8px;
}
.ws-browse-close:hover{background:var(--s4);color:var(--t1);}
.ws-browse-body{
  display:flex;flex:1;overflow:hidden;
}
.ws-browse-sidebar{
  width:200px;flex-shrink:0;border-right:1px solid var(--b1);
  padding:16px 0;display:flex;flex-direction:column;overflow-y:auto;
}
.ws-browse-nav-item{
  display:flex;align-items:center;gap:8px;padding:8px 20px;
  font-size:.78rem;font-weight:500;color:var(--t3);cursor:pointer;
  border-radius:0;transition:background .12s,color .12s;
  border:none;background:none;width:100%;text-align:left;
  font-family:'Inter',sans-serif;
}
.ws-browse-nav-item:hover{background:var(--s4);color:var(--t1);}
.ws-browse-nav-item.active{
  background:var(--acc);color:#fff;font-weight:600;
}
.ws-browse-nav-item .material-symbols-outlined{font-size:1.05rem;}
.ws-browse-nav-section{
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--t4);padding:16px 20px 6px;margin:0;
}
.ws-browse-create-btn{
  margin:auto 16px 0;padding:9px 14px;border-radius:8px;
  background:var(--acc);color:#fff;border:none;
  font-size:.78rem;font-weight:600;cursor:pointer;display:flex;align-items:center;
  gap:6px;font-family:'Inter',sans-serif;transition:filter .12s;
}
.ws-browse-create-btn:hover{filter:brightness(1.15);}
.ws-browse-content{
  flex:1;overflow-y:auto;padding:28px 36px;
}
.ws-browse-content h3{
  font-size:1.25rem;font-weight:700;margin:0 0 20px;color:var(--t1);
}
.ws-browse-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.ws-browse-card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--s3);border:1px solid var(--b1);
  border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s;
}
.ws-browse-card:hover{
  background:var(--s4);border-color:var(--b2);
}
.ws-browse-card-avatar{
  width:42px;height:42px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;font-weight:700;color:#fff;
  flex-shrink:0;position:relative;
}
.ws-browse-card-avatar .lock-icon{
  position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;
  background:var(--s1);border-radius:50%;display:flex;
  align-items:center;justify-content:center;
}
.ws-browse-card-avatar .lock-icon .material-symbols-outlined{font-size:.6rem;color:var(--t4);}
.ws-browse-card-name{
  flex:1;font-size:.85rem;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ws-browse-card-role{
  font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:4px;
  background:var(--s4);color:var(--t3);
  text-transform:capitalize;flex-shrink:0;
}
.ws-browse-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 20px;text-align:center;color:var(--t4);
}
.ws-browse-empty .material-symbols-outlined{font-size:3rem;margin-bottom:12px;opacity:.4;}
.ws-browse-empty p{font-size:.85rem;margin:4px 0 0;}
.ws-browse-card-joinable{border-style:dashed !important;opacity:.85;}
.ws-browse-card-joinable:hover{opacity:1;border-color:var(--acc) !important;}
.ws-browse-card-not-joined{background:rgba(78,124,246,.12) !important;color:var(--acc) !important;}
.ws-browse-card-role.owner{background:rgba(155,114,251,.15);color:#9b72fb;}

/* ── Workspace Dashboard Header ── */
.ws-dash-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-bottom:1px solid var(--b1);background:var(--s2);
  flex-shrink:0;
}
.ws-dash-header-left{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.ws-dash-header-icon{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;
}
.ws-dash-header-name{
  font-size:.9rem;font-weight:700;color:var(--t1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.ws-dash-header-right{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.ws-dash-avatars{
  display:flex;align-items:center;
}
.ws-dash-avatar{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.6rem;font-weight:700;color:#fff;
  border:2px solid var(--s2);margin-left:-8px;object-fit:cover;
}
.ws-dash-avatar:first-child{margin-left:0;}
.ws-dash-avatar-more{
  background:var(--s4) !important;color:var(--t3) !important;
  font-size:.6rem;font-weight:700;
}
img.ws-dash-avatar{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--s2);
  margin-left:-8px;object-fit:cover;
}
.ws-dash-overflow-wrap{position:relative;}
.ws-dash-overflow-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--b2);
  background:var(--s3);color:var(--t3);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:background .12s,color .12s;
}
.ws-dash-overflow-btn:hover{background:var(--s4);color:var(--t1);}
.ws-dash-overflow-btn .material-symbols-outlined{font-size:1.1rem;}
.ws-dash-overflow-menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:var(--s2);border:1px solid var(--b1);border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.3);padding:4px 0;min-width:200px;z-index:500;
}
.ws-dash-overflow-menu.open{display:block;}
.ws-opt-item{
  display:flex;align-items:center;gap:8px;padding:9px 16px;
  font-size:.78rem;color:var(--t2);cursor:pointer;
  transition:background .1s;
}
.ws-opt-item:hover{background:var(--s4);}
.ws-opt-item .material-symbols-outlined{font-size:1rem;color:var(--t4);}
.ws-opt-item.danger{color:#f06;}
.ws-opt-item.danger .material-symbols-outlined{color:#f06;}
.ws-opt-item.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}

/* Project invite dialog rows */
.proj-invite-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;transition:background .1s;}
.proj-invite-row:hover{background:var(--s4);}
.proj-invite-action{background:transparent;border:1px solid var(--b2);color:var(--t3);width:28px;height:28px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s;padding:0;}
.proj-invite-action:hover{background:var(--s5);color:var(--t1);border-color:var(--b3);}
.proj-invite-action.danger:hover{background:rgba(240,79,94,.15);color:var(--red);border-color:rgba(240,79,94,.4);}

/* ── Workspace Preview Panel ── */
.ws-preview-panel{
  display:flex;align-items:center;justify-content:center;
  flex:1;padding:60px 20px;
}
.ws-preview-inner{
  text-align:center;max-width:420px;
}
.ws-preview-inner h2{
  font-size:1.2rem;font-weight:700;color:var(--t1);margin:0 0 8px;
}

/* ── Workspace Member Row (dialog) ── */
.ws-member-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:8px;transition:background .1s;
}
.ws-member-row:hover{background:var(--s4);}
.ws-member-actions{display:flex;gap:4px;flex-shrink:0;}
.teams-role-badge.owner{background:rgba(155,114,251,.15);color:#9b72fb;}
.teams-role-badge.member{background:var(--s4);color:var(--t3);}

/* Collapsed sidebar: show only avatar */
#nav.collapsed .ws-switcher{padding:6px;justify-content:center;border-radius:10px;}
#nav.collapsed .ws-switcher-avatar{width:32px;height:32px;border-radius:9px;font-size:.85rem;}
#nav.collapsed #wsSwitcher{padding-left:0 !important;padding-right:0 !important;display:flex;justify-content:center;}
#nav.collapsed .ws-switcher-dropdown{left:-40px;right:auto;width:260px;}

/* ══════════════════════════════
   MAIN AREA
══════════════════════════════ */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative;z-index:10;}

/* ── top bar ── */
#topbar{
  height:50px;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);align-items:center;padding:0 16px;
  border-bottom:1px solid var(--b1);background:var(--s1);flex-shrink:0;gap:1rem;
}
#topbar h1{font-family: 'Inter', sans-serif;font-size:1rem;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ── Account Avatar Menu ── */
.account-avatar-btn{width:36px;height:36px;border-radius:50%;border:2px solid var(--b2);background:var(--acc);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;transition:border-color .15s,box-shadow .15s;}
.account-avatar-btn:hover{border-color:var(--acc);box-shadow:0 0 0 2px rgba(78,124,246,.25);}
.account-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;width:280px;background:var(--s2);border:1px solid var(--b2);border-radius:12px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);z-index:300;flex-direction:column;overflow:hidden;}
.account-menu.open{display:flex;}
.account-menu-header{display:flex;align-items:center;gap:12px;padding:16px;}
.account-menu-avatar{width:40px;height:40px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.account-menu-divider{height:1px;background:var(--b1);margin:0;}
.account-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:none;color:var(--t2);font-size:0.75rem;font-weight:600;cursor:pointer;text-align:left;transition:background .1s;font-family:inherit;}
.account-menu-item:hover{background:var(--s3);color:var(--t1);}

/* ── Notifications ── */
.notif-bell{position:relative;background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .12s;}
.notif-bell:hover{color:var(--t1);}
.notif-badge{position:absolute;top:-2px;right:-4px;font-size:0.75rem;background:var(--red);color:#fff;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;}
.notif-panel{position:absolute;top:42px;right:8px;width:360px;max-width:92vw;max-height:420px;overflow:hidden;background:var(--s2);border:1px solid var(--b2);border-radius:10px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);z-index:250;display:none;flex-direction:column;white-space:normal;}
.notif-panel #notifList{overflow-y:auto;max-height:370px;}
.notif-panel.open{display:flex;}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--b1);font-size:0.75rem;font-weight:700;color:var(--t1);}
.notif-header button{background:none;border:none;color:var(--acc);cursor:pointer;font-size:0.75rem;font-weight:600;}
.notif-header button:hover{text-decoration:underline;}
.notif-empty{padding:32px 16px;text-align:center;color:var(--t3);font-size:0.75rem;}
.notif-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .1s;overflow:hidden;}
.notif-item:hover{background:var(--s3);}
.notif-item.unread{background:rgba(78,124,246,.06);}
.notif-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;background:var(--s4);}
.notif-body{flex:1;min-width:0;}
.notif-text{font-size:0.75rem;color:var(--t2);line-height:1.4;overflow-wrap:break-word;word-wrap:break-word;white-space:normal;}
.notif-text strong{color:var(--t1);font-weight:600;}
.notif-time{font-size:0.75rem;color:var(--t4);margin-top:2px;}

/* ── AUTOMATIONS TAB ── */
.auto-empty{padding:48px 24px;text-align:center;color:var(--t3);font-size:0.75rem;}
.auto-empty-icon{font-size:2.2rem;margin-bottom:10px;}
.auto-rule-card{background:var(--s3);border:1px solid var(--b1);border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .13s;}
.auto-rule-card:hover{border-color:var(--b2);background:var(--s4);}
.auto-rule-icon{width:36px;height:36px;border-radius:8px;background:rgba(78,124,246,.12);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.auto-rule-body{flex:1;min-width:0;}
.auto-rule-name{font-size:.78rem;font-weight:600;color:var(--t1);margin-bottom:2px;}
.auto-rule-desc{font-size:0.75rem;color:var(--t3);line-height:1.4;}
.auto-toggle{position:relative;width:34px;height:20px;flex-shrink:0;}
.auto-toggle input{opacity:0;width:0;height:0;position:absolute;}
.auto-toggle-track{position:absolute;inset:0;border-radius:20px;background:var(--b2);cursor:pointer;transition:background .18s;}
.auto-toggle input:checked + .auto-toggle-track{background:var(--acc);}
.auto-toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s;}
.auto-toggle input:checked + .auto-toggle-track::after{transform:translateX(14px);}
#autoBuilderModal{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s;}
#autoBuilderModal.open{opacity:1;pointer-events:all;}
.auto-modal-box{background:var(--s2);border:1px solid var(--b2);border-radius:14px;width:500px;max-width:96vw;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);transform:translateY(12px);transition:transform .18s;}
#autoBuilderModal.open .auto-modal-box{transform:translateY(0);}
.auto-modal-hdr{padding:18px 22px 14px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:10px;}
.auto-modal-title{font-size:.85rem;font-weight:700;color:var(--t1);flex:1;}
.auto-modal-body{padding:20px 22px;overflow-y:auto;flex:1;}
.auto-modal-foot{padding:14px 22px;border-top:1px solid var(--b1);display:flex;justify-content:flex-end;gap:8px;}
.auto-field-group{margin-bottom:18px;}
.auto-field-group label{display:block;font-size:0.75rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.auto-field-group select,.auto-field-group input[type=text],.auto-field-group input[type=number],.auto-field-group textarea{width:100%;background:var(--s4);border:1px solid var(--b2);color:var(--t1);font-size:0.75rem;padding:8px 10px;border-radius:6px;outline:none;box-sizing:border-box;transition:border-color .12s;}
.auto-field-group select:focus,.auto-field-group input:focus,.auto-field-group textarea:focus{border-color:var(--acc);}
.auto-section-sep{font-size:0.75rem;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 14px;display:flex;align-items:center;gap:8px;}
.auto-section-sep::after{content:'';flex:1;height:1px;background:var(--b1);}

/* ── Multi-assignee ── */
.assignee-picker{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:32px;padding:4px 6px;background:var(--s4);border:1px solid var(--b2);border-radius:4px;cursor:pointer;transition:border-color .12s;}
.assignee-picker:focus-within{border-color:var(--acc);}
.assignee-chip{display:flex;align-items:center;gap:4px;background:var(--acc-g);border:1px solid rgba(78,124,246,.25);color:var(--t1);font-size:0.75rem;padding:2px 6px 2px 8px;border-radius:12px;white-space:nowrap;}
.assignee-chip .chip-x{cursor:pointer;font-size:0.75rem;color:var(--t3);margin-left:2px;line-height:1;}
.assignee-chip .chip-x:hover{color:var(--red);}
.assignee-dd{position:absolute;z-index:210;background:var(--s2);border:1px solid var(--b2);border-radius:8px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);max-height:180px;overflow-y:auto;width:100%;margin-top:2px;}
.assignee-dd-item{padding:6px 12px;font-size:0.75rem;color:var(--t2);cursor:pointer;transition:background .1s;}
.assignee-dd-item:hover{background:var(--s4);color:var(--t1);}
.assignee-dd-item.selected{color:var(--acc2);font-weight:600;}
.assignee-dd-team{padding:7px 12px;font-size:0.7rem;font-weight:700;color:var(--t1);cursor:pointer;display:flex;align-items:center;gap:6px;background:var(--s3);border-bottom:1px solid var(--b1);transition:background .1s;}
.assignee-dd-team:hover{background:var(--s4);}
.assignee-dd-team .team-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.assignee-dd-sep{padding:4px 12px;font-size:0.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t4);font-weight:700;background:var(--s2);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);}

button,select{font-family:'Inter',sans-serif;}
.btn{border:none;cursor:pointer;border-radius:9999px;transition:all .2s;font-size:0.75rem;font-weight:600;font-family:'Inter', sans-serif;padding:8px 16px;background:var(--s3);color:var(--t2);box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.btn:hover{color:var(--t1);background:var(--s4);transform:translateY(-1px);box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.btn.primary{background: var(--acc);color:#fff;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.btn.primary:hover{filter:brightness(1.1);color:#fff;}
.btn.active{border-color:var(--acc);color:var(--acc2);background:var(--acc-g);}
.btn.danger{color:var(--red);border-color:#3a1018;background:transparent;}
.btn.danger:hover{background:#1a080d;}
.btn.ghost{background:transparent;border-color:var(--b2);color:var(--t3);}

/* ── contenteditable placeholder ── */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--t4);
  font-weight: 400;
  pointer-events: none;
}

/* ── tab bar ── */
#tabbar{
  position:relative;z-index:100;
  overflow-x: auto;
  white-space: nowrap;
}
#tabbar::-webkit-scrollbar { height: 3px; }
#tabbar::-webkit-scrollbar-track { background: transparent; }
#tabbar::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }
#tabbar { scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
.tab{
  padding:6px 4px;font-size:.75rem;font-weight:600;color:var(--t4);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .12s;white-space:nowrap;
  display:inline-flex;align-items:center;letter-spacing:0.02em;
}
.tab:hover{color:var(--t2);}
.tab.active{color:var(--acc);border-bottom-color:var(--acc);}
.tab-icon{margin-right:6px;font-size:.85rem;opacity:.7;}
.tab.drag-over-left { box-shadow: -2px 0 0 var(--acc); position: relative; }
.tab.drag-over-right { box-shadow: 2px 0 0 var(--acc); position: relative; }

/* ══════════════════════════════
   VIEWS
══════════════════════════════ */
.view{display:none;flex:1;overflow:hidden;flex-direction:column;}
.view.active{display:flex;}

/* ADMIN PORTAL */
.admin-nav-group { margin-bottom: 4px; }
.admin-nav-header { padding: 10px 12px; display: flex; align-items: center; font-size: 0.75rem; color: var(--t2); font-weight: 600; cursor: pointer; border-radius: 6px; transition: background 0.15s, color 0.15s; user-select: none; }
.admin-nav-header:hover { background: var(--s3); color: var(--t1); }
.admin-nav-items { display: none; flex-direction: column; margin-top: 2px; padding-left: 28px; gap: 2px; }
.admin-nav-group.expanded .admin-nav-items { display: flex; }
.admin-nav-group.expanded .nav-dir-expand { transform: rotate(180deg); }
.nav-dir-expand { transition: transform 0.2s; }
.admin-nav-item { padding: 8px 12px; font-size: 0.75rem; color: var(--t3); cursor: pointer; border-radius: 6px; transition: background 0.15s, color 0.15s; user-select: none; }
.admin-nav-item:hover { background: var(--s3); color: var(--t1); }
.admin-nav-item.active { background: rgba(4, 52, 198, 0.1); color: var(--acc); font-weight: 600; }

/* ── HOME / DASHBOARD ── */
#view-home{padding:28px;overflow-y:auto;gap:20px;}
#view-home::-webkit-scrollbar{width:4px;}
#view-home::-webkit-scrollbar-thumb{background:var(--b2);}
.home-top{display:flex;align-items:center;gap:24px;margin-bottom:4px;}
.home-hero{margin:0;}
.home-hero h2{font-family: 'Inter', sans-serif;font-size:1.6rem;font-weight:300;color:var(--t1);line-height:1.3;}
.home-hero h2 em{color:var(--acc2);font-style:italic;}
.home-hero p{font-size:0.75rem;color:var(--t3);margin-top:6px;}
/* Rounded checkbox corners to match the rest of the UI (Tailwind's reset forces border-radius:0) */
input[type="checkbox"]{border-radius:5px;}
/* CSS-column masonry so cards pack tightly instead of leaving big grid-row gaps under a tall card (e.g. Deadlines) */
.dash-grid{column-width:330px;column-gap:20px;margin-top:4px;}
.dash-grid>*{break-inside:avoid;-webkit-column-break-inside:avoid;width:100%;display:inline-block;vertical-align:top;margin:0 0 20px;}
.project-card{position:relative;overflow:visible;}
.dc-scale{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;cursor:nwse-resize;opacity:0;transition:opacity .15s;z-index:3;}
.dc-scale::after{content:'';position:absolute;bottom:4px;right:4px;width:7px;height:7px;border-right:2px solid var(--t4);border-bottom:2px solid var(--t4);border-radius:0 0 2px 0;}
.project-card:hover .dc-scale{opacity:.6;}
.dc-scale:hover{opacity:1!important;}
.project-card{
  background-color:var(--s3);border:none;border-radius:16px;
  padding:24px;cursor:pointer;transition:transform .2s, box-shadow .2s;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.project-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(0,0,0,0.12), 0 4px 8px -4px rgba(0,0,0,0.06);}
.pc-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.pc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.pc-name{font-size:.9rem;font-weight:700;flex:1;letter-spacing:-.01em;}
.pc-status{font-size:0.7rem;padding:2px 8px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.pc-desc{font-size:0.8rem;color:var(--t3);line-height:1.6;margin-bottom:10px;min-height:20px;}
.pc-meta{display:flex;gap:12px;}
.pc-stat{font-size:0.8rem;color:var(--t3);}
.pc-stat span{color:var(--t2);}
.pc-progress{height:3px;background:var(--b2);border-radius:2px;margin-top:10px;overflow:hidden;}
.pc-progress-fill{height:100%;border-radius:2px;transition:width .3s;}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1;}
.stat-card{background:var(--s3);border:none;border-radius:12px;padding:18px;}
.stat-num{font-family:'Inter',sans-serif;font-size:2rem;font-weight:700;line-height:1;}
.stat-lbl{font-size:0.75rem;font-weight:600;color:var(--t3);margin-top:8px;}
.pc-mytasks{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--b2);}
.pc-mytasks-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--t3);margin-bottom:6px;}
.pc-mytasks-list{max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
.pc-mytasks-item{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--t2);padding:4px 0;}
.pc-mytasks-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.template-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 24px;border-radius:16px;background:var(--s2);cursor:pointer;text-align:center;transition:transform .2s, box-shadow .2s;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.template-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(0,0,0,0.12);}
.tc-title{font-size:1.1rem;font-weight:700;color:var(--t1);}
.tc-sub{font-size:0.75rem;font-weight:600;color:var(--acc2);text-transform:uppercase;letter-spacing:0.05em;}
.tc-desc{font-size:0.85rem;color:var(--t3);line-height:1.5;}
.tp-tabs{display:flex;border-bottom:1px solid var(--b2);margin-bottom:12px;gap:0;}
.tp-tab{padding:8px 16px;cursor:pointer;font-size:0.8rem;font-weight:600;color:var(--t3);border-bottom:2px solid transparent;transition:all .15s;}
.tp-tab:hover{color:var(--t1);}
.tp-tab.active{color:var(--acc);border-bottom-color:var(--acc);}
.tp-tab-pane{display:none;}
.tp-tab-pane.active{display:block;}
.tp-add-field-wrap{position:relative;margin:8px 0 4px;}
.tp-add-field-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px dashed var(--b3);border-radius:6px;background:transparent;color:var(--t3);font-size:0.78rem;font-weight:600;cursor:pointer;transition:all .15s;width:100%;}
.tp-add-field-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-g);}
.tp-field-picker{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--s2);border:1px solid var(--b2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:100;max-height:260px;overflow:hidden;display:flex;flex-direction:column;}
.tp-field-picker-search{padding:8px;border-bottom:1px solid var(--b1);}
.tp-field-picker-search input{width:100%;padding:6px 10px;background:var(--s4);border:1px solid var(--b2);border-radius:6px;color:var(--t1);font-size:0.78rem;outline:none;}
.tp-field-picker-search input:focus{border-color:var(--acc);}
.tp-field-picker-list{overflow-y:auto;flex:1;padding:4px;}
.tp-field-option{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:0.78rem;color:var(--t2);transition:background .1s;}
.tp-field-option:hover{background:var(--s4);}
.tp-field-option .tfo-icon{font-size:0.85rem;color:var(--t4);width:20px;text-align:center;}
.tp-field-option .tfo-label{flex:1;}
.tp-field-option .tfo-check{color:var(--acc);font-size:0.85rem;}
.tp-field-option.active{color:var(--acc);}
.tp-field-option.active .tfo-icon{color:var(--acc);}
.tp-field-row-remove{position:absolute;right:4px;top:4px;background:none;border:none;color:var(--t4);cursor:pointer;font-size:0.7rem;opacity:0;transition:opacity .15s;padding:2px 4px;border-radius:3px;}
.tp-field-row-remove:hover{color:var(--red);background:rgba(244,67,54,.1);}
[data-tp-field]:hover .tp-field-row-remove{opacity:1;}

/* ── GANTT VIEW ── */
#view-gantt{flex-direction:row;}
.gantt-sidebar{width:var(--lw);flex-shrink:0;display:flex;flex-direction:column;border-right:none;background:var(--s2);position:relative;box-shadow: 4px 0 16px rgba(0,0,0,0.02);z-index:2;}
/* Resize handle on right edge of gantt sidebar */
#ganttSidebarResizer{
  position:absolute;right:-4px;top:0;bottom:0;width:8px;
  cursor:col-resize;z-index:20;
  display:flex;align-items:center;justify-content:center;
}
#ganttSidebarResizer::after{
  content:'';display:block;width:4px;height:32px;
  background:var(--b2);border-radius:4px;
  transition:background .2s, transform .2s;
}
#ganttSidebarResizer:hover::after,
#ganttSidebarResizer.dragging::after{
  background:var(--acc);transform:scaleX(1.5);
}
.gs-toolbar-spacer{min-height:56px;flex-shrink:0;background:var(--s2);display:flex;align-items:center;padding:0 12px;box-sizing:border-box;}
.gantt-search-input{width:100%;background:var(--s3);border:1px solid var(--b2);border-radius:9999px;padding:0 14px;height:32px;line-height:32px;box-sizing:border-box;font-size:0.75rem;font-weight:600;color:var(--t1);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s;display:block;}
.gantt-search-input::placeholder{color:var(--t4);}
.gantt-search-input:focus{border-color:var(--acc);}
.gs-hdr{height:var(--hdr);border-bottom:none;background:var(--s2);flex-shrink:0;display:flex;align-items:flex-end;padding:0 10px 8px;gap:4px;}
.gs-col{font-size:0.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--t4);}
.gs-col.name-col{flex:1;}
.gs-body{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:20px;contain:layout style;will-change:scroll-position;}
.gs-body::-webkit-scrollbar{width:3px;}
.gs-body::-webkit-scrollbar-thumb{background:var(--b2);}
.gs-col-extra { display:none; font-size:0.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--t4); flex-shrink:0; }
.row-extra { display:none; font-size:0.75rem; color:var(--t3); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:6px; }
.gs-col-resource { display:none; font-size:0.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--t4); flex-shrink:0; }
.row-resource { display:none; font-size:0.75rem; color:var(--t3); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:6px; }
.gantt-sidebar.show-extra-cols .gs-col-extra, .gantt-sidebar.show-extra-cols .row-extra { display:block; }
.gantt-sidebar.show-extra-cols.show-resource-col .gs-col-resource, .gantt-sidebar.show-extra-cols.show-resource-col .row-resource { display:block; }
.gs-col-lag, .row-lag, .gs-col-float, .row-float { display:none; font-size:0.75rem; color:var(--t3); flex-shrink:0; white-space:nowrap; overflow:hidden; }
.gs-col-lag, .gs-col-float { text-transform:uppercase; letter-spacing:.05em; color:var(--t4); }
.gantt-sidebar.show-extra-cols.show-lag-col .gs-col-lag, .gantt-sidebar.show-extra-cols.show-lag-col .row-lag { display:block; }
.gantt-sidebar.show-extra-cols.show-float-col .gs-col-float, .gantt-sidebar.show-extra-cols.show-float-col .row-float { display:block; }


.gs-row-del{
  width:16px;height:16px;border-radius:3px;
  border:none;background:transparent;color:var(--t4);
  cursor:pointer;font-size:0.75rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;padding:0;
  margin-left:2px;opacity:0;
}
.g-task-row:hover .gs-row-del{opacity:1;}
.gs-row-del:hover{background:rgba(240,79,94,.2);color:var(--red);}
.g-task-row{
  height:calc(var(--row-h) - 2px);display:flex;align-items:center;
  padding:0 8px;border:none;margin-bottom:2px;border-radius:6px;
  gap:5px;cursor:pointer;user-select:none;contain:layout style inline-size;
  transition:background 0.15s;
}
.g-task-row:nth-child(even){background: rgba(0,0,0,0.015);}
.g-task-row:hover{background:var(--s4);}
.g-task-row.sel{background:var(--acc-g);border-left:2px solid var(--acc);}
.g-task-row.drag-over-group{background:rgba(52,209,122,.15) !important;}
.g-task-row.is-group{background:var(--s3); border-radius: 8px;}
.g-task-row.is-group:hover{background:var(--s4);}
.collapse-btn{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--t3);background:var(--s5);border:none !important;border-radius:4px;padding:0 !important;cursor:pointer;transition:background 0.15s;}
.collapse-btn:hover{background:var(--s4);}
.row-name{flex:1;font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-name.group-name{font-weight:700;}
.row-name.ms-name{color:rgb(255, 185, 0);font-style:italic;}
.row-pct{font-size:0.75rem;color:var(--t3);width:28px;text-align:right;flex-shrink:0;}
.row-note-icon{font-size:0.75rem;color:var(--t4);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:16px;height:16px;}
.row-note-icon.has-note{color:var(--acc2);}
.color-pip{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.color-pip.ms-pip{border-radius:1px;transform:rotate(45deg);width:9px;height:9px;}
.g-task-row.is-child .color-pip.ms-pip{width:6px;height:6px;}
.group-color-pip{
  width:14px;height:14px;border-radius:4px;flex-shrink:0;
  cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.2);
  transition:border-color .12s, transform .2s;
}
.group-color-pip:hover{border-color:rgba(255,255,255,.6);transform:scale(1.15);}
.group-color-pip-icon{
  font-size:0.75rem;color:rgba(255,255,255,.0);
  transition:color .12s;pointer-events:none;
  line-height:1;
}
.group-color-pip:hover .group-color-pip-icon{color:rgba(255,255,255,.8);}
.dep-badge{font-size:0.75rem;padding:2px 4px;border-radius:4px;background:var(--violet-g);color:var(--violet);flex-shrink:0;}
/* child task indent */
.g-task-row.is-child{padding-left:24px;}
.g-task-row.is-child::before{content:'';position:absolute;left:10px;top:50%;width:8px;height:1px;background:var(--b2);transform:translateY(-50%);}
.g-task-row.is-child::after{content:'';position:absolute;left:10px;top:-50%;width:1px;height:100%;background:var(--b2);}
.g-task-row.is-child .color-pip{width:5px;height:5px;}
/* quick complete button — always takes up space, only visible on hover or when done */
.row-done-btn{
  width:16px;height:16px;border-radius:50%;border:1.5px solid transparent;
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;color:transparent;background:transparent;transition:all .12s;
  opacity:0;
}
.g-task-row:hover .row-done-btn{opacity:1;border-color:var(--b3);color:var(--t4);}
.g-task-row:hover .row-done-btn:hover{border-color:var(--green);color:var(--green);}
.row-done-btn.done{background:var(--green);border-color:var(--green);color:#fff;opacity:1;}

/* chart area */
.chart-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--s1);}
.chart-toolbar{min-height:56px;display:flex;align-items:center;flex-wrap:wrap;padding:4px 24px;border-bottom:none;background:var(--s1);gap:8px;flex-shrink:0;position:relative;z-index:100;}
.chart-toolbar .btn{
  line-height:1;padding:8px 16px;font-size:0.75rem;height:32px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--surface-container-high, rgba(255,255,255,0.04));
  border:none; border-radius:30px; color:var(--t2); font-weight:600;
  font-family:'Inter', sans-serif; transition:all 0.15s;
}
.chart-toolbar .btn:hover{
  background:var(--surface-container-highest, rgba(255,255,255,0.08)); color:var(--t1);
}
.chart-toolbar .btn.primary{
  background: var(--acc);
  color:#fff; padding:8px 24px; font-weight:700; font-size:0.75rem;
}
.chart-toolbar .btn.primary:hover{ filter:brightness(1.15); }
.chart-scroll{flex:1;overflow:auto;position:relative;contain:layout style;will-change:scroll-position;}
.chart-inner{padding-bottom:20px;}
.chart-scroll::-webkit-scrollbar{height:5px;width:3px;transition:height .15s;}
.chart-scroll::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px;}
.chart-scroll:hover::-webkit-scrollbar{height:9px;}
.chart-scroll:hover::-webkit-scrollbar-thumb{background:var(--b3);}
.chart-inner{position:relative;}

.sticky-hdr2{position:sticky;top:0;z-index:15;background:var(--s2);contain:layout style;}
.month-row{height:20px;display:flex;background:var(--s2);border-bottom:none;}
.month-cell{display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;letter-spacing:.03em;color:var(--t4);border-right:none;white-space:nowrap;overflow:hidden;flex-shrink:0;}
.day-row{height:36px;display:flex;align-items:flex-end;padding-bottom:5px;border-bottom:none;background:var(--s2);}
.day-cell{width:var(--cw);flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;border-right:1px solid rgba(0,0,0,.02);}
.day-cell .dn{font-size:0.75rem;color:var(--t4);font-weight:500;}
.day-cell .dd{font-size:0.75rem;color:var(--t3);font-weight:600;}
.day-cell.tdy .dd{color:var(--acc);font-weight:800;}
.day-cell.tdy .dn{color:var(--acc);font-weight:700;}
.day-cell.wk .dd,.day-cell.wk .dn{color:var(--b2);}

/* grid */
.gantt-rows{position:relative;contain:layout style;}
.gr-row{height:calc(var(--row-h) - 2px);margin-bottom:2px;display:flex;align-items:center;border-bottom:1px solid var(--b1);position:relative;contain:layout style inline-size;}
.gr-row:nth-child(even){background:rgba(128,128,128,.03);}
.gr-row:hover{background:var(--s3);}
.gr-row.group-row{background:var(--s3);border-radius:6px;}
.gr-cell{width:var(--cw);flex-shrink:0;height:100%;border-right:1px solid var(--b1);}
.gr-cell.wk{background:rgba(128,128,128,.03);}
.gr-cell.tdy{background:rgba(78,124,246,.04);border-right:1px solid rgba(78,124,246,.1);}

/* bars */
.g-bar{position:absolute;height:calc(var(--bh) + 2px);border-radius:12px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);display:flex;align-items:center;overflow:hidden;cursor:move;top:50%;transform:translateY(-50%);transition:box-shadow .2s;}
.g-bar:hover{box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); filter:brightness(1.05);}
.g-bar.dragging{opacity:.7;z-index:60 !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.bar-fill{height:100%;border-radius:12px 0 0 12px;}
.bar-lbl{position:absolute;left:8px;right:18px;font-size:0.75rem;font-weight:700;color:rgb(255,255,255);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;text-shadow: 0 1px 2px rgba(0,0,0,0.3);}
.bar-rz{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:ew-resize;background:rgba(0,0,0,.15);border-radius:0 12px 12px 0;}
.bar-rz:hover{background:rgba(0,0,0,.25);}
.bar-rz::after{content:'';position:absolute;left:3px;top:25%;height:50%;width:2px;background:rgba(255,255,255,0.4);border-radius:1px;}

.summary-bar{position:absolute;height:8px;top:50%;transform:translateY(-50%);cursor:pointer;border-radius:2px 2px 0 0;pointer-events:none;}
.summary-bar.is-group{clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 6px) 3px,6px 3px,0 100%);}
.summary-bar.is-task{clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 5px) 1px,5px 1px,0 100%); opacity: 0.85;}
.planned-strip{position:absolute;height:4px;bottom:3px;border-radius:2px;pointer-events:none;opacity:.45;}
.baseline-strip{position:absolute;height:4px;bottom:0px;border-radius:2px;pointer-events:none;opacity:.3;}
.ms-diamond{position:absolute;width:14px;height:14px;top:50%;transform:translateY(-50%) rotate(45deg);cursor:pointer;border-radius:4px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);transition:filter .2s, transform .2s;}
.ms-diamond:hover{filter:brightness(1.2);transform:translateY(-50%) rotate(45deg) scale(1.15);}
.ms-lbl{position:absolute;font-size:0.75rem;font-weight:700;white-space:nowrap;pointer-events:none;top:50%;transform:translateY(-50%);color:rgb(255, 185, 0);text-shadow:0 1px 2px rgba(0,0,0,0.2);}
.theme-light .ms-lbl{color:rgb(255, 185, 0);text-shadow:0 1px 2px rgba(255,255,255,0.5);}

.today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--acc);z-index:10;pointer-events:none;opacity:.75;}
.today-dot{position:absolute;top:0;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);}

.due-line{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:9;pointer-events:none;opacity:.65;display:none;}
.due-dot{position:absolute;top:0;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);}
.due-lbl{position:absolute;top:-14px;left:-40px;width:80px;text-align:center;font-size:0.75rem;font-weight:700;color:var(--red);text-transform:uppercase;}

#depSvg{position:absolute;top:0;left:0;pointer-events:none;z-index:8;overflow:visible;}
.dep-fs{stroke:#9b72fb;stroke-dasharray:4 3;fill:none;stroke-width:1.5;}
.dep-ss{stroke:#20d5c4;stroke-dasharray:2 2;fill:none;stroke-width:1.5;}
.dep-ff{stroke:#f472b6;stroke-dasharray:6 2;fill:none;stroke-width:1.5;}
.dep-sf{stroke:#f5a623;stroke-dasharray:3 3;fill:none;stroke-width:1.5;}

/* legend */
.gantt-legend{height:26px;display:flex;align-items:center;gap:14px;padding:0 12px;border-top:1px solid var(--b1);background:var(--s2);flex-shrink:0;font-size:0.75rem;color:var(--t3);}
.gs-legend-spacer{height:26px;flex-shrink:0;border-top:1px solid var(--b1);background:var(--s2);}

/* colour-picker swatches */
.ctp-swatch{width:24px;height:24px;border-radius:6px;cursor:pointer;transition:transform .15s,box-shadow .15s;border:2px solid transparent;flex-shrink:0;}
.ctp-swatch:hover{transform:scale(1.18);box-shadow:0 0 0 2px var(--t3);}
.ctp-swatch.sel{border-color:var(--acc);}
.ctp-custom-swatch{border:2px dashed var(--t3);}
.ctp-custom-swatch:hover{border-color:var(--acc);}

/* ── Baseline panel ── */
#baselinePanel{
  position:absolute;top:100%;left:0;z-index:120;
  background:var(--s3);border:1px solid var(--b2);border-radius:8px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  min-width:260px;padding:8px 0;
  display:none;
}
#baselinePanel.open{display:block;}
.bl-panel-hdr{
  padding:6px 14px 4px;font-size:0.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--t4);
}
.bl-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;cursor:pointer;transition:background .1s;
  font-size:0.75rem;color:var(--t2);
}
.bl-item:hover{background:var(--s4);}
.bl-item input[type=checkbox]{
  accent-color:var(--acc);width:13px;height:13px;flex-shrink:0;cursor:pointer;
}
.bl-item-meta{font-size:0.75rem;color:var(--t4);margin-left:auto;white-space:nowrap;}
.bl-item-del{
  opacity:0;width:18px;height:18px;border-radius:3px;border:none;
  background:transparent;color:var(--t4);cursor:pointer;font-size:0.75rem;
  display:flex;align-items:center;justify-content:center;transition:all .1s;flex-shrink:0;
}
.bl-item:hover .bl-item-del{opacity:1;}
.bl-item-del:hover{background:rgba(240,79,94,.2);color:var(--red);}
.bl-divider{height:1px;background:var(--b1);margin:4px 0;}
.bl-create-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 14px;background:none;border:none;
  font-size:0.75rem;color:var(--acc2);cursor:pointer;
  font-family:'Inter',sans-serif;transition:background .1s;text-align:left;
}
.bl-create-btn:hover{background:var(--acc-g);}
.bl-empty{padding:8px 14px;font-size:0.75rem;color:var(--t4);font-style:italic;}
.bl-strip-0{background:rgba(255,255,255,.55);}
.bl-strip-1{background:rgba(255,200,80,.55);}
.bl-strip-2{background:rgba(100,220,200,.55);}
.bl-strip-3{background:rgba(200,130,255,.55);}
.bl-strip-4{background:rgba(255,120,120,.55);}
.lg-item{display:flex;align-items:center;gap:4px;}
.lg-sq{width:8px;height:3px;border-radius:1px;}
.proj-vis-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--s3); border: 1px solid var(--b2); color: var(--t3); margin-left: 8px; vertical-align: middle; transition: all 0.1s; }
.proj-vis-badge:hover { background: var(--s4); color: var(--t1); border-color: var(--b3); }
.proj-vis-badge.private { background: rgba(240,165,0,.15); color: var(--amber); border-color: rgba(240,165,0,.3); }
.proj-vis-badge.private:hover { background: rgba(240,165,0,.25); border-color: rgba(240,165,0,.5); }
.proj-vis-badge.shareable { background: rgba(78,124,246,.15); color: var(--acc); border-color: rgba(78,124,246,.3); }
.proj-vis-badge.shareable:hover { background: rgba(78,124,246,.25); border-color: rgba(78,124,246,.5); }

/* dep mode */
body.dep-mode .g-bar{cursor:crosshair !important;}
body.dep-mode .g-bar:hover{box-shadow:0 0 0 2px var(--violet) !important;filter:none !important;}
.dep-banner{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;border-radius:20px;padding:6px 16px;font-size:0.75rem;z-index:300;pointer-events:none;}

/* ══════════════════════════════
   PROJECT NOTES VIEW
══════════════════════════════ */
#view-notes{padding:0;overflow:hidden;}
.notes-layout{display:flex;flex:1;height:100%;overflow:hidden;}
.notes-nav{width:200px;flex-shrink:0;border-right:1px solid var(--b1);background:var(--s2);display:flex;flex-direction:column;overflow:hidden;}
.notes-nav-hdr{padding:14px 12px 8px;font-size:0.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--t4);border-bottom:1px solid var(--b1);}
.notes-list{flex:1;overflow-y:auto;padding:6px;}
.notes-list::-webkit-scrollbar{width:3px;}
.notes-list::-webkit-scrollbar-thumb{background:var(--b2);}
.note-nav-item{padding:7px 9px;border-radius:5px;cursor:pointer;font-size:0.75rem;color:var(--t3);transition:all .1s;border:1px solid transparent;}
.note-nav-item:hover{background:var(--s4);color:var(--t2);}
.note-nav-item.active{background:var(--acc-g);color:var(--acc2);border-color:var(--b3);}
.note-nav-item .nni-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.note-nav-item .nni-meta{font-size:0.75rem;color:var(--t4);margin-top:2px;}
.notes-add-btn{margin:8px;padding:8px;text-align:center;border:1px dashed var(--b3);border-radius:5px;cursor:pointer;font-size:0.75rem;color:var(--t3);transition:all .1s;}
.notes-add-btn:hover{border-color:var(--acc);color:var(--acc2);}
.note-editor{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.note-editor-top{padding:12px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:8px;}
.note-title-input{flex:1;background:var(--s3);border:1px solid var(--b2);border-radius:10px;padding:10px 14px;outline:none;font-family: 'Inter', sans-serif;font-size:1.1rem;font-weight:600;color:var(--t1);transition:border-color .15s;}
.note-title-input:focus{border-color:var(--acc);}
.note-title-input::placeholder{color:var(--t4);}
.note-meta-row{padding:6px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--b1);background:var(--s3);}
.note-tag{font-size:0.75rem;padding:2px 7px;border-radius:10px;cursor:pointer;}
.note-content{flex:1;overflow-y:auto;padding:16px;}
.note-content::-webkit-scrollbar{width:4px;}
.note-content::-webkit-scrollbar-thumb{background:var(--b2);}
.note-textarea{width:100%;height:100%;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:.78rem;color:var(--t2);line-height:1.8;resize:none;}
.note-textarea::placeholder{color:var(--t4);}
.markdown-body {font-family:'Inter',sans-serif;font-size:.78rem;color:var(--t2);line-height:1.6;}
.markdown-body p {margin-bottom:8px;}
.markdown-body h1,.markdown-body h2,.markdown-body h3{font-family: 'Inter', sans-serif;color:var(--t1);margin:12px 0 8px;font-weight:600;}
.markdown-body strong, .markdown-body b {font-weight: 800; color: var(--t1);}
.markdown-body h1{font-size:1.4rem;} .markdown-body h2{font-size:1.15rem;} .markdown-body h3{font-size:.95rem;}
.markdown-body ul{padding-left:20px;margin-bottom:8px;list-style-type:disc;}
.markdown-body ol{padding-left:20px;margin-bottom:8px;list-style-type:decimal;}
.markdown-body li{margin-bottom:4px;}
.markdown-body a{color:var(--acc);text-decoration:none;} .markdown-body a:hover{text-decoration:underline;}
.markdown-body blockquote{border-left:3px solid var(--b3);padding-left:10px;color:var(--t3);margin:8px 0;}
.markdown-body pre{background:var(--s3);padding:8px;border-radius:4px;overflow-x:auto;font-family:monospace;font-size:0.75rem;margin:8px 0;}
.markdown-body code{background:var(--s3);padding:2px 4px;border-radius:3px;font-family:monospace;font-size:0.75rem;}
.markdown-body input[type="checkbox"]{margin-right:6px;}

.trello-desc-viewer {
  min-height: 40px;
  padding: 8px 12px;
  background: var(--s3);
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s;
}
.trello-desc-viewer:hover { background: var(--s4); }
.trello-desc-viewer.empty { color: var(--t4); background: var(--s4); }
#taskPanel:not(.advanced) .tp-advanced-section { display: none !important; }
.tp-textarea-editing { min-height: 120px; display: block !important; }
/* EasyMDE Dark Theme Overrides */
.editor-toolbar { border-color: var(--b1); background: var(--s2); opacity: 1; border-radius: 6px 6px 0 0; display: flex !important; flex-wrap: wrap; }
.editor-toolbar::before, .editor-toolbar::after { display: none; }
.editor-toolbar button { color: var(--t3); transition: color 0.1s; }
.editor-toolbar button:hover, .editor-toolbar button.active { background: var(--s4); color: var(--acc); border-color: transparent; }
.editor-toolbar i.separator { border-left-color: var(--b2); border-right: none; margin: 0 4px; overflow: hidden; font-size: 0; width: 0; min-width: 0; }
.CodeMirror { border-color: var(--b1); background: var(--s3); color: var(--t2); font-family: 'Inter', sans-serif; border-radius: 0 0 6px 6px; }
.CodeMirror-cursor { border-left-color: var(--t1); }
.editor-preview, .editor-preview-side { background: var(--s3); color: var(--t2); }
.CodeMirror-scroll { background: transparent; }
.CodeMirror-gutters { background: transparent; border-right: none; }
.CodeMirror .CodeMirror-placeholder { color: var(--t4); opacity: 1; }

/* Hide Markdown syntax selectively for WYSIWYG feel */
/* Bold */
.CodeMirror .cm-formatting-strong:has(~ .cm-formatting-strong),
.CodeMirror .cm-strong + .cm-formatting-strong { font-size: 0 !important; display: inline-block; width: 0; overflow: hidden; }

/* Italic */
.CodeMirror .cm-formatting-em:has(~ .cm-formatting-em),
.CodeMirror .cm-em + .cm-formatting-em { font-size: 0 !important; display: inline-block; width: 0; overflow: hidden; }

/* Strikethrough */
.CodeMirror .cm-formatting-strikethrough:has(~ .cm-formatting-strikethrough),
.CodeMirror .cm-strikethrough + .cm-formatting-strikethrough { font-size: 0 !important; display: inline-block; width: 0; overflow: hidden; }

/* Headings (Hide the `#` when followed by actual heading text) */
.CodeMirror .cm-formatting-header:has(+ .cm-header) { font-size: 0 !important; display: inline-block; width: 0; overflow: hidden; }

.note-fmt-bar{display:flex;align-items:center;gap:1px;padding:4px 10px;border-bottom:1px solid var(--b1);background:var(--s2);flex-wrap:wrap;flex-shrink:0;}
.note-fmt-btn{background:none;border:none;color:var(--t3);cursor:pointer;padding:3px 7px;border-radius:4px;font-size:0.75rem;font-family:'Inter',sans-serif;transition:background .1s,color .1s;line-height:1.4;white-space:nowrap;}
.note-fmt-btn:hover{background:var(--s4);color:var(--t1);}
.note-fmt-sep{width:1px;height:13px;background:var(--b2);margin:0 4px;flex-shrink:0;align-self:center;}
.note-empty{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:8px;color:var(--t4);font-size:.75rem;}
.note-empty-icon{font-size:2rem;opacity:.3;}

/* Meeting metadata bar */
.meeting-meta-bar{padding:8px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--b1);background:var(--s3);flex-wrap:wrap;}
.meeting-meta-bar label{font-size:0.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--t4);margin-right:2px;}
.meeting-meta-bar input[type="date"],
.meeting-meta-bar input[type="time"],
.meeting-meta-bar select{font-size:0.75rem;padding:3px 6px;border-radius:5px;border:1px solid var(--b2);background:var(--s4);color:var(--t2);font-family:'Inter',sans-serif;outline:none;}
.meeting-meta-bar input:focus,.meeting-meta-bar select:focus{border-color:var(--acc);}

/* Attendees chips */
.mtg-attendees{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:120px;}
.mtg-att-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;background:var(--acc-g);color:var(--acc2);font-size:0.75rem;font-weight:500;white-space:nowrap;}
.mtg-att-chip .att-x{cursor:pointer;opacity:.6;margin-left:2px;font-size:0.75rem;}
.mtg-att-chip .att-x:hover{opacity:1;}
.mtg-att-input-wrap{position:relative;display:inline-block;}
.mtg-att-input{font-size:0.75rem;padding:2px 6px;border-radius:5px;border:1px solid var(--b2);background:var(--s4);color:var(--t2);font-family:'Inter',sans-serif;outline:none;width:100px;}
.mtg-att-input:focus{border-color:var(--acc);}
.mtg-att-dropdown{position:absolute;top:100%;left:0;min-width:140px;background:var(--s3);border:1px solid var(--b2);border-radius:6px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);z-index:100;max-height:120px;overflow-y:auto;display:none;}
.mtg-att-dropdown.show{display:block;}
.mtg-att-opt{padding:5px 10px;font-size:0.75rem;color:var(--t2);cursor:pointer;}
.mtg-att-opt:hover{background:var(--acc-g);color:var(--acc2);}

/* Action items panel */
.mtg-action-panel{border-top:1px solid var(--b1);background:var(--s2);max-height:220px;overflow-y:auto;flex-shrink:0;}
.mtg-action-panel::-webkit-scrollbar{width:3px;}
.mtg-action-panel::-webkit-scrollbar-thumb{background:var(--b2);}
.mtg-action-hdr{padding:8px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--b1);position:sticky;top:0;background:var(--s2);z-index:1;}
.mtg-action-hdr-title{font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t4);font-weight:600;}
.mtg-action-hdr .btn{font-size:0.75rem;padding:3px 8px;}
.mtg-action-list{padding:4px 8px;}
.mtg-action-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;transition:background .1s;}
.mtg-action-item:hover{background:var(--s4);}
.mtg-action-cb{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--b3);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all .15s;background:transparent;color:transparent;}
.mtg-action-cb:hover{border-color:var(--acc);}
.mtg-action-cb.done{background:var(--green);border-color:var(--green);color:#fff;}
.mtg-action-text{flex:1;font-size:0.75rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mtg-action-text.done{text-decoration:line-through;color:var(--t4);}
.mtg-action-assignee{font-size:0.75rem;padding:1px 6px;border-radius:8px;background:var(--s4);color:var(--t3);white-space:nowrap;}
.mtg-action-link{background:none;border:none;color:var(--t4);cursor:pointer;font-size:0.75rem;padding:2px 4px;border-radius:3px;transition:color .1s;}
.mtg-action-link:hover{color:var(--acc2);}
.mtg-action-link.linked{color:var(--green);}
.mtg-action-empty{padding:12px 16px;font-size:0.75rem;color:var(--t4);text-align:center;}

/* Meeting badge in sidebar */
.nni-meeting-badge{display:inline-flex;align-items:center;gap:3px;font-size:0.75rem;color:var(--green);margin-left:4px;}

/* ══════════════════════════════
   PROJECT OVERVIEW VIEW
══════════════════════════════ */
#view-overview{padding:24px;overflow-y:auto;gap:16px;}
#view-overview::-webkit-scrollbar{width:4px;}
#view-overview::-webkit-scrollbar-thumb{background:var(--b2);}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ov-card{background:var(--s3);border:1px solid var(--b1);border-radius:8px;padding:16px;}
.ov-card-title{font-size:0.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--t4);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.ov-card.full{grid-column:1/-1;}
.summary-textarea{width:100%;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:0.75rem;color:var(--t2);line-height:1.8;resize:none;min-height:80px;}
.summary-textarea::placeholder{color:var(--t4);}
.deliverable-list{display:flex;flex-direction:column;gap:6px;}
.deliverable-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--s4);border-radius:5px;border:1px solid var(--b1);}
.del-check{width:14px;height:14px;border-radius:3px;border:1px solid var(--b3);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all .1s;}
.del-check.checked{background:var(--green);border-color:var(--green);color:#fff;}
.del-text{flex:1;font-size:0.75rem;background:transparent;border:none;outline:none;color:var(--t2);font-family:'Inter',sans-serif;}
.del-text::placeholder{color:var(--t4);}
.del-remove{color:var(--t4);cursor:pointer;font-size:0.75rem;background:none;border:none;padding:0 3px;flex-shrink:0;}
.del-remove:hover{color:var(--red);}
.add-del-btn{font-size:0.75rem;color:var(--t3);border:1px dashed var(--b3);background:transparent;padding:5px 10px;border-radius:4px;cursor:pointer;margin-top:6px;width:100%;text-align:center;font-family:'Inter',sans-serif;}
.add-del-btn:hover{border-color:var(--acc);color:var(--acc2);}
.risk-list{display:flex;flex-direction:column;gap:6px;}
.risk-item{padding:8px 10px;background:var(--s4);border-radius:5px;border-left:3px solid var(--amber);}
.risk-item.low{border-color:var(--green);}
.risk-item.high{border-color:var(--red);}
.risk-text{font-size:0.75rem;background:transparent;border:none;outline:none;color:var(--t2);font-family:'Inter',sans-serif;width:100%;}
.risk-meta{display:flex;gap:6px;margin-top:4px;}
.risk-level{font-size:0.75rem;padding:1px 5px;border-radius:3px;border:none;font-family:'Inter',sans-serif;cursor:pointer;}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.team-member{background:var(--s4);border:1px solid var(--b1);border-radius:6px;padding:10px;text-align:center;}
.tm-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;margin:0 auto 6px;color:#fff;}
.tm-name{font-size:0.75rem;color:var(--t2);font-weight:600;}
.tm-role{font-size:0.75rem;color:var(--t3);}
/* ══════════════════════════════
   TEAMS VIEW — polished styles
══════════════════════════════ */
.teams-card{background:var(--s2);border:1px solid var(--b1);border-radius:12px;padding:0;margin-bottom:18px;overflow:hidden;transition:border-color .15s;}
.teams-card:hover{border-color:var(--b2);}
.teams-card-header{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--b1);}
.teams-team-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0;background: rgba(78,124,246,.12);}
.teams-card-info{flex:1;min-width:0;}
.teams-card-name{font-size:.82rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.teams-card-sub{font-size:0.75rem;color:var(--t3);margin-top:2px;}
.teams-card-actions{display:flex;gap:4px;flex-shrink:0;}
.teams-card-actions button{background:var(--s4);border:1px solid var(--b1);border-radius:6px;color:var(--t3);cursor:pointer;font-size:0.75rem;padding:5px 10px;font-family:inherit;transition:all .12s;}
.teams-card-actions button:hover{background:var(--s5,var(--s4));color:var(--t1);border-color:var(--b2);}
.teams-section-title{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t4);padding:12px 18px 6px;display:flex;align-items:center;gap:6px;}
.teams-member-row{display:flex;align-items:center;gap:10px;padding:8px 18px;transition:background .1s;}
.teams-member-row:hover{background:var(--s3,rgba(255,255,255,.03));}
.teams-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.02em;}
.teams-member-info{flex:1;min-width:0;}
.teams-member-name{font-size:0.75rem;color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.teams-member-detail{font-size:0.75rem;color:var(--t4);margin-top:1px;}
.teams-role-badge{font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;}
.teams-role-badge.owner{background:rgba(245,166,35,.15);color:#f5a623;}
.teams-role-badge.admin{background:rgba(155,114,251,.15);color:#9b72fb;}
.teams-role-badge.member{background:rgba(78,124,246,.12);color:#6b8fd4;}
.teams-role-badge.viewer{background:rgba(139,144,158,.12);color:var(--t3);}
.teams-role-badge.guest{background:rgba(245,166,35,.1);color:#c4893a;}
.teams-project-row{display:flex;align-items:center;gap:8px;padding:7px 18px;cursor:pointer;transition:background .1s;border-radius:0;}
.teams-project-row:hover{background:var(--s3,rgba(255,255,255,.03));}
.teams-project-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.teams-project-name{font-size:0.75rem;color:var(--t2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.teams-project-meta{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.teams-project-meta span{font-size:0.75rem;opacity:.6;}
.teams-invite-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--s2);border:1px solid rgba(155,114,251,.25);border-left:3px solid #9b72fb;border-radius:10px;margin-bottom:10px;transition:border-color .15s;}
.teams-invite-card:hover{border-color:rgba(155,114,251,.45);}
.teams-invite-icon{width:40px;height:40px;border-radius:10px;background:rgba(155,114,251,.12);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.teams-invite-info{flex:1;min-width:0;}
.teams-invite-name{font-size:.76rem;font-weight:700;color:var(--t1);}
.teams-invite-sub{font-size:0.75rem;color:var(--t3);margin-top:2px;}
.teams-invite-actions{display:flex;gap:6px;flex-shrink:0;}
.teams-invite-actions button{border:none;border-radius:6px;cursor:pointer;font-size:0.75rem;padding:6px 14px;font-family:inherit;font-weight:600;transition:all .12s;}
.teams-invite-actions .btn-accept{background:var(--acc,#4e7cf6);color:#fff;}
.teams-invite-actions .btn-accept:hover{filter:brightness(1.15);}
.teams-invite-actions .btn-decline{background:var(--s4);color:var(--t3);border:1px solid var(--b1);}
.teams-invite-actions .btn-decline:hover{color:var(--t1);border-color:var(--b2);}
.teams-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;}
.teams-empty-icon{width:64px;height:64px;border-radius:16px;background: rgba(78,124,246,.12);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:16px;}
.teams-empty h3{font-family: 'Inter', sans-serif;font-size:.95rem;color:var(--t1);font-weight:700;margin:0 0 8px;}
.teams-empty p{font-size:0.75rem;color:var(--t3);max-width:320px;line-height:1.6;margin:0 0 20px;}
.teams-empty button{background:var(--acc,#4e7cf6);color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:0.75rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.teams-empty button:hover{filter:brightness(1.15);transform:translateY(-1px);}
.teams-member-actions{display:flex;gap:4px;flex-shrink:0;align-items:center;}
.teams-member-actions select{font-size:0.75rem;padding:2px 4px;border-radius:4px;background:var(--s4);border:1px solid var(--b1);color:var(--t2);font-family:inherit;cursor:pointer;}
.teams-member-actions button{background:none;border:none;cursor:pointer;font-size:0.75rem;padding:2px 4px;border-radius:4px;transition:background .1s;}
.teams-member-actions button:hover{background:var(--s4);}
.teams-member-actions .btn-remove{color:var(--red);}
.teams-member-actions .btn-leave{color:var(--red);font-size:0.75rem;font-weight:600;}

.key-date-list{display:flex;flex-direction:column;gap:5px;}
.kd-item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--s4);border-radius:4px;}
.kd-date{font-size:0.75rem;color:var(--acc2);min-width:70px;}
.kd-name{font-size:0.75rem;color:var(--t2);flex:1;}
.kd-type{font-size:0.75rem;padding:1px 5px;border-radius:3px;}

/* ══════════════════════════════
   TASK DETAIL PANEL (slide-in)
══════════════════════════════ */
#taskPanel{
  position:fixed;right:0;top:0;bottom:0;width:440px;max-width:90vw;
  background:var(--s2);border-left:1px solid var(--b2);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1), width .2s ease;
  z-index:90;
  box-shadow:none;
}
#taskPanel.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(0,0,0,.5);}
/* Backdrop to catch outside clicks when panel is open */
#taskPanelBackdrop{
  position:fixed;inset:0;z-index:89;
  display:none;
}
#taskPanel.open ~ #taskPanelBackdrop,
body.panel-open #taskPanelBackdrop{display:block;}
.tp-header{padding:10px 12px 8px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:6px;}
.tp-type-badge{font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;padding:1px 5px;border-radius:3px;font-weight:600;}
.tp-title{font-family: 'Inter', sans-serif;font-size:.82rem;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tp-close{color:var(--t3);cursor:pointer;font-size:.85rem;background:none;border:none;padding:3px;}
.tp-close:hover{color:var(--t1);}
.tp-body{flex:1;overflow-y:auto;padding:12px;}
.tp-body::-webkit-scrollbar{width:3px;}
.tp-body::-webkit-scrollbar-thumb{background:var(--b2);}
.tp-section{margin-bottom:12px;}
.tp-section-title{font-size:0.75rem;font-weight:600;color:var(--t4);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
.tp-field{display:flex;flex-direction:column;gap:3px;margin-bottom:7px;}
.tp-field label{font-size:0.75rem;font-weight:600;color:var(--t4);}
.tp-input{background:var(--s4);border:1px solid var(--b2);color:var(--t1);font-family:'Inter',sans-serif;font-size:0.75rem;padding:0 8px;border-radius:4px;outline:none;width:100%;height:28px;line-height:28px;box-sizing:border-box;transition:border-color .12s;vertical-align:middle;}
.tp-input:focus{border-color:var(--acc);}
.tp-input[type="date"],.tp-input[type="number"]{font-size:0.75rem;font-family:'Inter',sans-serif;height:28px;line-height:normal;padding:0 8px;color:var(--t1);}
select.tp-input{appearance:auto;-webkit-appearance:auto;padding:0 4px;cursor:pointer;}
.tp-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.tp-textarea{background:var(--s4);border:1px solid var(--b2);color:var(--t2);font-family:'Inter',sans-serif;font-size:0.75rem;padding:5px 7px;border-radius:4px;outline:none;width:100%;resize:none;line-height:1.6;transition:border-color .12s;}
.tp-textarea:focus{border-color:var(--acc);}
.tp-progress-wrap{background:var(--b1);border-radius:3px;height:4px;margin-top:4px;overflow:hidden;cursor:pointer;}
.tp-progress-fill{height:100%;border-radius:3px;transition:width .2s;}
.tp-footer{padding:12px 16px;border-top:1px solid var(--b1);display:flex;gap:8px;justify-content:flex-end;}
.dep-table{width:100%;border-collapse:collapse;}
.dep-table th{font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t4);padding:4px 6px;text-align:left;border-bottom:1px solid var(--b1);}
.dep-table td{font-size:0.75rem;padding:5px 6px;color:var(--t2);border-bottom:1px solid var(--b1);}
.dep-type-badge{font-size:0.75rem;padding:1px 4px;border-radius:2px;font-weight:700;}
.dep-rm{color:var(--red);cursor:pointer;background:none;border:none;font-size:0.75rem;padding:0 3px;}
.dep-add-row{display:flex;gap:5px;margin-top:6px;}
.dep-add-row select{flex:1;background:var(--s4);border:1px solid var(--b2);color:var(--t2);font-family:'Inter',sans-serif;font-size:0.75rem;padding:5px 7px;border-radius:4px;outline:none;}

/* ══════════════════════════════
   MODAL (project create/edit)
══════════════════════════════ */
.ov-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s;}
.ov-overlay.open{opacity:1;pointer-events:all;}
.modal-box{background:var(--s3);border:1px solid var(--b3);border-radius:10px;padding:24px;width:420px;max-width:95vw;max-height:90vh;overflow-y:auto;transform:translateY(10px);transition:transform .18s;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.ov-overlay.open .modal-box{transform:translateY(0);}
.modal-box h2{font-family: 'Inter', sans-serif;font-size:1rem;font-weight:600;margin-bottom:18px;}
.mfg{margin-bottom:12px;}
.mfg label{display:block;font-size:0.75rem;color:var(--t4);margin-bottom:4px;}
details.mfg label{display:flex;align-items:center;text-transform:none;letter-spacing:normal;font-size:0.75rem;color:var(--t2);margin-bottom:0;gap:8px;cursor:pointer;}
details.mfg input[type="checkbox"]{width:auto;flex-shrink:0;}
.mfg input:not([type="radio"]):not([type="checkbox"]),.mfg select,.mfg textarea{width:100%;background:var(--s4);border:1px solid var(--b2);color:var(--t1);font-family:'Inter',sans-serif;font-size:0.75rem;padding:7px 9px;border-radius:4px;outline:none;transition:border-color .12s;}
.mfg input:not([type="radio"]):not([type="checkbox"]):focus,.mfg select:focus,.mfg textarea:focus{border-color:var(--acc);}
.mfg-row{display:flex;gap:10px;}
.mfg-row .mfg{flex:1;}
.color-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.cp-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .12s;}
.cp-swatch.sel{border-color:#fff;transform:scale(1.15);}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;align-items:center;}

/* ── Custom dialog (replaces alert/confirm/prompt) ── */
#dlgOverlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s;}
#dlgOverlay.open{opacity:1;pointer-events:all;}
#dlgBox{background:var(--s3);border:1px solid var(--b3);border-radius:14px;padding:28px 28px 22px;width:400px;max-width:92vw;max-height:90vh;overflow-y:auto;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);transform:translateY(12px) scale(.97);transition:transform .16s;}
#dlgOverlay.open #dlgBox{transform:translateY(0) scale(1);}
#dlgIcon{font-size:1.8rem;margin-bottom:10px;}
#dlgTitle{font-family: 'Inter', sans-serif;font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:6px;}
#dlgMsg{font-size:.76rem;color:var(--t2);line-height:1.65;}
#dlgInput{display:block;width:100%;margin-top:14px;background:var(--s5);border:1px solid var(--b2);color:var(--t1);font-family:'Inter',sans-serif;font-size:.78rem;padding:9px 11px;border-radius:7px;outline:none;transition:border-color .12s;box-sizing:border-box;}
#dlgInput:focus{border-color:var(--acc);}
#dlgFoot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}
.dlg-btn{padding:8px 20px;border-radius:7px;font-size:0.75rem;font-weight:600;cursor:pointer;border:none;font-family:'Inter',sans-serif;transition:all .12s;}
.dlg-btn.secondary{background:var(--s5);color:var(--t2);border:1px solid var(--b2);}.dlg-btn.secondary:hover{background:var(--b2);color:var(--t1);}
.dlg-btn.primary{background:var(--acc);color:#fff;}.dlg-btn.primary:hover{filter:brightness(1.1);}
.dlg-btn.danger{background:rgba(240,79,94,.12);color:var(--red);border:1px solid rgba(240,79,94,.35);}.dlg-btn.danger:hover{background:rgba(240,79,94,.25);}
/* dep type picker grid */
.dlg-dep-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.dlg-dep-opt{background:var(--s5);border:1px solid var(--b2);border-radius:8px;padding:11px 13px;cursor:pointer;text-align:left;font-family:'Inter',sans-serif;transition:background .12s,border-color .12s;}
.dlg-dep-opt:hover{border-color:var(--acc);background:var(--acc-g);}
.dlg-dep-opt strong{display:block;font-size:.78rem;margin-bottom:2px;}
.dlg-dep-opt span{font-size:0.75rem;color:var(--t3);line-height:1.4;display:block;}

/* ── Toast notifications ── */
#toast-rack{position:fixed;bottom:20px;right:20px;z-index:10001;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-height:80vh;overflow:hidden;}
.toast{pointer-events:all;display:flex;align-items:flex-start;gap:10px;background:var(--s3);border:1px solid var(--b2);border-radius:10px;padding:12px 16px;min-width:260px;max-width:380px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);font-family:'Inter',sans-serif;transform:translateX(120%);opacity:0;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;}
.toast.show{transform:translateX(0);opacity:1;}
.toast.hide{transform:translateX(120%);opacity:0;}
.toast-icon{font-size:1.15rem;flex-shrink:0;line-height:1;}
.toast-body{flex:1;min-width:0;}
.toast-title{font-size:0.75rem;font-weight:700;color:var(--t1);margin-bottom:2px;}
.toast-msg{font-size:0.75rem;color:var(--t2);line-height:1.5;}
.toast-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.85rem;padding:0 0 0 6px;line-height:1;flex-shrink:0;transition:color .12s;}
.toast-close:hover{color:var(--t1);}
.toast.toast-success{border-left:3px solid var(--green);}
.toast.toast-error{border-left:3px solid var(--red);}
.toast.toast-warning{border-left:3px solid var(--amber);}
.toast.toast-info{border-left:3px solid var(--acc);}

/* ══════════════════════════════
   TOOLTIP
══════════════════════════════ */
#ttip{position:fixed;background:var(--s4);border:1px solid var(--b3);border-radius:6px;padding:8px 12px;font-size:0.75rem;pointer-events:none;z-index:400;opacity:0;transition:opacity .1s;max-width:220px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
#ttip.show{opacity:1;}
.tt-t{font-weight:600;color:var(--t1);margin-bottom:4px;font-size:0.75rem;}
.tt-r{color:var(--t3);line-height:1.9;}
.tt-r span{color:var(--t2);}

/* ══════════════════════════════
   UTILS
══════════════════════════════ */
.flex-center{display:flex;align-items:center;justify-content:center;}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t4);font-size:.75rem;}
.empty-icon{font-size:2.5rem;opacity:.2;}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--b2);border-radius:2px;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--acc);cursor:pointer;}

/* ── SETTINGS ── */
.theme-card{border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;}
.theme-card:hover{transform:translateY(-2px);}
.theme-card.sel{border-color:#fff;}
.theme-card .tc-preview{height:44px;display:flex;}
.theme-card .tc-nav{width:30%;height:100%;}
.theme-card .tc-main{flex:1;height:100%;}
.theme-card .tc-label{font-size:0.75rem;text-align:center;padding:4px;font-weight:600;}
.theme-card .tc-check{position:absolute;top:4px;right:4px;width:14px;height:14px;background:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:0.75rem;color:#000;}
.theme-card.sel .tc-check{display:flex;}
.bg-card{border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .12s;aspect-ratio:16/9;position:relative;background:#111;}
.bg-card:hover{border-color:var(--b3);}
.bg-card.sel{border-color:#fff;}
.bg-card .bc-inner{width:100%;height:60px;background-size:cover;background-position:center;}
.bg-card .bc-label{font-size:0.75rem;text-align:center;padding:3px;color:var(--t3);}
.bg-card .bc-check{position:absolute;top:3px;right:3px;width:12px;height:12px;background:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:0.75rem;color:#000;}
.bg-card.sel .bc-check{display:flex;}
.day-btn{padding:6px 10px;border-radius:5px;font-size:0.75rem;font-weight:600;cursor:pointer;border:1px solid var(--b2);background:var(--s4);color:var(--t3);transition:all .12s;min-width:42px;text-align:center;font-family:'Inter',sans-serif;}
.day-btn.active{background:var(--acc-g);color:var(--acc2);border-color:var(--acc);}
.day-btn:hover{color:var(--t2);}


/* ── BOARD ── */
#view-board{background:var(--bg);}
.board-wrap{display:flex;flex:1;overflow-x:auto;overflow-y:hidden;padding:16px;gap:12px;align-items:flex-start;}
.board-wrap::-webkit-scrollbar{height:6px;transition:height .15s;}
.board-wrap::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px;}
.board-wrap:hover::-webkit-scrollbar{height:10px;}
.board-wrap:hover::-webkit-scrollbar-thumb{background:var(--b3);}

.board-col{
  width:260px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--bg2);border-radius:14px;
  border:1px solid var(--b2);
  max-height:calc(100vh - 140px);
  position:relative;
}
.board-col-hdr{
  padding:14px 14px 10px;display:flex;align-items:center;
  gap:10px;flex-shrink:0;border-bottom:none;
}
.board-col-title{
  font-size:.9rem;font-weight:700;flex:1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:0.02em;
}
.board-col-count{
  font-size:0.75rem;min-width:24px;height:24px;border-radius:12px;
  background:var(--bg3);color:var(--t3);display:flex;
  align-items:center;justify-content:center;padding:0 8px;font-weight:600;
}
.board-col-add-top{
  width:calc(100% - 28px);margin:0 14px 14px;display:flex;align-items:center;gap:8px;padding:8px 10px;
  font-size:0.75rem;color:var(--t3);cursor:pointer;border-radius:8px;
  background:var(--bg);border:1px solid var(--b1);text-align:left;font-family:'Inter',sans-serif;
  transition:all .15s;flex-shrink:0;
}
.board-col-add-top:hover{background:var(--bg3);color:var(--t1);}
.board-col-add-top span{
  font-size:.95rem;color:var(--t3);flex-shrink:0;
}
.board-cards{
  flex:1;overflow-y:auto;padding:0 14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.board-cards::-webkit-scrollbar{width:3px;}
.board-cards::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}

/* THE CARD — white-ish surface like the screenshot */
.board-card{
  background:var(--bg);
  border:1px solid var(--b2);
  border-radius:12px;
  padding:0;
  cursor:pointer;
  transition:transform .15s, background .15s, outline .15s;
  overflow:hidden;
  position:relative;
  user-select:none;
  flex-shrink:0; 
}
.board-card:hover{
  transform:translateY(-2px);
  background:var(--bg2);
}
.board-card.on-cp{outline:2px solid var(--red);outline-offset:-1px;}
.board-card.dragging{opacity:.5;transform:rotate(1.5deg);}

/* top accent strip */

.bc-del-btn{
  position:absolute;top:10px;right:10px;
  width:24px;height:24px;border-radius:6px;
  background:transparent;color:transparent;
  border:none;cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;z-index:2;
}
.board-card:hover .bc-del-btn{
  background:rgba(255,255,255,0.05);color:var(--t3);
}
.bc-del-btn:hover{background:rgba(240,79,94,.15) !important;color:var(--red) !important;}
.bc-strip{height:0;width:0;flex-shrink:0;display:none;}

.bc-body{padding:14px;}

/* category pill row */
.bc-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.bc-pill{
  font-size:0.75rem;font-weight:700;letter-spacing:.03em;
  padding:4px 8px;border-radius:20px;
  white-space:nowrap;
}
.bc-cp-pill{
  font-size:0.75rem;font-weight:700;padding:4px 8px;border-radius:20px;
  background:rgba(240,79,94,.15);color:var(--red);
}

/* task name */
.bc-name{
  font-size:.85rem;font-weight:600;color:var(--t1);
  line-height:1.4;margin-bottom:12px;
}

/* duration row */
.bc-dur{
  font-size:0.75rem;color:var(--t3);margin-bottom:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.bc-dur-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,0.04);border-radius:6px;padding:3px 8px;
  font-size:0.75rem;color:var(--t3);
}
.bc-overdue-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(240,79,94,0.1);border-radius:6px;padding:3px 8px;
  font-size:0.75rem;color:var(--red);
}
.bc-warn-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(245,166,35,0.1);border-radius:6px;padding:3px 8px;
  font-size:0.75rem;color:var(--amber);
}

/* divider */
.bc-divider{display:none;}

/* footer row: checkbox + date + avatars */
.bc-footer{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;
}
.bc-checkbox{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--surface-container-highest, #333);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .12s;color:var(--t4);font-size:0.75rem;
}
.bc-checkbox.done{background:var(--green);border-color:var(--green);color:#fff;}
.bc-checkbox:hover{border-color:var(--t3);background:rgba(255,255,255,0.05);}
.bc-date{
  display:flex;align-items:center;gap:6px;
  font-size:0.75rem;color:var(--t3);flex:1;
}
.bc-date-icon{font-size:0.75rem;color:var(--t4);}
.bc-avatars{display:flex;align-items:center;}
.bc-avatar{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;color:#fff;
  border:2px solid var(--s4);
  margin-left:-6px;flex-shrink:0;
  text-transform:uppercase;
}
.bc-avatar:first-child{margin-left:0;}
.bc-avatar-more{
  width:22px;height:22px;border-radius:50%;
  background:var(--b2);color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:700;
  border:2px solid var(--s4);
  margin-left:-6px;
}

/* progress bar at very bottom of card */
.bc-progress{height:3px;background:var(--b1);overflow:hidden;}
.bc-progress-fill{height:100%;transition:width .3s;}

/* collapsed section indicator */
.bc-collapsed-row{
  display:flex;align-items:center;gap:6px;padding:6px 11px;
  border-top:1px solid var(--b1);font-size:0.75rem;color:var(--t4);cursor:pointer;
}
.bc-collapsed-row:hover{color:var(--t2);background:var(--s5);}

/* Completed section toggle inside column */
.board-completed-toggle{
  display:flex;align-items:center;gap:6px;padding:8px 12px;
  font-size:0.75rem;color:var(--t3);cursor:pointer;
  border-top:1px solid var(--b1);user-select:none;flex-shrink:0;
}
.board-completed-toggle:hover{color:var(--t2);}
.board-completed-cards{padding:8px;display:flex;flex-direction:column;gap:8px;}

/* ── CALENDAR ── */
.cal-dw{text-align:center;padding:8px;font-size:0.75rem;font-weight:600;color:var(--t3);text-transform:uppercase;}
.cal-cell{background:var(--s3);padding:4px;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:90px;}
.cal-cell.diff-month{background:var(--s2);opacity:.5;}
.cal-cell.today .cal-date{background:var(--acc);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
.cal-date{font-size:0.75rem;color:var(--t2);margin-bottom:4px;align-self:flex-end;font-weight:600;}
.cal-task{font-size:0.75rem;padding:3px 5px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:rgba(255,255,255,.95);transition:transform .1s;}
.cal-task:hover{transform:scale(1.02);filter:brightness(1.1);}
.cal-scroll-area::-webkit-scrollbar{display:none;}
.cal-scroll-area{-ms-overflow-style:none;scrollbar-width:none;}

/* ── REPORTS ── */
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px;}
.rpt-card{background:var(--s3);border:1px solid var(--b1);border-radius:8px;padding:16px;}
.rpt-card.full{grid-column:1/-1;}
.rpt-card-title{font-size:0.75rem;letter-spacing:.03em;color:var(--t4);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.rpt-metric{display:flex;flex-direction:column;gap:2px;}
.rpt-metric-num{font-family: 'Inter', sans-serif;font-size:2.2rem;font-weight:600;line-height:1;}
.rpt-metric-lbl{font-size:0.75rem;color:var(--t3);letter-spacing:.03em;}
.rpt-metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mini-bar-wrap{display:flex;flex-direction:column;gap:4px;}
.mini-bar-row{display:flex;align-items:center;gap:8px;font-size:0.75rem;cursor:pointer;padding:4px 6px;border-radius:5px;margin:0 -6px;transition:background .12s;}
.mini-bar-row:hover{background:var(--s4);}
.mini-bar-row.expanded{background:var(--s4);}
.mini-bar-task-list{display:none;flex-direction:column;gap:2px;padding:2px 0 6px 12px;font-size:0.75rem;}
.mini-bar-task-list.open{display:flex;}
.mini-bar-task-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:4px;cursor:pointer;color:var(--t2);transition:background .1s;}
.mini-bar-task-item:hover{background:var(--s5);}
.mini-bar-task-item .task-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.mini-bar-task-item .task-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-bar-task-item .task-pct{font-size:0.75rem;color:var(--t4);flex-shrink:0;}
.mini-bar-lbl{width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2);}
.mini-bar-track{flex:1;height:7px;background:var(--b2);border-radius:3px;overflow:hidden;}
.mini-bar-fill{height:100%;border-radius:3px;transition:width .3s;}
.mini-bar-pct{width:30px;text-align:right;font-size:0.75rem;color:var(--t3);}
.rpt-burn{display:flex;gap:0;border:1px solid var(--b1);border-radius:4px;overflow:hidden;}
.rpt-burn-day{flex:1;height:60px;display:flex;align-items:flex-end;border-right:1px solid rgba(26,31,46,.5);}
.rpt-burn-bar{width:100%;background:var(--acc);opacity:.7;transition:height .3s;}
.rpt-table{width:100%;border-collapse:collapse;font-size:0.75rem;}
.rpt-table th{font-size:0.75rem;letter-spacing:.03em;color:var(--t4);padding:5px 8px;text-align:left;border-bottom:1px solid var(--b1);}
.rpt-table td{padding:6px 8px;border-bottom:1px solid rgba(26,31,46,.5);color:var(--t2);}
.rpt-table tr:last-child td{border-bottom:none;}
.rpt-status-badge{font-size:0.75rem;padding:1px 5px;border-radius:3px;font-weight:700;}
.cp-legend{display:flex;align-items:center;gap:6px;font-size:0.75rem;padding:4px 8px;background:rgba(240,79,94,.08);border:1px solid rgba(240,79,94,.2);border-radius:4px;color:var(--red);}

/* ── COSTS TAB ── */
.cost-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px;}
.cost-card{background:var(--s3);border:1px solid var(--b1);border-radius:8px;padding:16px;}
.cost-card.full{grid-column:1/-1;}
.cost-card-title{font-size:0.75rem;letter-spacing:.03em;color:var(--t4);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.cost-gauge{position:relative;height:18px;background:var(--b2);border-radius:9px;overflow:hidden;}
.cost-gauge-fill{height:100%;border-radius:9px;transition:width .5s;}
.cost-table{width:100%;border-collapse:collapse;font-size:0.75rem;}
.cost-table th{font-size:0.75rem;letter-spacing:.03em;color:var(--t4);padding:6px 8px;text-align:left;border-bottom:1px solid var(--b1);}
.cost-table td{padding:7px 8px;border-bottom:1px solid var(--b1);color:var(--t2);}
.cost-table tr:last-child td{border-bottom:none;}
.cost-table tr:hover td{background:var(--s4);}
.cost-summary-row{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.cost-summary-card{background:var(--s3);border:1px solid var(--b1);border-radius:8px;padding:16px;flex:1;min-width:140px;}
.cost-summary-title{font-size:0.75rem;color:var(--t4);letter-spacing:.03em;margin-bottom:6px;}
.cost-summary-val{font-size:1.6rem;font-weight:700;color:var(--t1);font-family: 'Inter', sans-serif;}
.cost-variance{font-size:0.75rem;padding:2px 6px;border-radius:3px;font-weight:600;}
.cost-variance.under{background:rgba(52,209,122,.1);color:var(--green);}
.cost-variance.over{background:rgba(240,79,94,.1);color:var(--red);}
.cost-variance.on{background:rgba(245,166,35,.1);color:var(--amber);}

/* ── CRITICAL PATH glow on active ── */
#btnCritPath.cp-active, #btnCritPathBoard.cp-active{background:rgba(240,79,94,.15);color:var(--red);border-color:var(--red);}

/* ── TIMESHEETS ── */
.ts-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ts-week-nav { display:flex; align-items:center; gap:8px; background:var(--s3); border:1px solid var(--b1); border-radius:6px; padding:4px; }
.ts-summary-cards { display:flex; gap:12px; margin-bottom:20px; }
.ts-card { background:var(--s3); border:1px solid var(--b1); border-radius:8px; padding:16px; flex:1; }
.ts-card-title { font-size:0.75rem; color:var(--t4); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.ts-card-val { font-size:1.6rem; font-weight:700; color:var(--t1); font-family: 'Inter', sans-serif; }
.ts-table { width:100%; border-collapse:collapse; font-size:0.75rem; }
.ts-table th { text-align:left; padding:8px 12px; color:var(--t4); font-size:0.75rem; text-transform:uppercase; border-bottom:1px solid var(--b2); }
.ts-table td { padding:8px 12px; border-bottom:1px solid var(--b1); border-right:1px solid var(--b2); vertical-align:middle; }
.ts-table td:last-child { border-right:none; }
.ts-table th { border-right:1px solid var(--b2); }
.ts-table th:last-child { border-right:none; }
.ts-input { background:var(--s5); border:1px solid var(--b2); color:var(--t1); font-family:'Inter',sans-serif; font-size:0.75rem; padding:6px 8px; border-radius:4px; outline:none; width:100%; box-sizing:border-box; transition:border-color .15s; -moz-appearance:textfield;appearance:textfield; }
.ts-input::-webkit-inner-spin-button,.ts-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.ts-input:focus { border-color:var(--acc); }
.ts-chk { accent-color:var(--acc); width:14px; height:14px; cursor:pointer; }

/* ── CAPACITY ── */
.cap-table{width:100%;border-collapse:collapse;font-size:0.75rem;}
.cap-table th{padding:6px 8px;text-align:left;font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t4);border-bottom:1px solid var(--b1);white-space:nowrap;}
.cap-table td{padding:0;border-bottom:1px solid var(--b1);}
.cap-member-cell{padding:8px 10px;display:flex;align-items:center;gap:8px;background:var(--s3);min-width:200px;}
.cap-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:#fff;flex-shrink:0;}
.cap-name{font-size:0.75rem;color:var(--t2);font-weight:600;}
.cap-role{font-size:0.75rem;color:var(--t3);}
.cap-daily{width:32px;height:42px;border-right:1px solid rgba(26,31,46,.4);cursor:pointer;transition:filter .1s;position:relative;flex-shrink:0;}
.cap-daily:hover{filter:brightness(1.3);}
.cap-daily .cap-pct{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:0.75rem;color:rgba(255,255,255,.75);pointer-events:none;}
.cap-add-row{padding:8px 10px;border-top:1px dashed var(--b2);}
body.theme-midnight { --bg:#0b0d14; --s1:#0f1219; --s2:#161a23; --s3:#1c212c; --s4:#222835; --s5:#282f3e; --b1:#2a2f3e; --b2:#3a4156; --b3:#4a546e; --b4:#5a6686; --t1:#e8eaed; --t2:#c4c7cf; --t3:#8b909e; --t4:#5f636f; --acc:#4e7cf6; --acc2:#6b94ff; --acc-g:rgba(78,124,246,.18); }
body.theme-obsidian { --bg:#000000; --s1:#111111; --s2:#1a1a1a; --s3:#222222; --s4:#2a2a2a; --s5:#333333; --b1:#333333; --b2:#444444; --b3:#666666; --b4:#888888; --t1:#ffffff; --t2:#dddddd; --t3:#aaaaaa; --t4:#777777; --acc:#e0e0e0; --acc2:#ffffff; --acc-g:rgba(224,224,224,.18); }
body.theme-forest   { --bg:#080c08; --s1:#0c130c; --s2:#121a12; --s3:#182418; --s4:#1f2e1f; --s5:#263826; --b1:#263826; --b2:#334d33; --b3:#4d734d; --b4:#669966; --t1:#eaf2ea; --t2:#c2d1c2; --t3:#8fa88f; --t4:#6b856b; --acc:#4ecb71; --acc2:#73d98e; --acc-g:rgba(78,203,113,.18); }
body.theme-aurora   { --bg:#050810; --s1:#080c18; --s2:#0d1326; --s3:#121b33; --s4:#172240; --s5:#1c2a4d; --b1:#1c2a4d; --b2:#2b3e6b; --b3:#405c99; --b4:#557acc; --t1:#e6f2ff; --t2:#bacce6; --t3:#8fa8cc; --t4:#6685b3; --acc:#38e8c8; --acc2:#6bf0d8; --acc-g:rgba(56,232,200,.18); }
body.theme-rose     { --bg:#11080a; --s1:#160c0e; --s2:#201215; --s3:#2b181c; --s4:#351e23; --s5:#40242a; --b1:#40242a; --b2:#59333b; --b3:#804a55; --b4:#a6606e; --t1:#fae8eb; --t2:#e6b8c1; --t3:#cc8594; --t4:#b35c6e; --acc:#f472b6; --acc2:#f89bce; --acc-g:rgba(244,114,182,.18); }
body.theme-slate    { --bg:#0d0f14; --s1:#12151c; --s2:#1a1f29; --s3:#222836; --s4:#2a3242; --s5:#333b4f; --b1:#333b4f; --b2:#47536e; --b3:#647499; --b4:#8295c2; --t1:#f0f3f8; --t2:#c3cce0; --t3:#94a3c7; --t4:#6a7ea8; --acc:#64b4f8; --acc2:#90cbfb; --acc-g:rgba(100,180,248,.18); }
body.theme-light    { --bg:#f7f9fb; --s1:#ffffff; --s2:#f2f4f6; --s3:#eceef0; --s4:#e6e8ea; --s5:#e0e3e5; --b1:#e0e3e5; --b2:#d8dadc; --b3:#747686; --b4:#444655; --t1:#191c1e; --t2:#444655; --t3:#747686; --t4:#c4c5d7; --acc:#3b6ef0; --acc2:#6b90f4; --acc-g:rgba(59,110,240,.18); }
.gr-cell.non-working{background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(128,128,128,.18) 3px,rgba(128,128,128,.18) 4px) !important;}
.day-cell.non-working .dd,.day-cell.non-working .dn{color:var(--b2) !important;}

/* ── BOARD INLINE ADD ── */
.bc-inline-add{
  background:var(--s3);border:2px dashed var(--b2);border-radius:8px;
  padding:10px 11px;display:flex;flex-direction:column;gap:7px;
  
}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.bc-inline-add input{
  background:var(--s5);border:1px solid var(--b3);border-radius:5px;
  color:var(--t1);font-family:'Inter',sans-serif;font-size:.75rem;
  padding:7px 9px;outline:none;width:100%;
}
.bc-inline-add input:focus{border-color:var(--acc);}
.bc-inline-add-row{display:flex;gap:5px;}
.bc-inline-add select{
  flex:1;background:var(--s5);border:1px solid var(--b2);border-radius:5px;
  color:var(--t2);font-family:'Inter',sans-serif;font-size:0.75rem;
  padding:5px 7px;outline:none;
}
.bc-inline-add-btns{display:flex;gap:5px;justify-content:flex-end;}
.bc-add-confirm{
  background:var(--acc);color:#fff;border:none;border-radius:5px;
  font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:600;
  padding:5px 12px;cursor:pointer;transition:background .1s;
}
.bc-add-confirm:hover{background:var(--acc2);}
.bc-add-cancel{
  background:transparent;color:var(--t3);border:1px solid var(--b2);
  border-radius:5px;font-family:'Inter',sans-serif;font-size:0.75rem;
  padding:5px 10px;cursor:pointer;
}
.bc-add-cancel:hover{color:var(--t2);border-color:var(--b3);}

/* ── BOARD ADD BUTTON (styled like screenshot) ── */
.board-col-add-top{
  width:calc(100% - 28px);margin:0 14px 8px;display:flex;align-items:center;gap:7px;padding:9px 12px;
  font-size:0.75rem;color:var(--t3);cursor:pointer;
  background:none;border:none;text-align:left;font-family:'Inter',sans-serif;
  transition:all .12s;flex-shrink:0;border-bottom:1px solid var(--b1);
  letter-spacing:.01em;
}
.board-col-add-top:hover{color:var(--t1);background:var(--s4);}
.board-col-add-top .add-icon{
  width:22px;height:22px;border-radius:5px;background:var(--b2);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--t2);flex-shrink:0;font-weight:300;
  transition:background .12s;line-height:1;
}
.board-col-add-top:hover .add-icon{background:var(--acc);color:#fff;}

/* ── BOARD EMPTY STATE ── */
.board-empty-col{
  border:2px dashed var(--b2) !important;background:transparent !important;
  opacity:.6;
}
.board-empty-col .board-col-hdr{border-bottom-color:transparent;}
.board-col-empty-hint{
  padding:20px 14px;text-align:center;font-size:0.75rem;color:var(--t4);
  line-height:1.6;
}
.board-col-empty-hint .hint-icon{font-size:1.4rem;margin-bottom:8px;display:block;opacity:.4;}

/* ── BOARD TOOLBAR hints ── */
.board-toolbar-hint{
  font-size:0.75rem;color:var(--t4);padding:0 8px;
  display:flex;align-items:center;gap:4px;
}

/* ── NEW COLUMN BUTTON ── */
.board-new-col-btn{
  width:220px;flex-shrink:0;height:52px;
  border:2px dashed var(--b2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:0.75rem;color:var(--t4);cursor:pointer;
  transition:all .15s;background:transparent;font-family:'Inter',sans-serif;
  align-self:flex-start;margin-top:0;
}
.board-new-col-btn:hover{border-color:var(--acc);color:var(--acc2);background:var(--acc-g);}

/* ── CONTEXT MENU ── */
#ctxMenu{
  position:fixed;z-index:9999;
  background:var(--s3);border:1px solid var(--b2);
  border-radius:8px;padding:4px;min-width:160px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  display:none;
  font-size:0.75rem;
}
#ctxMenu.open{display:block;}
.ctx-item{
  display:flex;align-items:center;gap:8px;padding:7px 12px;
  border-radius:5px;cursor:pointer;color:var(--t2);
  transition:background .1s;white-space:nowrap;
}
.ctx-item:hover{background:var(--s5);color:var(--t1);}
.ctx-item.danger{color:var(--red);}
.ctx-item.danger:hover{background:rgba(240,79,94,.12);}
.ctx-sep{height:1px;background:var(--b1);margin:3px 0;}

/* ── BOARD COLUMN DRAG ── */
.board-col-drag-handle{
  cursor:grab;color:var(--t4);font-size:.8rem;padding:2px 4px;
  opacity:0;transition:opacity .1s;user-select:none;flex-shrink:0;
  display:flex;align-items:center;
}
.board-col-hdr:hover .board-col-drag-handle{opacity:1;}
.board-col-drag-handle:active{cursor:grabbing;}
.board-col.col-dragging{opacity:.35;}
.board-col-drop-indicator{
  width:3px;min-height:80px;align-self:stretch;
  background:var(--acc);border-radius:2px;flex-shrink:0;
  box-shadow:0 0 10px var(--acc);
  pointer-events:none;
}
.board-col-colour-btn{
  width:12px;height:12px;border-radius:2px;flex-shrink:0;
  cursor:pointer;border:1.5px solid rgba(255,255,255,.2);
  transition:transform .1s,border-color .1s;
  opacity:0;
}
.board-col-hdr:hover .board-col-colour-btn{opacity:1;}
.board-col-colour-btn:hover{transform:scale(1.2);border-color:rgba(255,255,255,.5);}
.gs-drag-handle{
  width:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  cursor:grab;color:var(--t4);font-size:.75rem;opacity:0;transition:opacity .1s;
  user-select:none;padding-right:2px;
}
.g-task-row:hover .gs-drag-handle{opacity:1;}
.gs-drag-handle:active{cursor:grabbing;}
.gs-row-dragging{opacity:.35;background:var(--acc-g) !important;}
.gs-drop-indicator{
  height:2px;background:var(--acc);border-radius:1px;
  margin:0 8px;pointer-events:none;
  box-shadow:0 0 8px var(--acc);
  flex-shrink:0;
}
/* Label chips */
.tv-label-chip { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px;
  font-size:0.7rem; font-weight:700; white-space:nowrap; cursor:pointer; }
.tv-labels-cell { display:flex; flex-wrap:wrap; gap:3px; align-items:center;
  cursor:pointer; min-height:28px; width:100%; }

/* Label / option picker panel */
.tv-opt-picker { padding:8px 0; min-width:220px; }
.tv-opt-picker-search { width:100%; box-sizing:border-box; padding:7px 10px;
  background:var(--s3); border:1px solid var(--b2); border-radius:6px;
  color:var(--t1); font-family:inherit; font-size:0.75rem; outline:none; }
.tv-opt-picker-search:focus { border-color:var(--acc); }
.tv-opt-row { display:flex; align-items:center; gap:9px; padding:7px 12px;
  cursor:pointer; font-size:0.75rem; color:var(--t2); border-radius:4px; transition:background .1s; }
.tv-opt-row:hover { background:var(--s4); }
.tv-opt-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }

/* Color palette in edit panel */
.tv-color-swatch { width:18px; height:18px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; flex-shrink:0; transition:transform .1s; }
.tv-color-swatch:hover, .tv-color-swatch.selected { transform:scale(1.25); border-color:#fff; }
/* Formula cells */
.tv-formula-cell { padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.78rem; color:var(--t1); }
.tv-formula-cell.is-num { text-align:right; }
.tv-formula-cell.is-err { color:var(--red); font-style:italic; }
.tv-formula-editor { padding:16px; min-width:480px; max-width:600px; }
.tv-formula-textarea { width:100%; box-sizing:border-box; min-height:72px; background:var(--s3); border:1px solid var(--b2); border-radius:6px; color:var(--t1); font-family:monospace; font-size:0.8rem; padding:10px 12px; outline:none; resize:vertical; }
.tv-formula-textarea:focus { border-color:var(--acc); }
.tv-formula-field-pill { display:inline-flex; align-items:center; padding:3px 9px; background:var(--acc-g); color:var(--acc); border:1px solid rgba(78,124,246,.3); border-radius:12px; font-size:0.72rem; cursor:pointer; white-space:nowrap; transition:background .1s; }
.tv-formula-field-pill:hover { background:rgba(78,124,246,.2); }
.tv-formula-preview { margin-top:8px; padding:8px 12px; background:var(--s3); border:1px solid var(--b2); border-radius:6px; font-size:0.78rem; color:var(--t3); font-style:italic; }
/* Recurrence UI */
.tp-recur-days { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
.tp-recur-day { width:30px; height:30px; border-radius:50%; border:1px solid var(--b2); background:var(--s3); color:var(--t3); font-size:0.7rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; user-select:none; }
.tp-recur-day.active { background:var(--acc); border-color:var(--acc); color:#fff; }
.recur-badge { font-size:0.7rem; color:var(--t4); margin-left:4px; vertical-align:middle; user-select:none; }
/* My Work filter tabs */
.mw-tab { background:transparent; border:none; padding:5px 14px; border-radius:6px; font-size:0.75rem; font-weight:600; color:var(--t3); cursor:pointer; transition:all .15s; }
.mw-tab:hover { color:var(--t1); background:var(--s4); }
.mw-tab.active { background:var(--acc); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
/* Custom date range inputs */
#mwCustomStart, #mwCustomEnd { color-scheme:dark; }
#mwCustomStart::-webkit-calendar-picker-indicator, #mwCustomEnd::-webkit-calendar-picker-indicator { filter:invert(.7); cursor:pointer; }
/* Project filter pills */
.mw-proj-pill { background:var(--s3); border:1px solid var(--b2); padding:4px 10px; border-radius:14px; font-size:0.72rem; font-weight:600; color:var(--t3); cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; }
.mw-proj-pill:hover { border-color:var(--b3); color:var(--t1); }
.mw-proj-pill.active { color:var(--t1); border-color:var(--b3); background:var(--s4); }
/* My Work responsive */
@media (max-width: 900px) {
  .mw-layout { padding:24px 20px !important; flex-wrap:wrap; }
  .mw-sidebar { width:100% !important; border-left:none !important; padding-left:0 !important; padding-top:8px !important; border-top:1px solid var(--b1); }
  .mw-tab { padding:5px 10px; font-size:0.7rem; }
}
@media (max-width: 600px) {
  .mw-layout { padding:16px 12px !important; }
  .mw-tab { padding:4px 8px; font-size:0.68rem; }
}
/* My Work personal-task checkboxes */
.mw-todo-cb { appearance:none; -webkit-appearance:none; width:16px; height:16px; border:1.5px solid var(--b3); border-radius:4px; background:transparent; cursor:pointer; flex-shrink:0; position:relative; transition:border-color .15s, background .15s; margin:0; }
.mw-todo-cb:hover { border-color:var(--acc); }
.mw-todo-cb:checked { background:var(--acc); border-color:var(--acc); }
.mw-todo-cb:checked::after { content:''; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.mw-todo-cb-sm { width:13px; height:13px; border-radius:3px; }
.mw-todo-cb-sm:checked::after { left:3px; top:1px; width:3px; height:6px; border-width:0 1.5px 1.5px 0; }
/* My Work to-do row — rounded hover */
.mw-todo-row { border-radius:8px; padding:8px 12px !important; border-bottom:none !important; }

/* ── BOARD CARD POINTER DRAG ── */
.board-card.dragging{opacity:.35 !important;transform:none !important;}
.bc-drag-placeholder{
  flex-shrink:0;
  border-radius:8px;
  border:2px dashed var(--acc) !important;
  background:var(--acc-g);
}

.list-table{width:100%;border-collapse:collapse;font-size:0.75rem;}
.list-table th{position:sticky;top:0;background:var(--s3);padding:8px 12px;text-align:center;font-size:0.75rem;letter-spacing:.03em;color:var(--t4);border-bottom:2px solid var(--b2);white-space:nowrap;cursor:pointer;user-select:none;}
.list-table th:hover{color:var(--t2);}
.list-table th:nth-child(-n+3){text-align:left;}
.list-table td{padding:7px 12px;border-bottom:1px solid var(--b1);color:var(--t2);vertical-align:middle;text-align:center;}
.list-table td:nth-child(-n+3){text-align:left;}
.list-table tr:hover td{background:var(--s4);}
.list-table tr.group-hdr td{background:var(--s3);font-weight:700;color:var(--t1);font-size:0.75rem;}
.list-pct-bar{height:4px;background:var(--b2);border-radius:2px;min-width:60px;overflow:hidden;}
.list-pct-fill{height:100%;border-radius:2px;}
.list-priority{font-size:0.75rem;padding:2px 6px;border-radius:3px;font-weight:700;text-transform:uppercase;}
.list-done-cb{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--b3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--t4);background:transparent;transition:all .12s;vertical-align:middle;}
.list-done-cb:hover{border-color:var(--green);color:var(--green);}
.list-done-cb.done{background:var(--green);border-color:var(--green);color:#fff;}

/* ── Bulk selection ── */
.bulk-cb-wrap { display:flex; align-items:center; justify-content:center; width:28px; }
.bulk-cb { width:14px; height:14px; accent-color:var(--acc); cursor:pointer; flex-shrink:0; }
.list-table tr.bulk-selected td { background:var(--acc-g) !important; }
.tv-row.bulk-selected { background:var(--acc-g) !important; }
.tv-bulk-cb-cell { display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ── Bulk toolbar ── */
#bulkToolbar { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:8000;
  display:flex; align-items:center; gap:8px; background:var(--s2); border:1px solid var(--b2);
  border-radius:12px; padding:10px 16px; box-shadow:0 8px 30px rgba(0,0,0,.3);
  font-size:0.75rem; white-space:nowrap; }
#bulkToolbar .bulk-count { color:var(--t3); margin-right:4px; }
#bulkToolbar .bulk-count strong { color:var(--acc); }
#bulkToolbar .bulk-sep { width:1px; height:18px; background:var(--b2); margin:0 4px; }
#bulkToolbar .bulk-action { font-size:0.75rem; padding:5px 12px; border-radius:8px; }
#bulkToolbar .bulk-dismiss { background:transparent; border:none; color:var(--t4);
  font-size:1rem; cursor:pointer; padding:2px 4px; border-radius:4px; }
#bulkToolbar .bulk-dismiss:hover { color:var(--t1); }

/* ══ TABLE VIEW (Monday.com style) ══ */
#tableViewContent{padding:0;overflow-x:auto;}
/* min-width:max-content — with many columns the rows overflow horizontally; the
   group card and its coloured header must span the full scroll width, not the viewport */
.tv-group{margin-bottom:6px;min-width:max-content;}
.tv-group-hdr{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;user-select:none;font-family:'Inter',sans-serif;transition:all .15s;position:sticky;top:0;z-index:2;border-radius:0;}
.tv-group-hdr:hover{filter:brightness(1.08);}
.tv-group-arrow{font-size:0.75rem;width:14px;transition:transform .15s;}
.tv-group-title{font-size:.82rem;font-weight:800;letter-spacing:-.01em;}
.tv-group-count{font-size:0.75rem;color:var(--t4);font-weight:500;margin-left:4px;background:var(--s4);padding:2px 8px;border-radius:10px;}
.tv-header-row{display:grid;border-bottom:2px solid var(--b2);background:var(--s3);}
.tv-header-row .tv-cell{font-size:0.75rem;letter-spacing:.03em;color:var(--t4);font-weight:600;padding:8px 10px;}
.tv-col-hdr:hover{background:var(--s4);color:var(--t2);}
.tv-col-resize{position:absolute;right:-3px;top:0;bottom:0;width:6px;cursor:col-resize;z-index:3;}
.tv-col-resize::after{content:'';position:absolute;right:2px;top:25%;bottom:25%;width:2px;border-radius:1px;background:transparent;transition:background .15s;}
.tv-col-resize:hover::after,.tv-col-resize.active::after{background:var(--acc);}
body.tv-resizing{cursor:col-resize !important;user-select:none !important;}
body.tv-resizing *{cursor:col-resize !important;}
.tv-row{display:grid;border-bottom:1px solid var(--b1);transition:all .1s;min-height:40px;align-items:center;}
.tv-row:hover{background:rgba(78,124,246,.04);}
/* Freeze the select + task-name columns when extra columns push the table into horizontal scroll */
.tv-row .tv-bulk-cb-cell,.tv-header-row .tv-bulk-cb-cell{position:sticky;left:0;z-index:1;background:var(--s1);}
.tv-row>.tv-cell:nth-child(2),.tv-header-row>.tv-cell:nth-child(2){position:sticky;left:30px;z-index:1;background:var(--s1);}
.tv-header-row .tv-bulk-cb-cell,.tv-header-row>.tv-cell:nth-child(2){background:var(--s3);}
.tv-summary-row .tv-bulk-cb-cell,.tv-summary-row>.tv-cell:nth-child(2){background:var(--s2);}
.tv-cell{padding:5px 10px;font-size:0.75rem;color:var(--t2);overflow:hidden;text-align:center;}
.tv-cell-name{font-weight:600;color:var(--t1);white-space:nowrap;text-overflow:ellipsis;text-align:left;}
.tv-cell-name:hover .tv-task-name{text-decoration:underline;text-underline-offset:2px;}
.tv-task-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;}
.tv-status-pill,.tv-pri-pill{border:none;border-radius:20px;font-size:0.75rem;padding:5px 12px;font-weight:700;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;text-align-last:center;min-width:90px;font-family:inherit;transition:all .12s;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.tv-status-pill:hover,.tv-pri-pill:hover{filter:brightness(1.15);transform:scale(1.02);}
.tv-avatars{display:flex;align-items:center;cursor:pointer;}
.tv-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:#fff;border:2px solid var(--s1);margin-left:-8px;transition:transform .15s, box-shadow .15s;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);position:relative;}
.tv-avatar:first-child{margin-left:0;}
.tv-avatar:hover{transform:scale(1.18);z-index:2;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);}
.tv-avatar-overflow{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:var(--t3);background:var(--s3);border:2px solid var(--s1);margin-left:-8px;}
.tv-date-input{background:transparent;color:inherit;border:1px solid transparent;border-radius:6px;font-family:inherit;font-size:0.75rem;cursor:pointer;outline:none;padding:4px 6px;width:100%;box-sizing:border-box;transition:all .12s;}
.tv-date-input:hover{border-color:var(--b2);background:var(--s3);}
.tv-date-input:focus{border-color:var(--acc);background:var(--s2);box-shadow:0 0 0 2px rgba(78,124,246,.15);}
.tv-progress-wrap{height:7px;background:var(--s4);border-radius:4px;overflow:hidden;flex:1;}
.tv-progress-fill{height:100%;border-radius:4px;transition:width .3s cubic-bezier(.4,0,.2,1);}
.tv-cell-progress{display:flex;align-items:center;gap:6px;}
.tv-pct-input{width:38px;background:transparent;border:1px solid transparent;border-radius:4px;font-size:0.75rem;color:var(--t3);text-align:right;outline:none;padding:2px 4px;font-family:inherit;-moz-appearance:textfield;appearance:textfield;}
.tv-pct-input::-webkit-inner-spin-button,.tv-pct-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#seatInput::-webkit-inner-spin-button,#seatInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.tv-pct-input:hover{border-color:var(--b2);}
.tv-pct-input:focus{border-color:var(--acc);}
.tv-tl-track{position:relative;height:10px;background:var(--s4);border-radius:5px;overflow:hidden;width:100%;}
.tv-tl-bar{position:absolute;top:0;height:100%;border-radius:5px;min-width:4px;transition:all .2s;}
.tv-add-row{padding:8px 18px;}
.tv-add-input{background:transparent;border:1px dashed transparent;border-radius:8px;padding:8px 12px;font-size:0.75rem;color:var(--t3);width:100%;outline:none;font-family:'Inter',sans-serif;box-sizing:border-box;transition:all .15s;}
.tv-add-input:hover{border-color:var(--b2);background:var(--s3);}
.tv-add-input:focus{border-color:var(--acc);border-style:solid;background:var(--s2);color:var(--t1);box-shadow:0 0 0 2px rgba(78,124,246,.1);}
.tv-add-input::placeholder{color:var(--t4);}
.tv-add-group-btn{display:flex;align-items:center;gap:8px;padding:12px 18px;margin:16px 0 16px 48px;font-size:0.75rem;font-weight:600;color:var(--t4);cursor:pointer;border:1px dashed var(--b2);border-radius:10px;transition:all .15s;width:fit-content;}
.tv-add-group-btn:hover{color:var(--acc);border-color:var(--acc);background:rgba(78,124,246,.04);}
.tv-group-actions{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .12s;}
.tv-group-hdr:hover .tv-group-actions{opacity:1;}
.tv-group-action{font-size:.75rem;cursor:pointer;padding:2px 6px;border-radius:4px;color:var(--t3);transition:background .1s;}
.tv-group-action:hover{background:var(--s3);color:var(--t1);}
.tv-drag-handle{font-size:0.75rem;color:var(--t4);cursor:grab;opacity:0;transition:opacity .12s;user-select:none;letter-spacing:-2px;flex-shrink:0;}
.tv-row:hover .tv-drag-handle{opacity:.5;}
.tv-drag-handle:hover{opacity:1 !important;color:var(--acc);}
.tv-row[draggable]{cursor:default;}
.tv-row.dragging{opacity:.4;}
.tv-group-drop-target{outline:2px dashed var(--acc);outline-offset:-2px;border-radius:8px;background:rgba(78,124,246,.03);}
.tv-inline-input{background:transparent;border:1px solid transparent;border-radius:6px;font-family:inherit;font-size:0.75rem;color:var(--t2);padding:4px 8px;width:100%;box-sizing:border-box;outline:none;transition:all .12s;}
.tv-inline-input:hover{border-color:var(--b2);background:var(--s3);}
.tv-inline-input:focus{border-color:var(--acc);background:var(--s2);box-shadow:0 0 0 2px rgba(78,124,246,.15);}
.tv-inline-input::placeholder{color:var(--t4);}
/* Modern task panel */
.modern-panel .tp-header{gap:8px;}
.mtp-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--t4);font-size:0.75rem;font-weight:600;padding:10px 16px;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;}
.mtp-tab:hover{color:var(--t2);}
.mtp-tab.active{color:var(--acc);border-bottom-color:var(--acc);}
/* Mode gating via CSS */
.mode-modern #chartToolbar{display:none !important;}
.mode-modern .gantt-settings-section{display:none !important;}

.nav-proj-del{
  opacity:0;font-size:0.75rem;padding:2px 4px;border-radius:3px;
  transition:opacity .12s,background .12s;color:var(--t4);
  cursor:pointer;flex-shrink:0;margin-left:auto;
}
.nav-btn:hover .nav-proj-del{opacity:1;}
.nav-proj-del:hover{background:rgba(240,79,94,.15);color:var(--red) !important;}

/* ══════════════════════════════
   MOBILE NAV OVERLAY BACKDROP
══════════════════════════════ */
#navBackdrop{
  display:none;position:fixed;inset:0;z-index:149;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
}
#navBackdrop.open{display:block;}

/* ══════════════════════════════
   HAMBURGER BUTTON
══════════════════════════════ */
#hamburger{
  display:none;
  background:none;border:none;cursor:pointer;
  padding:6px;color:var(--t2);font-size:1.1rem;
  flex-shrink:0;line-height:1;border-radius:5px;
  transition:background .12s;
}
#hamburger:hover{background:var(--s4);}

/* ══════════════════════════════
   MOBILE BREAKPOINT  (≤768px)
══════════════════════════════ */
@media (max-width: 768px) {

  /* ── hamburger visible ── */
  #hamburger{display:flex;align-items:center;justify-content:center;}

  /* ── nav becomes a fixed drawer ── */
  #nav{
    position:fixed;left:-260px;top:0;bottom:0;z-index:150;
    width:260px;transition:left .22s cubic-bezier(.4,0,.2,1);
    box-shadow:6px 0 40px rgba(0,0,0,.6);
  }
  #nav.mobile-open{left:0;}

  /* ── main fills full width ── */
  #main{width:100%;min-width:0;}

  /* ── topbar: tighter on mobile ── */
  #topbar{padding:10px 10px;gap:6px;flex-wrap:wrap;}
  #topbar h1{font-size:.82rem;}

  /* ── tabs: scroll horizontally, no wrap ── */
  #tabbar{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    width: 100%;
    margin-top: 4px;
    justify-content: flex-start !important;
  }
  #tabbar::-webkit-scrollbar{display:none;}
  .tab{
    scroll-snap-align:start;
    padding:6px 10px;font-size:0.75rem;white-space:nowrap;flex-shrink:0;
  }
  .tab-icon{display:none;} /* hide icons on mobile to save space */

  /* ── home dashboard ── */
  #view-home{padding:14px;}
  .dash-stats{grid-template-columns:repeat(2,1fr);}
  .dash-grid{flex-direction:column;}
  .dash-grid>.dash-col{width:100%;}
  .home-hero h2{font-size:1.2rem;}

  /* ── gantt: stacked portrait layout ── */
  #view-gantt{
    flex-direction:column !important;
    overflow:hidden;
  }

  /* Task list panel at top, collapsible */
  .gantt-sidebar{
    position:relative !important;
    left:auto !important;
    width:100% !important;
    max-width:none !important;
    height:42vh;
    min-height:36px;
    flex-shrink:0;
    border-right:none !important;
    border-bottom:1px solid var(--b1);
    box-shadow:none !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:height .22s cubic-bezier(.4,0,.2,1);
    z-index:auto !important;
  }
  .gantt-sidebar.mobile-collapsed{
    height:36px !important;
    min-height:36px !important;
  }
  /* chart fills remaining space */
  .chart-area{flex:1;min-height:0;overflow:hidden;}
  /* Hide desktop resize handle */
  #ganttSidebarResizer{ display:none !important; }
  /* No backdrop needed in stacked mode */
  #ganttSidebarBackdrop{ display:none !important; }

  /* Toggle strip at the bottom of the task panel */
  #ganttSidebarToggle{
    display:flex !important;
    position:static !important; left:auto !important; bottom:auto !important;
    width:100%; justify-content:center; align-items:center; gap:5px;
    padding:5px 8px; margin-top:auto;
    background:var(--s3); border:none; border-top:1px solid var(--b1);
    color:var(--t3); font-size:0.75rem; cursor:pointer;
    flex-shrink:0; border-radius:0; box-shadow:none;
  }
  #ganttSidebarToggle:active{ background:var(--s4); }
  .gs-toolbar-spacer{ display:none; }

    /* ── gantt toolbar: wrap and shrink ── */
  .chart-toolbar{
    flex-wrap:wrap;gap:4px;padding:6px 8px;min-height:unset;
  }
  .chart-toolbar .btn{font-size:0.75rem;padding:4px 7px;}

  /* ── gantt legend: wrap ── */
  .gantt-legend{flex-wrap:wrap;gap:4px 10px;padding:4px 8px;}

  /* ── task panel: full screen on mobile ── */
  #taskPanel{
    width:100%;
    top:0;bottom:0;
  }
  #taskPanel.open{transform:translateX(0);}

  /* ── board: allow horizontal scroll ── */
  .board-cols{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:12px;
  }
  .board-col{min-width:260px;max-width:280px;flex-shrink:0;}

  /* ── overview grid: single column ── */
  .ov-grid{grid-template-columns:1fr !important;}

  /* ── notes view ── */
  .notes-layout{flex-direction:column !important;}
  .notes-sidebar{
    width:100% !important;border-right:none !important;
    border-bottom:1px solid var(--b1);
    max-height:180px;overflow-y:auto;
  }

  /* ── capacity table: scroll ── */
  #view-capacity{overflow-x:auto;}

  /* ── modals: full width ── */
  .modal-box{width:95vw !important;padding:18px !important;}
  #dlgBox{width:92vw !important;padding:22px 18px 16px !important;}

  /* ── topbar actions: wrap tightly ── */
  #tbActions{display:flex;flex-wrap:wrap;gap:4px;}
  #tbActions .btn{font-size:0.75rem;padding:4px 7px;}

  /* ── teams view: mobile adjustments ── */
  .teams-card-header{padding:12px 14px;gap:10px;}
  .teams-team-icon{width:36px;height:36px;font-size:.9rem;}
  .teams-member-row{padding:7px 14px;}
  .teams-section-title{padding:10px 14px 4px;}
  .teams-project-row{padding:6px 14px;}
  .teams-invite-card{padding:12px 14px;gap:10px;flex-wrap:wrap;}
  .teams-invite-actions{width:100%;justify-content:flex-end;}

}

/* ── Extra small (phones < 480px) ── */
@media (max-width: 480px) {
  .dash-stats{grid-template-columns:repeat(2,1fr);gap:6px;}
  .stat-num{font-size:1.4rem;}
  #topbar h1{max-width:140px;}
  .tab{padding:9px 8px;font-size:0.75rem;}
}

/* ── Gantt sidebar toggle button (hidden on desktop, shown via media query) ── */
#ganttSidebarToggle{
  display:none;
}

/* ── UPDATE BANNER ── */
#updateBanner {
  display: none;
  background: rgba(155,114,251,0.1);
  border-bottom: 1px solid var(--b1);
  padding: 10px 16px;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--t2);
  flex-shrink: 0;
}
#updateBanner.show { display: flex;  }
@keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ub-content { flex: 1; line-height: 1.5; }
.ub-content strong { color: var(--t1); }
.ub-close { background: none; border: none; color: var(--t4); cursor: pointer; font-size: .9rem; padding: 4px; transition: color 0.15s; }
.ub-close:hover { color: var(--red); }

/* ── AUTH SCREEN ── */
#authScreen{position:fixed;inset:0;background:var(--bg,#14161e);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;}
#authScreen.hidden{display:none;}
/* Details chevron rotation */
#settingsModal details summary span:first-child{transition:transform .15s ease;}
#settingsModal details[open] > summary span:first-child{transform:rotate(90deg);}
.auth-card{background:var(--s2,#1e2130);border:1px solid var(--b1,#2a2f45);border-radius:16px;padding:40px 44px;width:360px;max-width:90vw;display:flex;flex-direction:column;gap:14px;}
.auth-logo{font-size:1.8rem;font-weight:800;letter-spacing:-1px;color:var(--t1,#e8eaf6);text-align:center;margin-bottom:2px;}
.auth-logo span{color:#9b72fb;}
.auth-subtitle{text-align:center;font-size:0.75rem;color:var(--t3,#6b7280);margin-bottom:4px;}
.auth-tabs{display:flex;background:var(--s4,#252a3d);border-radius:8px;padding:3px;gap:3px;}
.auth-tab{flex:1;padding:7px;text-align:center;font-size:0.75rem;border-radius:6px;cursor:pointer;color:var(--t3,#6b7280);transition:all .15s;}
.auth-tab.active{background:var(--s2,#1e2130);color:var(--t1,#e8eaf6);font-weight:600;}
.auth-input{background:var(--s4,#252a3d);border:1px solid var(--b1,#2a2f45);border-radius:8px;padding:10px 14px;color:var(--t1,#e8eaf6);font-size:.8rem;font-family:inherit;outline:none;transition:border .15s;width:100%;box-sizing:border-box;}
.auth-input:focus{border-color:#9b72fb;}
.auth-btn{background:#9b72fb;border:none;border-radius:8px;padding:11px;color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;width:100%;}
.auth-btn:hover{background:#8a5ef0;}
.auth-btn:disabled{background:var(--s4,#252a3d);color:var(--t3,#6b7280);cursor:not-allowed;}
.auth-msg{font-size:0.75rem;text-align:center;min-height:16px;color:#f04f5e;}
.auth-msg.ok{color:#34d17a;}
.auth-user-bar{position:absolute;bottom:0;right:0;background:transparent;border:none;border-radius:0;padding:0 14px;display:flex;align-items:center;gap:10px;font-size:0.75rem;color:var(--t4);z-index:10;box-shadow:none;height:26px;}
.auth-user-bar span{color:var(--t4);}
.auth-user-bar button{background:none;border:1px solid var(--b2,#333850);border-radius:6px;padding:2px 7px;color:var(--t4);cursor:pointer;font-size:0.75rem;font-family:inherit;}
.auth-user-bar button:hover{color:#f04f5e;border-color:#f04f5e;}
/* ── ATTACHMENTS ── */
.att-section{margin-top:4px;}
.att-drop{border:1.5px dashed var(--b2);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;background:var(--s4);position:relative;}
.att-drop:hover,.att-drop.dragover{border-color:var(--acc);background:rgba(78,124,246,.04);}
.att-drop-text{font-size:0.75rem;color:var(--t4);}
.att-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.att-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.att-item{display:flex;align-items:center;gap:8px;background:var(--s4);border:1px solid var(--b1);border-radius:6px;padding:6px 10px;font-size:0.75rem;}
.att-item .att-icon{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;background:var(--s3);}
.att-item .att-info{flex:1;min-width:0;}
.att-item .att-name{color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.75rem;}
.att-item .att-size{color:var(--t4);font-size:0.75rem;}
.att-item .att-actions{display:flex;gap:4px;flex-shrink:0;}
.att-item .att-actions button{background:none;border:none;cursor:pointer;font-size:0.75rem;padding:3px 5px;border-radius:3px;color:var(--t3);}
.att-item .att-actions button:hover{color:var(--t1);background:var(--s3);}
.att-preview{margin-top:6px;border-radius:6px;overflow:hidden;border:1px solid var(--b1);max-height:300px;}
.att-preview img{max-width:100%;display:block;}
.att-preview iframe{width:100%;height:280px;border:none;}
.att-locked{opacity:.5;pointer-events:none;text-align:center;padding:14px;font-size:0.75rem;color:var(--t4);}
.att-usage{font-size:0.75rem;color:var(--t4);margin-top:4px;}

/* Invisible wrapper to expand the clickable area of parent tasks */
.summary-hitbox {
  position: absolute;
  height: 24px; /* 3x taller than the visual bar */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 5;
}

/* Reset the visual bar to fill the new hitbox wrapper */
.summary-hitbox .summary-bar {
  left: 0 !important;
  width: 100% !important;
  margin: 0;
}