body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Default light theme (Bootstrap 4 default) */

body {
  background-color: #fff;
  color: #212529;
}

/* Dark theme */

body.dark-theme {
  background-color: #212529;
  color: #f8f9fa;
}

/* Bootstrap 4 component overrides for dark theme */

body.dark-theme .btn-primary {
  background-color: #375a7f;
  border-color: #375a7f;
}

body.dark-theme .btn-primary:hover {
  background-color: #2c4866;
  border-color: #2c4866;
}

body.dark-theme .btn-secondary {
  background-color: #444;
  border-color: #444;
}

body.dark-theme .btn-secondary:hover {
  background-color: #333;
  border-color: #333;
}

body.dark-theme .card {
  background-color: #343a40;
  border-color: #454d55;
  color: #f8f9fa;
}

body.dark-theme .table {
  color: #f8f9fa;
  background-color: #343a40;
}

body.dark-theme .table-bordered {
  border-color: #454d55;
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .navbar {
  background-color: #343a40;
  color: #f8f9fa;
}

body.dark-theme .nav-link {
  color: #f8f9fa;
}

body.dark-theme .form-control {
  background-color: #343a40;
  border-color: #454d55;
  color: #f8f9fa;
}

body.dark-theme .form-control:focus {
  background-color: #454d55;
  border-color: #596673;
  color: #f8f9fa;
}

/* TRS Player Rankings table - override inline styles so dark mode has visible text */
body.dark-theme #new-trs-table,
body.dark-theme #new-trs-table th,
body.dark-theme #new-trs-table td,
body.dark-theme #new-trs-table tbody tr {
  color: #f8f9fa !important;
  background-color: #343a40 !important;
}
body.dark-theme #new-trs-table tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
body.dark-theme #new-trs-table tbody tr:nth-child(even) {
  background-color: #343a40 !important;
}
body.dark-theme #new-trs-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-theme #new-trs-table thead th {
  background-color: #454d55 !important;
  color: #f8f9fa !important;
  border-color: #495057 !important;
}
body.dark-theme #new-trs-mgmt-panel .card-body,
body.dark-theme #new-trs-mgmt-panel .form-control,
body.dark-theme #new-trs-mgmt-panel .form-check-label,
body.dark-theme #new-trs-mgmt-panel label,
body.dark-theme #new-trs-mgmt-panel .text-muted {
  color: #e9ecef !important;
}
body.dark-theme #new-trs-mgmt-panel .card.bg-light,
body.dark-theme #new-trs-mgmt-panel .card-body.bg-light,
body.dark-theme #new-trs-mgmt-panel .card.bg-white {
  background-color: #343a40 !important;
  color: #f8f9fa !important;
  border-color: #495057 !important;
}
body.dark-theme #new-trs-mgmt-panel .card.bg-white .card-body,
body.dark-theme #new-trs-mgmt-panel .card.bg-white label,
body.dark-theme #new-trs-mgmt-panel .card.bg-white .text-muted {
  background-color: #343a40 !important;
  color: #e9ecef !important;
}
body.dark-theme #new-trs-mgmt-panel .card.bg-white .form-control,
body.dark-theme #new-trs-mgmt-panel .card.bg-white .form-control-sm {
  background-color: #454d55 !important;
  border-color: #495057 !important;
  color: #f8f9fa !important;
}
body.dark-theme #new-trs-mgmt-panel .card.bg-white .btn-outline-secondary {
  border-color: #6c757d !important;
  color: #e9ecef !important;
}
body.dark-theme #new-trs-mgmt-panel .card.bg-white .btn-outline-secondary:hover {
  background-color: #495057 !important;
  border-color: #6c757d !important;
  color: #f8f9fa !important;
}
body.dark-theme #new-trs-mgmt-panel .input-group-text {
  background-color: #454d55 !important;
  border-color: #495057 !important;
  color: #f8f9fa !important;
}
body.dark-theme #toggle-search-filter-btn {
  background-color: #495057 !important;
  border-color: #6c757d !important;
  color: #f8f9fa !important;
}

/* Add more Bootstrap component overrides as needed */

/* Above Survivors cockpit rail chrome (z-index ~1026–1032), below Bootstrap modals (1050+). */
#theme-toggle,
#theme-toggle.idx-theme-toggle {
  z-index: 1041;
  position: fixed;
  bottom: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Auth bar (#FBlogout): fbauth.js injects #auth-bar-styles (#fff + btn-outline-light) assuming a dark header strip.
 * Token-based shells (index-landing, chalksta-app) use light header rows in light mode — white text is unreadable.
 * Scoped only to .index-landing / .chalksta-app so legacy pages with dark #3d3d3d bars keep white-on-dark.
 */
body.index-landing:not(.dark-theme) #logincolumn #FBlogout #settingsbutton,
body.index-landing:not(.dark-theme) #logincolumn #FBlogout #settingsbutton:hover,
body.chalksta-app:not(.dark-theme) #logincolumn #FBlogout #settingsbutton,
body.chalksta-app:not(.dark-theme) #logincolumn #FBlogout #settingsbutton:hover {
  color: var(--idx-nav-fg, #1d1d1f) !important;
}

body.index-landing:not(.dark-theme) #logincolumn #FBlogout #fblogoutbutton.btn-outline-light,
body.chalksta-app:not(.dark-theme) #logincolumn #FBlogout #fblogoutbutton.btn-outline-light {
  color: var(--idx-nav-fg, #1d1d1f) !important;
  border-color: var(--idx-border, #ced4da) !important;
  background: transparent !important;
}

body.index-landing:not(.dark-theme) #logincolumn #FBlogout #fblogoutbutton.btn-outline-light:hover,
body.chalksta-app:not(.dark-theme) #logincolumn #FBlogout #fblogoutbutton.btn-outline-light:hover {
  color: var(--espn-red, #e31837) !important;
  border-color: var(--espn-red, #e31837) !important;
  background: color-mix(in srgb, var(--espn-red, #e31837) 10%, transparent) !important;
}

body.dark-theme.index-landing #logincolumn #FBlogout #settingsbutton,
body.dark-theme.index-landing #logincolumn #FBlogout #settingsbutton:hover,
body.dark-theme.chalksta-app #logincolumn #FBlogout #settingsbutton,
body.dark-theme.chalksta-app #logincolumn #FBlogout #settingsbutton:hover {
  color: var(--idx-nav-fg, #f8f9fa) !important;
}

body.dark-theme.index-landing #logincolumn #FBlogout #fblogoutbutton.btn-outline-light,
body.dark-theme.chalksta-app #logincolumn #FBlogout #fblogoutbutton.btn-outline-light {
  color: var(--idx-nav-fg, #f8f9fa) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
}

body.dark-theme.index-landing #logincolumn #FBlogout #fblogoutbutton.btn-outline-light:hover,
body.dark-theme.chalksta-app #logincolumn #FBlogout #fblogoutbutton.btn-outline-light:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}