/* Shared app shell styles (header, logo, nav, sidebar) - mobile-first */
:root {
    --shell-header-bg: var(--app-nav-bg, #13385b);
    --shell-header-color: var(--app-color-text-inverse, #fff);
}

.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    background: #faf9f6;
}

.login-layout {
    min-height: 100vh;
    background: var(--app-color-surface, #f7f9ff);
}

.login-layout-content {
    min-height: 100vh;
}

.app-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 5.9rem;
    padding: .55rem .85rem;
    background: var(--shell-header-bg);
    color: var(--shell-header-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-logo {
    color: var(--shell-header-color);
    flex: 0 0 auto;
}

.app-logo .logo-svg {
    display: block;
    width: 62px;
    height: 62px;
}

.app-logo .wheel {
    fill: #afbcc8;
}

.app-logo .hat {
    fill: #f00;
}

.head-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 1rem;
    min-width: 0;
}

.head-title h1 {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--shell-header-color);
    font-size: 1.85rem;
    line-height: 1;
}
.signout {
    margin-left: auto;
    border-radius: 999px;
    border: 2px solid var(--shell-header-color);
    background: var(--shell-header-color);
    color: var(--shell-header-bg) !important;
    font-weight: 800;
    line-height: 1;
    padding: .55rem .95rem;
    text-decoration: none;
}

.signout:hover,
.signout:focus {
    background: transparent;
    color: var(--shell-header-color) !important;
    text-decoration: none;
}

main {
    min-width: 0;
    padding: 0;
    overflow-y: auto;
}

.content {
    padding: .85rem !important;
}

.sidebar {
    position: sticky;
    bottom: 0;
    width: 100%;
    background: transparent;
    z-index: 100;
}

.nav-git {
    display: flex;
    gap: 1rem;
    overflow-x: visible;
    padding: .4rem 1rem 0;
}

.nav-git .nav-item { display: inline-flex; }
.nav-git .nav-link { display: flex; gap: .5rem; align-items: center; padding: .5rem 1rem; border-radius: 10px; color: var(--app-color-text); background: var(--app-nav-bg, #fff); }
.nav-git .nav-link.active { background: var(--app-nav-active-bg, rgba(238,124,0,0.18)); color: var(--app-nav-active-color, #f99b1c); }

@media (max-width: 767.98px) and (orientation: portrait) {
    .page {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .app-header {
        min-height: 4.5rem;
        gap: .55rem;
        padding: .45rem 6.25rem .45rem .75rem;
    }

    .app-logo .logo-svg {
        width: 48px;
        height: 48px;
    }

    .head-title {
        gap: .5rem;
    }

    .head-title h1 {
        font-size: 1.35rem;
    }

    .sidebar {
        position: static;
        width: auto;
        z-index: auto;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --shell-header-bg: var(--app-nav-bg, #13385b);
        --shell-header-color: var(--app-color-text-inverse, #fff);
    }

    main {
        padding: 1.25rem;
    }

    .app-header {
        min-height: auto;
        padding-inline: 1.25rem;
        position: relative;
    }

    .content {
        padding: var(--app-space-lg, 1.5rem) !important;
    }

    .head-title h1 {
        color: var(--shell-header-color);
    }
}

.login-message-error,
.login-error-banner {
    background: #fff0f0;
    border: 3px solid var(--app-color-error, #c92a2a);
    border-radius: var(--app-radius-md, 12px);
    box-shadow: 0 0 0 .25rem rgba(201, 42, 42, .18), var(--app-shadow-md, 0 4px 16px rgba(19, 56, 91, .12));
    color: #7a1010;
    display: grid;
    gap: .75rem;
    grid-template-columns: auto 1fr;
    margin-bottom: var(--app-space-lg, 1.25rem);
    padding: 1rem;
}

.login-error-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 999px;
    background: var(--app-color-error, #c92a2a);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.login-error-content h2 {
    margin: 0 0 .25rem;
    color: #7a1010;
    font-size: 1.15rem;
    font-weight: 900;
}

.login-error-content p {
    margin: 0;
}

.login-error-help {
    margin-top: .4rem !important;
    font-size: var(--app-font-sm, .875rem);
}

@media (min-width: 1200px) {
    :root {
        --shell-header-bg: var(--app-nav-bg, #13385b);
        --shell-header-color: var(--app-color-text-inverse, #fff);
    }

    .page {
        background: var(--app-color-surface, #f7f9ff);
    }

    .page {
        grid-template-columns: 260px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .app-header {
        grid-column: 2;
        grid-row: 1;
        min-height: auto;
        padding-inline: 1.5rem;
        position: relative;
    }

    .app-logo .logo-svg {
        width: 52px;
        height: 52px;
    }

    .head-title h1 {
        color: var(--shell-header-color);
    }

    main {
        grid-column: 2;
        grid-row: 2;
        padding: 1.5rem;
    }

    .content {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
}