/* ================================================
   Mon Pokédex — Global stylesheet
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --pk-red:    #dc2626;
    --pk-red-dk: #b91c1c;
    --pk-gold:   #f59e0b;
    --pk-purple: #a855f7;
    --pk-green:  #16a34a;
    --bg:        #f0f4f8;
    --radius:    14px;
    --shadow-sm: 0 1px 6px rgba(0,0,0,.07);
    --shadow:    0 3px 14px rgba(0,0,0,.10);
    --shadow-lg: 0 6px 28px rgba(0,0,0,.15);
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    color: #1e293b;
    min-height: 100vh;
}

/* ---- Navbar ---- */
.navbar.navbar-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.3);
}
.navbar-brand img { transition: filter .25s; }
.navbar-brand:hover img { filter: drop-shadow(0 0 10px rgba(220,38,38,.55)); }
.nav-link { font-weight: 700; letter-spacing: .03em; transition: color .15s; }
.nav-link:hover { color: #fca5a5 !important; }

/* ---- Bootstrap card overrides ---- */
.card {
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    border-radius: var(--radius) var(--radius) 0 0 !important;
    font-weight: 700;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #374151;
}

/* ---- Buttons ---- */
.btn { font-weight: 700; border-radius: 8px; transition: all .15s; }
.btn-primary  { background: var(--pk-red); border-color: var(--pk-red-dk); }
.btn-primary:hover, .btn-primary:focus { background: var(--pk-red-dk); border-color: var(--pk-red-dk); box-shadow: 0 3px 12px rgba(220,38,38,.35); }
.btn-danger   { background: var(--pk-red); border-color: var(--pk-red-dk); }
.btn-danger:hover, .btn-danger:focus  { background: var(--pk-red-dk); border-color: var(--pk-red-dk); box-shadow: 0 3px 12px rgba(220,38,38,.35); }
.btn-outline-secondary:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* ---- Forms ---- */
.form-control, .form-select {
    border-radius: 8px;
    border-color: #cbd5e1;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pk-red);
    box-shadow: 0 0 0 .2rem rgba(220,38,38,.15);
}
.form-label { font-weight: 700; color: #374151; }

/* ---- Alerts ---- */
.alert { border: none; border-radius: 10px; font-weight: 600; }

/* ---- Index: Pokédex cards ---- */
.dex-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    transition: box-shadow .2s, transform .2s;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-decoration: none !important;
    color: inherit;
}
.dex-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--pk-red) 0%, var(--pk-gold) 100%);
    position: absolute;
    top: 0; left: 0; right: 0;
}
.dex-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: #e2e8f0;
    color: inherit;
}
.dex-card-code {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: #94a3b8;
    text-transform: uppercase;
}
.dex-card-name {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.3;
    flex: 1;
}
.dex-card-cta {
    font-size: .78rem;
    font-weight: 700;
    color: var(--pk-red);
    letter-spacing: .04em;
}

/* ---- Index hero ---- */
.dex-hero {
    text-align: center;
    padding: 2.5rem 0 2rem;
}
.dex-hero h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
}
.dex-hero p { color: #64748b; font-weight: 600; }

/* ---- Pokédex page: poke cards ---- */
.poke-card {
    background: white;
    border-radius: 12px;
    padding: 8px 6px;
    text-align: center;
    box-shadow: 0 1px 5px rgba(0,0,0,.07);
    transition: box-shadow .2s, transform .15s;
    border: 2px solid transparent;
}
.poke-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.13); transform: translateY(-1px); }
.poke-card.both   { border-color: var(--pk-gold);   background: #fffdf0; }
.poke-card.normal { border-color: var(--pk-green);  background: #f0fff4; }
.poke-card.shiny  { border-color: var(--pk-purple); background: #fdf4ff; }

/* ---- Auth card (login/register) ---- */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 88px); padding: 2rem 1rem; }
.auth-card {
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.auth-header {
    background: linear-gradient(135deg, var(--pk-red) 0%, #ef4444 100%);
    padding: 2.2rem 2rem 1.8rem;
    text-align: center;
    color: white;
}
.auth-header h2 { font-weight: 800; font-size: 1.6rem; margin: .5rem 0 0; }
.auth-icon { font-size: 3rem; line-height: 1; }
.auth-card .card-body { padding: 2rem; }

/* ---- Profile ---- */
.profile-wrap { max-width: 600px; margin: 0 auto; padding: 2rem 1rem; }
.profile-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: var(--radius);
    padding: 2rem;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.profile-avatar {
    width: 64px; height: 64px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin-bottom: .75rem;
}

/* ---- Global search dropdown ---- */
.search-wrap { position: relative; }
.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid #e2e8f0;
    max-height: 500px;
    overflow-y: auto;
    z-index: 1100;
    overscroll-behavior: contain;
}
.search-section-label {
    padding: 8px 14px 4px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #94a3b8;
}
.search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    text-decoration: none !important;
    color: #1e293b !important;
    transition: background .1s;
    outline: none;
}
.search-item:hover, .search-item:focus { background: #f1f5f9; }
.search-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.search-sprite {
    width: 44px; height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.search-sprite-placeholder {
    width: 44px; height: 44px;
    background: #f0f4f8;
    border-radius: 8px;
    flex-shrink: 0;
}
.search-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search-item-name { font-weight: 700; font-size: .92rem; }
.search-dex-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.search-dex-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: .67rem;
    font-weight: 700;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    color: var(--pk-red);
    text-decoration: none !important;
    transition: background .1s, border-color .1s;
}
.search-dex-tag:hover { background: #fee2e2; border-color: #fca5a5; }
.search-empty {
    padding: 18px 14px;
    font-size: .88rem;
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
}
.search-dropdown mark {
    background: #fef08a; color: inherit;
    border-radius: 2px; padding: 0 1px;
}

/* ---- In-dex filter ---- */
.filter-count-badge {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: .67rem; font-weight: 700; color: #94a3b8;
    pointer-events: none; white-space: nowrap;
}
.poke-card { transition: opacity .2s, box-shadow .2s, transform .15s; }

/* ---- Sub-bar (pokédex) ---- */
.sub-bar {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sub-bar .dex-title { font-weight: 800; color: #1e293b; }
.sub-bar .count-block { line-height: 1; }
.sub-bar .count-val   { font-size: 1.1rem; font-weight: 800; }
.sub-bar .count-lbl   { font-size: .6rem; color: #94a3b8; font-weight: 600; letter-spacing: .03em; }