/* ================================================================
   components/table-trade-flows.css

   Trade-flows table variant. Sits on top of the .cc-table chassis
   in components/table-base.css. Used by:

     • /member-state-detail   "Import Data" tab
     • /producing-country     "Export Data" tab
     • /commodity-detail      "Import Data" + "Export Data" tabs
   ================================================================ */


/* ================================================================
   1. TABLE-SECTION WRAPPER
   White card around the trade-flows table on member-state +
   producing-country pages. Card chrome (background, border,
   radius-lg, soft shadow, overflow:hidden) is shared with
   .cc-table-card / .chart-section in table-base.css; what's listed
   here is only the trade-flows-specific extras: dark-blue info-
   button colour tokens used inside the card. No top padding —
   .cc-detail-toolbar sits flush against the card top edge.
   ================================================================ */
.table-section {
    margin: 0;
    --info-bg: var(--ae-darkblue);
    --info-color: var(--white);
}


/* ================================================================
   2. TABLE TOOLBAR (group-by + search)
   Holds the group-by segmented control on the left and the search
   field on the right. Other filter controls (commodity + the two
   checkboxes) live in the sticky sidebar (.cc-detail-filters) so
   they stay reachable while scrolling. Mirrors .cs-control-bar
   from /case-studies: 12px × 16px padding, a 1px bottom-border
   divider, no margin-bottom — so the dark-teal table header sits
   one hairline below the toolbar instead of being pushed down.
   ================================================================ */
.cc-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid var(--color-track-bg);
}

.cc-detail-toolbar__main {
    display: contents;
}

.cc-detail-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cc-detail-toolbar__label {
    /* Small, heavy, uppercase + tracked so it reads as a section
       caption rather than a sentence. */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Group-by segmented control — mirrors the case-studies group-by
   pills. Light grey track + transparent inactive buttons + white
   "lifted" active button with a soft shadow. */
.cc-detail-groupby {
    display: inline-flex;
    background: var(--color-track-bg);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 4px;
}

.cc-detail-groupby__btn {
    border: 0;
    background: transparent;
    color: var(--color-muted);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.cc-detail-groupby__btn:hover {
    color: var(--ae-darkblue);
}

.cc-detail-groupby__btn.is-active {
    background: var(--white);
    color: var(--ae-darkblue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* .cc-detail-toolbar__search* rules moved to page-detail-body.css so
   the case-studies + company-detail surfaces (which don't load this
   file) pick them up too. Searchbox is now a shared toolbar widget. */


/* ================================================================
   3. TRADE-FLOWS TABLE VARIANT (8-column grid)
   HS / Product / Volume / 5×supplier-or-destination.
   Both the member-state exporters table AND the producing-country
   destinations table use this. Commodity-detail Import/Export
   tabs also use it (with their share widget in the Volume lane).

   The shared chrome (card, header strip, sort button, body rows,
   row hover, group header) lives in table-base.css. This block only
   adds the column template + page-flavour-agnostic overrides.
   ================================================================ */
.cc-table--trade-flows .cc-table__head,
.cc-table--trade-flows .cc-table__row {
    grid-template-columns:
        minmax(50px, 0.5fr)
        minmax(105px, 1.1fr)
        minmax(105px, 1fr)
        repeat(5, minmax(95px, 1.5fr));
    /* Supplier cells contain card-like blocks of varying height; let
       grid stretch them so a row reads as one consistent band. */
    align-items: stretch;
}

/* Merged "Suppliers" label spans the 5 supplier columns in the
   header strip. */
.cc-table--trade-flows .cc-table__head .cc-table__cell--suppliers {
    grid-column: span 5;
    text-align: center;
}

/* Responsive overrides live at the end of the file — see RESPONSIVE
   section below for ≤ 1280 px reflow + ≤ 1000 px scroll fallback. */


/* ================================================================
   4. GROUP-HEADER MARKER PIECES
   Inserted into .cc-table__group rows by JS. The dot variant is
   the default; the icon variant replaces it when the commodity
   has a dedicated SVG glyph. The count sits on the far right.
   ================================================================ */
.cc-detail-group__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--group-color, var(--ae-darkblue));
}

.cc-detail-group__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.cc-detail-group__count {
    margin-left: auto;
    color: var(--color-muted);
    font-weight: 400;
    font-size: var(--fs-sm);
}


/* ================================================================
   5. CELL CONTENT — per-column body layouts
   min-width:0 on the base cell (in table-base.css) lets long content
   shrink instead of blowing the column out.
   ================================================================ */

/* HS code, monospaced numerics. */
.cc-table__cell--hs {
    font-variant-numeric: tabular-nums;
    color: var(--ae-black);
    font-weight: 500;
}

/* Product cell: bold name on top, commodity dot + name below. */
.cc-table__product-name {
    font-weight: 600;
    color: var(--ae-black);
    line-height: 1.3;
    margin-bottom: 4px;
}

.cc-table__product-commodity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Volume cell — emphasised numeric value, small unit suffix. */
.cc-table__volume-value {
    font-weight: 600;
    color: var(--ae-black);
    font-variant-numeric: tabular-nums;
}

.cc-table__volume-unit {
    font-size: var(--fs-xs);
    color: var(--color-muted);
    margin-left: 4px;
}


/* ================================================================
   6. SHARE BAR (commodity-coloured fill)
   Inline horizontal bar showing a percentage on a 0–100 scale.
   Default fill is teal; commodity-coloured variants below set the
   fill to the commodity's brand colour via data-commodity.
   ================================================================ */
.cc-detail-share {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.cc-detail-share__bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--color-track-bg);
    border-radius: 4px;
    overflow: hidden;
}

.cc-detail-share__fill {
    height: 100%;
    background: var(--share-color, var(--ae-darkblue));
    border-radius: 4px;
    transition: width .25s ease;
}

.cc-detail-share__value {
    font-weight: 600;
    color: var(--ae-darkblue);
    font-size: var(--fs-sm);
    display: inline-block;
}

/* Resolve share-bar colour from the row's commodity slug. */
.cc-detail-share[data-commodity="cattle"]   .cc-detail-share__fill { background: var(--commodity-cattle); }
.cc-detail-share[data-commodity="cocoa"]    .cc-detail-share__fill { background: var(--commodity-cocoa); }
.cc-detail-share[data-commodity="coffee"]   .cc-detail-share__fill { background: var(--commodity-coffee); }
.cc-detail-share[data-commodity="corn"]     .cc-detail-share__fill { background: var(--commodity-corn); }
.cc-detail-share[data-commodity="cotton"]   .cc-detail-share__fill { background: var(--commodity-cotton); }
.cc-detail-share[data-commodity="palm"]     .cc-detail-share__fill { background: var(--commodity-palm); }
.cc-detail-share[data-commodity="palm-oil"] .cc-detail-share__fill { background: var(--commodity-palm); }
.cc-detail-share[data-commodity="poultry"]  .cc-detail-share__fill { background: var(--commodity-poultry); }
.cc-detail-share[data-commodity="rubber"]   .cc-detail-share__fill { background: var(--commodity-rubber); }
.cc-detail-share[data-commodity="soy"]      .cc-detail-share__fill { background: var(--commodity-soy); }
.cc-detail-share[data-commodity="wood"]     .cc-detail-share__fill { background: var(--commodity-wood); }
.cc-detail-share[data-commodity="timber"]   .cc-detail-share__fill { background: var(--commodity-wood); }


/* ================================================================
   7. SUPPLIER CELLS (3-row grid: head / icons / metric)
     row 1 (auto)  head   – flag + country name on top
     row 2 (1fr)   icons  – defor + shipment, centred in leftover space
     row 3 (auto)  metric – bar + percentage, pinned to the bottom
   The cell stretches to the row's full height (align-items:stretch
   on the parent grid) so the metric bar always lines up with the
   bottom edge regardless of the tallest cell in the row.
   ================================================================ */

.cc-table__cell--supplier {
    padding: 0;
    font-size: var(--fs-sm);
}

.cc-detail-supplier {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 6px;
    height: 100%;
}

.cc-detail-supplier__head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.3;
}

.cc-detail-supplier__flag {
    width: 22px;
    height: auto;
    flex-shrink: 0;
    border-radius: 2px;
}

.cc-detail-supplier__name {
    color: var(--ae-black);
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
}

.cc-detail-supplier__name.has-data {
    color: var(--ae-darkblue);
}

.cc-detail-supplier__name.has-data:hover {
    text-decoration: underline;
}

/* Middle zone — defor + shipment icons. Vertically centred in the
   leftover space, horizontally aligned to the LEFT edge of the cell
   so they line up under the flag in the head row above. */
.cc-detail-supplier__icons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
}

/* Defor icon — informational warning glyph (not clickable). */
.cc-detail-supplier__defor {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Shipment-data pill — matches the canonical .btn-teal pattern:
     At rest:  solid teal pill, white boat icon + "View →" label.
     On hover: lightgreen pill, dark-blue boat icon + text. */
.cc-detail-supplier__boat {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 3px 8px 3px 5px;
    margin-top: 0;
    border: 1px solid var(--ae-darkblue);
    border-radius: var(--radius-pill);
    background: var(--ae-darkblue);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

.cc-detail-supplier__boat:hover,
.cc-detail-supplier__boat:focus-visible {
    background: var(--ae-lightgreen);
    border-color: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}

.cc-detail-supplier__boat .boat-icon {
    width: 12px;
    height: 12px;
    background-color: var(--white);
}

.cc-detail-supplier__boat:hover .boat-icon,
.cc-detail-supplier__boat:focus-visible .boat-icon {
    background-color: var(--ae-darkblue);
}

/* Suppress the legacy ::after tooltip — the pill's own "View →"
   label + the native title attribute carry the message. */
.cc-detail-supplier__boat:hover::after,
.cc-detail-supplier__boat:focus-visible::after {
    display: none;
}

.cc-detail-supplier__boat-label {
    /* Hook class; future overrides (e.g. hide on narrow viewports)
       can target it. */
}

/* Bottom zone — bar + percentage. Anchored to the bottom edge. */
.cc-detail-supplier__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Supplier bar — always darkblue per spec (not commodity colour). */
.cc-detail-share__bar--supplier {
    height: 6px;
}

.cc-detail-share__bar--supplier .cc-detail-share__fill {
    background: var(--ae-darkblue);
}

.cc-detail-supplier__pct {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    color: var(--ae-darkblue);
    font-weight: 600;
}


/* ================================================================
   8. BOAT ICON (masked SVG stencil)
   Stencil of the shipment icon used inside .cc-detail-supplier__boat.
   The wrapper sets the pill chrome; this rule paints the glyph. The
   fill colour comes from background-color (mask paints the shape)
   so the same SVG works white inside the teal pill and teal outside.

   The URL itself lives in tokens.css as --icon-boat-url so moving
   the SVG (or this CSS file) only requires editing the declaration
   in one place. CSS resolves url() inside a custom property
   relative to where the value is DECLARED, not where var() is
   read from — so tokens.css at css/ root keeps a single source of
   truth regardless of how deeply this file is nested.
   ================================================================ */
.boat-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--ae-darkblue);
    -webkit-mask: var(--icon-boat-url) no-repeat center / contain;
            mask: var(--icon-boat-url) no-repeat center / contain;
    transition: background-color 0.15s ease;
}


/* ================================================================
   9. INFO-ICON SCOPED TO TABLE ROWS
   The generic .info-icon (in page-detail-body.css) is muted to 40%
   opacity at rest inside table rows so it sits quietly behind the
   data, then ramps to full opacity on hover. The shared inversion-
   on-hover (filled bg + white glyph) is suppressed here — just
   opacity changes.
   ================================================================ */
.cc-table__row .info-icon {
    border-color: var(--ae-darkblue);
    color: var(--ae-darkblue);
    opacity: 0.4;
    transition: opacity var(--transition-base);
}
.cc-table__row .info-icon:hover {
    opacity: 1;
    background: transparent;
    color: var(--ae-darkblue);
    border-color: var(--ae-darkblue);
}


/* ================================================================
   10. SEARCH-MATCH HIGHLIGHT
   Applied by JS to supplier cells whose country name contains the
   current search term. Soft orange wash so the match reads as a
   "found" tag without overwhelming the cell.
   ================================================================ */
.cc-table__cell--supplier.is-search-match {
    background: color-mix(in srgb, var(--ae-orange) 18%, transparent);
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
}


/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
     xl   ≤ 1280px   standard desktops — 8-col → 4-col supplier stack
                    ≤ 1000px   trade-flows min-width fallback for horizontal scroll
   ================================================================ */

/* === xl  (≤ 1280px, standard desktops) ========================= */
/* At this breakpoint the 8-column grid drops to 4 columns; the five
   supplier strips stack vertically inside column 4. */
@media (max-width: 1280px) {
    .cc-table--trade-flows { min-width: 0; }

    /* Tooltip overflow — let the (i) popups escape the card. */
    .table-section { overflow: visible; }
    .cc-table-scroll {
        overflow-x: visible;
        overflow-y: visible;
    }
    .cc-table--trade-flows .cc-table__head {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* Row divider — bumped to a thicker stroke since each row is now taller. */
    .cc-table--trade-flows .cc-table__row {
        border-bottom: 2px solid var(--color-input-border);
        padding-top: 18px;
        padding-bottom: 18px;
    }

    /* Grid template: HS / Product / Total / Suppliers (col 4 takes remainder). */
    .cc-table--trade-flows .cc-table__head,
    .cc-table--trade-flows .cc-table__row {
        grid-template-columns:
            minmax(50px, auto)
            minmax(50px, 100px)
            minmax(80px, auto)
            minmax(0, 1fr);
        align-items: start;
    }
    .cc-table--trade-flows .cc-table__head .cc-table__cell--suppliers {
        grid-column: 4;
        text-align: left;
    }

    /* Each populated supplier cell stacks in column 4 (auto-placement). */
    .cc-table--trade-flows .cc-table__row .cc-table__cell--supplier {
        grid-column: 4;
        padding: 0;
    }
    .cc-table--trade-flows .cc-table__row .cc-table__cell--supplier:empty {
        display: none;
    }
    .cc-table--trade-flows .cc-table__row .cc-table__cell--supplier
      ~ .cc-table__cell--supplier {
        border-top: 1px solid var(--color-track-bg);
        padding-top: 8px;
        margin-top: 8px;
    }

    /* Supplier internals — 2-col grid: name+icons stacked left (180px),
       bar+pct right (capped at 320px). */
    .cc-table--trade-flows .cc-table__row .cc-detail-supplier {
        display: grid;
        grid-template-columns: 180px minmax(0, 320px);
        grid-template-rows: auto auto;
        grid-template-areas:
            "head  metric"
            "icons metric";
        align-items: center;
        gap: 2px 16px;
        height: auto;
    }
    .cc-table--trade-flows .cc-table__row .cc-detail-supplier__head {
        grid-area: head;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .cc-table--trade-flows .cc-table__row .cc-detail-supplier__name {
        min-width: 0;
        line-height: 1.25;
    }
    .cc-table--trade-flows .cc-table__row .cc-detail-supplier__icons {
        grid-area: icons;
        justify-content: flex-start;
        min-height: 0;
    }
    .cc-table--trade-flows .cc-table__row .cc-detail-supplier__metric {
        grid-area: metric;
        display: grid;
        grid-template-columns: minmax(80px, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .cc-table--trade-flows .cc-table__row .cc-table__cell--supplier.is-search-match {
        margin: 0;
        padding: 6px 8px;
    }
}

/* === ≤ 1000px (trade-flows min-width fallback) ================= */
/* Below this width the grid can't compress further without illegible
   cells, so the .cc-table-scroll wrapper falls back to horizontal scroll. */
@media (max-width: 1000px) {
    .cc-table--trade-flows {
        min-width: 900px;
    }
}