@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;
    --pill-bg: rgba(18, 45, 104, 0.3);
    --pill-text: #122d68;
    --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;
    --text-secon: #80889e;
    --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;
    --select-arrow-color: %23848481;
    --bank-card-title-color: #111827;
    --bank-card-subtitle-color: #6b7280;
    --recon-text: #333;
    --recon-muted: #666;
    --recon-negative: #d32f2f;
    --recon-divider: #ddd;
    --recon-icon-border: #999;
    --recon-icon-color: #333;
    --recon-btn-bg: #1f2a44;
    --recon-btn-text: #ffffff;
    --recon-btn-hover: #162033;
    --journal-entry-title-color: #111827;
    --journal-status-badge-bg: #d8e8d8;
    --journal-status-badge-text: #59b56a;
    --journal-entry-desc-color: #2f2f2f;
    --journal-entry-date-color: #4b5563;
    --journal-entry-amount-color: #111827;
    --journal-view-btn-border: #d3d3d3;
    --journal-view-btn-bg: #f7f7f7;
    --journal-view-btn-text: #1f2a44;
    --journal-view-btn-hover-bg: #f1f1f1;
    --journal-view-icon-filter: none;
    --journal-date-box-bg: #f5f5f5;
    --journal-date-label-color: #7c7c7c;
    --journal-date-value-color: #111827;
    --journal-section-title-color: #111827;
    --journal-table-wrap-border: #d9d9d9;
    --journal-table-wrap-bg: #ffffff;
    --journal-table-head-bg: #f3f3f3;
    --journal-table-head-text: #7b7b7b;
    --journal-table-head-border: #dddddd;
    --journal-table-row-bg: #ffffff;
    --journal-table-body-text: #2f2f2f;
    --journal-table-row-border: #e6e6e6;
    --journal-entry-code-color: #2f2f2f;
    --journal-money-color: #111827;
    --report-title-color: #111827;
    --report-subtitle-color: #374151;
    --user-row-bg: #f5f5f5;
    --user-row-border: #e5e7eb;
    --user-row-hover: #eeeeee;
    --user-primary-text: #111827;
    --user-secondary-text: #6b7280;
    --user-avatar-bg: #e5e7eb;
    --role-super-bg: #ede9fe;
    --role-super-text: #4c1d95;
    --role-admin-bg: #e0e7ff;
    --role-admin-text: #1e3a8a;
    --role-user-bg: #f3f4f6;
    --role-user-text: #111827;
    --role-donor-bg: #dcfce7;
    --role-donor-text: #14532d;
    --status-border: rgba(0, 0, 0, 0.24);
    --status-bg: #f5f5f5;
    --status-text: #111827;
    --dash-quick-actions-bg: #ffffff;
    --dash-quick-btn-bg: #eeeeee;
    --dash-quick-btn-hover-bg: #e5e5e5;
    --dash-recent-bg: #ffffff;
    --dash-donation-row-bg: #f3f2f2;
    --dash-donation-row-hover: #e9e9e9;
    --profile-card-bg: #ffffff;
    --profile-card-border: #e5e7eb;
    --profile-card-shadow: 0px 20px 40px rgba(0,0,0,0.06), 0px 4px 12px rgba(0,0,0,0.04);
    --profile-avatar-bg: #f3f4f6;
    --profile-primary-text: #111827;
    --profile-secondary-text: #374151;
    --profile-camera-bg: #f3f4f6;
    --profile-camera-border: #d1d5db;
    --profile-badge-bg: #ffe4e6;
    --profile-badge-text: #ef4444;
    --profile-input-bg: #e5e7eb;
    --change-password-card-bg: #ffffff;
    --change-password-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    --change-password-card-border: rgba(0, 0, 0, 0.04);
    --change-password-title-color: #111827;
    --change-password-subtitle-color: #8a8a8a;
    --change-password-icon-filter: none;
    --cp-input-bg: #f5f5f5;
    --cp-input-text: #111827;
    --cp-input-border: #000000;
    --cp-input-border-hover: #333;
    --cp-input-focus: #17223A;
    --cp-input-focus-ring: rgba(23, 34, 58, 0.2);
    --cp-rules-bg: #f6f6f6;
    --cp-rules-title-color: #111827;
    --cp-rule-color: #9b9b9b;
    --cp-rule-ok-color: #2e9b4e;
    --cp-cancel-bg: #f5f5f5;
    --cp-cancel-text: #111827;
    --cp-cancel-border: #bfbfbf;
    --cp-save-bg: rgba(15, 23, 42, 0.4);
    --cp-save-text: #ffffff;
    --cp-save-border: #000000;
    --header-bg: #ffffff;
    --header-border: #e5e7eb;
    --header-logo-color: #0f172a;
    --header-logo-line: linear-gradient(to right, #1e293b, #475569);
    --header-icon-color: #111827;
    --header-icon-hover: #f3f4f6;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e5e5;
    --header-bottom-bg: #dbdbdb;
    --icon-color: #111827;
    --hover-bg2: #eef1f6;
    --role-pill-bg: #ffffff;
    --role-pill-text: #000000;
    --popup-overlay-bg: rgba(0, 0, 0, 0.4);
    --popup-panel-bg: #ffffff;
    --popup-panel-shadow: 0 8px 30px rgba(0,0,0,0.2);
    --user-bubble-bg: #17223A;
    --user-bubble-text: #ffffff;
    --bot-bubble-bg: #F5F5F5;
    --bot-bubble-text: #000000;
    --bot-bubble-border: rgba(139, 136, 136, 0.27);
    --popup-close-color: #000000;
    --popup-intro-bg: #17223A;
    --popup-intro-text: #ffffff;
    --popup-header-bg: #17223A;
    --popup-header-text: #ffffff;
    --chat-input-bg: #ffffff;
    --profile-overlay-bg: transparent;
    --question-text-color: #17322A;
    --quick-questions-title-color: #17322A;
    --question-card-bg: rgba(0, 0, 0, 0.06);
    --question-card-border: rgba(0, 0, 0, 0.1);
    --question-card-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    --question-card-hover-bg: rgba(0, 0, 0, 0.08);
    --question-card-hover-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    --input-box-bg: #ffffff;
    --input-box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    --textarea-bg: #ffffff;
    --textarea-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    --textarea-placeholder: grey;
    --textarea-focus-border: #17322A;
    --textarea-focus-shadow: 0 0 10px rgba(23, 34, 42, 0.25);
    --textarea-text: #000000;
    --surface: #ffffff;
    --surface-soft: #f5f5f5;
    --shadow-ii: 0 4px 16px rgba(0, 0, 0, 0.2);*/
    /* Manage Account Variables */
    /*--mga-bg-card: #ffffff;
    --mga-bg-input: #ffffff;
    --mga-bg-tab-bar: #ffffff;
    --mga-bg-tab-active: #0f172a;
    --mga-bg-tab-hover: #f8fafc;
    --mga-bg-switch: #cbd5e1;
    --mga-bg-modal: #ffffff;
    --mga-bg-danger: #fffcfc;
    --mga-bg-modal-icon: #fef2f2;
    --mga-border-card: #e2e8f0;
    --mga-border-input: #cbd5e1;
    --mga-border-divider: #f1f5f9;
    --mga-border-danger: #fecaca;
    --mga-text-primary: #0f172a;
    --mga-text-secondary: #64748b;
    --mga-text-muted: #94a3b8;
    --mga-text-label: #334155;
    --mga-text-inverse: #ffffff;
    --mga-text-danger: #ef4444;
    --mga-text-success: #22c55e;
    --mga-btn-primary-bg: #0f172a;
    --mga-btn-primary-hover: #1e293b;
    --mga-btn-danger-bg: #ef4444;
    --mga-btn-danger-hover: #dc2626;
    --dash-action-btn-new:#F2F5FB;*/
}

[data-theme="dark"] {
    --bg-app: #000000;
    --bg-page: #050505;
    --bg-card: #0a0a0a;
    --surface: #0f172a;
    --surface-soft: #1e293b;
    --shadow-ii: 0 6px 20px rgba(0, 0, 0, 0.45);
    --bg-card-soft: #121212;
    --bg-input: #0d0d0d;
    --bg-hover: #181818;
    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-muted: #8b8b8b;
    --btn-bg: #0d0d0d;
    --text-secon: #94a3b8;
    --textarea-text: #f5f5f5;
    --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;
    --pill-bg: rgba(59, 130, 246, 0.18);
    --pill-text: #93c5fd;
    --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;
    --select-arrow-color: %23f5f5f5;
    --bank-card-title-color: #f5f5f5;
    --bank-card-subtitle-color: #a1a1a1;
    --recon-text: #f5f5f5;
    --recon-muted: #a1a1a1;
    --recon-negative: #ff6b6b;
    --recon-divider: rgba(255, 255, 255, 0.12);
    --recon-icon-border: rgba(255, 255, 255, 0.25);
    --recon-icon-color: #f5f5f5;
    --recon-btn-bg: #111111;
    --recon-btn-text: #f5f5f5;
    --recon-btn-hover: #1a1a1a;
    --journal-entry-title-color: #f5f5f5;
    --journal-status-badge-bg: rgba(74, 222, 128, 0.16);
    --journal-status-badge-text: #86efac;
    --journal-entry-desc-color: #d4d4d4;
    --journal-entry-date-color: #a1a1a1;
    --journal-entry-amount-color: #f5f5f5;
    --journal-view-btn-border: rgba(255, 255, 255, 0.12);
    --journal-view-btn-bg: #111111;
    --journal-view-btn-text: #f5f5f5;
    --journal-view-btn-hover-bg: #181818;
    --journal-view-icon-filter: brightness(0) invert(1);
    --journal-date-box-bg: #121212;
    --journal-date-label-color: #a1a1a1;
    --journal-date-value-color: #f5f5f5;
    --journal-section-title-color: #f5f5f5;
    --journal-table-wrap-border: rgba(255, 255, 255, 0.10);
    --journal-table-wrap-bg: #0a0a0a;
    --journal-table-head-bg: #111111;
    --journal-table-head-text: #a1a1a1;
    --journal-table-head-border: rgba(255, 255, 255, 0.10);
    --journal-table-row-bg: #0a0a0a;
    --journal-table-body-text: #f5f5f5;
    --journal-table-row-border: rgba(255, 255, 255, 0.08);
    --journal-entry-code-color: #f5f5f5;
    --journal-money-color: #f5f5f5;
    --report-title-color: #f5f5f5;
    --report-subtitle-color: #a1a1a1;
    --user-row-bg: #111111;
    --user-row-border: rgba(255, 255, 255, 0.08);
    --user-row-hover: #181818;
    --user-primary-text: #f5f5f5;
    --user-secondary-text: #a1a1a1;
    --user-avatar-bg: #1a1a1a;
    --role-super-bg: rgba(139, 92, 246, 0.18);
    --role-super-text: #c4b5fd;
    --role-admin-bg: rgba(59, 130, 246, 0.18);
    --role-admin-text: #93c5fd;
    --role-user-bg: rgba(255, 255, 255, 0.08);
    --role-user-text: #e5e7eb;
    --role-donor-bg: rgba(34, 197, 94, 0.18);
    --role-donor-text: #86efac;
    --status-border: rgba(255, 255, 255, 0.20);
    --status-bg: #121212;
    --status-text: #f5f5f5;
    --dash-quick-actions-bg: #0a0a0a;
    --dash-quick-btn-bg: #121212;
    --dash-quick-btn-hover-bg: #181818;
    --dash-recent-bg: #0a0a0a;
    --dash-donation-row-bg: #121212;
    --dash-donation-row-hover: #181818;
    --profile-card-bg: #0a0a0a;
    --profile-card-border: rgba(255,255,255,0.08);
    --profile-card-shadow: 0px 10px 30px rgba(0,0,0,0.5);
    --profile-avatar-bg: #1a1a1a;
    --profile-primary-text: #f5f5f5;
    --profile-secondary-text: #a1a1a1;
    --profile-camera-bg: #121212;
    --profile-camera-border: rgba(255,255,255,0.2);
    --profile-badge-bg: rgba(239,68,68,0.15);
    --profile-badge-text: #ff6b6b;
    --profile-input-bg: #121212;
    --change-password-card-bg: #0a0a0a;
    --change-password-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    --change-password-card-border: rgba(255, 255, 255, 0.08);
    --change-password-title-color: #f5f5f5;
    --change-password-subtitle-color: #a1a1a1;
    --change-password-icon-filter: brightness(0) invert(1);
    --cp-input-bg: #121212;
    --cp-input-text: #f5f5f5;
    --cp-input-border: rgba(255, 255, 255, 0.2);
    --cp-input-border-hover: rgba(255, 255, 255, 0.4);
    --cp-input-focus: #ffffff;
    --cp-input-focus-ring: rgba(255, 255, 255, 0.15);
    --cp-rules-bg: #121212;
    --cp-rules-title-color: #f5f5f5;
    --cp-rule-color: #a1a1a1;
    --cp-rule-ok-color: #4ade80;
    --cp-cancel-bg: #111111;
    --cp-cancel-text: #f5f5f5;
    --cp-cancel-border: rgba(255, 255, 255, 0.16);
    --cp-save-bg: #1f2937;
    --cp-save-text: #ffffff;
    --cp-save-border: rgba(255, 255, 255, 0.18);
    --header-bg: #0a0a0a;
    --header-border: rgba(255, 255, 255, 0.08);
    --header-logo-color: #f5f5f5;
    --header-logo-line: linear-gradient(to right, #ffffff, #9ca3af);
    --header-icon-color: #f5f5f5;
    --header-icon-hover: #181818;
    --sidebar-bg: #0a0a0a;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --header-bottom-bg: #1a1a1a;
    --icon-color: #f5f5f5;
    --hover-bg2: rgba(255, 255, 255, 0.08);
    --role-pill-bg: #2a2a2a;
    --role-pill-text: #ffffff;
    --popup-overlay-bg: rgba(0, 0, 0, 0.65);
    --popup-panel-bg: #0a0a0a;
    --popup-panel-shadow: 0 8px 30px rgba(0,0,0,0.45);
    --user-bubble-bg: #17223A;
    --user-bubble-text: #ffffff;
    --bot-bubble-bg: #181818;
    --bot-bubble-text: #f5f5f5;
    --bot-bubble-border: rgba(255, 255, 255, 0.10);
    --popup-close-color: #ffffff;
    --popup-intro-bg: #111111;
    --popup-intro-text: #ffffff;
    --popup-header-bg: #111111;
    --popup-header-text: #ffffff;
    --chat-input-bg: #0a0a0a;
    --profile-overlay-bg: transparent;
    --question-text-color: #e5e7eb;
    --quick-questions-title-color: #f5f5f5;
    --question-card-bg: rgba(255, 255, 255, 0.06);
    --question-card-border: rgba(255, 255, 255, 0.12);
    --question-card-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    --question-card-hover-bg: rgba(255, 255, 255, 0.08);
    --question-card-hover-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    --input-box-bg: #0a0a0a;
    --input-box-shadow: 0 -2px 10px rgba(0,0,0,0.45);
    --textarea-bg: #111111;
    --textarea-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    --textarea-placeholder: #8b8b8b;
    --textarea-focus-border: #f5f5f5;
    --textarea-focus-shadow: 0 0 10px rgba(255, 255, 255, 0.15);*/
    /* Manage Account Dark Variables */
    /*--mga-bg-card: var(--bg-card);
    --mga-bg-input: var(--bg-input);
    --mga-bg-tab-bar: var(--bg-card);
    --mga-bg-tab-active: #1e293b;
    --mga-bg-tab-hover: var(--bg-hover);
    --mga-bg-switch: #475569;
    --mga-bg-modal: var(--bg-card);
    --mga-bg-danger: rgba(239, 68, 68, 0.05);
    --mga-bg-modal-icon: rgba(239, 68, 68, 0.15);
    --mga-border-card: var(--border-color);
    --mga-border-input: var(--border-strong);
    --mga-border-divider: var(--border-color);
    --mga-border-danger: rgba(239, 68, 68, 0.2);
    --mga-text-primary: var(--text-primary);
    --mga-text-secondary: var(--text-secondary);
    --mga-text-muted: var(--text-muted);
    --mga-text-label: var(--text-primary);
    --mga-text-inverse: var(--text-inverse);
    --mga-text-danger: #ff6b6b;
    --mga-text-success: #4ade80;
    --mga-btn-primary-bg: #1e293b;
    --mga-btn-primary-hover: #334155;
    --mga-btn-danger-bg: #ef4444;
    --mga-btn-danger-hover: #dc2626;
    --dash-action-btn-new: #1E293B;*/
}

    [data-theme="dark"] .donation-icon {
        content: url("/Images/dollaricon-dark.png");
        filter: brightness(0) invert(1);
    }

    [data-theme="dark"] .card-title {
        color: #f5f5f5;
    }

    [data-theme="dark"] .card-icon {
        content: url("/Images/cardicon-dark.png");
    }

    [data-theme="dark"] .audit-icon {
        content: url("/Images/audit-dark.png");
    }

    [data-theme="dark"] .export-icon {
        content: url("/Images/export-2-dark.png");
    }

    [data-theme="dark"] .donor-icon-img {
        content: url("/Images/ion-person-outline-1-dark.png");
    }

    [data-theme="dark"] .merge-icon {
        content: url("/Images/merge-dark.png");
    }

    [data-theme="dark"] .import-icon {
        content: url("/Images/import-dark.png");
    }

    [data-theme="dark"] .record-donation-icon {
        content: url("/Images/add-icon-dark.png");
    }

    [data-theme="dark"] .theme-icon {
        filter: brightness(0) invert(1);
    }

    [data-theme="dark"] .menu-child {
        background-color: transparent;
        color: #e5e7eb; /* light gray for dark background */
    }

        [data-theme="dark"] .menu-child:hover,
        [data-theme="dark"] .menu-child.active {
            background-color: #1e293b; /* soft dark hover */
            color: #ffffff;
        }

    [data-theme="dark"] img:not(.no-theme) {
        filter: brightness(0) invert(1);
    }

    [data-theme="dark"] input[type="date"] {
        color-scheme: dark;
    }

    [data-theme="dark"] .more-filters-grid select {
        background: var(--bg-input) url('/images/arrow-down-dark.png') no-repeat right 8px center;
    }

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

h3 {
    font-size: 22px;
}

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: 12px;
    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: 12px;
    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: 12px;
    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-top: 10px;
    margin-left: 12px;
}

    .donor-card-header h3 {
        font-size: 28px;
        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);
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 550;
    color: var(--text-primary);
}

.action-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: var(--icon-color-filter, none);
}
/* 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: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.card-subtitle {
    font-size: 12px;
    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);
}

.pending-approval-box {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #fff8e6;
    border: 1px solid #f5d27a;
    color: #7a5a00;
}

    .pending-approval-box img {
        width: 22px;
        height: 22px;
    }

    .pending-approval-box strong {
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 600;
    }

    .pending-approval-box p {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
    }

.auth-error-msg {
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #f3c4c4;
    background: #fff4f4;
    color: #c62828;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}
/* 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);
    }

.journal-page {
    background: #f4f4f4;
    min-height: 100vh;
    padding: 18px;
    font-family: Inter, sans-serif;
    overflow: hidden;
}

.page-wrapper {
    height: 100vh;
    overflow-y: auto;
}
/* HEADER */

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

.journal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.back-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.back-icon {
    width: 14px;
    height: 14px;
}

.header-texts h1 {
    margin: 0;
    font-size: 31px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.header-texts p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #8d8d8d;
    font-weight: 500;
}
/* =========================================================
   INVITE USER POPUP - UNIQUE STYLES
   ========================================================= */

.invx-popup-overlay-v2 {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: invxFadeIn 0.18s ease;
}

.invx-popup-card-v2 {
    width: 100%;
    max-width: 470px;
    background: #ffffff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
    position: relative;
    animation: invxScaleIn 0.2s ease;
}

/* =========================
   HEADER
   ========================= */

.invx-popup-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
}

.invx-popup-header-left-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.invx-popup-icon-box-v2 {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #162754 0%, #243d84 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .invx-popup-icon-box-v2 svg {
        width: 22px;
        height: 22px;
    }

.invx-popup-title-wrap-v2 h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.invx-popup-title-wrap-v2 p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #7b8498;
    line-height: 1.6;
}

.invx-popup-close-v2 {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #5d6578;
    font-size: 32px;
    cursor: pointer;
    transition: 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .invx-popup-close-v2:hover {
        transform: rotate(90deg);
        color: #1f2f6b;
    }

/* =========================
   BODY
   ========================= */

.invx-popup-body-v2 {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.invx-field-group-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .invx-field-group-v2 label {
        font-size: 14px;
        font-weight: 600;
        color: #1d2437;
    }

.invx-input-v2,
.invx-select-v2 {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #d9dfeb;
    background: #ffffff;
    padding: 0 18px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    transition: 0.2s ease;
}

    .invx-input-v2::placeholder {
        color: #a5acbb;
    }

    .invx-input-v2:focus,
    .invx-select-v2:focus {
        border-color: #223b84;
        box-shadow: 0 0 0 4px rgba(34, 59, 132, 0.08);
    }

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

.invx-popup-footer-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 2px;
}

.invx-cancel-btn-v2 {
    height: 48px;
    border-radius: 14px;
    border: 1px solid #d8deea;
    background: #ffffff;
    color: #20283a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

    .invx-cancel-btn-v2:hover {
        background: #f8faff;
    }

.invx-submit-btn-v2 {
    height: 48px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #162754 0%, #274793 100%);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: 0 10px 24px rgba(30, 53, 120, 0.25);
}

    .invx-submit-btn-v2:hover {
        transform: translateY(-1px);
    }

    .invx-submit-btn-v2:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* =========================
   ANIMATION
   ========================= */

@keyframes invxFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes invxScaleIn {

    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

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

@media (max-width: 768px) {

    .invx-popup-card-v2 {
        width: calc(100% - 24px);
        padding: 24px;
        border-radius: 22px;
    }

    .invx-popup-title-wrap-v2 h3 {
        font-size: 24px;
    }

    .invx-popup-footer-v2 {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SMALLER EXACT PROFILE UPLOAD UI
   ========================================================= */

.zkxpf-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.zkxpf-upload-shell {
    position: relative;
    width: 145px;
    height: 145px;
}

/* Hidden Input */
.zkxpf-hidden-input {
    display: none;
}

/* =========================================================
   MAIN CIRCLE
   ========================================================= */

.zkxpf-circle-box {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: #f3f3f3;
    border: 8px solid #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 0 5px 12px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: all 0.25s ease;
}

    .zkxpf-circle-box:hover {
        transform: scale(1.01);
    }

/* =========================================================
   PLACEHOLDER CONTENT
   ========================================================= */

.zkxpf-placeholder-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8f8f8f;
    text-align: center;
    width: 100%;
    height: 100%;
}

/* Upload Icon */
.zkxpf-upload-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
    opacity: 0.95;
}

/* Main Text */
.zkxpf-main-text {
    font-size: 15px;
    line-height: 1.1;
    font-weight: 700;
    color: #8f8f8f;
    margin-top: 2px;
    letter-spacing: -0.2px;
    font-family: 'Poppins', sans-serif;
}

/* Sub Text */
.zkxpf-sub-text {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 500;
    color: #919191;
    font-family: 'Poppins', sans-serif;
}

/* =========================================================
   PREVIEW IMAGE
   ========================================================= */

.zkxpf-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* =========================================================
   FLOATING PEN BUTTON
   ========================================================= */

.zkxpf-edit-mini-btn {
    position: absolute;
    right: 4px;
    bottom: 2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #111f4d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.12);
    z-index: 50;
    transition: all 0.2s ease;
}

    .zkxpf-edit-mini-btn svg {
        width: 11px;
        height: 11px;
    }

    .zkxpf-edit-mini-btn:hover {
        transform: scale(1.05);
    }

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

@media (max-width: 768px) {

    .zkxpf-upload-shell {
        width: 130px;
        height: 130px;
    }

    .zkxpf-circle-box {
        width: 130px;
        height: 130px;
    }

    .zkxpf-main-text {
        font-size: 14px;
    }

    .zkxpf-sub-text {
        font-size: 8px;
    }

    .zkxpf-edit-mini-btn {
        width: 30px;
        height: 30px;
    }
}
/* ===== Action Wrapper ===== */
.xq-donation-action-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 7px;
    margin-bottom: 7px;
}

/* ===== Shared Button Styles ===== */
.xq-cancel-btn,
.xq-donate-btn {
    border: none;
    outline: none;
    height: 42px; /* smaller height */
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

/* ===== Cancel Button ===== */
.xq-cancel-btn {
    min-width: 120px;
    padding: 0 22px;
    background: var(--surface-soft);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}

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

/* ===== Donate Button ===== */
.xq-donate-btn {
    min-width: 190px;
    padding: 0 24px;
    /* FIGMA STYLE GRADIENT */
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: white;
    box-shadow: 0 6px 14px rgba(20, 40, 80, 0.25), 0 2px 5px rgba(0,0,0,0.08);
}

    /* ===== Hover ===== */
    .xq-donate-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(90deg, #102241 0%, #315892 100%);
    }

    /* ===== Disabled ===== */
    .xq-donate-btn:disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

/* ===== Icon ===== */
.xq-btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    object-fit: contain;
}

/* ===== Text ===== */
.xq-btn-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* ===== Spinner ===== */
.xq-donate-btn .spinner-border {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-width: 2px;
}

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

    .xq-donation-action-wrap {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .xq-cancel-btn,
    .xq-donate-btn {
        width: 100%;
    }
}

.balance-pill {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    border-radius: 999px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
}

.balance-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

/* TOP CARD */
.top-form-card {
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 12px;
}

.top-form-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

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

    .field-group label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 600;
    }

.date-input {
    width: 180px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card-soft);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

    .date-input input[type="date"] {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
        font-size: 12px;
        color: var(--text-muted);
        font-family: Inter, sans-serif;
        appearance: none;
        -webkit-appearance: none;
    }

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

.calendar-icon {
    width: 14px;
    opacity: .6;
    filter: var(--icon-color-filter, none);
}

.field-right {
    margin-left: auto;
}

.journal-no-box {
    width: 110px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card-soft);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
/* TABLE */

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

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

    .journal-table thead {
        background: var(--pending-table-head-bg);
    }

        .journal-table thead th {
            height: 46px;
            border-bottom: 1px solid var(--border-color);
            color: var(--pending-table-head-text);
            font-size: 11px;
            font-weight: 700;
            text-align: left;
            padding: 0 10px;
        }
    .journal-table tbody td {
        border-bottom: 1px solid var(--border-color);
        height: 52px;
        padding: 0 10px;
        font-size: 12px;
        color: var(--text-primary);
    }

.drag-col {
    width: 24px;
}

.num-col {
    width: 40px;
}

.account-col {
    width: 340px;
}

.money-col {
    width: 120px;
}

.desc-col {
    width: 240px;
}

.name-col {
    width: 120px;
}

.delete-col {
    width: 60px;
}

.drag-dots span {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
}

    .drag-dots span {
        width: 3px;
        height: 3px;
        background: #9f9f9f;
        border-radius: 50%;
    }

.number-cell {
    font-weight: 600;
    color: var(--text-primary);
}

.select-wrapper {
    position: relative;
}

    .select-wrapper select {
        width: 100%;
        height: 34px;
        border: none;
        background: transparent;
        appearance: none;
        font-size: 12px;
        color: #444;
        padding-right: 20px;
    }

.select-arrow {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 12px;
}

.money-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .money-input input {
        width: 70px;
        border: none;
        background: transparent;
        font-size: 12px;
        color: #444;
    }

.spin-arrows {
    display: flex;
    flex-direction: column;
    line-height: 8px;
    color: #888;
    font-size: 8px;
}

.memo-input {
    width: 100%;
    border: none;
    background: transparent;
    color: #888;
    font-size: 12px;
}

.name-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #888;
    width: 50px;
}

.delete-btn {
    border: none;
    background: transparent;
    color: #ff3b30;
    font-size: 16px;
    cursor: pointer;
}

tfoot td {
    height: 34px;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
    font-size: 12px;
}

.total-title {
    font-weight: 700;
    color: #444;
}

.total-money {
    font-weight: 700;
    color: #111;
}

/* BOTTOM */
.bottom-actions {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.action-btn {
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--btn-bg);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
}

/* Variants */

.add-btn {
    background: var(--bg-card);
}

.clear-btn {
    background: var(--bg-card-soft);
}

/* =========================================
   LOWER SECTION
========================================= */

        .xq-cancel-btn:hover {
            background: #ebebeb;
        }
    /* ===== Donate Button ===== */
.xq-donate-btn {
    min-width: 190px;
    padding: 0 24px;
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: white;
    box-shadow: 0 6px 14px rgba(20, 40, 80, 0.25), 0 2px 5px rgba(0,0,0,0.08);
}
        /* ===== Hover ===== */
    .xq-donate-btn:hover {
        transform: translateY(-1px);
        background: var(--button-hover-bg);
        
    }
        /* ===== Disabled ===== */
        .xq-donate-btn:disabled {
            opacity: 0.8;
            cursor: not-allowed;
        }
    /* ===== Icon ===== */
    .xq-btn-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        object-fit: contain;
    }
    /* ===== Text ===== */
    .xq-btn-text {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.2px;
    }
    /* ===== Spinner ===== */
    .xq-donate-btn .spinner-border {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-width: 2px;
    }
    /* ===== Mobile Responsive ===== */
    @media (max-width: 768px) {

        .xq-donation-action-wrap {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
        }

        .xq-cancel-btn,
        .xq-donate-btn {
            width: 100%;
        }
    }

    .balance-pill {
        background: #dcfce7;
        color: #15803d;
        border: 1px solid #86efac;
        border-radius: 999px;
        padding: 6px 14px;
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 600;
    }
.lower-section {
    display: flex;
    gap: 18px;
    margin-top: 18px;
    width: 100%;
}

.memo-card,
.attachment-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    width: 50%;
    min-height: 155px;
}

/* MEMO */

.card-title2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 18px;
}

.memo-card textarea {
    width: 100%;
    height: 130px;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
    outline: none;
    background: var(--bg-card-soft);
    color: var(--text-primary);
    box-sizing: border-box;
}

    .memo-card textarea::placeholder {
        color: var(--text-muted);
    }

/* ATTACHMENT */

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

.attachment-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.max-size {
    font-size: 11px;
    color: var(--text-muted);
}

/* Upload box */

.upload-box {
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-soft);
    cursor: pointer;
}

.upload-icon {
    font-size: 22px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

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

.upload-subtext {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 4px;
}

.show-existing {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* =========================================
   FOOTER ACTIONS
========================================= */
.footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-bottom: 20px;
}

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

/* BUTTON BASE */

.footer-btn {
    height: 42px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: var(--btn-bg);
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s ease;
}

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

/* SAVE NEW */

.save-new-btn {
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    min-width: 120px;
    justify-content: center;
    height: 30px;
}

    .save-new-btn:hover {
        background: var(--primary-hover);
    }

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

@media (max-width: 1100px) {

    .lower-section {
        flex-direction: column;
    }

    .memo-card,
    .attachment-card {
        width: 100%;
    }

    .footer-actions {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .right-footer-buttons {
        flex-wrap: wrap;
    }
}

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

.footer-svg-icon {
    width: 17px;
    height: 17px;
    color: #374151;
    transition: 0.2s ease;
    flex-shrink: 0;
}

.action-btn:hover .footer-svg-icon {
    color: #111827;
}

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

.upload-center-svg {
    width: 28px;
    height: 28px;
    color: #374151;
}
/* =========================
   TOP SECTION
========================= */

.journal-top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.journal-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

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

.journal-toolbar-btn {
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    background: var(--btn-bg);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

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

.journal-primary-btn {
    height: 42px;
    padding: 0 18px;
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .journal-primary-btn:hover {
        background: var(--primary-hover);
    }

/* =========================
   SVG ICONS
========================= */

.journal-btn-svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    filter: var(--icon-color-filter, none);
}
/* =========================================
   FILTER TOOLBAR
========================================= */

.journal-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 18px;
}
/* =========================================
   SELECT DROPDOWNS
========================================= */

.journal-toolbar-select {
    min-width: 190px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0 14px;
    background: var(--bg-card-soft);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

    .journal-toolbar-select:focus {
        border-color: var(--primary);
    }

/* =========================================
   SEARCH BAR
========================================= */

.journal-toolbar-search {
    position: relative;
    flex: 1;
    min-width: 280px;
}

    .journal-toolbar-search input {
        width: 100%;
        height: 42px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0 16px 0 44px;
        font-size: 13px;
        color: var(--text-primary);
        background: var(--bg-card-soft);
        outline: none;
        transition: border-color 0.2s ease;
    }

        .journal-toolbar-search input:focus {
            border-color: var(--primary);
        }

.journal-toolbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
/* =========================================
   APPLY BUTTON
========================================= */

.journal-apply-btn {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

    .journal-apply-btn:hover {
        background: var(--primary-hover);
    }
/* =========================================
   RESET BUTTON
========================================= */

.journal-reset-btn {
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card-soft);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .journal-reset-btn:hover {
        background: var(--bg-hover);
    }
/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 992px) {

    .journal-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .journal-toolbar-search,
    .journal-toolbar-select,
    .journal-apply-btn,
    .journal-reset-btn {
        width: 100%;
    }
}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .journal-top-actions,
    .journal-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .journal-action-buttons {
        width: 100%;
    }
}
/* =========================================
   JOURNAL CARD
========================================= */

.journal-ui-card {
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 18px;
    padding: 12px;
}

/* =========================================
   HEADER
========================================= */

.journal-ui-header {
    text-align: center;
    padding: 24px 20px 28px;
    border-bottom: 1px solid var(--border-color);
}



.journal-ui-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
}


..journal-ui-company {
    margin-top: 4px;
    font-size: 13px;
}
.journal-ui-date {
    margin-top: 2px;
    font-size: 13px;
}
.journal-ui-title,
.journal-ui-company,
.journal-ui-date {
    color: var(--text-primary);
}
.journal-ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    background: transparent;
}

    .journal-ui-table thead tr {
        background: var(--pending-table-head-bg);
        border-bottom: 1px solid var(--border-color);
    }

    .journal-ui-table th {
        padding: 14px 16px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        color: var(--pending-table-head-text);
        white-space: nowrap;
    }
.journal-group-row {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease;
}

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


    .journal-group-row td {
        padding: 0;
        background: transparent;
    }

.journal-group-content {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-left: 5px solid var(--primary);
    padding: 0 18px;
}


.journal-group-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.journal-arrow {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 600;
}
.journal-group-id {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.journal-group-count {
    font-size: 12px;
    color: var(--text-muted);
}

/* =========================================
   DATA ROWS
========================================= */

.journal-data-row {
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
    .journal-data-row td {
        font-size: 13px;
        color: var(--text-primary);
        vertical-align: middle;
        background: transparent;
        padding: 16px;
    }
/* =========================================
   BADGES
========================================= */

.journal-badge-expense,
.journal-badge-entry,
.journal-badge-revenue,
.journal-badge-donation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.journal-badge-expense {
    background: #ffe3e3;
    color: #e03131;
}

.journal-badge-entry {
    background: #d3f9d8;
    color: #2b8a3e;
}

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

.journal-badge-donation {
    background: #f3e8ff;
    color: #9333ea;
}


/* =========================================
   MONEY
========================================= */

.journal-money-text {
    text-align: right;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-primary);
}

.journal-subtotal-row {
    background: var(--bg-card-soft);
    border-top: 1px solid var(--border-color);
}


    .journal-subtotal-row td {
        padding-top: 14px;
        padding-bottom: 14px;
    }

.journal-subtotal-value {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.journal-credit-total {
    color: var(--success-color);
}

/* =========================================
   FOOTER
========================================= */

.journal-footer-row {
    background: var(--bg-card);
    border-top: 2px solid var(--border-color);
}
    .journal-footer-row td {
        padding: 18px 16px;
    }

.journal-grand-total {
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

/* =========================================
   ATTACHMENTS
========================================= */

.journal-attachment-box {
    padding: 18px;
    background: var(--bg-card-soft);
}

.journal-attachment-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.journal-attachment-btn {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--btn-bg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s ease;
}

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

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

@media (max-width: 1200px) {

    .journal-ui-card {
        overflow-x: auto;
    }

    .journal-ui-table {
        min-width: 1100px;
    }
}
/* =========================
   TABLE WRAPPER
========================= */

.je-table-wrapper {
    width: 100%;
    background: var(--table-container-bg);
    border: 1px solid var(--table-container-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--table-container-shadow);
}

/* =========================
   TABLE
========================= */

.je-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Inter, sans-serif;
}

    /* =========================
   HEADER
========================= */

    .je-table thead tr {
        background: var(--pending-table-head-bg);
        border-bottom: 2px solid var(--pending-table-head-border);
    }

    .je-table thead th {
        height: 44px;
        padding: 0 14px;
        font-size: 11px;
        font-weight: 700;
        color: var(--pending-table-head-text);
        text-align: left;
        letter-spacing: 0.4px;
        vertical-align: middle;
        white-space: nowrap;
    }
    /* =========================
   BODY ROWS
========================= */

    .je-table tbody tr {
        border-bottom: 1px solid var(--table-row-border);
        background: var(--table-row-bg);
    }

    .je-table tbody td {
        height: 58px;
        padding: 0 14px;
        vertical-align: middle;
        font-size: 13px;
        color: var(--table-row-text);
    }

/* =========================
   COLUMN WIDTHS
========================= */

.je-drag-col {
    width: 24px;
}

.je-number-col {
    width: 40px;
}

.je-account-col {
    width: 38%;
}

.je-money-col {
    width: 10%;
}

.je-description-col {
    width: 24%;
}

.je-name-col {
    width: 16%;
}

.je-delete-col {
    width: 50px;
}

/* =========================
   DRAG DOTS
========================= */

.je-drag-cell {
    padding-left: 8px !important;
}
.je-drag-dots span {
    width: 3px;
    height: 3px;
    background: var(--text-muted);
    border-radius: 50%;
}
    .je-drag-dots span {
        width: 3px;
        height: 3px;
        background: #8b8b8b;
        border-radius: 50%;
    }

/* =========================
   NUMBER CELL
========================= */

.je-number-cell {
    font-weight: 600;
    color: var(--table-row-text);
}

/* =========================
   SELECT
========================= */

.je-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

    .je-select-wrapper select {
        width: 100%;
        border: none;
        background: transparent;
        font-size: 13px;
        color: var(--table-row-text);
        outline: none;
        appearance: none;
        padding-right: 18px;
        font-family: Inter, sans-serif;
    }
/* =========================
   INPUTS
========================= */
.je-text-input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--table-row-text);
    font-family: Inter, sans-serif;
}

    .je-text-input::placeholder {
        color: var(--text-muted);
    }
/* =========================
   MONEY INPUT
========================= */

.je-money-input {
    width: 100%;
}

    .je-money-input input {
        width: 100%;
        border: none;
        background: transparent;
        outline: none;
        font-size: 13px;
        color: var(--table-row-text);
        text-align: left;
        font-family: Inter, sans-serif;
    }

/* =========================
   NAME INPUT WITH ARROW
========================= */

.je-name-wrapper {
    gap: 6px;
}

/* =========================
   ARROW
========================= */

.je-select-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #555;
    pointer-events: none;
}

/* =========================
   DELETE BUTTON
========================= */

.je-delete-cell {
    text-align: center;
}

.je-delete-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

    .je-delete-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* =========================
   FOOTER
========================= */
.je-table tfoot tr {
    background: var(--surface-soft);
    border-top: 1px solid var(--border-color);
}

.je-table tfoot td {
    height: 56px;
    padding: 0 14px;
    vertical-align: middle;
    background: var(--surface-soft);
    border-top: 1px solid var(--border-color);
}
.je-total-label,
.je-total-amount {
    color: var(--text-primary);
}

.je-total-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
}

.je-total-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
}

/* =========================
   BOTTOM BUTTONS
========================= */
.je-bottom-actions {
    display: flex;
    gap: 12px;
    padding: 14px 12px;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.je-action-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--btn-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.2s;
}

    .je-action-btn:hover {
        background: var(--bg-hover);
    }
    .je-action-btn span {
        font-size: 18px;
        line-height: 1;
    }

.je-delete-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.je-delete-icon {
    width: 18px;
    height: 18px;
    stroke: var(--danger-color);
    filter: var(--delete-icon-filter);
    transition: transform 0.15s ease, stroke 0.15s ease;
}

.je-delete-btn:hover .je-delete-icon {
    transform: scale(1.1);
    stroke: #b91c1c;
}

.je-delete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

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

    .clip-svg:hover {
        color: #111827;
    }

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

.upload-svg {
    width: 18px;
    height: 18px;
    color: var(--icon-color);
}
    .upload-svg:hover {
        color: #111827;
    }

/* =========================================
   JOURNAL REPORT CARD
========================================= */

.journal-report-card {
    width: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}

/* =========================================
   REPORT HEADER
========================================= */

.report-top {
    text-align: center;
    padding: 26px 0 24px;
    border-bottom: 1px solid #dcdcdc;
    background: #fff;
}

    .report-top h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #111827;
    }

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

.report-month {
    margin-top: 3px;
    font-size: 14px;
    color: #6b7280;
}

.eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
}

    .eye-btn:hover {
        color: #111827;
    }

    .eye-btn svg {
        display: block;
    }
/* =========================================
   TABLE
========================================= */

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

    /* HEADER */

    .journal-report-table thead th {
        background: #fafafa;
        border-bottom: 1px solid #dcdcdc;
        padding: 14px 14px;
        font-size: 15px;
        font-weight: 700;
        color: #4b5563;
        text-align: left;
        white-space: nowrap;
    }

    /* BODY */

    .journal-report-table tbody td {
        padding: 14px 14px;
        font-size: 14px;
        color: #374151;
        border-bottom: 1px solid #ececec;
        vertical-align: middle;
        line-height: 1.4;
    }

/* GROUP ROW */

.group-row td {
    background: #fff;
    font-weight: 700;
    color: #111827;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 14px;
}

.arrow {
    margin-right: 8px;
    font-size: 13px;
}

.count {
    font-size: 12px;
    color: #888;
}

/* VIEW */

.view-cell {
    text-align: right;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

/* MONEY */

.money {
    text-align: right;
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

/* SUBTOTAL */

.subtotal-row td {
    background: #fff;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.subtotal-label {
    text-align: right;
    font-weight: 700;
    color: #374151;
}

/* FOOTER */

.journal-report-table tfoot td {
    background: #fafafa;
    border-top: 1px solid #dcdcdc;
    padding: 18px 14px;
}

.grand-total-label {
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    color: #111827;
}

.grand-total {
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    color: #111827;
}

/* =========================================
   COLUMN WIDTHS
========================================= */

.date-col {
    width: 12%;
}

.type-col {
    width: 13%;
}

.num-col {
    width: 7%;
}

.name-col {
    width: 18%;
}

.desc-col {
    width: 19%;
}

.full-col {
    width: 17%;
}

.money-col {
    width: 7%;
    text-align: right !important;
}

/* =========================================
   HOVER
========================================= */

.journal-report-table tbody tr:hover td {
    background: #fcfcfc;
}

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

@media (max-width: 1200px) {

    .journal-report-card {
        overflow-x: auto;
    }

    .journal-report-table {
        min-width: 1350px;
    }
}
/* 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: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.donation-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 14px;
}

.profile-upload-wrapper {
    margin-top: 14px;
}

.profile-upload {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

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

.profile-circle {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px dashed #9a9a9a;
    background: #d9d9d9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.upload-btn {
    height: 30px;
    padding: 0 16px;
    border-radius: 6px;
    background: #7b7f93;
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 3px;
    margin-top: -5px;
}

.remove-btn {
    height: 30px;
    padding: 0 16px;
    border-radius: 6px;
    background: #f5d4d7;
    color: #e53935;
    border: none;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 4px;
}

.upload-note {
    margin-top: 6px;
    margin-left: 132px;
    font-size: 11px;
    color: #7d7d7d;
}

/* ==============================
   Add Mode Button
   ============================== */
.add-mode-btn {
    background-color: #17223A;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    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: 12px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
}

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

.donation-types-description {
    font-size: 12px;
    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: 12px;
    color: #9ca3af;
    font-size: 12px;
}

.donation-name {
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    font-weight: 600;
    color: #111827;
}

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

/* Input */
.don.modal-input {
    height: 36px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

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


/* ==============================
   Add Mode Button
   ============================== */
.add-mode-btn {
    background-color: #17223A;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    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: 12px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
}

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

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

.profile-info-display {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 6px 0; /* small spacing only */
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}

/* DARK MODE */
[data-theme="dark"] .profile-info-display {
    color: #f3f4f6;
}
/* ==============================
   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: 12px;
    color: #9ca3af;
}

.donation-name {
    font-size: 12px;
    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: 12px;
    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;
}

.action-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* dropdown wrapper */
.dropdown {
    position: relative;
}

/* main button */
.dropdown-btn {
    cursor: pointer;
}

/* menu hidden by default */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-width: 140px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    z-index: 100;
    padding: 6px 0;
}

/* show on hover */
.dropdown:hover .dropdown-menu {
    display: block;
}

/* items */
.dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

    .dropdown-item:hover {
        background: #f5f5f5;
    }

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

.payment-name {
    font-size: 12px;
    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: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

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

/* Input */
.modal-input {
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    padding: 0 10px;
    font-size: 12px;
    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: 12px;
    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: 12px;
    }

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



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

/* ==========================
   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: 12px;
    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: 12px;
    background-color: var(--bg-input);
    color: var(--text-primary);
}

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

select.form-input {
    appearance: none;
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23848481' viewBox='0 0 20 20'> <path d='M5 7l5 5 5-5'/> </svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
}

/*.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;
}*/
.more-filters-grid select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 8px 35px 8px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background: var(--bg-input) url('/images/arrow-down.png') no-repeat right 8px center;
    background-size: 22px;
}
    /* Hover state */
    .more-filters-grid select:hover {
        background: var(--bg-hover) url('/images/arrow-down.png') no-repeat right 8px center;
    }

    /* Focus state (optional but good UX) */
    .more-filters-grid select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

.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: 12px; /* subtle increase */
}

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

.card h4.card-title {
    font-size: 12px;
    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;
    border-radius: 6px;
    background-color: var(--btn-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    /* Hover */
    .send-test-btn:hover {
        background-color: var(--bg-hover);
    }
/* Buttons */
/*.primary-btn {
    width: 100%;
    background: #17223A;
    color: #fff;
    border: none;
    height: 32px;
    border-radius: 6px;
    font-size: 12px;
    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: 12px; /* 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: 12px;
        font-weight: 900;
        color: var(--text-primary);
    }

    .view-stat-card span {
        font-size: 12px;
        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: 12px;
        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: 12px;
        font-weight: 900;
        color: var(--text-primary);
    }

    .stat-card2 span {
        font-size: 12px;
        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: 12px;
        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: 12px;
        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: var(--user-row-bg);
    border: 1px solid var(--user-row-border);
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.user-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 16px;
    border-radius: 10px;
    background: #17223A;
    border-bottom: 1px solid #f1af00;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .user-row1 strong {
        color: #ffffff;
        font-size: 18px;
    }

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    color: var(--user-primary-text);
}

.avatar {
    width: 40px;
    height: 40px;
    background-color: var(--user-avatar-bg);
    color: var(--user-primary-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    border: none;
}

.user-info span {
    display: block;
    font-size: 12px;
    color: var(--user-secondary-text);
}

/* 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: var(--role-super-bg);
    color: var(--role-super-text) !important;
}

/* Admin */
.role.admin {
    background-color: var(--role-admin-bg);
    color: var(--role-admin-text) !important;
}

/* User */
.role.user {
    background-color: var(--role-user-bg);
    color: var(--role-user-text) !important;
}

/* Donor */
.role.donor {
    background-color: var(--role-donor-bg);
    color: var(--role-donor-text) !important;
}

.user-info span {
    display: block; /* ⬅ forces next line */
    font-size: 12px;
    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: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.report-icon2 {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

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

.report-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--report-title-color);
    line-height: 1.2;
    margin: 0;
}

.report-subtitle {
    font-size: 11px;
    color: var(--report-subtitle-color);
    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);
    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: 12px;
        font-weight: 600;
        color: var(--user-modal-title-color);
    }

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

    .modal-user-header span.role {
        display: block;
        margin-top: 4px;
    }

    .modal-user-header .donor-info strong {
        display: block;
    }

.avatar.large {
    width: 48px;
    height: 48px;
    font-size: 12px;
    background: var(--primary);
}

.modal-info div {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.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: 12px;
    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: 12px;
        color: #111827;
    }

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

    .edit-user-modal h3 {
        font-family: "Poppins", sans-serif;
        font-size: 12px;
        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: 12px;
}

.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: 12px;
    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: 12px;
}

    .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 */
.sidebar {
    width: 78px;
    min-width: 78px;
    max-width: 78px;
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    font-family: system-ui, sans-serif;
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease;
}

    /* EXPANDED */
    .sidebar.expanded {
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }
    /* HIDE TEXT WHEN COLLAPSED */
    .sidebar.collapsed .text,
    .sidebar.collapsed .arrow,
    .sidebar.collapsed .menu-children {
        display: none;
    }

    /* CENTER ICONS */
    .sidebar.collapsed .menu-item,
    .sidebar.collapsed .menu-parent {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* NORMAL EXPANDED ALIGNMENT */
    .sidebar.expanded .menu-item,
    .sidebar.expanded .menu-parent {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /* PREVENT TEXT WRAP */
    .sidebar .text {
        white-space: nowrap;
    }

.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: 12px;
    color: #111827;
}

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

/* MENU */
.sidebar-menu {
    padding: 8px;
    flex: 1;
    min-height: 0; /* critical for flex scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

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

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


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

.menu-item img {
    filter: var(--menu-icon-filter);
}
/* 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: 12px;
    color: #374151;
}

    .menu-parent:hover {
        background: rgba(0, 0, 0, 0.05);
    }
/* CHILDREN */
.menu-children {
    margin-left: 34px;
    margin-top: 4px;
}

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

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

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.clear-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: #888;
}

    .clear-btn:hover {
        color: #000;
    }


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

    .menu-item:hover,
    .menu-parent:hover,
    .menu-child:hover {
        background-color: var(--hover-bg2);
    }

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

        .menu-item.active .text {
            color: #ffffff;
        }

        .menu-item.active img {
            /*            filter: none;*/
            filter: brightness(0) invert(1);
        }
        /* Make icons white when active */
        .menu-item.active svg,
        .menu-parent.active svg {
            stroke: #111827;
        }

.menu-child {
    margin-top: 6px;
    margin-left: 18px;
    padding: 8px 24px;
    border-left: 3px solid transparent;
    border-radius: 6px;
}

    .menu-child.active {
        background-color: #eef1f6;
        color: #17223A;
        font-weight: 600;
        padding-left: 20px;
        border-left: 3px solid #17223A;
    }

        .menu-item.active .icon,
        .menu-child.active .icon {
            color: #ffffff;
        }

.menu-item.active svg,
.menu-parent.active svg {
    stroke: #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;
    }

    .menu-parent.active img {
        filter: brightness(0) invert(1);
    }
/* Child should NEVER change color */
.menu-child.active {
    background-color: #eef1f6;
    color: #17223A;
    font-weight: 600;
}

.menu-child.active {
    background-color: #eef1f6;
    color: #17223A;
}

/* Hover state (NEW IMPROVED) */
.menu-child:hover {
    background-color: var(--hover-bg2);
    color: #17223A;
    padding-left: 28px; /* slight indentation effect */
    cursor: pointer;
}

/* 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: 12px;
        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 WRAPPER ===== */
.header {
    width: 100%;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    font-family: system-ui, sans-serif;
}

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

    /* Logo */
    .header-top .logo {
        font-size: 12px;
        font-weight: 700;
        color: var(--header-logo-color);
        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: var(--header-logo-line);
            border-radius: 4px;
        }

.smtp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}

    .smtp-icon svg {
        width: 18px;
        height: 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;
    }

        .menu-item:hover,
        .menu-parent:hover,
        .menu-child:hover {
            background-color: var(--hover-bg2);
        }
        /* ACTIVE (current page) */
        .menu-item.active {
            background-color: var(--primary-color);
            color: #ffffff;
            border: 1px solid #e5e7eb;
        }

/* 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: 12px;
    color: var(--header-icon-color);
}

    .icon-btn:hover {
        background: var(--header-icon-hover);
    }
/* PROFILE */
.profile-btn {
    border: none;
    background: transparent;
    cursor: pointer;
}

        .menu-child.active {
            background-color: #eef1f6;
            color: #17223A;
            font-weight: 600;
            padding-left: 20px;
            border-left: 3px solid var(--primary-color);
        }
.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #17223A;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    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: 12px;
    font-weight: 600;
    color: #111827;
}

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

        .menu-parent.open svg {
            stroke: #ffffff;
        }
    /* Parent active state ONLY */
.menu-parent.active {
    background-color: var(--primary-color);
    color: #ffffff;
}
        /* Icon + arrow turn white */
        .menu-parent.active svg {
            stroke: #ffffff;
        }
    .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: 78px;
    min-width: 78px;
    max-width: 78px;
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    font-family: system-ui, sans-serif;
    overflow-x: hidden;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
    /* EXPANDED */
    .sidebar.expanded {
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }

/* MAIN CONTENT */
.main-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-page);
}

.settings-arrow-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.settings-arrow-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.logo {
    height: 36px;
    width: auto;
    display: block;
}

/* SECOND BAR */
.header-bottom {
    height: 32px;
    width: 100%;
    background-color: var(--header-bottom-bg);
    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: rgba(127, 127, 127, 0.15);
    }


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

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

.role-pill {
    height: 17px;
    padding: 0 12px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 550;
    background-color: var(--role-pill-bg);
    color: var(--role-pill-text);
    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: 12px;
        gap: 6px; /* space between icon and text */
    }

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

    .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: 12px;
        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;
    }
}


.excel-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 4px 16px;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: 11px;
}

/* Donor Add Button */
.excel-add-btn {
    background: #239e2e;
    color: var(--text-inverse); /* ✅ */
    border: none;
}
/*settings*/

/* REMOVE WIDTH CONSTRAINT */
.settings-content {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
}
/* TITLE */
.settings-title {
    font-size: 12px;
    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: 12px;
    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 4px;
    background: var(--border-color);
}

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

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



/* CHEVRON */
.chevron {
    font-size: 12px;
    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: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.fab_penny {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    background: transparent;
    border: none;
    padding: 0;
    /* IMPORTANT: removes hidden styles like shadow/outline */
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}


#pennyLottie {
    width: 100%;
    height: 100%;
    background: none !important;
}

.fab_penny:hover {
    transform: scale(1.05);
    transition: 0.2s ease;
}

#pennyFab:focus,
#pennyFab:active,
#pennyFab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#pennyLottie svg,
#pennyLottie canvas {
    width: 100% !important;
    height: 100% !important;
    background: none !important;
    display: block;
}

#pennyFab.fab_penny {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    appearance: none;
    -webkit-appearance: none;
}


/* ==========================================
   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: 12px;
    line-height: 1;
    margin-top: 2px;
    color: var(--text-primary);
}

/* =========================
   LABEL
========================= */
.ds-label {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* =========================
   WRAPPER
========================= */
.ds-wrapper {
    position: relative;
    width: 100%;
    font-family: Inter, sans-serif;
}

/* =========================
   MAIN INPUT
========================= */
.ds-input-box {
    position: relative;
    width: 100%;
}

.ds-main-input {
    width: 100%;
    height: 58px;
    border-radius: 14px;
    padding: 0 58px 0 20px;
    font-size: 16px;
    transition: 0.2s ease;
    border: 1px solid var(--delivery-table-shell-border);
    background: var(--bg-input);
    color: var(--text-primary);
}

    .ds-main-input:focus {
        border-color: var(--primary);
        background: var(--bg-card);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

/* =========================
   ARROW BUTTON
========================= */
.ds-arrow-btn {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    width: auto;
    height: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: 0.2s ease;
}

    .ds-arrow-btn:hover {
        color: var(--primary);
        transform: translateY(-50%) scale(1.05);
    }

.ds-simple-arrow {
    width: 20px;
    height: 20px;
}
/* =========================
   LABEL
========================= */
.ds-label {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* =========================
   WRAPPER
========================= */
.ds-wrapper {
    position: relative;
    width: 100%;
    font-family: Inter, sans-serif;
}

/* =========================
   MAIN INPUT
========================= */
.ds-input-box {
    position: relative;
    width: 100%;
}

.ds-main-input {
    width: 100%;
    height: 58px;
    border-radius: 14px;
    padding: 0 58px 0 20px;
    font-size: 16px;
    transition: 0.2s ease;
    border: 1px solid var(--delivery-table-shell-border);
    background: var(--bg-input);
    color: var(--text-primary);
}

    .ds-main-input:focus {
        border-color: var(--primary);
        background: var(--bg-card);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

/* =========================
   ARROW BUTTON
========================= */
.ds-arrow-btn {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    width: auto;
    height: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: 0.2s ease;
}

    .ds-arrow-btn:hover {
        color: var(--primary);
        transform: translateY(-50%) scale(1.05);
    }

.ds-simple-arrow {
    width: 20px;
    height: 20px;
}
/* =========================
   DROPDOWN
========================= */
.ds-dropdown {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    width: 100%;
    height: 620px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

/* =========================
   TOPBAR
========================= */
.ds-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}

.ds-search-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

/* =========================
   FILTER AREA
========================= */
.ds-filter-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card-soft);
    overflow-x: auto;
    flex-shrink: 0;
}

    .ds-filter-fields::-webkit-scrollbar {
        height: 5px;
    }

    .ds-filter-fields::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 20px;
    }

/* =========================
   FILTER INPUT
========================= */
.ds-search-input {
    min-width: 145px;
    width: 145px;
    height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    background: var(--bg-card);
    outline: none;
    transition: 0.2s ease;
    flex-shrink: 0;
    color: var(--text-primary);
}

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

    .ds-search-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

/* =========================
   BUTTON ROW
========================= */
.ds-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.ds-apply-btn {
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ds-reset-btn {
    border: 1px solid var(--border-strong);
    background: var(--btn-bg);
    color: var(--text-primary);
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* =========================
   LIST AREA
========================= */
.ds-list-wrap {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-card);
    min-height: 0;
}

    .ds-list-wrap::-webkit-scrollbar {
        width: 7px;
    }

    .ds-list-wrap::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 20px;
    }

/* =========================
   LIST ITEM
========================= */
.ds-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.18s ease;
}

    .ds-item:hover {
        background: var(--bg-hover);
    }

/* =========================
   LEFT SIDE
========================= */
.ds-left {
    flex: 1;
    min-width: 0;
}

.ds-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   META ROW
========================= */
.ds-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* EACH META ITEM */
.ds-phone,
.ds-address,
.ds-zip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SMALL SVG ICON */
.ds-meta-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* =========================
   RIGHT SIDE
========================= */
.ds-right {
    width: 240px;
    text-align: right;
    flex-shrink: 0;
}

.ds-email {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

    .ds-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ds-right {
        width: 100%;
        text-align: left;
    }

    .ds-meta {
        gap: 10px;
    }

    .ds-phone,
    .ds-address,
    .ds-zip {
        max-width: 100%;
    }
}

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

.status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 24px;
    border-radius: 8px;
    border: 2px solid var(--status-border);
    background-color: var(--status-bg);
    margin-bottom: 4px;
}

.status-text {
    flex: 1;
    color: var(--status-text);
}

/* 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: 12px;
    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: 12px;
    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-container {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

.phone-ui {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px;
    background: white;
}

.country-select {
    width: 180px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
}

.country-code {
    padding: 0 10px;
    font-size: 12px;
    color: #111827;
    white-space: nowrap;
}

.divider {
    width: 1px;
    height: 25px;
    background: #e5e7eb;
    margin: 0 6px;
}

.phone-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
}

.country-box {
    padding: 0 10px;
    font-size: 12px;
    color: #111827;
    white-space: nowrap;
}

.code-box {
    padding: 0 10px;
    font-size: 12px;
    color: #111827;
}

.divider {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
}

.phone-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    padding-left: 10px;
}
/* =========================
   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: 12px;
    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: var(--header-bottom-bg);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    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;
}

/* ==========================================
   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: 12px;
    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: 12px;
        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: 12px;
    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: 12px;
    color: #9ca3af;
    cursor: pointer;
}

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

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

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

/* ==========================================
   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: 12px;
    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: 12px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        color: #374151;
    }

    .filters-row select {
        padding: 8px 12px;
        font-size: 12px;
        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: 12px;
    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: 12px;
    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;
    height: auto;
}

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

.icon {
    font-size: 12px;
}

input,
select {
    width: 100%;
    height: 38px;
    border-radius: 4px;
    border: 1px solid #d6d6d6;
    padding: 0 12px;
    font-size: 12px;
    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: 12px;
    }

    .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;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 0 16px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    box-shadow: 0 3px 8px rgba(20, 40, 80, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-primary:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        transform: translateY(-1px);
    }

    .btn-primary:active {
        background: linear-gradient(90deg, #0c1933 0%, #1d355f 100%);
        transform: translateY(0px);
    }
/*    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: 12px;
        color: var(--text-secondary);
        margin: 0;
    }

    .summary-content .amount {
        font-size: 12px;
        font-weight: bold;
        margin: 0;
        color: var(--text-primary);
    }

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

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

    .filters input, .filters select {
        padding: 3px 8px;
        height: 34px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 12px;
        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: 12px;
    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: 38px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--bg-input);
        color: grey;
        font-size: 12px;
        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 #ccc;
    background-color: transparent; /* default white */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    margin-bottom: 2px;
}

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

    /* Active state: when filters are ON */
    .btn-download.active {
        background-color: #17223A; /* dark blue while filters are visible */
    }
/*.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: -4px;
}

.staff-name-view {
    font-size: 12px;
    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: 4px 18px;
    background-color: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    margin-top: 15px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08), 0 0 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .card.revenue-item h3,
    .card.revenue-item p {
        margin: 2px 0;
        line-height: 1.2;
    }

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

.revenue-name {
    all: unset;
    font-size: 12px;
    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;
}

.revenue-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 👈 key change */
    margin: 0;
    padding: 0;
}

.card.revenue-item {
    margin: 0;
    padding: 8px 14px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    /*border: 1px solid rgba(0, 0, 0, 0.16);*/
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transform: none;
}

.revenue-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /*margin-bottom: 3px;*/ /* 👈 space between top & footer */
}

.expense-footer-row {
    margin-top: 6px;
}

.divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 2px 0; /* 👈 balanced spacing */
}

.donor-left {
    display: flex;
    align-items: center;
    gap: 10px; /* 👈 icon + text spacing */
}

.btn-delete-revenue,
.btn-edit-revenue {
    flex: 1;
    height: 32px;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    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: 2px solid #848080;
    transition: all 0.2s ease;
    font-weight: 550;
}

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

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

.popup-card {
    background: rgba(227, 227, 227, 0.57);
    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: 12px;
}

.popup-new-small {
    width: 460px;
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.manual-key {
    text-align: center;
    margin-top: 8px;
    white-space: nowrap;
}


.popup-close {
    border: none;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    background: none;
}

.popup-close-center {
    border: none;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* connected bank account */
.connected-client-header {
    align-items: flex-start;
    margin-bottom: 18px;
}

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

    .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: 12px;
    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: 12px;
    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: 12px;
    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;
        }
/* DARK MODE SIDEBAR FIX */
[data-theme="dark"] .menu-item.active,
[data-theme="dark"] .menu-parent.active,
[data-theme="dark"] .menu-parent.open {
    background-color: #111111;
    color: #f5f5f5;
    border: 1px solid rgba(255,255,255,0.1);
}

    [data-theme="dark"] .menu-item.active svg,
    [data-theme="dark"] .menu-parent.active svg {
        stroke: #f5f5f5;
    }

.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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        padding: 18px 16px;
        text-align: left;
        border-bottom: 1px solid #d7d7d7;
    }

    .bank-data-table tbody td {
        padding: 18px 16px;
        font-size: 12px;
        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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        padding: 18px 16px;
        text-align: left;
        border-bottom: 1px solid #d7d7d7;
    }

    .bank-data-table tbody td {
        padding: 18px 16px;
        font-size: 12px;
        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: 12px;
    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: 12px;
    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: 12px;
}


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

    .donor-card-header h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

.card-title7 {
    font-family: "Inter", sans-serif;
    font-weight: 600; /* 🔥 SemiBold */
    font-size: 12px; /* 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;
    }

.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination-info {
    font-size: 14px;
    color: #6b7280;
}

.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: 12px;
    cursor: pointer;
}

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

.vd-title {
    font-size: 12px;
    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: 12px;
    }

.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: 12px;
        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: 12px;
        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: 12px;
    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: 12px;
        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: 12px;
        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: 12px;
        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: 12px;
    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: 12px;
    font-weight: 600;
    color: #111827;
}

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

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

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

.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: 12px;
        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: 12px;
        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: 12px;
        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: 12px;
    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: 12px;
        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: 12px;
        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);
    }

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

.input-field2 {
    width: 100%;
    padding-right: 35px; /* space for cross */
}

.clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: #888;
}

    .clear-btn:hover {
        color: #000;
    }

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

.card.journal-entry-card {
    margin-bottom: 8px !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: 12px;
    font-weight: 700;
    color: var(--journal-entry-title-color);
    line-height: 1.2;
}

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

.journal-entry-desc {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--journal-entry-desc-color);
    line-height: 1.3;
}

.journal-entry-date {
    margin: 0;
    font-size: 10px;
    font-weight: 400;
    color: var(--journal-entry-date-color);
    line-height: 1.3;
}

.journal-entry-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 120px;
}

.journal-entry-amount {
    font-size: 12px;
    font-weight: 700;
    color: var(--journal-entry-amount-color);
    text-align: right;
    width: 100%;
}

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

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

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

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

/* 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: 12px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.25;
}

.journal-date-box {
    background: var(--journal-date-box-bg);
    border-radius: 8px;
    padding: 14px 14px 12px 14px;
    margin-bottom: 22px;
}

.journal-date-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--journal-date-label-color);
    margin-bottom: 4px;
}

.journal-date-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--journal-date-value-color);
    line-height: 1.3;
}

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

.journal-detail-heading {
    font-size: 12px;
    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: 12px;
    font-weight: 400;
    color: #4b5563;
}

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

.journal-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    font-size: 12px;
    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: 12px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

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

    .add-journal-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        font-weight: 600;
        text-align: left;
        padding: 18px 16px;
        border-bottom: 1px solid #dddddd;
    }

    .journal-table tbody td {
        padding: 20px 16px;
        font-size: 12px;
        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: 12px;
            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: 12px;
    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: 12px;
    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: 12px;
    font-weight: 700;
    color: var(--journal-section-title-color);
}

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

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

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

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

    .journal-table tbody td {
        padding: 20px 16px;
        font-size: 12px;
        color: var(--journal-table-body-text);
        border-bottom: 1px solid var(--journal-table-row-border);
        vertical-align: middle;
        background: var(--journal-table-row-bg);
    }

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

.journal-entry-code {
    font-weight: 700;
    color: var(--journal-entry-code-color);
}

.journal-money {
    font-weight: 700;
    color: var(--journal-money-color);
}

.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: 12px;
            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: 12px;
        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: 12px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   DONOR INFO
   =============================== */
.vd-info h4 {
    font-size: 12px;
    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: 12px;
    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: 5px; /* 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;
}

/*.excel-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: 12px;*/ /* slightly larger text */
/*font-weight: 500;
    background: #239e2e;
    color: #ffffff;
    border: none;
    border-radius: 8px;*/ /* smoother, modern look */
/*cursor: pointer;
    white-space: nowrap;
}*/

.excel-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 4px 16px;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: 11px;
}

/* Donor Add Button */
.excel-add-btn {
    background: #239e2e;
    color: var(--text-inverse); /* ✅ */
    border: none;
}

/* ===== 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: 12px; /* 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: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donor-info h4 {
    margin: 0;
    font-size: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
        }

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

.bank-name {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 2px;
}

.bank-name-text {
    max-width: 140px; /* adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.text-grey-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--border-strong);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 4px;
    line-height: 1;
}

/* 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: 12px;
        margin-bottom: 6px;
    }


.form-textarea {
    font-size: 12px;
    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,
.btn-ne {
    flex: 1;
    padding: 10px 0;
    font-weight: 600;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* extra height variant */
.btn-ne {
    height: 39px;
}

/* CANCEL BUTTON */
.btn-cancel {
    background-color: var(--bg-card-soft);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.btn-submit {
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(20, 40, 80, 0.20), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-submit:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        transform: translateY(-1px);
    }
.btn-submit2 {
    background: var(--surface-soft);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-submit2:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
        transform: translateY(-1px);
    }

.btn-submit,
.btn-submit2 {
    flex: 1;
}
.btn-icon {
    font-size: 12px;
}

.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: 12px;
    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: 12px;
    font-weight: 400;
    color: var(--summary-label-color);
    margin-bottom: 10px;
    line-height: 1.2;
}

.summary-value {
    font-size: 12px;
    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: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* Right amount */
.order-summary-amount {
    font-size: 12px;
    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: 12px;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

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

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

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

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

/* 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: 22px;
    font-weight: 700;
    color: var(--revenue-modal-title-color);
}

.revenue-close-btn {
    background: transparent;
    border: none;
    font-size: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
    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: 12px;
        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: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(20, 40, 80, 0.20), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

    .revenue-modal-submit-btn:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        transform: translateY(-1px);
    }

    .revenue-modal-submit-btn:active {
        transform: translateY(0px);
    }

    .revenue-modal-submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

/* 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: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--donation-title-color);
}

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

/* CLOSE BUTTON */
.donation-ui-close-btn {
    background: transparent;
    border: none;
    font-size: 12px;
    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: 12px; /* 👈 optional for better look */
}

/* SECTION TITLE */
.donation-ui-card span {
    font-size: 12px;
    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 {
    border: none;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    box-shadow: 0 4px 10px rgba(20, 40, 80, 0.20), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .donation-ui-btn-submit:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        box-shadow: 0 6px 14px rgba(20, 40, 80, 0.28), 0 3px 6px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
    }
/* 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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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;
    }

    .quick-btn .quick-icon1 img {
        display: block;
        width: 7px;
        height: 14px;
        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: 12px;
    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: 12px;
    font-weight: 800;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

    .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: 12px;
    color: #848181;
}

.menu-parent.active .text {
    color: #ffffff !important;
}

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


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

/* ITEMS GRID */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 28px;
    padding: 22px 18px 22px 30px;
}
.coa-dropdown-item {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 13px;
    transition: background 0.2s;
}

    .coa-dropdown-item:hover {
        background: var(--bg-hover);
    }

    .coa-dropdown-item.delete {
        color: var(--danger-color);
    }

    .coa-dropdown-item.disabled {
        color: var(--text-muted);
        cursor: not-allowed;
    }

.coa-dropdown-menu {
    position: absolute;
    top: 22px;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 0;
    box-shadow: var(--shadow-sm);
    z-index: 999;
    display: flex;
    flex-direction: column;
    min-width: 110px;
}
.popup-input::placeholder {
    color: grey;
    font-size: 0.85rem; /* smaller placeholder text */
    opacity: 1;
}

.toggle-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg-card);
    margin-top: 8px;
}

.toggle-text {
    display: flex;
    flex-direction: column;
}

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

.toggle-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.btn-row-p {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    width: 100%;
}

.new-bt-pr,
.new-bt-se {
    flex: 1; /* KEY: makes both take full available space equally */
    width: 100%;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
}

/* PRIMARY */
.new-bt-pr {
    background: linear-gradient(180deg, #1f2f4a 0%, #0f1a2f 100%);
    color: white;
    border: none;
    padding: 4px 14px;
}

/* SECONDARY */
.new-bt-se {
    background: #fff;
    color: #111;
    border: 1.5px solid #cfcfcf;
    padding: 4px 14px;
}

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

/* Company Modal Styles */
.company-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.company-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.company-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.company-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.company-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .company-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.company-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.company-section {
    margin-bottom: 32px;
}

    .company-section:last-child {
        margin-bottom: 0;
    }

.company-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.company-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.company-form-group.full-width {
    grid-column: 1 / -1;
}

.company-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.company-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .company-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.company-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}

.company-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

    .company-status-label.active {
        background: #dcfce7;
        color: #16a34a;
    }

    .company-status-label.inactive {
        background: #fee2e2;
        color: #ef4444;
    }

.company-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .company-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.company-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

    .company-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

input:checked + .company-slider {
    background-color: #17223a;
}

    input:checked + .company-slider:before {
        transform: translateX(24px);
    }

/* Upload Area */
.company-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
}

    .company-upload-area:hover {
        border-color: #17223a;
        background: #f1f5f9;
    }

.company-upload-icon {
    color: #94a3b8;
    margin-bottom: 12px;
}

.company-upload-text {
    color: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.company-upload-main {
    margin: 0;
    font-weight: 500;
}

/* File List */
.company-file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.company-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

    .company-file-item:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.company-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-file-icon {
    color: #17223a;
}

.company-file-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.company-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

    .company-file-remove:hover {
        background: #fee2e2;
        color: #ef4444;
    }

/* Modal Footer */
.company-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.company-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .company-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.company-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .company-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .company-modal-container {
        max-height: 100vh;
    }

    .company-modal-content {
        padding: 24px;
    }
}

.company-file-input {
    display: none !important;
}

.company-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
    position: relative;
}

    .company-upload-area:hover {
        border-color: #17223a;
        background: #f1f5f9;
    }
/* Fix for the Search Bar */
.coa-search-wrapper2 {
    position: relative;
    display: flex;
    align-items: center;
}

.coa-search-icon2 {
    position: absolute;
    left: 12px;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none;
}

.coa-search-box2 {
    padding-left: 36px !important;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    width: 250px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-card-soft);
}

    .coa-search-box2:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--focus-ring);
    }

/* inhouse Modal Styles */
.fund-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.fund-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.fund-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.fund-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.fund-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .fund-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.fund-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.fund-section {
    margin-bottom: 32px;
}

    .fund-section:last-child {
        margin-bottom: 0;
    }

.fund-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.fund-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fund-form-group.full-width {
    grid-column: 1 / -1;
}

.fund-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.fund-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .fund-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.fund-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.fund-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .fund-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.fund-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .fund-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .fund-modal-container {
        max-height: 100vh;
    }

    .fund-modal-content {
        padding: 24px;
    }
}

/* External Modal Styles */
.partner-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.partner-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.partner-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.partner-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.partner-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .partner-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.partner-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.partner-section {
    margin-bottom: 32px;
}

    .partner-section:last-child {
        margin-bottom: 0;
    }

.partner-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.partner-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.partner-form-group.full-width {
    grid-column: 1 / -1;
}

.partner-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.partner-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .partner-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.partner-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}

.partner-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

    .partner-status-label.active {
        background: #dcfce7;
        color: #16a34a;
    }

    .partner-status-label.inactive {
        background: #fee2e2;
        color: #ef4444;
    }

.partner-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .partner-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.partner-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

    .partner-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

input:checked + .partner-slider {
    background-color: #17223a;
}

    input:checked + .partner-slider:before {
        transform: translateX(24px);
    }

/* Upload Area */
.partner-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
}

    .partner-upload-area:hover {
        border-color: #17223a;
        background: #f1f5f9;
    }

.partner-upload-icon {
    color: #94a3b8;
    margin-bottom: 12px;
}

.partner-upload-text {
    color: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.partner-upload-main {
    margin: 0;
    font-weight: 500;
}

/* File List */
.partner-file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partner-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

    .partner-file-item:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.partner-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.partner-file-icon {
    color: #17223a;
}

.partner-file-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.partner-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

    .partner-file-remove:hover {
        background: #fee2e2;
        color: #ef4444;
    }

/* Modal Footer */
.partner-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.partner-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .partner-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.partner-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .partner-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .partner-modal-container {
        max-height: 100vh;
    }

    .partner-modal-content {
        padding: 24px;
    }
}

/* Rep Modal Styles */
.rep-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.rep-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 750px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.rep-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.rep-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.rep-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .rep-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.rep-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.rep-section {
    margin-bottom: 32px;
}

    .rep-section:last-child {
        margin-bottom: 0;
    }

.rep-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.rep-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rep-form-group.full-width {
    grid-column: 1 / -1;
}

.rep-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.rep-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .rep-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.rep-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}

.rep-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

    .rep-status-label.active {
        background: #dcfce7;
        color: #16a34a;
    }

    .rep-status-label.inactive {
        background: #fee2e2;
        color: #ef4444;
    }

.rep-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .rep-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.rep-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

    .rep-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

input:checked + .rep-slider {
    background-color: #17223a;
}

    input:checked + .rep-slider:before {
        transform: translateX(24px);
    }

/* Modal Footer */
.rep-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.rep-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .rep-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.rep-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .rep-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .rep-modal-container {
        max-height: 100vh;
    }

    .rep-modal-content {
        padding: 24px;
    }
}

/* ISO Modal Styles */
.iso-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.iso-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.iso-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.iso-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.iso-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .iso-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.iso-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.iso-section {
    margin-bottom: 32px;
}

    .iso-section:last-child {
        margin-bottom: 0;
    }

.iso-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.iso-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.iso-form-group.full-width {
    grid-column: 1 / -1;
}

.iso-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.iso-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .iso-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.iso-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}

.iso-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

    .iso-status-label.active {
        background: #dcfce7;
        color: #16a34a;
    }

    .iso-status-label.inactive {
        background: #fee2e2;
        color: #ef4444;
    }

.iso-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .iso-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.iso-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

    .iso-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

input:checked + .iso-slider {
    background-color: #17223a;
}

    input:checked + .iso-slider:before {
        transform: translateX(24px);
    }

/* Upload Area */
.iso-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
}

    .iso-upload-area:hover {
        border-color: #17223a;
        background: #f1f5f9;
    }

.iso-upload-icon {
    color: #94a3b8;
    margin-bottom: 12px;
}

.iso-upload-text {
    color: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.iso-upload-main {
    margin: 0;
    font-weight: 500;
}

/* File List */
.iso-file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iso-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

    .iso-file-item:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.iso-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.iso-file-icon {
    color: #17223a;
}

.iso-file-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.iso-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

    .iso-file-remove:hover {
        background: #fee2e2;
        color: #ef4444;
    }

/* Modal Footer */
.iso-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.iso-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .iso-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.iso-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .iso-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .iso-modal-container {
        max-height: 100vh;
    }

    .iso-modal-content {
        padding: 24px;
    }
}

/* Participant Modal Styles */
.participant-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.participant-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.participant-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.participant-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.participant-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .participant-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.participant-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.participant-section {
    margin-bottom: 32px;
}

    .participant-section:last-child {
        margin-bottom: 0;
    }

.participant-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.participant-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.participant-form-group.full-width {
    grid-column: 1 / -1;
}

.participant-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.participant-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .participant-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.participant-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}

.participant-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

    .participant-status-label.active {
        background: #dcfce7;
        color: #16a34a;
    }

    .participant-status-label.inactive {
        background: #fee2e2;
        color: #ef4444;
    }

.participant-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .participant-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.participant-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

    .participant-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

input:checked + .participant-slider {
    background-color: #17223a;
}

    input:checked + .participant-slider:before {
        transform: translateX(24px);
    }

/* Upload Area */
.participant-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
}

    .participant-upload-area:hover {
        border-color: #17223a;
        background: #f1f5f9;
    }

.participant-upload-icon {
    color: #94a3b8;
    margin-bottom: 12px;
}

.participant-upload-text {
    color: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.participant-upload-main {
    margin: 0;
    font-weight: 500;
}

/* File List */
.participant-file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

    .participant-file-item:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.participant-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.participant-file-icon {
    color: #17223a;
}

.participant-file-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.participant-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

    .participant-file-remove:hover {
        background: #fee2e2;
        color: #ef4444;
    }

/* Modal Footer */
.participant-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.participant-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .participant-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.participant-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .participant-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .participant-modal-container {
        max-height: 100vh;
    }

    .participant-modal-content {
        padding: 24px;
    }
}

/* inhouse Account Modal Styles */
.account-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.account-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.account-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.account-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.account-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .account-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.account-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.account-section {
    margin-bottom: 32px;
}

    .account-section:last-child {
        margin-bottom: 0;
    }

.account-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.account-form-group.full-width {
    grid-column: 1 / -1;
}

.account-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.account-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .account-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

/* Modal Footer */
.account-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.account-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .account-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.account-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .account-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .account-modal-container {
        max-height: 100vh;
    }

    .account-modal-content {
        padding: 24px;
    }
}

/* Client Modal Styles */
.client-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.client-modal-container {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.client-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e2e8f0;
}

.client-modal-title {
    font-family: 'Megabyte', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.client-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

    .client-modal-close:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.client-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.client-section {
    margin-bottom: 32px;
}

    .client-section:last-child {
        margin-bottom: 0;
    }

.client-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.client-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.client-form-group.full-width {
    grid-column: 1 / -1;
}

.client-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.client-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s;
    box-sizing: border-box;
}

    .client-input:focus {
        outline: none;
        border-color: #17223a;
        background: white;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
    }

.client-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
}

.client-status-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s;
}

    .client-status-label.active {
        background: #dcfce7;
        color: #16a34a;
    }

    .client-status-label.inactive {
        background: #fee2e2;
        color: #ef4444;
    }

.client-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .client-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.client-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: 0.3s;
}

    .client-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

input:checked + .client-slider {
    background-color: #17223a;
}

    input:checked + .client-slider:before {
        transform: translateX(24px);
    }

/* Upload Area */
.client-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
}

    .client-upload-area:hover {
        border-color: #17223a;
        background: #f1f5f9;
    }

.client-upload-icon {
    color: #94a3b8;
    margin-bottom: 12px;
}

.client-upload-text {
    color: #64748b;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.client-upload-main {
    margin: 0;
    font-weight: 500;
}

/* File List */
.client-file-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

    .client-file-item:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.client-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-file-icon {
    color: #17223a;
}

.client-file-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.client-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

    .client-file-remove:hover {
        background: #fee2e2;
        color: #ef4444;
    }

/* Modal Footer */
.client-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 32px;
    border-top: 1px solid #e2e8f0;
}

.client-btn-save {
    background: linear-gradient(135deg, #17223a 0%, #1e2d4d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
}

    .client-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

.client-btn-cancel {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .client-btn-cancel:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #cbd5e1;
    }

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

    .client-modal-container {
        max-height: 100vh;
    }

    .client-modal-content {
        padding: 24px;
    }
}

/*pagination:*/

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

.page-btn {
    width: 30px;
    height: 30px;
    background-color: var(--btn-bg);
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
    font-weight: bold;
    color: var(--btn-prim-text);
}

    .page-btn.active {
        background-color: var(--primary);
        color: var(--text-inverse);
    }

    .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-page);
        color: var(--text-secon);
        border: 1px solid var(--border-strong);
    }

    .filters select {
        width: 160px;
        background: var(--bg-page);
        color: var(--text-secon);
        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: 12px;
}

.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: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

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

.clickable {
    cursor: pointer;
}

.chevron {
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
}

.chevron {
    font-size: 12px;
    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: 12px;
    line-height: 1.1;
}

.subcategory-name {
    color: var(--text-muted);
    font-size: 12px;
    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;
    box-shadow: var(--review-bill-modal-shadow);
    z-index: 3000;
    overflow-y: auto;
    max-height: 90vh;
}

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

    .review-bill-header h3 {
        font-size: 22px;
        font-weight: 700;
        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: 12px;
        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: 12px;
    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: 12px;
        font-weight: 600;
        margin: 0;
        color: var(--text-primary);
    }

.close-btn {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: #000000;
    padding: 4px;
}

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

    .create-expense-body label {
        font-size: 12px;
        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: 12px;
        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: 12px;
        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: 12px;
        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: 12px;
}

.staff-header p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.staff-back {
    background: none;
    border: none;
    font-size: 12px;
    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: 4px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    transition: all 0.2s ease;
}

    /* Active state */
    .inactive-toggle.active {
        background: var(--primary);
        color: var(--text-inverse);
        border-color: var(--primary);
    }
/* 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: 12px;
}

.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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
}

.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: 12px;
    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: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-card p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.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 rgba(255,255,255,0.08);
    background: linear-gradient( 145deg, #56627f 0%, #434d68 50%, #343d54 100% );
    color: white;
    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: 12px;
        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;
}

* Base Container */
.mga-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important; /* Matches standard app padding */
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
}

/* Add a little top spacing to the banner since we removed container padding */
.mga-banner {
    background: linear-gradient(135deg, #2a3f68 0%, #17223a 100%) !important;
    box-shadow: 0 4px 20px rgba(42, 63, 104, 0.25);
    margin-top: 20px;
}

/* Or if you want it even closer to sidebar */
@media (min-width: 768px) {
    .mga-container {
        margin-left: 32px; /* Adjust this value to control distance from sidebar */
    }
}



.custom-dropdown44 {
    position: relative;
    width: 100%;
}

.dropdown44-input {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: var(--bg-input);
    padding: 0px 10px;
    height: 34px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px; /* Smaller text */
    color: #666;
}

.dropdown44-arrow {
    font-size: 12px;
}

.dropdown44-menu {
    position: absolute;
    width: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 5px 20px rgba(0,0,0,.12);
}

.dropdown44-group {
    padding: 6px 0;
}

.group44-title {
    font-weight: 400;
    padding: 8px 12px;
    background: #f5f5f5;
    color: #666;
}

.dropdown44-item {
    padding: 10px 12px;
    cursor: pointer;
}

    .dropdown44-item:hover {
        background: #f3f7ff;
    }





/* Top Banner */
.mga-banner {
    background: #1e293b;
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 24px;
}

.mga-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mga-avatar {
    width: 60px;
    height: 60px;
    /* Semi-transparent white background for the glass effect */
    background: rgba(255, 255, 255, 0.08) !important;
    /* The magic: blurs whatever is behind the element */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Crisp, subtle border */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
    /* Soft drop shadow to lift it off the banner */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

    /* Optional: Add a subtle glow on hover for extra polish */
    .mga-avatar:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

.mga-user-info h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mga-verified-badge {
    font-size: 11px;
    font-weight: 600;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mga-user-info p {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: #94a3b8;
}

.mga-banner-right {
    width: 250px;
}

.mga-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.mga-progress-track {
    height: 6px;
    background: #334155;
    border-radius: 3px;
    overflow: hidden;
}

.mga-progress-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
}

/* Tabs */
.mga-tabs {
    display: flex;
    gap: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 24px;
    width: fit-content;
}

.mga-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

    .mga-tab svg {
        width: 16px;
        height: 16px;
    }

    .mga-tab:hover {
        background: #f8fafc;
        color: #0f172a;
    }

    .mga-tab.active {
        background: linear-gradient(135deg, #1e2d4d 0%, #17223a 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(23, 34, 58, 0.3);
    }

        .mga-tab.active:hover {
            background: linear-gradient(135deg, #253559 0%, #17223a 100%) !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(23, 34, 58, 0.4);
        }

/* Layout Grids */
.mga-grid-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    width: 100%;
}

.mga-col-left, .mga-col-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mga-mt-16 {
    margin-top: 16px;
}

.mga-mt-24 {
    margin-top: 24px;
}

.mga-mb-0 {
    margin-bottom: 0 !important;
}

.mga-mb-12 {
    margin-bottom: 12px;
}

.mga-mb-16 {
    margin-bottom: 16px;
}

.mga-mb-20 {
    margin-bottom: 20px;
}

/* Cards */
.mga-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.mga-card-small {
    padding: 22px 24px;
}

.mga-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.mga-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .mga-title-row h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
    }

.mga-icon {
    width: 20px;
    height: 20px;
    color: #0f172a;
}

.mga-desc {
    margin: 8px 0 20px 0;
    font-size: 13px;
    color: #64748b;
}

/* Badges */
.mga-badge-outline {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 4px 12px;
    border-radius: 20px;
    background: white;
}

.mga-badge-success {
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: #22c55e;
    padding: 3px 10px;
    border-radius: 12px;
}

.mga-badge-current {
    font-size: 10px;
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Forms */
.mga-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.mga-form-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 5px;
}

.mga-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Unified styling for Inputs, Selects, and Date Pickers */
.mga-field input, .mga-field-full input,
.mga-field select, .mga-field-full select,
.mga-field input[type="date"], .mga-field-full input[type="date"] {
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    background: #f8fafc;
    outline: none;
    transition: border 0.2s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: #0f172a;
}

/* Custom Dropdown Arrow */
.mga-field select, .mga-field-full select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* SVG Arrow Icon */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23334155%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px top 50%;
    background-size: 12px auto;
    padding-right: 30px; /* Space for the arrow */
    cursor: pointer;
}

    /* Focus States (Blue Border) */
    .mga-field input:focus, .mga-field-full input:focus,
    .mga-field select:focus, .mga-field-full select:focus,
    .mga-field input[type="date"]:focus, .mga-field-full input[type="date"]:focus {
        border-color: #17223a;
        box-shadow: 0 0 0 3px rgba(23, 34, 58, 0.1);
        background: white;
    }

/* Meta Lists */
.mga-meta-list {
    display: flex;
    flex-direction: column;
}

.mga-meta-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

    .mga-meta-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.mga-meta-label {
    color: #64748b;
}

.mga-meta-val {
    font-weight: 600;
    color: #0f172a;
}

/* Footer & Buttons */
.mga-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.1px;
}

.mga-btn-primary {
    background: linear-gradient(135deg, #17223a 0%, #2a3b5e 100%);
    color: white;
    border: none;
    border-radius: 8px;
    height: 42px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(23, 34, 58, 0.3);
    transition: all 0.3s ease;
}

    .mga-btn-primary:hover {
        background: linear-gradient(135deg, #0d1321 0%, #17223a 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(23, 34, 58, 0.4);
    }

/* Sessions */
.mga-session-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mga-session-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mga-device-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mga-device-icon svg {
        width: 20px;
        height: 20px;
    }

.mga-bg-blue {
    background: #eff6ff;
}

.mga-text-blue {
    color: #2563eb;
}

.mga-bg-green {
    background: #f0fdf4;
}

.mga-text-green {
    color: #16a34a;
}

.mga-session-title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.mga-session-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.mga-btn-revoke {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* 2FA Items */
.mga-tfa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .mga-tfa-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.mga-tfa-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mga-tfa-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mga-tfa-icon svg {
        width: 18px;
        height: 18px;
    }

.mga-bg-indigo {
    background: #e0e7ff;
}

.mga-text-indigo {
    color: #4f46e5;
}

.mga-bg-amber {
    background: #fef3c7;
}

.mga-text-amber {
    color: #d97706;
}

.mga-bg-rose {
    background: #ffe4e6;
}

.mga-text-rose {
    color: #e11d48;
}

.mga-tfa-title {
    font-size: 14px;
    font-weight: 600;
}

.mga-tfa-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.mga-btn-link {
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Toggles */
.mga-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .mga-toggle-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.mga-toggle-title {
    font-size: 14px;
    font-weight: 600;
}

.mga-toggle-desc {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.mga-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .mga-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.mga-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 24px;
    transition: .3s;
}

    .mga-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: .3s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

input:checked + .mga-slider {
    background-color: #17223a;
}

    input:checked + .mga-slider:before {
        transform: translateX(20px);
    }

/* Danger Zone */
.mga-danger-zone {
    border: 1px solid #fecaca;
    background: #fffcfc;
}

.mga-text-danger {
    color: #ef4444;
    margin: 0 0 4px 0 !important;
}

.mga-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mga-btn-danger {
    background: white;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .mga-btn-danger:hover {
        background: #fef2f2;
    }

/* Modal */
.mga-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.mga-modal-box {
    background: white;
    border-radius: 12px;
    width: 460px;
    padding: 32px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

.mga-modal-header {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.mga-modal-icon-bg {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    flex-shrink: 0;
}

.mga-modal-header h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.mga-modal-header p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.mga-modal-list {
    margin: 0 0 24px 0;
    padding: 0;
    list-style: none;
}

    .mga-modal-list li {
        font-size: 13px;
        color: #ef4444;
        padding: 10px 12px;
        background: #fef2f2;
        border-radius: 8px;
        margin-bottom: 8px;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

        .mga-modal-list li::before {
            content: "⚠️";
            font-size: 12px;
        }

.mga-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mga-btn-danger-full {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .mga-btn-danger-full:hover {
        background: #dc2626;
    }

.mga-btn-text {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
}

    .mga-btn-text:hover {
        color: #0f172a;
    }
/* Add more spacing to password section */
.mga-card:has(.mga-title-row:has(svg[viewBox="0 0 24 24"] path[d*="M3 y="11""])),
.mga-card:has(h3:contains("Personal Information")) {
    padding: 32px !important;
}

/* Increase spacing between password fields */
.mga-field-full {
    margin-bottom: 24px !important;
}

/* Better spacing for the grid layout */
.mga-form-grid {
    gap: 24px !important;
    margin-bottom: 24px !important;
}

/* Add more space before the button */
.mga-footer {
    margin-top: 10px !important;
    padding-top: 10px !important;
}
/* ==========================================================================
   MERCHANT STATEMENTS 
   ========================================================================== */


.mst-header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.mst-main-title {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* =========================
   PRIMARY BUTTON
========================= */

.mst-btn-primary-dark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 40px !important;
    padding: 0 16px !important;
    background-color: var(--primary-dark) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

    .mst-btn-primary-dark:hover {
        background-color: var(--primary-hover) !important;
    }

/* =========================
   BANNER CARD
========================= */

.mst-profile-banner-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.mst-banner-split-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.mst-banner-node {
    display: flex !important;
    flex-direction: column !important;
}

.mst-banner-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.mst-banner-value-large {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-top: 4px !important;
}

.mst-banner-metadata-grid {
    display: flex !important;
    gap: 40px !important;
    width: 100% !important;
}

.mst-metadata-node {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

    .mst-metadata-node .mst-node-lbl {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .mst-metadata-node .mst-node-val {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

/* =========================
   KPI GRID
========================= */

.mst-metrics-four-column-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mst-kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.mst-kpi-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.mst-kpi-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    color: var(--text-primary) !important;
}

/* =========================
   CENTRAL CARD
========================= */

.mst-central-table-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================
   TOOLBAR
========================= */

.mst-action-toolbar-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.mst-search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    background: var(--bg-page) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    width: 320px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

    .mst-search-input-wrapper input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        margin-left: 8px !important;
        width: 100% !important;
        font-size: 13px !important;
        color: var(--text-secondary) !important;
    }

.mst-btn-export-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

    .mst-btn-export-trigger:hover {
        background: var(--bg-page) !important;
    }

/* =========================
   TABLE
========================= */

.mst-table-overflow-scroller {
    width: 100% !important;
    overflow-x: auto !important;
}

.mst-data-matrix-grid {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

    .mst-data-matrix-grid th {
        background: var(--bg-page) !important;
        color: var(--text-muted) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .mst-data-matrix-grid td {
        padding: 16px !important;
        font-size: 13px !important;
        border-bottom: 1px solid var(--border-light) !important;
        vertical-align: middle !important;
        color: var(--text-secondary) !important;
    }

/* =========================
   COLUMN WIDTHS
========================= */

.mst-th-col-date {
    width: 18% !important;
}

.mst-th-col-desc {
    width: 34% !important;
}

.mst-th-col-debit {
    width: 16% !important;
}

.mst-th-col-credit {
    width: 16% !important;
}

.mst-th-col-balance {
    width: 16% !important;
    padding-right: 16px !important;
}

/* =========================
   TEXT UTILITIES
========================= */

.mst-txt-danger {
    color: #ef4444 !important;
}

.mst-txt-success {
    color: #22c55e !important;
}

.mst-txt-dark {
    color: var(--text-primary) !important;
}

.mst-td-muted {
    color: var(--text-muted) !important;
}

.mst-td-semibold {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding-right: 16px !important;
}

.mst-td-dark-medium {
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

.mst-text-align-right {
    text-align: right !important;
}
/* ==========================================================================
   IN-HOUSE STATEMENTS STYLES 
   ========================================================================== */
.ihs-header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.ihs-main-title {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* =========================
   BANNER CARD
========================= */

.ihs-profile-banner-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.ihs-banner-split-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.ihs-banner-node {
    display: flex !important;
    flex-direction: column !important;
}

.ihs-banner-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.ihs-banner-value-large {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-top: 4px !important;
}

.ihs-banner-metadata-grid {
    display: flex !important;
    gap: 40px !important;
    width: 100% !important;
}

.ihs-metadata-node {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

    .ihs-metadata-node .ihs-node-lbl {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .ihs-metadata-node .ihs-node-val {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

/* =========================
   KPI GRID
========================= */

.ihs-metrics-four-column-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ihs-kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.ihs-kpi-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.ihs-kpi-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    color: var(--text-primary) !important;
}

/* =========================
   CENTRAL CARD
========================= */

.ihs-central-table-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================
   TOOLBAR
========================= */

.ihs-action-toolbar-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.ihs-search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    background: var(--bg-page) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    width: 320px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

    .ihs-search-input-wrapper input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        margin-left: 8px !important;
        width: 100% !important;
        font-size: 13px !important;
        color: var(--text-secondary) !important;
    }

.ihs-btn-export-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

    .ihs-btn-export-trigger:hover {
        background: var(--bg-page) !important;
    }

/* =========================
   TABLE
========================= */

.ihs-table-overflow-scroller {
    width: 100% !important;
    overflow-x: auto !important;
}

.ihs-data-matrix-grid {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

    .ihs-data-matrix-grid th {
        background: var(--bg-page) !important;
        color: var(--text-muted) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .ihs-data-matrix-grid td {
        padding: 16px !important;
        font-size: 13px !important;
        border-bottom: 1px solid var(--border-light) !important;
        vertical-align: middle !important;
        color: var(--text-secondary) !important;
    }

/* =========================
   COLUMN WIDTHS
========================= */

.ihs-th-col-date {
    width: 18% !important;
}

.ihs-th-col-desc {
    width: 34% !important;
}

.ihs-th-col-debit {
    width: 16% !important;
}

.ihs-th-col-phone {
    width: 16% !important;
}

.ihs-th-col-agree {
    width: 16% !important;
    padding-right: 16px !important;
}

/* =========================
   TEXT COLORS
========================= */

.ihs-txt-danger {
    color: #ef4444 !important;
}

.ihs-txt-success {
    color: #22c55e !important;
}

.ihs-txt-dark {
    color: var(--text-primary) !important;
}

.ihs-td-muted {
    color: var(--text-muted) !important;
}

.ihs-td-semibold {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding-right: 16px !important;
}

.ihs-td-dark-medium {
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

.ihs-text-align-right {
    text-align: right !important;
}

/* ==========================================================================
   ISO/REP STATEMENTS STYLES
   ========================================================================== */
/* =========================
   HEADER
========================= */

.irs-header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.irs-main-title {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* =========================
   BANNER CARD
========================= */

.irs-profile-banner-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* =========================
   BANNER STRUCTURE
========================= */

.irs-banner-split-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.irs-banner-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.irs-banner-value-large {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-top: 4px !important;
}

.irs-banner-metadata-grid {
    display: flex !important;
    gap: 40px !important;
    width: 100% !important;
}

.irs-metadata-node {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

    .irs-metadata-node .irs-node-lbl {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .irs-metadata-node .irs-node-val {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

/* =========================
   KPI GRID
========================= */

.irs-metrics-four-column-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.irs-kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.irs-kpi-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.irs-kpi-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    color: var(--text-primary) !important;
}

/* =========================
   CENTRAL CARD
========================= */

.irs-central-table-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================
   TOOLBAR
========================= */

.irs-action-toolbar-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.irs-search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    width: 320px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

    .irs-search-input-wrapper input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        margin-left: 8px !important;
        width: 100% !important;
        font-size: 13px !important;
        color: var(--text-secondary) !important;
    }

.irs-btn-export-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    background: var(--btn-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

    .irs-btn-export-trigger:hover {
        background: var(--bg-hover) !important;
    }

/* =========================
   TABLE
========================= */

.irs-table-overflow-scroller {
    width: 100% !important;
    overflow-x: auto !important;
}

.irs-data-matrix-grid {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

    .irs-data-matrix-grid th {
        background: var(--bg-hover) !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .irs-data-matrix-grid td {
        padding: 16px !important;
        font-size: 13px !important;
        border-bottom: 1px solid var(--border-color) !important;
        vertical-align: middle !important;
        color: var(--text-primary) !important;
    }

/* =========================
   TEXT UTILITIES
========================= */

.irs-txt-danger {
    color: var(--danger-color) !important;
}

.irs-txt-success {
    color: var(--success-color) !important;
}

.irs-txt-dark {
    color: var(--text-primary) !important;
}

.irs-td-muted {
    color: var(--text-muted) !important;
}

.irs-td-semibold {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding-right: 16px !important;
}

.irs-td-dark-medium {
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

.irs-text-align-right {
    text-align: right !important;
}
/* ==========================================================================
   PARTICIPANT STATEMENT STYLES
   ========================================================================== */
/* Header row layout */
.pts-header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.pts-main-title {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* Overview profile banner card */
.pts-profile-banner-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.pts-banner-split-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.pts-banner-node {
    display: flex !important;
    flex-direction: column !important;
}

.pts-banner-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.pts-banner-value-large {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-top: 4px !important;
}

.pts-banner-metadata-grid {
    display: flex !important;
    gap: 40px !important;
    width: 100% !important;
}

.pts-metadata-node {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

    .pts-metadata-node .pts-node-lbl {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .pts-metadata-node .pts-node-val {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

/* KPI cards 4 column grid layout */
.pts-metrics-four-column-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pts-kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.pts-kpi-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

.pts-kpi-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    color: var(--text-primary) !important;
}

/* Central layout data card wrapping */
.pts-central-table-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Right-aligned search and filter bar */
.pts-action-toolbar-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.pts-search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    width: 320px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

    .pts-search-input-wrapper input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        margin-left: 8px !important;
        width: 100% !important;
        font-size: 13px !important;
        color: var(--text-primary) !important;
    }

.pts-btn-export-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
    background: var(--btn-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

    .pts-btn-export-trigger:hover {
        background: var(--bg-hover) !important;
    }

/* Data matrix transcript table element */
.pts-table-overflow-scroller {
    width: 100% !important;
    overflow-x: auto !important;
}

.pts-data-matrix-grid {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

    .pts-data-matrix-grid th {
        background: var(--bg-hover) !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .pts-data-matrix-grid td {
        padding: 16px !important;
        font-size: 13px !important;
        border-bottom: 1px solid var(--border-color) !important;
        vertical-align: middle !important;
        color: var(--text-primary) !important;
    }

/* Columns width config blueprint constraints */
.pts-th-col-date {
    width: 18% !important;
}

.pts-th-col-desc {
    width: 34% !important;
}

.pts-th-col-debit {
    width: 16% !important;
}

.pts-th-col-credit {
    width: 16% !important;
}

.pts-th-col-balance {
    width: 16% !important;
    padding-right: 16px !important;
}

/* Font weight and layout color variants */
.pts-txt-danger {
    color: var(--danger-color) !important;
}

.pts-txt-success {
    color: var(--success-color) !important;
}

.pts-txt-dark {
    color: var(--text-primary) !important;
}

.pts-td-muted {
    color: var(--text-muted) !important;
}

.pts-td-semibold {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding-right: 16px !important;
}

.pts-td-dark-medium {
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

.pts-text-align-right {
    text-align: right !important;
}

/* ==========================================================================
   MANAGE ACCOUNT STYLES
   ========================================================================== */

/* ===== CONTAINER & LAYOUT ===== */
.mga-container {
    width: 100% !important;
    max-width: calc(100vw - 280px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 0 16px !important;
}

.mga-content {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding-bottom: 40px !important;
}

/* ===== BANNER SECTION ===== */
.mga-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 12px;
    padding: 20px 24px !important;
    margin-bottom: 24px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box !important;
    width: 100% !important;
}

.mga-banner-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.mga-avatar {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    color: #ffffff;
    flex-shrink: 0;
}

.mga-user-info h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mga-user-info p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #94a3b8;
}

.mga-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    color: #4ade80;
    flex-shrink: 0;
}

.mga-banner-right {
    width: 250px;
    flex-shrink: 0;
    min-width: 0;
}

.mga-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 6px;
}

.mga-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(51, 65, 85, 0.6);
    border-radius: 3px;
    overflow: hidden;
}

.mga-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ===== TABS ===== */
.mga-tabs {
    display: flex;
    gap: 6px;
    background: var(--mga-bg-tab-bar);
    border: 1px solid var(--mga-border-card);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.mga-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: var(--mga-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .mga-tab svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        flex-shrink: 0;
    }

    .mga-tab:hover {
        color: var(--mga-text-primary);
        background: var(--mga-bg-tab-hover);
    }

    .mga-tab.active {
        background: var(--mga-bg-tab-active);
        color: var(--mga-text-inverse);
    }

/* ===== GRID & CARDS ===== */
.mga-grid-2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.mga-col-left, .mga-col-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    width: 100%;
}

.mga-card {
    background: var(--mga-bg-card);
    border: 1px solid var(--mga-border-card);
    border-radius: 12px;
    padding: 24px !important;
    box-sizing: border-box !important;
    min-width: 0;
    width: 100%;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

.mga-card-small {
    padding: 20px !important;
}

.mga-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.mga-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex-wrap: wrap;
}

    .mga-title-row h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--mga-text-primary);
    }

.mga-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    color: var(--mga-text-secondary);
    flex-shrink: 0;
}

.mga-badge-outline {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid var(--mga-border-card);
    color: var(--mga-text-secondary);
    flex-shrink: 0;
}

.mga-badge-success {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--mga-text-success);
}

.mga-desc {
    margin: 0 0 20px 0;
    font-size: 13px;
    color: var(--mga-text-secondary);
}

/* ===== FORMS & FIELDS ===== */
.mga-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.mga-form-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.mga-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.mga-field, .mga-field-full {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .mga-field label, .mga-field-full label {
        font-size: 12px;
        font-weight: 600;
        color: var(--mga-text-label);
    }

    .mga-field input, .mga-field-full input, .mga-field-full select {
        background: var(--mga-bg-input);
        border: 1px solid var(--mga-border-input);
        border-radius: 8px;
        padding: 0 12px;
        height: 40px;
        box-sizing: border-box !important;
        font-size: 13px;
        color: var(--mga-text-primary);
        outline: none;
        transition: all 0.2s ease;
        width: 100% !important;
    }

        .mga-field input:focus, .mga-field-full input:focus, .mga-field-full select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

.mga-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mga-border-divider);
}

.mga-btn-primary {
    background: var(--mga-btn-primary-bg);
    color: var(--mga-text-inverse);
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mga-btn-primary:hover {
        background: var(--mga-btn-primary-hover);
    }

/* ===== META LISTS ===== */
.mga-meta-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mga-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mga-border-divider);
    flex-wrap: wrap;
    gap: 8px;
}

    .mga-meta-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.mga-meta-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mga-text-secondary);
}

.mga-meta-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--mga-text-primary);
    word-break: break-word;
}

/* ===== SESSIONS & TFA ===== */
.mga-session-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--mga-bg-card);
    border: 1px solid var(--mga-border-card);
    border-radius: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 12px;
}

.mga-session-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mga-device-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .mga-device-icon svg {
        width: 18px;
        height: 18px;
    }

.mga-bg-blue {
    background: rgba(59, 130, 246, 0.1);
}

.mga-text-blue {
    color: #3b82f6;
}

.mga-bg-green {
    background: rgba(34, 197, 94, 0.1);
}

.mga-text-green {
    color: #22c55e;
}

.mga-bg-indigo {
    background: rgba(99, 102, 241, 0.1);
}

.mga-text-indigo {
    color: #6366f1;
}

.mga-bg-amber {
    background: rgba(245, 158, 11, 0.1);
}

.mga-text-amber {
    color: #f59e0b;
}

.mga-bg-rose {
    background: rgba(244, 63, 94, 0.1);
}

.mga-text-rose {
    color: #f43f5e;
}

.mga-session-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mga-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mga-badge-current {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--mga-text-success);
}

.mga-session-sub {
    font-size: 11px;
    color: var(--mga-text-muted);
    margin-top: 2px;
}

.mga-btn-revoke {
    background: transparent;
    border: 1px solid var(--mga-border-card);
    color: var(--mga-text-secondary);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

    .mga-btn-revoke:hover {
        background: var(--mga-bg-tab-hover);
        color: var(--mga-text-danger);
        border-color: var(--mga-text-danger);
    }

.mga-tfa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--mga-border-divider);
    flex-wrap: wrap;
    gap: 12px;
}

    .mga-tfa-item:last-child {
        border-bottom: none;
    }

.mga-tfa-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mga-tfa-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.mga-tfa-sub {
    font-size: 11px;
    color: var(--mga-text-muted);
    margin-top: 2px;
}

.mga-btn-link {
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

    .mga-btn-link:hover {
        text-decoration: underline;
    }

/* ===== TOGGLES ===== */
.mga-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--mga-border-divider);
    flex-wrap: wrap;
    gap: 12px;
}

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

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

.mga-toggle-desc {
    font-size: 12px;
    color: var(--mga-text-secondary);
    margin-top: 2px;
}

.mga-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .mga-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.mga-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mga-bg-switch);
    border-radius: 24px;
    transition: .2s ease;
}

    .mga-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: .2s ease;
    }

input:checked + .mga-slider {
    background-color: #3b82f6;
}

    input:checked + .mga-slider:before {
        transform: translateX(18px);
    }

/* ===== DANGER ZONE ===== */
.mga-danger-zone {
    border: 1px solid var(--mga-border-danger);
    background: var(--mga-bg-danger);
    padding: 20px !important;
    margin-top: 24px !important;
}

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

.mga-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.mga-btn-danger {
    background: var(--mga-btn-danger-bg);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

    .mga-btn-danger:hover {
        background: var(--mga-btn-danger-hover);
    }

/* ===== MODAL ===== */
.mga-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mga-modal-box {
    background: var(--mga-bg-modal);
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    text-align: center !important;
}

.mga-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center !important;
    text-align: center !important;
}

    .mga-modal-header h3 {
        margin: 0 0 6px 0;
        font-size: 17px;
        font-weight: 600;
        color: var(--mga-text-primary);
        text-align: center !important;
    }

    .mga-modal-header p {
        font-size: 13px;
        color: var(--mga-text-secondary);
        margin: 0;
        line-height: 1.5;
        text-align: center !important;
    }

.mga-modal-icon-bg {
    width: 44px;
    height: 44px;
    background: var(--mga-bg-modal-icon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mga-text-danger);
    flex-shrink: 0;
}

.mga-modal-list {
    margin: 0;
    padding-left: 0 !important;
    list-style: none !important;
    text-align: left !important;
}

    .mga-modal-list li {
        background: rgba(239, 68, 68, 0.08) !important;
        color: var(--mga-text-primary) !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        border: 1px solid rgba(239, 68, 68, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

        .mga-modal-list li:last-child {
            margin-bottom: 0 !important;
        }

        .mga-modal-list li::before {
            content: "⚠" !important;
            color: #ef4444 !important;
            font-size: 16px !important;
            flex-shrink: 0 !important;
        }

.mga-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--mga-border-divider);
    align-items: center !important;
}

.mga-btn-danger-full {
    background: var(--mga-btn-danger-bg);
    border: none;
    color: #ffffff;
    border-radius: 8px;
    height: 40px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100% !important;
    max-width: 100% !important;
}

    .mga-btn-danger-full:hover {
        background: var(--mga-btn-danger-hover);
    }

.mga-btn-text {
    background: transparent;
    border: none;
    color: var(--mga-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center !important;
}

    .mga-btn-text:hover {
        color: var(--mga-text-primary);
    }

/* ===== DROPDOWNS (APPDROPDOWN COMPONENT) ===== */
.cd-dropdown {
    position: relative;
    width: 100%;
    z-index: auto !important;
}


.cd-selected {
    background-color: var(--mga-bg-input);
    color: var(--mga-text-primary);
    border: 1px solid var(--mga-border-input);
    border-radius: 8px;
    padding: 0 14px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    z-index: auto !important;
}

    .cd-selected:hover {
        border-color: #3b82f6;
    }

.cd-arrow {
    color: var(--mga-text-muted);
    margin-left: 12px;
    transition: transform 0.2s ease;
}

.cd-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--mga-bg-input);
    border: 1px solid var(--mga-border-input);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    z-index: 99999999 !important;
}

.cd-item {
    padding: 10px 14px;
    color: var(--mga-text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .cd-item:hover {
        background-color: var(--mga-bg-tab-hover);
    }

/* Dark mode for dropdowns */
[data-theme="dark"] .cd-selected {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

[data-theme="dark"] .cd-arrow {
    color: var(--text-muted);
}

[data-theme="dark"] .cd-list {
    background-color: var(--bg-card);
    border-color: var(--border-strong);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .cd-item {
    color: var(--text-primary);
}

    [data-theme="dark"] .cd-item:hover {
        background-color: var(--bg-hover);
    }

/* ===== NATIVE SELECT & DATE INPUTS ===== */
.mga-field-full select {
    background-color: var(--mga-bg-input) !important;
    color: var(--mga-text-primary) !important;
    border: 1px solid var(--mga-border-input) !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 36px !important;
}

[data-theme="dark"] .mga-field-full select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.mga-field-full input[type="date"] {
    background-color: var(--mga-bg-input) !important;
    color: var(--mga-text-primary) !important;
    border: 1px solid var(--mga-border-input) !important;
}

[data-theme="dark"] .mga-field-full input[type="date"] {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* ===== UTILITY CLASSES ===== */
.mga-mb-0 {
    margin-bottom: 0 !important;
}

.mga-mb-12 {
    margin-bottom: 12px !important;
}

.mga-mb-20 {
    margin-bottom: 20px !important;
}

.mga-mt-16 {
    margin-top: 16px !important;
}

.mga-mt-24 {
    margin-top: 24px !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .mga-container {
        max-width: 100% !important;
    }

    .mga-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1024px) {
    .mga-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .mga-banner-right {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .mga-form-grid,
    .mga-form-grid-2-1,
    .mga-form-grid-3 {
        grid-template-columns: 1fr !important;
    }

    .mga-banner-left {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ===== FINAL HORIZONTAL SCROLL FIX (SAFE FOR LOGO & ICONS) ===== */
html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Only protect actual logo images, not all SVGs */
header img,
.app-header img,
.logo img,
.brand-logo img,
.navbar-brand img {
    max-width: none !important;
    width: auto !important;
}

/* Keep SVGs constrained unless they're in header/logo context */
svg {
    max-width: 100% !important;
}

header svg,
.app-header svg,
.logo svg,
.brand-logo svg {
    max-width: none !important;
    width: auto !important;
}

.mga-container {
    width: calc(100% - 32px) !important;
    max-width: calc(100vw - 280px - 32px) !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.mga-grid-2 {
    width: 100% !important;
    max-width: 100% !important;
}

.mga-card {
    max-width: 100% !important;
    overflow: hidden !important;
}

.cd-list {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Fix for main content wrapper */
.main-content,
.content-wrapper,
.app-content,
.page-content,
.app-shell {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
/* ===== CLEAN DROPDOWN FIX (REPLACES ALL PREVIOUS DROPDOWN CSS) ===== */

/* Allow cards to let dropdowns escape */
.mga-card {
    overflow: visible !important;
}

/* Base field positioning */
.mga-field-full {
    position: relative !important;
    z-index: 1 !important;
}

/* Dropdown container */
.cd-dropdown {
    position: relative !important;
    z-index: 10 !important;
}

/* The floating list */
.cd-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 0 !important;
}

/* List items */
.cd-item {
    padding: 10px 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
}

    .cd-item:hover {
        background-color: #f1f5f9 !important;
    }

/* Dark mode */
[data-theme="dark"] .cd-list {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .cd-item {
    color: #f8fafc !important;
}

    [data-theme="dark"] .cd-item:hover {
        background-color: #334155 !important;
    }

/* ===== DYNAMIC STACKING FIX ===== */
/* Whichever field currently has an open dropdown gets boosted to the front */
.mga-field-full:has(.cd-list) {
    z-index: 1000 !important;
}


/* ==========================================================================
   ADD USER MODAL POPUP (INTER FONT)
   ========================================================================== */

/* Dimmed Background Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* White Popup Card Container */
.modal-card {
    background: white;
    width: 520px;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    position: relative;
    font-family: 'Inter', sans-serif;
}

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

.modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.modal-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    margin-top: 0;
}

/* Form Matrix Grid Config */
.modal-form-matrix {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-form-row {
    display: flex;
    gap: 16px;
}

.modal-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .modal-form-group.full-width {
        width: 100%;
    }

    .modal-form-group label {
        font-size: 12px;
        font-weight: 500;
        color: #666;
    }

    /* Input & Select Common Styling */
    .modal-form-group input,
    .modal-form-group select {
        padding: 10px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 14px;
        font-family: 'Inter', sans-serif;
        background: white;
        outline: none;
        width: 100%;
        box-sizing: border-box;
    }

/* Action Button Layout Container */
.modal-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
}

/* Solid Navy Save Button */
.btn-save {
    flex: 3; /* Gives it the exact 75% width layout from your screenshot */
    height: 44px;
    background-color: #1a233a;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease;
}

    .btn-save:hover {
        background-color: #111827;
    }

/* Outlined Cancel Button */
.btn-cancel {
    flex: 1; /* Gives it the remaining 25% width layout */
    height: 44px;
    background-color: white;
    color: #344054; /* Slate text color matching the screenshot */
    border: 1px solid #d0d5dd; /* Exact soft outline color from image_2fc63a.png */
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease;
}

    .btn-cancel:hover {
        background-color: #f9fafb;
    }
/* ========================================
   PAGE LAYOUT
======================================== */

.settings-page {
    padding: 24px;
    background-color: var(--bg-app);
}
/* ========================================
   CUSTOM GRID
======================================== */

.global-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
    align-items: start;
}
/* ========================================
   CUSTOM CARDS
======================================== */
.global-settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    height: fit-content !important;
    min-height: unset !important;
}
/* ========================================
   CARD TITLES
======================================== */

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}
/* ========================================
   FORM GROUPS
======================================== */

.payment-frequency-select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    font-size: 14px;
    color: var(--text-primary);
    box-sizing: border-box;
}
/* ========================================
   TOGGLE ROWS
======================================== */

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

    .toggle-row span {
        font-size: 14px;
        color: var(--text-primary);
    }
/* ========================================
   TOGGLE SWITCH
======================================== */

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: 24px;
}

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

.switch input:checked + .slider {
    background-color: var(--primary);
}

    .switch input:checked + .slider:before {
        transform: translateX(24px);
    }
.global-settings-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
}

.cancel-btn {
    width: 110px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}

.global-save-btn {
    width: 150px;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--text-inverse);
    cursor: pointer;
}

    .global-save-btn:hover {
        background: var(--primary-hover);
    }

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

@media (max-width: 768px) {
    .global-settings-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   TABLE & UTILITIES
   ========================================================================== */

.coa-th-role {
    width: 20%;
}

.coa-th-users {
    width: 15%;
}

.coa-th-desc {
    width: 50%;
}

.coa-th-actions {
    width: 15%;
    text-align: center;
}

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

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

.coa-user-count-badge {
    background-color: var(--bg-card-soft);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    display: inline-block;
}

.coa-action-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    transition: color 0.2s ease;
}
    .coa-action-edit-btn:hover {
        color: var(--text-primary);
    }

/* ==========================================================================
   RIGHT-SIDE EDIT ROLE DRAWER PANEL
   ========================================================================== */

.coa-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-overlay);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 9999;
}


.coa-drawer-card {
    background: var(--bg-card);
    width: 460px;
    height: 100vh;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}
.coa-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 24px 20px 32px;
}

.coa-drawer-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}


.coa-drawer-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-muted);
}

.coa-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 24px 20px 32px;
}

.coa-permission-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* FIX: position relative so the hidden input stays contained inside */
.coa-permission-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    line-height: 1;
    position: relative;
}

    /* FIX: input is now LAST in the HTML so these sibling selectors (~) 
   are no longer needed for checked state — we use a different approach below.
   The input is still hidden the same way. */
    .coa-permission-item input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        pointer-events: none;
    }

/* The circle — renders first because it's first in the HTML */
.coa-custom-checkbox {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-sizing: border-box;
    /* FIX: order forces circle to always be the first flex item visually */
    order: -1;
}

/* Hover state — targets the circle when hovering the label */
.coa-permission-item:hover .coa-custom-checkbox {
    border-color: var(--primary);
}

/* FIX: Because input is now AFTER the span in the HTML, the ~ selector
   (which only looks FORWARD) no longer works for checked state.
   We use :has() instead — it checks if the label contains a checked input */
.coa-permission-item:has(input:checked) .coa-custom-checkbox {
    background-color: #ffffff;
    border: 6px solid var(--primary);
}

.coa-drawer-actions {
    padding: 24px 24px 32px 32px;
    display: flex;
    gap: 14px;
    background: #ffffff;
}

.coa-btn-save {
    flex: 3;
    height: 44px;
    background-color: var(--primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease;
}

    .coa-btn-save:hover {
        background-color: var(--primary-hover);
    }

.coa-btn-cancel {
    flex: 1;
    height: 44px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease;
}

    .coa-btn-cancel:hover {
        background-color: var(--bg-hover);
    }


/* ==========================================================================
   PAGE CANVAS & INNER STRUCTURAL CONTAINER FRAMING
   ========================================================================== */

/* Main viewport layout context - set to clean white backdrop background */
.coa-page-layout-wrapper {
    background-color: var(--bg-app);
    min-height: 100vh;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.donor-header-row {
    margin-bottom: 28px;
    padding-left: 2px;
}

/* Distinct card outline containment block surrounding the internal metrics */
.coa-inner-content-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   TOOLBAR RIGID RIGHT-ALIGNMENT PACKAGING
   ========================================================================== */

.coa-search-wrapper2 {
    position: relative;
    display: flex;
    align-items: center;
}

.coa-search-icon2 {
    position: absolute;
    left: 12px;
    pointer-events: none;
}

.coa-search-box2 {
    width: 240px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card-soft);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

    .coa-search-box2:focus {
        border-color: var(--primary);
    }
.coa-export-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--success-color);
    color: var(--text-inverse);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .coa-export-btn2:hover {
        filter: brightness(0.9);
    }
/* ==========================================================================
   DATA TABLE LAYOUT COLUMNS
   ========================================================================== */

.coa-table-container2 {
    width: 100%;
}
.coa-table2 {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

/* Setup custom header horizontal proportions */
.coa-th-holiday {
    width: 30%;
}

.coa-th-date {
    width: 20%;
}

.coa-th-day {
    width: 20%;
}

.coa-th-type {
    width: 15%;
}

.coa-th-status {
    width: 15%;
}

.coa-table2 th {
    padding: 14px 16px;
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.coa-table2 td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

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

/* ==========================================================================
   RETOUCHED DATA ENTRY LISTING BADGES
   ========================================================================== */

.coa-holiday-name {
    font-weight: 500;
    color: var(--text-primary);
}

.coa-holiday-date,
.coa-holiday-day {
    color: var(--text-muted);
}
.coa-holiday-type-bank {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--text-primary);
    display: inline-block;
    font-weight: 500;
}

.coa-status-badge {
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    border: 1px solid transparent;
    width: 80px;
}

    .coa-status-badge.past {
        background-color: var(--bg-card);
        border-color: var(--border-color);
        color: var(--text-muted);
    }
    .coa-status-badge.upcoming {
        background-color: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }
/* ==========================================================================
   PAGE FRAMING & LAYOUT WIDGETS (The missing containment structures)
   ========================================================================== */
.coa-page-layout-wrapper {
    background-color: var(--bg-app);
    min-height: 100vh;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}
.coa-main-content-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Activity Log Page Custom Styles
   ========================================================================== */

/* Column Proportions */
.coa-th-timestamp {
    width: 22%;
}

.coa-th-user {
    width: 18%;
}

.coa-th-action {
    width: 45%;
}

.coa-th-ip {
    width: 15%;
}

/* Row Styling Fixes */
.coa-log-timestamp {
    color: #4b5563;
    font-variant-numeric: tabular-nums; /* Keeps timestamps beautifully aligned */
}

.coa-log-user {
    font-weight: 600;
    color: #111827;
}

.coa-log-ip {
    color: #6b7280;
    font-family: monospace; /* Gives network data a structured technical look */
    font-size: 0.9rem;
}

/* activity log css */

/* ==========================================================================
   PAGE FRAMING & LAYOUT WIDGETS
   ========================================================================== */

/* Full layout wrapper background canvas */
/*.coa-page-layout-wrapper {
    background-color: #ffffff;*/ /* Clean, light canvas tint */
    /*min-height: 100vh;
    padding: 40px;*/ /* Gives breathing room around the card */
    /*width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}*/

/* Margin underneath the header layout section since it sits on the canvas */
/*.donor-header-row {
    margin-bottom: 24px;
    padding-left: 4px;*/ /* Align slightly with the edge of the card text */
/*}*/

/* The standalone container card panel holding toolbar and table */
/*.coa-main-content-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}*/


/* ==========================================================================
   Activity Log Page Custom Styles
   ========================================================================== */

/* Column Proportions */
.coa-th-timestamp {
    width: 22%;
}

.coa-th-user {
    width: 18%;
}

.coa-th-action {
    width: 45%;
}

.coa-th-ip {
    width: 15%;
}

/* Row Styling Fixes */
.coa-log-timestamp {
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}

.coa-log-user {
    font-weight: 600;
    color: #111827;
}

.coa-log-ip {
    color: #6b7280;
    font-family: monospace;
    font-size: 0.9rem;
}


/* ==========================================================================
   TOOLBAR RIGHT-ALIGNMENT & SEARCH ICON FIX
   ========================================================================== */

.coa-table-toolbar2 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
}
.coa-search-wrapper2 {
    position: relative;
    display: flex;
    align-items: center;
}

.coa-search-icon2 {
    position: absolute;
    left: 12px;
    pointer-events: none;
}
/* Adjusted padding-left to give room for the icon */
.coa-search-box2 {
    width: 240px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card-soft);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

    .coa-search-box2:focus {
        border-color: var(--primary);
    }
/* Export Button styling matching the green design badge */
.coa-export-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #0C9E19;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .coa-export-btn2:hover {
        background-color: #16a34a;
    }
/* Activity LOG End */


/* ROLE BADGE */
.coa-role-badge2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f5f5f5;
    border: 1px solid #e1e1e1;
    font-size: 11px;
    font-weight: 600;
    color: #444444;
}

/* STATUS BADGE */
.coa-status-badge2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #dff5df;
    color: #2e9b42;
    font-size: 11px;
    font-weight: 700;
}

.coa-status-badge3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
}
/* Companies */
/* ==========================================================================
   PAGE CANVAS & INNER CONTAINER STRUCTURAL FRAMING
   ========================================================================== */

/*.coa-page-layout-wrapper {
    background-color: #ffffff;*/ /* Preserves solid base white canvas */
    /*min-height: 100vh;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.donor-header-row {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}*/
/* Upper primary action creation CTA button */
.donor-add-btn {
    background-color: #0f172a;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .donor-add-btn:hover {
        background-color: #1e293b;
    }


.coa-search-box2 {
    width: 240px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card-soft);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

    .coa-search-box2:focus {
        border-color: var(--primary);
    }

.coa-export-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--success-color);
    color: var(--text-inverse);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .coa-export-btn2:hover {
        filter: brightness(0.9);
    }
/* ==========================================================================
   INTERNAL PILL GRAPHICS AND TEXT ELEMENT RULES
   ========================================================================== */

.coa-company-main-name {
    font-weight: 500;
    color: #0f172a;
}

.coa-company-text-muted {
    color: #475569;
}
/* Clean modern plain custom integrated component types */
.coa-company-type-capsule {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    color: #334155;
    display: inline-block;
    font-weight: 500;
}
/* Status Pill Rules matching past structural pages */
.coa-status-badge {
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    border: 1px solid transparent;
    width: 80px;
}

    .coa-status-badge.past {
        background-color: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }

    .coa-status-badge.upcoming {
        background-color: #ffffff;
        border-color: #cbd5e1;
        color: #475569;
    }
/* ==========================================================================
   MODAL OVERLAY STANDARD FORM RULES
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-card {
    background-color: #ffffff;
    width: 520px;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

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

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

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
}

    .modal-close-btn:hover {
        color: #334155;
    }

.modal-subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0 0 16px 0;
}

.modal-form-matrix {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.modal-form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.modal-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .modal-form-group.full-width {
        width: 100%;
    }

    .modal-form-group label {
        font-size: 13px;
        font-weight: 500;
        color: #475569;
    }

    .modal-form-group input, .modal-form-group select {
        padding: 10px 14px;
        font-size: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background-color: #ffffff;
        color: #0f172a;
        outline: none;
        width: 100%;
        box-sizing: border-box;
    }

        .modal-form-group input:focus, .modal-form-group select:focus {
            border-color: #94a3b8;
        }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-save {
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-save:hover {
        background-color: #2563eb;
    }

.btn-cancel {
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .btn-cancel:hover {
        background-color: #f1f5f9;
        color: #0f172a;
    }
/*inhouse*/
/* ==========================================================================
   PAGE CANVAS & INNER CONTAINER STRUCTURAL FRAMING
   ========================================================================== */
/*
.coa-page-layout-wrapper {
    background-color: #ffffff;
    min-height: 100vh;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.donor-header-row {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.page-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.donor-add-btn {
    background-color: #0f172a;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .donor-add-btn:hover {
        background-color: #1e293b;
    }*/


/* ==========================================================================
   TEXT AND UTILITY BADGES
   ========================================================================== */

.coa-company-main-name {
    font-weight: 500;
    color: #0f172a;
}

.coa-company-text-muted {
    color: #475569;
}

.coa-status-badge {
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    border: 1px solid transparent;
    width: 80px;
}

    .coa-status-badge.past {
        background-color: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }

    .coa-status-badge.upcoming {
        background-color: #ffffff;
        border-color: #cbd5e1;
        color: #475569;
    }
/*REPS*/
/* ==========================================================================
   PAGE CANVAS & INNER CONTAINER STRUCTURAL FRAMING
   ========================================================================== */
/*
.coa-page-layout-wrapper {
    background-color: #ffffff;
    min-height: 100vh;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.donor-header-row {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.page-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.donor-add-btn {
    background-color: #0f172a;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .donor-add-btn:hover {
        background-color: #1e293b;
    }*/

/* ==========================================================================
   SUMMARY STATISTIC MATRIX CARDS ROW (4 Columns Grid)
   ========================================================================== */

/*.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}

.stat-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-height: 84px;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

.stat-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}*/

/* ==========================================================================
   TEXT, TYPOGRAPHY & COLOR VARIATIONS
   ========================================================================== */

.coa-company-main-name {
    font-weight: 500;
    color: #0f172a;
}

.coa-company-text-muted {
    color: #475569;
}

.coa-status-badge {
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    border: 1px solid transparent;
    width: 80px;
}

    .coa-status-badge.past {
        background-color: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }

    .coa-status-badge.upcoming {
        background-color: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }
/*ISOs*/
/* ==========================================================================
   NEW ADDITIONS: Mid-column categorization type pills (Unique to ISOs)
   ========================================================================== */

.coa-type-pill {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    border: 1px solid transparent;
    text-align: center;
}

    .coa-type-pill.pill-dark {
        background-color: #0f172a;
        color: #ffffff;
    }

    .coa-type-pill.pill-light {
        background-color: #f1f5f9;
        color: #334155;
        border-color: #e2e8f0;
    }

    .coa-type-pill.pill-solid {
        background-color: #334155;
        color: #ffffff;
    }


/* ==========================================================================
   INHOUSE DEALS & GLOBAL MATRIX TABLES LAYOUT STYLES
   ========================================================================== */
/* Main Metric Grid Framework */
.coa-inh-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

/* Individual Metric Cards */
.coa-inh-metric-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.coa-inh-metric-flex-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.coa-inh-metric-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.coa-inh-metric-lbl {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

    .coa-inh-metric-lbl.text-success {
        color: var(--success-color) !important;
    }

.coa-inh-metric-val {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

    .coa-inh-metric-val.text-success {
        color: var(--success-color) !important;
    }

/* Toolbar Control Bar Elements */
.coa-inh-action-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.coa-inh-search-box-field {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 280px !important;
}

    .coa-inh-search-box-field svg {
        position: absolute !important;
        left: 12px !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .coa-inh-search-box-field input {
        width: 100% !important;
        height: 38px !important;
        padding: 0 12px 0 38px !important;
        background-color: var(--bg-input) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        color: var(--text-primary) !important;
        box-sizing: border-box !important;
        outline: none !important;
    }

.coa-inh-trigger-export-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 0 16px !important;
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* Structured Matrix Tables Layout */
.coa-inh-table-overflow-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
}

.coa-inh-data-matrix-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

    .coa-inh-data-matrix-table thead tr {
        border-bottom: 1px solid var(--border-color) !important;
        background-color: var(--bg-card-soft) !important;
    }

    .coa-inh-data-matrix-table th {
        padding: 12px 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .coa-inh-data-matrix-table tbody tr {
        cursor: pointer !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .coa-inh-data-matrix-table td {
        padding: 14px 16px !important;
        font-size: 13px !important;
        color: var(--text-primary) !important;
    }

/* Data Table Badges */
.coa-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.coa-badge-active {
    background-color: var(--salary-status-paid-bg) !important;
    border: 1px solid var(--delivery-success-border) !important;
    color: var(--salary-status-paid-text) !important;
}

.coa-badge-paid {
    background-color: var(--bg-card-soft) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

.coa-badge-default {
    background-color: var(--danger-hover-bg) !important;
    border: 1px solid var(--profile-badge-bg) !important;
    color: var(--danger-color) !important;
}

/* Sliding Side Drawer Overlay Framework */
.coa-drawer-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-color: var(--revenue-backdrop-bg) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.coa-drawer-surface {
    width: 440px !important;
    max-width: 100% !important;
    height: 100% !important;
    background-color: var(--bg-card) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 32px !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

.coa-drawer-close-btn {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    padding: 4px !important;
}

.coa-drawer-meta-section {
    margin-bottom: 28px !important;
    margin-top: 10px !important;
}

    .coa-drawer-meta-section .pre-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--success-color) !important;
        letter-spacing: 0.5px !important;
    }

    .coa-drawer-meta-section .section-lbl {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin-top: 16px !important;
    }

    .coa-drawer-meta-section .main-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        margin: 4px 0 0 0 !important;
        letter-spacing: -0.5px !important;
    }

.coa-drawer-data-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px !important;
    margin-bottom: 28px !important;
}

.coa-drawer-data-node {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

    .coa-drawer-data-node label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        letter-spacing: 0.5px !important;
    }

    .coa-drawer-data-node span {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--text-secondary) !important;
    }

    .coa-drawer-data-node .val-bold {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
    }

.coa-drawer-divider {
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    margin: 8px 0 24px 0 !important;
}

/* Managing Team Nodes inside Drawer */
.coa-drawer-team-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

    .coa-drawer-team-wrapper h3 {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        margin: 0 0 4px 0 !important;
    }

.coa-team-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background-color: var(--bg-card-soft) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

.coa-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.coa-avatar-manager {
    background-color: var(--salary-chip-salary-bg) !important;
    color: var(--salary-chip-salary-text) !important;
}

.coa-avatar-ops {
    background-color: var(--role-super-bg) !important;
    color: var(--role-super-text) !important;
}

.coa-team-info {
    display: flex !important;
    flex-direction: column !important;
}

    .coa-team-info .name {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

    .coa-team-info .role {
        font-size: 11px !important;
        color: var(--text-muted) !important;
    }


/* ==========================================================================
   EXTERNAL DEALS - COMPONENT SPECIFIC TWEAKS
   ========================================================================== */

/* Unique status pill variations if applicable */
.coa-badge-settled {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
}

/* Custom avatar colors for the managing team in External Deals */
.coa-avatar-manager-ext {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.coa-avatar-ops-ext {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}
/* ==========================================================================
   INVOICES VIEW COMPONENT OVERRIDES
   ========================================================================== */

/* Custom Invoice Pill Status Options */
.coa-badge-pending {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.coa-badge-overdue {
    background-color: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #b91c1c !important;
}

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

/* 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: var(--btn-bg);
    color: var(--text-primary);
    cursor: pointer;
    height: 38px;
    width: 150px;
    transition: all 0.2s ease;
}

    .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: 12px; /* 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 {
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    padding: 12px 18px;
    border-radius: 4px;
    border: none;
    background: #1ec71e;
    color: var(--text-inverse);
    cursor: pointer;
    width: 150px;
    margin-left: 8px;
    height: 42px;
}


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

.view-btn-up {
    height: 32px;
    width: 100px;
    background: rgba(197, 208, 232, 0.45);
    color: #000000;
    border: 1px solid #646161;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pay-btn-up {
    height: 32px;
    width: 100px;
    background: linear-gradient( 135deg, #1D3557 0%, #16263D 100% );
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

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

.subscription-wrapper {
    padding: 24px 32px;
    width: 100%;
    max-width: none;
}

.subscription-header h2 {
    font-size: 12px;
    font-weight: 600;
}

.subscription-header p {
    color: #6b7280;
}

.subscription-header {
    margin-bottom: 20px;
}



/*    dropdown*/

.hnd-acctype-dropdown-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.hnd-detailtype-group {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    background: #fafafa;
}

.hnd-acctype-label {
    font-size: 12px; /* change this value */
    font-weight: 700;
    color: #333;
}

.hnd-acctype-dropdown {
    position: relative;
    width: 100%;
}

.hnd-acctype-selected {
    background: #f5f5f5;
    border: 1px solid #ddd;
    height: 35px;
    padding: 0 10px 0 5px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    box-sizing: border-box;
}

.hnd-acctype-arrow {
    font-size: 10px;
    margin-left: 10px;
}

.hnd-acctype-menu {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.hnd-acctype-group-label {
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    background: #fafafa;
}

.hnd-acctype-item {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
}

    .hnd-acctype-item:hover {
        background: #f0f0f0;
    }


.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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
    font-weight: 800;
    color: #111827;
}

    .price span {
        font-size: 12px;
        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: 12px;
        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: 12px;
        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: 12px;
    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: 12px;
}

.donor-select-wrapper {
    position: relative;
}

.donor-select-menu {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    z-index: 1000;
    margin-top: 2px;
}

.donor-select-item {
    padding: 8px;
    cursor: pointer;
}

    .donor-select-item:hover {
        background: #f2f2f2;
    }

.donor-select-empty {
    padding: 8px;
    color: gray;
}

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


.coa-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    border-bottom: 1px solid #eee;
    min-height: 42px;
}

.coa-node-row:hover {
    background: #f9fafb;
}

.coa-cell {
    padding: 6px 10px;
    font-size: 13px;
}

.coa-expand {
    cursor: pointer;
    margin-left: 6px;
    font-weight: bold;
}

.coa-name.parent {
    font-weight: 600;
}

.status-active {
    color: green;
    font-weight: 600;
}

.status-inactive {
    color: red;
    font-weight: 600;
}

.actions {
    display: flex;
    gap: 8px;
}

.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

    .icon-btn.danger {
        color: red;
    }



.coa-rows {
    display: grid;
    grid-template-columns: 40px 400px 500px 400px 80px 100px;
    align-items: center;
    padding: 8px 12px;
    min-height: 48px;
}



/*//coa */
.col-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ROW */
.coa-row {
    display: grid;
    grid-template-columns: 40px 230px 370px 170px 310px 190px 90px 10px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 10px;
}

/* HEADER */
.coa-header {
    margin-top: 6px;
    border-top: 1px solid #f5f5f5;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.coa-action-icon {
    width: 22px;
    height: 22px;
    cursor: pointer;
    gap: 4px;
}

/* PARENT ROW */
.parent-row {
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* CHILD */
.child-row {
    background: var(--surface-soft);
}

/* COLUMN ALIGN */
.col-balance {
    font-weight: 600;
}

.col-actions {
    font-size: 12px;
    color: #444;
}

/* RADIO */
.radio {
    width: 16px;
    height: 16px;
    border: 2px solid #1f2a44;
    border-radius: 50%;
    display: inline-block;
}

    .radio.checked {
        background: #000;
        border-color: #000;
        position: relative;
    }

        .radio.checked::after {
            content: "";
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 3px;
            left: 3px;
        }

/* INDENT */
.indent {
    padding-left: 24px;
}

/* EXPAND ICON */
.expand {
    margin-right: 8px;
    font-size: 14px;
}
/* BADGES */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    @* padding: 2px 2px;
    *@ border-radius: 14px;
    font-size: 11px;
    font-weight: 550;
}

/* Light background with dark text */
.asset {
    background: rgba(37, 166, 47, 0.3);
    color: #25a62f;
}

.liability {
    background: rgba(255, 38, 0, 0.3);
    color: #ff2600;
}

.equity {
    background: #eadcf8;
    color: #40215f;
}

.income {
    background: var(--pill-bg);
    color: var(--pill-text);
}

.expense {
    background: rgba(255, 136, 0, 0.3);
    color: #ff8800;
}

.inactive {
    background: rgba(132, 129, 129, 0.3);
    color: #848181;
}

/* SWITCH */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin-right: 8px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    inset: 0;
    background: #d7d7d7;
    border-radius: 999px;
    transition: .2s;
}

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

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

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

.status-text {
    color: #39a34a;
    font-size: 14px;
}

.coa-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.balance-positive {
    color: #25a62f;
    font-weight: 550;
    font-size: 12px;
}

.balance-negative {
    color: #ff2600;
    font-weight: 550;
    font-size: 12px;
}

.balance-neutral {
    color: #666;
    font-weight: 550;
    font-size: 12px;
}

.small-text {
    font-size: 13px;
    color: var(--text-primary);
}

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

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

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

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

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

        .popup-buttons2 button {
            width: 100%;
            font-size: 12px;
            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;
}

.coa-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.coa-field {
    height: 32px;
    border: 1px solid #d9d9d9;
    color: #8c8c8c;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 10px;
    outline: none;
    background: white;
}

/* widths */
.coa-best {
    width: 150px;
}

.coa-search {
    width: 300px;
}

.coa-all {
    width: 200px;
}

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

    .invoice-modal-header h2 {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        color: #111827;
    }

.invoice-modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
}
/* 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;
}

.read-only-select {
    background-color: #f5f5f5;
    color: #333;
    cursor: not-allowed;
}

.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: 12px; /* matches big logo */
    font-weight: 600;
    color: #0f172a; /* navy */
}
/* Titles */

.org-title {
    font-size: 12px; /* was 20 */
    font-weight: 600;
    color: #0f172a; /* 🔥 navy */
}

.org-subtitle {
    font-size: 12px; /* 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;
}

.org-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    background: var(--bg-card-soft);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .org-item:hover {
        background: var(--bg-hover);
    }
/* 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: 12px;
        font-weight: 600;
    }

    .org-info span {
        font-size: 12px;
        color: #6b7280;
    }
/* Arrow */
.org-arrow {
    font-size: 12px;
    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 ===== */
.profile-summary-card--wide {
    background: var(--profile-card-bg);
    border: 1px solid var(--profile-card-border);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: var(--profile-card-shadow);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    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: var(--profile-avatar-bg);
    flex-shrink: 0;
}

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

.profile-avatar-letter {
    font-size: 12px;
    font-weight: 700;
    color: var(--profile-primary-text);
}

/* 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: 14px;
    height: 14px;
    background: var(--profile-camera-bg);
    border: 1px solid var(--profile-camera-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    line-height: 0;
}

.profile-camera-icon {
    width: 10px;
    height: 10px;
    display: block;
}

.profile-summary-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

/* Name */
.profile-summary-name {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--profile-primary-text);
}

/* Email */
.profile-summary-email {
    margin: 0;
    font-size: 12px;
    color: var(--profile-secondary-text);
    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: var(--profile-badge-bg);
    color: var(--profile-badge-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    width: fit-content;
}

.profile-summary-org {
    font-size: 12px;
    color: var(--profile-secondary-text);
    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: 12px;
    font-weight: 500;
}

.profile-info-item div {
    font-size: 12px;
    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: 12px;
    outline: none;
}
/* Card container */
.profile-info-card {
    background: var(--profile-card-bg);
    border: 1px solid var(--profile-card-border);
    border-radius: 14px;
    overflow: hidden; /* keeps header border clean */
    box-shadow: var(--profile-card-shadow);
}
/* Header */
.profile-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--profile-card-border);
}

.profile-info-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .profile-info-title h3 {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--profile-primary-text);
    }

.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: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
    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: 12px;
    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);
        }
/* ========================================
   DARK MODE TOGGLE FIX
======================================== */

[data-theme="dark"] .settings-toggle span {
    background: #374151; /* darker track */
}

    [data-theme="dark"] .settings-toggle span::before {
        background: #f3f4f6; /* knob stays visible */
    }

/* Optional: slightly better active color contrast */
[data-theme="dark"] .settings-toggle input:checked + span {
    background: #4f46e5; /* keeps primary but more visible */
}

.profile-info-input {
    width: 100%;
    height: 28px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--profile-input-bg);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
    transition: all 0.2s ease;
}

    /* Focus */
    .profile-info-input:focus {
        border-color: var(--border-strong);
        background: var(--bg-hover);
        color: var(--text-primary); /* 👈 keep consistent */
    }

.profile-info-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.profile-info-value {
    font-size: 12px;
    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: 28px;
    font-weight: 600;
    color: var(--bank-card-title-color);
}

.bank-card-subtitle {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--bank-card-subtitle-color);
}

.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: 12px;
    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: 12px;
}

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

.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: 24px;
    right: 24px;
    width: 72px;
    height: 72px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 9999;
    padding: 0;
}*/

.fab_penny img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* pill */
.ask-pill {
    position: absolute;
    bottom: -8px;
    left: -35px;
    background: #ffffff;
    color: #000;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    white-space: nowrap;
}

    .ask-pill.no-theme {
        background: white !important;
        color: #111827 !important;
        border: 1px solid #e5e7eb !important;
    }

.popup-header {
    background: var(--popup-header-bg);
    color: var(--popup-header-text);
    padding: 12px 16px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.chat-input {
    position: sticky;
    bottom: 0;
    background: var(--chat-input-bg);
    z-index: 10;
    flex-shrink: 0;
}

.profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: var(--profile-overlay-bg);
}

.profile-dropdown {
    position: absolute;
    z-index: 999;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--popup-overlay-bg);
    z-index: 999;
}

.popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--popup-overlay-bg);
    /*    backdrop-filter: blur(4px);*/
    z-index: 1000;
}

.popup-panel {
    position: fixed;
/*    bottom: 90px;
    right: 20px;*/
    width: 410px;
    height: 700px;
    background: var(--popup-panel-bg);
    border-radius: 16px;
    box-shadow: var(--popup-panel-shadow);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: popupFade 0.2s ease-out;
}

.user-bubble {
    background-color: var(--user-bubble-bg);
    color: var(--user-bubble-text);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    border-radius: 16px;
    padding: 10px 14px;
    max-width: 75%;
    white-space: pre-wrap;
}

.bot-bubble {
    background-color: var(--bot-bubble-bg);
    color: var(--bot-bubble-text);
    font-family: 'Inter', sans-serif;
    border-radius: 10px;
    padding: 10px 14px;
    max-width: 75%;
    border: 1px solid var(--bot-bubble-border);
}

.import-process-box {
    margin: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #dbe4f0;
}

    .import-process-box h5 {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 600;
        color: #17223A;
    }

    .import-process-box p {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 1.6;
        color: #4b5563;
    }

    .import-process-box ul {
        margin: 0;
        padding-left: 18px;
    }

    .import-process-box li {
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.5;
        color: #374151;
    }

.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--popup-close-color);
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
}

.popup-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin: 4px;
    background: var(--popup-intro-bg);
    color: var(--popup-intro-text);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.intro-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.intro-title {
    font-weight: 600;
    font-size: 12px;
}

.intro-desc {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 2px;
}



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

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

.input-error {
    border: 1px solid #dc2626 !important;
}

.cd-wrapper {
    position: relative;
}

.dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9999 !important;
}

.cd-dropdown {
    position: relative;
    cursor: pointer;
}

.cd-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* dropdown panel */
.cd-list {
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-top: 5px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 999;
}

/* items */
.cd-item {
    padding: 10px;
}

    .cd-item:hover {
        background: #f3f4f6;
    }

/* RESPONSIVE FIX */
@media (max-width: 768px) {
    .cd-selected {
        font-size: 12px;
        padding: 9px 12px;
    }

    .cd-item {
        font-size: 12px;
    }
}

.cd-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cd-arrow {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
    pointer-events: none;
}

.cd-dropdown.open .cd-arrow {
    transform: rotate(180deg);
    transition: 0.2s ease;
}

.dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9999 !important;
}

.backe {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}

    .backe img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
    }

.image-button img {
    width: 28px;
    height: 28px;
}

.input-box {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--input-box-bg);
    padding: 10px;
    box-shadow: var(--input-box-shadow);
}


.ask-question-textarea {
    width: 100%;
    height: 40px;
    background: var(--textarea-bg);
    color: var(--textarea-text);
    border: none;
    outline: none;
    border-radius: 4px;
    box-shadow: var(--textarea-shadow);
    resize: none;
    padding-left: 12px;
    padding-right: 95px;
    box-sizing: border-box;
    font-size: 12px;
}

/* icons */
.image-button,
.send-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}

.image-button {
    right: 15px;
}

.send-button {
    right: 10px;
}

/* Placeholder styling */
.ask-question-textarea::placeholder {
    color: var(--textarea-placeholder);
    font-size: 12px;
}

/* Focus effect (optional but recommended) */
.ask-question-textarea:focus {
    border-color: var(--textarea-focus-border);
    box-shadow: var(--textarea-focus-shadow);
}

.question-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

/* Card */
.question-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-radius: 26px;
    margin: 0px 6px;
    background: var(--question-card-bg);
    border: 1px solid var(--question-card-border);
    box-shadow: var(--question-card-shadow);
    transition: all 0.2s ease;
}

    .question-card:hover {
        background: var(--question-card-hover-bg);
        transform: translateY(-2px);
        box-shadow: var(--question-card-hover-shadow);
    }

/* Left image */
.question-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Text */
.question-text {
    font-size: 12px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--question-text-color);
    line-height: 1.3;
}

.quick-questions-title {
    font-size: 12px;
    font-weight: 600;
    text-align: left !important;
    margin-top: 2px;
    margin-bottom: 8px;
    display: block;
    width: 100%;
    color: var(--quick-questions-title-color);
}

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

.sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-menu {
    flex: 1;
    min-height: 0; /* critical for flex scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.sidebar-bottom {
    flex-shrink: 0;
}

.sidebar {
    width: 78px;
    transition: width 0.25s ease;
    overflow: hidden;
} 

/* ===== 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: 12px;
    font-weight: 600;
    color: #0f172a;
}


.sidebar-header {
    padding: 16px 14px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 10px;
}

.module-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    letter-spacing: .5px;
}

.sidebar-toggle-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .25s;
}

    .sidebar-toggle-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    .sidebar-toggle-btn.collapsed {
        margin: auto;
        display: flex;
    }


/* ===== 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: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #ffffff !important;
    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: 12px;
}

.btn-text-small {
    font-size: 12px; /* 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: 12px;
        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: 12px;
        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: 12px;
    font-weight: 500;
    color: #16a34a;
}

/* ===== Actions ===== */
.actions-col {
    text-align: right;
    white-space: nowrap;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
    color: var(--icon-color);
}

    .icon-btn.edit {
        color: #f97316;
    }

    .icon-btn.delete {
        color: #f97316;
    }
    /* Hover */
    .icon-btn:hover {
        background: var(--bg-hover);
        color: var(--icon-color); /* keep it stable */
    }

body.dark-mode .icon-btn {
    color: #ffffff; /* dark mode icon becomes white */
}
/* =========================
   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: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

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



.primary-btn-mm {
    width: 70%;
    max-width: 320px;
    height: 35px;
    background: #17223A;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    margin: 0 auto; /* centers button */
}

    .primary-btn-mm:hover {
        background: linear-gradient(180deg, #1e293b 0%, #020617 100%);
    }

    .primary-btn-mm:active {
        transform: translateY(1px);
    }



/* =========================
   BODY
========================= */
.tag-modal-body {
    margin-top: 16px;
}

.tag-modal-group {
    margin-bottom: 14px;
}

.tag-modal-label {
    display: block;
    font-size: 12px;
    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: 12px;
    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: 12px;
}

.tag-modal-save {
    padding: 8px 16px;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

.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: 12px;
    font-weight: 600;
}

.nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #17223A !important;
    color: #ffffff !important;
    font-size: 12px;
    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: 12px;
    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: 12px;
    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;
}
/* ========================================
   CALENDAR MODULE
======================================== */

.calendar-page {
    position: relative;
    font-family: Inter, system-ui, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
}

.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: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ========================================
   ADD EVENT BUTTON
======================================== */

.add-event-btn {
    background: #0f172a;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 30;
    transition: all 0.2s ease;
}

    .add-event-btn:hover {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    .add-event-btn.active {
        background: #475569;
    }

/* ========================================
   CALENDAR SECTION
======================================== */

.calendar-section {
    padding: 24px;
    transition: width 0.3s ease;
}

    .calendar-section.compressed {
        width: calc(100% - 260px);
    }

/* ========================================
   CALENDAR GRID
======================================== */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* ========================================
   DAY HEADERS
======================================== */

.day-header {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    padding: 14px 8px;
    text-align: center;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

/* ========================================
   DAY CELLS
======================================== */

.day-cell {
    min-height: 110px;
    padding: 8px;
    background: #ffffff;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

    .day-cell:hover {
        background: #f8fafc;
    }

/* ========================================
   DAY NUMBER
======================================== */

.day-number {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
}
/* ========================================
   TODAY
======================================== */

.today {
    background: #0f172a;
    border-radius: 10px;
}

    .today .day-number {
        color: white;
    }

/* ========================================
   DARK MODE ONLY
======================================== */

[data-theme="dark"] .calendar-page {
    background: transparent;
    color: #f3f4f6;
}

[data-theme="dark"] .calendar-grid {
    background: #161b26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .day-header {
    background: #1d2432;
    color: #9ca3af;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .day-cell {
    background: #161b26;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    [data-theme="dark"] .day-cell:hover {
        background: #20293a;
    }

[data-theme="dark"] .day-number {
    color: #f3f4f6;
}

[data-theme="dark"] .month-title {
    color: #f9fafb;
}

/* ========================================
   DARK MODE TODAY
======================================== */

[data-theme="dark"] .today {
    background: linear-gradient( 135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.30) );
    border: 1px solid rgba(96, 165, 250, 0.35);
}

    [data-theme="dark"] .today .day-number {
        color: #bfdbfe;
        font-weight: 600;
    }

/* ========================================
   DARK MODE BUTTON
======================================== */

[data-theme="dark"] .add-event-btn {
    background: #2563eb;
    color: white;
}

    [data-theme="dark"] .add-event-btn:hover {
        background: #1d4ed8;
    }

    [data-theme="dark"] .add-event-btn.active {
        background: #334155;
    }
/* =========================
   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
======================================== */

.add-event-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 20;
    overflow-y: auto;
}

    .add-event-panel.open {
        transform: translateX(0);
    }

/* ========================================
   SMALL INPUT BUTTON
======================================== */

.small-button {
    height: 30px;
    width: 140px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    outline: none;
    transition: all 0.2s ease;
}

    .small-button:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .small-button:hover {
        border-color: #9ca3af;
    }

    .small-button::-webkit-inner-spin-button,
    .small-button::-webkit-outer-spin-button {
        opacity: 1;
        height: 20px;
    }

/* ========================================
   SMALL ACTION BUTTON
======================================== */

.small-new-button {
    height: 30px;
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #111827;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .small-new-button:hover {
        background: #f1f5f9;
        border-color: #9ca3af;
    }

    .small-new-button:active {
        transform: scale(0.98);
    }

/* ========================================
   DARK MODE
======================================== */

[data-theme="dark"] .add-event-panel {
    background: #161b26;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .small-button {
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
}

    [data-theme="dark"] .small-button:hover {
        background: #273244;
        border-color: rgba(255, 255, 255, 0.16);
    }

    [data-theme="dark"] .small-button:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20);
    }

[data-theme="dark"] .small-new-button {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f9fafb;
}

    [data-theme="dark"] .small-new-button:hover {
        background: #334155;
        border-color: rgba(255, 255, 255, 0.16);
    }

.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: 12px;
    }

.recon-container {
    width: 340px;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: var(--recon-text);
    margin-left: auto;
    margin-right: 0;
}

.parent-wrapper {
    display: flex;
    justify-content: flex-end;
}

.recon-header {
    text-align: right;
    font-size: 12px;
    color: var(--recon-muted);
    margin-bottom: 18px;
}

.recon-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 2px 0;
}

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

    .recon-row .negative {
        color: var(--recon-negative);
    }

.spacer {
    height: 24px;
}

.divider {
    border-top: 1px solid var(--recon-divider);
    margin: 2px -2px;
}

.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 var(--recon-icon-border);
    border-radius: 50%;
    font-size: 12px;
    margin-right: 6px;
    color: var(--recon-icon-color);
}

.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.match-btn {
    background: var(--recon-btn-bg);
    color: var(--recon-btn-text);
    border: none;
    padding: 10px 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

    .match-btn:hover {
        background: var(--recon-btn-hover);
    }

.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: 12px;
}

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


.search-input-wrapper-yo {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-input-wrapper-yo input {
        padding-right: 90px; /* space for button */
    }

.search-btn-yo {
    position: absolute;
    right: 6px;
    height: 27px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background: #17223A;
    color: white;
    font-size: 12px;
    cursor: pointer;
}

/* ========================================
   PANEL FORM
======================================== */

.panel-card label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}

.panel-card input,
.panel-card textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    margin-bottom: 16px;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.2s ease;
    outline: none;
}

    .panel-card input:focus,
    .panel-card textarea:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
    }

.panel-card textarea {
    min-height: 90px;
    resize: vertical;
}

/* ========================================
   TIME ROW
======================================== */

.time-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .time-row span {
        font-size: 12px;
        color: #6b7280;
    }

    .time-row strong {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        color: #111827;
    }

/* ========================================
   MINI CALENDAR
======================================== */

.mini-calendar {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 24px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.mini-header {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.mini-day {
    font-size: 12px;
    padding: 8px 6px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    color: #374151;
    transition: all 0.2s ease;
}

    .mini-day:hover {
        background: #f3f4f6;
    }

    .mini-day.active {
        background: #0f172a;
        color: #ffffff;
        font-weight: 600;
    }

/* ========================================
   HEADER ACTIONS
======================================== */

.calendar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.calendar-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .calendar-action-btn:hover {
        background: #334155;
        transform: translateY(-1px);
    }

    .calendar-action-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* ========================================
   DARK MODE
======================================== */

[data-theme="dark"] .panel-card label {
    color: #d1d5db;
}

[data-theme="dark"] .panel-card input,
[data-theme="dark"] .panel-card textarea {
    background: #1b2432;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
}

    [data-theme="dark"] .panel-card input::placeholder,
    [data-theme="dark"] .panel-card textarea::placeholder {
        color: #94a3b8;
    }

    [data-theme="dark"] .panel-card input:focus,
    [data-theme="dark"] .panel-card textarea:focus {
        border-color: #3b82f6;
        background: #212c3d;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    }

[data-theme="dark"] .time-row span {
    color: #94a3b8;
}

[data-theme="dark"] .time-row strong {
    color: #f8fafc;
}

/* ========================================
   DARK MINI CALENDAR
======================================== */

[data-theme="dark"] .mini-calendar {
    background: #161b26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .mini-header {
    color: #f3f4f6;
}

[data-theme="dark"] .mini-day {
    color: #cbd5e1;
}

    [data-theme="dark"] .mini-day:hover {
        background: #243041;
    }

    [data-theme="dark"] .mini-day.active {
        background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
        color: #ffffff;
    }

/* ========================================
   DARK HEADER BUTTONS
======================================== */

[data-theme="dark"] .calendar-action-btn {
    background: #2563eb;
    color: #ffffff;
}

    [data-theme="dark"] .calendar-action-btn:hover {
        background: #1d4ed8;
    }

/* =========================
   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: 12px;
    font-weight: 700;
    color: #0f172a;
}

/*.nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        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;
    }*/
.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    z-index: 999;
    max-height: 520px;
    overflow-y: auto;
}

.dropdown-header {
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-card);
    transition: background 0.2s ease;
}

    .dropdown-item:hover {
        background: var(--bg-hover);
    }

.dropdown-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
/* =========================
   MINI CALENDAR
========================= */

.mini-calendar {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 24px;
}

.mini-header {
    font-size: 12px;
    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;
    }


.otp-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.otp-box {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #ffffff;
}





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

.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: 12px;
    cursor: pointer;
}

    .org-menu-item:hover {
        background: #f3f4f6;
    }


.org-access-title {
    font-weight: 700;
    font-size: 22px;
    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: 12px;
    font-weight: 500;
    color: var(--org-access-name-color);
}

.org-access-arrow {
    margin-left: auto;
    font-size: 12px;
    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: 14px;
        height: 14px;
        border: 2px solid var(--org-access-checkbox-border);
        border-radius: 50%;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
    }

    /* Inner dot */
    .org-access-checkbox input:checked + span::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--org-access-checkbox-dot);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -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: 12px;
    margin-bottom: 8px;
    line-height: 1; /* prevents text pushing down */
}


/* ===== Hundoh Custom Circle Checkbox ===== */

.hundoh-circle-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Hide native checkbox */
.hundoh-circle-checkbox-input {
    display: none;
}

/* Outer circle (smaller) */
.hundoh-circle-checkbox-ui {
    width: 14px;
    height: 14px;
    border: 1.5px solid #555;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

/* Inner dot (scaled down) */
.hundoh-circle-checkbox-input:checked + .hundoh-circle-checkbox-ui::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* Main row alignment fix */
.hundoh-row-align {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Text block alignment */
.hundoh-field-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Optional: consistent label width feel */
.category-name {
    min-width: 120px;
}

.org-access-child input {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.org-child-circle {
    width: 14px;
    height: 14px;
    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: 12px;
    font-weight: 800;
    color: #232733;
    margin-bottom: 6px;
}

.onboarding-main-subtitle {
    font-size: 12px;
    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: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .onboarding-edit-btn:hover {
        background: #1d2f5c;
    }

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8d8d8d;
    font-size: 12px;
    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: 12px;
    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: 12px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 2px;
    }

.onboarding-form-subtitle {
    font-size: 12px;
    color: #8a8a8a;
    margin: 0;
}

.donor-form-group label {
    display: flex;
    font-size: 12px;
    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: 12px;
    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: 12px;
    }

    .onboarding-main-subtitle {
        font-size: 12px;
    }
}

.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: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
    color: #7a7a7a;
    line-height: 1.35;
}

.onboarding-plan-meta {
    margin: 0;
    font-size: 12px;
    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: 12px;
    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: 12px;
        font-weight: 800;
        line-height: 1;
    }

.onboarding-complete-text h3 {
    margin: 6px 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: #111827;
}

.onboarding-complete-text p {
    margin: 0;
    max-width: 860px;
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    }

    .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: 12px;
        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: 12px;
    }

    .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: 12px;
        }

    .summary-content {
        gap: 1px;
    }
}
/* vieworganization*/
/*.................*/
.orga-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /*    padding: 4px 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: 6px 16px 6px 16px;
    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: 12px;
    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: 12px;
    color: var(--text-primary);
}

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

/* Stats */
.orga-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    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;
}

.notif-markall-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary);
}

.notif-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* List */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card */
.notif-card {
    display: flex;
    gap: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
}

/* Muted card */
.notif-card--muted {
    background: var(--bg-card-soft);
}

/* Icon */
.notif-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}

/* Keep colors but slightly adaptable */
.notif-icon--money {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.notif-icon--calendar {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Body */
.notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Text */
.notif-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

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

.notif-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
}

.notif-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Badge */
.notif-badge {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Buttons */
.notif-btn {
    height: 34px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
}

/* Primary */
.notif-btn--primary {
    background: var(--primary);
    color: var(--text-inverse);
}

/* Secondary */
.notif-btn--secondary {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Empty state */
.notif-empty {
    height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.notif-empty-icon {
    font-size: 12px;
    color: var(--text-muted);
}

.notif-empty-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.notif-empty-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.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: 1150px;
    max-width: 95%;
    min-height: 750px; /* 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: 12px;
    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: 12px;
        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: 65px;
    }

    .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: 65px;
        line-height: 1.3;
    }

    .signup-right {
        padding: 30px 20px;
    }

    .auth-input {
        height: 45px;
        font-size: 12px;
    }

    .social-login-btn {
        font-size: 12px;
        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: 12px;
    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: 12px;
    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: 85px;
    font-size: 35px;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}


.auth-title2 {
    margin-top: 190px;
    font-size: 35px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 6px;
}

.auth-title3 {
    margin-top: 2px;
    font-size: 35px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
    font-family: 'Megabyte', sans-serif;
}


.auth-subtitle {
    font-size: 16px;
    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: 12px;
    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: 12px;
}

.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: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: white;
    box-shadow: 0 6px 14px rgba(20, 40, 80, 0.25), 0 2px 5px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .auth-primary-btn:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        box-shadow: 0 8px 18px rgba(20, 40, 80, 0.32), 0 3px 8px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
    }
/* Divider */
.auth-divider {
    margin: 15px 0;
    display: flex;
    align-items: center;
    text-align: center;
    color: #718096;
    font-size: 12px;
}

    .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: 12px;
    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: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.login-text {
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
        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: 12px;
        }
}

@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: 12px;
    }

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

    .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: 12px;
    color: #1f2d4d;
    text-decoration: none;
}

.login-footer-text {
    margin-top: 25px;
    text-align: center;
    font-size: 12px;
}

    .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: 12px;
    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: 12px;
    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: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.otp-subtext {
    color: #888;
    font-size: 12px;
    margin-bottom: 25px;
}

.otp-input-group {
    text-align: left;
}

    .otp-input-group label {
        font-size: 12px;
        color: #444;
    }

.otp-input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ddd;
    margin-top: 6px;
    font-size: 12px;
}

.otp-btn {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    background: #17223a;
    color: white;
    border: none;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
}

    .otp-btn:hover {
        background: #0f172a;
    }

.otp-back-btn {
    margin-top: 18px;
    background: none;
    border: none;
    color: #17223a;
    font-size: 12px;
    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: 12px;
    color: #1f2937;
}

.authca-underline {
    width: 60px;
    height: 3px;
    background: #1f2937;
    margin: 18px 0;
    border-radius: 5px;
}

.authca-title {
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: 600;
}

.authca-subtitle {
    font-size: 12px;
    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: 12px;
}

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

.custom-modal-body {
    padding: 20px;
    color: var(--text-secondary); /* ✅ */
}

.warning-text {
    color: #ef4444; /* keep red */
    margin-top: 8px;
    font-size: 12px;
}

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


.btn-green {
    background: #239e2e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 70px;
    margin-bottom: 4px;
}




@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: 12px;
    }

    .dashboard-home .dash.dashboard-subtitle {
        font-size: 12px;
    }
    /* 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;
    }
}


small.link {
    color: #000000;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

    small.link:hover {
        background: #17223a;
        color: #ffffff;
    }



/* DESKTOP SIDEBAR */

.sidebar {
    width: 78px;
    transition: width 0.25s ease;
    overflow-x: hidden;
}

    /* Expanded */
    .sidebar.expanded {
        width: 260px;
    }

    /* COLLAPSED MODE */
    .sidebar.collapsed .text,
    .sidebar.collapsed .arrow,
    .sidebar.collapsed .menu-children {
        display: none;
    }

    /* Center icons in collapsed mode */
    .sidebar.collapsed .menu-item,
    .sidebar.collapsed .menu-parent {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Expanded restores spacing */
    .sidebar.expanded .menu-item,
    .sidebar.expanded .menu-parent {
        justify-content: flex-start;
    }

/* Toggle button */
.sidebar-toggle-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 12px;
}

.sidebar-toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: inherit;
}

.sidebar-toggle-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-bottom {
    flex-direction: column;
}

@media (max-width: 768px) {

    .sidebar {
        width: 260px !important;
    }

    .sidebar-toggle-wrapper {
        display: none;
    }
}

.sidebar-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    gap: 1px;
    flex-shrink: 0;
}

.sidebar-div {
    height: 2px;
    width: 87%;
    margin: 3px 4px;
    background: var(--border-color);
}

.logout {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Expanded layout */
.sidebar.expanded .sidebar-bottom {
    align-items: stretch;
}

/* Toggle button */
.sidebar-toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Expanded position */
.sidebar.expanded .sidebar-toggle-btn {
    align-self: flex-end;
    margin-right: 12px;
}

/* Collapsed position */
.sidebar.collapsed .sidebar-toggle-btn {
    margin-top: 6px;
}

.actionss-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 250px;
    height: 48px;
    background: var( --dash-action-btn-new);
    border: none;
    border-bottom: 1px solid rgba(146, 180, 255, 0.5);
    border-radius: 8px;
    padding: 4px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #2b2b2b;
    cursor: pointer;
    transition: all .2s ease;
}

/* Hover */
.action-btn:hover {
    background: #e8edf6;
    transform: translateY(-1px);
}

/* Icon wrapper */
.iconss-box {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #d7dce5;
    border-radius: 6px;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
}

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

.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: 12px;
    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: 12px;
    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;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    box-shadow: 0 4px 10px rgba(20, 40, 80, 0.22), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .notification-save-btn:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        box-shadow: 0 6px 14px rgba(20, 40, 80, 0.3), 0 3px 6px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
    }

.change-password-page {
    max-width: 650px;
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.change-password-card,
.security-tips-card {
    background: var(--change-password-card-bg);
    border-radius: 18px;
    box-shadow: var(--change-password-card-shadow);
    padding: 22px;
    border: 1px solid var(--change-password-card-border);
}

.change-password-title {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.change-password-icon {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    filter: var(--change-password-icon-filter);
}

.change-password-header h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--change-password-title-color);
}

.change-password-header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--change-password-subtitle-color);
    padding-left: 0;
}

/* Form container spacing */
.change-password-form {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 32px;
}

/* Label spacing */
.cp-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cp-input-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Input field */
.cp-input {
    padding-right: 40px;
    width: 100%;
    background-color: var(--cp-input-bg);
    color: var(--cp-input-text);
    border: 1px solid var(--cp-input-border);
    border-radius: 10px;
    padding: 12px 44px 12px 14px;
    outline: none;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 20px;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

    .cp-input:hover {
        border-color: var(--cp-input-border-hover);
    }

    .cp-input:focus {
        border-color: var(--cp-input-focus);
        box-shadow: 0 0 0 2px var(--cp-input-focus-ring);
    }

/* 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: var(--cp-rules-bg);
    border-radius: 12px;
    padding: 14px;
}

.cp-rules-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--cp-rules-title-color);
}

.cp-rule {
    font-size: 12px;
    color: var(--cp-rule-color);
    margin: 6px 0;
    padding-left: 20px;
    position: relative;
}

    .cp-rule::before {
        content: "•";
        position: absolute;
        left: 6px;
        top: 0;
        color: var(--cp-rule-color);
    }

    .cp-rule.ok {
        color: var(--cp-rule-ok-color);
    }

        .cp-rule.ok::before {
            content: "✓";
            left: 4px;
            color: var(--cp-rule-ok-color);
        }

.cp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

/* Cancel button */
.cp-cancel {
    background: var(--cp-cancel-bg);
    color: var(--cp-cancel-text);
    border: 1px solid var(--cp-cancel-border);
    border-radius: 6px;
    height: 36px;
    padding: 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Save button */
.cp-save {
    background-color: var(--cp-save-bg);
    color: var(--cp-save-text);
    border: 1px solid var(--cp-save-border);
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: 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: 12px;
    font-weight: 700;
    margin-bottom: 3px;
}

.security-tips-list {
    margin: 14px 0 0;
    padding: 18px; /* unified padding */
    color: #333;
    font-size: 12px;
    line-height: 2.0;
}

[data-theme="dark"] .security-tips-list {
    color: #d1d5db;
}

.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;
        margin-top: -3px;
    }

    .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: 16px;
    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: 34px;
    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;
    margin-bottom: 8px;
}

/* =======================================================
   QUICK ACTIONS (DARK MODE READY)
======================================================= */

.dash.quick-actions {
    background: var(--dash-quick-actions-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

    .dash.quick-actions h4 {
        font-size: 14px;
        font-weight: 550;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

.dash.actions-row {
    display: flex;
    gap: 24px;
    margin-top: 10px;
}

/* Quick action button */
.dash.quick-btn {
    flex: 1;
    background: var(--dash-quick-btn-bg);
    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: 0;
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s ease;
}

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


.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: 16px;
        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: 1px solid #eae8e8; /* darker border color */
}

/* =======================================================
   RECENT DONATIONS (DARK MODE READY)
======================================================= */
.dash.recent-donations {
    background: var(--dash-recent-bg);
    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: 550;
        color: var(--text-primary);
        margin: 0;
    }

/* Donation row */
.dash.donation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(213, 221, 240, 0.30);
    border-radius: 6px;
    padding: 4px 14px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

    .dash.donation-row:hover {
        background: var(--dash-donation-row-hover);
    }

/* 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: 12px;
    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: 12px;
    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: 12px;
    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: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
/* =======================================================
   STATUS PILLS
======================================================= */

.dash.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    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: 12px;
    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: 12px;
    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: 34px;
    padding: 4px 16px;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: 11px;
}

/* 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: 22px;
        height: 22px;
        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: 12px;
    color: var(--merge-title-color);
}

.merge-header-icon {
    width: 20px;
    height: 20px;
}

/* Close button */
.merge-close-btn {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: var(--merge-close-color);
}

/* Body */
.merge-body {
    margin-top: 2px;
    background: transparent; /* removes visible box */
    border: none; /* in case any border exists */

    border-radius: 10px; /* optional (only matters if children have bg) */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
}


.merge-new-body {
    margin-bottom: 40px;
    margin-top: 2px;
    background: var(--merge-body-bg);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
}

    /* Apply scroll ONLY when more than 6 items */
    .merge-new-body.scrollable {
        max-height: 300px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--merge-scroll-thumb) transparent;
    }

        .merge-new-body.scrollable::-webkit-scrollbar {
            width: 6px;
        }

        .merge-new-body.scrollable::-webkit-scrollbar-track {
            background: transparent;
        }

        .merge-new-body.scrollable::-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: auto;*/
    border: 2px solid var(--coa-border);
    background: var(--coa-bg);
    margin-bottom: 20px;
    max-height: 550px; /* adjust height as needed */
    overflow-y: auto; /* vertical scroll */
    overflow-x: auto; /* horizontal scroll if needed */
}

/* Table */
.coa-table {
    width: 100%;
    border-collapse: collapse;
    padding-left: 16px;
    padding-right: 16px;
    overflow: auto;
}

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

.close-btn {
    background: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
}

/* 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: 12px;
        margin-bottom: 6px;
        font-weight: 500;
        color: #333;
    }

/* Full Width */
.full-width {
    grid-column: span 2;
}

input,
select {
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    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;
}

.upload-approval-btn {
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(20, 40, 80, 0.20), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .upload-approval-btn:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        transform: translateY(-1px);
    }

    .upload-approval-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* aligns button to right like in screenshot */
.donor-action-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

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

/* Add Organization Button */
.add-org-btn {
    width: 100%;
    height: 38px;
    border-radius: 14px;
    border: 1px solid #d6d6d6;
    background: #efefef;
    font-weight: 500;
    font-size: 12px;
    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: 12px;
    font-weight: 500;
}

/* Sign Up Button */
.sign-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, #13284b 0%, #294b82 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(20, 40, 80, 0.22), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .sign-btn:hover {
        background: linear-gradient(90deg, #0f1f3d 0%, #223f6d 100%);
        box-shadow: 0 6px 14px rgba(20, 40, 80, 0.3), 0 3px 6px rgba(0, 0, 0, 0.12);
        transform: translateY(-1px);
    }

/* Overlay */
.exp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

/* Modal */
.exp-modal-container {
    width: 520px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Header */
.exp-modal-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .exp-modal-header .red {
        background: #f3dede;
    }

    .exp-modal-header .green {
        background: rgba(99, 190, 107, 0.07);
    }

.exp-modal-header-left {
    display: flex;
    align-items: center;
    gap: 10px; /* controls space between image and text */
}

.exp-modal-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #444;
}

.exp-modal-attach-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.exp-modal-icon-box {
    display: flex;
}

.exp-modal-title {
    font-weight: 600;
    font-size: 12px;
}

.exp-modal-subtitle {
    font-size: 12px;
    color: #777;
}

.exp-modal-close {
    font-size: 12px;
    cursor: pointer;
}

.exp-modal-icon-img {
    width: 30px; /* adjust size as needed */
    height: 30px;
    object-fit: contain;
}

/* Amount */
.exp-modal-amount {
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}

.text-success {
    color: green;
}

.text-danger {
    color: red;
}

.exp-modal-amount.red {
    color: #e53935;
}

.exp-modal-amount.green {
    color: #63be6b;
}

/* Sections */
.exp-modal-section {
    padding: 0 16px 16px;
}

.exp-modal-section-title {
    font-size: 12px;
    margin-bottom: 10px;
    color: #444;
}

/* Cards */
.exp-modal-card {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.exp-modal-card-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.exp-modal-bill-icon {
    font-size: 12px;
}

.exp-modal-card-title {
    font-weight: 600;
}

.exp-modal-card-sub {
    font-size: 12px;
    color: #888;
}

.exp-modal-card-amount {
    font-weight: bold;
}

/* Comments */
.exp-modal-comment-box {
    display: flex;
    gap: 8px;
}

.exp-modal-input {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* Button container */
.exp-modal-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #9aa0a6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0; /* IMPORTANT: removes default button padding */
}

/* Image inside button */
.exp-modal-send-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.auth-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center; /* 🔥 key fix */
}

.auth-icon-left {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.auth-input.with-icon {
    width: 100%;
    height: 44px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 12px;
    line-height: 44px; /* 🔥 important for vertical alignment */

    box-sizing: border-box;
}

@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: 12px;
        }

        .page-subtitle {
            font-size: 12px;
        }

        .add-mode-btn {
            padding: 8px 12px;
            font-size: 12px;
        }
    }

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

    /* Force AppDropdown to respect Dark Mode */
   /* [data-theme="dark"] .cd-list {
        background-color: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    }

    [data-theme="dark"] .cd-item {
        color: var(--text-primary) !important;
    }

        [data-theme="dark"] .cd-item:hover {
            background-color: var(--bg-hover) !important;
        }
     AppDropdown Dark Mode 
    [data-theme="dark"] .cd-dropdown .cd-selected {
        background-color: var(--bg-input) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .cd-dropdown .cd-list {
        background-color: var(--bg-card) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    }

    [data-theme="dark"] .cd-dropdown .cd-item {
        color: var(--text-primary) !important;
    }

        [data-theme="dark"] .cd-dropdown .cd-item:hover {
            background-color: var(--bg-hover) !important;
        }

    [data-theme="dark"] .cd-dropdown .cd-arrow {
        color: var(--text-muted) !important;
    }*/
    /*/* 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: 12px;
            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: 12px;
            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: 12px;
            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: 12px;
        }

            .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: 12px;
            color: #333;
        }

        .popup-close {
            border: none;
            background: none;
            color: #999;
            font-size: 12px;
            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;
            }

        .custom-dropdown {
            position: absolute;
            width: 100%;
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            margin-top: 5px;
            z-index: 999;
            max-height: 350px;
            overflow-y: auto;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }
        /* HEADER */
        .dropdown-header-row {
            display: grid;
            grid-template-columns: 180px 250px 160px 1fr;
            gap: 10px;
            padding: 12px;
            font-weight: 600;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        /* ROW */
        .donor-dropdown-grid {
            display: grid !important;
            grid-template-columns: 180px 250px 160px 1fr;
            gap: 10px;
            padding: 12px;
            cursor: pointer;
            border-bottom: 1px solid #f1f1f1;
            align-items: center;
        }

            .donor-dropdown-grid:hover {
                background: #f8f9ff;
            }

        .donor-col {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
        }

        .negative {
            color: #d92d20; /* red */
            font-weight: 600;
        }

        .attachment-link {
            color: #2563eb;
            cursor: pointer;
            text-decoration: underline;
            font-size: 12px;
        }

            .attachment-link:hover {
                color: #1d4ed8;
            }

        .searchable-dropdown {
            position: relative;
            width: 260px;
        }

        .searchable-dropdown-menu {
            position: absolute;
            top: 44px;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #dcdfe4;
            border-radius: 10px;
            max-height: 260px;
            overflow-y: auto;
            z-index: 9999;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            padding: 6px;
        }

        .searchable-item {
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.15s ease;
        }

            .searchable-item:hover {
                background: #f3f4f6;
            }

            .searchable-item.selected {
                background: #eef2ff;
                font-weight: 600;
            }
    }