/* ======================================================== */
/* Soft Light Theme Overrides (No Glare, Slate-Charcoal Text) */
/* ======================================================== */
body {
  background-color: #f4f5f8 !important;
  color: #2b2d42 !important;
  font-family: Arial, sans-serif !important;
}
#wb_LayoutGrid2, #LayoutGrid2, #wb_LayoutGrid1, #LayoutGrid1,
#wb_LayoutGrid3, #LayoutGrid3, #wb_LayoutGrid4, #LayoutGrid4,
#wb_LayoutGrid5, #LayoutGrid5, #wb_LayoutGrid6, #LayoutGrid6,
#wb_LayoutGrid7, #LayoutGrid7, #wb_LayoutGrid8, #LayoutGrid8,
#wb_LayoutGrid9, #LayoutGrid9 {
  background-color: #f4f5f8 !important;
  background-image: none !important;
}
#wb_Text4 span, #wb_Text3 span, #wb_Text2 span, #wb_Text1 span, #wb_Text4, #wb_Text3, #wb_Text2, #wb_Text1 {
  color: #2b2d42 !important;
}
.fourd-main-wrapper {
  background-color: #f4f5f8 !important;
  background: #f4f5f8 !important;
}
.fourd-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}
.tier-title-bar {
  background: #eef0f3 !important;
  color: #4b4d63 !important;
  border-color: #e2e5ea !important;
}
.grid-cell {
  background: #ffffff !important;
  color: #2b2d42 !important;
  border-color: #e2e5ea !important;
}
.grid-cell-empty {
  color: #bcc0cc !important;
}
.prize-box {
  background: #fdfdfd !important;
  border-color: #e2e5ea !important;
}
.prize-number {
  color: #1a1b2f !important;
}
.prize-label {
  color: #6c7086 !important;
}
.history-control-bar {
  background: #ffffff !important;
  border-color: #e2e5ea !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
.history-label {
  color: #2b2d42 !important;
}
.history-date-input {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #2b2d42 !important;
  color-scheme: light !important;
}
.history-date-input:focus {
  border-color: #d97706 !important;
}
.badge-date-footer {
  background: #eef0f3 !important;
  color: #2b2d42 !important;
}
.toto-section {
  border-color: #e2e5ea !important;
}
.mg-matrix-table th, .sg-shares-table th {
  background: #eef0f3 !important;
  color: #2b2d42 !important;
  border-color: #e2e5ea !important;
}
.mg-matrix-table td, .sg-shares-table td {
  border-color: #e2e5ea !important;
  color: #2b2d42 !important;
}
.plain-data-table td {
  border-color: #e2e5ea !important;
  color: #2b2d42 !important;
}
.plain-lbl {
  color: #6c7086 !important;
}
.plain-val {
  color: #1a1b2f !important;
}
.mg-box {
  background: #eef0f3 !important;
  color: #2b2d42 !important;
  border-color: #d2d5df !important;
}
.mg-plus {
  color: #d97706 !important;
}
.f4dk-widget {
  background: #ffffff !important;
  border-color: #e2e5ea !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.f4dk-widget-header {
  border-color: #e2e5ea !important;
  color: #2b2d42 !important;
}
.f4dk-meta-row {
  background: #eef0f3 !important;
  color: #5c5f76 !important;
  border-color: #e2e5ea !important;
}
.f4dk-table-scroller {
  border-color: #e2e5ea !important;
}
#MegaMenu1 {
  background-color: #ffffff !important;
}
#MegaMenu1-close a {
  color: #2b2d42 !important;
}
ul#MegaMenu1 li a {
  color: #2b2d42 !important;
  border-color: #e2e5ea !important;
}
ul#MegaMenu1 li a:hover {
  background-color: #f4f5f8 !important;
  color: #d97706 !important;
}
.f4dk-top-bar {
  background-color: #eef0f3 !important;
  border-color: #e2e5ea !important;
}
.f4dk-tab-btn {
  background-color: #ffffff !important;
  color: #2b2d42 !important;
  border-color: #e2e5ea !important;
}
.f4dk-tab-btn.active {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}
.chart-container, .stats-container {
  background-color: #ffffff !important;
  color: #2b2d42 !important;
}
.f4dk-search-layout {
  background-color: #ffffff !important;
  color: #2b2d42 !important;
}
.f4dk-search-layout input {
  background-color: #ffffff !important;
  color: #2b2d42 !important;
  border-color: #cccccc !important;
}
.f4dk-search-layout td {
  color: #2b2d42 !important;
  border-color: #e2e5ea !important;
}
.f4dk-search-layout th {
  background-color: #eef0f3 !important;
  color: #2b2d42 !important;
}

/* ======================================================== */
/* Page Wrapper Resets (Replacing Black Backgrounds) */
/* ======================================================== */
.f4dk-wrapper, 
.f4dk-hn-container, 
.f4dk-search-container, 
.f4dk-search-layout,
#wb_Workspace {
  background-color: #f4f5f8 !important;
  background: #f4f5f8 !important;
  color: #2b2d42 !important;
}

/* ======================================================== */
/* Hot 4D Numbers Page Overrides */
/* ======================================================== */
.f4dk-hn-title {
  color: #2b2d42 !important;
}
.f4dk-hn-subtitle {
  color: #5c5f76 !important;
}
.f4dk-hn-widget {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e5ea !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.f4dk-hn-meta-brand {
  background: #eef0f3 !important;
  border-color: #e2e5ea !important;
}
.f4dk-hn-table th {
  background: #eef0f3 !important;
  color: #4b4d63 !important;
  border-color: #e2e5ea !important;
}
.f4dk-hn-table td {
  border-color: #e2e5ea !important;
  color: #2b2d42 !important;
  background-color: #ffffff !important;
}
.f4dk-hn-table tr:hover td {
  background: #f8f9fa !important;
}
.f4dk-hn-widget-footer {
  background: #f8f9fa !important;
  border-color: #e2e5ea !important;
  color: #5c5f76 !important;
}
.f4dk-hn-tab-btn {
  background-color: #ffffff !important;
  color: #2b2d42 !important;
  border-color: #e2e5ea !important;
}
.f4dk-hn-tab-btn.active, .f4dk-hn-tab-btn:hover {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}

/* ======================================================== */
/* Lucky/Search Numbers Page Overrides (num_detail.html) */
/* ======================================================== */
.f4dk-search-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e5ea !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.f4dk-search-card .f4dk-header {
  background: #eef0f3 !important;
  color: #2b2d42 !important;
  border-bottom: 1px solid #e2e5ea !important;
}
.f4dk-search-sidebar {
  background-color: #f4f5f8 !important;
}
.f4dk-search-content {
  background-color: #f4f5f8 !important;
}
.search-input-box {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  color: #2b2d42 !important;
}
.search-btn {
  background: #d97706 !important;
  color: #ffffff !important;
}
.search-btn:hover {
  background-color: #b45309 !important;
}
.filter-group-title {
  color: #5c5f76 !important;
  border-bottom: 1px solid #e2e5ea !important;
}
.checkbox-item {
  color: #2b2d42 !important;
}
.focus-num-banner {
  background: #ffffff !important;
  border: 2px dashed #d97706 !important;
  border-radius: 12px !important;
}
.focus-num-banner h1 {
  color: #d97706 !important;
}

/* Slot Tables (inside num_detail.html and similar pages) */
.f4dk-pipeline-slot table {
  border: 1px solid #e2e5ea !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
}
.f4dk-pipeline-slot table th, 
.f4dk-pipeline-slot table thead td {
  background: #eef0f3 !important;
  color: #2b2d42 !important;
  border: 1px solid #e2e5ea !important;
}
.f4dk-pipeline-slot table td {
  background: #ffffff !important;
  border: 1px solid #e2e5ea !important;
}
.f4dk-pipeline-slot table tr:hover td {
  background: #f8f9fa !important;
}

/* Force Table Cell Texts to Slate Dark */
.f4dk-pipeline-slot table td,
.f4dk-pipeline-slot table td font,
.f4dk-pipeline-slot table td span,
.f4dk-pipeline-slot table td b {
  color: #2b2d42 !important;
}

/* Inline logos/links */
.f4dk-num-link,
.f4dk-pipeline-slot table a,
.f4dk-pipeline-slot table a font,
.f4dk-pipeline-slot table a * {
  color: #d97706 !important;
}
.f4dk-num-link:hover, 
.f4dk-pipeline-slot table a:hover, 
.f4dk-pipeline-slot table a:hover * {
  color: #b45309 !important;
}

/* Bgcolor resets for table cells */
.f4dk-pipeline-slot table td[bgcolor], 
.f4dk-pipeline-slot table th[bgcolor] {
  background-color: #ffffff !important;
}
.f4dk-pipeline-slot table td[bgcolor="#eeeeee"], 
.f4dk-pipeline-slot table td[bgcolor="eeeeee"],
.f4dk-pipeline-slot table td[bgcolor="#dddddd"], 
.f4dk-pipeline-slot table td[bgcolor="dddddd"],
.f4dk-pipeline-slot table td[bgcolor="#bbbbbb"], 
.f4dk-pipeline-slot table td[bgcolor="bbbbbb"] {
  background-color: #f8f9fa !important;
}

/* Primary prize Specific Colors override in light mode */
.f4dk-pipeline-slot table td[bgcolor="#FF0000"], 
.f4dk-pipeline-slot table td[bgcolor="red"] {
  background-color: #fee2e2 !important; /* light red */
  color: #b91c1c !important;
}
.f4dk-pipeline-slot table td[bgcolor="#FF0000"] b, 
.f4dk-pipeline-slot table td[bgcolor="red"] b {
  color: #b91c1c !important;
}
.f4dk-pipeline-slot table td[bgcolor="#0000FF"], 
.f4dk-pipeline-slot table td[bgcolor="blue"] {
  background-color: #dbeafe !important; /* light blue */
  color: #1d4ed8 !important;
}
.f4dk-pipeline-slot table td[bgcolor="#0000FF"] b, 
.f4dk-pipeline-slot table td[bgcolor="blue"] b {
  color: #1d4ed8 !important;
}
.f4dk-pipeline-slot table td[bgcolor="#008000"], 
.f4dk-pipeline-slot table td[bgcolor="green"] {
  background-color: #dcfce7 !important; /* light green */
  color: #15803d !important;
}
.f4dk-pipeline-slot table td[bgcolor="#008000"] b, 
.f4dk-pipeline-slot table td[bgcolor="green"] b {
  color: #15803d !important;
}
.f4dk-pipeline-slot table td[bgcolor="#FFFF00"], 
.f4dk-pipeline-slot table td[bgcolor="yellow"] {
  background-color: #fef9c3 !important; /* light yellow */
  color: #a16207 !important;
}
.f4dk-pipeline-slot table td[bgcolor="#FFFF00"] b, 
.f4dk-pipeline-slot table td[bgcolor="yellow"] b {
  color: #a16207 !important;
}

/* Universal Inline Vector Badges */
.f4dk-pipeline-slot table h2, 
.f4dk-pipeline-slot table h3, 
.f4dk-pipeline-slot table h4 {
  color: #2b2d42 !important;
}

/* ======================================================== */
/* Draw Details Page Overrides (draw_detail.html) */
/* ======================================================== */
.f4dk-detail-container {
  background-color: #f4f5f8 !important;
  color: #2b2d42 !important;
}
.f4dk-pane-card {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #e2e5ea !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}
.f4dk-title-header {
  color: #2b2d42 !important;
  border-bottom: 2px solid #d97706 !important;
  font-weight: bold !important;
}
.f4dk-return-btn {
  background: #d97706 !important;
  color: #ffffff !important;
  border: 1px solid #d97706 !important;
}
.f4dk-return-btn:hover {
  background: #b45309 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}

/* Tables inside Draw Details */
.f4dk-draw-slot table {
  background-color: #ffffff !important;
  color: #2b2d42 !important;
}
.f4dk-draw-slot table td, 
.f4dk-draw-slot table th {
  border: 1px solid #e2e5ea !important;
  color: #2b2d42 !important;
  background-color: #ffffff !important;
}
.f4dk-draw-slot table th {
  background-color: #eef0f3 !important;
}

/* Specific Cell Background Overrides in Light Theme */
.f4dk-draw-slot table td[bgcolor="#FFCC66" i], 
.f4dk-draw-slot table td[bgcolor="FFCC66" i], 
.f4dk-draw-slot table tr[bgcolor="#FFCC66" i] td, 
.f4dk-draw-slot table td[bgcolor="#FF9999" i], 
.f4dk-draw-slot table td[bgcolor="FF9999" i] {
  background-color: #eef0f3 !important;
  color: #2b2d42 !important;
  border: 1px solid #e2e5ea !important;
}

.f4dk-draw-slot table td[bgcolor="#bbbbbb" i], 
.f4dk-draw-slot table td[bgcolor="bbbbbb" i], 
.f4dk-draw-slot table tr[bgcolor="bbbbbb" i] td,
.f4dk-draw-slot table td[bgcolor="#dddddd" i], 
.f4dk-draw-slot table td[bgcolor="dddddd" i], 
.f4dk-draw-slot table tr[bgcolor="dddddd" i] td,
.f4dk-draw-slot table td[bgcolor="#eeeeee" i], 
.f4dk-draw-slot table td[bgcolor="eeeeee" i], 
.f4dk-draw-slot table tr[bgcolor="eeeeee" i] td {
  background-color: #f8f9fa !important;
  color: #2b2d42 !important;
  border: 1px solid #e2e5ea !important;
}

/* Operator Prize Highlight Overrides */
.f4dk-draw-slot table td[bgcolor="990000" i], 
.f4dk-draw-slot table td[bgcolor="#990000" i] {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
}
.f4dk-draw-slot table td[bgcolor="000099" i], 
.f4dk-draw-slot table td[bgcolor="#000099" i] {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
}
.f4dk-draw-slot table td[bgcolor="009900" i], 
.f4dk-draw-slot table td[bgcolor="#009900" i] {
  background-color: #dcfce7 !important;
  color: #15803d !important;
}
.f4dk-draw-slot table td[bgcolor="FFFF66" i], 
.f4dk-draw-slot table td[bgcolor="#FFFF66" i] {
  background-color: #fef9c3 !important;
  color: #a16207 !important;
}

/* Number / Text Overrides */
.f4dk-draw-slot table font[color="000077" i] {
  color: #d97706 !important;
  font-size: 18px !important;
}
.f4dk-draw-slot table font[color="990000" i], 
.f4dk-draw-slot table font[color="red" i] {
  color: #b91c1c !important;
}

.f4dk-draw-slot table a {
  color: #d97706 !important;
}
.f4dk-draw-slot table a:hover {
  color: #b45309 !important;
}

.f4dk-loader {
  color: #d97706 !important;
}

/* ======================================================== */
/* Engaging Tables & Rank Badges overrides */
/* ======================================================== */
.f4dk-hn-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e2e5ea !important;
  margin-top: 10px !important;
}
.f4dk-hn-table th {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e2e5ea !important;
  padding: 12px 8px !important;
  text-align: center !important;
}
.f4dk-hn-table td {
  padding: 10px 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}
.f4dk-hn-table tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Circular Medals/Badges for Rank Columns */
.rank-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: bold !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.rank-1 {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
}
.rank-2 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
.rank-3 {
  background-color: #ffedd5 !important;
  color: #c2410c !important;
  border: 1px solid #fed7aa !important;
}
.rank-other {
  background-color: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}

/* Make headers in View 2 align properly */
.f4dk-hn-grid-all-side .op-badge {
  margin: 4px !important;
}

/* ======================================================== */
/* Brand Badge Styling Definitions */
/* ======================================================== */
.inline-logo-svg {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  margin-right: 6px !important;
  margin-bottom: 2px !important;
}
.op-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  min-width: 100px !important;
  box-sizing: border-box !important;
  margin: 4px !important;
  text-shadow: none !important;
}
.badge-m { background: #fac814 !important; color: #000000 !important; }
.badge-pmp { background: #0099b3 !important; color: #ffffff !important; }
.badge-toto { background: #cc0000; color: #ffffff !important; }
.badge-sg { background: #06b6d4 !important; color: #ffffff !important; }
.badge-cs { background: #10b981 !important; color: #ffffff !important; }
.badge-sabah { background: #6b7280 !important; color: #ffffff !important; }
.badge-stc { background: #f97316 !important; color: #ffffff !important; }

/* ======================================================== */
/* Real CSS Badges matching live_result.html */
/* ======================================================== */
.real-logo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Arial Black", Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  height: 24px !important;
  min-width: 24px !important;
}

.badge-real-m {
  background: #000000 !important;
  color: #fac814 !important;
  border: 2px solid #fac814 !important;
  font-style: italic !important;
}

.badge-real-pmp {
  background: #ffffff !important;
  color: #007a99 !important;
  border: 2px solid #007a99 !important;
  text-transform: lowercase !important;
  font-size: 9px !important;
  padding: 4px 6px !important;
  font-family: Arial, sans-serif !important;
}

.badge-real-toto {
  background: #ffffff !important;
  color: #cc0000 !important;
  border: 3px solid #cc0000 !important;
  font-style: italic !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 9px !important;
  padding: 0 !important;
  min-width: 32px !important;
}

.badge-real-sg {
  background: #1e3a8a !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 4px !important;
}

.badge-real-cs {
  background: #ffffff !important;
  color: #15803d !important;
  border: 2px solid #15803d !important;
  font-size: 9px !important;
  padding: 4px 6px !important;
  font-family: Arial, sans-serif !important;
}

.badge-real-sabah {
  background: #ffffff !important;
  color: #1e40af !important;
  border: 3px solid #cc0000 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 10px !important;
  padding: 0 !important;
  min-width: 32px !important;
}

.badge-real-stc {
  background: #ffffff !important;
  color: #b45309 !important;
  border: 2px solid #b45309 !important;
  font-size: 10px !important;
}

/* Checkbox label display adjustments */
.checkbox-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 !important;
}

/* ======================================================== */
/* Downloaded Logo Image Styles */
/* ======================================================== */
.op-logo-img {
  height: 24px !important;
  border-radius: 4px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 1px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

.tbl-logo-img {
  height: 18px !important;
  border-radius: 2px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 1px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

.chk-logo-img {
  height: 22px !important;
  border-radius: 4px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 1px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  display: inline-block !important;
}

.fourd-logo-img {
  height: 38px !important;
  border-radius: 4px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 2px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

.logo-badge-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure checkbox item aligned */
.checkbox-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 !important;
}