/* ===== BASE ===== */
html { color: #555555; }
body { font-size: 13px; font-family: Arial, sans-serif, trebuchet; }
h4 { font-weight: 500; }
.menu-link { color: #337ab7; text-decoration: none; }
.menu-link:hover { text-decoration: underline; }
ul { list-style: none; padding-left: 0; }
hr { border-top: 1px solid #ddd; border-bottom: 1px solid #fff; background: transparent; }
table td { padding: 2px; } /* compact non-.table tables (filter forms etc.) */

/* ===== LAYOUT ===== */
.container { max-width: 520px; margin: 0 auto; }
#app { min-height: 100vh; }

/* ===== TYPOGRAPHY ===== */
h4 { border-bottom: 1px solid #ddd; padding-bottom: 13px; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.red { color: #f1453d; }

/* ===== TABLE ===== */
.table {
  width: 100%; max-width: 100%; margin-bottom: 2rem; background-color: #fff;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 1px 2px 0 rgba(0,0,0,.24);
  -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 1px 2px 0 rgba(0,0,0,.24);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 1px 2px 0 rgba(0,0,0,.24);
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  text-align: left; padding: 0.6rem; vertical-align: top; border-top: 0;
  -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.table > thead > tr > th { font-weight: bold; color: #757575; vertical-align: bottom; border-bottom: 1px solid rgba(0,0,0,.12); }
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td { border-top: 0; }
.table > tbody + tbody { border-top: 1px solid rgba(0,0,0,.12); }
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th { background-color: rgba(0,0,0,.12); }
.table-hover.table-mc-light-blue > tbody > tr:hover > td,
.table-hover.table-mc-light-blue > tbody > tr:hover > th { background-color: #b3e5fc; }

/* ===== NAVIGATION MENU ===== */
ul#menu { max-width: 320px; min-width: 220px; position: relative; list-style: none; margin: 0 auto; padding: 0; display: block; }
ul#menu li a { font: normal 12px Arial; display: block; text-decoration: none; line-height: 26px; color: #fff; }
ul#menu li { zoom: 1; list-style: none; text-align: center; margin-bottom: 3px; border-radius: 3px; padding: 3px; }
.nav-stacked > li { margin-top: 0px; margin-bottom: 0px; border-bottom: 1px solid #ddd; font-weight: bold; }
.nav > li > a { padding-top: 5px; padding-bottom: 5px; }
.nav-stacked > li.market-offline { background-color: #f5f5f5; }
.nav-stacked > li.market-offline span { display: block; padding: 5px 15px; color: #aaa; cursor: default; }
.nav-stacked > li > a.market-offline { color: #aaa; background-color: #f5f5f5; }

/* ===== MENU COLOR THEMES ===== */
.menumerah li { background: #c13731; }
.menumerah li:hover { background: #df4f38; }
.menuhijau li { background: #00786a; }
.menuhijau li:hover { background: #009587; }
.menubiru li { background: #007ec3; }
.menubiru li:hover { background: #00aff7; }
li.menuorange { background: #ffb700; }
li.menuorange:hover { background: #fecd00; }
li.menuorange a { color: #fff; }

/* ===== GAME INFO BOX ===== */
.infogame { background: #fbfbfb; border: 1px solid #ccc; border-radius: 3px; padding: 5px; }

/* ===== BETTING TABLE ===== */
table.tbet {
  border: 1px solid #ccc; max-width: 520px; min-width: 250px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 1px 2px 0 rgba(0,0,0,.24);
}
table.tbet tr td { border: 1px solid #ccc; font-size: 11.5px; }

/* ===== IMAGES ===== */
.logo-img { max-width: 200px; display: block; margin: 0 auto; }
.responsive-status { max-width: 100px; max-height: 100px; }
.status { padding: 15px; padding-bottom: 0px; }

/* ===== PIN INPUT ===== */
.pin-boxes { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.pin-boxes input { width: 40px; height: 40px; text-align: center; font-size: 18px; border: 2px solid #ccc; border-radius: 4px; }
.pin-boxes input:focus { border-color: #5bc0de; outline: none; }

/* ===== BUTTONS ===== */
.myButton { background: #5cb85c; color: #fff; border: 1px solid #4cae4c; border-radius: 4px; padding: 6px 12px; text-decoration: none; display: inline-block; }
.myButton:hover { background: #449d44; color: #fff; text-decoration: none; }
.link { text-decoration: none; color: #555; }
.deposit-method-btn.active { background: #5bc0de; color: #fff; }

/* ===== FORMS ===== */
textarea { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; }
.panel { margin-top: 10px; }
.form-group { margin-bottom: 15px; }
.bet1 { border: 1px solid #ccc; padding: 5px; }
.bet2 { margin-top: 5px; }

/* ===== ALERTS ===== */
.alert { padding: 10px 15px; border-radius: 4px; margin-bottom: 15px; }
.alert-info    { background: #d9edf7; border: 1px solid #bce8f1; color: #31708f; }
.alert-danger  { background: #f2dede; border: 1px solid #ebccd1; color: #a94442; }
.alert-success { background: #dff0d8; border: 1px solid #d6e9c6; color: #3c763d; }

/* ===== BADGES ===== */
.badge-count { background: red; color: white; border-radius: 50%; padding: 2px 6px; font-size: 11px; margin-left: 4px; }

/* ===== SPACING UTILITIES (matches reference app.css) ===== */
.m-xxs { margin: 2px 4px; }
.m-xs  { margin: 5px; }
.m-sm  { margin: 10px; }
.m     { margin: 15px; }
.m-md  { margin: 20px; }
.m-lg  { margin: 30px; }
.m-xl  { margin: 50px; }
.m-n   { margin: 0 !important; }

.m-l-none { margin-left: 0 !important; }
.m-l-xs   { margin-left: 5px; }
.m-l-sm   { margin-left: 10px; }
.m-l      { margin-left: 15px; }
.m-l-md   { margin-left: 20px; }
.m-l-lg   { margin-left: 30px; }
.m-l-xl   { margin-left: 40px; }
.m-l-xxl  { margin-left: 50px; }
.m-l-n-xxs { margin-left: -1px; }
.m-l-n-xs  { margin-left: -5px; }
.m-l-n-sm  { margin-left: -10px; }
.m-l-n     { margin-left: -15px; }
.m-l-n-md  { margin-left: -20px; }
.m-l-n-lg  { margin-left: -30px; }
.m-l-n-xl  { margin-left: -40px; }
.m-l-n-xxl { margin-left: -50px; }

.m-t-none { margin-top: 0 !important; }
.m-t-xxs  { margin-top: 1px; }
.m-t-xs   { margin-top: 5px; }
.m-t-sm   { margin-top: 10px; }
.m-t      { margin-top: 15px; }
.m-t-md   { margin-top: 20px; }
.m-t-lg   { margin-top: 30px; }
.m-t-xl   { margin-top: 40px; }
.m-t-xxl  { margin-top: 50px; }
.m-t-n-xxs { margin-top: -1px; }
.m-t-n-xs  { margin-top: -5px; }
.m-t-n-sm  { margin-top: -10px; }
.m-t-n     { margin-top: -15px; }
.m-t-n-md  { margin-top: -20px; }
.m-t-n-lg  { margin-top: -30px; }
.m-t-n-xl  { margin-top: -40px; }
.m-t-n-xxl { margin-top: -50px; }

.m-r-none { margin-right: 0 !important; }
.m-r-xxs  { margin-right: 1px; }
.m-r-xs   { margin-right: 5px; }
.m-r-sm   { margin-right: 10px; }
.m-r      { margin-right: 15px; }
.m-r-md   { margin-right: 20px; }
.m-r-lg   { margin-right: 30px; }
.m-r-xl   { margin-right: 40px; }
.m-r-xxl  { margin-right: 50px; }
.m-r-n-xxs { margin-right: -1px; }
.m-r-n-xs  { margin-right: -5px; }
.m-r-n-sm  { margin-right: -10px; }
.m-r-n     { margin-right: -15px; }
.m-r-n-md  { margin-right: -20px; }
.m-r-n-lg  { margin-right: -30px; }
.m-r-n-xl  { margin-right: -40px; }
.m-r-n-xxl { margin-right: -50px; }

.m-b-none { margin-bottom: 0 !important; }
.m-b-xxs  { margin-bottom: 1px; }
.m-b-xs   { margin-bottom: 5px; }
.m-b-sm   { margin-bottom: 10px; }
.m-b      { margin-bottom: 15px; }
.m-b-md   { margin-bottom: 20px; }
.m-b-lg   { margin-bottom: 30px; }
.m-b-xl   { margin-bottom: 40px; }
.m-b-xxl  { margin-bottom: 50px; }
.m-b-n-xxs { margin-bottom: -1px; }
.m-b-n-xs  { margin-bottom: -5px; }
.m-b-n-sm  { margin-bottom: -10px; }
.m-b-n     { margin-bottom: -15px; }
.m-b-n-md  { margin-bottom: -20px; }
.m-b-n-lg  { margin-bottom: -30px; }
.m-b-n-xl  { margin-bottom: -40px; }
.m-b-n-xxl { margin-bottom: -50px; }