/* Shared shell only. Desktop styling stays in the existing stylesheets. */
.crm-nav-control,
.crm-nav-backdrop {
    display: none;
}

@media screen and (max-width: 767px) {
    .app-layout.crm-responsive {
        height: 100vh;
        height: 100dvh;
    }

    .crm-responsive .new-main-wrap {
        margin-right: 0;
        min-width: 0;
    }

    .app-layout.crm-responsive .new-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 44px;
        gap: 8px;
        padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
        min-height: 56px;
    }

    .app-layout.crm-responsive .new-topbar-appname { display: none; }

    .app-layout.crm-responsive .new-topbar-search {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    .crm-responsive .new-topbar-search input { font-size: 16px; }

    .app-layout.crm-responsive .new-topbar-right {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        gap: 2px;
    }

    .crm-responsive .new-topbar-icon {
        width: 44px;
        height: 44px;
    }

    .crm-responsive .crm-nav-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        padding: 0;
        border: 1px solid var(--g200);
        border-radius: 8px;
        background: #fff;
        color: var(--orange);
        cursor: pointer;
        font-size: 26px;
    }

    .crm-responsive #crmNavToggle { grid-column: 3; grid-row: 1; }
    .crm-responsive #crmNavClose { align-self: flex-start; }

    .app-layout.crm-responsive .new-sidebar {
        width: min(280px, calc(100vw - 48px));
        height: 100vh;
        height: 100dvh;
        padding: 12px 12px max(12px, env(safe-area-inset-bottom));
        align-items: stretch;
        visibility: hidden;
        pointer-events: none;
        z-index: 1001;
    }

    .app-layout.crm-responsive .new-sidebar-item {
        width: 100%;
        height: auto;
        min-height: 48px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 12px;
        gap: 12px;
        font-size: 14px;
    }

    .app-layout.crm-responsive.crm-nav-open .new-sidebar {
        visibility: visible;
        pointer-events: auto;
    }

    .crm-responsive.crm-nav-open .crm-nav-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, .3);
        z-index: 1000;
    }

    .crm-responsive.crm-nav-open .new-page-content { overflow: hidden; }

    .crm-responsive .topbar-popup,
    .crm-responsive .search-dropdown {
        position: fixed;
        top: 60px;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        width: auto;
        max-width: none;
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

    .crm-responsive .new-page-content {
        min-width: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Landscape phones and short desktop windows also need a reachable footer. */
@media screen and (max-height: 600px) {
    .crm-responsive .topbar-popup {
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }
}

.crm-responsive .crm-nav-control:focus-visible,
.crm-responsive .new-sidebar-item:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}