/* Import flag-icons CSS */
/*@import url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.c */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #F8FAFC;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


body {
    background-color: #fafafa; /* very very light grey */
    color: #111; /* dark text for readability */
    margin: 0;
    padding: 0;
}

/*..............................................................................................................*/
/* =========================================
   COMPONENTS (card, button, input, modal)
========================================= */
* Header *
.page-header {
    margin-top: 0;
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.page-header > div {
    flex: 1;
    min-width: 200px;
}

.page-title {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 155%;
    letter-spacing: 0;
    color: #000000;
}

.page-subtitle {
    font-family: "Poppins", sans-serif;
    margin-top: 0;
    font-weight: 300;
    font-size: 14px;
    line-height: 155%;
    letter-spacing: 0;
    color: #848181;
}
/* PAGE HEADER */
.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.main.logo {
    width: 550px; /* adjust size as needed */
    height: 36px; /* keep original aspect ratio */
    margin-top: 20px;
}


/* ==============================
   Back Button
   ============================== */
.back-btn {
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    padding: 2px 4px;
    margin-top: 1px;
}

    .back-btn:hover {
        color: #374151;
    }

@media (max-width: 600px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 6px;
    }

    .back-btn {
        align-self: flex-start;
    }
}


/* Card layout */
.donor-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.donor-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

    .donor-card-header h3 {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        /*margin: 0;*/
        white-space: nowrap;
    }

.donor-icon {
    background: #f3f4f6;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-input {
    width: 100%;
    height: 35px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0 10px;
    font-size: 13.5px;
    background-color: #f8fafc;
    color: #111827;
    padding: 0 10px 0 36px;
    padding-left: 38px;
}

    .form-input::placeholder {
        color: #9ca3af;
    }

    .form-input:hover {
        border-color: #17223A;
        box-shadow: 0 0 0 1px #17223A;
    }

    .form-input::placeholder {
        color: #6b7280;
    }

    .form-input:focus {
        outline: none;
        border-color: #17223A;
        background-color: #ffffff;
    }

/* Cards */

.card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.card-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.card + .card {
    margin-top: 14px;
}

/* ==========================================
   CARD STYLING
========================================== */

.card {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

/* Remove grey background and bottom border from main section headers */
.card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding-left: 0;
    padding-right: 0;
}

    .card-header small {
        display: block;
        color: #6b7280;
    }

/* ==============================
   Header Layout
   ============================== */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.donation-header {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.donation-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-top: 14px;
}

/* ==============================
   Add Mode Button
   ============================== */
.add-mode-btn {
    background-color: #17223A;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

    .add-mode-btn:hover {
        background-color: #1f2d4d;
    }

/* ==============================
   Content Container
   ============================== */
.donation-types-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

/* ==============================
   Section Header
   ============================== */
.donation-types-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
}

    .donation-types-title::before {
        content: "♡";
        font-size: 18px;
        color: #9ca3af;
    }

.donation-types-description {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ==============================
   Donation Cards
   ============================== */
.donation-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.donation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.donation-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.donation-heart {
    font-size: 18px;
    color: #9ca3af;
    font-size: 32px;
}

.donation-name {
    font-size: 14px;
    color: #111827;
}

/* ==============================
   Actions
   ============================== */
.donation-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    /*    flex-direction: row;*/
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}


/* Container */
.payment-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

/* Section header */
.section-title {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 24px;
}

.section-description {
    font-size: 13px;
    color: #6b7280;
    margin-top: 24px;
    margin-bottom: 16px;
}

/* Cards */
.payment-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
}

.payment-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-icon {
    font-size: 18px;
}

.payment-name {
    font-size: 14px;
    color: #111827;
}

.payment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==============================
   Add Payment Mode Modal
   ============================== */

.add-mode-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.don.add-mode-modal {
    position: relative;
    width: 450px;
    height: 190px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 7px; /* very small space between label and input */
}

/* rest unchanged */


/* Title */
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Label */
.don.modal-label {
    font-size: 13px;
    color: #374151;
    margin: 0;
    display: block;
}

/* Input */
.don.modal-input {
    height: 36px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    font-size: 14px;
    margin-top: 2px;
}

    .don.modal-input:focus {
        outline: none;
        border-color: #17223A;
    }

.don.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 12px;
    color: #6b7280; /* gray */
    cursor: pointer;
    z-index: 200; /* make sure it’s above modal content */
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .don.modal-close-btn:hover {
        color: #111827; /* black on hover */
        background-color: #f3f4f6; /* subtle hover circle */
    }

    .don.modal-close-btn .click-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 20px;
        height: 20px;
        background-color: #ffffff;
        border: 2px solid transparent;
        border-radius: 50%;
        transition: transform 0.2s ease, border-color 0.2s ease;
        pointer-events: none;
        color: #6b7280;
    }

    .don.modal-close-btn:active .click-circle {
        transform: translate(-50%, -50%) scale(1);
        border-color: #17223A; /* blue outline when clicked */
    }

.don.modal-input {
    height: 36px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;
    transition: border 0.2s ease, box-shadow 0.2s ease;
    margin-top: 0;
}

    /* Focus effect */
    .don.modal-input:focus {
        outline: none;
        border-color: #17223A; /* blue border */
        box-shadow: 0 0 0 2px rgba(37, 99, 335, 0.2); /* subtle blue glow */
    }


/* Button */
.modal-submit-btn {
    margin-top: auto;
    align-self: flex-end;
    background-color: #17223A;
    color: #ffffff;
    border: none;
    padding: 4px 14px;
    font-size: 14px;
    border-radius: 16px;
    cursor: pointer;
    width: 100%;
    line-height: 1.2;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}



.donation-header {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.donation-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
}


/* ==============================
   Add Mode Button
   ============================== */
.add-mode-btn {
    background-color: #17223A;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

    .add-mode-btn:hover {
        background-color: #1f2d4d;
    }

/* ==============================
   Content Container
   ============================== */
.donation-types-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

/* ==============================
   Section Header
   ============================== */
.donation-types-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
}

    .donation-types-title::before {
        content: "♡";
        font-size: 18px;
        color: #9ca3af;
    }

.donation-types-description {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ==============================
   Donation Cards
   ============================== */
.donation-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.donation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.donation-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.donation-heart {
    font-size: 18px;
    color: #9ca3af;
}

.donation-name {
    font-size: 14px;
    color: #111827;
}

/* ==============================
   Actions
   ============================== */
.donation-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}



.section-title.with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Container */
.payment-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

/* Section header */
.section-title {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
}

.section-description {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* Cards */
.payment-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
}

.payment-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-icon {
    font-size: 18px;
}

.payment-name {
    font-size: 14px;
    color: #111827;
}

.payment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}






/* ==============================
   Add Payment Mode Modal
   ============================== */

/* Backdrop */
.add-mode-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Small centered modal */
.add-mode-modal {
    position: relative;
    width: 420px; /* 👈 small popup */
    min-height: 180px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Title */
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Label */
.modal-label {
    font-size: 13px;
    color: #374151;
}

/* Input */
.modal-input {
    height: 36px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    font-size: 14px;
}

    .modal-input:focus {
        outline: none;
        border-color: #17223A;
    }

/* Button */
.modal-submit-btn {
    margin-top: auto;
    align-self: flex-end;
    background-color: #17223A;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

    .modal-submit-btn:hover {
        background-color: #1f2d4d;
    }

.payment-container .payment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}



/*    smtp page */


/*responsivness*/

@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .test-row {
        flex-direction: column;
    }

    .send-test-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .smtp-page {
        padding: 12px;
    }

    .card {
        padding: 16px;
    }

    .card-title {
        font-size: 16px;
    }

    .card-subtitle {
        font-size: 13px;
    }



    .send-test-btn {
        height: 32px;
        font-size: 13px;
    }
}

/* ==========================
   Responsiveness donation 
========================== */

/* Modal header adjustments */
.user-modal .modal-user-header,
.edit-user-modal .edit-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Optional: scroll content inside modal */
@media (max-width: 640px) {
    .user-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .user-tags {
        flex-direction: row;
        gap: 6px;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .user-modal,
    .edit-user-modal {
        width: 280px; /* even smaller width on mobile */
        max-height: 70vh;
        padding: 12px 16px;
    }

    .modal-actions {
        flex-direction: column;
        width: 100%;
    }

        .modal-actions button {
            width: 100%;
        }
}

/* Page background */
.smtp-page {
    padding: 20px;
    min-height: calc(100vh - 80px);
}


/* Forms */
.form-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
}

.global.form-input {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    font-size: 14px;
    background-color: #f5f5f5; /* white smoke*/
    color: #111827;
}

    .global.form-input::placeholder {
        color: #9ca3af;
    }

/*.form-input:focus {
        outline: none;
        border-color: #17223A;
        background-color: #ccc;*/ /* matches UI focus */
/*}*/


.card-title-large {
    font-size: 20px; /* subtle increase */
}

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px; /* slightly bigger */
    font-weight: 700; /* bold */
    color: #111827;
}

.card h4.card-title {
    font-size: 16px;
    margin-bottom: 16px;
}


/* Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Test row */
.test-row {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1490px;
}

.test-input {
    flex: 1;
    min-width: 0; /* ✅ prevents overflow in flexbox */
}

.test-row .global.form-input {
    flex-grow: 1; /* takes remaining space */
    flex-shrink: 1; /* allows shrinking */
    flex-basis: 0; /* starts from 0 width */
    min-width: 0; /* prevents overflow */
    height: 32px;
    width: auto; /* remove width: 100% which breaks flex */
}

/* Send Test button */
.send-test-btn {
    height: 32px;
    padding: 0 16px;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

    .send-test-btn:hover {
        background: #e5e7eb;
    }


/* Buttons */
.primary-btn {
    width: 100%;
    background: #17223A;
    color: #fff;
    border: none;
    height: 32px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.secondary-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 0 16px;
    border-radius: 6px;
    cursor: pointer;
}


/*//////newww*/
.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px; /* slightly bigger */
    font-weight: 700; /* bold */
    color: #111827;
}

    .card-title .icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .card-title .icon svg {
            width: 18px;
            height: 18px;
            display: block;
            flex-shrink: 0;
        }

.view-users-page {
    padding: 24px 32px;
    font-family: "Inter", "Segoe UI", sans-serif;
    background: #f7f8fa;
}
/*view uswer page responsive*/


.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.view-stat-card {
    background: white; /* Make card background transparent */
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e5e7eb;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;
}

    /* Default number style */
    .view-stat-card h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 900;
        color: #111827; /* Default color */
    }

    /* Label text */
    .view-stat-card span {
        font-size: 14px;
        color: #6b7280;
    }

    /* Color ONLY the numbers */
    .view-stat-card.green h2 {
        color: #22c55e;
    }

    .view-stat-card.orange h2 {
        color: #f59e0b;
    }

    .view-stat-card.purple h2 {
        color: #8b5cf6;
    }

    .view-stat-card,
    .view-stat-card.green,
    .view-stat-card.orange,
    .view-stat-card.purple {
        background: #ffffff !important;
    }

.user-menu-dropdown {
    position: absolute;
    top: 30px; /* position below the pill */
    right: 0; /* align to right side of pill */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    width: 120px; /* small rectangle */
    z-index: 100;
}

    .user-menu-dropdown button {
        padding: 8px 12px;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        font-size: 14px;
    }

        .user-menu-dropdown button:hover {
            background-color: #17223A;
            color: white;
        }

.stats-grid6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
 

.stats-grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card2 {
    background: white;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

    .stat-card2 h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 900;
    }

    .stat-card2 span {
        font-size: 14px;
        color: #6b7280;
    }

    .stat-card2.green h2 {
        color: #22c55e;
    }

    .stat-card2.orange h2 {
        color: #f59e0b;
    }

    .stat-card2.purple h2 {
        color: #374151; /* dark gray */
    }


/* Users Card */
.users-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .users-header h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 600; /* SemiBold */
    }

.search-box {
    position: relative;
    width: 260px;
}

    .search-box input {
        width: 100%;
        padding: 8px 12px 8px 36px;
        border-radius: 8px;
        border: 1px solid #d1d5db; /* Grey border */
        font-size: 14px;
        outline: none;
        transition: all 0.2s ease;
    }

        /* Focus state */
        .search-box input:focus {
            border: 1px solid #d1d5db; /* Keep grey border */
            box-shadow: 0 0 0 2px #ffffff, /* white gap */
            0 0 0 4px #000000;
        }

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%239ca3af' stroke-width='2'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21' stroke='%239ca3af' stroke-width='2'/%3E%3C/svg%3E");
}

/* User Row */
.user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border-radius: 10px;
    background: #ffff;
    border: 1px solid #e5e7eb;
    margin-bottom: 12px;
    cursor: pointer; /* 👈 important */
    transition: all 0.2s ease;
}

    .user-row:hover {
        background: #f9fafb;
        /* light grey */
    }

.user-info {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
}

.avatar {
    width: 40px;
    height: 40px;
    background-color: #e5e7eb; /* light grey background */
    color: #111827;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}

.user-info span {
    font-size: 13px;
    color: #6b7280;
}

/* Tags */
.user-tags {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Super Admin */
.role.super-admin {
    background-color: #ede9fe; /* light purple */
    color: #4c1d95 !important; /* darker purple, forced with !important */
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Admin */
.role.admin {
    background-color: #e0e7ff;
    color: #1e3a8a !important; /* darker blue */
    padding: 2px 6px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

/* User */
.role.user {
    background-color: #f3f4f6;
    color: #111827 !important; /* dark grey / almost black */
    padding: 2px 6px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

/* Donor */
.role.donor {
    background-color: #dcfce7;
    color: #14532d !important; /* darker green */
    padding: 2px 6px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.user-info span {
    display: block; /* ⬅ forces next line */
    font-size: 13px;
    color: #6b7280;
}



.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: #000000;
    color: white;
}

.status-icon {
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.menu {
    width: 30px; /* box size */
    height: 30px; /* keeps square */
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='1' fill='black'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3Ccircle cx='12' cy='16' r='1' fill='black'/%3E%3C/svg%3E"); /* tighter spacing */
    border-radius: 6px;
    transition: background-color 0.2s ease, background-image 0.2s ease;
}

    /* Hover effect */
    .menu:hover {
        background-color: #17223A;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='1' fill='white'/%3E%3Ccircle cx='12' cy='12' r='1' fill='white'/%3E%3Ccircle cx='12' cy='16' r='1' fill='white'/%3E%3C/svg%3E");
    }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
}

.user-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 16px;
    width: 420px;
    padding: 24px;
    z-index: 1000;
}

    .user-modal h3 {
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: 600;
    }

.modal-user-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

    .modal-user-header span.role {
        display: block; /* ⬅ forces next line */
        margin-top: 4px;
    }

.avatar.large {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.modal-info div {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    margin-bottom: 8px;
    color: #374151;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 12px;
}

.btn-outline {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: white;
    cursor: pointer;
}

.btn-danger {
    padding: 8px 16px;
    border-radius: 8px;
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom:4px;
}

.btn-outline,
.btn-danger {
    width: 100%;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
}

.info-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6; /* 👈 light gray circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}

    .info-icon i {
        font-family: "bootstrap-icons" !important;
        font-size: 14px;
        color: #111827;
    }

.edit-user-modal {
    width: 48px;
}

    .edit-user-modal h3 {
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .edit-user-modal .edit-form {
        display: flex;
        flex-direction: column;
        gap: 5px; /* space between groups */
    }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px; /* space between label and input */
}

.edit-user-modal .edit-form label {
    font-weight: 500;
    font-size: 14px;
}

.edit-form input,
.edit-form select {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #111827;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    outline: none;
    height: 32px;
    width: 100%;
}

    .edit-form input:focus,
    .edit-form select:focus {
        border: 1px solid #d1d5db;
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #17223A;
    }

.btn-primary {
    width: 100%;
    height: 32px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #17223A;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    text-align: center;
    display: flex;
    margin-top: 2px;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;
}

    .btn-primary:hover {
        background: #1f2d4d;
    }

    .btn-primary:active {
        background: #10192d;
    }


/*    approve-bill*/
.approve-user-tags {
    display: flex;
    flex-direction: column; /* top row + status below */
    gap: 4px; /* space between top row and pending */
    font-size: 13px;
}

    .approve-user-tags .top-row {
        display: flex;
        gap: 8px; /* space between amount and button */
        align-items: center; /* vertical center for amount + button */
        justify-content: flex-end; /* right-align top row */
    }

.status.pending {
    font-size: 13px;
    color: #f59e0b; /* orange */
    text-align: right; /* align below row to right */
}


/* SIDEBAR */
.sidebar {
    width: 260px;
    height: 100vh;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    font-family: system-ui, sans-serif;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* TOP */
.sidebar-top {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.org-name {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

.role {
    font-size: 12px;
    color: #6b7280;
}

/* MENU */
.sidebar-menu {
    padding: 8px;
    overflow-y: auto;
}

/* SINGLE ITEM */
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
}

    .menu-item:hover {
        background: #e5e7eb;
    }

/* SECTION */
.menu-section {
    margin-bottom: 4px;
}

/* PARENT BUTTON */
.menu-parent {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}

    .menu-parent:hover {
        background: #e5e7eb;
    }

/* CHILDREN */
.menu-children {
    margin-left: 34px;
    margin-top: 4px;
}

    .menu-children a {
        display: block;
        padding: 6px 0;
        font-size: 13px;
        color: #4b5563;
        text-decoration: none;
    }

        .menu-children a:hover {
            color: #1e3a8a;
        }

/* ICON */
.icon {
    width: 18px;
}

/* DIVIDER */
.menu-divider {
    margin: 12px 0;
    border-top: 1px solid #e5e7eb;
}

/* LOGOUT */
.logout {
    color: #b91c1c;
}


/* Default sidebar item */
.menu-item,
.menu-parent,
.menu-child {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    color: #374151; /* gray */
    text-decoration: none;
    background: transparent;
    cursor: pointer;
}

    /* Hover */
    .menu-item:hover,
    .menu-parent:hover,
    .menu-child:hover {
        background-color: #eef1f6;
    }

    /* ACTIVE (current page) */
    .menu-item.active {
        background-color: #17223A;
        color: #ffffff;
    }

        /* Make icons white when active */
        .menu-item.active svg,
        .menu-child.active svg {
            stroke: #ffffff;
            fill: none;
        }

        /* Emoji icons (if any left) */
        .menu-item.active .icon,
        .menu-child.active .icon {
            color: #ffffff;
        }

    .menu-parent.open {
        background-color: #17223A;
        color: #ffffff;
    }

        .menu-parent.open svg {
            stroke: #ffffff;
        }
    /* Parent active state ONLY */
    .menu-parent.active {
        background-color: #17223A;
        color: #ffffff;
    }

        /* Icon + arrow turn white */
        .menu-parent.active svg {
            stroke: #ffffff;
        }

    /* Child should NEVER change color */
    .menu-child.active {
        background: transparent;
        color: inherit;
    }
/* ===== HEADER WRAPPER ===== */
.header { /*....................*/
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    font-family: system-ui, sans-serif;
}

/* ===== TOP BAR 1 ===== */
.header-top {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

    .header-top .logo {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: 0.6px;
        font-family: "Inter", sans-serif;
        position: relative;
    }

        .header-top .logo::after {
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 22px;
            height: 2px;
            background: linear-gradient(to right, #1e293b, #475569);
            border-radius: 4px;
        }

/* RIGHT ICONS */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}

    .icon-btn:hover {
        background: #f3f4f6;
    }

/* PROFILE */
.profile-btn {
    border: none;
    background: transparent;
    cursor: pointer;
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #17223A;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* ===== TOP BAR 2 ===== */
.header-bottom {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #f9fafb;
}

.organization-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* ROLE BUTTON */
.role-btn {
    background: #eef1f6;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

    .role-btn:hover {
        background: #e5e7eb;
    }

.icon-btn {
    position: relative;
    height: 44px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #111827;
}

    .icon-btn:hover {
        background-color: rgba(0,0,0,0.04);
    }

/* Badge */
.notification .badge {
    position: absolute;
    top: 7px;
    right: 7px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background-color: #dc2626;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    border-radius: 999px;
    pointer-events: none;
}



html, body {
    height: 100%;
    margin: 0;
}

#app {
    height: 100%;
}

/* HEADER */
.header { /*....................*/
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* BODY WRAPPER */
.app-body {
    display: flex;
    height: calc(100vh - 88px); /* header-top + header-bottom */
    overflow: hidden;
}

/* SIDEBAR */
.sidebar {
    width: 260px;
    min-width: 260px;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    border-right: 1px solid #e5e5e5;
}

/* MAIN CONTENT */
.main-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
}

.logo {
    height: 36px; /* adjust if needed */
    width: auto;
    display: block;
}


/* SECOND BAR */
.header-bottom {
    height: 32px;
    width: 100%;
    background-color: #eeeeee;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
}

/* LEFT GROUP */
.header-bottom-left {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
}

/* ORGANIZATION BUTTON */
.org-select {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 4px;
    font-size: 12px;
    color: #333;
    background: transparent;
    border: none;
    cursor: pointer;
}

    .org-select:hover {
        background-color: #e4e4e4;
    }

/* ROLE GROUP */
.role-select {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ROLE PILL */
.role-pill {
    height: 22px;
    padding: 0 12px;
    font-size: 12px;
    color: #333;
    background-color: #e0e0e0;
    border: 1px solid #d0d0d0;
    border-radius: 999px;
    cursor: pointer;
}

/* ROLE ARROW (OUTSIDE PILL) */
.role-arrow {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

    .role-arrow:hover {
        background-color: #e4e4e4;
    }

/*    mobile responsiveness setting*/
/* ===================== TABLET RESPONSIVENESS (up to 768px) ===================== */
@media (max-width: 768px) {
    .sidebar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}


@media (max-width: 768px) {
    .settings-page .sidebar {
        display: none !important;
    }

    .settings-page .main-content {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Adjust container padding */
    .settings-content {
        padding: 12px;
    }

    /* Group titles smaller */
    .settings-group-title {
        font-size: 14px;
        gap: 6px; /* space between icon and text */
    }

    /* Row titles and subtitles */
    .row-title {
        font-size: 13px;
    }

    .row-subtitle {
        font-size: 11px;
    }

    /* Stack row content vertically */
    .settings-row,
    .static-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    /* Chevron position */
    .chevron {
        align-self: flex-end;
        margin-top: 4px;
    }
}

/* ===================== MOBILE RESPONSIVENESS (up to 480px) ===================== */


@media (max-width: 480px) {
    .settings-content {
        padding: 8px;
    }

    .settings-group-title {
        font-size: 13px;
        gap: 4px; /* tighter spacing for mobile */
    }

    .row-title {
        font-size: 12px;
    }

    .row-subtitle {
        font-size: 10px;
    }

    /* Toggle smaller for mobile screens */
    .toggle {
        width: 28px;
        height: 18px;
    }

    .toggle-slider::before {
        height: 14px;
        width: 14px;
    }
}

/* Optional: Make cards full width on small screens */
@media (max-width: 480px) {
    .settings-card {
        width: 100%;
        margin: 8px 0;
    }
}


/*settings*/

/* REMOVE WIDTH CONSTRAINT */
.settings-content {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
}

/* TITLE */
.settings-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}


/* GROUP */
.settings-group {
    display: flex;
    flex-direction: column;
}
/* GROUP TITLE */
.settings-group-title {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #fafafa;
}
/* TABLE ROW */
.settings-row {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}


    .settings-row::before {
        pointer-events: none;
        content: "";
        position: absolute;
        /* inset hover box */
        left: 12px;
        right: 12px;
        top: 6px;
        bottom: 6px;
        background: #f3f4f6;
        border-radius: 8px;
        opacity: 0;
        transition: opacity 0.15s ease;
        z-index: 0;
    }

    .settings-row:hover::before {
        opacity: 1;
    }

    .settings-row > * {
        position: relative;
        z-index: 1;
    }

.static-row {
    cursor: default;
}

    .static-row::before {
        display: none; /* removes hover background */
    }

    .static-row:hover {
        background: transparent;
    }

/* TEXT */
.row-divider {
    height: 1px;
    width: calc(100% - 32px); /* subtract padding */
    margin: 0 16px; /* same as row padding */
    background: #e5e7eb;
}


/* TEXT */
.row-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.row-subtitle {
    font-size: 11px;
    color: #6b7280;
}

/* CHEVRON */
.chevron {
    font-size: 20px;
    color: #9ca3af;
}

/* CARD */
.settings-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
    margin-top: 12px;
}


.settings-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff; /* pure white */
}

.title-icon {
    display: inline-flex;
    color: #6b7280; /* subtle */
}

.title-text {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}


/*//stripeIntegration */

/* ==========================================
   PAGE LAYOUT
========================================== */

/* IMPORTANT: page now aligns with sidebar content */
.stripe-page {
    padding: 24px 32px;
    max-width: 100%;
}



/* Header with icon layout */
.header-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

/* Icon inside headers */
.header-icon {
    display: inline-flex; /* center content */
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
    color: #111827;
}

/* ==========================================
   CONNECTION STATUS
========================================== */

.status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px; /* tight padding */
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 14px;
    background-color: transparent;
}

.status-text {
    flex: 1; /* take remaining space */
}

/* Outer circle for connected / disconnected */
.status-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

    /* Status colors */
    .status-icon-circle.ok {
        background-color: #6ee7b7; /* light green */
    }

    .status-icon-circle.warn {
        background-color: #fca5a5; /* light red */
    }

/* Active / Inactive badges */

.stripe-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
}

.badge-active {
    background: #111827;
    color: white;
}

.badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

/* ==========================================
   BUTTONS
========================================== */

.button-row {
    display: flex;
    gap: 8px; /* slightly smaller gap for tighter layout */
}

.btn-secondary {
    flex: 3; /* takes more horizontal space */
    padding: 4px 16px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    cursor: pointer;
    min-width: 180px;
}

.btn-danger {
    flex: 1; /* smaller width */
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    background: #ef4444;
    color: white;
    cursor: pointer;
    min-width: 70px;
}

/* ==========================================
   TOGGLES / SWITCHES
========================================== */

.switch {
    position: relative;
    width: 46px;
    height: 24px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
}

    .slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.2s;
    }

.switch input:checked + .slider {
    background: #111827;
}

    .switch input:checked + .slider::before {
        transform: translateX(22px);
    }

/* Small toggle for Test Mode / Payment Settings */
.switch.small-switch {
    width: 36px;
    height: 20px;
}

    .switch.small-switch .slider::before {
        height: 16px;
        width: 16px;
        left: 2px;
        top: 2px;
    }

    .switch.small-switch input:checked + .slider::before {
        transform: translateX(16px);
    }

/* Labels for toggle (Live / Test) */
.env-label {
    font-size: 13px;
    color: #374151;
}
/* =========================
   Profile Upload
   ========================= */

.profile-upload {
    display: flex;
    justify-content: center;
    margin: 16px 0 10px;
    margin-top: -12px;
}

.profile-file-input {
    display: none;
}

.profile-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px dashed #bfbfbf;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    margin-top: -10px;
}

.profile-upload-icon {
    font-size: 26px;
}

.profile-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* =========================
   Phone Input (Syncfusion)
   ========================= */

.phone-syncfusion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
}

.phone-code-combo {
    width: 120px;
}

.phone-number-ma    {
    width: 100%;
}

/* Remove inner borders so your wrapper border stays */
.phone-syncfusion .e-input-group,
.phone-syncfusion .e-control-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

    /* Optional: tighten Syncfusion input spacing to match your inputs */
    .phone-syncfusion .e-input-group input,
    .phone-syncfusion .e-control-wrapper input {
        padding: 0 !important;
    }

/* =========================
   Optional Icons
   ========================= */

.auth-icon.location {
    /* Keep empty if your icon system already handles it */
}
/* ==========================================
   TEST MODE ALERT
========================================== */

.alert-warning {
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff7ed;
    border: 1px solid #facc15;
    border-radius: 8px;
    color: #92400e;
    font-size: 12px;
    line-height: 1.2;
}

/* ==========================================
   PAYMENT SETTINGS
========================================== */

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0; /* compact rows */
    border-bottom: 1px solid #e5e7eb;
}

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

    /* Toggle inside Payment Settings */
    .setting-row .switch {
        width: 36px;
        height: 20px;
    }

        .setting-row .switch .slider::before {
            height: 16px;
            width: 16px;
            left: 2px;
            top: 2px;
        }

        .setting-row .switch input:checked + .slider::before {
            transform: translateX(16px);
        }

/* ==========================================
   TEST MODE BOX
========================================== */

.test-mode-box {
    background-color: #f3f4f6;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
}

.test-mode-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 6px; /* spacing between Live / toggle / Test */
}

/* ==========================================
   INPUTS
========================================== */

.label {
    margin-bottom: 6px;
    display: block;
}

.input,
.webhook-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    color: #111827;
}

.webhook-input {
    background-color: #f3f4f6;
}

/* ==========================================
   WEBHOOK EVENTS
========================================== */

.webhook-events {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .webhook-events .pill {
        background: #e5e7eb;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 999px;
    }

/* ==========================================
   MISC / MUTED TEXT
========================================== */

.muted {
    color: #6b7280;
    font-size: 13px;
}

/* ==========================================
   CONNECTION CARD SPECIFIC TWEAKS
========================================== */

.card.connection-card {
    padding: 12px; /* reduce vertical padding */
}

    .card.connection-card .card-header {
        margin-bottom: 8px;
    }

    .card.connection-card .status-box {
        padding: 6px 12px;
    }


audit dialog .audit-log-page {
    padding: 24px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #111827;
    max-width: 900px;
    margin: 0 auto;
}

/* HEADER */


.audit-log-page .header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.audit-log-page .back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #374151;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.back-button:hover {
    background-color: #e5e7eb;
}

.title-group h1.page-title { /*....................*/
    margin: 0;
    font-weight: 600;
    font-size: 1.75rem;
}

.page-subtitle { /*....................*/
    margin: -3px;
    font-weight: 400;
    font-size: 13px;
    color: #6b7280;
}

/* FILTERS */

.filters-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

    .filters-row input[type="search"] {
        flex-grow: 1;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        color: #374151;
    }

    .filters-row select {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background-color: white;
        color: #374151;
        min-width: 140px;
    }

/* AUDIT CARDS */

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Each audit card */
.audit-card {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
    border: 1px solid #e5e7eb;
    align-items: flex-start;
}

/* Icon box on left */
.icon-box {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

/* Action colors */
.action-edit {
    background-color: #bfdbfe;
    Light Blue color: #2563eb;
    Dark Blue
}

.action-create {
    background-color: #d1fae5;
    Light Green color: #10b981;
    Green
}

.action-delete {
    background-color: #fecaca;
    Light Red color: #dc2626;
    Red
}

.action-view {
    background-color: #e5e7eb;
    Grey color: #6b7280;
    Dark Grey
}

/* Audit details column */
.audit-details {
    flex-grow: 1;
    font-size: 14px;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Top row: user name and badges */
.top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* User name */
.user-name {
    font-weight: 700;
    color: #111827;
}

/* Badges */
.audit-badge {
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    /*    border: 1px solid #d1d5db;*/
}

.action-badge {
    background: transparent;
    text-transform: capitalize;
}

.entity-badge {
    background: white;
}

/* Entity info line */
.entity-info {
    font-size: 13px;
    color: #6b7280;
}

.entity-name {
    font-weight: 600;
    color: #111827;
    font-size: 12px;
}

.audit-action-text {
    font-weight: normal; /* normal weight for Edited/Created/etc */
    color: #374151; /* optional: softer color */
    margin-right: 4px;
    /* spacing before entity name */
}

.audit-entity-text {
    font-weight: 600; /* bold for DON-001 */
    color: #111827;
    /* darker color for emphasis */
}

/* Description line */
.description {
    font-size: 12px;
    color: #4b5563;
    white-space: pre-wrap;
}

/* Timestamp */
.timestamp {
    font-size: 11px;
    color: #9ca3af;
}

/* Responsive for mobile */
/* Only on small screens adjust top filters */
@media (max-width: 768px) {
    .filters-grid {
        flex-direction: column;
        align-items: stretch;
    }

        .filters-grid input,
        .filters-grid select,
        .filters-grid button {
            width: 100%; /* take full width on mobile */
        }

    .filter-buttons {
        justify-content: flex-start;
    }
}

.action-pill-updated {
    background-color: #eff6ff;
    color: #2563eb;
}

.action-pill-created {
    background-color: #ecfdf5;
    color: #10b981;
}

.action-pill-delete {
    background-color: #fef2f2;
    color: #dc2626;
}

.action-pill-view {
    background-color: #f9fafb;
    color: #6b7280;
}



.entity-pill {
    color: #374151;
    border: 1px solid #e5e7eb;
    background: transparent;
}



/*add revenue*/
/*.page-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.page-header p {
    margin: 0;
    font-size: 13px;
    color: #666;
}*/

/* Cards */
.card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

    .card h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 18px;
    }

.icon {
    font-size: 16px;
}

/* Form */
.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

input,
select {
    width: 100%;
    height: 38px;
    border-radius: 4px;
    border: 1px solid #d6d6d6;
    padding: 0 12px;
    font-size: 14px;
    background: #f2f2f2;
}

    input::placeholder {
        color: #999;
    }

.audit-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* size of container */
    height: 36px;
    border-radius: 6px; /* rounded corners */
    outline: none;
    box-shadow: none;
    border: none;
    background-color: #f0f0f0; /* background color */
}

    .audit-icon-container img {
        width: 18px; /* size of PNG inside */
        height: 18px;
        outline: none;
    }

button:focus,
a:focus {
    outline: none;
    box-shadow: none;
}



/* $ Prefix */
.input-prefix {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    height: 34px;
    margin-top: 4px;
    margin-bottom: 4px;
}

    .input-prefix span {
        padding: 0 10px;
        color: #555;
        font-size: 14px;
    }

    .input-prefix input {
        border: none;
        background: transparent;
        height: 100%;
    }

/* Radio */
.radio-group {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.radio-group {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
}
    /*circular check boxes */
    /* Circular Checkbox */

    /* Only this checkbox becomes circular */


    .radio-group label {
        font-weight: normal;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.btn-primary {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    background: #17223A;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    text-align: center;
}

    .btn-primary:hover {
        background: #1f2d4d;
    }

    .btn-primary:active {
        background: #10192d;
    }

/*    view revenue*/
.btn-add {
    background-color: #0b1e40;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.summary-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 6px;
    margin-top: 6px;
}

.card.summary {
    display: flex;
    flex-direction: row; /* 🔥 FORCE icon to the LEFT */
    align-items: flex-start; /* top-left inside card */
    justify-content: flex-start;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    flex: 1;
}

.summary-icon {
    margin-right: 12px;
    display: flex;
    /*    align-items: center;*/
    align-self: center;
}


.summary-content .title {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.summary-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}


    .summary-content .amount {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
    }

.dollar-icon {
    font-size: 20px;
    font-weight: bold;
}

.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    position: relative;
}

    .filters input, .filters select {
        padding: 3px 8px;
        height: 34px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 13px;
        background: white;
        color: #000;
    }


.filter-select {
    display: inline-block;
    width: auto; /* auto width based on content */
    min-width: max-content; /* ensure it fits text */
    padding: 4px 8px; /* a little extra space */
    font-size: 13px;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
}

.amount-range-group {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 0.5rem; /* optional spacing between the two inputs */
}

    .amount-range-group input {
        width: 100%; /* fill the column */
        box-sizing: border-box;
    }

.three-inputs-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
    gap: 0.5rem; /* spacing between inputs */
}

    .three-inputs-group input {
        width: 100%; /* fill each column */
        box-sizing: border-box;
    }

.btn-download {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #17223A;
    cursor: pointer;
}

.revenue-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card.revenue-item {
    display: flex;
    flex-direction: column; /* 🔥 allows multiple rows */
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    margin-bottom: 6px;
    margin-top: 5px;
}

.revenue-info {
    display: flex;
    flex-direction: column;
}

.revenue-name {
    font-weight: 600;
    margin: 0;
}

.revenue-meta, .revenue-sub {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0 0;
}


.revenue-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-left: 8px;
}


    .revenue-amount .amount {
        font-weight: 700;
        margin: 0;
    }

.status {
    display: inline-flex; /* for centering text */
    justify-content: center; /* center horizontally */
    align-items: center; /* center vertically */
    width: 80px; /* same width for all pills */
    height: 18px; /* smaller height */
    border-radius: 11px; /* half of height for capsule shape */
    font-size: 11px; /* slightly smaller font */
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
}

    /* Colors */
    .status.paid {
        background-color: #daf5e5;
        color: #2e7d32;
    }

    .status.partial {
        background-color: #fff4e5;
        color: #ff9800;
    }

    .status.unpaid,
    .salary-chip.fine{
        background-color: #ffe5e5;
        color: #f44336;
    }
    .status.due {
        background-color: #ffe5e5;
        color: #f44336;
    }
    .status.avalible {
        background-color: mediumpurple; /* pill background */
        color: white; /* text color */
    }

.balance {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0 0;
}

.revenue-balance-row {
    margin-top: 10px;
}

.divider {
    height: 1px;
    background-color: #e0e0e0;
    margin-bottom: 4px;
    margin-top: 4px;
}

.balance-left {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.revenue-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 🔥 top alignment */
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    position: relative; /* for close button */
    background: #f5f5f5;
    padding: 18px 22px; /* slightly tighter */
    border-radius: 16px;
    width: 560px; /* increased width */
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 6px; /* balanced spacing */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

    .popup-content h3 {
        margin: 0 0 10px 0; /* remove big default margin */
        font-size: 18px;
    }

.popup-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 7px;
}

.popup-card {
    background: #e0e0e0;
    flex: 1 1 45%;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 12px;
    color: #666;
    margin: 0;
    color: #111827;
}

.card-value {
    font-weight: bold;
    margin: 0;
    font-size: 16px;
}


.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    color: #888;
    cursor: pointer;
}
/* connected bank account */
.connected-client-header {
    align-items: flex-start;
    margin-bottom: 18px;
}

.connected-invite-btn {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: #16213e;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .connected-invite-btn img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

.connected-search-wrap {
    margin-bottom: 22px;
}

.connected-search-box {
    position: relative;
    width: 100%;
}

.connected-search-input {
    width: 100%;
    height: 44px;
    border: 1px solid #d7dbe2;
    border-radius: 6px;
    padding: 0 14px 0 38px;
    font-size: 14px;
    background: #fff;
}

    .connected-search-input:focus {
        outline: none;
        border-color: #b8c0cc;
    }

.connected-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.connected-account-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.connected-account-card {
    padding: 20px 18px;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    box-shadow: none;
    background: #fff;
}

.connected-account-main {
    align-items: center;
}

.connected-bank-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background: #ffffff; /* pure white background */
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .connected-bank-avatar img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

.connected-bank-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.connected-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.connected-bank-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.connected-bank-meta {
    margin: 0;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
}

.connected-status-badge,
.connected-type-badge {
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

    .connected-status-badge.connected {
        background: #1e2b4f;
        color: #fff;
    }

    .connected-status-badge.syncing {
        background: #f1f2f4;
        color: #222;
    }

.connected-type-badge {
    background: #e5e7eb;
    color: #222;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.connected-more-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    color: #111827;
}

    .connected-more-btn:hover {
        background: #f3f4f6;
    }

@media (max-width: 768px) {
    .connected-client-header {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }

    .connected-invite-btn {
        width: 100%;
        justify-content: center;
    }

    .connected-account-main {
        align-items: flex-start;
    }

    .connected-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
.connected-menu {
    position: absolute;
    top: 40px;
    right: 0;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    z-index: 1000;
}

.connected-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #222;
    cursor: pointer;
    text-align: left;
}

    .connected-menu-item:hover {
        background: #f8f9fb;
    }

    .connected-menu-item img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .connected-menu-item.danger {
        color: #ff5a3d;
    }

        .connected-menu-item.danger:hover {
            background: #fff5f3;
        }
.bank-trans-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start;
    width: 100%;
}

.bank-trans-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.bank-export-icon {
    font-size: 15px;
    line-height: 1;
}

.bank-trans-filters {
    margin-bottom: 20px;
}

.bank-search-wrap {
    flex: 1;
    position: relative;
}

.bank-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    font-size: 15px;
    pointer-events: none;
}

.bank-search-input {
    padding-left: 32px !important;
}

.bank-table-card {
    padding: 14px 14px 20px;
    border-radius: 10px;
}

.bank-table-title {
    margin: 12px 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.bank-table-wrap {
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.bank-data-table {
    width: 100%;
    border-collapse: collapse;
}

    .bank-data-table thead th {
        background: #f3f3f3;
        color: #7b7b7b;
        font-weight: 600;
        font-size: 14px;
        padding: 18px 16px;
        text-align: left;
        border-bottom: 1px solid #d7d7d7;
    }

    .bank-data-table tbody td {
        padding: 18px 16px;
        font-size: 14px;
        color: #222;
        border-bottom: 1px solid #e1e1e1;
        vertical-align: middle;
    }

    .bank-data-table tbody tr:last-child td {
        border-bottom: none;
    }

.amount-negative {
    color: #ff2b2b !important;
    font-weight: 600;
}

.amount-positive {
    color: #47b263 !important;
    font-weight: 600;
}

.bank-type-pill {
    min-width: 78px;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

    .bank-type-pill.debit {
        background: #e5e5e5;
        color: #1d2743;
    }

    .bank-type-pill.credit {
        background: #1d2743;
        color: #fff;
    }

.bank-type-arrow {
    font-size: 12px;
    line-height: 1;
}

.bank-filter-panel {
    margin-bottom: 16px;
}

@media (max-width: 992px) {
    .bank-trans-header {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }

    .bank-trans-actions {
        width: 100%;
        flex-wrap: wrap;
    }

        .bank-trans-actions .reset-btn {
            flex: 1;
            justify-content: center;
        }

    .bank-search-wrap {
        width: 100%;
    }
}
.bank-trans-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start;
    width: 100%;
}

.bank-trans-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.bank-export-icon {
    font-size: 15px;
    line-height: 1;
}

.bank-trans-filters {
    margin-bottom: 20px;
}

.bank-search-wrap {
    flex: 1;
    position: relative;
}

.bank-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    font-size: 15px;
    pointer-events: none;
}

.bank-search-input {
    padding-left: 32px !important;
}

.bank-table-card {
    padding: 14px 14px 20px;
    border-radius: 10px;
}

.bank-table-title {
    margin: 12px 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.bank-table-wrap {
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.bank-data-table {
    width: 100%;
    border-collapse: collapse;
}

.bank-data-table thead th {
    background: #f3f3f3;
    color: #7b7b7b;
    font-weight: 600;
    font-size: 14px;
    padding: 18px 16px;
    text-align: left;
    border-bottom: 1px solid #d7d7d7;
}

.bank-data-table tbody td {
    padding: 18px 16px;
    font-size: 14px;
    color: #222;
    border-bottom: 1px solid #e1e1e1;
    vertical-align: middle;
}

.bank-data-table tbody tr:last-child td {
    border-bottom: none;
}

.amount-negative {
    color: #ff2b2b !important;
    font-weight: 600;
}

.amount-positive {
    color: #47b263 !important;
    font-weight: 600;
}

.bank-type-pill {
    min-width: 78px;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.bank-type-pill.debit {
    background: #e5e5e5;
    color: #1d2743;
}

.bank-type-pill.credit {
    background: #1d2743;
    color: #fff;
}

.bank-type-arrow {
    font-size: 12px;
    line-height: 1;
}

.bank-filter-panel {
    margin-bottom: 16px;
}

@media (max-width: 992px) {
    .bank-trans-header {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }

    .bank-trans-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .bank-trans-actions .reset-btn {
        flex: 1;
        justify-content: center;
    }

    .bank-search-wrap {
        width: 100%;
    }
}

.invite-bank-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}

.invite-cancel-btn {
    height: 44px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.invite-send-btn.revenue-modal-submit-btn {
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #16213e;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    width: 100%;
}

.revenue-modal-backdrop {
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
    .invite-bank-modal {
        width: calc(100vw - 24px);
        border-radius: 18px;
    }

    .invite-bank-actions {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
/* --- STATUS CAPSULE IN POPUP --- */
.popup-card .card-value.status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
}

    /* Specific status colors for popup capsule */
    .popup-card .card-value.status.paid {
        background-color: #daf5e5;
        color: #2e7d32;
    }

    .popup-card .card-value.status.due {
        background-color: #ffe5e5;
        color: #f44336;
    }

/* Optional: spacing for input/select when editing */
.popup-card input, .popup-card select {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
}


/* Card layout */
.donor-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.donor-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

    .donor-card-header h3 {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }


/* Form spacing */
.donor-form-group {
    margin-bottom: 5px;
}

    .donor-form-group label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 6px;
    }

.donor-action-bar.two-col {
    display: flex;
    justify-content: flex-end; /* buttons align nicely to right */
    gap: 12px; /* 👈 space between buttons */
    margin-top: 24px;
}

/* Optional: make buttons equal height */
.donor-action-bar .primary-btn {
    min-width: 140px;
}
/* Wrapper must control icon positioning */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

    /* Icon inside input */
    .input-with-icon .left-icon {
        position: absolute;
        left: 14px;
        width: 18px;
        height: 16px;
        stroke: #9ca3af;
        fill: none;
        stroke-width: 1.5px;
        pointer-events: none;
    }

    /* Ensure input text never overlaps icon */
    .input-with-icon .form-input {
        padding-left: 44px; /* IMPORTANT */
    }

/* Fix SVG rendering consistency */
.left-icon path,
.left-icon circle {
    stroke: currentColor;
}

.input-with-icon .left-icon {
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.special-donor-case {
    margin-bottom: 16px;
    margin-top: 18px;
    font-size: 12px;
    font-weight: 300;
}

/* Action bar */
.donor-action-bar {
    margin-top: 18px;
}
/* ===============================
   VIEW DONORS – SCOPED ROOT
   =============================== */
.vd-root {
    width: 100%;
}

/* ===============================
   HEADER
   =============================== */
.vd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.vd-back-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.vd-title-wrap {
    display: flex;
    flex-direction: column;
}

.vd-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.vd-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* ===============================
   ADD BUTTON
   =============================== */
.vd-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

    .vd-actions .primary-btn {
        width: auto;
        padding: 7px 14px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
    }

/* ===============================
   SEARCH BAR
   =============================== */
.vd-search {
    position: relative;
    width: 100%;
    margin-bottom: 18px;
}

    .vd-search .form-input {
        width: 100%;
        padding-left: 40px;
    }

.vd-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    stroke: #9ca3af;
    fill: none;
    stroke-width: 2;
}

/* ===============================
   DONOR LIST
   =============================== */
.vd-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===============================
   DONOR CARD
   =============================== */
.vd-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid #d1d5db;
}

/* ===============================
   LEFT SIDE
   =============================== */
.vd-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vd-avatar {
    width: 40px;
    height: 40px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   DONOR INFO
   =============================== */
.vd-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.vd-meta {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.vd-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

    .vd-meta-row:first-child {
        padding-bottom: 6px;
        margin-bottom: 6px;
        border-bottom: 1px solid #e5e7eb;
    }

.vd-meta svg {
    width: 13px;
    height: 13px;
    stroke: #6b7280;
    fill: none;
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===============================
   RIGHT SIDE
   =============================== */
.vd-right {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.vd-amount-wrap {
    text-align: right;
}

.vd-amount {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}

.vd-count {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* ===============================
   MORE BUTTON
   =============================== */
.vd-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

    .vd-more-btn svg {
        width: 16px;
        height: 16px;
        fill: #6b7280;
    }

/* ===== Header Row ===== */
.donor-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px; /* small gap before search */
}

.donor-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== Add Button (small, compact) ===== */
.donor-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* a bit more breathing room */
    padding: 8px 16px; /* ⬅️ THIS is the main change */
    font-size: 14px; /* slightly larger text */
    font-weight: 500;
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 8px; /* smoother, modern look */
    cursor: pointer;
    white-space: nowrap;
}

    .donor-add-btn svg {
        width: 16px; /* match text size */
        height: 16px;
    }


/* ===== Search (full width under header) ===== */
.donor-search {
    position: relative;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 14px;
}

    .donor-search .form-input {
        width: 100%;
        padding-left: 40px;
    }

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    stroke: #9ca3af;
    fill: none;
    stroke-width: 2;
}

.donor-search .form-input {
    width: 100%;
    padding-left: 40px; /* ← THIS is the missing part */
}

/* Donor list */
.donor-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Donor card */
.donor-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
}

/* Left */
.donor-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.donor-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donor-info h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.donor-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

    .donor-meta span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .donor-meta svg {
        overflow: visible;
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5px;
    }

/* Right */
.donor-right {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
}

.donor-menu {
    position: absolute;
    top: 32px;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    width: 190px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    z-index: 50;
    padding: 4px 0; /* important */
}
.donor-menu-item {
    all: unset; /* removes browser default button styles */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    box-sizing: border-box; /* ensures padding is consistent */
}

    .donor-menu-item:hover {
        background: #f3f4f6;
        border-radius: 4px; /* optional, makes hover rectangle softer */
    }

    /* Icons inside menu */
    .donor-menu-item span,
    .donor-menu-item svg,
    .donor-menu-item img {
        font-size: 14px;
        width: 16px;
        text-align: center;
        display: block; /* fixes inline-gap issues */
        vertical-align: middle;
        pointer-events: none; /* avoids hover flicker on icon */
    }

    /* Subtle spacing between items */
    .donor-menu-item + .donor-menu-item {
        margin-top: 2px;
    }

    /* Danger (Delete) */
    .donor-menu-item.danger {
        color: #dc2626;
    }

        .donor-menu-item.danger:hover {
            background: #fee2e2;
            border-radius: 4px; /* keep it consistent */
        }
.donor-amount {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    text-align: right;
}

    .donor-amount.positive {
        color: #008000; /* green */
    }

    .donor-amount.negative {
        color: #d32f2f; /* red */
    }

.donor-count {
    font-size: 12px;
    color: #6b7280;
}

.more-btn {
    background: none;
    border: none;
    cursor: pointer;
}

    .more-btn svg {
        width: 18px;
        height: 18px;
        fill: #6b7280;
    }
/* ===== Record Donation Modal Backdrop ===== */
.rd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
}

/* ===== Modal Container ===== */
.rd-donation-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    z-index: 1001;
}

/* ===== Close Button ===== */
.rd-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
}

/* ===== Header ===== */
.rd-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.rd-donor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Donation Card ===== */
.rd-donation-card {
    position: relative;
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 18px;
}

.rd-amount {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.rd-meta {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}


/* ===== Status + Date ===== */
.rd-status-wrap {
    position: absolute;
    top: 12px;
    right: 12px;
    text-align: right;
}

.rd-status {
    display: inline-block;
    background: #dcfce7;
    color: #16a34a;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}

.rd-date {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* ===== Action Row ===== */
.rd-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-action-column {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rd-outline-btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .rd-outline-btn:hover {
        background-color: #f3f4f6;
        border-color: #9ca3af;
    }

.rd-btn-icon {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.rd-btn-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* ===== Send Icon Button ===== */
.rd-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .rd-send-btn svg {
        width: 18px;
        height: 18px;
        color: #111827;
    }

    .rd-send-btn:hover {
        background: #f3f4f6;
    }

/* ===== Solid Record Button===== */
.rd-record-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.donor-details-card {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    background-color: #f3f4f6; /* light grey card */
    display: flex;
    flex-direction: column;
    gap: 6px; /* space between rows */
}

    .donor-details-card .donor-row {
        text-align: left;
    }

    .donor-details-card .org-name {
        font-weight: bold; /* bold for org name */
        font-size: 14px; /* normal size */
        color: #111827;
    }

    .donor-details-card .donor-info {
        font-weight: normal; /* normal weight */
        font-size: 12px; /* slightly smaller */
        color: #111827;
    }

.rd-record-btn:hover {
    background: #f3f4f6;
}
/*   mobile edit revenue responsive*/
@media (max-width: 640px) {
    .donor-details-card {
        padding: 10px;
        gap: 4px;
    }

        .donor-details-card .org-name {
            font-size: 13px; /* slightly smaller on mobile */
        }

        .donor-details-card .donor-info {
            font-size: 11px; /* slightly smaller on mobile */
        }
}


/* FORM CONTAINER */
.payment-container {
    width: 100%;
    padding: 24px 30px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* SECTION TITLES */
.section-title {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.section-description {
    font-size: 13px;
    color: #666;
    margin-top: 20px;
    margin-bottom: 16px;
}

/* FORM GROUPS */
.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

    .form-group label {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 6px;
    }


.form-textarea {
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    height: 32px;
    background-color: #f0f0f0;
    outline: none;
}

    .form-textarea:focus {
        border: 1px solid #d1d5db; /* Keep grey border */
        box-shadow: 0 0 0 2px #ffffff, /* white gap */
        0 0 0 4px #000000;
    }

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* FORM ROWS */
.form-row {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.full-width {
    width: 100%;
}

.half-width {
    flex: 1;
}

/* BUTTONS */
.button-row {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-cancel, .btn-submit {
    flex: 1;
    padding: 10px 0;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    height: 34px;
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center;
}

.btn-cancel {
    background-color: #eee;
    border: none;
}

    .btn-cancel:hover {
        background-color: #ddd;
    }

.btn-submit {
    background-color: #0b1e40;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
}

    .btn-submit:hover {
        background-color: #0a1833;
    }

.btn-icon {
    font-size: 16px;
}
.success-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 9999;
    animation: slideDown 0.3s ease;
}


.success-text {
    font-weight: 500;
    color: #1f2937;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
.dropdown-with-icon {
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f3f4f6; /* same as input */
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 0 12px; /* text padding */
    font-size: 14px;
    height: 36px;
    color: #111827;
    background-image: linear-gradient(45deg, transparent 50%, #17223A 50%), linear-gradient(135deg, #17223A 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

    .dropdown-with-icon:focus {
        outline: none;
        border-color: #17223A;
        background-color: #ffffff;
    }


.dropdown-with-icon {
    line-height: 36px; /* match input height */
}


/*pay revenue*/

.revenue-summary {
    margin-top: 16px;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.summary-item {
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.summary-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

    .summary-value.paid {
        color: #16a34a;
    }

    .summary-value.balance {
        color: #f97316;
    }


/*categories
.....................*/
.clickable {
    cursor: pointer;
}

.chevron {
    font-size: 18px;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

    .chevron.open {
        transform: rotate(90deg);
    }

.subcategory-count {
    margin-left: 8px;
    color: #6b7280;
    font-size: 13px;
}

.subcategory-list {
    padding: 8px 24px 14px;
}

.subcategory-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}


/* Modal Backdrop */
.revenue-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

/* Modal Box */
.revenue-modal-box {
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    min-width: 320px;
    max-height: 90vh;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.25s ease-out;
    overflow-y: auto;
}

.revenue-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.revenue-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.revenue-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #555;
    padding: 0;
}

.revenue-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.revenue-modal-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom:3px;
}

.revenue-modal-input, select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
    margin-top:3px;
}

.revenue-modal-type-options {
    display: flex;
    gap: 20px;
    margin-top: 4px;
    margin-bottom:6px;
}

    .revenue-modal-type-options label {
        display: flex;
        align-items: center;
        font-size: 14px;
        gap: 6px;
        cursor: pointer;
        margin-bottom:6px;
    }

    .revenue-modal-type-options input[type="radio"] {
        width: 16px;
        height: 16px;
    }

.revenue-modal-submit-btn {
    background-color: #17223A;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    align-self: flex-end;
    transition: background-color 0.2s ease-in-out;
}

    .revenue-modal-submit-btn:hover {
        background-color: #1f2d4d;
    }

/* Validation Message */
.revenue-modal-validation {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #17223A;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    z-index: 2000;
}

.validation-icon {
    width: 18px;
    height: 18px;
    background-color: #17223A;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}
/* Grid for the stat cards */
.pay-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 14px 0;
    margin-top: 0;
}

/* Individual stat card */
.pay-stat-card {
    background: #F3F4F6;
    border-radius: 12px;
    padding: 18px 20px;
}

    /* Label text inside card */
    .pay-stat-card small {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-bottom: 6px;
    }

/* Value text inside card */
.pay-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* Net salary full-width card */
.pay-net-card {
    background: #F3F4F6;
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
    margin: 18px 0;
}

    .pay-net-card small {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-bottom: 6px;
    }

.pay-net-value {
    font-size: 34px;
    font-weight: 800;
    color: #111827;
}

/* Colors like screenshot */
.pay-green {
    color: #16A34A;
}

.pay-red {
    color: #DC2626;
}

.pay-purple {
    color: #7C3AED;
}

/*upload*/


.upload-box {
    border: 1.5px dashed #d0d5dd;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .upload-box:hover {
        background: #f3f4f6;
        border-color: #1b6ec2;
    }

.upload-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.upload-box p {
    margin: 6px 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}

.upload-box span {
    font-size: 12px;
    color: #667085;
}

/*add donation*/
/*................*/


.quick-btn {
    display: flex; /* horizontal layout */
    flex-direction: row; /* icon left, text right */
    align-items: center; /* vertically center */
    justify-content: center; /* horizontally center icon+text */
    gap: 8px; /* spacing between icon and text */
    padding: 12px 16px; /* adjust as needed */
    border: none;
    border-radius: 6px;
    background-color: #ccc; /* button color */
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%; /* full width */
    box-sizing: border-box; /* include padding in width */
}

    .quick-btn:hover {
        background-color: #aaa;
    }

    .quick-btn .quick-icon img {
        display: block;
        width: 18px;
        height: 18px;
    }

.payment-status {
    font-weight: bold;
}

.input-prefix {
    position: relative;
}

.date-wrapper {
    position: relative;
    width: 100%;
}

.date-input {
    padding-right: 40px;
}

/* fake calendar icon */
.calendar-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
}

/* hide native icon */
.date-input::-webkit-calendar-picker-indicator {
    opacity: 0;
}


.btn-prim {
    width: 100%;
    padding: 6px 16px;
    margin-bottom: 16px; /* 👈 space below */
    border-radius: 10px;
    background: transparent; /* 👈 default transparent */
    color: #000000; /* 👈 black text */

    border: 1px solid #1f2d4d; /* optional: visible outline */
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}

    /* hover (optional but nice) */
    .btn-prim:hover {
        background: #1f2d4d; /* blue background */
        color: #ffffff; /* white text */
    }

    /* clicked (active) */
    .btn-prim:active {
        background: #17223A; /* darker blue when pressed */
        color: #ffffff;
    }
/* Form spacing */


/*//////////////upload */

.upload-box {
    display: flex;
    flex-direction: column; /* stack icon and text vertically */
    align-items: center; /* center horizontally */
    justify-content: center; /* optional: center vertically */
    width: 100%; /* full width of parent */
    padding: 16px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center; /* ensures text inside is centered */
}

    .upload-box img.upload-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }

    .upload-box p,
    .upload-box span {
        margin: 4px 0;
        text-align: center; /* center text inside each element */
    }

.form-row.one-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.donor-form-group {
    width: 100%;
}

.spaced-dropdown {
    margin-top: 20px;
}


/*vendor*/
.popup-input {
    display: block;
    width: 100%;
    padding: 4px 10px; /* smaller vertical padding */
    border: 1.5px solid grey; /* grey outline */
    border-radius: 5px;
    background-color: transparent;
    font-size: 1rem;
    color: #333;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    outline: none;
    box-sizing: border-box;
    height: 32px; /* explicitly smaller input height */
}

    .popup-input:focus {
        border-color: grey;
        box-shadow: 0 0 0 3px #17223A;
    }


/*    .............items*/


.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 8px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* keep content top-aligned */
    /* remove fixed height so top area can grow */
}

.product-image {
    background: #f0f1f5;
    height: 120px; /* taller top grey area */
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

    .product-image img {
        width: 40px; /* PNG size */
        height: 40px;
        object-fit: contain;
    }

.product-name {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 1rem;
}

.qty-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.product-qty {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 8px;
}


.product-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.btn-edit {
    flex-grow: 1;
    background: #f5f5f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

    .btn-edit:hover {
        background-color: #e1e1e6;
    }

.btn-delete {
    background: #f5f5f7; /* light grey background */
    border: 1px solid #ddd; /* border like Edit button */
    border-radius: 6px; /* rounded corners */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px; /* add some padding around icon */
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-delete:hover {
        background-color: #17223A; /* dark hover color */
    }

.product-price {
    text-align: right;
    font-weight: 700;
    margin-top: 8px;
    font-size: 1.1rem;
}

.price-delete {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* price above, delete below, right-aligned */
    gap: 4px;
}
/* Edit Button Hover */
.btn-edit:hover {
    background-color: #17223A;
    color: #fff; /* text & icon turn white on dark background */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Delete Button Hover */
.btn-delete:hover {
    color: #17223A; /* icon changes to #17223A */
    transition: color 0.2s ease;
}

.btn-edit:hover svg {
    stroke: #fff;
}

.btn-delete:hover svg {
    stroke: #fff; /* icon turns white on hover */
}



/*pagination:*/

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 5px;
}

.page-btn {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

    .page-btn.active {
        background-color: #17223A;
        color: white;
    }

    .page-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }


 



/*reconcilation*/
/*.............*/
.page-title {
    font-size: 26px;
    font-weight: 600;
}


.page-subtitle {
    color: gray;
    margin-bottom: 20px;
}


.stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}


.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


.table-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


.filters {
    display: flex;
    gap: 10px;
    /*    margin: 10px 0;*/
    align-items: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

    /* Make search input take remaining space */
    .filters input {
        flex: 1;
        min-width: 250px;
    }

    /* Keep dropdowns smaller */
    .filters select {
        width: 160px;
    }

/* Full table border */
/* Outer border of the table */
.data-table {
    margin-top: 16px;
    width: 100%;
    border: 1px solid #C0C0C0; /* outer border */
    border-collapse: collapse; /* clean outer border */
}

    /* Header row */
    .data-table th {
        background-color: #D9D9D9; /* grey header */
        color: #4D4D4D; /* dark grey text */
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #C0C0C0; /* line under header */
    }

    /* Table body rows: horizontal lines only */
    .data-table td {
        border-bottom: 1px solid #C0C0C0; /* horizontal line between rows */
        padding: 8px;
    }

    /* Remove vertical lines */
    .data-table th,
    .data-table td {
        border-left: none;
        border-right: none;
    }



.badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}


.badge-purchase {
    background: #dbeafe;
    color: #2563eb;
}


.badge-sale {
    background: #dcfce7;
    color: #16a34a;
}


.paid {
    color: #16a34a;
    font-weight: 500;
}


.balance {
    color: #f97316;
    font-weight: 500;
}


.method {
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.stat-label {
    display: flex;
    align-items: center;
    gap: 8px; /* space between icon and text */
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.radio-item input[type="radio"] {
    accent-color: #111827; /* black */
    width: 14px;
    height: 14px;
    margin: 0;
}

.upload-box {
    border: 1.5px dashed #d0d5dd;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .upload-box:hover {
        background: #f3f4f6;
        border-color: #1b6ec2;
    }

.upload-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.upload-box p {
    margin: 6px 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}

.upload-box span {
    font-size: 12px;
    color: #667085;
}

.clickable {
    cursor: pointer;
}

.chevron {
    font-size: 18px;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

    .chevron.open {
        transform: rotate(90deg);
    }

.subcategory-count {
    margin-left: 6px;
    color: #6b7280;
    font-size: 12px;
}

.subcategory-list {
    padding: 4px 20px 6px; /* reduced */
}

.subcategory-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0; /* KEY FIX */
    font-size: 13px;
    line-height: 1.1; /* compact text */
}

/* Modal Backdrop */
.revenue-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

/* Modal Box */
.revenue-modal-box {
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    min-width: 320px;
    max-height: 90vh;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.25s ease-out;
    overflow-y: auto;
}

.revenue-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.revenue-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.revenue-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #555;
    padding: 0;
}

.revenue-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.revenue-modal-label {
    font-size: 14px;
    font-weight: 500;
}

.revenue-modal-input, select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    box-sizing: border-box;
}

.revenue-modal-type-options {
    display: flex;
    gap: 20px;
    margin-top: 4px;
}

    .revenue-modal-type-options label {
        display: flex;
        align-items: center;
        font-size: 14px;
        gap: 6px;
        cursor: pointer;
    }

    .revenue-modal-type-options input[type="radio"] {
        width: 16px;
        height: 16px;
    }

.revenue-modal-submit-btn {
    background-color: #17223A;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    align-self: flex-end;
    transition: background-color 0.2s ease-in-out;
}

    .revenue-modal-submit-btn:hover {
        background-color: #1f2d4d;
    }

/* Validation Message */
.revenue-modal-validation {
    position: fixed; /* position relative to viewport */
    top: 20px; /* distance from top of screen */
    left: 50%; /* horizontal center */
    transform: translateX(-50%); /* center horizontally */
    background-color: #fff; /* white background */
    color: #17223A; /* text color */
    padding: 16px 24px; /* spacing */
    border-radius: 12px; /* rounded corners */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* subtle shadow */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    z-index: 2000; /* above everything */
}

.validation-icon {
    width: 18px;
    height: 18px;
    background-color: #17223A;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

.category-card {
    padding: 16px;
}

.category-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #fff;
}

.category-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-name {
    font-weight: 600;
}

.subcategory-count {
    color: #6b7280;
    font-size: 13px;
}

.chevron {
    font-size: 20px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

    .chevron.open {
        transform: rotate(90deg);
    }

.category-actions {
    display: flex;
    gap: 12px;
}


.subcategory-list {
    padding: 0 0 6px 34px; /* left indent only */
    margin: 0;
}

.subcategory-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0; /* very small */
    margin: 0;
    font-size: 13px;
    line-height: 1.1; /* CRITICAL */
}

.subcategory-name {
    color: #374151;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
}

    .icon-btn.delete img {
        filter: brightness(0) saturate(100%) invert(34%) sepia(94%) saturate(7496%) hue-rotate(353deg);
    }

.amount {
    font-weight: 600;
    margin-right: 12px;
}

.status.pending {
    background: #FEF3C7;
    color: #92400E;
}

.muted-text {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 999;
}

.review-bill-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    max-width: 90%;
    background: #ffffff;
    max-height: 80vh;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow-y: auto;
}

.review-bill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .review-bill-header h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
    }

/*.review-bill-preview {
    height: 220px;
    background: #f3f4f6;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

    .review-bill-preview img {
        width: 50px;
        opacity: 0.6;
    }
*/
.review-bill-preview {
    width: 100%;
    height: 400px; /* or dynamic height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* prevent scrollbars inside preview */
}

    .review-bill-preview img,
    .review-bill-preview embed {
        width: 100%;
        height: 100%;
        object-fit: contain; /* ensures image/pdf fits inside without distortion */
    }

@media (max-width: 768px) {
    .review-bill-preview {
        height: 180px; /* smaller on mobile */
    }
}

@media (max-width: 480px) {
    .review-bill-preview {
        height: 140px; /* very small devices */
    }
}

.review-bill-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
    margin-bottom: 30px;
}

    .review-bill-details label {
        font-size: 12px;
        color: #6b7280;
        display: block;
        margin-bottom: 4px;
    }

    .review-bill-details strong {
        font-size: 15px;
        font-weight: 600;
        color: #111827;
    }

    .review-bill-details .full {
        grid-column: span 2;
    }

.review-bill-actions {
    display: grid;
    grid-template-columns: 1fr 1fr; /* equal width buttons */
    gap: 16px;
    margin-top: 28px;
}

    .review-bill-actions .btn-danger-outline {
        height: 44px;
        border-radius: 10px;
        font-weight: 500;
    }

    .review-bill-actions .btn-primary {
        height: 44px;
        border-radius: 10px;
        font-weight: 500;
    }

.review-bill-header .close-btn {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    line-height: 1;
}

    .review-bill-header .close-btn:focus,
    .review-bill-header .close-btn:focus-visible,
    .review-bill-header .close-btn:active {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }

.create-expense-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    max-width: 90%;
    background: #ffffff;
    border-radius: 18px;
    padding: 30px 32px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.create-expense-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

    .create-expense-header h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
    }

.close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #111827;
    padding: 4px;
}

.create-expense-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .create-expense-body label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .create-expense-body input,
    .create-expense-body select,
    .create-expense-body textarea {
        margin-bottom: 12px;
    }

    .create-expense-body textarea {
        height: 80px;
        padding-top: 10px;
        resize: none;
    }

.full-width {
    width: 100%;
}


.reports-date-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.reports-date-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

    .reports-date-header h3 {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
    }

.reports-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.reports-date-field label {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-bottom: 6px;
}

.reports-date-field input {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 0 12px;
}

.reports-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.reports-summary-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

    .reports-summary-card span {
        font-size: 12px;
        color: #6b7280;
        display: block;
    }

    .reports-summary-card strong {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }

.summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

    .summary-icon.income {
        background: #dcfce7;
        color: #16a34a;
    }

    .summary-icon.expense {
        background: #fee2e2;
        color: #dc2626;
    }
/* Report list row */
.report-row {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

    .report-row:hover {
        background: #ffffff;
    }

    .report-row .avatar {
        background: #e5e7eb !important;
        color: #374151;
    }

        .report-row .avatar img {
            width: 18px;
            opacity: 0.8;
        }

    .report-row strong {
        font-size: 14px;
    }

    .report-row .muted-text {
        font-size: 12px;
        color: #6b7280;
    }
/* HEADER */
.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.staff-header-left {
    display: flex;
    gap: 12px;
}

.staff-header h1 {
    margin: 0;
    font-size: 20px;
}

.staff-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.staff-back {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.staff-add {
    background: #111827;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 500;
}

/* SEARCH */
.staff-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 10px;
}

    .staff-search svg {
        width: 16px;
        stroke: #9ca3af;
        fill: none;
        stroke-width: 1.8px;
    }

    .staff-search input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
    }

/* TOOLBAR */
.staff-toolbar {
    margin: 14px 0;
}

.inactive-toggle {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

    .inactive-toggle.active {
        background: #111827;
        color: #fff;
    }

/* LIST */
.staff-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.staff-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

/* TOP */
.staff-top {
    display: flex;
    justify-content: space-between;
}

.staff-left {
    display: flex;
    gap: 12px;
}



.review-new-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 999;
}

.review-new-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    max-width: 90%;
    background: #ffffff;
    max-height: 60vh;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow-y: auto;
}

.staff-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #1e293b; /* softer navy */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}


.staff-card-new {
    width: calc(100% - 24px);
    margin-left: 24px;
    margin-bottom: 14px;
    padding: 16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    box-sizing: border-box;
}


.staff-name {
    font-weight: 600;
}

.staff-role {
    font-size: 12px;
    color: #6b7280;
}

.staff-status.active {
    background: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.staff-menu {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* DIVIDER */
.staff-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 0;
}

/* BOTTOM */
.staff-bottom {
    display: flex;
    align-items: center;
}

.staff-email,
.staff-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.staff-phone {
    margin-left: auto;
}

    /* SVG ICONS (ONE SOURCE OF TRUTH) */
    .staff-email svg,
    .staff-phone svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8px;
    }
/* MENU WRAPPER */
.staff-menu-wrapper {
    position: relative;
}

/* THREE DOT BUTTON */
.staff-menu {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    color: #6b7280;
}

/* POPUP MENU */
.staff-menu-popup {
    position: absolute;
    top: 28px;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    padding: 6px;
    width: 170px;
    z-index: 50;
}

    /* MENU ITEMS */
    .staff-menu-popup button {
        width: 100%;
        background: none;
        border: none;
        padding: 8px 10px;
        text-align: left;
        font-size: 13px;
        border-radius: 8px;
        cursor: pointer;
        color: #111827;
    }

        /* HOVER */
        .staff-menu-popup button:hover {
            background: #f3f4f6;
        }

    /* DANGER ITEM */
    .staff-menu-popup .danger {
        color: #dc2626;
    }

        .staff-menu-popup .danger:hover {
            background: #fee2e2;
        }

.staff-right {
    display: flex;
    align-items: center; /* same vertical line */
    gap: 10px; /* space between Active and dots */
}

.staff-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.header-text h3 {
    margin-bottom: 4px;
}

.header-text p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.salary-tabs {
    display: flex;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

.salary-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
}

    .salary-tab.active {
        background: #ffffff;
        color: #111827;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

.salary-tabs {
    display: flex;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

.salary-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
}

    .salary-tab.active {
        background: #ffffff;
        color: #111827;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

.salary-chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

    .salary-chip.salary {
        background: #e0e7ff;
        color: #1e40af;
    }

    .salary-chip.bonus,
    .salary-chip.allowance {
        background: #dcfce7;
        color: #166534;
    }

.salary-status.paid {
    background: #dcfce7;
    color: #166534;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pay-btn {
    background: #111827;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.salary-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keeps icon ratio */
}

stat-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    position: static !important;
    display: block;
}

.stat-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.stat-card p {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.stat-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-text {
    position: static !important;
}

.more-filters-btn {
    width: 160px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
}

.amount-range-group {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    gap: 0.5rem; /* optional spacing between the two inputs */
}

    .amount-range-group input {
        width: 100%; /* fill the column */
        box-sizing: border-box;
    }

.three-inputs-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
    gap: 0.5rem; /* spacing between inputs */
}

    .three-inputs-group input {
        width: 100%; /* fill each column */
        box-sizing: border-box;
    }

.more-filters-panel {
    width: 100%;
    margin-top: 15px;
}

.more-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

    .more-filters-grid label {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 5px;
        display: block;
    }

    .more-filters-grid input,
    .more-filters-grid select {
        width: 100%;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #ccc;
    }

.more-filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.reset-btn {
    display: flex;
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #f3f4f6;
    cursor: pointer;
    height: 50px;
    width: 150px;
    margin-left: 5px;
}

.apply-btn {
    padding: 4px 18px;
    border-radius: 6px;
    border: none;
    background: #17223A;
    color: white;
    cursor: pointer;
    width: 150px;
    margin-left: 5px;
    height: 50px;
}

.data-table th {
    background-color: #D9D9D9; /* grey for header */
    color: #000; /* optional: black text for contrast */
    padding: 10px;
    text-align: left;
}

.excel-btn {
    padding: 4px 18px;
    border-radius: 6px;
    border: none;
    background: #1ec71e;
    color: white;
    cursor: pointer;
    width: 150px;
    margin-left: 5px;
    height: 50px;
}

    .excel-btn,.reset-btn,
    .apply-btn {
        height: 34px; /* adjust as needed */
        line-height: 28px; /* vertically center text */
        padding: 0 16px; /* horizontal padding only */
    }

    .data-table td, .data-table th {
        line-height: 2.5; /* more vertical spacing inside cells */
    }

    .reset-btn:hover {
        background-color: #17223A; /* dark hover */
        color: #fff;
    }
    /*Bnk account view*/
    /*....................*/
    .account-pill {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 999px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1.4;
    }

    .pill-org {
        background-color: #000;
        color: #fff;
    }

    .pill-user {
        background-color: #e5e5e5;
        color: #333;
    }

    .donor-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .donor-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

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

    .reset-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 28px;
        padding: 0 16px;
        background-color: #f5f6f8;
        color: #17223A;
        border: 1px solid #dcdfe5;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

        .reset-btn .btn-icon {
            width: 18px;
            height: 18px;
            object-fit: contain;
            filter: brightness(0);
            transition: filter 0.2s ease;
        }
        /* On hover: invert to white */
        /* HOVER STATE */
        .reset-btn:hover {
            background-color: #17223A;
            color: #ffffff;
            border-color: #17223A;
        }
            /* ICON COLOR ON HOVER (for PNG) */
            .reset-btn:hover .btn-icon {
                filter: brightness(0) invert(1);
            }
        /* ACTIVE (CLICK) */
        .reset-btn:active {
            background-color: #0f1629;
            border-color: #0f1629;
        }
    /*bank register*/
    /*,........................*/

    .transaction-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 20px 20px 20px;
    }

    .transaction-item {
        display: flex;
        gap: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 15px 20px;
        cursor: pointer;
        background: white;
        /* remove vertical centering */
        align-items: flex-start;
    }

        .transaction-item.selected {
            border-color: #888;
            background: #f8f8f8;
        }

        .transaction-item input[type="radio"] {
            cursor: pointer;
            width: 18px;
            height: 18px;
            accent-color: #17223A;
        }

    .transaction-details {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .transaction-title {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .transaction-date {
        font-size: 12px;
        color: #7a7a7a;
        margin-bottom: 10px;
    }

    .transaction-actions {
        display: flex;
        gap: 10px;
        /* align to the top left of transaction-details */
        justify-content: flex-start;
        flex-wrap: wrap; /* optional, in case buttons are too long */
    }


    .tag-container {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }

    .tag-chip {
        padding: 3px 10px; /* 👈 reduced height */
        border-radius: 14px; /* smaller radius */
        border: 1px solid #d0d5dd;
        background: #fff;
        font-size: 11px; /* smaller text */
        line-height: 1.2; /* tight vertical spacing */
        cursor: pointer;
        transition: all 0.15s ease;
    }

        .tag-chip:hover {
            background: #f5f6f8;
        }

        .tag-chip.active {
            background: #101828;
            color: #ffffff;
            border-color: #101828;
        }
    /* Base select */

    .custom-select {
        border: 1px solid #d0d5dd;
        border-radius: 10px;
        padding: 10px 12px;
        background: white;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }

    .custom-select-wrapper {
        position: relative; /* anchor */
    }

    .custom-options {
        position: absolute; /* removes from flow */
        top: 110%;
        left: 0;
        width: 100%;
        background: white;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        z-index: 999;
        overflow: hidden;
    }

    .custom-option {
        padding: 10px 12px;
        cursor: pointer;
    }

        .custom-option:hover {
            background: #17223A; /* hover ONLY */
            color: white;
        }

    .custom-select-wrapper {
        position: relative;
    }

    .profile-dropdown {
        position: absolute;
        top: 48px;
        right: 0;
        width: 240px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        z-index: 1000;
    }

    .profile-header {
        padding: 12px;
        border-bottom: 1px solid #eee;
    }


    .page-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .page-title-row {
        display: flex;
        align-items: center; /* 🔥 centers icon with h1 */
        gap: 12px;
    }

    .page-header-icon {
        width: 24px;
        height: 24px;
    }

    .page-title {
        margin: 0;
    }

    .profile-header small {
        display: block;
        color: #777;
        font-size: 12px;
    }

    .profile-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .profile-menu li {
            display: flex;
            padding: 10px 14px;
            cursor: pointer;
            display: flex;
            gap: 10px;
            align-items: center;
        }


    .profile-menu-icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }


    .profile-menu li:hover {
        background: #f5f5f5;
    }

    .profile-menu .logout {
        color: red;
        border-top: 1px solid #eee;
    }
    /* Tabs bar like screenshot */
    .sub-tabs {
        margin-top: 14px;
        width: 100%;
        display: flex;
        align-items: stretch;
        border: 1px solid #e5e7eb;
        background: #f3f4f6;
        border-radius: 4px;
        overflow: hidden;
        height: 40px;
    }

    .sub-tab {
        flex: 1;
        border: 0;
        background: transparent;
        font-weight: 600;
        font-size: 14px;
        color: #111827;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
        /* vertical separators between tabs */
        .sub-tab + .sub-tab {
            border-left: 1px solid #e5e7eb;
        }
        /* Active tab: white “raised” look */
        .sub-tab.active {
            background: #ffffff;
            box-shadow: 0 1px 0 rgba(0,0,0,0.04);
        }
    /* Optional panels for other tabs */
    .tab-panel {
        margin-top: 18px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 18px;
    }

    .tab-placeholder {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

    .subscription-wrapper {
        padding: 24px 32px;
        width: 100%;
        max-width: none;
    }

    .subscription-header h2 {
        font-size: 22px;
        font-weight: 600;
    }

    .subscription-header p {
        color: #6b7280;
    }

    .subscription-header {
        margin-bottom: 20px;
    }

    .current-plan-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #e5e7eb; /* soft gray */
        border: 1px solid #d1d5db; /* slightly darker border */
        border-radius: 10px;
        padding: 16px 20px;
        margin: 24px 0;
    }

    .current-plan-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .current-plan-icon {
        width: 36px;
        height: 36px;
        background: #d1d5db; /* slightly darker gray box */
        border-radius: 8px;
        padding: 6px;
    }

    .current-plan-text strong {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
    }

    .current-plan-text p {
        margin: 3px 0 0 0;
        font-size: 12px;
        color: #4b5563;
    }

    .status-pill {
        background: #fff;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        color: #000000;
    }
    /* =========================
   SUBSCRIPTION - PLANS TAB
   ========================= */
    /* Toggle spacing (space below Monthly/Yearly) */
    .billing-toggle-wrapper {
        display: flex;
        justify-content: center;
        margin: 18px 0 34px; /* more space below toggle */
    }

    .billing-toggle {
        position: relative;
        display: flex;
        gap: 10px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 6px;
    }

    .billing-btn {
        position: relative;
        min-width: 110px;
        height: 40px;
        padding: 0 18px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        cursor: pointer;
    }

        .billing-btn.active {
            background: #111827;
            color: #ffffff;
        }
    /* Save badge above Yearly */
    .save-badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: #22c55e;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 999px;
        white-space: nowrap;
    }
    /* Make header have title left + button right */
    .billing-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    /* Add Card button (matches screenshot) */
    .payment-add-btn {
        background: #111827;
        color: #fff;
        border: 0;
        border-radius: 8px;
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .payment-add-plus {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 0;
    }
    /* Payment method row uses current-plan-card look */
    .payment-methods-body {
        padding: 14px 16px 18px;
    }

    .payment-method-row {
        margin: 0; /* current-plan-card has margin in some versions */
        background: #ededed; /* screenshot gray */
        border: 1px solid #d1d5db;
    }
    /* Left icon in method row */
    .payment-method-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827;
    }
    /* Right side: Default + Remove */
    .payment-method-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* Remove button like screenshot (light pill) */
    .payment-link-btn {
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        color: #111827;
        height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }
    /* Give spacing between the two cards (methods + recent payments) */
    .payment-recent-card {
        margin-top: 18px;
    }
    /* Recent payments table columns (5 columns instead of 5 from invoices) */
    .payment-head,
    .payment-row {
        grid-template-columns: 0.9fr 1.4fr 1fr 0.6fr 0.7fr;
    }
        /* Amount alignment in payment table */
        .payment-row > div:nth-child(4),
        .payment-head > div:nth-child(4) {
            text-align: right;
            padding-right: 16px;
        }
    /* Center status pill column */
    .payment-status-cell {
        display: flex;
        justify-content: center;
    }
    /* Make description slightly muted */
    .payment-desc {
        color: #374151;
        font-size: 12px;
    }

    .plans-grid {
        display: grid;
        grid-template-columns: repeat(3, 420px); /* match card width */
        justify-content: center;
        gap: 60px; /* adjust spacing here */
    }
    /* Card base */
    .plan-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 22px 22px 18px;
        height: 480px;
        display: flex;
        width: 420px;
        flex-direction: column;
        box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    }
        /* Card title + subtitle */
        .plan-card h3 {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin: 0 0 6px 0;
        }

        .plan-card .page-subtitle {
            font-size: 12px;
            color: #6b7280;
            margin: 0 0 16px 0;
            line-height: 1.35;
        }
    /* Price line */
    .price {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin: 8px 0 14px;
        font-size: 42px;
        font-weight: 800;
        color: #111827;
    }

        .price span {
            font-size: 15px;
            font-weight: 500;
            color: #6b7280;
        }
    /* Feature list */
    .plan-card ul {
        list-style: none;
        padding: 0;
        margin: 6px 0 0;
    }

        .plan-card ul li {
            position: relative;
            padding-left: 28px;
            padding-top: 6px;
            padding-bottom: 6px;
            font-size: 12px;
            color: #6b7280;
        }
            /* Dark circle + white tick */
            .plan-card ul li::before {
                content: "✓";
                position: absolute;
                left: 0;
                top: 7px;
                width: 16px;
                height: 16px;
                border-radius: 999px;
                background: #111827;
                color: #ffffff; /* ✅ white tick */
                font-size: 11px;
                font-weight: 800;
                display: flex;
                align-items: center;
                justify-content: center;
            }
    /* Button wrapper always at bottom */
    .plan-card .button-wrapper {
        margin-top: auto;
        padding-top: 16px;
    }
    /* Buttons */
    .plan-card button {
        width: 100%;
        height: 38px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 700;
        border: 0;
    }

    .plan-card .upgrade {
        background: #111827;
        color: #ffffff;
        cursor: pointer;
    }

    .plan-card .current {
        background: #ffffff;
        color: #111827;
        border: 1px solid #d1d5db;
    }
    /* Popular card (middle) */
    .plan-card.popular {
        transform: translateY(-22px); /* lift like screenshot */
        border: 2px solid #111827; /* black border */
        box-shadow: 0 12px 26px rgba(0,0,0,0.10);
        position: relative;
        z-index: 2;
    }
        /* Popular badge */
        .plan-card.popular .badge {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: #111827;
            color: #ffffff;
            font-size: 10px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 999px;
        }
    /* Custom plan section - NO card / NO border (like screenshot) */
    .custom-plan-card {
        margin: 70px 0 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        text-align: center;
    }
        /* Title */
        .custom-plan-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 6px;
            color: #111827;
        }
        /* Subtitle */
        .custom-plan-card p {
            font-size: 12px;
            color: #6b7280;
            margin: 0 0 14px;
        }
    /* Button like screenshot (dark small pill) */
    .contact-sales-btn {
        background: #111827;
        color: #ffffff;
        border: 0;
        padding: 8px 22px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .contact-sales-btn:hover {
            background: #1f2937;
        }
    /* Invoices page wrapper spacing */
    .invoices-wrap {
        margin-top: 16px;
    }
    /* Main card */
    .billing-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
    }
    /* Card header */
    .billing-card-header {
        padding: 14px 18px;
        border-bottom: 1px solid #e5e7eb;
    }

    .billing-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
    }

    .billing-doc-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827;
    }
    /* Table layout (grid like screenshot) */
    .billing-table {
        width: 100%;
    }

    .billing-row {
        display: grid;
        grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr 0.6fr; /* UPDATED */
        align-items: center;
        padding: 18px 22px;
        border-bottom: 1px solid #e5e7eb;
        column-gap: 10px;
    }

        .billing-row:last-child {
            border-bottom: 0;
        }
    /* Header row */
    .billing-head {
        padding: 12px 22px;
        background: #ffffff;
        color: #6b7280;
        font-size: 12px;
        font-weight: 600;
    }
    /* Cell styles */
    .billing-plan {
        font-weight: 700;
        color: #111827;
        font-size: 13px;
    }

    .billing-date,
    .billing-amount {
        color: #111827;
        font-size: 12px;
    }
    /* Make Amount line up neatly */
    .billing-row > div:nth-child(3),
    .billing-head > div:nth-child(3) {
        text-align: right;
        padding-right: 16px; /* slightly more spacing */
    }
    /* Center status in its column */
    .billing-row > div:nth-child(4),
    .billing-head > div:nth-child(4) {
        display: flex;
        justify-content: center;
    }
    /* Center actions in its column */
    .billing-row > div:nth-child(5),
    .billing-head > div:nth-child(5) {
        display: flex;
        justify-content: center;
    }
    /* Status pills */
    .status-pill {
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        height: 22px;
        border-radius: 999px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 700;
        color: #000000;
    }

        .status-pill.paid {
            background: #86c98e;
        }

        .status-pill.pending {
            background: #f6b54b;
        }
    /* Actions (eye + download) */
    .billing-actions {
        display: flex;
        gap: 14px;
        align-items: center;
        justify-content: center;
    }

    .icon-btn {
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827;
    }

        .icon-btn:hover {
            background: #f3f4f6;
        }

    background: #f3f4f6;

    .org-select-page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 80px;
        background: #ffffff;
    }

    .invoice-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 24px;
    }

    .invoice-modal {
        width: 860px;
        max-width: 95vw;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.25);
        padding: 28px 30px;
    }

    .invoice-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 26px;
    }

        .invoice-modal-header h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            color: #111827;
        }

    .invoice-modal-close {
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent;
        font-size: 22px;
        cursor: pointer;
        border-radius: 8px;
    }

        .invoice-modal-close:hover {
            background: #f3f4f6;
        }

    .invoice-meta {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .invoice-meta-label {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .invoice-meta-value {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .invoice-status {
        text-align: right;
    }
    /* Summary table card */
    .invoice-summary-card {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        margin: 18px 0 18px;
    }

    .invoice-summary-row {
        display: flex;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
        color: #111827;
    }

        .invoice-summary-row.total {
            border-bottom: 0;
            font-weight: 700;
        }

    .invoice-summary-amount {
        font-weight: 600;
    }
    /* Download button */
    .invoice-download-btn {
        width: 100%;
        height: 54px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
        cursor: pointer;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

        .invoice-download-btn:hover {
            background: #f9fafb;
        }

    .invoice-download-icon {
        font-size: 16px;
    }
    /* make this modal a little wider like screenshot */
    .payment-card-modal {
        max-width: 640px;
    }
    /* expiry + cvc row */
    .payment-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 10px;
    }

    .payment-col {
        display: flex;
        flex-direction: column;
    }
    /* Logo */
    .org-logo {
        display: flex;
        align-items: center;
        gap: 14px; /* little more space for big logo */
        margin-bottom: 20px;
    }

    .logo-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .org-logo-img {
        width: 72px; /* 🔥 BIG logo */
        height: 72px;
        object-fit: contain; /* keeps aspect ratio */
    }

    .logo-text {
        font-size: 24px; /* matches big logo */
        font-weight: 600;
        color: #0f172a; /* navy */
    }
    /* Titles */

    .org-title {
        font-size: 22px; /* was 20 */
        font-weight: 600;
        color: #0f172a; /* 🔥 navy */
    }

    .org-subtitle {
        font-size: 15px; /* was 14 */
        color: #475569; /* muted navy/gray */
    }
    /* List */
    .org-list {
        width: 420px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    /* Item */
    .org-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        cursor: pointer;
        background: #eeeeee;
    }

        .org-item:hover {
            background: #f9fafb;
        }
    /* Left side */
    .org-item-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    /* ICON SPACE */
    .org-icon {
        width: 44px;
        height: 44px;
        background: #eef2ff; /* placeholder */
        border-radius: 12px;
    }
    /* Text */
    .org-info {
        display: flex;
        flex-direction: column;
    }

        .org-info strong {
            font-size: 15px;
            font-weight: 600;
        }

        .org-info span {
            font-size: 13px;
            color: #6b7280;
        }
    /* Arrow */
    .org-arrow {
        font-size: 18px;
        color: #9ca3af;
    }
    /* Initial hidden state */
    .org-item {
        opacity: 0;
        transform: translateY(12px);
        animation: fadeUp 0.45s ease-out forwards;
    }

        .org-item:last-child {
            margin-bottom: 190px;
        }
        /* Stagger delays */
        .org-item:nth-child(1) {
            animation-delay: 0.1s;
        }

        .org-item:nth-child(2) {
            animation-delay: 0.25s;
        }

        .org-item:nth-child(3) {
            animation-delay: 0.4s;
        }
    /* Animation keyframes */
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* ===== Profile Summary Card (match screenshot) ===== */
    .profile-summary-card--wide {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 22px 26px;
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06), 0px 4px 12px rgba(0, 0, 0, 0.04);
        text-align: left; /* IMPORTANT */
    }

    .profile-summary-card--wide {
        margin-bottom: 20px;
    }

    .profile-summary-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .profile-summary-avatar-wrap {
        margin: 0; /* remove old spacing */
        display: flex;
        justify-content: flex-start;
    }

.profile-summary-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-letter {
    font-size: 28px;
    font-weight: 600;
}
.profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-summary-camera {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    font-size: 14px;
}

        .profile-summary-camera img {
            width: 14px;
            height: 14px;
        }

    .profile-summary-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .profile-summary-name {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .profile-summary-email {
        font-size: 12px;
        color: #000000;
        margin: 0;
    }

    .profile-summary-meta {
        display: flex;
        flex-direction: column; /* 👈 this makes it new line */
        align-items: flex-start;
        gap: 4px;
        margin-top: 6px;
    }

    .profile-summary-badge {
        margin-top: 2px;
        background: #ffe4e6;
        color: #e11d48;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
    }

    .profile-summary-org {
        font-size: 12px;
        color: #6b7280;
    }
    /* Header like screenshot */
    .profile-info-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
    }

    .profile-info-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .profile-info-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }
    /* Edit pill button like screenshot */
    .profile-info-edit-btn {
        background: #e5e7eb;
        border: none;
        color: #111827;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 999px;
        cursor: pointer;
    }

        .profile-info-edit-btn:hover {
            filter: brightness(0.97);
        }
    /* 2-column grid */
    .profile-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 40px;
        padding: 18px 20px 20px;
    }

    .profile-info-item label {
        font-size: 12px;
        color: #6b7280;
        display: block;
        margin-bottom: 6px;
    }

    .profile-info-item div {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
    }
    /* Address full width */
    .profile-info-item--full {
        grid-column: 1 / -1;
    }
    /* Input look */
    .profile-info-input {
        width: 100%;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        outline: none;
    }
    /* Card container */
    .profile-info-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        overflow: hidden; /* keeps header border clean */
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06), 0px 4px 12px rgba(0, 0, 0, 0.04);
    }
    /* Header */
    .profile-info-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-bottom: 1px solid #e5e7eb;
    }

    .profile-info-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .profile-info-title h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            color: #111827;
        }

    .profile-info-icon {
        width: 18px;
        height: 18px;
    }
    /* Button */
    .profile-info-edit-btn {
        background: #e5e7eb;
        border: none;
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    /* GRID (this is what makes it 2 columns like screenshot) */
    .profile-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 80px; /* bigger gap like screenshot */
        row-gap: 26px;
        padding: 22px 24px 26px;
    }

    .profile-info-item label {
        font-size: 12px;
        color: #6b7280;
        display: block;
        margin-bottom: 6px;
    }

    .profile-info-item div {
        font-size: 14px;
        font-weight: 550;
        color: #111827;
    }
    /* Address full width */
    .profile-info-item--full {
        grid-column: 1 / -1;
    }
    /* Inputs in edit mode */
    .profile-info-input {
        width: 75%; /* screenshot style inputs are not full width */
        background: #e5e7eb;
        border: none;
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 14px;
        outline: none;
    }
    /* Address input looks longer */
    .profile-info-item--full .profile-info-input {
        width: 100%;
    }
    /* Mobile responsive */
    @media (max-width: 900px) {
        .profile-info-grid {
            grid-template-columns: 1fr;
            column-gap: 0;
        }

        .profile-info-input {
            width: 100%;
        }
    }
    /* ===== Settings Cards ===== */
    /* ===== Base Settings Card ===== */
    .settings-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        margin-top: 20px;
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06), 0px 4px 12px rgba(0, 0, 0, 0.04);
    }

    .settings-card-header {
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
    }

        .settings-card-header h3 {
            font-size: 15px;
            font-weight: 600;
            color: #0f172a;
        }

    .settings-card-row {
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e5e7eb;
    }

        .settings-card-row:last-child {
            border-bottom: none;
        }

    .settings-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .settings-icon {
        width: 32px;
        height: 32px;
        background: #f1f5f9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .settings-text strong {
        font-size: 14px;
        color: #111827;
    }

    .settings-text p {
        font-size: 12px;
        color: #6b7280;
        margin: 2px 0 0;
    }

    .settings-clickable {
        cursor: pointer;
    }

        .settings-clickable:hover {
            background: #f9fafb;
        }

    .settings-arrow {
        font-size: 18px;
        color: #9ca3af;
    }

    .settings-toggle {
        position: relative;
        width: 42px;
        height: 22px;
    }

        .settings-toggle input {
            opacity: 0;
        }

        .settings-toggle span {
            position: absolute;
            inset: 0;
            background: #e5e7eb;
            border-radius: 999px;
            transition: 0.2s;
        }

            .settings-toggle span::before {
                content: "";
                position: absolute;
                height: 18px;
                width: 18px;
                left: 2px;
                top: 2px;
                background: white;
                border-radius: 50%;
                transition: 0.2s;
            }

        .settings-toggle input:checked + span {
            background: #0f172a;
        }

            .settings-toggle input:checked + span::before {
                transform: translateX(20px);
            }

    .profile-info-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        outline: none;
    }

        .profile-info-input:focus {
            border-color: #2563eb;
        }

    .profile-info-value {
        font-size: 14px;
        color: #111827;
        line-height: 1.4;
        word-break: break-word;
        white-space: normal;
    }

    .profile-info-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .profile-info-icon {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }
    /* ===== Bank Account ===== */
    .bank-header-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .bank-card-title,
    .bank-card-subtitle,
    .plaid-connect-btn,
    .manual-divider-outside {
        font-family: inherit;
    }

    .bank-card-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .bank-card-subtitle {
        margin: 0;
        font-size: 12px;
        font-weight: 400;
        opacity: 0.8;
    }

    .bank-card-body {
        margin-top: 12px;
    }
    /* Plaid button */
    .plaid-connect-btn {
        width: 100%;
        height: 42px;
        border-radius: 12px;
        border: 1px solid #DADADA;
        background: #F3F4F6;
        color: #111827;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        padding: 0 16px;
        transition: background 0.2s ease;
    }

        .plaid-connect-btn:hover {
            background: #E5E7EB;
        }
    /* Divider OUTSIDE card */
    .manual-divider-outside {
        margin-bottom: 8px;
        margin: 14px 0 0;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #8a8a8a;
        font-size: 13px;
    }

        .manual-divider-outside::before,
        .manual-divider-outside::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #E6E6E6;
        }

        .manual-divider-outside span {
            white-space: nowrap;
        }
    /* ===== Logout Section ===== */

    .settings-logout-wrapper {
        margin-top: 24px;
    }

    .settings-logout-btn {
        width: 100%;
        background: #ef4444;
        color: #ffffff;
        border: none;
        border-radius: 10px;
        padding: 10px 14px; /* 🔽 reduced height */
        font-size: 14px; /* slightly smaller text */
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

        .settings-logout-btn:hover {
            background: #dc2626;
        }

    .logout-icon {
        font-size: 16px;
    }
    /* ===== Page Wrapper ===== */
    .tags-page {
        padding: 24px;
    }
    /* ===== Header ===== */
    .tags-header {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 18px;
    }

    .tags-title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: #0f172a;
    }
    /* ===== Primary Button (Figma) ===== */
    .primary-btn {
        width: 100%;
        height: 44px;
        background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
        background: #17223A;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
    }

        .primary-btn:hover {
            background: linear-gradient(180deg, #1e293b 0%, #020617 100%);
        }

        .primary-btn:active {
            transform: translateY(1px);
        }

    .primary-btn-icon {
        font-size: 16px;
    }

    .btn-text-small {
        font-size: 13px; /* smaller text */
        font-weight: 500;
    }
    /* ===== Card ===== */
    .tags-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        padding: 8px;
    }
    /* ===== Table ===== */
    .tags-table {
        width: 100%;
        border-collapse: collapse;
    }

        .tags-table thead th {
            text-align: left;
            font-size: 13px;
            font-weight: 500;
            color: #64748b;
            padding: 14px;
            border-bottom: 1px solid #e5e7eb;
        }

        .tags-table tbody td {
            padding: 16px 14px;
            font-size: 14px;
            color: #0f172a;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: middle;
        }

        .tags-table tbody tr:last-child td {
            border-bottom: none;
        }
    /* ===== Tag Pills ===== */
    .tag-pill {
        display: inline-block;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        border-radius: 999px;
    }

        .tag-pill.blue {
            background: #6366f1;
        }

        .tag-pill.green {
            background: #22c55e;
        }
    /* ===== Status ===== */
    .status-active {
        font-size: 13px;
        font-weight: 500;
        color: #16a34a;
    }
    /* ===== Actions ===== */
    .actions-col {
        text-align: right;
        white-space: nowrap;
    }

    .icon-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
        margin-left: 8px;
    }

        .icon-btn.edit {
            color: #f97316;
        }

        .icon-btn.delete {
            color: #f97316;
        }
    /* =========================
   TAG MODAL OVERLAY
========================= */
    .tag-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 5000;
    }
    /* =========================
   TAG MODAL CONTAINER
========================= */
    .tag-modal-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 420px;
        background: #ffffff;
        border-radius: 14px;
        padding: 20px;
        z-index: 5001;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    }
    /* =========================
   HEADER
========================= */
    .tag-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tag-modal-title {
        font-size: 16px;
        font-weight: 600;
        color: #0f172a;
    }

    .tag-modal-close {
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        color: #6b7280;
    }
    /* =========================
   BODY
========================= */
    .tag-modal-body {
        margin-top: 16px;
    }

    .tag-modal-group {
        margin-bottom: 14px;
    }

    .tag-modal-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 6px;
    }

    .tag-modal-input,
    .tag-modal-textarea {
        width: 100%;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        font-size: 14px;
    }
    /* =========================
   COLOR PICKER
========================= */
    .tag-modal-colors {
        display: flex;
        gap: 8px;
        margin-top: 6px;
    }

    .tag-modal-color {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        cursor: pointer;
        border: 2px solid transparent;
    }

        .tag-modal-color.active {
            border-color: #0f172a;
        }
    /* =========================
   FOOTER
========================= */
    .tag-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 20px;
    }

    .tag-modal-cancel {
        padding: 8px 14px;
        border-radius: 10px;
        background: #f3f4f6;
        border: none;
        cursor: pointer;
        font-size: 14px;
    }

    .tag-modal-save {
        padding: 8px 16px;
        border-radius: 10px;
        background: #0f172a;
        color: #ffffff;
        border: none;
        cursor: pointer;
        font-size: 14px;
    }

    .custom-options {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 1000;
        max-height: 220px;
        overflow-y: auto;
    }
    /*.......................
calenderrrrrrrrrrr
........................*/
    /*

/* HEADER */

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .month-nav {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .month-title {
        font-size: 20px;
        font-weight: 600;
    }

    .nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: none;
        background: #f1f3f5;
        font-size: 18px;
        cursor: pointer;
    }

    .add-event-btn {
        background: #0f172a;
        color: white;
        border: none;
        padding: 10px 14px;
        border-radius: 8px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    /* GRID */

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }
    /* DAY HEADERS */

    .day-header {
        font-size: 13px;
        color: #6b7280;
        padding: 8px 6px;
    }
    /* DAY CELLS — NO LINES */

    .day-cell {
        min-height: 110px;
        padding: 6px;
    }
    /* TODAY ONLY HIGHLIGHT */

    .today {
        background: #0f172a;
        border-radius: 10px;
    }

        .today .day-number {
            color: white;
        }
    /* DAY CONTENT */

    .day-number {
        font-size: 14px;
        font-weight: 500;
    }
    /* EVENTS */

    .event-pill {
        margin-top: 4px;
        font-size: 11px;
        padding: 3px 6px;
        border-radius: 4px;
        width: fit-content;
    }
    /* EVENT COLORS */

    .pink {
        background: #fbcfe8;
        color: #9d174d;
    }

    .green {
        background: #dcfce7;
        color: #166534;
    }

    .yellow {
        background: #fef3c7;
        color: #92400e;
    }

    .red {
        background: #fecaca;
        color: #991b1b;
    }

    .purple {
        background: #ede9fe;
        color: #5b21b6;
    }

    .blue {
        background: #dbeafe;
        color: #1e40af;
    }
    /* LAYOUT */
    /* CALENDAR SECTION */
    /* =========================
   PAGE & LAYOUT
========================= */

    .calendar-page {
        position: relative;
        font-family: Inter, system-ui, sans-serif;
    }

    .calendar-body {
        position: relative;
    }
    /* =========================
   HEADER
========================= */

    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
    }

    .month-nav {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .month-title {
        font-size: 20px;
        font-weight: 600;
    }

    .nav-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: none;
        background: #f1f3f5;
        font-size: 18px;
        cursor: pointer;
    }
    /* Add Event Button */

    .add-event-btn {
        background: #0f172a;
        color: white;
        border: none;
        padding: 10px 14px;
        border-radius: 8px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        z-index: 30;
        transition: background 0.2s ease;
    }

        .add-event-btn.active {
            background: #475569;
        }
    /* =========================
   CALENDAR
========================= */

    .calendar-section {
        padding: 24px;
        transition: width 0.3s ease;
    }

        .calendar-section.compressed {
            width: calc(100% - 260px);
        }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }
    /* Day headers */

    .day-header {
        font-size: 13px;
        color: #6b7280;
        padding: 8px 6px;
    }
    /* Day cells */

    .day-cell {
        min-height: 110px;
        padding: 6px;
    }
    /* Today highlight only */

    .today {
        background: #0f172a;
        border-radius: 10px;
    }

        .today .day-number {
            color: white;
        }

    .day-number {
        font-size: 14px;
        font-weight: 500;
    }
    /* =========================
   EVENTS
========================= */

    .event-pill {
        margin-top: 4px;
        font-size: 11px;
        padding: 3px 6px;
        border-radius: 4px;
        width: fit-content;
    }
    /* Event colors */

    .pink {
        background: #fbcfe8;
        color: #9d174d;
    }

    .green {
        background: #dcfce7;
        color: #166534;
    }

    .yellow {
        background: #fef3c7;
        color: #92400e;
    }

    .red {
        background: #fecaca;
        color: #991b1b;
    }

    .purple {
        background: #ede9fe;
        color: #5b21b6;
    }

    .blue {
        background: #dbeafe;
        color: #1e40af;
    }
    /* =========================
   ADD EVENT PANEL (OVERLAY)
========================= */

    .add-event-panel {
        position: absolute;
        top: 0;
        right: 0;
        width: 420px;
        height: 100%;
        background: white;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 20;
    }

        .add-event-panel.open {
            transform: translateX(0);
        }
    /* Panel card */

    .panel-card {
        height: 100%;
        padding: 24px;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
        border-radius: 12px 0 0 12px;
    }
        /* =========================
   PANEL FORM
========================= */

        .panel-card label {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 6px;
            display: block;
        }

        .panel-card input,
        .panel-card textarea {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            margin-bottom: 16px;
            font-family: inherit;
        }

        .panel-card textarea {
            min-height: 80px;
            resize: none;
        }
    /* Time row */

    .time-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
    }

        .time-row span {
            font-size: 12px;
            color: #6b7280;
        }

        .time-row strong {
            display: block;
            margin-top: 4px;
        }
    /* =========================
   MINI CALENDAR
========================= */

    .mini-calendar {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 24px;
    }

    .mini-header {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .mini-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
    }

    .mini-day {
        font-size: 12px;
        padding: 6px;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
    }

        .mini-day.active {
            background: #0f172a;
            color: white;
        }
    /* =========================
   SAVE BUTTON
========================= */

    .save-btn {
        width: 100%;
        margin-top: auto;
        padding: 14px;
        background: #0f172a;
        color: white;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
    }
    /*//organization address*/
    .org-modules-container {
        margin-top: 20px;
    }

    .org-modules-title {
        font-weight: 600;
    }

    .org-modules-description {
        font-size: 13px;
        color: #6b7280;
    }

    .org-module-card {
        position: relative;
        overflow: visible;
    }

    .org-module-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .org-circle-toggle {
        position: relative;
        width: 16px;
        height: 16px;
    }

        .org-circle-toggle input {
            opacity: 0;
            position: absolute;
        }

        .org-circle-toggle span {
            width: 16px;
            height: 16px;
            border: 2px solid #9ca3af;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
        }

        .org-circle-toggle input:checked + span {
            background: #17223A;
            border-color: #17223A;
        }

    .org-menu-wrapper {
        margin-left: auto;
        position: relative;
    }

    .org-menu-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }

    .org-menu-dropdown {
        position: absolute;
        right: 0;
        top: 26px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 6px;
        width: 180px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        z-index: 10;
    }

    .org-menu-item {
        padding: 6px;
        font-size: 13px;
        cursor: pointer;
    }

        .org-menu-item:hover {
            background: #f3f4f6;
        }

    .org-access-container {
        max-width: 100%;
        max-height: 65vh;
        overflow-y: auto;
    }


    .org-access-title {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .org-access-card {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-bottom: 12px;
        overflow: hidden;
    }

    .org-access-header {
        display: flex;
        align-items: center;
        padding: 12px 14px;
        background: #f9fafb;
        cursor: pointer;
        height: 32px;
    }

    .org-access-name {
        margin-left: 10px;
        font-weight: 500;
    }

    .org-access-arrow {
        margin-left: auto;
        font-size: 16px;
    }

 /* Outer circle wrapper */
.org-access-checkbox {
    position: relative;
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}

/* Hide the actual checkbox */
.org-access-checkbox input {
    opacity: 0;
    position: absolute;
    width: 12px;
    height: 12px;
    margin: 0;
    cursor: pointer;
}

/* Outer circle border */
.org-access-checkbox span {
    width: 12px;
    height: 12px;
    border: 2px solid #1f2937;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

/* Inner dot (fill color) */
.org-access-checkbox input:checked + span::after {
    content: "";
    position: absolute;
    top: 2px; /* gap from border */
    left: 2px;
    width: 6px; /* smaller than outer circle */
    height: 6px;
    background: #17223A; /* your requested fill color */
    border-radius: 50%;
}
    .org-access-children {
        padding: 10px 14px 14px 36px;
    }

    .org-access-child {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .org-child-circle {
        width: 14px;
        height: 14px;
        border: 2px solid #6b7280;
        border-radius: 50%;
    }

    .org-access-child input {
        display: none;
    }

    .org-access-child input:checked + .org-child-circle {
        background: #111827;
        border-color: #111827;
    }


/*//onboarding */
.onboarding-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding: 28px 36px 40px;
    font-family: Inter, sans-serif;
}

.onboarding-topbar {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.onboarding-logo {
    height: 34px;
    object-fit: contain;
}

.onboarding-welcome {
    text-align: center;
    margin-bottom: 28px;
}

.onboarding-main-title {
    font-size: 34px;
    font-weight: 800;
    color: #232733;
    margin-bottom: 6px;
}

.onboarding-main-subtitle {
    font-size: 18px;
    color: #42558c;
    margin: 0;
}

.onboarding-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.onboarding-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    min-height: 658px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.onboarding-edit-btn {
    width: 100%;
    background: #162447;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

    .onboarding-edit-btn:hover {
        background: #1d2f5c;
    }
.onboarding-step {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8d8d8d;
    font-size: 16px;
    font-weight: 500;
}

    .onboarding-step.active {
        color: #111827;
        font-weight: 700;
    }

.onboarding-step-icon {
    width: 28px;
    height: 28px;
    border: 1.5px solid #b9b9b9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #6b7280;
    flex-shrink: 0;
    background: #fff;
}

.onboarding-step.active .onboarding-step-icon {
    border-color: #1d2746;
    color: #1d2746;
}

.onboarding-step-line {
    width: 1.5px;
    height: 22px;
    background: #cfcfcf;
    margin: 8px 0 8px 13px;
}

.onboarding-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.onboarding-progress-card {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    border-bottom: 1px solid #ececec;
}

.onboarding-progress-bar-wrap {
    flex: 1;
    height: 5px;
    background: #d6d6d6;
    border-radius: 999px;
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: #162447;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.onboarding-step.completed {
    color: #111827;
    font-weight: 600;
}

    .onboarding-step.completed .onboarding-step-icon {
        border-color: #162447;
        background: #162447;
        color: #fff;
    }
.onboarding-progress-text {
    font-size: 16px;
    color: #111827;
    min-width: 36px;
    text-align: right;
}

.onboarding-form-card {
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    padding: 26px 24px 24px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    min-height: 604px;
    display: flex;
    flex-direction: column;
}

.onboarding-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
}

    .onboarding-form-header h3 {
        font-size: 18px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 2px;
    }

.onboarding-form-subtitle {
    font-size: 13px;
    color: #8a8a8a;
    margin: 0;
}

.donor-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    height: 35px;
    border: 1px solid #d4d4d8;
    border-radius: 6px;
    background: #fff;
    padding: 0 12px;
    font-size: 14px;
    color: #111827;
    box-sizing: border-box;
}

    .form-input::placeholder {
        color: #a3a3a3;
    }

    .form-input:focus {
        outline: none;
        border-color: #1d2746;
        box-shadow: 0 0 0 2px rgba(29, 39, 70, 0.08);
    }

.form-row.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.donor-form-row.donor-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}
.onboarding-back-btn {
    min-width: 152px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #d9d9d9;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.onboarding-action-row {
    display: flex;
    width: 100%;
    margin-top: auto;
    padding-top: 24px;
}

.onboarding-action-row-right {
    justify-content: flex-end;
}

.onboarding-action-row-split,
.onboarding-action-row-triple {
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1100px) {
    .onboarding-layout {
        grid-template-columns: 1fr;
    }

    .onboarding-sidebar {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .form-row.two-col,
    .donor-form-row.donor-row-3 {
        grid-template-columns: 1fr;
    }

    .onboarding-page {
        padding: 20px 14px 32px;
    }

    .onboarding-main-title {
        font-size: 28px;
    }

    .onboarding-main-subtitle {
        font-size: 15px;
    }
}
.onboarding-modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-top: 8px;
}

.payment-card.onboarding-module-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    padding: 0;
    overflow: hidden;
}

.payment-row.onboarding-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.onboarding-module-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.onboarding-module-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onboarding-module-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.7;
}

.onboarding-module-content h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.onboarding-module-content p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #8a8a8a;
    line-height: 1.35;
}

.onboarding-module-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    margin-bottom: 18px;
}

    .onboarding-module-footer p {
        margin: 0;
        font-size: 12px;
        color: #8a8a8a;
    }

.onboarding-form-card {
    min-height: 604px;
}

@media (max-width: 900px) {
    .onboarding-modules-grid {
        grid-template-columns: 1fr;
    }
}
.plan-card {
    cursor: pointer;
    position: relative;
}

    .plan-card:hover {
        transform: translateY(-2px);
    }

.selected-plan {
    border: 2px solid #162447;
}

.plan-description {
    font-size: 13px;
    color: #6b7280;
}

.plan-meta {
    font-size: 12px;
    color: #9ca3af;
}

.plan-price-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 4px;
    margin-top: 10px;
}

.plan-period {
    font-size: 12px;
    color: #6b7280;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plan-badge {
    background: #b6e3b7;
    color: #1f6f34;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}
.onboarding-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}

.onboarding-plan-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    padding: 16px 16px 14px;
    min-height: 146px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .onboarding-plan-card.selected {
        border-color: #162447;
    }

.onboarding-plan-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.onboarding-plan-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .onboarding-plan-title-row h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: #111827;
    }

.onboarding-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #b6e3b7;
    color: #1f6f34;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.onboarding-plan-description {
    margin: 0;
    font-size: 13px;
    color: #7a7a7a;
    line-height: 1.35;
}

.onboarding-plan-meta {
    margin: 0;
    font-size: 13px;
    color: #7a7a7a;
    line-height: 1.35;
}

.onboarding-plan-price-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 2px;
    margin-top: 18px;
}

.onboarding-plan-price {
    font-size: 28px;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

.onboarding-plan-period {
    font-size: 12px;
    color: #7a7a7a;
    line-height: 1;
}

@media (max-width: 1100px) {
    .onboarding-plan-grid {
        grid-template-columns: 1fr;
    }
}
.onboarding-complete-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onboarding-complete-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 4px;
}

.onboarding-complete-icon {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    background: #b9e3b9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .onboarding-complete-icon span {
        color: #0a9c1f;
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
    }

.onboarding-complete-text h3 {
    margin: 6px 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}

.onboarding-complete-text p {
    margin: 0;
    max-width: 860px;
    font-size: 14px;
    color: #7a7a7a;
    line-height: 1.45;
}

.onboarding-summary-card {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.onboarding-summary-title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    text-decoration: underline;
}

.onboarding-summary-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px 24px;
    align-items: start;
}

.onboarding-summary-labels p,
.onboarding-summary-values p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.35;
}

.onboarding-summary-labels p {
    color: #6f6f6f;
    font-weight: 700;
}

.onboarding-summary-values {
    text-align: right;
}

    .onboarding-summary-values p {
        color: #111827;
        font-weight: 700;
    }

.onboarding-plan-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #162447;
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.onboarding-module-tags {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.onboarding-module-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #efefef;
    color: #222;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 900px) {
    .onboarding-complete-header {
        flex-direction: column;
    }

    .onboarding-summary-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-summary-values {
        text-align: left;
    }

    .onboarding-module-tags {
        justify-content: flex-start;
    }
}
.onboarding-submit-btn {
    width: 164px;
    height: 42px;
    border: none;
    border-radius: 6px;
    background: #162447;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: Inter, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 36, 71, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .onboarding-submit-btn:hover {
        background: #1b2d57;
    }

    .onboarding-submit-btn:active {
        transform: translateY(1px);
    }

    .onboarding-submit-btn:focus {
        outline: none;
    }
/* vieworganization*/
/*.................*/
.orga-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .orga-card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .orga-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .orga-card-title {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .orga-icon {
        width: 40px;
        height: 40px;
        background-color: #e6e6e6;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #333;
    }

    .orga-info {
        display: flex;
        flex-direction: column;
    }

    .orga-name {
        font-weight: 600;
        font-size: 16px;
        color: #111;
    }

    .orga-type {
        font-size: 14px;
        color: #666;
    }

    .orga-stats {
        display: flex;
        gap: 15px;
        font-size: 14px;
        color: #555;
    }

    .orga-card-tags {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .orga-role {
        background-color: #f3f3f3;
        color: #333;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 20px;
    }
    /* Page container */
    .notif-page {
        padding: 18px 22px;
    }
    /* Header row (left title + right button) */
    .notif-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
    }

    .notif-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    /* Mark All Read button (top right) */
    .notif-markall-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 14px;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
    }

    .notif-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        font-size: 13px;
    }
    /* List */
    .notif-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    /* Card */
    .notif-card {
        display: flex;
        gap: 16px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        border-radius: 10px;
        padding: 16px 16px;
    }
    /* second card grey */
    .notif-card--muted {
        background: #f3f4f6;
    }
    /* Left icon */
    .notif-left {
        display: flex;
        align-items: flex-start;
        padding-top: 2px;
    }

    .notif-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 14px;
    }

    .notif-icon--money {
        background: #ffedd5;
        color: #f97316;
    }

    .notif-icon--calendar {
        background: #e5e7eb;
        color: #111827;
    }
    /* Right side */
    .notif-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .notif-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .notif-title {
        font-size: 15px;
        font-weight: 700;
        color: #111827;
    }

    .notif-desc {
        margin-top: 3px;
        font-size: 12px;
        color: #6b7280;
    }

    .notif-close {
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 20px;
        line-height: 18px;
        color: #6b7280;
        padding: 2px 6px;
    }

    .notif-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        color: #6b7280;
    }

    .notif-badge {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        padding: 2px 10px;
        font-size: 11px;
        color: #111827;
        font-weight: 600;
    }
    /* Buttons row */
    .notif-actions {
        display: flex;
        gap: 12px;
        margin-top: 2px;
    }

    .notif-btn {
        height: 34px;
        padding: 0 18px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .notif-btn--primary {
        background: #0f172a;
        color: #ffffff;
    }

    .notif-btn--secondary {
        background: #ffffff;
        border-color: #d1d5db;
        color: #111827;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .notif-empty {
        height: calc(100vh - 220px); /* keeps it centered like screenshot */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    .notif-empty-icon {
        font-size: 70px;
        color: #9ca3af;
        line-height: 1;
        margin-bottom: 6px;
    }

    .notif-empty-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }

    .notif-empty-subtitle {
        margin: 0;
        font-size: 13px;
        color: #6b7280;
    }

    .signup-background {
        width: 100%;
        min-height: 100vh; /* changed */
        background: #f2f3f5;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0; /* added */
    }

    .signup-card {
        width: 1100px;
        max-width: 95%;
        min-height: 500px; /* changed */
        background: #ffffff;
        border-radius: 25px;
        display: flex;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    }
    /* Left side */
    .signup-left {
        position: relative;
        width: 50%;
        padding: 60px 60px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
    }

    .left-bg-shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .left-content {
        position: relative;
        z-index: 2;
    }

        .left-content h1 {
            font-size: 65px;
            font-weight: 600;
            color: white;
            line-height: 1.2;
        }


        .left-contentswitch h1 {
            font-size: 53px;
            font-weight: 550;
            color: black;
            line-height: 1.2;
        }
    .left-bottom-icon {
        position: absolute;
        bottom: 60px;
        right: 80px;
        width: 120px;
        z-index: 2;
    }
    /* Right side */
    .signup-right {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
    }

    @media (max-width: 992px) {

        .signup-card {
            flex-direction: column;
            min-height: auto;
        }

        .signup-left,
        .signup-right {
            width: 100%;
        }

        .signup-left {
            height: 300px;
            padding: 40px;
        }

        .left-content h1 {
            font-size: 32px;
        }

        .left-bottom-icon {
            width: 80px;
            bottom: 30px;
            right: 30px;
        }

        .signup-right {
            padding: 40px 25px;
        }
    }

    @media (max-width: 576px) {

        .signup-background {
            padding: 20px;
        }

        .signup-card {
            border-radius: 18px;
        }

        .signup-left {
            height: 220px;
            padding: 25px;
        }

        .left-content h1 {
            font-size: 24px;
            line-height: 1.3;
        }

        .signup-right {
            padding: 30px 20px;
        }

        .auth-input {
            height: 45px;
            font-size: 14px;
        }

        .social-login-btn {
            font-size: 14px;
            padding: 12px;
        }
    }
    /* Center container */
    .email-anim-wrap {
        display: flex;
        justify-content: center;
        margin: 10px 0 18px;
        position: relative;
        margin-top: 80px;
    }
    /* Envelope sprite animation */
    .email-anim {
        width: 120px;
        height: 120px;
        background-image: url("/Images/email-sprite.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        /* 6 frames total -> 6 * 120 = 720 */
        background-size: 720px 120px;
        animation: emailSprite 900ms steps(6) forwards;
    }
    /* Slide through frames */
    @keyframes emailSprite {
        from {
            background-position: 0 0;
        }

        to {
            background-position: -720px 0;
        }
    }
    /* Tick appears AFTER envelope finishes */
    .email-tick {
        position: absolute;
        bottom: -6px;
        right: calc(50% - 70px);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #22c55e;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        opacity: 0;
        transform: scale(0.7);
        animation: tickPop 240ms ease-out forwards;
        animation-delay: 900ms; /* same as envelope duration */
    }

    @keyframes tickPop {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .retry-text {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        color: #2b3a67;
        margin-bottom: 160px;
    }

    .auth-input-sm {
        width: 250px; /* smaller width to fit the form */
        padding: 0.5rem 0.75rem; /* keep padding consistent */
        font-size: 0.9rem; /* slightly smaller text */
        box-sizing: border-box; /* ensure padding doesn't exceed width */
    }

    .auth-wrapper {
        width: 100%;
        max-width: 420px;
    }

    .auth-title {
        margin-top: 25px;
        font-size: 34px;
        font-weight: 800;
        color: #2d3748;
        margin-bottom: 6px;
    }

    .auth-title2 {
        margin-top: 190px;
        font-size: 32px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 6px;
    }

    .auth-title3 {
        margin-top: -10px;
        font-size: 28px;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 4px;
    }

    .auth-subtitle {
        font-size: 14px;
        color: #4a5568;
        margin-bottom: 30px;
    }

    .auth-field {
        margin-bottom: 14px;
    }

        .auth-field label {
            display: block;
            font-size: 12px;
            margin-bottom: 8px;
            color: #2d3748;
            font-weight: 500;
        }

    .auth-input-wrapper {
        position: relative;
    }

    .auth-input {
        width: 100%;
        height: 50px;
        border-radius: 40px;
        border: 1px solid #6b7280;
        padding: 0 35px;
        font-size: 16px;
        background-color: #ffffff;
        outline: none;
        transition: 0.2s ease;
    }

        .auth-input:focus {
            border-color: #1e2a5a;
            box-shadow: 0 0 0 2px rgba(30,42,90,0.1);
        }
    /* Icons */
    .auth-icon {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        opacity: 0.6;
    }

    .auth-eye {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        cursor: pointer;
    }

        .auth-eye img {
            width: 18px;
        }
    /* Options row */
    .auth-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0 25px;
        font-size: 14px;
    }

    .auth-forgot {
        color: #1e2a5a;
        text-decoration: none;
    }
    /* Primary Button */
    .auth-primary-btn {
        margin-top: 8px;
        width: 100%;
        height: 50px;
        border-radius: 40px;
        border: none;
        background: #17223a;
        color: white;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.2s;
    }

        .auth-primary-btn:hover {
            background: #162046;
        }
    /* Divider */
    .auth-divider {
        margin: 15px 0;
        display: flex;
        align-items: center;
        text-align: center;
        color: #718096;
        font-size: 14px;
    }

        .auth-divider::before,
        .auth-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e2e8f0;
        }

        .auth-divider span {
            padding: 0 12px;
        }
    /* Footer */
    .auth-footer {
        margin-top: 26px;
        font-size: 14px;
        text-align: center;
        color: #55688C;
        margin-bottom: 0px;
    }

        .auth-footer a {
            color: #020617;
            text-decoration: none;
            font-weight: 600;
        }

    .success-icon {
        margin-top: 180px;
        margin-bottom: -180px;
    }

    .login-form {
        width: 100%;
        max-width: 400px;
        text-align: center;
    }

    .page-heading-underline {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 10px;
        text-align: center;
    }

    .login-text {
        font-size: 14px;
        color: #7a7a7a;
        margin-bottom: 40px;
        text-align: center;
    }
    /* Style for page heading*/
    .page-heading-underline {
        font-size: 28px;
        font-weight: 700;
        color: #17223a;
        margin-bottom: 10px;
        position: relative;
    }

        .page-heading-underline::after {
            content: "";
            display: block;
            width: 50px;
            height: 3px;
            background: #17223a;
            margin: 8px auto 0;
            border-radius: 2px;
        }
    /* Left side: remove the text layout and center the lock icon like the screenshot */
    .forgot-left {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    /* Centered icon wrapper */
    .forgot-lock-wrapper {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2; /* above the background shape */
    }
    /* Lock icon sizing similar to screenshot */
    .forgot-lock-icon {
        width: 110px;
        height: 110px;
        object-fit: contain;
        opacity: 0.95;
    }

    .forgot-wrapper {
        gap: 14px;
    }

        .forgot-wrapper .auth-primary-btn {
            margin-top: 6px;
        }

        .forgot-wrapper .auth-input-wrapper {
            border-radius: 999px;
        }

        .forgot-wrapper .auth-primary-btn {
            margin-bottom: 140px;
        }
    /* OTP Circles Layout */
    .otp-circles {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin: 25px 0;
    }
    /* Each Circle */
    .otp-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1.5px solid #d3d9e5;
        text-align: center;
        font-size: 18px;
        outline: none;
        transition: all 0.2s ease;
    }
        /* Active / Focus State */
        .otp-circle:focus {
            border-color: #1d2b53;
            box-shadow: 0 0 0 2px rgba(29, 43, 83, 0.15);
        }
    /* Resend text */
    .otp-resend-text {
        margin-top: 25px;
        font-size: 14px;
        color: #55688C;
        text-align: center;
        margin-bottom: 160px;
    }

    .otp-timer {
        font-weight: 600;
        color: #1d2b53;
    }

    .logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .logo {
        max-width: 150px;
        height: auto;
        margin-bottom: 15px;
    }

    @media (max-width: 768px) {
        .logo {
            max-width: 100px;
        }
    }

    .login-header {
        font-size: 28px;
        color: #17223a;
        margin-bottom: 5px;
        align-items: center;
    }

    .login-text {
        font-size: 16px;
        color: #777;
        margin-bottom: 25px;
        align-items: center;
    }

    .form-group {
        background: var(--background-modal);
        color: var(--text-secondary);
        margin-bottom: 20px;
        text-align: left;
    }

    .email-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z' clip-rule='evenodd' /%3E%3C/svg%3E");
        display: inline-block;
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.75rem;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #999;
        background-size: cover;
    }

    .password-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z' clip-rule='evenodd' /%3E%3C/svg%3E");
        display: inline-block;
        position: absolute;
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.75rem;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #999;
        background-size: cover;
    }

    .password-icon2 {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .password-icon2 img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }


        .password-icon2:hover {
            color: #000;
        }

    .forgot-password {
        color: #007bff;
        text-decoration: none;
    }

        .forgot-password:hover {
            font-weight: bold;
        }

    .login-logo-btn {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px auto;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .login-logo-btn:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

    .new-user {
        margin-top: 25px;
        font-size: 15px;
        color: #555;
    }

        .new-user a {
            color: #007bff;
            text-decoration: none;
        }

            .new-user a:hover {
                font-weight: bold;
            }
    /* Responsive Table: Enables Scroll for Small Screens */
    @media (max-width: 768px) {
        .tableStyle {
            overflow-x: auto;
            display: block;
        }

        th, td {
            font-size: 14px;
            padding: 8px;
        }
    }

    .login-options-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .login-remember {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
    }

        .login-remember input[type="checkbox"] {
            width: 12px;
            height: 12px;
            margin: 0;
            accent-color: black;
        }

    .login-forgot {
        margin-top: -10px;
        font-size: 14px;
        color: #1f2d4d;
        text-decoration: none;
    }

    .login-footer-text {
        margin-top: 25px;
        text-align: center;
        font-size: 14px;
    }

        .login-footer-text a {
            color: #1e2a5a;
            text-decoration: none;
            font-weight: 500;
        }

    .login-terms {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: #9ca3af;
    }

        .login-terms a {
            font-weight: 500;
            color: #6b7280;
        }
    /* Divider */
    .login-divider {
        margin: 22px 0 18px;
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 14px;
        color: #9ca3af;
    }

        .login-divider::before,
        .login-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e5e7eb;
        }

        .login-divider span {
            padding: 0 12px;
        }

    .primary-login-btn {
        width: 100%;
        height: 60px;
        border-radius: 50px;
        background: #1e2a5a;
        color: white;
        font-size: 15px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: 0.3s;
    }

        .primary-login-btn:hover {
            background: #162046;
        }
    /* Social Buttons */
    .social-login-btn {
        width: 100%;
        height: 50px;
        border-radius: 40px;
        margin-top: 15px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: 3px solid #0f172a;
        background: white;
        color: #17223a;
        border-width: thin;
    }

        .social-login-btn:hover {
            background: #f8f9fc;
        }


        .social-login-btn img {
            width: 20px;
            margin-right: 10px;
        }

        .social-login-btn img {
            width: 18px;
            height: 18px;
        }

    .otp-wrapper {
        position: fixed; /* key change */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #f5f6f8;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .otp-card {
        width: 420px;
        background: white;
        padding: 45px 40px;
        border-radius: 18px;
        text-align: center;
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }

    .otp-logo {
        width: 80px;
        margin-bottom: 25px;
    }

    .otp-card h2 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .otp-subtext {
        color: #888;
        font-size: 14px;
        margin-bottom: 25px;
    }

    .otp-input-group {
        text-align: left;
    }

        .otp-input-group label {
            font-size: 13px;
            color: #444;
        }

    .otp-input {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid #ddd;
        margin-top: 6px;
        font-size: 14px;
    }

    .otp-btn {
        margin-top: 25px;
        width: 100%;
        padding: 12px;
        border-radius: 25px;
        background: #17223a;
        color: white;
        border: none;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: 0.2s;
    }

        .otp-btn:hover {
            background: #0f172a;
        }

    .otp-back-btn {
        margin-top: 18px;
        background: none;
        border: none;
        color: #17223a;
        font-size: 14px;
        cursor: pointer;
    }

    .authca-page {
        min-height: 100vh;
        background: #f3f4f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 70px;
        font-family: "Segoe UI", sans-serif;
    }

    .authca-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .authca-logo {
        width: 38px;
    }

    .authca-brand {
        font-weight: 600;
        font-size: 18px;
        color: #1f2937;
    }

    .authca-underline {
        width: 60px;
        height: 3px;
        background: #1f2937;
        margin: 18px 0;
        border-radius: 5px;
    }

    .authca-title {
        font-size: 24px;
        margin-bottom: 5px;
        font-weight: 600;
    }

    .authca-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin-bottom: 30px;
    }

    .authca-upload {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        border: 2px dashed #d1d5db;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        color: #9ca3af;
        font-size: 22px;
    }

    .authca-form {
        width: 360px;
        display: flex;
        flex-direction: column;
        gap: 12px; /* reduced spacing */
    }

    .authca-field {
        display: flex;
        flex-direction: column;
        gap: 4px; /* tighter label-input spacing */
    }

        .authca-field label {
            font-size: 13px;
            font-weight: 500;
            color: #374151;
        }

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

    .authca-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background: transparent; /* you can add icon later */
    }

    .authca-input {
        width: 100%;
        padding: 10px 14px 10px 38px; /* left padding for icon space */
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        font-size: 14px;
        color: #111827; /* darker input text */
        transition: 0.3s ease;
    }

        .authca-input::placeholder {
            color: #9ca3af; /* subtle placeholder */
        }

        .authca-input:focus {
            outline: none;
            border-color: #1f2937;
        }

    .authca-button {
        margin-top: 15px;
        padding: 13px;
        border-radius: 28px;
        background: linear-gradient(to right, #0f172a, #334155);
        color: white;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s ease;
    }

        .authca-button:hover {
            opacity: 0.9;
        }

    .authca-footer {
        margin-top: 25px;
        font-size: 14px;
        color: #6b7280;
    }

/*    //oraganization input center*/
.switch-org-wrapper {
    min-height: 100vh; /* full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center; /* horizontal center */
    text-align: center;
}

.org-list {
    width: 420px;
}

    /* =======================================================
   REUSABLE COMPONENTS
======================================================= */
    /* 1. Toggle Switch */
    .toggle {
        position: relative;
        width: 40px;
        height: 22px;
        display: inline-block;
    }

        .toggle input {
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

    .toggle-slider {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background-color: #d1d5db;
        border-radius: 999px;
        pointer-events: all;
        transition: background-color 0.2s ease;
    }
        /* Toggle circle */
        .toggle-slider::before {
            content: "";
            position: absolute;
            height: 18px;
            width: 18px;
            left: 2px;
            top: 2px;
            background-color: #ffffff;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }
    /* Toggle active state */
    .toggle input:checked + .toggle-slider {
        background-color: #17223A;
    }

        .toggle input:checked + .toggle-slider::before {
            transform: translateX(18px);
        }
    /* 2. Delete Button */
    .delete-btn {
        background: transparent;
        border: none;
        color: #ef4444;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }

        .delete-btn:hover {
            background-color: #17223A;
            color: #dc2626;
        }
    /* =========================================
   COMPONENTS (card, button, input, modal)
========================================= */
    /* Card layout */
    .donor-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .donor-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

        .donor-card-header h3 {
            font-size: 20px;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

    .donor-icon {
        background: #f3f4f6;
        padding: 6px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Cards */

    .card-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .card-subtitle {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 10px;
    }

    .card + .card {
        margin-top: 14px;
    }
    /* ==========================================
   CARD STYLING
========================================== */

    .card {
        background: #fff;
        border-radius: 10px;
        padding: 18px;
        margin-bottom: 20px;
        border: 1px solid #e5e7eb;
    }
    /* Remove grey background and bottom border from main section headers */
    .card-header {
        background-color: transparent !important;
        border-bottom: none !important;
        padding-left: 0;
        padding-right: 0;
    }

        .card-header small {
            display: block;
            color: #6b7280;
        }
    /* =======================================================
   RESPONSIVE - MAIN DASHBOARD LAYOUT
======================================================= */

    @media (max-width: 768px) {
        /* Hide sidebar globally on dashboard pages */
        .dashboard-page .sidebar {
            display: none !important;
        }

        .dashboard-page .main-content {
            margin-left: 0 !important;
            width: 100%;
        }
        /* Dashboard Home Container */
        .dashboard-home {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            padding: 12px;
            margin-left: 0 !important;
        }
        /* Key fix for layout */
        body:has(.dashboard-home) .sidebar {
            display: none !important;
        }

        body:has(.dashboard-home) .main-content {
            margin-left: 0 !important;
            width: 100%;
        }
        /* Typography adjustments */
        .dashboard-home .dash.dashboard-title {
            font-size: 18px;
        }

        .dashboard-home .dash.dashboard-subtitle {
            font-size: 13px;
        }
        /* Notification bar */
        .dashboard-home .dash.notification-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        /* Stats grid */
        .dashboard-home .dash.stats-grid {
            grid-template-columns: 1fr;
        }

        .dashboard-home .dash.stat-card {
            padding: 14px;
        }
        /* Quick actions */
        .dashboard-home .dash.actions-row {
            flex-direction: column;
        }

        .dashboard-home .dash.quick-btn {
            width: 100%;
        }
        /* Recent donations */
        .dashboard-home .dash.donation-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .dashboard-home .dash.donation-right {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
    /* =======================================================
   DASHBOARD COMPONENTS
======================================================= */
    /* Notification Bar */
    .dash.notification-bar {
        background: #E3E3E3;
        border: 1px solid #BFBFBF;
        border-radius: 16px;
        padding: 18px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        margin-bottom: 28px;
    }
        /* Notification & Recent links */
        .dash.notification-bar a,
        .dash.recent-header a {
            font-size: 12px;
            color: #6b7280;
            text-decoration: none;
            padding: 6px 10px;
            border-radius: 4px;
            transition: background 0.2s ease, color 0.2s ease;
        }

            .dash.notification-bar a:hover,
            .dash.recent-header a:hover {
                background: #000000;
                color: #ffffff;
            }
    /* Notification layout */
    .dash.notification-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* Notification icon */
    .dash.notification-icon {
        width: 32px;
        height: 32px;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Dashboard Titles */
    .dash.dashboard-title {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    .dash.dashboard-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 12px 0;
    }
    /* =======================================================
  Notification SECTION
======================================================= */

    .notification-card {
        margin-top: 16px;
    }

    .notification-topbar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #e9e9e9;
    }

    .notification-topbar-left p {
        margin: 4px 0 0;
        font-size: 12px;
        color: #777;
    }

    .notification-close {
        border: none;
        background: transparent;
        font-size: 22px;
        cursor: pointer;
        line-height: 1;
    }

    .notification-head-row {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid #eee;
    }

    .notification-head-left {
        flex: 1;
    }

    .notification-head-right {
        display: grid;
        grid-template-columns: repeat(3, 90px);
        gap: 14px;
        justify-content: end;
    }

    .notification-head-col {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #555;
        justify-content: center;
    }

    .notification-row {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .notification-left {
        flex: 1;
        min-width: 200px;
    }

    .notification-title {
        font-weight: 600;
        font-size: 13px;
    }

    .notification-subtitle {
        margin-top: 4px;
        font-size: 12px;
        color: #888;
    }

    .notification-right {
        display: grid;
        grid-template-columns: repeat(3, 90px);
        gap: 14px;
        justify-content: end;
        align-items: center;
    }

    .notification-toggle-col {
        display: flex;
        justify-content: center;
    }

    .notification-card-header {
        padding: 14px 16px;
        border-bottom: 1px solid #eee;
    }

    .notification-card-title {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .notification-card-header-icon {
        width: 18px;
        height: 18px;
        margin-top: 2px;
    }

    .notification-card-heading {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
    }

    .notification-card-subheading {
        margin: 3px 0 0;
        font-size: 12px;
        color: #8a8a8a;
    }

    .notification-head-img {
        width: 14px;
        height: 14px;
    }

    .notification-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .notification-row-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    .notification-toggle-label {
        margin-top: 4px;
        font-size: 11px;
        color: #8a8a8a;
        text-align: center;
    }

    .notification-right--single {
        display: flex;
        justify-content: end;
    }

    .notification-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 14px;
    }

    .notification-cancel-btn {
        border: 1px solid #d7d7d7;
        background: #fff;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
    }

    .notification-save-btn {
        border: none;
        background: #0f172a;
        color: #fff;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
    }

    .change-password-page {
        max-width: 650px;
        margin: 24px auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .change-password-card,
    .security-tips-card {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        padding: 22px;
    }

    .change-password-title {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .change-password-icon {
        width: 18px;
        height: 18px;
        margin-top: 4px;
    }

    .change-password-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

    .change-password-header p {
        margin: 4px 0 0;
        font-size: 12px;
        color: #8a8a8a;
    }

    .change-password-form {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cp-field label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 8px;
    }

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

    .cp-input {
        width: 100%;
        border: 1px solid #d6d6d6;
        border-radius: 10px;
        padding: 12px 44px 12px 14px;
        outline: none;
    }

    .cp-eye-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
    }

        .cp-eye-btn img {
            width: 18px;
            height: 18px;
        }

    .cp-rules {
        background: #f6f6f6;
        border-radius: 12px;
        padding: 14px;
    }

    .cp-rules-title {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .cp-rule {
        font-size: 12px;
        color: #9b9b9b;
        margin: 6px 0;
        padding-left: 20px;
        position: relative;
    }

        .cp-rule::before {
            content: "•";
            position: absolute;
            left: 6px;
            top: 0;
        }

        .cp-rule.ok {
            color: #2e9b4e;
        }

            .cp-rule.ok::before {
                content: "✓";
                left: 4px;
            }

    .cp-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 8px;
    }

    .cp-cancel {
        background: #fff;
        border: 1px solid #d6d6d6;
        border-radius: 10px;
        padding: 12px;
        cursor: pointer;
    }

    .cp-save {
        background: #0f172a;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 12px;
        cursor: pointer;
    }

    .security-tips-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .security-tips-icon {
        width: 18px;
        height: 18px;
    }

    .security-tips-header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
    }

    .security-tips-list {
        margin: 14px 0 0;
        padding-left: 18px;
        color: #333;
        font-size: 13px;
        line-height: 1.7;
    }
    /* =======================================================
   STATS SECTION
======================================================= */

    .dash.stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    /* Stat card */
    .dash.stat-card {
        position: relative;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 14px 16px 16px;
        transition: box-shadow 0.3s ease;
    }

        .dash.stat-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
    /* Stat icon */
    .dash.stat-icon {
        position: absolute;
        top: 10px;
        left: 12px;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .dash.stat-icon.green {
            background: #ecfdf3;
            color: #16a34a;
        }

        .dash.stat-icon.gray {
            background: #f3f4f6;
            color: #111827;
        }

        .dash.stat-icon.orange {
            background: #fff7ed;
            color: #f97316;
        }
    /* Percentage change */
    .dash.stat-change {
        position: absolute;
        top: 14px;
        right: 14px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
    }

        .dash.stat-change.positive {
            color: #16a34a;
        }

        .dash.stat-change.negative {
            color: #dc2626;
        }
    /* Stat text */
    .dash.stat-card h3 {
        margin-top: 34px;
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        text-align: left;
    }

    .dash.stat-card p {
        margin: 0;
        font-size: 11px;
        color: #6b7280;
        text-align: left;
    }
    /* =======================================================
   QUICK ACTIONS
======================================================= */

    .dash.quick-actions {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
    }

        .dash.quick-actions h4 {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 8px;
        }

    .dash.actions-row {
        display: flex;
        gap: 12px;
        margin-top: 10px;
    }
    /* Quick action button */
    .dash.quick-btn {
        flex: 1;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 14px 10px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 9px; /* final size kept */
        color: #111827;
        text-align: center;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

        .dash.quick-btn:hover {
            background: #17223A;
            color: #ffffff;
        }

            .dash.quick-btn:hover .dash.quick-icon img {
                filter: brightness(0) invert(1);
                transition: filter 0.2s ease;
            }
    /* =======================================================
   RECENT DONATIONS
======================================================= */

    .dash.recent-donations {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
    }

    .dash.recent-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

        .dash.recent-header h5 {
            font-size: 14px;
            font-weight: 500;
            color: #111827;
            margin: 0;
        }
    /* Donation row */
    .dash.donation-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f9fafb;
        border-radius: 6px;
        padding: 12px 14px;
        margin-bottom: 10px;
        transition: background 0.2s ease;
    }

        .dash.donation-row:hover {
            background: #f3f4f6;
        }
    /* Donation left */
    .dash.donation-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .dash.avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #111827;
        color: #ffffff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dash.donation-info strong {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
    }

    .dash.donation-info small {
        font-size: 11px;
        color: #6b7280;
    }
    /* Donation right */
    .dash.donation-right {
        text-align: right;
    }

    .dash.amount {
        font-size: 13px;
        font-weight: 600;
        color: #111827;
    }
    /* =======================================================
   STATUS PILLS
======================================================= */

    .dash.status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 12px;
        text-transform: capitalize;
        cursor: default;
        line-height: 1;
    }

        .dash.status.paid {
            background-color: #16a34a;
            color: #ffffff;
        }

            .dash.status.paid:hover {
                background-color: #374151;
                color: #ffffff;
            }

        .dash.status.unpaid {
            background-color: #f97316;
            color: #111827;
        }

            .dash.status.unpaid:hover {
                background-color: transparent;
                color: #111827;
                border: none;
            }
    /* =======================================================

.revenue-meta {
    background-color: #e0e0e0; /* light grey background */
    color: #000000; /* black text */
    padding: 2px 6px; /* small padding */
    border-radius: 12px; /* slightly rounded corners */
    display: inline-block; /* shrink to content width */
    font-size: 0.75rem; /* optional smaller font */
}

/*view donor */
/*..............*/

/* Ensure borders & padding don't break height */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Common button styles */
.donor-add-btn,
.reset-btn {
    display: inline-flex; /* allows icon + text alignment */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering for text/icon */
    gap: 8px; /* space between icon and text */

    height: 36px; /* fixed height for both */
    padding: 0 16px; /* horizontal padding only */
    font-size: 14px;
    line-height: 1; /* prevents extra height from text */
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
}

/* Donor Add Button */
.donor-add-btn {
    background: #0f172a;
    color: #ffffff;
    border: none;
}

/* Reset Buttons */
.reset-btn {
    background: #f3f4f6;
    border: 1px solid #ccc;
}

/* Icon sizing inside Add button */
.donor-add-btn img {
    width: 14px; /* same as other button icons */
    height: 14px; /* ensures uniform height */
    object-fit: contain; /* keeps aspect ratio */
}

.merge-modal {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: white !important;
    z-index: 999999 !important;
    padding: 20px;
}


/* Overlay */
.merge-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    align-items: center; /* Vertical centering */
    justify-content: center;
}

/* Modal box */
.merge-modal {
    position: fixed; /* Fixed relative to viewport */
    top: 50%; /* Vertical center point */
    left: 50%; /* Horizontal center point */
    transform: translate(-50%, -50%); /* Shift back by half modal size */
    width: 500px;
    max-width: 90%;
    max-height: 80vh; /* Allow scrolling if content too tall */
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 250px;
}

/* Header */
.merge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f9f9f9;
}

.merge-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
}

.merge-header-icon {
    width: 20px;
    height: 20px;
}

/* Close button */
.merge-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* Body */
.merge-body {
    margin-top: 2px;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 16px;
    display: flex; /* use flex instead of grid */
    flex-direction: column; /* stack items vertically */
    gap: 2px; /* space between donor rows */
    max-height: 300px; /* optional, keeps scroll if too many */
    overflow-y: auto; /* scroll if content exceeds height */
}

.merge-subtitle {
    font-size: 14px;
    margin-bottom: 2px;
    color: #555;
}

.merge-donor-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
}

    .merge-donor-row:last-child {
        border-bottom: none;
    }

.merge-donor-info {
    display: flex;
    flex-direction: column;
}

.merge-donor-name {
    font-weight: 500;
}

.merge-donor-email {
    font-size: 12px;
    color: #777;
}

/* Footer */
.merge-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background-color: white;
}

.merge-btn-light {
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    height: 32px;
    width: 80px;
    border: none;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;
}

.merge-btn-dark {
    padding: 6px 12px;
    border: none;
    background: #17223A; /* blue */
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    height: 32px;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;
}

    .merge-btn-dark:disabled {
        background: rgba(0, 0, 0, 0.2); /* lighter blue */
        cursor: not-allowed;
    }



/* Hide default checkbox appearance */
.radio-group-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 14px; /* small circle */
    height: 14px;
    border: 2px solid #6b7280; /* gray border */
    border-radius: 50%; /* circular */
    position: relative;
    cursor: pointer;
}

    /* Inner dot when checked */
    .radio-group-checkbox:checked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px; /* inner dot */
        height: 8px;
        background-color: #2563eb; /* blue */
        border-radius: 50%;
    }



/* Empty state card for no duplicates */
.merge-no-duplicates {
    display: flex; /* flex to center text */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    height: 150px; /* custom height */
    background-color: #ffff; /* light grey background */
    color: #6b7280; /* grey text */
    font-size: 14px; /* slightly bigger font */
    font-weight: 500; /* medium weight */
    border-radius: 10px; /* rounded corners */
    text-align: center; /* center text if multi-line */
}

.button-container {
    display: flex; /* arrange buttons in a row */
    align-items: center; /* vertical center */
    gap: 8px; /* spacing between buttons */
}

.reset-btn img {
    transition: 0.2s;
}

/* Swap to white version on hover */
.reset-btn:hover img {
    filter: brightness(0) invert(1);
}



/* Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Modal Box */
.modal-container {
    background: #f7f7f7;
    width: 900px;
    max-width: 95%;
    border-radius: 18px;
    padding: 30px 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

    .modal-header h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
    }

.close-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* Grid Layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 25px;
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
}

    .form-group label {
        font-size: 13px;
        margin-bottom: 6px;
        font-weight: 500;
        color: #333;
    }

/* Full Width */
.full-width {
    grid-column: span 2;
}

/* Inputs */
input,
select {
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

    input:focus,
    select:focus {
        border-color: #2c3e50;
    }

/* Radio */
.radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 5px;
}

    .radio-group input[type="radio"] {
        margin-right: 6px;
    }

/* Footer */
.modal-footer {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

/* Button */
.primary-btn {
    background: #16233b;
    color: white;
    padding: 14px 60px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

    .primary-btn:hover {
        background: #0f1a2e;
    }


/* Small donation modal */
.rd-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 1000; /* example */
}

.rd-donation-modal {
    position: fixed;
    z-index: 1100; /* higher than backdrop */
    /* other styling */
}

/* Big record donation modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* must be > 1100 */
}

.modal-container {
    background: white;
    padding: 20px;
    border-radius: 4px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/*view expense*/
.expense-footer-row {
    margin-top: 3px;
    margin-bottom: 3px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 5000s ease-in-out 0s;
}



.org-container {
    width: 480px;
}

/* Card */
.org-card {
    background: #efefef;
    border: 1px solid #dcdcdc;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 25px;
}

/* Labels */
.org-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    color: #17223a;
}

/* Inputs */
.input-group {
    margin-bottom: 12px;
}

    .input-group input,
    .input-group select {
        width: 100%;
        height: 36px;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid #cfcfcf;
        background: #f8f8f8;
        font-size: 14px;
    }

/* Add Organization Button */
.add-org-btn {
    width: 100%;
    height: 38px;
    border-radius: 14px;
    border: 1px solid #d6d6d6;
    background: #efefef;
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 30px;
}

/* Footer Buttons */
.org-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

/* Back Button */
.back-btn-signup {
    flex: 1;
    height: 40px;
    border-radius: 14px;
    border: none;
    background: #e2e2e2;
    font-size: 14px;
    font-weight: 500;
}

/* Sign Up Button */
.sign-btn {
    flex: 1;
    height: 40px;
    border-radius: 14px;
    border: none;
    background: #0f1f44;
    color: white;
    font-size: 14px;
    font-weight: 500;
}



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

@media (max-width: 576px) {
    .summary-cards {
        grid-template-columns: 1fr;
    }

    @media (max-width: 768px) {
        .user-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .user-tags {
            width: 100%;
            justify-content: space-between;
        }
    }

    @media (max-width: 768px) {

        .page-title {
            font-size: 18px;
        }

        .page-subtitle {
            font-size: 12px;
        }

        .add-mode-btn {
            padding: 8px 12px;
            font-size: 13px;
        }
    }

    /*    delete buttons*/

    /* Override base button */
    .rdbtn-danger {
        width: 100%;
        height: 48px;
        border-radius: 10px;
        border: 1px solid #dd2822;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center; /* centers everything */
        gap: 12px;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 500;
        color: #dd2822;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .rdbtn-danger:hover {
            background-color: #fff1f1;
            border-color: #b91c1c;
            color: #b91c1c;
        }


    .scrollable-modal {
        max-height: 80vh; /* Limits the modal height to 80% of viewport */
        overflow-y: auto; /* Enables vertical scrolling */
        padding: 20px; /* Optional padding */
        background-color: #fff; /* Make sure background is visible */
        border-radius: 8px; /* Optional styling */
    }

    /* Default card style */
    .staff-card {
        transition: transform 0.2s ease;
    }

    .staff-list .staff-card.merge-mode {
        margin-left: 30px !important;
        background: #fef2f2 !important;








        .phone-pill {
            display: flex;
            align-items: center;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            background: #ffffff;
            height: 42px;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

            .phone-pill:focus-within {
                border-color: #6366f1;
                box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
            }

        .phone-country-select {
            appearance: auto; /* keeps the native chevron ▾ */
            -webkit-appearance: auto;
            border: none;
            outline: none;
            background: transparent;
            padding: 0 6px 0 12px;
            font-size: 14px;
            color: #111827;
            height: 100%;
            cursor: pointer;
            white-space: nowrap;
            min-width: 95px;
            max-width: 130px;
        }

        .phone-pill-divider {
            width: 1px;
            height: 22px;
            background: #e5e7eb;
            flex-shrink: 0;
        }

        .phone-pill-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            padding: 0 12px;
            font-size: 14px;
            color: #374151;
            height: 100%;
        }

            .phone-pill-input::placeholder {
                color: #9ca3af;
            }
  
        /* Phone wrapper must behave like your auth inputs */
        .phone-control {
            position: relative;
            width: 100%;
        }

        .phone-input-wrapper {
            display: flex;
            align-items: center; /* vertical alignment */
            width: 100%;
            height: 48px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 0 12px;
            box-sizing: border-box;
            background: #fff;
        }
        /* Prefix section */
        .phone-prefix {
            display: flex; /* make flag + code inline */
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            cursor: pointer;
        }
            /* Divider */
            .phone-prefix::after {
                content: "";
                width: 1px;
                height: 22px;
                background: #e0e0e0;
                margin: 0 12px;
            }
        /* Phone input */
        .phone-input {
            flex: 1; /* take remaining space */
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
            height: 100%;
        }
        /* Dropdown */
        .dropdown-list {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: white;
            max-height: 220px;
            overflow-y: auto;
            z-index: 9999;
            box-shadow: 0 6px 16px rgba(0,0,0,0.08);
        }
        /* Search */
        .search-box {
            width: 100%;
            padding: 10px;
            border: none;
            border-bottom: 1px solid #f0f0f0;
            outline: none;
        }
        /* Dropdown item */
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            cursor: pointer;
            font-size: 14px;
        }

            .dropdown-item:hover {
                background: #f7f9fc;
            }




        .top-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 32px;
            background: white;
            display: flex;
            align-items: center;
            padding: 0 12px;
            border-bottom: 1px solid #e5e5e5;
            z-index: 2000;
        }

        .popup-left {
            margin-right: 8px;
        }

        .popup-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #007bff;
            color: white;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .popup-message {
            flex: 1;
            font-size: 13px;
            color: #333;
        }

        .popup-close {
            border: none;
            background: transparent;
            color: #999;
            font-size: 16px;
            cursor: pointer;
        }

            .popup-close:hover {
                color: #333;
            }

        .tab-button {
            padding: 6px 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
        }

            .tab-button.active-tab {
                background: #222;
                color: #fff;
                border-color: #222;
            }