/* _content/RekruUI/Components/Comps/PlayerCard.razor.rz.scp.css */
/* ============================================================
   PlayerCard Scoped Styles — Full Component
   Theme-independent: renders identically on any Radzen theme.
   Fonts are NOT hardcoded — they inherit from the active theme.
   Text colors use --rz-* theme variables for automatic light/dark
   adaptation, except inside .player-stats-section which always
   has dark tier-colored backgrounds (text stays white).
   ============================================================ */

/* ─── Root Wrapper ───
   Provides a scoped anchor for ::deep rules targeting child-component
   rendered elements (RadzenCard, RadzenImage, RadzenLink).
   display:contents ensures no extra box in the layout. */
.pc-root[b-bioka7j0vd] {
    display: contents;
}

/* ─── Card Container (RadzenCard renders <div class="rz-card player-card">) ───
   Background, border, border-radius, and shadow are inherited from
   the active Radzen theme. Only structural/layout overrides here.
   font-size and line-height are locked so rem-relative children
   render identically regardless of the theme's body defaults. */
.pc-root[b-bioka7j0vd]  .player-card {
    padding: 0 !important;
    width: 320px;
    max-width: 320px;
    font-size: 16px !important;
    line-height: 1.4 !important;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pc-root[b-bioka7j0vd]  .player-card:hover {
    transform: translateY(-4px) scale(1.01);
}

/* ─── Spacing Reset ───
   Radzen themes define different --rz-grid-gutter-width values.
   Zero them out inside the card so row/column layout is consistent. */
.pc-root[b-bioka7j0vd]  .rz-row {
    --rz-grid-gutter-width: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pc-root[b-bioka7j0vd]  [class*="rz-col"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* RadzenStack gap reset — ensure Gap="0" actually produces zero gap
   even if the theme has a default --rz-stack-gap override. */
.pc-root[b-bioka7j0vd]  .rz-stack {
    gap: 0 !important;
}

/* ─── Header ─── */
.player-card-header[b-bioka7j0vd] {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    line-height: 1.4;
}

/* Avatar (RadzenImage renders <img class="rz-image player-card-avatar">) */
.player-card-header[b-bioka7j0vd]  .player-card-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 229, 255, 0.3) !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.25) !important;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    object-fit: cover;
    flex-shrink: 0;
}

/* Avatar glow intensifies on card hover */
.pc-root[b-bioka7j0vd]  .player-card:hover .player-card-avatar {
    border-color: #00e5ff !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.25) !important;
}

/* ─── Player Name ─── */
.player-card-name[b-bioka7j0vd] {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    color: var(--rz-text-title-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── Labels (header + stats) ─── */
.player-card-label[b-bioka7j0vd] {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: var(--rz-text-secondary-color) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ─── Values (header + stats) ─── */
.player-card-value[b-bioka7j0vd] {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--rz-text-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── Stats Section Container ─── */
.player-stats-section[b-bioka7j0vd] {
    margin: 0 -1px;
    padding: 16px 20px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1.4;
}

/* Scanline overlay */
.player-stats-section[b-bioka7j0vd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.08;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
}

/* ─── Section Title ─── */
.player-stats-title[b-bioka7j0vd] {
    font-size: 12px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* ─── Performance Tier Backgrounds (10 tiers — official WoWS xPR colors) ─── */
.tier-bot[b-bioka7j0vd]     { background: linear-gradient(135deg, #930D0D, rgba(147, 13, 13, 0.7))  !important; }
.tier-vbad[b-bioka7j0vd]    { background: linear-gradient(135deg, #CD3333, rgba(205, 51, 51, 0.7))  !important; }
.tier-bad[b-bioka7j0vd]     { background: linear-gradient(135deg, #CC7A00, rgba(204, 122, 0, 0.7))  !important; }
.tier-below[b-bioka7j0vd]   { background: linear-gradient(135deg, #CCB800, rgba(204, 184, 0, 0.7))  !important; }
.tier-avg[b-bioka7j0vd]     { background: linear-gradient(135deg, #849B24, rgba(132, 155, 36, 0.7)) !important; }
.tier-good[b-bioka7j0vd]    { background: linear-gradient(135deg, #4D7326, rgba(77, 115, 38, 0.7))  !important; }
.tier-vgood[b-bioka7j0vd]   { background: linear-gradient(135deg, #4D7326, rgba(77, 115, 38, 0.7))  !important; }
.tier-great[b-bioka7j0vd]   { background: linear-gradient(135deg, #3972C6, rgba(57, 114, 198, 0.7)) !important; }
.tier-unicum[b-bioka7j0vd]  { background: linear-gradient(135deg, #793DB6, rgba(121, 61, 182, 0.8)) !important; }
.tier-sunicum[b-bioka7j0vd] { background: linear-gradient(135deg, #401070, rgba(64, 16, 112, 0.9))  !important; }

/* ─── Stats Section Text Overrides ───
   Stats sections always have dark tier-colored gradient backgrounds,
   so text inside must stay light regardless of the active theme. */
.player-stats-section .player-card-label[b-bioka7j0vd] {
    color: rgba(255, 255, 255, 0.6) !important;
}

.player-stats-section .player-card-value[b-bioka7j0vd] {
    color: #fff !important;
}

/* Override text for below-avg tier (dark text on bright yellow-gold background) */
.player-stats-section.tier-below .player-card-label[b-bioka7j0vd],
.player-stats-section.tier-below .player-card-value[b-bioka7j0vd],
.player-stats-section.tier-below .player-stats-title[b-bioka7j0vd] {
    color: #1a1a00 !important;
}

/* ─── Footer Links ─── */
.player-card-links[b-bioka7j0vd] {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* RadzenLink renders <a class="rz-link"> — no scope attr, needs ::deep */
.player-card-links[b-bioka7j0vd]  a {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    color: var(--rz-text-secondary-color) !important;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
}

.player-card-links[b-bioka7j0vd]  a:hover {
    color: var(--rz-link-color) !important;
    background: rgba(0, 229, 255, 0.08);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

/* ─── Divider ─── */
.player-card-divider[b-bioka7j0vd] {
    color: var(--rz-text-tertiary-color) !important;
    font-size: 11px;
    line-height: 1;
}