/* Variabel tema */
:root {
    --bg: #0b0f1d;
    --surface: #0f1629;
    --text: #e7eaf6;
    --muted: #9aa3b2;
}
html[data-theme="light"] {
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
}

/* Dasar halaman */
body {
    background: var(--bg);
    color: var(--text);
}

/* Navbar */
.app-navbar {
    background: var(--surface);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .app-navbar {
    border-color: rgba(0, 0, 0, 0.06);
}
.hero-box {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .hero-box {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Input/select */
.app-input {
    background: var(--bg);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text);
}
html[data-theme="light"] .app-input {
    border-color: rgba(0, 0, 0, 0.1);
}
.app-input::placeholder {
    color: var(--muted);
}

/* Kartu Pokemon & accent per-tipe */
.poke-card {
    position: relative;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .poke-card {
    border-color: rgba(0, 0, 0, 0.06);
}
.poke-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2),
        0 0 0 4px color-mix(in srgb, var(--type-accent), transparent 85%);
}
.poke-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: var(--type-accent, #6c757d);
}

/* Accent warna berdasarkan tipe pertama */
.poke-card[data-type="normal"] {
    --type-accent: #a8a77a;
}
.poke-card[data-type="fire"] {
    --type-accent: #ee8130;
}
.poke-card[data-type="water"] {
    --type-accent: #6390f0;
}
.poke-card[data-type="electric"] {
    --type-accent: #f7d02c;
}
.poke-card[data-type="grass"] {
    --type-accent: #7ac74c;
}
.poke-card[data-type="ice"] {
    --type-accent: #96d9d6;
}
.poke-card[data-type="fighting"] {
    --type-accent: #c22e28;
}
.poke-card[data-type="poison"] {
    --type-accent: #a33ea1;
}
.poke-card[data-type="ground"] {
    --type-accent: #e2bf65;
}
.poke-card[data-type="flying"] {
    --type-accent: #a98ff3;
}
.poke-card[data-type="psychic"] {
    --type-accent: #f95587;
}
.poke-card[data-type="bug"] {
    --type-accent: #a6b91a;
}
.poke-card[data-type="rock"] {
    --type-accent: #b6a136;
}
.poke-card[data-type="ghost"] {
    --type-accent: #735797;
}
.poke-card[data-type="dragon"] {
    --type-accent: #6f35fc;
}
.poke-card[data-type="dark"] {
    --type-accent: #705746;
}
.poke-card[data-type="steel"] {
    --type-accent: #b7b7ce;
}
.poke-card[data-type="fairy"] {
    --type-accent: #d685ad;
}

/* Badge tipe */
.badge-type {
    border: 0;
    color: #fff;
    font-weight: 600;
}
.type-normal {
    background: #a8a77a;
}
.type-fire {
    background: #ee8130;
}
.type-water {
    background: #6390f0;
}
.type-electric {
    background: #f7d02c;
    color: #19212c;
}
.type-grass {
    background: #7ac74c;
}
.type-ice {
    background: #96d9d6;
    color: #0c2a2a;
}
.type-fighting {
    background: #c22e28;
}
.type-poison {
    background: #a33ea1;
}
.type-ground {
    background: #e2bf65;
    color: #2a2513;
}
.type-flying {
    background: #a98ff3;
}
.type-psychic {
    background: #f95587;
}
.type-bug {
    background: #a6b91a;
    color: #202510;
}
.type-rock {
    background: #b6a136;
    color: #1f1a08;
}
.type-ghost {
    background: #735797;
}
.type-dragon {
    background: #6f35fc;
}
.type-dark {
    background: #705746;
}
.type-steel {
    background: #b7b7ce;
    color: #1d1d2c;
}
.type-fairy {
    background: #d685ad;
}

/* Progress bar track */
.progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
}
html[data-theme="light"] .progress {
    background: rgba(0, 0, 0, 0.06);
}
.progress-bar {
    background: var(--type-accent, #0d6efd);
}

/* Skeleton loading */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 0.75rem;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Util */
.object-fit-contain {
    object-fit: contain;
}

/* modal */
.app-modal {
    background: var(--surface);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="light"] .app-modal {
    border-color: rgba(0, 0, 0, 0.06);
}
.app-modal .modal-header,
.app-modal .modal-footer {
    background: var(--surface);
    border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .app-modal .modal-header,
html[data-theme="light"] .app-modal .modal-footer {
    border-color: rgba(0, 0, 0, 0.06);
}

.app-modal .list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-color: var(--text);
    --bs-list-group-border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .app-modal .list-group {
    --bs-list-group-border-color: rgba(0, 0, 0, 0.06);
}

/* Wrapper gambar */
.bg-body-tertiary {
    background-color: color-mix(in srgb, var(--surface), #000 8%) !important;
}
html[data-theme="light"] .bg-body-tertiary {
    background-color: color-mix(in srgb, var(--surface), #000 2%) !important;
}

.text-secondary {
    color: var(--muted) !important;
}

/* Tombol tutup modal */
.app-modal .btn-close {
    filter: invert(0.9);
}

html[data-theme="light"] .app-modal .btn-close {
    filter: none;
}