/* Keeps the existing desktop drawer layout unchanged. */
.mobile-side-nav-toggle,
.mobile-drawer-backdrop {
    display: none;
}

.mobile-nav-links {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

    .mobile-nav-links > .Primary-side-nav-menu {
        width: 100%;
    }

@media (min-width: 481px) and (max-width: 900px) {
    :root {
        --vw-viewport: 768;
    }
}

@media (max-width: 480px) {
    :root {
        --vw-viewport: 390;
    }
}

@media (max-width: 900px) {
    :root {
        --mobile-navbar-height: 64px;
        --mobile-page-padding: 16px;
        --Primary-font-size: 1.5rem;
        --Secondry-font-size: 1rem;
        --Third-font-size: 1.25rem;
        --Fourth-font-size: 1.125rem;
        --Fifth-font-size: 1rem;
        --Sixs-font-size: 0.9375rem;
        --Seventh-font-size: 0.875rem;
        --Eighth-font-size: 0.8125rem;
        --Ninth-font-size: 0.75rem;
        --Tenth-font-size: 1.625rem;
        --Primary-line-height: 2rem;
        --Secondry-line-height: 1.5rem;
        --Third-line-height: 1.75rem;
        --Fourth-line-height: 1.625rem;
        --Fifth-line-height: 1.5rem;
        --Sixs-line-height: 1.375rem;
        --Seventh-line-height: 1.25rem;
        --Eighth-line-height: 1.125rem;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    img,
    video,
    svg {
        max-width: 100%;
    }

    button,
    a,
    input,
    textarea,
    select {
        touch-action: manipulation;
    }

    .page,
    main,
    .Main-dash-layout,
    .Primary-nav-Drawer-container,
    .Dash-layout-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .page {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto !important;
        flex-direction: column !important;
    }

    main,
    .Main-dash-layout {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    /* Navbar */
    .main-nav {
        position: sticky !important;
        top: 0;
        z-index: 1200;
        height: var(--mobile-navbar-height) !important;
        background: var(--Light-mode-BackGround-Color);
    }

        .main-nav .nav-layout {
            width: 100%;
            height: var(--mobile-navbar-height) !important;
            min-width: 0;
            padding: 0 12px !important;
            padding-inline-start: 68px !important;
            gap: 8px;
        }

        .main-nav .nav-logo {
            flex: 0 1 96px;
            width: 96px !important;
            height: 40px !important;
            min-width: 0;
        }

            .main-nav .nav-logo img {
                object-fit: contain;
            }

        .main-nav .nav-items {
            flex: 0 0 auto;
            width: auto !important;
            height: auto !important;
            min-width: 0;
            gap: 6px !important;
        }

            .main-nav .nav-items .mud-button {
                --custom-button-width: 36px !important;
                --custom-button-height: 36px !important;
                --custom-button-min-width: 36px !important;
                --custom-button-min-height: 36px !important;
                --custom-button-padding: 6px !important;
            }

            .main-nav .nav-items .menu-lang {
                width: 30px !important;
                height: 30px !important;
            }

            .main-nav .nav-items .mud-divider {
                display: none !important;
            }

    /* Mobile navigation toggle */
    .mobile-side-nav-toggle {
        position: fixed;
        inset-inline-start: 12px;
        top: 10px;
        z-index: 1400;
        width: 44px;
        height: 44px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 10px;
        color: var(--Third-Color);
        background: var(--Primary-Color);
        box-shadow: var(--Third-Shadow);
        cursor: pointer;
    }

        .mobile-side-nav-toggle .mud-icon-root {
            width: 26px;
            height: 26px;
        }

    .mobile-drawer-backdrop {
        position: fixed;
        inset: var(--mobile-navbar-height) 0 0;
        z-index: 1290;
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        border: 0;
        background: rgba(13, 50, 61, 0.45);
        backdrop-filter: blur(2px);
        cursor: pointer;
    }

    /* Converts the existing Mini Drawer to an off-canvas drawer on mobile. */
    .Primary-nav-Drawer-container {
        --mud-drawer-width-left: min(82vw, 320px);
        --mud-drawer-width-right: min(82vw, 320px);
        --mud-drawer-width-mini-left: min(82vw, 320px);
        --mud-drawer-width-mini-right: min(82vw, 320px);
        position: relative;
        min-height: calc(100vh - var(--mobile-navbar-height));
        min-height: calc(100dvh - var(--mobile-navbar-height));
        overflow-x: hidden;
    }

        .Primary-nav-Drawer-container .mud-drawer {
            position: fixed !important;
            top: var(--mobile-navbar-height) !important;
            bottom: 0 !important;
            z-index: 1300 !important;
            width: min(82vw, 320px) !important;
            height: calc(100vh - var(--mobile-navbar-height)) !important;
            height: calc(100dvh - var(--mobile-navbar-height)) !important;
            max-height: none !important;
            overflow: hidden !important;
            transition: transform 200ms ease, visibility 200ms ease !important;
        }

    html[dir="ltr"] .Primary-nav-Drawer-container .mud-drawer.mud-drawer--closed {
        transform: translateX(-105%) !important;
    }

    html[dir="rtl"] .Primary-nav-Drawer-container .mud-drawer.mud-drawer--closed {
        transform: translateX(105%) !important;
    }

    .Primary-nav-Drawer-container .mud-drawer.mud-drawer--closed {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .Primary-nav-Drawer-container .mud-drawer.mud-drawer--open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .Primary-nav-Drawer-container .mud-drawer .mud-drawer-content {
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }

    .Primary-nav-Drawer-container .Drawer-content {
        width: 100%;
        min-height: 100%;
        padding: 18px 12px !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .Primary-nav-Drawer-container .current-user-avatar {
        flex: 0 0 auto;
    }

    .Primary-nav-Drawer-container .Nav-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .Primary-nav-Drawer-container .Primary-side-nav-menu {
        width: 100%;
        gap: 10px !important;
        overflow-y: auto;
    }

    .Primary-nav-Drawer-container .mud-nav-link {
        min-height: 48px;
        border-radius: 8px;
    }

    .Primary-nav-Drawer-container .mud-drawer--open .mud-nav-link-text img {
        width: 28px !important;
        height: 28px !important;
    }

    .Primary-nav-Drawer-container > .Dash-layout-content,
    .Dash-layout-content {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    /* Shared page shells */
    .app-list-page,
    .app-upsert-page,
    .Main-home-page,
    .Main-notification,
    .Main-company-details,
    .Main-employee-details,
    .Main-job-details,
    .Main-Control-Panel-Page,
    .Main-Job-Structure-Page,
    .Main-user-manage-page,
    .Main-settings-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: var(--mobile-page-padding) !important;
    }

    .app-list-content,
    .app-upsert-page {
        gap: 20px !important;
    }

    /* Breadcrumbs remain inside the page instead of absolute positioning. */
    .Primary-pages-bread-crumb {
        position: static !important;
        inset: auto !important;
        width: 100%;
        max-width: 100%;
        margin: 0 0 16px !important;
        padding: 0 !important;
        overflow-x: auto;
        scrollbar-width: thin;
    }

        .Primary-pages-bread-crumb ol {
            min-width: max-content;
            flex-wrap: nowrap;
        }

    /* Section navigation cards */
    .nav-list-section {
        width: 100%;
        gap: 20px !important;
    }

        .nav-list-section .nav-list-cards {
            width: 100%;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr);
            gap: 12px !important;
        }

            .nav-list-section .nav-list-cards .nav-card {
                width: 100% !important;
                height: auto !important;
                min-height: 76px;
                padding: 12px 16px !important;
                border-radius: 10px !important;
            }

                .nav-list-section .nav-list-cards .nav-card img {
                    width: 42px !important;
                    height: 42px !important;
                    flex: 0 0 auto;
                }

    /* Home and dashboard charts */
    .Main-home-page .charts-cards-area {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .Main-home-page .growth-overview,
    .Main-home-page .Profit-overview {
        box-sizing: border-box;
        width: 100% !important;
        height: auto !important;
        min-height: 260px;
        padding: 20px 16px !important;
    }

    .Main-home-page .grow-list {
        width: 100%;
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px !important;
    }

    /* Get All manage buttons */
    .Main-table-manage-buttons {
        width: 100%;
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 10px !important;
    }

        .Main-table-manage-buttons .mud-button {
            --custom-button-width: auto !important;
            --custom-button-min-width: 0 !important;
            --custom-button-height: 44px !important;
            --custom-button-min-height: 44px !important;
            flex: 1 1 calc(50% - 5px);
            padding-inline: 12px;
        }

        .Main-table-manage-buttons .filter-column-btn {
            flex: 0 0 44px;
            --custom-button-width: 44px !important;
        }

    .app-active-filters {
        width: 100%;
        gap: 8px !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
    }

        .app-active-filters .mud-chip {
            flex: 0 0 auto;
        }

    /* Shared AppTable: scroll only the table, never the entire page. */
    .mud-table.primary-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

        .mud-table.primary-table .mud-table-container {
            width: 100%;
            max-width: 100%;
            overflow-x: auto !important;
            overscroll-behavior-inline: contain;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }

        .mud-table.primary-table .mud-table-root {
            width: max-content;
            min-width: 720px;
        }

        .mud-table.primary-table .mud-table-cell {
            max-width: 220px !important;
            padding: 10px 12px;
        }

        .mud-table.primary-table .row-cell-actions {
            gap: 8px !important;
        }

            .mud-table.primary-table .row-cell-actions .mud-button {
                --custom-button-width: 38px !important;
                --custom-button-height: 38px !important;
                --custom-button-min-width: 38px !important;
                --custom-button-min-height: 38px !important;
            }

    .mud-table-pagination {
        min-height: 56px;
        height: auto !important;
        padding: 8px !important;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }

    /* Upsert forms */
    .app-upsert-page [class^="Main-"][class$="-form"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

    .app-upsert-page .mud-form,
    .app-upsert-page .input-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .app-upsert-page .input-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .app-upsert-page .Upload-area-container {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center;
    }

    .app-upsert-page .Main-app-input,
    .app-upsert-page .Main-app-input-number,
    .app-upsert-page .Main-app-input-date,
    .app-upsert-page .Main-app-input-select,
    .app-upsert-page .mud-input-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .app-upsert-page textarea {
        max-width: 100%;
        resize: vertical;
    }

    .app-form-actions {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

        .app-form-actions .mud-button {
            --custom-button-width: 100% !important;
            --custom-button-height: 48px !important;
            --custom-button-min-height: 48px !important;
        }

    /* Filter drawer becomes an overlay instead of squeezing the table. */
    .Secondry-filter-Drawer-container {
        --mud-drawer-width-left: min(88vw, 340px);
        --mud-drawer-width-right: min(88vw, 340px);
        min-height: calc(100vh - var(--mobile-navbar-height)) !important;
        min-height: calc(100dvh - var(--mobile-navbar-height)) !important;
    }

        .Secondry-filter-Drawer-container .mud-drawer {
            position: fixed !important;
            top: var(--mobile-navbar-height) !important;
            bottom: 0 !important;
            z-index: 1350 !important;
            width: min(88vw, 340px) !important;
            height: calc(100vh - var(--mobile-navbar-height)) !important;
            height: calc(100dvh - var(--mobile-navbar-height)) !important;
            border-radius: 0 !important;
        }

        .Secondry-filter-Drawer-container .mud-drawer-content {
            top: 0 !important;
            width: 100% !important;
            height: 100% !important;
            padding: 20px 16px !important;
            overflow-y: auto !important;
        }

        .Secondry-filter-Drawer-container .Dynamic-content {
            max-height: none !important;
            overflow-y: auto !important;
        }

        .Secondry-filter-Drawer-container .Search-button {
            width: 100% !important;
            --custom-button-height: 48px !important;
        }

    .mud-drawer.mud-drawer--open ~ .mud-height-full .mud-table {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Details pages */
    .Main-company-details,
    .Main-employee-details,
    .Main-job-details {
        display: flex;
        flex-direction: column;
        gap: 20px !important;
    }

    .company-details-container,
    .employee-details-container,
    .job-details-container {
        width: 100%;
        max-width: 100% !important;
        min-width: 0;
        gap: 20px !important;
    }

    .company-profile-info-content-container,
    .company-contact-info-content-container,
    .company-state-info-content-container,
    .employee-profile-info-content-container,
    .employee-state-info-content-container,
    .job-details-info-content-container,
    .job-state-info-content-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 20px 16px !important;
        gap: 18px !important;
    }

    .Main-company-details .info-section,
    .Main-employee-details .info-section,
    .Main-job-details .info-section {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

        .Main-company-details .info-section > .mud-divider,
        .Main-employee-details .info-section > .mud-divider,
        .Main-job-details .info-section > .mud-divider {
            display: none !important;
        }

    .Main-company-details .info-list,
    .Main-employee-details .info-list,
    .Main-job-details .info-list {
        width: 100% !important;
        max-width: 100%;
        gap: 12px !important;
    }

    .Main-company-details .info-item,
    .Main-employee-details .info-item,
    .Main-job-details .info-item {
        width: 100%;
        min-width: 0;
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

        .Main-company-details .info-item .key,
        .Main-employee-details .info-item .key,
        .Main-job-details .info-item .key,
        .Main-company-details .info-item .value,
        .Main-employee-details .info-item .value,
        .Main-job-details .info-item .value {
            max-width: 100%;
            white-space: normal !important;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

    /* Dialogs and floating content */
    .mud-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 12px !important;
    }

    .mud-dialog-content {
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mud-tooltip {
        max-width: calc(100vw - 24px) !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .nav-list-section .nav-list-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .main-nav .nav-logo {
        display: none;
    }

    .main-nav .nav-items {
        margin-inline-start: auto;
    }

    .app-form-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .Primary-nav-Drawer-container .mud-drawer {
        transition: none !important;
    }
}