/* Responsive refinements for the IBG Pipeline CRM. */

@media (max-width: 1100px) {
    .executive-filter-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .executive-kpis {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

@media (max-width: 900px) {
    .content {
        padding: 14px;
    }

    .topbar {
        gap: 12px;
        align-items: flex-start;
    }

    .topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .executive-head {
        margin-top: 22px;
    }

    .executive-filter-bar.is-collapsed .executive-filter-grid {
        display: none;
    }

    .executive-filter-bar.is-collapsed .filter-title {
        margin-bottom: 0;
    }

    .professional-table {
        min-width: 760px;
    }
}

@media (max-width: 680px) {
    .premium-login-shell,
    .login-shell {
        grid-template-columns: 1fr;
    }

    .premium-login-intro {
        padding: 32px 26px;
    }

    .premium-login-card,
    .login-card {
        padding: 26px;
    }

    .mfa-code-input {
        font-size: 22px;
        letter-spacing: 6px;
    }

    .btn {
        width: 100%;
    }
}

/* Main CRM shell responsive navigation. Loaded after style.css to normalize older sidebar rules. */
.mobile-menu-label {
    display: none;
}

@media (min-width: 1025px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .content,
    body.sidebar-collapsed .content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 14px !important;
    }

    .topbar {
        position: sticky;
        top: 8px;
        z-index: 1030;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        padding: 9px 10px !important;
        border-radius: 12px !important;
    }

    .topbar-left {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .topbar-left > div {
        min-width: 0;
    }

    .topbar strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-actions {
        flex: 0 0 auto;
        min-width: 0;
        margin-left: 0 !important;
        max-width: 46vw;
    }

    .logout-btn {
        display: none !important;
    }

    .user-pill {
        max-width: 42vw;
        min-width: 0;
    }

    .user-pill span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu-btn {
        display: inline-flex !important;
        position: relative;
        z-index: 1;
        min-width: 36px;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid #D7E0EA !important;
        border-radius: 9px;
        background: #FFFFFF !important;
        color: #0F3557 !important;
        box-shadow: none !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        padding: 0 9px;
    }

    .mobile-menu-btn:hover {
        border-color: #B8C7D6 !important;
        background: #F8FAFC !important;
        color: #0B2B49 !important;
    }

    .mobile-menu-btn .sidebar-icon {
        width: 17px;
        height: 17px;
        color: currentColor;
    }

    .mobile-menu-label {
        display: inline-block;
    }

    .app-sidebar.sidebar,
    body.sidebar-collapsed .app-sidebar.sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1080;
        display: flex;
        width: min(286px, 86vw) !important;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 14px 10px !important;
        overflow: hidden;
        transform: translateX(-105%) !important;
        transition: transform .22s ease;
    }
}

@media (max-width: 760px) {
    .topbar-actions .user-pill {
        display: none;
    }

    .topbar-left {
        width: 100%;
    }

    .topbar-left > div {
        flex: 1 1 auto;
    }

    .mobile-menu-label {
        display: none;
    }
}

@media (min-width: 761px) and (max-width: 1024px) {
    .mobile-menu-label {
        display: inline-block;
    }
}

@media (max-width: 1024px) {
    .app-sidebar .sidebar-close {
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .sidebar-nav-label {
        margin-top: 12px;
    }

    .mobile-backdrop {
        background: rgba(12, 31, 48, .38);
        backdrop-filter: none;
    }
}

@media (max-width: 1024px) {
    .app-sidebar.sidebar,
    body.sidebar-collapsed .app-sidebar.sidebar {
        width: min(286px, 86vw) !important;
        padding: 14px 10px !important;
    }
}

@media (max-width: 1024px) {
    .mobile-menu-btn {
        border-color: #D7E0EA !important;
        background: #FFFFFF !important;
        color: #0F3557 !important;
    }

    body.sidebar-open .app-sidebar.sidebar,
    body.sidebar-open.sidebar-collapsed .app-sidebar.sidebar {
        transform: translateX(0) !important;
    }

    .app-sidebar .sidebar-head {
        flex: 0 0 auto;
    }

    .app-sidebar .sidebar-close {
        display: inline-grid !important;
        min-width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 8px;
        color: #fff;
    }

    .app-sidebar .sidebar-toggle {
        display: none !important;
    }

    .sidebar-section {
        flex: 1 1 auto;
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 12px;
    }

    .app-sidebar .sidebar-logout {
        flex: 0 0 auto;
    }

    .sidebar-section > .sidebar-link-main.active,
    .sidebar-link.active,
    .sidebar-group.is-active > .sidebar-group-header {
        background: rgba(255, 255, 255, .075) !important;
        box-shadow: inset 2px 0 0 rgba(86, 167, 220, .95) !important;
    }

    body.sidebar-collapsed .sidebar-brand {
        justify-content: flex-start !important;
    }

    body.sidebar-collapsed .sidebar-brand-copy {
        display: grid !important;
    }

    body.sidebar-collapsed .sidebar-group-label span,
    body.sidebar-collapsed .sidebar-link span,
    body.sidebar-collapsed .app-sidebar .sidebar-logout span {
        display: inline !important;
    }

    body.sidebar-collapsed .sidebar-group-header > .sidebar-icon:last-child {
        display: block !important;
    }

    body.sidebar-collapsed .sidebar-submenu:not([hidden]) {
        display: grid !important;
    }

    body.sidebar-collapsed .sidebar-group-header,
    body.sidebar-collapsed .sidebar-link-main,
    body.sidebar-collapsed .app-sidebar .sidebar-logout {
        justify-content: flex-start !important;
    }

    body.sidebar-collapsed .sidebar-group-header:hover::after,
    body.sidebar-collapsed .sidebar-link-main:hover::after,
    body.sidebar-collapsed .app-sidebar .sidebar-logout:hover::after {
        display: none !important;
    }

    .mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1070;
        display: none;
        background: rgba(12, 31, 48, .38);
        backdrop-filter: none;
    }

    body.sidebar-open .mobile-backdrop {
        display: block;
    }
}

@media (max-width: 560px) {
    .content,
    body.sidebar-collapsed .content {
        padding: 10px !important;
    }

    .topbar {
        gap: 8px;
    }

    .topbar strong {
        font-size: 14px;
    }

    .topbar small {
        display: none !important;
    }

    .user-pill {
        max-width: 40vw;
        padding: 6px 9px;
    }
}

@media (max-width: 390px) {
    .mobile-menu-label {
        display: none;
    }

    .user-pill {
        max-width: 38vw;
    }
}