/* Universal Dark Mode - MockTestSeries Admin Panel */

html.dark-mode {
  background: #12151c !important;
}

html.dark-mode body {
  background: #12151c !important;
  color: #dcdfe4 !important;
}

/* Sidebars, headers, nav - keep brand blue but slightly deepen */
html.dark-mode .sidebar {
  background: #0a2f52 !important;
}

/* Generic containers, cards, panels, tables */
html.dark-mode div,
html.dark-mode section,
html.dark-mode main,
html.dark-mode article,
html.dark-mode aside,
html.dark-mode form,
html.dark-mode fieldset {
  background-color: transparent;
}

/* White/light backgrounds -> dark surface */
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode .topbar,
html.dark-mode .card,
html.dark-mode .content-box,
html.dark-mode .panel,
html.dark-mode .box,
html.dark-mode table,
html.dark-mode .table,
html.dark-mode .modal,
html.dark-mode .stat-card,
html.dark-mode [class*="instructions"],
html.dark-mode [class*="summary"],
html.dark-mode [class*="notice"],
html.dark-mode [class*="info"],
html.dark-mode [class*="alert"],
html.dark-mode [class*="hint"],
html.dark-mode [class*="tip"],
html.dark-mode [class*="warning"] {
  background-color: #1b2029 !important;
  color: #dcdfe4 !important;
}

html.dark-mode code,
html.dark-mode pre {
  background-color: #232937 !important;
  color: #f2c14e !important;
}

html.dark-mode table th {
  background-color: #232937 !important;
  color: #eaecef !important;
}

html.dark-mode table td,
html.dark-mode table th {
  border-color: #333a48 !important;
}

html.dark-mode tr:hover {
  background-color: #232937 !important;
}

/* Text colors that were dark-on-light need to lighten */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode p, html.dark-mode span, html.dark-mode label,
html.dark-mode li, html.dark-mode td, html.dark-mode th {
  color: #dcdfe4;
}

/* Form elements */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background-color: #232937 !important;
  color: #eaecef !important;
  border-color: #3a4152 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #8890a0 !important;
}

/* Links and buttons keep their brand colors but adjust borders */
html.dark-mode a {
  color: #6fa8ff;
}

html.dark-mode .menu-item {
  color: #e8f0fe !important;
}

/* Borders that were light gray -> darker */
html.dark-mode [style*="border-bottom:1px solid #eee"],
html.dark-mode [style*="border:1px solid #eee"] {
  border-color: #333a48 !important;
}

/* Scrollbar for dark mode (optional nicety) */
html.dark-mode ::-webkit-scrollbar {
  background: #12151c;
}
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a4152;
  border-radius: 4px;
}

/* Floating dark mode toggle button */
.dm-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0F4C81;
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

html.dark-mode .dm-toggle-btn {
  background: #f2c14e;
  color: #12151c;
}