/* ============================================
   MY UNIVERSE BETA 1.0
   RESPONSIVE FOUNDATION
   Desktop / Tablet / Smartphone
   ============================================ */

html {
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

.app {
    min-width: 0;
}

.main-content {
    min-width: 0;
}

.page {
    min-width: 0;
}

button,
input {
    font: inherit;
}

button {
    touch-action: manipulation;
}

/* TABLET */

@media (max-width: 1100px) {

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .universe-card,
    .missions-card,
    .worlds-card {
        min-width: 0;
    }

    .jh-hero {
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .jh-grid {
        grid-template-columns: 1fr;
    }
}

/* SMARTPHONE E TABLET PICCOLI */

@media (max-width: 768px) {

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

    /* Sidebar trasformata in menu superiore */

    .sidebar {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        flex: none;
        padding: 15px 14px 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 229, 255, .14);
        overflow: visible;
    }

    .sidebar .logo {
        margin-bottom: 15px;
    }

    .sidebar-label,
    .sidebar-bottom {
        display: none;
    }

    .navigation {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-bottom: 3px;
        width: 100%;
    }

    .navigation::-webkit-scrollbar {
        display: none;
    }

    .navigation .nav-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        padding: 10px 13px;
        white-space: nowrap;
        border-radius: 12px;
        font-size: 12px;
    }

    /* Contenuto principale */

    .main-content {
        width: 100%;
        margin-left: 0;
        padding: 18px 14px 35px;
        flex: 1;
    }

    .topbar {
        min-height: 45px;
        gap: 10px;
        padding: 0;
        margin-bottom: 22px;
    }

    .breadcrumb {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .profile {
        gap: 9px;
    }

    #current-date {
        font-size: 11px;
    }

    /* Dashboard */

    .welcome {
        margin-bottom: 22px;
    }

    .welcome h1 {
        font-size: clamp(28px, 7vw, 44px);
        line-height: 1.1;
    }

    .welcome p {
        font-size: 13px;
        line-height: 1.6;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .stat-card {
        min-width: 0;
        padding: 17px 13px;
    }

    .stat-number {
        font-size: clamp(26px, 6vw, 39px);
    }

    .card-label {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .stat-description {
        font-size: 11px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .card {
        max-width: 100%;
    }

    .universe-card,
    .missions-card,
    .worlds-card {
        overflow: hidden;
    }

    .universe-scene,
    #planet-scene {
        max-width: 100%;
        overflow: hidden;
    }

    #earth-canvas {
        display: block;
        max-width: 100%;
        touch-action: pan-y;
    }

    /* J.A.R.V.I.S. Command Center */

    .jh-root {
        gap: 15px;
    }

    .jh-hero {
        grid-template-columns: 1fr;
        padding: 24px 18px;
        gap: 25px;
    }

    .jh-hero-copy h1 {
        font-size: clamp(35px, 8vw, 55px);
    }

    .jh-hero p {
        font-size: 13px;
    }

    .jh-face-area {
        grid-row: 1;
    }

    .jh-face-ring {
        width: 175px;
        height: 175px;
    }

    .jh-face-ring svg {
        width: 135px;
    }

    .jh-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .jh-stat {
        padding: 14px 9px;
    }

    .jh-stat-label {
        font-size: 9px;
        letter-spacing: .5px;
    }

    .jh-stat-value {
        font-size: clamp(23px, 5vw, 34px);
    }

    .jh-stat-caption {
        font-size: 10px;
    }

    .jh-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .jh-panel {
        min-width: 0;
        padding: 17px;
    }

    .jh-terminal-panel {
        padding: 0;
    }

    .jh-terminal-output {
        min-height: 220px;
        max-height: 320px;
    }

    .jh-command-form input {
        min-width: 0;
        font-size: 16px;
    }

    .jh-form input {
        font-size: 16px;
    }

    footer {
        font-size: 10px;
        text-align: center;
    }
}

/* SMARTPHONE STRETTI */

@media (max-width: 390px) {

    .navigation .nav-item {
        padding: 9px 11px;
    }

    .stats-grid {
        gap: 8px;
    }

    .stat-card {
        padding: 13px 10px;
    }

    .jh-stats {
        grid-template-columns: 1fr;
    }

    .jh-stat {
        padding: 17px;
    }

    .jh-actions {
        flex-direction: column;
    }

    .jh-actions .jh-button {
        width: 100%;
    }

    .jh-terminal-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ACCESSIBILITÀ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}