/* ================================================================
   table.css  –  Compliance Checker
   Shared table component. One BEM family powers every grid-based
   table across the site:

     • case-studies                    .cc-table--case-studies
     • member-state exporters table    .cc-table--exporters
     • producing-country destinations  .cc-table--destinations
     • (future) commodity import/exp   .cc-table--commodity-*
     • (future) company case-studies   .cc-table--company-cases

   What lives here
   ────────────────
     1. .cc-table-card        outer white card chrome (optional)
     2. .cc-table-scroll      horizontal-scroll wrapper (optional)
     3. .cc-table             positioning anchor + variant modifier
     4. .cc-table__head       column-header strip (teal, white text)
     5. .cc-table__body       container for body rows
     6. .cc-table__row        body row (white, hover-tint)
     7. .cc-table__cell       cell — keeps grid children shrinkable
     8. .cc-table__sort       header sort button + rotating arrow
     9. .cc-table__group      optional group-header row
    10. .cc-table__empty      empty-state row

   What does NOT live here
   ───────────────────────
     • grid-template-columns  — set per page on
                                .cc-table--<variant>
     • cell-content layouts   — supplier card, property+location,
                                deforestation cell, etc. live with
                                the page that uses them
     • toolbars above tables  — filter chips, group-by pills,
                                search bars stay per-page

   Loaded globally via base.html so every page picks it up without
   per-template <link> plumbing.

   Visual canon: the case-studies table. Both grid systems already
   used the same tokens; this file is the single source of truth
   instead of three near-identical implementations.
================================================================ */


/* === 1. CARD CHROME ============================================
   Optional outer wrapper. White surface with a faint border and
   rounded corners that crisp-clip the teal header strip. Use
   wherever a table needs the "stat-card-of-tables" look (which is
   most places). overflow:hidden lets the radius bite the header
   bar at the corners. */

/* Shared card chrome for every "table / chart in a white card" surface
   across the site. Three classes plug into this rule:
     • .cc-table-card    case-studies table on /case-studies and the
                         case-studies tab of /company-detail
     • .table-section    trade-flows table on /producing-country and
                         /member-state-detail
     • .chart-section    pie-chart panel on /member-state-detail and
                         /commodity-detail
   The chrome is identical (background, border, radius, shadow,
   overflow). What differs is padding and the --info-* tokens used by
   the info-button glyph inside; those stay on each consumer's own
   rule (page-country-detail-shared.css for .table-section, page-
   member-state-detail.css for .chart-section). */
.cc-table-card,
.table-section,
.chart-section {
    background: var(--white);
    border: 1px solid var(--color-track-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}


/* === 2. SCROLL WRAPPER =========================================
   Wraps the .cc-table on pages where the column total can exceed
   the viewport (most detail pages on narrow widths). Lets the
   table scroll horizontally inside the card instead of bursting
   out of its container. */

.cc-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* === 3. TABLE ===================================================
   Just a positioning anchor for the variant modifier. The actual
   grid template is set per page via
       .cc-table--<variant> .cc-table__head,
       .cc-table--<variant> .cc-table__row { grid-template-columns: …; } */

.cc-table {
    /* No own display / background — keep the wrapper transparent so
       a parent .cc-table-card draws the chrome. */
}


/* === 4. HEADER STRIP ===========================================
   Dark-teal background with white labels. Sentence case + medium
   weight reads as more professional and less shouty than all-caps. */

.cc-table__head {
    background: var(--ae-darkblue);
    color: var(--white);
    padding: 14px 16px;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-bottom: 1px solid color-mix(in srgb, var(--ae-darkblue) 25%, transparent);
}

/* Header + row share the same grid-template-columns so columns
   stay aligned. The template lives on the page-specific modifier;
   only the layout primitives are shared here. */
.cc-table__head,
.cc-table__row {
    display: grid;
    gap: 12px;
    align-items: start;
}


/* === 5. BODY ====================================================
   Plain container for the body rows. Lets pages target row groups
   without affecting the header strip above. */

.cc-table__body {
    /* No own styling — see .cc-table__row below for row chrome. */
}


/* === 6. ROW =====================================================
   White background, a thin divider under each row, and a soft
   lightgreen-tinted hover so the user can track horizontal reads
   without losing visual rhythm. */

.cc-table__row {
    padding: 14px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-track-bg);
    font-size: var(--fs-md);
    transition: background .12s;
}

.cc-table__row:last-child {
    border-bottom: none;
}

.cc-table__row:hover {
    background: color-mix(in srgb, var(--ae-lightgreen) 18%, transparent);
}

/* Filter-driven hidden rows — display:none beats the grid layout. */
.cc-table__row[hidden] {
    display: none;
}


/* === 7. CELL ====================================================
   Default cell — min-width:0 lets grid children shrink past their
   intrinsic content width, which is what enables text ellipsis
   inside columns that the page might constrain. */

.cc-table__cell {
    min-width: 0;
}


/* === 8. SORT BUTTON ============================================
   Borderless button sitting inside a header cell. Whole label is
   clickable. A small arrow sits next to the label, faint by
   default and bright on the active column. The arrow rotates 180°
   when the active sort flips to descending. */

.cc-table__sort {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    /* Explicit white because some browsers don't inherit color
       properly on <button>, which left header sort labels rendering
       black against the teal background on some user agents. */
    color: var(--white);
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: opacity .15s;
}

.cc-table__sort:hover {
    opacity: 0.85;
}

.cc-table__sort:hover .cc-table__sort-arrow {
    opacity: 1;
}

.cc-table__sort-arrow {
    font-size: 14px;
    line-height: 1;
    opacity: 0.55;
    transition: transform .2s ease, opacity .15s;
}

.cc-table__sort.is-active .cc-table__sort-arrow {
    opacity: 1;
}

/* Arrow rotation convention: the base glyph is fa-arrow-down (↓), so
   "descending" (largest first) reads naturally without rotation. We
   flip 180° on "ascending" so the arrow points up (↑) — matching the
   conventional sort UI. The JS only sets data-direction on the active
   button, so no .is-active gate is needed here. */
.cc-table__sort[data-direction="asc"] .cc-table__sort-arrow {
    transform: rotate(180deg);
}


/* === 9. GROUP HEADER ===========================================
   Optional row that spans the full grid width and labels a
   group-by section (commodity, country, etc.). Pages that don't
   use group-by simply don't render this element. */

.cc-table__group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--card-bg), var(--white));
    border-top: 2px solid var(--group-color, var(--ae-darkblue));
    border-bottom: 1px solid var(--color-input-border);
    font-weight: 600;
    color: var(--ae-darkblue);
    font-size: var(--fs-md);
}


/* === 10. EMPTY STATE ===========================================
   Placeholder row shown when filters hide every body row. */

.cc-table__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-muted);
    font-size: 13px;
    background: var(--card-bg);
}


/* === RESPONSIVE =================================================
   Tighter padding on narrow viewports so cells don't overflow. */

@media (max-width: 768px) {
    .cc-table__head,
    .cc-table__row {
        padding: 12px;
        gap: 8px;
    }
}


/* ================================================================
   LEGACY <table class="table"> SHIM  (deprecated)

   commodity_detail.html still uses real <table class="table">
   markup for three tables (#sortableTable, #tradeTable,
   #tradeTableExport). The rules below preserve the basic look so
   those pages don't regress while the markup is migrated to
   .cc-table* in a follow-up commit. Remove this whole block once
   commodity_detail's tables are ported.

   Audited 2026-05-26: only the .table / .table td / .table thead
   rules below are referenced in markup. The full Bootstrap-style
   shim previously included .header-cell / .header-title / .rank-badge
   / .ranking-cell / .sort-button / .sort-icon — none of those classes
   appear in any current template, so they're gone.
================================================================ */

.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-dropdown);
    overflow: hidden;
}

.table td {
    padding: 1rem;
    vertical-align: middle;
}

.table thead tr {
    height: 120px;
}

.table thead th {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .table td {
        padding: 0.5rem 0.75rem;
    }
    .table thead tr {
        height: 80px;
    }
}