/* ============================================
   LOURDIN RPG — PET COMPONENT STYLES
   Shared styles for pet cards used across:
   - Tavern sidebar (Game.razor)
   - Stables page
   All rarity/stage values use design tokens
   from design-system.css (--color-pet-*).
   ============================================ */

/* ============================================
   PET SIDEBAR CARD
   Used in Game.razor left column
   ============================================ */

.pet-sidebar-card {
    margin-top: var(--space-md);
    background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-elevated-alt));
    border: 1px solid var(--color-border-base);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.pet-sidebar-card:hover {
    border-color: var(--color-border-active);
    box-shadow: var(--shadow-md);
}

/* Rarity accent border at top */
.pet-sidebar-card--common    { border-top: 2px solid var(--color-pet-common); }
.pet-sidebar-card--uncommon  { border-top: 2px solid var(--color-pet-uncommon); }
.pet-sidebar-card--rare      { border-top: 2px solid var(--color-pet-rare); }
.pet-sidebar-card--epic      { border-top: 2px solid var(--color-pet-epic); }
.pet-sidebar-card--legendary { border-top: 2px solid var(--color-pet-legendary); box-shadow: 0 0 12px rgba(251, 191, 36, 0.15); }

/* ── Header row ─────────────────────────────── */

.pet-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md);
}

.pet-sidebar-portrait-wrap {
    width: var(--pet-card-portrait-md);
    height: var(--pet-card-portrait-md);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border-base);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rarity-colored portrait border */
.pet-sidebar-portrait-wrap--common    { border-color: var(--color-pet-common); }
.pet-sidebar-portrait-wrap--uncommon  { border-color: var(--color-pet-uncommon); }
.pet-sidebar-portrait-wrap--rare      { border-color: var(--color-pet-rare); }
.pet-sidebar-portrait-wrap--epic      { border-color: var(--color-pet-epic); }
.pet-sidebar-portrait-wrap--legendary { border-color: var(--color-pet-legendary); }

.pet-sidebar-portrait-fallback {
    position: absolute;
    opacity: 0.7;
}

.pet-sidebar-portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-sidebar-info {
    flex: 1;
    min-width: 0;
}

.pet-sidebar-name {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-xs);
}

/* Rarity-colored name */
.pet-sidebar-name--common    { color: var(--color-pet-common); }
.pet-sidebar-name--uncommon  { color: var(--color-pet-uncommon); }
.pet-sidebar-name--rare      { color: var(--color-pet-rare); }
.pet-sidebar-name--epic      { color: var(--color-pet-epic); }
.pet-sidebar-name--legendary { color: var(--color-pet-legendary); }

.pet-sidebar-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
}

.pet-sidebar-rarity {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pet-sidebar-rarity--common    { color: var(--color-pet-common); }
.pet-sidebar-rarity--uncommon  { color: var(--color-pet-uncommon); }
.pet-sidebar-rarity--rare      { color: var(--color-pet-rare); }
.pet-sidebar-rarity--epic      { color: var(--color-pet-epic); }
.pet-sidebar-rarity--legendary { color: var(--color-pet-legendary); }

.pet-sidebar-stage {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.pet-sidebar-mood {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.pet-sidebar-level-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    padding: 3px var(--space-sm);
    border-radius: var(--radius-round);
    white-space: nowrap;
    flex-shrink: 0;
}

.pet-sidebar-level-badge--common    { background: var(--color-pet-common); }
.pet-sidebar-level-badge--uncommon  { background: var(--color-pet-uncommon); }
.pet-sidebar-level-badge--rare      { background: var(--color-pet-rare); }
.pet-sidebar-level-badge--epic      { background: var(--color-pet-epic); }
.pet-sidebar-level-badge--legendary { background: var(--color-pet-legendary); }

/* ── XP bar ─────────────────────────────────── */

.pet-sidebar-xp-row {
    padding: 0 var(--space-md) var(--space-md);
}

.pet-sidebar-xp-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.pet-sidebar-xp-max {
    color: var(--color-pet-legendary);
    font-weight: var(--font-weight-semibold);
}

.pet-sidebar-xp-track {
    height: var(--pet-xp-bar-height);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.pet-sidebar-xp-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
    background: linear-gradient(90deg, var(--color-pet-rare), var(--color-pet-epic));
}

/* ── Empty state ────────────────────────────── */

.pet-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    gap: var(--space-xs);
    text-align: center;
}

.pet-sidebar-empty-link {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    margin-top: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color var(--transition-fast);
}

.pet-sidebar-empty-link:hover {
    color: var(--color-primary-light);
}

/* ── Section label ──────────────────────────── */

.pet-sidebar-section-label {
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-sm) var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
    .pet-sidebar-card {
        margin-top: var(--space-sm);
    }

    .pet-sidebar-header {
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .pet-sidebar-portrait-wrap {
        width: 44px;
        height: 44px;
    }

    .pet-sidebar-xp-row {
        padding: 0 var(--space-sm) var(--space-sm);
    }
}