/*
 * MECHART responsive stability layer v5
 * Loaded after market.css / layout.css / brand-fix.css.
 *
 * Contract:
 *   >= 961px : desktop. Vertical left sidebar, one-row header.
 *   <= 960px : compact/tablet. Horizontal navigation below header.
 *   <= 640px : mobile. Horizontal nav scrolls; it never stacks vertically.
 *
 * This file intentionally uses !important for geometry only because the
 * existing stylesheets contain several overlapping legacy media queries.
 */

/* ---------------------------------------------------------
   Global geometry safeguards
   --------------------------------------------------------- */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
}

.app,
.body-grid,
.workspace,
.app-view,
.main-content,
.home-dashboard {
    min-width: 0 !important;
    max-width: 100% !important;
}

.topbar {
    width: 100% !important;
    box-sizing: border-box !important;
}

.topbar .brand,
.topbar .control-select,
.topbar .profile-menu-wrap,
.topbar .guest-profile {
    flex: 0 0 auto !important;
}

.topbar-spacer {
    min-width: 0 !important;
}

.profile-menu-wrap {
    min-width: 0 !important;
}

/* Google button: keep the same width as the primary login button. */
.auth-google-form,
.auth-google {
    width: 100% !important;
}

/* ---------------------------------------------------------
   DESKTOP — one stable state
   --------------------------------------------------------- */
@media (min-width: 961px) {
    :root {
        --app-header-height: 60px !important;
    }

    .topbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        height: 60px !important;
        min-height: 60px !important;
        gap: clamp(8px, 1.25vw, 20px) !important;
        padding: 0 clamp(12px, 1.6vw, 24px) !important;
    }

    .topbar .brand {
        order: 0 !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    .topbar .search-box-wrap {
        order: 1 !important;
        flex: 1 1 360px !important;
        width: auto !important;
        min-width: 160px !important;
        max-width: 520px !important;
    }

    body.mechart-home .topbar .search-box-wrap {
        display: none !important;
    }

    .topbar-spacer {
        display: block !important;
        order: 2 !important;
        flex: 1 1 auto !important;
    }

    .topbar .control-select {
        order: 3 !important;
        width: auto !important;
        min-width: 96px !important;
        max-width: 124px !important;
        margin-left: 0 !important;
    }

    .topbar .profile-menu-wrap,
    .topbar .guest-profile {
        order: 4 !important;
        margin-left: 0 !important;
    }

    .topbar .profile-button,
    .topbar .guest-profile {
        max-width: 180px !important;
    }

    .body-grid {
        display: grid !important;
        grid-template-columns: var(--app-sidebar-width, 230px) minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .left-sidebar {
        position: sticky !important;
        top: 60px !important;
        width: auto !important;
        height: calc(100dvh - 60px) !important;
        padding: 16px 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-right: 1px solid rgba(255,255,255,.05) !important;
        border-bottom: 0 !important;
    }

    .left-sidebar .main-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    .left-sidebar .main-nav .pro-badge,
    .left-sidebar .main-nav .beta-badge,
    .left-sidebar .main-nav .coming-soon-badge {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    .workspace {
        grid-column: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Narrow desktop: keep exactly the desktop state, only reduce dimensions. */
@media (min-width: 961px) and (max-width: 1280px) {
    :root {
        --app-sidebar-width: 190px !important;
    }

    .topbar .profile-button,
    .topbar .guest-profile {
        max-width: 150px !important;
    }

    .topbar .profile-copy strong,
    .topbar .profile-copy small {
        max-width: 92px !important;
    }
}

/* ---------------------------------------------------------
   TABLET / COMPACT — switch ONCE at 960px
   --------------------------------------------------------- */
@media (max-width: 960px) {
    :root {
        --app-header-height: 60px !important;
    }

    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 400 !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) max-content max-content !important;
        grid-template-rows: 60px !important;
        align-items: center !important;
        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }

    .topbar .brand {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .topbar-spacer {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .topbar .control-select {
        display: inline-flex !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: 108px !important;
        min-width: 0 !important;
        max-width: 108px !important;
        margin: 0 !important;
    }

    .topbar .profile-menu-wrap,
    .topbar .guest-profile {
        display: block !important;
        grid-column: 4 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .topbar .profile-button,
    .topbar .guest-profile {
        display: inline-flex !important;
        max-width: 168px !important;
    }

    /* Home dashboard uses its own large search card, so the header stays one row. */
    body.mechart-home .topbar .search-box-wrap {
        display: none !important;
    }

    /* Non-home views may still need the global search: put it below the header
       without altering the home dashboard geometry. */
    body:not(.mechart-home) .topbar {
        grid-template-rows: 60px auto !important;
        height: auto !important;
        min-height: 108px !important;
        padding-bottom: 8px !important;
    }

    body:not(.mechart-home) .topbar .search-box-wrap {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        order: initial !important;
    }

    body:not(.mechart-home) .topbar .search-box {
        width: 100% !important;
        max-width: none !important;
    }

    .body-grid {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .left-sidebar {
        position: sticky !important;
        top: 60px !important;
        z-index: 250 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 12px !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        background: rgba(7,12,24,.97) !important;
    }

    body:not(.mechart-home) .left-sidebar {
        top: 108px !important;
    }

    .left-sidebar .main-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }

    .left-sidebar .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        justify-content: flex-start !important;
        padding: 9px 12px !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    .left-sidebar .main-nav .beta-badge,
    .left-sidebar .main-nav .coming-soon-badge,
    .left-sidebar .main-nav .pro-badge {
        margin-left: 6px !important;
    }

    .left-sidebar .market-toggle .market-arrow {
        margin-left: 6px !important;
    }

    .left-sidebar .favorite-section,
    .left-sidebar .sidebar-ad {
        display: none !important;
    }

    .workspace {
        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .main-content,
    .calendar-main,
    .portfolio-main {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .market-secondary-panel {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ---------------------------------------------------------
   MOBILE — never stack the main nav vertically
   --------------------------------------------------------- */
@media (max-width: 640px) {
    .topbar {
        grid-template-columns: max-content minmax(0, 1fr) max-content max-content !important;
        gap: 6px !important;
        padding-inline: 8px !important;
    }

    .topbar .brand {
        min-width: 0 !important;
    }

    .topbar .brand-mark {
        flex: 0 0 34px !important;
    }

    .topbar .brand > span:last-child {
        display: block !important;
        min-width: 0 !important;
    }

    .topbar .brand small {
        display: none !important;
    }

    .topbar .brand strong {
        font-size: 13px !important;
    }

    .topbar .control-select {
        width: 96px !important;
        max-width: 96px !important;
        padding-inline: 7px !important;
    }

    .topbar .profile-copy {
        display: none !important;
    }

    .topbar .profile-button,
    .topbar .guest-profile {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        justify-content: center !important;
        padding-inline: 5px !important;
    }

    .topbar .profile-button .profile-chevron,
    .topbar .guest-profile > span:last-child {
        display: none !important;
    }

    .left-sidebar {
        padding-inline: 8px !important;
    }

    /* Horizontal scrolling is preferable to a 2-row/4-row menu that covers content. */
    .left-sidebar .main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .left-sidebar .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 116px !important;
        max-width: 150px !important;
        justify-content: center !important;
    }

    .main-content,
    .calendar-main,
    .portfolio-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 420px) {
    .topbar .brand > span:last-child {
        display: none !important;
    }

    .topbar .control-select {
        width: 88px !important;
        max-width: 88px !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        min-width: 108px !important;
    }
}

/* Profile dropdown always anchors to the right edge of its trigger. */
.profile-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px) !important;
}


/* MECHART compact navigation alignment v6.0
   Keep the second-row navigation on one left-aligned visual axis. */
@media (max-width: 960px) {
    .left-sidebar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .left-sidebar .main-nav {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    .left-sidebar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* MECHART header/nav alignment v6.1
   Keep the second-row navigation visually centered as one group,
   while badges stay attached to their menu labels. */
@media (max-width: 960px) {
    .left-sidebar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .left-sidebar .main-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
        width: 100% !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 9px 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    .left-sidebar .main-nav .beta-badge,
    .left-sidebar .main-nav .coming-soon-badge,
    .left-sidebar .main-nav .pro-badge {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 8px !important;
        flex: 0 0 auto !important;
    }

    .left-sidebar .market-toggle .market-arrow {
        margin-left: 8px !important;
    }
}

@media (max-width: 720px) {
    .left-sidebar .main-nav {
        gap: 18px !important;
    }
}

@media (max-width: 600px) {
    .left-sidebar .main-nav {
        justify-content: flex-start !important;
        gap: 18px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .left-sidebar .main-nav::-webkit-scrollbar {
        display: none !important;
    }
}


/* MECHART commercial-style header navigation v6.2
   Four navigation groups share the same visual column width.
   BETA / 준비 중 remain attached to their own menu labels. */
@media (min-width: 601px) and (max-width: 960px) {
    .left-sidebar {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .left-sidebar .main-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 14px !important;
        width: min(680px, 100%) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px 6px !important;
        margin: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    .left-sidebar .main-nav .beta-badge,
    .left-sidebar .main-nav .coming-soon-badge,
    .left-sidebar .main-nav .pro-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        margin-left: 7px !important;
    }

    .left-sidebar .market-toggle .market-arrow {
        margin-left: 7px !important;
        flex: 0 0 auto !important;
    }
}

/* Narrow phones: preserve readability instead of squeezing labels. */
@media (max-width: 600px) {
    .left-sidebar .main-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 22px !important;
        width: 100% !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        padding: 0 4px !important;
    }

    .left-sidebar .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .left-sidebar .main-nav > *,
    .left-sidebar .nav-item,
    .left-sidebar .market-toggle {
        flex: 0 0 auto !important;
        width: auto !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
}