.alert {
  border: none;
}

.alert p {
  margin-bottom: 0;
}

.alert button.close {
  padding: 0.75rem;
  line-height: 0.75;
}

.alert .alert-heading,
.alert .alert-heading+p {
  margin-left: 0.4rem;
}

.alert-primary {
  background-color: #435ebe;
  color: #fff;
}

.alert-primary a {
  color: #fff;
  font-weight: 700;
}

.alert-secondary {
  background-color: #ebeef3;
  color: #383d41;
}

.alert-secondary a {
  color: #fff;
  font-weight: 700;
}

.alert-success {
  background-color: #4fbe87;
  color: #fff;
}

.alert-success a {
  color: #fff;
  font-weight: 700;
}

.alert-warning {
  background-color: #eaca4a;
  color: #fff;
}

.alert-warning a {
  color: #fff;
  font-weight: 700;
}

.alert-danger {
  background-color: #f3616d;
  color: #fff;
}

.alert-danger a {
  color: #fff;
  font-weight: 700;
}

.alert-dark {
  background-color: #454546;
  color: #fff;
}

.alert-dark a {
  color: #fff;
  font-weight: 700;
}

.alert-light {
  background-color: #f9f9f9;
  color: #818182;
}

.alert-light a {
  color: #fff;
  font-weight: 700;
}

.alert-info {
  background-color: #56b6f7;
  color: #fff;
}

.alert-info a {
  color: #fff;
  font-weight: 700;
}

.alert-light-primary {
  background-color: #ebf3ff;
}

.alert-light-secondary {
  background-color: #e6eaee;
}

.alert-light-success {
  background-color: #d2ffe8;
}

.alert-light-danger {
  background-color: #ffdede;
}

.alert-light-warning {
  background-color: #fffdd8;
}

.alert-light-info {
  background-color: #e6fdff;
}
.page-content {
 padding-top: 0.5rem;
  padding-bottom: 0.5rem;
background-color: #fff;

}
.avatar {
  display: inline-flex;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.avatar .avatar-content {
  width: 32px;
  height: 32px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
}

.avatar .avatar-content i,
.avatar .avatar-content svg {
  color: #fff;
  font-size: 1rem;
  height: 1rem;
}

.avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.avatar .avatar-status {
  width: 0.7rem;
  height: 0.7rem;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #fff;
  bottom: 0;
  right: 0;
}

.avatar.avatar-sm .avatar-content,
.avatar.avatar-sm img {
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
}

.avatar.avatar-md .avatar-content,
.avatar.avatar-md img {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

.avatar.avatar-lg .avatar-content,
.avatar.avatar-lg img {
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
}

.avatar.avatar-xl .avatar-content,
.avatar.avatar-xl img {
  width: 60px;
  height: 60px;
  font-size: 1.4rem;
}

.btn .badge {
  border-radius: 50%;
  margin-left: 5px;
}

.btn .badge.bg-transparent {
  background-color: hsla(0, 0%, 100%, 0.25) !important;
  color: #fff;
}

.btn i,
.btn svg {
  width: 16px;
  height: 16px;
}

.btn.icon {
  padding: 0.4rem 0.6rem;
}

.btn.icon svg {
  width: 16px;
  height: 16px;
}

.btn.icon.icon-left svg {
  margin-right: 3px;
}

.btn.icon.icon-right svg {
  margin-left: 3px;
}

.btn.btn-outline-white {
  color: #fff;
  border-color: #fff;
}

.btn.btn-outline-white:hover {
  color: #333;
  background-color: #fff;
}

.btn.btn-light-primary {
  background-color: #ebf3ff;
  color: #002152;
}

.btn.btn-light-secondary {
  background-color: #e6eaee;
  color: #181e24;
}

.btn.btn-light-success {
  background-color: #d2ffe8;
  color: #00391c;
}

.btn.btn-light-danger {
  background-color: #ffdede;
  color: #450000;
}

.btn.btn-light-warning {
  background-color: #fffdd8;
  color: #3f3c00;
}

.btn.btn-light-info {
  background-color: #e6fdff;
  color: #00474d;
}

.btn.btn-danger,
.btn.btn-info,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-warning {
  color: #fff;
}

.btn.btn-light {
  color: #607080;
}

.btn.btn-dark {
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-group:not(.dropdown) .btn:not([class*="btn-"]) {
  border: 1px solid #dfe3e7;
}

.btn-group>.btn {
  border-radius: 0.267rem;
}

.buttons .btn {
  margin: 0 10px 10px 0;
}

.breadcrumb.breadcrumb-right {
  justify-content: flex-end;
  margin-top: 1rem;
}

.breadcrumb.breadcrumb-center {
  justify-content: center;
  margin-top: 1rem;
}

.carousel-inner {
  border-radius: 0.7rem;
}

.carousel-caption h5 {
  color: #fff;
}

.card {
  margin-bottom: 1rem;
  border: none;
}

.card.card-statistic {
  box-shadow: 1px 2px 5px rgba(47, 170, 244, 0.5);
  background: linear-gradient(180deg, #25a6f1, #54b9ff);
}

.card.card-statistic .card-title {
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.8px;
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0;
  margin-top: 5px;
}

.card.card-statistic .card-right p {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0;
}

.card.card-statistic .card-right span.green {
  color: #6fff6f;
}

.card.card-statistic .card-right span.red {
  color: #ff7979;
}

.card.card-statistic .chart-wrapper {
  height: 100px;
}

.card .card-header {
  border: none;
}

.card .card-header h4 {
  font-size: 1.2rem;
  font-weight: 700;
}

.card .card-header~.card-body {
  padding-top: 0;
}

.card .card-content {
  position: relative;
}

.card .card-title {
  font-size: 1.2rem;
}

.card .card-body {
  padding: 1rem;
}

.card .card-heading {
  color: #555;
  font-size: 1.5rem;
}

.card .card-img-overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.card .card-img-overlay p {
  color: #eee;
}

.card .card-img-overlay .card-title {
  color: #fff;
}

.pricing .card {
  box-shadow: none;
  border-right: 1px solid #e9ecef;
  box-shadow: 0 10px 10px #e9ecef;
  margin-bottom: 0.5rem;
}

.pricing h1 {
  text-align: center;
  font-size: 4rem;
  margin-bottom: 3rem;
}

.pricing .card-header .card-title {
  font-size: 2rem !important;
  margin-bottom: 0;
}

.pricing .card-header p {
  font-size: 0.8rem;
}

.pricing ul li {
  list-style: none;
  margin-bottom: 0.5rem;
}

.pricing ul li i,
.pricing ul li svg {
  width: 1rem;
  color: #198754;
  font-size: 1rem;
  margin-right: 7px;
}

.pricing .card-highlighted {
  background-color: #435ebe;
  padding-top: 20px;
  padding-bottom: 20px;
}

.pricing .card-highlighted .card-body,
.pricing .card-highlighted .card-header {
  background-color: #435ebe;
  color: #fff;
}

.pricing .card-highlighted ul li {
  color: #fff;
}

.pricing .card-highlighted ul li i,
.pricing .card-highlighted ul li svg {
  color: #479f76;
}

.pricing .card-highlighted .card-footer {
  background-color: #435ebe;
}

.pricing .card-highlighted .card-title {
  color: #fff;
  font-size: 1.8rem;
}

.divider {
  display: block;
  text-align: center;
  overflow: hidden;
  margin: 1rem 0;
}

.divider .divider-text {
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  background-color: #fff;
}

.divider .divider-text:after,
.divider .divider-text:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  border-top: 1px solid #dfe3e7;
}

.divider .divider-text:before {
  right: 100%;
}

.divider .divider-text:after {
  left: 100%;
}

.divider.divider-left .divider-text {
  left: 0;
  float: left;
  padding-left: 0;
}

.divider.divider-left-center .divider-text {
  left: -25%;
}

.divider.divider-right-center .divider-text {
  left: 25%;
}

.divider.divider-right .divider-text {
  float: right;
  padding-right: 0;
}

.dropdown-toggle:after {
  color: #fff;
}

.dropdown-menu-large {
  min-width: 16rem;
}

.dropdown-menu {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.03);
}

.dropdown-item {
  transition: all 0.5s;
}

.form-group {
  margin-bottom: 0.5rem;
}

.form-group label {
  color: rgba(35, 28, 99, 0.7);
  font-weight: 600;
}

.form-group small {
  font-size: 0.7rem;
}

.form-group.with-title {
  position: relative;
}

.form-group.with-title label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  font-size: 0.6rem;
  background-color: #e9ecef;
  width: 100%;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.form-group.with-title .form-control,
.form-group.with-title dataTable-input {
  padding-top: 2rem;
}

.form-group.with-title .form-control:focus~label,
.form-group.with-title dataTable-input:focus~label {
  border-left: 1px solid #435ebe;
  border-top: 1px solid #435ebe;
  border-right: 1px solid #435ebe;
}

.form-group[class*="has-icon-"].has-icon-left .form-control {
  padding-left: 2.5rem;
}

.form-group[class*="has-icon-"].has-icon-left .form-control-icon {
  left: 0;
}

.form-group[class*="has-icon-"].has-icon-right .form-control {
  padding-right: 2.5rem;
}

.form-group[class*="has-icon-"].has-icon-right .form-control-icon {
  right: 0;
}

.form-group[class*="has-icon-"] .form-control:focus~.form-control-icon i,
.form-group[class*="has-icon-"] .form-control:focus~.form-control-icon svg {
  color: #5a8dee;
}

.form-group[class*="has-icon-"] .form-control.form-control-xl {
  padding-left: 3rem;
}

.form-group[class*="has-icon-"] .form-control.form-control-xl~.form-control-icon i {
  font-size: 1.6rem;
}

.form-group[class*="has-icon-"] .form-control.form-control-xl~.form-control-icon i:before {
  color: #a6a8aa;
}

.form-group[class*="has-icon-"] .form-control-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 0.6rem;
}

.form-group[class*="has-icon-"] .form-control-icon i,
.form-group[class*="has-icon-"] .form-control-icon svg {
  width: 1.2rem;
  color: #6c757d;
  font-size: 1.2rem;
}

.form-group[class*="has-icon-"] .form-control-icon i:before,
.form-group[class*="has-icon-"] .form-control-icon svg:before {
  vertical-align: sub;
}

.form-control.form-control-xl {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.form-check .form-check-input[class*="bg-"] {
  border: 0;
}

.form-check .form-check-input:focus {
  box-shadow: none;
}

.form-check .form-check-input.form-check-primary {
  background-color: #435ebe;
  border-color: #435ebe;
}

.form-check .form-check-input.form-check-primary:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-primary.form-check-glow {
  box-shadow: 0 0 5px #697ecb;
}

.form-check .form-check-input.form-check-primary.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

.form-check .form-check-input.form-check-secondary:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-secondary.form-check-glow {
  box-shadow: 0 0 5px #868e96;
}

.form-check .form-check-input.form-check-secondary.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-success {
  background-color: #198754;
  border-color: #198754;
}

.form-check .form-check-input.form-check-success:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-success.form-check-glow {
  box-shadow: 0 0 5px #21b26f;
}

.form-check .form-check-input.form-check-success.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-info {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.form-check .form-check-input.form-check-info:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-info.form-check-glow {
  box-shadow: 0 0 5px #3cd5f4;
}

.form-check .form-check-input.form-check-info.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-warning {
  background-color: #ffc107;
  border-color: #ffc107;
}

.form-check .form-check-input.form-check-warning:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-warning.form-check-glow {
  box-shadow: 0 0 5px #ffce3a;
}

.form-check .form-check-input.form-check-warning.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

.form-check .form-check-input.form-check-danger:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-danger.form-check-glow {
  box-shadow: 0 0 5px #e4606d;
}

.form-check .form-check-input.form-check-danger.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-light {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.form-check .form-check-input.form-check-light:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-light.form-check-glow {
  box-shadow: 0 0 5px #fff;
}

.form-check .form-check-input.form-check-light.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check .form-check-input.form-check-dark {
  background-color: #212529;
  border-color: #212529;
}

.form-check .form-check-input.form-check-dark:not(:checked) {
  background-color: transparent;
  border: 1px solid #ced4da;
}

.form-check .form-check-input.form-check-dark.form-check-glow {
  box-shadow: 0 0 5px #383f45;
}

.form-check .form-check-input.form-check-dark.form-check-glow:not(:checked) {
  box-shadow: none;
}

.form-check.form-check-sm .form-check-input {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.3em;
}

.form-check.form-check-sm label {
  font-size: 0.7rem;
}

.form-check.form-check-lg .form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.3em;
}

.form-check.form-check-lg label {
  font-size: 1rem;
}

.form-check.form-check-primary .form-check-input {
  background-color: #435ebe;
  border-color: #435ebe;
}

.form-check.form-check-secondary .form-check-input {
  background-color: #6c757d;
  border-color: #6c757d;
}

.form-check.form-check-success .form-check-input {
  background-color: #198754;
  border-color: #198754;
}

.form-check.form-check-info .form-check-input {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.form-check.form-check-warning .form-check-input {
  background-color: #ffc107;
  border-color: #ffc107;
}

.form-check.form-check-danger .form-check-input {
  background-color: #dc3545;
  border-color: #dc3545;
}

.form-check.form-check-light .form-check-input {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.form-check.form-check-dark .form-check-input {
  background-color: #212529;
  border-color: #212529;
}

.dataTable-input {
  min-height: calc(1.5em + 0.934rem + 2px);
  padding: 0.467rem 0.6rem;
  font-size: 0.9025rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555252;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #dfe3e7;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.dataTable-input:focus {
  color: #555252;
  background-color: #fff;
  border-color: #5a8dee;
  outline: 0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}

.modal .modal-content {
  box-shadow: -8px 12px 18px 0 rgba(25, 42, 70, 0.13);
  border: none;
}

.modal .modal-full {
  max-width: 94%;
}

.modal .white {
  color: #fff;
}

.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal .modal-header .modal-title {
  font-size: 1.1rem;
}

.modal .modal-header .close {
  padding: 7px 10px;
  border-radius: 50%;
  background: none;
  border: none;
}

.modal .modal-header .close:hover {
  background: #dee2e6;
}

.modal .modal-header i,
.modal .modal-header svg {
  font-size: 14px;
  height: 12px;
  width: 12px;
}

.modal .modal-footer {
  padding: 1rem;
}

.modal.modal-borderless .modal-header {
  border-bottom: 0;
}

.modal.modal-borderless .modal-footer {
  border-top: 0;
}

/* ============================================================
   Finance App Shell — Design tokens (sidebar + header)
   ============================================================ */
:root {
  --fx-primary: #0866D9;
  --fx-dark-blue: #073B78;
  --fx-sidebar: #02306E;
  --fx-sidebar-text: #fff;
  --fx-orange: #FFB800;
  --fx-sidemenu-active: linear-gradient(90deg, #F98007 0%,  #F15B07  100%);
  --fx-orange-hover: #E89F00;
  --fx-light-blue: #EAF4FF;
  --fx-border: #CBD5E1;
  --fx-page-bg: #F3F7FC;
  --fx-success: #109447;
  --fx-danger: #DC2626;
  --fx-warning: #F59E0B;
  --fx-text: #10244A;
  --fx-secondary-text: #64748B;
  --fx-placeholder: #94A3B8;
  --fx-card-bg: #FFFFFF;
  --fx-primary-hover: #0752B5;
  --fx-orange-deep: #FF6B00;
  --fx-orange-deep-hover: #E85F00;
  --fx-grey: #64748B;
  --fx-grey-hover: #475569;
  --fx-sidebar-width: 300px;
  --fx-header-height: 56px;
  --fx-font: arial, helvetica, sans-serif;
}

#sidebar.active .sidebar-wrapper {
  left: 0;
}

#sidebar:not(.active) .sidebar-wrapper {
  left: -300px;
}

#sidebar:not(.active)~#main {
  margin-left: 0;
  margin-top: 0
}

/* ---------- Top header ---------- */
.fixed-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--fx-header-height);
  margin: 0;
  padding: 0 20px;
  overflow: hidden;
  background-color: var(--fx-primary);
  color: #FFFFFF;
  font-family: var(--fx-font);
  z-index: 5;
}

/* Decorative orange swoosh on the right */
.fixed-header::before {
  content: "";
  position: absolute;
  top: -95px;
  right: -70px;
  width: 460px;
  height: 245px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FE7B11 0%, #FE5102 55%, #CD2C00 100%);
  transform: rotate(-6deg);
  pointer-events: none;
}

.fixed-header>* {
  position: relative;
  z-index: 1;
}

.header-title {
  
  min-width: 0;
  font-family: var(--fx-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #dbd8d8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.header-menu {
  position: relative;
}

.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: #fff;
  font-family: var(--fx-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.header-action-btn:hover,
.header-action-btn[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.18);
}

.header-action-btn .bi {
  font-size: 17px;
}

.header-caret {
  font-size: 14px !important;
  opacity: 0.9;
}

.header-bell {
  position: relative;
  padding: 0 14px;
}

.header-divider {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.45);
}

.header-bell .header-dot {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--fx-danger);
  border: 1.5px solid var(--fx-primary);
}

.header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  color: var(--fx-primary);
  font-size: 17px;
}

.header-user-name {
  font-size: 14px;
  font-weight: 600;
}

.header-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--fx-card-bg);
  border: 1px solid var(--fx-border);
  border-radius: 6px;
  box-shadow: 0 10px 26px rgba(16, 36, 74, 0.20);
  z-index: 1050;
}

.header-menu-panel li+li {
  margin-top: 2px;
}

.header-menu-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--fx-text);
  font-family: var(--fx-font);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.header-menu-panel button:hover {
  background-color: var(--fx-light-blue);
  color: var(--fx-primary);
}

.header-menu-panel .header-menu-head {
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--fx-border);
  color: var(--fx-secondary-text);
  font-family: var(--fx-font);
  font-size: 14px;
  font-weight: 500;
}

.header-menu-panel li.is-active button {
  background-color: var(--fx-light-blue);
  color: var(--fx-primary);
  font-weight: 700;
}

@media(min-width: 1200px) {

  .fixed-header {
    position: fixed;
    top: 0;
    left: var(--fx-sidebar-width);
    /* start after sidebar */
    width: calc(100% - var(--fx-sidebar-width));
    /* fill remaining space */
    z-index: 5;
    background: linear-gradient(90deg, #003794 0%, #0067CB 60%);
  }
}

.sidebar-wrapper {
  width: var(--fx-sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 10;
  overflow-y: auto;
  background-color: var(--fx-sidebar);
  bottom: 0;
  transition: left 0.5s ease-out;
  font-family: var(--fx-font);
}

.sidebar-wrapper .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fx-header-height);
  padding: 0 1.25rem;
  background-color: var(--fx-sidebar);
  position: sticky;
  top: 0;
  z-index: 3;
}

.sidebar-logo {
  display: inline-flex;
  align-items: baseline;
  color: #FFFFFF;
  font-family: var(--fx-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  text-decoration: none;
}

.sidebar-logo .logo-x {
  color: var(--fx-orange);
  margin-left: 1px;
}

.sidebar-wrapper .sidebar-header .sidebar-hide {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.sidebar-wrapper .sidebar-toggler.x {
  position: absolute;
  right: 0;
  top: 0.5rem;
  display: none;
}

.sidebar-wrapper .menu {

  padding: 0.5rem 0.75rem 1.5rem;
  font-family: var(--fx-font);
  font-weight: 500;
}

.sidebar-wrapper .menu .sidebar-title {
  padding: 0 0.75rem;
  margin: 1.5rem 0 0.5rem;
  font-size: 14px;
  list-style: none;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7FA8DE;
}

.sidebar-wrapper .menu .sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  border-left: 2px solid transparent;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  color: var(--fx-sidebar-text);
}

.sidebar-wrapper .menu .sidebar-link i,
.sidebar-wrapper .menu .sidebar-link svg {
  color: #FFEFDF;
  fill: #FFEFDF;
}

.sidebar-wrapper .menu .sidebar-link span {
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-wrapper .menu .sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}

.sidebar-wrapper .menu .sidebar-link:hover i,
.sidebar-wrapper .menu .sidebar-link:hover svg {
  color: #FFFFFF;
  fill: #FFFFFF;
}

.sidebar-wrapper .menu .sidebar-item {
  list-style: none;
  margin-top: 2px;
  position: relative;
}

.sidebar-wrapper .menu .sidebar-link.active {
  background-color: var(--fx-primary);
  color: #FFFFFF;
  font-weight: 600;
}

.sidebar-wrapper .menu .sidebar-link.active i,
.sidebar-wrapper .menu .sidebar-link.active svg {
  color: #FFFFFF;
  fill: #FFFFFF;
}

/* .sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after {
  content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><path stroke="gray" stroke-width="1" d="M6 9l6 6 6-6"/></svg>');
  position: absolute;
  color: #ccc;
  right: 15px;
  top: 12px;
  display: block;
} */
.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link {
  background: var(--fx-sidemenu-active);
  color: #FFFFFF;
  font-weight: 600;
}

.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link span {
  color: #FFFFFF;
}

.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link i,
.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link svg {
  fill: #FFFFFF;
  color: #FFFFFF;
}

.sidebar-wrapper .menu .sidebar-item.active .sidebar-link.has-sub:after {
  content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><path stroke="%23fff" stroke-width="1" d="M6 9l6 6 6-6"/></svg>');
}

.sidebar-wrapper .menu .submenu {
  list-style: none;
  display: none;
  transition: max-height 2s cubic-bezier(0, 0.55, 0.45, 1);
  overflow: hidden;
  margin: 4px 0 6px;
}

.sidebar-wrapper .menu .submenu.active {
  max-height: 999px;
  display: block;
}

.sidebar-wrapper .menu .submenu .submenu-item {
  list-style: none;
  position: relative;
  margin-top: 2px;
}

.sidebar-wrapper .menu .submenu .submenu-item a {
  display: flex;
  align-items: center;
  padding: 9px 12px 9px 3px;
  color: var(--fx-sidebar-text);
  font-size: 14px;
  font-weight: 500;
  border-left: 2px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-wrapper .menu .submenu .submenu-item a:hover {
  margin-left: 0;
  background-color: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}

.sidebar-wrapper .menu .submenu .submenu-item.active>a {
  background-color: #FEE6CE;
  border-left-color: var(--fx-sidemenu-active);
  color: var(--fx-text);
  font-weight: 600;
}

@media screen and (max-width: 1199px) {
  .sidebar-wrapper {
    position: absolute;
    left: -300px;
  }

  .sidebar-wrapper .sidebar-toggler.x {
    display: block;
  }
}

.nav-pills .nav-link.active {
  box-shadow: 0 2px 10px rgba(67, 94, 190, 0.5);
}

.nav-tabs,
.nav-tabs .nav-link {
  border: none;
}

.nav-tabs .nav-link:hover {
  border: none;
  text-shadow: 0 0 2px rgba(67, 94, 190, 0.3);
}

.nav-tabs .nav-link.active {
  border: none;
  position: relative;
  color: #435ebe;
}

.nav-tabs .nav-link.active:after {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #435ebe;
  left: 0;
  box-shadow: 0 2px 5px rgba(67, 94, 190, 0.5);
}

.navbar-fixed {
  position: fixed;
  background-color: #fff;
}

.navbar {
  height: 90px;
  padding: 1.5rem;
}

.navbar .navbar-brand img {
  height: 1.5rem;
}

.navbar .user-menu img {
  width: 39px;
  height: 39px;
}

.navbar.navbar-header li {
  display: flex;
  align-items: center;
}

.navbar.navbar-header li.nav-icon {
  margin-right: 0.4rem;
}

.navbar.navbar-header li.nav-icon .nav-link {
  display: block;
  padding: 0.4rem;
  border-radius: 50%;
}

.navbar.navbar-header li.nav-icon .nav-link:hover {
  background-color: #e9ecef;
}

.navbar.navbar-header .dropdown>a {
  color: #6c757d;
  font-weight: 600;
}

.navbar.navbar-header .dropdown>a svg {
  height: 24px;
  width: 24px;
}

.navbar.navbar-header .dropdown>a:after {
  display: none;
}

.pagination.pagination-primary .page-item.active .page-link {
  background-color: #435ebe;
  border-color: #435ebe;
  box-shadow: 0 2px 5px rgba(67, 94, 190, 0.3);
}

.pagination.pagination-secondary .page-item.active .page-link {
  background-color: #6c757d;
  border-color: #6c757d;
  box-shadow: 0 2px 5px rgba(108, 117, 125, 0.3);
}

.pagination.pagination-success .page-item.active .page-link {
  background-color: #198754;
  border-color: #198754;
  box-shadow: 0 2px 5px rgba(25, 135, 84, 0.3);
}

.pagination.pagination-info .page-item.active .page-link {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
  box-shadow: 0 2px 5px rgba(13, 202, 240, 0.3);
}

.pagination.pagination-warning .page-item.active .page-link {
  background-color: #ffc107;
  border-color: #ffc107;
  box-shadow: 0 2px 5px rgba(255, 193, 7, 0.3);
}

.pagination.pagination-danger .page-item.active .page-link {
  background-color: #dc3545;
  border-color: #dc3545;
  box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

.pagination.pagination-light .page-item.active .page-link {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  box-shadow: 0 2px 5px rgba(248, 249, 250, 0.3);
}

.pagination.pagination-dark .page-item.active .page-link {
  background-color: #212529;
  border-color: #212529;
  box-shadow: 0 2px 5px rgba(33, 37, 41, 0.3);
}

.page-item:not(.active) .page-link:hover {
  color: #000;
}

.page-item i,
.page-item svg {
  font-size: 14px;
  width: 13px;
  height: 13px;
}

.page-item .page-link {
  font-size: 0.875rem;
}

.page-item .page-link:focus {
  box-shadow: none;
}

.page-item:first-child {
  margin-right: 0.4rem;
}

.page-item:last-child {
  margin-left: 0.4rem;
}

.dataTable-table td,
.dataTable-table thead th,
.table td,
.table thead th {
  vertical-align: middle;
}

.dataTable-table:not(.table-borderless) thead th,
.table:not(.table-borderless) thead th {
  border-bottom: 1px solid #1c60ea !important;
}

.table-md.dataTable-table tr td,
.table-md.dataTable-table tr th,
.table-sm.dataTable-table tr td,
.table-sm.dataTable-table tr th,
.table.table-md tr td,
.table.table-md tr th,
.table.table-sm tr td,
.table.table-sm tr th {
  padding: 1rem;
}

.table-lg.dataTable-table tr td,
.table-lg.dataTable-table tr th,
.table.table-lg tr td,
.table.table-lg tr th {
  padding: 1.3rem;
}

.dataTable-container {
  overflow-x: auto;
}

.progress.progress-primary {
  overflow: visible;
}

.progress.progress-primary .progress-bar {
  background-color: #435ebe;
  border-radius: 0.25rem;
}

.progress.progress-secondary {
  overflow: visible;
}

.progress.progress-secondary .progress-bar {
  background-color: #6c757d;
  border-radius: 0.25rem;
}

.progress.progress-success {
  overflow: visible;
}

.progress.progress-success .progress-bar {
  background-color: #198754;
  border-radius: 0.25rem;
}

.progress.progress-info {
  overflow: visible;
}

.progress.progress-info .progress-bar {
  background-color: #0dcaf0;
  border-radius: 0.25rem;
}

.progress.progress-warning {
  overflow: visible;
}

.progress.progress-warning .progress-bar {
  background-color: #ffc107;
  border-radius: 0.25rem;
}

.progress.progress-danger {
  overflow: visible;
}

.progress.progress-danger .progress-bar {
  background-color: #dc3545;
  border-radius: 0.25rem;
}

.progress.progress-light {
  overflow: visible;
}

.progress.progress-light .progress-bar {
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.progress.progress-dark {
  overflow: visible;
}

.progress.progress-dark .progress-bar {
  background-color: #212529;
  border-radius: 0.25rem;
}

.progress.progress-sm {
  height: 0.4rem;
}

.progress.progress-lg {
  height: 1.5rem;
}

.progress .progress-bar {
  position: relative;
  overflow: visible;
}

.progress .progress-bar.progress-label:before {
  content: attr(aria-valuenow) "%";
  position: absolute;
  right: 0;
  top: -1.3rem;
  color: #495057;
  font-size: 0.8rem;
}

/* .bi {
  width: 1rem;
  height: 1rem;
} */

.bi.bi-middle:before {
  vertical-align: middle;
}

.bi.bi-sub:before {
  vertical-align: sub;
}

.stats-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: #000;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-icon i {
  color: #fff;
  font-size: 1.7rem;
}

.stats-icon.purple {
  background-color: #9694ff;
}

.stats-icon.blue {
  background-color: #57caeb;
}

.stats-icon.red {
  background-color: #ff7976;
}

.stats-icon.green {
  background-color: #5ddab4;
}

@media (max-width: 767px) {
  .stats-icon {
    float: left;
    margin-bottom: 0.4rem;
  }

  body {
    font-size: 14px
  }
}

.burger-btn {
  display: none;
  padding: 0 4px;
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

#main {
  margin-left: var(--fx-sidebar-width);
  padding: 0.5rem;
  margin-top: var(--fx-header-height);
  background-color: var(--fx-page-bg);
}

@media screen and (max-width: 1199px) {
  #main {
    margin-left: 0;
  }
}

#main.layout-navbar {
  padding: 0;
}

#main #main-content {
  padding: 2rem;
}

.page-heading {
  margin: 0 0 2rem;
}

.page-heading h3 {
  font-weight: 700;
}

.page-title-headings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.page-title-headings h3 {
  margin-bottom: 0;
  margin-right: 1rem;
}

.page-title-headings .breadcrumb {
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

.mt-10 {
  margin-top: 3rem;
}

/* ============================================================
   Finance App Shell – responsive helpers (all screen sizes)
   Breakpoints: 1199 laptop | 991 tablet-L | 767 tablet-P
                | 575 phone | 480 small phone | 380 very small
   ============================================================ */

/* ---------- ≤1199px : laptop / tablet landscape (sidebar off-canvas) ---------- */
@media screen and (max-width: 1199px) {
  /* the header is in normal flow here, so #main needs no top offset
     (also prevents the 56px layout jump when the sidebar opens) */
  #main {
    margin-top: 0;
    padding: 0.4rem;
  }

  #main #main-content {
    padding: 1.25rem;
  }

  .header-title {
    font-size: 18px;
  }
}

/* ---------- ≤991px : tablet ---------- */
@media screen and (max-width: 991px) {
  #main #main-content {
    padding: 1rem;
  }

  .fixed-header {
    padding: 0 14px;
  }

  .page-title-headings {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .page-title-headings h3 {
    margin-right: 0;
  }
}

/* ---------- ≤767px : tablet portrait / large phone ---------- */
@media screen and (max-width: 767px) {
  #main {
    padding: 0.35rem;
  }

  #main #main-content {
    padding: 0.85rem;
  }

  /* decorative header swoosh – scale down so it never crowds the title */
  .fixed-header::before {
    top: -70px;
    right: -90px;
    width: 300px;
    height: 165px;
  }

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

  .header-action-btn {
    height: 36px;
    padding: 0 10px;
  }

  .pricing h1 {
    font-size: 2.25rem;
  }

  .navbar {
    height: auto;
    padding: 1rem;
  }
}

/* ---------- ≤575px : phone ---------- */
@media screen and (max-width: 575px) {
  #main {
    padding: 0.3rem;
  }

  #main #main-content {
    padding: 0.7rem;
  }

  .fixed-header {
    padding: 0 10px;
    gap: 6px;
  }

  .fixed-header::before {
    top: -55px;
    right: -110px;
    width: 230px;
    height: 130px;
  }

  .header-title {
    font-size: 15px;
  }

  .header-actions {
    gap: 2px;
  }

  .header-action-btn {
    padding: 0 8px;
  }

  .modal .modal-full {
    max-width: 98%;
  }
}

/* ---------- ≤480px : small phones ---------- */
@media screen and (max-width: 480px) {
  .header-title {
    font-size: 14px;
  }

  /* keep only icons in the header so the title stays readable
     (hides the language label + user name, keeps avatar & notification dot) */
  .header-action-btn>span:not(.header-avatar):not(.header-dot) {
    display: none;
  }

  .header-divider {
    display: none;
  }

  .header-bell {
    padding: 0 8px;
  }

  .header-menu-panel {
    min-width: 160px;
    max-width: calc(100vw - 20px);
  }

  #main #main-content {
    padding: 0.6rem;
  }
}

/* ---------- ≤380px : very small phones ---------- */
@media screen and (max-width: 380px) {
  .sidebar-wrapper {
    width: 260px;
    left: -260px;
  }

  #sidebar:not(.active) .sidebar-wrapper {
    left: -260px;
  }

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

/* images / videos never break the layout */
img,
video {
  max-width: 100%;
}


.mb-10,
.my-10 {
  margin-bottom: 3rem;
}

.my-10 {
  margin-top: 3rem;
}

.mb-24,
.my-24 {
  margin-bottom: 6rem;
}

.my-24 {
  margin-top: 6rem;
}

.opacity-50 {
  opacity: 1%;
}

.py-4-5 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.text-6xl {
  font-size: 4rem;
}

.text-black {
  color: #000;
}

.bg-gradient-ltr {
  background: linear-gradient(90deg, #095cde, #53c3f3);
}

.bg-light-primary {
  background-color: #ebf3ff;
  color: #002152;
}

.bg-light-secondary {
  background-color: #e6eaee;
  color: #181e24;
}

.bg-light-success {
  background-color: #d2ffe8;
  color: #00391c;
}

.bg-light-danger {
  background-color: #ffdede;
  color: #450000;
}

.bg-light-warning {
  background-color: #fffdd8;
  color: #3f3c00;
}

.bg-light-info {
  background-color: #e6fdff;
  color: #00474d;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.text-width-md {
  max-width: 450px;
}

.text-gray-300 {
  color: #dee2e6 !important;
}

.text-gray-400 {
  color: #ced4da !important;
}

.text-gray-500 {
  color: #adb5bd !important;
}

.text-gray-600 {
  color: #6c757d !important;
}

.btn-xl {
  padding: 1rem 2rem;
}

.icon-mid:before {
  vertical-align: middle;
}

.custom-table-wrapper {
  background: #ffffff;
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
  max-height: 300px
}


.custom-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  white-space: nowrap;
}


.custom-table thead {
  background-color: #b6ceff;
  border-bottom: 1px solid #505861;

}

.custom-table thead th {
  font-weight: 500;
  font-size: 14px;

  color: black;
  border-bottom: 2px solid #4cb837;
  position: sticky;

  top: 0;

  background-color: #b6ceff;

  z-index: 1;

  text-align: left;

}

.custom-table tbody tr {
  transition: all 0.2s ease-in-out;
}

.custom-table tbody tr:hover {
  background-color: #f1f3f5;
}

.custom-table td {
  /* font-size: 14px; */
  vertical-align: middle;
}

.custom-table td,
.custom-table th {
  padding: 8px 5px;
}

.custom-table {
  /* border: 1px solid #446dad; */
  /* border-collapse: collapse; */
}

.custom-table th,
.custom-table td {
  border-bottom: 1px solid #94b6fc;

  border-right: 1px solid #94b6fc;

  padding: 5px;
}


.custom-table tr:last-child td {
  border-bottom: none;

}

.name-column {
  width: 121px;
  min-width: 121px;
  max-width: 121px;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

.number-column {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

.customerdetails-column {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}
.boldtxt{
  font-size: 14px ;
  font-weight: 600 !important;
}
.customerdetails-print {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}

.searchbox {
  border: 1px solid #435ebe;

}

body.modal-open .fixed-header {
  pointer-events: none;
}

.modal {
  z-index: 2000 !important;
}

.report-card {
  transition: all 0.2s ease-in-out;
  border: 1px solid #b5c1ce;
  background: rgb(239 253 255);
}

.report-card:hover {
  /* slight lift */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  background-color: #a5c3e9;
  /* light highlight */
}

.reactselect input {
  text-transform: uppercase !important;
}

.reactselect .react-select__control,
.reactselect .react-select__menu,
.reactselect .react-select__option,
.reactselect .react-select__single-value,
.reactselect .react-select__input-container,
.reactselect .react-select__placeholder {
  font-family: inherit !important;
  font-size: 14px !important;
}

.reactselect .react-select__placeholder {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.roi-table th,
.roi-table td {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.roi-table tbody tr {
  height: 15px;
}

.roi-table .form-control {
  height: 28px;
  padding: 2px 6px;
  font-size: 14px;
}

.roi-table .form-select {
  height: 28px;
  padding: 2px 6px;
  font-size: 14px;
}

legend {
  font-weight: bold;
  color: #0f53c9
}

.border-table tbody tr:last-child td {
  border-bottom: 1px solid #435ebe !important;

}

/* .roi-table td,
.roi-table th{
    padding:2px 4px;
    vertical-align:middle;
} */
/* weekly book */
/* .loan-book {
  border: 1px solid #2f6df5;
  margin-bottom: 15px;
} */

.loan-header {
  padding: 0;
}

.loan-title {
  text-align: center;
  padding: 6px;
  margin: 0;
  font-weight: 600;
  border-bottom: 1px solid #2f6df5;
}


.loan-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  align-items: start;
}

.loan-col {
  display: flex;
  align-items: flex-start;
}



.loan-footer {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  font-weight: 600;
}

.input-label-box {
  position: relative;
  border: 1px solid #6a6f74;
  border-radius: 4px;
  padding: 1px;
  margin-top: 5px;
}

.input-label-box label {
  position: absolute;
  top: -8px;
  left: 10px;
  background: #fff;
  padding: 0 5px;
  font-size: 14px;
  color: #000;
  line-height: 1;
}

.input-label-box .form-control {
  border: none;
  box-shadow: none;
  padding: 4px 5px;
  height: 28px;
}

.input-label-box .form-control:focus {
  border: none;
  box-shadow: none;
}
/* =====================================================================
   SIDE MENU + HEADER – RESPONSIVE FOR ALL SCREENS
   Paste at the VERY END of your global css file (after .input-label-box).
   Selectors start with #sidebar so they beat the old hard-coded
   "left: -300px" / "width: 300px" rules without deleting them.

   Screen        Sidebar            Behaviour
   >= 1760px     300px              fixed on the left (as before)
   1200-1759px   230px - 300px      fixed, width = 17vw  (1366px -> ~232px)
   <= 1199px     min(300px, 85vw)   off-canvas, opened by the burger button
   ===================================================================== */

/* ---------- 1. fluid sidebar width (one variable drives everything:
                 sidebar, #main margin-left, header left / width) ---------- */
:root {
  --fx-sidebar-width: clamp(230px, 17vw, 300px);
}

@media screen and (max-width: 1199px) {
  :root {
    --fx-sidebar-width: min(300px, 85vw);
  }
}

/* ---------- 2. sidebar panel ---------- */
#sidebar .sidebar-wrapper {
  width: var(--fx-sidebar-width);
  height: 100vh;
  height: 100dvh;                     /* real visible height on mobile browsers */
  position: fixed;
  scrollbar-width: thin;              /* slim scrollbar */
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

#sidebar .sidebar-wrapper::-webkit-scrollbar {
  width: 6px;
}

#sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
}

#sidebar.active .sidebar-wrapper {
  left: 0;
}

/* hidden position follows the real width (was a fixed -300px) */
#sidebar:not(.active) .sidebar-wrapper {
  left: calc(-1 * var(--fx-sidebar-width) - 24px);
  box-shadow: none;
}

/* off-canvas on tablet / phone: float above the page with a shadow */
@media screen and (max-width: 1199px) {
  #sidebar .sidebar-wrapper {
    position: fixed;                  /* was "absolute" – now stays put while scrolling */
    z-index: 1100;                    /* above header + page content */
  }

  #sidebar.active .sidebar-wrapper {
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- 3. logo scales with the sidebar ---------- */
#sidebar .sidebar-logo img {
  width: clamp(110px, 9vw, 140px);
  height: auto;
  max-width: 100%;
}

/* ---------- 4. menu items: keep icons aligned, long names wrap ---------- */
#sidebar .sidebar-wrapper .menu .sidebar-link > i:first-child {
  flex: none;
  width: 20px;
  text-align: center;
}

#sidebar .sidebar-wrapper .menu .sidebar-link > i.ms-auto {
  flex: none;
  font-size: 12px !important;
}

#sidebar .sidebar-wrapper .menu .sidebar-link span {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#sidebar .sidebar-wrapper .menu .submenu .submenu-item a span {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* =====================================================================
   COMPACT MODE – 1366 x 768 and smaller laptops (<= 1400px wide)
   ===================================================================== */
@media screen and (min-width: 1200px) and (max-width: 1400px) {

  :root {
    --fx-header-height: 50px;
  }

  /* ----- sidebar ----- */
  #sidebar .sidebar-wrapper .sidebar-header {
    padding: 0 0.9rem;
  }

  #sidebar .sidebar-wrapper .menu {
    padding: 0.35rem 0.55rem 1rem;
  }

  #sidebar .sidebar-wrapper .menu .sidebar-link {
    gap: 0.6rem;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 5px;
  }

  #sidebar .sidebar-wrapper .menu .sidebar-link i {
    font-size: 15px;
  }

  #sidebar .sidebar-wrapper .menu .sidebar-item,
  #sidebar .sidebar-wrapper .menu .sidebar-link {
    margin-top: 1px;
  }

  #sidebar .sidebar-wrapper .menu .submenu {
    margin: 2px 0 4px;
  }

  #sidebar .sidebar-wrapper .menu .submenu .submenu-item {
    margin-top: 1px;
  }

  #sidebar .sidebar-wrapper .menu .submenu .submenu-item a {
    padding: 6px 10px 6px 6px;
    font-size: 12px;
    border-radius: 5px;
  }

  #sidebar .sidebar-wrapper .menu .submenu .submenu-item a i {
    font-size: 12px;
  }

  /* ----- top header ----- */
  .fixed-header {
    padding: 0 14px;
    gap: 8px;
  }

  .fixed-header::before {
    top: -100px;
    right: -90px;
    width: 390px;
    height: 215px;
  }

  .header-title {
    font-size: 14px;
  }

  .header-action-btn {
    height: 34px;
    padding: 0 10px;
    gap: 6px;
    font-size: 12px;
  }

  .header-action-btn .bi {
    font-size: 15px;
  }

  .header-user-name {
    font-size: 12px;
  }

  .header-avatar {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .header-bell {
    padding: 0 10px;
  }

  .header-bell .header-dot {
    top: 7px;
    right: 9px;
    width: 7px;
    height: 7px;
  }

  .header-divider {
    height: 20px;
  }

  .header-menu-panel {
    min-width: 170px;
  }

  .header-menu-panel button {
    padding: 7px 9px;
    font-size: 13px;
  }

  /* ----- page area ----- */
  #main {
    padding: 0.4rem;
  }
}

/* ---------- 768px-tall screens: save vertical space in the menu ---------- */
@media screen and (min-width: 1200px) and (max-height: 800px) {
  #sidebar .sidebar-wrapper .menu .sidebar-link {
    padding: 6px 10px;
  }

  #sidebar .sidebar-wrapper .menu .submenu .submenu-item a {
    padding: 5px 10px 5px 6px;
  }
}

/* ---------- tablet / phone: comfortable touch targets ---------- */
@media screen and (max-width: 1199px) {
  #sidebar .sidebar-wrapper .menu .sidebar-link {
    padding: 11px 12px;
  }

  #sidebar .sidebar-wrapper .menu .submenu .submenu-item a {
    padding: 10px 12px 10px 6px;
  }
}

@media screen and (max-width: 575px) {
  #sidebar .sidebar-wrapper .sidebar-header {
    padding: 0 1rem;
  }
}
/* keep the table's own z-indexes inside the table, so they can't beat the page header */
.cm-table-wrap,
.cp-scroll {
  isolation: isolate;
}

/* page header always above page content (modals use 2000, sidebar drawer 1100) */
.fixed-header {
  z-index: 100 !important;
}

/* ---------- gold rate strip in the header ---------- */
.gold-rate-section {
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 16px;
  white-space: nowrap;
}

.gold-rate-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
}

.gold-rate-title svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.gold-rate-title-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.gold-rate-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  line-height: 1.15;
}

.gold-rate-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #D6E6FF;
}

.gold-rate-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* laptops: tighter */
@media (min-width: 1200px) and (max-width: 1400px) {
  .gold-rate-title { gap: 8px; padding-right: 12px; }
  .gold-rate-title svg { width: 28px; height: 28px; }
  .gold-rate-title-text { font-size: 14px; }
  .gold-rate-card { padding: 0 12px; }
  .gold-rate-type { font-size: 12px; }
  .gold-rate-amount { font-size: 13px; }
}

/* tablets: drop the title text, keep the icon + rates */
@media (max-width: 1199px) {
  .gold-rate-title-text { display: none; }
}
/* =====================================================================
   FLOATING BALANCE  (Today's Summary popup)
   Paste at the VERY END of app.css.
   Uses the same --fx-* tokens, gradients and card style as the Dashboard.
   ===================================================================== */

/* ---------- water-drop button ---------- */
.floating-drop-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1050;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.floating-drop-btn,
.floating-drop-btn:hover,
.floating-drop-btn:focus,
.floating-drop-btn:focus-visible,
.floating-drop-btn:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.floating-drop-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  margin: 3px 6px 3px 0;
  background: var(--fx-primary);          /* same orange as active menu */
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  /* box-shadow: 0 3px 8px rgba(241, 91, 7, 0.45); */
  transition: transform 0.2s ease;
  border: 1px solid #0833c8;
}

.floating-drop-btn:hover .floating-drop-shape {
  transform: rotate(-45deg) scale(1.08);
}

.floating-drop-icon {
  transform: rotate(45deg);
  font-size: 20px;
}

/* ---------- popup shell ---------- */
.floating-popup {
  position: fixed;
  right: 62px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1051;
  width: 420px;
  max-width: calc(100vw - 80px);
  max-height: 88vh;
  font-family: var(--fx-font);
  color: var(--fx-text);
}

.fb-card {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
  background: var(--fx-page-bg);
  border: 1px solid var(--fx-border);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(16, 36, 74, 0.28);
}

/* header = same blue gradient + orange swoosh as the top header */
.fb-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 10px 14px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #003794 0%, #0067CB 60%);
}

.fb-header::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 200px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FE7B11 0%, #FE5102 55%, #CD2C00 100%);
  transform: rotate(-6deg);
  pointer-events: none;
}

.fb-header > * {
  position: relative;
  z-index: 1;
}

.fb-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.fb-header-title .bi {
  margin-right: 4px;
}

.fb-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fb-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* body scrolls, header stays */
.fb-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
}

.fb-state {
  padding: 18px 0;
  text-align: center;
  font-size: 14px;
  color: var(--fx-secondary-text);
}

/* ---------- colours used for values ---------- */
.fb-pos { color: var(--fx-success) !important; }
.fb-neg { color: var(--fx-danger) !important; }
.fb-muted { color: var(--fx-secondary-text); }

/* ---------- total strip (like "Total Current Balance") ---------- */
.fb-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 4px;
  background: var(--fx-card-bg);
  border: 1px solid var(--fx-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.fb-total strong {
  font-size: 16px;
  font-weight: 800;
}

/* ---------- section cards (same look as dashboard cards) ---------- */
.fb-section {
  margin-bottom: 10px;
  padding: 6px;
  background: var(--fx-card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(16, 36, 74, 0.08);
}

.fb-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* margin: -10px -12px 8px; */
  padding: 4px;
  border-radius: 12px 12px 0 0;
}

.fb-between {
  justify-content: space-between;
}

.fb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #fff;
  font-size: 17px;
}

.fb-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.fb-section-amount {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fx-text);
}

/* colour themes – same as dashboard cards */
.fb-cash .fb-section-head    { background: linear-gradient(90deg, #EEF3FF, #fff); }
.fb-cash .fb-chip            { background: linear-gradient(135deg, #5B8DEF, #2F6BFF); }
.fb-cash .fb-section-title   { color: #2F6BFF; }

.fb-bank .fb-section-head    { background: linear-gradient(90deg, #FFF6E0, #fff); }
.fb-bank .fb-chip            { background: linear-gradient(135deg, #FFC83D, #F59E0B); }
.fb-bank .fb-section-title   { color: #D98A00; }

.fb-expense .fb-section-head  { background: linear-gradient(90deg, #FFEDEE, #fff); }
.fb-expense .fb-chip          { background: linear-gradient(135deg, #F87171, #DC2626); }
.fb-expense .fb-section-title { color: #DC2626; }

.fb-entries .fb-section-head  { background: linear-gradient(90deg, #E6F8F3, #fff); }
.fb-entries .fb-chip          { background: linear-gradient(135deg, #2DD4BF, #0D9488); }
.fb-entries .fb-section-title { color: #0D9488; }

/* ---------- label : value rows ---------- */
.fb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
  color: var(--fx-text);
}

.fb-row b {
  font-weight: 700;
}

/* count badge */
.fb-badge {
  min-width: 30px;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--fx-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ---------- tables (same style as dashboard bank table) ---------- */
.fb-table-wrap {
  overflow-x: auto;
}

.fb-entries-scroll {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.fb-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--fx-text);
}

.fb-table th,
.fb-table td {
  padding: 4px;
  line-height: 1.5;
  white-space: normal;
  border: 0;
  border-bottom: 1px solid #EEF1F6;
  vertical-align: middle;
}

.fb-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F6F8FB;
  color: var(--fx-secondary-text);
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--fx-border);
}

.fb-table tbody tr:hover {
  background: var(--fx-light-blue);
}

.fb-entry-name {
  white-space: normal !important;
  min-width: 130px;
}

.fb-total-row td {
  font-weight: 700;
  background: #F6F8FB;
  border-top: 1px solid var(--fx-primary);
  border-bottom: 0;
}

.fb-table tfoot td {
  position: sticky;
  bottom: 0;
}

/* ---------- small screens ---------- */
@media screen and (max-width: 575px) {
  .floating-popup {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    top: 56px;
    transform: none;
  }

  .fb-card,
  .fb-card .fb-body {
    max-height: calc(100dvh - 72px);
  }
}
/* =====================================================================
   GOLD LOAN REPORT: page fits the screen, only the table scrolls
   ===================================================================== */

/* lock #main to the visible height, only when it contains the report */
#main:has(.glr-page) {
  height: 100dvh;
  overflow: hidden;
}

/* >=1200px: the header is fixed, so #main starts below it */
@media (min-width: 1200px) {
  #main:has(.glr-page) {
    height: calc(100dvh - var(--fx-header-height));
  }
}

/* children of #main: content takes the free space, header/footer keep their size */
#main:has(.glr-page) > .flex-fill {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#main:has(.glr-page) > :not(.flex-fill) {
  flex: 0 0 auto;
}

/* the report page is a column: search card, table (grows), buttons */
.glr-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.glr-page > form,
.glr-page > .d-flex {
  flex: 0 0 auto;
}

/* print area takes the remaining height */
.glr-page > .glr-tablewrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.glr-page > .glr-tablewrap > * {
  flex: 0 0 auto;           /* title / date summary line keep their size */
}

/* ...and only the table wrapper scrolls (beats the old max-height rules) */
.glr-page .glr-tablewrap .cm-table-wrap,
.glr-page .glr-tablewrap .cm-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* header row stays visible while rows scroll */
.glr-page .glr-tablewrap .cm-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* phones / small tablets: too little height left, so let the page scroll normally */
@media (max-width: 767px) {
  #main:has(.glr-page) {
    height: auto;
    overflow: visible;
  }

  .glr-page > .glr-tablewrap {
    overflow: visible;
  }

  .glr-page .glr-tablewrap .cm-table-wrap,
  .glr-page .glr-tablewrap .cm-table-scroll {
    max-height: 70dvh;
  }
}
/* ---------- docked tab: mostly hidden, slides out on hover / click ---------- */
.floating-drop-btn {
  transform: translate(2px, -50%);          /* only ~14px peeks from the right edge */
  transition: transform 0.25s ease;
}

.floating-drop-btn:hover,
.floating-drop-btn:focus-visible,
.floating-drop-btn.is-open {
  transform: translate(0, -50%);             /* slides fully out */
}

/* number inside the drop: undo the shape's -45deg tilt */
.floating-drop-count {
  transform: rotate(45deg);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* panel expands out of the tab */
.floating-popup {
  transform-origin: right center;
  animation: fb-expand 0.22s ease-out;
}

@keyframes fb-expand {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media screen and (max-width: 575px) {
  .floating-popup { animation-name: fb-expand-m; transform-origin: top right; }

  @keyframes fb-expand-m {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
  }
}
.fixed-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  overflow: hidden;
}

.header-title {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
  font-weight: 700;
}

.gold-rate-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  gap: 5px;
}

.gold-rate-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #eecf86;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.gold-rate-list {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gold-rate-box {
  display: flex;
    align-items: center;
    min-width: 125px;
    height: 27px;
    border: 1px solid #02306E;
    border-radius: 5px;
    overflow: hidden;
    background: linear-gradient(45deg, #1972d1, #0c9ef5);
}

.gold-rate-type {
display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42%;
    height: 100%;
    color: #f9c957;
    font-size: 12px;
    font-weight: 700;
    border-right: 1px solid #1378b3;
}

.gold-rate-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: 0 6px;
  color: #fbfbfb;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}