/* Component wrappers – invisible to layout so sticky/fixed children work correctly */
[data-include] { display: contents; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.drag-scroll { cursor: grab; }
.drag-scroll.dragging { cursor: grabbing; scroll-behavior: auto; }
.drag-scroll.dragging a, .drag-scroll.dragging img { pointer-events: none; }
.stat-bar { transition: width 0.4s ease-out; }

/* Admin CMS – Accordion sections */
.section-chevron { transition: transform 0.2s ease; }
.section-chevron.collapsed { transform: rotate(-90deg); }
.liquid-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.glass-bar {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.dark-glass {
  background: rgba(18,18,18,0.78);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.off-canvas-overlay { transition: opacity 0.3s ease; }
.off-canvas-panel { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }

/* Sortable drag-and-drop */
.sortable-ghost { opacity: 0.3; }
.sortable-chosen { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.12); background: #f9fafb; border-radius: 12px; z-index: 10; }
.sortable-drag { opacity: 1 !important; z-index: 9999; }
.section-nav-item.active {
  border-bottom: 2px solid #111;
  color: #111;
  font-weight: 600;
}

/* Desktop sidebar nav active state */
.sidebar-nav-item.active {
  background: #f3f4f6;
  color: #111;
  font-weight: 600;
}

/* Hero-area: on mobile invisible (display:contents) so sticky nav works.
   On desktop becomes a grid for side-by-side layout. */
#hero-area { display: contents; }

/* Mobile: white content overlaps gray hero art */
@media (max-width: 1023px) {
  #hero-area #hero-info {
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    margin-top: -1rem;
    position: relative;
    z-index: 10;
  }
}

/* Desktop responsive adjustments */
@media (min-width: 1024px) {
  /* Hero + Overview side-by-side */
  #hero-area {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
  }
  /* Hero becomes transparent – children are grid items */
  #hero {
    display: contents;
  }
  /* Artwork: left column, spans hero-info + overview rows */
  #main-art {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    min-height: 300px;
  }
  /* Identity info: right column, top */
  #hero-info {
    grid-column: 2;
    grid-row: 1;
    border-left: 1px solid #f3f4f6;
  }
  /* Basisdaten: right column, below identity */
  #overview {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    border-top: none;
    border-left: 1px solid #f3f4f6;
  }
  /* Evolution: full width below */
  #evolution {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Type colors */
.t-normal{background:#C3BEB5;} .t-feuer{background:#F6671B;} .t-wasser{background:#2C83C2;}
.t-pflanze{background:#40D32E;} .t-elektro{background:#FBDC00;} .t-eis{background:#40C1DD;}
.t-kampf{background:#F9B600;} .t-gift{background:#B04EC4;} .t-boden{background:#C6883D;}
.t-flug{background:#93D5E8;} .t-psycho{background:#F16177;} .t-kaefer{background:#C2D501;}
.t-gestein{background:#CBC594;} .t-geist{background:#805474;} .t-drache{background:#406CA9;}
.t-unlicht{background:#5F504D;} .t-stahl{background:#72C3D5;} .t-fee{background:#F3B1DB;}

/* Form switch buttons */
.form-switch {
  background: #f3f4f6;
  border-radius: 9999px;
  padding: 2px;
}
.form-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  background: transparent;
  color: #9ca3af;
}
.form-switch-btn.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.form-switch-btn .ed {
  font-size: 8px;
  padding: 1px 4px;
}

/* Form switch dropdown (>3 forms) – gray pill wrapper + white select */
.form-switch-dropdown {
  display: inline-flex;
  padding: 2px;
}
.form-switch-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border-radius: 9999px;
  padding: 5px 26px 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #111;
  border: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

/* Edition badges */
.ed { display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;padding:2px 5px;border-radius:4px;color:#fff;vertical-align:middle; }
.ed-r { background:#c03028; } .ed-b { background:#2a75bb; } .ed-g { background:#f7d02c;color:#333; }
.ed-go { background:#c89632; } .ed-si { background:#a0a0a0; } .ed-k { background:#6a4d93; }
.ed-ru { background:#a72a2a; } .ed-sa { background:#3a6ab5; } .ed-sm { background:#3da53d; }
.ed-fr { background:#e44d2e; } .ed-bg { background:#5c9a3f; }
.ed-d { background:#5a4f7a; } .ed-p { background:#d47da0; } .ed-pt { background:#8e8e8e; }
.ed-hg { background:#d4a520; } .ed-ss { background:#b0b0b0; }
.ed-s { background:#444; } .ed-w { background:#aaa; }
.ed-s2 { background:#2a2a6e; } .ed-w2 { background:#a03030; }
.ed-x { background:#6a8fbc; } .ed-y { background:#d44d4d; }
.ed-or { background:#e06030; } .ed-as { background:#4a7fb5; }
.ed-su { background:#e8652e; } .ed-mo { background:#5a3f9e; }
.ed-us { background:#d4742a; } .ed-um { background:#3a3fa0; }
.ed-lgp { background:#e8c83e;color:#333; } .ed-lge { background:#c69a5e; }
.ed-sw { background:#3a7fd5; } .ed-sh { background:#c43a6b; }
.ed-pla { background:#4a9090; }
.ed-sd { background:#5a6fb5; } .ed-lp { background:#b89040; }
.ed-kp { background:#e84060; } .ed-pp { background:#7b4fbf; }
.ed-tm { background:#3a9ca0; }

/* Game filter buttons */
.game-filter-btn { cursor:pointer;transition:opacity .15s,filter .15s; }
.game-filter-btn:not(.active) { opacity:0.3;filter:grayscale(1); }
.game-filter-btn:hover { opacity:1;filter:none; }

/* Pokédex view switch */
.pokedex-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s ease;
}
.pokedex-view-btn.active,
.kartendex-view-btn.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Kartendex view switch */
.kartendex-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s ease;
}

/* Pokédex grid cards */
.pokedex-card {
  display: block;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.pokedex-card:hover {
  background: #f9fafb;
}

/* Attackendex grid cards */
.attackendex-card {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.attackendex-card:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Pokédex filter rows (Evo) */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.1s ease;
}
.filter-row:hover {
  background: #f9fafb;
}

/* Pokédex generation filter blocks */
.gen-filter-block {
  display: block;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.1s ease;
}
.gen-filter-block:hover {
  background: #f9fafb;
}
.gen-filter-block .ed {
  font-size: 9px;
  padding: 2px 5px;
}

/* Pokédex type filter buttons */
.type-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.1s ease;
  color: #fff;
}
.type-filter-btn[data-type="Elektro"] { color: #333; }
.type-filter-btn:hover { opacity: 0.6; }
.type-filter-btn.active { opacity: 1; transform: scale(1.05); }

/* Damage class badges */
.dmg-physical { background: #c03028; color: #fff; }
.dmg-special  { background: #5a6fb5; color: #fff; }
.dmg-status   { background: #8e8e8e; color: #fff; }

/* AI Loading dots */
.ai-loading span {
  display: inline-block;
  animation: aiDot 1.4s infinite;
  font-size: 24px;
  line-height: 1;
  color: rgba(255,255,255,0.5);
}
.ai-loading span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Homepage Dex-Cards (mobile swipe) */
.dex-cards {
  scroll-padding-left: 1rem;
  -webkit-overflow-scrolling: touch;
}
.dex-cards::after {
  content: '';
  flex-shrink: 0;
  width: 1px;
}
.dex-card {
  min-height: 180px;
}
@media (min-width: 1024px) {
  .dex-cards::after { display: none; }
}

/* Sidebar Tab Switcher */
.sb-tab {
  flex: 1;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
  color: #9ca3af;
  border: none;
  background: none;
}
.sb-tab.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* Override innere sticky/scroll Wrapper wenn Tabs aktiv */
.sb-tabs ~ div > :first-child {
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: 0.5rem !important;
}

/* 404 Pokémon sway animation */
.pokemon-sway {
  animation: pokemonSway 3s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes pokemonSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}