/**
 * LPD DataTable Accordion Card Styles
 *
 * Self-scoped accordion styling for the card LPD_DataTable::printTable()
 * emits (wrapper.view.php: .card.lpd-framework-table > a.title > i.fa-angle-right).
 *
 * The legacy accordion rules in css/main.css require an .accordion_common
 * ancestor, which legacy pages and the ?fw=report routes get from the
 * page-header chrome (Dashboard::printPageHeader / LPD_Dashboard::getPageHeader).
 * Account, Dashboard, Admin, and Author framework views render content without
 * that wrapper, so this sheet scopes the same treatment to the component's own
 * wrapper class instead of an ancestor. The card outline is driven by
 * --lpd-framework-table-border and is off by default (see the rule below).
 *
 * Loaded framework-only from lib/view/layouts/zones/head.view.php (after
 * main.css) — never by legacy header.php/footer.php, so legacy rendering is
 * untouched. Token fallbacks: --lpd-* tokens resolve inside .account-view;
 * the fallback literals match the legacy main.css values elsewhere.
 */

/* Card outline around the expandable area.
 *
 * OFF by default. --lpd-framework-table-border is intentionally not declared
 * anywhere, so the `none` fallback applies and every framework accordion card
 * renders borderless. To bring the outline back, declare the property once --
 * on this rule, or on any ancestor to scope it to one surface:
 *
 *     --lpd-framework-table-border: 1px solid var( --lpd-panel-border, #E3E6EA );
 *
 * That single declaration is the whole toggle; do not reintroduce per-view
 * border overrides to compensate. */
.card.lpd-framework-table {
    border: var( --lpd-framework-table-border, none );
    border-radius: 4px;
    box-shadow: none;
    margin-bottom: 16px;
}

/* Accordion actuator title bar (mirrors .accordion_common .card .title) */
.card.lpd-framework-table > .title {
    display: block;
    position: relative;
    padding: 15px 20px;
    color: var( --lpd-charcoal, #2b2a2b );
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
}

/* Angle actuator icon — the FontAwesome kit may render the <i> as-is (webfont)
   or replace it with an <svg>, so both are targeted, matching main.css. */
.card.lpd-framework-table > .title i,
.card.lpd-framework-table > .title svg {
    font-size: 21px;
    position: absolute;
    left: 4px;
    vertical-align: middle;
    color: var( --lpd-gray, #707070 );
    font-weight: 300;
    transition: all 300ms ease;
}

/* Rotate the actuator to point down while expanded */
.card.lpd-framework-table > .title[aria-expanded=true] i,
.card.lpd-framework-table > .title[aria-expanded=true] svg {
    transform: rotate( 90deg );
}

/* Body typography (mirrors .accordion_common .card-body) */
.card.lpd-framework-table .card-body {
    font-size: 14px;
    line-height: 26px;
    padding: 10px 15px 10px 21px;
    font-weight: 400;
}

@media all and ( max-width: 600px ) {
    .card.lpd-framework-table > .title {
        font-size: 14px;
    }
}