/* OmniCRM stylesheet — extracted from index.html (v1.6.1 restructure, phase 1) */ /* design tokens: single source of truth is the :root block below (was duplicated pre-v4.9.1) */ *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.5; } button{font-family:inherit;font-size:16px;cursor:pointer;} input,select,textarea{font-family:inherit;font-size:16px;} .btn{ display:inline-flex;align-items:center;gap:8px;justify-content:center; min-height:44px;padding:0 18px;border-radius:var(--radius); border:1px solid var(--line-strong);background:var(--panel);color:var(--ink); font-weight:600;transition:background .12s,border-color .12s;white-space:nowrap; } .btn:hover{background:#f3f5f8;} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} .btn-primary:hover{background:#315499;} .btn-ghost{background:transparent;border-color:transparent;} .btn-ghost:hover{background:#e3e8ef;} .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;} .btn-danger:hover{background:#bd3030;} .btn-sm{min-height:40px;padding:0 14px;font-size:15px;} .btn[disabled]{opacity:.55;cursor:not-allowed;} .btn.active{background:var(--accent);border-color:var(--accent);color:#fff;} /* ---------- Auth screen ---------- */ #auth{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;} .auth-card{ width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line); border-radius:16px;box-shadow:var(--shadow);padding:34px 32px;text-align:center; } .brand{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:0 0 4px;} .brand span{color:var(--accent);} .auth-sub{color:var(--muted);margin:0 0 26px;font-size:16px;} .auth-card label{display:block;text-align:left;font-weight:600;font-size:15px;margin:0 0 6px;} .auth-card input{ width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-strong); border-radius:var(--radius);margin-bottom:16px; } .auth-card input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);} .auth-card .btn{width:100%;} .auth-msg{margin-top:16px;font-size:15px;min-height:22px;} .auth-msg.ok{color:var(--ok);} .auth-msg.err{color:var(--danger);} /* ---------- App shell ---------- */ #app{display:flex;flex-direction:column;height:100%;} header.topbar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line); } header .logo{font-size:20px;font-weight:800;letter-spacing:-.3px;} header .logo span{color:var(--accent);} header .ver{font-size:12px;color:var(--muted);font-weight:700;margin-left:-4px;} header .spacer{flex:1;} header .who{color:var(--muted);font-size:14px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .divider{width:1px;height:28px;background:var(--line);margin:0 2px;} main.workspace{flex:1;display:flex;min-height:0;position:relative;} #graph-wrap{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;} /* v4.2.5: the applied-view name is now a real header row above the canvas (not a floating pill over it) — plain title, not a banner, so it reads like a page header. */ .view-header-bar{ flex:0 0 auto;display:flex;align-items:center;gap:12px; padding:12px 22px;background:var(--panel);border-bottom:1px solid var(--line); } .view-header-bar .vh-eyebrow{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .view-header-bar .vh-name{font-size:19px;font-weight:800;color:var(--ink);} .view-header-bar a{margin-left:auto;color:var(--accent);text-decoration:none;font-size:13px;font-weight:600;} .view-header-bar a:hover{text-decoration:underline;} #graph-canvas-area{flex:1;position:relative;min-height:0;background: radial-gradient(circle at 1px 1px, rgba(20,30,45,.07) 1px, transparent 0) 0 0/22px 22px;} #graph{position:absolute;inset:0;} .connect-banner{ position:absolute;left:50%;top:14px;transform:translateX(-50%); background:var(--accent);color:#fff;padding:8px 16px;border-radius:999px; font-size:14px;font-weight:600;box-shadow:var(--shadow); } .focus-banner{ position:absolute;left:50%;top:14px;transform:translateX(-50%); background:#1d2733;color:#fff;padding:8px 16px;border-radius:999px; font-size:14px;font-weight:600;box-shadow:var(--shadow); } .focus-banner a{color:#fff;text-decoration:underline;margin-left:6px;} .node-info{ position:absolute;z-index:30;max-width:220px;background:var(--panel);border:1px solid var(--line-strong); border-radius:10px;padding:8px 10px;box-shadow:0 8px 28px rgba(0,0,0,.18);pointer-events:auto; } .node-info .ni-photo{display:block;width:36px;height:36px;object-fit:cover;border-radius:6px;margin-bottom:5px;} .node-info .ni-photo.round{border-radius:50%;} .node-info .ni-name{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;} .node-info .ni-row{font-size:12px;color:var(--muted);margin:2px 0;line-height:1.35;} .node-info .ni-row .badge{font-size:11px;padding:1px 7px;} /* ---------- Side panel ---------- */ aside#side{ width:360px;flex:0 0 360px;background:var(--panel);border-right:1px solid var(--line); display:flex;flex-direction:column;min-height:0; transition:flex-basis .18s ease,width .18s ease;overflow:hidden; } main.workspace.side-collapsed aside#side{width:0;flex-basis:0;min-width:0;border-right:0;} .side-toggle{ position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:20; width:18px;height:56px;border:1px solid var(--line-strong);border-left:0; background:var(--panel);border-radius:0 8px 8px 0;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1; color:var(--muted);box-shadow:var(--shadow);padding:0; } .side-toggle:hover{background:var(--accent-soft);color:var(--accent);} main.workspace.side-collapsed .side-toggle{transform:translateY(-50%) rotate(180deg);} .side-head{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700; display:flex;align-items:center;gap:8px;} .side-head .spacer{flex:1;} .side-body{padding:14px 16px;overflow-y:auto;overflow-x:hidden;flex:1;} .search-row{display:flex;gap:8px;margin-bottom:10px;} .search-row input{flex:1;min-height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;} .search-row select{min-height:42px;padding:0 8px;border:1px solid var(--line-strong);border-radius:8px;} .list-item{ display:flex;align-items:center;gap:7px;padding:2px 8px;border:1px solid var(--line); border-radius:6px;margin-bottom:2px;cursor:pointer;transition:border-color .1s,background .1s; line-height:1.4; } .list-item .nm{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .list-item:hover{border-color:var(--accent);background:var(--accent-soft);} .list-item .mark{width:11px;height:11px;border-radius:3px;flex:0 0 auto;} .list-item .mark.contact{border-radius:50%;} .list-item .mark.deal{border-radius:2px;transform:rotate(45deg);} .thumb{width:18px;height:18px;border-radius:5px;object-fit:cover;flex:0 0 auto;background:#eef1f5;border:1px solid var(--line);} .view-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px;} #view-del{color:var(--danger);background:var(--danger-soft);border-color:var(--danger);} #view-del:hover{background:var(--danger);border-color:var(--danger);color:#fff;} #view-del:active{background:#bd3030;border-color:#bd3030;color:#fff;} .view-row{display:flex;gap:6px;margin-bottom:8px;align-items:center;} .view-row select{flex:1;min-width:0;width:100%;} #show-panel{border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin-bottom:10px;background:#fbfcfe;} #show-panel summary{cursor:pointer;font-weight:600;font-size:14px;user-select:none;} .sp-dim{margin-top:10px;} .sp-t{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;} .sp-list{display:flex;flex-wrap:wrap;gap:4px 16px;} .sp-cb{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;font-weight:500;} .sp-cb input{width:auto;min-height:auto;} .row-hide{margin-left:6px;flex:0 0 auto;font-size:12px;color:var(--muted);text-decoration:none;padding:4px 7px;border-radius:6px;opacity:0;transition:opacity .12s;} .list-item:hover .row-hide, .list-item:focus-within .row-hide{opacity:1;} .row-hide:hover{background:var(--danger-soft);color:var(--danger);} #hidden-row{margin-top:10px;font-size:13px;color:var(--muted);} .wslider{display:flex;gap:2px;flex-wrap:nowrap;} .wseg{ border:1px solid var(--line-strong);background:#fff;border-radius:5px; padding:3px 5px;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted); min-height:0;white-space:nowrap;flex:0 1 auto; transition:background .1s,border-color .1s,color .1s; } .wseg:hover{border-color:var(--wc,#888);color:var(--ink);} .wseg.on{background:var(--wc,#888);border-color:var(--wc,#888);color:#fff;} .wseg.clear{font-weight:600;font-style:normal;} .wseg.clear.on{background:var(--muted);border-color:var(--muted);color:#fff;} /* per-view relationship/role status swatches (green/orange/red/white) — unlike the warmth/ weight sliders above, every swatch always shows its own color (not just when selected), so all four options are visible at a glance; the selected one gets a dark ring. */ .stance-slider .wseg{width:24px;height:24px;min-height:0;padding:0;border-radius:50%;background:var(--wc);border:2px solid var(--wc);} .stance-slider .wseg:hover{border-color:var(--wc);} .stance-slider .wseg.on{box-shadow:0 0 0 2px #fff inset,0 0 0 4px var(--ink);} .stance-slider .wseg[data-s="white"]{border-color:var(--line-strong);} .stance-slider .wseg.clear{width:auto;height:24px;border-radius:6px;padding:0 8px;background:#fff;border:1px dashed var(--line-strong);color:var(--muted);font-size:14px;} .stance-slider .wseg.clear.on{background:#fff;border-color:var(--ink);color:var(--ink);} .thumb.round{border-radius:50%;} .detail-photo{width:76px;height:76px;border-radius:10px;object-fit:cover;border:1px solid var(--line);margin-bottom:12px;background:#eef1f5;} .detail-photo.round{border-radius:50%;} .img-edit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .img-edit img{width:60px;height:60px;border-radius:8px;object-fit:cover;border:1px solid var(--line-strong);background:#f3f5f8;} .img-edit.round img{border-radius:50%;} .img-edit input[type=file]{flex:1;min-height:auto;border:none;padding:0;} .img-edit .img-paste{flex-basis:100%;min-height:30px;padding:4px 8px;font-size:12px;font-style:italic;color:var(--muted);border:1px dashed var(--line-strong);border-radius:6px;background:#fbfcfe;} .img-edit .img-paste:focus{font-style:normal;color:var(--ink);border-style:solid;} .list-item .nm{font-weight:600;} .list-item .sub{color:var(--muted);font-size:13px;} .empty{color:var(--muted);text-align:center;padding:30px 10px;} /* org -> contacts tree (v4.1.0) */ .tree-sec-h{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin:14px 0 6px;} .tree-sec-h:first-child{margin-top:0;} .empty-sub{color:var(--muted);font-size:13px;padding:2px 8px 6px 34px;} .org-branch{margin-bottom:2px;} .org-row{display:flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--line); border-radius:6px;cursor:pointer;transition:border-color .1s,background .1s;line-height:1.4;} .org-row:hover{border-color:var(--accent);background:var(--accent-soft);} .org-row .nm{flex:1;min-width:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .org-toggle{width:28px;height:28px;flex:0 0 auto;border:none;background:none;cursor:pointer; color:var(--muted);font-size:18px;padding:0;display:flex;align-items:center;justify-content:center;} .org-toggle:disabled{cursor:default;opacity:.4;} /* expanded (accordion — only one organization's contact list stays open at a time) */ .org-branch.expanded .org-row{border-color:var(--accent);background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);} .org-branch.expanded .org-toggle{color:var(--accent);} .org-selall{flex:0 0 auto;cursor:pointer;width:20px;height:20px;accent-color:var(--accent);margin:0 2px 0 0;} .org-count{flex:0 0 auto;font-size:12px;color:var(--muted);min-width:16px;text-align:right;} .org-contacts{padding-left:26px;margin-top:2px;} .org-contacts .list-item{margin-bottom:2px;} .contact-chk{flex:0 0 auto;cursor:pointer;width:20px;height:20px;accent-color:var(--accent);margin:0 2px 0 0;} /* unassigned contacts grouped by group_name (v4.2.3) — same look as the org tree above, but its own class names so its accordion (only one GROUP open at a time) never touches the organization accordion, and vice versa; no checkboxes/multi-drag for groups (v1). */ .group-branch{margin-bottom:2px;} .group-row{display:flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--line); border-radius:6px;cursor:pointer;transition:border-color .1s,background .1s;line-height:1.4;} .group-row:hover{border-color:var(--accent);background:var(--accent-soft);} .group-row .nm{flex:1;min-width:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .group-toggle{width:28px;height:28px;flex:0 0 auto;border:none;background:none;cursor:pointer; color:var(--muted);font-size:18px;padding:0;display:flex;align-items:center;justify-content:center;} .group-branch.expanded .group-row{border-color:var(--accent);background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);} .group-branch.expanded .group-toggle{color:var(--accent);} .group-count{flex:0 0 auto;font-size:12px;color:var(--muted);min-width:16px;text-align:right;} .group-contacts{padding-left:26px;margin-top:2px;} .group-contacts .list-item{margin-bottom:2px;} /* zone chips: draggable, unplaced-by-default zones (v4.1.0) */ .zone-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;} .zone-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line); border-radius:14px;cursor:grab;font-size:13px;font-weight:600;background:#fff;} .zone-chip:hover{border-color:var(--accent);background:var(--accent-soft);} .zone-chip-sw{width:10px;height:10px;border-radius:50%;flex:0 0 auto;} .detail-kv{margin:0 0 12px;} .detail-kv .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;} .detail-kv .v{font-size:16px;} .chip{display:inline-block;background:var(--accent-soft);color:var(--accent); border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;margin:2px 4px 2px 0;} .detail-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;} .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;} /* Projop details panel — Info/Log tabs (v4.7.4) */ .pj-tabs{display:flex;gap:2px;margin:20px 0 0;border-bottom:1px solid var(--line);} .pj-tab-btn{background:none;border:none;padding:8px 14px;font-size:13px;font-weight:600; color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;} .pj-tab-btn.active{color:var(--ink);border-bottom-color:var(--accent);} .pj-tab-panel{display:none;padding-top:14px;} .pj-tab-panel.active{display:block;} /* Projop Info tab — "legend left, value right" orderly rows (v4.8.3) */ .pj-kv{display:grid;grid-template-columns:130px 1fr;column-gap:14px;align-items:baseline; padding:8px 0;border-bottom:1px solid var(--line);} .pj-kv:last-child{border-bottom:none;} .pj-kv .k{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;} .pj-kv .v{font-size:14px;color:var(--ink);line-height:1.4;} /* v4.8.4: lengthy fields (Description) stack label above value instead of squeezing into the 130px legend column — grid-template-columns:1fr puts .k and .v each on their own full-width row (still same two grid cells, just single-column now). */ .pj-kv-stack{grid-template-columns:1fr;row-gap:6px;} .pj-tab-hint{margin:0 0 12px;} /* ---------- Modal ---------- */ .modal-overlay{position:fixed;inset:0;background:rgba(20,30,45,.45);display:flex; align-items:center;justify-content:center;padding:20px;z-index:50;} .modal-card{background:var(--panel);border-radius:14px;box-shadow:var(--shadow); width:100%;max-width:520px;max-height:90vh;overflow:auto;} .modal-head{padding:18px 22px;border-bottom:1px solid var(--line);font-size:20px;font-weight:800;} .modal-body{padding:18px 22px;} .modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;} .field{margin-bottom:14px;} .field label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;} .field input,.field select,.field textarea{ width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:8px; } .field textarea{min-height:74px;resize:vertical;} .field .hint{color:var(--muted);font-size:12px;margin-top:4px;} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;} /* ---------- inline quick-add-organization (contact form) ---------- */ .org-pick-row{display:flex;align-items:center;gap:6px;} .org-pick-row select{flex:1;min-width:0;} .org-pick-row .btn{flex:0 0 auto;padding-left:14px;padding-right:14px;} .org-quick-add{display:flex;align-items:center;gap:6px;margin-top:8px;} .org-quick-add input{flex:1;min-width:0;min-height:38px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;} .org-quick-add .btn{flex:0 0 auto;} /* ---------- LinkedIn candidate picker ---------- */ .li-cand-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;} .li-cand{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px; padding:10px 12px;cursor:pointer;transition:border-color .12s,background .12s;} .li-cand:hover{border-color:var(--line-strong);background:var(--bg);} .li-cand input[type="radio"]{margin-top:3px;min-height:0;width:auto;flex:0 0 auto;} .li-cand-body{flex:1;min-width:0;} .li-cand-top{display:flex;align-items:center;gap:8px;font-size:15px;} .li-cand-sub{color:var(--muted);font-size:13px;margin-top:2px;} .li-cand-url{display:block;font-size:12px;color:var(--accent);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .li-cand-manual .li-manual-input{width:100%;min-height:38px;padding:6px 10px;border:1px solid var(--line-strong); border-radius:8px;margin-top:6px;font-size:14px;} .li-conf{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:20px;} .li-conf-high{background:var(--ok);color:#fff;} .li-conf-medium{background:#e0a800;color:#fff;} .li-conf-low{background:var(--line-strong);color:var(--ink);} /* ---------- Toast ---------- */ #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px); background:#1d2733;color:#fff;padding:12px 20px;border-radius:10px;font-size:15px; box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s;z-index:80;max-width:80vw;} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);} #toast.err{background:var(--danger);} .stake-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer;} .stake-row:hover{border-color:var(--accent);} .stake-name{font-weight:600;flex:1;} .stake-inf{color:#e6a700;font-size:13px;letter-spacing:1px;} .stake-x{border:none;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;} .stake-x:hover{color:var(--danger);} /* v4.9.0: .stake-kv modifier on .stake-row — "label left, name right" justified layout for the Stakeholders-tab list. The base .stake-row/.stake-name/.stake-x rules above are shared with the Connections block (js/ui.js connectionsBlockHtml()), which never gets .stake-kv, so its original inline layout is untouched. */ .stake-row.stake-kv{display:grid;grid-template-columns:110px 1fr;column-gap:14px;align-items:center;} .stake-kv .stake-meta{display:flex;align-items:center;gap:8px;} .stake-kv .stake-name{flex:1;} .stake-edit{border:none;background:transparent;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;padding:0 2px;} .stake-edit:hover{color:var(--accent);} /* Generic type-to-filter picker (v4.9.0) — text input + click-to-select dropdown, used by the Add/Edit Stakeholder form's Contact/Organization fields instead of a long native made that painful. Enter in the body inserts a newline, Ctrl/Cmd+Enter submits (wireNoteComposerKeys). */ .nc-add{margin-top:10px;} .nc-add-title{width:100%;min-height:36px;padding:0 10px;font-weight:600; border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);} .nc-add-row{display:flex;gap:6px;align-items:flex-start;margin-top:6px;} .nc-add-body{flex:1;min-width:0;min-height:52px;padding:8px 10px;font:inherit;font-size:14px; line-height:1.4;resize:vertical; border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);} .nc-add-row select{flex:0 0 auto;max-width:150px;} .nc-add-row .btn{flex:0 0 auto;} .nc-hint{margin-top:4px;font-size:11px;color:var(--muted);} /* ---- v9.9.7: edit an existing entry, inline ---- A pencil beside the delete ×. Deliberately not a whole-card click: note bodies carry real hyperlinks since v9.9.6, and a card-wide handler would fight them and block text selection. The button sits at the same size/weight as .stake-x so the two read as a pair. */ .nc-edit{background:none;border:0;padding:0 4px;cursor:pointer;color:var(--muted); font-size:15px;line-height:1;flex:0 0 auto;} .nc-edit:hover{color:var(--accent);} .act-row.nc-editing{cursor:default;border-color:var(--accent);} .nc-edit-form{display:flex;flex-direction:column;gap:6px;} .nc-edit-form .nc-e-url{width:100%;min-height:36px;padding:0 10px; border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);} .nc-edit-form .nc-add-body{min-height:64px;} .nc-edit-actions{display:flex;gap:6px;justify-content:flex-end;} .act-date.overdue{color:var(--danger);font-weight:700;} .due-dot{width:11px;height:11px;border-radius:50%;background:var(--muted);flex:0 0 auto;} .due-dot.overdue{background:var(--danger);} .due-dot.today{background:#e6a700;} .btn.due-alert{background:var(--danger);border-color:var(--danger);color:#fff;} .seg-banner{ position:absolute;left:50%;top:14px;transform:translateX(-50%); background:#0f5132;color:#fff;padding:8px 16px;border-radius:999px; font-size:14px;font-weight:600;box-shadow:var(--shadow); } .seg-banner a{color:#fff;text-decoration:underline;margin-left:6px;} .kpi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .kpi .card{flex:1;min-width:84px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;} .kpi .card .v{font-size:22px;font-weight:800;line-height:1.1;} .kpi .card .l{font-size:12px;color:var(--muted);} .dash-section{margin-bottom:16px;} .dash-section h4{margin:0 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;} .stat{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);} .stat .n{font-weight:700;} [hidden]{display:none !important;} @media (max-width:780px){ aside#side{width:300px;flex-basis:300px;} .grid2{grid-template-columns:1fr;} } /* -------------------- duplicate contacts -------------------- */ .dup-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px;font-size:14px;} .dup-tools .dup-lbl{color:var(--muted);} .dup-tools label{display:flex;align-items:center;gap:6px;cursor:pointer;} .dup-note{font-size:13px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:0 0 10px;line-height:1.5;} .dup-sum{font-weight:600;margin:0 0 8px;} .dup-empty{padding:20px 4px;text-align:center;color:var(--muted);font-size:15px;} #dup-clusters{display:flex;flex-direction:column;gap:12px;max-height:56vh;overflow:auto;padding-right:2px;} .dup-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel);} .dup-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .dup-reason{font-size:13px;color:var(--muted);} .dup-rows{display:flex;flex-direction:column;gap:6px;} .dup-row{display:flex;align-items:flex-start;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer;border:1px solid transparent;} .dup-row:hover{background:var(--bg);} .dup-row input{margin-top:3px;} .dup-row input:checked ~ .dup-keep{background:#3a63b8;color:#fff;} .dup-keep{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 7px;align-self:center;min-width:38px;text-align:center;} .dup-body{display:flex;flex-direction:column;gap:2px;min-width:0;} .dup-name{font-weight:600;color:var(--ink);} .dup-facts{font-size:13px;color:var(--ink);opacity:.85;} .dup-refs{font-size:12px;color:var(--muted);} .dup-foot{margin-top:9px;text-align:right;} /* -------------------- weight badge + priority matrix -------------------- */ .legend .wbadge{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:14px;line-height:1;flex:0 0 auto;color:var(--ink);} .matrix-wrap{overflow:auto;max-height:60vh;} table.matrix{border-collapse:collapse;font-size:13px;width:100%;} table.matrix th,table.matrix td{border:1px solid var(--line);padding:6px 8px;vertical-align:top;text-align:left;} table.matrix thead th{position:sticky;top:0;z-index:1;background:var(--panel);white-space:nowrap;font-weight:600;} table.matrix th.mx-corner{font-weight:600;color:var(--muted);white-space:nowrap;} table.matrix tbody th.mx-rowh{white-space:nowrap;background:var(--panel);font-weight:600;} table.matrix td.mx-cell{min-width:96px;} table.matrix td.prio{background:rgba(224,69,44,.09);} .mx-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;} .mx-chip{display:inline-block;background:var(--bg);border:1px solid var(--line-strong);border-radius:11px;padding:1px 8px;margin:2px 4px 0 0;cursor:pointer;font-size:12px;color:var(--ink);} .mx-chip:hover{border-color:#3a63b8;color:#3a63b8;} .mx-empty{color:var(--line-strong);} /* -------------------- zones manager -------------------- */ #zone-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;} .zone-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .zone-row .zone-color{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;flex:0 0 auto;} .zone-row .zone-name{flex:1 1 auto;min-width:0;} .zone-row .zone-count{font-size:12px;color:var(--muted);white-space:nowrap;flex:0 0 auto;} .zone-row .zone-vis{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap;flex:0 0 auto;cursor:pointer;} .zone-row .zone-vis input{cursor:pointer;} .zone-row .zone-unplaced{font-size:11px;color:var(--warn,#e67e22);border:1px solid var(--warn,#e67e22); border-radius:5px;padding:1px 6px;white-space:nowrap;flex:0 0 auto;} /* hide vis-network's native hover tooltip — the custom .node-info popup replaces it */ .vis-tooltip{ display:none !important; } /* -------------------- node right-click context menu -------------------- */ .ctx-menu{position:fixed;z-index:1000;min-width:190px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:5px;} .ctx-head{font-size:12px;font-weight:700;color:var(--muted);padding:6px 10px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;} .ctx-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:8px 10px;font-size:14px;color:var(--ink);cursor:pointer;} .ctx-item:hover{background:var(--accent-soft,#eef3ff);} .ctx-item.danger{color:var(--danger);} .ctx-item.danger:hover{background:var(--danger-soft);} .ctx-sep{height:1px;background:var(--line);margin:5px 6px;} /* ================================================================ v4.4.0 — refined-light redesign (token + component refresh layer) ================================================================ */ :root{ --bg:#f2f5f9; --panel:#ffffff; --ink:#1b2530; --muted:#67737f; --line:#e3e8ef; --line-strong:#d3dae3; --accent:#3a63b8; --accent-ink:#ffffff; --accent-soft:#e8eef8; --danger:#d23b3b; --danger-soft:#fdecec; --ok:#189a55; --radius:9px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; /* spacing scale (v4.9.1) */ --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07); --shadow-lg:0 4px 8px -2px rgba(16,24,40,.06),0 16px 32px -6px rgba(16,24,40,.14); } body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;} header.topbar{ gap:8px;padding:9px 14px;background:var(--panel); border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04); position:relative;z-index:60; } header .logo{font-size:19px;font-weight:700;letter-spacing:-.4px;} header .ver{font-weight:600;border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-left:-2px;} header .divider{width:1px;height:22px;background:var(--line);margin:0 4px;} .btn{min-height:38px;padding:0 14px;font-weight:600;font-size:14px;border-radius:8px; transition:background .12s,border-color .12s,box-shadow .12s,transform .05s;} .btn:active{transform:scale(.98);} .btn-sm{min-height:34px;padding:0 12px;font-size:13.5px;} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-color:var(--accent);} .btn-primary:focus-visible{box-shadow:0 0 0 3px rgba(58,99,184,.35);} .bi{width:16px;height:16px;flex:0 0 auto;} .caret{font-size:10px;margin-left:2px;opacity:.7;} .tb-menu{position:relative;display:inline-flex;} .tb-menu-btn.open{background:#f0f3f8;border-color:var(--line-strong);} .btn-primary.tb-menu-btn.open{background:#315499;} .tb-drop{ position:absolute;top:calc(100% + 6px);left:0;min-width:200px; background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow-lg);padding:6px;z-index:70; } .tb-drop-right{left:auto;right:0;} .drop-item{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; border:0;background:transparent;border-radius:7px;padding:9px 10px; font-size:14px;font-weight:500;color:var(--ink); } .drop-item:hover{background:var(--accent-soft);color:#1c4fc0;} .drop-item .bi{color:var(--muted);} aside#side{background:var(--panel);box-shadow:1px 0 2px rgba(16,24,40,.03);} .side-head{font-weight:600;letter-spacing:-.1px;} .list-item{border-radius:8px;} .list-item:hover{box-shadow:0 1px 2px rgba(16,24,40,.06);} .detail-kv .k{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:600;} input,select,textarea{border-radius:8px;transition:border-color .12s,box-shadow .12s;} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .modal-overlay{background:rgba(16,24,40,.45);backdrop-filter:blur(2px);} .modal-card{border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--line);} .modal-head{font-weight:600;letter-spacing:-.2px;border-bottom:1px solid var(--line);} .legend{border-radius:12px;box-shadow:var(--shadow);backdrop-filter:blur(4px);} .chip{border-radius:99px;} .toast{border-radius:10px;box-shadow:var(--shadow-lg);font-weight:500;} *{scrollbar-width:thin;scrollbar-color:#c6cdd6 transparent;} *::-webkit-scrollbar{width:8px;height:8px;} *::-webkit-scrollbar-thumb{background:#c6cdd6;border-radius:99px;} *::-webkit-scrollbar-track{background:transparent;} /* ============ v4.4.1 — sidebar density + Projop form ============ */ .side-head{padding:8px 12px;font-size:13px;} .side-body{padding:8px 10px;} .view-row{gap:4px;margin-bottom:6px;} .view-row .btn,.view-row .btn-sm{min-height:26px;padding:0 9px;font-size:12px;border-radius:6px;} .view-row select{min-height:26px;font-size:12.5px;padding:2px 6px;border-radius:6px;} .side-body input,.side-body select{font-size:13px;min-height:28px;padding:4px 8px;} #q{min-height:30px;} #show-panel summary{font-size:11px;} .tree-sec-h{font-size:10px;letter-spacing:.7px;margin:10px 0 4px;} .org-row{padding:1px 6px;gap:5px;border-radius:6px;} .org-row .nm{font-size:12.5px;font-weight:500;} .org-row input[type=checkbox]{width:13px;height:13px;min-height:0;} .zone-chips{gap:4px;} .zone-chips .chip,.zone-chips button{font-size:11px;padding:2px 8px;min-height:0;} .list-item{padding:2px 6px;margin-bottom:2px;} .list-item .nm{font-size:12.5px;} .modal-card:has(.pj-form){width:min(680px,94vw);max-width:94vw;} .pj-form .sec{border:1px solid var(--line);border-radius:10px;padding:10px 12px 6px;margin-bottom:10px;background:#fbfcfe;} .pj-form .sec-t{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px;} /* v6.0.0: label-left/field-right, one field per row — same general layout already used on the Organization/Contact forms (v5.3.0/v5.4.0), adopted here too per Costas' explicit ask. Replaces the old side-by-side .grid2 field pairs — every field now stacks full-width. */ .pj-form .field{display:grid;grid-template-columns:120px 1fr;column-gap:10px;align-items:center;margin-bottom:6px;} .pj-form .field label{margin:0;font-size:11.5px;font-weight:600;color:var(--muted);} .pj-form input,.pj-form select,.pj-form textarea{min-height:30px;font-size:13px;padding:4px 9px;width:100%;} .pj-form textarea{min-height:64px;} .pj-form .grid2{display:block;} .pj-form .money-row{display:flex;gap:6px;} /* v9.5.1: Hot + Archive, one compact row instead of two full-width sentence rows. */ .pj-flags{display:flex;gap:14px;} .pj-flag{display:flex;align-items:center;gap:5px;margin:0;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;} .pj-flag input{min-height:0;width:14px;height:14px;padding:0;flex:0 0 auto;} .pj-form .money-row input:first-child{flex:1;} .pj-form .money-row input:last-child{width:64px;flex:0 0 auto;} /* v6.0.0: Parties — was 3 fixed single-pick Owner/Master contractor/Operator org dropdowns (max one each), now an open-ended list backed by the same deal_roles/Stakeholders data as the Projop details panel's own Stakeholders tab — add as many parties as needed, each with a photo/logo, name, role (same ROLE_TYPES vocabulary, already includes owner/master_contractor/ operator), and a notes field editable in place instead of hidden behind a separate popup. */ .pj-parties-wrap{grid-column:2;} .pj-party-row{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:#fff;} .pj-party-top{display:flex;align-items:center;gap:8px;} .pj-party-thumb{width:26px;height:26px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:#eef1f5;border:1px solid var(--line-strong);} .pj-party-thumb.round{border-radius:50%;} .pj-party-mark{width:20px;height:20px;border-radius:50%;flex:0 0 auto;} .pj-party-name{font-size:12.5px;font-weight:600;flex:1;min-width:0;} .pj-party-edit,.pj-party-x{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;color:var(--muted);padding:2px 4px;flex:0 0 auto;} .pj-party-edit:hover{color:var(--accent);} .pj-party-x:hover{color:var(--danger);} .pj-party-note{width:100%;min-height:44px;margin-top:6px;font-size:12px;padding:5px 7px;resize:vertical;} #pj-party-add{margin-top:2px;} /* v4.5.1 — active Projop highlight (the dropdown selector is gone) */ .projop-row.active-view{border-color:var(--accent);background:var(--accent-soft);} .projop-row .badge{font-size:9px;padding:1px 7px;} /* v4.5.3 — org rows: kill the fat expander button, clamp row height */ .org-toggle{ min-height:0;height:16px;width:16px;padding:0;border:0;background:transparent; font-size:10px;line-height:16px;color:var(--muted);border-radius:4px;flex:0 0 auto; } .org-toggle:hover:not(:disabled){background:var(--accent-soft);color:var(--accent);} .org-row{min-height:22px;padding:0 6px;margin-bottom:2px;} .org-row .nm{font-size:12px;line-height:1.35;} .org-count{font-size:10.5px;min-width:14px;} .org-row input[type=checkbox],.org-selall{width:12px;height:12px;min-height:0;margin:0;} .org-row .row-hide{padding:1px 5px;font-size:10.5px;} .org-row .mark{width:9px;height:9px;} .list-item{min-height:22px;} /* ============ v4.5.4 — white canvas, pale chrome, hover-tint buttons ============ */ #graph-wrap{background:#ffffff radial-gradient(circle at 1px 1px, rgba(20,30,45,.055) 1px, transparent 0) 0 0/22px 22px;} header.topbar{background:#dde2ea;} aside#side{background:#dde2ea;box-shadow:none;border-right:1px solid var(--line);} .side-head{border-bottom:1px solid var(--line);} .btn{background:#fff;} .btn:hover{background:var(--accent-soft);border-color:#b9cdf8;color:#1c4fc0;} .btn:hover .bi{color:#1c4fc0;} .btn-ghost{background:transparent;} .btn-ghost:hover{background:var(--accent-soft);color:#1c4fc0;} .btn-primary{background:var(--accent);color:#fff;} .btn-primary:hover{background:#315499;border-color:#315499;color:#fff;} /* v4.8.4: re-assert btn-danger's solid red fill — the generic .btn{background:#fff} rule above (v4.5.4) sits later in the cascade than .btn-danger's original color rule, so it was silently winning and leaving delete buttons looking like an empty box with just a red border (Costas screenshot: Projop panel's Delete button). Same fix pattern as .btn-primary. */ .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;} .btn-danger:hover{background:#b83232;border-color:#b83232;color:#fff;} .tb-menu-btn.open{background:var(--accent-soft);border-color:#b9cdf8;color:#1c4fc0;} .btn-primary.tb-menu-btn.open{background:#315499;color:#fff;} /* ============ v4.6.1 -- org/group rows white (stand out from pale sidebar); Contact Groups rows now match Organizations compact style ============ */ .org-row,.group-row{background:var(--panel);} /* v5.9.0: Costas wants these arrows as big as the "Show on canvas" native disclosure triangle at the top of the sidebar — was shrunk back down to 16px/10px in v5.1.0 to match Contact Groups' own compact row height; sized back up now, same 28px/18px this row type already used once before (v4.11.1). */ .group-toggle{ min-height:0;height:28px;width:28px;padding:0;border:0;background:transparent; font-size:18px;line-height:28px;color:var(--muted);border-radius:6px;flex:0 0 auto; display:flex;align-items:center;justify-content:center;cursor:pointer; } .group-toggle:hover{background:var(--accent-soft);color:var(--accent);} .group-row{min-height:22px;padding:0 6px;margin-bottom:2px;} .group-row .nm{font-size:12px;font-weight:500;line-height:1.35;} .group-count{font-size:10.5px;min-width:14px;} .group-row .mark{width:9px;height:9px;} /* v4.7.0 -- rename affordance on a Contact Groups row (groups are a real table now) */ .group-rename{flex:0 0 auto;font-size:12px;color:var(--muted);text-decoration:none;padding:1px 4px;border-radius:5px;} .group-rename:hover{background:var(--accent-soft);color:var(--accent);} /* ============ v5.3.0/v5.4.0 — Organization + Contact edit forms: 4/3 tabs, label-left/field-right, tinted backdrop, condensed sizing (Costas' explicit ask). Shared structural rules cover both `.org-form` (grey backdrop) and `.contact-form` (pale blue backdrop, v5.4.0) — only the backdrop color and modal width differ between the two, kept as separate rules right below so each form's own block stays easy to find. ============ */ .modal-card:has(.org-form){width:min(600px,94vw);max-width:94vw;} .modal-card:has(.org-form) .modal-body{background:#d5d9e0;} .modal-card:has(.contact-form){width:min(600px,94vw);max-width:94vw;} .modal-card:has(.contact-form) .modal-body{background:#dce7f7;} .org-form .of-tabs,.contact-form .of-tabs{display:flex;gap:2px;margin:0 0 12px;border-bottom:1px solid var(--line-strong);} .org-form .of-tab-btn,.contact-form .of-tab-btn{background:none;border:none;padding:7px 12px;font-size:12.5px;font-weight:600; color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;} .org-form .of-tab-btn.active,.contact-form .of-tab-btn.active{color:var(--ink);border-bottom-color:var(--accent);} .org-form .of-tab-panel,.contact-form .of-tab-panel{display:none;} .org-form .of-tab-panel.active,.contact-form .of-tab-panel.active{display:block;} /* every field row: label fixed-width on the left, the actual control filling the rest on the right — applies to plain inputs/selects/textareas and to the custom-field rows generated by customFieldsHtml() (also just a plain .field), so nothing there needed its own override. */ .org-form .field,.contact-form .field{display:grid;grid-template-columns:120px 1fr;column-gap:10px;align-items:center;margin-bottom:6px;} .org-form .field label,.contact-form .field label{margin:0;font-size:11.5px;font-weight:600;color:var(--muted);} .org-form .field .hint,.contact-form .field .hint{grid-column:2;font-size:10.5px;margin-top:2px;color:var(--muted);} .org-form .field input,.org-form .field select,.org-form .field textarea, .contact-form .field input,.contact-form .field select,.contact-form .field textarea{ min-height:28px;padding:4px 8px;font-size:12.5px;background:#fff;width:100%;} .org-form .field textarea,.contact-form .field textarea{min-height:50px;} .org-form .grid2,.contact-form .grid2{display:block;} /* was side-by-side field pairs — now every field stacks full-width label-left/value-right */ .org-form .org-quick-add,.contact-form .org-quick-add{grid-column:2;margin-left:0;margin-top:6px;} .org-form .img-edit,.contact-form .img-edit{grid-column:2;} .org-form .field:has(.img-edit),.org-form .field:has(datalist), .contact-form .field:has(.img-edit),.contact-form .field:has(datalist){margin-bottom:6px;} /* v5.3.1: AI summary/Notes get more room and a touch bigger text than the rest of the condensed form — Costas: "more space for AI-official profile and Notes... a little bigger so its easier to read". A modifier on the shared .field grid, not a new layout. */ .org-form .field.big-text textarea,.contact-form .field.big-text textarea{min-height:110px;font-size:13.5px;line-height:1.45;} /* v5.3.1/v5.4.0: read-only "Projop-specific roles" list under Default role — one line per Projop this org/contact has a deal_roles override in, click to jump to that Projop (openProjop()). */ .org-form .of-role-list,.contact-form .of-role-list{grid-column:2;margin-top:6px;display:flex;flex-direction:column;gap:4px;} .of-role-row{font-size:11.5px;color:var(--ink);cursor:pointer;padding:3px 6px;border-radius:6px;} .of-role-row:hover{background:var(--accent-soft);} .of-role-row .nm{font-weight:600;color:var(--muted);} /* v7.8.0: Contact form's Core-tab "Projops" field is now just a plain list of which Projops this contact is placed on the canvas of — no notes here (those moved to the Log tab, grouped by Projop — see .cl-* below — and are added via the central "+ Add note" button, see .of-add-note below). Distinct from .of-role-list above (that's deal_roles overrides). */ .pjl-links{grid-column:2;display:flex;flex-direction:column;gap:2px;margin-top:2px;} .pjl-open{font-size:12.5px;color:var(--accent);text-decoration:none;cursor:pointer;} .pjl-open:hover{text-decoration:underline;} /* The single entry point for every new note (Costas: "all notes should be added via a central + button") — sits in the tab row, level with the tab labels, pushed to the right via margin-left:auto so it doesn't need a change to the shared .of-tabs container (which the Organization form's tab row also uses and was not part of this request). */ .of-add-note{margin-left:auto;flex:0 0 auto;align-self:center;min-height:26px;padding:0 10px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:600;cursor:pointer;} .of-add-note:hover:not(:disabled){border-color:var(--accent);color:var(--accent);} .of-add-note:disabled{opacity:.5;cursor:default;} /* Contact form's Log tab (v7.8.0) — grouped into one section per Projop, condensed and zebra-striped rows (date / body / delete), read-only here besides delete — adding goes through .of-add-note above. */ .cl-wrap{display:flex;flex-direction:column;gap:8px;} .cl-block{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;} .cl-head{margin-bottom:4px;} .cl-head .cl-open{font-weight:600;font-size:12.5px;color:var(--accent);text-decoration:none;cursor:pointer;} .cl-head .cl-open:hover{text-decoration:underline;} .cl-note{display:flex;align-items:baseline;gap:6px;padding:4px 6px;border-radius:5px;font-size:12.5px;} .cl-note:nth-child(even){background:var(--bg);} .cl-note-d{flex:0 0 auto;color:var(--muted);font-size:11px;white-space:nowrap;} .cl-note-body{flex:1;min-width:0;word-break:break-word;} .cl-note-body .act-sum{margin:0;font-size:12.5px;} .cl-note-x{flex:0 0 auto;border:none;background:transparent;color:var(--muted);cursor:pointer;padding:0 2px;font-size:13px;line-height:1;} .cl-note-x:hover{color:var(--danger);} /* Central "Add note" picker (v7.8.0) — type + scope selects, then whichever type-specific fields apply. Reuses the plain .field layout the rest of this form uses. */ .an-form select,.an-form input,.an-form textarea{width:100%;} .an-form textarea{min-height:60px;} .an-form input[type=file]{padding:4px 0;} /* v5.5.0: Contact form's "Info" tab — a mixed notes/hyperlinks/images/doc-links shelf (contact_info_items). Reuses .act-row/.act-head/.act-d/.act-sum/.stake-x for individual items (same look as the Log/Activities lists elsewhere in this app). */ .ci-add-wrap{display:flex;flex-direction:column;gap:6px;} .ci-add-wrap select{min-height:34px;} .ci-add-wrap textarea{min-height:60px;} .ci-add-wrap input[type=file]{padding:4px 0;} .ci-link{font-size:12.5px;color:var(--accent);word-break:break-all;} .ci-thumb{max-width:100%;max-height:180px;border-radius:6px;display:block;margin-top:4px;} .ci-caption{font-size:11.5px;color:var(--muted);margin-top:3px;} /* Org form's Contacts tab — plain read-only rows, click opens that contact's own edit form */ .of-contact-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line); border-radius:7px;margin-bottom:5px;cursor:pointer;background:#fff;font-size:12.5px;} .of-contact-row:hover{border-color:var(--accent);} .of-contact-row .nm{font-weight:600;flex:1;} .of-contact-row .sub{color:var(--muted);font-size:11.5px;} /* ================= v4.9.2 — quieter / more professional chrome ================= */ /* Softer danger button (was a loud solid red block) */ .btn-danger{background:var(--danger-soft);border-color:#ecc2c2;color:#b23530;box-shadow:none;} .btn-danger:hover{background:#f6d6d6;border-color:#e0a6a6;color:#9c2a26;} .btn-danger .bi{color:inherit;} /* Slimmer buttons; calm, neutral hover for secondary buttons (no blue-wash) */ .btn{min-height:32px;padding:0 12px;font-size:13.5px;box-shadow:none;} .btn-sm{min-height:29px;padding:0 10px;font-size:13px;} .btn:not(.btn-primary):not(.btn-danger):hover{background:#f3f5f9;border-color:var(--line-strong);color:var(--ink);} .btn:not(.btn-primary):not(.btn-danger):hover .bi{color:var(--muted);} /* Quieter pills — smaller and lighter (colour kept for meaning) */ .badge{font-size:11.5px;font-weight:600;padding:2px 9px;} /* Denser Projop / details panel */ .detail-actions{margin-top:12px;gap:6px;} .pj-tabs{margin:14px 0 0;} .pj-tab-btn{padding:6px 12px;font-size:12.5px;} .stake-row{padding:5px 8px;margin-bottom:5px;} /* v4.9.3 — soft-tinted informational pills (light background + coloured text) */ .badge.soft{ background:#eef1f5; background:color-mix(in srgb, var(--pc,#64748b) 14%, #fff); color:var(--pc,#475569); border:1px solid #dfe4ea; border-color:color-mix(in srgb, var(--pc,#64748b) 32%, #fff); font-weight:600; } /* ============ v4.10.1 — buttons: clear outline, discreet hover, obvious press ============ */ /* Costas: after the v4.9.1-4.9.3 "quieter chrome" passes, plain buttons' borders faded to var(--line-strong) (#d3dae3) — nearly invisible against the white/pale panels — and the only pressed-state feedback was a tiny scale(.98). Wants every button to read as clearly clickable: a real, visible outline at rest, a subtle (not garish) hover, and a press that's obviously different from hover, not just a smaller version of it. Consolidated here at the end of the cascade rather than reworking every earlier pass — same "re-assert last" pattern already used above for .btn-danger/.btn-primary. */ .btn{border-width:1.5px;border-color:#93a1b3;} .btn-ghost{background:#fff;border-color:#93a1b3;} .btn-primary{border-color:#28417a;} .btn-danger{border-color:#e3a8a8;} .tb-menu-btn.open{border-color:var(--accent);} .btn:not(.btn-primary):not(.btn-danger):hover{background:color-mix(in srgb, var(--accent) 20%, #fff);border-color:var(--accent);} .btn-ghost:hover{background:color-mix(in srgb, var(--accent) 20%, #fff);border-color:var(--accent);color:#1c4fc0;} .btn-primary:hover{border-color:#1f3562;} .btn-danger:hover{border-color:#d68f8f;} /* Pressed/active — a clearly different shade + edge, on top of the existing scale-down. */ .btn:active{transform:scale(.97);} .btn:not(.btn-primary):not(.btn-danger):active{background:var(--accent);border-color:var(--accent);color:#fff;} .btn-ghost:active{background:var(--accent);border-color:var(--accent);color:#fff;} .btn-primary:active{background:#24407a;border-color:#16264a;} .btn-danger:active{background:#f2c6c6;border-color:#c97c7c;color:#8f2424;} /* ============ v5.0.4 — Organizations grouped by type in the sidebar ============ */ /* One collapsible section per org type (Hotel/Chain/Group/Vendor/Partner/Other), each with its own expand/collapse state (orgTypeOpen in js/ui.js) — styled to match Contact Groups' .group-branch/.group-row look (bordered row, accent hover/expanded ring) for a consistent sidebar feel; the per-type show/hide checkbox row was removed per Costas' request, so every type with organizations always gets a section, collapsed by default. Arrow kept at the bigger 28px size (Costas' prior explicit request) rather than matching Contact Groups' smaller one. */ .org-type-sec{margin-bottom:2px;} .org-type-h{ display:flex;align-items:center;gap:6px;padding:0 6px;min-height:22px;margin-bottom:2px; border:1px solid var(--line);border-radius:6px;cursor:pointer;background:var(--panel); transition:border-color .1s,background .1s;line-height:1.4; } .org-type-h:hover{border-color:var(--accent);background:var(--accent-soft);} .org-type-h .nm{flex:1;min-width:0;font-size:12px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .org-type-h .mark{width:9px;height:9px;border-radius:50%;flex:0 0 auto;} .org-type-sec.expanded .org-type-h{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);} /* v4.11.1: bigger, easier-to-hit arrow (Costas) — was 20px/11px, hard to spot/click. */ .org-type-toggle{ width:28px;height:28px;flex:0 0 auto;border:none;background:none;cursor:pointer; color:var(--muted);font-size:18px;font-weight:700;border-radius:6px;display:flex;align-items:center;justify-content:center; } .org-type-toggle:hover{background:var(--accent-soft);color:var(--accent);} .org-type-sec.expanded .org-type-toggle{color:var(--accent);} .org-type-body{padding-left:26px;margin-top:2px;} /* v5.0.6: quick inline rename, same affordance/style as Contact Groups' .group-rename. */ .org-type-rename{flex:0 0 auto;font-size:12px;color:var(--muted);text-decoration:none;padding:1px 4px;border-radius:5px;} .org-type-rename:hover{background:var(--accent-soft);color:var(--accent);} /* v5.7.0: "Add/edit/remove roles…" link next to the Default role dropdown (Contact + Org forms) — same quick-link affordance as .group-rename/.org-type-rename above. */ .manage-roles-link{display:inline-block;margin-top:4px;font-size:12px;color:var(--muted);text-decoration:none;padding:1px 4px;border-radius:5px;} .manage-roles-link:hover{background:var(--accent-soft);color:var(--accent);} /* ============ v5.1.0 -- redo of v5.0.9, per Costas: ONE shared color for ALL Organization Type buttons, a DIFFERENT shared color for ALL Contact Group buttons, and a DIFFERENT color for EACH Zone (that part of v5.0.9 was already right — zones already have their own real .color field). v5.0.9 wrongly gave every individual org type AND every individual group its own hue — overcorrecting v5.0.8's real bug (low contrast) into "different colors" at the wrong granularity. Also: the 3 states are now literally white(rest) -> pale(hover) -> solid(pressed/active/expanded), not pale-at-rest the way v5.0.9 had it — same state model now applied to every other plain button in the app too (see the v4.10.1 block above, reworked from a neutral grey hover/press to this same blue). Header/sidebar background also bumped to a clearly-visible pale grey (#e7ebf1, was #f3f6fa — too close to white to read as intentional; Costas flagged this had been missed). */ /* v5.9.0: matches .group-toggle's size bump above — same "as big as Show on canvas" ask. */ .org-type-toggle{width:28px;height:28px;font-size:18px;line-height:28px;border-radius:6px;} .org-type-h{--pc:#0f8a82;} /* one shared teal for every Organization Type row */ .group-row{--pc:#3a63b8;} /* one shared blue for every Contact Group row (== --accent) */ .group-row,.org-type-h,.zone-chip{ background:#fff;border-color:var(--line); transition:background .1s,border-color .1s; } .group-row:hover,.org-type-h:hover,.zone-chip:hover{ background:color-mix(in srgb, var(--pc) 20%, #fff); border-color:var(--pc); } .group-row:active,.org-type-h:active,.zone-chip:active, .group-branch.expanded .group-row,.org-type-sec.expanded .org-type-h{ background:var(--pc);border-color:var(--pc);box-shadow:0 0 0 1px var(--pc); } .group-row:active .nm,.org-type-h:active .nm,.zone-chip:active .nm, .group-branch.expanded .group-row .nm,.org-type-sec.expanded .org-type-h .nm{ color:#fff; } .group-row:active .mark,.org-type-h:active .mark, .group-branch.expanded .group-row .mark,.org-type-sec.expanded .org-type-h .mark{ box-shadow:0 0 0 1px #fff; } .group-row:hover .group-toggle,.org-type-h:hover .org-type-toggle{color:var(--pc);} .group-branch.expanded .group-toggle,.org-type-sec.expanded .org-type-toggle, .group-row:active .group-toggle,.org-type-h:active .org-type-toggle{color:#fff;} /* Zone chip — quick inline rename ✎, same affordance as group/org-type rename links */ .zone-chip{padding-right:6px;} .zone-chip-rename{flex:0 0 auto;font-size:12px;color:var(--muted);text-decoration:none;padding:1px 4px;border-radius:5px;} .zone-chip-rename:hover{background:rgba(255,255,255,.6);color:var(--ink);} /* Placed zones (already dragged onto the canvas) go flat pale grey — signals "already used" and stops them visually competing with the zones still waiting to be placed. */ .zone-chip.placed{background:#eef1f5;border-color:#d3dae3;} .zone-chip.placed:hover{background:#e2e6ec;border-color:#b7c0cc;} .zone-chip.placed:active{background:#c7cdd6;border-color:#9aa5b1;box-shadow:0 0 0 1px #9aa5b1;} .zone-chip.placed .zone-chip-sw{opacity:.4;} /* ---------- v6.0.1: canvas search box ---------- Sits over the top-right of the canvas. Typing here DIMS non-matching nodes (see recomputeDimming(), js/graph.js) rather than hiding them, which is the whole point — the Filter modal already removes nodes, this one leaves the layout untouched so you never lose your place. */ .canvas-search{ position:absolute;top:12px;right:12px;z-index:25; display:flex;align-items:center;gap:8px; background:var(--panel);border:1px solid var(--line-strong);border-radius:999px; padding:4px 6px 4px 14px;box-shadow:0 4px 14px rgba(16,24,40,.10); } .canvas-search input{ border:0;outline:0;background:transparent;color:var(--ink); font-size:14px;width:160px;padding:4px 0; } .canvas-search input::placeholder{color:var(--muted);} .canvas-search input::-webkit-search-cancel-button{display:none;} .canvas-search .cs-count{font-size:12px;color:var(--muted);white-space:nowrap;} .canvas-search .cs-count.none{color:var(--danger);} .canvas-search .cs-clear{ border:0;background:transparent;color:var(--muted); font-size:18px;line-height:1;padding:2px 7px;border-radius:999px; } .canvas-search .cs-clear:hover{color:var(--ink);background:var(--line);} /* ---------- v6.0.6: details-panel header (preview + Edit top-right) ---------- Costas asked for the company's key facts at a glance with the Edit button in the top-right, rather than the old layout where Edit sat under the entire field list. */ .detail-head{ display:flex;align-items:flex-start;gap:10px; padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line); } .detail-head-main{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1;} .detail-head-txt{min-width:0;display:flex;flex-direction:column;gap:3px;} .detail-head-name{font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;word-break:break-word;} .detail-head-sub{font-size:12.5px;color:var(--muted);line-height:1.3;} .detail-head .detail-edit{flex:0 0 auto;} .detail-head .detail-photo{margin:0;flex:0 0 auto;} /* ---------- v6.2.0: manual logo sizing on the organization form ---------- */ .logo-size-row{display:flex;align-items:center;gap:10px;} .logo-size-row input[type=range]{flex:1;min-width:0;accent-color:var(--accent);} .logo-size-row .logo-size-val{ font-size:12.5px;color:var(--muted);min-width:48px;text-align:right;font-variant-numeric:tabular-nums; } /* ---------- v6.4.1: organization details panel — label left, value right ---------- Costas: "i want the labels on the left the fields on the right. and a cleaner more pro look". The rows themselves are pjKv() (the same label-left grid the Projop panel uses); this block tidies the whole panel and catches anything else that renders a .detail-kv inside a tab — custom fields, for one — so a single field can't fall back to the old stacked layout. */ #side-body .pj-tab-panel .detail-kv{ display:grid;grid-template-columns:120px 1fr;column-gap:14px;align-items:baseline; padding:9px 0;margin:0;border-bottom:1px solid var(--line); } #side-body .pj-tab-panel .detail-kv:last-child{border-bottom:none;} #side-body .pj-tab-panel .detail-kv .k, #side-body .pj-tab-panel .pj-kv .k{ font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600; } #side-body .pj-tab-panel .detail-kv .v, #side-body .pj-tab-panel .pj-kv .v{font-size:14px;color:var(--ink);line-height:1.45;} #side-body .pj-tab-panel .pj-kv{grid-template-columns:120px 1fr;padding:9px 0;} /* sliders and chip rows sit centred against their label rather than on the text baseline */ #side-body .pj-tab-panel .pj-kv:has(.stance-slider), #side-body .pj-tab-panel .pj-kv:has(.wt-slider), #side-body .pj-tab-panel .pj-kv:has(.chip){align-items:center;} /* long free text (Notes) stacks under its label instead of squeezing into the value column */ #side-body .pj-tab-panel .pj-kv-stack{grid-template-columns:1fr;row-gap:6px;} #side-body .pj-tab-panel .pj-kv-stack .v{ background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px; } /* links: readable, not shouty */ #side-body .pj-tab-panel .v a{color:var(--accent);text-decoration:none;word-break:break-all;} #side-body .pj-tab-panel .v a:hover{text-decoration:underline;} /* the action row reads as a toolbar under the header */ #side-body .detail-actions{ margin:0 0 2px;padding-bottom:12px;border-bottom:1px solid var(--line); } #side-body .pj-tabs{margin-top:0;} /* ---------- v6.4.2: details-panel controls, tightened ---------- The status swatches were 24px with a 4px dark halo and the "no status" button was a wide dashed pill — three different shapes in one row. Everything in a panel row is now the same small, consistent control, and rows share a common height so one doesn't tower over the rest. */ #side-body .pj-tab-panel .stance-slider{gap:6px;} #side-body .pj-tab-panel .stance-slider .wseg{ width:16px;height:16px;border-width:1px;box-shadow:none; } #side-body .pj-tab-panel .stance-slider .wseg.on{ box-shadow:0 0 0 2px var(--panel), 0 0 0 3px var(--ink); } #side-body .pj-tab-panel .stance-slider .wseg.clear{ width:16px;height:16px;border-radius:50%;padding:0;font-size:0; background:#fff;border:1px dashed var(--line-strong); } #side-body .pj-tab-panel .stance-slider .wseg.clear.on{ border-style:solid;border-color:var(--ink); } /* weight: a compact segmented control in the same key as the status swatches */ #side-body .pj-tab-panel .wslider:not(.stance-slider){gap:4px;} #side-body .pj-tab-panel .wslider:not(.stance-slider) .wseg{ min-width:24px;height:20px;padding:0 6px;border-radius:4px;font-size:11px;line-height:18px; } /* every row the same height, so the panel reads as a table */ #side-body .pj-tab-panel .pj-kv, #side-body .pj-tab-panel .detail-kv{min-height:38px;} /* links stay on one line and truncate rather than breaking across words */ #side-body .pj-tab-panel .v a{ display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;vertical-align:bottom;word-break:normal; } /* ---------- v6.5.0: Projop documents / reports ---------- */ .doc-list{display:flex;flex-direction:column;gap:6px;} .doc-row{ display:flex;align-items:flex-start;gap:8px; border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--panel); } .doc-main{flex:1;min-width:0;} .doc-row .doc-open{ font-size:13.5px;font-weight:600;color:var(--accent);text-decoration:none; display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .doc-row .doc-open:hover{text-decoration:underline;} .doc-meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;} .doc-note{font-size:12.5px;color:var(--ink);margin-top:4px;line-height:1.4;} .doc-total{font-size:11.5px;color:var(--muted);margin:8px 0 0;} .doc-add{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;} .doc-add input[type=text]{width:100%;} .doc-add-row{display:flex;gap:7px;align-items:center;} .doc-add-row input[type=file]{flex:1;min-width:0;font-size:12.5px;} .doc-add-row input[type=text]{flex:1;min-width:0;} /* v6.8.0 — Players / Parties: role section > companies A-Z > their people. The role is the section heading, so a company row carries no role badge and nothing wraps. Every row is flex with a min-width:0 name, so a long name truncates instead of shoving the stars and buttons off the right edge. */ .stake-rgrp,.pj-rgrp{ margin:0 0 16px; } .stake-rgrp:last-child,.pj-rgrp:last-child{ margin-bottom:0; } .stake-rgrp-h,.pj-rgrp-h{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:0 2px 6px; } .rgrp-dot{ width:7px; height:7px; border-radius:50%; flex:none; } .stake-rgrp.plain .rgrp-dot,.pj-rgrp.plain .rgrp-dot{ opacity:.45; } .stake-rgrp-body,.pj-rgrp-body{ display:flex; flex-direction:column; gap:9px; } .stake-grp,.pj-grp{ margin:0; } .stake-grp-h.plain,.pj-grp-h.plain{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-style:italic; padding:3px 2px 5px; border-bottom:1px dashed var(--line); } .stake-grp-body,.pj-grp-body{ margin:4px 0 0 13px; padding-left:11px; border-left:2px solid var(--line); } .stake-grp-body:empty,.pj-grp-body:empty{ display:none; border-left:0; padding:0; margin:0; } .stake-row.stake-co,.stake-row.stake-pn{ display:flex; align-items:center; gap:9px; min-width:0; border:0; border-radius:0; margin:0; padding:5px 2px; } .stake-row.stake-co{ border-bottom:1.5px solid var(--line-strong,#d3dae3); } .stake-row.stake-pn{ border-bottom:1px solid var(--line); } .stake-row.stake-pn:last-child{ border-bottom:0; } .stake-row.stake-co:hover,.stake-row.stake-pn:hover{ background:var(--accent-soft,#eef4ff); } .stake-co .stake-name{ font-size:14.5px; font-weight:600; } .stake-pn .stake-name{ font-size:13px; font-weight:500; } .stake-co .stake-name,.stake-pn .stake-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stake-chip,.stake-inf,.stake-edit,.stake-x{ flex:none; } .stake-chip{ font-size:10.5px; padding:1px 7px; } .stake-av{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; background:var(--panel); border:1px solid var(--line); } .stake-av.sq{ width:28px; height:28px; border-radius:6px; } .stake-av.ini{ display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.02em; } /* v7.0.0 — Players: a company is the player, every one of its contacts is listed beneath it, and the checkbox is this Projop's canvas membership. A person who is OFF the canvas is dimmed rather than hidden, so you can always see who else is available. */ .stake-chk{ flex:none; width:15px; height:15px; margin:0 1px 0 0; cursor:pointer; accent-color:var(--accent,#2f6df6); } .stake-grp-n{ font-size:11px; color:var(--muted); margin:2px 0 3px 40px; } .stake-row.stake-pn{ opacity:.5; transition:opacity .12s; } .stake-row.stake-pn.on{ opacity:1; } .stake-row.stake-pn:hover{ opacity:1; } .stake-role{ flex:none; border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:13px; padding:2px 4px; border-radius:4px; } .stake-role:hover{ background:var(--accent-soft,#e8eef8); color:var(--accent,#2f6df6); } /* v7.3.1 — Players: a company starts collapsed and opens on click. */ .stake-caret{ flex:none; width:11px; font-size:10px; color:var(--muted); line-height:1; } .stake-row.stake-co{ cursor:pointer; } .stake-grp-n{ cursor:pointer; } .stake-grp:not(.open) .stake-grp-body{ display:none; } /* ---------- v7.5.0: unified node log (profile + every Projop) ---------- */ .nl-filter-row{display:flex;align-items:center;gap:8px;margin:2px 0 10px;} .nl-filter-lab{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;} .nl-filter-row select{flex:1;min-width:0;} .nl-tag{ font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:700; color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px; max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .nl-tag.own{color:var(--muted);background:var(--line);} .nl-add{display:flex;gap:6px;align-items:center;margin-top:10px;} .nl-add input{flex:1;min-width:0;} .nl-add select{flex:0 0 auto;max-width:150px;} /* v7.7.0 — "Add from canvas…" bulk player picker (openAddFromCanvas, js/entities.js). Deliberately reuses .stake-av (the Players tab avatar) so a row here reads the same as the row it will become. */ .stake-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;} .afc-tools{font-size:12px;color:var(--muted);margin:2px 0 8px;} .afc-tools a{color:var(--accent);text-decoration:none;} .afc-tools a:hover{text-decoration:underline;} #afc-list{max-height:46vh;overflow-y:auto;} .afc-row{display:flex;align-items:center;gap:8px;padding:5px 2px;border-bottom:1px solid var(--line);} .afc-row:last-child{border-bottom:0;} .afc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-size:13px;} .afc-kind{flex:0 0 auto;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;} .afc-role{flex:0 0 auto;max-width:150px;} /* v7.9.0 — Projop funnel fields: the four-year expected-income split rendered inline on the Brief tab. Each year is a small pill so the line reads as a series rather than a sentence. */ .pj-inc{display:inline-block;margin:0 6px 3px 0;padding:2px 7px;border:1px solid var(--line);border-radius:5px;background:var(--bg);font-size:12px;white-space:nowrap} .pj-inc b{font-weight:600;color:var(--muted);margin-right:4px;font-size:11px} /* v8.0.0: Projops board — the new "home page", a Kanban view of every Projop, columns by stage. Sibling of #graph-wrap inside main.workspace, so it takes the same flex slot and fills the space next to the sidebar; toggled via the hidden attribute (js/views.js showCanvasView() / js/reports.js openProjopBoard()), never destroyed while hidden. */ #board-view{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);} .board-head{flex:0 0 auto;padding:14px 18px 10px;background:var(--panel);border-bottom:1px solid var(--line);} .board-title{margin:0 0 8px;font-size:17px;font-weight:700;} .board-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .board-filters select,.board-filters input{min-height:32px;padding:0 8px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;} .board-filters input{width:110px;} .board-count{color:var(--muted);font-size:12px;margin-left:4px;} .board-canvas-link{margin-left:auto;font-size:12.5px;color:var(--accent);text-decoration:none;} .board-canvas-link:hover{text-decoration:underline;} /* v10.5.0 — Opportunities' Pipeline/Archive sub-tabs (oppSubnavHtml(), js/reports.js). Reuses .view-switch/.vs-btn verbatim (same look as the primary toolbar switcher), just placed inline under the board-head title instead of in the header — .opp-subnav only adds the spacing. */ .opp-subnav{margin:0 0 8px;} .board-cols{flex:1;display:flex;gap:12px;padding:14px 18px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;} .board-col{flex:0 0 260px;display:flex;flex-direction:column;max-height:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;} .board-col-h{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:2px solid var(--pc,var(--line-strong));} .board-col-t{font-size:12.5px;font-weight:700;color:var(--ink);} .board-col-n{font-size:11px;color:var(--muted);background:var(--bg);border-radius:10px;padding:1px 7px;} .board-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;} .board-col-empty{padding:6px 2px;} .board-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;} .board-card:hover{border-color:var(--accent);box-shadow:var(--shadow);} .board-card-name{font-size:13px;font-weight:600;color:var(--ink);} .board-card-ref{font-size:11px;color:var(--muted);margin-top:1px;} .board-card-fs{font-size:11px;color:var(--accent);margin-top:3px;} .board-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;font-size:11px;color:var(--muted);} .board-card-meta span{background:var(--bg);border-radius:5px;padding:1px 6px;} .board-card-budget{margin-top:5px;font-size:12px;font-weight:600;color:var(--ink);} /* v9.5.0 — the Archive view. Same #board-view shell and .board-head/.board-title/.board-filters/ .board-count/.board-canvas-link classes (none of them are scoped to #board-view specifically), just a wrapping card grid instead of Kanban columns — stage no longer matters once a Projop is shelved, so there is nothing to sort into columns by. */ #archive-view{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);} .archive-grid{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px;padding:14px 18px;overflow-y:auto;} .archive-grid .board-card{flex:0 0 260px;} /* v10.0.0 — the Housekeeping view. Same #board-view shell and .board-head/.board-title/ .board-filters/.board-count/.board-canvas-link classes as the board and the Archive (none of them are scoped to a specific id), with a real data table instead of cards. Sticky header row so the column you sorted by stays visible while you scroll a few thousand contacts. */ #admin-view{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);} .adm-tabs{display:flex;gap:6px;margin:0 0 8px;} /* v10.3.0 — Actions Due, its own page. Same #board-view shell and .board-head/.board-title/ .board-filters/.board-count/.board-canvas-link classes as its five siblings; body reuses the .home-row/.home-urg-grp classes verbatim (none of them scoped to the home cards specifically) so a row looks identical here to how it looked on Home's card. */ #actions-view{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);} .actions-body{flex:1;overflow-y:auto;padding:10px 18px 18px;max-width:720px;} .adm-tab{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;} .adm-tab:hover{border-color:var(--accent);} .adm-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;} .adm-n{font-size:10.5px;font-weight:600;background:rgba(0,0,0,.09);border-radius:9px;padding:1px 6px;} .adm-tab.on .adm-n{background:rgba(255,255,255,.22);} .adm-dup-l{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);cursor:pointer;} .board-filters #adm-filter{width:190px;} /* the bulk bar only exists while something is ticked (hidden attribute, set in adminSyncBulkBar) */ .adm-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;padding:8px 10px;background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;} .adm-bulk[hidden]{display:none;} .adm-bulk-l{font-size:12.5px;color:var(--muted);} .adm-bulk select,.adm-bulk input{min-height:30px;padding:0 8px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;} .adm-bulk input{width:180px;} .adm-selcount{font-size:12.5px;font-weight:700;color:var(--accent);} .adm-wrap{flex:1;overflow:auto;padding:0 18px 18px;} table.adm-table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;background:var(--panel);} table.adm-table thead th{position:sticky;top:0;z-index:2;background:var(--panel);text-align:left;white-space:nowrap;font-weight:700;padding:9px 10px;border-bottom:2px solid var(--line-strong);} table.adm-table td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;} .adm-h{cursor:pointer;user-select:none;} .adm-h:hover{color:var(--accent);} .adm-h.on{color:var(--accent);} .adm-arrow{margin-left:4px;font-size:10px;} .adm-num{text-align:right;} .adm-cb{width:34px;text-align:center;padding-left:12px !important;padding-right:4px !important;} .adm-cb input{cursor:pointer;} .adm-row{cursor:pointer;} .adm-row:hover td{background:var(--bg);} .adm-row.on td{background:rgba(47,109,246,.09);} .adm-empty{color:var(--muted);padding:18px 10px !important;text-align:center;} /* v8.0.1 — board cards carry their people and their latest log line. Kept deliberately tight: with 85 cards on screen the board only works if a card stays scannable, so players are capped at three chips with a "+N" overflow and the note is clamped to two lines. The full lists live in the card's preview modal. */ .board-card-players{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px} .board-chip{display:inline-block;max-width:100%;padding:1px 6px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .board-chip.is-org{border-style:dashed;color:var(--muted)} .board-chip-more{color:var(--muted);border-style:dotted} .board-card-note{margin-top:6px;font-size:11.5px;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .board-card-notecount{margin-top:4px;font-size:10.5px;color:var(--muted);opacity:.85} /* preview modal */ .bp-list{display:flex;flex-direction:column;gap:3px} .bp-row{display:flex;align-items:center;gap:6px;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--line)} .bp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bp-log{display:flex;flex-direction:column;gap:5px;max-height:260px;overflow:auto} .bp-note{display:flex;gap:8px;font-size:12.5px;line-height:1.4;padding-bottom:4px;border-bottom:1px solid var(--line)} .bp-note-d{flex:0 0 74px;color:var(--muted);font-size:11px;padding-top:1px} .bp-note-b{min-width:0} /* v8.0.2 — the Projops selector is now a type-to-filter picker (85+ Projops made the plain dropdown unusable). Reuses the .fp-* classes from the v4.9.5 stakeholder picker; .vp-wrap only widens the list, since a Projop name is far longer than a person's. */ .view-row .vp-wrap{width:100%} .view-row .vp-wrap .fp-input{width:100%;min-height:26px;font-size:12.5px;padding:2px 6px;border-radius:6px} .view-row .vp-wrap .fp-list{max-height:320px;min-width:100%} .fp-item .sub{opacity:.6;font-size:11px;margin-left:6px} .fp-item.vp-none{font-style:italic;color:var(--muted);border-bottom:1px solid var(--line)} /* v8.1.0 — cascading Projop filters above the picker. Three full-width selects stacked rather than sat side by side: the sidebar is narrow and a customer name like "ΖΥΘΟΠΟΙΙΑ ΜΑΚΕΔΟΝΙΑΣ ΘΡΑΚΗΣ" needs the room. */ .pjf-bar{display:flex;flex-direction:column;gap:4px;margin:0 0 6px} .pjf-sel{width:100%;min-height:26px;font-size:12px;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:#fff} .pjf-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)} .pjf-foot a{font-size:11px} .view-actions{display:flex;gap:6px;align-items:center;margin-bottom:6px} /* v8.1.4 — Projop Brief tab: a summary strip, then labelled groups. The flat nineteen-row list it replaces gave every field the same weight, so the three things you actually check first (stage, funnel status, our budget) were buried among rooms and villas. */ .pjb-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0 10px;border-bottom:1px solid var(--line);margin-bottom:4px} .pjb-fs{font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:1px 8px} .pjb-val{margin-left:auto;font-weight:600;font-size:13.5px;color:var(--ink)} .pjb-sec{margin:0 0 2px} .pjb-sec-t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); margin:10px 0 2px;padding-bottom:3px;border-bottom:1px solid var(--line)} #side-body .pjb-sec .pj-kv{min-height:30px;padding:3px 0} #side-body .pjb-sec .pj-kv .k{font-size:11px;text-transform:none;letter-spacing:0} /* v8.1.5 — "classic" form look for the Projop panel's tabs, at Costas' request: the label is plain pale grey (no uppercase, no letter-spacing, not bold) and the VALUE sits in a white boxed field, so each row reads like a filled-in form rather than a run of text. Appended at the end of the file deliberately: the v6.4.1 block above sets .k/.v with the same specificity, and equal specificity means source order decides — the same cascade trap that caused the v4.8.4 .btn-danger bug and the v5.9.0 arrow-size regression. */ #side-body .pj-tab-panel .pj-kv, #side-body .pj-tab-panel .detail-kv{ align-items:center;border-bottom:none;padding:3px 0;column-gap:10px; } #side-body .pj-tab-panel .pj-kv .k, #side-body .pj-tab-panel .detail-kv .k{ font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted); } #side-body .pj-tab-panel .pj-kv .v, #side-body .pj-tab-panel .detail-kv .v{ background:#fff;border:1px solid var(--line);border-radius:6px; padding:5px 9px;min-height:28px;display:flex;align-items:center; font-size:13px;color:var(--ink); } /* a stacked row (Description, Notes) keeps the same white field, just full width */ #side-body .pj-tab-panel .pj-kv-stack .v{ background:#fff;display:block;padding:8px 10px;line-height:1.45; } /* a value holding only a badge or chips shouldn't get a second box around it */ #side-body .pj-tab-panel .pj-kv:has(.stance-slider) .v, #side-body .pj-tab-panel .pj-kv:has(.wt-slider) .v, #side-body .pj-tab-panel .pj-kv:has(.chip) .v{ background:transparent;border-color:transparent;padding-left:0; } /* the income pills already carry their own boxes — don't nest them in another */ #side-body .pj-tab-panel .pj-kv:has(.pj-inc) .v{background:transparent;border-color:transparent;padding-left:0;flex-wrap:wrap} /* v8.1.6 — pale grey everywhere except the value fields themselves (Costas: "pale grey everything that is not inside a form field"). The panel, the tab strip and the section headings are all transparent so the sidebar's own grey shows through; the only white surfaces in the Projop panel are the boxed values. */ #side-body, #side-body .pj-tabs, #side-body .pj-tab-panel, #side-body .pjb-sec, #side-body .pjb-top{background:transparent;} #side-body .pj-tab-panel .pj-kv .v, #side-body .pj-tab-panel .detail-kv .v, #side-body .pj-tab-panel .pj-kv-stack .v{background:#fff;} /* the funnel-status chip and the income pills read as labels, not fields — keep them grey */ #side-body .pjb-fs, #side-body .pj-inc{background:var(--bg);} /* v8.1.7 — section headings on the Brief tab read darker. At --muted they sat at the same weight as the field labels beneath them, so the groups didn't separate. */ #side-body .pjb-sec-t{color:var(--ink);font-weight:700;border-bottom-color:var(--line-strong);} /* ============================================================================ v8.4.0 — Projop panel, "Option C": folder tabs joined to a white panel sheet. Costas picked this over an underline strip and a segmented control. The active tab physically connects to the sheet below it, so there is never any doubt which tab owns what you are reading. Consequence worth understanding: the panel is now WHITE, so the value boxes inside it can no longer be white too — they move to a pale tint and keep their border, which is what still makes them read as fields. This deliberately supersedes the v8.1.5/v8.1.6 colours; appended last so it wins the cascade. ========================================================================== */ aside#side{background:#eef1f5;} #side-body .pj-tabs{ display:flex;gap:3px;align-items:flex-end;border-bottom:none;margin:0;padding:0; } #side-body .pj-tab-btn{ font-size:12.5px;line-height:1.2;padding:6px 10px;margin:0;cursor:pointer; background:#e2e7ee;border:1px solid transparent;border-bottom:none; border-radius:7px 7px 0 0;color:#5a6674;font-weight:400; } #side-body .pj-tab-btn:hover{background:#e8edf3;color:#1b2530;} #side-body .pj-tab-btn.active{ background:#fff;border-color:#dbe2ea;color:#1b2530;font-weight:500; padding:7px 11px;position:relative;z-index:2;margin-bottom:-1px; } #side-body .pj-tab-panel{ background:#fff;border:1px solid #dbe2ea;border-radius:0 8px 8px 8px; padding:12px;margin:0;position:relative;z-index:1; } /* value boxes: pale tint on the white sheet, so a field still reads as a field */ #side-body .pj-tab-panel .pj-kv .v, #side-body .pj-tab-panel .detail-kv .v, #side-body .pj-tab-panel .pj-kv-stack .v{ background:#f7f9fb;border-color:#e3e8ef; } #side-body .pjb-top{border-bottom-color:#e3e8ef;} #side-body .pjb-sec-t{border-bottom-color:#e3e8ef;} /* --- form controls inside the tabs: one look everywhere. The Info tab was using raw browser defaults for its file input and buttons, which is why it looked like a different application from the Log tab. --- */ #side-body .pj-tab-panel input[type=text], #side-body .pj-tab-panel input:not([type]), #side-body .pj-tab-panel input[type=url], #side-body .pj-tab-panel input[type=date], #side-body .pj-tab-panel input[type=number], #side-body .pj-tab-panel select, #side-body .pj-tab-panel textarea{ width:100%;box-sizing:border-box;min-height:30px;padding:5px 9px; border:1px solid #dbe2ea;border-radius:6px;background:#fff; font-size:13px;font-family:inherit;color:var(--ink); } #side-body .pj-tab-panel input:focus, #side-body .pj-tab-panel textarea:focus, #side-body .pj-tab-panel select:focus{outline:none;border-color:var(--accent);} #side-body .pj-tab-panel input[type=file]{ width:100%;box-sizing:border-box;font-size:12px;padding:5px 0;background:transparent;border:none; } #side-body .pj-tab-panel input[type=file]::file-selector-button{ font:inherit;font-size:12px;padding:5px 10px;margin-right:9px;cursor:pointer; border:1px solid #dbe2ea;border-radius:6px;background:#f7f9fb;color:var(--ink); } #side-body .pj-tab-panel input[type=file]::file-selector-button:hover{background:#eef1f5;} #side-body .pj-tab-panel .btn{min-height:30px;} #side-body .pj-tab-panel .vn-add-row{display:flex;gap:6px;align-items:center;margin-top:8px;} #side-body .pj-tab-panel .pj-tab-hint{margin:0 0 10px;} /* --- Players list: rows, not statistics --- */ #side-body .stake-rgrp.anon>.stake-rgrp-body{margin-top:0;} #side-body .stake-grp{border:1px solid #e3e8ef;border-radius:7px;overflow:hidden;margin-bottom:6px;background:#fff;} #side-body .stake-grp-h{padding:7px 9px;background:#f7f9fb;border-bottom:1px solid #eef1f5;} #side-body .stake-grp.open .stake-grp-body{border-top:none;} #side-body .stake-row.stake-pn{padding:6px 9px 6px 22px;border-bottom:1px solid #f2f5f9;} #side-body .stake-row.stake-pn:last-child{border-bottom:none;} #side-body .stake-av{width:24px;height:24px;} /* ============================ HOME (v8.8.0) ============================ Slim band, hot strip, then five cards in one row. All motion is CSS and all of it is switched off under prefers-reduced-motion at the end of this block. */ .workspace.home-solo #side, .workspace.home-solo .side-toggle{display:none;} #home-view{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);} .home-body{flex:1;overflow-y:auto;padding:14px 18px 20px;} .home-body>*{animation:homeRise .40s cubic-bezier(.2,.7,.3,1) both;} .home-body>*:nth-child(1){animation-delay:.02s;} .home-body>*:nth-child(2){animation-delay:.08s;} .home-body>*:nth-child(3){animation-delay:.14s;} @keyframes homeRise{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}} /* ---- the slim band ---- */ .home-band{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden; height:46px;padding:0 16px;margin-bottom:14px;border-radius:11px;color:#fff; background:linear-gradient(110deg,#22386a 0%,#3a63b8 62%,#4d7fd6 100%);} .home-band-t{font-size:14.5px;font-weight:700;letter-spacing:-.2px;} .home-band-d{font-size:11.5px;opacity:.74;font-weight:500;} .home-band-art{margin-left:auto;flex:0 0 auto;width:190px;height:38px;opacity:.9;} .band-edge{stroke:rgba(255,255,255,.40);stroke-width:1;animation:bandPulse 5.5s ease-in-out infinite;} .band-node{fill:rgba(255,255,255,.85);animation:bandFloat 6.5s ease-in-out infinite;} .band-n1{fill:#ffd873;} .band-n2{fill:#a8ffe4;} .band-drift{animation:bandDrift 15s ease-in-out infinite;} @keyframes bandDrift{0%,100%{transform:translate(0,0);}50%{transform:translate(-4px,2px);}} @keyframes bandFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}} @keyframes bandPulse{0%,100%{opacity:.32;}50%{opacity:.72;}} /* ---- hot strip ---- */ .home-strip{margin-bottom:16px;} .home-strip-h{display:flex;align-items:center;gap:9px;margin:0 2px 9px;} .home-strip-h h3{margin:0;font-size:14px;font-weight:700;} .home-strip-nav{margin-left:auto;display:flex;gap:6px;} .home-scroll{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--panel); cursor:pointer;font-size:16px;line-height:1;color:var(--muted);transition:background .14s,color .14s,border-color .14s;} .home-scroll:hover{background:var(--accent);border-color:var(--accent);color:#fff;} .home-strip-track{display:flex;gap:12px;overflow-x:auto;padding:3px 2px 11px; scroll-snap-type:x proximity;scrollbar-width:thin;} .home-strip-track::-webkit-scrollbar{height:8px;} .home-strip-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;} .home-hot{position:relative;flex:0 0 252px;scroll-snap-align:start; animation:homeRise .38s cubic-bezier(.2,.7,.3,1) both;} .home-hot .board-card{border-radius:12px;padding:11px 12px;border-color:#e7c96b;box-shadow:var(--shadow); transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s;} .home-hot:hover .board-card{transform:translateY(-3px);box-shadow:var(--shadow-lg);} .home-hot .board-pin{display:none;} /* the strip has its own star */ .home-hot-foot{margin-top:4px;padding-left:3px;font-size:11px;color:var(--muted);} .home-unpin{position:absolute;top:6px;right:7px;z-index:2;border:none;background:transparent;cursor:pointer; font-size:15px;line-height:1;color:#e0a800;padding:2px 4px;transition:transform .16s,color .16s;} .home-unpin:hover{transform:scale(1.18);color:var(--danger);} .home-empty-strip{background:var(--panel);border:1px dashed var(--line-strong);border-radius:12px;} /* ---- the four cards (v9.4.0 — was five; Projops Funnel moved into the Hot Projops header as a plain button, so it no longer needs its own mostly-empty card) ---- */ .home-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch;} @media (max-width:1240px){ .home-cards{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));} } .home-card{position:relative;overflow:hidden;min-height:318px; border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow); transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,border-color .16s;} .home-card:hover{border-color:var(--pc,var(--accent));box-shadow:var(--shadow-lg);} /* the abstract mark: a soft disc of the card's own colour, bleeding off the top-right corner */ .home-card::before{content:"";position:absolute;top:-52px;right:-38px;width:120px;height:120px;border-radius:50%; background:var(--pc,var(--accent));opacity:.07;pointer-events:none; transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s;} .home-card:hover::before{transform:scale(1.2);opacity:.12;} .home-card.tone-a{--pc:#3a63b8;} .home-card.tone-b{--pc:#0f8a82;} .home-card.tone-c{--pc:#7a5cc4;} .home-card.tone-d{--pc:#189a55;} .home-card.tone-e{--pc:#d23b3b;} .home-card.tone-f{--pc:#c4761f;} .home-card-ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center; border-radius:10px;background:color-mix(in srgb,var(--pc) 13%,#fff);color:var(--pc);} .home-card-ic svg{width:19px;height:19px;} .home-card-t{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25;} .home-card-s{font-size:11.5px;color:var(--muted);line-height:1.5;} /* EVERY card — navigation or panel — is a column whose first child is this header row. That is what keeps all five titles on one line (v8.8.1). min-height fixes the row height so a two-line title cannot shift the card next to it. */ .home-card{display:flex;flex-direction:column;} .home-card-h{position:relative;display:flex;align-items:center;gap:10px;padding:11px 13px; min-height:58px;box-sizing:border-box;border-bottom:1px solid var(--line);} .home-card-hr{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto;} .home-card-n{font-size:19px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--pc); font-variant-numeric:tabular-nums;} .home-card-add{width:26px;height:26px;border-radius:8px;border:1px solid var(--line); background:var(--panel);color:var(--pc);font-size:16px;line-height:1;cursor:pointer; transition:background .14s,color .14s,border-color .14s;} .home-card-add:hover{background:var(--pc);border-color:var(--pc);color:#fff;} /* v10.5.0 — Today's explicit "View all actions →" label (openTodayView(), js/reports.js). Sits inside the same clickable .home-card-h header as the count, so no click handler of its own is needed — just a visible affordance, not a plain number like .home-card-n. */ .home-card-viewall{font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap;} .home-card-b{position:relative;flex:1;overflow-y:auto;padding:6px;scrollbar-width:thin;} .home-card-b::-webkit-scrollbar{width:8px;} .home-card-b::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;} /* v9.4.0: .home-card-nav (the old "whole card is a button" nav-card variant) is gone — every card on Home is a .home-card-panel now, Projops Funnel having moved into a plain button in the Hot Projops header (homeHotHtml()) and Projops Management having become a list card. */ /* ---- rows shared by the four panels ---- */ .home-empty{padding:14px 10px;font-size:12px;color:var(--muted);line-height:1.6;} .home-empty a{color:var(--accent);} .home-row{display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:9px;cursor:pointer; border:1px solid transparent;transition:background .13s,border-color .13s,transform .13s;} .home-row:hover{background:#f7f9fb;border-color:var(--line);transform:translateX(2px);} .home-row-main{flex:1;min-width:0;} .home-row-t{font-size:12.5px;color:var(--ink);line-height:1.45;} .home-row-s{margin-top:2px;font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:5px;align-items:center;} .home-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .home-act-check{margin-top:2px;flex:0 0 auto;} .home-od{color:var(--danger);font-weight:600;} .home-td{color:var(--accent);font-weight:600;} .home-src{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 6px;color:var(--ink);font-weight:600;} .home-hotdot{color:#e0a800;} .home-n{font-size:11px;color:var(--muted);background:var(--bg);border-radius:10px;padding:1px 8px;font-weight:600;} /* the pin star on a board card (board view) */ .board-card{position:relative;} .board-pin{position:absolute;top:5px;right:5px;border:none;background:transparent;cursor:pointer; font-size:15px;line-height:1;padding:2px 4px;color:var(--line-strong);transition:transform .16s,color .16s;} .board-pin:hover{color:#e0a800;transform:scale(1.18);} .board-pin.on{color:#e0a800;} .board-card.pinned{border-color:#e7c96b;} .board-card-name{padding-right:22px;} #pj-pin.on{border-color:#e0a800;color:#8a6a00;} @media (prefers-reduced-motion: reduce){ .home-body>*,.home-hot{animation:none;} .band-drift,.band-node,.band-edge{animation:none;} .home-card,.home-card::before,.home-row,.home-hot .board-card{transition:none;} .home-hot:hover .board-card,.home-row:hover{transform:none;} } /* v8.9.0 — a homeGoWhenReady() button waiting for the background load. Only the plain "Projops Funnel" button in the Hot Projops header uses this now (v9.4.0); it was originally written for the two now-gone .home-card-nav tiles. */ .is-loading{cursor:progress;opacity:.72;} /* v9.0.0 — AI research review: the news list */ .ai-news-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:6px;background:var(--panel);} .ai-news-row{display:flex;gap:9px;align-items:flex-start;padding:7px 8px;border-radius:7px;cursor:pointer;} .ai-news-row:hover{background:var(--bg);} .ai-news-row input{margin-top:3px;flex:0 0 auto;} .ai-news-b{display:flex;flex-direction:column;gap:2px;min-width:0;} .ai-news-t{font-size:12.5px;font-weight:600;color:var(--ink);} .ai-news-n{font-size:11.5px;color:var(--muted);} .ai-news-u{font-size:11px;color:var(--accent);word-break:break-all;} /* ---- v9.0.1: stage colour on the Kanban columns ---- Header solid in the stage colour, body a light mix of the same one, cards left white so they still read as objects sitting on the column. Appended last so it wins over the original .board-col-h / .board-col-body rules at equal specificity — the cascade discipline this file has used since v4.8.4. */ .board-col{ background:color-mix(in srgb, var(--pc, var(--line-strong)) 8%, #fff); border-color:color-mix(in srgb, var(--pc, var(--line-strong)) 26%, #fff); } .board-col-h{ background:var(--pc, var(--line-strong)); border-bottom:none; padding:10px 12px; } .board-col-h .board-col-t{color:#fff;letter-spacing:.01em;} .board-col-h .board-col-n{ color:#fff;background:rgba(255,255,255,.22);font-weight:700; } .board-col-body{background:transparent;} .board-col-empty{color:color-mix(in srgb, var(--pc, var(--muted)) 62%, var(--muted));} /* v9.1.0 — the guide link on the Home band */ .home-band-help{margin-left:14px;font-size:11.5px;color:#fff;opacity:.85;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5);} .home-band-help:hover{opacity:1;} /* ---- v9.2.0 ---- */ /* the sidebar forced visible while a Projop panel is open (does not touch the saved preference) */ main.workspace.side-collapsed.side-force-open aside#side{width:360px;flex-basis:360px;min-width:0;border-right:1px solid var(--line);} main.workspace.side-collapsed.side-force-open .side-toggle{transform:translateY(-50%);} /* v9.3.1 — hot strip cards all the same height, whatever their content */ .home-strip-track{align-items:stretch;} .home-hot{display:flex;flex-direction:column;} .home-hot .board-card{flex:1;display:flex;flex-direction:column;} .home-hot .board-card-note{margin-top:auto;} /* v9.3.2 — Home dashboard fonts nudged up a size across the board: the hot strip cards, the five-card row's titles/counts, and the row lists inside them (log notes, market info, due actions). Appended last so it wins over the v8.x declarations above at equal specificity — the same "re-assert at the end of the file" rule this file has used since the v4.8.4 fix. */ .home-band-t{font-size:15.5px;} .home-band-d{font-size:12.5px;} .home-strip-h h3{font-size:15px;} .home-hot-foot{font-size:12px;} .home-hot .board-card-name{font-size:14px;} .home-hot .board-card-ref, .home-hot .board-card-fs, .home-hot .board-card-meta, .home-hot .board-chip{font-size:12px;} .home-hot .board-card-budget{font-size:13px;} .home-hot .board-card-note{font-size:12.5px;} .home-hot .board-card-notecount{font-size:11.5px;} .home-card-t{font-size:14px;} .home-card-s{font-size:12.5px;} .home-card-n{font-size:20px;} .home-empty{font-size:13px;} .home-row-t{font-size:13.5px;} .home-row-s{font-size:12px;} .home-n{font-size:12px;} /* v9.4.0 — Actions Due split into three urgency groups (High/Medium/Low, derived purely from next_step_date since activities carries no priority column of its own — see the comment on homeActUrgency() in js/reports.js). Each group is just a small uppercase label + count above its own run of .home-row rows; an empty group renders nothing at all. */ .home-urg-grp{margin-bottom:6px;} .home-urg-grp:last-child{margin-bottom:0;} .home-urg-h{display:flex;align-items:center;gap:6px;padding:6px 9px 3px; font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);} .home-urg-h .home-n{margin-left:auto;} .home-urg-high .home-urg-h{color:var(--danger);} .home-urg-med .home-urg-h{color:#c4761f;} .home-urg-low .home-urg-h{color:var(--muted);} /* Projops Management's rows need nothing beyond the shared .home-row/.home-row-t/.home-row-s look — no new class required. */ /* ---------------- v9.7.0: top bar tidy-up ---------------- The four mutually exclusive main views (Home / Canvas / Board / Archive) render as ONE segmented control rather than four loose buttons, so a "place you can go" no longer looks identical to a canvas TOOL sitting beside it. Appended at the end of the file, same last-wins-the-cascade convention every other override pass in this project uses. */ .view-switch{display:inline-flex;align-items:center;gap:2px;background:var(--bg); border:1px solid var(--line);border-radius:9px;padding:2px;} .vs-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent; background:transparent;border-radius:7px;padding:0 10px;min-height:30px; font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;cursor:pointer; transition:background .12s,color .12s,border-color .12s;} .vs-btn .bi{width:15px;height:15px;flex:0 0 auto;} .vs-btn:hover{color:var(--ink);background:#e8edf3;} /* the active view: raised to look like the one surface you are standing on */ .vs-btn.on{background:var(--panel);border-color:var(--line-strong);color:var(--ink); font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.06);} .vs-btn.on:hover{background:var(--panel);} .vs-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-color:var(--accent);} /* the account overflow: icon-only, so it needs its own square-ish footprint */ #menu-more-btn{padding:0 9px;} #menu-more-btn .bi{margin:0;} /* the signed-in email reads as a heading for the menu, not a clickable row */ .drop-who{padding:6px 10px 8px;font-size:12px;color:var(--muted); border-bottom:1px solid var(--line);margin-bottom:4px;word-break:break-all;} /* ---------------- v9.9.1: the Home strip's tabs ---------------- "Hot Projops" / "My Projops" replace the plain

in the strip header. Styled as a segmented control rather than underlined tabs, so it reads as the same KIND of control as the top bar's view switcher (v9.7.0) — both are "pick one of these" — without being confusable with it: smaller, inside a card, and carrying counts. Appended at the end of the file, the same last-wins-the-cascade convention as every other override pass here. */ .home-tabs{display:inline-flex;align-items:center;gap:2px;background:var(--bg); border:1px solid var(--line);border-radius:9px;padding:2px;} .home-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent; background:transparent;border-radius:7px;padding:5px 11px;font-size:13px;font-weight:600; color:var(--muted);white-space:nowrap;cursor:pointer; transition:background .12s,color .12s,border-color .12s;} .home-tab:hover{color:var(--ink);background:#e8edf3;} .home-tab.on{background:var(--panel);border-color:var(--line-strong);color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.06);} .home-tab.on:hover{background:var(--panel);} .home-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft);border-color:var(--accent);} /* the count pill sits inside the tab now, so it must not also carry the header's own margin */ .home-tab .home-n{margin:0;} /* the nav buttons stay hard right whichever tab is showing */ .home-strip-h .home-strip-nav{margin-left:auto;} /* ---------------- v9.9.2: the "Mine" toggle ---------------- Sits beside the hot star on a board card. A filled dot rather than a second star, so the two read as different questions at a glance — "is this hot?" and "am I on it?" — and never as two of the same control. Deliberately quieter than the star: hot is a priority signal, mine is a fact about who is on the deal. */ .board-mine{position:absolute;top:5px;right:26px;border:none;background:transparent;cursor:pointer; font-size:13px;line-height:1;padding:2px;color:var(--line-strong); transition:color .12s,transform .12s;} .board-mine:hover{color:var(--accent);transform:scale(1.18);} .board-mine.on{color:var(--accent);} /* the strip carries its own corner control, same as it does for the star */ .home-hot .board-mine{display:none;} .home-unmine{color:var(--accent);} /* the panel button, matching the Hot button's own on-state */ #pj-mine.on{border-color:var(--accent);color:var(--accent);} /* v9.9.3: voice notes — the recorder inside the central "+ Add note" picker, and the Play button a recorded/saved clip renders as in the Info tab and the Log tab's per-Projop rows. */ .voice-rec-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;} .voice-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;} /* v9.9.4: these were #an-voice-preview/#an-voice-rec (id-scoped to the Contact picker only) until voiceRecorderHtml() became a shared widget (Projop Log tab, Actions tab too) — class selectors now, so every recorder instance gets the same look regardless of its id prefix. */ .voice-preview{display:block;width:100%;margin-bottom:6px;} .voice-rec-btn{color:var(--danger);border-color:var(--danger);} .voice-rec-btn:hover{background:var(--danger-soft);} .voice-play-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;color:var(--ink);font-size:12.5px;padding:3px 9px;cursor:pointer;} .voice-play-btn:hover{border-color:var(--accent);color:var(--accent);} /* v9.9.5: legibility pass on the Projop panel — Costas: fonts/UI reading too small. Tab labels were 12.5px, action-row buttons (Report/Map/Research/Tidy/Edit/Delete etc, all .btn-sm inside .detail-actions) were 13px/29px-tall. Bumped a notch; appended last so it wins the cascade, same discipline every other override pass in this file has used. Scoped to the sidebar panel specifically, not every .btn-sm app-wide (toolbar/modal buttons are a different context and weren't part of this complaint). */ #side-body .pj-tab-btn{font-size:14px;padding:8px 12px;} #side-body .pj-tab-btn.active{padding:9px 13px;} #side-body .detail-actions .btn-sm{min-height:32px;padding:0 12px;font-size:14px;} /* v10.2.0/v10.3.0: Home's Market info AND "New log notes" cards, both grouped by Projop — one header per Projop (its own name, not a generic type badge) instead of repeating it on every row. Shared rules: the two card's groups look identical on purpose. */ .home-mkt-grp,.home-note-grp{margin-bottom:4px;} .home-mkt-grp-h,.home-note-grp-h{display:flex;align-items:center;gap:5px;margin:10px 9px 2px;font-size:11px; font-weight:700;color:var(--pc);text-transform:uppercase;letter-spacing:.02em;} .home-mkt-grp:first-child .home-mkt-grp-h,.home-note-grp:first-child .home-note-grp-h{margin-top:4px;} /* The "Actions Due" card header now opens the full Due page (openDueView) — needs to read as clickable like the rest of Home's interactive rows. */ #home-card-due .home-card-h{cursor:pointer;} #home-card-due .home-card-h:hover{background:#f7f9fb;} /* ===================== TODAY (v10.6.0) ===================== V11 P0 Task 2. Today deliberately does NOT look like Home: Home is a grid of four fixed-height panel cards you read, Today is a stack of full-width bands you work, and every row ends in a primary verb button (.today-do). Reuses .home-row / .home-row-t / .home-row-s / .home-urg-grp / .home-empty / .home-n / .board-card verbatim — none of those are scoped to the Home cards, and reusing them is what keeps a row looking like a row everywhere in this app. Appended last, same discipline every other override pass in this file uses; nothing above was edited. */ .today-head{display:flex;align-items:flex-start;gap:12px;margin:0 2px 12px;} .today-head-l{min-width:0;} .today-head .board-title{margin:0;} .today-sub{margin-top:3px;font-size:12px;color:var(--muted);} .today-head .board-canvas-link{margin-left:auto;flex:0 0 auto;padding-top:4px;} /* No "Me" contact set — Today cannot tell which work is yours, so it says so instead of silently rendering three empty bands and looking broken. */ .today-nome{margin:0 2px 12px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:10px; background:var(--panel);font-size:12px;color:var(--muted);line-height:1.6;} .today-band{margin:0 2px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel); overflow:hidden;box-shadow:var(--shadow);} .today-band-h{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);} .today-band-t{font-size:13px;font-weight:700;color:var(--ink);} .today-band-b{padding:6px;max-height:420px;overflow-y:auto;scrollbar-width:thin;} .today-band-b::-webkit-scrollbar{width:8px;} .today-band-b::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;} /* People to Contact and My Signals sit side by side; they collapse to one column on a narrow window rather than squeezing two unreadable lists. */ .today-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;} @media (max-width:1000px){ .today-cols{grid-template-columns:1fr;} } /* The verb button. This is the visible difference from Home's read-only Actions card, so it has to look like something you press, not like a chip. */ .today-row{align-items:center;} .today-do{flex:0 0 auto;align-self:center;border:1px solid var(--line-strong);background:var(--panel); color:var(--ink);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer; white-space:nowrap;transition:background .13s,border-color .13s,color .13s;} .today-do:hover{background:var(--accent);border-color:var(--accent);color:#fff;} .today-row:hover{transform:none;} /* the button is the affordance here, not a row nudge */ /* The two scope sub-groups inside each due bucket — "On my Projops" / "Not on a Projop". Deliberately quieter than the bucket heading above them: the deadline is the primary grouping, ownership is the secondary one. */ .today-scope{margin:0 0 2px;} .today-scope-h{display:flex;align-items:center;gap:6px;padding:3px 9px 2px;font-size:10.5px; font-weight:600;color:var(--muted);opacity:.85;} .today-scope-h .home-n{margin-left:auto;} .today-urg-gap .home-urg-h{color:#7a5cc4;} /* The honest footnote: open actions that sit on Projops you are not on are counted, not shown — Today is a personal screen, and hiding them silently would make it under-report. */ .today-elsewhere{padding:8px 10px 4px;font-size:11px;color:var(--muted);line-height:1.6;} .today-elsewhere a{color:var(--accent);} /* My Opportunities: the SAME boardCardHtml() card as the Pipeline, Archive and Home strip. The only Today-specific thing is the footer; the card markup itself is untouched. No age line and no stale badge — nothing on Today judges a Projop's relevance (see js/reports.js). */ .today-opps-track{display:flex;gap:12px;overflow-x:auto;padding:3px 4px 10px;scroll-snap-type:x proximity;} .today-opps-track::-webkit-scrollbar{height:8px;} .today-opps-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;} .today-opp{position:relative;flex:0 0 252px;scroll-snap-align:start;} .today-opp .board-card{border-radius:12px;padding:11px 12px;} .today-opp-foot{margin-top:4px;padding-left:3px;font-size:11px;font-weight:600;color:#7a5cc4;}