/* Tidela - custom screens (Brand Guide v4.5) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
:root{
--navy:#1E3A5F; --navy-deep:#16304D; --blue:#3B82F6; --blue-deep:#2563EB;
--green:#059669; --amber:#D97706; --red:#DC2626;
--ink:#1f2933; --muted:#6b7785; --line:#e3e8ef; --bg:#f3f5f8; --card:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;}
a{color:var(--blue-deep);text-decoration:none}
a:hover{text-decoration:underline}
/* Header */
.app-header{display:flex;align-items:center;gap:28px;background:var(--navy);color:#fff;padding:0 28px;height:60px}
.app-logo img{height:42px;display:block}
.app-nav{display:flex;gap:22px;flex:1}
.app-nav a{color:#dbe6f2;font-weight:600;font-family:'Barlow',sans-serif;letter-spacing:.2px;padding:6px 2px;border-bottom:2px solid transparent}
.app-nav a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--blue)}
.app-nav a.active{color:#fff;border-bottom-color:var(--blue)}
.app-user{display:flex;align-items:center;gap:14px;color:#cdd9e6;font-size:14px}
.app-user form{margin:0}
.app-user button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;padding:5px 12px;font:inherit;cursor:pointer}
.app-user button:hover{background:rgba(255,255,255,.12)}
/* Layout */
.app-main{padding:24px 28px}
.board-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.pipeline-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ptab{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-weight:600;font-family:'Barlow',sans-serif;color:var(--navy)}
.ptab:hover{text-decoration:none;border-color:var(--blue)}
.ptab--active{background:var(--blue);color:#fff;border-color:var(--blue)}
.board-meta{color:var(--muted);font-size:14px}
/* Kanban */
.board{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.col{min-width:272px;max-width:272px;background:#eef1f6;border-radius:10px;border-top:3px solid var(--blue)}
.col--open{border-top-color:var(--blue)}
.col--won{border-top-color:var(--green)}
.col--lost{border-top-color:var(--red)}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-family:'Barlow',sans-serif}
.col-title{font-weight:700;color:var(--navy);letter-spacing:.2px}
.col-count{background:#fff;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700;color:var(--muted)}
.col-body{padding:0 10px 12px;display:flex;flex-direction:column;gap:10px;min-height:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:12px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.card-title{font-weight:700;color:var(--navy);font-family:'Barlow',sans-serif;display:block;line-height:1.25}
.card-title:hover{color:var(--blue-deep);text-decoration:none}
.card-acct{color:var(--muted);font-size:13px;margin-top:2px}
.card-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.card-amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;color:var(--navy);font-size:13px}
.card-prob{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:11.5px;color:#1e3a8a;background:#eef2ff;border-radius:8px;padding:1px 7px}
.card-age{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;color:var(--muted)}
.card-age .ca-sep{opacity:.5}
.card-age .ca-stage{font-weight:600;color:#475569}
.card-owner{color:var(--muted);font-size:12px}
.move-form{margin:10px 0 0}
.move-select{width:100%;font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fbfcfe;color:var(--ink)}
.col-empty{color:#9aa5b1;font-size:13px;padding:8px 4px;text-align:center}
.empty{color:var(--muted)}
/* Messages */
.app-messages{padding:14px 28px 0}
.msg{padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:8px;max-width:760px}
.msg--success{background:#e7f6ef;color:#065f46;border:1px solid #b7e4cd}
.msg--error{background:#fdeaea;color:#991b1b;border:1px solid #f3c2c2}
/* Page + panel */
.page-title{font-family:'Barlow',sans-serif;color:var(--navy);font-size:26px;margin:4px 0 18px}
.page-title .muted{color:var(--muted);font-weight:400;font-size:15px;margin-left:8px}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;max-width:560px;padding:24px 26px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.panel--wide{max-width:760px}
.panel-title{font-family:'Barlow',sans-serif;color:var(--navy);margin:0 0 4px;font-size:24px}
.panel-sub{color:var(--muted);margin:0 0 18px;font-size:14px}
/* Forms */
.form .field{margin-bottom:14px;display:flex;flex-direction:column;gap:5px}
.form label{font-weight:600;color:var(--navy);font-size:13px;font-family:'Barlow',sans-serif}
.form .req{color:var(--red)}
.form input[type=text],.form input[type=email],.form input[type=number],.form select,.form textarea{
font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe;color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.form .err{color:var(--red);font-size:12px}
.form-actions{display:flex;gap:10px;margin-top:8px;align-items:center}
/* 2-column record forms: pairs short fields, long/textarea fields span full. */
.form--grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:18px;align-items:start}
.form--grid .field{margin-bottom:13px}
.form--grid .field--full{grid-column:1/-1}
@media (max-width:680px){.form--grid{grid-template-columns:1fr}}
/* Buttons */
.btn{display:inline-block;border:0;border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;font-family:'Barlow',sans-serif}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);text-decoration:none}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--blue);text-decoration:none}
.btn-sm{padding:6px 12px;font-size:13px;background:var(--blue);color:#fff}
.btn-sm:hover{background:var(--blue-deep);text-decoration:none}
/* Triage + tasks lists */
.tlist{margin-bottom:22px}
.tlist-head{font-family:'Barlow',sans-serif;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--line);padding-bottom:6px;margin:0 0 8px;max-width:760px}
.trow{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:8px;max-width:760px}
.trow form{margin:0}
.trow-sub{color:var(--muted);font-size:13px;margin-top:2px}
.task-subj{font-weight:600;color:var(--navy)}
.trow.overdue{border-left:3px solid var(--red)}
.muted{color:var(--muted)}
/* ===================================================================
Phase 2: Accounts / Contacts / Activities (3-pane, lists, timeline)
=================================================================== */
/* Status pills (mirrored from admin theme so custom screens match) */
.tg-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;font-family:'Inter',sans-serif}
.tg-open{background:#eaf2fd;color:var(--blue-deep)}
.tg-won{background:#e7f6ef;color:var(--green)}
.tg-lost{background:#fdeaea;color:var(--red)}
.tg-review{background:#fff4e5;color:var(--amber)}
/* Screen top bar (search + view toggle) */
.screen-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.screen-search{flex:1;max-width:420px;margin:0}
.screen-search input{font:inherit;width:100%;padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.screen-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* Board/List + Detail/List view toggle */
.board-right{display:flex;align-items:center;gap:14px}
.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.vt{padding:7px 14px;font-weight:600;font-family:'Barlow',sans-serif;color:var(--navy);font-size:13px}
.vt:hover{text-decoration:none;background:#f3f5f8}
.vt--active{background:var(--blue);color:#fff}
.vt--active:hover{background:var(--blue-deep)}
/* Layout switch tabs (3-column / Tabbed) live in the view-toggle as buttons. */
button.vt{border:0;background:none;cursor:pointer;line-height:1.2}
button.vt.vt--active{background:var(--blue);color:#fff} /* beat button.vt's bg so the active tab shows */
/* Three-pane record layout */
.three-pane{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(380px,1fr);gap:16px;align-items:start} /* Jun 11: middle + right grow equally (was middle capped 540px) */
.pane-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:calc(100vh - 180px);overflow-y:auto}
.pane-list-head{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.4px;padding:13px 15px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.cnt{background:#eef1f6;border-radius:999px;padding:1px 8px;font-size:11px;color:var(--muted);margin-left:6px;font-weight:700;letter-spacing:0}
.list-row{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line);color:var(--ink)}
.list-row:hover{text-decoration:none;background:#f7f9fc}
.list-row--active{background:#eaf2fd}
.list-row--active:hover{background:#eaf2fd}
.lr-avatar{width:34px;height:34px;flex:none;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow',sans-serif;font-weight:700;font-size:13px}
.lr-main{display:flex;flex-direction:column;min-width:0}
.lr-name{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane-empty{color:var(--muted);font-size:13px;padding:16px 15px}
/* Detail pane */
.pane-detail{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;min-height:300px}
.rec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.rec-avatar{width:52px;height:52px;flex:none;border-radius:14px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Barlow',sans-serif;font-weight:800;font-size:19px;box-shadow:inset 3px 0 0 var(--blue)}
.rec-headmain{flex:1;min-width:0}
.rec-name{font-family:'Barlow',sans-serif;color:var(--navy);font-size:23px;margin:0;line-height:1.2}
.rec-sub{color:var(--muted);font-size:14px;margin-top:3px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 22px}
.fg{display:flex;align-items:flex-start;gap:11px;min-width:0}
.fg-ic{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;color:#94a3b8;display:flex;align-items:center;justify-content:center}
.fg-ic .ic{width:15px;height:15px}
.fg-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.fg-label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;font-family:'Barlow',sans-serif}
.fg-val{color:var(--ink);font-size:14px;word-break:break-word}
.rec-section{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* The primary fields box now reads as a real (movable) card like the others. */
.rbox[data-box="fields"]{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* Partner UI-extension iframe card (Jun 13) on a record detail page */
.ext-card .ext-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.ext-name{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:14px}
.ext-desc{color:var(--muted);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ext-frame{width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;display:block}
.ext-action-msg{display:block;font-size:12px;margin:2px 0 8px}
.ext-page-frame{width:100%;height:calc(100vh - 210px);min-height:460px;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}
/* Tabbed extensions panel on a record */
.ext-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:12px}
.ext-tab{border:0;background:none;cursor:pointer;font-family:'Barlow',sans-serif;font-weight:700;
font-size:13px;color:var(--muted);padding:7px 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
.ext-tab:hover{color:var(--navy)}
.ext-tab.active{color:var(--navy);border-bottom-color:var(--blue)}
.ext-tabpane.hidden{display:none}
.rec-sec-title{font-family:'Barlow',sans-serif;color:var(--navy);font-size:14px;text-transform:uppercase;letter-spacing:.4px;margin:0 0 11px}
.mini-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f0f3f7}
.mini-row:last-child{border-bottom:0}
.mini-sub{color:var(--muted);font-size:12px;text-align:right}
.mini-empty{color:#9aa5b1;font-size:13px}
.pane-empty-big{color:var(--muted);font-size:15px;padding:40px 8px;text-align:center}
/* Side timeline pane */
.pane-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px;max-height:calc(100vh - 180px);overflow-y:auto}
.side-head{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px}
.logbar{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:16px}
.log-subject{font:inherit;font-size:12px;width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.log-subject:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.logbar-row{display:flex;gap:7px;margin-top:8px;align-items:center}
.log-type,.log-due{font:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);min-width:0}
.log-type{flex:1}
.logbar-row .btn-sm{flex:none}
/* Timeline */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f0f3f7}
.tl-item:last-child{border-bottom:0}
.tl-dot{width:9px;height:9px;flex:none;border-radius:50%;margin-top:5px;background:var(--muted)}
.tl-call{background:var(--blue)}
.tl-email{background:var(--green)}
.tl-meeting{background:var(--amber)}
.tl-task{background:var(--navy)}
.tl-note{background:#94a3b8}
.tl-system_event{background:#cbd5e1}
.tl-body{flex:1;min-width:0}
.tl-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tl-type{font-weight:700;color:var(--navy);font-size:12px;font-family:'Barlow',sans-serif;text-transform:uppercase;letter-spacing:.3px}
.tl-when{color:var(--muted);font-size:11px;white-space:nowrap}
.tl-subj{color:var(--ink);font-size:14px;margin-top:2px}
.tl-text{color:#54616e;font-size:13px;margin-top:3px;white-space:pre-wrap}
.tl-meta{color:var(--muted);font-size:12px;margin-top:3px}
.tl-empty{color:#9aa5b1;font-size:13px;padding:8px 0}
/* Data tables (list views) */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto}
/* Wide-table affordances: a frozen leftmost column + a right-edge cue when the
table scrolls sideways (the cue fades once you reach the end). */
.table-wrap.tw-scrollable:not(.tw-at-end){box-shadow:inset -16px 0 12px -12px rgba(16,32,56,.20)}
.data-table th.col-frozen,.data-table td.col-frozen{position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 rgba(16,32,56,.07)}
.data-table thead th.col-frozen{background:#fafbfd;z-index:3}
.data-table tbody tr:hover td.col-frozen{background:#f7f9fc}
/* Static sticky first column (tables not driven by the column chooser, e.g. Super admin). */
.data-table--sticky1 thead th:first-child,.data-table--sticky1 tbody td:first-child{position:sticky;left:0;background:#fff;z-index:2;box-shadow:1px 0 0 rgba(16,32,56,.07)}
.data-table--sticky1 thead th:first-child{background:#fafbfd;z-index:3}
.data-table--sticky1 tbody tr:hover td:first-child{background:#f7f9fc}
/* Per-row "⋯" actions menu (collapses many row actions into one control). */
.rowmenu{position:relative;display:inline-block}
.rowmenu-btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:2px 9px;font-size:16px;line-height:1.2;color:#33445c;cursor:pointer}
.rowmenu-btn:hover{background:#f3f5f8}
.rowmenu-pop{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px rgba(16,32,56,.16);min-width:172px;z-index:50;padding:4px;display:flex;flex-direction:column;text-align:left}
.rowmenu-pop[hidden]{display:none} /* [hidden] must beat display:flex so the menu stays closed */
.rowmenu-pop form{margin:0}
.rowmenu-item{display:block;width:100%;text-align:left;background:none;border:none;padding:7px 10px;font-size:13px;color:#33445c;cursor:pointer;border-radius:6px}
.rowmenu-item:hover{background:#f3f5f8}
.rowmenu-item--danger{color:#b91c1c}
.rowmenu-item--danger:hover{background:#fdecec}
.rowmenu-item--disabled{color:#9aa7b6;cursor:not-allowed}
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table thead th{text-align:left;font-family:'Barlow',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfd;white-space:nowrap}
.data-table tbody td{padding:12px 16px;border-bottom:1px solid #f0f3f7;color:var(--ink);vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#f7f9fc}
.data-table td.num,.data-table .num{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;white-space:nowrap}
.td-empty{color:var(--muted);text-align:center;padding:28px 16px}
/* Responsive: collapse the side timeline, then the list, on narrow viewports */
@media (max-width:1200px){
.three-pane{grid-template-columns:250px minmax(0,1fr)}
.pane-side{grid-column:1 / -1;max-height:none}
}
@media (max-width:760px){
.three-pane{grid-template-columns:1fr}
.pane-list{max-height:none}
.field-grid{grid-template-columns:1fr}
}
/* #7 (Jun 13): collapsible record-list rail + focus (full-width) mode.
Driven entirely by app.js wireRecordPanes(); no template markup needed.
Two independent toggles, each persisted in localStorage:
.three-pane.rail -> list shrinks to an avatar strip (like the nav hamburger)
.three-pane.solo -> BOTH side panes hidden: detail takes the full width
(left list AND right pane-side collapse) */
@media (min-width:1201px){
.three-pane.rail{grid-template-columns:64px minmax(0,1fr) minmax(380px,1fr)}
.three-pane.solo,
.three-pane.rail.solo{grid-template-columns:minmax(0,1fr)}
}
.three-pane.rail .ph-label,
.three-pane.rail .lr-main,
.three-pane.rail .list-filter{display:none}
.three-pane.rail .list-row{justify-content:center;padding:9px 6px;gap:0}
.three-pane.rail .pane-list-head{justify-content:center;padding:13px 0}
/* Focus mode: hide both the record list (left) and the pane-side (right) so the
detail spans the whole three-pane width. */
.three-pane.solo .pane-list,
.three-pane.solo .pane-side{display:none}
/* head becomes a flex row so the rail toggle sits at the right edge */
.pane-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pane-list-head .ph-label{display:flex;align-items:center;gap:6px;min-width:0}
.rail-btn{border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;
color:var(--muted);padding:2px 7px;line-height:1.4;font-size:13px;font-weight:700;flex:none}
.rail-btn:hover{background:#f3f5f8;color:var(--navy)}
/* focus toggle: small control pinned to the top-right of the detail pane */
.pane-detail{position:relative}
.focus-btn{position:absolute;top:14px;right:16px;z-index:2;border:1px solid var(--line);
background:#fff;border-radius:8px;cursor:pointer;color:var(--muted);font-size:12px;
font-weight:600;padding:4px 9px;display:inline-flex;align-items:center;gap:6px;line-height:1}
.focus-btn:hover{background:#f3f5f8;color:var(--navy)}
.focus-btn .fb-gly{font-size:13px;line-height:1}
/* ===================================================================
Phase 2b: Nimble-style left sidebar shell + record polish
=================================================================== */
.ic{width:18px;height:18px;display:block;flex:none}
/* App shell: left icon rail + content column */
.app-shell{display:flex;min-height:100vh;align-items:stretch}
.side-nav{width:88px;flex:none;background:var(--navy-deep);display:flex;flex-direction:column;gap:2px;padding:12px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.snav{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;color:#aebfd2;font-family:'Barlow',sans-serif;font-weight:600;font-size:11px;letter-spacing:.2px;text-align:center;border-left:3px solid transparent;border-right:3px solid transparent}
.snav:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.snav.active{color:#fff;background:rgba(59,130,246,.18);border-left-color:var(--blue)}
.snav .ic{width:21px;height:21px}
.snav-spacer{flex:1 1 auto;min-height:18px}
.app-col{flex:1;min-width:0;display:flex;flex-direction:column}
/* Top bar (logo + user) sits above the content column */
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--navy);height:56px;padding:0 24px;position:sticky;top:0;z-index:5}
.app-topbar{height:62px}
.app-topbar .app-logo img{height:42px;display:block}
/* Kanban drag-and-drop feedback */
.card[draggable="true"]{cursor:grab}
.card--dragging{opacity:.45;cursor:grabbing}
.col-body--over{outline:2px dashed var(--blue);outline-offset:-2px;background:rgba(59,130,246,.07);border-radius:8px}
/* Quick-action chips (Nimble) */
.qa-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.qa{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 13px;font:inherit;font-weight:600;font-size:13px;font-family:'Barlow',sans-serif;color:var(--navy);cursor:pointer}
.qa:hover{border-color:var(--blue);background:#f5f9ff}
.qa-ic{display:inline-flex;color:var(--blue-deep)}
.qa-ic .ic{width:16px;height:16px}
/* Section header with icon + optional right-aligned count/action */
.rec-sec-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.rec-sec-l{display:inline-flex;align-items:center;gap:8px}
.rec-sec-l .ic{width:15px;height:15px;color:var(--blue-deep)}
.rec-sec-action{font-size:12px;font-weight:600;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0}
/* Timeline group headings (Upcoming / Past) */
.tl-group-head{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;display:flex;align-items:center;gap:7px}
/* Nimble-style timeline row: date gutter + icon chip + card */
.tlx{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.tlx-gutter{flex:none;width:52px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-top:3px}
.tlx-date{font-weight:700;color:var(--navy);font-size:12px;font-family:'Barlow',sans-serif;white-space:nowrap}
.tlx-time{color:var(--muted);font-size:11px;white-space:nowrap}
.tlx-icon{flex:none;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eef1f6;color:var(--muted);margin-top:1px}
.tlx-icon .ic{width:15px;height:15px}
.tlx-card{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tlx-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tlx-type{font-weight:700;color:var(--navy);font-size:12px;font-family:'Barlow',sans-serif;text-transform:uppercase;letter-spacing:.3px}
.tlx-who{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlx-subj{color:var(--ink);font-size:14px;margin-top:3px;font-weight:500}
.tlx-text{color:#54616e;font-size:13px;margin-top:4px;white-space:pre-wrap}
/* Sanitized email body in the timeline: readable HTML, collapsed by default. */
.tlx-email{position:relative;margin-top:5px}
.tlx-email-body{font-size:12.5px;color:#445162;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
.tlx-email-body a{color:#2b4b6f}
.tlx-email-body p{margin:0 0 6px}
.tlx-email-body blockquote{margin:6px 0 6px 6px;padding-left:10px;border-left:2px solid var(--line);color:#6b7a90}
.tlx-email-body table{max-width:100%;border-collapse:collapse}
.tlx-email--collapsed .tlx-email-body{max-height:118px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 64%,transparent);mask-image:linear-gradient(180deg,#000 64%,transparent)}
.tlx-email-more{margin-top:3px;background:none;border:none;color:var(--blue);font-weight:600;font-size:12px;cursor:pointer;padding:0}
.tlx-email-more:hover{text-decoration:underline}
.tlx--up .tlx-card{background:#f7fbff;border-color:#cfe0f5}
.tlx-complete{margin:8px 0 0}
.tlx-done{background:transparent;border:1px solid var(--line);color:var(--green);border-radius:7px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tlx-done:hover{border-color:var(--green);background:#f0fbf5}
/* Activity type chip colors (timeline) */
.k-call{background:#eaf2fd;color:var(--blue-deep)}
.k-email{background:#e7f6ef;color:var(--green)}
.k-meeting{background:#fff4e5;color:var(--amber)}
.k-task{background:#eef1f6;color:var(--navy)}
.k-note{background:#f1f5f9;color:#64748b}
.k-system_event{background:#f1f5f9;color:#94a3b8}
@media (max-width:720px){
.app-shell{flex-direction:column}
.side-nav{width:auto;height:auto;flex-direction:row;overflow-x:auto;position:sticky;top:0;padding:4px 6px;gap:4px}
.snav{border-left:0;border-right:0;border-bottom:3px solid transparent;min-width:66px;flex:none;padding:8px 4px}
.snav.active{border-left:0;border-bottom-color:var(--blue)}
.snav-spacer{display:none}
.app-topbar{position:static}
}
/* ===================================================================
Phase 2c: Sidebar restyled to match the Tidela product app
(wide left-aligned icon+label rows, logo in the rail, white top bar)
=================================================================== */
.side-nav{width:222px;flex:none;background:var(--navy);display:flex;flex-direction:column;gap:1px;padding:0 0 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 14px 14px;margin-bottom:4px}
.side-logo img{display:block}
.side-logo .logo-full{height:100px;max-width:100%}
.logo-crm{font-family:'Barlow',sans-serif;font-weight:800;font-size:28px;letter-spacing:.18em;color:var(--blue);line-height:1.2;margin-top:-42px;transform:translateX(27px)}
.app-shell.nav-collapsed .logo-crm{font-size:15px;letter-spacing:.12em;margin-top:0;transform:none}
.side-logo:hover{text-decoration:none}
.snav{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left;margin:1px 10px;padding:9px 12px;border:0;border-radius:9px;color:rgba(255,255,255,.66);font-family:'Inter',sans-serif;font-weight:500;font-size:13px;letter-spacing:0}
.snav .ic{width:19px;height:19px;flex:none;color:rgba(255,255,255,.5)}
.snav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.snav:hover .ic{color:#cfe0f5}
.snav.active{color:#fff;background:rgba(59,130,246,.20);font-weight:700}
.snav.active .ic{color:var(--blue)}
.snav-group{color:#6f86a3;font-family:'Barlow',sans-serif;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;padding:14px 22px 5px}
/* #collapsible nav groups (Jun 13): click a group header to fold its items away.
Wired by app.js wireNavGroups(); state persisted per group in localStorage.
Only hides in the EXPANDED nav — in icon mode (nav-collapsed) headers are gone
and items must always show, so the hide is guarded by :not(.nav-collapsed). */
.snav-group.ng-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none}
.snav-group.ng-toggle:hover{color:#9fb4d0}
.ng-caret{font-size:9px;line-height:1;opacity:.65;flex:none}
.app-shell:not(.nav-collapsed) .snav.snav-hidden{display:none}
.snav-spacer{flex:1 1 auto;min-height:14px}
.snav--admin{margin-top:4px}
/* ===================================================================
Generic dropdown component (.dd) — Jun 18
Reused by the top-bar "+ New" menu, per-entity Groups menus, and the
left-nav user menu. Button[data-dd] toggles its sibling .dd-menu
(wired by app.js wireDD). --up opens upward; --right right-aligns.
=================================================================== */
.dd{position:relative;display:inline-flex}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:208px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(22,48,77,.20);z-index:120;padding:6px;display:flex;flex-direction:column;gap:1px}
.dd-menu--up{top:auto;bottom:calc(100% + 8px)}
.dd-menu--right{left:auto;right:0}
.dd-menu[hidden]{display:none}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:8px;color:var(--ink);font:500 13px/1.2 'Inter',sans-serif;text-align:left;cursor:pointer;white-space:nowrap}
.dd-item:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.dd-item .ic{width:17px;height:17px;flex:none;color:var(--muted)}
.dd-item:hover .ic{color:var(--navy)}
.dd-item--ai{color:var(--blue-deep)}
.dd-item--ai .ic{color:var(--blue)}
.dd-item--logout{color:var(--red)}
.dd-item--logout .ic{color:var(--red)}
.dd-sep{height:1px;background:var(--line);margin:5px 4px}
.dd-head{padding:6px 10px 2px;font:700 10.5px/1.3 'Barlow',sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.dd-empty{padding:8px 10px;color:var(--muted);font-size:12.5px}
.dd-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--line);color:var(--ink);font:700 10.5px/1 'Barlow',sans-serif}
.dd-count--warn{background:#fdecec;color:var(--red)}
/* per-entity Groups/Triage cluster in the entity toolbars */
.sec-tools{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.sec-tools .dd-menu{left:auto;right:0}
.sec-tools .dd-btn .ic{width:16px;height:16px}
/* top-bar "+ New" menu */
.topnew .topnew-btn{display:inline-flex;align-items:center;gap:6px}
.topnew .topnew-btn .ic{width:16px;height:16px}
.topnew .dd-menu{left:auto;right:0}
/* left-nav user menu (Claude-style account chip, opens upward) */
.usermenu{display:block;margin:6px 10px 0}
.usermenu-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font:600 13px/1.2 'Inter',sans-serif;cursor:pointer;text-align:left}
.usermenu-btn:hover{background:rgba(255,255,255,.11)}
.um-avatar{width:30px;height:30px;flex:none;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center}
.um-initials{background:var(--blue);color:#fff;font:700 13px/1 'Barlow',sans-serif}
.um-name{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-caret{width:15px;height:15px;flex:none;opacity:.6;transition:transform .15s}
.usermenu-btn[aria-expanded="true"] .um-caret{transform:rotate(180deg)}
.usermenu .dd-menu{left:10px;right:10px;min-width:0}
.um-head{display:flex;flex-direction:column;gap:1px;padding:6px 10px 4px}
.um-head-name{font:700 13px/1.3 'Inter',sans-serif;color:var(--ink)}
.um-head-email{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-shell.nav-collapsed .usermenu{margin:6px 8px 0}
.app-shell.nav-collapsed .usermenu-btn{justify-content:center;gap:0;padding:8px 0}
.app-shell.nav-collapsed .um-name,.app-shell.nav-collapsed .um-caret{display:none}
/* Collapsed rail is 64px with overflow-y:auto (which also clips horizontally), so an
in-flow dropdown gets cut off. Float it out as a fixed flyout beside the rail. */
@media (min-width:821px){
.app-shell.nav-collapsed .usermenu .dd-menu{position:fixed;left:70px;right:auto;
bottom:12px;top:auto;min-width:212px;max-height:80vh;overflow:auto}
}
.app-topbar{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.10);height:58px;padding:0 24px;justify-content:flex-end;position:sticky;top:0;z-index:5}
.app-topbar .app-user{color:rgba(255,255,255,.72)}
.app-topbar .app-user span{color:#fff;font-weight:500}
.app-topbar .app-user button{background:#fff;border:1px solid var(--line);color:var(--navy)}
.app-topbar .app-user button:hover{background:#f3f5f8}
@media (max-width:820px){
.app-shell{flex-direction:column}
.side-nav{width:auto;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;position:sticky;top:0;padding:6px;gap:2px;align-items:center}
.side-logo{padding:6px 10px;margin:0;flex:none}
.side-logo .logo-full{height:64px}
.snav{flex:none;margin:0;padding:8px 12px}
.snav-group{display:none}
.snav-spacer{display:none}
.app-topbar{position:static}
}
/* Mobile chrome for the Jun 2026 nav refresh: the left nav is a horizontal strip,
so float the user menu out as a fixed sheet; tighten the top bar so Search,
"+ New", the bell and the workspace switcher fit on a narrow screen. */
@media (max-width:820px){
.usermenu{margin:0;flex:none}
.usermenu-btn{gap:8px;padding:8px 12px}
.usermenu .dd-menu,
.app-shell.nav-collapsed .usermenu .dd-menu{position:fixed;left:auto;right:12px;
top:auto;bottom:12px;min-width:220px;max-height:70vh;overflow:auto}
.app-topbar-right{gap:10px}
.gs-btn-label,.gs-kbd{display:none}
.gs-btn{padding:8px}
.topnew-label{display:none}
.topnew .topnew-btn{padding:8px}
.app-ws .ws-name{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* per-entity toolbar (Groups/Triage + view toggle) wraps instead of overflowing */
.screen-actions{flex-wrap:wrap;gap:8px}
.sec-tools{margin-left:0}
}
/* ===================================================================
Phase 2d: Collapsible sidebar
=================================================================== */
.logo-mark{height:45px;width:45px;border-radius:9px}
.side-logo .logo-mark{display:none}
.app-topbar{justify-content:space-between}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:transparent;color:#fff;cursor:pointer;padding:0}
.nav-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.nav-toggle .ic{width:19px;height:19px}
/* Workspace switcher (top bar) — Phase 2q */
.app-topbar-right{display:flex;align-items:center;gap:16px}
.app-ws{display:flex;align-items:center}
.app-ws .ws-form{margin:0}
.app-ws .ws-name{color:rgba(255,255,255,.9);font-weight:600;font-size:13px}
.app-ws .ws-select{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:6px 30px 6px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.app-ws .ws-select:hover{background-color:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.app-ws .ws-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(59,130,246,.4)}
.app-ws .ws-select option{color:#1E3A5F;background:#fff;font-weight:500}
/* Archived user rows */
tr.row-archived td{opacity:.6}
tr.row-archived td a{color:inherit}
/* Superuser "act as" banner — Phase 2c */
.actas-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;
background:#7c2d12;color:#fff;padding:8px 24px;font-size:13px;font-weight:500}
.actas-banner strong{font-weight:800}
.actas-banner form{margin:0}
.actas-exit{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);
border-radius:8px;padding:5px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.actas-exit:hover{background:rgba(255,255,255,.28)}
.app-shell.nav-collapsed .side-nav{width:64px}
.app-shell.nav-collapsed .snav{justify-content:center;gap:0;padding:10px 0;margin:1px 8px}
.app-shell.nav-collapsed .snav span{display:none}
.app-shell.nav-collapsed .snav-group{display:none}
.app-shell.nav-collapsed .side-logo{justify-content:center;padding:16px 0 14px}
.app-shell.nav-collapsed .side-logo .logo-full{display:none}
.app-shell.nav-collapsed .side-logo .logo-mark{display:block}
@media (max-width:820px){
/* On narrow screens the rail is already a horizontal strip; collapse is a no-op */
.app-shell.nav-collapsed .side-nav{width:auto}
.app-shell.nav-collapsed .snav span{display:inline}
}
/* ===================================================================
Phase 2e: list column chooser + reorder, screen actions, edit/new
=================================================================== */
.screen-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rec-sec-r{display:inline-flex;align-items:center;gap:10px}
.rec-sec-action{color:var(--blue-deep);font-size:12px;font-weight:600}
.rec-sec-action:hover{text-decoration:underline}
/* Columns button + popover */
.cols-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);cursor:pointer;padding:0}
.cols-btn:hover{border-color:var(--blue);background:#f5f9ff}
.cols-btn .ic{width:17px;height:17px}
.cols-panel{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(16,24,40,.16);padding:8px;min-width:200px;max-height:340px;overflow:auto}
.cols-panel-h{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:6px 8px 8px}
.cols-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--ink)}
.cols-row:hover{background:#f3f5f8}
.cols-row input{margin:0;accent-color:var(--blue)}
.cols-row input:disabled{opacity:.5}
/* Header drag-reorder affordances */
.data-table thead th[data-col]{cursor:grab;user-select:none}
.data-table thead th.th-drag{opacity:.5}
.data-table thead th.th-over{box-shadow:inset 2px 0 0 var(--blue)}
/* Click-to-sort column indicators */
.data-table thead th.sort-asc::after{content:" \25B2";font-size:9px;color:var(--blue);vertical-align:middle}
.data-table thead th.sort-desc::after{content:" \25BC";font-size:9px;color:var(--blue);vertical-align:middle}
/* ===================================================================
Phase 2f: custom fields + inline editing
=================================================================== */
.cf-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}
.cf-list{min-width:0}
.cf-del{background:#fff;border:1px solid var(--line);color:var(--red);border-radius:7px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.cf-del:hover{border-color:var(--red);background:#fdeaea}
.cf-pill{background:#eef2f8;color:var(--navy)}
.cf-empty{color:#9aa5b1}
/* Inline-editable value */
.ifield{cursor:text;border-radius:6px;padding:1px 5px;margin:-1px -5px;display:inline-block;min-width:26px}
.ifield:hover{background:#eef4ff;box-shadow:inset 0 0 0 1px #cfe0f5}
.ifield--editing,.ifield--editing:hover{cursor:default;background:transparent;box-shadow:none;display:block}
.ifield--saving{opacity:.5}
/* Full-width field row (sits below the 2-col grid, e.g. account Notes). */
.fg--full{margin-top:15px}
.fg--full .fg-main{flex:1;min-width:0}
/* A block ifield (multi-line text like notes) wraps naturally. */
.ifield--block{display:block;white-space:pre-wrap}
.ied{display:inline-flex;align-items:center;gap:5px;width:100%}
.ied-input{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--blue);border-radius:7px;background:#fff;color:var(--ink);min-width:0;flex:1;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
textarea.ied-input{resize:vertical}
.ied-check{width:17px;height:17px;accent-color:var(--blue)}
.ied-save,.ied-cancel{flex:none;width:26px;height:28px;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;line-height:1}
.ied-save{color:var(--green);border-color:#b7e4cd}
.ied-save:hover{background:#f0fbf5}
.ied-cancel{color:var(--muted)}
.ied-cancel:hover{background:#f3f5f8}
.ied-ai{flex:none;width:26px;height:28px;border-radius:7px;border:1px solid #d6c7f2;background:#faf7ff;color:#7c3aed;cursor:pointer;font-size:13px;line-height:1}
.ied-ai:hover{background:#f3ecff}
.ied-ai:disabled{opacity:.6;cursor:default}
@media (max-width:760px){ .cf-layout{grid-template-columns:1fr} }
/* ===================================================================
Phase 2g: group / segment builder
=================================================================== */
.gb-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gb-conds{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.gb-cond{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.4fr) 34px;gap:8px;align-items:center}
.gb-cond select,.gb-cond input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
.gb-cond select:focus,.gb-cond input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.gb-rm{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;height:36px;cursor:pointer;font-size:13px}
.gb-rm:hover{border-color:var(--red);color:var(--red);background:#fdeaea}
.gb-actions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gb-count{color:var(--navy);font-weight:600;font-size:14px}
@media (max-width:680px){ .gb-row2{grid-template-columns:1fr} .gb-cond{grid-template-columns:1fr 1fr} .gb-cond .gb-val{grid-column:1 / -1} }
/* ===================================================================
Phase 2h: PWA install / Add-to-Home-Screen prompt
=================================================================== */
.pwa-prompt{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;align-items:flex-start;gap:12px;background:var(--navy);color:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 8px 30px rgba(16,24,40,.28);max-width:520px;margin:0 auto}
.pwa-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pwa-body strong{font-family:'Barlow',sans-serif;font-size:15px}
.pwa-body span{color:#cdd9e6;font-size:13px;line-height:1.45}
.pwa-install{align-self:flex-start;margin-top:8px}
.pwa-x{flex:none;background:transparent;border:0;color:#9fb3cc;font-size:15px;cursor:pointer;line-height:1;padding:2px 4px}
.pwa-x:hover{color:#fff}
/* ===================================================================
Phase 2i: contact photos (camera attachments)
=================================================================== */
.photo-add{margin:0 0 12px}
.photo-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.photo-btn .ic{width:16px;height:16px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.photo-cell{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#f3f5f8}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell form{position:absolute;top:0;right:0;margin:0}
.photo-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:7px;border:0;background:rgba(16,24,40,.6);color:#fff;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.photo-del:hover{background:var(--red)}
/* ===================================================================
Phase 2j: opportunity products / line items
=================================================================== */
.li-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 4px}
.li-add select{flex:1;min-width:160px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.li-add .li-qty{width:74px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.li-table tfoot td{font-weight:700;color:var(--navy);border-top:2px solid var(--line)}
.li-del{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:7px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1}
.li-del:hover{border-color:var(--red);color:var(--red);background:#fdeaea}
/* Subscription summary (MRR / ARR / contract value on a deal) */
.sub-summary{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 12px}
.sub-metric{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:9px 14px;min-width:104px}
.sub-metric--lead{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35)}
.sub-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.sub-val{display:block;font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:19px;margin-top:2px}
.sub-metric--lead .sub-val{color:var(--blue)}
.sub-suffix{font-size:12px;font-weight:600;color:var(--muted);margin-left:2px}
/* ===================================================================
Contact tags
=================================================================== */
.tag-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.tagpill{display:inline-flex;align-items:center;gap:2px;background:var(--tagc,#3B82F6);color:#fff;border-radius:999px;padding:3px 4px 3px 11px;font-size:12px;font-weight:600;line-height:1.6}
.tagpill-rm{display:inline}
.tagpill-x{background:rgba(255,255,255,.25);border:0;color:#fff;border-radius:999px;width:16px;height:16px;font-size:12px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.tagpill-x:hover{background:rgba(255,255,255,.45)}
.tag-empty{color:var(--muted);font-size:13px}
.tag-add{display:flex;gap:7px;align-items:center}
.tag-add input{flex:1;min-width:0;max-width:260px;font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.tag-add input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* ===================================================================
Dashboard
=================================================================== */
.dash{max-width:1180px}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,32,56,.04)}
.kpi--accent{background:linear-gradient(180deg,#fff, #f3f7ff);border-color:rgba(59,130,246,.30)}
.kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.kpi-val{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:25px;margin-top:3px;line-height:1.1}
.kpi--accent .kpi-val{color:var(--blue)}
/* Balanced KPI hierarchy: 3 primary financial KPIs up top, 4 secondary metrics
below (smaller), so the rows are even and the money numbers lead. */
.kpi-row--primary{grid-template-columns:repeat(3,1fr)}
.kpi-row--secondary{grid-template-columns:repeat(4,1fr);margin-top:-2px}
.kpi--sm{padding:12px 14px}
.kpi--sm .kpi-val{font-size:21px;color:var(--navy)}
.kpi-suf{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(16,32,56,.04);min-width:0}
.panel-card.span2{grid-column:span 2}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:13px}
.pc-title{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.pc-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pc-empty{color:var(--muted);font-size:13px;padding:8px 0 4px}
/* horizontal bars */
.barset{display:flex;flex-direction:column;gap:9px}
.barrow{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px}
.barlabel{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{height:10px;background:#eef2f7;border-radius:6px;overflow:hidden}
.barfill{height:100%;border-radius:6px;min-width:2px;transition:width .4s ease}
.barval{font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap}
/* donut (conic-gradient) */
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut{width:118px;height:118px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.donut-hole{width:74px;height:74px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-num{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:23px;line-height:1}
.donut-cap{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.legend{display:flex;flex-direction:column;gap:6px;min-width:0}
.leg{font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:7px;white-space:nowrap}
.leg b{color:var(--navy)}
.leg-dot{width:10px;height:10px;border-radius:3px;flex:none}
/* sparkline */
.spark{width:100%;height:54px;display:block}
.spark-x{display:flex;justify-content:space-between;margin-top:4px;font-size:10.5px;color:var(--muted)}
/* dashboard mini table + stats */
.dash-table{width:100%;border-collapse:collapse}
.dash-table td{padding:8px 6px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.dash-table tr:last-child td{border-bottom:0}
.dash-table .dt-sub{display:block;color:var(--muted);font-size:11.5px}
.dash-table .num{text-align:right;font-weight:600;color:var(--navy);white-space:nowrap}
.ministat{display:flex;gap:26px;padding-top:4px}
.ms-num{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:28px;line-height:1}
.ms-cap{font-size:11.5px;color:var(--muted);margin-top:2px}
@media (max-width:1000px){
.kpi-row{grid-template-columns:repeat(2,1fr)}
.dash-grid{grid-template-columns:1fr}
.panel-card.span2{grid-column:span 1}
}
/* Clickable dashboard */
a.kpi{text-decoration:none;display:block;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,32,56,.10);border-color:rgba(59,130,246,.45);text-decoration:none}
.pc-view{font-size:11px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.pc-view:hover{color:var(--blue-deep,#2563EB);text-decoration:none}
.dash-table tr{transition:background .1s ease}
.dash-table tbody tr:hover{background:#f5f8ff}
/* ===================================================================
Addresses box
=================================================================== */
.addr-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:9px;background:#fff}
.addr-card--primary{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.035)}
.addr-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.addr-label{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.addr-primary-pill{background:rgba(59,130,246,.14);color:var(--blue);font-size:10px;padding:1px 8px}
.addr-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.addr-actions form{display:inline}
.addr-link{background:none;border:0;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;padding:0}
.addr-link:hover{color:var(--blue)}
.addr-x{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:6px;width:22px;height:22px;font-size:13px;line-height:1;cursor:pointer;padding:0}
.addr-x:hover{border-color:var(--red);color:var(--red)}
.addr-lines{font-size:13px;color:var(--ink);line-height:1.7}
.addr-sep{color:var(--muted)}
.addr-add{margin-top:4px}
.addr-add summary{cursor:pointer;color:var(--blue);font-size:13px;font-weight:600;list-style:none;padding:4px 0}
.addr-add summary::-webkit-details-marker{display:none}
.addr-form{display:flex;flex-direction:column;gap:7px;margin-top:8px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:11px}
.addr-form input{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.addr-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.addr-form-row{display:flex;gap:7px}
.addr-form-row input{flex:1;min-width:0}
/* ===================================================================
Avatars with uploaded logo / photo
=================================================================== */
.rec-avatar{position:relative;overflow:visible}
.rec-avatar--img{background:#fff;border:1px solid var(--line)}
.rec-avatar--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av-upl-form{position:absolute;right:-4px;bottom:-4px;margin:0}
.av-upl{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(16,32,56,.25)}
.av-upl:hover{background:var(--blue-deep,#2563EB)}
.av-upl .ic{width:12px;height:12px}
.lr-avatar--img{background:#fff;padding:0;overflow:hidden}
.lr-avatar--img img{width:100%;height:100%;object-fit:cover;display:block}
/* ===================================================================
AI Auto-capture box (in the activity panel)
=================================================================== */
.ai-capture{margin-bottom:14px}
.ai-capture details{background:linear-gradient(180deg,#f3f7ff,#eef4ff);border:1px solid rgba(59,130,246,.30);border-radius:11px;padding:10px 12px}
.ai-capture summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;font-family:'Barlow',sans-serif;font-weight:700;font-size:12.5px;color:var(--navy);text-transform:uppercase;letter-spacing:.03em}
.ai-capture summary::-webkit-details-marker{display:none}
.ai-capture summary .ic{width:16px;height:16px;color:var(--blue)}
.ai-input,.ai-subject,.ai-summary,.ai-draft{width:100%;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);box-sizing:border-box;resize:vertical}
.ai-input{margin:9px 0 8px}
.ai-input:focus,.ai-subject:focus,.ai-summary:focus,.ai-draft:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.ai-go[disabled]{opacity:.6;cursor:default}
.ai-err{color:var(--red);font-size:12.5px;margin-top:8px}
.ai-result{margin-top:11px;border-top:1px dashed rgba(59,130,246,.3);padding-top:10px;display:flex;flex-direction:column;gap:7px}
.ai-reslabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:7px}
.ai-type{font-size:11px;text-transform:none;letter-spacing:0}
.ai-steps{display:flex;flex-direction:column;gap:2px}
.ai-step{font-size:12.5px;color:var(--ink)}
.ai-copy{background:none;border:1px solid var(--line);border-radius:6px;color:var(--blue);font-size:11px;padding:1px 7px;cursor:pointer}
.ai-copy:hover{background:#fff;border-color:var(--blue)}
.ai-actions{display:flex;align-items:center;gap:9px;margin-top:2px}
.ai-status{font-size:12px;color:var(--muted)}
/* AI pipeline copilot panel (dashboard) */
.ai-status{background:linear-gradient(180deg,#f3f7ff,#eef4ff);border:1px solid rgba(59,130,246,.30)}
.ai-status-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-status-title{display:flex;align-items:center;gap:7px;font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:13px}
.ai-status-body{margin-top:9px;font-size:13.5px;color:var(--navy);line-height:1.5}
.ai-status-err{margin-top:8px;font-size:12.5px;color:#b91c1c}
.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
@media (max-width:820px){.today-grid{grid-template-columns:1fr}}
.today-h{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:14px;margin-bottom:8px}
.today-row{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;color:var(--navy)}
.today-row:hover{background:#f8fafc}
.today-main{display:block;font-weight:600;font-size:13px}
.today-sub{display:block;font-size:12px;color:var(--muted)}
.lead-chip{display:inline-block;font-size:10px;font-weight:800;padding:1px 6px;border-radius:10px;vertical-align:middle;color:#fff}
.lead-hot{background:#dc2626}.lead-warm{background:#d97706}.lead-cold{background:#94a3b8}
.lead-box{display:flex;align-items:center;gap:14px}
.lead-box-score{min-width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Barlow',sans-serif;font-weight:800;font-size:20px;color:#fff}
.lead-box-score.lead-hot{background:#dc2626}.lead-box-score.lead-warm{background:#d97706}.lead-box-score.lead-cold{background:#94a3b8}
.lead-box-band{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:14px}
.health-chips{display:flex;gap:6px;padding:6px 0 4px;flex-wrap:wrap}
.hchip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:12px;border:1px solid var(--line);color:var(--muted)}
.hchip--on{background:var(--navy);color:#fff;border-color:var(--navy)}
.hp{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;vertical-align:middle;letter-spacing:.02em}
.hp-rot{background:#fee2e2;color:#b91c1c}
.hp-step{background:#fef3c7;color:#92400e}
/* Dashboard AI boxes — the generic "ask" cards (.dash-ai-card) and the richer
bespoke boxes (.ai-focus) share ONE look + ONE 2-across responsive grid so
every dashboard reads the same. A lone box spans the full width. */
.dash-ai-row,.ai-zone{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}
@media (max-width:760px){.dash-ai-row,.ai-zone{grid-template-columns:1fr}}
.dash-ai-card,.ai-focus{background:linear-gradient(180deg,#f3f7ff,#eef4ff);border:1px solid rgba(59,130,246,.30);border-radius:14px;padding:13px 16px;margin:0}
.ai-zone .ai-focus:only-child{grid-column:1/-1}
.dash-ai-head,.ai-focus-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dash-ai-title,.ai-focus-title{display:flex;align-items:center;gap:7px;font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:13px;text-transform:none;letter-spacing:normal}
.dash-ai-title .ic,.ai-focus-title .ic{width:17px;height:17px;color:var(--blue)}
.dash-ai-body{margin-top:10px;font-size:13px;color:var(--navy);line-height:1.5}
.dash-ai-err,.ai-focus-err{margin-top:8px;font-size:12.5px;color:#b91c1c}
.ai-focus-body{margin-top:12px;display:grid;grid-template-columns:1fr;gap:14px;font-size:13px}
.aif-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px}
.aif-item{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px}
.aif-urg{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;margin-top:1px}
.aif-high .aif-urg{background:#fdeaea;color:var(--red)}
.aif-medium .aif-urg{background:#fff4e5;color:#b45309}
.aif-low .aif-urg{background:#eef2f7;color:var(--muted)}
.aif-high{border-left:3px solid var(--red)}
.aif-action{font-size:13.5px;color:var(--ink);font-weight:600}
.aif-meta{font-size:12px;color:var(--muted);margin-top:2px}
.aif-meta a{font-weight:600}
.aif-watchitem{font-size:12.5px;color:var(--ink);padding:5px 0;border-bottom:1px solid var(--line)}
.aif-watchitem:last-child{border-bottom:0}
.aif-empty{color:var(--muted);font-size:13px}
.aif-tp{font-size:12px;color:var(--ink);margin-top:3px;font-style:italic}
.ai-radar{margin-top:-2px}
.ai-forecast{margin-top:-2px}
.ai-fc-summary{display:flex;gap:22px;margin-bottom:11px;flex-wrap:wrap}
.fc-stat{display:flex;flex-direction:column;gap:1px}
.fc-stat-num{font-size:20px;font-weight:800;color:var(--navy);line-height:1.1}
.fc-stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.fc-deal{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px}
.fc-prob{flex:none;min-width:46px;text-align:center;font-weight:800;font-size:14px;padding:6px 4px;border-radius:8px;border:1px solid var(--line)}
.fc-hi{background:#e7f6ef;border-color:#b7e4cd;color:var(--green)}
.fc-mid{background:#fff4e5;border-color:#f3d9ab;color:var(--amber)}
.fc-lo{background:#fdeceb;border-color:#f3c6c2;color:var(--red)}
.fc-na{background:#f6f7f9;color:var(--muted)}
.fc-main{flex:1;min-width:0}
.fc-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fc-top a{font-weight:600}
.fc-amt{font-size:12.5px;color:var(--muted);white-space:nowrap}
.fc-meta{font-size:12px;color:var(--muted);margin-top:2px}
.fc-factor{font-size:12px;color:var(--ink);margin-top:3px;font-style:italic}
.ai-triage{margin-bottom:18px}
.lt-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px}
.lt-tier{flex:none;min-width:54px;text-align:center;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:6px 4px;border-radius:8px;border:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.lt-score{font-size:13px;font-weight:800;letter-spacing:0}
.lt-hot .lt-tier{background:#fdeceb;border-color:#f3c6c2;color:var(--red)}
.lt-warm .lt-tier{background:#fff4e5;border-color:#f3d9ab;color:var(--amber)}
.lt-cold .lt-tier{background:#f6f7f9;border-color:var(--line);color:var(--muted)}
.lt-main{flex:1;min-width:0}
.lt-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.lt-top a{font-weight:600}
.lt-acct{font-size:12px;color:var(--muted);white-space:nowrap}
.lt-step{font-size:13px;color:var(--ink);margin-top:2px}
.lt-meta{font-size:12px;color:var(--muted);margin-top:3px}
/* Data hygiene */
.ai-hygiene{margin-top:-2px}
.hy-summary{font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:9px}
.hy-cluster{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px}
.hy-chead{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.hy-kind{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.hy-mem{display:flex;gap:8px;align-items:baseline;padding:3px 0;flex-wrap:wrap}
.hy-mem a{font-weight:600}
.hy-keep{background:#f0fbf5;border-radius:7px;padding:4px 7px;margin:1px -3px}
.hy-keep-tag{flex:none;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--green);background:#e7f6ef;border:1px solid #b7e4cd;border-radius:5px;padding:1px 6px}
.hy-keep-tag.hy-merge{color:var(--muted);background:#f6f7f9;border-color:var(--line)}
.hy-detail{font-size:12px;color:var(--muted)}
.hy-reason{font-size:12px;color:var(--ink);margin-top:5px;font-style:italic}
.hy-gap{font-size:12.5px;color:var(--ink);padding:5px 0;border-bottom:1px solid var(--line)}
.hy-gap:last-child{border-bottom:0}
@media (max-width:1000px){.ai-focus-body{grid-template-columns:1fr}}
/* ===================================================================
Ask-your-CRM chat
=================================================================== */
.ask-wrap{max-width:820px}
.ask-chat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;min-height:340px;max-height:calc(100vh - 300px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.ask-msg{display:flex;gap:9px;max-width:88%}
.ask-msg--user{align-self:flex-end;flex-direction:row-reverse}
.ask-ava{flex:none;width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.ask-ava .ic{width:16px;height:16px}
.ask-bubble{font-size:14px;line-height:1.55;padding:10px 14px;border-radius:12px;color:var(--ink)}
.ask-msg--ai .ask-bubble{background:#f3f7ff;border:1px solid rgba(59,130,246,.18)}
.ask-msg--user .ask-bubble{background:var(--blue);color:#fff}
.ask-bubble p{margin:0 0 8px}
.ask-bubble p:last-child{margin-bottom:0}
.ask-bubble .ask-h{margin:2px 0 8px;font-weight:700;line-height:1.3;color:var(--navy)}
.ask-bubble h2.ask-h{font-size:16px}
.ask-bubble h3.ask-h{font-size:14.5px}
.ask-bubble h4.ask-h{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ask-bubble .ask-ul,.ask-bubble .ask-ol{margin:4px 0 8px;padding-left:20px}
.ask-bubble .ask-ul li,.ask-bubble .ask-ol li{margin:2px 0}
.ask-bubble .ask-ul:last-child,.ask-bubble .ask-ol:last-child{margin-bottom:0}
.ask-bubble code{background:rgba(30,58,95,.07);border-radius:4px;padding:1px 5px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ask-bubble a{color:var(--blue);text-decoration:underline}
.ask-table{border-collapse:collapse;width:100%;margin:6px 0 10px;font-size:13px}
.ask-table:last-child{margin-bottom:0}
.ask-table th,.ask-table td{border:1px solid rgba(30,58,95,.14);padding:6px 9px;text-align:left;vertical-align:top}
.ask-table th{background:rgba(59,130,246,.08);font-weight:600;color:var(--navy)}
.ask-table tr:nth-child(even) td{background:rgba(30,58,95,.02)}
.ask-err{color:var(--red)}
.ask-form{display:flex;gap:9px}
.ask-form input{flex:1;font:inherit;font-size:14px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.ask-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.ask-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.ask-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;color:var(--navy);cursor:pointer}
.ask-chip:hover{border-color:var(--blue);color:var(--blue);background:#f3f7ff}
/* ICP fit scoring (account detail) */
.ai-tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--blue);background:rgba(59,130,246,.12);border-radius:5px;padding:1px 6px;vertical-align:middle}
.icp-card{display:flex;flex-direction:column;gap:11px}
.icp-head{display:flex;gap:14px;align-items:flex-start}
.icp-badge{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:#fff}
.icp-num{font-size:26px;font-weight:800;line-height:1;color:var(--navy)}
.icp-tier{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.icp-tier-a{background:#e7f6ef;border-color:#b7e4cd}.icp-tier-a .icp-num{color:var(--green)}.icp-tier-a .icp-tier{color:var(--green)}
.icp-tier-b{background:#fff4e5;border-color:#f3d9ab}.icp-tier-b .icp-num{color:var(--amber)}.icp-tier-b .icp-tier{color:var(--amber)}
.icp-tier-c{background:#f6f7f9;border-color:var(--line)}.icp-tier-c .icp-num{color:var(--muted)}
.icp-meta{flex:1;min-width:0}
.icp-rationale{font-size:13.5px;line-height:1.5;color:var(--ink)}
.icp-when{font-size:11.5px;color:var(--muted);margin-top:5px}
.icp-empty{font-size:13.5px;color:var(--muted);line-height:1.5}
.icp-go{align-self:flex-start;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:8px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.icp-go:hover{background:var(--blue-deep)}
.icp-go:disabled{opacity:.6;cursor:default}
.icp-result:not([hidden]){display:block;border-top:1px solid var(--line);padding-top:11px}
.icp-list-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:6px 0 4px}
.icp-list{margin:0 0 6px;padding-left:18px}
.icp-list li{font-size:13px;line-height:1.5;margin:2px 0}
.icp-good li{color:var(--ink)}
.icp-gap li{color:var(--muted)}
.icp-err{font-size:13px;color:var(--red)}
/* Engagement-aware lead ranking (mirrors the ICP card) */
.eng-card{display:flex;flex-direction:column;gap:10px}
.eng-head{display:flex;gap:12px;align-items:flex-start}
.eng-badge{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:#fff}
.eng-num{font-size:26px;font-weight:800;line-height:1;color:var(--navy)}
.eng-intent{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.eng-hot{background:#fdecec;border-color:#f3b7b7}.eng-hot .eng-num,.eng-hot .eng-intent{color:#dc2626}
.eng-warming{background:#fff4e5;border-color:#f3d9ab}.eng-warming .eng-num,.eng-warming .eng-intent{color:var(--amber)}
.eng-cooling{background:#eef2f7;border-color:#cdd9e6}.eng-cooling .eng-num,.eng-cooling .eng-intent{color:#64748b}
.eng-cold{background:#f6f7f9;border-color:var(--line)}.eng-cold .eng-num,.eng-cold .eng-intent{color:var(--muted)}
.eng-meta{flex:1}
.eng-rationale{font-size:13.5px;line-height:1.5;color:var(--ink)}
.eng-next{font-size:13px;line-height:1.5;color:var(--ink);margin-top:4px}
.eng-when{font-size:11.5px;color:var(--muted);margin-top:5px}
.eng-empty{font-size:13.5px;color:var(--muted);line-height:1.5}
.eng-result:not([hidden]){display:block;border-top:1px solid var(--line);padding-top:11px}
.eng-list-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:6px 0 4px}
.eng-list{margin:0 0 6px;padding-left:18px}
.eng-list li{font-size:13px;line-height:1.5;margin:2px 0;color:var(--ink)}
.eng-err{font-size:13px;color:var(--red)}
/* Prominent AI affordances on the detail view */
.ract-ai{border-color:#cdddfb;background:#eef4ff;color:var(--blue-deep)}
.ract-ai .ic{color:var(--blue)}
.ract-ai:hover{border-color:var(--blue);background:#e3edff;box-shadow:0 1px 6px rgba(59,130,246,.18)}
.rec-tab--ai{color:var(--blue-deep)}
.rec-tab--ai.rec-tab--active{border-bottom-color:var(--blue-deep)}
/* Record Actions section — AI-first: a labeled AI cluster, then standard actions */
.rec-actions--grouped{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 18px}
.ract-col--ai{display:flex;flex-direction:column;gap:8px;flex:1 1 100%}
.ract-pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ract-pills--std{padding-top:2px}
.ract-pills--std::before{content:"";align-self:stretch}
.ract--util{color:var(--muted)}
.ract--util .ic{color:#9aa7b6}
/* AI status folded into the AI cluster — compact one-liner, not a big card */
.ract-col--ai .ai-status{background:none;border:none;padding:0;margin:0}
.ract-col--ai .ai-status .ai-status-head{justify-content:flex-start;gap:8px}
.ract-col--ai .ai-status .ai-status-title{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ract-col--ai .ai-status .ai-status-title .ic{width:13px;height:13px}
.ract-col--ai .ai-status .ai-status-go{padding:1px 8px;font-size:11.5px}
.ract-col--ai .ai-status .ai-status-body{margin-top:3px;font-size:12.5px;color:var(--ink)}
/* "Actions ▾" dropdown for the standard (non-AI) actions */
.actions-menu-wrap{position:relative;display:inline-block}
.actions-caret{margin-left:1px;font-size:10px;opacity:.8}
.actions-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:190px;background:#fff;
border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(30,58,95,.16);padding:6px}
.actions-menu[hidden]{display:none}
.actions-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;
border-radius:8px;padding:8px 11px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none}
.actions-item:hover{background:#f3f5f8;color:var(--navy);text-decoration:none}
.actions-item .ic{width:15px;height:15px;color:#7b8ca3}
/* AI Deep Research box */
.dr-card{display:flex;flex-direction:column;gap:9px}
.dr-empty{font-size:13.5px;color:var(--muted);line-height:1.5}
.dr-result:not([hidden]){display:block;border-top:1px solid var(--line);padding-top:10px}
.dr-overview{font-size:13.5px;line-height:1.55;color:var(--ink);margin-bottom:6px}
.dr-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 0 4px}
.dr-signal{font-size:13px;line-height:1.5;color:var(--ink);margin:4px 0}
.dr-src{font-size:11.5px;font-weight:600;color:var(--blue-deep);text-decoration:none;white-space:nowrap}
.dr-src:hover{text-decoration:underline}
.dr-list{margin:0 0 4px;padding-left:18px}
.dr-list li{font-size:13px;line-height:1.5;margin:2px 0;color:var(--ink)}
.dr-err{font-size:13px;color:var(--red)}
/* AI Hub */
.hub-wrap{max-width:1080px}
.hub-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.hub-h{font-family:'Barlow',sans-serif;font-size:15px;font-weight:800;color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:7px}
.hub-h .muted{font-weight:500;font-size:12.5px}
.hub-assistant .ask-chat{min-height:auto}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.hub-list{list-style:none;margin:0;padding:0}
.hub-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.hub-row:last-child{border-bottom:none}
.hub-row-main{flex:1;min-width:0;text-decoration:none;display:flex;flex-direction:column;gap:1px}
.hub-row-name{font-weight:700;color:var(--ink);font-size:13.5px}
.hub-row-sub{font-size:12px;color:var(--muted)}
.hub-row-tags{display:flex;align-items:center;gap:7px;flex:none}
.hub-mini-link{font-size:12px;font-weight:600;color:var(--blue-deep);text-decoration:none;white-space:nowrap}
.hub-mini-link:hover{text-decoration:underline}
.hub-empty{font-size:13px;color:var(--muted);line-height:1.55;padding:6px 2px}
.hub-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.hub-tool{display:block;border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:#fbfcfe;text-decoration:none;transition:border-color .12s,box-shadow .12s,background .12s}
.hub-tool:hover{border-color:var(--blue);background:#fff;box-shadow:0 2px 10px rgba(30,58,95,.08)}
.hub-tool-h{font-weight:800;font-size:13px;color:var(--navy);margin-bottom:3px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hub-tool-go{font-size:11px;font-weight:600;color:var(--blue-deep);opacity:0;transition:opacity .12s;white-space:nowrap}
.hub-tool:hover .hub-tool-go{opacity:1}
.hub-tool-d{font-size:12.5px;color:var(--muted);line-height:1.5}
/* Engagement chip in the contact header (intent-colored) */
.eng-hdr-chip{display:inline-block;vertical-align:middle;margin-left:8px;font-size:12px;font-weight:800;
padding:2px 9px;border-radius:999px;border:1px solid var(--line);line-height:1.6;letter-spacing:.01em}
.eng-hdr-chip.eng-hot{background:#fdecec;border-color:#f3b7b7;color:#dc2626}
.eng-hdr-chip.eng-warming{background:#fff4e5;border-color:#f3d9ab;color:var(--amber)}
.eng-hdr-chip.eng-cooling{background:#eef2f7;border-color:#cdd9e6;color:#64748b}
.eng-hdr-chip.eng-cold{background:#f6f7f9;border-color:var(--line);color:var(--muted)}
/* Contact avatar ring tinted by engagement intent (overrides the default blue inset) */
.rec-avatar--eng-hot{box-shadow:inset 3px 0 0 #dc2626, 0 0 0 2px #fde0e0}
.rec-avatar--eng-warming{box-shadow:inset 3px 0 0 var(--amber), 0 0 0 2px #fdecd2}
.rec-avatar--eng-cooling{box-shadow:inset 3px 0 0 #64748b, 0 0 0 2px #e2e8f0}
.rec-avatar--eng-cold{box-shadow:inset 3px 0 0 #94a3b8, 0 0 0 2px #eef0f3}
/* Enrichment / autofill */
.enrich-card{display:flex;flex-direction:column;gap:11px}
.enrich-empty{font-size:13.5px;color:var(--muted);line-height:1.5}
.enrich-go{align-self:flex-start;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:8px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.enrich-go:hover{background:var(--blue-deep)}
.enrich-go:disabled{opacity:.6;cursor:default}
.en-item{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px;background:#fff}
.en-item.en-applied{background:#f0fbf5;border-color:#b7e4cd}
.en-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.en-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.en-conf{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:999px;border:1px solid var(--line)}
.en-high{background:#e7f6ef;border-color:#b7e4cd;color:var(--green)}
.en-medium{background:#fff4e5;border-color:#f3d9ab;color:var(--amber)}
.en-low{background:#f6f7f9;color:var(--muted)}
.en-val{font-size:14px;color:var(--ink);margin-top:4px;word-break:break-word}
.en-basis{font-size:12px;color:var(--muted);margin-top:3px;font-style:italic}
.en-actions{margin-top:7px}
.en-apply{background:transparent;border:1px solid #b7e4cd;color:var(--green);border-radius:7px;padding:4px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.en-apply:hover{background:#f0fbf5}
.en-apply:disabled{opacity:.6;cursor:default}
.en-done{font-size:12px;font-weight:600;color:var(--green)}
.en-err{font-size:12.5px;color:var(--red);margin-top:5px}
/* Auto-tagging */
.tagsugg{margin-top:10px}
.tagsugg-go{display:inline-flex;align-items:center;gap:6px;background:rgba(59,130,246,.10);color:var(--blue);border:1px solid rgba(59,130,246,.22);border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.tagsugg-go:hover{background:rgba(59,130,246,.16)}
.tagsugg-go:disabled{opacity:.6;cursor:default}
.tagsugg-go .ic{width:14px;height:14px}
.tagsugg-result:not([hidden]){margin-top:9px}
.tagsugg-list{display:flex;flex-wrap:wrap;gap:7px}
.tagsugg-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px dashed var(--blue);color:var(--navy);border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.tagsugg-chip:hover{background:#f3f7ff}
.tagsugg-chip:disabled{cursor:default}
.tagsugg-chip.tagsugg-added{border-style:solid;border-color:#b7e4cd;background:#f0fbf5;color:var(--green);font-weight:600}
.tagsugg-new{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);background:rgba(59,130,246,.12);border-radius:4px;padding:0 4px}
/* Competitive assist */
.cna-card{display:flex;flex-direction:column;gap:8px}
.cna-form{display:flex;gap:8px}
.cna-input{flex:1;font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
.cna-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.cna-go{flex:none;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cna-go:hover{background:var(--blue-deep)}
.cna-go:disabled{opacity:.6;cursor:default}
.cna-hint{font-size:11.5px;color:var(--muted);line-height:1.45}
.cna-result:not([hidden]){margin-top:4px;border-top:1px solid var(--line);padding-top:10px}
.cna-vs{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cna-pos{font-size:14px;line-height:1.5;color:var(--navy);font-weight:600;margin:5px 0 4px}
.cna-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);margin:11px 0 5px}
.cna-item{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:6px}
.cna-theme{font-size:13px;font-weight:600;color:var(--ink)}
.cna-detail{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.cna-list{margin:0 0 6px;padding-left:18px}
.cna-list li{font-size:13px;line-height:1.5;margin:3px 0}
.cna-obj{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:6px}
.cna-q{font-size:12.5px;font-weight:600;color:var(--navy)}
.cna-a{font-size:12.5px;color:var(--ink);margin-top:3px;line-height:1.45}
/* Buying committee */
.bc-card{display:flex;flex-direction:column;gap:9px}
.bc-go{align-self:flex-start;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:8px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.bc-go:hover{background:var(--blue-deep)}
.bc-go:disabled{opacity:.6;cursor:default}
.bc-summary{font-size:13.5px;line-height:1.5;color:var(--navy);font-weight:600;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.bc-mem{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:6px}
.bc-stance{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.bc-advocate{background:#e7f6ef;border-color:#b7e4cd;color:var(--green)}
.bc-blocker{background:#fdeceb;border-color:#f3c6c2;color:var(--red)}
.bc-neutral{background:#fff4e5;border-color:#f3d9ab;color:var(--amber)}
.bc-unknown{background:#f6f7f9;color:var(--muted)}
.bc-main{flex:1;min-width:0}
.bc-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.bc-top a{font-weight:600}
.bc-role{font-size:12px;color:var(--muted)}
.bc-note{font-size:12.5px;color:var(--ink);margin-top:2px;line-height:1.45}
.bc-gaps li{color:var(--ink)}
/* Weekly digest */
.ai-digest{margin-bottom:14px}
.ai-wd-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.wd-kpi{flex:1;min-width:84px;display:flex;flex-direction:column;gap:1px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.wd-num{font-size:18px;font-weight:800;color:var(--navy);line-height:1.1}
.wd-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.wd-headline{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.5;margin-bottom:10px}
.wd-sec{margin-bottom:10px}
.wd-sec-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.wd-good .wd-sec-h{color:var(--green)}
.wd-warn .wd-sec-h{color:var(--amber)}
.wd-up .wd-sec-h{color:var(--blue)}
.wd-list{margin:0;padding-left:18px}
.wd-list li{font-size:13px;line-height:1.5;margin:3px 0;color:var(--ink)}
/* Quick-win batch shared */
.cm-card,.mb-card,.nba-card,.rh-card,.pr-card{display:flex;flex-direction:column;gap:9px}
.cm-go,.mb-go,.nba-go,.rh-go,.pr-go{align-self:flex-start;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:8px 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cm-go:hover,.mb-go:hover,.nba-go:hover,.rh-go:hover,.pr-go:hover{background:var(--blue-deep)}
.cm-go:disabled,.mb-go:disabled,.nba-go:disabled,.rh-go:disabled,.pr-go:disabled{opacity:.6;cursor:default}
.cm-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cm-purpose,.cm-tone{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.ai-field{margin-bottom:8px}
.ai-flabel{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px}
.ai-subj{font-size:13.5px;font-weight:600;color:var(--navy)}
.ai-body{font-size:13px;line-height:1.55;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;white-space:normal}
.ai-copy{align-self:flex-start;background:transparent;border:1px solid var(--line);color:var(--blue);border-radius:7px;padding:5px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;margin-top:8px}
.ai-copy:hover{border-color:var(--blue);background:#f3f7ff}
.nba-action{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.5;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:9px;padding:9px 12px}
.nba-reason{font-size:13px;color:var(--ink);line-height:1.5;margin-top:6px}
.pr-title{font-size:15px;font-weight:700;color:var(--navy)}
.rh-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rh-temp{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 11px;border-radius:999px;border:1px solid var(--line)}
.rh-warming{background:#e7f6ef;border-color:#b7e4cd;color:var(--green)}
.rh-steady{background:#eef4ff;border-color:rgba(59,130,246,.3);color:var(--blue)}
.rh-cooling{background:#fff4e5;border-color:#f3d9ab;color:var(--amber)}
.rh-cold{background:#fdeceb;border-color:#f3c6c2;color:var(--red)}
.rh-none{background:#f6f7f9;color:var(--muted)}
.rh-stat{font-size:12px;color:var(--muted)}
.rh-signals{margin-top:8px}
.rh-suggest{font-size:13px;color:var(--ink);background:#f3f7ff;border:1px solid rgba(59,130,246,.18);border-radius:9px;padding:8px 11px;margin-top:8px;line-height:1.5}
.ai-winloss .wd-headline{margin-top:4px}
/* ---- Phase 2g: per-user detail box reordering (drag handle) ---- */
.rbox{position:relative}
.rbox-grip{position:absolute;top:8px;right:8px;z-index:4;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;color:#94a3b8;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.06);cursor:grab;opacity:0;pointer-events:none;transition:opacity .12s,color .12s,background .12s}
.rbox-grip .ic{width:13px;height:13px}
.rbox:hover > .rbox-grip{opacity:1;pointer-events:auto}
.rbox-grip:hover{color:var(--navy);background:#eef2f7}
.rbox-grip:active{cursor:grabbing}
.rbox--dragging{opacity:.45}
.rbox--over{outline:2px dashed var(--blue);outline-offset:3px;border-radius:12px}
.rbox-tools{margin-top:12px;text-align:right}
.rbox-reset{background:none;border:none;color:#94a3b8;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:6px}
.rbox-reset:hover{color:var(--blue);text-decoration:underline}
/* Touch has no hover and HTML5 drag doesn't fire from touch: hide the grip on
small screens (boxes still render in the user's synced order) and keep it out
of the way of corner actions. */
@media (max-width:760px){.rbox-grip{display:none}.rbox-tools{display:none}}
/* ---- Phase 2h: website -> address enrichment (AI) ---- */
.wa-empty{font-size:13px;color:var(--muted);margin-bottom:8px;line-height:1.5}
.wa-go{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.wa-go:hover{background:#2563EB}
.wa-go:disabled{opacity:.6;cursor:default}
.wa-result{margin-top:10px}
.wa-addr{font-size:14px;color:var(--ink);line-height:1.6;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.wa-meta{font-size:12px;color:var(--muted);margin:6px 0 10px}
.wa-note{font-size:13px;color:var(--muted);background:#f6f7f9;border-radius:8px;padding:8px 11px}
.wa-err{font-size:13px;color:var(--red);background:#fdeceb;border:1px solid #f3c6c2;border-radius:8px;padding:8px 11px}
/* ---- UX: relocated enrichment triggers (find-address in addresses box header,
fetch-logo under the account avatar, find-photo in the contact photos box).
Section-header actions render as subtle link-style buttons with a small icon. ---- */
button.rec-sec-action{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;cursor:pointer;color:var(--blue-deep);font-family:'Inter',sans-serif;line-height:1.2}
button.rec-sec-action .ic{width:13px;height:13px}
button.rec-sec-action:hover{text-decoration:underline}
button.rec-sec-action:disabled{opacity:.6;cursor:default;text-decoration:none}
/* The find-address trigger lives in the addresses header now; drop the big blue button look. */
.wa-go.rec-sec-action{background:none;color:var(--blue-deep);border:none;border-radius:0;padding:0;font-size:12px;font-weight:600}
.wa-go.rec-sec-action:hover{background:none}
.wa-card .wa-result:empty{display:none}
/* Account avatar + "Fetch logo" stacked in the image area (out of the header row). */
.rec-avatar-wrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.av-action{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;cursor:pointer;color:var(--blue-deep);font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;line-height:1.1;white-space:nowrap}
.av-action .ic{width:12px;height:12px}
.av-action:hover{text-decoration:underline}
.av-action:disabled{opacity:.6;cursor:default;text-decoration:none}
/* ---- Phase 2i: AI usage dashboard ---- */
.aiu-h1{font-family:'Barlow',sans-serif;font-size:20px;font-weight:800;color:var(--navy);margin:0}
.aiu-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.aiu-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.aiu-kpi--accent{background:linear-gradient(180deg,#f3f7ff,#fff);border-color:rgba(59,130,246,.28)}
.aiu-k-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.aiu-k-val{font-size:22px;font-weight:800;color:var(--navy);font-family:'Barlow',sans-serif;margin-top:4px}
.aiu-bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:8px}
.aiu-barcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.aiu-bar-track{width:100%;max-width:64px;height:120px;display:flex;align-items:flex-end;background:#f1f4f8;border-radius:7px;overflow:hidden}
.aiu-bar-fill{width:100%;background:var(--blue);border-radius:7px 7px 0 0;min-height:2px}
.aiu-bar-cost{font-size:12px;font-weight:700;color:var(--navy);margin-top:6px}
.aiu-bar-label{font-size:11px;color:var(--muted);margin-top:2px}
.aiu-note{font-size:12px;color:var(--muted);line-height:1.6;background:#f6f7f9;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:14px}
.aiu-note code{background:#eef2f7;padding:1px 5px;border-radius:4px;font-size:11px}
.aiu-empty{font-size:14px;color:var(--muted);line-height:1.6}
/* ---- Phase 2j: dashboard tabs + Overview hero ---- */
.dash-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.dash-tab{padding:9px 16px;border-radius:9px 9px 0 0;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border:1px solid transparent;border-bottom:none;margin-bottom:-1px}
.dash-tab:hover{color:var(--navy);background:#f1f4f8}
.dash-tab--active{color:var(--blue);background:#fff;border-color:var(--line);border-bottom:2px solid var(--blue)}
/* Reports reads as a different kind of view (analytics, not an object list):
pushed to the right and styled as a distinct boxed/inverted pill. */
.dash-tab--reports{margin-left:auto;margin-bottom:2px;border:1px solid var(--blue);background:#eef4ff;color:var(--blue);border-radius:8px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.dash-tab--reports:hover{background:#e2edff;color:var(--blue-deep)}
.dash-tab--reports.dash-tab--active{background:var(--blue);color:#fff;border-color:var(--blue);border-bottom:1px solid var(--blue)}
.dash-tab--reports .ic{width:15px;height:15px}
.ov-hero{margin-bottom:16px}
.ov-greet{font-family:'Barlow',sans-serif;font-size:24px;font-weight:800;color:var(--navy);line-height:1.1}
.ov-date{font-size:13px;color:var(--muted);margin-top:3px}
/* Onboarding "getting started" card (Jun 13) — top of the dashboard Overview.
Server renders it only while steps remain; auto-vanishes on completion.
wireOnboarding() honors a localStorage dismiss. */
.ob-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
border-radius:12px;padding:16px 18px;margin-bottom:18px;box-shadow:0 1px 2px rgba(16,32,56,.04)}
.ob-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ob-title{font-family:'Barlow',sans-serif;font-weight:800;color:var(--navy);font-size:16px}
.ob-sub{font-size:13px;color:var(--muted);margin-top:2px}
.ob-dismiss{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;padding:2px 4px}
.ob-dismiss:hover{color:var(--navy);text-decoration:underline}
.ob-modal[hidden]{display:none}
.ob-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.ob-modal-back{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.ob-modal-box{position:relative;background:#fff;border-radius:12px;padding:20px 22px;width:min(440px,92vw);max-height:90vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.ob-modal-head{display:flex;align-items:center;justify-content:space-between;font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);font-size:16px;margin-bottom:12px}
.ob-modal-x{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
.ob-bar{height:6px;border-radius:999px;background:#eef1f6;margin:12px 0 14px;overflow:hidden}
.ob-bar span{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .3s}
.ob-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-step{display:flex;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--line);border-radius:9px}
.ob-step--done{background:#f6faf7;border-color:#dbeee2}
.ob-check{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:'Barlow',sans-serif;font-weight:700;font-size:12px;background:#eef1f6;color:var(--muted)}
.ob-step--done .ob-check{background:#10B981;color:#fff}
.ob-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ob-label{font-weight:600;color:var(--navy);font-size:14px}
.ob-step--done .ob-label{color:#3d6b52}
.ob-hint{font-size:12px;color:var(--muted)}
.ob-tag{font-size:11px;font-weight:700;color:#3d6b52;text-transform:uppercase;letter-spacing:.4px}
/* ---- Phase 2k: contact ↔ account employment links (multi-account) ---- */
.mini-row--act{align-items:center}
.mini-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini-row--act .mini-sub{text-align:left}
.mini-acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mini-actf{display:inline;margin:0}
.mini-link{background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.mini-link:hover{text-decoration:underline}
.mini-x{background:none;border:none;color:#94a3b8;font-size:14px;cursor:pointer;padding:0 2px;line-height:1}
.mini-x:hover{color:var(--red)}
.link-add{margin-top:10px}
.link-add>summary{cursor:pointer;font-size:13px;color:var(--blue);font-weight:600;list-style:none}
.link-add>summary::-webkit-details-marker{display:none}
.link-form{display:flex;flex-direction:column;gap:7px;margin-top:8px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:11px}
.link-form select,.link-form input[type=text]{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.link-form select:focus,.link-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.link-prim{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
/* ---- Phase 2l: live list filter (dropdown pill) on detail list panes ---- */
.list-filter{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.lf-label{font-size:12px;color:var(--muted);white-space:nowrap}
.lf-select{flex:1;min-width:0;font:inherit;font-size:13px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.lf-select:hover{border-color:#cbd5e1}
.lf-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* ---- Phase 2m: group bulk-update panel ---- */
.bulk-panel{max-width:980px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
.bulk-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.bulk-lead{font-size:13px;color:var(--muted)}
.bulk-field,.bulk-val{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.bulk-field{cursor:pointer}
.bulk-valwrap{display:inline-flex;min-width:180px}
.bulk-valwrap .bulk-val{width:100%}
.bulk-field:focus,.bulk-val:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.bulk-msg{margin-top:8px;font-size:13px;color:var(--ink);min-height:1em}
/* ---- Phase 2n: Admin hub (cards + admin sidebar extras) ---- */
.ah-group{max-width:1000px;margin:0 0 22px}
.ah-group-title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.ah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:12px}
.ah-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.ah-card:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(2,32,71,.06)}
.ah-ic{flex:none;width:38px;height:38px;border-radius:9px;background:#eef3fb;color:var(--blue);display:flex;align-items:center;justify-content:center}
.ah-ic .ic{width:20px;height:20px}
.ah-card-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ah-card-title{font-weight:600;font-size:14px}
.ah-card-desc{font-size:12px;color:var(--muted);line-height:1.35}
.ah-row-act{text-align:right;white-space:nowrap}
.snav--back{color:var(--muted)}
.snav-ext{opacity:.55;font-size:11px}
/* ---- Phase 2o: navy topbar + sidebar Log out item ---- */
.side-nav form{margin:0}
button.snav{background:none;cursor:pointer}
/* ---- Phase 2p: custom-field row Edit link ---- */
.mini-acts{display:inline-flex;align-items:center;gap:12px}
.mini-acts form{margin:0}
.cf-edit{background:none;border:0;padding:0;color:var(--blue-deep);font:inherit;font-size:13px;cursor:pointer;text-decoration:none}
.cf-edit:hover{text-decoration:underline}
/* ---- Projects (Stage 2): health/priority pills, board title, link rows ---- */
.tg-health-on_track{background:#e7f6ef;color:var(--green)}
.tg-health-at_risk{background:#fff4e5;color:var(--amber)}
.tg-health-off_track{background:#fdeaea;color:var(--red)}
.tg-prio-low{background:#eef2f7;color:var(--muted)}
.tg-prio-medium{background:#eaf2fd;color:var(--blue-deep)}
.tg-prio-high{background:#fdeaea;color:var(--red)}
.board-title{font-family:'Barlow',sans-serif;color:var(--navy);font-size:22px;margin:0}
/* Project link rows (account/contact/deal) on the detail page */
.mini-row--linked{align-items:flex-start}
.mini-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini-row-act{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.mini-row-act form{margin:0}
.link-btn{background:none;border:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:0;white-space:nowrap}
.link-btn:hover{text-decoration:underline}
.proj-link-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.proj-link-add select{flex:1;min-width:160px;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.proj-link-add select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* ---- Projects table (Monday-style): stage pills, date highlights, group-by ---- */
/* Stable stage palette (navy/blue family + supporting tones), tasteful + consistent */
.tg-pstage-c1{background:#eef2fb;color:#3f51b5} /* Planning - indigo */
.tg-pstage-c2{background:#eaf2fd;color:var(--blue-deep)} /* In Progress - blue */
.tg-pstage-c3{background:#fff4e5;color:var(--amber)} /* On Hold - amber */
.tg-pstage-c4{background:#e7f6ef;color:var(--green)} /* Completed - green */
.tg-pstage-c5{background:#eef2f7;color:var(--muted)} /* Cancelled - gray */
.tg-pstage-c6{background:#f0eafd;color:#7c3aed} /* extra - violet */
/* Target-end date highlighting */
.data-table td.td-overdue .ifield{color:var(--red);font-weight:700}
.data-table td.td-overdue{background:#fdeaea}
.data-table td.td-soon .ifield{color:var(--amber);font-weight:700}
.data-table td.td-soon{background:#fff7ec}
/* Make inline cells fill the table cell for a clean editable affordance */
.ptab-table td .ifield{display:inline-block;width:auto;max-width:100%}
/* Group-by control */
.groupby{display:inline-flex;align-items:center;gap:7px}
.groupby-lbl{font-family:'Barlow',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.groupby-sel{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);font-weight:600;cursor:pointer}
.groupby-sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
/* Collapsible group header rows */
.ptab-group > td{background:#f5f8fc;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.ptab-group-tog{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;padding:10px 16px;text-align:left;font:inherit}
.ptab-group-tog:hover{background:#eef3fa}
.ptab-caret{display:inline-block;font-size:11px;color:var(--muted);transition:transform .12s ease;width:12px}
.ptab-group--collapsed .ptab-caret{transform:rotate(-90deg)}
.ptab-group-pill{font-size:12px}
.ptab-group-count{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;font-weight:700;color:var(--muted)}
.ptab-row--grouped td:first-child{padding-left:30px}
/* ---- In-app notifications (bell) — Jun 2026 ---- */
.app-bell{position:relative;display:flex;align-items:center}
.bell-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--navy);padding:6px;border-radius:8px;display:flex;align-items:center}
.bell-btn:hover{background:#eef2f7}
.bell-btn .ic{width:18px;height:18px}
.bell-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:'Inter',sans-serif}
.bell-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:430px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(22,48,77,.18);z-index:90;display:flex;flex-direction:column;overflow:hidden}
.bell-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;font-family:'Barlow',sans-serif;color:var(--navy)}
.bell-readall{background:none;border:none;cursor:pointer;color:var(--blue-deep);font-size:12px;font-weight:600}
.bell-readall:hover{text-decoration:underline}
.bell-list{overflow-y:auto;flex:1}
.bell-item{display:block;padding:10px 14px;border-bottom:1px solid #f0f3f7;font-size:13px;color:var(--ink,#1f2937);line-height:1.35}
.bell-item:hover{background:#f6f9fd}
.bell-item--unread{background:#eef5ff;font-weight:600}
.bell-item--unread:hover{background:#e4eefc}
.bell-when{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.bell-empty{padding:18px 14px;color:var(--muted);font-size:13px;text-align:center}
.bell-all{display:block;text-align:center;padding:9px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600}
/* @mention autocomplete */
.mention-menu{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(22,48,77,.16);z-index:95;min-width:200px;max-height:220px;overflow-y:auto}
.mention-opt{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:8px 12px;font-size:13px}
.mention-opt:hover,.mention-opt--active{background:#eef5ff}
.mention-user{color:var(--muted);font-size:12px;margin-left:6px}
/* notifications page */
.notif-row{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid #f0f3f7;align-items:center}
.notif-row--unread{background:#eef5ff}
.notif-kind{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bell-panel[hidden],.bell-badge[hidden]{display:none}
/* ---- Activities calendar + Projects timeline (Gantt) — Jun 2026 ---- */
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-month{font-family:'Barlow',sans-serif;font-weight:700;color:var(--navy);min-width:120px;text-align:center}
.cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-dow{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:2px 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{background:#fff;border:1px solid var(--line);border-radius:10px;min-height:96px;padding:6px 7px;overflow-y:auto;max-height:170px}
.cal-cell--out{background:#f6f8fb;opacity:.55}
.cal-cell--today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.cal-daynum{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.cal-cell--today .cal-daynum{color:var(--blue-deep)}
.cal-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.25;padding:2px 6px;border-radius:6px;margin-bottom:3px;background:#eef4fb;color:var(--navy);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal-chip:hover{background:#e2edf9}
.cal-chip .tl-dot{flex:none}
.cal-chip--opp{background:#eefbf2;color:#14633a;font-weight:600}
.cal-chip--opp:hover{background:#ddf5e7}
.cal-chip--overdue{background:#fdeaea;color:#b91c1c}
.cal-chip--done{opacity:.55;text-decoration:line-through}
.gantt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;overflow-x:auto}
.gantt-row{display:flex;align-items:center;min-height:34px;border-bottom:1px solid #f0f3f7}
.gantt-row:last-child{border-bottom:none}
.gantt-row--head{min-height:26px;border-bottom:1px solid var(--line)}
.gantt-label{flex:0 0 240px;display:flex;align-items:center;gap:8px;padding-right:12px;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gantt-track{flex:1;position:relative;height:18px;min-width:420px}
.gantt-track--head{display:flex;height:auto}
.gantt-month{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding:2px 0 2px 5px;overflow:hidden;white-space:nowrap}
.gantt-bar{position:absolute;top:3px;height:12px;border-radius:6px;display:block;min-width:6px}
.gantt-bar--on_track{background:#34c08b}
.gantt-bar--at_risk{background:#f0b429}
.gantt-bar--off_track{background:#e25563}
.gantt-bar--overdue{box-shadow:0 0 0 2px #dc2626}
.gantt-bar:hover{filter:brightness(.92)}
.gantt-today{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--blue);opacity:.75;z-index:1}
/* ---- Reports & goals — Jun 2026 ---- */
.goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:6px}
.goal-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.goal-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:9px;align-items:baseline}
.goal-head .muted{font-size:11.5px;text-align:right}
.goal-track{position:relative;height:10px;background:#eef2f7;border-radius:5px;overflow:visible}
.goal-fill{height:100%;border-radius:5px}
.goal-fill--ok{background:#34c08b}
.goal-fill--behind{background:#f0b429}
.goal-pace{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--navy);opacity:.55;border-radius:1px}
.goal-nums{display:flex;justify-content:space-between;font-size:12px;margin-top:7px;color:var(--muted)}
.goal-ok{color:#14633a;font-weight:700}
.goal-behind{color:#92400e;font-weight:700}
.goal-addform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px}
.goal-addform select,.goal-addform input{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}
.rp-share{display:flex;flex-wrap:wrap;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:13px}
.rp-share-label{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy)}
.rp-share-url{flex:1;min-width:260px;font:inherit;font-size:12.5px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#f7fafd;color:var(--muted)}
.q-signedbox{background:#e8f8ef;color:#14633a;border:1px solid #b6e8cb;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:12px}
.q-declinedbox{background:#fdeeee;color:#9b1c1c;border:1px solid #f3c5c5;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:12px}
.au-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px;font-size:13px}
.au-row select,.au-row input{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff}
.au-lbl{font-weight:700;color:var(--navy);font-family:'Barlow',sans-serif;min-width:96px}
.au-del{margin-left:auto}
.cf-file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cf-file-form{display:inline-flex}
/* Connector form: [hidden] must beat .field{display:flex} (the Jun 10 bell lesson) */
.form .field[hidden], #f-entities[hidden] { display: none; }
/* ===================================================================
Jun 11: mobile nav = hamburger drawer (replaces the horizontal strip,
which forced endless sideways scrolling). The topbar hamburger
(#navToggle) slides the full vertical nav in from the left.
=================================================================== */
@media (max-width:820px){
.app-shell{flex-direction:column}
.side-nav{position:fixed;left:0;top:0;bottom:0;width:248px;height:100vh;
flex-direction:column;overflow-y:auto;padding:0 0 14px;z-index:60;
transform:translateX(-104%);transition:transform .22s ease}
.app-shell.nav-open .side-nav{transform:none;box-shadow:0 0 40px rgba(8,20,40,.45)}
.side-logo{padding:14px;margin-bottom:2px}
.side-logo .logo-full{height:72px}
.snav{flex:none;margin:1px 10px;padding:10px 12px}
.snav span{display:inline}
.snav-group{display:block}
.snav-spacer{display:none}
.app-topbar{position:sticky;top:0;justify-content:space-between}
.nav-toggle{display:inline-flex}
.nav-backdrop{position:fixed;inset:0;background:rgba(10,22,40,.45);z-index:55}
.app-shell.nav-collapsed .side-nav{width:248px}
.app-shell.nav-collapsed .snav span{display:inline}
.app-shell.nav-collapsed .snav{justify-content:flex-start;gap:12px;padding:10px 12px}
}
/* Jun 11: clean record-header action row (replaces the qa-row quick-log
boxes and the stacked links under the avatar/logo). */
.rec-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.ract{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);
border-radius:999px;background:#fff;color:#33445c;font:inherit;font-size:12.5px;font-weight:600;
cursor:pointer;text-decoration:none;transition:border-color .12s, box-shadow .12s}
.ract .ic{width:15px;height:15px;color:#7b8ca3}
.ract:hover{border-color:var(--blue);color:var(--navy);text-decoration:none;box-shadow:0 1px 6px rgba(30,58,95,.10)}
.ract:hover .ic{color:var(--blue)}
/* Jun 11: pin-to-sidebar for AI boxes */
.rbox{position:relative}
.rbox-pin{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--line);
border-radius:999px;color:#7b8ca3;font-size:10.5px;font-weight:600;padding:2px 9px;cursor:pointer}
.rbox-pin:hover{color:var(--navy);border-color:var(--blue)}
.pane-side .rbox--pinned{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;background:#fff}
.pane-side .rbox--pinned .rbox-grip{display:none}
/* ---- Live saved-filter chips (list views) ---- */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 14px}
.fchip{display:inline-block;padding:4px 13px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:#46546a;font-size:12.5px;font-weight:600;text-decoration:none;line-height:1.5}
.fchip:hover{border-color:var(--blue);color:var(--navy)}
.fchip-on{background:var(--navy);border-color:var(--navy);color:#fff}
.fchip-on:hover{color:#fff}
.fchip-new{border-style:dashed;color:#7b8ca3}
.fchip-shared{margin-left:5px;opacity:.65;font-weight:400}
.fchip-acts{display:inline-flex;gap:4px;margin-left:2px}
.fchip-act{background:none;border:none;padding:4px 7px;color:#7b8ca3;font-size:12px;
cursor:pointer;text-decoration:underline;font-family:inherit}
.fchip-act:hover{color:var(--navy)}
.fchip-del:hover{color:#b3261e}
/* ---- Universal search (topbar + Cmd/Ctrl-K modal) ---- */
.gs-btn{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);
border-radius:999px;background:#fff;color:#7b8ca3;font-size:12.5px;cursor:pointer;font-family:inherit}
.gs-btn:hover{border-color:var(--blue);color:var(--navy)}
.gs-btn .ic{width:15px;height:15px}
.gs-kbd{font-family:inherit;font-size:10.5px;border:1px solid var(--line);border-radius:5px;
padding:0 5px;color:#9aa8bd;background:#f7f9fc}
@media (max-width:760px){.gs-btn-label,.gs-kbd{display:none}.gs-btn{padding:6px 9px}}
.gs-overlay{position:fixed;inset:0;background:rgba(15,28,46,.45);z-index:300;
display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 16px}
.gs-overlay[hidden]{display:none}
.gs-modal{width:100%;max-width:640px;background:#fff;border-radius:14px;
box-shadow:0 18px 60px rgba(15,28,46,.35);overflow:hidden}
.gs-inputwrap{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.gs-inputwrap .ic{width:18px;height:18px;color:#7b8ca3;flex:none}
.gs-input{flex:1;border:none;outline:none;font:inherit;font-size:15px;color:var(--navy)}
.gs-close{background:none;border:none;color:#9aa8bd;font-size:14px;cursor:pointer;padding:2px 6px}
.gs-close:hover{color:var(--navy)}
.gs-results{max-height:62vh;overflow-y:auto;padding:6px 0 10px}
.gs-copilot{display:flex;align-items:center;gap:8px;margin:0 10px;padding:9px 12px;
background:#eef4ff;border:1px solid #d4e2fb;border-radius:10px;text-decoration:none;
color:var(--navy);font-size:13px;font-weight:600}
.gs-copilot:hover{background:#e3edff}
.gs-copilot .ic{width:16px;height:16px;flex:0 0 auto;color:var(--blue)}
.gs-copilot .gs-copilot-q{font-weight:700}
.gs-empty{padding:18px 18px;color:#7b8ca3;font-size:13px}
.gs-sec-h{padding:10px 18px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:#9aa8bd}
.gs-item{display:block;padding:7px 18px;text-decoration:none}
.gs-item:hover{background:#f2f6fc}
.gs-item-l{display:block;font-size:13.5px;font-weight:600;color:var(--navy)}
.gs-item-s{display:block;font-size:12px;color:#7b8ca3;margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* My Profile (Jun 11 2026): topbar name links to /profile/ with an avatar */
.app-user-link{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:8px;padding:3px 8px 3px 4px}
.app-user-link:hover{background:rgba(255,255,255,.10);color:#fff}
.app-user-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.app-user-initials{background:#3B82F6;color:#fff;font-size:13px;font-weight:700}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;max-width:1080px}
.profile-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.profile-card h2{margin:0 0 10px;font-size:15px}
.profile-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.profile-field label{font-size:12px;font-weight:600;color:#64748b}
.profile-field input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.profile-avatar-lg{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.profile-avatar-lg.app-user-initials{display:inline-flex;font-size:32px}
/* Topbar polish (Jun 11 2026, Todd): bell was navy-on-navy (invisible when
empty); Search pill restyled blue w/ white text to match the dark topbar. */
.app-topbar .bell-btn{color:#fff;opacity:.92}
.app-topbar .bell-btn:hover{background:rgba(255,255,255,.14);opacity:1}
.app-topbar .gs-btn{background:var(--blue);border-color:var(--blue);color:#fff}
.app-topbar .gs-btn:hover{background:#2f6fe0;border-color:#2f6fe0;color:#fff}
.app-topbar .gs-kbd{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.85);background:transparent}
/* Microsoft 365 admin roster — compact (was too busy / font too big) */
.ms-compact .table{font-size:12.5px}
.ms-compact .table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#7b8ca3;padding:8px 12px}
.ms-compact .table td{padding:7px 12px}
.ms-chip{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 8px;margin-right:4px;background:#eef2f7;color:#64748b}
.ms-chip.on{background:#dcfce7;color:#15803d}
/* Automation builder rework (Jun 11 2026): recipes, live sentence, guardrails */
.au-recipes{max-width:860px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.au-recipes-head{margin-bottom:10px;font-size:13.5px}
.au-recipes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.au-recipe{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.au-recipe:hover{border-color:var(--blue);background:#eff6ff}
.au-recipe strong{font-size:13px}
.au-recipe .muted{font-size:11.5px;line-height:1.35}
.au-recipe-ic{font-size:16px}
.au-recipe-applied{max-width:860px;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:10px;padding:9px 14px;font-size:13px;margin-bottom:14px}
.au-recipe-applied a{margin-left:8px}
.au-sentence{max-width:860px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:16px;color:var(--navy)}
.au-sentence-warn{color:#b45309;font-weight:600}
.au-empty-hint--warn{color:#b45309;font-weight:600}
.au-if summary{cursor:pointer;list-style:none}
.au-if summary::-webkit-details-marker{display:none}
.au-if summary .ah-group-title::after{content:" ▸";color:#9aa8bd}
.au-if[open] summary .ah-group-title::after{content:" ▾"}
/* Truncated master-pane list notice (perf cap, Jun 2026) */
.pane-trunc{font-size:11px;color:var(--muted);padding:6px 12px;border-bottom:1px solid var(--line);background:#fafbfc;line-height:1.4}
/* Insight views (Jun 14 2026): whitespace matrix · going-cold · forecast · workload */
.empty-note{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);background:#fafbfc}
.ws-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:calc(100vh - 250px)}
.ws-table{border-collapse:separate;border-spacing:0;font-size:13px;white-space:nowrap}
.ws-table th,.ws-table td{padding:7px 10px;border-bottom:1px solid var(--line)}
.ws-table thead th{position:sticky;top:0;background:#f7f9fc;z-index:2;font-weight:600;text-align:center}
.ws-table .ws-acct{position:sticky;left:0;background:#fff;z-index:1;text-align:left;min-width:200px;border-right:1px solid var(--line)}
.ws-table thead .ws-acct{z-index:3}
.ws-prod span{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.ws-cell{text-align:center;color:#cbd5e1}
.ws-own{color:#16a34a;background:#f0fbf5;font-weight:700}
.ws-gaps{text-align:center;font-weight:600}
.ws-own-n{display:block;font-size:11px;color:var(--muted)}
.ws-ai{min-width:220px;white-space:normal}
.ws-out,.cold-out,.fc-ai-out{display:block;margin-top:4px;font-size:12.5px;color:var(--ink);white-space:normal}
.cold-days{color:#b45309;font-weight:600}
.cold-deal{background:#eef2ff;color:#3730a3}
.cold-ai{min-width:240px;white-space:normal}
.fc-goal{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 14px;background:#fafbfc}
.fc-goal-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.fc-goal-title{font-weight:600}
.fc-goal-num{color:var(--muted)}
.fc-bar{height:10px;border-radius:6px;background:#e8edf3;overflow:hidden;margin:8px 0}
.fc-bar-fill{height:100%;background:linear-gradient(90deg,#3B82F6,#1E3A5F)}
.fc-goal-foot{font-size:12.5px;color:var(--muted)}
.fc-ai{margin:0 0 14px}
.fc-table .fc-weighted{font-weight:700}
/* Right-align the numeric columns across head/body/total so they line up. The
total row uses | in | , which the thead-scoped rule never reached, so
the totals fell back to centered and looked shifted to the right. */
.fc-table th.num,.fc-table td.num{text-align:right}
.fc-table tfoot th{padding:12px 16px;border-top:2px solid var(--line);font-family:'Barlow',sans-serif;font-weight:700;color:var(--ink);background:#fafbfd;white-space:nowrap}
.fc-table tfoot th:first-child{text-align:left}
.fc-nodate td{color:var(--muted)}
/* Person filter pills (Activities "My activities / Everyone / a person"). */
.who-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 14px}
.who-bar-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:2px}
.who-pill{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#33445c;font-size:12.5px;font-weight:600;text-decoration:none;transition:border-color .12s,background .12s}
.who-pill:hover{border-color:var(--blue);color:var(--navy);text-decoration:none}
.who-pill--active{background:var(--navy);border-color:var(--navy);color:#fff}
.wl-warn{color:#b91c1c;font-weight:700}
.wl-load{display:inline-block;min-width:28px;padding:2px 8px;border-radius:10px;background:#eef2ff;color:#1e3a8a;font-weight:700}
/* Card/gallery view + account tree (Jun 14 2026) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rec-card{display:block;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);text-decoration:none;color:var(--ink);transition:box-shadow .12s,border-color .12s}
.rec-card:hover{box-shadow:0 3px 10px rgba(16,24,40,.10);border-color:var(--blue)}
.rec-card-top{display:flex;align-items:center;gap:9px}
.rec-avatar{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Barlow',sans-serif}
.rec-card-name{font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-card-top .lead-chip{margin-left:auto}
.rec-card-meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.rec-card-meta span:not(:last-child)::after{content:"·";margin-left:6px;color:#cbd5e1}
.rec-card-stats{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--ink)}
.acct-tree{border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px 4px}
.acct-tree-row{display:flex;align-items:center;gap:7px;padding:5px 10px;border-bottom:1px solid #f1f4f8;font-size:13.5px}
.acct-tree-row:last-child{border-bottom:none}
.acct-tree-indent{flex:none;display:inline-block}
.acct-tree-kids{color:var(--blue);font-size:11px}
.acct-tree-leaf{color:#cbd5e1}
.acct-tree-cnt{font-size:11px;background:#eef2f7;border-radius:9px;padding:0 7px}
/* Account/Contact Kanban board (Jun 14 2026) */
.bk-groupby{display:flex;align-items:center;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.bk-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.bk-col{flex:0 0 260px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:8px}
.bk-col--over{outline:2px dashed var(--blue);outline-offset:2px}
.bk-col-head{font-weight:700;font-size:12.5px;color:var(--navy);padding:4px 6px 8px;display:flex;justify-content:space-between}
.bk-col-head .cnt{background:#e8edf3;border-radius:9px;padding:0 7px;font-weight:600}
.bk-col-body{display:flex;flex-direction:column;gap:7px;min-height:24px}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 10px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.bk-card[draggable="true"]{cursor:grab}
.bk-card[draggable="true"]:active{cursor:grabbing}
.bk-card--drag{opacity:.45}
.bk-card-name{font-weight:600;color:var(--navy);text-decoration:none}
.bk-card-sub{font-size:12px;color:var(--muted);margin-top:3px}
.bk-empty{font-size:12px;padding:6px}
/* Salesforce-style tabbed record layout (opt-in, rebuilt Jun 14 2026) */
/* When on, widen the detail to full width (mirror .solo) so tabs have room. */
.three-pane.sf{grid-template-columns:minmax(0,1fr)}
.three-pane.sf .pane-list,.three-pane.sf .pane-side{display:none}
/* Highlights strip under the record name (the Lightning hallmark). */
.rec-highlights{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.rec-hl-chip{background:#f3f7ff;border:1px solid rgba(59,130,246,.25);border-radius:9px;padding:5px 11px;font-size:13px;color:var(--navy);display:inline-flex;gap:7px;align-items:baseline}
.rec-hl-chip .hl-l{color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* Full-width tab strip + panels. */
.rec-tabs-wrap{margin-top:4px}
.rec-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.rec-tab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 16px;cursor:pointer;font-family:'Barlow',sans-serif;font-weight:700;font-size:13.5px;color:var(--muted);margin-bottom:-1px}
.rec-tab:hover{color:var(--navy)}
.rec-tab--active{color:var(--navy);border-bottom-color:var(--blue)}
.rec-tabpanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:start}
.rec-tabpanel[hidden]{display:none} /* [hidden] must beat display:grid so tab switching works */
/* Activity (timeline + quick-log) carried into the Tabbed layout's Activity tab. */
.rec-tabpanel .rec-activity{grid-column:1 / -1;max-width:760px}
/* Admin AI assistant console (Jun 14 2026) */
.aia-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.aia-grid{grid-template-columns:1fr}}
.aia-card{margin:0}
.aia-h{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 0 5px}
.aia-opt{display:block;font-size:13px;padding:3px 0}
.aia-opt input{margin-right:6px}
.aia-out{margin-top:10px;font-size:13px}
.aia-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.aia-stat{background:#f3f7ff;border:1px solid rgba(59,130,246,.25);border-radius:9px;padding:6px 10px;font-size:12.5px}
.aia-stat strong{display:block;font-size:17px;color:var(--navy)}
.aia-summary{color:var(--navy);line-height:1.5}
.aia-fieldrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid #f1f4f8}
/* In-app agentic assistant (Jun 14 2026) */
.agent-summary{font-size:13px;color:var(--navy);margin-bottom:6px;font-weight:600}
.agent-step{display:block;padding:6px 0;font-size:13px;border-bottom:1px solid #f1f4f8}
.agent-step input{margin-right:6px}
.agent-step-body{margin:4px 0 0 22px;font-size:12.5px;color:var(--muted);white-space:pre-wrap}
.agent-err{color:#b91c1c;font-size:12.5px;margin-top:6px}
.agent-done ul{margin:4px 0 0 18px;font-size:13px}
.agent-donemsg{font-weight:600;color:#16a34a;font-size:13px}
/* Copilot v4 (Jun 15 2026): pinned admin-nav entry + admin-home "Ask AI" hero */
.snav--copilot{color:#cfe0ff}
.snav--copilot .ic{color:var(--blue)}
.ah-hero{background:linear-gradient(135deg,var(--navy),var(--blue-deep));color:#fff;
border-radius:14px;padding:20px 22px;margin:0 0 22px}
.ah-hero-h{display:flex;align-items:center;gap:9px;font-family:'Barlow',sans-serif;
font-weight:800;font-size:19px}
.ah-hero-h .ic{width:22px;height:22px;color:#fff}
.ah-hero-sub{margin:7px 0 14px;font-size:13px;line-height:1.5;
color:rgba(255,255,255,.85);max-width:760px}
.ah-hero-row{display:flex;gap:10px;flex-wrap:wrap}
.ah-hero-input{flex:1 1 360px;min-width:0;padding:11px 14px;border:0;border-radius:9px;
font-size:14px;color:var(--ink)}
.ah-hero .btn-primary{white-space:nowrap}
@media (max-width:640px){.ah-hero-input{flex:1 1 100%}}
/* Copilot page hero (carries the admin-home "Set up your CRM with AI" theme) */
.cp-hero{background:linear-gradient(135deg,var(--navy),var(--blue-deep));color:#fff;
border-radius:14px;padding:20px 22px;margin:0 0 16px}
.cp-hero-h{display:flex;align-items:center;gap:9px;font-family:'Barlow',sans-serif;
font-weight:800;font-size:19px}
.cp-hero-h .ic{width:22px;height:22px;color:#fff}
.cp-hero-sub{margin:7px 0 14px;font-size:12.5px;line-height:1.5;
color:rgba(255,255,255,.85);max-width:820px}
.cp-hero-input{width:100%;box-sizing:border-box;padding:11px 14px;border:0;border-radius:9px;
font-size:14px;color:var(--ink);font-family:inherit;resize:vertical}
.cp-hero-actions{margin-top:10px;display:flex;gap:10px;align-items:center}
.cp-hero-status{font-size:12px;color:rgba(255,255,255,.9)}
.btn-light{background:#fff;color:var(--navy);border:0}
.btn-light:hover{background:#eef4ff;color:var(--navy)}
.cp-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
/* v6: Copilot running inline inside the ⌘K modal */
.gs-cp{padding:12px 18px}
.gs-cp-h{font-family:'Barlow',sans-serif;font-weight:800;font-size:13px;color:var(--navy);margin-bottom:4px}
.gs-cp-sub{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.gs-cp-opt{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:13px;color:var(--ink)}
.gs-cp-opt input{margin-top:3px}
.gs-cp-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.gs-cp-note{font-size:11.5px;color:var(--muted);margin:6px 0 0}
.gs-cp-list{margin:4px 0 0 18px;font-size:13px;color:var(--ink)}
/* v7: guided setup — starter button on the hero + recommended-next rows */
.cp-hero-ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;
border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.cp-hero-ghost:hover{background:rgba(255,255,255,.14)}
.cp-sugg{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 0;border-top:1px solid var(--line)}
.cp-sugg:first-child{border-top:0}
.cp-sugg-t{font-size:13px;color:var(--ink)}
/* ===== Accounts Overview: full-width landing, drill-through tiles (Jun 2026) ===== */
.acct-new{margin-left:auto} /* push "+ New account" to the far right */
.acct-ov{max-width:1180px}
.ov-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 10px;
background:#eef4ff;border:1px solid rgba(59,130,246,.30);border-radius:999px;
font-size:13px;color:var(--navy)}
.ov-chip-l{font-weight:600;color:var(--blue)}
.ov-chip-x{margin-left:2px;width:18px;height:18px;display:inline-flex;align-items:center;
justify-content:center;border-radius:50%;background:#fff;color:#64748b;font-size:14px;line-height:1}
.ov-chip-x:hover{background:var(--blue);color:#fff;text-decoration:none}
/* clickable bars + donut legend + spark panel */
.barrow--link{text-decoration:none;color:inherit;border-radius:8px;padding:2px 4px;margin:0 -4px;transition:background .12s}
.barrow--link:hover{background:#f3f7ff;text-decoration:none}
.leg--link{text-decoration:none;color:inherit;border-radius:6px;padding:1px 4px;margin:0 -4px}
.leg--link:hover{background:#f3f7ff;text-decoration:none}
.panel-card--link{display:block;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.panel-card--link:hover{border-color:rgba(59,130,246,.45);box-shadow:0 1px 6px rgba(16,32,56,.08);text-decoration:none}
.kpi[href]{cursor:pointer}
/* ===== Per-record Snapshot box (Jun 2026) ===== */
.rbox--snap{padding:14px 16px}
.snap-chips{display:flex;flex-wrap:wrap;gap:18px 22px}
.snap-chip{display:flex;flex-direction:column;gap:1px;min-width:80px}
.snap-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;font-weight:600}
.snap-v{font-size:17px;font-weight:700;color:var(--navy)}
.snap-rows{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.snap-row{display:flex;gap:10px;align-items:baseline;font-size:13px}
.snap-rl{flex:0 0 72px;color:#6b7280;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.snap-rv{color:var(--navy);min-width:0}
.snap-when{color:#9ca3af;font-size:12px;margin-left:4px}
.kpi-val--danger{color:#b91c1c}
/* ===== Row kebab "up" flip + reassign select + calendar drag (Jun 2026) ===== */
.rowmenu-pop--up{top:auto;bottom:calc(100% + 4px)}
.rowmenu-select{width:100%;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;color:#33445c;background:#fff}
.cal-chip--act[draggable]{cursor:grab}
.cal-chip--dragging{opacity:.45}
.cal-cell--drop{outline:2px dashed var(--blue);outline-offset:-2px;background:#eef4ff}
/* Calendar Day / Week spans (Jun 18 2026) */
.cal-spans{margin-left:4px}
.cal-grid--week{grid-template-columns:repeat(7,1fr)}
.cal-grid--day{grid-template-columns:1fr}
.cal-cell--tall{min-height:320px;max-height:none;overflow:visible}
.cal-grid--day .cal-cell--tall{min-height:60vh}
.cal-dow--today{color:var(--blue-deep)}
.cal-chip-t{font-weight:700;opacity:.75;margin-right:1px}
.cal-empty{color:var(--muted);font-size:12px;padding:6px 2px}
@media (max-width:820px){
.cal-grid--week,.cal-grid-head.cal-grid--week{grid-template-columns:1fr}
.cal-cell--tall{min-height:auto}
}
/* ===== Activities filter row (Type / Owner) — consistent with section toolbars ===== */
.act-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.act-flabel{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;font-weight:600}
.act-fsep{width:1px;height:16px;background:var(--line);margin:0 4px}
/* ===== Email template merge-field picker ===== */
.mf-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.mf-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;font-weight:600}
.mf-select{padding:6px 8px;border:1px solid #ccd4df;border-radius:8px;font:inherit;font-size:13px;max-width:340px;background:#fff}
/* ===== Free-trial countdown chip (top blue bar, centered) ===== */
.trial-chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
background:rgba(255,255,255,.12);color:#eaf2ff;border:1px solid rgba(255,255,255,.22);
border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;letter-spacing:.01em;z-index:1}
.trial-chip a{color:#fff;text-decoration:underline}
.trial-chip--over{background:rgba(225,29,42,.18);border-color:rgba(225,29,42,.5);color:#ffd7d7}
@media (max-width:900px){.trial-chip{display:none}}