html {
    font-size: 0.95rem;
}

@media screen and (max-width: 660px) {
    .modal-footer {
        justify-content: flex-start !important;
    }

    .detail-row .label {
        border-bottom: unset !important;
    }
}

@media print {
    header,
    footer,
    .search__wrapper {
        display: none !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .label, .value {
        border-bottom: none !important;
        padding-bottom: unset !important;
    }

    .card-body, .card-header {
        padding-left: unset !important;
    }

    .detail-row {
        margin-bottom: unset !important;
    }

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    /* Use full page width */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Keep Bootstrap rows aligned */
    .row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .col-md-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.search-results-warning {
    border: 2px solid #a20120;
    border-radius: 4px;
    background-color: #ffe1df;
    margin-bottom: 5px;
    margin: 0 0 20px;
    padding: 10px;
    font-size: 16px;
}

.search-results-warning--hidden {
    display: none;
}

.chevron-icon {
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.25s ease;
}

button[aria-expanded="true"] .chevron-icon {
    transform: rotate(-90deg);
}


.filter-header-btn {
    all: unset; /* Remove ALL button default styles */
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    /* Inherit your header styles */
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

    .filter-header-btn:focus-visible {
        outline: 2px solid #c9187e;
    }



html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: Montserrat,Arial,Helvetica,sans-serif;
}


.claims-page {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
}

.claims-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-card {
    border: 1px solid #bdbdbd;
    background: #f7f7f7;
}

.filter-card__header {
    /*background: #c2187a;*/
    background: #3c3c3b;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .60rem 1rem;
    font-size: .85rem;
}


    .filter-card__header:has(button[aria-expanded="true"]) {
        background: #c2187a; /* active/open color */
    }


.filter-card__body {
    padding: 1rem;
}

.sidebar-actions {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.claims-main {
    min-width: 0;
}

.claims-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.claims-title {
    margin-bottom: .25rem;
    font-size: 2rem;
    font-weight: 700;
}

.claims-total {
    font-size: 1.05rem;
    color: #555;
}

.btn-brand {
    background-color: #c2187a;
    border-color: #c2187a;
    color: #fff;
}

    .btn-brand:hover,
    .btn-brand:focus {
        background-color: #a51467;
        border-color: #a51467;
        color: #fff;
    }

.claims-table-wrap {
    overflow-x: auto;
}

.claims-table {
    vertical-align: middle;
}

    .claims-table thead th {
        white-space: nowrap;
        border-bottom-width: 2px;
    }

    .claims-table tbody tr:nth-child(odd) {
        background-color: #f5f5f5;
    }

    .claims-table td,
    .claims-table th {
        padding: 1rem .75rem;
    }

@media screen and (max-width: 660px) {
    table.claims-table {
        display: block;
    }

        table.claims-table thead {
            display: none;
        }

        table.claims-table tbody {
            display: block;
            width: 100%;
        }

            table.claims-table tbody tr {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                flex-wrap: wrap;
                padding: 1.5rem 1rem;
                width: 100%;
            }

                table.claims-table tbody tr td::before {
                    display: block;
                    font-weight: bold;
                    margin-bottom: 6px;
                }

                table.claims-table tbody tr td.claims-td-member::before {
                    content: "Member"
                }

                table.claims-table tbody tr td.claims-td-member-cy::before {
                    content: "Aelod"
                }

                table.claims-table tbody tr td.claims-td-allowance-type::before {
                    content: "Allowance Type"
                }

                table.claims-table tbody tr td.claims-td-allowance-type-cy::before {
                    content: "Math o lwfans"
                }

                table.claims-table tbody tr td.claims-td-expenditure-type::before {
                    content: "Expenditure Type"
                }

                table.claims-table tbody tr td.claims-td-expenditure-type-cy::before {
                    content: "Math o wariant"
                }

                table.claims-table tbody tr td.claims-td-claim-date::before {
                    content: "Date"
                }

                table.claims-table tbody tr td.claims-td-claim-date-cy::before {
                    content: "Dyddiad"
                }

                table.claims-table tbody tr td.claims-td-amount::before {
                    content: "Value"
                }

                table.claims-table tbody tr td.claims-td-amount-cy::before {
                    content: "Gwerth"
                }

                table.claims-table tbody tr td {
                    display: block;
                    width: 50%;
                    box-sizing: border-box;
                    line-height: 1;
                    border-bottom: unset;
                }
}

.sort-btn {
    background: none;
    border: none;
    padding: 0;
    font-weight: 700;
    color: #222;
    cursor: pointer;
}

    .sort-btn:hover {
        color: #c2187a;
    }

.selected-summary {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.selected-pill {
    background: #ececec;
    border: 1px solid #d4d4d4;
    padding: .5rem .75rem;
    border-radius: .25rem;
    font-size: .95rem;
    position: relative;
    cursor: pointer;
}

    .selected-pill:hover {
        border: 1px solid rgb(207, 0, 15);
    }

.summary-member-remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background-color: rgb(207, 0, 15);
    color: white;
    text-decoration: none;
}

    .summary-member-remove-btn:hover {
        color: white;
    }

.selected-pill:hover .summary-member-remove-btn {
    opacity: 1;
}

@media screen and (max-width: 660px) {
    .summary-member-remove-btn {
        opacity: 1;
        background-color: lightgrey;
        color: darkslategrey;
    }
}

.summary-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ececec;
    border: 1px solid #d4d4d4;
    padding: .55rem .75rem;
    position: relative;
    cursor: pointer;
}

    .summary-group:hover {
        border: 1px solid rgb(207, 0, 15);
    }

        .summary-group:hover .summary-group-remove-btn {
            opacity: 1;
        }

        .summary-group:hover .summary-group-count {
            opacity: 0;
        }

.summary-group-name {
    font-weight: 500;
}

.summary-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .5rem;
    background: #333;
    color: #fff;
    font-weight: 700;
    border-radius: .2rem;
}

.summary-group-remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background-color: rgb(207, 0, 15);
    color: white;
    text-decoration: none;
}

    .summary-group-remove-btn:hover {
        color: white;
    }



@media screen and (max-width: 660px) {
    .summary-group-count {
        margin-right: 42px;
    }

    .summary-group-remove-btn {
        opacity: 1;
        background-color: lightgrey;
        color: darkslategrey;
    }
}

.modal-trigger-btn {
    font-weight: 700;
    text-transform: uppercase;
}

.picker-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .25rem;
}

.reset-link {
    text-align: left;
    padding-left: 0;
    color: #333;
    text-decoration: none;
}

    .reset-link:hover {
        color: #c2187a;
    }

@media (max-width: 992px) {
    .claims-page {
        grid-template-columns: 1fr;
    }
}

.claim-detail {
    max-width: 900px;
}

    .claim-detail .row {
        align-items: flex-start;
    }

    .claim-detail .fw-bold {
        color: #333;
    }

    .claim-detail .col-md-8 {
        color: #555;
    }


.detail-row {
    margin-bottom: 1rem;
}

.label {
    font-weight: 600;
    color: #555;
}

.value {
    color: #222;
}

.text-brand {
    color: #c2187a;
}

.member-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #ddd;
}


/* GRID */
.member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* CARD */
.member-card {
    display: block;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    padding: 10px;
    background: #fff;
    transition: all 0.15s ease;
}

    /* HOVER */
    .member-card:hover {
        background: #f8f8f8;
        border-color: #c2187a;
    }

/* ITEM LAYOUT */
.member-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* IMAGE */
.member-avatar {
    width: 48px; /* bigger than before */
    height: 60px;
    object-fit: cover;
    border-radius: 4px; /* slight rounding instead of circle */
    border: 1px solid #ddd;
}


.member-name {
    font-size: 0.95rem;
    color: #333;
}


/*.member-checkbox {
    display: none;
}*/


.member-checkbox:checked + .member-item {
    border-left: 4px solid #c2187a;
    padding-left: 6px;
    background: #faf3f8;
}

/* =========================================
   MEMBER PICKER - CURRENT / PREVIOUS SECTIONS
   ========================================= */

/* Make member modal a bit wider and more breathable */
#memberPickerModal .modal-dialog {
    max-width: 980px;
}

#memberPickerModal .modal-body {
    padding-top: 1rem;
}

/* Accordion styling for Current / Previous members */
#memberGroupsAccordion .accordion-item {
    border: 1px solid #d9d9d9;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

#memberGroupsAccordion .accordion-button {
    font-weight: 700;
    color: #2f2f2f;
    background-color: #f5f5f5;
    box-shadow: none;
    padding: 0.9rem 1rem;
}

    #memberGroupsAccordion .accordion-button:not(.collapsed) {
        color: #2f2f2f;
        background-color: #efefef;
        box-shadow: none;
    }

    #memberGroupsAccordion .accordion-button:focus {
        box-shadow: none;
        border-color: #c2187a;
    }

#memberGroupsAccordion .accordion-body {
    padding: 1rem;
}

.current-members-group .accordion-button {
    border-left: 5px solid #c2187a;
}

.previous-members-group .accordion-button {
    border-left: 5px solid #777;
}

/* Two-column member grid */
.member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Individual member card */
.member-card {
    display: block;
    cursor: pointer;
    border: 1px solid #dddddd;
    background: #ffffff;
    padding: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .member-card:hover {
        border-color: #c2187a;
        background-color: #fcf7fa;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

/* Hide checkbox but keep accessible via label click */
/*.member-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}*/

.member-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 64px;
}

/* Bigger rectangular image */
.member-avatar {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d8d8d8;
    background-color: #f2f2f2;
    flex-shrink: 0;
}

.member-avatar-placeholder {
    display: inline-block;
    background: linear-gradient(135deg, #efefef 0%, #dddddd 100%);
}

.member-name {
    font-size: 0.98rem;
    line-height: 1.35;
    color: #2f2f2f;
    font-weight: 600;
}

/* Selected state */
.member-checkbox:checked + .member-item {
    background-color: #faf1f7;
    border-left: 4px solid #c2187a;
    /* padding: 0.35rem 0.4rem 0.35rem 0.7rem;
    margin: -0.35rem -0.4rem;*/
}

    .member-checkbox:checked + .member-item .member-avatar {
        border-color: #c2187a;
    }

    .member-checkbox:checked + .member-item .member-name {
        color: #7d1350;
    }

/* Search results feel a bit cleaner */
#memberSearchBox {
    border-color: #d4d4d4;
}

    #memberSearchBox:focus {
        border-color: #c2187a;
        box-shadow: 0 0 0 0.2rem rgba(194, 24, 122, 0.12);
    }

/* Responsive collapse to one column on smaller screens */
@media (max-width: 768px) {
    .member-grid {
        grid-template-columns: 1fr;
    }

    .member-avatar {
        width: 52px;
        height: 52px;
    }
}


.search__wrapper--charcoal {
    background: #3c3c3b;
    text-align: center;
    color: #fff;
    padding: 10px 0 10px 0;
    margin: 20px 0 30px 0;
}

h1.search-heading__title {
    font-size: 2em !important;
    padding: 10px 0 0 0;
}

.card {
    border: 1px solid #000;
}

.accordion-item {
    background-color: #fff;
    border: 1px solid #000;
}

input#expenditureSearchBox {
    border: 1px solid #000;
}

input#memberSearchBox {
    border: 1px solid #000;
}

.member-card {
    border: 1px solid #7e7e7e;
}

/* =========================================
   PAGINATION - SENEDD PINK STYLE (no root)
   ========================================= */

/* Base container */
.pagination {
    gap: 0.25rem;
}

/* Default links */
.page-link {
    color: #232323;
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    padding: 0.45rem 0.7rem;
    min-width: 36px;
    text-align: center;
    font-weight: 400;
    transition: all 0.15s ease;
}

    /* Hover */
    .page-link:hover {
        color: #ffffff;
        background-color: #c2187a;
        border-color: #c2187a;
        transform: translateY(-1px);
    }

/* Active */
.page-item.active .page-link {
    background-color: #c2187a;
    border-color: #c2187a;
    color: #ffffff;
    font-weight: 600;
    cursor: default;
}

/* Disabled */
.page-item.disabled .page-link {
    color: #aaaaaa;
    background-color: #f8f8f8;
    border-color: #e3e3e3;
    pointer-events: none;
}

/* Previous / Next */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    font-weight: 500;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

/* Ellipsis */
.page-item.disabled span.page-link {
    background: transparent;
    border: none;
    color: #888888;
}



/* Optional: active page should not change on hover */
.page-item.active {
    background-color: #f8d9ea;
    border-color: #e7a9c9;
    color: #8c1458;
    transform: none;
}


.accordion-button {
    color: #000;
}

.allowance-code-set-header {
    border: 1px solid #000;
    background-color: #e8e8e8;
}


/*
 * Visually hide the checkbox while keeping it in the keyboard tab order.
 * Do not use display: none or visibility: hidden.
 */
#memberPickerModal .member-card {
    position: relative;
}

#memberPickerModal .member-checkbox {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Highlight the complete member card when its checkbox has keyboard focus.
 */
#memberPickerModal .member-card:focus-within {
    outline: 3px solid #c2187a;
    outline-offset: 3px;
    border-color: #c2187a;
    background-color: #fcf7fa;
    box-shadow: 0 0 0 2px #ffffff;
}

/*
 * Visible focus for all other modal controls.
 * Your existing accordion rule currently removes the Bootstrap focus shadow.
 */
#memberPickerModal .accordion-button:focus-visible,
#memberPickerModal .btn:focus-visible,
#memberPickerModal .btn-close:focus-visible,
#memberPickerModal #memberSearchBox:focus-visible {
    outline: 3px solid #c2187a;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #ffffff;
}

/*
 * Windows High Contrast Mode support.
 */
@media (forced-colors: active) {
    #memberPickerModal .member-card:focus-within,
    #memberPickerModal .accordion-button:focus-visible,
    #memberPickerModal .btn:focus-visible,
    #memberPickerModal .btn-close:focus-visible,
    #memberPickerModal #memberSearchBox:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
        box-shadow: none;
    }
}