@font-face {
    font-family: "Megabyte";
    src: url("/fonts/Megabyte-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
:root {
    --bg-app: #f8fafc;
    --bg-page: #ffffff;
    --bg-card: #ffffff;
    --bg-card-soft: #f8fafc;
    --bg-input: #F5F5F5;
    --bg-hover: #f3f4f6;
    --bg-overlay: rgba(0, 0, 0, 0.45);
    --text-primary: #111827;
    --text-secondary: #000000;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;
    --border-color: #e5e7eb;
    --border-strong: #d1d5db;
    --primary: #17223A;
    --primary-hover: #1f2d4d;
    --focus-ring: rgba(23, 34, 58, 0.18);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.12);
    --btn-bg: #ffffff;
    --btn-prim-bg: #f9fafb;
    --btn-prim-text: #111827;
    --revenue-name-color: #1f2937;
    --donation-backdrop: rgba(0, 0, 0, 0.35);
    --donation-modal-bg: #ffffff;
    --donation-modal-text: #111111;
    --donation-modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.20);
    --donation-title-color: #111111;
    --donation-muted-color: #8a8a8a;
    --donation-close-color: #111111;
    --donation-card-bg: #ffffff;
    --donation-card-border: rgba(0, 0, 0, 0.06);
    --donation-card-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    --rd-outline-bg: #ffffff;
    --rd-outline-border: rgba(0, 0, 0, 0.10);
    --rd-outline-text: #111111;
    --rd-outline-hover-bg: #f5f5f5;
    --rd-outline-hover-border: rgba(0, 0, 0, 0.16);
    --rd-send-bg: #ffffff;
    --rd-send-border: rgba(0, 0, 0, 0.08);
    --rd-send-icon: #111111;
    --rd-send-hover-bg: #f5f5f5;
    --rd-send-hover-border: rgba(0, 0, 0, 0.14);
    --close-btn-color: #111827;
    --revenue-modal-title-color: #111827;
    --pending-table-head-bg: #f3f3f3;
    --pending-table-head-text: #7b7b7b;
    --pending-table-head-border: #dddddd;
    --pending-table-body-text: #2f2f2f;
    --pending-table-row-border: #e6e6e6;
    --modal-overlay-bg: rgba(0, 0, 0, 0.28);
    --review-bill-modal-bg: #ffffff;
    --review-bill-modal-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --review-bill-modal-border: rgba(0, 0, 0, 0.06);
    --review-bill-title-color: #111827;
    --revenue-backdrop-bg: rgba(15, 23, 42, 0.45);
    --revenue-modal-bg: #ffffff;
    --revenue-modal-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    --revenue-modal-border: #ececec;
    --rd-backdrop-bg: rgba(0, 0, 0, 0.45);
    --rd-close-color: #6b7280;
    --rd-avatar-bg: #0f172a;
    --rd-avatar-text: #ffffff;
    --rd-amount-color: #111827;
    --rd-meta-color: #6b7280;
    --user-modal-title-color: #111827;
    --org-access-title-color: #111827;
    --org-access-card-border: #e5e7eb;
    --org-access-card-bg: #f9fafb;
    --org-access-name-color: #111827;
    --org-access-arrow-color: #6b7280;
    --org-access-checkbox-border: #1f2937;
    --org-access-checkbox-dot: #17223A;
    --merge-header-border: #e5e5e5;
    --merge-header-bg: #f9f9f9;
    --merge-title-color: #111827;
    --merge-close-color: #111827;
    --merge-body-bg: #f3f4f6;
    --merge-scroll-thumb: rgba(0, 0, 0, 0.30);
    --danger-color: #ff3b30;
    --danger-hover-bg: #fff5f5;
    --download-icon-filter: brightness(0) invert(0);
    --danger-color: #ff1f1f;
    --danger-hover-bg: #fff5f5;
    --delete-icon-filter: brightness(0.7) contrast(1.6) saturate(1.2);
    --summary-icon-filter: brightness(0) invert(0);
    --summary-card-bg: #f5f5f5;
    --summary-label-color: #7b7b7b;
    --summary-value-color: #111111;
    --staff-name-color: #111827;
    --edit-input-border: #d1d5db;
    --edit-input-bg: #ffffff;
    --edit-input-text: #111827;
    --edit-input-focus-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #17223A;
    --pay-card-bg: #F3F4F6;
    --pay-label-color: #6B7280;
    --pay-value-color: #111827;
    --salary-tabs-bg: #dbdbdb;
    --salary-chip-salary-bg: #e0e7ff;
    --salary-chip-salary-text: #1e40af;
    --salary-chip-success-bg: #dcfce7;
    --salary-chip-success-text: #166534;
    --salary-status-paid-bg: #dcfce7;
    --salary-status-paid-text: #166534;
    --manage-heading-color: #111827;
    --manage-table-head-bg: #f3f3f3;
    --manage-table-head-text: #7b7b7b;
    --manage-table-head-border: #dddddd;
    --manage-table-body-text: #2f2f2f;
    --manage-table-row-border: #e6e6e6;
    --success-color: #16a34a;
    --danger-color: #ff1f1f;
    --manage-table-row-bg: #ffffff;
    --delivery-date-input-color: #7b7b7b;
    --delivery-date-input-bg: #ffffff;
    --delivery-date-icon-filter: brightness(0) invert(0);
    --delivery-meta-color: #111827;
    --delivery-meta-strong-color: #111827;
    --delivery-table-shell-border: #d7d7d7;
    --delivery-table-shell-bg: #ffffff;
    --delivery-table-head-bg: #f4f4f4;
    --delivery-table-head-text: #9a9a9a;
    --delivery-table-head-border: #dddddd;
    --delivery-table-row-bg: #ffffff;
    --delivery-table-body-text: #2f2f2f;
    --delivery-table-row-border: #e7e7e7;
    --delivery-confirmed-bg: #2ca63a;
    --delivery-pending-bg: #f59a0a;
    --delivery-action-btn-bg: #ffffff;
    --delivery-action-btn-text: #111827;
    --delivery-success-text: #16a34a;
    --delivery-success-border: #7bd38b;
    --delivery-reassign-text: #1f2a44;
    --delivery-reassign-border: #8a95ab;
    --delivery-action-hover-bg: #fafafa;
    --form-input-color: #848181;
    --table-container-bg: #f3f4f6;
    --table-container-border: rgba(0, 0, 0, 0.06);
    --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);
    --table-header-bg: #eaeaea;
    --table-header-text: #111827;
    --table-header-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    --table-header-strip: linear-gradient( to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.08), transparent );
    --table-row-bg: #ffffff;
    --table-row-text: #111827;
    --table-row-border: rgba(0, 0, 0, 0.06);
    --fullscreen-card-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    --coa-table-container-border: #e5e7eb;
    --coa-table-container-bg: #ffffff;
    --coa-table-head-bg: #eaeaea;
    --coa-table-head-text: #848181;
    --coa-table-row-bg: #ffffff;
    --coa-table-row-text: #111827;
    --coa-table-row-border: #e5e7eb;
    --coa-table-row-hover-bg: #f9fafb;
    --coa-border: #e5e7eb;
    --coa-bg: #ffffff;
    --coa-head-bg: #eaeaea;
    --coa-head-text: #848181;
    --coa-row-bg: #ffffff;
    --coa-row-text: #111827;
    --coa-row-border: #e5e7eb;
    --coa-row-hover: #f9fafb;
    --add-journal-box-border: #e5e7eb;
    --add-journal-box-bg: #ffffff;
    --add-journal-text-color: #111827;
    --add-journal-dollar-color: #8b8b8b;
    --add-journal-summary-bg: #f7f7f7;
    --add-journal-divider-color: #8f8f8f;
    --add-journal-pill-bg: #f7c8c8;
    --add-journal-pill-text: #ff3b30;
}
[data-theme="dark"] {
    --bg-app: #000000;
    --bg-page: #050505;
    --bg-card: #0a0a0a;
    --bg-card-soft: #121212;
    --bg-input: #0d0d0d;
    --bg-hover: #181818;
    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-muted: #8b8b8b;
    --btn-bg: #0d0d0d;
    --border-color: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.45);
    --btn-prim-bg: #111111;
    --btn-prim-text: #f5f5f5;
    --revenue-name-color: #ffffff;
    --donation-backdrop: rgba(0, 0, 0, 0.60);
    --donation-modal-bg: #0a0a0a;
    --donation-modal-text: #f5f5f5;
    --donation-modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    --donation-title-color: #ffffff;
    --donation-muted-color: #9a9a9a;
    --donation-close-color: #f5f5f5;
    --donation-card-bg: #111111;
    --donation-card-border: rgba(255, 255, 255, 0.08);
    --donation-card-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    --rd-outline-bg: #0d0d0d;
    --rd-outline-border: rgba(255, 255, 255, 0.10);
    --rd-outline-text: #f5f5f5;
    --rd-outline-hover-bg: #181818;
    --rd-outline-hover-border: rgba(255, 255, 255, 0.16);
    --rd-send-bg: #111111;
    --rd-send-border: rgba(255, 255, 255, 0.10);
    --rd-send-icon: #f5f5f5;
    --rd-send-hover-bg: #1a1a1a;
    --rd-send-hover-border: rgba(255, 255, 255, 0.16);
    --close-btn-color: #f5f5f5;
    --revenue-modal-title-color: #f5f5f5;
    --pending-table-head-bg: #111111;
    --pending-table-head-text: #a1a1a1;
    --pending-table-head-border: rgba(255, 255, 255, 0.10);
    --pending-table-body-text: #f5f5f5;
    --pending-table-row-border: rgba(255, 255, 255, 0.08);
    --modal-overlay-bg: rgba(0, 0, 0, 0.55);
    --review-bill-modal-bg: #0a0a0a;
    --review-bill-modal-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    --review-bill-modal-border: rgba(255, 255, 255, 0.08);
    --review-bill-title-color: #f5f5f5;
    --revenue-backdrop-bg: rgba(0, 0, 0, 0.60);
    --revenue-modal-bg: #0a0a0a;
    --revenue-modal-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    --revenue-modal-border: rgba(255, 255, 255, 0.08);
    --rd-backdrop-bg: rgba(0, 0, 0, 0.60);
    --rd-close-color: #9ca3af;
    --rd-avatar-bg: #1f2937;
    --rd-avatar-text: #f5f5f5;
    --rd-amount-color: #f5f5f5;
    --rd-meta-color: #9ca3af;
    --user-modal-title-color: #f5f5f5;
    --org-access-title-color: #f5f5f5;
    --org-access-card-border: rgba(255, 255, 255, 0.10);
    --org-access-card-bg: #111111;
    --org-access-name-color: #f5f5f5;
    --org-access-arrow-color: #a1a1a1;
    --org-access-checkbox-border: #d1d5db;
    --org-access-checkbox-dot: #f5f5f5;
    --merge-header-border: rgba(255, 255, 255, 0.08);
    --merge-header-bg: #111111;
    --merge-title-color: #f5f5f5;
    --merge-close-color: #f5f5f5;
    --merge-body-bg: #121212;
    --merge-scroll-thumb: rgba(255, 255, 255, 0.22);
    --danger-color: #ff6b6b;
    --danger-hover-bg: rgba(255, 59, 48, 0.12);
    --download-icon-filter: brightness(0) invert(1);
    --danger-color: #ff6b6b;
    --danger-hover-bg: rgba(255, 31, 31, 0.12);
    --delete-icon-filter: brightness(0) invert(1);
    --summary-icon-filter: brightness(0) invert(0);
    --summary-card-bg: #121212;
    --summary-label-color: #a1a1a1;
    --summary-value-color: #f5f5f5;
    --staff-name-color: #f5f5f5;
    --edit-input-border: rgba(255, 255, 255, 0.10);
    --edit-input-bg: #0d0d0d;
    --edit-input-text: #f5f5f5;
    --edit-input-focus-shadow: 0 0 0 2px #0d0d0d, 0 0 0 4px rgba(255, 255, 255, 0.20);
    --pay-card-bg: #121212;
    --pay-label-color: #a1a1a1;
    --pay-value-color: #f5f5f5;
    --salary-tabs-bg: #1a1a1a;
    --salary-chip-salary-bg: rgba(96, 165, 250, 0.16);
    --salary-chip-salary-text: #93c5fd;
    --salary-chip-success-bg: rgba(74, 222, 128, 0.16);
    --salary-chip-success-text: #86efac;
    --salary-status-paid-bg: rgba(74, 222, 128, 0.16);
    --salary-status-paid-text: #86efac;
    --manage-heading-color: #f5f5f5;
    --manage-table-head-bg: #111111;
    --manage-table-head-text: #a1a1a1;
    --manage-table-head-border: rgba(255, 255, 255, 0.10);
    --manage-table-body-text: #f5f5f5;
    --manage-table-row-border: rgba(255, 255, 255, 0.08);
    --success-color: #4ade80;
    --danger-color: #ff6b6b;
    --manage-table-row-bg: #0a0a0a;
    --delivery-date-input-color: #a1a1a1;
    --delivery-date-input-bg: #0d0d0d;
    --delivery-date-icon-filter: brightness(0) invert(1);
    --delivery-meta-color: #f5f5f5;
    --delivery-meta-strong-color: #ffffff;
    --delivery-table-shell-border: rgba(255, 255, 255, 0.10);
    --delivery-table-shell-bg: #0a0a0a;
    --delivery-table-head-bg: #111111;
    --delivery-table-head-text: #a1a1a1;
    --delivery-table-head-border: rgba(255, 255, 255, 0.10);
    --delivery-table-row-bg: #0a0a0a;
    --delivery-table-body-text: #f5f5f5;
    --delivery-table-row-border: rgba(255, 255, 255, 0.08);
    --delivery-confirmed-bg: #2ca63a;
    --delivery-pending-bg: #f59a0a;
    --delivery-action-btn-bg: #111111;
    --delivery-action-btn-text: #f5f5f5;
    --delivery-success-text: #4ade80;
    --delivery-success-border: rgba(74, 222, 128, 0.45);
    --delivery-reassign-text: #cbd5e1;
    --delivery-reassign-border: rgba(148, 163, 184, 0.45);
    --delivery-action-hover-bg: #181818;
    --form-input-color: #f5f5f5;
    --table-container-bg: #111111;
    --table-container-border: rgba(255, 255, 255, 0.08);
    --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    --table-header-bg: #181818;
    --table-header-text: #f5f5f5;
    --table-header-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    --table-header-strip: linear-gradient( to bottom, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04), transparent );
    --table-row-bg: #0a0a0a;
    --table-row-text: #f5f5f5;
    --table-row-border: rgba(255, 255, 255, 0.08);
    --fullscreen-card-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    --coa-table-container-border: rgba(255, 255, 255, 0.10);
    --coa-table-container-bg: #0a0a0a;
    --coa-table-head-bg: #181818;
    --coa-table-head-text: #a1a1a1;
    --coa-table-row-bg: #0a0a0a;
    --coa-table-row-text: #f5f5f5;
    --coa-table-row-border: rgba(255, 255, 255, 0.08);
    --coa-table-row-hover-bg: #121212;
    --coa-border: rgba(255, 255, 255, 0.10);
    --coa-bg: #0a0a0a;
    --coa-head-bg: #181818;
    --coa-head-text: #a1a1a1;
    --coa-row-bg: #0a0a0a;
    --coa-row-text: #f5f5f5;
    --coa-row-border: rgba(255, 255, 255, 0.08);
    --coa-row-hover: #121212;
    --add-journal-box-border: rgba(255, 255, 255, 0.10);
    --add-journal-box-bg: #0a0a0a;
    --add-journal-text-color: #f5f5f5;
    --add-journal-dollar-color: #a1a1a1;
    --add-journal-summary-bg: #121212;
    --add-journal-divider-color: rgba(255, 255, 255, 0.18);
    --add-journal-pill-bg: rgba(255, 59, 48, 0.16);
    --add-journal-pill-text: #ff8a80;
}


html, body, input, select, textarea, button {
    font-family: "Inter", sans-serif;
}

html, body, .app-shell {
    background: var(--bg-app);
    color: var(--text-primary);
    min-height: 100vh;
}

html, body {
    margin: 0;
    padding: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

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;
    background: var(--bg-app);
    color: var(--text-primary);
}

.app-shell {
    min-height: 100vh;
    background: var(--bg-app);
    color: var(--text-primary);
}

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

.app-label {
    font-family: "Inter", sans-serif;
    font-weight: 500; 
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}

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

.page-subtitle {
    margin: 2px 0 0 0;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}



/* 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;
}

.arrow {
    float: right;
    margin-left: auto; /* space between image and text */
}

/* ==============================
   Back Button
   ============================== */
.back-btn {
    background: none;
    border: none;
    font-size: 30px;
    font-weight: 600;
    color: var(--text-primary);
    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: var(--bg-card);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

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

    .donor-card-header h3 {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
    }

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

.form-select-clean {
    width: 100%;
    height: 35px;
    margin-bottom: 4px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 0 32px 0 10px;
    font-size: 13.5px;
    background-color: var(--bg-input);
    color: var(--text-primary);
}



/* Apply ONLY to select elements */
select.form-select-clean {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-input) url('/images/arrow-down.png') no-repeat right 8px center;
    background-size: 16px;
}

.form-input {
    width: 100%;
    height: 35px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 0 10px 0 5px;
    font-size: 13.5px;
    background-color: var(--bg-input);
    color: var(--form-input-color);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    margin-top: 2px;
    margin-bottom: 4px;
}

    .form-input::placeholder {
        color: var(--text-muted);
    }

    .form-input:hover,
    .form-select-clean:hover {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
    }

    .form-input:focus,
    .form-select-clean:focus {
        outline: none;
        border-color: var(--primary);
        background-color: var(--bg-input);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }
/* Cards */
.card-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

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

.card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* 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: var(--text-secondary);
    }

/* 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: var(--text-primary);
    margin: 0;
}

.donation-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    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-family: "Megabyte", sans-serif;
    font-weight: 700;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

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

/* Donation type header */
.section-title {
    font-family: 'Inter', sans-serif; /* Inter font */
    font-weight: 600; /* Bold */
    font-size: 16px;
    color: #111827; /* Black */
    margin: 0; /* remove ALL margin */
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Subtitle under header */
.section-description {
    font-family: 'Inter', sans-serif; /* Inter font */
    font-weight: 400; /* Regular */
    font-size: 13px;
    color: grey; /* Grey subtitle */
    margin: 5px 0 22px 0; /* small top margin for slight spacing */
    line-height: 1.2;
}

/* Cards */
.payment-card {
    background: var(--bg-card); /* ✅ */
    border: 2px solid var(--border-color); /* ✅ */
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Payment row with more spacing */
/* Payment row with full vertical + horizontal alignment */
.payment-row {
    display: flex;
    justify-content: space-between; /* keeps left and right sections apart */
    align-items: center; /* vertical centering */
    padding: 20px 24px; /* top/bottom, left/right spacing */
}

/* Left side: icon + name */
.payment-left {
    display: flex;
    align-items: center; /* vertical centering */
    gap: 12px; /* horizontal space between icon and text */
}

/* Icon inside the left section */
.payment-icon img {
    display: block; /* removes inline spacing below images */
    vertical-align: middle;
}

/* Payment name text */
.payment-name {
    font-size: 14px;
    color: var(--text-primary);
}

/* Right side actions */
.payment-actions {
    display: flex;
    align-items: center; /* vertical centering */
    gap: 12px; /* horizontal spacing between buttons/toggles */
}

/* Shared cards */
.donation-types-container,
.donation-card,
.payment-container,
.payment-card,
.add-mode-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Titles */
.donation-types-title,
.donation-name,
.section-title,
.payment-name,
.modal-title {
    color: var(--text-primary);
}

/* Sub text */
.donation-types-description,
.modal-label {
    color: var(--text-secondary);
}
.radio-group {
    display: flex;
    gap: 16px;
    margin-top: 6px;
}
.theme-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

/* ==============================
   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: 2000;
}

.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 h4 {
    font-weight: bold;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    margin: 0;
}

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

/* Container */
.payment-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}


/* 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: 2000
}

/* Small centered modal */
.add-mode-modal {
    position: relative;
    width: 420px;
    min-height: 180px;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Title */
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Label */
.modal-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Input */
.modal-input {
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    padding: 0 10px;
    font-size: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
}

    .modal-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--primary);
    }

/* Button */
.modal-submit-btn {
    margin-top: auto;
    align-self: flex-end;
    background-color: var(--primary);
    color: var(--text-inverse);
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .modal-submit-btn:hover {
        background-color: var(--primary-hover);
    }

/* Payment actions */
.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: 0px;
    display: block;
    margin-top:6px;
}

.global.form-input {
    width: 100%;
    height: 34px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    padding: 0 10px;
    font-size: 14px;
    background-color: var(--bg-input);
    color: var(--text-primary);
}

    .global.form-input::placeholder {
        color: var(--text-muted);
    }

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('/images/arrow-down.png') no-repeat right 8px center;
    background-size: 22px;
    padding-right: 30px;
}

.more-filters-grid select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 8px 35px 8px 8px; /* extra right padding for arrow */
    border-radius: 4px;
    border: 1px solid #848181;
    color: #848181;
    background: #f5f5f5 url('/images/arrow-down.png') no-repeat right 8px center;
    background-size: 22px;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .circle span {
        line-height: 1;
        transform: translateY(-1px);
    }
/*.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: 12px 28px; /* increased padding */
    border-radius: 6px;
    background-color: rgba(132, 129, 129, 0.15); /* #848181 with 15% opacity */
    border: 1px solid rgba(0, 0, 0, 0.24); /* #000000 with 24% opacity */
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    display: flex; /* make it flex container */
    align-items: center; /* vertically center text */
    justify-content: center; /* horizontally center text */
}

    .send-test-btn:hover {
        background-color: rgba(132, 129, 129, 0.25); /* slightly darker on hover */
    }
/* Buttons */
.primary-btn {
    width: 100%;
    background: #17223A;
    color: #fff;
    border: none;
    height: 32px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top:4px;
}

.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;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 10px;
}

.stats-new-grid {
    display: grid;
    grid-auto-flow: column; /* 🔑 horizontal flow */
    grid-auto-columns: minmax(260px, auto); /* 🔑 each card sizes itself */
    gap: 24px;
    margin-bottom: 10px;
}

.view-stat-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

    .view-stat-card h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 900;
        color: var(--text-primary);
    }

    .view-stat-card span {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .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: var(--bg-card) !important;
    }

.user-menu-dropdown {
    position: absolute;
    top: 30px;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    width: 120px;
    z-index: 100;
}

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

        .user-menu-dropdown button:hover {
            background-color: var(--primary);
            color: var(--text-inverse);
        }

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

}
/* Wrapper around everything */
.carousel-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    margin-bottom:14px;
}

/* Visible area for cards */
.carousel-viewport {
    overflow: hidden; /* hide cards outside view */
    flex: 1; /* take remaining space between arrows */
}

/* Track that slides */
.carousel-track {
    display: flex;
    gap: 12px;
    transition: transform 0.3s ease;
}

/* Individual card */
.stat-card {
    min-width: 260px; /* card width */
    flex-shrink: 0; /* prevent shrinking */
}

/* Arrow buttons */
.carousel-btn {
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.stats-grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card2 {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

    .stat-card2 h2 {
        margin: 0;
        font-size: 32px;
        font-weight: 900;
        color: var(--text-primary);
    }

    .stat-card2 span {
        font-size: 14px;
        color: var(--text-secondary);
    }

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

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

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

.users-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.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;
        color: var(--text-primary);
    }

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

    .search-box input {
        width: 100%;
        padding: 8px 12px 8px 36px;
        border-radius: 8px;
        border: 1px solid var(--border-strong);
        font-size: 14px;
        outline: none;
        transition: all 0.2s ease;
        background: var(--bg-input);
        color: var(--text-primary);
    }

        .search-box input::placeholder {
            color: var(--text-muted);
        }

        .search-box input:focus {
            border: 1px solid var(--border-strong);
            box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary);
        }

.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 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 16px;
    border-radius: 10px;
    background: #f5f5f5; 
    border: 1px solid #e5e7eb; 

    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .user-row:hover {
        background: #eeeeee; 
    }

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

.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;
    border:none;
}

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

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


.role.super-admin, .role.admin,
.role.user, .role.donor {
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
}

/* Super Admin */
.role.super-admin {
    background-color: #ede9fe; /* light purple */
    color: #4c1d95 !important; /* darker purple, forced with !important */
   
}
/* Admin */
.role.admin {
    background-color: #e0e7ff;
    color: #1e3a8a !important; /* darker blue */
}

/* User */
.role.user {
    background-color: #f3f4f6;
    color: #111827 !important; /* dark grey / almost black */
}

/* Donor */
.role.donor {
    background-color: #dcfce7;
    color: #14532d !important; /* darker green */
}

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

/* ===== Report Row Layout ===== */
.report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 16px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 16px;
}

.report-info {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.report-icon-wrap {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.report-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.report-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.report-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    margin: 0;
}

.report-subtitle {
    font-size: 11px;
    color: #374151;
    line-height: 1.3;
    margin: 0;
}

/* ===== Right Action Buttons ===== */
.report-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.report-action-btn {
    min-width: 48px;
    height: 28px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f3f4f6;
    color: #111827;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

    .report-action-btn:hover {
        background: #e5e7eb;
    }

.report-preview-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.report-preview-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.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: var(--bg-card); /* reused */
    border-radius: 16px;
    width: 420px;
    padding: 24px;
    z-index: 1000;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

    .user-modal h3 {
        margin: 0 0 16px;
        font-size: 16px;
        font-weight: 600;
        color: var(--user-modal-title-color); /* isolated */
    }
.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;
    }

    .modal-user-header .donor-info strong {
        display: block; /* force name to its own line */
    }
.avatar.large {
    width: 48px;
    height: 48px;
    font-size: 18px;
    background:#17223A;
}

.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;
}

/* Buttons */
.btn-outline {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-outline:hover {
        background: var(--bg-hover);
    }

.btn-danger {
    padding: 8px 14px;
    border-radius: 8px;
    background:var(--danger);
    color: #ffffff;
    background: #dc2626;
    border: none;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}
/*    .btn-danger:hover {
        
        transform: translateY(-1px);
    }
*/
/* Shared */
.btn-outline,
.btn-danger {
    width: 100%;
}
.add-row-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 8px;
}

.btn-match-dark {
    background-color: #17223A; /* dark blue */
    color: #ffffff;
    border: none;
    padding: 0 8px; /* horizontal padding */
    height: 20px;
    min-width: auto;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
}

    .btn-match-dark:hover {
        background-color: #0f1a2a; /* slightly darker on hover */
    }

.btn-close-grey {
    background-color: #ffffff; /* grey */
    color: #cccccc;
    border: #cccccc;
    padding: 0 16px;
    height: 20px;
    min-width: auto;
    font-size: 12px;
    border-radius:8px;
    cursor: pointer;
    border-radius: 3px;
}

    /*.btn-close-grey:hover {
        background-color: #b3b3b3;*/ /* slightly darker grey on hover */
    /*}*/

.add-line-btn_split {
    width: auto;
    /*    margin-top: 12px;*/
    height: 27px;
    border-radius: 4px;
    background: #ffffff;
    color: #000000;
    border: 1px solid #656565;
    padding: 3px 22px;
    font-weight: 500;
    display: inline-flex;
    align-items: center; /* vertical center */
    justify-content: center;
}
    .add-line-btn_split:hover{
        background:#17223A;
        color:#ffffff;
    }

        .add-line-btn_split:hover img {
            filter: brightness(0) invert(1);
        }

    .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; 
}

.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 var(--edit-input-border);
    background-color: var(--edit-input-bg);
    color: var(--edit-input-text);
    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 var(--edit-input-border);
        box-shadow: var(--edit-input-focus-shadow);
    }

/* approve-bill*/
.approve-user-tags {
    display: flex;
    flex-direction: column; 
    gap: 4px;
    font-size: 13px;
}

    .approve-user-tags .top-row {
        display: flex;
        gap: 8px; 
        align-items: center; 
        justify-content: flex-end; 
    }

.status.pending {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    color: #FEC739;
    text-align: right; 
}

.sidebar {
    transform: translateX(0);
    transition: 0.3s;
}

@media (max-width: 768px) {
    .sidebar {
        display: block; 
        transform: translateX(-100%);
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 100;
        transition: transform 0.3s ease;
    }

        /* visible when open */
        .sidebar.open {
            transform: translateX(0);
        }
}
/* 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;
    }
    /* Default closed state on mobile */
.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

/* Open state */
.sidebar.open {
    transform: translateX(0);
}

/* Desktop always visible */
@media (min-width: 768px) {
    .sidebar {
        transform: translateX(0);
    }

    .hamburger {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        z-index: 1000;
        background-color: var(--sidebar-bg, #fff);
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .content {
        margin-left: 0 !important;
    }
}

/* Optional: overlay when sidebar is open on mobile */
.sidebar-overlay {
/*    display: none;*/
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 900;
}

.sidebar-overlay.active {
    display: block;
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

    .hamburger .bar {
        width: 25px;
        height: 3px;
        background-color: #333;
    }

/* Show hamburger only on small screens */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
}
/* Hidden by default (desktop) */
.close-btn {
    display: none;
}

/* Show only on mobile */
@media (max-width: 768px) {
    .close-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 22px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1000;
    }
}
/* ===== 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: 0px; /* smaller gap */
}

.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;
    background: var(--bg-page);
}
.logo {
    height: 36px; /* adjust if needed */
    width: auto;
    display: block;
}


/* SECOND BAR */
.header-bottom {
    height: 32px;
    width: 100%;
    background-color: #dbdbdb;
/*    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;
    }


.text-black-i {
    font-family: 'Inter', sans-serif;
    font-weight: 550; /* Medium */
    font-size: 14px;
    color: #000000;
}

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

/* ROLE PILL */
.role-pill {
    height: 17px;
    padding: 0 12px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 550;
     background-color: #ffffff; /* #17223A */
    color: #000000;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* 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;
/*        padding-left: 40px;*/
    }

    /* 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;
    color: var(--text-primary);
}

/* GROUP */
.settings-group {
    display: flex;
    flex-direction: column;
}

/* GROUP TITLE */
.settings-group-title {

    padding: 12px 16px 2px 16px; /* top right bottom left */
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card-soft);
}

/* 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;
    padding-left: 40px;
}

    .settings-row::before {
        pointer-events: none;
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        padding-left: 40px;
        top: 3px;
        bottom: 3px;
        background: var(--bg-hover);
        border-radius: 2px;
        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;
    }

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

/* Divider */
.row-divider {
    height: 1px;
    width: calc(100% - 32px);
    margin: 0 16px;
    background: var(--border-color);
}

/* TEXT */
.row-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.row-subtitle {
    font-size: 12px;
    color: grey;
}



/* CHEVRON */
.chevron {
    font-size: 20px;
    color: grey;
}

/* CARD */
.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
    margin-top: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* subtle shadow on all sides */
}

.settings-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card); /* keeps consistent with card */
}

.title-icon {
    display: inline-flex;
    color: var(--text-secondary);
}

.title-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

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

/* Page */
.stripe-page {
    padding: 24px 32px;
    max-width: 100%;
    background: var(--bg-page);
    color: var(--text-primary);
}

/* 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;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
    color: var(--text-primary);
}

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

.status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 24px; /* tight padding */
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.24);
    margin-bottom: 4px;
    background-color: #f5f5f5;
}

.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;
    height: 53px;
    background: #ffebc9; /* brighter yellow background */
    border-radius: 8px;
    color: #886400; /* soft light brown text for contrast on yellow */
    font-size: 16px;
    line-height: 1.2;
    display: flex; /* enables flexbox */
    align-items: center; /* vertically centers content */
}
/* ==========================================
   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: #dbdbdb;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    height:50px;
    margin-bottom:10px;
}

.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;
    color: var(--text-secondary);
}

.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;
    }
.split-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    .split-table th {
        text-align: left;
        font-size: 13px;
        color: #6b7280;
        padding-bottom: 6px;
    }

    .split-table td {
        padding: 6px 4px;
    }

.split-input {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 14px;
    transition: all 0.2s ease;
}

    .split-input:focus {
        outline: none;
        border-color: #3b82f6;
        background: #fff;
    }

    .split-input.amount {
        text-align: right;
        font-weight: 500;
    }

.delete-btn_split {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #9ca3af;
    cursor: pointer;
}

    .delete-btn_split:hover {
        color: #ef4444;
    }

/* ==========================================
   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: -1px;
    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: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    align-items: flex-start;
    /* Shadow added */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14); /* soft shadow */
}

/* 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: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.action-create {
    background-color: rgba(16, 185, 129, 0.18);
    color: #10b981;
}

.action-delete {
    background-color: rgba(220, 38, 38, 0.18);
    color: #dc2626;
}

.action-view {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
}

/* Audit details column */
.audit-details {
    flex-grow: 1;
    font-size: 14px;
    color: var(--text-secondary);
    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: var(--text-primary);
}

/* Badges */
.audit-badge {
    border-radius: 9999px;
    padding: 1px 6px; /* reduced vertical and horizontal padding */
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1; /* ensures compact height */
}

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

/* Entity badge */
.entity-badge {
    background: var(--bg-card-soft);
    color: black;
    border: 2px solid grey;
}

/* Entity info line */
.entity-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.entity-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
}

.audit-action-text {
    font-weight: normal;
    color: var(--text-secondary);
    margin-right: 4px;
}

.audit-entity-text {
    font-weight: 600;
    color: var(--text-primary);
}

/* Description line */
.description {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* Timestamp */
.timestamp {
    font-size: 11px;
    color: var(--text-muted);
}

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

        .filters-grid input,
        .filters-grid select,
        .filters-grid button {
            width: 100%;
        }

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

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

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

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

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

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

/* Cards */
.card {
    background: var(--bg-card);
    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;
}

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: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 34px;
    margin-top: 4px;
    margin-bottom: 4px;
}

    .input-prefix span {
        padding: 0 10px;
        color: var(--text-secondary);
        font-size: 14px;
    }

    .input-prefix input {
        border: none;
        background: transparent;
        color: var(--text-primary) !important; /* force override */
        height: 100%;
        width: 100%;
        outline: none;
    }

        .input-prefix input::placeholder {
            color: var(--text-muted);
        }
.input-prefix input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 9999s ease-in-out 0s;
}
.input-prefix,
.theme-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    height: 34px;
}
.theme-select {
    width: 100%;
    padding: 0 10px;
    color: var(--text-primary);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
    .theme-select option {
        background: var(--bg-card);
        color: var(--text-primary);
    }
    .theme-select:focus {
        border-color: var(--border-strong);
        background: var(--bg-hover);
    }
/* 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;
    line-height: 1;
}

.btn-primary {
    margin-top:10px;
    display: flex; /* make button a flex container */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    width: 100%;
    height: 32px;
    padding: 0 16px; /* remove top/bottom padding, height controls vertical space */
    border-radius: 6px;
    background: #17223A;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    margin-bottom: 8px;
}

    .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;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px;
    background-color: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    flex: 1;
    transition: all 0.2s ease;
}

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

    /* 👇 important for dark mode icons */
    .summary-icon img,
    .summary-icon svg {
        width: 20px;
        height: 20px;
        filter: var(--summary-icon-filter);
    }

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

    .summary-content .title {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
    }

    .summary-content .amount {
        font-size: 20px;
        font-weight: bold;
        margin: 0;
        color: var(--text-primary);
    }
.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;
    gap: 0.5rem;
}

    .amount-range-group input {
        width: 100%;
        box-sizing: border-box;
        height: 42px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 14px;
        outline: none;
        transition: all 0.2s ease;
    }

        /* Hover (no gray background, only border change) */
        .amount-range-group input:hover {
            border-color: var(--border-strong);
        }

        /* Focus */
        .amount-range-group input:focus {
            border-color: var(--border-strong);
            background: var(--bg-input);
        }
.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 25px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-download img {
        width: 20px;
        height: 22px;
        transition: filter 0.3s;
    }

    /* Active state */
    .btn-download.active {
        background-color: var(--primary); /* replaces #17223A */
        color: var(--text-inverse);
    }
        .btn-download.active img {
            filter: var(--download-icon-filter);
        }
.revenue-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.staff-name-view {
    font-size: 18px;
    font-weight: 600;
    color: var(--staff-name-color);
    font-family: "Inter", sans-serif;
    line-height: 1.2;
    margin-top: 10px;
    margin-left: 1px;
}

.card.revenue-item {
    display: flex;
    flex-direction: column;
    padding: 15px 40px 8px 40px;
    background-color: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    margin-top: 20px;
    /* Even outward shadow */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08), /* soft glow around all sides */
    0 0 24px rgba(0, 0, 0, 0.12); /* deeper blur for lift */

    transform: translateY(-2px); /* slight lift */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.revenue-name {
    all: unset;
    font-size: 15px;
    font-weight: 600;
    color: var(--revenue-name-color); /* ✅ isolated */
    font-family: "Inter", sans-serif;
    display: block;
}
.revenue-meta,
.revenue-sub {
    font-size: 12px;
    color: var(--text-primary);
    margin: 2px;
}

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

    .revenue-amount .amount {
        font-weight: 700;
        margin: 0px 0px 4px 0px; /* or margin-bottom: 4px; if you want some space */
        color: var(--text-primary);
        margin-right:10px;
    }
.revenue-info p {
    margin: 0; /* remove default <p> margin */
}

.revenue-meta {
    display: inline-flex;
    align-items: center; /* vertical center inside pill */
    padding: 2px 10px;
    height: 16px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: #e5e7eb;
    color: #111827;
    margin-top: 4px; /* space from donation name */
}
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.btn-delete-revenue,
.btn-edit-revenue {
    flex: 1;
    height: 32px;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn-delete-revenue {
    background: var(--bg-card);
    color: var(--danger-color);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

    .btn-delete-revenue:hover {
        background: var(--danger-hover-bg);
    }
/* edit */
.btn-edit-revenue {
    background: #172544;
    color: #ffffff;
    border: 1px solid #172544;
}

    .btn-edit-revenue:hover {
        background: #0f1b34;
    }

/* icon */
.btn-action-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}
.radio-wrapper {
    display: inline-block; /* 🔥 shrinks container */
    padding: 4px 6px; /* tight spacing */
}
.radio-group,
.revenue-modal-type-options {
    display: flex;
    gap: 16px;
    margin-top: 6px;
}

    .radio-group label,
    .revenue-modal-type-options label {
        display: flex;
        flex-direction: column; 
        align-items: center;
        font-size: 12px;
        color: #374151;
        cursor: pointer;
    }

     radio button 
    .radio-group input[type="radio"],
    .revenue-modal-type-options input[type="radio"] {
        transform: scale(0.9);
        margin-bottom: 4px; 
        accent-color: #1f2937;
        cursor: pointer;
    }

/* ===== Payment Status Pill (NEW - no conflict with .status) ===== */
.payment-status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; /* auto width instead of fixed */
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
    white-space: nowrap;
}

    /* Matched (green) */
    .payment-status.matched {
        background-color: #daf5e5;
        color: #2e7d32;
    }

    /* Available (blue like screenshot) */
    .payment-status.available {
        background-color: #dbeafe;
        color: #1d4ed8;
    }

.status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 16px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 100;
    text-transform: uppercase;
    margin: 4px, 40px,0px,0px;
}

    /* Colors */
    .status.paid,
    .status.Sale {
        background-color: #63BE6B;
        color: #fff;
    }

    .status.inactivered {
        color: #fff;
        background-color: #ef4444;
    }

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

    .status.unpaid,
    .salary-chip.fine {
        background-color: #FEC739;
        color: #ffffff;
    }

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

    .status.avalible,
    .status.Purchase {
        background-color: mediumpurple;
        color: white;
    }

.balance {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0 0;
}

.revenue-balance-row {
    margin-top: 10px;
/*    margin-left:36px;*/
}

.divider {
    height: 1px;
    background-color: var(--border-color);
    margin-bottom: 4px;
    margin-top: 4px;
}

.balance-left {
    font-size: 13px;
    color: var(--text-muted) !important;
    margin: 0;
}
.revenue-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

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

.popup-content {
    position: relative;
    background: var(--bg-card-soft);
    padding: 18px 22px;
    border-radius: 16px;
    width: 560px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

    .popup-content h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
        color: var(--text-primary);
    }

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

.popup-card {
    background: var(--bg-hover);
    flex: 1 1 45%;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}
.card-title {
    font-size: 12px;
    color: #666;
    margin: 0;
    color: var(--text-secondary);
}

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


.popup-close {
    border:none;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    background:none;
}
/* 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: 18px;
        font-weight: 800;
        color: var(--text-primary);
        margin: 0;
    }

.card-title7 {
    font-family: "Inter", sans-serif;
    font-weight: 600; /* 🔥 SemiBold */
    font-size: 16px; /* adjust if needed */
    color: var(--text-primary);
    margin: 0;
}
/* Form spacing */
.donor-form-group {
  
    margin-bottom:3px; /* space below the group */
    margin-top: 3px;
}

    .donor-form-group label,
    #addItemForm > label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 8px;
    }


.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: 18px;
        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;
}
.approved-address-filters {
    margin-top: 18px;
    margin-bottom: 16px;
}

.approved-address-search {
    width: 100%;
}

    .approved-address-search input {
        width: 100%;
        height: 34px;
        background: #fff;
        font-size: 13px;
    }

.approved-address-card {
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 8px;
    overflow: hidden;
}

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

.approved-address-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .approved-address-table thead th {
        font-size: 14px;
        font-weight: 600;
        color: #7a7a7a;
        text-align: left;
        padding: 18px 18px;
        border-bottom: 1px solid #d7d7d7;
        background: #f5f5f5;
    }

    .approved-address-table tbody td {
        font-size: 14px;
        color: #2f2f2f;
        padding: 20px 18px;
        border-bottom: 1px solid #e2e2e2;
        vertical-align: middle;
        background: #fff;
    }

    .approved-address-table tbody tr:last-child td {
        border-bottom: none;
    }

.check-col {
    width: 52px;
    padding-left: 18px !important;
}

.street-cell {
    font-weight: 600;
    color: #2f2f2f;
}

.actions-col {
    width: 365px;
    text-align: center;
}

.actions-cell {
    padding-right: 20px !important;
}

.actions-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
   /* white-space: nowrap;*/
}

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

    .approved-checkbox input {
        display: none;
    }

    .approved-checkbox .custom-checkbox-circle {
        width: 21px;
        height: 21px;
        border-radius: 50%;
        border: 1.6px solid #1f2937;
        background: #fff;
        position: relative;
        display: inline-block;
    }

    .approved-checkbox input:checked + .custom-checkbox-circle {
        background: #000;
        border-color: #000;
    }

        .approved-checkbox input:checked + .custom-checkbox-circle::after {
            content: "✓";
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            position: absolute;
            top: 47%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.selected-row td {
    border-bottom-color: #d7dbe2;
}

.status-pill {
    height: 24px;
    min-width: 92px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    background: #fff;
    box-sizing: border-box;
}

.onhold-pill {
    color: #e49a1a;
    border: 1px solid #efb85a;
}
.onhold-active-pill {
    height: 28px; /* slightly bigger */
    min-width: 140px; /* enough space for full text */
    padding: 0 14px; /* more breathing space */
    border-radius: 10px; /* smoother pill shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap; /* prevent breaking */
    box-sizing: border-box;
    color: #e49a1a;
    border: 1px solid #efb85a;
    background: #fff;
}
.active-pill {
    color: #17a34a;
    border: 1px solid #7bd38b;
}

.hold-pill {
    color: #ff3b30;
    border: 1px solid #ff8e8e;
}

.date-chip {
    height: 24px;
    min-width: 104px;
    padding: 0 10px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: #8b8b8b;
    background: #fff;
    box-sizing: border-box;
    white-space: nowrap;
}

.date-chip-icon {
    width: 12px;
    height: 12px;
    opacity: 0.65;
    flex-shrink: 0;
}

.assign-driver-btn {
    height: 24px;
    min-width: 92px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #8a95ab;
    background: #fff;
    color: #24324a;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

    .assign-driver-btn:hover {
        background: #f8fafc;
    }
.manage-address-card {
    padding: 14px 14px 18px 14px;
    min-height: 560px;
}

.manage-address-heading {
    margin: 12px 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--manage-heading-color);
}

.manage-address-table-wrap {
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: unset;
    overflow: hidden;
    background: var(--bg-card);
}

.manage-address-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .manage-address-table thead th {
        background: var(--manage-table-head-bg);
        color: var(--manage-table-head-text);
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        padding: 18px 24px;
        border-bottom: 1px solid var(--manage-table-head-border);
    }

    .manage-address-table tbody td {
        padding: 22px 24px;
        font-size: 13px;
        color: var(--manage-table-body-text);
        border-bottom: 1px solid var(--manage-table-row-border);
        vertical-align: middle;
    }

    .manage-address-table tbody tr:last-child td {
        border-bottom: none;
    }
    .manage-address-table tbody tr {
        background: var(--manage-table-row-bg);
    }

    .manage-address-table tbody td {
        padding: 22px 24px;
        font-size: 13px;
        color: var(--manage-table-body-text);
        border-bottom: 1px solid var(--manage-table-row-border);
        vertical-align: middle;
        background: var(--manage-table-row-bg);
    }
.manage-actions-col {
    width: 220px;
    text-align: center;
}

.manage-actions-cell {
    text-align: center;
    vertical-align: middle;
    justify-content: center;
}

.manage-text-status {
    font-size: 13px;
    font-weight: 600;
}

.approved-text {
    color: var(--success-color);
}

.rejected-text {
    color: var(--danger-color);
}

/*.manage-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}*/
.manage-action-buttons {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;
    width: 100%; /* take full column width */
    gap: 10px;
}
.manage-outline-btn {
    min-width: 90px;
    height: 24px;
    padding: 0 14px;
    border-radius: 6px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.approve-btn {
    color: #16a34a;
    border: 1px solid #7bd38b;
}

.reject-btn {
    color: #ff3b30;
    border: 1px solid #ff8f8f;
}

    .approve-btn:hover,
    .reject-btn:hover {
        background: #fafafa;
    }
.assign-route-modal {
    width: 100%;
    max-width: 530px;
    padding: 18px 18px 16px 18px;
    border-radius: 10px;
    background: #fff;
}

.assign-route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.assign-route-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.assign-route-modal .donor-form-group {
    margin-bottom: 12px;
}

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

.assign-route-modal .form-input {
    height: 30px;
    font-size: 13px;
}

.assign-route-submit {
    width: 100%;
    height: 28px;
    margin-top: 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    justify-content: center;
}
.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.pending-requests-search {
    margin-bottom: 18px;
}

.pending-requests-card {
    padding: 16px 16px 18px 16px;
    min-height: 605px;
}

.pending-requests-table-wrap {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
}

.pending-requests-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .pending-requests-table thead th {
        background: var(--pending-table-head-bg);
        color: var(--pending-table-head-text);
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        padding: 18px 24px;
        border-bottom: 1px solid var(--pending-table-head-border);
    }

    .pending-requests-table tbody td {
        padding: 18px 24px;
        font-size: 13px;
        color: var(--pending-table-body-text);
        border-bottom: 1px solid var(--pending-table-row-border);
        vertical-align: middle;
        background: var(--bg-card);
    }

    .pending-requests-table tbody tr:last-child td {
        border-bottom: none;
    }

.pending-phone-cell3 {
    color: #ff3b30 !important;
    font-weight: 500;
}

.pending-actions-col {
    width: 210px;
    text-align: center !important;
}

.pending-actions-cell {
    text-align: center;
}

.pending-action-buttons {
    justify-content: center;
    gap: 8px;
}

.manage-outline-btn {
    min-width: 90px;
    height: 26px;
    padding: 0 14px;
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.approve-btn {
    color: #16a34a;
    border: 1px solid #7bd38b;
}

.reject-btn {
    color: #ff3b30;
    border: 1px solid #ff8f8f;
}

    .approve-btn:hover,
    .reject-btn:hover {
        background: #fafafa;
    }

.delivery-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.delivery-search {
    flex: 1;
    margin-bottom: 0;
}

.delivery-date-filter {
    width: 180px;
    position: relative;
    display: flex;
    align-items: center;
}

    .delivery-date-filter .form-input {
        height: 32px;
        padding-left: 34px;
        font-size: 13px;
        color: var(--delivery-date-input-color);
        background: var(--delivery-date-input-bg);
    }

.delivery-date-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    pointer-events: none;
    filter: var(--delivery-date-icon-filter);
}

.delivery-card {
    padding: 14px 14px 16px 14px;
    margin-bottom: 22px;
}

.delivery-meta-row {
    display: flex;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 16px;
    color: var(--delivery-meta-color);
}

    .delivery-meta-row strong {
        font-weight: 700;
        color: var(--delivery-meta-strong-color);
    }

.delivery-table-shell {
    border: 1px solid var(--delivery-table-shell-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--delivery-table-shell-bg);
}

.delivery-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .delivery-table thead th {
        background: var(--delivery-table-head-bg);
        color: var(--delivery-table-head-text);
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        padding: 18px 24px;
        border-bottom: 1px solid var(--delivery-table-head-border);
    }

    .delivery-table tbody tr {
        background: var(--delivery-table-row-bg);
    }

    .delivery-table tbody td {
        padding: 15px 24px;
        font-size: 13px;
        color: var(--delivery-table-body-text);
        border-bottom: 1px solid var(--delivery-table-row-border);
        vertical-align: middle;
        background: var(--delivery-table-row-bg);
    }

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

.delivery-actions-head {
    width: 220px;
    text-align: center !important;
}

.delivery-actions-cell {
    text-align: center;
}

.delivery-actions-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
}

.delivery-status-pill {
    height: 14px;
    min-width: 72px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
}

.confirmed-pill {
    background: var(--delivery-confirmed-bg);
}

.pending-pill {
    background: var(--delivery-pending-bg);
}

.delivery-action-btn {
    min-width: 89px;
    height: 24px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--delivery-action-btn-bg);
    color: var(--delivery-action-btn-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.delivered-btn,
.confirm-btn {
    color: var(--delivery-success-text);
    border: 1px solid var(--delivery-success-border);
}

.reassign-btn {
    color: var(--delivery-reassign-text);
    border: 1px solid var(--delivery-reassign-border);
}

    .delivered-btn:hover,
    .confirm-btn:hover,
    .reassign-btn:hover {
        background: var(--delivery-action-hover-bg);
    }





    .journal-filters {
    margin-bottom: 18px;
}

.journal-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.journal-entry-card {
    padding: 14px 16px;
    margin: 0 !important;
    min-height: auto !important;
}

.journal-entry-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.journal-entry-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.journal-entry-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.journal-entry-no {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.card.journal-entry-card {
    margin-bottom: 8px !important;
}
.journal-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 16px;
    padding: 0 10px;
    border-radius: 999px;
    background: #d8e8d8;
    color: #59b56a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.journal-entry-desc {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 400;
    color: #2f2f2f;
    line-height: 1.3;
}

.journal-entry-date {
    margin: 0;
    font-size: 10px;
    font-weight: 400;
    color: #4b5563;
    line-height: 1.3;
}

.journal-entry-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 120px; /* 👈 keeps alignment consistent */
}

.journal-entry-amount {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    text-align: right;
    width: 100%; /* 👈 forces same starting line */
}

.journal-view-btn {
    width: 100%;
    min-width: 86px;
    height: 28px;
    padding: 0 14px;
    border: 1px solid #d3d3d3;
    border-radius: 7px;
    background: #f7f7f7;
    color: #1f2a44;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.journal-view-btn:hover {
    background: #f1f1f1;
}

.journal-view-icon {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

/* Optional: make add button width match screenshot more closely */
.button-container .donor-add-btn {
    min-width: 180px;
    justify-content: center;
}

/* Optional: make search height closer to screenshot */
.filters .search-input {
    height: 32px;
}
.journal-popup-content {
    width: 100%;
    max-width: 470px;
    padding: 26px 28px 20px 28px;
    border-radius: 10px;
}

.journal-popup-header {
    margin-bottom: 18px;
}

.journal-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.25;
}

.journal-date-box {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 14px 14px 12px 14px;
    margin-bottom: 22px;
}

.journal-date-label {
    font-size: 14px;
    font-weight: 400;
    color: #7c7c7c;
    margin-bottom: 4px;
}

.journal-date-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.journal-detail-section {
    margin-bottom: 10px;
}

.journal-detail-heading {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px 0;
}

.journal-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #d9d9d9;
}

.journal-detail-text {
    font-size: 14px;
    font-weight: 400;
    color: #4b5563;
}

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

.journal-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.add-journal-popup-content {
    width: 100%;
    max-width: 520px;
    padding: 24px 26px 24px 26px;
    border-radius: 18px;
}

.add-journal-popup-header {
    margin-bottom: 14px;
}

.add-journal-popup-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.add-journal-group {
    margin-bottom: 14px;
}

    .add-journal-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
    }

.add-journal-items-box {
    border: 1px solid var(--add-journal-box-border);
    border-radius: 6px;
    padding: 10px 10px 12px 10px;
    background: var(--add-journal-box-bg);
}

.add-journal-radio-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
}

.add-journal-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--add-journal-text-color);
}

.add-journal-inner-input {
    margin-bottom: 12px;
}

.add-journal-amount-wrap {
    position: relative;
}

.add-journal-dollar {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--add-journal-dollar-color);
    line-height: 1;
}

.add-journal-amount-input {
    padding-left: 30px;
}

.add-journal-summary-box {
    background: var(--add-journal-summary-bg);
    border-radius: 10px;
    padding: 12px 14px 10px 14px;
    margin-top: 8px;
    margin-bottom: 18px;
}

.add-journal-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--add-journal-text-color);
    margin-bottom: 6px;
}

    .add-journal-summary-row strong {
        font-weight: 700;
    }

.add-journal-summary-divider {
    border-top: 2px solid var(--add-journal-divider-color);
    margin: 6px 0 8px 0;
}

.add-journal-summary-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--add-journal-text-color);
}

.add-journal-unbalanced-pill {
    min-width: 94px;
    height: 16px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--add-journal-pill-bg);
    color: var(--add-journal-pill-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.add-journal-save-btn {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.journal-filter-row {
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.journal-search-wrapper {
    flex: 1;
}

    .journal-search-wrapper input {
        width: 100%;
    }

.journal-filter-btn {
    width: 70px;
    min-width: 70px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

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

.journal-table-card {
    padding: 14px 14px 18px 14px;
    min-height: 445px;
}

.journal-section-title {
    margin: 18px 0 16px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

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

.journal-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

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

    .journal-table tbody td {
        padding: 20px 16px;
        font-size: 13px;
        color: #2f2f2f;
        border-bottom: 1px solid #e6e6e6;
        vertical-align: middle;
    }

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

.journal-entry-code {
    font-weight: 700;
    color: #2f2f2f;
}

.journal-money {
    font-weight: 700;
    color: #111827;
}

.journal-status-pill {
    min-width: 54px;
    height: 14px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

.posted-pill {
    background: #cfe8cf;
    color: #33a852;
}

.draft-pill {
    background: #fae8c4;
    color: #f59e0b;
}

.journal-stats-grid {
    margin-top: 20px;
}

    .journal-stats-grid .view-stat-card {
        min-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

        .journal-stats-grid .view-stat-card h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #111827;
        }

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

        .journal-stats-grid .view-stat-card span {
            font-size: 12px;
            font-weight: 400;
        }


.journal-filter-row {
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.journal-search-wrapper {
    flex: 1;
}

    .journal-search-wrapper input {
        width: 100%;
    }

.journal-filter-btn {
    width: 70px;
    min-width: 70px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.journal-filters-card {
    padding: 14px 10px 12px 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.journal-more-filters-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1.9fr 1.9fr auto;
    gap: 14px;
    align-items: end;
}

.journal-filter-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.journal-date-range-group,
.journal-amount-range-group {
    min-width: 0;
}

.journal-date-range-inputs,
.journal-amount-range-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.journal-date-input-wrap,
.journal-amount-input-wrap {
    position: relative;
}

    .journal-date-input-wrap .input-fields,
    .journal-amount-input-wrap .input-fields {
        width: 100%;
        height: 32px;
        border-radius: 4px;
    }

    .journal-date-input-wrap::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background: url('/images/cal.png') no-repeat center;
        background-size: contain;
        pointer-events: none;
        opacity: 0.7;
    }

    .journal-date-input-wrap input[type="date"] {
        padding-right: 36px;
    }

        .journal-date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 0;
            position: absolute;
            right: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

.journal-currency-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #7b7b7b;
    line-height: 1;
    pointer-events: none;
}

.journal-amount-input {
    padding-left: 32px !important;
}

.journal-filter-actions {
    display: flex;
    align-items: end;
    gap: 10px;
}

    .journal-filter-actions .apply-new-btn,
    .journal-filter-actions .reset-new-btn {
        height: 32px;
        min-width: 94px;
        padding: 0 16px;
        border-radius: 4px;
    }

.journal-table-card {
    padding: 14px 14px 18px 14px;
    min-height: 405px;
}

.journal-section-title {
    margin: 18px 0 16px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

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

.journal-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

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

    .journal-table tbody td {
        padding: 20px 16px;
        font-size: 13px;
        color: #2f2f2f;
        border-bottom: 1px solid #e6e6e6;
        vertical-align: middle;
    }

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

.journal-entry-code {
    font-weight: 700;
    color: #2f2f2f;
}

.journal-money {
    font-weight: 700;
    color: #111827;
}

.journal-status-pill {
    min-width: 54px;
    height: 14px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
}

.posted-pill {
    background: #cfe8cf;
    color: #33a852;
}

.draft-pill {
    background: #fae8c4;
    color: #f59e0b;
}

.journal-stats-grid {
    margin-top: 20px;
}

    .journal-stats-grid .view-stat-card {
        min-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

        .journal-stats-grid .view-stat-card h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #111827;
        }

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

        .journal-stats-grid .view-stat-card span {
            font-size: 12px;
            font-weight: 400;
        }
/* ===============================
   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-row-space {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px; /* small gap before search */
    margin-top:10px;

}

.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: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

/* 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: var(--bg-card);
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

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

.donor-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background:none;
    color: var(--text-inverse);
    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: var(--text-primary);
}

.donor-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

    .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 {
    background-color: var(--bg-card);
    position: absolute;
    top: 32px;
    right: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 190px;
    box-shadow: var(--shadow-md);
    z-index: 50;
    padding: 4px 0;
}

.donor-menu-item {
    all: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    box-sizing: border-box;
}

    .donor-menu-item:hover {
        background: var(--bg-hover);
        border-radius: 4px;
    }

    .donor-menu-item span,
    .donor-menu-item svg,
    .donor-menu-item img {
        font-size: 14px;
        width: 16px;
        text-align: center;
        display: block;
        vertical-align: middle;
        pointer-events: none;
    }

    .donor-menu-item + .donor-menu-item {
        margin-top: 2px;
    }

    .donor-menu-item.danger {
        color: #dc2626;
    }

        .donor-menu-item.danger:hover {
            background: #fee2e2;
            border-radius: 4px;
        }

.donor-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

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

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

.donor-count {
    font-size: 12px;
    color: var(--text-secondary);
}

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

    .more-btn svg {
        width: 18px;
        height: 18px;
        fill: var(--text-secondary);
    }

/* ===== Record Donation Modal Backdrop ===== */
.rd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--rd-backdrop-bg);
    z-index: 1000;
}

/* ===== Modal Container ===== */
.rd-donation-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background: var(--bg-card); /* reused */
    border-radius: 14px;
    padding: 20px;
    z-index: 1001;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

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

/* ===== 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: var(--rd-avatar-bg);
    color: var(--rd-avatar-text);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Donation Card ===== */
.rd-donation-card {
    position: relative;
    background: var(--bg-card-soft); /* reused */
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border-color);
}

.rd-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-amount-color);
}

.rd-meta {
    font-size: 12px;
    color: var(--rd-meta-color);
    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;
}

/* Outline button */
.rd-outline-btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    border: 1px solid var(--rd-outline-border);
    background-color: var(--rd-outline-bg);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rd-outline-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .rd-outline-btn:hover {
        background-color: var(--rd-outline-hover-bg);
        border-color: var(--rd-outline-hover-border);
    }

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

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

/* Send button */
.rd-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--rd-send-border);
    background: var(--rd-send-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .rd-send-btn svg {
        width: 18px;
        height: 18px;
        color: var(--rd-send-icon);
    }

    .rd-send-btn:hover {
        background: var(--rd-send-hover-bg);
        border-color: var(--rd-send-hover-border);
    }

/* Record button */
.rd-record-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s ease;
}

    .rd-record-btn:hover {
        background: var(--bg-hover);
    }

/* Donor card */
.donor-details-card {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    background-color: rgba(217, 217, 217, 0.7);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

    .donor-details-card .org-name {
        font-weight: bold;
        font-size: 14px;
        color: var(--text-primary);
    }

    .donor-details-card .donor-info {
        font-weight: normal;
        font-size: 12px;
        color: var(--text-secondary);
    }

/* Mobile */
@media (max-width: 640px) {
    .donor-details-card {
        padding: 10px;
        gap: 4px;
    }

        .donor-details-card .org-name {
            font-size: 13px;
        }

        .donor-details-card .donor-info {
            font-size: 11px;
        }
}

.text-grey-box {
    display: inline-flex; /* better alignment */
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    min-width: 18px; /* keeps it neat for single digits */
    height: 18px; /* consistent height */
    padding: 0 5px; /* slight horizontal breathing space */
    background-color: #d3d3d3;
    color: #000;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1; /* removes extra vertical spacing */
}

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


/* 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: 4px;
    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 */
}


.revenue-summary {
    margin: 24px 0 18px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.summary-card {
    background: var(--summary-card-bg);
    border-radius: 10px;
    min-height: 86px;
    padding: 18px 18px 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.summary-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--summary-label-color);
    margin-bottom: 10px;
    line-height: 1.2;
}

.summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--summary-value-color);
    line-height: 1.2;
}
    .summary-value.paid {
        color: #58c26b;
    }

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

/* Order Summary Section */
.order-summary-block {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

/* Each row */
.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

/* Left text */
.order-summary-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Right amount */
.order-summary-amount {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* Optional divider between rows */
.order-summary-row:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}
/*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;
}

/* Backdrop */
/* Backdrop */
.revenue-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--revenue-backdrop-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 24px;
    overflow-y: auto;
}

/* Modal */
.revenue-modal-box {
    background: var(--revenue-modal-bg);
    width: 100%;
    max-width: 610px;
    border-radius: 22px;
    padding: 32px 32px 34px;
    box-sizing: border-box;
    box-shadow: var(--revenue-modal-shadow);
    border: 1px solid var(--revenue-modal-border);
    animation: fadeIn 0.25s ease-out;
}

/* Header */
.revenue-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.revenue-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--revenue-modal-title-color);
}
.revenue-close-btn {
    background: transparent;
    border: none;
    font-size: 30px;
    line-height: 1;
    color: var(--close-btn-color); /* ✅ dynamic */
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}
.revenue-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.revenue-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Labels */
.revenue-modal-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--revenue-modal-title-color);
    margin: 0;
}

.revenue-radio-card {
    flex: 1;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

    .revenue-radio-card:hover {
        border-color: var(--border-strong);
        background: var(--bg-hover);
    }

    .revenue-radio-card.active {
        border-color: var(--border-strong);
        background: var(--bg-card);
    }

.revenue-radio-content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

    .revenue-radio-content input[type="radio"] {
        margin: 0;
        width: 16px;
        height: 16px;
        accent-color: var(--text-primary);
        flex-shrink: 0;
    }

    .revenue-radio-content span {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-primary);
        line-height: 1;
        display: flex;
        align-items: center;
    }

/* Inputs */
.revenue-modal-input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    font-size: 14px;
    color: var(--text-primary);
    box-sizing: border-box;
    outline: none;
}

    .revenue-modal-input:focus {
        border-color: var(--border-strong);
        background: var(--bg-card);
    }

    .revenue-modal-input::placeholder {
        color: var(--text-muted);
    }

/* Select wrapper */
.revenue-select-wrapper {
    position: relative;
}

    .revenue-select-wrapper .revenue-modal-input {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 42px;
        cursor: pointer;
    }

    .revenue-select-wrapper::after {
        content: "⌄";
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-55%);
        font-size: 20px;
        color: var(--text-primary);
        pointer-events: none;
    }

/* Textarea */
.revenue-modal-textarea {
    min-height: 84px;
    height: 84px;
    padding: 14px;
    resize: none;
    font-family: inherit;
}

/* Button */
.revenue-modal-submit-btn {
    margin-top: 10px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .revenue-modal-submit-btn:hover {
        background: var(--primary-hover);
    }

    .revenue-modal-submit-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* BACKDROP */
.donation-ui-backdrop {
    position: fixed;
    inset: 0;
    background: var(--donation-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 80px 0;
}

/* MODAL BOX */
.donation-ui-box {
    width: 520px;
    background: var(--donation-modal-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--donation-modal-shadow);
    color: var(--donation-modal-text);
}

/* HEADER */
.donation-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
    padding: 0 20px;
}

.donation-ui-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--donation-title-color);
}

.donation-ui-text-muted {
    font-size: 13px;
    color: var(--donation-muted-color);
}

/* CLOSE BUTTON */
.donation-ui-close-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--donation-close-color);
}

/* CARD */
.donation-ui-card {
    background: var(--donation-card-bg);
    border-radius: 10px;
    padding: 18px;
    margin-top: 15px;
    box-shadow: var(--donation-card-shadow);
    border: 1px solid var(--donation-card-border);
}

/* AMOUNT SECTION */
.donation-ui-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.donation-ui-amount {
    font-size: 28px;
    font-weight: bold;
    margin: 5px 0 0;
}

/* STATUS BADGE */
.donation-ui-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

    .donation-ui-status.paid {
        background: #34c759;
        color: white;
    }

    .donation-ui-status.pending {
        background: #ffcc00;
    }

    .donation-ui-status.failed {
        background: #ff3b30;
        color: white;
    }

/* USER INFO */
.donation-ui-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.donation-ui-avatar {
    width: 48px;
    height: 48px;
    background: #1c2a44;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* 👈 white text */
    font-weight: bold; /* 👈 bold text */
    font-size: 16px; /* 👈 optional for better look */
}

/* SECTION TITLE */
.donation-ui-card span {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* DETAILS GRID */
.donation-ui-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 12px;
}

    .donation-ui-details label {
        font-size: 12px;
        color: #8a8a8a;
    }

    .donation-ui-details strong {
        display: block;
        margin-top: 4px;
        font-weight: 600;
    }

/* FOOTER BUTTONS */
.donation-ui-footer {
    display: flex;
    gap: 12px;
    margin-top: 80px;
    margin-top: 40px;
}

.donation-ui-half {
    flex: 1;
}

/* BUTTONS */
.donation-ui-btn-cancel {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .donation-ui-btn-cancel:hover {
        background: var(--bg-card-soft);
        border-color: var(--border-strong);
    }

.donation-ui-btn-submit {
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .donation-ui-btn-submit:hover {
        background: var(--primary-hover);
    }

/* Validation Message */
.revenue-modal-validation {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-card);
    color: var(--primary);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    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: var(--pay-card-bg);
    border-radius: 12px;
    padding: 18px 20px;
}

    /* Label text */
    .pay-stat-card small {
        display: block;
        font-size: 12px;
        color: var(--pay-label-color);
        margin-bottom: 6px;
    }

/* Value */
.pay-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--pay-value-color);
}

/* Net salary card */
.pay-net-card {
    background: var(--pay-card-bg);
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
    margin: 18px 0;
}

    .pay-net-card small {
        display: block;
        font-size: 12px;
        color: var(--pay-label-color);
        margin-bottom: 6px;
    }

.pay-net-value {
    font-size: 34px;
    font-weight: 800;
    color: var(--pay-value-color);
}
.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*/
/*................*/

.adjustment-box {
    margin-top: 15px;
    padding: 12px;
    border-radius: 10px;
    background: #f9fafb;
}

.adjustment-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

    .adjustment-actions button {
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        background: white;
        cursor: pointer;
    }

.adjustment-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.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: 0px; /* 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;
        margin-top:2px;
        margin-bottom:0px;
    }

.payment-status {
    font-weight: bold;
    color: var(--text-primary);
}

.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;
}

/* Button with icon + text */
.btn-prim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--btn-prim-bg);
    color: var(--btn-prim-text);
    font-size: 14px;
    font-weight: 800;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-prim:hover {
        transform: translateY(-1px);
    }

    .btn-prim:active {
        transform: scale(0.98);
    }
/* PAY button = variant of btn-prim */
.btn-pay {
    background: #1e293b; /* dark navy */
    color: #ffffff;
    border: none;
}

    /* hover */
    .btn-pay:hover {
        background: #0f172a;
    }

    /* active */
    .btn-pay:active {
        background: #020617;
    }

/*//////////////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;
    }

.text{
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 14px;
    color: #848181;
}

    .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%;
    margin-bottom: 10px;
}

.donor-form-group {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 0;
}

.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 GRID */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 28px;
    padding: 22px 18px 22px 30px;
}

/* CARD */
.product-card {
    width: 315px;
    min-height: 235px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* IMAGE */
.product-image {
    width: 100%;
    height: 90px;
    border-radius: 6px;
    background: var(--bg-card-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .product-image img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

/* NAME */
.product-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 3px 0;
}

/* QTY + PRICE */
.qty-price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
}

.product-qty {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.2;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
    text-align: right;
}

/* ACTIONS */
.product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

/* EDIT BUTTON */
.btn-edit {
    margin-top: 3px;
    margin-bottom: 3px;
    flex: 1;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    padding: 0 12px;
    cursor: pointer;
    transition: 0.2s ease;
    font-size: medium;
}

    .btn-edit:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }

/* DELETE BUTTON */
.btn-delete {
    width: 36px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--danger-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: 0.2s ease;
}

    .btn-delete:hover {
        background: var(--danger-hover-bg);
        border-color: var(--border-strong);
    }

    /* ICONS */
    .btn-edit svg,
    .btn-delete svg {
        width: 16px;
        height: 16px;
    }

    .btn-delete img {
        width: 16px;
        height: 16px;
        filter: var(--delete-icon-filter);
    }

.btn-edit:hover svg {
    stroke: var(--text-primary);
}

.btn-delete:hover svg {
    stroke: var(--danger-color);
}


/* REMOVE OLD EXTRA LAYOUT */
.price-delete {
    display: unset;
}

.inline-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/*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;
    }


.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-new-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: inline-block; /* key */
    width: fit-content; /* adjusts width */
    height: auto; /* adjusts height */
}

.stat-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.table-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

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

    .filters input {
        flex: 1;
        min-width: 250px;
        background: var(--bg-input);
        color: var(--text-primary);
        border: 1px solid var(--border-strong);
    }

    .filters select {
        width: 160px;
        background: var(--bg-input);
        color: var(--text-primary);
        border: 1px solid var(--border-strong);
    }

/* Table */
.data-table {
    margin-top: 16px;
    width: 100%;
    border: 1px solid var(--border-strong);
    border-collapse: collapse;
}

    /* Header */
    .data-table th {
        background-color: var(--bg-hover);
        color: var(--text-primary);
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid var(--border-strong);
    }

    /* Rows */
    .data-table td {
        border-bottom: 1px solid var(--border-strong);
        padding: 8px;
        color: var(--text-primary);
    }

    /* 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 var(--border-strong);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    background: var(--bg-card-soft);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .upload-box:hover {
        background: var(--bg-hover);
        border-color: var(--primary);
    }

.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: var(--text-primary);
}

.upload-box span {
    font-size: 12px;
    color: var(--text-secondary);
}

.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 */
}


/* 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 var(--border-color);
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    background: var(--bg-card);
}

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

.category-name {
    font-weight: 600;
    color: var(--text-primary);
}

.subcategory-count {
    color: var(--text-secondary);
    font-size: 13px;
}

.chevron {
    font-size: 20px;
    color: grey;
    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;
    margin: 0;
}

.subcategory-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.1;
}

.subcategory-name {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.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 {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 12px;
}
.po-meta-primary {
    margin: 2px 0 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280; /* light grey */
    line-height: 1.2;
}

.po-meta-secondary {
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af; /* lighter grey */
    line-height: 1.2;
}
.status.pending {
    background: #FEC739;
    color: #ffffff;
}

.muted-text {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

.review-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    z-index: 999;
}
.review-bill-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    max-width: calc(100vw - 48px);
    background: var(--review-bill-modal-bg);
    border-radius: 10px;
    padding: 20px 20px 20px 20px;
    box-shadow: var(--review-bill-modal-shadow);
    z-index:3000;
    overflow-y: auto;
    max-height: 90vh;
    border: 1px solid var(--review-bill-modal-border);
}

.review-bill-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

    .review-bill-header h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: var(--review-bill-title-color);
        line-height: 1.2;
    }

.review-bill-preview {
    width: 100%;
    max-height: 600px; /* grows to 2 images then scrolls */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

/* each attachment block */
.preview-item {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    /* separator between attachments */
    .preview-item:not(:last-child) {
        border-bottom: 3px dashed var(--border-color);
    }

    /* image/pdf sizing */
    .preview-item img,
    .preview-item iframe,
    .preview-item embed {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* upload icon */
.review-bill-preview img.upload-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .review-bill-preview {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .review-bill-preview {
        height: 140px;
    }
}

.review-bill-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
    margin-bottom: 30px;
}

    .review-bill-details label {
        font-size: 12px;
        color: var(--text-secondary);
        display: block;
        margin-bottom: 4px;
    }

    .review-bill-details strong {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .review-bill-details .full {
        grid-column: span 2;
    }

.review-bill-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 28px;
}

    .review-bill-actions .btn-danger-outline {
        height: 32px;
        border-radius: 10px;
        font-weight: 500;
    }

    .review-bill-actions .btn-primary {
        height: 35px;
        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: var(--text-secondary);
    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%;
    max-height: 80vh; /* limit height to 80% of viewport */
    background: var(--bg-card);
    border-radius: 18px;
    padding: 30px 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    z-index: 1000;
    overflow-y: auto; /* enable vertical scrolling */
}

.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;
        color: var(--text-primary);
    }

.close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-primary);
    padding: 4px;
}

.create-expense-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .create-expense-body label {
        font-size: 13px;
        margin-bottom: 4px;
        color: var(--text-secondary);
    }

    .create-expense-body input,
    .create-expense-body select,
    .create-expense-body textarea {
        margin-bottom: 12px;
        background: var(--bg-input);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .create-expense-body textarea {
        height: 80px;
        padding-top: 10px;
        resize: none;
    }

.full-width {
    width: 100%;
}

.reports-date-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    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;
        color: var(--text-primary);
    }

.reports-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.reports-date-field label {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}

.reports-date-field input {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    padding: 0 12px;
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Summary */
.reports-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.reports-summary-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

    .reports-summary-card span {
        font-size: 12px;
        color: var(--text-secondary);
        display: block;
    }

    .reports-summary-card strong {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
    }

/* Icons */
.summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

    /* softer colors for dark mode */
    .summary-icon.income {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }

    .summary-icon.expense {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

/* Report row */
.report-row {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

    .report-row:hover {
        background: var(--bg-hover);
    }

    /* Avatar */
    .report-row .avatar {
        background: var(--bg-card-soft) !important;
        color: var(--text-secondary);
    }

        .report-row .avatar img {
            width: 18px;
            opacity: 0.8;
        }

    /* Text */
    .report-row strong {
        font-size: 14px;
        color: var(--text-primary);
    }

    .report-row .muted-text {
        font-size: 8px;
        color: var(--text-secondary);
    }

/* 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;
    font-weight: 600;
}

    .inactive-toggle.active {
        background: #111827;
        color: #fff;
    }

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

.staff-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

/* TOP */
.staff-top {
    display: flex;
    justify-content: space-between;
}

.staff-left {
    display: flex;
    gap: 12px;
}
.ux-table-9f3a {
    width: 100%;
    border-collapse: collapse;
}

    .ux-table-9f3a th,
    .ux-table-9f3a td {
        padding: 8px 12px;
        text-align: left;
    }

    /* thin header */
    .ux-table-9f3a thead th {
        background: rgba(0, 0, 0, 0.06);
        color: #000;
        font-weight: 600;
        padding: 6px 12px;
        border-bottom: 1px solid #e5e5e5;
    }

    /* body rows */
    .ux-table-9f3a tbody td {
        border-bottom: 1px solid #f1f1f1;
    }

/* divider */
.ux-table-9f3a__divider td {
    padding: 0;
    height: 8px;
    border-bottom: 1px solid #dcdcdc;
}

/* default last row */
.ux-table-9f3a__default td {
    font-weight: 600;
    background: #fafafa;
}
.review-new-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(2px);
    z-index: 999;
}

.review-new-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content; /* 🔑 grows with content */
    max-width: min(1500px, 90%); /* 🔑 stops at 1200 */
    min-width: 800px;
    background: var(--bg-card);
    max-height: 70vh;
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    z-index: 1000;
    overflow-y: auto;
}
.staff-avatar {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--text-inverse);
    display: flex;
    margin-right:8px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.staff-card-new {
    width: calc(100% - 24px);
    margin-left: 24px;
    margin-bottom: 14px;
    padding: 15px 40px 8px 40px;
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.staff-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.staff-role {
    font-size: 12px;
    color: var(--text-secondary);
}
    .staff-role.status-paid {
        color: #63BE6B; /* green */
    }

    .staff-role.status-open {
        color: #FEC739; /* yellow */
    }

    .staff-role.status-overdue {
        color: #EF4444; /* red */
    }
.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;
    color: var(--text-secondary);
}

/* DIVIDER */
.staff-divider {
    height: 1px;
    background: var(--border-color);
    margin: 12px 26px 8px 36px;
}

/* BOTTOM */
.staff-bottom {
    display: flex;
    align-items: center;
}

.staff-email,
.staff-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9ca3af;
}

.staff-email{
    margin-left:36px;
}

.staff-phone {
    margin-left: auto;
    color: #9ca3af; /* light gray */
}

    .staff-email svg
    {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8px;
    }

.staff-phone svg {
    width: 18px; /* bigger */
    height: 18px; /* bigger */
    stroke: currentColor;
    fill: none;
    stroke-width: 2.0px; /* bolder */
}

/* 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: var(--text-secondary);
}

/* POPUP MENU */
.staff-menu-popup {
    position: absolute;
    top: 28px;
    right: 0;
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    padding: 6px;
    width: 170px;
    z-index: 50;
}

    .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: var(--text-primary);
    }

        .staff-menu-popup button:hover {
            background: var(--bg-hover);
        }

@media (max-width: 500px) {
    .staff-menu-popup {
        right: 0;
        left: auto;
        max-width: 85vw;
    }
}


.custom-checkbox-wrapper input {
    display: none;
}

/* Circle style */
.custom-checkbox-circle {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.5px solid black;
    border-radius: 50%; /* perfect circle */
    background-color: white;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    vertical-align: middle;
}

/* Tick mark using pseudo-element */
.custom-checkbox-wrapper input:checked + .custom-checkbox-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* Filled circle on check */
.custom-checkbox-wrapper input:checked + .custom-checkbox-circle {
    background-color: black;
    border-color: black;
}

    /* DANGER ITEM */
    .staff-menu-popup .danger {
        color: #dc2626;
    }

        .staff-menu-popup .danger:hover {
            background: #fee2e2;
        }

.staff-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-register {
    color: #16a34a;
    font-weight: 600;
    cursor: pointer;
}

.staff-new-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right:26px;
    margin-top:18px;
}

.staff-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.header-text h3 {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.header-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.salary-tabs {
    display: flex;
    background: var(--salary-tabs-bg);
    border-radius: 12px;
    padding: 9px;
    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: var(--text-secondary);
}

    .salary-tab.active {
        background: var(--bg-card);
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
    }

.salary-chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

    .salary-chip.salary {
        background: var(--salary-chip-salary-bg);
        color: var(--salary-chip-salary-text);
    }

    .salary-chip.bonus,
    .salary-chip.allowance {
        background: var(--salary-chip-success-bg);
        color: var(--salary-chip-success-text);
    }

.salary-status.paid {
    background: var(--salary-status-paid-bg);
    color: var(--salary-status-paid-text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.pay-btn {
    background: #f3f4f6; /* light gray background */
    color: #374151; /* dark gray text */
    border: 1px solid #e5e7eb; /* soft border */
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
    .pay-btn:hover {
        background: #e5e7eb;
    }
.salary-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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;
    color: var(--text-primary);
}

.stat-card p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    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 var(--border-strong);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}

.amount-range-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

    .amount-range-group input {
        width: 100%;
        box-sizing: border-box;
    }

.three-inputs-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}

    .three-inputs-group input {
        width: 100%;
        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: var(--text-secondary);
        margin-bottom: 5px;
        display: block;
    }

    .more-filters-grid input {
        width: 100%;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background: var(--bg-input);
        color: var(--text-primary);
    }

.more-filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background: var(--btn-bg);
    color: var(--text-primary);
    cursor: pointer;
    height: 36px;
    width: 150px;
    margin-left: 5px;
}

.apply-btn {
    padding: 12px 18px;
    border-radius: 4px;
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    cursor: pointer;
    width: 150px;
    margin-left: 5px;
    height: 50px;
}


/* Primary button */
.apply-new-btn {
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    padding: 12px 18px;
    border-radius: 4px;
    border: none;
    background: #17223A;
    color: var(--text-inverse);
    cursor: pointer;
    width: 150px;
    margin-left: 8px;
    height: 42px;
}

/* Reset button */
.reset-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    height: 42px;
    width: 150px;
    transition: all 0.2s ease;
}

    /* Hover (subtle, no ugly gray flash) */
    .reset-new-btn:hover {
        border-color: var(--border-strong);
        background: var(--bg-hover);
    }

/* Size override */
.new.apply-new-btn,
.new.reset-new-btn {
    width: auto; /* smaller width */
    height: 36px; /* slightly shorter */
    padding: 8px 20px; /* tighter padding */
    font-size: 14px; /* optional: smaller text */
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
    .new.reset-new-btn:hover {
        background: #17223A;
        color: #ffffff;
    }
        .new.reset-new-btn:hover img {
            filter: brightness(0) invert(1);
        }
    .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;
    }

.category-badge {
    display: inline-block;
    max-width: 180px;
    background: #d1fae5;
    color: #065f46;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
}
    /*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: 36px;
        padding: 0 16px;
        background-color: #ffff;
        color: #17223A;
        border: 1px solid #dcdfe5;
        border-radius: 4px;
        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: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    z-index: 1000;
}

.profile-header {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header-icon {
    width: 24px;
    height: 24px;
}

.page-title {
    margin: 0;
    color: var(--text-primary);
}

.profile-header small {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
}

.profile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .profile-menu li {
        display: flex;
        padding: 10px 14px;
        cursor: pointer;
        gap: 10px;
        align-items: center;
        color: var(--text-primary);
        transition: background 0.2s ease;
    }

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

.profile-menu li:hover {
    background: var(--bg-hover);
}

.profile-menu .logout {
    color: #ef4444;
    border-top: 1px solid var(--border-color);
}
 
    /* 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;
}
/*.pay-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
}
.pay-stat-card small,
.pay-net-card small {
    display: flex;
    align-items: center;
    gap: 6px;
}*/
.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;
        }

/* 🔽 Mobile Fix */
@media (max-width: 500px) {

    .user-modal {
        max-width: 90%;
        padding: 15px;
        gap: 12px;
    }

    .auth-title3 {
        margin-top:8px;
        font-size: 16px;
        font-family: 'Megabyte', sans-serif;
        font-weight: 400; /* 🔥 force normal */
    }

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

    .popup-buttons2 {
        flex-direction: column; /* 🔥 stack buttons */

    }

        .popup-buttons2 button {
            width: 100%;
            font-size: 13px;
            padding: 7px;
        }
}

.popup-buttons2 {
    display: flex;
    flex-direction: column;
    gap: 10px; /* controls space between buttons */

}
    /* 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 ===== */
.profile-summary-card--wide {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    min-height: 124px;
}

/* Left section */
.profile-summary-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Avatar wrapper */
.profile-summary-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Avatar */
.profile-summary-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    flex-shrink: 0;
}

.profile-avatar-img,
.profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-letter {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
}

/* Camera icon */
.profile-summary-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.profile-summary-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.profile-summary-camera {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 3;
    cursor: pointer;
    line-height: 1;
    justify-content: center;
}

    .profile-summary-camera img {
        width: 10px;
        height: 10px;
        object-fit: contain;
        display: block;
    }

.profile-camera-icon {
    width: 10px;
    height: 10px;
    object-fit: contain;
    display: block;
    transform: translateY(-0.5px); /* tiny optical adjustment */
}
.profile-summary-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

/* Name */
.profile-summary-name {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
}

/* Email */
.profile-summary-email {
    margin: 0;
    font-size: 12px;
    color: #111827;
    line-height: 1.3;
}

/* Badge + org */
.profile-summary-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 6px;
}

.profile-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffe4e6;
    color: #ef4444;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    width: fit-content;
}

.profile-summary-org {
    font-size: 12px;
    color: #374151;
    line-height: 1.3;
}
    /* 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;
    }
.app-shell label,
.app-shell .app-label {
    margin-bottom: 6px;
    display: block;
    color: var(--text-secondary) !important;
    font-size: 13px;
    font-weight: 500;
}
    .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 Card */
.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 20px;
    box-shadow: var(--shadow-md);
}

.settings-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

    .settings-card-header h3 {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }

/* Rows */
.settings-card-row {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

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

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

.settings-icon {
    width: 32px;
    height: 32px;
    background: var(--bg-card-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-text strong {
    font-size: 14px;
    color: var(--text-primary);
}

.settings-text p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

/* Hover */
.settings-clickable {
    cursor: pointer;
}

    .settings-clickable:hover {
        background: var(--bg-hover);
    }

/* Arrow */
.settings-arrow {
    font-size: 18px;
    color: var(--text-muted);
}

/* Toggle */
.settings-toggle {
    position: relative;
    width: 42px;
    height: 22px;
}

    .settings-toggle input {
        opacity: 0;
    }

    .settings-toggle span {
        position: absolute;
        inset: 0;
        background: var(--border-color);
        border-radius: 999px;
        transition: 0.2s;
    }

        .settings-toggle span::before {
            content: "";
            position: absolute;
            height: 18px;
            width: 18px;
            left: 2px;
            top: 2px;
            background: var(--bg-card);
            border-radius: 50%;
            transition: 0.2s;
        }

    /* Active toggle */
    .settings-toggle input:checked + span {
        background: var(--primary);
    }

        .settings-toggle input:checked + span::before {
            transform: translateX(20px);
        }
.profile-info-input {
    width: 100%;
    height: 28px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f3f4f6;
    font-size: 13px;
    color: #111827;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
}

    .profile-info-input:focus {
        border-color: #cbd5e1;
        background: #f3f4f6;
        outline: none;
        box-shadow: none;
    }
.profile-info-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}
    .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 var(--border-color);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 16px;
    transition: background 0.2s ease, color 0.2s ease;
}

    .plaid-connect-btn:hover {
        background: var(--bg-card-soft);
    }

/* Divider OUTSIDE card */
.manual-divider-outside {
    margin-bottom: 8px;
    margin: 14px 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

    .manual-divider-outside::before,
    .manual-divider-outside::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

    .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;
    }

.fullscreen-card {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--fullscreen-card-shadow);
    padding: 20px;
    overflow: auto;
    z-index: 1000;
}

.fab_penny {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1000;
}
.popup-panel {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 360px;
    height: 590px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    overflow-y: auto; /* enable scroll when needed */
    overflow-x: hidden;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: popupFade 0.2s ease-out;
}
/* close button */
.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}

/* optional animation */
@keyframes popupFade {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .add-event-panel .panel-card {
        width: 90%;
        padding: 16px;
    }

    .color-preview {
        height: 30px;
    }

    .color-square {
        height: 14px;
    }
}

@media (max-width: 480px) {
    .add-event-panel .panel-card {
        width: 95%;
        padding: 12px;
    }

    .color-preview {
        height: 28px;
    }

    .color-square {
        height: 12px;
    }
}


    /* ===== 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: 35px;
        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: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    padding: 8px 24px;
}

/* ===== Table ===== */
.tags-table {
    width: 100%;
    border-collapse: collapse;
}

    .tags-table thead th {
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        color: #848181;
        padding: 14px;
        border-bottom: 1px solid var(--border-color); /* full width line */
    }

    .tags-table thead th:first-child {
            text-align: left; /* Tag column stays left */
    }

    .tags-table tbody td {
        padding: 16px 14px;
        font-size: 14px;
        color: #848181;
        text-align: center;
        /*        border-bottom: 1px solid var(--border-color);*/
        vertical-align: middle;
    }

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

    .tags-table tbody td:first-child {
        text-align: left; /* Tag column stays left */
    }
    .tags-table tbody td:nth-child(4) {
        text-align: center;
    }

.tags-table tbody td:nth-child(4) button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }

        .tags-table tbody td:nth-child(4) button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto; /* 🔥 ensures perfect centering */
        }

.toggle-wrapper {
    display: flex;
    justify-content: center; /* 🔥 centers whole group */
    align-items: center;
    gap: 8px;
}
/* ===== 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: var(--bg-overlay);
    z-index: 5000;
}

/* =========================
   TAG MODAL CONTAINER
========================= */
.tag-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    z-index: 5001;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* =========================
   HEADER
========================= */
.tag-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.tag-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
}

/* =========================
   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: var(--text-secondary);
    margin-bottom: 6px;
}

.tag-modal-input,
.tag-modal-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-size: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
}
    /* =========================
   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: 50%;
    border: none;
    background: #17223A !important;
    color: #ffffff !important;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
    .nav-btn img.arrow-img {
        width: 16px; /* Adjust arrow size */
        height: 16px;
        display: block;
        object-fit: contain; /* Prevent stretching */
    }

    .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;
    }

.small-button {
    height: 26px;
    width: 140px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 20px;
    border-radius:6px;
}
    .small-button::-webkit-inner-spin-button,
    .small-button::-webkit-outer-spin-button {
        opacity: 1;
        height: 20px;
    }

.small-new-button {
    height: 26px;
    width: auto;
    padding: 0 4px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 6px;
    background: var(--bg-input);
}

.resolve-text {
    font-size: 12px;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* space between text and arrow */
}

    .resolve-text .arrow {
        font-size: 14px;
    }
 



.recon-container {
    width: 340px;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #333;
    /* 👇 Align left */
    margin-left: auto; /* 👉 pushes it right */
    margin-right: 0;
}

/* Optional: if parent is flex, force left */
.parent-wrapper {
    display: flex;
    justify-content: flex-end;
}

.recon-header {
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-bottom: 18px; /* more space */
}

.recon-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 2px 0; /* 👈 increased spacing */
}

    .recon-row .value {
        font-weight: 500;
    }

    .recon-row .negative {
        color: #d32f2f;
    }

.spacer {
    height: 24px; /* 👈 more vertical gap */
}

.divider {
    border-top: 1px solid #ddd;
    margin: 16px 0; /* 👈 more breathing room */
}

.recon-row.total {
    font-weight: bold;
    margin-top: 12px;
}

.logout{
color:red;
}

.info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 50%;
    font-size: 10px;
    margin-right: 6px;
}

.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px; /* 👈 more space before button */
}

.match-btn {
    background: #1f2a44;
    color: white;
    border: none;
    padding: 10px 22px; /* slightly bigger */
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

    .match-btn:hover {
        background: #162033;
    }

.info-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 50%;
    font-size: 10px;
    margin-right: 5px;
}

.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.match-btn {
    background: #1f2a44;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

    .match-btn:hover {
        background: #162033;
    }

        .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;
        }

.calendar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* pushes buttons to the far right */
}

.calendar-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .calendar-action-btn:hover {
        background: #334155;
    }

    .calendar-action-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
/* =========================
   CALENDAR PAGE
========================= */

.calendar-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 22px 22px;
    font-family: Inter, system-ui, sans-serif;
    overflow-x: hidden;
}

.calendar-body {
    position: relative;
}

/* =========================
   HEADER
========================= */

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0 10px;
    margin-bottom: 18px;
}
/* header row must be full width and spaced */
.page-header.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* push actions to the far right */
.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom:-15px;
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.month-title {
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
}

/*.nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    font-size: 16px;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #17223a !important;
}

    .nav-btn:hover {
        background: #e2e8f0;
    }*/

.add-event-btn {
    background: #0f172a;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    .add-event-btn:hover {
        opacity: 0.92;
    }

    .add-event-btn.active {
        opacity: 0.8;
    }

/* =========================
   CALENDAR GRID
========================= */

.calendar-section {
    padding: 6px 0 0;
    transition: width 0.25s ease;
}

    .calendar-section.compressed {
        width: calc(100% - 320px);
    }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px; /* was 26px */
    align-items: start;
}


/* Day headers (Sun..Sat) */
.day-header {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    padding-left: 6px;
}

/* Day cell */
.day-cell {
    min-height: 110px;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}

    .day-cell:hover {
        background: #f8fafc;
    }

/* Day number normal */
.day-number {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

/* TODAY only affects the number (small pill) */
.today {
    background: transparent !important;
}

    .today .day-number {
        background: #0f172a;
        color: #fff;
        padding: 10px 14px;
        border-radius: 12px;
        width: fit-content;
    }

/* Pills look fixed + aligned */
.event-pill {
    display: block; /* important */
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    max-width: 160px; /* keeps it like screenshot */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
}
    /* Colors + left bars */
    .event-pill.pink {
        background: #fce7f3;
        color: #9d174d;
        border-left-color: #db2777;
    }

    .event-pill.green {
        background: #dcfce7;
        color: #166534;
        border-left-color: #16a34a;
    }

    .event-pill.yellow {
        background: #fef9c3;
        color: #854d0e;
        border-left-color: #f59e0b;
    }

    .event-pill.red {
        background: #fee2e2;
        color: #991b1b;
        border-left-color: #ef4444;
    }

    .event-pill.purple {
        background: #ede9fe;
        color: #5b21b6;
        border-left-color: #7c3aed;
    }

    .event-pill.blue {
        background: #dbeafe;
        color: #1d4ed8;
        border-left-color: #2563eb;
    }

/* =========================
 ADD EVENT PANEL (optional)
========================= */
.calendar-body {
    position: relative;
}

/* This is the key wrapper that keeps the panel from sitting in the normal page flow */
.calendar-shell {
    position: relative;
    min-height: 600px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
/* normal: calendar takes full width */
.calendar-section {
    flex: 1;
    width: auto;
}
/* Panel is OUT of layout flow */
.add-event-panel {
    position: static; /* remove absolute */
    width: 320px;
    transform: none;
    height: auto;
    display: none;
}

    /* When open, slide in */
    .add-event-panel.open {
        display: block;
    }

/* Only compress grid when panel is open */
.calendar-section.compressed {
    width: calc(100% - 340px);
}

.panel-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

    /* =========================
   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-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--org-access-title-color);
}

.org-access-card {
    border: 1px solid var(--org-access-card-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--org-access-card-bg);
    padding: 4px;
}

.org-access-header {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    background: transparent;
}

.org-access-name {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--org-access-name-color);
}

.org-access-arrow {
    margin-left: auto;
    font-size: 16px;
    color: var(--org-access-arrow-color);
}

.org-access-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .org-access-checkbox input {
        opacity: 0;
        position: absolute;
        inset: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    /* Outer circle border */
    .org-access-checkbox span {
        width: 12px;
        height: 12px;
        border: 2px solid var(--org-access-checkbox-border);
        border-radius: 50%;
        display: inline-block;
        position: relative;
    }

    /* Inner dot */
    .org-access-checkbox input:checked + span::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 6px;
        height: 6px;
        background: var(--org-access-checkbox-dot);
        border-radius: 50%;
    }

.org-access-children {
    padding: 10px 14px 14px 36px;
}

/* Child checkbox container (same style as parent) */
.org-access-child {
    display: flex;
    align-items: center; /* THIS fixes vertical alignment */
    gap: 10px;
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1; /* prevents text pushing down */
}

  

    .org-access-child input {
        position: absolute;
        opacity: 0;
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
        z-index: 2;
    }

.org-child-circle {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 2px solid #777;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.org-access-child input:checked + .org-child-circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #17223A;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/*//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: flex;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}

.phone {
    display:flex; 
    flex-direction:row;
    align-items:center; 
    border:1px solid #e0e0e0;
    border-radius:6px; 
    background:#f5f5f5; 
    height:35px; 
    width:100%; 
    overflow:hidden;
    margin-bottom:5px;
}
.phone-drop {
   display:flex; 
   align-items:center;
   padding:0 8px;
   min-width:110px;
   max-width:140px; 
   cursor:pointer; 
   gap:6px;
}
.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;
    }

.setup-org-link {
    background: none;
    border: none;
    color: #5a5a5a;
    font-weight: 545;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
}

.setup-org-icon {
    width: 20px;
    height: 20px;
}

/*//responsive*/
@media (max-width: 768px) {
    .donor-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .donor-header-left {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

    .header-actions {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

        .header-actions button {
            flex: 1 1 100%; /* full width buttons on small screens */
        }
}
@media (max-width: 768px) {
    .button-container {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

        .button-container button {
            flex: 1 1 100%; /* full width buttons on mobile */
        }  
}


@media (max-width: 768px) {
    .request-card {
        flex-direction: column;
        align-items: stretch;
    }

        .request-card .price,
        .request-card .primary-btn {
            text-align: left;
            flex: 1 1 100%;
        }

        .request-card .primary-btn {
            margin-top: 8px;
        }

        .request-card .card-body {
            margin-top: 12px;
        }
    .stats-grid {
        grid-template-columns: 1fr; /* single column on tiny screens */
    }
    .more-filters-grid {
        grid-template-columns: 1fr; /* single column for mobile */
    }

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

        .header-actions > div {
            flex: 1 1 100%;
        }

        .header-actions button {
            width: 100%;
        }
    .three-inputs-group {
        flex-direction: column;
        gap: 8px;
    }

        .three-inputs-group button {
            width: 100%; /* full width on mobile */
        }
    .stats-container {
        grid-template-columns: 1fr; /* stack cards vertically */
    }
}
@media (max-width: 768px) {
    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .filters select,
        .filters .send-test-btn {
            width: 100%; /* full width on mobile */
        }

    .switch-org-wrapper {
        padding: 12px;
    }

    .left-contentswitch h1 {
        font-size: 24px;
    }

    .org-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .org-item-left {
        width: 90%;
        gap: 8px;
    }

    
   .org-arrow {
        align-self: flex-end;
    }
      select.global.form-input {
        max-width: 100%;  /* full width on mobile */
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .page-subtitle {
        font-size: 0.875rem;
    }

}

@media (max-width: 600px) {
    .donor-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .donor-add-btn {
        margin-top: 8px;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .page-subtitle {
        font-size: 0.875rem;
    }
}
@media (max-width: 768px) {
    .donor-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .donor-header-left {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

    .header-actions {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

        .header-actions button {
            flex: 1 1 100%; /* full width buttons on small screens */
        }
}
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-left {
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 8px;
    }

    .calendar-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .calendar-action-btn {
        flex: 1 1 auto; /* buttons stretch to available width */
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-title h2 {
        font-size: 1rem;
    }

    .header-title p {
        font-size: 0.75rem;
    }

    .calendar-action-btn {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}
@media (max-width: 768px) {
    .tags-table th,
    .tags-table td {
        padding: 4px 6px;
        font-size: 0.75rem;
    }
}

/* Optional: for very small screens, make table stack */
@media (max-width: 480px) {
    .tags-table,
    .tags-table thead,
    .tags-table tbody,
    .tags-table th,
    .tags-table td,
    .tags-table tr {
        display: block;
        width: 100%;
    }

        .tags-table thead {
            display: none; /* hide headers */
        }

        .tags-table tr {
            margin-bottom: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 6px;
        }

        .tags-table td {
            display: flex;
            justify-content: space-between;
            padding: 4px 8px;
            border: none;
        }

            .tags-table td::before {
                content: attr(data-label);
                font-weight: 500;
                flex: 1;
            }
}
@media (max-width: 600px) {
    .bank-summary-card select {
        font-size: 14px;
        height: 32px;
    }
}


@media (max-width: 768px) {
    .staff-left {
        flex: 1 1 100%;
    }

    .staff-right {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .transaction-title {
        font-size: 14px;
    }

    .transaction-date {
        font-size: 12px;
    }

    .reset-btn {
        font-size: 12px;
        padding: 3px 6px;
    }
}
@media (max-width: 768px) {
    .stat-card {
        padding: 10px;
    }

        .stat-card .title {
            font-size: 14px;
        }

    .summary-content {
        gap: 1px;
    }
}
/* vieworganization*/
/*.................*/
.orga-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

select.global.form-input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orga-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    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: 36px; /* balanced size */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 10px;
    background: #f3f4f6; /* subtle bg so it looks like an icon container */

    flex-shrink: 0; /* prevents shrinking */
}
/* Info */
.orga-info {
    display: flex;
    flex-direction: column;
}

.orga-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.orga-type {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Stats */
.orga-stats {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Tags */
.orga-card-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.orga-role {
    background-color: var(--bg-card-soft);
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

    /* 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: 400px) {
    .add-mode-modal {
        max-width: 90%; /* almost full width */
        padding: 12px;
        gap: 8px;
    }

    .modal-title {
        font-size: 1rem;
    }

    .modal-input {
        font-size: 12px;
        padding: 6px;
    }

    .modal-submit-btn {
        font-size: 12px;
        padding: 6px;
    }

    .modal-close-btn {
        font-size: 16px;
        top: 6px;
        right: 6px;
    }
}

    @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;
    font-family: 'Megabyte', sans-serif;
}

    .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;
        }
    }

@media (max-width: 500px) {
    .stats-grid6 {
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* smaller cards */
    }

    .stat-card {
        padding: 12px;
    }

        .stat-card .title {
            font-size: 13px;
        }
}

@media (max-width: 500px) {

    .staff-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .staff-right {
        display: flex; /* 🔥 required */
        flex-wrap: wrap; /* 🔥 required */
        width: 100%;
        gap: 6px;
        justify-content: flex-start;
    }

    .donor-amount {
        font-size: 13px;
    }

    .transaction-title {
        font-size: 13px;
    }

    .reset-btn {
        flex: 1 1 calc(50% - 6px); /* 🔥 perfect 2 per row */
        font-size: 11px;
        padding: 5px;
        text-align: center;
    }
}

    .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;
}

.custom-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay); /* ✅ */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.custom-modal {
    background: var(--bg-card); /* ✅ */
    width: 400px;
    border-radius: 12px;
    box-shadow: var(--shadow-md); /* ✅ */
    overflow: hidden;
    animation: fadeIn 0.2s ease-in-out;
    border: 1px solid var(--border-color);
}

.custom-modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color); /* ✅ */
    font-weight: 600;
    font-size: 18px;
    color: var(--text-primary); /* ✅ */
}

.custom-modal-body {
    padding: 20px;
    color: var(--text-secondary); /* ✅ */
}

.warning-text {
    color: #ef4444; /* keep red */
    margin-top: 8px;
    font-size: 14px;
}

.custom-modal-footer {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Light button */
.btn-light {
    background: var(--bg-hover); /* ✅ */
    color: var(--text-primary); /* ✅ */
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* Danger button stays same (already good) */
.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
 /* =======================================================
   REUSABLE COMPONENTS
======================================================= */
    /* 1. Toggle Switch */
    .toggle {
        position: relative;
        width: 30px;
        height: 16px;
        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: 12px;
            width: 12px;
            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(14px);
        }
    /* 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;
        }

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

.card {
    background: var(--bg-card);
    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 (DARK MODE READY)
======================================================= */

/* Notification Bar */
.dash.notification-bar {
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 28px;
}

    /* Links */
    .dash.notification-bar a,
    .dash.recent-header a {
        font-size: 12px;
        color: var(--text-secondary);
        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: var(--primary);
            color: var(--text-inverse);
        }

/* Notification layout */
.dash.notification-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Notification icon */
.dash.notification-icon {
    width: 32px;
    height: 32px;
    background: var(--bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dashboard Titles */
.dash.dashboard-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dash.dashboard-subtitle {
    font-size: 14px;
    color:#848181;
    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;
    padding-left: 0;
}
/* Form container spacing */
.change-password-form {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 32px; /* Add space on left and right */
}

/* Label spacing */
.cp-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}
/* Input wrapper */
.cp-input-wrap {
    position: relative;
    width: 100%;
}

/* Input field */
.cp-input {
    width: 100%;
    background-color: rgba(245, 245, 245, 0.6);
    border: 1px solid #000000;
    border-radius: 10px;
    padding: 12px 44px 12px 14px; /* top, right, bottom, left */
    outline: none;
/*    margin-bottom: 14px;*/
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
}

/* Eye button */
.cp-eye-btn {
    position: absolute;
    top: 50%; /* position relative to input wrapper */
    right: 12px;
    transform: translateY(-50%); /* center vertically */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Eye icon */
    .cp-eye-btn img {
        width: 18px;
        height: 18px;
        display: block;
    }
    .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;
    }

/* Cancel button */
.cp-cancel {
    background: #f5f5f5;
    border: 1px solid #bfbfbf;
    border-radius: 6px;
    height: 36px;
    padding: 0 12px; /* horizontal padding only */
    cursor: pointer;
    display: flex;
    align-items: center; /* vertically center */
    justify-content: center; /* horizontally center */
}

/* Save button */
.cp-save {
    background-color: rgba(15, 23, 42, 0.4);
    color: #ffffff;
    border: none;
    height: 36px;
    border: 1px solid #000000;
    padding: 0 12px; /* horizontal padding only */
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center; /* vertically center */
    justify-content: center; /* horizontally center */
}
    .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;
        margin-bottom:3px;
    }

.security-tips-list {
    margin: 14px 0 0;
    padding: 18px; /* unified padding */
    color: #333;
    font-size: 13px;
    line-height: 2.0;
}

.filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom:10px;
    margin-top:6px;
}

.search-wrapper {
    position: relative;
    flex: 1; /* take all available space */
}

    .search-wrapper input {
        width: 100%; /* full width of wrapper */
        padding-left: 28px; /* space for the icon */
        height: 35px;
        border-radius: 4px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        background:none;
    }

    .search-wrapper .search-icon {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
        pointer-events: none;
    }
/* =======================================================
   STATS SECTION
======================================================= */
.dash.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

/* Stat card – softer, lower floating effect */
.dash.stat-card {
    position: relative;
    background: var(--bg-card, #fff);
    border-radius: 8px;
    padding: 14px 16px 16px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), /* main softer shadow */
    0 12px 24px rgba(0, 0, 0, 0.08); /* subtle larger shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 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;
}

    /* Keep colors but soften backgrounds for dark mode */
    .dash.stat-icon.green {
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
    }

    .dash.stat-icon.gray {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .dash.stat-icon.orange {
        background: rgba(249, 115, 22, 0.15);
        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: #22c55e;
    }

    .dash.stat-change.negative {
        color: #ef4444;
    }

/* Stat text */
.dash.stat-card h3 {
    margin-top: 34px;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
}

.dash.stat-card p {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: left;
}

/*//final*/
.reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 38px;
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--btn-bg);
    color: var(--text-primary);
    cursor: pointer;
    justify-self: start;
    transition: all 0.2s ease;
}


/* =======================================================
   QUICK ACTIONS (DARK MODE READY)
======================================================= */

.dash.quick-actions {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

    .dash.quick-actions h4 {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--text-primary);
    }


.dash.actions-row {
    display: flex;
    gap: 24px;
    margin-top: 10px;
}

/* Quick action button */
.dash.quick-btn {
    background-color: var(--bg-input);
    flex: 1;
    background: #eeeeee;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    font-size: 9px;
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s ease;
}

    /* Hover */
    /*.dash.quick-btn:hover {
        background: var(--primary);
        color: var(--text-inverse);
        transform: translateY(-2px);*/ /* subtle lift effect */
        /*box-shadow: var(--shadow-md);
    }*/

        /* Icon invert on hover */
/*        .dash.quick-btn:hover .dash.quick-icon img {
            filter: brightness(0) invert(1);
            transition: filter 0.2s ease;
        }
*/
/* =======================================================
   RECENT DONATIONS (DARK MODE READY)
======================================================= */

.dash.recent-donations {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.dash.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-weight: bold;
}

    .dash.recent-header h5 {
        font-size: 14px;
        font-weight: bold;
        color: var(--text-primary);
        margin: 0;
    }

/* Donation row */
.dash.donation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f2f2;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    border: 2px solid #eae8e8; /* darker border color */
  
}

/* =======================================================
   RECENT DONATIONS (DARK MODE READY)
======================================================= */

.dash.recent-donations {
    background: white;
    border: 1px solid var(--border-color);
    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: var(--text-primary);
        margin: 0;
    }

/* Donation row */
.dash.donation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f3f2f2;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

/* Donation left */
.dash.donation-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text */
.dash.donation-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.dash.donation-info small {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Donation right */
.dash.donation-right {
    text-align: right;
}

.dash.amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Donation left */
.dash.donation-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text */
.dash.donation-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.dash.donation-info small {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Donation right */
.dash.donation-right {
    text-align: right;
}

.dash.amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
/* =======================================================
   STATUS PILLS
======================================================= */

.dash.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    padding: 0 6px; /* no vertical padding, only horizontal */
    border-radius: 12px;
    text-transform: capitalize;
    cursor: default;
    line-height: 1;
    height: 1.2em; /* height just enough for text */
    width: 7ch; /* width fits longest text */
    box-sizing: border-box;
}

        .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-meta2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #e5e7eb;
    color: #111827;
    width:60px;
    margin-top: 4px;
}
.revenue-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    height: 20px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #e5e7eb; 
    color: #111827;
    margin-top: 4px;
}
/*view donor */
/*..............*/

/* Ensure borders & padding don't break height */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Common button styles */
.donor-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
}

/* Donor Add Button */
.donor-add-btn {
    background: var(--primary); 
    color: var(--text-inverse); /* ✅ */
    border: none;
}

/* Reset Button */
/*.reset-btn {
    background: white;*//* ✅ */
    /*border: 1px solid var(--border-color);*/ /* ✅ */
    /*color: var(--text-primary);*/ /* ✅ */
/*}*/

/* Icon */
.donor-add-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
/* Merge Modal */
.merge-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary);
    z-index: 999999 !important;
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* Header */
.merge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--merge-header-border);
    background-color: var(--merge-header-bg);
}

.merge-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    color: var(--merge-title-color);
}

.merge-header-icon {
    width: 20px;
    height: 20px;
}

/* Close button */
.merge-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--merge-close-color);
}

/* Body */
.merge-body {
    margin-top: 2px;
    background: var(--merge-body-bg);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
}

.merge-new-body {
    margin-top: 2px;
    background: var(--merge-body-bg);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 300px;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--merge-scroll-thumb) transparent;
}

    .merge-new-body::-webkit-scrollbar {
        width: 6px;
    }

    .merge-new-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .merge-new-body::-webkit-scrollbar-thumb {
        background-color: var(--merge-scroll-thumb);
        border-radius: 3px;
    }

/* Container */
.table-container {
 
    margin-top: 16px;
    border-radius: 12px;
    overflow-y: auto;
    max-height: 300px;
    box-shadow: var(--table-container-shadow);
    background: var(--table-container-bg);
    margin-bottom: 20px;
    border: 1px solid var(--table-container-border);
}

.custom-table th,
.custom-table td {
    padding-left: 16px;
    padding-right: 16px;
}

/* Table */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    padding: 0 24px;
}

/* Header */
.table-header-sticky th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg);
    color: #000000;
    z-index: 2;
    padding: 6px;
    font-weight: 500;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow: var(--table-header-shadow);
}

.table-header-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--table-header-bg);
}

    /* shadow strip */
    .table-header-sticky::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 6px;
        background: var(--table-header-strip);
        pointer-events: none;
    }

/* Rows */
.custom-table tbody tr {
    background: var(--table-row-bg);
    margin-left: 8px;
    margin-right: 8px;
}

.custom-table tbody td {
    color: var(--table-row-text);
/*    border-bottom: 1px solid var(--table-row-border);*/
}

.custom-table tbody tr:last-child td {
    border-bottom: 1px solid var(--table-row-border);
    
}


/* Subtle hover (optional, like your UI) */
.custom-table tbody tr:hover {
    background: #f9fafb;
}

/* ❌ REMOVE selection highlight completely */
.custom-table tbody tr:has(input:checked) {
    background: #ffffff !important;
}

.coa-table-container {
    margin-top: 16px;
    border-radius: 12px;
    max-height: 300px;
    border: 2px solid var(--coa-border);
    background: var(--coa-bg);
    margin-bottom: 20px;
    overflow: hidden;
}

/* Table */
.coa-table {
    width: 100%;
    border-collapse: collapse;
    padding-left: 16px;
    padding-right: 16px;
}

/* Header */
.coa-table-header th {
    background: var(--coa-head-bg);
    padding: 16px;
    font-weight: 600;
    text-align: left;
    color: var(--coa-head-text);
}

/* Rows */
.coa-table tbody tr {
    background: var(--coa-row-bg);
}

.coa-table-new-header th {
    background: rgba(0, 0, 0, 0.06); /* black with 6% opacity */
    padding: 8px 10px; /* reduced padding */
    font-weight: 600;
    text-align: left;
    color: #848181;
    font-size:14px;
    font-weight:500;
    color:#000000;
}

/* Rows */
/*.coa-table tbody tr {
    background: #ffffff;
}*/

    .coa-table tbody tr:not(:last-child) {
        border-bottom: 1px solid var(--coa-row-border);
    }

.coa-table td {
    padding: 16px;
    color: var(--coa-row-text);
}

/* Hover */
.coa-table tbody tr:hover {
    background: var(--coa-row-hover);
}

/* Remove checkbox highlight */
.coa-table tbody tr:has(input:checked) {
    background: var(--coa-row-bg) !important;
}

.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;
}

input,
select {
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

    /* ✅ Hover: only border change, NO background change */
    input:hover,
    select:hover {
        border-color: var(--border-strong);
    }

    /* Focus: keep proper interaction */
    input:focus,
    select:focus {
        border-color: var(--border-strong);
        background: var(--bg-input); /* stay same */
    }
/* Radio */
.radio-group {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 5px;
    
}

    .radio-group input[type="radio"] {
        margin-right: 6px;
        width: 16px;
        height: 16px;
        margin: 0;
        top: 1px;
    }

/* 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;
    margin-top:10px;
}

    .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:none;
            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;
            }

.stat-card {
    border: 2px solid #bababa;
    transition: all 0.2s ease;
}

    .stat-card.selected-card {
        border: 2px solid #3b82f6; /* blue */
        box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
    }


.positive {
    color: #1a7f37; /* green */
}

.negative {
    color: #d92d20; /* red */
    font-weight: 600;
}
.attachment-link {
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
}

    .attachment-link:hover {
        color: #1d4ed8;
    }