/*
 * De ce exista:
 * Acest fisier defineste carcasa aplicatiei V2 si structura mobile-first.
 *
 * Responsabilitate:
 * Stilizeaza shell-ul, cardurile mari si navigatia comuna dintre ecrane.
 *
 * Ce NU face:
 * Nu contine stiluri particulare pentru un ecran anume.
 *
 * Depinde de:
 * base.css, partial-ele Blade si shell-ul JS.
 */

.v2-app {
    min-height: 100vh;
}

.v2-auth-shell,
.v2-app-shell {
    width: min(100%, 500px);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.v2-auth-shell {
    padding: 24px 16px calc(32px + var(--z-safe-bottom));
    justify-content: center;
    gap: 20px;
}

.v2-app-shell {
    position: relative;
    padding: 14px 14px calc(92px + var(--z-safe-bottom));
    gap: 10px;
}

.v2-brand-card,
.v2-screen-card,
.v2-shell-card,
.v2-nav {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(229, 231, 235, 0.96);
    box-shadow: var(--z-shadow);
}

.v2-screen-card,
.v2-shell-card {
    border-radius: 26px;
    padding: 16px 15px;
}

.v2-screen-content {
    display: grid;
    gap: 14px;
}

.v2-grid,
.v2-mode-grid {
    display: grid;
    gap: 14px;
}

.v2-nav {
    position: fixed;
    left: 50%;
    bottom: calc(8px + var(--z-safe-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 18px), 500px);
    border-radius: 22px;
    padding: 8px 8px 7px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    z-index: 30;
    backdrop-filter: blur(16px);
}

@media (min-width: 768px) {
    .v2-auth-shell,
    .v2-app-shell {
        width: min(100%, 580px);
    }

    .v2-app-shell {
        padding-top: 28px;
        padding-bottom: 116px;
    }

    .v2-screen-card,
    .v2-shell-card {
        padding: 26px 24px;
    }
}