/* ============================================================
   WATCHTOWER CANVAS — styles.css  v2
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- DESIGN TOKENS ---- */
:root{
  --bg:#edf1f7;--surface:#fff;--surface2:#f8fafc;--surface3:#f1f5f9;
  --border:#e2e8f0;--border2:#cbd5e1;
  --text:#0f172a;--text2:#475569;--muted:#94a3b8;
  --accent:#4f46e5;--accent-lt:#eef2ff;
  --red:#ef4444;--red-lt:#fee2e2;--green:#10b981;--amber:#f59e0b;
  --r:10px;--r-sm:6px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.06);
  --sh-md:0 4px 20px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.05);
  --sh-lg:0 16px 48px rgba(0,0,0,.16);
  --t:.18s ease;
  /* Sprint-info panel specific */
  --spi-bg:#111827;--spi-surface:#1f2937;--spi-border:#374151;
  --spi-text:#f9fafb;--spi-text2:#9ca3af;--spi-accent:#818cf8;
}
[data-theme="dark"]{
  --bg:#0d1117;--surface:#161b22;--surface2:#1c2128;--surface3:#21262d;
  --border:#30363d;--border2:#484f58;
  --text:#e6edf3;--text2:#8b949e;--muted:#6e7681;
  --accent:#7c3aed;--accent-lt:#1a1033;
  --red:#f85149;--red-lt:#3d1a1a;--green:#3fb950;--amber:#d29922;
  --sh:0 1px 3px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.3);
  --sh-md:0 4px 20px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.3);
  --sh-lg:0 16px 48px rgba(0,0,0,.65);
  --spi-bg:#0d1117;--spi-surface:#161b22;--spi-border:#21262d;
  --spi-accent:#818cf8;
}

html,body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;user-select:none;transition:background var(--t),color var(--t)}

/* ============================================================ HEADER */
.hdr{position:fixed;top:0;left:0;right:0;height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;z-index:300;box-shadow:var(--sh);transition:background var(--t),border-color var(--t)}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-mark{width:30px;height:30px;background:var(--accent);border-radius:8px;display:grid;place-items:center}
.logo-text{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.hdr-div{width:1px;height:24px;background:var(--border);flex-shrink:0}
.hdr-space{flex:1}
.hdr-group{display:flex;align-items:center;gap:4px}

/* View tabs */
.view-tabs{display:flex;gap:2px;background:var(--surface3);padding:3px;border-radius:8px;border:1px solid var(--border)}
.view-tab{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:6px;border:none;background:transparent;color:var(--text2);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--t);white-space:nowrap}
.view-tab:hover{color:var(--text)}
.view-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--sh)}

/* Buttons */
.hbtn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all var(--t);white-space:nowrap}
.hbtn-sec{background:var(--surface3);color:var(--text);border-color:var(--border)}
.hbtn-sec:hover{background:var(--border);color:var(--text)}
.hbtn-import{background:var(--accent-lt);color:var(--accent);border-color:rgba(79,70,229,.2)}
.hbtn-import:hover{background:var(--accent);color:#fff}
.hbtn-export{background:var(--accent);color:#fff}
.hbtn-export:hover{opacity:.88;transform:scale(.97)}
.hbtn-danger{background:var(--red-lt);color:var(--red);border-color:transparent}
.hbtn-danger:hover{background:var(--red);color:#fff}

.icon-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:all var(--t);color:var(--text2)}
.icon-btn:hover:not(:disabled){background:var(--surface3);border-color:var(--border2);color:var(--text)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}

/* ============================================================ TOOLBAR */
.toolbar{position:fixed;left:12px;top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-md);padding:5px;display:flex;flex-direction:column;gap:3px;z-index:200;transition:background var(--t),border-color var(--t)}
.tbtn{width:36px;height:36px;border-radius:7px;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--text2);transition:all var(--t)}
.tbtn:hover{background:var(--surface3);color:var(--text)}
.tbtn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px rgba(79,70,229,.35)}
.tbtn-div{height:1px;background:var(--border);margin:2px 0}

[data-view="sprint"]   .planning-only{display:none}
[data-view="planning"] .sprint-only{display:none}

/* ============================================================ CANVAS */
.canvas-wrap{position:fixed;top:52px;left:0;right:0;bottom:0;overflow:hidden}
.canvas-wrap.pan-mode{cursor:grab}
.canvas-wrap.pan-mode:active{cursor:grabbing}
.canvas-wrap.connect-mode{cursor:crosshair}

.canvas{position:absolute;top:0;left:0;transform-origin:0 0;width:6000px;height:5000px}
.canvas::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--border2) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;opacity:.55}

.svg-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}

/* Drop overlay */
.drop-overlay{position:absolute;inset:0;background:rgba(79,70,229,.08);border:3px dashed var(--accent);display:none;align-items:center;justify-content:center;z-index:500;pointer-events:none;border-radius:4px;backdrop-filter:blur(1px)}
.canvas-wrap.drag-over .drop-overlay{display:flex}
.drop-msg{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--accent);font-size:15px;font-weight:700;opacity:.85}

/* ============================================================ CONNECTION LINES */
.conn-line{fill:none;stroke:var(--border2);stroke-width:2;stroke-dasharray:7 4;stroke-linecap:round;pointer-events:none}
.conn-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}
.conn-group:hover .conn-line{stroke:var(--red);stroke-dasharray:none;stroke-width:2.2}
.conn-dot{pointer-events:none;fill:var(--border2)}
.conn-group:hover .conn-dot{fill:var(--red)}

/* ============================================================ NODES — BASE */
.node{position:absolute;z-index:10;border-radius:var(--r);transition:box-shadow var(--t)}
.node:hover{box-shadow:var(--sh-md)}
.node.connecting{outline:2.5px dashed var(--accent);outline-offset:3px}

/* Close button */
.close-btn{position:absolute;top:7px;right:7px;width:22px;height:22px;background:#000;color:#fff;border:none;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:20;line-height:1;transition:background var(--t);font-family:inherit}
.node:hover .close-btn{display:flex}
.close-btn:hover{background:var(--red)!important}
[data-theme="dark"] .close-btn{background:#fff;color:#000}
[data-theme="dark"] .close-btn:hover{background:var(--red)!important;color:#fff!important}

/* ============================================================ STICKY NOTE */
.sticky-node{width:210px;min-height:170px;padding:12px 12px 8px;box-shadow:2px 4px 16px rgba(0,0,0,.13);display:flex;flex-direction:column;cursor:grab;border-radius:4px}
.sticky-node:active{cursor:grabbing}
.sticky-ta{flex:1;background:transparent;border:none;outline:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:500;color:#1e293b;resize:none;min-height:120px;line-height:1.55;user-select:text;cursor:text}
.sticky-colors{display:flex;gap:5px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(0,0,0,.1);opacity:0;transition:opacity var(--t)}
.sticky-node:hover .sticky-colors{opacity:1}
.sticky-color-dot{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;transition:transform var(--t);flex-shrink:0;outline-offset:2px}
.sticky-color-dot:hover{transform:scale(1.25)}
.sticky-color-dot.active{outline:2px solid var(--text)}

/* ============================================================ TEXT BOX */
.text-node{background:transparent;border:none;box-shadow:none!important;min-width:140px;cursor:grab}
.text-node:active{cursor:grabbing}
.text-content{font-size:22px;font-weight:700;color:var(--text);outline:none;padding:6px 8px;min-width:80px;line-height:1.35;user-select:text;cursor:text;border-radius:var(--r-sm);transition:background var(--t);border:1.5px dashed transparent}
.text-node:hover .text-content{border-color:var(--border2);background:var(--surface)}
.text-content:focus{background:var(--surface)!important;border-color:var(--accent)!important}

/* ============================================================ IMAGE NODE */
.image-node{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);cursor:grab;overflow:visible}
.image-node:active{cursor:grabbing}
.img-wrapper{width:300px;height:220px;min-width:120px;min-height:90px;resize:both;overflow:hidden;background:var(--surface2);border-radius:calc(var(--r) - 1px);display:flex;align-items:center;justify-content:center;position:relative}
.img-wrapper img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;border-radius:calc(var(--r) - 2px)}
.img-wrapper::after{content:'⠿';position:absolute;bottom:3px;right:5px;font-size:11px;color:var(--muted);pointer-events:none;opacity:0;transition:opacity var(--t)}
.image-node:hover .img-wrapper::after{opacity:1}

/* ============================================================ COLUMN NODE */
.col-node{width:290px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column;cursor:default}
.col-header{padding:12px 14px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;cursor:grab;background:var(--surface2)}
.col-header:active{cursor:grabbing}
.col-color-bar{width:3px;height:18px;border-radius:2px;flex-shrink:0}
.col-name-input{flex:1;background:transparent;border:none;outline:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);border-bottom:1.5px dashed transparent;padding:2px 4px;margin:0 -4px;transition:border-color var(--t);cursor:text;min-width:0}
.col-name-input:focus{border-bottom-color:var(--border2)}
.col-count{font-size:11px;font-weight:700;background:var(--surface3);color:var(--muted);padding:2px 8px;border-radius:20px;flex-shrink:0;border:1px solid var(--border)}
.col-cards{padding:10px;display:flex;flex-direction:column;gap:7px;max-height:480px;overflow-y:auto;min-height:40px}
.col-cards::-webkit-scrollbar{width:4px}
.col-cards::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.add-card-btn{margin:0 10px 10px;padding:8px;border:1.5px dashed var(--border);border-radius:7px;background:transparent;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--t);width:calc(100% - 20px)}
.add-card-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lt)}

/* Card */
.card-item{background:var(--surface);border:1.5px solid var(--border);border-radius:7px;padding:9px 10px;transition:box-shadow var(--t),border-color var(--t);position:relative;cursor:pointer}
.card-item:hover{border-color:var(--border2);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.card-item.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt)}
.card-item[data-priority="high"]  {border-left:3px solid var(--red)}
.card-item[data-priority="medium"]{border-left:3px solid var(--amber)}
.card-item[data-priority="low"]   {border-left:3px solid var(--green)}
.card-ta{width:100%;background:transparent;border:none;outline:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--text);resize:none;line-height:1.45;overflow:hidden;min-height:20px;user-select:text}
.card-meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:7px;border-top:1px solid var(--border)}
.card-priority{font-family:inherit;font-size:11px;font-weight:600;border:1px solid var(--border);border-radius:5px;padding:2px 7px;background:var(--surface2);color:var(--text2);cursor:pointer;outline:none;transition:border-color var(--t)}
.card-priority:focus{border-color:var(--accent)}
.card-del-btn{width:20px;height:20px;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--muted);font-size:12px;display:grid;place-items:center;transition:all var(--t);font-family:inherit}
.card-del-btn:hover{background:var(--red-lt);color:var(--red)}
/* Points badge on card */
.card-pts{font-size:10.5px;font-weight:700;background:var(--accent-lt);color:var(--accent);padding:2px 7px;border-radius:20px;border:1px solid rgba(79,70,229,.2);flex-shrink:0}

/* ============================================================ SPRINT-INFO PANEL */
.sprint-info-node{width:270px;background:var(--spi-bg);border:1px solid var(--spi-border);border-radius:14px;overflow:hidden;cursor:default;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.spi-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--spi-border);cursor:grab}
.spi-header:active{cursor:grabbing}
.spi-title{font-size:13px;font-weight:700;color:var(--spi-text)}
.spi-body{padding:14px}
.spi-illo{font-size:30px;margin-bottom:8px;display:block}
.spi-name{font-size:18px;font-weight:800;color:var(--spi-text);margin-bottom:6px;line-height:1.2}
.spi-desc{font-size:12px;color:var(--spi-text2);line-height:1.6;margin-bottom:14px}
.spi-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--spi-surface);border:1px solid var(--spi-border);border-radius:8px;color:var(--spi-text);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;width:100%;margin-bottom:8px;transition:background var(--t),border-color var(--t)}
.spi-btn:last-of-type{margin-bottom:0}
.spi-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.spi-divider{height:1px;background:var(--spi-border);margin:14px 0 12px}
.spi-section-title{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--spi-text2);margin-bottom:10px}
.spi-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.spi-row:last-child{margin-bottom:0}
.spi-row-label{font-size:13px;color:var(--spi-text)}
.spi-value{font-size:13px;font-weight:700;background:var(--spi-accent);color:#fff;padding:3px 14px;border-radius:20px;min-width:38px;text-align:center;transition:all var(--t)}
.spi-value.over{background:#ef4444}
.spi-controls{display:flex;align-items:center;gap:8px}
.spi-ctrl-btn{width:26px;height:26px;background:var(--spi-surface);border:1px solid var(--spi-border);border-radius:7px;color:var(--spi-text);font-size:16px;font-weight:400;cursor:pointer;display:grid;place-items:center;line-height:1;transition:all var(--t)}
.spi-ctrl-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.spi-cap-num{font-size:16px;font-weight:800;color:var(--spi-text);min-width:24px;text-align:center}

/* ============================================================ STORY POINTS PANEL */
.story-pts-node{width:270px;background:var(--spi-bg);border:1px solid var(--spi-border);border-radius:14px;overflow:hidden;cursor:default;box-shadow:0 8px 32px rgba(0,0,0,.25)}
.sp-header{padding:12px 14px 10px;border-bottom:1px solid var(--spi-border);display:flex;align-items:center;cursor:grab}
.sp-header:active{cursor:grabbing}
.sp-title{font-size:13px;font-weight:700;color:var(--spi-text)}
.sp-body{padding:14px}
.sp-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sp-circle{width:44px;height:44px;border-radius:50%;background:var(--spi-surface);border:1.5px solid var(--spi-border);color:var(--spi-text);font-size:14px;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:all var(--t);font-family:inherit}
.sp-circle:hover{border-color:var(--spi-accent);color:var(--spi-accent);transform:scale(1.08)}
.sp-circle.active{background:var(--spi-accent);border-color:var(--spi-accent);color:#fff;box-shadow:0 0 0 3px rgba(129,140,248,.3);transform:scale(1.1)}
.sp-hint{font-size:11.5px;color:var(--spi-text2);font-style:italic;line-height:1.5}

/* ============================================================ ZOOM BAR */
.zoom-bar{position:fixed;bottom:18px;right:18px;display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:5px 10px;box-shadow:var(--sh-md);z-index:200}
.zbtn{width:26px;height:26px;border:none;background:var(--surface3);border-radius:6px;cursor:pointer;font-size:18px;font-weight:300;color:var(--text);display:grid;place-items:center;line-height:1;transition:background var(--t)}
.zbtn:hover{background:var(--border)}
.zpct{font-size:12px;font-weight:700;color:var(--text);min-width:42px;text-align:center;cursor:pointer;transition:color var(--t)}
.zpct:hover{color:var(--accent)}

/* ============================================================ MODAL */
.overlay{position:fixed;inset:0;background:rgba(10,10,20,.5);backdrop-filter:blur(5px);z-index:900;display:flex;align-items:center;justify-content:center;animation:fadeO .15s ease}
@keyframes fadeO{from{opacity:0}to{opacity:1}}
.confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 28px 24px;width:340px;text-align:center;box-shadow:var(--sh-lg);animation:slideUp .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.confirm-icon{margin-bottom:14px;display:flex;justify-content:center}
.confirm-box h3{font-size:17px;font-weight:700;color:var(--text);margin-bottom:7px}
.confirm-box p{font-size:13px;color:var(--text2);margin-bottom:22px;line-height:1.5}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.cbtn{padding:9px 22px;border-radius:8px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border:none;transition:all var(--t)}
.cbtn-cancel{background:var(--surface3);color:var(--text2);border:1px solid var(--border)}
.cbtn-cancel:hover{background:var(--border);color:var(--text)}
.cbtn-danger{background:var(--red);color:#fff}
.cbtn-danger:hover{background:#dc2626;transform:scale(.97)}

/* ============================================================ CTX MENU */
.ctx-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:5px;box-shadow:var(--sh-lg);z-index:800;display:flex;flex-direction:column;gap:2px;min-width:140px;animation:popIn .12s ease}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.ctx-section{display:flex;gap:2px;padding:2px}
.ctx-div{height:1px;background:var(--border);margin:2px 0}
.ctx-btn{flex:1;padding:6px 8px;border:none;border-radius:6px;background:transparent;color:var(--text);font-family:inherit;font-size:13px;cursor:pointer;transition:background var(--t);text-align:center;white-space:nowrap}
.ctx-btn:hover{background:var(--surface3)}
.ctx-clear{width:100%;font-size:12px;color:var(--muted)}
.ctx-clear:hover{color:var(--red)}
.ctx-color-lbl{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;border-radius:6px;background:transparent;cursor:pointer;transition:background var(--t);flex:1;position:relative;color:var(--text2);font-size:12px;font-weight:600;font-family:inherit}
.ctx-color-lbl:hover{background:var(--surface3)}
.ctx-color-lbl input[type="color"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ============================================================ TOAST */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--text);color:var(--surface);padding:9px 20px;border-radius:24px;font-size:13px;font-weight:500;z-index:1000;pointer-events:none;white-space:nowrap;transition:transform .28s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--sh-md)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:var(--red);color:#fff}
.toast.success{background:var(--green);color:#fff}
.toast.info{background:var(--accent);color:#fff}

/* SCROLLBARS */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px}
/* ============================================================
   STORAGE WARNING BANNER (maintainability addition)
   ============================================================ */
.storage-banner {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  color: #92400e;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 250;
}
[data-theme="dark"] .storage-banner {
  background: #451a03;
  border-color: #92400e;
  color: #fde68a;
}
.storage-banner span { flex: 1; }
#storageBannerDismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: .7;
  transition: opacity .15s;
}
#storageBannerDismiss:hover { opacity: 1; }