/* ==========================================================================
   Lato webfont — self-hosted (was fonts.googleapis.com + fonts.gstatic.com).
   --------------------------------------------------------------------------
   Serving the font from our own origin removes two third-party DNS lookups and
   two TLS handshakes from the critical path of every full page load. The files
   are byte-identical to what the Google CSS pointed at (Lato v25, woff2).
   Declared here rather than in a separate stylesheet so the panel does not pay
   for an extra request: legacy.css is already loaded by every view that used
   the Google link. The ?v= query puts each file on the immutable branch of
   setStaticCacheHeaders (app.js) — bump it only if the font files change.
   ========================================================================== */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-300-latin-ext.woff2?v=20260815-1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-300-latin.woff2?v=20260815-1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-400-latin-ext.woff2?v=20260815-1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-400-latin.woff2?v=20260815-1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-700-latin-ext.woff2?v=20260815-1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-700-latin.woff2?v=20260815-1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Legacy Admin Skin (v2 project) — app_agent
   --------------------------------------------------------------------------
   Hand-ported plain CSS for the legacy skin (boiji_admin pixel-copy, LIGHT).
   Loaded by views/legacy/layouts/header.ejs.

   Theme: LIGHT (BS4-alpha defaults, sample dari the reference admin panel 2026-05-09).
   Source SCSS: /apps/sourcecode/toupgrade/total123/boiji_admin/imports/ui/stylesheets/default/
     - base.scss, header.scss, card.scss, form.scss, table.scss, modal.scss

   ZERO dark mode. ZERO improvisation. Override BS5 defaults to match BS4-alpha
   spacing/border-radius where boiji depends on the older defaults.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme tokens (LIGHT)
   -------------------------------------------------------------------------- */
:root {
  --legacy-bg-page:             #ffffff;
  --legacy-bg-card:             #ffffff;
  --legacy-bg-topbar:           #f7f7f9; /* BS4 .bg-faded */
  --legacy-bg-sidebar:          #eeeeee; /* boiji base.scss line 107 */
  --legacy-bg-sidebar-collapse: #fafafa; /* boiji base.scss line 111 */
  --legacy-text:                #373a3c; /* BS4-alpha body color */
  --legacy-text-muted:          #818a91; /* BS4-alpha default; .text-muted overridden below to #ccc per boiji */
  --legacy-text-input:          #55595c;
  --legacy-primary:             #0275d8; /* BS4-alpha primary */
  --legacy-border-card:         rgba(0,0,0,0.125);
  --legacy-border-input:        rgba(0,0,0,0.15);
  --legacy-success:             #5cb85c;
  --legacy-danger:              #d9534f;
  --legacy-warning:             #f0ad4e;
  --legacy-info:                #5bc0de;
}

/* --------------------------------------------------------------------------
   base.scss port — body, scrollbar, typography
   -------------------------------------------------------------------------- */
body.legacy-skin {
  font-family: 'Lato', sans-serif;
  background-color: var(--legacy-bg-page);
  color: var(--legacy-text);
  margin: 0;
  padding: 0;
}

/* webkit scrollbar (boiji base.scss lines 5-16) */
.legacy-skin ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.legacy-skin ::-webkit-scrollbar-thumb {
  background: rgba(220, 220, 220, 0.8);
}
.legacy-skin ::-webkit-scrollbar-track {
  background-color: #f7f7f9;
}

.legacy-skin a:link,
.legacy-skin a:visited,
.legacy-skin a:active {
  text-decoration: none;
}

.legacy-skin i.fa {
  position: relative;
}
.legacy-skin i.fa-mr {
  margin-right: 6px;
}

.legacy-skin .container {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.legacy-skin .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

/* --------------------------------------------------------------------------
   Topbar (navbar) — boiji base.scss + app-header.html
   -------------------------------------------------------------------------- */
.legacy-skin .navbar {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
  border-radius: 0;
}
/* BS4-alpha .navbar-fixed-top → BS5 .fixed-top. Polyfill for boiji parity. */
.legacy-skin .navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* boiji topbar = .navbar.navbar-light.bg-faded (BS4-alpha). Light grey.       */
/* BS5 .navbar is already display:flex with align-items:center — no override   */
/* needed. justify-content:space-between was removed because DOM order now      */
/* drives positioning (brand first → left, ms-auto user group → right).        */
.legacy-skin .navbar.bg-faded {
  background-color: var(--legacy-bg-topbar);
  color: var(--legacy-text);
  /* boiji uses .navbar-fixed-top — BS5 = .fixed-top */
  padding: 0.5rem 1rem;
}
.legacy-skin .navbar.bg-faded .navbar-brand {
  color: var(--legacy-text);
  font-size: 1.25rem;
  font-weight: 500;
}
.legacy-skin .navbar.bg-faded .navbar-brand a {
  color: var(--legacy-text);
}
.legacy-skin .navbar.bg-faded .float-end .btn-group .btn {
  /* keep secondary button styling, no override */
}

/* boiji domain banner pill (app-header.html line 40) */
.legacy-skin .topbar-domain-pill {
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: 2px 16px;
  font-size: 12px;
  background-color: #666666;
  color: white;
  z-index: 2000;
}

/* sidebar toggle arrow in topbar — boiji app-header.html line 29-37         */
/* margin-top/float removed — parent div now uses flexbox so alignment is     */
/* handled by align-items:center, no manual offset needed.                    */
.legacy-skin .topbar-sidebar-toggle {
  font-size: 1.5rem;
  color: var(--legacy-text);
  line-height: 1;
}
.legacy-skin .topbar-sidebar-toggle a {
  color: var(--legacy-text);
}
.legacy-skin .topbar-sidebar-toggle:hover,
.legacy-skin .topbar-sidebar-toggle a:hover {
  color: var(--legacy-primary);
}

/* ISSUE 17: Quick Menu — compact icon-button row filling the topbar's middle    */
/* gap between the brand (left, flex-first) and the user/Signout group (right,  */
/* ms-auto). Sits inline between the two existing flex children, so no extra    */
/* positioning rules are needed beyond spacing/hover — flexbox does the rest.   */
/* Divider + left margin keep the quick menu visually separate from the
   sidebar-toggle arrow immediately before it (operator feedback: they collided). */
.legacy-skin .navbar.fixed-top {
  flex-wrap: nowrap;
}
.legacy-skin .navbar.fixed-top > .ms-auto {
  flex: 0 0 auto;
}
.legacy-skin .topbar-quick-menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.3rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.legacy-skin .topbar-quick-menu::-webkit-scrollbar {
  display: none;
}
/* Labeled pill (icon + short text) instead of an ambiguous icon-only square. */
.legacy-skin .topbar-quick-menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--legacy-text);
  border-radius: 0.25rem;
  white-space: nowrap;
}
.legacy-skin .topbar-quick-menu-item .qm-label {
  font-size: 0.78rem;
  font-weight: 600;
}
.legacy-skin .topbar-quick-menu-item:hover {
  color: var(--legacy-primary);
  background-color: rgba(0, 0, 0, 0.05);
}
/* Count badge overlaid on the pill's top-right corner. */
.legacy-skin .topbar-quick-menu-item .quick-menu-badge {
  position: absolute;
  top: 0;
  right: -0.1rem;
  font-size: 0.6rem;
  padding: 0.15em 0.4em;
  min-width: 1.1rem;
}

/* --------------------------------------------------------------------------
   Sidebar — boiji base.scss lines 96-149
   -------------------------------------------------------------------------- */
.legacy-skin #sidebar {
  position: fixed;
  top: 55px; /* below topbar — aligns with topbar height (~55px) */
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding-bottom: 2em;
  width: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--legacy-bg-sidebar);
  border-right: 1px solid #eee;
}

.legacy-skin #sidebar .menu-collapse {
  background-color: var(--legacy-bg-sidebar-collapse);
  border-top: solid 2px white;
  border-bottom: solid 2px white;
  padding: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.legacy-skin #sidebar .menu-collapse a {
  width: 100%;
  text-align: left;
}
.legacy-skin #sidebar .menu-collapse ul {
  margin-top: 8px;
  list-style: none;
  padding-left: 0;
}
.legacy-skin #sidebar .menu-collapse ul li span.tag-pill {
  position: relative;
  bottom: 1px;
}
.legacy-skin #sidebar .menu-collapse .hidden {
  display: none;
}

/* boiji uses .nav.nav-pills.nav-stacked.nav-sidebar */
/* BS5 dropped .nav-stacked (BS4-alpha class that forced flex-direction:column).
   Without this override, BS5 .nav renders flex-direction:row (horizontal wrap),
   causing sidebar items to appear on the SAME line instead of separate lines.
   Restore stacked vertical layout to match boiji sidebar behavior exactly. */
.legacy-skin .nav-stacked {
  flex-direction: column;
}

/* Boiji base.scss does NOT override .nav-link color → BS4-alpha default = #0275d8 (link blue). */
/* Previous value (--legacy-text dark grey) was wrong: rendered grey vs boiji's blue links. */
.legacy-skin .nav-pills .nav-link {
  padding: 0.25em 0.5em;
  color: var(--legacy-primary);
  border-radius: 0.25rem;
}
.legacy-skin .nav-pills .nav-link:hover {
  background-color: rgba(2, 117, 216, 0.08);
  color: var(--legacy-primary);
  text-decoration: underline; /* boiji BS4-alpha default link hover */
}
.legacy-skin .nav-pills .nav-link.active {
  background-color: var(--legacy-primary);
  color: #ffffff;
}

.legacy-skin #sidebar .nav-item .nav-link i {
  width: 24px;
  font-size: 18px;
}

.legacy-skin #sidebar h6 {
  padding-left: 32px;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: var(--legacy-text);
}

.legacy-skin #sidebar hr {
  margin: 0.5rem 0;
  border-color: rgba(0, 0, 0, 0.1);
}

.legacy-skin #sidebar .small {
  font-size: 0.8rem;
}

.legacy-skin #sidebar .text-xs-center {
  text-align: center;
}

/* sidebar group header (Account Management, Reports, Root) */
.legacy-skin #sidebar .menu-collapse > .btn-link {
  text-decoration: none;
  color: var(--legacy-text);
  padding: 0.25rem 0.5rem;
}
.legacy-skin #sidebar .menu-collapse > .btn-link span {
  font-size: 19px;
}

/* --------------------------------------------------------------------------
   Main content area — boiji base.scss line 151-180
   -------------------------------------------------------------------------- */
.legacy-skin #main-content {
  padding: 12px;
}
@media (min-width: 768px) {
  .legacy-skin #main-content.offset {
    margin-left: 240px;
  }
}

/* spacing for fixed topbar — pushes #main-content below the fixed navbar.    */
/* Topbar height ≈ 55px (padding 0.5rem top+bottom + brand 1.25rem line).     */
/* 4em ≈ 64px gives a safe margin above the topbar bottom edge.               */
.legacy-skin .topbar-spacer {
  margin-bottom: 4em;
}

/* --------------------------------------------------------------------------
   Buttons — boiji base.scss lines 78-94
   -------------------------------------------------------------------------- */
.legacy-skin .btn {
  padding-left: 0.5em;
  padding-right: 0.5em;
  outline: none;
  border-radius: 0.25rem; /* override BS5 .375rem to match BS4-alpha */
}
.legacy-skin .btn-icon i {
  font-size: 24px;
}
.legacy-skin .btn-icon .btn-icon-confirm i,
.legacy-skin .btn-icon .btn-icon-cancel i {
  font-size: 16px;
}
/* boiji form.scss lines 114-119 — active button = primary blue */
.legacy-skin .btn-group .btn.active {
  background-color: var(--legacy-primary);
  border-color: var(--legacy-primary);
  color: white;
}

/* --------------------------------------------------------------------------
   btn-secondary — BS4-alpha vs BS5 divergence fix
   --------------------------------------------------------------------------
   BS5 renders .btn-secondary as a solid dark-grey filled button (#6c757d, white text).
   BS4-alpha rendered it as an outlined/transparent button: white background,
   grey border (#ccc), dark body text. Boiji uses BS4-alpha defaults throughout —
   filter buttons, "Add Market", "Search", "Clear" etc. are all btn-secondary and
   must appear as outlined, NOT as solid dark buttons.

   This override restores the BS4-alpha outlined look site-wide within .legacy-skin.
   It also adds a proper hover state: grey fill with white text (same as BS4-alpha
   .btn-secondary:hover).
   -------------------------------------------------------------------------- */
.legacy-skin .btn-secondary {
  background-color: transparent;
  border-color: #ccc;
  color: var(--legacy-text); /* #373a3c — BS4-alpha body text */
}
.legacy-skin .btn-secondary:hover,
.legacy-skin .btn-secondary:focus {
  background-color: #ccc;
  border-color: #ccc;
  color: var(--legacy-text);
}
.legacy-skin .btn-secondary:active,
.legacy-skin .btn-secondary.active {
  background-color: #ccc;
  border-color: #bbb;
  color: var(--legacy-text);
}
/* Disabled state — muted, no pointer */
.legacy-skin .btn-secondary:disabled,
.legacy-skin .btn-secondary.disabled {
  background-color: transparent;
  border-color: #e0e0e0;
  color: #aaa;
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Card / Panel — boiji card.scss
   -------------------------------------------------------------------------- */
.legacy-skin .card {
  background-color: var(--legacy-bg-card);
  border: 1px solid var(--legacy-border-card);
  border-radius: 4px; /* boiji BS4 default; override BS5 6px */
}
.legacy-skin .card .card-header {
  background-color: var(--legacy-bg-card);
  color: var(--legacy-text);
  border-bottom: 1px solid var(--legacy-border-card);
  padding: 0.75em; /* boiji card.scss line 32 */
}
.legacy-skin .card .card-body {
  padding: 0.75em; /* boiji card.scss line 36 (.card-block) */
}
.legacy-skin .card .table {
  margin-bottom: 0;
}
.legacy-skin .card .row-info {
  border-bottom: solid 1px #eee;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.legacy-skin .card .card-label {
  position: absolute;
  top: -12px;
  background-color: white;
  padding: 2px 8px;
  font-size: 80%;
}
.legacy-skin .card.disabled {
  color: #ccc;
  background-color: #fafafa;
}
.legacy-skin .card.suspended {
  background-color: #eee;
  color: #666;
}
.legacy-skin .messages-container {
  margin-top: 16px;
}
.legacy-skin .messages-container .unread-messages .messages,
.legacy-skin .messages-container .member-messages .messages,
.legacy-skin .messages-container .member-sms .messages {
  border-radius: 4px;
  padding: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 70vh;
  border: solid 1px #ccc;
}
.legacy-skin .messages-container .unread-messages .card,
.legacy-skin .messages-container .member-messages .card,
.legacy-skin .messages-container .member-sms .card {
  line-height: 1.2em;
}
.legacy-skin .messages-container .card.selected,
.legacy-skin .messages-container .card.active {
  background-color: #ccccff;
}
.legacy-skin .messages-container .card.card-all-messages.selected,
.legacy-skin .messages-container .card.card-all-messages.active {
  --bs-card-bg: #ccccff;
  background-color: #ccccff !important;
}
.legacy-skin .messages-container .card.selected .text-muted,
.legacy-skin .messages-container .card.active .text-muted {
  color: #666666 !important;
}
.legacy-skin .messages-container .card.sender {
  background-color: #ccccff;
  border-right: solid 8px #8080ff;
}
.legacy-skin .messages-container .card.sender .text-muted {
  color: #666666 !important;
}
.legacy-skin .messages-container .card.receiver {
  border-left: solid 8px #ccc;
}
/* Issue 18: preserve "\n" line breaks in the message body. Target the leaf
   .legacy-memo-content (which holds ONLY the message text), NOT the .card
   container. The card is a flex column whose EJS source has newlines +
   indentation between the meta row and the content div; pre-wrap on the card
   renders that inter-element whitespace as blank lines, blowing the bubble open
   (regression 2026-07-05). On the leaf, pre-wrap only affects real message \n. */
.legacy-skin .messages-container .legacy-memo-content {
  white-space: pre-wrap;
}
.legacy-skin .messages-container .card.unread {
  background-color: #eee;
  font-weight: bold;
}
.legacy-skin .messages-container .unread-messages {
  padding-right: 0;
}

/* Issue 21: #messageToMember is now a contenteditable div (was a <textarea>) so the
   admin can apply Bold/Italic/Underline via the toolbar above it. .form-control
   already gives it the textarea's border/padding look; this just adds the
   empty-state placeholder text since contenteditable has no native placeholder. */
.legacy-skin .messages-container #messageToMember:empty::before {
  content: attr(data-placeholder);
  color: #6c757d;
  pointer-events: none;
}

/* fund-request top-row (card.scss lines 39-56) */
.legacy-skin .card-fund-request { padding: 0; }
.legacy-skin .card-fund-request .table .top-row { background-color: #f8f8f8; }
.legacy-skin .card-fund-request .table .top-row.deposit  { border-bottom: solid 4px var(--legacy-success); }
.legacy-skin .card-fund-request .table .top-row.withdraw { border-bottom: solid 4px var(--legacy-danger); }
.legacy-skin .card-fund-request .table .top-row.transfer { border-bottom: solid 4px var(--legacy-info); }

/* --------------------------------------------------------------------------
   Table — boiji table.scss
   -------------------------------------------------------------------------- */
.legacy-skin .table {
  --bs-table-bg: transparent;
  color: var(--legacy-text);
}
.legacy-skin .table > :not(caption) > * > * {
  background-color: transparent;
  color: inherit;
}
.legacy-skin .table thead th {
  vertical-align: top;
  border-top: none;
}
.legacy-skin .table thead th.col-index { width: 4em; }
.legacy-skin .table tr td.col-index { width: 4em; }

.legacy-skin .table tbody tr.selected td {
  background-color: var(--legacy-primary);
  color: white;
  font-weight: bold;
}
.legacy-skin .table tr.inactive {
  background-color: #fafafa;
  color: #cccccc;
}
.legacy-skin .table tr.inactive a { color: #cccccc; }
.legacy-skin .table tr td.editable-field { cursor: pointer; }
.legacy-skin .table tr td.non-editable {
  cursor: not-allowed;
  color: #eeeeee;
}
.legacy-skin .table-striped tbody tr:nth-of-type(2n+1) {
  background-color: #fafafa;
}

.legacy-skin .editable-field,
.legacy-skin .clickable {
  cursor: pointer;
}
.legacy-skin .editable-field:hover,
.legacy-skin .clickable:hover {
  font-weight: bold;
}
.legacy-skin .toggle-value { cursor: pointer; }
.legacy-skin .tracked {
  background-color: var(--legacy-warning);
  color: white;
}
.legacy-skin .tracked a { color: white; }

.legacy-skin .table-wrapper {
  overflow-x: auto;
}
.legacy-skin .markets-table-wrapper.dropdown-open,
.legacy-skin .results-table-wrapper.dropdown-open {
  overflow: visible;
}

.legacy-skin .results-table-wrapper .result-column {
  min-width: 180px;
  white-space: nowrap;
}
.legacy-skin .results-table-wrapper .result-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.legacy-skin .results-table-wrapper .result-icons img {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Form / Inputs — boiji form.scss + BS4-alpha LIGHT defaults
   -------------------------------------------------------------------------- */
.legacy-skin .form-control,
.legacy-skin .form-select {
  background-color: #ffffff;
  border: 1px solid var(--legacy-border-input);
  color: var(--legacy-text-input);
  border-radius: 0.25rem;
}
.legacy-skin .form-control::placeholder {
  color: var(--legacy-text-muted);
}
.legacy-skin .form-control:focus,
.legacy-skin .form-select:focus {
  background-color: #ffffff;
  border-color: var(--legacy-primary);
  color: var(--legacy-text-input);
  box-shadow: 0 0 0 0.2rem rgba(2, 117, 216, 0.25);
}
.legacy-skin label {
  color: var(--legacy-text);
  margin-bottom: 0.25rem;
}
.legacy-skin .input-group-text {
  background-color: #f7f7f9;
  border-color: var(--legacy-border-input);
  color: var(--legacy-text-input);
}

/* signin (form.scss lines 12-67) */
.legacy-skin .div-signin {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  border-radius: 12px;
  border: solid 1px #ccc;
}
.legacy-skin .div-signin .form-signin {
  width: 300px;
}
.legacy-skin .div-signin.whitelisted {
  border: dashed 3px var(--legacy-primary);
}

/* --------------------------------------------------------------------------
   Tabs — BS5 + boiji adjustments
   --------------------------------------------------------------------------
   Boiji nav-tabs: no explicit color override in base.scss → inherits BS4-alpha
   defaults: inactive tab = link blue (#0275d8), active tab = body text (#373a3c).
   Previous implementation had inactive tabs as muted grey — wrong.
   -------------------------------------------------------------------------- */
.legacy-skin .nav-tabs {
  border-bottom-color: var(--legacy-border-card);
}
.legacy-skin .nav-tabs .nav-link {
  /* BS4-alpha: inactive tab link = primary blue (same as a:link default) */
  color: var(--legacy-primary);
  border: 1px solid transparent;
}
.legacy-skin .nav-tabs .nav-link:hover {
  color: var(--legacy-primary);
  text-decoration: underline;
  border-color: var(--legacy-border-card) var(--legacy-border-card) transparent;
}
.legacy-skin .nav-tabs .nav-link.active {
  /* Active tab: dark body text (BS4-alpha default — no blue, white bg, border on 3 sides) */
  color: var(--legacy-text);
  background-color: var(--legacy-bg-card);
  border-color: var(--legacy-border-card) var(--legacy-border-card) transparent;
  text-decoration: none;
}
.legacy-skin .tab-pane .table th {
  border-top: none;
}

/* fund-reports tab styling (base.scss lines 37-53) */
.legacy-skin .app-fund-reports .nav-tabs .nav-link.active {
  background-color: #fafafa;
}

/* --------------------------------------------------------------------------
   Badges — BS4-alpha .tag class + BS5 .badge.bg-* override
   --------------------------------------------------------------------------
   BS4-alpha uses .tag/.tag-pill/.tag-{color} class names.
   BS5 renamed these to .badge/.rounded-pill/.bg-{color}.
   Both class sets are in use across legacy templates, so both must be styled.

   Color override: BS5 --bs-info-rgb is bright cyan (13,202,240), far from
   BS4-alpha info (#5bc0de = 91,192,222). Rebind it within .legacy-skin so
   any .badge.bg-info or .bg-info element matches boiji's teal, not BS5 cyan.
   -------------------------------------------------------------------------- */
.legacy-skin {
  /* Override BS5 info color to match BS4-alpha #5bc0de (teal) */
  --bs-info-rgb: 91, 192, 222;
  /* Keep success/danger/warning aligned with BS4-alpha values */
  --bs-success-rgb: 92, 184, 92;
  --bs-danger-rgb: 217, 83, 79;
  --bs-warning-rgb: 240, 173, 78;
}

.legacy-skin .tag,
.legacy-skin .badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  border-radius: 0.25rem;
}
.legacy-skin .tag.tag-pill,
.legacy-skin .badge.rounded-pill {
  padding-left: 0.6em;
  padding-right: 0.6em;
  border-radius: 10rem;
}
/* BS4-alpha tag-{color} → explicit background, matching boiji color tokens */
.legacy-skin .tag.tag-default { background-color: #818a91; }
.legacy-skin .tag.tag-info    { background-color: var(--legacy-info); }
.legacy-skin .tag.tag-success { background-color: var(--legacy-success); }
.legacy-skin .tag.tag-warning { background-color: var(--legacy-warning); }
.legacy-skin .tag.tag-danger  { background-color: var(--legacy-danger); }
.legacy-skin .tag.tag-primary { background-color: var(--legacy-primary); }
.legacy-skin .badge-secondary {
  color: #ffffff;
  background-color: #818a91;
}
.legacy-skin .tag.tag-label {
  font-size: 50%;
  position: relative;
  bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

/* --------------------------------------------------------------------------
   Modal — boiji modal.scss
   -------------------------------------------------------------------------- */
.legacy-skin .modal .modal-header {
  padding: 10px;
}
.legacy-skin .modal .modal-header button.close,
.legacy-skin .modal .modal-header .btn-close {
  margin-top: 4px;
}
.legacy-skin .modal-content {
  background-color: var(--legacy-bg-card);
  color: var(--legacy-text);
  border: 1px solid var(--legacy-border-card);
  /* Override BS5 default 0.5rem to BS4-alpha .3rem for parity */
  border-radius: 0.3rem;
}

/* Fullscreen modal — boiji base.scss lines 305-335.
   Edge-to-edge dialog, no rounded corners, no margin. Header padding 8px,
   body iframe display:block + zero border. */
.legacy-skin #modal-fullscreen .modal-dialog {
  max-width: 100%;
  width: 100%;
  margin: 0;
}
.legacy-skin #modal-fullscreen .modal-content {
  border-radius: 0;
  border: 0;
}
.legacy-skin #modal-fullscreen .modal-header {
  padding: 8px;
}
.legacy-skin #modal-fullscreen .modal-header h4 {
  margin-top: 4px;
  margin-bottom: 0;
}
.legacy-skin #modal-fullscreen .modal-body {
  margin: 0;
  padding: 8px;
}
.legacy-skin #modal-fullscreen .modal-body iframe {
  display: block;
  border: 0;
}
.legacy-skin #modal-fullscreen .fs-round-game {
  overflow-y: auto;
  max-height: calc(100vh - 150px);
}
.legacy-skin #modal-fullscreen .analyze-bets-header h4 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.legacy-skin #modal-fullscreen .analyze-bets-row {
  --bs-gutter-x: 0.75rem;
}
.legacy-skin #modal-fullscreen .analyze-table th,
.legacy-skin #modal-fullscreen .analyze-table td {
  vertical-align: middle;
}
.legacy-skin #modal-fullscreen .analyze-table .selected > td,
.legacy-skin #modal-fullscreen .analyze-table tr.selected > td {
  background-color: var(--legacy-primary);
  color: #ffffff;
  font-weight: 700;
}
.legacy-skin #modal-fullscreen .analyze-table .selected .text-muted,
.legacy-skin #modal-fullscreen .analyze-table tr.selected .text-muted {
  color: #e7f1ff !important;
}
.legacy-skin #modal-fullscreen .analyze-clickable {
  cursor: pointer;
}
.legacy-skin #modal-fullscreen .analyze-limit-group {
  margin-bottom: 0.25rem;
}
.legacy-skin #modal-fullscreen .table-game-copy {
  word-break: break-word;
}
.legacy-skin #modal-fullscreen .table-game-copy h6 {
  padding-top: 4px;
}
.legacy-skin #modal-fullscreen .table-game-copy-content-1 {
  white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   Misc — boiji base.scss
   -------------------------------------------------------------------------- */
.legacy-skin .text-muted {
  color: #ccc !important; /* boiji base.scss line 215 */
}

/* CRM alert queues carry dense operational text. Keep muted labels readable
   without changing the softer boiji muted color used across older pages. */
.legacy-skin .crm-alerts-page .text-muted {
  color: var(--legacy-text-muted) !important;
}
.legacy-skin .crm-alerts-page .table {
  --bs-table-color: var(--legacy-text);
  --bs-table-striped-color: var(--legacy-text);
  --bs-table-striped-bg: #fafafa;
}
.legacy-skin .crm-alerts-page .table > :not(caption) > * > * {
  color: var(--legacy-text);
}
.legacy-skin .crm-alerts-page .table-striped tbody tr:nth-of-type(2n+1) > * {
  background-color: #fafafa;
}
.legacy-skin .crm-alerts-page .crm-alerts-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.legacy-skin .crm-alerts-page .crm-alerts-filter .form-group {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
}
.legacy-skin .crm-alerts-page .crm-alerts-filter .form-control {
  width: 100%;
}
.legacy-skin .crm-alerts-page .crm-alerts-filter .btn {
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .legacy-skin .crm-alerts-page .crm-alerts-filter {
    flex-wrap: nowrap;
  }
  .legacy-skin .crm-alerts-page .crm-alerts-filter .form-group {
    flex-basis: 0;
  }
}

/* Members list status filter (Active / Inactive / Suspended / Rejected / Locked).
   Five buttons are wider than a 375px viewport, and a plain .btn-group cannot break,
   so the row pushed the whole page into horizontal scroll. Below the tablet breakpoint
   the group wraps and every button carries its own radius (0.25rem, same as .btn above),
   so a wrapped row reads as a deliberate second row instead of a clipped group.
   At >=768px nothing changes: the group still renders as one unbroken pill row. */
@media (max-width: 767.98px) {
  .legacy-skin .member-status-filter {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .legacy-skin .member-status-filter > .btn {
    border-radius: 0.25rem;
  }
}

.legacy-skin .text-success { color: var(--legacy-success) !important; }
.legacy-skin .text-danger  { color: var(--legacy-danger) !important; }
.legacy-skin .text-warning { color: var(--legacy-warning) !important; }
.legacy-skin .text-info    { color: var(--legacy-info) !important; }

.legacy-skin .header-xl { font-size: 32px; font-weight: 100; }
.legacy-skin .header-lg { font-size: 26px; font-weight: 100; }

.legacy-skin .result-4d {
  font-size: 48px;
  font-family: 'Anonymous Pro', monospace;
  line-height: 1;
  position: relative;
  top: -2px;
}

.legacy-skin .pagination .page-item { cursor: pointer; }

/* dropdown — boiji header.scss */
.legacy-skin .dropdown-menu {
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
}
.legacy-skin .dropdown-item i {
  min-width: 25px;
}

/* legacy-content wrapper for pages */
.legacy-skin .legacy-content {
  padding: 12px;
}
.legacy-skin .legacy-content .page-title {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.legacy-skin .expense-account-wrap.has-expense-account-error .choices__inner,
.legacy-skin .expense-account-select.is-invalid {
  border-color: var(--legacy-danger);
  background-color: #fff8f8;
}
.legacy-skin .expense-account-wrap.has-expense-account-error .choices__inner {
  box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.15);
}
.legacy-skin .expense-account-error {
  color: var(--legacy-danger);
  font-weight: 700;
  margin-top: 0.35rem;
}

/* alerts — match boiji widget-alert behavior (success/warning/danger floating cards) */
.legacy-skin .modal-content .card.card-body.message {
  text-align: center;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding: 12px;
  color: #ffffff;
}
.legacy-skin .modal-content .card.card-body.message.msg-success { background: rgba(92, 184, 92, 0.75); }
.legacy-skin .modal-content .card.card-body.message.msg-warning { background: rgba(240, 173, 78, 0.75); }
.legacy-skin .modal-content .card.card-body.message.msg-danger  { background: rgba(255, 0, 0, 0.75); }

/* responsive — sidebar collapse on mobile */
@media (max-width: 767.98px) {
  .legacy-skin #sidebar {
    display: none;
  }
  .legacy-skin #main-content.offset {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Signin (login) page — boiji form.scss .div-signin (lines 12-62)
   Centered fixed box, 300px form, light border, 12px radius.
   -------------------------------------------------------------------------- */
.legacy-skin.legacy-signin-body {
  /* Login page has no sidebar/topbar — full white background */
  background-color: var(--legacy-bg-page);
}
.legacy-skin .div-signin {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  border-radius: 12px;
  border: solid 1px #ccc;
  background-color: #ffffff;
}
.legacy-skin .div-signin .form-signin {
  width: 300px;
}
.legacy-skin .div-signin .form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.legacy-skin .div-signin .form-signin .form-control:focus {
  z-index: 2;
}
.legacy-skin .div-signin .form-signin-response {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* boiji inputs: top input rounded top, bottom input rounded bottom — joined look */
.legacy-skin .div-signin .form-signin input#email {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.legacy-skin .div-signin .form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.legacy-skin .div-signin.whitelisted {
  padding: 16px;
  border-radius: 12px;
  border: dashed 3px var(--legacy-primary);
}
/* boiji form-signin-heading typography (BS4 alpha h5 default) */
.legacy-skin .form-signin-heading {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--legacy-text);
}
/* BS4-alpha utilities removed in BS5 — polyfill for boiji parity */
.legacy-skin .text-xs-center {
  text-align: center;
}
.legacy-skin .text-xs-right {
  text-align: right;
}
.legacy-skin .text-xs-left {
  text-align: left;
}
.legacy-skin .float-xs-right {
  float: right !important;
}
.legacy-skin .float-xs-left {
  float: left !important;
}
/* hidden-sm-down: hide on screens < md (768px). Boiji uses on topbar+sidebar. */
@media (max-width: 767.98px) {
  .legacy-skin .hidden-sm-down {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Sidebar collapsed-by-default state for grouped sections.
   Boiji default: Account Management, Reports, Root groups start collapsed
   (boiji app-sidebar.html lines 25, 248, 356 — `<ul class="... hidden">`).
   Toggle handled in footer.ejs via data-collapse-target click handler.
   -------------------------------------------------------------------------- */
.legacy-skin #sidebar .menu-collapse > ul.collapsed {
  display: none;
}

/* --------------------------------------------------------------------------
   Dashboard widgets (boiji app-dashboard.html + card.scss)
   3-column layout, fund cards, monthly summary, online members, markets.
   -------------------------------------------------------------------------- */
/* Boiji `.card-block` — used as inner content block (BS4 alpha utility, removed in BS5) */
.legacy-skin .card-block {
  padding: 0.75rem;
}

/* Boiji card.scss: `.card-fund-request { padding: 0px; }`.
   Keep this after the general card-block compat rule so dashboard request tables
   keep the original edge-to-edge table layout. Long seeded usernames also need
   to wrap inside the top row instead of forcing action buttons into column 2. */
.legacy-skin .card.card-block.card-fund-request {
  padding: 0;
}
.legacy-skin .card-fund-request .table {
  width: 100%;
  margin-bottom: 0;
}
.legacy-skin .card-fund-request .top-row td:first-child,
.legacy-skin .card-fund-request .top-row td:first-child a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legacy-skin .card-fund-request .top-row td:last-child {
  width: 72px;
  white-space: normal;
}

/* Boiji `.card-blockquote` — used inside cards on dashboard for stat rows.
   Vertical block with no padding override (so card-block's padding applies). */
.legacy-skin .card-blockquote {
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.legacy-skin .card-blockquote:last-child { border-bottom: none; }

/* Boiji `.card-inverse.card-warning` — tracked online member highlight.
   In BS4 alpha: dark text on warning bg. Reproduce manually since BS5 dropped. */
.legacy-skin .card-inverse {
  color: #ffffff;
}
.legacy-skin .card-inverse a,
.legacy-skin .card-inverse a:link,
.legacy-skin .card-inverse a:visited {
  color: #ffffff;
}
.legacy-skin .card-warning {
  background-color: var(--legacy-warning);
  border-color: var(--legacy-warning);
}

/* Dashboard 3-column container — boiji uses .app-dashboard.row.
   Middle column gets a subtle background tint per boiji inline style. */
.legacy-skin .app-dashboard.row { margin: 0; }
.legacy-skin .app-dashboard h5 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}
.legacy-skin .app-dashboard h5 i.fa { margin-right: 4px; }
.legacy-skin .app-dashboard h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Refresh button in monthly report header — clickable icon, no underline */
.legacy-skin .btn-refresh.clickable { cursor: pointer; }
.legacy-skin .btn-refresh.clickable:hover { color: var(--legacy-primary); }

/* Sort-by links in markets widget — match boiji pull-right small style */
.legacy-skin .btn-sort-market {
  text-decoration: none;
  color: var(--legacy-primary);
  margin: 0 2px;
}
.legacy-skin .btn-sort-market:hover { text-decoration: underline; }

/* Toggle-show-login-members link — boiji uses small float-right anchor */
.legacy-skin .btn-toggle-show-login-members {
  text-decoration: none;
  color: var(--legacy-primary);
}
.legacy-skin .btn-toggle-show-login-members:hover { text-decoration: underline; }

/* Online members card sizing — slightly tighter than fund cards */
.legacy-skin #online-members-container {
  clear: both;
}
.legacy-skin #online-members-container .card {
  width: 100%;
  margin-bottom: 0.5rem;
}

/* === Members list page (boiji app-members-list.html parity) ===
   Tweaks needed for visual match against the reference admin panel/account/members:
   - Sortable header anchor (boiji `.btn-set-order`) styled as plain dark text,
     not BS5 default blue link — boiji headers look like text, sort caret beside.
   - Inactive row already styled in earlier .table tr.inactive block (line ~343).
   - Action dropdown header chunk (.header-lg) — small icon + username strip
     above divider (boiji line 414-417).
   - Notes column wraps with break-word — long notes shouldn't blow out row.
*/
.legacy-skin .btn-set-order {
  color: var(--legacy-text);
  text-decoration: none;
  font-weight: 600;
}
.legacy-skin .btn-set-order:hover {
  color: var(--legacy-primary);
  text-decoration: none;
}
.legacy-skin .dropdown-menu .header-lg {
  padding: 0.5em 0.75em;
  font-size: 0.85em;
  color: var(--legacy-text-muted);
}
.legacy-skin .dropdown-menu .header-lg .fa-user-circle-o {
  font-size: 1.5em;
  color: var(--legacy-primary);
}
.legacy-skin .member-payment-line {
  min-height: 1.35em;
  line-height: 1.35;
  white-space: nowrap;
}
.legacy-skin .member-payment-line + .member-payment-line {
  margin-top: 0.25rem;
}
.legacy-skin .table td.small {
  word-break: break-word;
}
.legacy-skin .app-flash-stack {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.legacy-skin .app-flash-stack:empty {
  display: none;
}
.legacy-skin .app-flash-alert {
  margin-bottom: 0;
}
.legacy-skin .app-flash-alert .btn-close {
  top: 50%;
  transform: translateY(-50%);
}
/* Member Inspector modal — wider table inside modal-body, no horizontal overflow */
.legacy-skin #modal-inspect-body .table th,
.legacy-skin #modal-inspect-body .table td {
  white-space: nowrap;
  font-size: 0.85em;
}

/* Guarded deposit/withdraw correction modal.
   The two-stage layout keeps transaction facts, wallet impact, and rekening impact
   visible together on desktop, then stacks them in reading order on tablet/mobile. */
.legacy-skin .correction-review-modal .modal-content {
  border: 0;
  border-radius: 0.65rem;
  box-shadow: 0 1.25rem 3rem rgba(20, 31, 46, 0.24);
}
.legacy-skin .correction-review-header {
  border-bottom: 1px solid #d9e0e7;
  background: #f8fafc;
  padding: 1rem 1.25rem;
}
.legacy-skin .correction-review-eyebrow {
  color: #6b7785;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legacy-skin .correction-review-header .modal-title {
  color: #263442;
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0.15rem;
}
.legacy-skin .correction-stepper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.legacy-skin .correction-step {
  align-items: center;
  background: #f3f5f7;
  border: 1px solid #d9e0e7;
  border-radius: 0.5rem;
  color: #7a8794;
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem 0.8rem;
}
.legacy-skin .correction-step > span {
  align-items: center;
  background: #dfe4e9;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 1.75rem;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}
.legacy-skin .correction-step.is-active {
  background: #edf5ff;
  border-color: #4e92df;
  color: #174f8d;
}
.legacy-skin .correction-step.is-active > span {
  background: #337ab7;
  color: #fff;
}
.legacy-skin .correction-panel {
  background: #fff;
  border: 1px solid #d9e0e7;
  border-radius: 0.5rem;
  padding: 1rem;
}
.legacy-skin .correction-panel-title {
  color: #263442;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}
.legacy-skin .correction-snapshot-list {
  margin: 0;
}
.legacy-skin .correction-snapshot-list > div {
  border-bottom: 1px solid #edf0f3;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(7rem, 0.85fr) minmax(0, 1.15fr);
  padding: 0.52rem 0;
}
.legacy-skin .correction-snapshot-list > div:last-child {
  border-bottom: 0;
}
.legacy-skin .correction-snapshot-list dt {
  color: #6b7785;
  font-size: 0.78rem;
  font-weight: 400;
}
.legacy-skin .correction-snapshot-list dd {
  color: #263442;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.legacy-skin .correction-charge-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.legacy-skin .correction-charge-option {
  align-items: flex-start;
  border: 1px solid #cfd7df;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  margin: 0;
  min-height: 4.6rem;
  padding: 0.8rem;
}
.legacy-skin .correction-charge-option:hover {
  border-color: #6ea5dc;
}
.legacy-skin .correction-charge-option.is-selected {
  background: #edf5ff;
  border-color: #337ab7;
  box-shadow: inset 0 0 0 1px #337ab7;
}
.legacy-skin .correction-charge-option input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}
.legacy-skin .correction-charge-option span {
  display: grid;
  gap: 0.25rem;
}
.legacy-skin .correction-charge-option small {
  color: #6b7785;
  line-height: 1.35;
}
.legacy-skin .correction-impact-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.legacy-skin .correction-impact-card {
  background: #f8fafc;
  border: 1px solid #d9e0e7;
  border-left: 4px solid #8795a3;
  border-radius: 0.5rem;
  min-height: 8.5rem;
  padding: 0.9rem 1rem;
}
.legacy-skin .correction-impact-card.is-positive { border-left-color: #2f9e64; }
.legacy-skin .correction-impact-card.is-negative { border-left-color: #c94242; }
.legacy-skin .correction-impact-card.is-neutral { border-left-color: #8795a3; }
.legacy-skin .correction-impact-label {
  color: #6b7785;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legacy-skin .correction-impact-value {
  color: #263442;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.55rem 0 0.35rem;
}
.legacy-skin .correction-impact-card.is-positive .correction-impact-value { color: #237a4c; }
.legacy-skin .correction-impact-card.is-negative .correction-impact-value { color: #af3030; }
.legacy-skin .correction-impact-meta {
  color: #6b7785;
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.legacy-skin .correction-warning-list {
  display: grid;
  gap: 0.6rem;
}
.legacy-skin .correction-warning-list:empty { display: none; }
.legacy-skin .correction-warning {
  align-items: flex-start;
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
}
.legacy-skin .correction-warning .fa { margin-top: 0.15rem; }
.legacy-skin .correction-final-summary {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.legacy-skin .correction-final-summary > div {
  background: #f8fafc;
  border: 1px solid #d9e0e7;
  border-radius: 0.5rem;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.9rem;
}
.legacy-skin .correction-final-summary span {
  color: #6b7785;
  font-size: 0.75rem;
}
.legacy-skin .correction-final-summary strong {
  color: #263442;
  overflow-wrap: anywhere;
}
.legacy-skin .correction-confirm-checks {
  display: grid;
  gap: 0.65rem;
}
.legacy-skin .correction-confirm-checks > label {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d9e0e7;
  border-radius: 0.45rem;
  cursor: pointer;
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
}
.legacy-skin .correction-confirm-checks .form-check-input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.legacy-skin .correction-risk-check {
  background: #fff4e5 !important;
  border-color: #e4a84c !important;
}
.legacy-skin .correction-review-footer {
  background: #f8fafc;
  border-top: 1px solid #d9e0e7;
  gap: 0.5rem;
}

@media (max-width: 991.98px) {
  .legacy-skin .correction-final-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .legacy-skin .correction-review-modal .modal-dialog {
    margin: 0.5rem;
  }
  .legacy-skin .correction-stepper,
  .legacy-skin .correction-charge-grid,
  .legacy-skin .correction-impact-grid,
  .legacy-skin .correction-final-summary {
    grid-template-columns: 1fr;
  }
  .legacy-skin .correction-step {
    padding: 0.55rem 0.65rem;
  }
  .legacy-skin .correction-impact-card {
    min-height: 0;
  }
  .legacy-skin .correction-review-footer {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }
  .legacy-skin .correction-review-footer .btn,
  .legacy-skin .correction-review-footer .me-auto {
    margin: 0 !important;
    width: 100%;
  }
}

/* Constrain flatpickr navigation SVG arrows to their intended 14px size.
   Without this, the inline SVG inherits 100% width/height from the parent
   <a> element and renders at 1331x1331px — covering the entire calendar widget. */
.legacy-skin .flatpickr-months .flatpickr-prev-month svg,
.legacy-skin .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

/* === Transfer / Fund report game-list strip — boiji app-fund-reports.html ============== */
/* Source SCSS: boiji_admin/imports/ui/stylesheets/default/base.scss (.fund-type +         */
/* .external-game-lists / .bank-lists). Provider tiles in the transfer report: clickable   */
/* bordered cards showing GAME (count) + green IDR total; active tile = info-blue fill.     */
.legacy-skin .fund-type {
  background-color: #fafafa;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  border-bottom: solid 1px #ddd;
}
.legacy-skin .bank-lists ul,
.legacy-skin .external-game-lists ul {
  margin: 0;
  padding: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  list-style: none;
}
.legacy-skin .bank-lists ul li,
.legacy-skin .external-game-lists ul li {
  border: solid 1px #ccc;
  border-radius: 4px;
  padding: 8px;
  margin: 4px;
  min-width: 150px;
  display: list-item;
  float: left;
  cursor: pointer;
}
.legacy-skin .bank-lists ul li.active,
.legacy-skin .external-game-lists ul li.active {
  background-color: #5bc0de;
  border-color: #5bc0de;
  color: white;
}
.legacy-skin .bank-lists ul li.active .text-success,
.legacy-skin .external-game-lists ul li.active .text-success,
.legacy-skin .external-game-lists ul li.active a {
  color: white !important;
}

/* === PARTIAL NAVIGATION LOADING STATE ===
   htmx puts .htmx-request on the hx-indicator element, which partial-nav.js points at
   #main-content. Only the content region reacts: the topbar and sidebar must stay fully
   painted and clickable while the next route loads — that is the entire point of the
   change, so nothing here may dim or cover them.
   The 2px progress bar is an ::after on the same element, so it adds no node to the DOM
   and cannot shift the table below it. */
#main-content {
	position: relative;
}

#main-content.htmx-request {
	opacity: 0.55;
	transition: opacity 120ms linear;
	pointer-events: none;
}

#main-content.htmx-request::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, transparent, #0275d8, transparent);
	animation: legacy-partial-bar 900ms linear infinite;
}

@keyframes legacy-partial-bar {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

/* Operators who asked the OS for less motion get the dim, not the sweep. */
@media (prefers-reduced-motion: reduce) {
	#main-content.htmx-request {
		transition: none;
	}
	#main-content.htmx-request::after {
		animation: none;
		background: #0275d8;
	}
}