/* Base */
html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(153,153,153,0.3), rgba(153,153,153,0.3)),
    url(bg.png);
  background-color: #1a1a1a;
  background-attachment: fixed;
  color: black;
  font-family: Verdana, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Links */
a { color: #bfbfbf; text-decoration: wavy underline; transition: color 0.3s ease; }
a:hover   { color: #a6a6a6; }
a:visited { color: #666666; }
a:active  { color: #8c8c8c; }

/* Layout helpers */
.center {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  height: 100vh;
}

/* Card container */
.card, .footer {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  background-color: #1e1e20;
  color: #f0f0f0;
  text-align: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.card { min-height: 80vh; } /* allow height to grow with content */
.footer { height: 10vh; }

/* Top nav */
.topnav {
  display: flex; justify-content: space-between; align-items: center;
  background-color: rgba(30,30,32,0.75);
  backdrop-filter: blur(4px);
  padding: 0 16px;
  height: 80px;
  position: relative;
  z-index: 10;
}

/* Animated BG */
@keyframes scrollBG { from { background-position: 0 0; } to { background-position: 164px 199px; } }
.animated-bg {
  position: fixed; inset: 0;
  background:
    linear-gradient(0deg, rgba(153,153,153,0.3), rgba(153,153,153,0.3)),
    url('bg.png');
  background-repeat: repeat;
  background-size: auto;
  animation: scrollBG 10s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* Sections (header mode only; inline mode doesn’t render these elements) */
.category-section {
  margin-bottom: 30px;
  border-top: 1px solid #888;
  padding-top: 20px;
}
.category-title {
  display: flex; align-items: center;
  font-size: 1.4em; font-weight: bold;
  margin: 20px 0 10px;
  color: #ccc;
  text-align: left;
  border-bottom: 1px dashed #666;
  padding-bottom: 5px;
}
.category-icon {
  width: 20px; height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Item cards */
.item-card {
  display: flex;               /* ensures image height participates in layout */
  align-items: flex-start;     /* text starts at top */
  gap: 12px;
  background-color: #2a2a2e;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0 16px;
  position: relative;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background-color 0.25s ease;
}
.item-card:hover { background-color: #353538; }

.item-thumbnail {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
}

/* Text column stacks name + description */
.item-text { display: flex; flex-direction: column; min-width: 0; }

/* Title: cap characters + clamp visually (belt-and-suspenders with JS) */
.item-name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 6px;
  color: #e0e0e0;

  /* visual clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;  /* single line */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Description: preserve \n and wrap long words */
.item-description {
  font-size: 0.95em;
  color: #aaa;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Inline category label (absolute within card) */
.category-label {
  position: absolute;
  bottom: 6px; right: 8px;
  font-size: 0.8em;
  opacity: 0.85;
  display: flex; align-items: center;
  color: #ccc;
}

/* Filter UI */
.filter-dropdown { position: relative; display: inline-block; }
#filterToggle {
  background-color: #2a2a2d; color: #fff;
  border: 1px solid #444; border-radius: 4px;
  padding: 6px 10px; cursor: pointer;
}
.filter-menu {
  position: absolute; top: 110%; left: 0;
  background-color: #1e1e20; border: 1px solid #444;
  padding: 10px; border-radius: 6px; display: none; z-index: 10;
  max-height: 200px; overflow-y: auto;
  box-shadow: 0 0 10px #000;
}
.filter-menu label { display: block; margin: 6px 0; color: #f0f0f0; font-size: 0.95em; }

/* Search + checkboxes (dark) */
#searchInput {
  background-color: #1e1e20; color: #f0f0f0;
  border: 1px solid #555; border-radius: 6px; padding: 6px 10px;
}
#searchInput::placeholder { color: #888; }
#searchInput:focus { outline: none; border-color: #888; }

.filter-menu input[type="checkbox"] {
  accent-color: #666;
  background-color: #1e1e20;
  border: 1px solid #555;
}

/* Upload button */
#uploadButton {
  background-color: #2a2a2d; color: #f0f0f0;
  padding: 8px 16px; font-size: 0.95rem;
  border: 1px solid #555; border-radius: 6px; cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#uploadButton:hover { background-color: #353538; transform: translateY(-1px); }
#uploadButton:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* Error message inside .card */
.card-error {
  color: red;
  white-space: pre-wrap;
  text-align: left;
}

/* Debug console dark tweaks (in addition to inline styles for robustness) */
#debugPanel textarea {
  background-color: #1e1e20;
  color: #f0f0f0;
  border: 1px solid #555;
  border-radius: 4px;
  font-family: monospace;
  padding: 6px;
}
#debugPanel button {
  background-color: #2a2a2d;
  color: #f0f0f0;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
}
#debugPanel button:hover { background-color: #353538; }

.info-button {
  position: absolute;
  top: 8px; right: 8px;
  background-color: #444;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 0.9em;
  cursor: pointer;
}
.info-button:hover {
  background-color: #666;
}

/* modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center;
  z-index: 2000;
}
.modal-window {
  background: #1e1e20;
  color: #f0f0f0;
  padding: 16px;
  border-radius: 8px;
  width: 400px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  position: relative;
}
.modal-header {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
}
.modal-close {
  position: absolute;
  top: 8px; right: 12px;
  cursor: pointer;
  font-size: 1.2em;
}
.modal-content {
  font-size: 0.95em;
  line-height: 1.4;
}

/* Editor-specific styles */
.editor-section {
  width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #444;
  border-radius: 10px;
  background-color: #1e1e20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  color: #f0f0f0;
}

.editor-section h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #ccc;
  border-bottom: 1px dashed #666;
  padding-bottom: 5px;
}

.editor-input,
.editor-textarea,
.editor-select {
  width: 100%;
  margin: 8px 0;
  padding: 8px;
  background-color: #2a2a2e;
  color: #f0f0f0;
  border: 1px solid #555;
  border-radius: 6px;
  font-size: 0.95em;
}

.editor-textarea {
  min-height: 80px;
  resize: vertical;
}

.editor-button,
.inline-button {
  background-color: #2a2a2d;
  color: #f0f0f0;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 6px 12px;
  margin-top: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.editor-button:hover,
.inline-button:hover {
  background-color: #353538;
}

.json-output {
  background: #1a1a1a;
  padding: 10px;
  white-space: pre-wrap;
  border-radius: 6px;
  margin-top: 20px;
  font-family: monospace;
  color: #ddd;
}