/* =========================================================================
   Systems table enhancements  (INDUSTRY PAGES ONLY)
   - Filters moved to a horizontal bar on TOP (Tier + System)
   - Full-width table below, columns sized so more systems fit + smooth scroll
   - Uniform 5-line description with "Read More"
   Everything is scoped under .st-enh so it never touches the ERP comparison
   tool or the single-system view.
   ========================================================================= */

.st-enh {
    width: 100%;
}

/* ---- Top filter bar --------------------------------------------------- */
.st-filterbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 16px;
    box-sizing: border-box;
}
.st-filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.st-filter-group + .st-filter-group {
    border-top: 1px solid #ececec;
    padding-top: 12px;
}
.st-filter-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
/* Accordion arrow on the filter heading */
.st-filter-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #ea9244; /* pointing down = expanded */
    transition: transform 0.2s ease;
}
.st-filter-group.st-filter-collapsed .st-filter-arrow {
    transform: rotate(-90deg); /* pointing right = collapsed */
}
.st-filter-group.st-filter-collapsed .st-filter-body {
    display: none;
}
/* Collapsible body: "Select all" + chips live inside the accordion */
.st-filter-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 16px; /* align under the heading, past the arrow */
}
/* "Filter" title above all groups — master accordion toggle */
.st-filterbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #333;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2px;
    cursor: pointer;
    user-select: none;
}
.st-filterbar.st-filter-collapsed .st-filterbar-title {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.st-filterbar.st-filter-collapsed .st-filterbar-title .st-filter-arrow {
    transform: rotate(-90deg); /* pointing right = collapsed */
}
.st-filterbar.st-filter-collapsed .st-filter-group {
    display: none;
}
.st-filter-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #444;
}
.st-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
}
.st-select-all input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: #ea9244;
}
.st-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.st-chip {
    font-size: 13px;
    line-height: 1;
    padding: 7px 14px;
    border: 1px solid #d8d8d8;
    border-radius: 0px;
    background: #fff;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.st-chip:hover {
    border-color: #ea9244;
    color: #ea9244;
}
.st-chip.active {
    background: #ea9244;
    border-color: #ea9244;
    color: #fff;
}
.st-chip.st-hidden-item {
    display: none;
}
.st-chip.st-hidden-item.st-shown {
    display: inline-block;
}
.st-show-more {
    font-size: 12px;
    font-weight: 600;
    color: #ea9244;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 7px 4px;
    white-space: nowrap;
}
/* Mobile <select> equivalents of the chips — hidden on desktop */
.st-select {
    display: none;
}

/* WPBakery full-width row that holds a systems table: replace the auto-computed
   side padding (which can be hundreds of px) with a 15px gutter so ALL of the
   row's content — heading, intro, filter and table — spans the full width. */
.st-vc-fullwidth-row {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ---- Search box (INDUSTRY PAGES) -------------------------------------
   Sits right under the "Filter" title and stays visible even when the bar
   is collapsed, so searching records is always one click away. */
.st-search {
    position: relative;
    display: flex;
    align-items: center;
}
.st-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 34px 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.st-search-input:focus {
    outline: none;
    border-color: #ea9244;
    box-shadow: 0 0 0 2px rgba(234, 146, 68, 0.2);
}
.st-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 22px;
    height: 22px;
    line-height: 20px;
    padding: 0;
    text-align: center;
    font-size: 18px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
}
.st-search.st-has-value .st-search-clear {
    display: block;
}
.st-search-clear:hover {
    color: #ea9244;
}

/* Section (row-group) filter chips — a plain wrap so they stay visible on
   mobile too (unlike .st-chips, which is swapped for a <select> there). */
.st-section-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* "No results" note shown when a search matches nothing */
.st-search-noresults {
    padding: 14px 16px;
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #a15a12;
    background: #fdf3ea;
    border: 1px solid #f2d4b3;
    border-radius: 6px;
}

/* ---- Full-width table: fit more systems + smoother scrolling ----------
   Scoped to .st-acc so it applies to BOTH the industry pages and the ERP
   comparison tool. */
.st-acc .systems-table-container {
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #ea9244 #f0f0f0;
    scroll-behavior: smooth;
}
.st-acc .systems-table {
    width: 100% !important;
}
.st-acc .systems-table th,
.st-acc .systems-table td {
    width: 175px !important;
    min-width: 175px !important;
}
.st-acc .systems-table th:first-child,
.st-acc .systems-table td:first-child {
    width: 230px !important;
    min-width: 230px !important;
}
.st-acc .systems-table-container::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.st-acc .systems-table-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 5px;
}
.st-acc .systems-table-container::-webkit-scrollbar-thumb {
    background: #ea9244;
    border-radius: 5px;
}

/* ---- ERP comparison tool only: break the table out edge-to-edge -------
   `.st-acc:not(.st-enh)` = the comparison wrapper (the industry wrapper also
   carries .st-enh, so it is excluded and keeps its normal in-column layout).
   The negative margins pull the block out to the full viewport width. */
 

/* ---- Collapsible sections (accordion on .title-row) -------------------
   Scoped to .st-acc so it applies to BOTH the industry pages and the ERP
   comparison tool. */
.st-acc .title-row th.st-acc-toggle {
    cursor: pointer;
    user-select: none;
}
.st-acc .st-acc-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    vertical-align: middle;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #ea9244; /* pointing down = expanded */
    transition: transform 0.2s ease;
}
.st-acc .title-row.st-collapsed .st-acc-arrow {
    transform: rotate(-90deg); /* pointing right = collapsed */
}

/* ---- Description: uniform 5-line clamp + Read More -------------------- */
.st-enh .description-box {
    position: relative;
}
.st-enh .description-content {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
}
.st-enh .description-content > *:first-child {
    margin-top: 0;
}
.st-enh .description-box.st-desc-open .description-content {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.st-enh a.read-more-btn {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ea9244;
    cursor: pointer;
    text-decoration: underline;
}
.st-enh a.read-more-btn.st-hide {
    display: none;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 600px) {
    .st-filter-group {
        flex-direction: column;
        gap: 8px;
    }
    .st-filter-head {
        min-width: 0;
        padding-top: 0;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    /* On mobile swap the chip lists for easy-to-manage dropdowns */
    .st-chips,
    .st-show-more {
        display: none;
    }
    .st-select {
        display: block;
        width: 100%;
        max-width: 100%;
        max-height: 180px;
        padding: 6px;
        border: 1px solid #d8d8d8;
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.4;
        background: #fff;
        color: #333;
        box-sizing: border-box;
    }
    .st-select option {
        padding: 6px 4px;
    }
    .st-select option:checked {
        background: #ea9244 linear-gradient(0deg, #ea9244 0%, #ea9244 100%);
        color: #fff;
    }
}