/* Ensure main content grows to push footer down on mobile */
    .dashboard-main-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
/* pro-dashboard-mob.css */
/* Responsive styles for Professional Dashboard (mobile-first) */

@media (max-width: 900px) {
    /* General body/layout */
    html, body {
        height: 100%;
        min-height: 100%;
    }
    body {
        font-size: 1rem;
        background: #f7f8fa;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .main-content {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .main-footer {
        background: #1b2531;
        color: #fff;
        width: 100%;
        font-family: inherit;
        font-size: 1rem;
        margin-top: 0;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: 0;
        border-top: none;
    }
    .footer-top-bar {
        height: 12px;
        background: #00c6a2;
        width: 100%;
    }
    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2.5rem 1.2rem 1.2rem 1.2rem;
    }
    .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 2.5rem 3.5rem;
        justify-content: flex-start;
        margin-bottom: 2.2rem;
    }
    .footer-col {
        min-width: 180px;
        flex: 1 1 180px;
    }
    .footer-col-title {
        font-weight: 700;
        font-size: 1.09rem;
        margin-bottom: 1.1rem;
        color: #fff;
    }
    .footer-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-col ul li {
        margin-bottom: 0.7rem;
    }
    .footer-col ul li a {
        color: #cfd8e3;
        text-decoration: none;
        font-size: 1.01rem;
        transition: color 0.18s;
    }
    .footer-col ul li a:hover {
        color: #00c6a2;
    }
    .footer-socials {
        display: flex;
        gap: 0.7rem;
        margin-bottom: 1.1rem;
    }
    .footer-socials a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #232f3e;
        border-radius: 6px;
        width: 34px;
        height: 34px;
        transition: background 0.18s;
    }
    .footer-socials a:hover {
        background: #00c6a2;
    }
    .footer-socials img {
        width: 22px;
        height: 22px;
        opacity: 0.85;
    }
    .footer-contact {
        margin-top: 0.7rem;
    }
    .footer-contact-title {
        font-weight: 600;
        font-size: 1.01rem;
        margin-bottom: 0.3rem;
        color: #fff;
    }
    .footer-email, .footer-phone {
        color: #cfd8e3;
        text-decoration: none;
        font-size: 1.01rem;
        transition: color 0.18s;
    }
    .footer-email:hover, .footer-phone:hover {
        color: #00c6a2;
    }
    .footer-divider {
        border: none;
        border-top: 1px solid #263142;
        margin: 2.2rem 0 1.2rem 0;
    }
    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
    }
    .footer-brand {
        display: flex;
        align-items: center;
        font-size: 1.18rem;
        font-weight: 700;
        color: #00c6a2;
        letter-spacing: -1px;
        margin-bottom: 0;
    }
    .footer-brand img {
        width: 28px;
        height: 28px;
        margin-right: 8px;
        vertical-align: middle;
    }
    .footer-brand-name {
        color: #00c6a2;
        font-weight: 700;
        font-size: 1.18rem;
    }
    .footer-links-bottom {
        display: flex;
        gap: 1.1rem;
        flex-wrap: wrap;
        margin-top: 0;
    }
    .footer-link {
        color: #cfd8e3;
        text-decoration: none;
        font-size: 1.01rem;
        transition: color 0.18s;
    }
    .footer-link:hover {
        color: #00c6a2;
    }
    .footer-copyright {
        color: #cfd8e3;
        font-size: 0.98rem;
    }
    @media (max-width: 900px) {
        .footer-links {
            flex-direction: column;
            gap: 2rem 0;
        }
        .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.7rem;
        }
    }

    .main-header {
        padding: 0.5rem 0.7rem;
        min-height: 60px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .main-header-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        display: flex;
        gap: 0.5rem;
    }
    .main-header-logo img.logo {
        height: 62px !important;
        width: auto;
    }
    .material-icons.dashboard-header-icon {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin-left: 45px;
    }
    .dashboard-header-profile-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-right: 30px;
    }
    .dashboard-header-avatar,
    .dashboard-side-menu-avatar {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        background: #e0e7ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: #222;
        overflow: hidden;
    }
    .dashboard-header-name,
    .side-menu-profile-name {
        display: none;
    }
    .dashboard-header-icon-btn {
        background: none;
        border: none;
        padding: 0.2rem;
        margin: 0 0.1rem;
        cursor: pointer;
    }
    .dashboard-header-icon {
        font-size: 1.5rem;
    }

    /* Notification panel */
    #notificationPanel {
        right: 0;
        left: -50px;
        min-width: 90vw;
        max-width: 98vw;
        top: 40px;
        font-size: 1rem;
        padding: 0.7rem 0.5rem;
    }

    
    
    /* Style for locked icon in side menu and header on mobile */
    .material-icons.locked-icon {
        color: #b0b8c1;
        font-size: 1.5rem;
        vertical-align: middle;
        opacity: 0.7;
        margin-bottom: 0.1rem;
        transition: color 0.18s;
        position: absolute;
        right: 2px;
        top: 2px;
        z-index: 2;
        pointer-events: none;
    }
    .side-menu-link.locked .material-icons.locked-icon {
        color: #b0b8c1;
        opacity: 0.5;
    }
    .side-menu-link {
        position: relative;
    }

    /* Dashboard layout */
    .dashboard-layout {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: #f7f8fa;
    }

    /* Side menu as bottom nav */
    .dashboard-side-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100vw;
        height: 160px;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        z-index: 100;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 0;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
    }
    .dashboard-side-menu-profile-group,
    .side-menu-profile-name {
        display: none !important;
    }
    .dashboard-side-menu-nav {
        width: 100%;
        height: 100%;
    }
    .side-menu-list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0 6px;
        width: 100vw;
        gap: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .side-menu-link {
        flex: 1 1 0;
        min-width: 0;
        max-width: 70px;
        box-sizing: border-box;
    }
    .side-menu-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: #222;
        padding: 0.2rem 0.5rem;
        height: 100%;
        width: 60px;
        text-align: center;
        border-radius: 0;
        background: none;
        border: none;
    }
    .side-menu-link .side-menu-icon {
        font-size: 1.5rem;
        margin-bottom: 0.1rem;
    }
    .side-menu-link-text {
        font-size: 0.7rem;
        margin: 0;
        padding: 0;
        display: block;
    }
    .side-menu-link.locked {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Hide logout from bottom nav, keep in header menu */
    #sideMenuLogout {
        display: none !important;
    }

    /* Main content area */
    .dashboard-main-content {
        margin: 0;
        padding: 1rem 0.5rem 4.5rem 0.5rem; /* bottom padding for nav */
        width: 100vw;
        min-height: 80vh;
        box-sizing: border-box;
    }

    /* Dashboard welcome */
    .dashboard-welcome {
        padding: 0.5rem 0.2rem 0.7rem 0.2rem;
        text-align: left;
    }
    .dashboard-welcome-title {
        font-size: 1.2rem;
        margin-bottom: 0.2rem;
    }
    .dashboard-welcome-sub {
        font-size: 1rem;
        color: #555;
    }

    /* Stats row */
    .dashboard-stats-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-bottom: 1.2rem;
        justify-content: flex-start;
    }
    .dashboard-stat-card {
        flex: 1 1 45%;
        min-width: 140px;
        max-width: 48vw;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        padding: 0.7rem 0.8rem;
        margin: 0;
        font-size: 0.98rem;
    }
    .dashboard-stat-label {
        font-size: 0.95rem;
        color: #666;
        margin-bottom: 0.2rem;
    }
    .dashboard-stat-value {
        font-size: 1.15rem;
        font-weight: 700;
        color: #222;
    }
    .dashboard-stat-desc {
        font-size: 0.85rem;
        color: #888;
        font-weight: 400;
    }

    /* Plan card */
    .dashboard-plan-card {
        background: #e0e7ff;
        border-radius: 8px;
        padding: 1rem 0.8rem;
        margin: 1rem 0 1.2rem 0;
        text-align: left;
    }
    .dashboard-plan-label {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }
    .dashboard-plan-desc {
        font-size: 0.95rem;
        color: #444;
        margin-bottom: 0.5rem;
    }
    .dashboard-plan-upgrade-btn {
        width: 100%;
        padding: 0.7rem 0;
        font-size: 1.08rem;
        border-radius: 7px;
        background: #00c6a2;
        color: #fff;
        border: none;
        font-weight: 600;
        margin-top: 0.3rem;
        cursor: pointer;
    }

    /* Recent leads section */
    .dashboard-recent-leads-section {
        margin: 1.2rem 0 0.5rem 0;
        padding: 0.7rem 0.2rem;
        background: #fff;
        border-radius: 8px;
    }
    .dashboard-leads-header {
        padding: 0 0.2rem;
        margin-bottom: 0.5rem;
    }
    .dashboard-leads-title {
        font-size: 1.08rem;
        margin-bottom: 0.2rem;
    }
    .dashboard-leads-desc {
        font-size: 0.95rem;
        margin-bottom: 0.2rem;
    }
    .dashboard-recent-leads-row,
    .dashboard-leads-row {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        width: 100%;
    }
    .dashboard-recent-lead-card {
        padding: 1rem 0.7rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        background: #f7f8fa;
        font-size: 0.98rem;
    }

    /* Upgrade prompt */
    #upgradePromptContainer {
        margin-top: 1rem;
        text-align: center;
    }

    /* Leads section */
    #leads-section .dashboard-leads-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    #leads-section .dashboard-leads-viewall {
        font-size: 0.95rem;
        margin-top: 0.2rem;
        display: inline-block;
    }
    #leads-section select#serviceTypeFilter {
        width: 100%;
        margin-top: 0.5rem;
        font-size: 1rem;
    }
    .dashboard-leads-best-practice {
        font-size: 0.95rem;
        padding: 0.7rem 0.7rem;
        margin: 1rem 0;
    }

    /* Profile section */
    #profileEditContainer {
        padding: 0.5rem 0.2rem;
    }

    /* Billing section */
    .dashboard-billing-header {
        padding: 0.5rem 0.2rem;
    }
    .dashboard-billing-title {
        font-size: 1.1rem;
    }
    .dashboard-billing-desc {
        font-size: 0.95rem;
    }

    /* Chat section */
    .dashboard-chat-container {
        flex-direction: column;
        padding: 0;
        background: #fffbe7;
        border-radius: 8px;
        overflow: hidden;
    }
    .chat-thread-list {
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        border-radius: 0;
        border-bottom: 1px solid #e0e0e0;
        padding: 0.7rem 0.2rem;
        background: #fff;
    }
    .chat-thread-list-title {
        font-size: 1.05rem;
        margin-bottom: 0.5rem;
    }
    .chat-thread-list-items {
        max-height: 120px;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
    }
    .chat-main-area {
        width: 100vw;
        min-width: 0;
        background: #e0e7ff;
        padding: 0.7rem 0.2rem;
        border-radius: 0;
    }
    .chat-active-title {
        font-size: 1rem;
        color: #444;
        margin-bottom: 0.5rem;
    }

    /* Hiring section */
    .dashboard-hiring-header {
        padding: 0.5rem 0.2rem;
    }
    .dashboard-hiring-title {
        font-size: 1.1rem;
    }
    .dashboard-hiring-desc,
    .dashboard-hiring-howitworks {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    #hiringRequestForm {
        max-width: 100vw;
        padding: 1rem 0.2rem;
        border-radius: 8px;
        margin: 0.7rem 0;
    }
    #hiringRequestForm input,
    #hiringRequestForm select,
    #hiringRequestForm textarea {
        font-size: 1rem;
        padding: 0.5rem;
        border-radius: 6px;
        width: 100%;
        margin-bottom: 0.7rem;
    }
    #hiringRequestForm button[type="submit"] {
        width: 100%;
        padding: 0.7rem 0;
        font-size: 1.05rem;
        border-radius: 7px;
        margin-top: 0.3rem;
    }
}

/* Extra small screens (<= 480px) */
@media (max-width: 480px) {
    .dashboard-stat-card {
        min-width: 120px;
        max-width: 100vw;
        font-size: 0.95rem;
        padding: 0.6rem 0.5rem;
    }
    .dashboard-main-content {
        padding: 0.7rem 0.1rem 4.5rem 0.1rem;
    }
    .dashboard-plan-card {
        padding: 0.7rem 0.5rem;
    }
    .dashboard-recent-lead-card {
        padding: 0.7rem 0.4rem;
    }
    .chat-main-area,
    .chat-thread-list {
        padding: 0.5rem 0.1rem;
    }
    #hiringRequestForm {
        padding: 0.7rem 0.1rem;
    }
}

/* Hide scrollbars for horizontal chat threads on mobile */
@media (max-width: 900px) {
    .chat-thread-list-items {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .chat-thread-list-items::-webkit-scrollbar {
        display: none;
    }
}