html {
  height: 100%;
}

body {
  background-color: #262626;
  background-color: #111;
  color: #FFF;
  height: 100%;
  min-height: 100vh;
}

/* Changelog styling (details/summary; .changelog-panel was only in CHANGELOG.md, now removed for GitHub) */
#changelogMarkdown details {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
#changelogMarkdown details summary {
  cursor: pointer;
}

/* .panel {
    background-color:#202020;
    color:#FFF;
  } */

select,
select:active,
input,
input:active,
input:focus,
.jumbotron,
.form-control,
.form-control:active,
.form-control:focus,
.form-select,
.form-select:active,
.form-select:focus {
  /* background-color:#303030; */
  /* color:#FFF; */
  max-width: 500px;
}

.description {
  color: #888;
}

li.active {
  background-color: #303030;
}

footer {
  color: grey;
  background-color: rgb(0, 0, 0, 70%);
  text-align: center;
  position: fixed;
  width: 100%;
  margin-top: 100%;
  bottom: 0px;
}

.container-fluid, .container {
  margin-bottom: 100px;
  padding-bottom: 100px;
  /* NOTE: Avoid scrollbar pushing navbar */
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1600px;
  min-height: calc(100vh - 100px);
  overflow-y: auto;
  box-sizing: border-box;
}

.content {
  display: none;
}

.output,
.card {
  margin: 15px;
}

.card-body {
  padding: 15px;
  margin: 15px;
}

/* Can be scrolled */
.code {
  height: auto;
  min-height: 300px;
  overflow: auto;
  /* white-space: nowrap; Allows textarea to scroll horizontally */
  font-family: monospace;
}

.tablehead,
td.tablehead,
th.tablehead,
.tablehead td,
.tablehead th {
  text-align: center;
  background-color: var(--tblr-green-lt);
  color: var(--tblr-green-dk);
}

.modal-backdrop {
  opacity: 0.9 !important;
  background-color: #111;
}

.box {
  border: 1px solid #444;
  padding: 10px;
  margin: 10px 0;
  background-color: #1e1e1e;
}

/* Random Data Button Styles */
.input-with-random-btn {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.input-with-random-btn input,
.input-with-random-btn textarea {
  flex: 1;
}

.random-data-btn {
  flex-shrink: 0;
  min-width: 38px;
  transition: all 0.2s ease;
}

.random-data-btn:hover {
  transform: scale(1.05);
}

.random-data-btn i {
  font-size: 1rem;
}

/* Ensure textarea buttons align properly */
.input-with-random-btn textarea + .random-data-btn {
  margin-top: 0;
}