/* browser.css — styles for the Fatty Acids Browser page (pages/browser/). */

/* ─── Page shell (index.php) ────────────────────────────────────── */
.br-page-shell { padding-top: 0; min-height: calc(100vh - 64px); }
.br-flex-stretch { height: 100%; align-items: stretch; }
.br-aside {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
}
.br-main { flex: 1; min-width: 0; padding: var(--spacing-md); background: var(--bg-body); }

/* Full-width variant (left filter sidebar removed). */
.br-page-shell--full { display: block; }
.br-main--full { width: 100%; }

/* ─── Top filter bar (single row of segmented controls) ─────────── */
.br-filterbar {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;   /* keep everything on one line; scroll if narrow */
}
.scrolledDown .br-filterbar {
    padding: 10px;
}
body:not(.scrolledDown) .br-filterbar {
    margin-bottom: var(--spacing-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
}

/* Mobile-only filter trigger — hidden on desktop (see the mobile media query,
   where .br-seg collapses into a dropdown opened by this button). */
.br-filter-trigger { display: none; }


/* A segmented control: buttons joined with shared borders. */
.br-seg {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-body, #fff);
}

.seg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.36rem 0.72rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-color, #334155);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}
.seg-chip + .seg-chip { border-left: 1px solid var(--border-color, #e2e8f0); }
.seg-chip em {
    font-style: normal;
    font-size: 0.75em;
    opacity: 0.6;
    font-weight: 400;
}
.seg-chip:hover { color: var(--primary-color, #3b82f6); background: var(--primary-row-hover, rgba(59,130,246,0.08)); }
.seg-chip.active {
    background: var(--primary-color, #3b82f6);
    color: #fff;
}
.seg-chip.active em { opacity: 0.85; }
/* Independent toggles use a distinct accent when on */
.seg-toggle.active {
    background: var(--danger-color, #dc2626);
    color: #fff;
}

/* Structure thumbnail becomes a link to the FA page. */
.browser-struct-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; cursor: pointer; }
.browser-table .browser-struct-link { display: inline-block; width: auto; height: auto; }

/* Page title band (spans the content region, right of the filter sidebar). */
.br-header {
    margin: calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) var(--spacing-md);
    padding: 0.9rem var(--spacing-md);
}
.br-header h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
.br-header h1 i { color: var(--primary-color, #3b82f6); margin-right: 0.4rem; }
.br-header-sub { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.95rem; }

/* ─── Legacy shell (browser.php standalone variant) ─────────────── */
.br-legacy-shell { display: flex; height: calc(100vh - 60px); overflow: hidden; }
.br-legacy-aside {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    overflow-y: auto;
}
.br-legacy-main { flex: 1; overflow-y: auto; padding: 2rem; }
.br-legacy-card-link { text-decoration: none; color: inherit; }
.br-legacy-card-icon { font-size: 3rem; color: var(--border-color); }

/* ─── Toolbar (browser_right.php) ───────────────────────────────── */
.br-flex-column { display: flex; flex-direction: column; }
.br-toolbar { display: flex; justify-content: space-between; }
.br-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

/* ─── Modal header (shared by the Export + Columns modals) ───────── */
.modal-header h3 { margin: 0; font-size: 1.4rem; }
.modal-header .modal-close-btn { border: none; background: none; font-size: 1.2rem; cursor: pointer; }

/* Filter-title variants used for sub-groups (e.g. "Double Bonds Count", "Isomerism") */
.br-filter-title--sub-spaced { margin-top: 1rem; font-size: 0.7rem; }
.br-subgroup { margin-top: 1rem; }
.br-filter-title--sub-tight { font-size: 0.7rem; margin-bottom: 0.5rem; }

/* ─── Segmented Grid / Table toggle ─────────────────────────────── */
.view-segmented {
    display: inline-flex;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card, #fff);
}
.view-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.view-seg-btn + .view-seg-btn { border-left: 1px solid var(--border-color, #e2e8f0); }
.view-seg-btn:hover { color: var(--primary-color, #3b82f6); }
.view-seg-btn.active {
    background: var(--primary-color, #3b82f6);
    color: #fff;
}
.view-seg-btn i { font-size: 0.9em; }

/* View dropdown wrapper — desktop shows .view-segmented inline; the trigger is
   mobile-only (see the mobile media query, where the segmented collapses). */
.br-view-dd { position: relative; display: inline-flex; }
.br-view-trigger { display: none; }









/* ─── Browser results table ─────────────────────────────────────── */
.browser-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    /* No border-radius / overflow / box-shadow here: the wrapper owns the
       border + rounding, and `overflow` on the table itself would make it its
       own scroll container and break position:sticky on the header/first col. */
}
.browser-table thead { background: var(--bg-body); }
.browser-table th { padding: 1rem; text-align: left; font-weight: 600; }

/* Column alignment helpers */
.browser-table .ta-center { text-align: center; }
.browser-table .ta-right  { text-align: right; }
/* Cell content styles */
/* First column: the .badgeCombo pill (type · notation · omega) — replaces the
   old separate Type / Omega columns and the second-line notation. */
.browser-table .bt-combo    { white-space: nowrap; width: 1%; }
.browser-table .bt-name     { font-weight: 600; }
.browser-table .bt-notation { font-weight: 400; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }
.browser-table .bt-formula  { font-family: monospace; color: var(--text-muted); }
.browser-table .bt-muted    { color: var(--text-muted); }

.browser-table td {
    vertical-align: middle;
    text-align: left;
    padding: 0.75rem;
    border-spacing: 30px;

    border-top-width: 0;
    border-bottom-width: 1pt;

    border-top-style: solid;
    border-bottom-style: solid;

    border-top-color: #DDDDDD;
    border-bottom-color: #DDDDDD;
}
.browser-table tr:hover td {
    transition: 0ms;
    background-color: var(--primary-row-hover);
/*  border-top-color: #2563EBFF;
    border-bottom-color: #2563EBFF; */
}

/* Type sub-header rows */
.browser-table tr.table-type-subheader td {
    padding: 0.6rem 1rem;
    background: var(--bg-body);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-top: 2px solid var(--border-color);
}

/* FA name links: animated colour change on hover */
#results-container a { transition: color 0.18s ease; }
#results-container a:hover { color: var(--primary-color, #3b82f6); }


/* Grid: white backdrop behind the mini render */
.card .browser_img_container {
    background: #ffffff;
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Legacy thumbnail image, sized to fill the image container. */
.mol-thumb { width: 100%; height: 100%; object-fit: contain; }

/* Grid card body: name + formula + badges, stacked and centred. */
.browser-card-body {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
}
.browser-card-body > *, .browser-card-body .flex {
    text-align: center;
    justify-content: center;
}
.browser-card-formula {
    font-family: monospace;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
/* Grid: mini fills the image container, scaled to fit */
.browser_img_container .browser-mini-render { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.browser_img_container .fm2d-mini-svg { max-width: 100%; max-height: 100%; width: 100%; height: auto; display: block; }
/* Table: compact mini in its own column */
.browser-table td.fa-mini-cell { padding: 0.5rem 1rem; }
.browser-table td.fa-mini-cell .browser-mini-render {
    width: 180px; max-width: 180px;
    border: 1px solid #efefef;
    border-radius: 8px;
    background-color: white;
}
.browser-table td.fa-mini-cell .fm2d-mini-svg { width: 100%; height: auto; max-height: 64px; display: block; }

/* Export-modal styles live in export.css; Columns-picker styles in columns.css. */

/* ─── Column-driven table cells + sortable headers ───────────────── */
.browser-table td.bt-cell { vertical-align: middle; }
.browser-table .bt-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
.browser-table .bt-muted { color: var(--text-muted); }

/* Sortable headers */
.browser-table th.bt-th { white-space: nowrap; }
.browser-table th.bt-sortable { cursor: pointer; user-select: none; }
.browser-table th.bt-sortable:hover { color: var(--primary-color, #3b82f6); }
.browser-table th .bt-sorticon { opacity: 0.35; font-size: 0.85em; margin-left: 0.15rem; }
.browser-table th .bt-sortactive { color: var(--primary-color, #3b82f6); font-size: 0.9em; margin-left: 0.15rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Table scroll container + sticky header/first column + full-page mode
   (mirrors the profiles comparison table: pages/profiles/profileTables.css)
   ═══════════════════════════════════════════════════════════════════════ */

/* THE scroll container for both axes. Capped at 90% × 70vh with a border;
   a positioned ancestor so the sticky header/first column have a reference. */
.browser-table-wrap {
    overflow: auto;
    max-width: 100%;   /* fill #results-container, which is itself capped at 90% */
    max-height: 70vh;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border: 1px solid var(--border-color);
    /* Square top corners so the table meets the filter/toolbar card above it
       seamlessly; round only the bottom. */
    border-radius: 0 0 8px 8px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sticky header row — stays put while the body scrolls vertically. Background
   must sit on the cell (not the row) for the sticky cell to stay opaque. */
.browser-table thead th {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--bg-tinted);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

/* Sticky first column — stays put while the body scrolls horizontally. */
.browser-table td.bt-cell:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-card);
    box-shadow: inset -1px 0 0 var(--border-color);
}
.browser-table tr:hover td.bt-cell:first-child {
    /* keep the hover tint on the frozen cell instead of the card background */
    background: var(--primary-row-hover, #eff4ff);
}
/* Corner: first header cell is sticky in BOTH axes → highest layer. */
.browser-table thead th:first-child {
    left: 0;
    z-index: 30;
    box-shadow: inset -1px 0 0 var(--border-color), inset 0 -1px 0 var(--border-color);
}

/* ─── Full-page mode ───────────────────────────────────────────────────── */
body.br-fullpage { overflow: hidden; }          /* the table replaces page scroll */
body.br-fullpage #browser-region {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem 1rem;
    background: var(--bg-body, #fff);
    box-sizing: border-box;
    overflow: hidden;
}
/* Filter bar + toolbar stay at the top; the results area takes the rest. */
body.br-fullpage #results-container {
    flex: 1;
    min-height: 0;
}
body.br-fullpage .browser-table-wrap {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0 0 8px 8px;
}

/* Active state for the Full Page button */
.br-fullpage-btn.is-active {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   One shared 90% column — the filter bar, the toolbar, and the results all
   align to the same width box, centred. (#browser-region is a flex column,
   so auto inline margins centre these items on the cross axis.)
   ═══════════════════════════════════════════════════════════════════════ */
#browser-filterbar,
#browser-top-section,
#results-container {
    max-width: 85vw;
    margin-left: auto;
    margin-right: auto;
}
/* Full-page mode uses the whole width — drop the width cap there. */
body.br-fullpage #browser-filterbar,
body.br-fullpage #browser-top-section,
body.br-fullpage #results-container {
    max-width: none;
}

/* Filter bar + toolbar read as ONE card (bg + border on top/left/right). The
   box is open at the bottom, so the table below — which carries its own border
   and squared top corners — meets it seamlessly as a single container. */
#browser-filterbar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}
#browser-top-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0.55rem 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / responsive
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet portrait & down: a slightly smaller table font. */
@media (max-width: 900px) {
    .browser-table { font-size: 0.85rem; }
    .browser-table th { padding: 0.7rem 0.8rem; }
    .browser-table td { padding: 0.55rem 0.7rem; }
}

/* Tablet portrait & mobile: collapse the filter + view controls to dropdowns,
   hide the Columns/Export buttons (see columns.css / export.css), and use full
   width. The 900px cap sits above iPad portrait (~820–834px) but below normal
   desktop windows, so a non-maximised desktop keeps the desktop layout.
   (iPad landscape ~1180px stays on the desktop layout — wide enough to fit.) */
@media (max-width: 900px) {
    /* Use the full width instead of the 85vw desktop column. */
    #browser-filterbar,
    #browser-top-section,
    #results-container {
        max-width: 100%;
    }
    .br-header h1 { font-size: 1.25rem; }
    .br-header-sub { font-size: 0.85rem; }

    /* ── Filter: collapse the segmented control into a dropdown ─────────── */
    /* overflow:visible is essential — the base .br-filterbar has overflow-x:auto,
       which would clip the absolutely-positioned dropdown panel. */
    .br-filterbar { position: relative; justify-content: stretch; overflow: visible; }
    /* Neutralise the desktop "card" chrome — the trigger provides it now. */
    body:not(.scrolledDown) .br-filterbar { padding: 0; border: 0; background: transparent; }

    .br-filter-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.55rem 0.85rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-color, #334155);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .br-filter-trigger i { transition: transform 0.15s ease; color: var(--text-muted); }
    .br-filterbar.filter-open .br-filter-trigger i { transform: rotate(180deg); }

    /* .br-seg becomes an absolutely-positioned dropdown panel (chips stacked). */
    .br-seg {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 200;
        flex-direction: column;
        max-height: 62vh;
        overflow-y: auto;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-card);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }
    .br-filterbar.filter-open .br-seg { display: flex; }
    .br-seg .seg-chip {
        width: 100%;
        justify-content: flex-start;
        border-radius: 0;
        padding: 0.65rem 0.95rem;
        font-size: 0.95rem;
    }
    .br-seg .seg-chip + .seg-chip { border-left: 0; border-top: 1px solid var(--border-color); }

    /* Toolbar: keep the count and the (now compact) controls on one row where
       possible; the controls group itself stays on a single line. */
    #browser-top-section {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.55rem 0.6rem;
    }
    #browser-top-right-options { margin-left: auto; }
    #browser-top-right-options .flex { flex-wrap: nowrap; justify-content: flex-end; gap: 0.4rem; }
    #results-count { font-size: 1.05rem; }

    /* View toggle → dropdown (mirrors the filter dropdown). */
    .view-segmented {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 300;
        flex-direction: column;
        min-width: 150px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        background: var(--bg-card);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }
    .br-view-dd.view-open .view-segmented { display: flex; }
    .view-seg-btn { justify-content: flex-start; padding: 0.6rem 0.95rem; }
    .view-seg-btn + .view-seg-btn { border-left: 0; border-top: 1px solid var(--border-color); }
    .br-view-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.7rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-color, #334155);
        font: inherit;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }
    .br-view-trigger .br-view-caret { font-size: 0.72em; color: var(--text-muted); transition: transform 0.15s ease; }
    .br-view-dd.view-open .br-view-trigger .br-view-caret { transform: rotate(180deg); }

    /* Full Page: icon-only to save space. */
    .br-fullpage-btn .br-fullpage-label { display: none; }
}

/* ── Phones — tighter type, minis, and grid cards ──────────────────────── */
@media (max-width: 768px) {
    .browser-table { font-size: 0.8rem; }
    .browser-table th,
    .browser-table td { padding: 0.45rem 0.5rem; }
    .browser-table td.fa-mini-cell .browser-mini-render { width: 120px; max-width: 120px; }
    #results-container { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
    .card .browser_img_container { height: 150px; }
}

@media (max-width: 480px) {
    /* Too small for the toolbar — hide it entirely (count / view toggle / full page). */
    #browser-top-section { display: none !important; }

    .browser-table { font-size: 0.75rem; }
    .browser-table td.fa-mini-cell .browser-mini-render { width: 96px; max-width: 96px; }
    #results-container {
        grid-template-columns: 1fr !important;
    }
}