/* Theme Switcher Button */
.theme-switcher-container {
  position: fixed;
  /* place near top-right in front of the navbar */
  top: 14px;
  right: 20px;
  z-index: 2001;
}

.theme-switcher-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #316ce8;
  background: #fff;
  color: #316ce8;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(49, 108, 232, 0.2);
  position: relative;
  overflow: hidden;
}

.theme-switcher-btn:hover {
  background: #316ce8;
  color: #fff;
  box-shadow: 0 4px 15px rgba(49, 108, 232, 0.4);
  transform: scale(1.05);
}

.theme-switcher-btn:active {
  transform: scale(0.95);
}

/* Sun Icon Animation */
.sun-icon {
  position: absolute;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: all 0.3s ease;
}

/* use normal <i class="fas fa-sun"> markup (FontAwesome) */

/* Moon Icon Animation */
.moon-icon {
  position: absolute;
  opacity: 0;
  transform: rotate(-180deg) scale(0);
  transition: all 0.3s ease;
}

/* use normal <i class="fas fa-moon"> markup (FontAwesome) */

/* When button is in dark mode state (showing moon is active) */
.theme-switcher-btn.dark-mode .sun-icon {
  opacity: 0;
  transform: rotate(180deg) scale(0);
}

.theme-switcher-btn.dark-mode .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Dark Theme Styles */
body.dark-theme {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}

body.dark-theme html {
  background: #1a1a1a !important;
}

body.dark-theme .navbar {
  background-color: #2d2d2d !important;
  border-bottom: 1px solid #404040;
}

body.dark-theme .nav-link {
  color: #b0b0b0 !important;
}

body.dark-theme .nav-link:hover,
body.dark-theme .nav-link.active {
  color: #fff !important;
}

body.dark-theme .navbar-brand img {
  filter: brightness(0.9);
}

body.dark-theme .card {
  background-color: #2d2d2d;
  color: #e0e0e0;
  border: 1px solid #404040;
}

body.dark-theme .card-header {
  background-color: #252525;
  border-color: #404040;
}

body.dark-theme .form-control {
  background-color: #252525;
  color: #e0e0e0;
  border-color: #404040;
}

body.dark-theme .form-control:focus {
  background-color: #252525;
  color: #e0e0e0;
  border-color: #316ce8;
}

body.dark-theme .dropdown-menu {
  background-color: #2d2d2d;
  border-color: #404040;
}

body.dark-theme .dropdown-item {
  color: #b0b0b0;
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item.active {
  background-color: #316ce8;
  color: #fff;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: #e0e0e0;
}

body.dark-theme a {
  color: #66b3ff;
}

body.dark-theme a:hover {
  color: #99ccff;
}

body.dark-theme .table {
  color: #e0e0e0;
  border-color: #404040;
}

body.dark-theme .table thead th {
  background-color: #252525;
  color: #e0e0e0;
  border-color: #404040;
}

body.dark-theme .table tbody tr:hover {
  background-color: #252525;
}

body.dark-theme .table td,
body.dark-theme .table th {
  border-color: #404040;
}

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

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

body.dark-theme .modal-content {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #e0e0e0;
}

body.dark-theme .modal-header {
  background-color: #252525;
  border-color: #404040;
}

body.dark-theme .modal-footer {
  border-color: #404040;
}

body.dark-theme .close {
  color: #e0e0e0;
}

body.dark-theme input::placeholder {
  color: #808080;
}

body.dark-theme textarea::placeholder {
  color: #808080;
}

body.dark-theme .text-muted {
  color: #a0a0a0 !important;
}

body.dark-theme .badge-light {
  background-color: #404040 !important;
  color: #e0e0e0 !important;
}

body.dark-theme .bg-light {
  background-color: #252525 !important;
}

body.dark-theme .border {
  border-color: #404040 !important;
}

body.dark-theme main {
  background-color: #1a1a1a;
}

body.dark-theme footer {
  background-color: #252525;
  color: #b0b0b0;
  border-top: 1px solid #404040;
}

body.dark-theme .pagination .page-link {
  background-color: #2d2d2d;
  color: #b0b0b0;
  border-color: #404040;
}

body.dark-theme .pagination .page-link:hover {
  background-color: #316ce8;
  color: #fff;
  border-color: #316ce8;
}

body.dark-theme .pagination .page-item.active .page-link {
  background-color: #316ce8;
  border-color: #316ce8;
}

body.dark-theme .list-group-item {
  background-color: #2d2d2d;
  color: #b0b0b0;
  border-color: #404040;
}

body.dark-theme .list-group-item:hover {
  background-color: #252525;
}

body.dark-theme .alert {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #e0e0e0;
}

/* Button styling in dark theme */
body.dark-theme .theme-switcher-btn {
  border-color: #66b3ff;
  background: #2d2d2d;
  color: #66b3ff;
  box-shadow: 0 2px 10px rgba(102, 179, 255, 0.2);
}

body.dark-theme .theme-switcher-btn:hover {
  background: #66b3ff;
  color: #1a1a1a;
  box-shadow: 0 4px 15px rgba(102, 179, 255, 0.4);
}

/* Animation keyframes for smooth sun/moon rotation */
@keyframes sunRotate {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes moonRotate {
  from {
    transform: rotate(-180deg) scale(0);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}

.theme-switcher-btn.animating .sun-icon {
  animation: sunRotate 0.3s ease;
}

.theme-switcher-btn.animating .moon-icon {
  animation: moonRotate 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .theme-switcher-container {
    top: 70px;
    right: 10px;
  }

  .theme-switcher-btn {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
}

/* --------------------------------------------------
   Global CSS variables and overrides for light/dark
   This section sets fonts and color variables and
   applies them to core elements so the whole site
   switches consistently when `.dark-theme` is toggled.
   -------------------------------------------------- */

:root{
  --font-base: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-size-base: 14px;
  --line-height-base: 1.5;

  /* Light theme colors */
  --bg: #ffffff;
  --text: #3e4555;
  --muted: #8d97ad;
  --primary: #316ce8;
  --primary-600: #2356b0;
  --card-bg: #ffffff;
  --border: rgba(120,130,140,.13);
  --navbar-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --link: var(--primary);
  --link-hover: var(--primary-600);
  --shadow: 0 2px 10px rgba(49,108,232,0.08);
}

/* Dark theme overrides - toggled by adding .dark-theme to body */
body.dark-theme {
  --bg: #0f1113;
  --text: #e6eef8;
  --muted: #9aa6b3;
  --primary: #66b3ff;
  --primary-600: #4b8fe0;
  --card-bg: #1b1d20;
  --border: #33383d;
  --navbar-bg: #17181b;
  --dropdown-bg: #1b1d20;
  --link: var(--primary);
  --link-hover: #99ccff;
  --shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Smooth transitions for theme changes */
html,body,*{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Base typography */
body{
  font-family: var(--font-base) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading) !important;
  color: var(--text) !important;
}

/* Links */
a, a.link {
  color: var(--link) !important;
}
a:hover, a.link:hover {
  color: var(--link-hover) !important;
}

/* Navbar */
.navbar{
  background-color: var(--navbar-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}
.navbar .nav-link{
  color: var(--muted) !important;
}
.navbar .nav-link:hover, .navbar .nav-item.active .nav-link{
  color: var(--text) !important;
}

/* Cards and panels */
.card{
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.card .card-header{
  background-color: var(--card-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Forms */
.form-control{
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border: 2px solid var(--border) !important;
}
.form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.12rem rgba(49,108,232,0.12) !important;
}

/* Dropdowns and menus */
.dropdown-menu{
  background-color: var(--dropdown-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.dropdown-item{color:var(--text) !important}
.dropdown-item:hover{background:rgba(49,108,232,0.06);color:var(--text) !important}

/* Buttons */
.btn{
  /* default: inherit page text color for edge cases; specific button types below set explicit contrast */
  color: inherit;
}
.btn-primary{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover{background-color:var(--primary-600) !important;border-color:var(--primary-600) !important}

/* Ensure filled buttons have readable text on their colored backgrounds */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-inverse,
.btn-themecolor,
.btn-red {
  color: #fff !important;
}

/* Dark theme: certain light buttons should switch to dark text for readability */
body.dark-theme .btn-light,
body.dark-theme .btn-outline-light {
  color: #1a1a1a !important;
  background-color: #f4f4f4 !important;
}

/* Tables */
.table{
  color:var(--text) !important;
}
.table thead th{
  background:var(--card-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* Footer */
footer, .py-3{
  background-color: var(--card-bg) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}

/* Lists, badges, alerts */
.list-group-item, .badge-light, .alert{
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Provide explicit high-contrast helpers */
.text-muted{color:var(--muted) !important}

/* If you need to tweak: change the variables in :root or body.dark-theme */

/* Navigation Tabs */
.nav-tabs {
  background-color: var(--card-bg) !important;
  border-bottom: 2px solid var(--border) !important;
}

.nav-link {
  color: var(--text) !important;
  background-color: transparent !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.nav-link:hover {
  background-color: var(--bg) !important;
  color: var(--primary) !important;
}

.nav-link.active {
  color: var(--primary) !important;
  background-color: transparent !important;
  border-bottom: 3px solid var(--primary) !important;
}

/* Tab Content */
.tab-content {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-radius: 0 0 8px 8px !important;
  padding: 20px !important;
}

.tab-pane {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
}

/* Ensure static / policy / CMS pages follow theme variables
   Many policy pages are rendered through `page.php` and use
   classes like `.content`, `.bg-white` and `.text-dark`. Make
   sure those elements follow dark-mode variables. */
/* General content containers (pages, policies, static pages) */
.content,
.page-content,
.static-page,
.policy-content,
.terms-content,
.policy,
.content .card,
.content .card-body {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
}

/* Paragraphs, headings and lists inside content */
.content p,
.content li,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: var(--text) !important;
}

/* Links inside static content should be readable */
.content a,
.page-content a,
.policy-content a {
  color: var(--link) !important;
}

/* Override Bootstrap utility classes when dark theme is active */
body.dark-theme .bg-white {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
}

/* Some templates use `.text-dark` on headings; ensure they switch in dark mode */
body.dark-theme .text-dark {
  color: var(--text) !important;
}

/* small muted text inside policies should use --muted */
.content .text-muted,
.policy-content .text-muted {
  color: var(--muted) !important;
}