:root,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: light;
  --tm-bg: #f8fafc;
  --tm-card: #ffffff;
  --tm-border: #e5e7eb;
  --tm-text: #111827;
  --tm-muted: #6b7280;
  --tm-title-bg: #f3f4f6;
  --tm-accent: #111827;
}

html, body {
  background: var(--tm-bg) !important;
  color: var(--tm-text) !important;
}

#header {
  background: #ffffff !important;
  color: var(--tm-text) !important;
  border-bottom: 1px solid var(--tm-border);
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited {
  color: var(--tm-text) !important;
  font-weight: 700;
}

#user-tools,
#user-tools a {
  color: var(--tm-muted) !important;
}

#user-tools a,
#user-tools a:link,
#user-tools a:visited,
#logout-form button,
#logout-form button:link,
#logout-form button:visited {
  color: var(--tm-text) !important;
  font-weight: 600;
}

div.breadcrumbs {
  background: #ffffff !important;
  color: var(--tm-muted) !important;
  border-bottom: 1px solid var(--tm-border);
}

div.breadcrumbs a {
  color: var(--tm-text) !important;
}

#content {
  padding-top: 20px;
}

.module,
.inline-group,
.dashboard .module {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.module caption,
.module h2,
.inline-group h2 {
  background: var(--tm-title-bg) !important;
  color: var(--tm-text) !important;
  border-bottom: 1px solid var(--tm-border);
  font-weight: 600;
  padding: 12px 14px;
}

.module table,
.module tbody tr,
.module td,
.module th,
.results,
.results tbody tr,
.results td,
.results th {
  background: #ffffff !important;
  color: var(--tm-text) !important;
}

#content a:link,
#content a:visited {
  color: #1f2937;
}

#content a:hover {
  color: #000;
}

.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button {
  background: var(--tm-accent) !important;
  border: 1px solid var(--tm-accent) !important;
  color: #fff !important;
  border-radius: 8px;
}

.button:link,
.button:visited,
a.button:link,
a.button:visited,
.submit-row a,
.submit-row a:link,
.submit-row a:visited {
  color: #fff !important;
}

.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
a.button:hover {
  background: #000;
  border-color: #000;
  color: #fff !important;
}

.deletelink,
.deletelink:link,
.deletelink:visited,
.submit-row .deletelink,
.submit-row .deletelink:link,
.submit-row .deletelink:visited {
  color: #fff !important;
}

.submit-row {
  background: transparent;
  border-top: 1px solid var(--tm-border);
}

input,
textarea,
select,
.vTextField,
.vURLField,
.vIntegerField,
.vForeignKeyRawIdAdminField {
  background: #ffffff !important;
  color: var(--tm-text) !important;
  border: 1px solid var(--tm-border) !important;
}

.help,
.helptext,
p.help,
.quiet {
  color: var(--tm-muted) !important;
}

#changelist-filter h2,
#changelist-filter h3,
#changelist-filter li,
#changelist-filter a,
#changelist-filter details {
  color: var(--tm-text) !important;
}

input, textarea, select {
  border-radius: 8px;
}

.selector .selector-filter {
  border-radius: 8px 8px 0 0;
}

#changelist-filter {
  border-left: 1px solid var(--tm-border);
  background: #fff;
}

/* Simplified theme switcher: readable and compact with sun/moon visual */
.theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tm-border) !important;
  background: #fff !important;
  color: var(--tm-text) !important;
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 32px;
}

.theme-toggle::before {
  content: "☀";
  font-size: 14px;
  line-height: 1;
}

.theme-toggle::after {
  content: "☾";
  font-size: 14px;
  line-height: 1;
}

.theme-toggle svg {
  display: none !important;
}

.theme-toggle .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  color: var(--tm-muted) !important;
  font-size: 12px;
}

.theme-toggle .theme-label-when-auto,
.theme-toggle .theme-label-when-light,
.theme-toggle .theme-label-when-dark {
  display: none !important;
}

@media (max-width: 767px) {
  #content {
    padding-top: 10px;
  }
}