@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700&display=swap');
/* Enigma Genomics branding for seqr — palette sourced from the main site's
 * colors.css (:root theme tokens). Injected same-origin via /enigma-assets/.
 * Edit -> re-run enigma-seqr-gke/9-ui-branding.sh.
 */
:root {
    --eg-teal: #2a9d8f;        /* --theme-color */
    --eg-teal-light: #cce7e3;  /* --theme-light */
    --eg-dark: #264653;        /* --theme-dark  */
    --eg-orange: #f86624;      /* --theme-color-primary (CTA) */
    --eg-text: #264653;
    --eg-muted: #7b8b91;
}

/* ---- header bar: Enigma dark slate with teal accents ---- */
#reactRoot > div > .ui.menu:first-of-type,
.ui.inverted.menu {
    background: var(--eg-dark) !important;
}
/* translucent only while scrolled (enigma-seqr.js toggles the body class);
   solid at the top of the page */
body.enigma-scrolled #reactRoot > div > .ui.menu:first-of-type,
body.enigma-scrolled .ui.inverted.menu:first-of-type {
    background: #264653e0 !important;
}
.ui.inverted.menu .item,
.ui.inverted.menu .item > a {
    color: #eaf4f7 !important;
}
.ui.inverted.menu .active.item {
    background: var(--eg-teal) !important;
    color: #fff !important;
}
.enigma-brand {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: #fff !important;
}
.enigma-brand small {
    font-weight: 400;
    opacity: 0.85;
}

/* ---- hide features the team does not use ---- */
a[href*="matchmaker"],
a[href*="/summary_data/matchmaker"] {
    display: none !important;
}
.enigma-hidden {
    display: none !important;
}

/* ---- LIMS backlink button (project pages) ---- */
.enigma-lims-btn {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 14px;
    background: var(--eg-teal);
    color: #fff !important;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    vertical-align: middle;
}
.enigma-lims-btn:hover {
    background: var(--eg-dark);
}

/* ---- landing page hero ---- */
.enigma-hero {
    max-width: 720px;
    margin: 7vh auto 0;
    padding: 0 24px 60px;
    text-align: center;
}
.enigma-hero-logo {
    max-width: 260px;
    margin-bottom: 28px;
}
.enigma-hero h1 {
    font-size: 34px;
    color: var(--eg-dark);
    margin: 0 0 18px;
}
.enigma-hero h1 span {
    color: var(--eg-teal);
}
.enigma-hero-lead {
    font-size: 17px;
    color: #42555c;
    line-height: 1.6;
}
.enigma-hero-sub {
    font-size: 16px;
    font-weight: 600;
    color: var(--eg-dark);
    margin-top: 26px;
}
.enigma-hero-actions {
    margin: 18px 0 30px;
}
.enigma-cta {
    display: inline-block;
    padding: 12px 30px;
    margin: 0 8px;
    background: var(--eg-orange);
    color: #fff !important;
    border: 2px solid var(--eg-orange);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.15s ease-in-out;
}
.enigma-cta:hover {
    background: #d9531a;
    border-color: #d9531a;
}
.enigma-cta-secondary {
    background: var(--eg-teal);
    border-color: var(--eg-teal);
    color: #fff !important;
}
.enigma-cta-secondary:hover {
    background: var(--eg-dark);
    border-color: var(--eg-dark);
}
.enigma-hero-support {
    font-size: 13px;
    color: var(--eg-muted);
}
.enigma-hero-support a {
    color: var(--eg-teal);
    font-weight: 600;
}

/* ---- pipeline status widget (dashboard) ---- */
.enigma-pipe-widget {
    background: var(--eg-teal-light);
    border-bottom: 2px solid var(--eg-teal);
    padding: 8px 24px;
    font-size: 13px;
    color: var(--eg-dark);
    text-align: center;
}
.enigma-pipe-widget.epw-has-fail {
    background: #fdf0ef;
    border-bottom-color: #c0392b;
}
.enigma-pipe-widget .epw-run  { color: var(--eg-teal); font-weight: 700; }
.enigma-pipe-widget .epw-pen  { color: #b45f06; font-weight: 700; }
.enigma-pipe-widget .epw-fail { color: #c0392b; font-weight: 700; }
.enigma-pipe-widget a { color: var(--eg-teal); font-weight: 600; }

/* ---- policy/terms/faq banner ---- */
.enigma-policy-banner {
    background: var(--eg-teal-light);
    border-bottom: 2px solid var(--eg-teal);
    padding: 12px 24px;
    font-size: 14px;
    color: var(--eg-dark);
    text-align: center;
}
.enigma-policy-banner a {
    color: var(--eg-teal);
    font-weight: 600;
}

/* ---- centered footer credit ---- */
.enigma-footer {
    text-align: center;
    padding: 14px 0 18px;
    font-size: 13px;
    color: var(--eg-muted);
}
.enigma-footer a {
    color: var(--eg-teal);
    font-weight: 600;
    text-decoration: none;
}
.enigma-footer a:hover {
    color: var(--eg-dark);
}
/* compact variant rendered as its own centered row right below the footer bar
   (reference look: /data_management) */
.enigma-footer-inline {
    display: block;
    width: 100%;
    flex-basis: 100%;
    clear: both;
    text-align: center;
    margin: 0;
    padding: 12px 0 14px;
    font-size: 13px;
    line-height: 1.4;
}

/* ============================================================
   MODERN THEME LAYER — visual-only restyle of seqr's Semantic UI
   (typography, cards, buttons, tables, inputs, tabs). Safe to
   remove this whole section to revert to stock seqr styling.
   ============================================================ */

/* ---- typography: Nunito (Latin) + Tajawal (Arabic) — Enigma's site fonts,
       imported at top of file; Arabic text auto-falls-through to Tajawal ---- */

body,
.ui.button, .ui.input > input, .ui.form input, .ui.form textarea,
.ui.menu, .ui.header, .ui.table, .ui.dropdown, .ui.label, .ui.message,
.ui.card, .ui.segment, .ui.popup, .ui.modal {
    font-family: 'Nunito', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body {
    background: #f6f8f9 !important;
    color: var(--eg-dark);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--eg-teal); }
a:hover { color: var(--eg-dark); }
.ui.header, h1, h2, h3 { color: var(--eg-dark) !important; }

/* ---- segments/cards: soft shadows, rounded, borderless ---- */
.ui.segment, .ui.segments {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(38, 70, 83, 0.08), 0 1px 2px rgba(38, 70, 83, 0.04) !important;
}
.ui.segments .segment { border-radius: 0 !important; box-shadow: none !important; }
.ui.segments .segment:first-child { border-radius: 12px 12px 0 0 !important; }
.ui.segments .segment:last-child { border-radius: 0 0 12px 12px !important; }
.ui.card, .ui.cards > .card {
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(38, 70, 83, 0.10) !important;
    border: none !important;
}

/* ---- buttons: rounded, branded, animated ---- */
.ui.button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease !important;
}
.ui.button:active { transform: translateY(1px); }
.ui.primary.button, .ui.blue.button {
    background: var(--eg-teal) !important;
    color: #fff !important;
}
.ui.primary.button:hover, .ui.blue.button:hover {
    background: var(--eg-dark) !important;
    box-shadow: 0 2px 8px rgba(42, 157, 143, 0.35) !important;
}
.ui.basic.button {
    box-shadow: 0 0 0 1px #d8e2e4 inset !important;
    color: var(--eg-dark) !important;
}
.ui.basic.button:hover { box-shadow: 0 0 0 1px var(--eg-teal) inset !important; color: var(--eg-teal) !important; }

/* ---- tables: clean headers, hover rows, no cage borders ---- */
.ui.table {
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(38, 70, 83, 0.08) !important;
}
.ui.table thead th {
    background: #eef4f5 !important;
    color: var(--eg-dark) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--eg-teal-light) !important;
}
.ui.table tbody tr { transition: background 0.1s ease; }
.ui.table tbody tr:hover { background: #f4faf9 !important; }
.ui.table td, .ui.table th { border-color: #edf2f3 !important; }

/* ---- inputs/dropdowns: rounded with teal focus ring ---- */
.ui.input > input, .ui.form input, .ui.form textarea,
.ui.selection.dropdown, .ui.form .ui.dropdown {
    border-radius: 8px !important;
    border-color: #d8e2e4 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.ui.input > input:focus, .ui.form input:focus, .ui.form textarea:focus,
.ui.selection.dropdown.active {
    border-color: var(--eg-teal) !important;
    box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15) !important;
}
.ui.checkbox input:checked ~ label:before { border-color: var(--eg-teal) !important; }
.ui.checkbox input:checked ~ label:after { color: var(--eg-teal) !important; }
.ui.toggle.checkbox input:checked ~ label:before { background-color: var(--eg-teal) !important; }

/* ---- tabs / secondary menus: modern underline style ---- */
.ui.secondary.pointing.menu { border-bottom: 2px solid #e5ecee !important; }
.ui.secondary.pointing.menu .item {
    color: #5d7480 !important;
    font-weight: 500 !important;
    border-bottom-width: 3px !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}
.ui.secondary.pointing.menu .item:hover { color: var(--eg-teal) !important; }
.ui.secondary.pointing.menu .active.item {
    color: var(--eg-teal) !important;
    border-color: var(--eg-teal) !important;
    font-weight: 700 !important;
}

/* ---- labels, messages, popups ---- */
.ui.label { border-radius: 6px !important; font-weight: 600 !important; }
.ui.message { border-radius: 10px !important; box-shadow: 0 1px 3px rgba(38, 70, 83, 0.06) !important; }
.ui.popup { border-radius: 10px !important; box-shadow: 0 4px 16px rgba(38, 70, 83, 0.15) !important; border: none !important; }
.ui.modal { border-radius: 14px !important; overflow: hidden; }

/* ---- pagination + misc ---- */
.ui.pagination.menu { border-radius: 8px !important; box-shadow: 0 1px 3px rgba(38,70,83,0.08) !important; border: none !important; }
.ui.pagination.menu .active.item { background: var(--eg-teal) !important; color: #fff !important; }

/* ---- super-thin scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(38, 70, 83, 0.25) transparent; } /* Firefox */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(38, 70, 83, 0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--eg-teal); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- Arabic translation toggle + Google Translate cleanup ---- */
.enigma-lang {
    margin-left: auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    color: #eaf4f7;
    font-size: 13px;
    user-select: none;
}
.enigma-lang-opt {
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    opacity: 0.75;
}
.enigma-lang-opt:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.enigma-lang-opt.active {
    opacity: 1;
    background: var(--eg-teal);
    font-weight: 700;
}
.enigma-lang-sep { opacity: 0.4; margin: 0 2px; }

/* hide Google Translate's own UI chrome */
#google_translate_element { display: none !important; }
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
font[style*="background-color"] { background-color: transparent !important; box-shadow: none !important; }

/* ---- sticky header / footer / table headers ---- */
.ui.inverted.menu:first-of-type {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    margin-top: 0 !important;
    box-shadow: 0 2px 8px rgba(38, 70, 83, 0.18);
}

/* footer container (tagged by enigma-seqr.js) pins to the viewport bottom
   while there is content below the fold */
.enigma-seqr-footer {
    position: sticky !important;
    bottom: 0;
    z-index: 900;
    background: #eef4f5 !important;
    box-shadow: 0 -2px 8px rgba(38, 70, 83, 0.10);
    margin-bottom: 0 !important;
}
.enigma-seqr-footer .enigma-footer-inline {
    padding: 6px 0 8px;
}

/* (sticky table headers removed -- they misplaced headers in modals,
   scroll containers and project tables; header + footer stay sticky) */

/* ---- RTL (Arabic) refinements ---- */
/* keep scientific notation readable left-to-right inside RTL pages */
[dir="rtl"] .notranslate,
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] tt {
    direction: ltr;
    unicode-bidi: embed;
}
/* language toggle keeps its visual order in both directions */
.enigma-lang { direction: ltr; }
/* tables read naturally in RTL but keep numeric cells LTR */
[dir="rtl"] .ui.table td { unicode-bidi: plaintext; }

/* LIMS backlink group (project pages) */
.enigma-lims-btns { display: block; margin: 8px 0 2px; }
.enigma-lims-btns .enigma-lims-btn { margin: 0 8px 0 0; }

/* ---- mobile fixes ---- */
html {
    background: #f6f8f9;
}
/* NOTE: overflow-x:hidden on html/body is MOBILE-ONLY. Applied globally it
   changes the scroll container, which threw semantic-ui hover popups off by
   the scroll offset and broke seqr's own Scroll To Top. */

@media (max-width: 767px) {
    /* kill the right-edge gutter: nothing may push wider than the viewport */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* the wrapped menu is tall on phones -- let it scroll away, and skip
       sticky footer/table-headers too (sticky steals too much space) */
    .ui.inverted.menu:first-of-type { position: static !important; }
    .enigma-seqr-footer { position: static !important; }

    /* tidy our injected bits on small screens */
    .enigma-lang { padding: 6px 10px; width: 100%; justify-content: flex-end; }
    .enigma-lims-btns { display: block; margin: 6px 0 0; }
    .enigma-lims-btns .enigma-lims-btn { margin: 0 6px 6px 0; }
    .enigma-hero-logo { max-width: 200px; }
    .enigma-hero h1 { font-size: 26px; }
    .enigma-cta { display: block; margin: 8px auto; max-width: 280px; }
}

/* ============================================================
   MOBILE RESPONSIVE LAYER
   seqr's Semantic UI grids are desktop-fixed; this makes tablets
   fluid and phones single-column. Visual-only.
   ============================================================ */

/* tablets & below: fluid containers, no negative-margin overflow */
@media (max-width: 991px) {
    .ui.container, .ui.text.container {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
    .ui.grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* phones: stack everything single-column */
@media (max-width: 767px) {
    .ui.grid > .column:not(.row),
    .ui.grid > .row > .column {
        width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .ui.grid > .row { flex-wrap: wrap !important; }

    /* forms: fields stack, inputs go full width */
    .ui.form .fields { flex-wrap: wrap !important; }
    .ui.form .fields > .field {
        width: 100% !important;
        margin: 0 0 10px !important;
    }
    .ui.input, .ui.input > input,
    .ui.selection.dropdown, .ui.form .ui.dropdown {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* buttons: no clipped/overlapping labels */
    .ui.button {
        white-space: normal !important;
        height: auto !important;
        line-height: 1.35 !important;
    }
    .ui.labeled.icon.button { padding-left: 3.2em !important; }

    /* wide tables scroll inside themselves, never the page */
    .ui.table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* headers sized for small screens */
    h1, .ui.huge.header { font-size: 24px !important; }
    h2, .ui.large.header { font-size: 19px !important; }

    /* segments hug the edge less */
    .ui.segment { padding: 12px !important; }

    /* accordion/filter titles (variant search) get breathing room */
    .ui.accordion .title { padding: 10px 6px !important; }
}

/* ---- dropdown overflow fixes (variant search filters etc.) ---- */
.ui.dropdown {
    max-width: 100%;
}
.ui.dropdown > .text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.ui.multiple.dropdown {
    white-space: normal;
    height: auto !important;
}
.ui.dropdown .menu {
    max-width: 92vw;
}
@media (max-width: 767px) {
    /* the compact value boxes on accordion rows: clip inside the box */
    .ui.accordion .ui.dropdown,
    .ui.accordion .ui.button {
        max-width: 44vw !important;
        overflow: hidden;
    }
    .ui.accordion .ui.dropdown > .text {
        white-space: normal;
        max-height: 3.6em;
        line-height: 1.2;
    }
}

/* ============================================================
   FLOATING RESULTS TOOLS (variant results pages)
   Body-level fixed cluster: criteria toggle + full-text filter.
   Lives outside React so re-renders can never remove it.
   ============================================================ */

/* ---- analyst summary stat cards (sticky strip under the header) ---- */
.enigma-stats-strip {
    position: sticky;
    top: 48px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e3ecee;
}
.enigma-stats-cards {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}
.enigma-stats-cards::-webkit-scrollbar { display: none; }
/* docked mode: tools sit at the right end of the stats strip */
.enigma-float-tools.in-strip {
    position: static;
    margin-left: auto;
    flex: 0 0 auto;
}
[dir="rtl"] .enigma-float-tools.in-strip { margin-left: 0; margin-right: auto; }
.enigma-float-tools.in-strip .enigma-crit-btn { padding: 6px 12px; }
.enigma-stats-strip .enigma-table-filter {
    width: auto;
    box-shadow: none;
    border: 1px solid #e3ecee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px !important;
    margin: 0 !important;
}
.enigma-stats-strip .enigma-table-filter i.search.icon {
    margin: 0 !important;
    line-height: 1;
}
.enigma-stats-strip .enigma-table-filter.efx-open i.search.icon { margin-right: 5px !important; }
/* filter collapses to a lone search icon; expands on click */
.enigma-stats-strip .enigma-table-filter i.search.icon { cursor: pointer; }
.enigma-stats-strip .enigma-table-filter input {
    width: 0;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    transition: width 0.18s ease, opacity 0.18s ease;
}
.enigma-stats-strip .enigma-table-filter.efx-open input {
    width: 170px;
    opacity: 1;
    padding: 0 6px !important;
}
.enigma-stats-strip .enigma-table-filter .etf-count { display: none; }
.enigma-stats-strip .enigma-table-filter.efx-open .etf-count { display: inline; }

/* Sort By: compact white pill, branded text */
.enigma-sort-slot .ui.dropdown {
    background: #fff !important;
    border: 1px solid #e3ecee !important;
    border-radius: 16px !important;
    padding: 5px 12px !important;
    min-height: 0 !important;
    font-size: 12.5px !important;
}
.enigma-sort-slot .ui.dropdown > .text { font-weight: 700; color: var(--eg-dark); }
.enigma-sort-slot .ui.dropdown .menu { border-radius: 10px !important; margin-top: 4px !important; }

/* breadcrumb band hidden on results pages to reclaim vertical space */
.enigma-bc-hidden { display: none !important; }

/* ---- gene chips bar (below the Variants bar) ---- */
.enigma-genes-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px;
    background: #fbfdfd;
    border-bottom: 1px solid #e3ecee;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.enigma-genes-strip::-webkit-scrollbar { display: none; }
.enigma-gene-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #dde8ea;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.enigma-gene-chip b {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--eg-dark);
    letter-spacing: 0.01em;
}
.enigma-gene-chip i {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--eg-teal);
    border-radius: 9px;
    padding: 0 6px;
    line-height: 16px;
}
.enigma-gene-chip:hover { border-color: var(--eg-teal); box-shadow: 0 2px 6px rgba(38, 70, 83, 0.10); }
/* faceted-out genes: no matching variants under the active stat/text filter */
.enigma-gene-chip.disabled {
    opacity: 0.35;
    cursor: default;
    filter: grayscale(1);
}
.enigma-gene-chip.disabled:hover { border-color: #dde8ea; box-shadow: none; }
.enigma-gene-chip.active { background: var(--eg-teal); border-color: var(--eg-teal); }
.enigma-gene-chip.active b { color: #fff; }
.enigma-gene-chip.active i { background: #fff; color: var(--eg-teal); }
@media (max-width: 767px) {
    .enigma-genes-strip { padding: 5px 10px; }
}

/* ---- conditions bar (OMIM/GenCC, below the genes bar) ---- */
.enigma-conds-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 24px;
    background: #fdfcfe;
    border-bottom: 1px solid #e3ecee;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.enigma-conds-strip::-webkit-scrollbar { display: none; }
.enigma-cond-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2dbe8;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.enigma-cond-chip b {
    font-size: 12px;
    font-weight: 700;
    color: #5a4a66;
}
.enigma-cond-chip i {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #6d597a;
    border-radius: 9px;
    padding: 0 6px;
    line-height: 16px;
}
.enigma-cond-chip:hover { border-color: #6d597a; box-shadow: 0 2px 6px rgba(38, 70, 83, 0.10); }
.enigma-cond-chip.active { background: #6d597a; border-color: #6d597a; }
.enigma-cond-chip.active b { color: #fff; }
.enigma-cond-chip.active i { background: #fff; color: #6d597a; }
.enigma-cond-chip.disabled { opacity: 0.35; cursor: default; filter: grayscale(1); }
.enigma-cond-chip.disabled:hover { border-color: #e2dbe8; box-shadow: none; }
@media (max-width: 767px) {
    .enigma-conds-strip { padding: 5px 10px; }
}
.enigma-stats-strip::-webkit-scrollbar { display: none; }
.enigma-stats-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--eg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.enigma-stat-card {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e3ecee;
    border-left: 4px solid var(--sc);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(38, 70, 83, 0.05);
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.enigma-stat-card b { font-size: 16px; color: var(--sc); }
.enigma-stat-card i { font-style: normal; font-size: 12px; font-weight: 600; color: #5d7379; }
.enigma-stat-card:hover { border-color: var(--sc); box-shadow: 0 3px 8px rgba(38, 70, 83, 0.12); }
.enigma-stat-card.active { background: var(--sc); border-color: var(--sc); }
.enigma-stat-card.active b, .enigma-stat-card.active i { color: #fff; }
.enigma-stat-card.zero { opacity: 0.45; cursor: default; }
/* labeled groups inside the Variants bar */
.enigma-stats-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid #e3ecee;
    flex: 0 0 auto;
}
.enigma-stats-group > em {
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: var(--eg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
/* accurate pager (totalResults from the search API; seqr = 100/page) */
.enigma-page-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.enigma-float-tools.in-strip { margin-left: auto; } /* first of the right cluster */
.enigma-page-info { margin-left: 0; }
[dir="rtl"] .enigma-float-tools.in-strip { margin-left: 0; margin-right: auto; }
/* relocated seqr controls (Sort By / Download / Gene Breakdown) */
.enigma-sort-slot { display: inline-flex; align-items: center; flex: 0 0 auto; }
.enigma-sort-slot .inline.field { margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; }
.enigma-sort-slot .inline.field > label { font-size: 11px !important; color: var(--eg-muted) !important; text-transform: uppercase; font-weight: 800 !important; }
.enigma-dl-slot { display: inline-flex; flex: 0 0 auto; }
/* seqr's Download button stays hidden; our proxy opens its own menu with
   direct download links (seqr's popup mis-anchors to hidden triggers) */
.enigma-dl-slot button { display: none !important; }
.enigma-dl-proxy { position: relative; }
.enigma-dl-menu {
    display: none;
    position: absolute;
    top: 38px;
    right: 0;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3ecee;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(38, 70, 83, 0.18);
    padding: 6px;
    z-index: 1300;
    white-space: nowrap;
}
.enigma-dl-proxy.open .enigma-dl-menu { display: flex; }
.enigma-dl-menu a {
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eg-dark) !important;
    border-radius: 6px;
    text-decoration: none !important;
}
.enigma-dl-menu a:hover { background: var(--eg-teal-light); }
[dir="rtl"] .enigma-dl-menu { right: auto; left: 0; }
.enigma-dl-proxy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--eg-teal);
    color: #fff;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 8px rgba(38, 70, 83, 0.25);
    transition: background 0.15s ease;
}
.enigma-dl-proxy:hover { background: var(--eg-dark); }
.enigma-dl-proxy i.icon {
    font-size: 14px;
    line-height: 1;
    margin: 0;
    color: #fff;
}
.enigma-search-slot { display: inline-flex; flex: 0 0 auto; }
.enigma-gb-slot { display: inline-flex; flex: 0 0 auto; margin-left: auto; }
[dir="rtl"] .enigma-gb-slot { margin-left: 0; margin-right: auto; }
.enigma-page-info .epi-text {
    font-size: 12px;
    font-weight: 700;
    color: #5d7379;
    white-space: nowrap;
}
/* compact by default ("Page 2"); full range + arrows glide in on hover */
.enigma-page-info { gap: 0; }
.enigma-page-info .epi-short { font-weight: 800; color: var(--eg-dark); }
.enigma-page-info .epi-full {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    transition: max-width 0.28s ease, opacity 0.22s ease;
}
.enigma-page-info:hover .epi-full {
    max-width: 280px;
    opacity: 1;
}
.enigma-page-info .epi-btn {
    width: 0;
    height: 24px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.24s ease, margin 0.24s ease, opacity 0.18s ease, background 0.15s ease;
}
.enigma-page-info:hover .epi-btn {
    width: 24px;
    margin: 0 4px;
    opacity: 1;
}
.enigma-page-info .epi-btn.disabled { display: none !important; }
.enigma-page-info .epi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--eg-dark);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.enigma-page-info .epi-btn:hover { background: var(--eg-teal); }
.enigma-page-info .epi-btn.disabled { opacity: 0.3; cursor: default; }
.enigma-page-info .epi-btn.disabled:hover { background: var(--eg-dark); }
/* bottom "load next page" pill */
.enigma-next-fab {
    position: fixed;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 960;
    padding: 9px 22px;
    background: var(--eg-teal);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    border-radius: 22px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 16px rgba(38, 70, 83, 0.30);
}
.enigma-next-fab:hover { background: var(--eg-dark); }
@media (max-width: 767px) {
    .enigma-stats-strip { top: 0; padding: 6px 10px; flex-wrap: wrap; }
    .enigma-stats-strip .enigma-table-filter { width: 160px; }
}

.enigma-float-tools {
    position: fixed;
    bottom: 56px; /* clear of the sticky footer; top-right would cover Sort/Download */
    right: 16px;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 8px;
}
[dir="rtl"] .enigma-float-tools { right: auto; left: 16px; }
.enigma-crit-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--eg-dark);
    color: #fff;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(38, 70, 83, 0.28);
    transition: background 0.15s ease;
}
.enigma-crit-btn:hover { background: var(--eg-teal); }
.enigma-float-tools .enigma-table-filter {
    margin: 0 !important;
    flex-basis: auto !important;
    width: 300px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(38, 70, 83, 0.18);
}
@media (max-width: 767px) {
    .enigma-float-tools {
        bottom: 58px;
        right: 10px;
        left: 10px;
    }
    .enigma-float-tools .enigma-table-filter { width: 100%; }
}

/* animated slide up/down for the criteria form (Show/Hide Filter) */
form.enigma-search-form {
    max-height: 4000px;
    opacity: 1;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease,
                margin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
form.enigma-search-form.enigma-animating { overflow: hidden; }
form.enigma-search-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    pointer-events: none;
}

/* compact pass over the criteria form (both fresh-search + expanded state) */
form.enigma-search-form .ui.segment { padding: 12px 16px !important; }
form.enigma-search-form .ui.grid > .row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
form.enigma-search-form .field { margin-bottom: 8px !important; }
form.enigma-search-form h2, form.enigma-search-form .ui.header {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   VARIANT RESULT CARDS (variant search / saved variants)
   Targets seqr's styled-components via stable class prefixes.
   ============================================================ */

/* each variant row becomes an elevated card with hover lift.
   ClinVar pathogenicity coloring: seqr tints the whole row via its
   styled-component classes; enigma-seqr.js reads that tint from seqr's own
   stylesheets and exposes it as --eg-accent on the row. The card stays clean
   white and the ClinVar color drives the left stripe + hover highlight. */
[class*="Variants__StyledVariantRow"] {
    background: var(--eg-accent-bg, #fff) !important;
    border: 1px solid #e3ecee !important;
    border-left: 5px solid var(--eg-accent, transparent) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(38, 70, 83, 0.06) !important;
    margin: 14px 4px !important;
    padding: 14px 18px 12px !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
/* NOTE: no transform here -- a transformed ancestor becomes the containing
   block for position:fixed, which threw seqr's hover popups (gnomAD/seqr AC
   tooltips) to the top of the screen */
[class*="Variants__StyledVariantRow"]:hover {
    box-shadow: 0 8px 24px rgba(38, 70, 83, 0.15) !important;
    border-color: var(--eg-accent-hover, var(--eg-teal)) !important;
}
/* drop the empty filler columns inside the card */
[class*="Variants__StyledVariantRow"] > .sixteen.wide.column:empty {
    display: none !important;
}

/* family/tags strip: quiet header band separated from the body */
[class*="Variants__StyledVariantRow"] table[class*="NoBorderTable"] {
    border-bottom: 1px dashed #e3ecee !important;
    margin-bottom: 8px !important;
}

/* gene name: strong and prominent */
[class*="Variants__StyledVariantRow"] .ui.huge.basic.button {
    color: var(--eg-dark) !important;
    font-weight: 800 !important;
    font-size: 1.4em !important;
    letter-spacing: 0.3px;
    padding-left: 0 !important;
}
[class*="Variants__StyledVariantRow"] .ui.huge.basic.button:hover {
    color: var(--eg-teal) !important;
}

/* HGVS / sequence strings: monospace only -- no chips/boxes, keep seqr's
   native flexible rendering for alleles and individual cells */
[class*="SequenceContainer"] {
    font-family: SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 0.92em;
}

/* frequency + prediction values: readable emphasis */
[class*="Frequencies__FreqValue"],
[class*="Predictions__PredictionValue"] {
    color: var(--eg-dark) !important;
    font-weight: 600;
}

/* the tool links row (Variant Lookup / seqr codon / Google / ...) quieter */
[class*="Annotations__DividedLink"] {
    font-size: 0.9em !important;
    color: var(--eg-muted) !important;
}
[class*="Annotations__DividedLink"]:hover { color: var(--eg-teal) !important; }

/* slightly compact typography inside cards */
[class*="Variants__StyledVariantRow"] {
    font-size: 13px;
    line-height: 1.45;
}

/* ---- quick-filter box in modal data tables ---- */
.enigma-table-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 8px 12px;
    background: #f0f5f6;
    border: 1px solid #d8e2e4;
    border-radius: 10px;
}
.enigma-table-filter i.search.icon { color: var(--eg-teal); margin: 0; }
.enigma-table-filter input {
    flex: 1;
    border: none !important;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--eg-dark);
    font-family: inherit;
}
.enigma-table-filter .etf-count {
    font-size: 12px;
    color: var(--eg-muted);
    white-space: nowrap;
    font-weight: 600;
}

/* ---- dashboard projects table: search + pagination (enigma-seqr.js) ---- */
.enigma-dt-top,
.enigma-dt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.enigma-dt-top {
    margin: 10px 0 0;
    scroll-margin-top: 60px; /* clear the sticky header when paging scrolls back up */
}
.enigma-dt-bottom { margin: 12px 0 4px; }
.enigma-dt-top .edt-len,
.enigma-dt-bottom .edt-info {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--eg-muted);
}
.enigma-dt-top .edt-len select {
    margin: 0 6px;
    padding: 5px 8px;
    border: 1px solid #d8e2e4;
    border-radius: 8px;
    background: #fff;
    color: var(--eg-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.enigma-dt-top .enigma-table-filter.edt-search {
    width: 300px;
    max-width: 100%;
    margin: 0;
    padding: 6px 12px;
    cursor: text;
}
.enigma-dt-top .edt-search:focus-within { border-color: var(--eg-teal); }
.enigma-dt-bottom .edt-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.enigma-dt-bottom .edt-pager button {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d8e2e4;
    border-radius: 8px;
    background: #fff;
    color: var(--eg-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.enigma-dt-bottom .edt-pager button:hover:not(:disabled):not(.active) {
    border-color: var(--eg-teal);
    color: var(--eg-teal);
}
.enigma-dt-bottom .edt-pager button.active {
    background: var(--eg-teal);
    border-color: var(--eg-teal);
    color: #fff;
    cursor: default;
}
.enigma-dt-bottom .edt-pager button:disabled { opacity: 0.45; cursor: default; }
.enigma-dt-bottom .edt-gap { padding: 0 4px; color: var(--eg-muted); }
/* hidden rows break nth-child zebra striping: stripe the rows the script tags instead */
[class*="Dashboard__ProjectTableContainer"] .ui.striped.table tbody tr:nth-child(2n) {
    background-color: transparent;
}
[class*="Dashboard__ProjectTableContainer"] .ui.striped.table tbody tr.edt-alt {
    background-color: rgba(0, 0, 50, 0.02);
}
@media (max-width: 767px) {
    .enigma-dt-top .enigma-table-filter.edt-search { width: 100%; }
    .enigma-dt-bottom { justify-content: center; }
}


/* Ginie sign-in prompt — shown only until the user has signed in on this domain once.
   Sits where the widget's own launcher will appear, so the position does not jump. */
.enigma-ginie-signin {
    position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
    z-index: 2147483000; border: 0; cursor: pointer;
    background: #299D90; color: #fff; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: 10px 20px; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.enigma-ginie-signin:hover { background: #1f7d72; }