/* ═══════════════════════════════════════════════════════
   WoWsStats – Naval Command Theme  (Blazor Server)
   Fonts  : Bebas Neue · Barlow Condensed · JetBrains Mono
   Palette: Deep navy · Gunmetal · Amber gold · Status colours
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
    --navy-900  : #060d1a;
    --navy-800  : #0b1629;
    --navy-700  : #0f1f3d;
    --navy-600  : #142952;
    --gunmetal  : #1a2535;
    --steel     : #253447;
    --steel-lt  : #334d6a;
    --amber     : #d4891a;
    --amber-br  : #f0a830;
    --amber-glow: #ffcc55;
    --danger    : #c0392b;
    --danger-br : #e74c3c;
    --success-br: #2ecc71;
    --great-br  : #3498db;
    --unicum    : #9b59b6;
    --super     : #e91e63;

    --txt-pri   : #e8eef5;
    --txt-sec   : #8fa5bf;
    --txt-muted : #4a6080;

    --border    : rgba(212,137,26,.13);
    --border-br : rgba(212,137,26,.38);
    --glow      : 0 0 22px rgba(212,137,26,.12);
    --glow-str  : 0 0 32px rgba(212,137,26,.28);

    --ff-display: 'Bebas Neue', sans-serif;
    --ff-body   : 'Barlow Condensed', sans-serif;
    --ff-mono   : 'JetBrains Mono', monospace;

    --radius    : 6px;
    --transition: .18s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background : var(--navy-900);
    color      : var(--txt-pri);
    font-family: var(--ff-body);
    font-size  : 16px;
    line-height: 1.5;
    min-height : 100vh;
    overflow-x : hidden;
}

/* scrollbar */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy-800); }
::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 3px; }

/* ══════════════════ SHELL ══════════════════ */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Nav ── */
.top-nav {
    display       : flex;
    align-items   : center;
    justify-content: space-between;
    padding       : 0 2.5rem;
    height        : 62px;
    background    : rgba(6,13,26,.96);
    border-bottom : 1px solid var(--border);
    backdrop-filter: blur(14px);
    position      : sticky;
    top           : 0;
    z-index       : 100;
}

.nav-brand {
    display    : flex;
    align-items: center;
    gap        : .55rem;
    text-decoration: none;
}

.nav-anchor {
    font-size  : 1.35rem;
    color      : var(--amber);
    filter     : drop-shadow(0 0 8px var(--amber));
}

.nav-title {
    font-family: var(--ff-display);
    font-size  : 1.55rem;
    letter-spacing: .1em;
    color      : var(--txt-pri);
}

.nav-title-accent { color: var(--amber); }

.nav-tagline {
    font-size     : .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color         : var(--txt-muted);
}

/* ══════════════════ HERO ══════════════════ */
.hero-section {
    position  : relative;
    padding   : 5rem 2.5rem 4rem;
    display   : flex;
    justify-content: center;
    overflow  : hidden;
}

.hero-bg-grid {
    position  : absolute;
    inset     : 0;
    background-image:
        linear-gradient(rgba(212,137,26,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,137,26,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
    pointer-events: none;
}

.hero-bg-grid::after {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: radial-gradient(ellipse 60% 55% at 50% 0%,
                    rgba(212,137,26,.07), transparent);
}

.hero-content {
    position  : relative;
    text-align: center;
    max-width : 680px;
    width     : 100%;
}

.hero-title {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    line-height   : .88;
    margin-bottom : 1rem;
    gap           : .1rem;
}

.title-line-1 {
    font-family   : var(--ff-display);
    font-size     : clamp(3.5rem, 10vw, 7rem);
    letter-spacing: .25em;
    color         : var(--txt-pri);
    text-shadow   : 0 0 60px rgba(212,137,26,.18);
}

.title-line-2 {
    font-family      : var(--ff-display);
    font-size        : clamp(3.5rem, 10vw, 7rem);
    letter-spacing   : .25em;
    color            : transparent;
    -webkit-text-stroke: 1.5px var(--amber);
    text-shadow      : 0 0 40px rgba(212,137,26,.28);
}

.hero-subtitle {
    font-weight   : 300;
    font-size     : .95rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color         : var(--txt-sec);
    margin-bottom : 2.5rem;
}

/* ── Search ── */
.search-bar-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : .85rem;
}

.search-bar {
    display     : flex;
    align-items : stretch;
    width       : 100%;
    max-width   : 540px;
    background  : var(--gunmetal);
    border      : 1px solid var(--border-br);
    border-radius: var(--radius);
    overflow    : hidden;
    box-shadow  : var(--glow);
    transition  : border-color var(--transition), box-shadow var(--transition);
}

.search-bar:focus-within {
    border-color: var(--amber);
    box-shadow  : var(--glow-str);
}

.search-bar.loading { opacity: .72; }

.search-icon {
    padding    : 0 1rem;
    display    : flex;
    align-items: center;
    color      : var(--amber);
    font-size  : 1.1rem;
    flex-shrink: 0;
}

.search-input {
    flex       : 1;
    background : none;
    border     : none;
    outline    : none;
    color      : var(--txt-pri);
    font-family: var(--ff-body);
    font-size  : 1rem;
    font-weight: 500;
    letter-spacing: .04em;
    padding    : .9rem 0;
    min-width  : 0;
}

.search-input::placeholder { color: var(--txt-muted); }

.search-btn {
    background  : var(--amber);
    color       : var(--navy-900);
    border      : none;
    padding     : 0 1.6rem;
    font-family : var(--ff-display);
    font-size   : 1rem;
    letter-spacing: .15em;
    cursor      : pointer;
    transition  : background var(--transition);
    display     : flex;
    align-items : center;
    gap         : .4rem;
    flex-shrink : 0;
    white-space : nowrap;
}

.search-btn:hover:not(:disabled) { background: var(--amber-glow); }
.search-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Spinner */
.spinner {
    display      : inline-block;
    width        : 15px;
    height       : 15px;
    border       : 2px solid var(--navy-900);
    border-top-color: transparent;
    border-radius: 50%;
    animation    : spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-msg {
    color     : var(--danger-br);
    font-size : .88rem;
    letter-spacing: .04em;
    background: rgba(192,57,43,.1);
    border    : 1px solid rgba(192,57,43,.3);
    border-radius: var(--radius);
    padding   : .5rem 1rem;
    max-width : 540px;
    width     : 100%;
    text-align: left;
}

/* ══════════════════ STATS CONTAINER ══════════════════ */
.stats-container {
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 2rem 5rem;
    opacity   : 0;
    transform : translateY(18px);
    transition: opacity .45s ease, transform .45s ease;
}

.stats-container.visible {
    opacity  : 1;
    transform: translateY(0);
}

/* ── Tabs ── */
.tab-nav {
    display      : flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.75rem;
    gap          : 0;
}

.tab-btn {
    background    : none;
    border        : none;
    border-bottom : 3px solid transparent;
    color         : var(--txt-sec);
    font-family   : var(--ff-body);
    font-size     : .95rem;
    font-weight   : 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding       : .72rem 1.4rem;
    cursor        : pointer;
    transition    : color var(--transition), border-color var(--transition);
    margin-bottom : -1px;
    display       : flex;
    align-items   : center;
    gap           : .4rem;
}

.tab-btn:hover    { color: var(--amber-br); }
.tab-btn.active   { color: var(--amber); border-bottom-color: var(--amber); }

.wip-badge {
    font-size    : .6rem;
    font-weight  : 700;
    letter-spacing: .04em;
    background   : var(--steel);
    color        : var(--amber);
    border       : 1px solid var(--border-br);
    border-radius: 3px;
    padding      : .1em .45em;
}

/* ── WIP Banner ── */
.wip-banner {
    display      : flex;
    align-items  : flex-start;
    gap          : 1rem;
    background   : rgba(212,137,26,.055);
    border       : 1px solid var(--border-br);
    border-left  : 4px solid var(--amber);
    border-radius: var(--radius);
    padding      : 1rem 1.2rem;
    margin-bottom: 1.75rem;
    animation    : slideDown .28s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wip-banner-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }

.wip-banner-text strong {
    font-family   : var(--ff-display);
    font-size     : 1.05rem;
    letter-spacing: .06em;
    color         : var(--amber);
}

.wip-banner-text p {
    font-size: .88rem;
    color    : var(--txt-sec);
    margin-top: .15rem;
}

.wip-close {
    background : none;
    border     : none;
    color      : var(--txt-muted);
    font-size  : 1rem;
    cursor     : pointer;
    margin-left: auto;
    flex-shrink: 0;
    padding    : .2rem .4rem;
    transition : color var(--transition);
    line-height: 1;
}

.wip-close:hover { color: var(--txt-pri); }

/* ── Player Header ── */
.player-header {
    display      : flex;
    align-items  : center;
    gap          : 1.5rem;
    background   : var(--gunmetal);
    border       : 1px solid var(--border);
    border-radius: var(--radius);
    padding      : 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow   : var(--glow);
}

.player-avatar {
    width        : 70px;
    height       : 70px;
    border-radius: 50%;
    background   : linear-gradient(135deg, var(--navy-600), var(--navy-700));
    border       : 2px solid var(--amber);
    display      : flex;
    align-items  : center;
    justify-content: center;
    flex-shrink  : 0;
    box-shadow   : 0 0 22px rgba(212,137,26,.3);
}

.avatar-icon  { font-size: 2rem; }

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

.player-name {
    font-family   : var(--ff-display);
    font-size     : 2rem;
    letter-spacing: .1em;
    line-height   : 1;
    margin-bottom : .45rem;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.player-meta  { display: flex; flex-wrap: wrap; gap: .45rem; }

.meta-chip {
    font-family   : var(--ff-mono);
    font-size     : .7rem;
    background    : var(--navy-700);
    border        : 1px solid var(--border);
    border-radius : 3px;
    padding       : .2em .6em;
    color         : var(--txt-sec);
    letter-spacing: .04em;
}

.player-xpr   { text-align: right; flex-shrink: 0; }

.xpr-label {
    font-size     : .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color         : var(--txt-muted);
}

.xpr-value {
    font-family: var(--ff-display);
    font-size  : 2.4rem;
    line-height: 1;
    margin     : .08rem 0;
}

.xpr-tier {
    font-size     : .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── KPI Grid ── */
.kpi-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap                  : 1rem;
    margin-bottom        : 2.5rem;
}

.kpi-card {
    background   : var(--gunmetal);
    border       : 1px solid var(--border);
    border-radius: var(--radius);
    padding      : 1.2rem 1.2rem .95rem;
    text-align   : center;
    transition   : border-color var(--transition), transform var(--transition);
    position     : relative;
    overflow     : hidden;
}

.kpi-card::before {
    content   : '';
    position  : absolute;
    top       : 0; left: 0; right: 0;
    height    : 2px;
    background: transparent;
    transition: background var(--transition);
}

.kpi-card:hover {
    border-color: var(--border-br);
    transform   : translateY(-2px);
}

.kpi-card:hover::before { background: var(--amber); }

.kpi-card.highlight {
    border-color: rgba(212,137,26,.25);
    background  : linear-gradient(160deg, var(--gunmetal), rgba(212,137,26,.04));
}

.kpi-icon  { font-size: 1.35rem; margin-bottom: .4rem; }

.kpi-value {
    font-family: var(--ff-display);
    font-size  : 1.85rem;
    line-height: 1;
    margin-bottom: .25rem;
}

.kpi-label {
    font-size     : .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color         : var(--txt-muted);
    margin-bottom : .5rem;
}

.kpi-bar-wrap {
    height      : 2px;
    background  : var(--steel);
    border-radius: 1px;
    overflow    : hidden;
}

.kpi-bar {
    height      : 100%;
    background  : linear-gradient(90deg, var(--amber), var(--amber-glow));
    border-radius: 1px;
}

/* ── Section Headers ── */
.section-header {
    display    : flex;
    align-items: center;
    gap        : 1rem;
    margin-bottom: 1rem;
}

.section-line  { flex: 1; height: 1px; background: var(--border); }

.section-title {
    font-family   : var(--ff-display);
    font-size     : 1.05rem;
    letter-spacing: .2em;
    color         : var(--amber);
    white-space   : nowrap;
}

/* ── Fleet Breakdown ── */
.type-breakdown {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 1rem;
    margin-bottom: 2.5rem;
}

.type-card {
    background   : var(--gunmetal);
    border       : 1px solid var(--border);
    border-radius: var(--radius);
    padding      : 1rem 1.25rem;
    display      : flex;
    flex-direction: column;
    gap          : .22rem;
    min-width    : 145px;
    transition   : border-color var(--transition), transform var(--transition);
}

.type-card:hover {
    border-color: var(--border-br);
    transform   : translateY(-2px);
}

.type-icon    { font-size: 1.35rem; }
.type-name    { font-family: var(--ff-display); font-size: .95rem; letter-spacing: .07em; }
.type-ships   { font-size: .75rem; color: var(--txt-muted); }
.type-battles { font-size: .8rem;  color: var(--txt-sec); }
.type-wr      { font-family: var(--ff-display); font-size: 1.15rem; margin-top: .15rem; }

/* ── Ship Table ── */
.table-wrap {
    overflow-x   : auto;
    border-radius: var(--radius);
    border       : 1px solid var(--border);
    box-shadow   : 0 4px 24px rgba(0,0,0,.25);
}

.ship-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : .9rem;
}

.ship-table thead tr {
    background   : var(--navy-700);
    border-bottom: 2px solid var(--border-br);
}

.ship-table th {
    padding       : .8rem 1rem;
    text-align    : left;
    font-weight   : 700;
    font-size     : .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color         : var(--txt-sec);
    white-space   : nowrap;
    user-select   : none;
}

.ship-table th.sortable { cursor: pointer; transition: color var(--transition); }
.ship-table th.sortable:hover { color: var(--amber); }
.th-center { text-align: center; }
.th-right  { text-align: right; }

.ship-table tbody tr.ship-row {
    border-bottom: 1px solid rgba(212,137,26,.06);
    cursor       : pointer;
    transition   : background var(--transition);
}

.ship-table tbody tr.ship-row:nth-child(even) { background: rgba(0,0,0,.12); }
.ship-table tbody tr.ship-row:hover           { background: rgba(212,137,26,.06); }
.ship-table tbody tr.ship-row.expanded        { background: rgba(212,137,26,.08); }

.ship-table td {
    padding        : .68rem 1rem;
    vertical-align : middle;
}

.td-center { text-align: center; }
.td-right  { text-align: right; }

.ship-name-text {
    font-weight: 600;
    color      : var(--txt-pri);
}

.expand-hint {
    font-size  : .6rem;
    color      : var(--txt-muted);
    margin-left: .4rem;
    vertical-align: middle;
}

/* Type badges */
.type-badge {
    font-family   : var(--ff-display);
    font-size     : .82rem;
    letter-spacing: .08em;
    padding       : .1em .55em;
    border-radius : 3px;
    border        : 1px solid currentColor;
}

.type-dd { color: #4fc3f7; }
.type-bb { color: #ef9a9a; }
.type-ca,
.type-cl { color: #a5d6a7; }
.type-cv { color: #ffe082; }
.type-ss { color: #ce93d8; }

.tier-roman {
    font-family: var(--ff-mono);
    font-size  : .8rem;
    color      : var(--txt-sec);
}

/* Detail row */
.ship-detail-row { background: var(--navy-800) !important; cursor: default; }

.ship-detail {
    display   : flex;
    flex-wrap : wrap;
    gap       : 1.5rem;
    padding   : .75rem 1rem;
    animation : slideDown .22s ease;
}

.detail-stat  { display: flex; flex-direction: column; gap: .12rem; }

.detail-label {
    font-size     : .67rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color         : var(--txt-muted);
}

.detail-val {
    font-family: var(--ff-mono);
    font-size  : .92rem;
    color      : var(--txt-pri);
}

.detail-val.mono { font-size: .75rem; color: var(--txt-sec); }

/* ══════════════════ STATUS COLOURS ══════════════════ */
.wr-unicum  { color: #b39ddb; }
.wr-great   { color: var(--great-br); }
.wr-good    { color: var(--success-br); }
.wr-average { color: var(--amber-br); }
.wr-below   { color: var(--danger-br); }

.xpr-super   { color: var(--super); }
.xpr-unicum  { color: #b39ddb; }
.xpr-great   { color: var(--great-br); }
.xpr-good    { color: var(--success-br); }
.xpr-average { color: var(--amber-br); }
.xpr-below   { color: var(--danger-br); }

/* ══════════════════ FOOTER ══════════════════ */
.app-footer {
    margin-top : auto;
    padding    : 1.2rem 2.5rem;
    border-top : 1px solid var(--border);
    font-size  : .76rem;
    letter-spacing: .08em;
    color      : var(--txt-muted);
    display    : flex;
    gap        : .75rem;
    justify-content: center;
    align-items: center;
}

.footer-sep { color: var(--amber); font-size: .9rem; }

/* ══════════════════ BLAZOR ERROR UI ══════════════════ */
#blazor-error-ui {
    display       : none;
    position      : fixed;
    bottom        : 1.5rem;
    left          : 50%;
    transform     : translateX(-50%);
    background    : var(--gunmetal);
    border        : 1px solid var(--danger);
    border-radius : var(--radius);
    padding       : .85rem 1.4rem;
    z-index       : 999;
    box-shadow    : 0 4px 24px rgba(0,0,0,.4);
    color         : var(--txt-pri);
    font-size     : .88rem;
}

.blazor-error-content { display: flex; align-items: center; gap: 1rem; }

.blazor-error-content .reload {
    color      : var(--amber);
    font-weight: 600;
    text-decoration: none;
}

.not-found {
    text-align : center;
    padding    : 5rem 2rem;
}

.not-found h2 {
    font-family: var(--ff-display);
    font-size  : 5rem;
    color      : var(--amber);
}

.not-found p  { color: var(--txt-sec); margin: .5rem 0 1.5rem; }
.not-found a  { color: var(--amber); }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 768px) {
    .hero-section   { padding: 3rem 1.25rem 2.5rem; }
    .stats-container{ padding: 0 1rem 3rem; }
    .player-header  { flex-wrap: wrap; }
    .player-xpr     { text-align: left; width: 100%; }
    .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
    .tab-btn        { padding: .6rem .85rem; font-size: .82rem; }
    .top-nav        { padding: 0 1.25rem; }
    .nav-tagline    { display: none; }
}

@media (max-width: 480px) {
    .kpi-grid   { grid-template-columns: 1fr 1fr; }
    .player-name{ font-size: 1.6rem; }
}