ul.source-of-income-list li {
  position: relative;
  margin: 0 0 12px;
}

ul.source-of-income-list li a {
  position: absolute !important;
  right: 0;
  top: -6px;
}

ul.source-of-income-list li .form-switch {
  position: absolute;
  top: 0;
  right: 55px;
}

.tab-scroll {
  overflow-x: scroll;
}
.tab-scroll ul {
  width: 3860px;
}

a {
  color: #203a82;
}

.navbar-vertical.nav-dashboard {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-menu-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1rem;
  /* Firefox */
  scrollbar-width: none;
}

/* Show Firefox scrollbar only on hover */
.sidebar-menu-scroll:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 120, 180, 0.4) transparent;
}

/* WebKit/Blink (Chrome, Edge, Safari) */
.app-menu .sidebar-menu-scroll::-webkit-scrollbar {
  width: 3px !important;
}

.app-menu .sidebar-menu-scroll::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.app-menu .sidebar-menu-scroll::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 16px 0;
}

.app-menu .sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 99px;
}

.app-menu .sidebar-menu-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(99, 120, 180, 0.38) !important;
}

.app-menu .sidebar-menu-scroll:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(32, 58, 130, 0.6) !important;
}

.tab-scroll::-webkit-scrollbar {
  width: 1px;
  height: 4px;
}

.tab-scroll::-webkit-scrollbar-thumb {
  background-color: #2c3091;
  border-radius: 30px;
}

button.add-more-btn.ms-0 {
  float: right;
  border: none;
  background-color: transparent;
  color: #2c3091;
  font-weight: bold;
  font-size: 12px;
}

.remitter-id-block {
  background-color: #eff0f3;
  border-radius: 10px;
  position: relative;
  padding: 12px 15px;
}
.remitter-id-block h3 {
  font-size: 15px;
  font-weight: inherit;
  margin: 0;
  position: relative;
}
.remitter-id-image {
  width: 100%;
  height: 148px;
  overflow: hidden;
  margin: 14px 0 0;
}
.remitter-id-image img {
  width: 100%;
  float: left;
  height: 100%;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: #203a82;
  border-color: #203a82;
  color: #ffffff;
}

.avatar-indicators:before {
  border: 2px solid #fff0 !important;
}

table.access-time-control-table {
  border-collapse: collapse;
  padding: 3px;
  margin: 20px 0;
}
table.access-time-control-table tbody th {
  padding: 3px;
  font-size: 12px;
}
table.access-time-control-table tbody th.day-of-week {
  text-align: left;
}
table.access-time-control-table tbody td.checkbox-enabled {
  background: #8a96a8;
}
table.access-time-control-table tbody td {
  border: 1px solid #cbcbcb;
  padding: 3px;
  width: 20px;
  height: 20px;
}

.tooltip {
  color: #fff !important;
  opacity: 100 !important;
  font-weight: bold !important;
}

@media (max-width: 998px) {
  .requirement-responsive .card-body {
    width: 1000px;
  }
  .requirement-responsive {
    overflow: auto;
  }
}

@media (max-width: 768px) {
  .header .navbar {
    z-index: 999;
    left: 0;
  }
  a.navbar-brand img {
    height: 29px;
  }
  .app-content-area {
    padding: 79px 14px 20px;
  }
  .navbar-vertical {
    margin-left: -19rem;
  }
}

@media (max-width: 479px) {
  .header .navbar {
    padding: 0.625rem 1rem;
  }
}

/* NPN-DETAIL-READONLY-RESKIN (2026-05-25, UI-only): /remittance/view/$id
   renders ~96 read-only fields via `<div class="form-control-view">`. The
   previous rule styled each one like a disabled <input> — bordered box,
   ~39px tall — which made an information page look like a frozen form.
   Reskin to clean info-display: emphasised value, faint baseline rule,
   tighter rhythm, dash placeholder for empties. No markup, JSX, loader,
   or action changes — revert is a one-line CSS rollback. */
.form-control-view {
  padding: 4px 0 6px;
  min-height: 26px;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
  border: 0;
  border-bottom: 1px solid #f1f1f4;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* Empty values still occupy their row so the grid alignment is stable. */
.form-control-view:empty::before {
  content: '—';
  color: #c7c7cc;
  font-weight: 400;
}
/* Slightly more breathing-room above the label so the info pair reads
   as a label/value couple rather than two grid items. */
.card-body .form-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 2px;
  /* Reserve two lines. These grid forms put each field in its own col-*, and a
     column is only as tall as its content — so a label that wraps (uppercase +
     letter-spacing makes them wide, e.g. "HMRC MLR REGISTRATION DATE *" in a
     col-lg-3, or "PERSONAL ID (PASSPORT OR DRIVING LICENSE) *" on the director
     tab) pushed ONLY ITS OWN control down, leaving that input visibly out of
     line with the rest of the row. Reserving the taller of the two heights for
     every label keeps the controls on a single baseline whether the label wraps
     or not. */
  line-height: 1.45;
  min-height: 2.9em;
}
/* Dark-theme parity — match the same low-contrast separator style. */
[data-theme="dark"] .form-control-view {
  color: #e5e5ea;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .form-control-view:empty::before {
  color: rgba(255, 255, 255, 0.32);
}
/* NPN-DETAIL-V2-RESKIN (2026-05-26, UI-only): tighter, calmer typographic
   design for /remittance/view/$id. Everything is namespaced under
   .v2-tx-detail so it cannot bleed into any other screen. No JSX
   handler change required — these rules only restyle existing markup
   plus a small new page header + hero card. Revert is one CSS block. */
.v2-tx-detail {
  --tx-bg:        #fafaf9;
  --tx-surface:   #ffffff;
  --tx-sunken:    #f5f5f4;
  --tx-border:    #ececea;
  --tx-divider:   #f1f1ef;
  --tx-ink-1:     #18181b;
  --tx-ink-2:     #5f5f66;
  --tx-ink-3:     #97979f;
  --tx-ink-4:     #c7c7cc;
  --tx-accent:    #1d4ed8;
  --tx-accent-soft:#dce9fe;
  --tx-accent-bd: #9cbef7;
  --tx-accent-ink:#1a3f9e;
  --tx-success-soft:#c8ebd9;
  --tx-success-bd:#6fc298;
  --tx-success-ink:#035f44;
  --tx-warning-soft:#f8e2b0;
  --tx-warning-bd:#d9a656;
  --tx-warning-ink:#7a3d00;
  --tx-danger-soft:#f8c8c8;
  --tx-danger-bd: #e18686;
  --tx-danger-ink:#8b1414;
  --tx-violet-soft:#e2d6f6;
  --tx-violet-bd: #b59be0;
  --tx-violet-ink:#4c2d9e;
  --tx-slate-soft:#dde3ea;
  --tx-slate-bd:  #a8b2be;
  --tx-slate-ink: #2f3946;
  --tx-mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', monospace;
}
/* page header */
.v2-tx-detail .v2-tx-pageheader { display: flex; align-items: flex-start; gap: 20px; margin: 12px 0 18px; flex-wrap: wrap; }
.v2-tx-detail .v2-tx-pageheader__title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-ink-3); margin-bottom: 8px; }
.v2-tx-detail .v2-tx-pageheader__ref { font-family: var(--tx-mono); font-size: 22px; font-weight: 500; color: var(--tx-ink-1); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; line-height: 1.1; margin-bottom: 10px; }
.v2-tx-detail .v2-tx-pageheader__route { color: var(--tx-ink-2); font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-tx-detail .v2-tx-pageheader__route .sep { color: var(--tx-ink-4); }
.v2-tx-detail .v2-tx-pageheader__route strong { color: var(--tx-ink-1); font-weight: 500; }
.v2-tx-detail .v2-tx-pageheader__actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
/* pill */
.v2-tx-detail .v2-tx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; background: var(--tx-slate-soft); color: var(--tx-slate-ink); border: 1px solid var(--tx-slate-bd); white-space: nowrap; }
.v2-tx-detail .v2-tx-pill .lbl { opacity: .65; font-weight: 400; }
.v2-tx-detail .v2-tx-pill.is-success { background: var(--tx-success-soft); color: var(--tx-success-ink); border-color: var(--tx-success-bd); }
.v2-tx-detail .v2-tx-pill.is-warning { background: var(--tx-warning-soft); color: var(--tx-warning-ink); border-color: var(--tx-warning-bd); }
.v2-tx-detail .v2-tx-pill.is-brand   { background: var(--tx-accent-soft);  color: var(--tx-accent-ink);  border-color: var(--tx-accent-bd); }
.v2-tx-detail .v2-tx-pill.is-danger  { background: var(--tx-danger-soft);  color: var(--tx-danger-ink);  border-color: var(--tx-danger-bd); }
/* hero */
.v2-tx-detail .v2-tx-hero { background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.v2-tx-detail .v2-tx-hero__nodes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 20px 24px; }
/* NPN-REMIT-VIEW-HERO-BRIDGE (2026-06-02, UI-only): hero head labels become
   tinted pill badges (blue "From", green "To") with a direction icon to match
   the Transaction Detail (Minimal) mockup. */
.v2-tx-detail .v2-tx-hero__head { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px; border: 1px solid transparent; color: var(--tx-ink-3); }
.v2-tx-detail .v2-tx-hero__head .bi { font-size: 10px; }
.v2-tx-detail .v2-tx-hero__head.is-from { background: var(--tx-accent-soft); color: var(--tx-accent-ink); border-color: var(--tx-accent-bd); }
.v2-tx-detail .v2-tx-hero__head.is-to   { background: var(--tx-success-soft); color: var(--tx-success-ink); border-color: var(--tx-success-bd); }
.v2-tx-detail .v2-tx-hero__country { font-size: 12.5px; color: var(--tx-ink-2); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.v2-tx-detail .v2-tx-hero__country .iso { font-family: var(--tx-mono); font-size: 11px; color: var(--tx-ink-3); border: 1px solid var(--tx-border); border-radius: 4px; padding: 1px 5px; background: var(--tx-sunken); }
.v2-tx-detail .v2-tx-hero__person { font-size: 16px; font-weight: 500; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-hero__person-meta { font-size: 12px; font-family: var(--tx-mono); color: var(--tx-ink-3); margin-top: 3px; }
/* Funding → payout capsule: two tinted chips (blue Bank / amber Cash) joined
   by a dashed arrow, replacing the old "via …" text line. */
.v2-tx-detail .v2-tx-hero__bridge { min-width: 150px; display: flex; flex-direction: column; align-items: center; }
.v2-tx-detail .v2-tx-hero__legs { display: inline-flex; align-items: center; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 999px; padding: 4px; box-shadow: 0 1px 2px rgba(15,20,30,.05); }
.v2-tx-detail .v2-tx-leg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.v2-tx-detail .v2-tx-leg .leg-ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; }
.v2-tx-detail .v2-tx-leg.is-fund { background: var(--tx-accent-soft); color: var(--tx-accent-ink); }
.v2-tx-detail .v2-tx-leg.is-fund .leg-ic { background: var(--tx-accent); color: #fff; }
.v2-tx-detail .v2-tx-leg.is-payout { background: var(--tx-warning-soft); color: var(--tx-warning-ink); }
.v2-tx-detail .v2-tx-leg.is-payout .leg-ic { background: #b45309; color: #fff; }
.v2-tx-detail .v2-tx-hero__legs .leg-arrow { position: relative; width: 28px; height: 2px; margin: 0 2px; background: repeating-linear-gradient(90deg, var(--tx-accent-bd) 0 4px, transparent 4px 8px); flex-shrink: 0; }
.v2-tx-detail .v2-tx-hero__legs .leg-arrow::after { content:''; position:absolute; right:-1px; top:50%; transform: translateY(-50%) rotate(45deg); width:5px; height:5px; border-top:1.5px solid var(--tx-accent); border-right:1.5px solid var(--tx-accent); }
.v2-tx-detail .v2-tx-hero__right { text-align: right; }
.v2-tx-detail .v2-tx-hero__amts { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: end; padding: 18px 24px; border-top: 1px solid var(--tx-divider); }
.v2-tx-detail .v2-tx-hero__amt-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-ink-3); margin-bottom: 6px; }
.v2-tx-detail .v2-tx-hero__amt-value { font-family: var(--tx-mono); font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--tx-ink-1); display: flex; align-items: baseline; gap: 8px; }
.v2-tx-detail .v2-tx-hero__amt-value .ccy { font-size: 13px; color: var(--tx-ink-3); font-weight: 400; }
.v2-tx-detail .v2-tx-hero__amt.right { text-align: right; }
.v2-tx-detail .v2-tx-hero__amt.right .v2-tx-hero__amt-value { justify-content: flex-end; }
.v2-tx-detail .v2-tx-hero__rate { text-align: center; }
.v2-tx-detail .v2-tx-hero__rate .num { font-family: var(--tx-mono); font-size: 14px; font-weight: 500; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-hero__rate .lbl { font-size: 10px; color: var(--tx-ink-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.v2-tx-detail .v2-tx-hero__meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--tx-divider); }
.v2-tx-detail .v2-tx-hero__meta .cell { padding: 11px 16px; border-right: 1px solid var(--tx-divider); position: relative; background: var(--cell-bg, transparent); }
.v2-tx-detail .v2-tx-hero__meta .cell::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--cell-accent, transparent); }
.v2-tx-detail .v2-tx-hero__meta .cell:last-child { border-right: 0; }
.v2-tx-detail .v2-tx-hero__meta .cell.is-brand   { --cell-bg:#e8f0fe; --cell-accent: var(--tx-accent); }
.v2-tx-detail .v2-tx-hero__meta .cell.is-success { --cell-bg:#daf1e5; --cell-accent: var(--tx-success-ink); }
.v2-tx-detail .v2-tx-hero__meta .cell.is-warning { --cell-bg:#faeaca; --cell-accent: var(--tx-warning-ink); }
.v2-tx-detail .v2-tx-hero__meta .cell.is-violet  { --cell-bg:#ecdffa; --cell-accent: var(--tx-violet-ink); }
.v2-tx-detail .v2-tx-hero__meta .cell.is-slate   { --cell-bg:#e5eaf0; --cell-accent: var(--tx-slate-ink); }
.v2-tx-detail .v2-tx-hero__meta .key { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-ink-3); margin-bottom: 3px; }
.v2-tx-detail .v2-tx-hero__meta .v   { font-size: 13px; color: var(--tx-ink-1); font-weight: 500; }
.v2-tx-detail .v2-tx-hero__meta .v.mono { font-family: var(--tx-mono); }
/* lift the existing cards into the new aesthetic without touching their JSX */
.v2-tx-detail .card { border: 1px solid var(--tx-border); border-radius: 8px; box-shadow: none; background: var(--tx-surface); }
/* Doubled `.v2-tx-detail` raises specificity to (0,3,1) so these clean
   section headings win over the global KPI rule `.card .card-body h3`
   (1.6rem/700) which otherwise blew every heading up to 22px ALL-CAPS.
   text-transform:none keeps them sentence-case to match the minimal mockup. */
.v2-tx-detail.v2-tx-detail .card-body h3 { font-size: 12px; font-weight: 600; letter-spacing: -.005em; color: var(--tx-ink-1); text-transform: none; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tx-divider); }
.v2-tx-detail .container-fluid, .v2-tx-detail body { background: var(--tx-bg); }
/* dark-theme parity */
[data-theme="dark"] .v2-tx-detail { --tx-bg:#1d1d1f; --tx-surface:#2a2a2c; --tx-sunken:#222224; --tx-border: rgba(255,255,255,.08); --tx-divider: rgba(255,255,255,.06); --tx-ink-1:#f1f1f4; --tx-ink-2:#c7c7cc; --tx-ink-3:#9d9d9f; --tx-ink-4: rgba(255,255,255,.32); }
[data-theme="dark"] .card-body .form-label {
  color: #9d9d9f;
}

[data-theme="dark"] .tooltip {
  color: #000 !important;
  opacity: 1 !important;
  font-weight: bold !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #000 !important;
}

[data-theme="dark"] .nav-link {
  color: #cbd5e1;
}
[data-theme="dark"] .dropdown-menu {
  --dashui-dropdown-bg: #0e0d0d;
  --dashui-dropdown-border-color: #0e0d0d;
  --dashui-dropdown-divider-bg: #0e0d0d;
}

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

/* NPN-DETAIL-V2-RESKIN Phase 2 (2026-05-26, UI-only): extend the
   design system with the remaining component patterns + convert the
   first content row to an 8/4 sticky-sidebar layout. Still namespaced
   under .v2-tx-detail so it cannot leak to other pages. No JSX rewrite
   beyond a single class addition on the row wrapper. */

/* 8/4 sticky-sidebar layout for the first content row */
.v2-tx-detail .v2-tx-mainrow { display: flex; flex-wrap: wrap; align-items: flex-start; }
@media (min-width: 1200px) {
  .v2-tx-detail .v2-tx-mainrow > .col-xl-6:first-child { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .v2-tx-detail .v2-tx-mainrow > .col-xl-6:last-child  { flex: 0 0 33.3333%; max-width: 33.3333%; position: sticky; top: 12px; align-self: flex-start; }
}

/* Amount-table rows — label / mono value, with .indent + .total variants */
.v2-tx-detail .v2-tx-amt { display: flex; flex-direction: column; }
.v2-tx-detail .v2-tx-amt-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--tx-divider); font-size: 12.5px; }
.v2-tx-detail .v2-tx-amt-row:last-child { border-bottom: 0; }
.v2-tx-detail .v2-tx-amt-row .lbl { color: var(--tx-ink-2); display: flex; align-items: center; gap: 8px; }
.v2-tx-detail .v2-tx-amt-row .v { font-family: var(--tx-mono); font-feature-settings: 'tnum' on; font-weight: 500; color: var(--tx-ink-1); text-align: right; }
.v2-tx-detail .v2-tx-amt-row .v .ccy { color: var(--tx-ink-3); font-size: 11px; margin-right: 4px; font-weight: 400; }
.v2-tx-detail .v2-tx-amt-row .v .expr { color: var(--tx-ink-3); font-size: 10px; font-weight: 400; display: block; margin-top: 2px; }
.v2-tx-detail .v2-tx-amt-row.indent .lbl { padding-left: 14px; color: var(--tx-ink-3); }
.v2-tx-detail .v2-tx-amt-row.total { background: var(--tx-sunken); border-top: 1px solid var(--tx-divider); margin: 6px -18px -18px; padding: 12px 18px; border-radius: 0 0 8px 8px; border-bottom: 0; }
.v2-tx-detail .v2-tx-amt-row.total .lbl { color: var(--tx-ink-1); font-weight: 500; }
.v2-tx-detail .v2-tx-amt-row.total .v { font-size: 14px; color: var(--tx-ink-1); font-weight: 600; }
.v2-tx-detail .v2-tx-method-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--tx-surface); border: 1px solid var(--tx-border); border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--tx-ink-2); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* Card header with subtabs in the same row.
   flex-wrap: wrap lets the subtabs container drop to its own line
   when the parent column is narrow (Amount Breakdown lives in the
   33% sticky sidebar after Phase 2), so the tabs don't get stacked
   vertically as plain text — they stay a pill-segment switcher and
   just move below the h3 on narrow widths. */
.v2-tx-detail .v2-tx-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tx-divider); }
.v2-tx-detail.v2-tx-detail .v2-tx-card-head h3 { font-size: 12px; font-weight: 600; letter-spacing: -.005em; color: var(--tx-ink-1); text-transform: none; margin: 0; padding: 0; border: 0; }

/* Subtabs — pill-segment switcher.
   display: inline-flex + flex-shrink: 0 + nowrap on the buttons keeps
   the segment intact when the parent is tight; if the whole segment
   can't fit beside the h3 it wraps to the next line (via card-head
   flex-wrap). Buttons themselves never break their label or stack
   vertically. */
.v2-tx-detail .v2-tx-subtabs { display: inline-flex; flex-shrink: 0; flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--tx-sunken); border: 1px solid var(--tx-border); border-radius: 8px; max-width: 100%; }
.v2-tx-detail .v2-tx-subtabs button { display: inline-block; flex: 0 0 auto; border: 0; background: transparent; padding: 5px 12px; border-radius: 5px; font-size: 12px; line-height: 1.4; color: var(--tx-ink-2); font-weight: 500; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; }
.v2-tx-detail .v2-tx-subtabs button:hover { color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-subtabs button.is-active { background: var(--tx-surface); color: var(--tx-accent-ink); box-shadow: 0 1px 2px rgba(15,20,30,.08), inset 0 0 0 1px var(--tx-accent-bd); }
/* Very narrow sidebars (< 360px) — tighten padding so the segment
   fits without horizontal scroll, and ms-auto stops pushing the
   segment past the edge. */
@media (max-width: 1399.98px) {
  .v2-tx-detail .v2-tx-subtabs button { padding: 5px 9px; font-size: 11.5px; }
}

/* Party-avatar circle — pure CSS, render via small JSX helper */
.v2-tx-detail .v2-tx-party-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.v2-tx-detail .v2-tx-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--tx-sunken); border: 1px solid var(--tx-border); color: var(--tx-ink-2); font-weight: 600; font-size: 10.5px; display: grid; place-items: center; flex-shrink: 0; }
.v2-tx-detail .v2-tx-party-name { font-size: 13.5px; font-weight: 500; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-party-role { font-size: 11px; color: var(--tx-ink-3); text-transform: uppercase; letter-spacing: .06em; }
/* Parties card — two columns separated by an accent divider, with an
   arrow medallion centered on the divider line. */
.v2-tx-detail .v2-tx-parties { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.v2-tx-detail .v2-tx-party-col { padding: 18px; position: relative; min-width: 0; }
.v2-tx-detail .v2-tx-party-col + .v2-tx-party-col { border-left: 1.5px solid var(--tx-accent-bd); }
.v2-tx-detail .v2-tx-parties::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--tx-surface); border: 1.5px solid var(--tx-accent); z-index: 2; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10); }
.v2-tx-detail .v2-tx-parties::after { content: '→'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--tx-accent); font-size: 13px; font-weight: 700; z-index: 3; line-height: 1; }
.v2-tx-detail .v2-tx-party-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 14px; }
.v2-tx-detail .v2-tx-party-fields .lbl { font-size: 10.5px; color: var(--tx-ink-3); font-weight: 600; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.v2-tx-detail .v2-tx-party-fields .lbl .req { color: var(--tx-danger-ink); }
.v2-tx-detail .v2-tx-party-fields .v { font-size: 13px; font-weight: 500; color: var(--tx-ink-1); min-height: 20px; word-break: break-word; }
.v2-tx-detail .v2-tx-party-fields .v.mono { font-family: var(--tx-mono); }
.v2-tx-detail .v2-tx-party-fields .v.is-muted { color: var(--tx-ink-3); font-weight: 400; }
/* On narrow screens collapse to one column, swap the divider for a
   horizontal line, and re-position the medallion accordingly. */
@media (max-width: 767.98px) {
  .v2-tx-detail .v2-tx-parties { grid-template-columns: 1fr; }
  .v2-tx-detail .v2-tx-party-col + .v2-tx-party-col { border-left: 0; border-top: 1.5px solid var(--tx-accent-bd); }
  .v2-tx-detail .v2-tx-parties::after { content: '↓'; }
}

/* Compliance rows — uniform check-icon list */
.v2-tx-detail .v2-tx-cmp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; border-bottom: 1px solid var(--tx-divider); }
.v2-tx-detail .v2-tx-cmp-row:last-child { border-bottom: 0; }
.v2-tx-detail .v2-tx-cmp-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
.v2-tx-detail .v2-tx-cmp-ico.is-success { background: var(--tx-success-soft); color: var(--tx-success-ink); border: 1px solid var(--tx-success-bd); }
.v2-tx-detail .v2-tx-cmp-ico.is-muted   { background: var(--tx-sunken); color: var(--tx-ink-3); border: 1px solid var(--tx-border); }
.v2-tx-detail .v2-tx-cmp-ico.is-brand   { background: var(--tx-accent-soft); color: var(--tx-accent-ink); border: 1px solid var(--tx-accent-bd); }
.v2-tx-detail .v2-tx-cmp-name { color: var(--tx-ink-1); font-weight: 500; flex: 1; }
.v2-tx-detail .v2-tx-cmp-meta { font-size: 11.5px; font-weight: 500; color: var(--tx-ink-1); font-family: var(--tx-mono); }
.v2-tx-detail .v2-tx-cmp-meta.is-muted { color: var(--tx-ink-3); font-weight: 400; font-family: inherit; }
.v2-tx-detail .v2-tx-cmp-meta.is-green { color: var(--tx-success-ink); }

/* Audit timeline — vertical dots + connecting line */
.v2-tx-detail .v2-tx-timeline { display: flex; flex-direction: column; }
.v2-tx-detail .v2-tx-tl-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 8px 0; position: relative; }
.v2-tx-detail .v2-tx-tl-item:not(:last-child)::before { content: ''; position: absolute; left: 10.25px; top: 26px; bottom: 0; width: 1.5px; background: linear-gradient(180deg, var(--tx-border), var(--tx-divider)); }
.v2-tx-detail .v2-tx-tl-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tx-surface); border: 1.5px solid var(--tx-border); color: var(--tx-ink-3); z-index: 1; font-size: 11px; font-weight: 700; line-height: 1; }
.v2-tx-detail .v2-tx-tl-dot.is-done { background: var(--tx-success-soft); border-color: var(--tx-success-ink); color: var(--tx-success-ink); }
.v2-tx-detail .v2-tx-tl-dot.is-active { background: var(--tx-accent-soft); border-color: var(--tx-accent); color: var(--tx-accent); font-size: 7px; animation: v2-tx-pulse 1.8s ease-in-out infinite; }
@keyframes v2-tx-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(37,99,235,.18); } 50% { box-shadow: 0 0 0 6px rgba(37,99,235,.05); } }
.v2-tx-detail .v2-tx-tl-title { font-size: 12.5px; font-weight: 500; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-tl-title.is-muted { color: var(--tx-ink-3); font-weight: 400; }
.v2-tx-detail .v2-tx-tl-meta { font-size: 11px; color: var(--tx-ink-3); font-family: var(--tx-mono); margin-top: 1px; }

/* Action panel — grouped sticky-sidebar buttons */
.v2-tx-detail .v2-tx-act-group { font-size: 10px; color: var(--tx-ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: 14px 0 6px; }
.v2-tx-detail .v2-tx-act-group:first-child { margin-top: 0; }
.v2-tx-detail .v2-tx-danger-zone { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tx-divider); display: flex; gap: 6px; flex-wrap: wrap; }
.v2-tx-detail .v2-tx-danger-zone > .btn, .v2-tx-detail .v2-tx-danger-zone > * { flex: 1 1 auto; min-width: 80px; }

/* NPN-REMIT-VIEW-ACTIONS-OUTLINE (2026-06-02, UI-only): action-panel
   buttons render OUTLINE (transparent fill, tinted border + text) to match
   the Transaction Detail (Minimal) mockup, which ships btnfill:"outline".
   Hover fills with the soft tint. Colour map: blue = process/send,
   amber = hold, red = danger, green = confirm. */
.v2-tx-detail .v2-tx-btn-info-soft   { background: transparent; border-color: var(--tx-accent-bd);  color: var(--tx-accent-ink);  }
.v2-tx-detail .v2-tx-btn-info-soft:hover   { background: var(--tx-accent-soft); color: var(--tx-accent-ink); border-color: var(--tx-accent-bd); }
.v2-tx-detail .v2-tx-btn-warn-soft   { background: transparent; border-color: var(--tx-warning-bd); color: var(--tx-warning-ink); }
.v2-tx-detail .v2-tx-btn-warn-soft:hover   { background: var(--tx-warning-soft); color: var(--tx-warning-ink); border-color: var(--tx-warning-bd); }
.v2-tx-detail .v2-tx-btn-danger-soft { background: transparent; border-color: var(--tx-danger-bd);  color: var(--tx-danger-ink);  }
.v2-tx-detail .v2-tx-btn-danger-soft:hover { background: var(--tx-danger-soft); color: var(--tx-danger-ink); border-color: var(--tx-danger-bd); }
/* Send (primary) + Confirm (success) buttons are scoped to .v2-tx-actions so
   the global solid .btn-primary / .btn-success (comments submit, modals,
   other pages) keep their fills — only the action panel goes outline. */
.v2-tx-detail .v2-tx-actions .btn-primary { background: transparent; border-color: var(--tx-accent-bd); color: var(--tx-accent-ink); box-shadow: none; }
.v2-tx-detail .v2-tx-actions .btn-primary:hover, .v2-tx-detail .v2-tx-actions .btn-primary:focus-visible { background: var(--tx-accent-soft); border-color: var(--tx-accent-bd); color: var(--tx-accent-ink); }
.v2-tx-detail .v2-tx-actions .btn-success { background: transparent; border-color: var(--tx-success-bd); color: var(--tx-success-ink); }
.v2-tx-detail .v2-tx-actions .btn-success:hover, .v2-tx-detail .v2-tx-actions .btn-success:focus-visible { background: var(--tx-success-soft); border-color: var(--tx-success-bd); color: var(--tx-success-ink); }

/* PIN card — brand gradient */
.v2-tx-detail .v2-tx-pin-card { background: linear-gradient(180deg, var(--tx-accent-soft) 0%, #c8dcfd 100%); border: 1px solid var(--tx-accent-bd); border-radius: 8px; padding: 14px; }
.v2-tx-detail .v2-tx-pin-card .lbl { font-size: 10px; color: var(--tx-accent-ink); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.v2-tx-detail .v2-tx-pin-card .pin { font-family: var(--tx-mono); font-size: 20px; font-weight: 500; letter-spacing: .04em; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-pin-card .meta { color: var(--tx-ink-2); font-size: 11px; margin-top: 8px; }

/* Preflight banner — success state */
.v2-tx-detail .v2-tx-preflight { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--tx-success-soft); border: 1px solid var(--tx-success-bd); border-radius: 8px; color: var(--tx-success-ink); font-size: 12px; line-height: 1.5; margin-bottom: 16px; }
.v2-tx-detail .v2-tx-preflight.is-error { background: var(--tx-danger-soft); border-color: var(--tx-danger-bd); color: var(--tx-danger-ink); }
.v2-tx-detail .v2-tx-preflight b { font-weight: 600; }

/* IBAN copy widget */
.v2-tx-detail .v2-tx-iban { font-family: var(--tx-mono); font-size: 12.5px; background: var(--tx-sunken); border: 1px solid var(--tx-border); border-radius: 6px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-iban button { width: 22px; height: 22px; border-radius: 4px; border: 0; background: transparent; color: var(--tx-ink-3); display: grid; place-items: center; cursor: pointer; padding: 0; }
.v2-tx-detail .v2-tx-iban button:hover { background: #e7e7e5; color: var(--tx-ink-1); }

/* Empty docs state */
.v2-tx-detail .v2-tx-docs-empty { text-align: center; padding: 28px 16px; color: var(--tx-ink-3); font-size: 12.5px; }
.v2-tx-detail .v2-tx-docs-empty .ico { font-size: 22px; color: var(--tx-ink-4); display: block; margin-bottom: 6px; }

/* Comment thread */
.v2-tx-detail .v2-tx-comment { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.v2-tx-detail .v2-tx-comment .body { flex: 1; font-size: 12.5px; color: var(--tx-ink-1); }
.v2-tx-detail .v2-tx-comment .who { font-weight: 600; margin-right: 8px; font-size: 12px; }
.v2-tx-detail .v2-tx-comment .when { color: var(--tx-ink-3); font-size: 11px; }
.v2-tx-detail .v2-tx-comment .text { color: var(--tx-ink-2); margin-top: 2px; }

[data-theme="dark"] .card-header {
  background-color: #0e0d0d !important;
}
[data-theme="dark"] .list-group-item {
  background-color: #000 !important;
}
[data-theme="dark"] .accordion-button {
  background-color: #000;
}
.list-none {
  list-style: none;
  padding-left: 0;
}

iframe#msdoc-iframe {
  width: 100%;
  height: 100vh;
}

#react-doc-viewer #header-bar {
  background-color: #e9e8e8;
  float: left;
}
div#pdf-controls {
  float: right;
  width: auto;
}

div#pdf-pagination {
  width: 193px;
  float: left;
  margin: 0 8px 7px 0;
}

div#proxy-renderer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: auto;
}

button#pdf-pagination-prev {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
  float: left;
}

button#pdf-pagination-next {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
}

a#pdf-download {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
  float: left;
  margin: 0 7px 0 0;
}

button#pdf-zoom-out {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
  float: left;
  margin: 0 7px 0 0;
}

button#pdf-zoom-in {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
  float: left;
  margin: 0 7px 0 0;
}
button#pdf-zoom-reset {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
  float: left;
  margin: 0 7px 0 0;
}
button#pdf-toggle-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-radius: 35px;
  background-color: #fff;
  color: #000;
  box-shadow: 2px 2px 3px #00000033;
  width: 35px;
  height: 35px;
  font-size: 18px;
  float: left;
  margin: 0 7px 0 0;
}
.react-pdf__Document.sc-ftTHYK.ddzIeG {
  float: right;
}

.highlight-cal-date {
  color: rgb(29, 20, 146);
  font-weight: bold;
}

.react-calendar__month-view__days__day--weekend {
  color: #2361a8;
}

.tagify {
  min-width: 100%;
  height: auto;
}

/* ---------- Tagify as a "select-tag" box ----------
   Used by RemitterTagify / BeneficiaryTagify. Makes the tag input look
   like a native <select> (with a down-arrow on the right) while still
   rendering the current selection as a removable chip. */
.tagify.tagify--select-box {
  position: relative;
  padding-right: 2rem;                /* room for the arrow */
  min-height: calc(1.5em + 0.75rem + 2px);
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  cursor: text;
}
.tagify.tagify--select-box::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 0.6rem;
  height: 0.6rem;
  pointer-events: none;
  border-right: 2px solid #6c757d;
  border-bottom: 2px solid #6c757d;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.15s ease;
}
.tagify.tagify--select-box.tagify--focus::after {
  transform: translateY(-25%) rotate(-135deg);
}
.tagify.tagify--select-box .tagify__input {
  flex: 1;
  min-width: 4rem;
  padding: 0.25rem 0;
}
.tagify.tagify--select-box .tagify__input::before {
  color: #6c757d;                     /* placeholder color */
}
.tagify.tagify--select-box tag {
  --tag-bg: #e7f1ff;
  --tag-text-color: #084298;
  --tag-text-color--edit: #084298;
  --tag-hover: #d0e2ff;
  --tag-remove-bg: #d0e2ff;
  --tag-remove-btn-color: #084298;
  --tag-pad: 0.25rem 0.5rem;
  --tag-inset-shadow-size: 0;
  border-radius: 0.25rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
}

/* Rich dropdown row (two-line: title + meta) */
.tagify__dropdown__item__title {
  font-weight: 600;
  line-height: 1.2;
}
.tagify__dropdown__item__meta {
  font-size: 0.8125rem;
  color: #6c757d;
  line-height: 1.2;
  margin-top: 2px;
}
.tagify__dropdown__item[aria-selected="true"] .tagify__dropdown__item__meta,
.tagify__dropdown__item--active .tagify__dropdown__item__meta {
  color: #e7eaed;
}


button.btn.btn-reject {
  background: linear-gradient(to bottom,  #f48440 0%,#f57c2c 47%,#e86e1a 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
      color: #fff;
      border-color: #f48138;
  }
  button.btn.btn-reject:hover {
  background: linear-gradient(to bottom,  #e86e1a 0%,#f57c2c 53%,#f48440 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
          color: #fff;
  border-color: #f48138;
  }
  
  
  button.btn.btn-delete
  {
  background-color:#ff0000;    
  color: #fff;
  border-color: #ff0000; 
  }
  button.btn.btn-cancel
  {
      background-color:#00b0f0;    
      color: #fff;
      border-color: #00b0f0;   
  }
  button.btn.btn-refund
  {
      background-color:#548235;    
      color: #fff;
      border-color: #548235; 
  }
  button.btn.btn-error
  {
  background: linear-gradient(to bottom,  #ababab 0%,#a3a3a3 47%,#979797 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
      color: #fff;
      border-color: #acacac;   
  }
  button.btn.btn-error:hover
  {
      background: linear-gradient(to bottom,  #979797 0%,#a3a3a3 53%,#ababab 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
      color: #fff;
      border-color: #acacac;   
  }

  .slim-dropdown {
    padding: 5px 30px 5px 10px; /* Add right padding to accommodate the arrow */
    border-width: 1px;
    width: 100%; /* Responsive width to fill container */
    font-size: 14px; /* Adjust font size as needed */
    line-height: 1.2; /* Adjust line height as needed */
    -webkit-appearance: none; /* Remove default styling in WebKit browsers */
    -moz-appearance: none; /* Remove default styling in Firefox */
    appearance: none; /* Remove default styling in other browsers */
    background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDE1LjI5TDEuNzEgNWgxLjQybDguODcgOC44N2w4Ljg3LTguODdoMS40MkwxMiAxNS4yOXoiLz48L3N2Zz4=') no-repeat right 10px center;
    background-size: 12px 12px;
  }
  
  .slim-dropdown option {
    padding: 5px;
    font-size: 14px; /* Adjust font size as needed */
  }
  
  ul.preset-list {
    padding: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}
ul.preset-list li {
    width: 33.3%;
    float: left;
    margin-bottom:5px;
}

/* NOB-6: Prevent text cropping at bottom of table cells */
.table td, .table th {
  vertical-align: middle;
  overflow: visible;
}
.table-responsive {
  overflow-x: auto;
  overflow-y: visible;
}

/* NOB-68: Ensure currency table text has sufficient contrast */
.table-light th,
.table-light td {
  color: #212529;
}

/* Dark / tinted table rows — global .table tbody td { color: !important } must be overridden */
.table tbody tr.table-dark > td,
.table tbody tr.table-dark > td strong,
.table tbody tr.table-dark > td small,
.table tbody tr.table-dark > td li {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Loyalty tiers — Platinum: light slate row (readable with theme table cell rules) */
.loyalty-tier-platinum > td {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
  border-bottom-color: #cbd5e1 !important;
}

.loyalty-tier-platinum > td strong,
.loyalty-tier-platinum > td small,
.loyalty-tier-platinum > td li {
  color: #1e293b !important;
}

/* ============================================================
   NOBLE PAY — Apple-Inspired Professional Theme
   Clean, minimal, banking-grade UI
   ============================================================ */

/* --- 1. TYPOGRAPHY: Inter (Apple SF Pro equivalent) --- */
body,
html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #1d1d1f;
  background-color: #f5f5f7;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}

h1, .h1 { font-size: 1.75rem; font-weight: 700; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; text-transform: none; }

p, span, li, td, th, label, input, select, textarea, a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.text-muted {
  color: #86868b !important;
}

a {
  color: #0071e3;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: #0058b0;
}

/* --- 2. CONTENT AREA --- */
.app-content-area {
  background-color: #f5f5f7;
}

.container-fluid {
  max-width: 100%;
}

/* --- 3. CARDS: Elevated, clean, Apple-style --- */
.card {
  border: none !important;
  border-radius: 12px !important;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.card-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f0f0f2 !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600;
}

.card-body {
  padding: 1.25rem !important;
}

.card-footer {
  background-color: #fafafa !important;
  border-top: 1px solid #f0f0f2 !important;
}

.card-title {
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.25rem;
}

.card-subtitle {
  color: #86868b;
  font-weight: 400;
  font-size: 0.8rem;
}

/* --- 4. BUTTONS: Refined, Apple-style --- */
.btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500;
  border-radius: 8px !important;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
  border: none;
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px !important;
}

.btn-primary {
  background-color: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #0058b0 !important;
  border-color: #0058b0 !important;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3) !important;
}

.btn-outline-primary {
  color: #0071e3 !important;
  border: 1.5px solid #0071e3 !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background-color: #0071e3 !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: #6e6e73 !important;
  border: 1.5px solid #d2d2d7 !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background-color: #f5f5f7 !important;
  border-color: #86868b !important;
  color: #1d1d1f !important;
}

.btn-success {
  background-color: #30d158 !important;
  border-color: #30d158 !important;
}
.btn-success:hover {
  background-color: #28b74b !important;
}

.btn-danger {
  background-color: #ff3b30 !important;
  border-color: #ff3b30 !important;
}
.btn-danger:hover {
  background-color: #d63029 !important;
}

.btn-warning {
  background-color: #ff9f0a !important;
  border-color: #ff9f0a !important;
  color: #fff !important;
}

.btn-info {
  background-color: #5ac8fa !important;
  border-color: #5ac8fa !important;
  color: #fff !important;
}

.btn-outline-success {
  color: #30d158 !important;
  border: 1.5px solid #30d158 !important;
}
.btn-outline-danger {
  color: #ff3b30 !important;
  border: 1.5px solid #ff3b30 !important;
}
.btn-outline-warning {
  color: #ff9f0a !important;
  border: 1.5px solid #ff9f0a !important;
}
.btn-outline-info {
  color: #5ac8fa !important;
  border: 1.5px solid #5ac8fa !important;
}

.btn-ghost {
  background: transparent !important;
  border: none !important;
  color: #1d1d1f !important;
}
.btn-ghost:hover {
  background-color: #f5f5f7 !important;
}

/* NPN-224 + NPN-232: icon-only action buttons used across listing pages */
.btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1;
}
.btn-icon svg,
.btn-icon i {
  width: 16px;
  height: 16px;
}

/* --- 5. TABLES: Clean, breathable --- */
.table {
  font-size: 0.85rem;
  color: #1d1d1f;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: #fafafa !important;
  border-bottom: 2px solid #e8e8ed !important;
  color: #6e6e73;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem !important;
  white-space: nowrap;
}

.table-light {
  --bs-table-bg: #fafafa !important;
}

.table tbody td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #f0f0f2 !important;
  border-top: none !important;
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: #f5f5f7 !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: transparent;
  --bs-table-accent-bg: #f5f5f7;
}

.table-responsive {
  border-radius: 8px;
}

/* --- 6. BADGES: Soft pastel, pill-shaped --- */
.badge {
  font-weight: 500 !important;
  font-size: 0.73rem !important;
  padding: 0.35em 0.7em !important;
  border-radius: 6px !important;
  letter-spacing: 0;
}

.badge.bg-success,
.bg-success {
  background-color: #e8faf0 !important;
  color: #1a7d3f !important;
}

.badge.bg-danger,
.bg-danger:not(.btn):not(.alert):not(.btn-danger) {
  background-color: #fef0ef !important;
  color: #c5221f !important;
}

.badge.bg-warning,
.bg-warning:not(.btn):not(.alert):not(.btn-warning) {
  background-color: #fff8e6 !important;
  color: #a66d00 !important;
}

.badge.bg-info,
.bg-info:not(.btn):not(.alert):not(.btn-info) {
  background-color: #eef6ff !important;
  color: #1a6dcc !important;
}

.badge.bg-secondary,
.bg-secondary:not(.btn):not(.alert):not(.btn-secondary) {
  background-color: #f0f0f2 !important;
  color: #6e6e73 !important;
}

.badge.bg-primary {
  background-color: #e8f0fe !important;
  color: #0058b0 !important;
}

.badge.bg-dark {
  background-color: #1d1d1f !important;
  color: #fff !important;
}

/* --- 7. FORMS: Clean, refined inputs --- */
.form-control,
.form-select {
  font-family: 'Inter', -apple-system, sans-serif !important;
  border: 1.5px solid #d2d2d7 !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.875rem !important;
  color: #1d1d1f !important;
  background-color: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12) !important;
  outline: none;
}

.form-control::placeholder {
  color: #aeaeb2 !important;
}

/* Leading icon inside position-relative wrapper (e.g. report filter search) */
.form-control.has-icon-start {
  padding-left: 2.75rem !important;
}

.form-label {
  font-weight: 500;
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.35rem;
}

.form-check-input:checked {
  background-color: #0071e3 !important;
  border-color: #0071e3 !important;
}

.input-group-text {
  background-color: #f5f5f7 !important;
  border: 1.5px solid #d2d2d7 !important;
  border-radius: 8px 0 0 8px !important;
  color: #6e6e73;
  font-size: 0.875rem;
}

/* --- 8. SIDEBAR: Clean, professional --- */
.navbar-vertical {
  background-color: #ffffff !important;
  border-right: 1px solid #e8e8ed !important;
  box-shadow: none !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link {
  color: #424245 !important;
  font-size: 0.83rem !important;
  font-weight: 450 !important;
  padding: 0.45rem 1rem !important;
  border-radius: 8px !important;
  margin: 1px 0.6rem !important;
  transition: all 0.15s ease;
}

.navbar-vertical .navbar-nav .nav-item .nav-link:hover {
  background-color: #f5f5f7 !important;
  color: #1d1d1f !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active {
  background-color: #e8f0fe !important;
  color: #0058b0 !important;
  font-weight: 500 !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link .nav-icon,
.navbar-vertical .nav-icon {
  color: #86868b !important;
  opacity: 0.8;
  width: 16px !important;
  height: 16px !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active .nav-icon {
  color: #0058b0 !important;
  opacity: 1;
}

/* Sidebar section dividers */
.navbar-vertical .nav-item > div[style*="text-transform"] span,
.navbar-vertical .nav-item > div span.text-uppercase {
  color: #aeaeb2 !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* Sidebar sub-menus */
.navbar-vertical .collapse .nav .nav-link {
  font-size: 0.8rem !important;
  padding: 0.35rem 1rem 0.35rem 2.5rem !important;
  color: #6e6e73 !important;
  font-weight: 400 !important;
}

.navbar-vertical .collapse .nav .nav-link:hover {
  color: #1d1d1f !important;
  background-color: #f5f5f7 !important;
}

.navbar-vertical .collapse .nav .nav-link.active {
  color: #0058b0 !important;
  background-color: #e8f0fe !important;
  font-weight: 500 !important;
}

/* Sidebar arrow icons */
.navbar-vertical .has-arrow::after {
  color: #aeaeb2 !important;
}

/* Sidebar brand */
.navbar-vertical .navbar-brand img {
  max-height: 36px;
}

/* --- 9. TOP NAVBAR: Clean header --- */
.header .navbar-custom,
.header .navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e8e8ed !important;
  box-shadow: none !important;
}

.header .navbar .form-control {
  background-color: #f5f5f7 !important;
  border: 1px solid #e8e8ed !important;
  border-radius: 8px !important;
  font-size: 0.85rem;
}

.header .navbar .form-control:focus {
  background-color: #fff !important;
  border-color: #0071e3 !important;
}

/* --- 10. TABS: Refined tabs --- */
.nav-tabs {
  border-bottom: 2px solid #e8e8ed !important;
}

.nav-tabs .nav-link {
  color: #6e6e73 !important;
  font-weight: 500;
  font-size: 0.85rem;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 0.65rem 1rem;
  margin-bottom: -2px;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  color: #1d1d1f !important;
  border-bottom-color: #d2d2d7 !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #0071e3 !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid #0071e3 !important;
}

/* --- 11. DROPDOWN MENUS --- */
.dropdown-menu {
  border: 1px solid #e8e8ed !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 0.4rem !important;
}

.dropdown-item {
  border-radius: 6px !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.85rem;
  color: #1d1d1f;
  transition: background 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5f5f7 !important;
  color: #1d1d1f;
}

/* --- 12. ALERTS & NOTIFICATIONS --- */
.alert {
  border: none !important;
  border-radius: 10px !important;
  font-size: 0.85rem;
  padding: 0.85rem 1.15rem;
}

.alert-success {
  background-color: #e8faf0 !important;
  color: #1a7d3f !important;
}

.alert-danger {
  background-color: #fef0ef !important;
  color: #c5221f !important;
}

.alert-warning {
  background-color: #fff8e6 !important;
  color: #a66d00 !important;
}

.alert-info {
  background-color: #eef6ff !important;
  color: #1a6dcc !important;
}

/* --- 13. PAGINATION --- */
.page-link {
  border: 1px solid #e8e8ed !important;
  border-radius: 6px !important;
  color: #424245 !important;
  font-size: 0.85rem;
  margin: 0 2px;
  padding: 0.4rem 0.75rem;
}

.page-item.active .page-link {
  background-color: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #fff !important;
}

.page-link:hover {
  background-color: #f5f5f7 !important;
}

/* --- 14. MODALS --- */
.modal-content {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

.modal-header {
  border-bottom: 1px solid #f0f0f2 !important;
  padding: 1.25rem !important;
}

.modal-footer {
  border-top: 1px solid #f0f0f2 !important;
  padding: 1rem 1.25rem !important;
}

/* --- 15. PROGRESS BARS --- */
.progress {
  height: 6px !important;
  border-radius: 3px !important;
  background-color: #f0f0f2 !important;
}

.progress-bar {
  border-radius: 3px !important;
  background-color: #0071e3 !important;
}

/* --- 16. LIST GROUPS --- */
.list-group-item {
  border-color: #f0f0f2 !important;
  padding: 0.85rem 1.15rem;
  font-size: 0.85rem;
}

.list-group-item:first-child {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.list-group-item:last-child {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* --- 17. SCROLLBAR STYLING --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d2d2d7;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aeaeb2;
}

/* --- 18. KPI / STAT CARDS --- */
.card .card-body h3,
.card .card-body .h3 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- 19. BREADCRUMBS --- */
.breadcrumb {
  font-size: 0.8rem;
  background: transparent;
  padding: 0;
}

.breadcrumb-item a {
  color: #86868b;
}

.breadcrumb-item.active {
  color: #1d1d1f;
}

/* --- 20. MISC REFINEMENTS --- */
hr {
  border-color: #e8e8ed;
  opacity: 1;
}

.border {
  border-color: #e8e8ed !important;
}

.border-bottom {
  border-bottom-color: #e8e8ed !important;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

.shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.rounded {
  border-radius: 10px !important;
}

/* Utility: stat text colors (Apple palette) */
.text-success { color: #30d158 !important; }
.text-danger { color: #ff3b30 !important; }
.text-warning { color: #ff9f0a !important; }
.text-info { color: #5ac8fa !important; }
.text-primary { color: #0071e3 !important; }

/* Smooth page transitions */
.app-content-area {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0.92; }
  to { opacity: 1; }
}

/* --- 21. BTN-GROUP REFINEMENT --- */
.btn-group .btn {
  border-radius: 0 !important;
}
.btn-group .btn:first-child {
  border-radius: 8px 0 0 8px !important;
}
.btn-group .btn:last-child {
  border-radius: 0 8px 8px 0 !important;
}

.btn-group-sm .btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
}

/* ============================================================
   PHASE 2: STRUCTURAL OVERHAUL — Layout, spacing, depth
   These override the DashUI template structure itself
   ============================================================ */

/* --- SIDEBAR: Fixed 260px to align flush with header --- */
.navbar-vertical.navbar {
  width: 260px !important;
  max-width: 260px !important;
  min-width: 260px !important;
  background: #fbfbfd !important;
  border-right: 1px solid #e8e8ed !important;
  padding-top: 0 !important;
}

#app-content {
  margin-left: 260px !important;
}

.app-content-area {
  background: #f5f5f7 !important;
  min-height: 100vh;
}

/* Sidebar brand/logo area */
.navbar-vertical .navbar-brand {
  padding: 20px 20px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e8e8ed;
}

.navbar-vertical .navbar-brand img {
  max-height: 32px !important;
  opacity: 0.9;
}

/* Sidebar nav items — more Apple-like */
.navbar-vertical .navbar-nav {
  padding: 8px 10px !important;
}

.navbar-vertical .navbar-nav .nav-item {
  margin-bottom: 0 !important;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link {
  color: #48484a !important;
  font-size: 0.82rem !important;
  font-weight: 450 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  margin: 1px 0 !important;
  transition: all 0.15s ease !important;
  line-height: 1.5 !important;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #1d1d1f !important;
}

.navbar-vertical .navbar-nav > .nav-item > .nav-link.active,
.navbar-vertical .navbar-nav > .nav-item > a.active {
  background-color: rgba(0, 113, 227, 0.08) !important;
  color: #0058b0 !important;
  font-weight: 550 !important;
}

/* Sidebar icons — lighter, smaller */
.navbar-vertical .nav-link .nav-icon,
.navbar-vertical .nav-link i,
.navbar-vertical .nav-link svg:not(.feather) {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6;
  margin-right: 10px !important;
}

.navbar-vertical .nav-link.active .nav-icon,
.navbar-vertical .nav-link.active i {
  opacity: 0.9;
  color: #0058b0 !important;
}

/* Sidebar sub-nav — tighter, cleaner */
.navbar-vertical .collapse .nav {
  padding-left: 0 !important;
}

.navbar-vertical .collapse .nav .nav-item .nav-link {
  font-size: 0.79rem !important;
  padding: 5px 12px 5px 38px !important;
  color: #6e6e73 !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

.navbar-vertical .collapse .nav .nav-item .nav-link:hover {
  color: #1d1d1f !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

.navbar-vertical .collapse .nav .nav-item .nav-link.active {
  color: #0058b0 !important;
  background: rgba(0, 113, 227, 0.06) !important;
  font-weight: 500 !important;
}

/* Sidebar section dividers — refined */
.navbar-vertical .nav-item > div[style] {
  padding: 16px 12px 4px !important;
  margin-top: 4px !important;
}

.navbar-vertical .nav-item > div[style] span {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  color: #aeaeb2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Sidebar collapse arrow */
.navbar-vertical .has-arrow::after,
.navbar-vertical a[aria-expanded]::after {
  font-size: 0.6rem;
  opacity: 0.4;
  transition: transform 0.2s ease;
}

/* --- TOP HEADER: Minimal, clean --- */
.header {
  height: 60px !important;
  z-index: 1000;
}

.header .navbar,
.header .navbar-custom {
  left: 260px !important;
  height: 60px !important;
  padding: 0 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e8e8ed !important;
  box-shadow: none !important;
}

.header .navbar-custom .container-fluid {
  height: 100%;
  align-items: center;
}

/* Search bar in header — pill shaped */
.header .input-group {
  max-width: 320px;
}

.header .input-group .form-control {
  background: #f0f0f2 !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 0.82rem !important;
  height: 36px !important;
}

.header .input-group .form-control:focus {
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15) !important;
}

.header .input-group .input-group-append,
.header .input-group .btn {
  display: none !important;
}

/* Header notification/user icons */
.header .navbar-nav .nav-link,
.header .navbar-right-wrap .nav-link {
  padding: 6px 10px !important;
}

.header .btn-ghost {
  width: 36px !important;
  height: 36px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header .btn-ghost:hover {
  background: #f0f0f2 !important;
}

/* --- CONTENT AREA: More breathing room --- */

/* KPI row spacing */
.row.mb-4,
.row.g-3.mb-4 {
  margin-bottom: 1.5rem !important;
}

.row .col-md-3 .card,
.row .col-xl-3 .card,
.row .col-md-4 .card {
  min-height: auto;
}

/* Cards gap — use Bootstrap defaults */

/* Page headings */
.app-content-area h2,
.app-content-area .h2 {
  font-size: 1.4rem !important;
  font-weight: 650 !important;
  margin-bottom: 0 !important;
}

.app-content-area h4,
.app-content-area .h4 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* --- CARD ENHANCEMENTS: More depth --- */
.card {
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 16px;
}

.card .card-header {
  padding: 14px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid #f0f0f2 !important;
}

.card .card-header h5,
.card .card-header .h5 {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
}

.card .card-body {
  padding: 16px 20px !important;
}

/* KPI stat number styling */
.card .card-body h3.mb-0,
.card .card-body .h3.mb-0,
.card .card-body h3.card-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #1d1d1f !important;
}

/* Muted subtitle under stats */
.card .card-body h6.text-muted,
.card .card-body .card-subtitle {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #8e8e93 !important;
  margin-bottom: 6px !important;
}

/* --- TABLE ENHANCEMENTS --- */
.card .card-body.p-0 .table,
.card > .table,
.card .table-responsive .table {
  margin-bottom: 0 !important;
}

.table thead th {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #8e8e93 !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #e8e8ed !important;
  background: #fafafa !important;
  white-space: nowrap !important;
}

.table tbody td {
  font-size: 0.82rem !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #f5f5f7 !important;
  color: #1d1d1f !important;
}

.table tbody td strong {
  font-weight: 600;
}

.table tbody td small {
  color: #8e8e93;
  font-size: 0.78rem;
}

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

.table-hover tbody tr:hover td {
  background: #f8f8fa !important;
}

/* --- BUTTON GROUP in card headers (All/Pending/etc filter buttons) --- */
.card-header .btn-group .btn {
  font-size: 0.75rem !important;
  padding: 4px 12px !important;
  font-weight: 500;
  border: 1px solid #d2d2d7 !important;
  background: #fff !important;
  color: #6e6e73 !important;
}

.card-header .btn-group .btn.active,
.card-header .btn-group .btn:active {
  background: #0071e3 !important;
  border-color: #0071e3 !important;
  color: #fff !important;
}

/* --- RESPONSIVE: Laptop screens (1200-1440px) --- */
@media (max-width: 1440px) {
  /* Tables: ensure horizontal scroll */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- RESPONSIVE: Tablet / small laptop (992-1199px) --- */
@media (max-width: 1199px) {
  #app-content {
    margin-left: 0 !important;
  }

  .header .navbar,
  .header .navbar-custom {
    left: 0 !important;
  }

  .app-content-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- RESPONSIVE: Mobile (768px and below) --- */
@media (max-width: 768px) {
  .app-content-area {
    padding: 70px 10px 20px !important;
  }

  #app-content {
    padding-top: 56px !important;
  }

  .header .navbar-custom {
    padding: 0 10px !important;
  }

  /* Tables: smaller text on mobile */
  .table tbody td,
  .table thead th {
    font-size: 0.82rem;
  }
}

/* --- RESPONSIVE: Small mobile (479px and below) --- */
@media (max-width: 479px) {
  .app-content-area {
    padding: 64px 8px 16px !important;
  }
}

/* --- RESPONSIVE: Print --- */
@media print {
  .navbar-vertical,
  .app-menu,
  .header,
  .btn,
  .main-wrapper::after {
    display: none !important;
  }

  #app-content,
  .app-content-area {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}

/* --- AVATAR: initials style --- */
.avatar-indicators.avatar-online::before {
  display: none !important;
}

.avatar .rounded-circle {
  border: none !important;
}

/* --- MISC POLISH --- */
/* Remove old-style gradients from action buttons */
button.btn.btn-reject,
button.btn.btn-reject:hover {
  background: #ff9f0a !important;
  border-color: #ff9f0a !important;
  border-radius: 8px !important;
}

button.btn.btn-delete {
  background: #ff3b30 !important;
  border-color: #ff3b30 !important;
  border-radius: 8px !important;
}

button.btn.btn-cancel {
  background: #5ac8fa !important;
  border-color: #5ac8fa !important;
  border-radius: 8px !important;
}

button.btn.btn-refund {
  background: #30d158 !important;
  border-color: #30d158 !important;
  border-radius: 8px !important;
}

button.btn.btn-error,
button.btn.btn-error:hover {
  background: #8e8e93 !important;
  border-color: #8e8e93 !important;
  border-radius: 8px !important;
}

/* Nav tabs override — less aggressive */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: transparent !important;
  border-color: transparent !important;
  border-bottom: 2px solid #0071e3 !important;
  color: #0071e3 !important;
}

/* Feather icon sizing consistency */
[data-feather],
.feather {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Simplebar styling */
.simplebar-scrollbar::before {
  background: #d2d2d7 !important;
  border-radius: 3px !important;
}

/* Remove any remaining box shadows from the template */
.main-wrapper .header {
  box-shadow: none !important;
}

/* Content area top spacing after header — use template default */

/* --- 21b. PAYOUT MODULE — force light cards/tables (any global theme) --- */
.payout-module-light {
  --v2-page:              #f5f7fa;
  --v2-card:                #ffffff;
  --v2-card-header:         #ffffff;
  --v2-border:              #e9ecef;
  --v2-text:                #111827;
  --v2-sub:                 #6c757d;
  --v2-faint:               #9ca3af;
  --v2-input:               #ffffff;
  --v2-input-bdr:           #dee2e6;
  --v2-muted:               #f8f9fa;
  --v2-divider:             #e9ecef;
  --dashui-card-background: #ffffff;
  --dashui-card-cap-bg:     #ffffff;
  --dashui-body-bg:         #f5f7fa;
  --bs-card-bg:             #ffffff;
}

.payout-module-light .card,
.payout-module-light .v2-card,
.payout-module-light .v2-kpi-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e9ecef !important;
  color: #111827 !important;
}

.payout-module-light .card-body,
.payout-module-light .card-header,
.payout-module-light .card-footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1d1d1f !important;
  border-color: #e9ecef !important;
}

.payout-module-light .table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #1d1d1f;
  --bs-table-hover-bg: #f5f5f7;
  color: #1d1d1f !important;
  background-color: #ffffff !important;
}

.payout-module-light .table thead th,
.payout-module-light .table-light th,
.payout-module-light .table-light td {
  background-color: #fafafa !important;
  color: #6e6e73 !important;
}

.payout-module-light .table tbody td {
  background-color: #ffffff !important;
  color: #1d1d1f !important;
}

.payout-module-light .v2-table thead th {
  background: #f8f9fa !important;
  color: #6c757d !important;
}

.payout-module-light .v2-table tbody td {
  background: #ffffff !important;
  color: #111827 !important;
}

/* --- 22. RESPONSIVE TABLE OVERFLOW FIX --- */
/* Ensure all tables in cards are scrollable on smaller screens */
.card .table-responsive,
.card .table-card {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Ensure table containers scroll horizontally */
.card .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* --- END APPLE THEME --- */

/* ── DataTables length select: fix arrow overlapping number ── */
div.dt-length select,
div.dataTables_length select,
.dataTables_wrapper .dataTables_length select {
  padding-right: 2rem !important;
  min-width: 4.5rem;
  background-position: right 0.5rem center !important;
}

/* ── Light tooltip (off-white, used by TruncateTooltip component) ── */
.tooltip-light .tooltip-inner {
  background-color: #f8f9fa;
  color: #343a40;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 0.8125rem;
}
.tooltip-light.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #dee2e6;
}
.tooltip-light.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #dee2e6;
}
.tooltip-light.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #dee2e6;
}
.tooltip-light.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #dee2e6;
}