/* Styles for index.php. */
:root {
    --directory-accent: #4dabf7;
    --directory-accent-rgb: 77, 171, 247;
}

body {
    margin: 0;
    padding: 0;
}


/* ============================
   Hero
============================ */

.directory-hero {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    padding: 8rem 0 7rem;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(var(--directory-accent-rgb), 0.22),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #101820 0%,
            #162532 55%,
            #16344a 100%
        );
}

.directory-hero::before {
    content: '';
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
    pointer-events: none;
}

.directory-hero .container {
    position: relative;
    z-index: 1;
}

.directory-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(var(--directory-accent-rgb), 0.5);
    border-radius: 999px;
    background: rgba(var(--directory-accent-rgb), 0.10);
    color: var(--directory-accent);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.hero-highlight {
    color: var(--directory-accent);
}

.hero-copy {
    max-width: 760px;
    color: rgba(255,255,255,0.80);
    line-height: 1.75;
}

.hero-points span {
    color: rgba(255,255,255,0.74);
    font-size: 0.95rem;
}

.hero-points i {
    color: var(--directory-accent);
}

.hero-directory-mark {
    width: 240px;
    height: 240px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #8ed0ff,
            #4dabf7 55%,
            #1971c2 100%
        );

    color: #fff;
    font-size: 7rem;

    box-shadow:
        0 30px 70px rgba(var(--directory-accent-rgb),0.28),
        inset 0 2px 10px rgba(255,255,255,0.25);
}


/* ============================
   Hero Search
============================ */

.hero-search-panel {

    padding: 1.15rem;

    border:
        1px solid
        rgba(255,255,255,0.14);

    border-radius:
        1rem;

    background:
        rgba(7, 17, 26, 0.58);

    box-shadow:
        0 18px 42px
        rgba(0,0,0,0.16);

    backdrop-filter:
        blur(10px);
}


.hero-search-label {

    color:
        rgba(255,255,255,0.82);

    font-weight:
        700;
}


.hero-search-panel .form-control,
.hero-search-panel .input-group-text {

    min-height:
        52px;

    background:
        rgba(255,255,255,0.96);

    color:
        #212529;

    border-color:
        rgba(255,255,255,0.24);
}


.hero-search-panel .form-control:focus {

    border-color:
        var(--directory-accent);

    box-shadow:
        0 0 0 0.25rem
        rgba(
            var(--directory-accent-rgb),
            0.20
        );
}


.hero-search-panel .form-control::placeholder {
    color: #7b8794;
    opacity: 1;
}

.hero-search-panel .input-group-text {
    color: #1f2933;
}


/* ============================
   Compact Results Hero
============================ */

.directory-hero-compact {
    min-height: 0;

    /*
     * The site navbar overlays the hero rather than taking up
     * normal document space. Include its ~70px height here,
     * plus comfortable visual clearance.
     */
    padding:
        calc(70px + 2.25rem)
        0
        4rem;
}

.directory-hero-compact .directory-badge {
    display: none;
}

.directory-hero-compact .container {
    max-width: 1140px;
}

.directory-hero-compact .hero-copy {
    max-width: 900px;
}

.directory-hero-compact .hero-search-panel {
    max-width: 1000px;
}

.directory-hero-compact .hero-sort-switch {
    max-width: 620px;
}

.directory-hero-compact + .city-statistics-notice {
    margin-top: -2rem;
}

.directory-hero-compact ~ .directory-results-overlap {
    margin-top: -2.5rem;
}

.directory-hero-compact + .city-statistics-notice + .directory-results-overlap {
    margin-top: 1.5rem;
}


.hero-search-panel
.bootstrap-select > .dropdown-toggle {

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    background:
        rgba(255,255,255,0.96) !important;

    color:
        #212529 !important;

    border-color:
        rgba(255,255,255,0.24) !important;
}


.bootstrap-select .dropdown-menu {

    background:
        var(--bs-body-bg);

    color:
        var(--bs-body-color);

    border-color:
        var(--bs-border-color);
}


.bootstrap-select .dropdown-item {

    color:
        var(--bs-body-color);
}


.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus,
.bootstrap-select .dropdown-item.active {

    background:
        rgba(
            var(--directory-accent-rgb),
            0.14
        );

    color:
        var(--bs-body-color);
}


/* ============================
   Hero Sort Switch
============================ */

.hero-sort-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: min(100%, 560px);
    padding: 0.45rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0.9rem;
    background: rgba(7,17,26,0.48);
    backdrop-filter: blur(10px);
}

.hero-sort-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    color: rgba(255,255,255,0.74);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hero-sort-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.hero-sort-link.active {
    color: #fff;
    background: var(--directory-accent);
    box-shadow: 0 8px 22px rgba(var(--directory-accent-rgb),0.25);
}


/* ============================
   Results overlap
============================ */

.directory-results-overlap {
    position: relative;
    z-index: 3;
    margin-top: -4.25rem;
}

.directory-results-overlap > .container {
    padding-top: 0;
}

.city-statistics-notice {
    position: relative;
    z-index: 4;
    margin-top: -2.25rem;
    margin-bottom: 0;
}


/* When the city analytics panel is shown, let the results breathe below it
   instead of pulling the first card row back underneath the panel. */
.city-statistics-notice + .directory-results-overlap {
    margin-top: 1.5rem;
}


.city-insight-panel {

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        1.25rem;

    padding:
        1.15rem 1.25rem;

    border:
        1px solid
        rgba(
            var(--directory-accent-rgb),
            0.32
        );

    border-radius:
        1rem;

    background:
        linear-gradient(
            135deg,
            var(--bs-body-bg) 0%,
            var(--bs-tertiary-bg) 100%
        );

    box-shadow:
        0 14px 35px
        rgba(
            0,
            0,
            0,
            0.10
        );
}


.city-insight-icon {

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            var(--directory-accent-rgb),
            0.13
        );

    color:
        var(--directory-accent);

    font-size:
        1.35rem;

    flex:
        0 0 auto;
}


.city-insight-copy {

    min-width:
        0;
}


.city-insight-eyebrow {

    margin-bottom:
        0.2rem;

    color:
        var(--directory-accent);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.city-insight-title {

    margin:
        0 0 0.25rem;

    font-size:
        1.15rem;

    font-weight:
        800;
}


.city-insight-text {

    margin:
        0;

    color:
        var(--bs-secondary-color);

    font-size:
        0.9rem;

    line-height:
        1.5;
}


.city-insight-action {

    justify-self:
        end;
}


.city-insight-action .btn {

    white-space:
        nowrap;

    font-weight:
        700;
}

/* Keep the original card and pagination presentation.
   Their styling comes from Bootstrap + the site's existing CSS. */

/* ============================
   Modals
============================ */

.modal-content {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--bs-border-color);
}

.modal-body {
    line-height: 1.7;
}


/* ============================
   Dark Mode
============================ */

/* ============================
   Desktop Hover
============================ */




/* ============================
   Tablet
============================ */

@media (max-width: 991px) {

    .directory-hero {
        min-height: 690px;
        padding: 7rem 0 5rem;
    }

    .directory-hero-compact {
        min-height: 0;

        padding:
            calc(70px + 2rem)
            0
            3.5rem;
    }

    .hero-directory-mark {
        width: 190px;
        height: 190px;
        font-size: 5.5rem;
    }

}


/* ============================
   Mobile
============================ */

@media (max-width: 768px) {

    .hero-search-panel {
        padding: 1rem;
    }

    .hero-search-panel .btn {
        min-height: 50px;
    }

    .hero-sort-switch {
        width: 100%;
    }

    .hero-sort-link {
        padding: 0.7rem 0.55rem;
        font-size: 0.86rem;
    }

    .directory-results-overlap {
        margin-top: -2.25rem;
    }

    .city-statistics-notice {
        margin-top: -1rem;
        margin-bottom: 0;
    }


    .city-statistics-notice + .directory-results-overlap {
        margin-top: 1rem;
    }


    .city-insight-panel {

        grid-template-columns:
            auto minmax(0, 1fr);

        gap:
            1rem;

        padding:
            1rem;
    }


    .city-insight-action {

        grid-column:
            1 / -1;

        width:
            100%;
    }


    .city-insight-action .btn {

        width:
            100%;
    }


    .city-insight-icon {

        width:
            48px;

        height:
            48px;
    }


    .city-insight-title {

        font-size:
            1.05rem;
    }


    .directory-hero {
        min-height: 780px;
        padding: 7rem 0 4rem;
    }

    .directory-hero-compact {
        min-height: 0;

        padding:
            calc(70px + 1.75rem)
            0
            2.75rem;
    }

    .directory-hero h1 {
        font-size: 2.6rem;
    }

    .directory-hero-compact h1 {
        font-size: 2rem;
    }

    .directory-hero-compact .hero-search-panel {
        margin-top: 1rem;
    }

    .directory-hero-compact .hero-points {
        margin-top: 1rem !important;
    }

    .directory-hero-compact .hero-sort-switch {
        margin-top: 1rem !important;
    }

    .hero-directory-mark {
        width: 150px;
        height: 150px;
        font-size: 4.5rem;
    }

    .directory-controls-section {
        padding-top: 2rem;
    }

    .directory-search-card {
        padding: 1.5rem !important;
    }

    .directory-toolbar {
        align-items: stretch;
    }

    .sort-switch {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .sort-link {
        text-align: center;
        font-size: 0.86rem;
    }

    .city-stat-link {
        width: 100%;
        text-align: center;
    }

    

    

}

@media (max-width: 420px) {

    

    .sort-switch {
        grid-template-columns: 1fr;
    }

}


/* ============================
   Consistent Offender Cards
============================ */

.offender-card-column {
    display: flex;
}


/*
 * Keep every offender card in the grid the same overall height.
 * The body flexes to absorb differences in text length and the
 * footer stays pinned to the bottom.
 */
.offender-card-column > .card {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}


/*
 * Standardise the photo area.
 * object-fit: cover keeps the card dimensions consistent while
 * preserving the image aspect ratio as naturally as possible.
 */
.offender-card-column .card-img-top {
    width: 100%;
    height: 360px;

    object-fit: cover;
    object-position: center center;

    flex-shrink: 0;
}


/*
 * Let the content area grow so short descriptions don't make
 * one card noticeably shorter than another.
 */
.offender-card-column .card-body {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
}


/*
 * Keep the footer aligned across each row.
 */
.offender-card-column .card-footer {
    margin-top: auto;

    flex-shrink: 0;
}


/*
 * Keep the short description visually tidy and prevent one very
 * long description from making a card taller than the others.
 */
.offender-card-column .card-text {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* Tablet */
@media (max-width: 991px) {

    .offender-card-column .card-img-top {
        height: 320px;
    }

}


/* Mobile */
@media (max-width: 575.98px) {

    .offender-card-column .card-img-top {
        height: 360px;
    }

}



/* ============================
   Full-width Ad Breaks
============================ */

.directory-ad-break-column {
    min-width: 0;
    align-self: flex-start;
}


.directory-ad-break {

    padding: 0;

    /* AdSense controls the creative size; never crop it to the rounded panel. */
    overflow:
        visible;
}


.directory-ad-slot {

    width:
        100%;

    min-height:
        90px;

    position:
        relative;
}


.directory-responsive-ad {

    display:
        block;

    width:
        100%;
}


/*
 * Ad-block fallback.
 * This uses the same full-width slot rather than creating an empty card.
 */
.directory-ad-fallback {

    display:
        none;

    width:
        100%;

    min-height:
        120px;

    padding:
        1.2rem 1.4rem;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        1rem;

    border-radius:
        0.8rem;

    background:
        var(--bs-tertiary-bg);
}


.directory-ad-break.adblock-active
.directory-responsive-ad {

    display:
        none !important;
}


.directory-ad-break.adblock-active
.directory-ad-fallback {

    display:
        grid;
}


.directory-ad-fallback-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            var(--directory-accent-rgb),
            0.12
        );

    color:
        var(--directory-accent);

    font-size:
        1.15rem;
}


.directory-ad-fallback-copy {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.2rem;
}


.directory-ad-fallback-copy strong {

    font-size:
        1rem;
}


.directory-ad-fallback-copy span {

    color:
        var(--bs-secondary-color);

    font-size:
        0.88rem;

    line-height:
        1.45;
}


.directory-ad-fallback-actions {

    display:
        flex;

    gap:
        0.6rem;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;
}



.directory-ad-break-column.ad-unfilled {
    display: none;
}


@media (max-width: 768px) {

    .directory-ad-slot {
        min-height: 100px;
    }

    .directory-ad-fallback {

        grid-template-columns:
            auto minmax(0, 1fr);

        padding:
            1rem;
    }


    .directory-ad-fallback-actions {

        grid-column:
            1 / -1;

        width:
            100%;
    }


    .directory-ad-fallback-actions .btn {

        flex:
            1 1 0;
    }

}


/* ============================
   Equal-height offender rows
============================ */

.album .row {
    align-items: stretch !important;
}


.offender-card-column {
    display: flex !important;
}


.offender-card-column > .card {
    width: 100%;

    display: flex;
    flex-direction: column;

    height: 100% !important;
    min-height: 100%;
}


/*
 * Keep the body flexible and footer locked to the bottom.
 */
.offender-card-column .card-body {
    flex: 1 1 auto;
}


.offender-card-column .card-footer {
    margin-top: auto;
}


/*
 * Keep all card images identical in height.
 */
.offender-card-column .card-img-top {
    width: 100%;

    height: 360px;

    object-fit: cover;
    object-position: center center;

    flex-shrink: 0;
}


/*
 * Clamp description length so content cannot stretch one card
 * beyond the others.
 */
.offender-card-column .card-text {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* Mobile */
@media (max-width: 768px) {

    .hero-directory-mark {
        display: none !important;
    }


    .offender-card-column .card-img-top {
        height: 360px;
    }

}


/* Restore gutters between equal-height offender cards */
.album .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}


.offender-card-column {
    padding-left:
        calc(var(--bs-gutter-x) * 0.5);

    padding-right:
        calc(var(--bs-gutter-x) * 0.5);

    margin-bottom:
        var(--bs-gutter-y);
}
/* Details modal: the same visual language as the offender profile. */
.directory-record-modal .modal-content { border: 1px solid rgba(77,171,247,.35); border-radius: 1rem; overflow: hidden; }
.directory-record-header { background: #111820; border-bottom: 1px solid rgba(77,171,247,.18); padding: 1rem 1.5rem; }
.directory-record-badge { display: inline-flex; align-items: center; padding: .5rem .8rem; border: 1px solid rgba(77,171,247,.5); border-radius: 999px; background: rgba(77,171,247,.1); color: #80c4fa; font-size: .85rem; font-weight: 700; }
.directory-record-hero { padding: 2rem; color: #fff; background: radial-gradient(circle at 85% 35%, rgba(77,171,247,.22), transparent 40%), linear-gradient(135deg, #111, #1d1d1d 55%, #1b2733); }
.directory-record-hero h2 { color: #fff; overflow-wrap: anywhere; }
.directory-record-copy { color: rgba(255,255,255,.8); line-height: 1.75; }
.directory-record-meta a, .directory-record-meta > span { color: rgba(255,255,255,.8); font-size: .95rem; text-decoration: none; }
.directory-record-meta a:hover { color: #fff; text-decoration: underline; }
.directory-record-meta a i { color: #4dabf7; }
.directory-record-age { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .85rem; padding: .7rem 1.1rem; border: 1px solid rgba(77,171,247,.35); border-radius: 1rem; background: rgba(77,171,247,.08); }
.directory-record-age > span { color: #b9d5eb; font-size: .85rem; font-weight: 600; }
.directory-record-age strong { color: #fff; font-size: 1.75rem; line-height: 1.2; }
.directory-record-portrait { max-width: 280px; margin-inline: auto; }
.directory-record-photo { display: block; width: 100%; padding: 0; border: 1px solid rgba(77,171,247,.5); border-radius: 1rem; overflow: hidden; background: #171717; color: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.directory-record-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; }
.directory-record-photo > span { display: block; padding: .8rem 1rem; background: #18232d; font-size: .9rem; }
.directory-record-locations { background: linear-gradient(135deg, #171717, #242424); border: 1px solid rgba(77,171,247,.2); border-radius: 1rem; color: #fff; }
.directory-record-locations h3 { color: #fff; }
.directory-record-locations p { color: rgba(255,255,255,.8); line-height: 1.75; overflow-wrap: anywhere; }
.directory-record-location-icon { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(77,171,247,.14); color: #4dabf7; }
.directory-record-description { border: 1px solid rgba(77,171,247,.35); border-radius: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.directory-record-description img { max-width: 100%; height: auto; }
.directory-record-disclaimer { border: 1px solid var(--bs-border-color); border-left: 4px solid #4dabf7; border-radius: 1rem; background: var(--bs-tertiary-bg, var(--bs-body-bg)); line-height: 1.7; }
.directory-record-modal .btn-primary { background: #17669f; border-color: #17669f; color: #fff; }
.directory-record-modal .btn-primary:hover { background: #125582; border-color: #125582; }
.directory-record-modal .btn-outline-primary { color: #17669f; border-color: #17669f; }
.directory-record-modal .btn-outline-primary:hover { background: #17669f; color: #fff; }
.directory-record-modal :is(a, button):focus-visible { outline: 3px solid #4dabf7; outline-offset: 3px; }
[data-bs-theme="dark"] .directory-record-description { background: var(--bs-gray-800); border-color: rgba(77,171,247,.5); }
[data-bs-theme="dark"] .directory-record-modal .btn-outline-primary { color: #80c4fa; border-color: #80c4fa; }
[data-bs-theme="dark"] .directory-record-modal .btn-outline-primary:hover { background: #17669f; color: #fff; }
@media (max-width: 575px) {
    .directory-record-hero { padding: 1.5rem; }
    .directory-record-header { padding: 1rem; }
    .directory-record-footer .btn { flex: 1 1 auto; margin: 0; }
}

/* Directory cards: scoped separately from the legacy card effects. */
.offender-card-column > .directory-offender-card {
    border: 1px solid rgba(var(--directory-accent-rgb), .3);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.offender-card-column > .directory-offender-card:hover {
    border-color: var(--directory-accent);
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.directory-offender-card .card-img-top { border-radius: 0; border-bottom: 1px solid rgba(var(--directory-accent-rgb), .2); }
.directory-offender-card:hover .card-img-top { transform: none !important; }
.directory-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.directory-card-chip { display: inline-flex; align-items: center; padding: .4rem .65rem; border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); text-decoration: none; font-size: .8rem; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.directory-card-chip:hover { border-color: var(--directory-accent); color: var(--bs-body-color); }
.directory-card-name { font-size: 1.45rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; margin-bottom: .85rem; }
.directory-card-age { display: inline-block; color: var(--bs-secondary-color); font-size: .7em; font-weight: 500; }
.offender-card-column .directory-offender-card .card-body p.card-text { color: var(--bs-secondary-color) !important; }
.offender-card-column .directory-offender-card .blockquote-footer { margin-top: auto; padding-top: .75rem; color: var(--bs-secondary-color) !important; }
.directory-offender-card .blockquote-footer::before { content: ''; }
.directory-offender-card .blockquote-footer cite { font-style: normal; }
.offender-card-column .directory-offender-card .card-footer { background: var(--bs-tertiary-bg) !important; border-top: 1px solid var(--bs-border-color) !important; }
.directory-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.directory-card-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.directory-offender-card .card-footer .btn { border-radius: .5rem !important; margin: 0; min-height: 40px; min-width: 40px; box-shadow: none; }
.directory-offender-card .card-footer .btn:hover { transform: none; box-shadow: none; }
.directory-offender-card .card-footer .card-text { margin: 0; }
.directory-offender-card .card-footer small { background: transparent; border: 0; padding: 0; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.directory-offender-card :is(a,button):focus-visible { outline: 3px solid var(--directory-accent); outline-offset: 3px; }
[data-bs-theme="dark"] .directory-offender-card { background: var(--bs-gray-800); }
@media (prefers-reduced-motion: reduce) { .offender-card-column > .directory-offender-card { transition: none; } }

/* Names and age follow the hero accent and profile metadata styling. */
.directory-offender-card .directory-card-name { color: var(--directory-accent); }
.directory-offender-card .directory-card-age { display: inline-flex; align-self: flex-start; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; padding: .45rem .75rem; border: 1px solid rgba(var(--directory-accent-rgb), .35); border-radius: .75rem; background: rgba(var(--directory-accent-rgb), .08); font-size: .85rem; }
.directory-card-age-label { color: var(--bs-secondary-color); font-weight: 500; }
.directory-card-age-value { color: var(--bs-body-color); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Align sources at the bottom of each equal-height card body. */
.offender-card-column .directory-offender-card .card-body p.card-text { margin-bottom: .65rem !important; }
.directory-card-source { display: inline-flex; margin-top: auto; flex-shrink: 0; align-self: flex-start; align-items: center; gap: .4rem; max-width: 100%; padding: .3rem .55rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-size: .75rem; line-height: 1.4; text-decoration: none; }
.directory-card-source i { color: var(--directory-accent); font-size: .7rem; }
.directory-card-source-label { flex-shrink: 0; }
.directory-card-source-host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-body-color); font-weight: 600; }
.directory-card-source:hover { border-color: var(--directory-accent); color: var(--bs-body-color); }

/* Pagination matches the directory cards and metadata panels. */
.directory-pagination .pagination { gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 0; }
.directory-pagination .page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: .6rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .9rem; box-shadow: none; }
.directory-pagination .page-item a.page-link:hover { border-color: var(--directory-accent); color: var(--directory-accent); background: rgba(var(--directory-accent-rgb), .08); }
.directory-pagination .page-item.active .page-link { gap: .4rem; padding-inline: 1rem; background: rgba(var(--directory-accent-rgb), .1); border-color: rgba(var(--directory-accent-rgb), .45); color: var(--bs-body-color); font-weight: 700; font-variant-numeric: tabular-nums; }
.directory-pagination .directory-page-of { color: var(--bs-secondary-color); font-weight: 400; }
.directory-pagination .page-item.disabled .page-link { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); opacity: .5; }
.directory-pagination .page-link:focus-visible { outline: 3px solid var(--directory-accent); outline-offset: 3px; }
[data-bs-theme="dark"] .directory-pagination .page-item:not(.active):not(.disabled) .page-link { background: var(--bs-gray-800); }
@media (max-width: 375px) { .directory-pagination .pagination { gap: .3rem; } .directory-pagination .page-item.active .page-link { padding-inline: .65rem; } }

/* Optional search filter stays compact on all screen sizes. */
.directory-sex-filter .form-select { width: auto; min-width: 140px; color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: var(--bs-border-color); border-radius: .5rem; }
.directory-sex-filter .form-select:focus { border-color: var(--directory-accent); box-shadow: 0 0 0 .2rem rgba(var(--directory-accent-rgb), .2); }

/* Empty search state uses the same panel treatment as the directory. */
.directory-empty-state { padding: 1.5rem; margin-block: 1.5rem; border: 1px solid rgba(var(--directory-accent-rgb), .35); border-radius: 1rem; background: var(--bs-body-bg); }
.directory-empty-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; border-radius: 50%; color: var(--directory-accent); background: rgba(var(--directory-accent-rgb), .12); }
.directory-empty-state p { line-height: 1.6; }
[data-bs-theme="dark"] .directory-empty-state { background: var(--bs-gray-800); }

/* Bootstrap Select renders option counts as subtext, including in its body portal. */
.bootstrap-select .dropdown-menu .dropdown-item small.text-muted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    margin-left: .65rem;
    padding: .2rem .55rem;
    border: 1px solid rgba(var(--directory-accent-rgb), .3);
    border-radius: 999px;
    background: rgba(var(--directory-accent-rgb), .1);
    color: var(--bs-body-color) !important;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.bootstrap-select .dropdown-menu .dropdown-item:is(:hover, :focus, .active, .selected) small.text-muted {
    border-color: rgba(var(--directory-accent-rgb), .55);
    background: rgba(var(--directory-accent-rgb), .18);
}