/* Mission Control — docs, modules, and code blocks (dark-theme safe). */

:root {
  --x0-admin-panel: #f0f4f8;
  --x0-admin-panel-header: #e8eef4;
  --x0-admin-code-bg: #eef2f7;
}

html[data-theme="dark"] {
  --x0-admin-panel: #1c1c1c;
  --x0-admin-panel-header: #252525;
  --x0-admin-code-bg: #2a2a2a;
}

html[data-theme="dark"] ::selection {
  background: #3d3010;
  color: #f5f5f5;
}

/* Django admin .module cards (docs sidebar + content) */
html[data-theme="dark"] .module {
  background: var(--x0-admin-panel);
  border-color: #333;
}

html[data-theme="dark"] .module h2,
html[data-theme="dark"] .module caption {
  background: var(--x0-admin-panel-header);
  color: var(--body-fg, #e8e8e8);
}

html[data-theme="dark"] .module th,
html[data-theme="dark"] .module td {
  border-color: #444;
}

/* Mission Control changelist tables at narrow widths */
#changelist .results,
#changelist #result_list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#changelist #result_list {
  display: block;
}

/* Rendered markdown in admin + customer docs */
.doc-content pre {
  background: var(--x0-admin-code-bg);
  color: var(--body-fg, inherit);
  padding: 12px;
  overflow-x: auto;
  border-radius: 4px;
  border: 1px solid var(--border, transparent);
}

.doc-content code {
  background: var(--x0-admin-code-bg);
  color: var(--body-fg, inherit);
  padding: 2px 4px;
  border-radius: 3px;
}

.doc-content pre code {
  background: transparent;
  padding: 0;
}

.doc-content table {
  border-collapse: collapse;
  margin: 1rem 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.doc-content th,
.doc-content td {
  border: 1px solid var(--border, #ccc);
  padding: 6px 10px;
}

.doc-content tr:target,
.doc-content tr.schema-doc-target {
  background: rgba(229, 160, 13, 0.12);
  outline: 1px solid rgba(229, 160, 13, 0.35);
}

html[data-theme="dark"] .doc-content tr:target,
html[data-theme="dark"] .doc-content tr.schema-doc-target {
  background: rgba(229, 160, 13, 0.15);
}

/* Kai-moana icons inline in codenames tables */
.doc-content .codename-icon-link {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  margin-right: 0.25rem;
  border: none;
  text-decoration: none;
}

.doc-content .codename-icon-link:hover .codename-icon {
  outline: 2px solid #e5a00d;
  outline-offset: 2px;
  border-radius: 2px;
}

.doc-content .codename-icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  display: inline-block;
  border: none;
  color: var(--body-fg, #111);
}
html[data-theme="dark"] .doc-content svg.codename-icon {
  color: var(--body-fg, #f2f2f2);
}

/* Legacy img codenames only */
html[data-theme="dark"] img.x0-picto,
html[data-theme="dark"] img.x0-nav-picto,
html[data-theme="dark"] img.codename-icon {
  filter: invert(1);
}

.doc-content td img.codename-icon {
  margin-right: 0;
}

/* Mission Control pages */
html[data-theme="dark"] .mission-page .card {
  background: var(--x0-admin-panel);
  border-color: #333;
}

html[data-theme="dark"] .mission-page .muted {
  color: #a3a3a3;
}

html[data-theme="dark"] .mission-page code,
html[data-theme="dark"] .mission-page pre {
  background: var(--x0-admin-code-bg);
  color: var(--body-fg, #e8e8e8);
}

html[data-theme="dark"] .mission-page .hc-metric {
  background: var(--x0-admin-panel-header);
}

html[data-theme="dark"] .mission-page .hc-metric .label,
html[data-theme="dark"] .mission-page .hc-metric .sub {
  color: #a3a3a3;
}

html[data-theme="dark"] .mission-page .hc-bar {
  background: #333;
}

/* Admin sidebar nav pictograms */
.x0-nav-group-items li a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.x0-nav-picto {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.92;
  color: var(--body-fg, #334e68);
}
html[data-theme="dark"] svg.x0-nav-picto {
  color: var(--body-fg, #c8c8c8);
}