/* ============================================================
   facility-matching.css
   ONE-87190 — Facility match classification tier styles.
   Shared across FacilitySearchResults.aspx and FacilityDetails.aspx.
   ============================================================ */

/* === Tier color palette ===
   Change these to retheme every card border, badge, section, and header at once. */
:root {
    /* Best (gold) */
    --tier-best-primary:        #d4a017;
    --tier-best-soft-bg:        #fff8e1;
    --tier-best-text:           #8d6e00;
    --tier-best-badge-grad-from:#f9e979;
    --tier-best-badge-grad-to:  #d4a017;
    --tier-best-badge-text:     #5a4200;

    /* Partial (bronze) */
    --tier-partial-primary:        #b87333;
    --tier-partial-soft-bg:        #f5f0eb;
    --tier-partial-text:           #7a5c3a;
    --tier-partial-badge-grad-from:#ecd9c4;
    --tier-partial-badge-grad-to:  #c98246;
    --tier-partial-badge-text:     #3a2010;

    /* Other (neutral) */
    --tier-other-primary:    #999999;
    --tier-other-soft-bg:    #f0f0f0;
    --tier-other-text:       #666666;
    --tier-other-badge-bg:   #f2f2f2;
    --tier-other-badge-text: #595959;
}

/* === Card tier borders === */
.card-best-match {
    border: 2px solid var(--tier-best-primary);
}

.card-partial-match {
    border: 2px solid var(--tier-partial-primary);
}

.card-other-facility {
    border: 2px solid var(--tier-other-primary);
}

.card-other-facility .swiper-container,
.card-other-facility .image-wrapper {
    opacity: 0.8;
    filter: grayscale(40%);
}

/* === Match badge (inline on card) === */
.match-badge-container {
    margin-bottom: 6px;
}

.match-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.match-badge-best {
    background: linear-gradient(135deg, var(--tier-best-badge-grad-from), var(--tier-best-badge-grad-to));
    color: var(--tier-best-badge-text);
}

.match-badge-partial {
    background: linear-gradient(135deg, var(--tier-partial-badge-grad-from), var(--tier-partial-badge-grad-to));
    color: var(--tier-partial-badge-text);
}

.match-badge-other {
    background: var(--tier-other-badge-bg);
    color: var(--tier-other-badge-text);
}

/* === Mismatch reasons list === */
.mismatch-reasons {
    font-size: 12px;
    color: #767676;
    padding: 4px 0;
}

.mismatch-reasons .reason {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
}

.mismatch-reasons .reason i {
    color: #c0392b;
    font-size: 12px;
}

/* === View Details button (Other tier) === */
.btn-view-details {
    background-color: #e0e0e0 !important;
    border-color: #cccccc !important;
    color: #333333 !important;
}

/* === Section headers and dividers === */
.results-section-header {
    padding: 10px 20px;
    margin: 10px 0 15px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.results-section-header .count-badge {
    background: #eee;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 13px;
}

.section-divider {
    border-top: 1px solid #ddd;
    margin: 5px 15px 0 15px;
    width: 100%;
}

/* === Three-section layout (FacilityDetails Site List) === */
.match-section {
    border: 2px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
}

.best-matches-section    { border-color: var(--tier-best-primary); }
.partial-matches-section { border-color: var(--tier-partial-primary); }
.other-sites-section     { border-color: var(--tier-other-primary); }

.section-header {
    padding: 8px 12px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.best-header    { background-color: var(--tier-best-soft-bg);    color: var(--tier-best-text); }
.partial-header { background-color: var(--tier-partial-soft-bg); color: var(--tier-partial-text); }
.other-header   { background-color: var(--tier-other-soft-bg);   color: var(--tier-other-text); }

/* === Site dropdown styled overlay ===
   Rendered by enhanceSiteDropdown() in FacilityDetails.aspx — overlays a
   styled listbox on top of <select.ddl-units> so the native AutoPostBack
   + onchange="Load()" wiring keeps working. */
.ddl-units-wrap { position: relative; clear: both; }
.ddl-units-wrap select.ddl-units { display: none; }
.ddl-units-toggle {
    position: relative; width: 100%; min-height: 34px; padding: 6px 28px 6px 12px;
    text-align: left; background: #fff; cursor: pointer;
    border: 1px solid #ccc; border-radius: 4px;
}
.ddl-units-toggle:focus { outline: 2px solid #66afe9; outline-offset: -2px; }
.ddl-units-toggle::after {
    content: ""; position: absolute; right: 12px; top: 50%; margin-top: -2px;
    border: 5px solid transparent; border-top-color: #555;
}
.ddl-units-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; display: none;
    max-height: 320px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0;
    background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}
.ddl-units-wrap.open .ddl-units-menu { display: block; }
/* Shared row grid: [badge 110px] [name + heart 1fr] */
.ddl-units-toggle .ddl-units-label,
.ddl-units-menu li {
    display: grid; grid-template-columns: 110px minmax(0, 1fr);
    align-items: center; gap: 10px; min-width: 0; overflow: hidden;
}
.ddl-units-menu li { list-style: none; padding: 6px 12px; cursor: pointer; }
.ddl-units-menu li:hover, .ddl-units-menu li.active { background-color: #f5f5f5; }
.ddl-units-menu li.placeholder { color: #777; font-style: italic; }
.ddl-units-menu .match-badge,
.ddl-units-toggle .match-badge { justify-self: start; }
.site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-name.placeholder { grid-column: 1 / -1; }
.ddl-name-heart { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ddl-fav-heart { color: #c0392b; font-size: 14px; line-height: 1; }

.section-count {
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

/* Fallback: classification not available — hide section chrome to render a flat list */
.match-section.flat-fallback {
    border: none;
}

.match-section.flat-fallback .section-header {
    display: none;
}

@media (max-width: 768px) {
    .section-header {
        position: sticky;
        top: 0;
        z-index: 10;
    }
}