/* ===================================================================== PURSUIT — APP CHROME (React build) Sidebar (240px ⇄ 56px), global header (66px), body layout, floating filter widget, field list, preset preview, helper tip, nav flyout. Tokens: canonical DS sheet (colors_and_type.css) + bridge.css aliases. ===================================================================== */ .app-frame { display: flex; width: 100vw; height: 100vh; overflow: hidden; background: var(--background); } /* ======================================================================== SIDEBAR — canonical DS component (preview/component-nav.html) 240px dark indigo; collapses to a 44px icon rail by CROPPING: the frame width animates while .sidebar-inner keeps its 240px layout; labels / chevrons / children are hidden only after the collapse transition ends (.labels-hidden, set from a transitionend listener) and restored at the very start of expanding. Logotype ⇄ logomark swap in the logo row. ======================================================================== */ .sidebar { width: 240px; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; background: var(--sidebar-bg); /* Structural right edge drawn INSIDE the box so the active row's 3px stripe can overlay it at the sidebar's edge. */ box-shadow: inset -3px 0 0 var(--sidebar-border); transition: width 200ms ease; } /* ---- Collapsed icon rail (56px) — faithful to css/base.css ----------- */ .sidebar.collapsed { width: 56px; overflow: hidden; } .sidebar.collapsed .sidebar-logo { justify-content: center; padding: 14px 0 12px; } .sidebar.collapsed .sidebar-logo-text, .sidebar.collapsed .sidebar-collapse-btn, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-chevron, .sidebar.collapsed .nav-count, .sidebar.collapsed .nav-children, .sidebar.collapsed .role-switch, .sidebar.collapsed .sidebar-user-info { display: none; } .sidebar.collapsed .nav-item { justify-content: center; padding: 12px 0; } .sidebar.collapsed .nav-item-left { gap: 0; flex: 0 0 auto; } .sidebar.collapsed .sidebar-user { justify-content: center; padding: 12px 0; } /* ---- Logo row --------------------------------------------------------- */ .sidebar-logo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 12px; flex-shrink: 0; } .sidebar-logo-area { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 0; cursor: pointer; min-width: 0; } .sidebar-logo-area img { display: block; flex-shrink: 0; } .sidebar-logo-text { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #fff; white-space: nowrap; } .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 0; background: transparent; cursor: pointer; border-radius: 6px; color: rgba(255,255,255,0.45); transition: background 0.12s, color 0.12s; } .sidebar-collapse-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); } /* ---- Collapsed hover flyout (portal to ) ------------------------- */ .nav-flyout { position: fixed; z-index: 200; display: none; min-width: 184px; max-width: 260px; background: var(--sidebar-bg); border-radius: 0 10px 10px 10px; /* top-left squared — aligns with the item */ box-shadow: 0 10px 28px rgba(11,14,46,0.55); padding: 6px; } .nav-flyout.footer { border-radius: 10px 10px 10px 0; } .nav-flyout.show { display: block; } .nav-flyout-title { font: 600 13px/1 var(--font-body); color: #fff; padding: 9px 10px; white-space: nowrap; } .nav-flyout-title-btn { display: block; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; border-radius: 6px; } .nav-flyout-title-btn:hover { background: rgba(255,255,255,0.08); } .nav-flyout-divider { height: 1px; background: var(--sidebar-border); margin: 2px 0 4px; } .nav-flyout .nav-child-item.active { border-radius: 6px; } .nav-flyout .nav-child-item.active::after { display: none; } .nav-flyout .nav-child-label { padding-top: 6px; } .nav-flyout .nav-workbook-children { padding-left: 14px; } /* Child menus keep their .nav-children wrapper inside the flyout — strip the rail indent so rows sit flush like the canonical flyout. */ .nav-flyout .nav-children { display: flex; flex-direction: column; padding: 0; margin: 0; border-left: 0; } /* ---- Sidebar navigation (DS .item / .nav-children spec) ---------------- */ .sidebar-nav { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 4px 0; } .sidebar-nav-section { display: flex; flex-direction: column; } .sidebar-nav-section + .sidebar-nav-section { border-top: 1px solid var(--sidebar-border); margin-top: 6px; padding-top: 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 12px; color: rgba(255,255,255,0.86); font: 500 14px/1 var(--font-body); cursor: pointer; text-decoration: none; position: relative; transition: background 0.12s, color 0.12s; border: 0; background: transparent; width: 100%; text-align: left; } .nav-item:hover { background: rgba(255,255,255,0.04); color: #fff; } .nav-item.active, .nav-item.active:hover { background: var(--sidebar-active-bg); color: #fff; } .nav-item.active::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--ps-primary-500); } .nav-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .nav-icon { width: 20px; height: 20px; color: var(--sidebar-accent-primary); flex-shrink: 0; } .nav-item.secondary .nav-icon { color: var(--sidebar-accent-secondary); } .nav-item.tertiary .nav-icon { color: var(--sidebar-accent-tertiary); } .nav-count { margin-left: auto; font: 500 10px/1 var(--font-mono); color: rgba(255,255,255,0.5); } .nav-item .nav-label { font: 500 14px/1 var(--font-body); color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; text-align: left; } .nav-item .nav-chevron { margin-left: auto; width: 14px; height: 14px; color: rgba(255,255,255,0.5); flex-shrink: 0; transition: transform 0.18s ease; } .nav-item[aria-expanded="true"] .nav-chevron { transform: rotate(90deg); } .nav-children { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 34px; } .nav-children[hidden] { display: none; } .nav-child-link { background: transparent; border: 0; text-align: left; font-family: inherit; width: 100%; } .nav-child-item, .nav-child { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font: 400 13px/1 var(--font-body); color: rgba(255,255,255,0.7); white-space: nowrap; position: relative; text-decoration: none; } .nav-child-item:hover, .nav-child:hover { background: rgba(255,255,255,0.05); color: #fff; } .nav-child-item.active, .nav-child.active { background: var(--sidebar-active-bg); color: #fff; font-weight: 500; border-radius: 6px 0 0 6px; } .nav-child-item.active::after, .nav-child.active::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--ps-primary-500); } .nav-child-item.muted, .nav-child .child-label.muted { color: rgba(255,255,255,0.55); font-style: italic; } .nav-child-item i, .nav-child-item svg, .nav-child-item .luc, .child-icon { width: 14px; height: 14px; color: rgba(255,255,255,0.45); flex-shrink: 0; } .nav-child-item.active i, .nav-child-item.active svg, .nav-child-item.active .luc { color: #fff; } .nav-workbook { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font: 500 13px/1 var(--font-body); color: rgba(255,255,255,0.78); white-space: nowrap; border-radius: 6px; } .nav-workbook[role="button"] { cursor: pointer; } .nav-workbook[role="button"]:hover { background: rgba(255,255,255,0.05); color: #fff; } .wb-folder { width: 15px; height: 15px; flex-shrink: 0; color: var(--sidebar-accent-primary); } .nav-workbook-children { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; } .nav-workbook-children[hidden] { display: none; } .nav-child-label, .nav-section-header { font: 600 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 8px 10px 4px; } .nav-children .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 4px 0; flex-shrink: 0; } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; transition: background 0.15s; } .sidebar-user:hover { background: var(--ps-primary-800); } .sidebar-avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--ps-secondary-300); color: var(--ps-tertiary-50); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: 600 11px/1 var(--font-body); } .sidebar.collapsed .sidebar-user { padding: 12px 0; justify-content: center; } .sidebar-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .sidebar-user-name { font: 500 13px/1.2 var(--font-body); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-email { font: 400 11px/1.3 var(--font-body); color: rgba(255,255,255,0.55); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ======================================================================== MAIN CONTENT ======================================================================== */ .main-content { flex: 1; display: flex; flex-direction: column; background: var(--background); overflow: hidden; min-width: 0; position: relative; } .global-search-slot { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .global-search-slot > .search-bar-wrap { flex: 1 1 auto; min-width: 0; margin: 0; } .global-header { display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 12px 32px; gap: 32px; background: var(--background); border-bottom: 1px solid var(--divider); flex-shrink: 0; } /* Persistent "Set My Territory" prompt — toast-style card. */ .territory-banner { position: absolute; left: 24px; right: 88px; bottom: 24px; margin: 0 auto; width: auto; max-width: 720px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; background: var(--ps-primary-60); border: 1px solid var(--ps-primary-100); border-radius: 12px; box-shadow: 0 12px 28px -8px rgba(15,19,51,0.28), 0 2px 8px -2px rgba(15,19,51,0.12); color: var(--ps-primary-700); font: 400 13.5px/1.45 var(--font-body); animation: territory-banner-in 0.28s cubic-bezier(0.16,1,0.3,1) both; } @keyframes territory-banner-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .territory-banner .tb-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: #fff; color: var(--ps-primary-500); border: 1px solid var(--ps-primary-100); } .territory-banner .tb-text { min-width: 0; } .territory-banner .tb-text strong { font-weight: 600; color: var(--ps-primary-800); } .territory-banner .tb-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-body); color: #fff; background: var(--ps-primary-500); border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: filter 0.14s; } .territory-banner .tb-cta:hover { filter: brightness(0.95); } .territory-banner .tb-dismiss { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; background: transparent; border: 0; color: var(--ps-primary-700); transition: background 0.14s; } .territory-banner .tb-dismiss:hover { background: var(--ps-primary-75); } .breadcrumbs { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .breadcrumb-sep { color: var(--muted-foreground); } .breadcrumb-item { font-size: 14px; font-weight: 400; color: var(--muted-foreground); } .breadcrumb-item.current { font-weight: 600; color: var(--foreground); } .breadcrumb-link { background: transparent; border: 0; padding: 2px 4px; margin: 0 -4px; border-radius: 4px; font-size: 14px; font-weight: 400; color: var(--muted-foreground); cursor: pointer; font-family: inherit; } .breadcrumb-link:hover { background: var(--ps-neutral-100); color: var(--foreground); } .header-actions { display: flex; align-items: center; gap: 8px; } /* ======================================================================== BODY — floating filter widget + content panel ======================================================================== */ .body { flex: 1; display: flex; gap: 24px; padding: 24px 0 0 32px; overflow: hidden; } .floating-widget-spacer { flex-shrink: 0; width: 264px; height: calc(100% - 24px); } .floating-widget { background: var(--card); border-radius: 16px; border: 1.5px solid #fff; border-top-width: 2px; box-shadow: 0 1px 2px rgba(20,20,23,0.04), 0 6px 18px rgba(20,20,23,0.04); overflow: hidden; height: 100%; display: flex; flex-direction: column; } .fw-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; flex-shrink: 0; } .fw-toolbar-title { font-size: 14px; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 8px; white-space: nowrap; } .fw-toolbar-action { font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; background: transparent; border: 0; white-space: nowrap; flex-shrink: 0; } .fw-toolbar-action:hover { color: var(--ps-primary-700); } .fw-toolbar-action[disabled] { color: var(--muted-foreground); cursor: default; opacity: 0.55; } .fw-items { display: flex; flex-direction: column; padding: 0 8px 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Field-list section header (in left widget) */ .fl-section { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); padding: 12px 10px 4px; } .fl-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--foreground); background: transparent; border: 0; cursor: pointer; width: 100%; text-align: left; transition: background 120ms; } .fl-item:hover { background: var(--muted); } .fl-item .fl-glyph { width: 22px; height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--divider); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); flex-shrink: 0; } .fl-item .fl-glyph i, .fl-item .fl-glyph .luc { width: 13px; height: 13px; } .fl-item .fl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-item .fl-count { font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--primary); color: #fff; padding: 1px 6px; border-radius: 999px; min-width: 18px; text-align: center; } .fl-item .fl-save { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 11px; font-weight: 500; color: var(--primary); background: var(--ps-primary-60); border: 1px solid var(--ps-primary-75); border-radius: 999px; cursor: pointer; transition: background 120ms; } .fl-item .fl-save:hover { background: var(--ps-primary-75); } .fl-item .fl-save i, .fl-item .fl-save .luc { color: var(--primary); } /* Preset preview — hover popover for Target / Persona atomic filters. */ .preset-preview { position: fixed; background: var(--card); border: 1px solid var(--divider); border-radius: 10px; box-shadow: 0 10px 28px rgba(15,19,51,0.16), 0 2px 6px rgba(15,19,51,0.05); padding: 10px 12px; z-index: 80; max-width: 360px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; animation: pop-in 120ms cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .pp-group { display: flex; flex-direction: column; gap: 5px; } .pp-group + .pp-group { padding-top: 8px; border-top: 1px dashed var(--divider); } .pp-name { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .pp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--popover); border: 1px solid var(--divider); padding: 3px 7px; border-radius: 5px; font-size: 11px; align-self: flex-start; } .pp-field { font-weight: 500; color: var(--foreground); } .pp-op { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 10px; } .pp-val { color: var(--foreground); } .pp-empty { font-size: 11px; color: var(--muted-foreground); font-style: italic; } .fl-item.active { background: var(--accent); color: var(--accent-foreground); } .fl-item.active .fl-glyph { background: #fff; border-color: var(--ps-primary-75); color: var(--primary); } .fl-item.open { box-shadow: inset 0 0 0 1.5px var(--primary); } .fl-item.related .fl-name { color: var(--muted-foreground); font-style: italic; } /* Helper-tip popover — fast tooltip for "disabled because…" hints. */ #helper-tip { position: fixed; z-index: 9999; max-width: 240px; padding: 6px 10px; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--background); background: var(--foreground); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity 90ms ease, transform 90ms ease; } #helper-tip[data-visible="true"] { opacity: 1; transform: translateY(0); } #helper-tip[hidden] { display: none; } .fl-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: auto; } .fl-item.disabled:hover { background: transparent; } .fl-item.disabled .fl-name { color: var(--muted-foreground); }