/* Source: Assign.cshtml */
:root {
    --ph-bg: #f8f9fa;
    --ph-card: #ffffff;
    --ph-border: #e9ecef;
    --ph-border-soft: #f1f3f5;
    --ph-text: #333333;
    --ph-muted: #6c757d;
    --ph-gold: #c9a227;
    --ph-gold-dark: #b38f4a;
    --ph-green: #57b56d;
    --ph-yellow: #e2ab2f;
    --ph-red: #eb5a5a;
    --ph-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --ph-radius: 10px;
}

.body-content .container-fluid {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

    .body-content .container-fluid > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        .body-content .container-fluid > .row > [class*="col-"] {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

            .body-content .container-fluid > .row > [class*="col-"]:first-child {
                padding-left: 0 !important;
            }

            .body-content .container-fluid > .row > [class*="col-"]:last-child {
                padding-right: 0 !important;
            }

/* ========== LEFT PANEL ========== */
.ph-assignee-panel {
    background: var(--ph-card);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow);
    position: sticky;
    top: 90px;
    overflow: hidden;
}

.ph-assignee-top {
    padding: 18px 18px 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--ph-border-soft);
}

.ph-assignee-avatar {
    width: 76px;
    height: 76px;
    border-radius: 15px;
    background: #f2f1ee;
    border: 1px solid var(--ph-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #bbb;
    overflow: hidden;
    position: relative;
}

    .ph-assignee-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

.ph-assignee-info-block {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.ph-ai-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}

.ph-ai-label {
    text-transform: capitalize;
    width: 46px;
    flex-shrink: 0;
}

.ph-ai-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-ai-name {
    font-weight: 800;
    color: #1f1d1a;
}

    .ph-ai-name a {
        color: inherit;
        text-decoration: none;
    }

        .ph-ai-name a:hover {
            color: var(--ph-gold);
        }

.ph-gender-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    background: #f3f0ea;
    border: 1px solid #ece6dc;
    border-radius: 999px;
    color: #6e665a;
    font-size: 11px;
    font-weight: 700;
}

.ph-note-btn {
    background: #fffdf9;
    border: 1px solid #e5dac8;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ph-gold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

    .ph-note-btn:hover {
        background: #fdf5e8;
        border-color: var(--ph-gold);
        color: var(--ph-gold-dark);
    }

.ph-assignee-table-wrap {
    padding: 12px;
    overflow-y: auto;
}

/* ========== CANDIDATE COLUMN (left sidebar) ========== */
.ph-cand-panel {
    background: var(--ph-card);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow);
    position: sticky;
    top: 90px;
    overflow: hidden;
    margin-bottom: 24px;
}

.ph-cand-head {
    display: flex;
    gap: 14px;
    padding: 18px 18px 0px;
}

.ph-cand-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f2f1ee;
    border: 1px solid var(--ph-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #bbb;
    overflow: hidden;
    position: relative;
}

    .ph-cand-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

.ph-cand-headinfo {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.ph-cand-name {
    display: block;
    font-weight: 800;
    font-size: 17px;
    color: #1f1d1a;
    text-decoration: none;
    line-height: 1.25;
    margin-bottom: 6px;
}

    .ph-cand-name:hover {
        color: var(--ph-gold);
        text-decoration: none;
    }

.ph-cand-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
}

.ph-cand-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ph-muted);
    min-width: 0;
}

    .ph-cand-meta-item i {
        width: 13px;
        text-align: center;
        color: #b0a894;
        flex-shrink: 0;
    }

/* Tabs */
.ph-cand-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px;
    border-bottom: 1px solid var(--ph-border);
}

.ph-cand-tab {
    position: relative;
    background: none;
    border: none;
    padding: 12px 8px;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ph-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease;
}

    .ph-cand-tab:hover {
        color: #3a352e;
    }

    .ph-cand-tab.is-active {
        color: var(--ph-gold-dark);
        border-bottom-color: var(--ph-gold);
    }

.ph-cand-tabcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 3px;
    border-radius: 999px;
    background: #f0ebe0;
    color: #8b6c2f;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

.ph-cand-tab.is-active .ph-cand-tabcount {
    background: #f3e6c9;
}

/* Panes */
.ph-cand-pane {
    display: none;
    padding: 16px 18px 18px;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}

    .ph-cand-pane.is-active {
        display: block;
    }

.ph-cand-section-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #211e19;
    margin: 4px 0 10px;
}

.ph-cand-list + .ph-cand-section-title {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ph-border-soft);
}

.ph-cand-list {
    display: flex;
    flex-direction: column;
}

.ph-cand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--ph-border-soft);
}

    .ph-cand-row:last-child {
        border-bottom: none;
    }

.ph-cand-ico {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
    color: #b0a894;
    font-size: 13px;
}

.ph-cand-label {
    flex: 0 0 92px;
    font-size: 12.5px;
    color: var(--ph-muted);
}

.ph-cand-val {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #2a2721;
    text-align: right;
    word-wrap: break-word;
}

    .ph-cand-val .label-value {
        font-weight: 500;
    }

/* "N selected" chip shown in a candidate value cell (e.g. Ethnicity with >2 items).
   Opens a modal listing the full set. */
.ph-cand-morelink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #e5dac8;
    background: #fffdf9;
    color: var(--ph-gold-dark);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .ph-cand-morelink:hover {
        background: #fdf5e8;
        border-color: var(--ph-gold);
    }

    .ph-cand-morelink i {
        font-size: 11px;
    }

/* Full-ethnicity modal list. */
.ph-eth-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .ph-eth-list li {
        padding: 8px 12px;
        border: 1px solid var(--ph-border);
        border-radius: 8px;
        background: #fbfaf7;
        font-size: 13px;
        color: #2a2721;
    }

/* Page header rendered at the top of the right column (title + match legend),
   so the left candidate column can start from the very top of the page. */
.ph-assign-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    min-height: 40px;
}

    .ph-assign-pagehead .page-title {
        color: #3e3d3a !important;
        font-family: "Poppins", sans-serif !important;
        font-weight: 700;
        font-size: 24px !important;
        text-shadow: none !important;
        margin-bottom: 0;
        margin-top: 0;
    }

/* ========== RESULTS BAR ========== */
.ph-results-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 10px;
    flex-wrap: wrap;
}

.ph-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* Legend rendered in the page header actions area (top-right): compact, no auto margin. */
.ph-legend--header {
    margin-left: 0;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ph-text);
}

.ph-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
}

.ph-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid;
    display: inline-block;
    flex-shrink: 0;
}

    .ph-legend-dot.green {
        border-color: var(--ph-green);
        background: rgba(87, 181, 109, 0.14);
    }

    .ph-legend-dot.yellow {
        border-color: var(--ph-yellow);
        background: rgba(226, 171, 47, 0.14);
    }

    .ph-legend-dot.red {
        border-color: var(--ph-red);
        background: rgba(235, 90, 90, 0.12);
    }

/* ========== RESULTS TABLE ========== */
#ph-results-section {
    position: relative;
}

    #ph-results-section.is-loading {
        min-height: 200px;
        pointer-events: none;
    }

        #ph-results-section.is-loading > :not(.ph-results-spinner) {
            opacity: 0.4;
        }

.ph-results-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.ph-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid #ece4d3;
    border-top-color: var(--ph-gold);
    border-radius: 50%;
    animation: ph-spin 0.7s linear infinite;
}

@keyframes ph-spin {
    to {
        transform: rotate(360deg);
    }
}

.ph-results-tablewrap {
    background: var(--ph-card);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow);
    overflow-x: auto;
}

/* Spacing between the results (table + pager) and the page footer. */
#ph-results-inner {
    margin-bottom: 32px;
}

.ph-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .ph-results-table thead th {
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--ph-muted);
        padding: 14px 16px;
        border-bottom: 1px solid var(--ph-border);
        background: #fbfaf7;
        white-space: nowrap;
    }

    .ph-results-table tbody td {
        padding: 16px;
        border-bottom: 1px solid var(--ph-border-soft);
        vertical-align: middle;
    }

    /* Vertical dividers between the columns. */
    .ph-results-table thead th:not(:last-child),
    .ph-results-table tbody td:not(:last-child) {
        border-right: 1px solid var(--ph-border-soft);
    }

    .ph-results-table tbody tr:last-child td {
        border-bottom: none;
    }

    .ph-results-table tbody tr {
        transition: background 0.12s ease;
    }

        .ph-results-table tbody tr:hover {
            background: #fdfaf5;
        }

/* Rank cell + medals for the top 3. */
.ph-rt-rank {
    width: 64px;
    text-align: center;
}

.ph-rank-num {
    font-weight: 700;
    color: var(--ph-muted);
}

.ph-rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 34px;
    border-radius: 6px 6px 4px 4px;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.12);
}

.ph-rank-medal--1 {
    background: linear-gradient(180deg, #e9c760, #cf9f2b);
}

.ph-rank-medal--2 {
    background: linear-gradient(180deg, #cfd3d8, #a7adb5);
}

.ph-rank-medal--3 {
    background: linear-gradient(180deg, #e0a874, #bd7d42);
}

/* Candidate cell. */
.ph-rt-cand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.ph-rt-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f2f1ee;
    border: 1px solid var(--ph-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #c8c2b8;
    overflow: hidden;
    position: relative;
}

    .ph-rt-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

.ph-rt-candinfo {
    min-width: 0;
}

.ph-rt-namerow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.ph-rt-name {
    font-weight: 700;
    font-size: 15px;
    color: #211e19;
    text-decoration: none;
}

    .ph-rt-name:hover {
        color: var(--ph-gold);
        text-decoration: none;
    }

.ph-rt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ph-muted);
    line-height: 1.7;
}

    .ph-rt-meta i {
        width: 12px;
        text-align: center;
        color: #b0a894;
        flex-shrink: 0;
        font-size: 11px;
    }

/* Score cell: percentage on top, coloured match label underneath — centered. */
.ph-rt-score {
    white-space: nowrap;
    text-align: center;
}

.ph-results-table thead th.ph-rt-score {
    text-align: center;
}

.ph-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ph-score-pct {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

.ph-score-label {
    font-size: 12.5px;
    font-weight: 500;
}

.ph-score.high .ph-score-pct,
.ph-score.high .ph-score-label {
    color: #2f8f46;
}

.ph-score.medium .ph-score-pct,
.ph-score.medium .ph-score-label {
    color: #b0790f;
}

.ph-score.low .ph-score-pct,
.ph-score.low .ph-score-label {
    color: #d64545;
}

/* Concerns cell. */
.ph-rt-concerns {
    min-width: 150px;
}

.ph-concern-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.ph-concern {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #5b544a;
    text-transform: capitalize;
}

/* Same look as the legend dots: outlined circle with a tinted fill. */
.ph-concern-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid;
    flex-shrink: 0;
}

.ph-concern-dot--yellow {
    border-color: var(--ph-yellow);
    background: rgba(226, 171, 47, 0.14);
}

.ph-concern-dot--red {
    border-color: var(--ph-red);
    background: rgba(235, 90, 90, 0.12);
}

.ph-concern-dot--gray {
    border-color: #9aa0a6;
    background: rgba(154, 160, 166, 0.16);
}

.ph-concern-more {
    background: none;
    border: none;
    padding: 0;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ph-gold-dark);
    cursor: pointer;
}

    .ph-concern-more:hover {
        text-decoration: underline;
    }

.ph-rt-noconcern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3f7a4f;
}

    .ph-rt-noconcern i {
        color: var(--ph-green);
    }

/* Actions cell: stacked Assign + Compare buttons of equal size. */
.ph-rt-actions {
    width: 1%;
    white-space: nowrap;
}

.ph-rt-actionbtns {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 150px;
}

    .ph-rt-actionbtns .ph-assign-btn,
    .ph-rt-actionbtns .ph-compare-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        margin: 0;
        padding: 7px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .ph-rt-actionbtns .ph-assign-btn i,
    .ph-rt-actionbtns .ph-compare-btn i {
        font-size: 12px;
    }

/* Concerns modal: a touch wider than the default dialog. */
.ph-concerns-modal .modal-dialog {
    max-width: 560px;
    width: auto;
}

/* Concerns modal list. */
.ph-concern-modal-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ph-concern-modal-list li {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        border: 1px solid var(--ph-border);
        border-radius: 8px;
        background: #fbfaf7;
        font-size: 13px;
        color: #2a2721;
    }

/* Client-side pagination bar — sits inside the table card, divided from the rows. */
.ph-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-top: 1px solid var(--ph-border-soft);
    background: #fbfaf7;
}

.ph-pg-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ph-pg-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ph-muted);
}

.ph-pg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--ph-border);
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ph-text);
    cursor: pointer;
    transition: all 0.12s ease;
}

    .ph-pg-btn:hover:not(:disabled):not(.is-active) {
        border-color: var(--ph-gold);
        color: var(--ph-gold-dark);
    }

    .ph-pg-btn.is-active {
        background: var(--ph-gold);
        border-color: var(--ph-gold);
        color: #fff;
    }

    .ph-pg-btn:disabled {
        opacity: 0.45;
        cursor: default;
    }

.ph-pg-ellipsis {
    padding: 0 4px;
    color: var(--ph-muted);
}

.ph-pg-perpage {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ph-pg-size {
    height: 34px;
    border: 1px solid var(--ph-border);
    border-radius: 8px;
    padding: 0 8px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

/* ========== PROFILE CARD ========== */
.ph-profile-card {
    background: var(--ph-card);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-shadow);
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.16s ease;
}

    .ph-profile-card:hover {
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

.ph-profile-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px 14px;
}

.ph-profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: #f2f1ee;
    border: 1px solid var(--ph-border);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #c8c2b8;
    position: relative;
}

    .ph-profile-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

.ph-profile-main {
    flex: 1;
    min-width: 0;
}

.ph-profile-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}

.ph-profile-name {
    font-weight: 800;
    font-size: 16px;
    color: #211e19;
    text-decoration: none;
    line-height: 1.2;
}

    .ph-profile-name:hover {
        color: var(--ph-gold);
        text-decoration: none;
    }

.ph-grades-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(115px, 1fr));
    gap: 7px 18px;
}

.ph-grade-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5b544a;
    white-space: nowrap;
    min-width: 0;
}

    .ph-grade-item i {
        font-size: 13px;
        flex-shrink: 0;
    }

        .ph-grade-item i.text-success {
            color: var(--ph-green) !important;
        }

        .ph-grade-item i.text-warning {
            color: var(--ph-yellow) !important;
        }

        .ph-grade-item i.text-danger {
            color: var(--ph-red) !important;
        }

/* ========== SCORE RING ========== */
.ph-grade-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 4px;
}

.ph-grade-ring {
    --score: 0;
    --ring-color: var(--ph-red);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), #ece7df 0);
    flex-shrink: 0;
}

    .ph-grade-ring::before {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        background: #fff;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03);
    }

    .ph-grade-ring span {
        position: relative;
        z-index: 1;
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
    }

    .ph-grade-ring.high {
        --ring-color: var(--ph-green);
    }

    .ph-grade-ring.medium {
        --ring-color: var(--ph-yellow);
    }

    .ph-grade-ring.low {
        --ring-color: var(--ph-red);
    }

    .ph-grade-ring.high span {
        color: var(--ph-green);
    }

    .ph-grade-ring.medium span {
        color: #be8918;
    }

    .ph-grade-ring.low span {
        color: var(--ph-red);
    }

.ph-grade-text {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

    .ph-grade-text.high {
        color: var(--ph-green);
    }

    .ph-grade-text.medium {
        color: #be8918;
    }

    .ph-grade-text.low {
        color: var(--ph-red);
    }

/* ========== COMPACT CARD ROW (name + mismatch notes | score pill + actions) ========== */
.ph-profile-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}

/* Mismatch / partial-match notes (or a single "Matches all criteria" note). */
.ph-match-notes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}

.ph-match-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

    .ph-match-note .ph-note-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

.ph-match-note--red {
    color: #9b4a4a;
}

    .ph-match-note--red .ph-note-dot {
        background: var(--ph-red);
    }

.ph-match-note--yellow {
    color: #8a6a1f;
}

    .ph-match-note--yellow .ph-note-dot {
        background: var(--ph-yellow);
    }

.ph-match-note--green {
    color: #3f7a4f;
}

    .ph-match-note--green .ph-note-dot {
        background: var(--ph-green);
    }

/* Right-side action group. */
.ph-profile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Score pill: "<score> <label>" tinted by match strength. */
.ph-match-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.ph-match-pill-score {
    font-size: 17px;
    font-weight: 800;
}

.ph-match-pill.high {
    background: rgba(87, 181, 109, 0.14);
    color: #2f8f46;
}

.ph-match-pill.medium {
    background: rgba(226, 171, 47, 0.16);
    color: #b0790f;
}

.ph-match-pill.low {
    background: rgba(235, 90, 90, 0.12);
    color: #d64545;
}

/* Outlined Compare button (behaviour built next). */
.ph-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--ph-border);
    background: #fff;
    color: var(--ph-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

    .ph-compare-btn:hover {
        border-color: var(--ph-gold);
        color: var(--ph-gold-dark);
    }

/* Assign button in the inline action row (overrides the full-width footer variant). */
.ph-assign-btn--inline {
    flex: 0 0 auto;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ========== FOOTER ========== */
.ph-profile-card-footer {
    border-top: 1px solid var(--ph-border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
}

.ph-view-more-btn {
    background: #fff;
    border: 1px solid #ddd4c7;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #5b554c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

    .ph-view-more-btn:hover {
        background: #faf8f3;
        border-color: #cfc4b2;
        color: #2e2b28;
        text-decoration: none;
    }

.ph-assign-btn {
    background: var(--ph-gold);
    border: 1px solid var(--ph-gold);
    border-radius: 11px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex: 1;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.15s ease;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

    .ph-assign-btn:hover {
        background: var(--ph-gold-dark);
        border-color: var(--ph-gold-dark);
        color: #fff;
        text-decoration: none;
    }

.ph-profile-detail {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--ph-border-soft);
    background: #fff;
}

.badge-expired {
    background: #ffdce0 !important;
    color: #c74b59 !important;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 700;
}

.badge-negative {
    background: #f0ddff !important;
    color: #8830cf !important;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 700;
}

.badge-progress {
    background: #fff0cf !important;
    color: #b97b00 !important;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 700;
}

.badge-positive {
    background: #dff5e6 !important;
    color: #238744 !important;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 700;
}

.badge-nonmem {
    background: #ddeafe !important;
    color: #2968c8 !important;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 700;
}

.ph-chev-icon {
    transition: transform 0.18s ease;
    display: inline-block;
}

/* ========== NOTES MODAL ========== */
.ph-note-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ph-note-list-item {
    border: 1px solid #eee5d7;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fffdf9;
    margin-bottom: 10px;
}

    .ph-note-list-item:last-child {
        margin-bottom: 0;
    }

.ph-note-list-title {
    font-size: 12px;
    font-weight: 800;
    color: #8b6c2f;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.ph-note-list-text {
    font-size: 13px;
    line-height: 1.7;
    color: #403a31;
    white-space: pre-line;
}

/* ========== COMPARE MODAL ========== */
.ph-compare-modal .modal-dialog {
    max-width: 1040px;
    width: auto;
}

.ph-compare-modal .modal-content {
    border: none;
    border-radius: 14px;
}

.ph-cmp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ph-border-soft);
    padding: 16px 20px;
}

.ph-cmp-people {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    flex: 1;
}

.ph-cmp-person-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ph-cmp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f2f1ee;
    border: 1px solid var(--ph-border);
    color: #c8c2b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

    .ph-cmp-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

.ph-cmp-nameblock {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ph-cmp-name {
    font-weight: 800;
    font-size: 16px;
    color: #1f1d1a;
    line-height: 1.2;
}

.ph-cmp-role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ph-muted);
}

/* Score badge between the two people. */
.ph-cmp-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 16px;
    border-radius: 12px;
    line-height: 1.1;
    flex-shrink: 0;
}

.ph-cmp-score-pct {
    font-size: 20px;
    font-weight: 800;
}

.ph-cmp-score-label {
    font-size: 11px;
    font-weight: 700;
}

.ph-cmp-score.high {
    background: rgba(87, 181, 109, 0.14);
    color: #2f8f46;
}

.ph-cmp-score.medium {
    background: rgba(226, 171, 47, 0.16);
    color: #b0790f;
}

.ph-cmp-score.low {
    background: rgba(235, 90, 90, 0.12);
    color: #d64545;
}

.ph-cmp-body {
    padding: 0;
    max-height: 62vh;
    overflow-y: auto;
}

.ph-cmp-table {
    width: 100%;
    border-collapse: collapse;
}

    .ph-cmp-table thead th {
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--ph-muted);
        padding: 12px 18px;
        border-bottom: 1px solid var(--ph-border);
        background: #fbfaf7;
        position: sticky;
        top: 0;
        z-index: 1;
        white-space: nowrap;
    }

    .ph-cmp-table tbody td {
        padding: 12px 18px;
        font-size: 13.5px;
        color: var(--ph-text);
        border-bottom: 1px solid var(--ph-border-soft);
        border-right: 1px solid var(--ph-border-soft);
        vertical-align: middle;
    }

    .ph-cmp-table tbody td:last-child {
        border-right: none;
    }

    .ph-cmp-table tbody tr:last-child td {
        border-bottom: none;
    }

.ph-cmp-field {
    color: #211e19;
    font-weight: 700;
    width: 130px;
    background: #fbfaf7;
}

/* Preference columns describe what each side wants -> muted + italic. */
.ph-cmp-pref {
    color: var(--ph-muted);
    font-style: italic;
}

/* PH-350: match-maker's Video-Screening note on a preference cell. Gold note icon;
   the note text is shown via the element's native title tooltip on hover/focus. */
.ph-cmp-note {
    display: inline-block;
    margin-left: 6px;
    color: var(--ph-gold-dark);
    cursor: pointer;
    font-style: normal;
    vertical-align: baseline;
}

    .ph-cmp-note > i {
        font-size: 12px;
    }

    .ph-cmp-note:hover,
    .ph-cmp-note:focus {
        color: var(--ph-gold);
        outline: none;
    }

.ph-cmp-info {
    font-weight: 600;
    color: #2a2721;
}

/* Clickable count chip for long background lists — click to expand the full list. */
.ph-cmp-more {
    font-style: normal;
}

.ph-cmp-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f3f0ea;
    border: 1px solid #e6ddcf;
    color: #6e5a2f;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: all 0.15s ease;
}

    .ph-cmp-count::-webkit-details-marker {
        display: none;
    }

    .ph-cmp-count:hover {
        background: #fdf5e8;
        border-color: var(--ph-gold);
        color: var(--ph-gold-dark);
    }

    .ph-cmp-count i {
        font-size: 11px;
    }

.ph-cmp-more[open] .ph-cmp-count {
    background: #fdf5e8;
    border-color: var(--ph-gold);
    color: var(--ph-gold-dark);
}

.ph-cmp-more-list {
    margin-top: 6px;
    font-style: normal;
    font-weight: 500;
    color: #403a31;
    line-height: 1.6;
}

/* "See More" toggle + the extra value-only rows it reveals. */
.ph-cmp-more-toggle-row td {
    padding: 0 !important;
    border-right: none !important;
    background: #fbfaf7;
}

.ph-cmp-seemore-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    background: none;
    border: none;
    color: var(--ph-gold-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .ph-cmp-seemore-btn:hover {
        color: var(--ph-gold);
    }

.ph-cmp-extra {
    display: none;
}

    .ph-cmp-extra.show {
        display: table-row-group;
    }

/* Per-half cell colours in the compare table (one direction each). */
.ph-cmp-cell--green {
    background: rgba(87, 181, 109, 0.10);
}

.ph-cmp-cell--yellow {
    background: rgba(226, 171, 47, 0.15);
}

.ph-cmp-cell--red {
    background: rgba(235, 90, 90, 0.11);
}

/* Row colours by compatibility (both-match / one-match / mismatch). */
.ph-cmp-row--green {
    background: rgba(87, 181, 109, 0.07);
}

.ph-cmp-row--yellow {
    background: rgba(226, 171, 47, 0.11);
}

    .ph-cmp-row--yellow .ph-cmp-field {
        color: #8a6a1f;
    }

.ph-cmp-row--red {
    background: rgba(235, 90, 90, 0.09);
}

    .ph-cmp-row--red .ph-cmp-field {
        color: #9b4a4a;
    }

/* Footer: right-aligned Close + Assign buttons. */
.ph-cmp-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--ph-border-soft);
}

.ph-cmp-close-btn {
    padding: 9px 20px;
    border-radius: 8px;
    border: 1px solid var(--ph-border);
    background: #fff;
    color: var(--ph-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .ph-cmp-close-btn:hover {
        background: #f6f4ef;
        border-color: #cfc4b2;
    }

.ph-cmp-assign-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 8px;
    border: 1px solid var(--ph-gold);
    background: var(--ph-gold);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .ph-cmp-assign-btn:hover {
        background: var(--ph-gold-dark);
        border-color: var(--ph-gold-dark);
    }

@media (max-width: 767px) {
    .ph-cmp-people {
        gap: 12px;
    }

        .ph-cmp-table thead th,
        .ph-cmp-table tbody td {
            padding: 10px 12px;
        }
}

.ph-empty-note {
    text-align: center;
    font-size: 13px;
    color: #8a857b;
    padding: 18px 10px;
    border: 1px dashed #e6ddcf;
    border-radius: 12px;
    background: #fcfbf8;
}

@media (max-width: 1199px) {
    .ph-grades-grid {
        grid-template-columns: repeat(3, minmax(105px, 1fr));
    }
}

@media (max-width: 991px) {
    .ph-profile-card-top {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ph-grade-badge {
        margin-left: auto;
    }

    .ph-grades-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }
}

@media (max-width: 767px) {
    .ph-assignee-top {
        flex-wrap: wrap;
    }

    .ph-profile-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ph-view-more-btn,
    .ph-assign-btn {
        width: 100%;
        justify-content: center;
    }

    .ph-grades-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        gap: 6px 12px;
    }
}

/* Source: SearchMatch.cshtml */
:root {
    --ph-gold: #b8944f;
    --ph-gold-dark: #a88342;
    --ph-white: #ffffff;
    --ph-radius: 14px;
}

/* Core Card Styles */
/* Page bar that opens the drawer and shows the active-filter chips. */
.ph-filterbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ph-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 22px;
    border: 1px solid var(--ph-gold);
    background: var(--ph-gold);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.12s, box-shadow 0.12s;
}

    .ph-filter-toggle-btn:hover {
        background: var(--ph-gold-dark);
        box-shadow: 0 2px 8px rgba(168, 131, 66, 0.3);
    }

    .ph-filter-toggle-btn i {
        font-size: 14px;
    }

.ph-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--ph-gold-dark);
    font-size: 12px;
    font-weight: 800;
}

/* White filter box: a small non-clickable header, the active-filter chips (bubbles),
   then a summary line ("N filters applied — edit" left, "Clear filters" right). */
.ph-filterbox {
    background: var(--ph-white);
    border: 1px solid #ececec;
    border-radius: var(--ph-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 16px 18px;
    margin-bottom: 16px;
}

/* Header: plain label with an icon (left) + the results count (right); not a button. */
.ph-filterbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.ph-filterbox-header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ph-filterbox-header i {
    color: var(--ph-gold);
    font-size: 14px;
}

/* Results count shown at the top-right of the Filters box header. */
.ph-filterbox-header .ph-results-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--ph-muted);
}

/* Quick search row: input + button to filter the result cards by name/email. */
.ph-filterbox-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ph-fb-search-field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

    .ph-fb-search-field i {
        position: absolute;
        left: 12px;
        color: var(--ph-muted);
        font-size: 13px;
        pointer-events: none;
    }

    .ph-fb-search-field input {
        width: 100%;
        height: 40px;
        padding: 0 12px 0 34px;
        border: 1px solid var(--ph-border);
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        background: #fff;
        transition: border-color 0.12s, box-shadow 0.12s;
    }

        .ph-fb-search-field input:focus {
            border-color: var(--ph-gold);
            box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12);
        }

.ph-fb-search-btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid var(--ph-gold);
    background: var(--ph-gold);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}

    .ph-fb-search-btn:hover {
        background: var(--ph-gold-dark);
        box-shadow: 0 2px 8px rgba(168, 131, 66, 0.3);
    }

/* Empty state shown when the quick search matches no result cards. */
.ph-qs-empty {
    text-align: center;
    color: var(--ph-muted);
    font-size: 14px;
    padding: 28px 0;
}

/* Summary line: always visible (it's how the drawer is opened). */
.ph-filterbox-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* "Filter" button: runs the search from the box (before the applied-filters summary). */
.ph-filterbox-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid var(--ph-gold);
    background: var(--ph-gold);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}

    .ph-filterbox-apply-btn:hover {
        background: var(--ph-gold-dark);
        box-shadow: 0 2px 8px rgba(168, 131, 66, 0.3);
    }

    .ph-filterbox-apply-btn i {
        font-size: 12px;
    }

.ph-filters-applied-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ph-gold-dark);
    text-decoration: none;
    cursor: pointer;
}

    .ph-filters-applied-link:hover {
        text-decoration: underline;
        color: var(--ph-gold-dark);
    }

    .ph-filters-applied-link i {
        color: var(--ph-gold);
        font-size: 13px;
    }

/* Bottom-right clear link. */
.ph-clear-filter-link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--ph-gold);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

    .ph-clear-filter-link:hover {
        text-decoration: underline;
        color: var(--ph-gold-dark);
    }

/* Backdrop + right slide-out drawer (wider than the Advanced Search drawer's 360px). */
.ph-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    z-index: 1059;
}

    .ph-filter-backdrop.open {
        opacity: 1;
        visibility: visible;
    }

.ph-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 480px;
    max-width: 95vw;
    background: #fff;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .ph-filter-drawer.open {
        transform: translateX(0);
    }

.ph-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eef0f2;
    flex: 0 0 auto;
}

.ph-filter-drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
}

    .ph-filter-drawer-close:hover {
        color: #e53935;
    }

/* The form fills the drawer so the scroll area grows and the footer stays pinned. */
.ph-filter-drawer #search-match-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.ph-no-scroll {
    overflow: hidden;
}

.ph-filter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #1a1a1a;
}

    .ph-filter-title i {
        color: var(--ph-gold);
        font-size: 14px;
    }

/* Chips Styles */
.ph-chips-row {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
}

.ph-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    font-weight: 400;
    color: #333;
}

.ph-chip-x {
    cursor: pointer;
    color: #bbb;
    font-size: 15px;
    font-weight: 700;
    background: transparent;
    border: 0;
    line-height: 1;
    padding: 0;
}

    .ph-chip-x:hover {
        color: #e53935;
    }

.ph-clear-all {
    font-size: 12px;
    font-weight: 700;
    color: var(--ph-gold);
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

/* Form & Accordion Styles */
.ph-filter-scroll {
    padding: 14px 18px 6px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.ph-acc-item {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #fff;
}

.ph-acc-head {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    outline: none !important;
}

/* Accordion title + applied-filter count badge (shown in the drawer). */
.ph-acc-title {
    display: inline-flex;
    align-items: center;
}

.ph-acc-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--ph-gold);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.ph-acc-chev {
    color: #ccc;
    transition: transform 0.18s ease;
}

.ph-acc-head[aria-expanded="true"] .ph-acc-chev {
    transform: rotate(180deg);
}

.ph-acc-body {
    padding: 12px 14px 14px;
    border-top: 1px solid #f5f5f5;
    background: #fafafa;
}

.ph-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #999;
    margin-bottom: 5px;
    text-transform: uppercase;
    display: block;
}

.ph-gap {
    height: 10px;
}

.ph-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ph-grid-2-tight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Fix for Bootstrap Select Inputs */
.ph-filter-drawer .form-control,
.ph-filter-drawer .bootstrap-select > .dropdown-toggle {
    height: 40px !important;
    border-radius: 8px !important;
    border: 1px solid #e8e8e8 !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

/* FIX: styling for "Select All" / "Deselect All" buttons in dropdown */
.bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.bootstrap-select .bs-actionsbox {
    padding: 8px !important;
    border-bottom: 1px solid #eee !important;
}

    .bootstrap-select .bs-actionsbox .btn-group {
        display: flex !important;
        gap: 4px !important;
    }

    .bootstrap-select .bs-actionsbox .btn {
        flex: 1 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #666 !important;
        padding: 5px 0 !important;
    }

/* Footer Styles (pinned to the bottom of the drawer) */
.ph-filter-footer {
    padding: 12px 18px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    flex: 0 0 auto;
}

.ph-btn-reset {
    background: transparent;
    border: 0;
    color: #e53935;
    font-weight: 700;
    cursor: pointer;
}

.ph-btn-search {
    background: var(--ph-gold);
    border: none;
    color: #fff;
    border-radius: 22px;
    padding: 9px 26px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ph-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #eeecf0;
    background: #fafafa;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
}

    .ph-check-label:hover {
        background: #f5f0f8;
        border-color: #d5c8e8;
    }

    .ph-check-label.is-checked {
        background: #f0eaf9;
        border-color: var(--ph-gold);
    }

.ph-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--ph-gold);
    cursor: pointer;
    flex-shrink: 0;
}

.ph-check-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #3a3530;
}

@media (max-width: 992px) {
    .ph-grid-2,
    .ph-grid-2-tight {
        grid-template-columns: 1fr;
    }
}

/* Source: MatchProfileTable.cshtml */
.match-specs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    color: #1f1f1f;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
    background: #fff;
}

    /* Header aligned to the standardized report tables (ph-ep-table): muted gray,
   weight 500, light divider. Spec sheet stays compact (no sort/paging). */
    .match-specs thead tr th {
        background: #fff;
        font-weight: 500;
        letter-spacing: .02em;
        color: #8a8f99;
        padding: 11px 12px;
        border-bottom: 1px solid #eef0f2;
        border-right: 1px solid #f1f3f5;
    }

        .match-specs thead tr th:last-child {
            border-right: 0;
        }

    .match-specs tbody tr {
        transition: background 0.12s ease;
    }

        .match-specs tbody tr:hover {
            background: #fdfaf5;
        }

    .match-specs tbody td {
        padding: 8px 12px;
        border-bottom: 1px solid #f1ede6;
        border-right: 1px solid #f1ede6;
        vertical-align: middle;
        line-height: 1.45;
        word-wrap: break-word;
    }

    .match-specs tbody tr:last-child td {
        border-bottom: 0;
    }

    .match-specs tbody td:last-child {
        border-right: 0;
    }

    .match-specs tbody td:first-child {
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
        width: 92px;
        background: #fbfaf7;
    }

    .match-specs tbody td:nth-child(2) {
    }

    .match-specs tbody td:nth-child(3) {
    }