/* =========================================================
   MY CHURCH MEMBERSHIP APP
   CUSTOM STYLES
========================================================= */

#navigation {
    padding: 5px 65px !important;
    
}


/* =========================================================
   ADD MEMBER HERO
========================================================= */


.member-add-hero .container {
    position: relative;
    z-index: 2;
}


/* Breadcrumb */

.member-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 9px 15px;

    background: rgba(255,255,255,0.75);
    border-radius: 30px;

    font-size: 14px;

    box-shadow: 0 5px 20px rgba(23,23,36,0.04);
}

.member-breadcrumb a {
    color: #4f566b;
    text-decoration: none;
}

.member-breadcrumb a:hover {
    color: #525fe1;
}

.member-breadcrumb strong {
    color: #525fe1;
}

.member-breadcrumb > span {
    color: #a1a6b3;
    font-size: 9px;
}


/* =========================================================
   HERO FEATURES STRIP
========================================================= */


/* Add spacing because feature strip overlaps */

.member-add-hero + .section-padding {
    padding-top: 85px;
}


/* =========================================================
   MODERN FORM SECTION HEADINGS
========================================================= */

.member-form-heading {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 28px;

    padding: 17px 20px;

    background: linear-gradient(
        100deg,
        #052e70,
        #073f80
    );

    color: #ffffff;

    border-radius: 10px 10px 0 0;
}

.member-form-heading-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

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

    border-radius: 9px;

    color: #ffffff;

    font-size: 20px;
}

.member-form-heading-text {
    flex: 1;
}

.member-form-heading h3 {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border-radius: 0 !important;

    color: #ffffff !important;

    font-size: 19px !important;
    font-weight: 600;
}

.member-form-heading h3 i {
    color: #ffffff;
}

.member-form-heading p {
    margin: 3px 0 0;

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

    font-size: 13px;
    line-height: 1.5;
}


/* Join heading to form card */

.member-form-heading + .profile-section {
    border-top: 0;
    border-radius: 0 0 10px 10px;
}


/* Administrative variations */

.member-form-heading-office {
    background: linear-gradient(
        100deg,
        #374151,
        #1f2937
    );
}

.member-form-heading-confirmation {
    background: linear-gradient(
        100deg,
        #4338ca,
        #525fe1
    );
}


/* =========================================================
   RESPONSIVE HERO
========================================================= */


@media only screen and (max-width: 767px) {

    

    

    

    

    

    

    .member-breadcrumb {
        justify-content: center;
    }

}


@media only screen and (max-width: 575px) {

    

    

    

    .member-form-heading {
        padding: 14px 15px;
    }

    .member-form-heading-icon {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }

}/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page {
    min-height: calc(100vh - 90px);
    background: #f7f7f5;
    padding: 70px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 100%;
    max-width: 440px;
}

.login-brand {
    text-align: center;
    margin-bottom: 30px;
}

.login-brand img {
    max-width: 180px;
    width: 100%;
    height: auto;
    margin: 0 auto 15px;
    display: block;
}

.login-brand h2 {
    font-size: 28px;
    font-weight: 600;
    color: #0b104a;
    margin-bottom: 5px;
}

.login-brand p {
    font-size: 15px;
    color: #777;
}

.login-logo {
    max-width: 180px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px;
}

.login-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 38px 35px;
    box-shadow: 0 15px 45px rgba(23, 23, 36, 0.08);
    border: 1px solid #eeeeee;
}

.login-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
}

.login-subtitle {
    color: #777;
    margin-bottom: 28px;
}

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    display: block;
    color: #0b104a;
    font-weight: 600;
    margin-bottom: 8px;
}

.login-field label i {
    margin-right: 7px;
    color: #525fe1;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap input {
    width: 100%;
    height: 54px;
    border: 1px solid #d9d9df;
    border-radius: 10px;
    padding: 0 45px 0 15px;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: #4a5355;
    background: #ffffff;
    outline: none;
    transition: 0.25s;
    box-sizing: border-box;
}

.login-input-wrap input:focus {
    border-color: #525fe1;
    box-shadow: 0 0 0 3px rgba(82, 95, 225, 0.10);
}

.login-input-wrap input::placeholder {
    color: #aaa;
}

.login-password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.login-password-toggle:hover {
    color: #525fe1;
}

.login-button {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 10px;
    background: #525fe1;
    color: #ffffff;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 8px;
}

.login-button:hover {
    background: #414dcc;
    transform: translateY(-1px);
}

.login-button i {
    margin-right: 7px;
}

.login-error {
    background: #fff1f1;
    border: 1px solid #f2c2c2;
    color: #b42318;
    padding: 12px 15px;
    border-radius: 9px;
    margin-bottom: 20px;
    font-size: 14px;
}

.login-test {
    margin-top: 25px;
    background: #f6f7ff;
    border: 1px solid #e1e4ff;
    border-radius: 12px;
    padding: 17px;
    text-align: center;
}

.login-test-title {
    color: #0b104a;
    font-weight: 600;
    margin-bottom: 8px;
}

.login-test p {
    font-size: 14px;
    line-height: 23px;
}

.login-test strong {
    color: #525fe1;
}


/* =========================================================
   FILTER FORM - MODERN MEMBER SEARCH
========================================================= */

.filter-form {
    background: #ffffff;
    padding: 28px 30px;
    border: 1px solid #e8e9ef;
    border-radius: 18px;
    margin-bottom: 25px;
    box-shadow: 0 8px 30px rgba(23, 23, 36, 0.05);
}

.filter-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

.filter-field,
.fliter-field {
    min-width: 0;
}

.filter-field label,
.fliter-field label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #07125c;
    font-size: 14px;
    font-weight: 600;
}

.filter-field label i,
.fliter-field label i {
    color: #525fe1;
    font-size: 13px;
}

.filter-form input[type="text"],
.filter-form select,
.filter-form textarea {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    background: #fafbfc;
    border: 1px solid #dfe2e8;
    border-radius: 10px;
    color: #333846;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.filter-form textarea {
    min-height: 100px;
    padding-top: 13px;
    padding-bottom: 13px;
    resize: vertical;
}

.filter-form input[type="text"]::placeholder,
.filter-form textarea::placeholder {
    color: #a0a5b1;
}

.filter-form input[type="text"]:hover,
.filter-form select:hover,
.filter-form textarea:hover {
    border-color: #c5c9d3;
    background: #ffffff;
}

.filter-form input[type="text"]:focus,
.filter-form select:focus,
.filter-form textarea:focus {
    background: #ffffff;
    border-color: #525fe1;
    box-shadow: 0 0 0 4px rgba(82, 95, 225, 0.10);
}

.filter-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, #73798a 50%),
        linear-gradient(135deg, #73798a 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 24px,
        calc(100% - 15px) 24px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.filter-submit-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.filter-submit-area button,
.filter-submit-area .btn {
    min-width: 110px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.filter-submit-area button {
    border: 1px solid #525fe1;
    background: #525fe1;
    color: #ffffff;
}

.filter-submit-area button:hover {
    background: #414dcc;
    border-color: #414dcc;
    color: #ffffff;
    transform: translateY(-1px);
}

.filter-submit-area .btn {
    background: #ffffff;
    color: #525fe1;
    border: 1px solid #d9dcef;
}

.filter-submit-area .btn:hover {
    background: #f5f6ff;
    border-color: #525fe1;
    color: #525fe1;
}

.member-count {
    font-weight: 600;
    color: #525fe1;
    margin-bottom: 20px;
}

/* Tablet */
@media only screen and (max-width: 991px) {
    .filter-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media only screen and (max-width: 575px) {
    .filter-form {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .filter-row {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 0;
    }

    .filter-field,
    .fliter-field {
        margin-bottom: 0;
    }

    .filter-form input[type="text"],
    .filter-form select,
    .filter-form textarea {
        min-height: 52px;
        font-size: 16px;
    }

    .filter-submit-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .filter-submit-area button,
    .filter-submit-area .btn {
        width: 100%;
        min-width: 0;
        height: 50px;
        padding: 0 10px;
    }
}


/* =========================================================
   MEMBERS DIRECTORY
========================================================= */

.member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.member-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.member-card-header {
    background: #525fe1;
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 5px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.member-card-body {
    display: flex;
    align-items: center;
    gap: 25px;
}

.member-photo-large {
    width: 190px;
    height: 230px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-photo-large img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.no-photo-large {
    width: 160px;
    height: 180px;
    background: #eeeeee;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.member-info {
    flex: 1;
}

.member-info p {
    margin: 10px 0;
    font-size: 17px;
}


/* =========================================================
   MEMBER PROFILE CARD
========================================================= */

.member-profile-card {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 30px;

    background: #ffffff;
    padding: 28px;

    border: 1px solid #e7e9ef;
    border-radius: 18px;

    box-shadow: 0 12px 35px rgba(23, 23, 36, 0.06);

    margin-bottom: 30px;
}

.member-profile-photo {
    width: 230px;
    text-align: center;
}

.member-profile-photo img {
    width: 230px;
    height: 250px;

    object-fit: cover;

    border-radius: 14px;

    cursor: pointer;

    border: 1px solid #eceef2;

    box-shadow: 0 8px 24px rgba(23, 23, 36, 0.10);
}

.member-profile-photo small {
    display: block;

    margin-top: 9px;

    color: #8a8f9b;

    font-size: 12px;
}

.profile-no-photo {
    width: 230px;
    height: 250px;

    background: #f4f5f8;

    color: #777;

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

    border: 1px solid #e7e9ef;
    border-radius: 14px;
}

.profile-no-photo i {
    font-size: 42px;
    margin-bottom: 8px;
    color: #aaa;
}

.member-profile-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.member-profile-info h1 {
    margin: 0 0 5px;

    color: #525fe1;

    font-size: 34px;
    font-weight: 700;
}

.profile-member-number {
    margin: 0 0 22px;

    color: #7b8190;

    font-size: 16px;
    font-weight: 600;
}

.member-profile-info p {
    display: flex;
    align-items: baseline;
    gap: 8px;

    margin: 0;

    padding: 10px 0;

    border-bottom: 1px solid #f0f1f4;

    color: #555c66;

    font-size: 15px;
}

.member-profile-info p strong {
    min-width: 95px;

    color: #333946;

    font-weight: 700;
}

.member-profile-info p:last-of-type {
    border-bottom: 0;
}

.profile-actions {
    display: flex;

    gap: 10px;

    margin-top: 24px;
}

.profile-actions .btn {
    display: inline-flex;

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

    gap: 7px;

    min-height: 44px;

    padding: 0 18px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: 0.2s ease;
}

.profile-actions .btn:not(.btn-danger) {
    background: #f5f6ff;

    color: #525fe1;

    border: 1px solid #dfe2ff;
}

.profile-actions .btn:not(.btn-danger):hover {
    background: #525fe1;

    color: #ffffff;

    border-color: #525fe1;
}

.profile-actions .btn-danger {
    background: #fff1f2;

    color: #dc3545;

    border: 1px solid #ffcdd2;
}

.profile-actions .btn-danger:hover {
    background: #dc3545;

    color: #ffffff;

    border-color: #dc3545;
}

/* Mobile profile card */
@media only screen and (max-width: 767px) {

    .member-profile-card {
        display: grid;

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

        gap: 16px;

        padding: 18px;

        border-radius: 16px;
    }

    .member-profile-photo {
        width: 105px;
    }

    .member-profile-photo img {
        width: 105px;
        height: 135px;

        border-radius: 12px;

        object-fit: cover;
    }

    .member-profile-photo small {
        display: none;
    }

    .profile-no-photo {
        width: 105px;
        height: 135px;

        border-radius: 12px;
    }

    .member-profile-info {
        width: auto;
        min-width: 0;

        justify-content: flex-start;
    }

    .member-profile-info h1 {
        margin-bottom: 2px;

        font-size: 23px;
        line-height: 1.2;
    }

    .profile-member-number {
        margin-bottom: 12px;

        font-size: 13px;
    }

    .member-profile-info p {
        display: block;

        padding: 5px 0;

        border-bottom: 0;

        font-size: 13px;
        line-height: 1.4;
    }

    .member-profile-info p strong {
        min-width: 0;

        margin-right: 4px;
    }

    .profile-actions {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

        margin-top: 14px;
    }

    .profile-actions .btn {
        width: 100%;

        min-height: 42px;

        padding: 0 8px;

        font-size: 13px;
    }
}

@media only screen and (max-width: 390px) {

    .member-profile-card {
        grid-template-columns: 90px minmax(0, 1fr);

        gap: 12px;

        padding: 15px;
    }

    .member-profile-photo,
    .profile-no-photo {
        width: 90px;
    }

    .member-profile-photo img,
    .profile-no-photo {
        height: 120px;
    }

    .member-profile-info h1 {
        font-size: 20px;
    }

    .member-profile-info p {
        font-size: 12px;
    }

    .profile-actions .btn {
        font-size: 12px;

        gap: 5px;
    }
}


/* =========================================================
   MEMBER PROFILE INFORMATION SECTIONS
========================================================= */

.profile-section {
    background: #ffffff;
    border: 1px solid #dddddd;
    padding: 22px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.member-view-page .profile-section {
    border-radius: 0 0 8px 8px;
    border-top: 0;
}


/* =========================================================
   PROFILE GRID
========================================================= */

.profile-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 35px;
    margin-bottom: 5px;
}

.profile-item {
    min-width: 0;
}

.profile-label {
    display: block;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.profile-value {
    display: block;
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    word-break: break-word;
}

.profile-item-wide {
    grid-column: span 2;
}

.profile-item-full {
    grid-column: 1 / -1;
}


/* =========================================================
   EDIT / ADD MEMBER FORM GRID
   Allows existing .row + .field markup to use same design
========================================================= */

.member-view-page .profile-section .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 30px;
    margin: 0 0 22px 0;
}

.member-view-page .profile-section .field {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
}


/* =========================================================
   MODERN PROFILE FORM CONTROLS
   Works with BOTH .profile-item and .field
========================================================= */

.profile-item label,
.member-view-page .field label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #343a40;
}

.profile-item input[type="text"],
.profile-item input[type="email"],
.profile-item input[type="tel"],
.profile-item input[type="date"],
.profile-item input[type="number"],
.profile-item input[type="file"],
.profile-item select,
.profile-item textarea,

.member-view-page .field input[type="text"],
.member-view-page .field input[type="email"],
.member-view-page .field input[type="tel"],
.member-view-page .field input[type="date"],
.member-view-page .field input[type="number"],
.member-view-page .field input[type="file"],
.member-view-page .field select,
.member-view-page .field textarea {

    width: 100%;
    min-height: 46px;

    padding: 10px 14px;

    background: #ffffff;

    border: 1px solid #d8dce3;
    border-radius: 8px;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: #333333;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* Text Areas */

.profile-item textarea,
.member-view-page .field textarea {
    min-height: 100px;
    line-height: 1.5;
    resize: vertical;
}


/* Select */

.profile-item select,
.member-view-page .field select {
    cursor: pointer;
}


/* Hover */

.profile-item input:hover,
.profile-item select:hover,
.profile-item textarea:hover,
.member-view-page .field input:hover,
.member-view-page .field select:hover,
.member-view-page .field textarea:hover {
    border-color: #aeb5c0;
}


/* Focus */

.profile-item input:focus,
.profile-item select:focus,
.profile-item textarea:focus,
.member-view-page .field input:focus,
.member-view-page .field select:focus,
.member-view-page .field textarea:focus {
    border-color: #525fe1;
    box-shadow: 0 0 0 3px rgba(82, 95, 225, 0.10);
    background: #ffffff;
}


/* Placeholder */

.profile-item input::placeholder,
.profile-item textarea::placeholder,
.member-view-page .field input::placeholder,
.member-view-page .field textarea::placeholder {
    color: #a0a5ad;
}


/* Read Only */

.readonly-box {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: #f6f7f9;
    border: 1px solid #d8dce3;
    border-radius: 8px;
    color: #6c757d;
    box-sizing: border-box;
}

.readonly-select {
    pointer-events: none;
    background: #f6f7f9 !important;
    color: #6c757d;
}


/* File Upload */

.profile-item input[type="file"],
.member-view-page .field input[type="file"] {
    padding: 6px 8px;
}

.profile-item input[type="file"]::file-selector-button,
.member-view-page .field input[type="file"]::file-selector-button {
    border: 0;
    background: #003366;
    color: #ffffff;
    padding: 8px 13px;
    margin-right: 10px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.profile-item input[type="file"]::file-selector-button:hover,
.member-view-page .field input[type="file"]::file-selector-button:hover {
    background: #004b8d;
}


/* Copy Address */

.copy-address {
    font-size: 12px;
    margin-left: 8px;
    font-weight: 500;
    color: #525fe1;
    text-transform: none;
    letter-spacing: normal;
}

.copy-address:hover {
    color: #414dcc;
}


/* =========================================================
   CHILDREN
========================================================= */

.children-profile-box {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}

.children-profile-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.child-profile-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f5f6ff;
    border: 1px solid #e2e4ff;
    padding: 8px 12px;
    border-radius: 8px;
    color: #333333;
}

.child-profile-item i {
    color: #525fe1;
}

.child-profile-item small {
    color: #777777;
}


/* Edit Child Rows */

.childRow {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.childRow input,
.childRow select {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #d8dce3;
    border-radius: 8px;
    box-sizing: border-box;
    background: #ffffff;
}

.childRow input:focus,
.childRow select:focus {
    outline: none;
    border-color: #525fe1;
    box-shadow: 0 0 0 3px rgba(82, 95, 225, 0.10);
}

.childRow .removeChild {
    min-height: 46px;
}


/* =========================================================
   PHOTO MODAL
========================================================= */

.photo-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
}

.photo-modal-content,
.photo-modal img {
    max-width: min(600px, 90vw);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

.photo-modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination {
    margin-top: 30px;
    text-align: center;
}

.pagination a {
    display: inline-block;
    min-width: 40px;
    padding: 10px 15px;
    margin: 0 4px;
    background: #ffffff;
    color: #525fe1;
    text-decoration: none;
    border: 1px solid #525fe1;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.pagination a:hover {
    background: #525fe1;
    color: #ffffff;
}

.pagination .active-page {
    background: #525fe1;
    color: #ffffff;
    border-color: #525fe1;
}

.pagination .disabled {
    background: #f5f5f5;
    color: #999;
    border-color: #ddd;
    cursor: not-allowed;
}


/* =========================================================
   NAV USER AREA
========================================================= */

.user-nav-area {
    gap: 15px;
    white-space: nowrap;
}

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #0b104a;
    white-space: nowrap;
}

.header-user i {
    color: #525fe1;
    font-size: 18px;
}

.user-nav-area .btn_one {
    white-space: nowrap;
    margin: 0;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media only screen and (max-width: 991px) {

    .member-grid {
        grid-template-columns: 1fr;
    }

    .profile-row,
    .member-view-page .profile-section .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-item-wide {
        grid-column: span 1;
    }

}


/* =========================================================
   RESPONSIVE - SMALL TABLET / PHONE
========================================================= */

@media only screen and (max-width: 767px) {

    .member-card-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-photo-large {
        width: 100%;
    }

    .profile-row,
    .member-view-page .profile-section .row {
        grid-template-columns: 1fr;
    }

    .childRow {
        grid-template-columns: 1fr;
    }

    .childRow .btn {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media only screen and (max-width: 575px) {

    .login-page {
        padding: 40px 15px;
        align-items: flex-start;
    }

    .login-card {
        padding: 30px 22px;
        border-radius: 15px;
    }

    .login-brand h2 {
        font-size: 24px;
    }

    .member-card {
        padding: 12px;
    }

    .member-card-header {
        font-size: 20px;
    }

    .profile-row,
    .member-view-page .profile-section .row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .profile-item-wide,
    .profile-item-full {
        grid-column: auto;
    }

    .profile-section {
        padding: 18px;
    }

    .member-view-page h3 {
        font-size: 17px;
        padding: 11px 13px;
    }

    .pagination a {
        margin-bottom: 8px;
    }

}


.hero-text h1 {
    padding-top: 150px !important;
    
}

.home_ps {
 
    top: 60% !important;
    
}

@media only screen and (max-width: 480px) {
    .hero-text h1 {
        padding-top: 10px!important;
    
    }
}


/* =========================================================
   MEMBERSHIP OVERVIEW
========================================================= */

.membership-overview {
    padding: 55px 0 60px;
    background: #ffffff;
}


/* Heading */

.membership-overview-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 32px;
}

.membership-overview-title h2 {
    margin: 0;
    color: #07125c;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.membership-overview-title span {
    display: block;
    width: 65px;
    height: 2px;
    background: #525fe1;
}


/* Cards */

.overview-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;

    width: 100%;
    min-height: 125px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #e1e4ea;
    border-radius: 18px;

    box-shadow: 0 10px 28px rgba(23, 23, 36, 0.06);

    margin-bottom: 20px;

    box-sizing: border-box;
}


/* Icon */

.overview-icon {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

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

    border-radius: 50%;

    font-size: 25px;
}


/* Icon Colours */

.overview-birthday {
    background: #fff0f0;
    color: #ef6767;
}

.overview-male {
    background: #efefff;
    color: #525fe1;
}

.overview-female {
    background: #fff0fa;
    color: #8c3b86;
}

.overview-baptized {
    background: #e9fbff;
    color: #339bc7;
}


/* Text */

.overview-info {
    min-width: 0;
}

.overview-info h2 {
    margin: 0 0 6px;

    color: #07125c;

    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.overview-info p {
    margin: 0;

    color: #4f5664;

    font-size: 16px;
    line-height: 1.35;
}


/* =========================================================
   MOBILE MEMBERSHIP OVERVIEW
========================================================= */

@media only screen and (max-width: 767px) {

    .membership-overview {
        padding: 36px 14px 45px;
    }


    /* Heading */

    .membership-overview-title {
        gap: 13px;
        margin-bottom: 25px;
    }

    .membership-overview-title h2 {
        font-size: 23px;
    }

    .membership-overview-title span {
        width: 40px;
    }


    /* Force Bootstrap row into 2 x 2 grid */

    .membership-overview-grid {
        display: grid !important;

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

        gap: 14px;

        width: 100%;

        margin: 0 !important;
    }


    .membership-overview-grid .overview-col {
        width: 100% !important;
        max-width: none !important;

        flex: none !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    /* Cards stay HORIZONTAL */

    .membership-overview .overview-card {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 12px;

        min-height: 118px;

        margin: 0;

        padding: 16px 14px;

        border-radius: 16px;
    }


    /* Smaller icon */

    .membership-overview .overview-icon {
        width: 52px;
        height: 52px;

        flex: 0 0 52px;

        font-size: 20px;
    }


    /* Text */

    .membership-overview .overview-info {
        flex: 1;
        min-width: 0;
    }

    .membership-overview .overview-info h2 {
        margin: 0 0 5px;

        font-size: 29px;
        line-height: 1;
    }

    .membership-overview .overview-info p {
        margin: 0;

        font-size: 14px;
        line-height: 1.25;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media only screen and (max-width: 390px) {

    .membership-overview {
        padding-left: 10px;
        padding-right: 10px;
    }

    .membership-overview-title {
        gap: 9px;
    }

    .membership-overview-title h2 {
        font-size: 20px;
    }

    .membership-overview-title span {
        width: 26px;
    }

    .membership-overview-grid {
        gap: 10px;
    }

    .membership-overview .overview-card {
        min-height: 108px;

        padding: 13px 10px;

        gap: 9px;
    }

    .membership-overview .overview-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;

        font-size: 18px;
    }

    .membership-overview .overview-info h2 {
        font-size: 26px;
    }

    .membership-overview .overview-info p {
        font-size: 13px;
    }

}

/* =========================================================
   VERY SMALL PHONES
========================================================= */


@media only screen and (max-width: 960px) {
    .count_area {
        margin-top: 0px;
    }
}

 
@media only screen and (max-width: 480px) {
    .home_ps {
        left: 38%;
		top: 70% !important;
        display: block;
    }
}

/* =========================================================
   MEMBERS DIRECTORY HERO
========================================================= */


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


/* =========================================================
   DIRECTORY FEATURE STRIP
========================================================= */


/* Push directory content below floating feature strip */

.member-directory-hero + .section-padding {
    padding-top: 85px;
}


/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    

    

    

    

    

    

    .member-directory-hero .member-breadcrumb {
        justify-content: center;
    }

}


/* =========================================================
   EDIT MEMBER HERO
========================================================= */


.member-edit-hero .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   FEATURE STRIP
========================================================= */


/* Give the form room below floating strip */

.member-edit-hero + .section-padding {
    padding-top: 85px;
}


/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    

    

    

    

    

    

    .member-edit-hero .member-breadcrumb {
        justify-content: center;
    }

}


/* =========================================================
   MOBILE MEMBER DIRECTORY CARDS
========================================================= */

@media only screen and (max-width: 767px) {

    .member-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* Entire card */
    .member-card {
        padding: 14px;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(23, 23, 36, 0.06);
    }


    /* Member name */
    .member-card-header {
        margin-bottom: 15px;

        padding: 11px 14px;

        border-radius: 8px;

        font-size: 19px;
        line-height: 1.3;
    }


    /* Text LEFT - Photo RIGHT */
    .member-card-body {
        display: grid !important;

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

        gap: 16px;

        align-items: start !important;

        width: 100%;
    }


    /* MEMBER INFORMATION */

    .member-info {
        grid-column: 1;
        grid-row: 1;

        min-width: 0;
    }


    .member-info p {
        margin: 0 0 10px;

        font-size: 14px;
        line-height: 1.45;

        color: #545b65;
    }


    .member-info p strong {
        color: #343a40;
        font-weight: 700;
    }


    /* PHOTO */

    .member-photo-large {
        grid-column: 2;
        grid-row: 1;

        width: 115px !important;
        height: 145px !important;

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

        margin: 0 !important;
    }


    .member-photo-large img {
        width: 100%;
        height: 145px;

        object-fit: contain;

        border-radius: 8px;
    }


    .no-photo-large {
        width: 105px;
        height: 135px;

        font-size: 12px;

        border-radius: 8px;
    }


    /* View Profile button */

    .member-info .btn {
        display: inline-flex;

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

        gap: 7px;

        margin-top: 5px;

        padding: 9px 14px;

        border-radius: 8px;

        font-size: 13px;
    }

}

.member-info .btn {
    background: #ffffff;
    color: #525fe1;
    border: 1px solid #d9dcef;
}

/* =========================================================
   MEMBER PROFILE HERO
========================================================= */


.member-profile-hero .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   MEMBER PROFILE FEATURE STRIP
========================================================= */


/* Room for floating cards */

.member-profile-hero + .section-padding {
    padding-top: 85px;
}


/* =========================================================
   MOBILE
========================================================= */


@media only screen and (max-width: 767px) {

    

    

    

    

    

    

    .member-profile-hero .member-breadcrumb {
        justify-content: center;
    }

}


/* =========================================================
   MEMBER PROFILE DETAIL EXTRAS
========================================================= */

.profile-member-number {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.profile-member-number i {
    color: #525fe1;
}


/* Detail icons */

.member-profile-info p strong i {
    width: 18px;
    margin-right: 5px;

    color: #525fe1;

    text-align: center;
}


/* Status badge */

.profile-status {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 13px;
    font-weight: 600;
}

.profile-status-active {
    background: #e8f8ef;
    color: #169b62;
}


/* Mobile */

@media only screen and (max-width: 767px) {

    .member-profile-info p {
        display: flex;
        align-items: center;

        gap: 4px;
    }

    .member-profile-info p strong {
        display: inline-flex;
        align-items: center;

        white-space: nowrap;
    }

    .member-profile-info p strong i {
        width: 14px;

        margin-right: 3px;

        font-size: 11px;
    }

    .profile-status {
        padding: 3px 8px;

        font-size: 12px;
    }

}

/* =========================================================
   MEMBER VIEW ACCORDION
========================================================= */

.member-accordion {
    margin-top: 30px;
}

.member-accordion-item {
    margin-bottom: 16px;
}


/* Heading becomes clickable */

.member-accordion-toggle {
    width: 100%;

    border: 0;

    cursor: pointer;

    text-align: left;

    display: flex;
    align-items: center;

    margin-top: 0;

    font-family: inherit;
}


/* Keep heading text taking available width */

.member-accordion-toggle .member-form-heading-text {
    flex: 1;
}


/* Chevron */

.member-accordion-chevron {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    margin-left: 15px;

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

    border-radius: 8px;

    color: #ffffff;

    transition: transform 0.25s ease;
}


/* Rotate arrow when open */

.member-accordion-item.active
.member-accordion-chevron {
    transform: rotate(180deg);
}


/* Accordion content hidden by default */

.member-accordion-content {
    display: none;
}


/* Open section */

.member-accordion-item.active
.member-accordion-content {
    display: block;
}


/* Join the content card to blue heading */

.member-accordion-content .profile-section {
    margin-bottom: 0;

    border-top: 0;

    border-radius: 0 0 10px 10px;
}


/* =========================================================
   MOBILE ACCORDION
========================================================= */

@media only screen and (max-width: 575px) {

    .member-accordion {
        margin-top: 22px;
    }

    .member-accordion-item {
        margin-bottom: 12px;
    }

    .member-accordion-toggle {
        padding: 13px 14px;
    }

    .member-accordion-toggle
    .member-form-heading-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 17px;
    }

    .member-accordion-toggle
    .member-form-heading-text h3 {
        font-size: 16px !important;
    }

    .member-accordion-toggle
    .member-form-heading-text p {
        font-size: 11px;
        line-height: 1.35;
    }

    .member-accordion-chevron {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        margin-left: 8px;

        font-size: 12px;
    }

}


.edit-current-photo img {
    width: 200px;
}

/* =========================================================
   MEMBER SUCCESS PAGE
========================================================= */


.member-success-hero .container {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;
}


/* Card */

.member-success-card {
    max-width: 720px;

    margin: 0 auto;

    padding: 42px 38px;

    background: #ffffff;

    border: 1px solid #e8e9ef;
    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 15px 45px rgba(23,23,36,0.07);
}


/* Check */

.member-success-check {
    width: 78px;
    height: 78px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    background: #e8f8ef;

    color: #169b62;

    font-size: 34px;
}


/* Heading */

.member-success-card h2 {
    margin: 0 0 10px;

    color: #07125c;

    font-size: 28px;
    font-weight: 700;
}

.member-success-message {
    margin: 0 auto 25px;

    max-width: 520px;

    color: #666d78;

    font-size: 15px;
    line-height: 1.6;
}


/* Member Number */

.member-success-number {
    display: inline-flex;
    flex-direction: column;

    min-width: 260px;

    padding: 16px 22px;

    margin-bottom: 30px;

    background: #f6f7ff;

    border: 1px solid #e1e4ff;
    border-radius: 12px;
}

.member-success-number span {
    margin-bottom: 4px;

    color: #7b8190;

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.member-success-number strong {
    color: #525fe1;

    font-size: 25px;
    font-weight: 700;
}


/* Actions */

.member-success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 20px;
    gap: 12px;
}

.member-success-btn {
    min-height: 48px;

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

    gap: 8px;


    padding: 0 20px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: 0.2s ease;
}


/* Add Another */

.member-success-btn-primary {
    background: #525fe1;
    color: #ffffff;

    border: 1px solid #525fe1;
}

.member-success-btn-primary:hover {
    background: #414dcc;
    color: #ffffff;
}


/* View Members */

.member-success-btn-outline {
    background: #ffffff;
    color: #525fe1;

    border: 1px solid #525fe1;
}

.member-success-btn-outline:hover {
    background: #525fe1;
    color: #ffffff;
}


/* Dashboard */

.member-success-btn-light {
    background: #f6f7f9;
    color: #4e5561;

    border: 1px solid #e1e3e8;
}

.member-success-btn-light:hover {
    background: #eceef2;
    color: #30353d;
}


/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 575px) {

    

    .member-success-hero .container {
        flex-direction: column;

        text-align: center;
    }

    

    

    

    .member-success-card {
        padding: 30px 18px;

        border-radius: 16px;
    }

    .member-success-card h2 {
        font-size: 23px;
    }

    .member-success-number {
        width: 100%;
        min-width: 0;
    }

    .member-success-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .member-success-btn {
        width: 100%;

        min-height: 50px;
    }

}

/* =========================================================
   REPORTS PAGE
========================================================= */

.reports-hero .container {
  position: relative;
  z-index: 2;
}


.reports-hero + .section-padding {
  padding-top: 85px;
}
.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.report-summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #e7e9ef;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(23, 23, 36, 0.05);
}
.report-summary-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eff0ff;
  color: #525fe1;
  font-size: 21px;
}
.report-summary-icon.report-active {
  background: #e8f8ef;
  color: #169b62;
}
.report-summary-icon.report-female {
  background: #fff0fa;
  color: #8c3b86;
}
.report-summary-icon.report-baptized {
  background: #e9fbff;
  color: #339bc7;
}
.report-summary-icon.report-warning {
  background: #fff4e7;
  color: #e58a22;
}
.report-summary-icon.report-birthday {
  background: #fff0f0;
  color: #ef6767;
}
.report-summary-card span {
  display: block;
  margin-bottom: 3px;
  color: #7b8193;
  font-size: 13px;
}
.report-summary-card strong {
  display: block;
  color: #07125c;
  font-size: 27px;
  line-height: 1;
  font-weight: 700;
}
.report-accordion-list {
  margin-top: 15px;
}
.report-section-card {
  background: #fff;
  border: 1px solid #e6e8ed;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 25px;
}
.report-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 30px;
  align-items: center;
}
.report-chart {
  position: relative;
  min-height: 300px;
}
.report-chart-small {
  min-height: 270px;
}
.report-table-area {
  width: 100%;
  overflow-x: auto;
}
.report-table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.report-table th {
  padding: 13px 15px;
  background: #f6f7fb;
  color: #07125c;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.report-table td {
  padding: 13px 15px;
  border-top: 1px solid #eee;
  color: #4f5664;
  font-size: 14px;
  vertical-align: middle;
}
.report-table tbody tr:hover {
  background: #fafbff;
}
.report-action-cell {
  width: 80px;
  text-align: right;
}
.report-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  background: #f5f6ff;
  color: #525fe1;
  border: 1px solid #dfe2ff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.report-view-btn:hover {
  background: #525fe1;
  color: #fff;
}
.reports-page .dataTables_wrapper {
  margin-top: 0;
}
.reports-page .dataTables_wrapper .dataTables_filter,
.reports-page .dataTables_wrapper .dataTables_info,
.reports-page .dataTables_wrapper .dataTables_paginate {
  margin: 12px 0;
}
.reports-page .dataTables_wrapper .dataTables_filter input {
  min-height: 40px;
  padding: 7px 11px;
  margin-left: 8px;
  background: #fafbfc;
  border: 1px solid #dfe2e8;
  border-radius: 8px;
  outline: none;
}
.reports-page .dataTables_wrapper .dataTables_filter input:focus {
  background: #fff;
  border-color: #525fe1;
  box-shadow: 0 0 0 3px rgba(82, 95, 225, 0.1);
}
.reports-page .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 7px !important;
}
.reports-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.reports-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current:hover {
  background: #525fe1 !important;
  color: #fff !important;
  border-color: #525fe1 !important;
}
@media only screen and (max-width: 991px) {

  
  
  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-section-body {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {

  

  
  .reports-hero .member-breadcrumb {
    justify-content: center;
  }

  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .report-summary-card {
    padding: 15px 12px;
    gap: 10px;
  }
  .report-summary-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 18px;
  }
  .report-summary-card strong {
    font-size: 23px;
  }
  .report-summary-card span {
    font-size: 11px;
  }
  .report-section-card {
    padding: 15px;
  }
  .report-chart {
    min-height: 260px;
  }
  .report-table {
    min-width: 560px;
  }
}
@media only screen and (max-width: 390px) {
  .report-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .report-summary-card {
    padding: 12px 10px;
  }
  .report-summary-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 16px;
  }
  .report-summary-card strong {
    font-size: 21px;
  }
}
 /* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 575px) {

    .reports-page .dataTables_wrapper
    .dataTables_length,

    .reports-page .dataTables_wrapper
    .dataTables_filter {

        float: none;

        width: 100%;

        text-align: left;

        margin-bottom: 12px;
    }


    .reports-page .dataTables_wrapper
    .dataTables_filter input {

        width: 100%;

        min-width: 0;

        margin: 7px 0 0;
    }


    .reports-page .dataTables_wrapper
    .dataTables_info {

        float: none;

        text-align: center;
    }


    .reports-page .dataTables_wrapper
    .dataTables_paginate {

        float: none;

        text-align: center;

        margin-top: 10px;
    }

}

/* =========================================================
   MOBILE REPORT DATATABLES
========================================================= */

@media only screen and (max-width: 575px) {

    .reports-page .dataTables_wrapper .dataTables_filter {
        float: none !important;

        width: 100%;

        text-align: left !important;

        margin-bottom: 15px;
    }

    .reports-page .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        min-width: 0;

        margin: 7px 0 0;
    }


    .reports-page .dataTables_wrapper .dataTables_info {
        float: none !important;

        width: 100%;

        text-align: center !important;

        padding-top: 15px !important;
    }


    .reports-page .dataTables_wrapper .dataTables_paginate {
        float: none !important;

        width: 100%;

        text-align: center !important;

        margin-top: 10px !important;
    }


    .reports-page .dataTables_wrapper
    .dataTables_paginate
    .paginate_button {

        min-width: 34px;

        margin: 2px !important;
        padding: 6px 9px !important;

        font-size: 12px;
    }

}

/* =========================================================
   MOBILE REPORT PAGINATION
========================================================= */

@media only screen and (max-width: 575px) {

    .reports-page .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100%;
        text-align: left !important;
        margin-bottom: 14px;
    }

    .reports-page .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        min-width: 0;
        margin: 7px 0 0;
    }

    .reports-page .dataTables_wrapper .dataTables_info {
        float: none !important;
        width: 100%;
        text-align: center !important;
        padding-top: 15px !important;
    }

    .reports-page .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: center !important;
        padding-top: 10px !important;
    }

    .reports-page .dataTables_wrapper
    .dataTables_paginate
    .paginate_button {
        min-width: 34px;
        min-height: 34px;
        margin: 2px !important;
        padding: 5px 8px !important;
        font-size: 12px;
    }

}

/* =========================================================
   NATIVE REPORT PAGINATION
   10 records per page for detailed accordion reports
========================================================= */

.report-native-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: 100%;

    padding-top: 18px;
    margin-top: 4px;
}

.report-native-pagination-info {
    color: #7b8190;
    font-size: 13px;
}

.report-native-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.report-page-button {
    min-width: 38px;
    min-height: 36px;

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

    padding: 6px 11px;

    background: #ffffff;
    color: #525fe1;

    border: 1px solid #dfe2e8;
    border-radius: 7px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.report-page-button:hover:not(:disabled) {
    background: #f5f6ff;
    color: #525fe1;
    border-color: #525fe1;
}

.report-page-button.active {
    background: #525fe1;
    color: #ffffff;
    border-color: #525fe1;
}

.report-page-button.disabled,
.report-page-button:disabled {
    background: #f7f7f8;
    color: #b5b8c1;
    border-color: #e5e7eb;
    cursor: default;
}


/* =========================================================
   MOBILE NATIVE REPORT PAGINATION
========================================================= */

@media only screen and (max-width: 575px) {

    .report-native-pagination {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .report-native-pagination-info {
        width: 100%;
        text-align: center;
    }

    .report-native-pagination-controls {
        width: 100%;
        justify-content: center;
        gap: 4px;
    }

    .report-page-button {
        min-width: 34px;
        min-height: 34px;
        padding: 5px 8px;
        font-size: 12px;
    }

}


/* =========================================================
   USER MANAGEMENT PAGE
========================================================= */


.users-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 14px 17px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.users-alert-success {
    background: #eaf8ef;
    color: #147847;
    border: 1px solid #ccebd8;
}

.users-alert-error {
    background: #fff1f1;
    color: #b42318;
    border: 1px solid #f2c2c2;
}

.users-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.users-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(23,23,36,.05);
}

.users-summary-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff0ff;
    color: #525fe1;
    border-radius: 14px;
    font-size: 20px;
}

.users-summary-active {
    background: #e8f8ef;
    color: #169b62;
}

.users-summary-admin {
    background: #fff5d9;
    color: #dfa600;
}

.users-summary-inactive {
    background: #fff0f0;
    color: #e05858;
}

.users-summary-card span {
    display: block;
    margin-bottom: 4px;
    color: #7b8193;
    font-size: 12px;
}

.users-summary-card strong {
    display: block;
    color: #07125c;
    font-size: 27px;
    line-height: 1;
}

.users-form-heading,
.users-list-heading {
    margin-top: 0;
}

.users-form-card {
    padding: 25px;
    margin-bottom: 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.users-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.users-field-full {
    grid-column: 1 / -1;
}

.users-field > label {
    display: block;
    margin-bottom: 7px;
    color: #343a40;
    font-size: 14px;
    font-weight: 600;
}

.users-field > label > span {
    color: #dc3545;
}

.users-field input[type="text"],
.users-field input[type="email"],
.users-field input[type="password"],
.users-field select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d8dce3;
    border-radius: 9px;
    color: #333333;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.users-field input:focus,
.users-field select:focus {
    border-color: #525fe1;
    box-shadow: 0 0 0 3px rgba(82,95,225,.10);
}

.users-field small {
    display: block;
    margin-top: 7px;
    color: #7b8190;
    font-size: 12px;
}

.users-password-wrap {
    position: relative;
}

.users-password-wrap input {
    padding-right: 48px;
}

.users-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8a8f9b;
    cursor: pointer;
}

.users-switch {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 4px;
    cursor: pointer;
}

.users-switch input {
    display: none;
}

.users-switch-slider {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 46px;
    background: #c9ccd4;
    border-radius: 30px;
}

.users-switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
    transition: .2s ease;
}

.users-switch input:checked + .users-switch-slider {
    background: #169b62;
}

.users-switch input:checked + .users-switch-slider::after {
    transform: translateX(20px);
}

.users-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.users-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.users-btn-primary {
    background: #525fe1;
    color: #ffffff;
    border-color: #525fe1;
}

.users-btn-light {
    background: #ffffff;
    color: #525fe1;
    border-color: #d9dcef;
}

.users-table-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.users-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.users-table th {
    padding: 14px 16px;
    background: #f6f7fb;
    color: #07125c;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
}

.users-table td {
    padding: 14px 16px;
    border-top: 1px solid #eeeeee;
    color: #505764;
    font-size: 14px;
    vertical-align: middle;
}

.users-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.users-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff0ff;
    color: #525fe1;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.users-name-cell strong {
    display: block;
    color: #2e3440;
}

.users-name-cell small {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 7px;
    background: #f0f1ff;
    color: #525fe1;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.users-role-badge,
.users-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.users-role-admin {
    background: #fff5d9;
    color: #b17d00;
}

.users-role-user {
    background: #eff0ff;
    color: #525fe1;
}

.users-status-active {
    background: #e8f8ef;
    color: #169b62;
}

.users-status-inactive {
    background: #fff0f0;
    color: #d65353;
}

.users-status-badge i {
    font-size: 6px;
}

.users-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.users-inline-form {
    margin: 0;
}

.users-action-btn {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.users-action-edit {
    background: #f5f6ff;
    color: #525fe1;
    border-color: #dfe2ff;
}

.users-action-enable {
    background: #e8f8ef;
    color: #169b62;
    border-color: #ccebd8;
}

.users-action-disable {
    background: #fff5e8;
    color: #c97918;
    border-color: #f2ddbe;
}

.users-action-delete {
    background: #fff1f2;
    color: #dc3545;
    border-color: #ffcdd2;
}

.users-empty {
    padding: 30px !important;
    text-align: center;
    color: #8a8f9b !important;
}

@media only screen and (max-width: 991px) {
    .users-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    

    

    

    .users-hero .member-breadcrumb {
        justify-content: center;
    }

    .users-form-grid {
        grid-template-columns: 1fr;
    }

    .users-field-full {
        grid-column: auto;
    }
}

@media only screen and (max-width: 575px) {
    

    .users-summary-grid {
        gap: 10px;
    }

    .users-summary-card {
        padding: 14px 11px;
        gap: 10px;
    }

    .users-summary-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        font-size: 17px;
    }

    .users-summary-card strong {
        font-size: 22px;
    }

    .users-summary-card span {
        font-size: 10px;
    }

    .users-form-card {
        padding: 18px 15px;
    }

    .users-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .users-btn {
        width: 100%;
    }
}


/* =========================================================
   SHARED MEMBER ACTION AREA
========================================================= */

.shared-member-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid #e7e9ef;
}


/* =========================================================
   BASE ACTION BUTTON
========================================================= */

.member-action-btn {
    min-height: 48px;
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ICON */

.member-action-btn i {
    font-size: 14px;
}


/* =========================================================
   PRIMARY
   Save / Update / Edit
========================================================= */

.member-action-primary {
    background: #07125c;
    border-color: #07125c;
    color: #ffffff !important;

    box-shadow:
        0 5px 14px rgba(7, 18, 92, 0.18);
}

.member-action-primary:hover {
    background: #101f78;
    border-color: #101f78;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(7, 18, 92, 0.24);
}


/* =========================================================
   SECONDARY
   Cancel / Back
========================================================= */

.member-action-secondary {
    background: #ffffff;
    border-color: #dfe3ea;
    color: #4d5562 !important;
}

.member-action-secondary:hover {
    background: #f5f6f8;
    border-color: #d2d6de;
    color: #20242c !important;

    transform: translateY(-2px);
}


/* =========================================================
   DANGER
   Delete
========================================================= */

.member-action-danger {
    background: #ffffff;
    border-color: #efc7c7;
    color: #c62828 !important;
}

.member-action-danger:hover {
    background: #c62828;
    border-color: #c62828;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(198, 40, 40, 0.18);
}


/* =========================================================
   BUTTON ELEMENT RESET
========================================================= */

button.member-action-btn {
    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .shared-member-actions {
        flex-direction: column;
        align-items: stretch;

        gap: 10px;

        margin-top: 25px;
        padding-top: 20px;
    }

    .member-action-btn {
        width: 100%;
        min-height: 50px;
        padding: 0 18px;
    }

}

/* =========================================================
   MEMBERS SEARCH EMPTY / NO RESULTS
========================================================= */

.no-members-found {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 700px;
    margin: 25px auto 0;
    padding: 55px 30px;
    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(23, 23, 36, 0.05);
}

.no-members-found > i {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: #eff0ff;
    color: #525fe1;
    border-radius: 50%;
    font-size: 27px;
}

.no-members-found h3 {
    margin: 0 0 9px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #07125c !important;
    font-size: 22px !important;
    font-weight: 700;
    border-radius: 0 !important;
}

.no-members-found p {
    max-width: 500px;
    margin: 0 auto 20px;
    color: #717785;
    font-size: 14px;
    line-height: 1.7;
}

.member-search-prompt > i {
    background: #f0f1ff;
    color: #525fe1;
}

.no-members-found .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 18px;
    background: #525fe1;
    color: #ffffff;
    border: 1px solid #525fe1;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.no-members-found .btn:hover {
    background: #414dcc;
    border-color: #414dcc;
    color: #ffffff;
}

@media only screen and (max-width: 575px) {

    .no-members-found {
        padding: 38px 18px;
        border-radius: 14px;
    }

    .no-members-found > i {
        width: 60px;
        height: 60px;
        font-size: 23px;
    }

    .no-members-found h3 {
        font-size: 20px !important;
    }

    .no-members-found p {
        font-size: 13px;
    }

}
.shared-member-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #e7e9ef;
}

.member-action-btn {
    min-height: 48px;
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;
}


/* BACK / CANCEL */

.member-action-secondary {
    background: #ffffff !important;
    border-color: #dfe3ea !important;
    color: #4d5562 !important;
}

.member-action-secondary:hover {
    background: #f5f6f8 !important;
    border-color: #cdd2da !important;
    color: #20242c !important;
}


/* EDIT / SAVE */

.member-action-primary {
    background: #525fe1 !important;
    border-color: #525fe1 !important;
    color: #ffffff !important;

    box-shadow:
        0 5px 14px rgba(82, 95, 225, 0.20);
}

.member-action-primary:hover {
    background: #414dcc !important;
    border-color: #414dcc !important;
    color: #ffffff !important;

    transform: translateY(-2px);
}


/* DELETE */

.member-action-danger {
    background: #ffffff !important;
    border-color: #efc7c7 !important;
    color: #d93646 !important;
}

.member-action-danger:hover {
    background: #d93646 !important;
    border-color: #d93646 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
}


/* MOBILE */

@media only screen and (max-width: 767px) {

    .shared-member-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .member-action-btn {
        width: 100%;
        min-height: 50px;
    }

}


/* =========================================================
   CHURCH INFORMATION - PROFILE LAYOUT
========================================================= */

.church-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 55px;

    align-items: center;

    padding: 32px;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.church-profile-fields {
    min-width: 0;
}


/* Each field takes full width */

.church-profile-fields .row {
    display: block;
    margin-bottom: 20px;
}

.church-profile-fields .row:last-child {
    margin-bottom: 0;
}

.church-profile-fields .field {
    width: 100%;
    max-width: none;
}


/* Make the controls nice and wide */

.church-profile-fields select,
.church-profile-fields input,
.church-profile-fields .readonly-box {
    width: 100%;
}


/* =========================================================
   PHOTO SIDE
========================================================= */

.church-profile-photo {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.church-profile-photo-label {
    width: 100%;

    margin-bottom: 10px;

    color: #07125c;

    font-size: 14px;
    font-weight: 600;

    text-align: center;
}


/* PHOTO CARD */

.church-profile-photo-card {
    position: relative;

    width: 220px;
    height: 260px;

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

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f7f9ff,
            #edf1fb
        );

    border: 1px solid #e0e5ef;
    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(18, 32, 77, 0.08);
}


/* MEMBER PHOTO */

.church-member-photo {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;
}


/* =========================================================
   NO PHOTO
========================================================= */

.church-profile-no-photo {
    width: 100%;
    height: 100%;

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

    gap: 10px;

    color: #8a91a1;
}


.church-profile-no-photo i {
    width: 65px;
    height: 65px;

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

    background: #e8ecff;
    color: #525fe1;

    border-radius: 50%;

    font-size: 24px;
}


.church-profile-no-photo span {
    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   PHOTO UPLOAD BUTTON
========================================================= */

.member-photo-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    margin-top: 14px;
    padding: 0 18px;

    background: #525fe1;
    color: #ffffff !important;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}


.member-photo-upload-btn:hover {
    background: #414dcc;

    transform: translateY(-1px);
}


/* Hide ugly browser file input */

.member-photo-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    overflow: hidden;

    pointer-events: none;
}


.member-photo-help {
    display: block;

    margin-top: 7px;

    color: #9298a5;

    font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media only screen and (max-width: 991px) {

    .church-profile-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 30px;
    }

    .church-profile-photo-card {
        width: 190px;
        height: 230px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width: 767px) {

    .church-profile-layout {
        display: flex;
        flex-direction: column-reverse;

        gap: 30px;

        padding: 22px 18px;
    }


    .church-profile-fields {
        width: 100%;
    }


    .church-profile-photo {
        width: 100%;
    }


    .church-profile-photo-card {
        width: 170px;
        height: 205px;
    }


    .church-profile-photo-label {
        text-align: center;
    }

}

/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.church-mobile-header,
.church-mobile-menu,
.church-mobile-overlay {
    display: none;
}

@media only screen and (max-width: 1199px) {

    /* Hide desktop navigation */
    #navigation {
        display: none !important;
    }

    /* Fixed mobile header */
    .church-mobile-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: #ffffff;
        z-index: 9998;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .church-mobile-title {
        position: absolute;
        top: 0;
        left: 60px;
        right: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 17px;
        font-weight: 700;
        color: #222222;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .church-mobile-title:hover,
    .church-mobile-title:focus {
        color: #222222;
        text-decoration: none;
    }

    .church-mobile-header-icon {
        position: absolute;
        top: 0;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #222222;
        text-decoration: none;
    }

    .church-mobile-header-icon:hover,
    .church-mobile-header-icon:focus {
        color: #222222;
        text-decoration: none;
    }

    .church-mobile-header-left {
        left: 0;
    }

    .church-mobile-header-right {
        right: 0;
    }

    /* Page overlay */
    .church-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .church-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Slide-out menu */
    .church-mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        max-width: 88%;
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        z-index: 10000;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: left 0.3s ease;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    }

    .church-mobile-menu.active {
        left: 0;
    }

    /* Menu header */
    .church-mobile-menu-header {
        position: relative;
        display: flex;
        align-items: center;
        padding: 22px 20px;
    }

    .church-mobile-logo {
        flex: 0 0 55px;
    }

    .church-mobile-logo img {
        display: block;
        width: 50px !important;
        max-width: 50px;
        height: auto;
    }

    .church-mobile-church-info {
        min-width: 0;
        padding-left: 12px;
        padding-right: 25px;
    }

    .church-mobile-church-info h4 {
        margin: 0 0 3px;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
        color: #222222;
    }

    .church-mobile-church-info p {
        margin: 0;
        font-size: 12px;
        color: #888888;
    }

    /* Close button */
    .church-mobile-close {
        position: absolute;
        top: 12px;
        right: 10px;
        width: 38px;
        height: 38px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        font-size: 18px;
        color: #777777;
        cursor: pointer;
    }

    .church-mobile-close:hover,
    .church-mobile-close:focus {
        color: #222222;
        outline: none;
    }

    /* Logged-in user */
    .church-mobile-user {
        display: flex;
        align-items: center;
        margin: 0 20px 15px;
        padding: 12px;
        background: #f7f7f7;
        border-radius: 8px;
    }

    .church-mobile-user-icon {
        margin-right: 10px;
        font-size: 25px;
        color: #525fe1;
    }

    .church-mobile-user-details {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .church-mobile-user-details span {
        margin-bottom: 1px;
        font-size: 11px;
        color: #888888;
    }

    .church-mobile-user-details strong {
        font-size: 14px;
        font-weight: 600;
        color: #222222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Divider */
    .church-mobile-divider {
        height: 1px;
        margin: 8px 20px 18px;
        background: #eeeeee;
    }

    /* Sections */
    .church-mobile-section {
        padding: 0 20px;
    }

    .church-mobile-section-title {
        margin: 0 0 8px;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 700;
        color: #888888;
        text-transform: uppercase;
        letter-spacing: 0.7px;
    }

    /* Links */
    .church-mobile-links a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 8px 5px;
        border-bottom: 1px solid #f1f1f1;
        color: #333333;
        text-decoration: none;
        transition: padding-left 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .church-mobile-links a > i:first-child {
        flex: 0 0 35px;
        width: 35px;
        font-size: 17px;
        text-align: left;
        color: #525fe1;
    }

    .church-mobile-links a span {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
    }

    .church-mobile-links a .menu-arrow {
        flex: 0 0 auto;
        width: auto;
        margin-left: 10px;
        font-size: 12px;
        color: #aaaaaa;
    }

    .church-mobile-links a:hover,
    .church-mobile-links a:focus {
        padding-left: 9px;
        background: #fafafa;
        text-decoration: none;
        outline: none;
    }

    .church-mobile-links a.active {
        background: #f5f6ff;
        border-radius: 8px;
    }

    .church-mobile-links a.active span {
        font-weight: 700;
        color: #525fe1;
    }

    /* Space for fixed mobile header */
    body {
        padding-top: 60px;
    }
}

@media only screen and (min-width: 1200px) {
    .church-mobile-header,
    .church-mobile-menu,
    .church-mobile-overlay {
        display: none !important;
    }
}
/* =========================================================
   PASSWORD RESET

   Paste at the END of assets/css/custom.css.
   Matches the existing .login-error and .login-button styles.
========================================================= */

/* Green message: "check your email" / "password changed" */
.login-success {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #effaf3;
    border: 1px solid #b7e4c7;
    color: #146c43;
    padding: 12px 15px;
    border-radius: 9px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.login-success i {
    margin-top: 3px;
}

/* "Forgot password?" under the password box */
.login-forgot {
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
}

.login-forgot a,
.login-links a {
    color: #525fe1;
    text-decoration: none;
    font-weight: 500;
}

.login-forgot a:hover,
.login-links a:hover {
    text-decoration: underline;
}

/* "Back to Login" under a form */
.login-links {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* A link that looks like the big blue login button */
.login-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.login-button-link:hover {
    color: #ffffff;
}


/* =========================================================
   LOGO CARD
   The logo sits in its own card above the sign-in card.
   logo.png has a lot of empty space above and below the
   artwork; aspect-ratio + object-fit trim it away.
========================================================= */

.login-brand-card {
    padding: 22px 26px;
    margin-bottom: 18px;
    text-align: center;
}

.login-brand-card .login-brand {
    margin-bottom: 0;
}

.login-brand-card .login-logo {
    width: 100%;
    max-width: 340px;
    height: auto;
    aspect-ratio: 2.35 / 1;
    object-fit: cover;
    object-position: 50% 43%;
    margin: 0 auto;
    display: block;
}

.login-brand-card .login-brand p {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: #0b104a;
}

@media (max-width: 575px) {
    .login-brand-card {
        padding: 18px 16px;
        margin-bottom: 14px;
    }
}/* =========================================================
   MEMBER DIRECTORY - ROW LIST

   Replaces the two-column cards. Paste at the END of
   assets/css/custom.css.

   The old .member-grid / .member-card rules can stay where
   they are - nothing uses them any more - or be deleted.
========================================================= */

.member-list {
    display: block;
    margin-top: 5px;
}


/* One member = one row */

.member-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.6fr)   
        minmax(0, 1.3fr)   
        minmax(0, 1fr)     
        110px              
        140px              
        135px;             /* view profile   */

    align-items: center;
    gap: 18px;

    padding: 14px 20px;
    margin-bottom: 10px;

    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 12px;

    box-shadow: 0 4px 14px rgba(23, 23, 36, 0.04);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.member-row:hover {
    border-color: #cdd2f5;
    box-shadow: 0 8px 22px rgba(23, 23, 36, 0.08);
}


/* Column headings */

.member-row-head {
    padding: 4px 20px 8px;
    margin-bottom: 6px;

    background: transparent;
    border: 0;
    box-shadow: none;

    color: #7b8193;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.member-row-head:hover {
    border: 0;
    box-shadow: none;
}


/* Photo + name */

.member-row-person {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.member-row-photo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #eceef2;
}

.member-row-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #eff0ff;
    color: #525fe1;
    font-size: 17px;
}

.member-row-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-row-name strong {
    color: #07125c;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-row-name small {
    color: #8a8f9b;
    font-size: 12px;
}


/* Ordinary cells */

.member-row-cell {
    min-width: 0;
    color: #4f5664;
    font-size: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-row-cell a {
    color: #4f5664;
    text-decoration: none;
}

.member-row-cell a:hover {
    color: #525fe1;
}

.member-row-empty {
    color: #b5b8c1;
}


/* Status badge */

.member-status-badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 11px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: 600;
}

.member-status-active {
    background: #e8f8ef;
    color: #169b62;
}

.member-status-other {
    background: #f1f2f6;
    color: #6b7280;
}


/* View Profile button */

.member-row-action {
    text-align: right;
}

.member-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 15px;

    background: #f5f6ff;
    color: #525fe1;
    border: 1px solid #dfe2ff;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    transition: 0.2s ease;
}

.member-row-btn:hover {
    background: #525fe1;
    color: #ffffff;
    border-color: #525fe1;
}


/* =========================================================
   TABLET - drop the least important columns
========================================================= */

@media only screen and (max-width: 1199px) {

    .member-row {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(0, 1.2fr)
            110px
            135px;
    }

    /* Hide Position and Cell. Targeted by name rather than by
       position, because nth-of-type would also count the photo
       and button columns and hide the wrong ones. */
    .member-row-cell[data-label="Position"],
    .member-row-cell[data-label="Cell"],
    .member-row-head span:nth-child(3),
    .member-row-head span:nth-child(5) {
        display: none;
    }
}


/* =========================================================
   MOBILE - each row becomes a small card
========================================================= */

@media only screen and (max-width: 767px) {

    /* headings make no sense once stacked */
    .member-row-head {
        display: none;
    }

    .member-row {
        grid-template-columns: 1fr;
        gap: 0;

        padding: 15px;
        margin-bottom: 12px;
    }

    .member-row-person {
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid #f0f1f4;
    }

    .member-row-name strong {
        font-size: 16px;
        white-space: normal;
    }

    /* show every field again, with its label in front */
    .member-row-cell {
        display: flex !important;
        align-items: baseline;
        gap: 8px;

        padding: 4px 0;
        white-space: normal;
    }
  
    .member-row-cell::before {
        content: attr(data-label) ":";

        flex: 0 0 72px;

        color: #8a8f9b;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .member-row-action {
        margin-top: 12px;
        text-align: left;
    }

    .member-row-btn {
        width: 100%;
        min-height: 44px;
    }
}/* =========================================================
   PAGINATION "..." SEPARATOR

   Paste at the END of assets/css/custom.css.

   Only appears once a report runs past about five pages, so
   the page numbers stay on one line.
========================================================= */

.report-page-gap {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #b5b8c1;
    font-size: 13px;
    font-weight: 600;
}/* =========================================================
   MEMBER PROFILE PAGE

   Paste at the END of assets/css/custom.css.

   The old .member-profile-hero and .member-profile-card
   rules can stay where they are - the profile page no
   longer uses them - or be deleted later.
========================================================= */

.member-profile-page {
    padding-top: 25px;
}


/* Delete is a small form, so it must not add spacing */


.pbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 40px;
    padding: 0 15px;

    background: #f5f6ff;
    color: #525fe1;
    border: 1px solid #dfe2ff;
    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: 0.2s ease;
}

.pbtn:hover {
    background: #525fe1;
    color: #ffffff;
    border-color: #525fe1;
}

.pbtn-primary {
    background: #525fe1;
    color: #ffffff;
    border-color: #525fe1;
}

.pbtn-primary:hover {
    background: #414dcc;
    color: #ffffff;
}

.pbtn-danger {
    background: #ffffff;
    color: #d93646;
    border-color: #efc7c7;
}

.pbtn-danger:hover {
    background: #d93646;
    color: #ffffff;
    border-color: #d93646;
}


/* ---------- "Member record updated" ---------- */

.profile-saved {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 18px;
    padding: 13px 16px;

    background: #e8f8ef;
    border: 1px solid #ccebd8;
    border-radius: 10px;

    color: #147847;
    font-size: 14px;
    font-weight: 600;
}


/* ---------- header card ---------- */

.profile-head {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 26px;
    align-items: center;

    padding: 26px 28px;

    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(23, 23, 36, 0.05);
}

.profile-head-photo {
    text-align: center;
}

.profile-head-photo img,
.profile-head-nophoto {
    width: 150px;
    height: 170px;

    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #eceef2;

    display: block;
}

.profile-head-photo img {
    cursor: zoom-in;
}

.profile-head-photo small {
    display: block;
    margin-top: 7px;
    color: #9298a5;
    font-size: 11px;
}

.profile-head-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #eff0ff;
    color: #525fe1;
    font-size: 40px;
}

.profile-head h1 {
    margin: 0 0 8px;
    color: #07125c;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.profile-head-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 16px;

    color: #7b8190;
    font-size: 14px;
}

.profile-head-sub i {
    margin-right: 3px;
    color: #a3a8b8;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 11px;
    border-radius: 20px;

    background: #eff0ff;
    color: #525fe1;

    font-size: 12px;
    font-weight: 700;
}

.profile-chip.ok {
    background: #e8f8ef;
    color: #169b62;
}

.profile-chip.muted {
    background: #f1f2f6;
    color: #6b7280;
}

.profile-chip i {
    color: inherit;
    margin: 0;
}

.profile-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-nocontact {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #c97918;
    font-size: 13px;
    font-weight: 600;
}


/* ---------- facts strip ---------- */

.profile-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin: 18px 0 8px;
}

.profile-fact {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 14px;
}

.profile-fact-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

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

    background: #eff0ff;
    color: #525fe1;
    border-radius: 12px;

    font-size: 17px;
}

.profile-fact-icon.pink  { background: #fff0f0; color: #ef6767; }
.profile-fact-icon.green { background: #e8f8ef; color: #169b62; }
.profile-fact-icon.blue  { background: #e9fbff; color: #339bc7; }

.profile-fact span {
    display: block;
    color: #8a8f9b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.profile-fact strong {
    display: block;
    margin-top: 2px;
    color: #07125c;
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

/* Written as span.profile-fact-blank so it outranks the
   ".profile-fact span" label rule above. Without the element
   name it loses, and "Not recorded" prints in capitals. */
.profile-fact span.profile-fact-blank {
    
    color: #b5b8c1;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}


/* ---------- tablet ---------- */

@media only screen and (max-width: 991px) {

    .profile-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- phone ---------- */

@media only screen and (max-width: 767px) {

    .profile-head {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
    }

    .profile-head-photo img,
    .profile-head-nophoto {
        width: 105px;
        height: 125px;
        font-size: 30px;
    }

    .profile-head-photo small {
        display: none;
    }
 
    .profile-head h1 {
        font-size: 21px;
    }

    .profile-head-sub {
        gap: 7px;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .profile-contact .pbtn {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-facts {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   EDIT MEMBER PAGE

   Paste at the END of assets/css/custom.css.

   Needs the member profile CSS already added (it reuses
   .profile-topbar, .pbtn and .profile-head from that block).

   The old .member-edit-hero rules can stay where they are -
   the edit page no longer uses them - or be deleted later.
========================================================= */


/* ---------- "Editing member record" label ---------- */

.profile-editing-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 6px;

    color: #c97918;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* A soft amber edge, so an edit page is never mistaken for
   the read-only profile at a glance. */

.profile-head-editing {
    border-left: 4px solid #f0b429;
}


/* ---------- save bar fixed to the bottom ---------- */

.edit-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;

    padding: 12px 0;

    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e3e6ee;

    box-shadow: 0 -6px 24px rgba(23, 23, 36, 0.08);
}

.edit-savebar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.edit-savebar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #7b8190;
    font-size: 13px;
    font-weight: 600;
}

/* Turns amber once something has been typed */
.edit-savebar-status.is-dirty {
    color: #c97918;
}

.edit-savebar-actions {
    display: flex;
    gap: 10px;
}

/* The save bar's buttons are a little taller than the ones
   in the top bar - they are the main action on this page. */
.edit-savebar .pbtn {
    min-height: 44px;
    padding: 0 20px;
    font-size: 14px;
}


/* ---------- phone ---------- */

@media only screen and (max-width: 767px) {

    .edit-savebar {
        padding: 10px 0;
    }

    .edit-savebar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    .edit-savebar-status {
        justify-content: center;
        font-size: 12px;
    }

    .edit-savebar-actions {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
    }

    .edit-savebar .pbtn {
        width: 100%;
        justify-content: center;
    }

    .profile-head-editing {
        border-left-width: 3px;
    }
}


/* ---------- printing ---------- */

@media print {

    .edit-savebar {
        display: none;
    }
}
/* =========================================================
   MEMBERS DIRECTORY - SLIM HEADER

   Paste at the END of assets/css/custom.css.

   Needs the member profile CSS already added (it reuses
   .pbtn from that block).

   The old tall .member-directory-hero rules stay where they
   are; .member-directory-hero-slim overrides the height and
   the feature strip is no longer rendered.
========================================================= */


/* On the hero's background image, plain white reads better
   than the pale lilac used elsewhere. */
.directory-slim-actions .pbtn {
    background: rgba(255, 255, 255, 0.92);
}

.directory-slim-actions .pbtn:hover {
    background: #525fe1;
}

.directory-slim-actions .pbtn-primary,
.directory-slim-actions .pbtn-primary:hover {
    background: #525fe1;
    color: #ffffff;
}


/* The tall hero used to overlap the section below it, so
   that section had extra top padding. Not needed now. */
.member-directory-hero-slim + .section-padding {
    padding-top: 40px;
}


/* ---------- phone ---------- */

@media only screen and (max-width: 767px) {

    

    

    

    

    

    .directory-slim-actions .pbtn {
        width: 100%;
        justify-content: center;
    }

    /* Add Member is the main action - give it the full row */
    .directory-slim-actions .pbtn-primary {
        grid-column: 1 / -1;
    }
}
/* =========================================================
   DASHBOARD

   Paste at the END of assets/css/custom.css.

   Needs the member profile CSS already added - the header
   buttons reuse .pbtn from that block.

   The old .home_bg hero and .membership-overview rules stay
   where they are; the dashboard no longer uses them.
========================================================= */

.dash-page {
    padding: 28px 0 60px;
    background: #f7f7f5;
}


/* ---------- headline numbers ---------- */

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 18px;
}

.dash-kpi {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 18px 20px;

    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(23, 23, 36, 0.04);
}

.dash-kpi-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;

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

    border-radius: 50%;
    font-size: 21px;
}

/* Tints, not solid blocks - a saturated circle this size
   would shout louder than the number beside it. */
.dash-kpi-icon.is-indigo { background: #eff0ff; color: #525fe1; }
.dash-kpi-icon.is-green  { background: #e8f8ef; color: #169b62; }
.dash-kpi-icon.is-blue   { background: #e9fbff; color: #339bc7; }
.dash-kpi-icon.is-pink   { background: #fff0f0; color: #ef6767; }

.dash-kpi-body {
    min-width: 0;
}

.dash-kpi-label {
    display: block;

    color: #8a8f9b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-kpi-value {
    display: block;
    margin: 4px 0 2px;

    color: #07125c;

    /* Proportional figures - equal-width digits make a large
       number look loose at this size. */
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.dash-kpi-note {
    display: block;
    color: #7b8190;
    font-size: 13px;
}


/* ---------- cards ---------- */

.dash-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;

    /* Cards end where their content ends. Stretching them
       to match the tallest one in the row leaves a short
       card with a large empty floor. */
    align-items: start;
}

.dash-grid-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.dash-grid-1-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Two cards sharing one column of a grid, stacked.

   A grid cell takes one child. Two cards dropped straight
   into the grid would be treated as two cells and shunt
   everything after them sideways, so they go in a stack of
   their own.

   The 16px repeats .dash-grid's gap, so the seam between
   these two lines up with the gap beside them. */
.dash-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.dash-column > .dash-card {
    margin-bottom: 0;
}

.dash-card {
    padding: 22px 24px;

    background: #ffffff;
    border: 1px solid #e7e9ef;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(23, 23, 36, 0.04);

    margin-bottom: 18px;
}

.dash-grid .dash-card {
    margin-bottom: 0;
}

.dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;

    margin-bottom: 18px;
}

.dash-card-head h2 {
    margin: 0;
    color: #07125c;
    font-size: 17px;
    font-weight: 700;
}

.dash-card-head span {
    color: #8a8f9b;
    font-size: 13px;
}

.dash-card-link {
    color: #525fe1;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.dash-card-link:hover {
    text-decoration: underline;
}


/* ---------- chart boxes ----------

   Sized to include the x-axis labels, not just the plot,
   so a card never grows its own little scrollbar.          */

.dash-chart {
    position: relative;
    height: 230px;
}

/* A canvas is inline by default, so it sits on the text
   baseline and overhangs its box by a few pixels - which
   gives the card a tiny nested scrollbar. */
.dash-chart canvas {
    display: block;
}

.dash-chart-tall {
    height: 280px;
}


/* ---------- part-to-whole bars ---------- */

.dash-splits {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-split-title {
    display: block;
    margin-bottom: 9px;

    color: #8a8f9b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-split-bar {
    display: flex;

    /* A 2px surface gap separates the segments - a drawn
       border around each one would read as noise. */
    gap: 2px;

    height: 14px;
    margin-bottom: 11px;

    border-radius: 7px;
    overflow: hidden;
}

.dash-split-seg {
    display: block;
    height: 100%;
    min-width: 3px;
}

/* Two hues that stay apart for colourblind readers, checked
   against this white card rather than assumed. */
.dash-split-seg.is-one  { background: #525fe1; }
.dash-split-seg.is-two  { background: #eb6834; }
.dash-split-seg.is-none { background: #c3c2b7; }

.dash-split-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.dash-split-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    /* Labels wear text ink, never the series colour - the
       dot beside them carries the identity. */
    color: #52514e;
    font-size: 13px;
}

.dash-split-item strong {
    color: #07125c;
    font-weight: 700;
}

.dash-split-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 10px;
}

.dash-split-dot.is-one  { background: #525fe1; }
.dash-split-dot.is-two  { background: #eb6834; }
.dash-split-dot.is-none { background: #c3c2b7; }


/* ---------- ranked bar list ----------

   Bars drawn in plain HTML, not on a canvas. Five labelled
   rows in half a card is exactly where a chart library
   starts truncating labels - and unlike a canvas, these
   come out on the printed page.                            */

.dash-mini-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;

    margin: 22px 0 12px;
    padding-top: 18px;
    border-top: 1px solid #eef0f4;
}

.dash-mini-head > span {
    color: #8a8f9b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-mini-head a {
    color: #525fe1;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dash-mini-head a:hover {
    text-decoration: underline;
}

.dash-rank {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dash-rank-row {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
}

/* One line, clipped. A wrapping label would push its own
   bar out of line with every other bar in the column. */
.dash-rank-name {
    color: #52514e;
    font-size: 13px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-rank-track {
    height: 16px;
    background: #f1f1ef;
    border-radius: 5px;
}

.dash-rank-fill {
    display: block;
    height: 100%;
    min-width: 3px;

    background: #525fe1;
    border-radius: 5px;
}

/* The number sits outside the bar, in text ink. A number
   printed on the bar vanishes when the bar is short. */
.dash-rank-val {
    color: #07125c;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}


/* ---------- things worth chasing ---------- */

.dash-flags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef0f4;
}

.dash-flag {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;

    background: #fbfbfd;
    border: 1px solid #e7e9ef;
    border-radius: 10px;

    color: #52514e;
    font-size: 13px;
    text-decoration: none;

    transition: 0.2s ease;
}

.dash-flag:hover {
    border-color: #cdd2f5;
    background: #f5f6ff;
    color: #52514e;
}

.dash-flag i {
    color: #c97918;
    font-size: 15px;
}

.dash-flag strong {
    color: #07125c;
}


/* ---------- lists ---------- */

.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 0;
    border-bottom: 1px solid #f0f1f4;
}

.dash-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dash-list-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

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

    border-radius: 10px;
    font-size: 14px;
}

/* Birthday and anniversary used to share one tint, which
   is exactly why you could not tell them apart. They now
   carry the two chart hues. */
.dash-list-icon.is-birthday    { background: #eff0ff; color: #525fe1; }
.dash-list-icon.is-anniversary { background: #fdeee8; color: #c4511f; }
.dash-list-icon.is-member      { background: #f1f1ef; color: #6d6b64; }


/* ---------- what kind of date this is ----------

   The icon is decoration; this is the label. Same two
   hues as the charts above, so "anniversary" looks the
   same wherever it appears on the page. */

.dash-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;

    border-radius: 5px;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    /* It sits inside a <small>, so the line height is
       pinned - otherwise the tag makes the row taller
       than the rows without one. */
    line-height: 16px;
    vertical-align: 1px;
}

.dash-tag.is-birthday    { background: #eff0ff; color: #3c47b8; }
.dash-tag.is-anniversary { background: #fdeee8; color: #a8431a; }


/* "3 more in September" */
.dash-more {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f0f1f4;

    color: #8a8f9b;
    font-size: 13px;
}

.dash-more a {
    color: #525fe1;
    font-weight: 600;
    text-decoration: none;
}

.dash-more a:hover {
    text-decoration: underline;
}

.dash-list-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.dash-list-main a {
    color: #07125c;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-list-main a:hover {
    color: #525fe1;
}

.dash-list-main small {
    color: #8a8f9b;
    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-list-side {
    color: #525fe1;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dash-list-side:hover {
    text-decoration: underline;
}

.dash-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0;
    padding: 34px 20px;

    background: #f8fafc;
    border: 1px dashed #d9dee7;
    border-radius: 10px;

    color: #6b7280;
    font-size: 14px;
}

.dash-empty i {
    color: #169b62;
}


/* ---------- tablet ---------- */

@media only screen and (max-width: 991px) {

    .dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* minmax(0, 1fr), not 1fr. A plain 1fr track refuses to
       shrink below the widest unbreakable thing inside it -
       a long name set in nowrap - so the card grew wider
       than the phone and the whole dashboard scrolled
       sideways. minmax(0, ...) lets the track shrink and the
       text clip instead. */
    .dash-grid-2-1,
    .dash-grid-1-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- phone ---------- */

@media only screen and (max-width: 767px) {

    .dash-page {
        padding: 20px 0 45px;
    }

    /* A 148px label column on a 390px phone leaves the bar
       barely wider than the number beside it. The label
       gets a line of its own instead. */
    .dash-rank-row {
        grid-template-columns: minmax(0, 1fr) 34px;
        grid-template-areas:
            "name name"
            "track value";
        gap: 4px 10px;
    }

    .dash-rank-name  { grid-area: name; }
    .dash-rank-track { grid-area: track; }
    .dash-rank-val   { grid-area: value; }

    .dash-rank {
        gap: 13px;
    }

    

    

    

    .dash-head-actions .pbtn {
        width: 100%;
        justify-content: center;
    }

    .dash-head-actions .pbtn-primary {
        grid-column: 1 / -1;
    }

    .dash-kpi {
        padding: 14px 13px;
        gap: 10px;
    }

    /* Two tiles across a phone leaves roughly 100px for the
       label, so the icon and its letter-spacing both give a
       little back - otherwise "Total Members" wraps. */
    .dash-kpi-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 15px;
    }

    .dash-kpi-label {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .dash-kpi-value {
        font-size: 24px;
    }

    .dash-kpi-note {
        font-size: 12px;
    }

    .dash-card {
        padding: 18px 16px;
    }

    .dash-chart,
    .dash-chart-tall {
        height: 220px;
    }

    .dash-flags {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   APP HERO  -  the one banner used by every page

   Rendered by app_hero() in includes/app_hero.php.

   NAMED .app-hero, NOT .page-hero, on purpose: .page-hero
   was an older rule that forced min-height 680px on phones.
   Reusing that name would inherit the clash.

   This block replaced eight per-page headers:
   .member-add-hero, .member-directory-hero,
   .member-directory-hero-slim, .member-edit-hero,
   .member-profile-hero, .member-success-hero, .reports-hero,
   .users-hero, .section-top, .profile-topbar, .dash-head and
   their feature strips - about 1,500 lines, all now deleted.

   Needs the .pbtn rules from the MEMBER PROFILE PAGE block
   above.
========================================================= */

.app-hero {
    padding: 30px 0;

    /* The background image was drawn for a 440px banner. At
       this height it crops to a busy strip, so a translucent
       white layer over it keeps the texture without the
       decorations competing with the text. */
    background:
        linear-gradient(rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.66)),
        url("../img/section-top-bg.png") center center / cover no-repeat;

    border-bottom: 1px solid #e9ebf2;
}

.app-hero-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}


/* ---------- left: icon, title, context ---------- */

.app-hero-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.app-hero-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;

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

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;

    color: #525fe1;
    font-size: 26px;

    box-shadow: 0 10px 28px rgba(23, 23, 36, 0.08);
}

.app-hero-text {
    min-width: 0;
}

.app-hero-text h1 {
    margin: 0 0 2px;
    color: #07125c;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.app-hero-text p {
    margin: 0;
    color: #565d72;
    font-size: 14px;
}

.app-hero-text p strong {
    color: #07125c;
}

/* The breadcrumb already has its own pill styling; inside
   the hero it just needs a little air above it. */
.app-hero-crumbs {
    margin-top: 9px;
}


/* ---------- right: actions ---------- */

.app-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A Delete button is a small form, so it must not add
   spacing of its own. */
.app-hero-actions form {
    display: inline-flex;
    margin: 0;
}

/* On the hero's background image, plain white reads better
   than the pale lilac used elsewhere. */
.app-hero-actions .pbtn {
    background: rgba(255, 255, 255, 0.92);
}

.app-hero-actions .pbtn:hover {
    background: #525fe1;
}

.app-hero-actions .pbtn-primary,
.app-hero-actions .pbtn-primary:hover {
    background: #525fe1;
    color: #ffffff;
}

.app-hero-actions .pbtn-danger {
    background: rgba(255, 255, 255, 0.92);
    color: #d93646;
    border-color: #efc7c7;
}

.app-hero-actions .pbtn-danger:hover {
    background: #d93646;
    color: #ffffff;
    border-color: #d93646;
}


/* The old tall heroes overlapped the section below them, so
   those sections carried extra top padding. Not needed. */
.app-hero + .section-padding {
    padding-top: 40px;
}


/* ---------- tablet ---------- */

@media only screen and (max-width: 991px) {

    .app-hero-bar {
        align-items: flex-start;
    }
}


/* ---------- phone ---------- */

@media only screen and (max-width: 767px) {

    .app-hero {
        padding: 20px 0;
    }

    .app-hero-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .app-hero-title {
        gap: 12px;
    }

    .app-hero-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 21px;
    }

    .app-hero-text h1 {
        font-size: 22px;
    }

    .app-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-hero-actions form,
    .app-hero-actions .pbtn {
        width: 100%;
    }

    .app-hero-actions .pbtn {
        justify-content: center;
    }

    /* The main action gets a row to itself */
    .app-hero-actions .pbtn-primary {
        grid-column: 1 / -1;
    }
}


/* ---------- printing ---------- */

@media print {

    .app-hero {
        display: none;
    }
}


/* =========================================================
   FIELD HELP TEXT

   One quiet line under an input, for the thing the label
   cannot say on its own - such as "Pick None if this is
   their first church".

   Deliberately small and grey: it is there for the person
   who pauses, not competing with the label for the person
   who does not.
========================================================= */

.field-help {
    display: block;
    margin-top: 5px;

    color: #8a8f9b;
    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   APP NAV  -  the desktop bar

   Paste at the END of assets/css/custom.css.

   The old theme menu (#main-menu, .site-logo, .user-nav-area
   and their hover dropdowns) is no longer rendered, so those
   rules in style.css simply stop matching. They are left
   alone - style.css is a theme file and editing it makes the
   next theme update harder.

   The #navigation wrapper is kept on purpose: scripts.js
   makes it sticky past 70px, and the rule further up this
   file hides it below 1199px, where the mobile header
   takes over.
========================================================= */

.app-nav {
    display: flex;
    align-items: center;
    gap: 18px;

    height: 78px;
}


/* ---------- logo ---------- */

.app-nav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.app-nav-logo img {
    max-height: 46px;
    width: auto;
}


/* ---------- links ---------- */

.app-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;

    /* Beside the logo, not marooned in the middle of the
       bar. Everything else is pushed right by the search
       box growing. */
    flex: 0 0 auto;
}

.app-nav-links a {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 14px;
    border-radius: 9px;

    color: #52514e;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    transition: 0.15s ease;
}

.app-nav-links a i {
    font-size: 13px;
    color: #a5a9b3;
}

.app-nav-links a:hover {
    background: #f4f4f7;
    color: #07125c;
}

/* The page you are on. A tint plus weight, not colour
   alone - colour alone is invisible to some readers. */
.app-nav-links a.on {
    background: #eff0ff;
    color: #3c47b8;
    font-weight: 600;
}

.app-nav-links a.on i {
    color: #525fe1;
}


/* ---------- search ---------- */

.app-nav-search {
    display: flex;
    align-items: center;
    gap: 10px;

    /* Takes the slack. This is the one element that should
       grow when the window does. */
    flex: 1 1 auto;
    max-width: 340px;
    margin-left: auto;

    padding: 0 13px;
    height: 42px;

    background: #f6f6f9;
    border: 1px solid #e9ebf2;
    border-radius: 9px;

    transition: 0.15s ease;
}

.app-nav-search:focus-within {
    background: #ffffff;
    border-color: #c3c9f6;
    box-shadow: 0 0 0 3px rgba(82, 95, 225, 0.12);
}

.app-nav-search i {
    color: #8a8f9b;
    font-size: 13px;
}

.app-nav-search input {
    flex: 1;
    min-width: 0;

    height: 100%;
    padding: 0;

    background: transparent;
    border: 0;

    color: #07125c;
    font-size: 14px;
}

.app-nav-search input:focus {
    outline: none;
    box-shadow: none;
}

.app-nav-search input::placeholder {
    color: #9aa0ab;
}

.app-nav-key {
    padding: 1px 7px;

    background: #ffffff;
    border: 1px solid #e3e4ea;
    border-radius: 4px;

    color: #a5a9b3;
    font-size: 11px;
    line-height: 17px;
}

/* The hint is only true while the box is empty and idle */
.app-nav-search:focus-within .app-nav-key {
    display: none;
}


/* ---------- add ---------- */

.app-nav-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;

    padding: 0 17px;
    height: 42px;

    background: #525fe1;
    border-radius: 9px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    transition: 0.15s ease;
}

.app-nav-add:hover {
    background: #414dc4;
    color: #ffffff;
}

.app-nav-add i {
    font-size: 12px;
}


/* ---------- who ---------- */

.app-nav-user {
    position: relative;
    flex: 0 0 auto;
}

.app-nav-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 5px 10px 5px 5px;

    background: transparent;
    border: 0;
    border-radius: 9px;

    cursor: pointer;
    transition: 0.15s ease;
}

.app-nav-user-btn:hover,
.app-nav-user.is-open .app-nav-user-btn {
    background: #f4f4f7;
}

.app-nav-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

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

    background: #eff0ff;
    border-radius: 50%;

    color: #3c47b8;
    font-size: 13px;
    font-weight: 700;
}

.app-nav-who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.app-nav-who strong {
    color: #07125c;
    font-size: 13px;
    font-weight: 600;

    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-who small {
    color: #8a8f9b;
    font-size: 11px;
}

.app-nav-user-btn > i {
    color: #b9bcc6;
    font-size: 10px;
}


/* ---------- the menu under it ---------- */

.app-nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;

    min-width: 196px;
    padding: 6px;

    background: #ffffff;
    border: 1px solid #e9ebf2;
    border-radius: 11px;
    box-shadow: 0 14px 34px rgba(23, 23, 36, 0.12);

    /* Hidden by more than display:none so it can be given
       a transition, and so it is out of the tab order. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: 0.14s ease;
}

.app-nav-user.is-open .app-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.app-nav-menu a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 11px;
    border-radius: 8px;

    color: #52514e;
    font-size: 13.5px;
    text-decoration: none;
}

.app-nav-menu a i {
    width: 15px;
    color: #a5a9b3;
    font-size: 13px;
}

.app-nav-menu a:hover {
    background: #f4f4f7;
    color: #07125c;
}

.app-nav-menu a.is-danger:hover {
    background: #fdecec;
    color: #98232f;
}

.app-nav-menu a.is-danger:hover i {
    color: #98232f;
}


/* ---------- narrower desktops ----------

   The bar only exists from 1200px up: custom.css hides
   #navigation below 1199px and the mobile header takes
   over. So there is exactly one tier to handle, roughly
   1200-1350, and nothing below it.                        */

@media only screen and (max-width: 1350px) {

    .app-nav {
        gap: 11px;
    }

    .app-nav-search {
        max-width: 210px;
    }

    /* The button keeps its icon; the word goes. A plus on
       a person is not ambiguous. */
    .app-nav-add span {
        display: none;
    }

    .app-nav-add {
        padding: 0 15px;
    }

    /* Name and role drop, the avatar stays - still a target
       you can hit, still opens the same menu. */
    .app-nav-who,
    .app-nav-user-btn > i {
        display: none;
    }

    .app-nav-links a {
        padding: 9px 11px;
        font-size: 13.5px;
    }
}


/* Below 1199px custom.css hides #navigation entirely and
   the mobile header takes over - nothing to style here. */


/* ---------- printing ---------- */

@media print {

    .app-nav,
    #navigation {
        display: none;
    }
}


/* =========================================================
   SYSTEM PAGE
========================================================= */

.sys-note {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 11px;
    font-size: 14px;
    line-height: 1.6;
}

.sys-note.is-ok  { background: #e8f8ef; color: #12694a; }
.sys-note.is-bad { background: #fdecec; color: #98232f; }

.sys-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 11px 18px;
    margin: 0;
}

.sys-facts dt {
    color: #7b8190;
    font-size: 13.5px;
    font-weight: 400;
}

.sys-facts dd {
    margin: 0;
    color: #07125c;
    font-size: 13.5px;
    text-align: right;
}

.sys-warn {
    margin: 0 0 8px;
    color: #8a5a08;
    font-size: 14px;
}

.sys-warn strong {
    font-size: 17px;
}

.sys-hint {
    margin: 12px 0 0;
    color: #8a8f9b;
    font-size: 12.5px;
    line-height: 1.6;
}

.sys-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.sys-list li {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px 0;
    border-bottom: 1px solid #f0f1f4;

    color: #52514e;
    font-size: 13px;
}

.sys-list li:last-child { border-bottom: 0; }
.sys-list i { color: #c97918; font-size: 12px; }

.sys-form { margin-top: 16px; }

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

.sys-table th {
    padding: 9px 10px;
    background: #f7f8fb;
    border-bottom: 2px solid #e7e9ef;

    text-align: left;
    color: #6b7280;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sys-table td {
    padding: 10px;
    border-bottom: 1px solid #f0f1f4;
    color: #52514e;
    font-size: 13px;
}

/* A word, not a colour on its own - a green dot means
   nothing to someone who cannot see green. */
.sys-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 5px;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 18px;
}

.sys-pill.is-done { background: #e8f8ef; color: #12694a; }
.sys-pill.is-todo { background: #fff6e6; color: #8a5a08; }


/* Version in the corner of every page. Quiet, but there -
   the first question about any bug is "which version". */
.app-version {
    padding: 14px 0 22px;
    color: #a5a9b3;
    font-size: 11.5px;
    text-align: center;
}

.app-version a {
    color: #a5a9b3;
    text-decoration: none;
}

.app-version a:hover { color: #525fe1; }

@media print { .app-version { display: none; } }


/* ---------- a menu in the nav bar ----------

   Admin has more than one destination, so it drops down.
   Same panel as the user menu, so there is one thing to
   maintain and both behave the same way.                  */

.app-nav-drop {
    position: relative;
    flex: 0 0 auto;
}

/* Styled to match .app-nav-links a exactly - a button and a
   link sitting side by side must be indistinguishable. */
.app-nav-drop-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 14px;

    background: transparent;
    border: 0;
    border-radius: 9px;

    color: #52514e;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;

    transition: 0.15s ease;
}

.app-nav-drop-btn i {
    font-size: 13px;
    color: #a5a9b3;
}

.app-nav-drop-btn:hover,
.app-nav-drop.is-open .app-nav-drop-btn {
    background: #f4f4f7;
    color: #07125c;
}

/* Lit while you are on any page underneath it */
.app-nav-drop-btn.on {
    background: #eff0ff;
    color: #3c47b8;
    font-weight: 600;
}

.app-nav-drop-btn.on i {
    color: #525fe1;
}

.app-nav-caret {
    font-size: 9px !important;
    color: #b9bcc6 !important;
}

/* The panel hangs from the left here, not the right like
   the user menu, because this one sits at the left end of
   the bar. */
.app-nav-drop .app-nav-menu {
    right: auto;
    left: 0;
}

.app-nav-drop.is-open .app-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media only screen and (max-width: 1350px) {

    .app-nav-drop-btn {
        padding: 9px 11px;
        font-size: 13.5px;
    }
}


/* =========================================================
   UPDATE PAGE

   Shares the system page's .sys-* pieces. These are only
   the parts that page does not already have: the step log,
   the server checklist, the upload form.
========================================================= */

/* A third state for the notice bar. The system page only
   ever had good news or bad; an update can also be
   something you need to know about but did not break -
   a release you cannot skip to, a flag left behind. */
.sys-note.is-warn { background: #fff6e6; color: #8a5a08; }


/* ---------- buttons this page adds ---------- */

.pbtn-ghost {
    background: #ffffff;
    color: #525fe1;
    border-color: #dfe2ff;
}

.pbtn-ghost:hover {
    background: #f5f6ff;
    color: #414dcc;
    border-color: #c8ceff;
}

.pbtn-sm {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
}


/* ---------- the step log ----------

   Numbered, because the order is the whole point: what had
   already happened when it stopped is what tells you
   whether anything was left half done. */

.upd-steps {
    margin: 0;
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.75;
    color: #4a5068;
}

.upd-steps li { padding: 2px 0; }

.upd-steps li.is-bad {
    color: #98232f;
    font-weight: 600;
}


/* ---------- the server checklist ---------- */

.upd-checks {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    font-size: 13.5px;
}

.upd-checks li {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 0;
    border-bottom: 1px solid #f0f1f6;
    color: #3e4459;
}

.upd-checks li:last-child { border-bottom: 0; }

.upd-checks li i { font-size: 13px; }

.upd-checks li.is-yes i { color: #1f9d63; }
.upd-checks li.is-no  i { color: #d93646; }

.upd-checks li.is-no {
    color: #98232f;
    font-weight: 600;
}


/* ---------- what is new ---------- */

.upd-notes {
    margin: 16px 0 4px;
    padding: 14px 16px;
    background: #f7f8ff;
    border-radius: 10px;
}

.upd-notes h3 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7b8190;
}

.upd-notes ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #3e4459;
}


/* ---------- the upload form ---------- */

.upd-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-top: 6px;
}

.upd-field {
    flex: 1 1 220px;
    min-width: 0;
}

.upd-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #7b8190;
}

.upd-field input[type="file"] {
    width: 100%;
    padding: 9px 11px;
    background: #fbfbfe;
    border: 1px solid #e3e5ef;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    color: #3e4459;
}


/* ---------- bits ---------- */

/* Inside a table cell or a notice, so it must not push the
   row taller or start its own line. */
.upd-inline {
    display: inline-block;
    margin: 0 0 0 4px;
}

.upd-dim {
    color: #8b90a8;
    font-size: 12.5px;
    font-weight: 400;
}

.upd-new { color: #1f9d63; }


@media (max-width: 600px) {

    .upd-upload { flex-direction: column; align-items: stretch; }

    /* Stacked, the main axis is vertical, so the flex-basis
       above would set each field's HEIGHT - 220px of empty
       space under every file button. Back to natural
       height. */
    .upd-field { flex: 0 0 auto; }

    .upd-upload .pbtn { justify-content: center; }
}

/* The hint paragraph, when what it says is a problem rather
   than background. */
.sys-hint.is-warn {
    padding: 10px 13px;
    background: #fff6e6;
    border-radius: 8px;
    color: #8a5a08;
}