/**
 * Shell layout (этап C.1) — вынесено 1:1 из style.css.
 * Каскад: tokens → breakpoints → fonts → layout → style → pages.
 * Media-overrides shell остаются в style.css / adaptive (каскад после layout).
 */

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, var(--va-bg-elevated, #171a21) 0%, var(--va-bg, #1b2838) 100%);
    padding: 12px 24px;
    border-bottom: 1px solid var(--va-border, #2a475e);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--va-accent, #66c0f4);
    letter-spacing: 0.04em;
}

.nav-links a {
    color: var(--va-text, #e6e6e6);
    text-decoration: none;
    margin: 0 15px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--va-accent, #4c6ef5);
}

.nav-links a.active {
    color: var(--va-accent, #66c0f4);
    border-bottom: 2px solid var(--va-accent, #66c0f4);
    padding-bottom: var(--space-1);
}

.user-area {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    -webkit-user-select: none;
            user-select: none;
    cursor: default;
    transition: border-color 0.28s ease, background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}

.connection-status[role="button"] {
    cursor: pointer;
}

.connection-status:hover[role="button"] {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 6%);
}

.connection-status.presence-online {
    color: #8bc34a;
    border-color: rgb(139 195 74 / 40%);
    background: rgb(139 195 74 / 10%);
}

.connection-status.presence-online .connection-dot {
    background: #8bc34a;
}

.connection-status.presence-away {
    color: #faa81a;
    border-color: rgb(250 168 26 / 40%);
    background: rgb(250 168 26 / 10%);
}

.connection-status.presence-away .connection-dot {
    background: #faa81a;
}

.connection-status.presence-busy {
    color: #ed4245;
    border-color: rgb(237 66 69 / 40%);
    background: rgb(237 66 69 / 10%);
}

.connection-status.presence-busy .connection-dot {
    background: #ed4245;
}

.connection-status.presence-offline {
    color: var(--va-text-muted, #8f98a0);
    border-color: rgb(143 152 160 / 35%);
    background: rgb(143 152 160 / 10%);
}

.connection-status.presence-offline .connection-dot {
    background: var(--va-text-muted, #8f98a0);
}

.connection-status.presence-in_game {
    color: var(--va-accent, #5865f2);
    border-color: rgb(88 101 242 / 40%);
    background: rgb(88 101 242 / 12%);
}

.connection-status.presence-in_game .connection-dot {
    background: var(--va-accent, #5865f2);
}

.connection-status.network-offline {
    opacity: 0.82;
}

.connection-status .connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.connection-status.online {
    color: #8bc34a;
    border-color: rgb(139 195 74 / 35%);
    background: rgb(139 195 74 / 8%);
}

.connection-status.online .connection-dot {
    background: #8bc34a;
}

.connection-status.offline {
    color: #ffb74d;
    border-color: rgb(255 183 77 / 35%);
    background: rgb(255 183 77 / 10%);
}

.connection-status.offline .connection-dot {
    background: #ffb74d;
}

.main-content {
    flex: 1;
    padding: var(--space-5);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.app-footer {
    text-align: center;
    padding: var(--space-4);
    color: #8d8d8d;
    border-top: 1px solid #2a2e3d;
    font-size: 0.85rem;
}

body.game-download-active .main-content {
    padding-bottom: 88px;
}

.app-header-start {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--va-border, #2a475e);
    border-radius: var(--radius-md);
    background: var(--va-bg, #1b2838);
    color: #e6e6e6;
    font-size: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle:hover {
    border-color: var(--va-accent, #66c0f4);
    color: var(--va-accent, #66c0f4);
}

.bottom-navigation {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10040;
    height: calc(var(--voltark-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: linear-gradient(180deg, var(--va-bg-elevated, #171a21) 0%, var(--va-bg, #1b2838) 100%);
    border-top: 1px solid var(--va-border, #2a475e);
    box-shadow: 0 -8px 24px rgb(0 0 0 / 35%);
}

body.mobile-layout .bottom-navigation {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}

.bottom-nav-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--voltark-tap-min);
    border: none;
    background: transparent;
    color: var(--va-text-muted, #8f98a0);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 6px 4px;
}

.bottom-nav-btn span {
    line-height: 1.1;
}

.bottom-nav-btn.active {
    color: var(--va-accent, #66c0f4);
}

/* Раньше в Qt bottom-nav глушили через native-shell-layout (desktop-only shell).
   Теперь Qt на mobile-layout показывает нижнюю навигацию, как browser. */
body.native-shell-layout:not(.mobile-layout) .app-header .nav-links {
    display: flex !important;
}

/* Итоговый mobile main: padding 10px + bottom под dock (12px в calc).
   Старый одиночный padding-bottom с 16px был полностью перекрыт этим блоком. */
body.mobile-layout .main-content {
    padding: 10px;
    padding-bottom: calc(var(--voltark-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
}

body.voltark-web-mobile .main-content {
    padding-top: 6px;
}