/*
 * rmud stylesheet — plain CSS (was SCSS under Webpacker before Rails 8 migration).
 * Order preserved from the old @import chain: flex-layout, base, dark.
 * Served by Propshaft from app/assets/stylesheets.
 */

/* ---- flex layout: sticky footer ---- */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  padding: 10px 0;
  text-align: left;
}

/* ---- base ---- */
body {
  background: #fff;
  color: #000;
  max-width: 1000px;
  margin: 0 auto;
}

a {
  color: #333;
}

.clear {
  clear: both;
}

.nowrap {
  white-space: nowrap;
}

h1 {
  margin: 0 0 1em 0;
  width: 50%;
  line-height: 1em;
}

header {
  margin: 0 0 1em 0;
  padding: 1em;
  background: #bfb;
}

header .logotype {
  float: left;
  padding-right: 20px;
  font-size: 120%;
}

header .search {
  float: left;
}

header .search input.q {
  width: 20em;
}

header .links {
  float: right;
}

.item-form textarea {
  width: 100%;
  height: 10em;
}

.item-page .first,
.item-page .second {
  float: left;
  width: 50%;
}

.item-page .first dl,
.item-page .second dl {
  padding-right: 20px;
}

.item-table th {
  text-align: left;
  padding-right: 20px;
}

.item-table .f {
  width: 50%;
  padding-right: 30px;
}

.changes-table {
  width: 100%;
  border-collapse: collapse;
}

.changes-table td,
.changes-table th {
  padding: 1px 3px;
  border: 1px solid #aaa;
}

.changes-table th {
  text-align: center;
}

.changes-table .changes-table__first td {
  border-top: 2px solid #333;
}

h1.compare-title {
  position: absolute;
  left: 50%;
  top: 0;
}

.rel {
  position: relative;
}

.pagination {
  text-align: center;
  margin: 20px 0;
}

.pagination a {
  margin: 0 5px;
  padding: 5px;
  width: 1em;
  height: 1em;
  text-align: center;
  display: inline-block;
  border: 1px solid #333;
  border-radius: 50%;
  text-decoration: none;
}

.pagination a.current-page {
  cursor: default;
  background: #bfb;
}

.trade-table {
  border-collapse: collapse;
  width: 100%;
}

.trade-table th,
.trade-table td {
  border: 1px solid #aaa;
  padding: 2px 5px;
}

.trade-table thead th,
.trade-table thead td {
  background-color: #ccc;
}

.trade-table tbody tr.fresh td {
  background-color: #cfc;
}

.trade-table .trade-table__item-info {
  width: 35%;
}

.trade-table .trade-table__item-slot {
  width: 10%;
}

.items-table {
  width: 100%;
}

.items-table th {
  text-align: left;
}

.achi-item {
  border: 1px solid;
  padding: 2px 4px;
  margin: 2px 0;
  border-radius: 3px;
  background: #f99;
}

.achi-item__taken {
  background: #9f9;
}

.achi-item a {
  display: block;
  text-decoration: none;
}

.achievement-table tr:nth-child(odd) td {
  background-color: #f0f0f0; /* Light Gray */
}

.achievement-table tr:nth-child(even) td {
  background-color: #e0f7fa; /* Soft Blue */
}

.api-reference-page {
  padding: 20px 0;
  line-height: 1.6;
}

.api-reference-page h2 {
  margin-top: 30px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.api-reference-page h3 {
  color: #4a7a4a;
  margin-top: 20px;
}

.api-reference-page .download-box {
  background: #eefbee;
  border-left: 5px solid #4a7a4a;
  padding: 15px;
  margin: 15px 0;
  border-radius: 4px;
}

.api-reference-page .download-box .download-link {
  display: inline-block;
  margin-top: 5px;
  font-size: 110%;
  font-weight: bold;
  color: #2b5b2b;
  text-decoration: underline;
}

.api-reference-page .download-box .download-link:hover {
  color: #1a3a1a;
}

.api-reference-page .setup-instructions {
  margin-top: 20px;
}

.api-reference-page .setup-instructions ol {
  padding-left: 20px;
}

.api-reference-page .setup-instructions ol li {
  margin-bottom: 10px;
}

.api-reference-page pre {
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: Consolas, Monaco, monospace;
  font-size: 90%;
}

.api-reference-page code {
  background: #f4f4f4;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: Consolas, Monaco, monospace;
  font-size: 90%;
}

.api-reference-page pre code {
  background: transparent;
  padding: 0;
  font-size: 100%;
}

.api-reference-page #markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.api-reference-page #markdown-content table th,
.api-reference-page #markdown-content table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

.api-reference-page #markdown-content table th {
  background-color: #f4f4f4;
  text-align: left;
}

.api-reference-page #markdown-content blockquote {
  border-left: 4px solid #bbb;
  padding-left: 15px;
  color: #666;
  margin: 15px 0;
}

/* ---- dark theme (body.dark) ---- */
.dark {
  background: #121212;
  color: #e0e0e0;
}

.dark a {
  color: #bbb;
}

.dark header {
  background: #333;
}

.dark textarea,
.dark input {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #555;
}

.dark .changes-table td,
.dark .changes-table th {
  border: 1px solid #666;
}

.dark .changes-table .changes-table__first td {
  border-top: 2px solid #bbb;
}

.dark .pagination a {
  border: 1px solid #bbb;
}

.dark .pagination a.current-page {
  background: #4a7a4a;
}

.dark .trade-table th,
.dark .trade-table td {
  border: 1px solid #666;
}

.dark .trade-table thead th,
.dark .trade-table thead td {
  background-color: #444;
}

.dark .trade-table tbody tr.fresh td {
  background-color: #112811;
}

.dark .achi-item {
  background: #400;
}

.dark .achi-item__taken {
  background: #040;
}

.dark .achievement-table tr:nth-child(odd) td {
  background-color: #121212; /* Almost Black */
}

.dark .achievement-table tr:nth-child(even) td {
  background-color: #1d1d1d; /* Rich Black */
}

.dark .api-reference-page h2 {
  border-bottom: 1px solid #444;
}

.dark .api-reference-page h3 {
  color: #6fb06f;
}

.dark .api-reference-page .download-box {
  background: #1e2e1e;
  border-left: 5px solid #6fb06f;
}

.dark .api-reference-page .download-box .download-link {
  color: #a3d9a3;
}

.dark .api-reference-page .download-box .download-link:hover {
  color: #c4ecc4;
}

.dark .api-reference-page pre {
  background: #222;
  border: 1px solid #444;
}

.dark .api-reference-page code {
  background: #222;
}

.dark .api-reference-page #markdown-content table th,
.dark .api-reference-page #markdown-content table td {
  border: 1px solid #444;
}

.dark .api-reference-page #markdown-content table th {
  background-color: #333;
}

.dark .api-reference-page #markdown-content blockquote {
  border-left: 4px solid #555;
  color: #aaa;
}