:root {
  /* FlowBank palette — pulled from the "homes" marketing template */
  --fb-primary: #FF0000;       /* ul-2-primary (brand red) */
  --fb-primary-dark: #d40000;
  --fb-secondary: #F6AF0F;     /* ul-secondary (gold accent) */
  --fb-navy: #05043C;          /* ul-c3 / ul-black */
  --fb-navy-dark: #030228;
  --fb-gray: #9E9E9E;          /* ul-gray */
  --fb-gray2: #5D6063;         /* ul-gray2 */
  --fb-bg: #f4f6fb;
  --fb-card: #ffffff;
  --fb-danger: #e5484d;
  --fb-warn: #f5a524;

  /* keep legacy var names used elsewhere in this file working */
  --fb-accent: var(--fb-primary);
  --fb-accent-dark: var(--fb-primary-dark);

  /* Recolor Bootstrap's CSS-variable-driven utilities (text-primary, bg-primary, etc.) */
  --bs-primary: var(--fb-primary);
  --bs-primary-rgb: 255, 0, 0;
  --bs-link-color: var(--fb-primary);
  --bs-link-hover-color: var(--fb-primary-dark);
}

/* Bootstrap ships .btn-primary/.border-primary/etc with hardcoded hex rather than
   var()-driven values, so we override the concrete classes here to apply the
   homes palette consistently across the dashboard. */
.btn-primary {
  color: #fff;
  background-color: var(--fb-primary);
  border-color: var(--fb-primary);
}


.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary {
  background-color: var(--fb-primary-dark) !important;
  border-color: var(--fb-primary-dark) !important;
  color: #fff !important;
}
.btn-outline-primary { color: var(--fb-primary) !important; border-color: var(--fb-primary) !important; background-color: transparent !important; }
.btn-outline-primary:hover { background-color: var(--fb-primary) !important; border-color: var(--fb-primary) !important; color: #fff !important; }
.btn-border {
  background-color: transparent !important;
  border: 1px solid var(--fb-primary) !important;
  color: var(--fb-primary) !important;
}
.btn-border:hover {
  background-color: var(--fb-primary) !important;
  color: #fff !important;
}
.btn-outline-secondary {
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}
.btn-outline-success {
  color: #16a34a !important;
  border: 1px solid #16a34a !important;
  background-color: transparent !important;
}
.btn-outline-success:hover {
  background-color: #16a34a !important;
  color: #fff !important;
}
.preset-pill {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  cursor: pointer;
  display: inline-block;
  line-height: 1.2;
  transition: all 0.15s ease-in-out;
}
.preset-pill:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
.preset-pill.active {
  background: #FF0000 !important;
  background-color: #FF0000 !important;
  color: #ffffff !important;
  border-color: #FF0000 !important;
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.25) !important;
}
.insight-toggle-btn {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.insight-toggle-btn.active {
  background: #FF0000 !important;
  color: #ffffff !important;
}
.theme-light .btn.bg-theme,
.theme-light .btn.color-theme,
.btn.color-theme {
  color: #1e293b !important;
}
.border-primary { border-color: var(--fb-primary) !important; }
.text-primary { color: var(--fb-primary) !important; }
a { color: var(--fb-primary); }
a:hover { color: var(--fb-primary-dark); }
.form-control:focus, .form-select:focus {
  border-color: var(--fb-primary);
  box-shadow: 0 0 0 .2rem rgba(255, 0, 0, .15);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--fb-primary); }

/* dashboards template's "highlight" accent classes (originally #4a89dc) */
.color-highlight, .color-highlight-dark, .color-icon-highlight { color: var(--fb-primary) !important; }
.bg-highlight, .bg-highlight-dark { background-color: var(--fb-primary) !important; }
.border-highlight, .border-highlight-dark { border-color: var(--fb-primary) !important; }
.gradient-highlight { background-image: linear-gradient(to bottom, var(--fb-primary), var(--fb-primary-dark)) !important; }
.list-group .active { background-color: var(--fb-primary) !important; border-color: var(--fb-primary) !important; }
.splide__pagination__page.is-active { background-color: var(--fb-primary) !important; }
#footer-bar .active-nav i, #footer-bar .active-nav span { color: var(--fb-primary) !important; }
#footer-bar .circle-nav-1::after,
#footer-bar .circle-nav-2::after,
#footer-bar .circle-nav-2::before {
  background-image: linear-gradient(to bottom, var(--fb-primary), var(--fb-primary-dark)) !important;
}
input[type="range"]::-webkit-slider-thumb { background-color: var(--fb-primary); }
#preloader .spinner-border { color: var(--fb-primary) !important; }

body {
  background: var(--fb-bg);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  background: var(--fb-navy);
  color: #cfe0ff;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand, .offcanvas .brand { color: #fff; font-weight: 700; font-size: 1.15rem; }
.sidebar .brand i, .offcanvas .brand i { color: var(--fb-accent); margin-right: .4rem; }

.sidebar .nav-link, .offcanvas .nav-link {
  color: #b9c7e6;
  border-radius: .5rem;
  padding: .55rem .8rem;
  margin-bottom: .15rem;
  font-size: .92rem;
}
.sidebar .nav-link:hover, .offcanvas .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active, .offcanvas .nav-link.active { background: var(--fb-accent); color: var(--fb-navy-dark); font-weight: 600; }
.sidebar .nav-link i, .offcanvas .nav-link i { width: 1.4rem; display: inline-block; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 62px; background: var(--fb-card); border-bottom: 1px solid #e7ebf3; }
.content { max-width: 1180px; width: 100%; margin: 0 auto; padding-left: 15px; padding-right: 15px; }

.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fb-accent); color: #06231f;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem;
}

.card { border: 1px solid #e9edf5; border-radius: 14px; }
.balance-card { background: linear-gradient(135deg, var(--fb-navy) 0%, var(--fb-navy-dark) 60%, var(--fb-primary) 160%); color: #fff; border: none; }
.balance-card .balance-figure { font-size: 2.2rem; font-weight: 700; letter-spacing: .5px; }
.balance-card .btn-eye { color: #cfe0ff; border: none; background: transparent; }

.stat-tile { border-radius: 14px; padding: 1rem 1.2rem; background: #fff; border: 1px solid #e9edf5; }

.quick-action {
  border-radius: 14px; border: 1px solid #e9edf5; background: #fff;
  padding: 1rem; text-align: center; text-decoration: none; color: var(--fb-navy);
  transition: transform .12s ease, box-shadow .12s ease;
  display: block;
}
.quick-action:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,37,69,.08); color: var(--fb-navy); }
.quick-action i { font-size: 1.5rem; color: var(--fb-accent-dark); }

.badge-status-active { background: #e6f9f0; color: #0f9d58; }
.badge-status-pending { background: #fff4e0; color: #b8760a; }
.badge-status-failed { background: #fde8e8; color: #c62828; }
.badge-status-frozen { background: #e7f0fe; color: #1e5ec9; }

.virtual-card {
  border-radius: 18px; padding: 1.25rem; color: #fff; min-height: 175px;
  background: linear-gradient(135deg, var(--fb-navy), var(--fb-primary) 140%);
  position: relative; overflow: hidden;
}
.virtual-card.frozen { filter: grayscale(.7); opacity: .75; }
.virtual-card .chip { width: 38px; height: 28px; border-radius: 6px; background: rgba(255,255,255,.35); }
.virtual-card .card-number { letter-spacing: 2px; font-size: 1.1rem; margin-top: 1rem; }

.auth-body { background: linear-gradient(135deg, var(--fb-navy) 0%, var(--fb-navy-dark) 60%, var(--fb-primary) 160%); min-height: 100vh; }
.auth-card { border-radius: 18px; max-width: 420px; margin: 6vh auto; }

.pin-input { max-width: 220px; letter-spacing: 8px; font-size: 1.4rem; text-align: center; }

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

@media (max-width: 991.98px) {
  .content { padding-bottom: 4rem; }
}

/* bootstrap.css has a stray, unconditional `.offcanvas{display:none}` rule that
   loads after Bootstrap's own offcanvas CSS and wins the cascade (same
   specificity, later in the file). That means clicking the sidebar/notifications
   toggle correctly adds the `.show` class (confirmed via testing), but nothing
   ever puts `display` back — so the panel never actually appears. This restores
   it for the `.show` state without needing to touch the vendor file. */
.offcanvas.show { display: flex !important; }



.card.card-style > .list-group.list-group-flush {
    padding: 12px 16px !important;
}

.card.card-style > .list-group.list-group-flush .list-group-item {
    border-radius: 8px;
}

.card.card-style > .list-group.list-group-flush .notif-item {
    padding: 14px 8px !important;
}

.list-group .tx-status-badge {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  display: inline-block;
  margin-top: 4px;
  margin-right: 0 !important;
}
/* Desktop layout: this template is mobile-app-styled with no max-width, so
   on wide viewports the header, footer nav, and cards stretch edge-to-edge.
   Constrain and center the app shell like a wide phone/tablet panel. */
@media (min-width: 992px) {
    #page {
        max-width: 720px;
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
        min-height: 100vh;
        background-color: inherit;
    }
    #footer-bar.footer-bar-detached {
        max-width: 706px;
        margin: 0 auto;
    }
}

/* =========================================
   CARD PADDING FIX
   ========================================= */

/* Give card-style .content proper internal padding */
.card.card-style > .content {
    padding: 16px 16px !important;
}

/* Transaction list items inside cards — proper padding and prevent clipping */
.card.card-style .list-group.list-group-flush {
    padding: 12px 16px !important;
}

.card.card-style .list-group.list-group-flush .list-group-item {
    padding: 14px 8px !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Middle column (description text) should shrink, not the amount */
.card.card-style .list-group-item > div:not(.ms-auto):not(:first-child) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card.card-style .list-group-item > div:not(.ms-auto):not(:first-child) span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

/* Right column (amount + badge) should NOT shrink */
.card.card-style .list-group-item > div.ms-auto {
    flex-shrink: 0;
    min-width: fit-content;
    padding-left: 8px;
}

/* Dashboard transaction rows — same flex fix */
.card.card-style > .content > a.d-flex,
.card.card-style > .content > div.d-flex {
    gap: 8px;
}

/* Description in dashboard transaction rows */
.card.card-style > .content .align-self-center.ps-1 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card.card-style > .content .align-self-center.ps-1 p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Amount column in dashboard should not shrink */
.card.card-style > .content .align-self-center.ms-auto.text-end {
    flex-shrink: 0;
    min-width: fit-content;
    padding-left: 8px;
}

/* Make sure amount text doesn't wrap */
.card.card-style > .content .align-self-center.ms-auto.text-end h4 {
    white-space: nowrap;
}