/*
 * Applied search filter chips - simple row of soft pills, e.g.
 *   ( Task Participants: SANI KHATRA ⓧ ) ( Status: Today ⓧ ) ( Clear All ⓧ )
 * Used by assets/global/scripts/search_chips.js on every list page with a search, and by pages that
 * build their own chip bar (.active-filter-line / .maintenance-filter-summary use the same classes).
 * Selectors are prefixed with "html body" and sizes are set explicitly so older page / theme styles
 * (on b, span, line-height ...) cannot shrink the chips.
 */
html body .active-filter-line,
html body .maintenance-filter-summary {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 14px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body .active-filter-line {
    display: flex;
}

/* no heading in front of the chips */
html body .active-filter-line .filter-line-title {
    display: none;
}

html body .filter-chip,
html body .maintenance-filter-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: auto;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px 6px 14px;
    border: 0;
    border-radius: 999px;
    background: #eceef1;
    color: #1f2937;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

html body .filter-chip:hover,
html body .maintenance-filter-chip:hover {
    background: #e2e5e9;
}

/* label part: "Status:" */
html body .filter-chip b,
html body .maintenance-filter-chip strong {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #6b7280;
}

/* value part: "Today" - shown in full */
html body .filter-chip .filter-value,
html body .maintenance-filter-chip .filter-value {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #1f2937;
}

/*
 * Outlined circle-x icon. Drawn as a mask (not the "×" text character) so it looks the same and stays
 * centred in every font; the icon colour is the background colour.
 */
html body .filter-chip .remove-filter,
html body .maintenance-filter-chip .remove-filter,
html body .clear-filter-chip .remove-filter {
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 0 0 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.9'/%3E%3Cpath d='M5.7 5.7l4.6 4.6M10.3 5.7l-4.6 4.6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.9'/%3E%3Cpath d='M5.7 5.7l4.6 4.6M10.3 5.7l-4.6 4.6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    transition: background-color 0.15s ease;
}

html body .filter-chip .remove-filter,
html body .maintenance-filter-chip .remove-filter {
    background-color: #6b7280;
}

html body .filter-chip .remove-filter:hover,
html body .maintenance-filter-chip .remove-filter:hover {
    background-color: var(--color-red, #cf1d2a);
}

html body .clear-filter-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px 6px 14px;
    border: 0;
    border-radius: 999px;
    background: #2b3440;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

html body .clear-filter-chip:hover {
    background: #1b222b;
}

html body .clear-filter-chip .remove-filter {
    background-color: #fff;
}

@media (max-width: 575px) {
    html body .filter-chip,
    html body .maintenance-filter-chip {
        white-space: normal;
    }
}