/* ============================================================================
 * search-plus.css - "Search+" unified-search UI. Everything scoped to #searchPlusView.
 * 1:1 port of the web app (SemyouPCP Content/css/search-plus.css).
 * Uses the global theme tokens from tokens.css (surface / text / accent / --c-* ...).
 * Selected rows use the app token --color-selected-bg (neutral, NOT accent blue).
 * The result table is a standard Kendo grid (.noBorderGrid) - see the grid block.
 * ========================================================================== */

/* ===== shared object-type chip (objectTypes.js) - light-transparent tint =====
   (ported from the web app Site.css; size/layout stays with each caller's class) */
.obj-chip {
    color: var(--col);
    background: color-mix(in srgb, var(--col) 14%, var(--surface));
}
.obj-chip svg {
    fill: none;
    stroke: var(--col);
    stroke-linecap: round;
    stroke-linejoin: round;
}

#searchPlusView {
    display: block; height: 100%; position: relative; background: var(--surface);
    /* explicit theme text colour - body inherits a hardcoded dark colour from site.css,
       which is unreadable on the dark surface (facet rail, cards) in dark mode */
    color: var(--text);
    /* app's corporate primary-button colour (near-black light / blue dark) - matches every other app button */
    --sp-primary: var(--color-btn-primary);
    --sp-primary-hover: color-mix(in srgb, var(--color-btn-primary) 85%, #fff);
}
#searchPlusView .sp-shell { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; }

#searchPlusView .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
#searchPlusView .sp-mono { font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; color: var(--text-subtle); }
#searchPlusView button { font-family: inherit; cursor: pointer; color: inherit; }

/* view toggle */
#searchPlusView .sp-view { display: none; }
#searchPlusView .sp-view.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---------- type colors ---------- */
/* canonical ObjectTypes palette: project=blue, keypoint=indigo, item=orange,
   appt=purple, checkpoint=cyan, workItem=green, lesson=amber, risk=red */
#searchPlusView .sp-t-project { background: var(--c-blue); }
#searchPlusView .sp-t-keypoint { background: var(--c-indigo); }
#searchPlusView .sp-t-item { background: var(--c-orange); }
#searchPlusView .sp-t-risk { background: var(--c-red); }
#searchPlusView .sp-t-lesson { background: var(--c-amber); }
#searchPlusView .sp-t-appt { background: var(--c-purple); }
#searchPlusView .sp-t-check { background: var(--c-cyan); }
#searchPlusView .sp-t-workitem { background: var(--c-green); }
#searchPlusView .sp-tg-project { color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 14%, var(--surface)); }
#searchPlusView .sp-tg-keypoint { color: var(--c-indigo); background: color-mix(in srgb, var(--c-indigo) 14%, var(--surface)); }
#searchPlusView .sp-tg-item { color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 14%, var(--surface)); }
#searchPlusView .sp-tg-risk { color: var(--c-red); background: color-mix(in srgb, var(--c-red) 14%, var(--surface)); }
#searchPlusView .sp-tg-lesson { color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 14%, var(--surface)); }
#searchPlusView .sp-tg-appt { color: var(--c-purple); background: color-mix(in srgb, var(--c-purple) 14%, var(--surface)); }
#searchPlusView .sp-tg-check { color: var(--c-cyan); background: color-mix(in srgb, var(--c-cyan) 14%, var(--surface)); }
#searchPlusView .sp-tg-workitem { color: var(--c-green); background: color-mix(in srgb, var(--c-green) 14%, var(--surface)); }

/* ---------- shared chips ---------- */
#searchPlusView .sp-ptile { width: 30px; height: 22px; border-radius: 6px; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* object-type icon chip - shared ObjectTypes symbols + light-transparent tint */
#searchPlusView .sp-oic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--col); background: color-mix(in srgb, var(--col) 14%, var(--surface)); }
#searchPlusView .sp-oic svg { width: 15px; height: 15px; fill: none; stroke: var(--col); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#searchPlusView .sp-dotc { width: 9px; height: 9px; border-radius: 3px; flex: none; }
/* type facet icon - canonical ObjectTypes symbol in the type colour */
#searchPlusView .sp-foic { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--col); }
#searchPlusView .sp-foic svg { width: 17px; height: 17px; fill: none; stroke: var(--col); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#searchPlusView .sp-pk { width: 18px; height: 14px; border-radius: 3px; color: #fff; font-size: 8.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#searchPlusView .sp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px 3px 8px; border-radius: var(--radius-full); }
#searchPlusView .sp-status .d { width: 7px; height: 7px; border-radius: 50%; }
#searchPlusView .sp-status.open { background: var(--blue-t); color: var(--blue-tx); } #searchPlusView .sp-status.open .d { background: var(--accent); }
#searchPlusView .sp-status.prog { background: var(--amber-t); color: var(--amber-tx); } #searchPlusView .sp-status.prog .d { background: var(--amber); }
#searchPlusView .sp-status.closed { background: var(--green-t); color: var(--green-tx); } #searchPlusView .sp-status.closed .d { background: var(--green); }
#searchPlusView .sp-rag { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
#searchPlusView .sp-rag.r { background: var(--red); } #searchPlusView .sp-rag.a { background: var(--amber); } #searchPlusView .sp-rag.g { background: var(--green); }
#searchPlusView .sp-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--c-teal); background: var(--c-teal-t); border-radius: var(--radius-full); padding: 2px 9px; }
#searchPlusView .sp-av { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#searchPlusView .sp-match { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-subtle); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px 8px; margin-right: 7px; white-space: nowrap; }
#searchPlusView .sp-match .ic { width: 12px; height: 12px; }
#searchPlusView em { font-style: normal; background: var(--amber-t); color: var(--amber-tx); border-radius: 3px; padding: 0 3px; font-weight: 650; }

/* ======================= HOME (Google-style) ======================= */
#searchPlusView .sp-home { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
#searchPlusView .sp-home-in { width: 100%; max-width: 720px; margin-top: min(12vh, 110px); display: flex; flex-direction: column; align-items: center; }
#searchPlusView .sp-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
#searchPlusView .sp-wm { display: flex; align-items: center; gap: 12px; }
#searchPlusView .sp-mk { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(140deg, #3b82f6, var(--accent)); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 22px -8px rgba(37,99,235,.55); }
#searchPlusView .sp-mk .ic { width: 25px; height: 25px; stroke-width: 2; }
#searchPlusView .sp-wt { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
#searchPlusView .sp-tl { font-size: 13.5px; color: var(--text-muted); display: flex; align-items: center; gap: 9px; }
#searchPlusView .sp-sparkbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-full); padding: 2px 9px; }
#searchPlusView .sp-sparkbadge .ic { width: 13px; height: 13px; color: var(--accent); }

#searchPlusView .sp-bigsearch { width: 100%; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 10px 0 20px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 32px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 30px -12px rgba(16,24,40,.18); }
#searchPlusView .sp-bigsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
#searchPlusView .sp-bigsearch .sp-lens { color: var(--text-subtle); flex: none; width: 22px; height: 22px; }
#searchPlusView .sp-bigsearch input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; font-size: 17px; color: var(--text); }
#searchPlusView .sp-bigsearch input::placeholder { color: var(--text-subtle); }
#searchPlusView .sp-clr { width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--text-subtle); display: none; align-items: center; justify-content: center; }
#searchPlusView .sp-clr:hover { background: var(--hover); }
#searchPlusView .sp-clr.show { display: inline-flex; }
#searchPlusView .sp-mic { width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--text-subtle); display: inline-flex; align-items: center; justify-content: center; }
#searchPlusView .sp-mic:hover { background: var(--hover); color: var(--text); }
#searchPlusView .sp-go { height: 44px; padding: 0 20px; border-radius: 24px; border: none; background: var(--sp-primary); color: #fff; font-size: 13.5px; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
#searchPlusView .sp-go:hover { background: var(--sp-primary-hover); }
#searchPlusView .sp-busy { opacity: .6; pointer-events: none; }

#searchPlusView .sp-optrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
#searchPlusView .sp-lead { font-size: 12px; color: var(--text-subtle); font-weight: 600; margin-right: 2px; }

/* ---------- dropdowns (real Kendo widgets) ---------- */
#searchPlusView .sp-optrow { align-items: center; }
/* fixed widths so the widgets sit side-by-side (Kendo default width:100% would stack them) */
#searchPlusView .sp-optrow .sp-mtypes.k-multiselect { width: 230px; }
#searchPlusView .sp-optrow .sp-mstatus.k-multiselect { width: 190px; }
#searchPlusView .sp-msort.k-picker { width: 170px; }
/* "No" (Num) - display number shown in card crumb + grid, tabular so it reads as an identifier */
#searchPlusView .sp-crumb-no { font-variant-numeric: tabular-nums; }
#searchPlusView .sp-rt-no { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
/* compact height: Kendo's chip-list makes MultiSelect taller than a normal input - pin to 34px + center the single chip */
#searchPlusView .sp-optrow .k-multiselect { height: 34px; min-height: 34px; }
#searchPlusView .sp-optrow .k-multiselect .k-input-values { height: 100%; align-items: center; flex-wrap: nowrap; padding-block: 0; }
#searchPlusView .sp-optrow .k-multiselect .k-chip { margin: 0; }
#searchPlusView .sp-optrow .k-multiselect .k-input-inner { padding-block: 0; }
#searchPlusView .sp-cb { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
#searchPlusView .sp-cb .ic { width: 12px; height: 12px; stroke-width: 2.4; opacity: 0; }

/* ======================= RESULTS ======================= */
#searchPlusView .sp-rtop { flex: 0 0 auto; padding: 14px 20px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
#searchPlusView .sp-rtop-row { display: flex; align-items: center; gap: 14px; }
#searchPlusView .sp-midsearch { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 8px 0 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-card); }
#searchPlusView .sp-midsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
#searchPlusView .sp-midsearch .sp-lens { color: var(--text-subtle); flex: none; }
#searchPlusView .sp-midsearch input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit; font-size: 14.5px; color: var(--text); }
#searchPlusView .sp-midsearch .sp-clr { width: 30px; height: 30px; display: inline-flex; }
#searchPlusView .sp-go2 { height: 32px; padding: 0 15px; border-radius: 18px; border: none; background: var(--sp-primary); color: #fff; font-size: 12.5px; font-weight: 650; }
#searchPlusView .sp-go2:hover { background: var(--sp-primary-hover); }
#searchPlusView .sp-rt-sp { flex: 1; }
#searchPlusView .sp-backhome { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); height: 36px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface); }
#searchPlusView .sp-backhome:hover { background: var(--hover); }
#searchPlusView .sp-rtop .sp-optrow { justify-content: flex-start; margin-top: 11px; }

/* layout: facets | results (object opens via deep-link, no preview pane) */
#searchPlusView .sp-rlayout { flex: 1; min-height: 0; display: grid; grid-template-columns: 216px 1fr; overflow: hidden; }
#searchPlusView .sp-facets { border-right: 1px solid var(--border); overflow: auto; padding: 16px 14px; }
#searchPlusView .sp-fg { margin-bottom: 20px; }
#searchPlusView .sp-fh { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); margin-bottom: 8px; padding-left: 4px; }
#searchPlusView .sp-frow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-btn); cursor: pointer; }
#searchPlusView .sp-frow:hover { background: var(--hover); }
#searchPlusView .sp-frow.on { background: var(--surface-2); }
#searchPlusView .sp-frow .sp-cb { width: 16px; height: 16px; }
#searchPlusView .sp-frow.on .sp-cb { background: var(--accent); border-color: var(--accent); }
#searchPlusView .sp-frow.on .sp-cb .ic { opacity: 1; }
#searchPlusView .sp-frow .sp-fl { flex: 1; font-size: 12.5px; font-weight: 400; }
#searchPlusView .sp-frow.on .sp-fl { font-weight: 500; }
#searchPlusView .sp-frow .sp-fc { font-size: 11px; font-weight: 600; color: var(--text-subtle); }

/* collapsible section headers (Type / Projects / Date / Matched-in) */
#searchPlusView .sp-fh-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
#searchPlusView .sp-fh-chev { flex: none; width: 14px; height: 14px; color: var(--text-subtle); display: inline-flex; align-items: center; justify-content: center; }
#searchPlusView .sp-chev-svg { width: 100%; height: 100%; fill: currentColor; transition: transform .12s ease; }
#searchPlusView .sp-fg.coll .sp-fh-chev .sp-chev-svg { transform: rotate(-90deg); }
#searchPlusView .sp-fh-badge { flex: none; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; }
#searchPlusView .sp-fh-lbl { flex: 1; }
#searchPlusView .sp-fh-x { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; color: var(--text-subtle); }
#searchPlusView .sp-fh-x:hover { background: var(--accent); color: #fff; }
#searchPlusView .sp-fg.coll { margin-bottom: 10px; }
#searchPlusView .sp-fg-body { margin-top: 2px; }

/* clear ALL filters - back to the base text-search result */
#searchPlusView .sp-clearall { margin: -2px 0 14px; }
#searchPlusView .sp-ca-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); }
#searchPlusView .sp-ca-btn:hover { text-decoration: underline; }
#searchPlusView .sp-ca-btn .ic { width: 13px; height: 13px; }

/* projects facet - scrollable, long names ellipsised */
#searchPlusView .sp-proj-list { max-height: 230px; overflow: auto; }
#searchPlusView .sp-proj-list .sp-frow { min-width: 0; }
#searchPlusView .sp-proj-list .sp-fl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* date facet - collapsible year > quarter tree */
#searchPlusView .sp-dt-kids { padding-left: 15px; }
#searchPlusView .sp-dt-row { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: var(--r-btn); cursor: pointer; }
#searchPlusView .sp-dt-row:hover { background: var(--hover); }
#searchPlusView .sp-dt-row.sel { background: var(--surface-2); }
#searchPlusView .sp-dt-caret { flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-subtle); }
#searchPlusView .sp-dt-caret .sp-chev-svg { width: 12px; height: 12px; }
#searchPlusView .sp-dt-caret:not(.is-open):not(.sp-dt-nocaret) .sp-chev-svg { transform: rotate(-90deg); }
#searchPlusView .sp-dt-caret:not(.sp-dt-nocaret):hover { color: var(--accent); }
#searchPlusView .sp-dt-lbl { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#searchPlusView .sp-dt-row.sel .sp-dt-lbl { font-weight: 600; color: var(--accent); }
#searchPlusView .sp-dt-cnt { font-size: 11px; font-weight: 600; color: var(--text-subtle); }
#searchPlusView .sp-dt-q .sp-dt-lbl { font-size: 12px; color: var(--text-muted); }
#searchPlusView .sp-dt-loading, #searchPlusView .sp-dt-empty { font-size: 12px; color: var(--text-subtle); padding: 4px 8px; }

#searchPlusView .sp-results { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#searchPlusView .sp-rmeta { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
#searchPlusView .sp-rc { font-size: 12.5px; color: var(--text-muted); }
#searchPlusView .sp-rc b { color: var(--text); font-weight: 700; }
#searchPlusView .sp-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-full); padding: 3px 10px; }
#searchPlusView .sp-mode .ic { width: 13px; height: 13px; }
#searchPlusView .sp-sp { flex: 1; }
#searchPlusView .sp-right { display: inline-flex; align-items: center; gap: 7px; }
#searchPlusView .sp-cv { color: var(--text-muted); font-weight: 550; font-size: 12.5px; }

/* view switch */
#searchPlusView .sp-vswitch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-btn); padding: 3px; }
#searchPlusView .sp-vswitch button { border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; }
#searchPlusView .sp-vswitch button .ic { width: 15px; height: 15px; color: var(--text-subtle); }
#searchPlusView .sp-vswitch button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
#searchPlusView .sp-vswitch button.on .ic { color: var(--accent); }

/* resmode containers (position:relative anchors the floating scroll-loader overlay) */
#searchPlusView .sp-resmode { display: none; flex: 1; min-height: 0; position: relative; }
#searchPlusView #spCards.on { display: block; overflow: auto; padding: 6px 12px 24px; }
#searchPlusView #spTableWrap.on { display: flex; flex-direction: column; overflow: hidden; padding: 0; }

/* cards */
#searchPlusView .sp-card { position: relative; display: flex; gap: 13px; padding: 14px 12px; border-radius: var(--r-card); cursor: pointer; border: 1px solid transparent; }

/* row "open in new tab" button (cards + grid) */
#searchPlusView .sp-open { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-subtle); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
#searchPlusView .sp-open .ic { width: 15px; height: 15px; }
#searchPlusView .sp-card:hover .sp-open, #searchPlusView .sp-card.sel .sp-open { opacity: 1; }
#searchPlusView .sp-open:hover, #searchPlusView .sp-gopen:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
#searchPlusView .sp-gopen { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-subtle); display: inline-flex; align-items: center; justify-content: center; }
#searchPlusView .sp-gopen .ic { width: 15px; height: 15px; }
#searchPlusView .search-plus-grid .k-command-cell, #searchPlusView .search-plus-grid td.sp-open-cell { text-align: center; }
#searchPlusView .sp-card + .sp-card { border-top: 1px solid var(--border); }
#searchPlusView .sp-card:hover { background: var(--surface-2); }
#searchPlusView .sp-card.sel { background: var(--color-selected-bg); border-color: var(--border-strong); border-top-color: var(--border-strong); }
#searchPlusView .sp-lead { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 2px; }
#searchPlusView .sp-cbody { flex: 1; min-width: 0; }
#searchPlusView .sp-crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-subtle); margin-bottom: 3px; }
#searchPlusView .sp-ttag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: var(--radius-full); }
#searchPlusView .sp-pill-p { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-muted); }
#searchPlusView .sp-ti { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 5px; color: var(--text); }
#searchPlusView .sp-card:hover .sp-ti { color: var(--accent); }
#searchPlusView .sp-snip { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
#searchPlusView .sp-metarow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
#searchPlusView .sp-mi { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
#searchPlusView .sp-mi .ic { width: 13px; height: 13px; color: var(--text-subtle); }
#searchPlusView .sp-score { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--text-subtle); display: inline-flex; align-items: center; gap: 5px; }
#searchPlusView .sp-score .sp-bar, #searchPlusView .sp-rt-score .bar { display: inline-block; width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3, var(--surface-2)); overflow: hidden; vertical-align: middle; }
#searchPlusView .sp-score .sp-bar i, #searchPlusView .sp-rt-score .bar i { display: block; height: 100%; background: var(--accent); }
#searchPlusView .sp-empty { font-size: 13px; color: var(--text-subtle); padding: 26px 14px; }

/* ======================= KENDO GRID (Table view - standard, no border, fills) ======================= */
#searchPlusView .search-plus-grid { flex: 1; min-height: 0; border: none; background: transparent; }
#searchPlusView .search-plus-grid .k-grid-header, #searchPlusView .search-plus-grid .k-grid-content { background: var(--surface); }
#searchPlusView .search-plus-grid .k-table-row.k-selected > .k-table-td,
#searchPlusView .search-plus-grid tr.k-selected > td { background: var(--color-selected-bg) !important; }
#searchPlusView .search-plus-grid td { vertical-align: middle; }
#searchPlusView .sp-rt-type { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; color: var(--text); }
#searchPlusView .sp-rt-type .sp-ptile { width: 26px; height: 18px; font-size: 8.5px; border-radius: 5px; }
#searchPlusView .sp-rt-type .sp-oic { width: 22px; height: 22px; border-radius: 6px; }
#searchPlusView .sp-rt-type .sp-oic svg { width: 13px; height: 13px; }
/* table cells: single line, truncate with ellipsis on overflow (all columns).
   table-layout:fixed is required or Kendo widens the column instead of clipping. */
#searchPlusView .search-plus-grid .k-table,
#searchPlusView .search-plus-grid .k-grid-table { table-layout: fixed; }
#searchPlusView .search-plus-grid .k-table-td,
#searchPlusView .search-plus-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#searchPlusView .search-plus-grid .sp-rt-title,
#searchPlusView .search-plus-grid .sp-rt-proj,
#searchPlusView .search-plus-grid .sp-rt-resp { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#searchPlusView .sp-rt-title { font-weight: 600; color: var(--text); cursor: pointer; }
#searchPlusView .sp-rt-title:hover { text-decoration: underline; color: var(--accent); }
#searchPlusView .sp-rt-proj { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#searchPlusView .sp-rt-resp { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--text-muted); }
#searchPlusView .sp-rt-muted { color: var(--text-subtle); }
#searchPlusView .sp-rt-score { font-weight: 700; color: var(--text-muted); white-space: nowrap; }
#searchPlusView .sp-rt-score .bar { width: 34px; margin-left: 6px; }

@media (max-width: 1180px) {
    #searchPlusView .sp-rlayout { grid-template-columns: 200px 1fr; }
}
@media (prefers-reduced-motion: reduce) { #searchPlusView * { transition: none !important; } }

/* ======================= READ-ONLY DETAIL DIALOGS (Search+) =======================
   Rendered by Kendo Dialog OUTSIDE #searchPlusView (portal) -> own .sp-detail scope.
   Chip/status/rag/tag styles mirror the Search+ result list. */
.sp-detail-dialog .k-dialog { max-height: 86vh; }
.sp-detail-dialog .k-dialog-content { padding: 16px 20px 20px; }
.sp-dl-head { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; }
.sp-dl-head .sp-oic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--col); background: color-mix(in srgb, var(--col) 14%, var(--surface)); }
.sp-dl-head .sp-oic svg { width: 15px; height: 15px; fill: none; stroke: var(--col); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.sp-detail { font-size: 13px; color: var(--text); }
.sp-dl-loading { padding: 24px 4px; color: var(--text-subtle); }
.sp-dl-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }

.sp-dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 6px; }
.sp-dl-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; min-width: 0; }
.sp-dl-label { flex: none; width: 110px; font-size: 11.5px; font-weight: 600; color: var(--text-subtle); }
.sp-dl-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.sp-dl-section { margin-top: 14px; }
.sp-dl-section-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); margin-bottom: 6px; }
.sp-dl-html { font-size: 13px; line-height: 1.55; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px 13px; overflow-wrap: anywhere; }
.sp-dl-html img { max-width: 100%; }

.sp-dl-list { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.sp-dl-list-row { display: flex; align-items: center; gap: 12px; padding: 7px 12px; }
.sp-dl-list-row + .sp-dl-list-row { border-top: 1px solid var(--border); }
.sp-dl-list-main { font-weight: 600; }
.sp-dl-list-sub { color: var(--text-muted); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dl-check { flex: none; font-size: 11.5px; font-weight: 650; color: var(--green-tx); }

.sp-dl-owners { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-dl-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 11px 3px 4px; }

.sp-dl-kind { font-weight: 650; }
.sp-dl-kind.positive { color: var(--green-tx); }
.sp-dl-kind.negative { color: var(--red-tx); }

.sp-dl-score { display: flex; align-items: center; gap: 18px; font-size: 12.5px; color: var(--text-muted); }
.sp-dl-score b { color: var(--text); }
.sp-dl-score-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full); padding: 3px 11px; font-weight: 600; }
.sp-dl-score-badge.r { background: var(--red-t); color: var(--red-tx); }
.sp-dl-score-badge.a { background: var(--amber-t); color: var(--amber-tx); }
.sp-dl-score-badge.g { background: var(--green-t); color: var(--green-tx); }

/* mirrored chips (status / rag / avatar / tag) for the dialog scope */
.sp-detail .sp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px 3px 8px; border-radius: var(--radius-full); }
.sp-detail .sp-status .d { width: 7px; height: 7px; border-radius: 50%; }
.sp-detail .sp-status.open { background: var(--blue-t); color: var(--blue-tx); } .sp-detail .sp-status.open .d { background: var(--accent); }
.sp-detail .sp-status.prog { background: var(--amber-t); color: var(--amber-tx); } .sp-detail .sp-status.prog .d { background: var(--amber); }
.sp-detail .sp-status.closed { background: var(--green-t); color: var(--green-tx); } .sp-detail .sp-status.closed .d { background: var(--green); }
.sp-detail .sp-rag { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sp-detail .sp-rag.r { background: var(--red); } .sp-detail .sp-rag.a { background: var(--amber); } .sp-detail .sp-rag.g { background: var(--green); }
.sp-detail .sp-av { width: 22px; height: 22px; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; background: var(--c-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sp-detail .sp-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--c-teal); background: var(--c-teal-t); border-radius: var(--radius-full); padding: 2px 9px; }

@media (max-width: 760px) {
    .sp-dl-grid { grid-template-columns: 1fr; }
}

/* ---- reader header (web app .rdr-top) ---- */
.sp-rdr-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.sp-rdr-badge { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--col); background: color-mix(in srgb, var(--col) 14%, var(--surface)); }
.sp-rdr-badge svg { width: 22px; height: 22px; fill: none; stroke: var(--col); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-rdr-id { flex: 1; min-width: 0; }
.sp-rdr-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.sp-rdr-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.sp-rdr-pcp { font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; color: var(--text-subtle); }
.sp-rdr-type { color: var(--text-muted); }
.sp-rdr-actions { flex: none; display: inline-flex; align-items: center; gap: 9px; padding-top: 3px; }

/* ---- meta strip (web app .rdr-meta) ---- */
.sp-rdr-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 2px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sp-rdr-meta-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sp-rdr-mi { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-subtle); }
.sp-rdr-mi svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-rdr-mwrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-rdr-mk { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.sp-rdr-mv { font-size: 12.5px; font-weight: 550; color: var(--text); }

/* ---- tab body + sections (web app .expandable-area / .project-details-title) ---- */
.sp-rdr-tabbody { padding-top: 14px; }
.sp-rdr-section { margin-bottom: 22px; }
.sp-rdr-section-title { font-weight: 600; font-size: 13.5px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 10px; }
.sp-rdr-body { font-size: 13px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.sp-rdr-body img { max-width: 100%; }
.sp-rdr-body ul { list-style: disc; padding-left: 2.5em; }
.sp-rdr-body ol { padding-left: 2.5em; }
.sp-rdr-empty { color: var(--text-subtle); }

/* ---- agenda topic list (web app reader topics .apm-rd-toc__row) ---- */
.sp-ag-list { display: flex; flex-direction: column; }
.sp-ag-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: var(--r-btn); }
.sp-ag-row:hover { background: var(--hover); }
.sp-ag-row.lvl2 { padding-left: 26px; }
.sp-ag-row.lvl3 { padding-left: 44px; }
.sp-ag-no { flex: none; min-width: 34px; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--text-subtle); }
.sp-ag-name { font-size: 13px; font-weight: 550; color: var(--text); }
.sp-ag-sub { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* ---- lesson data block (web app .lesson__data) ---- */
.sp-ld-data { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; padding: 2px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.sp-ld-block { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sp-ld-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.sp-ld-val { width: 100%; font-size: 13.5px; font-weight: 500; color: var(--text); min-height: 20px; display: flex; align-items: center; gap: 6px; }
.sp-kind-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-stars { letter-spacing: 2px; font-size: 15px; color: var(--border-strong); }
.sp-stars .on { color: var(--amber); }

/* ---- priority pill (web app .pcp-pill.prio-*) ---- */
.sp-pcp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; }
.sp-pcp-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sp-prio-critical { background: var(--red-t); color: var(--red-tx); }
.sp-prio-serious { background: rgba(234,124,30,.15); color: #ed8a2e; }
.sp-prio-moderate { background: var(--amber-t); color: var(--amber-tx); }
.sp-prio-low { background: var(--green-t); color: var(--green-tx); }

/* ---- general info table (web app .details-general-val .table-fixed) ---- */
.sp-info-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 4px; }
.sp-info-table td { padding: 5px 0; font-size: 13px; color: var(--text); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.sp-info-table td.lbl { width: 105px; font-size: 12px; color: var(--text-subtle); padding-right: 10px; }

/* ---- risk numeric table (web app .risk-numeric-table) ---- */
.sp-risk-table { border-collapse: collapse; }
.sp-risk-table td { padding: 3px 30px 3px 0; font-size: 13px; color: var(--text); }
.sp-risk-table tr:first-child td { font-weight: 700; font-size: 12px; color: var(--text-muted); }

/* ---- parent keypoint reference (web app .parent-keypoint) ---- */
.sp-parent-kp { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin: -6px 0 12px; }
.sp-parent-kp-ic { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--col); background: color-mix(in srgb, var(--col) 14%, var(--surface)); }
.sp-parent-kp-ic svg { width: 12px; height: 12px; fill: none; stroke: var(--col); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-parent-kp-lbl { font-weight: 600; color: var(--text-subtle); }
.sp-parent-kp-t { font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tabstrip inside the dialog: keep the app look, remove extra top spacing */
.sp-detail .custom-tabstrip { margin-top: 2px; }

/* ---- new-design underline tabs (base resets; look comes from theme/Common.css
   .customTabstrip4 rules, which target this exact DOM) ---- */
.sp-tabs4 { height: auto; flex: 0 0 auto; }
.sp-tabs4 .k-tabstrip-items { display: flex; list-style: none; margin: 0; }
.sp-tabs4 .k-tabstrip-item { position: relative; cursor: pointer; user-select: none; }
.sp-tabs4 .k-tabstrip-item .k-link { display: inline-flex; align-items: center; gap: 6px; }
.sp-tabs4 .k-tabstrip-item.k-active { cursor: default; }

/* agenda topic item: numbered row + optional decoded description below */
.sp-ag-item { padding: 2px 0; }
.sp-ag-item.lvl2 { padding-left: 22px; }
.sp-ag-item.lvl3 { padding-left: 44px; }
.sp-ag-note { margin: 2px 8px 8px 42px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.sp-ag-note img { max-width: 100%; }

@media (max-width: 640px) {
    .sp-ld-data { grid-template-columns: 1fr; }
}