Module:Infobox/styles/citizen.css

/* Citizen-compatible Infobox TemplateStyles (no explicit dark selectors needed) */

.infobox {
  /* subtle shadow */
  box-shadow: 0.2em 0.2em 1em 0 rgba(0,0,0,0.2);

  float: right;
  clear: right;
  margin: 0 0 1em 1em;
  padding: 0.5em;
  width: 280px;

  /* Use Citizen tokens so colors flip in dark mode */
  background-color: var(--color-surface-0, #f9f9f9);
  color: var(--color-base, #000);
  border: 1px solid var(--border-color-base, #aaa);

  font-size: 90%;
  border-radius: 4px;
}

.infobox a { color: inherit; }

.infobox-subbox {
  padding: 0;
  border: none;
  margin: -3px;
  width: auto;
  min-width: 100%;
  font-size: 100%;
  clear: none;
  float: none;
  background-color: transparent;
}

.infobox-3cols-child { margin: auto; }
.infobox .navbar { font-size: 100%; }

.infobox th {
  text-align: left;
  vertical-align: top;
  padding-right: 0.5em;
  color: var(--color-base, #000);
}

.infobox td {
  vertical-align: top;
  color: var(--color-base, #000);
}

/* Header rows */
.infobox .infobox-header {
  background-color: var(--color-surface-1, #e0e0e0);
  color: var(--color-base, #000);
  font-weight: bold;
  text-align: center;
  padding: 0.4em 0;
  font-size: 105%;
  border-bottom: 1px solid var(--border-color-base, #aaa);
}

/* Optional: soft zebra striping that adapts to theme */
.infobox tr:nth-child(even) > td {
  background-color: var(--color-surface-1, #f0f0f0);
}

/* Slightly stronger shadow in dark mode, without hardcoding colors */
.skin-citizen [data-theme="dark"] .infobox,
.skin-citizen.theme-dark .infobox {
  box-shadow: 0.2em 0.2em 1em 0 rgba(0,0,0,0.6);
}