/* apple-skin.css — Liquid Glass form controls + buttons */

/* ───── Inputs ───── */
.glass-input,
.glass-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--input, rgba(255,255,255,0.05));
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.glass-input::placeholder { color: var(--text3); font-weight: 500; }
.glass-input:focus,
.glass-select:focus {
  background: var(--input-h, rgba(255,255,255,0.09));
  border-color: rgba(10,132,255,0.5);
  box-shadow: 0 0 0 3px rgba(10,132,255,0.14);
}
.glass-select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a0a8c0' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
}
.glass-select option { background: #06091a; color: var(--text); }

textarea.glass-input { height: auto; padding: 9px 12px; resize: vertical; min-height: 80px; line-height: 1.45; }

/* ───── Buttons ───── */
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.16s var(--spring), background 0.18s, box-shadow 0.18s, filter 0.16s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.apple-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.apple-btn:not(:disabled):active { transform: scale(0.96); }
.apple-btn svg { width: 14px; height: 14px; }
.apple-btn.w-full { width: 100%; }
.apple-btn.flex-1 { flex: 1; }

.apple-btn-primary {
  background: linear-gradient(145deg, #0aadff 0%, #0066e8 100%);
  border-color: rgba(10,150,255,0.45);
  color: #fff;
  box-shadow: 0 4px 18px rgba(10,132,255,0.28),
              inset 0 1px 0 rgba(255,255,255,0.28),
              inset 0 -1px 0 rgba(0,0,0,0.15);
}
.apple-btn-primary:not(:disabled):hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 26px rgba(10,132,255,0.45),
              inset 0 1px 0 rgba(255,255,255,0.32);
}

.apple-btn-secondary {
  background: rgba(255,255,255,0.06);
  border-color: var(--glass-border);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.apple-btn-secondary:not(:disabled):hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

/* ───── iOS-style toggle ───── */
.ios-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  transition: background 0.22s var(--ease);
}
.ios-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 25px; height: 25px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.28s var(--spring);
}
input[type="checkbox"]:checked ~ .ios-track {
  background: linear-gradient(145deg, #30d975, #28b85d);
  border-color: rgba(48,217,117,0.5);
}
input[type="checkbox"]:checked ~ .ios-thumb {
  transform: translateX(20px);
}

/* ───── Tailwind-like layout helpers ───── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-2\.5 { gap: 10px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-0 { width: 0; }
.h-0 { height: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inline-block { display: inline-block; }
.opacity-0 { opacity: 0; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ───── Card header sheen ───── */
.card-header { background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 60%); }

/* ───── Toast ───── */
.toast {
  background: rgba(6,9,26,0.92);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: toastIn 0.4s var(--spring);
  display: flex; align-items: center; gap: 12px;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ───── Stat badge (neutral glass, für AH%, Ord%, Preise) ───── */
.stat-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-badge.negative {
  background: rgba(255,69,58,0.14);
  border-color: rgba(255,69,58,0.28);
  color: var(--red);
}
.stat-badge.positive {
  background: rgba(48,209,88,0.12);
  border-color: rgba(48,209,88,0.26);
  color: var(--green);
}

/* ───── Enchantment chip ───── */
.ench-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(191,90,242,0.14);
  border: 1px solid rgba(191,90,242,0.3);
  color: #d199ff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: -0.01em;
}
.ench-chip button {
  background: rgba(255,255,255,0.10);
  border: none; color: var(--text2);
  width: 16px; height: 16px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1;
}
.ench-chip button:hover { background: rgba(255,77,109,0.5); color: white; }

.ench-toggle-btn[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  margin-left: 6px;
  background: rgba(191,90,242,0.3);
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 8px;
}
.ench-toggle-btn.ench-active {
  background: rgba(191,90,242,0.18);
  border-color: rgba(191,90,242,0.4);
}

/* ───── Bookmark chip ───── */
.bm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(255,214,10,0.10);
  border: 1px solid rgba(255,214,10,0.28);
  color: #ffd60a;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; transition: background 0.16s;
}
.bm-chip:hover { background: rgba(255,214,10,0.20); }
.bm-chip-x {
  background: rgba(255,255,255,0.10);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1; color: var(--text2);
}
.bm-chip-x:hover { background: rgba(255,77,109,0.5); color: white; }

/* ───── Autocomplete bookmark star ───── */
.ac-bm-btn {
  background: transparent; border: none;
  color: rgba(255,255,255,0.22);
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 14px; cursor: pointer;
  transition: color 0.14s, background 0.14s;
  display: grid; place-items: center;
}
.ac-bm-btn:hover { color: #ffd60a; background: rgba(255,214,10,0.10); }
.ac-bm-btn.active { color: #ffd60a; }