:root {
     --color-background1: #f4f5fa; 
    --bs-primary: #8c57ff;
    --bs-secondary: #a8aaae;
    --bs-success: #28c76f;
    --bs-info: #00cfe8;
    --bs-warning: #ff9f43;
    --bs-danger: #ea5455;
    --bs-light: #f4f5fa;
    --bs-dark: #2e263d;
    --bs-gray: #b7bdc3;
    --bs-white: #fff;
    --bs-black: #000;
    --bs-primary-rgb: 140, 87, 255;
    --bs-secondary-rgb: 168, 170, 174;
    --bs-success-rgb: 40, 199, 111;
    --bs-info-rgb: 0, 207, 232;
    --bs-warning-rgb: 255, 159, 67;
    --bs-danger-rgb: 234, 84, 85;
    --bs-light-rgb: 244, 245, 250;
    --bs-dark-rgb: 46, 38, 61;
    --bs-gray-rgb: 183, 189, 195;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 67, 60, 80;
    --bs-body-bg-rgb: 244, 245, 250;
    --bs-font-sans-serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --bs-font-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 15px;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.375;
    --bs-body-color: #433c50;
    --bs-body-bg: #f4f5fa;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #d9dee3;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-heading-color: #433c50;
    --bs-link-color: #8c57ff;
    --bs-link-color-rgb: 140, 87, 255;
    --bs-link-decoration: none;
    --bs-link-hover-color: #7e4ee6;
    --bs-link-hover-color-rgb: 126, 78, 230;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff1f2;
    /* Component Colors */
    --card-bg: #fff;
    --card-color: #433c50;
    --card-border-color: var(--bs-border-color);
    --menu-bg: #f4f5fa;
    --menu-color: #433c50;
    --menu-header-color: #6f6a7b;
    --navbar-bg: #fff;
    --navbar-color: #433c50;
    --footer-bg: #f4f5fa;
    --footer-color: #433c50;
    --bs-table-bg: #fff;
    --bs-table-color: #433c50;
    --bs-table-striped-bg: #f9f9fa;
    --bs-table-hover-bg: #f6f6f7;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-head-bg: #f8f9fa;
    --bs-table-head-color: #495057;
    --bs-form-control-bg: #fff;
    --bs-form-control-color: #433c50;
    --bs-form-control-border: var(--bs-border-color);
    --bs-form-control-focus-border: #8c57ff;
    --bs-modal-bg: #fff;
    /* Page Specific Colors */
    --page-title-color: #495057;
    --page-subtitle-color: #6c757d;
    --bank-link-color: #007bff;
    --bank-link-hover-color: #0056b3;
    --date-text-color: #6c757d;
    --alert-clean-bg: transparent;
    --card-clean-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --card-header-clean-bg: #f8f9fa;
}

[data-bs-theme="dark"] {
  --bs-primary: #8c57ff;
  --bs-body-bg: #28243d;
  --bs-body-color: #d0d2d8;
  --bs-heading-color: #d0d2d8;
  --bs-link-color: #8c57ff;
  --bs-link-hover-color: #9d57ff;
  --bs-border-color: #444059;

  /* Component Colors */
  --card-bg: #312d4b;
  --card-color: var(--bs-body-color);
  --card-border-color: var(--bs-border-color);

  --menu-bg: #2A2F4C;
  --menu-color: #b6b9d0;
  --menu-header-color: #8c8ea4;

  --navbar-bg: #312d4b;
  --navbar-color: #d0d2d8;
  
  --footer-bg: #312d4b;
  --footer-color: #d0d2d8;

  --bs-table-bg: #312d4b;
  --bs-table-color: #d0d2d8;
  --bs-table-striped-bg: #363251;
  --bs-table-hover-bg: #3b3758;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-head-bg: #3f3a5b;
  --bs-table-head-color: #d0d2d8;
  
  --bs-form-control-bg: #403c59;
  --bs-form-control-color: #d0d2d8;
  --bs-form-control-border: #444059;
  --bs-form-control-focus-border: #8c57ff;
  
  --bs-modal-bg: #312d4b;

  /* Page Specific Colors - Dark Theme */
  --page-title-color: #d0d2d8;
  --page-subtitle-color: #8c8ea4;
  --bank-link-color: #8c57ff;
  --bank-link-hover-color: #9d57ff;
  --date-text-color: #8c8ea4;
  --alert-clean-bg: transparent;
  --card-clean-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --card-header-clean-bg: #3f3a5b;
}

body {
  color: #433c50;
  background-color: #f4f5fa;
}

.text-primary {
  color: #8c57ff !important;
}

.text-body[href]:hover,
.text-heading[href]:hover {
  color: #7e4ee6 !important;
}

.bg-primary {
  background-color: #8c57ff !important;
}
a.bg-primary:hover, a.bg-primary:focus {
  background-color: #8553f2 !important;
}

.bg-label-primary {
  background-color: #eee6ff !important;
  color: #8c57ff !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:focus:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:focus:not(:placeholder-shown) ~ label {
  color: #8c57ff;
}

.form-floating-outline :not(select):focus + label,
.form-floating-outline :not(select):focus + span {
  color: #8c57ff;
}
.form-floating-outline label::after,
.form-floating-outline > span::after {
  background: #fff;
}
.form-floating-outline label.bg-body::after,
.form-floating-outline > span.bg-body::after {
  background: #f4f5fa !important;
}

.svg-illustration svg {
  fill: #8c57ff;
}

html:not([dir=rtl]) .border-primary,
html[dir=rtl] .border-primary {
  border-color: #8c57ff !important;
}

a {
  color: #8c57ff;
}
a:hover {
  color: #9868ff;
}

.fill-primary {
  fill: #8c57ff;
}

/* Dropdown Menu Styling - Fixed Opacity */
.dropdown-menu {
    backdrop-filter: none !important;
}

.navbar-nav .dropdown-menu {
    backdrop-filter: none !important;
}
:root, [data-bs-theme=light] {
    --bs-table-head-bg: #F8F9FA;
    --bs-table-head-color: #495057;
}

[data-bs-theme=dark] {
    --bs-table-head-bg: #3F3A5B;
    --bs-table-head-color: #D0D2D8;
}

.table thead th {
    background-color: var(--bs-table-head-bg) !important;
    color: var(--bs-table-head-color) !important;
}
/* Bank table specific styling */
.bank-table {
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .bank-table {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bank-table thead th {
    border-bottom: 2px solid var(--bs-border-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}
.bank-table tbody tr:hover {
    background-color: rgba(140, 87, 255, 0.05);
}
.bank-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}
.bank-link {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}
.bank-link:hover {
    color: #0056b3;
    text-decoration: underline;
}
[data-bs-theme="dark"] .bank-link {
    color: #8c57ff;
}
[data-bs-theme="dark"] .bank-link:hover {
    color: #9d57ff;
}
.date-text {
    color: #6c757d;
    font-size: 0.875rem;
}
[data-bs-theme="dark"] .date-text {
    color: #8c8ea4;
}

.page-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.page-subtitle {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.card-clean {
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.card-header-clean {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    padding-left: 0;
    padding-right: 0;
}

.alert-clean {
    background: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
}