/* Dark mode overrides for Emmatx */

/* Apply dark backgrounds and light text to the entire page when the
   ``dark-mode`` class is present on the body element.  Colours have
   been chosen to provide sufficient contrast while maintaining the
   existing layout. */

body.dark-mode {
  background-color: #121212;
  color: #e5e5e5;
}

body.dark-mode .section {
  background-color: #1e1e1e;
  color: #e5e5e5;
  box-shadow: none;
}

/* Darken modal backgrounds and overlays in dark mode.  The default modal
   background is white, which looks out of place when dark mode is
   enabled.  We set a dark background colour and light text for the
   modal container.  The overlay itself becomes more opaque to
   emphasise focus on the modal content. */
body.dark-mode .modal {
  background-color: #1e293b !important;
  color: #e5e5e5 !important;
}
body.dark-mode .modal-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Additional dark-mode customisations provided by the user to improve
   the appearance of the header and dashboard statistics. */
body.dark-mode .main-header {
  background-color: #1f2937 !important;
  color: #e5e5e5;
  border-bottom-color: #374151 !important;
}
body.dark-mode .stat-box {
  flex: 1;
  min-width: 150px;
  background-color: #1f2937;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
}
body.dark-mode .account-panel {
  background: #1f2937 !important;
}

body.dark-mode .sidebar,
body.dark-mode .account-sidebar {
  background-color: #1f2937;
  color: #e5e5e5;
  border-color: #374151;
}

body.dark-mode .sidebar a,
body.dark-mode .account-sidebar a {
  color: #e5e5e5;
}

body.dark-mode table {
  background-color: #1e1e1e;
  color: #e5e5e5;
}

body.dark-mode .table th {
  background-color: #374151;
  color: #e5e5e5;
}

/* Use a unified green colour for buttons in dark mode as well. */
body.dark-mode .btn,
body.dark-mode .btn-secondary {
  background-color: #4CAF50 !important;
  color: #fff !important;
}
body.dark-mode .btn:hover,
body.dark-mode .btn-secondary:hover {
  background-color: #388E3C !important;
}

/* Style the dark mode toggle as a slider.  The toggle consists of a
   hidden checkbox and a span representing the track and knob. */
.dark-mode-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}
.dark-mode-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dark-mode-toggle span {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.4s;
  border-radius: 24px;
}
.dark-mode-toggle span:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}
.dark-mode-toggle input:checked + span {
  background-color: #2563eb;
}
.dark-mode-toggle input:checked + span:before {
  transform: translateX(24px);
}

/* Extend dark mode styles to headers, navigation and form elements. */
body.dark-mode .main-header {
  background-color: #1f2937;
  color: #e5e5e5;
  border-bottom-color: #374151;
}
body.dark-mode .main-header a {
  color: #e5e5e5;
}
body.dark-mode .dashboard-layout .sidebar {
  background-color: #1f2937;
  color: #e5e5e5;
  border-color: #374151;
}
body.dark-mode .dashboard-layout .sidebar .nav-icon {
  color: #10b981;
}
body.dark-mode .dashboard-layout .sidebar a {
  color: #e5e5e5;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #111827;
  color: #e5e5e5;
  border: 1px solid #374151;
}
body.dark-mode .table th {
  background-color: #374151;
  color: #e5e5e5;
}
body.dark-mode .table td {
  background-color: #1e293b;
  color: #e5e5e5;
}
body.dark-mode .section {
  background-color: #1e1e1e;
  color: #e5e5e5;
  box-shadow: none;
}