/* Compact application shell for phones. Desktop header/navigation remains
   unchanged; at the mobile breakpoint the closed shell is exactly one row. */
.mobile-nav__toggle {
    display: none;
}

@media (max-width: 768px) {
    .site_header .top {
        min-height: 58px;
        padding: 7px 12px;
        box-shadow: 0 1px 0 rgba(29, 56, 48, .09);
    }

    .site_header .title,
    .site_header .logo,
    .site_header .user {
        flex: 1 1 0;
        min-width: 0;
    }

    .site_header .title {
        align-items: center;
        justify-content: flex-start;
    }

    .site_header .title > a,
    .site_header .title > h1 {
        display: none;
    }

    .mobile-nav__toggle {
        display: inline-grid;
        width: 40px;
        height: 40px;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #293c37;
        font-size: 21px;
        cursor: pointer;
    }

    .mobile-nav__toggle:hover,
    .mobile-nav__toggle:focus-visible {
        outline: none;
        background: #edf7f2;
    }

    .mobile-nav__toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mobile-nav__close-icon {
        display: none;
    }

    body.mobile-nav-open .mobile-nav__open-icon {
        display: none;
    }

    body.mobile-nav-open .mobile-nav__close-icon {
        display: inline-block;
    }

    .site_header .logo {
        justify-content: center;
    }

    .site_header .logo svg,
    .site_header .logo img {
        width: 108px;
        height: auto;
    }

    .site_header .user {
        justify-content: flex-end;
        gap: 0;
    }

    .site_header .user .name {
        display: none;
    }

    .site_header .profile-context-dropdown .context-menu-trigger,
    .site_header .profile-context-dropdown .context-menu-trigger img,
    .site_header .profile-context-dropdown .context-menu-trigger .name_circle {
        width: 40px;
        height: 40px;
    }

    .site_header .site_nav {
        display: none;
        height: auto;
        min-height: 0;
        padding: 0;
        border-bottom: 0;
        background: #fff;
    }

    body .site_header .site_nav.mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        min-height: 0;
        padding: 10px 12px;
        border-top: 1px solid #edf1ef;
        border-bottom: 1px solid #dce8e3;
        background: #f8fbfa;
    }

    body .site_header .site_nav.mobile > a {
        display: flex;
        min-height: 38px;
        max-width: none;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 8px 11px;
        border-radius: 7px;
        color: #30423d;
        font-size: 13px;
        text-align: left;
    }

    body .site_header .site_nav.mobile > a.current {
        background: #e5f5ed;
        color: #176b4c;
        font-weight: 700;
    }

    body .site_header .site_nav.mobile > a.current::after {
        display: none;
    }

    #activity-search-pill.activity_search_pill {
        display: none;
        max-width: none;
        margin: 0;
    }

    body.mobile-nav-open #activity-search-pill.activity_search_pill {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 12px 12px;
        border-bottom: 1px solid #dce8e3;
        border-radius: 0;
        background: #f8fbfa;
        box-shadow: none;
    }

    #activity-search-pill .activity_search_pill__divider,
    #activity-search-pill .activity_rows_selector {
        display: none;
    }

    #activity-search-pill .activity_search {
        width: auto;
        min-width: 0;
        margin: 0;
    }

    #activity-search-pill .search_control,
    #activity-search-pill .e-input-group {
        width: 100%;
        min-width: 0;
    }

    #activity-search-pill .search_control {
        position: relative;
    }

    #activity-search-pill input {
        min-width: 0;
        padding-right: 36px !important;
        font-size: 14px;
    }

    #activity-search-pill .search_control > .icon-search {
        position: absolute;
        top: 50% !important;
        right: 11px !important;
        width: 14px;
        height: 14px;
        margin: 0;
        font-size: 14px;
        line-height: 14px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    #dashboard-app.cards {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto !important;
        gap: 14px;
        padding: 12px 12px 18px;
    }

    #dashboard-app.cards .card_wrapper {
        padding-top: 0;
        /* One stable phone viewport per location card. Do not subtract a
           guessed shell height: iOS standalone/Safari/tunneled browser modes
           report different viewport insets, which produced the tiny cards in
           the previous attempt. The page can scroll between cards while each
           card's activity list scrolls internally. */
        height: 100vh;
        height: 100svh;
    }

    #dashboard-app.cards .card_wrapper > .card {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }
}