/* BALA99 Admin Panel Stylesheet - Exact Replica */
:root {
  --primary-yellow: #fdb913;
  --secondary-yellow: #e5a408;
  --header-yellow: #fdb913;
  --sidebar-yellow: #fdb913;
  --magenta-bar: #c2185b;
  --magenta-btn: #c2185b;
  --magenta-hover: #ad1457;
  --bg-light: #f4f6f9;
  --text-dark: #212529;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  
  /* Role card colors */
  --c-subowner: #ff5722;
  --c-superadmin: #00bcd4;
  --c-admin: #03a9f4;
  --c-subadmin: #e53935;
  --c-master: #1e88e5;
  --c-superagent: #ffa000;
  --c-agent: #ffeb3b;
  --c-client: #37474f;
  
  /* Action circle colors */
  --circle-green: #2e7d32;
  --circle-cyan: #00acc1;
  --circle-red: #c62828;
  --circle-blue: #1976d2;
  --circle-teal: #00897b;
  --circle-purple: #7b1fa2;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, button, input, select, textarea, table, th, td, p, span, div, a, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: #f8f9fa;
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.5;
  zoom: 1.05;
  -webkit-font-smoothing: antialiased;
}

/* Explicit Font Awesome icon font protection - guarantees all icons display perfectly */
.fa,
.fas,
.far,
.fal,
.fad,
.fab,
i[class*="fa-"],
.fa-solid,
.fa-regular,
.fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.fa-solid, .fas {
  font-weight: 900 !important;
}

.fa-regular, .far {
  font-weight: 400 !important;
}

.fa-brands, .fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}


/* ===================================================
   1. LOGIN PAGE STYLES (Screenshot 1 Desktop & Screenshot 2 Mobile Exact Replica)
   =================================================== */
.login-view {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #febd00;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
}

/* Desktop Sports Backdrop */
.login-top-backdrop {
  height: 52vh;
  min-height: 360px;
  width: 100%;
  background-color: #0f1430;
  background-image: url('assets/bet99expro/sports-banner.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
}

.login-bottom-section {
  flex: 1;
  min-height: 48vh;
  background-color: #febd00;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 22px;
  position: relative;
}

/* Floating Card Centered on Horizon */
.login-card-wrapper {
  position: absolute;
  top: 52vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 90%;
  max-width: 410px;
}

.login-card {
  background: #febd00;
  border-radius: 28px;
  padding: 34px 26px 26px;
  position: relative;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
  text-align: center;
}

/* Circular BALA 69 Badge (Exact Screenshot Replica: Red outline, white ring, golden yellow core, bold BALA 69) */
.login-badge-logo {
  position: absolute;
  top: -26px;
  right: 12px;
  width: 78px;
  height: 78px;
  background: #febd00;
  border-radius: 50%;
  border: 3.5px solid #ffffff;
  outline: 2px solid #e91e63;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  z-index: 25;
}

.login-badge-logo span:first-child {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.login-badge-logo span:last-child {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.login-title {
  font-size: 26px;
  font-weight: 800;
  color: #000000;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.login-form-group {
  margin-bottom: 15px;
}

.login-input {
  width: 100%;
  height: 48px;
  padding: 12px 22px;
  border-radius: 9999px;
  border: 1.5px solid #ffffff;
  outline: none;
  font-size: 15.5px;
  font-weight: 500;
  background: #ffffff;
  color: #222222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.login-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.login-input:focus {
  border-color: #c2185b;
  box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.22);
}

.login-submit-btn {
  width: 100%;
  height: 48px;
  background-color: #c2185b;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(194, 24, 91, 0.4);
  transition: background 0.2s, transform 0.1s;
}

.login-submit-btn:hover {
  background-color: #ad1457;
}

.login-submit-btn:active {
  transform: scale(0.98);
}

.login-footer {
  font-size: 14.5px;
  font-weight: 600;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.betfair-logo-img {
  height: 18px;
  filter: brightness(0);
  vertical-align: middle;
}

/* ===================================================
   MOBILE VIEW ADAPTATION (Screenshot 2 Exact Replica)
   =================================================== */
@media (max-width: 767px) {
  .login-view {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #febd00;
  }

  /* Casino Roulette Table Banner on Mobile */
  .login-top-backdrop {
    height: 38vh;
    min-height: 240px;
    max-height: 320px;
    width: 100%;
    background-image: url('assets/bet99expro/casino-banner.png');
    background-size: cover;
    background-position: center top;
    flex-shrink: 0;
  }

  /* Bottom Golden Sheet Starting Immediately Under Banner */
  .login-card-wrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin-top: -24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 10;
  }

  .login-card {
    background: #febd00;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 34px 22px 18px;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .login-badge-logo {
    position: absolute;
    top: -38px;
    right: 20px;
    width: 82px;
    height: 82px;
    border: 3.5px solid #ffffff;
    outline: 2px solid #e91e63;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .login-badge-logo span:first-child {
    font-size: 17px;
  }

  .login-badge-logo span:last-child {
    font-size: 25px;
  }

  .login-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 22px;
  }

  .login-input {
    height: 50px;
    font-size: 16px;
    margin-bottom: 2px;
  }

  .login-submit-btn {
    height: 50px;
    font-size: 19px;
    margin-top: 8px;
  }

  .login-bottom-section {
    min-height: auto;
    flex: 0 0 auto;
    background-color: #febd00;
    padding: 24px 0 28px;
  }

  .login-footer {
    font-size: 15px;
  }

  .betfair-logo-img {
    height: 20px;
  }
}

/* ===================================================
   2. APP LAYOUT (HEADER & SIDEBAR)
   =================================================== */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* Header */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background-color: var(--header-yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
  cursor: pointer;
}

.header-brand-img {
  height: 38px;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.hamburger-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #111;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.3);
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15.5px;
  color: #111;
  cursor: pointer;
  position: relative;
}

.user-profile-pill i {
  font-size: 17px;
}

.user-profile-pill:hover {
  background: rgba(255, 255, 255, 0.2);
}

.user-dropdown-menu {
  position: absolute;
  top: 110%;
  right: 0;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  border: 1px solid #ddd;
  min-width: 180px;
  display: none;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;
}

.user-dropdown-menu.show {
  display: flex;
}

.user-dropdown-item {
  padding: 11px 16px;
  color: #333;
  text-decoration: none;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}

.user-dropdown-item i {
  font-size: 17px;
  width: 18px;
}

.user-dropdown-item:hover {
  background: #f1f3f5;
  color: var(--magenta-btn);
}

/* Sidebar */
.app-sidebar {
  width: 230px;
  background-color: var(--sidebar-yellow);
  position: fixed;
  top: 52px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
  transition: transform 0.25s ease, width 0.25s ease;
  border-right: 1px solid rgba(0,0,0,0.06);
}

.app-sidebar.collapsed {
  transform: translateX(-100%);
}

.sidebar-menu {
  list-style: none;
  padding: 10px 0;
}

.sidebar-item {
  position: relative;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #111;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}

.sidebar-link-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-link-content i {
  font-size: 18px;
  width: 22px;
  text-align: center;
}

.sidebar-link:hover, .sidebar-link.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: #000;
}

.sidebar-submenu {
  list-style: none;
  background-color: rgba(0,0,0,0.04);
  display: none;
}

.sidebar-submenu.show {
  display: block;
}

.sidebar-submenu-link {
  display: block;
  padding: 8px 18px 8px 50px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

.sidebar-submenu-link:hover, .sidebar-submenu-link.active {
  background-color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

/* Main Content Area */
.app-main {
  flex: 1;
  margin-left: 230px;
  margin-top: 52px;
  padding: 14px 20px;
  min-height: calc(100vh - 52px);
  background-color: #ffffff;
  transition: margin-left 0.25s ease;
}

.app-sidebar.collapsed ~ .app-main {
  margin-left: 0;
}

/* Magenta Top Strip in Dashboard & Pages */
.magenta-accent-strip {
  height: 30px;
  background-color: var(--magenta-bar);
  border-radius: 4px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
}

.magenta-strip-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
}


/* ===================================================
   3. DASHBOARD PAGE (Exact replica of admin.bala99.com)
   =================================================== */
.top-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.summary-card {
  border-radius: 6px;
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.summary-card.bg-green {
  background: linear-gradient(45deg, #047604, #06a706) !important;
  color: #ffffff;
}

.summary-card.bg-yellow {
  background: linear-gradient(45deg, #e8e800, #ffff1c) !important;
  color: #222222;
}

.summary-card.bg-blue {
  background: linear-gradient(45deg, #0073ff, #338fff) !important;
  color: #ffffff;
}

.summary-card .label {
  font-size: 15px;
  font-weight: 600;
}

.summary-card .value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* 3-Column Roles Grid matching admin.bala99.com desktop */
.roles-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.role-card {
  border-radius: 6px;
  padding: 10px 16px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.role-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.role-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ffffff;
  text-transform: capitalize;
}

.role-card-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-card-badge-row .count-pill {
  min-width: 22px;
  height: 22px;
  background-color: #e8edf8;
  color: #000000;
  border-radius: 9999px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.role-card-badge-row .divider {
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  margin: 0 2px;
}

.role-card-badge-row .amount-pill {
  min-width: 22px;
  height: 22px;
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 9999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* Exact Role Card Background Colors from admin.bala99.com */
.card-subowner { background-color: #ff6501 !important; color: #fff; }
.card-superadmin { background-color: #17a2b8 !important; color: #fff; }
.card-admin { background: linear-gradient(45deg, #00bcd4, #08e3ff) !important; color: #fff; }
.card-subadmin { background: linear-gradient(45deg, #d60404, #fb1212) !important; color: #fff; }
.card-master { background: linear-gradient(45deg, #0073ff, #338fff) !important; color: #fff; }
.card-superagent { background-color: #febd00 !important; color: #fff; }
.card-agent { background: linear-gradient(45deg, #e8e800, #ffff1c) !important; color: #000 !important; }
.card-agent .role-card-title { color: #000000 !important; }
.card-agent .role-card-badge-row .divider { color: #000000 !important; }
.card-client { background-color: #343a40 !important; color: #fff; }

/* Quick Action Circular Icons Grid (4 columns) */
.quick-actions-container {
  margin-top: 14px;
  padding: 10px 0 35px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 16px;
  max-width: 860px;
  margin: 0 auto;
}

.quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #222;
  transition: transform 0.2s;
}

.quick-action-item:hover {
  transform: translateY(-4px);
}

.quick-action-circle {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 34px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: box-shadow 0.2s, transform 0.2s;
}

.quick-action-item:hover .quick-action-circle {
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

.quick-action-label {
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  color: #212529;
}

/* Circle Colors */
.circle-live-bets { background-color: #2e7d32; }
.circle-live-matches { background-color: #00bcd4; }
.circle-live-casino { background-color: #d32f2f; }
.circle-my-settlement { background-color: #1976d2; }
.circle-master-details { background-color: #00bcd4; }
.circle-sports-betting { background-color: #2e7d32; }
.circle-ledger { background-color: #1976d2; }
.circle-all-report { background-color: #d32f2f; }

/* ===================================================
   4. SUBOWNER MASTER / OWNER DETAILS (Screenshot 3)
   =================================================== */
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.page-title {
  font-size: 23px;
  font-weight: 800;
  color: #212529;
}

/* Master Top Magenta Stripe - Exact Screenshot Replica */
.master-top-magenta-stripe {
  height: 28px;
  background-color: #c2185b;
  margin: -14px -20px 14px -20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
}

/* ===================================================
   CREATE USER INLINE FORM (Exact Replica of Screenshot)
   =================================================== */
.create-user-card {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: fadeInDown 0.25s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.create-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 20px;
}

.create-form-field {
  display: flex;
  flex-direction: column;
}

.create-form-label {
  font-size: 13.5px;
  font-weight: 500;
  color: #212529;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.create-form-label .text-danger-red {
  color: #dc3545;
  font-size: 11px;
  font-weight: 500;
}

.create-form-input,
.create-form-select {
  width: 100%;
  height: 38px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  color: #495057;
  background-color: #ffffff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.create-form-input:focus,
.create-form-select:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.create-form-input.readonly-input {
  background-color: #e9ecef !important;
  color: #495057;
  cursor: not-allowed;
}

.create-form-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-create-cancel {
  background-color: #dc3545;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s;
}

.btn-create-cancel:hover {
  background-color: #bb2d3b;
}

.btn-create-save {
  background-color: #047604;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 7px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s;
}

.btn-create-save:hover {
  background-color: #035c03;
}

.master-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.master-title-text {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.header-action-buttons {
  display: flex;
  gap: 12px;
}

.btn-update-limit-green {
  background-color: #008000;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 7px 15px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.btn-update-limit-green:hover {
  background-color: #006400;
}

.btn-update-limit-green i {
  font-size: 16px;
}

.btn-create-yellow {
  background-color: #fdb913;
  color: #111111;
  border: none;
  border-radius: 4px;
  padding: 7px 15px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.btn-create-yellow:hover {
  background-color: #e5a70f;
}

.btn-create-yellow i {
  font-size: 16px;
}

/* Segmented Active / Inactive Tabs (Exact Screenshot) */
.master-status-tabs-container {
  margin-bottom: 12px;
}

.master-status-tabs {
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ced4da;
}

.master-status-tab {
  padding: 6px 22px;
  border: none;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  background-color: #e9ecef;
  color: #495057;
  transition: all 0.15s;
}

.master-status-tab.active {
  background-color: #fdb913;
  color: #111111;
}

.master-status-tab:not(.active):hover {
  background-color: #dde2e6;
}

.btn-update-limit {
  background-color: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-update-limit i {
  font-size: 17px;
}

.btn-create {
  background-color: var(--primary-yellow);
  color: #111;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-create i {
  font-size: 17px;
}

/* Tabs */
.status-tabs {
  display: flex;
  margin-bottom: 14px;
}

.tab-btn {
  padding: 8px 20px;
  border: none;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.tab-btn.active {
  background-color: var(--primary-yellow);
  color: #111;
  border-radius: 4px 0 0 4px;
}

.tab-btn.inactive {
  background-color: #e9ecef;
  color: #495057;
  border-radius: 0 4px 4px 0;
}

/* Filter Bar (Show Entries & Search) */
.table-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.entries-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  color: #444;
}

.entries-select {
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  outline: none;
  font-size: 15.5px;
}

.search-input-group {
  display: flex;
  align-items: center;
}

.search-input {
  padding: 7px 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  outline: none;
  font-size: 15.5px;
  min-width: 240px;
}

/* Custom Table */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #ffffff;
  margin-bottom: 16px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  text-align: left;
}

.custom-table th {
  background-color: var(--primary-yellow);
  color: #111;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  font-size: 15.5px;
}

.custom-table td {
  padding: 10px 12px;
  border: 1px solid #dee2e6;
  vertical-align: middle;
  white-space: nowrap;
  color: #333;
  font-size: 15.5px;
}

.custom-table tbody tr:nth-child(even) {
  background-color: #fdfdfd;
}

.custom-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Multi-tier Table Header */
.table-header-group th {
  text-align: center;
}

/* User cell with action trigger */
.user-action-cell {
  position: relative;
  cursor: pointer;
}

.user-badge-tag {
  background-color: #6c757d;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  margin-right: 4px;
}

.user-id-text {
  color: #0d6efd;
  font-weight: 700;
  font-size: 15.5px;
}

.dropdown-arrow-icon {
  margin-left: 6px;
  font-size: 15px;
  color: #555;
}

/* Row Action Dropdown Menu (Screenshot 3) */
.row-action-menu {
  position: absolute;
  top: 100%;
  left: 10px;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  min-width: 220px;
  z-index: 1050;
  display: none;
}

.row-action-menu.show {
  display: block;
}

.row-action-item {
  padding: 9px 14px;
  font-size: 15.5px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
  transition: background 0.15s;
}

.row-action-item:last-child {
  border-bottom: none;
}

.row-action-item:hover {
  background-color: #f0f4f8;
  color: #0d6efd;
}

.row-action-item i {
  width: 18px;
  color: #555;
  font-size: 16px;
}

/* Bet Lock Button */
.btn-bet-lock {
  background-color: #d32f2f;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-bet-lock.locked {
  background-color: #388e3c;
}

/* WhatsApp and Copy Icons */
.whatsapp-icon {
  color: #25d366;
  margin-left: 8px;
  font-size: 20px;
  vertical-align: middle;
  cursor: pointer;
}

.copy-icon {
  color: #6c757d;
  margin-left: 8px;
  font-size: 17px;
  vertical-align: middle;
  cursor: pointer;
}

/* Exact Production Master Table Styling (Screenshot admin.bala99.com/app/client_details/agent/1) */
.master-table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #ffffff;
  margin-bottom: 16px;
}

.master-exact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.master-exact-table thead tr th {
  background-color: #f5a623 !important;
  color: #111111;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 15px;
  white-space: nowrap;
}

.master-exact-table thead tr th.text-center {
  text-align: center;
}

.master-exact-table thead tr.table-header-sub th {
  background-color: #f5a623 !important;
  color: #111111;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
}

.master-exact-table tbody tr td {
  padding: 7px 10px;
  border: 1px solid #e9ecef;
  font-size: 15.5px;
  color: #212529;
  vertical-align: middle;
  white-space: nowrap;
}

.master-exact-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Action Trigger Pill matching [ 1 client ▼ ] */
.btn-downline-action-pill {
  background-color: #5c6773;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}

.btn-downline-action-pill:hover {
  background-color: #495057;
}

.btn-downline-action-pill i {
  font-size: 13px;
}

/* WhatsApp gold icon matching screenshot */
.whatsapp-gold-icon {
  color: #e69500;
  font-size: 19px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  transition: transform 0.15s;
}

.whatsapp-gold-icon:hover {
  transform: scale(1.15);
}

/* Copy outline icon */
.copy-action-icon {
  color: #6c757d;
  font-size: 16px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  transition: color 0.15s;
}

.copy-action-icon:hover {
  color: #111111;
}

/* Red Bet Lock Button matching screenshot */
.btn-bet-lock-red {
  background-color: #d32f2f;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-bet-lock-red:hover {
  background-color: #b71c1c;
}

.btn-bet-lock-red.locked {
  background-color: #2e7d32;
}

.cell-user-id {
  color: #333333;
  font-weight: 500;
}

.cell-upline {
  color: #333333;
}

.cell-name {
  color: #212529;
  font-weight: 500;
}

.cell-mobile {
  color: #333333;
}

.cell-password {
  color: #333333;
}

.cell-num {
  text-align: center;
}

/* ===================================================
   LEDGER, SETTLEMENT & WINNING CLIENTS STYLES (EXACT REPLICAS)
   =================================================== */
.ledger-title-card {
  background-color: #f1f3f5;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 21px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 12px;
}

.ledger-box-container {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 12px 14px 4px;
}

.ledger-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ledger-filter-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ledger-select-sports {
  padding: 6px 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15.5px;
  min-width: 200px;
  outline: none;
  background-color: #fff;
}

.subowner-person-select-full {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15.5px;
  outline: none;
  background-color: #fff;
}

.btn-subowner-settlement-yellow {
  background-color: #fdb913;
  color: #111;
  border: none;
  border-radius: 4px;
  padding: 7px 22px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.btn-subowner-settlement-yellow:hover {
  background-color: #e5a70f;
}

/* Winning Clients Exact Layout */
.winning-clients-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  background: #ffffff;
}

.wc-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wc-filter-field label {
  font-size: 14.5px;
  font-weight: 700;
  color: #333;
}

.wc-date-input, .wc-select-input, .wc-text-input {
  padding: 7px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15.5px;
  outline: none;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.wc-date-input:focus, .wc-select-input:focus, .wc-text-input:focus {
  border-color: #fdb913;
  box-shadow: 0 0 0 2px rgba(253, 185, 19, 0.25);
}

.winning-clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.wc-card-winners {
  border: 1px solid #2e7d32;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.wc-card-losers {
  border: 1px solid #d32f2f;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.wc-header-green {
  background-color: #008000;
  color: #ffffff;
  text-align: center;
  padding: 7px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
}

.wc-header-red {
  background-color: #d32f2f;
  color: #ffffff;
  text-align: center;
  padding: 7px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
}

.wc-subtable {
  width: 100%;
  border-collapse: collapse;
}

.wc-subtable thead th.th-green {
  background-color: #008000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  font-weight: 700;
  padding: 8px 10px;
  font-size: 15px;
}

.wc-subtable thead th.th-red {
  background-color: #d32f2f !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  font-weight: 700;
  padding: 8px 10px;
  font-size: 15px;
}

.wc-subtable tbody tr td {
  padding: 7px 10px;
  border: 1px solid #e9ecef;
  font-size: 15px;
  color: #212529;
  vertical-align: middle;
}

.wc-subtable tbody tr:hover {
  background-color: #f8f9fa;
}

.wc-amount-win {
  color: #008000;
  font-weight: 700;
  text-align: right;
  padding-right: 20px;
}

.wc-amount-loss {
  color: #d32f2f;
  font-weight: 700;
  text-align: right;
  padding-right: 20px;
}

/* Exact Winning Clients Footer and Pagination matching Screenshot */
.wc-table-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  padding: 8px 18px;
}

.wc-total-lbl {
  font-size: 15.5px;
  font-weight: 700;
  color: #212529;
}

.wc-total-val-green {
  font-size: 16px;
  font-weight: 800;
  color: #008000;
}

.wc-total-val-red {
  font-size: 16px;
  font-weight: 800;
  color: #008000;
}

.wc-pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background-color: #ffffff;
}

.wc-page-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wc-btn-page-nav {
  background: transparent;
  border: none;
  font-size: 14.5px;
  font-weight: 500;
  color: #6c757d;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s;
}

.wc-btn-page-nav:hover {
  color: #212529;
  text-decoration: underline;
}

.wc-btn-page-num {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #212529;
  font-size: 14.5px;
  font-weight: 700;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wc-btn-page-num.active {
  background: #f5a623;
  border-color: #f5a623;
  color: #ffffff;
}

.wc-page-records-text {
  font-size: 14px;
  color: #6c757d;
  margin-left: 12px;
}

/* Exact Table Footer matching screenshots */
.ledger-exact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 8px 16px;
  border-radius: 0 0 4px 4px;
  margin-bottom: 12px;
}

.ledger-footer-total-text {
  font-weight: 700;
  font-size: 15.5px;
  color: #212529;
}

.total-pill-green-badge {
  background-color: #2e7d32;
  color: #ffffff;
  padding: 3px 14px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
}

.trophy-gold {
  color: #f0a500;
  font-size: 17px;
  margin-right: 6px;
  vertical-align: middle;
}

.badge-trophy-num {
  background-color: #ff9800;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Pagination */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 15.5px;
}

.pagination-btn {
  padding: 5px 11px;
  border: 1px solid #dee2e6;
  background: #ffffff;
  color: #495057;
  cursor: pointer;
  border-radius: 3px;
  font-size: 15px;
}


.pagination-btn.active {
  background-color: var(--primary-yellow);
  color: #111;
  border-color: var(--primary-yellow);
  font-weight: 700;
}

/* ===================================================
   5. SPORT'S BETTING COMPLETE DETAILS (Screenshot 4)
   =================================================== */
.sports-table th {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 10px 14px;
  font-weight: 700;
  border: none;
}

.sports-table td {
  padding: 10px 14px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.match-name-link {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.match-name-link:hover {
  text-decoration: underline;
}

.winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #ff9800;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

.winner-badge i {
  font-size: 12px;
}

.profit-loss-val {
  font-weight: 700;
}

.profit-loss-val.positive {
  color: #2e7d32;
}

.profit-loss-val.zero {
  color: #2e7d32;
}

.profit-loss-val.negative {
  color: #d32f2f;
}

/* ===================================================
   6. MATCH DETAIL VIEW (Screenshots 1-4)
   =================================================== */
.match-detail-header {
  text-align: center;
  margin-bottom: 20px;
}

.match-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 6px;
}

.match-time-badge {
  display: inline-block;
  background-color: #00bcd4;
  color: #ffffff;
  padding: 4px 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.match-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.team-amount-card {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  height: fit-content;
}

.team-amount-table {
  width: 100%;
  border-collapse: collapse;
}

.team-amount-table th {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 8px 14px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
}

.team-amount-table td {
  padding: 9px 14px;
  border-top: 1px solid #eee;
  font-size: 14.5px;
  font-weight: 600;
}

.team-amount-val {
  text-align: right;
  color: #2e7d32;
  font-weight: 700;
}

.accordion-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.accordion-panel {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.accordion-header {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.accordion-body {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 0;
  display: none;
  max-height: 480px;
  overflow-y: auto;
}

.accordion-body.open {
  display: block;
}

/* Match Bet Table specific styling (Screenshot 1) */
.match-bets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.match-bets-table th {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 6px 10px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.05);
}

.match-bets-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  color: #212529;
}

/* Bet Tag Pills (Khai / Lagai) */
.bet-pill-k {
  display: inline-block;
  border: 1.5px solid #e91e63;
  color: #e91e63;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  background-color: #fde8ef;
}

.bet-pill-l {
  display: inline-block;
  border: 1.5px solid #03a9f4;
  color: #03a9f4;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  background-color: #e1f5fe;
}

/* Session Bet List (Screenshot 2 & 3) */
.session-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  max-height: 460px;
  overflow-y: auto;
  background-color: #fafafa;
}

.session-bar-item {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.session-bar-header {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.session-trophy-badge {
  background-color: #00bcd4;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.session-bar-content {
  display: none;
  border-top: 1px solid #dee2e6;
  background: #ffffff;
}

.session-bar-content.open {
  display: block;
}

.session-sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.session-sub-table th {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 6px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.session-sub-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

/* Session Yes / No Badges (Screenshot 3) */
.badge-yes {
  background-color: #29b6f6;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.badge-no {
  background-color: #f48fb1;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

/* Match & Session Plus Minus Full Width (Screenshot 4) */
.plus-minus-container {
  width: 100%;
  overflow-x: auto;
}

.plus-minus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.plus-minus-table th {
  background-color: var(--primary-yellow);
  color: #111;
  padding: 7px 10px;
  text-align: left;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.06);
  white-space: nowrap;
}

.plus-minus-table td {
  padding: 7px 10px;
  border: 1px solid #dee2e6;
  white-space: nowrap;
  font-weight: 600;
}

.val-green {
  color: #2e7d32;
  font-weight: 700;
}

.val-red {
  color: #d32f2f;
  font-weight: 700;
}

.row-total td {
  font-weight: 800;
  background-color: #fdfdfd;
}

/* ===================================================
   MODALS
   =================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-overlay.show {
  display: flex;
}

.modal-card {
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-header {
  background-color: var(--primary-yellow);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 19.5px;
  font-weight: 800;
  color: #111;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  color: #111;
  line-height: 1;
}

.modal-body {
  padding: 20px 22px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

.form-control:focus {
  border-color: var(--primary-yellow);
  box-shadow: 0 0 0 2px rgba(253, 185, 19, 0.25);
}

.modal-footer {
  padding: 14px 22px;
  background-color: #f8f9fa;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-secondary {
  background: #6c757d;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary {
  background: var(--magenta-btn);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* Toast Notifications */
.toast-msg {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background-color: #333;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: none;
  z-index: 3000;
}

/* Responsiveness */
@media (max-width: 992px) {
  .top-summary-grid {
    grid-template-columns: 1fr;
  }
  .roles-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .match-detail-layout {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    transform: translateX(-100%);
  }
  .app-sidebar.show-mobile {
    transform: translateX(0);
  }
  .app-main {
    margin-left: 0 !important;
  }
}

@media (max-width: 576px) {
  .roles-metric-grid {
    grid-template-columns: 1fr;
  }
}


/* ===================================================
   7. LEDGER VIEWS (Screenshots 1 - 5)
   =================================================== */
.sidebar-link.magenta-active {
  background-color: var(--magenta-btn) !important;
  color: #ffffff !important;
}

.sidebar-link.magenta-active i {
  color: #ffffff !important;
}

.page-header-box {
  background-color: #f1f3f5;
  border: 1px solid #dee2e6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 8px 14px;
  font-size: 15.5px;
  font-weight: 700;
  color: #212529;
}

.ledger-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6;
  flex-wrap: wrap;
  gap: 10px;
}

.ledger-filter-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.badge-trophy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #ff9800;
  color: #ffffff;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12.5px;
  font-weight: 700;
  margin-right: 6px;
}

.badge-trophy i {
  font-size: 12px;
}

.remark-text {
  font-size: 13.5px;
  color: #333333;
  font-weight: 500;
  vertical-align: middle;
}

.val-green {
  color: #2e7d32;
  font-weight: 700;
  font-size: 13.5px;
}

.val-red {
  color: #d32f2f;
  font-weight: 700;
  font-size: 13.5px;
}

.ledger-footer-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  font-weight: 700;
  font-size: 14px;
}

.total-label {
  font-size: 14px;
  font-weight: 800;
  color: #212529;
  letter-spacing: 0.5px;
}

.total-pill-green {
  background-color: #2e7d32;
  color: #ffffff;
  padding: 3px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.3px;
}

.person-select-wrapper {
  margin: 6px 0 10px;
}

.person-select-input {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  background-color: #ffffff;
  color: #495057;
}

.person-select-input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-subowner-settlement {
  background-color: #ffd600;
  color: #111111;
  border: none;
  border-radius: 4px;
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background 0.15s;
}

.btn-subowner-settlement:hover {
  background-color: #e5a408;
}

/* ===================================================
   10-TIER ROLE BADGES & DOWNLINE TREE
   =================================================== */
.tier-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
}
.tier-company { background: #263238; }
.tier-owner { background: #b71c1c; }
.tier-subowner { background: #e65100; }
.tier-superadmin { background: #00838f; }
.tier-admin { background: #0277bd; }
.tier-subadmin { background: #c2185b; }
.tier-supermaster { background: #6a1b9a; }
.tier-superagent { background: #f57f17; }
.tier-agent { background: #fbc02d; color: #111; }
.tier-client { background: #455a64; }

.hierarchy-path-box {
  background: #f1f3f5;
  border: 1px dashed #ced4da;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 14.5px;
  color: #334155;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.tree-view-wrapper {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 18px;
  margin-top: 14px;
  overflow-x: auto;
}
.tree-node-card {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-left: 5px solid var(--magenta-bar);
  border-radius: 8px;
  padding: 12px 18px;
  margin: 10px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}
.tree-node-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  transform: translateX(3px);
}
.tree-node-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tree-node-meta strong {
  font-size: 17px;
}
.tree-node-stats {
  display: flex;
  gap: 20px;
  font-size: 15.5px;
}
.tree-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.tree-stat-label {
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}
.tree-stat-val {
  font-weight: 800;
  font-size: 17px;
  color: #1e293b;
}

/* ===================================================
   DIFFERENTIAL COMMISSION ENGINE STYLES
   =================================================== */
.comm-engine-header {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: #fff;
  padding: 18px 24px;
  border-radius: 8px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.comm-engine-header h3 {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comm-engine-header h3 i {
  font-size: 22px;
}
.comm-zero-sum-badge {
  background: rgba(46, 125, 50, 0.25);
  border: 1px solid #4caf50;
  color: #a5d6a7;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 14.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.comm-formula-bar {
  background: #e9ecef;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 15px;
  color: #343a40;
  margin-bottom: 16px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.comm-formula-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comm-formula-item code {
  background: #fff;
  border: 1px solid #ced4da;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 700;
  font-size: 15px;
  color: #c2185b;
}

.comm-ratio-bar-wrapper {
  width: 100%;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  margin: 5px 0;
}
.comm-bar-mila {
  background: #2e7d32;
  height: 100%;
}
.comm-bar-diya {
  background: #f57c00;
  height: 100%;
}

.mila-pill {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14.5px;
}
.diya-pill {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14.5px;
}

/* Commission Simulator Box */
.comm-calc-box {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 18px;
  margin-top: 18px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.06);
}
.waterfall-step-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f3f5;
  font-size: 15.5px;
  transition: background 0.15s;
}
.waterfall-step-row:hover {
  background: #f8f9fa;
}
.waterfall-tier-col {
  width: 220px;
  font-weight: 700;
}
.waterfall-margin-col {
  width: 240px;
  font-family: monospace;
  font-size: 15px;
}
.waterfall-amount-col {
  flex: 1;
  text-align: right;
  font-weight: 800;
  color: #2e7d32;
  font-size: 17.5px;
}

/* ===================================================
   CASCADING SETTLEMENT & PROFIT SHIFT STYLES
   =================================================== */
.badge-lena {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-lena i {
  font-size: 15px;
}
.badge-dena {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-dena i {
  font-size: 15px;
}
.badge-clear {
  background-color: #eceff1;
  color: #455a64;
  border: 1px solid #cfd8dc;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14.5px;
}

.btn-smart-settle {
  background-color: #1976d2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.btn-smart-settle:hover {
  background-color: #1565c0;
}
.btn-smart-settle:disabled {
  background-color: #b0bec5;
  cursor: not-allowed;
}

/* Shift Pipeline visualization */
.shift-pipeline-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 8px;
}
.shift-card {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 160px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  font-size: 14.5px;
}
.shift-card-header {
  font-weight: 700;
  margin-bottom: 5px;
}
.shift-card-body {
  color: #495057;
}
.shift-arrow-icon {
  color: #9e9e9e;
  font-size: 18px;
}

/* Expandable Statement Sub-Rows */
.tr-expandable {
  cursor: pointer;
}
.tr-subrow-container {
  background-color: #f8fafc;
}
.subrow-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 15px;
}
.subrow-table td, .subrow-table th {
  padding: 8px 14px;
  border-top: 1px solid #e2e8f0;
}
.subrow-table th {
  background: #f1f5f9;
  font-size: 14px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
}

/* ===================================================
   5 PRODUCTION LEDGER VIEWS (EXACT MATCH TO BALA99)
   =================================================== */

.ledger-title-card {
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  border-radius: 4px 4px 0 0;
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 700;
  color: #212529;
}

.ledger-box-container {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.ledger-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.ledger-filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ledger-select-sports {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 15px;
  color: #495057;
  background-color: #ffffff;
  min-width: 140px;
}

.subowner-person-select-full {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 15.5px;
  color: #495057;
  background-color: #ffffff;
}

.btn-subowner-settlement-yellow {
  background-color: #ffc107;
  color: #212529;
  border: 1px solid #e0a800;
  border-radius: 4px;
  padding: 7px 22px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s ease;
}

.btn-subowner-settlement-yellow:hover {
  background-color: #e0a800;
}

.ledger-exact-footer {
  background: #ffffff;
  border-top: 1px solid #dee2e6;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ledger-footer-total-text {
  font-weight: 800;
  font-size: 15.5px;
  color: #212529;
  letter-spacing: 0.5px;
}

.total-pill-green-badge {
  position: absolute;
  right: 18px;
  background-color: #43a047;
  color: #ffffff;
  border-radius: 4px;
  padding: 3px 12px;
  font-weight: 700;
  font-size: 15px;
  min-width: 32px;
  text-align: center;
}

.trophy-gold {
  color: #f5a623;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-trophy-num {
  background-color: #f5a623;
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
}

/* Winning Clients Dual Table */
.winning-clients-filter-bar {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.wc-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wc-filter-field label {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.wc-input-date-wrap {
  position: relative;
}

.wc-date-input,
.wc-select-input,
.wc-text-input {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 15px;
  color: #495057;
  background-color: #ffffff;
}

.wc-date-input {
  min-width: 140px;
}

.wc-select-input {
  min-width: 90px;
}

.wc-text-input {
  width: 220px;
}

.wc-search-field {
  margin-left: auto;
}

.winning-clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 860px) {
  .winning-clients-grid {
    grid-template-columns: 1fr;
  }
}

.wc-card-winners {
  border: 1px solid #2e7d32;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.wc-card-losers {
  border: 1px solid #c62828;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.wc-header-green {
  background-color: #2e7d32;
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  padding: 7px;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.wc-header-red {
  background-color: #c62828;
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  padding: 7px;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.wc-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.wc-subtable th.th-green {
  background-color: #2e7d32;
  color: #ffffff;
  font-weight: 700;
  padding: 7px 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-right: 1px solid rgba(255,255,255,0.2);
}

.wc-subtable th.th-red {
  background-color: #c62828;
  color: #ffffff;
  font-weight: 700;
  padding: 7px 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-right: 1px solid rgba(255,255,255,0.2);
}

.wc-subtable td {
  padding: 6px 10px;
  border-bottom: 1px solid #e9ecef;
  color: #333333;
}

.wc-subtable tr:hover {
  background-color: #f8f9fa;
}

.wc-amount-win {
  color: #2e7d32;
  font-weight: 700;
}

.wc-amount-loss {
  color: #c62828;
  font-weight: 700;
}

/* ===================================================
   SUBOWNER SETTLEMENT POPUP MODAL (EXACT MATCH)
   =================================================== */
.modal-settlement-card {
  background: #ffffff;
  border-radius: 6px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: fadeInDown 0.2s ease-out;
}

.modal-settlement-header {
  background: #ffffff;
  padding: 16px 24px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}

.modal-settlement-header h4 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.modal-settlement-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #6c757d;
  cursor: pointer;
  line-height: 1;
}

.modal-settlement-close:hover {
  color: #000;
}

.modal-settlement-body {
  padding: 10px 24px 18px;
}

.modal-settlement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 16px;
}

.settle-field-col {
  display: flex;
  flex-direction: column;
}

.settle-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
}

.settle-input-field {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 15.5px;
  color: #495057;
  outline: none;
  background-color: #ffffff;
  transition: border-color 0.15s;
}

.settle-input-field:focus {
  border-color: #80bdff;
}

.settle-input-disabled {
  background-color: #e9ecef !important;
  color: #495057;
  cursor: not-allowed;
}

.modal-settlement-footer {
  padding: 10px 24px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #ffffff;
}

.btn-settle-modal-close {
  background-color: #dc3545;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}

.btn-settle-modal-close:hover {
  background-color: #c82333;
}

.btn-settle-modal-save {
  background-color: #28a745;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}

.btn-settle-modal-save:hover {
  background-color: #218838;
}

/* ===================================================
   TOP WINNER/LOOSER RANKING & GAME PLAY BADGES
   =================================================== */
.wc-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13.5px;
  color: #495057;
  background-color: #f1f3f5;
  border: 1px solid #ced4da;
}

.wc-rank-1 {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #212529;
  border: 1px solid #e0a800;
  box-shadow: 0 1px 3px rgba(255, 179, 0, 0.4);
}

.wc-rank-2 {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  color: #212529;
  border: 1px solid #9e9e9e;
}

.wc-rank-3 {
  background: linear-gradient(135deg, #ffcc80, #ffab40);
  color: #212529;
  border: 1px solid #fb8c00;
}

.wc-rank-loss-1 {
  background: linear-gradient(135deg, #ef5350, #d32f2f);
  color: #ffffff;
  border: 1px solid #b71c1c;
  box-shadow: 0 1px 3px rgba(211, 47, 47, 0.4);
}

.wc-rank-loss-2 {
  background: linear-gradient(135deg, #ff8a80, #e57373);
  color: #ffffff;
  border: 1px solid #c62828;
}

.wc-rank-loss-3 {
  background: linear-gradient(135deg, #ffcdd2, #ef9a9a);
  color: #b71c1c;
  border: 1px solid #e57373;
}

.wc-row-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wc-row-clickable:hover {
  background-color: #f1f5f9 !important;
}

.wc-client-name {
  font-weight: 600;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wc-game-count-badge {
  font-size: 12px;
  background-color: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
}

/* ===================================================
   MY SETTLEMENT - SUBOWNER LEDGER (SCREENSHOT 1)
   =================================================== */
.report-box-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 16px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.report-box-header {
  background: #f8f9fa;
  padding: 12px 18px;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.report-box-title {
  font-size: 17px;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.settle-exact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 18px;
}

@media (max-width: 960px) {
  .settle-exact-grid {
    grid-template-columns: 1fr;
  }
}

.settle-exact-panel {
  border: 1px solid #f5a623;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.settle-exact-panel-header {
  background-color: #f5a623;
  color: #1a1a1a;
  font-weight: 800;
  font-size: 15.5px;
  text-align: center;
  padding: 9px 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.settle-exact-table {
  width: 100%;
  border-collapse: collapse;
}

.settle-exact-table thead th {
  background-color: #f5a623;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
}

.settle-exact-table tbody td {
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #e9ecef;
  color: #212529;
}

.settle-exact-table .no-records-cell {
  text-align: center;
  color: #212529;
  padding: 18px 12px;
  font-size: 15.5px;
  background-color: #ffffff;
}

.settle-exact-total-row {
  background-color: #f8f9fa;
  border-top: 2px solid #e9ecef;
}

.settle-exact-total-row td {
  padding: 10px 12px;
  font-size: 15.5px;
}

.total-lbl-lena, .total-lbl-dena {
  font-weight: 800;
  color: #212529;
  text-transform: uppercase;
}

.val-green-bold {
  color: #2e7d32 !important;
  font-weight: 800 !important;
  text-align: center;
}

/* ===================================================
   ALL MASTER REPORT (SCREENSHOT 2)
   =================================================== */
.all-master-filter-box {
  background: #ffffff;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f3f5;
}

.all-master-date-row {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .all-master-date-row {
    flex-direction: column;
    gap: 10px;
  }
}

.filter-field-item {
  flex: 1;
}

.filter-field-item label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 4px;
}

.filter-date-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15px;
  background: #ffffff;
  box-sizing: border-box;
}

.all-master-search-row {
  display: flex;
  gap: 12px;
}

.filter-search-input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15px;
  box-sizing: border-box;
}

.btn-master-search {
  background-color: #f5a623;
  color: #212529;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 24px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-master-search:hover {
  background-color: #e09418;
}

.all-master-table-wrap {
  padding: 16px 20px;
}

.all-master-table {
  width: 100%;
  border-collapse: collapse;
}

.all-master-table thead th {
  background-color: #f5a623;
  color: #212529;
  font-weight: 700;
  font-size: 14.5px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  white-space: nowrap;
}

.all-master-table tbody td {
  padding: 8px 10px;
  font-size: 14.5px;
  border: 1px solid #e9ecef;
  white-space: nowrap;
  color: #212529;
}

.all-master-table tfoot td {
  padding: 9px 10px;
  font-size: 14.5px;
  font-weight: 700;
  background-color: #f8f9fa;
  border-top: 2px solid #dee2e6;
  white-space: nowrap;
}

.val-match-green {
  color: #2e7d32 !important;
  font-weight: 600;
}

.val-com-red {
  color: #d32f2f !important;
  font-weight: 600;
}

.btn-report-card-action {
  background-color: #f5a623;
  border: none;
  border-radius: 3px;
  color: #212529;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}

.btn-report-card-action:hover {
  background-color: #d48c15;
}

/* ===================================================
   CURRENT BETS (SCREENSHOT 3)
   =================================================== */
.current-bets-filter-wrap {
  background: #ffffff;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f3f5;
}

.cb-filter-group {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.cb-filter-item {
  display: flex;
  flex-direction: column;
}

.cb-filter-item label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 4px;
}

.cb-select, .cb-input {
  padding: 7px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15px;
  min-width: 170px;
  box-sizing: border-box;
  background-color: #ffffff;
}

.btn-cb-load {
  background-color: #f5a623;
  color: #212529;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 26px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-cb-load:hover {
  background-color: #e09418;
}

.cb-table-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 8px 20px;
}

.cb-entries-selector {
  font-size: 15px;
  color: #333333;
}

.cb-limit-select {
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15px;
  margin: 0 4px;
}

.cb-search-box {
  font-size: 15px;
  color: #333333;
  display: flex;
  align-items: center;
}

.cb-search-input {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 15px;
  margin-left: 6px;
  min-width: 160px;
}

.current-bets-table-wrap {
  padding: 0 20px 20px 20px;
}

.current-bets-exact-table {
  width: 100%;
  border-collapse: collapse;
}

.current-bets-exact-table thead th {
  background-color: #f5a623;
  color: #212529;
  font-weight: 700;
  font-size: 14.5px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  white-space: nowrap;
}

.current-bets-exact-table tbody td {
  padding: 8px 10px;
  font-size: 14.5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  color: #212529;
}

/* Distinct Row Highlighting for Current Bets */
.bet-row-lay {
  background-color: #ffebee !important; /* Soft Pink / Fancy Lay */
}

.bet-row-back {
  background-color: #e3f2fd !important; /* Soft Blue / Bookmaker Back */
}

.badge-pending-pill {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  display: inline-block;
  letter-spacing: 0.3px;
}

/* ===================================================
   REPORTS & CLIENT TREE (SCREENSHOTS 1, 2, 3, 4, 5)
   =================================================== */
.btn-top-back {
  background-color: #6c757d;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-top-back:hover {
  background-color: #5a6268;
}

.btn-grey-back {
  background-color: #6c757d;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-grey-back:hover {
  background-color: #5a6268;
}

/* Duplicate IP Role Badges */
.badge-role-admin {
  background-color: #ffd600;
  color: #000000;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  margin-left: 4px;
}

.badge-role-agent {
  background-color: #c6ff00;
  color: #000000;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  margin-left: 4px;
}

.badge-role-client {
  background-color: #607d8b;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  margin-left: 4px;
}

.duplicate-user-tag {
  display: inline-flex;
  align-items: center;
  margin: 3px 6px 3px 0;
  font-size: 14px;
}

/* Activity Logs Cyan Action Badge */
.badge-action-cyan {
  background-color: #00e5ff;
  color: #000000;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Limit Update Debit Red */
.val-debit-red {
  color: #d32f2f !important;
  font-weight: 700;
}

/* Client Tree Active Status */
.badge-status-active {
  color: #2e7d32;
  font-weight: 700;
}

/* ===================================================
   RESPONSIVE & REACTIVE SUITE (ALL SCREENS & LIVE TICKERS)
   =================================================== */

/* Smooth View Transitions */
section[id$="View"] {
  animation: viewFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Sidebar Backdrop Overlay */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1040;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-backdrop.show {
  display: block;
  opacity: 1;
}

/* Reactive Live Heartbeat Badge */
.live-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #00e676;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
  animation: pulseDot 2s infinite cubic-bezier(0.66, 0, 0, 1);
  vertical-align: middle;
}

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(0, 230, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}

/* Reactive Live Odds Flash Animations */
@keyframes oddsPulseGreen {
  0% { background-color: rgba(46, 125, 50, 0.45) !important; color: #ffffff !important; transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes oddsPulsePink {
  0% { background-color: rgba(229, 57, 53, 0.45) !important; color: #ffffff !important; transform: scale(1.03); }
  100% { transform: scale(1); }
}

.odds-flash-up {
  animation: oddsPulseGreen 0.75s ease-out;
}

.odds-flash-down {
  animation: oddsPulsePink 0.75s ease-out;
}

/* Universal Table Responsiveness */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Responsive Grid & Layout Tweaks */
@media (max-width: 1200px) {
  .roles-metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 56px;
    bottom: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    width: 260px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  }

  .app-sidebar.show-mobile {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .roles-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .settle-exact-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }

  .wc-grid-container {
    grid-template-columns: 1fr;
  }

  .modal-settlement-card {
    width: calc(100vw - 28px);
    max-width: 100%;
    margin: 12px auto;
  }
}

@media (max-width: 768px) {
  body {
    zoom: 1;
  }

  .top-navbar {
    padding: 0 10px;
    height: 52px;
  }

  .brand-logo {
    font-size: 22px;
  }

  .app-sidebar {
    top: 52px;
  }

  .top-summary-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px;
  }

  .roles-metric-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px;
  }

  .report-box-card {
    margin: 8px;
    border-radius: 4px;
  }

  .report-box-header {
    padding: 10px 14px;
  }

  .report-box-title {
    font-size: 16px;
  }

  .all-master-filter-box {
    padding: 12px 14px;
  }

  .all-master-date-row {
    flex-direction: column;
    gap: 8px;
  }

  .all-master-search-row {
    flex-direction: column;
    gap: 8px;
  }

  .btn-master-search {
    width: 100%;
    text-align: center;
  }

  .all-master-table-wrap {
    padding: 10px 12px;
  }

  .cb-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .cb-select, .cb-input {
    width: 100%;
    min-width: 0;
  }

  .btn-cb-load {
    width: 100%;
    text-align: center;
  }

  .cb-table-controls-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .cb-entries-selector, .cb-search-box {
    width: 100%;
  }

  .cb-search-input {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }

  .current-bets-table-wrap {
    padding: 0 12px 12px 12px;
  }

  .all-master-table thead th,
  .all-master-table tbody td,
  .current-bets-exact-table thead th,
  .current-bets-exact-table tbody td {
    padding: 7px 8px;
    font-size: 13.5px;
  }
}

@media (max-width: 480px) {
  .login-card-wrapper {
    padding: 12px;
  }

  .login-card {
    padding: 22px 16px;
    width: 100%;
  }

  .tier-pills-scroll {
    padding: 4px 6px;
  }

  .tier-pill-btn {
    font-size: 12.5px;
    padding: 4px 8px;
  }

  .user-profile-pill {
    padding: 4px 8px;
    font-size: 13.5px;
  }

  .user-dropdown-menu {
    right: 6px;
    width: 220px;
  }
}

/* ===================================================
   CLIENT USER PANEL (EXACT REPLICA FROM SCREENSHOTS 1-5)
   =================================================== */

/* Clean System Font Stack Matching bala99.com */
.client-panel-theme,
.client-panel-theme button,
.client-panel-theme input,
.client-panel-theme select,
.client-panel-theme textarea,
.client-panel-theme table,
.client-panel-theme th,
.client-panel-theme td,
.client-panel-theme p,
.client-panel-theme span,
.client-panel-theme div,
.client-panel-theme a,
.client-panel-theme h1,
.client-panel-theme h2,
.client-panel-theme h3,
.client-panel-theme h4,
.client-panel-theme h5,
.client-panel-theme h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.client-panel-theme i[class*="fa-"],
.client-panel-theme .fa,
.client-panel-theme .fas,
.client-panel-theme .far,
.client-panel-theme .fa-solid,
.client-panel-theme .fa-regular,
.client-panel-theme .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome !important;
}

.client-panel-theme #topNavbar {
  background-color: #f5a623 !important;
  border-bottom: 1.5px solid #e08b0b !important;
  height: 52px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.client-panel-theme #clientBrandLogoText {
  display: inline-block !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer;
}

.client-panel-theme #headerBrandImg {
  display: none !important;
}

.client-panel-theme #hamburgerBtn {
  display: none !important;
}

.client-panel-theme #userProfilePill {
  display: none !important;
}

.client-panel-theme #clientUserPill {
  display: none !important;
}

.client-panel-theme #clientNavRight {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 0 !important;
}

.client-panel-theme .client-header-stats-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  line-height: 1.25 !important;
}

.client-panel-theme .chs-balance {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #000000 !important;
  text-align: right !important;
  letter-spacing: 0.1px;
}

.client-panel-theme .chs-exposure {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #000000 !important;
  text-align: right !important;
  letter-spacing: 0.1px;
}

.client-panel-theme .chs-exp-num {
  color: #d32f2f !important;
  font-weight: 500 !important;
}

/* Hide desktop sidebar on ALL screen sizes for client panel */
.client-panel-theme #appSidebar {
  display: none !important;
}

.client-panel-theme #sidebarBackdrop {
  display: none !important;
}

/* Full-width client main container on ALL screen sizes */
.client-panel-theme .app-main {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px 10px 75px 10px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Magenta Top Accent Band - Centered */
.client-magenta-banner {
  background-color: #c2185b !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 3px !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sports Filter Tabs: 100% Full-Width 3-Column Segmented Bar */
.client-sports-tabs-bar {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  border: 1px solid #b0bec5 !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  background: #cfd8dc !important;
  padding: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

.client-sport-tab {
  width: 100% !important;
  border: none !important;
  border-right: 1px solid #b0bec5 !important;
  background: #cfd8dc !important;
  color: #37474f !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 7px 0 !important;
  text-align: center !important;
  cursor: pointer;
  border-radius: 0 !important;
  outline: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.client-sport-tab:last-child {
  border-right: none !important;
}

.client-sport-tab:hover {
  background: #b0bec5 !important;
  color: #111111 !important;
}

.client-sport-tab.active {
  background-color: #f5a623 !important;
  color: #000000 !important;
  font-weight: 500 !important;
  border-color: #d98205 !important;
}

/* Matches Grid: 2-column layout */
.client-matches-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .client-matches-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2-Row Match Card */
.client-match-card {
  background: #ffffff !important;
  border: 1px solid #cfd8dc !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 52px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.client-match-card:hover {
  background-color: #f8fafc !important;
  border-color: #90a4ae !important;
}

.cm-top-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 3px !important;
  width: 100% !important;
}

.badge-live-green {
  background-color: #2e7d32 !important;
  color: #ffffff !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}

.badge-upcoming-gray {
  background-color: #b0bec5 !important;
  color: #212529 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

.cm-datetime {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #c62828 !important;
  white-space: nowrap !important;
}

.cm-tags {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
}

.tag-e-box {
  background-color: #ff9800 !important;
  color: #ffffff !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.tag-sport-box {
  background-color: #ffffff !important;
  border: 1px solid #ff9800 !important;
  color: #e65100 !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

.cm-bottom-row {
  display: block !important;
  width: 100% !important;
}

.cm-title {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #0d47a1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Mini Games Visual 3-Column Poster Grid (Screenshot Exact Replica) */
.client-mini-games-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  margin-top: 10px !important;
  margin-bottom: 25px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .client-mini-games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.mini-game-poster {
  height: 98px !important;
  border-radius: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  box-sizing: border-box !important;
}

.mini-game-poster:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5) !important;
}

.mgp-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.mgp-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 26px;
  opacity: 0.9;
}

/* Individual Poster Theming */
.mgp-lightning {
  background: radial-gradient(circle at 75% 30%, #1565c0 0%, #0d2850 50%, #050b14 100%) !important;
}

.mgp-marble {
  background: radial-gradient(circle at 50% 30%, #8d6e63 0%, #3e2723 60%, #1b0000 100%) !important;
}

.mgp-sexy {
  background: radial-gradient(circle at 60% 40%, #ad1457 0%, #4a148c 60%, #1a0033 100%) !important;
}

.mgp-aviator {
  background: linear-gradient(160deg, #0b1f3a 0%, #193c72 45%, #2a5298 75%, #d32f2f 100%) !important;
}

.mgp-mines {
  background: radial-gradient(circle at 50% 40%, #00838f 0%, #004d40 50%, #001e17 100%) !important;
}

.mgp-bikini {
  background: linear-gradient(135deg, #0288d1 0%, #0097a7 50%, #00b4d8 100%) !important;
}

.mgp-chicken {
  background: radial-gradient(circle at 45% 45%, #e65100 0%, #5d2200 65%, #260a00 100%) !important;
}

.mgp-color {
  background: radial-gradient(circle at 55% 45%, #4527a0 0%, #1a084a 65%, #0d0026 100%) !important;
}

/* Typography for Poster Titles */
.mgp-title-3d {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
  text-align: center !important;
  line-height: 1 !important;
}

.mgp-title-3d.yellow {
  color: #ffe600 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

.mgp-title-3d.white {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

.mgp-title-3d.white-red {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
}

/* Section Heading Bars */
.client-section-heading-bar {
  background-color: #f5a623;
  color: #111111;
  font-weight: 600;
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: 2px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Providers Grid */
.client-providers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 900px) {
  .client-providers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.provider-banner-card {
  height: 142px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 14px;
  display: flex;
  align-items: flex-end;
}

.provider-banner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.pb-diamond { background: linear-gradient(135deg, #000000 0%, #434343 100%); color: #fff; border: 1px solid #555; }
.pb-mac-virtual { background: linear-gradient(135deg, #141e30 0%, #243b55 100%); color: #fff; border: 1px solid #3b5998; }
.pb-mac-casino { background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); color: #fff; border: 1px solid #7c3aed; }
.pb-mac-excite { background: linear-gradient(135deg, #0575e6 0%, #00f260 100%); color: #fff; border: 1px solid #10b981; }

.pb-inner h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 4px 0 2px 0;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.2px;
}

.pb-inner p {
  font-size: 12px;
  margin: 0;
  color: #e2e8f0;
  font-weight: 400;
}

.pb-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 500;
  color: #f5a623;
}

/* Favourites Grid */
.client-favourites-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 900px) {
  .client-favourites-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fav-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}

.fav-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
}

.fav-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
}

.fc-plane { background: linear-gradient(135deg, #e52d27, #b31217); }
.fc-lucky { background: linear-gradient(135deg, #f7971e, #ffd200); }
.fc-cards { background: linear-gradient(135deg, #11998e, #38ef7d); }
.fc-dragon { background: linear-gradient(135deg, #8a2387, #e94057, #f27121); }
.fc-crown { background: linear-gradient(135deg, #654ea3, #eaafc8); }
.fc-roulette { background: linear-gradient(135deg, #2c3e50, #3498db); }

.fav-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #212529;
}

/* MAC Casino (Screenshot 3 Replica) */
.client-mac-casino-banner {
  background-color: #c2185b;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.mac-category-pills-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.mac-cat-pill {
  padding: 6px 14px;
  border: 1px solid #ced4da;
  background: #ffffff;
  color: #212529;
  font-weight: 400;
  font-size: 12.5px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}

.mac-cat-pill.active {
  background: #f5a623 !important;
  border-color: #d98205 !important;
  color: #111111 !important;
  font-weight: 500;
}

.mac-subcat-icon-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.mac-subcat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid #dee2e6;
  background: #ffffff;
  border-radius: 4px;
  min-width: 68px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 400;
  color: #333333;
  transition: all 0.15s;
}

.mac-subcat-btn.active {
  background: #f5a623 !important;
  border-color: #d98205 !important;
  color: #111111 !important;
  font-weight: 500;
}

.mac-subcat-btn i {
  font-size: 18px;
}

.mac-games-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 1200px) {
  .mac-games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .mac-games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mac-game-card {
  background: #111111;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid #333333;
  display: flex;
  flex-direction: column;
}

.mac-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.mgc-thumb {
  height: 125px;
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mgc-glow-icon {
  font-size: 36px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.mgc-label {
  background: #f5a623;
  color: #111111;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  padding: 6px 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Diamond Casino (Screenshot 4 Replica) */
.diamond-casino-title {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}

.diamond-category-pills-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.diamond-cat-pill {
  padding: 6px 14px;
  border: 1px solid #ced4da;
  background: #ffffff;
  color: #212529;
  font-weight: 400;
  font-size: 13px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}

.diamond-cat-pill.active {
  background: #f5a623 !important;
  border-color: #d98205 !important;
  color: #111111 !important;
  font-weight: 500;
}

.diamond-games-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 11px;
  margin-bottom: 22px;
}

@media (max-width: 1400px) {
  .diamond-games-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 992px) {
  .diamond-games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .diamond-games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.diamond-card {
  height: 115px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.diamond-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.dc-roulette { background: linear-gradient(135deg, #141e30, #243b55); color: #fff; }
.dc-7lucky { background: linear-gradient(135deg, #4b1248, #f0c27b); color: #fff; }
.dc-20teenpatti { background: linear-gradient(135deg, #1d2671, #c33764); color: #fff; }
.dc-dragontiger { background: linear-gradient(135deg, #b91d73, #f953c6); color: #fff; }
.dc-teenpatti1day { background: linear-gradient(135deg, #6441a5, #2a0845); color: #fff; }
.dc-andarbahar { background: linear-gradient(135deg, #f7971e, #ffd200); color: #111; }
.dc-32cards { background: linear-gradient(135deg, #134e5e, #71b280); color: #fff; }
.dc-7blucky { background: linear-gradient(135deg, #8e2de2, #4a00e0); color: #fff; }
.dc-mines, .dc-race20mines, .dc-instantmines, .dc-20mines { background: linear-gradient(135deg, #000428, #004e92); color: #fff; }
.dc-anthony, .dc-queen, .dc-bollywood { background: linear-gradient(135deg, #200122, #6f0000); color: #fff; }
.dc-andarbahar2, .dc-poker1day { background: linear-gradient(135deg, #0f2027, #2c5364); color: #fff; }
.dc-cricket, .dc-casinowar, .dc-3cardsjudge { background: linear-gradient(135deg, #2b5876, #4e4376); color: #fff; }
.dc-20dt2, .dc-32cardsb, .dc-20dtl, .dc-teenpattiopen { background: linear-gradient(135deg, #3a1c71, #d76d77); color: #fff; }

.dc-badge {
  font-size: 10px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 7px;
  border-radius: 3px;
  align-self: flex-start;
  color: #f5a623;
}

.dc-title {
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 3px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}

/* Client My Ledger (Screenshot 5 Replica) */
.client-ledger-container {
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.client-ledger-header-box {
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 4px 4px 0 0;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

.client-ledger-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 10px 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.client-ledger-entries-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #495057;
}

.client-entries-select {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 400;
  outline: none;
  background: #ffffff;
  cursor: pointer;
}

.client-search-input {
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 13.5px;
  outline: none;
  min-width: 200px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.client-search-input:focus {
  border-color: #f5a623;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

.client-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.client-ledger-table thead th {
  background-color: #f5a623;
  color: #111111;
  font-weight: 500;
  font-size: 13.5px;
  padding: 10px 14px;
  border: 1px solid #e08b0b;
  text-align: left;
}

.client-ledger-table tbody td {
  padding: 10px 14px;
  border: 1px solid #dee2e6;
  color: #212529;
  font-size: 13px;
  font-weight: 400;
}

.client-ledger-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-top: none;
}

.client-pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.client-page-btn {
  padding: 5px 11px;
  border: 1px solid #dee2e6;
  background: #ffffff;
  color: #495057;
  font-size: 13px;
  font-weight: 400;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}

.client-page-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.client-page-btn.active {
  background: #f5a623 !important;
  color: #111111 !important;
  border-color: #d98205 !important;
  font-weight: 500;
}

.client-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.client-pagination-info {
  font-size: 13.5px;
  font-weight: 400;
  color: #495057;
}

.client-ledger-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 14px;
}

.client-total-text {
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  letter-spacing: 0.4px;
}

.client-total-pill-green {
  background-color: #2e7d32;
  color: #ffffff;
  padding: 4px 22px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.3px;
}

/* ===================================================
   CLIENT BOTTOM NAVIGATION & DRAWER (ALWAYS VISIBLE FOR CLIENT PANEL)
   =================================================== */
.client-mobile-bottom-nav {
  display: none;
}

.client-panel-theme .client-mobile-bottom-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 52px !important;
  background-color: #f5a623 !important;
  z-index: 9999 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
  border-top: 1.5px solid #d98205 !important;
}

.client-mobile-bottom-nav .mb-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: #111111;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  transition: all 0.12s ease-in-out;
  text-decoration: none;
}

.client-mobile-bottom-nav .mb-nav-btn i {
  font-size: 17px;
  margin-bottom: 2px;
  color: #111111;
}

/* Active Tab: Solid Magenta (Screenshots 1 & 2) */
.client-mobile-bottom-nav .mb-nav-btn.active {
  background-color: #c2185b !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

.client-mobile-bottom-nav .mb-nav-btn.active i {
  color: #ffffff !important;
}

/* Slide-Up Client Drawer Overlay */
.client-mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.client-mobile-drawer-overlay.show {
  display: flex !important;
}

.client-mobile-drawer-card {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  animation: drawerSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawerSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.client-drawer-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 8px 16px;
}

.client-drawer-close-btn {
  background: transparent;
  border: none;
  font-size: 30px;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.client-drawer-close-btn:hover {
  color: #ffe600;
}

.client-drawer-menu-list {
  background: #f5a623;
  border-top: 2px solid #e08b0b;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
}

.client-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.15s;
}

.client-drawer-item:hover,
.client-drawer-item:active {
  background-color: #e59618;
  color: #000000;
}

.client-drawer-item i {
  width: 22px;
  font-size: 18px;
  text-align: center;
  color: #111111;
}

/* ===================================================
   CLIENT MY LEDGER TOP FILTERS (Screenshot 5 Replica)
   =================================================== */
.client-ledger-top-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #dee2e6;
  border-top: none;
  padding: 10px 16px;
  flex-wrap: wrap;
}

.client-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
}

.client-filter-input,
.client-filter-select {
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 400;
  outline: none;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
}

.client-filter-input:focus,
.client-filter-select:focus {
  border-color: #f5a623;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25);
}

.btn-ledger-submit {
  padding: 6px 20px;
  background-color: #212529;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.btn-ledger-submit:hover {
  background-color: #000000;
  transform: translateY(-1px);
}

/* ===================================================
   CLIENT LIVE MATCH DETAIL & FANCY BETTING VIEW (Exact Replica of Screenshots 1 - 5)
   =================================================== */
.cmd-match-header-bar {
  background-color: #f5a623;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 2px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.cmd-mhb-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmd-back-btn {
  background: transparent;
  border: none;
  font-size: 15px;
  color: #000000;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmd-match-title {
  font-size: 12.5px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0.1px;
}

.cmd-match-datetime {
  font-size: 11.5px;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0.1px;
}

/* Tab Strip: GAME / PLACED BET */
.cmd-tabs-strip {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 2px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.cmd-tabs-left {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.cmd-tab-btn {
  background: transparent;
  border: none;
  height: 100%;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: all 0.15s ease;
}

.cmd-tab-btn.active {
  color: #0d47a1;
  border-bottom: 2.5px solid #0d47a1;
}

.cmd-tv-badge {
  font-size: 12px;
  font-weight: 400;
  color: #37474f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cmd-tv-badge:hover {
  color: #0d47a1;
}

/* Live Scoreboard Card */
.cmd-scoreboard-card {
  background: radial-gradient(ellipse at 50% 15%, #0f2742 0%, #061120 65%, #02060c 100%);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 8px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.cmd-score-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cmd-over-balls {
  display: flex;
  gap: 5px;
}

.cmd-ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #1976d2;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 4px rgba(25, 118, 210, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
}

.cmd-ball.ball-four {
  background: #2e7d32;
}

.cmd-ball.ball-six {
  background: #7b1fa2;
}

.cmd-ball.ball-wicket {
  background: #d32f2f;
}

.cmd-score-welcome-badge {
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cmd-score-sound {
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.2s ease;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmd-score-sound:hover {
  opacity: 1;
  transform: scale(1.1);
}

.cmd-score-sound.active {
  color: #ffe600;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255, 230, 0, 0.8));
  animation: audioPulse 1.6s infinite ease-in-out;
}

@keyframes audioPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.cmd-score-teams-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.cmd-team-score-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cmd-team-name {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.cmd-team-runs {
  font-size: 13.5px;
  font-weight: 500;
  color: #ffe600;
  letter-spacing: 0.2px;
}

.cmd-score-watermark {
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Market Sections Common Styles */
.cmd-market-section {
  background: #ffffff;
  border: 1px solid #cfd8dc;
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.cmd-section-header {
  background-color: #f5a623;
  color: #000000;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  letter-spacing: 0.1px;
}

.cmd-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cmd-cashout-btn {
  background-color: #2e7d32;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}

.cmd-cashout-btn:hover {
  background-color: #1b5e20;
}

.cmd-sub-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 10px;
  box-sizing: border-box;
}

.cmd-sub-limits {
  font-size: 10px;
  font-weight: 400;
  color: #d32f2f;
}

.cmd-sub-cols {
  display: flex;
  gap: 4px;
}

.cmd-col-head {
  width: 58px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 2px;
  padding: 2px 0;
  line-height: 1;
  box-sizing: border-box;
}

.col-lagai, .col-yes {
  background-color: #90caf9;
  color: #0d47a1;
}

.col-khai, .col-no {
  background-color: #f48fb1;
  color: #880e4f;
}

/* Market & Fancy Rows */
.cmd-market-rows, .cmd-fancy-rows {
  display: flex;
  flex-direction: column;
}

.cmd-market-row, .cmd-fancy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f3f5;
  box-sizing: border-box;
}

.cmd-market-row:last-child, .cmd-fancy-row:last-child {
  border-bottom: none;
}

.cmd-row-label {
  font-size: 11.5px;
  font-weight: 500;
  color: #212529;
}

.cmd-fancy-info {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 130px);
}

.cmd-fancy-title {
  font-size: 11px;
  font-weight: 500;
  color: #111111;
  text-transform: uppercase;
  line-height: 1.25;
}

.cmd-fancy-limits {
  font-size: 9.5px;
  font-weight: 400;
  color: #d32f2f;
  margin-top: 2px;
}

.cmd-boxes-group {
  display: flex;
  gap: 4px;
}

.cmd-box-lagai, .cmd-box-khai {
  width: 58px;
  height: 34px;
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: filter 0.15s;
}

.cmd-box-lagai {
  background-color: #bbdefb;
  color: #000000;
}

.cmd-box-khai {
  background-color: #ffcdd2;
  color: #000000;
}

.cmd-box-lagai:hover, .cmd-box-khai:hover {
  filter: brightness(0.95);
}

.cmd-box-no, .cmd-box-yes {
  width: 58px;
  height: 36px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1px 0;
  box-sizing: border-box;
  transition: filter 0.15s;
}

.cmd-box-no {
  background-color: #ffcdd2;
  color: #000000;
}

.cmd-box-yes {
  background-color: #bbdefb;
  color: #000000;
}

.cmd-box-no:hover, .cmd-box-yes:hover {
  filter: brightness(0.95);
}

.cmd-box-val-main {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
}

.cmd-box-val-rate {
  font-size: 9.5px;
  font-weight: 400;
  opacity: 0.85;
  line-height: 1.1;
}

/* Suspended Box Styling */
.cmd-suspended-group {
  background-color: #cfd8dc;
  border-radius: 3px;
  width: 120px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  cursor: not-allowed;
  box-sizing: border-box;
}

.cmd-suspended-badge {
  color: #d32f2f;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.cmd-suspended-val-left, .cmd-suspended-val-right {
  font-size: 10px;
  color: #607d8b;
  font-weight: 400;
}

.cmd-fancy-suspended-box {
  background-color: #cfd8dc;
  border-radius: 3px;
  width: 120px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  cursor: not-allowed;
  box-sizing: border-box;
}

/* My Bets Table */
.cmd-mybets-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cmd-mybets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.cmd-mybets-table thead th {
  background-color: #f8fafc;
  color: #495057;
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 10px;
  border-bottom: 1px solid #dee2e6;
  text-align: left;
}

.cmd-mybets-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f3f5;
  font-size: 11.5px;
  font-weight: 400;
  color: #212529;
}

.cmd-no-record {
  text-align: center;
  padding: 14px !important;
  color: #6c757d;
  font-weight: 400;
}

/* Interactive Floating / Slide-Up Bet Slip */
.cmd-betslip-drawer {
  position: fixed;
  bottom: 54px;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 3px solid #f5a623;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
  z-index: 9998;
  padding: 8px 12px;
  box-sizing: border-box;
  animation: drawerSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cmd-slip-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cmd-slip-info {
  display: flex;
  flex-direction: column;
}

.cmd-slip-market {
  font-size: 10.5px;
  color: #6c757d;
  font-weight: 400;
  text-transform: uppercase;
}

.cmd-slip-sel {
  font-size: 12.5px;
  font-weight: 600;
  color: #0d47a1;
  text-transform: uppercase;
}

.cmd-slip-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmd-slip-type {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  text-transform: uppercase;
}

.cmd-slip-type.yes, .cmd-slip-type.lagai {
  background-color: #bbdefb;
  color: #0d47a1;
}

.cmd-slip-type.no, .cmd-slip-type.khai {
  background-color: #ffcdd2;
  color: #b71c1c;
}

.cmd-slip-close-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
}

.cmd-slip-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.cmd-slip-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmd-slip-col label {
  font-size: 10.5px;
  font-weight: 400;
  color: #495057;
}

.cmd-slip-input {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.cmd-slip-input.stake-highlight {
  border-color: #f5a623;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

.cmd-slip-calc-val {
  font-size: 13px;
  font-weight: 500;
  color: #2e7d32;
  padding: 5px 0;
}

.cmd-quick-stake-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 8px;
  padding-bottom: 2px;
}

.cmd-qs-btn {
  flex: 1;
  padding: 4px 0;
  border: 1px solid #dee2e6;
  background-color: #f8fafc;
  color: #212529;
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
  white-space: nowrap;
}

.cmd-qs-btn:hover {
  background-color: #f5a623;
  border-color: #e08b0b;
  color: #000000;
}

.cmd-qs-btn.btn-clear {
  background-color: #e2e8f0;
  color: #b71c1c;
}

.cmd-slip-actions-row {
  display: flex;
  gap: 8px;
}

.cmd-slip-btn-cancel {
  flex: 1;
  padding: 7px 0;
  border: 1px solid #ced4da;
  background-color: #ffffff;
  color: #495057;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}

.cmd-slip-btn-submit {
  flex: 2;
  padding: 7px 0;
  border: none;
  background-color: #2e7d32;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.cmd-slip-btn-submit:hover {
  background-color: #1b5e20;
}

/* ===================================================
   CLIENT MATCH BETTING MODAL (Betfair Exchange)
   =================================================== */
.client-betting-modal-card {
  max-width: 580px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  background: #ffffff;
}

.client-betting-header {
  background: #f5a623;
  color: #111111;
  padding: 14px 18px;
  border-bottom: 2px solid #d98205;
}

.cbm-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cbm-title-group h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #111111;
}

.cbm-live-dot {
  background: #2e7d32;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
}

.cbm-sport-tag {
  background: rgba(0, 0, 0, 0.12);
  color: #111111;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 2px;
}

.client-betting-body {
  padding: 14px;
  background: #ffffff;
}

.cbm-market-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e9ecef;
  padding: 7px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.cbm-market-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #212529;
}

.cbm-market-rules {
  font-size: 11.5px;
  font-weight: 400;
  color: #64748b;
}

.cbm-odds-table {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}

.cbm-odds-header-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  background: #f8fafc;
  border-bottom: 1px solid #dee2e6;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  text-align: center;
}

.cbm-col-runner {
  text-align: left;
}

.cbm-runner-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
}

.cbm-runner-row:last-child {
  border-bottom: none;
}

.cbm-runner-name {
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
}

.cbm-box-back {
  background-color: #72bbef;
  color: #0b2e4f;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transition: all 0.12s ease;
}

.cbm-box-back:hover {
  background-color: #55a8e2;
}

.cbm-box-lay {
  background-color: #faa9ba;
  color: #4f0b1a;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.12s ease;
}

.cbm-box-lay:hover {
  background-color: #f694a9;
}

.cbm-box-odds {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.1;
}

.cbm-box-size {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.85;
}

/* Bet Slip in Modal */
.cbm-betslip-section {
  background: #f8fafc;
  border: 1.5px solid #0284c7;
  border-radius: 6px;
  padding: 12px;
  animation: fadeInSlip 0.2s ease;
}

@keyframes fadeInSlip {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.cbm-slip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}

.cbm-slip-type-badge {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.cbm-slip-type-badge.back {
  background: #72bbef;
  color: #0b2e4f;
}

.cbm-slip-type-badge.lay {
  background: #faa9ba;
  color: #4f0b1a;
}

.cbm-slip-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.cbm-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cbm-input-group label {
  font-size: 11.5px;
  font-weight: 500;
  color: #475569;
}

.cbm-num-input {
  padding: 6px 10px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  width: 100%;
}

.cbm-num-input:focus {
  border-color: #0284c7;
}

.cbm-payout-box {
  background: #e2e8f0;
  padding: 6px 10px;
  border-radius: 4px;
  min-width: 120px;
  text-align: right;
}

.cbm-payout-label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b;
}

.cbm-payout-val {
  font-size: 14px;
  font-weight: 600;
  color: #16a34a;
}

.cbm-quick-stakes {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn-quick-stake {
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-quick-stake:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.cbm-btn-clear {
  color: #dc2626;
  border-color: #fca5a5;
}

.cbm-slip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-cbm-cancel {
  padding: 7px 16px;
  background: #e2e8f0;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
}

.btn-cbm-submit {
  padding: 7px 20px;
  background: #16a34a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cbm-submit:hover {
  background: #15803d;
}

/* ===================================================
   CLIENT CASINO GAME MODAL (MAC88 & DIAMOND)
   =================================================== */
.client-casino-modal-card {
  max-width: 620px;
  border-radius: 8px;
  overflow: hidden;
  background: #111827;
  color: #ffffff;
}

.client-casino-header {
  background: #c2185b;
  color: #ffffff;
  padding: 12px 18px;
}

.ccm-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ccm-provider-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.ccm-title-group h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.client-casino-body {
  padding: 16px;
  background: #111827;
}

.ccm-felt-table {
  background: radial-gradient(circle at center, #1b4332 0%, #081c15 100%);
  border: 2.5px solid #d4af37;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
  min-height: 170px;
  position: relative;
}

.ccm-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 500;
  color: #d4af37;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 7px;
}

.ccm-round-timer {
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 12px;
  color: #facc15;
}

.ccm-table-center {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ccm-cards-stage {
  display: flex;
  align-items: center;
  gap: 26px;
}

.ccm-card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ccm-slot-title {
  font-size: 13px;
  font-weight: 600;
  color: #f5a623;
  letter-spacing: 0.4px;
}

.ccm-slot-card {
  width: 65px;
  height: 90px;
  background: #ffffff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #111827;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ccm-slot-card.card-revealed {
  transform: scale(1.08) rotate(3deg);
}

.ccm-vs-badge {
  font-size: 16px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 50%;
  border: 1px solid #fbbf24;
}

.ccm-result-banner {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  padding: 5px 18px;
  border-radius: 20px;
  animation: bounceIn 0.3s ease;
}

@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.ccm-result-banner.win {
  background: #16a34a;
  color: #ffffff;
}

.ccm-result-banner.loss {
  background: #dc2626;
  color: #ffffff;
}

.ccm-choices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.ccm-choice-btn {
  background: #1f2937;
  border: 1.5px solid #374151;
  border-radius: 5px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.ccm-choice-btn.active {
  border-color: #f5a623 !important;
  background: rgba(245, 166, 35, 0.15) !important;
}

.ccm-choice-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
}

.ccm-choice-odds {
  font-size: 12.5px;
  font-weight: 500;
  color: #f5a623;
}

.ccm-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2937;
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ccm-chips-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #9ca3af;
}

.ccm-chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}

.ccm-chip:hover {
  transform: scale(1.1);
}

.ccm-chip.active {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.chip-10 { background: #3b82f6; color: #fff; }
.chip-50 { background: #10b981; color: #fff; }
.chip-100 { background: #f59e0b; color: #000; }
.chip-500 { background: #ef4444; color: #fff; }
.chip-1000 { background: #8b5cf6; color: #fff; }
.chip-5000 { background: #ec4899; color: #fff; }

.ccm-bet-total-box {
  margin-left: auto;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ccm-bet-total-box strong {
  font-size: 15.5px;
  color: #facc15;
  font-weight: 600;
}

.ccm-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-ccm-clear {
  padding: 8px 18px;
  background: #374151;
  color: #e5e7eb;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.btn-ccm-bet {
  padding: 8px 24px;
  background: #c2185b;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-ccm-bet:hover {
  background: #ad1457;
}

/* ==========================================================================
   FULLY RESPONSIVE & REACTIVE EXTENSIONS FOR BALA99
   Mobile (320px - 480px), Phablet/Tablet (481px - 992px), Desktop (993px+)
   ========================================================================== */

/* 1. Base Mobile Reset & Touch Optimization */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 2. Live Reactive Heartbeat & Status Indicators */
.live-sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #008744;
  letter-spacing: 0.5px;
  margin-left: 8px;
  transition: all 0.25s ease;
}

.live-sync-indicator .live-pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #00e676;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
  animation: pulseDot 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

.network-status-banner {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: #dc2626;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeInDown 0.3s ease;
}

/* 3. Reactive Odds Fluctuation Animations */
@keyframes oddsFlashGreen {
  0% {
    background-color: #22c55e !important;
    color: #ffffff !important;
    transform: scale(1.04);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  }
  50% {
    background-color: #4ade80 !important;
    color: #ffffff !important;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes oddsFlashPink {
  0% {
    background-color: #f43f5e !important;
    color: #ffffff !important;
    transform: scale(1.04);
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.6);
  }
  50% {
    background-color: #fb7185 !important;
    color: #ffffff !important;
  }
  100% {
    transform: scale(1);
  }
}

.odds-flash-up {
  animation: oddsFlashGreen 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.odds-flash-down {
  animation: oddsFlashPink 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.balance-update-pulse {
  animation: balancePulse 1s ease;
}

@keyframes balancePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); color: #16a34a; }
  100% { transform: scale(1); }
}

/* 4. Scoreboard Ball Pop In Animation */
@keyframes ballPopIn {
  0% { opacity: 0; transform: scale(0.3) rotate(-30deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.cmd-ball {
  animation: ballPopIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* 5. Mobile Sidebar Drawer Header */
.sidebar-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.smh-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smh-avatar {
  width: 36px;
  height: 36px;
  background: #f59e0b;
  color: #1e293b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.smh-details {
  display: flex;
  flex-direction: column;
}

.smh-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smh-role {
  font-size: 11.5px;
  color: #94a3b8;
}

.smh-close-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}

.smh-close-btn:active {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0.92);
}

/* 6. Admin & Client Mobile Bottom Navigation Bars */
.master-mobile-bottom-nav,
.client-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 1050;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

.mb-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, transform 0.1s;
  padding: 6px 2px;
  user-select: none;
}

.mb-nav-btn i {
  font-size: 16.5px;
  transition: transform 0.15s;
}

.mb-nav-btn.active {
  color: #d97706;
}

.mb-nav-btn.active i {
  transform: translateY(-2px);
}

.mb-nav-btn:active {
  transform: scale(0.92);
}

.mb-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  background: #e11d48;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid #ffffff;
}

/* 7. Enhanced Responsive Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: 6px;
  margin-bottom: 12px;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}

/* Sticky first column utility for wide tables on mobile */
.table-sticky-col th:first-child,
.table-sticky-col td:first-child {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 2;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

.table-sticky-col thead th:first-child {
  background: #f1f5f9;
  z-index: 3;
}

/* 8. Mobile Responsive Media Queries */
@media (max-width: 992px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar.show-mobile {
    transform: translateX(0);
  }

  .sidebar-mobile-header {
    display: flex;
  }

  .app-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  .roles-metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .top-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 768px) {
  /* Show Mobile Bottom Navigation */
  .master-mobile-bottom-nav,
  .client-mobile-bottom-nav {
    display: flex;
  }

  /* Leave space above bottom bar */
  .app-main {
    padding-bottom: 74px !important;
  }

  /* Top Navbar on Mobile */
  .top-navbar {
    height: 50px;
    padding: 0 10px;
  }

  .header-brand-img {
    height: 28px !important;
  }

  .brand-logo {
    font-size: 20px;
  }

  .live-sync-indicator {
    padding: 2px 6px;
    font-size: 10px;
    margin-left: 4px;
  }

  .live-sync-indicator .live-sync-text {
    display: none;
  }

  .user-profile-pill {
    padding: 4px 8px;
    font-size: 12.5px;
    max-width: 130px;
  }

  .user-profile-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dashboard Adjustments */
  .magenta-accent-strip {
    height: 26px;
    padding: 0 10px;
    margin-bottom: 10px;
  }

  .magenta-strip-text {
    font-size: 12px;
  }

  .roles-metric-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .role-metric-card {
    padding: 12px 14px;
  }

  /* Match Views on Mobile */
  .cmd-match-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
  }

  .cmd-match-title {
    font-size: 15px;
  }

  .cmd-scoreboard-card {
    padding: 12px;
  }

  .cmd-score-top-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cmd-over-balls {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .cmd-team-name {
    font-size: 14px;
  }

  .cmd-team-runs {
    font-size: 14.5px;
  }

  /* Betting Slip Drawer on Mobile */
  .cmd-betslip-drawer {
    bottom: 56px !important;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
    padding: 12px 14px;
  }

  .cmd-slip-inputs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cmd-quick-stake-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .cmd-qs-btn {
    flex: 1 1 calc(25% - 6px);
    min-width: 54px;
    padding: 7px 4px;
    font-size: 12px;
  }

  /* Modals Mobile Bottom Sheet Styling */
  .modal-overlay {
    padding: 8px;
    align-items: flex-end;
  }

  .modal-card,
  .modal-settlement-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
    border-radius: 16px 16px 8px 8px;
    display: flex;
    flex-direction: column;
  }

  .modal-header {
    padding: 12px 16px;
    flex-shrink: 0;
  }

  .modal-header h3 {
    font-size: 16px;
  }

  .modal-body,
  .modal-settlement-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    flex: 1 1 auto;
  }

  .modal-footer,
  .modal-settlement-footer {
    padding: 10px 16px;
    flex-shrink: 0;
  }

  /* Touch Friendly Inputs */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  select {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
    min-height: 42px;
  }

  /* Filter rows wrap nicely */
  .filter-controls-row,
  .all-master-search-row,
  .cb-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .btn-filter-apply,
  .btn-master-search,
  .btn-cb-load {
    width: 100%;
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 20px 14px;
    border-radius: 10px;
  }

  .login-badge-logo {
    width: 72px;
    height: 72px;
  }

  .login-badge-logo span:first-child {
    font-size: 15px;
  }

  .login-badge-logo span:last-child {
    font-size: 19px;
  }

  .login-title {
    font-size: 20px;
  }

  .tier-pill-btn {
    padding: 5px 8px;
    font-size: 11.5px;
  }

  .cmd-box-lagai,
  .cmd-box-khai,
  .cmd-box-yes,
  .cmd-box-no {
    min-width: 52px;
    min-height: 40px;
    font-size: 13px;
  }
}