/* ================================================================
   components/table-case-studies.css

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

     • /case-studies page
     • /company-detail "Case studies" tab
   ================================================================ */


/* === 1. TOOLBAR (group-by pills above the table) === */

.cs-control-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-track-bg);
    box-shadow: var(--shadow);
}

.cs-control-bar__main { display: contents; }

.cs-control-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--color-muted);
    flex: 0 0 auto;
}

.cs-groupby-pills {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--color-track-bg);
    border-radius: var(--radius-pill);
}

.cs-groupby-btn {
    border: 0;
    padding: 6px 14px;
    background: transparent;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.cs-groupby-btn:hover {
    color: var(--ae-darkblue);
}

.cs-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);
}


/* === 2. GRID TEMPLATE (8 columns) === */
/* property+location | commodity | linked companies | cleared area |
   clearance period | case date | supply-chain link | pdf icon */
.cc-table--case-studies .cc-table__head,
.cc-table--case-studies .cc-table__row {
    grid-template-columns:
        2fr
        var(--col-md)
        1.5fr
        var(--col-sm)
        var(--col-md)
        var(--col-md)
        var(--col-lg)
        var(--col-xs);
}

.cc-table--case-studies .cc-table__head .cc-table__cell {
    text-align: center;
}


/* === 3. CELL ALIGNMENT === */

.cc-table__row .cs-col-area,
.cc-table__row .cs-col-date,
.cs-col-link,
.cs-col-pdf {
    text-align: center;
}


/* === 4. PROPERTY + LOCATION CELL === */

.cs-col-property .cs-property-name {
    font-weight: 600;
    color: var(--ae-black);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.cs-col-property .cs-property-location {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}


/* === 5. CLEARED AREA CELL === */

.cs-area-value {
    color: var(--ae-black);
    font-weight: 700;
}

.cs-area-unit {
    color: var(--color-muted);
    font-size: 12px;
    margin-left: 4px;
    font-weight: 500;
}

.cs-col-link,
.cs-col-pdf {
    text-align: center;
}


.cs-dash {
    color: var(--color-muted);
}


/* === 6. EMPTY STATE (overrides chassis defaults) === */

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


/* === 7. GROUP HEADER (overrides chassis) === */

.cc-table__group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 8px;
    margin-top: 4px;
    border-bottom: 1px solid var(--color-track-bg);
    font-size: 13px;
    font-weight: 700;
    color: var(--ae-darkblue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cc-table__group:first-child {
    padding-top: 8px;
    margin-top: 0;
}

.cc-table__group--commodity {
    border-top: 2px solid var(--group-color, var(--ae-darkblue));
}
.cc-table__group--commodity:first-child {
    padding-top: 10px;
}

.cs-group-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}

.cs-group-commodity-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ae-black) 6%, transparent);
}

.cs-group-name {
    flex: 0 0 auto;
}

.cs-group-count {
    margin-left: auto;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-muted);
    font-size: 12px;
}


/* === 8. COMMODITY CELL (dot + name) === */

.cs-commodity-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-commodity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ae-black);
    text-decoration: none;
    line-height: 1.3;
}

.cs-commodity:hover {
    color: var(--ae-darkblue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cs-commodity-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--color-muted);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

/* Commodities with a dedicated SVG icon render on a white circle;
   without one (corn / cotton / poultry) the dot stays solid-coloured. */
.cs-commodity[data-commodity="cattle"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_cattle.svg") center / 110% no-repeat; }
.cs-commodity[data-commodity="cocoa"]     .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_cocoa.svg")  center / 110% no-repeat; }
.cs-commodity[data-commodity="coffee"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_coffee.svg") center / 110% no-repeat; }
.cs-commodity[data-commodity="palm"]      .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_palm.svg")   center / 110% no-repeat; }
.cs-commodity[data-commodity="palm oil"]  .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_palm.svg")   center / 110% no-repeat; }
.cs-commodity[data-commodity="rubber"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_rubber.svg") center / 110% no-repeat; }
.cs-commodity[data-commodity="soy"]       .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_soy.svg")    center / 110% no-repeat; }
.cs-commodity[data-commodity="wood"]      .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_wood.svg")   center / 110% no-repeat; }
.cs-commodity[data-commodity="timber"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_wood.svg")   center / 110% no-repeat; }

.cs-commodity[data-commodity="corn"]      .cs-commodity-dot { background: var(--commodity-corn); }
.cs-commodity[data-commodity="cotton"]    .cs-commodity-dot { background: var(--commodity-cotton); }
.cs-commodity[data-commodity="poultry"]   .cs-commodity-dot { background: var(--commodity-poultry); }


/* === 9. COMPANY PILLS === */

.cs-company-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cs-company-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    border: 1px solid var(--color-track-bg);
    font-size: 12px;
    color: var(--ae-black);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.cs-company-pill:hover {
    background: color-mix(in srgb, var(--ae-lightgreen) 25%, transparent);
    border-color: color-mix(in srgb, var(--ae-green) 40%, transparent);
    color: var(--ae-darkblue);
}

/* Active-company highlight — used on the company-detail Case studies tab
   to bold the pill that matches the company being viewed. */
.cs-company-pill--active {
    background: color-mix(in srgb, var(--ae-darkblue) 10%, transparent);
    color: var(--ae-darkblue);
    font-weight: 700;
}


/* === 10. SUPPLY-CHAIN LINK BADGE === */

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sc-badge .sc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.sc-badge-confirmed {
    background: var(--ae-darkblue);
    color: var(--white);
    border-color: var(--ae-darkblue);
}
.sc-badge-confirmed .sc-dot { background: var(--white); }

.sc-badge-probable {
    background: color-mix(in srgb, var(--ae-darkblue) 15%, var(--white));
    color: var(--ae-darkblue);
    border-color: color-mix(in srgb, var(--ae-darkblue) 25%, transparent);
}
.sc-badge-probable .sc-dot { background: var(--ae-darkblue); }

.sc-badge-potential {
    background: var(--card-bg);
    color: var(--color-badge-potential-text);
    border-color: var(--color-track-bg);
}
.sc-badge-potential .sc-dot {
    background: var(--color-badge-potential-dot);
}


/* === 11. PDF ICON === */

.cs-pdf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-track-bg);
    border-radius: 50%;
    background: var(--white);
    color: var(--ae-darkblue);
    font-size: 16px;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}

.cs-pdf-icon:hover {
    background: var(--ae-darkblue);
    color: var(--white);
    border-color: var(--ae-darkblue);
}

.cs-pdf-icon svg {
    display: block;
}


/* === 12. PER-COMMODITY DOT + GROUP STRIPE COLOURS === */
/* Used on the /company-detail Case studies tab (case_studies.html
   sets these via inline style.setProperty on the case-studies page,
   so they only need a static map on company-detail). */
.cs-group-commodity-dot[data-commodity="cattle"]    { background: var(--commodity-cattle); }
.cs-group-commodity-dot[data-commodity="cocoa"]     { background: var(--commodity-cocoa); }
.cs-group-commodity-dot[data-commodity="coffee"]    { background: var(--commodity-coffee); }
.cs-group-commodity-dot[data-commodity="corn"]      { background: var(--commodity-corn); }
.cs-group-commodity-dot[data-commodity="cotton"]    { background: var(--commodity-cotton); }
.cs-group-commodity-dot[data-commodity="palm"]      { background: var(--commodity-palm); }
.cs-group-commodity-dot[data-commodity="palm-oil"]  { background: var(--commodity-palm); }
.cs-group-commodity-dot[data-commodity="poultry"]   { background: var(--commodity-poultry); }
.cs-group-commodity-dot[data-commodity="rubber"]    { background: var(--commodity-rubber); }
.cs-group-commodity-dot[data-commodity="soy"]       { background: var(--commodity-soy); }
.cs-group-commodity-dot[data-commodity="wood"]      { background: var(--commodity-wood); }
.cs-group-commodity-dot[data-commodity="timber"]    { background: var(--commodity-wood); }

.cc-table__group--commodity[data-commodity="cattle"]    { --group-color: var(--commodity-cattle); }
.cc-table__group--commodity[data-commodity="cocoa"]     { --group-color: var(--commodity-cocoa); }
.cc-table__group--commodity[data-commodity="coffee"]    { --group-color: var(--commodity-coffee); }
.cc-table__group--commodity[data-commodity="corn"]      { --group-color: var(--commodity-corn); }
.cc-table__group--commodity[data-commodity="cotton"]    { --group-color: var(--commodity-cotton); }
.cc-table__group--commodity[data-commodity="palm"]      { --group-color: var(--commodity-palm); }
.cc-table__group--commodity[data-commodity="palm-oil"]  { --group-color: var(--commodity-palm); }
.cc-table__group--commodity[data-commodity="poultry"]   { --group-color: var(--commodity-poultry); }
.cc-table__group--commodity[data-commodity="rubber"]    { --group-color: var(--commodity-rubber); }
.cc-table__group--commodity[data-commodity="soy"]       { --group-color: var(--commodity-soy); }
.cc-table__group--commodity[data-commodity="wood"]      { --group-color: var(--commodity-wood); }
.cc-table__group--commodity[data-commodity="timber"]    { --group-color: var(--commodity-wood); }


/* === RESPONSIVE === */

/* ≤ 1200px — tighter table-row grid. */
@media (max-width: 1200px) {
    .cc-table__head,
    .cc-table__row {
        grid-template-columns: 1.8fr 95px 1.6fr 90px 95px 90px 110px 40px;
        gap: 10px;
    }
}

/* 768–1200px on company-detail — drop the Clearance period column.
   Re-allocate its slot to the property + linked-companies columns. */
@media (max-width: 1200px) and (min-width: 768px) {
    body.page-company-detail .cc-table--case-studies .cs-col-clearance {
        display: none;
    }
    body.page-company-detail .cc-table--case-studies .cc-table__head,
    body.page-company-detail .cc-table--case-studies .cc-table__row {
        grid-template-columns: 2fr 95px 1.8fr 90px 90px 110px 40px;
    }
}

/* 768–900px on the case-studies page — same column drop, narrower
   trigger because the page comfortably fits all eight cols above 900px. */
@media (max-width: 900px) and (min-width: 768px) {
    body.page-case-studies .cc-table--case-studies .cs-col-clearance {
        display: none;
    }
    body.page-case-studies .cc-table--case-studies .cc-table__head,
    body.page-case-studies .cc-table--case-studies .cc-table__row {
        grid-template-columns: 2fr 95px 1.8fr 90px 90px 110px 40px;
    }
}

/* sm  ≤ 767px — horizontal-scroll inside .cc-table-scroll. */
@media (max-width: 767px) {
    .cc-table-card .cc-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cc-table__head,
    .cc-table__row {
        min-width: 980px;
    }
}