@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;
    --text-color-whi:#000000;
    --bg-card: #ffffff;
    --bg-card-soft: #ffffff;
    --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;
    --bg-texts: #0f172a;
    --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;
    --back-icon-filter: brightness(0) invert(0);
    --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;
    --popup-panel-bg: #ffffff;
    --popup-panel-shadow: 0 8px 30px rgba(0,0,0,0.2);
    --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;
    --action-button-bg-990: #F2F5FB;
    --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;
    --hundoh-btn-bg: linear-gradient(180deg, #123B2A 0%, /* solid dark green */
    #123B2A 50%, /* stays solid green for top half */
    #1a4d38 70%, /* slightly lighter green */
    #2d6652 85%, /* medium green */
    #4a8069 100% /* lighter green at bottom (not transparent) */
    );
    --hundoh-btn-hover-bg: linear-gradient( 180deg, #0B241A 0%, #0B241A 50%, #103126 70%, #174136 85%, #215448 100% );
    --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);
    --hover-iu: #f3f7ff;
    --head-bottom: #DBDBDB;
    --bg-fields: #f8fafc;
    --border-fields: e2e8f0;
    /*    --dash-action-btn-new:#F2F5FB;*/
}

[data-theme="dark"] {
    --bg-app: #000000;
    --bg-page: #050505;
    --text-color-whi:#ffffff;
    --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;
    --hover-iu: #2c3850;
    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-muted: #8b8b8b;
    --border-fields: rgba(255, 255, 255, 0.10);
    --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;
    --bg-texts: #ffffff;
    --btn-prim-text: #f5f5f5;
    --pill-bg: rgba(59, 130, 246, 0.18);
    --back-icon-filter: brightness(0) invert(1);
    --action-button-bg-990: rgba(255, 255, 255, 0.08);
    --hundoh-btn-bg: linear-gradient( 180deg, #10271E 0%, #10271E 50%, #183B2D 70%, #255440 85%, #388163 100% );
    --hundoh-btn-hover-bg: linear-gradient( 180deg, #10271E 0%, #10271E 50%, #183B2D 70%, #255440 85%, #388163 100% );
    --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;
    --bg-fields: #0d0d0d;
    --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);
    --popup-panel-shadow: 0 8px 30px rgba(0,0,0,0.45);
    --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);
    --head-bottom: #3A3A3A;
}
    [data-theme="dark"] .theme-back-icon {
        content: url("/Images/Vector-dark.png");
    }

    [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"] .active-donors-icon {
        content: url("/Images/mdi-dark.png");
    }
    [data-theme="dark"] .active-export-icon {
        content: url("/Images/export-dark.png");
    }
    [data-theme="dark"] .active-extend-icon {
        content: url("/Images/extend-dark.png");
    }
    [data-theme="dark"] .active-inventory-icon {
        content: url("/Images/inventory-dark.png");
 
       
    }
    [data-theme="dark"] .active-icon {
        content: url("/Images/mdi_building-dark.png");
    }
.sidebar-toggle-icon {
    transition: filter 0.2s ease;
}

/* Dark Mode */
[data-theme="dark"] .sidebar-toggle-icon {
    filter: brightness(0) invert(1);
}
.inventory-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
    [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"] .edit-icon {
        content: url("/Images/editicon-dark.png");
    }

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

    [data-theme="dark"] .send-icon {
        content: url("/Images/send-dark.png");
    }
    [data-theme="dark"] .dollar-icon {
        content: url("/Images/dollaricon-dark.png");
    }
    [data-theme="dark"] .record-donation-icon {
        content: url("/Images/add-icon-dark.png");
    }
    [data-theme="dark"] .dropdown-icon {
        content: url("/Images/dropdown-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"] .menu-parent {
        color: #e5e7eb;
    }

        [data-theme="dark"] .menu-parent.active {
            background-color: transparent;
            color: #e5e7eb; /* Keep light gray, don't turn blue */
        }

    [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 {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-app);
    color: var(--text-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
    /*overflow: hidden;*/
}

.app-shell {
    background: var(--bg-app);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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);
}
.dropdown-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
/* =========================================
   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 */
}
.merge-btn {
    padding: 6px 25px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
    min-height: 36px;
    transition: all 0.3s ease;
}

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

    .merge-btn:focus {
        outline: none;
    }

/* Dark mode */
[data-theme="dark"] .merge-btn {
    background: var(--bg-input); /* light gray background */
    border-color: var(--border-color);
    color: var(--text-primary);
}

    [data-theme="dark"] .merge-btn:hover {
        background: var(--bg-hover);
    }
/* ==============================
   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: 21px;
    height: 21px;
    filter: var(--back-icon-filter);
}

.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: var(--button-bg);
    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);
        background: var(--button-hover-bg);
    }

    .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: 36px;
    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: 130px;
    padding: 0 36px;
    background: var(--bg-card-soft);
    color: var(--text-primary);
    border: 2px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}

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

/* ===== Donate Button ===== */
.xq-donate-btn {
    min-width: 190px;
    padding: 0 36px;
    /* FIGMA STYLE GRADIENT */
    background: var(--button-bg);
    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;
}


/* ===== 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: var(--button-bg);
    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: 100%;
    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);
}
.phone-dro .active {
    background-color: #e9f3ff;
    color: black;
}
.highlighted {
    background: #e5f3ff;
}
/* Upload box */
.cd-item.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dropdown44-item.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.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: #ffffff;
    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(--button-bg);
    color: var(--text-inverse);
    border: none;
    min-width: 120px;
    justify-content: center;
    height: 30px;
}

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

/* =========================================
   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(--button-bg, 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(--button-hover-bg, var(--primary));
    }

/* =========================
   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(--button-bg, 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(--button-hover-bg, var(--primary));
    }
/* =========================================
   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;
    }

.report-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.report-toolbar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    padding-right: 10px;
    white-space: nowrap;
}

.report-toolbar-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .report-toolbar-filter label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .report-toolbar-filter input {
        width: 180px;
        height: 42px;
        padding: 0 12px;
        border: 1px solid var(--edit-input-border);
        border-radius: 8px;
        font-size: 14px;
        background: var(--edit-input-bg);
        color: var(--edit-input-text);
    }

        .report-toolbar-filter input:focus {
            outline: none;
            box-shadow: var(--edit-input-focus-shadow);
        }

.report-toolbar-btn {
    height: 42px;
    min-width: 130px;
    border: none;
    border-radius: 8px;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.report-filter-btn {
    background: var(--button-bg);
    color: var(--primarytext-color);
}

    .report-filter-btn:hover {
        background: var(--button-hover-bg);
    }

.report-pdf-btn {
    background: var(--primary);
    color: var(--text-inverse);
}

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

.report-excel-btn {
    background: var(--success-color);
    color: var(--text-inverse);
}

    .report-excel-btn:hover {
        filter: brightness(0.95);
    }
.preview-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.preview-modal-box {
    background: var(--review-bill-modal-bg);
    border: 1px solid var(--review-bill-modal-border);
    border-radius: 14px;
    padding: 28px 32px 24px 32px;
    width: 100%;
    max-width: 860px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--review-bill-modal-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
}

.preview-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.preview-modal-daterange {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
}

.preview-close-btn {
    background: var(--bg-hover);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--close-btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

    .preview-close-btn:hover {
        background: var(--bg-card-soft);
    }

.preview-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--table-container-border);
    background: var(--table-container-bg);
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.91rem;
}

    .preview-table thead tr {
        background: var(--table-header-bg);
    }

    .preview-table th {
        padding: 10px 14px;
        text-align: left;
        font-weight: 600;
        color: var(--table-header-text);
        border-bottom: 2px solid var(--border-color);
        white-space: nowrap;
    }

    .preview-table td {
        padding: 9px 14px;
        border-bottom: 1px solid var(--table-row-border);
        color: var(--table-row-text);
        background: var(--table-row-bg);
    }

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

    .preview-table tbody tr:hover td {
        background: var(--bg-hover);
    }

.preview-section-header td {
    background: var(--salary-chip-salary-bg);
    color: var(--salary-chip-salary-text);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    padding: 8px 14px;
}

.preview-parent-row td {
    background: var(--bg-card-soft);
    color: var(--text-primary);
    font-weight: 600;
    padding-top: 10px;
}

.preview-subtotal-row td {
    background: var(--table-header-bg);
    color: var(--text-primary);
    font-weight: 500;
    border-top: 1px solid var(--border-color);
}

.preview-net-profit-row td {
    background: var(--salary-chip-salary-bg);
    color: var(--salary-chip-salary-text);
    font-size: 1rem;
    font-weight: 700;
    border-top: 2px solid var(--salary-chip-salary-text);
}
/* =========================================
   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;
}
.preview-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.5;
}

    .preview-row strong {
        font-weight: 600;
        color: #1f2937;
    }

    .preview-row span {
        color: #111827;
        font-weight: 400;
    }

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

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

.card .three-inputs-group {
    display: flex !important;
    align-items: flex-end;
    gap: 10px;
}

.apply-new-btn,
.excel-btn {
    height: 35px;
    padding: 0 16px;
    line-height: 35px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
}

.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 */
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .add-mode-backdrop {
        padding: 16px;
    }

    .don.add-mode-modal {
        width: 380px;
        height: auto;
        min-height: 180px;
        padding: 18px 20px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .add-mode-backdrop {
        padding: 12px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .don.add-mode-modal {
        width: 100%;
        max-width: 340px;
        height: auto;
        min-height: 170px;
        padding: 16px;
        margin: 20px 0;
    }

    .input-group {
        gap: 6px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .don.add-mode-modal {
        max-width: 300px;
        padding: 14px;
        border-radius: 6px;
    }

    .input-group {
        gap: 5px;
    }
}
/* 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;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.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;
}
    .dropdown-menu.show {
        display: block;
    }
/* ==============================
   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);
    }
.donor-header-row {
    display: flex;
    align-items: center;
}

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

.cheque-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px; /* Controls distance from "Cheque Details" */
}
.circle span {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle span {
    transform: translateY(-1px);
}
.circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

    .circle span {
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        margin: 0;
        padding: 0;
    }
/*.circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .circle span {
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }*/

@media (max-width: 768px) {
    .circle {
        width: 16px;
        height: 16px;
    }

        .circle span {
            font-size: 11px;
        }
}

@media (max-width: 480px) {
    .circle {
        width: 14px;
        height: 14px;
    }

        .circle span {
            font-size: 10px;
        }
}
/*.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: 16px;
    margin-bottom: 16px;
}


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

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

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

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

/* Send Test button */
.send-test-btn {
    height: 32px;
    padding: 12px 28px;
    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: 24px;
}

.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) !important;
    border-radius: 6px;
    padding: 16px; 
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

    .view-stat-card h2 {
        font-size: 28px !important; /* Big but tight */
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        color: var(--text-primary) !important;
    }

        .view-stat-card.green h2 {
            color: #10b981 !important;
        }

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

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

    .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 {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

/* 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;
    }
/* ==========================================
   Mobile (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .carousel-wrapper {
        overflow-x: hidden;
    }

    .carousel-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stat-card {
        min-width: 290px;
        padding: 12px;
    }

    .staff-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    .staff-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .bank-name-text {
        font-size: 12px;
    }

    .amount {
        font-size: 12px !important;
    }

    .balance-left {
        font-size: 11px;
    }

    .text-grey-box {
        font-size: 11px;
    }
}
/* ==========================================
   Small Phones (480px and below)
   ========================================== */
@media (max-width: 480px) {

    .stat-card {
        min-width: 260px;
    }

    .bank-name-text {
        font-size: 11px;
    }

    .amount {
        font-size: 11px !important;
    }

    .balance-left {
        font-size: 10px;
    }

    .staff-right img {
        width: 20px;
        height: 20px;
    }
}
.users-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 16px; /* Reduced padding */
}

.users-header {
    margin-bottom: 16px;
}

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

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

    .users-header h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
    }

.search-box {
    position: relative;
    width: 250px; /* Smaller width */
    flex-shrink: 0; /* Don't shrink */
}

    .search-box input {
        width: 20%;
        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;
    padding: 12px 16px;
    background: var(--user-row-bg, #ffffff);
    border: 1px solid var(--user-row-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 60px !important; /* Reduced from 90px */
    padding: 0 16px !important;
}

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

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

    .user-row1 strong {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 2px;
        display: block;
        color: #111827;
    }
.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    font-size: 12px !important;
}

.avatar {
    position: relative !important; /* This fixes the overlap */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    margin: 0;
    background-color: #fef3c7; /* Fallback color */
    color: #111827;
}

.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;
    gap: 12px !important;
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .user-tags {
        flex-wrap: wrap;
        gap: 6px;
    }

    .role.super-admin,
    .role.admin,
    .role.user,
    .role.donor {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

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

    .role.super-admin,
    .role.admin,
    .role.user,
    .role.donor {
        font-size: 9px;
        padding: 3px 8px;
        white-space: nowrap;
    }

    .user-info span {
        font-size: 11px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .user-tags {
        gap: 4px;
    }

    .role.super-admin,
    .role.admin,
    .role.user,
    .role.donor {
        font-size: 8px;
        padding: 2px 6px;
    }

    .user-info span {
        font-size: 10px;
    }
}
/* ===== Report Row Layout ===== */
.report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    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;
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .users-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .search-box {
        width: 100%;
    }

    .user-row,
    .user-row1 {
        padding: 12px 16px;
        height: auto;
        min-height: 80px;
    }

    .report-row {
        padding: 18px 14px;
    }
}
/* ==========================================================================
   COA ATTACHMENT PREVIEW POPUP
   ========================================================================== */

.coa-attachment-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    z-index: 9999;
}

.coa-attachment-preview-modal {
    width: 800px;
    max-width: 92%;
    height: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.coa-attachment-preview-header {
    height: 55px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

    .coa-attachment-preview-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.coa-attachment-preview-close-button {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
}

    .coa-attachment-preview-close-button:hover {
        background: rgba(0,0,0,.08);
    }

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

.coa-attachment-preview-body {
    flex: 1;
    display: flex;
}

/* ==========================================================================
   DOCUMENT LIST
   ========================================================================== */

.coa-attachment-preview-sidebar {
    width: 180px;
    border-right: 1px solid var(--border-color);
    padding: 12px;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.coa-attachment-preview-document-item {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    text-align: left;
    transition: .2s;
    font-size: 14px;
}

    .coa-attachment-preview-document-item:hover {
        background: var(--primary-light);
        border-color: var(--primary-color);
    }

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

.coa-attachment-preview-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: var(--bg-page);
}

.coa-attachment-preview-image {
    max-width: 100%;
    max-height: 450px;
    border-radius: 8px;
}

.coa-attachment-preview-pdf {
    width: 100%;
    height: 100%;
    border: none;
}

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

@media (max-width:768px) {

    .coa-attachment-preview-modal {
        width: 95%;
        height: 85vh;
    }

    .coa-attachment-preview-body {
        flex-direction: column;
    }

    .coa-attachment-preview-sidebar {
        width: 100%;
        height: 140px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}
/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .users-card {
        padding: 16px;
    }

    .users-header h2 {
        font-size: 16px;
    }

    .search-box {
        width: 100%;
    }

    .user-row,
    .user-row1 {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        height: auto;
        padding: 14px;
    }

    .user-info {
        width: 100%;
    }

    .user-tags {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .avatar {
        width: 36px;
        height: 36px;
    }

    .report-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .report-info {
        width: 100%;
    }

    .report-title {
        font-size: 13px;
    }

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

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .users-card {
        padding: 12px;
    }

    .user-row,
    .user-row1 {
        padding: 12px;
    }

    .user-info {
        gap: 10px;
    }

    .avatar {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .role.super-admin,
    .role.admin,
    .role.user,
    .role.donor {
        font-size: 9px;
        padding: 2px 6px;
    }

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

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

/* ===== 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;
    filter: var(--summary-icon-filter);
}
/* ==========================================
   Tablet (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .report-preview-btn {
        margin-left: auto;
        flex-shrink: 0;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .report-preview-btn {
        margin-left: auto;
        width: 22px;
        height: 22px;
    }

    .report-preview-icon {
        width: 14px;
        height: 14px;
    }
}
.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-modal44 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-card);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    z-index: 1010;
    max-width: 400px;
    width: 90%;
    text-align: center;
    opacity: 1;
    color: var(--text-primary);
}
.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 {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
}

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

    .modal-user-header .donor-info strong {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 2px;
        display: block;
        color: #111827;
    }

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

.modal-info {
    padding: 20px;
}

    .modal-info .info-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
        font-size: 13px;
        color: var(--text-primary);
    }

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

        .modal-info .info-row img {
            opacity: 0.7;
            filter: var(--summary-icon-filter);
        }
.revenue-modal-box:has(.modal-info)::after {
    content: '';
    display: block;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.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: var(--btn-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0 16px;
    height: 20px;
    min-width: auto;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-close-grey:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
.add-line-btn_split {
    width: auto;
    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: var(--primary);
        color: var(--primarytext-color);
        border-color: var(--primary);
    }

        .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: 400px !important; /* Fixed from 48px */
    max-width: 90%;
}

    .edit-user-modal h3 {
        font-family: "Poppins", sans-serif;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 0;
        color: #111827;
    }

    .edit-user-modal .edit-form {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

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

.edit-user-modal .edit-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.edit-form input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    font-size: 13px;
    outline: none;
    height: 40px; /* Standard compact height */
}
.edit-form select {
   padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--edit-input-border);
    background-color: var(--edit-input-bg);
    color: var(--edit-input-text);
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    outline: none;
    height: 44px;
    width: 100%;
}

.edit-form input:focus {
    border-color: var(--primary-color);
    background: var(--bg-card);
}
    .edit-form select:focus {
        border: 1px solid var(--primary-color, #4f46e5);
        background-color: white;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }


.edit-user-modal .btn-primary {
    width: calc(100% - 48px); /* Accounts for 24px padding on left and right */
    margin: 10px 24px 24px 24px; /* Pushes it down from the form fields */
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--button-bg, #4f46e5);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    box-sizing: border-box; /* CRITICAL: This stops the button from overflowing! */
}

    .edit-user-modal .btn-primary:hover {
        background: var(--button-hover-bg, #4338ca);
    }

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

.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;
    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;
    transition: background-color 0.2s ease, color 0.2s ease;
}

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

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

.menu-item img {
    filter: var(--menu-icon-filter);
}

/* PARENT BUTTON */
.menu-parent {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

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

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

    .menu-children a {
        display: block;
        padding: 6px 0;
        font-size: 12px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .menu-children a:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
            border-radius: 4px;
        }

.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: var(--primary-color);
        color: var(--primarytext-color);
        border: 1px solid var(--border-color);
    }

        .menu-item.active .text {
            color: var(--primarytext-color);
        }

        .menu-item.active img,
        .menu-parent.active img {
            filter: var(--active-icon-filter) !important;
        }
        /* 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 {
    color: var(--primarytext-color);
}

    .menu-parent.open svg {
        stroke: #ffffff;
    }
/* Parent active state ONLY - keep white text, don't turn blue */
.menu-parent.active {
    background: transparent;
    color: var(--primarytext-color);
}

    /* Keep icon color normal */
    .menu-parent.active svg {
        stroke: var(--icon-color);
    }

    .menu-parent.active img {
        filter: var(--menu-icon-filter);
    }
/* 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;
    }
}
.coa-display-columns-dropdown {
    width: 150px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 0 10px;
    background-color: var(--bg-input);
    color: var(--text-primary);
}
.report-compare-menu-btn {
    
    border: 1px solid #d1d5db;
    background-color: var(--bg-input);
    color: var(--text-primary);
}
/* 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: var(--primarytext-color);
            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: var(--primary-color);
    color: var(--primarytext-color);
}
        /* Icon + arrow turn white */
    .menu-parent.active svg {
        stroke: var(--primarytext-color);
    }
    .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;
}

.system-updates-empty-state {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 50px 20px;
    margin-top: 20px;
    text-align: center;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.system-updates-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.system-updates-empty-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

.system-updates-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.system-updates-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

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

.system-update-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.system-update-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.system-update-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.system-update-version {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg-card-soft);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    margin-top: 0;
}

.system-update-actions {
    display: flex;
    align-items: center;
}

.system-btn {
    height: 28px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: var(--btn-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.system-btn-edit {
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background: var(--btn-bg);
}

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

.system-btn-delete {
    border: 1px solid var(--border-color);
    color: var(--danger-color);
    background: var(--btn-bg);
}

    .system-btn-delete:hover {
        background: var(--danger-hover-bg);
    }

.system-update-body {
    margin-top: 8px;
}

.system-update-description {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.system-update-footer {
    margin-top: 10px;
}

.system-update-date {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}
/* ===========================
   POPUP HEADER
===========================*/
.system-update-popup-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.system-update-popup-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--text-inverse);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.system-update-popup-heading h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.system-update-popup-heading span {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 13px;
}

.system-update-popup-divider {
    height: 1px;
    background: var(--border-color);
    margin: 18px -24px;
}

.system-update-popup-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.system-update-popup-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

    .system-update-popup-title-row h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        color: var(--text-primary);
    }

.system-update-version-badge {
    background: var(--bg-card-soft);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.system-update-popup-description {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 15px;
}
/* =========================
   SYSTEM UPDATE MODAL
========================= */

.system-update-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--revenue-backdrop-bg);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.system-update-modal {
    width: 100%;
    max-width: 430px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    animation: modalFadeIn .2s ease;
    position: relative;
    z-index: 10001;
}

.system-update-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

    .system-update-modal-header h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .system-update-modal-header p {
        margin-top: 6px;
        color: var(--text-secondary);
        font-size: 14px;
    }

.system-update-close-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    color: var(--text-secondary);
}

.system-update-form-group {
    margin-bottom: 18px;
}

    .system-update-form-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .system-update-form-group input,
    .system-update-form-group textarea {
        width: 100%;
        border: 1px solid var(--edit-input-border);
        background: var(--edit-input-bg);
        color: var(--edit-input-text);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: .2s;
        box-sizing: border-box;
    }

        .system-update-form-group input:focus,
        .system-update-form-group textarea:focus {
            border-color: var(--primary);
            box-shadow: var(--edit-input-focus-shadow);
        }

    .system-update-form-group textarea {
        resize: none;
        min-height: 110px;
    }

        .system-update-form-group input::placeholder,
        .system-update-form-group textarea::placeholder {
            color: var(--text-muted);
        }

.system-update-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.system-update-btn-cancel {
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    background: var(--btn-bg);
    color: var(--text-primary);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
}

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

.system-update-btn-publish {
    position: relative;
    z-index: 10002;
    padding: 10px 18px;
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

    .system-update-btn-publish:hover {
        background: var(--primary-hover);
    }

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================
   DELETE UPDATE MODAL
========================== */

.delete-update-overlay {
    position: fixed;
    inset: 0;
    background: var(--revenue-backdrop-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.delete-update-modal {
    width: 100%;
    max-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow-md);
}

.delete-update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

    .delete-update-header h3 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        color: var(--text-primary);
    }

.delete-update-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary);
}

    .delete-update-close:hover {
        color: var(--text-primary);
    }

.delete-update-message {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

    .delete-update-message strong {
        color: var(--text-primary);
        font-weight: 700;
    }

.delete-update-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.delete-update-cancel {
    min-width: 90px;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--btn-bg);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

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

.delete-update-confirm {
    min-width: 90px;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    background: var(--danger-color);
    color: var(--text-inverse);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .delete-update-confirm:hover {
        background: var(--danger-hover-bg);
    }
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); /* Default with header */
    overflow: hidden;
    min-height: 0;
}

    /* When header is hidden, no need to subtract header height */
    .app-body.no-header {
        height: 100vh;
    }

/* 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);
}*/
.main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    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(--head-bottom);
    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: 1.5px;
    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(--button-bg);
    color: var(--text-inverse);
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.menu-child-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-tab-btn {
    text-decoration: none;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}
.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
   ========================= */

.pending-rights-btn {
    background: var(--button-bg);
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
}

.pending-status-badge {
    background: #ffffff;
    color: #ff9900;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
}

.pending-org-badge {
    background: #162544;
    color: white;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

.pending-action-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
    padding-top: 75px;
}

pending-user-name{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:#111111;
    line-height:1.2;
}
pending-user-meta {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    color: #8c8c8c;
}
.pending-role-label {
    margin-bottom: 6px;
    display: block;
    color: var(--text-secondary) !important;
    font-size: 12px;
    font-weight: 600;
}
.profile-upload {
    display: flex;
    justify-content: center;
    margin: 16px 0 10px;
    margin-top: -12px;
}

.pending-role-select{
    width:100%;
    height:25px;
    border:none;
    background:#edf1f7;
    border-radius:4px;
    padding:0 8px;
    font-size:12px;
    color:#111111;
    outline:none;
    appearance:none;
}
.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 */
}
.merge-checkbox-card {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    accent-color: var(--primary);
}

/* Center the checkbox and card vertically */
.staff-row {
    display: flex;
    align-items: center;
    width: 100%;
}

    .staff-row > .card,
    .staff-row > .staff-card-new {
        flex: 1;
    }
/* ==========================================
   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 {
    width: calc(100% - 28px);
    margin: 10px 24px 24px 24px;
    padding: 0 14px; /* Only horizontal padding */
    border: none;
    border-radius: 8px;
    background: var(--button-bg, #4f46e5);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    height: 33px;
    transition: background 0.2s;
    box-sizing: border-box;
    display: flex; /* Add flexbox */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
}

    .btn-primary:hover {
        background: var(--button-hover-bg);
        transform: translateY(-1px);
    }

    .btn-primary:active {
        background: var(--button-hover-bg);
        transform: translateY(0px);
    }

/* SMTP Verify Button Styling */
.smtp-verify-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 24px; /* Spacing between button and card below */
    border: 1px solid var(--border-color);
}

.smtp-verify-text {
    flex: 1;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.secondary-btn.smtp-verify-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #17223a 0%, #2a3f5f 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(23, 34, 58, 0.3);
}

    .secondary-btn.smtp-verify-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 34, 58, 0.4);
    }

    .secondary-btn.smtp-verify-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* Add spacing after the verify row */
.smtp-verify-row + form .card {
    margin-top: 0;
}

/*    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 var(--border-color);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-bottom: 2px;
}

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

    /* Active */
    .btn-download.active {
        background: #17223A;
    }
[data-theme="dark"] .btn-download {
    background: #e5e7eb; /* light gray */
    border-color: #d1d5db;
}

    [data-theme="dark"] .btn-download img {
        filter: none; /* keep black icon */
    }

    /* Active */
    [data-theme="dark"] .btn-download.active {
        background: #f59e0b; /* your orange active color */
        border-color: #123B2A;
    }

        [data-theme="dark"] .btn-download.active img {
            filter: none;
        }
.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: 12px 16px;
    background-color: var(--bg-card);
    border-radius: 8px;
    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: 16px;
    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(--primarytext-color);
    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: var(--primarytext-color);
    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 */
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .card.revenue-item {
        padding: 12px;
    }

    .revenue-name {
        font-size: 15px;
    }

    .action-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .revenue-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .revenue-amount {
        width: 100%;
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
    }

        .revenue-amount .amount {
            margin-right: 0;
        }

    .revenue-name {
        font-size: 14px;
    }

    .revenue-meta,
    .revenue-sub {
        font-size: 11px;
    }

    .action-buttons {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

        .action-buttons > * {
            width: 100%;
        }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .card.revenue-item {
        padding: 10px;
    }

    .revenue-name {
        font-size: 13px;
    }

    .revenue-meta {
        font-size: 9px;
        padding: 2px 8px;
    }

    .revenue-sub {
        font-size: 10px;
    }
}
.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;
    }
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .status {
        width: 52px;
        height: 15px;
        font-size: 9px;
        border-radius: 10px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .status {
        width: 46px;
        height: 14px;
        font-size: 8px;
        border-radius: 9px;
        padding: 0 4px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .status {
        width: 42px;
        height: 13px;
        font-size: 7px;
        border-radius: 8px;
        padding: 0 3px;
    }
}
.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: 19px;
        font-weight:600;
        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);
    animation: popupScale .22s ease;
    border: 1px solid var(--border-color);
}
@keyframes popupScale {
    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.delete-warning-icon {
    width: 56px;
    height: 56px;
    margin: 6px auto 14px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.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;
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .popup-new-small {
        width: 340px;
        max-width: 90%;
        padding: 14px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .popup-new-small {
        width: 300px;
        max-width: calc(100% - 24px);
        padding: 12px;
    }

    .manual-key {
        white-space: normal;
        word-break: break-word;
    }

    .popup-close {
        top: 8px;
        right: 10px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .popup-new-small {
        width: 280px;
        max-width: calc(100% - 20px);
        padding: 10px;
    }

    .popup-close,
    .popup-close-center {
        font-size: 14px;
    }
}
/* 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: var(--primary);
    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 var(--border-color);
    border-radius: 8px;
    background: var(--btn-bg);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

.invite-send-btn.revenue-modal-submit-btn {
    height: 44px;
    border: none;
    border-radius: 8px;
    background: var(--button-bg, var(--primary));
    color: var(--text-inverse);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    width: 100%;
    transition: background-color 0.2s ease;
}

    .invite-send-btn.revenue-modal-submit-btn:hover {
        background: var(--button-hover-bg, var(--primary));
    }

.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;
    }
}
/* --- Check and cross buttons style ADDBANKACCOUNT --- */
.feed-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    cursor: default;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.feed-status.connected {
    color: var(--success-color, #22c55e);
    background: var(--success-bg, rgba(34, 197, 94, 0.12));
}

.feed-status.connected:hover {
    background: var(--success-bg-hover, rgba(34, 197, 94, 0.22));
    transform: scale(1.08);
}

.feed-status.manual {
    color: var(--danger-color, #ef4444);
    background: var(--danger-bg, rgba(239, 68, 68, 0.12));
}

.feed-status.manual:hover {
    background: var(--danger-bg-hover, rgba(239, 68, 68, 0.22));
    transform: scale(1.08);
}

.icon-btn.delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.icon-btn.delete:hover {
    background: var(--danger-bg, rgba(239, 68, 68, 0.12));
}

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


.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .left-icon {
    position: absolute;
    left: 10px;
    width: 18px;
    height: 18px;
    pointer-events: none; /* click passes through to input/wrapper */
    z-index: 2;
}

.input-with-icon .global.form-input {
    padding-left: 36px; /* room for the left icon */
    position: relative;
}

/* Hide native calendar icon on the right (WebKit: Chrome, Edge, Safari) */
.input-with-icon input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* keep it clickable/full-width so the whole field opens the picker */
}

/* Optional: normalize the field so no extra space is reserved for the native icon */
.input-with-icon input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}
.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);
}

/* ── Profit & Loss KPI Cards ──────────────────────────────── */

.pl-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 1rem;
}

.pl-kpi-card {
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pl-kpi-highlight {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.pl-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.pl-kpi-val {
    font-size: 1.1rem;
    color: var(--text-primary);
}

    .pl-kpi-val.green,
    .green {
        color: var(--success-color);
    }

    .pl-kpi-val.red,
    .red {
        color: var(--danger-color);
    }

/* ── Report Table ──────────────────────────────── */

.pl-report-table {
    font-size: 13px;
}

.pl-section-head td {
    padding: 9px 14px 5px;
    font-weight: 700;
    font-size: 13.5px;
    background: var(--bg-card);
    color: var(--text-primary);
    border-top: 2px solid var(--border-color) !important;
}

.pl-group-head td {
    padding: 7px 14px;
    font-weight: 600;
    background: var(--bg-card-soft);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color) !important;
}

.pl-sub-row td {
    padding: 6px 14px 6px 32px !important;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--bg-card);
}

.pl-subtotal-row td {
    padding: 7px 14px 7px 32px !important;
    font-weight: 600;
    background: var(--bg-card-soft);
    color: var(--text-primary);
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.pl-total-row td {
    padding: 9px 14px !important;
    font-weight: 700;
    background: var(--table-header-bg);
    color: var(--text-primary);
    border-top: 1px solid var(--border-strong) !important;
    border-bottom: 2px solid var(--border-strong) !important;
}

/* Keep financial success colors */

.pl-gross-row td {
    padding: 9px 14px !important;
    font-weight: 700;
    background: rgba(22, 163, 74, 0.12);
    color: var(--success-color);
    border-top: 2px solid var(--success-color) !important;
    border-bottom: 2px solid var(--success-color) !important;
}

.pl-net-row td {
    padding: 11px 14px !important;
    font-size: 14px;
    font-weight: 700;
    background: rgba(22, 163, 74, 0.08);
    color: var(--success-color);
    border-top: 2px solid var(--success-color) !important;
}

.pl-amt {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.pl-acct-badge {
    display: inline-block;
    font-size: 10.5px;
    background: var(--bg-hover);
    color: var(--text-muted);
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 5px;
}

/* Loading Spinner */

.pl-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 10px;
}

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

.expense-footer-row .donor-header-row {
    margin-bottom: 1px;
    margin-top: 1px;
}

.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 6px; /* ⬅️ 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: 14px;
    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;
}

.rd-delete-btn {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #ff4d3d;
    border-radius: 8px;
    background: #ffffff;
    color: #ff4d3d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .rd-delete-btn:hover {
        background: #fff5f4;
    }

    .rd-delete-btn:active {
        background: #ffeceb;
    }

.rd-delete-btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.rd-delete-btn span {
    display: flex;
    align-items: center;
    line-height: 1;
}
/* ===== 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: var(--primary-table);
    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: var(--btn-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.btn-submit {
    background: var(--button-bg);
    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: var(--button-hover-bg);
        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-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;
    font-family: Arial, sans-serif; /* 👈 important fix */
    align-items: center;
}

.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;
    background:var(--primary-table);
    padding:8px 8px;
}

.summary-card {
    background: var(--primary-table);
    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;
}

/* ================================
   Revenue Modal Backdrop
================================ */

.revenue-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--revenue-backdrop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* ================================
   Revenue Modal
================================ */

.revenue-modal-box {
    background: var(--revenue-modal-bg) !important;
    border-radius: 12px;
    max-width: 500px !important;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--revenue-modal-shadow);
    display: block !important;
    padding: 20px !important;
}

/* ================================
   Header
================================ */

.revenue-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--revenue-modal-border);
}

.revenue-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--revenue-modal-title-color);
}

.revenue-close-btn {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--close-btn-color);
    cursor: pointer;
    transition: color .2s ease;
}

/* ================================
   Body
================================ */

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

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

/* ================================
   Labels
================================ */

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

/* ================================
   Radio Cards
================================ */

.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 .2s ease;
}

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

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

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

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

    .revenue-radio-content span {
        display: flex;
        align-items: center;
        font-size: 12px;
        line-height: 1;
        font-weight: 400;
        color: var(--text-primary);
    }
.vendor-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.vendor-popup-title {
    margin: 10px 0 0 20px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.vendor-popup-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 5px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vendor-popup-close-icon {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] .vendor-popup-close-icon {
    content: url("/Images/cl-dark.png");
}
/* ================================
   Inputs
================================ */

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

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

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

/* ================================
   Select
================================ */

.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;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

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

/* ================================
   Submit Button
================================ */

.revenue-modal-submit-btn {
    margin-top: 10px;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

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

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

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

/* ================================
   Button Row
================================ */

.revenue-modal-body .button-row,
.revenue-modal-box .button-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

    .revenue-modal-body .button-row .reset-btn,
    .revenue-modal-body .button-row .btn-submit,
    .revenue-modal-box .button-row .reset-btn,
    .revenue-modal-box .button-row .btn-submit {
        width: auto !important;
        min-width: 100px;
    }
/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .revenue-modal-backdrop {
        padding: 18px;
    }

    .revenue-modal-box {
        max-width: 520px;
        padding: 24px;
        border-radius: 18px;
    }

    .revenue-modal-title {
        font-size: 20px;
    }

    .revenue-modal-body {
        gap: 16px;
    }

    .revenue-modal-input,
    .revenue-radio-card,
    .revenue-modal-submit-btn {
        height: 46px;
    }

    .revenue-modal-textarea {
        min-height: 80px;
        height: 80px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .revenue-modal-backdrop {
        padding: 12px;
        align-items: flex-start;
    }

    .revenue-modal-box {
        width: 100%;
        max-width: none;
        padding: 18px;
        border-radius: 14px;
        margin: 20px 0;
    }

    .revenue-modal-header {
        margin-bottom: 14px;
    }

    .revenue-modal-title {
        font-size: 18px;
    }

    .revenue-modal-body {
        gap: 14px;
    }

    .revenue-modal-label {
        font-size: 11px;
    }

    .revenue-modal-input,
    .revenue-radio-card,
    .revenue-modal-submit-btn {
        height: 42px;
        font-size: 11px;
    }

    .revenue-radio-content span {
        font-size: 11px;
    }

    .revenue-radio-content input[type="radio"] {
        width: 14px;
        height: 14px;
    }

    .revenue-modal-textarea {
        min-height: 72px;
        height: 72px;
        padding: 10px;
    }

    .revenue-close-btn {
        font-size: 16px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .revenue-modal-backdrop {
        padding: 8px;
    }

    .revenue-modal-box {
        padding: 14px;
        border-radius: 12px;
    }

    .revenue-modal-title {
        font-size: 16px;
    }

    .revenue-modal-input,
    .revenue-radio-card,
    .revenue-modal-submit-btn {
        height: 40px;
        font-size: 10px;
    }

    .revenue-modal-label,
    .revenue-radio-content span {
        font-size: 10px;
    }

    .revenue-modal-textarea {
        min-height: 64px;
        height: 64px;
    }

    .revenue-close-btn {
        font-size: 14px;
    }
}
/* 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: var(--button-bg);
    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: var(--button-hover-bg);
        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: 12px; /* Equal gap between all cards */
}


/* Individual stat card */
.pay-stat-card {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 20px; /* Increased from 16px */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between label and value */
}


    /* Label text */
    .pay-stat-card small,
    .pay-stat-card > span {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
    }

/* Value */
.pay-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}



/* Net salary card */
.pay-net-card {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 12px;
}

    .pay-net-card > span {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 8px;
    }

.pay-net-value {
    font-size: 32px; /* Bigger net salary */
    font-weight: 800;
    color: #111827;
    margin: 0;
}

.pay-green {
    color: #10b981 !important;
}

.pay-red {
    color: #ef4444 !important;
}

.pay-purple {
    color: #8b5cf6 !important;
}

/*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: 2px solid rgba(0, 0, 0, 0.53);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    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: var(--primarytext-color);
}
/* ===========================
   View Modal
=========================== */

.view-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn .2s ease;
}

.view-modal {
    width: 470px;
    max-width: 95%;
    background: var(--bg-card, #fff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    animation: popup .25s ease;
}

/* Header */

.view-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

    .view-modal-header h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        color: var(--text-primary, #222);
    }

/* Close Button */

.view-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    transition: .2s;
    color: var(--text-secondary, #666);
}

    .view-modal-close:hover {
        background: #f2f2f2;
        color: #e53935;
    }

/* Body */

.view-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Individual Fields */

.view-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-soft);
}
.view-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.view-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #222);
    word-break: break-word;
}

/* Footer */

.view-modal-footer {
    padding: 18px 22px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: flex-end;
}

/* Close Button */

.view-close-btn {
    min-width: 110px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: #3b82f6;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

    .view-close-btn:hover {
        background: #2563eb;
        transform: translateY(-1px);
    }

/* Animations */

@keyframes popup {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.95);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* ===========================
   Dark Mode
=========================== */

.dark-mode .view-modal {
    background: var(--bg-card);
    color: var(--text-primary);
}

.dark-mode .view-modal-header,
.dark-mode .view-modal-footer {
    border-color: var(--border-color);
}

.dark-mode .view-field {
    background-color: var(--bg-card); /* or var(--bg-secondary) */
    border: 1px solid var(--border-color);
}

.dark-mode .view-label {
    color: var(--text-secondary);
}

.dark-mode .view-value {
    color: var(--text-primary);
}

.dark-mode .view-modal-close {
    color: var(--text-primary);
}

    .dark-mode .view-modal-close:hover {
        background: rgba(255, 255, 255, 0.08);
    }

.dark-mode .view-close-btn {
    background: var(--primary-color);
}

    .dark-mode .view-close-btn:hover {
        filter: brightness(1.1);
    }
.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;
    padding: 0 24px;
}

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


.popup-input {
    display: block;
    width: 100%;
    padding: 4px 10px;
    border: 1.5px solid grey; /* grey border */
    border-radius: 0px;
    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;
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .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: -80px;
    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: 9999;
    display: flex;
    flex-direction: column;
    min-width: 110px;
}
.coa-dropdown-menu-open-row {
    position: relative;
    z-index: 999;
}

.popup-input::placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
    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: 16px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

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

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

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


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

.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;
}
.spinner-border {
    margin-right: 8px;
}
.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;
    }
}

/* Reset all borders for card rows to prevent internal lines */
.journal-card-header-row td,
.journal-card-data-row td,
.journal-card-subtotal-row td,
.journal-card-attachment-row td {
    border: none !important;
}

/* HEADER ROW */
.journal-card-header-row td {
    background: var(--journal-table-row-bg) !important;
    border-top: 2px solid var(--journal-table-row-border) !important;
    color: var(--journal-table-body-text);
    padding: 0 !important;
}

    .journal-card-header-row td:first-child {
        border-left: 2px solid var(--journal-table-row-border) !important;
        border-top-left-radius: 8px;
    }

    .journal-card-header-row td:last-child {
        border-right: 2px solid var(--journal-table-row-border) !important;
        border-top-right-radius: 8px;
    }

/* DATA ROWS */
.journal-card-data-row td {
    background: var(--journal-table-row-bg) !important;
    color: var(--journal-table-body-text);
    border-bottom: 0 !important;
    padding: 12px 8px !important;
}

    .journal-card-data-row td:first-child {
        border-left: 2px solid var(--journal-table-row-border) !important;
    }

    .journal-card-data-row td:last-child {
        border-right: 2px solid var(--journal-table-row-border) !important;
    }

.journal-card-data-row:hover td {
    background: var(--bg-hover) !important;
}

/* SUBTOTAL ROW */
.journal-card-subtotal-row td {
    background: var(--journal-table-row-bg) !important;
    color: var(--journal-table-body-text);
    border-bottom: 2px solid var(--journal-table-row-border) !important;
    padding: 12px 8px !important;
}

    .journal-card-subtotal-row td:first-child {
        border-left: 2px solid var(--journal-table-row-border) !important;
        border-bottom-left-radius: 8px;
    }

    .journal-card-subtotal-row td:last-child {
        border-right: 2px solid var(--journal-table-row-border) !important;
        border-bottom-right-radius: 8px;
    }

/* ATTACHMENT ROW */
.journal-card-attachment-row td {
    background: var(--bg-card-soft) !important;
    color: var(--journal-table-body-text);
    border-bottom: 2px solid var(--journal-table-row-border) !important;
    padding: 0 !important;
}

    .journal-card-attachment-row td:first-child {
        border-left: 2px solid var(--journal-table-row-border) !important;
        border-bottom-left-radius: 8px;
    }

    .journal-card-attachment-row td:last-child {
        border-right: 2px solid var(--journal-table-row-border) !important;
        border-bottom-right-radius: 8px;
    }

.journal-attachment-box {
    padding: 12px 20px;
}

.journal-attachment-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

/* =========================================
   MODERN FORM GRID SYSTEM
   ========================================= */

.modern-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.modern-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

/* Address Section */
.address-section {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

.subsection-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Modern Card */
.modern-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

    .modern-card:hover {
        box-shadow: var(--shadow-md);
    }

/* Section Header */
.modern-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

    .modern-section-header h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        letter-spacing: -0.01em;
    }

/* Icon */
.modern-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primarytext-color);
    box-shadow: var(--shadow-sm);
}

    .modern-icon svg {
        width: 22px;
        height: 22px;
    }

/* Form Field Enhancements */
.donor-form-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}

.global.form-input,
.form-input,
.modern-textarea {
    width: 100%;
    padding: 12px 8px;
    font-size: 14px !important;
    border: 1px solid var(--border-fields) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    background: var(--bg-fields) !important;
    transition: all 0.2s ease !important;
}

    .global.form-input:focus,
    .form-input:focus,
    .modern-textarea:focus {
        outline: none !important;
        border-color: var(--primary) !important;
        background: var(--bg-input) !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    }

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

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

/* Phone Input */
.modern-phone-wrapper {
    display: flex;
    border: 1px solid var(--border-fields);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-fields);
    transition: all .2s ease;
}

    .modern-phone-wrapper:focus-within {
        border-color: var(--primary);
        background: var(--bg-input);
        box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    }

.modern-phone-drop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    transition: background .2s ease;
}

    .modern-phone-drop:hover {
        background: var(--bg-hover);
    }

.modern-phone-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}

/* Country Dropdown */
.phone-dro {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    max-height: 300px;
    overflow-y: auto;
}

.modern-dropdown-search {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
}

    .modern-dropdown-search::placeholder {
        color: var(--text-secondary);
    }

.modern-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background .15s ease;
}

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

.modern-dropdown-code {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}
/* Custom Dropdown - PRESERVING YOUR custom44-dropdown CLASSES */
.modern-custom-dropdown {
    position: relative;
}

.modern-dropdown-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 14px;
    color: #0f172a;
    transition: all 0.2s ease;
}

    .modern-dropdown-input:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.modern-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 50;
    overflow: hidden;
}

/* Checkboxes */
.modern-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.modern-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
    cursor: pointer;
}

.modern-checkbox-label {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

/* Responsive */
@media (max-width: 1200px) {
    .modern-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .modern-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .modern-grid-6,
    .modern-grid-3,
    .modern-grid-2 {
        grid-template-columns: 1fr;
    }

    .modern-card {
        padding: 20px;
    }

    .address-section {
        padding: 16px;
    }

    .modern-sticky-footer {
        bottom: 16px;
        flex-direction: column;
    }

        .modern-sticky-footer button {
            width: 100%;
        }
}

/* Fix radio + checkbox text alignment */
.theme-radio,
.custom-checkbox-wrapper {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1;
    cursor: pointer;
}

.custom-checkbox-circle {
    flex-shrink: 0;
    vertical-align: middle;
}

.theme-radio span,
.custom-checkbox-wrapper span {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/*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: var(--app-button-bg);
        color: var(--app-button-color);
    }

    .page-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
.btn-add-role {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    width: 25px;
    height: 33px;
}

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


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


.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;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

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

/*//hundoh css*/
.auth-right-hun{
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 60px 60px;
}
.welcome-card-hun{
    background-color: rgba(56, 129, 99, 0.16);
    border-radius: 24px;
    padding: 60px;
    max-width: 560px;
    width: 100%;
    height: 100%;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
/* Decorative top-right image (replaces ::before) */
.welcome-deco-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* prevents clicking issues */
}
.welcome-logo-hun{
    width: 150px;
    height: auto;
    margin-bottom: 60px;
    margin-left: -20px;
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.welcome-heading-hun{
    font-size: 40px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
    font-family: 'Megabyte Bold', sans-serif;
    position: relative;
    z-index: 1;
}

.welcome-text-hun{
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    text-align: left;
}
.welcome-subtext-hun{
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-align: left;
}
/* Decorative bottom-right image (replaces ::after) */
.welcome-deco-bottom{
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.btn-signin22 {
    width: 100%;
    padding: 14px 32px;
    background: linear-gradient(180deg, #123B2A 0%, /* solid dark green */
    #123B2A 50%, /* stays solid green for top half */
    #1a4d38 70%, /* slightly lighter green */
    #2d6652 85%, /* medium green */
    #4a8069 100% /* lighter green at bottom (not transparent) */
    );
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
}

    .btn-signin22:hover {
        opacity: 0.9;
    }

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

   

  


.review-bill-preview {
    height: 120px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-card-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .review-bill-preview:hover {
        border-color: #17233a; /* Highlight border on hover */
        background: #f1f5f9;
    }

.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-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    z-index: 999;
}

.review-bill-modal1 {
    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-preview1 {
    flex: 1;
    min-height: 450px;
    max-height: 70vh;
}
   .review-bill-preview {
    height: 120px; 
  border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-card-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px;
    overflow: auto;
}
.bill-preview1-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.bill-preview1-pdf {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: 6px;
}
.review-bill-modal1 {
    width: 90vw;
    max-width: 1000px;
    height: 85vh;
    display: flex;
    flex-direction: column;
}

    .review-bill-preview1:hover {
       cursor: pointer;
    transition: all 0.2s ease;
}
   
.review-bill-preview:hover {
        border-color: #17233a; /* Highlight border on hover */
        background: #f1f5f9;
    }




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

.order-modal {
    width: 100% !important;
    max-width: 720px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--bg-card);
}

    /* Header */
    .order-modal .revenue-modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }

    .order-modal .revenue-modal-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: var(--text-primary);
    }

/* =========================================================
   MANAGEMENT REPORTS EDITOR
   ========================================================= */


.mr-list-wrapper {
    overflow: visible !important;
}

    .mr-list-wrapper .dropdown44-menu {
        z-index: 2000;
    }

/* ---------- TOP BAR ---------- */
.mr-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
}

/* Page background should be white, not the onboarding grey */
.onboarding-page.mr-page {
    background: #ffffff;
}

.mr-title-input {
    flex: 1;
    min-width: 360px;
    height: 42px;
}

.mr-topbar-period {
    width: 140px;
    flex-shrink: 0;
    margin-left: auto;
}

    /* override the global .dropdown44-input width:100% just for the small topbar picker */
    .mr-topbar-period.custom-dropdown44 {
        width: 140px;
    }

.mr-period-input {
    width: 140px !important;
    box-sizing: border-box;
}

/* ---------- SIDEBAR NAV (card items + active dark icon) ---------- */
.mr-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mr-nav-item {
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

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

    .mr-nav-item.active {
        border-color: var(--primary);
        background: var(--bg-card);
    }

.mr-nav-icon {
    color: #6b7280;
}

.mr-nav-item.active .mr-nav-icon {
    background: var(--primary);
    color: #ffffff;
}

/* ---------- CONTENT PANEL ---------- */
.mr-content {
    padding: 28px 32px;
}

.mr-row {
    margin-top: 8px;
    margin-bottom: 4px;
}

.mr-char-count {
    color: var(--text-muted);
    font-weight: 400;
}

/* ---------- COVER: TEMPLATE PREVIEW (small, QB-style) ---------- */
.mr-template-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mr-template-thumb {
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    width: 68px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    flex-shrink: 0;
    padding: 8px;
    box-sizing: border-box;
}

.mr-template-page {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.mr-template-line {
    height: 3px;
    border-radius: 999px;
    background: var(--border-strong);
    width: 100%;
}

.mr-template-line-lg {
    height: 5px;
    width: 70%;
}

.mr-template-line-sm {
    width: 45%;
}

.mr-template-dd {
    width: 130px;
}

.mr-template-input {
    width: 130px !important;
    box-sizing: border-box;
}

/* ---------- COVER: LOGO ROW ---------- */
.mr-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}

.mr-logo-box {
    position: relative;
    width: 92px;
    height: 68px;
    min-height: 68px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

    .mr-logo-box .upload-icon {
        pointer-events: none;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
    }

/* the real file input covers the box so a click opens the PC file picker */
.mr-logo-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.mr-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.mr-logo-hint {
    font-size: 13px;
    color: var(--text-muted);
}

.mr-logo-remove {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---------- TABLE OF CONTENTS PREVIEW ---------- */
.mr-toc-preview {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 22px;
    background: var(--bg-card);
}

.mr-toc-preview-title {
    margin: 0 0 14px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.mr-toc-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.mr-toc-dots {
    color: var(--text-muted);
}

.mr-toc-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 0;
}

/* ---------- TEXTAREAS (tall) ---------- */
.mr-textarea {
    min-height: 260px;
    width: 100%;
    box-sizing: border-box;
}

.mr-add-page-btn {
    flex: none;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* ---------- SECTION HEADER (title left, action right) ---------- */
.mr-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

/* ---------- REPORTS AND CHARTS ROWS ---------- */
.mr-report-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.mr-report-drag {
    display: grid;
    grid-template-columns: repeat(2, 3px);
    gap: 3px;
    cursor: grab;
    flex-shrink: 0;
}

.mr-report-info {
    flex: 1;
}

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

.mr-report-period {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* inline edit mode for a report row */
.mr-report-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mr-report-name-input {
    flex: 1;
    min-width: 180px;
    margin: 0;
}

.mr-report-period-dd {
    width: 140px;
    flex-shrink: 0;
}

.mr-report-period-input {
    width: 140px !important;
    box-sizing: border-box;
}

.mr-save-row-btn {
    color: #16a34a;
}

.mr-reorder-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mr-delete-btn {
    color: var(--danger-color, #ef4444);
}

/* ---------- END NOTES CHECKBOX ---------- */
.mr-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ---------- FOOTER ACTION BAR ---------- */
.mr-footer {
    align-items: center;
}

.mr-cancel {
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

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

.mr-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mr-btn-save-close {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: var(--primarytext-color, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Order Info */
.order-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 24px 16px;
    background: var(--bg-card-soft);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.order-info-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.order-info-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    height: 40px;
    box-sizing: border-box;
}

    .order-info-field input:focus {
        border-color: var(--border-strong);
        background: var(--bg-card);
        outline: none;
    }

/* Add Item */
.order-actions-bar {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.btn-add-item {
    width: 100%;
    padding: 10px 16px;
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s;
}

    .btn-add-item:hover {
        border-color: var(--primary);
        background: var(--bg-hover);
        color: var(--text-primary);
    }

/* Items */
.order-items-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 200px;
    max-height: 400px;
}

/* Empty */
.empty-items-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

    .empty-items-state p {
        margin: 12px 0 4px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .empty-items-state span {
        font-size: 12px;
        color: var(--text-muted);
    }

/* Table */
.order-items-table {
    width: 100%;
    border-collapse: collapse;
}

    .order-items-table thead {
        position: sticky;
        top: 0;
        background: var(--bg-card-soft);
        z-index: 2;
    }

    .order-items-table th {
        padding: 10px 16px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .5px;
        border-bottom: 1px solid var(--border-color);
    }

    .order-items-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
        color: var(--text-primary);
    }

    .order-items-table tbody tr {
        background: var(--bg-card);
    }

        .order-items-table tbody tr:hover {
            background: var(--bg-hover);
        }

    /* Dropdown */
    .order-items-table .custom44-dropdown {
        position: relative;
    }

    .order-items-table .dropdown44-input {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 13px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 36px;
    }

    .order-items-table .dropdown44-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
        z-index: 10;
        max-height: 200px;
        overflow-y: auto;
        margin-top: 4px;
    }

    .order-items-table .dropdown44-item {
        padding: 8px 12px;
        font-size: 13px;
        color: var(--text-primary);
        cursor: pointer;
    }

        .order-items-table .dropdown44-item:hover {
            background: var(--bg-hover);
        }
.cf-method-dd {
    width: 140px;
}

    .cf-method-dd .dropdown44-input {
        width: 140px !important;
        box-sizing: border-box;
    }
/* Table Inputs */
.table-input {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    height: 36px;
    box-sizing: border-box;
}

.table-input-wrap {
    position: relative; /* CRITICAL FIX */
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    padding: 0 10px;
    height: 36px;
    box-sizing: border-box;
}

    /* CRITICAL FIX FOR PRICE ICON OVERLAP */
    .table-input-wrap .left-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        margin: 0 !important;
        z-index: 10;
        pointer-events: none;
    }

    .table-input-wrap .table-input {
        border: none;
        padding: 0 0 0 18px !important; 
        height: auto;
        flex: 1;
        min-width: 0;
        background: transparent;
    }

        .table-input-wrap .table-input:focus {
            outline: none;
        }

/* Item Total Cell */
.item-total-cell {
    font-size: 14px;
    font-weight: 600;
    color: #17233a;
    padding: 8px 0;
}

/* Item Thumbnail */
.item-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 4px;
}

/* Remove Button */
.btn-remove-item {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .btn-remove-item:hover {
        background: #fee2e2;
        color: #dc2626;
    }

.order-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}

.order-total-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
}

.order-total-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-total-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.order-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

    .order-submit-btn:hover {
        opacity: 0.9;
        background: var(--primary-hover);
    }
/* 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);
    }

.pendingreq-loading,
.pendingreq-empty {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 18px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.pendingreq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pendingreq-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px 10px 16px;
    box-shadow: var(--shadow-sm);
}

.pendingreq-card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pendingreq-user-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.pendingreq-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.pendingreq-user-name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.pendingreq-user-meta {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 15px;
}

.pendingreq-role-wrapper {
    margin-top: 10px;
    width: 238px;
}

/* Divider */
.pendingreq-role-divider {
    width: calc(100% + 210px);
    height: 1px;
    background: var(--border-color);
    margin-bottom: 10px;
}

.pendingreq-role-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.pendingreq-role-select {
    width: 100%;
    height: 20px;
    border: none;
    background: var(--bg-input);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 10px;
    color: var(--text-primary);
    outline: none;
    appearance: none;
}

.pendingreq-action-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
    padding-top: 33px;
}

.pendingreq-approve-btn {
    margin-top: 26px;
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    height: 26px;
    min-width: 128px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    transition: background 0.2s ease;
}

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

.pendingreq-top-status {
    position: absolute;
    right: 14px;
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pendingreq-status-badge {
    background: #ffe600;
    color: #000;
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.4;
}

.pendingreq-org-badge {
    background: var(--primary);
    color: var(--text-inverse);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.4;
}


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

.help-btn {
    border: none;
    background: var(--button-bg);
    color: white;
    padding: 4px 7px;
    border-radius: 8px;
}

/* 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;
    align-items: center; /* This forces everything to the vertical middle */
    width: 100%;
}

.staff-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.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;
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .status {
        width: 52px;
        height: 15px;
        font-size: 9px;
        border-radius: 10px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .status {
        width: 46px;
        height: 14px;
        font-size: 8px;
        border-radius: 9px;
        padding: 0 4px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .status {
        width: 42px;
        height: 13px;
        font-size: 7px;
        border-radius: 8px;
        padding: 0 3px;
    }
}
.staff-avatar {
    width: 40px !important; /* Reduced from 64px */
    height: 40px !important;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--primarytext-color);
    display: flex;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.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-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--staff-name-color);
}

.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);
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .staff-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }

    .staff-email {
        margin-left: 0;
    }

    .staff-phone {
        margin-left: auto;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .staff-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .staff-email,
    .staff-phone {
        margin-left: 0;
        width: 100%;
        font-size: 11px;
    }

    .staff-phone {
        justify-content: flex-start;
    }

    .staff-email svg {
        width: 13px;
        height: 13px;
    }

    .staff-phone svg {
        width: 16px;
        height: 16px;
    }
}
@media (max-width: 768px) {

    .staff-menu-wrapper {
        align-self: flex-start;
    }

    .staff-menu {
        padding: 2px 4px;
        font-size: 16px;
        line-height: 1;
    }
}
/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .staff-email,
    .staff-phone {
        font-size: 10px;
        gap: 5px;
    }

        .staff-email svg,
        .staff-phone svg {
            width: 14px;
            height: 14px;
        }
}
@media (max-width: 576px) {

    .staff-menu-wrapper {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
    }

    .staff-menu {
        padding: 4px;
        font-size: 18px;
    }

    .staff-card-new {
        position: relative;
    }
}
@media (max-width: 400px) {

    .staff-menu-wrapper {
        top: 10px;
        right: 10px;
    }

    .staff-menu {
        font-size: 16px;
    }
}

/* 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: 16px;
    color: #6b7280;
    font-size: 12px;
}

.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);
    }
.popup-delete {
    position: relative;
    padding: 20px;
}

.popup-delete-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
    transition: .2s;
}

    .popup-delete-close:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

.popup-delete-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #FEF2F2;
    color: #DC2626;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-delete-title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.popup-delete-text {
    margin: 0 0 20px;
    text-align: center;
    line-height: 1.5;
    color: var(--text-secondary);
}
.salary-chip {
    padding: 2px 10px;
    border-radius: 999px;
    height:20px;
    justify-content:center;
    align-items:center;
    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: 2px 16px;
    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: 22px;
    height: 22px;
    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;
}


.drop44 {
    display: flex;
    width: 100%;
    padding: 8px 8px 8px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    box-sizing: border-box;
    background: var(--bg-input);
    justify-content: space-between;
    background-size: 22px;
    height: 38px;
    font-size: 12px;
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .stat-content {
        flex-wrap: wrap;
        gap: 12px;
    }

    .more-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .three-inputs-group {
        grid-template-columns: repeat(2, 1fr);
    }

    .more-filter-buttons {
        flex-wrap: wrap;
    }

    .more-filters-btn,
    .reset-btn {
        width: auto;
        min-width: 150px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .stat-content {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .more-filters-grid {
        grid-template-columns: 1fr;
    }

    .amount-range-group,
    .three-inputs-group {
        grid-template-columns: 1fr;
    }

    .more-filter-buttons {
        flex-direction: column;
        width: 100%;
    }

    .more-filters-btn,
    .reset-btn {
        width: 100%;
        margin-left: 0;
    }

    .drop44 {
        font-size: 14px;
        height: 40px;
    }

    .more-filters-grid input {
        font-size: 14px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .drop44 {
        font-size: 13px;
        padding: 8px;
    }

    .more-filters-btn,
    .reset-btn {
        height: 42px;
    }
}
.reset-btn {
    white-space: nowrap;
    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;
}

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

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

.custom44-dropdown {
    position: relative;
    width: 100%;
}
.dropdown44-input {
    border: 1px solid var(--border-fields) !important;
    background-color: var(--bg-fields) !important;
    color: var(--bg-texts) !important;
    border-radius: 10px !important;
    padding: 12px 8px;
    height: 34px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px !important;
}

.dropdown44-arrow {
    font-size: 12px;
    color: var(--text-primary);
}

.dropdown44-menu {
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    border-radius: 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1000;
    font-size: 13px;
}

.dropdown44-group {
    padding: 2px 0;
}

.group44-title {
    font-weight: 400;
    padding: 4px 12px;
    background: var(--bg-card-soft);
    color: var(--text-secondary);
}

.dropdown44-item {
    padding: 4px 12px;
    cursor: pointer;
    color: var(--text-primary);

}

    .dropdown44-item:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

.dropdown44-search {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 6px 8px;
 
}

    .dropdown44-search input {
        width: 100%;
        height: 32px; /* Smaller height */
        padding: 4px 10px;
        box-sizing: border-box;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        font-size: 13px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid var(--border-color);
        background: var(--bg-input);
        color: var(--text-primary);
    }


        .dropdown44-search input:focus {
            outline: none;
            box-shadow: none;
            border-color: var(--border-color);
        }
.org-filter-dropdown {
    width: 200px;
    max-width: 100%;
}

    .org-filter-dropdown .custom44-dropdown,
    .org-filter-dropdown .dropdown44-input,
    .org-filter-dropdown .dropdown44-menu {
        width: 100%;
        box-sizing: border-box;
    }

/* ==========================
   Tablets (768px and below)
   ========================== */
@media (max-width: 768px) {

    .org-filter-dropdown {
        width: 100%;
        max-width: 100%;
    }

    .dropdown44-input {
        height: 38px;
        font-size: 14px;
    }

    .dropdown44-menu {
        width: 100%;
        max-height: 220px;
        font-size: 14px;
    }

    .dropdown44-item,
    .group44-title {
        padding: 8px 12px;
    }

    .dropdown44-search input {
        height: 36px;
        font-size: 14px;
    }
}

/* ==========================
   Mobile (480px and below)
   ========================== */
@media (max-width: 480px) {

    .org-filter-dropdown {
        width: 100%;
    }

    .dropdown44-input {
        height: 42px;
        font-size: 15px;
        padding: 0 12px;
    }

    .dropdown44-menu {
        width: 100%;
        max-height: 180px;
        left: 0;
        right: 0;
    }

    .dropdown44-item,
    .group44-title {
        padding: 10px 12px;
    }

    .dropdown44-search {
        padding: 8px;
    }

        .dropdown44-search input {
            height: 40px;
            font-size: 15px;
        }
}

.form-row.two-col .custom44-dropdown {
    width: 100%;
}

.form-row.two-col .dropdown44-input {
    width: 100%;
    box-sizing: border-box;
}

.form-row.two-col .dropdown44-menu {
    width: 100%;
    box-sizing: border-box;
}
/* Journal Card Header */
.journal-card-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
}

.journal-left-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

/* Avatar Wrapper with margin */
.journal-avatar-wrapper {
    margin-left: 4px; /* Adds margin to the left of avatar */
    flex-shrink: 0;
}

.journal-avatar {
    width: 36px;
    height: 36px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #374151;
}

.journal-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.journal-reference {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    font-size: 14px;
}

.journal-memo {
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-size: 14px;
}

/* Status Pill - Fixed alignment */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    height: 24px;
    line-height: 1;
    letter-spacing: 0.3px;
}

    /* Status colors */
    .status-pill.manual {
        background: #e8f0fe;
        color: #1a73e8;
    }

    .status-pill.auto {
        background: #e6f4ea;
        color: #1e7e34;
    }

    .status-pill.system {
        background: #fef7e0;
        color: #e37400;
    }

    .status-pill.paid {
        background: #e6f4ea;
        color: #1e7e34;
    }

    .status-pill.unpaid {
        background: #fce8e6;
        color: #d93025;
    }

    .status-pill.draft {
        background: #f3f4f6;
        color: #6b7280;
    }

    .status-pill.pending {
        background: #fef7e0;
        color: #e37400;
    }

/* Action Buttons */
.journal-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 12px;
}

.journal-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

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

    .journal-icon-btn:active {
        transform: scale(0.95);
    }

    .journal-icon-btn:first-child:hover {
        background: #e8f0fe;
        color: #1a73e8;
    }

    .journal-icon-btn:last-child:hover {
        background: #fce8e6;
        color: #d93025;
    }

/* Responsive */
@media (max-width: 768px) {
    .journal-info {
        gap: 6px;
    }

    .journal-memo {
        max-width: 120px;
        font-size: 13px;
    }

    .journal-reference {
        font-size: 13px;
    }

    .journal-avatar {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .journal-avatar-wrapper {
        margin-left: 2px;
    }

    .status-pill {
        font-size: 10px;
        padding: 1px 10px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .journal-left-content {
        gap: 8px;
    }

    .journal-memo {
        display: none;
    }

    .journal-reference {
        font-size: 12px;
    }
}

/* ===== MODAL ===== */
/* ===== MODAL ===== */
.mga-modal-overlay {
    position: fixed;
    inset: 0;
    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(--bg-card);
    color: var(--text-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 480px;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--border-color);
}

.mga-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

    .mga-modal-header h3 {
        margin: 0 0 6px;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
    }

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

.mga-modal-icon-bg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mga-modal-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    text-align: left;
}

    .mga-modal-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        padding: 14px 16px;
        border-radius: 8px;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.15);
        color: var(--text-primary);
        font-size: 13px;
        line-height: 1.5;
    }

        .mga-modal-list li:last-child {
            margin-bottom: 0;
        }

        .mga-modal-list li::before {
            content: "⚠";
            color: #ef4444;
            font-size: 16px;
            flex-shrink: 0;
        }

.mga-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    align-items: center;
}

.mga-btn-danger-full {
    width: 100%;
    height: 40px;
    max-width: 100%;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primarytext-color);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
}

    .mga-btn-danger-full:hover {
        background: var(--primary-hover);
    }

.mga-btn-text {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

    .mga-btn-text:hover {
        color: var(--text-primary);
    }
/* ===== DROPDOWNS (APPDROPDOWN COMPONENT) ===== */
.cd-dropdown {
    position: relative;
    width: 100%;
}

    .cd-dropdown:has(.cd-list) {
        z-index: 999 !important;
    }


.cd-selected {
    background-color: var(--bg-input);
    color: var(--mga-text-primary);
    border: 1px solid var(--border-color);
    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(--bg-page);
    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;
    font-size:13px;
}

.cd-item {
    padding: 4px 14px;
    color: var(--mga-text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .cd-item:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
    .cd-item.active {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .cd-item.disabled {
        color: var(--text-muted);
        cursor: default;
        pointer-events: none;
    }

.cd-selected:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
    border-color: var(--primary);
}
.ds-item.active {
    background: var(--bg-hover, #f3f4f6);
    border-left: 3px solid var(--primary, #d97706);
}
.ds-apply-btn:focus-visible,
.ds-reset-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
}

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

.date-input-wrapper {
    position: relative;
}

.custom-date {
    width: 100%;
    padding-right: 40px;
}

    /* Hide default calendar icon */
    .custom-date::-webkit-calendar-picker-indicator {
        opacity: 0;
        cursor: pointer;
    }

    /* Firefox */
    .custom-date::-moz-calendar-picker-indicator {
        opacity: 0;
    }

.calendar-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}


/* ===== NATIVE SELECT & DATE INPUTS ===== */
.mga-field-full select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !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;
}

    .mga-field-full select:focus {
        border-color: var(--border-strong) !important;
        outline: none;
    }

.mga-field-full input[type="date"] {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

    .mga-field-full input[type="date"]:focus {
        border-color: var(--border-strong) !important;
        outline: none;
    }

/* ===== 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: visible !important;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.cd-list {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Fix for main content wrapper */
.main-content,
.content-wrapper,
.app-content,
.page-content,
.app-shell {
    overflow-x: hidden !important;
    max-width: 100vw !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: var(--bg-page) !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: 4px 14px !important;
    color: #0f172a !important;
    cursor: pointer !important;
}

    .cd-item:hover {
        background-color: #f1f5f9 !important;
    }

/* Dark mode */
[data-theme="dark"] .cd-list {
    background-color: var(--bg-page) !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;
}
/* Secondary/Cancel Button */
.mga-btn-secondary {
    background: #ffffff !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

    .mga-btn-secondary:hover {
        background: #f9fafb !important;
        border-color: #d1d5db !important;
        color: #111827 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }

    .mga-btn-secondary:active {
        transform: translateY(0) !important;
        box-shadow: none !important;
    }

/* Dark mode for secondary button */
[data-theme="dark"] .mga-btn-secondary {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

    [data-theme="dark"] .mga-btn-secondary:hover {
        background: #334155 !important;
        border-color: #475569 !important;
        color: #ffffff !important;
    }


.mga-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mga-avatar-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    z-index: 1;
}

.mga-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.25);
}

.mga-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: rgba(255,255,255,.15);
    color: var(--primarytext-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 2px solid rgba(255,255,255,.25);
}

.mga-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: var(--shadow-sm);
    padding: 0;
    line-height: 0;
}


    .mga-avatar-edit-btn:hover {
        background: var(--bg-hover);
        transform: scale(1.08);
    }

    .mga-avatar-edit-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
    }

.mga-user-info h2 {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primarytext-color);
}

.mga-user-info p {
    margin: 0;
    font-size: 14px;
    color: var(--primarytext-color);
}

.mga-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    color: var(--primarytext-color);
    font-size: 12px;
    font-weight: 600;
}

    .mga-verified-badge svg {
        stroke: #4ade80;
    }

/* Progress */

.mga-banner-right {
    min-width: 200px;
    color: var(--primarytext-color);
}

.mga-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--primarytext-color);
    font-size: 12px;
}

    .mga-progress-header span:last-child {
        font-weight: 700;
    }

.mga-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,.2);
    border-radius: 999px;
    overflow: hidden;
}

.mga-progress-fill {
    height: 100%;
    background: var(--primarytext-fore);
    border-radius: 999px;
    transition: width .3s ease;
}

/* Keep images unchanged in dark mode */

img:not(.theme-filter) {
    filter: none;
}

/* Buttons inside footer */

.mga-card .mga-footer button {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mga-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
}

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

/* Outer Card */
.modal-card {
    background: white !important;
    width: 560px !important;
    max-width: 95% !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    position: relative !important;
    font-family: 'Inter', sans-serif !important;
    padding: 24px 28px 20px 28px !important;
}

/* Header */
.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.modal-title {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
}

.modal-close-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #666 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .modal-close-btn:hover {
        color: #1a1a1a !important;
    }

/* Inner Box - WHITE with SHADOW */
.details-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-bottom: 12px !important; /* REDUCED from 20px */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.box-header {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
}
/* Stats Grid */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px 24px !important;
}

/* ==========================
   Tablets (768px and below)
   ========================== */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ==========================
   Mobile (576px and below)
   ========================== */
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ==========================
   Small Phones (400px and below)
   ========================== */
@media (max-width: 400px) {
    .stats-grid {
        gap: 10px !important;
    }
}
.stat-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.stat-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
}

.stat-value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* Description */
.description-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f3f4f6 !important;
}

.description-text {
    font-size: 13px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin-top: 6px !important;
}

/* Footer - TIGHTER */
.modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    padding-top: 0 !important; /* REMOVED padding */
    padding-bottom: 4px !important; /* Keep bottom tight */
}
.back-to-list-btn {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

    .back-to-list-btn:hover {
        background: #f3f4f6 !important;
        border-color: #9ca3af !important;
    }

/* 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;
    align-items: center;
    gap: 12px;
}

    .modal-actions .btn-ne.half-width,
    .modal-actions .btn-danger.half-width {
        flex: 1;
        width: auto !important;
        min-width: 0;
        height: 42px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    /* Cancel — outlined secondary */
    .modal-actions .btn-ne.half-width {
        background: #fff;
        color: #17233a;
        border: 1px solid #cbd5e1;
    }

        .modal-actions .btn-ne.half-width:hover {
            background: #f8fafc;
        }

    /* Delete — solid danger */
    .modal-actions .btn-danger.half-width {
        background: #ef4444;
        color: #fff;
        border: 1px solid transparent;
    }

        .modal-actions .btn-danger.half-width:hover {
            background: #dc2626;
        }

/* 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);
    }
.radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
}

.theme-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

    .theme-radio input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        border: 2px solid #333;
        border-radius: 50%;
        margin: 0;
        padding: 0;
        cursor: pointer;
        position: relative; /* anchor point for the absolutely-positioned dot */
        flex-shrink: 0;
        box-sizing: border-box;
        background-color: #fff;
    }

        .theme-radio input[type="radio"]:checked {
            border-color: #000;
            background-color: #fff;
        }

            .theme-radio input[type="radio"]:checked::after {
                content: "";
                position: absolute; /* removes it from flow — no layout shift */
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #000;
            }

    .theme-radio span {
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }
/* ==========================================================================
   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: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   TOOLBAR
   ========================================================================== */

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

.coa-search-icon2 {
    position: absolute;
    left: 12px;
    pointer-events: none;
    filter: var(--summary-icon-filter);
}

.coa-search-box2 {
    width: 240px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .coa-search-box2::placeholder {
        color: var(--text-muted);
    }

    .coa-search-box2:focus {
        border-color: var(--primary);
        box-shadow: var(--edit-input-focus-shadow);
    }

.coa-export-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: 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);
    }
/* ==========================================================================
   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: var(--primary);
    }


.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: var(--button-bg);
    /*color: var(--button-hover-bg);*/ /* ✅ */
    color: #ffffff; 
    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 {
        background: var(--primary);
        color: var(--primarytext-color);
    }
/* 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: var(--primary);
        color: var(--primarytext-color);
        border-color: var(--primary);
    }

        .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 {
    border-radius: 4px;
    border: none;
    background: #1ec71e;
    color: var(--text-inverse);
    cursor: pointer;
    width: 150px;
}


.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: var(--button-bg);
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
/* ==========================================
   Tablet (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .staff-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .staff-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Keeps everything on the right */
        gap: 8px;
    }

        .staff-right .amount {
            margin-bottom: 4px;
        }

    .view-btn-up,
    .pay-btn-up {
        width: 100px;
    }
}
/*Bnk account view*/
/*....................*/
.account-pill {
    font-size: 0.7rem;
    padding: 0px 12px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}

.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: var(--primary);
        color: var(--primarytext-color);
        border-color: var(--primary);
    }
        /* 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;
    margin-top:4px;
    color: var(--text-primary);
}

.transaction-date {
    font-size: 12px;
    color: #7a7a7a;
    margin-bottom: 6px;
}

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


/* Main Container */
.split-table-wrapper {
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

/* Table Styles */
.split-custom-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 13px;
}

/* Header Styles */
.split-table-header {
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

    .split-table-header th {
        padding: 6px 10px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--table-header-text);
        letter-spacing: 0.3px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-color);
    }

/* Column Widths */
.split-col-type {
    width: 12%;
    min-width: 90px;
}

.split-col-category {
    width: 35%;
    min-width: 180px;
}

.split-col-desc {
    width: 25%;
    min-width: 130px;
}

.split-col-amount {
    width: 12%;
    min-width: 80px;
}

.split-col-attach {
    width: 10%;
    min-width: 60px;
}

.split-col-delete {
    width: 6%;
    min-width: 40px;
}

/* Table Rows */
.split-table-row td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    height: 32px;
    background: var(--table-row-bg);
    color: var(--table-row-text);
}

.split-table-row:last-child td {
    border-bottom: none;
}

/* Form Elements */
.split-select {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
    height: 26px;
    transition: all .2s;
}

    .split-select:hover {
        border-color: var(--border-strong);
    }

    .split-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

    .split-select option {
        padding: 2px 4px;
        font-size: 12px;
        background: var(--bg-card);
        color: var(--text-primary);
    }

.split-input {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    border-radius: 3px;
    height: 26px;
    transition: all .2s;
}

    .split-input:hover {
        border-color: var(--border-strong);
    }

    .split-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

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

.split-amount-input {
    text-align: right;
    font-weight: 500;
    width: 80px;
    min-width: 60px;
}

/* Category Group */
.split-category-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.split-flex-1 {
    flex: 1;
}

/* Add Button */
.split-btn-add-small {
    padding: 2px 8px;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
    line-height: 1.4;
    min-width: 22px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .split-btn-add-small:hover {
        background: var(--primary-hover);
    }

/* Delete Button */
.split-btn-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all .2s;
}

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

.split-delete-cell {
    text-align: center;
    width: 40px;
}


/* Upload Label */
.split-file-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.2s;
    background: transparent;
    height: 24px;
    font-size: 12px;
}
.native-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

    .split-file-label:hover {
        background: var(--bg-hover);
    }

    .split-file-label input[type="file"] {
        display: none;
    }

.split-file-icon {
    font-size: 16px;
    color: var(--text-muted);
}

.split-attach-text {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 550;
    letter-spacing: 0.2px;
}

/* Attachment Link */
.split-attachment-link {
    color: var(--primary);
    cursor: pointer;
    font-size: 11px;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 2px;
    background: var(--pill-bg);
    display: inline-block;
    min-width: 20px;
    text-align: center;
}

    .split-attachment-link:hover {
        background: var(--bg-hover);
    }

/* Add Row Button */
.split-add-row-wrapper {
    padding: 6px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card-soft);
}

.split-btn-add-line {
    padding: 4px 16px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    height: 28px;
}

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

/* Scrollbar */
.split-table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.split-table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-card-soft);
    border-radius: 3px;
}

.split-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}

    .split-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }

/* Responsive */
@media (max-width: 768px) {
    .split-category-group {
        flex-direction: column;
        gap: 2px;
    }

    .split-table-header th {
        font-size: 10px;
        padding: 4px 6px;
    }

    .split-table-row td {
        padding: 3px 4px;
        height: 28px;
    }

    .split-amount-input {
        width: 60px;
        min-width: 50px;
    }
}

/* Main Container */
.split-table-container {
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Table */
.split-custom-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 13px;
}

/* Header */
.split-table-header {
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
}

    .split-table-header th {
        padding: 8px 12px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--table-header-text);
        letter-spacing: .3px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-color);
    }

/* Column Widths */
.split-col-type {
    width: 140px;
    min-width: 140px;
}

.split-col-category {
    width: 260px;
    min-width: 260px;
}

.split-col-memo {
    width: 220px;
    min-width: 220px;
}

.split-col-amount {
    width: 120px;
    min-width: 120px;
}

.split-col-delete {
    width: 50px;
    min-width: 50px;
}

/* Rows */
.split-custom-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    background: var(--table-row-bg);
    color: var(--table-row-text);
}

.split-custom-table tr:last-child td {
    border-bottom: none;
}
/* Form Elements */
.split-select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
    height: 28px;
    transition: all 0.2s ease;
}

    .split-select:hover {
        border-color: var(--border-strong);
    }

    .split-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

    .split-select option {
        padding: 2px 4px;
        font-size: 12px;
        background: var(--bg-card);
        color: var(--text-primary);
    }

.split-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    border-radius: 3px;
    height: 28px;
    transition: all 0.2s ease;
}

    .split-input:hover {
        border-color: var(--border-strong);
    }

    .split-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

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

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

/* Category Group */
.split-category-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.split-flex-1 {
    flex: 1;
}

/* Add Small Button */
.split-btn-add-small {
    padding: 2px 10px;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1.4;
    min-width: 24px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .split-btn-add-small:hover {
        background: var(--primary-hover);
    }

/* Delete Button */
.split-btn-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

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

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

/* Bottom Action Buttons */
.split-add-row-wrapper {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card-soft);
    display: flex;
    gap: 8px;
    align-items: center;
}

.split-btn-add-new {
    padding: 5px 16px;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
}

    .split-btn-add-new:hover {
        background: var(--bg-hover);
        border-color: var(--primary);
    }

.split-btn-clear {
    padding: 5px 16px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 30px;
}

    .split-btn-clear:hover {
        background: var(--danger-hover-bg);
        color: var(--danger-color);
    }

/* Responsive */
@media (max-width: 768px) {
    .split-col-type {
        min-width: 100px;
    }

    .split-col-category {
        min-width: 180px;
    }

    .split-col-memo {
        min-width: 150px;
    }

    .split-col-amount {
        min-width: 80px;
    }

    .split-category-group {
        flex-direction: column;
        gap: 2px;
    }
}
/* Overlay */
.bank-account-popup-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    z-index: 1000;
}

/* Popup */
.bank-account-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    padding: 20px 28px;
    background: var(--popup-panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--popup-panel-shadow);
    z-index: 1001;
}

/* Header */
.bank-account-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.bank-account-popup-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bank-account-popup-close {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--close-btn-color);
    transition: color .2s ease;
}

    .bank-account-popup-close:hover {
        color: var(--text-primary);
    }

/* Labels */
.bank-account-popup-label {
    display: block;
    margin-bottom: 4px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Inputs */
.bank-account-popup-input {
    margin-bottom: 10px;
    height: 32px;
}

.bank-account-popup-input-last {
    margin-bottom: 14px;
    height: 32px;
}

/* Error */
.bank-account-popup-error {
    margin-bottom: 10px;
}

/* Save Button */
.bank-account-popup-btn {
    width: 100%;
}
.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;
}
.file-upload-wrapper {
    display: block;
    width: 100%;
    padding: 8px 12px;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: var(--bg-input);
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
}

.file-upload-text {
    color: #000000;
    font-weight:600;
    font-size: 14px;
}

::deep .file-upload-hidden-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Bulletproof hidden file input — clips it to nothing instead of relying on display:none */
.file-upload-hidden-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.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: var(--button-bg);
    color: #ffffff;
    border: 0;
    padding: 8px 22px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .contact-sales-btn:hover {
        background: var(--button-hover-bg);
    }
/* 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(--coa-row-bg);
    border-bottom: 1px solid var(--coa-row-border);
    color: var(--coa-row-text);
    box-shadow: var(--shadow-sm);
}

.child-row {
    background: var(--coa-row-hover-bg);
    border-bottom: 1px solid var(--coa-row-border);
    color: var(--coa-row-text);
}
/* 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: var(--text-secondary);
    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;
}
/* ==========================================
   Tablets (992px and below)
   ========================================== */
@media (max-width: 992px) {

    .coa-row {
        min-width: 1200px;
        font-size: 12px;
    }

    .coa-header {
        font-size: 11px;
    }
}

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

    .coa-row {
        min-width: 1100px;
        padding: 0 8px;
    }

    .badge {
        font-size: 10px;
        min-width: 50px;
    }

    .status-text,
    .balance-positive,
    .balance-negative,
    .balance-neutral {
        font-size: 11px;
    }

    .switch {
        width: 36px;
        height: 20px;
    }

    .slider::before {
        width: 16px;
        height: 16px;
    }

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

/* ==========================================
   Small Phones (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .coa-row {
        min-width: 1000px;
        min-height: 44px;
    }

    .coa-action-icon {
        width: 18px;
        height: 18px;
    }

    .badge {
        font-size: 9px;
    }
}

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

    @font-face {
        font-family: 'Megabyte';
        src: url('/fonts/MegabyteBold (2).otf') format('truetype');
        font-weight: 700;
        font-style: 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;
    font-weight: 600;
    color: var(--text-primary);
}

.org-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}
/* 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(--primary-table);
    color: var(--primarytext-color);
    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: 13px;
    font-weight: 550;
    margin-top:10px;
}

.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: 38px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.24);
    background: var(--bg-card);
    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(--primary-color);
    color: var(--primarytext-color);
    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;
    height: 100%;
    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(--button-bg);
    color: var(--recon-btn-text);
    border: none;
    padding: 10px 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

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

.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: var(--button-bg);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

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

.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: 18px;
    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: 0px 10px;
    cursor: pointer;
    background: transparent;
    height:28px;
}

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

/* container */
.org-access-children {
    padding: 8px 12px 12px 36px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* child row */
.org-access-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 13px;
}

    /* hover effect */
    .org-access-child:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
/* left side content */
.child-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* text */
.child-text {
    font-weight: 500;
    color: #111827;
}


/* ===== 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;
}
.org-details-section {
    margin-bottom: 22px;
}

.org-details-title {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

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

.org-detail-card {
    background: var(--bg-card-soft);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: .2s ease;
}

    .org-detail-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
    }

.org-detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-secondary);
}

.org-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}
/* 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;
    overflow-y: auto;
    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: var(--text-primary);
    margin-bottom: 6px;
}

.onboarding-main-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.onboarding-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar */
.onboarding-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 28px 24px;
    min-height: 658px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* Button */
.onboarding-edit-btn {
    width: 100%;
    background: var(--primary);
    color: var(--primarytext-color);
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

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

/* Steps */
.onboarding-step {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}
/* ================= CONSOLIDATED COVER DESIGNER GRID ================= */

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

.mr-designer-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

.mr-designer-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mr-designer-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

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

.mr-designer-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

.mr-input-help {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* ================= LOGO UPLOADER ================= */

.mr-logo-upload-wrapper {
    width: 100%;
}

.mr-upload-container {
    width: 100%;
}

.mr-hidden-file-input {
    display: none;
}

.mr-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--surface-soft);
    cursor: pointer;
    transition: all .2s ease;
}

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

    .mr-upload-dropzone svg {
        margin-bottom: 12px;
        color: var(--text-secondary);
    }

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

.mr-upload-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mr-logo-uploaded-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mr-logo-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

    .mr-logo-img-container img {
        max-width: 140px;
        max-height: 64px;
        object-fit: contain;
    }

.mr-logo-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}

    .mr-logo-remove-btn:hover {
        background: rgba(239, 68, 68, .08);
    }

/* ================= OPTIONS ================= */

.mr-options-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mr-option-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
}

    .mr-option-row:hover {
        background: var(--surface-soft);
        border-color: var(--primary);
    }

    .mr-option-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 3px;
        accent-color: var(--primary);
    }

.mr-option-info {
    display: flex;
    flex-direction: column;
}

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

.mr-option-help {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}
/* ================= SPLIT SCREEN REPORTS CONFIGURATION ================= */

.mr-reports-split-container {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 24px;
    align-items: start;
}

.mr-reports-sidebar {
    background: var(--surface-soft);
}

.mr-designer-right-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mr-global-options-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mr-radio-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 6px;
}

.mr-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

    .mr-radio-option input[type="radio"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--primary);
    }

.mr-field-label {
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.mr-locked-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ================= REORDERABLE REPORTS LIST ================= */

.mr-report-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.mr-report-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all .2s ease;
}

    .mr-report-row:hover {
        border-color: var(--primary);
    }

.mr-report-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mr-drag {
    display: flex;
    align-items: center;
    cursor: grab;
    color: var(--text-secondary);
    transition: color .15s ease;
}

    .mr-drag:hover {
        color: var(--text-primary);
    }

    .mr-drag:active {
        cursor: grabbing;
    }

.mr-report-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.mr-report-badge {
    align-self: flex-start;
    padding: 2px 8px;
    background: var(--surface-soft);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.mr-report-actions {
    display: flex;
    gap: 8px;
}

.mr-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s ease;
}

    .mr-btn-action:hover {
        background: var(--surface-soft);
        border-color: var(--primary);
        color: var(--text-primary);
    }

    .mr-btn-action.delete:hover {
        background: rgba(239, 68, 68, .08);
        border-color: #ef4444;
        color: #ef4444;
    }

.mr-empty-reports {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    background: var(--surface-soft);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

    .mr-empty-reports svg {
        margin-bottom: 12px;
        color: var(--text-secondary);
    }

    .mr-empty-reports span {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }
/* ================= STICKY PREVIEW ================= */

.mr-designer-right {
    position: relative;
}

.mr-preview-sticky-wrapper {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mr-preview-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .mr-preview-column-header h4 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--bg-texts);
        text-transform: uppercase;
        letter-spacing: .05em;
    }

.mr-live-badge {
    font-size: 10px;
    font-weight: 700;
    color: #16a34a;
    background: rgba(34,197,94,.12);
    padding: 2px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
}

/* ================= PAGE PREVIEW ================= */

.mr-preview-page-canvas {
    position: relative;
    width: 100%;
    max-width: 430px;
    min-height: 600px;
    background: var(--bg-card);
    border: 1px solid var(--border-fields);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.mr-preview-page-content {
    padding: 44px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 512px;
    position: relative;
}

/* ================= THEMES ================= */

.theme-Executive .mr-preview-executive-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    background: var(--button-bg);
}

.theme-Executive .mr-preview-page-content {
    padding-top: 54px;
}

.theme-Modern {
    text-align: center;
}

    .theme-Modern .mr-preview-logo-section,
    .theme-Modern .mr-preview-metadata-list {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

.theme-Minimal .mr-preview-page-content {
    justify-content: center;
    gap: 30px;
}

.theme-Minimal .mr-preview-logo-section {
    justify-content: center;
    margin-top: 20px;
}

.theme-Minimal .mr-preview-metadata-list {
    margin-top: auto;
}

/* ================= DOCUMENT ================= */

.mr-preview-logo-section {
    display: flex;
    margin-bottom: 24px;
}

.mr-preview-logo-rendered {
    max-width: 110px;
    max-height: 54px;
    object-fit: contain;
}

.mr-preview-logo-placeholder-box {
    width: 80px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-page);
    border: 1px dashed var(--border-fields);
    border-radius: 4px;
}

.mr-preview-text-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mr-preview-document-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--bg-texts);
    line-height: 1.25;
    word-break: break-word;
}

.mr-preview-document-subtitle {
    font-size: 13px;
    color: var(--secondarytext-color);
    word-break: break-word;
}

.mr-preview-document-desc {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--secondarytext-color);
    word-break: break-word;
}

.mr-preview-document-divider {
    height: 1px;
    margin: 24px 0;
    border: 0;
    background: var(--border-fields);
}

.mr-preview-metadata-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.mr-preview-meta-item {
    display: flex;
    flex-direction: column;
}

.mr-meta-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--secondarytext-color);
}

.mr-meta-value {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bg-texts);
}

/* ================= WATERMARK ================= */

.mr-preview-watermark {
    position: absolute;
    right: 30px;
    bottom: 30px;
    padding: 4px 10px;
    border: 2px solid #dc2626;
    border-radius: 4px;
    color: #dc2626;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    transform: rotate(-10deg);
    opacity: .85;
    user-select: none;
}

/* ================= PDF PREVIEW ================= */

.mr-preview-iframe {
    width: 100%;
    height: 650px;
    border: 1px solid var(--border-fields);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.mr-preview-loader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 80px 40px;
    color: var(--bg-texts);
}

.mr-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-fields);
    border-top-color: var(--button-bg);
    border-radius: 50%;
    animation: mr-spin .8s linear infinite;
}

.mr-preview-actions-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

@keyframes mr-spin {
    to {
        transform: rotate(360deg);
    }
}
/* ==========================================
   REPORT DESIGNER - DARK MODE
   ========================================== */

[data-theme="dark"] .mr-run-dialog,
[data-theme="dark"] .mr-report-picker,
[data-theme="dark"] .mr-editor-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

[data-theme="dark"] .mr-modal-header,
[data-theme="dark"] .mr-modal-footer {
    background: var(--bg-card);
    border-color: var(--border);
}

    [data-theme="dark"] .mr-modal-header h3,
    [data-theme="dark"] .mr-card-header h3,
    [data-theme="dark"] .mr-report-title,
    [data-theme="dark"] .mr-category-title {
        color: var(--text-primary);
    }

[data-theme="dark"] .mr-card-header p,
[data-theme="dark"] .mr-report-desc,
[data-theme="dark"] .mr-report-category h4,
[data-theme="dark"] .mr-form-group label {
    color: var(--text-secondary);
}

/* ================= TEMPLATE CARDS ================= */

[data-theme="dark"] .mr-template-preview {
    background: var(--bg-card-soft);
    border-color: var(--border);
}

[data-theme="dark"] .mr-template-card.selected .mr-template-preview {
    border-color: var(--primary-color);
}

[data-theme="dark"] .line,
[data-theme="dark"] .logo,
[data-theme="dark"] .title,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .small,
[data-theme="dark"] .divider,
[data-theme="dark"] .modern .circle {
    background: var(--border);
}

/* ================= REPORT PICKER ================= */

[data-theme="dark"] .mr-picker-card {
    background: var(--bg-card);
    border-color: var(--border);
}

    [data-theme="dark"] .mr-picker-card:hover {
        background: var(--bg-card-soft);
        border-color: var(--border-strong);
    }

    [data-theme="dark"] .mr-picker-card.selected {
        background: rgba(59,130,246,.12);
        border-color: var(--primary-color);
    }

    [data-theme="dark"] .mr-picker-card .mr-report-title {
        color: var(--text-primary);
    }

    [data-theme="dark"] .mr-picker-card .mr-report-desc {
        color: var(--text-secondary);
    }

/* ================= REPORT OPTIONS ================= */

[data-theme="dark"] .mr-report-option:hover {
    background: var(--bg-card-soft);
}

[data-theme="dark"] .mr-drag {
    color: var(--text-secondary);
}

[data-theme="dark"] .drag-over {
    background: rgba(59,130,246,.15);
    border-color: var(--primary-color);
}

/* ================= CATEGORY ACCENT ================= */

[data-theme="dark"] .mr-category-accent {
    background: var(--primary-color);
}

/* ================= INPUT LABELS ================= */

[data-theme="dark"] .mr-form-group label {
    color: var(--text-primary);
}

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

[data-theme="dark"] .mr-radio-group {
    color: var(--text-primary);
}

/* ================= MODAL BACKDROP ================= */

[data-theme="dark"] .mr-modal-backdrop {
    background: rgba(0,0,0,.65);
}
    .onboarding-step.active {
        color: var(--text-primary);
        font-weight: 700;
    }

    .onboarding-step.completed {
        color: var(--text-primary);
        font-weight: 600;
    }

/* Step Circle */
.onboarding-step-icon {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    background: var(--bg-card);
    transition: all .2s ease;
}

.onboarding-step.active .onboarding-step-icon {
    border-color: var(--primary);
    color: var(--primary);
}

.onboarding-step.completed .onboarding-step-icon {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Step Line */
.onboarding-step-line {
    width: 1.5px;
    height: 22px;
    background: var(--border-color);
    margin: 8px 0 8px 13px;
}

/* Right Content */
.onboarding-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Progress Card */
.onboarding-progress-card {
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Progress Bar */
.onboarding-progress-bar-wrap {
    flex: 1;
    height: 5px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    transition: width .3s ease;
}

.onboarding-progress-text {
    font-size: 12px;
    color: var(--text-primary);
    min-width: 36px;
    text-align: right;
}

/* Form Card */
.onboarding-form-card {
    background: var(--bg-card);
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    padding: 26px 24px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-top: none;
    min-height: 604px;
    display: flex;
    flex-direction: column;
}

/* Header */
.onboarding-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .onboarding-form-header h3 {
        font-size: 12px;
        font-weight: 800;
        color: var(--text-primary);
        margin: 0 0 2px;
    }

.onboarding-form-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    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 var(--border-fields);
    border-radius: 8px;
    background: var(--bg-fields);
    height: 35px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 5px;
    color: var(--bg-texts);
    margin-left: 4px;
    margin-right: 4px;
}

.revenue-modal-box .phone {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: var(--bg-input);
    height: 35px;
    width: 90%;
    overflow: hidden;
    margin-bottom: 5px;
    color: var(--role-pill-text);
    margin-left: 20px;
    margin-right: 10px;
}

.phone-drop {
    display: flex;
    align-items: center;
    padding: 0 8px;
    min-width: 110px;
    max-width: 140px;
    cursor: pointer;
    gap: 6px;
}

.phone-st {
    width:1px;
    height:28px;
    background:#e5e7eb;
}

phone-tel{
flex:1; 
border:none;
outline:none; 
background:transparent;
padding:0 12px; 
font-size:14px;
color:#374151; 
height:100%;
}

.phone-dro {
    position: absolute;
/*    top: 75px;*/
    left: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: var(--bg-page);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: var(--role-pill-text);
}

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

/* Back Button */
.onboarding-back-btn {
    min-width: 152px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

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

/* Module Card */
.payment-card.onboarding-module-card {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 0;
    overflow: hidden;
}

.onboarding-module-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onboarding-module-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .8;
}

.onboarding-module-content h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.onboarding-module-content p,
.onboarding-module-footer p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Selected Plan */
.selected-plan {
    border: 2px solid var(--primary);
}

.plan-description,
.plan-meta,
.plan-period {
    color: var(--text-secondary);
}

.plan-badge {
    background: #b6e3b7;
    color: #1f6f34;
}

/* Plan Cards */
.onboarding-plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 16px 16px 14px;
    min-height: 146px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .onboarding-plan-card.selected {
        border-color: var(--primary);
    }

.onboarding-plan-title-row h4 {
    color: var(--text-primary);
}

.onboarding-plan-description,
.onboarding-plan-meta,
.onboarding-plan-period {
    color: var(--text-secondary);
}

.onboarding-plan-price {
    color: var(--text-primary);
}

.onboarding-plan-badge {
    background: #b6e3b7;
    color: #1f6f34;
}

/* Completion */
.onboarding-complete-icon {
    background: #b9e3b9;
}

    .onboarding-complete-icon span {
        color: #0a9c1f;
    }

.onboarding-complete-text h3 {
    color: var(--text-primary);
}

.onboarding-complete-text p {
    color: var(--text-secondary);
}

/* Summary */
.onboarding-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}

.onboarding-summary-title {
    color: var(--text-primary);
}

.onboarding-summary-labels p {
    color: var(--text-secondary);
    font-weight: 700;
}

.onboarding-summary-values p {
    color: var(--text-primary);
    font-weight: 700;
}

/* Pills */
.onboarding-plan-pill {
    background: var(--primary);
    color: var(--primarytext-color);
}

.onboarding-module-tag {
    background: var(--surface-soft);
    color: var(--text-primary);
}

/* Submit Button */
.onboarding-submit-btn {
    width: 164px;
    height: 42px;
    border: none;
    border-radius: 6px;
    background: var(--button-bg, var(--primary));
    color: var(--primarytext-color);
    font-size: 12px;
    font-weight: 700;
    font-family: Inter, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s ease, transform .2s ease;
}

    .onboarding-submit-btn:hover {
        background: var(--button-hover-bg, var(--primary-hover));
    }

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


/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {

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

    .amount-range-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .amount-range-group > div {
            width: 100%;
        }

    .apply-new-btn,
    .reset-new-btn {
        width: 100%;
    }
}


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



.signup-background {
    width: 100%;
    min-height: 100vh;
    background: #f2f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.signup-card {
    width: 1150px;
    max-width: 95%;
    height: 750px;
    background: #ffffff;
    border-radius: 25px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

.signup-left {
    position: relative;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 60px 40px 60px 60px;
}

.left-bg-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .left-bg-shape img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.left-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 75%;
    margin-top: 40px;
}

    .left-content h1 {
        font-size: 52px;
        font-weight: 600;
        color: white;
        line-height: 1.2;
    }

.left-bottom-icon {
    position: absolute;
    bottom: 15%;
    right: 15%;
    width: 100px;
    z-index: 2;
}

.signup-right {
    overflow: hidden !important;
    width: 55%;
    height: 100%;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    padding: 40px 60px;
    overflow-y: auto;
}

    .signup-right .auth-wrapper {
        width: 100%;
        max-width: 450px;
    }

/* RESPONSIVE: Adjust BEFORE stacking */
@media (max-width: 1200px) {
    .signup-left {
        padding: 60px 30px 60px 50px;
    }

    .left-content h1 {
        font-size: 45px;
    }

    .left-content {
        max-width: 70%;
    }
}

/* RESPONSIVE: Stack on tablet */
@media (max-width: 992px) {
    .signup-card {
        flex-direction: column;
        height: auto;
        min-height: 750px;
    }

    .signup-left,
    .signup-right {
        width: 100%;
        height: auto;
    }

    .signup-left {
        min-height: 400px;
        padding: 40px 30px;
    }

    .left-bg-shape {
        width: 85%;
        height: 80%;
        left: 50%; /* Center it */
    }

    .left-content {
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

        .left-content h1 {
            font-size: 40px;
        }

    .left-bottom-icon {
        width: 80px;
        bottom: 20%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .signup-right {
        min-height: 400px;
        padding: 40px 30px;
    }
}

/* RESPONSIVE: Small mobile */
@media (max-width: 576px) {
    .signup-background {
        padding: 10px;
        align-items: flex-start;
    }

    .signup-card {
        border-radius: 18px;
        height: auto;
        min-height: auto;
    }

    .signup-left {
        min-height: 300px;
        padding: 30px 20px;
    }

    .left-bg-shape {
        width: 80%;
        height: 75%;
    }

    .left-content h1 {
        font-size: 32px;
    }

    .left-bottom-icon {
        width: 60px;
        bottom: 15%;
    }

    .signup-right {
        min-height: auto;
        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: var(--text-primary);
    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;
}
.quick-action-manage {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.quick-action-btn {
    min-width: 78px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .quick-action-btn:hover {
        background: var(--primary);
        color: var(--primarytext-color);
        border-color: var(--primary);
    }

    .quick-action-btn:active {
        transform: scale(0.98);
    }

    .quick-action-btn img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
        vertical-align: middle;
    }
/* Primary Button */
.auth-primary-btn {
    margin-top: 8px;
    width: 100%;
    height: 50px;
    border-radius: 40px;
    border: none;
    background: var(--primary);
    color: var(--primarytext-color);
    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 {
        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: 14px;
    font-weight:550;
}

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

.auth-heading22 {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.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: 6px 16px !important; 
    border-radius: 8px;
    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);
    }
}

.auth-container {
    display: flex;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    background: #f5f5f5;
}

.signup-text {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
}

.signup-link {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
}

    .signup-link:hover {
        text-decoration: underline;
    }

.auth-left {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 100px 60px 60px;
}

.auth-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 60px 60px;
}


.welcome-card1 {
    background: #FFF3D6;
    border-radius: 24px;
    padding: 60px;
    max-width: 560px;
    width: 100%;
    height: 100%;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

    .welcome-card1::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: linear-gradient(135deg, rgba(244, 166, 35, 0.2) 0%, transparent 100%);
        border-radius: 0 0 0 100%;
        z-index: 0;
    }

    .welcome-card1::after {
        content: '';
        position: absolute;
        bottom: -80px;
        right: -80px;
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, rgba(244, 166, 35, 0.15) 0%, rgba(244, 166, 35, 0.05) 100%);
        border-radius: 50%;
        z-index: 0;
    }

.welcome-logo1 {
    width: 320px;
    height: auto;
    margin-bottom: 60px;
    margin-left: -20px;
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.welcome-heading1 {
    font-size: 40px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
    font-family: 'Megabyte Bold', sans-serif;
    position: relative;
    z-index: 1;
}

.welcome-text1 {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
    text-align: left;
}

.welcome-subtext1 {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-align: left;
}

.auth-form-wrapper1 {
    max-width: 420px;
    width: 100%;
}

.auth-logo1 {
    margin-bottom: 48px;
}

    .auth-logo1 img {
        height: 90px;
        width: auto;
    }

.auth-headingver {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
    margin-top: 200px;
    font-family: 'Inter', sans-serif;
}

.auth-subtitle1 {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 32px;
}

.form-group1 {
    margin-bottom: 20px;
}

.form-label1 {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 8px;
}

.input-wrapper1 {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon1 {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.form-input1 {
    width: 100%;
    padding: 20px 20px 20px 44px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

    .form-input1:focus {
        border-color: #123B2A;
    }

@media (max-width: 768px) {

    /* Show only the logo from the welcome card */
    .welcome-heading-hun,
    .welcome-text-hun,
    .welcome-subtext-hun {
        display: none;
    }
    /* Remove yellow card styling */
    .welcome-card-hun {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    .welcome-card::before,
    .welcome-card::after {
        display: none;
    }
    /* Center and resize the logo */
    .welcome-logo-hun {
        display: block;
        width: 180px;
        height: auto;
        margin: 0 auto;
    }
}

.form-actions1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 16px;
}

.btn-google {
    width: 100%;
    padding: 14px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 24px;
}

.google-icon {
    width: 20px;
    height: 20px;
}

.btn-signin1 {
    width: 100%;
    padding: 14px 32px;
    background: linear-gradient(90deg, rgba(244, 166, 35, 0.97) 39%, rgba(244, 166, 35, 0.42) 100%);
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
}

    .btn-signin1:hover {
        opacity: 0.9;
    }

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

@media (max-width:768px) {
    /* Right section on top */
    .auth-container {
        flex-direction: column-reverse;
    }

    .auth-right,
    .auth-left {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .auth-right {
        padding: 20px 20px 0;
    }

    .auth-left {
        padding: 10px 20px 30px;
    }
    /* Hide left logo */
    .auth-logo1 {
        display: none;
    }
    /* Show only the logo from the right section */
    .welcome-heading1,
    .welcome-text1,
    .welcome-subtext1 {
        display: none;
    }
    /* Remove yellow card */
    .welcome-card1 {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

        .welcome-card1::before,
        .welcome-card1::after {
            display: none;
        }
    /* Center logo */
    .welcome-logo1 {
        width: 180px;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    /* Form */
    .auth-form-wrapper1 {
        width: 100%;
        max-width: 420px;
    }

    .auth-headingver {
        margin-top: 0;
        font-size: 24px;
    }

    .form-input1 {
        width: 100%;
    }

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

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

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

/* 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-bt-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;
}
/* ==========================================
   Tablets (768px and below)
   ========================================== */
@media (max-width: 768px) {

    .actionss-btn {
        width: 100%;
        max-width: 250px;
        font-size: 16px;
        gap: 12px;
        padding: 6px 16px;
    }

    .iconss-box {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
}

/* ==========================================
   Mobile (576px and below)
   ========================================== */
@media (max-width: 576px) {

    .actionss-btn {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 48px;
        font-size: 15px;
        padding: 10px 14px;
        gap: 10px;
    }

    .iconss-box {
        width: 26px;
        height: 26px;
        font-size: 18px;
    }
}

/* ==========================================
   Small Phones (400px and below)
   ========================================== */
@media (max-width: 400px) {

    .actionss-btn {
        font-size: 14px;
        padding: 10px 12px;
        gap: 8px;
    }

    .iconss-box {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
}
/* =======================================================
   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(--primary);
    color: var(--primarytext-color);
    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 {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 35px;   /* safe to add — icon still centers correctly */
}

    .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;
    }
.filter-dropdown {
    flex-shrink: 0;
    min-width: 160px;
}

    .filter-dropdown select {
        height: 35px;
        width: 100%;
        padding: 0 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: white;
        color: #000;
        font-size: 12px;
        box-sizing: border-box;
    }
/* =======================================================
   STATS SECTION
======================================================= */
.dash.stats-grid2 {
    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: 9px;
}

/* =======================================================
   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: var(--dash-action-bt-new);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    border: 1px solid #eae8e8; /* darker border color */
}
/* =======================================================
   TABLETS (992px and below)
======================================================= */
@media (max-width: 992px) {

    .dash.stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dash.actions-row {
        gap: 16px;
        flex-wrap: wrap;
    }

    .dash.quick-btn {
        min-width: 180px;
    }
}

/* =======================================================
   TABLETS & LARGE PHONES (768px and below)
======================================================= */
@media (max-width: 768px) {

    /* Stats */
    .dash.stats-grid {
        grid-template-columns: 1fr;
    }

    .dash.stat-card {
        padding: 14px;
    }

        .dash.stat-card h3 {
            font-size: 15px;
        }

        .dash.stat-card p {
            font-size: 12px;
        }

    .reset-btn {
        width: 100%;
        max-width: 220px;
    }

    /* Quick Actions */

    .dash.actions-row {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
    }

    .dash.quick-btn {
        width: 100%;
    }

    /* Donations */

    .dash.donation-row {
        padding: 12px;
    }

    .dash.amount {
        font-size: 13px;
    }
}

/* =======================================================
   MOBILE (576px and below)
======================================================= */
@media (max-width: 576px) {

    /* Stats */

    .dash.stat-card {
        padding: 12px;
    }

    .dash.stat-icon {
        width: 28px;
        height: 28px;
    }

    .dash.stat-card h3 {
        margin-top: 36px;
        font-size: 14px;
    }

    .dash.stat-change {
        font-size: 11px;
    }

    .reset-btn {
        width: 100%;
        max-width: none;
    }

    /* Quick Actions */

    .dash.quick-actions {
        padding: 14px;
    }

    .dash.actions-row {
        grid-template-columns: 1fr;
    }

    .dash.quick-btn {
        min-height: 70px;
        font-size: 13px;
    }

    /* Recent Donations */

    .dash.recent-donations {
        padding: 14px;
    }

    .dash.donation-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .dash.donation-left {
        width: 100%;
    }

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

    .dash.avatar {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .dash.amount {
        font-size: 14px;
    }

    .dash.status {
        width: auto;
        min-width: 70px;
        padding: 4px 10px;
        height: auto;
        font-size: 11px;
    }
}

/* =======================================================
   SMALL PHONES (400px and below)
======================================================= */
@media (max-width: 400px) {

    .dash.quick-actions,
    .dash.recent-donations,
    .dash.stat-card {
        padding: 10px;
    }

        .dash.stat-card h3 {
            font-size: 13px;
        }

        .dash.stat-card p,
        .dash.donation-info small {
            font-size: 10px;
        }

    .dash.donation-info strong {
        font-size: 11px;
    }

    .dash.amount {
        font-size: 13px;
    }

    .dash.quick-btn {
        min-height: 60px;
        font-size: 12px;
    }

    .reset-btn {
        height: 40px;
        font-size: 13px;
    }
}

/* =======================================================
   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: var(--dash-action-bt-new);
    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: 16px;
    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: var(--primary-color);
    color: var(--primarytext-color);
    margin-top: 4px;
    border: 1px solid var(--border-c);
}


/* 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 10px;
    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(--button-bg);
    /*color: var(--button-hover-bg);*/ /* ✅ */
    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;
        filter: var(--active-icon-filter) !important;
    }
/* 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: var(--merge-body-bg);
    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;
    }

.add-org-link {
    background: none;
    border: none;
    color: #123B2A;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
}

    .add-org-link:hover {
        text-decoration: underline;
    }


/* 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-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.coa-row {
    display: grid;
    grid-template-columns: 40px 230px 370px 170px 310px 190px 90px 10px;
    min-width: 1410px;
    align-items: center;
    min-height: 48px;
    padding: 0 10px;
}
.coa-rows {
    display: grid;
    grid-template-columns: 40px 400px 500px 400px 80px 100px;
    min-width: 1520px;
    align-items: center;
    padding: 8px 12px;
    min-height: 48px;
}
@media (max-width: 992px) {
    .coa-table-wrapper {
        overflow-x: auto;
    }
}
.coa-dropdown-menu {
    position: absolute;
    top: -80px;
    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;
}
.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-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 14px;
    align-self: center; /* Vertically center in the row */
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

.merge-subtitle {
    font-size: 12px;
    margin-bottom: 2px;
    color: #555;
}

.merge-donor-row {
    display: flex;
    align-items: center;

 
}

    .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;
        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-fields);
    background: var(--bg-fields);
    color: var(--bg-texts);
    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: var(--button-bg);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 13px;
    height: 36px;
    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: var(--button-hover-bg);
        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: var(--primary);
    color: var(--primarytext-color);
    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: var(--primary);
        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;
            }
    }
}
// /* Stats Cards */
//.mc-stat-value {
    // font-size: 28px;
    // font-weight: 700;
    // margin: 0 0 4px;
    // color: #111827;
    //
}

// .mc-stat-value.mc-text-orange {
    // color: #f59e0b;
    //
}

// .mc-stat-value.mc-text-green {
    // color: #16a34a;
    //
}

//.mc-stat-label {
    // font-size: 13px;
    // color: #6b7280;
    // margin: 0;
    //
}

//.mc-stat-label {
    // font-size: 13px;
    // color: #6b7280;
    // margin: 0;
    //
}

// /* Filter Tabs */
//.mc-tabs {
    // display: flex;
    // background: #fff;
    // border: 1px solid #e5e7eb;
    // border-radius: 8px;
    // padding: 4px;
    // margin-bottom: 20px;
    // overflow-x: auto;
    //
}

//.mc-tab {
    // flex: 1;
    // display: flex;
    // flex-direction: column;
    // padding: 14px 16px;
    // background: 0 0;
    // border: none;
    // border-bottom: 2px solid transparent;
    // cursor: pointer;
    // text-align: left;
    // transition: .2s;
    // min-width: 100px;
    //
}

    // .mc-tab:hover {
        // background: #f9fafb;
        //
    }

    // .mc-tab.active {
        // background: #e5e7eb;
        // border-bottom-color: #1f2937;
        //
    }

//.mc-tab-number {
    // font-size: 18px;
    // font-weight: 700;
    // color: #111827;
    // line-height: 1.2;
    //
}

//.mc-tab-label {
    // font-size: 12px;
    // color: #6b7280;
    // margin-top: 2px;
    //
}

 /* Status Badges */
.mc-status-badge {
     padding: 4px 12px;
     border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
   min-width: 70px;
    text-align: center;
     display: inline-block;
     margin-top: 8px;
    
}

 .mc-status-badge.active, .mc-status-badge.paid {
    background: #dcfce7;
     color: #16a34a;
    
}

 .mc-status-badge.inactive {
     background: #f3f4f6;
     color: #6b7280;

}

 .mc-status-badge.overdue {
    background: #fee2e2;
     color: #dc2626;
    
}

 /* Utility Colors */
.mc-text-red {
    color: #dc2626;
  
}

.mc-text-orange {
    color: #f59e0b;
  
}

.mc-text-green {
     color: #16a34a;
   
}

 /* =========================================
//   MANAGE CUSTOMERS TABS - DARK MODE
//   ========================================= */
[data-theme="dark"] .mc-tabs {
   background: #1f2937; /* Dark gray background */
   border-color: #374151; /* Darker border */
    
}

[data-theme="dark"] .mc-tab {
    color: #9ca3af; /* Muted text for inactive tabs */
   
}

   [data-theme="dark"] .mc-tab:hover {
         background: #374151; /* Slightly lighter on hover */
       
    }

     [data-theme="dark"] .mc-tab.active {
         background: #374151; /* Highlighted background for active tab */
        border-bottom-color: #60a5fa; /* Optional: Blue accent line at bottom */
        
    }

[data-theme="dark"] .mc-tab-number {
    color: #f3f4f6; /* Bright white/gray for numbers */
  
}

[data-theme="dark"] .mc-tab-label {
  color: #9ca3af; /* Muted label text */
   
}

[data-theme="dark"] .mc-tab.active .mc-tab-number,
[data-theme="dark"] .mc-tab.active .mc-tab-label {
     color: #ffffff; /* Pure white for active tab text */
    
}

 /* =========================================
//   ADD CUSTOMER - UPLOAD ICON DARK MODE
//   ========================================= */
[data-theme="dark"] .upload-icon {
     stroke: #9ca3af; /* Light gray for dark mode */
   
}

[data-theme="dark"] .upload-box {
     border-color: #4b5563; /* Darker border */
   background: #111827; /* Dark background */
    
}

    [data-theme="dark"] .upload-box p {
        color: #d1d5db; /* Lighter text */
       
    }



.custom44-dropdown {
    position: relative;
}

.dropdown44-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

    .dropdown44-menu.dropup {
        top: auto;
        bottom: 100%;
    }


 /* =========================================
//   ADD CUSTOMER - DROPDOWNS FIX
//   ========================================= */
 /* Dropdown width fix */
.custom44-dropdown {
    position: relative;
    width: 100%;
   
}
.custom-dropdown44,
.custom44-dropdown {
    width: 100%;
    min-width: 0;
}
.dropdown44-input {
     width: 100%;
     box-sizing: border-box;
    
}

.dropdown44-menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100% !important;
     min-width: 100%;
      max-width: 100%;
     box-sizing: border-box;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     z-index: 1000;
     max-height: 200px;
     overflow-y: auto;
     margin-top: 4px;
    
}

.dropdown44-item {
     padding: 4px 14px;
     cursor: pointer;
     font-size: 14px;
   color: #374151;
     transition: background 0.15s;
     white-space: nowrap;
     overflow: hidden;
    text-overflow: ellipsis;
}

    .dropdown44-item:hover {
         background: #f3f4f6;
        
    }

/* Backdrop for closing on outside click */
.dropdown-backdrop {
     position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
     height: 100vh;
     z-index: 999;
    background: transparent;
}


/* =========================================
   ADD CUSTOMER - DROPDOWNS FIX
   ========================================= */

/* Dropdown width fix */
.custom44-dropdown {
    position: relative;
    width: 100%;
}

.dropdown44-input {
    width: 100%;
    box-sizing: border-box;
}

.dropdown44-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
}

.dropdown44-item {
    padding: 4px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .dropdown44-item:hover {
        background: #f3f4f6;
    }

/* Backdrop for closing on outside click */
.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: transparent;
}

/* ===========================
   Tablets (768px and below)
   =========================== */
@media (max-width: 768px) {

    .dropdown44-input {
        height: 38px;
        font-size: 14px;
        padding: 0 12px;
    }

    .dropdown44-arrow {
        font-size: 13px;
    }

    .dropdown44-menu {
        max-height: 220px;
        font-size: 14px;
    }

    .group44-title,
    .dropdown44-item {
        padding: 8px 12px;
    }

    .dropdown44-search input {
        height: 36px;
        font-size: 14px;
    }
}

/* ===========================
   Mobile Devices (576px and below)
   =========================== */
@media (max-width: 576px) {

    .dropdown44-input {
        height: 42px;
        font-size: 15px;
        padding: 0 14px;
    }

    .dropdown44-arrow {
        font-size: 14px;
    }

    .dropdown44-menu {
        max-height: 200px;
        font-size: 15px;
    }

    .group44-title,
    .dropdown44-item {
        padding: 10px 14px;
    }

    .dropdown44-search {
        padding: 8px;
    }

        .dropdown44-search input {
            height: 40px;
            font-size: 15px;
            padding: 6px 12px;
        }
}

/* ===========================
   Small Phones (400px and below)
   =========================== */
@media (max-width: 400px) {

    .dropdown44-input {
        height: 44px;
        font-size: 16px;
    }

    .dropdown44-menu {
        max-height: 180px;
    }

    .dropdown44-search input {
        height: 42px;
        font-size: 16px;
    }
}
/* =========================================
   ADD CUSTOMER - DROPDOWNS DARK MODE
   ========================================= */

[data-theme="dark"] .dropdown44-menu {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .dropdown44-item {
    color: #f3f4f6;
}

    [data-theme="dark"] .dropdown44-item:hover {
        background: #374151;
    }

[data-theme="dark"] .dropdown44-input {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

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

.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: transparent;
}

.mga-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mga-avatar {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--primarytext-color);
    box-shadow: var(--shadow-sm);
    transition: all .3s ease;
}

    .mga-avatar:hover {
        background: rgba(255,255,255,.15);
        transform: scale(1.05);
    }

.mga-user-info h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primarytext-color);
}

.mga-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,.15);
    color: var(--primarytext-color);
}

.mga-user-info p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--primarytext-color);
}

.mga-banner-right {
    width: 250px;
}

.mga-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--primarytext-color);
    margin-bottom: 8px;
}

.mga-progress-track {
    height: 6px;
    background: rgba(255,255,255,.2);
    border-radius: 3px;
    overflow: hidden;
}

.mga-progress-fill {
    height: 100%;
    background: var(--primarytext-fore);
    border-radius: 3px;
}

/* Tabs */

.mga-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 24px;
    width: fit-content;
    box-shadow: var(--shadow-sm);
}

.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: var(--text-secondary);
    cursor: pointer;
    transition: all .2s ease;
}

    .mga-tab svg {
        width: 16px;
        height: 16px;
    }

    .mga-tab:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .mga-tab.active {
        background: var(--button-bg);
        color: var(--primarytext-color);
        box-shadow: var(--shadow-sm);
    }

        .mga-tab.active:hover {
            background: var(--button-hover-bg);
            transform: translateY(-1px);
        }

/* Layout */

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

/* Utilities */

.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: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

.mga-card-small {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    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;
        color: var(--text-primary);
    }

.mga-icon {
    width: 20px;
    height: 20px;
    color: var(--text-primary);
}

.mga-desc {
    margin: 8px 0 20px;
    font-size: 13px;
    color: var(--text-secondary);
}
/* Badges */
.mga-badge-outline {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--bg-card);
}

.mga-badge-success {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    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;
}

/* Form Layout */
.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: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

/* Inputs / Selects / Dates */
.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;
    width: 100%;
    padding: 0 14px;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-fields);
    outline: none;
}

.mga-field select,
.mga-field-full select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%2394a3b8' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.4-12.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

    .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: var(--primary);
        background: var(--bg-input);
        box-shadow: 0 0 0 3px rgba(22, 36, 71, .12);
    }

/* Meta List */
.mga-meta-list {
    display: flex;
    flex-direction: column;
}

.mga-meta-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 24px;
    margin: 0 -24px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

    .mga-meta-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.mga-meta-label {
    color: var(--text-secondary);
}

.mga-meta-val {
    color: var(--text-primary);
    font-weight: 600;
}

/* Footer */
.mga-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}

.amount-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* Primary Button */
.mga-btn-primary {
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background: var(--button-bg);
    color: var(--primarytext-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s ease, transform .2s ease;
}

    .mga-btn-primary:hover {
        background: var(--button-hover-bg);
        transform: translateY(-2px);
    }

    .mga-btn-primary:active {
        transform: translateY(0);
    }

/* Sessions */
.mga-session-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    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 {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.mga-session-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mga-btn-revoke {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Two Factor Authentication */
.mga-tfa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.mga-tfa-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mga-btn-link {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .mga-btn-link:hover {
        color: var(--button-hover-bg);
    }

/* Toggles */
.mga-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

    .mga-toggle-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

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

.mga-toggle-desc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

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

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

.mga-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--border-color);
    border-radius: 24px;
    transition: .3s;
}

    .mga-slider:before {
        content: "";
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 18px;
        height: 18px;
        background: var(--bg-card);
        border-radius: 50%;
        transition: .3s;
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }

input:checked + .mga-slider {
    background: var(--button-bg);
}

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

/* Danger Zone */
.mga-danger-zone {
    background: var(--bg-card);
    border: 1px solid #fecaca;
}

.mga-text-danger {
    margin: 0 0 4px;
    color: #ef4444;
}

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

.mga-btn-danger {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid #ef4444;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

    .mga-btn-danger:hover {
        background: #dc2626;
    }

/* Modal */
.mga-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
}

.pill-button {
    display: inline-block;
    padding: 2px 24px;
    border: none;
    border-radius: 50px;
    background: rgba(255,163,26,.35);
    color: #FD9500;
    font-size: 15px;
    font-weight: 550;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
}

    .pill-button:active {
        transform: scale(.98);
    }

.mga-modal-box {
    width: 460px;
    padding: 32px;
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.mga-modal-header {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.mga-modal-icon-bg {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef2f2;
    color: #ef4444;
}

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

.mga-modal-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.mga-modal-list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

    .mga-modal-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
        padding: 10px 12px;
        border-radius: 8px;
        background: #fef2f2;
        color: #ef4444;
        font-size: 13px;
    }

        .mga-modal-list li::before {
            content: "⚠️";
            font-size: 12px;
        }

.mga-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mga-btn-danger-full {
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

    .mga-btn-danger-full:hover {
        background: #dc2626;
    }

.mga-btn-text {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
}

    .mga-btn-text:hover {
        color: var(--text-primary);
    }

/* Spacing */
.mga-field-full {
    margin-bottom: 24px !important;
}

.mga-form-grid {
    gap: 24px !important;
    margin-bottom: 24px !important;
}

.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: var(--primary-color);
    border-radius: 12px;
    padding: 20px 24px !important;
    margin-bottom: 24px;
    margin-top:20px;
    color: var(--primarytext-color) !important;
    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: var(--primarytext-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.mga-user-info p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--primarytext-color);
}

.mga-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    background: #465161;
    border: 1px solid #465161;
    padding: 2px 8px;
    border-radius: 12px;
    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 rgba(0, 0, 0, 0.13);
    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: 2px solid rgba(0, 0, 0, 0.19);
    border-radius: 12px;
    padding: 24px !important;
    box-sizing: border-box !important;
    min-width: 0;
    width: 100%;
    overflow: visible !important;
    margin-bottom: 0 !important;
/*    transform: translateX(-10px) !important;*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !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;
/*    background-color: var(--bg-input);*/
    color: var(--text-primary);
}

    .mga-field label, .mga-field-full label {
        font-size: 12px;
        font-weight: 600;
/*        background-color: var(--bg-input);*/
        color: var(--text-primary);
    }

    .mga-field input, .mga-field-full input, .mga-field-full select {
        background: rgba(246, 247, 249, 0.75);
        border: 1px solid rgba(0, 0, 0, 0.13);
        border-radius: 4px;
        padding: 0 12px;
        height: 40px;
        box-sizing: border-box !important;
        font-size: 13px;
        color: #465161;
        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: rgba(0, 0, 0, 0.13);
        }

.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(--button-bg);
    color: var(--primarytext-color);
    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(--button-hover-bg);
    }

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

.mga-meta-val {
    font-size: 13px;
    font-weight: 600;
 
    color: var(--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: #FF0000;
    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: #FF0000;
    }

/* =========================================
//   ADD CUSTOMER - DROPDOWNS DARK MODE
//   ========================================= */
[data-theme="dark"] .dropdown44-menu {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .dropdown44-item {
    color: #f3f4f6;
}

    [data-theme="dark"] .dropdown44-item:hover {
        background: #374151;
    }

[data-theme="dark"] .dropdown44-input {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
}

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

.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: transparent;
}

/* Stats Cards */
.mc-stat-value {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111827;
}

    .mc-stat-value.mc-text-orange {
        color: #f59e0b;
    }

    .mc-stat-value.mc-text-green {
        color: #16a34a;
    }

.mc-stat-label {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}
/* Filter Tabs */
.mc-tabs {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.mc-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: 0 0;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: .2s;
    min-width: 100px;
}

    .mc-tab:hover {
        background: #f9fafb;
    }

    .mc-tab.active {
        background: #e5e7eb;
        border-bottom-color: #1f2937;
    }

.mc-tab-number {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.mc-tab-label {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Status Badges */
.mc-status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    min-width: 70px;
    text-align: center;
    display: inline-block;
    margin-top: 8px;
}

    .mc-status-badge.active,
    .mc-status-badge.paid {
        background: #dcfce7;
        color: #16a34a;
    }

    .mc-status-badge.inactive {
        background: #f3f4f6;
        color: #6b7280;
    }

    .mc-status-badge.overdue {
        background: #fee2e2;
        color: #dc2626;
    }

/* Utility Colors */
.mc-text-red {
    color: #dc2626;
}

.mc-text-orange {
    color: #f59e0b;
}

.mc-text-green {
    color: #16a34a;
}

/* =========================================
   MANAGE CUSTOMERS TABS - DARK MODE
   ========================================= */

[data-theme="dark"] .mc-tabs {
    background: #1f2937; /* Dark gray background */
    border-color: #374151; /* Darker border */
}

[data-theme="dark"] .mc-tab {
    color: #9ca3af; /* Muted text for inactive tabs */
}

    [data-theme="dark"] .mc-tab:hover {
        background: #374151; /* Slightly lighter on hover */
    }

    [data-theme="dark"] .mc-tab.active {
        background: #374151; /* Highlighted background for active tab */
        border-bottom-color: #60a5fa; /* Optional: Blue accent line at bottom */
    }

[data-theme="dark"] .mc-tab-number {
    color: #f3f4f6; /* Bright white/gray for numbers */
}

[data-theme="dark"] .mc-tab-label {
    color: #9ca3af; /* Muted label text */
}

[data-theme="dark"] .mc-tab.active .mc-tab-number,
[data-theme="dark"] .mc-tab.active .mc-tab-label {
    color: #ffffff; /* Pure white for active tab text */
}
/* =========================================
   ADD CUSTOMER - UPLOAD ICON DARK MODE
   ========================================= */
[data-theme="dark"] .upload-icon {
    stroke: #9ca3af; /* Light gray for dark mode */
}

[data-theme="dark"] .upload-box {
    border-color: #4b5563; /* Darker border */
    background: #111827; /* Dark background */
}

    [data-theme="dark"] .upload-box p {
        color: #d1d5db; /* Lighter text */
    }