/* ---------- Basis ---------- */
:root {
  /* Backgrounds */
  --color-background: #ffffff;
  --color-panel: #f7f7f7;
  --color-input: #ffffff;

  --color-background-bg: #555;
  --color-background-hos: #0066FF;
  --color-background-bnw: #FF3333;
  --color-background-mini: #FFD700;
    --color-background-sotp: #741e43;

  /* Text */
  --color-text: #222222;
  --color-text-secondary: #555555;

  --color-text-bg: #fff;
  --color-text-hos: #fff;
  --color-text-bnw: #fff;
  --color-text-mini: #000;
    --color-text-sotp: #fff;

  /* Borders */
  --color-border: #666666;
  --color-asset-border: #555555;

  /* Overlay */
  --color-overlay: rgba(0,0,0,0.5);

  /* Accent */
  --color-accent: #4da6ff;

  /* Detail */
  --color-detail-base: #000000;
  --color-detail-hos: #0066FF;
  --color-detail-bnw: #FF3333;
  --color-detail-mini: #FFD700;
    --color-detail-sotp: #741e43;

  /* Toast */
  --toast-bg: #ffff;
  --toast-text: #000;

  /* GitHub Contribution */
  --contribute-background: #f7f7f7;
  --contribute-border: #cccccc;
  --github-button-background: #24292f;
  --github-button-text: #ffffff;
  --github-button-hover: #3b424a;
}

body.dark {
  /* Backgrounds */
  --color-background: #1e1e1e;

  --color-panel: #2a2a2a;
  --color-input: #333333;

  /* Text */
  --color-text: #dddddd;
  --color-text-secondary: #aaaaaa;

  /* Borders */
  --color-border: #666666;
  --color-asset-border: #555555;

  /* Overlay */
  --color-overlay: rgba(0,0,0,0.7);

  /* Toast */
  --toast-bg: #111111;
  --toast-text: #f5f5f5;

  /* GitHub Contribution */
  --contribute-background: #2a2a2a;
  --contribute-border: #555555;
  --github-button-background: #444444;
  --github-button-text: #ffffff;
  --github-button-hover: #555555;
}

body {
  font-family: sans-serif;
  margin: 20px;
  background: var(--color-background);
  color: var(--color-text);

  /*transition:
          background-color .25s,
          color .25s;

   */
}

h1 {
  margin-bottom: 20px;
}

/* ---------- GitHub Contribution Box ---------- */

.contribute-box {
    margin: 15px 0 20px 0;
    padding: 15px;
    border-radius: 8px;

    background: var(--contribute-background);
    border: 1px solid var(--contribute-border);

    color: var(--color-text);
}

.contribute-box strong {
    display: block;
    margin-bottom: 6px;
}

.contribute-box p {
    margin: 5px 0 12px 0;
}

.github-button {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;

    text-decoration: none;
    font-weight: bold;

    background: var(--github-button-background);
    color: var(--github-button-text);

    transition: background-color 0.2s ease;
}

.github-button:hover {
    background: var(--github-button-hover);
}

/* ---------- Filter ---------- */
.filters {
  margin-bottom: 15px;
}

.filter-section {
  margin-bottom: 10px;
}

.filter-section label {
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 6px;
}

.assetCountNumber {
  color: var(--color-accent);
  font-weight: bold;
}

.is-hidden {
  display: none;
}

#theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

/* ---------- Suche ---------- */
#searchInput, #searchPathInput {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-input);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 5px 7px;
}

/* ----------- Tags ---------- */

.tag-input-wrapper {
  position: relative;
  margin-top: 5px;
}

.tag-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-input);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 5px 7px;
}

.tag-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  z-index: 1000;
}

.tag-suggestion {
  padding: 6px 8px;
  cursor: pointer;
  color: var(--color-text);
}

.tag-suggestion:hover {
  background: var(--color-input);
}

.tag-suggestion.selected {
    background: var(--color-input);
    font-weight: bold;
}

.tag-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--color-accent);
  color: white;
  font-size: 0.9rem;
}

.tag-chip-remove {
  border: none;
  background: transparent;
  color: white;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

/* ---------- Assets ---------- */
.asset {
  padding: 6px 10px;
  margin: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--color-asset-border);
}

/* Farben nach DLC in Liste */
.BaseGame {
  background-color: var(--color-background-bg);
  color: var(--color-text-bg);
}

.HoS {
  background-color: var(--color-background-hos);
  color: var(--color-text-hos);
}

.BnW {
  background-color: var(--color-background-bnw);
  color: var(--color-text-bnw);
}

.Mini {
  background-color: var(--color-background-mini);
  color: var(--color-text-mini);
}

.SotP {
    background-color: var(--color-background-sotp);
    color: var(--color-text-sotp);
}

/* Mini-DLC Liste */
#miniList {
  margin-top: 8px;
  margin-left: 20px;
  max-height: 220px;
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  padding-left: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

/* ---------- Detailansicht ---------- */
#assetDetail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-panel);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 18px;
  width: 80vw;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  display: none;
  box-shadow: 0 0 15px rgba(0,0,0,0.7);
  z-index: 1000;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-header h3 {
  margin: 0;
}

/* Namen in der Detailansicht farblich nach DLC */

#detailName.color-base { color: var(--color-detail-base); }
#detailName.color-hos  { color: var(--color-detail-hos); }
#detailName.color-bnw  { color: var(--color-detail-bnw); }
#detailName.color-mini { color: var(--color-detail-mini); }
#detailName.color-sotp { color: var(--color-detail-sotp); }

/* Overlay */
#overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: none;
  z-index: 900;
}

#closeDetail {
  padding: 6px 12px;
}

.copy-btn {
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.copy-btn:hover {
  background: var(--color-background);
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--toast-bg);
  color: var(--toast-text);
  padding: 12px 16px;
  border-radius: 4px;
  z-index: 9999;
  animation: fadeInOut 2.5s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

.showMoreBtn {
  margin-top: 10px;
  padding: 8px 12px;
}

.showMoreBtn.is-hidden {
  display: none;
}