/* ==========================================================================
   PADDY BET - DARK SLATE & NEON LIME GLOBAL UI/UX THEME
   Applies to both User Panel (.frontend) and Admin Panel (.admin)
   Supports dynamic Owner Panel color overrides via --pb-lime / --pb-bg / --pb-card
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@600;700;800;900&display=swap');

:root {
  --pb-bg: #0f1318;
  --pb-bg-elevated: #13181f;
  --pb-surface: #181f28;
  --pb-card: #1c232d;
  --pb-card-hover: #232c38;
  --pb-input: #1e2631;
  --pb-border: rgba(255, 255, 255, 0.08);
  --pb-border-strong: rgba(140, 226, 25, 0.35);
  --pb-lime: #8ce219;
  --pb-lime-hover: #7ad012;
  --pb-lime-dark: #253317;
  --pb-lime-soft: rgba(140, 226, 25, 0.14);
  --pb-text: #ffffff;
  --pb-text-secondary: #9ba5b4;
  --pb-text-muted: #6c7788;
  --pb-danger: #ef4444;
  --pb-warning: #f59e0b;
  --pb-back: #1e3a5f;
  --pb-back-accent: #38bdf8;
  --pb-lay: #4c1d2e;
  --pb-lay-accent: #fb7185;

  /* Keep legacy structural variables dark so .header / .marquee-box never turn bright green */
  --theme1-bg: #13181f !important;
  --primary-bg: #0f1318 !important;
  --theme2-bg: #181f28 !important;
  --secondary-bg: #13181f !important;
  --light-bg: #1a212b !important;
  --grey-bg: #0f1318 !important;
  --text-primary: #8ce219 !important;
  --text-secondary: #e2e8f0 !important;
}

html,
body,
#root,
.frontend,
.admin,
.main,
.center-main-container,
.center-container {
  background-color: var(--pb-bg) !important;
  color: var(--pb-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Custom sleek dark scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--pb-bg);
}
::-webkit-scrollbar-thumb {
  background: #283240;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pb-lime);
}

/* ==========================================================================
   HEADER & NAVIGATION OVERRIDES (PREVENT GREEN HEADER BAR)
   ========================================================================== */
.header,
.frontend .header,
.admin .header,
.header-top,
.header-bottom,
.marquee-box,
.news-bar {
  background-color: var(--pb-bg-elevated) !important;
  color: var(--pb-text) !important;
  border-color: var(--pb-border) !important;
}

/* Hide legacy footer in user panel */
.frontend footer,
.frontend .footer {
  display: none !important;
}

/* ==========================================================================
   COMMON CARDS, CONTAINERS, TABLES & FORMS (USER + ADMIN)
   ========================================================================== */
.card,
.card-body,
.modal-content,
.modal-body,
.modal-footer,
.bet-table,
.market-type,
.sidebar-box,
.listing-grid,
.Admin-page-layout,
.admin-page-layout,
.add-account,
.master-balance-detail,
.master-balance-card,
.client-list-card,
.market-analysis-card,
.summary-item,
.match-container,
.match-header,
.market-column,
.market-runner,
.balance-details,
.balance-item,
.bg-gray,
.white-bg,
.um-container,
.admin .bg-white,
.frontend .bg-white:not(.qr-box),
.card-body-unique {
  background: var(--pb-card) !important;
  background-color: var(--pb-card) !important;
  color: var(--pb-text) !important;
  border-color: var(--pb-border) !important;
}

.add-account {
  border-radius: 14px !important;
  border: 1px solid var(--pb-border) !important;
  padding: 18px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

.add-account h4,
.add-account .personal-detail h4,
.add-account .account-detail h4 {
  background: linear-gradient(90deg, #161d26 0%, #1d2632 100%) !important;
  color: var(--pb-lime) !important;
  border-left: 3px solid var(--pb-lime) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
}

.add-account .table td input,
.form-select,
.form-check-input {
  background-color: var(--pb-input) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
}

/* Autocomplete Dropdown (#react-autowhatever-1) in Dark Mode */
#react-autowhatever-1 .dropdown-menu,
.react-autosuggest__suggestions-container .dropdown-menu {
  background-color: var(--pb-surface) !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: 10px !important;
}

#react-autowhatever-1 .dropdown-item,
.react-autosuggest__suggestion .dropdown-item {
  color: #ffffff !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--pb-border) !important;
}

#react-autowhatever-1 li:hover,
#react-autowhatever-1 .dropdown-item:hover {
  background-color: var(--pb-lime-dark) !important;
  color: var(--pb-lime) !important;
}

/* Remove ugly default browser blue focus outline on nav links and buttons */
a:focus,
button:focus,
.nav-link:focus,
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Fix mobile top match ticker (.favourite) so it never blinks invisible or turns black */
.favourite {
  padding: 6px 8px !important;
  background-color: #13181f !important;
}

.favourite ul {
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

.favourite li,
.favourite ul li {
  background: #1c232d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: #ffffff !important;
}

.favourite li a,
.favourite li a span,
.favourite li a p {
  color: #ffffff !important;
  animation: none !important;
  -webkit-animation: none !important;
  opacity: 1 !important;
}

.Admin-page-layout {
  border-radius: 14px !important;
  padding: 18px !important;
}

.card-header,
.modal-header,
.sidebar-title,
.bet-nation-header {
  background: linear-gradient(90deg, #161d26 0%, #1d2632 100%) !important;
  color: var(--pb-text) !important;
  border-bottom: 1px solid var(--pb-border) !important;
  font-weight: 700 !important;
}

.card-header h4,
.card-header h5,
.card-header h6,
.modal-title,
.page-heading-admin,
.admin h1,
.admin h2,
.admin h3,
.admin h4,
.admin h5,
.admin h6,
.admin label,
.modal-body label {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Catch any inline white/light-grey containers inside Admin & Modals */
.admin div[style*="background-color: rgb(255, 255, 255)"],
.admin div[style*="background-color: #fff"],
.admin div[style*="background-color: #ffffff"],
.admin div[style*="background-color: rgb(245, 245, 245)"],
.admin div[style*="background-color: rgb(248, 249, 250)"],
.admin div[style*="background-color: rgb(248, 250, 252)"],
.admin div[style*="background-color: rgb(241, 245, 249)"],
.modal-body div[style*="background-color: rgb(248, 250, 252)"],
.modal-body div[style*="background-color: rgb(241, 245, 249)"],
.modal-body div[style*="background-color: rgb(255, 255, 255)"] {
  background-color: var(--pb-surface) !important;
  color: var(--pb-text) !important;
  border-color: var(--pb-border) !important;
}

/* Tables */
.table,
table.dataTable,
.coupon-table,
.bet-table-body,
.admin table {
  background-color: var(--pb-card) !important;
  color: var(--pb-text) !important;
  border-color: var(--pb-border) !important;
}

.table thead th,
table.dataTable thead th,
.coupon-table thead th,
.admin table thead th {
  background-color: #12171e !important;
  color: var(--pb-text-secondary) !important;
  border-color: var(--pb-border) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.table tbody tr,
.table td,
.table th,
.coupon-table tr,
.coupon-table td,
.admin table tbody tr,
.admin table td {
  background-color: var(--pb-card) !important;
  color: #e5e7eb !important;
  border-color: var(--pb-border) !important;
  vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) td,
.admin table tbody tr:nth-of-type(odd) td {
  background-color: #161c24 !important;
}

.table-hover tbody tr:hover,
.table-hover tbody tr:hover td,
.admin table tbody tr:hover td {
  background-color: var(--pb-card-hover) !important;
}

/* Inputs, Selects, Form Controls */
.form-control,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  background-color: var(--pb-input) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: #232c38 !important;
  color: #ffffff !important;
  border-color: var(--pb-lime) !important;
  box-shadow: 0 0 0 2px rgba(140, 226, 25, 0.2) !important;
  outline: none !important;
}

.form-control::placeholder,
input::placeholder {
  color: var(--pb-text-muted) !important;
}

/* Buttons */
.btn-primary,
.btn-diamond,
.btn-success,
.bg-theme1,
.btn-submit {
  background: var(--pb-lime) !important;
  border-color: var(--pb-lime) !important;
  color: #0f1318 !important;
  font-weight: 800 !important;
  border-radius: 9px !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-diamond:hover,
.btn-success:hover,
.btn-submit:hover {
  background: var(--pb-lime-hover) !important;
  border-color: var(--pb-lime-hover) !important;
  color: #0f1318 !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-default,
.btn-light {
  background-color: #252f3d !important;
  border-color: var(--pb-border) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
}

/* Back / Lay Odds Buttons in Dark Mode */
.back,
.back-1,
.back1,
.back2,
.back3,
.bl-box.back {
  background-color: #252e3a !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.back:hover,
.bl-box.back:hover {
  background-color: rgba(140, 226, 25, 0.2) !important;
  border-color: var(--pb-lime) !important;
}

.lay,
.lay-1,
.lay1,
.lay2,
.lay3,
.bl-box.lay {
  background-color: #2a222b !important;
  border: 1px solid rgba(251, 113, 133, 0.28) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.back .odds,
.lay .odds,
.back .odd,
.lay .odd,
.bl-box .odds {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.back span,
.lay span {
  color: #9ba5b4 !important;
}

/* ==========================================================================
   MATCH ODDS, BOOKMAKER, NORMAL & FANCY MARKET TABLES (USER & ADMIN)
   Fixes white text on light-grey (#f2f2f2) runner cells in /odds/:sportId/:matchId
   ========================================================================== */
.market-title,
.fancy-marker-title h4,
.game-heading {
  background: linear-gradient(90deg, #161d26 0%, #1d2632 100%) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--pb-lime) !important;
  border-bottom: 1px solid var(--pb-border) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.table-header {
  background-color: #13181f !important;
  color: #9ba5b4 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.table-row,
.table-body,
.fancy-tripple,
.fancy-tripple-box,
.bet-table-box,
.bet-table-row,
.fancy-market .table-row,
.bookmaker-market .table-row,
.main-market .table-row,
.table-row > div:not(.back):not(.lay):not(.back1):not(.back2):not(.lay1):not(.lay2) {
  background-color: #181f28 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.table-row:nth-child(even),
.fancy-tripple:nth-child(even) .table-row {
  background-color: #1c242f !important;
}

.table-header > div,
.table-row > div,
.fancy-market .fancy-tripple,
.fancy-market .fancy-tripple .table-row > div:not(:first-child),
.table-header > div:last-child,
.table-row > div:last-child {
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.table-row .country-name,
.table-row .team-name,
.table-row .country-name b,
.table-row .country-name span,
.table-row .country-name p,
.fancy-tripple .country-name,
.fancy-tripple .country-name span,
.fancy-tripple .country-name p,
.bet-nation-game-name,
.nat-name {
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.country-name b,
.team-name b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Ensure Add Account Form labels, inputs, and headings are always high-contrast dark theme */
.add-account,
.add-account form,
.personal-detail,
.account-detail {
  background-color: #161c24 !important;
  color: #ffffff !important;
}

.add-account h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  margin-bottom: 20px !important;
}

.add-account label,
.personal-detail label,
.account-detail label,
.form-group label {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.add-account input,
.add-account select,
.personal-detail input,
.personal-detail select,
.account-detail input,
.account-detail select {
  background-color: #1e2631 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.table-row .country-name .green,
.table-row .country-name span[style*="color: green"],
.fancy-tripple .country-name .green,
.fancy-tripple .country-name span[style*="color: green"],
.Profit-Green,
.green {
  color: #4ade80 !important;
}

.table-row .country-name .red,
.table-row .country-name span[style*="color: red"],
.fancy-tripple .country-name .red,
.fancy-tripple .country-name span[style*="color: red"],
.loss-red,
.red {
  color: #f87171 !important;
}

.table-row .country-name span[style*="color: black"],
.fancy-tripple .country-name span[style*="color: black"],
.place-bet span[style*="color: black"] {
  color: #9ba5b4 !important;
}

.min-max,
.fancy-min-max,
.table-remark {
  background-color: #13181f !important;
  color: #38bdf8 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Matched / Unmatched Bets Table Rows (tr.back / tr.lay) */
tr.back,
tr.back td,
.coupon-table tr.back,
.coupon-table tr.back td,
.table tr.back td {
  background-color: #162c44 !important;
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

tr.lay,
tr.lay td,
.coupon-table tr.lay,
.coupon-table tr.lay td,
.table tr.lay td {
  background-color: #3d1b28 !important;
  color: #ffffff !important;
  border-color: rgba(251, 113, 133, 0.25) !important;
}

/* ==========================================================================
   GLOBAL DARK MODE OVERRIDES FOR ALL LEGACY LIGHT CONTAINERS & DARK TEXT
   ========================================================================== */
.scorecard-2,
.scorecard-2 .more-score-detail,
.scorecard-2 .more-score-detail-title,
.scoreboard-container,
.inning-table,
.inning-table th,
.inning-table tbody tr,
.inning-table td,
.event-table-wrapper,
.event-table,
.event-table td,
.tab-content,
.dashboardGreyhound,
.baccarat-game,
.result-indicator,
.additional-odds,
.aaa-content,
.backup-code,
.manual-key,
.management-section,
.help-section,
.security-auth .verify-code,
.security-auth .small-box,
.responsible-gaming-page,
.responsible-gaming-page .container,
.terms-and-conditions-page,
.terms-and-conditions-page .container,
.report-box,
.log-fld,
.sub-button,
.client-table th,
.client-table td,
.totals-row td,
.market-type-header,
.market-column,
.market-runner,
.no-market-data,
.styled-table tbody tr,
.styled-table td {
  background-color: var(--pb-card) !important;
  background: var(--pb-card) !important;
  color: #ffffff !important;
  border-color: var(--pb-border) !important;
}

.text-dark,
.text-edark,
.text-black,
.text-body,
.tx-666,
.placebet-mobile,
.odds-value,
.help-section h6,
.help-section p,
.responsible-gaming-page h1,
.responsible-gaming-page h2,
.responsible-gaming-page p,
.responsible-gaming-page li,
.responsible-gaming-page span,
.terms-and-conditions-page h1,
.terms-and-conditions-page h2,
.terms-and-conditions-page h3,
.terms-and-conditions-page h4,
.terms-and-conditions-page p,
.terms-and-conditions-page li,
.terms-and-conditions-page span,
.header-left h2,
.runner-name,
.summary-section h3,
.summary-value,
.match-title {
  color: #ffffff !important;
}

.text-muted,
.summary-label,
.match-date {
  color: var(--pb-text-secondary) !important;
}

/* Override any inline light backgrounds across both .frontend and .admin */
.frontend div[style*="background: white"],
.frontend div[style*="background-color: white"],
.frontend div[style*="background-color: rgb(255, 255, 255)"],
.frontend div[style*="background-color: #fff"],
.frontend div[style*="background-color: #ffffff"],
.frontend div[style*="background: #ffffff"],
.frontend div[style*="background: #f8f9fa"],
.frontend div[style*="background-color: #f8f9fa"],
.frontend div[style*="background: #f8fafc"],
.frontend div[style*="background: #f1f5f9"],
.frontend div[style*="background-color: #f7f8fa"],
.frontend form[style*="background: #f8fafc"],
.admin div[style*="background: white"],
.admin div[style*="background-color: white"],
.admin div[style*="background: #ffffff"],
.admin div[style*="background: #f8f9fa"],
.admin div[style*="background: #f8fafc"],
.admin div[style*="background: #f1f5f9"],
.admin form[style*="background: #f8fafc"] {
  background: var(--pb-card) !important;
  background-color: var(--pb-card) !important;
  color: #ffffff !important;
  border-color: var(--pb-border) !important;
}

/* Navigation Tabs & Pills */
.nav-tabs {
  border-bottom: 1px solid var(--pb-border) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  background-color: var(--pb-surface) !important;
  color: var(--pb-text-secondary) !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: 10px !important;
  margin-right: 6px;
  font-weight: 600 !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--pb-lime-dark) !important;
  color: var(--pb-lime) !important;
  border-color: rgba(140, 226, 25, 0.4) !important;
  font-weight: 700 !important;
}

/* Left Sidebar & Right Betslip Sidebar */
.sidebar.left-sidebar,
.left-sidebar,
#sidebar-right,
.right-sidebar {
  background-color: var(--pb-bg-elevated) !important;
  border-color: var(--pb-border) !important;
}

.left-sidebar .accordion-button,
.left-sidebar .list-group-item,
.left-sidebar a,
.left-sidebar li {
  background-color: transparent !important;
  color: var(--pb-text-secondary) !important;
  border-color: var(--pb-border) !important;
}

.left-sidebar a:hover,
.left-sidebar li:hover {
  color: var(--pb-lime) !important;
}

/* Pagination */
.pagination .page-item .page-link {
  background-color: var(--pb-card) !important;
  border-color: var(--pb-border) !important;
  color: var(--pb-text-secondary) !important;
  border-radius: 8px !important;
  margin: 0 3px;
}

.pagination .page-item.active .page-link {
  background-color: var(--pb-lime) !important;
  border-color: var(--pb-lime) !important;
  color: #0f1318 !important;
  font-weight: 700 !important;
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--pb-surface) !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
}

.dropdown-menu a,
.dropdown-item {
  color: var(--pb-text) !important;
}

.dropdown-menu a:hover,
.dropdown-item:hover {
  background-color: var(--pb-lime-dark) !important;
  color: var(--pb-lime) !important;
}

/* Admin Specific Dark Theme Enhancements */
.admin .main-content,
.admin .container-fluid,
.admin .page-content {
  background-color: var(--pb-bg) !important;
  color: var(--pb-text) !important;
}

.admin .navbar-nav .nav-link,
.admin .header-bottom ul li a {
  color: #d1d5db !important;
  font-weight: 600 !important;
}

.admin .navbar-nav .nav-link:hover,
.admin .header-bottom ul li a:hover,
.admin .header-bottom ul li.active > a {
  color: var(--pb-lime) !important;
}

/* Mobile bottom bar padding so content is never hidden behind bottom nav */
@media (max-width: 991px) {
  .frontend .main {
    padding-bottom: 82px !important;
  }
}

/* Universal High-Contrast Sports Runner & Fancy Market Typography */
.table-row,
.match-odds .table-row,
.bookmaker-market .table-row,
.fancy-market .table-row,
.fancy-tripple .table-row,
.fancy-tripple-box .table-row {
  background-color: #121820 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.table-row .country-name,
.fancy-tripple .country-name,
.fancy-tripple-box .country-name,
.team-name {
  background-color: #121820 !important;
  color: #ffffff !important;
}

.table-row .country-name b,
.table-row .country-name span,
.table-row .country-name p,
.fancy-tripple .country-name span,
.fancy-tripple .country-name p,
.fancy-tripple-box .country-name span,
.fancy-tripple-box .country-name p,
.team-name b,
.team-name span {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Ensure Add Account Form is always dark card with visible labels */
.add-account,
.main-container .add-account,
.personal-detail,
.account-detail {
  background-color: #161c24 !important;
  color: #ffffff !important;
}

.add-account label,
.personal-detail label,
.account-detail label,
.form-group label {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  display: inline-block;
  margin-bottom: 4px;
}