/* ===================================================================
   portal_legacy.css
   Ported from boiji_client theme.scss / base.scss / header.scss /
   card.scss / form.scss / table.scss  (Bootstrap 4.0.0-alpha.5 → BS5)
   All colours resolved to CSS custom properties on :root.
   Only opacity-only rgba() overlays are allowed as literals.
   =================================================================== */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Primary brand gold */
  --color-primary:          #DAA520;
  --color-primary-light:    #F5C358;
  /* Dark/black backgrounds */
  --color-bg-body:          #000000;
  --color-bg-dark:          #000000;
  --color-bg-medium:        #222222;
  --color-bg-card:          #333333;
  --color-bg-footer:        #000000;
  /* Maroon – card header/footer */
  --color-maroon:           #800000;
  /* Text */
  --color-text:             #ffffff;
  --color-text-muted:       #cccccc;
  --color-text-dark:        #000000;
  /* Links */
  --color-link:             #ffd700;
  --color-link-hover:       #ffffff;
  /* Borders */
  --color-border-card:      #333333;
  --color-border-breadcrumb:#444444;
  --color-border-modal-hdr: #222222;
  /* Result digit */
  --color-result-digit:     gold;
  /* Status/game category accent colours */
  --color-accent-green:     #5cb85c;
  --color-accent-orange:    #f0ad4e;
  --color-accent-red:       #d9534f;
  --color-accent-blue:      #24BBF2;
  /* Scrollbar */
  --color-scrollbar-thumb:  rgba(220,220,220,0.8);
  --color-scrollbar-track:  #f7f7f9;
}

/* ===== BASE ===== */

/* Global font and body */
body {
  font-family: "Lato", sans-serif;
  background-color: var(--color-bg-body);
  color: var(--color-text);
}

/* Home page uses full-cover background image */
body.body-home {
  background: url(/images/bg.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Global link colours – boiji_client theme.scss uses gold default, white on hover. */
a {
  color: var(--color-link);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* Bootstrap 5 ships dark text defaults (`--bs-body-color`, `.text-muted !important`)
   that fight boiji's dark UI. Keep muted labels readable on dark surfaces. */
.text-muted {
  color: var(--color-text-muted, #cccccc) !important;
}

/* Light Bootstrap surfaces still need the original dark muted tone. */
.list-group .list-group-item:not(.active) .text-muted,
.card-ticket-list .text-muted,
.card-receiver .text-muted,
.card-sender .text-muted,
.dropdown-menu .text-muted {
  color: #6c757d !important;
}

.btn-outline-secondary {
  color: var(--color-text-muted, #cccccc);
  border-color: var(--color-text-muted, #cccccc);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: var(--color-text-dark, #000000);
  background-color: var(--color-text-muted, #cccccc);
  border-color: var(--color-text-muted, #cccccc);
}

/* Light border on plain text inputs */
input[type=text],
input[type=number],
input[type=password] {
  border-color: #ccc;
}

/* Footer */
footer {
  background-color: var(--color-bg-footer);
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Remove container gutter (full-width layout) */
.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

/* Body container top offset when header is NOT fixed */
#container-body {
  margin-top: 0px;
}

/* Body container top offset when header IS fixed (desktop) */
#container-body.fixed {
  margin-top: 160px !important;
}

/* Suppress spinner arrows on number inputs */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Custom scrollbar – webkit */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
}

::-webkit-scrollbar-track {
  background-color: var(--color-scrollbar-track);
}

/* Utility cursor helpers */
.clickable {
  cursor: pointer;
}

/* Periode column trigger on results page — link styled to look like the surrounding text
   while still being clickable. Matches boiji_client's "Pseudo-link to open round detail". */
.btn-select-round a {
  color: var(--color-primary, #d4a520);
  cursor: pointer;
}
.btn-select-round a:hover {
  color: var(--color-secondary, #c0922a);
  text-decoration: underline !important;
}

.unclickable {
  cursor: not-allowed;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.25;
}

/* Scrollbox – fixed-height overflow container for ticker-style lists.
   Mirrors boiji_client base.scss .scrollbox: 150px height, no horizontal scroll. */
.scrollbox {
  height: 150px;
  overflow-y: hidden;
}

.scrollbox ul {
  padding-left: 0;
  margin-bottom: 0;
  width: 100%;
  list-style: none; /* remove default disc bullets — boiji's <ul> rendered flat */
}

/* Each <li> uses Bootstrap's .row to lay out the col-5/col-4/col-3 children
   horizontally. Without flex, BS5 col-* default to block stacking. */
.scrollbox ul li {
  padding: 6px;
  border-bottom: solid 1px var(--color-border-card, #ccc);
}

/* Reduced button horizontal padding (tight layout on mobile) */
.btn {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Tighter container and row gutters (matching BS4-alpha 0.75em convention) */
.container {
  padding-left: 0.75em;
  padding-right: 0.75em;
}

.row {
  margin-left: -0.375em;
  margin-right: -0.375em;
}

/* All BS4-alpha column classes get the same 0.375em gutter */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  padding-left: 0.375em;
  padding-right: 0.375em;
}

/* Floating action buttons (fixed bottom corners) */
.btn-float-bottom-left {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 100;
}

.btn-float-bottom-right {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 100;
}

.btn-float-bottom-left.transparent,
.btn-float-bottom-right.transparent {
  opacity: 0.75;
}

.btn-float-bottom-left.transparent:hover,
.btn-float-bottom-right.transparent:hover {
  opacity: 1;
}

/* Dropdown items that are disabled styled italic-bold (BS5 keeps .disabled) */
.dropdown-menu .dropdown-item.disabled {
  font-style: italic;
  font-weight: bold;
}

/* Force muted/success/warning/danger text to white inside active list items */
.list-group .list-group-item.active .text-muted,
.list-group .list-group-item.active .text-success,
.list-group .list-group-item.active .text-warning,
.list-group .list-group-item.active .text-danger {
  color: white !important;
}

/* Label-group: inline label+value pair with border-right-radius pill look */
.label-group {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
}

.label-group .label-content {
  left: 0px;
  padding: 7px;
  padding-left: 16px;
  padding-right: 16px;
  border: solid 1px white;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Mobile: label floats as overlay title at the top of the border box */
@media (max-width: 575px) {
  .label-group {
    background-color: var(--color-bg-dark);
    font-size: 0.75rem;
  }

  .label-group .label-title {
    position: absolute;
    padding-left: 4px;
    padding-right: 4px;
    top: -2px;
    left: 12px;
    z-index: 100;
    background-color: var(--color-bg-dark);
  }

  .label-group .label-content {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}

/* Desktop: label title rendered as a filled white pill on the left */
@media (min-width: 576px) {
  .label-group .label-title {
    padding: 8px;
    background-color: white;
    color: var(--color-text-dark);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .label-group .label-content {
    position: relative;
    left: -4px;
  }
}

/* Shio icon helpers */
.btn.set-shio img {
  max-width: 54px;
  max-height: 54px;
}

.icon-shio {
  max-width: 40px;
  max-height: 40px;
}

/* Inline copy button (used on share links etc.) */
.btn-click-copy {
  position: relative;
  top: -2px;
  margin-left: 16px;
  font-size: 80%;
}

/* Badge pill inside nav-item (BS5: .badge replaces .tag) */
.nav-item .badge-pill,
.nav-item .tag-pill {
  position: relative;
  top: -2px;
}

/* ===== HEADER ===== */

/* Header app container */
#app-header .logo img {
  transition: max-width 0.3s;
}

@media (max-width: 767px) {
  #app-header .logo img {
    max-width: 100%;
    transition: max-width 0.3s;
  }
}

#app-header .header-info {
  margin-top: 16px;
}

/* Fixed header – collapses logo and pins to top */
#app-header.fixed {
  position: fixed;
  top: 0px;
  z-index: 1000;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
}

#app-header.fixed .logo img {
  max-width: 380px;
  transition: max-width 0.3s;
}

@media (max-width: 767px) {
  #app-header.fixed .logo img {
    max-width: 200px;
    transition: max-width 0.3s;
  }
}

#app-header.fixed .header-info {
  margin-top: 4px;
}

#app-header.fixed .header-info .social-media {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Navbar – zero padding override */
.navbar {
  padding: 0px 16px;
}

/* Navbar toggler button (hamburger) */
.navbar-toggler {
  position: relative;
  left: -16px;
  color: var(--color-text);
  width: inherit;
  outline: 0;
  cursor: pointer;
}

.navbar-toggler span.small {
  position: relative;
  bottom: 2px;
  font-size: 0.6em;
}

.navbar-toggler:focus {
  outline: 0;
}

/* Gold gradient navbar (the large decorative header bar) */
.navbar-large {
  border-top: solid 3px var(--color-primary);
  background: var(--color-primary-light);
  background: -moz-linear-gradient(top, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary) 100%);
  background: -webkit-linear-gradient(top, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary) 100%);
  background: linear-gradient(to bottom, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary) 100%);
  margin-bottom: 0.75em;
  border-radius: 0px;
}

/* Nav link padding — horizontal padding creates visual spacing between items.
   Bootstrap 5 flex-row layout means items are adjacent, so padding-left/right
   is the only gap. Mirrors boiji_client theme.scss .navbar-nav .nav-link rule. */
.navbar-nav .nav-item .nav-link {
  padding-top: 2px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

/* Active nav link gets gold background */
.navbar-nav .nav-item .nav-link.active {
  background-color: var(--color-primary);
  padding-left: 8px;
  padding-right: 8px;
}

/* Dropdown shadow */
.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);
}

/*
 * Bootstrap 5 sets .navbar-nav .dropdown-menu { position: static } by default
 * unless the navbar has .navbar-expand-{breakpoint} class. The portal_legacy
 * navbar uses .navbar-large (no expand class) so BS5 never overrides to absolute,
 * causing the gold bar to expand vertically when a dropdown opens (static = in-flow).
 * Force absolute on desktop navbar so the dropdown floats above content.
 */
.navbar-large .navbar-nav .dropdown-menu {
  position: absolute !important;
}

/* Mobile menu bar */
.mobile-menu {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 44px;
}

/* External games section – overrides navbar style for inner menus */
.app-external-games .navbar {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 0px;
}

.app-external-games .navbar .navbar-toggler {
  position: initial;
  width: 2.5em;
  height: 2em;
  padding: 0.5rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-size: 24px 24px;
  border-radius: 0.25rem;
}

/* ===== LOGO ===== */

/* Logo container padding */
.logo {
  padding: 4px;
}

.logo img {
  max-width: 480px;
}

/* Brand text with gold border */
.logo .brand {
  font-size: 40px;
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
  border: solid 1px gold;
  padding-left: 4px;
}

@media (max-width: 767px) {
  .logo .brand {
    font-size: 50px;
  }
}

/* Highlighted segment of the brand name (inverted gold/black) */
.logo .brand span {
  background-color: gold;
  color: var(--color-text-dark);
  margin-left: 4px;
  padding-left: 4px;
  padding-right: 4px;
}

/* ===== BREADCRUMB ===== */

/* Dark gradient breadcrumb bar */
.breadcrumb {
  border: solid 1px var(--color-border-breadcrumb);
  background: rgba(34, 34, 34, 1);
  background: -moz-linear-gradient(left, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 43%, rgba(68, 68, 68, 1) 65%, rgba(68, 68, 68, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 43%, rgba(68, 68, 68, 1) 65%, rgba(68, 68, 68, 1) 100%);
  background: linear-gradient(to right, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 43%, rgba(68, 68, 68, 1) 65%, rgba(68, 68, 68, 1) 100%);
}

/* Active breadcrumb item gets a black pill look */
.breadcrumb .breadcrumb-item.active {
  color: var(--color-text);
  border-radius: 4px;
  padding-right: 8px;
  padding-left: 8px;
  margin-left: 8px;
  background-color: var(--color-bg-dark);
}

/* Bold active item, muted disabled item */
.breadcrumb .active {
  font-weight: bold;
}

.breadcrumb .disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ===== RESULT DISPLAY ===== */

/* Large gold result digit – used on market result pages */
.result-digit {
  color: var(--color-result-digit);
  font-size: 60px;
  font-weight: 700;
  font-family: 'Droid Serif', serif;
  white-space: nowrap;
}

/* ===== NAV TABS ===== */

/* Bottom border on tab strip */
.nav-tabs {
  border-bottom: solid 4px var(--color-text);
}

/* Tab link padding */
.nav-tabs .nav-link {
  padding: 0.5em 0.5em;
}

/* Active tab within nested .nav-link context */
.nav-tabs .nav-link .nav-link.active {
  color: #55595c;
  background-color: #fff;
  border-color: #ddd #ddd transparent;
}

/* Game category tabs – colour variants */
.nav-tabs.game-categories.normal {
  border-bottom: solid 4px var(--color-accent-green);
}

.nav-tabs.game-categories.normal .nav-item .nav-link.active {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
  color: white;
}

.nav-tabs.game-categories.nodisc {
  border-bottom: solid 4px var(--color-accent-orange);
}

.nav-tabs.game-categories.nodisc .nav-item .nav-link.active {
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
  color: white;
}

.nav-tabs.game-categories.p123 {
  border-bottom: solid 4px var(--color-accent-red);
}

.nav-tabs.game-categories.p123 .nav-item .nav-link.active {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: white;
}

/* ===== CARD ===== */

/* Default card – dark grey gradient from boiji_client theme.scss lines 164-173.
   boiji_client uses rgba(34,34,34) → rgba(68,68,68) gradient, NOT gold.
   The golden gradient was wrong — it came from misapplying --color-primary.
   Hardcoded here so it never changes with theme variable overrides. */
.card {
  border: solid 1px #333;
  background: rgba(34, 34, 34, 1);
  background: -moz-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 16%, rgba(68, 68, 68, 1) 41%, rgba(68, 68, 68, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 16%, rgba(68, 68, 68, 1) 41%, rgba(68, 68, 68, 1) 100%);
  background: linear-gradient(to bottom, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 1) 16%, rgba(68, 68, 68, 1) 41%, rgba(68, 68, 68, 1) 100%);
  color: var(--color-text, #ffffff);
}

/* Result cards are literal boiji_client Bootstrap 4-alpha markup:
   .card.card-block.card-result. Bootstrap 5 makes .card a flex container,
   which breaks the original float-xs-right date/shio layout, so restore block
   flow only for result cards. */
.card.card-result {
  display: block;
}

/* Card header/footer – from boiji_client theme.scss lines 175-182.
   boiji_client uses #222 background with border-bottom: solid 4px white, NOT maroon.
   color must be explicitly white — Bootstrap default is near-black, invisible on #222 bg. */
.card .card-header {
  background-color: #222;
  border-bottom: solid 4px white;
  color: var(--color-text-white, #ffffff);
}

/* Ensure strong/bold tags inside card-header also inherit white color */
.card .card-header strong,
.card .card-header b {
  color: inherit;
}

.card .card-footer {
  background-color: #222;
}

/* Ticket list section inside a card – semi-transparent dark */
.card .card-ticket-list {
  background: rgba(34, 34, 34, 0.25);
}

/* BS4-alpha .card-block → BS5 .card-body (also style .card-block for compat) */
.card-body,
.card-block {
  padding: 0.75em;
}

/* Card game row spacing */
div.card-game .card-body .card-row,
div.card-game .card-block .card-row {
  margin-bottom: 0.75em;
}

/* Kombinasi bet button width */
div.card-game-kombinasi .btn-kombinasi {
  width: 8em;
  text-align: right;
}

/* Total bet summary section separator */
div.card-total-bet div.card-total-bet-content {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border-top: solid 4px #eee;
  border-bottom: solid 4px #eee;
}

/* Single bet footer separator */
div.card-single-bet div.card-single-bet-footer {
  border-top: solid 4px #eee;
  padding-top: 0.5em;
}

/* Ticket list within a card – light background list area */
div.card-ticket-list {
  padding: 1em;
  border-top: solid 1px #eee;
  background-color: #f9f9f9;
  color: var(--color-text-dark);
}

div.card-ticket-list div.row p {
  margin-bottom: 0.5em;
}

/* Receiver/sender chat-style cards */
.card-receiver {
  color: var(--color-text-dark);
  background: rgba(237, 237, 237, 1);
  background: -moz-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(to bottom, rgba(237, 237, 237, 1) 0%, rgba(246, 246, 246, 1) 53%, rgba(255, 255, 255, 1) 100%);
}

.card-sender {
  color: var(--color-text-dark);
  background: rgba(145, 232, 66, 1);
  background: -moz-linear-gradient(top, rgba(145, 232, 66, 1) 0%, rgba(210, 255, 82, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(145, 232, 66, 1) 0%, rgba(210, 255, 82, 1) 100%);
  background: linear-gradient(to bottom, rgba(145, 232, 66, 1) 0%, rgba(210, 255, 82, 1) 100%);
}

/* Social media / bank cards – dark semi-transparent */
.card-socmed,
.card-banks {
  background: rgba(0, 0, 0, 0.75);
}

/* Last deposit/withdraw ticker – dark semi-transparent */
.last-deposit,
.last-withdraw {
  background: rgba(0, 0, 0, 0.75);
}

/* Banner link area */
.banner-link {
  background: rgba(0, 0, 0, 0.75);
}

/* Bank/e-wallet logo size constraint.
   Boiji caps at 200x50, but Totonesia's filehosting logos include wider/taller
   source files; the rendered reference is visibly closer to ~140x36. */
.bank-list img,
.provider-list img,
.bank-online,
.bank-offline,
.provider-online,
.provider-offline {
  max-width: 140px;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card-banks .bank-list > div,
.card-banks .provider-list > div {
  min-height: 78px;
}

/* Offline bank logo – greyscaled and faded */
.bank-offline {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.25;
}

/* Mobile card: absolute index badge in top-left corner */
.app-mobile .card .card-index {
  position: absolute;
  top: -2px;
  left: -2px;
  border: solid 1px white;
  border-top-left-radius: 8px;
  width: 52px;
  height: 44px;
  text-align: center;
  padding-top: 12px;
  font-size: 16px;
}

/* Mobile bet card – compact padding */
.app-mobile .card-bet {
  margin-bottom: 4px;
}

.app-mobile .card-bet .card-body,
.app-mobile .card-bet .card-block {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 0px;
}

.app-mobile .card-bet .card-body .card-bet-date,
.app-mobile .card-bet .card-block .card-bet-date {
  position: relative;
  top: 2px;
}

.app-mobile .card-bet .card-body .table,
.app-mobile .card-bet .card-block .table {
  margin-top: 0;
  margin-bottom: 0;
}

.app-mobile .card-bet .card-body .table tr td,
.app-mobile .card-bet .card-block .table tr td {
  padding: 2px;
}

.app-mobile .card-bet .card-body .table tr td .btn,
.app-mobile .card-bet .card-block .table tr td .btn {
  padding: 0px;
}

/* Selected bet card – blue border highlight */
.app-mobile .card-bet.selected {
  border: solid 3px var(--color-accent-blue);
}

/* External game lobby – large floating header inside card */
.external-game-lobby .card .card-body .card-floating-header,
.external-game-lobby .card .card-block .card-floating-header {
  font-size: 26px;
  font-weight: 100;
}

/* Game grid card column – tight padding */
.card-game-col {
  padding: 2px;
}

.card-game-col .card {
  margin-bottom: 0px;
}

.card-game-col .card .card-game-logo .card-game-icon {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Game label at bottom of game card */
.card-game-col .card .card-game-label {
  display: flex;
  height: 22px;
  align-content: center;
  justify-content: flex-end;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  font-size: small;
}

/* Pragmatic Play / Reel Kingdom cards – fixed logo height */
.card-game-col .card.game-pragmatic-play .card-game-logo,
.card-game-col .card.game-pragmatic-play-classic .card-game-logo,
.card-game-col .card.game-reel-kingdom .card-game-logo {
  height: 120px;
}

@media (max-width: 767px) {
  .card-game-col .card.game-pragmatic-play .card-game-logo,
  .card-game-col .card.game-pragmatic-play-classic .card-game-logo,
  .card-game-col .card.game-reel-kingdom .card-game-logo {
    min-height: 130px;
  }
}

.card-game-col .card.game-pragmatic-play .card-game-label,
.card-game-col .card.game-pragmatic-play-classic .card-game-label,
.card-game-col .card.game-reel-kingdom .card-game-label {
  height: 30px;
}

/* PGSoft cards – rounded corners, black base */
.card-game-col .card.game-pgsoft {
  border: none;
  border-radius: 36px;
  background-color: var(--color-bg-dark);
}

.card-game-col .card.game-pgsoft .card-game-logo {
  min-height: 200px;
}

@media (max-width: 767px) {
  .card-game-col .card.game-pgsoft .card-game-logo {
    min-height: 220px;
  }
}

.card-game-col .card.game-pgsoft .card-game-label {
  margin-bottom: 8px;
  padding-bottom: 4px;
}

/* ===== FORM ===== */

/* Remove reCAPTCHA anchor box shadow */
.rc-anchor {
  box-shadow: 0;
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
}

/* reCAPTCHA submit button width */
.rc-anchor button[type="submit"] {
  margin-top: 8px;
  width: 302px;
}

/* All form labels bold and without bottom margin */
form label {
  margin-bottom: 0;
  font-weight: bold;
}

/* Sign-up form */
.form-signup {
  padding: 15px;
  margin: auto;
}

/* Boiji set fixed 302px width here — removed for responsive col-md-4 column.
   Alerts now fill the column width naturally. */
.form-signup .alert {
  width: 100%;
}

.form-signup input,
.form-signup select {
  margin-bottom: 1rem;
}

.form-signup button[type="submit"] {
  margin-top: 1rem;
  width: 100%;
}

/* Friend sign-up form */
.form-signup-friend input,
.form-signup-friend select {
  margin-bottom: 8px;
}

/* Sign-in / login form – centred, max-width box */
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin .alert {
  width: 302px;
}

/* Email field – joined top of stacked input group */
.form-signin input#email {
  width: 302px;
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Password field – joined bottom of stacked input group */
.form-signin input[type="password"] {
  width: 302px;
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin button[type="submit"] {
  margin-top: 1rem;
  width: 302px;
}

/* theme.scss override from boiji_client:
   home mobile login uses a submit button beside an anchor inside .btn-group.
   Without this later cascade, LOGIN keeps form.scss margin-top and drops below DAFTAR. */
.form-signin button[type="submit"] {
  width: initial;
  margin-top: 0px;
}

@media (max-width: 575.98px) {
  .form-home-signin .form-control,
  .form-home-signin input[type="text"],
  .form-home-signin input[type="password"] {
    width: 100%;
    max-width: 100%;
  }

  .form-home-signin .btn-group .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Bet form */
.form-bet {
  margin-bottom: 1em;
}

/* Fight pattern button group */
.form-fight-pattern .btn-group .btn {
  min-width: 54px;
}

@media (max-width: 767px) {
  .form-fight-pattern .btn-group {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .form-fight-pattern .btn-group .btn {
    min-width: 34px;
  }
}

/* Memo and book-filter input groups need top margin on mobile */
@media (max-width: 767px) {
  .form-memo .input-group {
    margin-top: 8px;
  }

  .form-book-filter .input-group {
    margin-top: 8px;
  }
}

/* ===== TABLE ===== */

/* Fixed-width index and bet-amount columns on wider screens */
@media (min-width: 576px) {
  table th.col-index {
    width: 4em;
  }

  table th.bet-amount {
    width: 12em;
  }

  table th.bet-pay {
    width: 12em;
  }
}

/* Modal check row – struck-through (de-selected) rows */
table tr.modal-check-row td {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Modal check row – un-struck (selected) rows */
table tr.modal-check-row.selected td {
  text-decoration: none;
  color: var(--color-text-dark);
}

/* Mobile result table – compact cell padding */
.app-mobile .table-result tr th,
.app-mobile .table-result tr td {
  padding: 4px;
}

/* Mobile no-border table – strip all cell borders */
.app-mobile .table-no-border tr th,
.app-mobile .table-no-border tr td {
  border: none;
}

/* ===== MODAL ===== */

/* Extra bottom padding so modal never clips page content on scroll */
.modal {
  padding-bottom: 3em;
}

/* Dark modal content */
.modal .modal-content {
  background-color: var(--color-bg-card);
  border: solid 1px var(--color-bg-card);
}

/* Darker modal header with white bottom border */
.modal .modal-content .modal-header {
  background-color: var(--color-border-modal-hdr);
  border-bottom: solid 4px white;
}

/* White close button */
.modal .modal-content .modal-header button.close {
  color: var(--color-text);
}

/* Modal header close button positioning */
.modal .modal-content .modal-header .close {
  position: relative;
  top: 5px;
  opacity: 1;
}

/* Modal title font size */
.modal .modal-content .modal-header .modal-title {
  font-size: 22px;
}

/* Modal backdrop sits below modals in stacking context */
.modal-backdrop {
  z-index: 999;
}

/* BS4 "in" class on backdrop → BS5 "show"; keep both for compat */
.modal-backdrop.in,
.modal-backdrop.show {
  opacity: 0.9;
}

/* Market selector modal — keep the BS4-alpha boiji_client modal geometry under BS5. */
#modal-market-selector .modal-content {
  background-color: rgba(0,0,0,0.75);
  border: solid 1px #ddd;
  border-radius: 16px;
}

#modal-market-selector .modal-header {
  display: block;
  background-color: transparent;
  border-bottom: solid 1px #ddd;
  padding: 15px;
}

#modal-market-selector .modal-header .close {
  float: right;
  position: relative;
  top: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
}

#modal-market-selector .modal-header .modal-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

#modal-market-selector .modal-body {
  padding: 15px;
}

#modal-market-selector .nav-tabs {
  border-bottom: solid 4px #fff !important;
}

#modal-market-selector .nav-tabs .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
}

#modal-market-selector .nav-tabs .tab-normal.active,
#modal-market-selector .nav-tabs .tab-normal.active:focus,
#modal-market-selector .nav-tabs .tab-normal.active:hover {
  background: #5cb85c !important;
  border-color: #5cb85c #5cb85c transparent !important;
  color: #fff !important;
  font-weight: bold;
}

#modal-market-selector .nav-tabs .tab-normal.active .text-success {
  color: #fff !important;
}

#modal-market-selector .nav-tabs .tab-prize123.active,
#modal-market-selector .nav-tabs .tab-prize123.active:focus,
#modal-market-selector .nav-tabs .tab-prize123.active:hover {
  background: #d9534f !important;
  border-color: #d9534f #d9534f transparent !important;
  color: #fff !important;
  font-weight: bold;
}

#modal-market-selector .nav-tabs .tab-prize123.active .text-danger {
  color: #fff !important;
}

#modal-market-selector .list-group {
  --bs-list-group-bg: #fff;
  --bs-list-group-color: #212529;
  --bs-list-group-border-color: #dee2e6;
  --bs-list-group-active-bg: #0d6efd;
  --bs-list-group-active-border-color: #0d6efd;
  --bs-list-group-active-color: #fff;
}

#modal-market-selector .list-group-item {
  background-color: var(--bs-list-group-bg) !important;
  border-color: var(--bs-list-group-border-color) !important;
  color: var(--bs-list-group-color) !important;
}

#modal-market-selector .list-group-item.active {
  background-color: var(--bs-list-group-active-bg) !important;
  border-color: var(--bs-list-group-active-border-color) !important;
  color: var(--bs-list-group-active-color) !important;
}

#modal-market-selector .list-group-item.active .text-muted,
#modal-market-selector .list-group-item.active .text-success,
#modal-market-selector .list-group-item.active .text-warning,
#modal-market-selector .list-group-item.active .text-danger {
  color: var(--bs-list-group-active-color) !important;
}

/* ===== RESULT-ROUND MODAL (round detail popup) =====
   Boiji renders <div class="text-muted small">LABEL</div> for each game label
   row; BS5 default .text-muted = #6c757d !important which renders almost
   invisible on dark modal bg. Override inside the modal so labels are
   readable while keeping them slightly muted vs. value cells. */
#modal-result-round .text-muted {
  color: var(--color-text-muted, #cccccc) !important;
}
/* Date heading above the breakdown table (rendered as <p class="text-muted small">) */
#modal-result-round #result-round-date {
  color: var(--color-text, #ffffff) !important;
  font-weight: 500;
}
/* Label cells (left column): white-ish so they read clearly */
#modal-result-round .table > tbody > tr > td:first-child .text-muted {
  color: var(--color-text, #ffffff) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Digit icons inside the breakdown table — fixed 40px source, but constrain
   so any larger asset never breaks the row layout. */
#modal-result-round .table img {
  max-width: 40px;
  max-height: 40px;
  vertical-align: middle;
}
/* SHIO source images are 128x128 (kuda.png, naga.png, …). Without a constraint
   the image overflows the row and can be clipped at the modal-body bottom.
   Match boiji's .icon-shio (max 40px) to keep the row height consistent
   with the rest of the breakdown rows. */
#modal-result-round .icon-shio {
  max-width: 40px;
  max-height: 40px;
  width: auto;
  height: auto;
}
/* Right (value) cell — small helper labels (AS / KOP / DEPAN / …) under each
   icon group; readable rather than ghost-faded. */
#modal-result-round .table .small {
  color: var(--color-text, #ffffff);
  opacity: 0.85;
}

/* ===== SOCIAL MEDIA / ICONS ===== */

/* Individual social icon row – image + label */
.icon-socmed img {
  width: 32px;
  height: 32px;
}

.icon-socmed > i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  vertical-align: middle;
}

.icon-socmed span {
  margin-left: 1em;
}

.icon-socmed {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: solid 1px var(--color-bg-medium);
}

.legacy-contact-row span {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
}

.legacy-contact-row small {
  opacity: 0.75;
  line-height: 1.2;
}

/* Mobile social media block (hidden on sm+) */
.social-media {
  margin-bottom: 8px;
}

@media (min-width: 576px) {
  .social-media {
    display: none;
  }
}

.social-media .icon-socmed {
  margin-bottom: 2px;
  padding: 4px;
  border: solid 1px rgb(50, 50, 50);
  border-radius: 32px;
  background-color: rgba(0, 0, 0, 0.5);
}

.social-media .icon-socmed img {
  width: 32px;
  height: 32px;
}

.social-media .icon-socmed span {
  margin-left: 1em;
}

/* Header-area social media block (hidden on xs, visible sm+) */
.header-info .social-media {
  display: none;
}

@media (min-width: 576px) {
  .header-info .social-media {
    display: block;
    margin-top: 4px;
    text-align: right;
    max-width: 560px;
    max-height: 34px;
    overflow: hidden;
    white-space: nowrap;
  }

  .header-info .social-media .contact-socmed-item {
    display: inline-block;
    margin-left: 4px;
    margin-bottom: 4px;
  }

  .header-info .social-media .icon-socmed {
    display: inline-block;
    padding: 2px 10px 2px 4px;
    border: solid 1px rgb(50, 50, 50);
    border-radius: 32px;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .header-info .social-media .icon-socmed img,
  .header-info .social-media .icon-socmed > i {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .header-info .social-media .icon-socmed span {
    display: inline-block;
    max-width: 160px;
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* ===== CAROUSEL ===== */

/* Home carousel – slight transparency overlay */
#homeCarousel {
  margin-bottom: 0.75em;
  opacity: 0.75;
}

/* ===== GAME BACKGROUND IMAGES ===== */

/* Per-market background images on 4D game page */
.app-game-4d.bg-singapore {
  background: url(/images/sgp.png);
}

.app-game-4d.bg-hongkong {
  background: url(/images/hk.png);
}

.app-game-4d.bg-sydney {
  background: url(/images/syd.png);
}

/* ===== GAME CONTENT / BET ENTRY ===== */

/* Game line row – separator between bet entries */
.game-content .game-line {
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: solid 1px #eee;
}

/* Single digit input box in 4D/3D/2D bet entry */
.game-content input.game-digit {
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  width: 50px;
  font-weight: bolder;
  font-size: 16px;
}

@media (max-width: 575px) {
  .game-content input.game-digit {
    width: 34px;
    display: initial;
  }
}

/* Bet amount input – full width */
.game-content input.game-bet-value {
  width: 100%;
}

/* ===== MOBILE PAGINATION ===== */

/* Large prev/next buttons for mobile bet list navigation */
.app-mobile .mobile-pagination .btn {
  padding-left: 32px;
  padding-right: 32px;
}

.app-mobile .mobile-pagination .btn i {
  font-size: 24px;
}

/* ===== CUSTOM 5-COLUMN GRID ===== */
/* BS4-alpha 5ths grid – used on market listing for 5 cards per row */

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 8px;
  padding-left: 8px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5ths {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}

/* ===== BS4-ALPHA → BS5 COMPAT ALIASES ===== */

/* .input-group-addon → .input-group-text (BS5 rename) */
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

/* .tag → .badge (BS5 rename) */
.tag {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.tag-success {
  color: #fff;
  background-color: #5cb85c;
}

.tag-info {
  color: #fff;
  background-color: #24BBF2;
}

.tag-warning {
  color: #111;
  background-color: #f0ad4e;
}

.tag-danger {
  color: #fff;
  background-color: #d9534f;
}

/* BS4 alpha float/text alignment aliases used verbatim by boiji_client templates. */
.float-xs-left {
  float: left !important;
}

.float-xs-right {
  float: right !important;
}

.text-xs-left {
  text-align: left !important;
}

.text-xs-center {
  text-align: center !important;
}

.text-xs-right {
  text-align: right !important;
}

/* BS4-alpha responsive visibility aliases.
   Define only the hidden breakpoint so the browser keeps each element's
   natural display value when visible (span stays inline, table stays table). */
@media (max-width: 575.98px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

/* ── Missing from boiji_client theme.scss — ported 2026-05-08 ── */

/* .all-markets — market list table dark background (theme.scss:142) */
.all-markets {
  margin-bottom: 0.75em;
}
.all-markets .table {
  background-color: rgba(0,0,0,0.95);
}

/* #video — video embed height (theme.scss:328) */
#video {
  height: 333px;
}
@media (max-width: 767px) {
  #video {
    height: 200px;
  }
}

/* .widget-lucky-number — fixed lucky number widget (theme.scss:372) */
.widget-lucky-number {
  cursor: pointer;
}
@media (min-width: 768px) {
  .widget-lucky-number {
    position: fixed;
    right: 0px;
    z-index: 100;
  }
}

/* ── Global dark theme for ALL .table elements ──
   Applies to profile, transactions, referrals, ledgers, payment_methods, paito,
   and any future page that renders .table anywhere in the dark-themed portal.
   Boiji_client theme.scss: body { color: white } — tables inherited dark body bg
   automatically under BS4-alpha. BS5 resets --bs-table-bg to white explicitly via
   CSS custom property — this global override undoes that reset for the entire portal,
   matching the boiji_client visual exactly regardless of whether .table sits inside
   a .card or a standalone container.
   All colors use theme variables (--color-*) defined in :root above so that
   switching themes changes the palette without touching this block. */
.table {
  /* BS4-alpha tables inherited dark body bg automatically.
     BS5 resets --bs-table-bg to white explicitly — override globally for dark theme. */
  --bs-table-bg:            transparent;
  /* Subtle white overlay for striped/hover rows — keeps dark feel */
  --bs-table-striped-bg:    rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg:      rgba(255, 255, 255, 0.06);
  /* Row separator uses theme border color */
  --bs-table-border-color:  var(--color-border-card, #333333);
  color: var(--color-text, #ffffff);
}

.table > :not(caption) > * > * {
  /* BS5 applies --bs-table-bg directly on td/th cells; override to transparent
     so each cell doesn't paint over the dark page/card background */
  background-color: transparent;
  color: var(--color-text, #ffffff);
  border-bottom-color: var(--color-border-card, #333333);
}

.table th[scope="row"],
.table thead th {
  /* Header/row-header cells: slightly muted to read as labels, not data values */
  color: var(--color-text-muted, rgba(255, 255, 255, 0.7));
}

.card-profile .table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =====================================================
   FORM ELEMENTS — dark theme override
   Bootstrap 5 default: white bg + dark text.
   Portal_legacy is dark themed — must override globally.
   ===================================================== */

/* Input fields — dark bg, semi-transparent border, white text.
   Must cover both .form-control (BS5 class) and bare input[type] selectors.
   The earlier rule "input[type=text] { border-color: #ccc }" has higher specificity
   (0,0,1,1) than .form-control (0,1,0) so we must explicitly list both selectors here. */
.form-control,
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel],
input[type=search],
textarea {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-white, #ffffff);
}
.form-control::placeholder,
input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder {
  color: var(--color-text-muted, rgba(255,255,255,0.4));
}
.form-control:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
textarea:focus {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  border-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary, #d4a520) 25%, transparent);
}
/* Disabled/readonly fields — even darker, clearly non-interactive */
.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(0,0,0,0.3);
  color: var(--color-text-muted, rgba(255,255,255,0.5));
  border-color: rgba(255,255,255,0.1);
}

/* Select dropdown — custom white chevron so it's visible on dark bg */
.form-select {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-white, #ffffff);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.form-select:focus {
  border-color: var(--color-primary, #d4a520);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary, #d4a520) 25%, transparent);
  background-color: var(--color-bg-medium, rgba(0,0,0,0.5));
  color: var(--color-text-white, #ffffff);
}
/* Native <option> elements fall back to OS render — set dark bg so they don't flash white */
.form-select option {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Input group addon (e.g. "Rp" prefix) — semi-transparent dark, white text */
.input-group-text {
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: var(--color-text-white, #ffffff);
}

/* =====================================================
   NAV TABS — dark theme
   boiji_client reference: border-bottom solid 4px, active tab
   highlighted with white bg + visible border sides.
   Overriding Bootstrap 5 default (white bg active tab, dark text).
   ===================================================== */
.nav-tabs {
  border-bottom: solid 2px rgba(255,255,255,0.3);
}
/* Inactive tab link — muted text, no background */
.nav-tabs .nav-link {
  color: var(--color-text-muted, rgba(255,255,255,0.6));
  border-color: transparent;
  background-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--color-text-white, #ffffff);
  border-color: transparent;
  background-color: rgba(255,255,255,0.05);
}
/* Active tab — white text, semi-transparent bg, visible side borders */
.nav-tabs .nav-link.active {
  color: var(--color-text-white, #ffffff);
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2) rgba(255,255,255,0.2) transparent;
  font-weight: 600;
}

/* =====================================================
   FORM LABELS — readable on dark bg
   Bootstrap 5 default label color is near-black (#212529).
   ===================================================== */
.form-label,
label {
  color: var(--color-text-muted, rgba(255,255,255,0.7));
}

/* Form labels INSIDE registration / payment cards must be brighter than the
   default muted color, otherwise the label sits on the card-body background
   (which is already a darker semi-transparent surface) and effectively becomes
   dark-on-dark in deeper themes. Use the bright text color so the field name
   is always readable regardless of theme. Applies to:
   - public/register.ejs (form.form-signup)
   - all .card.card-body labels in transaction registration flows
   (deposit.ejs / withdraw.ejs / transactions/*) */
form.form-signup label,
form.form-signup .form-label,
.card .card-body label,
.card .card-body .form-label,
.card-body > label,
.card-body > .form-label {
  color: var(--color-text-white, #ffffff);
}

/* Active type indicator on registration form (Bank / eWallet / Telefon).
   Default state = muted; active state (no .text-muted class) = primary accent. */
form.form-signup label > span:not(.text-muted) {
  color: var(--color-primary, #d4a520);
  font-weight: bold;
}

/* =====================================================
   BLOCKQUOTE / card-blockquote (BS4 alpha pattern used in deposit.ejs)
   ===================================================== */
blockquote,
.card-blockquote {
  color: var(--color-text-white, #ffffff);
  border-left: 3px solid var(--color-primary, #d4a520);
  padding-left: 1rem;
  margin: 0.5rem 0;
}

/* =====================================================
   ALERTS — dark semi-transparent variants
   Bootstrap 5 default alerts are light-colored (pastel bg + dark text).
   Override to match dark theme: semi-transparent tinted bg + bright text.
   ===================================================== */
.alert-danger {
  background-color: rgba(220,53,69,0.2);
  border-color: rgba(220,53,69,0.5);
  color: #ff6b7a;
}
.alert-success {
  background-color: rgba(25,135,84,0.2);
  border-color: rgba(25,135,84,0.5);
  color: #75d79a;
}
.alert-warning {
  background-color: rgba(255,193,7,0.15);
  border-color: rgba(255,193,7,0.4);
  color: #ffd452;
}
.alert-info {
  background-color: rgba(13,202,240,0.15);
  border-color: rgba(13,202,240,0.3);
  color: #6edff6;
}

/* =====================================================
   CARD-PRIMARY / CARD-INVERSE (BS4 alpha compat — deposit.ejs running request cards)
   In boiji_client BS4 alpha, .card-primary.card-inverse renders a dark-accented
   card with primary color background and white text.
   In portal_legacy we map this to a semi-transparent accent background with
   gold/primary border so the running deposit notice stands out visually.
   ===================================================== */
.card.card-primary.card-inverse,
.card.card-primary {
  background-color: color-mix(in srgb, var(--color-primary, #d4a520) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #d4a520) 50%, transparent);
  color: var(--color-text-white, #ffffff);
}
.card.card-primary.card-inverse .card-blockquote,
.card.card-primary .card-blockquote {
  border-left-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
}
.card.card-primary.card-inverse .small,
.card.card-primary .small {
  color: var(--color-text-muted, rgba(255,255,255,0.7));
}

/* =====================================================
   QRIS FORM GREEN BORDER (deposit QRIS tab form container)
   Matches boiji_client's visual emphasis for the auto-deposit QRIS form.
   ===================================================== */
.card[style*="border:2px solid #198754"] {
  border-color: #198754 !important;
}

/* =====================================================
   GAMES TAB COMPONENT (boiji_client UI structure)
   Used in dashboard.ejs via components/games-tab.ejs.
   UI ported from boiji_client/imports/ui/apps/app-games-tab.html:
     - Top tab row of large category icons (icon swaps on/off when selected)
     - Click tab → switches active pane (per-category game grid)
   Launch behavior is INDEPENDENT (uses /play_games/:id flow from portal_classic).
   ===================================================== */

/* Tab row wrapper — boiji uses bottom border under the row */
.games-tab {
  border-bottom: solid #fff 1px;
}
.games-tab .games-tab-row {
  margin-left: 0;
  margin-right: 0;
}

.col-games-tab {
  padding-top: 4px;
  padding-bottom: 4px;
}

.game-tab-select {
  cursor: pointer;
  user-select: none;
}
.game-tab-select.unclickable {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Boiji icon size: max-height ~120px on desktop. Scale down on mobile. */
.game-tab-icon {
  max-height: 120px;
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .game-tab-icon { max-height: 70px; }
}

/* Tab pane (per-category game grid) */
.games-tab-content { min-height: 200px; }
.games-tab-pane { padding: 8px 0; }

/* Game card — boiji parity:
   - Bordered/elevated thumbnail
   - Square aspect, image fills
   - Name below in small caps
   - MAIN/LOGIN button overlays on hover (kept from portal_classic UX) */
.boiji-game-card {
  cursor: pointer;
  margin-bottom: 8px;
}
.boiji-game-thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary, #d4a520) 35%, transparent);
  background: var(--color-bg-medium, rgba(0,0,0,0.4));
  aspect-ratio: 1 / 1;
  transition: border-color 0.2s, transform 0.2s;
}
.boiji-game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.boiji-game-card:hover .boiji-game-thumb {
  border-color: var(--color-primary, #d4a520);
  transform: translateY(-2px);
}
.boiji-game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.boiji-game-card:hover .boiji-game-overlay { opacity: 1; }

.boiji-game-name {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text-white, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Provider tile (Step A grid in external-game tabs) ──
   Text-only tile: provider name centered on a themed dark surface, same square aspect
   as game cards. Hover lift + border highlight = same affordance as boiji-game-card.
   Anonymous-friendly: clicking just drills down to the game list (no overlay). */
.provider-card {
  cursor: pointer;
  user-select: none;
  margin-bottom: 8px;
}
.provider-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary, #d4a520) 35%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary, #d4a520) 12%, var(--color-bg-medium, rgba(0,0,0,0.4))),
    var(--color-bg-medium, rgba(0,0,0,0.4)));
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.provider-card:hover .provider-tile {
  border-color: var(--color-primary, #d4a520);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary, #d4a520) 30%, transparent);
}
.provider-tile-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.6px;
  color: var(--color-text-white, #ffffff);
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
}
@media (max-width: 575.98px) {
  .provider-tile-name { font-size: 12px; }
}

/* Provider tile with logo image — image fits inside the square tile.
   `provider-tile-logo` modifier lets us tune padding only when an image is shown. */
.provider-tile.provider-tile-logo {
  padding: 14px;
}
.provider-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Soft brightness boost so dark logos remain legible on the themed dark tile.
     Avoid full white-tint — providers want their brand colors visible. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
@media (max-width: 575.98px) {
  .provider-tile.provider-tile-logo { padding: 10px; }
}

/* Active-tab highlight for SVG line-art icons.
   PNG icons swap _on/_off via JS `src=`; SVG icons reuse one file, so we tint
   them via CSS filter when the parent .game-tab-select is active.
   Detection: SVG path has `.svg` suffix — using attribute selector on the inner img. */
.game-tab-select.is-active .game-tab-icon[src*=".svg"] {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary, #d4a520) 70%, transparent));
}

/* ── Game list view (Step B — after provider selected) ──
   Search input + grid + KEMBALI button. Search is theme-aware dark input. */
.game-list-view .game-list-title {
  color: var(--color-primary, #d4a520);
  font-weight: 700;
  letter-spacing: 1px;
}
.game-list-view .input-group .form-control {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.4));
  border-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
}
.game-list-view .input-group .form-control::placeholder {
  color: var(--color-text-muted, rgba(255,255,255,0.5));
}
.game-list-view .input-group-text {
  background-color: var(--color-bg-medium, rgba(0,0,0,0.4));
  border-color: var(--color-primary, #d4a520);
  color: var(--color-text-white, #ffffff);
}
.game-list-view .btn-clear-game-filter {
  text-decoration: none;
}

/* KEMBALI button — boiji style: subtle link, left-aligned, with chevron. */
.games-tab-back-wrap .btn-deselect-game {
  color: var(--color-primary, #d4a520);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.games-tab-back-wrap .btn-deselect-game:hover {
  color: var(--color-secondary, #c0922a);
  text-decoration: underline;
}

/* ── Lucky Number widget (boiji parity, theme-aware accent) ──
   Canvas slot machine on the dashboard. The bar colour is driven by JS reading
   --color-primary at spin time so theme switches are picked up automatically.
   Container sizing matches boiji: full row width, ~80px tall, click target obvious. */
.lucky-number-widget {
  width: 100%;
  background-color: var(--color-bg-medium, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-primary, #d4a520);
  border-radius: 8px;
  padding: 8px;
}
.lucky-number-widget canvas {
  width: 100%;
  height: 80px;
  display: block;
  cursor: pointer;
}

/* ========================================
   FAVORIT SAYA — /favorites page + star button on game cards (portal_legacy)
   Ported from app_member (portal_classic_old) — adapted to portal_legacy theme vars.
   ======================================== */

/* Star button — sits over .card-game-col top-right. Click toggles favorite via
   global handler in layouts/body.ejs. Active state uses theme --color-primary. */
.game-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.game-fav-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
.game-fav-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}
.game-fav-btn.is-active {
  color: var(--color-primary);
  background: rgba(0, 0, 0, 0.6);
}
.game-fav-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* /favorites page */
.favorites-page-section { padding-top: 8px; }

/* Mobile dropdown — hidden on desktop */
.favorites-filter-dd { display: none; }

/* Desktop pill strip */
.favorites-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.favorites-filter-pill {
  padding: 7px 14px;
  border: 1px solid var(--color-border-card, rgba(255,255,255,0.15));
  border-radius: 6px;
  background: var(--color-bg-card, rgba(0,0,0,0.4));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.favorites-filter-pill:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
}
.favorites-filter-pill.is-active {
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

/* Empty state card */
.favorites-empty-state {
  background: var(--color-bg-card, rgba(0,0,0,0.4));
  border: 1px solid var(--color-border-card, rgba(255,255,255,0.1));
}
.favorites-empty-state.is-hidden { display: none; }
.favorites-empty-icon {
  color: var(--color-primary);
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent));
  margin-bottom: 6px;
}
.favorites-empty-title { color: #fff; font-weight: 700; }
.favorites-empty-subtitle { color: rgba(255,255,255,0.6); font-size: 14px; }

/* Favorites grid card slot for star button — leverages legacy .card.game-card-link styling */
.favorites-grid .card.game-card-link { position: relative; }

/* Mobile (<=880px): swap pill strip for custom dropdown */
@media (max-width: 880px) {
  .favorites-filter-pills { display: none; }
  .favorites-filter-dd {
    display: block;
    position: relative;
    margin-bottom: 12px;
  }
  .favorites-filter-dd-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--color-bg-card, rgba(0,0,0,0.5));
    border: 1px solid var(--color-border-card, rgba(255,255,255,0.15));
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
  }
  .favorites-filter-dd.is-open .favorites-filter-dd-trigger { border-color: var(--color-primary); }
  .ffd-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ffd-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.55);
    transition: transform 0.2s, color 0.15s;
  }
  .favorites-filter-dd.is-open .ffd-chevron { transform: rotate(180deg); color: var(--color-primary); }
  .favorites-filter-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-bg-card, rgba(0,0,0,0.9));
    border: 1px solid var(--color-border-card, rgba(255,255,255,0.15));
    border-radius: 6px;
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  }
  .favorites-filter-dd-menu[hidden] { display: none; }
  .favorites-filter-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    color: #fff;
    background: transparent;
    border: none;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
  }
  .favorites-filter-dd-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--color-primary);
  }
  .favorites-filter-dd-item.is-active {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 600;
  }

  .game-fav-btn {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
  }
  .game-fav-btn svg {
    width: 14px;
    height: 14px;
  }
}