/*
 * richtip.css — shared "rich tooltip" + table cell-formatting styles.
 *
 * Ported/trimmed from the seqsim result table (backend/app/templates/seqsim/
 * _seqsim-results.html) so the UBS cluster tables share one visual language.
 *
 * Semantic palette (a colour means the same thing everywhere): apo, holo,
 * undefined, mixed and unknown are the --ah-* custom properties in custom.css,
 * and the cards' paper, ink, rules and shadow are the --tt-* ones, so this file
 * and the seqsim tooltip look the same without sharing a line.
 *
 * Two tiers:
 *   (a) CSS-only header popovers  -> .th-pop inside a <th>
 *   (b) JS singleton body tooltip -> #richtip, fed by data-tt-* attributes
 *       (see richtip.js)
 */

/* ---------- (a) header popover (CSS-only, no JS) ------------------------- */
.th-pop {
    position: absolute;
    top: calc(100% + 6px); left: 0;
    z-index: 50;
    width: 19em; padding: 9px 11px;
    background: var(--tt-bg); color: var(--tt-fg);
    border: 1px solid var(--tt-border); border-radius: 6px;
    box-shadow: var(--tt-shadow);
    font-size: 11.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
    text-align: left; text-transform: none; white-space: normal;
    opacity: 0; pointer-events: none;
    transform: translateY(2px);
    transition: opacity 100ms ease-out, transform 100ms ease-out;
}
/* Anchor the rightmost columns' popovers to the right edge so they don't clip. */
.ubs-table thead th.th-pop-right .th-pop { left: auto; right: 0; }
.ubs-table thead th { position: relative; }
.ubs-table thead th:hover .th-pop,
.ubs-table thead th:focus-within .th-pop { opacity: 1; transform: translateY(0); }
/* Inline help: a dotted-underlined word in running text or a row label that opens the same
   popover ("threshold" above the threshold tabs, "UniProt IDs" above the UniProt tabs). */
.th-help { position: relative; text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.th-help .th-pop { left: 0; }
.th-help:hover .th-pop, .th-help:focus .th-pop, .th-help:focus-within .th-pop { opacity: 1; transform: translateY(0); }
.th-pop strong {
    display: block; color: var(--tt-title); font-weight: 600;
    font-size: 12px; margin-bottom: 3px; letter-spacing: 0;
}
.th-pop .th-pop__para { display: block; margin-top: 6px; }
.th-pop b { font-weight: 600; }
.th-pop .th-pop__note {
    display: block; margin-top: 6px;
    color: var(--tt-muted); font-size: 11px; font-style: italic;
}
.th-pop code {
    background: var(--tt-inset); color: var(--tt-fg);
    padding: 0 4px; border-radius: 3px;
    font-size: 10.5px; font-family: "Roboto Mono", monospace;
}

/* ---------- table cell chrome ------------------------------------------- */
.ubs-table thead tr.ubs-group-row th {
    background: #fafafa; color: #6b7280;
    font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.04em;
    text-align: center; border-bottom: 1px solid #eee;
}
.ubs-table td.num, .ubs-table th.num { text-align: right; }
/* sortable column headers (second header row only) */
.ubs-table thead tr:not(.ubs-group-row) th { cursor: pointer; user-select: none; }
.ubs-table thead tr:not(.ubs-group-row) th:hover { background: #ececec; }
.ubs-table thead th.sorted-asc::after  { content: " \25B4"; color: #666; }
.ubs-table thead th.sorted-desc::after { content: " \25BE"; color: #666; }
.ubs-table .num { font-variant-numeric: tabular-nums; }
.ubs-table tbody td.col-apo  { background: var(--ah-apo-wash); }
.ubs-table tbody td.col-holo { background: var(--ah-holo-wash); }
.ubs-table tbody td.col-db   { background: rgba(59, 130, 246, 0.05); font-weight: 600; }
.ubs-table td.cell-zero { color: #cbd5e1; }
.ubs-table td.cell-na   { color: #cbd5e1; }
/* The DB entry being viewed is a member of this cluster: the same yellow and red arrow the
   dendrogram marks its leaf with, so the two views point at the same thing. */
.ubs-table tbody tr.ubs-row--current td { background: #fff8e1; }
.ubs-table tbody tr.ubs-row--current td.col-db { background: #fff3cd; }
.ubs-current-mark { color: #e53e3e; font-size: 9px; margin-right: 4px; vertical-align: 1px; }

/* cluster id pill */
.ubs-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 999px;
    background: #eef2ff; color: #4338ca;
    font-family: "Roboto Mono", monospace; font-size: 11px; font-weight: 600;
}
.ubs-pill__iface {
    font-size: 10px; color: #b45309;
    border-left: 1px solid rgba(0,0,0,0.12); padding-left: 4px;
}
.ubs-pill__homologs {
    font-size: 9.5px; color: #4338ca; font-weight: 700;
    border-left: 1px solid rgba(0,0,0,0.12); padding-left: 4px;
}

/* ---------- AF classification chip -------------------------------------- */
.afchip {
    display: inline-flex; align-items: center; gap: 4px;
    min-width: 3em; padding: 2px 8px;
    border-radius: 999px; border: 1px solid currentColor;
    font-size: 11px; line-height: 1.4;
    font-family: "Roboto Mono", monospace;
}
.afchip__prob { font-variant-numeric: tabular-nums; opacity: 0.9; }
.afchip--holo      { background: var(--ah-holo); color: var(--ah-on-fill); border-color: var(--ah-holo); }
.afchip--apo       { background: var(--ah-apo);  color: var(--ah-on-fill); border-color: var(--ah-apo); }
.afchip--undefined { background: var(--ah-undefined); color: var(--ah-on-fill); border-color: var(--ah-undefined); }
.afchip--mixed     { background: var(--ah-mixed); color: var(--ah-mixed-text); border-color: var(--ah-mixed); }
.afchip--unknown   { background: var(--ah-unknown); color: var(--ah-unknown-text); border-color: var(--ah-unknown); }
.afchip--none      { background: transparent; color: var(--ah-unknown-text); }

/* ---------- confidence mini bar (two-line num + bar) -------------------- */
/* The fill is the winning class's colour, white at the left end - the violin plots'
   gradient bars - never a tone of the value, so the bar cannot contradict the chip. */
.pcell { min-width: 4.5em; }
.pcell__num { font-variant-numeric: tabular-nums; font-size: 12px; }
.pcell__bar { height: 4px; border-radius: 2px; background: #eef2f7; margin-top: 2px; overflow: hidden; }
.pcell__bar-fill { height: 100%; border-radius: 2px; }
.pcell__bar-fill--apo       { background: linear-gradient(90deg, var(--tt-bg), var(--ah-apo)); }
.pcell__bar-fill--holo      { background: linear-gradient(90deg, var(--tt-bg), var(--ah-holo)); }
.pcell__bar-fill--undefined { background: linear-gradient(90deg, var(--tt-bg), var(--ah-undefined)); }

/* ---------- apo:holo split bar (observed structures) -------------------- */
.ah-cell { min-width: 5em; }
.ah-cell__bar {
    position: relative;
    display: flex; height: 8px; border-radius: 3px;
    background: #eef2f7; overflow: hidden;
}
.ah-cell__seg--holo { background: var(--ah-holo); }
.ah-cell__seg--apo  { background: var(--ah-apo); }
.ah-cell__label {
    font-size: 10px; color: #6b7280; line-height: 1.2;
    font-variant-numeric: tabular-nums; text-align: center; margin-top: 1px;
}

/* ---------- (b) JS singleton tooltip card ------------------------------- */
#richtip {
    position: fixed;
    z-index: 1000;
    background: var(--tt-bg); color: var(--tt-fg);
    border: 1px solid var(--tt-border); border-radius: 6px;
    box-shadow: var(--tt-shadow);
    padding: 8px 10px;
    font-size: 12px; line-height: 1.45;
    min-width: 140px; max-width: 280px;
    pointer-events: none;
    opacity: 0; transition: opacity 80ms ease-out;
}
#richtip.tt-wide { max-width: 360px; }
#richtip[data-show="1"] { opacity: 1; }
#richtip[data-pinned="1"] { pointer-events: auto; border-color: var(--tt-pinned); }
#richtip[data-show="1"]:not([data-pinned="1"])::after {
    content: "click to pin"; display: block; margin-top: 4px;
    color: var(--tt-faint); font-size: 10px; font-style: italic;
    text-align: right; letter-spacing: 0.04em;
}
/* a link's card: a click opens the page and never pins it (richtip.js), so the hint says that,
   and the link keeps the hand rather than the question mark */
#richtip[data-show="1"][data-link]:not([data-pinned="1"])::after { content: "click to open"; }
#richtip[data-pinned="1"] .tt-footer::before { content: "📌 "; color: var(--tt-accent); }
[data-tt] { cursor: help; }
a[href][data-tt] { cursor: pointer; }

#richtip .tt-title { font-weight: 600; color: var(--tt-title); margin-bottom: 2px; }
#richtip .tt-subtitle { color: var(--tt-muted); font-size: 11px; margin-bottom: 6px; }
#richtip .tt-prelude {
    color: var(--tt-fg); font-size: 11px; line-height: 1.5;
    background: var(--tt-inset); border-radius: 4px; padding: 5px 7px; margin-bottom: 6px;
}
#richtip .tt-section {
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--tt-rule);
    color: var(--tt-muted); font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
#richtip .tt-row {
    display: flex; justify-content: space-between; gap: 1em; padding: 1px 0;
}
#richtip .tt-row--block { flex-direction: column; align-items: stretch; gap: 4px; }
#richtip .tt-key { color: var(--tt-muted); }
#richtip .tt-val { font-variant-numeric: tabular-nums; color: var(--tt-fg); }
#richtip a.tt-link { color: var(--tt-accent); text-decoration: none; font-family: "Roboto Mono", monospace; }
#richtip a.tt-link:hover { text-decoration: underline; }
#richtip .tt-val--holo { color: var(--ah-holo-text); font-weight: 600; }
#richtip .tt-val--apo  { color: var(--ah-apo-text); font-weight: 600; }
#richtip .tt-val--undefined { color: var(--ah-undefined-text); font-weight: 600; }
#richtip .tt-val--mixed     { color: var(--ah-mixed-text); font-weight: 600; }
#richtip .tt-val--unknown,
#richtip .tt-val--none      { color: var(--ah-unknown-text); }

/* apo/holo (or P(apo)/P(holo)) split bar */
#richtip .tt-split { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
#richtip .tt-split-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--tt-track); }
#richtip .tt-split-bar__seg--holo { background: var(--ah-holo); }
#richtip .tt-split-bar__seg--apo  { background: var(--ah-apo); }
#richtip .tt-split-bar__seg--undefined { background: var(--ah-undefined); }
#richtip .tt-split-counts { display: flex; justify-content: space-between; align-items: center; font-size: 11px; gap: 1em; }
#richtip .tt-split-counts__holo  { color: var(--ah-holo-text); font-weight: 600; font-variant-numeric: tabular-nums; }
#richtip .tt-split-counts__apo   { color: var(--ah-apo-text); font-weight: 600; font-variant-numeric: tabular-nums; }
#richtip .tt-split-counts__ratio { color: var(--tt-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* chip strip (entries / residues) with a preview cap + "show more" */
#richtip .tt-chip-strip {
    display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px;
    max-height: 8.5em; overflow-y: auto; scrollbar-width: thin;
}
#richtip .tt-chip {
    display: inline-block; padding: 1px 5px; border-radius: 3px;
    background: #f1f5f9; color: #334155;
    font-family: "Roboto Mono", monospace; font-size: 10.5px;
}
#richtip a.tt-chip { color: var(--tt-accent); text-decoration: none; }
#richtip a.tt-chip:hover { background: #e0e7ff; }
/* a.tt-chip above outranks a bare class, so the representative's link needs its own
   anchor rule or its text comes out blue on indigo. */
#richtip .tt-chip--rep, #richtip a.tt-chip--rep { background: #4338ca; color: #fff; }
#richtip a.tt-chip--rep:hover { background: #3730a3; }
/* the entry being viewed, in the same yellow as its table row */
#richtip .tt-chip--cur, #richtip a.tt-chip--cur { background: #fff3cd; color: #92400e; box-shadow: inset 0 0 0 1px #fcd34d; }
#richtip a.tt-chip--cur:hover { background: #fde68a; }
#richtip .tt-chip-strip__rest { display: contents; }
#richtip .tt-chip-strip__rest[hidden] { display: none; }
#richtip .tt-expand-btn {
    display: inline-block; margin-top: 4px; padding: 1px 6px;
    border: 1px dashed #c7d2fe; border-radius: 3px; background: #eef2ff;
    color: #4338ca; font-size: 10.5px; cursor: pointer;
}
#richtip .tt-expand-btn:hover { background: #e0e7ff; }

#richtip .tt-footer {
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--tt-rule);
    color: var(--tt-muted); font-size: 11px;
}