/* -------- ADAM AI DASHBOARD - MAIN STYLESHEET Edit this file to change colours, layout, typography. -------- */ :root { /* -- Total Group Brand Palette -- */ --navy:#002B49; --navy2:#003d6b; --navy3:#002540; --yellow:#FDC52C; --yellowd:#e6ae1e; --sky:#A5BACA; --skyl:#d4e2ec; --grey:#70787D; --teal:#075D67; --teal2:#0a7a87; --white:#ffffff; /* -- Semantic colours - pastel traffic-light + brand -- */ /* h1 = good/active: pastel sage green */ --h1:#4CAF7D; --h1bg:rgba(76,175,125,0.12); --h1border:rgba(76,175,125,0.4); /* h2 = info/secondary: Sky-derived mid-blue */ --h2:#4A8FA8; --h2bg:rgba(74,143,168,0.12); --h2border:rgba(74,143,168,0.45); /* h3 = review/warning: pastel amber-orange */ --h3:#E8924A; --h3bg:rgba(232,146,74,0.12); --h3border:rgba(232,146,74,0.4); /* h4 = error/danger: pastel rose-red */ --h4:#D95F5F; --h4bg:rgba(217,95,95,0.12); --h4border:rgba(217,95,95,0.4); } /* ═══════════════════════════════════════════════════════════════════════════ DESIGN RULE: CONTRAST & READABILITY — enforced 2026-04-22 ───────────────────────────────────────────────────────────────────────── NEVER use --sky (#A5BACA) as text colour on dark navy backgrounds for: • Table column headers (th) • Section labels • Body text ≤14px • Sub-navigation button labels USE INSTEAD: • rgba(255,255,255,0.88) → primary headers, th elements • rgba(255,255,255,0.75) → secondary / helper text • var(--yellow) #FDC52C → interactive / highlighted labels --sky is reserved for: borders, dividers, backgrounds ONLY. ═══════════════════════════════════════════════════════════════════════════ */ *{margin:0;padding:0;box-sizing:border-box;} /* overflow-x:hidden can make overflow-y compute to auto and break position:fixed for sub-navs; clip avoids that */ body{font-family:'Barlow',sans-serif;background:var(--navy3);color:var(--white);min-height:100vh;overflow-x:clip;padding-bottom:44px;font-size:13px;line-height:1.45;} /* ── Readability floor (added 2026-04-26) ──────────────────────────────── The dashboard had a lot of 9-10-11px inline styles. We've bumped them all by +2px in HTML/JS files, and this rule catches anything new or any element class explicitly set to a tiny size. */ .tiny-text-floor, .stat-sub, .stat-label { font-size: 12px !important; } /* -- HEADER -- */ header{background:var(--navy);border-bottom:3px solid var(--yellow);padding:0 28px;height:80px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:0 2px 20px rgba(0,0,0,0.4);} .hdr-logo{display:flex;align-items:center;justify-content:flex-start;gap:12px;cursor:pointer;flex-shrink:0;z-index:1;} .hdr-logo img{transition:opacity 0.2s;}.hdr-logo:hover img{opacity:0.8;} .hdr-centre{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;} .hdr-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,3.5vw,41px);font-weight:700;color:var(--white);letter-spacing:4px;text-transform:uppercase;text-align:center;white-space:nowrap;line-height:1;} .hdr-right{display:flex;flex-direction:row;align-items:center;gap:12px;justify-content:flex-end;flex-shrink:0;z-index:1;} /* -- Header buttons - Chat and Logoff, matched size -- */ .hdr-btn-chat,.hdr-btn-signout{ display:inline-flex;align-items:center;justify-content:center;gap:5px; height:26px;width:90px; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase; border-radius:6px;cursor:pointer;transition:all 0.2s;white-space:nowrap;border:none; } .hdr-btn-chat{background:var(--yellow);color:var(--navy);} .hdr-btn-chat:hover{background:var(--yellowd);transform:translateY(-1px);box-shadow:0 4px 12px rgba(253,197,44,0.35);} .hdr-btn-signout{background:var(--white);color:var(--navy);border:none;} .hdr-btn-signout:hover{background:rgba(255,255,255,0.88);transform:translateY(-1px);} .hdr-signout-icon{font-size:13px;line-height:1;} /* Legacy hdr-btn kept for any other uses */ #hdr-user-block{display:none;} #clock{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--yellow);letter-spacing:2px;white-space:nowrap;text-align:right;} .hdr-btn{background:var(--yellow);color:var(--navy);border:none;border-radius:6px;padding:8px 0;width:112px;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.2s;letter-spacing:1px;text-transform:uppercase;} .hdr-btn:hover{background:var(--yellowd);transform:translateY(-1px);} .hdr-btn.secondary{background:transparent;color:rgba(255,255,255,0.78);border:1px solid rgba(165,186,202,0.4);font-size:13px;padding:7px 0;width:112px;text-align:center;} .hdr-btn.secondary:hover{background:rgba(165,186,202,0.1);color:var(--white);} /* -- SALES & SUPPLY -- */ .sales-tab-btn{background:rgba(165,186,202,0.08);border:1px solid rgba(165,186,202,0.15);color:rgba(255,255,255,0.75);border-radius:6px;padding:6px 14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.5px;cursor:pointer;transition:all 0.2s;} .sales-tab-btn.active{background:rgba(253,197,44,0.15);border-color:rgba(253,197,44,0.4);color:var(--yellow);} .sales-tab-btn:hover:not(.active){color:var(--white);background:rgba(165,186,202,0.15);} .su-th{text-align:left;padding:7px 10px;font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.88);white-space:nowrap;} .modal-label{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.78);margin-bottom:4px;font-family:'Barlow Condensed',sans-serif;font-weight:700;} .modal-input{width:100%;background:var(--navy2);border:1px solid rgba(165,186,202,0.2);border-radius:6px;color:var(--white);padding:7px 10px;font-family:'Barlow',sans-serif;font-size:14px;outline:none;box-sizing:border-box;} .modal-input:focus{border-color:rgba(253,197,44,0.5);} /* -- FOOTER (bottom sticky) -- */ footer{ background:var(--navy); border-top:2px solid rgba(165,186,202,0.12); padding:0 20px; height:44px; display:flex; align-items:center; justify-content:space-between; font-family:'Barlow Condensed',sans-serif; font-size:12px; color:rgba(165,186,202,0.35); letter-spacing:0.5px; position:fixed; bottom:0; left:0; right:0; width:100%; z-index:100; } .footer-brand-centre { position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; pointer-events:none; font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:600; color:var(--white); letter-spacing:1px; } .footer-brand-centre a { font-size:16px; pointer-events:all; } .footer-left { display:flex; align-items:center; flex-shrink:0; z-index:1; } .footer-right { display:flex; align-items:center; gap:8px; flex-shrink:0; z-index:1; margin-left:auto; } /* -- OLD NAV (kept for any legacy refs) -- */ .nav-rows{display:none;} .nav-tabs{display:none;} .nav-tab{} /* -- MEGA-NAV -------- One horizontal bar of group labels. Each group reveals a dropdown on hover. -------- */ /* Wraps
+ #mega-nav so mouseleave isn’t fired when moving between them */ .app-top-chrome { position: relative; /* Must sit ABOVE every sticky page-header (140) / sub-nav (300) / mega-nav (400) so nav dropdowns are ALWAYS in front of page content, site-wide. This wrapper forms a stacking context, so its children's z-index only compete inside it — the wrapper's own value is what ranks against page content. */ z-index: 500; } .mega-nav { background: var(--navy); border-bottom: 2px solid rgba(165,186,202,0.12); display: flex; align-items: stretch; padding: 0 20px; position: sticky; top: 80px; /* sits just below the 80px header */ z-index: 400; /* ABOVE sub-nav (300) so main nav always accessible */ box-shadow: 0 2px 12px rgba(0,0,0,0.3); } /* -- User + clock block pinned to far right of nav bar -- */ .mg-user-block { margin-left: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px 0 16px; gap: 1px; flex-shrink: 0; border-left: 1px solid rgba(165,186,202,0.1); min-width: 110px; } .nav-clock { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; color: var(--yellow); letter-spacing: 2px; line-height: 1.1; white-space: nowrap; text-align: center; width: 100%; } .nav-user-name { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 0.5px; white-space: nowrap; text-align: center; width: 100%; } /* -- Each top-level group wrapper -- */ .mg-group { position: relative; display: flex; align-items: stretch; } /* Clock/user block can make .mega-nav taller than 48px; without this, .mg-group stretches vertically and invisible areas below the label still hit-test as the group — triggering mega hover + Sales sticky restore. Keep each group box to one button row only. */ .mega-nav > .mg-group { align-self: center; height: 48px; min-height: 48px; } /* -- The visible top-level button -- */ .mg-top-btn { display: flex; align-items: center; gap: 7px; padding: 0 22px; height: 48px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.78); cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; user-select: none; } .mg-top-btn:hover { color: var(--white); background: rgba(165,186,202,0.06); } /* Active group (currently selected section) */ .mg-group.active .mg-top-btn { color: var(--yellow); border-bottom-color: var(--yellow); } /* Open on hover */ .mg-group.open .mg-top-btn { color: var(--white); background: rgba(0,0,0,0.25); border-bottom-color: rgba(165,186,202,0.3); } /* -- Dropdown panel -- */ .mg-dropdown { display: none; position: absolute; top: 100%; margin-top: -2px; left: 0; min-width: 200px; background: #141d2b; border: 1px solid rgba(165,186,202,0.15); border-top: 2px solid #0e9aab; border-radius: 0 0 10px 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 500; /* above mega-nav (400) and sub-nav (300) */ padding: 6px 0; animation: mgFadeIn 0.12s ease; } .mg-group.open .mg-dropdown { display: block; } @keyframes mgFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* -- Each dropdown item -- */ .mg-drop-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.78); cursor: pointer; transition: background 0.12s, color 0.12s; white-space: nowrap; } .mg-drop-item:hover { background: rgba(14,154,171,0.08); color: #0e9aab; padding-left: 26px; } /* -- Coming soon placeholder item -- */ .mg-drop-coming { padding: 12px 20px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(165,186,202,0.35); font-style: italic; } .mg-drop-sep { height: 1px; background: rgba(165,186,202,0.1); margin: 4px 12px; } .mg-drop-redirect { color: rgba(226,232,240,0.45) !important; font-style: italic; } .mg-drop-redirect:hover { color: var(--teal) !important; background: rgba(7,93,103,0.12) !important; } /* SUB-NAV BAR — position:sticky below header+mega (128px). In-flow under #mega-nav so fixed-containing-block bugs cannot float the bar over page content. Pages like EOS and Paid Ads get a second persistent nav bar. Mega-nav is 48px tall, sits at top:80px → sub-nav top = 80+48 = 128px; level 3/4 rows top:166px. -------- */ .sub-nav { display: none; /* hidden by default; shown by JS when relevant page is active */ background: var(--navy2); border-bottom: 2px solid var(--teal); padding: 0 20px; align-items: stretch; gap: 2px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); flex-wrap: nowrap; overflow-x: auto; } .sub-nav.visible { display: flex !important; position: sticky !important; left: 0 !important; right: 0 !important; top: 128px !important; width: 100% !important; box-sizing: border-box !important; justify-content: flex-start !important; /* 2026-05-12: defensive — keep sub-nav buttons anchored left, prevent any inherited centering */ z-index: 300 !important; /* BELOW mega-nav (400) so main nav items are always clickable */ } .sub-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; height: 38px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.78); cursor: pointer; border: none; background: transparent; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; flex-shrink: 0; } .sub-nav-btn:hover { color: var(--white); background: rgba(255,255,255,0.05); } .sub-nav-btn.active { color: var(--yellow); border-bottom-color: var(--yellow); } /* Period pills in sub-nav (used by Paid Ads) */ .sub-nav-pills { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 0 6px; } .sub-nav-pill { border: 1px solid rgba(165,186,202,0.25); background: transparent; color: var(--muted); border-radius: 10px; padding: 2px 10px; font-size: 13px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s; } .sub-nav-pill:hover, .sub-nav-pill.active { background: var(--teal); border-color: var(--teal); color: #fff; } /* Right-side actions in sub-nav */ .sub-nav-actions { display: flex; align-items: center; gap: 6px; padding: 0 4px; flex-shrink: 0; } /* -- SUB-NAV LEVEL 3 - sits directly below level 2 -------- Used when a page is a sub-page of a sub-nav item. e.g. EOS Guidance sits under EOS: level 2 = EOS bar, level 3 = EOS Guidance bar. Level 3 top = 128px (level 2) + 40px (level 2 height) = 168px. Slightly darker bg + teal2 border to visually distinguish from level 2. -- */ /* Must tie .sub-nav.visible (0,2,0) or later rule loses top:128px vs top:166px */ .sub-nav.sub-nav-3 { position: sticky !important; top: 166px !important; background: var(--navy3) !important; border-bottom-color: var(--teal2) !important; z-index: 184 !important; } /* Only the Xero analytics row (no Customers bar) — align with other sub-navs at 128px; avoids a blank band under mega + hover glitches */ .sub-nav.sub-nav-3.sub-nav-revenue-alone { top: 128px !important; } .sub-nav.sub-nav-3 .sub-nav-btn { font-size: 12px !important; letter-spacing: 1px !important; height: 34px !important; } .sub-nav.sub-nav-3 .sub-nav-btn.active { color: var(--teal2) !important; border-bottom-color: var(--teal2) !important; } /* Level 4 — Internet drill-down below sole Products sub-nav (128px + ~38px) */ .sub-nav.sub-nav-4 { position: sticky !important; top: 166px !important; background: var(--navy3) !important; border-bottom-color: var(--teal2) !important; z-index: 183 !important; } .sub-nav.sub-nav-4 .sub-nav-btn { font-size: 12px !important; letter-spacing: 1px !important; height: 34px !important; } .sub-nav.sub-nav-4 .sub-nav-btn.active { color: var(--yellow) !important; border-bottom-color: var(--yellow) !important; } /* Sub-navs are in-flow (sticky); no extra top padding needed. */ #pages-container { padding-top: 0; min-height: calc(100vh - 220px); /* fills screen so footer stays at bottom on sparse pages */ } .mg-drop-sub { padding-left: 32px !important; font-size: 13px !important; letter-spacing: 1px !important; color: rgba(165,186,202,0.6) !important; } .mg-drop-sub:hover { padding-left: 36px !important; color: var(--yellow) !important; } /* -- Footer buttons -- */ .footer-admin-btn { background: var(--white); border: 2px solid var(--white); color: var(--navy); border-radius: 6px; height: 26px; width: 90px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .footer-admin-btn:hover { background: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.88); color: var(--navy); } .footer-chat-btn { background: var(--yellow); border: none; color: var(--navy); border-radius: 6px; height: 26px; width: 90px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .footer-chat-btn:hover { background: var(--yellowd); transform: translateY(-1px); } .footer-help-btn { background: var(--white); border: none; color: var(--navy); border-radius: 6px; height: 26px; width: 90px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .footer-help-btn:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); } /* -- Voice page -------- */ .voice-dept-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px;} .voice-dept-card{background:rgba(165,186,202,0.04);border:1px solid rgba(165,186,202,0.12);border-radius:10px;overflow:hidden;} .voice-dept-hdr{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(165,186,202,0.08);} .voice-dept-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;} .voice-dept-badge{font-size:13px;padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:0.5px;} .voice-call-row{display:grid;grid-template-columns:36px 1fr 80px 60px 60px;gap:6px;align-items:center;padding:7px 12px;border-bottom:1px solid rgba(165,186,202,0.05);cursor:pointer;transition:background 0.15s;} .voice-call-row:hover{background:rgba(165,186,202,0.05);} .voice-call-row:last-child{border-bottom:none;} .call-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .call-name{font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .call-company{font-size:13px;color:rgba(255,255,255,0.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .call-time{font-size:13px;color:rgba(165,186,202,0.45);text-align:right;} .call-dur{font-size:13px;color:rgba(165,186,202,0.4);text-align:right;} .call-outcome{font-size:12px;padding:2px 6px;border-radius:8px;text-align:center;font-weight:700;letter-spacing:0.3px;} .voice-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px;} .voice-stat-mini{text-align:center;} .voice-stat-mini .vsm-val{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;line-height:1.1;} .voice-stat-mini .vsm-lbl{font-size:12px;text-transform:uppercase;letter-spacing:0.8px;color:rgba(165,186,202,0.4);margin-top:2px;} /* transcript panel */ .transcript-overlay{display:none;position:fixed;inset:0;background:rgba(0,17,34,0.85);z-index:2000;align-items:center;justify-content:center;} .transcript-overlay.open{display:flex;} .transcript-modal{background:#0a1628;border:1px solid rgba(165,186,202,0.2);border-radius:12px;width:760px;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;} /* am-tab reuse for transcript tabs */ #tr-tabs .am-tab{background:rgba(165,186,202,0.06);border:1px solid rgba(165,186,202,0.12);color: rgba(255,255,255,0.78);border-radius:6px;padding:5px 12px;font-size:14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.5px;cursor:pointer;text-transform:uppercase;} #tr-tabs .am-tab.am-tab-active{background:rgba(253,197,44,0.15);border-color:rgba(253,197,44,0.35);color:#FDC52C;} .transcript-hdr{padding:16px 20px;border-bottom:1px solid rgba(165,186,202,0.1);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;} .transcript-body{padding:16px 20px;overflow-y:auto;flex:1;} .transcript-line{display:flex;gap:10px;margin-bottom:12px;} .tl-speaker{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;min-width:48px;padding-top:2px;} .tl-bubble{background:rgba(165,186,202,0.07);border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.6;color:#c8d8e4;flex:1;} .tl-bubble.agent{background:rgba(96,165,250,0.08);border:1px solid rgba(96,165,250,0.15);} .tl-bubble.caller{background:rgba(165,186,202,0.06);border:1px solid rgba(165,186,202,0.12);} /* Placeholder tabs for Xero/Jobs/Campaigns */ .coming-soon-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;gap:12px;} .coming-soon-page .cs-icon{font-size:48px;margin-bottom:8px;} .coming-soon-page .cs-title{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;letter-spacing:2px;color:var(--white);} .coming-soon-page .cs-sub{font-size:13px;color:rgba(255,255,255,0.78);max-width:400px;text-align:center;line-height:1.7;} /* -- MAIN -- */ /* Every page always reserves the sub-nav slot (38px) as padding-top. This means with OR without a sub-nav bar the title lands at the same spot. Sub-nav height = 38px. When sub-nav IS visible it sits above the content as a sticky bar - the page content is naturally pushed down by it. 2026-05-20: unified to 16px regardless of sub-nav presence so pages without a sub-nav (Home, Quotes, etc.) line up with pages that have one (Leads, Customers, etc.). The sub-nav row, when visible, sits in its own space below the mega-nav so no extra .main padding is needed for it. */ .main{padding:16px 28px 22px;max-width:1700px;margin:0 auto;} /* Kept for backwards compat — no longer adjusts padding-top but other rules may key off the class. JS adds/removes body class 'has-sub-nav' via showSubNav(). */ body.has-sub-nav .main { padding-top: 16px; } .page{display:none;} /* 2026-05-26 — PAGE LAYOUT CONTRACT (do not remove): Every page loaded into #pages-container is wrapped in
. We constrain THAT wrapper to 1700px and auto-centre it so every page is centred the same way — regardless of whether the page's HTML file uses an inner
or not. Pages that DO use .main inside still work; the centring just becomes a no-op (both wrappers cap at 1700). This makes the layout the framework's job rather than each page's. See CLAUDE.md > PAGE LAYOUT. */ .page.active{display:block;padding:0 20px 40px 20px;min-height:calc(100vh - 220px);max-width:1700px;margin:0 auto;} /* -- Pages that manage their own side padding - reset the .page.active padding -- */ /* Social Hub has #page-social-inner with its own padding */ #page-social{padding-left:0;padding-right:0;} /* Leads is built dynamically with its own padding */ #page-leads{padding-left:0;padding-right:0;} /* Telesales has floating overlay panels - keep overlay breakout working */ #page-telesales.page{padding-left:0;padding-right:0;} .ts-panel-overlay{margin-left:-28px;margin-right:-28px;width:calc(100% + 56px);} /* -- STAT BAR -- */ .status-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px;} /* 2026-05-30: compact stat cards on Home (.status-bar) + Sales KPI bar to match the Agreements page — the global 170px default leaves far too much empty space for a label/value(/sub) card. Also pin #sales-kpi-bar to grid so that when sales.js toggles it back from display:none (Products tab) by clearing the inline style, it restores the 6-up row instead of collapsing to a single stacked block column. */ #sales-kpi-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;} .status-bar .stat-card, #sales-kpi-bar .stat-card{min-height:84px;padding:10px 14px;} .status-bar .stat-card .stat-label, #sales-kpi-bar .stat-card .stat-label{font-size:11px;letter-spacing:1.2px;margin:0 0 4px;min-height:auto;-webkit-line-clamp:1;} .status-bar .stat-card .stat-value, #sales-kpi-bar .stat-card .stat-value{font-size:24px;line-height:1.05;margin:0 0 2px;min-height:auto;} .status-bar .stat-card .stat-sub, #sales-kpi-bar .stat-card .stat-sub{font-size:11px;line-height:1.2;margin:0;min-height:auto;-webkit-line-clamp:1;} /* 2026-05-30: Marketing KPIs — 2 compact rows of 4 (8 metrics from across the mktg setup). */ .mktg-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;} .mktg-kpi .stat-card{min-height:78px;padding:9px 13px;} .mktg-kpi .stat-card .stat-label{font-size:10.5px;letter-spacing:1px;margin:0 0 3px;min-height:auto;-webkit-line-clamp:1;} .mktg-kpi .stat-card .stat-value{font-size:22px;line-height:1.05;margin:0 0 1px;min-height:auto;} .mktg-kpi .stat-card .stat-sub{font-size:10.5px;line-height:1.2;margin:0;min-height:auto;-webkit-line-clamp:1;} /* Skills Library filter selects (2nd Brain) */ .sk-filter{height:34px;padding:0 10px;font-size:12px;background:#ffffff;color:#243340;border:1px solid #cbd5e1;border-radius:7px;cursor:pointer;} /* 2026-05-31: skills list — headers on one row + generous, aligned column spacing */ .skills-white th,.skills-white td{padding:9px 18px !important;} .skills-white th{white-space:nowrap;} .skills-white th:nth-child(3),.skills-white th:nth-child(4),.skills-white th:nth-child(5){min-width:118px;} /* 2026-05-30: 2nd Brain DB cards — concertina (compact summary, drill-in for detail) */ details.db-collapsible{padding:10px 14px;} details.db-collapsible > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;} details.db-collapsible > summary::-webkit-details-marker{display:none;} details.db-collapsible > summary .dbc-name{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--white);} details.db-collapsible > summary .dbc-chev{color:rgba(165,186,202,0.5);font-size:12px;transition:transform .15s;margin-left:4px;} details.db-collapsible[open] > summary .dbc-chev{transform:rotate(90deg);} details.db-collapsible[open]{padding-bottom:12px;} /* 2026-05-30: compact Admin stat cards (landing + sub-tabs) — global 170px wasted space. Keeps 2-line labels (admin labels are 2 words) but drops the reserved 2-line value/sub slots. */ #page-admin .stat-card{min-height:84px;padding:11px 14px;} #page-admin .stat-card .stat-label{min-height:auto;margin:0 0 4px;} #page-admin .stat-card .stat-value{min-height:auto;font-size:24px;margin:2px 0;} #page-admin .stat-card .stat-sub{min-height:auto;-webkit-line-clamp:2;} /* ── STAT CARD GOLDEN RULE (2026-05-17) ───────────────────────────────── Fixed 6-slot vertical layout so coloured value numbers in adjacent cards always sit at the exact same Y position regardless of title length. • TITLE rows 1+2 → 2 lines @ 13px (line-clamp:2, overflow hidden) • VALUE rows 3+4 → 2 lines @ 28px (value vertically centred in slot) • FOOTER rows 5+6 → 2 lines @ 13px (line-clamp:2, overflow hidden) Override with .stat-card--compact for the rare card that needs less. ──────────────────────────────────────────────────────────────────────── */ .stat-card{background:var(--navy);border-radius:10px;padding:11px 15px;border-left:4px solid var(--card-c, var(--yellow));position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:84px;box-sizing:border-box;} /* Backlight glow — reads --card-c that the JS shim copies from each card's inline border-left-color, so the gradient matches the card's accent. Falls back to yellow if --card-c isn't set. Keeps the gradient subtle on the dark navy bg but visible enough to read as a deliberate accent. */ .stat-card::after{content:'';position:absolute;top:0;right:0;width:140px;height:100%;background:linear-gradient(to left, var(--card-c, var(--yellow)), transparent 75%);opacity:0.18;pointer-events:none;} .stat-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 50%, var(--card-c, var(--yellow)) 0%, transparent 55%);opacity:0.07;pointer-events:none;} .stat-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.85);margin:0 0 3px;font-weight:600;line-height:1.2;min-height:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .stat-value{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;color:var(--white);line-height:1.05;min-height:auto;display:flex;align-items:center;margin:0 0 2px;} .stat-value.yellow{color:var(--yellow);}.stat-value.green{color:var(--h1);} .stat-sub{font-size:11.5px;color:rgba(255,255,255,0.65);margin:0;line-height:1.2;min-height:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Compact variant — single line per slot, for the rare card that doesn't fit the standard 2-2-2 grid (use sparingly, breaks alignment with peers). */ .stat-card--compact{min-height:88px;} .stat-card--compact .stat-label{min-height:calc(13px * 1.2);-webkit-line-clamp:1;} .stat-card--compact .stat-value{min-height:calc(28px * 1.1);} .stat-card--compact .stat-sub{min-height:calc(13px * 1.2);-webkit-line-clamp:1;} /* -- PANELS -- */ .panel{background:var(--navy);border-radius:12px;overflow:hidden;} .panel-hdr{padding:14px 18px;background:rgba(0,0,0,0.2);border-bottom:1px solid rgba(165,186,202,0.15);display:flex;align-items:center;justify-content:space-between;} .panel-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:8px;} .badge{background:var(--navy2);color:rgba(255,255,255,0.78);font-size:14px;padding:3px 9px;border-radius:20px;letter-spacing:0.5px;} /* -- GRIDS -- */ .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;} .grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:20px;} /* -- SERVICES -- */ .svc-list{padding:10px 14px;} .svc-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(165,186,202,0.08);} .svc-row:last-child{border-bottom:none;} .svc-info{display:flex;align-items:center;gap:10px;} .dot{width:8px;height:8px;border-radius:50%;background:var(--grey);flex-shrink:0;} .dot.up{background:var(--h1);box-shadow:0 0 6px rgba(14,154,171,0.5);} .dot.down{background:var(--h4);} .dot.loading{animation:pulse 1.2s infinite;} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}} .svc-name{font-size:13px;font-weight:500;} .svc-port{font-size:14px;color:rgba(255,255,255,0.78);font-family:monospace;} .svc-status{font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;} .svc-status.up{color:var(--h1);}.svc-status.down{color:var(--h4);} /* -- WORKFLOWS -- */ .wf-list{padding:10px 14px;max-height:340px;overflow-y:auto;} .wf-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;margin-bottom:5px;background:var(--navy2);} .wf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;} .wf-dot.on{background:var(--h1);box-shadow:0 0 5px rgba(14,154,171,0.5);} .wf-dot.off{background:var(--grey);} .wf-name{font-size:13px;color:var(--white);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .wf-badge{font-size:13px;text-transform:uppercase;padding:2px 7px;border-radius:10px;flex-shrink:0;} .wf-badge.on{background:rgba(14,154,171,0.15);color:var(--h1);} .wf-badge.off{background:rgba(112,120,125,0.2);color:var(--grey);} /* -- RAG / MODELS -- */ .col-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;} .col-chip{background:var(--navy2);border-radius:8px;padding:10px 12px;border-left:3px solid var(--teal);} .col-name{font-size:13px;color:rgba(255,255,255,0.78);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .col-pts{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;} .col-pts span{font-size:13px;color:rgba(255,255,255,0.78);font-family:'Barlow',sans-serif;font-weight:400;} .model-list{padding:0;} .model-hdr{display:grid;grid-template-columns:1fr 56px 48px 52px;gap:0;font-size:13px;color:var(--grey);padding:5px 12px 4px;border-bottom:1px solid rgba(165,186,202,0.15);text-transform:uppercase;letter-spacing:0.8px;font-family:'Barlow Condensed',sans-serif;font-weight:600;} .model-hdr span{text-align:center;}.model-hdr span:first-child{text-align:left;} .model-row{display:grid;grid-template-columns:1fr 56px 48px 52px;align-items:center;padding:5px 12px;border-bottom:1px solid rgba(165,186,202,0.06);} .model-row:last-child{border-bottom:none;} .model-row:hover{background:rgba(165,186,202,0.04);} .model-name{font-family:monospace;font-size:13px;color:var(--skyl);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .model-sep{padding:4px 12px 2px;font-size:13px;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--yellow);border-top:1px solid rgba(253,197,44,0.2);margin-top:2px;} .mpill{display:inline-block;font-size:12px;font-weight:700;font-family:'Barlow Condensed',sans-serif;padding:2px 6px;border-radius:3px;letter-spacing:0.5px;text-align:center;width:44px;} .mpill.LOCAL{background:rgba(74,222,128,0.15);color:#5ecfdd;} .mpill.PRIV{background:rgba(96,165,250,0.15);color:#7dbdd4;} .mpill.PUB{background:rgba(248,113,113,0.15);color:#e08a8a;} .mpill.FREE{background:rgba(74,222,128,0.12);color:#5ecfdd;} .mpill.PAID{background:rgba(251,191,36,0.15);color:#E8924A;} .model-size{font-size:13px;color:var(--grey);text-align:center;} .model-tag{font-size:13px;text-transform:uppercase;padding:2px 7px;border-radius:10px;background:rgba(7,93,103,0.3);color:#5eead4;} /* -- TOKEN USAGE -- */ .token-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(165,186,202,0.07);} .token-row:last-child{border-bottom:none;} .token-model{font-family:monospace;font-size:14px;color:rgba(255,255,255,0.78);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .token-bar-wrap{width:80px;height:4px;background:rgba(165,186,202,0.15);border-radius:2px;margin:0 8px;flex-shrink:0;} .token-bar{height:4px;border-radius:2px;background:var(--yellow);transition:width 0.4s;} .token-count{font-size:22px;font-weight:700;font-family:'Barlow Condensed',sans-serif;color:var(--yellow);min-width:70px;text-align:right;flex-shrink:0;} .token-type{font-size:13px;text-transform:uppercase;padding:2px 6px;border-radius:8px;margin-left:6px;flex-shrink:0;} .token-type.local{background:rgba(7,93,103,0.3);color:#5eead4;} .token-type.cloud{background:rgba(74,143,168,0.2);color:#a5baca;} .token-type.router{background:rgba(253,197,44,0.15);color:#FDC52C;} /* -- QUICK LINKS -- */ .action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;} .action-btn{background:var(--navy2);border:1px solid rgba(165,186,202,0.15);border-radius:9px;padding:12px;cursor:pointer;text-align:left;transition:all 0.2s;text-decoration:none;display:block;color:var(--white);} .action-btn:hover{border-color:var(--yellow);background:rgba(253,197,44,0.06);transform:translateY(-2px);} .action-icon{font-size:18px;margin-bottom:5px;} .action-label{font-size:13px;font-weight:700;} .action-sub{font-size:14px;color:rgba(255,255,255,0.78);margin-top:1px;} /* -- LOG -- */ .log-list{padding:10px 14px;} .log-entry{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid rgba(165,186,202,0.08);} .log-entry:last-child{border-bottom:none;} .log-time{font-family:monospace;font-size:14px;color:rgba(255,255,255,0.78);flex-shrink:0;padding-top:1px;min-width:44px;} .log-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:5px;flex-shrink:0;} .log-dot.warn{background:var(--h3);}.log-dot.error{background:var(--h4);}.log-dot.ok{background:var(--h1);} .log-text{font-size:14px;color:#c8d8e4;line-height:1.4;} /* -- ORG CHART -- */ .health-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px;padding:14px 18px;background:var(--navy);border-radius:10px;} .legend-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.78);margin-right:8px;} .legend-item{display:flex;align-items:center;gap:7px;font-size:13px;} .legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;} .ld1{background:var(--h1);box-shadow:0 0 6px rgba(14,154,171,0.6);} .ld2{background:var(--h2);box-shadow:0 0 6px rgba(74,143,168,0.6);} .ld3{background:var(--h3);box-shadow:0 0 6px rgba(232,146,74,0.6);} .ld4{background:var(--h4);box-shadow:0 0 6px rgba(217,95,95,0.5);} .org-chart{overflow-x:auto;padding-bottom:20px;} .org-level{display:flex;justify-content:center;gap:12px;position:relative;} .org-node{position:relative;display:flex;flex-direction:column;align-items:center;} .agent-card{border-radius:10px;padding:12px 14px;min-width:140px;max-width:170px;cursor:pointer;transition:all 0.25s;border:1.5px solid transparent;position:relative;text-align:center;} .agent-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.3);} .agent-card.h1{background:var(--h1bg);border-color:var(--h1border);} .agent-card.h1:hover{border-color:var(--h1);box-shadow:0 8px 24px rgba(76,175,125,0.2);} .agent-card.h2{background:var(--h2bg);border-color:var(--h2border);} .agent-card.h2:hover{border-color:var(--h2);box-shadow:0 8px 24px rgba(74,143,168,0.2);} .agent-card.h3{background:var(--h3bg);border-color:var(--h3border);} .agent-card.h3:hover{border-color:var(--h3);box-shadow:0 8px 24px rgba(232,146,74,0.2);} .agent-card.h4{background:var(--h4bg);border-color:var(--h4border);} .agent-card.h4:hover{border-color:var(--h4);box-shadow:0 8px 24px rgba(217,95,95,0.2);} .agent-card.is-main{min-width:180px;padding:16px 18px;} .card-health-dot{width:8px;height:8px;border-radius:50%;position:absolute;top:8px;right:8px;} .h1 .card-health-dot{background:var(--h1);box-shadow:0 0 6px rgba(14,154,171,0.8);} .h2 .card-health-dot{background:var(--h2);box-shadow:0 0 6px rgba(74,143,168,0.8);} .h3 .card-health-dot{background:var(--h3);box-shadow:0 0 6px rgba(232,146,74,0.8);} .h4 .card-health-dot{background:var(--h4);box-shadow:0 0 6px rgba(217,95,95,0.8);} .card-emoji{font-size:22px;margin-bottom:6px;display:block;} .card-id{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;color:var(--white);line-height:1.1;} .card-name{font-size:14px;color:rgba(255,255,255,0.78);margin-top:3px;line-height:1.2;} .card-model{font-size:13px;color:rgba(165,186,202,0.7);margin-top:4px;font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;} .card-links{display:flex;gap:5px;justify-content:center;margin-top:8px;flex-wrap:wrap;} .card-link{font-size:13px;padding:2px 7px;border-radius:10px;text-decoration:none;letter-spacing:0.3px;transition:all 0.2s;} .card-link.soul{background:rgba(253,197,44,0.15);color:var(--yellow);border:1px solid rgba(253,197,44,0.3);} .card-link.soul:hover{background:rgba(253,197,44,0.3);} .card-link.doc{background:rgba(165,186,202,0.1);color:rgba(255,255,255,0.78);border:1px solid rgba(165,186,202,0.2);} .card-link.doc:hover{background:rgba(165,186,202,0.2);color:var(--white);} .tooltip{position:fixed;background:#0a1929;border:1px solid rgba(253,197,44,0.35);border-radius:10px;padding:12px 14px;width:240px;z-index:9999;pointer-events:none;opacity:0;transition:opacity 0.18s ease;box-shadow:0 12px 32px rgba(0,0,0,0.6);display:none;} .tooltip.tt-visible{opacity:1;display:block;} .tooltip::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border:6px solid transparent;} .tooltip.tt-above::after{top:100%;border-top-color:#0a1929;} .tooltip.tt-below::after{bottom:100%;border-bottom-color:#0a1929;} .is-main .tooltip,.agent-card:hover .tooltip{opacity:0;} .tt-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;color:var(--yellow);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;} .tt-desc{font-size:13px;color:#c8d8e4;line-height:1.5;} .tt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;} .tt-tag{font-size:13px;padding:2px 6px;border-radius:8px;background:rgba(165,186,202,0.12);color:rgba(255,255,255,0.78);letter-spacing:0.3px;} .tt-tag.yellow{background:rgba(253,197,44,0.12);color:var(--yellow);} .tier-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.78);text-align:center;margin-bottom:12px;opacity:0.7;} .v-line{display:flex;justify-content:center;} .v-line::before{content:'';width:2px;background:rgba(165,186,202,0.2);} .org-wrapper{min-width:900px;} .mid-tier-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;max-width:1400px;margin:0 auto;} .workers-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:0 20px;} /* -- MODAL -- */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,10,20,0.85);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px);} .modal-overlay.open{display:flex;} .modal{background:var(--navy);border:1px solid rgba(165,186,202,0.2);border-radius:16px;width:90%;max-width:720px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.6);} .modal-hdr{padding:20px 24px;border-bottom:1px solid rgba(165,186,202,0.15);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} .modal-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;letter-spacing:1px;} .modal-close{background:none;border:1px solid rgba(165,186,202,0.2);color:rgba(255,255,255,0.78);cursor:pointer;border-radius:6px;padding:5px 10px;font-size:16px;transition:all 0.2s;} .modal-close:hover{background:rgba(165,186,202,0.1);color:var(--white);} .modal-body{padding:20px 24px;overflow-y:auto;flex:1;} .modal-section{margin-bottom:18px;} .modal-section-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);margin-bottom:10px;} .doctor-item{background:var(--navy2);border-radius:8px;padding:12px 14px;margin-bottom:8px;} .doctor-agent{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;} .doctor-status{font-size:13px;color:rgba(255,255,255,0.78);margin-top:4px;line-height:1.5;} .health-pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;margin-left:8px;} .hp-h1{background:var(--h1bg);color:var(--h1);border:1px solid var(--h1border);} .hp-h2{background:var(--h2bg);color:var(--h2);border:1px solid var(--h2border);} .hp-h3{background:var(--h3bg);color:var(--h3);border:1px solid var(--h3border);} .hp-h4{background:var(--h4bg);color:var(--h4);border:1px solid var(--h4border);} .file-link-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(253,197,44,0.1);border:1px solid rgba(253,197,44,0.3);color:var(--yellow);padding:4px 12px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;margin:4px 4px 0 0;transition:all 0.2s;text-decoration:none;} .file-link-btn:hover{background:rgba(253,197,44,0.2);} /* -- CHAT -- */ .chat-bubble{max-width:75%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6;word-wrap:break-word;} .chat-bubble.user{background:rgba(253,197,44,0.15);border:1px solid rgba(253,197,44,0.25);align-self:flex-end;border-bottom-right-radius:4px;} .chat-bubble.agent{background:var(--navy2);border:1px solid rgba(165,186,202,0.15);align-self:flex-start;border-bottom-left-radius:4px;} .chat-bubble.agent.thinking{opacity:0.6;font-style:italic;} .chat-meta{font-size:13px;color:var(--grey);margin-top:4px;letter-spacing:0.3px;} .chat-row{display:flex;flex-direction:column;} .chat-row.user{align-items:flex-end;} .chat-row.agent{align-items:flex-start;} #chat-input:focus{border-color:rgba(253,197,44,0.5);} #upload-zone:hover{border-color:rgba(253,197,44,0.4);background:rgba(253,197,44,0.04);} /* -- SEO -- */ .seo-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;margin:2px;} .seo-tag.critical{background:rgba(217,95,95,0.15);color:#D95F5F;border:1px solid rgba(217,95,95,0.4);} .seo-tag.high{background:rgba(232,146,74,0.15);color:#E8924A;border:1px solid rgba(232,146,74,0.4);} .seo-tag.medium{background:rgba(234,179,8,0.15);color:#eab308;border:1px solid rgba(234,179,8,0.4);} .seo-tag.low{background:rgba(14,154,171,0.15);color:#0e9aab;border:1px solid rgba(14,154,171,0.4);} .seo-tag.pass{background:rgba(14,154,171,0.15);color:#0e9aab;border:1px solid rgba(14,154,171,0.4);} .seo-issue-row{background:var(--navy2);border-radius:8px;padding:12px 14px;margin-bottom:8px;border-left:3px solid transparent;} .seo-issue-row.critical{border-left-color:#D95F5F;} .seo-issue-row.high{border-left-color:#E8924A;} .seo-issue-row.medium{border-left-color:#eab308;} .seo-issue-row.low{border-left-color:#0e9aab;} .seo-score-ring{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;flex-shrink:0;} .seo-platform-btn{background:var(--navy2);border:1px solid rgba(165,186,202,0.2);color:rgba(255,255,255,0.78);padding:6px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Barlow',sans-serif;} .seo-platform-btn.active{background:rgba(253,197,44,0.15);border-color:rgba(253,197,44,0.5);color:var(--yellow);} .seo-platform-btn:hover{background:rgba(165,186,202,0.1);} .seo-history-item{background:var(--navy2);border-radius:8px;padding:10px 14px;margin-bottom:6px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:10px;} .seo-history-item:hover{background:rgba(165,186,202,0.08);} .seo-fix-btn{background:rgba(74,143,168,0.12);border:1px solid rgba(74,143,168,0.4);color:#4A8FA8;padding:4px 10px;border-radius:5px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Barlow',sans-serif;margin-left:4px;} .seo-fix-btn.wp{background:rgba(74,143,168,0.12);border-color:rgba(74,143,168,0.4);color:#4A8FA8;} .seo-fix-btn.ghl{background:rgba(74,143,168,0.12);border-color:rgba(74,143,168,0.4);color:#4A8FA8;} .seo-fix-btn:hover{opacity:0.8;} .seo-email-input{flex:1;background:var(--navy2);color:var(--white);border:1px solid rgba(165,186,202,0.2);border-radius:7px;padding:7px 12px;font-family:'Barlow',sans-serif;font-size:14px;outline:none;} .seo-email-input:focus{border-color:rgba(253,197,44,0.4);} /* -- LAN BANNER -- */ .lan-banner{background:rgba(7,93,103,0.2);border:1px solid rgba(7,93,103,0.5);border-radius:8px;padding:10px 16px;margin-bottom:18px;display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,0.78);} .lan-banner strong{color:var(--white);} .lan-ip{font-family:monospace;background:rgba(0,0,0,0.3);padding:2px 8px;border-radius:4px;color:#5eead4;} /* -- SCROLLBAR -- */ ::-webkit-scrollbar{width:5px;height:5px;} ::-webkit-scrollbar-track{background:var(--navy3);} ::-webkit-scrollbar-thumb{background:var(--navy2);border-radius:3px;} #chat-messages::-webkit-scrollbar{width:4px;} /* -- LEADS PAGE -- */ .leads-stat-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;} /* Pipeline flow */ .pipeline-flow{display:flex;align-items:center;justify-content:center;padding:16px 24px;gap:8px;flex-wrap:wrap;} .pipe-stage{display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(165,186,202,0.06);border-radius:10px;padding:12px 16px;min-width:120px;border:1px solid rgba(165,186,202,0.12);} .pipe-stage--source{border-color:rgba(253,197,44,0.3);} .pipe-stage--db{border-color:rgba(14,154,171,0.3);} .pipe-stage--enrich{border-color:rgba(74,143,168,0.3);} .pipe-stage--qualify{border-color:rgba(74,143,168,0.3);} .pipe-stage--ghl{border-color:rgba(74,143,168,0.5);background:rgba(74,143,168,0.07);} .pipe-icon{font-size:22px;margin-bottom:5px;} .pipe-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--white);letter-spacing:1px;text-transform:uppercase;} .pipe-sub{font-size:13px;color:rgba(255,255,255,0.78);margin-top:3px;line-height:1.3;} .pipe-arrow{font-size:20px;color:rgba(165,186,202,0.3);flex-shrink:0;} /* Source agent rows */ .source-agent-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(165,186,202,0.08);transition:background 0.15s;} .source-agent-row:last-child{border-bottom:none;} .source-agent-row:hover{background:rgba(165,186,202,0.04);} .src-agent-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;} .src-agent-info{flex:1;min-width:0;} .src-agent-name{font-size:14px;font-weight:600;color:var(--white);} .src-agent-detail{font-size:14px;color:rgba(255,255,255,0.78);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .src-agent-status{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;} .src-pill{font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;padding:3px 10px;border-radius:10px;} .src-pill--ok{background:rgba(14,154,171,0.15);color:#0e9aab;border:1px solid rgba(14,154,171,0.3);} .src-pill--warn{background:rgba(253,197,44,0.15);color:#FDC52C;border:1px solid rgba(253,197,44,0.3);} .src-pill--idle{background:rgba(112,120,125,0.2);color:var(--grey);border:1px solid rgba(112,120,125,0.2);} .src-agent-count{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:rgba(255,255,255,0.78);} /* Enrichment period tabs */ .enrich-tab{background:transparent;border:1px solid rgba(165,186,202,0.2);color:rgba(255,255,255,0.78);border-radius:5px;padding:5px 13px;font-size:13px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;} .enrich-tab.active,.enrich-tab:hover{background:rgba(253,197,44,0.15);border-color:rgba(253,197,44,0.4);color:var(--yellow);} /* Enrichment source breakdown */ .enrich-source-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .enrich-src-label{font-size:14px;color:rgba(255,255,255,0.78);width:90px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .enrich-bar-wrap{flex:1;height:6px;background:rgba(165,186,202,0.12);border-radius:3px;} .enrich-bar{height:6px;border-radius:3px;transition:width 0.5s ease;min-width:0;} .enrich-count{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--white);min-width:36px;text-align:right;flex-shrink:0;} /* GHL stat mini */ .ghl-stat-mini{background:rgba(165,186,202,0.05);border-radius:6px;padding:8px 10px;} /* Companies House */ .ch-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(165,186,202,0.07);} .ch-row:last-child{border-bottom:none;} .ch-label{font-size:13px;color:rgba(255,255,255,0.78);} .ch-val{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--white);} /* Sync table */ .sync-tbl-hdr{display:grid;grid-template-columns:1.5fr 1.2fr 80px 1fr 90px 56px 80px;gap:0;padding:8px 14px;background:rgba(0,0,0,0.15);font-size:13px;color:var(--grey);text-transform:uppercase;letter-spacing:0.8px;font-family:'Barlow Condensed',sans-serif;font-weight:600;border-top:1px solid rgba(165,186,202,0.1);} .sync-row{display:grid;grid-template-columns:1.5fr 1.2fr 80px 1fr 90px 56px 80px;gap:0;padding:8px 14px;border-bottom:1px solid rgba(165,186,202,0.07);align-items:center;transition:background 0.15s;} .sync-row:hover{background:rgba(165,186,202,0.04);} .sync-company{font-size:14px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sync-contact{font-size:13px;color:rgba(255,255,255,0.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sync-source{font-size:13px;padding:2px 7px;border-radius:8px;background:rgba(165,186,202,0.1);color:rgba(255,255,255,0.78);text-align:center;white-space:nowrap;} .sync-email{font-size:14px;color:#5ecfdd;font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sync-mobile{font-size:14px;color:#7dbdd4;font-family:monospace;} .sync-score{text-align:center;} .score-pill{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;padding:2px 7px;border-radius:8px;} .score-hot{background:rgba(217,95,95,0.15);color:#D95F5F;} .score-warm{background:rgba(253,197,44,0.15);color:#FDC52C;} .score-cold{background:rgba(165,186,202,0.1);color:rgba(255,255,255,0.78);} .sync-btn{font-size:13px;padding:5px 11px;border-radius:5px;background:rgba(74,143,168,0.15);border:1px solid rgba(74,143,168,0.35);color:#4A8FA8;cursor:pointer;transition:all 0.2s;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.3px;white-space:nowrap;} .sync-btn:hover{background:rgba(74,143,168,0.3);} /* Enrich history items */ .enrich-hist-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(165,186,202,0.07);} .enrich-hist-row:last-child{border-bottom:none;} .hist-time{font-family:monospace;font-size:14px;color:var(--grey);flex-shrink:0;min-width:70px;} .hist-src{font-size:13px;padding:2px 8px;border-radius:8px;flex-shrink:0;} .hist-desc{font-size:13px;color:#c8d8e4;flex:1;line-height:1.4;} .hist-count{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--yellow);flex-shrink:0;} /* GHL sync log */ .ghl-log-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(165,186,202,0.06);} .ghl-log-row:last-child{border-bottom:none;} .ghl-log-name{font-size:13px;color:var(--white);flex:1;} .ghl-log-time{font-size:13px;color:var(--grey);flex-shrink:0;font-family:monospace;} .ghl-log-status{font-size:13px;font-weight:700;flex-shrink:0;} /* -- PRIORITY TARGETING inputs -- */ .pt-input{background:rgba(165,186,202,0.07);border:1px solid rgba(165,186,202,0.15);color:var(--white);border-radius:6px;padding:6px 10px;font-size:13px;font-family:'Inter',sans-serif;width:100%;transition:border-color 0.2s;} .pt-input:focus{outline:none;border-color:var(--yellow);} .pt-input option{background:#002B49;color:var(--white);} .pt-p1{border-color:rgba(253,197,44,0.3);} .pt-p1:focus{border-color:#FDC52C;} .pt-p2{border-color:rgba(232,146,74,0.25);} .pt-p2:focus{border-color:#E8924A;} .pt-p3{border-color:rgba(129,140,248,0.25);} .pt-p3:focus{border-color:#818cf8;} /* -- Priority Targeting - employee checkbox grid -- */ .pt-emp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:rgba(165,186,202,0.04);border:1px solid rgba(165,186,202,0.12);border-radius:6px;padding:6px;} .pt-chk{display:flex;align-items:center;gap:4px;font-size:14px;color:rgba(255,255,255,0.78);cursor:pointer;padding:2px 3px;border-radius:4px;transition:background 0.15s;white-space:nowrap;} .pt-chk:hover{background:rgba(165,186,202,0.1);} .pt-chk input[type=checkbox]{accent-color:var(--yellow);cursor:pointer;width:14px;height:14px;flex-shrink:0;} .pt-chk.pt-p1 input{accent-color:#FDC52C;} .pt-chk.pt-p2 input{accent-color:#E8924A;} .pt-chk.pt-p3 input{accent-color:#818cf8;} .pt-quick{color:#FDC52C;cursor:pointer;background:rgba(253,197,44,0.1);border-radius:3px;padding:2px 7px;font-size:13px;white-space:nowrap;} .pt-quick:hover{background:rgba(253,197,44,0.25);} .pt-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(253,197,44,0.12);border:1px solid rgba(253,197,44,0.25);color:#FDC52C;font-size:14px;border-radius:10px;padding:2px 8px;cursor:pointer;} .pt-chip:hover{background:rgba(217,95,95,0.15);border-color:rgba(217,95,95,0.3);color:#D95F5F;} /* -- AGENT CHAIN CARDS -- */ .agent-chain-card{border:1px solid rgba(165,186,202,0.2);border-radius:10px;padding:12px 10px;position:relative;} .acc-badge{display:inline-block;width:20px;height:20px;border-radius:50%;font-size:13px;font-weight:700;text-align:center;line-height:20px;color:#fff;margin-bottom:6px;} .acc-icon{font-size:22px;margin-bottom:4px;} .acc-name{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--white);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;} .acc-tasks{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;} .acc-task{font-size:14px;color:rgba(255,255,255,0.78);line-height:1.4;} .acc-note{font-size:13px;text-transform:uppercase;letter-spacing:0.5px;margin-top:4px;} .acc-arrow{display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(165,186,202,0.3);padding-top:40px;} .ghl-log-status.ok{color:#0e9aab;}.ghl-log-status.fail{color:#D95F5F;}.ghl-log-status.pending{color:#FDC52C;} /* -- Leads page action buttons -------- */ .leads-action-btn { border: none; border-radius: 6px; padding: 5px 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; cursor: pointer; transition: opacity 0.2s, transform 0.1s; white-space: nowrap; } .leads-action-btn:hover { opacity: 0.85; } .leads-action-btn:active { transform: scale(0.97); } .leads-action-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* -- Leads stat bar 7-col override -------- */ #leads-page .leads-stat-bar { display: grid; gap: 8px; margin-bottom: 16px; } /* -- Priority Targeting cards -------- */ .pt-card { border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 7px; border: 1px solid rgba(165,186,202,0.12); } .pt-card-p1 { background: rgba(253,197,44,0.04); border-color: rgba(253,197,44,0.25); } .pt-card-p2 { background: rgba(232,146,74,0.04); border-color: rgba(232,146,74,0.2); } .pt-card-p3 { background: rgba(74,143,168,0.04); border-color: rgba(74,143,168,0.2); } .pt-card-p4 { background: rgba(165,186,202,0.03); border-color: rgba(165,186,202,0.12); } .pt-card-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(165,186,202,0.1); } .pt-badge { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; padding: 1px 7px; border-radius: 4px; letter-spacing: 0.5px; } .pt-badge-p1 { background: rgba(253,197,44,0.2); color: #FDC52C; } .pt-badge-p2 { background: rgba(232,146,74,0.2); color: #E8924A; } .pt-badge-p3 { background: rgba(74,143,168,0.2); color: #4A8FA8; } .pt-badge-p4 { background: rgba(165,186,202,0.12); color: rgba(165,186,202,0.6); } .pt-weight-input { width: 46px; background: rgba(165,186,202,0.08); border: 1px solid rgba(165,186,202,0.2); border-radius: 4px; padding: 2px 5px; color: var(--ice); font-size: 13px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-align: center; } .pt-field { display: flex; flex-direction: column; gap: 3px; } .pt-label { font-size: 13px; color: rgba(165,186,202,0.5); text-transform: uppercase; letter-spacing: 0.5px; } .pt-input { background: rgba(165,186,202,0.07); border: 1px solid rgba(165,186,202,0.15); border-radius: 5px; padding: 5px 8px; color: var(--ice); font-size: 12px; width: 100%; box-sizing: border-box; font-family: 'Barlow', sans-serif; } .pt-input:focus { outline: none; border-color: rgba(165,186,202,0.4); background: rgba(165,186,202,0.1); } select.pt-input { cursor: pointer; } /* Enrichment mode toggle chips */ .pt-toggle-label { display: flex; align-items: center; cursor: pointer; padding: 6px 0; } .pt-toggle-label input[type=radio] { display: none; } .pt-toggle-chip { font-size: 12px; padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(165,186,202,0.2); color: rgba(165,186,202,0.5); transition: all 0.2s; white-space: nowrap; } .pt-toggle-label input:checked + .pt-chip-free { background: rgba(129,140,248,0.15); border-color: rgba(129,140,248,0.5); color: #818cf8; font-weight: 700; } .pt-toggle-label input:checked + .pt-chip-paid { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #f59e0b; font-weight: 700; } .pt-toggle-chip:hover { border-color: rgba(165,186,202,0.4); color: var(--ice); } /* -- Staff size multi-select checkboxes -------- */ .pt-staff-checks { display: flex; flex-direction: column; gap: 3px; background: rgba(165,186,202,0.05); border: 1px solid rgba(165,186,202,0.12); border-radius: 5px; padding: 5px 7px; max-height: 130px; overflow-y: auto; } .pt-staff-check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: rgba(165,186,202,0.7); padding: 2px 2px; border-radius: 3px; transition: color 0.15s; } .pt-staff-check:hover { color: var(--ice); } .pt-staff-check input[type=checkbox] { width: 12px; height: 12px; accent-color: #4A8FA8; cursor: pointer; flex-shrink: 0; } .pt-staff-check input:checked + span { color: var(--ice); font-weight: 600; } /* Industry select - make it a reasonable height */ #section-priority select.pt-input[id^="pt-ind-"] { max-height: 28px; } /* Job title optgroup styling */ #section-priority select.pt-input optgroup { color: rgba(165,186,202,0.5); font-size: 13px; font-style: normal; text-transform: uppercase; letter-spacing: 0.5px; } #section-priority select.pt-input option { color: #fff; background: #003152; font-size: 12px; } /* -- Audit Status Panel -------- */ .audit-stat-cell { padding: 10px 14px; text-align: center; border-right: 1px solid rgba(165,186,202,0.08); } .audit-stat-cell:last-child { border-right: none; } .ast-num { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 3px; } .ast-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(165,186,202,0.45); } /* Audit filter tabs */ .audit-filter-btn { background: transparent; border: 1px solid rgba(165,186,202,0.18); color: rgba(165,186,202,0.55); border-radius: 5px; padding: 4px 12px; font-size: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s; } .audit-filter-btn.active, .audit-filter-btn:hover { background: rgba(74,143,168,0.15); border-color: rgba(74,143,168,0.4); color: #4A8FA8; } /* Individual finding card */ .audit-finding-card { background: rgba(165,186,202,0.04); border: 1px solid rgba(165,186,202,0.12); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid rgba(165,186,202,0.3); transition: border-color 0.2s; } .audit-finding-card:hover { border-color: rgba(74,143,168,0.4); } .audit-finding-card.sev-critical { border-left-color: #D95F5F; } .audit-finding-card.sev-high { border-left-color: #E8924A; } .audit-finding-card.sev-medium { border-left-color: #FDC52C; } .audit-finding-card.sev-low { border-left-color: #4A8FA8; } .audit-finding-card.sev-info { border-left-color: rgba(165,186,202,0.3); } .audit-finding-card.status-approved { border-left-color: #4CAF7D; opacity: 0.8; } .audit-finding-card.status-applied { border-left-color: #0e9aab; opacity: 0.7; } .af-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; } .af-sev-badge { font-size: 12px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 1px; } .af-sev-badge.sev-critical { background: rgba(217,95,95,0.2); color: #D95F5F; } .af-sev-badge.sev-high { background: rgba(232,146,74,0.2); color: #E8924A; } .af-sev-badge.sev-medium { background: rgba(253,197,44,0.15); color: #FDC52C; } .af-sev-badge.sev-low { background: rgba(74,143,168,0.15); color: #4A8FA8; } .af-sev-badge.sev-info { background: rgba(165,186,202,0.1); color: rgba(165,186,202,0.6); } .af-title { font-size: 13px; font-weight: 600; color: var(--white); flex: 1; line-height: 1.35; } .af-actions { display: flex; gap: 5px; flex-shrink: 0; } .af-btn { font-size: 13px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; padding: 3px 9px; border-radius: 4px; cursor: pointer; transition: all 0.15s; white-space: nowrap; border: 1px solid; } .af-btn-approve { background: rgba(76,175,125,0.12); border-color: rgba(76,175,125,0.4); color: #4CAF7D; } .af-btn-approve:hover { background: rgba(76,175,125,0.25); } .af-btn-reject { background: transparent; border-color: rgba(165,186,202,0.2); color: rgba(165,186,202,0.45); } .af-btn-reject:hover { border-color: rgba(217,95,95,0.4); color: #D95F5F; } .af-category { font-size: 13px; color: rgba(165,186,202,0.4); margin-bottom: 4px; letter-spacing: 0.3px; } .af-rec { font-size: 12px; color: #c8d8e4; line-height: 1.5; background: rgba(0,0,0,0.2); border-radius: 4px; padding: 6px 8px; margin-top: 5px; } .af-fix-cmd { font-size: 13px; font-family: monospace; color: #FDC52C; background: rgba(253,197,44,0.06); border: 1px solid rgba(253,197,44,0.15); border-radius: 4px; padding: 4px 8px; margin-top: 4px; word-break: break-all; } /* -- Brand colours - white stat card variant -------- */ .stat-card-white { background: var(--white); border-radius: 10px; padding: 16px 18px; border-left: 4px solid var(--navy); position: relative; overflow: hidden; } .stat-card-white .stat-label { color: var(--navy2); } .stat-card-white .stat-value { color: var(--navy); } .stat-card-white .stat-sub { color: var(--navy2); } /* -------- DEV LAB - Prompt Queue & Overnight Runner -------- */ /* Page header */ .dev-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .dev-hdr-left { display: flex; align-items: center; gap: 10px; } .dev-hdr-icon { font-size: 22px; } .dev-hdr-title { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--white); letter-spacing: 1px; } .dev-hdr-sub { font-size: 13px; color: var(--muted); margin-left: 4px; } .dev-hdr-right { display: flex; gap: 8px; align-items: center; } /* Buttons */ .dev-btn { border: none; border-radius: 5px; padding: 6px 13px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; transition: opacity .15s; white-space: nowrap; } .dev-btn:hover { opacity: .85; } .dev-btn-primary { background: var(--teal); color: #fff; } .dev-btn-accent { background: var(--orange); color: #fff; } .dev-btn-success { background: var(--white); color: var(--navy); border-color: rgba(255,255,255,0.4); } .dev-btn-ghost { background: rgba(255,255,255,.08); color: var(--white); border: 1px solid var(--border); } .dev-btn-danger { background: var(--red); color: #fff; } .dev-btn-xs { padding: 3px 8px; font-size: 13px; } /* 2026-06-03 SITE STANDARD for modal action buttons (Nathan): SAVE is ALWAYS yellow and is the only thing that writes data. CLOSE/CANCEL is ALWAYS light grey, NEVER saves (give it title="Don't save"). Use class="dev-btn btn-save" and class="dev-btn btn-close". */ .btn-save { background:#FDC52C !important; color:#002B49 !important; border:1px solid #FDC52C !important; font-weight:700 !important; } .btn-save:hover { background:#ffd54a !important; opacity:1 !important; } .btn-close { background:#e6e9ee !important; color:#46505b !important; border:1px solid #cdd4dd !important; font-weight:600 !important; } .btn-close:hover { background:#d9dee6 !important; opacity:1 !important; } /* Status bar */ .dev-status-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 20px; background: rgba(0,0,0,.15); border-bottom: 1px solid var(--border); flex-shrink: 0; } .dev-stat-pill { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.05); border-radius: 20px; padding: 3px 10px 3px 7px; cursor: pointer; } .dsp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dsp-dot.running { background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: devPulse 1.2s infinite; } .dsp-dot.consuming{ background: var(--yellow); } .dsp-dot.queued { background: var(--teal); } .dsp-dot.approved { background: var(--orange); } .dsp-dot.draft { background: var(--muted); } .dsp-dot.complete { background: #4ade80; } .dsp-dot.failed { background: var(--red); } @keyframes devPulse { 0%,100%{opacity:1} 50%{opacity:.4} } .dsp-label { font-size: 13px; color: var(--muted); } .dsp-val { font-size: 12px; font-weight: 700; color: var(--white); } .dev-current-box { display: flex; align-items: center; padding: 4px 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); border-radius: 6px; font-size: 12px; color: var(--white); } /* Layout */ .dev-layout { display: grid; grid-template-columns: 340px 1fr; gap: 0; flex: 1; min-height: 0; overflow: hidden; } /* Queue panel */ .dev-queue-panel { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .dev-panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--white); letter-spacing: .5px; flex-shrink: 0; } .dev-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; } .dev-fpill { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 12px; padding: 2px 9px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; } .dev-fpill:hover, .dev-fpill.active { background: var(--teal); color: #fff; border-color: var(--teal); } .dev-queue-list { flex: 1; overflow-y: auto; padding: 8px; } /* Queue card */ .dev-q-card { border-radius: 7px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; border: 1px solid var(--border); background: rgba(255,255,255,.03); transition: border-color .15s, background .15s; position: relative; } .dev-q-card:hover { border-color: var(--teal); background: rgba(0,174,179,.06); } .dev-q-card.selected { border-color: var(--teal); background: rgba(0,174,179,.10); } .dev-q-card.status-running { border-left: 3px solid #22c55e; } .dev-q-card.status-consuming{ border-left: 3px solid var(--yellow); } .dev-q-card.status-queued { border-left: 3px solid var(--teal); } .dev-q-card.status-approved { border-left: 3px solid var(--orange); } .dev-q-card.status-draft { border-left: 3px solid var(--muted); } .dev-q-card.status-complete { border-left: 3px solid #4ade80; } .dev-q-card.status-failed { border-left: 3px solid var(--red); } .dev-qc-top { display: flex; align-items: flex-start; gap: 6px; } .dev-qc-badge { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 6px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .5px; } .badge-running { background: rgba(34,197,94,.2); color: #4ade80; } .badge-consuming{ background: rgba(253,197,44,.2); color: var(--yellow); } .badge-queued { background: rgba(0,174,179,.2); color: var(--teal); } .badge-approved { background: rgba(232,146,74,.2); color: var(--orange); } .badge-draft { background: rgba(150,150,150,.15);color: var(--muted); } .badge-complete { background: rgba(74,222,128,.2); color: #4ade80; } .badge-failed { background: rgba(217,95,95,.2); color: var(--red); } .badge-skipped { background: rgba(150,150,150,.1);color: var(--muted); } .dev-qc-title { font-size: 12px; font-weight: 600; color: var(--white); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dev-qc-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 4px; } .dev-qc-p { color: var(--teal); font-weight: 700; } .dev-qc-actions { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity .15s; } .dev-q-card:hover .dev-qc-actions { opacity: 1; } .dev-qc-btn { font-size: 12px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--white); cursor: pointer; font-family: inherit; font-weight: 600; } .dev-qc-btn:hover { background: var(--teal); border-color: var(--teal); } .dev-qc-btn.danger:hover { background: var(--red); border-color: var(--red); } /* Editor panel */ .dev-editor-panel { display: flex; flex-direction: column; overflow: hidden; } .dev-editor-box { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .dev-editor-hdr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); } .dev-title-input { flex: 1; background: transparent; border: none; outline: none; color: var(--white); font-size: 15px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; } .dev-select, .dev-mini-input { background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 5px; color: var(--white); padding: 4px 8px; font-size: 13px; font-family: inherit; } .dev-mini-input { width: 56px; text-align: center; } .dev-prompt-textarea { flex: 1; min-height: 180px; max-height: 340px; background: rgba(0,0,0,.2); border: none; outline: none; color: var(--white); font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.6; padding: 12px 16px; resize: vertical; } .dev-prompt-textarea::placeholder { color: rgba(255,255,255,.25); } .dev-editor-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 8px 14px; flex-wrap: wrap; } .dev-tags-input { background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); padding: 4px 8px; font-size: 13px; font-family: inherit; width: 200px; } .dev-notes-input { background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); padding: 4px 8px; font-size: 13px; font-family: inherit; flex: 1; min-width: 180px; resize: none; } /* History */ .dev-history-box { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .dev-history-list { flex: 1; overflow-y: auto; padding: 8px 12px; } .dev-hist-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; border: 1px solid var(--border); background: rgba(255,255,255,.02); font-size: 13px; } .dev-hist-row:hover { background: rgba(255,255,255,.04); } .dev-hist-badge { flex-shrink: 0; padding: 2px 7px; border-radius: 4px; } .dev-hist-title { flex: 1; color: var(--white); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dev-hist-time { color: var(--muted); font-size: 12px; flex-shrink: 0; } .dev-hist-summary { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Loading state */ .dev-loading { text-align: center; color: var(--muted); padding: 24px; font-size: 12px; } /* ── SKELETON LOADER (replaces plain .dev-loading on placeholder pages) ── */ @keyframes sk-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .sk-shimmer { background: linear-gradient(90deg, rgba(165,186,202,0.06) 25%, rgba(165,186,202,0.13) 50%, rgba(165,186,202,0.06) 75%); background-size: 600px 100%; animation: sk-shimmer 1.6s infinite; border-radius: 6px; } .skeleton-page { padding: 24px 0; display: flex; flex-direction: column; gap: 20px; } .skeleton-stat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .skeleton-stat-card { height: 88px; border-radius: 10px; } .skeleton-row { display: grid; gap: 16px; } .skeleton-row.cols-2 { grid-template-columns: 1fr 1fr; } .skeleton-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .skeleton-row.cols-1-2 { grid-template-columns: 1fr 2fr; } .skeleton-panel { border-radius: 10px; border: 1px solid rgba(165,186,202,0.08); overflow: hidden; } .skeleton-panel-hdr { height: 44px; border-bottom: 1px solid rgba(165,186,202,0.08); } .skeleton-panel-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .skeleton-line { border-radius: 4px; } .skeleton-line.h-sm { height: 12px; } .skeleton-line.h-md { height: 18px; } .skeleton-line.h-lg { height: 32px; } .skeleton-line.w-30 { width: 30%; } .skeleton-line.w-50 { width: 50%; } .skeleton-line.w-70 { width: 70%; } .skeleton-line.w-100 { width: 100%; } .skeleton-table-row { display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid rgba(165,186,202,0.05); align-items: center; } .skeleton-cell { height: 12px; border-radius: 4px; flex-shrink: 0; } .dev-empty { text-align: center; color: var(--muted); padding: 24px; font-size: 12px; opacity: .7; } /* Inputs shared */ .dev-input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 5px; color: var(--white); padding: 7px 10px; font-size: 12px; font-family: inherit; box-sizing: border-box; margin-bottom: 8px; } .dev-textarea { width: 100%; background: rgba(0,0,0,.2); border: 1px solid var(--border); border-radius: 5px; color: var(--white); padding: 7px 10px; font-size: 12px; font-family: 'Courier New', monospace; line-height: 1.5; box-sizing: border-box; resize: vertical; margin-bottom: 8px; } label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .5px; margin-bottom: 3px; text-transform: uppercase; } /* Modal */ .dev-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9000; display: flex; align-items: center; justify-content: center; } .dev-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; width: 620px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); } .dev-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; color: var(--white); } .dev-modal-close { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 2px 6px; } .dev-modal-close:hover { color: var(--white); } .dev-modal-body { flex: 1; overflow-y: auto; padding: 16px 18px; } .dev-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); } /* -------- DEV LAB v2 - 3-column layout, pipeline bar, response monitor -------- */ /* Pipeline status bar */ .dev-pipeline-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 18px; background:rgba(0,0,0,.18); border-bottom:1px solid var(--border); flex-shrink:0; } .dev-pip-stage { display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:7px; padding:5px 12px; cursor:pointer; transition:all .15s; min-width:58px; } .dev-pip-stage:hover { border-color:var(--teal); background:rgba(0,174,179,.08); } .active-stage { border-color:rgba(34,197,94,.4)!important; background:rgba(34,197,94,.07)!important; } .done-stage { border-color:rgba(74,222,128,.3)!important; } .fail-stage { border-color:rgba(217,95,95,.3)!important; } .dev-pip-count { font-size:18px; font-weight:700; color:var(--white); line-height:1; } .dev-pip-label { font-size:11px; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; } .dev-pip-arrow { color:var(--muted); font-size:14px; } .dev-pip-sep { width:1px; height:30px; background:var(--border); margin:0 4px; } .dev-pip-running-box { display:flex; align-items:center; gap:6px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); border-radius:7px; padding:5px 12px; font-size:12px; color:var(--white); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dev-pip-pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:devPulse 1.2s infinite; } @keyframes devPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} } /* Three-column layout */ .dev-main-layout { display:grid; grid-template-columns:280px 1fr 340px; flex:1; min-height:0; overflow:hidden; } .dev-col { display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); } .dev-col:last-child { border-right:none; } .dev-col-hdr { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; color:var(--white); letter-spacing:.5px; flex-shrink:0; } .dev-filter-pills { display:flex; gap:3px; flex-wrap:wrap; } /* Composer column */ .dev-col-composer { overflow-y:auto; } .dev-composer { padding:12px 14px; display:flex; flex-direction:column; gap:10px; } .dev-form-row { display:flex; gap:10px; flex-wrap:wrap; } .dev-form-group { display:flex; flex-direction:column; flex:1; } .dev-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; } .dev-req { color:var(--orange); } .dev-form-input { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:5px; color:var(--white); padding:7px 9px; font-size:12px; font-family:inherit; width:100%; box-sizing:border-box; transition:border-color .15s; } .dev-form-input:focus { outline:none; border-color:var(--teal); } .dev-form-textarea { background:rgba(0,0,0,.2); border:1px solid var(--border); border-radius:5px; color:var(--white); padding:8px 9px; font-size:12px; font-family:'Courier New',monospace; line-height:1.5; width:100%; box-sizing:border-box; resize:vertical; transition:border-color .15s; } .dev-form-textarea:focus { outline:none; border-color:var(--teal); } .dev-form-textarea-lg { min-height:150px; } .dev-composer-actions { display:flex; align-items:center; justify-content:space-between; padding-top:6px; border-top:1px solid var(--border); flex-wrap:wrap; gap:8px; } /* Queue cards */ .dev-queue-list { flex:1; overflow-y:auto; padding:8px; } .dev-q-card { border-radius:7px; padding:9px 11px; margin-bottom:5px; border:1px solid var(--border); background:rgba(255,255,255,.02); cursor:pointer; transition:all .15s; position:relative; } .dev-q-card:hover { border-color:var(--teal); background:rgba(0,174,179,.06); } .dev-q-card.selected { border-color:var(--teal)!important; background:rgba(0,174,179,.10)!important; } .dev-q-card.status-running { border-left:3px solid #22c55e; } .dev-q-card.status-consuming{ border-left:3px solid var(--yellow); } .dev-q-card.status-queued { border-left:3px solid var(--teal); } .dev-q-card.status-approved { border-left:3px solid var(--orange); } .dev-q-card.status-draft { border-left:3px solid rgba(150,150,150,.5); } .dev-q-card.status-complete { border-left:3px solid #4ade80; } .dev-q-card.status-failed { border-left:3px solid var(--red); } .dev-qc-top { display:flex; align-items:flex-start; gap:5px; } .dev-qc-badge { font-size:11px; font-weight:700; border-radius:4px; padding:2px 5px; flex-shrink:0; text-transform:uppercase; letter-spacing:.4px; } .badge-running { background:rgba(34,197,94,.2); color:#4ade80; } .badge-consuming{ background:rgba(253,197,44,.2); color:var(--yellow); } .badge-queued { background:rgba(0,174,179,.2); color:var(--teal); } .badge-approved { background:rgba(232,146,74,.2); color:var(--orange); } .badge-draft { background:rgba(150,150,150,.15);color:#aaa; } .badge-complete { background:rgba(74,222,128,.2); color:#4ade80; } .badge-failed { background:rgba(217,95,95,.2); color:var(--red); } .badge-skipped { background:rgba(150,150,150,.1);color:#888; } .dev-qc-title { flex:1; font-size:12px; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dev-qc-p { font-size:12px; color:var(--teal); font-weight:700; flex-shrink:0; } .dev-qc-meta { display:flex; gap:5px; font-size:12px; color:var(--muted); margin-top:4px; flex-wrap:wrap; } .dev-qc-tags { color:var(--teal)!important; } .dev-qc-running-bar { display:flex; align-items:center; gap:6px; margin-top:5px; font-size:12px; color:#4ade80; } .dev-qc-error { font-size:12px; color:var(--red); margin-top:4px; } .dev-qc-actions { display:flex; gap:4px; margin-top:7px; opacity:0; transition:opacity .15s; flex-wrap:wrap; } .dev-q-card:hover .dev-qc-actions { opacity:1; } .dev-qc-btn { font-size:12px; padding:2px 7px; border-radius:4px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--white); cursor:pointer; font-family:inherit; font-weight:600; transition:background .12s; } .dev-qc-btn:hover { background:var(--teal); border-color:var(--teal); } .dev-qc-btn.success:hover { background:#22c55e; border-color:#22c55e; } .dev-qc-btn.danger:hover { background:var(--red); border-color:var(--red); } /* Response monitor */ .dev-col-monitor { overflow:hidden; display:flex; flex-direction:column; } .dev-monitor-current { padding:12px; border-bottom:1px solid var(--border); flex-shrink:0; } .dev-mc-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; } .dev-mc-status-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:devPulse 1.2s infinite; } .dev-mc-label { font-size:12px; font-weight:700; color:#4ade80; letter-spacing:.5px; } .dev-mc-elapsed { font-size:12px; color:var(--muted); margin-left:auto; } .dev-mc-title { font-size:13px; font-weight:700; color:var(--white); margin-bottom:4px; } .dev-mc-prompt-preview { font-size:12px; color:var(--muted); font-family:'Courier New',monospace; background:rgba(0,0,0,.2); border-radius:4px; padding:6px 8px; margin-bottom:8px; max-height:60px; overflow:hidden; line-height:1.4; } .dev-mc-response-area { display:flex; flex-direction:column; } .dev-mc-textarea { background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:5px; color:var(--white); padding:8px 9px; font-size:13px; font-family:inherit; line-height:1.5; width:100%; box-sizing:border-box; resize:vertical; min-height:100px; } .dev-mc-textarea:focus { outline:none; border-color:#22c55e; } .dev-monitor-idle { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; color:var(--muted); text-align:center; font-size:12px; gap:6px; flex-shrink:0; } /* History section (bottom of monitor col) */ .dev-history-hdr { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:13px; font-weight:700; color:var(--white); letter-spacing:.5px; flex-shrink:0; } .dev-history-list { flex:1; overflow-y:auto; padding:6px 10px; } .dev-hist-row { display:flex; align-items:flex-start; gap:8px; padding:8px 8px; border-radius:6px; margin-bottom:4px; border:1px solid var(--border); background:rgba(255,255,255,.02); cursor:pointer; transition:background .12s; } .dev-hist-row:hover { background:rgba(255,255,255,.05); border-color:var(--teal); } .dev-hist-left { display:flex; flex-direction:column; gap:3px; flex-shrink:0; } .dev-hist-body { flex:1; min-width:0; } .dev-hist-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; } .dev-hist-title { font-size:13px; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; } .dev-hist-response { font-size:12px; color:#4ade80; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dev-hist-error { font-size:12px; color:var(--red); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dev-hist-tags { font-size:11px; color:var(--teal); margin-top:2px; } .dev-hist-time { font-size:12px; color:var(--muted); white-space:nowrap; } .dev-hist-dur { font-size:11px; color:rgba(150,150,150,.7); } /* Shared utils */ .dev-loading { text-align:center; color:var(--muted); padding:20px; font-size:12px; } .dev-empty { text-align:center; color:var(--muted); padding:20px; font-size:12px; opacity:.7; } .dev-btn { border:none; border-radius:5px; padding:6px 13px; cursor:pointer; font-size:12px; font-weight:600; font-family:inherit; transition:opacity .15s; white-space:nowrap; } .dev-btn:hover { opacity:.85; } .dev-btn-primary { background:var(--teal); color:#fff; } .dev-btn-accent { background:var(--orange); color:#fff; } .dev-btn-success { background:var(--white); color:var(--navy); border-color:rgba(255,255,255,0.4); } .dev-btn-ghost { background:rgba(255,255,255,.07); color:var(--white); border:1px solid var(--border); } .dev-btn-danger { background:var(--red); color:#fff; } .dev-btn-xs { padding:3px 8px; font-size:12px; } .dev-fpill { border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:12px; padding:2px 8px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; } .dev-fpill:hover, .dev-fpill.active { background:var(--teal); color:#fff; border-color:var(--teal); } /* --- IMPROVEMENTS PAGE + FOOTER BUTTON -------- */ .footer-suggest-btn { background: var(--white); border: none; color: var(--navy); border-radius: 6px; height: 26px; padding: 0 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .footer-suggest-btn:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); } background: rgba(232,146,74,.15); border: 1px solid rgba(232,146,74,.4); color: var(--orange); border-radius: 6px; padding: 5px 14px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; white-space: nowrap; } .footer-improve-btn:hover { background: rgba(232,146,74,.3); color: #fff; } .imp-hdr { display:flex; align-items:center; justify-content:space-between; padding:12px 20px 8px; border-bottom:1px solid var(--border); flex-shrink:0; } .imp-hdr-left { display:flex; align-items:center; gap:10px; } .imp-hdr-title { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; color:var(--white); letter-spacing:1px; } .imp-hdr-sub { font-size:13px; color:var(--muted); } .imp-hdr-right { display:flex; gap:8px; } .imp-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); flex-shrink:0; padding:0 12px; } .imp-tab { background:none; border:none; border-bottom:3px solid transparent; color:var(--muted); padding:10px 18px; cursor:pointer; font-size:12px; font-weight:600; font-family:inherit; transition:all .15s; } .imp-tab:hover { color:var(--white); } .imp-tab.active { color:var(--white); border-bottom-color:var(--orange); } .imp-tab-badge { display:inline; background:#E8924A; color:#fff; border-radius:10px; padding:0 6px; font-size:12px; margin-left:5px; vertical-align:middle; line-height:16px; } .imp-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; } .imp-filter-bar { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; } .imp-list { flex:1; overflow-y:auto; padding:10px 12px; } /* Improvement request cards */ .imp-card { border-radius:8px; padding:12px 14px; margin-bottom:8px; border:1px solid var(--border); background:rgba(255,255,255,.02); cursor:pointer; transition:all .15s; } .imp-card:hover { border-color:var(--orange); background:rgba(232,146,74,.05); } .imp-card-top { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; } .imp-card-title { font-size:13px; font-weight:700; color:var(--white); margin-bottom:4px; } .imp-card-meta { display:flex; gap:6px; font-size:12px; color:var(--muted); flex-wrap:wrap; margin-bottom:5px; } .imp-card-problem { font-size:13px; color:rgba(255,255,255,.65); line-height:1.4; } .imp-card-agent-note { font-size:12px; color:var(--teal); margin-top:5px; background:rgba(0,174,179,.08); border-radius:4px; padding:4px 8px; } .imp-card-actions { display:flex; gap:5px; margin-top:8px; opacity:0; transition:opacity .15s; } .imp-card:hover .imp-card-actions { opacity:1; } /* Skill watcher cards */ .imp-skill-card { border-radius:8px; padding:11px 13px; margin-bottom:7px; border:1px solid var(--border); background:rgba(255,255,255,.02); cursor:pointer; transition:all .15s; } .imp-skill-card:hover { border-color:var(--teal); background:rgba(0,174,179,.06); } .imp-skill-stat-bar { display:flex; gap:6px; padding:8px 12px; flex-wrap:wrap; border-bottom:1px solid var(--border); flex-shrink:0; } .iss-pill { display:flex; align-items:center; gap:4px; border-radius:20px; padding:3px 10px; font-size:13px; font-weight:600; } .iss-pill.safe { background:rgba(34,197,94,.15); color:#4ade80; } .iss-pill.caution { background:rgba(232,146,74,.15); color:var(--orange); } .iss-pill.blocked { background:rgba(217,95,95,.15); color:var(--red); } .iss-pill.approved { background:rgba(0,174,179,.15); color:var(--teal); } .iss-pill.installed{ background:rgba(74,222,128,.15); color:#4ade80; } .iss-pill.rejected { background:rgba(150,150,150,.1); color:var(--muted); } /* Detail modal sections */ .imp-detail-section { border:1px solid var(--border); border-radius:6px; padding:8px 10px; margin-bottom:8px; } .imp-detail-label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; } .imp-detail-val { font-size:12px; color:var(--white); line-height:1.5; white-space:pre-wrap; } /* Skill filter pills */ .dev-fpill.safe { border-color:rgba(34,197,94,.4); } .dev-fpill.caution { border-color:rgba(232,146,74,.4); } .dev-fpill.blocked { border-color:rgba(217,95,95,.4); } /* --- OPS / RMM / CONNECTWISE STYLES -------- */ /* ops-hdr - page title bar used across most pages. No top padding here - .main padding-top controls the gap from nav bars. */ .ops-hdr { display:flex;align-items:center;justify-content:space-between;padding:0 0 14px 0;margin-bottom:6px;border-bottom:1px solid var(--border);flex-shrink:0; } .ops-hdr-left { display:flex;align-items:center;gap:7px; } /* Emoji/icon beside title — match mega-nav label size (see .mg-top-btn) */ .ops-hdr-left > span:not(.ops-hdr-title) { font-size: 15px !important; line-height: 1; } /* Page hub titles — same typography as mega-nav top buttons (.mg-top-btn) */ .ops-hdr-title, .ops-title { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); } .ops-hdr-sub { font-size:13px;color:var(--muted); } /* Standard page title — icon + h1; optional .page-subtitle on next line. No padding-top: .main already offsets from sub-nav (same rule as .ops-hdr). */ .page-header { display:flex;align-items:center;gap:10px;padding:12px 0 10px 0;margin:0 0 8px 0; /* Static (2026-08-25, Nathan): previously position:sticky top:128px which made the title + ?/MD strip travel down the viewport and float over content in the sections below on every page. Now it sits at the top of the page and scrolls away with the content — no overlap. (chat override below is now the same, kept for clarity.) */ position:static; background:#f5f7fa; border-bottom:1px solid rgba(13,30,46,.08); } /* Chat page scrolls INSIDE #chat-messages (its own scroll area), so a window-level sticky header has nothing to stick to and slides over the chat. Pin it static at the top of the chat page instead — the messages scroll independently below it. */ #chat-page .page-header { position:static; top:auto; z-index:1; } /* chat model dropdown: force dark-on-white options (were inheriting white text = invisible) */ #chat-mode-select, #chat-mode-select option { color:#0d1e2e !important; background:#ffffff !important; } .page-header .page-icon { font-size:15px;line-height:1;flex-shrink:0; } .page-header .page-title { font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--white); letter-spacing:2.5px;text-transform:uppercase;margin:0; } .page-subtitle { font-size:12px;color:rgba(165,186,202,0.55);margin:0 0 16px 0;line-height:1.4; } /* ── MD-icon: per-page canonical-doc anchor (per DASHBOARD_CHANGES §0) ── Sits on the far right of any page header (.page-header / .admin-tab-title / anything using flex-row). Click opens /docs/.md — the spec for that page that staff can read or hand to an AI when context is lost. */ .md-icon { margin-left:auto; /* push to far-right of the flex header */ display:inline-flex;align-items:center;justify-content:center; flex-shrink:0; width:28px;height:20px; background:var(--yellow, #FDC52C); color:#0c1825; /* dark text on yellow for contrast */ font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:11px;letter-spacing:1px; border-radius:4px; text-decoration:none; border:1px solid rgba(0,0,0,0.15); box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:filter 0.15s, transform 0.05s; cursor:pointer; } .md-icon:hover { filter:brightness(1.10); } .md-icon:active { transform:translateY(1px); } .md-icon:focus-visible { outline:2px solid #fff;outline-offset:2px; } /* human-friendly "?" help icon — white on teal, sits directly left of the yellow MD icon */ /* color !important + high specificity so it beats ctz-light.css `a{color:#0a6c79!important}` (that global link rule was painting the "?" teal-on-teal = invisible). */ .md-icon.help-q { background:#0e7c8a !important; color:#ffffff !important; font-size:14px; letter-spacing:0; margin-right:6px; } .md-icon.help-q:hover { filter:brightness(1.12); color:#ffffff !important; } /* footer HELP button: force readable white-on-teal (theme was remapping color to white-on-white) */ .footer-help-btn { background:#0e7c8a !important; color:#ffffff !important; } .footer-help-btn:hover { background:#0b6772 !important; color:#ffffff !important; } .ops-hdr-right { display:flex;gap:8px;align-items:center;flex-wrap:wrap; } .ops-sync-group { display:flex;gap:6px;flex-wrap:wrap; } .ops-conn-bar { display:flex;align-items:center;gap:10px;padding:7px 16px;background:rgba(0,0,0,.15);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap; } .ops-dot { display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0; } .ops-dot.ok { background:#22c55e;box-shadow:0 0 6px #22c55e; } .ops-dot.err { background:#D95F5F; } .ops-dot.pending { background:#888;animation:devPulse 1.5s infinite; } .ops-kpis { display:flex;gap:10px;padding:12px 16px;flex-wrap:wrap;flex-shrink:0;border-bottom:1px solid var(--border); } .ops-kpi-card { flex:1;min-width:110px;background:rgba(255,255,255,.04);border:1px solid var(--border); border-radius:8px;padding:12px 14px;cursor:pointer;transition:border-color .15s; } .ops-kpi-card:hover { border-color:var(--teal); } .ops-kpi-card.accent { border-color:rgba(0,174,179,.3); } .ops-kpi-card.success { border-color:rgba(34,197,94,.3); } .ops-kpi-card.warn { border-color:rgba(232,146,74,.3); } .ops-kpi-card.danger { border-color:rgba(217,95,95,.3); } .ops-kpi-val { font-size:26px;font-weight:700;color:var(--white);font-family:'Barlow Condensed',sans-serif;line-height:1; } .ops-kpi-label { font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px; } .ops-kpi-mini { display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px; } .ops-kpi-mini > span:first-child { font-size:18px;font-weight:700;color:var(--white);font-family:'Barlow Condensed',sans-serif; } .ops-kpi-mini > span:last-child { font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap; } .ops-kpi-mini.danger { border-color:rgba(217,95,95,.4); } .ops-kpi-mini.warn { border-color:rgba(232,146,74,.4); } .ops-kpi-mini.success{ border-color:rgba(34,197,94,.4); } .ops-kpi-mini.accent { border-color:rgba(0,174,179,.4); } .ops-main-layout { display:flex;flex:1;min-height:0;overflow:hidden; } .ops-panel { display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border); } .ops-panel:last-child { border-right:none; } .ops-ticket-list { flex:1;overflow-y:auto;padding:8px; } .ops-agreement-list{ flex:1;overflow-y:auto;padding:8px; } /* Ticket cards */ .ops-ticket-card { border-radius:7px;padding:9px 11px;margin-bottom:5px; border:1px solid var(--border);background:rgba(255,255,255,.02); transition:border-color .12s; } .ops-ticket-card:hover { border-color:var(--teal); } .ops-tc-top { display:flex;align-items:center;gap:5px;margin-bottom:5px;flex-wrap:wrap; } .ops-tc-summary{ font-size:12px;font-weight:600;color:var(--white);margin-bottom:4px;line-height:1.3; } .ops-tc-meta { display:flex;gap:5px;font-size:12px;color:var(--muted);flex-wrap:wrap; } /* Agreement cards */ .ops-agreement-card { border-radius:7px;padding:10px 12px;margin-bottom:5px; border:1px solid var(--border);background:rgba(255,255,255,.02); cursor:pointer;transition:all .12s; } .ops-agreement-card:hover { border-color:var(--orange);background:rgba(232,146,74,.05); } .ops-ac-top { display:flex;align-items:center;gap:8px;margin-bottom:4px; } .ops-ac-type { font-size:11px;font-weight:700;background:rgba(0,174,179,.15);color:var(--teal);border-radius:4px;padding:2px 6px;text-transform:uppercase;letter-spacing:.4px; } .ops-ac-name { font-size:12px;font-weight:600;color:var(--white);margin-bottom:3px; } .ops-ac-meta { display:flex;gap:5px;font-size:12px;color:var(--muted);flex-wrap:wrap; } /* Customer cards (RMM) */ .ops-customer-card { padding:8px 10px;border-bottom:1px solid var(--border); cursor:pointer;transition:background .12s; } .ops-customer-card:hover { background:rgba(0,174,179,.08); } .ops-customer-card.selected { background:rgba(0,174,179,.15);border-left:3px solid var(--teal); } /* Compliance check items */ .comp-check-item { display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--white); } .comp-check-status { font-size:14px; } .comp-check-status.ok { color:#22c55e; } .comp-check-status.pending { color:var(--muted); } .comp-check-status.warn { color:var(--orange); } /* -------- TELESALES MODULE - main.css additions -------- */ /* -- Layout -------- */ /* Same rhythm as Leads (.main): 16px top when sub-nav + page-header row; 28px horizontal; 22px bottom */ .ts-wrap { padding: 54px 28px 22px 28px; min-height: 60vh; max-width: 1700px; margin: 0 auto; box-sizing: border-box; } body.has-sub-nav .ts-wrap { padding-top: 16px; } .ts-topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 14px 0; margin-bottom: 6px; border-bottom: 1px solid var(--border); background: transparent; flex-wrap: wrap; gap: 10px; } .ts-topbar-left { display: flex; align-items: center; gap: 10px; } .ts-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ts-page-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: 1px; } .ts-period-pills { display: flex; gap: 4px; } .ts-pill { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--muted); border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: var(--font); transition: all .15s; } .ts-pill.active, .ts-pill:hover { background: var(--teal); border-color: var(--teal); color: #fff; } .ts-filter-select { background: var(--navy3); border: 1px solid rgba(255,255,255,0.12); color: var(--white); border-radius: 6px; padding: 5px 10px; font-size: 13px; font-family: var(--font); cursor: pointer; } .ts-tab-content { display: none; } .ts-tab-content.active { display: block; } /* -- Core Goals -------- */ .ts-goals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 0 20px; } .ts-goal-card { background: var(--navy2); border-radius: 10px; padding: 18px 20px; border: 1px solid rgba(255,255,255,0.06); text-align: center; border-top: 3px solid var(--teal); } .ts-goal-green { border-top-color: #4CAF50; } .ts-goal-blue { border-top-color: #5B9BD5; } .ts-goal-gold { border-top-color: #FDC52C; } .ts-goal-teal { border-top-color: var(--teal); } .ts-goal-value { font-size: 30px; font-weight: 800; color: var(--white); margin-bottom: 4px; } .ts-goal-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } /* -- KPI Grid -------- */ .ts-kpi-grid { display: flex; flex-direction: column; gap: 18px; padding: 0 0 20px; } .ts-kpi-section { background: var(--navy2); border-radius: 10px; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.06); } .ts-kpi-section-title { font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; } .ts-kpi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ts-kpi-card { background: var(--navy3); border-radius: 8px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.05); } .ts-kpi-val { font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 2px; } .ts-ai-badge { color: #9B59B6; font-size: 13px !important; } .ts-ai-card { border-color: rgba(155,89,182,0.2); } .ts-kpi-name { font-size: 12px; color: var(--muted); } .ts-kpi-target { font-size: 13px; color: #556; margin-top: 2px; } .ts-kpi-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 8px; } .ts-kpi-bar-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width .4s; } /* -- Section card / leaderboard -------- */ .ts-section-card { background: var(--navy2); border-radius: 10px; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.06); margin: 0 0 20px; } .ts-section-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--white); } .ts-section-sub { font-size: 12px; color: var(--muted); font-weight: 400; } .ts-section-title { font-size: 15px; font-weight: 700; color: var(--white); } .ts-lb-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ts-lb-table th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.07); } .ts-lb-table td { padding: 9px 10px; color: #e2e8f0; border-bottom: 1px solid rgba(255,255,255,0.04); } .ts-lb-row:hover { background: rgba(255,255,255,0.03); } .ts-lb-top { background: rgba(7,93,103,0.12); } /* -- Campaigns -------- */ .ts-campaigns-hdr { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 0 16px; } .ts-camp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 0 20px; } .ts-camp-card { background: var(--navy2); border-radius: 10px; padding: 18px; border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 12px; } .ts-camp-card:hover { border-color: var(--teal); transform: translateY(-2px); } .ts-camp-empty { border-style: dashed; opacity: 0.5; align-items: center; justify-content: center; min-height: 200px; } .ts-camp-empty:hover { opacity: 0.8; } .ts-camp-empty-inner { text-align: center; } .ts-camp-empty-icon { font-size: 32px; color: var(--muted); } .ts-camp-empty-label { font-size: 14px; color: var(--white); margin-top: 8px; } .ts-camp-empty-sub { font-size: 12px; color: var(--muted); } .ts-camp-card-hdr { display: flex; justify-content: space-between; align-items: flex-start; } .ts-camp-name { font-size: 14px; font-weight: 700; color: var(--white); } .ts-camp-source { font-size: 13px; color: var(--muted); margin-top: 2px; } .ts-camp-status { font-size: 12px; border: 1px solid; border-radius: 10px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .5px; } .ts-camp-mode .ts-mode-pill { background: rgba(255,255,255,0.07); color: var(--muted); border-radius: 12px; padding: 3px 10px; font-size: 13px; display: inline-block; } .ts-mode-pill.ts-mode-ai { background: rgba(155,89,182,0.15); color: #9B59B6; } .ts-camp-stats { display: grid; grid-template-columns: repeat(4,1fr); text-align: center; } .ts-cs-val { font-size: 18px; font-weight: 700; color: var(--white); } .ts-cs-label { font-size: 12px; color: var(--muted); text-transform: uppercase; } .ts-camp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } /* -- List Builder -------- */ .ts-list-builder { background: #ffffff; border-radius: 10px; padding: 18px 22px; border: 1px solid rgba(13,30,46,.15); margin: 0 0 14px; } .ts-lb-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ts-lb-title { font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; display: block; } .ts-lb-total-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(14,154,171,0.15); border: 1px solid rgba(14,154,171,0.35); border-radius: 20px; padding: 2px 12px; font-size: 13px; font-weight: 700; color: #0e9aab; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.3px; } /* All filter groups: equal min-width, vertical flex, consistent gap */ .ts-lb-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .ts-lb-filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 160px; } .ts-lb-filter-group label { font-size: 13px; color: #5c6b78; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; line-height: 1; } /* Shared style for ALL filter controls - selects + search input (white theme) */ .ts-lb-filter-group select, .ts-lb-select { background: #ffffff; border: 1px solid rgba(13,30,46,.22); color: #0d1e2e; border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: var(--font); color-scheme: light; height: 34px; box-sizing: border-box; width: 100%; cursor: pointer; } .ts-lb-filter-group select:focus, .ts-lb-select:focus { outline: none; border-color: var(--teal); } /* Search input matches height and style of selects */ .ts-input { background: #ffffff; border: 1px solid rgba(13,30,46,.22); color: #0d1e2e; border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: var(--font); color-scheme: light; height: 34px; box-sizing: border-box; width: 100%; } .ts-input:focus { outline: none; border-color: var(--teal); } .ts-input::placeholder { color: rgba(13,30,46,.45); } .ts-lb-search-group { min-width: 180px; flex: 1; max-width: 260px; } /* ── Enrichment Pipeline Flow Panel ── */ .flow-stage { flex: 1; min-width: 110px; max-width: 160px; background: var(--navy2); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid #0e9aab; padding: 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; } .flow-stage-icon { font-size: 18px; margin-bottom: 2px; } .flow-stage-label { font-size: 12px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: rgba(165,186,202,0.5); } .flow-stage-count { font-size: 24px; font-weight: 800; font-family: 'Barlow Condensed', sans-serif; line-height: 1.1; margin: 2px 0; } .flow-stage-sub { font-size: 12px; color: rgba(165,186,202,0.4); white-space: nowrap; } .flow-stage-badge { margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; background: rgba(165,186,202,0.08); border-radius: 8px; padding: 1px 7px; color: rgba(165,186,202,0.4); } .flow-stage-badge.ok { background: rgba(76,175,125,0.15); color: #4CAF7D; } .flow-stage-badge.warn { background: rgba(253,197,44,0.15); color: #FDC52C; } .flow-stage-badge.err { background: rgba(255,107,107,0.15); color: #ff6b6b; } .flow-arrow { display: flex; align-items: center; color: rgba(165,186,202,0.2); font-size: 18px; padding: 0 4px; flex-shrink: 0; } /* -- Call List Table -------- */ .ts-calllist-wrap { padding: 0 0 20px; overflow-x: auto; } .ts-call-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #ffffff; border: 1px solid rgba(13,30,46,.15); border-radius: 10px; overflow: hidden; } .ts-call-table th { background: #e9eef3; color: #5c6b78; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.12); white-space: nowrap; vertical-align: bottom; } .ts-call-table td { padding: 10px 12px; color: #1f2933; border-bottom: 1px solid rgba(0,0,0,0.06); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-call-table td:first-child { white-space: normal; } /* Company col wraps — others clip */ .ts-cl-row { cursor: pointer; transition: background .1s; } .ts-cl-row:hover { background: rgba(7,93,103,0.1); } .ts-contact-name { color: #0d1e2e; font-weight: 600; font-size: 13px; line-height: 1.25; } .ts-contact-title { color: #5c6b78; font-size: 13px; margin-top: 2px; line-height: 1.2; } .ts-no-contact { color: #8a98a5; font-size: 12px; font-style: italic; } .ts-row-urgent { border-left: 3px solid #ff6b6b; } /* Callback row tinting — added 2026-04-28 with the Callback column. Subtle background tint so the date in the Callback column is the primary signal but the row is still scannable at a glance. */ .ts-cl-row.ts-row-cb-overdue { background: rgba(224,138,138,0.08); } .ts-cl-row.ts-row-cb-overdue:hover { background: rgba(224,138,138,0.16); } .ts-cl-row.ts-row-cb-today { background: rgba(253,197,44,0.10); } .ts-cl-row.ts-row-cb-today:hover { background: rgba(253,197,44,0.18); } .ts-cl-row.ts-row-cb-upcoming { background: rgba(76,175,118,0.06); } .ts-cl-row.ts-row-cb-upcoming:hover{ background: rgba(76,175,118,0.14); } .ts-tel-link { color: var(--teal); text-decoration: none; } .ts-tel-link:hover { text-decoration: underline; } .ts-empty-state { text-align: center; color: #5c6b78; padding: 32px; font-size: 14px; } /* 2026-06-10: faint navy-theme greys are unreadable inside the now-white call list + list builder. Darken just those faint inline tokens to a readable slate. */ .ts-call-table [style*="165,186,202"], .ts-list-builder [style*="165,186,202"], .ts-call-table [style*="#8aa0b0"], .ts-call-table [style*="rgba(255,255,255"]{ color:#5c6b78 !important; } .ts-call-table td .ts-cl-secondary, .ts-call-table td small{ color:#5c6b78 !important; } /* default any un-coloured cell text to dark navy on the white rows */ .ts-call-table tbody td{ color:#1f2933; } .ts-list-pagination { padding: 12px 0; display: flex; align-items: center; gap: 8px; } /* -- Buttons -------- */ .ts-btn { background: var(--navy3); border: 1px solid rgba(255,255,255,0.12); color: var(--white); border-radius: 6px; padding: 0 14px; font-size: 13px; cursor: pointer; font-family: var(--font); transition: all .15s; white-space: nowrap; height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; } .ts-btn:hover { border-color: var(--teal); color: var(--teal); } .ts-btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; } .ts-btn-primary:hover { background: var(--navy); color: var(--teal); } .ts-btn-teal { border-color: var(--teal); color: var(--teal); } .ts-btn-teal:hover { background: var(--teal); color: #fff; } .ts-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.1); color: var(--muted); } .ts-btn-ghost:hover { border-color: var(--teal); color: var(--teal); } .ts-btn-sm { padding: 4px 10px; font-size: 12px; } .ts-dial-quick { background: rgba(7,93,103,0.2); border-color: var(--teal); color: var(--teal); padding: 4px 8px; font-size: 14px; } /* -- Contact Panel (slide-in) -------- */ .ts-panel-overlay { /* Full-screen transparent layer - panel floats freely */ display: none; position: fixed; inset: 0; background: transparent; z-index: 500; pointer-events: none; } .ts-panel-overlay.open { display: block; } /* -- Draggable floating panel -------- */ .ts-panel { background: #001f35; color: #e2e8f0; width: min(520px, 95vw); border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2); /* Panel is the scroll container — sticky header works within it */ overflow-y: auto; overflow-x: hidden; /* Draggable positioning */ position: fixed; top: 60px; right: 20px; height: auto; max-height: calc(100vh - 80px); min-width: 360px; min-height: 200px; pointer-events: all; transition: box-shadow 0.15s ease; resize: both; } .ts-panel.ts-dragging { box-shadow: 0 28px 80px rgba(0,0,0,0.45); opacity: 0.96; user-select: none; } @keyframes tsSlideIn { from{transform:scale(0.97);opacity:0} to{transform:scale(1);opacity:1} } .ts-panel-hdr { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #002B49; border-bottom: 2px solid #075D67; /* Sticks to top of the scrollable panel — close/X always visible */ position: sticky; top: 0; z-index: 10; cursor: grab; min-height: 44px; } .ts-panel-hdr:active { cursor: grabbing; } .ts-panel-company { font-size: 16px; font-weight: 700; color: #ffffff; } .ts-panel-contact { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; } /* Close button: always visible, red tint on hover */ .ts-panel-close { background: rgba(183,60,60,0.1); border: 1px solid rgba(183,60,60,0.25); color: rgba(255,255,255,0.8); font-size: 16px; cursor: pointer; padding: 3px 9px; border-radius: 4px; flex-shrink: 0; transition: background 0.15s; } .ts-panel-close:hover { background: rgba(183,60,60,0.4); color: #fff; } /* Panel body - this is the scrollable area */ /* Panel body sections — no individual overflow needed; panel itself scrolls */ .ts-panel > div:not(.ts-panel-hdr) { overflow: visible; } .ts-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 14px 20px; background: #001f35; } .ts-panel-field { padding: 7px 0; border-bottom: 1px solid rgba(165,186,202,0.08); } .ts-pf-label { font-size: 13px; color: rgba(165,186,202,0.55); display: block; margin-bottom: 2px; } .ts-pf-val { font-size: 13px; color: #e2e8f0; } .ts-panel-notes { padding: 10px 20px; } .ts-context-note { background: rgba(7,93,103,0.12); border-left: 3px solid var(--teal); border-radius: 4px; padding: 10px 14px; font-size: 13px; color: #e2e8f0; margin-bottom: 8px; } .ts-notes-raw { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; } /* -- Dial section -------- */ .ts-dial-section { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .ts-dial-mode-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .ts-dial-label { font-size: 12px; color: var(--muted); } .ts-mode-btn { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--muted); border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: var(--font); transition: all .15s; } .ts-mode-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; } .ts-dial-btn { width: 100%; padding: 13px; background: var(--teal); border: none; color: #fff; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font); transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 10px; } .ts-dial-btn:hover { filter: brightness(1.15); transform: translateY(-1px); } .ts-dial-icon { font-size: 18px; } .ts-dial-note { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; } /* -- Outcome buttons -------- */ .ts-outcome-section { padding: 14px 20px; } .ts-outcome-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .ts-outcome-btns { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; margin-bottom: 10px; } .ts-out-btn { padding: 7px 4px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: all .15s; text-align: center; text-transform: uppercase; background: rgba(0,20,40,0.7); color: #ffffff; } .ts-out-lost { background: rgba(140,30,30,0.75); color: #fff; border-color: rgba(255,107,107,0.4); } .ts-out-callback { background: rgba(30,70,130,0.75); color: #fff; border-color: rgba(91,155,213,0.4); } .ts-out-quote { background: rgba(120,85,0,0.75); color: #fff; border-color: rgba(253,197,44,0.4); } .ts-out-demo { background: rgba(80,40,120,0.75); color: #fff; border-color: rgba(180,120,255,0.4); } .ts-out-info { background: rgba(0,70,100,0.75); color: #fff; border-color: rgba(0,180,220,0.4); } .ts-out-meet { background: rgba(20,90,35,0.75); color: #fff; border-color: rgba(76,175,80,0.4); } .ts-out-won { background: #ffffff; color: #1a56db; border-color: #1a56db; } .ts-out-meeting { background: #ffffff; color: #1a56db; border-color: #1a56db; } .ts-out-btn:hover { filter: brightness(1.3); transform: scale(1.04); border-width: 2px; } .ts-out-selected { filter: brightness(1.35); transform: scale(1.04); border-width: 2px; outline: 2px solid rgba(255,255,255,0.4); } .ts-outcome-notes { width: 100%; background: var(--navy3); border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: var(--font); resize: vertical; box-sizing: border-box; } /* -- Objection Guide -------- */ .ts-obj-section { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.06); } .ts-obj-title { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 4px; } .ts-obj-subtitle { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .ts-obj-btns { display: flex; flex-wrap: wrap; gap: 8px; } .ts-obj-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #e2e8f0; border-radius: 6px; padding: 7px 12px; font-size: 12px; cursor: pointer; font-family: var(--font); transition: all .15s; } .ts-obj-btn:hover { background: rgba(7,93,103,0.2); border-color: var(--teal); color: var(--teal); } .ts-obj-response { padding: 8px 0; } .ts-obj-resp-objection { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 12px; } .ts-obj-resp-block { background: var(--navy3); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; } .ts-obj-resp-hdr { font-size: 13px; color: var(--teal); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; } .ts-obj-resp-text { font-size: 13px; color: #e2e8f0; line-height: 1.5; } .ts-obj-proof { border-left: 3px solid var(--teal); } .ts-obj-back { margin-top: 4px; font-size: 12px; } /* -- History -------- */ .ts-history-section { padding: 14px 20px 24px; border-top: 1px solid rgba(255,255,255,0.06); } .ts-history-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .ts-hist-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; } .ts-hist-date { color: var(--muted); min-width: 80px; } .ts-hist-rep { color: #e2e8f0; flex: 1; } .ts-hist-dur { color: var(--muted); min-width: 35px; } .ts-hist-note { color: #888; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; } /* -- Campaign Modal -------- */ .ts-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 600; align-items: center; justify-content: center; } .ts-modal { background: var(--navy2); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); width: min(520px,92vw); max-height: 90vh; overflow-y: auto; } .ts-modal-hdr { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 15px; font-weight: 700; color: var(--white); } .ts-modal-hdr button { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; } .ts-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; } .ts-modal-footer { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: flex-end; gap: 10px; } .ts-form-row { display: flex; flex-direction: column; gap: 5px; } .ts-form-row label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .ts-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* -- Reps page -------- */ .ts-rep-full-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--navy2); border-radius: 10px; overflow: hidden; margin: 0; } .ts-rep-full-table th { background: var(--navy3); color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px; text-align: left; } .ts-rep-full-table td { padding: 10px 12px; color: #e2e8f0; border-bottom: 1px solid rgba(255,255,255,0.04); } .ts-rep-row:hover { background: rgba(255,255,255,0.03); cursor: pointer; } /* -- Responsive -------- */ @media (max-width: 1100px) { .ts-goals-row { grid-template-columns: repeat(2,1fr); } .ts-camp-cards { grid-template-columns: repeat(2,1fr); } .ts-kpi-cards { grid-template-columns: repeat(2,1fr); } } @media (max-width: 700px) { .ts-goals-row { grid-template-columns: 1fr 1fr; } .ts-camp-cards { grid-template-columns: 1fr; } .ts-outcome-btns { grid-template-columns: repeat(2,1fr); } .ts-lb-filters { flex-direction: column; } } /* -------- TELESALES GUIDES - CSS -------- */ /* Guide pills above call list */ .ts-guide-pills-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 0; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 12px; } .ts-guide-pills-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .ts-guide-pill { display: flex; align-items: center; gap: 6px; background: rgba(7,93,103,0.15); border: 1px solid rgba(7,93,103,0.4); color: var(--white); border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: var(--font); transition: all .15s; } .ts-guide-pill:hover { background: rgba(7,93,103,0.35); border-color: var(--teal); } .ts-gp-num { background: var(--teal); color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 12px; font-weight: 700; } .ts-gp-name { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-gp-edit { color: var(--muted); font-size: 13px; } /* Row guide button */ .ts-row-guide-btn { font-size: 13px !important; } /* Guide Edit Panel */ .ts-guide-panel { width: min(680px,96vw); } .ts-gm-hdr-section { padding-bottom: 16px; } .ts-gm-slot-badge { display: inline-block; background: var(--teal); color: #fff; border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 700; margin-bottom: 12px; } .ts-gm-fields { display: flex; flex-direction: column; gap: 10px; } .ts-gm-field-row { display: flex; flex-direction: column; gap: 4px; } .ts-gm-field-row label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .ts-gm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ts-gm-input { width: 100%; box-sizing: border-box; } .ts-gm-cta-box { background: rgba(7,93,103,0.12); border-left: 3px solid var(--teal); border-radius: 4px; padding: 8px 12px; font-size: 12px; color: #e2e8f0; margin-top: 6px; } .ts-gm-actions-top { margin-top: 12px; } .ts-gm-divider { border-top: 1px solid rgba(255,255,255,0.07); margin: 16px 0; } /* Questions editor */ .ts-gm-q-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--white); } .ts-gm-page-toggle { display: flex; gap: 4px; } .ts-gmp-btn { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--muted); border-radius: 5px; padding: 4px 10px; font-size: 13px; cursor: pointer; font-family: var(--font); } .ts-gmp-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; } .ts-gm-question { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.18); } .ts-gmq-num { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #ffffff; color: #001f35; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } .ts-gmq-body { flex: 1; display: flex; flex-direction: column; gap: 8px; } .ts-gmq-text { width: 100%; box-sizing: border-box; resize: vertical; } .ts-gmq-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .ts-gmq-field { display: flex; flex-direction: column; gap: 3px; } .ts-gmq-field label { font-size: 12px; color: var(--muted); text-transform: uppercase; } .ts-gmq-objection { background: rgba(0,0,0,0.2); border-radius: 5px; padding: 8px 10px; } .ts-gmq-obj-hdr { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .ts-gmq-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* -- Call Guide Panel -------- */ .ts-callguide-panel { width: min(640px,96vw); max-width:680px; } .ts-cg-panel-hdr { background: rgba(7,93,103,0.2); } .ts-cg-guide-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .ts-cg-guide-tab { background: transparent; border: none; border-right: 1px solid rgba(255,255,255,0.06); color: var(--muted); padding: 8px 4px; cursor: pointer; font-family: var(--font); font-size: 13px; text-align: center; transition: all .15s; display: flex; flex-direction: column; gap: 2px; } .ts-cg-guide-tab span { font-weight: 700; color: var(--white); font-size: 13px; } .ts-cg-guide-tab small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-cg-guide-tab.active { background: rgba(7,93,103,0.25); color: var(--teal); border-bottom: 2px solid var(--teal); } .ts-cg-guide-tab:hover { background: rgba(7,93,103,0.15); } .ts-cg-guide-header { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); } .ts-cg-guide-name { font-size: 14px; font-weight: 700; color: var(--white); } .ts-cg-guide-desc { font-size: 12px; color: var(--muted); margin-top: 2px; } .ts-cg-goal { font-size: 12px; color: var(--teal); margin-top: 4px; } .ts-cg-cta-banner { background: rgba(7,93,103,0.2); border: 1px solid rgba(7,93,103,0.5); border-radius: 5px; padding: 7px 12px; margin-top: 8px; font-size: 12px; color: #e2e8f0; display: flex; align-items: center; gap: 8px; } .ts-cg-cta-label { background: var(--teal); color: #fff; border-radius: 3px; padding: 1px 6px; font-size: 12px; font-weight: 700; white-space: nowrap; } .ts-cg-page-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ts-cgp-btn { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--muted); border-radius: 5px; padding: 4px 10px; font-size: 13px; cursor: pointer; font-family: var(--font); } .ts-cgp-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; } .ts-cg-progress { margin-left: auto; font-size: 13px; color: var(--teal); } .ts-cg-questions-scroll { overflow-y: auto; max-height: 380px; padding: 0 16px; scrollbar-width: thin; } .ts-cg-question { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.15); transition: background .1s; } .ts-cg-question.ts-cg-q-answered { background: rgba(7,93,103,0.06); border-radius: 4px; padding: 12px 8px; } .ts-cg-qnum { min-width: 22px; height: 22px; border-radius: 50%; background: #ffffff; color: #001f35; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .ts-cg-q-answered .ts-cg-qnum { background: rgba(7,93,103,0.4); color: var(--teal); } .ts-cg-qbody { flex: 1; display: flex; flex-direction: column; gap: 7px; } .ts-cg-qtext { font-size: 13px; color: var(--white); font-weight: 500; line-height: 1.4; } .ts-cg-input { width: 100%; box-sizing: border-box; resize: vertical; } .ts-cg-yn-btns { display: flex; gap: 6px; } .ts-cg-yn { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--muted); border-radius: 5px; padding: 4px 14px; font-size: 12px; cursor: pointer; font-family: var(--font); } .ts-cg-yn-yes { background: rgba(76,175,80,0.2); border-color: #4CAF50; color: #4CAF50; font-weight: 600; } .ts-cg-yn-no { background: rgba(255,107,107,0.2); border-color: #ff6b6b; color: #ff6b6b; font-weight: 600; } .ts-cg-yn-na { background: rgba(136,136,136,0.2); border-color: #888; color: #888; } .ts-cg-objection { margin-top: 2px; } .ts-cg-obj-toggle { background: rgba(253,197,44,0.08); border: 1px solid rgba(253,197,44,0.3); color: #FDC52C; border-radius: 4px; padding: 3px 10px; font-size: 13px; cursor: pointer; font-family: var(--font); width: 100%; text-align: left; } .ts-cg-obj-hint { background: rgba(253,197,44,0.06); border-left: 3px solid #FDC52C; border-radius: 0 4px 4px 0; padding: 8px 12px; font-size: 12px; color: #e2e8f0; line-height: 1.5; margin-top: 4px; } .ts-cg-field-badge { font-size: 12px; color: var(--teal); opacity: 0.6; font-family: monospace; margin-top: 2px; } /* Notes section */ .ts-cg-notes-section { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.07); } .ts-cg-notes-label { font-size: 13px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; } .ts-cg-notes { width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px; } /* Footer */ .ts-cg-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); background: var(--navy); position: sticky; bottom: 0; } .ts-cg-footer-info { font-size: 12px; color: var(--muted); } .ts-cg-footer-btns { display: flex; gap: 8px; } /* Enrichment prompt overlay */ .ts-enrich-overlay { position: absolute; inset: 0; background: rgba(0,16,35,0.92); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; } .ts-enrich-prompt { background: var(--navy2); border-radius: 10px; padding: 20px; border: 1px solid rgba(7,93,103,0.5); max-width: 480px; width: 100%; } .ts-ep-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 14px; } .ts-ep-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .ts-ep-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border-radius: 5px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: #e2e8f0; } .ts-ep-row input { accent-color: var(--teal); } .ts-ep-footer { display: flex; justify-content: flex-end; gap: 8px; } /* Toast */ .ts-toast { position: fixed; bottom: 80px; right: 20px; z-index: 9999; background: var(--navy); border: 1px solid var(--teal); color: var(--teal); border-radius: 8px; padding: 10px 18px; font-size: 13px; font-family: var(--font); transform: translateY(20px); opacity: 0; transition: all .25s; pointer-events: none; } .ts-toast-show { transform: translateY(0); opacity: 1; } /* Campaign modal guide checkboxes */ .ts-camp-guide-checks { display:flex;flex-direction:column;gap:6px; } .ts-camp-guide-check { display:flex;align-items:center;gap:8px;padding:6px 10px; background:rgba(255,255,255,0.04);border-radius:5px;cursor:pointer; font-size:13px;color:#e2e8f0; } .ts-camp-guide-check:hover { background:rgba(7,93,103,0.1); } .ts-camp-guide-check input { accent-color:var(--teal); } .ts-cgc-slot { background:var(--teal);color:#fff;border-radius:3px; padding:1px 5px;font-size:12px;font-weight:700;white-space:nowrap; } /* -- White panel content overrides -------- */ .ts-panel .ts-panel-field { padding: 7px 0; border-bottom: 1px solid rgba(165,186,202,0.08); } .ts-panel .ts-pf-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(165,186,202,0.5); margin-bottom: 3px; } .ts-panel .ts-pf-val { font-size: 13px; color: #e2e8f0; } .ts-panel .ts-panel-notes { padding: 10px 20px; background: transparent; } .ts-panel .ts-outcome-section { border-top: 1px solid rgba(165,186,202,0.12); background: rgba(0,43,73,0.4); padding: 14px 20px; } .ts-panel .ts-outcome-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(165,186,202,0.5); margin-bottom: 8px; } .ts-panel .ts-outcome-notes { background: rgba(0,0,0,0.2); border: 1px solid rgba(165,186,202,0.15); color: #e2e8f0; border-radius: 6px; padding: 8px 10px; font-size: 12px; width: 100%; box-sizing: border-box; resize: vertical; } .ts-panel .ts-history-section { padding: 14px 20px; border-top: 1px solid rgba(165,186,202,0.12); } .ts-panel .ts-history-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(165,186,202,0.5); margin-bottom: 8px; } .ts-panel .ts-obj-section { padding: 14px 20px; background: rgba(0,43,73,0.3); border-top: 1px solid rgba(165,186,202,0.12); } .ts-panel .ts-obj-title { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 4px; } .ts-panel .ts-obj-subtitle { font-size: 13px; color: rgba(165,186,202,0.5); margin-bottom: 10px; } .ts-panel .ts-obj-btn { background: rgba(165,186,202,0.08); border: 1px solid rgba(165,186,202,0.18); color: #a5baca; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: background 0.15s; } .ts-panel .ts-obj-btn:hover { background: rgba(165,186,202,0.15); color: #e2e8f0; } .ts-panel .ts-obj-resp-objection { font-size: 12px; font-weight: 700; color: #ff6b6b; margin-bottom: 10px; } .ts-panel .ts-obj-resp-hdr { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(165,186,202,0.5); margin-bottom: 6px; } .ts-panel .ts-obj-resp-text { font-size: 13px; color: #e2e8f0; line-height: 1.5; } .ts-panel .ts-obj-resp-block { background: rgba(0,43,73,0.5); border: 1px solid rgba(165,186,202,0.12); border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; } .ts-panel .ts-obj-back { background: rgba(165,186,202,0.08); border: 1px solid rgba(165,186,202,0.18); color: #a5baca; border-radius: 6px; padding: 6px 14px; font-size: 12px; cursor: pointer; margin-top: 6px; } .ts-panel .ts-dial-section { padding: 14px 20px; background: #002B49; } /* Call guide panel */ .ts-callguide-panel { background: #ffffff !important; color: #2d3748 !important; } .ts-cg-panel-hdr { background: #002B49 !important; cursor: grab !important; } .ts-cg-panel-hdr:active { cursor: grabbing !important; } #ts-cg-content { background: #ffffff; color: #2d3748; } .ts-cg-guide-tab { background: #edf2f7; border: 1px solid #e2e8f0; color: #4a5568; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; } .ts-cg-guide-tab.active { background: #002B49; color: #fff; border-color: #075D67; } /* Company record panel */ .ts-company-panel-inner { background: #ffffff !important; color: #2d3748 !important; border-radius: 10px !important; width: min(660px,96vw) !important; } /* Drag handle indicator */ .ts-drag-handle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 2px; pointer-events: none; } /* -- Standard page header -- uniform 16px gap from nav/sub-nav on every page ------- */ .pg-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;} .pg-hdr-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#ffffff;line-height:1.1;} .pg-hdr-sub{font-size:13px;color:rgba(165,186,202,0.45);margin-top:3px;letter-spacing:0.5px;} /* ── Telesales UI Fixes — permanent (not JS-injected) ── */ #ts-lb-search { height: 34px !important; box-sizing: border-box; } .ts-no-contact { color: #8a98a5 !important; font-size: 12px; } #ts-called-wrap { display: none !important; } #ts-called-header-row { display: none !important; } /* ══ CALL LIST FIXES 2026-04-07 ══════════════════════════════════════════════ 1. Tel column text — white (was light blue/hard to read) 2. CE/CERT column text — white 3. List Builder & Filters padding 4. History/Called panel — permanently hidden ══════════════════════════════════════════════════════════════════════════ */ /* White-theme (2026-06-12): the call list is white now, so the old "make the column white" rules below printed white-on-white. Column text colour comes from the base .ts-call-table td rule (#1f2933). Only keep the overflow rule. */ .ts-call-table td:nth-child(6) { overflow: visible !important; white-space: nowrap; } /* List Builder & Filters — proper padding */ .ts-list-builder { padding: 18px 22px !important; } /* Hide call history / called wrap permanently */ #ts-called-wrap { display: none !important; } #ts-called-header-row { display: none !important; } .ts-called-section { display: none !important; } /* 📋 LIST BUILDER & FILTERS title */ .ts-lb-title { color: var(--yellow) !important; } /* ══ CALL LIST FIXES v2 2026-04-07 — CORRECT COLUMN POSITIONS ════════════ After V4 renderer fix (nameCell folded into Company): col 1=Company, 2=Tel, 3=Industry, 4=Size, 5=Cert, 6=Renewal, 7=Status, 8=Action ══════════════════════════════════════════════════════════════════════════ */ /* White-theme columns (2026-06-12): table background is white. The old rules forced white text (invisible on white) and assumed an 8-col layout from before the Callback column was inserted. Body colours now come from the base block (#1f2933); here we set only the readable phone accent + header weight. */ .ts-call-table td:nth-child(2) .ts-tel-link { color: var(--teal); text-decoration: none; font-weight: 600; } .ts-call-table td:nth-child(2) .ts-tel-link:hover { text-decoration: underline; } .ts-call-table td:nth-child(2) .ts-no-phone { color: var(--teal); font-weight: 600; } .ts-call-table td:nth-child(2) .ts-no-contact { color: #8a98a5; } /* Renewal column can overflow its clip — allow it */ .ts-call-table td:nth-child(6) { overflow: visible !important; white-space: nowrap; } /* Column header titles — dark slate, clearly readable on the light header bar */ .ts-call-table th { color: #334155 !important; font-weight: 700; } /* List Builder more padding (top area) */ .ts-list-builder { padding: 18px 22px !important; } .ts-lb-title { color: var(--yellow) !important; font-weight: 700 !important; } /* Contact name + title below the company name — readable on white (2026-06-12) */ .ts-call-table .ts-contact-name { color: #0d1e2e !important; font-size: 13px !important; font-weight: 600 !important; margin-top: 2px; } .ts-call-table .ts-contact-title { color: #5c6b78 !important; font-size: 12px !important; } /* ══ TELESALES FIXES 2026-04-07 v3 ══════════════════════════════════════════ CE/CE+ badge yellow, spinner animation, pagination style, cert badge colours corrected ══════════════════════════════════════════════════════════════════════════ */ /* Spinner keyframes */ @keyframes ts-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* CE / CE+ cert badges — yellow (were dark/invisible) */ .ts-cert-badge { background: #FDC52C !important; color: #002B49 !important; font-weight: 800 !important; font-size: 12px !important; padding: 2px 6px !important; border-radius: 4px !important; letter-spacing: 0.04em !important; border: none !important; } .ts-cert-badge.ce-plus { background: #FDC52C !important; color: #002B49 !important; } .ts-cert-badge.ce { background: rgba(253,197,44,0.25) !important; color: #FDC52C !important; border: 1px solid rgba(253,197,44,0.5) !important; } /* Pagination — style the page size + number buttons */ .ts-list-pagination { padding: 8px 0; font-size: 12px; color: rgba(165,186,202,0.8); } .ts-page-btn { display: inline-block; padding: 2px 7px; margin: 0 2px; border: 1px solid rgba(165,186,202,0.2); border-radius: 4px; background: transparent; color: rgba(165,186,202,0.8); cursor: pointer; font-size: 13px; } .ts-page-btn:hover, .ts-page-btn.active { background: rgba(253,197,44,0.15); border-color: rgba(253,197,44,0.4); color: #FDC52C; } .ts-page-btn.active { font-weight: 700; } /* Renewal date cell — compact, no wrap */ .ts-call-table td:nth-child(6) span { white-space: nowrap; } /* Remove the top bar area gap */ .ts-topbar { display: none !important; } /* Apollo sub-nav - anchored in flow, not sticky */ #apollo-sub-nav { position: relative !important; top: auto !important; } /* ── CONTEXT HEALTH PANEL (added 2026-04-25) ───────────────────────────── Lives at Leadership → Admin → Context Health. Reads from /auth/context-health endpoint. See html/js/context-health-panel.js + DESIGN-RULES.md Section 3+8. */ .ctx-overall { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; padding: 3px 10px; border-radius: 5px; text-transform: uppercase; } .ctx-overall.ctx-green { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); } .ctx-overall.ctx-yellow { background: rgba(253,197,44,0.15); color: #FDC52C; border: 1px solid rgba(253,197,44,0.3); } .ctx-overall.ctx-red { background: rgba(217, 95, 95,0.15); color: #D95F5F; border: 1px solid rgba(217, 95, 95,0.3); } .ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .ctx-cell { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px 10px; align-items: center; padding: 10px 14px; background: rgba(165,186,202,0.04); border: 1px solid rgba(165,186,202,0.12); border-radius: 7px; cursor: help; } .ctx-cell:hover { border-color: rgba(165,186,202,0.25); } .ctx-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .ctx-dot.ctx-green { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.4); } .ctx-dot.ctx-yellow { background: #FDC52C; box-shadow: 0 0 6px rgba(253,197,44,0.4); } .ctx-dot.ctx-red { background: #D95F5F; box-shadow: 0 0 6px rgba(217, 95, 95,0.5); } .ctx-cell .ctx-label { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: rgba(165,186,202,0.85); text-transform: uppercase; } .ctx-cell .ctx-value { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; color: var(--white); justify-self: end; } .ctx-cell .ctx-detail { grid-column: 2 / span 2; font-size: 13px; color: rgba(165,186,202,0.45); line-height: 1.3; } /* ===== RESTORED 2026-05-30: chat-panel + ADAM_MEGA_NAV_BULLETPROOF_V1 (lost in post-outage revert 4b17542) ===== */ /* ────────────────────────────────────────────────────────────────────── 2026-05-29 chat-page redesign overrides — promoted from inline-in-chat.html into main.css so they survive any browser caching of the SPA fragment. ────────────────────────────────────────────────────────────────────── */ /* Right-side History + MySpace panel — white-with-navy */ #chat-page #chat-history-panel, body #chat-history-panel { background: #FFFFFF !important; border-color: rgba(0,43,73,0.15) !important; color: var(--navy) !important; } #chat-page #chat-history-panel *, body #chat-history-panel * { color: var(--navy) !important; } #chat-page #chat-hist-hdr, body #chat-hist-hdr { background: rgba(0,43,73,0.04) !important; border-bottom: 1px solid rgba(0,43,73,0.12) !important; } #chat-page #chat-hist-hdr *, body #chat-hist-hdr * { color: var(--navy) !important; } #chat-page #chat-history-panel input, body #chat-history-panel input { background: #FFFFFF !important; color: var(--navy) !important; border: 1.5px solid rgba(0,43,73,0.18) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important; } #chat-page #chat-history-panel input::placeholder, body #chat-history-panel input::placeholder { color: rgba(0,43,73,0.45) !important; } /* History conversation rows */ #chat-page .chat-hist-item, body #chat-history-panel .chat-hist-item { border-color: transparent !important; } #chat-page .chat-hist-item:hover, body #chat-history-panel .chat-hist-item:hover { background: rgba(0,43,73,0.05) !important; } #chat-page .chat-hist-item.active, body #chat-history-panel .chat-hist-item.active { background: rgba(253,197,44,0.15) !important; border-color: rgba(253,197,44,0.4) !important; } #chat-page .chat-hist-title, body #chat-history-panel .chat-hist-title { color: var(--navy) !important; } #chat-page .chat-hist-meta, body #chat-history-panel .chat-hist-meta { color: rgba(0,43,73,0.55) !important; } #chat-page .chat-hist-empty, body #chat-history-panel .chat-hist-empty { color: rgba(0,43,73,0.5) !important; } /* Period pills (All / Week / Month / Year) */ #chat-page .hist-pill, body #chat-history-panel .hist-pill { background: rgba(0,43,73,0.06) !important; border-color: rgba(0,43,73,0.15) !important; color: var(--navy) !important; } #chat-page .hist-pill:hover, body #chat-history-panel .hist-pill:hover { background: rgba(0,43,73,0.12) !important; } #chat-page .hist-pill.active, body #chat-history-panel .hist-pill.active { background: var(--navy) !important; border-color: var(--navy) !important; color: #FFFFFF !important; } /* MySpace inner styles */ #chat-page #myspace-stats, body #chat-history-panel #myspace-stats { background: rgba(0,43,73,0.04) !important; border-bottom: 1px solid rgba(0,43,73,0.12) !important; } #chat-page .myspace-stat-val, body .myspace-stat-val { color: var(--navy) !important; } #chat-page .myspace-stat-lbl, body .myspace-stat-lbl { color: rgba(0,43,73,0.55) !important; } #chat-page #myspace-upload-zone, body #myspace-upload-zone { border-color: rgba(0,43,73,0.25) !important; background: rgba(253,197,44,0.06) !important; } #chat-page #myspace-upload-zone:hover, #chat-page #myspace-upload-zone.drag-over, body #myspace-upload-zone:hover, body #myspace-upload-zone.drag-over { border-color: var(--yellow) !important; background: rgba(253,197,44,0.18) !important; } #chat-page .myspace-doc-item, body .myspace-doc-item { background: rgba(0,43,73,0.04) !important; border-color: rgba(0,43,73,0.12) !important; } #chat-page .myspace-doc-item:hover, body .myspace-doc-item:hover { background: rgba(0,43,73,0.08) !important; } #chat-page .myspace-doc-item.active-doc, body .myspace-doc-item.active-doc { background: rgba(253,197,44,0.15) !important; border-color: var(--yellow) !important; } #chat-page .myspace-doc-name, body .myspace-doc-name { color: var(--navy) !important; } #chat-page .myspace-doc-meta, body .myspace-doc-meta { color: rgba(0,43,73,0.55) !important; } #chat-page .myspace-doc-chat, body .myspace-doc-chat { color: var(--navy) !important; text-decoration: underline; } #chat-page .myspace-empty, body .myspace-empty { color: rgba(0,43,73,0.5) !important; } /* MySpace kind filter chips */ #chat-page .ms-kind-tab, body .ms-kind-tab { background: rgba(0,43,73,0.06) !important; border-color: rgba(0,43,73,0.18) !important; color: var(--navy) !important; } #chat-page .ms-kind-tab:hover, body .ms-kind-tab:hover { background: rgba(0,43,73,0.12) !important; } #chat-page .ms-kind-tab.active, body .ms-kind-tab.active { background: var(--yellow) !important; border-color: var(--yellow) !important; color: var(--navy) !important; } /* Panel tab switcher: white-with-navy on History, YELLOW-with-navy on MySpace */ #chat-page #chat-panel-tabs, body #chat-panel-tabs { background: #FFFFFF !important; border-bottom: 1px solid rgba(0,43,73,0.12) !important; } #chat-page .chat-panel-tab, body .chat-panel-tab { background: #FFFFFF !important; color: rgba(0,43,73,0.55) !important; border-bottom: 2px solid transparent !important; } #chat-page .chat-panel-tab:hover, body .chat-panel-tab:hover { color: var(--navy) !important; background: rgba(0,43,73,0.04) !important; } #chat-page #tab-history.active, body #tab-history.active { background: #FFFFFF !important; color: var(--navy) !important; border-bottom: 2px solid var(--navy) !important; } #chat-page #tab-myspace.active, body #tab-myspace.active { background: var(--yellow) !important; color: var(--navy) !important; border-bottom: 2px solid var(--navy) !important; } /* ADAM_MEGA_NAV_BULLETPROOF_V1 - 2026-05-29 force mega-nav dropdown visible on .open */ .mg-group.open .mg-dropdown { display: block !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; animation: none !important; pointer-events: auto !important; } .mg-group.open .mg-dropdown .mg-drop-item { opacity: 1 !important; pointer-events: auto !important; } /* ── Skills Library list: white background + dark text (Nathan: lists easier to read on white) ── */ .skills-white{ background:#ffffff; color:#243340; border-radius:10px; padding:14px 16px; margin-top:4px; border:1px solid rgba(0,0,0,0.10); box-shadow:0 1px 3px rgba(0,0,0,0.18); } /* force uniform dark text across the whole list (overrides inline light-grey colors from skillsRender) */ .skills-white, .skills-white td, .skills-white th, .skills-white span, .skills-white strong, .skills-white div, .skills-white label, .skills-white a{ color:#243340 !important; } .skills-white thead tr, .skills-white thead th{ color:#5a6b7a !important; } .skills-white tbody tr{ border-top:1px solid rgba(0,0,0,0.08) !important; } .skills-white tbody tr:hover{ background:#f3f6f9; } /* inputs + selects: white field, dark text */ .skills-white #sk-search, .skills-white .sk-filter, .skills-white select, .skills-white input[type=text]{ background:#ffffff !important; color:#243340 !important; border:1px solid rgba(0,0,0,0.20) !important; } .skills-white #sk-search::placeholder{ color:#8a97a3 !important; } .skills-white .stat-card{ background:#f3f6f9 !important; border-color:rgba(0,0,0,0.08) !important; } /* ==================================================================== 2026-05-31 — Automations (admin n8n tab) layout pass Compact 6-card KPI row + white text-section that keeps accent colours ==================================================================== */ .aut-kpi{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:4px 0 16px;} .aut-kpi .stat-card{min-height:72px;padding:9px 13px;} .aut-kpi .stat-card .stat-label{font-size:10px;letter-spacing:.9px;margin:0 0 3px;min-height:auto;-webkit-line-clamp:1;} .aut-kpi .stat-card .stat-value{font-size:22px;line-height:1.05;margin:0 0 1px;min-height:auto;} .aut-kpi .stat-card .stat-sub{font-size:10px;line-height:1.2;margin:0;min-height:auto;-webkit-line-clamp:1;} @media(max-width:1100px){.aut-kpi{grid-template-columns:repeat(3,1fr);}} .aut-white{background:#ffffff;border:1px solid #e2e8ee;border-radius:10px;padding:16px 18px;margin-bottom:16px;color:#2a3742;line-height:1.6;font-size:13px;} .aut-white code{background:#eef2f6;color:#243340;padding:1px 4px;border-radius:3px;font-size:11.5px;} .aut-white strong{color:#1a2730;} .aut-white .aw-h{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;font-size:13px;color:#1a2730;margin-bottom:8px;} .aut-white .aw-sub{color:#5a6b7a;} .aut-white a{color:#0e7a8a;} /* darkened accent helpers — readable on white, keep tier meaning */ .aut-white .aw-g{color:#1f8a4c !important;} .aut-white .aw-a{color:#b07d12 !important;} .aut-white .aw-r{color:#c0392b !important;} .aut-white .aw-b{color:#0e7a8a !important;} /* 2026-05-31b — Automations: stop 1fr/1fr grids stretching short panels to the tallest sibling (kills the big blue voids beside e.g. Auth Settings). */ div[data-admin-tab="n8n"] div[style*="grid-template-columns:1fr 1fr"]{align-items:start;} div[data-admin-tab="n8n"] .panel{margin-bottom:0;} div[data-admin-tab="n8n"] div[style*="grid-template-columns:1fr 1fr"]{margin-bottom:14px;} /* 2026-05-31c — Automations: Today's Schedule + OpenClaw Automations side-by-side, Email Hygiene full-width below; tables capped to ~15 rows with a concertina toggle. */ .aut-2grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:16px;} .aut-2grid > .panel{margin-bottom:0;} .aut-2grid .ahg{grid-column:1 / -1;grid-row:2;} @media(max-width:1100px){.aut-2grid{grid-template-columns:1fr;}.aut-2grid .ahg{grid-row:auto;}} .aut-cap.capped{max-height:545px;overflow:hidden;} .aut-cap-toggle{display:block;width:100%;text-align:center;background:transparent;border:0;border-top:1px solid rgba(165,186,202,.12);color:var(--sky);font-size:12px;letter-spacing:.6px;padding:7px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;} .aut-cap-toggle:hover{background:rgba(14,154,171,.08);} /* ── Leads / Marketing data tables: navy → white, light → dark text, for readability. Added 2026-06-07, fixed scope 2026-06-08 (Nathan). The leads sub-tabs mount in [id^="leads-tab-"] panels (NOT #page-enrichment, which doesn't exist) — that was why the first attempt did nothing. Stat-cards/ panels stay dark; status-badge span colours preserved (colour set on td/th only, never on coloured child spans). ──────────────────────────────────── */ [id^="leads-tab-"] table{background:#ffffff !important;border-collapse:collapse;border-radius:8px;overflow:hidden;} [id^="leads-tab-"] thead, [id^="leads-tab-"] thead tr, [id^="leads-tab-"] th{background:#e9eef3 !important;color:#5c6b78 !important;border-color:rgba(13,30,46,.10) !important;} [id^="leads-tab-"] tbody tr{background:#ffffff !important;border-color:rgba(13,30,46,.07) !important;} [id^="leads-tab-"] tbody tr:nth-child(even){background:#f6f9fb !important;} [id^="leads-tab-"] tbody tr:hover{background:#eef4f9 !important;} [id^="leads-tab-"] td{color:#1f2933 !important;border-color:rgba(13,30,46,.07) !important;} [id^="leads-tab-"] td a{color:#0a66c2 !important;} /* also cover the .leads-tab-panel class form used by some renders */ .leads-tab-panel table{background:#ffffff !important;border-radius:8px;overflow:hidden;} .leads-tab-panel thead, .leads-tab-panel thead tr, .leads-tab-panel th{background:#e9eef3 !important;color:#5c6b78 !important;} .leads-tab-panel tbody tr{background:#ffffff !important;} .leads-tab-panel tbody tr:nth-child(even){background:#f6f9fb !important;} .leads-tab-panel td{color:#1f2933 !important;} .leads-tab-panel td a{color:#0a66c2 !important;} /* ── Div-based list / log panels in the leads tabs (Recent Searches, Recent CH Sync Activity, and similar) — not s, so the rules above miss them. Target the known containers + common id suffixes, force white, and darken the inline light-on-dark text ONLY inside these panels (so stat-card labels, which reuse the same greys on a dark card, are NOT affected). 2026-06-08 (Nathan). */ [id^="leads-tab-"] #ch-history-list, [id^="leads-tab-"] #ch-search-history-list, [id^="leads-tab-"] [id$="-history-list"], [id^="leads-tab-"] [id$="-search-history-list"], [id^="leads-tab-"] [id$="-activity-list"], [id^="leads-tab-"] [id$="-sync-activity"], [id^="leads-tab-"] [id$="-log-list"]{ background:#ffffff !important;border:1px solid rgba(13,30,46,.12) !important;border-radius:8px;} /* rows + text inside those white panels */ [id^="leads-tab-"] #ch-history-list *, [id^="leads-tab-"] #ch-search-history-list *, [id^="leads-tab-"] [id$="-history-list"] *, [id^="leads-tab-"] [id$="-search-history-list"] *, [id^="leads-tab-"] [id$="-activity-list"] *, [id^="leads-tab-"] [id$="-sync-activity"] *, [id^="leads-tab-"] [id$="-log-list"] *{ background-color:transparent !important; } [id^="leads-tab-"] #ch-history-list [style*="rgba(165,186,202"], [id^="leads-tab-"] #ch-search-history-list [style*="rgba(165,186,202"], [id^="leads-tab-"] [id$="-history-list"] [style*="rgba(165,186,202"], [id^="leads-tab-"] [id$="-search-history-list"] [style*="rgba(165,186,202"], [id^="leads-tab-"] [id$="-activity-list"] [style*="rgba(165,186,202"]{ color:#5c6b78 !important; } [id^="leads-tab-"] #ch-history-list [style*="#e2e8f0"], [id^="leads-tab-"] #ch-search-history-list [style*="#e2e8f0"], [id^="leads-tab-"] [id$="-history-list"] [style*="#e2e8f0"], [id^="leads-tab-"] [id$="-activity-list"] [style*="#e2e8f0"]{ color:#0d1e2e !important; } /* LinkedIn Focus Priorities widget -> white bg / dark text (Nathan std style 2026-06-08) */ #li-focus-panel{background:#ffffff !important;border:1px solid rgba(13,30,46,.14) !important;border-radius:8px;} #li-focus-panel .panel-hdr{background:#f2f6f9 !important;border-bottom:1px solid rgba(13,30,46,.10) !important;} #li-focus-panel .panel-title{color:#0a5a8a !important;} #li-focus-panel select, #li-focus-panel input{background:#ffffff !important;color:#1f2933 !important;border:1px solid rgba(13,30,46,.22) !important;} #li-focus-panel input::placeholder{color:#90a0ad !important;} #li-focus-list > div{background:#ffffff !important;border-bottom-color:rgba(13,30,46,.06) !important;} #li-focus-panel [style*="#e2e8f0"]{color:#1f2933 !important;} #li-focus-panel [style*="rgba(165,186,202"]{color:#5c6b78 !important;} /* ═══════════════════════════════════════════════════════════════════════ EOS white-paper theme — L10 form + interactive Scorecard (2026-06-09) White "paper" cards with dark text, sitting inside the dark page chrome. ═══════════════════════════════════════════════════════════════════════ */ .eos-paper{background:#fff;color:#1f2a37;border:1px solid #d7dee6;border-radius:12px; padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 12px rgba(0,0,0,.22);} .eos-paper *{box-sizing:border-box;} .eos-paper h2,.eos-paper h3{font-family:'Barlow Condensed',sans-serif;color:#0f2236;margin:0;} .eos-paper h2{font-size:20px;font-weight:700;} .eos-sec-title{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase; color:#075D67;margin-bottom:8px;} .eos-muted{color:#5d6b7a;} .eos-paper table{width:100%;border-collapse:collapse;font-size:13px;} .eos-paper th{text-align:left;color:#33485c;font-weight:700;padding:6px 8px; border-bottom:2px solid #e3e9ef;font-size:11px;text-transform:uppercase;letter-spacing:.5px;} .eos-paper td{padding:5px 8px;border-bottom:1px solid #eef2f6;color:#1f2a37;vertical-align:middle;} .eos-paper input,.eos-paper select,.eos-paper textarea{background:#fff;color:#1f2a37; border:1px solid #c5d0db;border-radius:6px;padding:6px 8px;font-family:inherit;font-size:13px;width:100%;} .eos-paper input[type=checkbox]{width:auto;} .eos-paper input:focus,.eos-paper select:focus,.eos-paper textarea:focus{outline:none;border-color:#075D67;} .eos-paper textarea{resize:vertical;min-height:46px;} .eos-cat-row td{background:#eef3f7;font-family:'Barlow Condensed',sans-serif;font-weight:700; letter-spacing:1px;text-transform:uppercase;color:#0f2236;font-size:12px;} .eos-cell{text-align:center;cursor:pointer;border-radius:4px;font-size:12px;} .eos-cell:hover{outline:2px solid #b8c6d4;} .eos-on{background:#e3f6ea;color:#1c7a44;font-weight:600;} .eos-off{background:#fde8e8;color:#b3261e;font-weight:600;} .eos-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px; border-radius:4px;padding:2px 6px;text-transform:uppercase;} .eos-badge-live{background:#e3f6ea;color:#1c7a44;} .eos-badge-manual{background:#fde8e8;color:#b3261e;} .eos-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;} .eos-dot-live{background:#1fa463;} .eos-dot-manual{background:#d9534f;} .eos-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid #c5d0db;background:#f2f6fa; color:#33485c;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;} .eos-btn:hover{background:#e6edf3;} .eos-btn-primary{background:#075D67;color:#fff;border-color:#075D67;} .eos-btn-primary:hover{background:#0a7a87;} .eos-btn-danger{background:#fde8e8;color:#b3261e;border-color:#f1c7c7;} .eos-btn-xs{padding:3px 8px;font-size:11px;} .eos-pill{border:1px solid #c5d0db;background:#fff;color:#5d6b7a;border-radius:14px; padding:3px 12px;font-size:12px;font-weight:600;cursor:pointer;} .eos-pill.active{background:#075D67;color:#fff;border-color:#075D67;} .eos-hist-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #e3e9ef; border-radius:8px;margin-bottom:6px;cursor:pointer;background:#fff;} .eos-hist-item:hover{border-color:#075D67;background:#f3f8fb;} .eos-hist-item.active{border-color:#075D67;background:#eef6f8;box-shadow:inset 3px 0 0 #075D67;} .eos-chip{font-size:11px;font-weight:700;border-radius:4px;padding:2px 7px;} .eos-chip-open{background:#fff3e0;color:#b5651d;} .eos-chip-closed{background:#e3f6ea;color:#1c7a44;} .eos-carry{font-size:10px;font-weight:700;color:#b5651d;background:#fff3e0;border-radius:3px;padding:1px 5px;margin-left:6px;} .eos-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:900px){.eos-grid2{grid-template-columns:1fr;}} /* ═══ Models Inventory — white/dark theme + Mount/Dismount + VRAM bar (2026-06-09) ═══ */ #mi-panel{background:#fff !important;border:1px solid #d7dee6 !important;color:#1f2a37;} #mi-panel .panel-title{color:#0d1e2e !important;} #mi-panel .panel-hdr{border-bottom:1px solid #e3e9ef !important;} #mi-panel #mi-summary{color:#5d6b7a !important;} #mi-panel .mi-row{padding:6px 4px;border-bottom:1px solid #eef2f6;} #mi-panel .mi-row:last-child{border-bottom:none;} #mi-panel .mi-name{font-family:Consolas,monospace;font-size:11.5px;} #mi-panel .mi-meta{font-size:10.5px;color:#5d6b7a;margin-top:2px;} #mi-panel .mi-agents{font-size:10px;background:#eef2f6;color:#46586a;padding:1px 6px;border-radius:3px;white-space:nowrap;} #mi-panel .mi-btn{font-size:10px;font-weight:700;border-radius:4px;padding:2px 9px;cursor:pointer;border:1px solid transparent;font-family:inherit;} #mi-panel .mi-btn:disabled{opacity:.5;cursor:default;} #mi-panel .mi-mount{background:#e3f6ea;color:#1c7a44;border-color:#bfe6cc;} #mi-panel .mi-mount:hover{background:#d3efdd;} #mi-panel .mi-dismount{background:#fde8e8;color:#b3261e;border-color:#f1c7c7;} #mi-panel .mi-dismount:hover{background:#f9dada;} #mi-vram .mi-vram-label{font-size:11px;color:#5d6b7a;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px;} #mi-vram .mi-vram-track{height:16px;background:#eef2f6;border:1px solid #d7dee6;border-radius:8px;overflow:hidden;display:flex;} #mi-vram .mi-vram-seg{height:100%;}