/*
  app-header.css — the app's real header, ported for the static demo.

  Ported from the app's header CSS. Two deliberate differences:

  1. Only the Dota 2 tab is present, so the tab group needs a closing border on
     the right — in the app that job is done by the `add-games` tab that always
     follows the list.
  2. The notification and social buttons are dropped — the demo has nothing to
     put behind them. The profile pill stays as the app's dropdown trigger, but
     without the menu (no session, no dropdown JS, and no /wallet, /settings or
     /logout to navigate to), so it is inert and hidden from screen readers.
     The only real links are the logo, the Dota 2 tab and the back button.
*/

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 56px;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-gray-100);
    z-index: 1100;
    font-family: var(--font-work-sans);
    color: white;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
}

.header-left {
    flex-shrink: 1;
    min-width: 0;
}

.header-right {
    margin-left: auto;
    gap: 12px;
}

/* LOGO */
.logo-link {
    margin-right: 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.supernova-logo {
    height: 10px;
    width: auto;
    display: block;
}

/* GAME NAVIGATION */
.game-nav {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
}

.game-nav-toggle-input,
.game-nav-toggle {
    display: none;
}

.game-tab {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 52px;
    font-size: 13px;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    gap: 10px;
    border-left: 1px solid #454857;
    background: #24252C;
    transition: background-color 0.2s;
}

.game-tab:hover {
    background-color: #2d2f36;
}

/* closes the group, since there is no add-games tab after it here */
.game-nav .game-tab:last-child {
    border-right: 1px solid #454857;
}

.game-tab img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.85;
}

/* BACK TO THE MARKETING SITE — sits directly after the game tabs */
.hdr-back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid white;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hdr-back:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: white;
    color: #fff;
}

/* PROFILE PILL (decorative — the app's dropdown trigger, without the menu) */
.profile-dropdown {
    position: relative;
    height: 38px;
    background-color: var(--color-gray-200);
    border: 1px solid var(--color-darkslategray-300);
    border-radius: var(--br-7xs);
    display: flex;
    align-items: center;
    padding: 0 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: 10px;
}

.profile-picture {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #454756;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-image {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
}

.profile-username {
    font-weight: 500;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.hdr-sep {
    color: #454756;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.profile-tyr {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #e8e9ef;
    white-space: nowrap;
}

.profile-tyr-coin {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.profile-tyr .rune-points {
    font-family: "MedievalSharp", serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.profile-tyr-label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: linear-gradient(90deg, #8810F9 0%, #4392F3 50%, #4CD2E4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 4px;
}

.chevron-icon {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
}

/*
  The header is fixed, so the report has to start below it. The side nav is
  shared with the demo pages that still use the old topbar, so its offset is
  corrected here rather than in side-nav.css.
*/
.sn-dota-report.has-app-header {
    padding-top: 56px;
}

/*
  Desktop only. Below 768px side-nav.css turns the rail into a bottom bar with
  `bottom: 0; top: auto` — and since this rule is more specific and loads later,
  an unscoped `top` would win, over-constrain the fixed element and pin the bar
  back under the header.
*/
@media screen and (min-width: 769px) {

    .has-app-header~#sidebar-container .sidebar,
    .has-app-header .sidebar {
        top: 56px;
    }
}

/* Game name drops away before the tab does, as in the app */
@media (max-width: 950px) {
    .game-tab {
        font-size: 0;
        justify-content: center;
        padding: 0 16px;
    }

    .game-tab img {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 768px) {
    .logo-link {
        width: 28px;
        height: 28px;
        margin-right: 14px;
        background-image: url("https://files.supernova-analytics.com/images/Icons/Supernova_favicon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .supernova-logo {
        display: none;
    }

    .hdr-sep,
    .profile-tyr,
    .profile-username {
        display: none;
    }
}

/* Below this the back button keeps its icon only, to save room */
@media screen and (max-width: 560px) {
    .hdr-back {
        margin-left: 10px;
        padding: 0 10px;
        gap: 0;
    }

    .hdr-back .hdr-back-text {
        display: none;
    }
}