/* Dark Mode Styles */
:root {
  --dark-bg-color: #000000;
  --dark-border-color: #333639;
  --dark-accent-color: #3CB489;
  --dark-text-color: #f5f5f5;
  --dark-secondary-bg: #121212;
  --light-bg-color: #ffffff;
  --light-text-color: #333333;
  --light-border-color: #ddd;
}

/* Smooth transitions for theme changes */
html, body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply to html element with data attribute for early rendering */
html[data-theme="dark"] {
  background-color: var(--dark-bg-color) !important;
  color: var(--dark-text-color) !important;
}

html[data-theme="light"] {
  background-color: var(--light-bg-color) !important;
  color: var(--light-text-color) !important;
}
body.dark-mode {
  background-color: var(--dark-bg-color);
  color: var(--dark-text-color);
}
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode #content,
body.dark-mode #wrapper {
  background-color: var(--dark-bg-color);
}
body.dark-mode .list-group-item {
  background-color: var(--dark-secondary-bg);
  border-color: var(--dark-border-color);
  color: var(--dark-text-color);
}

body.dark-mode .list-group-item.active,
body.dark-mode h2.list-group-item.active {
  background-color: var(--dark-accent-color);
  border-color: var(--dark-accent-color);
  color: var(--dark-text-color);
}

/* Tables */
body.dark-mode .table {
  color: var(--dark-text-color);
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #1e1e1e;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
  background-color: var(--dark-secondary-bg);
}

body.dark-mode .table > tbody > tr > td,
body.dark-mode .table > tbody > tr > th,
body.dark-mode .table > tfoot > tr > td,
body.dark-mode .table > tfoot > tr > th,
body.dark-mode .table > thead > tr > td,
body.dark-mode .table > thead > tr > th {
  border-color: var(--dark-border-color);
}
/* Contextual rows (Bootstrap) overrides */
body.dark-mode .table tr.info,
body.dark-mode .table tr.info > td,
body.dark-mode .table tr.info > th,
body.dark-mode .table .info,
body.dark-mode .table tfoot tr.info,
body.dark-mode .table tfoot tr.info > td,
body.dark-mode .table tfoot tr.info > th {
  background-color: rgba(60, 180, 137, 0.12) !important; /* soft accent tint for dark bg */
  color: var(--dark-text-color) !important;
  border-color: var(--dark-border-color) !important;
}
body.dark-mode #sidebar-wrapper {
  background-color: var(--dark-secondary-bg);
  border-right: 1px solid var(--dark-border-color);
}

body.dark-mode .sidebar-nav li a,
body.dark-mode .sidebar-nav li a:hover,
body.dark-mode .sidebar-nav li a:active,
body.dark-mode .sidebar-nav li a:focus {
  color: var(--dark-text-color);
}

body.dark-mode .sidebar-nav li a:hover {
  background-color: rgba(60, 180, 137, 0.2);
}

body.dark-mode .navbar,
body.dark-mode .navc,
body.dark-mode .top-fixed {
  background-color: var(--dark-secondary-bg);
  border-color: var(--dark-border-color);
}
body.dark-mode .nav-bottom {
  background-color: var(--dark-secondary-bg);
  border-top: 1px solid var(--dark-border-color);
}

body.dark-mode .nav-bottom a {
  color: var(--dark-text-color);
}

body.dark-mode .nav-bottom a:hover,
body.dark-mode .nav-bottom a:focus {
  color: var(--dark-accent-color);
}
body.dark-mode .btn-default {
  background-color: var(--dark-secondary-bg);
  border-color: var(--dark-border-color);
  color: var(--dark-text-color);
}

body.dark-mode .btn-primary {
  background-color: var(--dark-accent-color);
  border-color: var(--dark-accent-color);
  color: #ffffff !important;
}

body.dark-mode .btn-success {
  background-color: #28a745;
  border-color: #28a745;
  color: #ffffff !important;
}
body.dark-mode .form-control {
  background-color: #1e1e1e;
  border-color: var(--dark-border-color);
  color: var(--dark-text-color);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode select,
body.dark-mode textarea {
  background-color: #1e1e1e;
  border-color: var(--dark-border-color);
  color: var(--dark-text-color);
}

/* Links */
body.dark-mode a {
  color: var(--dark-accent-color);
}

body.dark-mode a:hover,
body.dark-mode a:focus {
  color: #4fd9a3;
}

body.dark-mode .gold {
  color: gold;
}

body.dark-mode .silver {
  color: silver;
}

body.dark-mode .bronze {
  color: #cd7f32;
}

body.dark-mode .text-success {
  color: #4fd9a3;
}

body.dark-mode .hi-div {
  background-color: var(--dark-secondary-bg);
  border-color: var(--dark-border-color);
}

body.dark-mode [class*="jodi"],
body.dark-mode [class*="single"],
body.dark-mode [class*="panna"],
body.dark-mode [class*="combination"],
body.dark-mode .dice-box {
  border-color: var(--dark-border-color);
}

body.dark-mode .dice-box {
  border: 1px solid #333639;
}

body.dark-mode img,
body.dark-mode a img,
body.dark-mode a > img {
  border-color: var(--dark-border-color);
}

body.dark-mode table,
body.dark-mode tr,
body.dark-mode td,
body.dark-mode th {
  border-color: var(--dark-border-color);
}

body.dark-mode [class*="play"],
body.dark-mode [class*="game"] {
  border-color: var(--dark-border-color);
  background-color: var(--dark-secondary-bg);
}
.dark-mode-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  vertical-align: middle;
  margin-left: 10px;
  z-index: 2;
}

.dark-mode-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 15px;
  position: relative;
  height: auto;
  min-height: 40px;
}

.dark-mode-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.dark-mode-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 1;
}

.dark-mode-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

input:checked + .dark-mode-slider {
  background-color: var(--dark-accent-color);
}

input:checked + .dark-mode-slider:before {
  transform: translateX(26px);
  -webkit-transform: translateX(26px);
}

.mode-icon {
  margin-right: 8px;
  vertical-align: middle;
}