/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   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;
}
.legacy-skin .messages-container .card.unread {
  background-color: #eee;
  font-weight: bold;
}
.legacy-skin .messages-container .unread-messages {
  padding-right: 0;
}

/* 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 .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 */
}

.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;
}

/* 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;
}
/* 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;
}

/* 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;
}