html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

@media (prefers-color-scheme: light) {
  .initial-bg-color {
    background-color: #ffffff;
  }
}

.initial-bg-color {
  background-color: #212529;
}

#elm-main {
  height: 100vh;
}

.list-item.trigger-pulse {
  animation: highlight-pulse 2s ease-out;
}

.list-item {
  outline: none;
}

/* Markdown content styling */
.markdown-content pre {
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
}

.markdown-content code {
  color: #f8f9fa;
  background-color: transparent;
}

.markdown-content pre code {
  display: block;
  color: #f8f9fa;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.95em;
  line-height: 1.5;
}

.markdown-content p code {
  background-color: #2d2d2d;
  color: #f8f9fa;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

.markdown-content a,
.button.copy {
  position: relative;
  z-index: 2;
}

.button {
  display: inline-block;
  padding: 0.1em 0.4em;
  background-color: transparent;
  color: white !important;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  border: solid 1px gray;
  margin: 0;
  font-size: 0.8rem;
}

.button.copy {
  opacity: 0.7;
}

highlightjs-code {
  display: block;
  max-width: 100%;
}

highlightjs-code pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

.button.copy:after {
  content: "Copy";
}

.button.copy.active:after {
  content: "Copied ✓";
}

.button.copy.active {
  background-color: #256929;
  opacity: 1;
}

.button.copy.active:hover {
  background-color: #256929;
  opacity: 1;
}

.button.copy:hover {
  background-color: transparent;
  opacity: 1;
  border: solid 1px gray;
}

/* Unified Card and List Item styling across all pages (apps, packages, options) */
.m-item-card,
.list-group-item {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.m-item-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  min-height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
}

.item-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
  color: inherit;
}

/* Light mode styling */
[data-bs-theme="light"] .m-item-card,
[data-bs-theme="light"] .list-group-item,
[data-bs-theme="light"] .m-sidebar {
  background-color: #f8f9fa;
  border-color: #e9ecef;
}

[data-bs-theme="light"] .m-item-card:hover,
[data-bs-theme="light"] .list-group-item-action:hover,
[data-bs-theme="light"] .list-group-item-action:focus {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

/* Dark mode: darker background color for cards and list items */
[data-bs-theme="dark"] .m-item-card,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .m-sidebar {
  background-color: #16191d;
  border-color: #2d3238;
}

[data-bs-theme="dark"] .m-item-card:hover,
[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: #1f2329;
  border-color: #3e454d;
}

/* Fallback for when data-bs-theme is unset */
@media (prefers-color-scheme: light) {
  :root:not([data-bs-theme="dark"]) .m-item-card,
  :root:not([data-bs-theme="dark"]) .list-group-item,
  :root:not([data-bs-theme="dark"]) .m-sidebar {
    background-color: #f8f9fa;
    border-color: #e9ecef;
  }

  :root:not([data-bs-theme="dark"]) .m-item-card:hover,
  :root:not([data-bs-theme="dark"]) .list-group-item-action:hover,
  :root:not([data-bs-theme="dark"]) .list-group-item-action:focus {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .m-item-card,
  :root:not([data-bs-theme="light"]) .list-group-item,
  :root:not([data-bs-theme="light"]) .m-sidebar {
    background-color: #16191d;
    border-color: #2d3238;
  }

  :root:not([data-bs-theme="light"]) .m-item-card:hover,
  :root:not([data-bs-theme="light"]) .list-group-item-action:hover,
  :root:not([data-bs-theme="light"]) .list-group-item-action:focus {
    background-color: #1f2329;
    border-color: #3e454d;
  }
}

.m-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
  z-index: 10;
}

[data-bs-theme="dark"] .m-item-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

.m-item-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  font-size: 0.9rem;
  margin-bottom: 0;
}

@media (min-width: 1068px) {
  .m-item-card-description {
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 1470px) {
  .m-item-card-description {
    -webkit-line-clamp: 5;
  }
}

/* App icons */
.item-card-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  background-color: transparent;
  border-radius: 12px;
  color: transparent; /* Hide alt text before image loads on firefox */
  font-size: 0;
  transition: transform 0.2s ease-in-out;
}

.m-item-card:hover .item-card-icon {
  transform: scale(1.05);
}

.item-header-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
  background-color: transparent;
  border-radius: 12px;
  color: transparent; /* Hide alt text before image loads on firefox */
  font-size: 0;
  transition: transform 0.1s ease-in-out;
}

.item-header-icon:hover {
  transform: scale(1.03);
}

/* Hide the annoying border around search bar that bootstrap adds */
.form-control:focus {
  box-shadow: none !important;
  border-color: royalblue;
}

/* for Prev and Next pagination buttons hide focus with mouse click */
.focus-ring:focus:not(:focus-visible) {
  box-shadow: none;
}

/* hide unset var(--bs-btn-active-border-color) border when clicking on buttons */
.btn:active {
  border-color: transparent !important;
}

/* Default (Super tiny width, < 380px): 1 column (12 / 1 = 12 full rows) */
.m-item-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(1, 1fr);
}

/* 380px to 767px (Mobile & Small Tablets): 2 columns (12 / 2 = 6 full rows) */
@media (min-width: 380px) {
  .m-item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 768px to 991px: 3 columns (12 / 3 = 4 full rows) */
@media (min-width: 768px) {
  .m-item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 992px+: 4 columns max (12 / 4 = 3 full rows) */
@media (min-width: 992px) {
  .m-item-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* hide the native summary icon */
details.accordion-item > summary {
  list-style: none;
}
details.accordion-item > summary::-webkit-details-marker {
  display: none;
}

/* remove the default blue outline on click */
details.accordion-item > summary:focus {
  box-shadow: none;
}

/* make the Bootstrap arrow react to the native <details> open/closed state */
details.accordion-item:not([open]) > summary.accordion-button::after {
  transform: none;
}

details.accordion-item[open] > summary.accordion-button::after {
  transform: rotate(-180deg); /* Points up when open */
}

/* navbar */

.brand-logo-responsive {
  width: 30px;
}

@media (min-width: 768px) {
  .brand-logo-responsive {
    width: 40px;
  }
}

.brand-text {
  max-width: 200px;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 0.5rem;
}

.navbar-toggler-icon {
  transition:
    transform 0.3s ease-in-out,
    filter 0.3s ease-in-out;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  transform: rotate(180deg);
}



/* remove bootstrap default behavior */
[data-bs-theme="dark"] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: "";
}

a:link {
  text-decoration: none;
}

/* permalinks */
.anchor-link {
  padding: 0 0.175rem;
  font-weight: 400;
  color: #0d6efd80;
  text-decoration: none;
  opacity: 0;
  transition:
    color 0.15s ease-in-out,
    opacity 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .anchor-link {
    transition: none;
  }
}
.anchor-link:after {
  content: "#";
}
.anchor-link:focus,
.anchor-link:hover,
:hover > .anchor-link,
:target > .anchor-link {
  color: #0d6efd;
  text-decoration: none;
  opacity: 1;
}

/* box containers */
.box-container {
  background-color: #f6f6ff;
  padding: 10px;
  margin: 10px 0;
  font-size: 14px;
  border-radius: 3px;
}

[data-bs-theme="dark"] .box-container {
  background-color: #28283f;
}

.box-container {
  outline: none;
}

.box-container.target-highlight.trigger-pulse {
  animation: highlight-pulse 2s ease-out;
}

@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
    background-color: transparent;
  }
  10% {
    /* Adjust these colors to match your app's theme */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
    background-color: rgba(59, 130, 246, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(59, 130, 246, 0);
    background-color: transparent;
  }
}

/* custom bootstrap col width */
@media (min-width: 1400px) {
  .col-xxl-3-5 {
    flex: 0 0 auto;
    width: 29.166667%; /* (3.5 / 12) * 100 */
  }
  .col-xxl-8-5 {
    flex: 0 0 auto;
    width: 70.833334%; /* (8.5 / 12) * 100 */
  }
}

/* custom bootstrap modal width */
@media (min-width: 992px) {
  .modal-lm-custom {
    max-width: 950px;
  }
}

/* options filters colors */

[data-bs-theme="light"] {
  --bs-primary-rgb: 76, 110, 181; /* nixos logo color dark blue - Not enough contrast */
  --bs-primary-text-emphasis: #00418f;
  --bs-link-color: #00418f;
  --bs-link-color-rgb: 0, 65, 143;
  --bs-link-hover-color: #002d62;
  --bs-link-hover-color-rgb: 0, 45, 98;
}

[data-bs-theme="dark"] {
  --bs-primary-rgb: 117, 178, 219; /* nixos logo color light blue */
  --bs-secondary-rgb: 158, 158, 158;
  --bs-primary-text-emphasis: #75b2db; /* nixos logo color light blue */
}

/* options tiles colors */

.option-type {
  color: var(--option-type-color);
}

.option-name {
  color: var(--option-name-color);
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

[data-bs-theme="dark"] {
  --option-name-color: #75b2db; /* nixos logo color light blue */
  --option-type-color: #7fc741; /* nlnet logo color green adjusted for contrast - original #74aa00 */
}

[data-bs-theme="light"] {
  /*--option-name-color: #4c6eb5;*/ /* nixos logo color dark blue - Not enough contrast */
  --option-name-color: #00418f;
  --option-type-color: #2d6101; /* another green adjusted for contrast */
}

/* packages tiles colors */

[data-bs-theme="light"] {
  --bs-code-color: #00408d;
}

[data-bs-theme="dark"] {
  --bs-code-color: #b2d5ff;
}

/* highlight js customised */
pre code.hljs {
  padding: 0px !important;
}
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: 0.25em solid #d0d7de;
}
[data-bs-theme="dark"] .markdown-alert {
  border-left-color: #30363d;
}
.markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.markdown-alert-title svg {
  margin-right: 0.5rem;
  fill: currentColor;
}

.markdown-alert-note { border-left-color: #0969da; }
[data-bs-theme="dark"] .markdown-alert-note { border-left-color: #2f81f7; }
.markdown-alert-note .markdown-alert-title { color: #0969da; }
[data-bs-theme="dark"] .markdown-alert-note .markdown-alert-title { color: #2f81f7; }

.markdown-alert-tip { border-left-color: #1a7f37; }
[data-bs-theme="dark"] .markdown-alert-tip { border-left-color: #3fb950; }
.markdown-alert-tip .markdown-alert-title { color: #1a7f37; }
[data-bs-theme="dark"] .markdown-alert-tip .markdown-alert-title { color: #3fb950; }

.markdown-alert-important { border-left-color: #8250df; }
[data-bs-theme="dark"] .markdown-alert-important { border-left-color: #ab7df8; }
.markdown-alert-important .markdown-alert-title { color: #8250df; }
[data-bs-theme="dark"] .markdown-alert-important .markdown-alert-title { color: #ab7df8; }

.markdown-alert-warning { border-left-color: #9a6700; }
[data-bs-theme="dark"] .markdown-alert-warning { border-left-color: #d29922; }
.markdown-alert-warning .markdown-alert-title { color: #9a6700; }
[data-bs-theme="dark"] .markdown-alert-warning .markdown-alert-title { color: #d29922; }

.markdown-alert-caution { border-left-color: #cf222e; }
[data-bs-theme="dark"] .markdown-alert-caution { border-left-color: #f85149; }
.markdown-alert-caution .markdown-alert-title { color: #cf222e; }
[data-bs-theme="dark"] .markdown-alert-caution .markdown-alert-title { color: #f85149; }

/* Custom Tooltip */
.has-tooltip {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.has-tooltip .tooltip {
  /* Position it perfectly above */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
  width: max-content;
  z-index: 1070;
  --bs-tooltip-bg: var(--bs-body-bg);
  --bs-tooltip-color: var(--bs-body-color);
}

.has-tooltip .tooltip-inner {
  max-width: 350px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  text-align: left;
}

[data-bs-theme="dark"] .has-tooltip .tooltip-inner {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.has-tooltip:hover .tooltip,
.has-tooltip:active .tooltip {
  opacity: var(--bs-tooltip-opacity, 0.9);
  visibility: visible;
}