/* Top bar (56px, white, hairline shadow): page title, search, icon buttons, user chip.
   Also the user menu popover, global search panel, the info banner and the SANDBOX band (.sbx-band). Colours via tokens.css. */

/* ---- Bar ---- */
.topbar {
  position: relative; grid-column: 2; grid-row: 2;
  background: var(--bg-surface); box-shadow: var(--shadow-topbar);
  display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-6); z-index: 2; min-width: 0;
}
.topbar-title {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 160px; flex: 1 1 0;
  font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden;
}
.topbar-title-text { overflow: hidden; text-overflow: ellipsis; }
/* Crumbs pages: #page-title keeps only the section ('Leads', grey); #page-crumbs (made by topbar.js right
   after it) carries ' / Leads Inbox' and the (i) icon, so the pair reads as one line. */
.topbar-title.has-crumbs { flex: 0 1 auto; min-width: 0; }
.topbar-crumbs {
  display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 0; min-width: 0;
  margin-left: calc(var(--sp-3) - var(--sp-5));
  font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden;
}
.topbar-crumbs[hidden] { display: none; }
.topbar-crumb { color: var(--text-2); font-weight: var(--fw-regular); }
.topbar-crumb-sep { color: var(--text-muted); font-weight: var(--fw-regular); }
.topbar-info { width: 16px; height: 16px; color: var(--text-2); cursor: help; }
.topbar-info svg { width: 16px; height: 16px; }

/* Search pill: 240 x 40, 20px icon 12px from the left, 2px blue border on focus. */
.topbar-search { position: relative; flex: 0 0 240px; }
.topbar-search input {
  width: 100%; height: var(--control-h-lg); border-radius: var(--r-pill);
  border: 1px solid var(--border); padding: 0 36px 0 40px; background: var(--bg-surface); outline: none;
  color: var(--text); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.topbar-search input::placeholder { color: var(--placeholder); }
.topbar-search input:hover { border-color: var(--border-strong); }
.topbar-search input:focus { border-color: var(--border-focus); box-shadow: inset 0 0 0 1px var(--border-focus); }
.topbar-search-ic { position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; color: var(--text); pointer-events: none; }
.search-clear {
  position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.search-clear:hover { background: var(--bg-hover); }

.topbar-actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); min-width: 0; }

/* Right icon buttons: borderless 40px circles with a grey hover; only + keeps a border. */
.icon-btn {
  width: var(--control-h-lg); height: var(--control-h-lg); border-radius: var(--r-pill); flex: none;
  border: 1px solid transparent; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.icon-btn.is-outlined { border-color: var(--border); }
.icon-btn svg { width: 20px; height: 20px; }
#quick-add svg { width: 18px; height: 18px; }

/* User chip: avatar + name / company, opens the user menu. */
.user-chip {
  display: flex; align-items: center; gap: var(--sp-4); height: var(--control-h-lg); max-width: 220px;
  margin-left: var(--sp-2); padding: 0 var(--sp-4) 0 var(--sp-2); border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer; text-align: left; transition: background var(--t-fast) var(--ease);
}
.user-chip:hover, .user-chip.is-open { background: var(--bg-hover); }
.user-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.user-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-sm); }
.user-chip-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-company { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--label-blue); color: var(--text-inverse); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
@media (max-width: 1100px) { .user-chip-text { display: none; } .user-chip { padding-right: var(--sp-2); } }

/* ---- User menu (~275px): full-width 44px rows, 24px icons, shared blue hover ---- */
.popover.user-menu-pop { width: 275px; }
.user-menu { padding: var(--sp-6) 0 var(--sp-4); }
.user-menu .menu-group { display: flex; flex-direction: column; }
.user-menu .menu-group + .menu-group { border-top: 1px solid var(--border); margin-top: var(--sp-4); padding-top: var(--sp-4); }
.menu-caption {
  padding: var(--sp-6) var(--sp-7) var(--sp-3); font-size: var(--fs-md); line-height: var(--lh-md);
  font-weight: var(--fw-semibold); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.2px;
}
.user-menu .menu-group:first-child .menu-caption { padding-top: 0; }
.user-menu .menu-item { min-height: var(--menu-user-row-h); padding: 0 var(--sp-7); gap: 14px; font-size: 15px; }
.menu-ic, .menu-ic svg, .user-menu .menu-item .menu-ic svg { width: 24px; height: 24px; color: var(--text); }
.user-menu .menu-item:hover .menu-ic svg, .user-menu .menu-item:focus-visible .menu-ic svg { color: var(--menu-hover-text); }

/* ---- Info banner: blue, centred text, x at the right, collapses in 200ms ---- */
.shell-banner { grid-column: 2; grid-row: 1; min-width: 0; }
.banner {
  position: relative; overflow: hidden; background: var(--banner-bg); border-bottom: 1px solid var(--banner-border);
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--sp-4) 56px;
  transition: height 200ms var(--ease), opacity 200ms var(--ease), padding 200ms var(--ease);
}
.banner.is-closing { height: 0 !important; min-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
.banner-inner { display: flex; align-items: center; gap: var(--sp-4); text-align: center; color: var(--text); }
.banner-ic, .banner-ic svg { width: 16px; height: 16px; color: var(--blue); }
.banner-x {
  position: absolute; right: var(--sp-5); top: 50%; transform: translateY(-50%);
  width: var(--control-h); height: var(--control-h); border: 0; border-radius: var(--r-md); background: none;
  color: var(--text-2); display: grid; place-items: center; cursor: pointer;
}
.banner-x:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }

/* ---- Global search ---- */
.search-dim {
  position: fixed; inset: 0; z-index: var(--z-search-dim); background: var(--backdrop); opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.search-dim.is-open { opacity: 1; }
/* The top bar sits above the dim while searching, with its own dim layer under the search pill. */
.search-open .topbar { z-index: calc(var(--z-search-dim) + 1); }
.search-open .topbar::before { content: ""; position: absolute; inset: 0; background: var(--backdrop); }
.search-open .topbar-search { z-index: 1; }

.popover.search-pop {
  width: 240px; max-height: calc(100vh - var(--topbar-h) - var(--sp-6)); overflow: hidden;
  display: flex; flex-direction: column;
}
.popover.search-pop.is-wide { width: min(760px, calc(100vw - var(--sp-6))); }
.search-recent { display: flex; flex-direction: column; min-height: 0; padding: var(--sp-6) 0 var(--sp-4); }
.search-recent .skeleton { padding: var(--sp-4) var(--sp-7); }
.search-heading { padding: 0 var(--sp-7) var(--sp-3); font-size: var(--fs-md); color: var(--text); }
.search-list { overflow: auto; min-height: 0; overscroll-behavior: contain; }

.search-wide { flex: 1; display: flex; min-height: 0; }
.search-results > .search-list { flex: 1; }
.search-cats {
  flex: 0 0 200px; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4);
  border-right: 1px solid var(--border);
}
.search-cat {
  display: flex; align-items: center; gap: var(--sp-5); height: 40px; padding: 0 var(--sp-4);
  border: 0; border-radius: var(--r-md); background: none; color: var(--text); cursor: pointer; text-align: left;
  font-size: 15px; transition: background var(--t-fast) var(--ease);
}
.search-cat:hover { background: var(--bg-hover); }
.search-cat.is-active { background: var(--bg-selected); color: var(--blue); font-weight: var(--fw-semibold); }
.search-cat-ic, .search-cat-ic svg { width: 20px; height: 20px; }
.search-cat-label { flex: 1; min-width: 0; }
.search-cat-count { font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-regular); }
.search-results { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--sp-6) 0 var(--sp-4); overflow: hidden; }
.search-results > .skeleton { padding: var(--sp-4) var(--sp-7); }

.search-item {
  display: flex; align-items: flex-start; gap: var(--sp-6); padding: var(--sp-4) var(--sp-7);
  color: var(--text); text-decoration: none; cursor: pointer;
}
.search-item:hover { text-decoration: none; }
.search-item.is-highlighted { background: var(--bg-hover); }
.search-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.search-title { font-weight: var(--fw-semibold); line-height: var(--lh-md); overflow-wrap: anywhere; }
.search-sub, .search-snippet { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); overflow-wrap: anywhere; }
.search-snippet { color: var(--text); }
.search-dot { margin: 0 var(--sp-3); }
.search-item mark { background: var(--mark-bg); color: inherit; border-radius: 2px; padding: 0 1px; }

.search-tile {
  width: 24px; height: 24px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text);
}
.search-tile svg { width: 20px; height: 20px; }
.search-tile.is-person {
  border-radius: 50%; background: var(--tile-blue-bg); color: var(--tile-blue);
  font-size: 10px; font-weight: var(--fw-semibold);
}
.search-tile.is-organization { background: var(--tile-blue-bg); color: var(--tile-blue); }
.search-tile.is-organization svg { width: 16px; height: 16px; }
.search-pill {
  flex: none; padding: 0 var(--sp-3); height: 20px; line-height: 20px; border-radius: var(--r-pill);
  color: var(--text-inverse); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase;
}
.search-pill.is-won { background: var(--pill-won); }
.search-pill.is-lost { background: var(--pill-lost); }
.search-done, .search-done svg { width: 20px; height: 20px; color: var(--green); }
.search-sep { height: 1px; background: var(--border); margin: var(--sp-3) var(--sp-7); }
.search-empty { padding: var(--sp-4) var(--sp-7); color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .banner, .search-dim, .popover.search-pop { transition: none; }
}

/* Bell count badge (B-011): red pill on the bell's top right. */
#bell { position: relative; }
#bell.is-open { background: var(--bg-hover); }
.bell-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 var(--sp-2);
  border: 2px solid var(--bg-surface); border-radius: var(--r-pill); box-sizing: border-box;
  background: var(--notif-badge-bg); color: var(--text-inverse);
  font-size: 10px; line-height: 14px; font-weight: var(--fw-semibold); text-align: center; pointer-events: none;
}
.bell-count[hidden] { display: none; }

/* Quick add (+) menu (B-010, UX-041): ~230px, 12px radius, 8px below the button, 44px rows with a 24px outline icon
   (16px to the 15px label) and a filled grey 20x20 key chip on the right; + turns into x while open. */
#quick-add.is-open { background: var(--bg-hover); }
.quick-add-pop { width: 230px; padding: var(--sp-4) 0; border-radius: var(--r-lg); }
.quick-add-list { display: flex; flex-direction: column; }
.quick-add-list .menu-item { min-height: var(--menu-user-row-h); gap: var(--sp-6); font-size: 15px; }
.quick-add-list .menu-item-ic, .quick-add-list .menu-item-ic svg { width: 24px; height: 24px; flex: none; color: var(--text-2); }
.quick-add-list .menu-label { flex: 1; min-width: 0; }
.quick-add-key {
  flex: none; box-sizing: border-box; min-width: 20px; height: 20px; margin-left: auto; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-sm); background: var(--chip-bg); color: var(--text-2);
  font: 500 var(--fs-sm)/20px var(--font); text-align: center;
}
.quick-add-list .menu-item:hover .quick-add-key, .quick-add-list .menu-item:focus-visible .quick-add-key {
  background: rgba(255, 255, 255, 0.2); color: var(--menu-hover-text);
}
.quick-add-list .menu-item:hover .menu-item-ic svg, .quick-add-list .menu-item:focus-visible .menu-item-ic svg {
  color: var(--menu-hover-text);
}
.quick-add-list .menu-item[aria-disabled="true"] .quick-add-key { color: var(--text-muted); background: var(--chip-bg); }
.quick-add-list .menu-item[aria-disabled="true"] svg { color: var(--text-muted); }

/* ---- SANDBOX band (sandbox brief 2026-10-15): gold, 32px, centred, no close button ---- */
.sbx-band {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4); height: 32px; padding: 0 var(--sp-6);
  background: var(--gold); color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-regular);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); text-align: center; white-space: nowrap; overflow: hidden;
}
.sbx-band-tag { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.08em; }
.sbx-band-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sbx-band-auto { white-space: nowrap; font-size: var(--fs-sm); }
.sbx-band-auto a { color: inherit; text-decoration: underline; }