/* Tablet View */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    .features-side {
        flex: 2 !important;
        background: #D7EEF2;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat;
        display: block !important;
    }
    .login-side {
        flex: 2 !important;
        padding: 5px !important;
    }
    #loginContainer{
        flex-direction:row !important;
    }
    .login-header img{
        height:49px !important;
    }
    .form-container{
        padding:0px 20px !important;
    }
    .logo{
        display:none !important;
    }
}

/*@media only screen and (max-width: 768px) {
    .features-side {
        display: none !important;
    }

    .login-side {
        padding: 0px !important;
    }

    .form-container {
        padding: 10px 30px !important;
    }
}*/
@media only screen and (max-width: 767px) {
    .features-side {
        display: none !important;
    }

    .login-side {
        padding: 0px !important;
    }

    .form-container {
        padding: 10px 30px !important;
    }

    .login-header img {
        height: 50px !important;
    }

    .logo img {
        display: none !important;
    }

    #liveDateTime {
        flex-wrap: wrap !important;
    }

    #customer_select_modal .modalSutoFit {
        max-width: 80% !important;
    }

    #add_Party .modalSutoFit {
        max-width: 80% !important;
    }

    #add_Party .modalSutoFit {
        max-width: 80% !important;
    }


    #add_Party .text-end {
        justify-content: center !important;
        text-align: center !important;
        row-gap: 10px;
    }


        #add_Party .text-end .col-sm-6,
        #add_Party .text-end .col-md-1 {
            width: 48% !important;
            max-width: 48% !important;
            padding: 0 6px !important;
        }


        #add_Party .text-end .btn {
            width: 100% !important;
            justify-content: center !important;
        }

    #salaryStructureSiteNew .col-md-1 {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
        padding-right: 10px !important;
    }

    #salaryStructureSiteNew #btnAddStruct {
        min-width: 100px;
    }

    #salaryBtnRow {
        display: flex !important;
        justify-content: flex-end !important;
        margin-right: 15px !important;
    }

        #salaryBtnRow .col-md-1 {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;
        }

    #btnAddStruct {
        width: 100px !important;
    }

    .wage-history-btns .mb-2 .modalSutoFit {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .wage-history-btns .btn.modalSutoFit {
        margin: 0 !important;
    }

    .InventoryModal1,
    .InventoryModal2 {
        max-width: 91% !important;
        width: 90% !important;
        margin: 10px auto !important
    }

        .InventoryModal1 .modal-content,
        .InventoryModal2 .modal-content,
        .InventoryModal1 .modal-body,
        .InventoryModal2 .modal-body {
            overflow-x: hidden !important;
            padding: 10px !important;
        }

        .InventoryModal1 .col-md-2,
        .InventoryModal1 .col-md-3,
        .InventoryModal1 .col-md-4,
        .InventoryModal1 .col-md-6,
        .InventoryModal1 .col-md-12,
        .InventoryModal2 .col-md-2,
        .InventoryModal2 .col-md-3,
        .InventoryModal2 .col-md-4,
        .InventoryModal2 .col-md-6,
        .InventoryModal2 .col-md-12 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            /* width: 100% !important;
            margin-bottom: 12px !important;*/
        }

        .InventoryModal1 .select2-container,
        .InventoryModal2 .select2-container {
            width: 100% !important;
        }

        .InventoryModal1 #submitBtn,
        .InventoryModal1 #clearBtn,
        .InventoryModal2 #submitBtn,
        .InventoryModal2 #clearBtn {
            width: 100% !important;
        }

    #btnManageInventoryModal .VendorModal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }


    #btnManageInventoryModal .modal-content,
    #btnManageInventoryModal .modal-body {
        overflow-x: hidden !important;
    }

    #btnManageInventoryModal .modal-body {
        padding: 10px !important;
    }


    #btnManageInventoryModal .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }


    #btnManageInventoryModal .select2-container {
        width: 100% !important;
    }


    #btnManageInventoryModal .row:last-child .col-md-12 {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #btnManageInventoryModal #SubmitTBL {
        width: auto !important;
        min-width: 130px;
    }


    #btnManageInventoryModal fieldset {
        margin-bottom: 15px !important;
    }

    .ManageInventoryModal1,
    .ManageInventoryModal2 {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }


        .ManageInventoryModal1 .modal-content,
        .ManageInventoryModal2 .modal-content,
        .ManageInventoryModal1 .modal-body,
        .ManageInventoryModal2 .modal-body {
            overflow-x: hidden !important;
            padding: 12px !important;
        }

        .ManageInventoryModal1 .row > [class*="col-"],
        .ManageInventoryModal2 .row > [class*="col-"] {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            margin-bottom: 12px;
        }

        .ManageInventoryModal1 .select2-container,
        .ManageInventoryModal2 .select2-container {
            width: 100% !important;
        }

        .ManageInventoryModal1 .col-md-2 button,
        .ManageInventoryModal2 .col-md-2 button {
            width: 100% !important;
        }


        .ManageInventoryModal1 .table-responsive,
        .ManageInventoryModal2 .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }


        .ManageInventoryModal1 .d-flex,
        .ManageInventoryModal2 .d-flex {
            flex-direction: column;
            gap: 10px !important;
        }

        .ManageInventoryModal1 .inventory-btn-group,
        .ManageInventoryModal2 .inventory-btn-group {
            display: flex !important;
            justify-content: space-between !important;
            gap: 10px;
        }

            .ManageInventoryModal1 .inventory-btn-group .btn,
            .ManageInventoryModal2 .inventory-btn-group .btn {
                flex: 1;
                width: auto !important;
            }

    .inventory-action-btns {
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

        .inventory-action-btns #submitBtn,
        .inventory-action-btns #clearBtn {
            flex: 1;
            width: auto !important;
            min-width: 0;
        }

    .AssignBranchModal,
    .ReturnBranchModal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }

        .AssignBranchModal .modal-content,
        .ReturnBranchModal .modal-content {
            overflow-x: hidden !important;
        }

        .AssignBranchModal .modal-body,
        .ReturnBranchModal .modal-body {
            padding: 12px !important;
            overflow-x: hidden !important;
        }

        .AssignBranchModal .row > div,
        .ReturnBranchModal .row > div {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            margin-bottom: 12px;
        }

        .AssignBranchModal .select2-container,
        .ReturnBranchModal .select2-container {
            width: 100% !important;
        }

        /* Table Horizontal Scroll */
        .AssignBranchModal .table-responsive,
        .ReturnBranchModal .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .AssignBranchModal table,
        .ReturnBranchModal table {
            min-width: 650px;
        }

        /* Bottom Buttons */
        .AssignBranchModal .col-md-12.d-flex,
        .ReturnBranchModal .col-md-12.d-flex {
            display: flex !important;
            justify-content: space-between !important;
            gap: 10px !important;
        }

            .AssignBranchModal .col-md-12.d-flex .btn,
            .ReturnBranchModal .col-md-12.d-flex .btn {
                flex: 1;
                width: auto !important;
            }

        /* Add Button */
        .AssignBranchModal .col-md-2 button,
        .ReturnBranchModal .col-md-2 button {
            width: 100% !important;
        }


    .ManageDutyModal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }

        .ManageDutyModal .modal-content {
            overflow-x: hidden !important;
        }

        .ManageDutyModal .modal-body {
            padding: 12px !important;
            overflow-x: hidden !important;
        }

        .ManageDutyModal .row > div {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            margin-bottom: 12px;
        }

        .ManageDutyModal .select2-container {
            width: 100% !important;
        }


        .ManageDutyModal .col-md-12.d-flex {
            display: flex !important;
            justify-content: space-between !important;
            gap: 10px !important;
        }

        .ManageDutyModal #btnAdd,
        .ManageDutyModal #btnSubmit {
            flex: 1;
            width: auto !important;
        }

        .ManageDutyModal fieldset {
            margin-bottom: 15px;
        }

    .DutyViewResponsiveModal {
        max-width: 95% !important;
        width: 95% !important;
        margin: 10px auto !important;
    }

        .DutyViewResponsiveModal .modal-body {
            padding: 15px !important;
        }

        .DutyViewResponsiveModal .DutyViewForm {
            padding: 0 !important;
        }

        .DutyViewResponsiveModal .DutyViewField {
            padding: 15px !important;
        }

        .DutyViewResponsiveModal .DutyViewCol {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            margin-bottom: 15px;
        }

        .DutyViewResponsiveModal .DutyViewTimeRow {
            display: block !important;
        }

        .DutyViewResponsiveModal .DutyViewTo {
            display: none;
        }

        .DutyViewResponsiveModal .select2-container {
            width: 100% !important;
        }

        .DutyViewResponsiveModal .DutyViewFooter {
            display: block !important;
        }

        .DutyViewResponsiveModal .DutyViewSubmit {
            width: 100% !important;
            margin-top: 10px;
        }

        .DutyViewResponsiveModal .DutyViewCheck {
            display: flex;
            align-items: center;
            gap: 8px;
        }

    .RecruitmentProcessModal {
        max-width: 90% !important;
        width: 90% !important;
        margin: 10px auto !important;
    }

        .RecruitmentProcessModal .modal-body {
            padding: 15px !important;
        }

        .RecruitmentProcessModal .container {
            padding: 20% !important;
        }

        .RecruitmentProcessModal .row {
            row-gap: 12px;
        }

        .RecruitmentProcessModal .col-md-1,
        .RecruitmentProcessModal .col-md-2,
        .RecruitmentProcessModal .col-md-4,
        .RecruitmentProcessModal .col-md-5,
        .RecruitmentProcessModal .col-lg-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
        }

        .RecruitmentProcessModal .recruit-card {
            margin-bottom: 15px;
        }

        .RecruitmentProcessModal #AadharVerification .row {
            padding: 15px !important;
        }

        .RecruitmentProcessModal #AadharVerification button {
            width: 100% !important;
        }

        .RecruitmentProcessModal #AadhaarTime {
            text-align: center;
            font-size: 20px;
            margin-top: 5px;
        }

        .RecruitmentProcessModal .aadhaar-logo {
            max-width: 70px;
            height: auto;
        }

        .RecruitmentProcessModal .card-title,
        .RecruitmentProcessModal .card-subtitle {
            display: block;
            text-align: center;
        }

    #EmployeeListForGenerateIdCard .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    #EmployeeListForGenerateIdCard .modal-body {
        padding: 15px !important;
    }

    #EmployeeListForGenerateIdCard fieldset {
        padding: 15px !important;
    }

    /* First Row */
    #EmployeeListForGenerateIdCard .row.mb-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    /* Left Section */
    #EmployeeListForGenerateIdCard .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }

        /* Employee Dropdown */
        #EmployeeListForGenerateIdCard .col-md-8 > div:first-child {
            width: 100% !important;
            margin-bottom: 15px;
        }


        #EmployeeListForGenerateIdCard .col-md-8 .d-flex {
            display: flex !important;
            width: 100%;
            gap: 10px;
        }

            #EmployeeListForGenerateIdCard .col-md-8 .d-flex .btn {
                flex: 1;
            }


    #EmployeeListForGenerateIdCard .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #EmployeeListForGenerateIdCard .datatable_search {
        width: 100% !important;
    }


    #EmployeeListForGenerateIdCard .table-responsive {
        overflow-x: auto;
    }
    #header-search {
        display: none !important;
    }
    /* ADD HERE:
   Contract ticker ko mobile par hide karega */
    .header-contract-area {
        display: none !important;
    }
    /* ADD HERE:
   Company + Flag + Profile ka mobile alignment */
    .header-company-area {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
    }
    /* ADD HERE:
   Sirf company name ko control karega */
    .header-company-name {
        max-width: 139px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    /* Existing ID - sirf header company name */
    #navcompid {
        max-width: 139px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 20px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* ADD HERE:
   Sirf India flag */
    .header-company-flag {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

        .header-company-flag img {
            width: 25px !important;
            height: auto !important;
            display: block !important;
        }
    /* ADD HERE:
   Sirf header ka profile dropdown */
    .header-company-area .profile-dropdown {
        flex-shrink: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        z-index: 1055 !important;
    }
        /* ADD HERE:
   Profile dropdown mobile position */
        .header-company-area .profile-dropdown .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            right: 0 !important;
            left: auto !important;
            transform: none !important;
            z-index: 1055 !important;
            min-width: 250px !important;
            max-width: calc(100vw - 20px) !important;
        }
        /* ADD HERE:
   Profile button clickable rahe */
        .header-company-area .profile-dropdown .dropdown-toggle {
            cursor: pointer !important;
            pointer-events: auto !important;
        }
    /* Existing fullscreen button - mobile only */
    .btnFullscreen {
        display: none !important;
    }

    #contractTicker {
        display: none !important;
    }

    /* ===== ONLY THIS NEW RULE ===== */
    .mobile-user-menu {
        display: block !important;
    }
    .erp-mobile-menu {
        display: none !important;
    }
    .reset-password-wrapper {
        height: auto !important;
        min-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 15px 10px !important;
    }

    .reset-password-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 15px !important;
        padding-top: 10px !important;
    }


    /* Image */
    .reset-password-image {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 5px 20px !important;
    }

        .reset-password-image img {
            width: 75% !important;
            max-width: 300px !important;
            height: auto !important;
        }


    /* Form Section */
    .reset-password-form-section {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid lightgray;
        display: flex !important;
        justify-content: center !important;
        padding: 20px 5px 10px !important;
    }


    /* Form Width */
    .reset-password-form {
        width: 100% !important;
        max-width: 500px !important;
    }


        /* Heading */
        .reset-password-form h2 {
            font-size: 24px !important;
            margin-bottom: 15px !important;
        }


        /* Description */
        .reset-password-form .text-center p {
            font-size: 13px !important;
            line-height: 20px !important;
            padding: 0 5px !important;
        }


        /* Inputs */
        .reset-password-form .form-control {
            width: 100% !important;
            height: 44px !important;
        }


        /* Labels */
        .reset-password-form .form-label {
            font-size: 14px !important;
        }


        /* Button */
        .reset-password-form button {
            height: 44px !important;
            font-size: 14px !important;
        }

    /* //--------------------------------------------------------------SuperAdmin Mobile Responsive--------------------------------------------------------------------//*/

}


@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #customer_select_modal .modalSutoFit {
        max-width: 50% !important;
    }
    .RecruitmentProcessModal {
        max-width: 40% !important;
    }
    .InventoryModal1 {
        max-width: 65% !important;
    }

    .InventoryModal2 {
        max-width: 70% !important;
    }

    #btnManageInventoryModal .VendorModal {
        max-width: 90% !important;
    }
    .ManageInventoryModal1 {
        max-width: 65% !important;
    }

    .ManageInventoryModal2 {
        max-width: 70% !important;
    }

    .AssignBranchModal {
        max-width: 65% !important;
    }

    .ReturnBranchModal {
        max-width: 70% !important;
    }
    .ManageDutyModal {
        max-width: 40% !important;
    }
    .ManageDutyViewModal{
    max-width:40% !important;
}
  /*  .profile-dropdown img.ProPic {
        width: 49px !important;
        height: 49px !important;
    }*/
/*    .profile-dropdown img.ProPic {
        width: 29px !important;
        height: 29px !important;
    }*/
}

@media only screen and (min-width: 1400px) {
    #customer_select_modal .modalSutoFit {
        max-width: 50% !important;
    }
    .RecruitmentProcessModal {
        max-width: 40% !important;
    }
    .InventoryModal1 {
        max-width: 65% !important;
    }

    .InventoryModal2 {
        max-width: 70% !important;
    }
    #btnManageInventoryModal .VendorModal {
        max-width: 90% !important;
    }
    .ManageInventoryModal1 {
        max-width: 65% !important;
    }

    .ManageInventoryModal2 {
        max-width: 70% !important;
    }
    .AssignBranchModal {
        max-width: 65% !important;
    }

    .ReturnBranchModal {
        max-width: 70% !important;
    }

    .ManageDutyModal {
        max-width: 40% !important;
    }

    .ManageDutyViewModal {
        max-width: 40% !important;
    }
   /*  .profile-dropdown img.ProPic {
        width: 49px !important;
        height: 49px !important;
    }*/
   /* .profile-dropdown img.ProPic {
        width: 29px !important;
        height: 29px !important;
    }*/
}