@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
span.badge-coins {
  color: aliceblue !important;
  background-color: goldenrod !important;
}

span.badge-notes {
  color: aliceblue !important;
  background-color: darkolivegreen !important;
}

span.n1 {
  color: #ffc107;
}

span.n2 {
  color: #198754;
}

h1.batch-title {
  font-size: 2rem;
}

td.denomination-start,
th.denomination-start {
  border-left-color: var(--bs-table-border-color);
  border-left-width: calc(var(--bs-border-width) * 2);
}

td.denomination,
th.denomination {
  border-left-color: var(--bs-table-border-color);
  border-left-width: var(--bs-border-width);
}

div.table-layout-container {
  max-height: 77vh;
  overflow: auto;
}

img.coin-mint-image,
img.note-issuer-image {
  max-height: 1.2em;
  width: auto;
  vertical-align: -0.125em;
  fill: currentColor;
}

.coin-images img,
.note-images img {
  background-color: var(--bs-warning-bg-subtle);
}

.card-body .counts .count {
  padding-right: 1rem;
}

.card-footer .counts .count {
  padding-right: 0.5rem;
}

.currency-countries .currency-country i {
  font-size: 1em;
}
.currency-countries .currency-country img.country {
  height: 1em;
}
.currency-countries a.historical-country {
  color: #6c757d !important;
}
.currency-countries a.historical-country img {
  opacity: 0.6;
  filter: grayscale(1);
}
.currency-countries a.historical-country:hover {
  color: #cd5c5c !important;
}
.currency-countries a.historical-country:hover img {
  opacity: 0.9;
  filter: grayscale(0);
}

.album-currencies .obsolete-currency,
.country-currencies .obsolete-currency {
  color: #cd5c5c !important;
  opacity: 0.7;
}
.album-currencies .obsolete-currency a,
.country-currencies .obsolete-currency a {
  color: #cd5c5c !important;
}
.album-currencies .obsolete-currency a:hover,
.country-currencies .obsolete-currency a:hover {
  color: #6c757d !important;
  opacity: 1 !important;
}

.countries .historical-country {
  position: relative;
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.countries .historical-country .card-body, .countries .historical-country .card-footer {
  position: relative;
  z-index: 1;
}
.countries .historical-country::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/void.svg") no-repeat center/80%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

.currencies .obsolete-currency {
  position: relative;
  background-color: rgba(255, 255, 255, 0.7) !important;
}
.currencies .obsolete-currency .card-body, .currencies .obsolete-currency .card-footer {
  position: relative;
  z-index: 1;
}
.currencies .obsolete-currency::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/void.svg") no-repeat center/80%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

sup.iso {
  font-size: 0.5em;
}

sup.mode {
  font-size: 0.5em;
}

.badge img.country {
  height: 1em;
}

.album img.album-details {
  max-height: 90px;
}

.country i.country-details {
  font-size: 3em;
}
.country img.country-details {
  width: 100%;
  padding: 0.25rem !important;
}

img.country-title {
  max-height: 40px;
  max-width: 54px;
}

img.presence {
  height: 1em;
  width: auto;
  vertical-align: -0.125em;
}

img.presence-p {
  animation: opacity-pulse 2s infinite ease-in-out;
}

@keyframes opacity-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
a.presence {
  font-size: 0.85em;
  font-weight: bolder;
}

span.item-title {
  font-size: 0.9em;
  text-decoration: underline;
}

span.item-variant {
  font-style: italic;
  font-size: 0.9em;
}

span.item-kind-s {
  color: darkcyan;
}

span.item-kind-m {
  color: cornflowerblue;
}

span.item-kind-a {
  color: cadetblue;
}

span.item-kind-b {
  color: chocolate;
}

.see-also a {
  text-decoration: none !important;
}

.preview div.card-footer {
  font-size: 0.7em;
}

div.batch div img {
  max-height: 70px;
  max-width: 50px;
}

div.modal span.item-kind-c span.item-kind-c,
div.modal span.item-kind-m span.item-kind-m,
div.modal span.item-kind-a span.item-kind-a,
div.modal span.item-kind-s span.item-kind-s,
div.modal span.item-kind-b span.item-kind-b,
div.modal span.item-kind-g span.item-kind-g,
div.modal span.item-kind-p span.item-kind-p,
div.modal span.item-kind-e span.item-kind-e,
div.modal span.item-kind-t span.item-kind-t {
  display: block;
}

i.presence-x {
  color: darkolivegreen;
}

i.presence-p {
  color: cadetblue;
}

i.presence-w {
  color: crimson;
}

div.modal span.presence-x i.presence-x,
div.modal span.presence-p i.presence-p,
div.modal span.presence-w i.presence-w {
  display: block;
}

div.modal span span.item-kind,
div.modal span i.presence {
  display: none;
}

.item-uuid {
  font-size: 0.7em;
}

.item-kinds {
  font-size: 0.5em;
}

img.coin-image {
  max-width: 99%;
}

img.note-image {
  max-width: 90%;
}

img.preview-image {
  max-width: 90%;
  max-height: 90%;
}

form.card-filter {
  flex-grow: 1;
  max-width: 50%;
}

form.card-filter-collapse {
  flex-grow: 1;
  max-width: 400px;
  padding-right: 10px;
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Bootstrap shadow-lg equivalent */
  border-color: var(--bs-primary) !important;
}

/* Optional: Make icons distinct color */
.icon-feature {
  color: var(--bs-primary);
}

.section-category {
  font-size: 4em;
}

.section-statistics {
  font-size: 1.8em;
}

.coin .item-color {
  color: #ffc107;
}

.note .item-color {
  color: #198754;
}

.batch .batch-color {
  color: #0aa2c0;
}

.album .album-color {
  color: #59359a;
}
.album .card-body {
  background-color: rgba(238, 238, 238, 0.2);
}
.album .card-footer {
  background-color: rgba(238, 238, 238, 0.1);
}

.country .country-color {
  color: #c9184a;
}
.country .card-body {
  background-color: rgba(238, 238, 238, 0.2);
}
.country .card-footer {
  background-color: rgba(238, 238, 238, 0.1);
}

.currency .currency-color {
  color: #fd7e14;
}
.currency .card-body {
  background-color: rgba(238, 238, 238, 0.2);
}
.currency .card-footer {
  background-color: rgba(238, 238, 238, 0.1);
}

.border-album,
.border-country,
.border-currency {
  border-color: rgba(68, 68, 68, 0.5) !important;
}
.border-album .card-footer,
.border-country .card-footer,
.border-currency .card-footer {
  border-top-color: rgba(68, 68, 68, 0.2);
}

.border-coin {
  border-color: #ffc107;
}

.border-note {
  border-color: #198754;
}

.border-batch {
  border-color: #0aa2c0;
}
.border-batch .card-footer {
  border-top-color: rgba(10, 162, 192, 0.175);
}

.coin-timeline .coin-timeline-chart {
  position: relative;
}
.coin-timeline .coin-timeline-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.coin-timeline .coin-timeline-grid {
  stroke: rgba(255, 193, 7, 0.45);
  stroke-dasharray: 3 3;
}
.coin-timeline .coin-timeline-axis {
  stroke: var(--bs-secondary-color);
  stroke-width: 1;
}
.coin-timeline .coin-timeline-axis-label,
.coin-timeline .coin-timeline-tick {
  fill: var(--bs-secondary-color);
  font-size: 14px;
}
.coin-timeline .coin-timeline-bar {
  fill: #ffc107;
  stroke: var(--bs-body-bg);
  stroke-width: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.coin-timeline .coin-timeline-bar:focus, .coin-timeline .coin-timeline-bar.is-active, .coin-timeline .coin-timeline-bar.is-pinned {
  fill: #a67c00;
  stroke: var(--bs-emphasis-color);
  stroke-width: 3;
}
.coin-timeline .coin-timeline-bar:focus {
  outline: none;
}
.coin-timeline .coin-timeline-detail {
  height: 1.5rem;
  margin-top: 0.5rem;
  overflow: hidden;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coin-timeline .coin-timeline-tooltip {
  position: absolute;
  z-index: 1;
  max-width: calc(100% - 1rem);
  padding: 0.25rem 0.5rem;
  color: var(--bs-body-bg);
  background: var(--bs-emphasis-color);
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.5rem));
}
.coin-timeline .coin-timeline-tooltip.coin-timeline-tooltip-below {
  transform: translate(-50%, 0.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  .coin-timeline .coin-timeline-bar,
  .coin-timeline .coin-timeline-tooltip {
    transition: fill 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
  }
}

.batch-complete i {
  color: #198754;
}

.modal-dialog.modal-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vw;
}
.modal-dialog.modal-fullscreen .custom-max-modal {
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 92vh;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.modal-dialog.modal-fullscreen .custom-max-modal .modal-body {
  overflow-y: auto;
}